:root {
  --bg: #f6f3ec;
  --surface: #fffdf8;
  --ink: #1d2320;
  --muted: #66706a;
  --line: #e4ddcf;
  --accent: #1f5f4f;
  --accent-ink: #fff;
  --accent-soft: #e2efe9;
  --good: #2e7d4f;
  --good-soft: #e3f2e8;
  --fair: #b07a12;
  --fair-soft: #fbf0d7;
  --weak: #b23a2e;
  --weak-soft: #f9e3df;
  --new: #2f63a8;
  --none: #c9c3b6;
  --radius: 14px;
  --font: "Noto Naskh Arabic", "Amiri", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121614; --surface: #1b211e; --ink: #e8ece9; --muted: #9aa59f; --line: #2c3530;
    --accent: #5fb39a; --accent-ink: #0d1411; --accent-soft: #1f3a31;
    --good: #6cc08d; --good-soft: #1d3326; --fair: #e0b04f; --fair-soft: #3a2f17;
    --weak: #ef7f72; --weak-soft: #3d201c; --new: #7aa7e6; --none: #47504b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.6 var(--font);
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
}
h1 { font-size: 1.45rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 0; }
p { margin: .35rem 0; }
.muted { color: var(--muted); font-size: .9rem; }
.hint { color: var(--muted); font-size: .82rem; margin: .4rem 0 0; }
.main { max-width: 640px; margin: 0 auto; padding: 16px 16px 24px; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }

