/* ==========================================================================
   StudyShare · Claude-style theme
   Warm neutral canvas, serif display type and calm surfaces (Claude's design
   language) — with the brand's RED + BLUE in place of Claude's orange.
   Loaded LAST on every page so it overrides app.css, design-system.css,
   student-experience.css, teacher.css and landing.css.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* canvas */
  --bg: #faf9f5;
  --side: #f4f2ec;
  --surface: #ffffff;
  --soft: #f0eee6;
  --soft-2: #e8e5da;
  --line: #e3e0d5;
  --line-strong: #cfcbbd;
  --ink: #1a1915;
  --ink-2: #3f3e39;
  --ink-3: #7a786f;

  /* brand accents (replace Claude orange) */
  --red: #d6373b;
  --red-2: #b0262b;
  --red-soft: #fbeae8;
  --blue: #2a5bd7;
  --blue-2: #1d45ad;
  --blue-soft: #e9eefb;
  --accent: var(--red);            /* Claude's orange role: send, new chat, mark */
  --primary: #2a5bd7;              /* primary buttons */
  --primary-hover: #1f4cc2;
  --brand-grad: linear-gradient(120deg, #d6373b 0%, #9c3d8f 48%, #2a5bd7 100%);
  --brand-grad-soft: linear-gradient(120deg, rgb(214 55 59 / 10%), rgb(42 91 215 / 10%));

  /* semantic */
  --ok: #2c7a4b;
  --ok-soft: #e6f2ea;
  --amber: #946a14;
  --amber-soft: #f8f0dc;
  --on-accent: #ffffff;
  --mark: #fde7a8;
  --scrim: rgb(26 25 21 / 38%);

  /* depth */
  --shadow: 0 1px 2px rgb(26 25 21 / 4%), 0 2px 8px rgb(26 25 21 / 4%);
  --shadow-md: 0 2px 4px rgb(26 25 21 / 4%), 0 10px 28px rgb(26 25 21 / 7%);
  --shadow-lg: 0 24px 64px rgb(26 25 21 / 18%), 0 4px 12px rgb(26 25 21 / 6%);
  --focus-ring: 0 0 0 3px rgb(42 91 215 / 22%);

  /* shape + motion */
  --radius-control: 10px;
  --radius-surface: 14px;
  --radius-overlay: 20px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .22s;

  --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", "Tiempos Text", Georgia, "Times New Roman", serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #262624;
  --side: #1f1e1d;
  --surface: #30302e;
  --soft: #353532;
  --soft-2: #3e3d39;
  --line: #43423d;
  --line-strong: #5a5952;
  --ink: #f5f4ef;
  --ink-2: #cfcdc4;
  --ink-3: #9d9b92;
  --red: #f0625f;
  --red-2: #f78c89;
  --red-soft: #3e2625;
  --blue: #86a6ff;
  --blue-2: #adc3ff;
  --blue-soft: #28314a;
  --accent: #e5484d;
  --primary: #3d6ee6;
  --primary-hover: #5582f0;
  --brand-grad: linear-gradient(120deg, #f0625f 0%, #b25aa8 48%, #5b86f2 100%);
  --brand-grad-soft: linear-gradient(120deg, rgb(240 98 95 / 14%), rgb(91 134 242 / 14%));
  --ok: #6cc893;
  --ok-soft: #22382b;
  --amber: #e5bd6a;
  --amber-soft: #3b3322;
  --on-accent: #ffffff;
  --mark: #6a5a24;
  --scrim: rgb(0 0 0 / 58%);
  --shadow: 0 1px 2px rgb(0 0 0 / 24%), 0 2px 8px rgb(0 0 0 / 16%);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 22%), 0 12px 30px rgb(0 0 0 / 30%);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 50%), 0 4px 12px rgb(0 0 0 / 30%);
  --focus-ring: 0 0 0 3px rgb(134 166 255 / 26%);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #262624;
    --side: #1f1e1d;
    --surface: #30302e;
    --soft: #353532;
    --soft-2: #3e3d39;
    --line: #43423d;
    --line-strong: #5a5952;
    --ink: #f5f4ef;
    --ink-2: #cfcdc4;
    --ink-3: #9d9b92;
    --red: #f0625f;
    --red-2: #f78c89;
    --red-soft: #3e2625;
    --blue: #86a6ff;
    --blue-2: #adc3ff;
    --blue-soft: #28314a;
    --accent: #e5484d;
    --primary: #3d6ee6;
    --primary-hover: #5582f0;
    --brand-grad: linear-gradient(120deg, #f0625f 0%, #b25aa8 48%, #5b86f2 100%);
    --brand-grad-soft: linear-gradient(120deg, rgb(240 98 95 / 14%), rgb(91 134 242 / 14%));
    --ok: #6cc893;
    --ok-soft: #22382b;
    --amber: #e5bd6a;
    --amber-soft: #3b3322;
    --on-accent: #ffffff;
    --mark: #6a5a24;
    --scrim: rgb(0 0 0 / 58%);
    --shadow: 0 1px 2px rgb(0 0 0 / 24%), 0 2px 8px rgb(0 0 0 / 16%);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 22%), 0 12px 30px rgb(0 0 0 / 30%);
    --shadow-lg: 0 24px 64px rgb(0 0 0 / 50%), 0 4px 12px rgb(0 0 0 / 30%);
    --focus-ring: 0 0 0 3px rgb(134 166 255 / 26%);
    color-scheme: dark;
  }
}

/* teacher space identity → blue; developer → ink */
:root { --faculty: var(--blue); --faculty-soft: var(--blue-soft); --faculty-line: color-mix(in srgb, var(--blue) 30%, var(--line)); }

