/* Layout: exercise-book page, graph-paper ground, subject rail on the left, doubts list, and an answer sheet that opens beside it */
:root {
  --paper: #f6f5fd;
  --sheet: #ffffff;
  --grid: #e9e6fa;
  --ink: #17233a;
  --muted: #5b6880;
  --line: #dcd8f0;
  --accent: #4f46e5;
  --accent-soft: #ebe9fe;
  --mark: #ffe46b;
  --mark-ink: #4a3d00;
  --ok: #17794a;
  --ok-soft: #dcf3e6;
  --danger: #b4232f;
  --g1: #4f46e5; --g2: #9333ea; --g3: #db2777; --g4: #f97316;
  --grad: linear-gradient(120deg, var(--g1), var(--g2) 38%, var(--g3) 70%, var(--g4));
  --shadow: 0 1px 2px rgb(30 27 75 / .06), 0 8px 24px -8px rgb(79 70 229 / .25);
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b0d1c; --sheet: #151830; --grid: #14172c; --ink: #e6ecf7; --muted: #9aa8c1;
    --line: #2c2f52; --accent: #a5a1ff; --accent-soft: #272a55; --mark: #e8c93a; --mark-ink: #2b2300;
    --ok: #5fd39a; --ok-soft: #173a2a; --danger: #ff7b85; color-scheme: dark;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -10px rgb(168 85 247 / .45);
  }
}
:root[data-theme="dark"] {
  --paper: #0b0d1c; --sheet: #151830; --grid: #14172c; --ink: #e6ecf7; --muted: #9aa8c1;
  --line: #2c2f52; --accent: #a5a1ff; --accent-soft: #272a55; --mark: #e8c93a; --mark-ink: #2b2300;
  --ok: #5fd39a; --ok-soft: #173a2a; --danger: #ff7b85; color-scheme: dark;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -10px rgb(168 85 247 / .45);
}
/* Per-subject hue: --c is the subject's colour; -ink and -soft derive from it so they read in both themes */
[data-s] { --c: var(--accent); --c-ink: color-mix(in oklab, var(--c) 72%, var(--ink)); --c-soft: color-mix(in oklab, var(--c) 16%, var(--sheet)); }
* { box-sizing: border-box; }
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(60rem 30rem at 100% -10%, color-mix(in oklab, var(--g3) 14%, transparent), transparent 70%),
    radial-gradient(50rem 30rem at -10% 10%, color-mix(in oklab, var(--g1) 16%, transparent), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px;
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.55 var(--f-body);
  padding: 0 16px;
  padding-block: 28px 48px;
}
.wrap { max-width: 1180px; margin: 0 auto; display: grid; gap: 24px; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

header.top {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad); color: #fff; border-radius: 18px; padding: 28px clamp(18px, 4vw, 36px);
  box-shadow: 0 18px 40px -18px color-mix(in oklab, var(--g2) 70%, transparent);
}
header.top::before, header.top::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(30px); }
header.top::before { width: 260px; height: 260px; right: -60px; top: -120px; background: rgb(255 255 255 / .28); }
header.top::after { width: 220px; height: 220px; left: 30%; bottom: -150px; background: color-mix(in oklab, var(--g4) 70%, #fde047); opacity: .55; }
.brand h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.brand h1 span { background: linear-gradient(90deg, #fef08a, #fdba74); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand p { margin: 10px 0 0; color: rgb(255 255 255 / .88); max-width: 52ch; }
header.top .btn.primary { background: #fff; color: var(--g2); border-color: #fff; box-shadow: 0 6px 18px -6px rgb(0 0 0 / .35); }
.btn {
  border: 1px solid var(--line); background: var(--sheet); border-radius: 8px;
  padding: 8px 14px; font-weight: 700;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -8px var(--g2); }
.btn.primary:hover { filter: brightness(1.08) saturate(1.1); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.notice { background: var(--sheet); border: 1px dashed var(--line); border-radius: 10px; padding: 12px 16px; color: var(--muted); }

.layout { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .layout { grid-template-columns: minmax(0, 1fr); } }

.rail { display: grid; gap: 4px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); }
.rail .label { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px 10px; }
.rail button {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 7px 10px;
}
.rail button:hover { background: var(--accent-soft); }
.rail button > span:first-child { display: flex; align-items: center; gap: 8px; }
.rail button > span:first-child::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--c-soft); }
.rail button[data-all] > span:first-child::before { background: var(--grad); }
.rail button:hover { background: var(--c-soft); }
.rail button[aria-pressed="true"] { background: var(--c); color: #fff; font-weight: 700; box-shadow: 0 6px 16px -8px var(--c); }
.rail button[data-all][aria-pressed="true"] { background: var(--grad); }
.rail button[aria-pressed="true"] > span:first-child::before { background: #fff; box-shadow: none; }
.rail .railedit { color: var(--accent); font-weight: 700; margin-top: 6px; }
.rail .railedit > span:first-child::before { display: none; }
.subjrows { display: grid; gap: 8px; }
.subjrow { display: flex; align-items: center; gap: 10px; }
.subjrow input { flex: 1; min-width: 0; }
.subjrow .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.rail .n { font: 500 12px var(--f-mono); font-variant-numeric: tabular-nums; opacity: .75; }
@media (max-width: 1100px) {
  .rail { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .rail .label { width: 100%; margin-left: 0; }
  .rail button { border: 1px solid var(--line); background: var(--sheet); }
}

.listcol { display: grid; gap: 12px; min-width: 0; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tools input { flex: 1 1 180px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); }
.tools select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); }
.list { display: grid; gap: 8px; }
.item-wrap { position: relative; }
.item-del {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: color-mix(in oklab, #ef4444 12%, var(--sheet));
  color: #ef4444; font-size: .85rem; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  transition: background .15s;
}
.item-wrap:hover .item-del, .item-wrap:focus-within .item-del { display: flex; }
.item-del:hover { background: color-mix(in oklab, #ef4444 25%, var(--sheet)); }
.item {
  display: grid; gap: 6px; text-align: left; width: 100%;
  background: linear-gradient(90deg, var(--c-soft), var(--sheet) 45%); border: 1px solid var(--line);
  border-left: 4px solid var(--c); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow);
}
.item:hover { border-color: var(--c); transform: translateY(-1px); }
.item[aria-current="true"] { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), var(--shadow); }
.item h3 { font-family: var(--f-body); font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--muted); }
.tag { font: 500 11px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--c-soft); color: var(--c-ink); border: 1px solid color-mix(in oklab, var(--c) 35%, transparent); }
.pill { font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; }
.pill.open { background: linear-gradient(90deg, #fde047, #fb923c); color: #431407; }
.pill.done { background: linear-gradient(90deg, #34d399, #22d3ee); color: #052e2b; }
.empty { background: var(--sheet); border: 1px dashed var(--line); border-radius: 10px; padding: 28px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-family: var(--f-display); font-size: 1.15rem; margin-bottom: 4px; }

.sheet {
  background: var(--sheet); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  border-top: 6px solid transparent; border-image: none;
  background-image: linear-gradient(var(--sheet), var(--sheet)), linear-gradient(90deg, var(--c), color-mix(in oklab, var(--c) 40%, var(--g3)));
  background-origin: border-box; background-clip: padding-box, border-box;
  padding: 20px 22px; display: grid; gap: 16px; min-width: 0;
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px);
  max-height: calc(100vh - 24px); overflow: auto;
}
@media (max-width: 1100px) { .sheet { position: static; max-height: none; } }
.sheet h2 { font-size: 1.5rem; font-weight: 800; overflow-wrap: anywhere; }
.body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.rowbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.answers { display: grid; gap: 10px; }
.answers .label, .form .label { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ans { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; display: grid; gap: 4px; }
.ans { border-left-color: color-mix(in oklab, var(--c) 45%, var(--line)); }
.ans.best { border-left-color: var(--ok); background: linear-gradient(90deg, var(--ok-soft), transparent); border-radius: 0 8px 8px 0; }
.ans .who { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font-size: 13px; font-weight: 700; }
.linkbtn.danger { color: var(--danger); }

.form { display: grid; gap: 10px; }
.form label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-weight: 400;
}
.form textarea { min-height: 110px; resize: vertical; }
.form .two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 520px) { .form .two { grid-template-columns: minmax(0, 1fr); } }
.err { color: var(--danger); font-size: 14px; margin: 0; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }
@media (prefers-reduced-motion: no-preference) { .item, .btn, .rail button { transition: border-color .15s, filter .15s, transform .15s, background-color .15s; } }

/* Tabs inside the banner */
.tabs { display: inline-flex; gap: 4px; margin-top: 18px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .18); }
.tabs button { border: 0; background: transparent; color: #fff; font-weight: 700; padding: 7px 18px; border-radius: 999px; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--g2); box-shadow: 0 4px 12px -4px rgb(0 0 0 / .3); }
.hdr-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { border: 1px solid rgb(255 255 255 / .5); background: rgb(255 255 255 / .14); color: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 700; }

/* ── Mobile: full-width compact header, everything fits on screen ── */
@media (max-width: 700px) {
  body { padding: 0 8px; padding-block: 10px 70px; }
  .wrap { gap: 12px; }

  header.top {
    padding: 12px 12px 10px;
    gap: 6px;
    border-radius: 14px;
    /* clip decorative blobs without hiding child content */
    overflow: hidden;
  }

  /* brand takes full width */
  .brand { width: 100%; min-width: 0; }
  .brand h1 { font-size: 1.45rem; line-height: 1.1; }
  .brand p  { font-size: 11.5px; margin-top: 2px; }

  /* tabs: 3-column grid so every tab (Market, GATE...) is visible without scrolling */
  .tabs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    margin-top: 8px; gap: 6px; padding: 0; background: transparent;
    width: 100%; border-radius: 0;
  }
  .tabs button { padding: 8px 6px; font-size: 12.5px; white-space: nowrap; background: rgb(255 255 255 / .16); }
  .tabs button[aria-selected="true"] { background: #fff; }

  /* action buttons: tidy 3-column tile grid (same width as the tabs above) */
  .hdr-actions {
    width: 100%;
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 6px; margin-left: 0;
  }
  .hdr-actions .chip.tool {
    grid-column: span 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 8px 4px; border-radius: 14px; font-size: 11px; line-height: 1.2; text-align: center;
  }
  .hdr-actions .chip.tool .ci { font-size: 19px; line-height: 1; }
  #nameBtn { grid-column: span 4; padding: 8px 10px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  header.top .btn.primary#askBtn { grid-column: span 2; padding: 8px 6px; font-size: 12px; white-space: nowrap; border-radius: 999px; }
  #themeBtn { position: absolute; top: 12px; right: 12px; padding: 5px 9px; font-size: 14px; border-radius: 999px; }

  /* campus + batch filters collapse behind a Filters button on phones */
  .hdr-actions .filter-toggle {
    display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between;
    padding: 8px 14px; border-radius: 14px; font-size: 12px; font-weight: 700;
  }
  .hdr-actions .filter-toggle.on { background: rgb(255 255 255 / .28); border-color: #fff; }
  header.top:not(.filters-open) #campusBar,
  header.top:not(.filters-open) #yearBar { display: none !important; }

  /* campus / year bars inside header */
  .campus-bar { width: 100%; }
}
.like { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--sheet); border-radius: 999px; padding: 4px 12px; font-weight: 700; color: var(--muted); }
.like[aria-pressed="true"] { border-color: transparent; background: linear-gradient(90deg, #f43f5e, #f97316); color: #fff; }
.likes { font: 500 12px var(--f-mono); color: #e11d48; }
.demo { background: linear-gradient(90deg, #fef9c3, #ffedd5); color: #713f12; border: 0; }

/* Notebook pages: attach buttons, thumbnails, full-screen viewer and handwriting pad */
.btn.sm { padding: 6px 12px; font-size: 14px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.btn.sm[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.sm.primary { color: #fff; }
.btn.wa { background: #1fa855; border-color: #1fa855; color: #fff; }
.attach { display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; background: var(--c-soft, var(--accent-soft)); }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.thumbs:empty { display: none; }
.thumb { position: relative; width: 104px; height: 136px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.thumb { cursor: zoom-in; }
.thumb .x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .65); color: #fff; font-size: 16px; line-height: 1; }
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; gap: 8px; background: rgb(10 12 28 / .92); padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px calc(env(safe-area-inset-bottom, 0px) + 10px); }
.ovbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; color: #fff; }
.ovcap { margin-right: auto; font-size: 14px; color: #dfe3ff; }
.ovbar .hint { margin-right: auto; color: #ffd7a8; }
.ovbody { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; }
.ovbody img { max-width: 100%; max-height: 100%; cursor: zoom-in; border-radius: 6px; background: #fff; }
.ovbody img.zoom { max-width: none; max-height: none; width: 180%; cursor: zoom-out; }
.nbbar { justify-content: flex-start; }
.nbgroup { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .1); }
.overlay .btn.sm:not(.primary):not([aria-pressed="true"]) { background: rgb(255 255 255 / .92); color: #1b1b2f; border-color: transparent; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; background: var(--sw); }
.swatch[aria-pressed="true"] { outline: 3px solid #fde047; outline-offset: 1px; }
.nbpage { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: start center; }
.nbsheet { position: relative; width: min(100%, calc((100dvh - 190px) * 1000 / 1400)); min-width: 260px; aspect-ratio: 1000 / 1400; box-shadow: 0 10px 40px rgb(0 0 0 / .5); border-radius: 4px; overflow: hidden; }
.nbsheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nb-ink { touch-action: none; cursor: crosshair; }
html.nb-open, html.nb-open body { overflow: hidden; }

/* Student features: urgent pill, doubt of the day, leaderboard, exam countdown, checkboxes */
.pill.urgent { background: linear-gradient(90deg, #ef4444, #f97316); color: #fff; }
.spot { display: grid; gap: 4px; text-align: left; width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; color: #fff; background: var(--grad); box-shadow: 0 10px 24px -12px var(--g2); }
.spot strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.spot-k { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.spot-why { font-size: 14px; opacity: .92; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.board li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.board li.me { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.board .rank { font-size: 22px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.board .who { display: grid; min-width: 0; }
.board .who strong { overflow-wrap: anywhere; }
.board .who small { color: var(--muted); font-size: 12px; }
.board .pts { font: 500 14px var(--f-mono); color: var(--accent); white-space: nowrap; }
.exams { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.exam { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .2); color: #fff; }
.exam.soon { background: #fde047; color: #422006; }
.checks { display: grid; gap: 6px; }
.check { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; font-size: 14px; }
.form .check input { width: auto; }

/* Daily quiz, reactions, profile, badges, confetti */
.chip.dot { position: relative; }
.chip.dot::after { content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fde047; box-shadow: 0 0 0 2px var(--g2); }
.quiz-opts { display: grid; gap: 8px; }
.quiz-opt { position: relative; overflow: hidden; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 15px; }
button.quiz-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.quiz-opt b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; }
.quiz-opt.done::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: color-mix(in oklab, var(--accent) 14%, transparent); z-index: 0; }
.quiz-opt.done > * { position: relative; z-index: 1; }
.quiz-opt.right { border-color: var(--ok); }
.quiz-opt.right b { background: var(--ok); color: #fff; }
.quiz-opt.wrong { border-color: var(--danger); }
.quiz-opt.wrong b { background: var(--danger); color: #fff; }
.quiz-opt .pct { font: 500 13px var(--f-mono); color: var(--muted); }
.quiz-result { margin: 0; font-weight: 700; font-size: 1.05rem; }
.quiz-result.right { color: var(--ok); }
.quiz-result.wrong { color: var(--danger); }
.quiz-y summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.reacts { display: flex; gap: 6px; flex-wrap: wrap; }
.react { border: 1px solid var(--line); background: var(--sheet); border-radius: 999px; padding: 2px 10px; font-size: 14px; color: var(--muted); }
.react[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.xp { height: 12px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.xp span { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { display: grid; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); text-align: center; }
.stat small, .badge small { color: var(--muted); font-size: 12px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.badge { display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; opacity: .45; filter: grayscale(1); }
.badge.got { opacity: 1; filter: none; border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.bicon { font-size: 26px; }
.confetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* CSE subject colours */
[data-s="DS & A"] { --c: #f59e0b; }
[data-s="OS"] { --c: #8b5cf6; }
[data-s="DBMS"] { --c: #06b6d4; }
[data-s="OOP"] { --c: #ec4899; }
[data-s="TOC"] { --c: #84cc16; }
[data-s="CD"] { --c: #f97316; }
[data-s="SE"] { --c: #14b8a6; }
[data-s="Python"] { --c: #3b82f6; }
[data-s="Maths"] { --c: #a855f7; }
/* Civil */
[data-s="SOM"] { --c: #b45309; }
[data-s="FM"] { --c: #0369a1; }
[data-s="Struct"] { --c: #6b7280; }
[data-s="Geo"] { --c: #92400e; }
[data-s="Trans"] { --c: #1d4ed8; }
[data-s="Env"] { --c: #15803d; }
[data-s="Survey"] { --c: #0f766e; }
/* Mech */
[data-s="Thermo"] { --c: #dc2626; }
[data-s="FM-M"] { --c: #2563eb; }
[data-s="MD"] { --c: #7c3aed; }
[data-s="MOM"] { --c: #c2410c; }
[data-s="Mfg"] { --c: #4b5563; }
[data-s="HT"] { --c: #ea580c; }
[data-s="IC Eng"] { --c: #9f1239; }
/* EEE */
[data-s="Circuits"] { --c: #ca8a04; }
[data-s="EM"] { --c: #4338ca; }
[data-s="PS"] { --c: #0e7490; }
[data-s="PE"] { --c: #be185d; }
[data-s="Control"] { --c: #166534; }
[data-s="EMS"] { --c: #5b21b6; }
[data-s="PQ"] { --c: #b91c1c; }
/* Learn from IIT, expert help, mentors */
.expert { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line)); background: color-mix(in oklab, var(--accent) 7%, var(--sheet)); }
.learn { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.learn-card { display: grid; gap: 6px; align-content: start; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 12px; background: var(--paper); }
.learn-card strong { font-size: 14px; }
.learn-card .rowbtns { gap: 10px; }
.pill.mentor { background: linear-gradient(90deg, #0ea5e9, #6366f1); color: #fff; }
.ans.mentor { border-left-color: #0ea5e9; background: linear-gradient(90deg, color-mix(in oklab, #0ea5e9 10%, transparent), transparent); border-radius: 0 8px 8px 0; }
.devid { font: 500 12px var(--f-mono); padding: 4px 8px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); overflow-wrap: anywhere; }
a.linkbtn { text-decoration: none; }

/* Rotating captions */
#tagline { min-height: 3.1em; transition: opacity .35s ease, transform .35s ease; }
#tagline.swap { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { #tagline { transition: none; } }

/* ============================================================
   Avatars
   ============================================================ */
.av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; font-size: 16px; line-height: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    rgba(255,255,255,.88) 0%, rgba(255,255,255,.3) 22%,
    color-mix(in oklab, var(--accent) 80%, transparent) 55%,
    color-mix(in oklab, var(--accent) 95%, #1a0030) 100%);
  border: 1.5px solid color-mix(in oklab, var(--accent) 40%, transparent);
  box-shadow: inset 0 -3px 5px rgba(0,0,0,.18), inset 0 3px 4px rgba(255,255,255,.55),
              0 3px 10px rgba(0,0,0,.18);
  flex-shrink: 0; vertical-align: middle; margin-right: 4px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.av:hover { transform: scale(1.22) rotate(-6deg); box-shadow: inset 0 -3px 5px rgba(0,0,0,.18), inset 0 3px 4px rgba(255,255,255,.55), 0 6px 18px rgba(0,0,0,.25); }
/* Portrait image avatars */
.av.av-img { background: none; box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 0 0 2px color-mix(in oklab,var(--accent) 35%,transparent); overflow: hidden; padding: 0; }
.av.av-img img, img.av-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* When the <img> itself carries .av, lock it to the avatar size so it can't grow to 100% of its container */
img.av { width: 28px !important; height: 28px !important; flex-shrink: 0; object-fit: cover; border-radius: 50%; display: inline-block; vertical-align: middle; }
img.av.av-lg { width: 48px !important; height: 48px !important; }
img.av.av-hero { width: 72px !important; height: 72px !important; }
img.av-img { display: inline-block; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 0 0 2px color-mix(in oklab,var(--accent) 35%,transparent); flex-shrink: 0; vertical-align: middle; margin-right: 4px; transition: transform .2s ease; }
img.av-img:hover { transform: scale(1.22); }
.av-lg, img.av-lg { width: 34px; height: 34px; font-size: 20px; }
.av-nb, img.av-nb { width: 22px; height: 22px; font-size: 13px; margin-right: 3px; }
.bnav-av, img.bnav-av { width: 24px; height: 24px; font-size: 15px; margin: 0 auto 2px; display: block; }
.av-hero {
  width: 76px; height: 76px; font-size: 44px; border-width: 3px;
  box-shadow: inset 0 -5px 8px rgba(0,0,0,.2), inset 0 5px 6px rgba(255,255,255,.6),
              0 0 0 6px color-mix(in oklab, var(--accent) 18%, transparent),
              0 6px 28px color-mix(in oklab, var(--accent) 35%, transparent);
  animation: heroFloat 3s ease-in-out infinite;
}
img.av-hero { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid color-mix(in oklab,var(--accent) 40%,transparent); box-shadow: 0 0 0 6px color-mix(in oklab,var(--accent) 18%,transparent), 0 6px 28px color-mix(in oklab,var(--accent) 35%,transparent); animation: heroFloat 3s ease-in-out infinite; flex-shrink: 0; }
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.profile-hero {
  display: flex; align-items: center; gap: 16px; margin-bottom: 8px;
}
.profile-hero h2 { margin: 0; }
.author-row { display: inline-flex; align-items: center; gap: 2px; }

/* Avatar picker */
.avatar-picker {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 12px;
}
.av-opt {
  width: 40px; height: 40px; font-size: 22px; border-radius: 12px;
  border: 2px solid transparent; background: none; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s;
  display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden;
}
.av-opt:hover { transform: scale(1.2) rotate(-4deg); background: color-mix(in oklab, var(--accent) 12%, var(--paper)); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.av-opt.selected {
  border-color: var(--accent); background: color-mix(in oklab, var(--accent) 18%, var(--paper));
  transform: scale(1.12);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent), 0 4px 14px rgba(0,0,0,.18);
}
.av-opt-img { border-radius: 50%; }
.av-opt-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* ============================================================
   Floating particles canvas
   ============================================================ */
#particles {
  position: fixed; top: 0; left: 0; width: 100%; pointer-events: none;
  z-index: 0; opacity: .6;
}
.wrap { position: relative; z-index: 1; }

/* ============================================================
   Card entrance animation
   ============================================================ */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.item, .ans, .learn-card, .badge {
  animation: slideUp .3s ease both;
}
.item:nth-child(1)  { animation-delay: .03s; }
.item:nth-child(2)  { animation-delay: .06s; }
.item:nth-child(3)  { animation-delay: .09s; }
.item:nth-child(4)  { animation-delay: .12s; }
.item:nth-child(5)  { animation-delay: .15s; }
.item:nth-child(n+6){ animation-delay: .18s; }

/* ============================================================
   3D tilt, smooth transition when not being dragged
   ============================================================ */
.item, .spot, .learn-card, .badge.got {
  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform;
}
.item:hover, .spot:hover { box-shadow: 0 8px 32px color-mix(in oklab, var(--accent) 22%, transparent); }
.learn-card:hover { box-shadow: 0 6px 24px color-mix(in oklab, var(--c) 30%, transparent); }

/* ============================================================
   Ripple effect on buttons
   ============================================================ */
button.btn, button.chip { overflow: hidden; position: relative; }
.ripple {
  position: absolute; border-radius: 50%;
  width: 6px; height: 6px; margin: -3px;
  background: color-mix(in oklab, currentColor 30%, transparent);
  transform: scale(0); animation: ripple .55s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(60); opacity: 0; }
}

/* ============================================================
   Subject rail pill pulse on new post
   ============================================================ */
@keyframes pillPop {
  0%  { transform: scale(1); }
  40% { transform: scale(1.18); }
  100%{ transform: scale(1); }
}
.rail button:focus-visible, .rail button[aria-pressed="true"] {
  animation: pillPop .25s ease;
}

/* ============================================================
   h1 glow pulse
   ============================================================ */
h1 span {
  animation: glowPulse 3.5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 8px color-mix(in oklab, var(--accent) 40%, transparent); }
  50%       { text-shadow: 0 0 24px color-mix(in oklab, var(--accent) 70%, transparent), 0 0 40px color-mix(in oklab, var(--accent) 30%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .item, .ans, .learn-card, .badge { animation: none; }
  .av-hero { animation: none; }
  .ripple { animation: none; }
  h1 span { animation: none; }
}

/* ============================================================
   Network panel
   ============================================================ */
.network-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
  margin: 12px 0;
}
.network-card {
  background: var(--ncbg, #f3f4f6); border: 2px solid var(--ncbr, #d1d5db);
  border-radius: 16px; padding: 14px; display: grid; gap: 8px;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: slideUp .3s ease both;
}
.network-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.network-card-name { font-size: 14px; font-weight: 700; color: var(--ncfg, #374151); }
.network-card-stats { display: flex; gap: 10px; font-size: 12px; color: var(--ncfg, #374151); opacity: .8; flex-wrap: wrap; }
.network-features { padding-left: 18px; display: grid; gap: 6px; margin: 6px 0 12px; font-size: 14px; }
.network-features li { line-height: 1.5; }

/* Leaderboard campus badge row */
.board-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ============================================================
   Trending subjects bar
   ============================================================ */
.trend-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 16px;
  overflow-x: auto; scrollbar-width: none; background: var(--paper);
  border-bottom: 1px solid var(--line); font-size: 13px;
  animation: slideUp .2s ease both;
}
.trend-bar::-webkit-scrollbar { display: none; }
.trend-label { font-weight: 700; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.trend-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--sheet);
  cursor: pointer; white-space: nowrap; font-size: 12px; font-weight: 600;
  transition: transform .15s ease;
}
.trend-chip:hover { transform: translateY(-2px); }
.trend-chip [data-s] { padding: 1px 6px; border-radius: 8px; font-size: 11px; background: var(--c-soft); color: var(--c-ink); }
.trend-n { color: #ef4444; font-weight: 800; }

/* ============================================================
   Activity heatmap
   ============================================================ */
.heatmap {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; padding: 8px;
  background: var(--paper); border-radius: 10px; border: 1px solid var(--line);
}
.heat-cell {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--line); transition: transform .15s ease;
}
.heat-cell.hot {
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #f59e0b));
  box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 40%, transparent);
  animation: heatPop .3s ease;
}
.heat-cell:hover { transform: scale(1.4); }
@keyframes heatPop { from { transform: scale(0); } to { transform: scale(1); } }

/* ============================================================
   Campus Rivalry
   ============================================================ */
.rival-board { display: grid; gap: 8px; margin: 8px 0 4px; }
.rival-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  animation: slideUp .3s ease both;
}
.rival-rank { font-size: 18px; width: 24px; flex-shrink: 0; text-align: center; }
.rival-name { width: 100px; font-weight: 700; flex-shrink: 0; }
.rival-bar-wrap { flex: 1; height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; }
.rival-bar { height: 100%; border-radius: 6px; transition: width .6s cubic-bezier(.22,1,.36,1); min-width: 4px; }
.rival-score { font-weight: 800; color: var(--accent); width: 48px; text-align: right; flex-shrink: 0; }
.rival-sub { font-size: 11px; color: var(--muted); flex-shrink: 0; white-space: nowrap; }

/* ============================================================
   Smart subject detect hint
   ============================================================ */
#f-group { transition: box-shadow .25s ease; }
#f-group:focus, #f-group[data-detected="true"] { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 40%, transparent); }

/* ============================================================
   Theme toggle button sizing
   ============================================================ */
#themeBtn { font-size: 18px; padding: 4px 10px; min-width: 38px; }

@media (prefers-reduced-motion: reduce) {
  .heat-cell.hot { animation: none; }
  .rival-bar { transition: none; }
}

/* ============================================================
   Class-code gate, centred in the list column
   ============================================================ */
.gate-card {
  max-width: 400px; margin: 48px auto; padding: 32px 28px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 4px 24px color-mix(in oklab, var(--accent) 12%, transparent);
  animation: slideUp .3s ease both;
}
.gate-card h2 { margin: 0 0 20px; font-size: 1.3rem; }

/* ============================================================
   Offline bar
   ============================================================ */
.offline-bar { display: none; }
.offline-bar:not([hidden]) {
  display: block;
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 10px 20px; text-align: center; font-size: .85rem; font-weight: 700;
  background: var(--danger); color: #fff;
  animation: slideDown .3s ease;
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ============================================================
   PWA install banner
   ============================================================ */
.install-banner { display: none; }
.install-banner:not([hidden]) {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  position: fixed; bottom: 80px; left: 12px; right: 12px; z-index: 50;
  background: var(--sheet); border: 1px solid var(--accent); border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 6px 32px color-mix(in oklab, var(--accent) 30%, transparent);
  animation: slideUp .35s ease both;
}
@media (min-width: 600px) { .install-banner { max-width: 420px; left: auto; right: 20px; bottom: 20px; } }
.install-text { flex: 1; font-size: .9rem; font-weight: 600; color: var(--ink); min-width: 0; }
.install-close { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 16px; padding: 4px 8px; border-radius: 8px; }
.install-close:hover { background: var(--accent-soft); color: var(--accent); }

/* ============================================================
   New-posts toast
   ============================================================ */
.new-toast { display: none; }
.new-toast:not([hidden]) {
  display: block;
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--accent); color: #fff;
  padding: 10px 20px; border-radius: 24px; font-weight: 700; font-size: .9rem;
  cursor: pointer; box-shadow: 0 4px 20px color-mix(in oklab, var(--accent) 50%, transparent);
  animation: popIn .3s cubic-bezier(.34,1.56,.64,1) both;
  white-space: nowrap;
}
@keyframes popIn { from { opacity:0; transform: translateX(-50%) scale(.8); } to { opacity:1; transform: translateX(-50%) scale(1); } }

/* ============================================================
   Floating action button (mobile only)
   ============================================================ */
.fab {
  display: none;
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); left: 18px; z-index: 30;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--grad); border: none; cursor: pointer;
  color: #fff; font-size: 26px; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 24px color-mix(in oklab, var(--g2) 55%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.fab:hover { transform: scale(1.08); }
.fab:active { transform: scale(.95); }
@media (max-width: 900px) { .fab { display: flex; align-items: center; justify-content: center; } }

/* ============================================================
   Bottom navigation (mobile only)
   ============================================================ */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 25;
  flex-direction: row;
  background: var(--sheet);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 20px color-mix(in oklab, var(--ink) 8%, transparent);
}
@media (max-width: 900px) {
  .bottom-nav { display: flex; }
  /* Push content above bottom nav */
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); }
}
.bnav-btn {
  flex: 1; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 4px 6px; gap: 2px; color: var(--muted); position: relative;
  transition: color .15s ease;
  font-family: var(--f-body); font-size: .68rem;
  min-height: 56px;
}
.bnav-btn.active { color: var(--accent); }
.bnav-btn:active { opacity: .7; }
.bnav-icon { font-size: 22px; line-height: 1; }
.bnav-label { font-weight: 600; font-size: .65rem; line-height: 1; }
.bnav-count {
  position: absolute; top: 6px; right: calc(50% - 18px);
  background: var(--g3); color: #fff; font-size: .6rem; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.bnav-pulse .bnav-icon { animation: blink 1.5s ease infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* ============================================================
   Intro stats panel
   ============================================================ */
.intro-stats {
  display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px;
}
.intro-stat {
  flex: 1; min-width: 72px; padding: 12px 14px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.intro-stat.ok  { background: var(--ok-soft); border-color: color-mix(in oklab, var(--ok) 30%, transparent); }
.intro-stat.warn { background: color-mix(in oklab, #f59e0b 12%, var(--sheet)); border-color: color-mix(in oklab, #f59e0b 35%, transparent); }
.intro-stat-n { font: 700 1.5rem/1 var(--f-display); color: var(--accent); }
.intro-stat.ok .intro-stat-n  { color: var(--ok); }
.intro-stat.warn .intro-stat-n { color: #92400e; }
:root[data-theme="dark"] .intro-stat.warn .intro-stat-n { color: #fcd34d; }
.intro-stat-l { font-size: .75rem; color: var(--muted); font-weight: 600; }

/* keyboard shortcut hint */
.kb-hint { font-size: .78rem; color: var(--muted); margin-top: 8px; }

/* ============================================================
   Department tabs + compact subject grid (v36)
   ============================================================ */
.dept-banner {
  border-radius: 16px; padding: 16px 18px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.22);
  color: #fff;
}
.dept-banner-art { font-size: 26px; letter-spacing: 2px; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.dept-banner-info { display: flex; flex-direction: column; gap: 2px; }
.dept-banner-name { font-size: 15px; font-weight: 800; line-height: 1.2; }
.dept-banner-sub { font-size: 11px; opacity: .88; font-weight: 500; }

.dept-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 0 8px;
  border-bottom: 1px solid var(--line); margin-bottom: 8px;
  width: 100%; align-self: flex-start;
}
.dept-tab {
  padding: 3px 10px; border-radius: 14px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--line); background: var(--paper); color: var(--muted);
  cursor: pointer; transition: background .15s, color .15s;
}
.dept-tab.active, .dept-tab:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.subj-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
}
.subj-chip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; border-radius: 10px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  cursor: pointer; transition: background .15s, box-shadow .15s; text-align: left;
}
.subj-chip.active { background: var(--c-soft, var(--accent-soft)); color: var(--c-ink, var(--accent)); border-color: var(--c, var(--accent)); box-shadow: 0 0 0 1px var(--c, var(--accent)); }
.subj-chip:hover:not(.active) { background: var(--accent-soft); }
.subj-chip .n { font-size: 11px; color: var(--muted); margin-left: 4px; flex-shrink: 0; }

/* ============================================================
   Campus bar + chips (v36)
   ============================================================ */
.campus-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 0 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.campus-bar:not([hidden]) { display: flex; }
.filter-toggle { display: none; }
.campus-label { font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.campus-chip {
  padding: 3px 12px; border-radius: 16px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  cursor: pointer; transition: background .15s, color .15s;
}
.campus-chip.active { background: var(--cc, var(--accent)); color: #fff; border-color: var(--cc, var(--accent)); }
.campus-chip.my { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.campus-chip:hover:not(.active) { background: var(--accent-soft); color: var(--accent); }

.campus-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 800;
  background: color-mix(in oklab, var(--cc, var(--accent)) 18%, var(--sheet));
  color: var(--cc, var(--accent)); border: 1px solid color-mix(in oklab, var(--cc, var(--accent)) 35%, transparent);
  letter-spacing: .03em;
}

/* ============================================================
   Bounty pill (v36)
   ============================================================ */
.pill.bounty { background: linear-gradient(90deg, #f59e0b, #ef4444); color: #fff; }

/* ============================================================
   Trending inline (v36)
   ============================================================ */
.trending-inline {
  font-size: 12px; font-weight: 700; color: var(--accent);
  padding: 4px 0 2px; letter-spacing: .02em;
}
.trending-inline:not([hidden]) { display: block; }

/* ============================================================
   Campus picker screen (v36)
   ============================================================ */
.campus-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; margin: 16px 0;
}
.campus-pick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 12px; border-radius: 18px; border: 2px solid var(--cc, var(--accent));
  background: color-mix(in oklab, var(--cc, var(--accent)) 10%, var(--sheet));
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  font-family: var(--f-body);
}
.campus-pick-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px color-mix(in oklab, var(--cc, var(--accent)) 35%, transparent); }
.campus-pick-icon { font-size: 28px; line-height: 1; }
.campus-pick-name { font: 800 1.1rem/1 var(--f-display); color: var(--cc, var(--accent)); }
.campus-pick-sub { font-size: 11px; color: var(--muted); }

/* ============================================================
   Study Tools panel (v38)
   ============================================================ */
.resource-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 16px;
}
.resource-tab {
  padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--sheet); color: var(--text); font: 700 .8rem var(--f-body);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.resource-tab.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* Formula cards */
.formula-subj-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.formula-subj-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--sheet);
  cursor: pointer; font: 700 .9rem var(--f-body); color: var(--text);
  transition: background .15s;
}
.formula-subj-btn:hover { background: var(--shade); }
.formula-count { margin-left: auto; font-size: .75rem; color: var(--muted); font-weight: 400; }
.formula-arrow { font-size: .7rem; color: var(--muted); }
.formula-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px; padding: 10px 6px 6px;
}
.formula-card {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
}
.formula-name { font-size: .85rem; color: var(--accent); }
.formula-body {
  font: 500 .78rem/1.55 var(--f-code);
  background: var(--shade); border-radius: 8px;
  padding: 8px 10px; margin: 0; white-space: pre-wrap; word-break: break-word;
  color: var(--text);
}

/* Placement grid */
.placement-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; margin-top: 8px;
}
.placement-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px; border-radius: 16px;
  border: 1.5px solid var(--border); background: var(--sheet);
  text-decoration: none; color: var(--text); text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.placement-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.placement-icon { font-size: 26px; line-height: 1; }
.placement-card strong { font-size: .82rem; line-height: 1.25; }
.placement-card small { font-size: .72rem; color: var(--muted); }

/* Study planner */
.plan-item {
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  border-left: 4px solid currentColor;
}
.plan-urgent { background: #fef2f2; color: #b91c1c; border-color: #ef4444; }
.plan-warn   { background: #fffbeb; color: #92400e; border-color: #f59e0b; }
.plan-ok     { background: #f0fdf4; color: #166534; border-color: #22c55e; }
@media (prefers-color-scheme: dark) {
  .plan-urgent { background: #3b0000; } .plan-warn { background: #2d1a00; } .plan-ok { background: #002d0d; }
}
:root[data-theme="dark"] .plan-urgent { background: #3b0000; }
:root[data-theme="dark"] .plan-warn   { background: #2d1a00; }
:root[data-theme="dark"] .plan-ok     { background: #002d0d; }
.plan-name  { font: 800 .95rem/1 var(--f-display); margin-bottom: 2px; }
.plan-days  { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.plan-tip   { font-size: .78rem; margin-top: 4px; opacity: .85; }
.study-tips { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.study-tip {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px;
  background: var(--sheet); border: 1.5px solid var(--border);
}
.tip-icon { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.study-tip p { margin: 2px 0 0; }

/* ============================================================
   GATE MCQ cards (v39)
   ============================================================ */
.mcq-list { display: flex; flex-direction: column; gap: 12px; padding: 10px 6px 6px; }
.mcq-card {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.mcq-card.mcq-answered { border-color: var(--accent); }
.mcq-q { font: 700 .88rem/1.5 var(--f-body); margin: 0; }
.mcq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
@media (max-width: 480px) { .mcq-opts { grid-template-columns: 1fr; } }
.mcq-opt {
  padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--sheet); font: 600 .82rem var(--f-body); color: var(--text);
  cursor: pointer; text-align: left; transition: background .12s, border-color .12s;
}
.mcq-opt:hover:not(:disabled) { background: color-mix(in oklab, var(--accent) 12%, var(--sheet)); border-color: var(--accent); }
.mcq-opt:disabled { cursor: default; }
.mcq-opt.mcq-correct { background: #dcfce7; border-color: #22c55e; color: #166534; }
.mcq-opt.mcq-wrong   { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
@media (prefers-color-scheme: dark) {
  .mcq-opt.mcq-correct { background: #052e16; color: #86efac; }
  .mcq-opt.mcq-wrong   { background: #2d0000; color: #fca5a5; }
}
:root[data-theme="dark"] .mcq-opt.mcq-correct { background: #052e16; color: #86efac; }
:root[data-theme="dark"] .mcq-opt.mcq-wrong   { background: #2d0000; color: #fca5a5; }
.mcq-trick { display: flex; flex-direction: column; gap: 6px; }
.mcq-trick-label { font: 700 .82rem var(--f-body); }

/* ============================================================
   File attachments (v39)
   ============================================================ */
.file-attach { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.file-list { display: flex; flex-direction: column; gap: 5px; }
.file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--shade); border: 1.5px solid var(--border); font-size: .82rem;
}
.file-ico { font-size: 18px; flex-shrink: 0; }
.file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size, .file-pct { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.file-pct { color: var(--accent); font-weight: 700; }

.file-attachments { display: flex; flex-direction: column; gap: 7px; margin: 8px 0; }
.file-dl {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--sheet); border: 1.5px solid var(--border);
  text-decoration: none; color: var(--text);
  transition: background .12s;
}
.file-dl:hover { background: var(--shade); }
.file-dl .file-ico { font-size: 20px; }
.file-meta { flex: 1; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.file-dl-name { font: 600 .85rem/1.3 var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-dl-size { font-size: .7rem; color: var(--muted); }
.file-dl-btn { font: 700 .75rem var(--f-body); color: var(--accent); white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   YouTube auto-cards (v43)
   ============================================================ */
.yt-cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.yt-card {
  display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden;
  border: 1.5px solid var(--border);
  text-decoration: none; color: var(--text);
  background: var(--sheet);
  max-width: 280px; width: 100%;
  transition: transform .15s, box-shadow .15s;
}
.yt-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.yt-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play-btn {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7);
  background: rgba(0,0,0,.25);
  opacity: 0; transition: opacity .15s;
}
.yt-card:hover .yt-play-btn { opacity: 1; }
.yt-label {
  padding: 8px 10px; font: 600 .78rem var(--f-body);
  color: #cc0000; background: color-mix(in oklab, #ff0000 8%, var(--sheet));
  border-top: 1px solid var(--border);
}
.dark .yt-label, [data-theme="dark"] .yt-label { color: #ff6b6b; }

/* ============================================================
   v44: AI panel, year pills, post tags
   ============================================================ */

/* Year pill in meta row */
.pill.year-pill {
  background: color-mix(in oklab, #f59e0b 15%, var(--sheet));
  color: #b45309; border: 1.5px solid color-mix(in oklab, #f59e0b 30%, var(--border));
  font-weight: 800;
}
.dark .pill.year-pill, [data-theme="dark"] .pill.year-pill { color: #fbbf24; }

/* Post tags */
.post-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.post-tag {
  padding: 2px 8px; border-radius: 6px; font-size: .73rem; font-weight: 600;
  background: color-mix(in oklab, var(--accent) 10%, var(--shade));
  color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
}

/* AI panel */
.ai-bar { margin: 10px 0; }
.ai-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in oklab, #7c3aed 12%, var(--sheet)), color-mix(in oklab, #0ea5e9 8%, var(--sheet)));
  border: 1.5px solid color-mix(in oklab, #7c3aed 30%, var(--border));
  font: 700 .88rem var(--f-body); color: var(--text); cursor: pointer;
  transition: background .15s;
}
.ai-toggle:hover { background: linear-gradient(135deg, color-mix(in oklab, #7c3aed 20%, var(--sheet)), color-mix(in oklab, #0ea5e9 14%, var(--sheet))); }
.ai-toggle.open { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.ai-arr { font-size: .7rem; opacity: .5; }
.ai-panel {
  padding: 12px 14px 14px;
  border: 1.5px solid color-mix(in oklab, #7c3aed 30%, var(--border));
  border-top: none; border-radius: 0 0 12px 12px;
  background: var(--sheet);
}
.ai-hint { font-size: .78rem; color: var(--muted); margin: 0 0 10px; }
.ai-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ai-tool {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 12px; border-radius: 10px; text-decoration: none;
  border: 1.5px solid color-mix(in oklab, var(--tc, #7c3aed) 25%, var(--border));
  background: color-mix(in oklab, var(--tc, #7c3aed) 8%, var(--sheet));
  transition: transform .12s, box-shadow .12s;
}
.ai-tool:hover { transform: translateY(-2px); box-shadow: 0 4px 14px color-mix(in oklab, var(--tc, #7c3aed) 20%, transparent); }
.ai-tool-icon { font-size: 1.4rem; line-height: 1; }
.ai-tool-name { font: 700 .82rem var(--f-body); color: var(--tc, var(--accent)); }
.ai-tool-desc { font-size: .7rem; color: var(--muted); }

/* ============================================================
   Syllabus panel (v40)
   ============================================================ */
.syl-branch { margin-bottom: 16px; }
.syl-units { display: flex; flex-direction: column; gap: 8px; padding: 10px 6px 6px; }
.syl-unit {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px 14px;
}
.syl-unit-title {
  font: 700 .85rem/1.3 var(--f-body); color: var(--accent);
  margin-bottom: 8px;
}
.syl-topics {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.syl-topics li { font-size: .8rem; line-height: 1.5; color: var(--text); }

/* ============================================================
   Syllabus, metadata, hours, resources (v41)
   ============================================================ */
.syl-meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 10px; padding: 8px 12px;
  background: color-mix(in oklab, var(--accent) 8%, var(--sheet));
  border-radius: 10px; border: 1.5px solid color-mix(in oklab, var(--accent) 20%, var(--border));
}
.syl-code { font: 800 .82rem var(--f-body); color: var(--accent); }
.syl-credits { font-size: .75rem; color: var(--muted); }
.syl-hours {
  margin-left: auto; font-size: .72rem; font-weight: 700;
  color: var(--accent); opacity: .8; white-space: nowrap;
}
.syl-unit-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* clickable unit button */
.syl-unit-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--shade); cursor: pointer; text-align: left;
  font: 500 .83rem var(--f-body); color: var(--text);
  transition: background .15s, border-color .15s;
}
.syl-unit-btn:hover { background: color-mix(in oklab, var(--accent) 8%, var(--shade)); border-color: var(--accent); }
.syl-unit-btn.open {
  background: color-mix(in oklab, var(--accent) 10%, var(--sheet));
  border-color: var(--accent);
}
.syl-unit-num {
  flex-shrink: 0; padding: 2px 7px; border-radius: 6px;
  font: 800 .72rem var(--f-body); letter-spacing: .04em;
  background: var(--accent); color: #fff;
}
.syl-unit-name { flex: 1; font-weight: 600; }
.syl-unit-arr { margin-left: auto; font-size: .75rem; opacity: .5; }

/* expanded unit body */
.syl-unit-body {
  padding: 10px 12px 14px;
  border: 1.5px solid var(--accent);
  border-top: none; border-radius: 0 0 10px 10px;
  background: var(--sheet);
}
.syl-unit-body .syl-topics { margin-bottom: 12px; }

/* unit-level resource panels */
.unit-res { display: flex; flex-direction: column; gap: 10px; }
.unit-res-section { padding: 10px 12px; border-radius: 10px; background: var(--shade); border: 1.5px solid var(--border); }
.unit-res-label { font: 700 .78rem var(--f-body); color: var(--accent); margin-bottom: 7px; }
.unit-res-items { display: flex; flex-direction: column; gap: 4px; }
.unit-res-item { font-size: .8rem; color: var(--text); line-height: 1.4; }
.unit-res-book { color: var(--accent); }
.unit-res-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-res-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 8px;
  font: 500 .78rem var(--f-body); text-decoration: none;
  transition: opacity .15s, transform .1s;
  line-height: 1.3;
}
.unit-res-btn:hover { opacity: .85; transform: translateY(-1px); }
.unit-res-btn.yt {
  background: color-mix(in oklab, #ff0000 12%, var(--shade));
  color: #cc0000; border: 1.5px solid color-mix(in oklab, #ff0000 25%, var(--border));
}
.dark .unit-res-btn.yt, [data-theme="dark"] .unit-res-btn.yt {
  color: #ff6b6b; background: color-mix(in oklab, #ff0000 18%, var(--shade));
}
.unit-res-btn.pdf {
  background: color-mix(in oklab, var(--accent) 10%, var(--shade));
  color: var(--accent); border: 1.5px solid color-mix(in oklab, var(--accent) 25%, var(--border));
}

.syl-resources {
  margin-top: 8px; padding: 10px 14px; border-radius: 10px;
  background: var(--shade); border: 1.5px solid var(--border);
}
.syl-res-label { font: 700 .8rem var(--f-body); color: var(--accent); margin-bottom: 6px; }
.syl-link { color: var(--accent); text-decoration: underline; word-break: break-all; }

/* ============================================================
   Challenge / Quiz system (v56)
   ============================================================ */
.chal-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.chal-type-badge { display: inline-flex; align-items: center; gap: 4px; font: 700 .82rem var(--f-body); padding: 4px 10px; border-radius: 20px; background: linear-gradient(135deg,#7c3aed,#06b6d4); color: #fff; }
.chal-closed { background: var(--muted) !important; color: #fff !important; }
.chal-winner-pill { background: linear-gradient(135deg,#f59e0b,#ef4444) !important; color: #fff !important; }
.chal-runner-pill { background: linear-gradient(135deg,#6366f1,#8b5cf6) !important; color: #fff !important; }

/* Ask form */
.chal-ask-section { margin: 12px 0; padding: 14px 16px; border-radius: 14px; background: var(--shade); border: 1.5px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.chal-type-row label { font: 700 .82rem var(--f-body); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.chal-type-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chal-type-btn { padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--sheet); color: var(--ink); font: 600 .82rem var(--f-body); cursor: pointer; transition: background .15s,border-color .15s; }
.chal-type-btn.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.chal-time-label, .chal-builder-label { font: 700 .82rem var(--f-body); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; display: flex; flex-direction: column; gap: 4px; }
.chal-time-sel { margin-top: 4px; padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--sheet); color: var(--ink); font: 500 .9rem var(--f-body); }

/* Builder */
.chal-builder { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.chal-q-list { display: flex; flex-direction: column; gap: 10px; }
.chal-qb-item { padding: 12px 14px; border-radius: 10px; background: var(--sheet); border: 1.5px solid var(--border); }
.chal-qb-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.chal-qb-q { width: 100%; padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--paper); color: var(--ink); font: 500 .9rem var(--f-body); box-sizing: border-box; margin-bottom: 8px; }
.chal-qb-opts { display: flex; flex-direction: column; gap: 6px; }
.chal-qb-opt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: var(--shade); border: 1.5px solid transparent; cursor: pointer; }
.chal-qb-opt.chal-qb-correct { border-color: #22c55e; background: color-mix(in oklab,#22c55e 12%,var(--shade)); }
.chal-qb-opt input[type=radio] { accent-color: #22c55e; flex-shrink: 0; }
.chal-qb-opt input[type=text] { flex: 1; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--sheet); color: var(--ink); font: 500 .88rem var(--f-body); }
.chal-correct-tag { font: 700 .76rem var(--f-body); color: #22c55e; flex-shrink: 0; }

/* Timer */
.chal-timer { display: inline-block; font: 800 1.6rem var(--f-head); padding: 6px 18px; border-radius: 12px; background: linear-gradient(135deg,#7c3aed,#06b6d4); color: #fff; margin-bottom: 10px; letter-spacing: .04em; }
.chal-timer-red { background: linear-gradient(135deg,#ef4444,#f97316) !important; animation: pulse-timer .8s infinite; }
@keyframes pulse-timer { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Quiz questions */
.chal-quiz-active, .chal-quiz-done { display: flex; flex-direction: column; gap: 14px; }
.chal-q { padding: 12px 14px; border-radius: 12px; background: var(--shade); border: 1.5px solid var(--border); }
.chal-q-text { font: 600 .95rem var(--f-body); color: var(--ink); margin: 0 0 8px; }
.chal-opts { display: flex; flex-direction: column; gap: 6px; }
.chal-opt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; background: var(--sheet); border: 1.5px solid var(--border); cursor: pointer; font: 500 .88rem var(--f-body); color: var(--ink); transition: background .12s,border-color .12s; text-align: left; }
button.chal-opt:hover { background: var(--accent-soft); border-color: var(--accent); }
button.chal-opt.selected { background: color-mix(in oklab,var(--accent) 15%,var(--sheet)); border-color: var(--accent); }
.chal-opt b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--shade); color: var(--accent); font: 700 .78rem var(--f-head); flex-shrink: 0; }
button.chal-opt.selected b { background: var(--accent); color: #fff; }
div.chal-opt.correct { background: color-mix(in oklab,#22c55e 15%,var(--sheet)); border-color: #22c55e; }
div.chal-opt.correct b { background: #22c55e; color: #fff; }
div.chal-opt.wrong { background: color-mix(in oklab,#ef4444 12%,var(--sheet)); border-color: #ef4444; }
div.chal-opt.wrong b { background: #ef4444; color: #fff; }

/* Result banner */
.chal-result-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(135deg,#7c3aed,#06b6d4); color: #fff; margin-bottom: 10px; }
.chal-result-score { font: 800 2rem var(--f-head); }
.chal-result-sub { font: 500 .85rem var(--f-body); opacity: .9; }

/* Start button */
.chal-start-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.chal-start-info { display: flex; gap: 8px; flex-wrap: wrap; }
.chal-start-btn { font-size: .95rem; padding: 11px 22px; }

/* Leaderboard */
.chal-board { margin-top: 16px; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--border); }
.chal-board-hdr { font: 700 .85rem var(--f-head); padding: 9px 16px; background: linear-gradient(135deg,var(--accent),#06b6d4); color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.chal-board-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border); font: 500 .88rem var(--f-body); flex-wrap: wrap; }
.chal-board-row:last-child { border-bottom: none; }
.chal-board-row.chal-winner { background: color-mix(in oklab,#f59e0b 12%,var(--sheet)); }
.chal-board-row.chal-runner { background: color-mix(in oklab,#8b5cf6 10%,var(--sheet)); }
.chal-rank { font: 700 1rem var(--f-head); min-width: 30px; text-align: center; }
.chal-board-name { flex: 1; color: var(--ink); }
.chal-board-score { color: var(--muted); font: 600 .82rem var(--f-body); }

/* Host buttons */
.chal-host-btns { margin-top: 10px; }

/* Dark mode overrides */
.dark .chal-qb-q, [data-theme="dark"] .chal-qb-q { background: var(--paper); }
.dark .chal-time-sel, [data-theme="dark"] .chal-time-sel { background: var(--sheet); color: var(--ink); }

/* ============================================================
   AI features: explain row, hint row, quiz generator (v59)
   ============================================================ */
.ai-explain-row, .ai-hint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 10px; background: linear-gradient(135deg,color-mix(in oklab,#1a73e8 8%,var(--sheet)),color-mix(in oklab,#10a37f 8%,var(--sheet))); border: 1.5px solid color-mix(in oklab,#1a73e8 20%,var(--border)); margin-bottom: 10px; }
.ai-explain-label, .ai-hint-label { font: 700 .82rem var(--f-body); color: var(--ink); flex: 1 0 100%; margin-bottom: 2px; }
.ai-explain-btn { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 20px; font: 600 .8rem var(--f-body); background: var(--sheet); border: 1.5px solid var(--border); color: var(--ink); text-decoration: none; cursor: pointer; transition: background .12s,border-color .12s; }
.ai-explain-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.ai-gen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; }
.ai-gen-label { font: 600 .8rem var(--f-body); color: var(--muted); }
.chal-builder-label-row { display: flex; flex-direction: column; gap: 2px; }
.chal-builder-label-text { font: 700 .82rem var(--f-body); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ============================================================
   Campus Market (v62)
   ============================================================ */
.mkt-hero { text-align: center; padding: 40px 20px; }
.mkt-hero-icon { font-size: 3rem; margin-bottom: 12px; }
.mkt-hero h3 { font: 700 1.4rem var(--f-head); color: var(--ink); margin-bottom: 8px; }
.mkt-hero p { color: var(--muted); margin-bottom: 20px; }

.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 14px; padding: 4px 0; }

.mkt-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--sheet); border: 1.5px solid var(--border); text-align: left; cursor: pointer; transition: border-color .15s,transform .1s; width: 100%; }
.mkt-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.mkt-card.mkt-sold { opacity: .65; }
.mkt-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mkt-title { font: 600 .95rem var(--f-body); color: var(--ink); margin: 0; line-height: 1.3; }
.mkt-price-row { display: flex; align-items: center; gap: 8px; }
.mkt-price { font: 700 1.2rem var(--f-head); color: var(--accent); }
.mkt-price.free { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.mkt-condition { font: 600 .75rem var(--f-body); padding: 2px 9px; border-radius: 20px; background: color-mix(in oklab,var(--cc,#6b7280) 15%,var(--sheet)); color: var(--cc,#6b7280); border: 1px solid color-mix(in oklab,var(--cc,#6b7280) 30%,transparent); }
.mkt-price-big { font: 700 2rem var(--f-head); color: var(--accent); margin: 4px 0 10px; }
.mkt-price-big.free { font-size: 1.2rem; color: var(--muted); }
.mkt-sold-banner { background: color-mix(in oklab,#10b981 15%,var(--sheet)); color: #10b981; font: 700 .9rem var(--f-body); padding: 8px 14px; border-radius: 10px; margin-bottom: 10px; text-align: center; }
/* sell button, green accent */
.btn.sell { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-color: transparent; font-weight: 700; }
.btn.sell:hover { background: linear-gradient(135deg, #059669, #047857); }

/* market sort select */
.mkt-sort-sel { border: 1.5px solid var(--border); border-radius: 8px; padding: 5px 8px; font: 600 .8rem var(--f-body); background: var(--sheet); color: var(--ink); cursor: pointer; }

/* market top banner */
.mkt-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--sheet); border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; flex-wrap: wrap; }
.mkt-banner-side { display: flex; align-items: center; gap: 10px; }
.mkt-banner-icon { font-size: 1.8rem; }
.mkt-banner-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* card footer */
.mkt-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mkt-card-author { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mkt-author-name { font: 500 .78rem var(--f-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.mkt-card-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mkt-interest-badge { font: 600 .75rem var(--f-body); color: var(--accent); }
.campus-badge.sm { font-size: .68rem !important; padding: 1px 6px !important; }
/* constrain card avatar */
.mkt-card img.av-nb, .mkt-card .av-nb { width: 20px !important; height: 20px !important; min-width: 20px; max-width: 20px; border-radius: 50%; object-fit: cover; }

/* seller row in view */
.mkt-seller { display: flex; align-items: center; gap: 10px; padding: 10px 0; margin: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mkt-seller .av, .mkt-seller img.av-nb { width: 44px !important; height: 44px !important; min-width: 44px; max-width: 44px; border-radius: 50%; object-fit: cover; }

/* flags */
.mkt-flag { font-size: .8rem; }
.mkt-flag-banner { background: color-mix(in oklab,#f59e0b 15%,var(--sheet)); color: #92400e; font: 600 .88rem var(--f-body); padding: 8px 14px; border-radius: 10px; margin-bottom: 10px; border: 1px solid color-mix(in oklab,#f59e0b 40%,transparent); }
@media (prefers-color-scheme: dark) { .mkt-flag-banner { color: #fbbf24; } }

/* stars */
.mkt-stars-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.mkt-stars { display: inline-flex; gap: 1px; }
.star { color: var(--border); font-size: 1rem; }
.star.on { color: #f59e0b; }
.mkt-rating-wrap { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.mkt-rating-header { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; font: .9rem var(--f-body); }
.mkt-star-picker { display: flex; gap: 4px; }
.star-btn { background: none; border: none; cursor: pointer; font-size: 1.6rem; color: var(--border); padding: 0; line-height: 1; transition: color .1s,transform .1s; }
.star-btn:hover, .star-btn.on { color: #f59e0b; transform: scale(1.15); }

/* buy panel */
.mkt-buy-panel { background: color-mix(in oklab,var(--accent) 8%,var(--sheet)); border: 1.5px solid color-mix(in oklab,var(--accent) 30%,transparent); border-radius: 14px; padding: 14px; margin: 10px 0; display: flex; flex-direction: column; gap: 10px; }
.mkt-buy-panel.expressed { background: color-mix(in oklab,#10b981 8%,var(--sheet)); border-color: color-mix(in oklab,#10b981 30%,transparent); }
.mkt-buy-top { display: flex; align-items: center; gap: 12px; }
.mkt-buy-icon, .mkt-buy-check { font-size: 2rem; flex-shrink: 0; }

/* interested buyers list */
.mkt-buyers-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin: 10px 0; }
.mkt-buyers-panel h4 { font: 700 .95rem var(--f-head); margin: 0 0 10px; }
.mkt-buyers-list { display: flex; flex-direction: column; gap: 8px; }
.mkt-buyer-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--sheet); border-radius: 10px; }
.mkt-buyer-info { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.mkt-buyers-empty { color: var(--muted); font-size: .9rem; padding: 12px 0; }

/* report */
.mkt-report-wrap { margin-top: 4px; }
.mkt-report-form { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.mkt-reported { color: #10b981; margin-top: 6px; }

/* ============================================================
   GATE Hub intro
   ============================================================ */
.gate-hub { display: flex; flex-direction: column; gap: 18px; }
.gate-hub-header { background: linear-gradient(135deg,#6366f1,#8b5cf6,#a855f7); border-radius: 16px; padding: 18px 20px; color: #fff; }
.gate-hub-title { font-size: 18px; font-weight: 800; }
.gate-hub-sub { font-size: 13px; opacity: .85; margin-top: 4px; }

.gate-section { display: flex; flex-direction: column; gap: 10px; }
.gate-section-title { font-size: 14px; font-weight: 700; }
.gate-section-sub { font-size: 12px; color: var(--muted); margin-top: -6px; }

.gate-year-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
@media (max-width: 420px) { .gate-year-grid { grid-template-columns: repeat(4,1fr); } }
.gate-year-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 4px;
  background: var(--sheet); cursor: pointer; transition: background .15s, border-color .15s;
}
.gate-year-btn:hover, .gate-year-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.gate-year-label { font-size: 9px; font-weight: 600; opacity: .7; text-transform: uppercase; }
.gate-year-num { font-size: 15px; font-weight: 800; }
.gate-year-cnt { font-size: 9px; color: #10b981; font-weight: 700; }
.gate-year-btn.active .gate-year-cnt { color: #a7f3d0; }

.btn.sm { padding: 5px 12px; font-size: 13px; }
.gate-add-pyq { align-self: flex-start; }

.gate-branch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gate-branch-btn {
  padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--line); background: var(--sheet); cursor: pointer;
  transition: background .15s;
}
.gate-branch-btn:hover, .gate-branch-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }

/* PYQ panel (expands below branch buttons) */
.pyq-panel { margin-top: 12px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.pyq-panel-hdr { padding: 10px 14px 6px; border-bottom: 1px solid var(--line); }
.pyq-panel-title { font-size: 14px; font-weight: 700; display: block; }
.pyq-panel-sub { font-size: 11px; color: var(--muted); }
.pyq-paper-grid { display: flex; flex-direction: column; }
.pyq-paper-row { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.pyq-paper-row:last-child { border-bottom: none; }
.pyq-paper-year { font-size: 13px; font-weight: 700; min-width: 38px; }
.pyq-btn { background: #059669; border-color: #059669; color: #fff; font-size: 11px; padding: 4px 10px; }
.pyq-btn:hover { background: #047857; }
.pyq-btn-2 { background: var(--sheet); border-color: var(--line); font-size: 11px; padding: 4px 10px; }
.pyq-btn-2:hover { background: var(--line); }
.pyq-panel-note { padding: 7px 14px; font-size: 10.5px; color: var(--muted); background: color-mix(in oklab, var(--accent) 6%, transparent); }

.gate-stats-row { display: flex; gap: 12px; }
.gate-stat { flex: 1; background: var(--sheet); border-radius: 12px; padding: 12px; text-align: center; }
.gate-stat-n { display: block; font-size: 22px; font-weight: 800; }
.gate-stat-l { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

.gate-res-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.gate-res-grid-2 { grid-template-columns: repeat(2,1fr); }
@media (max-width: 420px) { .gate-res-grid { grid-template-columns: repeat(2,1fr); } }
.gate-res-chip {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 10px; text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color .15s, background .15s; text-align: left;
  appearance: none; -webkit-appearance: none; font: inherit; box-sizing: border-box;
}
.gate-res-chip:hover { border-color: #6366f1; background: var(--accent-soft); }
.gate-res-emoji { font-size: 22px; flex-shrink: 0; }
.gate-res-name { font-size: 12px; font-weight: 700; }
.gate-res-tag { font-size: 10px; color: var(--muted); line-height: 1.3; }
.gate-res-arrow { font-size: 18px; font-weight: 700; color: var(--muted); margin-left: auto; flex-shrink: 0; }

/* ============================================================
   GATE Resource Detail, course browser
   ============================================================ */
.gate-res-detail { display: flex; flex-direction: column; gap: 14px; }
.gate-res-detail-hdr {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  background: var(--sheet); border-radius: 14px; padding: 14px;
}
.gate-back-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px;
  border: 1.5px solid var(--line); border-radius: 20px; font-size: 13px; font-weight: 600;
  background: var(--bg); cursor: pointer; color: inherit; white-space: nowrap;
}
.gate-back-btn:hover { border-color: #6366f1; background: var(--accent-soft); }
.gate-res-det-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.gate-res-det-emoji { font-size: 28px; flex-shrink: 0; }
.gate-res-det-name { font-size: 16px; font-weight: 800; }
.gate-res-det-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.gate-free-badge {
  background: linear-gradient(90deg,#065f46,#047857); color: #d1fae5;
  border-radius: 10px; padding: 8px 14px; font-size: 12px; font-weight: 700;
  text-align: center;
}
.gate-course-list { display: flex; flex-direction: column; gap: 10px; }
.gate-course-hint {
  font-size: 12px; color: var(--muted); padding: 8px 12px;
  background: var(--sheet); border-radius: 10px; line-height: 1.6;
}
.gate-course-hint-yt { color: #ef4444; font-weight: 700; }
.gate-course-hint-pdf { color: #6366f1; font-weight: 700; }
.gate-course-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; transition: border-color .15s;
}
.gate-course-card:hover { border-color: #6366f1; }
.gate-course-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.gate-course-icon { font-size: 22px; flex-shrink: 0; }
.gate-course-name { font-size: 13px; font-weight: 700; line-height: 1.3; }
.gate-course-branch {
  display: inline-block; font-size: 10px; font-weight: 700; color: #6366f1;
  background: #eef2ff; border-radius: 6px; padding: 1px 6px; margin-top: 3px;
}
@media (prefers-color-scheme: dark) {
  .gate-course-branch { background: #1e1b4b; color: #a5b4fc; }
}
.gate-course-btns { display: flex; gap: 6px; flex-shrink: 0; }
.render-err { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 20px; text-align: center; }
.render-err-icon { font-size: 40px; }
.render-err-msg { font-size: 15px; font-weight: 600; color: var(--text); }
.render-err-hint { font-size: 12px; color: var(--muted); max-width: 280px; line-height: 1.5; }

.gate-course-empty {
  text-align: center; color: var(--muted); padding: 24px;
  background: var(--sheet); border-radius: 12px; font-size: 13px;
}

/* ============================================================
   GATE badges (PYQ / Marks / Difficulty)
   ============================================================ */
.gate-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.gate-badge.pyq { background: linear-gradient(90deg,#f59e0b,#fbbf24); color: #1a1a1a; }
.gate-badge.marks { background: #6366f1; color: #fff; }
.gate-badge.diff-easy   { background: #10b981; color: #fff; }
.gate-badge.diff-medium { background: #f59e0b; color: #fff; }
.gate-badge.diff-hard   { background: #ef4444; color: #fff; }

/* GATE post form: PYQ/Marks/Difficulty row */
.gate-fields { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
@media (max-width: 520px) { .gate-fields { grid-template-columns: 1fr; } }

@media (max-width: 500px) {
  .mkt-grid { grid-template-columns: 1fr; }
}

.alumni-search { width: 100%; margin: 6px 0; }

/* ---- per-section color themes ---- */
body { --ta: #6366f1; --tb: #a855f7; }
body[data-tab="doubts"]     { --ta: #6366f1; --tb: #a855f7; }
body[data-tab="ideas"]      { --ta: #f59e0b; --tb: #f97316; }
body[data-tab="clubs"]      { --ta: #0d9488; --tb: #06b6d4; }
body[data-tab="challenges"] { --ta: #f43f5e; --tb: #fb923c; }
body[data-tab="market"]     { --ta: #16a34a; --tb: #14b8a6; }
body[data-tab="gate"]       { --ta: #2563eb; --tb: #6366f1; }

header.top { background: linear-gradient(120deg, var(--ta), var(--tb) 50%, var(--g3) 85%, var(--g4)); }
.sheet[data-s="all"] {
  background-image: linear-gradient(var(--sheet), var(--sheet)), linear-gradient(90deg, var(--ta), var(--tb));
}
.sheet h2 { background: linear-gradient(90deg, var(--ta), var(--tb)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.form label { color: color-mix(in oklab, var(--ta) 65%, var(--ink)); }
.form input, .form select, .form textarea { background: color-mix(in oklab, var(--ta) 6%, var(--sheet)); border-color: color-mix(in oklab, var(--ta) 30%, var(--line)); }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--ta); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ta) 25%, transparent); outline: none; }
.sheet .btn.primary { background: linear-gradient(120deg, var(--ta), var(--tb)); box-shadow: 0 6px 16px -8px var(--ta); }
.bnav-btn.active { color: var(--ta); }
.tabs button[aria-selected="true"] { color: var(--ta); }

/* ---- entertainment ---- */
.fun-mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.fun-card { aspect-ratio: 1; font-size: 1.7rem; border-radius: 14px; border: 2px solid var(--line); background: color-mix(in oklab, var(--ta) 14%, var(--sheet)); cursor: pointer; padding: 0; }
.fun-card.up { background: var(--sheet); border-color: var(--ta); }
.fun-card.done { background: color-mix(in oklab, #22c55e 22%, var(--sheet)); border-color: #22c55e; }
.fun-type-text { font: 600 1.05rem var(--f-mono); line-height: 1.7; margin: 6px 0; overflow-wrap: anywhere; }
.fun-type-text .ok { color: #16a34a; }
.fun-type-text .bad { color: #dc2626; background: rgb(220 38 38 / .15); }
.fun-type-input { width: 100%; }
.fun-ans { font-weight: 800; color: #16a34a; }
.fun-keys { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 6px; }
.fun-key { height: 96px; border-radius: 0 0 12px 12px; border: 1px solid var(--line); background: #fff; color: #111; font-weight: 800; padding: 0; cursor: pointer; align-self: stretch; }
.fun-key:active { background: color-mix(in oklab, var(--ta) 30%, #fff); }
.fun-langs { display: grid; gap: 6px; }
.fun-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.fun-lang strong { min-width: 84px; }
.fun-vol { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 140px; }
.fun-vol input { width: 100%; }
.fun-det { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 6px 0; background: color-mix(in oklab, var(--ta) 5%, var(--sheet)); }
.fun-det summary { font-weight: 800; cursor: pointer; padding: 4px 0; }
.fun-det .rowbtns { margin-top: 8px; }
.juke-filter, .juke-any { width: 100%; }
.juke-any { flex: 1; min-width: 160px; }

/* ---- market upgrades ---- */
.mkt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.mkt-chip { border: 1px solid var(--line); background: var(--sheet); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; cursor: pointer; }
.mkt-chip.on { background: linear-gradient(135deg, var(--ta), var(--tb)); color: #fff; border-color: transparent; }
.mkt-save { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--sheet); cursor: pointer; font-size: 1rem; padding: 0; z-index: 2; }
.mkt-save.on { background: color-mix(in oklab, #ef4444 14%, var(--sheet)); border-color: #ef4444; }
.mkt-safe { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 0; background: color-mix(in oklab, var(--ta) 5%, var(--sheet)); }
.mkt-safe summary { font-weight: 800; cursor: pointer; padding: 4px 0; }
.mkt-safe ul { margin: 6px 0 4px; padding-left: 18px; color: var(--muted); font-size: 13px; display: grid; gap: 4px; }
.mkt-safe .rowbtns { margin: 8px 0 4px; }

/* ---- campus hub ---- */
.campus-hub { border-left: 5px solid var(--cc, var(--ta)); }
.campus-hub-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.campus-hub-head strong { font-size: 1.1rem; color: var(--cc, var(--ink)); }
.campus-live { margin: 0; font-weight: 700; color: #16a34a; font-size: 13px; }
.campus-sec { display: grid; gap: 6px; border-top: 1px dashed var(--line); padding-top: 8px; }
.campus-link { display: grid; text-align: left; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--sheet); color: inherit; cursor: pointer; }
.campus-link strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campus-link small { color: var(--muted); }
.year-hub { border-left: 5px solid var(--ta); }
.yr-goal { align-items: flex-start; font-weight: 600; font-size: 14px; }
.yr-goal input { margin-top: 3px; }
.yr-dates { margin: 2px 0; padding-left: 18px; color: var(--muted); font-size: 13px; display: grid; gap: 3px; }

/* profile photo, stories and status */
.story-bar { display: flex; gap: 12px; overflow-x: auto; padding: 8px 14px; scrollbar-width: none; }
.story-bar::-webkit-scrollbar { display: none; }
.st-bub { position: relative; display: grid; justify-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; flex: 0 0 auto; width: 66px; color: var(--ink); }
.st-ring { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; padding: 3px; background: var(--line); }
.st-ring.new { background: linear-gradient(135deg, #22c55e, #6366f1, #ec4899); }
.st-ring.add { background: none; border: 2px dashed var(--line); }
.st-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 26px; background: var(--paper); border: 2px solid var(--paper); }
.st-av.sm { width: 36px; height: 36px; font-size: 18px; }
.st-name { font-size: 11px; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-plus { position: absolute; right: 4px; top: 38px; width: 20px; height: 20px; border-radius: 50%; background: #22c55e; color: #fff; font: 700 15px/20px system-ui; text-align: center; border: 2px solid var(--paper); }
body.st-open { overflow: hidden; }
.st-view { position: fixed; inset: 0; z-index: 3000; background: #000; color: #fff; display: grid; grid-template-rows: auto auto 1fr; max-width: 520px; margin: 0 auto; }
.st-view.st-add { background: rgb(0 0 0 / .6); max-width: none; display: grid; place-items: center; padding: 14px; }
.st-bars { display: flex; gap: 3px; padding: 8px 8px 4px; }
.st-seg { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .3); overflow: hidden; }
.st-seg.done { background: #fff; }
.st-fill { display: block; height: 100%; width: 0; background: #fff; }
.st-fill.run { animation: stfill linear forwards; }
@keyframes stfill { from { width: 0; } to { width: 100%; } }
.st-top { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.st-who { flex: 1; min-width: 0; display: grid; }
.st-who small { opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-x { background: none; border: 0; color: inherit; font-size: 18px; padding: 6px 8px; cursor: pointer; }
.st-body { position: relative; display: grid; place-items: center; overflow: hidden; }
.st-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 18px 16px; background: linear-gradient(transparent, rgb(0 0 0 / .7)); text-align: center; overflow-wrap: anywhere; }
.st-load { opacity: .8; }
.st-textcard { display: grid; place-items: center; width: 100%; height: 100%; padding: 24px; text-align: center; font: 700 1.5rem/1.35 system-ui; overflow-wrap: anywhere; white-space: pre-wrap; }
.st-textcard.st-small { height: 150px; border-radius: 14px; padding: 8px; }
.st-textcard textarea { width: 100%; height: 100%; background: none; border: 0; color: #fff; font: inherit; text-align: center; resize: none; outline: none; }
.st-textcard textarea::placeholder { color: rgb(255 255 255 / .7); }
.st-tap { position: absolute; top: 90px; bottom: 0; width: 35%; background: none; border: 0; cursor: pointer; }
.st-tap.l { left: 0; } .st-tap.r { right: 0; width: 65%; }
.st-viewers { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; max-height: 40%; overflow: auto; background: rgb(0 0 0 / .8); padding: 10px; border-radius: 12px; display: grid; gap: 4px; }
.st-viewers[hidden] { display: none; }
.st-card { width: min(420px, 100%); background: var(--paper); color: var(--ink); border-radius: 16px; padding: 14px; display: grid; gap: 10px; max-height: 92vh; overflow: auto; }
.st-head { display: flex; align-items: center; justify-content: space-between; }
.st-prev { display: grid; place-items: center; }
.st-previmg { max-width: 100%; max-height: 240px; border-radius: 12px; }
.st-ph { padding: 30px; text-align: center; color: var(--muted); border: 2px dashed var(--line); border-radius: 12px; }
.st-sw { display: flex; gap: 6px; flex-wrap: wrap; }
.st-swb { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--paper); cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.st-err { color: #dc2626; min-height: 1em; margin: 0; }

/* stories sit inside the header, right under the title */
header.top .story-bar { padding: 6px 0 8px; margin: 2px 0 6px; gap: 10px; }
header.top .st-bub { color: #fff; }
header.top .st-name { text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
header.top .st-ring:not(.new):not(.add) { background: rgb(255 255 255 / .45); }
header.top .st-ring.add { border-color: rgb(255 255 255 / .7); }
header.top .st-plus { border-color: transparent; }

/* screenshot deterrents */
body.priv-blur > * { filter: blur(22px); }
.st-view, .st-img, .st-textcard { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.st-img { -webkit-user-drag: none; pointer-events: none; }
.st-wm { position: absolute; inset: 90px 0 0 0; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); align-content: space-around; justify-items: center; overflow: hidden; pointer-events: none; transform: rotate(-22deg) scale(1.35); opacity: .2; }
.st-wm span { font: 700 15px/1 system-ui; color: #fff; text-shadow: 0 0 3px #000; white-space: nowrap; padding: 22px 0; }
.st-note { position: absolute; z-index: 1; left: 0; right: 0; top: 88px; margin: 0; padding: 3px 12px; text-align: center; font-size: 10.5px; color: rgb(255 255 255 / .8); background: rgb(0 0 0 / .35); pointer-events: none; }
.st-view { overflow: hidden; }
.st-bars, .st-top { position: relative; z-index: 3; background: #000; }

.st-quiz-form { display: grid; gap: 6px; }
.st-quizcard { display: grid; align-content: center; gap: 10px; text-align: left; font-size: 1rem; padding: 18px; }
.st-q { margin: 0 0 6px; font: 700 1.25rem/1.3 system-ui; }
.st-opt { padding: 12px 14px; border-radius: 12px; border: 2px solid rgb(255 255 255 / .45); background: rgb(0 0 0 / .25); color: #fff; font: 600 1rem system-ui; text-align: left; cursor: pointer; z-index: 4; position: relative; }
.st-opt.good { background: #16a34a; border-color: #fff; }
.st-opt.bad { background: #dc2626; border-color: #fff; }
.st-qnote { margin: 4px 0 0; text-align: center; opacity: .9; font-size: .9rem; }
.st-quizcard { position: relative; z-index: 4; }

.st-expl { margin: 4px 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .18); font-size: .95rem; line-height: 1.35; }
.st-save { text-align: center; background: rgb(255 255 255 / .22); }
.st-extra { display: grid; gap: 6px; }
.st-quiz-form input[type=text], .st-quiz-form select { width: 100%; }

.st-sharecard { position: relative; z-index: 4; display: grid; align-content: center; gap: 12px; text-align: left; padding: 22px; }
.st-tagbadge { justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .25); font: 800 .75rem system-ui; letter-spacing: .06em; }
.st-detail { margin: 0; font: 500 1rem/1.45 system-ui; opacity: .95; overflow-wrap: anywhere; white-space: pre-wrap; }
.st-open { text-align: center; background: rgb(255 255 255 / .22); }

/* the add-story form must really hide the parts that do not belong to the chosen tab */
.st-view [hidden] { display: none !important; }
.st-card { box-sizing: border-box; max-width: 100%; overflow-x: hidden; }
.st-card input[type=text], .st-card input[type=file], .st-card textarea, .st-card select { box-sizing: border-box; width: 100%; max-width: 100%; }

/* quiz options: one colour per letter */
.st-card { --oA1: #ef4444; --oA2: #f97316; --oB1: #3b82f6; --oB2: #6366f1; --oC1: #f59e0b; --oC2: #eab308; --oD1: #10b981; --oD2: #14b8a6; }
.st-quiz-form { gap: 10px; }
.st-optrow { display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; border: 2px solid var(--c1); background: color-mix(in oklab, var(--c1) 8%, var(--paper)); transition: box-shadow .15s; }
.st-optrow:focus-within { box-shadow: 0 0 0 4px color-mix(in oklab, var(--c1) 28%, transparent); }
.st-optrow b { display: grid; place-items: center; min-width: 44px; color: #fff; font: 800 1.1rem system-ui; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.st-optrow input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 12px 12px; font-size: 1rem; outline: none; border-radius: 0 !important; }
.st-optrow.o0 { --c1: var(--oA1); --c2: var(--oA2); } .st-optrow.o1 { --c1: var(--oB1); --c2: var(--oB2); }
.st-optrow.o2 { --c1: var(--oC1); --c2: var(--oC2); } .st-optrow.o3 { --c1: var(--oD1); --c2: var(--oD2); }
.st-ansrow { display: flex; align-items: center; gap: 8px; padding: 2px 10px; border-radius: 14px; border: 2px dashed #16a34a; background: color-mix(in oklab, #16a34a 10%, var(--paper)); }
.st-ansrow select { flex: 1; border: 0 !important; background: transparent !important; font-weight: 700; color: #15803d; padding: 10px 4px; outline: none; }
.st-quiz-form > input[type=text] { border-radius: 14px; border: 2px solid var(--line); padding: 12px; }
/* options in the viewer */
.st-opt { display: flex; align-items: center; gap: 12px; }
.st-opt.o0 { --c1: #ef4444; --c2: #f97316; } .st-opt.o1 { --c1: #3b82f6; --c2: #6366f1; }
.st-opt.o2 { --c1: #f59e0b; --c2: #eab308; } .st-opt.o3 { --c1: #10b981; --c2: #14b8a6; }
.st-opt.o0, .st-opt.o1, .st-opt.o2, .st-opt.o3 { background: rgb(255 255 255 / .16); border: 2px solid rgb(255 255 255 / .35); border-left: 0; padding: 0 14px 0 0; overflow: hidden; border-radius: 14px; min-height: 52px; backdrop-filter: blur(4px); }
.st-chip { align-self: stretch; display: grid; place-items: center; min-width: 48px; font: 800 1.15rem system-ui; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.st-otext { flex: 1; text-align: left; }
.st-count { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: rgb(0 0 0 / .35); font: 700 .85rem system-ui; }
.st-opt.o0:active, .st-opt.o1:active, .st-opt.o2:active, .st-opt.o3:active { transform: scale(.98); }
.st-opt.good { background: linear-gradient(135deg, #16a34a, #22c55e) !important; border-color: #fff !important; box-shadow: 0 0 0 3px rgb(34 197 94 / .35); }
.st-opt.bad { background: linear-gradient(135deg, #dc2626, #f43f5e) !important; border-color: #fff !important; }
.st-opt.good .st-chip, .st-opt.bad .st-chip { background: rgb(0 0 0 / .28); }
.st-quizcard, .st-sharecard { place-items: stretch; align-content: center; }
.st-quizcard > *, .st-sharecard > * { width: 100%; box-sizing: border-box; }
.st-quizcard .st-q { text-align: left; }
.st-sharecard .st-tagbadge { width: auto; }
.st-quizcard .st-qnote { text-align: center; }
.st-skip, .st-save, .st-open { justify-content: center; text-align: center; }
.mock-bar{height:8px;border-radius:99px;background:var(--accent-soft);overflow:hidden;margin:2px 0 8px}.mock-bar span{display:block;height:100%;background:var(--accent)}
.plus-list p { margin: 0; }
.mock-chart { width: 100%; height: auto; max-height: 130px; }
.mock-chart .mc-axis { stroke: var(--line); stroke-width: 1; }
.mock-chart .mc-line { stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mock-chart .mc-dot { fill: var(--accent); }
.plan-today { margin: 0; font-weight: 700; color: var(--accent); }
.plus-hero { padding: 10px 14px; border-radius: 14px; font-weight: 800; color: #3b2a00; background: linear-gradient(110deg, #fcd34d, #f59e0b, #fde68a, #f59e0b); background-size: 220% 100%; animation: shimmer 4s linear infinite; }
.coach { display: grid; gap: 10px; padding: 14px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--brand-a, #4f46e5), var(--brand-b, #7c3aed)); }
.coach-top { display: flex; gap: 14px; align-items: center; }
.coach-ring { width: 84px; height: 84px; flex: none; }
.coach-ring .cr-bg { stroke: rgb(255 255 255 / .28); stroke-width: 7; }
.coach-ring .cr-fg { stroke: #fff; stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray .8s ease; }
.coach-ring .cr-num { fill: #fff; font-size: 17px; font-weight: 800; }
.coach-sub { margin: 2px 0 6px; opacity: .95; }
.coach-level { display: inline-block; padding: 2px 10px; border-radius: 999px; background: rgb(255 255 255 / .22); font-size: 12px; font-weight: 700; }
.coach-next { display: grid; gap: 6px; }
.coach-tip { text-align: left; border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .14); color: #fff; border-radius: 12px; padding: 9px 12px; font-weight: 600; }
.coach-tip.first { background: #fff; color: #1e1b4b; border-color: #fff; }
.wow { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 14px; border-radius: 16px; color: #3b2a00; background: linear-gradient(110deg, #fde68a, #fbbf24, #fde68a); animation: pop .5s ease-out; }
.wow strong { font-size: 22px; }
.wow-conf { font-size: 22px; letter-spacing: 6px; animation: float 1.6s ease-in-out infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes float { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .plus-hero, .wow, .wow-conf { animation: none; } }
.ai-msg{white-space:pre-wrap;padding:9px 12px;border-radius:12px;margin:2px 0}.ai-msg.me{background:var(--accent-soft);justify-self:end}.ai-msg.bot{background:var(--paper);border:1px solid var(--line)}
.official-bar { display: flex; gap: 10px; align-items: center; margin: 8px 12px; padding: 9px 12px; border-radius: 14px; color: #3b2a00; background: linear-gradient(110deg, #fde68a, #fbbf24); }
.official-bar[hidden] { display: none; }
.official-bar .of-tag { font-weight: 800; white-space: nowrap; }
.official-bar .of-body { flex: 1; min-width: 0; }
.official-bar .of-more { font-size: 12px; font-weight: 700; }
.official-bar .of-x { border: 0; background: transparent; color: inherit; font-size: 16px; padding: 4px 6px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.plan-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.plan-card.best { border: 2px solid var(--accent); }
.plan-badge { position: absolute; top: -10px; right: 12px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: var(--accent); }
.plan-price { font-size: 28px; font-weight: 800; }
.plan-price small { font-size: 13px; font-weight: 600; color: var(--muted, #6b7280); }
.plan-card .hint { margin: 0; }
.plus-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.plus-tile { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: inherit; font: inherit; }
.plus-tile .pt-i { font-size: 24px; }
.plus-tile span:last-child { font-size: 13px; opacity: .8; }
.plus-cmp { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pc-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 14px; }
.pc-row:first-child { border-top: 0; }
.pc-row.head { font-weight: 800; background: var(--accent-soft); }
.pc-row span:nth-child(n+2) { text-align: center; }
@media (min-width: 701px) { .sheet .plan-grid, .sheet .plus-tiles { gap: 12px; } }
.plan-was { font-size: 16px; font-weight: 600; opacity: .55; }
.plan-deal { margin: 0; font-size: 13px; font-weight: 700; color: var(--accent); }
.plus-tile.badge { text-align: center; justify-items: center; opacity: .55; }
.plus-tile.badge.on { opacity: 1; border-color: var(--accent); }
@media (max-width: 380px) { .pc-row { grid-template-columns: minmax(0, 1fr) 46px 46px; padding: 8px; font-size: 13px; } .plan-price { font-size: 24px; } }
.promo-row { display: flex; gap: 8px; margin-top: 8px; }
.promo-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.sale-bar { display: flex; gap: 10px; align-items: center; margin: 8px 12px; padding: 10px 12px; border-radius: 14px; color: #fff; background: linear-gradient(110deg, #e11d48, #f97316); box-shadow: 0 6px 18px rgb(225 29 72 / .3); }
.sale-bar[hidden] { display: none; }
.sale-bar .sale-tag { font-weight: 800; white-space: nowrap; }
.sale-bar .sale-body { flex: 1; min-width: 0; }
.sale-bar .sale-code { font-weight: 800; background: rgb(255 255 255 / .22); border-radius: 6px; padding: 0 6px; }
.sale-bar .sale-left { font-variant-numeric: tabular-nums; }
.sale-bar .btn { background: #fff; color: #9f1239; border-color: #fff; }
.sale-bar .of-x { border: 0; background: transparent; color: inherit; font-size: 16px; padding: 4px 6px; }
@media (max-width: 520px) { .sale-bar, .official-bar { flex-wrap: wrap; } .sale-bar .sale-body, .official-bar .of-body { flex-basis: 100%; order: 3; } }
.ft-time { font-size: 56px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.ft-run { text-align: center; justify-items: center; }
.ft-chart { display: flex; gap: 6px; align-items: flex-end; height: 130px; }
.ft-col { flex: 1; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; min-width: 0; }
.ft-track { display: flex; align-items: flex-end; width: 100%; max-width: 28px; }
.ft-bar { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.ft-col small { font-size: 11px; opacity: .75; }
.daily-done { opacity: .65; text-decoration: line-through; }
.heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hm { aspect-ratio: 1; border-radius: 5px; background: var(--accent-soft); }
.hm1 { background: color-mix(in srgb, var(--accent) 35%, var(--accent-soft)); }
.hm2 { background: color-mix(in srgb, var(--accent) 65%, var(--accent-soft)); }
.hm3 { background: var(--accent); }
.trust-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.trust-chip { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: rgb(255 255 255 / .18); border: 1px solid rgb(255 255 255 / .28); white-space: nowrap; }
.trust-link { font-size: 11.5px; font-weight: 700; color: #fff; text-decoration: underline; opacity: .9; }
.tools-toggle { display: none; }
@media (max-width: 700px) {
  .tools-toggle { display: flex; grid-column: 1 / -1; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 14px; font-size: 12px; font-weight: 700; }
  .hdr-actions.tools-closed .chip.tool:not(#quizBtn):not(#labBtn):not(#focusBtn) { display: none; }
}
@media (max-width: 700px) { .trust-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .trust-bar::-webkit-scrollbar { display: none; } }
.welcome { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgb(15 12 40 / .72); backdrop-filter: blur(4px); animation: pop .3s ease-out; }
.welcome-card { position: relative; width: min(420px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; padding: 28px 22px 22px; border-radius: 22px; color: var(--ink); background: var(--paper); box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
.welcome-card h2 { margin: 0; font-size: 22px; }
.welcome-card h3 { margin: 0; font-size: 17px; color: var(--accent); }
.welcome-card p { margin: 0; line-height: 1.55; }
.welcome-icon { font-size: 54px; line-height: 1; }
.welcome-skip { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: inherit; opacity: .7; font-weight: 700; padding: 6px; }
.welcome-dots { display: flex; gap: 6px; margin: 4px 0; }
.welcome-dots span { width: 8px; height: 8px; border-radius: 99px; background: var(--line); }
.welcome-dots span.on { width: 22px; background: var(--accent); }
.welcome .rowbtns { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .welcome { animation: none; } }
.official-bar .of-open { display: grid; gap: 1px; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; padding: 0; min-width: 0; }
.official-bar .of-open strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.official-bar .of-open small { opacity: .8; font-size: 11.5px; }
.today-bar { display: grid; gap: 8px; margin: 8px 12px; padding: 12px 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 6px 18px rgb(79 70 229 / .10); }
.today-bar[hidden] { display: none; }
.today-hello { font-size: 17px; }
.today-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.today-chip { border: 1px solid var(--line); background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; }
.today-chip.warn { border-color: #f59e0b; background: #fef3c7; color: #78350f; }
.today-chip.pulse { animation: pulseGlow 2s ease-in-out infinite; }
@keyframes pulseGlow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .today-chip.pulse { animation: none; } }
@media (max-width: 700px) {
  /* one scrollable row of sections instead of three rows */
  header.top .tabs { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; gap: 6px; }
  header.top .tabs::-webkit-scrollbar { display: none; }
  header.top .tabs button { flex: none; scroll-snap-align: start; padding: 8px 14px; }
  /* Daily Quiz, Study Lab and Focus mode share one row of three tiles */
  .hdr-actions.tools-closed .chip.tool#quizBtn, .hdr-actions.tools-closed .chip.tool#labBtn, .hdr-actions.tools-closed .chip.tool#focusBtn { grid-column: span 2; flex-direction: column; gap: 2px; padding: 8px 4px; font-size: 11px; font-weight: 700; text-align: center; }
  .hdr-actions.tools-closed .chip.tool#labBtn .ci, .hdr-actions.tools-closed .chip.tool#focusBtn .ci { font-size: 19px; }
}
.today-words { opacity: .8; margin-top: -4px; }
.resume-wrap { overflow-x: auto; }
.resume { background: #fff; color: #111; padding: 18px; border: 1px solid #ddd; border-radius: 8px; font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1.45; }
.resume h3 { margin: 0; font-size: 22px; } .resume p { margin: 3px 0; } .resume ul { margin: 3px 0; padding-left: 18px; }
.resume .rs-title { font-weight: 700; } .resume .rs-contact { font-size: 12px; color: #444; }
.resume .rs-sec { margin-top: 10px; } .resume h4 { margin: 0 0 3px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid #111; }
.resume.tpl-modern { font-family: system-ui, "Segoe UI", Arial, sans-serif; border-top: 6px solid #4f46e5; }
.resume.tpl-modern h4 { color: #4f46e5; border-bottom-color: #4f46e5; }
#resumePrint { display: none; }
@media print {
  body.printing-resume > *:not(#resumePrint) { display: none !important; }
  body.printing-resume #resumePrint { display: block !important; }
  body.printing-resume { background: #fff !important; padding: 0 !important; }
  body.printing-resume .resume { border: 0; border-radius: 0; padding: 0; }
  @page { margin: 14mm; }
}
/* ---- Phone layout v2: slim header, one scrolling row of shortcuts, floating Ask button ---- */
@media (max-width: 700px) {
  header.top { padding: 10px 12px 8px; gap: 4px; }
  #tagline { display: none; }
  .brand h1 { font-size: 1.3rem; }
  .trust-bar { margin-top: 4px; }
  header.top .tabs { margin-top: 6px; }
  .tools-toggle { display: none !important; }
  .hdr-actions, .hdr-actions.tools-closed {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px !important; margin-top: 6px;
    scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 2px;
  }
  .hdr-actions::-webkit-scrollbar { display: none; }
  .hdr-actions > *, .hdr-actions.tools-closed > * { grid-column: auto !important; flex: none !important; scroll-snap-align: start; }
  .hdr-actions .chip.tool, .hdr-actions.tools-closed .chip.tool, .hdr-actions.tools-closed .chip.tool#quizBtn, .hdr-actions.tools-closed .chip.tool#labBtn, .hdr-actions.tools-closed .chip.tool#focusBtn,
  .hdr-actions .chip.tool#labBtn, .hdr-actions .chip.tool#focusBtn {
    display: flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; padding: 8px 14px !important; border-radius: 999px !important;
    font-size: 12.5px !important; font-weight: 700 !important; white-space: nowrap; text-align: left !important;
  }
  .hdr-actions .chip.tool .ci { font-size: 16px !important; }
  #nameBtn { max-width: 160px; }
  .hdr-actions .filter-toggle { display: flex !important; padding: 8px 14px !important; border-radius: 999px !important; white-space: nowrap; }
  header.top .btn.primary#askBtn {
    position: fixed !important; right: 14px; bottom: 84px; z-index: 70; grid-column: auto !important;
    padding: 13px 20px !important; font-size: 14px !important; border-radius: 999px !important; box-shadow: 0 10px 28px rgb(79 70 229 / .45);
  }
}
@media (max-width: 700px) { .trust-bar { padding-right: 46px; } .brand { padding-right: 46px; } }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.lb-row.me { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.lb-rank { width: 30px; text-align: center; font-weight: 800; }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ask a doubt is no longer a floating button: it is the first shortcut in the scrolling row. */
@media (max-width: 700px) {
  header.top .btn.primary#askBtn {
    position: static !important; right: auto; bottom: auto; z-index: auto; box-shadow: none; order: -1;
    padding: 8px 16px !important; font-size: 12.5px !important; font-weight: 800; white-space: nowrap;
  }
}
/* ---- Simple home on phones: brand, stories, sections, Today card. Everything else lives in Explore. ---- */
.today-ask { justify-self: start; padding: 10px 18px; font-weight: 800; }
@media (max-width: 700px) {
  .trust-bar { display: none !important; }
  .hdr-actions, .hdr-actions.tools-closed { display: flex !important; overflow: visible; margin-top: 4px; }
  .hdr-actions .chip.tool, .hdr-actions.tools-closed .chip.tool, #nameBtn, header.top .btn.primary#askBtn, .tools-toggle { display: none !important; }
  .hdr-actions .filter-toggle { display: flex !important; }
  header.top { padding-bottom: 10px; }
}
@media (max-width: 700px) {
  .hdr-actions .chip.tool#quizBtn, .hdr-actions .chip.tool#labBtn, .hdr-actions .chip.tool#focusBtn,
  .hdr-actions.tools-closed .chip.tool#quizBtn, .hdr-actions.tools-closed .chip.tool#labBtn, .hdr-actions.tools-closed .chip.tool#focusBtn { display: none !important; }
}
/* Phones: no Filters button in the header (keeps the home screen simple). */
@media (max-width: 700px) {
  .hdr-actions .filter-toggle { display: none !important; }
  .hdr-actions, .hdr-actions.tools-closed { margin: 0 !important; padding: 0 !important; min-height: 0 !important; gap: 0 !important; }
}

/* ======================= Premium finish (v3) =======================
   Calm deep header, glass surfaces, fine borders, soft shadows, press feedback and gentle motion. */
:root { --r-card: 20px; --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); --glass: color-mix(in srgb, var(--sheet) 82%, transparent); }
body { font-family: var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--f-display); letter-spacing: -0.015em; }
header.top {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand-a, var(--g2)) 55%, transparent), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--brand-b, var(--g3)) 38%, transparent), transparent 62%),
    linear-gradient(155deg, #151238 0%, #1e1757 55%, #2a1a63 100%);
  border: 1px solid rgb(255 255 255 / .10);
  box-shadow: 0 22px 44px -24px rgb(20 12 70 / .75), inset 0 1px 0 rgb(255 255 255 / .12);
}
header.top::before { background: rgb(255 255 255 / .10); }
header.top::after { opacity: .30; }
.brand h1 { text-shadow: 0 2px 18px rgb(0 0 0 / .25); }
.tabs button { border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(6px); transition: transform .12s ease, background-color .15s ease; }
.tabs button[aria-selected="true"] { background: #fff; color: #1e1757; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .45); }
.college-btn, #themeBtn, .chip { backdrop-filter: blur(6px); }
/* surfaces */
.item, .learn-card, .plan-card, .plus-tile, .today-bar, .sheet, .lb-row, .notice, .welcome-card { border-radius: var(--r-card); }
.item, .learn-card, .plan-card, .plus-tile, .lb-row { border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: 0 1px 2px rgb(20 20 60 / .05), 0 10px 26px -16px rgb(30 27 75 / .35); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
@media (hover: hover) { .item:hover, .plus-tile:hover, .plan-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 2px 4px rgb(20 20 60 / .06), 0 16px 34px -16px rgb(79 70 229 / .45); } }
.today-bar {
  border: 1px solid transparent;
  background: linear-gradient(var(--sheet), var(--sheet)) padding-box, linear-gradient(130deg, color-mix(in srgb, var(--brand-a, var(--g2)) 70%, transparent), color-mix(in srgb, var(--brand-b, var(--g3)) 25%, transparent) 55%, transparent) border-box;
  box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--brand-a, var(--g2)) 70%, transparent);
}
.today-hello { font-family: var(--f-display); font-size: 20px; letter-spacing: -0.01em; }
.today-chip { border-radius: 999px; transition: transform .12s ease, box-shadow .15s ease; }
/* buttons */
.btn { border-radius: 14px; font-weight: 700; transition: transform .12s ease, box-shadow .2s ease, filter .15s ease; }
.btn:active, .today-chip:active, .tabs button:active, .plus-tile:active, .bnav-btn:active { transform: scale(.97); }
.btn.primary { box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--g2) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .25); }
:focus-visible { outline: none; box-shadow: var(--ring); }
input, select, textarea { border-radius: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
/* bottom bar: floating glass */
@media (max-width: 900px) {
  .bottom-nav { left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 22px; background: var(--glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 18px 40px -16px rgb(20 12 70 / .55); overflow: hidden; }
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); }
  .bnav-btn.active::before { content: ""; position: absolute; top: 4px; width: 46px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); z-index: -1; }
  .bnav-btn.active .bnav-icon { transform: translateY(-1px) scale(1.08); }
  .bnav-icon { transition: transform .18s ease; }
}
/* gentle motion */
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.item, .today-bar, .learn-card { animation: riseIn .35s ease both; }
.skeleton { background: linear-gradient(90deg, var(--grid) 25%, color-mix(in srgb, var(--grid) 60%, var(--sheet)) 50%, var(--grid) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .item, .today-bar, .learn-card, .skeleton { animation: none; } .btn, .item, .plus-tile, .plan-card, .tabs button { transition: none; } }
/* safe areas for installed app */
@supports (padding: max(0px)) { body { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); } }

/* ---- Welcome splash ---- */
.splash { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: #fff;
  background: radial-gradient(90% 70% at 80% 10%, color-mix(in srgb, var(--brand-a, #9333ea) 55%, transparent), transparent 60%), radial-gradient(80% 70% at 10% 100%, color-mix(in srgb, var(--brand-b, #db2777) 40%, transparent), transparent 60%), linear-gradient(155deg, #151238, #1e1757 55%, #2a1a63);
  animation: splashAuto .45s ease 6s forwards; }
.splash-logo-unused { border-radius: 24px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .6); animation: splashPop .7s cubic-bezier(.2, .9, .3, 1.2) both; }
.splash-title { margin: 8px 0 0; font-family: var(--f-display); font-size: clamp(1.7rem, 7vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; animation: riseIn .6s ease .15s both; }
.splash-langs { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fde68a; animation: riseIn .6s ease .35s both; }
.splash-sub { margin: 0; opacity: .85; max-width: 22em; animation: riseIn .6s ease .5s both; }
.splash-tap { margin-top: 18px; opacity: .55; animation: riseIn .6s ease 1s both; }
.splash.splash-out { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
@keyframes splashPop { from { opacity: 0; transform: scale(.7) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes splashAuto { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .splash-logo, .splash-title, .splash-langs, .splash-sub, .splash-tap { animation: none; } }
.today-note { position: relative; padding: 10px 34px 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: 4px solid var(--accent); }
.today-note p { margin: 2px 0 0; }
.today-note .of-x { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; color: inherit; opacity: .7; }
.splash-note { max-width: 24em; margin: 6px 0 0; padding: 10px 14px; border-radius: 14px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .18); font-size: .95rem; animation: riseIn .6s ease .75s both; }
.splash-note small { display: block; margin-top: 4px; color: #fde68a; font-weight: 700; }

/* ---- Loopy, the CampusLoop robot ---- */
.loopy { width: 150px; height: auto; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .45)); animation: splashPop .7s cubic-bezier(.2, .9, .3, 1.2) both; }
.lp-float { animation: lpFloat 3s ease-in-out infinite; transform-origin: 100px 120px; }
.lp-shadow { animation: lpShadow 3s ease-in-out infinite; transform-origin: 100px 212px; }
.lp-wave { transform-origin: 139px 144px; animation: lpWave 1.1s ease-in-out .5s 4; }
.lp-eyes { transform-origin: 100px 88px; animation: lpBlink 4s infinite; }
.lp-ant { animation: lpGlow 1.4s ease-in-out infinite; transform-origin: 100px 24px; }
.splash-bubble { position: relative; min-height: 3.4em; max-width: 22em; margin-top: 4px; padding: 12px 16px; border-radius: 18px; background: #fff; color: #1e1757; font-weight: 600; line-height: 1.4; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .6); animation: riseIn .5s ease .3s both; }
.splash-bubble::before { content: ""; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
@keyframes lpFloat { 50% { transform: translateY(-8px); } }
@keyframes lpShadow { 50% { transform: scaleX(.82); opacity: .15; } }
@keyframes lpWave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }
@keyframes lpBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes lpGlow { 50% { transform: scale(1.35); filter: drop-shadow(0 0 8px #fde047); } }
@media (prefers-reduced-motion: reduce) { .lp-float, .lp-shadow, .lp-wave, .lp-eyes, .lp-ant, .loopy, .splash-bubble { animation: none; } }
.today-hello::before { content: " "; }

/* ---- Today card v2: Loopy, three stat tiles, tidy chip grid ---- */
.today-hello::before { content: none; }
.today-head { display: flex; gap: 12px; align-items: center; }
.today-head > div { display: grid; gap: 2px; min-width: 0; }
.loopy-mini { flex: none; filter: drop-shadow(0 6px 8px rgb(79 70 229 / .35)); animation: lpFloat 3s ease-in-out infinite; }
.today-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.today-stat { display: grid; gap: 2px; justify-items: center; padding: 10px 6px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); color: var(--ink); font: inherit; transition: transform .12s ease; }
.today-stat b { font-family: var(--f-display); font-size: 24px; line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.today-stat span { font-size: 11.5px; font-weight: 700; opacity: .85; text-align: center; }
.today-stat.warn { border-color: #f59e0b; } .today-stat.pulse { animation: pulseGlow 2s ease-in-out infinite; }
.today-stat:active { transform: scale(.97); }
.today-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.today-chip { justify-content: center; text-align: center; padding: 9px 10px; }
.today-ask { width: 100%; justify-self: stretch; padding: 13px 18px; font-size: 16px; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .loopy-mini, .today-stat.pulse { animation: none; } }
.today-chips .today-chip:last-child:nth-child(odd) { grid-column: 1 / -1; } .today-hello { font-size: 18px; }

/* ---- skeleton loading and pull to refresh ---- */
.sk-card { display: grid; gap: 10px; pointer-events: none; }
.sk-line { height: 14px; } .sk-w40 { width: 40%; } .sk-w70 { width: 70%; } .sk-w90 { width: 90%; }
.ptr { position: fixed; top: 0; left: 50%; z-index: 1500; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--sheet); color: var(--ink); border: 1px solid var(--line); font-weight: 700; font-size: 13px;
  box-shadow: 0 10px 24px -10px rgb(20 12 70 / .5); transform: translate(-50%, calc(var(--pull, 0px) - 40px)); transition: transform .15s ease; }
.ptr[hidden] { display: none; }
.ptr-ico { display: inline-block; font-size: 16px; } .ptr.spin .ptr-ico { animation: ptrSpin .8s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.spin .ptr-ico { animation: none; } .ptr { transition: none; } }
.today-tip { position: relative; padding: 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 9%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); }
.today-tip::before { content: ""; position: absolute; top: -7px; left: 26px; width: 14px; height: 14px; background: inherit; border-left: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-top: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); transform: rotate(45deg); border-radius: 3px; }
.today-tip small { font-weight: 800; color: var(--accent); }
.today-tip p { margin: 4px 0 8px; line-height: 1.45; }
.quest { display: grid; gap: 8px; padding: 12px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--sheet)); }
.quest-head { display: flex; justify-content: space-between; align-items: center; }
.quest-step { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); color: var(--ink); font: inherit; }
.quest-step b { flex: 1; } .quest-step i { font-style: normal; color: var(--accent); font-weight: 800; font-size: 13px; }
.quest-step.done { opacity: .6; } .quest-step.done b { text-decoration: line-through; }
.teaser { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, #f59e0b 50%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, #fde68a 35%, var(--sheet)), var(--sheet)); color: var(--ink); font: inherit; animation: pulseGlow 3s ease-in-out infinite; }
.teaser small { font-weight: 800; color: #b45309; } .teaser b { font-family: var(--f-display); line-height: 1.35; } .teaser span { color: var(--accent); font-weight: 800; font-size: 13px; }
.ticker { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font: inherit; font-size: 13px; }
.ticker-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgb(34 197 94 / .6); animation: tickPulse 1.8s infinite; flex: none; }
@keyframes tickPulse { 70% { box-shadow: 0 0 0 8px rgb(34 197 94 / 0); } 100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0); } }
@media (prefers-reduced-motion: reduce) { .teaser, .ticker-dot { animation: none; } }
.boxbtn { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font: inherit; }
.boxbtn small { display: block; opacity: .75; } .boxbtn-ico { font-size: 30px; line-height: 1; }
.boxbtn.fresh { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--sheet)), var(--sheet)); animation: pulseGlow 2.4s ease-in-out infinite; }
.boxbtn.fresh .boxbtn-ico { animation: boxShake 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes boxShake { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 85% { transform: rotate(10deg); } 92% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .boxbtn.fresh, .boxbtn.fresh .boxbtn-ico { animation: none; } }
/* ---- step-by-step welcome ---- */
.ob-card { gap: 14px; }
.ob-bar { display: flex; gap: 6px; width: 100%; margin-top: 8px; } .ob-bar span { flex: 1; height: 5px; border-radius: 99px; background: var(--line); transition: background .3s ease; } .ob-bar span.on { background: var(--grad); }
.ob-step { display: grid; gap: 10px; justify-items: center; width: 100%; animation: obIn .35s ease both; }
.ob-loopy { display: grid; place-items: center; } .ob-loopy .loopy-mini { width: 92px; height: 92px; }
.ob-say { font-size: 15px; } .ob-step input { width: 100%; padding: 13px 16px; border-radius: 16px; text-align: center; font-size: 17px; font-weight: 700; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ob-chip { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; transition: transform .12s ease; }
.ob-chip.on { background: var(--grad); color: #fff; border-color: transparent; transform: scale(1.03); }
.ob-list { text-align: left; display: grid; gap: 8px; padding: 0; list-style: none; margin: 0; } .ob-list li { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); }
.ob-start { display: grid; gap: 8px; width: 100%; } .ob-start .btn { width: 100%; padding: 13px; }
@keyframes obIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-step { animation: none; } }
.ob-bar { margin-top: 22px; }
.splash-go { margin-top: 18px; padding: 13px 34px; border-radius: 999px; font-size: 16px; animation: riseIn .6s ease 1.2s both; }
.splash-tap { display: none; }
/* ---- outstanding touches: confetti and smooth screen changes ---- */
.confetti { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
.sheet.enter > * { animation: sheetIn .32s cubic-bezier(.2, .8, .2, 1) both; }
.sheet.enter > *:nth-child(2) { animation-delay: .04s; } .sheet.enter > *:nth-child(3) { animation-delay: .08s; } .sheet.enter > *:nth-child(4) { animation-delay: .12s; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet.enter > * { animation: none; } }
.ab-list { display: grid; gap: 8px; width: 100%; text-align: left; }
.ab-pillar { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); }
.ab-pillar > span { font-size: 22px; line-height: 1.2; } .ab-pillar b { display: block; } .ab-pillar small { opacity: .8; line-height: 1.35; }
.ab-meta { margin: 0; font-size: 12.5px; opacity: .8; } .ab-meta a { color: var(--accent); font-weight: 700; }
.ob-card { max-height: 92vh; overflow-y: auto; }
.splash[data-live] { animation: none; }
.story-bar[hidden], .today-bar[hidden], .sale-bar[hidden], .official-bar[hidden] { display: none !important; }
/* ---- Premium home hero ---- */
.today-bar { padding: 0; overflow: hidden; gap: 0; }
.today-bar > :not(.today-hero) { margin: 0 14px; } .today-bar > .today-hero + * { margin-top: 14px; } .today-bar > :last-child { margin-bottom: 14px; }
.today-bar { display: grid; gap: 10px; }
.today-hero { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 18px 16px 16px; color: #fff; isolation: isolate;
  background: radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--brand-a, var(--g2)) 60%, transparent), transparent 62%), radial-gradient(90% 90% at 0% 100%, color-mix(in srgb, var(--brand-b, var(--g3)) 45%, transparent), transparent 62%), linear-gradient(155deg, #1b1646, #26196a 60%, #351a6b); }
.today-hero::after { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: rgb(255 255 255 / .08); z-index: -1; }
.hero-loopy .loopy-mini { width: 76px; height: 76px; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .45)); }
.hero-text { display: grid; gap: 2px; min-width: 0; } .hero-kicker { font-weight: 800; letter-spacing: .04em; color: #fde68a; text-transform: uppercase; font-size: 11px; }
.today-hero .today-hello { font-size: 21px; line-height: 1.2; color: #fff; } .today-hero .today-words { color: rgb(255 255 255 / .85); opacity: 1; margin: 0; }
.hero-ask { grid-column: 1 / -1; margin-top: 8px; padding: 13px 18px; border: 0; border-radius: 16px; background: #fff; color: #2a1a63; font: inherit; font-weight: 800; font-size: 16px; box-shadow: 0 12px 24px -10px rgb(0 0 0 / .55); transition: transform .12s ease; }
.hero-ask:active { transform: scale(.98); }
.feed-title { margin: 18px 4px 8px; font-size: 20px; }
.feed-title::after { content: ""; display: block; width: 44px; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--grad); }
/* ---- Launch banner (premium, animated gold border) ---- */
.launch { margin: 12px 12px 0 !important; padding: 2px; border-radius: 22px; background: linear-gradient(120deg, #fde047, #f472b6, #8b7cff, #38bdf8, #fde047); background-size: 300% 100%; animation: borderFlow 5s linear infinite; box-shadow: 0 18px 40px -18px rgb(244 114 182 / .7); }
.launch-in { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 14px 40px 14px 12px; border-radius: 20px; color: #fff; overflow: hidden;
  background: radial-gradient(90% 120% at 100% 0%, rgb(244 114 182 / .35), transparent 60%), linear-gradient(150deg, #1b1646, #2a1a63); }
.launch-in::before, .launch-in::after { content: "✦"; position: absolute; color: #fde68a; opacity: .8; animation: twinkle 2.2s ease-in-out infinite; }
.launch-in::before { top: 8px; right: 54px; font-size: 14px; } .launch-in::after { bottom: 10px; left: 90px; font-size: 11px; animation-delay: 1s; }
.launch-text { display: grid; gap: 2px; min-width: 0; } .launch-text small { color: #fde68a; font-weight: 800; letter-spacing: .05em; font-size: 10.5px; }
.launch-text strong { font-family: var(--f-display); font-size: 19px; line-height: 1.2; } .launch-text span { font-size: 13px; opacity: .9; line-height: 1.35; }
.launch-go { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; } .launch-go b { padding: 5px 12px; border-radius: 999px; background: rgb(255 255 255 / .16); }
.launch-btn { flex: 1; padding: 11px 16px; border: 0; border-radius: 14px; background: linear-gradient(120deg, #fde047, #fb923c); color: #3b1d00; font: inherit; font-weight: 800; box-shadow: 0 10px 20px -10px rgb(251 146 60 / .9); }
.launch-x { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; color: #fff; opacity: .7; font-size: 16px; padding: 6px 8px; }
.launch .loopy-mini { width: 62px; height: 62px; }
@keyframes borderFlow { to { background-position: 300% 0; } } @keyframes twinkle { 50% { transform: scale(1.5) rotate(20deg); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .launch, .launch-in::before, .launch-in::after { animation: none; } }
/* ---- College crest ---- */
.crest { display: inline-grid; place-items: center; vertical-align: middle; border-radius: 28%; flex: none; }
.crest-mono { color: #fff; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(145deg, var(--brand-a, #6d28d9), var(--brand-b, #db2777)); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55), 0 2px 8px rgb(0 0 0 / .25); text-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.crest-img { object-fit: contain; background: #fff; padding: 2px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .6), 0 2px 8px rgb(0 0 0 / .25); }
.college-btn { display: inline-flex; align-items: center; gap: 6px; }
.hero-crest { position: absolute; top: 14px; right: 14px; } .hero-crest .crest { border-radius: 18px; box-shadow: 0 10px 24px -8px rgb(0 0 0 / .6), inset 0 0 0 2px rgb(255 255 255 / .6); }
.today-hero { padding-right: 78px; }
.today-hero .hero-ask { margin-right: -62px; }
.splash-crest { display: grid; place-items: center; gap: 4px; margin-top: 8px; font-weight: 700; opacity: .95; } .splash-crest img { width: 54px; height: 54px; border-radius: 16px; background: #fff; padding: 3px; object-fit: contain; box-shadow: 0 10px 24px -8px rgb(0 0 0 / .6); }
.plus-tile.costume { justify-items: center; text-align: center; } .plus-tile.costume.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); }
.plus-tile.costume.locked .cos-prev { filter: grayscale(1) brightness(.75); opacity: .65; } .plus-tile.costume small { opacity: .8; }
.plus-tile.costume .loopy-mini { animation: none; }
/* ---- Phone header v4: slim, light app bar (the hero carries the big brand moment) ---- */
@media (max-width: 700px) {
  header.top { position: sticky; top: 6px; z-index: 40; padding: 10px 12px 8px; gap: 6px; color: var(--ink); background: color-mix(in srgb, var(--sheet) 90%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid var(--line); box-shadow: 0 12px 28px -18px rgb(30 27 75 / .5); }
  header.top::before, header.top::after { display: none; }
  .brand h1 { font-size: 1.2rem; text-shadow: none; color: var(--ink); } .brand h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  header.top .college-btn, header.top .streak-chip, header.top #themeBtn { background: var(--accent-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); backdrop-filter: none; }
  header.top #themeBtn { top: 8px; right: 10px; padding: 4px 8px; }
  header.top .tabs { margin-top: 2px; }
  header.top .tabs button { background: transparent; color: var(--muted); border: 1px solid transparent; backdrop-filter: none; padding: 7px 13px; }
  header.top .tabs button[aria-selected="true"] { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--g2) 80%, transparent); }
  header.top .st-name { color: var(--ink); } header.top .st-bub { color: var(--ink); }
  .trust-bar { display: none !important; }
}
/* ---- onboarding: choose your college ---- */
.ob-colist { display: grid; gap: 6px; width: 100%; max-height: 34vh; overflow-y: auto; padding: 2px; text-align: left; }
.ob-col { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font: inherit; text-align: left; transition: transform .1s ease, border-color .15s ease; }
.ob-col:active { transform: scale(.98); } .ob-col.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.ob-col .col-text { display: grid; min-width: 0; } .ob-col strong { overflow: hidden; text-overflow: ellipsis; } .ob-col small { opacity: .75; }
.ob-chosen { margin: 0; font-weight: 800; color: var(--accent); min-height: 1.4em; }
.ob-step select { width: 100%; padding: 11px 14px; border-radius: 14px; }
.ob-chosen.shake { animation: obShake .4s ease; } @keyframes obShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* College button on phones: neutral pill, one line, never wider than the bar (long names such as "A.C. College (Andhra Christian College)" get an ellipsis). */
@media (max-width: 700px) {
  body header.top .college-btn, body.tenant header.top .college-btn { display: inline-block; max-width: calc(100% - 64px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--accent-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
}

/* ---- Loopy alive: eye tracking, hop, speech chip ---- */
.loopy-mini .lp-eyes { transform-box: fill-box; transform-origin: center; animation: lpBlink2 4.5s infinite; translate: var(--ex, 0px) var(--ey, 0px); transition: translate .12s ease-out; }
@keyframes lpBlink2 { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .1; } }
.loopy-mini.lp-sleepy .lp-eyes { scale: 1 .35; animation: none; }
.loopy-mini.lp-hop { animation: lpHop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes lpHop { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-14px) scale(1.12) rotate(-6deg); } 70% { transform: translateY(0) scale(.94, 1.06); } 100% { transform: none; } }
.hero-loopy { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.hero-loopy::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgb(167 139 250 / .55), transparent 68%); animation: lpAura 3s ease-in-out infinite; z-index: -1; }
@keyframes lpAura { 50% { transform: scale(1.18); opacity: .55; } }
.hero-say { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; text-align: left; width: 100%; padding: 10px 12px; border: 1px solid rgb(255 255 255 / .22); border-radius: 14px; background: rgb(255 255 255 / .1); backdrop-filter: blur(8px); color: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; }
.hero-say span:nth-child(2) { flex: 1; min-width: 0; } .hero-say b { flex: none; color: #fde68a; font-size: 12px; white-space: nowrap; }
.hero-say-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgb(74 222 128 / .7); animation: lpPing 2s infinite; }
@keyframes lpPing { 70% { box-shadow: 0 0 0 8px rgb(74 222 128 / 0); } 100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0); } }
.hero-say:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .loopy-mini .lp-eyes, .loopy-mini.lp-hop, .hero-loopy::before, .hero-say-dot { animation: none; } }

.logout-block { display: grid; gap: 8px; margin-top: 8px; } .logout-btn { justify-self: start; border-color: #fca5a5; color: #b91c1c; }
.logout-confirm { padding: 12px; border: 1px dashed #fca5a5; border-radius: 14px; background: color-mix(in srgb, #ef4444 7%, var(--sheet)); } .logout-confirm[hidden] { display: none; } .logout-confirm p { margin: 0 0 8px; }
.btn.danger { background: #dc2626; border-color: #dc2626; color: #fff; }

/* ---- Choose your college: premium state picker and search ---- */
.ob-step > select, .ob-step > input[type="search"] {
  width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 16px; font: inherit; font-weight: 700; font-size: 16px; color: #fff; outline: none;
  background: linear-gradient(#171347, #171347) padding-box, linear-gradient(120deg, #6366f1, #a855f7 45%, #f97316) border-box;
  box-shadow: 0 10px 26px -14px rgb(124 58 237 / .8), inset 0 1px 0 rgb(255 255 255 / .08); transition: box-shadow .2s ease, transform .15s ease;
}
.ob-step > select { appearance: none; -webkit-appearance: none; padding-right: 46px; color-scheme: dark;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat, linear-gradient(#171347, #171347) padding-box, linear-gradient(120deg, #6366f1, #a855f7 45%, #f97316) border-box; }
.ob-step > input[type="search"] { padding-left: 46px; padding-right: 10px; font-size: 15px; -webkit-appearance: none; appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2367e8f9' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 16px center / 20px no-repeat, linear-gradient(#171347, #171347) padding-box, linear-gradient(120deg, #22d3ee, #6366f1 45%, #ec4899) border-box; }
.ob-step > input[type="search"]::placeholder { color: #a5b4fc; font-weight: 600; opacity: .9; }
.ob-step > select:focus-visible, .ob-step > input[type="search"]:focus { box-shadow: 0 0 0 4px rgb(139 92 246 / .35), 0 14px 30px -12px rgb(168 85 247 / .9); transform: translateY(-1px); }
.ob-step > input[type="search"]::-webkit-search-cancel-button { filter: invert(1) opacity(.7); }
.ob-step > select option { background: #171347; color: #fff; }
@media (prefers-reduced-motion: reduce) { .ob-step > select, .ob-step > input[type="search"] { transition: none; } }

/* ---- Styled state picker (button + bottom sheet) ---- */
.state-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 16px; font: inherit; font-weight: 800; font-size: 16px; color: #fff; text-align: left; cursor: pointer;
  background: linear-gradient(#171347, #171347) padding-box, linear-gradient(120deg, #6366f1, #a855f7 45%, #f97316) border-box; box-shadow: 0 10px 26px -14px rgb(124 58 237 / .8), inset 0 1px 0 rgb(255 255 255 / .08); }
.state-btn i { font-style: normal; color: #c4b5fd; font-size: 18px; } .state-btn:active { transform: scale(.985); }
.ss-back { position: fixed; inset: 0; z-index: 12000; display: grid; align-items: end; background: rgb(8 6 28 / .6); backdrop-filter: blur(6px); animation: ssFade .2s ease; }
.ss-card { max-height: 82vh; display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 14px; border-radius: 26px 26px 0 0; color: #fff; border: 1px solid rgb(167 139 250 / .35); border-bottom: 0;
  background: radial-gradient(120% 60% at 100% 0%, rgb(168 85 247 / .35), transparent 60%), radial-gradient(90% 60% at 0% 0%, rgb(34 211 238 / .18), transparent 60%), linear-gradient(180deg, #1b1650, #0f0b33); box-shadow: 0 -20px 60px -10px rgb(124 58 237 / .6); animation: ssUp .28s cubic-bezier(.2, .9, .3, 1); max-width: 560px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.ss-grab { width: 44px; height: 5px; border-radius: 9px; background: rgb(255 255 255 / .3); margin: 0 auto; }
.ss-card h3 { margin: 0; text-align: center; font-family: var(--f-display); font-size: 19px; background: linear-gradient(90deg, #e879f9, #67e8f9, #fde68a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ss-card input[type="search"] { min-height: 46px; padding: 0 14px 0 44px; border-radius: 14px; border: 1.5px solid transparent; color: #fff; font: inherit; font-weight: 700; outline: none; -webkit-appearance: none; appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2367e8f9' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center / 20px no-repeat, linear-gradient(#120e3d, #120e3d) padding-box, linear-gradient(120deg, #22d3ee, #6366f1 50%, #ec4899) border-box; }
.ss-card input[type="search"]::placeholder { color: #a5b4fc; }
.ss-list { overflow-y: auto; display: grid; gap: 6px; padding-right: 2px; -webkit-overflow-scrolling: touch; }
.ss-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; border: 1px solid rgb(167 139 250 / .2); border-radius: 14px; background: rgb(255 255 255 / .05); color: #eef2ff; font: inherit; font-weight: 700; font-size: 15.5px; text-align: left; transition: background .15s, transform .1s; }
.ss-opt span { flex: 1; min-width: 0; } .ss-opt small { padding: 2px 9px; border-radius: 99px; background: rgb(255 255 255 / .1); color: #c7d2fe; font-weight: 800; font-size: 12px; } .ss-opt i { width: 22px; font-style: normal; font-weight: 900; color: #fde68a; text-align: center; }
.ss-opt:active { transform: scale(.985); background: rgb(167 139 250 / .2); }
.ss-opt.on { border-color: transparent; background: linear-gradient(120deg, rgb(99 102 241 / .55), rgb(168 85 247 / .55) 55%, rgb(249 115 22 / .45)); box-shadow: 0 10px 24px -14px rgb(168 85 247 / .9); color: #fff; }
.ss-close { align-self: center; background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .25); }
@keyframes ssFade { from { opacity: 0; } } @keyframes ssUp { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ss-back, .ss-card { animation: none; } }

/* Close button on the home card, and the slim "show again" pill */
.today-close { position: absolute; top: 10px; left: 10px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / .28); border-radius: 50%; background: rgb(0 0 0 / .28); color: #fff; font: inherit; font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); }
.today-close:hover { background: rgb(0 0 0 / .45); } .today-close:active { transform: scale(.92); }
.today-hero { padding-top: 54px; }
.today-reopen { justify-self: center; margin: 6px 14px; padding: 9px 18px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 99px; background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); color: var(--ink); font: inherit; font-weight: 700; font-size: 13.5px; }
.today-bar:has(> .today-reopen) { background: none; border: 0; box-shadow: none; padding: 0; }

/* ---- College reveal: premium brand card ---- */
.cr { position: fixed; inset: 0; z-index: 13000; display: grid; place-items: center; padding: 16px; background: rgb(8 6 28 / .78); backdrop-filter: blur(8px); animation: ssFade .25s ease; }
.cr.out { opacity: 0; transition: opacity .25s ease; }
.cr-card { width: min(100%, 420px); border-radius: 30px; overflow: hidden; background: #fff; color: #1b1646; box-shadow: 0 40px 90px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .12); animation: crPop .5s cubic-bezier(.2, .9, .3, 1.15) both; }
@media (prefers-color-scheme: dark) { .cr-card { background: #14103f; color: #fff; } }
.cr-art { position: relative; height: 250px; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 80% at 85% 0%, color-mix(in srgb, var(--c2) 80%, #fff 0%), transparent 60%), radial-gradient(80% 90% at 0% 100%, color-mix(in srgb, var(--c1) 90%, #000 0%), transparent 65%), linear-gradient(150deg, var(--c1), color-mix(in srgb, var(--c2) 55%, #1b1646)); }
.cr-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgb(255 255 255 / .16) 1.2px, transparent 1.3px) 0 0 / 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 75%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); z-index: -1; }
.cr-orb { position: absolute; border-radius: 50%; background: rgb(255 255 255 / .16); filter: blur(1px); animation: crFloat 7s ease-in-out infinite; }
.cr-orb.a { width: 120px; height: 120px; left: -30px; top: -30px; } .cr-orb.b { width: 70px; height: 70px; right: 24px; top: 40px; animation-delay: -2s; } .cr-orb.c { width: 46px; height: 46px; left: 40px; bottom: 70px; animation-delay: -4s; }
.cr-sky { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; z-index: 0; }
.cr-ring { position: relative; z-index: 1; margin-top: 18px; width: 134px; height: 134px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(from 0deg, rgb(255 255 255 / .9), rgb(255 255 255 / .2), rgb(255 255 255 / .9)); padding: 4px; box-shadow: 0 20px 44px -12px rgb(0 0 0 / .6); animation: crSpin 14s linear infinite; }
.cr-crest { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, rgb(255 255 255 / .96), rgb(255 255 255 / .8)); color: var(--c1); animation: crSpin 14s linear infinite reverse; }
.cr-crest .crest { width: 92px !important; height: 92px !important; font-size: 28px !important; background: none !important; color: var(--c1) !important; border: 0 !important; box-shadow: none !important; }
.cr-crest .crest-img { object-fit: contain; border-radius: 50%; }
.cr-chip { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 99px; background: rgb(0 0 0 / .28); color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); }
.cr-body { padding: 20px 22px 24px; display: grid; gap: 8px; text-align: center; }
.cr-body h2 { margin: 0; font-family: var(--f-display); font-size: 34px; line-height: 1.05; letter-spacing: -.01em; background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cr-full { margin: 0; font-weight: 700; font-size: 14.5px; opacity: .85; } .cr-place { margin: 0; font-size: 13px; opacity: .65; }
.cr-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 6px; }
.cr-stats span { padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--c1) 12%, transparent); font-weight: 700; font-size: 12.5px; }
.cr-go { width: 100%; padding: 15px 18px; font-size: 16px; border-radius: 16px; background: linear-gradient(120deg, var(--c1), var(--c2)); border: 0; color: #fff; box-shadow: 0 16px 30px -14px var(--c1); }
@keyframes crPop { from { opacity: 0; transform: translateY(30px) scale(.94); } } @keyframes crSpin { to { transform: rotate(360deg); } } @keyframes crFloat { 50% { transform: translate(8px, 10px); } }
@media (prefers-reduced-motion: reduce) { .cr-card, .cr-ring, .cr-crest, .cr-orb, .cr { animation: none; } }
.cr-mono { font-family: var(--f-display); font-weight: 900; font-size: 34px; letter-spacing: -.02em; background: linear-gradient(135deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cr-disc { margin: 2px 0 6px; font-size: 11.5px; opacity: .6; }
.cr-acr { display: grid; justify-items: center; line-height: 1; font-size: 26px; } .cr-acr b { font: inherit; display: block; } .cr-acr .sub { font-size: 20px; letter-spacing: .12em; margin-top: 4px; }

/* ---- Rich campus cards ---- */
.campus-pick-btn.rich { display: grid; gap: 6px; justify-items: center; padding: 18px 14px 16px; text-align: center; position: relative; overflow: hidden; }
.campus-pick-btn.rich::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 70px; background: linear-gradient(135deg, var(--cc), color-mix(in srgb, var(--cc) 40%, #fff)); opacity: .22; }
.campus-pick-btn.rich > * { position: relative; }
.cp-meta { font-size: 12.5px; opacity: .75; font-weight: 600; }
.cp-brs { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } .cp-brs i { font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--cc) 16%, transparent); color: var(--cc); }
.cp-live { font-size: 12px; font-weight: 700; opacity: .8; }
.cp-go { margin-top: 4px; padding: 8px 16px; border-radius: 99px; background: var(--cc); color: #fff; font-weight: 800; font-size: 13.5px; box-shadow: 0 10px 20px -10px var(--cc); }

/* ---- Tab guide: purpose, three steps, next step ---- */
.guide-card { position: relative; display: grid; gap: 10px; margin: 0 0 12px; padding: 14px 14px 14px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, var(--sheet)), var(--sheet)); box-shadow: 0 14px 30px -22px var(--accent); }
.guide-card.mini { padding: 0; border: 0; background: none; box-shadow: none; margin-bottom: 6px; }
.guide-reopen { padding: 6px 12px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 99px; background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: 12.5px; opacity: .8; }
.guide-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--sheet); color: var(--ink); font: inherit; font-weight: 800; font-size: 13px; }
.guide-head { display: flex; gap: 12px; align-items: center; padding-right: 34px; } .guide-head small { display: block; font-size: 10.5px; letter-spacing: .12em; font-weight: 800; color: var(--accent); } .guide-head strong { font-size: 15px; line-height: 1.3; }
.guide-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; border-radius: 14px; background: var(--grad); box-shadow: 0 10px 18px -10px var(--accent); }
.guide-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: gs; display: grid; gap: 7px; }
.guide-steps li { counter-increment: gs; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.guide-steps li::before { content: counter(gs); flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 900; font-size: 12px; }
.hw-list { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 10px; text-align: left; }
.hw-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.hw-list li.done { opacity: .6; } .hw-list li > div { display: grid; gap: 3px; justify-items: start; } .hw-list small { opacity: .8; }
.hw-tick { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 900; font-size: 13px; }
.hw-list li.done .hw-tick { background: #16a34a; }
.welcome-card.hw { max-height: 88vh; overflow-y: auto; }

/* ---- Audience and other colleges ---- */
.aud-box { display: grid; gap: 8px; margin: 4px 0; padding: 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--sheet)); }
.aud-opts { display: grid; gap: 8px; } .aud-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--sheet); cursor: pointer; }
.aud-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--sheet)); box-shadow: 0 10px 22px -16px var(--accent); }
.aud-opt input { margin-top: 4px; accent-color: var(--accent); } .aud-txt { display: grid; gap: 2px; } .aud-txt b { font-size: 14.5px; } .aud-txt small { opacity: .75; font-size: 12.5px; line-height: 1.35; }
.aud-net summary { cursor: pointer; font-weight: 800; font-size: 14px; padding: 6px 0; } .aud-net[open] summary { margin-bottom: 4px; }
.aud-results { display: grid; gap: 6px; margin-top: 6px; } .aud-res { display: flex; justify-content: space-between; gap: 8px; align-items: center; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); color: var(--ink); font: inherit; } .aud-res small { opacity: .65; }
.aud-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .aud-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 99px; background: var(--grad); color: #fff; font-weight: 800; font-size: 13px; } .aud-chip button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .25); color: #fff; font-size: 11px; }
.via-pill { background: color-mix(in srgb, #0ea5e9 18%, transparent); color: #0369a1; font-weight: 800; }
.via-banner { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #0ea5e9 12%, var(--sheet)); border: 1px solid color-mix(in srgb, #0ea5e9 35%, var(--line)); font-weight: 700; font-size: 13.5px; }
.x-ans { display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 1px dashed color-mix(in srgb, #0ea5e9 45%, var(--line)); background: color-mix(in srgb, #0ea5e9 6%, var(--sheet)); } .ans.x { border-left: 4px solid #0ea5e9; }
.aud-opt input[type="radio"] { width: 18px; height: 18px; min-width: 18px; flex: none; margin: 3px 0 0; padding: 0; } .aud-opt { font-weight: 400; }
.aud-box .label { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 800; }

/* ---- Interest chips: a colour for each ---- */
.ob-chips { gap: 10px; }
.ob-chip { --c1: #6366f1; --c2: #a855f7; padding: 12px 18px; font-size: 15px; border: 1.5px solid color-mix(in srgb, var(--c1) 55%, transparent); background: color-mix(in srgb, var(--c1) 12%, var(--sheet)); color: var(--ink); }
.ob-chip[data-k="doubts"] { --c1: #6366f1; --c2: #a855f7; } .ob-chip[data-k="exams"] { --c1: #f59e0b; --c2: #ef4444; } .ob-chip[data-k="placements"] { --c1: #10b981; --c2: #0ea5e9; }
.ob-chip[data-k="friends"] { --c1: #ec4899; --c2: #f43f5e; } .ob-chip[data-k="explore"] { --c1: #06b6d4; --c2: #3b82f6; }
.ob-chip.on { background: linear-gradient(120deg, var(--c1), var(--c2)); border-color: transparent; color: #fff; box-shadow: 0 12px 24px -12px var(--c1); }
.ob-chip.on::after { content: " \2713"; font-weight: 900; }

/* Welcome steps: the buttons stay in view at the bottom of the card, even on short phone screens */
.welcome { align-items: center; }
.ob-card { max-height: 92vh; max-height: 92dvh; }
.ob-card > .rowbtns { position: sticky; bottom: -22px; z-index: 3; width: 100%; justify-content: center; padding: 14px 0 22px; margin-bottom: -22px; background: linear-gradient(to bottom, transparent, var(--paper) 38%); }
.ob-colist { max-height: 30vh; max-height: 30dvh; }
.ob-card > .rowbtns { flex-wrap: nowrap; gap: 8px; padding-left: 4px; padding-right: 4px; box-sizing: border-box; } .ob-card > .rowbtns .btn { white-space: nowrap; } .ob-card > .rowbtns .btn.primary { flex: 1 1 auto; max-width: 280px; padding-left: 12px; padding-right: 12px; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }

/* Welcome card: header and buttons stay put; only the middle part scrolls, so nothing is covered */
.ob-card { display: flex; flex-direction: column; align-items: stretch; overflow: hidden; gap: 10px; }
.ob-card > .welcome-skip, .ob-card > .ob-bar, .ob-card > .ob-progress { flex: none; }
.ob-card > .ob-step { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 2px 14px; mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
.ob-card > .rowbtns { position: static; flex: none; margin: 0; padding: 4px 0 0; background: none; }

/* ---- Feel: instant taps, soft press, smoother long lists ---- */
button, .btn, .chip, .item, .subj-chip, .dept-tab, .campus-chip, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:not(:disabled):active, .btn:not(:disabled):active, .chip:active, .subj-chip:active, .dept-tab:active, .campus-chip:active { transform: scale(.97); transition: transform .08s ease; }
.item { content-visibility: auto; contain-intrinsic-size: auto 130px; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } button:active { transform: none !important; } }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, #fff); outline-offset: 2px; }

.ob-scrollhint { flex: none; margin: 0; text-align: center; font-weight: 800; font-size: 13px; color: var(--accent); animation: obNudge 1.4s ease-in-out infinite; }
.btn.locked, .btn:disabled.primary { opacity: .45; filter: saturate(.5); box-shadow: none; cursor: not-allowed; }
@keyframes obNudge { 50% { transform: translateY(3px); } } @media (prefers-reduced-motion: reduce) { .ob-scrollhint { animation: none; } }

/* ---- Welcome card while the keyboard is open ---- */
.welcome { height: var(--vvh, 100%); min-height: 0; top: 0; bottom: auto; }
.welcome.kb { padding: 8px; align-items: start; }
.welcome.kb .ob-card { max-height: calc(var(--vvh, 100dvh) - 16px); padding: 12px 16px 10px; gap: 8px; }
.welcome.kb .ob-card > .ob-step > h2, .welcome.kb .ob-card > .ob-step > .ob-say, .welcome.kb .ob-card > .ob-step > .ob-loopy { display: none; }
.welcome.kb .ob-card > .ob-bar { margin: 0; }
.welcome.kb .ob-colist { max-height: none; }
.welcome.kb .ob-card > .ob-step { padding-bottom: 6px; }
.welcome.kb .welcome-skip { display: none; }
.welcome.kb .ob-card > .ob-step > .state-btn { min-height: 44px; }
.welcome.kb .ob-card > .ob-step > input[type="search"] { min-height: 46px; }

/* Keyboard open: keep the overlay full screen and lift the card above the keyboard */
.welcome { height: auto; top: 0; bottom: 0; padding-bottom: calc(16px + var(--kbh, 0px)); }
.welcome .ob-card { max-height: calc(100vh - 32px - var(--kbh, 0px)); max-height: calc(100dvh - 32px - var(--kbh, 0px)); }
.welcome.kb { padding-top: 8px; padding-bottom: calc(8px + var(--kbh, 0px)); }
.welcome.kb .ob-card { max-height: calc(100vh - 16px - var(--kbh, 0px)); max-height: calc(100dvh - 16px - var(--kbh, 0px)); }
/* Feel: colleges slide in one by one, the chosen one pops and shows a tick */
.ob-col { animation: colIn .32s cubic-bezier(.2, .9, .3, 1.1) both; } .ob-col:nth-child(2) { animation-delay: 40ms; } .ob-col:nth-child(3) { animation-delay: 80ms; } .ob-col:nth-child(4) { animation-delay: 120ms; } .ob-col:nth-child(n+5) { animation-delay: 150ms; }
.ob-col.on { animation: colPop .38s cubic-bezier(.2, 1.4, .4, 1); position: relative; }
.ob-col.on::after { content: "\2713"; position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 900; font-size: 14px; box-shadow: 0 8px 16px -8px var(--accent); }
.ob-chosen { padding: 8px 14px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 800; }
@keyframes colIn { from { opacity: 0; transform: translateY(10px); } } @keyframes colPop { 40% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .ob-col, .ob-col.on { animation: none; } }

/* ---- A few kind words before asking for a name ---- */
.ob-heart { width: 100%; text-align: left; display: grid; gap: 9px; padding: 14px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, #ec4899 35%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, #ec4899 12%, transparent), color-mix(in srgb, #6366f1 10%, transparent)); box-shadow: 0 16px 34px -24px #ec4899; }
.ob-heart .hl { margin: 0; font-size: 14.5px; line-height: 1.5; opacity: 0; transform: translateY(8px); animation: heartIn .6s ease forwards; }
.ob-heart .hl.lead { font-weight: 800; font-size: 16px; background: linear-gradient(90deg, #f472b6, #a78bfa, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-heart .hl:nth-child(1) { animation-delay: .1s; } .ob-heart .hl:nth-child(2) { animation-delay: .9s; } .ob-heart .hl:nth-child(3) { animation-delay: 1.9s; font-weight: 800; }
.ob-heart .hl:nth-child(4) { animation-delay: 2.6s; } .ob-heart .hl.sign { animation-delay: 3.6s; font-weight: 700; opacity: 0; font-style: italic; }
@keyframes heartIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-heart .hl { animation: none; opacity: 1; transform: none; } }
.welcome.kb .ob-card > .ob-step > .ob-heart { display: none; }
.ob-step > input[type="text"] { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 16px; font: inherit; font-weight: 700; font-size: 17px; color: #fff; text-align: center; outline: none; -webkit-appearance: none; appearance: none;
  background: linear-gradient(#171347, #171347) padding-box, linear-gradient(120deg, #f472b6, #a855f7 50%, #22d3ee) border-box; box-shadow: 0 10px 26px -14px rgb(168 85 247 / .8); transition: box-shadow .2s ease; }
.ob-step > input[type="text"]::placeholder { color: #a5b4fc; font-weight: 600; } .ob-step > input[type="text"]:focus { box-shadow: 0 0 0 4px rgb(168 85 247 / .3), 0 14px 30px -12px rgb(168 85 247 / .9); }

/* ---- Send to: segmented control and campus chips ---- */
.aud-segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--line)); }
.aud-seg { position: relative; display: block; cursor: pointer; } .aud-seg input { position: absolute; opacity: 0; pointer-events: none; }
.aud-seg span { display: grid; justify-items: center; gap: 2px; padding: 9px 4px; border-radius: 12px; font-weight: 800; font-size: 12.5px; text-align: center; transition: background .18s, color .18s, transform .12s, box-shadow .18s; }
.aud-seg b { font-size: 18px; line-height: 1; } .aud-seg i { font-style: normal; }
.aud-seg input:checked + span { background: var(--grad); color: #fff; box-shadow: 0 10px 20px -10px var(--accent); transform: translateY(-1px); }
.aud-seg input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 70%, #fff); outline-offset: 2px; }
.aud-camps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; animation: obIn .25s ease both; } .aud-camps[hidden] { display: none; }
.aud-camp { position: relative; display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--cc) 45%, var(--line)); background: color-mix(in srgb, var(--cc) 8%, var(--sheet)); color: var(--ink); font: inherit; font-weight: 800; font-size: 14px; text-align: left; transition: transform .1s, box-shadow .2s, background .2s; }
.aud-camp .ac-ic { font-size: 18px; } .aud-camp .ac-nm { flex: 1; } .aud-camp .ac-ck { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--cc); color: #fff; font-size: 12px; font-weight: 900; transform: scale(0); transition: transform .2s cubic-bezier(.2, 1.5, .4, 1); }
.aud-camp.on { background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 24%, var(--sheet)), color-mix(in srgb, var(--cc) 10%, var(--sheet))); border-color: var(--cc); box-shadow: 0 12px 22px -14px var(--cc); } .aud-camp.on .ac-ck { transform: scale(1); }
.aud-sum { margin: 0; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 700; font-size: 13px; line-height: 1.35; }

/* Welcome card sized to the visible screen on every phone */
.welcome { padding: calc(12px + var(--vvt, 0px)) 12px calc(12px + var(--vvb, 0px)); }
.welcome .ob-card { max-height: calc(var(--vvh, 100dvh) - 24px); }
.welcome.kb { padding: calc(8px + var(--vvt, 0px)) 8px calc(8px + var(--vvb, 0px)); } .welcome.kb .ob-card { max-height: calc(var(--vvh, 100dvh) - 16px); }
/* ---- Interactive college finder ---- */
.ob-types { display: flex; gap: 6px; overflow-x: auto; width: 100%; padding: 2px 0 4px; scrollbar-width: none; } .ob-types::-webkit-scrollbar { display: none; }
.ob-type { flex: none; padding: 7px 13px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); color: var(--ink); font: inherit; font-weight: 800; font-size: 12.5px; transition: background .15s, transform .1s; }
.ob-type.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 16px -10px var(--accent); } .ob-type:active { transform: scale(.95); }
.ob-count { margin: 0; width: 100%; text-align: left; font-size: 12px; font-weight: 700; opacity: .65; }
.ob-col mark { background: color-mix(in srgb, #fde047 55%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.col-peek { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; animation: obIn .3s ease both; } .col-peek i { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ob-last { width: 100%; padding: 11px 14px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); font: inherit; font-weight: 800; font-size: 14px; text-align: left; }
.ob-col:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, #fff); outline-offset: 2px; }
.welcome.kb .ob-types, .welcome.kb .ob-count { display: none; }
.ob-step > input[type="search"] { text-align: left; }

.update-bar { position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 14000; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 16px; color: #fff; font-weight: 800; font-size: 14px; background: linear-gradient(120deg, #4f46e5, #c026d3 60%, #f97316); box-shadow: 0 18px 40px -12px rgb(0 0 0 / .6); animation: ssUp .3s ease; }
.update-bar span { flex: 1; } .update-bar button { padding: 8px 14px; border: 0; border-radius: 99px; background: #fff; color: #3b0764; font: inherit; font-weight: 900; font-size: 13px; } .update-bar .x { width: 30px; height: 30px; padding: 0; background: rgb(255 255 255 / .22); color: #fff; }

/* ================= Welcome screen, model 2: one big promise ================= */
.splash.sp2 { justify-content: space-between; gap: 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); text-align: left; overflow: hidden; isolation: isolate;
  background: radial-gradient(110% 70% at 100% 0%, rgb(249 115 22 / .75), transparent 60%), radial-gradient(100% 65% at 0% 100%, rgb(236 72 153 / .7), transparent 62%), radial-gradient(80% 50% at 50% 45%, rgb(99 102 241 / .45), transparent 70%), #150f4d; }
.sp2-bg i { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; z-index: -1; animation: sp2Drift 9s ease-in-out infinite; transform: translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px)); }
.sp2-bg .b1 { width: 220px; height: 220px; right: -70px; top: 80px; background: radial-gradient(circle, rgb(253 224 71 / .5), transparent 70%); }
.sp2-bg .b2 { width: 260px; height: 260px; left: -90px; bottom: 120px; background: radial-gradient(circle, rgb(34 211 238 / .4), transparent 70%); animation-delay: -3s; }
.sp2-bg .b3 { width: 150px; height: 150px; left: 40%; top: 30%; background: radial-gradient(circle, rgb(244 114 182 / .4), transparent 70%); animation-delay: -6s; }
.sp2-main { display: grid; gap: 12px; width: 100%; max-width: 30em; margin: 0 auto; padding-top: max(8px, 3vh); }
.sp2-kicker { font-weight: 800; letter-spacing: .22em; font-size: 12px; color: #fde68a; animation: riseIn .5s ease both; }
.sp2-h { margin: 0; font-size: clamp(2.1rem, 9.5vw, 3.2rem); line-height: 1.04; letter-spacing: -.025em; font-weight: 900; text-align: left; }
.sp2-h span { background: linear-gradient(90deg, #fde68a, #f9a8d4 55%, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp2-sub { margin: 0; max-width: 24em; font-size: 15.5px; line-height: 1.45; opacity: .92; min-height: 3em; }
.sp2-sub.swap { animation: sp2Swap .4s ease both; }
.sp2-crest-slot:empty { display: none; } .sp2-crest-slot .splash-crest { justify-content: flex-start; margin: 4px 0 0; }
.sp2-chips { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 30em; margin: 0 auto; justify-content: flex-start; }
.sp2-chip { --d: 0s; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; border: 1px solid rgb(255 255 255 / .28); background: rgb(255 255 255 / .14); backdrop-filter: blur(8px); color: #fff; font: inherit; font-weight: 800; font-size: 14px; box-shadow: 0 14px 26px -16px rgb(0 0 0 / .8);
  animation: sp2Float 5s ease-in-out infinite; animation-delay: var(--d); transform: translate(calc(var(--px, 0) * var(--k, 6px)), calc(var(--py, 0) * var(--k, 6px))); transition: background .2s; }
.sp2-chip b { font-size: 18px; } .sp2-chip:active, .sp2-chip.pop { background: rgb(255 255 255 / .3); }
.sp2-chip.pop { animation: sp2Pop .45s cubic-bezier(.2, 1.5, .4, 1), sp2Float 5s ease-in-out infinite; }
.sp2-chip.c1 { --d: -.2s; --k: 9px; } .sp2-chip.c2 { --d: -1.1s; --k: 5px; margin-top: 8px; } .sp2-chip.c3 { --d: -2s; --k: 11px; } .sp2-chip.c4 { --d: -2.8s; --k: 6px; margin-top: 8px; } .sp2-chip.c5 { --d: -3.6s; --k: 10px; } .sp2-chip.c6 { --d: -4.3s; --k: 7px; margin-top: 8px; }
.sp2-guide { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 30em; margin: 0 auto; }
.sp2-guide .loopy { flex: none; width: 82px; height: auto; animation: none; }
.sp2-bubble { margin: 0; flex: 1; min-height: 0; padding: 10px 12px; font-size: 13px; line-height: 1.35; border-radius: 16px 16px 16px 4px; animation: none; }
.sp2-bubble::before { top: auto; bottom: 14px; left: -6px; transform: rotate(45deg); }
.sp2-go { width: 100%; max-width: 30em; margin: 12px auto 0; padding: 15px 22px; font-size: 17px; border-radius: 18px; box-shadow: 0 18px 36px -14px rgb(217 70 239 / .8); }
@keyframes sp2Float { 50% { translate: 0 -7px; } } @keyframes sp2Drift { 50% { translate: 20px 18px; } } @keyframes sp2Pop { 40% { scale: 1.12; } } @keyframes sp2Swap { from { opacity: 0; translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .sp2-chip, .sp2-bg i { animation: none; transform: none; } }
@media (max-height: 640px) { .sp2-h { font-size: clamp(1.8rem, 8vw, 2.5rem); } .sp2-chips .c5, .sp2-chips .c6 { display: none; } .sp2-guide .loopy { width: 64px; } }

/* ---- Fast subject switching ---- */
.list.filtering { opacity: .55; transition: opacity .12s ease; pointer-events: none; } .list { transition: opacity .18s ease; }
.subj-chip { transition: transform .1s ease, box-shadow .15s ease, background .15s ease; } .subj-chip.active { transform: translateY(-1px); }
.more-btn { display: block; width: 100%; margin: 10px 0 4px; padding: 13px; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--ink); font: inherit; font-weight: 800; font-size: 14px; }

/* ---- Chosen college preview card (replaces the list once a college is picked) ---- */
.ob-pick { --c1: #6366f1; --c2: #ec4899; width: 100%; display: grid; gap: 12px; padding: 16px; border-radius: 22px; text-align: left; border: 1.5px solid transparent; animation: pkPop .45s cubic-bezier(.2, 1.2, .4, 1) both;
  background: linear-gradient(color-mix(in srgb, var(--c1) 14%, #12102f), color-mix(in srgb, var(--c2) 10%, #12102f)) padding-box, linear-gradient(135deg, var(--c1), var(--c2)) border-box; box-shadow: 0 22px 44px -22px var(--c1); }
.ob-pick[hidden] { display: none; }
.pk-top { display: flex; gap: 12px; align-items: center; } .pk-top .col-badge { flex: none; width: 56px; height: 56px; font-size: 18px; border-radius: 16px; }
.pk-name { display: grid; gap: 2px; min-width: 0; } .pk-name small { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; opacity: .7; } .pk-name strong { font-size: 22px; line-height: 1.1; color: #fff; } .pk-name span { font-size: 12.5px; opacity: .75; line-height: 1.35; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pk-chips i { font-style: normal; font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 99px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); color: #fff; animation: pkChip .4s ease both; } .pk-chips i:nth-child(2) { animation-delay: .06s; } .pk-chips i:nth-child(3) { animation-delay: .12s; } .pk-chips i:nth-child(4) { animation-delay: .18s; }
.pk-line { margin: 0; font-size: 13.5px; line-height: 1.45; opacity: .85; }
.pk-change { justify-self: start; padding: 9px 16px; border-radius: 99px; border: 1.5px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .08); color: #fff; font: inherit; font-weight: 800; font-size: 13.5px; }
@keyframes pkPop { from { opacity: 0; transform: translateY(14px) scale(.96); } } @keyframes pkChip { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ob-pick, .pk-chips i { animation: none; } }
.ob-step [hidden], .ob-step > [hidden] { display: none !important; }

/* ---- College step: the list takes every spare pixel, and the extras give way on small screens ---- */
.ob-card:has(.ob-s-college) { height: calc(var(--vvh, 100dvh) - 24px); }
.welcome.kb .ob-card:has(.ob-s-college) { height: calc(var(--vvh, 100dvh) - 16px); }
.ob-card > .ob-step.ob-s-college { display: flex; flex-direction: column; align-items: stretch; gap: 8px; overflow: hidden; -webkit-mask-image: none; mask-image: none; padding-bottom: 4px; }
.ob-s-college > * { flex: none; }
.ob-s-college > .ob-colist { flex: 1 1 auto; min-height: 96px; max-height: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ob-s-college > .ob-pick { flex: 1 1 auto; overflow-y: auto; align-content: start; }
.ob-s-college > h2 { font-size: 24px; margin: 0; } .ob-s-college > .ob-chosen { align-self: center; padding: 6px 14px; }
.ob-s-college > .state-btn { min-height: 46px; } .ob-s-college > input[type="search"] { min-height: 46px; }
.ob-s-college .ob-types { padding-bottom: 2px; }
@media (max-height: 820px) { .ob-s-college > .ob-say { display: none; } .ob-s-college > h2 { font-size: 21px; } .ob-s-college > .ob-count { display: none; } .ob-card { padding-top: 16px; } }
@media (max-height: 640px) { .ob-s-college .ob-types { display: none; } .ob-s-college > .state-btn, .ob-s-college > input[type="search"] { min-height: 42px; } }
.ob-card > .welcome-skip { position: static; align-self: flex-end; margin: 0 0 -4px; padding: 2px 4px; }

/* Keyboard open: keep the title and Skip visible, only the long intro text steps aside */
.welcome.kb .ob-card > .ob-step > h2 { display: block; font-size: 18px; line-height: 1.2; margin: 0; }
.welcome.kb .welcome-skip { display: block; margin-bottom: -6px; }
.welcome.kb .ob-card > .ob-step.ob-s-college { gap: 6px; }
.welcome.kb .ob-s-college > .state-btn, .welcome.kb .ob-s-college > input[type="search"] { min-height: 40px; font-size: 15px; }

/* ---- A to Z jump strip: pick a college without opening the keyboard ---- */
.ob-letters { display: flex; gap: 5px; overflow-x: auto; width: 100%; padding: 2px 0 4px; scrollbar-width: none; } .ob-letters::-webkit-scrollbar { display: none; } .ob-letters[hidden] { display: none; }
.ob-let { flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); color: var(--ink); font: inherit; font-weight: 800; font-size: 14px; transition: transform .1s, background .15s; }
.ob-let.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 16px -10px var(--accent); transform: translateY(-1px); } .ob-let:active { transform: scale(.92); }
@media (max-height: 640px) { .ob-s-college .ob-letters { display: flex; } }

/* New-posts notice: a calm pill instead of a loud banner */
.new-toast:not([hidden]) { top: 12px; padding: 9px 16px 9px 14px; border-radius: 99px; background: rgb(24 20 66 / .94); color: #fff; font-weight: 700; font-size: 13px; border: 1px solid rgb(167 139 250 / .5); box-shadow: 0 14px 30px -12px rgb(0 0 0 / .7); backdrop-filter: blur(8px); display: flex; align-items: center; gap: 8px; }
.new-toast:not([hidden])::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgb(74 222 128 / .7); animation: lpPing 2s infinite; }
.aud-line { margin: 0; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-left: 3px solid var(--accent); font-size: 13px; line-height: 1.45; } .aud-line b { font-weight: 800; }

/* Post form: a sensible text box, not a screen-high one */
.form textarea#f-body { min-height: 150px; max-height: 42vh; height: auto; field-sizing: content; align-self: start; resize: vertical; }
.form > label { align-self: start; }

.pk-src, .cr-src { margin: 0; font-size: 12.5px; line-height: 1.4; opacity: .85; } .pk-src b, .cr-src b { font-weight: 800; } .pk-src.ok b, .cr-src.ok b { color: #4ade80; }
.cr-src { padding: 0 6px; }

.guide-safe { margin: 0; padding: 9px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; background: color-mix(in srgb, #16a34a 12%, transparent); border: 1px solid color-mix(in srgb, #16a34a 30%, var(--line)); }
.mode-guide { margin: 0 0 12px; }
.pq-bar { height: 9px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); overflow: hidden; margin: 4px 0 10px; }
.pq-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #f97316); transition: width .35s ease; }

.ls-bar { display: flex; gap: 8px; margin: 8px 0; }
.ls-bar input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--sheet); color: inherit; font: inherit; }
.ls-card { display: grid; gap: 8px; }
.ls-img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, transparent); }

.ls-ai { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 14%, var(--sheet)), var(--sheet)); }
.ls-points { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }

.ls-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); border: 1px solid var(--line); margin: 6px 0 10px; }
.ls-seg button { border: 0; background: none; color: inherit; font: inherit; font-weight: 800; padding: 10px 8px; border-radius: 12px; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.ls-seg button.on { background: linear-gradient(135deg, var(--accent), #f97316); color: #fff; box-shadow: 0 8px 18px -10px var(--accent); }
.ls-seg button:active { transform: scale(.97); }
.ls-person { display: flex; align-items: center; gap: 12px; }
.ls-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ls-people { display: grid; gap: 8px; margin: 8px 0; }
.ls-bar input[type=search] { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .ls-seg button { transition: none; } }

.ab-terms { display: grid; gap: 10px; margin: 12px 0 4px; padding: 14px; border-radius: 18px; text-align: left; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); }
.ab-terms ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.4; }
.ab-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.ab-agree input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--accent); }
.ab-agree a { text-decoration: underline; font-weight: 700; }
.welcome-skip[hidden] { display: none !important; }

#notifBtn { position: relative; }
.bell-n { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #ef4444; color: #fff; font: 800 10px/17px system-ui, sans-serif; text-align: center; font-style: normal; }
.notif-row { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.notif-row.fresh { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--sheet)); }
.notif-row span:last-child { display: grid; gap: 2px; }
.notif-ic { font-size: 22px; flex: none; }
body.simple .hdr-actions .chip.tool:not(#quizBtn):not(#aboutBtn):not(#leadersBtn) { display: none; }
body.simple .tabs button[data-tab="clubs"], body.simple .tabs button[data-tab="jobs"], body.simple .tabs button[data-tab="market"], body.simple .tabs button[data-tab="gate"] { display: none; }
body.simple .tabs button[aria-selected="true"] { display: inline-flex; }

.unit-topics { display: grid; gap: 4px; margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; }
.unit-topics span { color: color-mix(in srgb, currentColor 78%, transparent); }

.dod-card { border-color: color-mix(in srgb, #f59e0b 55%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, #f59e0b 14%, var(--sheet)), var(--sheet)); display: grid; gap: 6px; }

.curio-card { display: grid; gap: 8px; }
.curio-fact { font-size: 16px; line-height: 1.5; margin: 0; }
.curio-opts { display: grid; gap: 8px; }
.curio-opts .btn { text-align: left; white-space: normal; }
.curio-opts .btn.right { border-color: #16a34a; box-shadow: 0 0 0 2px color-mix(in srgb, #16a34a 40%, transparent); }
.curio-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.curio-stats > div { display: grid; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); }
.curio-stats b { font-size: 24px; } .curio-stats span { font-size: 12.5px; color: color-mix(in srgb, currentColor 70%, transparent); }

.curio-pick { display: grid; gap: 6px; margin: 4px 0 10px; padding: 12px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); }

.curio-svg { width: 100%; height: auto; max-height: 280px; }
.curio-node { cursor: pointer; } .curio-node:focus-visible rect { stroke: #fff; stroke-width: 3; }
.curio-hint { margin: 0; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, #f59e0b 12%, transparent); font-size: 13.5px; }
.curio-ask { display: grid; gap: 6px; padding: 10px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); }

#rgElig .welcome-card { max-height: calc(var(--vvh, 100vh) - 24px); overflow-y: auto; }
.rg-opts { display: grid; gap: 8px; width: 100%; margin: 12px 0 8px; }
.rg-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 16px; border-radius: 16px; border: 1px solid var(--line, #d9d6ee); background: color-mix(in srgb, currentColor 4%, transparent); color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: normal; transition: transform .15s, border-color .2s, background .2s; }
.rg-opt .rg-name { font-weight: 800; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.rg-opt small { flex: none; font-weight: 700; opacity: .65; }
.rg-opt.ok { border-color: color-mix(in srgb, #16a34a 55%, var(--line, #d9d6ee)); background: color-mix(in srgb, #16a34a 9%, transparent); }
.rg-opt.ok small { color: #16a34a; opacity: 1; }
.rg-opt:active { transform: scale(.98); }
.rg-opt:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent, #7c3aed) 60%, transparent); outline-offset: 2px; }
/* Board rows have four parts: rank, picture, name and points. */
.board li { grid-template-columns: 36px auto minmax(0, 1fr) auto; }
.board li img.av, .board li .av { flex: none; }
.board .who small { display: block; line-height: 1.35; overflow-wrap: anywhere; }
.board .pts { align-self: center; }
@media (max-width: 700px) {
  header.top #notifBtn { position: absolute; top: 8px; right: 58px; padding: 4px 9px; font-size: 16px; border-radius: 999px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); backdrop-filter: none; }
}

.hotw-card { border-color: color-mix(in srgb, #fbbf24 60%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, #fbbf24 16%, var(--sheet)), var(--sheet)); display: grid; gap: 6px; }
.push-ask { display: grid; gap: 6px; border-style: dashed; }

.acct-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 4px; }
.acct-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; font-size: 20px; background: linear-gradient(135deg, var(--accent), #f97316); box-shadow: 0 10px 20px -12px var(--accent); flex: none; }
.acct-head > div { display: grid; gap: 2px; min-width: 0; }
.acct-title { font-size: 20px; font-weight: 900; letter-spacing: -.01em; background: linear-gradient(90deg, var(--accent), #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.acct-sub { font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; color: color-mix(in srgb, currentColor 70%, transparent); }
.logout-btn { color: #ef4444 !important; border-color: color-mix(in srgb, #ef4444 55%, transparent) !important; background: color-mix(in srgb, #ef4444 9%, transparent) !important; font-weight: 800; }
.logout-btn:hover, .logout-btn:focus-visible { background: color-mix(in srgb, #ef4444 18%, transparent) !important; }
.acct-head, .acct-head > div { text-align: left; }

.sp2-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.sp2-bmark svg { display: block; filter: drop-shadow(0 8px 14px rgba(99, 102, 241, .45)); }
.sp2-bname { display: grid; text-align: left; line-height: 1.05; font-family: 'Bitstream Charter', Georgia, 'Times New Roman', serif; }
.sp2-bname b { font-size: 19px; letter-spacing: .12em; color: #fff; }
.sp2-bname i { font-style: normal; font-size: 12px; letter-spacing: .6em; font-weight: 700; background: linear-gradient(90deg, #fde68a, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-brand { display: grid; place-items: center; } .ob-brand svg { filter: drop-shadow(0 10px 18px rgba(99, 102, 241, .45)); }

.id-card { display: grid; gap: 6px; }
.id-code { font: 800 22px/1.2 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .06em; background: linear-gradient(90deg, var(--accent), #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.id-mini { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }

.priv-box { border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: 18px; padding: 10px; }
.priv-img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; background: color-mix(in srgb, currentColor 5%, transparent); margin: 6px 0; }
.ai-check { margin: 6px 0; }
.ai-verdict { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); }
.ai-verdict.ok { border-color: #16a34a; background: color-mix(in srgb, #16a34a 9%, transparent); }
.ai-verdict.mid { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 9%, transparent); }
.ai-verdict.bad { border-color: #ef4444; background: color-mix(in srgb, #ef4444 9%, transparent); }
.ai-verdict p, .ai-verdict ul { margin: 0; } .ai-verdict ul { padding-left: 18px; }

.sim-box { display: grid; gap: 4px; padding: 10px 12px; margin: 4px 0 8px; border-radius: 14px; border: 1px solid color-mix(in srgb, #16a34a 45%, var(--line)); background: color-mix(in srgb, #16a34a 8%, transparent); }
.sim-row { text-align: left; white-space: normal; }

.pill.q-hi { background: color-mix(in srgb, #16a34a 18%, transparent); color: #16a34a; } .pill.q-mid { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; } .pill.q-lo { background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; }
.q-row { margin: 2px 0 4px; } .note-box ol { margin: 4px 0; padding-left: 20px; display: grid; gap: 3px; }
.dup-card { display: grid; gap: 6px; border-style: dashed; } .exp-line { margin: 2px 0 8px; }
.rev-card { display: grid; gap: 10px; } .rev-q { font-size: 18px; line-height: 1.35; } .rev-a { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #16a34a 9%, transparent); border: 1px solid color-mix(in srgb, #16a34a 35%, var(--line)); } .rev-a p { margin: 4px 0 0; white-space: pre-wrap; }

.brand-link { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .15s, transform .15s; }
.brand-link:hover { opacity: .85; } .brand-link:active { transform: scale(.98); }
.brand-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 4px; border-radius: 8px; }

/* Answer helper: pictures, diagrams and videos while writing an answer */
.ahelp { margin: 8px 0; }
.ah-body { margin-top: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 14px; background: var(--sheet); }
.ah-fact { padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 8px; margin: 6px 0; }
.ah-fact p { margin: 4px 0; font-size: .92rem; }
.ah-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.ah-img { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ah-img img { width: 100%; height: 110px; object-fit: contain; border-radius: 8px; background: #fff; }
.ah-img small { color: #333; font-size: .72rem; line-height: 1.2; word-break: break-word; }
.ah-vids { margin: 6px 0; }
.ah-status { margin: 4px 0; }
@media (min-width: 640px) { .ah-imgs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Rich answers: colour by role, with spacing and cards. Colour is never the only cue (bold, underline, labels). */
:root { --rt-term: #6d28d9; --rt-key: #0369a1; --rt-num: #b45309; --rt-conn: #be185d; --rt-warn: #b91c1c; --rt-topic: #4338ca; --rt-eq: #047857; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rt-term: #d8b4fe; --rt-key: #7dd3fc; --rt-num: #fcd34d; --rt-conn: #f9a8d4; --rt-warn: #fca5a5; --rt-topic: #a5b4fc; --rt-eq: #6ee7b7; } }
:root[data-theme="dark"] { --rt-term: #d8b4fe; --rt-key: #7dd3fc; --rt-num: #fcd34d; --rt-conn: #f9a8d4; --rt-warn: #fca5a5; --rt-topic: #a5b4fc; --rt-eq: #6ee7b7; }
.rt { display: flex; flex-direction: column; gap: 10px; line-height: 1.65; font-size: 1rem; text-align: left; overflow-wrap: anywhere; }
.rt p, .rt ul, .rt ol { margin: 0; }
.rt-ul, .rt-ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: 6px; }
.rt-term { color: var(--rt-term); font-weight: 800; }
.rt-key { color: var(--rt-key); font-weight: 700; }
.rt-num { color: var(--rt-num); font-weight: 700; font-family: var(--f-mono); }
.rt-eq { color: var(--rt-eq); font-family: var(--f-mono); font-weight: 700; background: color-mix(in oklab, var(--rt-eq) 12%, transparent); padding: 0 4px; border-radius: 5px; }
.rt-conn { color: var(--rt-conn); font-style: italic; font-weight: 600; }
.rt-warn { color: var(--rt-warn); font-weight: 700; text-decoration: underline dotted; text-underline-offset: 3px; }
.rt-topic { color: var(--rt-topic); font-weight: 800; border-bottom: 2px solid color-mix(in oklab, var(--rt-topic) 45%, transparent); }
.rs-def { background: color-mix(in oklab, var(--rt-term) 9%, transparent); border-radius: 6px; padding: 1px 3px; }
.rs-why { box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--rt-conn) 40%, transparent); }
.rs-ex { background: color-mix(in oklab, var(--rt-eq) 10%, transparent); border-radius: 6px; padding: 1px 3px; }
.rs-warn { background: color-mix(in oklab, var(--rt-warn) 9%, transparent); border-radius: 6px; padding: 1px 3px; }
.rt-card { border-left: 4px solid var(--c, var(--accent)); padding: 8px 12px; border-radius: 10px; background: color-mix(in oklab, var(--c, var(--accent)) 10%, var(--sheet)); }
.rt-lab { display: block; font-size: .8rem; letter-spacing: .03em; color: var(--c, var(--accent)); margin-bottom: 2px; }
.rt-k-idea { --c: #6366f1; } .rt-k-how { --c: #0ea5e9; } .rt-k-ex { --c: #10b981; } .rt-k-warn { --c: #ef4444; } .rt-k-try { --c: #f59e0b; } .rt-k-tip { --c: #a855f7; } .rt-k-formula { --c: #14b8a6; }
.astudio { margin: 8px 0; }
.as-prev { margin-top: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 14px; background: var(--sheet); }

/* Colour symbols in answers */
.rs-def::before { content: "\1F4D8\00a0"; }
.rs-why::before { content: "\1F517\00a0"; }
.rs-ex::before { content: "\1F4DD\00a0"; }
.rs-warn::before { content: "\26A0\FE0F\00a0"; }
.rt-ul { list-style: none; padding-left: 0; }
.rt-ul li { position: relative; padding-left: 1.4rem; }
.rt-ul li::before { content: "\25CF"; position: absolute; left: 0; font-size: .8em; top: .25em; color: var(--rt-key); }
.rt-ul li:nth-child(4n+2)::before { color: var(--rt-term); } .rt-ul li:nth-child(4n+3)::before { color: var(--rt-num); } .rt-ul li:nth-child(4n)::before { color: var(--rt-eq); }
.rt-ol li::marker { color: var(--rt-conn); font-weight: 800; }
.as-sym { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; -webkit-overflow-scrolling: touch; }
.as-sy { flex: 0 0 auto; min-width: 42px; min-height: 42px; font-size: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); color: var(--ink); cursor: pointer; }
.as-sy:active { transform: scale(.94); background: var(--accent-soft); }