/* Shared design system, copied verbatim from "App UX.html" (CutoffGenie UI guide, css/styles.css):
   tokens, backdrop, glass, shell (top bar, tab bar, sidebar), buttons, chips, fields, cards, notices, sheet.
   Travel-Planner rules live in app.css and only reference these tokens. */
/* ==========================================================================
   CutoffGenie — glass UI, mobile first.
   Shared tokens + components for every page; page CSS files only add
   page-specific rules on top of these tokens.

   Theme: light by default, dark from the system setting, and either one
   when the viewer picks it with the toggle (data-theme on <html>, saved by
   js/theme.js under cutoffTracker.theme.v1).
   ========================================================================== */

/* font: Plus Jakarta Sans (loaded from Google Fonts in this guide; self-hosted in the app) */
/* ---------- tokens: light ---------- */
:root {
  color-scheme: light;
  --bg: #eceefb;
  --bg-2: #f7f5ff;
  --blob-1: rgba(167, 139, 250, 0.55);
  --blob-2: rgba(103, 232, 249, 0.45);
  --blob-3: rgba(249, 168, 212, 0.45);
  --blob-4: rgba(147, 197, 253, 0.55);
  --glass: linear-gradient(150deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.58));
  --glass-solid: rgba(250, 250, 255, 0.94);
  --card-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
  --bar-bg: rgba(250, 250, 255, 0.84);
  --sheet-bg: rgba(248, 248, 255, 0.92);
  --table-solid: #f6f6fd;
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-hi: rgba(255, 255, 255, 0.9);
  --shadow: 0 24px 48px -28px rgba(49, 46, 129, 0.35), 0 2px 6px rgba(49, 46, 129, 0.05);
  --shadow-sm: 0 14px 30px -22px rgba(49, 46, 129, 0.5), 0 1px 3px rgba(49, 46, 129, 0.05);
  --surface: #f3f3fb;
  --ink: #15142b;
  --ink-2: #45435f;
  --ink-3: #5b5977;
  --hairline: rgba(21, 20, 43, 0.09);
  --grid: rgba(21, 20, 43, 0.08);
  --axis: rgba(21, 20, 43, 0.22);
  --field-bg: rgba(255, 255, 255, 0.6);
  --chip-bg: rgba(255, 255, 255, 0.7);
  --track: rgba(21, 20, 43, 0.1);
  --seg-active: #ffffff;
  --focus: rgba(124, 58, 237, 0.28);
  --notice-bg: rgba(250, 178, 25, 0.14);
  --notice-border: rgba(250, 178, 25, 0.35);
  --info-bg: rgba(124, 58, 237, 0.08);
  --accent-1: #6d28d9;
  --accent-2: #0891b2;
  --accent-grad: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 55%, #06b6d4 100%);
  --btn-grad: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
  --hero-ink: linear-gradient(180deg, #15142b 35%, #5b3fd6 100%);
  --good: #0ca30c;
  --ok-ink: #03694c;
  --ok-bg: rgba(5, 150, 105, 0.12);
  --warn-ink: #8a5a00;
  --warn-bg: rgba(245, 158, 11, 0.16);
  --danger: #b91c1c;

  /* Data colours. --rank1..5 (1st..5th choice, stacked bars) and the
     tighten/loosen diverging pair are validated palettes — re-checked
     against these surfaces with the dataviz validator, both themes pass.
     Marks use them directly; text beside them uses the *-ink steps,
     which clear 4.5:1 (the mark colours are only 3:1 graphics-safe). */
  --rank1: #2a78d6;
  --rank2: #008300;
  --rank3: #e87ba4;
  --rank4: #eda100;
  --rank5: #1baf7a;
  --move-tighten: #2a78d6;
  --move-loosen: #e34948;
  --tighten-ink: #1d5fb3;
  --loosen-ink: #b42318;

  /* Exam identity (which exam a rank belongs to), text-safe. */
  --kcet-ink: #8a5a00;
  --comedk-ink: #047857;

  --topbar-h: 65px;
  --sidebar-w: 254px;
  --sidebar-w-collapsed: 76px;
  --sticky-top: calc(var(--topbar-h) + env(safe-area-inset-top));
}

