/* =========================================================================
   Platform University: design system
   1. Tokens  2. Base  3. Layout  4. Nav  5. Buttons & forms  6. Components
   7. Pages (home, sections, pricing, lesson, dashboard, admin, auth)  8. Responsive
   ========================================================================= */

/* ---------- 1. Tokens ----------
   Dark is the default. Light applies when the OS prefers light (unless the user picked dark),
   or when the user picked light with the theme toggle (<html data-theme="light|dark">). */
:root{
  --bg:#070912;--bg2:#0d1020;--card:#11152a;--card2:#161b35;--line:#232a4a;--line2:#2f3760;
  --tx:#eef0fb;--mu:#a0a6c8;--mu2:#7b82a8;
  --pri:#6d5efc;--pri-2:#8b7bff;--pri2:#22d3ee;--pri-soft:rgba(109,94,252,.14);--acc-soft:rgba(34,211,238,.12);
  --ok:#34d399;--ok-soft:rgba(52,211,153,.14);--warn:#fbbf24;--warn-soft:rgba(251,191,36,.14);--err:#f87171;--err-soft:rgba(248,113,113,.14);
  --grad:linear-gradient(135deg,#6d5efc 0%,#8b5cf6 55%,#a855f7 100%);
  --grad-text:linear-gradient(90deg,#22d3ee,#8b7bff 50%,#e879f9);
  --r-sm:8px;--r:14px;--r-lg:20px;--r-xl:28px;
  --sh-sm:0 1px 2px rgba(0,0,0,.3);
  --sh:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -12px rgba(0,0,0,.55);
  --sh-lg:0 30px 80px -24px rgba(109,94,252,.45);
  --ring:0 0 0 3px rgba(109,94,252,.45);
  --nav-h:64px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f6f7fb;--bg2:#eef0f7;--card:#ffffff;--card2:#f9faff;--line:#e2e5f0;--line2:#cfd4e6;
    --tx:#0f1226;--mu:#545a7c;--mu2:#7a809f;
    --pri:#5b4cf0;--pri-2:#6d5efc;--pri2:#0891b2;--pri-soft:rgba(91,76,240,.09);--acc-soft:rgba(8,145,178,.08);
    --ok:#059669;--ok-soft:rgba(5,150,105,.1);--warn:#b45309;--warn-soft:rgba(217,119,6,.12);--err:#dc2626;--err-soft:rgba(220,38,38,.08);
    --grad-text:linear-gradient(90deg,#0891b2,#5b4cf0 50%,#c026d3);
    --sh-sm:0 1px 2px rgba(15,18,38,.06);
    --sh:0 1px 2px rgba(15,18,38,.04),0 8px 24px -12px rgba(15,18,38,.12);
    --sh-lg:0 30px 70px -28px rgba(91,76,240,.35);
    color-scheme:light;
  }
}
/* Same light tokens, chosen explicitly with the toggle (keep in sync with the block above). */
:root[data-theme="light"]{
  --bg:#f6f7fb;--bg2:#eef0f7;--card:#ffffff;--card2:#f9faff;--line:#e2e5f0;--line2:#cfd4e6;
  --tx:#0f1226;--mu:#545a7c;--mu2:#7a809f;
  --pri:#5b4cf0;--pri-2:#6d5efc;--pri2:#0891b2;--pri-soft:rgba(91,76,240,.09);--acc-soft:rgba(8,145,178,.08);
  --ok:#059669;--ok-soft:rgba(5,150,105,.1);--warn:#b45309;--warn-soft:rgba(217,119,6,.12);--err:#dc2626;--err-soft:rgba(220,38,38,.08);
  --grad-text:linear-gradient(90deg,#0891b2,#5b4cf0 50%,#c026d3);
  --sh-sm:0 1px 2px rgba(15,18,38,.06);
  --sh:0 1px 2px rgba(15,18,38,.04),0 8px 24px -12px rgba(15,18,38,.12);
  --sh-lg:0 30px 70px -28px rgba(91,76,240,.35);
  color-scheme:light;
}
/* Explicit dark keeps the default tokens, but must also beat an OS light preference. */
:root[data-theme="dark"]{color-scheme:dark}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:rgba(109,94,252,.35)}
a{color:var(--pri2);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
img,svg{max-width:100%}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere;font-weight:750}
h1{font-size:clamp(2rem,4.2vw,3rem);margin:.2em 0 .4em;letter-spacing:-.035em}
h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin:1.8em 0 .6em}
h3{font-size:1.12rem;margin:.2em 0 .45em}
h4{font-size:1rem}
p{margin:.6em 0}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6}
.muted{color:var(--mu)}.small{font-size:.86rem}.center{text-align:center}
.ok{color:var(--ok)}.err{color:var(--err);min-height:1.4em;font-size:.92rem}
code{font-family:var(--mono);background:var(--bg2);border:1px solid var(--line);padding:1px 6px;border-radius:6px;font-size:.86em}
kbd{font-family:var(--mono);font-size:.72rem;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--mu)}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}

