:root{
  --paper:#FBFAF6;
  --paper-2:#F3F1EA;
  --rule:#CBDAE8;
  --ink:#1B2A3A;
  --ink-soft:#63748A;
  --ink-faint:#9AA8B8;
  --line:#E3E0D6;
  --done:#2E7D4F;
  --done-bg:#E6F2EA;
  --miss:#B4443A;
  --miss-bg:#F7E9E7;
  --accent:#2B5C8A;
  --accent-bg:#E7EFF7;
  --gold:#B8860B;
  --gold-bg:#F6EFDD;
  --ice:#3D7EA6;
  --ice-bg:#E3F0F7;
  --radius:10px;
  --tap:44px;
}
html[data-theme="dark"]{
  --paper:#141A21;
  --paper-2:#1B222B;
  --rule:#22303C;
  --ink:#E8EDF2;
  --ink-soft:#9DAEBF;
  --ink-faint:#5E7186;
  --line:#26303A;
  --done:#5FCB8E;
  --done-bg:#16301F;
  --miss:#E0685C;
  --miss-bg:#361C19;
  --accent:#6FAEE0;
  --accent-bg:#152838;
  --gold:#D9AE4A;
  --gold-bg:#2E2712;
  --ice:#7BB8DA;
  --ice-bg:#122B38;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.45;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
body.nolines .paper-lines{display:none}
.paper-lines{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,transparent 0 33px,var(--rule) 33px 34px);
  opacity:.18;
}
.wrap{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:0 16px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
input:focus,textarea:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.hand{font-family:'Caveat','Segoe Script','Bradley Hand',cursive}
.ar{font-family:"Geeza Pro","Al Nile","Traditional Arabic","Segoe UI",system-ui,sans-serif;direction:rtl;text-align:right;line-height:1.95;font-size:21px}

/* header */
header.top{padding:14px 0 8px;border-bottom:1px solid var(--line);margin-bottom:14px}
.brandrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.brandleft{display:flex;gap:10px;align-items:flex-start;min-width:0}
.logo{flex:0 0 40px;width:40px;height:40px;border-radius:10px;margin-top:3px}
.brand{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.title{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:2px 0 0}
.title em{font-style:normal;color:var(--accent)}
.daybox{text-align:right;flex:0 0 auto}
.daynum{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1}
.daydate{font-size:12.5px;color:var(--ink-soft)}
.hijri{font-size:11.5px;color:var(--ink-faint)}
.datenav{display:flex;align-items:center;gap:6px;margin-top:10px}
.datenav button{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;font-size:16px;background:var(--paper)}
.datenav .today-chip{flex:1;text-align:center;font-size:13px;color:var(--ink-soft);padding:8px;border:1px dashed var(--line);border-radius:8px}
.backfill{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent)!important;font-weight:600}

/* score */
.score{display:flex;align-items:center;gap:18px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2);margin-bottom:10px}
.ring{position:relative;flex:0 0 96px;width:96px;height:96px}
.ring svg{transform:rotate(-90deg);width:96px;height:96px;display:block}
.ring .fracbox{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.frac{font-family:ui-monospace,monospace;font-size:17px;font-weight:600;line-height:1.05}
.frac small{display:block;font-size:11px;color:var(--ink-soft);font-weight:400}
.pct{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1}
.pct span{font-size:17px;color:var(--ink-soft)}
.scoremeta{font-size:13px;color:var(--ink-soft);margin-top:2px}
.scorebtns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.minibtn{font-size:12.5px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.minibtn.on{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);font-weight:600}
.daystateline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);margin:0 2px 14px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.badge.earned{background:var(--done-bg);color:var(--done)}
.badge.held{background:var(--gold-bg);color:var(--gold)}
.badge.lost{background:var(--miss-bg);color:var(--miss)}
.badge.frozen{background:var(--ice-bg);color:var(--ice)}
.badge.rest{background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line)}
.badge.freezes{background:var(--ice-bg);color:var(--ice)}

