/* ═══════════════════════════════════════════════════════════
   Oryon v5.3 — Premium Dark UI
   Breakpoints: phone < 580px | tablet 580–1024px | desktop > 1024px
═══════════════════════════════════════════════════════════ */

:root {
  --bg: #08080e;
  --bg2: #0d0d16;
  --bg3: #13131f;
  --bg4: #1a1a28;
  --bg5: #232335;
  --border: rgba(255,255,255,0.04);
  /* --border1 was referenced 81 times and never defined, so every rule
     using it rendered with NO border at all. Sits between --border and
     --border2, which is what the call sites assume. */
  --border1: rgba(255,255,255,0.055);
  --border2: rgba(255,255,255,0.07);
  --border3: rgba(255,255,255,0.12);
  /* --surface was referenced 21 times and never defined. background:
     var(--surface) with no value falls back to transparent, which is why
     the Ask a Question sheet showed the page through itself and its text
     was unreadable. One step above --bg3 so a panel floating over a card
     still reads as floating. */
  --surface: #16161f;
  /* --card was referenced by .legal-card and the panel at line ~1682 and
     never defined, so both rendered with NO background - the Terms and
     Privacy modal showed the page through itself. Matches --surface: a
     card floating over --bg should read as raised, and stays distinct from
     --bg3, which .legal-close uses for its own inset background. */
  --card: #16161f;
  --text: #ededf6;
  --text2: #8c8ca8;
  --text3: #555570;
  --text4: #363650;
  --accent: #7c6ff7;
  --accent2: #a89eff;
  --accent-glow: rgba(124,111,247,0.35);
  --accent-bg: rgba(124,111,247,0.08);
  --accent-border: rgba(124,111,247,0.18);
  --green: #34d97a;
  --green-bg: rgba(52,217,122,0.06);
  --green-border: rgba(52,217,122,0.18);
  --amber: #f5b841;
  --amber-bg: rgba(245,184,65,0.06);
  --amber-border: rgba(245,184,65,0.18);
  --pink: #f06bba;
  --pink-bg: rgba(240,107,186,0.06);
  --pink-border: rgba(240,107,186,0.18);
  --teal: #2fcfbe;
  --teal-bg: rgba(47,207,190,0.06);
  --teal-border: rgba(47,207,190,0.18);
  --red: #f47272;
  --red-bg: rgba(244,114,114,0.06);
  --red-border: rgba(244,114,114,0.18);
  --r: 14px;
  --r2: 18px;
  /* One source of truth for the page gutter. The subject carousel bleeds to the
     screen edge by negating it, so a literal here and a literal there would
     drift apart the first time either changed. */
  --page-pad: 30px;
  --font: 'Sora', system-ui, -apple-system, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;

  /* MOTION. 114 transitions used bare `ease` - the CSS default, and the reason
     an interface reads as "fine" rather than alive. `ease` is symmetric: slow
     to start AND slow to finish, so nothing ever feels like it responded to
     you. Durations here were already right (.15s-.2s); only the curve was
     wrong.
     --ease ALREADY EXISTED below with a considered value, so it is left alone;
     redefining it here would have been shadowed by that later declaration
     anyway - a change that looks meaningful and does nothing. What changed is
     that 45 transitions still using the bare CSS default now use the token
     like everything else.

     --ease-pop is the addition that matters: it overshoots past its target and
     settles back. That is the Duolingo bounce, and it belongs on anything
     APPEARING - a card, a sheet, a badge, a number that just went up. */
  --ease-pop:  cubic-bezier(.34, 1.45, .64, 1);
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --shadow: 0 8px 32px rgba(0,0,0,0.55);
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overscroll-behavior-y:none; }  /* no pull-to-refresh reload (esp. while drawing in Notebook) */

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: none;   /* a swipe-down must never reload the PWA */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* ── Global responsive safety net: content ADAPTS, never overflows the
      viewport, at any device size. Low-risk (only kicks in on overflow). ── */
img { max-width:100%; height:auto; }
svg, video, canvas, iframe, table { max-width:100%; }
pre { max-width:100%; overflow-x:auto; }            /* code scrolls, not squashes */
/* Long unbreakable strings (filenames, URLs, no-space titles) wrap instead of
   forcing an element wider than the screen. Does NOT override white-space:nowrap. */
h1,h2,h3,h4,h5,h6,p,span,a,li,dd,dt,td,th,label,strong,em,b,figcaption,blockquote {
  overflow-wrap:break-word;
}
/* Flex/grid children can shrink below their content's intrinsic width. */
.card, .src-card, .modal, .modal-card { min-width:0; }

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  outline: none;
  transition: all .2s var(--ease);
}

input, textarea, select {
  font-family: var(--font);
  outline: none;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

::selection { background: rgba(124,111,247,.28); color:#fff; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg5); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:var(--text4); }


/* ══════════════════════════════════════════════════════
   PULL TO REFRESH
══════════════════════════════════════════════════════ */

#pull-refresh {
  position:fixed; top:-60px; left:50%; transform:translateX(-50%);
  z-index:10000;
  display:flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:24px;
  background:var(--bg3); border:1px solid var(--border2);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  font-size:11px; font-weight:600; color:var(--text3);
  opacity:0; transition:transform .2s var(--ease), opacity .15s var(--ease);
  pointer-events:none;
}
#pull-refresh.ptr-ready { color:var(--accent2); }
#pull-refresh.ptr-ready .ptr-spinner {
  border-top-color:var(--accent);
  animation:none; transform:rotate(180deg);
}
#pull-refresh.ptr-loading .ptr-spinner {
  animation:ptrSpin .6s linear infinite;
  border-top-color:var(--accent);
}
.ptr-spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--border2);
  border-top-color:var(--text3);
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
@keyframes ptrSpin {
  to { transform:rotate(360deg); }
}


/* ══════════════════════════════════════════════════════
   LOADING
══════════════════════════════════════════════════════ */

/* ── Loading screen: deep space ─────────────────────────────────────────────
   Oryon's mark is a four-pointed star, so the loading screen is the sky it
   belongs to. Space TRAVEL, not space decoration: the streaks move outward
   past the viewer, the orbits are tilted ellipses rather than flat circles,
   and the starfield drifts on two depths so it has parallax. Excellence here
   means restraint - deep-space photography, not a cartoon rocket.

   THE TIMING IS THE DESIGN. On a fast connection this screen lives a few
   hundred milliseconds, so the arrival completes by ~560ms and is the only
   thing most users ever see. Every slow, expensive layer (warp, comet,
   parallax drift, rotating messages) begins after ~1.2s and therefore exists
   only for the slow SA mobile connections the boot code already worries about.
──────────────────────────────────────────────────────────────────────────── */
#loading {
  position:fixed; inset:0; z-index:9999;
  background:
    radial-gradient(80% 55% at 50% 32%, rgba(124,111,247,.16) 0%, rgba(124,111,247,0) 62%),
    radial-gradient(70% 50% at 18% 78%, rgba(64,140,220,.055) 0%, rgba(64,140,220,0) 60%),
    radial-gradient(90% 65% at 84% 14%, rgba(150,90,220,.10) 0%, rgba(150,90,220,0) 58%),
    linear-gradient(180deg, #07060f 0%, #05040b 55%, #030209 100%);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:22px;
  overflow:hidden;
  /* #loading clips, so on a short viewport (a landscape phone, a small
     embedded pane) the status line would be cut off rather than scrolled.
     Tighten the stack instead of letting it disappear. */
}
@media (max-height: 560px) {
  #loading { gap:14px; }
  .optima-star-wrap, .optima-star-loading { width:56px; height:56px; }
  .optima-wordmark-loading { font-size:22px; margin-top:12px; }
}

/* ── Nebula: slow coloured clouds. Blurred and very low contrast, so it reads
      as depth rather than as shapes. ── */
.ld-space { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.ld-neb {
  position:absolute; border-radius:50%; filter:blur(46px); opacity:0;
  animation:nebIn 1.4s ease-out .35s forwards, nebDrift 26s ease-in-out 1.6s infinite;
}
.ld-neb.n1 { width:48vmax; height:34vmax; left:-8vmax;  top:-6vmax;
             background:radial-gradient(circle, rgba(124,111,247,.30), rgba(124,111,247,0) 68%); }
/* Cool blue, not teal. Teal at this size reads as a green haze rather than
   distance, and a green sky is not deep space. */
.ld-neb.n2 { width:40vmax; height:40vmax; right:-10vmax; bottom:-12vmax;
             background:radial-gradient(circle, rgba(72,132,224,.13), rgba(72,132,224,0) 66%);
             animation-delay:.5s, 2.4s; }
.ld-neb.n3 { width:34vmax; height:26vmax; left:38%; top:56%;
             background:radial-gradient(circle, rgba(178,110,240,.16), rgba(178,110,240,0) 70%);
             animation-delay:.65s, 3.1s; }
@keyframes nebIn { to { opacity:1; } }
@keyframes nebDrift {
  0%,100% { transform:translate3d(0,0,0) scale(1); }
  50%     { transform:translate3d(2.5vmax,-2vmax,0) scale(1.10); }
}

/* ── Two real constellations, drawn faint ──────────────────────────────────
   ORION, because it is most of the name, and VELA, because it is only visible
   from the southern hemisphere - you can see it from Cape Town and not from
   London. Actual star positions, not decoration shaped like stars.

   Deliberately BARELY THERE: something a learner notices on their third load,
   not their first. Placed clear of the masked centre so they never compete with
   the wordmark, and arriving late with everything else only a slow connection
   ever sees.
──────────────────────────────────────────────────────────────────────────── */
.ld-cons { position:absolute; pointer-events:none; z-index:0; opacity:0;
           animation:consIn 2.4s ease-out 1.5s forwards; }
.ld-cons .cons-lines line { stroke:rgba(190,180,255,.30); stroke-width:.6; }
.ld-cons .cons-stars circle { fill:rgba(214,208,255,.85); }
@keyframes consIn { to { opacity:.42; } }
.ld-cons.c-orion { left:6%;  top:12%; }
.ld-cons.c-vela  { right:7%; bottom:14%; }
@media (max-width: 620px) {
  /* On a phone there is not enough sky either side of the wordmark for two.
     Orion stays: it is the one carrying the name. */
  .ld-cons.c-vela { display:none; }
  .ld-cons.c-orion { left:auto; right:4%; top:8%; width:104px; height:104px; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-cons { animation:none !important; opacity:.34 !important; }
}
/* They must leave with the sky, not hang there during the jump. */
#loading.ld-out .ld-cons { animation:barOut .3s ease-in forwards; }

/* ── Starfield on two depths ───────────────────────────────────────────────
   Twinkling only works when the stars DISAGREE. Sharing one duration makes a
   field pulse in sympathy, which reads as a breathing gradient rather than a
   sky, so each star carries its own --tw (how fast) and --lo (how dark it
   goes). The scale wobble is tiny and matters more than it looks: a real star
   scintillates in brightness AND apparent size.
──────────────────────────────────────────────────────────────────────────── */
.ld-dot {
  position:absolute; left:var(--x); top:var(--y);
  width:var(--s,2px); height:var(--s,2px); border-radius:50%;
  background:#fff;
  animation:dotIn .8s ease-out calc(.25s + var(--d,0s) * .2) backwards,
            dotTwinkle var(--tw,3.4s) ease-in-out calc(1.1s + var(--d,0s)) infinite;
}
.ld-dot.far  { background:rgba(206,199,255,.8); }
.ld-dot.near { box-shadow:0 0 7px 1.5px rgba(190,180,255,.7); }
@keyframes dotIn { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }
@keyframes dotTwinkle {
  0%,100% { opacity:var(--lo,.22); transform:scale(.82); }
  50%     { opacity:1;             transform:scale(1.12); }
}

/* Parallax: the two depths drift at different rates, which is what sells
   distance. Late, slow, and transform-only so it stays cheap. */
/* The stars were landing on top of "Almost there..." and the wordmark, which
   is a legibility bug, not a look. A soft elliptical hole is punched out of the
   star layers around the content - sized in px because the content is sized in
   px, so it holds at 375px and at desktop without a breakpoint. The nebula and
   the shooting stars are NOT masked; they are diffuse enough to sit behind
   text, and masking them would leave an obvious dead patch. */
.ld-layer {
  position:absolute; inset:0;
  -webkit-mask-image:radial-gradient(ellipse 210px 150px at 50% 46%,
                     transparent 0%, transparent 38%, #000 100%);
          mask-image:radial-gradient(ellipse 210px 150px at 50% 46%,
                     transparent 0%, transparent 38%, #000 100%);
}
.ld-layer.l-far  { animation:driftFar  46s linear 1.2s infinite; }
.ld-layer.l-near { animation:driftNear 30s linear 1.2s infinite; }
@keyframes driftFar  { to { transform:translate3d(-2.5vw, 1.6vh, 0); } }
@keyframes driftNear { to { transform:translate3d(-6vw, 3.6vh, 0); } }

/* ── Warp lines: the zoom itself ───────────────────────────────────────────
   Nothing here animates until #loading gets .ld-out. While the app is loading
   you are not moving, so there is nothing to streak.

   EVERY line differs: angle, length, width, start radius, exit distance,
   brightness and delay all come from the markup. Uniform lines radiating from
   one radius is a spark - a starburst, drawn once. A jump is lines at every
   depth passing you at different speeds, and the only way to get that is to
   stop them agreeing about anything.
──────────────────────────────────────────────────────────────────────────── */
.ld-warp {
  /* 46%, matching the point the stars radiate from and the point the mask is
     centred on. It was 34%, so the lines converged a full 12% of the viewport
     above where the stars did - two vanishing points in one frame, which is
     what made the warp look messy however smooth each part was. */
  position:absolute; left:50%; top:46%; width:0; height:0;
  pointer-events:none; z-index:1;
}
.ld-streak {
  position:absolute; left:0; top:0;
  width:var(--w,2px); height:var(--len,90px); margin-left:calc(var(--w,2px) / -2);
  border-radius:2px;
  background:linear-gradient(to bottom,
    rgba(190,180,255,0), rgba(224,219,255,.98) 55%, rgba(190,180,255,0));
  transform:rotate(var(--a)) translateY(var(--from,26px)) scaleY(.1);
  opacity:0;
}

/* ── Shooting stars ────────────────────────────────────────────────────────
   The old one was a gradient bar sliding across at a fixed angle, which is why
   it read as arbitrary: a real meteor has a bright HEAD with the tail dragging
   BEHIND it, and it decelerates and dies rather than stopping.

   So the element is the tail, and ::after is the head at its leading tip. The
   travel angle and the tail angle are the same variable, which is the whole
   trick - a tail that does not lie along the path is what made the old one
   look wrong. Two of them, on very different cycles, so they never pair up
   into a rhythm.
──────────────────────────────────────────────────────────────────────────── */
.ld-comet {
  position:absolute; top:var(--top,14%); left:-16%;
  width:min(190px, 26vw); height:1.6px; border-radius:2px;
  opacity:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(214,208,255,0) 0%,
    rgba(190,180,255,.30) 45%,
    rgba(233,229,255,.95) 100%);
  transform:rotate(var(--ang,19deg));
  animation:cometRun var(--dur,8s) cubic-bezier(.25,.5,.4,1) var(--dl,3s) infinite;
}
.ld-comet::after {
  content:''; position:absolute; right:-1px; top:50%;
  width:3px; height:3px; margin-top:-1.5px; border-radius:50%;
  background:#fff; box-shadow:0 0 8px 2px rgba(214,208,255,.95);
}
/* Bright fast, then fading as it slows - most of the cycle is empty sky, which
   is what makes the next one feel like an event. */
@keyframes cometRun {
  0%   { opacity:0; transform:rotate(var(--ang,19deg)) translate3d(0,0,0) scaleX(.5); }
  4%   { opacity:1; }
  16%  { opacity:.9; }
  24%  { opacity:0; transform:rotate(var(--ang,19deg)) translate3d(124vw,0,0) scaleX(1.25); }
  100% { opacity:0; transform:rotate(var(--ang,19deg)) translate3d(124vw,0,0) scaleX(1.25); }
}

.loading-logo {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0;
}

/* ── The star, and the things orbiting it ── */
.optima-star-wrap {
  position:relative; width:76px; height:76px;
  display:flex; align-items:center; justify-content:center;
  animation:starFloatY 3.6s ease-in-out 1.15s infinite;
}
@keyframes starFloatY { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

.optima-halo {
  position:absolute; inset:-30px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(124,111,247,.44) 0%, rgba(124,111,247,0) 62%);
  opacity:.3; animation:haloPulse 2.8s ease-in-out 1s infinite;
}
@keyframes haloPulse {
  0%,100% { opacity:.28; transform:scale(.8); }
  50%     { opacity:.85; transform:scale(1.18); }
}

.optima-spark {
  position:absolute; width:5px; height:5px; border-radius:50%; z-index:3;
  background:#fff; box-shadow:0 0 9px 2px rgba(190,180,255,.95);
  opacity:0; animation:sparkTwinkle 2.4s ease-in-out infinite;
}
.optima-spark.s1 { top:0;      left:54%; animation-delay:1.3s; }
.optima-spark.s2 { bottom:4px; left:16%; animation-delay:1.9s; }
.optima-spark.s3 { top:42%;    right:0;  animation-delay:2.3s; }
@keyframes sparkTwinkle {
  0%,100% { opacity:0; transform:scale(.3); }
  50%     { opacity:1; transform:scale(1); }
}

/* Spring arrival. Things land with weight instead of fading politely in. */
.optima-star-loading {
  position:relative; z-index:2;
  width:76px; height:76px;
  animation:starPop .62s cubic-bezier(.34,1.56,.64,1) .04s backwards,
            starBreathSpin 3.6s ease-in-out 1.15s infinite,
            starBreathe 2.8s ease-in-out 1.15s infinite;
}
@keyframes starPop {
  0%   { opacity:0; transform:scale(.2) rotate(-52deg); }
  55%  { opacity:1; transform:scale(1.14) rotate(8deg); }
  78%  { transform:scale(.96) rotate(-3deg); }
  100% { opacity:1; transform:scale(1) rotate(0deg); }
}
@keyframes starBreathe {
  0%,100% { filter:drop-shadow(0 0 14px rgba(124,111,247,.40)); }
  50%     { filter:drop-shadow(0 0 38px rgba(190,180,255,.80)); }
}

/* ── Wordmark ── */
.optima-wordmark-loading {
  font-family:var(--font-serif); font-size:28px; font-weight:400; letter-spacing:.3em;
  text-transform:uppercase; text-indent:.3em;
  color:rgba(255,255,255,.88); margin-top:20px;
  display:flex;
  text-shadow:0 0 22px rgba(124,111,247,.30);
}
.optima-wordmark-loading .ld-l {
  display:inline-block;
  animation:letterDrop .44s cubic-bezier(.34,1.56,.64,1) backwards;
}
.optima-wordmark-loading .ld-l:nth-child(1) { animation-delay:.20s; }
.optima-wordmark-loading .ld-l:nth-child(2) { animation-delay:.26s; }
.optima-wordmark-loading .ld-l:nth-child(3) { animation-delay:.32s; }
.optima-wordmark-loading .ld-l:nth-child(4) { animation-delay:.38s; }
.optima-wordmark-loading .ld-l:nth-child(5) { animation-delay:.44s; }
@keyframes letterDrop {
  0%   { opacity:0; transform:translateY(-13px) scale(.86); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

.optima-wordmark-loading .optima-a,
.optima-wordmark-auth .optima-a,
.optima-wordmark-sidebar .optima-a,
/* The first run draws the wordmark too, and drew it flat white - no purple
   final letter and the wrong face. Added to this selector rather than given its
   own copy, so the lockup cannot drift away from the app again. */
#ob-root .brandmark .optima-a {
  color:var(--accent2);
  background:linear-gradient(150deg,#6a5cd6,#b3a6ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.optima-tagline-loading {
  font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(190,180,255,.55); margin-top:7px; font-weight:600;
  animation:fadeRise .5s ease-out .50s backwards;
}
@keyframes fadeRise {
  0%   { opacity:0; transform:translateY(6px); }
  100% { opacity:1; transform:translateY(0); }
}

/* ── The bar ── */
.loading-bar {
  position:relative; z-index:2;
  width:190px; height:7px;
  background:rgba(255,255,255,.06);
  border-radius:99px; overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
  animation:fadeRise .45s ease-out .56s backwards;
}
.loading-fill {
  height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent2),#c9bfff);
  border-radius:99px;
  box-shadow:0 0 14px rgba(124,111,247,.7);
  animation:loadFill 2.1s cubic-bezier(.65,0,.35,1) .56s infinite;
  position:relative; overflow:hidden;
}
/* Uneven on purpose. Real loading surges and stalls; a constant crawl reads
   as fake, because it is. */
@keyframes loadFill { 0% { width:0; } 35% { width:58%; } 60% { width:71%; } 100% { width:100%; } }
.loading-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform:translateX(-100%);
  animation:fillSheen 1.4s ease-in-out .9s infinite;
}
@keyframes fillSheen { 0%{transform:translateX(-100%)} 100%{transform:translateX(260%)} }

.loading-text {
  position:relative; z-index:2;
  font-size:11.5px; color:rgba(190,180,255,.5); letter-spacing:.05em;
  min-height:15px; text-align:center;
  animation:fadeRise .45s ease-out .62s backwards;
}
/* The rotator toggles this class off and on to restart the animation. During
   that gap NO animation applies, so the element must be visible on its own -
   which is why .loading-text no longer declares opacity:0 and relies on a
   forwards fill to undo it. An element whose resting state lives in an
   animation is one class-toggle away from vanishing. */
.loading-text.ld-swap { animation:swapIn .34s cubic-bezier(.22,1,.36,1); }
@keyframes swapIn {
  0%   { opacity:0; transform:translateY(4px); }
  100% { opacity:1; transform:translateY(0); }
}

/* ── The jump: travel, not detonation ──────────────────────────────────────
   The previous version had a flash and a symmetrical burst of lines from a
   point, which is the grammar of an EXPLOSION - something happens at a spot and
   throws matter outward. Travel is the opposite: nothing happens at a spot, YOU
   move, and the world streams past because of it.

   So the flash is gone, and the starfield itself does the work. Every star was
   given the direction it sits from the vanishing point, and on the jump each
   one slides out along its own line and stretches into a streak - the stars you
   were looking at a second ago are the ones now flying past. Stars nearer the
   edge travel furthest, which is parallax; without that the whole frame is just
   a flat picture being scaled up.

   The curve ramps rather than snaps. An explosion is fastest at t=0; a ship
   accelerating is slowest there, so the ease starts gently and never stops
   building.

   Tied to SPLASH_OUT_MS in auth.js. Change one, change both.
──────────────────────────────────────────────────────────────────────────── */
#loading {
  --jump-ease:cubic-bezier(.62,.02,.86,.24);   /* builds, never snaps */
  --jump-dur:1.05s;
}
#loading.ld-out {
  pointer-events:none;
  animation:splashOut var(--jump-dur) var(--jump-ease) forwards;
  will-change:transform, opacity;
}
/* A small pull-back first - the ship gathering itself. Kept subtle: at 4% it
   was a slingshot, which is a launch; travel wants barely a breath. */
@keyframes splashOut {
  0%   { opacity:1; transform:scale(1); }
  9%   { opacity:1; transform:scale(.985); }
  70%  { opacity:.96; }
  100% { opacity:0; transform:scale(1.5); }
}

/* THE STARS ARE THE EFFECT. rotate() aims each star down its own outward line,
   translateX() sends it along that line, scaleX() stretches it into a streak
   as it goes - so the trail always lies along the path of travel, which is the
   thing that separates streaming from smearing. */
#loading.ld-out .ld-dot {
  animation:starStream var(--jump-dur) var(--jump-ease) .06s forwards !important;
  will-change:transform, opacity;
  /* The near stars carry a 7px glow. Stretched 22x that glow becomes a ~150px
     smudge, which is most of why the warp looked dirty rather than fast. A
     streaking star should be a clean line. */
  box-shadow:none !important;
}
/* The stretch RAMPS instead of growing linearly. A dot that is already a long
   line at 20% has not accelerated, it has simply been drawn long - the
   elongation has to arrive with the speed for it to read as motion blur. The
   fade is held off until the last quarter so the lines stay solid while they
   travel and do not dissolve mid-flight. */
@keyframes starStream {
  0%   { opacity:1; transform:rotate(var(--ang,0deg)) translateX(0)                    scaleX(1); }
  22%  { opacity:1; transform:rotate(var(--ang,0deg)) translateX(calc(var(--push,90vmax) * .07))  scaleX(2.4); }
  55%  { opacity:1; transform:rotate(var(--ang,0deg)) translateX(calc(var(--push,90vmax) * .34))  scaleX(9); }
  78%  { opacity:.9; }
  100% { opacity:0; transform:rotate(var(--ang,0deg)) translateX(var(--push,90vmax))   scaleX(22); }
}

/* Distant traffic, thin and already off-centre, to fill the depth the stars
   alone cannot cover. Deliberately fewer and dimmer than before - when these
   dominated, the frame read as a firework. */
#loading.ld-out .ld-streak {
  animation:warpJump calc(var(--jump-dur) - .06s) var(--jump-ease)
            calc(.06s + var(--d,0s)) forwards;
  will-change:transform, opacity;
}
/* Same ramp as the stars. When these grew linearly while the stars grew on a
   curve, the two systems were visibly travelling at different rates through
   the same sky. */
@keyframes warpJump {
  0%   { opacity:0;            transform:rotate(var(--a)) translateY(var(--from,60px)) scaleY(.18); }
  18%  { opacity:var(--o,.7);  transform:rotate(var(--a)) translateY(calc(var(--from,60px) + (var(--to,150vmax) - var(--from,60px)) * .07)) scaleY(.3); }
  55%  { opacity:var(--o,.7);  transform:rotate(var(--a)) translateY(calc(var(--from,60px) + (var(--to,150vmax) - var(--from,60px)) * .34)) scaleY(.6); }
  88%  { opacity:var(--o,.7); }
  100% { opacity:0;            transform:rotate(var(--a)) translateY(var(--to,150vmax)) scaleY(1); }
}

/* The mark travels furthest, so you pass THROUGH it rather than watch it
   shrink away with the rest of the frame. */
#loading.ld-out .loading-logo {
  animation:logoWarp var(--jump-dur) var(--jump-ease) forwards;
  will-change:transform, opacity;
}
@keyframes logoWarp {
  0%   { transform:scale(1)   translateZ(0); opacity:1; }
  9%   { transform:scale(.97) translateZ(0); opacity:1; }
  72%  { opacity:.88; }
  100% { transform:scale(3.1) translateZ(0); opacity:0; }
}

/* Reading matter leaves first and fast. It is information, not scenery, and
   dragging it through the jump makes the frame busy. */
#loading.ld-out .loading-bar,
#loading.ld-out .loading-text,
#loading.ld-out .optima-tagline-loading {
  animation:barOut .24s ease-in forwards;
}
@keyframes barOut { to { opacity:0; transform:translateY(9px); } }

/* The nebula holds still and the drift stops - the foreground is what is
   moving, and two competing motions is what makes a jump feel like chaos. */
#loading.ld-out .ld-layer,
#loading.ld-out .ld-neb,
#loading.ld-out .ld-comet { animation-play-state:paused; }

/* ── Reduced motion ────────────────────────────────────────────────────────
   Everything above starts at opacity:0 and is revealed BY an animation, so
   cancelling animation alone would leave a BLANK SCREEN. Each element is
   pinned visible explicitly. Motion-heavy space layers are suppressed
   outright rather than left frozen mid-flight - a stalled warp streak is
   worse than no warp streak. The nebula and starfield stay, because a still
   sky is still a sky. */
@media (prefers-reduced-motion: reduce) {
  .ld-layer,
  .ld-neb,
  .ld-warp,
  .ld-streak,
  .ld-comet,
  .optima-halo,
  .optima-spark { animation:none !important; }

  .ld-warp, .ld-streak, .ld-comet, .optima-spark { opacity:0 !important; }

  .ld-neb   { opacity:.75 !important; }
  .ld-dot   { animation:none !important; opacity:.7 !important; }
  .optima-halo { opacity:.45 !important; transform:none !important; }

  .optima-star-loading,
  .optima-wordmark-loading .ld-l,
  .optima-tagline-loading,
  .loading-bar,
  .loading-text {
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .loading-fill { animation:none !important; width:65% !important; }
  /* dismissLoading() never adds .ld-out under reduced motion, but if it ever
     did, this keeps it from animating while still letting it disappear. */
  #loading.ld-out,
  #loading.ld-out .loading-logo,
  #loading.ld-out .loading-bar,
  #loading.ld-out .loading-text,
  #loading.ld-out .ld-streak { animation:none !important; opacity:0 !important; }
  #loading.ld-out .ld-dot { animation:none !important; }
  .loading-fill::after { animation:none !important; opacity:0 !important; }
}

/* Tap-to-generate cards — study tools no longer auto-fire the AI on open,
   so a single navigation never burns the AI quota in the background. */
.study-gen-cta {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:54px 22px; gap:12px;
}
.study-gen-cta .sg-icon { font-size:46px; filter:drop-shadow(0 0 18px rgba(124,111,247,.4)); }
.study-gen-cta .sg-title { font-size:19px; font-weight:800; color:var(--text); }
.study-gen-cta .sg-desc { font-size:13px; color:var(--text3); max-width:330px; line-height:1.55; }
.study-gen-cta .sg-btn {
  margin-top:8px; padding:11px 24px; border:none; border-radius:12px; cursor:pointer;
  font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 6px 20px rgba(124,111,247,.35); transition:filter .15s, transform .15s;
}
.study-gen-cta .sg-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.study-gen-cta .sg-note { font-size:11px; color:var(--text4); margin-top:2px; }

/* Reusable star animations */
@keyframes starSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
/* "breath spin" — rotates AND swells on an ease-in-out breathing rhythm */
@keyframes starBreathSpin {
  0%   { transform:rotate(0deg)   scale(1);    }
  50%  { transform:rotate(180deg) scale(1.08); }
  100% { transform:rotate(360deg) scale(1);    }
}
@keyframes starPulse { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }

/* ══════════════════════════════════════════════════════
   LIVING STAR SYSTEM — dynamic symbol states
══════════════════════════════════════════════════════ */

/* Base living star element */
.optima-star {
  display:block; width:40px; height:40px;
  filter:drop-shadow(0 0 12px rgba(124,111,247,.35));
  transition:filter .4s var(--ease), transform .4s var(--ease), opacity .3s var(--ease);
}
.optima-star.sm { width:24px; height:24px; }
.optima-star.md { width:40px; height:40px; }
.optima-star.lg { width:56px; height:56px; }
.optima-star.xl { width:72px; height:72px; }

/* ── STATE: Generating / AI working ── */
@keyframes starGenerate {
  0%   { transform:rotate(0deg) scale(1);   filter:drop-shadow(0 0 10px rgba(124,111,247,.3)); }
  25%  { transform:rotate(90deg) scale(1.1); filter:drop-shadow(0 0 20px rgba(168,158,255,.55)); }
  50%  { transform:rotate(180deg) scale(1);  filter:drop-shadow(0 0 14px rgba(124,111,247,.4)); }
  75%  { transform:rotate(270deg) scale(1.08);filter:drop-shadow(0 0 22px rgba(168,158,255,.5)); }
  100% { transform:rotate(360deg) scale(1);  filter:drop-shadow(0 0 10px rgba(124,111,247,.3)); }
}
.star-generating {
  animation:starGenerate 2.2s cubic-bezier(.4,0,.2,1) infinite;
}

/* ── STATE: Streak glow — intensity scales with streak ── */
@keyframes starStreakGlow {
  0%,100% { filter:drop-shadow(0 0 var(--streak-glow-size,12px) var(--streak-glow-color,rgba(124,111,247,.25))); transform:scale(1); }
  50%     { filter:drop-shadow(0 0 var(--streak-glow-peak,24px) var(--streak-glow-peak-color,rgba(168,158,255,.5))); transform:scale(var(--streak-scale,1.03)); }
}
.star-streak { animation:starStreakGlow 3.5s ease-in-out infinite; }

/* Streak tiers — set via inline style or class */
.star-streak-0  { --streak-glow-size:6px; --streak-glow-color:rgba(124,111,247,.1);  --streak-glow-peak:10px; --streak-glow-peak-color:rgba(168,158,255,.15); --streak-scale:1.01; opacity:.12; }
.star-streak-1  { --streak-glow-size:10px;--streak-glow-color:rgba(124,111,247,.2);  --streak-glow-peak:18px; --streak-glow-peak-color:rgba(168,158,255,.35); --streak-scale:1.02; opacity:.2; }
.star-streak-3  { --streak-glow-size:14px;--streak-glow-color:rgba(124,111,247,.3);  --streak-glow-peak:26px; --streak-glow-peak-color:rgba(168,158,255,.5);  --streak-scale:1.04; opacity:.3; }
.star-streak-7  { --streak-glow-size:18px;--streak-glow-color:rgba(124,111,247,.4);  --streak-glow-peak:34px; --streak-glow-peak-color:rgba(168,158,255,.65); --streak-scale:1.05; opacity:.45; }
.star-streak-14 { --streak-glow-size:22px;--streak-glow-color:rgba(47,207,190,.35);  --streak-glow-peak:40px; --streak-glow-peak-color:rgba(47,207,190,.55);  --streak-scale:1.06; opacity:.55; }
.star-streak-30 { --streak-glow-size:28px;--streak-glow-color:rgba(245,184,65,.4);   --streak-glow-peak:48px; --streak-glow-peak-color:rgba(245,184,65,.6);   --streak-scale:1.07; opacity:.7; }

/* ── STATE: Error / Confusion — fragment & shake ── */
@keyframes starFragment {
  0%   { transform:scale(1) rotate(0deg);    filter:drop-shadow(0 0 8px rgba(244,114,114,.3));  opacity:1; }
  15%  { transform:scale(1.12) rotate(-8deg); filter:drop-shadow(0 0 18px rgba(244,114,114,.6)); opacity:.9; }
  30%  { transform:scale(.92) rotate(6deg);   filter:drop-shadow(0 0 12px rgba(244,114,114,.4)); opacity:.7; }
  45%  { transform:scale(1.05) rotate(-4deg); filter:drop-shadow(0 0 15px rgba(244,114,114,.5)); opacity:.85; }
  60%  { transform:scale(.96) rotate(3deg);   filter:drop-shadow(0 0 10px rgba(244,114,114,.35));opacity:.75; }
  80%  { transform:scale(1) rotate(-1deg);    filter:drop-shadow(0 0 8px rgba(244,114,114,.3));  opacity:.9; }
  100% { transform:scale(1) rotate(0deg);     filter:drop-shadow(0 0 6px rgba(244,114,114,.2));  opacity:.6; }
}
.star-error {
  animation:starFragment .8s ease-out forwards;
  filter:drop-shadow(0 0 10px rgba(244,114,114,.4)) !important;
}

/* ── STATE: Mastery / Success — reform with golden glow ── */
@keyframes starMastery {
  0%   { transform:scale(.85) rotate(-10deg); filter:drop-shadow(0 0 6px rgba(52,217,122,.2));  opacity:.5; }
  30%  { transform:scale(1.15) rotate(5deg);  filter:drop-shadow(0 0 28px rgba(52,217,122,.6)); opacity:1; }
  50%  { transform:scale(.98) rotate(-2deg);  filter:drop-shadow(0 0 20px rgba(52,217,122,.45));opacity:.95; }
  70%  { transform:scale(1.06) rotate(1deg);  filter:drop-shadow(0 0 32px rgba(52,217,122,.55));opacity:1; }
  100% { transform:scale(1) rotate(0deg);     filter:drop-shadow(0 0 16px rgba(52,217,122,.35));opacity:1; }
}
.star-mastery {
  animation:starMastery 1.2s cubic-bezier(.22,1,.36,1) forwards;
}

/* ── STATE: Reveal / Unfold — for recall answers ── */
@keyframes starReveal {
  0%   { transform:scale(.6) rotate(-30deg); filter:drop-shadow(0 0 4px rgba(124,111,247,.15)); opacity:0; }
  40%  { transform:scale(1.15) rotate(8deg); filter:drop-shadow(0 0 26px rgba(168,158,255,.6)); opacity:1; }
  70%  { transform:scale(.96) rotate(-3deg); filter:drop-shadow(0 0 18px rgba(124,111,247,.4)); opacity:.9; }
  100% { transform:scale(1) rotate(0deg);    filter:drop-shadow(0 0 14px rgba(124,111,247,.3)); opacity:1; }
}
.star-reveal {
  animation:starReveal .9s cubic-bezier(.22,1,.36,1) forwards;
}

/* ── Centered star loading block (replaces spinners) ── */
.star-loading-block {
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:40px 24px;
}
.star-loading-block .optima-star { margin:0 auto; }
.star-loading-block .star-loading-text {
  font-size:13px; color:var(--text3); text-align:center;
  letter-spacing:.02em;
}


/* ══════════════════════════════════════════════════════
   AUTH SCREENS
══════════════════════════════════════════════════════ */

#auth {
  position:fixed; inset:0; z-index:9000;
  background:var(--bg);
  display:none;
  padding:20px;
  overflow-y:auto;
}

.auth-glow {
  position:fixed; top:-220px; left:50%; transform:translateX(-50%);
  width:680px; height:560px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(124,111,247,.09) 0%,rgba(240,107,186,.03) 45%,transparent 70%);
  pointer-events:none;
  animation:glowPulse 8s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  from { opacity:.6; transform:translateX(-50%) scale(1); }
  to   { opacity:1;  transform:translateX(-50%) scale(1.06); }
}

.auth-box {
  background:rgba(13,13,22,.88);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid var(--border2);
  border-radius:var(--r2);
  padding:38px 40px;
  width:100%; max-width:430px;
  position:relative; z-index:1;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.03);
  animation:authIn .35s var(--ease);
  margin:auto;
  flex-shrink:0;
}
@keyframes authIn {
  from { opacity:0; transform:translateY(18px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.auth-logo { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:8px; }
.optima-star-auth { width:56px; height:56px; filter:drop-shadow(0 0 16px rgba(124,111,247,.3)); }
.optima-wordmark-auth { font-family:var(--font-serif); font-size:26px; font-weight:400; letter-spacing:.3em; text-transform:uppercase; text-indent:.3em; color:rgba(255,255,255,.85); }
.auth-tagline { font-size:9.5px; color:var(--text4); text-align:center; letter-spacing:.16em; margin-bottom:26px; font-weight:700; text-transform:uppercase; }
.auth-title { font-size:17px; font-weight:700; margin-bottom:5px; }
.auth-sub { font-size:13px; color:var(--text2); margin-bottom:20px; line-height:1.55; }

.label {
  font-size:11px; font-weight:600; color:var(--text3);
  margin-bottom:6px; display:block;
  letter-spacing:.06em; text-transform:uppercase;
}

.input {
  width:100%;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:11px;
  padding:11px 15px;
  font-size:14px;
  color:var(--text);
}
.input:hover { border-color:var(--border3); }
.input:focus { border-color:var(--accent); background:var(--bg4); box-shadow:0 0 0 3px rgba(124,111,247,.08); }
.input::placeholder { color:var(--text4); }

select.input {
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555570' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
select.input option { background:var(--bg3); color:var(--text); }

.form-group { margin-bottom:14px; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:11px;
  font-size:14px; font-weight:600;
  transition:all .2s var(--ease);
  cursor:pointer; width:100%;
}
.btn-primary {
  background:linear-gradient(135deg,var(--accent) 0%,#6b5ee8 100%);
  color:#fff; border:none;
  box-shadow:0 2px 10px var(--accent-glow);
}
.btn-primary:hover {
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 6px 20px var(--accent-glow);
}
.btn-primary:active { transform:translateY(0); box-shadow:0 2px 8px rgba(124,111,247,.2); }

.btn-ghost {
  background:transparent; color:var(--text2);
  border:1px solid var(--border2);
}
.btn-ghost:hover { background:var(--bg3); color:var(--text); border-color:var(--border3); }
.btn:disabled { opacity:.35; cursor:not-allowed; transform:none!important; box-shadow:none!important; }

.btn-google {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:11px 22px; border-radius:11px;
  background:var(--bg3); border:1px solid var(--border2);
  color:var(--text); font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s var(--ease);
  font-family:var(--font); margin-bottom:10px;
}
.btn-google:hover { background:var(--bg4); border-color:var(--border3); transform:translateY(-1px); }

.divider { display:flex; align-items:center; gap:12px; margin:16px 0; }
.divider-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--border2),transparent); }
.divider-text { font-size:10px; color:var(--text4); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }

.auth-error {
  background:var(--red-bg); border:1px solid var(--red-border);
  border-radius:11px; padding:10px 14px;
  font-size:13px; color:var(--red);
  margin-bottom:14px; display:none; line-height:1.5;
}
.auth-success {
  background:var(--green-bg); border:1px solid var(--green-border);
  border-radius:11px; padding:10px 14px;
  font-size:13px; color:var(--green);
  margin-bottom:14px; display:none; line-height:1.5;
}

.auth-link { color:var(--accent2); cursor:pointer; font-weight:600; }
.auth-link:hover { text-decoration:underline; }
.auth-footer { text-align:center; font-size:13px; color:var(--text2); margin-top:16px; }

.spinner {
  width:18px; height:18px;
  border:2px solid rgba(255,255,255,.15); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite;
  display:inline-block; flex-shrink:0;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Entry path cards */
.auth-path-grid { display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.auth-path-card {
  display:flex; align-items:center; gap:15px;
  width:100%; padding:16px 18px;
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--r);
  cursor:pointer; transition:all .2s var(--ease);
  text-align:left; font-family:var(--font); color:var(--text);
}
.auth-path-card:hover {
  border-color:var(--accent-border); background:var(--bg4);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(124,111,247,.1);
}
.auth-path-icon {
  width:44px; height:44px; border-radius:13px;
  background:var(--accent-bg); border:1px solid var(--accent-border);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.auth-path-title { font-size:14px; font-weight:700; margin-bottom:2px; }
.auth-path-sub { font-size:12px; color:var(--text2); line-height:1.45; }

/* "Coming soon" gated entry card (e.g. Register a School during private testing) */
.auth-path-card.auth-path-soon {
  position:relative; opacity:.55; cursor:default;
}
.auth-path-card.auth-path-soon:hover {
  border-color:var(--border2); background:var(--bg3);
  transform:none; box-shadow:none;
}
.auth-path-soon-badge {
  margin-left:auto; align-self:flex-start; flex-shrink:0;
  font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--amber, #f5b841);
  background:var(--amber-bg, rgba(245,184,65,.08));
  border:1px solid var(--amber-border, rgba(245,184,65,.2));
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}

/* Role chips */
.role-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.role-chip {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:var(--r);
  border:1px solid var(--border2); background:var(--bg3);
  cursor:pointer; transition:all .2s var(--ease);
  font-size:13px; font-weight:500; color:var(--text2);
}
.role-chip:hover { border-color:var(--border3); color:var(--text); background:var(--bg4); }
.role-chip.selected { border-color:var(--accent); background:var(--accent-bg); color:var(--accent2); }
.role-chip[data-role="teacher"].selected { border-color:var(--teal); background:var(--teal-bg); color:var(--teal); }
.role-chip[data-role="parent"].selected { border-color:var(--pink); background:var(--pink-bg); color:var(--pink); }
.role-chip[data-role="admin"].selected { border-color:var(--amber); background:var(--amber-bg); color:var(--amber); }
.role-emoji { font-size:18px; }
.extra-field { display:none; } .extra-field.show { display:block; }

/* ── Grade Picker ── */
.grade-picker {
  display:flex; flex-wrap:wrap; gap:8px;
}
.grade-chip {
  display:flex; align-items:center; justify-content:center;
  min-width:54px; padding:8px 14px; border-radius:var(--r);
  border:1px solid var(--border2); background:var(--bg3);
  cursor:pointer; transition:all .2s var(--ease);
  font-size:13px; font-weight:600; color:var(--text2);
  user-select:none;
}
.grade-chip:hover { border-color:var(--border3); color:var(--text); background:var(--bg4); }
.grade-chip.selected { border-color:var(--accent); background:var(--accent-bg); color:var(--accent2); }
.grade-hint {
  font-size:11px; color:var(--text3); margin-top:6px; line-height:1.4;
}

/* ── Audio Style Picker ── */
.aud-style-picker { margin-bottom:20px; }
.aud-style-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--text3); margin-bottom:10px;
}
.aud-style-row { display:flex; gap:8px; flex-wrap:wrap; }
.aud-style-card {
  flex:1; min-width:120px; padding:14px;
  border-radius:var(--r); border:1px solid var(--border2);
  background:var(--bg3); cursor:pointer;
  transition:all .2s var(--ease); text-align:center;
}
.aud-style-card:hover { border-color:var(--border3); background:var(--bg4); }
.aud-style-card.active { border-color:var(--accent); background:var(--accent-bg); }
.aud-style-icon { font-size:22px; margin-bottom:6px; }
.aud-style-name { font-size:12px; font-weight:700; color:var(--text); margin-bottom:2px; }
.aud-style-desc { font-size:10px; color:var(--text3); line-height:1.4; }


/* ══════════════════════════════════════════════════════
   APP SHELL — Sidebar
══════════════════════════════════════════════════════ */

#app { display:none; min-height:100vh; min-height:100dvh; }
#app.visible { display:flex; }

/* ── LIQUID GLASS ─────────────────────────────────────────────────
   The panel was flat --bg2 with a hairline border: a darker rectangle beside a
   dark page, which is why it read as a slab rather than a surface.

   Real glass does three things a flat fill cannot, and all three are cheap:
     BLUR      it samples what is behind it, so the panel belongs to the page
               rather than sitting on top of it
     SATURATE  glass concentrates colour; without this, blur alone looks like
               fog and drains the accent out of anything behind it
     SPECULAR  a bright top edge fading to nothing, which is what tells the eye
               "this has thickness". A uniform 1px border says "box"; a
               gradient edge says "material".

   backdrop-filter is the whole effect, so it degrades honestly: browsers
   without it get the solid fallback declared first and lose nothing but the
   depth. */
.sidebar {
  width:var(--sidebar-w); min-width:var(--sidebar-w);
  background:var(--bg2);                       /* fallback, first on purpose */
  background:linear-gradient(180deg, rgba(26,26,40,.72), rgba(13,13,22,.82));
  -webkit-backdrop-filter:blur(28px) saturate(155%);
  backdrop-filter:blur(28px) saturate(155%);
  border-right:1px solid transparent;
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0;
  z-index:100;
  transition:transform .3s var(--ease), width .3s var(--ease);
  overflow:hidden;
}
/* The specular edge. A pseudo-element rather than border-image so it can fade
   along its length - light does not hit a surface evenly. */
.sidebar::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:linear-gradient(180deg,
    rgba(168,158,255,.34) 0%,
    rgba(255,255,255,.10) 22%,
    rgba(255,255,255,.03) 60%,
    transparent 100%);
  pointer-events:none;
}
/* A soft bloom behind the top of the panel, so the wordmark sits in light
   rather than on a flat field. Sits under everything and never intercepts a tap. */
.sidebar::before {
  content:''; position:absolute; top:-120px; left:-60px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, var(--accent-glow), transparent 68%);
  filter:blur(38px); opacity:.5; pointer-events:none;
}

.sidebar-logo {
  padding:22px 22px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  position:relative;          /* anchor for #sb-close */
}

/* Close button for the full-screen phone panel. Hidden by default and
   switched on only in layout.css's <=767px block - on desktop the sidebar
   is docked and there is nothing to close. */
#sb-close {
  display:none;
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; align-items:center; justify-content:center;
  background:var(--bg3); border:1px solid var(--border1); border-radius:50%;
  color:var(--text2); font-size:16px; line-height:1; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s var(--ease), background .16s var(--ease);
}
#sb-close:active { transform:scale(.9); background:var(--accent-bg); }
.logo-mark {
  display:flex; align-items:center; gap:8px;
}
.optima-star-sidebar { width:26px; height:26px; filter:drop-shadow(0 0 8px rgba(124,111,247,.25)); }
.optima-wordmark-sidebar { font-family:var(--font-serif); font-size:18px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; text-indent:.24em; color:rgba(255,255,255,.85); }
.logo-school {
  font-size:10.5px; color:var(--text4); margin-top:3px;
  letter-spacing:.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.role-pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 10px; border-radius:20px; margin-top:8px;
}
.rp-student { background:var(--accent-bg); color:var(--accent2); border:1px solid var(--accent-border); }
.rp-teacher { background:var(--teal-bg); color:var(--teal); border:1px solid var(--teal-border); }
.rp-parent  { background:var(--pink-bg); color:var(--pink); border:1px solid var(--pink-border); }
.rp-admin   { background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-border); }
.rp-principal { background:rgba(244,114,114,.1); color:var(--red); border:1px solid rgba(244,114,114,.25); }

.sidebar-nav {
  flex:1; padding:6px 0; overflow-y:auto; overflow-x:hidden;
}

.nav-label {
  font-size:9.5px; font-weight:700; color:var(--text4);
  letter-spacing:.14em; text-transform:uppercase;
  padding:16px 22px 6px;
  white-space:nowrap;
}
.nav-label:first-child { padding-top:10px; }

/* The bottom of the dashboard, in the same language as the top. Both of these
   replaced cards that were the last things on the page still shaped like the
   pre-redesign dashboard - a full-width .card with a section-title, and a
   launch card left over from the launchpad that no longer exists. */
.dash-done {
  display:flex; align-items:center; gap:13px;
  background:linear-gradient(155deg, rgba(52,217,122,.10), rgba(52,217,122,.03));
  border:1px solid var(--green-border); border-radius:16px;
  padding:14px 16px; margin-bottom:11px;
}
.dash-done-ic {
  width:26px; height:26px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-size:13px; font-weight:700;
  background:rgba(52,217,122,.16); color:var(--green);
}
.dash-done-h { font-size:14px; font-weight:650; color:var(--text); }
.dash-done-s { font-size:12.5px; color:var(--text2); margin-top:1px; }

/* The SECOND action. Deliberately quieter than .dash-next - same shape, no
   accent fill - so the page still has one obvious first move. */
.dash-second {
  display:flex; align-items:center; gap:13px; width:100%;
  background:var(--bg3);
  background:linear-gradient(155deg, rgba(35,35,53,.62), rgba(19,19,31,.78));
  border:1px solid rgba(255,255,255,.055); border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset;
  padding:14px 16px; margin-bottom:11px; cursor:pointer; text-align:left;
  font-family:var(--font);
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.dash-second:hover { border-color:var(--accent); transform:translateY(-1px); }
.dash-second:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
.dash-second-ic { font-size:19px; line-height:1; flex:none; }
.dash-second-b { flex:1; display:flex; flex-direction:column; }
.dash-second-h { font-size:14px; font-weight:650; color:var(--text); }
.dash-second-s { font-size:12.5px; color:var(--text2); margin-top:1px; }
.dash-second-go { color:var(--text3); font-size:16px; }

/* Glass, applied where it earns its keep: the surfaces a learner looks at
   most. Not everywhere - if every card is glass, none of them read as raised,
   and blur is the most expensive paint on the page. */
/* NO backdrop-filter on the subject cards, deliberately. Eight of them render
   at once, blur is the most expensive paint on a page, and behind them is a
   flat opaque background - so it would cost a phone real frames to sample
   something with nothing in it.
   
   What actually makes a surface read as glass is the EDGE, not the blur: a
   gradient fill so it is not one flat tone, a hairline that is lighter than the
   card, and a 1px inset highlight along the top where light would catch. Those
   are free. The blur is reserved for the panel, which genuinely sits over
   moving content, and the one action card. */
.dash-sub, .dash-qchip {
  background:var(--bg3);                       /* fallback first */
  background:linear-gradient(155deg, rgba(35,35,53,.62), rgba(19,19,31,.78));
  border:1px solid rgba(255,255,255,.055);
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset;
}
.dash-sub:hover {
  border-color:rgba(168,158,255,.34);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset, 0 10px 26px -14px var(--accent-glow);
}
.dash-next {
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 12px 30px -18px var(--accent-glow);
}
/* Motion has to be earned too: transform only, so it stays on the compositor.
   Animating blur or box-shadow per frame is what makes glass feel cheap. */
@media (prefers-reduced-motion: reduce) {
  .dash-sub, .nav-world { transition:none; }
  .dash-sub:hover { transform:none; }
}

/* ── SUBJECTS AS THE SCREEN ────────────────────────────────────────
   A GRID, not the horizontal scroller. A scroller says "these are a list of
   things somewhere below the real content"; a grid says "this is the content".
   Choosing a subject is the decision Today exists to serve, so the cards are
   the largest and most tappable thing on the page.

   Two columns on a phone, more as the screen allows. Never one: a single
   column turns four subjects into a scroll, which is the problem the scroller
   already had. */
/* A RAIL AT EVERY WIDTH, not a grid that becomes one on a phone.
   Nine subjects in a 3x3 grid is a wall at any size - it fills the screen,
   pushes the one action out of sight, and gives the eye nowhere to start. A
   rail has a beginning, moves under the thumb, and shows a sliver of the next
   card so there is always somewhere to go. The breakpoint version was the
   wrong call: the problem was never the screen size, it was nine equal things. */
.dash-subjects-grid {
  display:flex; gap:12px; overflow-x:auto;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  margin:0 calc(var(--page-pad) * -1) 18px;
  padding:4px var(--page-pad) 10px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.dash-subjects-grid::-webkit-scrollbar { display:none; }
.dash-subjects-grid > .dash-sub { flex:0 0 174px; scroll-snap-align:start; }
@media (max-width:600px) { .dash-subjects-grid > .dash-sub { flex-basis:47%; } }

/* Cards arrive in sequence. --i is set per card in JS so the rail assembles
   left to right, the way the eye already reads it. 45ms apart: fast enough
   that nobody waits, slow enough to register as motion rather than a flicker. */
@keyframes dashSubIn {
  from { opacity:0; transform:translateY(16px) scale(.96); }
  to   { opacity:1; transform:none; }
}
.dash-subjects-grid > .dash-sub {
  animation:dashSubIn .46s cubic-bezier(.34,1.4,.64,1) both;
  animation-delay:calc(var(--i, 0) * 45ms);
}

.dash-sub {
  display:flex; flex-direction:column; gap:9px; text-align:left;
  background:var(--bg3); border:1px solid var(--bg4); border-radius:16px;
  padding:14px 13px; cursor:pointer; font-family:var(--font);
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.dash-sub { position:relative; overflow:hidden; }
/* A sheen that sweeps once on hover. One transform on a pseudo-element, never
   touching layout, and it makes a flat card read as a physical thing catching
   light rather than a rectangle changing colour. */
.dash-sub::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.075) 50%, transparent 64%);
  transform:translateX(-130%); transition:transform .75s var(--ease);
}
.dash-sub:hover::after { transform:translateX(130%); }
.dash-sub:hover {
  border-color:var(--accent); transform:translateY(-3px);
  box-shadow:0 12px 28px -16px var(--accent-glow);
}
.dash-sub:active { transform:translateY(-1px) scale(.985); }
.dash-sub:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
.dash-sub-top { display:flex; align-items:center; justify-content:space-between; }
.dash-sub-ic { font-size:19px; line-height:1; }
.dash-sub-nm { font-size:13.5px; font-weight:600; line-height:1.25; color:var(--text); }
.dash-sub-meta { font-size:10.5px; color:var(--text3); }
/* Readiness is the number Oryon exists to move, so it is the number that is
   large. Everything else on the card is a caption to it. */
.dash-sub-pct { font-size:19px; font-weight:700; line-height:1; letter-spacing:-.02em; }
.dash-sub-pct small { font-size:10.5px; font-weight:500; color:var(--text3); }
.dash-sub-add { align-items:center; justify-content:center; color:var(--text3); }

/* The one action. Everything the old page shouted at once is now either this
   or a quiet chip below it. */
.dash-next {
  background:linear-gradient(150deg, rgba(124,111,247,.16), rgba(124,111,247,.04));
  border:1px solid var(--accent-border); border-radius:16px;
  padding:15px 16px; margin-bottom:12px;
}
.dash-next-lbl {
  font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent2); margin-bottom:6px;
}
.dash-next-h { font-size:15px; font-weight:650; margin-bottom:3px; }
.dash-next-s { font-size:12.5px; color:var(--text2); line-height:1.5; margin-bottom:12px; }

/* Streak, clash and what is due. Still here, no longer competing with the work. */
.dash-quiet { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.dash-qchip {
  background:var(--bg3); border:1px solid var(--bg4); border-radius:10px;
  padding:8px 11px; font-size:11.5px; color:var(--text2); cursor:pointer;
  font-family:var(--font); transition:border-color .16s var(--ease);
}
.dash-qchip:hover { border-color:var(--accent); }
.dash-qchip b { color:var(--text); font-weight:650; }

/* ── FOUR WORLDS ───────────────────────────────────────────────────
   The world row is the permanent navigation: four of them, same order every
   time. It is deliberately heavier than the sub-items beneath it - the
   hierarchy has to be visible at a glance, or this is just a longer list.

   Sub-items appear only for the world you are IN. That is what makes four
   destinations hold nineteen pages without either hiding them or shouting
   them all at once. */
.nav-world {
  position:relative;
  display:flex; align-items:center; gap:11px;
  width:calc(100% - 16px); margin:1px 8px; padding:10px 13px;
  border:1px solid transparent; border-radius:12px;
  background:transparent; cursor:pointer;
  font-family:var(--font); font-size:14.5px; font-weight:600;
  color:var(--text2); text-align:left; white-space:nowrap;
  letter-spacing:-.01em;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease);
}
.nav-world:hover { background:rgba(255,255,255,.045); color:var(--text); }
.nav-world:focus-visible { outline:2px solid var(--accent2); outline-offset:1px; }
/* The ACTIVE world is a pill of glass, not a rail. A 3px bar on the edge of a
   translucent panel fights the specular edge two pixels away from it; a lit
   surface behind the label says "you are here" without adding a second line. */
.nav-world.on {
  color:var(--text);
  background:linear-gradient(140deg, rgba(124,111,247,.26), rgba(124,111,247,.09));
  border-color:rgba(168,158,255,.30);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 6px 18px -10px var(--accent-glow);
}
.nav-world.on .nav-ico { color:var(--accent2); }
.nav-ico { width:17px; height:17px; flex:none; opacity:.9; }

/* Sub-items are quieter and tighter: the world above already carries the
   weight, and four sub-items at full height pushed the other three worlds off
   the screen entirely. */
.nav-sub { display:flex; flex-direction:column; padding:1px 0 7px; }
.nav-sub .nav-item {
  padding:6px 13px 6px 45px; font-size:12.5px; color:var(--text2);
  border-radius:9px; margin:0 8px; width:calc(100% - 16px);
}
.nav-sub .nav-item:hover { background:rgba(255,255,255,.04); color:var(--text); }
.nav-sub .nav-item.active { color:var(--accent2); background:rgba(124,111,247,.10); }
/* A hairline spine linking the sub-items to their world, so the indent reads as
   containment rather than as a smaller list that happens to sit below. */
.nav-sub { position:relative; }
.nav-sub::before {
  content:''; position:absolute; left:29px; top:2px; bottom:9px; width:1px;
  background:linear-gradient(180deg, rgba(168,158,255,.28), transparent);
}

.nav-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 22px;
  border:none; border-radius:0;
  background:transparent;
  font-size:13.5px; font-weight:500; color:var(--text2);
  cursor:pointer;
  transition:all .15s var(--ease);
  position:relative; white-space:nowrap;
  width:100%;
  text-align:left;
  font-family:var(--font);
  letter-spacing:-.01em;
}
.nav-item:hover {
  color:var(--text);
  background:rgba(255,255,255,.03);
}
.nav-item.active {
  color:var(--accent2);
  background:linear-gradient(90deg, rgba(124,111,247,.1) 0%, rgba(124,111,247,.03) 100%);
  font-weight:600;
}
.nav-item.active::before {
  content:''; position:absolute; left:0; top:8px; bottom:8px;
  width:3px;
  background:var(--accent);
  border-radius:0 4px 4px 0;
}

.nav-icon {
  font-size:17px; width:24px; text-align:center; flex-shrink:0;
  line-height:1;
}
.nav-text {
  flex:1; overflow:hidden; text-overflow:ellipsis;
}

.sidebar-footer {
  padding:14px 14px;
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.user-card {
  display:flex; align-items:center; gap:11px;
  padding:8px 8px; border-radius:10px;
  cursor:pointer; transition:background .18s;
  margin-bottom:8px;
}
.user-card:hover { background:rgba(255,255,255,.03); }
.user-avatar {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
  background:var(--bg4); border:1px solid var(--border2);
}
.user-name {
  font-size:13px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-sub { font-size:10.5px; color:var(--text4); }

.signout-btn {
  width:100%;
  background:rgba(244,114,114,.06); color:var(--red);
  border:1px solid rgba(244,114,114,.12);
  border-radius:10px; padding:8px;
  font-size:11.5px; font-weight:600;
  cursor:pointer; transition:all .18s;
  font-family:var(--font);
}
.signout-btn:hover {
  background:rgba(244,114,114,.12);
  border-color:rgba(244,114,114,.2);
}


/* ══════════════════════════════════════════════════════
   APP SHELL — Main area + Topbar
══════════════════════════════════════════════════════ */

.main {
  margin-left:var(--sidebar-w);
  flex:1; display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
  background:var(--bg);
  transition:margin-left .3s var(--ease);
}

.topbar {
  height:var(--topbar-h);
  background:rgba(8,8,14,.75);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  position:sticky; top:0; z-index:50;
}
.topbar-title { font-size:15px; font-weight:700; letter-spacing:-.01em; }
.topbar-right { display:flex; align-items:center; gap:10px; }

/* Subject filter bar */
.subj-bar {
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding:8px 28px; position:sticky; top:var(--topbar-h); z-index:49;
}
.subj-bar-inner {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  max-width:900px;
}
.subj-bar-label {
  font-size:11px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.8px; flex-shrink:0;
}
.subj-pill {
  padding:5px 14px; border-radius:99px; font-size:12px; font-weight:600;
  background:var(--bg4); border:1px solid var(--border); color:var(--text3);
  cursor:pointer; transition:all .18s var(--ease); white-space:nowrap;
}
.subj-pill:hover {
  color:var(--text2); border-color:var(--border3); background:var(--bg5);
}
.subj-pill.active {
  background:linear-gradient(135deg, var(--accent), #9b87f5);
  color:white; border-color:transparent;
  box-shadow:0 2px 12px var(--accent-glow);
}
.subj-pill-del {
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:6px; width:16px; height:16px; border-radius:50%;
  font-size:13px; line-height:1; opacity:0; transition:opacity .15s;
  background:rgba(255,255,255,.15); color:inherit; cursor:pointer;
}
.subj-pill:hover .subj-pill-del { opacity:.6; }
.subj-pill-del:hover { opacity:1 !important; background:var(--pink); color:#fff; }
.subj-badge {
  display:inline-block; padding:2px 8px; border-radius:6px;
  font-size:9px; font-weight:700; letter-spacing:.3px;
  background:var(--accent-bg); color:var(--accent2);
  border:1px solid var(--accent-border);
}

.notif-btn {
  position:relative;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--border2); background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px;
  transition:all .18s var(--ease);
}
.notif-btn:hover { background:var(--bg3); border-color:var(--border3); }

.notif-badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--red); color:#fff;
  font-size:10px; font-weight:700; border-radius:20px;
  padding:1px 5px; border:2px solid var(--bg);
  display:none;
}


/* ══════════════════════════════════════════════════════
   PAGE CONTAINER
══════════════════════════════════════════════════════ */

.page { flex:1; padding:28px var(--page-pad); max-width:960px; }
.page-fade { animation:pf .25s var(--ease); }
@keyframes pf { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }


/* ══════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════ */

.card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:20px 24px;
  transition:border-color .2s;
}
.card-sm { padding:14px 18px; border-radius:var(--r); }

.btn-sm {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 15px; border-radius:9px;
  font-size:12px; font-weight:600; color:var(--text);
  cursor:pointer; transition:all .18s var(--ease);
  font-family:var(--font);
  /* Legible default surface so a plain .btn-sm is never invisible */
  background:var(--bg3); border:1px solid var(--border2);
}
.btn-sm:hover { background:var(--bg4, var(--bg2)); color:var(--text); border-color:var(--border3); }
.btn-sm.primary {
  background:linear-gradient(135deg,var(--accent),#6b5ee8);
  color:#fff;
  box-shadow:0 2px 8px rgba(124,111,247,.18);
}
.btn-sm.primary:hover {
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(124,111,247,.28);
}
.btn-sm.ghost { background:transparent; color:var(--text2); border:1px solid var(--border2); }
.btn-sm.ghost:hover { background:var(--bg3); color:var(--text); border-color:var(--border3); }
.btn-sm.danger { background:transparent; color:var(--red); border:1px solid var(--red-border); }
.btn-sm.danger:hover { background:var(--red-bg); }


/* ══════════════════════════════════════════════════════
   DASHBOARD GREETING
══════════════════════════════════════════════════════ */

.greeting {
  font-family:var(--font-serif);
  font-size:32px; line-height:1.15;
  margin-bottom:4px; letter-spacing:-.5px;
}
.greeting-sub {
  font-size:13px; color:var(--text2);
  margin-bottom:22px; letter-spacing:.01em;
}
.name-accent {
  color:var(--accent);
}

.section-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:18px; gap:12px; flex-wrap:wrap;
}
.section-title { font-size:15px; font-weight:700; }
.section-sub { font-size:12px; color:var(--text2); margin-top:3px; line-height:1.5; }


/* ══════════════════════════════════════════════════════
   GRIDS
══════════════════════════════════════════════════════ */

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }


/* ══════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════ */

.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px;
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
}
.badge-green  { background:var(--green-bg);  color:var(--green);   border:1px solid var(--green-border); }
.badge-red    { background:var(--red-bg);    color:var(--red);     border:1px solid var(--red-border); }
.badge-amber  { background:var(--amber-bg);  color:var(--amber);   border:1px solid var(--amber-border); }
.badge-purple { background:var(--accent-bg); color:var(--accent2); border:1px solid var(--accent-border); }
.badge-pink   { background:var(--pink-bg);   color:var(--pink);    border:1px solid var(--pink-border); }
.badge-teal   { background:var(--teal-bg);   color:var(--teal);    border:1px solid var(--teal-border); }
.badge-ghost  { background:var(--bg4);       color:var(--text2);   border:1px solid var(--border2); }


/* ══════════════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════════════ */

.progress-bar { height:5px; background:var(--bg4); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; transition:width .6s var(--ease); }


/* ══════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════ */

.empty-state { text-align:center; padding:48px 20px; color:var(--text3); }
.empty-icon { font-size:42px; margin-bottom:12px; opacity:.55; }
.empty-title { font-size:14px; font-weight:700; color:var(--text2); margin-bottom:6px; }
.empty-sub { font-size:12.5px; line-height:1.6; max-width:300px; margin:0 auto; }


/* ══════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════ */

.toast-el {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:rgba(19,19,31,.92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border3); border-radius:var(--r);
  padding:11px 22px; font-size:13px; color:var(--text);
  z-index:9999; box-shadow:var(--shadow);
  animation:toastIn .3s var(--ease);
  max-width:min(92vw, 460px); white-space:normal; overflow-wrap:anywhere;
  line-height:1.45; text-align:center;
}
@keyframes toastIn {
  from{opacity:0;transform:translateX(-50%) translateY(12px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* ── Badge unlock celebration (full-screen pop + metallic sheen) ── */
/* The backdrop is not flat black with a circle on it. It is a lit room: a
   warm violet pool where the subject stands, falling off to near-black at the
   corners, so the screen has a centre before anything is drawn on it. */
.badge-unlock-overlay, .cb-overlay {
  position:fixed; inset:0; z-index:12000; padding:24px;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(124,111,247,.20) 0%, rgba(80,64,170,.10) 34%, rgba(10,8,18,.90) 72%, rgba(6,5,12,.96) 100%),
    rgba(8,7,14,.86);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  animation:buFade .3s ease both;
}
.badge-unlock-overlay.closing, .cb-overlay.closing { animation:buFadeOut .24s ease both; }

/* THE RAYS. This was a 520px conic gradient with border-radius:50%, which is
   a circle with a hard edge - and a hard-edged disc of flat colour reads as
   clip art no matter what is inside it. The fix is that the shape must have
   no edge at all: it is masked with a radial fade so the light simply stops
   existing before it reaches a boundary, and blurred so the individual
   gradient stops become beams rather than pie slices. It is also far bigger
   than the screen now, because light from off-frame is what makes a space
   feel lit rather than decorated. */
.badge-unlock-rays, .cb-rays {
  position:absolute; width:min(165vmax, 1500px); height:min(165vmax, 1500px);
  border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg,
    rgba(150,134,255,.34) 0deg,  transparent 26deg,
    rgba(196,184,255,.20) 58deg, transparent 92deg,
    rgba(124,111,247,.30) 128deg, transparent 166deg,
    rgba(178,166,255,.16) 198deg, transparent 236deg,
    rgba(140,124,252,.28) 272deg, transparent 310deg,
    rgba(150,134,255,.34) 360deg);
  -webkit-mask-image:radial-gradient(closest-side, rgba(0,0,0,.25) 8%, #000 30%, rgba(0,0,0,.45) 58%, transparent 76%);
  mask-image:radial-gradient(closest-side, rgba(0,0,0,.25) 8%, #000 30%, rgba(0,0,0,.45) 58%, transparent 76%);
  filter:blur(15px);
  will-change:transform;
  animation:buSpin 26s linear infinite, buHits .3s steps(1,end) both;
}
/* A second, slower layer turning the other way. One rotating texture reads as
   a spinning object; two at different speeds read as depth. */
.cb-overlay::before {
  content:''; position:absolute; width:min(120vmax, 1080px); height:min(120vmax, 1080px);
  border-radius:50%; pointer-events:none;
  background:conic-gradient(from 210deg, rgba(120,200,255,.16), transparent 30%, rgba(255,150,220,.12) 55%, transparent 80%, rgba(120,200,255,.16));
  -webkit-mask-image:radial-gradient(closest-side, #000 22%, transparent 70%);
  mask-image:radial-gradient(closest-side, #000 22%, transparent 70%);
  filter:blur(34px); opacity:.85;
  animation:cbSpinBack 38s linear infinite;
}
/* The bloom the character stands in, so he is lit from behind rather than
   pasted on. Sits under the card, above the rays. */
.cb-overlay::after {
  content:''; position:absolute; width:min(70vmin, 520px); height:min(70vmin, 520px);
  border-radius:50%; pointer-events:none; top:50%; left:50%;
  transform:translate(-50%,-58%);
  background:radial-gradient(closest-side, rgba(179,166,255,.30), rgba(124,111,247,.13) 46%, transparent 72%);
  filter:blur(14px);
  animation:cbBloom 4.6s ease-in-out infinite;
}
@keyframes cbSpinBack { to { transform:rotate(-360deg); } }
@keyframes cbBloom { 0%,100% { opacity:.72 } 50% { opacity:1 } }
/* Three big blurred layers rotating at once is a lot of compositing, and our
   users are teenagers on mid-range Androids. On a phone the backdrop keeps
   the lit pool and the bloom - which are what actually carry the look - and
   drops the counter-rotating second layer, which is depth nobody can see at
   that size anyway. */
@media (max-width:560px) {
  .badge-unlock-rays, .cb-rays { width:min(150vmax,900px); height:min(150vmax,900px); filter:blur(18px); }
  .cb-overlay::before { display:none; }
}
/* The two short beats of the fanfare (0ms and 110ms). The medal does not move
   on them - a badge that jumps three times reads as a glitch - so the light
   behind it takes the hits instead, and the medal arrives on the third. */
@keyframes buHits {
  0%   { opacity:.45; }
  18%  { opacity:1; }
  36%  { opacity:.45; }
  55%  { opacity:1; }
  100% { opacity:.75; }
}
.badge-unlock-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.badge-unlock-medal {
  position:relative; width:168px; height:168px; border-radius:50%; overflow:hidden;
  box-shadow:0 12px 44px rgba(124,111,247,.4);
  /* Lands on the LONG note of the fanfare (.22s), not on frame zero. The two
     short hits before it belong to the rays; the medal arrives when the rhythm
     resolves, which is what makes it feel presented rather than displayed. */
  animation:buPop .52s cubic-bezier(.2,1.5,.4,1) .22s both;
}
.badge-unlock-medal > span, .badge-unlock-medal img { width:100% !important; height:100% !important; }
.badge-unlock-sheen {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  /* Sweeps as the chord opens wide (.44s). */
  transform:translateX(-180%); animation:buSheen 1.1s ease-in-out .44s both;
}
.badge-unlock-kicker {
  font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--accent2);
  animation:buRise .5s var(--ease) .56s both;
}
.badge-unlock-name {
  font-family:Georgia,'Times New Roman',serif; font-size:26px; font-weight:800; color:var(--text);
  animation:buRise .5s var(--ease) .66s both;   /* on the Cs6 shimmer */
}
.badge-unlock-btn {
  margin-top:6px; padding:11px 34px; border:none; border-radius:12px; cursor:pointer;
  font-family:var(--font); font-size:15px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#7c6ff7,#b3a6ff); animation:buRise .5s var(--ease) .8s both;
}
@keyframes buFade { from{opacity:0} to{opacity:1} }
@keyframes buFadeOut { to{opacity:0} }
@keyframes buSpin { to{transform:rotate(360deg)} }
@keyframes buPop { 0%{transform:scale(.3) rotate(-14deg);opacity:0} 60%{transform:scale(1.12) rotate(4deg);opacity:1} 100%{transform:scale(1) rotate(0)} }
@keyframes buSheen { 0%{transform:translateX(-180%)} 100%{transform:translateX(180%)} }
@keyframes buRise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── THE CELEBRATION SCREEN ──────────────────────────────────
   Shares the badge overlay's backdrop and rays above; what follows is only
   what differs. The rhythm is the same one the fanfare is cut to: the light
   hits twice, then the subject arrives on the third beat (.22s), then the
   words rise behind it. Ory is the subject here, so unlike the medal he is
   allowed to move on his own after he lands. */
.cb-card { position:relative; display:flex; flex-direction:column; align-items:center;
  gap:10px; text-align:center; max-width:420px; }
.cb-ory { animation:buPop .52s cubic-bezier(.2,1.5,.4,1) .22s both; line-height:0; }
.cb-kicker { font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent2); animation:buRise .5s var(--ease) .56s both; }
.cb-headline { font-size:30px; font-weight:800; color:var(--text); line-height:1.15;
  letter-spacing:-.02em; animation:buRise .5s var(--ease) .64s both; }
.cb-sub { font-size:14.5px; line-height:1.55; color:var(--text2); animation:buRise .5s var(--ease) .72s both; }
.cb-stats { display:flex; gap:10px; margin-top:6px; animation:buRise .5s var(--ease) .78s both; }
.cb-stat { min-width:92px; padding:12px 16px; border-radius:14px; background:rgba(255,255,255,.06);
  border:1px solid var(--border2); display:flex; flex-direction:column; gap:2px; }
.cb-stat b { font-size:24px; font-weight:800; color:var(--text); line-height:1.1; }
.cb-stat span { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); }
.cb-btn { margin-top:12px; padding:13px 40px; border:none; border-radius:13px; cursor:pointer;
  font-family:var(--font); font-size:15.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#7c6ff7,#b3a6ff); animation:buRise .5s var(--ease) .86s both; }
.cb-btn:active { transform:scale(.98); }
@media (max-width:420px) {
  .cb-headline { font-size:25px; }
  .cb-stat { min-width:78px; padding:10px 12px; }
}

/* The mid-session version. It does NOT stop the session: it slides in under
   the top edge, says the number, and leaves on its own. No button, because
   the learner is mid-thought and owes us no input. */
.cb-combo { position:fixed; left:50%; top:14px; transform:translateX(-50%); z-index:11500;
  display:flex; align-items:center; gap:10px; padding:8px 18px 8px 10px; border-radius:999px;
  background:rgba(28,22,48,.94); border:1px solid var(--accent-border);
  box-shadow:0 10px 34px rgba(0,0,0,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  pointer-events:none; animation:cbComboIn .34s cubic-bezier(.2,1.4,.4,1) both; }
.cb-combo.out { animation:cbComboOut .3s ease both; }
.cb-combo-b b { font-size:15px; font-weight:800; color:var(--text); white-space:nowrap; }
@keyframes cbComboIn { from{opacity:0;transform:translate(-50%,-22px) scale(.92)} to{opacity:1;transform:translate(-50%,0) scale(1)} }
@keyframes cbComboOut { to{opacity:0;transform:translate(-50%,-16px) scale(.96)} }
@media (prefers-reduced-motion: reduce) {
  .cb-ory, .cb-kicker, .cb-headline, .cb-sub, .cb-stats, .cb-btn { animation:none !important; }
  .cb-rays, .cb-overlay::before, .cb-overlay::after { animation:none !important; }
  .cb-rays { opacity:.6 !important; }
  .cb-combo, .cb-combo.out { animation:none !important; }
}

/* ── Settings: iOS-style category menu + drill-in sub-pages ── */
.set-menu { display:flex; flex-direction:column; gap:8px; }
.set-row {
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; cursor:pointer; font-family:var(--font);
  transition:background .15s, border-color .15s;
}
.set-row:hover { background:var(--bg4); border-color:var(--border2); }
.set-row:active { transform:scale(.99); }
.set-row-icon {
  width:40px; height:40px; border-radius:11px; background:var(--accent-bg);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
}
.set-row-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.set-row-label { font-size:15px; font-weight:700; color:var(--text); }
.set-row-sub { font-size:12px; color:var(--text3); overflow-wrap:anywhere; }
.set-row-chev { color:var(--text3); font-size:24px; line-height:1; flex-shrink:0; }
.set-subhead { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.set-back {
  background:none; border:none; color:var(--accent2); font-family:var(--font);
  font-size:15px; font-weight:700; cursor:pointer; padding:6px 4px 6px 0; white-space:nowrap;
}
.set-subtitle { font-size:18px; font-weight:800; color:var(--text); }


/* ══════════════════════════════════════════════════════
   HOMEWORK / ANNOUNCEMENTS / LISTS
══════════════════════════════════════════════════════ */

.hw-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; background:var(--bg3);
  border-radius:var(--r); border:1px solid var(--border);
  margin-bottom:8px; transition:all .18s;
}
.hw-item:hover { border-color:var(--border2); }
.hw-item.done { opacity:.4; }

.hw-check {
  width:21px; height:21px; border-radius:6px;
  border:2px solid var(--border3);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .18s; flex-shrink:0; margin-top:1px;
}
.hw-check:hover { border-color:var(--green); }
.hw-check.checked { background:var(--green); border-color:var(--green); color:#fff; font-size:12px; }

.subj-pill {
  display:inline-block; font-size:9.5px; font-weight:700;
  padding:2px 9px; border-radius:20px; margin-bottom:3px;
  letter-spacing:.03em;
}

.announce-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); padding:16px 20px;
  margin-bottom:10px; transition:all .18s; cursor:pointer;
}
.announce-card:hover { border-color:var(--border2); background:var(--bg3); }
.announce-card.urgent { border-left:3px solid var(--red); }
.announce-card.important { border-left:3px solid var(--amber); }

.priority-urgent    { background:var(--red-bg);   color:var(--red);   border:1px solid var(--red-border); }
.priority-important { background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-border); }
.priority-normal    { background:var(--bg4);       color:var(--text2); border:1px solid var(--border2); }


/* ══════════════════════════════════════════════════════
   DASHBOARD STAT CARDS
══════════════════════════════════════════════════════ */

.stat-card {
  border-radius:var(--r2); padding:18px 20px;
  cursor:pointer; transition:all .22s var(--ease);
  background:var(--bg2); border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.stat-card::after {
  content:''; position:absolute; top:-10px; right:-10px;
  width:70px; height:70px; border-radius:50%;
  opacity:.04; transition:opacity .3s;
}
.stat-card:hover { transform:translateY(-3px); }
.stat-card:hover::after { opacity:.08; }

.stat-val { font-size:28px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.stat-label { font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.stat-sub { font-size:11px; margin-top:6px; color:var(--text3); line-height:1.4; }

/* Colour tints */
.stat-card.s-purple { background:linear-gradient(160deg,rgba(124,111,247,.11),rgba(124,111,247,.02)); border-color:var(--accent-border); }
.stat-card.s-purple::after { background:var(--accent); }
.stat-card.s-purple .stat-label { color:var(--accent2); }
.stat-card.s-purple:hover { box-shadow:0 6px 24px rgba(124,111,247,.15); }

.stat-card.s-amber { background:linear-gradient(160deg,rgba(245,184,65,.09),rgba(245,184,65,.02)); border-color:var(--amber-border); }
.stat-card.s-amber::after { background:var(--amber); }
.stat-card.s-amber .stat-label { color:var(--amber); }
.stat-card.s-amber:hover { box-shadow:0 6px 24px rgba(245,184,65,.12); }

.stat-card.s-red { background:linear-gradient(160deg,rgba(244,114,114,.09),rgba(244,114,114,.02)); border-color:var(--red-border); }
.stat-card.s-red::after { background:var(--red); }
.stat-card.s-red .stat-label { color:var(--red); }
.stat-card.s-red:hover { box-shadow:0 6px 24px rgba(244,114,114,.12); }

.stat-card.s-teal { background:linear-gradient(160deg,rgba(47,207,190,.09),rgba(47,207,190,.02)); border-color:var(--teal-border); }
.stat-card.s-teal::after { background:var(--teal); }
.stat-card.s-teal .stat-label { color:var(--teal); }
.stat-card.s-teal .stat-val { font-size:22px; }
.stat-card.s-teal:hover { box-shadow:0 6px 24px rgba(47,207,190,.12); }

.stat-card.s-green { background:linear-gradient(160deg,rgba(52,217,122,.09),rgba(52,217,122,.02)); border-color:var(--green-border); }
.stat-card.s-green::after { background:var(--green); }
.stat-card.s-green .stat-label { color:var(--green); }

.stat-card.s-pink { background:linear-gradient(160deg,rgba(240,107,186,.09),rgba(240,107,186,.02)); border-color:var(--pink-border); }
.stat-card.s-pink::after { background:var(--pink); }
.stat-card.s-pink .stat-label { color:var(--pink); }


/* ══════════════════════════════════════════════════════
   STREAK / NEXT-CLASS / UPCOMING-TEST
══════════════════════════════════════════════════════ */

.streak-card {
  background:linear-gradient(135deg,rgba(124,111,247,.1),rgba(240,107,186,.04));
  border:1px solid var(--accent-border);
  border-radius:var(--r2); padding:20px 24px;
  display:flex; align-items:center; gap:18px;
  margin-bottom:20px;
  position:relative; overflow:hidden;
}
.streak-card::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:100px; height:100px;
  background:radial-gradient(circle,rgba(124,111,247,.08),transparent);
  border-radius:50%;
}
.streak-flame { font-size:34px; line-height:1; flex-shrink:0; }
.streak-num { font-family:var(--font-serif); font-size:36px; line-height:1; color:var(--accent2); margin-right:4px; }
.streak-body { display:flex; align-items:center; gap:14px; }
.streak-title { font-size:15px; font-weight:700; margin-bottom:2px; }
.streak-sub { font-size:12px; color:var(--text2); }

.next-class-card {
  background:linear-gradient(135deg,rgba(52,217,122,.07),rgba(47,207,190,.03));
  border:1px solid var(--green-border); border-radius:var(--r2);
  padding:18px 22px; cursor:pointer; transition:all .22s var(--ease);
}
.next-class-card:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(52,217,122,.1); }

.upcoming-test-card {
  background:linear-gradient(135deg,rgba(245,184,65,.07),rgba(244,114,114,.03));
  border:1px solid var(--amber-border); border-radius:var(--r2);
  padding:18px 22px; cursor:pointer; transition:all .22s var(--ease);
}
.upcoming-test-card:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(245,184,65,.1); }

.dash-label { font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.dash-value { font-family:var(--font-serif); font-size:21px; font-weight:400; margin-bottom:3px; line-height:1.2; }
.dash-detail { font-size:12px; color:var(--text2); line-height:1.5; }
.next-class-card .dash-label { color:var(--green); }
.upcoming-test-card .dash-label { color:var(--amber); }


/* ══════════════════════════════════════════════════════
   CTA / "ALL CAUGHT UP"
══════════════════════════════════════════════════════ */

.caughtup-card {
  background:linear-gradient(135deg,rgba(52,217,122,.06),rgba(47,207,190,.03));
  border:1px solid var(--green-border); border-radius:var(--r2);
  padding:30px 24px; text-align:center; margin-top:16px;
}
.caughtup-icon { font-size:30px; margin-bottom:8px; }
.caughtup-title { font-size:17px; font-weight:700; color:var(--green); margin-bottom:3px; }
.caughtup-sub { font-size:12.5px; color:var(--text2); }


/* ══════════════════════════════════════════════════════
   PARENT LINK
══════════════════════════════════════════════════════ */

.parent-link-card {
  background:linear-gradient(135deg,rgba(240,107,186,.07),rgba(124,111,247,.03));
  border:1px solid var(--pink-border); border-radius:var(--r2);
  padding:20px 24px; margin-bottom:20px;
}
.parent-link-card .pl-title { font-size:15px; font-weight:700; margin-bottom:3px; }
.parent-link-card .pl-sub { font-size:12.5px; color:var(--text2); margin-bottom:14px; }
.parent-link-card .pl-actions { display:flex; gap:8px; }


/* ══════════════════════════════════════════════════════
   ACTIVITY ROWS
══════════════════════════════════════════════════════ */

.activity-row {
  display:flex; align-items:center; gap:14px;
  padding:13px 16px; background:var(--bg3);
  border-radius:var(--r); cursor:pointer;
  transition:all .18s var(--ease);
  border:1px solid transparent; margin-bottom:8px;
}
.activity-row:hover { border-color:var(--border2); background:var(--bg4); }

/* Teacher request cards — responsive layout */
.tch-req-card {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; background:var(--bg3);
  border-radius:var(--r); border:1px solid var(--border);
  margin-bottom:10px; flex-wrap:wrap;
}
.tch-req-info {
  display:flex; align-items:center; gap:12px; flex:1; min-width:0;
}
.tch-req-actions {
  display:flex; gap:8px; flex-shrink:0;
}
@media (max-width:500px) {
  .tch-req-card { gap:10px; }
  .tch-req-actions {
    width:100%; padding-top:8px;
    border-top:1px solid var(--border);
  }
  .tch-req-actions .btn-sm { flex:1; text-align:center; padding:10px; }
}

.activity-icon {
  width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}


/* ══════════════════════════════════════════════════════
   SOLO DASHBOARD
══════════════════════════════════════════════════════ */

/* ── Hero (uses existing design language) ── */
.dash-hero {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(124,111,247,.1),rgba(124,111,247,.02));
  border:1px solid var(--accent-border);
  border-radius:var(--r2); padding:28px 24px 24px;
  margin-bottom:16px;
}
.dash-hero::before {
  content:''; position:absolute; top:-50px; right:-40px;
  width:180px; height:180px;
  background:radial-gradient(circle,rgba(124,111,247,.08),transparent 65%);
  border-radius:50%; pointer-events:none;
}
.dash-hero-greeting {
  font-family:var(--font-serif); font-size:28px; line-height:1.15;
  margin-bottom:6px; position:relative; z-index:1;
}
.dash-hero-sub {
  font-size:13px; color:var(--text2); line-height:1.5;
  max-width:420px; position:relative; z-index:1;
}
.dash-hero-badge {
  position:absolute; top:16px; right:16px; z-index:1;
}
.dash-hero-star {
  position:absolute; bottom:14px; right:20px;
  width:44px; height:44px;
  pointer-events:none; z-index:1;
  /* streak tier class controls glow intensity + opacity */
  animation:starStreakGlow 3.5s ease-in-out infinite;
}

/* ── Streak card ── */
.streak-ring-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); padding:20px;
  display:flex; align-items:center; gap:18px;
  transition:all .22s var(--ease);
}
.streak-ring-card:hover { border-color:var(--border2); }
.streak-ring {
  position:relative; width:72px; height:72px; flex-shrink:0;
}
.streak-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.streak-ring-bg { fill:none; stroke:var(--bg5, #232335); stroke-width:5; }
.streak-ring-fill {
  fill:none; stroke:url(#streakGrad); stroke-width:5;
  stroke-linecap:round; transition:stroke-dashoffset .8s var(--ease);
}
.streak-ring-num {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.streak-ring-val { font-size:22px; font-weight:800; line-height:1; }
.streak-ring-label {
  font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text3); margin-top:2px;
}
.streak-info { flex:1; min-width:0; }
.streak-title { font-size:14px; font-weight:700; margin-bottom:2px; }
.streak-sub { font-size:12px; color:var(--text2); line-height:1.4; }

/* ── Tool nav cards (consistent with stat-card) ── */
.dash-tool {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); padding:18px 16px;
  cursor:pointer; transition:all .22s var(--ease);
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
}
.dash-tool::after {
  content:''; position:absolute; top:-10px; right:-10px;
  width:60px; height:60px; border-radius:50%;
  opacity:0; transition:opacity .25s;
}
.dash-tool:hover { transform:translateY(-3px); }
.dash-tool:hover::after { opacity:.06; }
.dash-tool:active { transform:scale(.97); }

/* Mobile tap glow */
@media (hover:none) {
  .dash-tool:active { background:var(--bg4); border-color:var(--border2); }
  .stat-card:active { background:var(--bg4); }
}

.dash-tool-icon {
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; flex-shrink:0;
  transition:transform .22s var(--ease);
}
.dash-tool:hover .dash-tool-icon { transform:scale(1.08); }
.dash-tool-body { flex:1; min-width:0; }
.dash-tool-name { font-size:13.5px; font-weight:700; }
.dash-tool-desc { font-size:11px; color:var(--text3); }
.dash-tool-arrow { color:var(--text4); font-size:14px; transition:all .22s var(--ease); }
.dash-tool:hover .dash-tool-arrow { color:var(--text2); transform:translateX(3px); }

/* Color tints — the whole tile gets the color */
.dt-purple {
  background:linear-gradient(160deg,rgba(124,111,247,.13),rgba(124,111,247,.03));
  border-color:var(--accent-border);
}
.dt-purple:hover { box-shadow:0 6px 24px rgba(124,111,247,.15); border-color:rgba(124,111,247,.3); }
.dt-purple::after { background:var(--accent); }

.dt-teal {
  background:linear-gradient(160deg,rgba(47,207,190,.11),rgba(47,207,190,.02));
  border-color:var(--teal-border);
}
.dt-teal:hover { box-shadow:0 6px 24px rgba(47,207,190,.12); border-color:rgba(47,207,190,.28); }
.dt-teal::after { background:var(--teal); }

.dt-amber {
  background:linear-gradient(160deg,rgba(245,184,65,.11),rgba(245,184,65,.02));
  border-color:var(--amber-border);
}
.dt-amber:hover { box-shadow:0 6px 24px rgba(245,184,65,.12); border-color:rgba(245,184,65,.28); }
.dt-amber::after { background:var(--amber); }

.dt-green {
  background:linear-gradient(160deg,rgba(52,217,122,.11),rgba(52,217,122,.02));
  border-color:var(--green-border);
}
.dt-green:hover { box-shadow:0 6px 24px rgba(52,217,122,.12); border-color:rgba(52,217,122,.28); }
.dt-green::after { background:var(--green); }

.dt-pink {
  background:linear-gradient(160deg,rgba(240,107,186,.11),rgba(240,107,186,.02));
  border-color:var(--pink-border);
}
.dt-pink:hover { box-shadow:0 6px 24px rgba(240,107,186,.12); border-color:rgba(240,107,186,.28); }
.dt-pink::after { background:var(--pink); }

.dt-red {
  background:linear-gradient(160deg,rgba(244,114,114,.11),rgba(244,114,114,.02));
  border-color:var(--red-border);
}
.dt-red:hover { box-shadow:0 6px 24px rgba(244,114,114,.12); border-color:rgba(244,114,114,.28); }
.dt-red::after { background:var(--red); }

/* ── Section labels ── */
.dash-section-label {
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text3); margin-bottom:10px; padding-left:2px;
}

/* ── Quote banner ── */
.dash-quote {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); padding:16px 20px;
  display:flex; align-items:center; gap:14px;
  margin-bottom:16px;
}
.dash-quote-icon { font-size:20px; flex-shrink:0; }
.dash-quote-text {
  font-family:var(--font-serif); font-size:13.5px; font-weight:400;
  color:var(--text); line-height:1.5; font-style:italic;
}
.dash-quote-attr { font-size:10px; color:var(--text3); margin-top:3px; font-style:normal; }

/* ── CTA banner ── */
.cta-banner {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); padding:18px 20px;
  display:flex; align-items:center; gap:14px;
  cursor:pointer; transition:all .22s var(--ease);
}
.cta-banner:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:0 6px 24px rgba(124,111,247,.08); }
.cta-banner:active { transform:scale(.98); }
.cta-banner-icon { font-size:24px; flex-shrink:0; }
.cta-banner-body { flex:1; }
.cta-banner-title { font-size:13px; font-weight:700; margin-bottom:1px; }
.cta-banner-sub { font-size:11.5px; color:var(--text3); line-height:1.4; }
.cta-banner-btn {
  padding:7px 16px; border-radius:var(--r); font-size:11px; font-weight:700;
  background:var(--accent); color:#fff; border:none; white-space:nowrap;
  transition:all .2s var(--ease);
}
.cta-banner-btn:hover { background:var(--accent2); }


/* ══════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════ */

.tabs {
  display:flex; gap:3px; background:var(--bg3);
  padding:3px; border-radius:12px; margin-bottom:20px;
  border:1px solid var(--border);
}
.tab {
  flex:1; padding:8px 12px; border-radius:9px;
  font-size:12.5px; font-weight:500; color:var(--text3);
  cursor:pointer; transition:all .2s var(--ease);
  text-align:center; background:none; border:none; font-family:var(--font);
}
.tab:hover { color:var(--text2); }
.tab.active { background:var(--bg2); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.3); font-weight:600; }


/* ══════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
══════════════════════════════════════════════════════ */

#more-menu, .more-menu { display:none!important; }

#mobile-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:rgba(13,13,22,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:6px 0 env(safe-area-inset-bottom, 6px);
}
#mnav-inner {
  display:flex; justify-content:space-around; align-items:center;
  max-width:400px; margin:0 auto; padding:0 8px;
}
.mnav-btn {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; color:var(--text3);
  font-family:var(--font); font-size:10px; font-weight:600;
  padding:6px 12px; border-radius:10px; cursor:pointer;
  transition:color .15s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
/* The active tab is a lit pill, the same material as the panel's active world,
   so the two navigations look like one system rather than two that happen to
   agree on labels. */
.mnav-btn.active {
  color:var(--text);
  background:linear-gradient(140deg, rgba(124,111,247,.24), rgba(124,111,247,.08));
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset;
}
.mnav-btn.active .nav-ico { color:var(--accent2); }
.mnav-btn:active { background:rgba(255,255,255,.05); }
.mnav-btn .nav-ico { width:20px; height:20px; opacity:.95; }
.mnav-label { letter-spacing:.2px; }


/* ══════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════ */

.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  z-index:700; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:20px; animation:overlayIn .2s ease;
}
@keyframes overlayIn { from{opacity:0} to{opacity:1} }

.modal {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--r2); padding:28px 30px;
  width:460px; max-width:100%;
  box-shadow:var(--shadow);
  animation:modalIn .25s var(--ease);
}
@keyframes modalIn {
  from{opacity:0;transform:scale(.96) translateY(8px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.modal-title { font-size:17px; font-weight:700; margin-bottom:6px; }
.modal-sub { font-size:13px; color:var(--text2); margin-bottom:20px; line-height:1.6; }


/* ══════════════════════════════════════════════════════
   RESPONSIVE — DESKTOP (> 1024px)
   Full sidebar, all columns
══════════════════════════════════════════════════════ */

@media (min-width:1025px) {
  .greeting { font-size:36px; }
  .page { padding:30px 34px; }   /* desktop gutter; --page-pad stays the phone value the carousel negates */
}


/* Tablet visual overrides — layout (sidebar-w, nav) is in layout.css */
@media (max-width:1024px) and (min-width:581px) {
  .greeting { font-size:30px; }
  .grid-4 { grid-template-columns:1fr 1fr; }
}

@media (max-width:820px) and (min-width:581px) {
  .grid-3 { grid-template-columns:1fr 1fr; }
}


/* ══════════════════════════════════════════════════════
   RESPONSIVE — PHONE (< 580px)
   Sidebar hidden, bottom nav visible
══════════════════════════════════════════════════════ */

/* Phone visual overrides — layout (sidebar, grids, nav) is in layout.css */
@media (max-width:580px) {
  .greeting { font-size:26px; }
  .greeting-sub { margin-bottom:16px; font-size:12px; }

  .section-header { margin-bottom:14px; }
  .section-title { font-size:14px; }

  .stat-val { font-size:24px; }
  .stat-label { font-size:9px; margin-bottom:6px; }

  .streak-card { padding:16px 18px; gap:14px; border-radius:var(--r); }
  .streak-flame { font-size:28px; }
  .streak-num { font-size:30px; }
  .dash-value { font-size:18px; }

  .activity-row { padding:11px 14px; gap:12px; }
  .activity-icon { width:36px; height:36px; border-radius:10px; font-size:16px; }

  .auth-box { padding:28px 22px; border-radius:var(--r); }

  .badge { font-size:9.5px; padding:2px 8px; }
}

/* Extra small phones (iPhone SE etc.) */
@media (max-width:380px) {
  .grid-2, .grid-4 { grid-template-columns:1fr; gap:8px; }
  .greeting { font-size:23px; }
  .auth-box { padding:24px 18px; }
  .streak-card { flex-direction:column; align-items:flex-start; gap:10px; }
}


/* ══════════════════════════════════════════════════════
   PRODUCTION PATCHES
══════════════════════════════════════════════════════ */

[hidden] { display:none!important; }


#notif-badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--red); color:#fff;
  font-size:10px; font-weight:700; border-radius:20px;
  padding:1px 5px; border:2px solid var(--bg);
}

#notif-panel, #reminder-panel {
  position:fixed; top:64px; right:20px;
  width:min(360px,calc(100vw - 32px));
  max-height:70vh; overflow:auto;
  background:var(--bg2);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border2); border-radius:var(--r2);
  box-shadow:var(--shadow); z-index:500; padding:14px;
}

#auth:not([hidden]) { display:flex; flex-direction:column; align-items:center; }
#app.visible:not([hidden]) { display:flex; }

button:focus-visible,
.input:focus-visible,
.nav-item:focus-visible,
.mnav-btn:focus-visible {
  outline:2px solid var(--accent2);
  outline-offset:2px;
}

/* Mobile notif panel */
@media (max-width:580px) {
  #notif-panel, #reminder-panel {
    top:auto; bottom:16px; right:10px; left:10px;
    width:auto; max-height:70vh;
  }
}

/* ── Solo Dashboard mobile ── */
@media (max-width:580px) {
  .dash-hero { padding:22px 18px 20px; border-radius:var(--r); }
  .dash-hero-greeting { font-size:24px; }
  .dash-hero-sub { font-size:12px; }
  .dash-hero-star { width:36px; height:36px; bottom:12px; right:14px; }

  .streak-ring-card { padding:16px; gap:14px; }
  .streak-ring { width:60px; height:60px; }
  .streak-ring-val { font-size:18px; }
  .streak-title { font-size:13px; }
  .streak-sub { font-size:11px; }

  .dash-tool { padding:14px; gap:12px; border-radius:var(--r); }
  .dash-tool-icon { width:38px; height:38px; border-radius:10px; font-size:17px; }
  .dash-tool-name { font-size:13px; }

  .dash-quote { padding:14px 16px; gap:10px; border-radius:var(--r); }
  .dash-quote-text { font-size:12.5px; }

  .cta-banner { padding:14px 16px; gap:10px; border-radius:var(--r); }
  .dash-section-label { font-size:9px; margin-bottom:8px; }
}


/* ══════════════════════════════════════════════════════
   FLASHCARDS — SPACED REPETITION UI
══════════════════════════════════════════════════════ */

.fc-page { max-width:820px; }

.fc-gen-status {
  font-size:12.5px; color:var(--accent2); margin-bottom:14px;
  padding:10px 16px; background:var(--accent-bg); border:1px solid var(--accent-border);
  border-radius:var(--r); animation:fcPulse 1.6s ease-in-out infinite;
}
@keyframes fcPulse { 0%,100%{opacity:1} 50%{opacity:.55} }

.fc-spinner {
  display:inline-block; width:14px; height:14px; margin-right:6px;
  border:2px solid rgba(255,255,255,.2); border-top-color:#fff;
  border-radius:50%; animation:spin .6s linear infinite; vertical-align:middle;
}

/* Stats Grid */
.fc-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }

.fc-stat {
  border-radius:var(--r2); padding:20px 16px; text-align:center;
  border:1px solid var(--border); transition:all .22s var(--ease);
  position:relative; overflow:hidden;
}
.fc-stat::after {
  content:''; position:absolute; top:-14px; right:-14px;
  width:60px; height:60px; border-radius:50%; opacity:.04; transition:opacity .3s;
}
.fc-stat:hover { transform:translateY(-2px); }
.fc-stat:hover::after { opacity:.08; }

.fc-stat-val { font-family:var(--font-serif); font-size:30px; line-height:1; margin-bottom:6px; }
.fc-stat-label { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); }

.fc-stat.s-purple { background:linear-gradient(160deg,rgba(124,111,247,.1),rgba(124,111,247,.02)); border-color:var(--accent-border); }
.fc-stat.s-purple .fc-stat-val { color:var(--accent2); }
.fc-stat.s-purple::after { background:var(--accent); }
.fc-stat.s-amber { background:linear-gradient(160deg,rgba(245,184,65,.08),rgba(245,184,65,.02)); border-color:var(--amber-border); }
.fc-stat.s-amber .fc-stat-val { color:var(--amber); }
.fc-stat.s-amber::after { background:var(--amber); }
.fc-stat.s-teal { background:linear-gradient(160deg,rgba(47,207,190,.08),rgba(47,207,190,.02)); border-color:var(--teal-border); }
.fc-stat.s-teal .fc-stat-val { color:var(--teal); }
.fc-stat.s-teal::after { background:var(--teal); }
.fc-stat.s-green { background:linear-gradient(160deg,rgba(52,217,122,.08),rgba(52,217,122,.02)); border-color:var(--green-border); }
.fc-stat.s-green .fc-stat-val { color:var(--green); }
.fc-stat.s-green::after { background:var(--green); }

/* Ready Card */
.fc-ready-card {
  display:flex; align-items:center; gap:18px;
  padding:22px 26px; border-radius:var(--r2); margin-bottom:16px;
  background:linear-gradient(135deg,rgba(124,111,247,.1),rgba(240,107,186,.04));
  border:1px solid var(--accent-border);
}
.fc-ready-card.fc-caught-up {
  background:linear-gradient(135deg,rgba(52,217,122,.06),rgba(47,207,190,.03));
  border-color:var(--green-border);
}
.fc-ready-icon { font-size:34px; flex-shrink:0; }
.fc-ready-body { flex:1; }
.fc-ready-title { font-size:16px; font-weight:700; margin-bottom:3px; }
.fc-ready-sub { font-size:12.5px; color:var(--text2); line-height:1.5; }
.fc-start-btn { flex-shrink:0; padding:11px 28px!important; font-size:13px!important; }

/* Mastery */
.fc-mastery-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); padding:22px 24px; }
.fc-mastery-title { font-size:14px; font-weight:700; margin-bottom:14px; }
.fc-mastery-bar { display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--bg4); margin-bottom:14px; }
.fc-bar-fill { height:100%; transition:width .8s var(--ease); min-width:0; }
.fc-bar-mastered { background:var(--green); }
.fc-bar-learning { background:var(--amber); }
.fc-bar-new { background:var(--accent); }
.fc-mastery-legend { display:flex; gap:20px; font-size:12px; color:var(--text2); }
.fc-legend-item { display:flex; align-items:center; gap:6px; }
.fc-dot { width:8px; height:8px; border-radius:50%; }
.fc-dot-mastered { background:var(--green); }
.fc-dot-learning { background:var(--amber); }
.fc-dot-new { background:var(--accent); }

/* ── Session ── */

.fc-session {
  max-width:640px; margin:0 auto;
  display:flex; flex-direction:column;
  min-height:calc(100vh - var(--topbar-h) - 80px);
}
.fc-session-top {
  display:flex; align-items:center; gap:14px; margin-bottom:36px;
}
.fc-progress-wrap { flex:1; display:flex; align-items:center; gap:10px; }
.fc-progress-bar { flex:1; height:8px; background:var(--bg4); border-radius:4px; overflow:hidden; }
.fc-progress-fill {
  height:100%; border-radius:4px; transition:width .5s var(--ease);
  background:linear-gradient(90deg,var(--accent),#a89eff);
}
.fc-progress-label { font-size:12px; font-weight:600; color:var(--text3); min-width:36px; }
.fc-session-meta { display:flex; gap:12px; font-size:13px; font-weight:700; }
.fc-streak-badge { color:var(--text3); transition:color .3s, transform .3s; }
.fc-streak-badge.on-fire { color:var(--amber); animation:fcFirePop .4s var(--ease); }
@keyframes fcFirePop { 0%{transform:scale(1)} 50%{transform:scale(1.25)} 100%{transform:scale(1)} }
.fc-xp-badge { color:var(--accent2); position:relative; display:inline-block; }
.fc-xp-badge.gained { animation:fcXpPop .45s var(--ease-pop) both; }
/* The delta floats off the badge and fades. It is deliberately absolute and
   pointer-events-free so a number drifting upward can never shift the layout
   or eat a tap on its way out. */
.fc-xp-delta {
  position:absolute; left:50%; top:-2px; transform:translateX(-50%);
  font-size:11px; font-weight:800; color:var(--green); pointer-events:none;
  white-space:nowrap; animation:fcXpFloat .9s var(--ease) both;
}
@keyframes fcXpPop { 0%{transform:scale(1)} 35%{transform:scale(1.3)} 100%{transform:scale(1)} }
@keyframes fcXpFloat {
  0%   { opacity:0; transform:translate(-50%, 4px); }
  20%  { opacity:1; transform:translate(-50%, -6px); }
  70%  { opacity:1; transform:translate(-50%, -14px); }
  100% { opacity:0; transform:translate(-50%, -20px); }
}
@media (prefers-reduced-motion: reduce) {
  .fc-xp-badge.gained { animation:none !important; }
  .fc-xp-delta { display:none; }
}
.fc-close-btn {
  width:32px; height:32px; border-radius:8px;
  background:var(--bg3); border:1px solid var(--border); color:var(--text3);
  font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.fc-close-btn:hover { background:var(--bg4); color:var(--text); }

/* Card */
.fc-card-area { flex:1; display:flex; flex-direction:column; gap:24px; }

.fc-card {
  background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r2);
  padding:36px 30px; text-align:center;
}
.fc-card-enter { animation:fcSlideIn .35s var(--ease); }
@keyframes fcSlideIn {
  from { opacity:0; transform:translateY(18px); }
  to { opacity:1; transform:translateY(0); }
}
.fc-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.fc-type-badge { font-size:11px; font-weight:600; color:var(--text3); }
.fc-diff-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.fc-question { font-size:19px; font-weight:600; line-height:1.65; color:var(--text); margin-bottom:16px; }
.fc-source-tag { font-size:11px; color:var(--text4); }

/* Answer Area */
.fc-answer-area { animation:fcSlideIn .3s var(--ease) .08s both; }

/* MCQ */
.fc-mcq-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fc-mcq-btn {
  padding:16px 18px; border-radius:var(--r);
  background:var(--bg2); border:1.5px solid var(--border2);
  color:var(--text); font-size:13.5px; font-weight:500; line-height:1.5;
  text-align:left; cursor:pointer; transition:all .18s var(--ease); font-family:var(--font);
}
.fc-mcq-btn:hover {
  border-color:var(--accent); background:rgba(124,111,247,.06);
  transform:translateY(-1px); box-shadow:0 4px 16px rgba(124,111,247,.12);
}
.fc-mcq-btn:active { transform:translateY(0); }

/* True / False */
.fc-tf-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fc-tf-btn {
  padding:20px; border-radius:var(--r); font-size:16px; font-weight:700;
  cursor:pointer; transition:all .18s var(--ease); border:1.5px solid; font-family:var(--font);
}
.fc-tf-true { background:rgba(52,217,122,.06); border-color:var(--green-border); color:var(--green); }
.fc-tf-true:hover { background:rgba(52,217,122,.14); transform:translateY(-2px); box-shadow:0 4px 16px rgba(52,217,122,.15); }
.fc-tf-false { background:rgba(244,114,114,.06); border-color:var(--red-border); color:var(--red); }
.fc-tf-false:hover { background:rgba(244,114,114,.14); transform:translateY(-2px); box-shadow:0 4px 16px rgba(244,114,114,.15); }

/* Type Answer */
.fc-type-row { display:flex; gap:10px; }
.fc-type-input {
  flex:1; padding:14px 18px; border-radius:var(--r);
  background:var(--bg3); border:1.5px solid var(--border2);
  color:var(--text); font-size:14px; font-family:var(--font);
}
.fc-type-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,111,247,.1); outline:none; }
.fc-type-input::placeholder { color:var(--text4); }

/* Flip */
.fc-flip-prompt { font-size:12px; color:var(--text3); text-align:center; margin-bottom:12px; }
.fc-flip-btn {
  display:block; width:100%; padding:16px; border-radius:var(--r);
  background:var(--bg3); border:1.5px dashed var(--border3);
  color:var(--accent2); font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s; font-family:var(--font);
}
.fc-flip-btn:hover { background:rgba(124,111,247,.06); border-color:var(--accent); }
.fc-flip-answer {
  background:var(--bg3); border:1px solid var(--border2); border-radius:var(--r);
  padding:22px; margin-bottom:16px; animation:fcSlideIn .25s var(--ease);
}
.fc-flip-answer-text { font-size:14px; line-height:1.7; color:var(--text); text-align:left; }

/* Self-Rate */
.fc-rate-label { font-size:12px; color:var(--text3); text-align:center; margin-bottom:10px; }
.fc-rate-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.fc-rate-btn {
  padding:12px 6px; border-radius:10px; font-size:12px; font-weight:700;
  cursor:pointer; transition:all .18s var(--ease);
  border:1.5px solid; font-family:var(--font);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.fc-rate-btn span { font-size:20px; }
.fc-rate-again { background:rgba(244,114,114,.06); border-color:var(--red-border); color:var(--red); }
.fc-rate-again:hover { background:rgba(244,114,114,.14); transform:translateY(-2px); }
.fc-rate-hard { background:rgba(245,184,65,.06); border-color:var(--amber-border); color:var(--amber); }
.fc-rate-hard:hover { background:rgba(245,184,65,.14); transform:translateY(-2px); }
.fc-rate-good { background:rgba(52,217,122,.06); border-color:var(--green-border); color:var(--green); }
.fc-rate-good:hover { background:rgba(52,217,122,.14); transform:translateY(-2px); }
.fc-rate-easy { background:rgba(47,207,190,.06); border-color:var(--teal-border); color:var(--teal); }
.fc-rate-easy:hover { background:rgba(47,207,190,.14); transform:translateY(-2px); }

/* Feedback

   This is the moment a learner hits hundreds of times in a session, so it is
   the one worth staging. It used to arrive as a single div sliding up, which
   reads as "the screen updated" rather than "the app responded". Now the panel
   lands first and its contents follow a few frames apart: icon, verdict,
   answer, reward. The gaps are small enough that nobody counts them and large
   enough that the eye follows a path instead of absorbing a block.

   Tone is carried by the CURVE, not the timing. A correct answer overshoots
   and settles (--ease-pop) because being right should feel like a small
   physical event. A wrong answer must not bounce cheerfully at someone who
   just got it wrong - it arrives flat and shakes once. Identical duration,
   opposite feeling. That asymmetry is the whole point; if both used the same
   curve the app would be congratulating people for being wrong. */
.fc-feedback {
  border-radius:var(--r2); padding:36px 28px;
  animation:fcSlideIn .22s var(--ease) both;
}

/* `both` fill-mode on every staged child matters more than it looks: without
   it the element paints in its final state for the length of its own delay,
   flashes, and then animates from the start. The stagger would be invisible
   and the panel would look broken. */
.fc-feedback-icon,
.fc-feedback-title,
.fc-feedback-sub,
.fc-feedback-yours,
.fc-feedback-fullans,
.fc-feedback-correct-ans,
.fc-feedback-missing,
.fc-feedback-answer,
.fc-feedback-tip,
.fc-feedback .fc-continue-btn,
.fc-feedback .fc-badcard-btn,
.fc-feedback .fc-selfmark { animation:fcRise .26s var(--ease) both; }

.fc-feedback-title,
.fc-feedback-sub          { animation-delay:.09s; }
.fc-feedback-yours,
.fc-feedback-fullans,
.fc-feedback-correct-ans,
.fc-feedback-missing,
.fc-feedback-answer       { animation-delay:.15s; }
.fc-feedback-tip          { animation-delay:.2s; }
.fc-feedback .fc-selfmark     { animation-delay:.22s; }
.fc-feedback .fc-continue-btn { animation-delay:.24s; }
/* Last, and quietest. "Bad card?" is an escape hatch, not an invitation - it
   should be findable by anyone looking for it and invisible to anyone who
   isn't. Arriving after everything else is how it stays out of the way. */
.fc-feedback .fc-badcard-btn  { animation-delay:.32s; }

/* The icon is the verdict. It gets its own curve per outcome. */
/* The icon slot used to pop on a right answer and shake on a wrong one,
   because it held an emoji and an emoji cannot move itself. It holds Ory now,
   and he jumps or shrugs under his own power - a shake wrapped around a shrug
   is two animations disagreeing. The slot just rises and lets him act. */
.fc-feedback-correct .fc-feedback-icon,
.fc-feedback-incorrect .fc-feedback-icon,
.fc-feedback-partial .fc-feedback-icon {
  animation:fcRise .3s var(--ease) .04s both;
}
/* the slot is still sized for a 40px emoji in the marker-failed case, so keep
   its line box from adding a descender under him */
.fc-feedback-icon .ory { vertical-align:middle; }
/* the complete screen's centrepiece, where the brand star used to be */
.fc-complete-ory { display:flex; justify-content:center; margin:0 auto 6px; line-height:0; }
.mh-result-ory, .pq-bolt .ory { display:flex; justify-content:center; margin:0 auto 4px; line-height:0; }
.pq-bolt { display:flex; justify-content:center; }

/* ── ORY IN THE EMPTY STATES ─────────────────────────────────────
   He goes where the emptiness is YOURS - an empty shelf, no sources, no
   friends, nothing due - and not on the "tap to generate" panels, where the
   tool's own icon says more than a character would and twelve identical Orys
   would just be wallpaper.

   Every slot below was built to hold a big emoji, so it is sized in font-size
   and sometimes drawn as a tinted tile. Where an .ory is inside one now, that
   sizing has to stop applying: an element does not care about font-size, but
   the line box it sits in still reserves room for a descender. */
.src-empty2-art:has(.ory), .fr-welcome-art:has(.ory), .sh-empty-art:has(.ory),
.hw2-clear > div:has(.ory), .fc-empty-icon:has(.ory), .fc2-empty-art:has(.ory),
.nb-empty-icon:has(.ory), .rc-done-emoji:has(.ory) {
  display:flex; align-items:center; justify-content:center;
  font-size:0; line-height:0; margin:0 auto 6px; padding:0;
  width:auto; height:auto; background:none; border:none; box-shadow:none;
}

/* noNotesHTML() had no class at all - it was one long inline style, which is
   why nothing about it could ever be themed. This is that layout, named. */
.oe-notes { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:48px 24px; text-align:center; flex:1; }
.oe-art { line-height:0; }

@keyframes fcRise {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}

/* Reduced motion: the staging is decoration, the information is not. Kill the
   movement, keep every element visible - `both` fill-mode would otherwise
   leave them stuck at opacity:0 forever. */
@media (prefers-reduced-motion: reduce) {
  .fc-feedback, .fc-feedback-icon, .fc-feedback-title, .fc-feedback-sub,
  .fc-feedback-yours, .fc-feedback-fullans, .fc-feedback-correct-ans,
  .fc-feedback-missing, .fc-feedback-answer, .fc-feedback-tip,
  .fc-feedback .fc-continue-btn, .fc-feedback .fc-badcard-btn,
  .fc-feedback .fc-selfmark, .fc-streak-bonus {
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}
.fc-feedback-correct {
  background:linear-gradient(160deg,rgba(52,217,122,.1),rgba(52,217,122,.02));
  border:1px solid var(--green-border);
}
.fc-feedback-incorrect {
  background:linear-gradient(160deg,rgba(244,114,114,.1),rgba(244,114,114,.02));
  border:1px solid var(--red-border);
}
.fc-feedback-header { display:flex; align-items:center; gap:14px; margin-bottom:18px; justify-content:center; }
.fc-feedback-icon { font-size:40px; }
.fc-feedback-title { font-size:22px; font-weight:800; }
.fc-feedback-correct .fc-feedback-title { color:var(--green); }
.fc-feedback-incorrect .fc-feedback-title { color:var(--red); }
.fc-feedback-yours { font-size:12px; color:var(--text3); margin-bottom:10px; text-align:center; }
.fc-feedback-answer {
  font-size:14px; line-height:1.7; color:var(--text2); margin-bottom:18px;
  text-align:center; max-width:480px; margin-left:auto; margin-right:auto;
  background:var(--bg3); border-radius:var(--r); padding:14px 18px;
}
.fc-feedback-tip { font-size:12px; color:var(--amber); text-align:center; margin-bottom:14px; }
/* Lands last, and deliberately late. The bonus is a reward, and a reward that
   arrives simultaneously with the verdict is just more text in the same box.
   Arriving after the eye has settled on "Correct!" makes it a second event. */
.fc-streak-bonus {
  font-size:13px; font-weight:700; color:var(--amber);
  animation:fcPop .42s var(--ease-pop) .3s both;
}
@keyframes fcPop { 0%{transform:scale(.8);opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
.fc-continue-btn { display:block; margin:0 auto; padding:12px 36px!important; font-size:14px!important; }

/* Session Complete */
.fc-complete { text-align:center; padding:48px 20px; animation:fcSlideIn .4s var(--ease); }
.fc-complete-icon { font-size:60px; margin-bottom:18px; }
.fc-complete-title { font-family:var(--font-serif); font-size:30px; margin-bottom:6px; }
.fc-complete-sub { font-size:13px; color:var(--text2); margin-bottom:36px; line-height:1.5; }

.fc-complete-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px; }
.fc-complete-stat {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:20px 12px;
}
.fc-cstat-val { font-family:var(--font-serif); font-size:24px; margin-bottom:4px; }
.fc-cstat-label { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); }

.fc-complete-breakdown {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  padding:16px 20px; margin-bottom:28px; max-width:340px; margin-left:auto; margin-right:auto;
}
.fc-complete-row {
  display:flex; justify-content:space-between; padding:9px 0;
  font-size:13px; color:var(--text2); border-bottom:1px solid var(--border);
}
.fc-complete-row:last-child { border-bottom:none; }
.fc-row-correct { color:var(--green); }
.fc-row-incorrect { color:var(--red); }

.fc-complete-actions { display:flex; gap:10px; justify-content:center; }

/* Repair */
.fc-repair-section { margin-top:20px; padding:16px; background:var(--bg3); border:1px solid var(--border); border-radius:14px; }
.fc-repair-title { font-size:14px; font-weight:800; color:var(--red); margin-bottom:12px; }
.fc-repair-list { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.fc-repair-item { padding:10px 12px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; }
.fc-repair-concept { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.fc-repair-detail { font-size:11px; color:var(--text3); line-height:1.6; }
.fc-repair-wrong { color:var(--red); font-weight:600; }
.fc-repair-expected { color:var(--green); font-weight:600; margin-left:8px; }
.fc-repair-btn { width:100%; margin-top:4px; }

/* Empty */
.fc-empty { text-align:center; padding:64px 20px; color:var(--text3); }
.fc-empty-icon { font-size:52px; margin-bottom:18px; opacity:.5; }
.fc-empty-title { font-size:16px; font-weight:700; color:var(--text2); margin-bottom:8px; }
.fc-empty-sub { font-size:13px; line-height:1.6; max-width:360px; margin:0 auto; }

/* Mobile */
@media (max-width:580px) {
  .fc-stats-grid { grid-template-columns:repeat(2,1fr); }
  .fc-complete-stats { grid-template-columns:repeat(2,1fr); }
  .fc-mcq-grid { grid-template-columns:1fr; }
  .fc-question { font-size:16px; }
  .fc-card { padding:28px 20px; }
  .fc-session-meta { gap:8px; font-size:12px; }
  .fc-ready-card { flex-direction:column; text-align:center; gap:14px; }
  .fc-start-btn { width:100%; }
  .fc-rate-btn span { font-size:16px; }
  .fc-rate-btn { padding:10px 4px; font-size:11px; }
  .fc-manual-grid { grid-template-columns:1fr !important; }
  .fc-manual-form { padding:20px 16px !important; }
  .fc-deck-item { flex-wrap:wrap; }
}

/* ════════════════════════════════════════════════════════════
   ACTIVE RECALL
════════════════════════════════════════════════════════════ */

.rc-page {
  display:flex; flex-direction:column; gap:20px;
  max-width:680px; margin:0 auto; padding:0 4px;
}

/* Top bar */
.rc-top-bar {
  display:flex; align-items:center; gap:14px;
  padding:6px 0; position:sticky; top:0;
  z-index:10;
}
.rc-progress-wrap { flex:1; display:flex; align-items:center; gap:10px; }
.rc-progress-bar {
  flex:1; height:6px; background:var(--bg4); border-radius:99px; overflow:hidden;
}
.rc-progress-fill {
  height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius:99px; transition:width .4s var(--ease);
}
.rc-progress-label { font-size:12px; font-weight:700; color:var(--text3); min-width:38px; text-align:right; }

.rc-score-pills { display:flex; gap:6px; }
.rc-pill {
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:99px;
  text-transform:uppercase; letter-spacing:.3px;
}
.rc-pill-green { background:var(--green-bg); color:var(--green); border:1px solid var(--green-border); }
.rc-pill-amber { background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-border); }
.rc-pill-red { background:var(--red-bg); color:var(--red); border:1px solid var(--red-border); }

.rc-top-actions { display:flex; gap:6px; }
.rc-icon-btn {
  width:34px; height:34px; border-radius:10px; border:1px solid var(--border2);
  background:var(--bg3); color:var(--text2); font-size:16px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .2s;
}
.rc-icon-btn:hover { background:var(--bg4); color:var(--text); border-color:var(--border3); }

/* Card */
.rc-card {
  background:var(--bg3); border:1px solid var(--border2); border-radius:20px;
  padding:32px 28px; position:relative; overflow:hidden;
}
.rc-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), #e879f9);
}
.rc-card-enter { animation:rcSlideIn .35s var(--ease); }

@keyframes rcSlideIn {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:translateY(0); }
}

.rc-card-badge {
  font-size:10px; font-weight:800; letter-spacing:1.2px; color:var(--accent2);
  text-transform:uppercase; margin-bottom:20px;
}

.rc-prompt {
  font-size:20px; font-weight:700; line-height:1.6; color:var(--text);
  margin-bottom:16px;
}

.rc-source-tag {
  font-size:11px; color:var(--text3); font-weight:500;
  padding:4px 10px; background:var(--bg4); border-radius:6px;
  display:inline-block;
}

/* Answer zone */
.rc-answer-zone {
  display:flex; flex-direction:column; gap:16px;
}

.rc-think-prompt {
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; background:var(--bg3); border:1px solid var(--border);
  border-radius:14px;
}
.rc-think-icon { font-size:24px; }
.rc-think-text { font-size:13px; color:var(--text2); font-style:italic; }

.rc-reveal-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:16px; border-radius:14px;
  background:linear-gradient(135deg, var(--accent), #9b87f5);
  color:white; font-size:15px; font-weight:700; border:none; cursor:pointer;
  transition:all .25s;
  box-shadow:0 4px 20px var(--accent-glow);
}
.rc-reveal-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px var(--accent-glow);
}
.rc-reveal-btn:active { transform:translateY(0); }
.rc-reveal-icon { font-size:18px; }

/* Answer card */
.rc-answer-card {
  background:var(--bg3); border:1px solid var(--border2); border-radius:16px;
  padding:24px; animation:rcSlideIn .3s var(--ease);
}
.rc-answer-label {
  font-size:10px; font-weight:800; letter-spacing:1.2px; color:var(--green);
  text-transform:uppercase; margin-bottom:14px;
}
.rc-answer-text {
  font-size:15px; line-height:1.75; color:var(--text);
}

.rc-tip {
  display:flex; align-items:flex-start; gap:8px;
  margin-top:16px; padding:12px 14px; border-radius:10px;
  background:var(--accent-bg); border:1px solid var(--accent-border);
  font-size:12px; color:var(--accent2); line-height:1.6;
}
.rc-tip-icon { font-size:14px; flex-shrink:0; margin-top:1px; }

/* Rating */
.rc-rate-section { animation:rcSlideIn .3s var(--ease) .1s both; }
.rc-rate-label {
  font-size:12px; font-weight:700; color:var(--text3);
  text-align:center; margin-bottom:12px; text-transform:uppercase;
  letter-spacing:.5px;
}
.rc-rate-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

.rc-rate-btn {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:18px 12px; border-radius:14px; border:1px solid var(--border2);
  background:var(--bg3); cursor:pointer; transition:all .2s;
}
.rc-rate-emoji { font-size:26px; }
.rc-rate-text { font-size:12px; font-weight:700; color:var(--text2); }

.rc-rate-knew:hover { background:var(--green-bg); border-color:var(--green-border); }
.rc-rate-knew:hover .rc-rate-text { color:var(--green); }
.rc-rate-partial:hover { background:var(--amber-bg); border-color:var(--amber-border); }
.rc-rate-partial:hover .rc-rate-text { color:var(--amber); }
.rc-rate-forgot:hover { background:var(--red-bg); border-color:var(--red-border); }
.rc-rate-forgot:hover .rc-rate-text { color:var(--red); }

/* Next button */
.rc-next-wrap { display:flex; justify-content:center; animation:rcSlideIn .3s var(--ease); }
.rc-next-btn {
  display:flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:12px;
  background:var(--bg4); border:1px solid var(--border2);
  color:var(--text); font-size:14px; font-weight:700;
  cursor:pointer; transition:all .2s;
}
.rc-next-btn:hover { background:var(--bg5); border-color:var(--border3); }
.rc-next-arrow { font-size:16px; transition:transform .2s; }
.rc-next-btn:hover .rc-next-arrow { transform:translateX(3px); }

/* Loading */
.rc-loading {
  display:flex; flex-direction:column; align-items:center;
  padding:80px 20px; text-align:center;
}
.rc-loading-icon {
  position:relative; font-size:48px; margin-bottom:24px;
}
.rc-pulse {
  position:absolute; inset:-12px; border-radius:50%;
  background:var(--accent-glow);
  animation:rcPulseAnim 2s ease-in-out infinite;
}
@keyframes rcPulseAnim {
  0%, 100% { transform:scale(.8); opacity:.3; }
  50% { transform:scale(1.2); opacity:.6; }
}
.rc-loading-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:8px; }
.rc-loading-sub { font-size:13px; color:var(--text3); max-width:320px; }

/* Empty */
.rc-empty {
  text-align:center; padding:80px 20px; color:var(--text3);
}
.rc-empty-icon { font-size:52px; margin-bottom:18px; opacity:.5; }
.rc-empty-title { font-size:16px; font-weight:700; color:var(--text2); margin-bottom:8px; }
.rc-empty-sub { font-size:13px; line-height:1.6; max-width:360px; margin:0 auto; }

/* Mobile */
@media (max-width:580px) {
  .rc-card { padding:24px 18px; }
  .rc-prompt { font-size:17px; }
  .rc-rate-row { gap:8px; }
  .rc-rate-btn { padding:14px 8px; }
  .rc-rate-emoji { font-size:22px; }
  .rc-score-pills { display:none; }
  .rc-top-bar { gap:10px; }
}

/* ════════════════════════════════════════════════════════════
   CHAT
════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   CHAT — Redesigned UI
════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   CHAT — Redesigned UI
   ════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   CHAT — Oryon Premium AI Chat Interface v2
═══════════════════════════════════════════════════════════ */
/* Chat gets full width, edge-to-edge, no page padding */
#page-chat { max-width:none; padding:0; display:flex; flex-direction:column; overflow:hidden; }

/* Chat fits the viewport: the thread scrolls, the input box stays put.
   Without a bounded height the thread's overflow:auto never engaged. */
.main.main--chat { height:100vh; height:100dvh; min-height:0; overflow:hidden; padding-bottom:0; }
.main.main--chat #page-chat { flex:1; min-height:0; }
/* The subject bar sticks below the global topbar - which chat hides, so the
   offset slid the bar down over chat's own header. */
.main.main--chat .subj-bar { top:0; }

.chat-layout {
  display:flex; gap:0; flex:1; min-height:0;
  max-width:none; margin:0;
  background:var(--bg2); border-radius:0;
  border:none; overflow:hidden;
}

/* ── Sidebar — collapsed by default ── */
.chat-sidebar {
  width:260px; flex-shrink:0; border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  background:var(--bg);
  transition:width .3s var(--ease), opacity .3s var(--ease), padding .3s var(--ease);
  overflow:hidden;
}
.chat-sidebar.chat-sidebar-hidden { width:0; opacity:0; border:none; padding:0; }

/* ── Saved chats panel ── */
.chat-history {
  width:280px; flex-shrink:0; border-right:1px solid var(--border);
  display:flex; flex-direction:column; background:var(--bg);
  padding:18px 0 0; overflow:hidden;
  transition:width .3s var(--ease), opacity .3s var(--ease), padding .3s var(--ease);
}
.chat-history.chat-history-hidden { width:0; opacity:0; border:none; padding:0; }
.chat-history .chat-sidebar-top, .chat-history .chat-sidebar-sub { padding:0 16px; }
.chat-history .chat-sidebar-sub { margin-top:6px; }
.chat-history-list { margin-top:12px; overflow-y:auto; padding:0 8px 16px; display:flex; flex-direction:column; gap:2px; }
.chat-history-when {
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text4); padding:12px 8px 4px;
}
.chat-history-item { display:flex; align-items:center; gap:2px; border-radius:10px; }
.chat-history-item:hover, .chat-history-current { background:rgba(139,92,246,.1); }
.chat-history-open {
  flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  background:none; border:none; cursor:pointer; text-align:left; padding:9px 10px; font:inherit; color:var(--text);
}
.chat-history-title {
  font-size:13px; line-height:1.35; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-history-where {
  font-size:10.5px; color:var(--text3); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-history-act {
  flex-shrink:0; background:none; border:none; cursor:pointer; color:var(--text4);
  font-size:12px; padding:6px; border-radius:8px; opacity:0; transition:opacity .15s;
}
.chat-history-item:hover .chat-history-act, .chat-history-current .chat-history-act { opacity:1; }
.chat-history-act:hover { color:var(--text); background:rgba(139,92,246,.16); }
.chat-history-empty { font-size:12px; color:var(--text3); padding:16px 10px; line-height:1.6; }
@media (max-width:768px) {
  .chat-history { position:absolute; inset:0 auto 0 0; z-index:40; box-shadow:var(--shadow); }
  .chat-history.chat-history-hidden { box-shadow:none; }
}

.chat-sidebar-header {
  padding:18px 16px 14px; border-bottom:1px solid var(--border);
}
.chat-sidebar-top {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.chat-sidebar-title {
  font-size:11px; font-weight:700; color:var(--text2);
  text-transform:uppercase; letter-spacing:1px;
  display:flex; align-items:center; gap:6px;
}
.chat-sidebar-title svg { color:var(--text3); }
.chat-sidebar-toggle {
  font-size:10px; font-weight:600; color:var(--accent2);
  background:none; border:none; cursor:pointer; padding:4px 10px;
  border-radius:6px; transition:all .15s;
}
.chat-sidebar-toggle:hover { background:var(--accent-bg); }
.chat-sidebar-sub { font-size:10px; color:var(--text4); margin-top:5px; }

.chat-source-list { flex:1; overflow-y:auto; padding:8px; }
.chat-source-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; cursor:pointer;
  transition:all .2s var(--ease); margin-bottom:2px;
  border:1px solid transparent;
}
.chat-source-item:hover { background:rgba(255,255,255,.03); }
.chat-source-active { background:var(--accent-bg); border-color:var(--accent-border); }
.chat-source-item input[type="checkbox"] {
  width:15px; height:15px; accent-color:var(--accent);
  flex-shrink:0; cursor:pointer; border-radius:4px;
}
.chat-source-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 6px currentColor;
}
.chat-source-info { min-width:0; flex:1; }
.chat-source-name {
  font-size:12px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-source-meta { font-size:9px; color:var(--text4); margin-top:2px; }
.chat-source-disabled { opacity:0.35; cursor:default; }
.chat-source-disabled .chat-source-dot { filter:grayscale(1); opacity:.5; }
.chat-source-file-badge {
  font-size:8px; font-weight:600; letter-spacing:.03em;
  color:var(--text4); background:var(--bg4);
  border-radius:4px; padding:2px 6px; white-space:nowrap; flex-shrink:0;
}
.chat-no-sources {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:40px 16px; text-align:center; font-size:12px; color:var(--text3);
}
.chat-no-sources-sub { font-size:10px; color:var(--text4); }

/* ── Main ── */
.chat-main {
  flex:1; display:flex; flex-direction:column; min-width:0; min-height:0;
  background:linear-gradient(180deg, rgba(13,13,22,1) 0%, rgba(16,14,28,1) 100%);
  position:relative;
}

/* ── Top bar ── */
.chat-top-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--border);
  background:linear-gradient(90deg, rgba(139,92,246,.04) 0%, rgba(6,182,212,.02) 50%, transparent 100%);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  z-index:2;
}
.chat-top-left { display:flex; align-items:center; gap:10px; }
.chat-top-brand { display:flex; align-items:center; gap:10px; }
.chat-top-star {
  width:24px; height:24px;
  filter:drop-shadow(0 0 8px rgba(139,92,246,.4));
  animation:cwStarFloat 4s ease-in-out infinite;
}
@keyframes cwStarFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-2px); }
}
.chat-top-title {
  font-size:15px; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(135deg, #fff 30%, #a78bfa 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.chat-top-sub { font-size:10px; color:var(--text4); margin-top:1px; }
.chat-top-right { display:flex; align-items:center; gap:8px; }
.chat-top-badge {
  font-size:9px; font-weight:800; letter-spacing:.1em;
  padding:3px 8px; border-radius:6px;
  background:linear-gradient(135deg, rgba(139,92,246,.2), rgba(6,182,212,.15));
  color:#a78bfa; border:1px solid rgba(139,92,246,.25);
}
.chat-sidebar-btn {
  display:none; /* replaced by chat-sources-toggle and chat-back-btn */
}
/* Back button — compact, in top bar */
.chat-back-btn {
  width:32px; height:32px; border-radius:10px;
  background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.15);
  cursor:pointer; color:var(--text3);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; flex-shrink:0;
}
.chat-back-btn:hover { background:rgba(139,92,246,.15); color:#a78bfa; border-color:rgba(139,92,246,.3); }
.chat-back-btn:focus-visible, .chat-action-btn:focus-visible, .chat-send-btn:focus-visible { outline:2px solid #a78bfa; outline-offset:2px; }
/* Touch screens have no Shift+Enter. */
@media (hover:none) { .chat-kbd-hint { display:none; } }
@media (max-width:767px) {
  .chat-clear-label, .chat-top-badge { display:none; }
  .chat-top-sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; }
}

/* Sources toggle — shows source count */
.chat-sources-toggle {
  display:flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; color:var(--text3);
  background:rgba(139,92,246,.06); border:1px solid rgba(139,92,246,.15);
  border-radius:8px; padding:5px 10px; cursor:pointer;
  transition:all .2s;
}
.chat-sources-toggle:hover { background:rgba(139,92,246,.12); color:#a78bfa; border-color:rgba(139,92,246,.3); }
.chat-sources-toggle span { color:#a78bfa; }

/* Sidebar close button */
.chat-sidebar-close {
  width:26px; height:26px; border-radius:8px;
  background:var(--bg3); border:1px solid var(--border2);
  cursor:pointer; color:var(--text3);
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.chat-sidebar-close:hover { background:var(--bg4); color:var(--text); }

.chat-clear-btn {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:var(--text3);
  background:none; border:1px solid var(--border2); border-radius:8px;
  padding:6px 14px; cursor:pointer; transition:all .2s;
}
.chat-clear-btn svg { flex-shrink:0; }
.chat-clear-btn:hover { color:var(--accent2); border-color:var(--accent-border); background:var(--accent-bg); }

/* ── Thread ── */
.chat-thread {
  flex:1; overflow-y:auto; padding:24px 28px;
  display:flex; flex-direction:column; gap:24px;
  scroll-behavior:smooth;
}

.chat-msg {
  display:flex; align-items:flex-start; gap:12px;
  animation:chatFadeIn .4s var(--ease) both;
  max-width:100%;
}
/* The column spans the row so a bubble's max-width means 72% of the thread,
   not 72% of a column already shrunk to the bubble's own text. */
.chat-msg-content { flex:1; min-width:0; max-width:100%; display:flex; flex-direction:column; }
.chat-msg-user .chat-msg-content { align-items:flex-end; }
.chat-msg-ai .chat-msg-content { align-items:flex-start; }
/* A reply holding a table takes the full bubble width so columns aren't clipped. */
.chat-bubble-ai:has(.md-table-wrap) { width:72%; }
.chat-msg-user { justify-content:flex-end; }
.chat-msg-ai { justify-content:flex-start; }

/* ── Avatars ── */
.chat-avatar {
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:14px; margin-top:2px;
}
.chat-avatar-ai {
  background:linear-gradient(135deg, rgba(139,92,246,.15), rgba(6,182,212,.1));
  border:1px solid rgba(139,92,246,.25);
  box-shadow:0 2px 12px rgba(139,92,246,.15);
}
.chat-avatar-star { width:20px; height:20px; filter:drop-shadow(0 0 4px rgba(139,92,246,.3)); }
.chat-avatar-user {
  background:linear-gradient(135deg, var(--bg4), var(--bg3));
  border:1px solid var(--border2); color:var(--text2);
}
.chat-avatar-user span { font-size:15px; }

/* ── Bubbles ── */
.chat-bubble {
  max-width:72%; padding:16px 20px; border-radius:20px;
  animation:chatFadeIn .35s var(--ease) both;
  position:relative;
}
@keyframes chatFadeIn {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
.chat-bubble-user {
  background:linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color:white; border-bottom-right-radius:6px;
  box-shadow:0 4px 20px rgba(139,92,246,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.chat-bubble-ai {
  background:linear-gradient(135deg, rgba(22,20,35,1), rgba(18,16,30,1));
  border:1px solid rgba(139,92,246,.12);
  border-bottom-left-radius:6px;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.chat-bubble-thinking {
  border-color:rgba(139,92,246,.2);
  background:linear-gradient(135deg, rgba(139,92,246,.06), rgba(6,182,212,.04));
}
.chat-bubble-text { font-size:13.5px; line-height:1.65; }
/* Learners' own messages keep their line breaks; AI replies are rendered markdown. */
.chat-bubble-user .chat-bubble-text { white-space:pre-wrap; }
.chat-bubble-ai .chat-bubble-text p,
.chat-notice .chat-bubble-text p { margin:0 0 8px; }
.chat-bubble-ai .chat-bubble-text > :last-child,
.chat-notice .chat-bubble-text > :last-child { margin-bottom:0; }
.chat-bubble-ai .md-h { font-size:14.5px; font-weight:700; margin:12px 0 6px; }
.chat-bubble-ai .md-h:first-child { margin-top:0; }
.chat-bubble-ai .md-list { margin:4px 0 10px 18px; padding:0; }
.chat-bubble-ai .md-list li { margin:4px 0; color:var(--text); line-height:1.6; }
.chat-bubble-ai .md-list li::marker { color:#a78bfa; }
.chat-bubble-ai code { background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.2); padding:1px 6px; border-radius:6px; font-family:var(--font-mono); font-size:12px; color:#c4b5fd; }

/* Offline answers and system notices look different from real AI replies. */
.chat-offline-tag {
  margin-top:10px; font-size:11px; font-weight:600; letter-spacing:.02em;
  color:var(--text3); display:flex; align-items:center; gap:6px;
}
.chat-offline-tag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--text3); }
.chat-notice {
  max-width:72%; padding:12px 16px; border-radius:14px; font-size:13.5px;
  border:1px solid rgba(245,158,11,.35); background:rgba(245,158,11,.08); color:var(--text);
}
.chat-notice-info  { border-color:rgba(139,92,246,.3); background:rgba(139,92,246,.07); }
.chat-notice-error { border-color:rgba(248,113,113,.35); background:rgba(248,113,113,.08); }
.chat-notice-retry { margin-top:10px; }
.chat-bubble-user .chat-bubble-text { font-weight:500; }

/* ── Rich formatting ── */
.chat-bubble-ai .chat-heading {
  font-size:15px; font-weight:700; margin:12px 0 6px; padding-bottom:4px;
  background:linear-gradient(90deg, var(--text), #a78bfa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  border-bottom:1px solid rgba(139,92,246,.15);
}
.chat-bubble-ai .chat-heading:first-child { margin-top:0; }
.chat-bullet {
  padding:5px 0 5px 16px;
  border-left:2px solid rgba(139,92,246,.35);
  margin:6px 0; font-size:13px;
}
.chat-bullet-num { font-weight:700; color:#a78bfa; margin-right:6px; }
.chat-code-block {
  background:rgba(0,0,0,.3); border:1px solid rgba(139,92,246,.12);
  border-radius:12px; padding:14px 16px; margin:10px 0;
  font-family:var(--font-mono); font-size:12px; line-height:1.7;
  overflow-x:auto; color:var(--text2);
}
.chat-code-inline {
  background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.2);
  padding:2px 7px; border-radius:6px;
  font-family:var(--font-mono); font-size:12px; color:#a78bfa;
}
.chat-hr {
  border:none; height:1px; margin:14px 0;
  background:linear-gradient(90deg, transparent, rgba(139,92,246,.2), transparent);
}

/* ── Actions ── */
.chat-msg-actions {
  display:flex; gap:4px; margin-top:10px; padding-top:8px;
  border-top:1px solid rgba(139,92,246,.08);
}
.chat-action-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:8px;
  background:none; border:1px solid rgba(139,92,246,.15);
  color:var(--text3); font-size:10px; font-weight:600;
  cursor:pointer; transition:all .2s var(--ease);
}
.chat-action-btn:hover {
  background:rgba(139,92,246,.08); border-color:rgba(139,92,246,.3); color:#a78bfa;
}
.chat-action-btn.copied {
  border-color:var(--green-border); color:var(--green); background:var(--green-bg);
}
.chat-action-btn svg { width:12px; height:12px; }

.chat-timestamp {
  font-size:9px; color:var(--text4); margin-top:6px; text-align:right; opacity:.6;
}
.chat-msg-ai .chat-timestamp { text-align:left; }

.chat-evidence {
  margin-top:10px; padding-top:8px;
  border-top:1px solid rgba(139,92,246,.08);
  font-size:10px; color:var(--text4);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
}
.chat-evidence svg { flex-shrink:0; color:var(--text4); }
.chat-evidence-tag {
  background:rgba(139,92,246,.08); padding:3px 8px; border-radius:6px;
  font-size:9px; font-weight:600; color:#a78bfa;
  border:1px solid rgba(139,92,246,.15);
}

/* ── Citations: [1] markers, the Sources list, and the source pop-up ── */
.chat-cite {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; margin:0 1px; vertical-align:2px;
  border-radius:5px; border:1px solid rgba(139,92,246,.3); background:rgba(139,92,246,.14);
  font-size:10px; font-weight:700; line-height:1; color:#c4b5fd; font-family:inherit; cursor:pointer;
}
button.chat-cite:hover { background:rgba(139,92,246,.3); color:#fff; }
.chat-cite-ai { cursor:help; border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.1); color:#fbbf24; }
.chat-citations {
  margin-top:12px; padding-top:10px; border-top:1px solid rgba(139,92,246,.12);
  display:flex; flex-direction:column; gap:4px;
}
.chat-citations-head { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text4); margin-bottom:2px; }
.chat-citation {
  display:flex; align-items:baseline; gap:8px; width:100%; text-align:left;
  padding:5px 6px; border:none; border-radius:8px; background:none;
  font:inherit; font-size:12px; color:var(--text2); cursor:pointer;
}
button.chat-citation:hover { background:rgba(139,92,246,.08); }
.chat-citation .chat-cite { flex-shrink:0; vertical-align:0; cursor:inherit; }
.chat-citation-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.chat-citation-kind { font-size:10.5px; font-weight:600; color:var(--text3); }
.chat-citation-title { min-width:0; overflow-wrap:anywhere; }
.chat-citation-ai { cursor:default; color:var(--text3); }
.chat-check-head { margin-top:8px; }
a.chat-citation.chat-check-link { text-decoration:none; }
a.chat-citation.chat-check-link:hover { background:rgba(139,92,246,.08); }
.chat-check-link .chat-citation-title { color:#c4b5fd; }
.chat-check-icon {
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px;
  border-radius:5px; border:1px solid rgba(34,197,94,.3); background:rgba(34,197,94,.1); color:#4ade80; font-size:10px; font-weight:700;
}
.chat-citation-modal { width:560px; max-height:80vh; display:flex; flex-direction:column; gap:14px; }
.chat-citation-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.chat-citation-modal .modal-title { margin:4px 0 0; }
.chat-citation-close { background:none; border:none; font-size:18px; color:var(--text3); cursor:pointer; padding:2px 6px; }
.chat-citation-body {
  overflow-y:auto; white-space:pre-wrap; font-size:13px; line-height:1.65; color:var(--text2);
  background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
}
.chat-citation-modal .btn-sm { align-self:flex-start; }

/* ── Thinking ── */
.chat-thinking-wrap { display:flex; align-items:center; gap:10px; }
.chat-thinking-pulse {
  width:8px; height:8px; border-radius:50%;
  background:#8b5cf6;
  box-shadow:0 0 12px rgba(139,92,246,.6);
  animation:cwPulse 1.5s ease-in-out infinite;
}
@keyframes cwPulse {
  0%,100% { transform:scale(1); opacity:.6; }
  50% { transform:scale(1.3); opacity:1; }
}
.chat-thinking-dots { display:flex; gap:4px; align-items:center; }
.chat-thinking-dots span {
  width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg, #8b5cf6, #06b6d4);
  animation:chatThink 1.4s ease-in-out infinite;
}
.chat-thinking-dots span:nth-child(2) { animation-delay:.2s; }
.chat-thinking-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes chatThink {
  0%, 60%, 100% { transform:translateY(0); opacity:.25; }
  30% { transform:translateY(-6px); opacity:1; }
}
.chat-thinking-label { font-size:12px; color:var(--text3); font-weight:500; }

/* ════════════════════════════════════════════════════════
   WELCOME STATE — Immersive hero
════════════════════════════════════════════════════════ */
.chat-welcome {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:40px 28px;
  position:relative; overflow-x:hidden; overflow-y:auto;
}

/* Ambient floating orbs */
.cw-ambient { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cw-orb {
  position:absolute; border-radius:50%; filter:blur(60px);
  animation:cwOrbit 12s ease-in-out infinite;
}
.cw-orb-1 {
  width:200px; height:200px; top:10%; left:20%;
  background:rgba(139,92,246,.12);
}
.cw-orb-2 {
  width:160px; height:160px; bottom:20%; right:15%;
  background:rgba(6,182,212,.1);
  animation-delay:-4s; animation-duration:15s;
}
.cw-orb-3 {
  width:120px; height:120px; top:50%; left:60%;
  background:rgba(236,72,153,.08);
  animation-delay:-8s; animation-duration:18s;
}
@keyframes cwOrbit {
  0%,100% { transform:translate(0,0); }
  25% { transform:translate(20px,-15px); }
  50% { transform:translate(-10px,20px); }
  75% { transform:translate(15px,10px); }
}

.cw-hero { position:relative; z-index:1; margin-bottom:32px; }

/* Star with rings */
.cw-star-wrap {
  position:relative; width:80px; height:80px;
  margin:0 auto 24px; display:flex; align-items:center; justify-content:center;
}
.cw-star-ring {
  position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(139,92,246,.2);
  animation:cwRingSpin 10s linear infinite;
}
.cw-star-ring::after {
  content:''; position:absolute; top:-3px; left:50%;
  width:6px; height:6px; border-radius:50%; transform:translateX(-50%);
  background:#8b5cf6; box-shadow:0 0 12px #8b5cf6;
}
.cw-star-ring-2 {
  inset:-18px; border-color:rgba(6,182,212,.1);
  animation-direction:reverse; animation-duration:16s;
}
.cw-star-ring-2::after { background:#06b6d4; box-shadow:0 0 10px #06b6d4; }
@keyframes cwRingSpin { to { transform:rotate(360deg); } }
.cw-star-img {
  width:44px; height:44px;
  filter:drop-shadow(0 0 20px rgba(139,92,246,.5));
  animation:cwStarFloat 4s ease-in-out infinite;
}

.cw-title {
  font-size:28px; font-weight:800; letter-spacing:-.03em; margin-bottom:10px;
  background:linear-gradient(135deg, #fff 20%, #a78bfa 60%, #06b6d4 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.cw-sub {
  font-size:13px; color:var(--text3); max-width:400px; margin:0 auto;
  line-height:1.65;
}

/* ── Suggestion cards — Vibrant 2x2 grid ── */
.cw-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  max-width:420px; width:100%;
  position:relative; z-index:1;
}
.cw-card {
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:20px 14px 16px; border-radius:16px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(var(--cw-glow), .18);
  cursor:pointer; transition:all .3s cubic-bezier(.22,1,.36,1);
  text-align:center; position:relative; overflow:hidden;
}
.cw-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 30%, rgba(var(--cw-glow), .1) 0%, transparent 70%);
  opacity:0; transition:opacity .3s;
}
.cw-card:hover {
  transform:translateY(-4px);
  border-color:rgba(var(--cw-glow), .4);
  box-shadow:0 8px 32px rgba(var(--cw-glow), .15), 0 0 0 1px rgba(var(--cw-glow), .1) inset;
}
.cw-card:hover::before { opacity:1; }
.cw-card-icon {
  width:44px; height:44px; border-radius:14px;
  background:rgba(var(--cw-glow), .12);
  border:1px solid rgba(var(--cw-glow), .2);
  display:flex; align-items:center; justify-content:center;
  color:var(--cw-accent);
  box-shadow:0 4px 16px rgba(var(--cw-glow), .1);
  position:relative; z-index:1;
}
.cw-card-label {
  font-size:13px; font-weight:700; color:var(--text);
  position:relative; z-index:1;
}
.cw-card:hover .cw-card-label { color:var(--cw-accent); }
.cw-card-desc {
  font-size:10px; color:var(--text4); line-height:1.4;
  position:relative; z-index:1;
}

/* ── Input bar — Glowing premium ── */
.chat-input-bar {
  display:flex; flex-direction:column; gap:8px;
  padding:16px 24px 14px;
  border-top:1px solid rgba(139,92,246,.1);
  background:linear-gradient(180deg, rgba(13,13,22,.9), rgba(10,10,18,1));
  position:relative;
}
.chat-input-glow {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,92,246,.4), rgba(6,182,212,.3), transparent);
}
.chat-input-wrap {
  display:flex; align-items:flex-end; gap:0;
  background:rgba(22,20,35,.8);
  border:1.5px solid rgba(139,92,246,.15);
  border-radius:18px; padding:6px 6px 6px 0;
  transition:all .25s var(--ease); position:relative;
}
.chat-input-wrap:focus-within {
  border-color:rgba(139,92,246,.4);
  box-shadow:0 0 0 3px rgba(139,92,246,.06), 0 4px 24px rgba(139,92,246,.12);
  background:rgba(26,24,40,.9);
}
.chat-input {
  flex:1; padding:8px 16px; border:none; background:transparent;
  color:var(--text); font-size:13.5px; font-family:var(--font);
  outline:none; resize:none; min-height:20px; max-height:120px;
  line-height:1.5; overflow-y:auto;
}
.chat-input::placeholder { color:var(--text4); }

.chat-send-btn {
  width:38px; height:38px; border-radius:13px;
  background:linear-gradient(135deg, #8b5cf6, #6d28d9);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s var(--ease); flex-shrink:0; color:white;
  box-shadow:0 2px 12px rgba(139,92,246,.3);
}
.chat-send-btn:hover {
  transform:scale(1.08);
  box-shadow:0 4px 20px rgba(139,92,246,.45);
}
.chat-send-btn:disabled { opacity:.3; cursor:default; transform:none; box-shadow:none; }
.chat-send-btn svg { stroke:white; }

.chat-input-hint {
  display:flex; align-items:center; gap:5px; justify-content:center;
  font-size:9px; color:var(--text4); opacity:.5; padding:0 4px;
}

/* ── Shared "AI can make mistakes" disclaimer (shown where AI output appears) ── */
.ai-disclaimer {
  margin-top:10px; font-size:11px; line-height:1.45; color:var(--text3);
  background:var(--bg2); border:1px dashed var(--border); border-radius:9px;
  padding:7px 11px;
}

/* ── Chat mobile ── */
@media (max-width:700px) {
  .chat-layout {
    flex-direction:column;
  }
  .chat-sidebar {
    width:100%; border-right:none; border-bottom:1px solid var(--border);
    max-height:120px; overflow:auto;
  }
  .chat-sidebar-header { padding:12px 14px 8px; }
  .chat-source-list { display:flex; gap:4px; padding:6px 10px 10px; overflow-x:auto; }
  .chat-source-item { flex-shrink:0; padding:6px 10px; }
  .chat-bubble { max-width:88%; }
  .chat-notice { max-width:88%; }
  .cw-grid { grid-template-columns:1fr; max-width:220px; }
  .cw-title { font-size:22px; }
  .chat-input-bar { padding:12px 14px 10px; }
  .chat-thread { padding:16px 14px; gap:18px; }
  .chat-sidebar-btn { display:flex; }
  .cw-star-wrap { width:60px; height:60px; margin-bottom:18px; }
  .cw-star-img { width:32px; height:32px; }
}

/* ════════════════════════════════════════════════════════════
   SOURCES
════════════════════════════════════════════════════════════ */

.src-page { max-width:900px; margin:0 auto; }

.src-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:20px; flex-wrap:wrap;
}
.src-header-left { display:flex; align-items:center; gap:14px; }
.src-icon {
  font-size:24px; width:46px; height:46px; border-radius:14px;
  background:var(--accent-bg); display:flex; align-items:center; justify-content:center;
}
.src-title { font-size:16px; font-weight:800; color:var(--text); }
.src-sub { font-size:12px; color:var(--text3); margin-top:2px; }

.src-header-right { display:flex; align-items:center; gap:12px; }
.src-stats-row { display:flex; gap:6px; }

/* Form */
.src-form-card {
  background:var(--bg3); border:1px solid var(--border2); border-radius:18px;
  padding:28px 24px; margin-bottom:20px;
}
.src-form-title { font-size:15px; font-weight:800; color:var(--text); margin-bottom:4px; }
.src-form-sub { font-size:12px; color:var(--text3); margin-bottom:18px; }
.src-form-grid { display:grid; grid-template-columns:1fr 180px; gap:14px; }
.src-form-grid-3 { grid-template-columns:1fr 1fr 150px; }
.src-textarea { min-height:200px; resize:vertical; }
.src-form-actions { display:flex; gap:10px; margin-top:4px; }

.src-card-enter { animation:rcSlideIn .3s var(--ease); }

/* Drop zone */
.src-drop-zone { border:2px dashed var(--border2); border-radius:12px; padding:24px 16px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; }
.src-drop-zone:hover, .src-drop-zone.drag-over { border-color:var(--accent2); background:color-mix(in srgb, var(--accent2) 6%, transparent); }

/* Extract action buttons */
.src-extract-btn {
  display:inline-block; padding:3px 10px; border-radius:8px; font-size:11px; font-weight:700;
  background:var(--accent2); color:#fff; border:none; cursor:pointer; transition:opacity .15s;
}
.src-extract-btn:hover { opacity:.85; }
.src-unreadable {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0; padding:8px 10px;
  border-radius:8px; border:1px solid rgba(245,158,11,.3); background:rgba(245,158,11,.08);
  font-size:11.5px; line-height:1.45; color:var(--text2);
}
.src-unreadable .src-extract-btn:disabled { opacity:.6; cursor:wait; }
.src-extract-btn-ghost {
  display:inline-block; padding:3px 10px; border-radius:8px; font-size:11px; font-weight:600;
  background:transparent; color:var(--text3); border:1px solid var(--border2); cursor:pointer; transition:border-color .15s, color .15s;
}
.src-extract-btn-ghost:hover { border-color:var(--text2); color:var(--text2); }

/* Bulk queue items */
.src-bulk-item { transition:opacity .2s; }
.src-bulk-item input.input { font-size:12px !important; padding:4px 8px !important; }

@media (max-width:580px) {
  .src-form-grid-3 { grid-template-columns:1fr; }
  .src-form-card { padding:20px 16px; }
  .src-drop-zone { padding:18px 12px; }
}

/* ── Upload progress bar ── */
.src-upload-bar {
  margin:10px 0; padding:10px 14px;
  background:var(--bg2); border:1px solid var(--border1);
  border-radius:10px; transition:opacity .4s, transform .4s;
}
.src-upload-bar.src-upload-done {
  opacity:0; transform:translateY(-8px);
}
.src-upload-info {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:6px;
}
.src-upload-name {
  font-size:12px; font-weight:600; color:var(--text2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70%;
}
.src-upload-stats {
  font-size:13px; font-weight:800; color:var(--accent2);
  font-variant-numeric:tabular-nums;
}
.src-upload-track {
  height:6px; background:var(--bg4); border-radius:3px; overflow:hidden;
}
.src-upload-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), #8b5cf6);
  transition:width .3s ease-out;
  position:relative;
}
.src-upload-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%);
  animation:uploadShimmer 1.5s ease-in-out infinite;
}
@keyframes uploadShimmer {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
.src-upload-detail {
  font-size:10px; color:var(--text4); margin-top:4px;
  font-variant-numeric:tabular-nums;
}

/* Source cards grid */
.src-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap:14px;
}

.src-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:16px;
  padding:20px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .2s, transform .2s;
  min-width:0; overflow:hidden;
}
.src-card:hover { border-color:var(--border3); transform:translateY(-2px); }

.src-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.src-card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.src-card-icon {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.src-card-icon-purple { background:var(--accent-bg); }
.src-card-icon-amber { background:var(--amber-bg); }
.src-card-icon-teal { background:var(--teal-bg); }
.src-card-icon-green { background:var(--green-bg); }
.src-card-icon-pink { background:var(--pink-bg); }

.src-card-title {
  font-size:14px; font-weight:700; color:var(--text); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere; word-break:break-word; min-width:0;
}
.src-card-preview {
  font-size:12px; color:var(--text3); line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere; min-width:0;
  flex:1;
}
.src-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px;
  padding-top:10px; border-top:1px solid var(--border);
}
.src-card-info { font-size:10px; color:var(--text4); font-weight:600; }
.src-card-actions { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; }
.src-action-btn {
  width:30px; height:30px; border-radius:8px; border:none;
  background:transparent; cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.src-action-btn:hover { background:var(--bg5); }
.src-action-delete:hover { background:var(--red-bg); }

/* Empty */
.src-empty {
  text-align:center; padding:80px 20px; color:var(--text3);
}
.src-empty-icon { font-size:52px; margin-bottom:18px; opacity:.5; }
.src-empty-title { font-size:16px; font-weight:700; color:var(--text2); margin-bottom:8px; }
.src-empty-sub { font-size:13px; line-height:1.6; max-width:380px; margin:0 auto; }

/* Mobile source rules moved to layout.css */

/* ════════════════════════════════════════════════════════════
   EXPLAIN
════════════════════════════════════════════════════════════ */

.exp-page { max-width:720px; margin:0 auto; }

.exp-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:20px; flex-wrap:wrap;
}
.exp-header-left { display:flex; align-items:center; gap:14px; }
.exp-icon {
  font-size:24px; width:46px; height:46px; border-radius:14px;
  background:var(--accent-bg); display:flex; align-items:center; justify-content:center;
}
.exp-title { font-size:16px; font-weight:800; color:var(--text); }
.exp-sub { font-size:12px; color:var(--text3); margin-top:2px; }

/* Loading */
.exp-loading {
  padding:60px 20px; text-align:center;
}
.exp-loading-bar {
  width:200px; height:4px; background:var(--bg4); border-radius:99px;
  margin:0 auto 16px; overflow:hidden;
}
.exp-loading-fill {
  width:40%; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  animation:expLoadSlide 1.5s ease-in-out infinite;
}
@keyframes expLoadSlide {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(350%); }
}
.exp-loading-text { font-size:13px; color:var(--text3); }

/* Content */
.exp-content {
  background:var(--bg3); border:1px solid var(--border); border-radius:18px;
  padding:32px 28px; animation:rcSlideIn .35s var(--ease);
  position:relative; overflow:hidden;
}
.exp-content::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), #e879f9);
}

.exp-body {
  font-size:14px; line-height:1.85; color:var(--text);
  white-space:pre-wrap;
}
.exp-heading {
  font-size:16px; font-weight:800; color:var(--accent2);
  margin:24px 0 10px; padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.exp-heading:first-child { margin-top:0; }

.exp-bullet {
  display:flex; gap:10px; align-items:flex-start;
  margin:8px 0; padding-left:4px;
}
.exp-bullet-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-top:8px; flex-shrink:0;
}
.exp-step {
  width:22px; height:22px; border-radius:7px;
  background:var(--accent-bg); color:var(--accent2);
  font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.exp-spacer { height:12px; }

.exp-takeaway-label {
  display:inline-block; margin-top:20px; margin-bottom:8px;
  padding:4px 12px; border-radius:8px;
  background:var(--green-bg); border:1px solid var(--green-border);
  font-size:11px; font-weight:800; color:var(--green);
  text-transform:uppercase; letter-spacing:.5px;
}

/* Empty */
.exp-empty {
  text-align:center; padding:80px 20px; color:var(--text3);
}
.exp-empty-icon { font-size:52px; margin-bottom:18px; opacity:.5; }
.exp-empty-title { font-size:16px; font-weight:700; color:var(--text2); margin-bottom:8px; }
.exp-empty-sub { font-size:13px; line-height:1.6; max-width:360px; margin:0 auto; }

@media (max-width:580px) {
  .exp-content { padding:24px 18px; }
  .exp-body { font-size:13px; }
  .exp-header { flex-direction:column; align-items:flex-start; }
}

/* ════════════════════════════════════════════════════════════
   MIND MAP — Visual concept map
════════════════════════════════════════════════════════════ */

/* ── Mind Map v2 — Vibrant Card-Based Concept Board ── */

.mm2-page {
  max-width:900px; margin:0 auto; padding:0 16px 40px;
}

/* ── View toggle: This topic / Connections ── */
.mm-viewtoggle {
  display:flex; gap:4px; justify-content:center;
  background:var(--bg2); border:1px solid var(--border1);
  border-radius:12px; padding:4px; margin:6px auto 18px; max-width:340px;
}
.mm-vt {
  flex:1; padding:8px 10px; border:none; background:transparent;
  border-radius:9px; cursor:pointer; font-size:13px; font-weight:600;
  color:var(--text3); transition:all .15s;
}
.mm-vt:hover { color:var(--text); }
.mm-vt.active { background:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }

/* ════════════════════════════════════════════════════════════
   CROSS-TOPIC CONNECTIONS GRAPH
════════════════════════════════════════════════════════════ */
.cm-hero {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:6px 4px 14px;
}
.cm-hero-title { font-size:20px; font-weight:800; color:var(--text); letter-spacing:-.3px; }
.cm-hero-stats { display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; font-size:13px; color:var(--text3); }
.cm-stat b { color:var(--text); font-weight:700; }
.cm-stat-dot { width:3px; height:3px; border-radius:50%; background:var(--text5,var(--text4)); opacity:.5; }

.cm-legend {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:0 4px 12px; font-size:12px; color:var(--text3);
}
.cm-legend-item { display:flex; align-items:center; gap:6px; font-weight:600; }
.cm-legend-dot { width:10px; height:10px; border-radius:50%; }
.cm-legend-hint { margin-left:auto; opacity:.6; font-style:italic; }

.cm-graph-wrap {
  background:radial-gradient(circle at 50% 45%, var(--bg2), var(--bg));
  border:1px solid var(--border1); border-radius:18px;
  padding:8px; overflow:hidden;
}
.cm-svg { width:100%; height:auto; display:block; touch-action:manipulation; }
.cm-node-label {
  font-size:11px; font-weight:600; fill:var(--text2,var(--text));
  paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round;
}
.cm-node.sel .cm-node-label { fill:var(--text); font-weight:700; }
.cm-node circle { transition:r .12s var(--ease); }

/* Detail panel for a selected node */
.cm-panel {
  margin-top:16px; background:var(--bg2); border:1px solid var(--border1);
  border-radius:16px; overflow:hidden;
}
.cm-panel-head {
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid var(--border1);
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, transparent), transparent);
}
.cm-panel-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.cm-panel-title { font-size:16px; font-weight:700; color:var(--text); }
.cm-panel-sub { font-size:12px; color:var(--text3); margin-top:2px; }
.cm-panel-close {
  margin-left:auto; border:none; background:var(--bg3); color:var(--text3);
  width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:13px; flex-shrink:0;
}
.cm-panel-close:hover { background:var(--bg4); color:var(--text); }
.cm-conn-list { padding:8px; display:flex; flex-direction:column; gap:6px; }
.cm-conn {
  padding:10px 12px; border-radius:11px; background:var(--bg);
  border:1px solid var(--border1); cursor:pointer; transition:all .15s;
}
.cm-conn:hover { border-color:var(--border2); transform:translateX(2px); }
.cm-conn.cross { border-left:3px solid #8b5cf6; }
.cm-conn-top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cm-conn-arrow { color:var(--text4); font-weight:700; }
.cm-conn-name { font-weight:700; font-size:14px; }
.cm-conn-subj { font-size:11px; color:var(--text4); }
.cm-conn-badge {
  font-size:10px; font-weight:700; color:#8b5cf6;
  background:rgba(139,92,246,.12); padding:2px 7px; border-radius:20px;
}
.cm-conn-rel { font-size:13px; color:var(--text2,var(--text)); margin-top:5px; line-height:1.45; }
.cm-conn-insight { font-size:12px; color:var(--text3); margin-top:5px; line-height:1.4; }

.cm-unconnected { margin-top:18px; }
.cm-unconnected-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text4); margin-bottom:8px; }
.cm-unconnected-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cm-chip {
  font-size:12px; padding:5px 11px; border-radius:20px;
  background:var(--bg2); border:1px solid var(--border1); color:var(--text3);
}

@media(max-width:580px) {
  .cm-hero-title { font-size:18px; }
  .cm-legend-hint { display:none; }
  .cm-graph-wrap { border-radius:14px; padding:2px; }
  .cm-node-label { font-size:13px; }
}

/* ═══════════════════════════════════════════════════════════════
   VISUAL SUMMARY — narrated illustrated slideshow ("video")
   ═══════════════════════════════════════════════════════════════ */
.vs-head {
  display:flex; align-items:flex-start; gap:12px; margin-bottom:16px;
}
.vs-head-main { flex:1; min-width:0; }
.vs-title {
  font-size:21px; font-weight:800; color:var(--text); line-height:1.25;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.vs-subtitle { font-size:13.5px; color:var(--text3); margin-top:4px; line-height:1.4; }
.vs-pill {
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px;
  background:rgba(16,185,129,.14); color:#10b981; letter-spacing:.02em;
}
.vs-regen {
  flex-shrink:0; width:38px; height:38px; border-radius:11px;
  border:1px solid var(--border1); background:var(--bg2); color:var(--text3);
  font-size:18px; cursor:pointer; transition:all .15s;
}
.vs-regen:hover { color:var(--text); background:var(--bg3); transform:rotate(-90deg); }

/* Stage — the illustrated slide */
.vs-stage {
  position:relative; border-radius:22px; padding:42px 28px 30px;
  min-height:330px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--vs-accent) 16%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, var(--bg2) 0%, var(--bg1) 100%);
  border:1px solid color-mix(in srgb, var(--vs-accent) 30%, var(--border1));
  overflow:hidden; transition:border-color .4s;
}
.vs-scene-kind {
  position:absolute; top:14px; left:16px;
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--vs-accent); opacity:.85;
}
.vs-emoji {
  font-size:62px; line-height:1; margin-bottom:14px;
  filter:drop-shadow(0 6px 16px color-mix(in srgb, var(--vs-accent) 40%, transparent));
  animation:vsPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vsPop { 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.vs-heading {
  font-size:25px; font-weight:800; color:var(--text); line-height:1.22;
  max-width:560px; margin-bottom:16px;
  animation:vsFade .45s ease both;
}
.vs-bullets { list-style:none; margin:0; padding:0; max-width:480px; width:100%; }
.vs-bullets li {
  font-size:15.5px; color:var(--text2); font-weight:600;
  padding:9px 16px; margin:7px auto; border-radius:12px;
  background:color-mix(in srgb, var(--vs-accent) 9%, var(--bg2));
  border:1px solid color-mix(in srgb, var(--vs-accent) 20%, transparent);
  animation:vsSlide .42s ease both;
}
@keyframes vsFade { from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes vsSlide { from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:none; } }
.vs-progressbar {
  position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--border1);
}
.vs-progressbar-fill { height:100%; transition:width .45s var(--ease); }

/* Poster overlay (before first play) */
.vs-poster {
  position:absolute; inset:0; z-index:5; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(10,12,20,.55); backdrop-filter:blur(3px);
  border:none; color:#fff;
}
.vs-poster-play {
  width:74px; height:74px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; padding-left:5px;
  background:var(--vs-accent); color:#fff;
  box-shadow:0 10px 30px color-mix(in srgb, var(--vs-accent) 55%, transparent);
  transition:transform .15s;
}
.vs-poster:hover .vs-poster-play { transform:scale(1.08); }
.vs-poster-label { font-size:15px; font-weight:700; letter-spacing:.01em; }

/* Narration caption */
.vs-narration {
  margin:16px auto 0; max-width:620px; text-align:center;
  font-size:14.5px; line-height:1.55; color:var(--text3);
  font-style:italic;
}
.vs-narrating {
  display:inline-block; margin-right:8px; font-style:normal;
  font-size:12px; font-weight:700; color:var(--accent);
  animation:vsPulse 1.4s ease-in-out infinite;
}
@keyframes vsPulse { 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

/* Controls */
.vs-controls {
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:22px 0 14px;
}
.vs-ctrl {
  width:46px; height:46px; border-radius:14px; cursor:pointer;
  border:1px solid var(--border1); background:var(--bg2); color:var(--text2);
  font-size:18px; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.vs-ctrl:hover:not(:disabled) { background:var(--bg3); color:var(--text); }
.vs-ctrl:disabled { opacity:.35; cursor:default; }
.vs-ctrl-play {
  width:58px; height:58px; border-radius:50%; font-size:22px;
  background:var(--accent); color:#fff; border-color:transparent;
  box-shadow:0 6px 18px rgba(99,102,241,.35);
}
.vs-ctrl-play:hover:not(:disabled) { background:var(--accent); color:#fff; transform:scale(1.06); }
.vs-counter {
  margin-left:6px; font-size:13px; font-weight:700; color:var(--text4);
  font-variant-numeric:tabular-nums; min-width:46px; text-align:left;
}

/* Scene dots */
.vs-dots { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.vs-dot {
  width:11px; height:11px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid var(--border2); background:transparent; transition:all .18s;
}
.vs-dot:hover { transform:scale(1.25); }
.vs-dot.done { background:var(--vsd); border-color:var(--vsd); opacity:.55; }
.vs-dot.active {
  background:var(--vsd); border-color:var(--vsd); transform:scale(1.35);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--vsd) 22%, transparent);
}

/* Empty / poster card */
.vs-empty {
  text-align:center; padding:60px 24px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.vs-empty-emoji { font-size:48px; }
.vs-empty-title { font-size:18px; font-weight:800; color:var(--text); }
.vs-empty-sub { font-size:14px; color:var(--text3); max-width:340px; }
.vs-btn {
  margin-top:8px; padding:11px 22px; border-radius:13px; cursor:pointer;
  font-size:14.5px; font-weight:700; border:1px solid var(--border1);
  background:var(--bg2); color:var(--text2); transition:all .15s;
}
.vs-btn-primary { background:var(--accent); color:#fff; border-color:transparent; }
.vs-btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(99,102,241,.3); }

@media(max-width:580px) {
  .vs-stage { padding:34px 18px 26px; min-height:288px; }
  .vs-emoji { font-size:50px; }
  .vs-heading { font-size:21px; }
  .vs-bullets li { font-size:14px; }
  .vs-title { font-size:18px; }
}

/* ── Hero — Central Topic ── */
.mm2-hero {
  position:relative; text-align:center; padding:36px 20px 28px;
  margin-bottom:20px; border-radius:20px;
  background:linear-gradient(135deg, rgba(139,92,246,.08) 0%, rgba(6,182,212,.06) 50%, rgba(236,72,153,.06) 100%);
  border:1px solid rgba(139,92,246,.15);
  overflow:hidden;
}
.mm2-hero-glow {
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:260px; height:140px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(139,92,246,.18) 0%, transparent 70%);
  pointer-events:none;
}
.mm2-hero-content { position:relative; z-index:1; }
.mm2-hero-label {
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-text, #8b5cf6); margin-bottom:6px; opacity:.8;
}
.mm2-hero-title {
  font-size:22px; font-weight:800; color:var(--text); margin:0 0 14px;
  line-height:1.3;
}
.mm2-hero-stats {
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap;
}
.mm2-stat {
  font-size:12px; color:var(--text3); font-weight:500;
}
.mm2-stat-val {
  font-weight:800; color:var(--text); font-size:14px; margin-right:2px;
}
.mm2-stat-dot {
  width:3px; height:3px; border-radius:50%; background:var(--text4);
}
.mm2-regen-btn {
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:10px;
  background:var(--bg); border:1px solid var(--border);
  color:var(--text3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.mm2-regen-btn:hover {
  background:var(--bg3); color:var(--text); border-color:var(--c-text, #8b5cf6);
}


/* ── Card Grid ── */
.mm2-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(280px,100%), 1fr));
  gap:16px;
}

/* ── Concept Card ── */
.mm2-card {
  position:relative; border-radius:16px; overflow:hidden;
  background:var(--bg); border:1.5px solid var(--card-border);
  cursor:pointer; transition:all .25s cubic-bezier(.22,1,.36,1);
  animation:mm2-card-in .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes mm2-card-in {
  from { opacity:0; transform:translateY(16px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.mm2-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(var(--card-glow), .15);
  border-color:var(--card-accent);
}
.mm2-card-open {
  border-color:var(--card-accent);
  box-shadow:0 8px 32px rgba(var(--card-glow), .18);
}

/* Accent bar on left */
.mm2-card-accent {
  position:absolute; top:0; left:0; width:4px; height:100%;
  background:var(--card-accent);
  border-radius:4px 0 0 4px;
}

.mm2-card-body { padding:18px 18px 16px 22px; }

/* Card header row */
.mm2-card-head {
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.mm2-card-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--card-accent);
  box-shadow:0 0 10px rgba(var(--card-glow), .35);
  flex-shrink:0;
}
.mm2-card-title {
  flex:1; font-size:14px; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mm2-card-badge {
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px;
  background:var(--card-bg); color:var(--card-accent);
  border:1px solid var(--card-border);
  flex-shrink:0;
}
.mm2-card-chevron {
  color:var(--text4); flex-shrink:0;
  transition:transform .25s;
}
.mm2-card-open .mm2-card-chevron {
  transform:rotate(180deg); color:var(--card-accent);
}

/* Card preview (collapsed with >2 details) */
.mm2-card-preview {
  font-size:12px; color:var(--text3); line-height:1.5;
  margin-top:4px; padding-left:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Card details (expanded) */
.mm2-card-details {
  display:flex; flex-direction:column; gap:8px;
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--card-border);
}
.mm2-details-open {
  animation:mm2-details-in .3s cubic-bezier(.22,1,.36,1);
}
@keyframes mm2-details-in {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.mm2-detail-row {
  display:flex; align-items:flex-start; gap:8px;
  font-size:12px; color:var(--text2); line-height:1.5;
}
.mm2-detail-icon {
  width:5px; height:5px; border-radius:50%; flex-shrink:0;
  margin-top:6px; opacity:.7;
}

/* Connection link tags */
.mm2-card-links {
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:12px; padding-top:10px;
  border-top:1px solid var(--card-border);
}
.mm2-link-tag {
  font-size:10px; font-weight:600; padding:3px 10px; border-radius:8px;
  background:color-mix(in srgb, var(--tag-color) 10%, transparent);
  color:var(--tag-color);
  border:1px solid color-mix(in srgb, var(--tag-color) 25%, transparent);
  cursor:pointer; transition:all .2s;
  white-space:nowrap;
}
.mm2-link-tag:hover {
  background:color-mix(in srgb, var(--tag-color) 18%, transparent);
  transform:scale(1.04);
}

/* ── Loading State ── */
.mm2-loading {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:70px 24px; text-align:center;
}
/* legacy ring loader kept for any remaining callers */
.mm2-loading-rings { position:relative; width:80px; height:80px; margin-bottom:24px; }
.mm2-ring { position:absolute; inset:0; border-radius:50%; border:2px solid transparent; }
.mm2-ring-1 { border-top-color:#8b5cf6; border-right-color:rgba(139,92,246,.3); animation:mm2-spin 1.6s linear infinite; }
.mm2-ring-2 { inset:8px; border-top-color:#06b6d4; border-left-color:rgba(6,182,212,.3); animation:mm2-spin 2.2s linear infinite reverse; }
.mm2-ring-3 { inset:16px; border-top-color:#f59e0b; border-bottom-color:rgba(245,158,11,.3); animation:mm2-spin 1.8s linear infinite; }
@keyframes mm2-spin { to { transform:rotate(360deg); } }
.mm2-loading-star { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.mm2-loading-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; }
.mm2-loading-sub { font-size:12px; color:var(--text3); }

/* ═══════════════════════════════════════════════════════════════
   OPTIMA LOADER — "neural constellation"
   Aurora glow · orbiting nodes · pulsing core · connection sparks
   ═══════════════════════════════════════════════════════════════ */
.opl {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:64px 24px; text-align:center;
}
.opl-stage {
  position:relative; width:160px; height:160px; margin-bottom:30px;
  display:flex; align-items:center; justify-content:center;
}

/* Aurora — soft breathing glow behind everything */
.opl-aurora {
  position:absolute; inset:-30px; border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(139,92,246,.40) 0%, transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(6,182,212,.34) 0%, transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(236,72,153,.28) 0%, transparent 55%);
  filter:blur(18px); opacity:.85;
  animation:oplAurora 5.5s ease-in-out infinite;
}
@keyframes oplAurora {
  0%,100% { transform:scale(1) rotate(0deg); opacity:.7; }
  50%     { transform:scale(1.12) rotate(140deg); opacity:1; }
}

/* faint dotted grid that drifts — gives a "field" feel */
.opl-grid {
  position:absolute; inset:0; border-radius:50%;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size:14px 14px; mask-image:radial-gradient(circle, #000 55%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle, #000 55%, transparent 72%);
  animation:oplGrid 9s linear infinite;
}
@keyframes oplGrid { to { background-position:14px 28px; } }

/* Orbit rings — each carries a glowing node */
.opl-orbits { position:absolute; inset:0; }
.opl-orbit {
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid transparent;
}
.opl-orbit i {
  position:absolute; top:-5px; left:50%; width:10px; height:10px; margin-left:-5px;
  border-radius:50%;
}
.opl-orbit-1 { border-top-color:rgba(139,92,246,.35); border-right-color:rgba(139,92,246,.12); animation:oplSpin 2.6s linear infinite; }
.opl-orbit-1 i { background:#8b5cf6; box-shadow:0 0 12px 2px rgba(139,92,246,.9); }
.opl-orbit-2 { inset:22px; border-top-color:rgba(6,182,212,.35); border-left-color:rgba(6,182,212,.12); animation:oplSpin 3.6s linear infinite reverse; }
.opl-orbit-2 i { background:#06b6d4; box-shadow:0 0 12px 2px rgba(6,182,212,.9); }
.opl-orbit-3 { inset:44px; border-top-color:rgba(245,158,11,.4); border-bottom-color:rgba(245,158,11,.12); animation:oplSpin 2.1s linear infinite; }
.opl-orbit-3 i { background:#f59e0b; box-shadow:0 0 12px 2px rgba(245,158,11,.9); }
@keyframes oplSpin { to { transform:rotate(360deg); } }

/* Core — the Oryon star, breathing with a halo */
.opl-core {
  position:absolute; top:50%; left:50%; width:58px; height:58px;
  transform:translate(-50%,-50%); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(139,92,246,.30) 0%, transparent 70%);
  animation:oplCore 2.4s ease-in-out infinite;
}
.opl-core-star {
  width:44px; height:44px; object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(139,92,246,.7));
  animation:oplStar 6s linear infinite;
}
@keyframes oplCore { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.12); } }
@keyframes oplStar { to { transform:rotate(360deg); } }

/* Sparks — tiny connection pulses that travel and fade */
.opl-spark {
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:#fff; opacity:0;
}
.opl-spark-1 { top:24%; left:20%; box-shadow:0 0 8px 2px rgba(139,92,246,.9); animation:oplSpark 2.8s ease-in-out infinite; }
.opl-spark-2 { top:70%; left:30%; box-shadow:0 0 8px 2px rgba(6,182,212,.9); animation:oplSpark 2.8s ease-in-out infinite .9s; }
.opl-spark-3 { top:40%; left:78%; box-shadow:0 0 8px 2px rgba(245,158,11,.9); animation:oplSpark 2.8s ease-in-out infinite 1.7s; }
@keyframes oplSpark {
  0% { opacity:0; transform:translate(0,0) scale(.4); }
  35% { opacity:1; transform:translate(14px,-12px) scale(1); }
  70% { opacity:0; transform:translate(28px,-22px) scale(.4); }
  100% { opacity:0; }
}

/* Text */
.opl-title {
  font-size:17px; font-weight:800; margin-bottom:7px;
  background:linear-gradient(90deg, var(--text) 0%, #8b5cf6 35%, #06b6d4 60%, var(--text) 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:oplShimmer 3s linear infinite;
}
@keyframes oplShimmer { to { background-position:220% center; } }
.opl-sub {
  font-size:12.5px; color:var(--text3); min-height:16px;
  transition:opacity .24s var(--ease), transform .24s var(--ease);
}
.opl-sub-out { opacity:0; transform:translateY(4px); }

/* Shimmer progress bar */
.opl-bar {
  position:relative; width:180px; height:4px; margin-top:18px;
  border-radius:99px; overflow:hidden; background:var(--border1);
}
.opl-bar span {
  position:absolute; top:0; left:0; height:100%; width:42%; border-radius:99px;
  background:linear-gradient(90deg, transparent, #8b5cf6, #06b6d4, transparent);
  animation:oplBar 1.5s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes oplBar { 0% { left:-45%; } 100% { left:105%; } }

@media(prefers-reduced-motion:reduce) {
  .opl-aurora, .opl-grid, .opl-orbit, .opl-core, .opl-core-star,
  .opl-spark, .opl-title, .opl-bar span { animation:none !important; }
  .opl-spark { display:none; }
}
@media(max-width:580px) {
  .opl-stage { width:140px; height:140px; }
}

/* ── Empty State ── */
.mm2-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 24px; text-align:center; min-height:360px;
}
.mm2-empty-art { margin-bottom:24px; opacity:.8; }
.mm2-empty-title {
  font-size:18px; font-weight:700; color:var(--text); margin-bottom:8px;
}
.mm2-empty-sub {
  font-size:13px; color:var(--text3); max-width:380px; line-height:1.6; margin-bottom:4px;
}
.mm2-gen-btn {
  margin-top:20px; display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:12px; font-size:14px; font-weight:700;
  background:linear-gradient(135deg, #8b5cf6, #6d28d9);
  color:#fff; border:none; cursor:pointer;
  box-shadow:0 4px 16px rgba(139,92,246,.3);
  transition:all .2s;
}
.mm2-gen-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(139,92,246,.4);
}

/* ── Mobile ── */
@media(max-width:600px){
  .mm2-page { padding:0 10px 32px; }
  .mm2-hero { padding:28px 16px 22px; }
  .mm2-hero-title { font-size:18px; }
  .mm2-grid { grid-template-columns:1fr; gap:12px; }
  .mm2-card-body { padding:14px 14px 12px 18px; }
}



/* ════════════════════════════════════════════════════════════
   AUDIO
════════════════════════════════════════════════════════════ */

.aud-page { max-width:680px; margin:0 auto; }

.aud-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:24px;
}
.aud-header-left { display:flex; align-items:center; gap:14px; }
.aud-icon {
  font-size:24px; width:46px; height:46px; border-radius:14px;
  background:var(--accent-bg); display:flex; align-items:center; justify-content:center;
}
.aud-title { font-size:16px; font-weight:800; color:var(--text); }
.aud-sub { font-size:12px; color:var(--text3); margin-top:2px; }

/* Player */
.aud-player {
  background:var(--bg3); border:1px solid var(--border2); border-radius:20px;
  padding:24px; margin-bottom:20px;
  position:relative; overflow:hidden;
}
.aud-player::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, #e879f9, var(--accent), var(--accent2));
}

.aud-player-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.aud-now-playing {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:var(--text2);
  text-transform:uppercase; letter-spacing:.5px;
}
.aud-live-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--green); animation:audPulse 1.5s ease-in-out infinite;
}
@keyframes audPulse {
  0%, 100% { opacity:1; }
  50% { opacity:.3; }
}

.aud-speed-row { display:flex; gap:4px; }
.aud-speed-btn {
  padding:4px 10px; border-radius:8px; font-size:11px; font-weight:700;
  background:var(--bg4); border:1px solid var(--border); color:var(--text3);
  cursor:pointer; transition:all .15s;
}
.aud-speed-btn:hover { color:var(--text2); border-color:var(--border3); }
.aud-speed-btn.active {
  background:var(--accent-bg); color:var(--accent2); border-color:var(--accent-border);
}

/* Voice picker */
.aud-voice-picker {
  margin-bottom:16px; display:flex; align-items:center; gap:12px;
}
.aud-voice-label {
  font-size:10px; font-weight:800; letter-spacing:1px; color:var(--text3);
  text-transform:uppercase; flex-shrink:0;
}
.aud-voice-row { display:flex; gap:4px; flex-wrap:wrap; }
.aud-voice-btn {
  padding:5px 12px; border-radius:10px; font-size:11px; font-weight:700;
  background:var(--bg4); border:1px solid var(--border); color:var(--text3);
  cursor:pointer; transition:all .15s;
}
.aud-voice-btn:hover { color:var(--text2); border-color:var(--border3); }
.aud-voice-btn.active {
  background:linear-gradient(135deg, rgba(124,111,247,0.15), rgba(155,135,245,0.15));
  color:var(--accent2); border-color:var(--accent-border);
}

/* Progress */
.aud-progress-bar {
  height:5px; background:var(--bg5); border-radius:99px;
  margin-bottom:20px; overflow:hidden;
}
.aud-progress-fill {
  height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  transition:width .3s;
}
.aud-progress-animate {
  box-shadow:0 0 12px var(--accent-glow);
}

/* Controls */
.aud-controls {
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.aud-ctrl-btn {
  border:none; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  border-radius:50%; transition:all .2s;
}
.aud-ctrl-main {
  width:56px; height:56px; font-size:22px;
  background:linear-gradient(135deg, var(--accent), #9b87f5);
  color:white;
  box-shadow:0 4px 20px var(--accent-glow);
}
.aud-ctrl-main:hover { transform:scale(1.08); box-shadow:0 6px 28px var(--accent-glow); }
.aud-ctrl-main:active { transform:scale(.96); }

.aud-ctrl-secondary {
  width:40px; height:40px; font-size:16px;
  background:var(--bg4); color:var(--text2);
  border:1px solid var(--border2);
}
.aud-ctrl-secondary:hover { background:var(--bg5); color:var(--text); }
.aud-ctrl-secondary:disabled { opacity:.3; cursor:not-allowed; }

/* Script */
.aud-script {
  background:var(--bg3); border:1px solid var(--border); border-radius:16px;
  padding:24px; animation:rcSlideIn .3s var(--ease);
}
.aud-script-label {
  font-size:10px; font-weight:800; letter-spacing:1.2px; color:var(--text3);
  text-transform:uppercase; margin-bottom:14px;
}
.aud-script-body {
  font-size:14px; line-height:2; color:var(--text3);
}
.aud-sentence { transition:color .3s, opacity .3s; }
.aud-sentence-active { color:var(--text); font-weight:600; }
.aud-sentence-done { color:var(--text2); }

/* Wave animation */
.aud-wave {
  display:flex; align-items:center; justify-content:center;
  gap:4px; height:40px;
}
.aud-wave span {
  width:4px; border-radius:99px;
  background:linear-gradient(180deg, var(--accent), var(--accent2));
  animation:audWave 1.2s ease-in-out infinite;
}
.aud-wave span:nth-child(1) { height:16px; animation-delay:0s; }
.aud-wave span:nth-child(2) { height:28px; animation-delay:.15s; }
.aud-wave span:nth-child(3) { height:36px; animation-delay:.3s; }
.aud-wave span:nth-child(4) { height:28px; animation-delay:.45s; }
.aud-wave span:nth-child(5) { height:16px; animation-delay:.6s; }

@keyframes audWave {
  0%, 100% { transform:scaleY(.4); }
  50% { transform:scaleY(1); }
}

.aud-wave-idle span {
  animation-duration:2.5s;
  opacity:.4;
}

/* Loading */
.aud-loading {
  display:flex; flex-direction:column; align-items:center;
  padding:60px 20px; text-align:center;
}
.aud-loading-visual { margin-bottom:20px; }
.aud-loading-text { font-size:13px; color:var(--text3); }

/* Empty */
.aud-empty {
  text-align:center; padding:60px 20px;
}
.aud-empty-visual { margin-bottom:20px; }
.aud-empty-title { font-size:16px; font-weight:700; color:var(--text2); margin-bottom:8px; }
.aud-empty-sub { font-size:13px; color:var(--text3); line-height:1.6; max-width:360px; margin:0 auto; }

@media (max-width:580px) {
  .aud-player { padding:20px 16px; }
  .aud-controls { gap:12px; }
  .aud-ctrl-main { width:50px; height:50px; font-size:20px; }
  .aud-script { padding:18px 16px; }
  .aud-script-body { font-size:13px; }
}

/* ════════════════════════════════════════════════════════════
   TEACHER UI
════════════════════════════════════════════════════════════ */

.tch-page { max-width:900px; margin:0 auto; }

.tch-classrooms { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(320px,100%), 1fr)); gap:16px; }

.tch-classroom-card {
  background:var(--bg3); border:1px solid var(--border2); border-radius:16px;
  padding:18px; position:relative; overflow:hidden;
}
.tch-classroom-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--teal), var(--accent));
}
.tch-classroom-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:14px;
}
.tch-classroom-name { font-size:15px; font-weight:800; color:var(--text); }
.tch-classroom-count { font-size:11px; color:var(--text3); margin-top:2px; }

.tch-student-list {
  display:flex; flex-direction:column; gap:8px;
}
.tch-student-card {
  display:flex; align-items:center; gap:12px;
  background:var(--bg3); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; transition:border-color .15s;
}
.tch-student-card:hover { border-color:var(--border3); }
.tch-student-card.tch-selected {
  border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--bg3));
}
.tch-select-cb { cursor:pointer; }

/* Single / Bulk link toggle */
.link-mode-toggle {
  display:inline-flex; background:var(--bg3); border:1px solid var(--border);
  border-radius:9px; padding:2px; gap:2px; flex-shrink:0;
}
.lmt {
  border:none; background:transparent; color:var(--text3); cursor:pointer;
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:7px; transition:all .15s;
}
.lmt.active { background:var(--accent); color:#fff; }

/* Bulk link result summary */
.bulk-link-result {
  margin-top:14px; border-top:1px solid var(--border); padding-top:12px;
  display:flex; flex-direction:column; gap:8px;
}
.blr-row { font-size:12.5px; color:var(--text2); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.blr-tag {
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
  border-radius:6px; font-size:11px; font-weight:800; padding:0 6px;
}
.blr-tag.ok    { background:var(--green-bg, rgba(16,185,129,.15)); color:var(--green, #10b981); }
.blr-tag.warn  { background:var(--amber-bg, rgba(245,158,11,.15)); color:var(--amber, #f59e0b); }
.blr-tag.muted { background:var(--bg4, rgba(120,120,140,.15)); color:var(--text3); }
.blr-emails { flex-basis:100%; font-size:11px; color:var(--text3); padding-left:30px; line-height:1.5; word-break:break-word; }

/* Sticky bulk-unlink action bar */
.tch-bulk-bar {
  position:sticky; bottom:0; z-index:20; margin-top:-60px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  padding:12px 16px; box-shadow:0 -6px 20px rgba(0,0,0,.18);
}
.tch-bulk-count { font-size:13px; font-weight:700; color:var(--text); }

/* ── Homework: Create form redesign (stepped, cleaner) ── */
.hw-create-card { padding:20px 22px; }
.hw-create-head { margin-bottom:18px; }
.hw-step { margin-bottom:20px; }
.hw-step:last-of-type { margin-bottom:14px; }
.hw-step-label {
  display:flex; align-items:center; gap:9px; margin-bottom:10px;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text2);
}
.hw-step-num {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; background:var(--accent); color:#fff;
}
.hw-picker {
  border:1px solid var(--border1); border-radius:14px; overflow:hidden;
  max-height:240px; overflow-y:auto; background:var(--bg2);
}
.hw-assign-btn {
  width:100%; padding:14px; font-size:14.5px; font-weight:700; border-radius:13px; margin-top:4px;
}

/* AI question generator (teacher) */
.hw-aigen {
  margin-bottom:14px; padding:14px; border-radius:14px;
  background:linear-gradient(135deg, rgba(124,111,247,.10), rgba(6,182,212,.06));
  border:1px solid rgba(124,111,247,.22);
}
.hw-aigen-head { font-size:12.5px; font-weight:800; color:var(--accent2); margin-bottom:8px; }
.hw-aigen-head span { font-weight:500; color:var(--text3); }

/* "✨ Questions" button on source cards */
.src-quiz-btn {
  font-size:11px !important; font-weight:700; padding:4px 10px !important; width:auto !important;
  background:var(--accent-bg) !important; color:var(--accent2) !important;
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important; border-radius:8px;
}
.src-quiz-btn:hover { background:var(--accent) !important; color:#fff !important; }

/* Homework log rows — subtle polish */
.hw-row { transition:border-color .15s, background .15s; }
.hw-log-list .hw-row:hover { border-color:var(--border3) !important; }

/* ── Homework Log — organised, with sliding side panel ── */

/* Flex layout so Create + Log share width and animate smoothly */
.hw-grid { display:flex; gap:14px; align-items:flex-start; }
.hw-create-card { flex:1 1 0; min-width:0; }
.hw-log-card {
  flex:1 1 0; min-width:0; position:relative; overflow:hidden;
  transition: flex-grow .42s cubic-bezier(.4,0,.2,1), flex-basis .42s cubic-bezier(.4,0,.2,1);
}

/* Collapsed → slim vertical rail; Create card takes the rest */
.hw-grid-collapsed .hw-log-card { flex-grow:0; flex-basis:56px; }
.hw-log-inner { transition:opacity .2s var(--ease); }
.hw-grid-collapsed .hw-log-inner { display:none; }

/* The rail (only visible when collapsed) */
.hw-rail { display:none; }
.hw-grid-collapsed .hw-rail {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  width:100%; min-height:160px; padding:14px 0; cursor:pointer;
  background:none; border:none; color:var(--text2);
}
.hw-grid-collapsed .hw-rail:hover { color:var(--accent2); }
.hw-rail-icon { display:flex; color:var(--accent2); }
.hw-rail-label {
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:12.5px; font-weight:800; letter-spacing:.04em; color:var(--text2);
  white-space:nowrap;
}

.hw-log-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:14px;
}
.hw-log-headline { display:flex; align-items:center; gap:9px; min-width:0; }
.hw-log-count {
  font-size:11px; font-weight:800; min-width:22px; height:22px; padding:0 7px;
  border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-bg); color:var(--accent2);
}
.hw-log-head-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.hw-collapse-btn {
  width:30px; height:30px; border-radius:9px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg3); border:1px solid var(--border2); color:var(--text2);
  transition:all .15s;
}
.hw-collapse-btn:hover { background:var(--accent-bg); color:var(--accent2); border-color:transparent; }

/* Mobile: stack, and collapse to a slim horizontal bar instead of a side rail */
@media(max-width:760px){
  .hw-grid { flex-direction:column; }
  .hw-create-card, .hw-log-card { width:100%; flex-basis:auto; }
  .hw-grid-collapsed .hw-log-card { flex-basis:auto; }
  .hw-grid-collapsed .hw-rail {
    flex-direction:row; justify-content:center; min-height:0; padding:14px;
  }
  .hw-rail-label { writing-mode:horizontal-tb; transform:none; }
}

/* Tools dropdown */
.hw-tools { position:relative; }
.hw-tools-menu {
  position:absolute; right:0; top:calc(100% + 6px); z-index:30;
  background:var(--bg2); border:1px solid var(--border2); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.22); padding:6px; min-width:184px;
  display:flex; flex-direction:column; gap:2px;
}
.hw-tools-item {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; color:var(--text2);
  font-size:13px; font-weight:600; padding:9px 10px; border-radius:8px;
  font-family:var(--font);
}
.hw-tools-item:hover { background:var(--bg3); color:var(--text); }

/* Stats chips — now clickable filters */
.hw-stats { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.hw-stat {
  font-size:11.5px; font-weight:600; color:var(--text2);
  background:var(--bg3); border:1px solid var(--border1);
  padding:5px 12px; border-radius:20px; cursor:pointer;
  font-family:var(--font); transition:all .15s;
}
.hw-stat:hover { border-color:var(--border3); color:var(--text); }
.hw-stat.active {
  background:color-mix(in srgb, var(--chip, var(--accent)) 16%, transparent);
  border-color:color-mix(in srgb, var(--chip, var(--accent)) 50%, transparent);
  color:var(--chip, var(--accent2));
}

/* List + rows */
.hw-log-list { display:flex; flex-direction:column; gap:2px; }
.hw-row { border-radius:12px; transition:background .15s; }
.hw-selecting .hw-row:hover { background:var(--bg3); }
.hw-row-sel { background:color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.hw-kebab {
  width:28px; height:28px; border-radius:8px; cursor:pointer; flex-shrink:0;
  border:1px solid var(--border1); background:var(--bg3); color:var(--text2);
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.hw-kebab:hover { background:var(--bg4, var(--bg2)); color:var(--text); }
.hw-row-actions {
  display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;
  padding-top:10px; border-top:1px dashed var(--border1);
}
.hw-bulk-bar { margin-top:14px; }

/* ── Install-to-home-screen banner ── */
.install-banner {
  position:fixed; left:12px; right:12px; z-index:1200;
  /* Sit above the mobile bottom nav + iOS Safari toolbar / home indicator. */
  bottom:calc(78px + env(safe-area-inset-bottom, 0px));
  max-width:480px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:16px;
  background:var(--bg2); border:1px solid var(--border2);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  transform:translateY(140%); opacity:0; transition:transform .35s cubic-bezier(.34,1.3,.64,1), opacity .35s;
}
.install-banner.install-in { transform:translateY(0); opacity:1; }
.install-ic { width:40px; height:40px; border-radius:10px; flex-shrink:0; }
.install-body { flex:1; min-width:0; }
.install-title { font-size:14px; font-weight:800; color:var(--text); }
.install-sub { font-size:12px; color:var(--text3); line-height:1.45; margin-top:2px; }
.install-share { font-family:-apple-system, system-ui; }
.install-btn {
  flex-shrink:0; border:none; cursor:pointer; font-family:var(--font);
  font-size:12.5px; font-weight:700; padding:9px 14px; border-radius:11px;
  background:var(--bg3); color:var(--text2);
}
.install-btn-primary { background:var(--accent); color:#fff; }
.install-btn-primary:hover { filter:brightness(1.08); }
.install-x {
  position:absolute; top:6px; right:8px; border:none; background:none; cursor:pointer;
  color:var(--text4); font-size:12px; padding:4px;
}

/* ── Notifications opt-in: dashboard card (passive nudge when off) ── */
.notif-dash-card {
  display:flex; align-items:center; gap:13px; margin:0 0 16px;
  padding:14px 15px; border-radius:16px;
  background:linear-gradient(135deg, var(--accent-bg), transparent);
  border:1px solid var(--accent-border);
}
.notif-dash-ic {
  width:40px; height:40px; border-radius:11px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:var(--card); border:1px solid var(--accent-border);
}
.notif-dash-body { flex:1; min-width:0; }
.notif-dash-title { font-size:14px; font-weight:800; color:var(--text); }
.notif-dash-sub { font-size:12px; color:var(--text2); line-height:1.45; margin-top:2px; }
.notif-dash-btn {
  flex:none; background:var(--accent); color:#fff; border:0; border-radius:11px;
  padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap;
  font-family:inherit; transition:filter .12s, transform .12s;
}
.notif-dash-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* ── Notifications opt-in: iPhone install walkthrough overlay ── */
.ios-steps-overlay {
  position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
  padding:22px; background:rgba(0,0,0,.6); backdrop-filter:blur(3px);
}
.ios-steps-card {
  width:100%; max-width:380px; background:var(--card); border:1px solid var(--border2);
  border-radius:20px; padding:22px; box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.ios-steps-h { font-size:17px; font-weight:800; color:var(--text); }
.ios-steps-sub { font-size:12.5px; color:var(--text2); line-height:1.5; margin-top:5px; }
.ios-steps-list { margin:16px 0 18px; padding-left:20px; display:flex; flex-direction:column; gap:11px; }
.ios-steps-list li { font-size:13.5px; color:var(--text); line-height:1.5; }
.ios-steps-list b { font-weight:700; }
.ios-steps-ic { display:inline-block; }
.ios-steps-close {
  width:100%; background:var(--accent); color:#fff; border:0; border-radius:12px;
  padding:12px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit;
}
.ios-steps-close:hover { filter:brightness(1.08); }

/* ── Legal docs (Privacy / Terms / Refunds) overlay ── */
.auth-legal-consent {
  margin-top:14px; font-size:11px; color:var(--text3); text-align:center; line-height:1.5;
}
.auth-legal-consent button {
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--accent2); font-weight:700; font-size:11px; font-family:inherit;
}

/* Signup consent — an act, not a notice. Sits above Create Account. */
.auth-consent { margin:4px 0 14px; }
.auth-consent-row {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px;
  font-size:12px; color:var(--text2); line-height:1.55;
}
.auth-consent-row:hover { border-color:var(--accent); }
.auth-consent-row input[type="checkbox"] {
  width:18px; height:18px; margin:1px 0 0; flex:0 0 auto;
  accent-color:var(--accent); cursor:pointer;
}
.auth-consent-row button {
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--accent2); font-weight:700; font-size:12px; font-family:inherit;
}
.auth-consent-row.consent-missing {
  border-color:var(--red, #ef4444);
  background:var(--red-bg, rgba(239,68,68,.08));
}
/* ABOVE the loading screen (9999), not below it. This overlay can be raised
   while the splash is still on screen - it is awaited before showApp() - and at
   9100 it rendered behind it, which locked every account out of the app. */
.legal-overlay {
  position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,.65); backdrop-filter:blur(3px);
}
.legal-card {
  width:100%; max-width:640px; max-height:86vh; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border2); border-radius:18px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.legal-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 12px 12px 16px; border-bottom:1px solid var(--border); flex:none;
}
.legal-tabs { display:flex; gap:4px; background:var(--bg2); padding:4px; border-radius:11px; }
.legal-tab {
  border:none; background:none; color:var(--text3); font-family:inherit;
  font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:8px; cursor:pointer; transition:.12s;
}
.legal-tab.on { background:var(--card); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.15); }
.legal-close {
  flex:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--border2);
  background:var(--bg3); color:var(--text2); font-size:14px; cursor:pointer;
}
.legal-close:hover { color:var(--text); border-color:var(--border3); }
.legal-body { padding:20px 22px 26px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.legal-body h1 { font-size:20px; font-weight:800; color:var(--text); margin:0 0 4px; }
.legal-body h2 { font-size:14.5px; font-weight:700; color:var(--text); margin:20px 0 6px; }
.legal-body p, .legal-body li { font-size:13px; color:var(--text2); line-height:1.6; }
.legal-body b { color:var(--text); }
.legal-body ul { margin:6px 0; padding-left:20px; display:flex; flex-direction:column; gap:5px; }
.legal-meta { font-size:11px !important; color:var(--text3) !important; margin-top:0; }

/* ── Upgrade / paywall screen ── */
.upgrade-overlay {
  position:fixed; inset:0; z-index:9200; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
}
.upgrade-card {
  width:100%; max-width:400px; background:var(--card); border:1px solid var(--border2);
  border-radius:22px; padding:26px 24px 22px; text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.upgrade-spark {
  width:54px; height:54px; margin:0 auto 14px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background:linear-gradient(135deg, var(--accent-bg), transparent); border:1px solid var(--accent-border);
}
.upgrade-title { font-size:19px; font-weight:800; color:var(--text); letter-spacing:-.2px; }
.upgrade-body { font-size:13px; color:var(--text2); line-height:1.55; margin-top:8px; }
.upgrade-body b { color:var(--text); }
.upgrade-plan {
  margin:18px 0; padding:16px; border-radius:16px; text-align:left;
  background:var(--bg2); border:1px solid var(--border2);
}
.upgrade-plan-name { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent2); }
.upgrade-plan-price { font-size:26px; font-weight:800; color:var(--text); margin:2px 0 10px; }
.upgrade-plan-price span { font-size:13px; font-weight:600; color:var(--text3); }
.upgrade-plan-feats { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.upgrade-plan-feats li { font-size:12.5px; color:var(--text2); line-height:1.4; }
.upgrade-cta {
  width:100%; background:var(--accent); color:#fff; border:0; border-radius:13px;
  padding:13px; font-weight:800; font-size:14.5px; cursor:pointer; font-family:inherit;
  box-shadow:0 6px 18px rgba(124,111,247,.35); transition:filter .12s, transform .12s;
}
.upgrade-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }
.upgrade-dismiss {
  width:100%; background:none; border:0; color:var(--text3); font-family:inherit;
  font-size:12.5px; font-weight:600; padding:12px 0 2px; cursor:pointer;
}
.upgrade-dismiss:hover { color:var(--text2); }

/* ── AI usage chip (free daily allowance) ── */
.ai-usage-chip {
  display:inline-flex; align-items:center; gap:7px; margin-bottom:16px;
  font-size:12px; font-weight:600; padding:7px 13px; border-radius:20px;
  border:1px solid var(--border1);
}
.ai-usage-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ai-chip-ok { background:var(--bg3); color:var(--text2); }
.ai-chip-ok .ai-usage-dot { background:var(--green, #34d97a); }
.ai-chip-low { background:var(--amber-bg, rgba(245,158,11,.12)); color:var(--amber, #f59e0b); border-color:color-mix(in srgb, var(--amber,#f59e0b) 30%, transparent); }
.ai-chip-low .ai-usage-dot { background:var(--amber, #f59e0b); }
.ai-chip-out { background:var(--red-bg, rgba(244,114,114,.12)); color:var(--red, #ef4444); border-color:color-mix(in srgb, var(--red,#ef4444) 30%, transparent); }
.ai-chip-out .ai-usage-dot { background:var(--red, #ef4444); }
/* Borrowing against tomorrow is a deliberate, allowed state — it should read
   as information, not as a warning the learner has done something wrong. */
.ai-chip-borrow { background:var(--accent-bg, rgba(90,63,192,.12)); color:var(--accent, #5a3fc0); border-color:color-mix(in srgb, var(--accent,#5a3fc0) 30%, transparent); }
.ai-chip-borrow .ai-usage-dot { background:var(--accent, #5a3fc0); }
.ai-usage-upsell { font-weight:700; opacity:.85; }

/* ── Student insights: honest verdict banner + strengths strip ── */
.ins-verdict {
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
  padding:16px 18px; border-radius:16px;
  background:linear-gradient(135deg, rgba(124,111,247,.12), rgba(6,182,212,.08));
  border:1px solid rgba(124,111,247,.22);
}
.ins-verdict-icon { font-size:26px; flex-shrink:0; }
.ins-verdict-body { flex:1; min-width:0; }
.ins-verdict-label {
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent2); margin-bottom:3px;
}
.ins-verdict-text { font-size:14px; line-height:1.5; color:var(--text); }
.ins-verdict-btn {
  flex-shrink:0; border:none; cursor:pointer; font-family:var(--font);
  font-size:12.5px; font-weight:700; padding:10px 16px; border-radius:12px;
  background:var(--accent); color:#fff; transition:all .15s;
}
.ins-verdict-btn:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 6px 16px rgba(124,111,247,.3); }

.ins-solid-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.ins-solid-chip {
  font-size:12.5px; font-weight:600; color:var(--text2);
  background:var(--green-bg, rgba(52,217,122,.12)); border:1px solid color-mix(in srgb, var(--green, #34d97a) 30%, transparent);
  padding:6px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:6px;
}
.ins-solid-pct { font-weight:800; color:var(--green, #34d97a); }

@media(max-width:620px){
  .ins-verdict { flex-direction:column; align-items:flex-start; }
  .ins-verdict-btn { width:100%; }
}

/* ── Review session overlay (spaced repetition) ── */
.rev-overlay {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(8,8,14,.72); backdrop-filter:blur(6px);
  animation:revFade .2s ease;
}
@keyframes revFade { from{ opacity:0 } to{ opacity:1 } }
.rev-modal {
  position:relative; width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  background:var(--bg1); border:1px solid var(--border2); border-radius:22px;
  padding:22px; box-shadow:0 24px 70px rgba(0,0,0,.5);
  animation:revPop .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes revPop { from{ transform:scale(.94); opacity:0 } to{ transform:scale(1); opacity:1 } }
.rev-close {
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  border:none; background:var(--bg3); color:var(--text3); cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.rev-close:hover { background:var(--red-bg); color:var(--red); }
.rev-center { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:30px 12px; }
.rev-title { font-size:19px; font-weight:800; color:var(--text); }
.rev-sub { font-size:13.5px; color:var(--text3); line-height:1.55; max-width:380px; }

/* Prepare → pick a tool */
.rev-prep-head { text-align:center; margin-bottom:16px; }
.rev-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:20px; }
.rev-chip {
  font-size:11.5px; font-weight:600; color:var(--text2);
  background:var(--bg3); border:1px solid var(--border1); padding:5px 11px; border-radius:20px;
}
.rev-chip-more { color:var(--text4); }
.rev-tools { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.rev-tool {
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  padding:18px 10px; border-radius:16px; text-align:center;
  background:var(--bg2); border:1px solid var(--border1); transition:all .15s; font-family:var(--font);
}
.rev-tool:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 22px rgba(124,111,247,.18); }
.rev-tool-ic { font-size:26px; }
.rev-tool-name { font-size:13.5px; font-weight:800; color:var(--text); }
.rev-tool-desc { font-size:11px; color:var(--text3); }
@media(max-width:520px){ .rev-tools { grid-template-columns:1fr; } .rev-tool { flex-direction:row; justify-content:flex-start; gap:12px; text-align:left; padding:14px; } }

/* Explain view */
.rev-explain-body { font-size:14px; line-height:1.65; color:var(--text2); margin-bottom:16px; }
.rev-explain-body h3 { font-size:16px; color:var(--text); margin:14px 0 6px; }
.rev-explain-body h4 { font-size:14px; color:var(--accent2); margin:14px 0 4px; }
.rev-explain-body ul { margin:6px 0 6px 18px; }
.rev-explain-body li { margin:3px 0; }
.rev-explain-body p { margin:6px 0; }

.rev-head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.rev-badge { font-size:11px; font-weight:800; color:var(--accent2); background:var(--accent-bg); padding:4px 10px; border-radius:20px; flex-shrink:0; }
.rev-progress { flex:1; height:6px; border-radius:99px; background:var(--bg3); overflow:hidden; }
.rev-progress-fill { height:100%; background:linear-gradient(90deg,#7c6ff7,#06b6d4); border-radius:99px; transition:width .3s; }
.rev-count { font-size:12px; font-weight:700; color:var(--text4); font-variant-numeric:tabular-nums; }

.rev-card {
  background:var(--bg2); border:1px solid var(--border1); border-radius:16px;
  padding:22px; margin-bottom:16px; min-height:160px;
}
.rev-meta { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rev-concept { font-size:11px; font-weight:700; color:var(--text2); background:var(--bg3); padding:3px 9px; border-radius:8px; }
.rev-diff { font-size:11px; font-weight:700; text-transform:capitalize; }
.rev-question { font-size:17px; font-weight:700; color:var(--text); line-height:1.45; }
.rev-options { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.rev-option { font-size:14px; color:var(--text2); padding:10px 14px; border-radius:10px; background:var(--bg3); border:1px solid var(--border1); }
.rev-answer { margin-top:16px; padding-top:14px; border-top:1px dashed var(--border2); animation:revFade .25s ease; }
.rev-answer-label { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:6px; }
.rev-answer-text { font-size:16px; font-weight:700; color:var(--text); line-height:1.45; }
.rev-explain { font-size:13px; color:var(--text3); line-height:1.6; margin-top:10px; }

.rev-actions { display:flex; gap:10px; }
.rev-btn { flex:1; padding:13px; border-radius:13px; border:none; cursor:pointer; font-size:14px; font-weight:700; font-family:var(--font); transition:all .15s; }
.rev-btn-reveal { background:var(--accent); color:#fff; }
.rev-btn-reveal:hover { filter:brightness(1.08); transform:translateY(-1px); }
.rev-btn-good { background:var(--green-bg); color:var(--green); border:1px solid color-mix(in srgb, var(--green) 35%, transparent); }
.rev-btn-good:hover { background:var(--green); color:#fff; }
.rev-btn-bad { background:var(--bg3); color:var(--text2); border:1px solid var(--border2); }
.rev-btn-bad:hover { background:var(--amber-bg); color:var(--amber); }

/* Student search box */
.stu-search { position:relative; margin-bottom:14px; max-width:440px; }
.stu-search-icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:13px; opacity:.6; pointer-events:none;
}
.stu-search .input { padding-left:34px; }

/* Pending invite chips */
.inv-chip {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; padding:5px 6px 5px 11px; border-radius:20px;
  background:var(--amber-bg, rgba(245,158,11,.12)); color:var(--text2);
  border:1px solid color-mix(in srgb, var(--amber, #f59e0b) 30%, transparent);
}
.inv-chip button {
  border:none; cursor:pointer; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1;
  background:rgba(0,0,0,.08); color:var(--text3); padding:0;
}
.inv-chip button:hover { background:var(--red, #ef4444); color:#fff; }

/* Bulk-add-by-email disclosure inside a classroom panel */
.room-bulk > summary {
  cursor:pointer; font-size:12px; font-weight:700; color:var(--accent2);
  list-style:none; padding:6px 0; user-select:none;
}
.room-bulk > summary::-webkit-details-marker { display:none; }
.room-bulk[open] > summary { margin-bottom:2px; }

.tch-student-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.tch-student-row:last-of-type { border-bottom:none; }

.tch-student-avatar {
  width:36px; height:36px; border-radius:10px;
  background:var(--accent-bg); display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.tch-student-name { font-size:13px; font-weight:700; color:var(--text); }
.tch-student-email { font-size:11px; color:var(--text3); }

.tch-status-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}

.tch-remove-btn {
  width:24px; height:24px; border-radius:6px; border:none;
  background:transparent; color:var(--text3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px;
  transition:all .15s;
}
.tch-remove-btn:hover { background:var(--red-bg); color:var(--red); }

.tch-add-row {
  display:flex; gap:6px; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--border);
}
.tch-add-select { flex:1; }

@media (max-width:580px) {
  .tch-classrooms { grid-template-columns:1fr; }
}

/* ── Skeleton loading pulse ── */
@keyframes pulse {
  0%, 100% { opacity:.4 }
  50% { opacity:.15 }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM LOADING SYSTEM
   Skeleton shimmer cards + animated star loader
═══════════════════════════════════════════════════════════ */

/* Shimmer base — reusable on any element */
.skel {
  background:linear-gradient(110deg, var(--bg3) 30%, var(--bg4) 50%, var(--bg3) 70%);
  background-size:200% 100%;
  animation:skelShimmer 1.6s ease-in-out infinite;
  border-radius:8px;
}
@keyframes skelShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* Skeleton card — mimics a content card */
.skel-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  overflow:hidden;
}
.skel-line {
  height:12px;
  border-radius:6px;
  margin-bottom:10px;
  background:linear-gradient(110deg, var(--bg4) 30%, var(--bg5) 50%, var(--bg4) 70%);
  background-size:200% 100%;
  animation:skelShimmer 1.6s ease-in-out infinite;
}
.skel-line:last-child { margin-bottom:0; }
.skel-line.w-75 { width:75%; }
.skel-line.w-50 { width:50%; }
.skel-line.w-40 { width:40%; }
.skel-line.w-30 { width:30%; }
.skel-line.w-60 { width:60%; }
.skel-line.h-lg { height:18px; border-radius:8px; }
.skel-line.h-sm { height:8px; }
.skel-circle {
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(110deg, var(--bg4) 30%, var(--bg5) 50%, var(--bg4) 70%);
  background-size:200% 100%;
  animation:skelShimmer 1.6s ease-in-out infinite;
}
.skel-row {
  display:flex; align-items:center; gap:14px; margin-bottom:14px;
}
.skel-row:last-child { margin-bottom:0; }

/* Staggered animation delays for organic feel */
.skel-card:nth-child(2) .skel-line,
.skel-card:nth-child(2) .skel-circle { animation-delay:.15s; }
.skel-card:nth-child(3) .skel-line,
.skel-card:nth-child(3) .skel-circle { animation-delay:.3s; }
.skel-card:nth-child(4) .skel-line,
.skel-card:nth-child(4) .skel-circle { animation-delay:.45s; }

/* Star spinner — centered loading with Oryon branding */
.load-star {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:60px 20px; gap:16px;
}
.load-star-icon {
  width:48px; height:48px;
  animation:starLoadingSpin 4s cubic-bezier(.4,0,.2,1) infinite;
  filter:drop-shadow(0 0 20px rgba(124,111,247,.4));
}
.load-star-text {
  font-size:13px; font-weight:600; color:var(--text3);
  letter-spacing:.04em;
}
.load-star-sub {
  font-size:11px; color:var(--text4); margin-top:-8px;
}
.load-star-bar {
  width:120px; height:2px; border-radius:2px;
  background:rgba(255,255,255,.04); overflow:hidden; margin-top:4px;
}
.load-star-bar-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  animation:loadFill 2s ease-in-out infinite;
}

/* Fade-in for content after loading */
.fade-in {
  animation:fadeIn .35s ease-out;
}
@keyframes fadeIn {
  0%   { opacity:0; transform:translateY(8px); }
  100% { opacity:1; transform:translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   TEACHER INSIGHTS DASHBOARD
═══════════════════════════════════════════════════════════ */

.ti-page { padding:16px; max-width:900px; margin:0 auto; }

/* Header */
.ti-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; padding:0 2px; }
.ti-title { font-size:20px; font-weight:700; color:var(--text); letter-spacing:-.02em; }
.ti-subtitle { font-size:12px; color:var(--text3); margin-top:2px; }

/* Breadcrumb */
.ti-breadcrumb { display:flex; align-items:center; gap:6px; font-size:12px; margin-bottom:16px; padding:10px 14px; background:var(--bg3); border-radius:10px; }
.ti-bc-link { color:var(--accent2); cursor:pointer; font-weight:500; }
.ti-bc-link:hover { text-decoration:underline; }
.ti-bc-sep { color:var(--text4); font-size:10px; }
.ti-bc-current { color:var(--text); font-weight:600; }

/* Section labels */
.ti-section-label { font-size:13px; font-weight:700; color:var(--text); margin:16px 0 10px 2px; letter-spacing:-.01em; }

/* Empty states */
.ti-empty { text-align:center; padding:60px 20px; }
.ti-empty-icon { font-size:40px; margin-bottom:12px; }
.ti-empty-title { font-size:16px; font-weight:600; color:var(--text); margin-bottom:6px; }
.ti-empty-sub { font-size:13px; color:var(--text3); line-height:1.5; max-width:380px; margin:0 auto; }
.ti-empty-tab { text-align:center; padding:40px 20px; }

/* Teaching Priorities */
.ti-priorities { background:var(--bg3); border-radius:14px; padding:16px; margin-bottom:20px; border:1px solid var(--border); }
.ti-priorities-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:12px; }
.ti-priorities-list { display:flex; flex-direction:column; gap:8px; }
.ti-priority-card { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:var(--bg4); border-radius:10px; }
.ti-priority-num { min-width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:700; flex-shrink:0; margin-top:1px; }
.ti-priority-content { display:flex; align-items:flex-start; gap:8px; flex:1; }
.ti-priority-icon { font-size:16px; flex-shrink:0; }
.ti-priority-text { font-size:13px; color:var(--text); line-height:1.4; }
.ti-priority-evidence { font-size:11px; color:var(--text3); margin-top:2px; }

/* Subject Cards Grid */
.ti-subject-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px,100%), 1fr)); gap:12px; }
.ti-subject-card { background:var(--bg3); border:1px solid var(--border); border-radius:14px; padding:16px; cursor:pointer; transition:all .2s; }
.ti-subject-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.ti-sc-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.ti-sc-info { flex:1; min-width:0; }
.ti-sc-name { font-size:15px; font-weight:700; color:var(--text); margin-bottom:2px; }
.ti-sc-grade { font-size:11px; color:var(--text3); }
.ti-sc-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:10px; }
.ti-sc-stat { text-align:center; }
.ti-sc-stat-val { font-size:15px; font-weight:700; color:var(--text); }
.ti-sc-stat-lbl { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:.04em; margin-top:1px; }
.ti-sc-footer { display:flex; flex-wrap:wrap; gap:6px; }
.ti-sc-badge { font-size:10px; padding:3px 8px; border-radius:6px; font-weight:600; }
.ti-sc-badge-red { background:rgba(239,68,68,.1); color:var(--red); }
.ti-sc-badge-green { background:rgba(34,197,94,.1); color:var(--green); }

/* Stat Grid */
.ti-stat-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:16px; }
.ti-stat { text-align:center; background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:14px 8px; }
.ti-stat-val { font-size:20px; font-weight:700; color:var(--text); }
.ti-stat-lbl { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
.ti-stat-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.ti-stat-pill { font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px; background:var(--bg3); border:1px solid var(--border); }

/* ── Student-profile charts ──────────────────────────────────────────
   Same card idiom as .ti-stat so the charts read as part of the page
   rather than as embedded widgets. All colour comes from theme vars, so
   both themes work without a second palette. */
.ti-chart-card { background:var(--bg3); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; margin-bottom:16px; }
.ti-chart-note { font-size:11px; color:var(--text3); margin-top:10px; line-height:1.6;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ti-chart-empty { font-size:12.5px; color:var(--text3); text-align:center; padding:18px 8px; }
.ti-key { display:inline-flex; align-items:center; gap:5px; }
.ti-key i { width:9px; height:9px; border-radius:2px; display:inline-block; }

/* Topic bars: the SVG carries the shape, this list carries the names.
   Splitting them keeps the labels selectable and lets long topic names
   wrap, which they cannot do inside a stretched viewBox. */
.ti-cl-row { display:flex; align-items:baseline; gap:10px; padding:3px 0;
  font-size:12px; border-bottom:1px solid var(--border1); }
.ti-cl-row:last-child { border-bottom:none; }
.ti-cl-name { flex:1; min-width:0; color:var(--text2); overflow-wrap:anywhere; }
.ti-cl-val { font-weight:800; font-variant-numeric:tabular-nums; }

.ti-wk-axis { display:flex; margin-top:6px; }
.ti-wk-axis span { flex:1; text-align:center; font-size:9.5px; color:var(--text4);
  font-variant-numeric:tabular-nums; }

.ti-tool-row { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:12.5px; }
.ti-tool-name { width:104px; flex:none; color:var(--text2); overflow-wrap:anywhere; }
.ti-tool-bar { flex:1; height:9px; background:var(--bg4); border-radius:5px; overflow:hidden; }
.ti-tool-bar i { display:block; height:100%; background:var(--accent2); border-radius:5px; }
.ti-tool-val { width:74px; flex:none; text-align:right; color:var(--text3);
  font-variant-numeric:tabular-nums; }

@media (max-width:580px) {
  .ti-tool-name { width:80px; }
  .ti-tool-val  { width:62px; font-size:11.5px; }
  .ti-wk-axis span { font-size:8.5px; }
}

/* Tab Bar */
.ti-tab-bar { display:flex; gap:2px; background:var(--bg3); border-radius:12px; padding:3px; margin-bottom:16px; overflow-x:auto; }
.ti-tab { flex:1; padding:8px 12px; border:none; background:none; border-radius:10px; font-size:12px; font-weight:600; color:var(--text3); cursor:pointer; transition:all .2s; white-space:nowrap; }
.ti-tab.active { background:var(--accent); color:#fff; }
.ti-tab:hover:not(.active) { color:var(--text); background:var(--bg4); }

/* Topic List */
.ti-topic-list { display:flex; flex-direction:column; gap:6px; }
.ti-topic-row { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--bg3); border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:all .2s; gap:12px; }
.ti-topic-row:hover { border-color:var(--accent); background:var(--bg4); }
.ti-topic-row-compact { padding:10px 12px; }
.ti-topic-main { flex:1; min-width:0; }
.ti-topic-name { font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.ti-topic-status-dot { font-size:10px; }
.ti-topic-meta { display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }
.ti-topic-badge { font-size:10px; font-weight:600; padding:2px 8px; border-radius:6px; }
.ti-topic-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ti-topic-scores { display:flex; gap:14px; }
.ti-topic-score { text-align:right; }
.ti-topic-score-val { font-size:14px; font-weight:700; display:block; }
.ti-topic-score-lbl { font-size:9px; color:var(--text3); text-transform:uppercase; }

/* Mastery Bar */
.ti-bar { height:4px; background:var(--bg4); border-radius:4px; overflow:hidden; }
.ti-bar-fill { height:100%; border-radius:4px; transition:width .4s var(--ease); }

/* Heatmap */
.ti-heatmap-wrap { margin-bottom:16px; }
.ti-heatmap { display:flex; flex-direction:column; gap:3px; }
.ti-heatmap-cell { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-radius:8px; }
.ti-hm-name { font-size:11px; color:var(--text2); font-weight:500; }
.ti-hm-val { font-size:12px; font-weight:700; }

/* Mastery Distribution Bar */
.ti-distribution { margin-bottom:16px; }
.ti-dist-bar { display:flex; height:12px; border-radius:6px; overflow:hidden; gap:2px; }
.ti-dist-seg { border-radius:4px; min-width:4px; transition:flex .4s; }
.ti-dist-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:11px; color:var(--text3); }

/* Student List */
.ti-student-list { display:flex; flex-direction:column; gap:4px; }
.ti-student-row { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--bg3); border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:all .2s; }
.ti-student-row:hover { border-color:var(--accent); }
.ti-student-avatar { font-size:24px; width:36px; text-align:center; flex-shrink:0; }
.ti-student-info { flex:1; min-width:0; }
.ti-student-name { font-size:13px; font-weight:600; color:var(--text); }
.ti-student-meta { font-size:11px; color:var(--text3); display:flex; align-items:center; gap:4px; margin-top:2px; }
.ti-student-group-dot { font-size:8px; }
.ti-student-scores { display:flex; gap:14px; flex-shrink:0; }
.ti-student-score { text-align:center; }

/* Groups */
.ti-groups-summary { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.ti-group-pill { font-size:11px; font-weight:600; padding:5px 12px; border-radius:20px; }
.ti-group-list { display:flex; flex-direction:column; gap:3px; }
.ti-group-student { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--bg3); border-radius:10px; cursor:pointer; transition:background .2s; }
.ti-group-student:hover { background:var(--bg4); }
.ti-gs-avatar { font-size:18px; }
.ti-gs-name { flex:1; font-size:13px; color:var(--text); font-weight:500; }
.ti-gs-mastery { font-size:14px; font-weight:700; }
.ti-group-action { font-size:12px; color:var(--text3); padding:10px 14px; background:var(--bg4); border-radius:10px; margin-top:8px; line-height:1.5; }

/* Misconceptions */
.ti-mistakes-list { display:flex; flex-direction:column; gap:8px; }
.ti-mistake-card { background:var(--bg3); border:1px solid var(--border); border-left:3px solid var(--amber); border-radius:12px; padding:14px; }
.ti-mistake-compact { padding:10px 12px; }
.ti-mistake-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ti-mistake-icon { font-size:16px; }
.ti-mistake-concept { font-size:13px; font-weight:700; color:var(--text); flex:1; }
.ti-mistake-count { font-size:11px; color:var(--amber); font-weight:600; }
.ti-mistake-body { font-size:12px; color:var(--text2); }
.ti-mistake-text { margin-bottom:6px; line-height:1.5; }
.ti-mistake-detail { font-size:11px; color:var(--text3); margin-top:4px; display:flex; flex-wrap:wrap; gap:8px; }

/* Recommendations */
.ti-recs-list { display:flex; flex-direction:column; gap:8px; }
.ti-rec-card { display:flex; align-items:flex-start; gap:10px; background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:14px; }
.ti-rec-compact { padding:10px 12px; }
.ti-rec-highlight { border-color:var(--accent); background:rgba(124,111,247,.06); }
.ti-rec-header { display:flex; align-items:center; gap:8px; }
.ti-rec-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.ti-rec-priority { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ti-rec-label { font-size:11px; font-weight:700; color:var(--accent2); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.ti-rec-message { font-size:13px; color:var(--text); line-height:1.5; }
.ti-rec-evidence { font-size:11px; color:var(--text3); margin-top:4px; }

/* Student Profile Header */
.ti-student-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; padding:16px; background:var(--bg3); border:1px solid var(--border); border-radius:14px; }
.ti-sh-avatar { font-size:40px; }
.ti-sh-info { flex:1; min-width:0; }
.ti-sh-name { font-size:18px; font-weight:700; color:var(--text); }
.ti-sh-subject { font-size:12px; color:var(--text3); margin-top:2px; }

/* Strengths / Weaknesses */
.ti-sw-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.ti-sw-col { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:12px; }
.ti-sw-title { font-size:12px; font-weight:700; margin-bottom:8px; }
.ti-sw-item { display:flex; align-items:center; justify-content:space-between; padding:4px 0; font-size:12px; }
.ti-sw-name { color:var(--text2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ti-sw-val { font-weight:700; margin-left:8px; }

/* Question Type Performance */
.ti-qt-list { display:flex; flex-direction:column; gap:6px; }
.ti-qt-row { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--bg3); border-radius:10px; }
.ti-qt-name { font-size:12px; font-weight:600; color:var(--text); width:100px; flex-shrink:0; }
.ti-qt-bar-wrap { flex:1; min-width:0; }
.ti-qt-val { font-size:13px; font-weight:700; width:40px; text-align:right; }
.ti-qt-count { font-size:10px; color:var(--text3); width:70px; text-align:right; }

/* Behaviour Signals */
.ti-behaviour-signal { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; background:rgba(124,111,247,.06); border:1px solid rgba(124,111,247,.15); border-radius:12px; margin-top:10px; }
.ti-bs-icon { font-size:18px; }
.ti-bs-label { font-size:11px; font-weight:700; color:var(--accent2); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.ti-bs-text { font-size:12px; color:var(--text2); line-height:1.5; }

/* Not Attempted Students */
.ti-not-attempted { display:flex; flex-wrap:wrap; gap:6px; }
.ti-na-student { font-size:12px; padding:4px 10px; background:var(--bg3); border:1px solid var(--border); border-radius:20px; color:var(--text2); }

/* Concept List */
.ti-concept-list { display:flex; flex-direction:column; gap:4px; }
.ti-concept-row { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--bg3); border-radius:10px; gap:10px; }
.ti-concept-name { font-size:12px; color:var(--text); flex:1; min-width:0; display:flex; align-items:center; gap:6px; }
.ti-concept-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* ── Mastery Ring ── */
.ti-ring { position:relative; flex-shrink:0; }
.ti-ring svg { display:block; }
.ti-ring-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-weight:700; font-family:var(--font); letter-spacing:-.02em; }

/* ── Premium Design Upgrades ── */

/* Page-level subtle gradient glow */
.ti-page { position:relative; }
.ti-page::before { content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:500px; height:300px; background:radial-gradient(ellipse, rgba(124,111,247,.06) 0%, transparent 70%); pointer-events:none; z-index:0; }

/* Title gets a gradient */
.ti-title { background:linear-gradient(135deg, var(--text) 40%, var(--accent2) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Subject cards: glass effect + accent top border */
.ti-subject-card { background:linear-gradient(165deg, var(--bg3) 0%, rgba(19,19,31,.85) 100%); border-top:2px solid transparent; backdrop-filter:blur(4px); }
.ti-subject-card:hover { border-top-color:var(--accent); box-shadow:0 8px 32px rgba(124,111,247,.12), 0 0 0 1px var(--accent-border); }

/* Subject card name gets subtle icon glow */
.ti-sc-name { display:flex; align-items:center; gap:6px; }

/* Stat grid cards: subtle gradient + glow on hover */
.ti-stat { background:linear-gradient(165deg, var(--bg3) 0%, var(--bg4) 100%); transition:all .2s; }
.ti-stat:hover { border-color:var(--border3); box-shadow:0 4px 16px rgba(0,0,0,.2); }
.ti-stat-val { background:linear-gradient(135deg, var(--text) 30%, var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Priority cards: left accent line */
.ti-priority-card { border-left:3px solid var(--accent); background:linear-gradient(135deg, var(--bg4), rgba(124,111,247,.04)); }

/* Priorities section: glass container */
.ti-priorities { background:linear-gradient(165deg, var(--bg3), rgba(13,13,22,.9)); border-color:var(--border2); }
.ti-priorities-title { display:flex; align-items:center; gap:8px; }
.ti-priorities-title::before { content:''; display:inline-block; width:3px; height:14px; background:var(--accent); border-radius:2px; }

/* Overview student list */
.ti-overview-students { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.ti-overview-student-row { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg3); border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:all .2s var(--ease); }
.ti-overview-student-row:hover { border-color:var(--accent-border); transform:translateX(3px); background:var(--bg4); }
.ti-ov-avatar { font-size:22px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--bg2); border-radius:10px; flex-shrink:0; }
.ti-ov-info { flex:1; min-width:0; }
.ti-ov-name { font-size:14px; font-weight:600; color:var(--text); }
.ti-ov-meta { font-size:11px; color:var(--text3); margin-top:2px; }
.ti-ov-mastery { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }

/* Tab bar: more vibrant active state */
.ti-tab.active { background:linear-gradient(135deg, var(--accent), #9b8fff); box-shadow:0 2px 12px rgba(124,111,247,.3); }

/* Topic rows: left border accent on hover */
.ti-topic-row { border-left:3px solid transparent; transition:all .25s var(--ease); }
.ti-topic-row:hover { border-left-color:var(--accent); transform:translateX(2px); }

/* Student rows: subtle glow on hover */
.ti-student-row { transition:all .25s var(--ease); }
.ti-student-row:hover { box-shadow:0 4px 16px rgba(0,0,0,.15); transform:translateX(2px); }

/* Student profile header: gradient bg */
.ti-student-header { background:linear-gradient(165deg, var(--bg3), rgba(124,111,247,.06)); border-color:var(--accent-border); }
.ti-sh-name { background:linear-gradient(135deg, var(--text) 30%, var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Strengths/Weaknesses columns: colored top borders */
.ti-sw-col:first-child { border-top:2px solid var(--green); }
.ti-sw-col:last-child { border-top:2px solid var(--red); }
.ti-sw-title { letter-spacing:.03em; text-transform:uppercase; }

/* Mistake cards: amber glow on hover */
.ti-mistake-card { transition:all .25s var(--ease); }
.ti-mistake-card:hover { border-color:var(--amber-border); box-shadow:0 4px 20px rgba(245,184,65,.08); }

/* Rec cards: priority-based left glow */
.ti-rec-card { transition:all .25s var(--ease); }
.ti-rec-card:hover { transform:translateX(2px); box-shadow:0 4px 16px rgba(0,0,0,.15); }
.ti-rec-highlight { background:linear-gradient(135deg, rgba(124,111,247,.06), rgba(124,111,247,.02)); }

/* Heatmap cells: subtle shine */
.ti-heatmap-cell { transition:all .2s; }
.ti-heatmap-cell:hover { filter:brightness(1.15); }

/* Distribution bar: subtle shadow */
.ti-dist-bar { box-shadow:inset 0 1px 2px rgba(0,0,0,.3); }

/* Behaviour signal: glow effect */
.ti-behaviour-signal { background:linear-gradient(135deg, rgba(124,111,247,.08), rgba(124,111,247,.03)); }

/* Group pills: colored bottom border */
.ti-group-pill { position:relative; overflow:hidden; transition:all .2s; }
.ti-group-pill:hover { transform:translateY(-1px); }

/* Breadcrumb: glass effect */
.ti-breadcrumb { background:linear-gradient(135deg, var(--bg3), rgba(19,19,31,.85)); border:1px solid var(--border); backdrop-filter:blur(4px); }

/* Section labels: accent dash */
.ti-section-label { display:flex; align-items:center; gap:8px; }
.ti-section-label::before { content:''; display:inline-block; width:3px; height:12px; background:var(--accent); border-radius:2px; }

/* Concept rows: hover shift */
.ti-concept-row { transition:all .2s; }
.ti-concept-row:hover { background:var(--bg4); transform:translateX(2px); }

/* Question type bars: rounded gradient */
.ti-qt-row { transition:all .2s; }
.ti-qt-row:hover { background:var(--bg4); }

/* Not-attempted pills: subtle hover */
.ti-na-student { transition:all .2s; cursor:default; }
.ti-na-student:hover { background:var(--bg4); border-color:var(--border2); }

/* Responsive */
@media (max-width:640px) {
  .ti-stat-grid { grid-template-columns:repeat(2, 1fr); }
  .ti-subject-grid { grid-template-columns:1fr; }
  .ti-sw-grid { grid-template-columns:1fr; }
  .ti-topic-row { flex-direction:column; align-items:flex-start; }
  .ti-topic-right { width:100%; margin-top:8px; }
  .ti-student-row { flex-wrap:wrap; }
  .ti-qt-row { flex-wrap:wrap; }
  .ti-qt-name { width:auto; }
  .ti-qt-count { width:auto; }
  .ti-page::before { width:300px; height:200px; }
}

/* ═══════════════════════════════════════════════════════════
   BRAIN DUMP — Paper-first design
   Open it → blank page → write → check with AI or save
═══════════════════════════════════════════════════════════ */

.bd-page { max-width:820px; padding:0 0 48px; }

/* ── TOPBAR ── */
.bd-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 4px; gap:8px;
}
.bd-topbar-left { display:flex; align-items:center; gap:8px; }
.bd-topbar-right { display:flex; align-items:center; gap:8px; }
.bd-topbar-title { font-size:15px; font-weight:700; color:var(--text); }
.bd-icon-btn {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:none; background:var(--bg3); border-radius:8px; cursor:pointer;
  color:var(--text3); transition:all .15s; flex-shrink:0;
}
.bd-icon-btn:hover { background:var(--bg4); color:var(--text); }
.bd-timer-pill {
  font-size:13px; font-weight:700; color:var(--accent2);
  font-variant-numeric:tabular-nums; letter-spacing:.5px;
}
.bd-wc-pill {
  font-size:11px; color:var(--text4); font-variant-numeric:tabular-nums;
}
.bd-meta-pill {
  font-size:11px; color:var(--text4); padding:2px 8px;
  background:var(--bg3); border-radius:6px;
}

/* ── EMPTY STATE ── */
.bd-empty-state {
  text-align:center; padding:60px 20px;
}
.bd-empty-icon { font-size:48px; margin-bottom:16px; }
.bd-empty-title { font-size:20px; font-weight:800; color:var(--text); margin:0 0 8px; }
.bd-empty-sub { font-size:13px; color:var(--text3); max-width:340px; margin:0 auto 20px; line-height:1.6; }
.bd-cta-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff; border:none; cursor:pointer;
  padding:12px 28px; border-radius:12px; font-size:14px; font-weight:700;
  font-family:inherit; transition:all .2s;
}
.bd-cta-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }

/* ── MODE TOGGLE (Draw / Type pill) ── */
.bd-mode-bar {
  display:flex; justify-content:center; padding:0 4px 8px;
}
.bd-mode-toggle {
  display:flex; gap:2px; background:var(--bg3); border-radius:20px; padding:3px;
}
.bd-mode-btn {
  display:flex; align-items:center; gap:5px;
  padding:6px 16px; border:none; background:transparent;
  border-radius:18px; font-size:12px; font-weight:600; color:var(--text3);
  cursor:pointer; font-family:inherit; transition:all .2s;
}
.bd-mode-btn.active {
  background:var(--accent); color:#fff;
  box-shadow:0 2px 8px rgba(var(--accent-rgb,99,102,241),.3);
}
.bd-mode-btn svg { flex-shrink:0; }

/* ── WRITING PAGE (full-height layout) ── */
.bd-write-page {
  display:flex; flex-direction:column; position:relative;
  height:calc(100dvh - 60px); max-width:820px; margin:0 auto;
}

/* ── WRITING SURFACE ── */
.bd-surface {
  flex:1; overflow:hidden; margin:0 2px;
  border-radius:14px; border:1px solid var(--border1);
  background:var(--bd-paper, var(--bg));
  display:flex; flex-direction:column; min-height:0;
}
.bd-surface-type { padding:0; }

/* ── PHOTO MODE ── */
.bd-surface-photo { padding:0; overflow:auto; }
.bd-photo-wrap { width:100%; padding:14px; display:flex; flex-direction:column; gap:12px; }
.bd-photo-dropzone {
  flex:1; min-height:240px; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:transparent; border:2px dashed var(--border2);
  border-radius:14px; color:var(--text3); cursor:pointer;
  padding:32px 20px; transition:border-color .15s, color .15s;
}
.bd-photo-dropzone:hover { border-color:var(--accent); color:var(--text2); }
.bd-photo-dz-title { font-size:15px; font-weight:700; color:var(--text); }
.bd-photo-dz-sub { font-size:12.5px; color:var(--text3); text-align:center; max-width:280px; line-height:1.4; }
.bd-photo-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100px,100%), 1fr));
  gap:10px;
}
.bd-photo-thumb {
  position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden;
  border:1px solid var(--border1); background:var(--bg2);
}
.bd-photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.bd-photo-remove {
  position:absolute; top:4px; right:4px; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%; cursor:pointer;
}
.bd-photo-remove:hover { background:rgba(0,0,0,.85); }
.bd-photo-add {
  aspect-ratio:3/4; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:transparent; border:2px dashed var(--border2); color:var(--text3);
  cursor:pointer; font-size:12px; font-weight:600;
}
.bd-photo-add:hover { border-color:var(--accent); color:var(--text2); }
.bd-photo-hint { font-size:12px; color:var(--text3); text-align:center; }

/* ════════════════════════════════════════════════════════════
   BRAIN DUMP — THE EXPERIENCE (ready / cues / predict / calib)
   ════════════════════════════════════════════════════════════ */

/* ── READY / intention screen ── */
.bd-ready-page { display:flex; flex-direction:column; }
.bd-ready-hero { text-align:center; padding:18px 16px 8px; }
.bd-ready-spark {
  font-size:34px; line-height:1; margin-bottom:10px;
  display:inline-block; animation:bdFloat 3s ease-in-out infinite;
}
@keyframes bdFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.bd-ready-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px;
}
.bd-ready-topic {
  font-size:26px; font-weight:800; line-height:1.15; color:var(--text);
  margin:0 0 10px; letter-spacing:-.01em;
}
.bd-ready-instruction {
  font-size:14px; line-height:1.55; color:var(--text2);
  max-width:420px; margin:0 auto;
}
.bd-ready-instruction em { color:var(--text); font-style:normal; font-weight:700; }

.bd-ready-trend {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  justify-content:center; margin:16px auto 4px; padding:12px 16px;
  background:var(--bg2); border:1px solid var(--border1); border-radius:14px;
  max-width:440px; width:calc(100% - 32px);
}
.bd-ready-trend-item { text-align:center; min-width:64px; }
.bd-ready-trend-num { font-size:19px; font-weight:800; color:var(--text); }
.bd-ready-trend-lbl { font-size:10.5px; color:var(--text3); text-transform:uppercase; letter-spacing:.04em; }
.bd-ready-trend-goal {
  margin-left:auto; font-size:12.5px; font-weight:700; color:var(--accent);
  background:var(--accent-bg, rgba(99,102,241,.12)); padding:6px 12px; border-radius:999px;
}

.bd-ready-modes-label {
  text-align:center; font-size:12px; font-weight:600; color:var(--text3);
  margin:22px 0 10px;
}
.bd-ready-modes {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  max-width:440px; width:calc(100% - 32px); margin:0 auto;
}
.bd-ready-mode {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:14px 8px; border-radius:14px; cursor:pointer;
  background:var(--bg2); border:1.5px solid var(--border1);
  transition:border-color .15s, transform .1s, background .15s;
}
.bd-ready-mode:active { transform:scale(.97); }
.bd-ready-mode.active { border-color:var(--accent); background:var(--accent-bg, rgba(99,102,241,.1)); }
.bd-ready-mode-icon { font-size:22px; }
.bd-ready-mode-label { font-size:13px; font-weight:700; color:var(--text); }
.bd-ready-mode-sub { font-size:10.5px; color:var(--text3); }

.bd-ready-start {
  display:flex; align-items:center; justify-content:center; gap:8px;
  max-width:440px; width:calc(100% - 32px); margin:22px auto 0;
  padding:16px; border-radius:14px; border:none; cursor:pointer;
  font-size:16px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--teal, #14b8a6));
  box-shadow:0 6px 20px -6px var(--accent); transition:transform .1s, box-shadow .2s;
}
.bd-ready-start:active { transform:scale(.98); }
.bd-ready-foot { text-align:center; font-size:11.5px; color:var(--text4); margin:10px 0 4px; }

/* ── LIVE RECALL CUE chip ── */
.bd-cue {
  position:absolute; left:50%; bottom:84px; transform:translate(-50%, 14px);
  display:flex; align-items:center; gap:8px; max-width:min(420px, calc(100% - 32px));
  padding:10px 16px; border-radius:999px; cursor:pointer;
  background:var(--bg); border:1px solid var(--border2);
  box-shadow:0 8px 28px -10px rgba(0,0,0,.45);
  font-size:13px; font-weight:600; color:var(--text);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease);
  z-index:40;
}
.bd-cue.show { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.bd-cue-spark { font-size:15px; }
.bd-cue-text { line-height:1.3; }

/* ── PREDICT overlay (confidence calibration) ── */
.bd-predict-overlay {
  position:absolute; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(10,12,20,.55); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .25s var(--ease);
}
.bd-predict-overlay.show { opacity:1; }
.bd-predict-card {
  width:100%; max-width:380px; padding:26px 22px 20px; text-align:center;
  background:var(--bg); border:1px solid var(--border1); border-radius:20px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.6);
  transform:translateY(10px) scale(.98); transition:transform .25s var(--ease);
}
.bd-predict-overlay.show .bd-predict-card { transform:none; }
.bd-predict-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
.bd-predict-title { font-size:19px; font-weight:800; color:var(--text); margin:0 0 6px; line-height:1.2; }
.bd-predict-sub { font-size:12.5px; color:var(--text3); margin:0 0 14px; line-height:1.5; }
.bd-predict-value { font-size:42px; font-weight:800; color:var(--accent); line-height:1; }
.bd-predict-value span { font-variant-numeric:tabular-nums; }
.bd-predict-slider {
  -webkit-appearance:none; appearance:none; width:100%; height:8px; margin:16px 0 6px;
  border-radius:999px; background:var(--bg4); cursor:pointer;
}
.bd-predict-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--accent); border:3px solid var(--bg); box-shadow:0 2px 8px rgba(0,0,0,.3); cursor:grab;
}
.bd-predict-slider::-moz-range-thumb {
  width:26px; height:26px; border-radius:50%; background:var(--accent);
  border:3px solid var(--bg); cursor:grab;
}
.bd-predict-scale {
  display:flex; justify-content:space-between; font-size:10.5px; color:var(--text4);
  margin-bottom:18px;
}
.bd-predict-go { width:100%; justify-content:center; }
.bd-predict-skip {
  display:block; margin:10px auto 0; background:none; border:none; cursor:pointer;
  font-size:12px; color:var(--text4); padding:4px 8px;
}
.bd-predict-skip:hover { color:var(--text2); }

/* ── CALIBRATION card (predicted vs actual) ── */
.bd-calib {
  margin:4px 4px 12px; padding:14px 16px; border-radius:14px;
  background:var(--bg2); border:1px solid var(--border1);
}
.bd-calib-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.bd-calib-row:last-of-type { margin-bottom:0; }
.bd-calib-tag { font-size:11.5px; color:var(--text3); width:80px; flex-shrink:0; }
.bd-calib-track { flex:1; height:8px; border-radius:999px; background:var(--bg4); overflow:hidden; }
.bd-calib-fill { height:100%; border-radius:999px; transition:width .9s cubic-bezier(.4,0,.2,1); }
.bd-calib-pred { background:var(--text4); }
.bd-calib-actual { background:var(--accent); }
.bd-calib-pct { font-size:12.5px; font-weight:700; color:var(--text); width:38px; text-align:right; font-variant-numeric:tabular-nums; }
.bd-calib-msg { font-size:12.5px; line-height:1.5; color:var(--text2); margin-top:10px; }
.bd-calib-under .bd-calib-msg { color:var(--teal, #14b8a6); }

/* ── IMPROVEMENT banner ── */
.bd-improve {
  display:flex; align-items:center; gap:10px; margin:0 4px 12px;
  padding:11px 14px; border-radius:12px; font-size:13px; line-height:1.4;
  background:var(--bg2); border:1px solid var(--border1); color:var(--text2);
}
.bd-improve-icon { font-size:18px; flex-shrink:0; }
.bd-improve strong { color:var(--text); }
.bd-improve-up { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.25); }
.bd-improve-down { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.2); }

/* Textarea (type mode) — lined paper feel */
.bd-textarea {
  width:100%; flex:1; resize:none;
  background:transparent; border:none; outline:none;
  padding:16px 20px 20px 48px;
  font-size:15px; line-height:32px; color:var(--text);
  font-family:inherit; caret-color:var(--accent);
  background-image:
    linear-gradient(to right, rgba(239,68,68,.08) 0px, rgba(239,68,68,.08) 1px, transparent 1px),
    repeating-linear-gradient(
      transparent,
      transparent 31px,
      rgba(255,255,255,0.04) 31px,
      rgba(255,255,255,0.04) 32px
    );
  background-size:100% 100%;
  background-position:40px 0;
}
.bd-textarea::placeholder { color:var(--text4); line-height:1.8; }

/* ── BOTTOM ACTION BAR ── */
.bd-bottom-bar {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 16px; flex-shrink:0;
}

.bd-action-primary {
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 24px; border-radius:12px; border:none;
  background:var(--accent); color:#fff;
  font-size:14px; font-weight:700; font-family:inherit;
  cursor:pointer; transition:all .2s;
}
.bd-action-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }

.bd-action-secondary {
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 20px; border-radius:12px;
  background:var(--bg3); color:var(--text); border:1px solid var(--border2);
  font-size:13px; font-weight:600; font-family:inherit;
  cursor:pointer; transition:all .2s;
}
.bd-action-secondary:hover { border-color:var(--accent); background:var(--bg4); }

.bd-action-ghost {
  padding:10px 20px; border-radius:12px; border:1px solid var(--border1);
  background:transparent; color:var(--text3);
  font-size:13px; font-weight:600; font-family:inherit;
  cursor:pointer; transition:all .15s;
}
.bd-action-ghost:hover { background:var(--bg3); border-color:var(--border2); color:var(--text2); }

/* ── COMPARE OVERLAY (sits on top of canvas) ── */
#page-braindump { position:relative; }
.bd-compare-overlay {
  position:absolute; inset:0; z-index:50;
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  animation:bdOverlayIn .3s ease-out;
}
@keyframes bdOverlayIn { from { opacity:0; } to { opacity:1; } }

.bd-compare-inner { text-align:center; }
.bd-compare-spinner {
  width:48px; height:48px; margin:0 auto 16px;
  border:3px solid var(--bg4); border-top-color:var(--accent);
  border-radius:50%; animation:spin 1s linear infinite;
}
.bd-compare-text { font-size:16px; font-weight:700; color:#fff; margin-bottom:4px; }
.bd-compare-sub { font-size:12px; color:rgba(255,255,255,.6); }

/* ── RESULTS ── */
.bd-score-hero { text-align:center; margin-bottom:28px; }
.bd-ring {
  position:relative; width:140px; height:140px; margin:0 auto 14px;
}
.bd-ring svg { width:100%; height:100%; }
.bd-ring-high { color:#22c55e; }
.bd-ring-mid { color:#f59e0b; }
.bd-ring-low { color:#ef4444; }
.bd-ring-inner {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2px;
}
.bd-ring-score { font-size:36px; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; }
.bd-ring-pct { font-size:16px; font-weight:700; color:var(--text3); margin-top:8px; }
.bd-score-msg { font-size:14px; color:var(--text2); max-width:380px; margin:0 auto; line-height:1.5; }

/* Breakdown bar */
.bd-breakdown { margin-bottom:24px; }
.bd-breakdown-bar {
  display:flex; height:8px; border-radius:4px; overflow:hidden;
  background:var(--bg4); margin-bottom:8px;
}
.bd-bb-seg { transition:width .8s ease-out; min-width:2px; }
.bd-bb-hit { background:#22c55e; }
.bd-bb-partial { background:#f59e0b; }
.bd-bb-missed { background:#ef4444; }
.bd-breakdown-legend { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.bd-leg { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text3); }
.bd-leg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Section label */
.bd-section-label {
  font-size:12px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px;
}

/* ── ANNOTATED VIEW ── */
.bd-annotated { margin-bottom:24px; }
.bd-annotated-body {
  background:var(--bg2); border:1px solid var(--border2); border-radius:14px;
  padding:20px; line-height:2.2; font-size:14px;
}
.bd-ann {
  padding:2px 4px; border-radius:4px; position:relative;
  transition:background .2s;
}
.bd-ann-hit {
  background:rgba(34,197,94,.1); border-bottom:2px solid #22c55e; color:var(--text);
}
.bd-ann-partial {
  background:rgba(245,158,11,.1); border-bottom:2px solid #f59e0b; color:var(--text);
}
.bd-ann-missed {
  background:rgba(239,68,68,.08); border-bottom:2px solid #ef4444;
  color:var(--text2); text-decoration:line-through; text-decoration-color:rgba(239,68,68,.3);
}
.bd-ann-mark {
  font-size:10px; font-weight:800; margin-right:3px; vertical-align:super;
}
.bd-ann-hit .bd-ann-mark { color:#22c55e; }
.bd-ann-partial .bd-ann-mark { color:#f59e0b; }
.bd-ann-missed .bd-ann-mark { color:#ef4444; }
.bd-ann-note {
  display:block; font-size:11px; color:var(--text3); font-style:italic;
  margin-top:2px; padding-left:16px;
}

/* ── CARD VIEW ── */
.bd-cards { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.bd-card {
  background:var(--bg2); border:1px solid var(--border2); border-radius:14px;
  overflow:hidden;
}
.bd-card-head {
  display:flex; align-items:center; gap:8px; padding:14px 16px;
  cursor:pointer; list-style:none; user-select:none;
}
.bd-card-head::-webkit-details-marker { display:none; }
.bd-card-icon { font-size:15px; }
.bd-card-title { font-size:13px; font-weight:700; color:var(--text); flex:1; }
.bd-card-count {
  background:var(--bg4); border-radius:8px; padding:2px 8px;
  font-size:10px; font-weight:700; color:var(--text3);
}
.bd-card-chevron { color:var(--text4); transition:transform .2s; }
details.bd-card[open] .bd-card-chevron { transform:rotate(180deg); }
.bd-card-body { padding:0 16px 14px; display:flex; flex-direction:column; gap:6px; }
.bd-card-item {
  padding:8px 12px; border-radius:8px; font-size:13px; line-height:1.5; color:var(--text2);
}
.bd-ci-hit { background:rgba(34,197,94,.05); border-left:3px solid #22c55e; }
.bd-ci-partial { background:rgba(245,158,11,.05); border-left:3px solid #f59e0b; }
.bd-ci-missed { background:rgba(239,68,68,.05); border-left:3px solid #ef4444; }
.bd-card-sub { font-size:11px; color:var(--text3); margin-top:3px; line-height:1.4; }
.bd-card-excerpt {
  margin-top:6px; padding:6px 10px; border-radius:6px;
  background:var(--bg); border-left:2px solid var(--accent);
  font-size:11px; color:var(--text3); line-height:1.5; font-style:italic;
}

/* ── STUDY TIP ── */
.bd-tip {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--bg3); border:1px solid var(--border2); border-radius:14px;
  padding:16px 18px; margin-bottom:24px;
}
.bd-tip-icon { font-size:20px; flex-shrink:0; }
.bd-tip-label { font-size:11px; font-weight:700; color:var(--accent2); text-transform:uppercase; letter-spacing:.3px; margin-bottom:3px; }
.bd-tip-text { font-size:13px; color:var(--text2); line-height:1.6; }

/* ── RESULT ACTIONS ── */
.bd-result-actions {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:4px;
}

/* ── HISTORY LIST ── */
.bd-history-list { display:flex; flex-direction:column; gap:4px; }
.bd-h-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:10px;
  background:var(--bg2); border:1px solid var(--border1);
  font-size:12px; transition:border-color .15s;
}
.bd-h-row:hover { border-color:var(--border2); }
.bd-h-date { width:46px; font-weight:600; color:var(--text2); flex-shrink:0; }
.bd-h-time-sub { display:block; font-size:10px; color:var(--text5,var(--text4)); font-weight:400; margin-top:1px; }
.bd-h-subject { flex:1; color:var(--text3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-h-words { width:36px; text-align:right; color:var(--text4); flex-shrink:0; }
.bd-h-time { width:38px; text-align:right; color:var(--text4); font-variant-numeric:tabular-nums; flex-shrink:0; }
.bd-h-score { width:34px; text-align:right; font-weight:800; flex-shrink:0; }
.bd-h-high { color:#22c55e; }
.bd-h-mid { color:#f59e0b; }
.bd-h-low { color:#ef4444; }
.bd-h-bar { flex:0 0 60px; height:4px; background:var(--bg4); border-radius:2px; overflow:hidden; }
.bd-h-bar-fill { height:100%; border-radius:2px; transition:width .4s; }
.bd-h-clickable { cursor:pointer; }
.bd-h-clickable:hover { border-color:var(--accent); background:var(--bg3); }
.bd-h-arrow { flex-shrink:0; opacity:.4; transition:opacity .15s; }
.bd-h-clickable:hover .bd-h-arrow { opacity:.8; }
.bd-h-badge {
  font-size:9px; font-weight:700; padding:1px 6px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.3px; flex-shrink:0;
}
.bd-h-badge-saved { background:rgba(34,197,94,.1); color:#22c55e; }

/* ── VIEWING PAST DUMP ── */
.bd-view-meta {
  display:flex; align-items:center; gap:8px; justify-content:center;
  flex-wrap:wrap; margin-bottom:20px;
}
.bd-vm-pill {
  font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px;
  background:var(--bg3); color:var(--text2); border:1px solid var(--border1);
}
.bd-vm-saved { background:rgba(34,197,94,.1); color:#22c55e; border-color:rgba(34,197,94,.2); }
.bd-vm-stat { font-size:11px; color:var(--text4); }
.bd-view-dump-section { margin:20px 0; }
.bd-view-dump-text {
  background:var(--bg2); border:1px solid var(--border1); border-radius:12px;
  padding:16px 20px; font-size:13px; line-height:1.7; color:var(--text2);
  white-space:pre-wrap; word-break:break-word; max-height:300px; overflow-y:auto;
}
.bd-self-review-hint {
  text-align:center; padding:24px 20px; margin:12px 0;
  background:var(--bg2); border:1px solid var(--border1); border-radius:14px;
}
.bd-self-review-icon { font-size:32px; margin-bottom:8px; }
.bd-self-review-text { font-size:13px; color:var(--text3); line-height:1.6; max-width:400px; margin:0 auto; }

/* ── MOBILE ── */
@media(max-width:580px) {
  /* dvh, not vh: on iOS 100vh ignores the URL bar, so the bottom of the
     page sat under it and the last line was unreachable. */
  .bd-write-page { height:calc(100dvh - 8px); }
  .bd-topbar { padding:8px 4px; }
  .bd-topbar-title { font-size:13px; }
  .bd-mode-btn { padding:5px 12px; font-size:11px; }
  .bd-textarea { padding:12px 16px 16px 44px; font-size:14px; }
  .bd-bottom-bar { padding:8px 12px; }
  .bd-action-primary { padding:10px 20px; font-size:13px; }
  .bd-ring { width:110px; height:110px; }
  .bd-ring-score { font-size:28px; }
  .bd-h-bar { display:none; }
  .bd-h-row { gap:6px; padding:8px 10px; }
  .bd-annotated-body { padding:14px; font-size:13px; }
  .bd-result-actions { flex-direction:column; }
  .bd-action-primary, .bd-action-secondary, .bd-action-ghost { width:100%; justify-content:center; text-align:center; }
  .cv-toolbar { gap:4px; padding:6px 8px; }
  .cv-tool-btn { width:30px; height:30px; }
  .cv-colour-dot { width:18px; height:18px; }
  .cv-size-slider { width:40px; }
  .cv-divider { margin:0 2px; height:20px; }
  .cv-pages-stack { padding:2px 3px 0; }
  .cv-add-page-btn { padding:8px 18px; font-size:11px; }
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS — CARDS
═══════════════════════════════════════════════════════════ */
.settings-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:16px; padding:20px 24px;
}
@media(max-width:580px) {
  .settings-card { flex-direction:column; align-items:flex-start; gap:12px; }
  .settings-card .btn-sm { width:100%; text-align:center; }
}

/* ── Danger zone ── */
.settings-card.danger-zone {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--bg2); border:1px solid var(--red-border,rgba(239,68,68,.2));
  border-radius:16px; padding:20px 24px; margin-top:12px;
}
.danger-zone h3 {
  font-size:14px; font-weight:700; color:var(--red,#ef4444); margin-bottom:4px;
}
.danger-zone p {
  font-size:12px; color:var(--text3); line-height:1.5; margin:0;
}
.danger-btn {
  flex-shrink:0; padding:10px 20px; border-radius:10px;
  background:transparent; color:var(--red,#ef4444);
  border:1px solid var(--red-border,rgba(239,68,68,.25));
  font-size:13px; font-weight:700; font-family:inherit;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.danger-btn:hover {
  background:var(--red-bg,rgba(239,68,68,.08));
  border-color:var(--red,#ef4444);
}
@media(max-width:580px) {
  .settings-card.danger-zone { flex-direction:column; align-items:flex-start; }
  .danger-btn { width:100%; text-align:center; }
}

/* ═══════════════════════════════════════════════════════════
   CANVAS DRAWING TOOL
═══════════════════════════════════════════════════════════ */
.cv-wrapper { display:flex; flex-direction:column; height:100%; }

/* Toolbar */
.cv-toolbar {
  display:flex; align-items:center; gap:6px; padding:8px 12px;
  background:var(--bg2); border-bottom:1px solid var(--border1);
  flex-wrap:wrap; min-height:44px;
}
.cv-tool-group, .cv-colour-group, .cv-size-group, .cv-action-group {
  display:flex; align-items:center; gap:3px;
}
.cv-action-group { margin-left:auto; }
.cv-divider {
  width:1px; height:24px; background:var(--border2); margin:0 4px; flex-shrink:0;
}

.cv-tool-btn {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:transparent;
  border-radius:8px; cursor:pointer; color:var(--text3); transition:all .15s;
}
.cv-tool-btn:hover { background:var(--bg3); color:var(--text); }
.cv-tool-btn.active { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
.cv-tool-btn.cv-danger:hover { color:#ef4444; }

/* Colour dots */
.cv-colour-dot {
  width:22px; height:22px; border-radius:50%; border:2px solid var(--border2);
  cursor:pointer; transition:all .15s; flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.cv-colour-dot:hover { transform:scale(1.15); }
.cv-colour-dot.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg); }
/* Any colour: a rainbow swatch that opens the system colour picker. */
.cv-colour-custom {
  position:relative; overflow:hidden; display:inline-block;
  background:conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444);
}
.cv-colour-custom input[type=color] {
  position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px);
  opacity:0; cursor:pointer; border:none; padding:0;
}
/* Selection actions, shown only while something is lassoed. */
.cv-sel-group { display:flex; align-items:center; gap:4px; }
.cv-sel-btn { width:auto !important; padding:0 10px !important; font-size:12px; font-weight:600; }
.cv-sel-del:hover { color:#ef4444; }
/* Light-ink dot (white / very pale) needs a visible ring in both themes */
.cv-colour-dot[style*="background:#ffffff"],
.cv-colour-dot[style*="background:#fff"] { border-color:var(--border2); }
.cv-colour-dot.active[style*="background:#ffffff"],
.cv-colour-dot.active[style*="background:#fff"] { border-color:var(--accent); }

/* Inline text editor floating over the canvas */
.cv-text-input {
  position:absolute; z-index:20;
  min-width:80px; max-width:90%;
  padding:1px 4px; margin:0;
  border:1px dashed var(--accent); border-radius:4px;
  background:rgba(127,127,127,.06);
  font-family:inherit; line-height:1.1;
  outline:none; transform:translateY(-0.85em);
}
.cv-text-input::placeholder { color:var(--text4); opacity:.6; }

/* Size slider */
.cv-size-slider {
  width:60px; height:4px; -webkit-appearance:none; appearance:none;
  background:var(--bg4); border-radius:2px; outline:none;
}
.cv-size-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); cursor:pointer;
}
.cv-size-slider::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:var(--accent); border:none; cursor:pointer;
}
.cv-size-label { font-size:10px; color:var(--text4); width:24px; text-align:center; }

/* Scroll area — continuous vertical notebook */
/* Live zoom readout. Tapping it fits the page — the same thing double-tap
   does, for anyone who never discovers the gesture. */
.cv-zoom-badge {
  flex:none; min-width:52px; padding:6px 9px; border-radius:9px;
  background:var(--bg3); border:1px solid var(--border1); color:var(--text2);
  font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.cv-zoom-badge:hover { color:var(--text); background:var(--accent-bg); }
.cv-zoom-badge:active { transform:scale(.94); }

.cv-scroll-area {
  flex:1; overflow-y:auto; overflow-x:hidden;
  background:var(--bg); padding:0 0 6px;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  overscroll-behavior:contain;   /* scrolling notebook pages never triggers page pull-to-refresh */
}
/* Tight gutters: this padding is screen the learner cannot write on. Enough
   to keep the page edge visible as an edge, and no more. */
.cv-pages-stack {
  display:flex; flex-direction:column; align-items:center;
  gap:0; padding:4px 6px 0;
}

/* Individual page wrapper */
.cv-page-wrapper {
  width:100%; max-width:800px; position:relative;
}
.cv-page-label {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 4px 4px; font-size:10px; font-weight:600;
  color:var(--text5,var(--text4)); text-transform:uppercase; letter-spacing:.5px;
}
.cv-page-del {
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border:none; background:transparent;
  border-radius:6px; cursor:pointer; color:var(--text4); opacity:.5;
  transition:all .15s;
}
.cv-page-del:hover { background:rgba(239,68,68,.1); color:#ef4444; opacity:1; }
.cv-page-divider {
  height:1px; background:var(--border2);
  margin:4px 0 16px; opacity:.4;
  background:repeating-linear-gradient(90deg, var(--border2) 0, var(--border2) 6px, transparent 6px, transparent 12px);
}
.cv-canvas {
  display:block; width:100%; border-radius:8px;
  background:var(--bd-paper, var(--bg2)); border:1px solid var(--border1);
  touch-action:none; cursor:crosshair;
}

/* Add page button at bottom */
.cv-add-page-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:16px auto 0; padding:10px 24px;
  border:1px dashed var(--border2); background:transparent;
  border-radius:10px; font-size:12px; font-weight:600;
  color:var(--text4); cursor:pointer; transition:all .15s;
}
.cv-add-page-btn:hover {
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-bg,rgba(59,130,246,.06));
}

/* Mobile canvas adjustments */
@media(max-width:580px) {
  .cv-toolbar {
    gap:4px; padding:6px 8px; min-height:42px;
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .cv-toolbar::-webkit-scrollbar { display:none; }
  .cv-tool-group, .cv-colour-group, .cv-size-group, .cv-action-group { flex-shrink:0; }
  .cv-action-group { margin-left:4px; }
  .cv-tool-btn { width:30px; height:30px; flex-shrink:0; }
  .cv-colour-dot { width:18px; height:18px; }
  .cv-size-slider { width:46px; }
  .cv-divider { margin:0 2px; height:20px; }
  .cv-pages-stack { padding:2px 3px 0; }
  .cv-add-page-btn { padding:8px 18px; font-size:11px; }
  .bd-mode-toggle { gap:1px; }
  .bd-mode-btn { padding:4px 8px; font-size:11px; }
  .bd-canvas-body { min-height:calc(100vh - 240px); }
  .bd-cta-row { flex-direction:column; align-items:center; }
  .bd-cta-row .bd-cta { width:100%; max-width:300px; justify-content:center; }
}

/* ════════════════════════════════════════════════════════════
   CURRICULUM MODE
════════════════════════════════════════════════════════════ */

/* ── Topic Picker ── */
.cur-picker { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:28px 24px; max-width:520px; margin:24px auto; }
.cur-picker-header { text-align:center; margin-bottom:20px; }
.cur-picker-icon { font-size:36px; margin-bottom:8px; }
.cur-picker-title { font-size:18px; font-weight:700; color:var(--text); margin:0 0 6px; }
.cur-picker-sub { font-size:13px; color:var(--text3); line-height:1.5; margin:0; }
.cur-picker-sub a { color:var(--accent); text-decoration:none; font-weight:600; }
.cur-picker-form { display:flex; flex-direction:column; gap:14px; }
.cur-picker-row { display:flex; gap:12px; }
.cur-picker-field { display:flex; flex-direction:column; gap:4px; flex:1; }
.cur-picker-field .label { font-size:12px; font-weight:600; color:var(--text2); }
.cur-picker-btn {
  width:100%; padding:12px; border:none; border-radius:12px;
  background:var(--accent); color:#fff; font-size:14px; font-weight:700;
  cursor:pointer; transition:opacity .15s, transform .1s;
  margin-top:4px;
}
.cur-picker-btn:hover { opacity:.9; }
.cur-picker-btn:active { transform:scale(.98); }

/* ── Disclaimer Modal ── */
.cur-disclaimer-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; transition:opacity .3s;
}
.cur-disclaimer-overlay.visible { opacity:1; }
.cur-disclaimer-card {
  background:var(--card); border-radius:20px; padding:32px 28px;
  max-width:440px; width:100%; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:translateY(20px); transition:transform .3s;
}
.cur-disclaimer-overlay.visible .cur-disclaimer-card { transform:translateY(0); }
.cur-disclaimer-icon { font-size:44px; margin-bottom:12px; }
.cur-disclaimer-title { font-size:18px; font-weight:700; color:var(--text); margin:0 0 12px; }
.cur-disclaimer-text { font-size:14px; color:var(--text2); line-height:1.6; margin:0 0 14px; }
.cur-disclaimer-warn {
  background:var(--bg3); border-left:3px solid var(--amber, #f59e0b);
  border-radius:8px; padding:12px 14px; text-align:left;
  font-size:13px; color:var(--text2); line-height:1.6; margin:0 0 14px;
}
.cur-disclaimer-btn {
  width:100%; padding:13px; border:none; border-radius:12px;
  background:var(--accent); color:#fff; font-size:14px; font-weight:700;
  cursor:pointer; transition:opacity .15s;
}
.cur-disclaimer-btn:hover { opacity:.9; }

/* ── Response Banner ── */
.cur-banner {
  display:flex; align-items:center; gap:8px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:10px; padding:8px 14px;
  font-size:12px; color:var(--text3); line-height:1.5;
  margin-bottom:12px;
}
.cur-banner-icon { font-size:16px; flex-shrink:0; }
.cur-banner a { color:var(--accent); text-decoration:none; font-weight:600; }

/* ── Content Source Banners ── */
.caps-source-banner {
  display:flex; align-items:center; gap:8px;
  border-radius:10px; padding:8px 14px;
  font-size:12px; line-height:1.5;
  margin-bottom:12px;
}
.caps-src-icon { font-size:16px; flex-shrink:0; }
.caps-src-text { color:var(--text2); }
.caps-src-text strong { font-weight:700; }
.caps-src-db {
  background:rgba(52,211,153,.08);
  border:1px solid rgba(52,211,153,.25);
}
.caps-src-db .caps-src-text strong { color:#34d399; }
.caps-src-ai {
  background:rgba(124,111,247,.08);
  border:1px solid rgba(124,111,247,.25);
}
.caps-src-ai .caps-src-text strong { color:#7c6ff7; }
.caps-src-offline {
  background:var(--bg3);
  border:1px solid var(--border);
}
.caps-src-offline .caps-src-text strong { color:var(--text3); }

/* ── Mobile ── */
@media (max-width:600px) {
  .cur-picker { padding:20px 16px; margin:16px auto; }
  .cur-picker-row { flex-direction:column; gap:10px; }
  .cur-disclaimer-card { padding:24px 20px; }
}

/* ═══════════════════════════════════════════════════════════
   STUDY FLOW — Subjects / Topics / Study Hub
   Premium dark glassmorphism with micro-interactions
═══════════════════════════════════════════════════════════ */

/* ── Shared page wrapper ── */
.sf-page {
  max-width:760px; margin:0 auto; padding:28px 20px;
  animation:sfPageIn .45s var(--ease) both;
  position:relative;
}
@keyframes sfPageIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Stagger children */
.sf-page > *:nth-child(1) { animation:sfStagger .4s var(--ease) .05s both; }
.sf-page > *:nth-child(2) { animation:sfStagger .4s var(--ease) .1s both; }
.sf-page > *:nth-child(3) { animation:sfStagger .4s var(--ease) .15s both; }
.sf-page > *:nth-child(4) { animation:sfStagger .4s var(--ease) .2s both; }
.sf-page > *:nth-child(5) { animation:sfStagger .4s var(--ease) .25s both; }
.sf-page > *:nth-child(n+6) { animation:sfStagger .4s var(--ease) .3s both; }
@keyframes sfStagger {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Ambient glow behind pages ── */
.sf-page::before {
  content:''; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:500px; height:300px; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse at center,rgba(124,111,247,.06) 0%,rgba(240,107,186,.02) 40%,transparent 70%);
  animation:sfGlow 8s ease-in-out infinite alternate;
}
@keyframes sfGlow {
  0%   { opacity:.6; transform:translateX(-50%) scale(1); }
  100% { opacity:1;  transform:translateX(-50%) scale(1.1); }
}

/* ── Page headers ── */
.sf-header {
  display:flex; align-items:center; gap:14px; margin-bottom:28px;
}
.sf-back {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:12px; font-size:13px; font-weight:600;
  background:var(--bg3); border:1px solid var(--border2);
  color:var(--text); cursor:pointer; transition:all .2s var(--ease);
  white-space:nowrap;
}
.sf-back:hover {
  background:var(--bg4); border-color:var(--border3);
  transform:translateX(-3px);
  box-shadow:4px 0 12px rgba(0,0,0,.2);
}
.sf-back svg { width:16px; height:16px; }

.sf-header-icon {
  font-size:36px; flex-shrink:0;
  width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg4); border:1px solid var(--border2);
}
.sf-header-info { flex:1; min-width:0; }
.sf-header-title {
  font-size:24px; font-weight:800; letter-spacing:-0.4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:linear-gradient(135deg,var(--text) 0%,var(--accent2) 150%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.sf-header-sub { font-size:13px; color:var(--text2); margin-top:4px; }

/* ── Section labels ── */
.sf-label {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--text3); margin-bottom:10px; padding-left:2px;
}

/* ── Skeleton loaders ── */
.sf-skeleton {
  border-radius:16px;
  background:linear-gradient(110deg,var(--bg3) 30%,var(--bg4) 50%,var(--bg3) 70%);
  background-size:200% 100%;
  animation:sfShimmer 1.8s ease-in-out infinite;
}
@keyframes sfShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ═══════════════════════════════════════
   ONBOARDING — Subject Picker
═══════════════════════════════════════ */
.onboard-wrap {
  text-align:center; margin-bottom:40px;
  position:relative; padding-top:8px;
}
.onboard-icon {
  font-size:64px; margin-bottom:20px;
  animation:sfFloat 3s ease-in-out infinite;
  filter:drop-shadow(0 8px 24px rgba(124,111,247,.15));
}
@keyframes sfFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%     { transform:translateY(-10px) scale(1.02); }
}
.onboard-title {
  font-size:28px; font-weight:800; letter-spacing:-0.5px; margin-bottom:10px;
  background:linear-gradient(135deg,var(--text) 30%,var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.onboard-sub {
  color:var(--text2); font-size:15px; line-height:1.65; max-width:440px; margin:0 auto;
}

.onboard-grade-row {
  display:flex; gap:12px; align-items:center;
  margin-bottom:32px; padding:16px 18px; border-radius:16px;
  background:var(--bg3); border:1px solid var(--border2);
}
.onboard-grade-label { font-weight:700; font-size:14px; white-space:nowrap; }

.onboard-group-label {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--text3); margin-bottom:12px; padding-left:2px;
}
.onboard-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); gap:10px;
  margin-bottom:32px;
}
.onboard-card {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-radius:14px; border:2px solid var(--border2); cursor:pointer;
  background:var(--bg3); transition:all .22s var(--ease);
  position:relative; overflow:hidden;
}
.onboard-card::before {
  content:''; position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(135deg,rgba(124,111,247,.1),transparent 60%);
  opacity:0; transition:opacity .22s;
}
.onboard-card:hover {
  border-color:var(--border3); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.onboard-card:hover::before { opacity:1; }
.onboard-card.selected {
  border-color:var(--accent); background:var(--accent-bg);
  box-shadow:0 0 20px rgba(124,111,247,.12);
}
.onboard-card.selected::before { opacity:1; }
.onboard-card input[type="checkbox"] {
  width:18px; height:18px; accent-color:var(--accent); flex-shrink:0;
  position:relative; z-index:1;
}
.onboard-card-icon { font-size:24px; flex-shrink:0; position:relative; z-index:1; }
.onboard-card-name { font-size:14px; font-weight:600; line-height:1.3; position:relative; z-index:1; }

.onboard-cta {
  position:sticky; bottom:16px; padding:16px 0; z-index:10;
}
.onboard-cta .btn-primary {
  width:100%; padding:16px; font-size:16px; font-weight:700; border-radius:14px;
  box-shadow:0 8px 32px rgba(124,111,247,.3);
  transition:all .25s var(--ease);
}
.onboard-cta .btn-primary:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(124,111,247,.4);
}
.onboard-cta .btn-primary:disabled {
  opacity:.35; box-shadow:none; pointer-events:none;
}

/* ═══════════════════════════════════════
   MY SUBJECTS — Card Grid
═══════════════════════════════════════ */
.subjects-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr)); gap:14px;
}
.sub-card {
  position:relative; padding:24px 16px 20px; border-radius:20px;
  border:1px solid var(--border2); cursor:pointer;
  background:var(--bg3); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:all .3s var(--ease); overflow:hidden;
  animation:sfCardIn .4s var(--ease) both;
}
@keyframes sfCardIn {
  from { opacity:0; transform:translateY(14px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
/* Ambient gradient tint per card */
.sub-card::before {
  content:''; position:absolute; inset:0; border-radius:19px;
  background:radial-gradient(ellipse at top,rgba(124,111,247,.06),transparent 70%);
  transition:opacity .3s;
}
/* Top edge glow line */
.sub-card::after {
  content:''; position:absolute; top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-border),transparent);
  opacity:0; transition:opacity .3s;
}
.sub-card:hover {
  border-color:var(--accent-border); transform:translateY(-4px) scale(1.01);
  box-shadow:0 16px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(124,111,247,.15);
}
.sub-card:hover::before { opacity:1; }
.sub-card:hover::after { opacity:1; }
.sub-card:active { transform:translateY(-1px) scale(.99); transition-duration:.1s; }

.sub-card-icon {
  font-size:40px; position:relative; z-index:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));
}
.sub-card-name {
  font-size:14px; font-weight:700; line-height:1.3;
  position:relative; z-index:1;
}
.sub-card-meta {
  font-size:12px; color:var(--text3); position:relative; z-index:1;
}
.sub-card-mastery { position:relative; z-index:1; margin-top:4px; }
.sub-card-badge {
  font-size:11px; color:var(--text3); padding:8px 0;
  position:relative; z-index:1; font-style:italic;
}

/* Add button card */
/* Delete button on subject cards */
.sub-card-delete {
  position:absolute; top:8px; right:8px; z-index:5;
  width:24px; height:24px; border-radius:50%;
  background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.2);
  color:var(--text3); font-size:11px; font-weight:700;
  cursor:pointer; opacity:0; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
}
.sub-card:hover .sub-card-delete { opacity:1; }
.sub-card-delete:hover {
  background:rgba(244,63,94,.25); border-color:rgba(244,63,94,.4);
  color:#f43f5e; transform:scale(1.1);
}

.sub-card-add {
  border:2px dashed var(--border2); background:transparent;
  min-height:180px; justify-content:center;
}
.sub-card-add::before, .sub-card-add::after { display:none; }
.sub-card-add:hover {
  border-color:var(--accent); background:var(--accent-bg);
  box-shadow:0 0 24px rgba(124,111,247,.08);
  transform:translateY(-2px);
}
.sub-card-add .sub-card-icon {
  font-size:32px; opacity:.4; filter:none;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg4); border:1px solid var(--border2);
  transition:all .2s;
}
.sub-card-add:hover .sub-card-icon {
  opacity:.8; background:var(--accent-bg); border-color:var(--accent-border);
}
.sub-card-add .sub-card-name { color:var(--text2); font-weight:600; }

/* ═══════════════════════════════════════
   TOPICS — Topic List
═══════════════════════════════════════ */
.topics-list { display:flex; flex-direction:column; gap:8px; }

.topic-term-label {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--text3); margin:16px 0 8px; padding-left:4px;
  display:flex; align-items:center; gap:8px;
}
.topic-term-label::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,var(--border2),transparent);
}
.topic-term-label:first-child { margin-top:0; }

.topic-row {
  display:flex; align-items:center; gap:14px; padding:14px 18px;
  border-radius:14px; border:1px solid var(--border2); cursor:pointer;
  background:var(--bg3); transition:all .22s var(--ease);
  position:relative; overflow:hidden;
  animation:sfRowIn .35s var(--ease) both;
}
@keyframes sfRowIn {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}
/* Left accent bar */
.topic-row::after {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  border-radius:0 2px 2px 0;
  transform:scaleY(0); transition:transform .25s var(--ease);
  transform-origin:center;
}
.topic-row:hover {
  border-color:var(--border3);
  background:linear-gradient(90deg,rgba(124,111,247,.02),var(--bg3));
}
.topic-row.selected {
  border-color:var(--accent-border); background:var(--accent-bg);
  box-shadow:0 0 16px rgba(124,111,247,.06);
}
.topic-row.selected::after { transform:scaleY(1); }

.topic-row input[type="checkbox"] {
  width:20px; height:20px; accent-color:var(--accent); flex-shrink:0;
}
.topic-info { flex:1; min-width:0; }
.topic-title {
  font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px;
}
.topic-meta {
  font-size:12px; color:var(--text3); margin-top:3px; display:flex; gap:12px;
}
.topic-custom-badge {
  font-size:10px; font-weight:700; padding:2px 8px; border-radius:6px;
  background:var(--accent-bg); color:var(--accent2); text-transform:uppercase;
  letter-spacing:.4px; border:1px solid var(--accent-border);
}
.topic-mastery-dot {
  display:inline-block; width:10px; height:10px; border-radius:50%;
  flex-shrink:0; transition:box-shadow .3s, background .3s;
}
.topic-mastery-dot[data-active="true"] {
  box-shadow:0 0 6px currentColor;
}
.topic-mastery-dot[data-active="false"] {
  opacity:.45;
}
/* Mini progress bar for topics with attempts */
.topic-progress {
  width:48px; height:4px; border-radius:2px; background:var(--bg5);
  overflow:hidden; flex-shrink:0;
}
.topic-progress-fill { height:100%; border-radius:2px; transition:width .6s var(--ease); }

/* Delete button on custom topic rows */
.topic-delete-btn {
  flex-shrink:0; padding:4px 8px; border-radius:8px;
  background:none; border:1px solid transparent;
  font-size:13px; cursor:pointer; opacity:0;
  transition:all .2s;
}
.topic-row:hover .topic-delete-btn { opacity:.6; }
.topic-delete-btn:hover {
  opacity:1 !important; background:rgba(244,63,94,.1);
  border-color:rgba(244,63,94,.2);
}

/* Weak area banner */
.topic-weak-banner {
  padding:18px 20px; border-radius:16px; margin-bottom:24px;
  background:linear-gradient(135deg,rgba(244,114,114,.1),rgba(244,114,114,.02));
  border:1px solid var(--red-border);
  position:relative; overflow:hidden;
}
.topic-weak-banner::before {
  content:''; position:absolute; top:-20px; right:-20px;
  width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle,rgba(244,114,114,.08),transparent 70%);
}
.topic-weak-title {
  font-size:14px; font-weight:700; color:var(--red); margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
.topic-weak-sub { font-size:13px; color:var(--text2); margin-bottom:12px; line-height:1.5; }
.topic-weak-btn {
  font-size:12px; padding:8px 16px; border-radius:10px; font-weight:600;
  background:var(--red-bg); border:1px solid var(--red-border);
  color:var(--red); cursor:pointer; transition:all .2s var(--ease);
}
.topic-weak-btn:hover {
  background:rgba(244,114,114,.15);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(244,114,114,.15);
}

/* Select controls row */
.topic-select-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; padding:0 2px;
}
.topic-select-all {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13px; font-weight:600;
}
.topic-select-count {
  font-size:13px; color:var(--text3);
  font-variant-numeric:tabular-nums;
}

/* Add custom topic button */
.topic-add-btn {
  width:100%; padding:14px; margin-top:20px;
  border:2px dashed var(--border2); border-radius:14px;
  background:transparent; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--text3);
  transition:all .22s var(--ease);
}
.topic-add-btn:hover {
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-bg);
  transform:translateY(-1px);
}

/* Sticky study bar */
.topic-study-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:rgba(8,8,14,.88); backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-top:1px solid var(--border2); padding:14px 20px;
  transform:translateY(100%); transition:transform .35s var(--ease);
}
.topic-study-bar.visible { transform:translateY(0); }
.topic-study-bar-inner { max-width:760px; margin:0 auto; }

/* On mobile the bottom nav is present — lift the study bar above it and
   give the topic list enough clearance so the last card isn't covered. */
@media (max-width:580px) {
  .topic-study-bar { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .topics-page { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important; }
}
.topic-study-bar .btn-primary {
  width:100%; padding:16px; font-size:15px; font-weight:700; border-radius:14px;
  box-shadow:0 -4px 28px rgba(124,111,247,.3);
  transition:all .25s var(--ease);
}
.topic-study-bar .btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 -8px 36px rgba(124,111,247,.4);
}

/* ═══════════════════════════════════════
   STUDY HUB — Tool Cards
═══════════════════════════════════════ */
.sh-topics-pills {
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px;
  padding:16px 18px; border-radius:16px;
  background:var(--bg3); border:1px solid var(--border2);
}
.sh-pill {
  font-size:12px; padding:5px 12px; border-radius:8px; font-weight:600;
  background:var(--accent-bg); color:var(--accent2);
  border:1px solid var(--accent-border);
}

/* Content mode toggle */
.sh-mode-row { display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
.sh-mode-btn {
  flex:1; min-width:100px; padding:12px 16px; border-radius:12px;
  border:1.5px solid var(--border2); background:var(--bg3);
  cursor:pointer; font-size:13px; font-weight:600; text-align:center;
  transition:all .22s var(--ease); color:var(--text2);
}
.sh-mode-btn:hover { border-color:var(--border3); color:var(--text); background:var(--bg4); }
.sh-mode-btn.active {
  border-color:var(--accent); background:var(--accent-bg);
  color:var(--accent2);
  box-shadow:0 0 20px rgba(124,111,247,.1), inset 0 0 16px rgba(124,111,247,.04);
}

/* Tool cards grid */
.sh-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr)); gap:14px;
}
.sh-tool {
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:22px 20px; border-radius:20px;
  border:1px solid var(--border2); background:var(--bg3);
  color:var(--text);
  cursor:pointer; text-align:left; width:100%;
  transition:all .3s var(--ease); overflow:hidden;
  animation:sfCardIn .4s var(--ease) both;
}
/* Gradient tint — always slightly visible */
.sh-tool::before {
  content:''; position:absolute; inset:0; border-radius:19px;
  opacity:.35; transition:opacity .3s;
}
/* Top edge glow */
.sh-tool::after {
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  opacity:0; transition:opacity .3s;
}
.sh-tool:hover {
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 16px 48px rgba(0,0,0,.4);
}
.sh-tool:hover::before { opacity:1; }
.sh-tool:hover::after { opacity:1; }
.sh-tool:active { transform:translateY(-1px) scale(.99); transition-duration:.1s; }

/* Arrow indicator */
.sh-tool-arrow {
  position:absolute; top:22px; right:18px; z-index:1;
  color:var(--text3); transition:all .25s var(--ease);
  opacity:.4;
}
.sh-tool:hover .sh-tool-arrow {
  opacity:1; transform:translateX(3px);
}

.sh-tool-icon {
  font-size:28px; position:relative; z-index:1;
  width:54px; height:54px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border2);
  transition:all .3s var(--ease);
}
.sh-tool:hover .sh-tool-icon {
  transform:scale(1.05);
  border-color:transparent;
}
.sh-tool-name {
  font-size:16px; font-weight:700; position:relative; z-index:1;
  margin-top:2px; color:var(--text);
}
.sh-tool-desc {
  font-size:12px; color:var(--text3); line-height:1.5;
  position:relative; z-index:1;
}

/* Tool-specific accent colors */
.sh-tool[data-tool="flashcards"]:hover { border-color:rgba(245,184,65,.3); }
.sh-tool[data-tool="flashcards"]::before { background:linear-gradient(160deg,rgba(245,184,65,.1),transparent 55%); }
.sh-tool[data-tool="flashcards"]::after { background:linear-gradient(90deg,transparent,rgba(245,184,65,.3),transparent); }
.sh-tool[data-tool="flashcards"] .sh-tool-icon { background:rgba(245,184,65,.08); }
.sh-tool[data-tool="flashcards"]:hover .sh-tool-icon { background:rgba(245,184,65,.15); box-shadow:0 0 20px rgba(245,184,65,.1); }
.sh-tool[data-tool="flashcards"]:hover .sh-tool-arrow { color:rgba(245,184,65,.8); }

.sh-tool[data-tool="recall"]:hover { border-color:rgba(139,92,246,.3); }
.sh-tool[data-tool="recall"]::before { background:linear-gradient(160deg,rgba(139,92,246,.1),transparent 55%); }
.sh-tool[data-tool="recall"]::after { background:linear-gradient(90deg,transparent,rgba(139,92,246,.3),transparent); }
.sh-tool[data-tool="recall"] .sh-tool-icon { background:rgba(139,92,246,.08); }
.sh-tool[data-tool="recall"]:hover .sh-tool-icon { background:rgba(139,92,246,.15); box-shadow:0 0 20px rgba(139,92,246,.1); }
.sh-tool[data-tool="recall"]:hover .sh-tool-arrow { color:rgba(139,92,246,.8); }

.sh-tool[data-tool="explain"]:hover { border-color:rgba(59,130,246,.3); }
.sh-tool[data-tool="explain"]::before { background:linear-gradient(160deg,rgba(59,130,246,.1),transparent 55%); }
.sh-tool[data-tool="explain"]::after { background:linear-gradient(90deg,transparent,rgba(59,130,246,.3),transparent); }
.sh-tool[data-tool="explain"] .sh-tool-icon { background:rgba(59,130,246,.08); }
.sh-tool[data-tool="explain"]:hover .sh-tool-icon { background:rgba(59,130,246,.15); box-shadow:0 0 20px rgba(59,130,246,.1); }
.sh-tool[data-tool="explain"]:hover .sh-tool-arrow { color:rgba(59,130,246,.8); }

.sh-tool[data-tool="audio"]:hover { border-color:rgba(52,217,122,.3); }
.sh-tool[data-tool="audio"]::before { background:linear-gradient(160deg,rgba(52,217,122,.1),transparent 55%); }
.sh-tool[data-tool="audio"]::after { background:linear-gradient(90deg,transparent,rgba(52,217,122,.3),transparent); }
.sh-tool[data-tool="audio"] .sh-tool-icon { background:rgba(52,217,122,.08); }
.sh-tool[data-tool="audio"]:hover .sh-tool-icon { background:rgba(52,217,122,.15); box-shadow:0 0 20px rgba(52,217,122,.1); }
.sh-tool[data-tool="audio"]:hover .sh-tool-arrow { color:rgba(52,217,122,.8); }

.sh-tool[data-tool="mindmap"]:hover { border-color:rgba(47,207,190,.3); }
.sh-tool[data-tool="mindmap"]::before { background:linear-gradient(160deg,rgba(47,207,190,.1),transparent 55%); }
.sh-tool[data-tool="mindmap"]::after { background:linear-gradient(90deg,transparent,rgba(47,207,190,.3),transparent); }
.sh-tool[data-tool="mindmap"] .sh-tool-icon { background:rgba(47,207,190,.08); }
.sh-tool[data-tool="mindmap"]:hover .sh-tool-icon { background:rgba(47,207,190,.15); box-shadow:0 0 20px rgba(47,207,190,.1); }
.sh-tool[data-tool="mindmap"]:hover .sh-tool-arrow { color:rgba(47,207,190,.8); }

.sh-tool[data-tool="braindump"]:hover { border-color:rgba(244,63,94,.3); }
.sh-tool[data-tool="braindump"]::before { background:linear-gradient(160deg,rgba(244,63,94,.1),transparent 55%); }
.sh-tool[data-tool="braindump"]::after { background:linear-gradient(90deg,transparent,rgba(244,63,94,.3),transparent); }
.sh-tool[data-tool="braindump"] .sh-tool-icon { background:rgba(244,63,94,.08); }
.sh-tool[data-tool="braindump"]:hover .sh-tool-icon { background:rgba(244,63,94,.15); box-shadow:0 0 20px rgba(244,63,94,.1); }
.sh-tool[data-tool="braindump"]:hover .sh-tool-arrow { color:rgba(244,63,94,.8); }

.sh-tool[data-tool="chat"]:hover { border-color:rgba(99,102,241,.3); }
.sh-tool[data-tool="chat"]::before { background:linear-gradient(160deg,rgba(99,102,241,.1),transparent 55%); }
.sh-tool[data-tool="chat"]::after { background:linear-gradient(90deg,transparent,rgba(99,102,241,.3),transparent); }
.sh-tool[data-tool="chat"] .sh-tool-icon { background:rgba(99,102,241,.08); }
.sh-tool[data-tool="chat"]:hover .sh-tool-icon { background:rgba(99,102,241,.15); box-shadow:0 0 20px rgba(99,102,241,.1); }
.sh-tool[data-tool="chat"]:hover .sh-tool-arrow { color:rgba(99,102,241,.8); }

/* ── Add Subjects Modal ── */
.sf-modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.65); backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  display:flex; align-items:center; justify-content:center; padding:16px;
  animation:sfOverlayIn .25s ease;
}
@keyframes sfOverlayIn { from { opacity:0; } }

.sf-modal {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:24px; max-width:480px; width:100%;
  max-height:80vh; overflow-y:auto; padding:28px;
  box-shadow:0 24px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(124,111,247,.06);
  animation:sfModalIn .35s var(--ease);
}
@keyframes sfModalIn { from { opacity:0; transform:translateY(20px) scale(.96); } }

.sf-modal-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;
}
.sf-modal-title { font-size:20px; font-weight:800; }
.sf-modal-close {
  width:36px; height:36px; border-radius:10px; border:none;
  background:var(--bg4); color:var(--text2); font-size:20px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.sf-modal-close:hover { background:var(--bg5); color:var(--text); transform:rotate(90deg); }

/* ── Mobile ── */
@media (max-width:600px) {
  .sf-page { padding:20px 14px; }
  .sf-page::before { width:300px; height:200px; }
  .sf-header-title { font-size:19px; }
  .sf-header-icon { width:44px; height:44px; font-size:28px; border-radius:12px; }
  .subjects-grid { grid-template-columns:repeat(auto-fill,minmax(min(145px,100%),1fr)); gap:10px; }
  .sub-card { padding:18px 12px 14px; border-radius:16px; }
  .sh-grid { grid-template-columns:1fr; }
  .sh-mode-row { flex-direction:column; }
  .onboard-grid { grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr)); }
  .onboard-title { font-size:24px; }
  .onboard-icon { font-size:52px; }
}

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE INSIGHTS — Charts & Visual Analytics
═══════════════════════════════════════════════════════════ */

.ins-container {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 20px;
  overflow: hidden;
}
.ins-header { padding: 24px 24px 0; }
.ins-title { font-size: 20px; font-weight: 800; color: var(--text); }
.ins-subtitle { font-size: 13px; color: var(--text3); margin-top: 4px; }

/* Tabs */
.ins-tabs { display: flex; gap: 4px; padding: 16px 24px 0; border-bottom: 1px solid var(--border); }
.ins-tab {
  padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--text3);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; transition: all .2s var(--ease); border-radius: 8px 8px 0 0;
}
.ins-tab:hover { color: var(--text2); background: var(--bg3); }
.ins-tab.active { color: var(--accent2); border-bottom-color: var(--accent); background: rgba(124,111,247,.06); }

/* Panels */
.ins-panel { display: none; padding: 24px; }
.ins-panel-active { display: block; }

/* ── Chart card — reusable container for any chart ── */
.ins-chart-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}
.ins-chart-card:hover { border-color: var(--border3); }
.ins-chart-wide { /* full width */ }
.ins-chart-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.ins-chart-sub { font-size: 12px; color: var(--text3); margin-bottom: 16px; line-height: 1.5; }
.ins-chart-center { display: flex; justify-content: center; padding: 12px 0; }

/* ── 2-column row ── */
.ins-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

/* ── Donut chart ── */
.ins-donut-wrap { position: relative; display: inline-block; }
.ins-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.ins-donut-total { font-size: 28px; font-weight: 900; color: var(--text); line-height: 1; }
.ins-donut-label { font-size: 10px; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.ins-donut-svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.ins-donut-seg { transition: opacity .2s; cursor: default; }
.ins-donut-seg:hover { opacity: 1 !important; filter: brightness(1.2); }
.ins-donut-legend {
  display: flex; justify-content: center; gap: 16px; margin-top: 12px;
  font-size: 11px; color: var(--text3);
}

/* ── Overall ring ── */
.ins-ring-wrap { position: relative; display: inline-block; }
.ins-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ins-ring-val { font-size: 32px; font-weight: 900; color: var(--text); line-height: 1; }
.ins-ring-label { font-size: 10px; color: var(--text3); font-weight: 600; text-transform: uppercase; margin-top: 2px; }
.ins-ring-anim { animation: insRingDraw .8s ease-out forwards; }
@keyframes insRingDraw { from { stroke-dashoffset: 339.292; } }

/* ── Stat chips row ── */
.ins-stat-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ins-stat-chip {
  font-size: 11px; color: var(--text3); background: var(--bg4);
  padding: 5px 12px; border-radius: 8px; font-weight: 600;
}
.ins-stat-chip span { font-weight: 800; margin-right: 3px; }

/* ── Legend dot ── */
.ins-leg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* ── Radar chart ── */
.ins-radar-wrap { display: flex; justify-content: center; padding: 8px 0; }
.ins-radar-svg { max-width: 320px; filter: drop-shadow(0 2px 12px rgba(124,111,247,.15)); }

/* ── Horizontal bar chart ── */
.ins-hbar-wrap { overflow-x: auto; padding: 8px 0; }
.ins-hbar-svg { min-width: 300px; }
.ins-bar-anim { animation: insBarGrow .6s ease-out forwards; }
@keyframes insBarGrow { from { width: 0; } }

/* ── Vertical bar chart ── */
.ins-vbar-wrap { overflow-x: auto; padding: 8px 0; }
.ins-vbar-svg { min-width: 250px; }
.ins-vbar-anim { animation: insVBarGrow .5s ease-out forwards; transform-origin: bottom; }
@keyframes insVBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── Stacked bar (subjects tab) ── */
.ins-stacked-bar {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  background: var(--bg5); margin-bottom: 10px;
}
.ins-stacked-seg { min-width: 3px; transition: width .4s var(--ease); }
.ins-stacked-legend {
  display: flex; gap: 12px; flex-wrap: wrap; font-size: 10px; color: var(--text3);
}

/* ── Subject detail cards ── */
.ins-subj-detail {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 16px; padding: 20px; margin-bottom: 14px;
}
.ins-subj-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ins-subj-name { font-size: 16px; font-weight: 800; color: var(--text); }
.ins-subj-sub { font-size: 11px; color: var(--text3); margin-top: 3px; }
.ins-subj-score { font-size: 28px; font-weight: 900; }

/* ── Concept rows ── */
.ins-concept-list { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.ins-concept-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; background: var(--bg4); border: 1px solid var(--border);
  border-radius: 10px; transition: border-color .2s;
}
.ins-concept-row:hover { border-color: var(--border3); }
.ins-concept-info { flex: 1; min-width: 0; }
.ins-concept-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ins-concept-meta {
  font-size: 11px; color: var(--text3); margin-top: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ins-concept-score { font-size: 16px; font-weight: 800; flex-shrink: 0; }
.ins-mastery-pill { font-size: 10px; padding: 2px 8px; border-radius: 6px; font-weight: 700; }

/* ── Question type recommendations ── */
.ins-qtype-recs { margin-top: 12px; }
.ins-qtype-alert {
  font-size: 12px; color: var(--red); padding: 8px 14px;
  background: var(--red-bg); border-radius: 10px; margin-bottom: 6px; font-weight: 500;
}

/* ── Focus area cards ── */
.ins-focus-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%), 1fr)); gap: 12px; }
.ins-focus-card {
  position: relative;
  background: var(--bg4); border: 1px solid var(--border2);
  border-radius: 14px; padding: 16px; transition: border-color .2s;
}
.ins-focus-card:hover { border-color: var(--border3); }
.ins-focus-dismiss {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text4); font-size: 13px;
  opacity: 0; transition: all .15s;
}
.ins-focus-card:hover .ins-focus-dismiss { opacity: 1; }
.ins-focus-dismiss:hover { background: var(--red-bg); color: var(--red); }
.ins-focus-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ins-focus-strength {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; flex-shrink: 0;
}
.ins-focus-concept { font-size: 14px; font-weight: 700; color: var(--text); }
.ins-focus-subject { font-size: 11px; color: var(--text3); margin-top: 2px; }
.ins-focus-rec {
  font-size: 12px; color: var(--text2); line-height: 1.5;
  padding: 8px 12px; background: var(--bg3); border-radius: 10px; margin-bottom: 8px;
}
.ins-focus-meta { font-size: 10px; color: var(--text4); }

/* ── Mistake cards ── */
.ins-mistakes-list { display: flex; flex-direction: column; gap: 10px; }
.ins-mistake-card {
  background: var(--bg3); border: 1px solid var(--border2);
  border-left: 4px solid var(--red); border-radius: 12px; padding: 16px;
}
.ins-mistake-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ins-mistake-concept { font-size: 14px; font-weight: 700; color: var(--text); }
.ins-mistake-freq { font-size: 11px; font-weight: 700; color: var(--red); background: var(--red-bg); padding: 3px 10px; border-radius: 8px; }
.ins-mistake-subject { font-size: 11px; color: var(--text3); margin-bottom: 8px; }
.ins-mistake-answers { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.ins-mistake-wrong { font-size: 12px; color: var(--red); padding: 6px 10px; background: var(--red-bg); border-radius: 8px; }
.ins-mistake-right { font-size: 12px; color: var(--green); padding: 6px 10px; background: var(--green-bg); border-radius: 8px; }
.ins-mistake-misc { font-size: 12px; color: var(--amber); padding: 6px 10px; background: var(--amber-bg); border-radius: 8px; margin-top: 4px; }
.ins-mistake-label { font-weight: 700; margin-right: 4px; }
.ins-mistake-qtype { font-size: 10px; color: var(--text4); margin-top: 6px; }

/* ── Empty states ── */
.ins-empty { text-align: center; padding: 32px 16px; font-size: 13px; color: var(--text3); }
.ins-empty-hero {
  text-align: center; padding: 48px 24px; background: var(--bg2);
  border: 1px solid var(--border2); border-radius: 20px;
}
.ins-empty-icon { font-size: 40px; margin-bottom: 12px; }
.ins-empty-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.ins-empty-sub { font-size: 13px; color: var(--text3); max-width: 400px; margin: 0 auto; line-height: 1.6; }

/* ── Mobile ── */
@media (max-width: 600px) {
  .ins-row-2 { grid-template-columns: 1fr; }
  .ins-tabs { overflow-x: auto; padding: 12px 16px 0; }
  .ins-tab { padding: 8px 14px; font-size: 12px; white-space: nowrap; }
  .ins-panel { padding: 16px; }
  .ins-header { padding: 20px 16px 0; }
  .ins-focus-list { grid-template-columns: 1fr; }
  .ins-donut-legend { flex-direction: column; align-items: center; gap: 6px; }
  .ins-chart-card { padding: 16px; }
  .ins-radar-svg { max-width: 240px; }
}

/* ═══════════════════════════════════════════════════════════════
   DEEP INSIGHTS — Study habits, trends, risk factors
   ═══════════════════════════════════════════════════════════════ */

/* Analyse Deeper button */
.deep-dive-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: 14px;
  background: linear-gradient(135deg, #7c6ff7 0%, #a78bfa 100%);
  color: white; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer;
  box-shadow: 0 4px 16px rgba(124,111,247,.3);
  transition: transform .15s, box-shadow .15s;
}
.deep-dive-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(124,111,247,.4);
}
.deep-dive-btn:active { transform: translateY(0); }

/* Deep section wrapper */
.deep-section {
  margin-top: 20px;
  padding: 20px;
  border-top: 2px solid var(--accent);
  background: rgba(124,111,247,.02);
  border-radius: 0 0 16px 16px;
}

.deep-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.deep-header-icon { font-size: 28px; }
.deep-header-title { font-size: 16px; font-weight: 800; color: var(--text); }
.deep-header-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* Alerts */
.deep-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 14px;
}
.deep-alert-icon { font-size: 18px; flex-shrink: 0; }
.deep-alert-red { background: var(--red-bg); color: var(--red); border: 1px solid rgba(244,114,114,.2); }
.deep-alert-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid rgba(245,184,65,.2); }

/* Engagement + metric cards */
.deep-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 16px;
}
.deep-metric-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 16px 8px; border-radius: 14px;
  background: var(--bg3); border: 1px solid var(--border);
  text-align: center;
}
.deep-metric-ring { position: relative; display: inline-block; }
.deep-metric-ring-val {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px; font-weight: 900; color: var(--text);
}
.deep-metric-big { font-size: 32px; font-weight: 900; line-height: 1.1; }
.deep-metric-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-top: 6px; }

/* Hour of day chart */
.deep-hour-chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 80px; padding: 0 2px;
}
.deep-hour-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  min-width: 2px; transition: height .3s var(--ease);
}
.deep-hour-labels {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--text4); margin-top: 4px;
  padding: 0 2px;
}

/* Day of week chart */
.deep-dow-chart {
  display: flex; align-items: flex-end; gap: 8px;
  height: 100px; padding: 0 4px;
}
.deep-dow-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; height: 100%;
  justify-content: flex-end;
}
.deep-dow-bar {
  width: 100%; border-radius: 4px 4px 0 0;
  min-height: 3px; transition: height .3s var(--ease);
}
.deep-dow-label { font-size: 10px; font-weight: 600; color: var(--text3); margin-top: 4px; }
.deep-dow-val { font-size: 10px; font-weight: 700; color: var(--text2); }

/* Activity calendar */
.deep-calendar {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}
.deep-cal-cell {
  aspect-ratio: 1; border-radius: 3px;
  min-width: 16px;
}
.deep-cal-0 { background: var(--bg5); }
.deep-cal-1 { background: rgba(124,111,247,.25); }
.deep-cal-2 { background: rgba(124,111,247,.5); }
.deep-cal-3 { background: rgba(124,111,247,.85); }
.deep-cal-legend {
  display: flex; align-items: center; gap: 4px;
  justify-content: flex-end; margin-top: 6px;
}

/* Concept chips */
.deep-concept-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: var(--bg4); border-radius: 8px;
  font-size: 11px; font-weight: 600; color: var(--text);
}

/* Risk grid */
.deep-risk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px,100%), 1fr));
  gap: 8px;
}
.deep-risk-item {
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg4); border: 1px solid var(--border);
}
.deep-risk-danger { border-color: rgba(244,114,114,.3); }
.deep-risk-concept { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.deep-risk-subject { font-size: 10px; color: var(--text3); margin-bottom: 4px; }
.deep-risk-meta { font-size: 10px; color: var(--text3); }

/* Recommendations */
.deep-rec {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  margin-bottom: 8px; font-size: 13px; line-height: 1.5;
}
.deep-rec-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.deep-rec-text { color: var(--text); }
.deep-rec-red { background: var(--red-bg); border: 1px solid rgba(244,114,114,.15); }
.deep-rec-amber { background: var(--amber-bg); border: 1px solid rgba(245,184,65,.15); }
.deep-rec-green { background: var(--green-bg); border: 1px solid rgba(52,217,122,.15); }

/* Quick reference grid */
.deep-ref-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.deep-ref-item {
  text-align: center; padding: 12px 8px;
  background: var(--bg4); border-radius: 10px;
}
.deep-ref-val { font-size: 22px; font-weight: 900; color: var(--accent2); }
.deep-ref-label { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .3px; margin-top: 4px; }

/* Mobile deep insights */
@media (max-width: 640px) {
  .deep-grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .deep-metric-big { font-size: 24px; }
  .deep-section { padding: 14px; }
  .deep-risk-grid { grid-template-columns: 1fr; }
  .deep-ref-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .deep-ref-val { font-size: 18px; }
  .deep-calendar { grid-template-columns: repeat(6, 1fr); }
  .deep-dive-btn { font-size: 13px; padding: 10px 20px; }
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD — Subject Cards Row
════════════════════════════════════════════════════════════ */

.dash-subjects-scroll {
  display:flex; gap:12px; overflow-x:auto; padding:4px 0 16px;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.dash-subjects-scroll::-webkit-scrollbar { display:none; }

.dash-subject-card {
  flex:0 0 auto; width:120px; min-height:140px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:16px 10px;
  background:var(--bg3); border:1px solid var(--border); border-radius:16px;
  cursor:pointer; transition:all .25s var(--ease);
  scroll-snap-align:start;
  position:relative; overflow:hidden;
}
.dash-subject-card::before {
  content:''; position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(135deg, rgba(124,111,247,.06), transparent);
  opacity:0; transition:opacity .3s;
}
.dash-subject-card:hover {
  border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(124,111,247,.12);
}
.dash-subject-card:hover::before { opacity:1; }
.dash-subject-card:active { transform:translateY(-1px) scale(.98); }

.dash-subject-icon { font-size:28px; position:relative; z-index:1; }
.dash-subject-name {
  font-size:12px; font-weight:700; text-align:center;
  color:var(--text); line-height:1.3; position:relative; z-index:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dash-subject-meta {
  font-size:10px; color:var(--text3); position:relative; z-index:1;
}
.dash-subject-mastery {
  margin-top:2px; position:relative; z-index:1;
}

.dash-subject-add {
  border-style:dashed; border-color:var(--border2);
  background:transparent;
}
.dash-subject-add:hover {
  border-color:var(--accent); border-style:solid;
}

@media (max-width:600px) {
  .dash-subject-card { width:105px; min-height:125px; padding:14px 8px; }
  .dash-subject-icon { font-size:24px; }
  .dash-subject-name { font-size:11px; }
}

/* ═══════════════════════════════════════════════════════════════
   MATH HUB
   ═══════════════════════════════════════════════════════════════ */
.mh-page { max-width:760px; margin:0 auto; padding:4px 0 40px; }
.mh-hero { padding:22px 20px; border-radius:18px; margin-bottom:18px;
  background:linear-gradient(135deg, rgba(124,111,247,.16), rgba(22,184,166,.10)); border:1px solid var(--border); }
.mh-hero-badge { font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--accent2); margin-bottom:10px; }
.mh-hero-title { font-family:var(--font-serif); font-size:26px; line-height:1.15; color:var(--text); margin-bottom:8px; }
.mh-hero-title em { color:var(--accent2); font-style:italic; }
.mh-hero-sub { font-size:13.5px; line-height:1.6; color:var(--text2); }
.mh-grid { display:flex; flex-direction:column; gap:10px; }
.mh-card { display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px 16px; cursor:pointer; transition:transform .12s, background .12s; }
.mh-card:hover { background:var(--bg3); transform:translateY(-1px); }
.mh-card-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.mh-card-body { flex:1; min-width:0; }
.mh-card-title { font-size:16px; font-weight:700; color:var(--text); }
.mh-card-sub { font-size:12.5px; color:var(--text3); line-height:1.5; margin-top:3px; }
.mh-card-meta { font-size:11px; color:var(--accent2); font-weight:600; margin-top:6px; }
.mh-card-arrow { font-size:22px; color:var(--text4); flex-shrink:0; }
.mh-tip { margin-top:16px; font-size:12.5px; color:var(--text2); background:var(--bg2); border:1px dashed var(--border); border-radius:12px; padding:12px 14px; }

.mh-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; }
.mh-back { background:none; border:none; color:var(--text2); font-size:13px; font-weight:600; cursor:pointer; padding:6px 2px; }
.mh-back:hover { color:var(--text); }
.mh-quiz-btn { border:none; color:#fff; font-weight:700; font-size:13px; padding:9px 16px; border-radius:999px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.mh-quiz-btn:hover { filter:brightness(1.08); }
.mh-topic-head { display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:18px; }
.mh-section-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text4); margin:6px 4px 10px; }
.mh-skill-list { display:flex; flex-direction:column; gap:8px; }
.mh-skill-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; cursor:pointer; transition:background .12s; }
.mh-skill-row:hover { background:var(--bg3); }
.mh-skill-name { flex:1; font-size:14.5px; font-weight:600; color:var(--text); }
.mh-skill-meta { font-size:11px; color:var(--text3); }

.mh-skill-head { font-size:19px; font-weight:700; color:var(--text); margin-bottom:14px; display:flex; gap:8px; align-items:center; }
.mh-tabs { display:flex; gap:6px; margin-bottom:16px; background:var(--bg2); padding:4px; border-radius:12px; }
.mh-tab { flex:1; border:none; background:none; color:var(--text3); font-size:12.5px; font-weight:600; padding:9px 6px; border-radius:9px; cursor:pointer; transition:.12s; }
.mh-tab.active { background:var(--card); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.15); }

.mh-kw { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.mh-kw-chip { font-size:12px; font-family:var(--font-mono); background:var(--accent-bg); color:var(--accent2); border-radius:8px; padding:5px 10px; }
.mh-method { padding-left:20px; display:flex; flex-direction:column; gap:10px; }
.mh-method li { font-size:13.5px; line-height:1.6; color:var(--text2); }

.mh-worked { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:12px; }
.mh-worked-q, .mh-prac-q { font-size:14.5px; font-weight:600; color:var(--text); line-height:1.5; margin-bottom:12px; }
.mh-q-tag { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:6px; margin-right:8px; background:var(--bg3); color:var(--text3); vertical-align:middle; }
.mh-q-tag.mcq { background:rgba(124,111,247,.18); color:var(--accent2); }
.mh-q-tag.calc { background:rgba(245,165,36,.18); color:#f5a524; }
.mh-steps { padding-left:20px; display:flex; flex-direction:column; gap:7px; margin:10px 0; }
.mh-steps li { font-size:13px; line-height:1.55; color:var(--text2); }
.mh-answer { font-size:14px; font-weight:700; color:var(--teal); background:var(--teal-bg); border-radius:10px; padding:10px 14px; margin-top:6px; }

.mh-prac { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:12px; }
.mh-options { display:flex; flex-direction:column; gap:8px; }
.mh-opt { text-align:left; background:var(--bg2); border:1.5px solid var(--border); border-radius:11px; padding:12px 14px; font-size:14px; color:var(--text); cursor:pointer; transition:.12s; }
.mh-opt:hover:not(:disabled) { border-color:var(--accent); background:var(--bg3); }
.mh-opt:disabled { cursor:default; }
.mh-opt.correct { border-color:var(--teal); background:var(--teal-bg); color:var(--teal); font-weight:700; }
.mh-opt.wrong { border-color:var(--red); background:rgba(239,68,68,.1); color:var(--red); }
.mh-feedback { margin-top:12px; font-size:13px; line-height:1.55; padding:11px 14px; border-radius:10px; font-weight:700; }
.mh-feedback span { display:block; font-weight:400; color:var(--text2); margin-top:4px; }
.mh-feedback.good { background:var(--teal-bg); color:var(--teal); }
.mh-feedback.bad { background:rgba(239,68,68,.1); color:var(--red); }
.mh-reveal { background:var(--bg3); border:1px solid var(--border); color:var(--text2); font-size:13px; font-weight:600; padding:9px 16px; border-radius:10px; cursor:pointer; }
.mh-reveal:hover { color:var(--text); }
.mh-reveal-body { margin-top:12px; }
.mh-selfgrade { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12px; color:var(--text3); flex-wrap:wrap; }
.mh-sg { border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.mh-sg.ok { background:var(--teal-bg); color:var(--teal); }
.mh-sg.no { background:var(--bg3); color:var(--text2); }
.mh-empty { font-size:13px; color:var(--text3); text-align:center; padding:24px; }

/* Quiz mode */
.mh-quiz-prog { height:6px; background:var(--bg3); border-radius:6px; overflow:hidden; margin-bottom:8px; }
.mh-quiz-prog-fill { height:100%; border-radius:6px; transition:width .3s; }
.mh-quiz-label { font-size:11px; color:var(--text4); font-weight:600; margin-bottom:14px; }
.mh-quiz-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; }
.mh-quiz-score { font-size:12px; font-weight:700; color:var(--text2); }
.mh-quiz-self { font-size:12px; color:var(--text3); margin-bottom:10px; }
.mh-quiz-working { margin-top:8px; font-weight:400; color:var(--text2); display:flex; flex-direction:column; gap:3px; font-size:12.5px; }
.mh-quiz-next { width:100%; margin-top:14px; border:none; background:var(--accent); color:#fff; font-weight:700; font-size:14px; padding:13px; border-radius:12px; cursor:pointer; }
.mh-quiz-next:hover { filter:brightness(1.08); }
.mh-quiz-result { text-align:center; padding:40px 20px; background:var(--card); border:1px solid var(--border); border-radius:18px; }
.mh-result-pct { font-size:54px; font-weight:800; font-family:var(--font-serif); }
.mh-result-score { font-size:15px; color:var(--text2); margin-top:4px; }
.mh-result-msg { font-size:13.5px; color:var(--text3); margin:12px 0 22px; }
.mh-result-actions { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }

/* ═══ MATH HUB · sidebar spotlight (glow + tingle + NEW badge) ═══ */
.nav-item.nav-spotlight {
  position:relative; overflow:visible;
  background:linear-gradient(90deg, rgba(124,111,247,.20), rgba(22,184,166,.10));
  border:1px solid rgba(124,111,247,.35);
  animation:navGlow 2.3s ease-in-out infinite;
}
@keyframes navGlow {
  0%,100% { box-shadow:0 0 0 rgba(124,111,247,0); }
  50%     { box-shadow:0 0 18px rgba(124,111,247,.5); }
}
.nav-spotlight .nav-icon { display:inline-block; animation:navTingle 2.3s ease-in-out infinite; }
@keyframes navTingle {
  0%,100% { transform:scale(1) rotate(0); }
  42%     { transform:scale(1.22) rotate(-10deg); }
  58%     { transform:scale(1.22) rotate(10deg); }
}
.nav-new-badge {
  margin-left:auto; font-size:9px; font-weight:800; letter-spacing:.06em;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff;
  padding:2px 7px; border-radius:999px; animation:navBadge 1.6s ease-in-out infinite;
}
@keyframes navBadge { 0%,100%{opacity:.85; transform:scale(1);} 50%{opacity:1; transform:scale(1.08);} }
.nav-spark {
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:#cdc6ff; box-shadow:0 0 7px 2px rgba(168,158,255,.95);
  opacity:0; pointer-events:none; animation:navSpark 2.3s ease-in-out infinite;
}
.nav-spark.ns1 { top:4px;  left:30px; animation-delay:.1s; }
.nav-spark.ns2 { bottom:5px; left:46px; animation-delay:.9s; }
.nav-spark.ns3 { top:10px; right:30px; animation-delay:1.5s; }
@keyframes navSpark { 0%,100%{opacity:0; transform:scale(.3) translateY(0);} 50%{opacity:1; transform:scale(1) translateY(-4px);} }

/* ═══ MATH HUB · first-open intro (magical reveal) ═══ */
.mh-intro { max-width:560px; margin:0 auto; text-align:center; padding:18px 18px 48px; }
.mh-intro-stage { height:200px; position:relative; margin:0 auto 6px; }
.mh-intro-stage .opl-stage { transform:scale(1.05); animation:mhStageIn 1s cubic-bezier(.22,1,.36,1) both; }
@keyframes mhStageIn { 0%{opacity:0; transform:scale(.6);} 100%{opacity:1; transform:scale(1.05);} }
.mh-intro-badge { font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--accent2);
  opacity:0; animation:mhRise .6s ease .25s both; }
.mh-intro-title { font-family:var(--font-serif); font-size:30px; line-height:1.12; color:var(--text);
  margin:10px 0 12px; opacity:0; animation:mhRise .6s ease .4s both; }
.mh-intro-title em { color:var(--accent2); font-style:italic; }
.mh-intro-sub { font-size:14px; line-height:1.65; color:var(--text2);
  opacity:0; animation:mhRise .6s ease .55s both; }
.mh-intro-feats { display:flex; flex-direction:column; gap:10px; margin:22px 0 26px; text-align:left; }
.mh-feat { display:flex; gap:12px; align-items:flex-start; background:var(--card);
  border:1px solid var(--border); border-radius:14px; padding:13px 15px; font-size:13px;
  line-height:1.5; color:var(--text2); opacity:0; animation:mhFeatIn .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--d); }
.mh-feat b { color:var(--text); }
.mh-feat-ic { font-size:20px; flex-shrink:0; }
@keyframes mhFeatIn { 0%{opacity:0; transform:translateY(14px) scale(.97);} 100%{opacity:1; transform:translateY(0) scale(1);} }
@keyframes mhRise { 0%{opacity:0; transform:translateY(12px);} 100%{opacity:1; transform:translateY(0);} }
.mh-intro-go {
  border:none; border-radius:999px; padding:15px 40px; font-size:15.5px; font-weight:800; color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); cursor:pointer;
  box-shadow:0 8px 26px rgba(124,111,247,.45); opacity:0;
  animation:mhRise .6s ease 1s both, mhGoPulse 2.4s ease-in-out 1.6s infinite;
}
.mh-intro-go:hover { filter:brightness(1.08); transform:translateY(-1px); }
@keyframes mhGoPulse { 0%,100%{box-shadow:0 8px 26px rgba(124,111,247,.4);} 50%{box-shadow:0 8px 38px rgba(124,111,247,.7);} }

/* Math Hub · exam-level accents */
.mh-q-tag.exam { background:rgba(224,69,123,.18); color:#e0457b; }
.mh-quiz-btn.exam { background:linear-gradient(90deg,#e0457b,#f5a524); }

/* ═══════════════════════════════════════════════════════════════
   ADMIN PANEL — glam command center
   ═══════════════════════════════════════════════════════════════ */
.adm-hero { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(124,111,247,.20), rgba(224,69,123,.10) 60%, rgba(245,165,36,.08));
  border:1px solid var(--border); border-radius:18px; padding:18px 22px; margin-bottom:16px; }
.adm-hero-eyebrow { font-size:10.5px; font-weight:800; letter-spacing:.14em; color:var(--accent2); margin-bottom:6px; }
.adm-hero-title { font-family:var(--font-serif); font-size:26px; line-height:1; color:var(--text); }
.adm-hero-sub { font-size:12.5px; color:var(--text2); margin-top:6px; }
.adm-super-badge { font-size:12px; font-weight:800; color:#fff; padding:7px 14px; border-radius:999px;
  background:linear-gradient(90deg,#e0457b,#f5a524); box-shadow:0 4px 16px rgba(224,69,123,.4); white-space:nowrap; }

.adm-tabbar { display:flex; gap:5px; background:var(--bg2); padding:5px; border-radius:14px; margin-bottom:18px; overflow-x:auto; }
.adm-tab { flex:1 0 auto; min-width:78px; border:none; background:none; color:var(--text3); font-size:11.5px; font-weight:600;
  padding:9px 8px; border-radius:10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:.15s; white-space:nowrap; }
.adm-tab:hover { color:var(--text2); }
.adm-tab .adm-tab-ic { font-size:17px; transition:.15s; }
.adm-tab.active { background:var(--card); color:var(--text); box-shadow:0 2px 10px rgba(0,0,0,.22); }
.adm-tab.active .adm-tab-ic { transform:scale(1.12); filter:drop-shadow(0 0 7px rgba(124,111,247,.5)); }

/* most-used tools bars */
.adm-tool-row { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.adm-tool-row:last-child { margin-bottom:0; }
.adm-tool-ic { font-size:17px; width:22px; text-align:center; flex-shrink:0; }
.adm-tool-name { font-size:13px; color:var(--text); width:120px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-tool-track { flex:1; height:11px; background:var(--bg2); border-radius:6px; overflow:hidden; }
.adm-tool-fill { display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); animation:admBar .7s cubic-bezier(.22,1,.36,1); }
@keyframes admBar { 0%{width:0 !important; opacity:.5;} }
.adm-tool-count { font-size:12.5px; font-weight:700; color:var(--text); width:62px; text-align:right; flex-shrink:0; }
.adm-tool-count small { font-weight:500; color:var(--text3); font-size:10px; }

/* ═══════════════════════════════════════════════════════════════
   QUIZ ME — interactive AI exam quizzing
   ═══════════════════════════════════════════════════════════════ */
.qz-overlay { position:fixed; inset:0; z-index:1000; background:rgba(8,8,14,.72); backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:24px 14px; }
.qz-modal { position:relative; width:100%; max-width:600px; background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; padding:22px; box-shadow:0 24px 70px rgba(0,0,0,.5); margin:auto; }
/* Flex-column modal used by Coach, Future Me and Referral. Was never defined,
   so these panels had no width:100% and overflowed narrow phones (content cut
   off left/right). width:100% + max-width lets them shrink to fit any screen. */
.qz-panel { position:relative; width:100%; max-width:600px; background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.5); margin:auto; overflow:hidden; }
.qz-x { position:absolute; top:14px; right:14px; background:var(--bg3); border:none; color:var(--text2);
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:13px; }
.qz-x:hover { color:var(--text); }
.qz-center { text-align:center; padding:24px 8px; }
.qz-sub { font-size:13px; color:var(--text2); margin-top:14px; }
.qz-title { font-family:var(--font-serif); font-size:22px; color:var(--text); margin:10px 0 6px; }

.qz-top { margin-bottom:16px; }
.qz-prog { height:6px; background:var(--bg3); border-radius:6px; overflow:hidden; }
.qz-prog-fill { height:100%; border-radius:6px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .3s; }
.qz-meta { font-size:11px; color:var(--text4); font-weight:600; margin-top:8px; }

.qz-q { margin-bottom:14px; }
.qz-concept { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:var(--accent-bg); color:var(--accent2); padding:3px 9px; border-radius:6px; margin-right:8px; }
.qz-marks { display:inline-block; font-size:10px; font-weight:700; background:rgba(245,165,36,.18); color:#f5a524; padding:3px 9px; border-radius:6px; }
.qz-q-text { font-size:16px; font-weight:600; color:var(--text); line-height:1.5; margin-top:10px; white-space:pre-wrap; }

.qz-ta { width:100%; background:var(--card); border:1.5px solid var(--border); border-radius:12px; padding:12px 14px;
  font-size:14px; color:var(--text); resize:vertical; font-family:inherit; line-height:1.5; }
.qz-ta:focus { border-color:var(--accent); outline:none; }
.qz-ta[readonly] { opacity:.75; }
.qz-marking { font-size:13px; color:var(--accent2); margin-top:12px; font-weight:600; }

.qz-fb { margin-top:14px; border-radius:12px; padding:14px; }
.qz-fb-correct { background:var(--teal-bg); border:1px solid var(--teal); }
.qz-fb-partial { background:rgba(245,165,36,.12); border:1px solid #f5a524; }
.qz-fb-incorrect { background:rgba(239,68,68,.1); border:1px solid var(--red); }
.qz-fb-reveal { background:var(--card); border:1px solid var(--border); }
.qz-fb-head { font-size:14px; font-weight:800; color:var(--text); margin-bottom:6px; }
.qz-fb-text { font-size:13px; color:var(--text2); line-height:1.55; }
.qz-working { margin-top:12px; }
.qz-working-h { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text4); margin-bottom:6px; }
.qz-working ol { padding-left:20px; display:flex; flex-direction:column; gap:6px; margin:0; }
.qz-working li { font-size:13px; color:var(--text2); line-height:1.5; }
.qz-answer { font-size:14px; font-weight:700; color:var(--teal); background:var(--teal-bg); border-radius:8px; padding:8px 12px; margin-top:10px; }
.qz-selfgrade { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; font-size:12px; color:var(--text3); }
.qz-sg { border:none; border-radius:8px; padding:7px 14px; font-size:12px; font-weight:700; cursor:pointer; }
.qz-sg.ok { background:var(--teal-bg); color:var(--teal); }
.qz-sg.mid { background:rgba(245,165,36,.18); color:#f5a524; }
.qz-sg.no { background:rgba(239,68,68,.12); color:var(--red); }
.qz-sg { transition:transform .1s var(--ease), box-shadow .15s var(--ease), opacity .15s var(--ease); }
.qz-sg:hover { transform:translateY(-1px); }
.qz-sg.sel { box-shadow:0 0 0 2px currentColor inset; }
.qz-selfgrade:has(.qz-sg.sel) .qz-sg:not(.sel) { opacity:.4; }
.qz-sg-q { font-size:12px; font-weight:600; color:var(--text2); margin-right:4px; }
.qz-sg-q b { color:var(--text); }

.qz-actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.qz-btn { flex:1; min-width:130px; border:none; border-radius:12px; padding:13px; font-size:14px; font-weight:700;
  cursor:pointer; background:var(--bg3); color:var(--text); }
.qz-btn.primary { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; box-shadow:0 6px 18px rgba(124,111,247,.35); }
.qz-btn:hover { filter:brightness(1.07); }
.qz-spin { width:42px; height:42px; border:3px solid var(--bg3); border-top-color:var(--accent); border-radius:50%; margin:0 auto; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.qz-result-pct { font-family:var(--font-serif); font-size:54px; font-weight:800; color:var(--accent2); }
.qz-result-line { font-size:14px; color:var(--text2); margin-top:4px; }
.qz-result-msg { font-size:13.5px; color:var(--text3); margin:12px 0 18px; }
.qz-weak { margin-bottom:20px; }
.qz-weak-h { font-size:12px; color:var(--text3); margin-bottom:8px; }
.qz-weak-chip { display:inline-block; font-size:12px; background:rgba(239,68,68,.1); color:var(--red); border-radius:999px; padding:5px 12px; margin:3px; }
.qz-result-actions { display:flex; gap:10px; justify-content:center; }
.qz-result-actions .qz-btn { flex:0 1 auto; min-width:120px; }

.src-quizme-btn { background:linear-gradient(90deg, rgba(124,111,247,.22), rgba(22,184,166,.18)) !important; color:var(--accent2) !important; font-weight:700; }

/* ═══════════════════════════════════════════════════════════════
   LEARN AFRIKAANS
   ═══════════════════════════════════════════════════════════════ */
.la-page { max-width:760px; margin:0 auto; padding:4px 0 44px; }
.la-hero { padding:22px 20px; border-radius:18px; margin-bottom:16px;
  background:linear-gradient(135deg, rgba(124,111,247,.16), rgba(245,165,36,.10)); border:1px solid var(--border); }
.la-hero-badge { font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--accent2); margin-bottom:10px; }
.la-hero-title { font-family:var(--font-serif); font-size:26px; line-height:1.1; color:var(--text); margin-bottom:8px; }
.la-hero-sub { font-size:13.5px; line-height:1.6; color:var(--text2); }

.la-review { display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:linear-gradient(90deg, rgba(124,111,247,.18), rgba(22,184,166,.08));
  border:1px solid rgba(124,111,247,.35); border-radius:16px; padding:14px 16px; margin-bottom:18px; transition:.12s; }
.la-review:hover { transform:translateY(-1px); }
.la-review-done { cursor:default; background:var(--card); border-color:var(--border); }
.la-review-ic { font-size:26px; flex-shrink:0; }
.la-review-t { font-size:14.5px; font-weight:700; color:var(--text); }
.la-review-s { font-size:12px; color:var(--text3); margin-top:2px; }

.la-decks { display:flex; flex-direction:column; gap:8px; }
.la-deck { display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px 15px; transition:.12s; }
.la-deck:hover { background:var(--bg3); }
.la-deck-ic { font-size:22px; flex-shrink:0; width:30px; text-align:center; }
.la-deck-body { flex:1; min-width:0; }
.la-deck-name { font-size:14px; font-weight:700; color:var(--text); }
.la-deck-name span { font-weight:400; color:var(--text3); font-size:12px; }
.la-deck-bar { height:6px; background:var(--bg2); border-radius:4px; overflow:hidden; margin-top:7px; }
.la-deck-bar span { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.la-deck-meta { font-size:12px; font-weight:700; color:var(--text3); flex-shrink:0; }

.la-deck-head { display:flex; gap:13px; align-items:center; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:14px 16px; margin-bottom:16px; }
.la-modes { display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.la-mode { display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; transition:.12s; }
.la-mode:hover { background:var(--bg3); border-color:var(--accent); }
.la-mode span { font-size:22px; }
.la-mode b { display:block; font-size:14.5px; color:var(--text); }
.la-mode small { font-size:11.5px; color:var(--text3); }

.la-words { display:flex; flex-direction:column; gap:6px; }
.la-word { display:flex; justify-content:space-between; align-items:center; background:var(--card2);
  border:1px solid var(--border); border-radius:10px; padding:9px 13px; }
.la-word-afr { font-size:14px; font-weight:600; color:var(--text); }
.la-word-eng { font-size:13px; color:var(--text3); cursor:pointer; }
.la-word-eng[data-hidden="1"] { color:var(--accent2); font-size:11px; font-style:italic; background:var(--accent-bg); padding:3px 9px; border-radius:6px; }

/* Flashcard */
.la-card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:34px 22px; text-align:center;
  cursor:pointer; min-height:200px; display:flex; flex-direction:column; justify-content:center; gap:10px; margin-bottom:14px; }
.la-card-afr { font-family:var(--font-serif); font-size:34px; color:var(--text); line-height:1.1; }
.la-card-exa { font-size:14px; color:var(--text2); font-style:italic; }
.la-card-reveal { border-top:1px solid var(--border); padding-top:14px; margin-top:6px; }
.la-card-eng { font-size:22px; font-weight:700; color:var(--accent2); }
.la-card-exe { font-size:13px; color:var(--text3); margin-top:4px; }
.la-tap-hint { font-size:12px; color:var(--text4); margin-top:8px; }
.la-rate { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.la-rate-btn { border:none; border-radius:12px; padding:13px 6px; font-size:14px; font-weight:700; cursor:pointer; color:#fff; display:flex; flex-direction:column; align-items:center; gap:2px; }
.la-rate-btn small { font-size:10px; font-weight:500; opacity:.8; }
.la-rate-btn.again { background:#e0457b; } .la-rate-btn.good { background:#16b8a6; } .la-rate-btn.easy { background:#7c6ff7; }
.la-rate-btn:hover { filter:brightness(1.08); }
.la-rate-hint { font-size:12px; color:var(--text3); text-align:center; }

/* Translate */
.la-tr-card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:20px; }
.la-tr-dir { font-size:12px; font-weight:700; color:var(--text3); margin-bottom:10px; }
.la-tr-prompt { font-family:var(--font-serif); font-size:28px; color:var(--text); margin-bottom:16px; }
.la-tr-input { font-size:16px; margin-bottom:12px; }
.la-tr-feedback { font-size:14px; padding:11px 14px; border-radius:10px; margin-bottom:12px; }
.la-tr-feedback.good { background:var(--teal-bg); color:var(--teal); }
.la-tr-feedback.bad { background:rgba(239,68,68,.1); color:var(--red); }
.la-tr-eg { font-size:12px; color:var(--text2); margin-top:5px; font-style:italic; }
.la-reveal-link { display:block; width:100%; background:none; border:none; color:var(--text3); font-size:12px; margin-top:10px; cursor:pointer; text-decoration:underline; }

/* Match */
.la-match-title { font-size:15px; font-weight:700; color:var(--text); text-align:center; margin-bottom:16px; }
.la-match-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.la-match-col { display:flex; flex-direction:column; gap:8px; }
.la-match-tile { background:var(--card); border:1.5px solid var(--border); border-radius:11px; padding:13px 10px; font-size:13.5px; color:var(--text); cursor:pointer; transition:.12s; }
.la-match-tile:hover:not(:disabled) { border-color:var(--accent); }
.la-match-tile.sel { border-color:var(--accent); background:var(--accent-bg); color:var(--accent2); font-weight:700; }
.la-match-tile.done { opacity:.25; }

/* ── Learn Afrikaans · curriculum lessons (teacher-style) ── */
.la-deck-sub { font-size:12px; color:var(--text3); margin-top:3px; }
.mh-tab-body { margin-top:14px; }
.la-lesson-overview { font-size:15px; line-height:1.65; color:var(--text); background:var(--card2,var(--card)); border:1px solid var(--border); border-radius:14px; padding:16px 18px; margin-bottom:14px; }
.la-concept { border:1px solid var(--border); border-radius:13px; padding:13px 15px; margin-bottom:10px; background:var(--card); }
.la-concept-name { font-weight:700; font-size:14.5px; color:var(--accent2,var(--accent)); margin-bottom:4px; }
.la-concept-exp { font-size:14px; line-height:1.6; color:var(--text2); }
.la-mistake { border:1px solid var(--border); border-left:3px solid #f6a;border-radius:11px; padding:11px 14px; margin-bottom:9px; background:var(--card); }
.la-mistake-x { font-size:13.5px; color:#e15b8c; font-weight:600; margin-bottom:4px; }
.la-mistake-c { font-size:13.5px; color:var(--text2); }
.la-tips { margin:6px 0 0; padding-left:20px; }
.la-tips li { font-size:14px; line-height:1.7; color:var(--text2); margin-bottom:5px; }
.la-q-exp { font-size:13px; color:var(--text3); margin-top:7px; line-height:1.55; font-style:italic; }
.la-word-eng[data-hidden="1"] { opacity:.5; font-style:italic; cursor:pointer; }

/* ── Learn Afrikaans · in-lesson Oryon study tools ── */
.la-tools { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr)); gap:9px; margin:4px 0 6px; }
.la-tool-chip { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--border); border-radius:13px; background:var(--card); cursor:pointer; text-align:left; transition:border-color .15s, transform .1s, background .15s; }
.la-tool-chip:hover { border-color:var(--accent); background:var(--accent-bg,rgba(124,111,247,.08)); transform:translateY(-1px); }
.la-tool-chip:active { transform:translateY(0); }
.la-tool-ic { font-size:20px; line-height:1; flex-shrink:0; }
.la-tool-tx { display:flex; flex-direction:column; min-width:0; }
.la-tool-tx b { font-size:13.5px; color:var(--text); line-height:1.2; }
.la-tool-tx small { font-size:11px; color:var(--text3); }

/* ── Study Hub · Afrikaans teacher-lesson entry (subject pathway) ── */
.sh-afr-lesson { display:flex; align-items:center; gap:13px; width:100%; padding:15px 16px; margin-bottom:8px;
  border:1px solid var(--accent,#7c6ff7); border-radius:16px; cursor:pointer; text-align:left;
  background:linear-gradient(135deg, rgba(124,111,247,.14), rgba(22,184,166,.10));
  transition:transform .12s, box-shadow .15s; }
.sh-afr-lesson:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(124,111,247,.22); }
.sh-afr-lesson:active { transform:translateY(0); }
.sh-afr-ic { font-size:26px; line-height:1; flex-shrink:0; }
.sh-afr-tx { flex:1; min-width:0; }
.sh-afr-name { font-size:15px; font-weight:700; color:var(--text); line-height:1.25; }
.sh-afr-desc { font-size:12.5px; color:var(--text2); margin-top:3px; line-height:1.4; }
.sh-afr-lesson .sh-tool-arrow { color:var(--accent,#7c6ff7); flex-shrink:0; }

/* ── Fix: text action buttons (Quiz me / Questions) must size to content,
      not the 30x30 icon square used by the edit/delete buttons ── */
.src-card-actions .src-quizme-btn,
.src-card-actions .src-quiz-btn {
  width:auto; min-width:0; height:30px; padding:0 11px; gap:5px;
  white-space:nowrap; font-size:12px; line-height:1; border-radius:8px;
}

/* ── Math Hub · static labelled diagrams ── */
.mh-visual { margin:4px 0 14px; padding:12px 12px 8px; border:1px solid var(--border); border-radius:14px;
  background:var(--card); text-align:center; }
.mh-visual .mh-svg { width:100%; max-width:340px; height:auto; display:block; margin:0 auto; }
.mh-visual figcaption { font-size:11px; color:var(--text3); margin-top:6px; letter-spacing:.02em; }

/* Math Hub · "not drawn to scale" note (exam convention) */
.mh-visual figcaption .mh-nts { font-style:italic; color:var(--amber,#f5a524); }

/* Mind Map · AI-only views locked until billing is on */
.mm-vt-locked { opacity:.5; cursor:not-allowed; }
.mm-vt-locked:hover { opacity:.65; }

/* ═══ Mind Map · NotebookLM-style radial (SVG curves + floating labels) ═══ */
.mtv-wrap { margin:10px 0 4px; }
.mtv-svg { display:block; width:100%; max-width:840px; height:auto; margin:0 auto; }
.mtv-label { fill:var(--text2); font-size:18px; font-weight:600; font-family:inherit; letter-spacing:.01em; }
.mtv-label.sel { font-weight:800; }
.mtv-branch:hover .mtv-label { fill:var(--text); }
.mtv-chip-label { font-size:15.5px; font-weight:700; font-family:inherit; letter-spacing:.005em; }
.mtv-chip { transition:transform .14s var(--ease); transform-box:fill-box; transform-origin:center; }
.mtv-chip:hover { transform:scale(1.045); }
.mtv-chip rect { transition:fill-opacity .15s var(--ease), stroke-opacity .15s var(--ease); }
.mtv-chip:hover rect { fill-opacity:0.24; stroke-opacity:0.95; }
.mtv-central { fill:#fff; font-size:18px; font-weight:800; font-family:inherit; letter-spacing:.005em; }
.mtv-panel { margin:6px auto 0; max-width:680px; border:1px solid var(--c); border-left:4px solid var(--c);
  border-radius:14px; background:color-mix(in srgb, var(--c) 7%, var(--card)); padding:13px 16px; }
.mtv-panel-h { display:flex; align-items:center; gap:9px; font-size:15.5px; font-weight:800; color:var(--text); margin-bottom:8px; }
.mtv-panel-dot { width:10px; height:10px; border-radius:50%; background:var(--c); flex-shrink:0; }
.mtv-panel-d { font-size:14px; line-height:1.6; color:var(--text2); }
.mtv-panel-d + .mtv-panel-d { margin-top:7px; }
.mtv-hint { text-align:center; font-size:11px; color:var(--text3); margin-top:8px; }

/* ═══ Dashboard · launchpad quick-actions + "AI soon" chip ═══ */
.dash-launch { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
@media (max-width:640px){ .dash-launch { grid-template-columns:repeat(2,1fr); } }
.dash-launch-card { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:14px 14px 12px; border-radius:16px;
  border:1px solid var(--border); cursor:pointer; text-align:left; transition:transform .12s, box-shadow .15s; }
.dash-launch-card:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.16); }
.dash-launch-card:active { transform:translateY(0); }
.dash-launch-card .lc-ic { font-size:24px; margin-bottom:6px; line-height:1; }
.dash-launch-card .lc-t { font-size:14px; font-weight:800; color:var(--text); }
.dash-launch-card .lc-s { font-size:11px; color:var(--text3); margin-top:1px; }
.lc-purple { background:linear-gradient(160deg, rgba(124,111,247,.16), rgba(124,111,247,.03)); border-color:rgba(124,111,247,.32); }
.lc-amber  { background:linear-gradient(160deg, rgba(245,158,11,.16), rgba(245,158,11,.03)); border-color:rgba(245,158,11,.32); }
.lc-teal   { background:linear-gradient(160deg, rgba(22,184,166,.16), rgba(22,184,166,.03)); border-color:rgba(22,184,166,.32); }
.lc-pink   { background:linear-gradient(160deg, rgba(236,72,153,.16), rgba(236,72,153,.03)); border-color:rgba(236,72,153,.32); }
.ai-chip-soon { opacity:.9; }
.ai-chip-soon .ai-usage-dot { background:#f5a524; }

/* ═══ Math Hub · typed-answer attempt + points ═══ */
.mh-attempt { display:flex; flex-direction:column; gap:9px; margin-top:10px; }
.mh-attempt.locked { opacity:.55; pointer-events:none; }
.mh-ans { width:100%; box-sizing:border-box; padding:11px 13px; border-radius:11px; border:1.5px solid var(--border);
  background:var(--card); color:var(--text); font-size:15px; font-family:inherit; transition:border-color .15s; }
.mh-ans:focus { outline:none; border-color:var(--accent,#7c6ff7); }
.mh-method { border:1px solid var(--border); border-radius:11px; background:var(--card); overflow:hidden; }
.mh-method > summary { cursor:pointer; padding:9px 13px; font-size:13px; font-weight:600; color:var(--text2); list-style:none; }
.mh-method > summary::-webkit-details-marker { display:none; }
.mh-method .mh-bonus { color:var(--accent2,#16b8a6); font-weight:800; font-size:11px; margin-left:4px; }
.mh-method-in { width:100%; box-sizing:border-box; border:none; border-top:1px solid var(--border); background:transparent;
  color:var(--text); font-size:14px; font-family:inherit; padding:11px 13px; resize:vertical; }
.mh-method-in:focus { outline:none; }
.mh-check { align-self:flex-start; padding:10px 20px; border:none; border-radius:11px; cursor:pointer;
  background:var(--accent,#7c6ff7); color:#fff; font-size:14px; font-weight:800; transition:transform .1s, filter .15s; }
.mh-check:hover { filter:brightness(1.08); } .mh-check:active { transform:scale(.97); }
.mh-result { margin-bottom:10px; }
.mh-correct { color:#16b8a6; font-weight:800; font-size:14.5px; }
.mh-wrong { color:#f0a; color:var(--amber,#f5a524); font-weight:600; font-size:13.5px; line-height:1.5; }
.mh-muted { color:var(--text3); font-size:13px; }
.mh-claim, .mh-method-cmp .mh-sg { margin-top:8px; }
.mh-claim { padding:7px 14px; border:1px solid var(--accent,#7c6ff7); background:transparent; color:var(--accent2,#7c6ff7);
  border-radius:9px; font-size:12.5px; font-weight:700; cursor:pointer; }
.mh-method-cmp { margin-top:12px; padding-top:10px; border-top:1px dashed var(--border); display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--text2); }
.mh-xp-badge { margin-left:auto; font-size:13px; font-weight:800; color:var(--amber,#f5a524); background:color-mix(in srgb, var(--amber,#f5a524) 14%, transparent); padding:3px 10px; border-radius:20px; }

/* Math Hub · mark sheet */
.mh-mark { font-size:13.5px; line-height:1.5; margin-bottom:5px; }
.mh-mark.ok { color:#16b8a6; font-weight:700; }
.mh-mark.no { color:var(--amber,#f5a524); font-weight:600; }
.mh-mark.muted { color:var(--text3); }
.mh-mark b { font-weight:800; }
.mh-score { margin:8px 0 12px; font-size:15px; font-weight:800; color:var(--text); }
.mh-score b { color:var(--accent2,#7c6ff7); }
/* Remediation (M3.2): fix-it CTA + the fix banner inside the loop */
.mh-rem-cta-wrap { margin-top:10px; }
.mh-rem-cta { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  padding:9px 15px; border-radius:10px; cursor:pointer; border:1px solid var(--accent,#7c6ff7);
  background:var(--accent,#7c6ff7); color:#fff; transition:transform .08s var(--ease), filter .15s var(--ease); }
.mh-rem-cta:hover { filter:brightness(1.06); transform:translateY(-1px); }
.mh-rem-fix { margin:10px 0 4px; padding:12px 15px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg3); border-left:4px solid var(--accent,#7c6ff7); }
.mh-rem-fix p { margin:6px 0 0; font-size:13.5px; line-height:1.55; color:var(--text2); }
.mh-rem-fix-tag { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--accent2,#7c6ff7); }
.mh-rem-level { display:inline-block; margin-left:8px; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  padding:2px 8px; border-radius:999px; background:var(--bg2); color:var(--text2); border:1px solid var(--border); vertical-align:middle; }
.mh-model-label { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text3); margin-bottom:6px; }

/* Math Hub · per-question figure */
.mh-qfig { margin:10px 0; text-align:center; }
.mh-qfig .mh-svg { width:100%; max-width:280px; height:auto; display:block; margin:0 auto;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:6px; }

/* Math Hub · merged working+answer box */
.mh-ans-area { width:100%; box-sizing:border-box; padding:11px 13px; border-radius:11px; border:1.5px solid var(--border);
  background:var(--card); color:var(--text); font-size:15px; font-family:inherit; line-height:1.5; resize:vertical; min-height:64px; }
.mh-ans-area:focus { outline:none; border-color:var(--accent,#7c6ff7); }
.mh-attempt-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mh-attempt-hint { font-size:12px; color:var(--text3); }
.mh-attempt-hint b { color:var(--accent2,#16b8a6); font-weight:800; }

/* ═══ Math Hub · quiz self-grade + adaptive scorecard ═══ */
.mh-quiz-selfgrade2 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; font-size:13px; color:var(--text2); }
.mh-sc-card { border:1px solid var(--border); border-radius:16px; background:var(--card); padding:16px; margin:16px 0; }
.mh-sc-exam { font-size:13.5px; color:var(--text); background:rgba(245,165,36,.12); border:1px solid rgba(245,165,36,.3);
  border-radius:11px; padding:10px 13px; margin-bottom:14px; line-height:1.5; }
.mh-sc-exam b { color:#f5a524; }
.mh-sc-label { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); margin:6px 0 10px; }
.mh-sc-row { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.mh-sc-name { flex:0 0 38%; font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mh-sc-bar { flex:1; height:8px; border-radius:5px; background:var(--bg3,rgba(255,255,255,.07)); overflow:hidden; }
.mh-sc-bar > span { display:block; height:100%; border-radius:5px; }
.mh-sc-val { flex:0 0 auto; font-size:12px; font-weight:800; color:var(--text2); }
.mh-sc-insight { margin-top:12px; font-size:14px; line-height:1.55; color:var(--text); }
.mh-sc-note { margin-top:10px; font-size:11.5px; color:var(--text3); line-height:1.5; }
.mh-whatnext { display:flex; flex-direction:column; gap:10px; }
.mh-wn { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center;
  text-align:left; padding:13px 15px; border-radius:14px; border:1px solid var(--border); background:var(--card); cursor:pointer; transition:transform .12s, border-color .15s; }
.mh-wn:hover { transform:translateY(-1px); border-color:var(--accent,#7c6ff7); }
.mh-wn.rec { border-color:#f5a524; background:linear-gradient(135deg, rgba(245,165,36,.14), transparent); }
.mh-wn-ic { grid-row:1 / 3; font-size:24px; }
.mh-wn-t { font-size:14.5px; font-weight:800; color:var(--text); }
.mh-wn-s { font-size:12px; color:var(--text3); }

/* ═══ Math Hub · Review / Compare loop ═══ */
.mh-review-intro { font-size:13.5px; line-height:1.55; color:var(--text2); background:var(--card);
  border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.mh-rv-result { margin-top:10px; }
.mh-rv-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:620px){ .mh-rv-cols { grid-template-columns:1fr; } }
.mh-rv-col { border:1px solid var(--border); border-radius:13px; padding:12px 14px; background:var(--card); }
.mh-rv-h { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; }
.mh-rv-h.yours { color:#7c6ff7; } .mh-rv-h.model { color:#16b8a6; }
.mh-rv-mine { font-size:14px; line-height:1.6; color:var(--text); white-space:pre-wrap; }
.mh-rv-reflect { margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); }
.mh-rv-q2 { font-size:14px; font-weight:700; color:var(--text); margin-bottom:8px; }
.mh-rv-reflect-in { border:1px solid var(--border) !important; border-radius:10px; }
.mh-rv-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.mh-rv-note { margin-top:12px; font-size:11.5px; color:var(--text3); line-height:1.5; }

/* Math Hub · prominent "generate fresh set" CTA */
.mh-fresh-cta { display:block; width:100%; margin-top:14px; padding:14px 16px; border:1.5px dashed #16b8a6; border-radius:14px;
  background:rgba(22,184,166,.10); color:#16b8a6; font-size:14.5px; font-weight:800; cursor:pointer; transition:background .15s, transform .1s; }
.mh-fresh-cta:hover { background:rgba(22,184,166,.18); } .mh-fresh-cta:active { transform:scale(.99); }

/* ═══ Mind Map · Study mode (active recall) ═══ */
.mtv-study-cta { text-align:center; margin:6px 0 2px; }
.mtv-study-start { padding:11px 20px; border:none; border-radius:13px; cursor:pointer; font-size:14.5px; font-weight:800;
  background:linear-gradient(135deg,#7c6ff7,#16b8a6); color:#fff; box-shadow:0 6px 18px rgba(124,111,247,.3); transition:transform .12s; }
.mtv-study-start:hover { transform:translateY(-1px); }
.mtv-study-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 8px; }
.mtv-study-prog { font-size:14px; color:var(--text); }
.mtv-study-exit { padding:6px 13px; border:1px solid var(--border); border-radius:9px; background:var(--card); color:var(--text2); font-size:12px; font-weight:700; cursor:pointer; }
.mtv-study-bar { height:7px; border-radius:5px; background:var(--bg3,rgba(255,255,255,.07)); overflow:hidden; margin-bottom:6px; }
.mtv-study-bar > span { display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#7c6ff7,#16b8a6); transition:width .4s var(--ease); }
.mtv-study-card { max-width:680px; margin:6px auto 0; border:1px solid var(--c,#7c6ff7); border-left:4px solid var(--c,#7c6ff7);
  border-radius:14px; background:color-mix(in srgb, var(--c,#7c6ff7) 7%, var(--card)); padding:15px 17px; }
.mtv-study-card.done { border-color:#16b8a6; border-left-color:#16b8a6; text-align:center; }
.mtv-study-q { font-size:16px; font-weight:800; color:var(--text); margin-bottom:8px; }
.mtv-study-prompt { font-size:14px; line-height:1.55; color:var(--text2); margin-bottom:12px; }
.mtv-study-reveal { padding:10px 20px; border:none; border-radius:11px; cursor:pointer; background:var(--c,#7c6ff7); color:#fff; font-size:14px; font-weight:800; }
.mtv-study-grade { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); font-size:14px; color:var(--text2); }
.mtv-sg { padding:8px 15px; border-radius:10px; font-size:13px; font-weight:800; cursor:pointer; border:1.5px solid; }
.mtv-sg.ok { border-color:#16b8a6; color:#16b8a6; background:rgba(22,184,166,.1); }
.mtv-sg.no { border-color:var(--amber,#f5a524); color:var(--amber,#f5a524); background:rgba(245,165,36,.1); }

/* ═══════════════════ SHARE HUB ═══════════════════ */
.sh-wrap{max-width:760px;margin:0 auto;padding:6px 2px 64px}
.sh-loading{padding:50px 0;text-align:center;color:var(--text2)}
.sh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.sh-head-left{display:flex;gap:12px;align-items:center;min-width:0}
.sh-head-icon{width:44px;height:44px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(135deg,var(--accent-bg),transparent);border:1px solid var(--accent-border)}
.sh-title{font-size:19px;font-weight:700;letter-spacing:-.2px}
.sh-sub{color:var(--text2);font-size:12.5px;margin-top:2px;line-height:1.45}
.sh-share-btn{flex:none;background:var(--accent);color:#fff;border:0;border-radius:12px;
  padding:10px 16px;font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:0 4px 14px rgba(124,111,247,.28);transition:transform .12s,filter .12s}
.sh-share-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.sh-note{background:var(--bg2);border:1px dashed var(--border);border-radius:12px;
  padding:11px 14px;font-size:12px;color:var(--text2);margin-bottom:16px;line-height:1.5}
.sh-note b{color:var(--text)}
.sh-form{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:16px}
.sh-form-kinds{display:flex;gap:4px;margin-bottom:12px;background:var(--bg2);padding:4px;border-radius:12px;overflow-x:auto;scrollbar-width:none}
.sh-form-kinds::-webkit-scrollbar{display:none}
.sh-kind{flex:1 0 auto;white-space:nowrap;border:none;background:none;color:var(--text3);
  border-radius:9px;padding:9px 12px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.sh-kind:hover{color:var(--text2)}
.sh-kind.on{background:var(--card);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.sh-input{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:11px;color:var(--text);
  padding:11px 13px;font-size:14px;margin-bottom:9px;font-family:inherit;transition:border-color .12s}
.sh-input:focus{outline:none;border-color:var(--accent)}
.sh-area{resize:vertical;line-height:1.5}
.sh-sel{appearance:none;cursor:pointer}
.sh-form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:3px}
.sh-cancel{background:transparent;border:1px solid var(--border3);color:var(--text2);border-radius:10px;padding:9px 15px;font-weight:600;cursor:pointer}
.sh-submit{background:var(--accent);border:0;color:#fff;border-radius:10px;padding:9px 17px;font-weight:700;cursor:pointer}
.sh-submit:hover{filter:brightness(1.08)}
.sh-filters{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.sh-seg{display:flex;gap:4px;background:var(--bg2);padding:4px;border-radius:12px;overflow-x:auto;scrollbar-width:none}
.sh-seg::-webkit-scrollbar{display:none}
.sh-seg-btn{flex:1 0 auto;white-space:nowrap;border:none;background:none;color:var(--text3);
  font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:9px;cursor:pointer;transition:.12s}
.sh-seg-btn:hover{color:var(--text2)}
.sh-seg-btn.on{background:var(--card);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.sh-subject{align-self:flex-start;appearance:none;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);
  border-radius:999px;padding:7px 30px 7px 14px;font-size:12.5px;font-weight:600;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text3) 50%),linear-gradient(135deg,var(--text3) 50%,transparent 50%);
  background-position:calc(100% - 16px) center,calc(100% - 11px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sh-list{display:flex;flex-direction:column;gap:11px}
.sh-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:15px;overflow:hidden;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.sh-card::before{content:'';position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,rgba(124,111,247,.05),transparent);opacity:0;transition:opacity .3s;pointer-events:none}
.sh-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,111,247,.12)}
.sh-card:hover::before{opacity:1}
.sh-card-top{display:flex;gap:13px;align-items:center;position:relative;z-index:1}
.sh-ava{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;font-size:21px;
  background:color-mix(in srgb,var(--shk,#7c6ff7) 14%,var(--bg3));border:1px solid color-mix(in srgb,var(--shk,#7c6ff7) 22%,transparent)}
.sh-k-link{--shk:#5b8cff}.sh-k-youtube{--shk:#f47272}.sh-k-past_paper{--shk:#f5b841}.sh-k-note{--shk:#34d97a}.sh-k-other{--shk:#a89eff}
.sh-card-main{flex:1;min-width:0}
.sh-card-kindchip{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--shk,var(--accent2))}
.sh-card-title{font-weight:700;font-size:15.5px;line-height:1.3;margin-top:1px}
.sh-card-meta{color:var(--text3);font-size:11.5px;margin-top:3px}
.sh-card-meta b{color:var(--text2)}
.sh-card-desc{color:var(--text2);font-size:13px;margin:11px 0 0;line-height:1.5;position:relative;z-index:1}
.sh-card-link{display:inline-flex;align-items:center;gap:5px;margin-top:11px;color:var(--accent2);font-size:12.5px;font-weight:600;
  word-break:break-all;text-decoration:none;background:var(--accent-bg);border:1px solid var(--accent-border);
  border-radius:10px;padding:8px 12px;position:relative;z-index:1;transition:filter .12s}
.sh-card-link:hover{filter:brightness(1.12)}
.sh-card-note{margin-top:11px;background:var(--bg2);border:1px dashed var(--border);border-radius:11px;
  padding:12px;font-size:12.5px;color:var(--text);line-height:1.55;white-space:pre-wrap;position:relative;z-index:1}
.sh-card-actions{display:flex;gap:8px;align-items:center;margin-top:13px;position:relative;z-index:1}
.sh-up{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.12s}
.sh-up:hover{border-color:var(--accent-border);color:var(--text)}
.sh-up.on{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent2)}
.sh-act{margin-left:auto;background:transparent;border:0;color:var(--text3);font-size:12px;cursor:pointer;font-weight:600}
.sh-act:hover{color:var(--text2)}

/* ═══════════════════ LEADERBOARD ═══════════════════ */
.lb-wrap{max-width:640px;margin:0 auto;padding:6px 2px 60px}
.lb-loading{padding:50px 0;text-align:center;color:var(--text2)}
.lb-head{margin-bottom:14px}
.lb-title{font-size:22px;font-weight:800;letter-spacing:-.4px}
.lb-sub{color:var(--text2);font-size:13px;margin-top:2px}
.lb-optbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg3);
  border:1px solid var(--border2);border-radius:13px;padding:11px 14px;font-size:13px;color:var(--text2);margin-bottom:14px}
.lb-optbar b{color:var(--text)}
.lb-optbtns{display:flex;gap:7px;flex:none}
.lb-mini{background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--accent2);border-radius:9px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer}
.lb-mini.ghost{background:transparent;border-color:var(--border3);color:var(--text3)}
.lb-join{background:linear-gradient(135deg,rgba(124,111,247,.12),rgba(91,140,255,.08));
  border:1px solid var(--accent-border);border-radius:16px;padding:18px;margin-bottom:16px;text-align:center}
.lb-join-title{font-weight:800;font-size:16px}
.lb-join-sub{color:var(--text2);font-size:13px;margin:6px 0 13px;line-height:1.5}
.lb-join-row{display:flex;gap:8px;max-width:420px;margin:0 auto}
.lb-nick{flex:1;background:var(--bg2);border:1px solid var(--border2);border-radius:11px;color:var(--text);padding:11px 13px;font-size:14px;font-family:inherit}
.lb-nick:focus{outline:none;border-color:var(--accent-border)}
.lb-join-btn{flex:none;background:linear-gradient(135deg,#7c6ff7,#5b8cff);border:0;color:#fff;border-radius:11px;padding:11px 17px;font-weight:700;cursor:pointer}
.lb-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.lb-tab{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer}
.lb-tab.on{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent2)}
.lb-board{display:flex;flex-direction:column;gap:7px}
.lb-row{display:flex;align-items:center;gap:12px;background:var(--bg3);border:1px solid var(--border2);border-radius:12px;padding:11px 14px}
.lb-row.me{background:var(--accent-bg);border-color:var(--accent-border)}
.lb-row.outside{margin-top:8px;border-style:dashed}
.lb-rank{flex:none;width:30px;text-align:center;font-weight:800;font-size:15px;color:var(--text2)}
.lb-who{flex:1;font-weight:600;font-size:14.5px}
.lb-youtag{font-size:10px;font-weight:700;background:var(--accent);color:#fff;border-radius:6px;padding:1px 6px;margin-left:5px;vertical-align:middle}
.lb-val{flex:none;font-weight:800;font-size:15px;color:var(--accent2)}
.lb-val small{font-size:10.5px;color:var(--text3);font-weight:600}
.lb-foot{text-align:center;color:var(--text3);font-size:12px;margin-top:18px;line-height:1.5}

/* ═══════════════════ SHARE MODERATION (staff) ═══════════════════ */
.mod-wrap{max-width:720px;margin:0 auto;padding:6px 2px 60px}
.mod-loading{padding:40px 0;text-align:center;color:var(--text2)}
.mod-head{margin-bottom:12px}
.mod-title{font-size:22px;font-weight:800;letter-spacing:-.4px}
.mod-sub{color:var(--text2);font-size:13px;margin-top:2px}
.mod-tabs{display:flex;gap:7px;margin-bottom:14px}
.mod-tab{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer}
.mod-tab.on{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent2)}
.mod-list{display:flex;flex-direction:column;gap:11px}
.mod-card{background:var(--bg3);border:1px solid var(--border2);border-radius:14px;padding:13px}
.mod-card.hidden{opacity:.72;border-style:dashed}
.mod-card-top{display:flex;gap:11px;align-items:flex-start}
.mod-card-kind{font-size:19px;flex:none}
.mod-card-main{flex:1;min-width:0}
.mod-card-title{font-weight:700;font-size:15px;line-height:1.3}
.mod-card-meta{color:var(--text2);font-size:12px;margin-top:3px}
.mod-card-meta b{color:var(--text)}
.mod-nick{color:var(--accent2)}
.mod-badges{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.mod-badge{font-size:11px;font-weight:700;border-radius:7px;padding:2px 8px}
.mod-badge.red{background:var(--pink-bg);border:1px solid var(--pink-border);color:#f06bba}
.mod-badge.green{background:var(--green-bg);border:1px solid var(--green-border);color:#34d97a}
.mod-badge.grey{background:var(--bg4);border:1px solid var(--border2);color:var(--text2)}
.mod-card-link{display:inline-block;margin-top:9px;color:var(--accent2);font-size:12.5px;font-weight:600;word-break:break-all;text-decoration:none;background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:9px;padding:6px 10px}
.mod-card-note{margin-top:9px;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:10px;font-size:12.5px;color:var(--text);line-height:1.5;white-space:pre-wrap}
.mod-reason{margin-top:8px;font-size:12px;color:var(--text3)}
.mod-card-actions{display:flex;gap:8px;margin-top:11px}
.mod-btn{border:0;border-radius:9px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer}
.mod-btn.hide{background:rgba(240,107,186,.14);border:1px solid var(--pink-border);color:#f06bba}
.mod-btn.show{background:var(--green-bg);border:1px solid var(--green-border);color:#34d97a}
.mod-search{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:11px;color:var(--text);padding:10px 13px;font-size:14px;margin-bottom:12px;font-family:inherit}
.mod-search:focus{outline:none;border-color:var(--accent-border)}
.mod-dir{display:flex;flex-direction:column;gap:6px}
.mod-dir-row{display:grid;grid-template-columns:30px 1fr 1fr auto;gap:10px;align-items:center;background:var(--bg3);border:1px solid var(--border2);border-radius:11px;padding:9px 13px}
.mod-dir-emoji{text-align:center}
.mod-dir-nick{font-weight:700;font-size:14px;color:var(--accent2)}
.mod-dir-real{font-size:13.5px;color:var(--text)}
.mod-dir-opt{flex:none}

/* ── Quiz Me: skill chip + remediation flow ── */
.qz-skill{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--accent2);background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:7px;padding:2px 8px;margin-right:6px}
.qz-rem{margin-top:14px;border-top:1px dashed var(--border3);padding-top:14px;display:flex;flex-direction:column;gap:11px}
.qz-rem-loading{color:var(--text2);font-size:13px}
.qz-rem-mis{background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:12px;padding:12px 14px}
.qz-rem-h{font-weight:800;font-size:13.5px;color:var(--text);margin-bottom:5px}
.qz-rem-why{font-size:13.5px;color:var(--text);line-height:1.55}
.qz-rem-fix{font-size:13px;color:var(--text2);line-height:1.55;margin-top:7px;padding-top:7px;border-top:1px solid var(--border2)}

.qz-selfnote{font-size:12px;color:var(--text3);text-align:center;margin:4px 0 10px;line-height:1.5}

.qz-tricky{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:#f5a524;background:rgba(245,165,36,.12);border:1px solid var(--amber-border);border-radius:7px;padding:2px 8px;margin-right:6px}
.qz-markguide{margin-top:9px;padding-top:9px;border-top:1px solid var(--border2);font-size:12.5px;color:var(--text2);line-height:1.5}
.qz-markguide b{color:var(--text)}

/* ── Collapsible sidebar groups ── */
.nav-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  font-family:inherit;
}
.nav-toggle:hover{ color:var(--text2); }
.nav-caret{ flex:none; opacity:.4; transition:transform .22s var(--ease), opacity .2s var(--ease); }
.nav-toggle:hover .nav-caret{ opacity:.85; }
.nav-toggle.collapsed .nav-caret{ transform:rotate(-90deg); }
.nav-group-items{ overflow:hidden; max-height:640px; transition:max-height .26s var(--ease), opacity .2s var(--ease); }
.nav-group-items.collapsed{ max-height:0; opacity:0; pointer-events:none; }

/* ═══════════════ M2 — MASTERY SURFACES ═══════════════ */
/* Today's Mission — the coach's one-thing-to-do */
.ms-mission{background:linear-gradient(135deg,rgba(124,111,247,.16),rgba(91,140,255,.10));
  border:1px solid var(--accent-border);border-radius:16px;padding:16px 18px;margin-bottom:12px}
.ms-mission-h{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent2);margin-bottom:8px}
.ms-mission-text{font-size:15px;line-height:1.5;color:var(--text);margin-bottom:13px}
.ms-mission-text b{color:#fff}
.ms-mission-btn{background:linear-gradient(135deg,#7c6ff7,#5b8cff);color:#fff;border:0;border-radius:12px;
  padding:11px 18px;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 6px 18px var(--accent-glow)}
.ms-mission-btn:hover{filter:brightness(1.07)}
/* Weak Spots */
.ms-weak{background:var(--bg3);border:1px solid var(--border2);border-radius:14px;padding:13px 15px;margin-bottom:16px}
.ms-weak-h{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#f5a524;margin-bottom:9px}
.ms-weak-row{display:flex;align-items:center;gap:10px;width:100%;background:var(--bg2);border:1px solid var(--border2);
  border-radius:11px;padding:10px 12px;cursor:pointer;text-align:left;margin-bottom:7px}
.ms-weak-row:last-child{margin-bottom:0}
.ms-weak-row:hover{border-color:var(--accent-border)}
.ms-weak-topic{flex:1;font-size:13.5px;font-weight:600;color:var(--text)}
.ms-weak-pct{font-size:13px;font-weight:800;color:#f47272}
/* Level badge (Bronze → Exam Ready) */
.ms-level{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;
  color:var(--lvc,var(--text3));background:color-mix(in srgb,var(--lvc,#888) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--lvc,#888) 35%,transparent);border-radius:7px;padding:2px 8px;white-space:nowrap}
.ms-level-sub{margin-top:8px}
.ms-level-inline{margin-left:8px;vertical-align:middle}
.sub-card-hint{font-size:11px;color:var(--text3);margin-top:6px;text-align:center;line-height:1.4}
/* Topic cognitive split + weak skills */
.tm-cogs{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}
.tm-cog{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text3)}
.tm-cog-l{font-weight:700;min-width:30px;text-transform:uppercase;letter-spacing:.02em}
.tm-cog-track{width:46px;height:5px;border-radius:3px;background:var(--bg4);overflow:hidden}
.tm-cog-fill{display:block;height:100%;border-radius:3px}
.tm-weak{margin-top:8px;font-size:11px;color:#f5a524;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.tm-weak-chip{background:rgba(245,165,36,.12);border:1px solid var(--amber-border);color:#f5a524;border-radius:6px;padding:2px 7px;font-weight:600}

/* ═══════════════════════════════════════════════════════════════════
   EXAM MODE (M4.2) - readiness & setup experience
   ═══════════════════════════════════════════════════════════════════ */
.xm-page { max-width: 760px; margin: 0 auto; padding: 4px 0 40px; }
.xm-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.xm-title { font-size:20px; font-weight:800; color:var(--text); letter-spacing:-.02em; }
.xm-beta { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent2,#7c6ff7); background:rgba(124,111,247,.12); padding:3px 8px; border-radius:999px; vertical-align:middle; margin-left:4px; }
.xm-switch { background:none; border:none; color:var(--text2); font-size:13px; font-weight:600; cursor:pointer; padding:4px 0; }
.xm-switch:hover { color:var(--text); }
.xm-lead { font-size:14px; color:var(--text2); line-height:1.55; margin-bottom:18px; }

/* subject picker */
.xm-subject-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(208px,100%),1fr)); gap:14px; }
.xm-subj { position:relative; display:flex; flex-direction:column; gap:11px; align-items:flex-start; text-align:left;
  background:linear-gradient(165deg, var(--bg3), var(--bg2)); border:1px solid var(--border); border-radius:18px;
  padding:18px; cursor:pointer; overflow:hidden;
  transition:transform .15s cubic-bezier(.2,.7,.3,1), border-color .2s, box-shadow .2s; }
.xm-subj::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s;
  background:radial-gradient(130% 90% at 0% 0%, rgba(124,111,247,.14), transparent 58%); }
.xm-subj:hover { transform:translateY(-3px); border-color:rgba(124,111,247,.55);
  box-shadow:0 14px 34px -14px rgba(124,111,247,.45); }
.xm-subj:hover::before { opacity:1; }
.xm-subj-top { display:flex; align-items:center; justify-content:space-between; width:100%; position:relative; z-index:1; }
.xm-subj-icon { font-size:24px; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background:var(--bg2); border:1px solid var(--border); border-radius:13px; }
.xm-subj-ring { flex-shrink:0; }
.xm-subj-new { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text3);
  background:var(--bg2); border:1px solid var(--border); padding:5px 10px; border-radius:999px; }
.xm-subj-name { font-size:15.5px; font-weight:800; color:var(--text); line-height:1.25; letter-spacing:-.01em; position:relative; z-index:1; }
.xm-subj-go { font-size:12.5px; font-weight:700; color:var(--accent2,#a89eff); position:relative; z-index:1; }
.xm-subj-lvl { font-size:12px; font-weight:800; color:var(--lvc, var(--text2)); position:relative; z-index:1; }

/* cards */
.xm-card { background:var(--bg3); border:1px solid var(--border); border-radius:16px; padding:18px; margin-bottom:14px; }
.xm-card-h { font-size:15px; font-weight:800; color:var(--text); margin-bottom:3px; }
.xm-card-sub { font-size:12.5px; color:var(--text2); line-height:1.5; margin-bottom:12px; }
.xm-sub-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text3); margin:18px 0 9px; }
.xm-opt { font-weight:500; text-transform:none; letter-spacing:0; color:var(--text3); }

/* hero */
.xm-hero { display:flex; gap:18px; align-items:center; background:linear-gradient(135deg, rgba(124,111,247,.10), rgba(124,111,247,.02));
  border:1px solid var(--border); border-radius:18px; padding:20px; margin-bottom:14px; }
.xm-hero-ring { flex-shrink:0; }
.xm-hero-subject { font-size:20px; font-weight:800; color:var(--text); letter-spacing:-.02em; }
.xm-hero-level { font-size:13px; font-weight:700; margin:3px 0 8px; }
.xm-hero-coach { font-size:13.5px; color:var(--text2); line-height:1.5; }

/* prediction */
.xm-predict { text-align:center; background:linear-gradient(135deg, rgba(52,217,122,.08), rgba(124,111,247,.05)); }
.xm-predict-tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text3); }
.xm-predict-num { font-size:54px; font-weight:800; color:var(--text); letter-spacing:-.03em; line-height:1.05; margin:4px 0; }
.xm-predict-pct { font-size:26px; font-weight:700; color:var(--text2); }
.xm-predict-range { display:flex; align-items:center; gap:8px; max-width:360px; margin:8px auto 6px; }
.xm-range-lo, .xm-range-hi { font-size:11px; font-weight:700; color:var(--text3); width:32px; }
.xm-range-track { position:relative; flex:1; height:8px; background:var(--bg2); border-radius:999px; }
.xm-range-fill { position:absolute; top:0; bottom:0; background:rgba(124,111,247,.35); border-radius:999px; }
.xm-range-dot { position:absolute; top:50%; width:12px; height:12px; margin-left:-6px; transform:translateY(-50%);
  background:var(--accent,#7c6ff7); border-radius:50%; box-shadow:0 0 0 3px var(--bg3); }
.xm-predict-sub { font-size:12px; color:var(--text2); line-height:1.5; max-width:420px; margin:4px auto 0; }
.xm-predict.baseline { background:var(--bg3); }
.xm-predict-baseline { font-size:26px; font-weight:800; color:var(--accent2,#7c6ff7); margin:6px 0; }

/* cognitive rows (why) */
.xm-cogrows { display:flex; flex-direction:column; gap:13px; }
.xm-cogrow-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.xm-cogrow-name { font-size:13px; font-weight:700; color:var(--text); }
.xm-cogrow-val { font-size:12px; font-weight:700; color:var(--text2); }
.xm-cogrow-hint { font-size:11px; color:var(--text3); margin-top:4px; }

/* strengths / weaknesses */
.xm-tw-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.xm-tw-head { font-size:12px; font-weight:800; margin-bottom:10px; }
.xm-tw-head.good { color:var(--teal,#16b8a6); }
.xm-tw-head.bad { color:#f5a524; }
.xm-tw-row { display:grid; grid-template-columns:1fr 54px 34px; gap:7px; align-items:center; margin-bottom:9px; }
.xm-tw-name { font-size:12.5px; color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xm-tw-val { font-size:11px; font-weight:700; color:var(--text2); text-align:right; }
@media (max-width:560px){ .xm-tw-cols { grid-template-columns:1fr; } }

/* length selector */
.xm-controls-h { font-size:13px; font-weight:800; color:var(--text); margin-bottom:3px; }
.xm-lengths { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 4px; }
.xm-len { display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left;
  background:var(--bg2); border:1.5px solid var(--border); border-radius:12px; padding:12px; cursor:pointer; transition:border-color .15s, background .15s; }
.xm-len:hover { border-color:var(--accent,#7c6ff7); }
.xm-len.on { border-color:var(--accent,#7c6ff7); background:rgba(124,111,247,.10); }
.xm-len-label { font-size:14px; font-weight:800; color:var(--text); }
.xm-len-meta { font-size:11px; font-weight:700; color:var(--accent2,#7c6ff7); }
.xm-len-sub { font-size:10.5px; color:var(--text3); line-height:1.4; }
@media (max-width:560px){ .xm-lengths { grid-template-columns:1fr; } }

/* topic chips */
.xm-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.xm-chip { font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; cursor:pointer;
  background:var(--bg2); border:1px solid var(--border); color:var(--text2); transition:all .12s; }
.xm-chip:hover { color:var(--text); border-color:var(--accent,#7c6ff7); }
.xm-chip.on { background:var(--accent,#7c6ff7); border-color:var(--accent,#7c6ff7); color:#fff; }
.xm-clear { margin-top:10px; background:none; border:none; color:var(--text3); font-size:12px; font-weight:600; cursor:pointer; }
.xm-clear:hover { color:var(--red,#f43f5e); }

/* paper preview */
.xm-paper-stats { display:flex; gap:10px; margin:6px 0 12px; }
.xm-stat { flex:1; text-align:center; background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:12px 6px; }
.xm-stat-n { display:block; font-size:24px; font-weight:800; color:var(--text); letter-spacing:-.02em; }
.xm-stat-l { display:block; font-size:11px; color:var(--text3); font-weight:600; margin-top:2px; }
.xm-flag { font-size:12.5px; line-height:1.5; padding:11px 13px; border-radius:11px; margin-bottom:9px; }
.xm-flag.amber { background:rgba(245,165,36,.10); border:1px solid var(--amber-border, rgba(245,165,36,.3)); color:var(--text); }
.xm-flag.blue { background:rgba(124,111,247,.10); border:1px solid rgba(124,111,247,.3); color:var(--text); }
.xm-flag b { color:var(--text); }

/* cognitive mix bars */
.xm-cogmix { display:flex; flex-direction:column; gap:8px; }
.xm-cogmix-row { display:grid; grid-template-columns:96px 1fr 36px; gap:8px; align-items:center; }
.xm-cogmix-row.dim { opacity:.45; }
.xm-cogmix-name { font-size:12px; font-weight:600; color:var(--text2); }
.xm-cogmix-track { height:9px; background:var(--bg2); border-radius:999px; overflow:hidden; }
.xm-cogmix-fill { display:block; height:100%; border-radius:999px; transition:width .5s var(--ease); }
.xm-cogmix-fill.k-knowledge { background:#5b8cff; }
.xm-cogmix-fill.k-comprehension { background:#16b8a6; }
.xm-cogmix-fill.k-application { background:#7c6ff7; }
.xm-cogmix-fill.k-analysis { background:#f5a524; }
.xm-cogmix-val { font-size:11px; font-weight:700; color:var(--text2); text-align:right; }

/* topic coverage chips */
.xm-cov { display:flex; flex-wrap:wrap; gap:6px; }
.xm-cov-chip { font-size:11.5px; color:var(--text2); background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; padding:4px 9px; }
.xm-cov-chip b { color:var(--text); font-weight:700; }

/* start cta */
.xm-cta-wrap { text-align:center; margin-top:18px; }
.xm-start { width:100%; max-width:420px; font-size:16px; font-weight:800; color:#fff; padding:15px;
  border:none; border-radius:14px; cursor:pointer; background:linear-gradient(135deg,#7c6ff7,#5b8cff);
  box-shadow:0 6px 20px rgba(124,111,247,.3); transition:transform .1s, filter .15s; }
.xm-start:hover { transform:translateY(-1px); filter:brightness(1.05); }
.xm-start.disabled { background:var(--bg2); color:var(--text3); box-shadow:none; cursor:not-allowed; }
.xm-cta-note { font-size:11.5px; color:var(--text3); margin-top:9px; }

/* empty + skeleton */
.xm-empty { text-align:center; padding:50px 20px; }
.xm-empty-ic { font-size:40px; margin-bottom:10px; }
.xm-empty-t { font-size:17px; font-weight:800; color:var(--text); }
.xm-empty-s { font-size:13px; color:var(--text2); line-height:1.5; max-width:360px; margin:8px auto 16px; }
.xm-btn { font-size:13px; font-weight:700; padding:10px 18px; border-radius:10px; cursor:pointer;
  background:var(--bg2); border:1px solid var(--border); color:var(--text); }
.xm-btn.primary { background:var(--accent,#7c6ff7); border-color:var(--accent,#7c6ff7); color:#fff; }
.xm-skel-block { background:var(--bg3); border:1px solid var(--border); border-radius:16px; margin-bottom:14px;
  animation:xm-pulse 1.4s ease-in-out infinite; }
.xm-skel-lines { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.xm-skel-line { height:14px; background:var(--bg3); border-radius:7px; animation:xm-pulse 1.4s ease-in-out infinite; }
.xm-skel-line:nth-child(2){ width:80%; } .xm-skel-line:nth-child(3){ width:60%; }
@keyframes xm-pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }

/* ── Exam Mode: timed sitting (M4.3) ── */
.xm-take { max-width:680px; }
.xm-take-bar { display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:10px 14px; margin-bottom:10px;
  position:sticky; top:8px; z-index:5; }
.xm-take-exit { background:none; border:1px solid var(--border); color:var(--text2); font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:8px; cursor:pointer; }
.xm-take-exit:hover { color:var(--red,#f47272); border-color:var(--red,#f47272); }
.xm-timer { font-family:'JetBrains Mono', monospace; font-size:20px; font-weight:700; color:var(--text);
  letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.xm-timer.danger { color:var(--red,#f47272); animation:xm-blink 1s steps(2) infinite; }
@keyframes xm-blink { 50% { opacity:.55; } }
.xm-take-prog { font-size:12px; font-weight:700; color:var(--text2); }
.xm-take-progbar { height:4px; background:var(--bg2); border-radius:999px; overflow:hidden; margin-bottom:14px; }
.xm-take-progbar span { display:block; height:100%; background:linear-gradient(90deg,#7c6ff7,#5b8cff); transition:width .3s var(--ease); }

.xm-qcard { background:var(--bg3); border:1px solid var(--border); border-radius:16px; padding:20px; margin-bottom:14px; }
.xm-q-meta { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.xm-q-num { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text3); }
.xm-q-marks { font-size:12px; font-weight:800; color:var(--accent2,#a89eff); }
.xm-q-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.xm-q-chip { font-size:11px; font-weight:600; color:var(--text2); background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:3px 9px; }
.xm-q-chip.alt { color:var(--accent2,#a89eff); }
.xm-q-text { font-size:16px; line-height:1.6; color:var(--text); font-weight:500; margin-bottom:16px; }
.xm-opts { display:flex; flex-direction:column; gap:9px; }
.xm-opt { text-align:left; font-size:14px; color:var(--text); background:var(--bg2); border:1.5px solid var(--border);
  border-radius:11px; padding:13px 15px; cursor:pointer; transition:border-color .12s, background .12s; }
.xm-opt:hover { border-color:var(--accent,#7c6ff7); }
.xm-opt.sel { border-color:var(--accent,#7c6ff7); background:rgba(124,111,247,.12); font-weight:600; }
.xm-answer { width:100%; min-height:130px; resize:vertical; box-sizing:border-box; font-family:inherit; font-size:14px;
  line-height:1.6; color:var(--text); background:var(--bg2); border:1.5px solid var(--border); border-radius:11px; padding:13px 15px; }
.xm-answer:focus { outline:none; border-color:var(--accent,#7c6ff7); }
.xm-flag-btn { margin-top:14px; background:none; border:1px solid var(--border); color:var(--text2); font-size:12.5px;
  font-weight:600; padding:7px 14px; border-radius:9px; cursor:pointer; }
.xm-flag-btn:hover { color:var(--text); }
.xm-flag-btn.on { color:#f5b841; border-color:#f5b841; }

.xm-take-nav { display:flex; gap:10px; margin-bottom:18px; }
.xm-nav-btn { flex:1; font-size:14px; font-weight:700; padding:13px; border-radius:12px; cursor:pointer;
  background:var(--bg2); border:1px solid var(--border); color:var(--text); }
.xm-nav-btn:disabled { opacity:.4; cursor:not-allowed; }
.xm-nav-btn.primary { background:linear-gradient(135deg,#7c6ff7,#5b8cff); border:none; color:#fff; }
.xm-navgrid-h { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text3); margin-bottom:8px; }
.xm-navgrid { display:flex; flex-wrap:wrap; gap:7px; }
.xm-navq { width:38px; height:38px; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer;
  background:var(--bg2); border:1px solid var(--border); color:var(--text2); position:relative; }
.xm-navq:hover { border-color:var(--accent,#7c6ff7); color:var(--text); }
.xm-navq.done { background:rgba(47,207,190,.14); border-color:var(--teal,#2fcfbe); color:var(--teal,#2fcfbe); }
.xm-navq.cur { border-color:var(--accent,#7c6ff7); border-width:2px; color:var(--text); }
.xm-navq.flag::after { content:''; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#f5b841; }

.xm-resume .xm-btn.primary, .xm-done .xm-btn.primary { margin-top:14px; }
.xm-done { text-align:center; }
.xm-done-ic { font-size:44px; margin-bottom:8px; }

/* ── Exam Mode: marking (M4.4) ── */
.xm-mkcard { padding:16px; }
.xm-mk-q { font-size:14.5px; line-height:1.55; color:var(--text); font-weight:500; margin:6px 0 12px; }
.xm-mk-lbl { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text3); margin-bottom:3px; }
.xm-mk-ans { font-size:13.5px; color:var(--text); background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:10px 13px; margin-bottom:10px; white-space:pre-wrap; }
.xm-mk-ans.empty { color:var(--text3); font-style:italic; }
.xm-mk-auto { font-size:13px; font-weight:800; padding:9px 13px; border-radius:10px; }
.xm-mk-auto.ok { background:var(--teal-bg); color:var(--teal,#2fcfbe); }
.xm-mk-auto.no { background:rgba(244,114,114,.10); color:var(--red,#f47272); }
.xm-mk-model { font-size:13px; color:var(--text); background:rgba(47,207,190,.07); border:1px solid rgba(47,207,190,.18); border-radius:10px; padding:10px 13px; margin-top:8px; }
.xm-mk-guide { font-size:12.5px; color:var(--text2); background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:9px 13px; margin-top:8px; }
.xm-mk-award { margin-top:12px; }
.xm-mkrow { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.xm-mk { min-width:38px; height:38px; border-radius:9px; font-size:14px; font-weight:700; cursor:pointer;
  background:var(--bg2); border:1.5px solid var(--border); color:var(--text2); }
.xm-mk:hover { border-color:var(--accent,#7c6ff7); color:var(--text); }
.xm-mk.on { background:var(--accent,#7c6ff7); border-color:var(--accent,#7c6ff7); color:#fff; }
.xm-mk-of { font-size:13px; font-weight:700; color:var(--text3); margin-left:4px; }
.xm-mark-foot { position:sticky; bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg3); border:1px solid var(--border); border-radius:14px; padding:12px 16px; margin-top:8px;
  box-shadow:0 -4px 20px rgba(0,0,0,.3); }
.xm-mark-total { font-size:14px; color:var(--text2); font-weight:600; }
.xm-mark-total b { color:var(--text); font-size:18px; }
.xm-mk-todo { color:#f5b841; font-weight:600; font-size:12px; }

/* ── Exam Mode: results (M4.4) ── */
.xm-result-hero { text-align:center; background:linear-gradient(135deg, rgba(124,111,247,.12), rgba(91,140,255,.06)); padding:24px; }
/* Ory reacts to the PAPER, once, here - not to each question on the marking
   screen, which repaints every time another answer settles and would replay
   every reaction on it. Below 50 he is thinking, not shrugging: a shrug at a
   single question is kind, a shrug at someone's exam is not. */
.xm-result-hero > .ory { margin:-6px auto 2px; display:block; }
.xm-mk-lead { margin-bottom:12px; align-items:center; }
.xm-mk-lead .xm-lead { margin:0; }
.xm-result-pct { font-size:60px; font-weight:800; color:var(--text); letter-spacing:-.03em; line-height:1; }
.xm-result-pct span { font-size:28px; color:var(--text2); }
.xm-result-marks { font-size:14px; font-weight:700; color:var(--text2); margin-top:6px; }
.xm-pva-row { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:10px; }
.xm-pva-cell { display:flex; flex-direction:column; align-items:center; }
.xm-pva-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text3); }
.xm-pva-num { font-size:30px; font-weight:800; color:var(--text); }
.xm-pva-num.muted { color:var(--text3); }
.xm-pva-arrow { font-size:20px; color:var(--text3); }
.xm-pva-delta { font-size:14px; font-weight:800; padding:4px 10px; border-radius:999px; }
.xm-pva-delta.up { color:var(--teal,#2fcfbe); background:var(--teal-bg); }
.xm-pva-delta.down { color:#f5b841; background:rgba(245,184,65,.12); }
.xm-pva-base { font-size:22px; font-weight:800; color:var(--accent2,#a89eff); margin-bottom:4px; }
.xm-tw-list { display:flex; flex-direction:column; gap:9px; }
.xm-tw-list .xm-tw-row { display:grid; grid-template-columns:1fr 90px 44px; gap:9px; align-items:center; }
.xm-tw-list .xm-tw-row.bad .xm-tw-name { color:#f5b841; }
.xm-missions { display:flex; flex-direction:column; gap:10px; }
.xm-mission { display:flex; align-items:center; gap:12px; background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.xm-mission-ic { font-size:22px; }
.xm-mission-body { flex:1; }
.xm-mission-t { font-size:14px; font-weight:800; color:var(--text); }
.xm-mission-s { font-size:12px; color:var(--text2); line-height:1.45; margin-top:2px; }
.xm-mission-go { font-size:12.5px; font-weight:700; color:#fff; background:var(--accent,#7c6ff7); border:none; border-radius:9px; padding:8px 12px; cursor:pointer; white-space:nowrap; }
.xm-weakskills { margin-top:12px; font-size:12px; color:var(--text2); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.xm-weakskill { background:rgba(245,184,65,.12); color:#f5b841; border-radius:6px; padding:2px 8px; font-weight:600; }
.xm-section-h { font-size:13px; font-weight:800; color:var(--text); margin:18px 0 10px; }
.xm-wrong { padding:16px; }
.xm-wrong-q { font-size:14px; line-height:1.5; color:var(--text); font-weight:500; margin:6px 0 10px; }
.xm-why-btn { font-size:12.5px; font-weight:700; color:var(--accent2,#a89eff); background:rgba(124,111,247,.10); border:1px solid rgba(124,111,247,.25); border-radius:9px; padding:8px 13px; cursor:pointer; margin-top:4px; }
.xm-why-btn:hover { background:rgba(124,111,247,.18); }
.xm-why { margin-top:10px; font-size:13px; line-height:1.55; color:var(--text2); display:flex; flex-direction:column; gap:7px; }
.xm-why > div { background:var(--bg2); border:1px solid var(--border); border-radius:9px; padding:9px 12px; }
.xm-why b { color:var(--text); }
.xm-why-misc { border-left:3px solid #f5b841 !important; }
.xm-why-fix { border-left:3px solid var(--teal,#2fcfbe) !important; }
.xm-why-ans { color:var(--teal,#2fcfbe); font-weight:600; }
.xm-why-loading { color:var(--text3); }

/* ── Exam Mode: marking filter (M4.45) ── */
.xm-mk-controls { margin-bottom:12px; }
.xm-mk-filter { font-size:12.5px; font-weight:700; color:var(--accent2,#a89eff); background:rgba(124,111,247,.10);
  border:1px solid rgba(124,111,247,.25); border-radius:9px; padding:8px 14px; cursor:pointer; }
.xm-mk-filter:hover { background:rgba(124,111,247,.18); }
.xm-mk-filter.on { background:var(--accent,#7c6ff7); color:#fff; border-color:var(--accent,#7c6ff7); }

.xm-why-tip { color:var(--text3); font-style:italic; }

.xm-hero-cov { margin-top:8px; font-size:12px; color:var(--text3); }
.xm-hero-cov b { color:var(--text2); }

.xm-hero-cov-x { display:block; margin-top:3px; font-size:11px; color:var(--text3); font-style:italic; font-weight:400; }

/* ── Exam Mode: entrance motion (energy pass) ── */
@keyframes xm-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.xm-page > .xm-hero, .xm-page > .xm-card, .xm-page > .xm-cta-wrap,
.xm-page > .xm-section-h, .xm-page > .xm-wrong {
  animation: xm-rise .42s cubic-bezier(.2,.7,.3,1) both;
}
.xm-page > *:nth-child(3){ animation-delay:.05s } .xm-page > *:nth-child(4){ animation-delay:.10s }
.xm-page > *:nth-child(5){ animation-delay:.15s } .xm-page > *:nth-child(6){ animation-delay:.20s }
.xm-page > *:nth-child(7){ animation-delay:.25s } .xm-page > *:nth-child(8){ animation-delay:.30s }
.xm-subj { animation: xm-rise .4s cubic-bezier(.2,.7,.3,1) both; }
.xm-subject-grid > *:nth-child(2){ animation-delay:.04s } .xm-subject-grid > *:nth-child(3){ animation-delay:.08s }
.xm-subject-grid > *:nth-child(4){ animation-delay:.12s } .xm-subject-grid > *:nth-child(5){ animation-delay:.16s }
.xm-subject-grid > *:nth-child(6){ animation-delay:.20s } .xm-subject-grid > *:nth-child(7){ animation-delay:.24s }
.xm-subject-grid > *:nth-child(8){ animation-delay:.28s }
@media (prefers-reduced-motion: reduce){ .xm-page > *, .xm-subj { animation:none !important; } }

/* ── Study Plan (M5.1) ── */
.sp-page { max-width:720px; margin:0 auto; padding:4px 0 40px; }
.sp-top { margin-bottom:14px; }
.sp-title { font-size:20px; font-weight:800; color:var(--text); letter-spacing:-.02em; }
.sp-beta { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent2,#a89eff);
  background:rgba(124,111,247,.12); padding:3px 8px; border-radius:999px; margin-left:4px; vertical-align:middle; }
.sp-lead { font-size:14px; color:var(--text2); line-height:1.55; margin-bottom:18px; }
.sp-back { background:none; border:none; color:var(--text2); font-size:13px; font-weight:600; cursor:pointer; padding:2px 0 12px; }
.sp-back:hover { color:var(--text); }
.sp-card-h { font-size:17px; font-weight:800; color:var(--text); margin-bottom:14px; }

/* list grid */
.sp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); gap:14px; }
.sp-card { display:flex; flex-direction:column; gap:9px; align-items:flex-start; text-align:left;
  background:linear-gradient(165deg,var(--bg3),var(--bg2)); border:1px solid var(--border); border-radius:18px; padding:18px; cursor:pointer;
  transition:transform .15s, border-color .2s, box-shadow .2s; }
.sp-card:hover { transform:translateY(-3px); border-color:rgba(124,111,247,.5); box-shadow:0 14px 34px -14px rgba(124,111,247,.4); }
.sp-card-top { display:flex; align-items:center; justify-content:space-between; width:100%; }
.sp-card-ic { font-size:24px; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--bg2); border:1px solid var(--border); border-radius:13px; }
.sp-card-name { font-size:15.5px; font-weight:800; color:var(--text); line-height:1.25; }
.sp-card-meta { font-size:12px; font-weight:700; color:var(--accent2,#a89eff); }
.sp-card-sub { font-size:11.5px; color:var(--text3); }
.sp-new { align-items:center; justify-content:center; flex-direction:column; gap:6px; border-style:dashed; min-height:150px; color:var(--text2); }
.sp-new:hover { color:var(--text); }
.sp-new-plus { font-size:30px; font-weight:300; line-height:1; }
.sp-new-t { font-size:13px; font-weight:700; }

/* setup form */
.sp-form { display:flex; flex-direction:column; gap:18px; }
.sp-field label { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text3); margin-bottom:9px; }
.sp-chips { display:flex; flex-wrap:wrap; gap:8px; }
.sp-chip { font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer; background:var(--bg2); border:1px solid var(--border); color:var(--text2); }
.sp-chip:hover { color:var(--text); border-color:var(--accent,#7c6ff7); }
.sp-chip.on { background:var(--accent,#7c6ff7); border-color:var(--accent,#7c6ff7); color:#fff; }
.sp-date { font-family:inherit; font-size:14px; color:var(--text); background:var(--bg2); border:1.5px solid var(--border); border-radius:11px; padding:11px 14px; }
.sp-date::-webkit-calendar-picker-indicator { filter:invert(.7); }
.sp-segs { display:flex; flex-wrap:wrap; gap:8px; }
.sp-seg { font-size:13.5px; font-weight:700; padding:9px 16px; border-radius:11px; cursor:pointer; background:var(--bg2); border:1.5px solid var(--border); color:var(--text2); }
.sp-seg:hover { color:var(--text); border-color:var(--accent,#7c6ff7); }
.sp-seg.on { background:rgba(124,111,247,.14); border-color:var(--accent,#7c6ff7); color:var(--text); }

.sp-btn { font-size:13.5px; font-weight:700; padding:11px 18px; border-radius:11px; cursor:pointer; background:var(--bg2); border:1px solid var(--border); color:var(--text); }
.sp-btn.primary { background:linear-gradient(135deg,#7c6ff7,#5b8cff); border:none; color:#fff; }
.sp-btn.lg { padding:15px; font-size:15px; width:100%; max-width:380px; }
.sp-btn.disabled { background:var(--bg2); color:var(--text3); cursor:not-allowed; }

/* plan view */
.sp-hero { display:flex; gap:16px; align-items:center; background:linear-gradient(135deg,rgba(124,111,247,.10),rgba(91,140,255,.04));
  border:1px solid var(--border); border-radius:18px; padding:18px; margin-bottom:14px; }
.sp-hero-name { font-size:18px; font-weight:800; color:var(--text); }
.sp-hero-meta { font-size:13px; font-weight:700; color:var(--accent2,#a89eff); margin:3px 0; }
.sp-hero-prog { font-size:12px; color:var(--text2); }
.sp-flag { font-size:12.5px; line-height:1.5; padding:11px 13px; border-radius:11px; margin-bottom:14px; }
.sp-flag.amber { background:rgba(245,184,65,.10); border:1px solid var(--amber-border,rgba(245,184,65,.3)); color:var(--text); }
.sp-flag.blue { background:rgba(124,111,247,.10); border:1px solid rgba(124,111,247,.3); color:var(--text); }
.sp-saverow { display:flex; gap:10px; margin-bottom:16px; }

.sp-days { display:flex; flex-direction:column; gap:14px; }
.sp-day { background:var(--bg3); border:1px solid var(--border); border-radius:16px; padding:14px; }
.sp-day-h { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.sp-day-lbl { font-size:14px; font-weight:800; color:var(--text); }
.sp-day-date { font-size:11px; color:var(--text3); }
.sp-block { display:flex; align-items:center; gap:11px; background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:8px; }
.sp-block:last-child { margin-bottom:0; }
.sp-block.done { opacity:.55; }
.sp-block.done .sp-block-topic { text-decoration:line-through; }
.sp-block-check { width:26px; height:26px; flex-shrink:0; border-radius:8px; border:1.5px solid var(--border); background:var(--bg3); color:var(--teal,#2fcfbe); font-weight:800; cursor:pointer; }
.sp-block.done .sp-block-check { background:var(--teal,#2fcfbe); border-color:var(--teal,#2fcfbe); color:#03110f; }
.sp-block-body { flex:1; min-width:0; }
.sp-block-top { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.sp-block-chip { font-size:10.5px; font-weight:800; color:var(--tc,#7c6ff7); }
.sp-block-min { font-size:10.5px; color:var(--text3); font-weight:600; }
.sp-block-topic { font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-block-go { font-size:12px; font-weight:700; color:#fff; background:var(--accent,#7c6ff7); border:none; border-radius:9px; padding:8px 12px; cursor:pointer; white-space:nowrap; }
.sp-block-go:hover { filter:brightness(1.07); }
.sp-empty { text-align:center; padding:50px 20px; }
.sp-empty-ic { font-size:40px; margin-bottom:10px; }
.sp-empty-t { font-size:17px; font-weight:800; color:var(--text); }
.sp-empty-s { font-size:13px; color:var(--text2); line-height:1.5; max-width:340px; margin:8px auto 16px; }
.sp-skel { background:var(--bg3); border:1px solid var(--border); border-radius:16px; margin-bottom:14px; animation:xm-pulse 1.4s ease-in-out infinite; }

/* ── Exam Mode readiness trend (M5.2) ── */
.xm-trend { margin-top:9px; font-size:12px; font-weight:800; display:flex; align-items:center; gap:8px; }
.xm-trend.up { color:#34d97a; }
.xm-trend.down { color:#f5a524; }
.xm-trend.flat { color:var(--text3); font-weight:600; }

/* iOS Safari auto-zooms the page when a focused input/textarea has a
   font-size under 16px, which left the Coach chat (and other text fields)
   magnified on iPhones. Bump text fields to 16px on TOUCH devices only —
   desktop keeps the tighter 14px, and pinch-zoom accessibility is preserved. */
@media (pointer: coarse) {
  .input,
  textarea.input,
  select.input { font-size: 16px; }
}

/* Streak / milestone celebration confetti (js/celebrate.js). Pure CSS. */
.celebrate-layer { position:fixed; inset:0; z-index:3000; pointer-events:none; overflow:hidden; }
/* Confetti fell in a dead straight line, at one speed, spinning on one axis -
   which is not how anything falls. Real paper drifts sideways as it tumbles and
   its spin is not flat, and those two things are most of why physical confetti
   reads as physical. The horizontal drift is a per-piece CSS variable set in
   JS, so no two pieces take the same path; the wobble is a separate, faster
   rotation on a second axis, which is what makes a flat rectangle catch the
   light and appear to flip edge-on. Costs nothing extra - same one animation
   per piece, still entirely on the compositor. */
.celebrate-piece { position:absolute; top:-24px; border-radius:2px; opacity:.92;
  animation-name:celebrate-fall; animation-timing-function:cubic-bezier(.25,.5,.45,1);
  animation-fill-mode:forwards; will-change:transform; }
@keyframes celebrate-fall {
  0%   { transform:translate3d(0,-24px,0) rotateZ(0deg) rotateX(0deg); opacity:1; }
  15%  { opacity:1; }
  100% { transform:translate3d(var(--drift,0px),106vh,0) rotateZ(var(--spin,720deg)) rotateX(1080deg); opacity:.85; }
}
/* ── CLASH TAKEOVER ───────────────────────────────────────────────
   Choreographed to the zap, not merely accompanied by it. That sound takes
   560ms to reach its peak and then discharges, so every timing below is pinned
   to that one number: the sides close and the core swells across those 560ms,
   and the flash, the VS and the bolts all land ON it. Miss the alignment by a
   frame or two and it stops being one event.

   Colours are the app's own: you are green and they are amber, the same two
   the live race bars already use, so the takeover teaches the colour coding
   you will read for the next 24 hours. The electricity is the brand purple. */
.clash-layer {
  position:fixed; inset:0; z-index:3100; pointer-events:none; overflow:hidden;
  display:grid; place-items:center; align-content:center; gap:0;
  background:radial-gradient(ellipse at center, #241d3d 0%, #0d0a16 70%);
  animation:clashIn .16s var(--ease) both;
}
@keyframes clashIn { from{opacity:0} to{opacity:1} }

/* The charge. Grows and brightens for exactly 560ms, then is gone - it does
   not fade out, it is CONSUMED by the flash that replaces it. */
.clash-core {
  position:absolute; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, var(--accent2) 0%, var(--accent) 45%, transparent 70%);
  filter:blur(14px); opacity:0; transform:scale(.2);
  animation:clashCharge .56s cubic-bezier(.7,0,.9,.4) both;
}
@keyframes clashCharge {
  0%   { opacity:0;   transform:scale(.2); }
  70%  { opacity:.75; transform:scale(.9); }
  100% { opacity:1;   transform:scale(1.55); }
}

.clash-flash {
  position:absolute; inset:0; background:#fff; opacity:0;
  animation:clashFlash .5s ease-out .56s both;
}
@keyframes clashFlash { 0%{opacity:.85} 25%{opacity:.35} 100%{opacity:0} }

/* Bolts fire outward on the discharge. --a is each one's angle, --d a small
   per-bolt delay so they do not leave as a perfect ring. */
.clash-bolt {
  position:absolute; width:3px; height:46vmax; border-radius:3px;
  background:linear-gradient(to bottom, var(--accent2), transparent 60%);
  transform-origin:top center; opacity:0;
  transform:rotate(var(--a)) scaleY(0);
  animation:clashBolt .55s cubic-bezier(.15,.85,.3,1) calc(.56s + var(--d)) both;
}
@keyframes clashBolt {
  0%   { opacity:.95; transform:rotate(var(--a)) scaleY(0); }
  60%  { opacity:.7; }
  100% { opacity:0;   transform:rotate(var(--a)) scaleY(1); }
}

.clash-stage {
  position:relative; display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,5vw,44px); z-index:2;
}
.clash-side {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  min-width:96px; opacity:0;
}
/* They travel INWARD across the charge, so the collision and the peak of the
   sound are the same instant. */
.clash-side.me   { animation:clashInLeft  .56s cubic-bezier(.5,0,.75,.4) both; }
.clash-side.them { animation:clashInRight .56s cubic-bezier(.5,0,.75,.4) both; }
@keyframes clashInLeft  { from{opacity:0;transform:translateX(-46vw) scale(.7)} to{opacity:1;transform:none} }
@keyframes clashInRight { from{opacity:0;transform:translateX( 46vw) scale(.7)} to{opacity:1;transform:none} }

.clash-face {
  font-size:clamp(38px,11vw,62px); line-height:1;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.6));
}
.clash-name {
  font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--text);
  max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.clash-side.me   .clash-name { color:var(--green); }
.clash-side.them .clash-name { color:var(--amber); }

/* Lands ON the discharge, overshooting hard. */
.clash-vs {
  font-size:clamp(26px,8vw,44px); font-weight:900; font-style:italic;
  color:#fff; text-shadow:0 0 26px var(--accent), 0 4px 18px rgba(0,0,0,.7);
  opacity:0; animation:clashVs .5s cubic-bezier(.2,1.7,.4,1) .56s both;
}
@keyframes clashVs {
  0%   { opacity:0; transform:scale(3.4) rotate(-14deg); }
  100% { opacity:1; transform:scale(1) rotate(-6deg); }
}

.clash-title {
  margin-top:26px; z-index:2;
  font-size:clamp(30px,9vw,52px); font-weight:900; letter-spacing:.06em; color:#fff;
  text-shadow:0 0 34px var(--accent-glow);
  animation:clashRise .5s cubic-bezier(.34,1.45,.64,1) .72s both;
}
.clash-stakes {
  margin-top:10px; z-index:2; padding:0 22px; text-align:center; text-wrap:balance;
  font-size:13px; font-weight:600; color:var(--text2);
  animation:clashRise .5s cubic-bezier(.34,1.45,.64,1) .88s both;
}
@keyframes clashRise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

/* Reduced motion: the takeover is information - who, against whom, for how
   long - so it still SHOWS, it just stops moving. Every element carries `both`
   fill-mode above, which would otherwise pin them all at opacity:0 forever. */
@media (prefers-reduced-motion: reduce) {
  .clash-layer, .clash-core, .clash-flash, .clash-bolt, .clash-side,
  .clash-vs, .clash-title, .clash-stakes {
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .clash-bolt, .clash-flash { display:none; }
  .clash-core { opacity:.5 !important; }
  .clash-vs { transform:rotate(-6deg) !important; }
}

/* ── QUEST TAKEOVER ───────────────────────────────────────────────
   The inverse of the clash, on purpose and in every dimension. Clash: inward,
   fast, cold, a flash, bolts firing OUT. Quest: upward, slow, warm, no flash,
   rings blooming out gently. Same structure, opposite physics - which is what
   makes the two read as a pair rather than as one screen with the words
   changed.

   Cut to `quest`, three notes at 0ms, 100ms and 200ms: you arrive, they
   arrive, the link between you draws on the longest note.

   Both people are the SAME colour here. In the clash you are green and they
   are amber because the colours tell you who to beat; in a quest there is no
   side to be on, and colouring them differently would say there was. */
.quest-layer {
  position:fixed; inset:0; z-index:3100; pointer-events:none; overflow:hidden;
  display:grid; place-items:center; align-content:center;
  background:radial-gradient(ellipse at center, #1e2a3a 0%, #0c1018 72%);
  animation:questIn .2s var(--ease) both;
}
@keyframes questIn { from{opacity:0} to{opacity:1} }

/* Warmth, not a charge. It arrives with the third note and simply stays lit -
   there is nothing to discharge. */
.quest-glow {
  position:absolute; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, var(--teal, #2fcfbe) 0%, var(--accent) 55%, transparent 72%);
  filter:blur(46px); opacity:0;
  animation:questGlow 1.1s var(--ease) .2s both;
}
@keyframes questGlow { from{opacity:0;transform:scale(.5)} to{opacity:.5;transform:scale(1)} }

/* Rings spread outward slowly. The clash fires straight bolts; this blooms. */
.quest-ring {
  position:absolute; width:150px; height:150px; border-radius:50%;
  border:2px solid var(--teal, #2fcfbe); opacity:0;
  animation:questRing 1.9s cubic-bezier(.2,.6,.3,1) calc(.2s + var(--i) * .22s) both;
}
@keyframes questRing {
  0%   { opacity:.55; transform:scale(.4); }
  100% { opacity:0;   transform:scale(3.1); }
}

.quest-stage {
  position:relative; z-index:2; display:flex; align-items:center;
  justify-content:center; gap:clamp(6px,3vw,22px);
}
.quest-side {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  min-width:92px; opacity:0;
}
/* Rising from below, because the sound does. One per note. */
.quest-side.a { animation:questRise .5s cubic-bezier(.2,1.3,.5,1) 0s   both; }
.quest-side.b { animation:questRise .5s cubic-bezier(.2,1.3,.5,1) .1s  both; }
@keyframes questRise { from{opacity:0;transform:translateY(52px) scale(.82)} to{opacity:1;transform:none} }

.quest-face { font-size:clamp(36px,10vw,58px); line-height:1;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.55)); }
.quest-name {
  font-size:13px; font-weight:800; color:var(--teal, #2fcfbe);
  max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* The link draws on the third and longest note - the two of them becoming one
   thing is the point of the screen, so it gets the note that rings longest. */
.quest-link { position:relative; display:grid; place-items:center; width:clamp(30px,9vw,54px); }
.quest-seam {
  position:absolute; height:2px; width:100%; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--teal, #2fcfbe), transparent);
  transform:scaleX(0); animation:questSeam .5s var(--ease) .2s both;
}
@keyframes questSeam { from{transform:scaleX(0);opacity:0} to{transform:scaleX(1);opacity:1} }
.quest-plus {
  position:relative; font-size:clamp(20px,6vw,30px); font-weight:900; color:#fff;
  text-shadow:0 0 20px var(--teal, #2fcfbe); opacity:0;
  animation:questPlus .55s cubic-bezier(.34,1.5,.64,1) .2s both;
}
@keyframes questPlus { from{opacity:0;transform:scale(.3)} to{opacity:1;transform:scale(1)} }

.quest-title {
  margin-top:26px; z-index:2;
  font-size:clamp(28px,8vw,48px); font-weight:900; letter-spacing:.06em; color:#fff;
  text-shadow:0 0 32px rgba(47,207,190,.5);
  animation:questUp .5s cubic-bezier(.34,1.45,.64,1) .42s both;
}
.quest-stakes {
  margin-top:10px; z-index:2; padding:0 22px; text-align:center; text-wrap:balance;
  font-size:13.5px; font-weight:700; color:var(--text2);
  animation:questUp .5s cubic-bezier(.34,1.45,.64,1) .56s both;
}
@keyframes questUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

@media (prefers-reduced-motion: reduce) {
  .quest-layer, .quest-glow, .quest-ring, .quest-side, .quest-seam,
  .quest-plus, .quest-title, .quest-stakes {
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .quest-ring { display:none; }
  .quest-glow { opacity:.35 !important; }
  .quest-seam { transform:scaleX(1) !important; }
}

/* ── LEVEL / RANK TAKEOVER ────────────────────────────────────────
   levelUp is the only full cadence in the library, and its shape is a journey:
   four notes accelerating up, then G at 280ms, A at 400ms, D at 530ms, then a
   tail drifting off the top. So this screen is an ASCENT IN THREE LIFTS - the
   number rises once per chord, and lands on the resolution, which is the chord
   the whole cadence exists to reach.

   Nothing collides and nothing flashes. The clash is a collision and the quest
   is a joining; this is altitude, so everything moves in one direction and
   keeps going after it arrives. */
.lvl-layer {
  position:fixed; inset:0; z-index:3100; pointer-events:none; overflow:hidden;
  display:grid; place-items:center; align-content:center;
  background:linear-gradient(180deg, #0a0812 0%, #1b1733 55%, #2a2250 100%);
  animation:lvlIn .18s var(--ease) both;
}
@keyframes lvlIn { from{opacity:0} to{opacity:1} }

/* A shaft of light the number climbs inside. */
.lvl-beam {
  position:absolute; width:min(260px,62vw); height:100%;
  background:linear-gradient(180deg, transparent, rgba(124,111,247,.22) 45%, rgba(168,158,255,.32));
  filter:blur(24px); opacity:0; transform:translateY(28%);
  animation:lvlBeam 1.2s var(--ease) .1s both;
}
@keyframes lvlBeam { from{opacity:0;transform:translateY(28%)} to{opacity:1;transform:none} }

/* Four rungs, lighting on the four notes of the run: 0, 75, 140, 195ms. The
   gaps CLOSE, which is what makes a rising line feel like acceleration. */
.lvl-ladder {
  position:absolute; display:flex; flex-direction:column-reverse; gap:16px;
  opacity:.9; pointer-events:none;
}
.lvl-rung {
  width:min(210px,52vw); height:2px; border-radius:2px; background:var(--accent2);
  opacity:0; transform:scaleX(.3);
  animation:lvlRung .5s var(--ease) calc(var(--i) * 65ms) both;
}
@keyframes lvlRung {
  0%   { opacity:0;  transform:scaleX(.3); }
  35%  { opacity:.95; transform:scaleX(1); }
  100% { opacity:0;  transform:scaleX(1); }
}

/* He climbs the ladder the rungs describe: in from below, up past the rank,
   and gone off the top - so the number is what is left standing. */
.lvl-ory { position:absolute; z-index:3; left:26%; pointer-events:none;
  animation:lvlFlyBy 2.8s cubic-bezier(.32,.04,.3,1) .2s both; }
/* He climbs PAST the number, not through it. Up the left of the ladder, so
   the rank is what you read and he is what is moving. */
@keyframes lvlFlyBy {
  0%   { transform:translate(-50%, 52vh) scale(.62) rotate(-6deg); opacity:0; }
  18%  { opacity:1; }
  68%  { transform:translate(-50%, -14vh) scale(1) rotate(0deg); opacity:1; }
  100% { transform:translate(-50%, -58vh) scale(1.06) rotate(3deg); opacity:0; }
}
@media (max-width:560px) { .lvl-ory { left:20%; } }
@media (prefers-reduced-motion: reduce) {
  .lvl-ory { animation:none; transform:translate(-50%, -14vh); opacity:1; }
}
.lvl-stack { position:relative; z-index:2; display:grid; place-items:center; }
/* The rank you left. Rises and fades as the new one takes its place. */
.lvl-from {
  font-size:clamp(20px,6vw,30px); font-weight:800; color:var(--text3);
  text-decoration:line-through; opacity:0;
  /* Gone by the arrival: the old rank must clear before the new one lands, or
     they are both on screen at the moment that is supposed to be the point. */
  animation:lvlFrom .62s var(--ease) .28s both;
}
@keyframes lvlFrom {
  0%   { opacity:0;   transform:translateY(26px) scale(.9); }
  32%  { opacity:.75; transform:translateY(0) scale(1); }      /* A   400ms */
  100% { opacity:0;   transform:translateY(-34px) scale(.8); } /*     clear by 900ms */
}
/* Three lifts, one per chord: G at .28, A at .40, the arrival at .53. */
.lvl-rank {
  font-size:clamp(64px,20vw,132px); font-weight:900; line-height:1; color:#fff;
  text-shadow:0 0 46px var(--accent-glow), 0 8px 30px rgba(0,0,0,.6);
  /* .42s starting at .28s, so the keyframe percentages land on the actual
     chords rather than near them: 0% = G at 280ms, 29% = A at 400ms, 60% = D
     at 530ms. The first draft used .75s and the stops drifted 100-200ms late,
     which is exactly far enough for the eye to notice the number is moving
     independently of the music. */
  opacity:0; animation:lvlRank .42s cubic-bezier(.25,1.3,.4,1) .28s both;
}
@keyframes lvlRank {
  0%   { opacity:0; transform:translateY(96px) scale(.55); }   /* G   280ms */
  29%  { opacity:1; transform:translateY(40px) scale(.80); }   /* A   400ms */
  60%  { opacity:1; transform:translateY(0)    scale(1.06); }  /* D   530ms - arrival, overshoots */
  100% { opacity:1; transform:translateY(0)    scale(1); }     /*     settles */
}

/* The tail: two notes drift off the top of the cadence, so do these. */
.lvl-spark {
  position:absolute; bottom:22%; width:5px; height:5px; border-radius:50%;
  background:var(--accent2); opacity:0;
  animation:lvlSpark 1.5s cubic-bezier(.3,.5,.4,1) calc(.75s + var(--d)) both;
}
@keyframes lvlSpark {
  0%   { opacity:0;   transform:translate(0,0) scale(.4); }
  20%  { opacity:.95; }
  100% { opacity:0;   transform:translate(var(--x), -78vh) scale(1); }
}

.lvl-title {
  margin-top:22px; z-index:2;
  font-size:clamp(19px,5.5vw,30px); font-weight:900; letter-spacing:.14em; color:#fff;
  animation:lvlUp .5s cubic-bezier(.34,1.45,.64,1) .62s both;
}
.lvl-sub {
  margin-top:9px; z-index:2; padding:0 24px; text-align:center; text-wrap:balance;
  font-size:13.5px; font-weight:700; color:var(--text2);
  animation:lvlUp .5s cubic-bezier(.34,1.45,.64,1) .78s both;
}
@keyframes lvlUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

@media (prefers-reduced-motion: reduce) {
  .lvl-layer, .lvl-beam, .lvl-rung, .lvl-from, .lvl-rank, .lvl-spark,
  .lvl-title, .lvl-sub {
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .lvl-spark, .lvl-rung { display:none; }
  .lvl-from { opacity:.6 !important; }
}

/* Used by anim.js revealSeq(). Rises AND overshoots slightly - the curve is
   applied at the call site, so this keyframe stays a plain displacement. */
@keyframes animRise {
  from { opacity:0; transform:translateY(14px) scale(.96); }
  to   { opacity:1; transform:none; }
}

/* The accuracy bar under the session score. It has no track when the number is
   still climbing, so the fill reads as the number drawing itself rather than a
   separate widget that happens to agree. */
.fc-acc-track {
  height:4px; border-radius:3px; background:var(--bg3);
  margin:8px auto 0; max-width:74px; overflow:hidden;
}
.fc-acc-fill {
  height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg, var(--green), var(--teal, var(--green)));
}
@media (prefers-reduced-motion: reduce) {
  .fc-complete-stat { animation:none !important; opacity:1 !important; transform:none !important; }
}

.celebrate-banner { position:fixed; top:20%; left:50%; transform:translateX(-50%);
  background:var(--bg2); border:1px solid var(--accent2); color:var(--text);
  font-weight:800; font-size:16px; padding:12px 22px; border-radius:14px; white-space:nowrap;
  box-shadow:0 14px 44px rgba(0,0,0,.45); animation:celebrate-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes celebrate-pop {
  0%   { transform:translateX(-50%) scale(.6); opacity:0; }
  100% { transform:translateX(-50%) scale(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  .celebrate-piece { display:none; }
  .celebrate-banner { animation:none; }
}

/* ⚡ Star Challenge — surprise pop quiz (js/pop-quiz.js) */
.pq-body { color:var(--text); }
.pq-bolt { font-size:44px; line-height:1; margin-bottom:6px; }
.pq-title { font-size:22px; font-weight:800; margin-bottom:4px; }
.pq-sub { font-size:14px; color:var(--text2); line-height:1.5; }
.pq-loading { font-size:14px; color:var(--text2); margin-top:10px; }
.pq-stars { display:flex; gap:6px; justify-content:center; margin-top:12px; }
.pq-star { font-size:22px; color:var(--border2); transition:transform .25s, color .25s; }
.pq-star.on { color:#ffd93d; transform:scale(1.15); text-shadow:0 0 10px rgba(255,217,61,.6); }
.pq-skip { display:block; margin:12px auto 0; background:none; border:none; color:var(--text3); font-size:13px; cursor:pointer; }
.pq-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pq-topbar .pq-stars { margin-top:0; gap:4px; }
.pq-topbar .pq-star { font-size:16px; }
.pq-count { font-size:12px; font-weight:800; color:var(--text3); }
.pq-topic { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--accent-bg); color:var(--accent2); padding:3px 9px; border-radius:6px; margin-bottom:10px; }
.pq-q { font-size:16px; font-weight:700; line-height:1.45; margin-bottom:16px; }
.pq-opts { display:flex; flex-direction:column; gap:10px; }
.pq-opt { text-align:left; background:var(--bg3); border:1.5px solid var(--border); border-radius:12px; padding:13px 15px; font-size:15px; color:var(--text); cursor:pointer; transition:transform .1s, border-color .2s, background .2s; }
.pq-opt:not(:disabled):hover { border-color:var(--accent); transform:translateX(2px); }
.pq-opt.correct { border-color:var(--green); background:var(--teal-bg); color:var(--text); animation:pq-pop .3s ease; }
.pq-opt.wrong { border-color:#f5576c; background:rgba(245,87,108,.12); }
@keyframes pq-pop { 0%{ transform:scale(1) } 50%{ transform:scale(1.03) } 100%{ transform:scale(1) } }

/* Friends overlay (js/friends.js) */
.fr-head { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border); }
.fr-close { background:var(--bg3); border:none; color:var(--text2); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:15px; }
.fr-tabs { display:flex; gap:6px; padding:12px 14px 0; }
.fr-tab { flex:1; background:var(--bg3); border:1px solid var(--border); color:var(--text2); border-radius:10px 10px 0 0; padding:9px 6px; font-size:13px; font-weight:700; cursor:pointer; }
.fr-tab.on { background:var(--bg2); color:var(--text); border-bottom-color:transparent; }
.fr-badge { display:inline-block; min-width:16px; padding:0 5px; background:var(--accent2); color:#fff; border-radius:9px; font-size:10px; font-weight:800; }
.fr-body { padding:14px 16px 18px; overflow-y:auto; }
.fr-row { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border); }
.fr-row:last-child { border-bottom:none; }
.fr-av { width:34px; height:34px; border-radius:50%; background:var(--accent-bg); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; color:var(--accent2); flex-shrink:0; }
.fr-nick { flex:1; font-size:14px; font-weight:600; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-tag { font-size:11px; font-weight:700; color:var(--text3); }
.fr-tag.ok { color:var(--green); }
.fr-x { background:none; border:none; color:var(--text3); cursor:pointer; font-size:14px; padding:4px 8px; }
.fr-empty { text-align:center; color:var(--text3); font-size:13px; padding:26px 12px; line-height:1.5; }

.fr-block { background:none; border:none; color:var(--text4); cursor:pointer; font-size:13px; padding:4px 6px; opacity:.6; }
.fr-block:hover { opacity:1; }

/* 🎯 Deep Mode (js/deep-mode.js) */
.dm-head { display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--border); }
.dm-body { display:flex; flex-direction:column; max-height:88vh; overflow-y:auto; }
.dm-label { font-size:12px; font-weight:800; color:var(--text2); margin-bottom:8px; }
.dm-subs { display:flex; flex-wrap:wrap; gap:8px; }
.dm-sub { background:var(--bg3); border:1.5px solid var(--border); border-radius:10px; padding:7px 13px; font-size:13px; font-weight:700; color:var(--text2); cursor:pointer; }
.dm-sub.on { border-color:var(--accent2); background:var(--accent-bg); color:var(--accent2); }
.dm-prog { height:6px; background:var(--bg3); border-radius:6px; overflow:hidden; }
.dm-prog span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:6px; transition:width .4s; }
.dm-prog-lbl { font-size:11px; font-weight:700; color:var(--text3); margin:6px 0 14px; }
.dm-concept { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--accent-bg); color:var(--accent2); padding:3px 9px; border-radius:6px; margin-bottom:10px; }
.dm-q { font-size:16px; font-weight:700; line-height:1.5; margin-bottom:14px; white-space:pre-wrap; }
.dm-verdict { font-size:15px; font-weight:800; margin-bottom:12px; }
.dm-verdict.ok { color:var(--green); }
.dm-verdict.no { color:#f5576c; }
.dm-model { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.5; white-space:pre-wrap; color:var(--text); }
.dm-model-h { font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--text3); margin-bottom:6px; }

/* Leaderboard scope toggle (School | Friends) */
.lb-scope { display:flex; gap:6px; margin:2px 0 12px; background:var(--surface-2,#15151f); padding:4px; border-radius:12px; }
.lb-scope-btn { flex:1; padding:9px 10px; border:none; border-radius:9px; background:transparent; color:var(--text-dim,#9aa0b4); font-weight:700; font-size:14px; cursor:pointer; transition:.15s; }
.lb-scope-btn.on { background:var(--surface-1,#20202e); color:var(--text,#fff); box-shadow:0 1px 4px rgba(0,0,0,.25); }

/* Friend shared-streak badge */
.fr-streak { font-size:12px; font-weight:800; padding:3px 8px; border-radius:999px; background:var(--surface-2,#15151f); color:var(--text-dim,#c9a24b); white-space:nowrap; flex-shrink:0; }
.fr-streak.safe { color:#ff8a3d; background:rgba(255,138,61,.12); }
.fr-streak.risk { color:#ffd23d; background:rgba(255,210,61,.14); animation:frPulse 1.8s ease-in-out infinite; }
@keyframes frPulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* Friend quests */
.fr-quest-btn { border:none; background:transparent; font-size:15px; cursor:pointer; padding:2px 4px; opacity:.8; flex-shrink:0; }
.fr-quest-btn:hover { opacity:1; }
.fr-quest-card { background:var(--surface-2,#15151f); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.fr-quest-card.done { background:rgba(255,138,61,.10); }
.fr-quest-head { font-weight:800; font-size:14px; margin-bottom:3px; }
.fr-quest-goal { font-size:12.5px; color:var(--text-dim,#9aa0b4); margin-bottom:8px; }
.fr-quest-bar { height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:10px; }
.fr-quest-bar > span { display:block; height:100%; background:linear-gradient(90deg,#ff8a3d,#ffd23d); transition:width .4s var(--ease); }
.fr-quest-actions { display:flex; gap:8px; }
.fr-quest-pick-title { font-weight:800; font-size:15px; margin-bottom:2px; }
.fr-quest-pick-sub { font-size:12.5px; color:var(--text-dim,#9aa0b4); margin-bottom:12px; }
.fr-quest-preset { display:block; width:100%; text-align:left; padding:12px 14px; margin-bottom:8px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:var(--surface-2,#15151f); color:var(--text,#fff); font-weight:700; font-size:14px; cursor:pointer; }
.fr-quest-preset:hover { border-color:#ff8a3d; }

/* Friend activity feed */
.fr-share { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--text-dim,#9aa0b4); padding:8px 10px; margin-bottom:10px; background:var(--surface-2,#15151f); border-radius:10px; }
.fr-feed-row { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid rgba(255,255,255,.05); }
.fr-feed-text { flex:1; min-width:0; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; }
.fr-feed-time { font-size:11px; color:var(--text-dim,#9aa0b4); flex-shrink:0; }

/* Leagues */
.lg-tier { text-align:center; font-size:15px; margin:6px 0 10px; }
.lg-banner { text-align:center; font-weight:800; font-size:13.5px; padding:9px 12px; border-radius:10px; margin-bottom:12px; }
.lg-banner.up { background:rgba(80,200,120,.14); color:#4ecb7d; }
.lg-banner.down { background:rgba(255,90,90,.12); color:#ff6b6b; }
.lb-row.promo { border-left:3px solid #4ecb7d; }
.lb-row.demo { border-left:3px solid #ff6b6b; }

/* ═══ FRIENDS — full-page, Duolingo-style (Oryon palette) ═══ */
.fr-wrap { max-width: 600px; margin: 0 auto; padding: 18px 14px 90px; }

/* hero header */
.fr-hero { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.fr-hero-ic { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-size:28px;
  background:var(--accent-bg); border:1px solid var(--accent-border); }
.fr-hero-t { font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.fr-hero-s { font-size:13.5px; color:var(--text2); margin-top:2px; }

/* pill tab bar (horizontal scroll) */
.fr-tabs { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 12px; margin-bottom:6px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.fr-tabs::-webkit-scrollbar { display:none; }
.fr-tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px;
  border:1.5px solid var(--border2); background:var(--bg3); color:var(--text2);
  font-size:14px; font-weight:700; cursor:pointer; transition:.15s; white-space:nowrap; }
.fr-tab:hover { border-color:var(--border3); color:var(--text); }
.fr-tab.on { background:var(--accent-bg); border-color:var(--accent-border); color:var(--accent2); }
.fr-badge { display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:800; }

/* rows as cards */
.fr-row { display:flex; align-items:center; gap:13px; padding:13px 15px; margin-bottom:10px;
  background:var(--bg3); border:1.5px solid var(--border2); border-radius:16px; transition:.12s; }
.fr-row:hover { border-color:var(--border3); }
.fr-av { flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-size:22px; background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent2); font-weight:800; }
.fr-nick { flex:1; min-width:0; font-size:16px; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* round icon action buttons */
.fr-quest-btn, .fr-block, .fr-x { flex:0 0 auto; width:38px; height:38px; border-radius:12px; border:1.5px solid var(--border2);
  background:var(--bg4); color:var(--text2); font-size:15px; cursor:pointer; display:grid; place-items:center; transition:.12s; padding:0; }
.fr-quest-btn:hover { border-color:var(--accent-border); background:var(--accent-bg); }
.fr-x:hover { border-color:var(--red-border); background:var(--red-bg); }
.fr-block:hover { border-color:var(--amber-border); }

/* Duolingo-style buttons (bold, rounded, 3D bottom shadow) */
.fr-body .btn-sm { padding:9px 16px; border-radius:12px; border:none; font-size:13.5px; font-weight:800; cursor:pointer;
  background:var(--bg5); color:var(--text); box-shadow:0 3px 0 rgba(0,0,0,.28); transition:.1s; }
.fr-body .btn-sm:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.28); }
.fr-body .btn-sm.primary { background:var(--accent); color:#fff; box-shadow:0 3px 0 #5a4fd0; }
.fr-body .btn-sm.primary:active { box-shadow:0 1px 0 #5a4fd0; }
.fr-body .btn-sm.ghost { background:transparent; border:1.5px solid var(--border3); box-shadow:none; color:var(--text2); }

/* status tag */
.fr-tag { font-size:12px; font-weight:800; padding:5px 11px; border-radius:999px; background:var(--bg4); color:var(--text2); }
.fr-tag.ok { background:var(--green-bg); color:var(--green); border:1px solid var(--green-border); }

/* section labels within a tab (Incoming / Sent) */
.fr-section-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text3); margin:16px 4px 8px; }

/* empty state */
.fr-empty { text-align:center; padding:44px 24px; color:var(--text2); font-size:14.5px; line-height:1.5;
  background:var(--bg3); border:1.5px dashed var(--border2); border-radius:18px; }

/* search input on Add tab */
.fr-body .input, #fr-search { width:100%; padding:14px 16px; border-radius:14px; border:1.5px solid var(--border2);
  background:var(--bg3); color:var(--text); font-size:16px; margin-bottom:14px; }
.fr-body .input:focus, #fr-search:focus { outline:none; border-color:var(--accent-border); background:var(--bg2); }

/* streak badge on friend rows */
.fr-streak { font-size:12px; font-weight:800; padding:5px 10px; border-radius:999px; white-space:nowrap; flex-shrink:0;
  background:var(--amber-bg); color:#f5b841; border:1px solid var(--amber-border); }
.fr-streak.safe { background:rgba(255,138,61,.14); color:#ff8a3d; border-color:rgba(255,138,61,.3); }
.fr-streak.risk { background:rgba(255,210,61,.16); color:#ffd23d; border-color:rgba(255,210,61,.3); animation:frPulse 1.8s ease-in-out infinite; }

/* feed */
.fr-share { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px; margin-bottom:14px;
  background:var(--accent-bg); border:1.5px solid var(--accent-border); border-radius:14px; font-size:13px; color:var(--text); }
.fr-feed-row { display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:9px;
  background:var(--bg3); border:1.5px solid var(--border2); border-radius:14px; }
.fr-feed-text { flex:1; min-width:0; font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; }
.fr-feed-time { font-size:11.5px; color:var(--text3); flex-shrink:0; }

/* quests */
.fr-quest-card { background:var(--bg3); border:1.5px solid var(--border2); border-radius:16px; padding:15px 16px; margin-bottom:11px; }
.fr-quest-card.done { background:rgba(52,217,122,.07); border-color:var(--green-border); }
.fr-quest-head { font-weight:800; font-size:15px; margin-bottom:4px; color:var(--text); }
.fr-quest-goal { font-size:13px; color:var(--text2); margin-bottom:10px; }
.fr-quest-bar { height:10px; border-radius:999px; background:var(--bg5); overflow:hidden; margin-bottom:12px; }
.fr-quest-bar > span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),#a89eff); transition:width .5s var(--ease); }
.fr-quest-actions { display:flex; gap:9px; }
.fr-quest-pick-title { font-weight:800; font-size:17px; margin-bottom:3px; color:var(--text); }
.fr-quest-pick-sub { font-size:13px; color:var(--text2); margin-bottom:14px; }
.fr-quest-preset { display:block; width:100%; text-align:left; padding:15px 16px; margin-bottom:10px;
  border:1.5px solid var(--border2); border-radius:14px; background:var(--bg3); color:var(--text); font-weight:800; font-size:15px; cursor:pointer; transition:.12s; }
.fr-quest-preset:hover { border-color:var(--accent-border); background:var(--accent-bg); }

/* Friend row: two-line main block + tighter icon buttons (mobile-safe) */
.fr-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fr-main .fr-nick { flex:none; font-size:16px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-sub { font-size:12px; font-weight:700; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-sub.safe { color:#ff8a3d; }
.fr-sub.risk { color:#ffd23d; }
.fr-row .fr-quest-btn, .fr-row .fr-block, .fr-row .fr-x { width:34px; height:34px; font-size:14px; }
.fr-row { gap:10px; }

/* tappable friend-row area (avatar + name -> opens profile) */
.fr-rowtap { flex:1; min-width:0; display:flex; align-items:center; gap:13px; cursor:pointer; }

/* ═══ FRIEND PROFILE (Duolingo-style) ═══ */
.pf-wrap { max-width:600px; margin:0 auto; padding:14px 14px 90px; }
.pf-back { background:none; border:none; color:var(--accent2); font-size:15px; font-weight:700; cursor:pointer; padding:6px 0; margin-bottom:6px; }
.pf-loading { text-align:center; color:var(--text2); padding:40px; }
.pf-hero { display:flex; flex-direction:column; align-items:center; text-align:center; padding:14px 0 22px; }
.pf-av { width:88px; height:88px; border-radius:50%; display:grid; place-items:center; font-size:44px;
  background:var(--accent-bg); border:2px solid var(--accent-border); margin-bottom:12px; }
.pf-name { font-size:23px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.pf-you { font-size:12px; font-weight:800; color:var(--accent2); background:var(--accent-bg); padding:2px 9px; border-radius:999px; vertical-align:middle; }
.pf-since { font-size:13px; color:var(--text2); margin-top:4px; }
.pf-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.pf-tile { background:var(--bg3); border:1.5px solid var(--border2); border-radius:16px; padding:16px; text-align:center; }
.pf-tile-ic { font-size:22px; margin-bottom:6px; }
.pf-tile-val { font-size:22px; font-weight:800; color:var(--text); line-height:1.1; }
.pf-tile-lbl { font-size:12px; color:var(--text2); margin-top:3px; font-weight:600; }
.pf-week { text-align:center; font-size:14px; color:var(--text2); margin-bottom:18px; }
.pf-week b { color:var(--text); }
.pf-section-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text3); margin:6px 4px 10px; }
.pf-badges { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.pf-badge { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:24px;
  background:var(--bg3); border:1.5px solid var(--border2); }
.pf-actions { display:flex; flex-direction:column; gap:10px; }
.pf-actions .btn-sm { padding:14px; border-radius:14px; border:none; font-size:15px; font-weight:800; cursor:pointer;
  background:var(--accent); color:#fff; box-shadow:0 3px 0 #5a4fd0; }
.pf-actions .btn-sm:active { transform:translateY(2px); box-shadow:0 1px 0 #5a4fd0; }

/* ═══ IN-APP BOTTOM-SHEET DIALOG (replaces native confirm/prompt) ═══ */
.ui-sheet-scrim { position:fixed; inset:0; z-index:10000; background:rgba(4,4,10,.55);
  display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .18s var(--ease); }
.ui-sheet-scrim.open { opacity:1; }
.ui-sheet { width:100%; max-width:520px; background:var(--bg2); border:1px solid var(--border2); border-bottom:none;
  border-radius:22px 22px 0 0; padding:24px 20px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .22s cubic-bezier(.2,.9,.3,1); box-shadow:0 -8px 40px rgba(0,0,0,.45); }
.ui-sheet-scrim.open .ui-sheet { transform:translateY(0); }
@media (min-width:560px){ .ui-sheet-scrim{ align-items:center; } .ui-sheet{ border-radius:22px; border-bottom:1px solid var(--border2); } }
.ui-sheet-title { font-size:19px; font-weight:800; color:var(--text); letter-spacing:-.01em; }
.ui-sheet-body { font-size:14px; color:var(--text2); margin-top:8px; line-height:1.5; }
.ui-sheet-input { width:100%; margin-top:16px; padding:14px 16px; border-radius:14px; border:1.5px solid var(--border2);
  background:var(--bg3); color:var(--text); font-size:16px; }
.ui-sheet-input:focus { outline:none; border-color:var(--accent-border); }
.ui-sheet-actions { display:flex; gap:10px; margin-top:20px; }
.ui-sheet-btn { flex:1; padding:14px; border-radius:14px; border:none; font-size:15px; font-weight:800; cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.3); transition:.1s; }
.ui-sheet-btn:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.3); }
.ui-sheet-btn.primary { background:var(--accent); color:#fff; box-shadow:0 3px 0 #5a4fd0; }
.ui-sheet-btn.primary:active { box-shadow:0 1px 0 #5a4fd0; }
.ui-sheet-btn.danger { background:#e05656; color:#fff; box-shadow:0 3px 0 #a83f3f; }
.ui-sheet-btn.danger:active { box-shadow:0 1px 0 #a83f3f; }
.ui-sheet-btn.ghost { background:var(--bg4); color:var(--text2); box-shadow:none; border:1.5px solid var(--border2); }

/* ═══ Your-own-profile header on the Friends page ═══ */
.fr-mecard { display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:16px; cursor:pointer;
  background:linear-gradient(135deg,var(--accent-bg),var(--bg3)); border:1.5px solid var(--accent-border); border-radius:18px; transition:.12s; }
.fr-mecard:active { transform:scale(.99); }
.fr-me-av { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:26px;
  background:var(--bg2); border:2px solid var(--accent-border); flex-shrink:0; }
.fr-me-info { flex:1; min-width:0; }
.fr-me-nick { font-size:17px; font-weight:800; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-me-stats { font-size:13px; font-weight:600; color:var(--text2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-me-chev { font-size:24px; color:var(--text3); flex-shrink:0; }

/* tappable badge + up-close badge sheet */
.pf-badge { cursor:pointer; transition:.1s; }
.pf-badge:active { transform:scale(.9); }
.badge-big { font-size:72px; line-height:1; margin-bottom:10px; }

/* badges now render real artwork (badgeArtHtml) — wrapper is bare */
.pf-badges .pf-badge { background:none; border:none; padding:0; width:auto; height:auto; line-height:0; }
.badge-big { display:flex; justify-content:center; }

/* ═══ upgraded celebrate centrepiece (streaks + badges + quests) ═══ */
.celebrate-center { position:fixed; top:38%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; z-index:3001; }
.celebrate-emoji { font-size:96px; line-height:1; filter:drop-shadow(0 10px 34px rgba(124,111,247,.55));
  animation:celebrate-pop3d .62s cubic-bezier(.2,1.5,.4,1) both; }
.celebrate-art { width:124px; height:124px; border-radius:50%; object-fit:cover; box-shadow:0 10px 44px rgba(124,111,247,.6);
  animation:celebrate-pop3d .62s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes celebrate-pop3d { 0%{transform:scale(.2) rotate(-18deg);opacity:0} 60%{transform:scale(1.15) rotate(6deg);opacity:1} 100%{transform:scale(1) rotate(0)} }
.celebrate-ring { position:absolute; width:120px; height:120px; border-radius:50%; border:3px solid var(--accent2); opacity:0;
  animation:celebrate-ring 1.1s ease-out .1s forwards; }
.celebrate-ring.r2 { border-color:var(--green); animation-delay:.3s; }
@keyframes celebrate-ring { 0%{transform:scale(.5);opacity:.85} 100%{transform:scale(2.7);opacity:0} }
.celebrate-rays { position:fixed; top:38%; left:50%; width:540px; height:540px; transform:translate(-50%,-50%); z-index:3000;
  background:conic-gradient(from 0deg, transparent 0 9deg, rgba(124,111,247,.15) 9deg 18deg);
  -webkit-mask:radial-gradient(circle, transparent 62px, #000 72px); mask:radial-gradient(circle, transparent 62px, #000 72px);
  animation:celebrate-rays 3.4s linear both; }
@keyframes celebrate-rays { 0%{transform:translate(-50%,-50%) rotate(0) scale(.6);opacity:0} 15%{opacity:.85} 100%{transform:translate(-50%,-50%) rotate(55deg) scale(1);opacity:0} }
.celebrate-banner { top:56%; }
@media (prefers-reduced-motion: reduce) { .celebrate-center,.celebrate-ring,.celebrate-rays,.celebrate-emoji,.celebrate-art{animation:none} }

/* ═══ FREEZE SAVE moment (ice-themed, distinct from warm celebrate) ═══ */
.freeze-frost { position:fixed; inset:0; z-index:2999; pointer-events:none;
  background:radial-gradient(circle at 50% 40%, transparent 30%, rgba(90,150,230,.10) 60%, rgba(60,110,200,.28) 100%);
  animation:freeze-frost-in .5s ease both; }
@keyframes freeze-frost-in { from{opacity:0} to{opacity:1} }
.freeze-rays { background:conic-gradient(from 0deg, transparent 0 9deg, rgba(120,180,255,.16) 9deg 18deg); }
.freeze-ring { border-color:#8fc4ff !important; }
.freeze-ring.r2 { border-color:#bfe0ff !important; }
.freeze-flake { position:absolute; top:-30px; color:#dbeeff; text-shadow:0 0 8px rgba(150,200,255,.9); opacity:.9;
  animation-name:freeze-fall; animation-timing-function:linear; animation-fill-mode:forwards; }
@keyframes freeze-fall {
  0%   { transform:translate(0,-30px) rotate(0deg); opacity:0; }
  10%  { opacity:.95; }
  100% { transform:translate(var(--drift,0), 108vh) rotate(300deg); opacity:.7; }
}
.freeze-banner { background:linear-gradient(180deg, rgba(30,50,90,.96), rgba(20,35,70,.96)) !important;
  border-color:#8fc4ff !important; color:#eaf4ff !important; box-shadow:0 14px 44px rgba(40,90,180,.5) !important; }
@media (prefers-reduced-motion: reduce) { .freeze-flake,.freeze-frost,.freeze-rays{animation:none} }
/* icy-blue glow on the freeze crystal (override the warm purple) */
.freeze-layer .celebrate-art { box-shadow:0 10px 44px rgba(90,160,255,.6); }

/* ═══ tappable streak-freeze line + explainer sheet ═══ */
.streak-fz-btn { display:flex; align-items:center; gap:5px; margin-top:5px; padding:4px 8px 4px 4px;
  background:var(--teal-bg); border:1px solid var(--teal-border); border-radius:999px;
  font-size:11px; font-weight:700; color:var(--teal); cursor:pointer; text-align:left; transition:.12s; }
.streak-fz-btn:hover { filter:brightness(1.15); }
.streak-fz-btn:active { transform:scale(.98); }
.streak-fz-chev { font-size:15px; opacity:.7; margin-left:auto; padding-left:4px; }
.fz-hero { display:flex; justify-content:center; margin-bottom:8px; }
.fz-flow { display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; margin:18px 0 14px; }
.fz-step { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:58px; }
.fz-step b { font-size:10px; font-weight:800; color:var(--text2); text-transform:uppercase; letter-spacing:.03em; }
.fz-shield { font-size:32px; line-height:38px; }
.fz-arrow { font-size:18px; color:var(--text3); align-self:flex-start; margin-top:10px; }
.fz-earn { font-size:12px; color:var(--text2); line-height:1.5; }
.fz-earn b { color:var(--text); }

/* ═══ freeze ledger — "where did my freezes go?" ═══ */
.fz-hist { margin-top:16px; text-align:left; max-height:210px; overflow-y:auto;
  border-top:1px solid var(--border); padding-top:10px; }
.fz-hist-h { font-size:10px; font-weight:800; color:var(--text3); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:6px; }
.fz-hist-load,.fz-hist-empty { font-size:12px; color:var(--text3); padding:8px 0; }
.fz-hist-row { display:flex; align-items:center; gap:9px; padding:7px 0;
  border-bottom:1px solid var(--border); }
.fz-hist-row:last-child { border-bottom:0; }
.fz-hist-icon { font-size:17px; width:22px; text-align:center; flex:none; }
.fz-hist-txt { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.fz-hist-txt b { font-size:12px; font-weight:750; color:var(--text); }
.fz-hist-txt span { font-size:11px; color:var(--text3); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.fz-hist-when { display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  font-size:12px; font-weight:800; flex:none; }
.fz-hist-when i { font-style:normal; font-size:10px; font-weight:600; color:var(--text3); }
.fz-hist-when.in   { color:var(--teal); }
.fz-hist-when.used { color:var(--text3); }

/* ═══ streak broken — the flame gutters out ═══ */
.broke-dim { position:absolute; inset:0; background:radial-gradient(circle at 50% 42%,
  rgba(60,50,45,.30) 0%, rgba(10,8,12,.66) 70%); animation:freeze-frost-in .5s ease forwards; }
.broke-flame { animation:broke-die 2.4s cubic-bezier(.4,0,.6,1) forwards; }
/* .celebrate-art ships a bouncy `celebrate-pop3d` (scale .2 -> 1.15 overshoot)
   and a purple glow — right for a win, badly wrong here: the flame would
   bounce in triumphantly and THEN gutter out. Cancel it and fade in flat.
   Also contain, not cover: the flame emblem is full-bleed art, not an avatar,
   so the inherited circle crop would slice its tips off. */
/* The flame art is dark orange on transparent. Desaturating it to grey drops
   it to near-black, which vanishes against the dim - the moment reads as an
   empty screen with a caption. Push brightness UP so it reads as ASH (pale,
   spent) rather than absent: still clearly a dead flame, but visible. */
.broke-art { animation:broke-appear .5s ease both !important;
  filter:grayscale(1) brightness(1.9) contrast(.78) opacity(.85);
  object-fit:contain !important;
  border-radius:0 !important; box-shadow:none !important; }
@keyframes broke-appear { from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }
@keyframes broke-die {
  0%   { transform:scale(1)    rotate(0deg);   opacity:1; }
  18%  { transform:scale(1.06) rotate(-3deg);  opacity:1; }
  34%  { transform:scale(.88)  rotate(2deg);   opacity:.85; }
  52%  { transform:scale(.94)  rotate(-2deg);  opacity:.6; }
  100% { transform:scale(.72)  rotate(1deg);   opacity:.22; }
}
.broke-smoke { position:absolute; left:50%; top:38%; opacity:0; filter:grayscale(1);
  animation-name:broke-smoke-rise; animation-timing-function:ease-out;
  animation-fill-mode:forwards; pointer-events:none; }
@keyframes broke-smoke-rise {
  0%   { transform:translate(-50%,0) scale(.5); opacity:0; }
  25%  { opacity:.5; }
  100% { transform:translate(calc(-50% + var(--x,0)), -170px) scale(1.5); opacity:0; }
}
.broke-banner { background:linear-gradient(180deg, rgba(44,38,52,.97), rgba(28,24,34,.97)) !important;
  border-color:rgba(160,140,170,.4) !important; color:#f2eef6 !important;
  box-shadow:0 14px 44px rgba(0,0,0,.5) !important; }
.broke-title { font-size:15px; font-weight:800; }
.broke-sub { font-size:12px; font-weight:600; opacity:.82; margin-top:3px; }
@media (prefers-reduced-motion: reduce) { .broke-smoke,.broke-flame,.broke-dim{animation:none} }

/* ── Markdown tables (CAPS content: exponent laws, trig ratios, formula sheets) ──
   The wrapper scrolls, not the page: a 3-column table on a 375px phone must never
   push the whole layout sideways. */
.md-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0 14px; }
.md-table { border-collapse: collapse; width: 100%; min-width: 320px; font-size: 13.5px; }
.md-table th, .md-table td {
  border: 1px solid var(--border);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;          /* aᵐ × aⁿ = aᵐ⁺ⁿ must not wrap mid-expression */
}
.md-table th { background: var(--surface2); font-weight: 700; color: var(--text); }
.md-table td { color: var(--text2); }
.md-table tr:nth-child(even) td { background: rgba(127, 127, 127, .05); }
.md-h { margin: 14px 0 6px; color: var(--text); }
.md-list { margin: 6px 0 10px 18px; }
.md-list li { margin: 3px 0; color: var(--text2); line-height: 1.55; }
/* Rendered markdown. The global reset zeroes every margin, so without these
   an explanation arrives as one unbroken wall of text. */
.md > p { margin: 0 0 10px; line-height: 1.65; }
.md > p:last-child { margin-bottom: 0; }
.md > :first-child { margin-top: 0; }
.md-rule { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* ── Notebook shelf ── */
.bd-books-btn { display:flex; align-items:center; gap:6px; max-width:180px; }
.bd-books-name { font-size:11.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The top bar is tight on a phone: the icon alone says "notebooks", and the
   name is already the shelf's first row. */
@media (max-width:900px) { .bd-books-name { display:none; } .bd-books-btn { max-width:none; } }
.bd-shelf {
  margin:0 0 10px; padding:14px 16px; border-radius:14px;
  background:var(--bg2); border:1px solid var(--border);
}
.bd-shelf-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.bd-shelf-title { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); }
.bd-shelf-actions { display:flex; align-items:center; gap:8px; }
.bd-shelf-list { display:flex; flex-direction:column; gap:2px; max-height:38vh; overflow-y:auto; }
.bd-shelf-item { display:flex; align-items:center; gap:2px; border-radius:10px; }
.bd-shelf-item:hover, .bd-shelf-current { background:rgba(139,92,246,.1); }
.bd-shelf-open {
  flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  background:none; border:none; cursor:pointer; text-align:left; padding:9px 10px; font:inherit; color:var(--text);
}
.bd-shelf-name { font-size:13px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-shelf-meta { font-size:10.5px; color:var(--text3); }
.bd-shelf-act {
  flex-shrink:0; background:none; border:none; cursor:pointer; color:var(--text4);
  font-size:12px; padding:6px; border-radius:8px;
}
.bd-shelf-act:hover { color:var(--text); background:rgba(139,92,246,.16); }
.bd-shelf-empty { font-size:12px; color:var(--text3); padding:8px 2px; }

/* ── Writing on a worksheet ── */
.bd-pdf-modal { width:520px; }
.bd-pdf-list { display:flex; flex-direction:column; gap:4px; max-height:46vh; overflow-y:auto; margin-top:4px; }
.bd-pdf-item {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg3); cursor:pointer; font:inherit; color:var(--text);
}
.bd-pdf-item:hover { border-color:rgba(139,92,246,.5); background:rgba(139,92,246,.08); }
.bd-pdf-icon { font-size:18px; flex-shrink:0; }
.bd-pdf-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.bd-pdf-name { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-pdf-meta { font-size:11px; color:var(--text3); }
.bd-pdf-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.md em { font-style: italic; }
.md a { color: #a78bfa; text-decoration: underline; overflow-wrap: anywhere; }
/* Caret exponents rendered as real superscripts (8^(2/3) -> 8²ᐟ³-style). */
.md-table sup, .exp-body sup, .chat-msg sup, .rev-explain-body sup { font-size: .72em; line-height: 0; }

/* ── NOTEBOOK REFERENCE PANE — pin a paper beside your working ────────────── */
.bd-work-row { flex:1; display:flex; min-height:0; gap:8px; }
/* Widen the page only while split, so a single-surface session stays centred. */
.bd-write-page:has(.bd-work-split) { max-width:1180px; }
.bd-work-split .bd-surface { flex:1 1 55%; }

.bd-ref-pane {
  flex:0 0 44%; min-width:0; display:flex; flex-direction:column; min-height:0;
  margin:0 4px; border-radius:14px; border:1px solid var(--border1);
  background:var(--surface); overflow:hidden;
}
.bd-ref-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 12px; border-bottom:1px solid var(--border1); flex:0 0 auto;
}
.bd-ref-title { font-size:12.5px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-ref-x { font-size:11px; font-weight:600; color:var(--accent2); background:none; border:none; cursor:pointer; padding:4px 8px; border-radius:6px; }
.bd-ref-x:hover { background:var(--bg4); }
.bd-ref-body { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; }
.bd-ref-img { width:100%; height:auto; display:block; }
.bd-ref-pdf { width:100%; height:100%; border:0; }
.bd-ref-text { padding:12px 14px; font-size:13.5px; line-height:1.6; color:var(--text2); }
.bd-ref-loading, .bd-ref-empty { padding:20px 14px; font-size:12.5px; color:var(--text3); text-align:center; }

.bd-ref-picker { display:flex; flex-direction:column; padding:8px; gap:6px; }
.bd-ref-item {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:9px 10px; border-radius:9px; border:1px solid var(--border1);
  background:var(--bg); cursor:pointer;
}
.bd-ref-item:hover { border-color:var(--accent2); background:var(--bg4); }
.bd-ref-item-title { font-size:12.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-ref-item-badge {
  flex:0 0 auto; font-size:9.5px; font-weight:700; text-transform:capitalize;
  padding:2px 7px; border-radius:20px; background:var(--bg4); color:var(--text2);
}
.bd-ref-past_paper { background:rgba(236,72,153,.15); color:#ec4899; }
.bd-ref-revision  { background:rgba(239,68,68,.14);  color:#ef4444; }

/* Mobile stacking retired in favour of the Working/Reference TABS (<=1100px):
   a 42%-height pane above the canvas was too small to read and pushed the
   canvas half off-screen - full-width tabs replaced it. */

/* Reference toggle is a LABELLED button, not a 32px icon square (which clipped
   the word and collided with the timer). */
.bd-ref-toggle {
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  height:32px; padding:0 11px; border:none; border-radius:8px;
  background:var(--bg3); color:var(--text3); cursor:pointer;
  font-size:12.5px; font-weight:600; transition:all .15s;
}
.bd-ref-toggle:hover { background:var(--bg4); color:var(--text); }
.bd-ref-toggle.active { background:var(--accent2); color:#fff; }
@media (max-width: 460px) { .bd-ref-toggle-tx { display:none; } .bd-ref-toggle { padding:0 9px; } }

/* ── Notebook maths marking result ─────────────────────────────────────────── */
.bd-mark-wrap { flex:1; overflow:auto; -webkit-overflow-scrolling:touch; max-width:640px; margin:0 auto; width:100%; padding:8px 4px 0; display:flex; flex-direction:column; }
.bd-mark-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border:1.5px solid; border-radius:14px; background:var(--surface);
}
.bd-mark-verdict { font-size:17px; font-weight:800; }
.bd-mark-score { font-size:26px; font-weight:800; line-height:1; }
.bd-mark-score span { font-size:15px; opacity:.6; font-weight:600; }
.bd-mark-sub { font-size:12px; color:var(--text3); margin:8px 2px 0; }
.bd-mark-fb { margin:14px 0; font-size:14px; line-height:1.6; color:var(--text); }
.bd-mark-model { margin-top:6px; border-top:1px solid var(--border1); padding-top:12px; }
.bd-mark-model-h { font-size:11.5px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.bd-mark-steps { margin:0 0 0 18px; padding:0; }
.bd-mark-steps li { font-size:13.5px; line-height:1.6; color:var(--text2); margin:3px 0; }
.bd-mark-note { margin:16px 0; padding:12px 14px; border-radius:11px; background:var(--bg3); font-size:13px; color:var(--text2); line-height:1.55; }

/* ── Notebook: confirm-the-transcription (OCR accuracy recovery) ──────────── */
.bd-confirm-wrap { flex:1; display:flex; flex-direction:column; min-height:0; max-width:640px; margin:0 auto; width:100%; padding:8px 4px 0; }
.bd-confirm-note { font-size:12.5px; color:var(--text3); line-height:1.5; margin-bottom:10px; padding:0 2px; }
.bd-confirm-ta {
  flex:1; min-height:0; width:100%; resize:none; padding:14px;
  border:1px solid var(--border1); border-radius:14px; background:var(--bd-paper, var(--bg));
  color:var(--text); font-size:15px; line-height:1.7; font-family:inherit;
}
.bd-confirm-ta:focus { outline:none; border-color:var(--accent2); }
/* PDF reference: embed attempt + always-available open-in-tab escape hatch */
.bd-ref-pdfwrap { display:flex; flex-direction:column; height:100%; }
.bd-ref-pdfwrap .bd-ref-pdf { flex:1; min-height:0; }
.bd-ref-pdfbar { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 12px; border-top:1px solid var(--border1); font-size:11.5px; color:var(--text3); }
.bd-ref-open { color:var(--accent2); font-weight:600; text-decoration:none; }
/* Add-page also in the toolbar: the bottom button sits below the page and is
   invisible on phones until you scroll past everything. */
.cv-toolbar-addpage { order:99; margin-left:auto; }

/* ── Progress redesign: plain tiles + ranked subjects + tap-to-explain ─────── */
.ins-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.ins-tile { border:1px solid var(--border1); background:var(--surface); border-radius:14px;
  padding:14px 8px; text-align:center; cursor:pointer; transition:transform .12s var(--ease); }
.ins-tile:active { transform:scale(.97); }
.ins-tile-n { font-size:26px; font-weight:800; line-height:1.1; }
.ins-tile-l { font-size:12px; font-weight:700; color:var(--text); margin-top:3px; }
.ins-tile-s { font-size:10px; color:var(--text3); margin-top:1px; }

.ins-subj-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 2px; border:none; background:none; cursor:pointer; border-bottom:1px solid var(--border1); }
.ins-subj-row:last-child { border-bottom:none; }
.ins-subj-name { flex:0 0 32%; font-size:12.5px; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ins-subj-bar { flex:1; height:8px; border-radius:4px; background:var(--bg4); overflow:hidden; }
.ins-subj-bar span { display:block; height:100%; border-radius:4px; transition:width .5s var(--ease); }
.ins-subj-pct { flex:0 0 38px; text-align:right; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.ins-subj-flag { flex:0 0 auto; font-size:9.5px; font-weight:700; color:var(--amber);
  background:rgba(245,184,65,.14); padding:2px 7px; border-radius:20px; }

#ins-sheet { position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-end; justify-content:center; }
.ins-sheet-back { position:absolute; inset:0; background:rgba(0,0,0,.55); }
.ins-sheet-card { position:relative; width:100%; max-width:520px; background:var(--surface);
  border-radius:18px 18px 0 0; border:1px solid var(--border1); padding:18px 18px 22px;
  animation:insSheetUp .22s ease; }
@keyframes insSheetUp { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
.ins-sheet-title { font-size:17px; font-weight:800; color:var(--text); margin-bottom:12px; }
.ins-sheet-row { display:flex; flex-direction:column; gap:2px; padding:8px 0; border-top:1px solid var(--border1); }
.ins-sheet-row b { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); }
.ins-sheet-row span { font-size:13.5px; color:var(--text2); line-height:1.55; }
@media (min-width:700px) { #ins-sheet { align-items:center; } .ins-sheet-card { border-radius:18px; } }
/* Headline readiness ring — the one ring that answers "am I okay?" */
.ins-headline { display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  border:1px solid var(--border1); background:var(--surface); border-radius:16px;
  padding:14px 16px; margin-bottom:14px; cursor:pointer; }
.ins-headline-t { font-size:14px; font-weight:800; color:var(--text); }
.ins-headline-trend { font-size:13px; color:var(--text2); margin-top:4px; line-height:1.5; }
.ins-headline-hint { font-size:10.5px; color:var(--text4); margin-top:6px; }
.ins-focus-go { margin-top:8px; width:100%; }
/* Topic term picker + moved badge */
.topic-term-pick { font-size:10.5px; padding:1px 4px; border-radius:6px; border:1px solid var(--border1);
  background:var(--bg3); color:var(--text2); cursor:pointer; }
.topic-moved-badge { font-size:9px; font-weight:700; color:var(--accent2);
  background:rgba(124,108,255,.14); padding:1px 6px; border-radius:10px; }
/* Reference pane: video + open-in-tab card */
.bd-ref-vid { width:100%; height:auto; display:block; background:#000; }
.bd-ref-tabcard { padding:20px 14px; text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center; }
.bd-ref-tabcard-t { font-size:13px; font-weight:700; color:var(--text); overflow-wrap:anywhere; }
.bd-ref-tabcard-s { font-size:11.5px; color:var(--text3); }
/* Friend Clash: head-to-head race bars */
.fr-clash { border-left:3px solid var(--amber); }
.fr-clash-clock { font-size:11px; color:var(--amber); font-weight:700; }
.fr-clash-row { display:flex; align-items:center; gap:8px; margin:5px 0; font-size:12.5px; }
.fr-clash-name { flex:0 0 72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text2); }
.fr-clash-bar { flex:1; height:9px; border-radius:5px; background:var(--bg4); overflow:hidden; }
.fr-clash-bar span { display:block; height:100%; border-radius:5px; transition:width .5s var(--ease); }
/* Review: reason-coded chips + honest skip note */
.rev-chip-mistake { border-color:var(--accent-border); }
.rev-chip-weak    { border-color:rgba(245,184,65,.4); }
.rev-skipnote { font-size:12px; color:var(--text3); line-height:1.5; margin:2px 0 10px; }
/* Recall: session-complete card */
.rc-done-card { max-width:460px; margin:40px auto; text-align:center; padding:26px 20px;
  border:1px solid var(--border1); border-radius:18px; background:var(--surface); }
.rc-done-emoji { font-size:44px; }
.rc-done-title { font-size:18px; font-weight:800; color:var(--text); margin-top:8px; }
.rc-done-sub { font-size:12.5px; color:var(--text3); line-height:1.55; }
.rc-pill-red { background:rgba(239,68,68,.14); color:#ef4444; }
/* Mind map: editor + own-maps */
.mm2-hero-actions { display:flex; flex-direction:column; gap:6px; }
.mm-editor { max-width:560px; margin:0 auto; padding:6px 2px 30px; }
.mm-editor-title { font-size:16px; font-weight:800; color:var(--text); margin-bottom:12px; }
.mm-ed-label { display:block; font-size:10.5px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--text3); margin-bottom:6px; }
.mm-ed-branch { border:1px solid var(--border1); border-radius:12px; padding:10px; margin-bottom:10px; background:var(--surface); }
.mm-ed-branch-row { display:flex; gap:8px; margin-bottom:8px; }
.mm-ed-branch-row .input { flex:1; }
.mm-ed-del { flex:0 0 34px; border:none; border-radius:8px; background:var(--bg3); color:var(--text3); cursor:pointer; }
.mm-ed-del:hover { background:rgba(239,68,68,.15); color:#ef4444; }
.mm-ed-details { width:100%; resize:vertical; font-size:12.5px; }
/* Quests tab: prominent challenge CTAs */
.fr-challenge-bar { display:flex; gap:10px; margin-bottom:12px; }
.fr-challenge-btn { flex:1; padding:12px 8px; border-radius:12px; border:1px solid var(--border1);
  background:var(--surface); color:var(--text); font-size:13px; font-weight:700; cursor:pointer; }
.fr-challenge-clash { border-color:rgba(245,184,65,.45); }
.fr-challenge-btn:active { transform:scale(.97); }
/* Mind map: labeled action bar (icons alone proved invisible) */
.mm2-action-bar { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.mm2-action { padding:9px 14px; border-radius:10px; border:1px solid var(--border1);
  background:var(--surface); color:var(--text); font-size:12.5px; font-weight:600; cursor:pointer; }
.mm2-action:active { transform:scale(.97); }
/* Voice typing mic */
.mic-btn { flex:0 0 38px; height:38px; border:1px solid var(--border1); border-radius:10px;
  background:var(--bg3); cursor:pointer; font-size:16px; }
.mic-btn.mic-live { background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.5); animation:micPulse 1s infinite; }
@keyframes micPulse { 50% { transform:scale(1.08); } }
/* My Maps picker cards */
.mm-mymaps { max-width:560px; margin:0 auto; padding:6px 2px 30px; }
.mm-mymap-card { display:block; width:100%; text-align:left; padding:14px;
  border:1px solid var(--border1); border-radius:12px; background:var(--surface);
  margin-bottom:10px; cursor:pointer; }
.mm-mymap-card:active { transform:scale(.98); }
.mm-mymap-t { font-size:14px; font-weight:700; color:var(--text); }
.mm-mymap-s { font-size:11.5px; color:var(--text3); margin-top:3px; }
/* Visual summary: prove-it screen */
.vs-proveit { max-width:520px; margin:20px auto; padding:20px;
  border:1px solid var(--border1); border-radius:16px; background:var(--surface); }
.vs-proveit-t { font-size:17px; font-weight:800; color:var(--text); }
.vs-proveit-s { font-size:12.5px; color:var(--text3); margin:6px 0 14px; line-height:1.5; }
.vs-check { border-top:1px solid var(--border1); padding:12px 0; }
.vs-check-q { font-size:13.5px; font-weight:600; color:var(--text); margin-bottom:8px; }
.vs-check-a { font-size:13px; color:var(--green); line-height:1.5; }
.vs-proveit-row { display:flex; gap:10px; margin-top:16px; }
/* Recall typed answer */
.rc-type-row { display:flex; gap:8px; align-items:flex-start; margin:10px 0; }
.rc-typed { flex:1; resize:none; }
.rc-mine { border:1px dashed var(--border1); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.rc-mine-text { font-size:13px; color:var(--text2); line-height:1.5; }
.mh-back-tools, .mh-back { }
/* Teacher's method toggle */
.mh-mtoggle { display:flex; gap:8px; margin-bottom:12px; }
.mh-mtoggle-btn { flex:1; padding:9px 10px; border-radius:10px; border:1px solid var(--border1);
  background:var(--surface); color:var(--text2); font-size:12px; font-weight:700; cursor:pointer; }
.mh-mtoggle-btn.active { border-color:var(--accent2); color:var(--text); background:var(--bg3); }
.mh-teacher-method { border-left:3px solid var(--accent2); background:var(--surface);
  border-radius:10px; padding:12px 14px; font-size:13.5px; line-height:1.7; color:var(--text2); margin-bottom:10px; }
/* Session-complete celebration: opaque takeover (Duolingo-style) */
.celebrate-solid { background:var(--bg); pointer-events:auto; }
.celebrate-solid .celebrate-rays { opacity:1; }
/* Flashcard feedback: the correct answer, unmissable + bad-card escape hatch */
.fc-feedback-correct-ans { border:1px solid rgba(52,217,122,.4); background:rgba(52,217,122,.08);
  border-radius:10px; padding:10px 12px; margin:10px 0; font-size:14px; color:var(--text); line-height:1.5; }
.fc-fa-label { display:block; font-size:9.5px; font-weight:800; letter-spacing:.6px; color:var(--green); margin-bottom:3px; }
.fc-badcard-btn { display:block; margin:10px auto 0; background:none; border:none; color:var(--text4);
  font-size:11px; cursor:pointer; text-decoration:underline; }
.fc-badcard-btn:hover { color:#ef4444; }
/* Fixing a card sits beside removing it: a cut-off or badly worded card is
   usually worth repairing rather than losing. */
.fc-card-fixes { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:10px; }
.fc-card-fixes .fc-badcard-btn { margin:0; }
.fc-card-fixes .fc-badcard-btn:first-child:hover { color:#a78bfa; }
.fc-edit-modal { width:520px; display:flex; flex-direction:column; }
.fc-edit-label { display:block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text3); margin:14px 0 6px; }
.fc-edit-hint { text-transform:none; letter-spacing:0; font-weight:500; color:var(--text4); }
.fc-edit-input { width:100%; resize:vertical; font-size:13.5px; line-height:1.55; }
.fc-edit-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
/* Leaderboard: overtake climb animation + banner */
.lb-overtake { display:flex; align-items:center; justify-content:center; gap:8px;
  text-align:left; font-size:13px; font-weight:800; color:var(--green);
  background:rgba(52,217,122,.1); border:1px solid rgba(52,217,122,.3);
  border-radius:10px; padding:7px 12px; margin-bottom:10px; animation:lbBannerIn .4s ease; }
.lb-overtake .ory { flex:none; margin:-6px 0; }
/* Holding first place is a POSITION, not an achievement, so the rank numeral
   gives way to him rather than sitting beside it. */
.lb-spot-ory { flex:none; display:flex; margin:-10px -2px -12px 0; line-height:0; }
@keyframes lbBannerIn { from { transform:translateY(-8px); opacity:0; } to { transform:none; opacity:1; } }
.lb-climb { animation:lbClimb .9s cubic-bezier(.2,.9,.3,1.2); position:relative; z-index:2; }
@keyframes lbClimb {
  0%   { transform:translateY(calc(var(--climb, 1) * 46px)); box-shadow:0 6px 24px rgba(52,217,122,.35); }
  70%  { transform:translateY(-4px); }
  100% { transform:none; box-shadow:none; }
}
/* Chat: bottom-anchor the conversation (messenger-style). With few messages
   they sat at the TOP with the input at the BOTTOM and a huge dead gap between
   (real report). margin-top:auto on the first message pushes the thread down
   when short; once content overflows, normal top-anchored scrolling wins. */
.chat-thread > :first-child { margin-top:auto; }
/* Achievements showcase: featured badges lead the profile */
.pf-badge-featured { position:relative; box-shadow:0 0 0 2px var(--amber), 0 4px 14px rgba(245,184,65,.25); border-radius:14px; }
.pf-badge-featured::after { content:'⭐'; position:absolute; top:-7px; right:-7px; font-size:13px; }
.pf-feat-hint { font-size:10px; color:var(--amber); font-weight:700; }
/* Notebook zoom: zoomed pages scroll horizontally inside the notebook, never the app */
.cv-scroll-area { overflow-x:auto; }
.cv-page-wrapper { width:100%; max-width:none; }
/* Notebook: Working/Reference tabs — full width each on cramped screens */
.bd-viewtabs { display:none; gap:8px; margin:0 4px 8px; }
.bd-viewtab { flex:1; padding:9px 8px; border-radius:10px; border:1px solid var(--border1);
  background:var(--surface); color:var(--text3); font-size:12.5px; font-weight:700; cursor:pointer; }
.bd-viewtab.active { color:var(--text); border-color:var(--accent2); background:var(--bg3); }
/* Below 1100px the side-by-side split is cramped: tabs appear and each view
   owns the full width. Wide desktop keeps the true split, tabs hidden. */
@media (max-width: 1100px) {
  .bd-viewtabs { display:flex; }
  .bd-work-split { flex-direction:column; }
  .bd-work-split.bd-view-work .bd-ref-pane { display:none; }
  .bd-work-split.bd-view-ref .bd-surface { display:none; }
  .bd-work-split.bd-view-ref .bd-ref-pane { flex:1 1 auto; order:0; }
}
/* Lasso + thumbnails */
.cv-thumbs-scrim { position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.cv-thumbs-sheet { background:var(--surface); border:1px solid var(--border1); border-radius:16px;
  padding:16px; max-width:560px; width:100%; max-height:80vh; overflow-y:auto; }
.cv-thumbs-title { font-size:15px; font-weight:800; color:var(--text); margin-bottom:12px; }
.cv-thumbs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.cv-thumb { border:1px solid var(--border1); border-radius:10px; overflow:hidden; background:var(--bg);
  cursor:pointer; padding:0; }
.cv-thumb canvas { display:block; width:100%; height:auto; }
.cv-thumb-lbl { font-size:11px; color:var(--text3); padding:6px; text-align:center; }
/* Notebook: save dialog (title + cover) */
.bd-save-title-input { width:100%; margin:10px 0 12px; padding:11px 12px; border-radius:10px;
  border:1px solid var(--border1); background:var(--bg3); color:var(--text); font-size:14px; font-weight:600; }
.bd-save-covers { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; }
.bd-save-cover { font-size:22px; padding:8px 10px; border-radius:10px; border:1.5px solid var(--border1);
  background:var(--surface); cursor:pointer; }
.bd-save-cover.on { border-color:var(--accent2); background:var(--bg3); }
.bd-h-cover { font-size:15px; }
/* Notebook: marked answer vs memo */
.bd-mark-vs { display:flex; gap:10px; margin:12px 0; }
.bd-mark-vs-col { flex:1; padding:10px 12px; border-radius:12px; background:var(--bg3); border:1px solid var(--border1); }
.bd-mark-vs-memo { border-color:var(--green); }
.bd-mark-vs-h { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text3); margin-bottom:4px; }
.bd-mark-vs-memo .bd-mark-vs-h { color:var(--green); }
.bd-mark-vs-v { font-size:14px; font-weight:700; color:var(--text); overflow-wrap:anywhere; }
.bd-card-excerpt-lbl { font-weight:800; color:var(--text3); }
/* Friend Clash: reward line */
.fr-clash-reward { font-size:12px; font-weight:700; color:var(--accent2); margin-top:6px; }
/* Clash race bars: Duolingo-feel fill animation */
.fr-clash-fill { display:block; height:100%; border-radius:inherit; transition:width 1.1s cubic-bezier(.22,1.2,.36,1); }
.clash-home .fr-clash-row { margin-top:6px; }
/* Flashcards: full-marks answer shown even when correct */
.fc-feedback-fullans { margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--bg3);
  border:1px solid var(--green); font-size:13.5px; line-height:1.55; color:var(--text); }
.fc-feedback-fullans .fc-fa-label { display:block; font-size:10px; font-weight:800; letter-spacing:.06em;
  color:var(--green); margin-bottom:4px; }
.fc-fa-gap { margin-top:8px; font-size:12.5px; color:var(--text2); }
/* Principal briefing */
.pb-hero { background:var(--bg3); border:1px solid var(--border1); border-radius:14px; padding:16px 18px; margin-bottom:16px; }
.pb-hero-eyebrow { font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); }
.pb-hero-line { font-size:19px; font-weight:800; color:var(--text); margin:6px 0 6px; line-height:1.35; }
.pb-hero-sub { font-size:13px; color:var(--text2); line-height:1.6; }
.pb-sec { margin-bottom:20px; }
.pb-sec-h { font-size:14.5px; font-weight:800; color:var(--text); margin-bottom:2px; }
.pb-sec-sub { font-size:12px; color:var(--text3); margin-bottom:10px; line-height:1.5; }
.pb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); gap:10px; }
.pb-cell { border-radius:12px; padding:12px; border:1px solid var(--border1); background:var(--surface); }
.pb-cell.bad { border-color:var(--red); }
.pb-cell.mid { border-color:var(--amber); }
.pb-cell.ok { border-color:var(--green); }
.pb-cell.thin { opacity:.62; border-style:dashed; }
.pb-cell-top { font-size:13px; font-weight:800; color:var(--text); }
.pb-cell-sub { font-size:11.5px; color:var(--text2); margin-bottom:6px; }
.pb-cell-val { font-size:22px; font-weight:800; color:var(--text); }
.pb-cell-n { font-size:10.5px; color:var(--text3); margin-top:2px; }
.pb-risk { display:flex; flex-direction:column; gap:6px; }
.pb-risk-row { display:flex; justify-content:space-between; gap:10px; align-items:center;
  background:var(--surface); border:1px solid var(--border1); border-radius:10px; padding:9px 12px; flex-wrap:wrap; }
.pb-risk-name { font-size:13px; font-weight:700; color:var(--text); }
.pb-risk-grade { font-size:11px; color:var(--text3); margin-left:8px; font-weight:600; }
.pb-risk-why { font-size:12px; color:var(--amber); font-weight:600; }
.pb-grades { display:flex; flex-direction:column; gap:7px; }
.pb-grade-row { display:flex; align-items:center; gap:10px; }
.pb-grade-lbl { font-size:12px; font-weight:700; color:var(--text2); min-width:66px; }
.pb-grade-bar { flex:1; height:9px; border-radius:5px; background:var(--bg4); overflow:hidden; }
.pb-grade-bar > span { display:block; height:100%; border-radius:5px; }
.pb-grade-n { font-size:11.5px; color:var(--text3); min-width:44px; text-align:right; }
.pb-foot { font-size:11px; color:var(--text4); text-align:center; padding:8px 0 4px; }
.src-share-btn { color:var(--accent2); font-weight:700; }
/* Ask My Teacher */
/* ── Ask a Question: a centred dialog, opaque, over a blurred app ──────
   The sheet is a conversation with a teacher - it has to be the only
   thing you are looking at. Blurring the app behind it does the work a
   dark scrim alone cannot: it removes the competing detail instead of
   just dimming it, so the eye settles on the text. */
.ask-scrim { position:fixed; inset:0; z-index:9600;
  background:rgba(8,7,14,.72);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  display:flex; align-items:center; justify-content:center;
  padding:18px; animation:askFade .18s ease both; }
@keyframes askFade { from { opacity:0 } to { opacity:1 } }

/* Centred at EVERY size. It was a bottom sheet below 700px, which on a
   phone left it clinging to the bottom edge with dead space above. */
.ask-sheet {
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:20px;
  width:100%; max-width:620px;
  height:min(78vh, 720px);          /* a real, stable shape - not one that
                                       resizes as messages arrive */
  max-height:calc(100dvh - 36px);   /* dvh: the iOS URL bar must not clip it */
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  animation:askRise .22s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes askRise { from { opacity:0; transform:translateY(10px) scale(.985) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce) {
  .ask-scrim, .ask-sheet { animation:none }
}
.ask-head { display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--border1); }
.ask-title { font-size:15px; font-weight:800; color:var(--text); flex:1; }
.ask-report { background:none; border:none; color:var(--amber); font-size:16px;
  cursor:pointer; padding:2px 8px; }
.ask-report:hover { color:var(--red); }
.ask-back, .ask-x { background:none; border:none; color:var(--text3); font-size:18px; cursor:pointer; padding:2px 8px; }
.ask-msgs { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.ask-empty { text-align:center; color:var(--text3); font-size:13px; padding:28px 10px; line-height:1.6; }
.ask-msg { display:flex; flex-direction:column; max-width:82%; }
.ask-msg.mine { align-self:flex-end; align-items:flex-end; }
.ask-msg.theirs { align-self:flex-start; }
.ask-msg-who { font-size:10.5px; font-weight:700; color:var(--text3); margin-bottom:3px; padding:0 4px; }
.ask-bubble { padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.55;
  background:var(--bg3); color:var(--text); overflow-wrap:anywhere; }
.ask-msg.mine .ask-bubble { background:var(--accent2); color:#fff; }
.ask-notice { font-size:11.5px; color:var(--text3); line-height:1.5;
  padding:9px 16px; background:var(--bg3); border-top:1px solid var(--border1); }
.ask-compose { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border1); align-items:flex-end; }
.ask-input { flex:1; resize:none; padding:9px 12px; border-radius:11px; border:1px solid var(--border1);
  background:var(--bg3); color:var(--text); font-size:13.5px; font-family:inherit; }
.ask-thread { width:100%; text-align:left; background:var(--bg3); border:1px solid var(--border1);
  border-radius:11px; padding:11px 13px; cursor:pointer; }
.ask-thread-top { display:flex; align-items:center; gap:8px; }
.ask-thread-name { font-size:13.5px; font-weight:700; color:var(--text); flex:1; }
.ask-unread { background:var(--red); color:#fff; font-size:10.5px; font-weight:800;
  border-radius:9px; padding:1px 7px; }
.ask-thread-last { font-size:12px; color:var(--text3); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* My Teachers: search + classes grid */
.mt-search-row { display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.mt-search-row .input { flex:1; }
.mt-class-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr)); gap:10px; }
.mt-class { background:var(--bg3); border:1px solid var(--border1); border-radius:11px; padding:11px 13px; }
.mt-class-name { font-size:13.5px; font-weight:800; color:var(--text); }
.mt-class-sub { font-size:11.5px; color:var(--text2); margin-top:2px; }
.mt-class-teacher { font-size:11.5px; color:var(--text3); margin-top:6px; }
/* Principal thread oversight */
.po-row { display:flex; align-items:center; gap:10px; background:var(--bg3);
  border:1px solid var(--border1); border-radius:11px; padding:10px 13px; margin-bottom:7px; cursor:pointer; width:100%; text-align:left; }
.po-learner { font-size:13.5px; font-weight:700; color:var(--text); }
.po-meta { font-size:11.5px; color:var(--text3); margin-top:2px; }
.po-count { margin-left:auto; font-size:11.5px; color:var(--text3); white-space:nowrap; }
.po-note { font-size:11.5px; color:var(--amber); background:var(--amber-bg);
  border-radius:9px; padding:8px 12px; margin-bottom:12px; line-height:1.5; }
/* Pinned nav (Settings): sits at the bottom of the scroll area, separated
   by a rule so it reads as "always here" rather than as the tail of the
   last group. */
#sb-pinned { padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--border1); }
#sb-pinned:empty { display:none; }

/* Sidebar: progressive disclosure */
/* .nav-more* removed with the More reveal it served. */
/* ── Bottom tab bar: primary nav on phone + iPad ───────────────────── */
/* Bottom tab bar + world chips: REMOVED. The side panel is the only
   navigation now, at every size. Left as display:none rather than deleted
   so any markup still in index.html cannot reappear as a stray strip. */
.tabbar, .world-chips { display:none !important; }
/* Phones only: an iPad has the width for a real rail, and staff work in it.
   Phone landscape is caught by the height rule so a wide-but-short screen
   does not get a sidebar it cannot afford. */
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {
  /* Sidebar/drawer behaviour lives in layout.css - the single owner of
     layout - so the two files cannot disagree about the same element. */
  .main { margin-left:0 !important; width:100% !important; }
  .tabbar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:900;
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--border1);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; cursor:pointer; padding:5px 2px 3px;
    color:var(--text4); transition:color .18s var(--ease); -webkit-tap-highlight-color:transparent; }
  .tab svg { width:24px; height:24px; transition:transform .18s cubic-bezier(.34,1.4,.5,1); }
  .tab span { font-size:10.5px; font-weight:600; letter-spacing:.01em; }
  .tab.on { color:var(--accent2); }
  .tab.on svg { transform:translateY(-1px) scale(1.04); }
  .tab:active svg { transform:scale(.9); }
  /* clear the bar so nothing sits under it */
  /* The tab bar is gone; only the safe-area inset needs clearing. */
  .main > .page, .main { padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}
/* ── World chips: siblings of the current page (phones) ──────────────
   These are the ONLY way to reach a world's other pages on a phone, so
   they must read as navigation, not decoration. Solid pills, real
   contrast, and a fade on the right edge so it is obvious the row keeps
   going. */
.world-chips { display:none; }
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {
  .world-chips {
    display:flex; gap:8px; overflow-x:auto; padding:10px 16px 10px;
    scrollbar-width:none; -ms-overflow-style:none;
    background:var(--bg2); border-bottom:1px solid var(--border1);
    /* fade the right edge: the row scrolls, and nothing else says so */
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  }
  .world-chips::-webkit-scrollbar { display:none; }
  .wchip {
    flex:none; padding:9px 16px; border-radius:999px;
    font-size:13.5px; font-weight:700; letter-spacing:.01em;
    border:1.5px solid var(--border1); background:var(--surface); color:var(--text);
    cursor:pointer; white-space:nowrap;
    transition:transform .14s cubic-bezier(.34,1.4,.5,1), background .16s var(--ease), border-color .16s var(--ease);
    -webkit-tap-highlight-color:transparent;
  }
  .wchip:active { transform:scale(.94); }
  .wchip.on {
    background:var(--accent2); border-color:var(--accent2); color:#fff;
    box-shadow:0 2px 10px color-mix(in srgb, var(--accent2) 40%, transparent);
  }
}

/* Link state on the Members page + roster search in My Students */
.mb-link { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:7px; }
.mb-chip { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700;
  padding:3px 5px 3px 9px; border-radius:999px; }
.mb-chip.ok { background:var(--teal-bg); color:var(--teal); }
.mb-chip.wait { background:var(--amber-bg); color:var(--amber); }
.mb-chip button { background:none; border:none; color:inherit; cursor:pointer; opacity:0.6;
  font-size:11px; padding:0 3px; line-height:1; }
.mb-chip button:hover { opacity:1; }
.mb-add { display:inline-flex; align-items:center; gap:5px; }
.mb-add select { font-size:11px; padding:3px 6px; max-width:150px; }
.mb-add .btn-sm { font-size:10px; padding:3px 9px; }
.rs-row { display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:6px;
  background:var(--bg3); border:1px solid var(--border); border-radius:10px; }
.rs-name { font-size:13px; font-weight:600; color:var(--text); }
.rs-sub { font-size:11px; color:var(--text3); }
.rs-hint { font-size:12px; color:var(--text3); padding:10px 2px; }

/* ── INSIGHTS: verdict-first ───────────────────────────────────────
   Design rule for this screen: one loud thing per block. The old version
   gave mastery, accuracy, at-risk and overdue identical size and colour, so
   a teacher had to read all four to find the one that mattered. Here the
   sentence is loud, the numbers are quiet, and colour is reserved for
   "someone needs you" rather than spent on decoration. */
.ti-hero { border-radius:16px; padding:18px 20px; margin:0 16px 18px;
  border:1px solid var(--border); background:var(--card); }
.ti-hero-line { font-size:19px; font-weight:700; color:var(--text); line-height:1.35; }
.ti-hero-line strong { font-size:24px; }
.ti-hero-sub { margin-top:6px; font-size:12.5px; color:var(--text3); }
/* A tinted left edge instead of a filled panel: legible in both themes and
   it does not shout at a teacher whose class is fine. */
.ti-hero-bad   { border-left:4px solid var(--red); }
.ti-hero-good  { border-left:4px solid var(--green); }
.ti-hero-quiet { border-left:4px solid var(--text3); }

.ti-actions { margin:0 16px 20px; }
.ti-actions-title { font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text3); margin-bottom:10px; }
.ti-action { display:flex; gap:12px; align-items:flex-start; padding:12px 14px;
  background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:8px; }
.ti-action-num { flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent-bg); color:var(--accent2); font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:1px; }
.ti-action-text { font-size:14px; color:var(--text); line-height:1.45; }
.ti-action-why { font-size:12px; color:var(--text3); margin-top:3px; line-height:1.4; }

.ti-card { display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid var(--border); border-left-width:4px;
  border-radius:16px; padding:16px 18px; font:inherit; color:inherit;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease); }
.ti-card:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.10); }
.ti-card-bad   { border-left-color:var(--red); }
.ti-card-warn  { border-left-color:var(--amber); }
.ti-card-good  { border-left-color:var(--green); }
.ti-card-quiet { border-left-color:var(--border); }
.ti-card-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.ti-card-name { font-size:17px; font-weight:700; color:var(--text); }
.ti-card-sub { font-size:12px; color:var(--text3); margin-top:2px; }
.ti-card-verdict { margin-top:12px; font-size:14.5px; font-weight:600; color:var(--text); line-height:1.4; }
.ti-card-next { margin-top:3px; font-size:13px; color:var(--text2); }
/* Evidence, deliberately quiet: there so a teacher who doubts the verdict can
   check it, not so they have to assemble it themselves. */
.ti-card-evidence { margin-top:12px; padding-top:10px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--text3); }

.ti-decomp { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  margin-top:10px; font-size:14px; color:var(--text2); }
.ti-decomp strong { color:var(--text); font-size:16px; font-weight:800; }
.ti-decomp-x { color:var(--text3); font-size:13px; }
.ti-decomp-why { margin-top:5px; font-size:11.5px; color:var(--text3); line-height:1.45; max-width:60ch; }


/* The rail is information; the choreography is not. */
@media (prefers-reduced-motion: reduce) {
  .dash-subjects-grid > .dash-sub { animation:none !important; opacity:1 !important; transform:none !important; }
  .dash-sub::after { display:none; }
  .dash-subjects-grid { scroll-behavior:auto; }
}

/* ── Vela, in the app ──────────────────────────────────────────────────────
   Positioning only. Every movement lives in js/vela.js, because the whole
   point is that it does NOT loop - a CSS keyframe by definition does. */
.vela-host { position:relative; width:56px; height:56px; flex-shrink:0; }
.vela-host .vela-star { position:absolute; left:2px; top:2px; z-index:1;
                        transform-origin:50% 50%; will-change:transform; }
.vela-host .vela-glow { position:absolute; inset:-13px; border-radius:50%; z-index:0;
  will-change:transform,opacity; opacity:.4;
  background:radial-gradient(circle,rgba(124,111,247,.5),rgba(124,111,247,0) 66%); }

/* ── The way back in ───────────────────────────────────────────────────────
   s-entry is where a NEW account is chosen. Someone who already has one needs
   a door on the same screen, and it has to stay visible when every signup path
   is closed - that is precisely when it is the only door that works. */
.auth-signin-row {
  margin-top:20px; text-align:center; font-size:13px; color:var(--text3);
}
.auth-signin-link {
  background:none; border:none; padding:0 0 0 4px; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--accent2); text-decoration:underline;
  text-underline-offset:3px;
}
.auth-signin-link:hover { color:var(--text); }

/* ═══════════════════════════════════════════════════════════════
   NOTEBOOKS — the library shelf and the full-screen editor
   ═══════════════════════════════════════════════════════════════ */
.nb-library { max-width:1100px; margin:0 auto; padding:8px 4px 40px; }
.nb-lib-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.nb-lib-title { font-size:28px; font-weight:800; letter-spacing:-.02em; margin:0; }
.nb-lib-sub { font-size:13px; color:var(--text3); margin-top:4px; }
.nb-lib-actions { display:flex; gap:10px; flex-wrap:wrap; }
.nb-btn {
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border-radius:11px;
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; border:1px solid transparent; white-space:nowrap;
}
.nb-btn-primary { background:linear-gradient(135deg,#8b5cf6,#6d28d9); color:#fff; box-shadow:0 6px 18px rgba(109,40,217,.35); }
.nb-btn-primary:hover { filter:brightness(1.08); }
.nb-btn-ghost { background:var(--bg2); color:var(--text); border-color:var(--border); }
.nb-btn-ghost:hover { border-color:rgba(139,92,246,.5); }
.nb-btn-danger { background:none; color:#ef4444; border-color:rgba(239,68,68,.35); }
.nb-btn-danger:hover { background:rgba(239,68,68,.1); }
.nb-search-row { margin-bottom:22px; }
.nb-search {
  width:100%; max-width:420px; height:40px; padding:0 14px; border-radius:11px;
  background:var(--bg2); border:1px solid var(--border); color:var(--text); font:inherit; font-size:14px;
}
.nb-loading, .nb-noresults { color:var(--text3); font-size:14px; padding:30px 4px; }

/* The shelf: covers first, as in Noteful */
.nb-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:26px 20px; }
.nb-card { display:flex; flex-direction:column; gap:10px; min-width:0; }
.nb-cover {
  position:relative; aspect-ratio:3/4; width:100%; border:none; cursor:pointer; padding:14px 14px 14px 26px;
  border-radius:6px 14px 14px 6px; text-align:left; font:inherit; overflow:hidden;
  background:linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 28px rgba(0,0,0,.35);
  display:flex; flex-direction:column; justify-content:flex-start; gap:6px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.nb-cover:hover { transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 18px 36px rgba(0,0,0,.42); }
.nb-cover-spine { position:absolute; left:0; top:0; bottom:0; width:12px; background:rgba(0,0,0,.18); box-shadow:1px 0 0 rgba(255,255,255,.12); }
.nb-cover-label {
  color:#fff; font-size:15px; font-weight:700; line-height:1.25; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.nb-cover-subject { color:rgba(255,255,255,.75); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.nb-card-meta { display:flex; align-items:flex-start; gap:6px; }
.nb-card-text { flex:1; min-width:0; }
.nb-card-title { font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nb-card-sub { font-size:11.5px; color:var(--text3); margin-top:2px; }
.nb-card-menu {
  flex-shrink:0; background:none; border:none; color:var(--text3); font-size:18px; line-height:1;
  cursor:pointer; padding:2px 6px; border-radius:8px;
}
.nb-card-menu:hover { background:var(--bg3); color:var(--text); }
.nb-empty { text-align:center; padding:60px 20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.nb-empty-icon { font-size:46px; }
.nb-empty-title { font-size:18px; font-weight:700; }
.nb-empty-sub { font-size:13.5px; color:var(--text3); max-width:360px; line-height:1.6; margin-bottom:8px; }

/* Dialogs */
.nb-modal { width:480px; }
.nb-field-label { display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text3); margin:16px 0 8px; }
.nb-modal .input { width:100%; }
.nb-cover-picker { display:flex; flex-wrap:wrap; gap:10px; }
.nb-cover-swatch {
  width:34px; height:44px; border-radius:3px 8px 8px 3px; cursor:pointer; border:2px solid transparent;
  background:linear-gradient(150deg, var(--c1), var(--c2)); box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.nb-cover-swatch.on { border-color:var(--text); transform:translateY(-2px); }
.nb-paper-picker { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; }
.nb-paper {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; border-radius:10px;
  background:none; border:1px solid var(--border); color:var(--text2); font:inherit; font-size:11.5px; cursor:pointer;
}
.nb-paper.on { border-color:#8b5cf6; background:rgba(139,92,246,.1); color:var(--text); }
.nb-paper-thumb { width:40px; height:52px; border-radius:4px; background-color:#fff; border:1px solid rgba(0,0,0,.08); }
.nb-paper-ruled { background-image:repeating-linear-gradient(transparent 0 7px, rgba(0,0,0,.14) 7px 8px); }
.nb-paper-grid { background-image:linear-gradient(rgba(0,0,0,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.12) 1px, transparent 1px); background-size:8px 8px; }
.nb-paper-dotted { background-image:radial-gradient(rgba(0,0,0,.3) 1px, transparent 1.2px); background-size:8px 8px; }
.nb-paper-cornell { background-image:linear-gradient(90deg, transparent 11px, rgba(139,92,246,.6) 11px 12px, transparent 12px), linear-gradient(transparent 40px, rgba(139,92,246,.6) 40px 41px, transparent 41px), repeating-linear-gradient(transparent 0 7px, rgba(0,0,0,.1) 7px 8px); }
.nb-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
.nb-modal-split { justify-content:space-between; }
.nb-modal-split > span { display:flex; gap:8px; }

/* The editor takes the whole screen: paper, a pen, nothing else */
body.nb-editing { overflow:hidden; }
.nb-editor { background:var(--bg); display:flex; flex-direction:column; }
.nb-editor--full { position:fixed; inset:0; z-index:650; }
/* Windowed: inside the app, the sidebar still there, the page still big. */
.nb-editor--window {
  position:relative; height:calc(100dvh - 130px); min-height:420px;
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.nb-editor--window .nb-ed-bar { padding-top:0; }
.nb-ed-mode { width:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.nb-ed-bar {
  display:flex; align-items:center; gap:10px; height:52px; padding:0 12px; flex-shrink:0;
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top); box-sizing:content-box;
}
.nb-ed-btn {
  height:34px; padding:0 12px; border-radius:9px; border:1px solid var(--border); background:var(--bg);
  color:var(--text); font:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.nb-ed-btn:hover { border-color:rgba(139,92,246,.5); }
.nb-ed-title {
  min-width:0; max-width:40vw; background:none; border:none; color:var(--text); font:inherit; font-size:15px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; padding:4px 6px; border-radius:8px;
}
.nb-ed-title:hover { background:var(--bg3); }
.nb-ed-status { font-size:11.5px; color:var(--text4); white-space:nowrap; }
.nb-ed-right { margin-left:auto; display:flex; gap:8px; }
.nb-ed-surface { flex:1; min-height:0; display:flex; flex-direction:column; }
@media (max-width:640px) {
  .nb-ed-status { display:none; }
  .nb-ed-title { max-width:34vw; }
  .nb-grid { grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:20px 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   NOTEBOOK PAPER + TOOLBAR (Noteful-style)
   White pages on a soft desk in every theme; one clean toolbar row.
   ═══════════════════════════════════════════════════════════════ */
.cv-wrapper { position:relative; }
.cv-scroll-area { background:#e9ebef; }
:root:not(.light) .cv-scroll-area { background:#26272c; }
.cv-pages-stack { padding:14px 12px 0; gap:0; }
.cv-page-wrapper { max-width:860px; }
.cv-page-label { color:#8a8f98; padding:4px 2px 6px; }
.cv-canvas {
  background:#ffffff; border:none; border-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.10);
}
:root:not(.light) .cv-canvas { box-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.45); }
.cv-page-divider { background:none; height:0; margin:0 0 18px; }
.cv-add-page-btn { margin:6px auto 24px; border-color:#b9bec7; color:#6b7280; background:rgba(255,255,255,.5); }
:root:not(.light) .cv-add-page-btn { border-color:#4a4c55; color:#9ca3af; background:rgba(255,255,255,.03); }

/* One row */
.cv-toolbar {
  position:relative; flex-wrap:nowrap; gap:4px; padding:6px 10px; min-height:52px;
  overflow-x:auto; overflow-y:visible; scrollbar-width:none;
  background:var(--bg2); border-bottom:1px solid var(--border);
}
.cv-toolbar::-webkit-scrollbar { display:none; }
.cvt-group { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.cvt-sep { width:1px; height:26px; background:var(--border); margin:0 6px; flex-shrink:0; }
.cvt-spacer { flex:1; min-width:8px; }
.cvt-btn {
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0;
  border:none; border-radius:10px; background:none; color:var(--text2); cursor:pointer; transition:background .12s, color .12s;
}
.cvt-btn:hover { background:var(--bg3); color:var(--text); }
.cvt-btn.on { background:rgba(139,92,246,.16); color:#a78bfa; }
.cvt-tool.on { background:rgba(139,92,246,.18); color:#a78bfa; box-shadow:inset 0 0 0 1px rgba(139,92,246,.35); }
.cvt-swatch {
  width:26px; height:26px; border-radius:50%; flex-shrink:0; cursor:pointer; margin:0 2px;
  background:var(--sw); border:2px solid var(--bg2); box-shadow:0 0 0 1px var(--border2);
  transition:transform .12s, box-shadow .12s;
}
.cvt-swatch:hover { transform:scale(1.08); }
.cvt-swatch.on { box-shadow:0 0 0 2px var(--text); }
.cvt-palette { background:conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444); }
.cvt-palette.open { box-shadow:0 0 0 2px #a78bfa; }
.cvt-size {
  width:32px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:9px; background:none; cursor:pointer; flex-shrink:0;
}
.cvt-size span { width:var(--d); height:var(--d); border-radius:50%; background:var(--text3); }
.cvt-size:hover { background:var(--bg3); }
.cvt-size.on span { background:#a78bfa; }
.cvt-page { font-size:12px; font-weight:600; color:var(--text3); padding:0 6px; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Popovers hang off the toolbar, over the paper */
.cvt-pop {
  position:absolute; z-index:40; min-width:240px; max-width:calc(100% - 16px); max-height:calc(100% - 16px); overflow:auto; padding:14px;
  background:var(--bg2); border:1px solid var(--border2); border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.cvt-pop-title { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); margin:2px 0 8px; }
.cvt-pop-title:not(:first-child) { margin-top:14px; }
.cvt-pop-grid { display:grid; grid-template-columns:repeat(7, 30px); gap:8px; }
.cvt-pop-grid .cvt-swatch { width:28px; height:28px; margin:0; }
.cvt-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cvt-chip {
  padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:var(--bg); color:var(--text2);
  font:inherit; font-size:12.5px; cursor:pointer;
}
.cvt-chip.on { border-color:#8b5cf6; background:rgba(139,92,246,.14); color:var(--text); }
.cvt-pop-rule { height:1px; background:var(--border); margin:14px 0 8px; }
.cvt-menu-item {
  display:block; width:100%; text-align:left; padding:9px 8px; border:none; border-radius:8px; background:none;
  color:var(--text); font:inherit; font-size:13.5px; cursor:pointer;
}
.cvt-menu-item:hover { background:var(--bg3); }
.cvt-danger { color:#ef4444; }

/* The selection's actions, floating over the page */
.cv-sel-pill {
  position:absolute; left:50%; top:62px; transform:translateX(-50%); z-index:5;
  display:flex; gap:2px; padding:4px; border-radius:12px;
  background:#1f2937; box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.cv-sel-pill button {
  padding:7px 14px; border:none; border-radius:9px; background:none; color:#fff;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
}
.cv-sel-pill button:hover { background:rgba(255,255,255,.12); }
.cv-sel-pill .cv-sel-del { color:#fca5a5; }

/* Bookmarks on the page label */
.cv-page-label { gap:6px; }
.cv-page-num { margin-right:auto; }
.cv-page-mark {
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border:none; border-radius:6px; background:none; color:#9aa0a8; cursor:pointer; opacity:.7;
}
.cv-page-mark:hover { opacity:1; background:rgba(0,0,0,.06); }
.cv-page-mark.on { color:#ef4444; opacity:1; }

/* Two pages side by side, on screens wide enough for it */
.cv-pages-stack.cv-spread {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 18px;
  align-items:start; max-width:1700px; margin:0 auto;
}
.cv-pages-stack.cv-spread .cv-page-wrapper { max-width:none; }
@media (max-width:899px) { .cv-pages-stack.cv-spread { display:flex; } }

/* Folders on the shelf */
.nb-folders { display:flex; gap:8px; flex-wrap:wrap; margin:-8px 0 22px; }
.nb-folder {
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg2); color:var(--text2); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
}
.nb-folder span { font-size:11px; color:var(--text4); font-weight:600; }
.nb-folder.on { border-color:#8b5cf6; background:rgba(139,92,246,.14); color:var(--text); }
.nb-folder-new { border-style:dashed; color:var(--text3); }
.nb-card-hit { font-size:11px; color:#a78bfa; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Find in the open notebook */
.nb-ed-icon { width:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.nb-find { padding:10px 12px; background:var(--bg2); border-bottom:1px solid var(--border); }
.nb-find .nb-search { max-width:none; }
.nb-find-results { display:flex; flex-direction:column; gap:2px; margin-top:8px; max-height:30vh; overflow:auto; }
.nb-find-hit {
  text-align:left; padding:8px 10px; border:none; border-radius:8px; background:none; color:var(--text2);
  font:inherit; font-size:13px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nb-find-hit:hover { background:var(--bg3); }
.nb-find-hit b { color:var(--text); margin-right:6px; }
.nb-find-none, .nb-find-note { font-size:12px; color:var(--text3); padding:6px 4px 0; }


/* ═══════════════════════════════════════════════════════════════
   COLOUR PICKER - drawn by the app, stays open while you choose
   ═══════════════════════════════════════════════════════════════ */
.cvt-sv {
  position:relative; height:150px; border-radius:10px; cursor:crosshair; touch-action:none;
  background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--hue, 262) 100% 50%));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.cvt-sv-knob, .cvt-hue-knob {
  position:absolute; width:20px; height:20px; border-radius:50%; transform:translate(-50%, -50%); pointer-events:none;
  border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.35);
}
.cvt-hue {
  position:relative; height:18px; margin:14px 2px 0; border-radius:999px; cursor:pointer; touch-action:none;
  background:linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
}
.cvt-hue-knob { top:50%; width:22px; height:22px; }
.cvt-cp-row { display:flex; align-items:center; gap:10px; margin:14px 0 6px; }
.cvt-cp-chip { width:30px; height:30px; flex-shrink:0; border-radius:50%; background:var(--sw); box-shadow:0 0 0 1px var(--border2); }
.cvt-cp-hex {
  flex:1; min-width:0; height:32px; padding:0 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg);
  color:var(--text); font:600 13px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform:uppercase;
}
.cvt-cp-swatches .cvt-pop-title:first-child { margin-top:14px; }

/* ═══════════════════════════════════════════════════════════════
   FULL SCREEN NOTEBOOK - the page and nothing else (Noteful)
   The page runs edge to edge; the tools float over it, dock to any
   side, and tuck away into one button; zoom and page float in the
   corner. The bar at the top is thin and glassy, and goes too when
   the tools are tucked away.
   ═══════════════════════════════════════════════════════════════ */
.nb-editor--full .nb-ed-bar {
  position:absolute; top:0; left:0; right:0; z-index:30; height:46px;
  background:var(--bg2); background:color-mix(in srgb, var(--bg2) 84%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--border);
  transition:transform .22s ease, opacity .22s ease;
}
.nb-editor--full .nb-ed-btn { height:32px; background:transparent; border-color:transparent; }
.nb-editor--full .nb-ed-btn:hover { background:var(--bg3); }
.nb-editor--full:has(.cv-dock-min) .nb-ed-bar { transform:translateY(-100%); opacity:0; pointer-events:none; }
.nb-editor--full .nb-find {
  position:absolute; z-index:31; top:calc(52px + env(safe-area-inset-top)); right:12px; width:min(420px, calc(100% - 24px));
  border:1px solid var(--border2); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.3);
}

/* The page, as wide as the screen */
.nb-editor--full .cv-pages-stack { padding:calc(50px + env(safe-area-inset-top)) 0 0; transition:padding .22s ease; }
.nb-editor--full .cv-dock-min .cv-pages-stack { padding-top:calc(6px + env(safe-area-inset-top)); }
.nb-editor--full .cv-page-wrapper { max-width:none; }
.nb-editor--full .cv-pages-stack:not(.cv-spread) .cv-canvas { border-radius:0; }
.nb-editor--full .cv-page-label { padding:4px 12px 6px; }
.nb-editor--full .cv-pages-stack.cv-spread { padding-left:10px; padding-right:10px; max-width:none; }

/* Floating tools */
.cv-float .cv-scroll-area { padding-bottom:110px; }
.cv-float .cv-toolbar {
  position:absolute; z-index:25; min-height:0; padding:6px 8px; border-radius:18px;
  border:1px solid var(--border2);
  background:var(--bg2); background:color-mix(in srgb, var(--bg2) 90%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 14px 38px rgba(0,0,0,.26), 0 2px 6px rgba(0,0,0,.12);
}
.cv-float .cvt-spacer { flex:0 0 4px; min-width:0; }
.cv-float .cvt-page { display:none; }
.cv-dock-bottom .cv-toolbar, .cv-dock-top .cv-toolbar { left:50%; transform:translateX(-50%); max-width:calc(100% - 24px); }
.cv-dock-bottom .cv-toolbar { bottom:calc(14px + env(safe-area-inset-bottom)); }
.cv-dock-top .cv-toolbar { top:calc(56px + env(safe-area-inset-top)); }
/* On a side: two columns, so the whole set fits without scrolling */
.cv-dock-left .cv-toolbar, .cv-dock-right .cv-toolbar {
  top:calc(50% + 23px + env(safe-area-inset-top) / 2); transform:translateY(-50%);
  display:grid; grid-template-columns:repeat(2, 38px); justify-items:center; align-items:center; gap:2px;
  padding:8px 6px; max-height:calc(100% - 150px); overflow-x:hidden; overflow-y:auto;
}
.cv-dock-left .cv-toolbar { left:calc(12px + env(safe-area-inset-left)); }
.cv-dock-right .cv-toolbar { right:calc(12px + env(safe-area-inset-right)); }
.cv-dock-left .cvt-group, .cv-dock-right .cvt-group { display:contents; }
.cv-dock-left .cvt-sep, .cv-dock-right .cvt-sep { grid-column:1 / -1; width:60px; height:1px; margin:5px 0; }
.cv-dock-left .cvt-spacer, .cv-dock-right .cvt-spacer { display:none; }
.cv-dock-left .cvt-swatch, .cv-dock-right .cvt-swatch { margin:6px 0; }
.cv-float.cv-dock-top .cv-sel-pill { top:calc(124px + env(safe-area-inset-top)); }
.cv-float .cv-sel-pill { top:calc(58px + env(safe-area-inset-top)); }

/* Zoomed out below the screen's width, the page sits in the middle */
.cv-canvas { margin-left:auto; margin-right:auto; }

/* Tucked away: one button in the corner, showing the tool and its colour */
.cv-dock-min .cv-toolbar {
  left:auto; top:auto; transform:none; right:calc(16px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom));
  width:54px; height:54px; padding:0; border-radius:50%; overflow:visible; flex-direction:row;
}
.cvt-restore {
  position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; background:none; color:var(--text); cursor:pointer;
}
.cvt-restore svg { width:22px; height:22px; }
.cvt-restore-dot { position:absolute; right:10px; bottom:10px; width:12px; height:12px; border-radius:50%; background:var(--sw); box-shadow:0 0 0 2px var(--bg2), 0 0 0 3px var(--border2); }

/* Zoom and page, floating bottom left */
.cv-status { display:none; }
.cv-float .cv-status {
  position:absolute; z-index:24; display:flex; align-items:center; height:32px; padding:0 2px; border-radius:10px;
  left:calc(14px + env(safe-area-inset-left)); bottom:calc(16px + env(safe-area-inset-bottom));
  background:rgba(28,30,36,.74); color:#fff; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.25); font-size:12.5px; font-weight:600;
}
.cv-status button {
  height:100%; padding:0 10px; border:none; background:none; color:inherit; font:inherit; cursor:pointer;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.cv-status-sep { width:1px; height:14px; background:rgba(255,255,255,.3); }
/* Where the bottom toolbar is wide enough to reach the corner, the badge sits above it */
@media (max-width:1180px) {
  .cv-float.cv-dock-bottom:not(.cv-dock-min) .cv-status { bottom:calc(82px + env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════════════════════════
   STUDY NOTEBOOK, FULL SCREEN - the page and nothing else
   The page's own container becomes the full-screen layer. One thin bar
   (back, title, timer, AI Check, save, leave full screen); the Draw/Type/
   Photo switch, breadcrumb and bottom bar step aside; the tools float.
   ═══════════════════════════════════════════════════════════════ */
.bd-focus-only { display:none !important; }
body.bd-focusing { overflow:hidden; }
#page-braindump.bd-focus-host {
  position:fixed; inset:0; z-index:650; margin:0 !important; padding:0 !important;
  max-width:none !important; overflow:hidden; background:var(--bg);
}
.bd-focus-host .bd-write-page {
  height:100%; max-width:none !important; width:100%; margin:0; padding:0; gap:0;
}
.bd-focus-host .bd-write-page > div:has(> .sf-back),
.bd-focus-host .bd-mode-bar,
.bd-focus-host .bd-bottom-bar { display:none !important; }
.bd-focus-host .bd-focus-only { display:inline-flex !important; }
.bd-focus-host .bd-topbar {
  flex-shrink:0; margin:0; min-height:48px; box-sizing:content-box;
  padding:env(safe-area-inset-top) 10px 0; background:var(--bg2); border-bottom:1px solid var(--border);
}
/* Tools tucked away: the bar goes too, and only the page is left */
.bd-focus-host:has(.cv-dock-min) .bd-topbar { display:none; }
.bd-focus-check {
  align-items:center; height:32px; padding:0 14px; border:none; border-radius:9px; cursor:pointer;
  background:var(--accent, #8b5cf6); color:#fff; font:inherit; font-size:13px; font-weight:700; white-space:nowrap;
}
.bd-focus-host .bd-work-row { flex:1; min-height:0; gap:0; }
.bd-focus-host .bd-surface { margin:0; border:none; border-radius:0; }
.bd-focus-host .bd-ref-pane { margin:0; border-radius:0; border-width:0 0 0 1px; }
.bd-focus-host .cv-page-wrapper { max-width:none; }
.bd-focus-host .cv-pages-stack { padding:6px 0 0; }
.bd-focus-host .cv-pages-stack.cv-spread { padding:6px 10px 0; max-width:none; }
.bd-focus-host .cv-pages-stack:not(.cv-spread) .cv-canvas { border-radius:0; }
.bd-focus-host .cv-page-label { padding:4px 12px 6px; }
.bd-focus-host .cv-dock-top .cv-toolbar { top:12px; }
.bd-focus-host .cv-float .cv-sel-pill { top:12px; }
.bd-focus-host .cv-float.cv-dock-top .cv-sel-pill { top:78px; }
@media (max-width:640px) {
  .bd-focus-host .bd-books-name, .bd-focus-host .bd-ref-toggle-tx { display:none; }
  .bd-focus-host .bd-topbar-title { display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   STUDY NOTEBOOK LIBRARY - Noteful's shelf: the first page of each
   notebook, its age in the corner, its name beneath, + to start one.
   ═══════════════════════════════════════════════════════════════ */
.bd-lib { position:relative; min-height:calc(100dvh - 120px); padding-bottom:110px; }
.bd-lib-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:4px 0 26px; }
.bd-lib-title { font-size:30px; font-weight:800; letter-spacing:-.02em; margin:0; color:var(--text); }
.bd-lib-sub { font-size:13px; color:var(--text3); margin-top:4px; }
.bd-lib-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:34px 26px; }
.bd-lib-card { display:flex; flex-direction:column; align-items:center; min-width:0; }
.bd-lib-open {
  display:flex; flex-direction:column; align-items:center; gap:12px; width:100%;
  border:none; background:none; padding:0; cursor:pointer; color:var(--text); font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.bd-lib-page {
  position:relative; display:block; width:100%; aspect-ratio:1 / 1.414; overflow:hidden; border-radius:6px; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 8px 22px rgba(0,0,0,.16);
  transition:transform .18s ease, box-shadow .18s ease;
}
.bd-lib-open:hover .bd-lib-page, .bd-lib-open:focus-visible .bd-lib-page { transform:translateY(-3px); box-shadow:0 2px 4px rgba(0,0,0,.14), 0 14px 30px rgba(0,0,0,.22); }
.bd-lib-open:active .bd-lib-page { transform:scale(.97); }
.bd-lib-page img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.bd-lib-blank { position:absolute; inset:0; background:repeating-linear-gradient(transparent 0 11px, rgba(0,0,0,.07) 11px 12px); }
.bd-lib-age {
  position:absolute; left:8px; bottom:8px; padding:2px 6px; border-radius:6px;
  font-size:12px; font-weight:600; color:#6b7280; background:rgba(255,255,255,.85);
}
.bd-lib-name { font-size:15px; font-weight:600; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-lib-meta { display:flex; align-items:center; gap:6px; margin-top:8px; min-height:26px; max-width:100%; }
.bd-lib-tag {
  padding:3px 10px; border-radius:999px; background:var(--bg3); color:var(--text2);
  font-size:11.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px;
}
.bd-lib-more {
  width:26px; height:26px; border:none; border-radius:8px; background:none; color:var(--text3);
  font-size:16px; line-height:1; cursor:pointer;
}
.bd-lib-more:hover { background:var(--bg3); color:var(--text); }
.bd-lib-empty { text-align:center; padding:70px 20px; color:var(--text3); }
.bd-lib-empty-art { font-size:44px; }
.bd-lib-empty-title { font-size:17px; font-weight:700; color:var(--text); margin-top:10px; }
.bd-lib-empty-sub { font-size:14px; margin-top:6px; }
.bd-lib-fab {
  position:fixed; right:calc(28px + env(safe-area-inset-right)); bottom:calc(28px + env(safe-area-inset-bottom)); z-index:40;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:#1f2023; color:#fff; box-shadow:0 10px 26px rgba(0,0,0,.35);
  transition:transform .15s ease;
}
:root:not(.light) .bd-lib-fab { background:#f4f4f5; color:#111; }
.bd-lib-fab:hover { transform:scale(1.05); }
.bd-lib-fab:active { transform:scale(.94); }
@media (max-width:640px) {
  .bd-lib-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:26px 16px; }
  .bd-lib-title { font-size:25px; }
  .bd-lib-fab { right:18px; bottom:calc(84px + env(safe-area-inset-bottom)); }
}

/* + : the new notebook sheet */
.bd-new { width:min(460px, calc(100vw - 32px)); }
.bd-new-title {
  width:100%; box-sizing:border-box; height:42px; padding:0 12px; margin:6px 0 4px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg); color:var(--text); font:inherit; font-size:15px;
}
.bd-new-label { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); margin:16px 0 8px; }
.bd-new-kinds { display:flex; flex-direction:column; gap:8px; }
.bd-new-kind {
  display:flex; align-items:center; gap:12px; padding:11px 12px; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:12px; background:var(--bg); color:var(--text); font:inherit;
}
.bd-new-kind.on { border-color:#8b5cf6; background:rgba(139,92,246,.12); box-shadow:0 0 0 1px #8b5cf6 inset; }
.bd-new-kind-icon { font-size:22px; }
.bd-new-kind-text { display:flex; flex-direction:column; gap:2px; font-size:14px; }
.bd-new-kind-text span { font-size:12.5px; color:var(--text3); }
.bd-new-papers { display:flex; flex-wrap:wrap; gap:6px; }
.bd-new-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; flex-wrap:wrap; }
.bd-new-actions > span:last-child { display:flex; gap:8px; margin-left:auto; }
.bd-new-alt { font-size:12.5px; color:var(--text3); }
.bd-new-link { border:none; background:none; padding:0; color:#a78bfa; font:inherit; cursor:pointer; text-decoration:underline; }
.bd-book-menu { width:min(320px, calc(100vw - 32px)); }

/* Paper colour swatches: what each paper looks like, in miniature */
.cvt-tints { display:flex; gap:10px; flex-wrap:wrap; }
.cvt-tint {
  width:34px; height:44px; border-radius:6px; cursor:pointer; flex-shrink:0;
  border:1px solid rgba(0,0,0,.18); box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform .12s;
}
.cvt-tint:hover { transform:translateY(-2px); }
.cvt-tint.on { outline:2px solid #8b5cf6; outline-offset:2px; }
.cvt-tint-white { background:repeating-linear-gradient(#fff 0 7px, rgba(0,0,0,.1) 7px 8px); }
.cvt-tint-black { background:repeating-linear-gradient(#141518 0 7px, rgba(255,255,255,.14) 7px 8px); }
.cvt-tint-pink { background:repeating-linear-gradient(#fdecf3 0 7px, rgba(190,24,93,.16) 7px 8px); }
.cvt-tint-midnight {
  background:
    radial-gradient(circle at 74% 22%, rgba(254,240,138,.75) 0 3px, transparent 4px),
    linear-gradient(to top, #1e263e 0 28%, transparent 28%),
    #0e1220;
}
.cvt-tint-comic {
  background:
    radial-gradient(circle, rgba(239,68,68,.75) 1.2px, transparent 1.6px) 0 0 / 6px 6px,
    linear-gradient(90deg, transparent 8px, rgba(56,189,248,.8) 8px 9px, rgba(239,68,68,.9) 9px 10px, transparent 10px),
    #16121c;
}

/* The Notebooks app's shelf shows first pages too */
.nb-page-btn { display:block; width:100%; padding:0; border:none; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.nb-page-btn:hover .bd-lib-page, .nb-page-btn:focus-visible .bd-lib-page { transform:translateY(-3px); box-shadow:0 2px 4px rgba(0,0,0,.14), 0 14px 30px rgba(0,0,0,.22); }
.nb-page-btn:active .bd-lib-page { transform:scale(.97); }

/* A stroke still being drawn (the highlighter) sits on its own layer */
.cv-live { position:absolute; pointer-events:none; z-index:1; }
/* The eraser's size, under the finger */
.cv-eraser-ring {
  position:fixed; z-index:2000; pointer-events:none; display:none; transform:translate(-50%, -50%);
  border-radius:50%; border:1.5px solid rgba(17,24,39,.55); box-shadow:0 0 0 1px rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.6);
  background:rgba(255,255,255,.18);
}

/* Eraser: whole stroke or partial */
.cvt-mode {
  height:28px; padding:0 9px; border-radius:8px; border:1px solid var(--border); background:none; flex-shrink:0;
  color:var(--text3); font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; margin:0 1px;
}
.cvt-mode.on { border-color:#8b5cf6; background:rgba(139,92,246,.16); color:var(--text); }
.cv-dock-left .cvt-mode, .cv-dock-right .cvt-mode { padding:0 3px; font-size:10.5px; width:36px; }

/* Teacher uploads the AI cannot read yet: one button for all of them */
.src-readall {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 14px; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(245,158,11,.4); background:rgba(245,158,11,.08);
}
.src-readall-text { display:flex; flex-direction:column; gap:3px; min-width:200px; flex:1; }
.src-readall-text b { font-size:13.5px; color:var(--text); }
.src-readall-text span { font-size:12px; color:var(--text3); }

/* A zoomed page is wider than the screen and scrolls sideways. The site-wide
   "canvas { max-width:100% }" squeezed it to the screen's width instead,
   keeping its full height: dots came out oval, writing landed off the pen,
   and everything looked stretched whenever the zoom was not 100%. */
.cv-canvas { max-width:none; flex-shrink:0; }
.cv-live { max-width:none; }

/* Active Recall: marked by the AI, not by the learner */
.rc-alt-actions { display:flex; justify-content:center; gap:18px; margin-top:10px; }
.rc-link { border:none; background:none; padding:4px 2px; color:var(--text3); font:inherit; font-size:13px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.rc-link:hover { color:var(--text); }
.rc-reveal-btn[disabled] { opacity:.75; cursor:progress; }
.rc-mark-failed { margin:0 0 10px; padding:10px 12px; border-radius:10px; font-size:13px; color:var(--text2); background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.35); }
.rc-verdict { margin:0 0 12px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); }
.rc-verdict-head { font-size:15px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; }
.rc-verdict-marks { font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--bg3); color:var(--text2); }
.rc-verdict-text { font-size:13.5px; color:var(--text2); margin-top:6px; line-height:1.5; }
.rc-verdict-correct { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.4); }
.rc-verdict-partial { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.4); }
.rc-verdict-incorrect { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.35); }

/* ═══════════════════════════════════════════════════════════════
   TODAY - the student dashboard
   Everything on it goes somewhere when tapped. Colour comes from the
   subjects (each has its own hue, the same everywhere); the rest stays
   quiet so the subjects and the next action lead.
   ═══════════════════════════════════════════════════════════════ */
.today-hero { margin:6px 0 20px; }
.today-date { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent2); margin-bottom:6px; }
.today-hero .greeting-sub { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Status tiles: streak, homework, exams, notices, activities */
.dt-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:18px; }
.dt-tile {
  --c:var(--accent2);
  display:flex; align-items:center; gap:11px; padding:12px 14px; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:14px; background:var(--bg2); color:var(--text); font:inherit;
  transition:transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.dt-tile:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--c) 55%, transparent); }
.dt-tile:active { transform:scale(.98); }
.dt-tile:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
.dt-ic {
  width:36px; height:36px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center;
  color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent);
}
.dt-ic svg { width:19px; height:19px; }
.dt-txt { display:flex; flex-direction:column; min-width:0; }
.dt-txt b { font-size:15px; font-weight:750; line-height:1.15; }
.dt-txt span { font-size:11.5px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* Section headings */
.dash-h { display:flex; align-items:baseline; justify-content:space-between; margin:22px 0 10px; }
.dash-h h2 { font-size:16px; font-weight:750; letter-spacing:-.01em; color:var(--text); margin:0; }
.dash-h-link { border:none; background:none; color:var(--accent2); font:inherit; font-size:13px; font-weight:650; cursor:pointer; padding:4px 6px; border-radius:8px; }
.dash-h-link:hover { background:var(--accent-bg); }

/* Subjects: a grid inside the page, each in its own colour */
.dash-subjects { display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:12px; }
.dsc {
  --h:var(--hue, 262);
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:3px; padding:14px; min-height:150px;
  text-align:left; cursor:pointer; font:inherit; color:var(--text);
  border:1px solid hsl(var(--h) 70% 60% / .22); border-radius:16px;
  background:
    radial-gradient(120% 90% at 100% 0%, hsl(var(--h) 85% 62% / .20), transparent 60%),
    var(--bg2);
  animation:dsc-in .45s var(--ease) both; animation-delay:calc(var(--i, 0) * 45ms);
  transition:transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
@keyframes dsc-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.dsc:hover { transform:translateY(-3px); border-color:hsl(var(--h) 80% 65% / .55); box-shadow:0 14px 30px -18px hsl(var(--h) 80% 55% / .7); }
.dsc:active { transform:scale(.98); }
.dsc:focus-visible { outline:2px solid hsl(var(--h) 80% 65%); outline-offset:2px; }
.dsc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dsc-ic {
  width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px;
  background:hsl(var(--h) 80% 60% / .18);
}
.dsc-nm { font-size:15px; font-weight:750; line-height:1.2; }
.dsc-meta { font-size:11.5px; color:var(--text3); }
.dsc-foot { display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-top:auto; padding-top:10px; }
.dsc-pct { font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.dsc-pct small { font-size:11px; font-weight:600; color:var(--text3); letter-spacing:0; }
.dsc-go { font-size:12px; font-weight:700; color:hsl(var(--h) 85% 72%); opacity:0; transform:translateX(-4px); transition:opacity .16s, transform .16s; }
:root.light .dsc-go { color:hsl(var(--h) 70% 42%); }
.dsc:hover .dsc-go, .dsc:focus-visible .dsc-go { opacity:1; transform:none; }
@media (hover:none) { .dsc-go { opacity:1; transform:none; } }
.dsc-add { align-items:center; justify-content:center; border-style:dashed; border-color:var(--border2); background:transparent; color:var(--text3); }
.dsc-add-ic { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; background:var(--bg3); margin-bottom:6px; }

/* Start here: the one next action, in its subject's colour */
.dash-start {
  --h:var(--hue, 262);
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; margin-top:14px; padding:18px 20px;
  text-align:left; cursor:pointer; font:inherit; color:var(--text);
  border:1px solid hsl(var(--h) 75% 62% / .35); border-radius:18px;
  background:linear-gradient(120deg, hsl(var(--h) 70% 55% / .20), hsl(var(--h) 70% 55% / .04) 70%), var(--bg2);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.dash-start:hover { transform:translateY(-2px); box-shadow:0 18px 36px -22px hsl(var(--h) 80% 55% / .8); }
.dash-start:active { transform:scale(.99); }
.dash-start-lbl { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:hsl(var(--h) 85% 74%); }
:root.light .dash-start-lbl { color:hsl(var(--h) 70% 40%); }
.dash-start-h { font-size:22px; font-weight:800; letter-spacing:-.02em; }
.dash-start-s { font-size:13px; color:var(--text2); line-height:1.5; }
.dash-start-go {
  margin-top:10px; padding:8px 14px; border-radius:10px; font-size:13px; font-weight:750; color:#fff;
  background:hsl(var(--h) 72% 55%); box-shadow:0 6px 16px -8px hsl(var(--h) 80% 50% / .9);
}

/* Pick up where you left off */
.dash-cont {
  display:flex; align-items:center; gap:14px; width:100%; margin:0 0 14px; padding:12px 16px 12px 12px; cursor:pointer;
  text-align:left; font:inherit; color:var(--text);
  border:1px solid var(--border); border-radius:16px; background:var(--bg2);
  transition:transform .15s var(--ease), border-color .15s var(--ease);
}
.dash-cont:hover { transform:translateY(-2px); border-color:var(--accent-border); }
.dash-cont-page {
  width:46px; height:64px; flex:none; border-radius:5px; overflow:hidden; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2), 0 6px 14px rgba(0,0,0,.25);
}
.dash-cont-page img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.dash-cont-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dash-cont-lbl { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent2); }
.dash-cont-h { font-size:15px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-cont-s { font-size:12px; color:var(--text3); }
.dash-cont-go { font-size:13px; font-weight:700; color:var(--accent2); white-space:nowrap; }

/* Tools */
.dash-tools { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-bottom:22px; }
.dtool {
  --h:var(--hue, 262);
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:14px; cursor:pointer; text-align:left;
  font:inherit; color:var(--text); border:1px solid var(--border); border-radius:14px; background:var(--bg2);
  transition:transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.dtool:hover { transform:translateY(-2px); border-color:hsl(var(--h) 75% 62% / .5); background:linear-gradient(160deg, hsl(var(--h) 80% 60% / .10), transparent 70%), var(--bg2); }
.dtool:active { transform:scale(.98); }
.dtool-ic { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; color:hsl(var(--h) 85% 70%); background:hsl(var(--h) 80% 60% / .16); }
:root.light .dtool-ic { color:hsl(var(--h) 70% 42%); }
.dtool-ic svg { width:19px; height:19px; }
.dtool-nm { font-size:14px; font-weight:750; }
.dtool-s { font-size:11.5px; color:var(--text3); }

/* Banners: school link, approval */
.dash-banner {
  display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; margin-bottom:14px; text-align:left; font:inherit; color:var(--text);
  border:1px solid var(--accent-border); border-radius:16px; background:var(--accent-bg); cursor:pointer;
}
.dash-banner-wait { cursor:default; border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.08); }
.dash-banner-ic { font-size:26px; }
.dash-banner-b { flex:1; display:flex; flex-direction:column; gap:2px; }
.dash-banner-b b { font-size:14.5px; }
.dash-banner-b span { font-size:12.5px; color:var(--text2); line-height:1.5; }
.dash-banner-go { font-size:13px; font-weight:700; color:var(--accent2); white-space:nowrap; }

@media (max-width:640px) {
  .dt-row { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dash-subjects { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .dash-tools { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dsc { min-height:138px; padding:12px; }
  .dash-start-h { font-size:19px; }
}

/* Ryon: a way into a conversation, not just a greeting */
.ryon-card {
  position:relative; display:flex; align-items:center; gap:14px; padding:12px 44px 12px 14px; margin:0 0 14px; cursor:pointer;
  border:1px solid var(--accent-border); border-radius:16px;
  background:linear-gradient(120deg, var(--accent-bg), transparent 75%), var(--bg2);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.ryon-card:hover { transform:translateY(-2px); box-shadow:0 14px 30px -20px var(--accent-glow); }
.ryon-card:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
.ryon-av { flex:none; }
.ryon-b { flex:1; min-width:0; }
.ryon-name { font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--accent2); }
.ryon-say { font-size:14px; color:var(--text); line-height:1.4; }
.ryon-go { font-size:13px; font-weight:700; color:var(--accent2); white-space:nowrap; }
.ryon-x {
  position:absolute; top:8px; right:8px; width:28px; height:28px; border:none; border-radius:8px;
  background:none; color:var(--text3); cursor:pointer; font-size:13px;
}
.ryon-x:hover { background:var(--bg3); color:var(--text); }

/* The notifications notice can be put away */
.notif-dash-card { position:relative; padding-right:44px !important; }
.notif-dash-x {
  position:absolute; top:50%; right:8px; transform:translateY(-50%); width:28px; height:28px; border:none; border-radius:8px;
  background:none; color:var(--text3); cursor:pointer; font-size:13px;
}
.notif-dash-x:hover { background:var(--bg3); color:var(--text); }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR - polish
   Each world has its own colour (a tinted tile that fills when you are
   there); sub-pages hang off it with a dot; the foot holds a streak card,
   the utilities in line icons, and one compact profile row.
   ═══════════════════════════════════════════════════════════════ */
.sidebar-logo { padding:22px 20px 16px; }
.logo-school { font-size:12px; color:var(--text3); margin-top:6px; font-weight:600; }

.nav-world { --wh:262; gap:12px; padding:7px 10px; margin:2px 10px; width:calc(100% - 20px); border-radius:13px; font-size:14.5px; }
.nav-tile {
  width:32px; height:32px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:hsl(var(--wh) 85% 70%); background:hsl(var(--wh) 80% 60% / .13);
  transition:background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
:root.light .nav-tile { color:hsl(var(--wh) 70% 42%); }
.nav-tile .nav-ico { width:17px; height:17px; opacity:1; }
.nav-world:hover .nav-tile { background:hsl(var(--wh) 80% 60% / .22); }
.nav-world.on {
  background:linear-gradient(120deg, hsl(var(--wh) 80% 60% / .20), hsl(var(--wh) 80% 60% / .05));
  border-color:hsl(var(--wh) 80% 70% / .28);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 22px -14px hsl(var(--wh) 80% 55% / .9);
}
.nav-world.on .nav-tile {
  color:#fff; background:linear-gradient(145deg, hsl(var(--wh) 80% 64%), hsl(var(--wh) 70% 50%));
  box-shadow:0 4px 12px -4px hsl(var(--wh) 80% 50% / .8);
}
.nav-world.on .nav-ico { color:#fff; }

.nav-sub { padding:2px 0 8px; }
.nav-sub::before { left:31px; background:linear-gradient(180deg, rgba(168,158,255,.22), transparent); }
.nav-sub .nav-item {
  position:relative; padding:7px 12px 7px 50px; margin:1px 10px; width:calc(100% - 20px);
  font-size:13px; font-weight:550; border-radius:10px;
}
.nav-sub .nav-item::before {
  content:''; position:absolute; left:28px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background:var(--bg2); border:1.5px solid var(--border2); transition:background .15s, border-color .15s;
}
.nav-sub .nav-item:hover::before { border-color:var(--text3); }
.nav-sub .nav-item.active { color:var(--text); background:rgba(255,255,255,.05); font-weight:650; }
:root.light .nav-sub .nav-item.active { background:rgba(0,0,0,.04); }
.nav-sub .nav-item.active::before { background:var(--accent2); border-color:var(--accent2); box-shadow:0 0 0 3px var(--accent-bg); }

/* Footer */
.sidebar-footer { padding:12px 12px 14px; }
#sb-streak:empty { display:none; }
.sb-streak {
  display:flex; align-items:center; gap:11px; width:100%; margin-bottom:10px; padding:10px 12px; cursor:pointer; text-align:left;
  font:inherit; color:var(--text); border:1px solid var(--border); border-radius:14px; background:var(--bg3);
  transition:transform .15s var(--ease), border-color .15s var(--ease);
}
.sb-streak:hover { transform:translateY(-1px); border-color:rgba(245,158,11,.4); }
.sb-streak.lit { background:linear-gradient(120deg, rgba(245,158,11,.16), rgba(244,63,94,.06)), var(--bg3); border-color:rgba(245,158,11,.3); }
.sb-streak-ic { width:32px; height:32px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--text3); background:var(--bg4); }
.sb-streak.lit .sb-streak-ic { color:#fff; background:linear-gradient(145deg, #fbbf24, #f97316); box-shadow:0 4px 12px -4px rgba(249,115,22,.8); }
.sb-streak-ic svg { width:17px; height:17px; }
.sb-streak-b { display:flex; flex-direction:column; min-width:0; }
.sb-streak-b b { font-size:13px; font-weight:750; }
.sb-streak-b span { font-size:11px; color:var(--text3); }

#sb-pinned { display:flex; flex-direction:column; gap:1px; }
.nav-util { gap:11px; padding:8px 10px; margin:0; border-radius:10px; font-size:13px; font-weight:550; color:var(--text2); }
.nav-util .nav-ico { width:17px; height:17px; flex:none; opacity:.85; }
.nav-util:hover { background:rgba(255,255,255,.04); color:var(--text); }
.nav-util.active { color:var(--text); background:rgba(255,255,255,.06); }

.sb-user { display:flex; align-items:center; gap:6px; }
.sb-user .user-card {
  flex:1; min-width:0; margin:0; padding:7px 8px; border:none; background:none; font:inherit; color:var(--text); text-align:left;
  border-radius:12px;
}
.sb-user .user-card:hover { background:rgba(255,255,255,.05); }
.user-meta { min-width:0; }
.sb-user .user-avatar {
  width:36px; height:36px; font-size:17px; border:none;
  background:linear-gradient(var(--bg3), var(--bg3)) padding-box, linear-gradient(145deg, var(--accent2), #ec4899) border-box;
  border:2px solid transparent;
}
.user-sub { font-size:11px; color:var(--text3); }
.sb-user .signout-btn {
  width:36px; height:36px; flex:none; padding:0; display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid transparent; border-radius:10px; color:var(--text3);
}
.sb-user .signout-btn svg { width:18px; height:18px; }
.sb-user .signout-btn:hover { color:var(--red); background:rgba(244,114,114,.1); border-color:rgba(244,114,114,.2); }

/* Adding a custom topic: which term */
.ct-terms { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:14px; }
.ct-term {
  padding:9px 6px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text2);
  font:inherit; font-size:13px; font-weight:650; cursor:pointer;
}
.ct-term.on { border-color:var(--accent); background:var(--accent-bg); color:var(--text); }

/* ═══════════════════════════════════════════════════════════════
   COLOUR, WITHOUT CHRISTMAS
   Colour is welcome - just not mostly red and green. The palette is
   violet, blue, sky, magenta, amber and orchid; red and green are kept
   for what they mean elsewhere (wrong / right), not for decoration.
   ═══════════════════════════════════════════════════════════════ */
.tt-violet { --c:#8b7cf8; } .tt-blue { --c:#5b8def; } .tt-sky { --c:#38bdf8; }
.tt-magenta { --c:#e879c9; } .tt-amber { --c:#f5b841; } .tt-orchid { --c:#c084fc; }
/* Each tile carries a breath of its colour, not just its icon */
.dt-tile { background:linear-gradient(150deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%), var(--bg2); }

/* Future Me: one tappable line */
.fm-invite {
  position:relative; display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:12px 44px 12px 14px; cursor:pointer;
  border:1px dashed rgba(192,132,252,.45); border-radius:14px;
  background:linear-gradient(120deg, rgba(192,132,252,.10), transparent 70%), var(--bg2);
  transition:transform .15s var(--ease), border-color .15s var(--ease);
}
.fm-invite:hover { transform:translateY(-2px); border-color:rgba(192,132,252,.75); }
.fm-invite-ic { font-size:20px; }
.fm-invite-t { flex:1; min-width:0; display:flex; flex-direction:column; }
.fm-invite-t b { font-size:14px; }
.fm-invite-t span { font-size:12px; color:#c084fc; font-weight:650; }
.fm-invite-go { color:#c084fc; font-weight:700; }
.fm-invite-x { position:absolute; top:50%; right:8px; transform:translateY(-50%); width:28px; height:28px; border:none; border-radius:8px; background:none; color:var(--text3); cursor:pointer; font-size:13px; }
.fm-invite-x:hover { background:var(--bg3); color:var(--text); }
/* The streak card: warm amber, not orange-into-red */
.sb-streak.lit { background:linear-gradient(120deg, rgba(245,184,65,.14), rgba(245,184,65,.03)), var(--bg3); border-color:rgba(245,184,65,.28); }
.sb-streak.lit .sb-streak-ic { background:linear-gradient(145deg, #fcd34d, #f5a524); box-shadow:0 4px 12px -4px rgba(245,165,36,.7); }
.dsc { min-height:122px; }
.dsc-foot { padding-top:6px; }

/* Subjects as a carousel: swipe or arrows, snapping card to card, inside the page */
.dash-h-right { display:flex; align-items:center; gap:4px; }
.car-btn {
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--bg2); color:var(--text);
  font-size:18px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, opacity .15s;
}
.car-btn:hover:not(:disabled) { background:var(--bg3); }
.car-btn:disabled { opacity:.35; cursor:default; }
@media (hover:none) { .car-btn { display:none; } }
.dash-subjects {
  display:flex; grid-template-columns:none; gap:12px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-padding:0 2px; padding:4px 2px 10px; margin:0 -2px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.dash-subjects::-webkit-scrollbar { display:none; }
.dash-subjects > .dsc { flex:0 0 184px; scroll-snap-align:start; }
.dash-subjects.fade-r { -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent); }
.dash-subjects.fade-l { -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%); mask-image:linear-gradient(90deg, transparent, #000 12%); }
.dash-subjects.fade-l.fade-r { -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
@media (max-width:640px) {
  .dash-subjects { display:flex; }
  .dash-subjects > .dsc { flex-basis:44%; }
}

/* ═══════════════════════════════════════════════════════════════
   TODAY - THE HERO
   The page's one message, top of the screen: who you're becoming (Future
   Me, beside the greeting) and the one thing to do now (Ryon's bubble,
   with the button). Everything below is for choosing something else.
   ═══════════════════════════════════════════════════════════════ */
.hero2 {
  position:relative; overflow:hidden; margin:2px 0 16px; padding:20px 22px 22px; border-radius:22px;
  border:1px solid rgba(168,158,255,.28);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(192,132,252,.30), transparent 55%),
    radial-gradient(70% 90% at 0% 100%, rgba(91,141,239,.22), transparent 60%),
    linear-gradient(135deg, #1d1840, #141228 60%, #10101e);
  box-shadow:0 24px 50px -30px rgba(124,111,247,.8);
}
:root.light .hero2 {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(192,132,252,.28), transparent 55%),
    radial-gradient(70% 90% at 0% 100%, rgba(91,141,239,.2), transparent 60%),
    linear-gradient(135deg, #efeaff, #f6f3ff);
}
/* A few quiet stars in the corner: Oryon's mark, not decoration for its own sake */
.hero2::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 78% 18%, #fff, transparent), radial-gradient(1px 1px at 88% 40%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 64% 12%, #fff, transparent), radial-gradient(1px 1px at 94% 12%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 70% 34%, #d8d2ff, transparent);
}
:root.light .hero2::before { opacity:.25; }
.hero2-top { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.hero2-hi { font-family:var(--font-serif, inherit); font-size:34px; font-weight:400; letter-spacing:-.01em; line-height:1.1; margin:2px 0 0; color:var(--text); }

.goal-chip {
  display:flex; align-items:center; gap:10px; max-width:320px; padding:8px 14px 8px 8px; cursor:pointer; text-align:left;
  font:inherit; color:var(--text); border:1px solid rgba(255,255,255,.14); border-radius:999px;
  background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .15s var(--ease), background .15s var(--ease);
}
:root.light .goal-chip { background:rgba(255,255,255,.7); border-color:rgba(124,111,247,.25); }
.goal-chip:hover { transform:translateY(-1px); background:rgba(255,255,255,.12); }
.goal-chip-ic { width:34px; height:34px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; background:linear-gradient(145deg, #c084fc, #7c6ff7); }
.goal-chip-t { display:flex; flex-direction:column; min-width:0; }
.goal-chip-t span { font-size:10.5px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:#c9bfff; }
:root.light .goal-chip-t span { color:var(--accent); }
.goal-chip-t b { font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.goal-chip-empty { border-style:dashed; }

.hero2-focus { position:relative; display:flex; align-items:flex-end; gap:12px; margin-top:18px; }
.hero2-guide { flex:none; width:64px; filter:drop-shadow(0 6px 14px rgba(124,111,247,.5)); }
.hero2-guide img { display:block; }
.hero2-bubble {
  position:relative; flex:1; min-width:0; padding:16px 18px; border-radius:18px 18px 18px 6px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
:root.light .hero2-bubble { background:rgba(255,255,255,.8); border-color:rgba(124,111,247,.2); }
.hero2-lbl { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#f5b841; }
.hero2-h { font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin-top:3px; color:var(--text); }
.hero2-s { font-size:13.5px; color:var(--text2); margin-top:4px; line-height:1.45; }
.hero2-actions { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.hero2-go {
  padding:11px 18px; border:none; border-radius:12px; cursor:pointer; font:inherit; font-size:14px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, #948af9, #6a5de8); box-shadow:0 10px 24px -10px rgba(124,111,247,.9);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.hero2-go:hover { transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(124,111,247,1); }
.hero2-go:active { transform:scale(.97); }
.hero2-alt { padding:10px 12px; border:none; border-radius:12px; background:none; color:var(--text2); font:inherit; font-size:13px; font-weight:650; cursor:pointer; }
.hero2-alt:hover { color:var(--text); background:rgba(255,255,255,.06); }

@media (max-width:640px) {
  .hero2 { padding:16px 16px 18px; border-radius:20px; }
  .hero2-hi { font-size:28px; }
  .goal-chip { max-width:100%; }
  .hero2-guide { width:48px; }
  .hero2-h { font-size:20px; }
}
@media (max-width:640px) {
  /* One swipeable row on a phone, so the tiles don't push the page down */
  .dt-row { display:flex; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; margin:0 -16px 16px; padding:0 16px; gap:8px; }
  .dt-row::-webkit-scrollbar { display:none; }
  .dt-tile { flex:0 0 auto; min-width:128px; scroll-snap-align:start; padding:10px 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   EACH WORLD HAS A COLOUR, AND ITS PAGES CARRY IT
   Chosen for what the world is for, so it is felt before it is read:
     Today    violet - home and identity; Oryon's own colour
     Study    blue   - calm focus, the colour of concentration
     Progress gold   - achievement: trophies, medals, earned
     Friends  pink   - warmth and connection
   Subtle, never a pink page: a glow at the top of the page, a dot by the
   title, and the page's highlights. Main buttons stay brand violet, so
   Oryon still looks like Oryon everywhere.
   ═══════════════════════════════════════════════════════════════ */
body { --world:#7c6ff7; --world2:#a89eff; --world-rgb:124,111,247; }
body[data-world="study"]    { --world:#4f86f7; --world2:#93b8ff; --world-rgb:79,134,247; }
body[data-world="progress"] { --world:#e5a41e; --world2:#f6c75b; --world-rgb:229,164,30; }
body[data-world="friends"]  { --world:#e25fb7; --world2:#f39ad4; --world-rgb:226,95,183; }

/* The page's glow: the world's colour rising from the top of the page */
.main {
  background-image:
    radial-gradient(900px 340px at 18% -120px, rgba(var(--world-rgb), .20), transparent 70%),
    radial-gradient(700px 260px at 95% -140px, rgba(var(--world-rgb), .10), transparent 70%);
  background-repeat:no-repeat;
}
:root.light .main {
  background-image:
    radial-gradient(900px 340px at 18% -120px, rgba(var(--world-rgb), .14), transparent 70%),
    radial-gradient(700px 260px at 95% -140px, rgba(var(--world-rgb), .07), transparent 70%);
}

/* A dot by the title in the top bar: where you are, at a glance */
.topbar-title { display:inline-flex; align-items:center; gap:10px; }
.topbar-title::before {
  content:''; width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--world); box-shadow:0 0 0 3px rgba(var(--world-rgb), .2), 0 0 12px rgba(var(--world-rgb), .6);
  transition:background .3s ease, box-shadow .3s ease;
}

/* The page's highlights - labels, links, selected things - in its colour.
   Only inside the page: the sidebar has its own, and --accent (buttons)
   stays the brand. */
.main > .page {
  --accent2:var(--world2);
  --accent-bg:rgba(var(--world-rgb), .09);
  --accent-border:rgba(var(--world-rgb), .22);
  --accent-glow:rgba(var(--world-rgb), .35);
}

/* Sidebar sub-pages light in their world's colour */
.nav-sub .nav-item.active::before { background:hsl(var(--wh, 248) 85% 70%); border-color:hsl(var(--wh, 248) 85% 70%); box-shadow:0 0 0 3px hsl(var(--wh, 248) 80% 60% / .2); }
.nav-sub::before { background:linear-gradient(180deg, hsl(var(--wh, 248) 80% 70% / .3), transparent); }

/* Today's tiles take the colour of the world they open */
.tt-today    { --c:#948af9; }
.tt-study    { --c:#6c9cf8; }
.tt-progress { --c:#f0b43a; }
.tt-friends  { --c:#ec7ac4; }
/* Stronger, lower: the first version sat mostly behind the top bar */
.main {
  background-image:
    radial-gradient(1000px 420px at 22% -40px, rgba(var(--world-rgb), .26), transparent 70%),
    radial-gradient(760px 320px at 96% -60px, rgba(var(--world-rgb), .14), transparent 70%);
}
:root.light .main {
  background-image:
    radial-gradient(1000px 420px at 22% -40px, rgba(var(--world-rgb), .16), transparent 70%),
    radial-gradient(760px 320px at 96% -60px, rgba(var(--world-rgb), .09), transparent 70%);
}

/* The clash: a slim race, in Friends' pink, below the hero */
.clash2 {
  display:flex; align-items:center; gap:12px; width:100%; margin:0 0 14px; padding:12px 14px; text-align:left;
  font:inherit; color:var(--text); cursor:pointer;
  border:1px solid rgba(236,122,196,.28); border-radius:16px;
  background:linear-gradient(120deg, rgba(236,122,196,.12), rgba(236,122,196,.02) 70%), var(--bg2);
  transition:transform .15s var(--ease), border-color .15s var(--ease);
}
button.clash2:hover { transform:translateY(-2px); border-color:rgba(236,122,196,.55); }
.clash2-quiet { cursor:default; }
.clash2-ic { width:36px; height:36px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; background:rgba(236,122,196,.16); }
.clash2-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.clash2-top { display:flex; align-items:baseline; gap:8px; }
.clash2-top b { font-size:14px; font-weight:750; }
.clash2-state { font-size:12px; font-weight:650; color:#ec7ac4; }
.clash2-note { font-size:12px; color:var(--text3); }
.clash2-meter { position:relative; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.clash2-me { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg, #c084fc, #ec7ac4); transition:width .8s cubic-bezier(.2,0,0,1); }
.clash2-score { display:flex; justify-content:space-between; font-size:11.5px; color:var(--text3); }
.clash2-score b { color:var(--text); font-weight:750; }
.clash2-side { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
#clash-home-clock { font-size:11.5px; font-weight:700; color:var(--text3); font-variant-numeric:tabular-nums; }
#clash-home-clock.urgent { color:#ec7ac4; }
.clash2-go { font-size:13px; font-weight:700; color:#ec7ac4; white-space:nowrap; }
.clash2-actions { display:flex; gap:6px; flex:none; }
.clash2-btn { padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--bg3); color:var(--text2); font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; }
.clash2-yes { border:none; color:#fff; background:linear-gradient(135deg, #e879c9, #c084fc); }
@media (max-width:640px) { .clash2-go { display:none; } }

/* Future Me shows in the Today hero; the top bar's copy would say it twice */
body[data-page="home"] #tb-futureme { display:none; }

/* ═══════════════════════════════════════════════════════════════
   THE WORLD'S COLOUR, FROZEN AT THE TOP - quietly
   The bar stays while the page scrolls, so it keeps the world's colour in
   the calmest way: plain glass with the faintest tint, and one clean line
   along its foot. (A lit band, a glowing edge and a spill of light was too
   much on top of the page's own glow.)
   ═══════════════════════════════════════════════════════════════ */
.topbar {
  background:linear-gradient(180deg, rgba(var(--world-rgb), .05), rgba(var(--world-rgb), .02)), rgba(8,8,14,.8);
  border-bottom:1px solid var(--border);
  transition:background .35s ease;
}
:root.light .topbar { background:linear-gradient(180deg, rgba(var(--world-rgb), .05), rgba(var(--world-rgb), .02)), rgba(255,255,255,.85); }
.topbar::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(var(--world-rgb), .75) 18%, rgba(var(--world-rgb), .75) 55%, transparent);
  opacity:.7;
}

/* The top bar can only stay put if nothing between it and the page scrolls.
   layout.css gives .main overflow-x:hidden, which silently makes it a scroll
   container (overflow-y computes to auto) - and a sticky element sticks to
   its nearest scroll container. The page scrolls, .main never does, so the
   bar scrolled away with everything else. clip still stops sideways
   overflow without making a scroll container. */
#app > .main { overflow-x:clip; overflow-y:visible; }   /* beats layout.css, which loads after this file */

/* .main no longer clips as a scroll container (see the sticky top bar), so
   as a flex item its minimum width became its content's - and the subjects
   carousel's full scroll width stretched the whole page past the window.
   It may shrink to the window again. */
#app > .main { min-width:0; }

/* Today's focus: calmer, and the subject's own icon in its colour */
.hero2-h { display:flex; align-items:center; gap:10px; font-size:21px; }
.hero2-subj {
  width:34px; height:34px; flex:none; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:18px;
  background:hsl(var(--hue, 262) 70% 62% / .22); box-shadow:inset 0 0 0 1px hsl(var(--hue, 262) 70% 70% / .3);
}
.hero2-bubble { padding:14px 16px; }
.hero2-actions { margin-top:12px; }
.hero2-go { padding:10px 16px; font-size:13.5px; }
@media (max-width:640px) { .hero2-h { font-size:18px; } }


/* ═══════════════════════════════════════════════════════════════
   ONE COLOUR FAMILY
   No orange, no pink: every world stays in Oryon's cool range, so the
   sidebar and pages read as one family with quiet differences.
     Today violet · Study blue · Progress orchid · Friends sky
   ═══════════════════════════════════════════════════════════════ */
body[data-world="progress"] { --world:#9a6ff5; --world2:#c4a6ff; --world-rgb:154,111,245; }
body[data-world="friends"]  { --world:#38aef0; --world2:#8fd3fb; --world-rgb:56,174,240; }
.tt-progress { --c:#b08cfb; }
.tt-friends  { --c:#5cc2f7; }

/* The streak: orchid (it opens Progress), not orange */
.sb-streak.lit { background:linear-gradient(120deg, rgba(154,111,245,.16), rgba(154,111,245,.03)), var(--bg3); border-color:rgba(176,140,251,.3); }
.sb-streak.lit:hover { border-color:rgba(176,140,251,.55); }
.sb-streak.lit .sb-streak-ic { color:#fff; background:linear-gradient(145deg, #c4a6ff, #8b5cf6); box-shadow:0 4px 12px -4px rgba(139,92,246,.7); }

/* Today's focus label: lavender, not amber */
.hero2-lbl { color:#c4b8ff; }
:root.light .hero2-lbl { color:var(--accent); }

/* The clash: sky (Friends), not pink */
.clash2 { border-color:rgba(92,194,247,.28); background:linear-gradient(120deg, rgba(92,194,247,.12), rgba(92,194,247,.02) 70%), var(--bg2); }
button.clash2:hover { border-color:rgba(92,194,247,.55); }
.clash2-ic { background:rgba(92,194,247,.16); }
.clash2-state, .clash2-go, #clash-home-clock.urgent { color:#5cc2f7; }
.clash2-me { background:linear-gradient(90deg, #7c6ff7, #38aef0); }
.clash2-yes { background:linear-gradient(135deg, #5cc2f7, #7c6ff7); }

/* Future Me and the profile ring: violet to lavender, no pink */
.sb-user .user-avatar { background:linear-gradient(var(--bg3), var(--bg3)) padding-box, linear-gradient(145deg, #c4a6ff, #6a5de8) border-box; }
.fm-invite { border-color:rgba(168,158,255,.45); background:linear-gradient(120deg, rgba(168,158,255,.10), transparent 70%), var(--bg2); }
.fm-invite-t span, .fm-invite-go { color:var(--accent2); }

/* ═══════════════════════════════════════════════════════════════
   THE TOP OF TODAY, WITHOUT THE BOX
   The greeting and the Future Me pill sit straight on the page; Today's
   focus is one slim row, in the same shape as the clash below it.
   ═══════════════════════════════════════════════════════════════ */
.hero2 { background:none; border:none; box-shadow:none; padding:4px 0 0; margin:0 0 14px; border-radius:0; overflow:visible; }
.hero2::before { display:none; }
:root.light .hero2 { background:none; }
.hero2-top { align-items:center; }
.hero2-hi { font-size:34px; }

.focus-strip {
  --h:var(--hue, 250);
  display:flex; align-items:center; gap:14px; margin-top:16px; padding:12px 12px 12px 14px;
  border:1px solid hsl(var(--h) 70% 70% / .26); border-radius:16px;
  background:linear-gradient(120deg, hsl(var(--h) 75% 62% / .14), hsl(var(--h) 75% 62% / .03) 60%), var(--bg2);
}
.focus-ic {
  width:42px; height:42px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px;
  background:hsl(var(--h) 70% 62% / .2); box-shadow:inset 0 0 0 1px hsl(var(--h) 70% 70% / .3);
}
.focus-b { flex:1; min-width:0; }
.focus-b .hero2-lbl { font-size:10.5px; }
.focus-t { display:flex; align-items:baseline; gap:10px; min-width:0; margin-top:2px; }
.focus-t b { font-size:17px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.focus-t span { font-size:13px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.focus-actions { display:flex; align-items:center; gap:6px; flex:none; }
.focus-strip .hero2-go { padding:10px 16px; font-size:13.5px; }
@media (max-width:760px) {
  .focus-strip { flex-wrap:wrap; }
  .focus-t { flex-direction:column; align-items:flex-start; gap:1px; }
  .focus-t span { white-space:normal; }
  .focus-actions { width:100%; justify-content:flex-end; }
}
@media (max-width:640px) { .hero2-hi { font-size:28px; } }

/* ── TEACHER TODAY ─────────────────────────────────────────────
   Same materials as the learner page - hero2, focus-strip, .dsc cards -
   plus three pieces only a teacher needs: the setup checklist, class
   cards' grade/subject lines, and the "waiting on learners" rows. */
.tsetup {
  position:relative; margin:0 0 18px; padding:16px 18px 10px; border-radius:20px;
  border:1px solid rgba(168,158,255,.24);
  background:radial-gradient(80% 120% at 0% 0%, rgba(124,111,247,.14), transparent 60%), var(--bg2);
}
.tsetup-head { display:flex; align-items:center; gap:12px; }
.tsetup-ory { flex:none; width:58px; height:58px; display:flex; align-items:center; justify-content:center; }
.tsetup-hb h2 { margin:0; font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--text); }
.tsetup-hb span { font-size:12.5px; color:var(--text2); }
.tsetup-bar { height:6px; border-radius:6px; background:var(--bg3); margin:12px 0 6px; overflow:hidden; }
.tsetup-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #948af9, #34d97a); transition:width .5s var(--ease); }
.tsetup-steps { list-style:none; margin:0; padding:0; }
.tsetup-step { display:flex; align-items:center; gap:12px; padding:11px 2px; border-top:1px solid var(--border); }
.tsetup-step:first-child { border-top:none; }
.tsetup-dot {
  flex:none; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--text2); background:var(--bg3); box-shadow:inset 0 0 0 1px var(--border2);
}
.tsetup-step.next .tsetup-dot { color:#fff; background:linear-gradient(135deg, #948af9, #6a5de8); box-shadow:0 6px 14px -6px rgba(124,111,247,.9); }
.tsetup-step.done .tsetup-dot { color:#0b1a12; background:#34d97a; box-shadow:none; }
.tsetup-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tsetup-txt b { font-size:14.5px; font-weight:750; color:var(--text); }
.tsetup-txt span { font-size:12.5px; color:var(--text2); line-height:1.4; }
.tsetup-step.done .tsetup-txt b { color:var(--text3); text-decoration:line-through; text-decoration-color:var(--text3); }
.tsetup-step.done .tsetup-txt span { display:none; }
.tsetup-ok { font-size:12px; font-weight:750; color:#34d97a; flex:none; }
.tsetup-btn { flex:none; }
.tsetup-step .hero2-go.tsetup-btn { padding:9px 14px; font-size:13px; }
.tsetup-step .hero2-alt.tsetup-btn { font-size:12.5px; }
@media (max-width:560px) {
  .tsetup-step { flex-wrap:wrap; }
  .tsetup-btn { margin-left:40px; }
}
/* Where a Today button lands: a brief glow so the eye finds it. */
.tsetup-flash { animation:tsetup-flash 1.6s var(--ease); border-radius:14px; }
@keyframes tsetup-flash { 0%,100% { box-shadow:0 0 0 0 rgba(148,138,249,0); } 25% { box-shadow:0 0 0 3px rgba(148,138,249,.75); } }

.tclass-gr { font-size:11px; font-weight:800; letter-spacing:.04em; color:hsl(var(--h) 85% 75%); background:hsl(var(--h) 80% 60% / .14); padding:3px 8px; border-radius:8px; }
:root.light .tclass-gr { color:hsl(var(--h) 70% 38%); }
.tclass-sub { font-size:12px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* A teacher reads the count, not a hover hint: always shown, unlike .dsc-go. */
.tclass-open { font-size:11.5px; font-weight:800; color:#f5b841; background:rgba(245,184,65,.12); padding:3px 8px; border-radius:8px; }
:root.light .tclass-open { color:#9a6b00; background:rgba(245,184,65,.18); }
/* The detail of a teacher's focus ("20 of 24 done, 3 days overdue") is the
   point of it, so it gets its own line instead of being cut to "2". */
.focus-t.tstack { flex-direction:column; align-items:flex-start; gap:1px; }
.focus-t.tstack b { white-space:normal; }
.focus-t.tstack span { white-space:normal; overflow:visible; }

.tatt { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.tatt-row {
  display:flex; align-items:center; gap:14px; width:100%; padding:12px 14px; border-radius:14px; cursor:pointer;
  text-align:left; font:inherit; color:var(--text); background:var(--bg2); border:1px solid var(--border);
  transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.tatt-row:hover { border-color:rgba(168,158,255,.45); transform:translateY(-1px); }
.tatt-row:focus-visible { outline:2px solid #948af9; outline-offset:2px; }
.tatt-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tatt-b b { font-size:14px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tatt-b span { font-size:12px; color:var(--text2); }
.tatt-b em { font-style:normal; }
.tatt-b em.late { color:var(--red, #f47272); font-weight:700; }
.tatt-n { flex:none; width:92px; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.tatt-n span { font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.tatt-n i { display:block; width:100%; height:5px; border-radius:5px; background:var(--bg3); overflow:hidden; }
.tatt-n s { display:block; height:100%; background:linear-gradient(90deg, #948af9, #34d97a); text-decoration:none; }
@media (prefers-reduced-motion: reduce) { .tsetup-flash { animation:none; } .tsetup-bar i { transition:none; } }

/* Cover the status bar strip. On an iPad or iPhone, launched from the Home
   Screen, the app runs behind a see-through status bar, but a sticky bar
   stops just below it - so everything scrolled past showed through the strip
   above the top bar, and the bar looked like it was floating. Its glass now
   reaches up over the strip. Off-screen (and harmless) everywhere else. */
.topbar::before {
  content:''; position:absolute; left:0; right:0; bottom:100%; height:120px; pointer-events:none;
  background:var(--bg);
}

/* ═══════════════════════════════════════════════════════════════
   THE APP COVERS THE WHOLE SCREEN (viewport-fit=cover)
   Launched from the Home Screen on an iPad or iPhone, the app runs behind a
   see-through status bar. Without "cover", the iPad kept sticky and fixed
   things below the status bar while letting content scroll behind it - so
   the frozen top bar floated with the page showing above it. Now the page
   owns the whole screen: the top bar sits at the very top, its glass fills
   the status bar area, and its contents start below the clock. Everything
   pinned to the top makes the same room. env(...) is 0 on a computer.
   ═══════════════════════════════════════════════════════════════ */
/* .main > .topbar: layout.css (loaded after this file) resets the bar's
   padding with a shorthand on phones, which would wipe this out. */
.main > .topbar {
  height:calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
}
#notif-panel, #reminder-panel { top:calc(64px + env(safe-area-inset-top)); }
.sidebar-logo { padding-top:calc(22px + env(safe-area-inset-top)); }
#sb-close { top:calc(14px + env(safe-area-inset-top)); }
.sidebar { padding-left:env(safe-area-inset-left); }
.sidebar-footer { padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
.main { padding-bottom:env(safe-area-inset-bottom); padding-right:env(safe-area-inset-right); }
.subj-bar { top:calc(var(--topbar-h) + env(safe-area-inset-top)); }
.toast-el { bottom:calc(28px + env(safe-area-inset-bottom)); }

/* A solid top bar. It was frosted glass (80% opaque, blurred), so whatever
   scrolled under it still showed through - "a layer on top, but I can
   still see the stuff". Now nothing shows through; the world's colour is a
   faint wash in the bar itself. */
.main > .topbar {
  background:linear-gradient(180deg, rgba(var(--world-rgb), .07), rgba(var(--world-rgb), .03)), var(--bg);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
:root.light .main > .topbar { background:linear-gradient(180deg, rgba(var(--world-rgb), .06), rgba(var(--world-rgb), .02)), var(--bg); }

/* ═══════════════════════════════════════════════════════════════
   PROGRESS (student)
   Calm on purpose: one colour family (the Progress world's violet, plus
   each subject's own cool hue), no red or green, and no number without the
   evidence behind it. Effort first, then one move, then the detail.
═══════════════════════════════════════════════════════════════ */
.pg { max-width:880px; margin:0 auto; padding-bottom:40px; }
.pg-head { margin:4px 0 18px; }
.pg-head h1 { font-size:26px; font-weight:800; letter-spacing:-.4px; margin:0 0 6px; color:var(--text); }
.pg-head p { margin:0; font-size:13.5px; line-height:1.55; color:var(--text2); max-width:560px; }
.pg-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:16px; font-weight:800; color:var(--text); margin:28px 2px 10px; }
.pg-why { background:none; border:0; padding:0; font:inherit; font-size:12.5px; font-weight:600; color:var(--world2); cursor:pointer; }
.pg-why:hover { text-decoration:underline; }
.pg-card { background:linear-gradient(180deg, rgba(var(--world-rgb), .05), transparent 140px), var(--bg2);
  border:1px solid var(--border2); border-radius:20px; padding:18px 20px; }
.pg-note { font-size:12.5px; line-height:1.55; color:var(--text2); margin:10px 0 0; }
.pg-mini-h { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text3); margin:16px 0 8px; }
.pg-wide { width:100%; margin-top:14px; }

/* This week */
.pg-week-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.pg-stat { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pg-stat-n { font-size:30px; font-weight:800; letter-spacing:-.8px; line-height:1.05; color:var(--text); font-variant-numeric:tabular-nums; }
.pg-stat-n small { font-size:15px; font-weight:700; color:var(--text3); letter-spacing:0; }
.pg-flame { font-size:19px; margin-left:3px; vertical-align:3px; }
.pg-stat-l { font-size:12px; color:var(--text2); }
.pg-days { display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; margin-top:16px; }
.pg-day { display:flex; flex-direction:column; align-items:center; gap:6px; }
.pg-day-bar { width:100%; max-width:40px; height:54px; border-radius:10px; background:rgba(var(--world-rgb), .07);
  display:flex; align-items:flex-end; overflow:hidden; }
.pg-day-bar i { display:block; width:100%; border-radius:10px; background:linear-gradient(180deg, var(--world2), var(--world)); }
.pg-day-l { font-size:11px; font-weight:600; color:var(--text3); }
.pg-day.today .pg-day-l { color:var(--world2); font-weight:800; }
.pg-day.today .pg-day-bar { box-shadow:inset 0 0 0 1.5px rgba(var(--world-rgb), .45); }
.pg-week-foot { margin-top:12px; font-size:12.5px; color:var(--text2); }

/* Your next move */
.pg-next { margin-top:14px; padding:16px 20px; border-radius:20px;
  background:linear-gradient(120deg, rgba(var(--world-rgb), .20), rgba(var(--world-rgb), .07));
  border:1px solid rgba(var(--world-rgb), .30); }
.pg-next-k { font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--world2); }
.pg-next-t { font-size:17px; font-weight:800; color:var(--text); margin:6px 0 4px; overflow-wrap:anywhere; }
.pg-next-r { font-size:13px; line-height:1.55; color:var(--text2); margin-bottom:12px; overflow-wrap:anywhere; }

/* Subjects */
.pg-subs { padding:6px 8px; }
.pg-sub + .pg-sub { border-top:1px solid var(--border2); }
.pg-sub-row { display:flex; align-items:center; gap:12px; width:100%; padding:12px 10px; background:none; border:0;
  border-radius:14px; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.pg-sub-row:hover { background:rgba(255,255,255,.03); }
.pg-sub-row:focus-visible { outline:2px solid var(--world2); outline-offset:-2px; }
.pg-sub-ic { flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:19px;
  background:hsl(var(--hue) 80% 62% / .14); }
.pg-sub-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.pg-sub-top { display:flex; align-items:baseline; gap:8px; min-width:0; }
.pg-sub-top b { font-size:14.5px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.pg-sub-pct { margin-left:auto; flex:none; font-size:17px; font-weight:800; color:hsl(var(--hue) 90% 76%); font-variant-numeric:tabular-nums; }
.pg-sub-pct small { font-size:11.5px; font-weight:600; color:var(--text3); }
.pg-sub-pct.soft { color:var(--text2); }
.pg-early { flex:none; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:99px;
  color:var(--text2); background:rgba(255,255,255,.06); }
.pg-segs { display:flex; gap:3px; height:8px; }
.pg-segs i { flex:1; min-width:4px; border-radius:3px; background:hsl(var(--hue) 88% 66% / calc(.22 + .78 * var(--f))); }
.pg-segs i.off { background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.pg-sub-meta { font-size:12px; color:var(--text3); display:flex; flex-wrap:wrap; gap:4px 10px; }
.pg-trend { color:var(--text2); font-weight:600; }
.pg-trend.up { color:var(--world2); }
.pg-chev { flex:none; font-size:20px; color:var(--text3); transition:transform .2s var(--ease-out, ease); }
.pg-sub.open .pg-chev { transform:rotate(90deg); }
.pg-sub.unmeasured .pg-sub-ic { filter:saturate(.3); }
.pg-sub-detail { padding:0 12px 16px 60px; }
.pg-sub-detail > .pg-mini-h:first-child, .pg-sub-detail > .pg-note:first-child { margin-top:2px; }
.pg-sub-go { margin-top:16px; }
.pg-states-row { display:flex; flex-wrap:wrap; gap:6px; }
.pg-states-row span { font-size:12px; color:var(--text2); padding:5px 10px; border-radius:99px; background:rgba(var(--world-rgb), .08); }
.pg-states-row b { color:var(--text); font-weight:800; }

/* Label + bar + number rows, used everywhere below */
.pg-bar-row { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(60px, 1fr) 42px; align-items:center; gap:12px; padding:5px 0; }
.pg-bar-row > span:first-child { font-size:12.5px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-bar-row small { color:var(--text3); font-size:11px; margin-left:4px; }
.pg-bar-row > b { font-size:12.5px; font-weight:700; color:var(--text); text-align:right; font-variant-numeric:tabular-nums; }
.pg-bar { height:6px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.pg-bar i { display:block; height:100%; border-radius:99px; background:hsl(var(--hue, 262) 88% 68%); }

/* What you actually know */
.pg-know-head { font-size:17px; font-weight:800; color:var(--text); margin-bottom:12px; }
.pg-know-head b { color:var(--world2); }
.pg-know-head span { color:var(--text2); font-weight:600; }
.pg-stack { display:flex; height:14px; border-radius:99px; overflow:hidden; gap:2px; background:rgba(255,255,255,.04); }
.pg-stack i { display:block; height:100%; min-width:0; }
.k-proven { background:var(--world); }
.k-once { background:rgba(var(--world-rgb), .42); }
.k-learn { background:rgba(255,255,255,.10); }
.pg-legend { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.pg-legend div { display:grid; grid-template-columns:12px 44px 1fr; gap:8px; align-items:baseline; }
.pg-legend i { width:10px; height:10px; border-radius:3px; display:block; transform:translateY(1px); }
.pg-legend b { font-size:15px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.pg-legend span { font-size:12.5px; line-height:1.5; color:var(--text2); }
.pg-know-cta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px;
  padding:12px 14px; border-radius:14px; background:rgba(var(--world-rgb), .10); font-size:13px; color:var(--text2); }
.pg-know-cta b { color:var(--text); }

/* Mistakes that keep coming back */
.pg-mis + .pg-mis { border-top:1px solid var(--border2); margin-top:12px; padding-top:12px; }
.pg-mis-top { display:flex; align-items:baseline; gap:10px; }
.pg-mis-top b { font-size:14px; font-weight:700; color:var(--text); flex:1; min-width:0; overflow-wrap:anywhere; }
.pg-mis-top b span { color:var(--text3); font-weight:600; }
.pg-mis-n { flex:none; font-size:12px; font-weight:800; color:var(--world2); padding:2px 8px; border-radius:99px; background:rgba(var(--world-rgb), .12); }
.pg-mis-line { font-size:12.5px; line-height:1.5; color:var(--text2); margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.pg-mis-line span { font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text3); margin-right:8px; }

/* More detail */
.pg-more { margin-top:28px; background:var(--bg2); border:1px solid var(--border2); border-radius:20px; padding:4px 20px; }
.pg-more[open] { padding-bottom:18px; }
.pg-more summary { list-style:none; cursor:pointer; padding:14px 0; font-size:14.5px; font-weight:800; color:var(--text);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.pg-more summary::-webkit-details-marker { display:none; }
.pg-more summary::after { content:'›'; margin-left:auto; font-size:20px; color:var(--text3); transition:transform .2s; }
.pg-more[open] summary::after { transform:rotate(90deg); }
.pg-more summary span { font-size:12px; font-weight:500; color:var(--text3); }
.pg-more .activity-row { padding-left:0; padding-right:0; }

:root.light .pg-sub-row:hover { background:rgba(0,0,0,.03); }
:root.light .pg-segs i.off { box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
:root.light .pg-bar, :root.light .pg-stack { background:rgba(0,0,0,.06); }
:root.light .k-learn { background:rgba(0,0,0,.12); }
:root.light .pg-early { background:rgba(0,0,0,.05); }
:root.light .pg-sub-pct { color:hsl(var(--hue) 70% 45%); }
:root.light .pg-bar i { background:hsl(var(--hue, 262) 70% 55%); }

@media (max-width:600px) {
  .pg-head h1 { font-size:22px; }
  .pg-card, .pg-next { padding:16px; border-radius:18px; }
  .pg-subs { padding:4px; }
  .pg-sub-row { padding:12px 8px; gap:10px; }
  .pg-sub-detail { padding:0 8px 14px; }
  .pg-stat-n { font-size:25px; }
  .pg-days { gap:5px; }
  .pg-bar-row { grid-template-columns:minmax(0, 1fr) 70px 38px; gap:8px; }
  .pg-more { padding:2px 16px; }
}
.pg-sub.unmeasured .pg-sub-pct { color:var(--text3); }

/* Review: the learner answers, the marker decides. Calm verdicts - violet
   for right, quiet for the rest - and the tools centred however many there are. */
.rev-tools { display:flex; flex-wrap:wrap; justify-content:center; }
.rev-tool { flex:0 1 210px; }
@media(max-width:520px){ .rev-tool { flex:1 1 100%; } }
.rev-chip { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rev-chip-mistake::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent2); margin-right:7px; vertical-align:1px; }
.rev-opt { display:block; width:100%; text-align:left; font-family:var(--font); cursor:pointer; transition:border-color .15s, background .15s; }
.rev-opt:hover:not(:disabled) { border-color:var(--accent); }
.rev-opt:disabled { cursor:default; }
.rev-opt.picked { border-color:var(--accent); background:var(--accent-bg); color:var(--text); }
.rev-typed-wrap { position:relative; margin-top:14px; }
.rev-typed { width:100%; min-height:84px; resize:vertical; font-size:15px; line-height:1.5; padding-right:46px; }
.rev-typed-wrap .mic-btn { position:absolute; right:8px; top:8px; }
.rev-verdict { margin-top:16px; padding:12px 14px; border-radius:12px; background:var(--bg3); border:1px solid var(--border2);
  display:flex; flex-direction:column; gap:4px; animation:revFade .25s ease; }
.rev-verdict b { font-size:15px; font-weight:800; color:var(--text); }
.rev-verdict span { font-size:13px; line-height:1.5; color:var(--text2); }
.rev-v-correct { background:var(--accent-bg); border-color:var(--accent-border); }
.rev-v-correct b { color:var(--accent2); }
.rev-yours { margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--text2); }
.rev-answer-label { color:var(--text3); }
.rev-markfail { margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--text2); padding:10px 12px; border-radius:10px; background:var(--bg3); }
.rev-btn:disabled { opacity:.6; cursor:default; }
.rev-opt.right { border-color:var(--accent2); color:var(--text); }
.rev-opt.right::after { content:'  ✓'; color:var(--accent2); font-weight:800; }
.rev-answer:empty { display:none; }

/* ═══════════════════════════════════════════════════════════════
   PLANNER (Schedule) — three looks over one planner
   Every colour, font and corner comes from the --pl-* tokens below, so a
   look is a block of variables plus a few signature touches (washi tape
   and stickers for Cute, blueprint grid and corner brackets for Bold).
═══════════════════════════════════════════════════════════════ */
.pl {
  --pl-page: transparent; --pl-card: var(--bg2); --pl-line: var(--border2); --pl-ink: var(--text); --pl-ink2: var(--text2); --pl-ink3: var(--text3);
  --pl-acc: var(--world, #7c6ff7); --pl-acc2: var(--world2, #a89eff); --pl-acc-rgb: var(--world-rgb, 124,111,247);
  --pl-font: var(--font); --pl-r: 18px; --pl-r2: 10px;
  --c-study_session:#9a8cff; --c-revision:#5f9dff; --c-exam:#c08bff; --c-homework_deadline:#56c2f5;
  --c-reminder:#a7a3c7; --c-lesson:#7fa6ff; --c-meeting:#8e9bd6; --c-other:#8a88a6;
  position:relative; max-width:1100px; margin:0 auto; padding-bottom:90px; color:var(--pl-ink); font-family:var(--font);
}
.pl-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:4px 0 14px; }
.pl-title { margin:0 0 6px; font-family:var(--pl-font); font-size:30px; font-weight:800; letter-spacing:-.5px; color:var(--pl-ink); line-height:1.1; }
.pl-range { display:flex; align-items:center; gap:6px; font-size:14.5px; font-weight:700; color:var(--pl-ink2); }
.pl-range > span { min-width:120px; text-align:center; }
.pl-nav, .pl-today-btn { border:1px solid var(--pl-line); background:var(--pl-card); color:var(--pl-ink); border-radius:99px; cursor:pointer; font:inherit; }
.pl-nav { width:32px; height:32px; font-size:18px; line-height:1; display:grid; place-items:center; }
.pl-today-btn { padding:6px 12px; font-size:12px; font-weight:700; margin-left:4px; }
.pl-nav:hover, .pl-today-btn:hover { border-color:var(--pl-acc); }
.pl-head-r { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pl-looks { display:flex; gap:4px; padding:4px; border-radius:99px; background:var(--pl-card); border:1px solid var(--pl-line); }
.pl-look { display:flex; align-items:center; gap:6px; padding:5px 11px 5px 6px; border-radius:99px; border:0; background:none; cursor:pointer;
  font:600 12px var(--font); color:var(--pl-ink2); }
.pl-look.on { background:rgba(var(--pl-acc-rgb), .16); color:var(--pl-ink); }
.pl-look-sw { width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25); }
.pl-look-oryon .pl-look-sw { background:linear-gradient(135deg, #7c6ff7, #4f86f7); }
.pl-look-cute .pl-look-sw { background:linear-gradient(135deg, #ffc2df 0 50%, #c9b6ff 50%); }
.pl-look-bold .pl-look-sw { background:linear-gradient(135deg, #0b0f14 0 50%, #3db4ff 50%); box-shadow:inset 0 0 0 1.5px #3db4ff; }
.pl-seg { display:flex; padding:3px; border-radius:99px; background:var(--pl-card); border:1px solid var(--pl-line); }
.pl-seg button { border:0; background:none; padding:6px 14px; border-radius:99px; font:700 12px var(--font); color:var(--pl-ink2); cursor:pointer; }
.pl-seg button.on { background:var(--pl-acc); color:#fff; }

.pl-strip { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.pl-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; font-size:12.5px; font-weight:600;
  background:var(--pl-card); border:1px solid var(--pl-line); color:var(--pl-ink2); }
.pl-chip-exam { color:var(--pl-ink); border-color:rgba(var(--pl-acc-rgb), .45); background:rgba(var(--pl-acc-rgb), .12); }
.pl-chip-empty { font-weight:500; }

/* The week: four days, then three and the notes box - a planner spread */
/* Four across on a wide screen (Mon-Thu, then Fri-Sun + notes, like a planner
   spread); fewer when a column would get too narrow to read an entry. */
.pl-week { display:grid; grid-template-columns:repeat(auto-fill, minmax(max(200px, calc((100% - 36px) / 4)), 1fr)); gap:12px; }
.pl-day { position:relative; min-height:170px; padding:12px 12px 30px; border-radius:var(--pl-r); background:var(--pl-card);
  border:1px solid var(--pl-line); cursor:pointer; display:flex; flex-direction:column; transition:border-color .15s, transform .15s; }
.pl-day:hover { border-color:rgba(var(--pl-acc-rgb), .5); }
.pl-day.past { opacity:.72; }
.pl-day.today { border-color:var(--pl-acc); box-shadow:0 0 0 3px rgba(var(--pl-acc-rgb), .14); opacity:1; }
.pl-day-h { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.pl-dow { font-family:var(--pl-font); font-size:13px; font-weight:700; color:var(--pl-ink2); }
.pl-dnum { font-family:var(--pl-font); margin-left:auto; font-size:22px; font-weight:800; color:var(--pl-ink); line-height:1; }
.pl-day.today .pl-dnum { color:var(--pl-acc2); }
.pl-now { position:absolute; top:-9px; left:12px; padding:2px 9px; border-radius:99px; font-size:10.5px; font-weight:800;
  background:var(--pl-acc); color:#fff; }
.pl-items { display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.pl-item { display:flex; align-items:center; gap:7px; width:100%; min-width:0; padding:6px 8px; border-radius:var(--pl-r2); border:0; cursor:pointer;
  font:600 12.5px var(--font); color:var(--pl-ink); text-align:left;
  background:color-mix(in srgb, var(--c, var(--c-other)) 16%, transparent); box-shadow:inset 3px 0 0 var(--c, var(--c-other)); }
.pl-item:hover { background:color-mix(in srgb, var(--c, var(--c-other)) 26%, transparent); }
.pl-ic { flex:none; font-size:12px; }
.pl-it { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-time { flex:none; font-size:11px; font-weight:600; color:var(--pl-ink2); font-variant-numeric:tabular-nums; }
.pl-rep { flex:none; font-size:11px; color:var(--pl-ink3); }
.pl-empty { color:var(--pl-ink3); font-size:18px; opacity:.6; margin:auto; }
.pl-add { position:absolute; left:12px; bottom:9px; font-size:11.5px; font-weight:700; color:var(--pl-acc2); opacity:0; transition:opacity .15s; }
.pl-day:hover .pl-add { opacity:1; }
@media (hover:none) { .pl-add { opacity:.75; } }
.pl-notes { cursor:default; }
.pl-notes:hover { border-color:var(--pl-line); }
.pl-up { display:flex; align-items:center; gap:8px; min-width:0; }
.pl-up-when { flex:none; width:52px; font-size:11px; font-weight:700; color:var(--pl-ink3); }
.pl-note-empty { font-size:12.5px; color:var(--pl-ink3); }

.pl-t-study_session { --c:var(--c-study_session); } .pl-t-revision { --c:var(--c-revision); } .pl-t-exam { --c:var(--c-exam); }
.pl-t-homework_deadline { --c:var(--c-homework_deadline); } .pl-t-reminder { --c:var(--c-reminder); } .pl-t-lesson { --c:var(--c-lesson); }
.pl-t-meeting { --c:var(--c-meeting); } .pl-t-other { --c:var(--c-other); }

/* Month */
.pl-month { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; }
.pl-mh { font-family:var(--pl-font); font-size:12px; font-weight:700; color:var(--pl-ink3); text-align:center; padding:4px 0; }
.pl-cell { min-height:92px; padding:6px; border-radius:var(--pl-r2); background:var(--pl-card); border:1px solid var(--pl-line); cursor:pointer;
  display:flex; flex-direction:column; gap:4px; min-width:0; }
.pl-cell:hover { border-color:rgba(var(--pl-acc-rgb), .5); }
.pl-cell.out { opacity:.4; }
.pl-cell.today { border-color:var(--pl-acc); }
.pl-cnum { font-family:var(--pl-font); font-size:13px; font-weight:800; color:var(--pl-ink); }
.pl-cell.today .pl-cnum { color:var(--pl-acc2); }
.pl-citems { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pl-citems .pl-item { padding:3px 6px; font-size:10.5px; gap:4px; }
.pl-citems .pl-ic { font-size:10px; }
.pl-more { font-size:10.5px; color:var(--pl-ink3); font-weight:700; }
.pl-dots { display:none; gap:3px; }
.pl-dots i { width:6px; height:6px; border-radius:50%; background:var(--c, var(--c-other)); }

.pl-fab { position:fixed; right:28px; bottom:28px; width:56px; height:56px; border-radius:50%; border:0; cursor:pointer; z-index:50;
  background:var(--pl-acc); color:#fff; font-size:28px; font-weight:400; line-height:1; box-shadow:0 10px 28px rgba(var(--pl-acc-rgb), .45); }
.pl-fab:hover { transform:translateY(-2px); }

/* Add / edit sheet */
#pl-sheet { position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-end; justify-content:center; }
.pl-sheet-back { position:absolute; inset:0; background:rgba(0,0,0,.55); }
.pl-sheet { position:relative; width:100%; max-width:540px; max-height:92vh; overflow:auto; margin:0; padding:20px 20px 22px;
  background:var(--pl-card); border:1px solid var(--pl-line); border-radius:22px 22px 0 0; animation:insSheetUp .22s ease; }
.pl-sheet-h { font-family:var(--pl-font); font-size:20px; font-weight:800; margin-bottom:14px; color:var(--pl-ink); }
.pl-sheet .input { width:100%; }
.pl-in-title { font-size:16px; font-weight:600; }
.pl-types { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.pl-type { display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; cursor:pointer; font:600 12.5px var(--font);
  border:1px solid var(--pl-line); background:transparent; color:var(--pl-ink2); }
.pl-type.on { color:var(--pl-ink); border-color:var(--c); background:color-mix(in srgb, var(--c) 18%, transparent); }
.pl-row { display:flex; gap:10px; margin-bottom:10px; align-items:flex-end; flex-wrap:wrap; }
.pl-row > label { flex:1; min-width:110px; }
.pl-sheet label { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; color:var(--pl-ink2); }
.pl-sheet label span { font-weight:500; color:var(--pl-ink3); }
.pl-sheet .pl-check { flex-direction:row; align-items:center; gap:8px; font-size:13px; padding-bottom:10px; }
.pl-full { margin-bottom:10px; }
.pl-hint { font-size:12px; color:var(--pl-ink3); margin:4px 0 0; }
.pl-sheet-a { display:flex; align-items:center; gap:8px; margin-top:14px; }
@media (min-width:700px) { #pl-sheet { align-items:center; } .pl-sheet { border-radius:22px; } }

@media (max-width:600px) {
  .pl-title { font-size:24px; }
  .pl-week { grid-template-columns:1fr; gap:10px; }
  .pl-day { min-height:0; padding-bottom:12px; }
  .pl-day .pl-items:has(.pl-empty) { display:none; }
  .pl-add { position:static; opacity:.75; margin-top:6px; }
  .pl-month { gap:3px; }
  .pl-cell { min-height:54px; padding:5px 4px; align-items:center; }
  .pl-citems { display:none; }
  .pl-dots { display:flex; }
  .pl-fab { right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); }
  .pl-look { padding:5px 9px 5px 5px; }
}

/* ── Look: CUTE — pastel paper, washi tape, stickers, handwriting ── */
.pl[data-theme="cute"] {
  --pl-card:#fffafc; --pl-line:#f6d3e4; --pl-ink:#5a3553; --pl-ink2:#8f6a88; --pl-ink3:#b99ab2;
  --pl-acc:#ff7eb6; --pl-acc2:#e0579a; --pl-acc-rgb:255,126,182;
  --pl-font:'Gaegu', 'Comic Sans MS', cursive; --pl-r:24px; --pl-r2:12px;
  --c-study_session:#ff9ec7; --c-revision:#b9a4ff; --c-exam:#ffb77a; --c-homework_deadline:#7cc8ff;
  --c-reminder:#ffd66b; --c-lesson:#9fd4ff; --c-meeting:#ffc4a8; --c-other:#d6bfd0;
}
.pl[data-theme="cute"]:not(.pl-sheet) { padding:18px 18px 90px; border-radius:28px;
  background:radial-gradient(circle, #f3c9dc 1.2px, transparent 1.4px) 0 0/18px 18px, #fff3f8; }
.pl[data-theme="cute"] .pl-title { font-size:38px; font-weight:700; letter-spacing:0; color:#e0579a; }
.pl[data-theme="cute"] .pl-dow { font-size:19px; color:#8f6a88; }
.pl[data-theme="cute"] .pl-dnum { font-size:28px; font-weight:700; }
.pl[data-theme="cute"] .pl-item { font-weight:600; color:#5a3553; box-shadow:none; background:color-mix(in srgb, var(--c) 30%, #fff); border-radius:99px; padding:6px 10px; }
.pl[data-theme="cute"] .pl-day { box-shadow:0 6px 16px rgba(224, 87, 154, .08); }
.pl[data-theme="cute"] .pl-day:nth-child(odd) { transform:rotate(-.4deg); }
.pl[data-theme="cute"] .pl-day:nth-child(even) { transform:rotate(.35deg); }
/* washi tape */
.pl[data-theme="cute"] .pl-day::before { content:''; position:absolute; top:-8px; left:50%; width:64px; height:16px; transform:translateX(-50%) rotate(-3deg);
  border-radius:2px; opacity:.85;
  background:repeating-linear-gradient(45deg, #ffb8d6 0 6px, #ffe3ef 6px 12px); }
.pl[data-theme="cute"] .pl-day:nth-child(3n)::before { background:repeating-linear-gradient(45deg, #cbb8ff 0 6px, #eee6ff 6px 12px); transform:translateX(-50%) rotate(2deg); }
.pl[data-theme="cute"] .pl-day:nth-child(3n+1)::before { background:repeating-linear-gradient(90deg, #a9dcff 0 5px, #e3f4ff 5px 10px); }
.pl[data-theme="cute"] .pl-day.today { border-color:#ff9ec7; box-shadow:0 0 0 3px #ffd9ea, 0 8px 20px rgba(224, 87, 154, .15); }
.pl[data-theme="cute"] .pl-now { top:auto; bottom:8px; left:auto; right:10px; transform:rotate(-8deg); font-family:'Gaegu', cursive; font-size:15px;
  font-weight:700; background:#ff7eb6; padding:1px 10px; box-shadow:0 3px 0 #e0579a; }
.pl[data-theme="cute"] .pl-empty { font-size:26px; color:#f3b8d2; opacity:1; }
.pl[data-theme="cute"] .pl-chip { background:#fff; border-color:#f6d3e4; color:#8f6a88; font-family:'Gaegu', cursive; font-size:16px; font-weight:700; padding:4px 12px; }
.pl[data-theme="cute"] .pl-chip-exam { background:#fff0e3; border-color:#ffc79a; color:#5a3553; }
.pl[data-theme="cute"] .pl-looks, .pl[data-theme="cute"] .pl-seg, .pl[data-theme="cute"] .pl-nav, .pl[data-theme="cute"] .pl-today-btn { background:#fff; border-color:#f6d3e4; }
.pl[data-theme="cute"] .pl-look.on { background:#ffe3ef; }
.pl[data-theme="cute"] .pl-range { font-family:'Gaegu', cursive; font-size:19px; }
.pl[data-theme="cute"] .pl-mh, .pl[data-theme="cute"] .pl-cnum { font-size:16px; }
.pl[data-theme="cute"] .pl-notes { background:#fffbe8; border-color:#f7e3a1; }
.pl[data-theme="cute"] .pl-notes::before { background:repeating-linear-gradient(45deg, #ffe08a 0 6px, #fff5cf 6px 12px) !important; }
.pl[data-theme="cute"] .pl-fab { box-shadow:0 5px 0 #e0579a, 0 12px 24px rgba(224, 87, 154, .3); }
.pl-sheet[data-theme="cute"] .input { background:#fff; border-color:#f6d3e4; color:#5a3553; }
.pl-sheet[data-theme="cute"] .pl-sheet-h { font-size:28px; color:#e0579a; }

/* ── Look: BOLD — dark blueprint, sharp corners, big numbers, tags ── */
.pl[data-theme="bold"] {
  --pl-card:#0d1219; --pl-line:#1d2a38; --pl-ink:#e8f1ff; --pl-ink2:#8a9bb0; --pl-ink3:#56667a;
  --pl-acc:#3db4ff; --pl-acc2:#7cd4ff; --pl-acc-rgb:61,180,255;
  --pl-font:'Space Grotesk', var(--font); --pl-r:6px; --pl-r2:3px;
  --c-study_session:#3db4ff; --c-revision:#7c8cff; --c-exam:#f5d547; --c-homework_deadline:#7cf3ff;
  --c-reminder:#9aa8ba; --c-lesson:#5cc8ff; --c-meeting:#a5b4ff; --c-other:#5b6b80;
}
.pl[data-theme="bold"]:not(.pl-sheet) { padding:18px 18px 90px; border-radius:10px; border:1px solid #16212d;
  background:
    linear-gradient(rgba(61,180,255,.07) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(61,180,255,.07) 1px, transparent 1px) 0 0/24px 24px,
    #070a0f; }
.pl[data-theme="bold"] .pl-title { font-size:34px; font-weight:700; letter-spacing:.14em; }
.pl[data-theme="bold"] .pl-dow { font-size:12px; letter-spacing:.16em; }
.pl[data-theme="bold"] .pl-dnum { font-size:34px; font-weight:700; letter-spacing:-1px; }
.pl[data-theme="bold"] .pl-day.today { box-shadow:none; border-color:#1d2a38; }
/* corner brackets on today */
.pl[data-theme="bold"] .pl-day.today::before, .pl[data-theme="bold"] .pl-day.today::after { content:''; position:absolute; width:16px; height:16px; border:2px solid #3db4ff; }
.pl[data-theme="bold"] .pl-day.today::before { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.pl[data-theme="bold"] .pl-day.today::after { bottom:-1px; right:-1px; border-left:0; border-top:0; }
.pl[data-theme="bold"] .pl-now { background:transparent; color:#3db4ff; border:1px solid #3db4ff; border-radius:2px; letter-spacing:.14em; font-family:'JetBrains Mono', monospace; background-color:#070a0f; }
.pl[data-theme="bold"] .pl-item { background:#111a24; box-shadow:inset 2px 0 0 var(--c); font-family:var(--pl-font); }
.pl[data-theme="bold"] .pl-item:hover { background:#152131; }
.pl[data-theme="bold"] .pl-ic { font-family:'JetBrains Mono', monospace; font-size:9.5px; font-weight:600; letter-spacing:.08em; color:var(--c);
  padding:1px 4px; border:1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius:2px; }
.pl[data-theme="bold"] .pl-chip, .pl[data-theme="bold"] .pl-look, .pl[data-theme="bold"] .pl-seg button, .pl[data-theme="bold"] .pl-today-btn { border-radius:3px; font-family:var(--pl-font); }
.pl[data-theme="bold"] .pl-looks, .pl[data-theme="bold"] .pl-seg { border-radius:4px; }
.pl[data-theme="bold"] .pl-nav { border-radius:3px; }
.pl[data-theme="bold"] .pl-seg button.on { background:#3db4ff; color:#04121d; }
.pl[data-theme="bold"] .pl-chip { text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; }
.pl[data-theme="bold"] .pl-chip-exam { border-color:#f5d547; background:rgba(245,213,71,.08); color:#f5d547; }
.pl[data-theme="bold"] .pl-mh { letter-spacing:.14em; font-size:11px; }
.pl[data-theme="bold"] .pl-fab { border-radius:6px; color:#04121d; font-weight:600; box-shadow:0 0 0 1px #3db4ff, 0 10px 30px rgba(61,180,255,.35); }
.pl[data-theme="bold"] .pl-add { font-family:'JetBrains Mono', monospace; letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; }
.pl-sheet[data-theme="bold"] .input { background:#070a0f; border-color:#1d2a38; color:#e8f1ff; border-radius:3px; }
.pl-sheet[data-theme="bold"] .pl-sheet-h { letter-spacing:.12em; }
.pl-sheet[data-theme="bold"] .pl-type { border-radius:3px; }

/* Oryon look in light mode uses the app's own tokens; the other two are
   their own paper and keep it. */

/* Exam Mode: written answers are marked by Oryon, not by the learner.
   Calm states - violet for full marks, quiet for the rest, no red. */
.xm-mk-auto.no { background:var(--bg3); color:var(--text2); }
.xm-mk-ai { display:flex; flex-direction:column; gap:4px; padding:10px 13px; border-radius:10px; margin-top:8px;
  background:var(--bg3); border:1px solid var(--border2); }
.xm-mk-ai b { font-size:13.5px; font-weight:800; color:var(--text); }
.xm-mk-ai span { font-size:12.5px; line-height:1.5; color:var(--text2); }
.xm-mk-ai.ok { background:var(--accent-bg); border-color:var(--accent-border); }
.xm-mk-ai.ok b { color:var(--accent2); }
.xm-mk-ai.wait b::after { content:''; display:inline-block; width:10px; height:10px; margin-left:8px; border-radius:50%;
  border:2px solid var(--accent2); border-right-color:transparent; animation:spin .8s linear infinite; vertical-align:-1px; }
.xm-mk-ai.fail .xm-btn { align-self:flex-start; margin-top:6px; }
.xm-btn[disabled] { opacity:.55; cursor:default; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Maths Hub: marked by Oryon, not by the learner */
.mh-mark.part { color:var(--accent2); font-weight:600; }
.mh-mark-why { display:block; font-weight:500; color:var(--text2); font-size:12.5px; margin-top:2px; }
#mh-quiz-ans { margin-top:8px; }
#mh-quiz-actions { gap:8px; flex-wrap:wrap; }
.mh-check[disabled] { opacity:.6; cursor:default; }

/* ═══════════════════════════════════════════════════════════════
   FRIENDS — one calm page in the Friends world's blue
   Social, not social media: rings and streaks you keep together, races
   and quests, a one-tap cheer. Every colour comes from --world (blue).
═══════════════════════════════════════════════════════════════ */
.fr-wrap { max-width:760px; margin:0 auto; padding:6px 0 90px; }
.fr-top { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:4px 0 16px; }
.fr-title { margin:0; font-size:28px; font-weight:800; letter-spacing:-.5px; color:var(--text); }
.fr-sub-t { font-size:13px; color:var(--text2); margin-top:3px; }
.fr-addbtn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:99px; cursor:pointer;
  border:1px solid rgba(var(--world-rgb), .4); background:rgba(var(--world-rgb), .12); color:var(--text); font:700 13px var(--font); }
.fr-addbtn:hover { background:rgba(var(--world-rgb), .2); }
.fr-count { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px;
  background:var(--world); color:#fff; font-size:10.5px; font-weight:800; }
.fr-sec { margin-bottom:22px; }
.fr-h { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 2px 10px; font-size:16px; font-weight:800; color:var(--text); }
.fr-h-sub { font-size:12px; font-weight:500; color:var(--text3); }
.fr-empty { padding:22px 12px; text-align:center; color:var(--text3); font-size:13px; line-height:1.55; }
.fr-empty.small { padding:12px; }
.fr-link { background:none; border:0; padding:0; color:var(--world2); font:inherit; font-weight:700; cursor:pointer; }

/* Your crew: rings */
.fr-crew { display:flex; gap:14px; overflow-x:auto; padding:6px 2px 4px; scrollbar-width:none; }
.fr-crew::-webkit-scrollbar { display:none; }
.fr-crew-item { position:relative; flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; width:68px;
  background:none; border:0; padding:0; cursor:pointer; color:inherit; font:inherit; }
.fr-ring { position:relative; width:64px; height:64px; border-radius:50%; padding:3px; display:grid; place-items:center;
  background:var(--bg3); box-shadow:inset 0 0 0 2px var(--border3); transition:transform .15s; }
.fr-crew-item:hover .fr-ring { transform:translateY(-2px); }
.fr-ring.lit { background:conic-gradient(from 0deg, var(--world), var(--world2), #9d8bff, var(--world)); box-shadow:0 0 16px rgba(var(--world-rgb), .45);
  animation:frSpin 6s linear infinite; }
.fr-ring.lit .fr-crew-av { animation:frSpin 6s linear infinite reverse; }
.fr-ring.risk { background:transparent; box-shadow:inset 0 0 0 2px var(--world2); animation:frPulse 1.6s ease-in-out infinite; }
.fr-ring.add { background:transparent; box-shadow:inset 0 0 0 2px rgba(var(--world-rgb), .5); border:0; }
.fr-ring.add .fr-crew-av { color:var(--world2); font-size:26px; font-weight:400; background:rgba(var(--world-rgb), .08); }
.fr-crew-av { width:100%; height:100%; border-radius:50%; display:grid; place-items:center; font-size:28px; background:var(--bg2); }
.fr-crew-n { max-width:68px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; font-weight:600; color:var(--text2); }
.fr-crew-item.me .fr-crew-n { color:var(--text); }
.fr-crew-flame { position:absolute; top:44px; left:50%; transform:translateX(-50%); padding:1px 6px; border-radius:99px; font-size:10.5px; font-weight:800;
  background:var(--bg); border:1px solid rgba(var(--world-rgb), .4); color:var(--text); white-space:nowrap; }
.fr-crew-flame.risk { border-color:var(--world2); color:var(--world2); }
.fr-crew.skel .fr-crew-av { background:var(--bg3); }
.fr-hint { margin:10px 2px 0; font-size:12.5px; color:var(--text2); line-height:1.5; }
.fr-hint.muted { color:var(--text3); }
@keyframes frSpin { to { transform:rotate(360deg); } }
@keyframes frPulse { 0%,100% { box-shadow:inset 0 0 0 2px var(--world2), 0 0 0 0 rgba(var(--world-rgb), .5); } 50% { box-shadow:inset 0 0 0 2px var(--world2), 0 0 0 6px rgba(var(--world-rgb), 0); } }

/* Needs you */
.fr-need { display:grid; grid-template-columns:44px 1fr; gap:4px 12px; align-items:center; padding:14px; margin-bottom:8px; border-radius:18px;
  background:linear-gradient(120deg, rgba(var(--world-rgb), .16), rgba(var(--world-rgb), .05)); border:1px solid rgba(var(--world-rgb), .3); }
.fr-need-av { grid-row:span 2; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:22px; background:var(--bg2); }
.fr-need-t { font-size:13.5px; color:var(--text); line-height:1.45; }
.fr-need-t span { display:block; font-size:12px; color:var(--text2); }
.fr-need-a { display:flex; gap:8px; flex-wrap:wrap; }

/* Live now */
.fr-live { padding:14px 16px; margin-bottom:8px; border-radius:18px; background:var(--bg2); border:1px solid var(--border2); }
.fr-live.clash:not(.done):not(.wait) { border-color:rgba(var(--world-rgb), .35); box-shadow:0 0 0 3px rgba(var(--world-rgb), .07); }
.fr-live-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; font-weight:700; color:var(--text); }
.fr-live-tag { font-size:11px; font-weight:800; padding:3px 8px; border-radius:99px; background:rgba(var(--world-rgb), .14); color:var(--world2); }
.fr-live-clock { margin-left:auto; font-size:12px; font-weight:700; color:var(--world2); font-variant-numeric:tabular-nums; }
.fr-live-vs { font-weight:500; color:var(--text2); }
.fr-live-s { font-size:12.5px; color:var(--text2); margin-top:8px; line-height:1.5; }
.fr-live-a { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.fr-race { display:grid; grid-template-columns:72px 1fr 44px; align-items:center; gap:10px; margin-top:10px; font-size:12.5px; }
.fr-race-n { color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-race b { text-align:right; font-variant-numeric:tabular-nums; }
.fr-race-bar, .fr-qbar, .fr-bbar { height:10px; border-radius:99px; background:var(--bg3); overflow:hidden; }
.fr-qbar { margin-top:10px; }
.fr-clash-fill { display:block; height:100%; border-radius:99px; transition:width .9s cubic-bezier(.2,.8,.2,1); }
.fr-clash-fill.me { background:linear-gradient(90deg, var(--world), var(--world2)); }
.fr-clash-fill.them { background:linear-gradient(90deg, #7a6ff0, #a99cff); }
.fr-start { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; width:100%; padding:14px 16px; border-radius:18px;
  border:1.5px dashed rgba(var(--world-rgb), .45); background:transparent; color:var(--text); cursor:pointer; text-align:left; font:inherit; }
.fr-start:hover { background:rgba(var(--world-rgb), .07); }
.fr-start > span { grid-row:span 2; font-size:20px; }
.fr-start b { font-size:14px; }
.fr-start em { font-style:normal; font-size:12px; color:var(--text2); }

/* This week */
.fr-board { padding:8px; border-radius:18px; background:var(--bg2); border:1px solid var(--border2); }
.fr-brow { display:grid; grid-template-columns:28px 32px minmax(0, 1fr) minmax(60px, 1.2fr) 56px; align-items:center; gap:10px; padding:8px 8px; border-radius:12px; cursor:pointer; }
.fr-brow:hover { background:rgba(255,255,255,.03); }
.fr-brow.me { background:rgba(var(--world-rgb), .1); cursor:default; }
.fr-bpos { text-align:center; font-size:15px; font-weight:800; color:var(--text3); }
.fr-bav { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:17px; background:var(--bg3); }
.fr-bname { font-size:13.5px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-bxp { text-align:right; font-size:13px; font-variant-numeric:tabular-nums; }

/* Wins */
.fr-wins { border-radius:18px; background:var(--bg2); border:1px solid var(--border2); padding:4px 8px; }
.fr-win { display:grid; grid-template-columns:34px 1fr auto auto; align-items:center; gap:10px; padding:10px 6px; }
.fr-win + .fr-win { border-top:1px solid var(--border2); }
.fr-win-av { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:18px; background:var(--bg3); }
.fr-win-t { font-size:13px; color:var(--text2); line-height:1.4; }
.fr-win-t b { color:var(--text); }
.fr-win-time { font-size:11px; color:var(--text3); }
.fr-cheer { border:1px solid var(--border3); background:var(--bg3); border-radius:99px; padding:5px 10px; cursor:pointer; font-size:14px; transition:transform .12s; }
.fr-cheer:hover { transform:scale(1.08); border-color:rgba(var(--world-rgb), .5); }
.fr-cheer:active { transform:scale(.92); }
.fr-cheer.done { font-size:12px; color:var(--world2); background:rgba(var(--world-rgb), .1); }
.fr-share { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px; padding:0 4px;
  font-size:12.5px; color:var(--text3); background:none; border:0; }
.fr-burst { position:fixed; z-index:10000; pointer-events:none; font-size:20px; transform:translate(-50%, -50%);
  animation:frBurst .95s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes frBurst { 0% { opacity:0; transform:translate(-50%, -50%) scale(.4); } 15% { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(12deg); } }

/* Welcome (no friends yet) */
.fr-welcome { text-align:center; padding:34px 20px; border-radius:22px;
  background:radial-gradient(420px 200px at 50% 0, rgba(var(--world-rgb), .18), transparent 70%), var(--bg2); border:1px solid var(--border2); }
.fr-welcome-art { font-size:34px; letter-spacing:6px; margin-bottom:10px; }
.fr-welcome h2 { margin:0 0 8px; font-size:20px; color:var(--text); }
.fr-welcome p { margin:0 auto 16px; max-width:420px; font-size:13.5px; line-height:1.6; color:var(--text2); }

/* Sheets */
#fr-sheet { position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-end; justify-content:center; }
.fr-sheet-back { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .18s; }
#fr-sheet.open .fr-sheet-back { opacity:1; }
.fr-sheet { position:relative; width:100%; max-width:480px; max-height:88vh; overflow:auto; padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0; background:var(--surface); border:1px solid var(--border2); transform:translateY(24px); opacity:0; transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s; }
#fr-sheet.open .fr-sheet { transform:none; opacity:1; }
@media (min-width:700px) { #fr-sheet { align-items:center; } .fr-sheet { border-radius:24px; } }
.fr-sheet-x { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:0; background:var(--bg3); color:var(--text3); cursor:pointer; }
.fr-sheet-h { font-size:19px; font-weight:800; color:var(--text); margin-bottom:6px; }
.fr-sheet-p { font-size:12.5px; color:var(--text2); margin:0 0 12px; line-height:1.5; }
.fr-sheet-sub { margin:16px 0 4px; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--text3); }
.fr-results { margin-top:8px; }
.fr-sheet .fr-row { border-bottom:1px solid var(--border2); }
.fr-fs-head { display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:4px; }
.fr-ring.big { width:88px; height:88px; padding:4px; }
.fr-ring.big .fr-crew-av { font-size:40px; }
.fr-fs-name { font-size:20px; font-weight:800; color:var(--text); }
.fr-fs-status { font-size:12.5px; color:var(--world2); text-align:center; }
.fr-fs-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:16px 0; }
.fr-fs-stats div { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius:14px; background:var(--bg3); }
.fr-fs-stats b { font-size:16px; color:var(--text); }
.fr-fs-stats span { font-size:11px; color:var(--text3); text-align:center; }
.fr-fs-acts { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.fr-act { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 4px; border-radius:16px; cursor:pointer;
  border:1px solid rgba(var(--world-rgb), .3); background:rgba(var(--world-rgb), .08); color:var(--text); font:700 12px var(--font); transition:transform .12s, background .12s; }
.fr-act span { font-size:22px; }
.fr-act:hover:not(:disabled) { background:rgba(var(--world-rgb), .16); transform:translateY(-2px); }
.fr-act:active:not(:disabled) { transform:scale(.95); }
.fr-act:disabled { opacity:.5; cursor:default; }
.fr-fs-note { font-size:11.5px; color:var(--text3); text-align:center; margin-top:8px; }
.fr-wide { width:100%; margin-top:14px; }
.fr-more { margin-top:10px; }
.fr-more summary { list-style:none; cursor:pointer; text-align:center; font-size:12px; color:var(--text3); padding:6px; }
.fr-more summary::-webkit-details-marker { display:none; }
.fr-more-a { display:flex; justify-content:center; gap:8px; }
.fr-pick { display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:10px; margin-top:8px; }
.fr-pick-item { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border-radius:16px; border:1px solid var(--border2); background:var(--bg3);
  cursor:pointer; color:var(--text); font:600 12.5px var(--font); }
.fr-pick-item .fr-crew-av { width:48px; height:48px; font-size:24px; }
.fr-pick-item:hover { border-color:rgba(var(--world-rgb), .5); }
.fr-ch-group { margin-top:14px; }
.fr-ch-h { font-size:14px; font-weight:800; color:var(--text); margin-bottom:8px; }
.fr-ch-h span { display:block; font-size:12px; font-weight:500; color:var(--text2); margin-top:2px; }
.fr-ch-opt { display:block; width:100%; margin-bottom:6px; padding:11px 14px; border-radius:14px; text-align:left; cursor:pointer;
  border:1px solid var(--border2); background:var(--bg3); color:var(--text); font:600 13px var(--font); }
.fr-ch-opt:hover { border-color:rgba(var(--world-rgb), .5); background:rgba(var(--world-rgb), .08); }
.fr-ch-opt.clash { border-color:rgba(var(--world-rgb), .4); }

@media (max-width:600px) {
  .fr-title { font-size:24px; }
  .fr-top { align-items:center; }
  .fr-brow { grid-template-columns:24px 30px minmax(0, 1fr) 60px 48px; gap:8px; }
  .fr-fs-acts { grid-template-columns:repeat(2, 1fr); }
  .fr-win { grid-template-columns:34px 1fr auto; }
  .fr-win-time { display:none; }
}
@media (prefers-reduced-motion: reduce) { .fr-ring.lit, .fr-ring.lit .fr-crew-av, .fr-ring.risk { animation:none; } .fr-burst { display:none; } }
:root.light .fr-brow:hover { background:rgba(0,0,0,.03); }
.fr-addbtn { white-space:nowrap; flex:none; }
@media (max-width:600px) { .fr-addbtn-w { display:none; } }

/* ═══════════════════════════════════════════════════════════════
   LEADERBOARD — podium, rows with bars, and "what it takes"
   Friends world blue; the podium's gold/silver/bronze are the only warm
   notes, and no red or green anywhere (zones are labelled, not coloured).
═══════════════════════════════════════════════════════════════ */
.lb-wrap { max-width:720px; margin:0 auto; padding:6px 0 90px; }
.lb-head { margin:4px 0 14px; text-align:left; }
.lb-title { margin:0; font-size:28px; font-weight:800; letter-spacing:-.5px; color:var(--text); }
.lb-sub { font-size:13px; color:var(--text2); margin-top:3px; }
.lb-scope { display:flex; gap:4px; padding:4px; border-radius:99px; background:var(--bg2); border:1px solid var(--border2); margin-bottom:16px; }
.lb-scope-btn { flex:1; border:0; background:none; padding:9px 12px; border-radius:99px; cursor:pointer; font:700 13px var(--font); color:var(--text2); }
.lb-scope-btn.on { background:var(--world); color:#fff; box-shadow:0 4px 14px rgba(var(--world-rgb), .35); }
.lb-optbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:0 2px; margin-bottom:12px;
  font-size:12.5px; color:var(--text2); background:none; border:0; }
.lb-optbar b { color:var(--text); }
.lb-mini { border-radius:99px; padding:6px 12px; font:700 12px var(--font); border:1px solid rgba(var(--world-rgb), .4); background:rgba(var(--world-rgb), .12); color:var(--text); cursor:pointer; }
.lb-mini.ghost { background:none; border-color:var(--border3); color:var(--text2); }
.lb-join { padding:18px; border-radius:20px; margin-bottom:14px; background:linear-gradient(120deg, rgba(var(--world-rgb), .16), rgba(var(--world-rgb), .05)); border:1px solid rgba(var(--world-rgb), .3); }
.lb-join-title { font-size:15px; font-weight:800; color:var(--text); }
.lb-join-sub { font-size:12.5px; color:var(--text2); margin:4px 0 12px; line-height:1.5; }
.lb-join-btn { background:var(--world); color:#fff; border:0; }
.lb-tabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-bottom:16px; padding-bottom:2px; }
.lb-tabs::-webkit-scrollbar { display:none; }
.lb-tab { flex:none; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; cursor:pointer;
  border:1px solid var(--border3); background:var(--bg2); color:var(--text2); font:700 12.5px var(--font); }
.lb-tab.on { border-color:rgba(var(--world-rgb), .6); background:rgba(var(--world-rgb), .14); color:var(--text); }
.lb-tab-ic { font-size:13px; }
.lb-star { font-size:13px; color:var(--text3); padding-left:2px; }
.lb-star.on { color:#f5c84b; }

/* Podium */
.lb-podium { display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:end; gap:10px; margin:18px 0 14px; }
.lb-pod { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; animation:lbRise .7s cubic-bezier(.2,.8,.2,1) both; }
.lb-pod.p1 { animation-delay:.12s; } .lb-pod.p3 { animation-delay:.22s; }
.lb-crown { font-size:22px; margin-bottom:-4px; animation:lbBob 2.4s ease-in-out infinite; }
.lb-pod-av { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-size:30px; background:var(--bg3); box-shadow:0 0 0 3px var(--c, #b9c2d0); }
.lb-pod.p1 .lb-pod-av { width:76px; height:76px; font-size:38px; box-shadow:0 0 0 3px #f5c84b, 0 0 24px rgba(245,200,75,.35); }
.lb-pod.p2 { --c:#c3cad6; } .lb-pod.p3 { --c:#d39a73; }
.lb-pod.me .lb-pod-av { outline:2px solid var(--world2); outline-offset:4px; }
.lb-pod-n { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:700; color:var(--text); }
.lb-pod-v { font-size:13px; font-weight:800; color:var(--world2); font-variant-numeric:tabular-nums; }
.lb-pod-v small { font-size:10.5px; font-weight:600; color:var(--text3); }
.lb-pod-step { width:100%; display:grid; place-items:start center; padding-top:8px; margin-top:4px; border-radius:14px 14px 6px 6px;
  background:linear-gradient(180deg, rgba(var(--world-rgb), .22), rgba(var(--world-rgb), .05)); border:1px solid rgba(var(--world-rgb), .25); border-bottom:0; }
.lb-pod-step b { font-size:20px; font-weight:800; color:var(--text); }
.lb-pod.p1 .lb-pod-step { height:86px; background:linear-gradient(180deg, rgba(245,200,75,.22), rgba(var(--world-rgb), .05)); border-color:rgba(245,200,75,.3); }
.lb-pod.p2 .lb-pod-step { height:62px; }
.lb-pod.p3 .lb-pod-step { height:44px; }
@keyframes lbRise { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes lbBob { 0%,100% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-3px) rotate(6deg); } }

/* Rows */
.lb-list { border-radius:18px; background:var(--bg2); border:1px solid var(--border2); padding:6px; margin-bottom:10px; }
.lb-row2 { display:grid; grid-template-columns:28px 34px minmax(0, 1fr) minmax(50px, 1fr) auto; align-items:center; gap:10px; padding:9px 8px; border-radius:12px; }
.lb-row2.me { background:rgba(var(--world-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--world-rgb), .35); }
.lb-r-rank { text-align:center; font-size:14px; font-weight:800; color:var(--text3); font-variant-numeric:tabular-nums; }
.lb-r-av { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:18px; background:var(--bg3); }
.lb-r-n { font-size:13.5px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-r-bar { height:8px; border-radius:99px; background:var(--bg3); overflow:hidden; }
.lb-r-bar:empty { background:none; }
.lb-r-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, #7a6ff0, #a99cff); transition:width .9s cubic-bezier(.2,.8,.2,1); }
.lb-row2.me .lb-r-bar i { background:linear-gradient(90deg, var(--world), var(--world2)); }
.lb-r-v { text-align:right; font-size:13px; font-weight:800; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.lb-r-v small { font-size:10.5px; font-weight:600; color:var(--text3); }
.lb-zone { display:flex; align-items:center; gap:8px; margin:4px 8px; font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--text3); }
.lb-zone::before, .lb-zone::after { content:''; flex:1; height:1px; background:var(--border3); }
.lb-zone.up { color:var(--world2); }
.lb-zone.up::before, .lb-zone.up::after { background:rgba(var(--world-rgb), .45); }

/* Your spot */
.lb-spot { position:sticky; bottom:12px; z-index:3; display:flex; align-items:center; gap:12px; padding:12px 16px; margin-top:12px; border-radius:18px;
  background:linear-gradient(120deg, rgba(var(--world-rgb), .28), rgba(var(--world-rgb), .12)), var(--bg2); border:1px solid rgba(var(--world-rgb), .45);
  box-shadow:0 10px 30px rgba(0,0,0,.35); backdrop-filter:blur(10px); }
.lb-spot-r { font-size:22px; font-weight:800; color:var(--text); min-width:44px; text-align:center; }
.lb-spot-t { display:flex; flex-direction:column; gap:1px; }
.lb-spot-t b { font-size:14px; color:var(--text); }
.lb-spot-t span { font-size:12px; color:var(--text2); }
.lb-spot.top .lb-spot-r { color:#f5c84b; }

/* League */
.lg-hero { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:20px; margin-bottom:10px;
  background:radial-gradient(300px 120px at 10% 0, rgba(var(--world-rgb), .25), transparent 70%), var(--bg2); border:1px solid var(--border2); }
.lg-hero-ic { font-size:36px; }
.lg-hero-t { display:flex; flex-direction:column; }
.lg-hero-t b { font-size:18px; color:var(--text); }
.lg-hero-t span { font-size:12.5px; color:var(--text2); }
.lg-banner { padding:10px 14px; border-radius:14px; font-size:13px; font-weight:700; margin-bottom:10px; background:rgba(var(--world-rgb), .12); color:var(--text); border:1px solid rgba(var(--world-rgb), .3); }
.lg-banner.down { background:var(--bg3); border-color:var(--border3); color:var(--text2); }
.lb-overtake { color:var(--text); background:rgba(var(--world-rgb), .14); border-color:rgba(var(--world-rgb), .4); }
.lb-foot { text-align:center; font-size:12px; color:var(--text3); margin-top:18px; line-height:1.5; }

@media (max-width:600px) {
  .lb-title { font-size:24px; }
  .lb-podium { gap:6px; }
  .lb-pod-av { width:52px; height:52px; font-size:26px; }
  .lb-pod.p1 .lb-pod-av { width:64px; height:64px; font-size:32px; }
  .lb-row2 { grid-template-columns:24px 30px minmax(0, 1fr) auto; }
  .lb-r-bar { display:none; }
}
@media (prefers-reduced-motion: reduce) { .lb-pod, .lb-crown { animation:none; } }
@keyframes lbClimb {
  0%   { transform:translateY(calc(var(--climb, 1) * 52px)); box-shadow:0 6px 24px rgba(var(--world-rgb), .4); }
  70%  { transform:translateY(-4px); }
  100% { transform:none; box-shadow:none; }
}

/* ═══════════════════════════════════════════════════════════════
   SHARE HUB — a school library of useful things, not a feed
   Each kind has its own cool hue (--h). Friends-world blue for actions.
═══════════════════════════════════════════════════════════════ */
.sh-wrap { max-width:980px; margin:0 auto; padding:6px 0 90px; }
.sh-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:4px 0 14px; }
.sh-title { margin:0; font-size:28px; font-weight:800; letter-spacing:-.5px; color:var(--text); }
.sh-sub { font-size:13px; color:var(--text2); margin-top:3px; }
.sh-share-btn { flex:none; padding:9px 16px; border-radius:99px; border:0; cursor:pointer; background:var(--world); color:#fff; font:700 13px var(--font);
  box-shadow:0 6px 18px rgba(var(--world-rgb), .35); }
.sh-share-btn:hover { filter:brightness(1.08); }
.sh-filters { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.sh-chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.sh-chips::-webkit-scrollbar { display:none; }
.sh-chip { flex:none; padding:7px 12px; border-radius:99px; cursor:pointer; border:1px solid var(--border3); background:var(--bg2); color:var(--text2); font:700 12.5px var(--font); }
.sh-chip.on { color:var(--text); border-color:hsl(var(--h, 205) 80% 65% / .7); background:hsl(var(--h, 205) 80% 60% / .16); }
.sh-filters-r { display:flex; gap:8px; align-items:center; }
.sh-subject { padding:7px 12px; border-radius:99px; border:1px solid var(--border3); background:var(--bg2); color:var(--text); font:600 12.5px var(--font); max-width:190px; }
.sh-sort { display:flex; padding:3px; border-radius:99px; background:var(--bg2); border:1px solid var(--border3); }
.sh-sort button { border:0; background:none; padding:5px 11px; border-radius:99px; cursor:pointer; font:700 12px var(--font); color:var(--text2); }
.sh-sort button.on { background:var(--world); color:#fff; }

.sh-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.sh-card { display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:20px; background:var(--bg2); border:1px solid var(--border2);
  position:relative; overflow:hidden; transition:transform .15s, border-color .15s; }
.sh-card::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:hsl(var(--h) 85% 65%); opacity:.8; }
.sh-card:hover { transform:translateY(-2px); border-color:hsl(var(--h) 70% 60% / .45); }
.sh-card-top { display:flex; gap:12px; align-items:flex-start; }
.sh-kind-tile { flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:20px; background:hsl(var(--h) 80% 60% / .16); }
.sh-card-main { min-width:0; }
.sh-card-kind { font-size:11px; font-weight:700; color:hsl(var(--h) 85% 76%); text-transform:uppercase; letter-spacing:.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-card-title { margin:3px 0 0; font-size:15px; font-weight:800; line-height:1.3; color:var(--text); overflow-wrap:anywhere; }
.sh-card-desc { margin:0; font-size:13px; color:var(--text2); line-height:1.5; }
.sh-card-note { font-size:12.5px; color:var(--text2); line-height:1.55; white-space:pre-wrap; padding:10px 12px; border-radius:12px; background:var(--bg3);
  max-height:7.8em; overflow:hidden; -webkit-mask-image:linear-gradient(180deg, #000 60%, transparent); mask-image:linear-gradient(180deg, #000 60%, transparent); }
.sh-card-note.open { max-height:none; -webkit-mask-image:none; mask-image:none; }
.sh-card-dom { align-self:flex-start; font-size:11.5px; color:var(--text3); padding:3px 9px; border-radius:99px; background:var(--bg3); }
.sh-card-by { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text3); margin-top:auto; }
.sh-card-by b { color:var(--text2); }
.sh-by-av { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:13px; background:var(--bg3); }
.sh-card-actions { display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid var(--border2); }
.sh-open { padding:7px 14px; border-radius:99px; background:hsl(var(--h) 80% 60% / .18); color:var(--text); font:700 12.5px var(--font); text-decoration:none; border:0; cursor:pointer; }
.sh-open:hover { background:hsl(var(--h) 80% 60% / .28); }
.sh-up { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:99px; border:1px solid var(--border3); background:none; color:var(--text2); cursor:pointer; font:700 12.5px var(--font); }
.sh-up.on { border-color:rgba(var(--world-rgb), .6); background:rgba(var(--world-rgb), .14); color:var(--text); }
.sh-up.pop { animation:shPop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes shPop { 0% { transform:scale(1); } 50% { transform:scale(1.2); } 100% { transform:scale(1); } }
.sh-act { border:0; background:none; color:var(--text3); font:600 12px var(--font); cursor:pointer; padding:4px; }
.sh-act:hover { color:var(--text2); }
.sh-empty { grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:40px 20px; border-radius:20px;
  background:radial-gradient(400px 180px at 50% 0, rgba(var(--world-rgb), .14), transparent 70%), var(--bg2); border:1px dashed var(--border3); }
.sh-empty-art { font-size:32px; }
.sh-empty b { font-size:16px; color:var(--text); }
.sh-empty span { font-size:13px; color:var(--text2); max-width:360px; line-height:1.5; margin-bottom:6px; }
.sh-invite { display:flex; align-items:center; gap:12px; width:100%; margin-top:18px; padding:12px 16px; border-radius:16px; cursor:pointer; text-align:left;
  background:var(--bg2); border:1px solid var(--border2); color:var(--text); font:inherit; }
.sh-invite:hover { border-color:rgba(var(--world-rgb), .45); }
.sh-invite > span:first-child { font-size:20px; }
.sh-invite > span:nth-child(2) { flex:1; display:flex; flex-direction:column; }
.sh-invite b { font-size:13.5px; }
.sh-invite em { font-style:normal; font-size:12px; color:var(--text2); }

/* share sheet */
#sh-sheet { position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-end; justify-content:center; }
.sh-sheet-back { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .18s; }
#sh-sheet.open .sh-sheet-back { opacity:1; }
.sh-sheet { position:relative; width:100%; max-width:520px; max-height:90vh; overflow:auto; padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0; background:var(--surface); border:1px solid var(--border2); transform:translateY(24px); opacity:0; transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s;
  display:flex; flex-direction:column; gap:10px; }
#sh-sheet.open .sh-sheet { transform:none; opacity:1; }
@media (min-width:700px) { #sh-sheet { align-items:center; } .sh-sheet { border-radius:24px; } }
.sh-sheet-h { font-size:19px; font-weight:800; color:var(--text); }
.sh-form-kinds { display:flex; flex-wrap:wrap; gap:6px; }
.sh-kind { padding:7px 12px; border-radius:99px; cursor:pointer; border:1px solid var(--border3); background:none; color:var(--text2); font:700 12.5px var(--font); }
.sh-kind.on { color:var(--text); border-color:hsl(var(--h) 80% 65% / .7); background:hsl(var(--h) 80% 60% / .16); }
.sh-sheet .sh-input { width:100%; }
.sh-sheet .sh-area { resize:vertical; min-height:120px; }
.sh-rules { font-size:11.5px; color:var(--text3); line-height:1.5; }
.sh-form-actions { display:flex; justify-content:flex-end; gap:8px; }

@media (max-width:600px) {
  .sh-title { font-size:24px; }
  .sh-filters-r { width:100%; }
  .sh-subject { flex:1; max-width:none; }
  .sh-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEWORK (student) — due-date groups, subject colours, calm states
═══════════════════════════════════════════════════════════════ */
.hw2-wrap { max-width:820px; margin:0 auto; padding:6px 0 90px; }
.hw2-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 16px; }
.hw2-h1 { margin:0; font-size:28px; font-weight:800; letter-spacing:-.5px; color:var(--text); }
.hw2-sub { font-size:13px; color:var(--text2); margin-top:3px; }
.hw2-search { max-width:220px; border-radius:99px; }
.hw2-sec { margin-bottom:20px; }
.hw2-h { display:flex; align-items:center; gap:8px; margin:0 2px 10px; font-size:15px; font-weight:800; color:var(--text); }
.hw2-h.late { color:var(--world2); }
.hw2-count { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:99px; font-size:11px; font-weight:800;
  background:rgba(var(--world-rgb), .16); color:var(--world2); }

.hw2-card.tch-student-card { display:grid; grid-template-columns:54px 1fr; gap:14px; align-items:start; flex-direction:initial;
  padding:14px 16px; margin-bottom:10px; border-radius:20px; background:var(--bg2); border:1px solid var(--border2); box-shadow:inset 3px 0 0 hsl(var(--h) 80% 66%); }
.hw2-card.done { opacity:.8; box-shadow:none; }
.hw2-card.returned { border-color:rgba(var(--world-rgb), .45); background:linear-gradient(120deg, rgba(var(--world-rgb), .10), transparent 60%), var(--bg2); }
.hw2-date { display:flex; flex-direction:column; align-items:center; justify-content:center; height:54px; border-radius:14px; background:hsl(var(--h) 80% 60% / .14); }
.hw2-date b { font-size:20px; font-weight:800; line-height:1; color:var(--text); }
.hw2-date span { font-size:10.5px; font-weight:700; text-transform:uppercase; color:hsl(var(--h) 80% 78%); margin-top:2px; }
.hw2-card.late .hw2-date { box-shadow:inset 0 0 0 1.5px var(--world2); }
.hw2-main { min-width:0; display:flex; flex-direction:column; gap:6px; }
.hw2-tags { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.hw2-subj { font-size:11px; font-weight:800; padding:3px 9px; border-radius:99px; background:hsl(var(--h) 80% 60% / .18); color:hsl(var(--h) 85% 80%); }
.hw2-type { font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px; background:var(--bg3); color:var(--text2); }
.hw2-when { font-size:11.5px; font-weight:700; color:var(--text3); margin-left:auto; }
.hw2-when.soon { color:var(--world2); }
.hw2-title { margin:0; font-size:15.5px; font-weight:800; color:var(--text); line-height:1.3; overflow-wrap:anywhere; }
.hw2-from { font-size:12px; color:var(--text3); }
.hw2-desc { margin:2px 0 0; font-size:13px; color:var(--text2); line-height:1.55; }
.hw2-book { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--bg3); font-size:12.5px; color:var(--text2); }
.hw2-book b { font-size:16px; color:var(--text); }
.hw2-file { align-self:flex-start; padding:7px 12px; border-radius:99px; border:1px solid var(--border3); background:var(--bg3); color:var(--text); cursor:pointer; font:600 12.5px var(--font); }
.hw2-feedback { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; background:rgba(var(--world-rgb), .12); border:1px solid rgba(var(--world-rgb), .3); }
.hw2-feedback b { font-size:12.5px; color:var(--world2); }
.hw2-feedback span { font-size:13px; color:var(--text); line-height:1.5; }
.hw2-qs { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.hw2-q { padding:10px 12px; border-radius:12px; background:var(--bg3); }
.hw2-q-t { font-size:13px; font-weight:700; color:var(--text); margin-bottom:6px; }
.hw2-q textarea { width:100%; resize:vertical; font-size:13px; }
.hw2-tf { display:flex; gap:14px; font-size:13px; color:var(--text); }
.hw2-tf label { display:flex; align-items:center; gap:5px; cursor:pointer; }
.hw2-proof { display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:14px; border:1px dashed var(--border3); margin-top:2px; }
.hw2-proof-h { font-size:12.5px; font-weight:700; color:var(--text); }
.hw2-proof-h span { font-weight:500; color:var(--text3); margin-left:4px; }
.hw2-proof-row { display:flex; gap:8px; }
.hw2-proof-row .input { flex:1; font-size:12.5px; }
.hw2-proof .input { font-size:12.5px; }
.hw2-upload { flex:none; display:inline-flex; align-items:center; padding:8px 12px; border-radius:10px; cursor:pointer; background:rgba(var(--world-rgb), .12); color:var(--text); font:700 12.5px var(--font); }
.hw2-proof-prev { font-size:12px; color:var(--world2); align-items:center; gap:6px; }
.hw2-actions { display:flex; gap:8px; margin-top:4px; }
.hw2-donebar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:2px; }
.hw2-state { font-size:12px; font-weight:800; color:var(--world2); }
.hw2-proof-chip { font-size:11.5px; padding:3px 9px; border-radius:99px; background:var(--bg3); color:var(--text2); border:0; cursor:pointer; text-decoration:none; }
.hw2-note { font-size:11.5px; color:var(--text3); font-style:italic; }
.hw2-link { border:0; background:none; color:var(--world2); font:700 12px var(--font); cursor:pointer; padding:0; }
.hw2-done { margin-top:8px; }
.hw2-done summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:10px 2px; font-size:15px; font-weight:800; color:var(--text2); }
.hw2-done summary::-webkit-details-marker { display:none; }
.hw2-done summary::after { content:'›'; margin-left:auto; font-size:20px; color:var(--text3); transition:transform .2s; }
.hw2-done[open] summary::after { transform:rotate(90deg); }
.hw2-clear { display:flex; flex-direction:column; align-items:center; gap:6px; padding:36px 20px; text-align:center; border-radius:20px; margin-bottom:14px;
  background:radial-gradient(400px 160px at 50% 0, rgba(var(--world-rgb), .16), transparent 70%), var(--bg2); border:1px solid var(--border2); }
.hw2-clear div { font-size:32px; }
.hw2-clear b { font-size:16px; color:var(--text); }
.hw2-clear span { font-size:13px; color:var(--text2); }
.hw2-note-empty { text-align:center; padding:20px; color:var(--text3); font-size:13px; }
.hw2-smart { display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:14px; border-radius:20px;
  background:linear-gradient(120deg, rgba(var(--world-rgb), .18), rgba(var(--world-rgb), .05)); border:1px solid rgba(var(--world-rgb), .35); }
.hw2-smart.done { background:var(--bg2); border-color:var(--border2); }
.hw2-smart-ic { flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:18px; background:rgba(var(--world-rgb), .18); color:var(--world2); font-weight:800; }
.hw2-smart-main { flex:1; min-width:0; }
.hw2-smart-k { font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--world2); }
.hw2-smart-t { font-size:14.5px; font-weight:800; color:var(--text); margin-top:2px; overflow-wrap:anywhere; }
.hw2-smart-s { font-size:12px; color:var(--text2); margin-top:2px; }
.hw2-smart-bar { height:6px; border-radius:99px; background:var(--bg3); overflow:hidden; margin-top:8px; }
.hw2-smart-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--world), var(--world2)); }
@media (max-width:600px) {
  .hw2-h1 { font-size:24px; }
  .hw2-search { max-width:none; width:100%; }
  .hw2-card.tch-student-card { grid-template-columns:44px 1fr; gap:10px; padding:12px; }
  .hw2-date { height:46px; }
  .hw2-date b { font-size:17px; }
  .hw2-when { margin-left:0; width:100%; }
  .hw2-proof-row { flex-direction:column; }
  .hw2-smart { flex-wrap:wrap; }
}
.sh-wrap .sh-filters { flex-direction:row; justify-content:space-between; align-items:center; }
.sh-wrap .sh-chips { justify-content:flex-start; flex:1 1 auto; min-width:0; }
.sh-sheet .sh-form-kinds { background:none; border:0; padding:0; }

/* ═══════════════════════════════════════════════════════════════
   SOURCES — one library, three shelves (Mine / From teachers / From my
   school). Study-world blue; each source carries its subject's colour.
═══════════════════════════════════════════════════════════════ */
.src2-page { max-width:1040px; margin:0 auto; padding-bottom:90px; }
.src2-header { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:4px 0 14px; }
.src2-h1 { margin:0; font-size:28px; font-weight:800; letter-spacing:-.5px; color:var(--text); }
.src2-sub { font-size:13px; color:var(--text2); margin-top:3px; max-width:560px; }
.src-shelves { display:flex; gap:4px; padding:4px; border-radius:99px; background:var(--bg2); border:1px solid var(--border2); margin-bottom:16px; overflow-x:auto; scrollbar-width:none; }
.src-shelves::-webkit-scrollbar { display:none; }
.src-shelf { flex:1 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 14px; border-radius:99px; border:0; background:none;
  cursor:pointer; font:700 13px var(--font); color:var(--text2); white-space:nowrap; }
.src-shelf em { font-style:normal; font-size:11px; font-weight:800; padding:1px 7px; border-radius:99px; background:var(--bg3); color:var(--text3); }
.src-shelf.on { background:var(--world); color:#fff; box-shadow:0 4px 14px rgba(var(--world-rgb), .35); }
.src-shelf.on em { background:rgba(255,255,255,.22); color:#fff; }
.src-minebar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 12px; font-size:12.5px; color:var(--text3); }
.src-lock { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; margin-bottom:14px; border-radius:16px; font-size:13px; line-height:1.5; color:var(--text2);
  background:rgba(var(--world-rgb), .1); border:1px solid rgba(var(--world-rgb), .3); }
.src-lock b { color:var(--text); }
.src-lock > span { font-size:18px; }
.src-empty2 { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:40px 20px; border-radius:22px;
  background:radial-gradient(420px 180px at 50% 0, rgba(var(--world-rgb), .16), transparent 70%), var(--bg2); border:1px dashed var(--border3); }
.src-empty2-art { font-size:30px; letter-spacing:4px; }
.src-empty2 b { font-size:16px; color:var(--text); }
.src-empty2 span { font-size:13px; color:var(--text2); max-width:420px; line-height:1.55; margin-bottom:6px; }

.src2-page .src-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.src-card.src2 { display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:20px; background:var(--bg2); border:1px solid var(--border2);
  box-shadow:inset 3px 0 0 hsl(var(--h) 80% 66%); transition:transform .15s, border-color .15s; }
.src-card.src2:hover { transform:translateY(-2px); border-color:hsl(var(--h) 70% 60% / .4); }
.src2-top { display:flex; gap:12px; align-items:flex-start; }
.src2-ic { flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:20px; background:hsl(var(--h) 80% 60% / .15); }
.src2-head { min-width:0; }
.src2-meta { font-size:11px; font-weight:700; letter-spacing:.3px; color:hsl(var(--h) 85% 78%); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.src2-title { margin:3px 0 0; font-size:15px; font-weight:800; line-height:1.3; color:var(--text); overflow-wrap:anywhere; }
.src2-from { font-size:11.5px; color:var(--text3); margin-top:3px; }
.src2-file { display:flex; align-items:center; gap:8px; width:100%; padding:8px 12px; border-radius:12px; border:1px solid var(--border2); background:var(--bg3);
  color:var(--text); cursor:pointer; font:600 12.5px var(--font); text-align:left; }
.src2-file:disabled { cursor:default; }
.src2-file-n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.src2-file-s { font-size:11px; color:var(--text3); }
.src2-file-go { font-size:11.5px; font-weight:700; color:var(--world2); }
.src2-img { border-radius:12px; overflow:hidden; max-height:180px; cursor:pointer; }
.src2-preview { margin:0; font-size:12.5px; color:var(--text2); line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.src2-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:10px; border-top:1px solid var(--border2); }
.src2-words { font-size:11.5px; color:var(--text3); }
.src2-acts { display:flex; align-items:center; gap:6px; }
.src2-go { padding:6px 12px; border-radius:99px; border:0; cursor:pointer; background:var(--world); color:#fff; font:700 12px var(--font); }
.src2-go:hover { filter:brightness(1.08); }
.src2-btn { padding:6px 11px; border-radius:99px; border:1px solid var(--border3); background:none; color:var(--text2); cursor:pointer; font:700 12px var(--font); }
.src2-btn:hover { color:var(--text); border-color:rgba(var(--world-rgb), .5); }
.src2-icon { width:30px; height:30px; border-radius:50%; border:0; background:none; cursor:pointer; font-size:13px; opacity:.6; }
.src2-icon:hover { opacity:1; background:var(--bg3); }

/* Share Hub inside Sources */
.sh-wrap.embedded { padding:0; max-width:none; }
.sh-embed-note { font-size:12.5px; color:var(--text3); margin:0 2px 12px; }
.sh-save { padding:7px 12px; border-radius:99px; border:1px solid rgba(var(--world-rgb), .45); background:rgba(var(--world-rgb), .1); color:var(--text); cursor:pointer; font:700 12px var(--font); }
.sh-save:disabled { opacity:.7; cursor:default; }

@media (max-width:600px) {
  .src2-h1 { font-size:24px; }
  .src2-header { align-items:center; }
  .src-shelf { padding:8px 11px; font-size:12.5px; }
  .src2-page .src-grid { grid-template-columns:1fr; }
}
.sh-card-actions { flex-wrap:wrap; }
.sh-open, .sh-save, .sh-up { white-space:nowrap; }

/* Sources & Share Hub cards: quieter. Actions appear on hover (mouse),
   on keyboard focus, or after one tap (touch) - not on every card at once. */
.src2-header .btn-sm, .sh-share-btn { white-space:nowrap; flex:none; }
.src-minebar { justify-content:flex-end; }
.src2-warn { font-size:11.5px; color:var(--text3); }
.src-card.src2, .sh-card { cursor:pointer; }
.src-card.src2 .src2-foot, .sh-card .sh-card-actions {
  max-height:0; opacity:0; overflow:hidden; margin-top:0; padding-top:0; border-top-color:transparent;
  transition:max-height .22s ease, opacity .18s ease, padding-top .22s ease; }
.src-card.src2.sel .src2-foot, .sh-card.sel .sh-card-actions,
.src-card.src2:focus-within .src2-foot, .sh-card:focus-within .sh-card-actions {
  max-height:90px; opacity:1; padding-top:10px; border-top-color:var(--border2); }
@media (hover:hover) {
  .src-card.src2:hover .src2-foot, .sh-card:hover .sh-card-actions { max-height:90px; opacity:1; padding-top:10px; border-top-color:var(--border2); }
}
.src-card.src2.sel, .sh-card.sel { border-color:hsl(var(--h) 70% 60% / .55); }
.src2-foot { justify-content:flex-end; }
.src-card.src2, .sh-card { gap:8px; }
.sh-card-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sh-card-by { flex-wrap:nowrap; }
.sh-card-by > span:nth-child(2) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-by-up { margin-left:auto; flex:none; font-size:12px; font-weight:700; color:var(--text2); }

/* ═══════════════════════════════════════════════════════════════
   NOTEBOOKS — a shelf of real-looking notebooks
   A spine in the folder's colour, the first page as the cover, a big
   "carry on" card for the latest, and New / Import as cards on the shelf.
═══════════════════════════════════════════════════════════════ */
.nb-library .nb-lib-head { align-items:center; margin-bottom:14px; }
.nb-library .nb-lib-actions { align-items:center; }
.nb-library .nb-search { width:260px; max-width:100%; height:38px; border-radius:99px; background:var(--bg2); border:1px solid var(--border2); }
.nb-library .nb-btn-primary { background:var(--world); box-shadow:0 6px 18px rgba(var(--world-rgb), .35); border-radius:99px; }
.nb-library .nb-folders { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-bottom:18px; }
.nb-library .nb-folders::-webkit-scrollbar { display:none; }
.nb-library .nb-folder { flex:none; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:99px; cursor:pointer;
  border:1px solid var(--border3); background:var(--bg2); color:var(--text2); font:700 12.5px var(--font); }
.nb-library .nb-folder i { width:9px; height:9px; border-radius:3px; background:hsl(var(--h, 220) 80% 66%); }
.nb-library .nb-folder span { font-size:11px; color:var(--text3); }
.nb-library .nb-folder.on { color:var(--text); border-color:rgba(var(--world-rgb), .6); background:rgba(var(--world-rgb), .14); }
.nb-library .nb-folder-new { border-style:dashed; }

/* carry on */
.nb-hero { display:flex; align-items:center; gap:22px; width:100%; padding:18px; margin-bottom:26px; border-radius:24px; cursor:pointer; text-align:left; font:inherit; color:inherit;
  border:1px solid var(--border2); background:radial-gradient(520px 200px at 0 50%, hsl(var(--h) 80% 60% / .18), transparent 70%), var(--bg2); transition:border-color .15s, transform .15s; }
.nb-hero:hover { border-color:hsl(var(--h) 70% 60% / .5); transform:translateY(-2px); }
.nb-hero-book { position:relative; flex:none; width:130px; }
.nb-hero-t { display:flex; flex-direction:column; gap:5px; min-width:0; }
.nb-hero-k { font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:hsl(var(--h) 85% 76%); }
.nb-hero-t b { font-size:22px; font-weight:800; color:var(--text); line-height:1.2; overflow-wrap:anywhere; }
.nb-hero-t > span:not(.nb-hero-k) { font-size:13px; color:var(--text2); }
.nb-hero-t em { font-style:normal; font-weight:800; font-size:13.5px; color:var(--world2); margin-top:6px; }

/* the shelf */
.nb-library .nb-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:28px 20px; }
.nb-book { position:relative; display:block; }
.nb-book .bd-lib-page, .nb-hero-book .bd-lib-page { margin-left:10px; border-radius:3px 10px 10px 3px;
  box-shadow:0 1px 2px rgba(0,0,0,.2), 0 12px 26px rgba(0,0,0,.32); transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s; }
.nb-spine { position:absolute; left:0; top:3px; bottom:3px; width:14px; z-index:1; border-radius:6px 2px 2px 6px;
  background:linear-gradient(90deg, hsl(var(--h) 70% 38%), hsl(var(--h) 80% 58%) 70%, hsl(var(--h) 70% 44%)); box-shadow:2px 0 4px rgba(0,0,0,.3); }
.nb-spine::after { content:''; position:absolute; left:5px; top:10%; bottom:10%; width:1px; background:rgba(255,255,255,.28); }
.nb-page-btn { display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; }
.nb-page-btn:hover .bd-lib-page { transform:translateY(-4px) rotate(-1deg); box-shadow:0 2px 4px rgba(0,0,0,.2), 0 18px 34px rgba(0,0,0,.4); }
.nb-page-btn:active .bd-lib-page { transform:scale(.97); }
.nb-age { position:absolute; right:8px; bottom:8px; padding:2px 8px; border-radius:99px; font-size:10.5px; font-weight:700; background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(6px); }
.nb-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; aspect-ratio:1 / 1.414; width:calc(100% - 10px); margin-left:10px;
  border-radius:3px 12px 12px 3px; border:1.5px dashed rgba(var(--world-rgb), .45); background:rgba(var(--world-rgb), .05); cursor:pointer;
  color:var(--text2); font:700 13px var(--font); transition:background .15s, transform .15s; }
.nb-add:hover { background:rgba(var(--world-rgb), .12); transform:translateY(-3px); color:var(--text); }
.nb-add-ic { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:24px; font-weight:400; background:rgba(var(--world-rgb), .16); color:var(--world2); }
.nb-library .nb-card-meta { padding-left:10px; }
.nb-library .nb-card-title { font-weight:700; }

@media (max-width:600px) {
  .nb-library .nb-lib-actions { width:100%; }
  .nb-library .nb-search { flex:1; width:auto; }
  .nb-hero { gap:14px; padding:14px; }
  .nb-hero-book { width:92px; }
  .nb-hero-t b { font-size:17px; }
  .nb-library .nb-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 14px; }
}
.src-topics { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 0 14px; }
.src-topics::-webkit-scrollbar { display:none; }
.src-topic { flex:none; padding:6px 12px; border-radius:99px; border:1px solid var(--border3); background:var(--bg2); color:var(--text2); cursor:pointer; font:700 12px var(--font); }
.src-topic span { font-size:10.5px; color:var(--text3); margin-left:2px; }
.src-topic.on { color:var(--text); border-color:rgba(var(--world-rgb), .6); background:rgba(var(--world-rgb), .14); }
.src-organise { margin-top:14px; }
.src-minebar { position:relative; margin:-4px 2px 10px; }
.src2-page .src-grid, .sh-grid { align-items:start; }

/* Sources library bar: search, group by, type chips, grouped results */
.src-lib-bar { display:flex; gap:10px; align-items:center; margin:0 0 12px; flex-wrap:wrap; }
.src-q { flex:1 1 260px; min-width:0; height:40px; padding:0 16px; border-radius:99px; border:1px solid var(--border3); background:var(--bg2); color:var(--text); font:500 13.5px var(--font); }
.src-q:focus { outline:none; border-color:rgba(var(--world-rgb), .6); box-shadow:0 0 0 3px rgba(var(--world-rgb), .15); }
.src-groupby { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--text3); }
.src-groupby select { height:36px; padding:0 12px; border-radius:99px; border:1px solid var(--border3); background:var(--bg2); color:var(--text); font:700 12.5px var(--font); }
.src-group { margin-bottom:16px; }
.src-group summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; margin:0 2px 10px; font-size:14.5px; font-weight:800; color:var(--text); }
.src-group summary::-webkit-details-marker { display:none; }
.src-group summary::after { content:'›'; margin-left:auto; font-size:18px; color:var(--text3); transform:rotate(90deg); transition:transform .2s; }
.src-group:not([open]) summary::after { transform:none; }
.src-group-dot { width:10px; height:10px; border-radius:3px; background:hsl(var(--h) 80% 66%); }
.src-group-n { font-size:11px; font-weight:800; padding:1px 7px; border-radius:99px; background:var(--bg3); color:var(--text3); }
.src-none { padding:28px; text-align:center; color:var(--text3); font-size:13px; }
.src2-read { margin-left:6px; padding:4px 10px; border-radius:99px; border:1px solid rgba(var(--world-rgb), .5); background:rgba(var(--world-rgb), .12); color:var(--text); cursor:pointer; font:700 11.5px var(--font); }
.src2-read:disabled { opacity:.75; cursor:default; }
.src2-warn { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.sh-searchbar { margin-bottom:10px; }
@media (max-width:600px) { .src-groupby { width:100%; justify-content:space-between; } .src-groupby select { flex:1; } }

/* ═══════════════════════════════════════════════════════════════
   THE SKY — stars behind the whole app
   Background, so: no pointer events, no layout, dark mode only, nothing
   at all for reduced motion, and it hides while someone is writing.
═══════════════════════════════════════════════════════════════ */
#sky { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; contain:strict; }
#sky i { position:absolute; width:var(--s); height:var(--s); border-radius:50%; background:#fff;
  opacity:0; box-shadow:0 0 7px rgba(200,215,255,.8); animation:skyTwinkle var(--d) ease-in-out infinite; }
@keyframes skyTwinkle { 0%, 100% { opacity:calc(var(--o) * .35); transform:scale(.8); } 50% { opacity:var(--o); transform:scale(1.05); } }
.sky-shoot { position:absolute; left:var(--x); top:var(--y); width:var(--len); height:1.5px; border-radius:2px; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9));
  filter:drop-shadow(0 0 6px rgba(190,210,255,.8)); transform:rotate(18deg) translateX(-40px);
  animation:skyShoot 1.5s cubic-bezier(.25,.6,.35,1) forwards; }
@keyframes skyShoot {
  0% { opacity:0; transform:rotate(18deg) translate3d(-60px, -20px, 0) scaleX(.2); }
  12% { opacity:1; }
  70% { opacity:1; }
  100% { opacity:0; transform:rotate(18deg) translate3d(56vw, 18vw, 0) scaleX(1); }
}
/* The app sits above the sky; the page's own surface stops covering it. */
#app { position:relative; z-index:1; }
.main { background-color:transparent; }
#sky { background:radial-gradient(1200px 700px at 70% -10%, rgba(120,140,255,.06), transparent 70%); }
:root.light #sky { display:none; }
body:has(.cv-wrapper) #sky, body:has(.bd-write-page) #sky { display:none; }
@media (prefers-reduced-motion: reduce) { #sky { display:none; } }

/* ═══════════════════════════════════════════════════════════════
   FLASHCARDS home — one deck, one clear start
═══════════════════════════════════════════════════════════════ */
.fc2 { max-width:860px; margin:0 auto; }
.fc2-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 16px; }
.fc2-h1 { margin:0; font-size:28px; font-weight:800; letter-spacing:-.5px; color:var(--text); }
.fc2-ctx { font-size:13px; color:var(--text2); margin-top:3px; }
.fc2-head-a { display:flex; gap:8px; flex-wrap:wrap; }
.fc2-head-a .btn-sm { white-space:nowrap; }
.fc2-hero { display:flex; align-items:center; gap:26px; padding:22px 24px; border-radius:24px; margin-bottom:14px;
  background:radial-gradient(520px 200px at 0 50%, rgba(var(--world-rgb), .22), transparent 70%), var(--bg2);
  border:1px solid rgba(var(--world-rgb), .3); }
.fc2-hero.clear { border-color:var(--border2); background:var(--bg2); }
.fc2-stack { position:relative; flex:none; width:104px; height:132px; }
.fc2-stack-c { position:absolute; inset:0; border-radius:14px; background:var(--bg3); border:1px solid var(--border3); }
.fc2-stack-c.c3 { transform:rotate(-8deg) translate(-6px, 4px); opacity:.5; }
.fc2-stack-c.c2 { transform:rotate(-4deg) translate(-2px, 2px); opacity:.75; }
.fc2-stack-c.c1 { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:linear-gradient(160deg, rgba(var(--world-rgb), .35), rgba(var(--world-rgb), .12)), var(--bg2);
  border-color:rgba(var(--world-rgb), .45); box-shadow:0 12px 28px rgba(0,0,0,.35); }
.fc2-stack-c.c1 b { font-size:30px; font-weight:800; color:var(--text); line-height:1; }
.fc2-stack-c.c1 em { font-style:normal; font-size:11.5px; color:var(--text2); }
.fc2-hero-t { display:flex; flex-direction:column; gap:4px; min-width:0; }
.fc2-k { font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--world2); }
.fc2-hero-t > b { font-size:23px; font-weight:800; color:var(--text); line-height:1.2; }
.fc2-hero-s { font-size:13px; color:var(--text2); }
.fc2-hero-a { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.fc2-mastery { padding:18px 20px; border-radius:20px; background:var(--bg2); border:1px solid var(--border2); }
.fc2-m-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.fc2-m-top b { font-size:15px; font-weight:800; color:var(--text); }
.fc2-m-top span { font-size:15px; font-weight:800; color:var(--world2); font-variant-numeric:tabular-nums; }
.fc2-bar { display:flex; height:12px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.06); gap:2px; }
.fc2-bar i { display:block; height:100%; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.fc2-bar i.m, .fc2-legend i.m { background:var(--world); }
.fc2-bar i.l, .fc2-legend i.l { background:rgba(var(--world-rgb), .45); }
.fc2-bar i.n, .fc2-legend i.n { background:rgba(255,255,255,.14); }
.fc2-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:12.5px; color:var(--text2); }
.fc2-legend span { display:inline-flex; align-items:center; gap:6px; }
.fc2-legend i { width:9px; height:9px; border-radius:3px; }
.fc2-legend b { color:var(--text); }
.fc2-due { margin-left:auto; color:var(--world2); }
.fc2-note { margin:12px 0 0; font-size:11.5px; color:var(--text3); line-height:1.5; }
.fc2-empty { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:40px 20px; border-radius:24px;
  background:radial-gradient(440px 190px at 50% 0, rgba(var(--world-rgb), .18), transparent 70%), var(--bg2); border:1px dashed var(--border3); }
.fc2-empty-art span { display:grid; place-items:center; width:64px; height:64px; border-radius:20px; font-size:30px; background:rgba(var(--world-rgb), .16); }
.fc2-empty b { font-size:18px; color:var(--text); }
.fc2-empty > span { font-size:13.5px; color:var(--text2); max-width:420px; line-height:1.55; }
.fc2-empty-a { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
@media (max-width:600px) {
  .fc2-h1 { font-size:24px; }
  .fc2-hero { flex-direction:column; align-items:flex-start; gap:16px; padding:18px; }
  .fc2-stack { width:88px; height:112px; }
  .fc2-hero-t > b { font-size:20px; }
  .fc2-due { margin-left:0; }
}

/* ═══════════════════════════════════════════════════════════════
   FIRST RUN — the onboarding had NO stylesheet at all
   Every class below (#ob-root, .step, .say, .pick, .opt, .qmeta, .rrow…)
   was written in js/onboarding.js and never styled, so a new learner met
   raw markup wedged inside the app shell, with "Start" as plain text.
   It now takes the whole screen, above the sidebar and top bar.
═══════════════════════════════════════════════════════════════ */
#ob-root {
  position:fixed; inset:0; z-index:8000; display:flex; flex-direction:column; align-items:center;
  overflow-y:auto; overscroll-behavior:contain; padding:0 20px calc(40px + env(safe-area-inset-bottom));
  background:radial-gradient(900px 520px at 50% -10%, rgba(124,111,247,.20), transparent 70%), #07070d;
  color:var(--text); text-align:center;
}
/* its own sky, behind everything on the screen */
.ob-sky { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ob-sky .ob-dot { position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); border-radius:50%;
  background:#fff; opacity:var(--lo); animation:obTw var(--tw) ease-in-out var(--d) infinite; }
@keyframes obTw { 0%,100% { opacity:calc(var(--lo) * .4); } 50% { opacity:var(--lo); } }
.ob-neb { position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.ob-neb.n1 { width:420px; height:420px; left:-80px; top:-60px; background:rgba(124,111,247,.35); }
.ob-neb.n2 { width:360px; height:360px; right:-70px; bottom:-40px; background:rgba(79,134,247,.25); }
.ob-head { position:relative; width:100%; max-width:520px; padding:22px 0 10px; }
.ob-top { display:flex; gap:5px; justify-content:center; }
.ob-top .seg { width:22px; height:3px; border-radius:99px; background:rgba(255,255,255,.14); transition:background .3s; }
.ob-top .seg.on { background:var(--accent2); }
.ob-body { position:relative; width:100%; max-width:520px; flex:1; display:flex; align-items:center; justify-content:center; }
#ob-root .step { width:100%; padding:20px 0 30px; animation:obIn .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes obIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
#ob-root h2 { font-size:26px; font-weight:800; letter-spacing:-.5px; margin:0 0 10px; color:var(--text); line-height:1.25; }
#ob-root .say { font-size:14.5px; line-height:1.65; color:var(--text2); margin:0 auto 24px; max-width:420px; }
#ob-root .big { width:150px; height:150px; margin:0 auto 18px; }
#ob-root .brandmark { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:6px; }
#ob-root .brandmark img { width:54px; height:54px; }
#ob-root .brandmark span { font-size:26px; font-weight:800; letter-spacing:.22em; }
#ob-root .tagline { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--text3); margin:0; }
#ob-root .cta { display:block; width:100%; max-width:320px; margin:8px auto 0; padding:15px 22px; border:0; border-radius:99px;
  background:var(--accent); color:#fff; font:800 15px var(--font); cursor:pointer; box-shadow:0 10px 26px rgba(124,111,247,.4); }
#ob-root .cta:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); }
#ob-root .cta:disabled { opacity:.4; cursor:default; box-shadow:none; }
#ob-root .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:10px; margin:0 auto 22px; max-width:440px; }
#ob-root .pick { padding:14px 10px; border-radius:16px; cursor:pointer; background:rgba(255,255,255,.04);
  border:1.5px solid var(--border3); color:var(--text); font:700 14px var(--font); transition:border-color .15s, background .15s, transform .15s; }
#ob-root .pick:hover { border-color:rgba(124,111,247,.6); transform:translateY(-2px); }
#ob-root .pick.sel { border-color:var(--accent); background:rgba(124,111,247,.18); }
#ob-root .pick.tall { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; }
#ob-root .pick .ill { display:block; }
#ob-root .qmeta { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2); margin-bottom:14px; }
#ob-root .opts { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
#ob-root .opt { width:100%; padding:14px 18px; border-radius:14px; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.04); border:1.5px solid var(--border3); color:var(--text); font:600 14.5px var(--font); transition:border-color .15s, background .15s; }
#ob-root .opt:hover:not(:disabled) { border-color:rgba(124,111,247,.6); background:rgba(124,111,247,.10); }
#ob-root .rrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; margin-bottom:8px;
  border-radius:12px; background:rgba(255,255,255,.04); font-size:13.5px; color:var(--text2); }
#ob-root .rrow .ok { color:var(--accent2); font-weight:700; }
#ob-root .rrow .no { color:var(--text3); font-weight:700; }
@media (max-width:600px) {
  #ob-root h2 { font-size:22px; }
  #ob-root .big { width:112px; height:112px; }
  #ob-root .brandmark img { width:44px; height:44px; }
  #ob-root .brandmark span { font-size:21px; }
}
@media (prefers-reduced-motion: reduce) { .ob-sky .ob-dot { animation:none; } #ob-root .step { animation:none; } }

/* Ory in the first run: he is the subject, so he is drawn big and lit. */
#ob-root .big .ory, #ob-root .step .ory { width:100% !important; height:100% !important; }

/* ── Ory, the mascot ──
   The art is a transparent PNG with no baked background glow, so the halo
   belongs to the placement: none in a dense list, soft in a card, strong
   when he is the thing you are looking at. Until the art lands the brand
   star renders instead and takes no halo. */
.ory-img { display:block; }
/* SCOPED TO .ory-img ON PURPOSE. These were bare class selectors, and oryHtml
   puts ory-halo-* on the .ory SPAN too - so the animated Ory was getting this
   drop-shadow on his container AND the sized one below on his art, two
   stacked filters, one of them wrapping a mix-blend-mode child. */
.ory-img.ory-halo-soft { filter:drop-shadow(0 0 14px rgba(var(--world-rgb), .35)); }
.ory-img.ory-halo-strong { filter:drop-shadow(0 0 26px rgba(var(--world-rgb), .55)) drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.ory-img.ory-halo-none { filter:none; }
.ory-img.ory-fallback { filter:none; }

/* ═══════════════════════════════════════════════════════════════
   ORY, MOVING — one PNG, a few layers, no Lottie and no video
   Signature idle: ~3.6s of tiny squash, a blink and the smallest lean.
   Restrained on purpose: it has to survive being watched all day.
═══════════════════════════════════════════════════════════════ */
/* isolation, because .ory-shine blends with mix-blend-mode: screen. Without
   a group to blend INTO, that blend reaches all the way out to the overlay -
   which in Safari carries a backdrop-filter, and a blend crossing a
   backdrop-filtered surface is the other well-known way to get a rectangle.
   It should only ever be lighting HIM anyway. */
.ory { position:relative; display:inline-block; line-height:0; isolation:isolate; }
.ory-body { position:absolute; inset:0; display:block; transform-origin:50% 100%;
  animation-duration:3.6s; animation-iteration-count:infinite; animation-timing-function:cubic-bezier(.45,0,.35,1); }
.ory-art, .ory-shine { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
/* the same render, blurred and screened back over itself: this is what makes
   the cream band and the eyes pulse, with no second file */
.ory-shine { mix-blend-mode:screen; filter:blur(calc(var(--ory-px, 120px) * .03)) brightness(1.4) saturate(1.15); opacity:.10;
  animation:oryShine 5.2s ease-in-out infinite; pointer-events:none; }
.ory-lid { position:absolute; display:block; transform-origin:50% 50%;
  transform:scaleY(0); will-change:transform; filter:blur(calc(var(--ory-px, 120px) * .012)); }
@keyframes oryBlink { 0% { transform:scaleY(0) } 35% { transform:scaleY(1.06) } 65% { transform:scaleY(1.06) } 100% { transform:scaleY(0) } }
@keyframes oryShine { 0%,100% { opacity:.06 } 50% { opacity:.17 } }

/* the signature loop */
@keyframes oryIdle {
  0%   { transform:translateY(0) scale(1,1) rotate(0deg); }
  22%  { transform:translateY(1.5%) scale(1.025,.975) rotate(0deg); }
  46%  { transform:translateY(-1.8%) scale(.985,1.015) rotate(-1.1deg); }
  72%  { transform:translateY(0) scale(1.008,.992) rotate(.7deg); }
  100% { transform:translateY(0) scale(1,1) rotate(0deg); }
}
@keyframes oryTilt {
  0%   { transform:rotate(0deg) translateY(0); }
  30%  { transform:rotate(-7deg) translateY(-1.5%); }
  70%  { transform:rotate(-6deg) translateY(-1%); }
  100% { transform:rotate(0deg) translateY(0); }
}
@keyframes oryWave {
  0%   { transform:rotate(0deg); }
  20%  { transform:rotate(7deg); }
  40%  { transform:rotate(-4deg); }
  60%  { transform:rotate(6deg); }
  80%  { transform:rotate(-2deg); }
  100% { transform:rotate(0deg); }
}
@keyframes oryJump {
  0%   { transform:translateY(0) scale(1,1); }
  18%  { transform:translateY(3%) scale(1.12,.88); }
  46%  { transform:translateY(-22%) scale(.94,1.08); }
  72%  { transform:translateY(2%) scale(1.1,.9); }
  88%  { transform:translateY(-2%) scale(.98,1.02); }
  100% { transform:translateY(0) scale(1,1); }
}
@keyframes oryProud {
  0%,100% { transform:translateY(0) scale(1,1); }
  40%     { transform:translateY(-4%) scale(.99,1.03); }
}
@keyframes oryShrug {
  0%,100% { transform:translateY(0) rotate(0deg); }
  25%     { transform:translateY(-4%) rotate(-3deg); }
  55%     { transform:translateY(-4%) rotate(3deg); }
}
@keyframes orySleep {
  0%,100% { transform:scale(1,1) translateY(0); }
  50%     { transform:scale(1.03,.97) translateY(1.2%); }
}
/* He is already in the air in this one, so he does not take off - he just
   rides, the way a thing with no weight does. */
@keyframes oryFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%     { transform:translateY(-3.5%) rotate(1.5deg); }
}
/* settled poses - he is at a desk, on his books, holding a mug or asleep.
   They only breathe, slowly, so the laptop and the mug don't bounce. */
.ory[data-ory="sleeping"] .ory-body, .ory[data-ory="resting"] .ory-body,
.ory[data-ory="reading"] .ory-body, .ory[data-ory="focused"] .ory-body { animation-duration:6.5s; }
.ory[data-ory="wave"] .ory-body, .ory[data-ory="celebrate"] .ory-body,
.ory[data-ory="excited"] .ory-body, .ory[data-ory="oops"] .ory-body,
.ory[data-ory="hero"] .ory-body, .ory[data-ory="cheer"] .ory-body,
.ory[data-ory="party"] .ory-body, .ory[data-ory="dance"] .ory-body { animation-iteration-count:1; animation-duration:1.15s; }
/* fly and wink are ongoing rather than one-shot: he is mid-flight and
   mid-nap, and both loop slowly. spin holds still and lets its own art spin. */
.ory[data-ory="fly"] .ory-body { animation-duration:3.2s; }
.ory[data-ory="wink"] .ory-body { animation-duration:6.5s; }
/* the props must not be cropped away - the trophy, the cape and the hat are
   the whole point of those poses */
.ory.ory-crop[data-ory="hero"], .ory.ory-crop[data-ory="cheer"],
.ory.ory-crop[data-ory="trophy"], .ory.ory-crop[data-ory="party"],
.ory.ory-crop[data-ory="fly"], .ory.ory-crop[data-ory="spin"],
.ory.ory-crop[data-ory="heart"], .ory.ory-crop[data-ory="dance"],
.ory.ory-crop[data-ory="cool"], .ory.ory-crop[data-ory="starstruck"] {
  overflow:visible; border-radius:0; }
.ory.ory-crop[data-ory="hero"] .ory-body, .ory.ory-crop[data-ory="cheer"] .ory-body,
.ory.ory-crop[data-ory="trophy"] .ory-body, .ory.ory-crop[data-ory="party"] .ory-body,
.ory.ory-crop[data-ory="fly"] .ory-body, .ory.ory-crop[data-ory="spin"] .ory-body,
.ory.ory-crop[data-ory="heart"] .ory-body, .ory.ory-crop[data-ory="dance"] .ory-body,
.ory.ory-crop[data-ory="cool"] .ory-body, .ory.ory-crop[data-ory="starstruck"] .ory-body {
  scale:1; }
/* The tilt plays once too. It is a reaction, not a state, and a mascot that
   tilts every 2.6s forever on a card you leave open all evening is a fidget.
   Also what lets 'curious' be the face for a partly-right answer. */
.ory[data-ory="curious"] .ory-body, .ory[data-ory="thinking"] .ory-body {
  animation-iteration-count:1; animation-duration:2.6s; }

/* THE MARKING MOMENT, laid out. He stands beside the verdict rather than in
   the sentence, and he replaces the glyph he sits next to - the pose IS the
   icon, so keeping both would say the same thing twice. */
.ory-mark { display:flex; align-items:flex-start; gap:12px; }
.ory-mark > .ory { flex:none; margin:-8px -4px -10px 0; }
.ory-mark-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
/* the app owns the atmosphere; the art carries none */
/* THE HALO IS LIGHT BEHIND HIM, NOT A FILTER ON HIM.
   It used to be drop-shadow() on the <img>. Safari renders drop-shadow on a
   replaced element with object-fit against the element's BOX rather than its
   alpha, which is where the soft square around him came from - and stacking a
   second filter on the container made it worse. A radial gradient behind him
   cannot box, costs nothing per frame, and for a character who is a circle it
   is the same picture. */
.ory.ory-halo-soft::before, .ory.ory-halo-strong::before {
  content:''; position:absolute; left:50%; top:47%; translate:-50% -50%;
  width:132%; height:132%; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, rgba(var(--world-rgb), .26), rgba(var(--world-rgb), .10) 52%, transparent 74%);
}
.ory.ory-halo-strong::before {
  width:158%; height:158%;
  background:radial-gradient(closest-side, rgba(var(--world-rgb), .34), rgba(var(--world-rgb), .14) 48%, transparent 76%);
}
.ory.ory-fallback::before { display:none; }
.ory-body { z-index:1; }

/* AVATAR SIZES. The frame carries headroom so the jumping and arms-up poses
   fit; at 34-52px that headroom is most of the box and Ory comes out tiny.
   An avatar crops to the cookie, which is the part that reads small - his
   face. `scale` is the standalone property on purpose: it composes with the
   pose animation's `transform` instead of overwriting it. */
.ory.ory-crop { overflow:hidden; border-radius:50%; }
.ory.ory-crop .ory-body { transform-origin:50% 47%; scale:1.5; }

/* ...but only for the poses that ARE the cookie. wave, excited, celebrate and
   oops all say what they say with their ARMS, and the two jumps leave the
   frame entirely as they go up - cropped, they get sliced flat at the top and
   the whole message is thrown away. Those four ignore the crop and play in
   full. Keyed on the attribute, not a class, because react() swaps the pose on
   a mounted Ory without rebuilding him. */
.ory.ory-crop[data-ory="wave"], .ory.ory-crop[data-ory="excited"],
.ory.ory-crop[data-ory="celebrate"], .ory.ory-crop[data-ory="oops"] {
  overflow:visible; border-radius:0; }
.ory.ory-crop[data-ory="wave"] .ory-body, .ory.ory-crop[data-ory="excited"] .ory-body,
.ory.ory-crop[data-ory="celebrate"] .ory-body, .ory.ory-crop[data-ory="oops"] .ory-body {
  scale:1; }
/* until a pose's file exists the brand star stands in - no lids, no shine */
.ory.ory-fallback .ory-lid, .ory.ory-fallback .ory-shine { display:none; }
.ory-still .ory-body, .ory-still .ory-shine { animation:none !important; }
@media (prefers-reduced-motion: reduce) { .ory-body, .ory-shine, .ory-lid { animation:none !important; } }


/* ══════════════════════════════════════════════════════
   REMINDERS — the one-line note you write to yourself.
   The panel shares #notif-panel's shell above rather than getting a second
   dialect; only its contents differ.
   ══════════════════════════════════════════════════════ */
.rm-head { display:flex; align-items:center; justify-content:space-between;
  padding:2px 2px 10px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.rm-title { font-size:14px; font-weight:800; color:var(--text); }
.rm-x { background:none; border:none; color:var(--text3); font-size:20px; line-height:1;
  cursor:pointer; padding:2px 6px; }
.rm-add { width:100%; text-align:left; background:var(--accent-bg); color:var(--accent2);
  border:1px dashed var(--accent-border); border-radius:11px; padding:11px 13px;
  font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; margin-bottom:10px; }
.rm-add:hover { background:var(--bg3); }
.rm-list { display:flex; flex-direction:column; gap:6px; }
.rm-item { display:flex; align-items:flex-start; gap:10px; padding:8px 4px; border-radius:10px; }
.rm-item:hover { background:var(--bg3); }
.rm-item:hover .rm-del { opacity:1; }
/* Done is quieter, not gone. It stays for a week so the day's work is visible
   behind you, which is most of why ticking a thing off is satisfying at all. */
.rm-item.done .rm-text { opacity:.5; text-decoration:line-through; }
.rm-check { flex:none; width:22px; height:22px; margin-top:1px; border-radius:7px;
  border:1.5px solid var(--border3); background:var(--bg2); color:#fff;
  font-size:13px; font-weight:800; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; transition:background .14s, border-color .14s; }
.rm-item.done .rm-check { background:var(--green); border-color:var(--green); }
.rm-text { flex:1; min-width:0; font-size:13.5px; line-height:1.5; color:var(--text); overflow-wrap:anywhere; }
.rm-del { flex:none; background:none; border:none; color:var(--text3); font-size:17px;
  line-height:1; cursor:pointer; padding:0 2px; opacity:0; transition:opacity .14s; }
.rm-empty { padding:22px 8px; text-align:center; font-size:13px; line-height:1.6; color:var(--text3); }
.rm-foot { margin-top:12px; padding-top:10px; border-top:1px solid var(--border);
  font-size:11.5px; color:var(--text3); }
@media (hover:none) { .rm-del { opacity:.6; } }

/* ── TEACHER TOOLS ─────────────────────────────────────────────
   Term plan, Test builder, Mark book, Class tools. One shared kit (tk-*)
   in the learner app's materials - bg2 cards, soft hue glows, 16-20px
   radii - so the four read as one family and as the same app. */
.tk-page { max-width:1080px; margin:0 auto; padding:22px var(--page-pad) 60px; }
.tk-page.tk-wide { max-width:1320px; }
.tk-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px; }
.tk-kicker { font-size:11px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2); }
.tk-title { font-family:var(--font-serif); font-weight:400; font-size:clamp(28px, 4vw, 38px); line-height:1.05; margin:4px 0 6px; color:var(--text); }
.tk-sub { margin:0; max-width:640px; font-size:13.5px; line-height:1.55; color:var(--text2); }
.tk-card { position:relative; border:1px solid var(--border2); border-radius:18px; background:var(--bg2); padding:16px 18px; }
.tk-empty { padding:18px 6px; text-align:center; font-size:13.5px; line-height:1.6; color:var(--text2); }
.tk-loading { color:var(--text3); font-size:13px; padding:22px; text-align:center; }
.tk-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:11px; border:1px solid var(--border3);
  background:var(--bg3); color:var(--text); font:inherit; font-size:13px; font-weight:650; cursor:pointer; transition:background .15s var(--ease), border-color .15s var(--ease); }
.tk-btn:hover { background:var(--bg4); border-color:rgba(168,158,255,.35); }
.tk-btn svg, .tk-page .btn-primary svg { width:15px; height:15px; }
.tk-page .btn-primary { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:11px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.tk-mini { padding:5px 10px; border-radius:9px; border:1px solid var(--border3); background:transparent; color:var(--text2); font:inherit; font-size:12px; font-weight:650; cursor:pointer; }
.tk-mini:hover { color:var(--text); background:var(--bg3); }
.tk-seg { display:inline-flex; gap:3px; padding:3px; border-radius:12px; background:var(--bg3); border:1px solid var(--border2); flex-wrap:wrap; }
.tk-seg button { border:0; background:transparent; color:var(--text2); font:inherit; font-size:12.5px; font-weight:650; padding:7px 12px; border-radius:9px; cursor:pointer; }
.tk-seg button.on { background:var(--accent); color:#fff; box-shadow:0 2px 10px var(--accent-glow); }
.tk-seg button small { margin-left:6px; opacity:.7; font-weight:600; }
.tk-stat { flex:1; min-width:120px; padding:12px 14px; border-radius:14px; background:var(--bg2); border:1px solid var(--border2); }
.tk-stat b { display:block; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.tk-stat span { font-size:11.5px; color:var(--text3); }
.tk-stat.warn { border-color:var(--amber-border); background:linear-gradient(160deg, rgba(245,184,65,.10), transparent 70%), var(--bg2); }
.tk-stat.warn b { color:var(--amber); }

/* Class / subject picker */
.tk-ctx { margin-bottom:16px; }
.tk-chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.tk-chip { flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:128px; padding:9px 13px; border-radius:13px;
  border:1px solid var(--border2); background:var(--bg2); color:var(--text); font:inherit; cursor:pointer; text-align:left;
  transition:border-color .15s var(--ease), background .15s var(--ease); }
.tk-chip b { font-size:13.5px; font-weight:750; }
.tk-chip span { font-size:11px; color:var(--text3); white-space:nowrap; }
.tk-chip:hover { border-color:rgba(168,158,255,.3); }
.tk-chip.on { border-color:rgba(168,158,255,.6); background:linear-gradient(160deg, rgba(124,111,247,.20), transparent 75%), var(--bg2); box-shadow:0 0 0 3px rgba(124,111,247,.10); }
.tk-chip.on span { color:var(--accent2); }
.tk-chip-other { border-style:dashed; }
.tk-manual { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.tk-manual select { width:auto; min-width:160px; }
.tk-warn { margin-top:10px; padding:9px 12px; border-radius:11px; font-size:12.5px; line-height:1.5; color:var(--text2); background:var(--amber-bg); border:1px solid var(--amber-border); }

/* Big empty state shared by the tools */
.tb-blank { text-align:center; padding:34px 22px; }
.tb-blank-ic { width:52px; height:52px; margin:0 auto 12px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  color:var(--accent2); background:rgba(124,111,247,.14); }
.tb-blank-ic svg { width:26px; height:26px; }
.tb-blank h3 { margin:0 0 6px; font-size:17px; font-weight:750; color:var(--text); }
.tb-blank p { margin:0 auto 14px; max-width:420px; font-size:13px; line-height:1.6; color:var(--text2); }

/* ── Test builder ── */
.tb-layout { display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start; }
.tb-setup { position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; }
.tb-step { display:flex; align-items:center; gap:8px; margin:14px 0 8px; font-size:13px; font-weight:750; color:var(--text); }
.tb-step:first-child { margin-top:0; }
.tb-step span { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; background:var(--accent); color:#fff; }
.tb-step em { margin-left:auto; font-style:normal; font-size:11.5px; font-weight:600; color:var(--text3); }
.tb-quick { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.tb-term-h { font-size:10.5px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); margin:10px 0 4px; }
.tb-topic { display:flex; gap:9px; align-items:flex-start; padding:7px 9px; border-radius:10px; cursor:pointer; font-size:13px; line-height:1.35; color:var(--text2); }
.tb-topic:hover { background:var(--bg3); }
.tb-topic.on { color:var(--text); background:rgba(124,111,247,.10); }
.tb-topic input { accent-color:var(--accent); margin-top:2px; }
.tb-mixes { display:grid; gap:6px; }
.tb-mix { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px; text-align:left; padding:9px 11px; border-radius:12px;
  border:1px solid var(--border2); background:var(--bg3); color:var(--text); font:inherit; cursor:pointer; }
.tb-mix b { font-size:13px; }
.tb-mix span { grid-column:1; font-size:11px; color:var(--text3); }
.tb-mix.on { border-color:rgba(168,158,255,.6); background:rgba(124,111,247,.12); }
.tb-mixbar { grid-column:2; grid-row:1 / span 2; display:flex; width:70px; height:8px; border-radius:6px; overflow:hidden; gap:2px; }
.tb-mixbar i { background:hsl(var(--h) 75% 60%); }
.tb-check { display:flex; gap:8px; align-items:center; margin:12px 0 4px; font-size:12.5px; color:var(--text2); cursor:pointer; }
.tb-check input { accent-color:var(--accent); }
.tb-build { width:100%; justify-content:center; margin-top:14px; padding:12px !important; font-size:14px !important; }

.tb-sheet { padding:0; overflow:hidden; }
.tb-sheet-head { padding:16px 18px 14px; border-bottom:1px solid var(--border2);
  background:radial-gradient(90% 140% at 100% 0%, rgba(124,111,247,.14), transparent 60%), var(--bg2); }
.tb-title { width:100%; border:0; border-bottom:1px dashed transparent; background:transparent; color:var(--text); font-family:var(--font-serif); font-size:24px; padding:2px 0; outline:none; }
.tb-title:hover, .tb-title:focus { border-bottom-color:var(--border3); }
.tb-sum { display:flex; gap:22px; margin:8px 0 12px; }
.tb-sum b { font-size:22px; font-weight:800; color:var(--text); margin-right:5px; }
.tb-sum span { font-size:12px; color:var(--text3); }
.tb-levels { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:14px; }
.tb-lv-top { display:flex; justify-content:space-between; font-size:11px; color:var(--text3); margin-bottom:4px; }
.tb-lv-top b { color:hsl(var(--h) 80% 70%); }
.tb-lv-bar { position:relative; height:6px; border-radius:6px; background:var(--bg4); }
.tb-lv-bar i { display:block; height:100%; border-radius:inherit; background:hsl(var(--h) 75% 60%); transition:width .4s var(--ease); }
.tb-lv-bar em { position:absolute; top:-3px; width:2px; height:12px; margin-left:-1px; background:var(--text2); border-radius:2px; opacity:.7; }
.tb-actions { display:flex; gap:8px; flex-wrap:wrap; }
.tb-assignbox { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top:12px; padding:12px; border-radius:12px; background:var(--bg3); font-size:12.5px; line-height:1.5; color:var(--text2); }
.tb-assignbox > div { flex:1 1 260px; }
.tb-assignbox label { display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--text3); }
.tb-sec { padding:14px 18px 4px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent2); }
.tb-sec span { margin-left:8px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text3); }
.tb-q { display:grid; grid-template-columns:30px 1fr auto; gap:12px; padding:12px 18px; border-top:1px solid var(--border); transition:background .3s; }
.tb-q:hover { background:rgba(255,255,255,.015); }
.tb-q.tb-flash { animation:tb-flash 1.2s var(--ease); }
@keyframes tb-flash { 0% { background:rgba(124,111,247,.22); } 100% { background:transparent; } }
.tb-qn { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:var(--bg3); color:var(--text2); }
.tb-qt { font-size:14px; line-height:1.55; color:var(--text); white-space:pre-wrap; }
.tb-opts { margin:8px 0 0; padding-left:0; list-style:none; counter-reset:o; display:grid; gap:4px; }
.tb-opts li { counter-increment:o; font-size:13px; color:var(--text2); }
.tb-opts li::before { content:counter(o, upper-alpha) ". "; font-weight:750; color:var(--text3); }
.tb-qmeta { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.tb-tag { font-size:10.5px; font-weight:650; padding:2px 8px; border-radius:20px; background:var(--bg3); color:var(--text3); }
.tb-tag.lv { background:hsl(var(--h) 70% 55% / .14); color:hsl(var(--h) 80% 72%); }
.tb-ans { margin-top:6px; font-size:12.5px; }
.tb-ans summary { cursor:pointer; color:var(--text3); width:max-content; }
.tb-ans div { margin-top:4px; padding:8px 10px; border-radius:9px; background:var(--green-bg); border:1px solid var(--green-border); color:var(--text2); white-space:pre-wrap; line-height:1.5; }
.tb-qside { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.tb-marks { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text3); }
.tb-marks input { width:46px; padding:5px 6px; border-radius:8px; border:1px solid var(--border3); background:var(--bg3); color:var(--text); font:inherit; font-weight:750; font-size:13px; text-align:center; }
.tb-qtools { display:flex; gap:2px; opacity:.55; transition:opacity .15s; }
.tb-q:hover .tb-qtools, .tb-q:focus-within .tb-qtools { opacity:1; }
.tb-qtools button { width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.tb-qtools button:hover:not(:disabled) { background:var(--bg4); color:var(--text); }
.tb-qtools button:disabled { opacity:.25; cursor:default; }
.tb-qtools svg { width:15px; height:15px; }
.tb-add { display:block; width:calc(100% - 36px); margin:10px 18px 16px; padding:11px; border-radius:12px; border:1px dashed var(--border3); background:transparent; color:var(--text2); font:inherit; font-size:13px; font-weight:650; cursor:pointer; }
.tb-add:hover { color:var(--text); border-color:rgba(168,158,255,.4); }
.tb-addwrap { display:grid; gap:6px; padding:0 18px 18px; max-height:360px; overflow:auto; }
.tb-addq { display:flex; justify-content:space-between; gap:10px; text-align:left; padding:9px 11px; border-radius:10px; border:1px solid var(--border2); background:var(--bg3); color:var(--text); font:inherit; font-size:12.5px; cursor:pointer; }
.tb-addq em { flex:none; font-style:normal; font-size:11px; color:var(--text3); }
.tb-addq:hover { border-color:rgba(168,158,255,.4); }
.tb-savedgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.tb-saved { display:flex; flex-direction:column; gap:3px; text-align:left; padding:13px 14px; border-radius:14px; border:1px solid var(--border2); background:var(--bg2); color:var(--text); font:inherit; cursor:pointer; }
.tb-saved b { font-size:13.5px; line-height:1.35; }
.tb-saved span, .tb-saved em { font-size:11.5px; font-style:normal; color:var(--text3); }
.tb-saved:hover { border-color:rgba(168,158,255,.4); }

/* ── Term plan ── */
.tp-top { display:grid; grid-template-columns:1.1fr 1fr; gap:14px; margin-bottom:16px; }
.tp-pace { --tone:262; background:radial-gradient(90% 140% at 0% 0%, hsl(var(--tone) 80% 60% / .16), transparent 60%), var(--bg2); border-color:hsl(var(--tone) 70% 60% / .3); }
.tp-pace.tone-good { --tone:150; } .tp-pace.tone-ahead { --tone:175; } .tp-pace.tone-behind { --tone:38; } .tp-pace.tone-calm { --tone:220; }
.tp-pace-k { font-size:11px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); }
.tp-pace-v { font-size:24px; font-weight:800; letter-spacing:-.02em; margin:4px 0 12px; color:hsl(var(--tone) 80% 72%); }
.tp-bars { display:grid; gap:8px; }
.tp-bar { display:grid; grid-template-columns:96px 1fr 44px; align-items:center; gap:10px; font-size:12px; color:var(--text2); }
.tp-bar > div { height:8px; border-radius:8px; background:var(--bg4); overflow:hidden; }
.tp-bar i { display:block; height:100%; border-radius:inherit; background:var(--text3); transition:width .5s var(--ease); }
.tp-bar.taught i { background:linear-gradient(90deg, #948af9, #34d97a); }
.tp-bar b { text-align:right; color:var(--text); }
.tp-note { margin-top:10px; font-size:12px; color:var(--amber); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tp-next-t { font-size:19px; font-weight:800; margin:6px 0 2px; color:var(--text); }
.tp-next-s { font-size:12.5px; color:var(--text3); margin-bottom:12px; }
.tp-next-a { display:flex; gap:8px; flex-wrap:wrap; }
.tp-terms { margin-bottom:12px; }
.tp-list { padding:6px 8px; }
.tp-row { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:12px; padding:10px 8px; border-radius:12px; }
.tp-row + .tp-row { border-top:1px solid var(--border); }
.tp-row.open { background:var(--bg3); }
.tp-tick { width:32px; height:32px; border-radius:50%; border:2px solid var(--border3); background:transparent; color:var(--text3); font:inherit; font-size:12px; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .18s var(--ease); }
.tp-tick:hover { border-color:var(--accent2); color:var(--text); }
.tp-tick svg { width:16px; height:16px; }
.tp-row.taught .tp-tick { border-color:var(--green); background:var(--green); color:#07170d; }
.tp-row.in_progress .tp-tick { border-color:var(--accent2); }
.tp-half { width:14px; height:14px; border-radius:50%; background:linear-gradient(90deg, var(--accent2) 50%, transparent 50%); }
.tp-main { cursor:pointer; min-width:0; }
.tp-t { font-size:14px; font-weight:700; color:var(--text); }
.tp-row.taught .tp-t { color:var(--text2); }
.tp-s { font-size:12px; color:var(--text3); margin-top:2px; line-height:1.45; }
.tp-row.in_progress .tp-s { color:var(--accent2); font-weight:650; }
.tp-row.taught .tp-s { color:var(--green); }
.tp-acts { display:flex; gap:6px; }
.tp-notes { grid-column:1 / -1; padding:4px 6px 6px 48px; font-size:13px; line-height:1.6; color:var(--text2); }
.tp-notes h4 { margin:14px 0 4px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent2); }
.tp-notes ul { margin:0; padding-left:18px; }
.tp-notes li { margin:3px 0; }
.tp-notes b { color:var(--text); }
.tp-ov { margin:0; color:var(--text); }
.tp-f code { font-size:12.5px; padding:1px 6px; border-radius:6px; background:var(--bg4); color:var(--text); }
.tp-ex { padding:10px 12px; border-radius:10px; background:var(--bg2); border:1px solid var(--border2); white-space:pre-wrap; }
.tp-ex em { font-style:normal; font-weight:700; color:var(--text3); }
.tp-foot { display:flex; gap:8px; flex-wrap:wrap; padding:12px 8px 6px; }

/* ── Mark book ── */
.mb-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.mb-bar-r { display:flex; gap:8px; flex-wrap:wrap; }
.mb-stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.mb-risk { margin-bottom:12px; padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.5; color:var(--text2); background:var(--amber-bg); border:1px solid var(--amber-border); }
.mb-risk b { color:var(--amber); }
.mb-add { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px; }
.mb-f { display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--text3); flex:0 1 120px; }
.mb-f.wide { flex:1 1 220px; }
.mb-f-actions { display:flex; gap:8px; margin-left:auto; }
.mb-scroll { overflow:auto; max-height:70vh; border:1px solid var(--border2); border-radius:16px; background:var(--bg2); }
.mb-table { border-collapse:separate; border-spacing:0; width:100%; font-size:13px; }
.mb-table th, .mb-table td { padding:0; border-bottom:1px solid var(--border); }
.mb-table thead th { position:sticky; top:0; z-index:2; background:var(--bg3); vertical-align:bottom; }
.mb-table tfoot td, .mb-table tfoot th { position:sticky; bottom:0; background:var(--bg3); font-weight:750; color:var(--text2); padding:9px 10px; text-align:center; }
.mb-name { position:sticky; left:0; z-index:1; background:var(--bg2); text-align:left !important; padding:0 14px !important; min-width:170px; max-width:220px;
  font-weight:650; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-right:1px solid var(--border2); }
.mb-table thead .mb-name { z-index:3; background:var(--bg3); padding:10px 14px !important; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); }
.mb-table tfoot .mb-name { z-index:3; background:var(--bg3); }
.mb-col { min-width:108px; }
.mb-th { position:relative; display:flex; flex-direction:column; gap:1px; padding:10px 26px 8px 10px; text-align:left; }
.mb-th b { font-size:12.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.mb-th span { font-size:10.5px; font-weight:500; color:var(--text3); }
.mb-del { position:absolute; top:8px; right:4px; width:22px; height:22px; border:0; border-radius:6px; background:transparent; color:var(--text3); cursor:pointer; opacity:0; display:flex; align-items:center; justify-content:center; }
.mb-del svg { width:12px; height:12px; }
.mb-col:hover .mb-del { opacity:1; }
.mb-del:hover { background:var(--red-bg); color:var(--red); }
.mb-in { width:100%; min-width:70px; height:40px; border:0; background:transparent; color:var(--text); font:inherit; font-size:14px; font-weight:650; text-align:center; outline:none; }
.mb-in:focus { background:rgba(124,111,247,.14); box-shadow:inset 0 0 0 2px var(--accent); }
.mb-in.low { color:var(--amber); }
.mb-in.abs { color:var(--text3); font-weight:500; }
.mb-in.bad { box-shadow:inset 0 0 0 2px var(--red); }
.mb-table tbody tr:hover td, .mb-table tbody tr:hover .mb-name { background:var(--bg3); }
.mb-tot { min-width:108px; text-align:center; padding:0 10px !important; white-space:nowrap; border-left:1px solid var(--border2); }
.mb-tot b { font-size:14px; color:var(--text); margin-right:6px; }
.mb-dash { color:var(--text4); }
.mb-lv { font-style:normal; font-size:10.5px; font-weight:800; padding:2px 6px; border-radius:6px; }
.mb-lv.l1 { background:var(--red-bg); color:var(--red); border:1px solid var(--red-border); }
.mb-lv.l2, .mb-lv.l3 { background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-border); }
.mb-lv.l4, .mb-lv.l5 { background:var(--accent-bg); color:var(--accent2); border:1px solid var(--accent-border); }
.mb-lv.l6, .mb-lv.l7 { background:var(--green-bg); color:var(--green); border:1px solid var(--green-border); }
.mb-hint { font-size:12px; color:var(--text3); margin:10px 2px 0; }

/* ── Class tools ── */
.ct-tabs { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:14px; }
.ct-tab { display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left; padding:13px 14px; border-radius:16px; cursor:pointer; font:inherit; color:var(--text);
  border:1px solid hsl(var(--h) 70% 60% / .2); background:radial-gradient(120% 100% at 100% 0%, hsl(var(--h) 85% 62% / .14), transparent 60%), var(--bg2); transition:transform .15s var(--ease), border-color .15s; }
.ct-tab b { font-size:14px; }
.ct-tab span { font-size:11.5px; color:var(--text3); }
.ct-tab:hover { transform:translateY(-2px); }
.ct-tab.on { border-color:hsl(var(--h) 80% 65% / .7); box-shadow:0 0 0 3px hsl(var(--h) 80% 60% / .14); }
.ct-stage { min-height:360px; display:flex; align-items:center; justify-content:center; padding:32px 22px; }
.ct-stage:fullscreen { background:var(--bg); border-radius:0; padding:5vh 5vw; }
.ct-full { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:10px; border:1px solid var(--border3); background:var(--bg3); color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ct-full svg { width:16px; height:16px; }
.ct-pick, .ct-timer, .ct-groups, .ct-board { width:100%; text-align:center; }
.ct-big { font-family:var(--font-serif); font-size:clamp(40px, 8vw, 96px); line-height:1.05; color:var(--text); margin-bottom:10px; min-height:1.1em; }
.ct-big.rolling { color:var(--text3); }
.ct-big.landed { animation:ct-land .5s var(--ease-pop, cubic-bezier(.34,1.56,.64,1)); color:var(--accent2); }
@keyframes ct-land { from { transform:scale(.8); opacity:.3; } to { transform:none; opacity:1; } }
.ct-stage:fullscreen .ct-big { font-size:14vw; }
.ct-sub { font-size:13.5px; color:var(--text3); margin:8px 0 18px; }
.ct-row { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin:10px 0; }
.ct-lbl { font-size:12.5px; color:var(--text2); }
.ct-go { padding:14px 38px !important; font-size:17px !important; border-radius:14px !important; }
.ct-ggrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; margin-top:16px; text-align:left; }
.ct-g { padding:12px 14px; border-radius:14px; border:1px solid hsl(var(--h) 70% 60% / .3); background:radial-gradient(120% 100% at 100% 0%, hsl(var(--h) 85% 62% / .16), transparent 60%), var(--bg3); font-size:14px; line-height:1.7; color:var(--text); }
.ct-gh { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:hsl(var(--h) 80% 72%); margin-bottom:4px; }
.ct-stage:fullscreen .ct-g { font-size:2.2vw; }
.ct-clock { font-size:clamp(72px, 16vw, 180px); font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1; color:var(--text); }
.ct-stage:fullscreen .ct-clock { font-size:28vw; }
.ct-timer.soon .ct-clock { color:var(--amber); }
.ct-timer.done .ct-clock { color:var(--red); animation:ct-pulse 1s ease-in-out infinite; }
@keyframes ct-pulse { 50% { opacity:.4; } }
.ct-prog { height:8px; max-width:520px; margin:16px auto 8px; border-radius:8px; background:var(--bg4); overflow:hidden; }
.ct-prog i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #948af9, #2fcfbe); transition:width .25s linear; }
.ct-topic { max-width:360px; }
.ct-q { font-size:clamp(20px, 3vw, 30px); line-height:1.4; font-weight:650; color:var(--text); max-width:900px; margin:22px auto 10px; white-space:pre-wrap; }
.ct-stage:fullscreen .ct-q { font-size:3.6vw; }
.ct-opts { list-style:none; padding:0; margin:14px auto; max-width:760px; display:grid; gap:8px; text-align:left; }
.ct-opts li { display:flex; gap:12px; align-items:center; padding:12px 16px; border-radius:14px; background:var(--bg3); border:1px solid var(--border2); font-size:clamp(15px, 2vw, 20px); color:var(--text); transition:all .25s var(--ease); }
.ct-opts li b { width:30px; height:30px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--bg4); color:var(--accent2); }
.ct-opts li.right { border-color:var(--green); background:rgba(52,217,122,.12); }
.ct-opts li.right b { background:var(--green); color:#07170d; }
.ct-a { max-width:760px; margin:14px auto 0; padding:14px 18px; border-radius:14px; background:rgba(52,217,122,.10); border:1px solid var(--green-border); font-size:clamp(16px, 2.2vw, 22px); font-weight:700; color:var(--green); white-space:pre-wrap; }
.ct-a small { display:block; margin-top:6px; font-size:14px; font-weight:500; color:var(--text2); }

@media (max-width: 900px) {
  .tb-layout, .tp-top { grid-template-columns:1fr; }
  .tb-setup { position:static; max-height:none; }
  .ct-tabs { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tk-page { padding:16px 16px 60px; }
  .tb-levels { grid-template-columns:repeat(2, 1fr); }
  .tb-q { grid-template-columns:26px 1fr; }
  .tb-qside { grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; }
  .tb-qtools { opacity:1; }
  .tp-row { grid-template-columns:34px 1fr; }
  .tp-acts { grid-column:2; }
  .tp-notes { padding-left:6px; }
  .mb-name { min-width:128px; }
}

/* ── TEACHER HOMEWORK ──────────────────────────────────────────
   The log first, the form behind one button. Each assignment is a card
   in its class's colour with a due chip that turns amber then red, a
   done count, and review opening in place. */
.hwk-toggle { flex:none; }
.hwk-create { margin-bottom:18px; animation:dsc-in .3s var(--ease) both; }
.hwk-create-tabs { margin-bottom:10px; }
.hwk-lead { margin:0 0 12px; font-size:13.5px; line-height:1.55; color:var(--text2); }
.hwk-smart { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.hwk-f { display:flex; flex-direction:column; gap:4px; flex:1 1 150px; font-size:11.5px; color:var(--text3); }
.hwk-go { padding:11px 20px !important; }
.hwk-assign { width:100%; justify-content:center; padding:13px !important; font-size:14px !important; margin-top:6px; }
.hwk-stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.hwk-stats .hw-stat { text-align:left; cursor:pointer; font:inherit; color:inherit; transition:border-color .15s var(--ease), transform .15s var(--ease); }
.hwk-stats .hw-stat:hover { transform:translateY(-1px); }
.hwk-stats .hw-stat.active { border-color:rgba(168,158,255,.6); box-shadow:0 0 0 3px rgba(124,111,247,.12); }
.hwk-rev.has { border-color:var(--teal-border); background:linear-gradient(160deg, rgba(47,207,190,.12), transparent 70%), var(--bg2); }
.hwk-rev.has b { color:var(--teal); }
.hwk-log-bar { display:flex; gap:8px; margin-bottom:12px; }
.hwk-search { flex:1; max-width:420px; }
.hwk-list { display:grid; gap:10px; }
.hwk-card { position:relative; display:flex; gap:12px; padding:14px 16px 14px 20px; border-radius:16px; border:1px solid var(--border2);
  background:radial-gradient(90% 120% at 100% 0%, hsl(var(--h) 80% 60% / .08), transparent 60%), var(--bg2); overflow:hidden; }
.hwk-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:hsl(var(--h) 75% 62%); }
.hwk-card.hw-row-sel { border-color:var(--accent); }
.hwk-card .hw-row-cb { width:18px; height:18px; accent-color:var(--accent); flex:none; margin-top:3px; }
.hwk-main { flex:1; min-width:0; }
.hwk-top { display:flex; align-items:flex-start; gap:12px; }
.hwk-tl { flex:1; min-width:0; }
.hwk-title { font-size:15px; font-weight:750; color:var(--text); line-height:1.3; }
.hwk-meta { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:4px; font-size:12px; color:var(--text3); }
.hwk-class { color:hsl(var(--h) 80% 72%); font-weight:650; }
.hwk-due { font-weight:650; }
.hwk-due.soon { color:var(--amber); }
.hwk-due.late { color:var(--red); }
.hwk-count { flex:none; text-align:right; font-size:13px; color:var(--text3); line-height:1.1; }
.hwk-count b { font-size:20px; font-weight:800; color:var(--text); }
.hwk-count span { display:block; font-size:10.5px; }
.hwk-count.done b { color:var(--green); }
.hwk-card .hw-kebab { flex:none; }
.hwk-bar { height:5px; border-radius:5px; background:var(--bg4); margin:10px 0 0; overflow:hidden; }
.hwk-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, hsl(var(--h) 75% 62%), #34d97a); transition:width .4s var(--ease); }
.hwk-acts { display:flex; align-items:center; gap:10px; margin-top:10px; }
.hwk-review { padding:7px 13px !important; font-size:12.5px !important; border-radius:10px !important; }
.hwk-proof { font-size:11px; font-weight:650; color:var(--accent2); }
.hwk-more { display:flex; gap:6px; margin-top:8px; }
.hwk-more[hidden] { display:none; }
.hwk-del { color:var(--red) !important; border-color:var(--red-border) !important; }
.hwk-subs { margin-top:12px; padding-top:10px; border-top:1px solid var(--border2); }
.hwk-subs-head { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; }
.hwk-all { margin-left:auto; }
.hwk-pill { font-size:10.5px; font-weight:750; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.hwk-pill.submitted { background:var(--teal-bg); color:var(--teal); border:1px solid var(--teal-border); }
.hwk-pill.approved { background:var(--green-bg); color:var(--green); border:1px solid var(--green-border); }
.hwk-pill.pending { background:var(--bg3); color:var(--text3); border:1px solid var(--border2); }
.hwk-pill.returned { background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-border); }
.hwk-sub { padding:9px 4px; border-bottom:1px solid var(--border); }
.hwk-sub:last-child { border-bottom:0; }
.hwk-sub.submitted { background:linear-gradient(90deg, rgba(47,207,190,.05), transparent); border-radius:10px; padding:10px 8px; }
.hwk-sub-row { display:flex; align-items:center; gap:10px; }
.hwk-av { width:30px; height:30px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background:var(--bg4); color:var(--text2); }
.hwk-sub.approved .hwk-av { background:var(--green-bg); color:var(--green); }
.hwk-sub-n { flex:1; min-width:0; display:flex; flex-direction:column; }
.hwk-sub-n b { font-size:13px; color:var(--text); }
.hwk-sub-n span { font-size:11px; color:var(--text3); }
.hwk-sub.pending .hwk-sub-n b { color:var(--text2); font-weight:600; }
.hwk-note { margin:6px 0 0 40px; font-size:12.5px; line-height:1.5; color:var(--text2); white-space:pre-wrap; }
.hwk-qa { margin:8px 0 0 40px; padding-left:18px; display:grid; gap:6px; }
.hwk-qa li { font-size:12.5px; line-height:1.45; }
.hwk-qa span { display:block; color:var(--text3); white-space:pre-wrap; }
.hwk-qa b { display:block; color:var(--text); font-weight:650; }
.hwk-fb { margin:6px 0 0 40px; font-size:12px; color:var(--amber); }
.hwk-sub-acts { display:flex; gap:8px; margin:8px 0 0 40px; }
.hwk-sub-acts button { padding:6px 12px !important; font-size:12px !important; border-radius:9px !important; }
.hwk-sendback { margin:8px 0 0 40px; display:grid; gap:6px; }
.hwk-sendback[hidden] { display:none; }
.hwk-sendback > div { display:flex; gap:6px; justify-content:flex-end; }
@media (max-width:640px) {
  .hwk-note, .hwk-qa, .hwk-fb, .hwk-sub-acts, .hwk-sendback { margin-left:0; }
}
.hwk-due.done { color:var(--green); }

/* ── TIMETABLE ─────────────────────────────────────────────────
   Periods down the side, days across, each subject in its own colour,
   today's column lifted and the period happening now glowing. */
.tt-view { margin-bottom:14px; }
.tk-head .tk-seg { flex-wrap:nowrap; flex:none; }
.tk-seg button small { font-size:10px; }
.tt-now { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; margin-bottom:16px; }
.tt-now.calm { display:block; padding:14px 16px; border-radius:16px; border:1px solid var(--border2); background:var(--bg2); }
.tt-now-cell { padding:13px 15px; border-radius:16px; border:1px solid var(--border2); background:var(--bg2); display:flex; flex-direction:column; gap:2px; min-width:0; }
.tt-now-cell.live { border-color:rgba(52,217,122,.4); background:radial-gradient(120% 120% at 0% 0%, rgba(52,217,122,.14), transparent 60%), var(--bg2); }
.tt-now-k { font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); }
.tt-now-cell.live .tt-now-k { color:var(--green); }
.tt-now-cell.live .tt-now-k::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-right:6px; animation:ct-pulse 1.6s ease-in-out infinite; }
.tt-now-cell b, .tt-now-v { font-size:16px; font-weight:750; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt-now-cell span { font-size:12px; color:var(--text3); }
.tt-meta { font-size:12px; color:var(--text3); margin:0 2px 8px; }
.tt-scroll { overflow-x:auto; padding-bottom:6px; }
.tt-grid { display:grid; grid-template-columns:58px repeat(var(--days), minmax(118px, 1fr)); gap:5px; min-width:660px; }
.tt-corner { }
.tt-dh { text-align:center; padding:8px 4px; border-radius:10px; font-size:13px; font-weight:800; color:var(--text2); background:var(--bg2); border:1px solid var(--border2); }
.tt-dh span { font-weight:500; color:var(--text3); }
.tt-dh.today { color:#fff; background:var(--accent); border-color:transparent; box-shadow:0 2px 12px var(--accent-glow); }
.tt-dh.today span { color:rgba(255,255,255,.75); }
.tt-ph { display:flex; flex-direction:column; justify-content:center; align-items:flex-end; padding-right:6px; font-size:11px; color:var(--text3); }
.tt-ph b { font-size:12.5px; color:var(--text2); }
.tt-cell { position:relative; min-height:58px; display:flex; flex-direction:column; justify-content:center; gap:1px; text-align:left; padding:8px 10px; border-radius:11px; font:inherit; color:var(--text); cursor:pointer;
  border:1px solid hsl(var(--h, 262) 70% 60% / .28); background:linear-gradient(160deg, hsl(var(--h, 262) 80% 60% / .20), hsl(var(--h, 262) 80% 60% / .06)), var(--bg2);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease); }
div.tt-cell { cursor:default; }
.tt-cell b { font-size:12.5px; font-weight:750; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt-cell span { font-size:10.5px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
button.tt-cell:hover { transform:translateY(-1px); box-shadow:0 8px 20px -12px hsl(var(--h, 262) 80% 55% / .8); }
.tt-cell.free { --h:220; border-style:dashed; background:var(--bg2); }
.tt-cell.free b { color:var(--text2); font-weight:650; }
.tt-cell.live { box-shadow:0 0 0 2px var(--green), 0 8px 24px -10px rgba(52,217,122,.6); }
.tt-cell.empty { border:1px dashed var(--border2); background:transparent; color:var(--text4); font-size:18px; align-items:center; }
.tt-cell.empty:hover { color:var(--accent2); border-color:rgba(168,158,255,.45); background:rgba(124,111,247,.06); transform:none; box-shadow:none; }
.tt-cell.empty.ro { cursor:default; }
.tt-cell.empty.ro:hover { color:var(--text4); border-color:var(--border2); background:transparent; }
.tt-cell.today:not(.empty) { border-color:hsl(var(--h, 262) 80% 65% / .5); }
.tt-cell.empty.today { background:rgba(124,111,247,.04); }
.tt-x { position:absolute; top:3px; right:6px; font-style:normal; font-size:15px; color:var(--text3); opacity:0; cursor:pointer; }
.tt-cell:hover .tt-x { opacity:1; }
.tt-x:hover { color:var(--red); }
.tt-form { margin-bottom:16px; animation:dsc-in .25s var(--ease) both; }
.tt-form[hidden] { display:none; }
.tt-form-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.tt-form-h b { font-size:15px; color:var(--text); }
.tt-form-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.tt-form-grid .wide { grid-column:span 2; }
.tt-form-a { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
@media (max-width:760px) {
  .tt-now-cell.sum { display:none; }
  .tt-form-grid { grid-template-columns:1fr 1fr; }
}
.tk-page [id] { scroll-margin-top:76px; }

/* ── PRINCIPAL TODAY ───────────────────────────────────────────
   Four honest numbers instead of eleven zeros, then people by name. */
.lead-pulse { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.lead-tile { display:flex; flex-direction:column; gap:3px; text-align:left; padding:14px 15px; border-radius:16px; border:1px solid var(--border2); background:var(--bg2); color:var(--text); font:inherit; cursor:pointer; transition:transform .15s var(--ease), border-color .15s var(--ease); }
.lead-tile:hover { transform:translateY(-2px); border-color:rgba(168,158,255,.35); }
.lead-k { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); }
.lead-tile b, .par-stat b { font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--text); }
.lead-tile b small, .par-stat b small { font-size:13px; font-weight:650; color:var(--text3); margin-left:2px; }
.lead-s { font-size:11.5px; color:var(--text3); }
.lead-s em, .par-stat em { font-style:normal; font-weight:750; }
em.up { color:var(--green); } em.down { color:var(--red); }
.lead-bar { display:block; height:5px; border-radius:5px; background:var(--bg4); overflow:hidden; margin-top:6px; }
.lead-bar s { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #948af9, #34d97a); }
.lead-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.lead-list { padding:14px 16px; }
.lead-lh { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.lead-lh b { font-size:14.5px; color:var(--text); }
.lead-lh > span { font-size:11px; font-weight:800; padding:2px 8px; border-radius:20px; background:var(--amber-bg); color:var(--amber); }
.lead-row { display:flex; align-items:center; gap:11px; padding:8px 0; border-top:1px solid var(--border); }
.lead-row > div { flex:1; min-width:0; display:flex; flex-direction:column; }
.lead-row > div b { font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lead-row > div span { font-size:11.5px; color:var(--text3); }
.lead-g { width:30px; height:30px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:var(--accent-bg); color:var(--accent2); }
.lead-pct { font-size:15px; font-weight:800; }
.lead-pct.low { color:var(--red); } .lead-pct.mid { color:var(--amber); } .lead-pct.ok { color:var(--green); }
.lead-date { width:38px; flex:none; text-align:center; font-size:10px; font-weight:700; text-transform:uppercase; color:var(--text3); line-height:1.1; }
.lead-date b { display:block; font-size:17px; color:var(--text); }
.lead-ic { width:30px; text-align:center; flex:none; }
.lead-empty { font-size:12.5px; color:var(--text3); padding:10px 0 4px; }
.tk-card.lead-empty { padding:16px 18px; }
.lead-classes { padding:6px 16px; }
.lead-crow { display:grid; grid-template-columns:1.6fr .7fr 1.2fr; gap:14px; align-items:center; padding:11px 0 11px 12px; border-top:1px solid var(--border); position:relative; }
.lead-crow:first-child { border-top:0; }
.lead-crow::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:hsl(var(--h) 75% 62%); }
.lead-cn { min-width:0; display:flex; flex-direction:column; }
.lead-cn b { font-size:13.5px; color:var(--text); }
.lead-cn span { font-size:11.5px; color:var(--text3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lead-cm { font-size:12.5px; color:var(--text2); }
.lead-cp .lead-bar { margin:0 0 3px; }
.dash-h-count { font-size:12px; font-weight:700; color:var(--text3); }
.lead-note { display:flex; align-items:center; gap:10px; width:100%; margin:0 0 6px; padding:11px 14px; border-radius:14px; border:1px solid var(--amber-border); background:var(--amber-bg); color:var(--text2); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.lead-note b { color:var(--amber); }
.lead-note em { margin-left:auto; font-style:normal; font-weight:700; color:var(--amber); white-space:nowrap; }

/* ── PARENT TODAY ── */
.par-link-a { margin-top:14px; }
.par-kids { margin:0 0 12px; }
.par-child { padding:16px 18px; border-radius:20px; border:1px solid rgba(240,107,186,.24);
  background:radial-gradient(90% 130% at 0% 0%, rgba(240,107,186,.12), transparent 60%), var(--bg2); }
.par-ch { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.par-av { width:44px; height:44px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff; background:linear-gradient(135deg, #f06bba, #948af9); }
.par-cn { flex:1; min-width:0; display:flex; flex-direction:column; }
.par-cn b { font-size:17px; color:var(--text); }
.par-cn span { font-size:12px; color:var(--text3); }
.par-streak { font-size:12px; font-weight:800; color:var(--amber); padding:5px 10px; border-radius:20px; background:var(--amber-bg); border:1px solid var(--amber-border); white-space:nowrap; }
.par-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.par-stat { display:flex; flex-direction:column; gap:3px; padding:12px 13px; border-radius:14px; background:var(--bg3); }
.par-stat .lead-s { font-size:11px; }
.par-days { display:flex; gap:3px; margin-top:5px; }
.par-days s { flex:1; height:6px; border-radius:3px; background:var(--bg5); }
.par-days s.on { background:linear-gradient(90deg, #f06bba, #948af9); }
.par-hw { flex:none; font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:20px; background:var(--bg4); color:var(--text2); }
.par-hw.soon { background:var(--amber-bg); color:var(--amber); }
.par-hw.late { background:var(--red-bg); color:var(--red); }
.par-hw.ret { background:var(--amber-bg); color:var(--amber); }
@media (max-width:760px) {
  .lead-pulse, .par-stats { grid-template-columns:1fr 1fr; }
  .lead-two { grid-template-columns:1fr; }
  .lead-crow { grid-template-columns:1fr auto; }
  .lead-cp { grid-column:1 / -1; }
}

/* The school's own items in the planner: shown, not editable, and switchable. */
.pl-school { padding:7px 13px; border-radius:11px; border:1px solid var(--border3); background:var(--bg3);
  color:var(--text2); font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; white-space:nowrap; }
.pl-school.on { border-color:rgba(168,158,255,.5); background:rgba(124,111,247,.14); color:var(--accent2); }

/* ── STAFF MEETINGS ─────────────────────────────────────────── */
.mtg-next { padding:18px 20px; border-color:rgba(168,158,255,.3);
  background:radial-gradient(90% 130% at 0% 0%, rgba(124,111,247,.14), transparent 60%), var(--bg2); }
.mtg-next.soon { border-color:rgba(52,217,122,.45); background:radial-gradient(90% 130% at 0% 0%, rgba(52,217,122,.14), transparent 60%), var(--bg2); }
.mtg-next-t { margin:5px 0 3px; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.mtg-next-w { font-size:13.5px; font-weight:650; color:var(--accent2); }
.mtg-next.soon .mtg-next-w { color:var(--green); }
.mtg-none { margin-top:10px; font-size:12.5px; color:var(--text3); }
.mtg-list { display:grid; gap:10px; }
.mtg-card { display:flex; gap:14px; padding:14px 16px; border-radius:16px; border:1px solid var(--border2); background:var(--bg2); }
.mtg-card.past { opacity:.62; }
.mtg-date { width:44px; flex:none; text-align:center; padding-top:2px; font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text3); line-height:1.1; }
.mtg-date b { display:block; font-size:22px; font-weight:800; color:var(--text); }
.mtg-b { flex:1; min-width:0; }
.mtg-t { font-size:15px; font-weight:750; color:var(--text); }
.mtg-meta { font-size:12px; color:var(--accent2); font-weight:650; margin-top:2px; }
.mtg-card.past .mtg-meta { color:var(--text3); }
.mtg-agenda { margin-top:8px; padding:9px 12px; border-radius:11px; background:var(--bg3); font-size:12.5px; line-height:1.55; color:var(--text2); white-space:pre-wrap;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mtg-agenda.open { -webkit-line-clamp:none; display:block; margin-top:12px; }
.mtg-by { margin-top:6px; font-size:11px; color:var(--text3); }
.mtg-acts { display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; }
.mtg-next .mtg-acts { margin-top:14px; }
.mtg-form .mtg-fg { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:10px; }
.mtg-form .hwk-f.wide { grid-column:span 2; }
@media (max-width:760px) {
  .mtg-form .mtg-fg { grid-template-columns:1fr 1fr; }
  .mtg-card { flex-wrap:wrap; }
  .mtg-acts { width:100%; }
}

/* ── SUBJECT LENS (teacher insights) ────────────────────────────
   Each subject is read through what IT rewards, so the panel is the same
   shape everywhere but never the same content. */
.lens { margin:16px 0 20px; }
.lens-creed { padding:16px 18px; border-radius:18px; border:1px solid rgba(168,158,255,.26);
  background:radial-gradient(85% 130% at 0% 0%, rgba(124,111,247,.13), transparent 62%), var(--bg2); }
.lens-creed b { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent2); }
.lens-creed p { margin:6px 0 8px; font-size:15px; line-height:1.55; color:var(--text); max-width:70ch; }
.lens-shape { font-size:12px; color:var(--text3); }
.lens-focus { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; padding:13px 16px; border-radius:15px;
  border:1px solid var(--amber-border); background:var(--amber-bg); }
.lens-focus-k { font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); }
.lens-focus-b { flex:1; min-width:220px; display:flex; flex-direction:column; gap:2px; }
.lens-focus-b b { font-size:15px; color:var(--text); }
.lens-focus-b span { font-size:12.5px; line-height:1.5; color:var(--text2); }
.lens-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:12px; margin-top:14px; }
.lens-card { --c:var(--text3); position:relative; padding:14px 16px; border-radius:16px; border:1px solid var(--border2); background:var(--bg2); }
.lens-card.t-ok { --c:var(--green); } .lens-card.t-fair { --c:var(--teal); }
.lens-card.t-weak { --c:var(--amber); } .lens-card.t-bad { --c:var(--red); }
.lens-card.first { border-color:color-mix(in srgb, var(--c) 45%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 12%, transparent); }
.lens-card-h { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.lens-card h4 { margin:0; font-size:14.5px; font-weight:750; color:var(--text); }
.lens-verdict { font-size:11px; font-weight:700; color:var(--c); }
.lens-score b { font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--c); }
.lens-score small { font-size:13px; }
.lens-score em { font-size:22px; font-style:normal; color:var(--text4); }
.lens-bar { height:5px; border-radius:5px; background:var(--bg4); overflow:hidden; margin:9px 0 10px; }
.lens-bar i { display:block; height:100%; border-radius:inherit; background:var(--c); transition:width .5s var(--ease); }
.lens-why { margin:0 0 9px; font-size:12.5px; line-height:1.55; color:var(--text2); }
.lens-people { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text2); margin-bottom:9px; }
.lens-behind b { color:var(--amber); } .lens-strong b { color:var(--green); }
.lens-allok { color:var(--green); }
.lens-thin { font-size:12px; color:var(--text3); margin-bottom:9px; }
.lens-fix { padding:9px 11px; border-radius:11px; background:var(--bg3); font-size:12.5px; line-height:1.55; color:var(--text2); }
.lens-fix b { display:block; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-bottom:2px; }
.lens-acts { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.lens-ev { font-size:11px; color:var(--text3); }
.lens-silent { margin-top:12px; padding:11px 14px; border-radius:13px; font-size:12.5px; line-height:1.55;
  color:var(--text2); background:var(--bg3); border:1px solid var(--border2); }
.lens-craft { margin-top:12px; }
.lens-craft summary { cursor:pointer; font-size:13px; font-weight:700; color:var(--accent2); padding:8px 0; }
.lens-craft ul { margin:4px 0 0; padding-left:20px; }
.lens-craft li { font-size:12.5px; line-height:1.6; color:var(--text2); margin:3px 0; }
.lens-craft p { font-size:12px; color:var(--text3); margin:8px 0 0; }
.tb-focus { margin:10px 0 0; padding:9px 11px; border-radius:11px; font-size:12.5px; color:var(--text2);
  background:var(--amber-bg); border:1px solid var(--amber-border); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tb-focus b { color:var(--amber); }

/* One learner through the subject lens: their bar, the class marked on it. */
.slens .lens-creed p { font-size:14.5px; }
.slens-acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.slens-list { display:grid; gap:8px; margin-top:12px; }
.slens-row { --c:var(--text3); padding:11px 14px; border-radius:13px; border:1px solid var(--border2); background:var(--bg2); }
.slens-row.t-ok { --c:var(--green); } .slens-row.t-fair { --c:var(--teal); }
.slens-row.t-weak { --c:var(--amber); } .slens-row.t-bad { --c:var(--red); }
.slens-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.slens-top b { font-size:14px; color:var(--text); }
.slens-score { font-size:18px; font-weight:800; color:var(--c); }
.slens-score em { font-style:normal; color:var(--text4); }
.slens-row .lens-bar { position:relative; margin:7px 0 6px; overflow:visible; }
.slens-row .lens-bar i { border-radius:5px; }
.slens-row .lens-bar s { position:absolute; top:-4px; width:2px; height:13px; background:var(--text2); border-radius:2px; opacity:.85; }
.slens-meta { font-size:11.5px; color:var(--text3); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.slens-cmp { font-weight:700; }
.slens-cmp.up { color:var(--green); } .slens-cmp.down { color:var(--amber); }
.slens-fix { margin-top:7px; padding:8px 10px; border-radius:10px; background:var(--bg3); font-size:12.5px; line-height:1.55; color:var(--text2); }
.slens-topics { margin-top:12px; padding:12px 14px; border-radius:13px; background:var(--bg2); border:1px solid var(--border2); }
.slens-topics b { display:block; font-size:12px; color:var(--text2); margin-bottom:7px; }
.slens-topic { display:inline-flex; align-items:center; gap:7px; margin:0 7px 7px 0; padding:5px 11px; border-radius:20px; background:var(--bg3); font-size:12.5px; color:var(--text2); }
.slens-topic i { font-style:normal; font-weight:800; color:var(--amber); }

/* ═══════════════════════════════════════════════════════════════
   THE GLOW UP — one pass over the shared parts
   ───────────────────────────────────────────────────────────────
   Most screens are built from the same handful of pieces: .card,
   .section-header, .stat-card, .activity-row, .badge, .btn-sm, inputs
   and empty states. They were designed early and never revisited, so the
   newer pages (Today, the teacher tools, Insights) read as a different
   app from the older ones. Rather than rewrite forty renderers, this
   lifts the PIECES - same markup, same structure, new surface - so every
   screen that uses them moves up together.

   Rules kept: nothing changes size enough to reflow a layout, hover
   effects only on things that are actually clickable, and every motion
   is off under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* Surfaces ------------------------------------------------------ */
.card {
  border-radius:18px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg, rgba(255,255,255,.022), transparent 120px), var(--bg2);
  padding:18px 20px;
  transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card[onclick], .card.clickable { cursor:pointer; }
.card[onclick]:hover, .card.clickable:hover {
  transform:translateY(-2px);
  border-color:rgba(168,158,255,.32);
  box-shadow:0 14px 34px -22px rgba(124,111,247,.85);
}
.card-sm { padding:14px 16px; border-radius:14px; }

/* Section headings --------------------------------------------- */
.section-header { margin-bottom:16px; align-items:flex-end; }
.section-title { font-size:17px; font-weight:780; letter-spacing:-.012em; color:var(--text); line-height:1.25; }
.section-sub { font-size:12.5px; line-height:1.55; color:var(--text2); margin-top:4px; max-width:64ch; }

/* Numbers ------------------------------------------------------- */
.stat-card { border-radius:16px; border-color:var(--border2); padding:16px 18px; }
.stat-card:hover { border-color:rgba(168,158,255,.3); }
.stat-val { font-size:30px; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.stat-label { font-size:10px; letter-spacing:.14em; color:var(--text3); margin-bottom:6px; }
.stat-sub { font-size:11.5px; margin-top:7px; }

/* Rows ---------------------------------------------------------- */
.activity-row {
  border-radius:14px; padding:12px 14px; margin-bottom:8px;
  background:var(--bg2); border:1px solid var(--border);
}
.activity-row:hover { background:var(--bg3); border-color:var(--border2); }
.activity-row[onclick]:hover, .activity-row.clickable:hover { transform:translateX(2px); }
.activity-icon { border-radius:12px; }

/* Chips and badges ---------------------------------------------- */
.badge { padding:4px 11px; font-size:11px; font-weight:750; letter-spacing:.03em; }

/* Buttons ------------------------------------------------------- */
.btn-sm { border-radius:10px; padding:8px 15px; font-size:12.5px; font-weight:680; }
.btn-sm:hover { transform:translateY(-1px); }
.btn-sm:active { transform:translateY(0); }
.btn-sm.primary, .btn-sm.btn-primary {
  background:linear-gradient(135deg, var(--accent) 0%, #6b5ee8 100%);
  color:#fff; border-color:transparent; box-shadow:0 2px 12px var(--accent-glow);
}
.btn-sm.danger { background:var(--red-bg); color:var(--red); border-color:var(--red-border); }

/* Fields -------------------------------------------------------- */
.label { font-size:10.5px; font-weight:750; letter-spacing:.11em; text-transform:uppercase; color:var(--text3); }
.input { border-radius:11px; transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease); }
.input:focus, .input:focus-visible {
  outline:none; border-color:rgba(168,158,255,.55);
  box-shadow:0 0 0 3px rgba(124,111,247,.16);
}
.input::placeholder { color:var(--text4); }
.form-group { margin-bottom:14px; }

/* Empty states -------------------------------------------------- */
.empty-state {
  padding:38px 22px; border-radius:18px;
  border:1px dashed var(--border2); background:var(--bg2);
}
.empty-icon {
  font-size:26px; width:56px; height:56px; margin:0 auto 12px; opacity:1;
  display:flex; align-items:center; justify-content:center;
  border-radius:18px; background:var(--bg3);
}
.empty-title { font-size:16px; font-weight:750; color:var(--text); margin-bottom:6px; }
.empty-sub { font-size:13px; max-width:380px; color:var(--text2); }

/* Insights: the older parts, brought in line ------------------- */
.ti-title { font-family:var(--font-serif); font-weight:400; font-size:clamp(24px, 3.4vw, 32px); letter-spacing:0; }
.ti-subtitle { font-size:12.5px; color:var(--text2); }
.ti-stat { border-radius:16px; border-color:var(--border2); padding:15px 10px; }
.ti-stat-val { font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.ti-stat-lbl { font-size:10px; letter-spacing:.12em; }
.ti-tab-bar { gap:4px; padding:3px; border-radius:13px; background:var(--bg3); border:1px solid var(--border2); display:inline-flex; flex-wrap:wrap; }
.ti-tab { border:0; border-radius:10px; padding:8px 14px; font-size:12.5px; font-weight:680; color:var(--text2); background:transparent; }
.ti-tab.active { background:var(--accent); color:#fff; box-shadow:0 2px 10px var(--accent-glow); }

/* Focus, for people who navigate by keyboard -------------------- */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, summary:focus-visible {
  outline:2px solid var(--accent2); outline-offset:2px; border-radius:8px;
}

/* Scrollbars, so long lists stop looking like a system dialog --- */
* { scrollbar-width:thin; scrollbar-color:var(--bg5) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--bg5); border-radius:8px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--border3); background-clip:content-box; }
::-webkit-scrollbar-track { background:transparent; }

@media (prefers-reduced-motion: reduce) {
  .card[onclick]:hover, .card.clickable:hover, .btn-sm:hover,
  .activity-row[onclick]:hover, .stat-card:hover { transform:none; }
}

/* A date or time field never needs the full width of a form; letting them
   stretch is what made toolbars (Attendance history, timetable) wrap into a
   stack of full-width boxes. They size to their content now. */
input.input[type="date"], input.input[type="time"], input.input[type="datetime-local"] {
  width:auto; min-width:auto; max-width:100%;
}
.form-group input.input[type="date"], .form-group input.input[type="time"],
.form-group input.input[type="datetime-local"], .hwk-f input.input[type="date"],
.mb-f input.input[type="date"], .tt-form-grid input.input[type="time"] { width:100%; }
/* Same for dropdowns: full width inside a form, content width in a toolbar. */
select.input { width:auto; max-width:100%; }
.form-group select.input, .hwk-f select.input, .mb-f select.input,
.tt-form-grid select.input, label > select.input, .tk-manual select.input { width:100%; }

/* ── Insights, the rest of the way ──────────────────────────────
   The lens rebuilt the middle of this section; the pages around it kept
   an older, flatter surface. Same treatment as everywhere else: real
   cards, a wider page on a big screen, and the headline given the weight
   it is asking for. */
.ti-page { max-width:1120px; padding:22px var(--page-pad) 60px; }
.ti-header { margin-bottom:18px; align-items:flex-end; }

/* The one-sentence headline */
.ti-hero {
  margin:0 0 16px; padding:18px 22px; border-radius:18px; border:1px solid var(--border2);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 90px), var(--bg2);
  border-left-width:4px;
}
.ti-hero-line { font-size:21px; font-weight:750; letter-spacing:-.015em; }
.ti-hero-line strong { font-size:26px; letter-spacing:-.03em; }
.ti-hero-sub { margin-top:7px; font-size:12.5px; color:var(--text2); }
.ti-hero-bad { border-left-color:var(--red); background:radial-gradient(70% 120% at 0% 0%, rgba(244,114,114,.10), transparent 60%), var(--bg2); }
.ti-hero-good { border-left-color:var(--green); background:radial-gradient(70% 120% at 0% 0%, rgba(52,217,122,.10), transparent 60%), var(--bg2); }
.ti-hero-quiet { border-left-color:var(--amber); background:radial-gradient(70% 120% at 0% 0%, rgba(245,184,65,.10), transparent 60%), var(--bg2); }

/* Start here: a numbered list of instructions, not a paragraph */
.ti-actions { margin:0 0 20px; padding:6px 16px 10px; border-radius:18px; border:1px solid var(--border2); background:var(--bg2); }
.ti-actions-title { font-size:10.5px; letter-spacing:.14em; color:var(--accent2); padding:12px 0 2px; }
.ti-action { padding:11px 0; border-top:1px solid var(--border); align-items:center; }
.ti-action:first-of-type { border-top:0; }
.ti-action-num {
  width:24px; height:24px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800; background:rgba(124,111,247,.16); color:var(--accent2);
}
.ti-action-text { font-size:13.5px; line-height:1.5; color:var(--text); }
.ti-action-why { font-size:11.5px; color:var(--text3); margin-top:2px; }

/* Subject cards */
.ti-section-label { font-size:15px; font-weight:780; margin:22px 0 10px; }
.ti-subject-grid { grid-template-columns:repeat(auto-fill, minmax(min(320px,100%), 1fr)); gap:12px; }
.ti-card {
  border-radius:18px; border:1px solid var(--border2); padding:16px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.022), transparent 110px), var(--bg2);
  transition:transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.ti-card:hover { transform:translateY(-2px); box-shadow:0 16px 36px -24px rgba(124,111,247,.9); }
.ti-card-name { font-size:16.5px; font-weight:780; letter-spacing:-.015em; }
.ti-card-sub { font-size:12px; color:var(--text3); margin-top:2px; }
.ti-card-verdict { font-size:13.5px; line-height:1.5; color:var(--text); margin-top:10px; }
.ti-card-next { font-size:12.5px; line-height:1.5; color:var(--accent2); margin-top:4px; }
.ti-card-evidence { margin-top:12px; padding-top:10px; border-top:1px solid var(--border); gap:6px 14px; font-size:11.5px; color:var(--text3); }

/* The learner rows under the cards */
.ti-overview-students { gap:8px; }
.ti-overview-student-row { background:var(--bg2); border-color:var(--border2); border-radius:14px; }
.ti-ov-name { font-size:13.5px; font-weight:700; }
.ti-ov-meta { font-size:11.5px; color:var(--text3); }

/* Topic and student pages: the same materials */
.ti-empty { padding:44px 22px; border-radius:18px; border:1px dashed var(--border2); background:var(--bg2); }
.ti-empty-icon { font-size:26px; width:56px; height:56px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border-radius:18px; background:var(--bg3); }
.ti-empty-title { font-size:16px; font-weight:750; }
.ti-empty-sub { color:var(--text2); }
.ti-student-header { padding:16px 18px; border-radius:18px; border:1px solid var(--border2); background:linear-gradient(180deg, rgba(255,255,255,.022), transparent 110px), var(--bg2); }
.ti-sh-name { font-size:19px; font-weight:780; letter-spacing:-.015em; }
.ti-sh-subject { font-size:12.5px; color:var(--text3); }
.ti-chart-card, .ti-dist-card { border-radius:18px; border:1px solid var(--border2); background:var(--bg2); }
.ti-decomp { font-size:13px; color:var(--text2); }
.ti-decomp strong { color:var(--text); }
.ti-decomp-why { font-size:11.5px; color:var(--text3); line-height:1.5; margin-top:3px; max-width:70ch; }

@media (max-width:640px) {
  .ti-page { padding:16px 16px 60px; }
  .ti-hero { padding:15px 16px; }
  .ti-hero-line { font-size:18px; }
  .ti-hero-line strong { font-size:22px; }
}
.ti-overview-student-row { width:100%; text-align:left; font:inherit; color:var(--text); }
.ti-ov-avatar { width:32px; height:32px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800; background:var(--bg4); color:var(--text2); }
.ti-ov-quiet { margin-top:8px; font-size:12px; color:var(--text3); }
.ti-subject-grid { grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr)); }

/* ── Real marks inside the lens ─────────────────────────────────
   The mark book's numbers, set against what practice predicted. Tone
   comes from the gap, not from the mark: a class testing far below its
   practice is the finding, whatever the average is. */
.lens-marks {
  --c:var(--accent2);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:12px; padding:14px 18px; border-radius:16px;
  border:1px solid color-mix(in srgb, var(--c) 32%, transparent);
  background:radial-gradient(70% 130% at 0% 0%, color-mix(in srgb, var(--c) 12%, transparent), transparent 62%), var(--bg2);
}
.lens-marks.t-bad { --c:var(--red); } .lens-marks.t-ok { --c:var(--green); } .lens-marks.t-fair { --c:var(--teal); }
.lens-marks-n { flex:none; text-align:center; min-width:96px; }
.lens-marks-n b { display:block; font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--c); font-variant-numeric:tabular-nums; }
.lens-marks-n span { font-size:10.5px; line-height:1.35; color:var(--text3); }
.lens-marks-b { flex:1; min-width:240px; display:flex; flex-direction:column; gap:3px; }
.lens-marks-k { font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); }
.lens-marks-b > b { font-size:15px; font-weight:750; color:var(--text); }
.lens-marks-b > span { font-size:12.5px; line-height:1.55; color:var(--text2); }
.lens-marks-recent { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.lens-marks-recent span { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px;
  background:var(--bg3); font-size:11.5px; color:var(--text3); }
.lens-marks-recent i { font-style:normal; font-weight:800; color:var(--text); }
.lens-marks.empty { display:flex; gap:12px; text-align:left; width:100%; cursor:pointer; font:inherit; color:var(--text2);
  border-style:dashed; border-color:var(--border2); background:var(--bg2); font-size:12.5px; line-height:1.55; }
.lens-marks.empty b { color:var(--text); display:block; }
.lens-marks.empty > span:first-child { font-size:20px; }
.lens-marks.empty em { margin-left:auto; font-style:normal; font-weight:700; color:var(--accent2); white-space:nowrap; align-self:center; }

.slens-marks { --c:var(--teal); display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px;
  padding:13px 16px; border-radius:15px; border:1px solid color-mix(in srgb, var(--c) 32%, transparent);
  background:radial-gradient(70% 130% at 0% 0%, color-mix(in srgb, var(--c) 11%, transparent), transparent 62%), var(--bg2); }
.slens-marks.t-bad { --c:var(--red); } .slens-marks.t-ok { --c:var(--green); }
.slens-marks-n { flex:none; text-align:center; min-width:84px; }
.slens-marks-n b { display:block; font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--c); font-variant-numeric:tabular-nums; }
.slens-marks-n span { font-size:10.5px; line-height:1.35; color:var(--text3); }
.slens-marks > div:last-child { flex:1; min-width:220px; display:flex; flex-direction:column; gap:2px; }
.slens-marks > div:last-child b { font-size:14.5px; color:var(--text); }
.slens-marks > div:last-child span { font-size:12.5px; line-height:1.55; color:var(--text2); }

/* ── Insights tabs: learners, topics, misconceptions ────────────
   The learner list was a seven-column table with three empty columns; the
   misconceptions were stripes. Both are lists of people and problems, so
   they are laid out as rows and cards like the rest of the app. */
.ti-slist-head { display:flex; gap:18px; flex-wrap:wrap; padding:13px 16px; margin-bottom:12px;
  border-radius:15px; border:1px solid var(--border2); background:var(--bg2); font-size:12.5px; color:var(--text3); }
.ti-slist-head b { font-size:17px; font-weight:800; color:var(--text); margin-right:5px; font-variant-numeric:tabular-nums; }
.ti-slist { display:grid; gap:7px; }
.ti-srow { --c:var(--text3); display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit; color:var(--text);
  padding:11px 14px; border-radius:14px; border:1px solid var(--border2); background:var(--bg2); cursor:pointer;
  transition:transform .14s var(--ease), border-color .14s var(--ease); position:relative; overflow:hidden; }
.ti-srow::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); }
.ti-srow.s-ok { --c:var(--green); } .ti-srow.s-fair { --c:var(--teal); }
.ti-srow.s-weak { --c:var(--amber); } .ti-srow.s-bad { --c:var(--red); }
.ti-srow.s-none { --c:var(--text4); }
.ti-srow:hover { transform:translateX(2px); border-color:color-mix(in srgb, var(--c) 45%, transparent); }
.ti-srow-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ti-srow-b b { font-size:14px; font-weight:700; }
.ti-srow-b > span { font-size:11.5px; color:var(--text3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ti-srow-tag { flex:none; font-size:10.5px; font-weight:750; padding:3px 9px; border-radius:20px; background:var(--amber-bg); color:var(--amber); }
.ti-srow-score { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:70px; }
.ti-srow-score b { font-size:16px; font-weight:800; color:var(--c); font-variant-numeric:tabular-nums; }
.ti-srow-score em { font-size:16px; font-style:normal; color:var(--text4); }
.ti-slist-note { font-size:12px; color:var(--text3); margin:12px 2px 0; line-height:1.55; }

.ti-mis-list { display:grid; gap:10px; }
.ti-mis { padding:14px 16px; border-radius:16px; border:1px solid var(--border2); background:var(--bg2); border-left:3px solid var(--red); }
.ti-mis.done { border-left-color:var(--green); opacity:.72; }
.ti-mis header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ti-mis header b { font-size:14px; font-weight:700; line-height:1.45; color:var(--text); }
.ti-mis-n { flex:none; font-size:11.5px; font-weight:750; color:var(--red); white-space:nowrap; }
.ti-mis.done .ti-mis-n { color:var(--green); }
.ti-mis-ans { display:grid; gap:6px; margin-top:10px; }
.ti-mis-ans > div { display:flex; gap:10px; align-items:baseline; font-size:12.5px; line-height:1.5; padding:7px 11px; border-radius:10px; }
.ti-mis-ans span { flex:none; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; width:64px; }
.ti-mis-ans .wrong { background:var(--red-bg); color:var(--text); }
.ti-mis-ans .wrong span { color:var(--red); }
.ti-mis-ans .right { background:var(--green-bg); color:var(--text); }
.ti-mis-ans .right span { color:var(--green); }
.ti-mis-why { margin-top:9px; font-size:12.5px; line-height:1.55; color:var(--text2); }
.ti-mis-why b { color:var(--amber); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; margin-right:6px; }
.ti-mis footer { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:11px; }
.ti-mis-state { margin-left:auto; font-size:11px; font-weight:750; }
.ti-mis-state.open { color:var(--red); }
.ti-mis-state.ok { color:var(--green); }

/* Topics list */
.ti-topic-row { padding:13px 16px; border-radius:15px; border:1px solid var(--border2); background:var(--bg2); margin-bottom:8px;
  transition:transform .14s var(--ease), border-color .14s var(--ease); }
.ti-topic-row:hover { transform:translateX(2px); border-color:rgba(168,158,255,.35); }
.ti-topic-name { font-size:14.5px; font-weight:730; letter-spacing:-.01em; }
.ti-topic-badge { font-size:10.5px; font-weight:750; padding:3px 9px; border-radius:20px; }
.ti-topic-score-val { font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.ti-topic-score-lbl { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); }
.ti-untouched-acts { display:flex; gap:8px; justify-content:center; margin-top:14px; flex-wrap:wrap; }

/* ── Distance to a target ───────────────────────────────────────
   Marks, ranked by what each move is worth. The moves that on their own
   cover the gap are marked; the rest are listed but quieter. */
.dist { margin-top:14px; padding:16px 18px; border-radius:18px;
  border:1px solid rgba(168,158,255,.28);
  background:radial-gradient(80% 130% at 100% 0%, rgba(124,111,247,.13), transparent 62%), var(--bg2); }
.dist.done { border-color:var(--green-border); background:radial-gradient(80% 130% at 100% 0%, rgba(52,217,122,.12), transparent 62%), var(--bg2); }
.dist-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.dist-line { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:4px 0 5px; }
.dist-line b { font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums; }
.dist-arrow { font-size:19px; color:var(--text3); }
.dist-target { color:var(--accent2) !important; }
.dist.done .dist-target { color:var(--green) !important; }
.dist-tag { font-size:11px; font-weight:750; padding:4px 10px; border-radius:20px; background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-border); }
.dist-tag.ok { background:var(--green-bg); color:var(--green); border-color:var(--green-border); }
.dist-basis { font-size:12px; line-height:1.55; color:var(--text3); max-width:60ch; }
.dist-targets { flex:none; }
.dist-note { font-size:12.5px; line-height:1.55; color:var(--text2); margin:12px 0 4px; }
.dist-moves { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
.dist-move { display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:13px;
  border:1px solid var(--border); background:var(--bg2); opacity:.72; }
.dist-move.key { opacity:1; border-color:rgba(168,158,255,.35); background:var(--bg3); }
.dist-gain { flex:none; min-width:62px; text-align:center; font-size:20px; font-weight:800; letter-spacing:-.02em;
  color:var(--accent2); font-variant-numeric:tabular-nums; line-height:1.05; }
.dist-gain small { display:block; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); }
.dist-move-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dist-move-b b { font-size:13.5px; color:var(--text); }
.dist-move-b em { font-style:normal; font-weight:650; font-size:12px; color:var(--text3); }
.dist-move-b span { font-size:12px; line-height:1.5; color:var(--text2); }
.dist-small { font-size:11px; line-height:1.55; color:var(--text4); margin:11px 0 0; max-width:75ch; }
@media (max-width:640px) {
  /* A three-part row — fixed badge, text, fixed button — cannot wrap on a
     phone when the text column carries min-width:0, because a column that is
     allowed to shrink to nothing never triggers the wrap. The text loses
     every time, which is how "Calculations" came to render as "Calculat /
     ions" one word per line. Two columns and an explicit row for the button
     instead of three columns fighting over 340px. */
  .dist-move {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    align-items:start;
    gap:6px 12px;
  }
  .dist-move .dist-gain { grid-column:1; grid-row:1 / span 2; align-self:center; }
  .dist-move .dist-move-b { grid-column:2; }
  .dist-move .tk-mini { grid-column:2; justify-self:start; margin-left:0; }
  .dist-head { flex-direction:column; align-items:stretch; gap:10px; }
  .dist-targets { align-self:flex-start; }
}

/* ── Nothing in a teacher's rows should break mid-word ────────────────
   Splitting a word across lines is almost never what was wanted; where it
   shows up it is the symptom of a crushed column, and it makes the page
   look broken even after the column is fixed. Long unbroken strings still
   get to break, so nothing overflows its card. */
.dist-move-b b, .dist-move-b span, .dist-move-b em,
.fun-row b, .fun-row p, .slens-row b, .tlx-head b, .tlx-say {
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}

/* ── THE PRINCIPAL'S BOARD ──────────────────────────────────────
   Built backwards from the staff meeting: one decision at the top, the
   evidence under it in the order a principal would be challenged on it,
   and a printable agenda at the bottom. */
.pb { max-width:1080px; margin:0 auto; padding:22px var(--page-pad) 60px; }

/* The sentence */
.pb-sitrep { margin-bottom:16px; }
.pb-sitrep h1 { margin:5px 0 8px; font-size:clamp(23px, 3.4vw, 32px); font-weight:780; letter-spacing:-.025em; line-height:1.15; color:var(--text); }
.pb-sitrep h1 b { font-size:1.15em; font-variant-numeric:tabular-nums; }
.pb-sitrep-sub { display:flex; gap:8px 20px; flex-wrap:wrap; font-size:13px; color:var(--text2); }
.pb-sitrep-sub b { color:var(--text); }
.pb-sitrep-sub .bad b { color:var(--red); }
.pb-sitrep em, .pb-lead em { font-style:normal; font-weight:750; }
.pb-sitrep em.up, .pb-var em.up { color:var(--green); }
.pb-sitrep em.down { color:var(--red); }

/* The one thing */
.pb-main { --c:var(--accent2); position:relative; padding:20px 22px; border-radius:20px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background:radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 64%), var(--bg2); }
.pb-main.k-adoption { --c:var(--amber); } .pb-main.k-staff { --c:var(--teal); }
.pb-main.k-variance { --c:var(--pink); } .pb-main.k-subject { --c:var(--accent2); } .pb-main.k-steady { --c:var(--green); }
.pb-main-k { font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--c); }
.pb-main h2 { margin:7px 0 8px; font-size:clamp(20px, 2.8vw, 26px); font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--text); }
.pb-main-why { margin:0 0 13px; font-size:14px; line-height:1.6; color:var(--text2); max-width:72ch; }
.pb-main-do { padding:13px 15px; border-radius:14px; background:var(--bg3); display:flex; flex-direction:column; gap:3px; }
.pb-main-do b { font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); }
.pb-main-do span { font-size:14px; line-height:1.6; color:var(--text); }
.pb-main-meta { display:flex; gap:10px 26px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--text3); }
.pb-main-meta b { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-right:5px; }

/* Leading measures */
.pb-leads { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.pb-lead { display:flex; flex-direction:column; gap:2px; padding:13px 15px; border-radius:15px; border:1px solid var(--border2); background:var(--bg2); }
.pb-lead b { font-size:25px; font-weight:800; letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums; }
.pb-lead b small { font-size:13px; color:var(--text3); }
.pb-lead.off { border-style:dashed; }
.pb-lead.off b { color:var(--text4); }
.pb-note { font-size:12px; line-height:1.6; color:var(--text3); margin:10px 2px 0; max-width:80ch; }

/* Early warning */
.pb-warns { padding:15px 17px; margin-bottom:10px; }
.pb-warns-h { font-size:14.5px; font-weight:750; color:var(--text); }
.pb-warns-h.bad { color:var(--red); }
.pb-warns p { margin:4px 0 11px; font-size:12.5px; line-height:1.55; color:var(--text3); }
.pb-warn { display:flex; align-items:center; gap:11px; padding:8px 0; border-top:1px solid var(--border); flex-wrap:wrap; }
.pb-warn-n { font-size:13.5px; font-weight:700; color:var(--text); }
.pb-warn-g { font-size:11px; color:var(--text3); }
.pb-warn-r { display:flex; gap:5px; flex-wrap:wrap; margin-left:auto; }
.pb-warn-r i { font-style:normal; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; background:var(--bg3); color:var(--text2); }
.pb-warn.s2 .pb-warn-r i, .pb-warn.s3 .pb-warn-r i { background:var(--red-bg); color:var(--red); }
.pb-more { font-size:12px; color:var(--text3); padding-top:9px; }

/* Variance */
.pb-var { padding:15px 17px; }
.pb-var > p { margin:0 0 13px; font-size:12.5px; line-height:1.6; color:var(--text3); max-width:80ch; }
.pb-var-row + .pb-var-row { margin-top:14px; padding-top:13px; border-top:1px solid var(--border); }
.pb-var-h { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; }
.pb-var-h b { font-size:14.5px; color:var(--text); }
.pb-gap { font-size:12px; font-weight:750; color:var(--pink); }
.pb-var-c { display:flex; align-items:center; gap:11px; padding:4px 0; }
.pb-var-bar { flex:1; max-width:220px; height:8px; border-radius:6px; background:var(--bg4); overflow:hidden; }
.pb-var-bar i { display:block; height:100%; border-radius:inherit; background:var(--text3); }
.pb-var-bar i.t-ok { background:var(--green); } .pb-var-bar i.t-fair { background:var(--teal); }
.pb-var-bar i.t-weak { background:var(--amber); } .pb-var-bar i.t-bad { background:var(--red); }
.pb-var-n { flex:1; font-size:13px; color:var(--text); }
.pb-var-n em { font-style:normal; color:var(--text3); }
.pb-var-p { font-size:14px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }

/* Staff */
.pb-staff { padding:8px 17px 15px; }
.pb-staff-row { display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--border); }
.pb-staff-row:first-child { border-top:0; }
.pb-staff-row > div { flex:1; min-width:0; display:flex; flex-direction:column; }
.pb-staff-row b { font-size:13.5px; color:var(--text); }
.pb-staff-row span { font-size:11.5px; color:var(--text3); }
.pb-staff-tag { flex:none; font-size:10.5px; font-weight:750; padding:4px 10px; border-radius:20px; background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-border); }
.pb-staff-tag.ok { background:var(--green-bg); color:var(--green); border-color:var(--green-border); }
.pb-staff-row.need b { color:var(--text); }

/* The ranked grid */
.pb-grid { padding:15px 17px; }
.pb-grid > p { margin:0 0 11px; font-size:12.5px; line-height:1.6; color:var(--text3); max-width:80ch; }
.pb-grid-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.pb-grid-row > div { flex:1; min-width:0; display:flex; flex-direction:column; }
.pb-grid-row b { font-size:13.5px; color:var(--text); }
.pb-grid-row span { font-size:11.5px; color:var(--text3); }
.pb-grid-row.thin { opacity:.6; }
.pb-thin { font-size:11.5px; color:var(--text3); }
.lead-pct.ok { color:var(--green); } .lead-pct.fair { color:var(--teal); }
.lead-pct.weak { color:var(--amber); } .lead-pct.bad { color:var(--red); } .lead-pct.none { color:var(--text4); }

/* Switched off */
.pb-off { padding:15px 17px; }
.pb-off > p { margin:0 0 11px; font-size:12.5px; line-height:1.6; color:var(--text3); max-width:80ch; }
.pb-off-row { display:flex; gap:12px; padding:9px 0; border-top:1px solid var(--border); font-size:12.5px; line-height:1.55; }
.pb-off-row b { flex:none; width:96px; color:var(--text); }
.pb-off-row span { color:var(--text2); }

/* The agenda */
.pb-foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; padding:16px 18px; border-radius:18px;
  border:1px solid rgba(168,158,255,.3);
  background:radial-gradient(80% 140% at 100% 0%, rgba(124,111,247,.14), transparent 62%), var(--bg2); }
.pb-foot span { font-size:12.5px; color:var(--text2); }

@media (max-width:760px) {
  .pb { padding:16px 16px 60px; }
  .pb-leads { grid-template-columns:1fr 1fr; }
  .pb-warn-r { margin-left:0; width:100%; }
  .pb-off-row { flex-direction:column; gap:3px; }
  .pb-off-row b { width:auto; }
}

/* ── The principal's board, dressed ─────────────────────────────
   The content did not change; the hierarchy did. One number leads, one
   card commands, everything else supports. Charts are inline SVG so they
   inherit the page's colour and never load a library. */

/* Headline */
.pb-sitrep { display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; margin-bottom:20px; }
.pb-sitrep-l { flex:1; min-width:280px; }
.pb-sitrep h1 { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:6px 0 9px; }
.pb-sitrep h1 b {
  font-family:var(--font-serif); font-weight:400; font-size:clamp(46px, 7vw, 76px); line-height:.9;
  letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums;
  background:linear-gradient(170deg, #fff 10%, var(--accent2) 120%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pb-sitrep h1 span { font-size:clamp(15px, 2vw, 19px); font-weight:650; color:var(--text2); }
.pb-sitrep-sub { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13px; color:var(--text3); }
.pb-sitrep-sub b { color:var(--text); font-variant-numeric:tabular-nums; }
.pb-sitrep-sub .bad b { color:var(--red); }
.pb-dot-sep { width:3px; height:3px; border-radius:50%; background:var(--text4); margin:0 4px; }
.pb-chip { font-size:11.5px; font-weight:800; padding:3px 9px; border-radius:20px; background:var(--bg3); color:var(--text2); }
.pb-chip.up { background:var(--green-bg); color:var(--green); }
.pb-chip.down { background:var(--red-bg); color:var(--red); }

/* The ring and the shape of the term */
.pb-sitrep-r { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.pb-ring { position:relative; width:104px; height:104px; flex:none; }
.pb-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.pb-ring-bg { fill:none; stroke:var(--bg4); stroke-width:9; }
.pb-ring-fg { fill:none; stroke:url(#none) var(--accent2); stroke-width:9; stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(124,111,247,.55)); transition:stroke-dasharray 1s var(--ease); }
.pb-ring-t { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.pb-ring-t b { font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; }
.pb-ring-t span { font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); }
.pb-trend { display:flex; flex-direction:column; gap:5px; color:var(--accent2); min-width:200px; }
.pb-trend span { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); }
.pb-spark { width:100%; height:44px; display:block; }

/* The order card */
.pb-main { padding:24px 26px; border-radius:22px; }
.pb-main::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 7%, transparent) 0 1px, transparent 1px 11px); }
.pb-main > * { position:relative; z-index:1; }
.pb-main h2 { font-family:var(--font-serif); font-weight:400; font-size:clamp(24px, 3.4vw, 34px); letter-spacing:-.01em; line-height:1.12; }
.pb-main-do { border-left:3px solid var(--c); }

/* Leading measures */
.pb-lead { position:relative; overflow:hidden; }
.pb-lead::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, var(--accent2), transparent); opacity:.5; }
.pb-lead.off::after { display:none; }
.pb-lead b { font-family:var(--font-serif); font-weight:400; font-size:34px; letter-spacing:-.01em; }
.pb-lead b small { font-family:var(--font); font-size:13px; }

/* Variance as a slope */
.pb-vars { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:12px; }
.pb-var { padding:15px 17px; }
.pb-var-h { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:4px; }
.pb-var-h > div { display:flex; flex-direction:column; }
.pb-var-h b { font-size:14.5px; color:var(--text); }
.pb-var-h span { font-size:11.5px; color:var(--text3); }
.pb-gap { display:flex; flex-direction:column; align-items:flex-end; font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--pink); line-height:1; }
.pb-gap small { font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); margin-top:3px; }
.pb-slope { width:100%; height:110px; display:block; margin:4px 0 8px; }
.pb-axis { stroke:var(--border2); stroke-width:1; }
.pb-slope-line { stroke:var(--pink); stroke-width:2.5; stroke-linecap:round; opacity:.85; }
.pb-dot { fill:var(--bg); stroke-width:3; }
.pb-dot.hi { stroke:var(--green); } .pb-dot.lo { stroke:var(--red); }
.pb-slope-v { font-size:13px; font-weight:800; fill:var(--green); font-family:var(--font); }
.pb-slope-v.lo { fill:var(--red); }
.pb-var-legend { display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--text3); }
.pb-var-legend b { display:inline-block; min-width:96px; color:var(--text2); }
.pb-var-legend .hi b { color:var(--green); } .pb-var-legend .lo b { color:var(--red); }

/* Ranked grid */
.pb-grid-row { align-items:flex-start; }
.pb-impact { display:block; height:4px; border-radius:4px; background:var(--bg4); margin-top:7px; max-width:280px; overflow:hidden; }
.pb-impact i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--accent), var(--pink)); }
.pb-grid-row .lead-pct { font-size:22px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pb-grid-row .lead-pct small { font-size:12px; }

/* Warnings: the signal count made visible */
.pb-warn { position:relative; padding-left:14px; }
.pb-warn::before { content:''; position:absolute; left:0; top:14px; width:6px; height:6px; border-radius:50%; background:var(--text4); }
.pb-warn.s2::before { background:var(--amber); box-shadow:0 0 0 3px rgba(245,184,65,.18); }
.pb-warn.s3::before { background:var(--red); box-shadow:0 0 0 3px rgba(244,114,114,.2); }

/* The agenda button, given the weight of the thing it produces */
.pb-foot { padding:20px 22px; }
.pb-foot .btn-primary { padding:13px 22px !important; font-size:14.5px !important; border-radius:13px !important; }

/* Arrival */
@keyframes pb-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .pb > * { animation:none !important; }
}
@media (max-width:760px) {
  .pb-sitrep { gap:18px; }
  .pb-sitrep-r { width:100%; justify-content:space-between; }
  .pb-trend { min-width:140px; flex:1; }
  .pb-main { padding:18px 18px; }
}

/* ── GLAM PASS ──────────────────────────────────────────────────
   Depth, light and movement on the principal's board — the screen a
   principal will be looking at when they decide whether this school is
   buying Oryon. Everything here is presentation only: no number changes,
   nothing new is claimed, and all of it stands down under
   prefers-reduced-motion.

   The rules kept, so it stays glamorous rather than gaudy:
     * light comes from one place, top-left, on every surface
     * colour is earned — only the order card and the charts carry it
     * motion runs once on arrival, never in a loop the eye can catch
     * text contrast is never traded for effect
   ─────────────────────────────────────────────────────────────── */

/* An aurora behind the board: two slow blooms, far enough back to read as
   light rather than as decoration, with grain over the top so the
   gradients never band on a cheap panel. */
.pb { position:relative; isolation:isolate; }
.pb::before {
  content:''; position:absolute; z-index:-2; inset:-60px -40px auto -40px; height:520px; pointer-events:none;
  background:
    radial-gradient(48% 60% at 18% 0%, rgba(124,111,247,.22), transparent 70%),
    radial-gradient(42% 55% at 88% 12%, rgba(240,107,186,.14), transparent 72%),
    radial-gradient(36% 50% at 60% 26%, rgba(47,207,190,.10), transparent 75%);
  filter:blur(6px); opacity:.9;
  animation:pb-aurora 26s ease-in-out infinite alternate;
}
.pb::after {
  content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes pb-aurora {
  0%   { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(-26px,14px,0) scale(1.06); }
}

/* Surfaces: glass, with a hairline of light along the top edge — the thing
   that separates an expensive-looking card from a grey box. */
.pb .tk-card, .pb-lead, .pb-main, .pb-foot, .pb-warns, .pb-var, .pb-staff, .pb-grid, .pb-off {
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 38%, transparent 70%), rgba(13,13,22,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -30px rgba(0,0,0,.9);
}
.pb .tk-card::before, .pb-lead::before, .pb-foot::before {
  content:''; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  opacity:.5;
}

/* The order card: a gradient rim rather than a flat border, and a slow
   sheen that crosses it once when the page arrives. */
.pb-main {
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%) padding-box,
    radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 62%) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--c) 75%, transparent), transparent 45%, color-mix(in srgb, var(--c) 30%, transparent)) border-box,
    rgba(13,13,22,.76) padding-box;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 30px 60px -40px color-mix(in srgb, var(--c) 70%, transparent);
  overflow:hidden;
}
.pb-main .pb-sheen {
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.14) 48%, transparent 58%);
  transform:translateX(-120%);
  animation:pb-sheen 2.4s cubic-bezier(.22,.61,.36,1) .5s 1 both;
}
@keyframes pb-sheen { to { transform:translateX(120%); } }

/* The headline numeral: a little bloom under the gradient so it glows
   instead of sitting flat. */
.pb-sitrep h1 b { filter:drop-shadow(0 6px 26px rgba(124,111,247,.45)); }

/* Ring: draws itself once, with a soft halo. */
.pb-ring::after {
  content:''; position:absolute; inset:-14%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(124,111,247,.28), transparent 62%);
  filter:blur(8px);
}
.pb-ring-fg { animation:pb-ring-draw 1.2s cubic-bezier(.22,.61,.36,1) .25s both; }
@keyframes pb-ring-draw { from { stroke-dasharray:0 327; } }

/* Charts: the line draws in, the dots land after it. */
.pb-spark path:last-of-type, .pb-slope-line { stroke-dasharray:1; stroke-dashoffset:1; animation:pb-draw 1.15s cubic-bezier(.22,.61,.36,1) .3s both; }
.pb-spark circle, .pb-dot { animation:pb-pop .45s var(--ease-pop, cubic-bezier(.34,1.56,.64,1)) 1.3s both; }
.pb-spark { filter:drop-shadow(0 4px 14px rgba(124,111,247,.35)); }
.pb-slope-line { filter:drop-shadow(0 3px 10px rgba(240,107,186,.4)); }
@keyframes pb-draw { to { stroke-dashoffset:0; } }
@keyframes pb-pop { from { opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center; } }

/* Leading tiles: the underline becomes a lit edge on hover. */
.pb-lead { transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.pb-lead:hover { transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 22px 44px -32px rgba(124,111,247,.9); }
.pb-lead::after { height:2px; background:linear-gradient(90deg, var(--accent2), rgba(240,107,186,.6), transparent); opacity:.65; }

/* Impact bars and gaps get a touch of light. */
.pb-impact i { box-shadow:0 0 12px -2px rgba(124,111,247,.8); }
.pb-gap { text-shadow:0 4px 18px rgba(240,107,186,.45); }

/* The agenda: the thing they leave with, so it gets the strongest surface. */
.pb-foot {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 45%),
    radial-gradient(70% 160% at 100% 0%, rgba(124,111,247,.22), transparent 62%),
    rgba(13,13,22,.78);
  border-color:rgba(168,158,255,.38);
}
.pb-foot .btn-primary { position:relative; overflow:hidden; }
.pb-foot .btn-primary::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform:translateX(-120%);
}
.pb-foot .btn-primary:hover::after { transition:transform .7s var(--ease); transform:translateX(120%); }

/* Warning pips glow at the severity they actually are. */
.pb-warn.s2::before { box-shadow:0 0 0 3px rgba(245,184,65,.18), 0 0 12px rgba(245,184,65,.65); }
.pb-warn.s3::before { box-shadow:0 0 0 3px rgba(244,114,114,.2), 0 0 14px rgba(244,114,114,.75); }

/* Section headings on the board: a hairline that fades, so the page has
   rhythm without ruled lines everywhere. */
.pb .dash-h { position:relative; padding-bottom:9px; }
.pb .dash-h::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.14), transparent 55%);
}

@media (prefers-reduced-motion: reduce) {
  .pb::before { animation:none; }
  .pb-main .pb-sheen { display:none; }
  .pb-ring-fg, .pb-spark path, .pb-slope-line, .pb-spark circle, .pb-dot { animation:none; stroke-dashoffset:0; }
  .pb-lead:hover { transform:none; }
}
/* Glass is expensive on low-end Android; drop to a solid surface there. */
@supports not (backdrop-filter: blur(4px)) {
  .pb .tk-card, .pb-lead, .pb-main, .pb-foot { background:var(--bg2); }
}
/* Glass lightens the surface, so the body copy on the order card has to
   come up with it. Contrast is not a style choice. */
.pb-main-why { color:color-mix(in srgb, var(--text) 82%, transparent); }
.pb-main-do { background:rgba(8,8,14,.55); }
.pb-main-meta { color:color-mix(in srgb, var(--text) 62%, transparent); }
.pb-warns p, .pb-var > p, .pb-grid > p, .pb-off > p, .pb-note { color:color-mix(in srgb, var(--text) 62%, transparent); }

/* ── THE GLAM KIT, CARRIED ACROSS ───────────────────────────────
   The principal's board ended up the best-looking screen in the app,
   which is an odd place for it to stop: the teacher lives in Today and
   Insights every day, and the principal visits once a week.

   So the same four moves — aurora, glass, one hairline of light, one
   arrival — are lifted out and applied to the teacher's pages. They are
   written as a shared kit rather than copied, so there is one place to
   change the look and no chance of the pages drifting apart.

   Scoped deliberately to Today and the teacher tools. It is not applied
   to long form-heavy screens (Settings, Members, the timetable grid),
   where blur behind a hundred inputs costs more than it gives.
   ─────────────────────────────────────────────────────────────── */

/* The light itself, once, behind the top of each glam page. */
#page-home, .tk-page, #page-insights .ti-page { position:relative; isolation:isolate; }
#page-home::before, .tk-page::before, #page-insights .ti-page::before {
  content:''; position:absolute; z-index:-2; inset:-80px -40px auto -40px; height:480px; pointer-events:none;
  background:
    radial-gradient(46% 58% at 16% 0%, rgba(124,111,247,.20), transparent 70%),
    radial-gradient(40% 52% at 86% 10%, rgba(240,107,186,.11), transparent 72%),
    radial-gradient(34% 48% at 58% 24%, rgba(47,207,190,.09), transparent 75%);
  filter:blur(6px);
  animation:pb-aurora 26s ease-in-out infinite alternate;
}

/* Glass, with the hairline along the top edge. The selector list is long
   on purpose: these are the surfaces a teacher actually looks at, and
   naming them beats blanketing every div on the page. */
.tk-page .tk-card, .lens-creed, .lens-card, .lens-marks, .slens-marks, .dist,
.tk-page .tb-sheet, .tk-page .tb-setup, .mtg-next, .mtg-card, .hwk-card, .hwk-panel,
#page-home .hero2, #page-home .tsetup, #page-home .dsc, #page-home .dtool,
#page-home .par-child, #page-home .tatt, #page-home .lead-tile, #page-home .lead-list,
#page-home .lead-classes, #page-home .lead-note,
#page-insights .ti-card, #page-insights .ti-hero, #page-insights .ti-actions,
#page-insights .ti-srow, #page-insights .ti-mis, #page-insights .ti-slist-head,
#page-insights .ti-student-header, #page-insights .ti-overview-student-row {
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01) 40%, transparent 72%), rgba(13,13,22,.7);
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.055) inset, 0 16px 36px -30px rgba(0,0,0,.85);
}

/* Cards that carry their own hue keep it, layered over the glass rather
   than replaced by it — a class card should still feel like its subject. */
#page-home .dsc, #page-home .dtool {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 45%),
    radial-gradient(120% 90% at 100% 0%, hsl(var(--h, 262) 85% 62% / .20), transparent 60%),
    rgba(13,13,22,.7);
}
.lens-creed, .tk-page .tb-sheet-head {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 42%),
    radial-gradient(85% 130% at 0% 0%, rgba(124,111,247,.16), transparent 62%),
    rgba(13,13,22,.72);
}
.lens-marks, .slens-marks {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 42%),
    radial-gradient(70% 130% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 62%),
    rgba(13,13,22,.72);
}
.dist {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 42%),
    radial-gradient(80% 130% at 100% 0%, rgba(124,111,247,.15), transparent 62%),
    rgba(13,13,22,.72);
}

/* One sheen, once, across the thing the page is asking you to do. */
#page-home .focus-strip, .lens-focus, .mtg-next { position:relative; overflow:hidden; }
#page-home .focus-strip::after, .lens-focus::after, .mtg-next::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.12) 48%, transparent 58%);
  transform:translateX(-120%);
  animation:pb-sheen 2.2s cubic-bezier(.22,.61,.36,1) .45s 1 both;
}

/* Numbers that matter get the bloom the board's headline has. */
#page-home .hero2-hi, .lens-score b, .dist-line b, .slens-score, .tb-sum b {
  filter:drop-shadow(0 5px 20px rgba(124,111,247,.35));
}

/* Bars fill from nothing on arrival, rather than appearing full. */
.lens-bar i, .tb-lv-bar i, .tsetup-bar i, .hwk-bar i, .lead-bar s, .tp-bar i, .par-days s.on {
  animation:glam-fill .9s cubic-bezier(.22,.61,.36,1) .2s both;
  transform-origin:left center;
}
@keyframes glam-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* Hover: a lift and a warmer edge, on the things that are actually links. */
#page-home .dsc:hover, #page-home .dtool:hover, #page-insights .ti-card:hover,
#page-insights .ti-srow:hover, .mtg-card:hover, .hwk-card:hover {
  border-color:rgba(168,158,255,.32);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 22px 44px -32px rgba(124,111,247,.85);
}

/* Section rules, so the rhythm matches the board. */
#page-home .dash-h, .tk-page .dash-h, #page-insights .dash-h { position:relative; padding-bottom:9px; }
#page-home .dash-h::after, .tk-page .dash-h::after, #page-insights .dash-h::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.12), transparent 55%);
}

/* Contrast, lifted to sit over the lighter surfaces. */
.tk-sub, .lens-why, .lens-creed p, .dist-basis, .slens-meta, .mtg-agenda {
  color:color-mix(in srgb, var(--text) 74%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #page-home::before, .tk-page::before, #page-insights .ti-page::before { animation:none; }
  #page-home .focus-strip::after, .lens-focus::after, .mtg-next::after { display:none; }
  .lens-bar i, .tb-lv-bar i, .tsetup-bar i, .hwk-bar i, .lead-bar s, .tp-bar i, .par-days s.on { animation:none; }
}
@supports not (backdrop-filter: blur(4px)) {
  .tk-page .tk-card, .lens-creed, .lens-card, #page-home .hero2, #page-home .dsc,
  #page-insights .ti-card, .mtg-card, .hwk-card { background:var(--bg2); }
}

/* ── The engagement lifecycle ───────────────────────────────────
   One bar, five stages, and the names of the people in each. The stages
   are ordered by how close they are to a habit, so the eye reads the
   school left to right: who is going, who slipped, who never arrived. */
.fun { padding:16px 18px; }
.fun-bar { display:flex; gap:3px; height:14px; border-radius:8px; overflow:hidden; margin-bottom:10px; }
.fun-bar i { display:block; border-radius:3px; transition:flex .5s var(--ease); }
.fun-bar .t-ok { background:linear-gradient(180deg, #4ce68f, var(--green)); }
.fun-bar .t-fair { background:linear-gradient(180deg, #56ded0, var(--teal)); }
.fun-bar .t-weak { background:linear-gradient(180deg, #ffc95f, var(--amber)); }
.fun-bar .t-bad { background:linear-gradient(180deg, #ff8f8f, var(--red)); }
.fun-bar .t-none { background:var(--bg5); }
.fun-key { display:flex; gap:7px 16px; flex-wrap:wrap; font-size:11.5px; color:var(--text3); margin-bottom:12px; }
.fun-key span { display:inline-flex; align-items:baseline; gap:5px; }
.fun-key b { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); }
.fun-key .t-ok b { color:var(--green); } .fun-key .t-fair b { color:var(--teal); }
.fun-key .t-weak b { color:var(--amber); } .fun-key .t-bad b { color:var(--red); }
.fun-row { padding:12px 0; border-top:1px solid var(--border); }
.fun-row > div { display:flex; flex-direction:column; gap:2px; }
.fun-row b { font-size:14px; color:var(--text); }
.fun-row > div span { font-size:12.5px; line-height:1.55; color:color-mix(in srgb, var(--text) 66%, transparent); }
.fun-row p { margin:7px 0 0; font-size:12.5px; line-height:1.6; color:var(--text2);
  padding:9px 12px; border-radius:11px; background:rgba(8,8,14,.45); border-left:2px solid var(--border3); }
.fun-row.bad b { color:var(--red); } .fun-row.bad p { border-left-color:var(--red); }
.fun-row.warn b { color:var(--amber); } .fun-row.warn p { border-left-color:var(--amber); }
.fun-row.ok b { color:var(--green); } .fun-row.ok p { border-left-color:var(--green); }
.pb-main.k-retention { --c:var(--red); }

/* One child's stage, for a parent: a sentence, not a chart. */
.kid-stage { --c:var(--text3); margin-top:12px; border-left:3px solid var(--c); }
.kid-stage.t-ok { --c:var(--green); } .kid-stage.t-fair { --c:var(--teal); }
.kid-stage.t-weak { --c:var(--amber); } .kid-stage.t-bad { --c:var(--red); }
.kid-stage-h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.kid-stage-tag { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c); }
.kid-stage-h b { font-size:15.5px; color:var(--text); }
.kid-stage-h > span { font-size:12px; color:var(--text3); }
.kid-stage p { margin:8px 0 0; font-size:13px; line-height:1.6; color:var(--text2); }

/* An unsaved paper is one navigation away from gone. The button carries a
   quiet accent rather than a warning colour — saving is a choice, not a fault. */
.tb-needsave { border-color:color-mix(in srgb, var(--accent,#5a3fc0) 45%, transparent); color:var(--accent,#5a3fc0); font-weight:600; }
.tb-savehint { margin:8px 0 0; font-size:12px; color:var(--text2,#8b88a0); }

/* ── One topic, one row: mastery across the term against accuracy lately ──
   The left border carries the verdict, so the list can be read down the
   edge before a single number is looked at. */
.tlx-intro { font-size:12px; color:var(--text3); margin:0 0 10px; }
.tlx-row { background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--text3);
  border-radius:12px; padding:11px 13px; margin-bottom:9px; }
.tlx-bad  { border-left-color:var(--red, #ef4444); }
.tlx-warn { border-left-color:var(--amber, #f59e0b); }
.tlx-ok   { border-left-color:var(--green, #22c55e); }
.tlx-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.tlx-head b { font-size:13.5px; font-weight:650; line-height:1.3; }
.tlx-tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  white-space:nowrap; color:var(--text3); }
.tlx-bad .tlx-tag { color:var(--red, #ef4444); }
.tlx-warn .tlx-tag { color:var(--amber, #f59e0b); }
.tlx-ok .tlx-tag { color:var(--green, #22c55e); }
.tlx-nums { display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
.tlx-was, .tlx-now { font-size:9.5px; color:var(--text3); text-transform:uppercase;
  letter-spacing:.4px; display:flex; align-items:baseline; gap:4px; }
.tlx-was i, .tlx-now i { font-style:normal; font-size:15px; font-weight:750; color:var(--text); }
.tlx-was i { color:var(--text3); }
.tlx-ar { color:var(--text3); opacity:.7; }
.tlx-none { font-size:11px; color:var(--text3); font-style:italic; }
.tlx-delta { font-size:11px; font-weight:750; padding:1px 6px; border-radius:20px; }
.tlx-down { color:var(--red, #ef4444); background:color-mix(in srgb, var(--red,#ef4444) 12%, transparent); }
.tlx-up { color:var(--green, #22c55e); background:color-mix(in srgb, var(--green,#22c55e) 12%, transparent); }
.tlx-say { font-size:11.5px; color:var(--text3); margin:4px 0 0; line-height:1.45; }
.tlx-more { margin:2px 0 10px; }
.tlx-more summary { font-size:12px; color:var(--accent, #5a3fc0); cursor:pointer; padding:6px 2px; }

/* ── The class is not one number ──────────────────────────────────────
   An average is the one statistic that cannot tell a teacher whether the
   room is uniform or split, which is the thing that decides the lesson. */
.spd { background:var(--bg2); border:1px solid var(--border); border-radius:15px;
  padding:14px; margin:0 0 12px; }
.spd-h { display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.spd-h b { font-size:14px; font-weight:700; }
.spd-h span { font-size:12px; color:var(--text3); }
.spd-bars { display:flex; align-items:flex-end; gap:5px; height:86px; }
.spd-bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; height:100%; }
.spd-bar b { font-size:11px; font-weight:750; text-align:center; font-variant-numeric:tabular-nums;
  min-height:13px; color:var(--text2); }
.spd-bar i { display:block; border-radius:5px 5px 2px 2px; background:var(--text3); }
.spd-bar i.t-bad { background:var(--red, #ef4444); }
.spd-bar i.t-warn { background:var(--amber, #f59e0b); }
.spd-bar i.t-ok { background:var(--green, #22c55e); }
.spd-bar u { text-decoration:none; font-size:10px; color:var(--text3); text-align:center;
  font-variant-numeric:tabular-nums; }
.spd-read { margin:10px 0 0; font-size:12.5px; line-height:1.55; color:var(--text2); }
.spd-read b { color:var(--text); font-weight:700; }
.spd-quiet { margin:6px 0 0; font-size:11.5px; line-height:1.5; color:var(--text3); }

/* ── Teach this next: the one decision, made ──────────────────────────
   A count, not a percentage — "9 of 14 have it" is a room a teacher can
   picture; "64% mastery" is a number they have to translate first. */
.tn { background:linear-gradient(162deg, color-mix(in srgb, var(--accent,#5a3fc0) 16%, var(--bg2)), var(--bg2) 62%);
  border:1px solid color-mix(in srgb, var(--accent,#5a3fc0) 34%, transparent);
  border-radius:17px; padding:16px; margin:0 0 12px; }
.tn-kicker { font-size:10.5px; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent2, #a89eff); margin-bottom:6px; }
.tn-topic { margin:0 0 9px; font-size:17.5px; font-weight:720; line-height:1.3; letter-spacing:-.01em; }
.tn-count { display:flex; align-items:baseline; gap:8px; margin-bottom:11px; }
.tn-count b { font-size:27px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tn-count span { font-size:12.5px; color:var(--text2); }
.tn-miss { padding:11px 12px; background:var(--bg); border-radius:11px;
  border-left:2px solid var(--red, #ef4444); margin-bottom:12px; }
.tn-lbl { display:block; font-size:9.5px; font-weight:750; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text3); margin-bottom:5px; }
.tn-miss p { margin:0; font-size:13px; line-height:1.5; color:var(--text); }
.tn-miss em { display:block; margin-top:6px; font-style:normal; font-size:11.5px; color:var(--text3); }
.tn-do { margin:0 0 13px; font-size:13.5px; line-height:1.55; color:var(--text); }
.tn-do b { color:var(--text); }
.tn-acts { display:flex; gap:8px; flex-wrap:wrap; }
.tn-drill { font-size:13px; padding:9px 15px; }

/* ── Did it work? ─────────────────────────────────────────────────────
   The only question worth asking a fortnight after a reteach, and the one
   sentence a dashboard can never produce on its own. */
.rt { margin:0 0 12px; }
.rt-kicker { font-size:10.5px; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text3); margin-bottom:7px; }
.rt-row { background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--text3);
  border-radius:13px; padding:11px 13px; margin-bottom:8px; }
.rt-row.t-ok { border-left-color:var(--green, #22c55e); }
.rt-row.t-warn { border-left-color:var(--amber, #f59e0b); }
.rt-row.t-bad { border-left-color:var(--red, #ef4444); }
.rt-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.rt-top b { font-size:13.5px; font-weight:650; }
.rt-top span { font-size:11px; color:var(--text3); white-space:nowrap; }
.rt-nums { display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
.rt-was, .rt-now { font-size:9.5px; color:var(--text3); text-transform:uppercase; letter-spacing:.4px;
  display:flex; align-items:baseline; gap:4px; }
.rt-was i, .rt-now i { font-style:normal; font-size:15px; font-weight:750; color:var(--text); }
.rt-was i { color:var(--text3); }
.rt-ar { color:var(--text3); opacity:.7; }
.rt-delta { font-size:11px; font-weight:750; padding:1px 6px; border-radius:20px; }
.rt-up { color:var(--green, #22c55e); background:color-mix(in srgb, var(--green,#22c55e) 12%, transparent); }
.rt-down { color:var(--red, #ef4444); background:color-mix(in srgb, var(--red,#ef4444) 12%, transparent); }
.rt-count { font-size:11.5px; color:var(--text2); width:100%; }
.rt-count b { color:var(--text); }
.rt-say { margin:6px 0 0; font-size:12px; line-height:1.5; color:var(--text2); }
.tn-taught { font-size:13px; padding:9px 15px; }

/* Somewhere to take it: the two conversations a teacher cannot improvise. */
.tk-takeaway { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.tk-takeaway .tk-btn { font-size:12.5px; }

/* ── Say this to them ─────────────────────────────────────────────────
   The learner page's headline is not a score, it is a sentence the teacher
   can use tomorrow. Everything under it is the evidence for this card. */
.say { border-radius:17px; padding:15px 16px; margin:0 0 13px;
  background:linear-gradient(162deg, color-mix(in srgb, var(--accent,#5a3fc0) 15%, var(--bg2)), var(--bg2) 64%);
  border:1px solid color-mix(in srgb, var(--accent,#5a3fc0) 30%, transparent); }
.say.t-bad { background:linear-gradient(162deg, color-mix(in srgb, var(--red,#ef4444) 13%, var(--bg2)), var(--bg2) 64%);
  border-color:color-mix(in srgb, var(--red,#ef4444) 28%, transparent); }
.say.t-warn { background:linear-gradient(162deg, color-mix(in srgb, var(--amber,#f59e0b) 13%, var(--bg2)), var(--bg2) 64%);
  border-color:color-mix(in srgb, var(--amber,#f59e0b) 28%, transparent); }
.say.t-ok { background:linear-gradient(162deg, color-mix(in srgb, var(--green,#22c55e) 12%, var(--bg2)), var(--bg2) 64%);
  border-color:color-mix(in srgb, var(--green,#22c55e) 26%, transparent); }
.say.t-none { background:var(--bg2); border-color:var(--border); }
.say-kicker { font-size:10.5px; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text3); margin-bottom:6px; }
.say-head { margin:0 0 8px; font-size:16.5px; font-weight:720; line-height:1.3; letter-spacing:-.01em; }
.say-do { margin:0 0 8px; font-size:13.5px; line-height:1.55; color:var(--text); }
.say-why { margin:0; font-size:12px; line-height:1.5; color:var(--text3); }

/* A direction, where two comparable fortnights exist to compare. */
.tn-trend { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:20px; white-space:nowrap; }
.tn-trend.down { color:var(--red, #ef4444); background:color-mix(in srgb, var(--red,#ef4444) 13%, transparent); }
.tn-trend.up { color:var(--green, #22c55e); background:color-mix(in srgb, var(--green,#22c55e) 13%, transparent); }
.tn-trend.flat { color:var(--text3); background:color-mix(in srgb, var(--text3) 12%, transparent); font-weight:600; }
.tn-count { flex-wrap:wrap; }

/* ── The plan is the teacher's, not ours ──────────────────────────────
   A name is text until it is clicked. No pencils: the only always-visible
   control is the row overflow, and it stays grey until wanted. */
.tp-t[contenteditable] { border-radius:6px; padding:2px 5px; margin:-2px -5px;
  border:1px solid transparent; cursor:text; }
.tp-t[contenteditable]:hover { background:var(--bg3); }
.tp-t[contenteditable]:focus { outline:none; background:var(--bg3);
  border-color:color-mix(in srgb, var(--accent,#5a3fc0) 55%, transparent); }
.tp-row.mine { border-left:2px solid var(--accent, #5a3fc0); }
.tp-edited { margin:2px 0 0 38px; font-size:11px; color:var(--text3); }
.tp-edited b { color:var(--text2); font-weight:600; }
.tp-more { background:none; border:0; color:var(--text3); font-size:16px; line-height:1;
  padding:2px 6px; cursor:pointer; border-radius:6px; }
.tp-more:hover { background:var(--bg3); color:var(--text); }
.tp-menu { position:absolute; right:10px; top:40px; z-index:9; min-width:176px;
  background:var(--bg3); border:1px solid var(--border); border-radius:11px; padding:5px;
  box-shadow:0 12px 28px rgba(0,0,0,.45); }
.tp-menu button { display:block; width:100%; text-align:left; background:none; border:0;
  color:var(--text2); font:inherit; font-size:12.5px; padding:7px 10px; border-radius:7px; cursor:pointer; }
.tp-menu button:hover { background:var(--bg2); color:var(--text); }
.tp-menu button.warn { color:var(--red, #ef4444); }
.tp-add { display:block; width:100%; text-align:left; margin-top:8px; padding:11px 13px;
  border:1px dashed var(--border); border-radius:12px; background:none; color:var(--text3);
  font:inherit; font-size:13px; cursor:pointer; }
.tp-add:hover { border-color:color-mix(in srgb, var(--accent,#5a3fc0) 55%, transparent); color:var(--text2); }

/* ── Pilot diagnostic ─────────────────────────────────────────────────
   Deliberately plain. This screen is sat twice, six weeks apart, and it
   has to feel identical both times — anything that reads as friendlier or
   harder the second time is a change to the instrument, not the styling.
   No colour for right or wrong anywhere, because nothing here is marked
   in front of the learner. */
.dg-page { padding: 20px 16px 40px; max-width: 640px; margin: 0 auto; }
.dg-card { background: var(--card); border: 1px solid var(--border1);
           border-radius: 16px; padding: 22px; }
.dg-card h2 { margin: 0 0 10px; font-size: 20px; }
.dg-muted { color: var(--text3); font-size: 14px; }
.dg-list { margin: 14px 0 20px; padding-left: 18px; color: var(--text2);
           font-size: 14px; line-height: 1.7; }

.dg-progress { height: 4px; background: var(--bg3); border-radius: 99px;
               overflow: hidden; margin-bottom: 14px; }
.dg-progress span { display: block; height: 100%; background: var(--accent);
                    transition: width .25s var(--ease, ease); }
.dg-count { color: var(--text3); font-size: 12px; margin: 0 0 10px;
            letter-spacing: .04em; text-transform: uppercase; }
.dg-q { font-size: 17px; line-height: 1.5; margin: 0 0 18px; font-weight: 600; }

.dg-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.dg-opt { text-align: left; padding: 13px 15px; border-radius: 11px;
          border: 1px solid var(--border1); background: var(--bg2);
          color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.dg-opt:hover { border-color: var(--border3); }
/* Picked, not correct. The only state this screen can show. */
.dg-opt.is-picked { border-color: var(--accent); background: var(--accent-bg); }

.dg-input { width: 100%; padding: 13px 15px; border-radius: 11px;
            border: 1px solid var(--border1); background: var(--bg2);
            color: var(--text); font: inherit; font-size: 15px;
            margin-bottom: 20px; }

.dg-actions { display: flex; gap: 10px; }
.dg-btn { padding: 12px 20px; border-radius: 11px; font: inherit;
          font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.dg-btn-go { background: var(--accent); color: #fff; flex: 1; }
.dg-btn-skip { background: transparent; color: var(--text3); border-color: var(--border1); }
.dg-btn-skip:hover { color: var(--text2); }

@media (max-width: 480px) { .dg-page { padding: 14px 12px 32px; } .dg-card { padding: 18px; } }

/* ── Flashcard deck refresh ───────────────────────────────────────────
   Three choices, safest first, each saying what it costs. The destructive
   two are separated by weight rather than colour until the last one, so a
   learner scanning quickly does not read "delete everything" as the
   ordinary option. */
.fc-refresh-modal { max-width: 460px; }
.fc-refresh-opt { display: block; width: 100%; text-align: left; margin: 10px 0;
                  padding: 14px 16px; border-radius: 12px; cursor: pointer;
                  border: 1px solid var(--border1); background: var(--bg2);
                  color: var(--text); font: inherit; }
.fc-refresh-opt:hover { border-color: var(--border3); background: var(--bg3); }
.fc-refresh-opt-t { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.fc-refresh-opt-d { display: block; font-size: 13px; line-height: 1.55; color: var(--text3); }
.fc-refresh-opt.is-danger { border-color: var(--red-border); }
.fc-refresh-opt.is-danger:hover { background: var(--red-bg); }
.fc-refresh-opt.is-danger .fc-refresh-opt-t { color: var(--red); }