/* ==========================================================
   CodeQuest | کدکوئست — style.css
   فقط HTML + CSS (بدون جاوااسکریپت)
   تعامل‌ها: radio / checkbox / :has() / details
   ========================================================== */

/* ---------- 1. توکن‌ها و تم‌ها ---------- */
:root{
  --bg:#0a0919; --bg-2:#120f2b;
  --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.09);
  --text:#efedff; --muted:#a09dc9;
  --a1:#8b5cf6; --a2:#38bdf8; --a3:#2dd4bf;
  --gold:#fbbf24; --ok:#34d399; --bad:#fb7185;
  --grad:linear-gradient(135deg,var(--a1),var(--a2));
  --code-bg:#0c0b1f; --code-text:#e6e4ff;
  --k:#c4a1ff; --s:#7ee0c3; --n:#ffb86b; --c:#716e9e; --f:#7cc7ff;
  --shadow:none;
  --radius:20px; --nav-h:68px;
  --ease:cubic-bezier(.22,.8,.3,1);
  color-scheme:dark;
}
:root:has(#t-cyber:checked){
  --bg:#050c1d; --bg-2:#0a1631; --a1:#3b82f6; --a2:#22d3ee; --a3:#818cf8;
  --k:#93c5fd; --s:#67e8f9; --f:#a5b4fc; --code-bg:#040a18;
}
:root:has(#t-emerald:checked){
  --bg:#03110e; --bg-2:#08211a; --a1:#10b981; --a2:#2dd4bf; --a3:#a3e635;
  --k:#6ee7b7; --s:#bef264; --f:#5eead4; --code-bg:#020c09;
}
:root:has(#t-midnight:checked){
  --bg:#020204; --bg-2:#0b0c14; --panel:rgba(255,255,255,.035);
  --a1:#6366f1; --a2:#a5b4fc; --a3:#e2e8f0;
  --grad:linear-gradient(135deg,#4f46e5,#8b5cf6);
  --k:#a5b4fc; --s:#cbd5e1; --f:#93c5fd; --code-bg:#000;
}
:root:has(#t-light:checked){
  color-scheme:light;
  --bg:#f4f2ff; --bg-2:#e8e4ff; --panel:#ffffff; --panel-2:#f0ecff;
  --line:rgba(40,30,110,.12); --text:#1b1838; --muted:#5f5c88;
  --a1:#7c3aed; --a2:#0ea5e9; --a3:#0d9488;
  --ok:#059669; --bad:#e11d48; --gold:#d97706;
  --code-bg:#fbfaff; --code-text:#2a2650;
  --k:#7c3aed; --s:#0f766e; --n:#c2410c; --c:#8d8aaf; --f:#0369a1;
  --shadow:0 12px 32px -16px rgba(60,40,160,.28);
}

/* ---------- 2. پایه ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"DotFix","Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  color:var(--text);line-height:1.9;min-height:100dvh;font-weight:400;font-feature-settings:'kern','liga';-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;width:100%;
  -webkit-tap-highlight-color:transparent;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60vmax 46vmax at 88% -12%,color-mix(in oklab,var(--a1) 30%,transparent),transparent 62%),
    radial-gradient(46vmax 38vmax at -8% 46%,color-mix(in oklab,var(--a2) 15%,transparent),transparent 62%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 60% at 50% 0,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0,#000,transparent 75%);
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select{font:inherit;color:inherit}
label{cursor:pointer;user-select:none;-webkit-user-select:none}
svg{flex:none}
.ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--a2);outline-offset:3px}
.sr:focus-visible + *{outline:2px solid var(--a2);outline-offset:3px}

/* ---------- 3. چیدمان کلی ---------- */
.shell{display:grid;grid-template-columns:96px minmax(0,1fr);min-height:100dvh}
.main{min-width:0}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.sec{margin-top:clamp(56px,8vw,104px)}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:22px}
.sec-h h2{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:800;line-height:1.4}
.sec-h p{color:var(--muted);font-size:.9rem}
.link{display:inline-flex;align-items:center;gap:6px;color:var(--a2);font-size:.9rem;font-weight:600}

/* ---------- 4. هدر ---------- */
.top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px clamp(16px,4vw,40px);
  background:color-mix(in oklab,var(--bg) 72%,transparent);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--grad);color:#fff;
  box-shadow:0 8px 24px -8px var(--a1);transform:rotate(-6deg);
}
.brand-t{display:flex;flex-direction:column;line-height:1.15}
.brand-t b{font-weight:900;font-size:1.12rem;letter-spacing:0}
.brand-t small{font-size:.72rem;color:var(--muted)}
.top-r{display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:.82rem;font-weight:700;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);white-space:nowrap}
.pill .ic{width:1.1em;height:1.1em}
.pill.streak{color:var(--gold)}
.pill.xp{color:var(--a2)}
.icon-btn{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);transition:transform .25s var(--ease),border-color .25s}
.icon-btn:hover{border-color:var(--a1)}
.icon-btn:active{transform:scale(.92)}