/* task rows */
.tasklist{border-top:1px solid var(--line)}
.task{padding:12px 2px;border-bottom:1px solid var(--line)}
.taskhead{display:flex;align-items:center;gap:10px;min-height:var(--tap)}
.tasklabel{flex:1;min-width:0}
.tname{font-weight:500;font-size:16px}
.tmeta{font-size:12px;color:var(--ink-faint);font-family:ui-monospace,monospace;margin-top:2px}
.tpts{font-size:11px;color:var(--ink-faint);font-family:ui-monospace,monospace;flex:0 0 auto}
.infobtn{flex:0 0 auto;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--accent);font-weight:700;font-style:italic;font-family:Georgia,serif}
.check{flex:0 0 auto;width:34px;height:34px;border:2px solid var(--ink-faint);border-radius:8px;display:grid;place-items:center;font-size:19px;color:transparent;transition:.14s}
.check.on{background:var(--done-bg);border-color:var(--done);color:var(--done)}
.task.done .tname{color:var(--ink-soft)}
.detail{margin-top:8px;display:flex;gap:6px;align-items:center}
.detail input{font-size:13px;padding:7px 10px;background:transparent;border-style:dashed}
.detail .chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{font-size:11.5px;padding:4px 9px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);background:var(--paper)}
.detailtoggle{font-size:11.5px;color:var(--ink-faint);padding:4px 6px;flex:0 0 auto}

.slots{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.slot{min-width:56px;height:40px;padding:0 10px;border:1.5px solid var(--line);border-radius:9px;font-size:13px;font-weight:500;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:5px;background:var(--paper)}
.slot.on{border-color:var(--done);background:var(--done-bg);color:var(--done);font-weight:600}
.slot .tick{font-size:12px}

.counter{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.cbtn{min-width:46px;height:40px;padding:0 12px;border:1.5px solid var(--line);border-radius:9px;font-weight:600;font-size:14px;background:var(--paper)}
.cbtn.plus{border-color:var(--accent);color:var(--accent)}
.cval{font-family:ui-monospace,monospace;font-size:15px;font-weight:600;min-width:78px;text-align:center}
.bar{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .2s}
.bar.full i{background:var(--done)}

.writebox{margin-top:10px}
.preview{margin-top:8px;font-size:14px;color:var(--ink-soft);border-left:3px solid var(--rule);padding-left:10px;white-space:pre-wrap}
.preview.veiled{filter:blur(5px);cursor:pointer;user-select:none}

.daynote{margin:14px 0 4px}
.daynote textarea{min-height:44px;background:transparent;border-style:dashed;font-size:14px;resize:vertical}
.daynote .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-bottom:6px;display:block}

/* footer quote */
.quote{margin:22px 0 8px;text-align:center}
.quote .q{font-family:'Caveat',cursive;font-size:26px;line-height:1.25;color:var(--ink)}
.quote .d{font-family:'Caveat',cursive;font-size:22px;color:var(--accent);border-bottom:2px solid var(--accent);display:inline-block;padding-bottom:2px;margin-top:6px}

/* completion banner */
.complete{border:2px solid var(--done);background:var(--done-bg);border-radius:14px;padding:16px;margin-bottom:14px;text-align:center}
.complete .hand{font-size:30px;color:var(--done)}
.complete p{margin:6px 0 10px;font-size:14px;color:var(--ink-soft)}

/* nav */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs button{flex:1;padding:11px 4px 12px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--ink-faint);font-weight:500}
nav.tabs button .ic{font-size:19px;line-height:1}
nav.tabs button.on{color:var(--accent)}

/* sections */
.view{display:none}.view.on{display:block}
h2.sec{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:22px 0 10px;font-weight:600}
.card{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--paper-2);margin-bottom:12px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .lbl{font-size:14.5px}
.row .sub{font-size:12px;color:var(--ink-faint)}