/* ---------- tokens: dark (system preference, unless the viewer picked light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0a1a;
    --bg-2: #171433;
    --blob-1: rgba(124, 58, 237, 0.3);
    --blob-2: rgba(6, 182, 212, 0.18);
    --blob-3: rgba(236, 72, 153, 0.18);
    --blob-4: rgba(79, 70, 229, 0.28);
    --glass: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    --glass-solid: rgba(28, 27, 51, 0.94);
    --card-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03));
    --bar-bg: rgba(22, 20, 44, 0.84);
    --sheet-bg: rgba(24, 22, 46, 0.92);
    --table-solid: #221f3f;
    --glass-border: rgba(255, 255, 255, 0.13);
    --glass-hi: rgba(255, 255, 255, 0.14);
    --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 16px 32px -22px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.2);
    --surface: #1c1b33;
    --ink: #f4f3ff;
    --ink-2: #c6c4e2;
    --ink-3: #b8b6d6;
    --hairline: rgba(255, 255, 255, 0.1);
    --grid: rgba(255, 255, 255, 0.08);
    --axis: rgba(255, 255, 255, 0.24);
    --field-bg: rgba(255, 255, 255, 0.05);
    --chip-bg: rgba(255, 255, 255, 0.06);
    --track: rgba(255, 255, 255, 0.12);
    --seg-active: rgba(255, 255, 255, 0.14);
    --focus: rgba(167, 139, 250, 0.35);
    --notice-bg: rgba(250, 178, 25, 0.12);
    --notice-border: rgba(250, 178, 25, 0.3);
    --info-bg: rgba(167, 139, 250, 0.1);
    --accent-1: #b4a0fb;
    --accent-2: #22d3ee;
    --hero-ink: linear-gradient(180deg, #ffffff 30%, #c4b5fd 100%);
    --ok-ink: #6ee7b7;
    --ok-bg: rgba(52, 211, 153, 0.13);
    --warn-ink: #fcd34d;
    --warn-bg: rgba(251, 191, 36, 0.14);
    --danger: #f87171;
    --rank1: #3987e5;
    --rank2: #008300;
    --rank3: #d55181;
    --rank4: #c98500;
    --rank5: #199e70;
    --move-tighten: #3987e5;
    --move-loosen: #e66767;
    --tighten-ink: #7cb3f5;
    --loosen-ink: #f59494;
    --kcet-ink: #f2b544;
    --comedk-ink: #34d399;
  }
}

/* ---------- tokens: dark (explicit toggle) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0a1a;
  --bg-2: #171433;
  --blob-1: rgba(124, 58, 237, 0.3);
  --blob-2: rgba(6, 182, 212, 0.18);
  --blob-3: rgba(236, 72, 153, 0.18);
  --blob-4: rgba(79, 70, 229, 0.28);
  --glass: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  --glass-solid: rgba(28, 27, 51, 0.94);
  --card-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03));
  --bar-bg: rgba(22, 20, 44, 0.84);
  --sheet-bg: rgba(24, 22, 46, 0.92);
  --table-solid: #221f3f;
  --glass-border: rgba(255, 255, 255, 0.13);
  --glass-hi: rgba(255, 255, 255, 0.14);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 16px 32px -22px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.2);
  --surface: #1c1b33;
  --ink: #f4f3ff;
  --ink-2: #c6c4e2;
  --ink-3: #b8b6d6;
  --hairline: rgba(255, 255, 255, 0.1);
  --grid: rgba(255, 255, 255, 0.08);
  --axis: rgba(255, 255, 255, 0.24);
  --field-bg: rgba(255, 255, 255, 0.05);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --track: rgba(255, 255, 255, 0.12);
  --seg-active: rgba(255, 255, 255, 0.14);
  --focus: rgba(167, 139, 250, 0.35);
  --notice-bg: rgba(250, 178, 25, 0.12);
  --notice-border: rgba(250, 178, 25, 0.3);
  --info-bg: rgba(167, 139, 250, 0.1);
  --accent-1: #b4a0fb;
  --accent-2: #22d3ee;
  --hero-ink: linear-gradient(180deg, #ffffff 30%, #c4b5fd 100%);
  --ok-ink: #6ee7b7;
  --ok-bg: rgba(52, 211, 153, 0.13);
  --warn-ink: #fcd34d;
  --warn-bg: rgba(251, 191, 36, 0.14);
  --danger: #f87171;
  --rank1: #3987e5;
  --rank2: #008300;
  --rank3: #d55181;
  --rank4: #c98500;
  --rank5: #199e70;
  --move-tighten: #3987e5;
  --move-loosen: #e66767;
  --tighten-ink: #7cb3f5;
  --loosen-ink: #f59494;
  --kcet-ink: #f2b544;
  --comedk-ink: #34d399;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sticky-top) + 12px);
}
html.modal-open { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  /* long file names in source notes must wrap, not push the page sideways */
  overflow-wrap: break-word;
}
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
/* `hidden` must win over class-level display: flex/grid */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* inline SVG sprite (js/icons.js): <svg class="i"><use href="#i-name"/></svg> */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}

