/* UI polish layer: loaded last. Visual refinement and motion only, no layout or markup changes. */
:root{
  --r-lg:20px; --ease:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --shadow-sm:0 1px 2px rgba(20,33,61,.05),0 2px 6px rgba(20,33,61,.05);
  --shadow:0 1px 2px rgba(20,33,61,.05),0 6px 16px rgba(20,33,61,.06),0 18px 40px -18px rgba(20,33,61,.18);
  --shadow-lift:0 2px 4px rgba(20,33,61,.06),0 12px 28px -6px rgba(20,33,61,.18);
  --glow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);
  --glass:rgba(255,255,255,.86);
  --mesh-a:rgba(11,122,114,.07); --mesh-b:rgba(255,182,39,.07); --mesh-c:rgba(99,102,241,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -10px rgba(0,0,0,.5);
    --shadow-lift:0 14px 34px -8px rgba(0,0,0,.6); --glass:rgba(20,29,51,.86);
    --mesh-a:rgba(60,207,194,.08); --mesh-b:rgba(255,182,39,.05); --mesh-c:rgba(129,140,248,.07);
  }
}
:root[data-theme="dark"]{
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -10px rgba(0,0,0,.5);
  --shadow-lift:0 14px 34px -8px rgba(0,0,0,.6); --glass:rgba(20,29,51,.86);
  --mesh-a:rgba(60,207,194,.08); --mesh-b:rgba(255,182,39,.05); --mesh-c:rgba(129,140,248,.07);
}

/* soft mesh backdrop */
body{background:
  radial-gradient(900px 520px at 8% -8%,var(--mesh-a),transparent 60%),
  radial-gradient(760px 480px at 100% 12%,var(--mesh-b),transparent 60%),
  radial-gradient(900px 600px at 50% 110%,var(--mesh-c),transparent 60%),
  var(--bg);background-attachment:fixed;-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in srgb,var(--brand) 28%,transparent)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 40%,transparent) transparent}

/* header: frosted glass that firms up on scroll */
.top{background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent);transition:box-shadow .3s var(--ease),background .3s}
body.sb-scrolled .top{box-shadow:0 6px 24px -12px rgba(20,33,61,.25)}
.brand .logo-face{transition:transform .5s var(--ease-pop)}
.brand:hover .logo-face{transform:rotate(-8deg) scale(1.08)}
.brand em{background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#22d3ee));-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
button{transition:transform .18s var(--ease),border-color .18s,background-color .18s,box-shadow .18s,color .18s}
button:hover:not(:disabled){box-shadow:var(--shadow-sm)}
button:active:not(:disabled){transform:scale(.97)}
.tab.active,.primary{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 70%,var(--hero-a)));box-shadow:0 4px 14px -4px color-mix(in srgb,var(--brand) 60%,transparent)}
.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease);pointer-events:none}
.primary:hover:not(:disabled)::after{transform:translateX(120%)}
.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px -6px color-mix(in srgb,var(--brand) 65%,transparent)}
.subnav button{transition:background-color .2s,color .2s,border-color .2s,transform .18s var(--ease)}
.subnav button:hover:not(.active){background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.subnav button.active{box-shadow:0 4px 12px -4px color-mix(in srgb,var(--brand) 55%,transparent)}

/* hero: slow gradient drift, soft light orbs, floating mascot */
.hero{background:linear-gradient(120deg,var(--hero-a),var(--hero-b),color-mix(in srgb,var(--hero-b) 70%,#1d4ed8),var(--hero-a));background-size:300% 300%;animation:sbDrift 18s ease-in-out infinite;box-shadow:0 20px 50px -24px rgba(11,40,60,.55);isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(48px);z-index:0;pointer-events:none}
.hero::before{width:320px;height:320px;left:-80px;top:-120px;background:rgba(255,182,39,.28);animation:sbOrb 14s ease-in-out infinite}
.hero::after{width:360px;height:360px;right:18%;bottom:-200px;background:rgba(60,207,194,.35);animation:sbOrb 17s ease-in-out infinite reverse}
.hero .mascot-img{position:relative;z-index:1;animation:sbFloat 6s ease-in-out infinite;transition:transform .4s var(--ease)}
.hero-text>*{animation:sbRise .7s var(--ease) both}
.hero-text>*:nth-child(2){animation-delay:.08s}
.hero-text>*:nth-child(3){animation-delay:.16s}
.hero .eyebrow{display:inline-block;padding:4px 12px;border-radius:999px;background:rgba(255,182,39,.14);border:1px solid rgba(255,182,39,.35);letter-spacing:.1em}
.hero h1{letter-spacing:-.015em}

/* panels */
.side,.card{border-radius:var(--r-lg);border-color:color-mix(in srgb,var(--line) 80%,transparent);box-shadow:var(--shadow)}
.seg button{transition:background-color .25s var(--ease),color .25s,box-shadow .25s}
.seg button:hover:not(.on){color:var(--text)}
input[type=search],dialog input,.welcome input{transition:border-color .2s,box-shadow .2s}
input[type=search]:focus,dialog input:focus,.welcome input:focus{outline:none;border-color:var(--brand);box-shadow:var(--glow)}

/* subject tiles */
.tile{transition:transform .25s var(--ease),box-shadow .25s,border-color .2s,background-color .2s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--sc) 50%,var(--line))}
.tile .ico{transition:transform .35s var(--ease-pop)}
.tile:hover .ico{transform:scale(1.1) rotate(-6deg)}
.tile.on{position:relative;box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 22%,transparent),var(--shadow-sm)}
.tile.on::after{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--sc);box-shadow:0 0 0 4px color-mix(in srgb,var(--sc) 20%,transparent);animation:sbPop .4s var(--ease-pop)}