/* history grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.cell{aspect-ratio:1;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--paper);position:relative;overflow:hidden}
.cell .dn{font-size:11px;color:var(--ink-faint);font-family:ui-monospace,monospace}
.cell .cp{font-size:13px;font-weight:700;font-family:ui-monospace,monospace}
.cell .fill{position:absolute;left:0;right:0;bottom:0;background:var(--done);opacity:.16}
.cell.today{border-color:var(--accent);border-width:2px}
.cell.future{opacity:.4}
.cell.st-earned{border-color:var(--done)}
.cell.st-lost{border-color:var(--miss);background:var(--miss-bg)}
.cell.st-frozen{border-color:var(--ice);background:var(--ice-bg)}
.cell.st-rest{background:var(--paper-2)}
.cell.st-held{border-color:var(--gold)}
.cell .st{font-size:10px;line-height:1}
.legend{display:flex;gap:12px;font-size:12px;color:var(--ink-faint);margin-top:10px;flex-wrap:wrap}

/* stats */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{border:1px solid var(--line);border-radius:12px;padding:13px;background:var(--paper-2)}
.stat b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;font-family:ui-monospace,monospace}
.stat span{font-size:12px;color:var(--ink-soft)}
.bars{display:flex;align-items:flex-end;gap:6px;height:110px;margin-top:6px}
.bars div{flex:1;background:var(--accent);border-radius:5px 5px 0 0;min-height:3px;position:relative}
.bars div i{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-size:10px;color:var(--ink-faint);font-style:normal;font-family:ui-monospace,monospace}
.barwrap{padding-bottom:22px}
.misslist .row .lbl{font-size:14px}
.missbar{height:5px;background:var(--line);border-radius:99px;width:110px;overflow:hidden}
.missbar i{display:block;height:100%;background:var(--miss)}

/* buttons */
.btn{display:block;width:100%;padding:13px;border-radius:10px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:600;font-size:15px;text-align:center;margin-top:10px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.danger{background:transparent;color:var(--miss);border-color:var(--miss)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btnrow{display:flex;gap:8px}.btnrow .btn{margin-top:10px}
.btn[disabled]{opacity:.5;cursor:default}

/* profile pills */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pill{padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;font-size:14px;background:var(--paper)}
.pill.on{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);font-weight:600}

/* editor */
.edit-task{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:var(--paper)}
.edit-task .er{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.edit-task input[type=text]{flex:1;min-width:120px}
.edit-task input[type=number]{width:74px;flex:0 0 auto;text-align:center}
.edit-task select{width:auto;flex:0 0 auto;padding:8px 10px;font-size:13px}
.slotedit{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.slotedit .se{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:8px;padding:2px 2px 2px 8px;background:var(--paper-2)}
.slotedit .se input{border:none;background:none;width:64px;padding:4px 2px;font-size:13px}
.slotedit .se button{color:var(--miss);font-size:13px;padding:2px 6px}
.tiny{font-size:11.5px;color:var(--ink-faint);line-height:1.4}

/* sync */
.syncdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ink-faint);margin-right:6px}
.syncdot.ok{background:var(--done)}
.syncdot.pending{background:var(--gold)}
.syncdot.off{background:var(--ink-faint)}
.syncdot.err{background:var(--miss)}
.authform input{margin-bottom:8px}

/* lock screen */
.lock{position:fixed;inset:0;z-index:50;background:var(--paper);display:none;place-items:center;padding:24px}
.lock.on{display:grid}
.lock .inner{width:100%;max-width:300px;text-align:center}

/* toast */
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(12px);z-index:60;background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:999px;font-size:13.5px;opacity:0;transition:.2s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* modal / sheet */
.modal{position:fixed;inset:0;z-index:40;background:rgba(10,16,22,.55);display:none;align-items:flex-end;justify-content:center}
.modal.on{display:flex}
.sheet{background:var(--paper);width:100%;max-width:640px;border-radius:16px 16px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto}
.sheet h3{margin:0 0 12px;font-size:18px}
.sheet textarea{min-height:120px;resize:vertical}
#shareImg{width:100%;border:1px solid var(--line);border-radius:10px;display:block}

/* adhkar sheet */
.dhikr{border-bottom:1px solid var(--line);padding:14px 0}
.dhikr:last-child{border-bottom:none}
.dhikr .cnt{font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-bg);display:inline-block;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.dhikr .tl{font-size:13px;color:var(--ink-soft);margin-top:8px;font-style:italic}
.dhikr .en{font-size:13.5px;color:var(--ink);margin-top:8px}
.dhikr .src{font-size:11.5px;color:var(--ink-faint);margin-top:6px;font-family:ui-monospace,monospace}
.sheet .intro{font-size:13px;color:var(--ink-soft);margin:-6px 0 4px}

@media (min-width:560px){
  .statgrid{grid-template-columns:repeat(4,1fr)}
  .title{font-size:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}