/* ---------- 3. Layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:56px 20px}
.narrow{max-width:540px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.block{padding:34px 0 8px}
.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline input{width:auto;flex:1;min-width:180px;margin:0}
.inline select{margin:0}

/* ---------- 4. Navigation ---------- */
.nav{position:sticky;top:0;z-index:40;height:var(--nav-h);background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%;padding-top:0;padding-bottom:0}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:1.12rem;letter-spacing:-.02em;color:var(--tx)!important;text-decoration:none!important;white-space:nowrap}
.logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;font-size:.9rem;box-shadow:0 6px 18px -6px rgba(109,94,252,.7)}
.nav nav{display:flex;gap:4px;align-items:center;flex-wrap:nowrap}
.nav nav>*{white-space:nowrap;flex-shrink:0}
.nav nav>a:not(.btn){color:var(--mu);font-weight:550;font-size:.93rem;padding:7px 10px;border-radius:9px;transition:color .15s,background .15s}
.logoutbtn{margin-left:4px}
.nav nav>a:not(.btn):hover{color:var(--tx);background:var(--pri-soft);text-decoration:none}
.nav nav>a.on{color:var(--tx);background:var(--pri-soft)}
.nav .navadmin{color:var(--warn)!important}
.nav-in{max-width:1320px}
.searchbtn{display:inline-flex;align-items:center;gap:7px;margin:0 4px}
.searchbtn .slabel{display:none}
.sicon{flex:none}
.themebtn{display:inline-grid;place-items:center;width:38px;height:36px;padding:0;font-size:1.05rem;line-height:1}
.burger{display:none;background:var(--card);border:1px solid var(--line);color:var(--tx);font-size:1.2rem;width:42px;height:40px;border-radius:10px;cursor:pointer}