/* ---------- moving backdrop ---------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(120% 70% at 50% -10%, var(--bg-2), var(--bg) 65%);
}
.blob {
  position: absolute;
  width: 75vmax;
  height: 75vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent 72%);
  will-change: transform;
  animation: drift 28s ease-in-out infinite alternate;
}
.b1 { --c: var(--blob-1); top: -30vmax; left: -25vmax; }
.b2 { --c: var(--blob-2); top: 5vh; right: -35vmax; animation-duration: 34s; animation-delay: -9s; }
.b3 { --c: var(--blob-3); bottom: -35vmax; left: -15vmax; animation-duration: 38s; animation-delay: -15s; }
.b4 { --c: var(--blob-4); bottom: -25vmax; right: -25vmax; animation-duration: 31s; animation-delay: -4s; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(7vmax, 5vmax, 0) scale(1.08); }
  100% { transform: translate3d(-5vmax, 9vmax, 0) scale(0.94); }
}
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- glass ----------
   Cards are translucent gradients WITHOUT backdrop blur: a blurred copy of
   the page behind a card costs GPU memory for its full height (the ranking
   and results tables run to tens of thousands of pixels), which stalled
   phones. Real blur is kept for the small fixed surfaces only: top bar,
   tab bar, desktop sidebar and the pop-up sheet. */
.glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
}
.card { border-radius: 24px; padding: 20px; }
.card-head { margin-bottom: 14px; }
.card-head h2, .card-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; }
.card-sub { margin-top: 4px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.card-sub strong, .card-sub b { color: var(--ink-2); }
.card-icon { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--chip-bg); border: 1px solid var(--hairline); color: var(--accent-1); }
.card-icon .i { width: 17px; height: 17px; }

/* ==========================================================================
   Top bar (phones & tablets)
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.topbar.scrolled {
  background: var(--bar-bg);
  border-bottom-color: var(--glass-border);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; flex: none; border-radius: 11px; box-shadow: 0 6px 18px -6px rgba(99, 102, 241, 0.6); }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; white-space: nowrap; }
.brand-text strong { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.brand-text span { font-size: 12px; color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.icon-btn {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  cursor: pointer;
  transition: transform 0.2s;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn .i { width: 20px; height: 20px; }
.i-moon { display: none; }
:root[data-effective="light"] .i-sun { display: none; }
:root[data-effective="light"] .i-moon { display: block; }

/* ==========================================================================
   App shell: sidebar (desktop) + content
   ========================================================================== */
.app-shell { display: block; }
.app-content { min-width: 0; }
.sidebar { display: none; }

/* ==========================================================================
   Bottom tab bar (phones & tablets)
   ========================================================================== */
.tabbar {
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: min(480px, calc(100% - 24px));
  padding: 6px;
  border-radius: 24px;
  transform: translateX(-50%);
}
.tabbar:empty { display: none; }
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 4px 7px;
  border-radius: 18px;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  touch-action: manipulation;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .i { width: 22px; height: 22px; }
.tab:hover { color: var(--ink); }
.tab:active { transform: scale(0.96); }
.tab[aria-current="page"] { background: var(--seg-active); color: var(--ink); box-shadow: 0 2px 10px -3px rgba(15, 12, 40, 0.3); }
.tab[aria-current="page"] .i { color: var(--accent-1); }
@media (max-width: 359px) { .tab { padding-inline: 2px; font-size: 10.5px; letter-spacing: -0.01em; } }

/* ==========================================================================
   Layout + page intro
   ========================================================================== */
.layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px max(16px, env(safe-area-inset-right)) calc(112px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.stack > * { min-width: 0; }

.intro { padding: 10px 2px 20px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--glass-border);
  color: var(--ink-2);
}
.pulse { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--good); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--good); opacity: 0.5; animation: pulse 2.4s infinite; }
@keyframes pulse { 70%, 100% { transform: scale(3); opacity: 0; } }
h1 {
  margin-top: 14px;
  font-size: clamp(28px, 7.6vw, 44px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;
  background: var(--hero-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
  overflow-wrap: anywhere;
}
.lede { margin-top: 10px; font-size: 15px; color: var(--ink-2); max-width: 44em; }
.intro-controls { display: grid; gap: 12px; margin-top: 18px; justify-items: start; }
.intro-controls:empty { display: none; }

/* Home-page hero art: a short wide banner above the heading on phones,
   beside the heading from 760px (the <picture> swaps in the taller art). */
.hero-art { display: block; margin: -4px -8px 8px; }
.hero-art img { display: block; width: 100%; height: auto; }
@media (min-width: 760px) {
  /* text block centred against the art: flexible rows above and below */
  .intro.has-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 42%); grid-template-rows: 1fr repeat(4, auto) 1fr; column-gap: 32px; }
  .intro.has-hero > * { grid-column: 1; }
  .intro.has-hero > .eyebrow { grid-row: 2; justify-self: start; }
  .intro.has-hero > h1 { grid-row: 3; }
  .intro.has-hero > .lede { grid-row: 4; }
  .intro.has-hero > .intro-controls { grid-row: 5; }
  .intro.has-hero > .hero-art { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; }
}
@media (min-width: 1000px) {
  .intro.has-hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
}

/* ==========================================================================
   Segmented control (links or buttons) — exam choice, view toggle, toggles
   ========================================================================== */
.seg {
  display: inline-flex;
  max-width: 100%;
  padding: 3px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
}
.seg > a, .seg > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.seg > a:hover, .seg > button:hover { color: var(--ink); }
.seg > a[aria-current="page"],
.seg > button[aria-pressed="true"] { background: var(--seg-active); color: var(--ink); box-shadow: 0 2px 8px -2px rgba(15, 12, 40, 0.25); }
.seg .i { width: 18px; height: 18px; }
/* exam choice only on phones/tablets — desktop has it in the sidebar */
.exam-seg { width: 100%; max-width: 420px; }
.exam-seg:empty { display: none; }
.exam-seg > a { flex: 1 1 0; min-width: 0; }

/* in-card segmented control (field surface, no blur) */
.seg.seg-field { background: var(--field-bg); border-color: var(--hairline); }

/* ==========================================================================
   Round switch (tabs with status badge)
   ========================================================================== */
.round-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.round-switch:empty { display: none; }
.round-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--chip-bg);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.round-tab:hover { color: var(--ink); border-color: var(--accent-1); }
.round-tab.active {
  background: var(--seg-active);
  color: var(--ink);
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px var(--focus), 0 4px 12px -6px rgba(79, 70, 229, 0.6);
}
.round-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--ink-3);
}
.round-badge.official { background: var(--ok-bg); color: var(--ok-ink); }
.round-badge.mock { background: var(--info-bg); color: var(--accent-1); }
.round-badge.provisional { background: var(--warn-bg); color: var(--warn-ink); }
.round-badge.pending { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hairline); }

