/* ===== Liquid Glass layer: animated AMOLED background, floating nav with sliding lens,
   segmented controls, glass sliders, glass toggles, pills. Transform/opacity animations only. ===== */

/* ---------- animated background (pre-soft radial blobs, no filter:blur → GPU-cheap) ---------- */
.bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg);pointer-events:none;contain:strict}
.bg-fx i{position:absolute;width:85vmax;height:85vmax;border-radius:50%;opacity:.55;will-change:transform}
.bg-fx i:nth-child(1){left:-35vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(142,45,226,.85),rgba(142,45,226,0));animation:blobA 34s ease-in-out infinite alternate}
.bg-fx i:nth-child(2){right:-40vmax;top:-10vmax;background:radial-gradient(closest-side,rgba(255,94,98,.7),rgba(255,94,98,0));animation:blobB 28s ease-in-out infinite alternate}
.bg-fx i:nth-child(3){left:-20vmax;bottom:-45vmax;background:radial-gradient(closest-side,rgba(255,200,55,.38),rgba(255,200,55,0));animation:blobC 40s ease-in-out infinite alternate}
.bg-fx i:nth-child(4){right:-30vmax;bottom:-35vmax;width:65vmax;height:65vmax;background:radial-gradient(closest-side,rgba(32,201,180,.32),rgba(32,201,180,0));animation:blobD 24s ease-in-out infinite alternate}
@keyframes blobA{to{transform:translate3d(28vmax,22vmax,0) scale(1.18) rotate(40deg)}}
@keyframes blobB{to{transform:translate3d(-26vmax,30vmax,0) scale(.85) rotate(-30deg)}}
@keyframes blobC{to{transform:translate3d(30vmax,-26vmax,0) scale(1.25)}}
@keyframes blobD{to{transform:translate3d(-24vmax,-30vmax,0) scale(1.1) rotate(25deg)}}
[data-theme="light"] .bg-fx i{opacity:.42}
[data-theme="light"] .bg-fx i:nth-child(3){opacity:.6}
html.bg-paused .bg-fx i{animation-play-state:paused}
html.reduce .bg-fx i{animation:none!important}

/* ---------- floating liquid-glass nav ---------- */
.nav{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(520px,calc(100% - 24px));
  display:flex;padding:6px;border-radius:999px;z-index:40;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 55%,rgba(255,255,255,.09)),rgba(22,12,40,.38);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(22px) saturate(190%);-webkit-backdrop-filter:blur(22px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.08),inset 0 0 18px rgba(255,255,255,.05),0 12px 32px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3)}
[data-theme="light"] .nav{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45) 60%,rgba(255,255,255,.7)),rgba(255,255,255,.35);border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(120,60,170,.08),0 14px 34px rgba(80,30,120,.2),0 2px 6px rgba(80,30,120,.12)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:rgba(28,16,48,.92)} [data-theme="light"] .nav{background:rgba(255,255,255,.94)}
  .card,.item,.opt{background:rgba(30,18,52,.88)} [data-theme="light"] .card,[data-theme="light"] .item,[data-theme="light"] .opt{background:rgba(255,255,255,.9)}
}
.nav a{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:58px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:.7em;font-weight:500;transition:color .3s}
.nav a .ic{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.nav a.on{color:var(--text)}
.nav a.on .ic{transform:scale(1.28) translateY(-1px);color:var(--accent)}
[data-theme="light"] .nav a.on .ic{color:#8E2DE2}
/* the lens: one element, moved with translateX; its inner blob stretches while travelling */
.lens{position:absolute;z-index:0;top:6px;left:6px;height:58px;width:calc((100% - 12px) / var(--n,5));transform:translateX(calc(var(--i,0) * 100%));
  transition:transform .55s cubic-bezier(.34,1.45,.55,1),opacity .3s;pointer-events:none}
.lens b{position:absolute;inset:0 4px;border-radius:999px;display:block;
  background:radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.55),rgba(255,255,255,.08) 45%,rgba(255,255,255,0) 60%),
             radial-gradient(90% 90% at 70% 110%,rgba(255,94,98,.45),rgba(142,45,226,.35) 60%,rgba(142,45,226,.15));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -6px 12px rgba(80,10,140,.35),inset 0 0 0 1px rgba(255,255,255,.06),0 6px 16px rgba(142,45,226,.35)}