/* ---------- 5. Buttons & forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--grad);color:#fff!important;border:0;padding:11px 20px;border-radius:11px;font:600 .98rem/1.2 var(--font);cursor:pointer;text-decoration:none!important;transition:transform .15s,box-shadow .2s,filter .15s;box-shadow:0 8px 22px -10px rgba(109,94,252,.8),inset 0 1px 0 rgba(255,255,255,.18);white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(109,94,252,.85),inset 0 1px 0 rgba(255,255,255,.2);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
.btn.sm{padding:7px 14px;font-size:.88rem;border-radius:9px}
.btn.lg{padding:14px 26px;font-size:1.04rem;border-radius:13px}
.btn.block{display:flex;width:100%;margin:10px 0;white-space:normal}
.btn.alt{background:var(--card);border:1px solid var(--line2);color:var(--tx)!important;box-shadow:var(--sh-sm)}
.btn.alt:hover{border-color:var(--pri);background:var(--card2)}
.ghost{background:transparent;border:1px solid var(--line);color:var(--mu);padding:7px 12px;border-radius:9px;cursor:pointer;font:500 .9rem var(--font);transition:.15s}
.ghost:hover{color:var(--tx);border-color:var(--line2);background:var(--card)}
.ghost.sm{padding:4px 10px;font-size:.82rem}
label{display:block;font-weight:550;font-size:.9rem;color:var(--tx)}
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--tx);padding:11px 13px;border-radius:11px;font:inherit;font-size:.97rem;margin:6px 0 14px;transition:border-color .15s,box-shadow .15s,background .15s}
input::placeholder{color:var(--mu2)}
input:hover,select:hover{border-color:var(--line2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:var(--ring);background:var(--card)}
input[type=checkbox]{accent-color:var(--pri)}
input.invalid,input.invalid:focus{border-color:var(--err);box-shadow:0 0 0 3px var(--err-soft)}
.fielderr{display:block;color:var(--err);font-size:.82rem;font-weight:500;margin:-10px 0 12px;min-height:0}
.fielderr:empty{display:none}
.inline .fielderr{flex-basis:100%;margin:2px 0 0}

/* ---------- 6. Components ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;color:var(--tx);display:block;box-shadow:var(--sh);transition:transform .2s,border-color .2s,box-shadow .2s}
a.card:hover{border-color:color-mix(in srgb,var(--pri) 60%,var(--line));transform:translateY(-3px);box-shadow:var(--sh),var(--sh-lg);text-decoration:none}
.card p{color:var(--mu);margin:.3em 0 .8em}
.ico{font-size:1.8rem;line-height:1}
.pill{display:inline-block;border:1px solid color-mix(in srgb,var(--pri) 35%,var(--line));background:var(--pri-soft);padding:4px 13px;border-radius:99px;font-size:.8rem;color:var(--pri2);font-weight:650;letter-spacing:.01em}
.eyebrow{display:inline-block;font-size:.76rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--pri2);margin-bottom:6px}
.tag{display:inline-block;font-size:.7rem;font-weight:750;letter-spacing:.04em;padding:3px 8px;border-radius:7px;background:var(--bg2);border:1px solid var(--line);color:var(--mu);white-space:nowrap;vertical-align:middle}
.tag.free{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.tag.soon{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.tag.owned{background:var(--pri-soft);border-color:transparent;color:var(--pri-2)}
.tag.lock{background:var(--err-soft);border-color:transparent;color:var(--err)}
.lvl{font-size:.74rem;color:var(--mu);border:1px solid var(--line);border-radius:7px;padding:2px 8px;white-space:nowrap}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.bar{height:8px;background:var(--bg2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pri2),var(--pri));border-radius:99px;transition:width .6s ease}
.ticks{list-style:none;padding:0;margin:18px 0}
.ticks li{padding:6px 0 6px 30px;position:relative}
.ticks li::before{content:"✓";position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);font-weight:800;font-size:.72rem}
.steps{padding-left:20px}.steps li{margin:6px 0}
ul.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px 24px}
.band{position:relative;overflow:hidden;background:radial-gradient(600px 220px at 15% 0%,rgba(109,94,252,.28),transparent 70%),radial-gradient(500px 220px at 90% 100%,rgba(34,211,238,.16),transparent 70%),var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:54px 30px;text-align:center;box-shadow:var(--sh)}
.band h2{margin-top:0}
.band p{max-width:640px;margin:0 auto 22px;color:var(--mu)}
.list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:var(--sh)}
.row{display:flex;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--tx);transition:background .15s}
.row:last-child{border-bottom:0}
a.row:hover{background:var(--card2);text-decoration:none}
.row .grow{flex:1;display:flex;flex-direction:column;min-width:0}
.row small{color:var(--mu)}
.chk{width:22px;height:22px;border:1.5px solid var(--line2);border-radius:50%;display:grid;place-items:center;color:var(--ok);font-size:.75rem;flex:none}
.chk:not(:empty){background:var(--ok-soft);border-color:var(--ok)}
.tablewrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh)}
.tablewrap table{border:0;border-radius:0}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r);overflow:hidden;font-size:.92rem}
th{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);font-weight:700;background:var(--card2)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
details summary{cursor:pointer;color:var(--pri2);margin:8px 0}
.modal{position:fixed;inset:0;background:rgba(3,5,12,.62);backdrop-filter:blur(4px);display:grid;place-items:start center;padding-top:12vh;z-index:60;animation:fadein .15s ease}
.modal[hidden]{display:none}
.modal-in{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);width:min(640px,92vw);padding:14px;box-shadow:0 40px 100px -20px rgba(0,0,0,.6)}
.modal input{margin:0 0 8px;font-size:1.05rem;padding:13px 15px}
.modal ul{list-style:none;margin:0;padding:0;max-height:52vh;overflow:auto}
.modal li a{display:block;padding:10px 12px;border-radius:10px;color:var(--tx)}
.modal li a:hover{background:var(--pri-soft);text-decoration:none}
.modal li small{display:block;color:var(--mu)}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:4px 20px;margin:10px 0;transition:border-color .15s}
.faq details[open]{border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
.faq summary{cursor:pointer;font-weight:650;padding:14px 0;list-style:none;color:var(--tx)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--pri2);font-weight:800;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--mu);margin:0 0 16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 0}
.chip{border:1px solid var(--line);border-radius:99px;padding:7px 16px;color:var(--tx);font-weight:600;font-size:.9rem;background:var(--card);transition:.15s}
.chip:hover{border-color:var(--pri);text-decoration:none}
.chip.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px -10px rgba(109,94,252,.8)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 7a. Home ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 420px at 50% -12%,rgba(109,94,252,.38),transparent 70%),
  radial-gradient(520px 300px at 92% 18%,rgba(34,211,238,.18),transparent 70%),
  radial-gradient(420px 260px at 6% 40%,rgba(168,85,247,.14),transparent 70%)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 70%);pointer-events:none}
.hero-in{position:relative;text-align:center;padding:92px 20px 64px}
.hero h1{font-size:clamp(2.3rem,5.6vw,4rem);line-height:1.05;margin-bottom:.35em}
.hero .lead{max-width:720px;margin:0 auto 30px;color:var(--mu)}
.hero-in .eyebrow{margin-bottom:16px;padding:5px 14px;border-radius:99px;background:var(--pri-soft);border:1px solid color-mix(in srgb,var(--pri) 35%,var(--line))}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;margin:28px 0 0;padding:0;color:var(--mu);font-size:.9rem}
.trust li::before{content:"✓";color:var(--ok);font-weight:800;margin-right:7px}
.heroart{max-width:780px;margin:48px auto 0;filter:drop-shadow(0 30px 60px rgba(109,94,252,.28))}
.heroart svg{width:100%;height:auto;display:block}
.stats{display:flex;gap:16px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.stats div{display:flex;flex-direction:column;min-width:150px;padding:14px 20px;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--line);border-radius:var(--r)}
.stats b{font-size:1.9rem;letter-spacing:-.03em;line-height:1.1}
.stats span{color:var(--mu);font-size:.86rem}
h2.sec{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;margin:0 0 .5em;text-align:center}
.sec{text-align:center}
.sectabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px auto 8px;position:sticky;top:calc(var(--nav-h) + 6px);z-index:15;padding:10px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r-lg);width:max-content;max-width:100%}
.sectab{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:9px 16px;cursor:pointer;color:var(--tx);font:inherit;transition:.15s;text-decoration:none}
.sectab:hover{border-color:var(--pri);text-decoration:none;transform:translateY(-1px)}
.sectab b{font-size:.98rem}
.sectab small{color:var(--mu);font-size:.76rem}
.sectab .ico{font-size:1.35rem}
.sectab.on{border-color:var(--pri);background:linear-gradient(135deg,var(--pri-soft),var(--acc-soft));box-shadow:0 10px 26px -12px rgba(109,94,252,.7)}
.sectab.soon{opacity:.7;border-style:dashed}
.panelhead{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:26px 0 8px;padding:22px 26px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}
.panelhead h2{margin:0;font-size:1.45rem}
.panelhead p{margin:4px 0 0}
.panelcta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.secpanel[hidden]{display:none}
.secpanel{animation:fadein .25s ease}
.steps4 .card{position:relative}
.stepn,.freepath .num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--grad);color:#fff;font-weight:800;margin-bottom:10px;box-shadow:0 8px 18px -8px rgba(109,94,252,.8)}
.startfree{text-align:left;background:radial-gradient(500px 200px at 0% 0%,rgba(109,94,252,.22),transparent 70%),radial-gradient(500px 200px at 100% 100%,rgba(34,211,238,.12),transparent 70%),var(--card)}
.startfree h2,.startfree>p{text-align:center}
.startfree .pill{display:block;width:max-content;margin:0 auto 10px}
.startfree .btn{display:flex;width:max-content;max-width:100%;margin:0 auto}
.freegroup{max-width:800px;margin:26px auto 0;text-align:center}
.freegroup h3{margin-bottom:4px}
.freegroup .freepath{text-align:left}
.freepath{list-style:none;margin:20px auto;padding:0;max-width:760px}
.freepath li{margin:10px 0}
.freepath a{display:flex;gap:14px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;color:var(--tx);transition:.15s}
.freepath a:hover{border-color:var(--pri);transform:translateX(4px);text-decoration:none}
.freepath .num{flex:none;margin:0;border-radius:50%}
.freepath small{display:block;color:var(--mu)}
.lvlcard{display:flex;flex-direction:column;gap:6px}
.lvlcard h3{font-size:1.12rem}
.lvlcard .who{font-size:.85rem;color:var(--pri2);font-weight:600;margin:0}
.lvlcard ul{margin:6px 0 10px;padding-left:18px;color:var(--mu);font-size:.93rem}
.lvlcard li{margin:3px 0}

/* ---------- 7b. Sections & curriculum ---------- */
.seccard{position:relative;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.seccard::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad);opacity:0;transition:opacity .2s}
.seccard:hover::after{opacity:1}
.seccard .tag{position:absolute;top:20px;right:20px}
.seccard.soon{opacity:.9}
.secfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line)}
.secgo{color:var(--pri2);font-weight:650;font-size:.9rem;white-space:nowrap}
.sechead{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
.sechead h1 .tag{font-size:.75rem}
.track{margin:34px 0}
.track h3{font-size:1.15rem}
.secblock{margin:40px 0}
.sechd{padding-bottom:10px;border-bottom:1px solid var(--line);position:relative}
.sechd::after{content:"";position:absolute;left:0;bottom:-1px;width:80px;height:2px;background:var(--grad)}
.crumb{color:var(--mu);font-size:.88rem;margin:0}
.crumb a{color:var(--mu)}
.crumb a:hover{color:var(--tx)}

/* ---------- 7c. Pricing ---------- */
.plan{position:relative;background:var(--card);border:1px solid color-mix(in srgb,var(--pri) 55%,var(--line));border-radius:var(--r-xl);padding:32px;margin-top:24px;box-shadow:var(--sh),var(--sh-lg);text-align:left}
.plan .pill,.plan .price{display:block;text-align:center}
.plan .pill{width:max-content;margin:0 auto}
.price{font-size:3.2rem;font-weight:800;letter-spacing:-.04em;margin:10px 0 0;line-height:1.1}
.pickgrid{display:grid;gap:12px;max-width:780px;margin:28px auto 0}
.pick{display:flex;gap:14px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px 20px;cursor:pointer;color:var(--tx);transition:.15s;text-decoration:none!important;box-shadow:var(--sh)}
.pick:hover{border-color:color-mix(in srgb,var(--pri) 60%,var(--line))}
.pick.on{border-color:var(--pri);background:linear-gradient(135deg,var(--pri-soft),var(--acc-soft)),var(--card);box-shadow:var(--sh),0 0 0 3px var(--pri-soft)}
.pick.off{opacity:.6}
.pick input{width:20px;height:20px;margin:0;flex:none}
.pick .ico{font-size:1.6rem}
.pick .grow{flex:1;display:flex;flex-direction:column;min-width:0}
.pick small{color:var(--mu);font-weight:400}
.pick .pr{font-weight:800;font-size:1.15rem;text-align:right;display:flex;flex-direction:column;white-space:nowrap}
.pick .pr small{font-size:.75rem}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line2);margin-top:10px;padding-top:12px;font-size:1.05rem}
.total b{font-size:1.9rem;letter-spacing:-.03em}
div.owned{max-width:780px;margin:18px auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
div.owned p{flex-basis:100%;margin:2px 0 0}
.manual{border-top:1px dashed var(--line2);margin-top:20px;padding-top:16px}
.manual h4{margin:0 0 6px}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 14px}
.chk2{display:inline-flex;gap:7px;align-items:center;font-weight:500;font-size:.92rem}
.chk2 input{width:auto;margin:0}