/* pill toggles (JoSAA institute type) */
.exam-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.exam-switch:empty { display: none; }
.exam-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--chip-bg);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.exam-tab .i { width: 17px; height: 17px; }
.exam-tab:hover { color: var(--ink); border-color: var(--accent-1); }
.exam-tab:active { transform: scale(0.96); }
.exam-tab.active { color: #fff; background: var(--btn-grad); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(79, 70, 229, 0.8); }

/* ==========================================================================
   Buttons & chips
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn .i { width: 18px; height: 18px; }
.btn-primary { color: #fff; background: var(--btn-grad); box-shadow: 0 10px 24px -10px rgba(79, 70, 229, 0.8); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--chip-bg);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.btn-ghost:hover { border-color: var(--accent-1); color: var(--ink); }
.btn-ghost:active { transform: scale(0.97); }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--chip-bg);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.chip .i { width: 17px; height: 17px; }
.chip:hover:not([disabled]) { border-color: var(--accent-1); color: var(--ink); }
.chip:active:not([disabled]) { transform: scale(0.96); }
.chip[disabled] { opacity: 0.45; cursor: not-allowed; }
.toggle-chip.active,
.toggle-chip[aria-pressed="true"] { color: #fff; background: var(--btn-grad); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(79, 70, 229, 0.8); }
/* touch screens keep :hover after a tap — don't let it grey out a pressed chip */
.chip.toggle-chip.active:hover,
.chip.toggle-chip[aria-pressed="true"]:hover { color: #fff; border-color: transparent; }

.link-btn { border: 0; background: none; padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--accent-1); cursor: pointer; }

/* ==========================================================================
   Form controls — every field ≥ 16px so iOS never zooms on focus
   ========================================================================== */
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

select, .sort-select {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 40px 0 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background-color: var(--field-bg);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 20px center, right 15px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
select:hover { border-color: var(--accent-1); }
select:focus { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 4px var(--focus); }
select:disabled { opacity: 0.5; cursor: not-allowed; }
select option { background: var(--surface); color: var(--ink); }

/* search field: icon + input (+ native clear) */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 48px;
  padding: 0 12px 0 14px;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: var(--field-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-box:focus-within { border-color: var(--accent-1); box-shadow: 0 0 0 4px var(--focus); }
.search-box > .i { width: 19px; height: 19px; color: var(--ink-3); }
.search-box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
}
.search-box input::placeholder { color: var(--ink-3); opacity: 0.85; }

/* large number field (rank inputs) */
.num-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 60px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--field-bg);
  border: 1px solid var(--hairline);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: text;
}
.num-wrap:focus-within { border-color: var(--accent-1); box-shadow: 0 0 0 4px var(--focus); }
.num-prefix { font-size: 22px; font-weight: 800; color: var(--ink-3); }
.num-wrap input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--ink);
  height: 100%;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.num-wrap input::placeholder { color: var(--ink-3); opacity: 0.5; font-weight: 700; }
.num-wrap input::-webkit-inner-spin-button,
.num-wrap input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num-wrap input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field-hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }

/* ==========================================================================
   Filters, stats bar, view toggle
   ========================================================================== */
.filters-panel { display: grid; gap: 12px; }
.search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.search-row .search-box { grid-column: 1 / -1; }
.stats-bar { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.stats-bar:empty { display: none; }
.stats-bar strong { color: var(--ink); font-weight: 800; }

.view-toggle.seg { flex: none; }
.view-toggle.seg > button { min-width: 44px; padding: 0 12px; }

@media (min-width: 640px) {
  .search-row { grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) auto; }
  .search-row .search-box { grid-column: auto; }
}

/* ==========================================================================
   Stat tiles
   ========================================================================== */