/* ---------- 2. Keyframes ------------------------------------------------- */
@keyframes cl-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cl-pop { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cl-slide-left { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes cl-slide-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes cl-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes cl-breathe { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(6deg); } }
@keyframes cl-spin { to { transform: rotate(360deg); } }
@keyframes cl-grad-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes cl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cl-blob-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 4vh) scale(1.12); } }
@keyframes cl-blob-b { 0%, 100% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-5vw, -5vh) scale(.94); } }
@keyframes cl-ripple { from { transform: scale(0); opacity: .35; } to { transform: scale(2.6); opacity: 0; } }
@keyframes cl-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cl-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@keyframes cl-toast { from { opacity: 0; transform: translate(-50%, 16px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes cl-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 3. Base ------------------------------------------------------ */
html, body { background: var(--bg); }
body {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--blue); text-underline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: none; border-radius: 8px; }
.scroll, .page-body, .nav, .p-body, .pane-body { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid transparent; border-radius: 99px; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* icon colours: calm, brand-aligned (no orange) */
.ico-home, .ico-building, .ico-mail, .ico-mega, .ico-edit, .ico-pen, .ico-save { color: var(--red); }
.ico-chat, .ico-spark, .ico-bot, .ico-bulb, .ico-brain, .ico-math { color: var(--red); }
.ico-lib, .ico-book, .ico-drive, .ico-cal, .ico-clock, .ico-task, .ico-check,
.ico-user, .ico-users, .ico-team, .ico-chart, .ico-search, .ico-globe, .ico-db,
.ico-plug, .ico-code, .ico-file, .ico-doc2, .ico-copy, .ico-calculator,
.ico-retry, .ico-swap, .ico-share, .ico-up, .ico-plus, .ico-moon, .ico-monitor { color: var(--blue); }
.ico-shield, .ico-lock, .ico-key, .ico-unlock, .ico-trash, .ico-x, .ico-out { color: var(--red); }
.ico-eye, .ico-sun { color: var(--ink-2); }
.ico-gear, .ico-sliders, .ico-down, .ico-left, .ico-right { color: var(--ink-3); }
.nav button .ico, .study-sidenav .ico { color: var(--ink-3); }

/* ---------- 4. App shell (sidebar) -------------------------------------- */
.app, .student-app { background: var(--bg); grid-template-columns: 272px minmax(0, 1fr); transition: grid-template-columns .28s var(--ease-out); }
.app.collapsed, .student-app.collapsed { grid-template-columns: 64px minmax(0, 1fr); }

.side, .student-app .side {
  background: var(--side);
  border-right: 1px solid var(--line);
  color: var(--ink);
  box-shadow: none;
}
.s-top, .student-app .s-top { min-height: 60px; padding: 14px 14px 10px; }
.brand-img, .student-app .brand-img { height: 30px; }
.brand-icon, .student-app .brand-icon { width: 30px; height: 30px; }
.s-top .ibtn, .student-app .s-top .ibtn, .student-app .s-foot .ibtn { color: var(--ink-3); }
.s-top .ibtn:hover, .student-app .s-top .ibtn:hover { color: var(--ink); background: var(--soft-2); }

.space, .space.admin, .space.dev, .space.faculty {
  margin: 0 14px 10px;
  padding: 4px 10px 4px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid transparent;
}
.space.admin { background: var(--red-soft); color: var(--red-2); border-color: color-mix(in srgb, var(--red) 18%, transparent); }
.space.faculty { background: var(--blue-soft); color: var(--blue-2); border-color: color-mix(in srgb, var(--blue) 18%, transparent); }
.space.dev { background: var(--soft-2); color: var(--ink-2); border-color: var(--line); }

.nav, .student-app .nav { gap: 2px; padding: 6px 10px; }
.nav .sec { margin: 18px 10px 6px; color: var(--ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; }
.nav button, .student-app .nav button {
  position: relative;
  min-height: 38px;
  gap: 11px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  animation: cl-slide-left .4s var(--ease-out) both;
}
.nav button:nth-child(2) { animation-delay: .03s; } .nav button:nth-child(3) { animation-delay: .06s; }
.nav button:nth-child(4) { animation-delay: .09s; } .nav button:nth-child(5) { animation-delay: .12s; }
.nav button:nth-child(6) { animation-delay: .15s; } .nav button:nth-child(7) { animation-delay: .18s; }
.nav button:nth-child(8) { animation-delay: .21s; } .nav button:nth-child(n+9) { animation-delay: .24s; }
.nav button .ico, .student-app .nav button .ico { width: 19px; height: 19px; stroke-width: 1.8; color: var(--ink-3); transition: color var(--dur), transform var(--dur) var(--ease-spring); }
.nav button:hover, .student-app .nav button:hover { background: var(--soft-2); color: var(--ink); transform: none; }
.nav button:hover .ico { color: var(--ink); transform: scale(1.1); }
.nav button[aria-current="page"], .student-app .nav button[aria-current="page"] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  border: 0;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
.nav button[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -10px; top: 9px; bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--red), var(--blue));
  animation: cl-fade .3s ease both;
}
.nav button[aria-current="page"] .ico, .student-app .nav button[aria-current="page"] .ico { color: var(--blue); transform: none; }
.student-app.collapsed .nav button[aria-current="page"] { box-shadow: 0 0 0 1px var(--line), var(--shadow); }

/* "New chat" — Claude's orange plus becomes red */
.nav .newchat, .student-app .nav .newchat {
  min-height: 40px;
  margin-bottom: 6px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
}
.nav .newchat:hover, .student-app .nav .newchat:hover { background: var(--soft-2); }
.nav .newchat .plus, .student-app .nav .newchat .plus {
  width: 26px; height: 26px; margin-left: -3px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .3s var(--ease-spring);
}
.nav .newchat:hover .plus { transform: rotate(90deg) scale(1.06); }
.nav .newchat .plus .ico, .student-app .nav .newchat .plus .ico { color: #fff; width: 16px; height: 16px; }
.nav .badge, .tabs .badge { background: var(--red); color: #fff; font-weight: 700; }

.recents, .student-app .recents {
  margin: 6px 10px 10px;
  padding: 8px 0;
  border-color: var(--line);
  border-left: 0; border-right: 0;
}
.recents h3, .student-app .recents h3 { margin: 4px 10px 6px; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.chatlink, .student-app .chatlink { border-radius: 8px; transform: none; }
.chatlink button.t, .student-app .chatlink button.t { color: var(--ink-2); font-size: 13.5px; padding: 6px 10px; }
.chatlink:hover, .student-app .chatlink:hover { background: var(--soft-2); transform: none; }
.chatlink.on, .student-app .chatlink.on { background: var(--soft-2); }
.chatlink.on button.t, .student-app .chatlink.on button.t { color: var(--ink); font-weight: 500; }

.s-foot, .student-app .s-foot { border-color: var(--line); padding: 10px 12px 14px; }
.me, .student-app .me { gap: 10px; min-height: 0; padding: 6px; border: 0; border-radius: 12px; background: transparent; transition: background var(--dur); }
.me:hover { background: var(--soft-2); }
.me b, .student-app .me b { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.me small, .student-app .me small { color: var(--ink-3); font-size: 12px; }
.avatar, .student-app .avatar, :root[data-theme="dark"] .avatar {
  width: 34px; height: 34px;
  border: 0;
  background: var(--brand-grad);
  background-size: 200% 200%;
  color: #fff;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 0 0 2px var(--side), 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent);
  animation: cl-grad-pan 8s ease infinite;
}
.switch, .student-app .switch {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
}
.switch:hover, .student-app .switch:hover { border-color: var(--line); background: var(--surface); color: var(--ink); }
.theme-sw { border-color: var(--line); background: var(--surface); border-radius: 10px; }
.theme-sw button { border-radius: 7px; color: var(--ink-3); transition: background var(--dur), color var(--dur); }
.theme-sw button[aria-pressed="true"] { background: var(--soft-2); color: var(--ink); }

/* ---------- 5. Top bars ------------------------------------------------- */
.bar, .student-app .bar {
  min-height: 56px;
  padding: 10px 24px;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: none;
}
.bar h2, .student-app .bar h2 { color: var(--ink); font-size: 14.5px; font-weight: 500; }
.notification-bell, .student-app .notification-bell { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.notification-bell:hover, .student-app .notification-bell:hover { border-color: var(--line-strong); background: var(--surface); }
.notification-bell #notificationIcon .ico, .student-app .notification-bell #notificationIcon .ico { color: var(--ink-2); }
.notification-bell i { background: var(--red); box-shadow: 0 0 0 2px var(--bg); animation: cl-pop .3s var(--ease-spring) both; }

/* ---------- 6. Chat (Claude layout) ------------------------------------- */
.chat, .student-app .chat { background: var(--bg); }
.scroll, .student-app .scroll { background: var(--bg); }
.col { max-width: 768px; }

/* Greeting hero: mark + serif greeting on one line, centred composer */
.hero {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  column-gap: 14px;
  padding: 24px 0 32px;
}
.hero > .copilot-badge { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
.hero > .hero-mark { grid-column: 1; grid-row: 2; margin: 0; align-self: center; }
.hero > h1 { grid-column: 2; grid-row: 2; align-self: center; }
/* StudyShare Copilot badge */
.copilot-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 18px;
  padding: 4px 12px 4px 5px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font: 700 12px/1 var(--sans);
  letter-spacing: .01em;
  animation: cl-pop .5s var(--ease-out) both;
}
.copilot-badge img { width: 20px; height: 20px; }
.copilot-name { background: linear-gradient(90deg, #2a7bd8, #9b4d8f 55%, #e0373c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero > :not(.hero-mark):not(h1) { grid-column: 1 / -1; }
.hero-mark img {
  width: 48px; height: 48px;
  animation: cl-breathe 6s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgb(42 91 215 / 18%));
}
.hero h1 {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(30px, 3.6vw, 42px)/1.15 var(--serif);
  letter-spacing: -.015em;
  text-align: left;
  animation: cl-rise .6s var(--ease-out) both;
}
.hero p.sub {
  max-width: 560px;
  margin: 10px auto 26px;
  color: var(--ink-3);
  font-size: 15px;
  text-align: center;
  animation: cl-rise .6s .06s var(--ease-out) both;
}
.hero #heroSlot { animation: cl-rise .6s .12s var(--ease-out) both; }

/* composer */
.composer, .student-app .composer {
  min-height: 0;
  padding: 14px 14px 10px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 2px 4px rgb(26 25 21 / 3%), 0 8px 24px rgb(26 25 21 / 6%);
  transform: none;
  transition: border-color var(--dur), box-shadow .3s var(--ease-out);
  position: relative;
}
.composer::after {
  content: "";
  position: absolute; inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--brand-grad);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.composer:focus-within, .student-app .composer:focus-within {
  border-color: transparent;
  transform: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 8%, transparent), 0 12px 32px rgb(26 25 21 / 9%);
}
.composer:focus-within::after { opacity: 1; animation: cl-grad-pan 6s ease infinite; }
.composer textarea, .student-app .composer textarea { min-height: 30px; font-size: 16px; color: var(--ink); }
.composer textarea::placeholder, .student-app .composer textarea::placeholder { color: var(--ink-3); }
.c-row, .student-app .c-row { gap: 4px; margin-top: 8px; }
.c-row .ibtn, .student-app .c-row .ibtn {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink-2);
  background: transparent;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.c-row .ibtn .ico, .student-app .c-row .ibtn .ico { width: 18px; height: 18px; }
.c-row .ibtn:hover, .student-app .c-row .ibtn:hover { border-color: var(--line-strong); background: var(--soft); color: var(--ink); }
.c-row .voice.on, .c-row .web-search[aria-pressed="true"], .web-search.on,
.student-app .c-row .voice.on, .student-app .c-row .web-search[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--blue) 35%, var(--line));
  background: var(--blue-soft);
  color: var(--blue-2);
}
.c-row .deep-thinking[aria-pressed="true"], .student-app .c-row .deep-thinking[aria-pressed="true"], .deep-thinking[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--red) 35%, var(--line));
  background: var(--red-soft);
  color: var(--red-2);
}
.deep-thinking[aria-pressed="true"] .ico { color: var(--red-2); }
.send, .student-app .send {
  width: 34px; height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: background var(--dur), transform .2s var(--ease-spring), box-shadow var(--dur);
}
.send:hover:not(:disabled), .student-app .send:hover:not(:disabled) { background: var(--red-2); transform: translateY(-1px) scale(1.04); }
.send:active:not(:disabled) { transform: scale(.94); }
.send:disabled, .student-app .send:disabled { background: color-mix(in srgb, var(--accent) 40%, var(--soft-2)); color: #fff; box-shadow: none; opacity: .7; }
.send.stop { background: var(--ink); }
.attach-pop { background: var(--surface); border-color: var(--line); border-radius: 12px; animation: cl-pop .18s var(--ease-out) both; }

/* starter chips */
.chips, .student-app .chips { gap: 8px; margin-top: 18px; }
.chip, .student-app .chip {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13.5px;
  box-shadow: none;
  transition: background var(--dur), border-color var(--dur), color var(--dur), transform .25s var(--ease-out);
  animation: cl-rise .5s var(--ease-out) both;
}
.chip:nth-child(1) { animation-delay: .18s; } .chip:nth-child(2) { animation-delay: .23s; }
.chip:nth-child(3) { animation-delay: .28s; } .chip:nth-child(4) { animation-delay: .33s; }
.chip:nth-child(n+5) { animation-delay: .38s; }
.chip:hover, .student-app .chip:hover { transform: translateY(-1px); border-color: var(--line-strong); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.chip .ico, .student-app .chip > .ico, .student-app .quick-action-2 .ico, .student-app .quick-action-3 .ico, .student-app .quick-action-4 .ico { color: var(--ink-3); }
.chip:hover .ico { color: var(--red); }

/* messages */
.thread { padding: 22px 0 30px; }
.m { animation: cl-rise .38s var(--ease-out) both; }
.m.user .u {
  max-width: min(85%, 640px);
  border: 0;
  border-radius: 18px;
  background: var(--soft);
  color: var(--ink);
  padding: 10px 16px;
  font-size: 15px;
}
:root[data-theme="dark"] .m.user .u { background: #141413; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m.user .u { background: #141413; } }
.m.bot { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
.m.bot .mk img { width: 28px; height: 28px; filter: drop-shadow(0 2px 4px rgb(42 91 215 / 20%)); }
.m.bot:has(.thinking) .mk img, .m.bot:has(.stepline.live) .mk img { animation: cl-breathe 1.6s ease-in-out infinite; }
.md { font: 16.5px/1.7 var(--serif); color: var(--ink); }
.md h1, .md h2, .md h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.005em; }
.md code { border: 1px solid var(--line); border-radius: 5px; background: var(--soft); color: var(--red-2); font-size: 13px; }
.md pre { border: 1px solid #2c2b27; border-radius: 12px; background: #1c1b18; color: #eeede6; }
.md pre code { color: inherit; border: 0; background: transparent; }
.md table { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-family: var(--sans); }
.md th { background: var(--soft); }
.md blockquote { margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 3px solid var(--red); color: var(--ink-2); }
.md a { color: var(--blue); }
.cite { background: var(--blue-soft); color: var(--blue-2); transition: background var(--dur), color var(--dur), transform .2s var(--ease-spring); }
.cite:hover { background: var(--blue); color: #fff; transform: translateY(-1px); }
.src { border-color: var(--line); background: var(--surface); border-radius: 10px; transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur); }
.src:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow); }
.acts { opacity: .75; transition: opacity var(--dur); }
.m.bot:hover .acts { opacity: 1; }
.acts .ibtn { border-radius: 8px; color: var(--ink-3); }
.acts .ibtn:hover { color: var(--ink); background: var(--soft-2); }

/* thinking: shimmering text like Claude */
.thinking {
  color: transparent;
  background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 35%, var(--red) 45%, var(--blue) 55%, var(--ink-3) 65%, var(--ink-3) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: cl-shimmer 2.2s linear infinite;
  font: 500 15px var(--sans);
}
.stepline { color: var(--ink-3); animation: cl-slide-left .3s var(--ease-out) both; }
.stepline.live { color: var(--blue-2); }
.stepline .ico { color: var(--ok); }
.stepline.live .ico { color: var(--red); }
.toolnote { color: var(--ink-3); }
.taskoffer { border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); background: var(--ok-soft); border-radius: 12px; animation: cl-pop .3s var(--ease-out) both; }
.filecard { border-color: var(--line); background: var(--surface); border-radius: 12px; transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur); animation: cl-pop .3s var(--ease-out) both; }
.filecard:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.filecard .ext { background: var(--brand-grad); border-radius: 10px; }
.foot-note { color: var(--ink-3); font-size: 12px; }

/* ---------- 7. Buttons & inputs ---------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 14px;
  background: var(--primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(26 25 21 / 10%), inset 0 1px 0 rgb(255 255 255 / 12%);
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur), transform .15s var(--ease-out), color var(--dur);
}
.btn:hover:not(:disabled) { background: var(--primary-hover); filter: none; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 28%, transparent); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn .ico { color: currentColor !important; }
.btn.red { background: var(--accent); }
.btn.red:hover:not(:disabled) { background: var(--red-2); box-shadow: 0 4px 12px color-mix(in srgb, var(--red) 28%, transparent); }
.btn.okb { background: var(--ok); }
.btn.ghost {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(26 25 21 / 4%);
}
.btn.ghost:hover:not(:disabled) { border-color: var(--line-strong); background: var(--soft); color: var(--ink); box-shadow: 0 1px 2px rgb(26 25 21 / 6%); }
.btn.danger { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); background: var(--surface); color: var(--red); box-shadow: none; }
.btn.danger:hover:not(:disabled) { border-color: var(--red); background: var(--red-soft); color: var(--red-2); box-shadow: none; }
.btn.sm { min-height: 30px; padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.btn .cl-ripple { position: absolute; border-radius: 50%; background: currentColor; pointer-events: none; animation: cl-ripple .6s var(--ease-out) forwards; }
.ibtn { border-radius: 9px; color: var(--ink-2); transition: background var(--dur), color var(--dur); }
.ibtn:hover { background: var(--soft-2); color: var(--ink); }

.in, .search, .toolbar select, .table select, .student-app .in, .student-app .search, .att select, .ide-toolbar select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.in:hover, .search:hover, .toolbar select:hover { border-color: var(--line-strong); }
.in:focus, .search:focus, .toolbar select:focus, .table select:focus {
  border-color: var(--blue);
  outline: 0;
  box-shadow: var(--focus-ring);
}
label.f { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.radio { border-color: var(--line); border-radius: 12px; background: var(--surface); transition: border-color var(--dur), background var(--dur); }
.radio:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.drop { border-color: var(--line-strong); border-radius: 14px; background: var(--surface); transition: border-color var(--dur), background var(--dur), transform var(--dur); }
.drop.over { border-color: var(--blue); background: var(--blue-soft); transform: scale(1.01); }
.cats button, .pick { border-color: var(--line); background: var(--surface); transition: all var(--dur); }
.cats button[aria-pressed="true"], .pick[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-2); }
.tasks input, .calendar-event input, .checks input, .radio input, .planner-task input { accent-color: var(--blue); }

/* ---------- 8. Console pages (admin / teacher / developer) -------------- */
.page { animation: cl-fade .3s ease both; background: var(--bg); }
.page-head {
  min-height: 64px;
  padding: 14px 32px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  position: sticky; top: 0; z-index: 3;
}
.page-head h1 {
  font: 500 24px/1.2 var(--serif);
  letter-spacing: -.01em;
  color: var(--ink);
  animation: cl-slide-left .4s var(--ease-out) both;
}
.page-body { padding: 26px 32px 56px; background: var(--bg); }
.page-body > .wrap { max-width: 1280px; animation: cl-rise .45s var(--ease-out) both; }

/* KPI stat tiles */
.stats { gap: 14px; margin-bottom: 22px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.stat, .teacher-stats .stat {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
  animation: cl-rise .5s var(--ease-out) both;
}
.stat::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--brand-grad);
  background-size: 200% 100%;
  transform-origin: left;
  animation: cl-underline .8s .2s var(--ease-out) both, cl-grad-pan 6s ease infinite;
}
.stat::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), color-mix(in srgb, var(--blue) 7%, transparent), transparent 45%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.stat:hover::after { opacity: 1; }
.stat b, .teacher-stats .stat b {
  display: block;
  margin: 0 0 4px;
  color: var(--ink);
  font: 500 32px/1.1 var(--serif);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat span { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.stat small { color: var(--ink-3); }
.stat.good::before { background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 40%, var(--blue))); }
.stat.warn::before { background: linear-gradient(90deg, var(--amber), var(--red)); }
.stat.bad::before { background: var(--red); }
.stat.good b { color: var(--ok); } .stat.warn b { color: var(--amber); } .stat.bad b { color: var(--red); }
.stats > .stat:nth-child(1) { animation-delay: .02s; } .stats > .stat:nth-child(2) { animation-delay: .07s; }
.stats > .stat:nth-child(3) { animation-delay: .12s; } .stats > .stat:nth-child(4) { animation-delay: .17s; }
.stats > .stat:nth-child(5) { animation-delay: .22s; } .stats > .stat:nth-child(6) { animation-delay: .27s; }
.stats > .stat:nth-child(n+7) { animation-delay: .32s; }

/* panels & cards */
.panelbox, .box, .card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: box-shadow .3s var(--ease-out), border-color .3s, transform .3s var(--ease-out);
}
.panelbox { padding: 18px 20px; }
.panelbox:hover, .card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.panelbox h3 { margin: 0 0 12px; font: 600 14.5px/1.3 var(--sans); color: var(--ink); gap: 9px; }
.panelbox h3 .ico { width: 18px; height: 18px; padding: 5px; box-sizing: content-box; border-radius: 8px; background: var(--soft); }
.grid-cards, .dashboard-charts { gap: 16px; margin-bottom: 20px; }
.grid-cards > *, .dashboard-charts > *, .svc > * { animation: cl-rise .5s var(--ease-out) both; }
.grid-cards > :nth-child(1), .dashboard-charts > :nth-child(1), .svc > :nth-child(1) { animation-delay: .12s; }
.grid-cards > :nth-child(2), .dashboard-charts > :nth-child(2), .svc > :nth-child(2) { animation-delay: .18s; }
.grid-cards > :nth-child(3), .svc > :nth-child(3) { animation-delay: .24s; }
.grid-cards > :nth-child(4), .svc > :nth-child(4) { animation-delay: .3s; }
.grid-cards > :nth-child(n+5), .svc > :nth-child(n+5) { animation-delay: .36s; }
.chart-head strong { font: 500 26px/1 var(--serif); color: var(--ink); }
.chart-caption { color: var(--ink-3); }
.chart-legend { gap: 8px 14px; margin-top: 10px; }
.chart-legend span { padding: 3px 8px; border-radius: 99px; background: var(--soft); color: var(--ink-2); }
.chart-legend i { border-radius: 3px; }
.card { padding: 16px; }
.card:hover { transform: translateY(-2px); }
.tile { border-radius: 10px; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 12%); }
.list-clean li { border-color: var(--line); transition: background var(--dur), padding var(--dur); }
.list-clean li:hover { background: var(--soft); padding-left: 6px; padding-right: 6px; border-radius: 8px; }
.kv dt { color: var(--ink-3); }
.kbd { border-color: var(--line); background: var(--soft); color: var(--ink); }
.quick { gap: 8px; }
.bars { gap: 4px; height: 140px; border-color: var(--line); }
.bars div {
  background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 55%, var(--red)));
  border-radius: 5px 5px 2px 2px;
  transform-origin: bottom;
  animation: cl-bar-grow .7s var(--ease-out) both;
  transition: filter var(--dur), transform var(--dur);
}
.bars div:hover { filter: brightness(1.15) saturate(1.2); }

