/* Nabz site shell. Dark theme is locked on purpose: every course animation is drawn for a dark canvas.
   Radius rule: surfaces 16px, controls 12px. One accent (coral). */
@font-face{font-family:"IRANSansX";src:url("/fonts/IRANSansX-Regular.woff") format("woff");font-weight:400 500;font-display:swap}
@font-face{font-family:"IRANSansX";src:url("/fonts/IRANSansX-Bold.woff") format("woff");font-weight:600 700;font-display:swap}
@font-face{font-family:"IRANSansX";src:url("/fonts/IRANSansX-ExtraBold.woff") format("woff");font-weight:800;font-display:swap}

:root{
  --bg:#0c121a;--surface:#131b26;--surface-2:#182231;--line:#233044;--ink:#eaf0f6;--mute:#9aa8ba;
  --accent:#ef8a66;--accent-bg:#b4543a;--accent-bg-hover:#c45f43;--ok:#5fd39a;--warn:#ffd166;--bad:#ff7b7b;
  --r-surface:16px;--r-control:12px;--ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"IRANSansX",Tahoma,sans-serif;font-feature-settings:"ss01";line-height:1.85;font-size:16px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.mute{color:var(--mute)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:#0c121add;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:36px;height:36px;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:22px;font-size:15px;white-space:nowrap}
.nav-links a{color:var(--mute)}
.nav-links a:hover{color:var(--ink);text-decoration:none}
@media (max-width:720px){.nav-links .hide-sm{display:none}}

/* buttons and forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:15px;white-space:nowrap;
  border-radius:var(--r-control);padding:11px 20px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
  transition:transform .15s var(--ease),background .2s}
.btn:hover{text-decoration:none;background:var(--surface-2)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{background:var(--accent-bg);border-color:var(--accent-bg);color:#fff}
.btn.primary:hover{background:var(--accent-bg-hover)}
.btn.small{padding:7px 14px;font-size:14px}
.btn.block{width:100%}
label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.field{margin-bottom:16px}
.field small{display:block;color:var(--mute);margin-top:6px;font-size:13px}
input[type=text],input[type=tel],input[type=date],input[type=number],select{width:100%;font:inherit;color:var(--ink);background:#0f1621;border:1px solid #33435c;
  border-radius:var(--r-control);padding:11px 14px;outline:none}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #ef8a6633}
input::placeholder{color:#7f8da0}
.otp-input{letter-spacing:.6em;text-align:center;font-size:24px;font-weight:700;direction:ltr}
.error{color:var(--bad);font-size:14px;margin-top:6px}
.notice{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-surface);padding:14px 18px}
.notice.ok{border-color:#2d6a4f;background:#0f2019}
.notice.bad{border-color:#7a2f2f;background:#211314}

/* landing */
.hero{padding:56px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,54px);line-height:1.25;margin:0 0 18px;font-weight:800;letter-spacing:-.5px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lead{font-size:18px;color:var(--mute);max-width:46ch;margin:0 0 26px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-stage{border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);padding:8px;box-shadow:0 30px 80px #05080d}
.hero-stage .stage{border:0;background:transparent}
.hero-caption{font-size:13px;color:var(--mute);margin:8px 6px 2px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:32px}}

.facts{border-block:1px solid var(--line);background:#0e151f}
.facts .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-block:26px}
.facts b{display:block;font-size:30px;font-weight:800;color:var(--ink)}
.facts span{color:var(--mute);font-size:14px}
@media (max-width:720px){.facts .wrap{grid-template-columns:repeat(2,1fr)}}

section.block{padding:84px 0}
section.block h2{font-size:clamp(26px,3.4vw,38px);margin:0 0 12px;font-weight:800;line-height:1.35}
section.block .intro{color:var(--mute);max-width:60ch;margin:0 0 36px;font-size:17px}

.method{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.method ol{list-style:none;margin:0;padding:0}
.method li{padding:22px 0;border-top:1px solid var(--line)}
.method li:first-child{border-top:0;padding-top:0}
.method li strong{display:block;font-size:24px;font-weight:800;margin-bottom:4px}
.method li p{margin:0;color:var(--mute)}
.method figure{margin:0;position:sticky;top:96px}
@media (max-width:900px){.method{grid-template-columns:1fr}.method figure{position:static}}

.chapter-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chapter-wall a{display:block;border-radius:var(--r-surface);padding:18px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  transition:transform .25s var(--ease),border-color .25s}
.chapter-wall a:hover{transform:translateY(-3px);border-color:#4a5d78;text-decoration:none}
.chapter-wall a.wide{border-color:#2d6a4f;background:linear-gradient(140deg,#10261c,#131b26 60%)}
.chapter-wall .num{font-size:13px;color:var(--mute)}
.chapter-wall h3{margin:4px 0 6px;font-size:18px;line-height:1.5}
.chapter-wall .en{font-size:12px;color:var(--mute);direction:ltr;text-align:right}
.chapter-wall .free{color:var(--ok);font-size:13px;font-weight:700}
@media (max-width:900px){.chapter-wall{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.chapter-wall{grid-template-columns:1fr}}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);padding:26px;display:flex;flex-direction:column}
.plan.featured{border-color:var(--accent-bg);background:linear-gradient(180deg,#24150f,#131b26 55%)}
.plan h3{margin:0;font-size:20px}
.plan .pitch{color:var(--mute);font-size:14px;min-height:44px}
.plan .price{font-size:34px;font-weight:800;margin:14px 0 0}
.plan .price small{font-size:15px;color:var(--mute);font-weight:500}
.plan .daily{font-size:13px;color:var(--mute);margin-bottom:18px}
.plan ul{padding:0 18px 0 0;margin:0 0 22px;color:var(--mute);font-size:14px;flex:1}
.plan .plan-tag{display:block;font-size:13px;font-weight:700;color:var(--accent);margin-bottom:6px}
.free-row{margin-top:16px;border:1px dashed var(--line);border-radius:var(--r-surface);padding:16px 20px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
@media (max-width:900px){.pricing{grid-template-columns:1fr}}

.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:left;color:var(--mute)}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--mute);margin:10px 0 0}

.final-cta{text-align:center;padding:90px 0;border-top:1px solid var(--line);background:radial-gradient(60% 120% at 50% 0%,#2a1810,transparent 70%)}
.final-cta h2{font-size:clamp(26px,3.4vw,40px);margin:0 0 20px}

footer.site{border-top:1px solid var(--line);padding:30px 0;color:var(--mute);font-size:14px}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer.site a{color:var(--mute)}

/* auth and simple pages */
.narrow{max-width:440px;margin:56px auto;padding:0 20px}
.narrow h1{font-size:28px;margin:0 0 6px}
.panel{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-surface);padding:26px}
.prose{max-width:760px;margin:48px auto;padding:0 20px}
.prose h1{font-size:30px}

/* app */
.app-head{padding:34px 0 10px;display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.app-head h1{margin:0;font-size:28px}
.stats{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;margin:18px 0 30px}
.stat{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-surface);padding:18px}
.stat b{display:block;font-size:30px;font-weight:800}
.stat span{color:var(--mute);font-size:14px}
.stat.resume{background:linear-gradient(140deg,#24150f,#131b26 65%);display:flex;flex-direction:column;justify-content:space-between;gap:12px}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}.stat.resume{grid-column:span 2}}
.chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:60px}
.ch{display:block;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-surface);padding:16px;color:var(--ink)}
.ch:hover{text-decoration:none;border-color:#4a5d78}
.ch .meta{display:flex;justify-content:space-between;color:var(--mute);font-size:13px}
.ch h3{margin:4px 0 12px;font-size:17px;line-height:1.5}
.bar{height:6px;border-radius:6px;background:#0f1621;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent-bg);border-radius:6px}
.lockbadge{font-size:12px;color:var(--warn)}

.flash{max-width:640px;margin:40px auto 80px;padding:0 20px}
.cardface{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-surface);padding:34px 28px;min-height:260px}
.cardface .ctx{font-size:13px;color:var(--mute);margin-bottom:14px}
.cardface .front{font-size:22px;font-weight:700;line-height:1.7}
.cardface .back{font-size:19px;margin-top:22px;padding-top:22px;border-top:1px dashed var(--line);color:var(--ok)}
.cardface .back[hidden]{display:none}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.grades[hidden]{display:none}

table.list{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}
table.list th,table.list td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:right}
table.list th{color:var(--mute);font-weight:600}

/* chapter player locks */
.scene.locked .lockcard{border:1px solid #6b4a1f;background:linear-gradient(160deg,#241a0e,#131b26 60%);border-radius:16px;padding:28px;margin-top:16px}
.scene.locked .lockcard h3{margin:0 0 6px}
.scene.locked .lockcard p{color:var(--mute);margin:0 0 16px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- cute & study layer ---- */
.small{font-size:13px}
.pill{display:inline-block;min-width:22px;padding:0 7px;border-radius:99px;background:var(--accent-bg);color:#fff;font-size:12px;line-height:20px;text-align:center}
kbd{font:inherit;font-size:11px;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:0 5px}
.navsearch{display:flex;align-items:center;gap:6px;background:#0f1621;border:1px solid var(--line);border-radius:var(--r-control);padding:2px 10px 2px 8px}
.navsearch input{border:0;background:transparent;padding:6px 2px;width:200px;font-size:14px;box-shadow:none}
.navsearch input:focus{box-shadow:none}
.navsearch:focus-within{border-color:var(--accent)}

.mascot .beat{transform-origin:36px 34px;animation:beat 2.4s var(--ease) infinite}
.mascot .eyes{transform-origin:36px 30px;animation:blink 5s infinite}
.mascot-party .spark circle{animation:twinkle 1.4s ease-in-out infinite alternate}
.mascot-party .spark circle:nth-child(2){animation-delay:.4s}.mascot-party .spark circle:nth-child(3){animation-delay:.8s}
@keyframes beat{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.07)}86%{transform:scale(.98)}92%{transform:scale(1.04)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes twinkle{from{opacity:.3;transform:translateY(2px)}to{opacity:1;transform:none}}

.app section{margin:0 0 34px}
.app h2{font-size:20px;margin:0 0 14px}
.row-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.row-head h1{margin:0;font-size:26px}
.hello{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px!important;padding:26px 28px;border-radius:22px;
  background:radial-gradient(120% 140% at 0% 0%,#2a1810 0%,#151d29 55%);border:1px solid #3a2a22}
.hello h1{margin:0 0 6px;font-size:clamp(22px,3vw,30px)}
.hello p{margin:0 0 16px;max-width:52ch}
.hello-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:640px){.hello{flex-direction:column-reverse;align-items:flex-start;padding:20px}.hello .mascot{width:72px;height:65px}}
.today-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ring,.today-stat{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-surface);padding:16px;display:flex;align-items:center;gap:14px}
.ring b,.today-stat b{display:block;font-size:26px;font-weight:800;line-height:1.2}
.ring b small{font-size:14px;color:var(--mute);font-weight:500}
.ring span,.today-stat span{color:var(--mute);font-size:14px}
.ring circle:last-child{transition:stroke-dashoffset .8s var(--ease)}
.today-stat{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
@media (max-width:820px){.today-grid{grid-template-columns:1fr 1fr}}
.pins{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.pin{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-control);padding:12px 14px;color:var(--ink);font-weight:600}
.pin .mute{font-size:12px;font-weight:400}
.pin:hover{text-decoration:none;border-color:#4a5d78}
.ch.done{border-color:#2d6a4f}
.donebadge{font-size:12px;color:var(--ok)}

.player-top{top:64px}
.scene.locked .lockcard,.hy .lockcard{display:flex;gap:18px;align-items:center}
.hy .lockcard{border:1px solid #6b4a1f;background:linear-gradient(160deg,#241a0e,#131b26 60%);border-radius:16px;padding:24px}
.finish{position:fixed;inset-inline:16px;bottom:84px;z-index:6;max-width:560px;margin-inline:auto;display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:#152018;border:1px solid #2d6a4f;border-radius:18px;box-shadow:0 20px 60px #05080d;animation:pop .45s var(--ease)}
.finish b{display:block}.finish span{font-size:14px;color:var(--mute)}
.finish .btn{margin-inline-start:auto}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
nav.ctrl #pin[aria-pressed=true]{border-color:var(--warn);color:var(--warn)}

.flash-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.cardface{transition:transform .35s var(--ease),border-color .3s}
.cardface.flipped{border-color:#2d6a4f;transform:translateY(-2px)}
.cardface.empty{text-align:center}
.grades .btn{flex-direction:column;gap:0;line-height:1.4}
.grades .btn small{font-size:11px;opacity:.6;font-weight:400}

.searchbig{display:flex;gap:10px;margin:30px 0 22px}
.searchbig input{font-size:18px;padding:14px 16px}
.empty-state{text-align:center;color:var(--mute);padding:30px 0}
.hits{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.hits a{display:block;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-surface);padding:14px 18px;color:var(--ink)}
.hits a:hover{text-decoration:none;border-color:#4a5d78}
.hits b{display:block;font-size:17px;margin:2px 0}
.hits p{margin:4px 0 0;color:var(--mute);font-size:14px}
mark{background:#ffd16633;color:var(--warn);border-radius:4px;padding:0 3px}

.hy-scene{border-top:1px solid var(--line);padding-top:16px}
.hy-scene h2 a{color:var(--ink)}
.hy-pearl{border-inline-start:4px solid var(--warn);background:#1d1a10;border-radius:10px;padding:8px 14px;margin:10px 0}
.hy-pearl p{margin:4px 0}
.hy ul{padding-inline-start:20px}.hy li{margin:6px 0}
@media print{
  .nav,.tabbar,footer.site,.hy .btn{display:none!important}
  body{background:#fff;color:#111}.hy-scene h2 a{color:#111}.hy-pearl{background:#fff7e0;border-color:#c99a1a}
  mark{background:#ffe680;color:#111}.mute{color:#555}
}

.tabbar{display:none}
@media (max-width:720px){
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;bottom:0;inset-inline:0;z-index:7;background:#0b1018f2;backdrop-filter:blur(8px);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{text-align:center;color:var(--mute);font-size:12px;padding:8px 0;border-radius:10px}
  .tabbar a:hover{text-decoration:none;color:var(--ink);background:var(--surface)}
  body:has(.tabbar){padding-bottom:64px}
  body:has(nav.ctrl) .tabbar{display:none}
}

.confetti{position:relative;height:0}
.confetti i{position:absolute;top:0;left:50%;width:8px;height:12px;border-radius:2px;background:hsl(calc(var(--i)*40),80%,65%);
  animation:fall 1.6s var(--ease) both;animation-delay:calc(var(--i)*30ms);transform-origin:center}
@keyframes fall{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(calc((var(--i) - 9)*22px),220px) rotate(calc(var(--i)*70deg));opacity:0}}
@media (prefers-reduced-motion:reduce){.mascot *,.confetti,.finish{animation:none!important}.confetti{display:none}}
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stage-card{border:1px solid var(--line);border-radius:var(--r-surface);padding:20px;background:var(--surface)}
.stage-card b{font-size:19px}.stage-card p{margin:6px 0 0;color:var(--mute)}
.stage-card.s1{background:linear-gradient(160deg,#14233a,#131b26 70%)}
.stage-card.s3{background:linear-gradient(160deg,#10261c,#131b26 70%)}
.stage-card.wide{grid-column:1/-1;display:flex;align-items:center;gap:20px;background:radial-gradient(120% 160% at 100% 0%,#2a1810,#131b26 60%);border-color:#3a2a22}
@media (max-width:820px){.stages{grid-template-columns:1fr}.stage-card.wide{flex-direction:column;align-items:flex-start}}

.anim-list{border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);overflow:hidden}
.anim-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;border-top:1px solid var(--line)}
.anim-row:first-child{border-top:0}
.anim-row>a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan .daily s{margin-inline-end:6px}

/* lesson library */
.lessons{display:flex;flex-direction:column;gap:12px;margin:22px 0}
.lesson{border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);padding:18px 20px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.lesson h2{margin:4px 0 8px;font-size:19px}
.lesson .meta{display:flex;gap:12px;font-size:13px;color:var(--mute)}
.lesson-actions{display:flex;flex-direction:column;gap:8px;min-width:150px}
@media (max-width:720px){.lesson{grid-template-columns:1fr}.lesson-actions{flex-direction:row;flex-wrap:wrap}.lesson-actions .btn{flex:1;min-width:140px}}

/* chapter reader */
.reader{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;padding:26px 20px 90px}
.reader-toc-box{position:sticky;top:84px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);padding:14px 16px;max-height:calc(100vh - 110px);overflow:auto}
.reader-toc-box b{font-size:14px}
.reader-toc-box ol,.reader-toc-mob ol{margin:8px 0 0;padding-inline-start:20px;font-size:14px}
.reader-toc-box li,.reader-toc-mob li{margin:4px 0}
.reader-toc-box a,.reader-toc-mob a{color:var(--mute)}
.reader-toc-box a:hover,.reader-toc-mob a:hover{color:var(--ink)}
.reader-toc-mob{display:none;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);padding:10px 16px;margin:14px 0}
.reader-toc-mob summary{cursor:pointer;font-weight:700}
.reader-body{max-width:70ch;min-width:0;line-height:2}
.reader-sec{padding:22px 0;border-top:1px solid var(--line);scroll-margin-top:84px}
.reader-sec:first-child{border-top:0;padding-top:0}
.reader-sec h2{font-size:23px;margin:0 0 10px;font-weight:800}
.reader-sec .notes{padding:0;font-size:16px;line-height:2}
.reader-sec .notes table{display:block;overflow-x:auto}
.reader-sec .notes img{max-width:100%;height:auto}
.reader-sec.locked .lockcard{border:1px solid #6b4a1f;background:linear-gradient(160deg,#241a0e,#131b26 60%);border-radius:16px;padding:24px;display:flex;gap:18px;align-items:center;margin-top:6px}
.reader-sec.locked .lockcard h3{margin:0 0 6px}
.reader-sec.locked .lockcard p{color:var(--mute);margin:0 0 16px}
@media (max-width:900px){.reader{display:block;padding:14px 16px 90px}.reader-toc-desk{display:none}.reader-toc-mob{display:block}}
.reader a:focus-visible,.lesson a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}