.stats-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stats-strip:empty { display: none; }
.stat-tile {
  min-width: 0;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
}
.stat-value { font-size: clamp(20px, 6.2vw, 24px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-label { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.stat-sub { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.stat-tile.accent .stat-value { background: var(--hero-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 359px) { .stat-tile { padding: 12px 13px; } }
@media (min-width: 720px) { .stats-strip { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } }

/* ==========================================================================
   Result cards (repeated — translucent gradient, never blurred)
   ========================================================================== */
.card-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 860px) { .card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1400px) { .card-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rcard {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 14px 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
  transition: transform 0.18s, border-color 0.2s, opacity 0.2s;
}
.rcard.clickable { cursor: pointer; touch-action: manipulation; }
/* long result lists: off-screen cards/rows skip layout and paint */
.card-list > .rcard { content-visibility: auto; contain-intrinsic-size: auto 128px; }
.data-table tbody tr { content-visibility: auto; contain-intrinsic-size: auto 72px; }
.rcard.clickable:hover { border-color: var(--accent-1); }
.rcard.clickable:active { transform: scale(0.985); }
.rcard.eligible { border-color: var(--ok-ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--ok-ink); }
.rcard.not-eligible { opacity: 0.45; }
.rcard-left { flex: 1; min-width: 0; display: grid; gap: 4px; }
.rcard-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rcard-college { font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.rcard-branch { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.code-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 8px;
  color: var(--accent-1);
  background: var(--info-bg);
  font-variant-numeric: tabular-nums;
}
.group-tag { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }

/* big closing-rank figure on the right of a card */
.rank-pill {
  flex: none;
  min-width: 72px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--chip-bg);
  border: 1px solid var(--hairline);
  color: var(--exam-ink, var(--ink));
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
:root[data-exam="kcet"] { --exam-ink: var(--kcet-ink); }
:root[data-exam="comedk"] { --exam-ink: var(--comedk-ink); }

/* round-over-round history trail (direction carried by colour AND the
   value going up/down, so colour is never the only cue) */
.cutoff-history { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 2px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.history-point.current { color: var(--ink); font-weight: 800; }
.history-arrow { font-weight: 800; }
.history-arrow.tighten { color: var(--tighten-ink); }
.history-arrow.loosen { color: var(--loosen-ink); }
.history-arrow.flat { color: var(--ink-3); }

/* ==========================================================================
   Engineering tracker (index.html): rank checker + results table
   ========================================================================== */
.rank-check-controls { display: grid; gap: 12px; }
.rank-check-actions { display: flex; gap: 10px; }
.rank-check-actions .chip { flex: 1; }
@media (min-width: 640px) {
  .rank-check-controls { grid-template-columns: minmax(0, 360px) auto; align-items: center; justify-content: start; }
  .rank-check-actions .chip { flex: none; }
}
.table-card { padding: 6px 16px; }
.t-code {
  display: inline-flex;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent-1);
  background: var(--info-bg);
  vertical-align: 1px;
}
.results-table .t-college { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.results-table .t-branch { grid-column: 1; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.results-table .t-rank { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 17px; font-weight: 800; color: var(--exam-ink, var(--ink)); }
.results-table tr.not-eligible { opacity: 0.45; }
.results-table tr.eligible .t-rank { color: var(--ok-ink); }
.results-table tr.eligible td:first-child { box-shadow: inset 3px 0 0 var(--ok-ink); padding-left: 10px; }
@container (min-width: 640px) {
  .results-table .t-branch { font-size: 13px; }
  .results-table .t-rank { font-size: 15px; }
}

/* ==========================================================================
   Data tables — mobile first: each row is a compact card; a wide
   container gets a real table whose header sticks below the top bar.
   Page CSS places cells into each table's card grid.
   ========================================================================== */
.table-wrap { container-type: inline-size; min-width: 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.data-table, .data-table tbody { display: block; }
.data-table thead { display: none; }
.data-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: start;
  padding: 13px 4px;
  border-top: 1px solid var(--hairline);
}
.data-table tbody tr:first-child { border-top: 0; }
.data-table td { display: block; min-width: 0; padding: 0; }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover td { color: var(--ink); }
/* a cell that labels itself in card mode */
.data-table .lbl::before, .data-table [data-l]::before {
  content: attr(data-l);
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.data-table .empty-row { grid-column: 1 / -1; padding: 18px 0; text-align: center; color: var(--ink-3); font-style: italic; }

@container (min-width: 640px) {
  .data-table { display: table; }
  .data-table thead { display: table-header-group; }
  .data-table tbody { display: table-row-group; }
  .data-table tr { display: table-row; padding: 0; border: 0; }
  .data-table th, .data-table td {
    display: table-cell;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--hairline);
  }
  .data-table tbody tr:last-child td { border-bottom: 0; }
  .data-table thead th {
    position: sticky;
    top: var(--sticky-top);
    z-index: 2;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    background: var(--table-solid);
    white-space: nowrap;
  }
  .data-table thead th:first-child { border-top-left-radius: 14px; }
  .data-table thead th:last-child { border-top-right-radius: 14px; }
  .data-table .num, .data-table th.num { text-align: right; white-space: nowrap; }
  .data-table [data-l]::before, .data-table .lbl::before { content: none; }
  .data-table tr.clickable:hover td { background: color-mix(in srgb, var(--accent-1) 7%, transparent); }
  .data-table .empty-row { display: table-cell; }
}

/* ==========================================================================
   Notes, disclaimers, empty states
   ========================================================================== */
.notice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 13px 15px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--info-bg);
  border: 1px solid var(--hairline);
}
.notice > .i { width: 20px; height: 20px; margin-top: 1px; color: var(--accent-1); }
.notice > p, .card-sub { min-width: 0; overflow-wrap: anywhere; }
.notice b, .notice strong, .notice em { color: var(--ink); font-style: normal; font-weight: 700; }
.notice a { color: var(--accent-1); font-weight: 700; }
.notice.warn { background: var(--notice-bg); border-color: var(--notice-border); }
.notice.warn > .i { color: var(--warn-ink); }

.list-more { display: flex; width: 100%; margin-top: 12px; }
.list-more[hidden] { display: none; }

.no-results, .empty-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 36px 20px;
  border-radius: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
  border: 1px dashed var(--hairline);
}
.no-results-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.no-results-hint { font-size: 13.5px; color: var(--ink-2); }
.empty-state-text { padding: 26px 12px; text-align: center; font-size: 14px; color: var(--ink-3); }

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ok-ink);
  background: var(--ok-bg);
  white-space: nowrap;
  vertical-align: 1px;
}
.source-badge .i { width: 13px; height: 13px; }

/* skeleton placeholders while a page's data renders */
.skeleton {
  display: block;
  min-height: 74px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(100deg, var(--chip-bg) 20%, var(--glass-hi) 50%, var(--chip-bg) 80%) 0 0 / 250% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton.sm { min-height: 64px; }
.skeleton.chart { min-height: 220px; }
@keyframes shimmer { to { background-position: -250% 0; } }

/* ==========================================================================
   Bottom sheet dialog (js/sheet.js) — sheet on phones, centred ≥ 640px
   ========================================================================== */
.sheet {
  width: 100%;
  max-width: 100%;
  max-height: 92dvh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
.sheet::backdrop {
  background: rgba(11, 10, 26, 0.5);
  animation: fade 0.25s ease both;
}
.sheet-inner {
  display: flex;
  flex-direction: column;
  max-height: 92dvh;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 28px 28px 0 0;
  border: 1px solid var(--glass-border);
  border-bottom: 0;
  background: var(--sheet-bg);
  box-shadow: 0 -24px 60px -24px rgba(15, 12, 40, 0.5), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  animation: sheet-up 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sheet.closing .sheet-inner { animation: sheet-down 0.2s ease-in both; }
.sheet.closing::backdrop { animation: fade-out 0.2s ease-in both; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { from { transform: none; } to { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
.sheet-grab { width: 40px; height: 5px; margin: 10px auto 0; flex: none; border-radius: 3px; background: var(--track); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 20px 14px; }
.sheet-title { min-width: 0; }
.sheet-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-1); }
.sheet-head h2:focus { outline: none; }
.sheet-head h2 { margin-top: 4px; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 22px;
  border-top: 1px solid var(--hairline);
}

/* college detail (js/college-modal.js): KCET + ComedK sections */
.modal-exam-block + .modal-exam-block { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.modal-exam-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.modal-exam-badge { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--hairline); }
.modal-exam-block.kcet .modal-exam-badge { color: var(--kcet-ink); }
.modal-exam-block.comedk .modal-exam-badge { color: var(--comedk-ink); }
.modal-exam-sub { font-size: 12.5px; color: var(--ink-3); }
.modal-branch-list { display: grid; }
.modal-branch-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.modal-branch-row:first-child { border-top: 0; }
.modal-branch-name { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; overflow-wrap: anywhere; }
.modal-branch-rank { flex: none; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.modal-exam-block.kcet .modal-branch-rank { color: var(--kcet-ink); }
.modal-exam-block.comedk .modal-branch-rank { color: var(--comedk-ink); }
.modal-no-data { font-size: 13.5px; color: var(--ink-3); font-style: italic; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: 30px 4px 0; font-size: 12.5px; color: var(--ink-2); text-align: center; max-width: 52em; margin: 0 auto; }
.footer p + p { margin-top: 6px; }
.footer a { color: var(--ink-2); font-weight: 700; }
.nojs-note { margin: 16px; padding: 12px 14px; border-radius: 14px; background: var(--notice-bg); color: var(--ink); font-size: 14px; }

/* ==========================================================================
   Larger screens
   ========================================================================== */
@media (min-width: 560px) {
  .card { padding: 24px; }
  .stat-value { font-size: 26px; }
}
@media (min-width: 640px) {
  .sheet { width: min(600px, calc(100% - 48px)); margin: auto; }
  .sheet-inner { max-height: 84dvh; border-radius: 28px; border-bottom: 1px solid var(--glass-border); padding-bottom: 0; box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); animation-name: pop; }
  .sheet.closing .sheet-inner { animation-name: pop-out; }
  .sheet-grab { display: none; }
  .sheet-head { padding: 22px 24px 14px; }
  .sheet-body { padding: 16px 24px 24px; }
}
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* Desktop: glass sidebar instead of top bar + tab bar */
@media (min-width: 1000px) {
  :root { --sticky-top: 0px; }
  .topbar, .tabbar, .exam-seg { display: none; }
  .app-shell { display: flex; align-items: flex-start; min-height: 100vh; min-height: 100dvh; }
  .app-content { flex: 1; min-width: 0; }
  .layout { padding-top: 22px; padding-bottom: 56px; }
  .intro { padding: 12px 0 26px; }

  .sidebar {
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    flex: none;
    width: var(--sidebar-w);
    height: 100vh;
    height: 100dvh;
    border-width: 0 1px 0 0;
    border-radius: 0 26px 26px 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .sidebar-top { display: flex; align-items: center; gap: 8px; padding: 18px 14px 14px 18px; }
  .sidebar-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 44px; text-decoration: none; }
  .sidebar-brand-text { font-size: 16px; font-weight: 800; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; }
  .sidebar-collapse-btn {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--hairline);
    background: var(--chip-bg);
    color: var(--ink-3);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
  }
  .sidebar-collapse-btn:hover { color: var(--ink); border-color: var(--accent-1); }
  .sidebar-collapse-btn .i { width: 18px; height: 18px; transition: transform 0.25s; }

  .sidebar-nav { flex: 1; display: grid; align-content: start; gap: 2px; padding: 6px 12px; }
  .nav-group-btn, .nav-link-flat {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--ink-2);
    font-size: 14.5px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .nav-group-btn:hover, .nav-link-flat:hover { background: var(--chip-bg); color: var(--ink); }
  .nav-icon { display: grid; place-items: center; width: 22px; flex: none; }
  .nav-icon .i { width: 20px; height: 20px; }
  .nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-chevron { flex: none; display: grid; color: var(--ink-3); transition: transform 0.2s; }
  .nav-chevron .i { width: 16px; height: 16px; }
  .nav-group.open .nav-chevron { transform: rotate(90deg); }
  .nav-group-btn.active-group .nav-icon { color: var(--accent-1); }
  .nav-link-flat[aria-current="page"] { background: var(--seg-active); color: var(--ink); box-shadow: 0 2px 10px -4px rgba(15, 12, 40, 0.3); }
  .nav-link-flat[aria-current="page"] .nav-icon { color: var(--accent-1); }
  .nav-subitems { display: none; padding: 2px 0 6px 34px; }
  .nav-group.open .nav-subitems { display: grid; gap: 2px; }
  .nav-subitem {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--ink-3);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s, color 0.2s;
  }
  .nav-subitem:hover { background: var(--chip-bg); color: var(--ink); }
  .nav-subitem[aria-current="page"] { background: var(--seg-active); color: var(--ink); box-shadow: 0 2px 10px -4px rgba(15, 12, 40, 0.3); }

  .sidebar-bottom { display: grid; gap: 10px; padding: 12px 12px 18px; border-top: 1px solid var(--hairline); }
  .side-theme {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid var(--hairline);
    background: var(--chip-bg);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
  }
  .side-theme:hover { color: var(--ink); border-color: var(--accent-1); }
  .side-theme .i { width: 20px; height: 20px; }
  .sidebar-credit { font-size: 11.5px; color: var(--ink-3); text-align: center; }

  /* collapsed icon rail */
  .sidebar.collapsed { width: var(--sidebar-w-collapsed); }
  .sidebar.collapsed .sidebar-top { flex-direction: column; padding: 18px 10px 10px; }
  .sidebar.collapsed .sidebar-brand { flex: none; }
  .sidebar.collapsed .sidebar-collapse-btn .i { transform: rotate(180deg); }
  .sidebar.collapsed .sidebar-brand-text,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-chevron,
  .sidebar.collapsed .nav-subitems,
  .sidebar.collapsed .side-theme .nav-label,
  .sidebar.collapsed .sidebar-credit { display: none; }
  .sidebar.collapsed .sidebar-nav { padding: 6px 10px; }
  .sidebar.collapsed .nav-group-btn,
  .sidebar.collapsed .nav-link-flat,
  .sidebar.collapsed .side-theme { justify-content: center; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .blob, .pulse, .skeleton { animation: none; }
}
@media (forced-colors: active) {
  .glass, .rcard, .stat-tile, .chip, .round-tab, .exam-tab { border: 1px solid CanvasText; }
}