/* ---------- 7d. Lesson ---------- */
.lesson-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:48px}
.lesson,.prose{min-width:0}
.lesson h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.toc{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start;display:flex;flex-direction:column;gap:2px;font-size:.86rem;border-left:1px solid var(--line);padding-left:16px;max-height:calc(100vh - var(--nav-h) - 48px);overflow:auto}
.toc b{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mu2);margin-bottom:8px}
.toc a{color:var(--mu);padding:4px 0;line-height:1.35}
.toc a:hover{color:var(--tx);text-decoration:none}
.prose{font-size:1.05rem;line-height:1.75;max-width:74ch}
.prose h2{border-top:1px solid var(--line);padding-top:1.1em;margin-top:2em}
.prose h3{margin-top:1.6em}
.prose a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--pri2) 40%,transparent)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--pri2)}
.prose img{max-width:100%;border-radius:var(--r)}
.prose table{font-size:.92rem;display:block;overflow-x:auto;border:1px solid var(--line)}
.prose pre{position:relative;background:#0b0f19;border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;overflow:auto;font-size:.87rem;line-height:1.6;color:#e6edf3;max-width:100%}
.prose code{font-family:var(--mono)}
.prose pre code,.prose pre code.hljs{background:transparent!important;border:0;padding:0;color:#e6edf3}
.prose :not(pre)>code{color:var(--tx)}
.copybtn{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#c9d1d9;font:600 .72rem var(--font);padding:4px 9px;border-radius:7px;cursor:pointer;opacity:0;transition:opacity .15s}
.prose pre:hover .copybtn,.copybtn:focus-visible{opacity:1}
.callout{border:1px solid var(--line);border-left:4px solid var(--pri);background:var(--card);border-radius:0 var(--r) var(--r) 0;padding:6px 20px;margin:22px 0}
.callout p{margin:.7em 0}
.callout.interview{border-left-color:var(--ok)}
.callout.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.callout.senior{border-left-color:#c084fc}
.callout.learn{border-left-color:var(--pri2);background:linear-gradient(135deg,var(--acc-soft),var(--pri-soft))}
.callout.learn ul{margin:.4em 0;padding-left:20px}
.callout.takeaway{border-left-color:var(--ok);background:var(--ok-soft)}
.callout.try{border-left-color:#f59e0b;background:rgba(245,158,11,.08)}
.callout.story{border-left-color:#c084fc;background:rgba(192,132,252,.08)}
.callout.learn p:first-child,.callout.takeaway p:first-child,.callout.try p:first-child,.callout.story p:first-child{margin-top:.8em}
.diagram{margin:26px 0;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;text-align:center}
.diagram pre.mermaid{background:transparent!important;border:0!important;padding:0!important;margin:0;color:var(--mu);font-size:.8rem;white-space:pre}
.diagram svg{max-width:100%;height:auto}
.diagram figcaption{color:var(--mu);font-size:.85rem;margin-top:8px}
.rprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:transparent}
.rprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pri2),var(--pri),#e879f9)}
.lesson.locked .prose{max-height:none}
.paywall{position:relative;margin-top:-140px}
.fade{height:160px;background:linear-gradient(transparent,var(--bg))}
.pw-box{background:radial-gradient(400px 160px at 50% 0%,var(--pri-soft),transparent 70%),var(--card);border:1px solid color-mix(in srgb,var(--pri) 55%,var(--line));border-radius:var(--r-xl);padding:32px;text-align:center;box-shadow:var(--sh),var(--sh-lg)}
.pw-box h3{font-size:1.3rem}
.contcard{margin-top:36px;background:var(--card);border:1px solid color-mix(in srgb,var(--pri) 45%,var(--line));border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh)}
.contcard h3{margin-top:0}
.contcard h4{margin:18px 0 6px;color:var(--mu)}
.contcard .row{border:1px solid var(--line);border-radius:12px;margin:8px 0}
.wm{margin:40px 0 10px;color:var(--mu);font-size:.75rem;opacity:.6}
.pn{display:flex;justify-content:space-between;gap:14px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line)}
.pn a{max-width:48%;font-weight:600}
.pcard{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:14px 0;min-height:170px}
.pcard .ans{border-top:1px dashed var(--line2);margin-top:12px;padding-top:12px}
.choices .btn{text-align:left;white-space:normal;justify-content:flex-start}

/* ---------- 7e. Auth ---------- */
.authwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:48px;align-items:center;max-width:980px}
.authside h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:.2em 0 .4em}
.authbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:32px;box-shadow:var(--sh),var(--sh-lg)}
.authbox h1{font-size:1.75rem;margin-top:0}
.authbox h2{margin-top:0}

