/* ═══════════════════════════════════════════════════════════
   Lucy AI Technologies — Byju's / Brilliant / Duolingo style
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#f3f0ff;
  --bg2:#fff5eb;
  --card:#ffffff;
  --ink:#1a1a2e;
  --mut:#6b7280;
  --line:#e8e4f5;
  --brand:#6c3ce1;
  --brand2:#ff6b35;
  --brand3:#00c2a8;
  --duo:#58cc02;
  --ok:#16a34a;
  --bad:#dc2626;
  --gold:#f5b301;
  --shadow:0 10px 40px rgba(108,60,225,.14);
  --radius:20px;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0c0d1a;--bg2:#15122a;--card:#1a1d2e;--ink:#f4f2ff;--mut:#9aa3b8;
    --line:#2a2d45;--brand:#a78bfa;--brand2:#fb923c;--shadow:0 10px 40px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.55 "Segoe UI",system-ui,Roboto,sans-serif;
  background:linear-gradient(165deg,var(--bg),var(--bg2) 45%,var(--bg));
  background-attachment:fixed;
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
}

/* ─── Netflix-style splash ─── */
#lucySplash{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:#0a0a12;
  opacity:0;pointer-events:none;
  transition:opacity .6s ease;
}
#lucySplash.splash-on{opacity:1;pointer-events:all}
#lucySplash.splash-out{opacity:0;pointer-events:none}
.splash-inner{text-align:center;position:relative}
.splash-l{
  font-size:clamp(5rem,18vw,9rem);font-weight:900;
  color:#fff;letter-spacing:-.06em;
  font-family:Georgia,"Times New Roman",serif;
  transform:scale(.3);opacity:0;
  text-shadow:0 0 60px rgba(108,60,225,.8);
  transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .5s;
}
.splash-on .splash-l{transform:scale(1);opacity:1}
.splash-phase2 .splash-l{
  transform:scale(.35) translateY(-40px);opacity:.3;
}
.splash-word{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-40%) scale(.8);
  opacity:0;white-space:nowrap;
  font-size:clamp(1.8rem,6vw,3rem);font-weight:800;
  transition:opacity .5s ease .1s, transform .6s cubic-bezier(.16,1,.3,1) .1s;
}
.splash-phase2 .splash-word{opacity:1;transform:translate(-50%,-50%) scale(1)}
.splash-lucy{color:#fff}
.splash-ai{
  background:linear-gradient(135deg,#a78bfa,#ff6b35);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.splash-tag{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,40px);opacity:0;
  font-size:clamp(.75rem,2.5vw,1rem);font-weight:600;
  letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.7);
  transition:opacity .5s ease, transform .5s ease;
}
.splash-phase3 .splash-tag{opacity:1;transform:translate(-50%,55px)}
.splash-bar{
  position:absolute;left:50%;bottom:-48px;transform:translateX(-50%);
  width:120px;height:3px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;
}
.splash-bar-fill{
  height:100%;width:0;background:linear-gradient(90deg,#6c3ce1,#ff6b35);
  animation:splashLoad 2.2s ease forwards;
}
@keyframes splashLoad{to{width:100%}}

/* ─── Header ─── */
header{
  position:sticky;top:0;z-index:20;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:12px 20px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 16px rgba(108,60,225,.06);
  animation:slideDown .5s ease both;
}
@media(prefers-color-scheme:dark){header{background:rgba(26,29,46,.92)}}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.brand{
  font-weight:800;font-size:1.2rem;text-decoration:none;
  display:flex;align-items:center;gap:8px;color:var(--ink);
}
.brand .brand-mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.1rem;font-family:Georgia,serif;
  box-shadow:0 4px 12px rgba(108,60,225,.35);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-size:1.05rem;
}
.brand-text small{font-size:.65rem;font-weight:600;color:var(--mut);letter-spacing:.04em}
nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
nav a{
  padding:7px 12px;border-radius:99px;text-decoration:none;
  color:var(--ink);font-size:.84rem;font-weight:500;
  transition:all .22s cubic-bezier(.34,1.2,.64,1);
}
nav a:hover{background:rgba(108,60,225,.1);color:var(--brand);transform:translateY(-1px)}
nav a.on{background:var(--brand);color:#fff;box-shadow:0 4px 16px rgba(108,60,225,.35)}
.hdr-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.btn-ghost{
  background:transparent;border:1.5px solid var(--brand);color:var(--brand);
  border-radius:99px;padding:7px 16px;font:inherit;font-weight:600;cursor:pointer;
  text-decoration:none;font-size:.88rem;transition:all .22s;
}
.btn-ghost:hover{background:var(--brand);color:#fff;transform:translateY(-1px)}

main{max-width:1140px;margin:0 auto;padding:24px 16px 80px}
h1{margin:.2em 0 .15em;font-size:1.85rem;letter-spacing:-.02em}
h2{margin-top:1.6em;font-size:1.25rem}
.muted{color:var(--mut)}
.crumbs{font-size:.88rem;color:var(--mut);margin-bottom:10px}
.crumbs a{color:var(--brand);text-decoration:none}

/* ─── Hero (Duolingo energy + Brilliant clarity) ─── */
.hero-banner{
  position:relative;overflow:hidden;
  border-radius:28px;padding:40px 36px;
  background:linear-gradient(135deg,#6c3ce1 0%,#8b5cf6 40%,#ff6b35 100%);
  color:#fff;margin-bottom:28px;
  box-shadow:var(--shadow);
  animation:heroIn .7s cubic-bezier(.16,1,.3,1) both;
}
.hero-banner::after{
  content:"";position:absolute;right:-50px;top:-50px;
  width:240px;height:240px;border-radius:50%;
  background:rgba(255,255,255,.1);
  animation:float 6s ease-in-out infinite;
}
.hero-banner::before{
  content:"";position:absolute;left:8%;bottom:-40px;
  width:140px;height:140px;border-radius:50%;
  background:rgba(255,255,255,.07);
  animation:float 8s ease-in-out infinite reverse;
}
.hero-banner h1{color:#fff;font-size:2.1rem;margin:0 0 10px;position:relative;z-index:1}
.hero-banner p{opacity:.95;max-width:540px;position:relative;z-index:1;margin:0 0 20px;font-size:1.05rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.hero-cta .btn{background:#fff;color:var(--brand);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.hero-cta .btn:hover{transform:translateY(-3px) scale(1.02)}
.hero-cta .btn.alt{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);box-shadow:none}
.hero-cta .btn.orange{background:linear-gradient(135deg,#58cc02,#89e219);color:#fff;border:0;
  box-shadow:0 6px 0 #3d8c00;transform:translateY(0)}
.hero-cta .btn.orange:hover{transform:translateY(-2px);box-shadow:0 8px 0 #3d8c00}
.hero-cta .btn.orange:active{transform:translateY(2px);box-shadow:0 2px 0 #3d8c00}
.free-badge{
  display:inline-block;background:rgba(255,255,255,.22);
  padding:5px 14px;border-radius:99px;font-size:.8rem;font-weight:700;
  margin-bottom:12px;position:relative;z-index:1;
  animation:pulse 2.5s ease infinite;
}

/* ─── Cards (Brilliant-style lift) ─── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{
  background:var(--card);border:2px solid var(--line);
  border-radius:var(--radius);padding:20px 18px;
  text-decoration:none;color:inherit;display:block;
  transition:transform .3s cubic-bezier(.34,1.2,.64,1), box-shadow .3s, border-color .2s;
  position:relative;overflow:hidden;
  animation:cardIn .55s cubic-bezier(.16,1,.3,1) both;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--brand),var(--brand2),var(--duo));
  opacity:0;transition:opacity .25s;
}
a.card:hover,.card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:var(--shadow);
  border-color:rgba(108,60,225,.4);
}
a.card:hover::before,.card:hover::before{opacity:1}
.card .big{
  font-size:2.2rem;display:block;margin-bottom:8px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.08));
}
a.card:hover .big{transform:scale(1.15) rotate(-6deg)}
.card b{display:block;font-size:1.08rem;margin-bottom:4px}
.card .mod-tag{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--brand);margin-top:8px;
  opacity:.85;
}
.hero .card{padding:22px}
.grid .card:nth-child(1){animation-delay:.04s}
.grid .card:nth-child(2){animation-delay:.08s}
.grid .card:nth-child(3){animation-delay:.12s}
.grid .card:nth-child(4){animation-delay:.16s}
.grid .card:nth-child(5){animation-delay:.2s}
.grid .card:nth-child(6){animation-delay:.24s}
.grid .card:nth-child(7){animation-delay:.28s}
.grid .card:nth-child(8){animation-delay:.32s}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.chip{
  padding:7px 14px;border-radius:99px;border:2px solid var(--line);
  background:var(--card);cursor:pointer;font-size:.88rem;color:inherit;
  transition:all .2s cubic-bezier(.34,1.2,.64,1);font-weight:600;
}
.chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand);
  box-shadow:0 4px 14px rgba(108,60,225,.35)}

details{background:var(--card);border:2px solid var(--line);border-radius:16px;margin:8px 0;padding:2px 16px;
  transition:box-shadow .25s, border-color .2s}
details[open]{box-shadow:var(--shadow);border-color:rgba(108,60,225,.25)}
summary{cursor:pointer;padding:12px 0;font-weight:600}
.les{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;
  transition:color .15s, padding-left .25s cubic-bezier(.34,1.2,.64,1)}
.les:hover{color:var(--brand);padding-left:8px}
.les i{color:var(--mut);font-style:normal;min-width:1.6em}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin:14px 0}
.tab{padding:8px 14px;border:0;background:none;cursor:pointer;color:var(--mut);font:inherit;
  border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .2s}
.tab.on{color:var(--brand);border-color:var(--brand);font-weight:700}
.pane{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.tag{display:inline-block;font-size:.75rem;padding:2px 10px;border-radius:99px;
  background:linear-gradient(135deg,rgba(108,60,225,.12),rgba(255,107,53,.12));
  margin-right:4px;font-weight:600}
.opt{display:block;width:100%;text-align:left;margin:6px 0;padding:12px 14px;
  border:2px solid var(--line);border-radius:14px;background:var(--bg);color:inherit;
  font:inherit;cursor:pointer;transition:all .2s cubic-bezier(.34,1.2,.64,1);font-weight:500}
.opt:hover{border-color:var(--brand);background:rgba(108,60,225,.06);transform:translateX(4px)}
.opt.right{background:#16a34a22;border-color:var(--ok);animation:correctPop .4s ease}
.opt.wrong{background:#dc262622;border-color:var(--bad);animation:shake .4s ease}
@keyframes correctPop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.btn{
  background:linear-gradient(135deg,var(--brand),#8b5cf6);
  color:#fff;border:0;border-radius:14px;padding:12px 22px;
  font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;
  box-shadow:0 4px 0 #4c1d95;
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #4c1d95}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #4c1d95}
.btn.alt{background:var(--card);color:var(--ink);border:2px solid var(--line);box-shadow:none}
.btn.alt:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn.orange{background:linear-gradient(135deg,var(--brand2),#ff8a5c);box-shadow:0 4px 0 #c2410c}
.btn.orange:hover{box-shadow:0 6px 0 #c2410c}
.stats{display:flex;gap:18px;flex-wrap:wrap;font-weight:700;margin:8px 0}
.bar{height:12px;background:var(--line);border-radius:99px;overflow:hidden}
.bar>div{height:100%;background:linear-gradient(90deg,var(--duo),var(--brand3));transition:width .5s cubic-bezier(.16,1,.3,1);border-radius:99px}
.qbox{font-size:1.4rem;padding:22px;text-align:center;font-family:ui-monospace,Menlo,monospace;word-break:break-word}
input.ans{width:100%;font-size:1.2rem;padding:12px;border-radius:14px;border:2px solid var(--line);
  background:var(--card);color:inherit;transition:border-color .2s, box-shadow .2s}
input.ans:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(108,60,225,.15)}
.warn{background:linear-gradient(135deg,#f5b30118,#ff6b3512);border:2px solid var(--gold);
  border-radius:14px;padding:12px 16px;margin:12px 0;font-size:.9rem}
iframe.sim{width:100%;height:520px;border:1px solid var(--line);border-radius:16px;background:#fff}

.feature-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:22px 0 10px}
.feature{
  background:var(--card);border:2px solid var(--line);border-radius:16px;
  padding:16px 12px;text-align:center;font-size:.9rem;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), border-color .2s;
  animation:cardIn .5s ease both;
}
.feature:hover{transform:scale(1.06) translateY(-4px);border-color:var(--brand)}
.feature .ic{font-size:1.8rem;display:block;margin-bottom:6px;
  animation:bounceSoft 2.5s ease-in-out infinite}
.feature:nth-child(2) .ic{animation-delay:.2s}
.feature:nth-child(3) .ic{animation-delay:.4s}
.feature:nth-child(4) .ic{animation-delay:.6s}
@keyframes bounceSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.auth-bar{
  background:var(--card);border:2px dashed var(--line);border-radius:16px;
  padding:14px 18px;margin:18px 0;display:flex;gap:12px;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
}

/* Auth page */
.auth-page{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  min-height:calc(100vh - 120px);max-width:960px;margin:12px auto;
  border-radius:24px;overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line);animation:heroIn .5s ease both;
}
@media(max-width:800px){.auth-page{grid-template-columns:1fr}.auth-visual{display:none}}
.auth-visual{
  position:relative;background:linear-gradient(145deg,#6c3ce1,#9b5de5 50%,#ff6b35);
  color:#fff;padding:40px 32px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
.auth-blob{position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.12);top:-40px;right:-40px;animation:float 7s ease-in-out infinite}
.auth-blob.b2{width:120px;height:120px;top:auto;bottom:10%;left:-30px;right:auto;animation-duration:9s;animation-direction:reverse}
.auth-brand{font-weight:800;font-size:1.3rem;position:relative;z-index:1;margin-bottom:16px}
.auth-visual h2{margin:0 0 8px;font-size:1.6rem;position:relative;z-index:1}
.auth-visual p{opacity:.9;margin:0 0 20px;position:relative;z-index:1}
.auth-perks{list-style:none;padding:0;margin:0 0 24px;position:relative;z-index:1}
.auth-perks li{padding:8px 0;font-size:.95rem}
.auth-skip{position:relative;z-index:1;align-self:flex-start;background:rgba(255,255,255,.2)!important;color:#fff!important;border:1px solid rgba(255,255,255,.5)!important;box-shadow:none!important}
.auth-panel{background:var(--card);padding:36px 32px;display:flex;flex-direction:column}
.auth-tabs{display:flex;gap:0;margin-bottom:20px;border-radius:12px;background:var(--bg);padding:4px}
.auth-tab{flex:1;border:0;background:transparent;padding:10px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;color:var(--mut);transition:all .2s}
.auth-tab.on{background:var(--card);color:var(--brand);box-shadow:0 2px 8px rgba(108,60,225,.15)}
.auth-panel h1{margin:0 0 6px;font-size:1.45rem}
.auth-sub{margin:0 0 18px}
.auth-label{font-size:.82rem;font-weight:600;color:var(--mut);margin:10px 0 4px;display:block}
.auth-pass-wrap{position:relative}
.auth-pass-wrap .auth-input{padding-right:44px}
.auth-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;font-size:1rem;opacity:.7}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin:12px 0;flex-wrap:wrap;gap:8px}
.auth-check{font-size:.88rem;color:var(--mut);display:flex;align-items:center;gap:6px;cursor:pointer}
.auth-link{font-size:.88rem;color:var(--brand);text-decoration:none;font-weight:600}
.auth-submit{width:100%;margin-top:16px;padding:14px}
.auth-msg{min-height:1.2em;margin:10px 0 0;font-size:.9rem}
.auth-msg.err{color:var(--bad)}
.auth-msg.ok{color:var(--ok)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--mut);font-size:.85rem}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-free{width:100%;text-align:center}
.auth-foot{font-size:.78rem;text-align:center;margin-top:14px}

@keyframes heroIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}

@media(max-width:640px){
  .hero-banner{padding:28px 20px}
  .hero-banner h1{font-size:1.5rem}
  nav a{padding:5px 9px;font-size:.78rem}
}


/* ─── Sign up / log in polish + practice ─── */
.auth-input.bad{border-color:var(--bad)!important}
.auth-err{color:var(--bad);font-size:.82rem;min-height:1.1em;margin-top:3px}
.auth-note{background:rgba(108,60,225,.08);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:10px 12px;font-size:.9rem;margin:0 0 10px}
.auth-note.ok{background:#16a34a14;border-color:var(--ok)}
.auth-submit:disabled{opacity:.6;cursor:wait}
.auth-msg a{color:var(--brand);font-weight:600}
.who{font-weight:600;font-size:.88rem;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbtn{background:none;border:0;color:var(--brand);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.prac-wrap{max-width:640px;margin:0 auto}
.prac-intro{text-align:center;padding:28px 20px}
.prac-intro h1{margin:6px 0}
.prac-q{margin:14px 0;font-family:inherit}
.prac-fb{min-height:3.2em;margin:10px 0}
.prac-cta{margin-top:14px;padding:16px;border-radius:16px;background:rgba(108,60,225,.07)}
.prac-cta .hero-cta{justify-content:center}
.prac-cta .hero-cta .btn{background:var(--brand);color:#fff}
.prac-cta .hero-cta .btn.alt{background:var(--card);color:var(--ink);border:2px solid var(--line)}
.prac-intro .hero-cta{justify-content:center}
.opt:disabled{cursor:default;color:inherit}
@media(max-width:600px){
  .hdr-actions{gap:4px;flex-wrap:wrap}
  .hdr-actions label{font-size:.72rem!important;gap:3px!important;margin-right:2px!important}
  #lucyLanguageSelect{max-width:88px!important;min-width:0;padding:5px 3px;font-size:.75rem}
  .who{display:none}
}
[hidden]{display:none!important}

/* ═════════ Professional ed-tech skin (v2) ═════════ */
:root{--bg:#f6f7fb;--bg2:#f1eefc;--line:#e6e8f0;--brand:#5b3fd9;--brand-d:#4328b8;--ink:#161a2e;--shadow:0 1px 2px rgba(22,26,46,.05),0 8px 24px rgba(22,26,46,.07);--shadow-lg:0 2px 4px rgba(22,26,46,.06),0 18px 40px rgba(91,63,217,.16);--radius:16px;--ease:cubic-bezier(.22,1,.36,1)}
@media(prefers-color-scheme:dark){:root{--bg:#0d0f1c;--bg2:#14122a;--card:#171a2b;--line:#262a41;--brand:#9b86ff;--brand-d:#7c64f0;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);--shadow-lg:0 18px 44px rgba(0,0,0,.5)}}
body{font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.02em;line-height:1.2}
main#app{max-width:1120px;margin:0 auto;padding:22px 18px 60px}
.ico{display:inline-block;vertical-align:-.15em;flex:none}

/* header */
header{backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);background:rgba(255,255,255,.78);border-bottom:1px solid var(--line);box-shadow:none}
@media(prefers-color-scheme:dark){header{background:rgba(23,26,43,.78)}}
.brand-mark{border-radius:11px;background:linear-gradient(135deg,#6c4cf0,#a855f7 55%,#f472b6);box-shadow:0 4px 12px rgba(108,76,240,.35)}
.brand-mark.sm{display:inline-grid;place-items:center;width:30px;height:30px;color:#fff;font-weight:800;margin-right:8px;vertical-align:middle;font-family:Georgia,serif}
nav a{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:7px 12px;font-weight:600;font-size:.88rem;color:var(--mut);transition:background .2s,color .2s,transform .2s var(--ease)}
nav a .ni{display:inline-flex;font-size:1.05rem}
nav a:hover{background:rgba(91,63,217,.08);color:var(--brand);transform:translateY(-1px)}
nav a.on{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(91,63,217,.3)}
.btn-ghost{border-radius:99px;font-weight:600}
.who{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:rgba(91,63,217,.08);color:var(--brand)}

/* buttons */
.btn{border-radius:12px;font-weight:700;letter-spacing:0;background:linear-gradient(180deg,#6d4ff0,var(--brand));box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px rgba(91,63,217,.28);transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px rgba(91,63,217,.36);filter:brightness(1.05)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:0 2px 6px rgba(91,63,217,.3)}
.btn.alt{background:var(--card);box-shadow:none;border:1.5px solid var(--line)}
.btn.alt:hover{box-shadow:var(--shadow)}
.hero-cta .btn{box-shadow:0 8px 22px rgba(0,0,0,.18)}.hero-cta .btn:hover{transform:translateY(-2px)}

/* hero */
.hero-banner{border-radius:24px;background:radial-gradient(120% 140% at 0% 0%,#7c5cff 0%,#5b3fd9 45%,#3b2a9e 100%);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.hero-banner::before,.hero-banner::after{animation:float 9s ease-in-out infinite}
.free-badge{display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(6px);background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);font-weight:600}

/* cards + icon tiles */
.card{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(91,63,217,.35)}
.big.tile{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;font-size:1.55rem;color:#fff;margin-bottom:10px;background:linear-gradient(135deg,#7c5cff,#5b3fd9);box-shadow:0 6px 14px rgba(91,63,217,.28);transition:transform .35s var(--ease)}
a.card:hover .big.tile{transform:scale(1.1) rotate(-6deg)}
.grid>a.card:nth-child(6n+2) .tile{background:linear-gradient(135deg,#22c1a0,#0e9f88);box-shadow:0 6px 14px rgba(14,159,136,.28)}
.grid>a.card:nth-child(6n+3) .tile{background:linear-gradient(135deg,#ff8a4c,#f0581d);box-shadow:0 6px 14px rgba(240,88,29,.28)}
.grid>a.card:nth-child(6n+4) .tile{background:linear-gradient(135deg,#4aa3ff,#2563eb);box-shadow:0 6px 14px rgba(37,99,235,.28)}
.grid>a.card:nth-child(6n+5) .tile{background:linear-gradient(135deg,#f472b6,#db2777);box-shadow:0 6px 14px rgba(219,39,119,.28)}
.grid>a.card:nth-child(6n) .tile{background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 6px 14px rgba(217,119,6,.28)}
.prac-intro .big.tile{margin:0 auto 12px;width:60px;height:60px;font-size:1.9rem}
.auth-bar{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.feature{border-radius:var(--radius)}

/* practice */
.subj{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:.85rem;font-weight:700}
.subj.m{background:rgba(91,63,217,.1);color:var(--brand)}.subj.e{background:rgba(14,159,136,.12);color:#0e9f88}
.bar{height:10px}
.opt{border-radius:14px;border:1.5px solid var(--line);background:var(--card);font-weight:500;transition:transform .2s var(--ease),border-color .2s,background .2s,box-shadow .2s;animation:optIn .45s var(--ease) both}
.opt:nth-child(2){animation-delay:.05s}.opt:nth-child(3){animation-delay:.1s}.opt:nth-child(4){animation-delay:.15s}
.opt:not(:disabled):hover{box-shadow:var(--shadow);border-color:var(--brand);transform:translateX(4px)}
.opt b{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:10px;border-radius:8px;background:rgba(91,63,217,.1);color:var(--brand);font-size:.82rem}
.opt.right b{background:var(--ok);color:#fff}.opt.wrong b{background:var(--bad);color:#fff}
.prac-q{border-radius:18px;font-size:1.5rem;font-weight:700;animation:fadeUp .4s var(--ease) both}
.prac-fb{animation:fadeUp .3s var(--ease) both}
.ring{--p:0;position:relative;width:132px;height:132px;margin:0 auto 10px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--duo) calc(var(--p)*1%),var(--line) 0);animation:pop .6s var(--ease) both}
.ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--card)}
.ring span,.ring small{position:relative}.ring span{font-size:2.3rem;font-weight:800;line-height:1}.ring small{color:var(--mut);font-weight:600}

/* auth */
.auth-page{border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.auth-input{border-radius:12px;border:1.5px solid var(--line);transition:border-color .2s,box-shadow .2s}
.auth-input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(91,63,217,.15)}
.auth-tabs{border-radius:14px}.auth-perks li{display:flex;align-items:center;gap:10px}.auth-perks .ico{font-size:1.2rem}

/* motion */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes optIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
#app>*{animation:fadeUp .5s var(--ease) both}
.grid>.card{animation:fadeUp .5s var(--ease) both}
.grid>.card:nth-child(2){animation-delay:.04s}.grid>.card:nth-child(3){animation-delay:.08s}.grid>.card:nth-child(4){animation-delay:.12s}.grid>.card:nth-child(5){animation-delay:.16s}.grid>.card:nth-child(6){animation-delay:.2s}.grid>.card:nth-child(n+7){animation-delay:.24s}
:focus-visible{outline:3px solid rgba(91,63,217,.45);outline-offset:2px;border-radius:8px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:900px){nav a{padding:6px 10px;font-size:.84rem}}
.feature{text-align:center;padding:18px 14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.feature .ic.tile{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 8px;border-radius:13px;font-size:1.4rem;color:#fff;background:linear-gradient(135deg,#7c5cff,#5b3fd9)}
.feature:nth-child(2) .ic.tile{background:linear-gradient(135deg,#ff8a4c,#f0581d)}.feature:nth-child(3) .ic.tile{background:linear-gradient(135deg,#22c1a0,#0e9f88)}.feature:nth-child(4) .ic.tile{background:linear-gradient(135deg,#4aa3ff,#2563eb)}
.hero-cta .btn.orange{background:linear-gradient(180deg,#34d399,#10b981);color:#fff;border:0;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.hero-cta .btn.orange:hover{box-shadow:0 12px 26px rgba(0,0,0,.22);transform:translateY(-2px)}
.hero-cta .btn{display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
header{gap:12px}nav{flex:1;min-width:0;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;gap:2px}nav::-webkit-scrollbar{display:none}nav a{white-space:nowrap}

/* ═════════ Lesson / module pages (v2) ═════════ */
h1{font-size:1.9rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
h1 .h-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;font-size:1.5rem;color:#fff;background:linear-gradient(135deg,#7c5cff,#5b3fd9);box-shadow:0 6px 14px rgba(91,63,217,.28);animation:pop .5s var(--ease) both}
h2{font-size:1.2rem;margin:26px 0 10px}
.crumbs{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;font-size:.85rem;margin-bottom:14px}
.crumbs a{font-weight:600;padding:2px 8px;border-radius:8px;transition:background .2s}.crumbs a:hover{background:rgba(91,63,217,.1)}
.tag{background:rgba(91,63,217,.1);color:var(--brand);font-weight:600;border:0}
.chip{border-radius:99px;font-weight:600;border:1.5px solid var(--line);background:var(--card)}
.chip.on{box-shadow:0 4px 12px rgba(91,63,217,.3)}

.tabs{position:sticky;top:70px;z-index:5;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px;padding:5px;margin:16px 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0!important;border-radius:10px;white-space:nowrap;padding:9px 16px;font-weight:600;transition:background .2s,color .2s,transform .2s var(--ease)}
.tab:hover{background:rgba(91,63,217,.08);color:var(--brand)}
.tab.on{background:var(--brand);color:#fff!important;box-shadow:0 4px 10px rgba(91,63,217,.3)}
.pane{padding:22px 24px;border-radius:18px;box-shadow:var(--shadow);animation:fadeUp .35s var(--ease) both}
.pane h3{display:flex;align-items:center;gap:10px;font-size:1.05rem;margin:24px 0 10px}
.pane h3:first-child{margin-top:0}
.pane h3::before{content:"";width:4px;height:1.1em;border-radius:4px;background:linear-gradient(180deg,#7c5cff,#22c1a0)}
.pane ul{padding-left:1.25em}.pane li{margin:6px 0}.pane li::marker{color:var(--brand)}
dl{margin:0;display:grid;gap:4px}
dt{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--brand);margin-top:10px}
dd{margin:0;padding:10px 14px;background:rgba(91,63,217,.05);border-left:3px solid rgba(91,63,217,.35);border-radius:0 10px 10px 0}
dd ul{margin:0;padding-left:1.1em}

details{border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);transition:box-shadow .25s,border-color .25s}
details summary{font-weight:700;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg);transition:transform .25s var(--ease);margin-right:4px}
details[open]>summary::before{transform:rotate(45deg)}
.les{align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin:7px 0;background:var(--card);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.les:hover{padding-left:14px;transform:translateX(4px);border-color:rgba(91,63,217,.4);box-shadow:var(--shadow)}
.les i{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:9px;background:rgba(91,63,217,.1);color:var(--brand);font-weight:700;font-size:.8rem}
details>.les:first-of-type{border-top:1px solid var(--line)}
.warn{border-radius:14px;border:1px solid var(--gold);font-weight:500}
iframe.sim{border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow)}
textarea.ans,input.ans{border-radius:12px;border:1.5px solid var(--line);font-family:inherit}
.stats{padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.qbox{border-radius:18px}

/* Google button + auth */
.g-wrap{display:flex;justify-content:center;min-height:44px}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 16px;border-radius:99px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;transition:box-shadow .2s,transform .2s var(--ease),border-color .2s}
.g-btn:hover{box-shadow:var(--shadow);transform:translateY(-1px);border-color:rgba(91,63,217,.4)}
.auth-free{display:block;text-align:center;margin-top:14px}
@media(max-width:600px){h1{font-size:1.5rem}.pane{padding:16px}.tabs{top:64px}}

/* Interactive geography maps & diagrams */
.diagram{margin:12px 0;text-align:center}
.diagram svg{max-width:100%;height:auto}
.imap-wrap{margin:8px 0}
.imap-wrap svg path:hover,.imap-wrap svg circle:hover{filter:brightness(1.08)}
.imap-info{padding:12px 14px}
.imap-info .tag{margin-left:6px}

/* Bite-sized UX micro-animations (Duolingo/Brilliant-like, CSS only) */
@keyframes lucy-pop{0%{transform:scale(.92);opacity:0}70%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
@keyframes lucy-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes lucy-pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.35)}50%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}
@keyframes lucy-slide-up{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.card{animation:lucy-slide-up .35s ease both}
.card:nth-child(2){animation-delay:.04s}
.card:nth-child(3){animation-delay:.08s}
.card:nth-child(4){animation-delay:.12s}
.btn:active{transform:scale(.97)}
.quiz-ok{animation:lucy-pop .4s ease}
.quiz-bad{animation:lucy-shake .35s ease}
.hero-banner{animation:lucy-slide-up .45s ease}
.free-badge{animation:lucy-pulse 2.2s ease infinite}
.grid .card:hover{transform:translateY(-2px);transition:transform .15s ease}


/* ---- Oak curriculum browser (reference-style) ---- */
.oak-layout{display:grid;grid-template-columns:220px 1fr;gap:20px;margin-top:12px;align-items:start}
@media(max-width:800px){.oak-layout{grid-template-columns:1fr}}
.oak-side{position:sticky;top:12px}
.oak-side-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mu,#667094);margin:14px 0 8px}
.oak-years .chip{font-weight:700}
.oak-threads{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:auto}
.oak-th{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--line,#e3e6f0);font-size:.88rem;cursor:pointer;background:var(--card,#fff)}
.oak-th.on{background:#111;color:#fff;border-color:#111}
.oak-th input{accent-color:#6c5ce7}
.oak-year-block{background:var(--oak-tint,#e0e7ff);border-radius:20px;padding:16px;margin-bottom:18px}
.oak-year-title{margin:0 0 12px;font-size:1.05rem}
.oak-ucards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.oak-ucard{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:14px;padding:14px;text-decoration:none;color:inherit;border:1px solid rgba(0,0,0,.06);box-shadow:0 4px 14px rgba(40,50,110,.06);min-height:110px;transition:transform .12s ease,box-shadow .12s ease}
.oak-ucard:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(40,50,110,.12)}
.oak-ucard.oak-hl{outline:2px solid #6c5ce7;outline-offset:2px}
.oak-unum{font-weight:800;color:#6c5ce7;font-size:.9rem}
.oak-utitle{font-weight:700;line-height:1.35;flex:1}
.oak-umeta{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--mu,#667094)}
.oak-save{border:0;background:transparent;cursor:pointer;font-size:1rem;padding:2px 4px}
.oak-save.on{color:#e69500}


/* ---- Mobile / app shell ---- */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
#top{ flex-wrap:wrap; gap:8px; }
#nav{
  display:flex; flex-wrap:nowrap; gap:4px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  max-width:100%; scrollbar-width:none;
  padding-bottom:4px;
}
#nav::-webkit-scrollbar{ display:none; }
#nav a{
  flex:0 0 auto; white-space:nowrap;
  min-height:36px; display:inline-flex; align-items:center;
}
.grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.btn, .chip, .opt, .les{
  min-height:40px; touch-action:manipulation;
}
.card{ -webkit-tap-highlight-color:transparent; }
input.ans, textarea.ans, input, textarea, select{
  font-size:16px; /* prevent iOS zoom */
  max-width:100%;
}
iframe{ max-width:100%; }
.oak-ucards{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
@media(max-width:640px){
  #top{ padding:10px 12px; }
  .brand-text small{ display:none; }
  .hero-banner{ border-radius:16px; }
  .grid.hero, .grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .card .big{ font-size:1.4rem; }
  .crumbs{ font-size:.8rem; flex-wrap:wrap; }
  .oak-side{ position:static; }
  .oak-year-block{ padding:12px; }
  p[style*="justify-content:space-between"]{
    flex-direction:column;
  }
  p[style*="justify-content:space-between"] .btn{
    width:100%; text-align:center;
  }
}
@media(max-width:400px){
  .grid.hero, .grid{ grid-template-columns:1fr; }
}
@supports(padding:max(0px)){
  body{
    padding-left:max(0px, env(safe-area-inset-left));
    padding-right:max(0px, env(safe-area-inset-right));
    padding-bottom:max(0px, env(safe-area-inset-bottom));
  }
}


/* ---- Onboarding + home polish ---- */
.onboard{position:fixed;inset:0;background:rgba(10,12,30,.72);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.onboard-card{background:var(--card,#fff);color:var(--tx,#1b2140);border-radius:20px;padding:28px 24px;max-width:420px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.25);text-align:center}
.onboard-step h2{margin:0 0 10px}
.onboard-step .card{cursor:pointer;padding:14px;font-weight:700;border:1px solid var(--line,#e3e6f0);border-radius:14px;background:var(--bg,#f6f7fb)}
.onboard-step .card:hover{border-color:var(--ac,#6c5ce7)}
.more-paths{margin:20px 0;border:1px solid var(--line,#e3e6f0);border-radius:14px;padding:10px 14px;background:var(--card,#fff)}
.more-paths summary{cursor:pointer;font-weight:700;padding:6px 0}
.home-card{transition:transform .12s ease,box-shadow .12s ease}
.home-card:hover{transform:translateY(-2px)}


/* ---- Progress + a11y + empty states ---- */
.progress-strip{
  display:flex;flex-wrap:wrap;gap:8px 12px;margin:10px 0 4px;
  font-size:.88rem;font-weight:700;opacity:.95
}
.progress-strip span{
  background:rgba(255,255,255,.18);padding:4px 10px;border-radius:99px
}
.empty-state{text-align:center;padding:28px 18px;margin:16px 0}
.empty-state h2{margin:0 0 8px}
:focus-visible{
  outline:3px solid #6c5ce7;outline-offset:2px
}
button:focus-visible, a.btn:focus-visible, a.card:focus-visible, .chip:focus-visible, .tab:focus-visible, .opt:focus-visible{
  outline:3px solid #6c5ce7;outline-offset:2px
}
.tab[aria-selected="true"], .tab.on{box-shadow:0 0 0 2px rgba(108,92,231,.35)}
@media(prefers-reduced-motion:reduce){
  .home-card,.onboard-card{transition:none}
}


/* ═══════════════════════════════════════════════════════════
   UI polish v2 — motion, depth, store-ready feel
   ═══════════════════════════════════════════════════════════ */

@keyframes lucy-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lucy-scale-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes lucy-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes lucy-pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108,60,225,.35); }
  50% { box-shadow: 0 0 0 10px rgba(108,60,225,0); }
}

#app {
  animation: lucy-fade-up .45s ease both;
}

.hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 32px 28px;
  background:
    radial-gradient(1200px 400px at 10% -20%, rgba(108,60,225,.35), transparent 55%),
    radial-gradient(800px 300px at 100% 0%, rgba(255,107,53,.22), transparent 50%),
    linear-gradient(135deg, #1a1035 0%, #2d1b69 50%, #1a1035 100%);
  color: #fff;
  box-shadow: 0 20px 50px rgba(45,27,105,.25);
  animation: lucy-scale-in .5s cubic-bezier(.16,1,.3,1) both;
}
.hero-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: lucy-shimmer 6s linear infinite;
  pointer-events: none;
}
.hero-banner h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 8px 0 10px;
  position: relative; z-index: 1;
}
.hero-banner p, .hero-cta, .free-badge, .progress-strip {
  position: relative; z-index: 1;
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
}
.hero-cta .btn {
  animation: lucy-fade-up .5s ease both;
}
.hero-cta .btn:nth-child(2) { animation-delay: .06s; }
.hero-cta .btn:nth-child(3) { animation-delay: .12s; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), #8b5cf6);
  box-shadow: 0 8px 20px rgba(108,60,225,.3);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(108,60,225,.4);
  filter: brightness(1.05);
}
.btn:active { transform: translateY(0) scale(.98); }
.btn.alt {
  background: rgba(255,255,255,.14);
  color: inherit;
  box-shadow: none;
  border: 1px solid rgba(255,255,255,.25);
}
.hero-banner .btn.alt { color: #fff; }
body .btn.alt {
  background: var(--card);
  color: var(--brand);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.btn.orange {
  background: linear-gradient(135deg, var(--brand2), #ff8f66);
  box-shadow: 0 8px 20px rgba(255,107,53,.28);
}

.card, a.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 16px 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 24px rgba(40,30,90,.06);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, border-color .2s ease;
  animation: lucy-fade-up .4s ease both;
}
.grid .card:nth-child(1) { animation-delay: .02s; }
.grid .card:nth-child(2) { animation-delay: .05s; }
.grid .card:nth-child(3) { animation-delay: .08s; }
.grid .card:nth-child(4) { animation-delay: .11s; }
.grid .card:nth-child(5) { animation-delay: .14s; }
.grid .card:nth-child(6) { animation-delay: .17s; }
.card:hover, a.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(108,60,225,.14);
  border-color: rgba(108,60,225,.35);
}
.card .big, .card .tile {
  display: inline-flex;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(108,60,225,.12), rgba(255,107,53,.1));
  margin-bottom: 10px;
  font-size: 1.4rem;
}
.card b {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.grid, .grid.hero {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.chip, button.chip {
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--card);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.chip.on, button.chip.on {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(108,60,225,.25);
}
.chip:hover { transform: translateY(-1px); }

.tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px;
  background: rgba(108,60,225,.06);
  border-radius: 14px;
  margin: 12px 0;
}
.tab {
  border: 0; background: transparent;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  color: var(--mut);
  transition: background .15s ease, color .15s ease;
}
.tab.on, .tab[aria-selected="true"] {
  background: var(--card);
  color: var(--brand);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.les {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.les:hover {
  background: rgba(108,60,225,.06);
  border-color: var(--line);
  transform: translateX(4px);
}
.les i {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(108,60,225,.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 800; font-size: .8rem;
  color: var(--brand);
}

#top {
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.75);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
@media(prefers-color-scheme:dark){
  #top { background: rgba(12,13,26,.8); }
}

.onboard {
  animation: lucy-fade-up .3s ease both;
}
.onboard-card {
  animation: lucy-scale-in .35s cubic-bezier(.16,1,.3,1) both;
}

.progress-strip span {
  backdrop-filter: blur(8px);
  transition: transform .15s ease;
}
.progress-strip span:hover { transform: scale(1.04); }

/* Oak cards already styled — enhance motion */
.oak-ucard {
  transition: transform .2s ease, box-shadow .2s ease;
}
.oak-ucard:hover {
  transform: translateY(-3px);
}

.opt {
  border-radius: 12px !important;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.opt:hover { transform: scale(1.01); }

/* Success pulse on primary actions */
.btn:focus-visible {
  animation: lucy-pulse-soft 1.2s ease 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-banner::after { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   Glassmorphism layer
   ═══════════════════════════════════════════════════════════ */
:root{
  --glass-bg: rgba(255,255,255,.55);
  --glass-bg-strong: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.45);
  --glass-shadow: 0 8px 32px rgba(40,30,90,.12);
  --glass-blur: 16px;
}
@media(prefers-color-scheme:dark){
  :root{
    --glass-bg: rgba(26,29,46,.55);
    --glass-bg-strong: rgba(26,29,46,.78);
    --glass-border: rgba(255,255,255,.1);
    --glass-shadow: 0 8px 32px rgba(0,0,0,.4);
  }
}

.glass,
#top,
.onboard-card,
.card,
a.card,
.tabs,
.more-paths,
.oak-side,
.oak-year-block,
.empty-state.card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}

/* Stronger glass panels */
.hero-banner {
  background:
    radial-gradient(1200px 400px at 10% -20%, rgba(108,60,225,.4), transparent 55%),
    radial-gradient(800px 300px at 100% 0%, rgba(255,107,53,.25), transparent 50%),
    linear-gradient(135deg, rgba(26,16,53,.85) 0%, rgba(45,27,105,.75) 50%, rgba(26,16,53,.85) 100%) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.18) !important;
}

#top {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.card:hover, a.card:hover {
  background: var(--glass-bg-strong) !important;
  border-color: rgba(108,60,225,.4) !important;
}

.chip, button.chip {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border) !important;
}
.chip.on, button.chip.on {
  background: linear-gradient(135deg, rgba(108,60,225,.9), rgba(139,92,246,.9)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.tab.on, .tab[aria-selected="true"] {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(12px);
}

.btn.alt {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border) !important;
}
.hero-banner .btn.alt {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
}

.progress-strip span {
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
}

.onboard {
  background: rgba(10,12,30,.45) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.onboard-card {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Soft frosted body backdrop hint */
body {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(108,60,225,.18), transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 10%, rgba(255,107,53,.12), transparent 45%),
    linear-gradient(165deg, var(--bg), var(--bg2) 45%, var(--bg)) !important;
  background-attachment: fixed !important;
}

@media (prefers-reduced-transparency: reduce) {
  .glass, #top, .card, a.card, .tabs, .onboard-card, .hero-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   LUCY DESIGN SYSTEM v3 — product-matched (EdTech)
   Users: students, parents, exam aspirants
   Goals: calm focus, clear hierarchy, trust, mobile-first
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#f5f3fb;
  --bg2:#eef6ff;
  --card:#ffffff;
  --ink:#16162a;
  --mut:#5c6478;
  --line:#e6e2f4;
  --brand:#5b35d5;
  --brand-soft:#7c5cff;
  --brand2:#ff6b35;
  --brand3:#0d9488;
  --ok:#15803d;
  --bad:#dc2626;
  --gold:#eab308;
  --radius:16px;
  --radius-lg:22px;
  --shadow:0 4px 20px rgba(60,40,120,.08);
  --shadow-lg:0 12px 40px rgba(60,40,120,.12);
  --glass-bg:rgba(255,255,255,.78);
  --glass-border:rgba(255,255,255,.65);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", sans-serif;
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#0b0c14;
    --bg2:#12141f;
    --card:#171a27;
    --ink:#f0eefc;
    --mut:#9aa3b8;
    --line:#2a2e42;
    --brand:#8b6cff;
    --brand-soft:#a78bfa;
    --shadow:0 4px 24px rgba(0,0,0,.35);
    --shadow-lg:0 12px 40px rgba(0,0,0,.45);
    --glass-bg:rgba(23,26,39,.82);
    --glass-border:rgba(255,255,255,.08);
  }
}

html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:
    radial-gradient(900px 420px at 0% -5%, rgba(91,53,213,.12), transparent 55%),
    radial-gradient(700px 380px at 100% 0%, rgba(255,107,53,.08), transparent 50%),
    linear-gradient(180deg, var(--bg), var(--bg2) 40%, var(--bg));
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ── Layout shell ── */
#wrap, .wrap, main{
  max-width:1100px;
  margin:0 auto;
  padding:12px 16px 48px;
}
#top{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  position:sticky;
  top:0;
  z-index:100;
  background:var(--glass-bg);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.4);
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:inherit; flex-shrink:0;
}
.brand-mark{
  width:36px; height:36px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; color:#fff; font-size:1.05rem;
  background:linear-gradient(135deg, var(--brand), var(--brand-soft));
  box-shadow:0 4px 14px rgba(91,53,213,.35);
}
.brand-text strong{ display:block; font-size:.95rem; letter-spacing:-.02em; }
.brand-text small{ color:var(--mut); font-size:.68rem; letter-spacing:.04em; }

#nav{
  display:flex; flex-wrap:nowrap; gap:4px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; margin-left:auto;
}
#nav::-webkit-scrollbar{ display:none; }
#nav a{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  color:var(--mut);
  font-weight:700;
  font-size:.82rem;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
#nav a:hover{ background:rgba(91,53,213,.08); color:var(--brand); }
#nav a.active, #nav a[aria-current="page"]{
  background:rgba(91,53,213,.12);
  color:var(--brand);
}

/* ── Hero: product promise, not startup fluff ── */
.hero-banner{
  border-radius:var(--radius-lg);
  padding:28px 24px;
  margin:8px 0 20px;
  color:#fff;
  background:
    linear-gradient(135deg, #3b1d9e 0%, #5b35d5 48%, #2a1870 100%);
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.12);
  position:relative;
  overflow:hidden;
}
.hero-banner::before{
  content:"";
  position:absolute; right:-40px; top:-40px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,107,53,.2);
  filter:blur(2px);
}
.hero-banner h1{
  margin:6px 0 8px;
  font-size:clamp(1.45rem, 3.5vw, 1.95rem);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.2;
  position:relative;
}
.hero-banner p{ position:relative; opacity:.92; max-width:36em; }
.free-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:700;
  padding:5px 10px; border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  position:relative;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; position:relative; }
.progress-strip{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:12px 0 4px; position:relative;
}
.progress-strip span{
  font-size:.8rem; font-weight:700;
  padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
}

/* ── Buttons: one clear primary ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px;
  padding:10px 18px;
  border:0; border-radius:999px;
  font-weight:800; font-size:.92rem;
  text-decoration:none; cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg, var(--brand), #6d4aff);
  box-shadow:0 6px 18px rgba(91,53,213,.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn:active{ transform:scale(.98); }
.btn.alt{
  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:none;
}
body .btn.alt:not(.hero-banner .btn){
  background:var(--card);
  color:var(--brand);
  border:1px solid var(--line);
}
.hero-banner .btn.alt{ color:#fff; }
.btn.orange{
  background:linear-gradient(135deg, var(--brand2), #ff8a5c);
  box-shadow:0 6px 18px rgba(255,107,53,.28);
}

/* ── Course cards: scannable paths ── */
.grid, .grid.hero{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
  gap:12px;
}
.card, a.card{
  display:block;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 14px 12px;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover, a.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(91,53,213,.35);
}
.card .big, .card .tile{
  width:44px; height:44px;
  border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, rgba(91,53,213,.12), rgba(255,107,53,.08));
  margin-bottom:8px;
  font-size:1.25rem;
}
.card b{
  display:block;
  font-size:.98rem;
  font-weight:800;
  letter-spacing:-.015em;
  margin-bottom:2px;
}
.card .muted, .muted{
  color:var(--mut);
  font-size:.84rem;
}
.mod-tag{ display:none; } /* less clutter */

h2{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.02em;
  margin:22px 0 10px;
  color:var(--ink);
}

/* ── Learning chrome ── */
.tabs{
  display:flex; flex-wrap:wrap; gap:4px;
  padding:5px;
  background:rgba(91,53,213,.06);
  border-radius:12px;
  margin:12px 0;
  border:1px solid var(--line);
}
.tab{
  border:0; background:transparent;
  padding:9px 14px;
  border-radius:9px;
  font-weight:700;
  font-size:.88rem;
  color:var(--mut);
  cursor:pointer;
}
.tab.on, .tab[aria-selected="true"]{
  background:var(--card);
  color:var(--brand);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.chip, button.chip{
  border-radius:999px;
  padding:8px 12px;
  border:1px solid var(--line);
  background:var(--card);
  font-weight:700;
  font-size:.82rem;
  cursor:pointer;
  color:var(--ink);
}
.chip.on, button.chip.on{
  background:var(--brand);
  color:#fff;
  border-color:transparent;
}
.les{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  border:1px solid transparent;
  transition:background .15s ease, transform .15s ease;
}
.les:hover{
  background:rgba(91,53,213,.06);
  transform:translateX(3px);
}
.les i{
  width:28px; height:28px; border-radius:8px;
  background:rgba(91,53,213,.1);
  color:var(--brand);
  display:inline-flex; align-items:center; justify-content:center;
  font-style:normal; font-weight:800; font-size:.78rem;
}

/* ── Forms / quiz ── */
input, textarea, select{
  font:inherit;
  font-size:16px;
  border-radius:12px;
  border:1px solid var(--line);
  padding:12px 14px;
  background:var(--card);
  color:var(--ink);
  width:100%;
  max-width:100%;
}
input:focus, textarea:focus, select:focus{
  outline:2px solid rgba(91,53,213,.35);
  border-color:var(--brand);
}
.opt{
  border-radius:12px !important;
  border:1px solid var(--line) !important;
  padding:12px 14px !important;
  background:var(--card) !important;
  transition:border-color .15s ease, background .15s ease;
}
.opt:hover{ border-color:rgba(91,53,213,.4) !important; }

/* ── Onboarding ── */
.onboard{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(12,14,28,.5);
  backdrop-filter:blur(6px);
}
.onboard-card{
  width:100%; max-width:400px;
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px 20px;
  box-shadow:var(--shadow-lg);
  text-align:center;
}
.onboard-step h2{ margin-top:0; }

/* ── Oak / filters ── */
.oak-layout{ gap:16px; }
.oak-ucard{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--glass-bg);
  transition:transform .18s ease, box-shadow .18s ease;
}
.oak-ucard:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

.more-paths{
  margin:18px 0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 14px;
  background:var(--glass-bg);
}
.more-paths summary{
  cursor:pointer;
  font-weight:800;
  padding:8px 0;
  color:var(--mut);
}

/* ── Focus a11y ── */
:focus-visible{
  outline:3px solid rgba(91,53,213,.55);
  outline-offset:2px;
}

@media(max-width:640px){
  .grid, .grid.hero{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .hero-banner{ padding:22px 18px; border-radius:18px; }
  .brand-text small{ display:none; }
}
@media(max-width:400px){
  .grid, .grid.hero{ grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){
  .card, .btn, .les, .oak-ucard{ transition:none !important; }
}

/* ── P1 Navigation ── */
.skip-link{
  position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:10000;
}
.skip-link:focus{left:8px;top:8px}
#top{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 12px;padding-top:max(8px, env(safe-area-inset-top));
}
.nav-burger{
  display:none;min-width:44px;min-height:44px;border:0;background:transparent;
  font-size:1.35rem;cursor:pointer;border-radius:10px;
}
.nav-primary{display:flex;flex-wrap:wrap;align-items:center;gap:4px;flex:1}
.nav-link,.nav-drop-btn{
  display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:8px 12px;
  border-radius:10px;border:0;background:transparent;color:inherit;text-decoration:none;
  font:inherit;cursor:pointer;white-space:nowrap;
}
.nav-link.on,.nav-drop-btn.on,.nav-link[aria-current="page"]{
  background:rgba(108,92,231,.12);color:var(--brand,#6c5ce7);font-weight:700;
}
.nav-link.locked{opacity:.85}
.nav-hint{font-size:.72rem;color:var(--mut);margin-left:4px}
.nav-drop{position:relative}
.nav-drop-panel{
  position:absolute;top:100%;left:0;min-width:11rem;z-index:50;
  background:var(--card,#fff);border:1px solid var(--line,#e6e6ef);
  border-radius:12px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.nav-drop-panel .nav-link{display:flex;width:100%}
.acct-menu{position:relative}
.acct-panel{
  position:absolute;right:0;top:100%;min-width:10rem;z-index:50;
  background:var(--card,#fff);border:1px solid var(--line,#e6e6ef);
  border-radius:12px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.acct-panel a,.acct-panel button{
  display:block;width:100%;text-align:left;padding:10px 12px;min-height:44px;
  border:0;background:transparent;font:inherit;cursor:pointer;text-decoration:none;color:inherit;
}
.nav-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:80;
}
.nav-drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(88vw,20rem);z-index:90;
  background:var(--card,#fff);box-shadow:4px 0 24px rgba(0,0,0,.12);
  display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);
}
.nav-drawer-head{
  display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line,#e6e6ef);
}
.nav-drawer-body{overflow:auto;padding:10px;flex:1}
.nav-drawer-group{margin-bottom:12px}
.nav-drawer-label{font-size:.75rem;font-weight:700;color:var(--mut);padding:6px 10px;text-transform:uppercase}
.nav-drawer-sub{padding-left:10px}
.nav-drawer .nav-link{display:flex;width:100%}
.bottom-nav{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--card,#fff);border-top:1px solid var(--line,#e6e6ef);
  padding-bottom:env(safe-area-inset-bottom);justify-content:space-around;
}
.bottom-tab{
  flex:1;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-size:.68rem;text-decoration:none;color:inherit;border:0;background:transparent;cursor:pointer;
}
.bottom-tab.on{color:var(--brand,#6c5ce7);font-weight:700}
.bottom-tab.locked{opacity:.7}
body.nav-open{overflow:hidden}
@media(max-width:860px){
  .nav-burger{display:inline-flex;align-items:center;justify-content:center}
  .nav-primary{display:none}
  .bottom-nav{display:flex}
  main#app{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}