:root{
  --night:#102A33; --deep:#0B1F26; --mist:#EAF0EC; --ink:#17262B; --muted:#4F6168;
  --lamp:#E2A53B; --line:#CBD8D2; --surface:#FFFFFF; --bg:#EAF0EC; --text:#17262B; --soft:#F5F8F6;
  --focus:#B86E00;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0B1F26; --surface:#123039; --text:#EAF0EC; --muted:#A9BCC2; --line:#24474F; --soft:#0F2830; --focus:#F2C36B; color-scheme:dark; }
}
*{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font:1.0625rem/1.6 "Atkinson Hyperlegible",system-ui,sans-serif;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
html[dir=rtl] body{font-family:"Noto Naskh Arabic","Atkinson Hyperlegible",serif;line-height:1.9}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:.5rem;top:-200px;background:var(--lamp);color:#000;padding:.6rem 1rem;z-index:20}
.skip:focus{top:.5rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.1rem;max-width:44rem;margin:0 auto}
.brand{display:flex;gap:.55rem;align-items:center;font-weight:700;font-size:1.05rem}
.brand img{border-radius:8px}
main{max-width:44rem;margin:0 auto;padding:0 1.1rem 2rem}
h1{font-size:1.75rem;line-height:1.25;margin:.6rem 0 .3rem}
h2{font-size:1.2rem;margin:1.6rem 0 .5rem}
.lead{color:var(--muted);margin:0 0 1.2rem}
.pill{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:.4rem .95rem;font:inherit;cursor:pointer;min-height:44px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.6rem 1.2rem;border-radius:12px;border:0;background:var(--night);color:#fff;font:inherit;font-weight:700;cursor:pointer}
@media (prefers-color-scheme:dark){.btn{background:var(--lamp);color:#1B1300}}
.btn.ghost{background:transparent;color:var(--text);border:2px solid var(--line)}
.row{display:flex;gap:.7rem;align-items:center}
.row.wrap{flex-wrap:wrap;margin-top:1rem}
.row label{display:flex;flex-direction:column;gap:.25rem;font-weight:700;flex:1 1 14rem}
select,textarea{font:inherit;color:var(--text);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:.6rem;width:100%}
textarea{margin:.2rem 0 .8rem;resize:vertical}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.1rem;margin:1rem 0}
.msg{color:var(--muted);margin:.5rem 0 0;min-height:1.2em}

/* moods: the one bold thing — a horizon of lamps */
.moods{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.mood{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.8rem .2rem;border-radius:14px;border:2px solid transparent;background:var(--surface);color:var(--text);font:inherit;cursor:pointer;min-height:96px}
.mood i{display:block;width:38px;height:38px;border-radius:50%;background:var(--c);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 22%,transparent)}
.mood b{font-size:.9rem;font-weight:700;text-align:center}
.mood.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--surface))}
@media (max-width:380px){.moods{grid-template-columns:repeat(3,1fr)}}

.reading{margin-top:1.4rem}
.ayah{background:var(--surface);border-inline-start:6px solid var(--c,var(--lamp));border-radius:4px 16px 16px 4px;padding:1.2rem;margin-bottom:1rem}
.ar{font-family:Amiri,"Noto Naskh Arabic",serif;font-size:1.65rem;line-height:2.1;direction:rtl;text-align:right;margin:0 0 .8rem}
.tr{margin:0 0 .5rem}
.tr.ur{font-family:"Noto Naskh Arabic",serif;direction:rtl;text-align:right;line-height:2}
.ref{color:var(--muted);font-size:.9rem;margin:0}
.next{margin-top:.2rem}
.streak{font-weight:700;margin-top:1.2rem}

.yearNav{display:flex;gap:1rem;align-items:center;margin-bottom:.6rem;font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-bottom:.8rem;font-size:.9rem}
.legend span{display:inline-flex;gap:.35rem;align-items:center}
.legend i{width:14px;height:14px;border-radius:3px;background:var(--c)}
.pixels{display:grid;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));gap:3px}
.pixels div{aspect-ratio:1;border-radius:3px;background:var(--soft);border:1px solid var(--line)}
.pixels div.m{border-color:transparent;background:var(--c)}
.journal{padding-inline-start:1.2rem}
.journal li{margin:.4rem 0}
.journal time{color:var(--muted);font-size:.9rem;display:block}

.times{width:100%;border-collapse:collapse;background:var(--surface);border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.times th,.times td{padding:.8rem 1rem;text-align:start;border-bottom:1px solid var(--line)}
.times td{text-align:end;font-weight:700;font-variant-numeric:tabular-nums}
.times tr.now{background:color-mix(in srgb,var(--lamp) 20%,transparent)}
.qibla{text-align:center}
.dial{position:relative;width:200px;height:200px;margin:1rem auto;border-radius:50%;border:3px solid var(--line);background:var(--soft)}
.dial .n{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--muted)}
.needle{position:absolute;left:50%;top:50%;width:6px;height:86px;margin-left:-3px;margin-top:-86px;background:var(--lamp);border-radius:3px;transform-origin:50% 100%;transition:transform .2s}
@media (prefers-reduced-motion:reduce){.needle{transition:none}}

.zikr .count{display:flex;gap:.8rem;align-items:center;margin-top:.6rem}
.tasbeeh{text-align:center}
.tap{width:180px;height:180px;border-radius:50%;border:0;background:var(--night);color:#fff;font:700 2.6rem/1 "Atkinson Hyperlegible",sans-serif;cursor:pointer;margin:.6rem auto;display:block}
@media (prefers-color-scheme:dark){.tap{background:var(--lamp);color:#1B1300}}
.links{list-style:none;padding:0;margin:0}
.links li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem;margin:.6rem 0}
.links a{font-weight:700;display:block}
.links span{color:var(--muted);font-size:.95rem}

.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--deep);padding-bottom:env(safe-area-inset-bottom,0px);z-index:10}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.55rem .2rem;background:none;border:0;color:#A9BCC2;font:inherit;font-size:.8rem;cursor:pointer;min-height:60px}
.tabs button span{font-size:1.25rem;line-height:1}
.tabs button[aria-current=page]{color:var(--lamp)}
.tabs button b{font-weight:700}
@media (min-width:900px){
  .tabs{justify-content:center}
  .tabs button{flex:0 0 8rem;flex-direction:row;gap:.4rem;font-size:.95rem}
}
.tl{font-style:italic;color:var(--muted);margin:0 0 .5rem}
.sukoon{border-inline-start:6px solid var(--lamp)}
.btn.big{width:100%;min-height:72px;font-size:1.25rem}
.aid{padding-left:1.4em;margin:.5em 0}
.aid li{margin:.6em 0}
.aid p{margin:.2em 0}
[dir=rtl] .aid{padding-left:0;padding-right:1.4em}