[data-theme="light"] .lens b{background:radial-gradient(120% 90% at 30% 15%,#fff,rgba(255,255,255,.6) 50%,rgba(255,255,255,.35)),linear-gradient(135deg,rgba(255,94,98,.25),rgba(142,45,226,.25));border-color:#fff;box-shadow:inset 0 1px 1px #fff,inset 0 -5px 10px rgba(142,45,226,.18),0 6px 16px rgba(142,45,226,.25)}
.lens.go b{animation:drop .55s cubic-bezier(.3,.7,.4,1)}
@keyframes drop{0%{transform:scale(1,1)}30%{transform:scale(1.32,.84)}62%{transform:scale(.94,1.06)}100%{transform:scale(1,1)}}
.lens.off{opacity:0}
.hide-nav .nav{display:none}
html.reduce .lens{transition:none}

/* ---------- segmented control with sliding pill ---------- */
.seg{position:relative;display:flex;padding:4px;border-radius:999px;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(255,255,255,.04)),var(--glass);border:1px solid var(--border);box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
[data-theme="light"] .seg{background:rgba(120,60,170,.08);box-shadow:inset 0 2px 4px rgba(80,30,120,.12)}
.seg button{position:relative;z-index:1;flex:1;border:0;background:none;padding:10px 6px;border-radius:999px;cursor:pointer;font-weight:600;color:var(--muted);transition:color .3s}
.seg button.on{color:var(--text)}
[data-theme="light"] .seg button.on{color:#22102F}
.seg-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));transform:translateX(calc(var(--i) * 100%));border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.14));border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 10px rgba(0,0,0,.3),0 1px 0 rgba(0,0,0,.2);transition:transform .45s cubic-bezier(.34,1.4,.6,1)}
[data-theme="light"] .seg-pill{background:linear-gradient(180deg,#fff,#F7F1FC);border-color:#fff;box-shadow:0 4px 10px rgba(80,30,120,.18),0 1px 0 rgba(80,30,120,.12)}

/* ---------- glass slider ---------- */
.gslider{display:flex;flex-direction:column;gap:8px}
.gslider .row b{font-family:var(--hfont)}
input[type=range].glass{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:none;padding:0;border:0;--p:50%}
input[type=range].glass::-webkit-slider-runnable-track{height:12px;border-radius:99px;background:linear-gradient(90deg,var(--g1),var(--g2)) 0/var(--p) 100% no-repeat,var(--glass-2);box-shadow:inset 0 2px 4px rgba(0,0,0,.35),inset 0 0 0 1px var(--border)}
input[type=range].glass::-moz-range-track{height:12px;border-radius:99px;background:var(--glass-2);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
input[type=range].glass::-moz-range-progress{height:12px;border-radius:99px;background:linear-gradient(90deg,var(--g1),var(--g2))}
input[type=range].glass::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-9px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:radial-gradient(circle at 35% 28%,#fff 0,#fff 14%,rgba(255,255,255,.75) 30%,#E9DDF6 62%,#BFA6DA 100%);
  box-shadow:inset 0 -3px 6px rgba(90,40,140,.35),0 4px 10px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
input[type=range].glass:active::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range].glass::-moz-range-thumb{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:radial-gradient(circle at 35% 28%,#fff 0,#fff 14%,#E9DDF6 62%,#BFA6DA 100%);box-shadow:inset 0 -3px 6px rgba(90,40,140,.35),0 4px 10px rgba(0,0,0,.4)}
input[type=range].glass:focus-visible{outline:none}
input[type=range].glass:focus-visible::-webkit-slider-thumb{outline:3px solid var(--accent);outline-offset:2px}
.ticks{display:flex;justify-content:space-between;font-size:.75em;color:var(--faint);padding:0 4px}

/* ---------- glass toggle ---------- */
.switch{position:relative;width:64px;height:36px;border-radius:999px;cursor:pointer;flex:none;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(255,255,255,.05)),var(--glass-2);box-shadow:inset 0 2px 5px rgba(0,0,0,.35);transition:background .35s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#fff 0,#fff 18%,#F1E9FA 55%,#CDB9E4 100%);border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 -3px 5px rgba(90,40,140,.3),0 3px 8px rgba(0,0,0,.4);transition:transform .45s cubic-bezier(.34,1.5,.6,1)}
.switch.on{background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0) 55%),linear-gradient(135deg,var(--g1),var(--g2));border-color:rgba(255,255,255,.35)}
.switch.on::after{transform:translateX(28px)}
.switch:active::after{width:34px}
.switch.on:active::after{transform:translateX(22px)}

/* ---------- pills / chips ---------- */
.chip{border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-weight:600;transition:transform .2s,background .3s}
.chip:active{transform:scale(.94)}
.chip.on{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),linear-gradient(135deg,var(--btn-top),var(--btn-bot));color:#fff;border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(142,45,226,.35)}

/* ===================== polish layer (v2.0.0) ===================== */
#app{padding-left:var(--sp-2);padding-right:var(--sp-2)}
.bento,.stack{gap:var(--sp-15)}
.list{gap:var(--sp-1)}
.card{padding:var(--sp-2);border-radius:var(--r-lg)}
.item{padding:var(--sp-15) var(--sp-2);border-radius:var(--r-md);transition:transform var(--dur-1) var(--ease-out),background var(--dur-2)}
.item:active,.card.tap:active{transform:scale(.975)}
.topbar{padding:var(--sp-1) 0 var(--sp-2);min-height:60px}
.topbar h1{font-size:var(--fs-xl);letter-spacing:-.2px}
.sec-title{margin:var(--sp-3) var(--sp-05) var(--sp-15)}
.sec-title h3{font-size:var(--fs-md)}
.eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
.label{display:flex;align-items:center;gap:6px}
h3{font-size:var(--fs-md)}
.tiny{font-size:var(--fs-xs)} .small{font-size:var(--fs-sm)}
a{color:inherit}
.link{color:var(--accent);text-decoration:none;font-weight:600;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:2px}
[data-theme="light"] .link{color:#8E2DE2}
/* icon tiles (replace emoji) */
.item .em,.tile-ic,.itile{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),linear-gradient(135deg,var(--btn-top),var(--btn-bot));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 10px rgba(142,45,226,.3)}
.item .em svg,.tile-ic svg{width:22px;height:22px}
.tile-ic.sm{width:36px;height:36px;border-radius:11px} .tile-ic.sm svg{width:18px;height:18px}
.folder .em{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%),linear-gradient(135deg,#FFC837,#FF8A3D);color:#3A1A00;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 10px rgba(255,138,61,.3)}
.em.s-science,.tile-ic.s-science{background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 55%),linear-gradient(135deg,#2FD39A,#0E8F6B);color:#fff}
.em.s-maths,.tile-ic.s-maths{background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 55%),linear-gradient(135deg,#FFB547,#E07B00);color:#fff}
.em.s-reasoning,.tile-ic.s-reasoning{background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 55%),linear-gradient(135deg,#6EA8FF,#3B5BDB);color:#fff}
.em.s-gk,.tile-ic.s-gk{background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 55%),linear-gradient(135deg,#FF7AA8,#C2255C);color:#fff}
.hero-ic{width:72px;height:72px;border-radius:24px;margin:0 auto var(--sp-15);display:grid;place-items:center;background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.hero-ic svg{width:36px;height:36px}
.card:not(.hero) .hero-ic{background:linear-gradient(135deg,var(--btn-top),var(--btn-bot));color:#fff}
.empty{padding:var(--sp-5) var(--sp-3)}
.empty .em{width:72px;height:72px;margin:0 auto;border-radius:24px;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 55%),linear-gradient(135deg,var(--btn-top),var(--btn-bot));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 24px rgba(142,45,226,.35)}
.empty .em svg{width:34px;height:34px}
.empty h3{margin-top:var(--sp-2)} .empty p{max-width:30ch;margin:var(--sp-1) auto 0}
.big-em{width:96px;height:96px;margin:0 auto;border-radius:30px;display:grid!important;place-items:center;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 55%),linear-gradient(135deg,var(--btn-top),var(--btn-bot));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px rgba(142,45,226,.45)}
.big-em svg{width:48px;height:48px}
.tag svg,.chip svg,.label svg,.notice svg,.toast svg{width:16px;height:16px;vertical-align:-3px}
.btn svg{width:20px;height:20px}
.seg button svg{width:16px;height:16px;vertical-align:-3px;margin-right:2px}
.badge .em{width:48px;height:48px;margin:0 auto 6px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#FFC837,#FF5E62);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.badge .em svg{width:24px;height:24px}
.badge.lock .em{background:var(--glass-2);color:var(--faint)}
/* flame */
.flame{display:inline-grid;place-items:center;color:#FF8A3D;filter:drop-shadow(0 0 10px rgba(255,138,61,.55))}
.flame svg{width:30px;height:30px;fill:rgba(255,200,55,.35)}
.flame.off{color:var(--faint);filter:none}
.flame.off svg{fill:none}
/* stat strip (home / progress) */
.strip{display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;align-items:center;gap:var(--sp-15)}
.strip .div{width:1px;height:48px;background:var(--border)}
.strip .stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.strip .v{font-family:var(--hfont);font-weight:800;font-size:var(--fs-2xl);line-height:1}
.strip .k{font-size:var(--fs-xs);color:var(--muted)}
/* palette swatches */
.sw{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px;background:var(--glass-2);border:1px solid var(--border)}
.sw.ans{background:var(--ok)} .sw.rev{background:var(--accent)}
/* horizontal tool rail */
.rail{display:flex;gap:var(--sp-15);overflow-x:auto;scrollbar-width:none;padding:2px 2px var(--sp-1);margin:0 calc(var(--sp-2) * -1);padding-left:var(--sp-2);padding-right:var(--sp-2);scroll-snap-type:x proximity}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:0 0 76px;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);text-decoration:none;font-size:var(--fs-xs);text-align:center;color:var(--muted);scroll-snap-align:start}
.rail a .tile-ic{width:56px;height:56px;border-radius:18px}
.rail a:active .tile-ic{transform:scale(.92)}
.rail a .tile-ic{transition:transform var(--dur-1) var(--ease-out)}
/* mini section bars on mock card */
.mix{display:flex;height:6px;border-radius:99px;overflow:hidden;gap:2px;margin-top:var(--sp-15)}
.mix i{display:block;height:100%}
/* skeletons */
.sk{position:relative;overflow:hidden;background:var(--glass);border-radius:var(--r-md)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:shimmer 1.2s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.sk-line{height:14px;border-radius:7px;margin:8px 0}
/* offline pill */
.offline{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:var(--fs-sm);font-weight:600;background:rgba(30,16,52,.92);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:var(--elev-2);animation:toastIn .4s var(--ease-spring)}
.offline svg{width:16px;height:16px;color:var(--accent)}
/* splash */
#splash{position:fixed;inset:0;z-index:var(--z-splash);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);background:#05030C;transition:opacity .45s var(--ease-out),visibility .45s}
[data-theme="light"] #splash{background:#FBF6FF}
#splash img{width:96px;height:96px;border-radius:28px;box-shadow:0 18px 50px rgba(142,45,226,.5);animation:splashIn .7s var(--ease-spring)}
#splash .nm{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:28px;letter-spacing:-.3px;color:var(--text)}
#splash .tg{font-size:14px;color:var(--muted);margin-top:-12px}
#splash .ld{width:120px;height:4px;border-radius:4px;background:var(--glass-2);overflow:hidden}
#splash .ld i{display:block;height:100%;width:40%;border-radius:4px;background:linear-gradient(90deg,var(--g1),var(--g2));animation:ld 1s var(--ease-in-out) infinite}
@keyframes ld{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
@keyframes splashIn{from{transform:scale(.6);opacity:0}}
#splash.out{opacity:0;visibility:hidden}
/* brand mark in topbar */
.brand{display:flex;align-items:center;gap:var(--sp-1)}
.brand img{width:28px;height:28px;border-radius:9px}
.brand b{font-family:var(--hfont);font-weight:800;font-size:var(--fs-md)}
/* micro-interaction for every tappable */
.iconbtn,.chip,.opt,.btn,.tick,.switch,.seg button{-webkit-user-select:none;user-select:none}
@media (hover:hover){.item:hover,.card.tap:hover{background:var(--sheen),var(--glass-2)}}
.tag{display:inline-flex;align-items:center;gap:4px}
.tag.warn{background:rgba(255,200,55,.16);border-color:rgba(255,200,55,.55);color:var(--accent)}
.tag.pyq{background:rgba(142,45,226,.2);border-color:rgba(142,45,226,.45)}
.notice{display:block}
/* completion marks */
.mark{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.mark .mk-t{color:var(--muted)}
.mark.done .mk-t{color:var(--ok)}
.tickb{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 60%),#1FB57A;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 3px rgba(61,220,151,.18),0 4px 10px rgba(31,181,122,.4);animation:tickPop .5s var(--ease-spring) both}
.tickb path{stroke-dasharray:24;stroke-dashoffset:24;animation:tickDraw .45s .18s var(--ease-out) forwards}
@keyframes tickPop{from{transform:scale(0) rotate(-30deg)}}
@keyframes tickDraw{to{stroke-dashoffset:0}}
html.reduce .tickb path{stroke-dashoffset:0}
.mring{color:var(--text)}
.fcount{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;font-size:var(--fs-xs);font-weight:600;background:var(--glass-2);border:1px solid var(--border);color:var(--muted)}
.fcount.all{background:rgba(61,220,151,.16);border-color:rgba(61,220,151,.5);color:var(--ok)}
.item .grow+.mark{margin-left:4px}