/* chapter list */
.chapters li{position:relative;transition:background-color .2s,transform .2s var(--ease)}
.chapters li:hover{transform:translateX(3px)}
.chapters li::before{content:"";position:absolute;left:-2px;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--sc,var(--brand));transform:scaleY(0);transition:transform .25s var(--ease)}
.chapters li:hover::before{transform:scaleY(.5)}
.chapters li.active::before{transform:scaleY(1)}
.num{transition:background-color .2s,color .2s,transform .3s var(--ease-pop)}
.chapters li:hover .num{transform:scale(1.08)}

/* chapter banner */
.banner{border-radius:var(--r-lg);box-shadow:0 14px 34px -18px rgba(6,12,28,.6);animation:sbBanner 1.1s var(--ease) both}
.banner .ico{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22)}

/* concepts, maps, revision */
button.concept{transition:transform .25s var(--ease),box-shadow .25s,border-color .2s}
button.concept:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--sc,var(--brand)) 55%,var(--line))}
.concept .more{transition:letter-spacing .25s var(--ease)}
button.concept:hover .more{letter-spacing:.03em}
.omap>li{transition:transform .25s var(--ease),box-shadow .25s}
.omap>li:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.revise li::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%,transparent)}
.ctbl tbody tr{transition:background-color .15s}
.ctbl tbody tr:hover td{background:color-mix(in srgb,var(--brand) 7%,var(--card))}

/* quiz feedback */
.opt{transition:transform .2s var(--ease),border-color .2s,background-color .2s,box-shadow .2s}
.opt:hover:not(:disabled){transform:translateX(4px);border-color:color-mix(in srgb,var(--brand) 55%,var(--line))}
.opt i{transition:background-color .2s,color .2s}
.opt:hover:not(:disabled) i{background:var(--brand-soft);color:var(--brand)}
.opt.right,.bd-opt.right,.hx-opt.right,.hx-chip.right{animation:sbRight .5s var(--ease-pop)}
.opt.right{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.opt.right i{background:var(--ok);color:#fff}
.opt.wrong,.bd-opt.wrong,.hx-opt.wrong,.hx-chip.wrong{animation:sbShake .45s var(--ease)}
.opt.wrong i{background:var(--bad);color:#fff}
.bar{background:color-mix(in srgb,var(--line) 80%,transparent)}
.bar i{position:relative;overflow:hidden;transition:width .6s var(--ease)}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:sbSheen 2.4s ease-in-out infinite}
.score{background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 50%,var(--gold)));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;animation:sbPop .6s var(--ease-pop)}

/* dialogs and welcome */
dialog{border-radius:var(--r-lg)}
dialog[open]{animation:sbDlg .35s var(--ease)}
dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.welcome{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.w-card{animation:sbDlg .5s var(--ease)}
.w-mascot{animation:sbFloat 6s ease-in-out infinite}
.w-mascot.w-seq{animation:wIn .5s ease forwards,sbFloat 6s ease-in-out .6s infinite}

/* Ask StudyRaah button */
.sbq-fab{transition:transform .25s var(--ease),box-shadow .25s,filter .2s}
.sbq-fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px color-mix(in srgb,var(--brand) 70%,transparent)}
.sbq-fab::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent);animation:sbRing 3.2s ease-out 2s 3;pointer-events:none}
.sbq-panel:not([hidden]){animation:sbDlg .3s var(--ease)}

/* motion helpers driven by ui-motion.js */
.sb-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--brand),var(--gold));pointer-events:none;transition:opacity .3s}
.sb-progress[hidden]{display:block;opacity:0}
.sb-confetti{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.sb-confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:.95;animation:sbFall var(--t,1.8s) cubic-bezier(.25,.6,.45,1) var(--d,0s) forwards}

@keyframes sbDrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes sbOrb{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,24px)}}
@keyframes sbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sbRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sbPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes sbBanner{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sbRight{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes sbShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes sbSheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes sbDlg{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sbRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
@keyframes sbFall{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(var(--x,0),105vh,0) rotate(var(--r,540deg));opacity:.9}}

@media (max-width:700px){
  .hero::before{width:220px;height:220px}
  .hero::after{width:240px;height:240px;right:-60px}
  .tile:hover,.chapters li:hover,.opt:hover:not(:disabled){transform:none}
}
@media (hover:none){
  .tile:hover,button.concept:hover,.omap>li:hover,.chapters li:hover,.opt:hover:not(:disabled),.primary:hover:not(:disabled){transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sb-confetti,.sb-progress{display:none!important}
}