/* الأزرار */
.btn {
  font: inherit; font-size: .95rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: .55rem 1rem; border-radius: 999px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: .3rem;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn--ghost { background: transparent; }
.btn--warn { background: var(--fair); border-color: var(--fair); color: #fff; }
.btn--danger { color: var(--weak); border-color: var(--weak); background: transparent; }
.btn--block { width: 100%; justify-content: center; }
.btn:focus-visible, .rate__btn:focus-visible, .link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.link { font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 0; }

/* رأس اليوم */
.today-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; }
.streak {
  min-width: 64px; text-align: center; background: var(--accent-soft); color: var(--accent);
  border-radius: var(--radius); padding: .35rem .6rem; line-height: 1.1;
}
.streak b { display: block; font-size: 1.6rem; }
.streak span { font-size: .8rem; }
.tag { background: var(--fair-soft); color: var(--fair); border-radius: 6px; padding: 0 .35rem; }
.estimate { font-size: .9rem; color: var(--muted); margin: .25rem 0 .75rem; }
.estimate.is-over { color: var(--fair); }

/* اللافتات */
.banner { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .75rem; }
.banner--warn { background: var(--fair-soft); border-color: transparent; }
.banner--cons { background: var(--accent-soft); border-color: transparent; }
.progress { height: 8px; background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 99px; overflow: hidden; margin: .5rem 0; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

/* بطاقات المسارات */
.track, .card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; margin-bottom: .75rem;
}
.track__head { display: flex; align-items: center; gap: .75rem; }
.track__num {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700;
}
.track__title { flex: 1; min-width: 0; }
.track__title p { margin: 0; }
.track.is-done { opacity: .78; }
.track.is-done .track__num { background: var(--good); color: #fff; }
.track.is-locked { border-style: dashed; }
.track__actions { margin-top: .75rem; }
.pill { font-size: .8rem; border-radius: 99px; padding: .15rem .6rem; background: var(--bg); color: var(--muted); white-space: nowrap; }
.pill--todo { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.pill--done { background: var(--good-soft); color: var(--good); font-weight: 700; }
.pill--lock { background: var(--fair-soft); color: var(--fair); }

.summary { margin: .75rem 0 0; }
.summary-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.summary-list li { padding: .3rem 0; border-top: 1px solid var(--line); }
.summary-list li:first-child { border-top: 0; }

/* الأثمان والتقييم */
.units { list-style: none; margin: .75rem 0 0; padding: 0; }
.unit { padding: .6rem 0; border-top: 1px solid var(--line); }
.unit__name { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .4rem; }
.unit__name small { display: block; color: var(--muted); font-size: .82rem; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: .55rem; background: var(--none); }
.dot--good { background: var(--good); } .dot--fair { background: var(--fair); }
.dot--weak { background: var(--weak); } .dot--new { background: var(--new); }
.rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.rate__btn {
  font: inherit; font-size: .85rem; min-height: 40px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.rate__btn--good[aria-pressed="true"] { background: var(--good); border-color: var(--good); color: #fff; }
.rate__btn--fair[aria-pressed="true"] { background: var(--fair); border-color: var(--fair); color: #fff; }
.rate__btn--weak[aria-pressed="true"] { background: var(--weak); border-color: var(--weak); color: #fff; }

/* النماذج */
.form { display: grid; gap: .85rem; }
.form label { display: grid; gap: .25rem; font-size: .95rem; }
.form label.check { display: flex; align-items: center; gap: .5rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset .row { flex-wrap: nowrap; }
fieldset select { width: auto; flex: none; }
legend { font-weight: 700; margin-bottom: .35rem; padding: 0; }
select, input[type="number"] {
  font: inherit; font-size: 1rem; min-height: 44px; padding: .4rem .6rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); max-width: 100%;
}
fieldset select:first-child { flex: 1 1 0; min-width: 0; width: 100%; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
.card h2 { margin-bottom: .5rem; }
.card .row + .row { margin-top: .5rem; }

/* التنقّل السفلي */
.nav {
  position: fixed; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.nav a { text-align: center; padding: .9rem 0; color: var(--muted); text-decoration: none; font-size: .9rem; }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 700; box-shadow: inset 0 3px 0 var(--accent); }

.toast {
  position: fixed; inset-inline: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 420px;
  background: var(--ink); color: var(--bg); border-radius: 12px; padding: .7rem 1rem; text-align: center;
  opacity: 0; transform: translateY(8px); transition: .2s; pointer-events: none;
}
.toast.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ===================== v2: الوضوح ===================== */
:root { --fair-ink: #8f6210; --track-near: #1f5f4f; --track-far: #5d9c88; --track-new: #a9cfc2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fair-ink: #e0b04f; --track-near: #5fb39a; --track-far: #3f8170; --track-new: #2c5a4d; }
}
h3 { font-size: 1rem; margin: 0 0 .4rem; }
.small { font-size: .8rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn--grow { flex: 1; justify-content: center; }
.btn--lg { min-height: 50px; font-size: 1.05rem; }
.btn--accent { color: var(--accent); }
.btn--outline-warn { border-color: var(--fair-ink); color: var(--fair-ink); background: var(--surface); }
.tag--weak { background: var(--weak-soft); color: var(--weak); }

/* خطوات اليوم */
.steps { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: .82rem; color: var(--muted); }
.steps__item { display: flex; flex-direction: column; gap: 4px; }
.steps__item span { height: 5px; border-radius: 9px; background: var(--line); }
.steps__item.is-current { color: var(--accent); font-weight: 700; }
.steps__item.is-current span { background: var(--accent); }
.steps__item.is-done { color: var(--good); }
.steps__item.is-done span { background: var(--good); }
.steps__item.is-empty { opacity: .6; }

/* الوقت */
.time { display: grid; gap: .55rem; }
.time h2 { font-size: 1rem; }
.time__num { font-size: 1.3rem; }
.time__num.is-over { color: var(--fair-ink); }
.tbar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--line); }
.tbar__seg--near { background: var(--track-near); } .tbar__seg--far { background: var(--track-far); } .tbar__seg--new { background: var(--track-new); }
.tbar__seg.is-done { opacity: .35; }
.keys { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .82rem; color: var(--muted); }
.key { display: inline-flex; align-items: center; gap: .35rem; }
.key__sw { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.key__sw--near { background: var(--track-near); } .key__sw--far { background: var(--track-far); } .key__sw--new { background: var(--track-new); }
.key__sw--none { background: var(--line); outline: 1px solid var(--none); }
.key__sw--good, .key__sw--done { background: var(--good); } .key__sw--fair { background: #d9a441; }
.key__sw--part { background: var(--fair); } .key__sw--miss { background: var(--weak); }
.time__warn { background: var(--fair-soft); border-radius: 10px; padding: .6rem .75rem; display: grid; gap: .4rem; }
.time__warn p { margin: 0; font-size: .9rem; }

/* المسارات */
.track.is-current { border: 2px solid var(--accent); }
.track.is-current .track__num { background: var(--accent); color: var(--accent-ink); }
.track__num { font-size: .95rem; }
.pill--lock { display: inline-flex; align-items: center; gap: .25rem; }
.summary-list small, .unit__name small { display: block; color: var(--muted); font-size: .82rem; }
.legend { display: flex; flex-wrap: wrap; gap: .2rem .75rem; font-size: .78rem; color: var(--muted); margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.legend span { display: inline-flex; align-items: center; gap: .3rem; }
.legend .dot { margin: 0; width: 9px; height: 9px; }
.rate__btn { min-height: 44px; }
.rate__btn--fair[aria-pressed="true"] { background: var(--fair-ink); border-color: var(--fair-ink); }
.track__foot { margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--line); display: grid; gap: .4rem; }
.track__foot .hint { margin: 0; }

/* البداية */
.mushaf-bar { margin: 0 0 .75rem; display: grid; gap: .4rem; }
.mushaf-bar .row { font-size: .8rem; }
.mbar { display: flex; height: 16px; border-radius: 6px; overflow: hidden; background: var(--line); }
.mbar span { display: block; height: 100%; }
.mbar__none { background: var(--line); } .mbar__fair { background: #d9a441; } .mbar__good { background: var(--good); }
.mbar__weak { background: var(--weak); } .mbar__new { background: var(--new); }
.mbar--status .mbar__fair { background: var(--fair); }
fieldset.card { display: grid; gap: .5rem; }
fieldset.card legend { float: right; width: 100%; font-size: 1.05rem; margin: 0; }
fieldset.card legend + * { clear: both; }
.pick { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: .5rem; }
.pick label { display: grid; gap: .15rem; font-size: .8rem; color: var(--muted); }
.pick select { width: 100%; }
.preview { margin: 0; background: var(--accent-soft); color: var(--ink); border-radius: 10px; padding: .5rem .75rem; font-size: .9rem; }
.preview-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.preview-list li { display: flex; gap: .5rem; align-items: baseline; }
.preview-list .is-error { color: var(--weak); }
.form label.check--card { align-items: flex-start; gap: .65rem; }
.check--card input { margin-top: .3rem; flex: none; }
.check--card small { display: block; color: var(--muted); font-size: .85rem; }
.form > label.card { display: grid; gap: .35rem; }

/* الإعدادات */
.group { display: grid; gap: .7rem; }
.group h2 { margin: 0; }
.form label.field { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.group h2 + .field, .group fieldset + .field { border-top: 0; padding-top: 0; }
.field__label { display: grid; }
.field__label small { color: var(--muted); font-size: .8rem; }
.field input[type="number"] { width: 88px; text-align: center; flex: none; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--line); border-radius: 12px; padding: 4px; margin-top: .3rem; }
.form .seg label { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; border-radius: 9px; cursor: pointer; color: var(--muted); }
.seg label:has(input:checked) { background: var(--surface); color: var(--accent); font-weight: 700; }
.seg input { accent-color: var(--accent); }
details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent); font-weight: 600; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.grid2 .btn { justify-content: center; }
.hint--warn { color: var(--fair-ink); }

/* المؤشرات */
.big { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.big b { font-size: 2.2rem; line-height: 1; color: var(--accent); }
.big span { color: var(--muted); font-size: .9rem; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.kpi { background: var(--bg); border-radius: 12px; padding: .6rem .75rem; display: grid; gap: .1rem; align-content: start; }
.kpi__label { font-size: .8rem; color: var(--muted); }
.kpi__value { font-size: 1.5rem; line-height: 1.2; }
.kpi small { font-size: .78rem; color: var(--muted); }
.kpi--accent { background: var(--accent-soft); } .kpi--accent .kpi__value { color: var(--accent); }
.kpi--warn { background: var(--fair-soft); } .kpi--warn .kpi__value { color: var(--fair-ink); }
.line-item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.line-item > span:last-child { text-align: left; }
.line-item small { display: block; color: var(--muted); font-size: .8rem; }
.days { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.days__d { height: 26px; border-radius: 5px; background: var(--line); }
.days__d--done { background: var(--good); } .days__d--part { background: var(--fair); } .days__d--miss { background: var(--weak); opacity: .75; }
.days__d--today { background: transparent; outline: 2px dashed var(--accent); outline-offset: -2px; }
.status-list, .weak-list { list-style: none; margin: 0; padding: 0; }
.status-list li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-top: 1px solid var(--line); }
.status-list li:first-child { border-top: 0; }
.status-list b { margin-inline-start: auto; }
.status-list .dot { margin: 0; }
.weak-list li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.weak-list li:first-child { border-top: 0; }
.weak-list small { display: block; color: var(--muted); font-size: .8rem; }
.weak-list__n { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }

/* التنقّل */
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; min-height: 52px; }
.nav a small { font-size: .7rem; }
.nav a.is-soon { opacity: .6; }