/* tables */
.table-wrap, .teacher-table {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: auto;
}
.table, .table-wrap > table { font-size: 13.5px; }
.table th, .table-wrap > table th, .teacher-table th {
  position: sticky; top: 0;
  background: var(--side);
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.table td, .table-wrap > table td { border-color: var(--line); }
.table tbody tr, .table-wrap > table tbody tr { transition: background var(--dur); }
.table tr:hover td, .table-wrap > table tbody tr:hover td, .table tbody tr:hover { background: color-mix(in srgb, var(--blue-soft) 45%, var(--surface)); }
.table tbody tr, .table-wrap tbody tr { animation: cl-fade .4s ease both; }
.table .ttl button:hover { color: var(--blue); }

/* badges / pills / statuses */
.badge-s, .status, .tag, .pill { border-radius: 99px; font-weight: 600; font-size: 11.5px; white-space: nowrap; }
.badge-s { padding: 2px 9px; }
.b-ok, .status.on { background: var(--ok-soft); color: var(--ok); }
.b-warn, .status.pending { background: var(--amber-soft); color: var(--amber); }
.b-bad { background: var(--red-soft); color: var(--red-2); }
.b-info { background: var(--blue-soft); color: var(--blue-2); }
.b-mute, .status.off, .tag { background: var(--soft); color: var(--ink-3); }
.b-ok::before, .status.on::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: cl-dot 2s ease-in-out infinite; }
.pill.admin { background: var(--red-soft); color: var(--red-2); }
.pill.student { background: var(--blue-soft); color: var(--blue-2); }

