/* ===== KunMuslim — Shared Design Tokens & Components ===== */
:root{
  --ink:#0E2621;
  --ink-deep:#081714;
  --parchment:#EFE6D2;
  --parchment-2:#E7DBBF;
  --parchment-3:#DED0AC;
  --gold:#C69A3D;
  --gold-soft:#D9BA6F;
  --teal:#1F6E5C;
  --teal-soft:#2C8A73;
  --nile:#2E6E8E;
  --coral:#C2694F;
  --text-dark:#1B1B16;
  --text-mid:#5b5647;
  --text-light:#F3ECDA;
  --text-muted:#B9AE8E;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--parchment);
  color:var(--text-dark);
  font-family:'Cairo',sans-serif;
  line-height:1.7;
}
h1,h2,h3,.display{font-family:'Amiri',serif;}
.eyebrow{
  font-family:'Reem Kufi',sans-serif;
  letter-spacing:.08em;
  font-size:.8rem;
  text-transform:uppercase;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* ===== NAV (light variant, for app pages) ===== */
.app-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;background:var(--ink-deep);color:var(--text-light);
}
.logo{display:flex;align-items:center;gap:10px;font-family:'Reem Kufi',sans-serif;font-size:1.05rem;font-weight:600;}
.logo svg{width:26px;height:26px;flex-shrink:0;}
.app-nav .nav-links{display:flex;gap:30px;font-size:.9rem;color:var(--text-muted);}
.app-nav .nav-links a:hover, .app-nav .nav-links a.active{color:var(--gold-soft);}
.avatar{
  width:38px;height:38px;border-radius:50%;background:var(--teal);
  display:flex;align-items:center;justify-content:center;
  font-family:'Reem Kufi',sans-serif;color:var(--text-light);font-size:.9rem;
  border:1.5px solid var(--gold);
}

/* ===== Buttons ===== */
.btn-primary{
  display:inline-block;background:var(--gold);color:var(--ink-deep);font-weight:700;
  padding:14px 30px;border-radius:100px;font-size:.95rem;
  box-shadow:0 8px 20px rgba(198,154,61,.25);transition:transform .2s;
}
.btn-primary:hover{transform:translateY(-2px);}
.btn-outline{
  display:inline-block;border:1.5px solid var(--teal);color:var(--teal);
  padding:13px 28px;border-radius:100px;font-size:.92rem;font-weight:600;transition:.2s;
}
.btn-outline:hover{background:var(--teal);color:var(--text-light);}
.btn-ghost-dark{
  border:1px solid rgba(243,236,218,.3);color:var(--text-light);
  padding:13px 26px;border-radius:100px;font-size:.92rem;
}

/* ===== Star mark (brand signature) ===== */
.star-mark{position:relative;display:inline-block;}
.star-mark svg{width:100%;height:100%;}
.star-outline{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.9;}
.star-outline.inner{stroke:var(--gold-soft);opacity:.55;}

/* ===== Cards / tiles corner motif ===== */
.corner-tile{position:relative;}
.corner-tile::before,.corner-tile::after{
  content:"";position:absolute;width:16px;height:16px;
  border-top:2px solid var(--gold);border-right:2px solid var(--gold);
  top:12px;left:12px;transform:rotate(-90deg);
}
.corner-tile::after{top:auto;left:auto;bottom:12px;right:12px;transform:rotate(90deg);}

/* ===== Footer ===== */
footer.app-footer{background:var(--ink-deep);color:var(--text-muted);padding:40px 0;text-align:center;font-size:.85rem;position:relative;}
footer.app-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to left,transparent,var(--gold),transparent);}

/* ===== Progress ring ===== */
.ring{transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:rgba(27,27,22,.08);stroke-width:8;}
.ring-fg{fill:none;stroke:var(--teal);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s ease;}