/* ---------- 5. ناوبری (ریل دسکتاپ / نوار پایین موبایل) ---------- */
.nav{
  position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:92px 10px 20px;border-inline-end:1px solid var(--line);
}
.nv{
  position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 4px;border-radius:16px;color:var(--muted);font-size:.72rem;font-weight:600;
  transition:color .25s,background .25s,transform .25s var(--ease);
}
.nv .ic{width:23px;height:23px}
.nv:hover{color:var(--text);background:var(--panel)}
.nv:active{transform:scale(.94)}
:root:has(#v-home:checked) .nv[for=v-home],
:root:has(#v-courses:checked) .nv[for=v-courses],
:root:has(#v-code:checked) .nv[for=v-code],
:root:has(#v-lesson:checked) .nv[for=v-lesson],
:root:has(#v-profile:checked) .nv[for=v-profile]{color:var(--text);background:var(--panel-2)}
:root:has(#v-home:checked) .nv[for=v-home]::before,
:root:has(#v-courses:checked) .nv[for=v-courses]::before,
:root:has(#v-code:checked) .nv[for=v-code]::before,
:root:has(#v-lesson:checked) .nv[for=v-lesson]::before,
:root:has(#v-profile:checked) .nv[for=v-profile]::before{
  content:"";position:absolute;inset-inline-end:-10px;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--grad);
}
:root:has(#v-home:checked) .nv[for=v-home] .ic,
:root:has(#v-courses:checked) .nv[for=v-courses] .ic,
:root:has(#v-code:checked) .nv[for=v-code] .ic,
:root:has(#v-lesson:checked) .nv[for=v-lesson] .ic,
:root:has(#v-profile:checked) .nv[for=v-profile] .ic{color:var(--a2)}

/* ---------- 6. صفحه‌ها ---------- */
.view{display:none;padding-bottom:72px}
:root:has(#v-home:checked) #home,
:root:has(#v-courses:checked) #courses,
:root:has(#v-lesson:checked) #lesson,
:root:has(#v-code:checked) #lab,
:root:has(#v-profile:checked) #profile{display:block;animation:rise .55s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 7. دکمه‌ها ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:16px;
  font-weight:700;font-size:1rem;border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .3s,border-color .25s;
}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 14px 34px -12px var(--a1),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px var(--a1),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow)}
.btn.ghost:hover{border-color:var(--a2)}
.btn.sm{padding:10px 18px;font-size:.9rem;border-radius:13px}
.btn .ic{width:1.15em;height:1.15em}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:99px;font-size:.76rem;font-weight:700;background:color-mix(in oklab,var(--c,var(--a1)) 16%,transparent);color:var(--c,var(--a1))}
.bar{height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:calc(var(--p)*1%);border-radius:8px;background:var(--grad);position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(100%);animation:shine 3.2s infinite}
@keyframes shine{to{transform:translateX(-100%)}}

/* ==========================================================
   8. صفحه اصلی
   ========================================================== */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:24px;
  min-height:calc(100dvh - 66px);padding-block:24px;
}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:var(--panel);font-size:.82rem;color:var(--muted)}
.eyebrow b{width:8px;height:8px;border-radius:50%;background:var(--a3);box-shadow:0 0 10px var(--a3);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.35;font-weight:900;margin:18px 0 14px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:clamp(.98rem,1.6vw,1.12rem);max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.trust{display:flex;gap:28px;margin-top:34px}
.trust li{display:flex;flex-direction:column;line-height:1.4}
.trust b{font-size:1.35rem;font-weight:800}
.trust span{font-size:.78rem;color:var(--muted)}

/* قهرمان سه‌بعدی (ربات کدی) */
.stage{position:relative;height:min(540px,62vh);display:grid;place-items:center;perspective:1100px}
.rings,.rings2{position:absolute;inset:0;margin:auto;border-radius:50%;aspect-ratio:1}
.rings{width:min(470px,96%);border:1px dashed color-mix(in oklab,var(--a2) 40%,transparent);animation:spin 46s linear infinite}
.rings2{width:min(330px,70%);border:1px solid var(--line);animation:spin 30s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.tk{
  position:absolute;padding:6px 13px;border-radius:12px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.85rem;font-weight:600;direction:ltr;
  background:color-mix(in oklab,var(--bg-2) 80%,transparent);border:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:spin 46s linear infinite reverse;
}
.tk.t1{top:-3%;left:42%;color:var(--k)}
.tk.t2{top:56%;right:-5%;color:var(--s)}
.tk.t3{top:22%;left:-4%;color:var(--n)}
.tk.t4{bottom:-2%;left:30%;color:var(--f)}
.rings2 .tk{animation-duration:30s;animation-direction:normal}
.rings2 .tk.t5{top:10%;right:2%;color:var(--a3)}

.bot{position:relative;width:210px;height:300px;transform-style:preserve-3d;animation:botfloat 6.5s ease-in-out infinite}
@keyframes botfloat{
  0%,100%{transform:translateY(0) rotateY(-16deg) rotateX(4deg)}
  50%{transform:translateY(-20px) rotateY(16deg) rotateX(-2deg)}
}
.ant{position:absolute;top:-12px;left:50%;width:5px;height:38px;background:linear-gradient(var(--a2),transparent);border-radius:4px;transform:translateX(-50%) translateZ(10px)}
.ant::before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;border-radius:50%;transform:translateX(-50%);background:var(--a3);box-shadow:0 0 20px 4px var(--a3);animation:pulse 2.4s infinite}
.head{
  position:absolute;left:18px;right:18px;top:20px;height:134px;border-radius:46px 46px 38px 38px;transform:translateZ(34px);
  background:linear-gradient(160deg,color-mix(in oklab,var(--a1) 72%,#fff 14%),color-mix(in oklab,var(--a1) 60%,#000));
  box-shadow:inset 0 -16px 26px rgba(0,0,0,.35),inset 0 12px 20px rgba(255,255,255,.28),0 34px 60px -22px var(--a1);
}
.head::before,.head::after{content:"";position:absolute;top:50px;width:14px;height:36px;border-radius:8px;background:color-mix(in oklab,var(--a2) 70%,#000)}
.head::before{left:-9px}.head::after{right:-9px}
.visor{position:absolute;inset:26px 16px 30px;border-radius:30px;background:#09081d;box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),inset 0 -10px 20px rgba(139,92,246,.2);display:flex;justify-content:center;align-items:center;gap:28px}
.eye{width:22px;height:30px;border-radius:12px;background:var(--a3);box-shadow:0 0 18px var(--a3);animation:blink 5.5s infinite}
.mouth{position:absolute;bottom:10px;left:50%;width:26px;height:8px;border-bottom:3px solid var(--a3);border-radius:0 0 16px 16px;transform:translateX(-50%);opacity:.9}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.torso{
  position:absolute;left:42px;right:42px;top:162px;height:112px;border-radius:32px 32px 40px 40px;transform:translateZ(14px);
  background:linear-gradient(170deg,color-mix(in oklab,var(--a2) 75%,#fff 10%),color-mix(in oklab,var(--a1) 80%,#000));
  box-shadow:inset 0 -14px 22px rgba(0,0,0,.32),inset 0 10px 16px rgba(255,255,255,.25);display:grid;place-items:center;
}
.core{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;background:rgba(7,6,24,.55);border:1px solid rgba(255,255,255,.25);font-family:"JetBrains Mono",monospace;font-weight:800;color:#fff;direction:ltr;box-shadow:0 0 24px rgba(255,255,255,.25)}
.arm{position:absolute;top:176px;width:26px;height:84px;border-radius:16px;background:linear-gradient(var(--a1),color-mix(in oklab,var(--a1) 55%,#000));box-shadow:inset 0 6px 10px rgba(255,255,255,.22);transform-origin:50% 12px}
.arm.l{left:6px;transform:translateZ(6px) rotate(10deg)}
.arm.r{right:6px;transform:translateZ(6px) rotate(-10deg);animation:wave 3.6s ease-in-out infinite}
@keyframes wave{0%,60%,100%{transform:translateZ(6px) rotate(-10deg)}70%{transform:translateZ(6px) rotate(-120deg)}80%{transform:translateZ(6px) rotate(-90deg)}90%{transform:translateZ(6px) rotate(-120deg)}}
.shadow{position:absolute;bottom:7%;left:50%;width:170px;height:26px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);animation:sh 6.5s ease-in-out infinite}
@keyframes sh{50%{transform:translateX(-50%) scale(.78);opacity:.6}}

/* مسیر پیشرفت */
.cont{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:22px}
.cont .tile{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--grad);color:#fff}
.cont .txt{flex:1;min-width:0}
.cont .txt small{color:var(--muted);font-size:.78rem}
.cont .txt b{display:block;font-weight:700;line-height:1.5}
.cont .bar{margin-top:8px}
.path{display:flex;overflow-x:auto;padding:12px 4px 18px;scrollbar-width:none;scroll-snap-type:x proximity}
.path::-webkit-scrollbar{display:none}
.pn{position:relative;flex:1 0 118px;text-align:center;scroll-snap-align:center}
.pn:not(:last-child)::after{content:"";position:absolute;top:31px;height:3px;border-radius:3px;width:calc(100% - 68px);inset-inline-end:calc(-50% + 34px);background:var(--line)}
.pn.done:not(:last-child)::after{background:var(--grad)}
.pn i{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:0 auto 10px;border-radius:22px;background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.pn.done i{background:var(--grad);color:#fff;border-color:transparent}
.pn.now i{background:var(--bg-2);border:2px solid var(--a2);color:var(--a2);box-shadow:0 0 0 6px color-mix(in oklab,var(--a2) 16%,transparent),0 0 30px -4px var(--a2);animation:nowpulse 2.4s infinite}
@keyframes nowpulse{50%{box-shadow:0 0 0 12px color-mix(in oklab,var(--a2) 4%,transparent),0 0 34px -4px var(--a2)}}
.pn b{display:block;font-size:.9rem;font-weight:700;line-height:1.5}
.pn small{font-size:.74rem;color:var(--muted)}

/* ریل دوره‌ها */
.rail{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.cc{
  position:relative;flex:0 0 min(268px,74vw);scroll-snap-align:start;padding:20px;border-radius:24px;overflow:hidden;
  background:linear-gradient(165deg,color-mix(in oklab,var(--c) 18%,var(--panel)),var(--panel) 70%);border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .35s var(--ease),border-color .3s;
}
.cc:hover{transform:translateY(-6px);border-color:var(--c)}
.cc::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;inset-inline-start:-50px;bottom:-60px;background:var(--c);opacity:.12;filter:blur(8px)}
.cc .top-row{display:flex;justify-content:space-between;align-items:start;margin-bottom:34px}
.cc .tile{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:color-mix(in oklab,var(--c) 22%,transparent);color:var(--c)}
.cc h3{font-size:1.15rem;font-weight:800}
.cc p{font-size:.82rem;color:var(--muted);margin-top:2px}
.cc .foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:.8rem;color:var(--muted)}
.ring{--p:0;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c,var(--a2)) calc(var(--p)*1%),var(--line) 0);font-size:.68rem;font-weight:800;color:var(--text);position:relative}
.ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg-2)}
.ring span{position:relative}
:root:has(#t-light:checked) .ring::before{background:#fff}

/* مأموریت و چالش */
.duo{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}
.mission{padding:22px}
.mission h3,.chal h3{font-size:1.1rem;font-weight:800;display:flex;align-items:center;gap:8px}
.mission .sub{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin:6px 0 14px}
.mi{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px dashed var(--line)}
.mi:first-of-type{border-top:0}
.mi .box{width:26px;height:26px;border-radius:9px;border:2px solid var(--line);display:grid;place-items:center;color:transparent;transition:.25s var(--ease);flex:none}
.mi .box .ic{width:15px;height:15px;stroke-width:3}
.mi:has(input:checked) .box{background:var(--grad);border-color:transparent;color:#fff;transform:scale(1.08)}
.mi:has(input:checked) .t{text-decoration:line-through;color:var(--muted)}
.mi .t{flex:1;font-size:.94rem}
.mi .xp{font-size:.78rem;font-weight:800;color:var(--a2)}
.chal{padding:22px}
.ch-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-top:1px solid var(--line);transition:background .25s,padding .25s}
.ch-row:first-of-type{border-top:0}
.ch-row:hover{background:var(--panel);padding-inline:12px;border-radius:14px}
.ch-row .n{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-weight:700;background:color-mix(in oklab,var(--c) 16%,transparent);color:var(--c);direction:ltr;font-size:.82rem}
.ch-row .t{flex:1;min-width:0}
.ch-row .t b{display:block;font-weight:700;line-height:1.5}
.ch-row .t small{color:var(--muted);font-size:.78rem}
.dots{display:inline-flex;gap:3px;vertical-align:middle;margin-inline-start:6px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--c)}

/* دستاوردها و رتبه‌بندی */
.glory{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bd{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 8px 16px;text-align:center;font-size:.82rem;font-weight:700;line-height:1.5}
.bd small{display:block;font-weight:400;color:var(--muted);font-size:.72rem}
.hex{width:62px;height:70px;display:grid;place-items:center;color:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--bgx,var(--grad))}
.hex .ic{width:26px;height:26px}
.bd.lock{opacity:.5}
.bd.lock .hex{background:var(--line);color:var(--muted)}
.lb{padding:8px 8px}
.lb li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px}
.lb li.me{background:color-mix(in oklab,var(--a1) 16%,transparent);border:1px solid color-mix(in oklab,var(--a1) 40%,transparent)}
.lb .rk{width:28px;font-weight:800;text-align:center;color:var(--muted)}
.lb li:nth-child(1) .rk{color:var(--gold)}
.lb li:nth-child(2) .rk{color:#cbd5e1}
.lb li:nth-child(3) .rk{color:#e0a070}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;color:#fff;background:linear-gradient(135deg,var(--x,var(--a1)),var(--y,var(--a2)));flex:none}
.lb .nm{flex:1;font-weight:600;font-size:.92rem}
.lb .sc{font-family:"JetBrains Mono",monospace;font-size:.82rem;color:var(--a2);direction:ltr}
.lb .gap{text-align:center;color:var(--muted);letter-spacing:.4em;padding:0;line-height:1}

/* ==========================================================
   9. صفحه دوره‌ها
   ========================================================== */
.page-h{padding-top:34px;margin-bottom:26px}
.page-h h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:900;line-height:1.4}
.page-h p{color:var(--muted);max-width:40em}
.crs{display:grid;gap:14px}
.course{border-radius:24px;overflow:hidden}
.course summary{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;list-style:none}
.course summary::-webkit-details-marker{display:none}
.course .tile{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:color-mix(in oklab,var(--c) 20%,transparent);color:var(--c)}
.course .tile .ic{width:26px;height:26px}
.course summary h3{font-size:1.1rem;font-weight:800;line-height:1.4}
.course summary p{font-size:.8rem;color:var(--muted)}
.course .chev{transition:transform .35s var(--ease);color:var(--muted)}
.course[open] .chev{transform:rotate(-90deg)}
.course[open]{border-color:color-mix(in oklab,var(--c) 45%,var(--line))}
.chapters{padding:4px 20px 20px;display:grid;gap:18px}
.chap h4{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:700;margin-bottom:8px}
.chap h4 small{font-weight:500;color:var(--muted);font-size:.78rem}
.chap h4 .no{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:.78rem;background:var(--panel-2)}
.ls{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;font-size:.92rem;transition:background .2s}
.ls:hover{background:var(--panel-2)}
.ls .st{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--line);color:var(--muted)}
.ls .st .ic{width:14px;height:14px;stroke-width:2.6}
.ls.done .st{background:color-mix(in oklab,var(--ok) 22%,transparent);color:var(--ok)}
.ls.now{background:color-mix(in oklab,var(--a1) 12%,transparent)}
.ls.now .st{background:var(--grad);color:#fff}
.ls span:nth-child(2){flex:1}
.ls em{font-style:normal;font-size:.76rem;color:var(--muted)}
.ls.lockd{opacity:.55}

/* ==========================================================
   10. صفحه درس
   ========================================================== */
.crumb{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);padding-top:26px}
.lesson-h h1{font-size:clamp(1.5rem,3.6vw,2.2rem);font-weight:900;line-height:1.5;margin:8px 0 14px}
.seg{display:flex;gap:6px}
.seg i{flex:1;height:6px;border-radius:6px;background:var(--line)}
.seg i.on{background:var(--grad)}
.steps{counter-reset:st;position:relative;margin-top:34px;display:grid;gap:30px;max-width:820px}
.step{position:relative;padding-inline-start:58px}
.step::before{
  counter-increment:st;content:counter(st,persian);position:absolute;inset-inline-start:0;top:0;width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;font-weight:800;background:var(--panel-2);border:1px solid var(--line);
}
.step::after{content:"";position:absolute;inset-inline-start:19px;top:48px;bottom:-26px;width:2px;background:linear-gradient(var(--line),transparent)}
.step:last-child::after{display:none}
.step.hl::before{background:var(--grad);color:#fff;border-color:transparent}
.step h3{font-size:1.15rem;font-weight:800;line-height:40px;margin-bottom:8px}
.step h3 small{font-size:.78rem;font-weight:500;color:var(--muted);margin-inline-start:8px}
.step p{color:color-mix(in oklab,var(--text) 82%,var(--muted));margin-bottom:12px}
.step p code,.step li code{font-family:"JetBrains Mono",monospace;font-size:.86em;padding:1px 8px;border-radius:8px;background:var(--panel-2);color:var(--a2);direction:ltr;unicode-bidi:isolate}
.callout{display:flex;gap:12px;padding:14px 16px;border-radius:16px;background:color-mix(in oklab,var(--a2) 10%,transparent);border:1px solid color-mix(in oklab,var(--a2) 30%,transparent);font-size:.92rem}
.callout .ic{color:var(--a2);margin-top:4px}

/* بلوک کد */
.cb{border-radius:18px;overflow:hidden;background:var(--code-bg);border:1px solid var(--line);box-shadow:var(--shadow);margin:6px 0 14px}
.cb-h{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line);font-family:"JetBrains Mono",monospace;font-size:.76rem;color:var(--c);direction:ltr}
.cb-h .dts{display:flex;gap:6px}
.cb-h .dts i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.cb-h .dts i:nth-child(1){background:#fb7185}.cb-h .dts i:nth-child(2){background:#fbbf24}.cb-h .dts i:nth-child(3){background:#34d399}
.code{direction:ltr;text-align:left;counter-reset:ln;padding:14px 4px 14px 0;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:.88rem;line-height:1.9;color:var(--code-text);overflow-x:auto;tab-size:4}
.code .l{display:block;white-space:pre;padding-right:16px}
.code .l::before{counter-increment:ln;content:counter(ln);display:inline-block;width:2.6em;margin-right:1em;text-align:right;color:var(--c);opacity:.55}
.code .k{color:var(--k);font-weight:600}
.code .s{color:var(--s);unicode-bidi:isolate}
.code .n{color:var(--n)}
.code .c{color:var(--c);font-style:italic;unicode-bidi:isolate}
.code .f{color:var(--f)}
.code .cur::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-3px;background:var(--a2);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.out{direction:ltr;text-align:left;font-family:"JetBrains Mono",monospace;font-size:.84rem;padding:12px 16px;border-top:1px dashed var(--line);background:color-mix(in oklab,var(--ok) 6%,transparent);color:var(--code-text)}
.out b{color:var(--ok);font-weight:600;margin-right:8px}
.out span{unicode-bidi:isolate}

/* کوییز (تماماً با CSS) */
.q{padding:18px;border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:14px}
.q .qt{font-weight:700;margin-bottom:12px;line-height:1.7}
.q .qt .tag{display:inline-block;margin-inline-end:8px;padding:0 10px;border-radius:8px;font-size:.72rem;background:var(--panel-2);color:var(--muted)}
.q .opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);transition:.22s var(--ease);font-size:.94rem}
.opt:hover{border-color:var(--a1);transform:translateX(-3px)}
.opt i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:.22s}
.opt i::after{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .25s var(--ease)}
.opt:has(input:checked){border-color:var(--a1);background:color-mix(in oklab,var(--a1) 12%,transparent);color:var(--a1)}
.opt:has(input:checked) i{border-color:currentColor}
.opt:has(input:checked) i::after{transform:scale(1)}
.opt:has(input.ok:checked){border-color:var(--ok);background:color-mix(in oklab,var(--ok) 13%,transparent);color:var(--ok)}
.opt:has(input.bad:checked){border-color:var(--bad);background:color-mix(in oklab,var(--bad) 12%,transparent);color:var(--bad)}
.opt span{color:var(--text)}
.fb{display:none;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:14px;font-size:.9rem;animation:rise .35s var(--ease)}
.fb.good{background:color-mix(in oklab,var(--ok) 12%,transparent);color:var(--ok)}
.fb.nope{background:color-mix(in oklab,var(--bad) 12%,transparent);color:var(--bad)}
.fb span{color:var(--text)}
.q:has(input.ok:checked) .fb.good{display:flex}
.q:has(input.bad:checked) .fb.nope{display:flex}
.blank{display:inline-block;min-width:4.2em;padding:0 8px;border-bottom:2px dashed var(--a2);color:var(--a2);text-align:center}

.cta-card{display:flex;align-items:center;gap:16px;padding:20px;border-radius:22px;background:linear-gradient(135deg,color-mix(in oklab,var(--a1) 28%,transparent),color-mix(in oklab,var(--a2) 18%,transparent));border:1px solid color-mix(in oklab,var(--a1) 40%,transparent)}
.cta-card .txt{flex:1}
.cta-card b{display:block;font-size:1.05rem}
.cta-card small{color:var(--muted)}
.hint{border-radius:16px;border:1px solid var(--line);background:var(--panel);margin-bottom:10px;overflow:hidden}
.hint summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none;font-weight:600;font-size:.94rem}
.hint summary::-webkit-details-marker{display:none}
.hint summary .ic{color:var(--gold)}
.hint[open]{border-color:color-mix(in oklab,var(--gold) 45%,var(--line))}
.hint .bd-t{padding:0 16px 14px;color:var(--muted);font-size:.9rem}

/* ==========================================================
   11. محیط کدنویسی
   ========================================================== */
.lab-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:26px;margin-bottom:16px}
.lab-h h1{font-size:clamp(1.25rem,3vw,1.7rem);font-weight:800;line-height:1.5}
.lab-h small{color:var(--muted);font-size:.8rem}
.tabs{display:none;gap:4px;padding:4px;border-radius:16px;background:var(--panel);border:1px solid var(--line);margin-bottom:14px}
.tabs label{flex:1;text-align:center;padding:9px 6px;border-radius:12px;font-size:.88rem;font-weight:600;color:var(--muted);transition:.25s var(--ease)}
:root:has(#c-task:checked) .tabs label[for=c-task],
:root:has(#c-code:checked) .tabs label[for=c-code],
:root:has(#c-out:checked) .tabs label[for=c-out],
:root:has(#c-check:checked) .tabs label[for=c-out],
:root:has(#c-err:checked) .tabs label[for=c-out]{background:var(--grad);color:#fff;box-shadow:0 8px 20px -10px var(--a1)}
.lab{display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:18px;align-items:start}
.lab-right{display:grid;gap:14px;min-width:0}
.lab-task{padding:22px}
.lab-task h3{font-size:1rem;font-weight:800;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.lab-task h3:not(:first-child){margin-top:22px}
.lab-task p{color:color-mix(in oklab,var(--text) 80%,var(--muted));font-size:.94rem}
.req li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:.9rem}
.req .tk2{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:transparent;transition:.3s var(--ease);flex:none}
.req .tk2 .ic{width:13px;height:13px;stroke-width:3}
:root:has(#c-check:checked) .req .tk2{background:var(--ok);color:#fff}
.sample{direction:ltr;text-align:left;font-family:"JetBrains Mono",monospace;font-size:.82rem;padding:12px 14px;border-radius:14px;background:var(--code-bg);border:1px solid var(--line);color:var(--code-text)}
.sample span{unicode-bidi:isolate}
.ed .cb{margin:0}
.ed .code{min-height:230px}
.v-bug{display:none !important}
:root:has(#c-err:checked) .v-ok{display:none !important}
:root:has(#c-err:checked) .v-bug{display:block !important;background:color-mix(in oklab,var(--bad) 16%,transparent);box-shadow:inset 3px 0 0 var(--bad)}
.lab-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lab-actions .spacer{flex:1}
.lab-out{overflow:hidden}
.lab-out .bar-t{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:.92rem}
.lab-out .bar-t small{color:var(--muted);font-weight:500}
.o{display:none;padding:18px;animation:rise .4s var(--ease)}
.o-term{direction:ltr;text-align:left;font-family:"JetBrains Mono",monospace;font-size:.86rem;line-height:1.9;color:var(--code-text);padding:14px 16px;border-radius:14px;background:var(--code-bg);border:1px solid var(--line)}
.o-term .p{color:var(--a3)}
.o-term .e{color:var(--bad)}
.o-term span{unicode-bidi:isolate}
:root:not(:has(:is(#c-out,#c-check,#c-err):checked)) .o-idle{display:block}
:root:has(#c-out:checked) .o-run{display:block}
:root:has(#c-check:checked) .o-ok{display:block}
:root:has(#c-err:checked) .o-err{display:block}
.o-idle{color:var(--muted);text-align:center;padding:34px 18px}
.o-idle .ic{width:34px;height:34px;opacity:.5;margin-bottom:6px}
.verdict{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;margin-bottom:14px;position:relative;overflow:hidden}
.verdict.win{background:color-mix(in oklab,var(--ok) 13%,transparent);border:1px solid color-mix(in oklab,var(--ok) 40%,transparent)}
.verdict.lose{background:color-mix(in oklab,var(--bad) 11%,transparent);border:1px solid color-mix(in oklab,var(--bad) 38%,transparent)}
.verdict .em{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;color:#fff;flex:none}
.win .em{background:var(--ok)}.lose .em{background:var(--bad)}
.verdict b{display:block;font-size:1.05rem}
.verdict small{color:var(--muted)}
.xp-gain{margin-inline-start:auto;font-weight:900;font-size:1.2rem;color:var(--gold);animation:pop .7s var(--ease) both}
@keyframes pop{from{transform:scale(.4) translateY(10px);opacity:0}60%{transform:scale(1.2)}to{transform:none;opacity:1}}
.confetti i{position:absolute;top:-10px;width:7px;height:11px;border-radius:2px;background:var(--cc);animation:fall 1.6s ease-in both;animation-delay:var(--d)}
@keyframes fall{to{transform:translateY(120px) rotate(540deg);opacity:0}}
.hint-box{display:flex;gap:12px;padding:14px 16px;border-radius:16px;background:color-mix(in oklab,var(--gold) 11%,transparent);border:1px solid color-mix(in oklab,var(--gold) 35%,transparent);font-size:.9rem;margin-top:12px}
.hint-box .ic{color:var(--gold);margin-top:4px}

/* ==========================================================
   12. پروفایل
   ========================================================== */
.me{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:24px;margin-top:30px;position:relative;overflow:hidden}
.me::before{content:"";position:absolute;inset-inline-end:-80px;top:-100px;width:300px;height:300px;border-radius:50%;background:var(--a1);opacity:.14;filter:blur(30px)}
.lvl{--p:72;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--a2) calc(var(--p)*1%),var(--line) 0);position:relative}
.lvl .av{width:86px;height:86px;font-size:2rem;border:4px solid var(--bg-2)}
.lvl .lv{position:absolute;bottom:-6px;padding:2px 12px;border-radius:99px;font-size:.74rem;font-weight:800;background:var(--grad);color:#fff;border:3px solid var(--bg-2)}
.me h1{font-size:1.5rem;font-weight:900;line-height:1.4}
.me .meta{color:var(--muted);font-size:.88rem;margin-bottom:12px}
.me .bar{max-width:420px}
.me .xp-l{display:flex;justify-content:space-between;max-width:420px;font-size:.78rem;color:var(--muted);margin-top:6px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.st-c{padding:16px 14px;text-align:center}
.st-c b{display:block;font-size:1.5rem;font-weight:900;line-height:1.3}
.st-c span{font-size:.76rem;color:var(--muted)}
.dash{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:18px;align-items:start}
.dash .col{display:grid;gap:18px}
.card{padding:22px}
.card>h3{font-size:1.05rem;font-weight:800;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.card>h3 small{font-weight:500;color:var(--muted);font-size:.78rem}
.prog{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px dashed var(--line)}
.prog:first-of-type{border-top:0}
.prog .t{flex:1;min-width:0}
.prog .t b{font-size:.94rem;font-weight:700}
.prog .t small{display:block;font-size:.76rem;color:var(--muted);margin-bottom:6px}
.chart{display:flex;align-items:end;justify-content:space-between;gap:10px;height:150px;padding-top:10px}
.chart div{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:end}
.chart i{width:100%;max-width:34px;height:calc(var(--h)*1%);border-radius:10px 10px 6px 6px;background:var(--line);transition:height .6s var(--ease);transform-origin:bottom;animation:grow .9s var(--ease) both}
.chart i.on{background:var(--grad)}
.chart span{font-size:.72rem;color:var(--muted)}
@keyframes grow{from{transform:scaleY(.1)}}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal i{aspect-ratio:1;border-radius:10px;background:var(--line)}
.cal i.on{background:color-mix(in oklab,var(--a1) 65%,transparent)}
.cal i.hot{background:var(--grad)}
.cal i.today{outline:2px solid var(--gold);outline-offset:2px}
.mini-b{display:flex;flex-wrap:wrap;gap:12px}
.mini-b .hex{width:50px;height:56px}
.mini-b .hex .ic{width:22px;height:22px}
.mini-b .lock .hex{background:var(--line);color:var(--muted)}
.hist li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px dashed var(--line);font-size:.9rem}
.hist li:first-child{border-top:0}
.hist .t{flex:1;min-width:0}
.hist .t small{display:block;color:var(--muted);font-size:.74rem}
.score{font-family:"JetBrains Mono",monospace;font-weight:700;direction:ltr;font-size:.84rem;padding:3px 10px;border-radius:10px}
.score.hi{background:color-mix(in oklab,var(--ok) 16%,transparent);color:var(--ok)}
.score.mid{background:color-mix(in oklab,var(--gold) 16%,transparent);color:var(--gold)}
.plan li{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:12px;padding:11px 0;border-top:1px dashed var(--line);font-size:.9rem}
.plan li:first-child{border-top:0}
.plan .d{font-weight:800;font-size:.82rem;color:var(--muted)}
.plan li.td{color:var(--text)}
.plan li.td .d{color:var(--a2)}
.plan small{color:var(--muted);font-size:.76rem}

/* ==========================================================
   13. انتخاب تم (پنل)
   ========================================================== */
.backdrop{position:fixed;inset:0;z-index:48;background:rgba(2,1,12,.55);opacity:0;pointer-events:none;transition:opacity .3s}
.sheet{
  position:fixed;z-index:50;inset-inline-start:auto;top:70px;inset-inline-end:clamp(16px,4vw,40px);width:min(340px,calc(100vw - 32px));padding:20px;border-radius:24px;
  background:color-mix(in oklab,var(--bg-2) 92%,transparent);border:1px solid var(--line);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  opacity:0;transform:translateY(-10px) scale(.97);pointer-events:none;transition:opacity .3s,transform .35s var(--ease);
}
:root:has(#themeToggle:checked) .backdrop[for=themeToggle],
:root:has(#notifToggle:checked) .backdrop[for=notifToggle]{opacity:1;pointer-events:auto}
/* فقط شیت ظاهر — نه more-sheet (تا روی موبایل شیت بیشتر روش نیاد) */
:root:has(#themeToggle:checked) .sheet:not(.more-sheet){opacity:1;transform:none;pointer-events:auto}
.sheet h3{font-size:1rem;font-weight:800;margin-bottom:4px}
.sheet>p{font-size:.8rem;color:var(--muted);margin-bottom:14px}
.tms{display:grid;gap:8px}
.tm{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:15px;border:1px solid var(--line);transition:.25s var(--ease)}
.tm:hover{border-color:var(--a1)}
.tm .sw{width:46px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--x),var(--y));border:2px solid var(--z);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.tm b{flex:1;font-size:.9rem;font-family:"JetBrains Mono","Vazirmatn",monospace;direction:ltr;text-align:right;font-weight:600}
.tm .ck{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent}
.tm .ck .ic{width:12px;height:12px;stroke-width:3.2}
/* رادیوها بیرون از label هستن؛ با :root:has انتخاب‌شده رو نشون بده */
:root:has(#t-purple:checked) .tm[for=t-purple],
:root:has(#t-cyber:checked) .tm[for=t-cyber],
:root:has(#t-emerald:checked) .tm[for=t-emerald],
:root:has(#t-midnight:checked) .tm[for=t-midnight],
:root:has(#t-light:checked) .tm[for=t-light]{border-color:var(--a1);background:color-mix(in oklab,var(--a1) 12%,transparent)}
:root:has(#t-purple:checked) .tm[for=t-purple] .ck,
:root:has(#t-cyber:checked) .tm[for=t-cyber] .ck,
:root:has(#t-emerald:checked) .tm[for=t-emerald] .ck,
:root:has(#t-midnight:checked) .tm[for=t-midnight] .ck,
:root:has(#t-light:checked) .tm[for=t-light] .ck{background:var(--grad);border-color:transparent;color:#fff}
.sheet .done-btn{display:flex;margin-top:14px;width:100%}

.foot-note{margin-top:64px;padding-block:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;text-align:center}

/* ==========================================================
   14. دسکتاپ بزرگ
   ========================================================== */
@media (min-width:960px){
  .tabs{display:none !important}
}

/* ==========================================================
   15. موبایل — طراحی اختصاصی شبیه اپ
   ========================================================== */
@media (max-width:959px){
  .shell{display:block}
  .brand-t b{font-size:1rem}
  .view{padding-bottom:calc(var(--nav-h) + 48px + env(safe-area-inset-bottom))}
  .sheet:not(.more-sheet){
    inset:auto 0 0 0;width:auto;max-height:min(88dvh,640px);overflow-y:auto;
    border-radius:28px 28px 0 0;padding:14px 18px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(100%);opacity:1;-webkit-overflow-scrolling:touch;
  }
  .sheet:not(.more-sheet)::before{content:"";display:block;width:42px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 16px}
  :root:has(#themeToggle:checked) .sheet:not(.more-sheet){transform:none}
  .tms{grid-template-columns:1fr 1fr}
  .tm:last-child{grid-column:1/-1}
  .tm{padding:9px 10px;gap:8px}
  .tm .sw{width:36px;height:26px}
  .tm b{font-size:.8rem}

  /* خانه */
  .hero{grid-template-columns:1fr;min-height:0;gap:0;padding-top:6px}
  .stage{order:-1;height:290px;margin-inline:-8px}
  .bot{scale:.7}
  .shadow{bottom:5%;width:120px}
  .hero h1{margin:14px 0 10px}
  .cta{margin-top:22px}
  .cta .btn{flex:1;padding:14px 12px;font-size:.95rem}
  .trust{gap:20px;margin-top:26px;justify-content:space-between}
  .sec{margin-top:52px}
  .duo,.glory,.dash{grid-template-columns:1fr}
  .badges{gap:10px}
  .bd{padding:16px 4px 12px}
  .hex{width:54px;height:62px}

  /* دوره‌ها */
  .course summary{grid-template-columns:auto 1fr auto;gap:12px;padding:14px}
  .course summary .chip{display:none}
  .course .tile{width:46px;height:46px;border-radius:15px}
  .chapters{padding:0 12px 14px}

  /* درس */
  .step{padding-inline-start:0;padding-top:52px}
  .step::before{width:36px;height:36px;border-radius:12px}
  .step::after{display:none}
  .step h3{position:absolute;inset-inline-start:48px;top:0;line-height:36px;margin:0}
  .step h3 small{display:none}
  .code{font-size:.8rem}
  .cta-card{flex-direction:column;align-items:stretch;text-align:center}

  /* آزمایشگاه */
  .tabs{display:flex}
  .lab{grid-template-columns:1fr}
  .lab-task,.lab-out{display:none}
  :root:has(#c-task:checked) .lab-task{display:block}
  :root:has(#c-task:checked) .lab-code{display:none}
  :root:has(:is(#c-out,#c-check,#c-err):checked) .lab-out{display:block}
  :root:has(:is(#c-out,#c-check,#c-err):checked) .lab-code{display:none}
  :root:has(#c-task:checked) .lab-right{order:2}
  .lab-actions{
    position:fixed;z-index:35;inset-inline:10px;bottom:calc(var(--nav-h) + 26px + env(safe-area-inset-bottom));
    padding:8px;border-radius:20px;background:color-mix(in oklab,var(--bg-2) 86%,transparent);border:1px solid var(--line);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);flex-wrap:nowrap;
  }
  .lab-actions .btn{flex:1;padding:11px 8px;font-size:.88rem;border-radius:14px}
  .lab-actions .btn.ext{flex:0 0 auto}
  .lab-actions .spacer{display:none}
  .lab-h{padding-top:18px}
  .lab-h small{display:none}
  .ed .code{min-height:200px}
  .view#lab{padding-bottom:calc(var(--nav-h) + 110px + env(safe-area-inset-bottom))}

  /* پروفایل */
  .me{grid-template-columns:1fr;justify-items:center;text-align:center;padding:22px 18px 20px;margin-top:20px}
  .me .bar,.me .xp-l{margin-inline:auto;width:100%}
  .stats{grid-template-columns:repeat(2,1fr)}
  .plan li{grid-template-columns:54px 1fr auto}
  .foot-note{display:none}
}
@media (max-width:380px){
  .pill.streak{display:none}
  .badges{grid-template-columns:repeat(3,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

@counter-style persian{system:numeric;symbols:"۰" "۱" "۲" "۳" "۴" "۵" "۶" "۷" "۸" "۹"}


/* ==========================================================
   16. نسخه ۲ — سطح اپلیکیشن واقعی
   سایدبار، هدر، اعلان‌ها، فهرست درس، نوار وضعیت، تنظیمات
   ========================================================== */
::selection{background:color-mix(in oklab,var(--a1) 45%,transparent)}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sb-only,.d-only{display:none}
.m-only{display:flex}
.icon-btn{position:relative}
.dot{position:absolute;top:8px;inset-inline-end:9px;width:10px;height:10px;border-radius:50%;background:var(--bad);border:2px solid var(--bg)}
.nb{font-style:normal;font-size:.68rem;font-weight:800;padding:1px 10px;border-radius:99px;background:var(--grad);color:#fff;margin-inline-start:auto;line-height:1.7}
.nv .ic{transition:transform .3s var(--ease),color .25s}
.pt-i{display:none}
:root:has(#v-home:checked) .p-home,
:root:has(#v-courses:checked) .p-courses,
:root:has(#v-lesson:checked) .p-lesson,
:root:has(#v-code:checked) .p-code,
:root:has(#v-profile:checked) .p-profile{display:block;animation:rise .45s var(--ease) both}
.pt-i b{display:block;font-size:1.25rem;font-weight:800;line-height:1.4}
.pt-i small{color:var(--muted);font-size:.84rem}
.top-av .av{width:42px;height:42px;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--a1);transition:transform .25s var(--ease)}
.top-av:hover .av{transform:scale(1.06)}

/* کارت‌های پایین سایدبار */
.sb-foot{gap:10px;padding-top:14px}
.goal{padding:14px;border-radius:18px;background:linear-gradient(160deg,color-mix(in oklab,var(--a3) 14%,transparent),var(--panel));border:1px solid var(--line)}
.goal-h{display:flex;align-items:center;gap:12px}
.goal-h b{display:block;font-size:.88rem;line-height:1.4}
.goal-h small{font-size:.74rem;color:var(--muted)}
.ucard{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;border:1px solid var(--line);background:var(--panel);transition:border-color .25s,transform .25s var(--ease)}
.ucard:hover{border-color:var(--a1)}
.ucard:active{transform:scale(.97)}
.u-av{--p:72;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--a2) calc(var(--p)*1%),var(--line) 0)}
.u-av .av{width:37px;height:37px;border:3px solid var(--bg-2);font-size:.85rem}
.u-t{min-width:0}
.u-t b{display:block;font-size:.88rem;line-height:1.4}
.u-t small{font-size:.72rem;color:var(--muted)}
.sb-collapse{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;color:var(--muted);font-size:.84rem;font-weight:600;transition:.2s}
.sb-collapse:hover{color:var(--text);background:var(--panel)}
.sb-collapse .ic{transition:transform .35s var(--ease)}

/* پاپ‌اور اعلان‌ها */
.pop{
  position:fixed;z-index:50;top:74px;inset-inline-end:clamp(16px,4vw,48px);width:min(390px,calc(100vw - 32px));padding:10px;border-radius:24px;
  background:color-mix(in oklab,var(--bg-2) 94%,transparent);border:1px solid var(--line);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  opacity:0;transform:translateY(-10px) scale(.97);pointer-events:none;transition:opacity .3s,transform .35s var(--ease);
}
:root:has(#notifToggle:checked) .pop{opacity:1;transform:none;pointer-events:auto}
.pop-h{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 10px}
.pop-h b{font-weight:800}
.notifs{display:grid;gap:2px}
.notifs li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:16px;position:relative}
.notifs li:hover{background:var(--panel-2)}
.notifs li.un::after{content:"";position:absolute;inset-inline-end:-2px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--a2);transform:translateY(-50%)}
.nt{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:color-mix(in oklab,var(--c) 18%,transparent);color:var(--c)}
.nx b{display:block;font-size:.88rem;line-height:1.5}
.nx small{display:block;font-size:.76rem;color:var(--muted);line-height:1.5}
.notifs em{font-style:normal;font-size:.7rem;color:var(--muted);white-space:nowrap;align-self:start;padding-top:4px}
.pop-f{display:flex;width:100%;margin-top:8px}

/* توست XP */
.toast{
  display:none;position:fixed;z-index:60;top:84px;left:50%;align-items:center;gap:12px;padding:12px 18px 12px 22px;border-radius:20px;pointer-events:none;
  background:color-mix(in oklab,var(--bg-2) 94%,transparent);border:1px solid color-mix(in oklab,var(--gold) 45%,var(--line));
  box-shadow:0 20px 50px -14px rgba(0,0,0,.55),0 0 40px -12px var(--gold);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  animation:toast 4.4s var(--ease) both;
}
.toast .em{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff}
.toast b{display:block;font-size:.95rem;line-height:1.5}
.toast small{color:var(--muted);font-size:.78rem}
:root:has(#c-check:checked) .toast{display:flex}
@keyframes toast{
  0%{opacity:0;transform:translate(-50%,-24px) scale(.94)}
  9%,82%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-12px);visibility:hidden}
}

/* کلید تنظیمات */
.tg{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:12px 14px;border-radius:16px;border:1px solid var(--line)}
.tg b{display:block;font-size:.9rem;line-height:1.5}
.tg small{display:block;font-size:.74rem;color:var(--muted);line-height:1.5}
.sw2{position:relative;flex:none;width:44px;height:26px;border-radius:99px;background:var(--line);transition:background .25s}
.sw2::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:inset-inline-start .3s var(--ease)}
/* #rm بیرون از .tg است */
:root:has(#rm:checked) .tg[for=rm] .sw2{background:var(--a1)}
:root:has(#rm:checked) .tg[for=rm] .sw2::after{inset-inline-start:21px}
:root:has(#rm:checked) *,:root:has(#rm:checked) *::before,:root:has(#rm:checked) *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
:root:has(#rm:checked) .toast{display:none !important}

/* فهرست درس */
.lesson-grid{display:grid;gap:34px}
.l-aside{display:none}
.step{scroll-margin-top:96px}
.la-card{padding:20px}
.la-card h4{font-size:.95rem;font-weight:800;margin-bottom:12px}
.toc{counter-reset:t;display:grid;gap:2px}
.toc a{display:flex;align-items:center;gap:12px;padding:8px 8px;border-radius:12px;font-size:.88rem;color:var(--muted);transition:.2s}
.toc a::before{counter-increment:t;content:counter(t,persian);width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:.74rem;font-weight:800;background:var(--panel-2);flex:none}
.toc a:hover{color:var(--text);background:var(--panel-2)}
.toc a.done{color:var(--text)}
.toc a.done::before{content:"✓";background:color-mix(in oklab,var(--ok) 22%,transparent);color:var(--ok)}
.toc a.cur{color:var(--text);background:color-mix(in oklab,var(--a1) 13%,transparent)}
.toc a.cur::before{background:var(--grad);color:#fff}
.reward{display:flex;align-items:center;gap:14px}
.reward b{display:block;line-height:1.5}
.reward small{color:var(--muted);font-size:.8rem}
.reward .hex{width:46px;height:52px;flex:none}
.next small{color:var(--muted);font-size:.76rem;display:block}
.next b{display:flex;align-items:center;gap:8px;font-size:.95rem}

/* نوار وضعیت ادیتور */
.statusbar{display:flex;align-items:center;gap:18px;padding:8px 16px;border-top:1px solid var(--line);font-size:.72rem;color:var(--muted);background:color-mix(in oklab,var(--a1) 6%,transparent)}
.statusbar .ok-d{margin-inline-end:auto;display:inline-flex;align-items:center;gap:8px}
.statusbar .ok-d::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.statusbar .ltr{font-family:"JetBrains Mono",monospace}

/* ظهور نرم بخش‌ها هنگام اسکرول (بهبود تدریجی) */
@supports (animation-timeline:view()){
  .sec{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  @keyframes reveal{from{opacity:0;transform:translateY(28px)}}
}

/* فوکوس صفحه‌کلید روی ناوبری */
:root:has(#v-home:focus-visible) .nv[for=v-home],
:root:has(#v-courses:focus-visible) .nv[for=v-courses],
:root:has(#v-code:focus-visible) .nv[for=v-code],
:root:has(#v-lesson:focus-visible) .nv[for=v-lesson],
:root:has(#v-profile:focus-visible) .nv[for=v-profile],
:root:has(#themeToggle:focus-visible) .icon-btn[for=themeToggle],
:root:has(#notifToggle:focus-visible) .icon-btn[for=notifToggle]{outline:2px solid var(--a2);outline-offset:2px}

/* ---------- سایدبار دسکتاپ ---------- */
@media (min-width:960px){
  :root{--sb-w:280px}
  :root:has(#sbCollapse:checked){--sb-w:92px}
  .shell{grid-template-columns:var(--sb-w) minmax(0,1fr);transition:grid-template-columns .4s var(--ease)}
  .m-only{display:none}
  .pt.d-only,.top-av.d-only{display:block}
  .sb-brand.sb-only,.nv.sb-only{display:flex}
  .sb-label.sb-only{display:block}
  .nb.sb-only{display:inline-block}
  .sb-foot.sb-only{display:grid}

  .nav{
    align-items:stretch;gap:3px;padding:22px 16px 18px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;
    background:linear-gradient(180deg,color-mix(in oklab,var(--bg-2) 80%,transparent),color-mix(in oklab,var(--bg) 55%,transparent));
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  }
  .nav::-webkit-scrollbar{display:none}
  .sb-brand{order:0;align-items:center;gap:12px;padding:2px 6px 24px}
  .sb-brand .logo{flex:none}
  .sb-label{order:1;padding:6px 14px;font-size:.7rem;font-weight:700;letter-spacing:.04em;color:var(--muted);opacity:.8}
  .sb-label.l2{order:6;margin-top:14px}
  .nv[for=v-home],.nv-home{order:2}
  .nv[for=v-courses],.nv-courses{order:3}
  .nv[for=v-lesson],.nv-lesson{order:4}
  .nv[for=v-code],.nv-code{order:5}
  .nv[for=v-profile],.nv-profile{order:7}
  .nv[for=themeToggle]{order:8}
  .sb-foot{order:20;margin-top:auto}

  .nv{flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 14px;font-size:.93rem;border-radius:14px}
  .nv .ic{width:22px;height:22px}
  .nv:hover .ic{transform:scale(1.1)}

  :root:has(#v-home:checked) .nv[for=v-home],
  :root:has(#v-courses:checked) .nv[for=v-courses],
  :root:has(#v-code:checked) .nv[for=v-code],
  :root:has(#v-lesson:checked) .nv[for=v-lesson],
  :root:has(#v-profile:checked) .nv[for=v-profile]{
    color:var(--text);
    background:linear-gradient(to left,color-mix(in oklab,var(--a1) 24%,transparent),color-mix(in oklab,var(--a2) 5%,transparent));
    box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--a1) 30%,transparent);
  }
  :root:has(#v-home:checked) .nv[for=v-home]::before,
  :root:has(#v-courses:checked) .nv[for=v-courses]::before,
  :root:has(#v-code:checked) .nv[for=v-code]::before,
  :root:has(#v-lesson:checked) .nv[for=v-lesson]::before,
  :root:has(#v-profile:checked) .nv[for=v-profile]::before{
    inset-inline-end:auto;inset-inline-start:-16px;top:20%;bottom:20%;width:4px;border-radius:0;
    border-start-end-radius:4px;border-end-end-radius:4px;box-shadow:0 0 16px var(--a1);
  }

  /* حالت جمع‌شده */
  :root:has(#sbCollapse:checked) :is(.nv span,.nb,.sb-label,.brand-t,.goal,.u-t,.sb-collapse span){display:none !important}
  :root:has(#sbCollapse:checked) .nv{justify-content:center;padding:13px 0}
  :root:has(#sbCollapse:checked) .sb-brand{justify-content:center;padding-inline:0}
  :root:has(#sbCollapse:checked) .ucard{justify-content:center;padding:8px}
  :root:has(#sbCollapse:checked) .sb-collapse{justify-content:center;padding-inline:0}
  :root:has(#sbCollapse:checked) .sb-collapse .ic{transform:scaleX(-1)}
  :root:has(#sbCollapse:checked) .sb-label.l2{margin-top:4px}

  .top{padding:16px clamp(24px,3.2vw,48px)}
  .top-r{gap:10px}
  .wrap{max-width:1200px}
  .hero{min-height:calc(100dvh - 76px)}
  .toast{left:calc(50% + var(--sb-w) / -2 + 0px)}
}
@media (min-width:1100px){
  .lesson-grid{grid-template-columns:minmax(0,1fr) 300px}
  .l-aside{display:grid;gap:14px;align-content:start;position:sticky;top:96px;height:max-content;margin-top:34px}
  .steps{max-width:none}
}

/* ---------- موبایل ---------- */
@media (max-width:959px){
  .pop{inset-inline:12px;width:auto;top:64px}
  .toast{top:70px;width:calc(100vw - 32px);justify-content:flex-start}
  .step{scroll-margin-top:80px}
}