.note, .banner { border: 1px solid var(--line); border-radius: 12px; background: var(--blue-soft); color: var(--ink); animation: cl-rise .35s var(--ease-out) both; }
.note { border-left: 3px solid var(--blue); }
.note.warn, .banner { background: var(--amber-soft); border-left: 3px solid var(--amber); }
.note.bad { background: var(--red-soft); border-left: 3px solid var(--red); }
.creds { border-color: var(--blue); background: var(--blue-soft); border-radius: 14px; }
.empty { color: var(--ink-3); }
.err { color: var(--red); }
.sect { border-color: var(--line); }
.sect > h2, .sect > h3, .sect h4 { color: var(--ink); }
.pager { color: var(--ink-3); }

/* ---------- 9. Teacher space ------------------------------------------- */
.teacher-welcome {
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: cl-rise .5s var(--ease-out) both;
}
.teacher-welcome::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 200px at 100% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 70%),
              radial-gradient(500px 180px at 0% 100%, color-mix(in srgb, var(--red) 8%, transparent), transparent 70%);
  pointer-events: none;
}
.teacher-welcome > * { position: relative; }
.teacher-eyebrow { color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.teacher-welcome h2 { font: 400 30px/1.15 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.teacher-ai { background: var(--accent); border-color: var(--accent); color: #fff; }
.teacher-ai:hover:not(:disabled) { background: var(--red-2); filter: none; }
.teacher-stats .stat { background: var(--surface); border-radius: 14px; }
.teacher-stats .stat b { color: var(--ink); }
.teacher-courses { border-color: var(--line); }

/* ---------- 10. Student home ------------------------------------------- */
.student-app .col.view-empty { max-width: 768px; }
.student-app .hero.student-home {
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  justify-content: center;
  align-content: center;
  column-gap: 10px;
  padding: 24px 0 32px;
  animation: none;
}
.student-app .student-home > .student-home-eyebrow { display: none; }
.student-app .student-home > .copilot-badge { grid-row: 1; grid-column: 1 / -1; justify-self: center; }
.student-app .student-home > .hero-mark { grid-row: 2; grid-column: 2; width: auto; margin: 0; }
.student-app .student-home > h1 { grid-row: 2; grid-column: 3; width: auto; }
.student-app .student-home .hero-mark img { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.student-app .student-home h1, :root[data-theme="dark"] .student-app .student-home h1 { color: var(--ink); font: 400 clamp(30px, 3.4vw, 40px)/1.15 var(--serif); letter-spacing: -.015em; }
.student-app .student-home p.sub { width: 100%; margin: 8px 0 24px; color: var(--ink-3); text-align: center; }
.student-app .student-home #heroSlot { width: min(100%, 700px); justify-self: center; }
.student-app .student-home #heroSlot .composer { width: min(700px, calc(100vw - 40px)); }
.student-app .student-home .chips { display: flex; flex-wrap: wrap; justify-content: center; width: min(100%, 700px); margin: 14px auto 0; }
.student-app .student-home .chip { display: inline-flex; min-height: 34px; padding: 6px 12px; }

/* ---------- 11. Right panel, modals, sheets, toasts --------------------- */
.panel, .student-app .panel { border-left: 1px solid var(--line); background: var(--surface); box-shadow: none; animation: cl-slide-right .3s var(--ease-out) both; }
.p-head, .student-app .p-head { min-height: 56px; border-color: var(--line); background: var(--surface); }
.p-head h2, .student-app .p-head h2 { font: 600 15px var(--sans); color: var(--ink); }
.student-app .p-body .card { box-shadow: var(--shadow); border-radius: 14px; }
.doclist button { border-radius: 10px; transition: background var(--dur), transform var(--dur); }
.doclist button:hover, .student-app .doclist button:hover { background: var(--soft); transform: translateX(2px); }
.original-document { margin: 16px 0; }
.original-document h3 { margin: 0 0 9px; font-size: 14px; }
.original-pdf { display: block; width: 100%; height: min(68vh, 760px); min-height: 360px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.original-image { display: block; max-width: 100%; max-height: 68vh; margin: 0 auto; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; }
.extracted-document { margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; }
.extracted-document summary { padding: 11px 13px; color: var(--ink-2); cursor: pointer; font-size: 13px; }
.extracted-document .doctext { max-height: 44vh; overflow: auto; padding: 0 13px 13px; white-space: pre-wrap; }
.notification-item:hover, .student-app .notification-item:hover { background: var(--soft); }
.notification-mark { background: var(--blue-soft); }
.notification-mark .ico { color: var(--blue); }
.library-tabs button[aria-selected="true"] { border-color: var(--red); color: var(--ink); }
.library-tabs button { transition: color var(--dur), border-color var(--dur); }

.modal, .sheet { background: var(--scrim); backdrop-filter: blur(4px); animation: cl-fade .2s ease both; }
.dialog, .sheet .card2 {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: cl-pop .28s var(--ease-out) both;
}
.sheet h3 { font: 500 22px/1.2 var(--serif); letter-spacing: -.01em; }
.tabs { background: var(--side); border-color: var(--line); }
.tabs h2 { font: 500 20px var(--serif); }
.tabs button { transition: background var(--dur), color var(--dur); }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.pane-head h3 { font: 500 22px var(--serif); }
.toast {
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-lg);
  animation: cl-toast .3s var(--ease-spring) both;
}
.srcpop { background: var(--surface); border-color: var(--line); border-radius: 12px; animation: cl-pop .18s var(--ease-out) both; }
.scrim.on { background: var(--scrim); backdrop-filter: blur(2px); animation: cl-fade .2s ease both; }

/* calendar / study tools */
.calendar-day { border-radius: 10px; transition: background var(--dur), transform .2s var(--ease-spring); }
.calendar-day:hover { background: var(--soft-2); transform: scale(1.05); }
.calendar-day.today, .student-app .calendar-day.today:not(.selected) { border-color: var(--red); background: transparent; }
.calendar-day.selected, .student-app .calendar-day.selected { background: var(--blue); color: #fff; border-color: transparent; }
.calendar-day i { background: var(--red); }
.student-app .calendar-week { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.study-sidenav, .student-app .study-sidenav { background: var(--side); border-color: var(--line); }
.study-sidenav button[aria-current="page"], .student-app .study-sidenav button[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.study-sidenav button[aria-current="page"] .ico { color: var(--blue); }
.tool-icon, .student-app .tool-icon { background: var(--blue-soft); border-radius: 12px; }
.tool-icon .ico { color: var(--blue); }
.tool-icon.timer { background: var(--red-soft); } .tool-icon.timer .ico { color: var(--red); }
.tool-icon.cards { background: var(--blue-soft); } .tool-icon.cards .ico { color: var(--blue); }
.focus-clock { font-family: var(--serif); font-weight: 400; }
.flashcard, .flashcard-review { background: var(--surface); border-color: var(--line); }
.study-flow span { background: var(--soft); }
.study-flow b { color: var(--red); }
.offline-notice { border-left-color: var(--amber); }
.ide-toolbar, .ide-files, .ide-bottom { background: var(--side); border-color: var(--line); }
.ide-file.active { background: var(--blue-soft); }
.ide-file-dot, .ide-file.active .ide-file-dot { background: var(--blue); }

/* ---------- 12. Sign-in pages ------------------------------------------ */
.login {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  padding: 32px;
}
.login::before, .login::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .22;
  pointer-events: none;
}
.login::before { top: -30vmax; left: -20vmax; background: var(--red); animation: cl-blob-a 18s ease-in-out infinite; }
.login::after { bottom: -30vmax; right: -20vmax; background: var(--blue); animation: cl-blob-b 22s ease-in-out infinite; }
.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  width: min(1220px, 100%);
  margin: 0 auto;
}
.login .box2, .gate-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  animation: cl-pop .5s var(--ease-out) both;
}
.login-panel {
  width: 100%;
  max-width: 440px;
  padding: 34px 30px;
  text-align: left;
}
.teacher-login .login .box2 { border-top: 1px solid var(--line); }
.login img { animation: cl-float 6s ease-in-out infinite; }
.login .login-copilot-badge { align-self: flex-start; margin: 4px 0 14px; padding: 4px 11px 4px 5px; animation: none; }
.login .login-copilot-badge > img { display: block; width: 22px; height: 22px; flex: none; margin: 0; object-fit: contain; animation: none; }
.login .login-copilot-badge .copilot-name { white-space: nowrap; }
.login h1, .gate h1, .gate-card h1 { font: 400 28px/1.2 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.login p, .gate p { color: var(--ink-2); }
.login .kicker.admin, .login .kicker { background: var(--red-soft); color: var(--red-2); border-radius: 99px; letter-spacing: .06em; }
.teacher-login .kicker.admin { background: var(--blue-soft); color: var(--blue-2); }
.login .kicker.dev { background: var(--soft-2); color: var(--ink-2); }
.teacher-login #loginBtn { background: var(--primary); }
.login .btn.block { min-height: 44px; font-size: 15px; border-radius: 12px; }
.login .msbtn { box-sizing: border-box; height: 46px; min-height: 46px; max-height: 46px; padding: 0 12px; border-color: var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); line-height: 1; white-space: nowrap; overflow: hidden; transform: none; transition: border-color var(--dur), box-shadow var(--dur); }
.login .msbtn:hover { border-color: var(--line-strong); background: var(--surface); box-shadow: var(--shadow-md); transform: none; }
.login .msbtn.is-redirecting { cursor: wait; }
.login .msbtn.is-redirecting::after { content: ""; width: 13px; height: 13px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: login-spin .7s linear infinite; }
.login .msbtn-label { white-space: nowrap; }
@keyframes login-spin { to { transform: rotate(360deg); } }
.login .alert { background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); border-radius: 12px; animation: cl-rise .3s ease both; }
.login .sub-link { display: inline-flex; align-items: center; min-height: 38px; color: var(--blue); font-weight: 650; text-decoration: none; transition: color var(--dur); }
.login .sub-link:hover { color: var(--blue-2); }
.login .fine { color: var(--ink-3); }
.avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

.auth-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: #0b0b0c;
  color: rgba(255,255,255,0.72);
}
.auth-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0;
}
.auth-brand {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.auth-footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
}
.auth-footer-links a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}
.auth-footer-links a:hover {
  color: #ffffff;
}