/* ===== Quiz interactivity ===== */
.opt.correct{border-color:var(--teal) !important;background:rgba(31,110,92,.12) !important;}
.opt.correct::after{content:" ✓";color:var(--teal);font-weight:700;}
.opt.wrong{border-color:var(--coral) !important;background:rgba(194,105,79,.12) !important;}
.opt.wrong::after{content:" ✗";color:var(--coral);font-weight:700;}
.opt.disabled{pointer-events:none;opacity:.75;}
.q-item.unanswered .opt{border-color:var(--gold);}
.quiz-result{margin-top:18px;padding:14px 18px;border-radius:8px;font-size:.92rem;font-weight:600;}
.quiz-result.ok{background:rgba(31,110,92,.14);border:1px solid var(--teal);color:var(--teal);}
.quiz-result.fail{background:rgba(194,105,79,.14);border:1px solid var(--coral);color:var(--coral);}

@media(max-width:820px){
  .app-nav .nav-links{display:none;}
}

/* ===== Accessibility ===== */
:focus-visible{
  outline:3px solid var(--teal-soft);
  outline-offset:2px;
  border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}
html.hc{
  --ink:#000000;
  --ink-deep:#000000;
  --parchment:#FFFFFF;
  --parchment-2:#F5F5F0;
  --parchment-3:#EBEBE3;
  --gold:#8A6414;
  --gold-soft:#A67C1E;
  --teal:#0F4C3C;
  --teal-soft:#0B6A54;
  --nile:#1B4E70;
  --coral:#A33B1F;
  --text-dark:#000000;
  --text-mid:#26221A;
  --text-light:#FFFFFF;
  --text-muted:#3C3628;
}
html.hc body{background:#FFFFFF;}
html.hc .app-nav,html.hc footer.app-footer{background:#000000;}
html.hc .avatar{border-color:#000000;}
html.hc .btn-primary{color:#000000;}
html.hc .btn-ghost-dark{border-color:#000000;color:#000000;}
html.hc a:hover,html.hc a:focus{text-decoration:underline;}
html.hc .ring-bg{stroke:#CCCCC0;}
html.hc .opt,html.hc input,html.hc select{border-color:#000000 !important;}
html.hc .badge.locked,html.hc .lesson-row.locked,html.hc .stop.locked,html.hc .surah-tile{opacity:1 !important;}

/* ===== الوضع الليلي ===== */
html.dark{
  --ink:#0E2621;
  --ink-deep:#0A0E0C;
  --parchment:#171B18;
  --parchment-2:#1E2521;
  --parchment-3:#27302A;
  --gold:#D9BA6F;
  --gold-soft:#E6CF90;
  --teal:#3FA98F;
  --teal-soft:#5BC4A9;
  --nile:#5B9CBF;
  --coral:#E08A6A;
  --text-dark:#E8E2D0;
  --text-mid:#B8AF94;
  --text-light:#F3ECDA;
  --text-muted:#8F866A;
}
html.dark body{background:#0E1210;color:var(--text-dark);}
html.dark .app-nav,html.dark footer.app-footer{background:#070A09;color:var(--text-muted);}
html.dark input[type=text],html.dark input[type=email],html.dark input[type=password],html.dark select{
  background:#1E2521;color:var(--text-dark);border-color:rgba(232,226,208,.18);
}
html.dark .opt{background:#171B18;border-color:rgba(232,226,208,.15);color:var(--text-dark);}
html.dark .opt:hover{border-color:var(--teal);}
html.dark .reminder-banner{background:linear-gradient(120deg,#1E2521,#242C27);border-color:rgba(217,186,111,.4);color:var(--text-dark);}
html.dark .reminder-banner .eyebrow{color:var(--gold-soft);}
html.dark .ring-bg{stroke:rgba(232,226,208,.15);}
html.dark .switch-ui{background:rgba(232,226,208,.2);}
html.dark .search-box input,html.dark .tasbih .dhikr-pick select{color:var(--text-dark);}
html.dark ::placeholder{color:var(--text-muted);}