/* ---------- 7f. Dashboard ---------- */
.dashhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.dashhead h1{margin:.1em 0 .1em}
.dashhead p{margin:0}
.dashstats{display:flex;gap:12px}
.stat{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 20px;min-width:130px;box-shadow:var(--sh)}
.stat b{font-size:1.7rem;letter-spacing:-.03em;line-height:1.15}
.stat span{color:var(--mu);font-size:.82rem}
.resume{background:radial-gradient(500px 200px at 0% 0%,var(--pri-soft),transparent 70%),var(--card);border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
.resume h3{font-size:1.3rem}
.subcard{display:flex;flex-direction:column;gap:4px}
.subcard .subhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.subcard .btn{align-self:flex-start;margin-top:8px}
.subcard.locked{background:var(--card2)}
.subcard.locked .ico{filter:grayscale(.6);opacity:.75}

/* ---------- 7g. Errors, footer ---------- */
.errpage{padding-top:90px;padding-bottom:90px}
.errcode{font-size:clamp(4rem,12vw,7rem);font-weight:850;letter-spacing:-.06em;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
footer{border-top:1px solid var(--line);margin-top:70px;background:var(--bg2)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.foot div{display:flex;flex-direction:column;gap:7px}
.foot a{color:var(--mu);font-size:.93rem}
.foot a:hover{color:var(--tx)}
.foot b{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mu2);margin-bottom:4px}
footer .wrap.muted{padding-top:0}

/* ---------- 7h. Locked lessons ---------- */
.lesson-grid.single{grid-template-columns:minmax(0,820px);justify-content:center}
.paywall.solo{margin-top:28px}
.paywall.solo .pw-box{padding:36px 32px}
.paywall.solo .cta{margin-top:6px}
.freelinks{display:flex;flex-direction:column;gap:8px;max-width:520px;margin:0 auto;text-align:left}
.freelinks a{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;color:var(--tx);font-size:.95rem;font-weight:550;transition:.15s}
.freelinks a:hover{border-color:var(--pri);transform:translateX(3px);text-decoration:none}

/* ---------- 7i. UPI payments ---------- */
.upipanel{margin-top:18px;border:1px solid color-mix(in srgb,var(--pri) 40%,var(--line));border-radius:var(--r-lg);background:var(--bg2);padding:20px;animation:fadein .2s ease}
.upipanel h4{margin:0 0 14px;font-size:1.1rem}
.upigrid{display:grid;grid-template-columns:minmax(0,200px) 1fr;gap:20px;align-items:start;margin-bottom:14px}
.upigrid .qr svg{width:100%;height:auto;background:#fff;border-radius:var(--r);padding:8px;display:block;box-shadow:var(--sh)}
.upisteps{padding-left:18px;margin:10px 0 0}
.upisteps li{margin:5px 0}
.upipanel form.inline input,.reqline form.inline input{flex:1;min-width:180px}
.reqline{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-left:4px solid var(--pri)}
.reqline.review{border-left-color:var(--warn)}
.reqline.rejected{border-left-color:var(--err)}
.reqline p{margin:.2em 0}
.reqline form{margin-top:6px}
.reqhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.reqamt{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
td.nowrap{white-space:nowrap}

/* ---------- 8. Responsive & motion ---------- */
/* Header: below 1280px the full row (links, search, theme, account buttons) no longer fits on one line, so it collapses into the ☰ menu. */
@media (max-width:1280px){
  .searchbtn .slabel{display:inline}
  .burger{display:block}
  .nav nav{display:none;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:12px 16px 18px;background:var(--bg2);border-bottom:1px solid var(--line);box-shadow:0 20px 40px -20px rgba(0,0,0,.5);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .nav nav.open{display:flex;animation:fadein .15s ease}
  .nav nav>a:not(.btn){padding:11px 12px;font-size:1rem}
  .nav nav .btn,.nav nav .ghost,.searchbtn{margin:6px 0 0;justify-content:center}
  .logoutbtn{padding:10px;font-size:.95rem}
  .themebtn{width:100%;height:auto;padding:10px;margin-top:6px}
  .themebtn::after{content:attr(data-label);font-size:.92rem;margin-left:8px}
  .themebtn{display:flex;justify-content:center;align-items:center}
}
@media (max-width:860px){
  .wrap{padding:40px 16px}
  .lesson-grid{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
  .sechead,.authwrap{grid-template-columns:1fr}
  .authside{display:none}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
  .panelcta{align-items:flex-start}
  .sectabs{position:static;width:auto}
  .hero-in{padding:64px 16px 44px}
  .stats div{min-width:0;flex:1 1 40%}
}
@media (max-width:560px){
  .upigrid{grid-template-columns:1fr}
  .upigrid .qr{max-width:220px;margin:0 auto}
}
@media (max-width:520px){
  .pick{flex-wrap:wrap}
  .pick .pr{flex-direction:row;gap:8px;align-items:baseline;margin-left:34px}
  .plan,.authbox,.pw-box{padding:22px}
  .price{font-size:2.6rem}
  .dashstats{width:100%}
  .stat{flex:1;min-width:0}
  .pn{flex-direction:column}
  .pn a{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .nav,footer,.toc,.rprog,.paywall,.copybtn{display:none!important}
  body{background:#fff;color:#000}
}