.login-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
}
.login-visual-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  width: min(100%, 720px);
  height: min(82vh, 620px);
  min-height: 460px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--side);
  box-shadow: var(--shadow-lg);
}
.login-visual-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, transparent, rgb(7 18 33 / 64%)); pointer-events: none; }
.login-visual-image { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; margin: 0 !important; object-fit: cover; object-position: center; animation: none !important; }
.login-quote { position: relative; z-index: 1; max-width: 490px; margin: 0 28px 28px; padding: 19px 22px; border-left: 3px solid #8cc6ff; border-radius: 0 8px 8px 0; background: rgb(8 18 33 / 68%); color: #fff; backdrop-filter: blur(8px); }
.login-quote blockquote { margin: 0; font: 500 20px/1.4 var(--serif); }
.login-quote figcaption { margin-top: 8px; color: rgb(255 255 255 / 78%); font-size: 12px; }
@media (max-width: 920px) {
  .login {
    padding: 20px 16px;
  }
  .login-shell {
    grid-template-columns: 1fr;
  }
  .login-panel {
    max-width: 100%;
  }
  .login-visual {
    min-height: 300px;
  }
  .login-visual-card {
    height: 340px;
    min-height: 300px;
  }
  .login-quote { margin: 0 14px 14px; padding: 14px 16px; }
  .login-quote blockquote { font-size: 17px; }
}

/* ---------- 13. Landing page ------------------------------------------- */
.landing-body, .landing-nav, .landing-footer, .platform-section { background-color: var(--bg); color: var(--ink); }
.landing-nav { border-color: var(--line); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.landing-nav nav a:hover, .landing-signin:hover, .landing-footer a:hover { color: var(--red); }
.landing-cta, .btn.landing-cta { background: var(--accent); color: #fff; border-radius: 10px; }
.landing-cta:hover, .btn.landing-cta:hover:not(:disabled) { background: var(--red-2); }
.landing-hero, .connection-section { background: var(--bg); position: relative; isolation: isolate; }
.landing-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px 420px at 85% 30%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 70%),
              radial-gradient(600px 400px at 10% 90%, color-mix(in srgb, var(--red) 10%, transparent), transparent 70%);
  animation: cl-fade 1.2s ease both;
}
.hero-copy { animation: cl-rise .8s var(--ease-out) both; }
.hero-copy h1, .section-intro h2, .connection-copy h2, .preview-content h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -.02em; }
.hero-kicker, .hero-secondary, .text-link { color: var(--red); }
.hero-kicker > span, .preview-status i, .preview-dot.green { background: var(--blue); }
.preview-dot.coral { background: var(--red); }
.product-stage { animation: cl-rise .9s .15s var(--ease-out) both; }
.product-window { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-lg); transform: none; animation: cl-float 8s 1s ease-in-out infinite; }
.preview-side { background: var(--side); border-color: var(--line); }
.preview-send { background: var(--accent); }
.cap-green, .cap-gold { background: var(--red-soft); color: var(--red-2); }
.cap-blue, .cap-coral { background: var(--blue-soft); color: var(--blue-2); }
.capability { border-color: var(--line); transition: transform .3s var(--ease-out), box-shadow .3s; }
.capability:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.orbit { border-color: var(--line); animation: cl-spin 40s linear infinite; }
.orbit-node, .orbit-core, .preview-prompt, .preview-source { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.connection-visual .node-doc, .connection-visual .node-cal { color: var(--blue-2); }
.connection-visual .node-ai, .connection-visual .node-user { color: var(--red-2); background: var(--red-soft); }
.landing-footer { background: var(--side); border-color: var(--line); }

/* scroll-reveal helper (added by motion.js) */
.cl-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.cl-reveal.cl-in { opacity: 1; transform: none; }

/* ---------- 14. Responsive -------------------------------------------- */
@media (max-width: 780px) {
  .app, .app.collapsed, .student-app, .student-app.collapsed { grid-template-columns: minmax(0, 1fr); }
  .app.drawer .side, .student-app.drawer .side { box-shadow: var(--shadow-lg); }
  .page-head { padding: 10px 16px; }
  .page-body { padding: 18px 16px 36px; }
  .bar, .student-app .bar { padding: 8px 12px; }
  .hero h1 { font-size: 28px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat b, .teacher-stats .stat b { font-size: 26px; }
  .student-home-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cl-reveal { opacity: 1; transform: none; }
}