/* 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: #4c6a4b;
  --accent-soft: #ebe9fe;
  --mark: #ffe46b;
  --mark-ink: #4a3d00;
  --ok: #17794a;
  --ok-soft: #dcf3e6;
  --danger: #b4232f;
  --g1: #4c6a4b; --g2: #6b9d4a; --g3: #a84660; --g4: #c27a3d;
  --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, #cf8a4f); 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, #c27a3d); 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, #c27a3d); 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: #5d7360; }
[data-s="DBMS"] { --c: #06b6d4; }
[data-s="OOP"] { --c: #b8566e; }
[data-s="TOC"] { --c: #84cc16; }
[data-s="CD"] { --c: #c27a3d; }
[data-s="SE"] { --c: #14b8a6; }
[data-s="Python"] { --c: #3b82f6; }
[data-s="Maths"] { --c: #5d7360; }
/* 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: #4c6a4b; }
/* Mech */
[data-s="Thermo"] { --c: #dc2626; }
[data-s="FM-M"] { --c: #2563eb; }
[data-s="MD"] { --c: #6b9d4a; }
[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: #4c6a4b; }
[data-s="PS"] { --c: #0e7490; }
[data-s="PE"] { --c: #be185d; }
[data-s="Control"] { --c: #166534; }
[data-s="EMS"] { --c: #2d452f; }
[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, #6b9d4a); 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%, #0b1220) 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, #6b9d4a 12%, var(--sheet)), color-mix(in oklab, #0ea5e9 8%, var(--sheet)));
  border: 1.5px solid color-mix(in oklab, #6b9d4a 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, #6b9d4a 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, #6b9d4a 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, #6b9d4a) 25%, var(--border));
  background: color-mix(in oklab, var(--tc, #6b9d4a) 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, #6b9d4a) 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,#6b9d4a,#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,#6b9d4a,#5d7360) !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,#6b9d4a,#06b6d4); color: #fff; margin-bottom: 10px; letter-spacing: .04em; }
.chal-timer-red { background: linear-gradient(135deg,#ef4444,#c27a3d) !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,#6b9d4a,#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,#5d7360 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,#4c6a4b 8%,var(--sheet)),color-mix(in oklab,#10a37f 8%,var(--sheet))); border: 1.5px solid color-mix(in oklab,#4c6a4b 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,#6b9d4a,#5d7360,#5d7360); 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: #6b9d4a; border-color: #6b9d4a; 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: #6b9d4a; border-color: #6b9d4a; 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: #6b9d4a; 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: #6b9d4a; 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: #6b9d4a; 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: #6b9d4a; }
.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: #6b9d4a;
  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: #6b9d4a; 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: #6b9d4a; --tb: #5d7360; }
body[data-tab="doubts"]     { --ta: #6b9d4a; --tb: #5d7360; }
body[data-tab="ideas"]      { --ta: #f59e0b; --tb: #c27a3d; }
body[data-tab="clubs"]      { --ta: #0d9488; --tb: #06b6d4; }
body[data-tab="challenges"] { --ta: #f43f5e; --tb: #cf8a4f; }
body[data-tab="market"]     { --ta: #16a34a; --tb: #14b8a6; }
body[data-tab="gate"]       { --ta: #2563eb; --tb: #6b9d4a; }

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, #6b9d4a, #b8566e); }
.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: #c27a3d; --oB1: #3b82f6; --oB2: #6b9d4a; --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: #c27a3d; } .st-opt.o1 { --c1: #3b82f6; --c2: #6b9d4a; }
.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, #4c6a4b), var(--brand-b, #6b9d4a)); }
.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, #c27a3d); 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 #4c6a4b; }
.resume.tpl-modern h4 { color: #4c6a4b; border-bottom-color: #4c6a4b; }
#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, #0b1220 0%, #101c33 55%, #14264a 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: #101c33; 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, #6b9d4a) 55%, transparent), transparent 60%), radial-gradient(80% 70% at 10% 100%, color-mix(in srgb, var(--brand-b, #a84660) 40%, transparent), transparent 60%), linear-gradient(155deg, #0b1220, #101c33 55%, #14264a);
  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: #101c33; 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, #14202e, #14264a 60%, #16284a); }
.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: #14264a; 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, #c46a80, #a9d49a, #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, #14202e, #14264a); }
.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, #cf8a4f); 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, #2d452f), var(--brand-b, #a84660)); 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, #6b9d4a, #5d7360 45%, #c27a3d) 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, #6b9d4a, #5d7360 45%, #c27a3d) 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, #6b9d4a 45%, #b8566e) 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, #6b9d4a, #5d7360 45%, #c27a3d) 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: #a9d49a; 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, #cfe2ce, #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, #6b9d4a 50%, #b8566e) 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: #14202e; 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: #111a2b; 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%, #14202e)); }
.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: #6b9d4a; --c2: #5d7360; 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: #6b9d4a; --c2: #5d7360; } .ob-chip[data-k="exams"] { --c1: #f59e0b; --c2: #ef4444; } .ob-chip[data-k="placements"] { --c1: #10b981; --c2: #0ea5e9; }
.ob-chip[data-k="friends"] { --c1: #b8566e; --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, #b8566e 35%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, #b8566e 12%, transparent), color-mix(in srgb, #6b9d4a 10%, transparent)); box-shadow: 0 16px 34px -24px #b8566e; }
.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, #c46a80, #a9d49a, #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, #c46a80, #5d7360 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, #4c6a4b, #5d7360 60%, #c27a3d); 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: #12213d; 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: #6b9d4a; --c2: #b8566e; 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), #c27a3d); 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), #c27a3d); 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, #6b9d4a) 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), #c27a3d); 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), #c27a3d); -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), #c27a3d); -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: #2d452f; --rt-key: #0369a1; --rt-num: #b45309; --rt-conn: #be185d; --rt-warn: #b91c1c; --rt-topic: #4c6a4b; --rt-eq: #047857; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rt-term: #a9d49a; --rt-key: #7dd3fc; --rt-num: #fcd34d; --rt-conn: #f9a8d4; --rt-warn: #fca5a5; --rt-topic: #a5b4fc; --rt-eq: #6ee7b7; } }
:root[data-theme="dark"] { --rt-term: #a9d49a; --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: #6b9d4a; } .rt-k-how { --c: #0ea5e9; } .rt-k-ex { --c: #10b981; } .rt-k-warn { --c: #ef4444; } .rt-k-try { --c: #f59e0b; } .rt-k-tip { --c: #5d7360; } .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); }

/* Messages appear on screen (toast), not at the top of a long page */
.notice:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: 104px; z-index: 90; max-width: 560px; margin: 0 auto; box-shadow: var(--shadow); color: var(--ink); background: var(--sheet); border: 1px solid var(--accent); cursor: pointer; }
.notice.ok { border-color: var(--ok); }

/* AI-generated answer label */
.ai-badge { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; padding: 8px 12px; border-radius: 10px; border-left: 4px solid #5d7360; background: color-mix(in oklab, #5d7360 12%, var(--sheet)); }
.ai-badge b { color: #6b9d4a; letter-spacing: .02em; font-size: .85rem; }
.ai-badge small { color: var(--muted); line-height: 1.35; }
.ai-badge.auto { border-left-style: dashed; border-left-color: #f59e0b; background: color-mix(in oklab, #f59e0b 10%, var(--sheet)); }
.ai-badge.auto b { color: #b45309; }
:root[data-theme="dark"] .ai-badge b { color: #a9d49a; } :root[data-theme="dark"] .ai-badge.auto b { color: #fcd34d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ai-badge b { color: #a9d49a; } :root:not([data-theme="light"]) .ai-badge.auto b { color: #fcd34d; } }

/* After posting: confirmation card instead of the form */
.posted-card { margin: 10px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ok); background: var(--ok-soft); }
.posted-card b { color: var(--ok); }
.posted-card p { margin: 4px 0 8px; }

.ans.flash { animation: ansflash 2.2s ease-out; }
@keyframes ansflash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent), 0 0 24px var(--accent); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .ans.flash { animation: none; outline: 3px solid var(--accent); } }

.as-link { display: flex; gap: 6px; margin: 4px 0; }
.as-link-in { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); color: var(--ink); font: inherit; }
.rt-link { color: var(--rt-key); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }

/* ===== Calm, professional look: soft tinted chips and cards instead of bright gradients ===== */
.pill {
  --pc: var(--muted);
  font: 600 10.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
  background: color-mix(in oklab, var(--pc) 11%, transparent);
  color: color-mix(in oklab, var(--pc) 78%, var(--ink));
  border: 1px solid color-mix(in oklab, var(--pc) 30%, transparent);
}
.pill.open { --pc: #6b9d4a; background: color-mix(in oklab, var(--pc) 11%, transparent); color: color-mix(in oklab, var(--pc) 78%, var(--ink)); }
.pill.done { --pc: #10b981; background: color-mix(in oklab, var(--pc) 11%, transparent); color: color-mix(in oklab, var(--pc) 70%, var(--ink)); }
.pill.urgent { --pc: #ef4444; background: color-mix(in oklab, var(--pc) 11%, transparent); color: color-mix(in oklab, var(--pc) 78%, var(--ink)); }
.pill.bounty { --pc: #f59e0b; background: color-mix(in oklab, var(--pc) 11%, transparent); color: color-mix(in oklab, var(--pc) 70%, var(--ink)); }
.pill.mentor, .pill.via-pill { --pc: #0ea5e9; background: color-mix(in oklab, var(--pc) 11%, transparent); color: color-mix(in oklab, var(--pc) 75%, var(--ink)); font-weight: 600; }
.pill.year-pill { --pc: #94a3b8; font-weight: 600; background: color-mix(in oklab, var(--pc) 10%, transparent); color: color-mix(in oklab, var(--pc) 70%, var(--ink)); border: 1px solid color-mix(in oklab, var(--pc) 30%, transparent); }
.pill.chal-winner-pill { --pc: #f59e0b; background: color-mix(in oklab, var(--pc) 11%, transparent) !important; color: color-mix(in oklab, var(--pc) 70%, var(--ink)) !important; }
.tag { font-weight: 600; border-radius: 6px; background: color-mix(in oklab, var(--c) 9%, transparent); color: color-mix(in oklab, var(--c) 72%, var(--ink)); border: 1px solid color-mix(in oklab, var(--c) 26%, transparent); }
.item {
  background: linear-gradient(180deg, color-mix(in oklab, var(--c) 5%, var(--sheet)), var(--sheet));
  border-left: 3px solid color-mix(in oklab, var(--c) 75%, var(--line));
  box-shadow: 0 1px 2px rgb(0 0 0 / .10), 0 8px 20px -16px rgb(0 0 0 / .5);
}
.item:hover, .spot:hover { box-shadow: 0 8px 24px -14px color-mix(in oklab, var(--accent) 30%, transparent); }
.spot {
  color: var(--ink);
  background: linear-gradient(135deg, color-mix(in oklab, var(--g1) 18%, var(--sheet)), color-mix(in oklab, var(--g2) 9%, var(--sheet)));
  border: 1px solid color-mix(in oklab, var(--g1) 28%, var(--line));
  box-shadow: 0 8px 22px -16px var(--g1);
}
.spot-k { color: color-mix(in oklab, var(--g1) 70%, var(--ink)); opacity: 1; }
.spot-why { opacity: .85; color: var(--muted); }

/* ===== Professional palette: slate neutrals, one steel-blue accent, solid buttons, no rainbow gradients ===== */
:root {
  --paper: #f4f6fa; --sheet: #ffffff; --grid: #eaeef5; --ink: #14202e; --muted: #5a667a; --line: #d9dfe8;
  --accent: #4c6a4b; --accent-soft: #e7edfb; --btn: #4c6a4b; --btn-ink: #ffffff;
  --mark: #f4d35e; --mark-ink: #3d3000; --ok: #1f7a4d; --ok-soft: #e0f2e8; --danger: #b3261e;
  --g1: #2f5fe0; --g2: #4c6a4b; --g3: #2850c4; --g4: #2447b5;
  --grad: linear-gradient(135deg, #2f5fe0, #2447b5);
  --shadow: 0 1px 2px rgb(16 24 40 / .06), 0 8px 20px -14px rgb(16 24 40 / .25);
  --rt-term: #2d452f; --rt-key: #0e6e8c; --rt-num: #9a5a00; --rt-conn: #a23b5a; --rt-warn: #b3261e; --rt-topic: #4c6a4b; --rt-eq: #0f7a55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c1118; --sheet: #151c26; --grid: #101720; --ink: #e7edf5; --muted: #8d9ab0; --line: #263243;
    --accent: #7a9cf5; --accent-soft: #1b2a47; --btn: #3d6ae0; --btn-ink: #ffffff;
    --mark: #d9b93a; --mark-ink: #2b2300; --ok: #4cc38a; --ok-soft: #12301f; --danger: #f07a74;
    --g1: #3d6ae0; --g2: #3560d0; --g3: #2f55bd; --g4: #2a4ba8;
    --grad: linear-gradient(135deg, #3d6ae0, #2f55bd);
    --shadow: 0 1px 2px rgb(0 0 0 / .45), 0 10px 24px -14px rgb(0 0 0 / .6);
    --rt-term: #a9d49a; --rt-key: #7dd3fc; --rt-num: #f0c36d; --rt-conn: #f0a3b8; --rt-warn: #f5a6a0; --rt-topic: #a9d49a; --rt-eq: #6ee7b7;
  }
}
:root[data-theme="dark"] {
  --paper: #0c1118; --sheet: #151c26; --grid: #101720; --ink: #e7edf5; --muted: #8d9ab0; --line: #263243;
  --accent: #7a9cf5; --accent-soft: #1b2a47; --btn: #3d6ae0; --btn-ink: #ffffff;
  --mark: #d9b93a; --mark-ink: #2b2300; --ok: #4cc38a; --ok-soft: #12301f; --danger: #f07a74;
  --g1: #3d6ae0; --g2: #3560d0; --g3: #2f55bd; --g4: #2a4ba8;
  --grad: linear-gradient(135deg, #3d6ae0, #2f55bd);
  --shadow: 0 1px 2px rgb(0 0 0 / .45), 0 10px 24px -14px rgb(0 0 0 / .6);
  --rt-term: #a9d49a; --rt-key: #7dd3fc; --rt-num: #f0c36d; --rt-conn: #f0a3b8; --rt-warn: #f5a6a0; --rt-topic: #a9d49a; --rt-eq: #6ee7b7;
}
/* quiet background: fine grid only */
body { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px, 28px 28px; }
/* each section gets a restrained hue instead of a rainbow */
body, body[data-tab="doubts"] { --ta: #4c6a4b; --tb: #3563dc; }
body[data-tab="ideas"]      { --ta: #a8741a; --tb: #b5802a; }
body[data-tab="clubs"]      { --ta: #4c6a4b; --tb: #178a80; }
body[data-tab="challenges"] { --ta: #b03a4c; --tb: #be4759; }
body[data-tab="market"]     { --ta: #2f7d4f; --tb: #3a8d5c; }
body[data-tab="gate"]       { --ta: #2a5db0; --tb: #3369c0; }
@media (min-width: 701px) { header.top { background: linear-gradient(135deg, color-mix(in oklab, var(--ta) 92%, #000), var(--tb)); } }
.sheet h2 { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
.btn.primary, .sheet .btn.primary { background: var(--btn); color: var(--btn-ink); border-color: transparent; box-shadow: 0 1px 2px rgb(16 24 40 / .2); }
.btn.primary:hover { filter: brightness(1.08); }
@media (min-width: 701px) { .brand h1 span { background: none; color: #f2c879; -webkit-text-fill-color: currentColor; } }
@media (max-width: 700px) { .brand h1 span { background: none; color: var(--accent); -webkit-text-fill-color: currentColor; } }

/* ===== Calm welcome screens: deep navy with one quiet glow; college colours only as small accents ===== */
.splash { background: radial-gradient(80% 55% at 85% 0%, rgb(61 106 224 / .22), transparent 62%), linear-gradient(160deg, #0b1220, #101c33 55%, #0d1729); }
.splash-langs, .splash-note small { color: #d9c28a; }
.splash-bubble { color: #14202e; }
.cr-art { background: radial-gradient(90% 80% at 85% 0%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 62%), linear-gradient(160deg, #0f1c33, #14264a); }
.cr-orb { background: rgb(255 255 255 / .06); }
.cr-body h2, .cr-mono { background: none; color: color-mix(in srgb, var(--c1) 80%, var(--ink)); -webkit-text-fill-color: currentColor; }
.cr-go { background: var(--c1); box-shadow: 0 10px 22px -14px var(--c1); }
.campus-pick-btn.rich::before { opacity: .12; }

/* ===== Answers: fewer, quieter tones (blue for key terms, amber for numbers, red only for warnings) ===== */
.rt-term { color: var(--ink); font-weight: 700; background: var(--accent-soft); padding: 0 4px; border-radius: 4px; }
.rt-key { color: var(--rt-topic); font-weight: 600; }
.rt-num { color: var(--rt-num); font-weight: 600; }
.rt-eq { color: var(--ink); background: color-mix(in oklab, var(--muted) 14%, transparent); font-weight: 600; }
.rt-conn { color: var(--muted); font-style: italic; font-weight: 500; }
.rt-topic { color: var(--rt-topic); border-bottom-width: 1px; }
.rs-def, .rs-ex, .rs-warn { background: transparent; padding: 0; }
.rs-why { box-shadow: none; }
.rt-card { background: color-mix(in oklab, var(--c, var(--accent)) 6%, var(--sheet)); border-left-width: 3px; }
.rt-lab { font-weight: 700; }
.rt-k-idea { --c: #6b9d4a; } .rt-k-how { --c: #2f8fa8; } .rt-k-ex { --c: #3f8f62; } .rt-k-warn { --c: #c0584a; } .rt-k-try { --c: #b7862b; } .rt-k-tip { --c: #64748b; } .rt-k-formula { --c: #2a8f8a; }
.rt-ul li::before, .rt-ul li:nth-child(4n+2)::before, .rt-ul li:nth-child(4n+3)::before, .rt-ul li:nth-child(4n)::before { color: var(--accent); }
.rt-ol li::marker { color: var(--accent); }
.ai-badge { border-left-color: #64748b; background: color-mix(in oklab, #64748b 10%, var(--sheet)); }
.ai-badge b, :root[data-theme="dark"] .ai-badge b { color: var(--ink); }

/* Keep long scrolling rows (symbols, chips) inside the screen instead of widening the page */
.sheet, .sheet > *, .form, .form > *, .astudio, .ahelp, .ah-body, .as-prev, .as-link, .as-sym { min-width: 0; max-width: 100%; }
.as-sym { overflow-x: auto; overscroll-behavior-x: contain; }

/* Top bar that hides when not in use (phones) */
.hd-tab { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 4px); left: 50%; transform: translateX(-50%); z-index: 41; width: 56px; height: 24px; padding: 0; line-height: 1; border-radius: 0 0 14px 14px; border: 1px solid var(--line); border-top: 0; background: color-mix(in srgb, var(--sheet) 92%, transparent); color: var(--muted); backdrop-filter: blur(10px); font-size: 14px; box-shadow: 0 6px 14px -10px rgb(0 0 0 / .5); }
.hd-tab[hidden] { display: none; }
@media (max-width: 700px) {
  header.top { transition: transform .26s ease, opacity .2s ease, visibility 0s; }
  .hd-hidden header.top { transform: translateY(calc(-100% - 18px)); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .26s ease, opacity .2s ease, visibility 0s .26s; }
}
@media (min-width: 701px) { .hd-tab { display: none !important; } }
@media (prefers-reduced-motion: reduce) { header.top, .hd-hidden header.top { transition: none; } }

/* ===== Slate and teal: cool, calm and professional (light and dark) ===== */
:root { --paper:#f1f5f7;--sheet:#ffffff;--grid:#e7edf0;--ink:#0e1a22;--muted:#52616d;--line:#d5dde3;--accent:#4c6a4b;--accent-soft:#e0f2f0;--btn:#4c6a4b;--btn-ink:#ffffff;--mark:#f4d35e;--mark-ink:#3d3000;--ok:#1f7a4d;--ok-soft:#e0f2e8;--danger:#b3261e;--g1:#4c6a4b;--g2:#4c6a4b;--g3:#3d5a3d;--g4:#2d452f;--grad:linear-gradient(135deg,#4c6a4b,#3d5a3d);--shadow:0 1px 2px rgb(14 26 34 / .06),0 8px 20px -14px rgb(14 26 34 / .25);--rt-term:#2d452f;--rt-key:#1d6f9a;--rt-num:#9a5a00;--rt-conn:#55616d;--rt-warn:#b3261e;--rt-topic:#4c6a4b;--rt-eq:#0f7a55; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#0e1113;--sheet:#171b1f;--grid:#121518;--ink:#e6eaee;--muted:#8a949e;--line:#262c32;--accent:#a9d49a;--accent-soft:#12302d;--btn:#4c6a4b;--btn-ink:#ffffff;--mark:#d9b93a;--mark-ink:#2b2300;--ok:#4cc38a;--ok-soft:#12301f;--danger:#f07a74;--g1:#4c6a4b;--g2:#4c6a4b;--g3:#3d5a3d;--g4:#2d452f;--grad:linear-gradient(135deg,#4c6a4b,#3d5a3d);--shadow:0 1px 2px rgb(0 0 0 / .45),0 10px 24px -14px rgb(0 0 0 / .6);--rt-term:#a9d49a;--rt-key:#7dd3fc;--rt-num:#f0c36d;--rt-conn:#9aa6b2;--rt-warn:#f5a6a0;--rt-topic:#a9d49a;--rt-eq:#6ee7b7; color-scheme: dark; } }
:root[data-theme="dark"] { --paper:#0e1113;--sheet:#171b1f;--grid:#121518;--ink:#e6eaee;--muted:#8a949e;--line:#262c32;--accent:#a9d49a;--accent-soft:#12302d;--btn:#4c6a4b;--btn-ink:#ffffff;--mark:#d9b93a;--mark-ink:#2b2300;--ok:#4cc38a;--ok-soft:#12301f;--danger:#f07a74;--g1:#4c6a4b;--g2:#4c6a4b;--g3:#3d5a3d;--g4:#2d452f;--grad:linear-gradient(135deg,#4c6a4b,#3d5a3d);--shadow:0 1px 2px rgb(0 0 0 / .45),0 10px 24px -14px rgb(0 0 0 / .6);--rt-term:#a9d49a;--rt-key:#7dd3fc;--rt-num:#f0c36d;--rt-conn:#9aa6b2;--rt-warn:#f5a6a0;--rt-topic:#a9d49a;--rt-eq:#6ee7b7; color-scheme: dark; }
body, body[data-tab] { --ta: #4c6a4b; --tb: #4c6a4b; }
@media (min-width: 701px) { header.top { background: linear-gradient(135deg, #2d452f, #3d5a3d); } .brand h1 span { color: #f2c879; } }
.splash { background: radial-gradient(80% 55% at 85% 0%, rgb(45 212 191 / .14), transparent 62%), linear-gradient(160deg, #0a0f11, #0f171a 55%, #0c1416); }
.cr-art { background: radial-gradient(90% 80% at 85% 0%, color-mix(in srgb, var(--c1) 26%, transparent), transparent 62%), linear-gradient(160deg, #0e1a1c, #13262a); }
.rt-k-idea { --c: #4c6a4b; } .rt-k-how { --c: #6b9d4a; } .rt-k-ex { --c: #3f8f62; } .rt-k-warn { --c: #c0584a; } .rt-k-try { --c: #b7862b; } .rt-k-tip { --c: #64748b; } .rt-k-formula { --c: #2a8f8a; }
.pill.open { --pc: #4c6a4b; } .pill.mentor, .pill.via-pill { --pc: #6b9d4a; }

/* ===== Flat, typographic interface: plain system font, sentence case, small radii, no glow, glass or grid ===== */
:root { --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --f-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --r-card: 10px; --glass: var(--sheet); --shadow: 0 1px 2px rgb(0 0 0 / .06); }
body { background-image: none; letter-spacing: 0; }
h1, h2, h3, .brand h1, .today-hello, .cr-body h2, .splash-title { font-family: var(--f-body); letter-spacing: -.005em; }
.label, .spot-k, .rt-lab, .hint.caps { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; color: var(--muted); opacity: 1; }
.pill, .tag { font-family: var(--f-body); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 2px 8px; border-radius: 4px; }
.item, .sheet, .learn-card, .plan-card, .guide-card, .today-bar, .notice, .welcome-card, .posted-card, .spot, .ah-body, .as-prev, .rt-card, .priv-box, .ans, .cr-card { border-radius: 10px; }
.item { background: var(--sheet); border: 1px solid var(--line); border-left: 1px solid var(--line); box-shadow: none; }
.item:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); transform: none; box-shadow: none; }
.item[aria-current="true"] { border-color: var(--accent); box-shadow: none; }
.spot { background: var(--accent-soft); border: 1px solid var(--line); box-shadow: none; }
.spot:hover { box-shadow: none; }
.sheet { box-shadow: none; border-top: 1px solid var(--line); background-image: none; background-color: var(--sheet); }
.today-bar { border: 1px solid var(--line); background: var(--sheet); box-shadow: none; }
.guide-card { background: var(--sheet); box-shadow: none; border: 1px solid var(--line); }
.btn { border-radius: 8px; font-weight: 600; }
.btn.primary, .sheet .btn.primary { box-shadow: none; }
.today-chip { border-radius: 8px; }
input, select, textarea { border-radius: 8px; }
header.top { box-shadow: none; border-radius: 10px; }
@media (max-width: 700px) {
  header.top { background: var(--sheet); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
  header.top .tabs button { border-radius: 6px; }
  header.top .tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: none; font-weight: 700; }
  header.top .college-btn, header.top .streak-chip, header.top #themeBtn { border-radius: 6px; background: var(--paper); border: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .bottom-nav { left: 0; right: 0; bottom: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--sheet); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 68px); }
  .bnav-btn { color: var(--muted); }
  .bnav-btn.active { color: var(--accent); }
  .bnav-btn.active::before { display: none; }
  .bnav-btn.active .bnav-icon { transform: none; }
}
.bnav-icon svg { width: 22px; height: 22px; display: block; margin: 0 auto 3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bnav-count { background: var(--accent); color: var(--btn-ink); }
.splash { background: #0e1113; }
.cr-art { background: linear-gradient(160deg, #0e1a1c, #13262a); }
.cr-orb { display: none; }
.rt-card { border: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--sheet); }
.rt-lab { color: var(--c, var(--accent)); }
.rs-def::before, .rs-why::before, .rs-ex::before, .rs-warn::before { content: none; }
.ai-badge { border-radius: 8px; }

/* Final polish: no drifting particles, no capital mono labels, single-colour header icons */
#particles { display: none !important; }
.label, label.label, .hero-kicker, .guide-head small, .hint.caps { font-family: var(--f-body) !important; text-transform: none !important; letter-spacing: 0 !important; }
.hero-kicker { font-size: .8rem; font-weight: 600; color: var(--accent); }
header.top #themeBtn, header.top [class*="bell"] { filter: grayscale(1) contrast(1.05); }
.guide-ic { font-size: 0; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); box-shadow: none; display: grid; place-items: center; }
.guide-ic::before { content: "?"; font-size: 18px; font-weight: 700; color: var(--accent); }

/* ===== Familiar product palette: neutral greys, white cards and one standard blue (light and true-grey dark) ===== */
:root { --paper:#f8f9fa;--sheet:#ffffff;--grid:#f1f3f4;--ink:#202124;--muted:#5d7360;--line:#dadce0;--accent:#4c6a4b;--accent-soft:#e8f0fe;--btn:#4c6a4b;--btn-ink:#ffffff;--mark:#fdd663;--mark-ink:#3c2e00;--ok:#3f7a2c;--ok-soft:#e6f4ea;--danger:#b64a3a;--g1:#4c6a4b;--g2:#4c6a4b;--g3:#3d5a3d;--g4:#2d452f;--grad:#4c6a4b;--shadow:0 1px 2px rgb(60 64 67 / .18);--rt-term:#202124;--rt-key:#4c6a4b;--rt-num:#b06000;--rt-conn:#5d7360;--rt-warn:#b64a3a;--rt-topic:#4c6a4b;--rt-eq:#3f7a2c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#202124;--sheet:#292a2d;--grid:#26272a;--ink:#e8eaed;--muted:#9aa0a6;--line:#3c4043;--accent:#a9d49a;--accent-soft:#2b3a55;--btn:#4c6a4b;--btn-ink:#ffffff;--mark:#fdd663;--mark-ink:#3c2e00;--ok:#81c995;--ok-soft:#1e3a2a;--danger:#f28b82;--g1:#4c6a4b;--g2:#4c6a4b;--g3:#3d5a3d;--g4:#2d452f;--grad:#4c6a4b;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#e8eaed;--rt-key:#a9d49a;--rt-num:#fdd663;--rt-conn:#9aa0a6;--rt-warn:#f28b82;--rt-topic:#a9d49a;--rt-eq:#81c995; color-scheme: dark; } }
:root[data-theme="dark"] { --paper:#202124;--sheet:#292a2d;--grid:#26272a;--ink:#e8eaed;--muted:#9aa0a6;--line:#3c4043;--accent:#a9d49a;--accent-soft:#2b3a55;--btn:#4c6a4b;--btn-ink:#ffffff;--mark:#fdd663;--mark-ink:#3c2e00;--ok:#81c995;--ok-soft:#1e3a2a;--danger:#f28b82;--g1:#4c6a4b;--g2:#4c6a4b;--g3:#3d5a3d;--g4:#2d452f;--grad:#4c6a4b;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#e8eaed;--rt-key:#a9d49a;--rt-num:#fdd663;--rt-conn:#9aa0a6;--rt-warn:#f28b82;--rt-topic:#a9d49a;--rt-eq:#81c995; color-scheme: dark; }
body, body[data-tab] { --ta: #4c6a4b; --tb: #4c6a4b; }
@media (min-width: 701px) { header.top { background: #4c6a4b; } .brand h1 span { color: #fdd663; } }
.splash { background: #17181a; }
.cr-art { background: linear-gradient(160deg, #1f2937, #263449); }
.rt-k-idea { --c: #4c6a4b; } .rt-k-how { --c: #3d6f86; } .rt-k-ex { --c: #3f7a2c; } .rt-k-warn { --c: #b64a3a; } .rt-k-try { --c: #8a5a12; } .rt-k-tip { --c: #5d7360; } .rt-k-formula { --c: #3d6f86; }
.pill.open { --pc: #4c6a4b; } .pill.done { --pc: #3f7a2c; } .pill.urgent { --pc: #b64a3a; } .pill.bounty { --pc: #8a5a12; } .pill.mentor, .pill.via-pill { --pc: #3d6f86; }
.ai-badge { border-left-color: #5d7360; }

/* ===== Better dark themes: clear layers, readable text and labels. "Black" is true black for OLED phones. ===== */
:root { --raised: var(--sheet); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #16171a; --sheet: #1e2024; --raised: #25282d; --line: #353941; --ink: #eceef1; --muted: #a8afb8; --accent-soft: #263754; } }
:root[data-theme="dark"] { --paper: #16171a; --sheet: #1e2024; --raised: #25282d; --line: #353941; --ink: #eceef1; --muted: #a8afb8; --accent-soft: #263754; }
:root[data-tone="black"] { --paper: #000000; --sheet: #0c0d0e; --raised: #151618; --line: #2a2d31; --ink: #f2f4f6; --muted: #a9b0b8; --accent-soft: #14233d; }
:root[data-theme="dark"] .item, :root[data-theme="dark"] .rt-card, :root[data-theme="dark"] .ans, :root[data-theme="dark"] .learn-card, :root[data-theme="dark"] .posted-card { background: var(--raised); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .item, :root:not([data-theme="light"]) .rt-card, :root:not([data-theme="light"]) .ans, :root:not([data-theme="light"]) .learn-card { background: var(--raised); } }
:root[data-theme="dark"] .rt-k-idea, :root[data-theme="dark"] .rt-lab { --c: #a9d49a; }
:root[data-theme="dark"] .rt-k-how { --c: #7fd3de; } :root[data-theme="dark"] .rt-k-ex { --c: #81c995; } :root[data-theme="dark"] .rt-k-warn { --c: #f28b82; } :root[data-theme="dark"] .rt-k-try { --c: #fdba5c; } :root[data-theme="dark"] .rt-k-tip { --c: #b6bdc6; } :root[data-theme="dark"] .rt-k-formula { --c: #7fd3de; }
:root[data-theme="dark"] .pill.open { --pc: #a9d49a; } :root[data-theme="dark"] .pill.done { --pc: #81c995; } :root[data-theme="dark"] .pill.urgent { --pc: #f28b82; } :root[data-theme="dark"] .pill.bounty { --pc: #fdba5c; } :root[data-theme="dark"] .pill.mentor, :root[data-theme="dark"] .pill.via-pill { --pc: #7fd3de; }
:root[data-theme="dark"] .pill.year-pill { --pc: #b6bdc6; }
:root[data-theme="dark"] .rt-card { border-color: var(--line); }
:root[data-theme="dark"] .hint, :root[data-theme="dark"] small { color: var(--muted); }
:root[data-theme="dark"] .btn { background: var(--raised); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .btn.primary { background: var(--btn); border-color: transparent; color: #fff; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--sheet); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .bottom-nav { background: var(--sheet); }

/* ===== Indigo, apricot and salmon on warm paper (from the reference palette) ===== */
:root { --paper:#ece8e3;--sheet:#faf8f5;--raised:#ffffff;--grid:#e5e0da;--ink:#312c51;--muted:#6b6688;--line:#d8d2ca;--accent:#48426d;--accent-soft:#e9e6f3;--btn:#48426d;--btn-ink:#ffffff;--mark:#f0c38e;--mark-ink:#312c51;--ok:#2f7d57;--ok-soft:#e1f0e8;--danger:#c4513f;--g1:#48426d;--g2:#48426d;--g3:#3d3860;--g4:#312c51;--grad:#48426d;--shadow:0 1px 2px rgb(49 44 81 / .12);--rt-term:#312c51;--rt-key:#48426d;--rt-num:#a8691c;--rt-conn:#6b6688;--rt-warn:#c4513f;--rt-topic:#48426d;--rt-eq:#2f7d57; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#2a2646;--sheet:#312c51;--raised:#3b3660;--grid:#2a2646;--ink:#f4f1ec;--muted:#bab4d4;--line:#4d4778;--accent:#f0c38e;--accent-soft:#473f72;--btn:#f0c38e;--btn-ink:#312c51;--mark:#f0c38e;--mark-ink:#312c51;--ok:#9ed8b5;--ok-soft:#2c4a47;--danger:#f1aa9b;--g1:#48426d;--g2:#48426d;--g3:#3d3860;--g4:#312c51;--grad:#48426d;--shadow:0 1px 2px rgb(0 0 0 / .35);--rt-term:#f4f1ec;--rt-key:#c9c2f2;--rt-num:#f0c38e;--rt-conn:#bab4d4;--rt-warn:#f1aa9b;--rt-topic:#f0c38e;--rt-eq:#9ed8b5; color-scheme: dark; } }
:root[data-theme="dark"] { --paper:#2a2646;--sheet:#312c51;--raised:#3b3660;--grid:#2a2646;--ink:#f4f1ec;--muted:#bab4d4;--line:#4d4778;--accent:#f0c38e;--accent-soft:#473f72;--btn:#f0c38e;--btn-ink:#312c51;--mark:#f0c38e;--mark-ink:#312c51;--ok:#9ed8b5;--ok-soft:#2c4a47;--danger:#f1aa9b;--g1:#48426d;--g2:#48426d;--g3:#3d3860;--g4:#312c51;--grad:#48426d;--shadow:0 1px 2px rgb(0 0 0 / .35);--rt-term:#f4f1ec;--rt-key:#c9c2f2;--rt-num:#f0c38e;--rt-conn:#bab4d4;--rt-warn:#f1aa9b;--rt-topic:#f0c38e;--rt-eq:#9ed8b5; color-scheme: dark; }
:root[data-tone="black"] { --paper:#1b1830;--sheet:#232040;--raised:#2d2950;--line:#3d3866;--accent-soft:#3a335f; }
body, body[data-tab] { --ta: #48426d; --tb: #48426d; }
@media (min-width: 701px) { header.top { background: #312c51; } .brand h1 span { color: #f0c38e; } }
.splash { background: #25213f; }
.cr-art { background: linear-gradient(160deg, #312c51, #48426d); }
.pill.open { --pc: #48426d; } .pill.done { --pc: #2f7d57; } .pill.urgent { --pc: #c4513f; } .pill.bounty { --pc: #a8691c; } .pill.mentor, .pill.via-pill { --pc: #3d6fa0; } .pill.year-pill { --pc: #6b6688; }
.rt-k-idea { --c: #48426d; } .rt-k-how { --c: #3d6fa0; } .rt-k-ex { --c: #2f7d57; } .rt-k-warn { --c: #c4513f; } .rt-k-try { --c: #a8691c; } .rt-k-tip { --c: #6b6688; } .rt-k-formula { --c: #3d6fa0; }
:root[data-theme="dark"] .pill.open { --pc: #c9c2f2; } :root[data-theme="dark"] .pill.done { --pc: #9ed8b5; } :root[data-theme="dark"] .pill.urgent { --pc: #f1aa9b; } :root[data-theme="dark"] .pill.bounty { --pc: #f0c38e; } :root[data-theme="dark"] .pill.mentor, :root[data-theme="dark"] .pill.via-pill { --pc: #a9c8f0; } :root[data-theme="dark"] .pill.year-pill { --pc: #bab4d4; }
:root[data-theme="dark"] .rt-k-idea, :root[data-theme="dark"] .rt-lab { --c: #c9c2f2; } :root[data-theme="dark"] .rt-k-how { --c: #a9c8f0; } :root[data-theme="dark"] .rt-k-ex { --c: #9ed8b5; } :root[data-theme="dark"] .rt-k-warn { --c: #f1aa9b; } :root[data-theme="dark"] .rt-k-try { --c: #f0c38e; } :root[data-theme="dark"] .rt-k-tip { --c: #bab4d4; } :root[data-theme="dark"] .rt-k-formula { --c: #a9c8f0; }
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .sheet .btn.primary { background: var(--btn); color: var(--btn-ink); }
:root[data-theme="dark"] .btn { background: var(--raised); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--paper); border-color: var(--line); color: var(--ink); }
.ai-badge { border-left-color: #6b6688; }

/* ===== Forest and leaf greens on soft mint paper (from the green reference palette) ===== */
:root { --paper:#eef3ee;--sheet:#f8fbf7;--raised:#ffffff;--grid:#e6ede5;--ink:#1f3322;--muted:#5d7360;--line:#d3ded1;--accent:#4c6a4b;--accent-soft:#cfe2ce;--btn:#2d452f;--btn-ink:#ffffff;--mark:#dfeebf;--mark-ink:#2d452f;--ok:#3f7a2c;--ok-soft:#dfeedb;--danger:#b64a3a;--g1:#4c6a4b;--g2:#4c6a4b;--g3:#3d5a3d;--g4:#2d452f;--grad:#4c6a4b;--shadow:0 1px 2px rgb(45 69 47 / .12);--rt-term:#2d452f;--rt-key:#3d6b3a;--rt-num:#8a5a12;--rt-conn:#5d7360;--rt-warn:#b64a3a;--rt-topic:#3d6b3a;--rt-eq:#2f6f3a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#1d2e20;--sheet:#2d452f;--raised:#365238;--grid:#1d2e20;--ink:#eef5ec;--muted:#b3c9b1;--line:#456647;--accent:#a9d49a;--accent-soft:#3c5c3f;--btn:#6b9d4a;--btn-ink:#10200f;--mark:#cfe2ce;--mark-ink:#2d452f;--ok:#bfe3b0;--ok-soft:#2f4b33;--danger:#f0a090;--g1:#4c6a4b;--g2:#4c6a4b;--g3:#3d5a3d;--g4:#2d452f;--grad:#4c6a4b;--shadow:0 1px 2px rgb(0 0 0 / .35);--rt-term:#eef5ec;--rt-key:#a9d49a;--rt-num:#e9cf8a;--rt-conn:#b3c9b1;--rt-warn:#f0a090;--rt-topic:#a9d49a;--rt-eq:#bfe3b0; color-scheme: dark; } }
:root[data-theme="dark"] { --paper:#1d2e20;--sheet:#2d452f;--raised:#365238;--grid:#1d2e20;--ink:#eef5ec;--muted:#b3c9b1;--line:#456647;--accent:#a9d49a;--accent-soft:#3c5c3f;--btn:#6b9d4a;--btn-ink:#10200f;--mark:#cfe2ce;--mark-ink:#2d452f;--ok:#bfe3b0;--ok-soft:#2f4b33;--danger:#f0a090;--g1:#4c6a4b;--g2:#4c6a4b;--g3:#3d5a3d;--g4:#2d452f;--grad:#4c6a4b;--shadow:0 1px 2px rgb(0 0 0 / .35);--rt-term:#eef5ec;--rt-key:#a9d49a;--rt-num:#e9cf8a;--rt-conn:#b3c9b1;--rt-warn:#f0a090;--rt-topic:#a9d49a;--rt-eq:#bfe3b0; color-scheme: dark; }
:root[data-tone="black"] { --paper:#121c14;--sheet:#1a2a1d;--raised:#223626;--line:#2f4733;--accent-soft:#2d4a31; }
body, body[data-tab] { --ta: #4c6a4b; --tb: #4c6a4b; }
@media (min-width: 701px) { header.top { background: #2d452f; } .brand h1 span { color: #cfe2ce; } }
.splash { background: #16241a; }
.cr-art { background: linear-gradient(160deg, #2d452f, #4c6a4b); }
.pill.open { --pc: #4c6a4b; } .pill.done { --pc: #3f7a2c; } .pill.urgent { --pc: #b64a3a; } .pill.bounty { --pc: #8a5a12; } .pill.mentor, .pill.via-pill { --pc: #3d6f86; } .pill.year-pill { --pc: #5d7360; }
.rt-k-idea { --c: #4c6a4b; } .rt-k-how { --c: #3d6f86; } .rt-k-ex { --c: #3f7a2c; } .rt-k-warn { --c: #b64a3a; } .rt-k-try { --c: #8a5a12; } .rt-k-tip { --c: #5d7360; } .rt-k-formula { --c: #3d6f86; }
:root[data-theme="dark"] .pill.open { --pc: #a9d49a; } :root[data-theme="dark"] .pill.done { --pc: #bfe3b0; } :root[data-theme="dark"] .pill.urgent { --pc: #f0a090; } :root[data-theme="dark"] .pill.bounty { --pc: #e9cf8a; } :root[data-theme="dark"] .pill.mentor, :root[data-theme="dark"] .pill.via-pill { --pc: #9ccbe0; } :root[data-theme="dark"] .pill.year-pill { --pc: #b3c9b1; }
:root[data-theme="dark"] .rt-k-idea, :root[data-theme="dark"] .rt-lab { --c: #a9d49a; } :root[data-theme="dark"] .rt-k-how { --c: #9ccbe0; } :root[data-theme="dark"] .rt-k-ex { --c: #bfe3b0; } :root[data-theme="dark"] .rt-k-warn { --c: #f0a090; } :root[data-theme="dark"] .rt-k-try { --c: #e9cf8a; } :root[data-theme="dark"] .rt-k-tip { --c: #b3c9b1; } :root[data-theme="dark"] .rt-k-formula { --c: #9ccbe0; }
.ai-badge { border-left-color: #5d7360; }

/* ===== Responsive and steady: no jumping when a field or checkbox is tapped ===== */
html { scroll-padding-top: 88px; scroll-padding-bottom: 96px; scroll-behavior: auto; overflow-anchor: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }
.wrap, .sheet, .list, .rail, main { min-width: 0; }
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; }   /* stops the phone from zooming in when a field is tapped */
  .kb .bottom-nav { display: none; }
  .kb body, body.kb { padding-bottom: 16px; }
}
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input[type="checkbox"], .check input[type="radio"] { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--accent); margin: 0; }
.btn, .chip, .tabs button, .bnav-btn { min-height: 40px; }
.btn.sm { min-height: 36px; }
@media (max-width: 360px) { .item h3 { font-size: .95rem; } .tabs button { padding-inline: 10px; } .bnav-label { font-size: .6rem; } }
@media (min-width: 701px) and (max-width: 1000px) { .wrap { gap: 16px; } .sheet { padding: 18px; } }
@media (min-width: 1400px) { .wrap { max-width: 1280px; } }
@supports (padding: max(0px)) { body { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } }

/* Cards are always laid out at their real height, so nothing below them shifts while scrolling or tapping */
.item { content-visibility: visible; contain-intrinsic-size: none; }
/* Scroll position is restored by the app after each redraw, so the browser must not also adjust it */
html, body, .sheet, .list { overflow-anchor: none; }

/* ===== Colour palettes the student can choose: forest, indigo, terracotta, ocean, slate (each in light, dark and black) ===== */
:root[data-palette="forest"] { --paper:#eef3ee;--sheet:#f8fbf7;--raised:#ffffff;--grid:#e6ede5;--ink:#1f3322;--muted:#5d7360;--line:#d3ded1;--accent:#4c6a4b;--accent-soft:#cfe2ce;--btn:#2d452f;--btn-ink:#ffffff;--mark:#dfeebf;--mark-ink:#2d452f;--ok:#3f7a2c;--ok-soft:#dfeedb;--danger:#b64a3a;--g1:#4c6a4b;--g2:#4c6a4b;--g3:#4c6a4b;--g4:#4c6a4b;--grad:#4c6a4b;--shadow:0 1px 2px rgb(45 69 47 / .12);--rt-term:#1f3322;--rt-key:#4c6a4b;--rt-num:#8a5a12;--rt-conn:#5d7360;--rt-warn:#b64a3a;--rt-topic:#4c6a4b;--rt-eq:#3f7a2c;--pill-open:#4c6a4b;--pill-done:#3f7a2c;--pill-urgent:#b64a3a;--pill-bounty:#8a5a12;--pill-mentor:#3d6f86;--pill-year:#5d7360;--k-idea:#4c6a4b;--k-how:#3d6f86;--k-ex:#3f7a2c;--k-warn:#b64a3a;--k-try:#8a5a12;--k-tip:#5d7360;--k-formula:#3d6f86;--hdr:#2d452f;--hdr-brand:#cfe2ce;--splash:#16241a;--cr-a:#2d452f;--cr-b:#4c6a4b; }
:root[data-palette="forest"][data-theme="dark"] { --paper:#1d2e20;--sheet:#2d452f;--raised:#365238;--grid:#1d2e20;--ink:#eef5ec;--muted:#b3c9b1;--line:#456647;--accent:#a9d49a;--accent-soft:#3c5c3f;--btn:#6b9d4a;--btn-ink:#10200f;--mark:#cfe2ce;--mark-ink:#2d452f;--ok:#bfe3b0;--ok-soft:#2f4b33;--danger:#f0a090;--g1:#a9d49a;--g2:#a9d49a;--g3:#a9d49a;--g4:#a9d49a;--grad:#a9d49a;--shadow:0 1px 2px rgb(0 0 0 / .35);--rt-term:#eef5ec;--rt-key:#a9d49a;--rt-num:#e9cf8a;--rt-conn:#b3c9b1;--rt-warn:#f0a090;--rt-topic:#a9d49a;--rt-eq:#bfe3b0;--pill-open:#a9d49a;--pill-done:#bfe3b0;--pill-urgent:#f0a090;--pill-bounty:#e9cf8a;--pill-mentor:#9ccbe0;--pill-year:#b3c9b1;--k-idea:#a9d49a;--k-how:#9ccbe0;--k-ex:#bfe3b0;--k-warn:#f0a090;--k-try:#e9cf8a;--k-tip:#b3c9b1;--k-formula:#9ccbe0;--hdr:#2d452f;--hdr-brand:#cfe2ce;--splash:#16241a;--cr-a:#2d452f;--cr-b:#4c6a4b; color-scheme: dark; }
:root[data-palette="forest"][data-theme="dark"][data-tone="black"] { --paper:#121c14;--sheet:#1a2a1d;--raised:#223626;--grid:#1d2e20;--ink:#eef5ec;--muted:#b3c9b1;--line:#2f4733;--accent:#a9d49a;--accent-soft:#2d4a31;--btn:#6b9d4a;--btn-ink:#10200f;--mark:#cfe2ce;--mark-ink:#2d452f;--ok:#bfe3b0;--ok-soft:#2f4b33;--danger:#f0a090;--g1:#a9d49a;--g2:#a9d49a;--g3:#a9d49a;--g4:#a9d49a;--grad:#a9d49a;--shadow:0 1px 2px rgb(0 0 0 / .35);--rt-term:#eef5ec;--rt-key:#a9d49a;--rt-num:#e9cf8a;--rt-conn:#b3c9b1;--rt-warn:#f0a090;--rt-topic:#a9d49a;--rt-eq:#bfe3b0;--pill-open:#a9d49a;--pill-done:#bfe3b0;--pill-urgent:#f0a090;--pill-bounty:#e9cf8a;--pill-mentor:#9ccbe0;--pill-year:#b3c9b1;--k-idea:#a9d49a;--k-how:#9ccbe0;--k-ex:#bfe3b0;--k-warn:#f0a090;--k-try:#e9cf8a;--k-tip:#b3c9b1;--k-formula:#9ccbe0;--hdr:#2d452f;--hdr-brand:#cfe2ce;--splash:#16241a;--cr-a:#2d452f;--cr-b:#4c6a4b; }
:root[data-palette="indigo"] { --paper:#ece8e3;--sheet:#faf8f5;--raised:#ffffff;--grid:#e5e0da;--ink:#312c51;--muted:#6b6688;--line:#d8d2ca;--accent:#48426d;--accent-soft:#e9e6f3;--btn:#48426d;--btn-ink:#ffffff;--mark:#f0c38e;--mark-ink:#312c51;--ok:#2f7d57;--ok-soft:#e1f0e8;--danger:#c4513f;--g1:#48426d;--g2:#48426d;--g3:#48426d;--g4:#48426d;--grad:#48426d;--shadow:0 1px 2px rgb(49 44 81 / .12);--rt-term:#312c51;--rt-key:#48426d;--rt-num:#a8691c;--rt-conn:#6b6688;--rt-warn:#c4513f;--rt-topic:#48426d;--rt-eq:#2f7d57;--pill-open:#48426d;--pill-done:#2f7d57;--pill-urgent:#c4513f;--pill-bounty:#a8691c;--pill-mentor:#3d6fa0;--pill-year:#6b6688;--k-idea:#48426d;--k-how:#3d6fa0;--k-ex:#2f7d57;--k-warn:#c4513f;--k-try:#a8691c;--k-tip:#6b6688;--k-formula:#3d6fa0;--hdr:#312c51;--hdr-brand:#f0c38e;--splash:#25213f;--cr-a:#312c51;--cr-b:#48426d; }
:root[data-palette="indigo"][data-theme="dark"] { --paper:#2a2646;--sheet:#312c51;--raised:#3b3660;--grid:#2a2646;--ink:#f4f1ec;--muted:#bab4d4;--line:#4d4778;--accent:#f0c38e;--accent-soft:#473f72;--btn:#f0c38e;--btn-ink:#312c51;--mark:#f0c38e;--mark-ink:#312c51;--ok:#9ed8b5;--ok-soft:#2c4a47;--danger:#f1aa9b;--g1:#f0c38e;--g2:#f0c38e;--g3:#f0c38e;--g4:#f0c38e;--grad:#f0c38e;--shadow:0 1px 2px rgb(0 0 0 / .35);--rt-term:#f4f1ec;--rt-key:#f0c38e;--rt-num:#f0c38e;--rt-conn:#bab4d4;--rt-warn:#f1aa9b;--rt-topic:#f0c38e;--rt-eq:#9ed8b5;--pill-open:#f0c38e;--pill-done:#9ed8b5;--pill-urgent:#f1aa9b;--pill-bounty:#f0c38e;--pill-mentor:#a9c8f0;--pill-year:#bab4d4;--k-idea:#f0c38e;--k-how:#a9c8f0;--k-ex:#9ed8b5;--k-warn:#f1aa9b;--k-try:#f0c38e;--k-tip:#bab4d4;--k-formula:#a9c8f0;--hdr:#312c51;--hdr-brand:#f0c38e;--splash:#25213f;--cr-a:#312c51;--cr-b:#48426d; color-scheme: dark; }
:root[data-palette="indigo"][data-theme="dark"][data-tone="black"] { --paper:#1b1830;--sheet:#232040;--raised:#2d2950;--grid:#2a2646;--ink:#f4f1ec;--muted:#bab4d4;--line:#3d3866;--accent:#f0c38e;--accent-soft:#3a335f;--btn:#f0c38e;--btn-ink:#312c51;--mark:#f0c38e;--mark-ink:#312c51;--ok:#9ed8b5;--ok-soft:#2c4a47;--danger:#f1aa9b;--g1:#f0c38e;--g2:#f0c38e;--g3:#f0c38e;--g4:#f0c38e;--grad:#f0c38e;--shadow:0 1px 2px rgb(0 0 0 / .35);--rt-term:#f4f1ec;--rt-key:#f0c38e;--rt-num:#f0c38e;--rt-conn:#bab4d4;--rt-warn:#f1aa9b;--rt-topic:#f0c38e;--rt-eq:#9ed8b5;--pill-open:#f0c38e;--pill-done:#9ed8b5;--pill-urgent:#f1aa9b;--pill-bounty:#f0c38e;--pill-mentor:#a9c8f0;--pill-year:#bab4d4;--k-idea:#f0c38e;--k-how:#a9c8f0;--k-ex:#9ed8b5;--k-warn:#f1aa9b;--k-try:#f0c38e;--k-tip:#bab4d4;--k-formula:#a9c8f0;--hdr:#312c51;--hdr-brand:#f0c38e;--splash:#25213f;--cr-a:#312c51;--cr-b:#48426d; }
:root[data-palette="terracotta"] { --paper:#efeeed;--sheet:#f8f7f6;--raised:#ffffff;--grid:#e8e6e4;--ink:#2b2623;--muted:#6f6762;--line:#dcd8d5;--accent:#c24f2e;--accent-soft:#f6e0d6;--btn:#c9532f;--btn-ink:#ffffff;--mark:#f4cdb8;--mark-ink:#3a1b10;--ok:#3f7d5c;--ok-soft:#e0efe7;--danger:#b83a3a;--g1:#c24f2e;--g2:#c24f2e;--g3:#c24f2e;--g4:#c24f2e;--grad:#c24f2e;--shadow:0 1px 2px rgb(43 38 35 / .12);--rt-term:#2b2623;--rt-key:#c24f2e;--rt-num:#a8741a;--rt-conn:#6f6762;--rt-warn:#b83a3a;--rt-topic:#c24f2e;--rt-eq:#3f7d5c;--pill-open:#c24f2e;--pill-done:#3f7d5c;--pill-urgent:#b83a3a;--pill-bounty:#a8741a;--pill-mentor:#5e8c74;--pill-year:#6f6762;--k-idea:#c24f2e;--k-how:#5e8c74;--k-ex:#3f7d5c;--k-warn:#b83a3a;--k-try:#a8741a;--k-tip:#6f6762;--k-formula:#5e8c74;--hdr:#b8452a;--hdr-brand:#fbe1d3;--splash:#241b17;--cr-a:#b8452a;--cr-b:#c78a9a; }
:root[data-palette="terracotta"][data-theme="dark"] { --paper:#211d1b;--sheet:#2c2623;--raised:#36302c;--grid:#211d1b;--ink:#f4efeb;--muted:#bdb2ab;--line:#4a423d;--accent:#f09a78;--accent-soft:#4a332b;--btn:#f09a78;--btn-ink:#2b1209;--mark:#f4cdb8;--mark-ink:#3a1b10;--ok:#9bd0b4;--ok-soft:#27382f;--danger:#f5a29a;--g1:#f09a78;--g2:#f09a78;--g3:#f09a78;--g4:#f09a78;--grad:#f09a78;--shadow:0 1px 2px rgb(0 0 0 / .35);--rt-term:#f4efeb;--rt-key:#f09a78;--rt-num:#e6c075;--rt-conn:#bdb2ab;--rt-warn:#f5a29a;--rt-topic:#f09a78;--rt-eq:#9bd0b4;--pill-open:#f09a78;--pill-done:#9bd0b4;--pill-urgent:#f5a29a;--pill-bounty:#e6c075;--pill-mentor:#a9c9b8;--pill-year:#bdb2ab;--k-idea:#f09a78;--k-how:#a9c9b8;--k-ex:#9bd0b4;--k-warn:#f5a29a;--k-try:#e6c075;--k-tip:#bdb2ab;--k-formula:#a9c9b8;--hdr:#2c2623;--hdr-brand:#f09a78;--splash:#1a1513;--cr-a:#4a2c22;--cr-b:#7a4a56; color-scheme: dark; }
:root[data-palette="terracotta"][data-theme="dark"][data-tone="black"] { --paper:#140f0e;--sheet:#1c1614;--raised:#261e1b;--grid:#211d1b;--ink:#f4efeb;--muted:#bdb2ab;--line:#3a302b;--accent:#f09a78;--accent-soft:#3d2a22;--btn:#f09a78;--btn-ink:#2b1209;--mark:#f4cdb8;--mark-ink:#3a1b10;--ok:#9bd0b4;--ok-soft:#27382f;--danger:#f5a29a;--g1:#f09a78;--g2:#f09a78;--g3:#f09a78;--g4:#f09a78;--grad:#f09a78;--shadow:0 1px 2px rgb(0 0 0 / .35);--rt-term:#f4efeb;--rt-key:#f09a78;--rt-num:#e6c075;--rt-conn:#bdb2ab;--rt-warn:#f5a29a;--rt-topic:#f09a78;--rt-eq:#9bd0b4;--pill-open:#f09a78;--pill-done:#9bd0b4;--pill-urgent:#f5a29a;--pill-bounty:#e6c075;--pill-mentor:#a9c9b8;--pill-year:#bdb2ab;--k-idea:#f09a78;--k-how:#a9c9b8;--k-ex:#9bd0b4;--k-warn:#f5a29a;--k-try:#e6c075;--k-tip:#bdb2ab;--k-formula:#a9c9b8;--hdr:#2c2623;--hdr-brand:#f09a78;--splash:#1a1513;--cr-a:#4a2c22;--cr-b:#7a4a56; }
:root[data-palette="ocean"] { --paper:#f8f9fa;--sheet:#ffffff;--raised:#ffffff;--grid:#f1f3f4;--ink:#202124;--muted:#5f6368;--line:#dadce0;--accent:#1a73e8;--accent-soft:#e8f0fe;--btn:#1a73e8;--btn-ink:#ffffff;--mark:#fdd663;--mark-ink:#3c2e00;--ok:#188038;--ok-soft:#e6f4ea;--danger:#d93025;--g1:#1a73e8;--g2:#1a73e8;--g3:#1a73e8;--g4:#1a73e8;--grad:#1a73e8;--shadow:0 1px 2px rgb(60 64 67 / .18);--rt-term:#202124;--rt-key:#1a73e8;--rt-num:#b06000;--rt-conn:#5f6368;--rt-warn:#d93025;--rt-topic:#1a73e8;--rt-eq:#188038;--pill-open:#1a73e8;--pill-done:#188038;--pill-urgent:#d93025;--pill-bounty:#b06000;--pill-mentor:#129eaf;--pill-year:#5f6368;--k-idea:#1a73e8;--k-how:#129eaf;--k-ex:#188038;--k-warn:#d93025;--k-try:#b06000;--k-tip:#5f6368;--k-formula:#129eaf;--hdr:#1a73e8;--hdr-brand:#fdd663;--splash:#17181a;--cr-a:#1f2937;--cr-b:#263449; }
:root[data-palette="ocean"][data-theme="dark"] { --paper:#16171a;--sheet:#1e2024;--raised:#25282d;--grid:#16171a;--ink:#eceef1;--muted:#a8afb8;--line:#353941;--accent:#8ab4f8;--accent-soft:#263754;--btn:#1a73e8;--btn-ink:#ffffff;--mark:#fdd663;--mark-ink:#3c2e00;--ok:#81c995;--ok-soft:#1e3a2a;--danger:#f28b82;--g1:#8ab4f8;--g2:#8ab4f8;--g3:#8ab4f8;--g4:#8ab4f8;--grad:#8ab4f8;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#eceef1;--rt-key:#8ab4f8;--rt-num:#fdba5c;--rt-conn:#a8afb8;--rt-warn:#f28b82;--rt-topic:#8ab4f8;--rt-eq:#81c995;--pill-open:#8ab4f8;--pill-done:#81c995;--pill-urgent:#f28b82;--pill-bounty:#fdba5c;--pill-mentor:#7fd3de;--pill-year:#a8afb8;--k-idea:#8ab4f8;--k-how:#7fd3de;--k-ex:#81c995;--k-warn:#f28b82;--k-try:#fdba5c;--k-tip:#a8afb8;--k-formula:#7fd3de;--hdr:#1e2024;--hdr-brand:#8ab4f8;--splash:#17181a;--cr-a:#1f2937;--cr-b:#263449; color-scheme: dark; }
:root[data-palette="ocean"][data-theme="dark"][data-tone="black"] { --paper:#000000;--sheet:#0c0d0e;--raised:#151618;--grid:#16171a;--ink:#eceef1;--muted:#a8afb8;--line:#2a2d31;--accent:#8ab4f8;--accent-soft:#14233d;--btn:#1a73e8;--btn-ink:#ffffff;--mark:#fdd663;--mark-ink:#3c2e00;--ok:#81c995;--ok-soft:#1e3a2a;--danger:#f28b82;--g1:#8ab4f8;--g2:#8ab4f8;--g3:#8ab4f8;--g4:#8ab4f8;--grad:#8ab4f8;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#eceef1;--rt-key:#8ab4f8;--rt-num:#fdba5c;--rt-conn:#a8afb8;--rt-warn:#f28b82;--rt-topic:#8ab4f8;--rt-eq:#81c995;--pill-open:#8ab4f8;--pill-done:#81c995;--pill-urgent:#f28b82;--pill-bounty:#fdba5c;--pill-mentor:#7fd3de;--pill-year:#a8afb8;--k-idea:#8ab4f8;--k-how:#7fd3de;--k-ex:#81c995;--k-warn:#f28b82;--k-try:#fdba5c;--k-tip:#a8afb8;--k-formula:#7fd3de;--hdr:#1e2024;--hdr-brand:#8ab4f8;--splash:#17181a;--cr-a:#1f2937;--cr-b:#263449; }
:root[data-palette="slate"] { --paper:#f3f4f6;--sheet:#ffffff;--raised:#ffffff;--grid:#eceef1;--ink:#1f2937;--muted:#5b6573;--line:#d9dde3;--accent:#3b4a5a;--accent-soft:#e6eaee;--btn:#2f3a46;--btn-ink:#ffffff;--mark:#f1d98a;--mark-ink:#2f3a46;--ok:#2e7d5b;--ok-soft:#e0f0e8;--danger:#b4443a;--g1:#3b4a5a;--g2:#3b4a5a;--g3:#3b4a5a;--g4:#3b4a5a;--grad:#3b4a5a;--shadow:0 1px 2px rgb(31 41 55 / .12);--rt-term:#1f2937;--rt-key:#3b4a5a;--rt-num:#946000;--rt-conn:#5b6573;--rt-warn:#b4443a;--rt-topic:#3b4a5a;--rt-eq:#2e7d5b;--pill-open:#3b4a5a;--pill-done:#2e7d5b;--pill-urgent:#b4443a;--pill-bounty:#946000;--pill-mentor:#3d6a8a;--pill-year:#5b6573;--k-idea:#3b4a5a;--k-how:#3d6a8a;--k-ex:#2e7d5b;--k-warn:#b4443a;--k-try:#946000;--k-tip:#5b6573;--k-formula:#3d6a8a;--hdr:#2f3a46;--hdr-brand:#e5e7eb;--splash:#12161b;--cr-a:#2f3a46;--cr-b:#475567; }
:root[data-palette="slate"][data-theme="dark"] { --paper:#14171a;--sheet:#1c2025;--raised:#252a31;--grid:#14171a;--ink:#e8ecef;--muted:#a3adb8;--line:#343b44;--accent:#9db4c8;--accent-soft:#27323d;--btn:#9db4c8;--btn-ink:#14171a;--mark:#e6c075;--mark-ink:#2f3a46;--ok:#8fd0b0;--ok-soft:#1f3a2e;--danger:#f0a29a;--g1:#9db4c8;--g2:#9db4c8;--g3:#9db4c8;--g4:#9db4c8;--grad:#9db4c8;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#e8ecef;--rt-key:#9db4c8;--rt-num:#e6c075;--rt-conn:#a3adb8;--rt-warn:#f0a29a;--rt-topic:#9db4c8;--rt-eq:#8fd0b0;--pill-open:#9db4c8;--pill-done:#8fd0b0;--pill-urgent:#f0a29a;--pill-bounty:#e6c075;--pill-mentor:#8fc0e0;--pill-year:#a3adb8;--k-idea:#9db4c8;--k-how:#8fc0e0;--k-ex:#8fd0b0;--k-warn:#f0a29a;--k-try:#e6c075;--k-tip:#a3adb8;--k-formula:#8fc0e0;--hdr:#1c2025;--hdr-brand:#9db4c8;--splash:#0e1114;--cr-a:#2f3a46;--cr-b:#475567; color-scheme: dark; }
:root[data-palette="slate"][data-theme="dark"][data-tone="black"] { --paper:#000000;--sheet:#0b0d0f;--raised:#14171a;--grid:#14171a;--ink:#e8ecef;--muted:#a3adb8;--line:#262b31;--accent:#9db4c8;--accent-soft:#1b2630;--btn:#9db4c8;--btn-ink:#14171a;--mark:#e6c075;--mark-ink:#2f3a46;--ok:#8fd0b0;--ok-soft:#1f3a2e;--danger:#f0a29a;--g1:#9db4c8;--g2:#9db4c8;--g3:#9db4c8;--g4:#9db4c8;--grad:#9db4c8;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#e8ecef;--rt-key:#9db4c8;--rt-num:#e6c075;--rt-conn:#a3adb8;--rt-warn:#f0a29a;--rt-topic:#9db4c8;--rt-eq:#8fd0b0;--pill-open:#9db4c8;--pill-done:#8fd0b0;--pill-urgent:#f0a29a;--pill-bounty:#e6c075;--pill-mentor:#8fc0e0;--pill-year:#a3adb8;--k-idea:#9db4c8;--k-how:#8fc0e0;--k-ex:#8fd0b0;--k-warn:#f0a29a;--k-try:#e6c075;--k-tip:#a3adb8;--k-formula:#8fc0e0;--hdr:#1c2025;--hdr-brand:#9db4c8;--splash:#0e1114;--cr-a:#2f3a46;--cr-b:#475567; }

:root[data-palette] body, :root[data-palette] body[data-tab] { --ta: var(--accent); --tb: var(--accent); }
:root[data-palette] .pill.open { --pc: var(--pill-open); } :root[data-palette] .pill.done { --pc: var(--pill-done); } :root[data-palette] .pill.urgent { --pc: var(--pill-urgent); } :root[data-palette] .pill.bounty { --pc: var(--pill-bounty); } :root[data-palette] .pill.mentor, :root[data-palette] .pill.via-pill { --pc: var(--pill-mentor); } :root[data-palette] .pill.year-pill { --pc: var(--pill-year); }
:root[data-palette] .rt-k-idea { --c: var(--k-idea); } :root[data-palette] .rt-k-how { --c: var(--k-how); } :root[data-palette] .rt-k-ex { --c: var(--k-ex); } :root[data-palette] .rt-k-warn { --c: var(--k-warn); } :root[data-palette] .rt-k-try { --c: var(--k-try); } :root[data-palette] .rt-k-tip { --c: var(--k-tip); } :root[data-palette] .rt-k-formula { --c: var(--k-formula); }
:root[data-palette] .rt-lab { --c: var(--k-idea); }
:root[data-palette] .rt-k-idea .rt-lab { --c: var(--k-idea); } :root[data-palette] .rt-k-how .rt-lab { --c: var(--k-how); }
:root[data-palette] .splash { background: var(--splash); }
:root[data-palette] .cr-art { background: linear-gradient(160deg, var(--cr-a), var(--cr-b)); }
:root[data-palette] .btn.primary, :root[data-palette] .sheet .btn.primary { background: var(--btn); color: var(--btn-ink); }
@media (min-width: 701px) { :root[data-palette] header.top { background: var(--hdr); } :root[data-palette] .brand h1 span { color: var(--hdr-brand); } }
@media (max-width: 700px) { :root[data-palette] .brand h1 span { color: var(--accent); } }

/* Appearance picker */
.pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.pal-opt { display: grid; gap: 8px; padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--ink); }
.pal-opt.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent); }
.pal-dots { display: flex; gap: 6px; } .pal-dots i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .12); }
.theme-seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.theme-seg .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
#paletteBtn { display: inline-flex; align-items: center; justify-content: center; }
#paletteBtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { header.top #paletteBtn { position: absolute; top: 8px; right: 106px; padding: 4px 9px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); } }
@media (max-width: 380px) { .brand h1 { font-size: 1.05rem; } }

/* ===== Premium palettes: royal (navy and gold), emerald (and champagne), burgundy (and rose gold), obsidian (black and gold) ===== */
:root[data-palette="royal"] { --paper:#f4f1ea;--sheet:#fbf9f4;--raised:#ffffff;--grid:#ebe6db;--ink:#0f2038;--muted:#5d6a7e;--line:#dcd5c6;--accent:#1b3a68;--accent-soft:#e4e9f2;--btn:#0f2c52;--btn-ink:#ffffff;--mark:#e6c670;--mark-ink:#0f2038;--ok:#2f7a55;--ok-soft:#e1efe7;--danger:#b3382f;--g1:#1b3a68;--g2:#1b3a68;--g3:#1b3a68;--g4:#1b3a68;--grad:#1b3a68;--shadow:0 1px 2px rgb(15 32 56 / .14);--rt-term:#0f2038;--rt-key:#1b3a68;--rt-num:#946b12;--rt-conn:#5d6a7e;--rt-warn:#b3382f;--rt-topic:#1b3a68;--rt-eq:#2f7a55;--pill-open:#1b3a68;--pill-done:#2f7a55;--pill-urgent:#b3382f;--pill-bounty:#946b12;--pill-mentor:#2f6aa0;--pill-year:#5d6a7e;--k-idea:#1b3a68;--k-how:#2f6aa0;--k-ex:#2f7a55;--k-warn:#b3382f;--k-try:#946b12;--k-tip:#5d6a7e;--k-formula:#2f6aa0;--hdr:#0f2c52;--hdr-brand:#e2bd64;--splash:#091426;--cr-a:#0f2c52;--cr-b:#1e4a85; }
:root[data-palette="royal"][data-theme="dark"] { --paper:#0b1424;--sheet:#121e33;--raised:#1a2a45;--grid:#0b1424;--ink:#f2ede0;--muted:#a9b4c6;--line:#2a3b5a;--accent:#e0bb62;--accent-soft:#26324d;--btn:#d9b45a;--btn-ink:#1a1405;--mark:#e0bb62;--mark-ink:#1a1405;--ok:#8fd1ae;--ok-soft:#18382b;--danger:#f0a095;--g1:#e0bb62;--g2:#e0bb62;--g3:#e0bb62;--g4:#e0bb62;--grad:#e0bb62;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#f2ede0;--rt-key:#e0bb62;--rt-num:#e0bb62;--rt-conn:#a9b4c6;--rt-warn:#f0a095;--rt-topic:#e0bb62;--rt-eq:#8fd1ae;--pill-open:#e0bb62;--pill-done:#8fd1ae;--pill-urgent:#f0a095;--pill-bounty:#e0bb62;--pill-mentor:#8db8e8;--pill-year:#a9b4c6;--k-idea:#e0bb62;--k-how:#8db8e8;--k-ex:#8fd1ae;--k-warn:#f0a095;--k-try:#e0bb62;--k-tip:#a9b4c6;--k-formula:#8db8e8;--hdr:#121e33;--hdr-brand:#e0bb62;--splash:#091426;--cr-a:#0f2c52;--cr-b:#1e4a85; color-scheme: dark; }
:root[data-palette="royal"][data-theme="dark"][data-tone="black"] { --paper:#05080f;--sheet:#0b111d;--raised:#131c2e;--grid:#0b1424;--ink:#f2ede0;--muted:#a9b4c6;--line:#22304a;--accent:#e0bb62;--accent-soft:#1d2740;--btn:#d9b45a;--btn-ink:#1a1405;--mark:#e0bb62;--mark-ink:#1a1405;--ok:#8fd1ae;--ok-soft:#18382b;--danger:#f0a095;--g1:#e0bb62;--g2:#e0bb62;--g3:#e0bb62;--g4:#e0bb62;--grad:#e0bb62;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#f2ede0;--rt-key:#e0bb62;--rt-num:#e0bb62;--rt-conn:#a9b4c6;--rt-warn:#f0a095;--rt-topic:#e0bb62;--rt-eq:#8fd1ae;--pill-open:#e0bb62;--pill-done:#8fd1ae;--pill-urgent:#f0a095;--pill-bounty:#e0bb62;--pill-mentor:#8db8e8;--pill-year:#a9b4c6;--k-idea:#e0bb62;--k-how:#8db8e8;--k-ex:#8fd1ae;--k-warn:#f0a095;--k-try:#e0bb62;--k-tip:#a9b4c6;--k-formula:#8db8e8;--hdr:#121e33;--hdr-brand:#e0bb62;--splash:#091426;--cr-a:#0f2c52;--cr-b:#1e4a85; }
:root[data-palette="emerald"] { --paper:#f3f2ec;--sheet:#fbfaf6;--raised:#ffffff;--grid:#eae8de;--ink:#0e2e24;--muted:#5a6f66;--line:#d8d6c8;--accent:#17624a;--accent-soft:#dcebe4;--btn:#0d4a38;--btn-ink:#ffffff;--mark:#e8d8a0;--mark-ink:#0e2e24;--ok:#2b7d52;--ok-soft:#dff0e6;--danger:#b0392f;--g1:#17624a;--g2:#17624a;--g3:#17624a;--g4:#17624a;--grad:#17624a;--shadow:0 1px 2px rgb(14 46 36 / .14);--rt-term:#0e2e24;--rt-key:#17624a;--rt-num:#8a6a14;--rt-conn:#5a6f66;--rt-warn:#b0392f;--rt-topic:#17624a;--rt-eq:#2b7d52;--pill-open:#17624a;--pill-done:#2b7d52;--pill-urgent:#b0392f;--pill-bounty:#8a6a14;--pill-mentor:#2f6d88;--pill-year:#5a6f66;--k-idea:#17624a;--k-how:#2f6d88;--k-ex:#2b7d52;--k-warn:#b0392f;--k-try:#8a6a14;--k-tip:#5a6f66;--k-formula:#2f6d88;--hdr:#0d4a38;--hdr-brand:#e3cf94;--splash:#07201a;--cr-a:#0d4a38;--cr-b:#1f7a5a; }
:root[data-palette="emerald"][data-theme="dark"] { --paper:#08201a;--sheet:#0f2f26;--raised:#163d32;--grid:#08201a;--ink:#f1efe4;--muted:#a7bdb3;--line:#24493d;--accent:#e3cf94;--accent-soft:#223f36;--btn:#d8c07a;--btn-ink:#1b1604;--mark:#e3cf94;--mark-ink:#1b1604;--ok:#8fd4b0;--ok-soft:#15382b;--danger:#f0a095;--g1:#e3cf94;--g2:#e3cf94;--g3:#e3cf94;--g4:#e3cf94;--grad:#e3cf94;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#f1efe4;--rt-key:#e3cf94;--rt-num:#e3cf94;--rt-conn:#a7bdb3;--rt-warn:#f0a095;--rt-topic:#e3cf94;--rt-eq:#8fd4b0;--pill-open:#e3cf94;--pill-done:#8fd4b0;--pill-urgent:#f0a095;--pill-bounty:#e3cf94;--pill-mentor:#8fc4d8;--pill-year:#a7bdb3;--k-idea:#e3cf94;--k-how:#8fc4d8;--k-ex:#8fd4b0;--k-warn:#f0a095;--k-try:#e3cf94;--k-tip:#a7bdb3;--k-formula:#8fc4d8;--hdr:#0f2f26;--hdr-brand:#e3cf94;--splash:#07201a;--cr-a:#0d4a38;--cr-b:#1f7a5a; color-scheme: dark; }
:root[data-palette="emerald"][data-theme="dark"][data-tone="black"] { --paper:#04120e;--sheet:#0a1f19;--raised:#112b23;--grid:#08201a;--ink:#f1efe4;--muted:#a7bdb3;--line:#1c3a30;--accent:#e3cf94;--accent-soft:#183228;--btn:#d8c07a;--btn-ink:#1b1604;--mark:#e3cf94;--mark-ink:#1b1604;--ok:#8fd4b0;--ok-soft:#15382b;--danger:#f0a095;--g1:#e3cf94;--g2:#e3cf94;--g3:#e3cf94;--g4:#e3cf94;--grad:#e3cf94;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#f1efe4;--rt-key:#e3cf94;--rt-num:#e3cf94;--rt-conn:#a7bdb3;--rt-warn:#f0a095;--rt-topic:#e3cf94;--rt-eq:#8fd4b0;--pill-open:#e3cf94;--pill-done:#8fd4b0;--pill-urgent:#f0a095;--pill-bounty:#e3cf94;--pill-mentor:#8fc4d8;--pill-year:#a7bdb3;--k-idea:#e3cf94;--k-how:#8fc4d8;--k-ex:#8fd4b0;--k-warn:#f0a095;--k-try:#e3cf94;--k-tip:#a7bdb3;--k-formula:#8fc4d8;--hdr:#0f2f26;--hdr-brand:#e3cf94;--splash:#07201a;--cr-a:#0d4a38;--cr-b:#1f7a5a; }
:root[data-palette="burgundy"] { --paper:#f6efeb;--sheet:#fcf8f5;--raised:#ffffff;--grid:#ece3dd;--ink:#3a1520;--muted:#7a5f66;--line:#e0d1ca;--accent:#7a2238;--accent-soft:#f1dfe0;--btn:#6b1d31;--btn-ink:#ffffff;--mark:#efc9b8;--mark-ink:#3a1520;--ok:#2f7a55;--ok-soft:#e1efe7;--danger:#b3382f;--g1:#7a2238;--g2:#7a2238;--g3:#7a2238;--g4:#7a2238;--grad:#7a2238;--shadow:0 1px 2px rgb(58 21 32 / .14);--rt-term:#3a1520;--rt-key:#7a2238;--rt-num:#96601a;--rt-conn:#7a5f66;--rt-warn:#b3382f;--rt-topic:#7a2238;--rt-eq:#2f7a55;--pill-open:#7a2238;--pill-done:#2f7a55;--pill-urgent:#b3382f;--pill-bounty:#96601a;--pill-mentor:#4f6e8a;--pill-year:#7a5f66;--k-idea:#7a2238;--k-how:#4f6e8a;--k-ex:#2f7a55;--k-warn:#b3382f;--k-try:#96601a;--k-tip:#7a5f66;--k-formula:#4f6e8a;--hdr:#5b1a2b;--hdr-brand:#f0c4b0;--splash:#1f0a10;--cr-a:#5b1a2b;--cr-b:#8c2f46; }
:root[data-palette="burgundy"][data-theme="dark"] { --paper:#1f0d13;--sheet:#2c141c;--raised:#3a1c26;--grid:#1f0d13;--ink:#f7ece8;--muted:#c7a9ae;--line:#4d2a36;--accent:#e9b49f;--accent-soft:#4a2530;--btn:#e2a68f;--btn-ink:#2a0f17;--mark:#efc9b8;--mark-ink:#3a1520;--ok:#9bd4b4;--ok-soft:#1c3a2c;--danger:#f5a29a;--g1:#e9b49f;--g2:#e9b49f;--g3:#e9b49f;--g4:#e9b49f;--grad:#e9b49f;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#f7ece8;--rt-key:#e9b49f;--rt-num:#e6bc84;--rt-conn:#c7a9ae;--rt-warn:#f5a29a;--rt-topic:#e9b49f;--rt-eq:#9bd4b4;--pill-open:#e9b49f;--pill-done:#9bd4b4;--pill-urgent:#f5a29a;--pill-bounty:#e6bc84;--pill-mentor:#a9c0dc;--pill-year:#c7a9ae;--k-idea:#e9b49f;--k-how:#a9c0dc;--k-ex:#9bd4b4;--k-warn:#f5a29a;--k-try:#e6bc84;--k-tip:#c7a9ae;--k-formula:#a9c0dc;--hdr:#2c141c;--hdr-brand:#e9b49f;--splash:#170a0f;--cr-a:#5b1a2b;--cr-b:#8c2f46; color-scheme: dark; }
:root[data-palette="burgundy"][data-theme="dark"][data-tone="black"] { --paper:#12070b;--sheet:#1d0e14;--raised:#281520;--grid:#1f0d13;--ink:#f7ece8;--muted:#c7a9ae;--line:#3c202b;--accent:#e9b49f;--accent-soft:#3a1d27;--btn:#e2a68f;--btn-ink:#2a0f17;--mark:#efc9b8;--mark-ink:#3a1520;--ok:#9bd4b4;--ok-soft:#1c3a2c;--danger:#f5a29a;--g1:#e9b49f;--g2:#e9b49f;--g3:#e9b49f;--g4:#e9b49f;--grad:#e9b49f;--shadow:0 1px 2px rgb(0 0 0 / .4);--rt-term:#f7ece8;--rt-key:#e9b49f;--rt-num:#e6bc84;--rt-conn:#c7a9ae;--rt-warn:#f5a29a;--rt-topic:#e9b49f;--rt-eq:#9bd4b4;--pill-open:#e9b49f;--pill-done:#9bd4b4;--pill-urgent:#f5a29a;--pill-bounty:#e6bc84;--pill-mentor:#a9c0dc;--pill-year:#c7a9ae;--k-idea:#e9b49f;--k-how:#a9c0dc;--k-ex:#9bd4b4;--k-warn:#f5a29a;--k-try:#e6bc84;--k-tip:#c7a9ae;--k-formula:#a9c0dc;--hdr:#2c141c;--hdr-brand:#e9b49f;--splash:#170a0f;--cr-a:#5b1a2b;--cr-b:#8c2f46; }
:root[data-palette="obsidian"] { --paper:#f2f1ee;--sheet:#fbfaf8;--raised:#ffffff;--grid:#e9e7e2;--ink:#181818;--muted:#666059;--line:#dad6cd;--accent:#7d5f12;--accent-soft:#efe5c8;--btn:#181818;--btn-ink:#f1d68a;--mark:#ecd48a;--mark-ink:#181818;--ok:#2f7a55;--ok-soft:#e1efe7;--danger:#b3382f;--g1:#7d5f12;--g2:#7d5f12;--g3:#7d5f12;--g4:#7d5f12;--grad:#7d5f12;--shadow:0 1px 2px rgb(24 24 24 / .14);--rt-term:#181818;--rt-key:#7d5f12;--rt-num:#8a6a14;--rt-conn:#666059;--rt-warn:#b3382f;--rt-topic:#7d5f12;--rt-eq:#2f7a55;--pill-open:#7d5f12;--pill-done:#2f7a55;--pill-urgent:#b3382f;--pill-bounty:#8a6a14;--pill-mentor:#4a6f8a;--pill-year:#666059;--k-idea:#7d5f12;--k-how:#4a6f8a;--k-ex:#2f7a55;--k-warn:#b3382f;--k-try:#8a6a14;--k-tip:#666059;--k-formula:#4a6f8a;--hdr:#181818;--hdr-brand:#e2c36b;--splash:#0d0d0d;--cr-a:#1b1b1b;--cr-b:#3a3a3a; }
:root[data-palette="obsidian"][data-theme="dark"] { --paper:#0e0e0e;--sheet:#181818;--raised:#222222;--grid:#0e0e0e;--ink:#f3efe6;--muted:#b0a99b;--line:#343230;--accent:#e2c36b;--accent-soft:#2c2718;--btn:#d4af37;--btn-ink:#151100;--mark:#e2c36b;--mark-ink:#151100;--ok:#8fd1ae;--ok-soft:#17352a;--danger:#f0a095;--g1:#e2c36b;--g2:#e2c36b;--g3:#e2c36b;--g4:#e2c36b;--grad:#e2c36b;--shadow:0 1px 2px rgb(0 0 0 / .45);--rt-term:#f3efe6;--rt-key:#e2c36b;--rt-num:#e2c36b;--rt-conn:#b0a99b;--rt-warn:#f0a095;--rt-topic:#e2c36b;--rt-eq:#8fd1ae;--pill-open:#e2c36b;--pill-done:#8fd1ae;--pill-urgent:#f0a095;--pill-bounty:#e2c36b;--pill-mentor:#9db8d0;--pill-year:#b0a99b;--k-idea:#e2c36b;--k-how:#9db8d0;--k-ex:#8fd1ae;--k-warn:#f0a095;--k-try:#e2c36b;--k-tip:#b0a99b;--k-formula:#9db8d0;--hdr:#181818;--hdr-brand:#e2c36b;--splash:#0a0a0a;--cr-a:#1b1b1b;--cr-b:#3a3a3a; color-scheme: dark; }
:root[data-palette="obsidian"][data-theme="dark"][data-tone="black"] { --paper:#000000;--sheet:#0a0a0a;--raised:#141414;--grid:#0e0e0e;--ink:#f3efe6;--muted:#b0a99b;--line:#2a2826;--accent:#e2c36b;--accent-soft:#221e10;--btn:#d4af37;--btn-ink:#151100;--mark:#e2c36b;--mark-ink:#151100;--ok:#8fd1ae;--ok-soft:#17352a;--danger:#f0a095;--g1:#e2c36b;--g2:#e2c36b;--g3:#e2c36b;--g4:#e2c36b;--grad:#e2c36b;--shadow:0 1px 2px rgb(0 0 0 / .45);--rt-term:#f3efe6;--rt-key:#e2c36b;--rt-num:#e2c36b;--rt-conn:#b0a99b;--rt-warn:#f0a095;--rt-topic:#e2c36b;--rt-eq:#8fd1ae;--pill-open:#e2c36b;--pill-done:#8fd1ae;--pill-urgent:#f0a095;--pill-bounty:#e2c36b;--pill-mentor:#9db8d0;--pill-year:#b0a99b;--k-idea:#e2c36b;--k-how:#9db8d0;--k-ex:#8fd1ae;--k-warn:#f0a095;--k-try:#e2c36b;--k-tip:#b0a99b;--k-formula:#9db8d0;--hdr:#181818;--hdr-brand:#e2c36b;--splash:#0a0a0a;--cr-a:#1b1b1b;--cr-b:#3a3a3a; }

/* picker: two columns on phones; the small colour symbol that stays at the top-right when the header is hidden */
.pal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .pal-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
.hd-pal { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); right: 10px; z-index: 41; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--sheet) 92%, transparent); color: var(--accent); backdrop-filter: blur(8px); }
.hd-pal[hidden] { display: none; }
.hd-pal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 701px) { .hd-pal { display: none !important; } }

/* Colour button matches the bell: round, tinted, accent-coloured icon */
header.top #paletteBtn, #paletteBtn { border-radius: 999px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--accent); }
@media (max-width: 700px) { header.top #paletteBtn { padding: 4px 9px; min-height: 0; height: 34px; min-width: 34px; right: 106px; border-radius: 999px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--accent); } header.top #paletteBtn svg { width: 18px; height: 18px; } }
@media (max-width: 700px) { header.top #themeBtn { border-radius: 999px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); min-height: 0; min-width: 34px; height: 34px; padding: 4px 8px; } }

/* ===== Fluid layout for the first-steps card, today's question and headings ===== */
.quest { padding: clamp(10px, 3vw, 14px); }
.quest-head strong { font-size: clamp(1rem, 4.4vw, 1.1rem); }
.quest-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-height: 48px; padding: 10px 12px; font-size: clamp(.9rem, 3.7vw, 1rem); border-radius: 10px; }
.quest-step > span:first-child { width: 24px; text-align: center; font-size: 1.15em; }
.quest-step b { min-width: 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.quest-step i { white-space: nowrap; align-self: center; }
@media (max-width: 440px) {
  .quest-step { grid-template-columns: auto minmax(0, 1fr); }
  .quest-step i { grid-column: 2; justify-self: start; }
}
.teaser { padding: clamp(10px, 3.4vw, 14px); }
.teaser b { font-size: clamp(1rem, 4.2vw, 1.1rem); line-height: 1.35; overflow-wrap: anywhere; font-weight: 600; }
.teaser small, .teaser span { font-size: clamp(.82rem, 3.4vw, .92rem); }
@media (max-width: 700px) {
  .sheet h2, main h2 { font-size: clamp(1.3rem, 6vw, 1.7rem); line-height: 1.2; }
  .sheet h3 { font-size: clamp(1.05rem, 4.6vw, 1.2rem); }
  .today-hello { font-size: clamp(1.1rem, 5vw, 1.35rem); }
}
@media (max-width: 700px) {
  header.top .brand h1 { font-size: clamp(1rem, 4.8vw, 1.25rem); line-height: 1.15; padding-right: 86px; min-height: 36px; }
  @media (min-width: 400px) { header.top .brand h1 { white-space: nowrap; text-wrap: nowrap; } }
}

/* ===== Brand header: monogram C with the serif wordmark (see BRAND.md) ===== */
.brand h1.brand-link { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: 'Bitstream Charter', Georgia, 'Times New Roman', serif; letter-spacing: normal; text-shadow: none; }
.brand h1 .hd-mark { width: 38px; height: 38px; flex: 0 0 auto; display: block; filter: none; }
.bname { display: grid; line-height: 1.05; text-align: left; font-family: 'Bitstream Charter', Georgia, 'Times New Roman', serif; }
.bname b { font-size: 1rem; letter-spacing: .12em; font-weight: 700; color: var(--ink); }
.bname i { font-style: normal; font-size: .62rem; letter-spacing: .6em; font-weight: 700; margin-top: 3px; background: linear-gradient(90deg, #b9770a, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
:root[data-theme="dark"] .bname i { background: linear-gradient(90deg, #fde68a, #f59e0b); -webkit-background-clip: text; background-clip: text; }
@media (min-width: 701px) {
  .brand h1 .hd-mark { width: 58px; height: 58px; }
  .bname b { font-size: 1.55rem; color: #fff; } .bname i { font-size: .8rem; background: linear-gradient(90deg, #fde68a, #f59e0b); -webkit-background-clip: text; background-clip: text; }
}
@media (max-width: 700px) { header.top .brand h1 { font-size: 1rem; } header.top .brand h1.brand-link { gap: 9px; } }
.brand-banner { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); margin: 6px 0 12px; }

/* The mark's white cap needs a dark ground on light themes (the app icon uses the same navy) */
:root[data-theme="light"] .brand h1 .hd-mark { background: #1b1466; border-radius: 10px; padding: 4px; box-sizing: border-box; }
@media (min-width: 701px) { :root[data-theme="light"] .brand h1 .hd-mark { background: transparent; padding: 0; } }
.bname b { white-space: nowrap; }
@media (max-width: 380px) {
  .brand h1 .hd-mark { width: 32px; height: 32px; }
  header.top .brand h1.brand-link { gap: 7px; }
  .bname b { font-size: .82rem; letter-spacing: .08em; }
  .bname i { font-size: .56rem; letter-spacing: .5em; }
}

/* ===== Premium welcome page: calm brand ground, serif headline, one gold accent, tidy grid ===== */
.splash.sp2 { background: radial-gradient(75% 42% at 50% 0%, color-mix(in srgb, var(--hdr-brand) 15%, transparent), transparent 72%), linear-gradient(180deg, var(--splash), color-mix(in srgb, var(--splash) 80%, #000)); color: #f4efe4; }
.sp2-bg { display: none; }
.sp2-brand { margin-bottom: 20px; }
.sp2-bmark svg { filter: none; }
.sp2-bname b { color: #f6f1e6; letter-spacing: .14em; }
.sp2-bname i { background: none; color: var(--hdr-brand); -webkit-text-fill-color: var(--hdr-brand); }
.sp2-h { font-family: 'Bitstream Charter', Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: -.01em; line-height: 1.12; font-size: clamp(2rem, 8.4vw, 2.85rem); color: #f6f1e6; }
.sp2-h span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--hdr-brand); -webkit-text-fill-color: var(--hdr-brand); font-style: italic; font-weight: 600; }
.sp2-sub { font-family: 'Bitstream Charter', Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.02rem; color: rgb(244 239 228 / .72); opacity: 1; min-height: 0; margin-top: 4px; }
.sp2-sub::before { content: ""; display: block; width: 44px; height: 2px; background: var(--hdr-brand); margin: 0 0 14px; }
.sp2-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp2-chip { margin: 0 !important; transform: none !important; animation: none !important; display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 52px; padding: 12px 14px; border-radius: 12px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .12); color: #f4efe4; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; font-size: 14.5px; font-weight: 600; text-align: left; }
.sp2-chip b { width: 22px; text-align: center; font-size: 17px; filter: grayscale(1) sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.1); }
.sp2-chip:active, .sp2-chip.pop { background: rgb(255 255 255 / .1); border-color: var(--hdr-brand); }
.sp2-guide .loopy { width: 64px; filter: saturate(.7); }
.sp2-bubble { background: rgb(255 255 255 / .06); color: #f4efe4; border: 1px solid rgb(255 255 255 / .12); border-radius: 12px; box-shadow: none; font-weight: 500; }
.sp2-bubble::before { display: none; }
.sp2-go { background: var(--hdr-brand); color: var(--splash); border: 0; border-radius: 12px; font-weight: 700; letter-spacing: .02em; box-shadow: none; padding: 16px 22px; }
.sp2-go:hover { filter: brightness(1.06); }
.sp2-trust { margin: 10px auto 0; max-width: 30em; width: 100%; text-align: center; font-size: 12px; color: rgb(244 239 228 / .55); }
.sp2-h, .sp2-h span, .sp2-sub, .sp2-bname b, .sp2-bname i { text-shadow: none !important; filter: none; }
.splash.sp2 { justify-content: flex-start; gap: 18px; overflow-y: auto; }
.sp2-guide { margin-top: auto; padding-top: 6px; }
.sp2-go { margin-top: 6px; }
@media (max-width: 380px) { .sp2-chip { padding: 10px 11px; gap: 9px; font-size: 13.5px; min-height: 48px; } .sp2-chip b { width: 20px; font-size: 16px; } }
@media (max-height: 780px) {
  .splash.sp2 { gap: 12px; padding-top: 16px; }
  .sp2-bmark svg { width: 48px; height: 48px; }
  .sp2-brand { margin-bottom: 8px; }
  .sp2-h { font-size: clamp(1.7rem, 7.4vw, 2.35rem); }
  .sp2-sub::before { margin-bottom: 10px; }
  .sp2-chip { min-height: 44px; padding: 8px 11px; }
  .sp2-guide .loopy { width: 52px; }
  .sp2-bubble { font-size: 12px; padding: 8px 10px; }
  .sp2-go { padding: 14px 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sp2-brand, .sp2-h, .sp2-sub, .sp2-chips, .sp2-guide, .sp2-go, .sp2-trust { animation: riseIn .55s ease both; }
  .sp2-h { animation-delay: .08s; } .sp2-sub { animation-delay: .16s; } .sp2-chips { animation-delay: .24s; } .sp2-guide { animation-delay: .32s; } .sp2-go { animation-delay: .4s; } .sp2-trust { animation-delay: .46s; }
}

.sp2-hint { margin: -4px auto 0; width: 100%; max-width: 30em; min-height: 2.8em; font-size: 13px; line-height: 1.4; color: rgb(244 239 228 / .72); text-align: left; }
@media (max-height: 780px) { .sp2-hint { font-size: 12px; min-height: 2.4em; } }

/* ===== Premium, professional welcome: one champagne tone on deep navy, plain ivory type, line icons, no mascot ===== */
.splash.sp2 { --gold: color-mix(in srgb, var(--hdr-brand) 72%, #f3ead6); background: linear-gradient(180deg, color-mix(in srgb, var(--splash) 92%, #15233f) 0%, var(--splash) 100%); color: #f4efe4; }
.sp2-bmark svg { filter: grayscale(1) sepia(1) saturate(1.9) hue-rotate(2deg) brightness(1.15) contrast(.95); }
.sp2-bname b { color: #f7f3ea; }
.sp2-bname i { color: var(--gold); -webkit-text-fill-color: var(--gold); }
.sp2-h { color: #f7f3ea; font-weight: 700; letter-spacing: -.012em; }
.sp2-h span { color: rgb(247 243 234 / .66); -webkit-text-fill-color: currentColor; font-style: normal; font-weight: 600; }
.sp2-sub { color: var(--gold); font-style: normal; font-family: inherit; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-top: 2px; }
.sp2-sub::before { background: var(--gold); height: 1px; width: 56px; margin-bottom: 16px; }
.sp2-rows { list-style: none; margin: 4px auto 0; padding: 0; width: 100%; max-width: 30em; display: grid; grid-template-columns: 1fr; border-top: 1px solid rgb(255 255 255 / .09); }
.sp2-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid rgb(255 255 255 / .09); }
.sp2-ic { width: 38px; height: 38px; padding: 9px; box-sizing: border-box; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp2-row b { display: block; font-size: 15px; font-weight: 600; color: #f7f3ea; }
.sp2-row span { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; color: rgb(247 243 234 / .62); }
.sp2-guide, .sp2-hint { display: none !important; }
.sp2-go { background: var(--gold); color: #0b1428; border-radius: 12px; letter-spacing: .02em; margin-top: auto; }
.sp2-trust { color: rgb(247 243 234 / .5); }
@media (min-width: 640px) { .sp2-rows { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (max-height: 780px) { .sp2-row { padding: 9px 2px; } .sp2-ic { width: 34px; height: 34px; padding: 8px; } .sp2-row span { font-size: 12.5px; } .splash.sp2 { gap: 10px; } }

.sp2-h span { color: rgb(247 243 234 / .8); }
.sp2-sub { font-size: .72rem; letter-spacing: .13em; }
.sp2-ic { padding: 7px; }
.sp2-row { padding: 10px 2px; }
.splash.sp2 { gap: 12px; }
.sp2-brand { margin-bottom: 10px; }
.sp2-h { font-size: clamp(1.9rem, 8vw, 2.7rem); }

/* ===== Light, colour-block welcome page (like the reference app designs): palette colours for the six feature cards ===== */
:root[data-palette="forest"] .splash.sp2 { --w1:#4c6a4b;--w2:#3d6f86;--w3:#3f7a2c;--w4:#8a5a12;--w5:#b64a3a;--w6:#5d7360; }
:root[data-palette="indigo"] .splash.sp2 { --w1:#48426d;--w2:#3d6fa0;--w3:#2f7d57;--w4:#a8691c;--w5:#c4513f;--w6:#6b6688; }
:root[data-palette="terracotta"] .splash.sp2 { --w1:#c24f2e;--w2:#5e8c74;--w3:#3f7d5c;--w4:#a8741a;--w5:#b83a3a;--w6:#6f6762; }
:root[data-palette="ocean"] .splash.sp2 { --w1:#1a73e8;--w2:#129eaf;--w3:#188038;--w4:#b06000;--w5:#d93025;--w6:#5f6368; }
:root[data-palette="slate"] .splash.sp2 { --w1:#3b4a5a;--w2:#3d6a8a;--w3:#2e7d5b;--w4:#946000;--w5:#b4443a;--w6:#5b6573; }
:root[data-palette="royal"] .splash.sp2 { --w1:#1b3a68;--w2:#2f6aa0;--w3:#2f7a55;--w4:#946b12;--w5:#b3382f;--w6:#5d6a7e; }
:root[data-palette="emerald"] .splash.sp2 { --w1:#17624a;--w2:#2f6d88;--w3:#2b7d52;--w4:#8a6a14;--w5:#b0392f;--w6:#5a6f66; }
:root[data-palette="burgundy"] .splash.sp2 { --w1:#7a2238;--w2:#4f6e8a;--w3:#2f7a55;--w4:#96601a;--w5:#b3382f;--w6:#7a5f66; }
:root[data-palette="obsidian"] .splash.sp2 { --w1:#7d5f12;--w2:#4a6f8a;--w3:#2f7a55;--w4:#8a6a14;--w5:#b3382f;--w6:#666059; }

.splash.sp2 { background: var(--paper); color: var(--ink); justify-content: flex-start; gap: 14px; }
.sp2-bmark svg { filter: none; }
:root[data-theme="light"] .sp2-bmark svg { background: #1b1466; border-radius: 14px; padding: 6px; box-sizing: border-box; }
.sp2-bname b { color: var(--ink); }
.sp2-bname i { background: linear-gradient(90deg, #b9770a, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
:root[data-theme="dark"] .sp2-bname i { background: linear-gradient(90deg, #fde68a, #f59e0b); -webkit-background-clip: text; background-clip: text; }
.sp2-h { font-family: var(--f-body); font-weight: 800; font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
.sp2-h span { color: var(--accent); -webkit-text-fill-color: currentColor; font-style: normal; font-weight: 800; }
.sp2-sub { font-family: var(--f-body); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 500; color: var(--muted); margin-top: 0; }
.sp2-sub::before { display: none; }
.sp2-rows { border: 0; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.sp2-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 128px; padding: 14px; border: 0; border-radius: 20px; background: var(--wc, var(--accent)); color: #fff; }
.sp2-row:nth-child(1) { --wc: var(--w1); } .sp2-row:nth-child(2) { --wc: var(--w2); } .sp2-row:nth-child(3) { --wc: var(--w3); }
.sp2-row:nth-child(4) { --wc: var(--w4); } .sp2-row:nth-child(5) { --wc: var(--w5); } .sp2-row:nth-child(6) { --wc: var(--w6); }
.sp2-ic { width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: rgb(255 255 255 / .2); border: 0; stroke: #fff; flex: none; }
.sp2-row b { color: #fff; font-size: 15px; font-weight: 700; }
.sp2-row span { color: rgb(255 255 255 / .88); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.sp2-go { background: var(--btn); color: var(--btn-ink); border-radius: 16px; letter-spacing: 0; font-weight: 700; margin-top: 6px; }
.sp2-trust { color: var(--muted); }
@media (min-width: 700px) { .sp2-rows { grid-template-columns: repeat(3, 1fr); } }
@media (max-height: 780px) { .sp2-row { min-height: 108px; padding: 11px 12px; gap: 8px; } .sp2-ic { width: 36px; height: 36px; padding: 8px; } .splash.sp2 { gap: 10px; } }
:root[data-palette] .splash.sp2 { background: var(--paper); color: var(--ink); }
:root[data-palette] .splash.sp2 .sp2-h, :root[data-palette] .splash.sp2 .sp2-bname b { color: var(--ink); }
:root[data-palette] .splash.sp2 .sp2-h span { color: var(--accent); }
:root[data-palette] .splash.sp2 .sp2-sub, :root[data-palette] .splash.sp2 .sp2-trust { color: var(--muted); }
:root[data-palette] .splash.sp2 .sp2-go { background: var(--btn); color: var(--btn-ink); display: flex; align-items: center; justify-content: center; line-height: 1.2; }

/* How to use this app */
.howto-list { list-style: none; counter-reset: ht; margin: 6px 0 10px; padding: 0; display: grid; gap: 10px; }
.howto-list li { counter-increment: ht; position: relative; padding: 2px 0 2px 38px; min-width: 0; }
.howto-list li::before { content: counter(ht); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.howto-list b { display: block; font-size: 1rem; line-height: 1.3; }
.howto-list span { display: block; font-size: .9rem; line-height: 1.4; color: var(--muted); }
.howto-list.big { gap: 14px; margin: 12px 0 16px; }

/* Loopy AI topic guide */
.tp-hero{background:var(--w1,var(--accent-soft));border-radius:18px;padding:16px;margin:0 0 14px}
.tp-kick{display:block;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.tp-hero-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.tp-hero-txt{min-width:0;flex:1}
.tp-hero h2{margin:0 0 8px;overflow-wrap:anywhere}
.tp-chip{display:inline-block;background:var(--sheet);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:.8rem}
.tp-hero-img{width:84px;height:84px;object-fit:cover;border-radius:14px;flex:none;background:var(--sheet)}
.tp-lead{margin:10px 0;color:var(--ink)}
.tp-load{margin:10px 0;color:var(--muted)}
.tp-lvs,.tp-jumps{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tp-lv,.tp-jump,.tp-sub{border:1px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:.85rem;cursor:pointer;min-height:36px}
.tp-lv.on{background:var(--btn);color:var(--btn-ink);border-color:transparent}
.tp-subs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0}
.tp-subs small{color:var(--muted)}
.tp-sec{background:var(--sheet);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:16px;padding:14px;margin:0 0 12px}
.tp-sec.s1{border-left-color:var(--w1,var(--accent))}.tp-sec.s2{border-left-color:var(--w2,var(--accent))}.tp-sec.s3{border-left-color:var(--w3,var(--accent))}.tp-sec.s4{border-left-color:var(--w4,var(--accent))}.tp-sec.s5{border-left-color:var(--w5,var(--accent))}.tp-sec.s6{border-left-color:var(--w6,var(--accent))}
.tp-sec-h{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.tp-sec-h h3{margin:0}.tp-sec-h small{color:var(--muted)}
.tp-num{width:28px;height:28px;border-radius:50%;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;font-weight:700;flex:none}
.tp-text{margin:8px 0;line-height:1.6}
.tp-ai{background:var(--accent-soft);border-radius:12px;padding:10px;margin-bottom:8px}
.tp-ideas{margin:0;padding-left:20px;display:grid;gap:10px}
.tp-ideas li b{display:block}
.tp-gal{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.tp-fig{flex:0 0 150px;scroll-snap-align:start;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:0;overflow:hidden;position:relative;text-align:left;cursor:pointer;color:var(--ink)}
.tp-fig img{width:100%;height:110px;object-fit:contain;background:#fff;display:block}
.tp-fig small{display:block;padding:6px 8px;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-3dbadge{position:absolute;top:6px;right:6px;background:var(--btn);color:var(--btn-ink);border-radius:8px;padding:1px 7px;font-size:.72rem;font-weight:700}
.tp-chans{display:flex;gap:8px;flex-wrap:wrap}
.tp-chan{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:12px;padding:8px 12px;text-decoration:none;font-size:.9rem}
.tp-check{margin:0 0 8px;padding-left:20px;display:grid;gap:4px}
.tp-skel{display:grid;gap:10px}.tp-skel i{display:block;height:90px;border-radius:16px;background:var(--line);opacity:.5;animation:tpp 1.2s ease-in-out infinite}
@keyframes tpp{50%{opacity:.25}}
.ovcap{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;text-align:left}
.ovbody{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:8px}
.ovbody img{max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.tp-embed{width:100%;height:100%;border:0}
.tp-self{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--w1,var(--accent-soft));border-radius:14px;padding:12px;margin:10px 0}
.tp-self>div{flex:1 1 200px;min-width:0}.tp-self small{display:block;color:var(--muted);margin-top:2px}

/* Loopy AI chat */
.ai-hello{text-align:center;padding:18px 4px 8px}
.ai-hello h2{margin:10px 0 4px}
.ai-av{width:30px;height:30px;border-radius:50%;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;font-weight:700;flex:none}
.ai-av.big{width:54px;height:54px;font-size:1.5rem;margin:0 auto}
.ai-starters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ai-start{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:14px;padding:12px;font:inherit;color:var(--ink);cursor:pointer;min-height:76px}
.ai-start.c0{background:var(--w1,var(--sheet))}.ai-start.c1{background:var(--w2,var(--sheet))}.ai-start.c2{background:var(--w3,var(--sheet))}.ai-start.c3{background:var(--w4,var(--sheet))}
.ai-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ai-thread{display:grid;gap:14px;margin-bottom:12px}
.ai-row{display:flex;gap:8px;align-items:flex-start;min-width:0}
.ai-row.me{justify-content:flex-end}
.ai-bub{min-width:0;max-width:100%;overflow-wrap:anywhere;line-height:1.6}
.ai-bub.me{background:var(--accent-soft);color:var(--ink);border-radius:18px 18px 4px 18px;padding:10px 14px;max-width:85%}
.ai-row.bot .ai-bub{flex:1}
.ai-who{display:block;color:var(--muted);margin-bottom:2px}
.ai-rich p{margin:0 0 8px}.ai-rich ul,.ai-rich ol{margin:0 0 8px;padding-left:22px;display:grid;gap:4px}
.ai-rich h4{margin:10px 0 4px;color:var(--accent)}
.ai-rich strong{color:var(--accent)}
.ai-rich code{background:var(--accent-soft);border-radius:6px;padding:1px 5px;font-size:.9em}
.ai-rich pre{background:var(--raised,var(--sheet));border:1px solid var(--line);border-radius:12px;padding:10px;overflow-x:auto;margin:0 0 8px}
.ai-rich pre code{background:none;padding:0}
.ai-acts,.ai-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ai-act{border:0;background:none;color:var(--muted);font:inherit;font-size:.82rem;padding:6px 8px;border-radius:8px;cursor:pointer;min-height:32px}
.ai-dots{display:inline-flex;gap:4px;padding:8px 0}.ai-dots i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:tpp 1s ease-in-out infinite}.ai-dots i:nth-child(2){animation-delay:.15s}.ai-dots i:nth-child(3){animation-delay:.3s}
.ai-composer{position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);display:flex;gap:8px;align-items:flex-end;background:var(--sheet);border:1px solid var(--line);border-radius:22px;padding:6px 6px 6px 14px;box-shadow:0 4px 18px rgb(0 0 0/.08)}
.ai-composer .ai-in{flex:1;min-width:0;border:0;outline:0;background:none;resize:none;font:inherit;color:var(--ink);padding:8px 0;max-height:140px}
.ai-send{width:40px;height:40px;border-radius:50%;border:0;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;flex:none;cursor:pointer}
.ai-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ai-send[disabled]{opacity:.5}
.ai-fine{text-align:center;font-size:.78rem}
@media (prefers-reduced-motion:reduce){.ai-dots i,.tp-skel i{animation:none}}

/* Audience picker: stay inside the screen on every phone */
.aud-box, .aud-box * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.aud-box { overflow: hidden; }
.aud-segs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aud-seg span { padding: 9px 2px; font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; white-space: normal; }
.aud-camps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aud-camp { padding: 10px; gap: 6px; }
.aud-camp .ac-nm { overflow-wrap: anywhere; line-height: 1.2; }
.aud-sum { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 360px) { .aud-camps { grid-template-columns: minmax(0, 1fr); } }
.today-hero .hero-acts{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.today-hero .hero-acts .hero-ask{margin:0;grid-column:auto;padding:12px 6px;font-size:15px;min-width:0}

/* Loopy Search */
.bs-head h2{margin:0 0 4px}
.bs-bar{display:flex;align-items:center;gap:6px;background:var(--sheet);border:1.5px solid var(--line);border-radius:999px;padding:5px 5px 5px 14px;box-shadow:0 4px 18px rgb(0 0 0/.07);margin:10px 0 4px}
.bs-bar:focus-within{border-color:var(--accent)}
.bs-in{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink);padding:10px 0}
.bs-go{border:0;border-radius:999px;background:var(--btn);color:var(--btn-ink);font:inherit;font-weight:700;padding:10px 16px;cursor:pointer;min-height:40px}
.bs-sug{display:grid;gap:2px;margin-bottom:8px}.bs-sug:empty{display:none}
.bs-s{display:flex;gap:8px;align-items:center;text-align:left;border:0;background:var(--sheet);border-bottom:1px solid var(--line);color:var(--ink);font:inherit;padding:10px 12px;cursor:pointer;min-height:44px}
.bs-blk{margin:12px 0}.bs-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bs-tabs{display:flex;gap:6px;overflow-x:auto;padding:6px 0 10px;scrollbar-width:none}.bs-tabs::-webkit-scrollbar{display:none}
.bs-tab{flex:none;border:1px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:.9rem;cursor:pointer;min-height:38px}
.bs-tab.on{background:var(--btn);color:var(--btn-ink);border-color:transparent}
.bs-card{background:var(--sheet);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:16px;padding:14px;margin:0 0 12px}
.bs-card.ans{background:var(--w1,var(--accent-soft))}
.bs-card h3{margin:0 0 8px}
.bs-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tp-sub.strong{background:var(--btn);color:var(--btn-ink);border-color:transparent}
.bs-row{display:grid;gap:4px;padding:10px 0;border-top:1px solid var(--line);text-align:left;background:none;font:inherit;color:var(--ink);width:100%}
.bs-row:first-of-type{border-top:0}.bs-row small{color:var(--muted)}.bs-row p{margin:0}
.bs-row.link{border-left:0;border-right:0;border-bottom:0;cursor:pointer}.bs-row.link span{color:var(--accent);font-weight:700}

.bs-lvs{display:flex;gap:6px;overflow-x:auto;padding:6px 0;scrollbar-width:none}.bs-lvs::-webkit-scrollbar{display:none}
.bs-lv{flex:none;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:12px;padding:7px 10px;font:inherit;font-size:.82rem;cursor:pointer;min-height:40px}
.bs-lv b{width:20px;height:20px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-size:.75rem}
.bs-lv.on{background:var(--btn);color:var(--btn-ink);border-color:transparent}.bs-lv.on b{background:rgb(255 255 255/.25);color:inherit}
.bs-lv.locked{opacity:.85}.bs-lv i{font-style:normal;font-size:.8rem}
.bs-lock{background:var(--w4,var(--accent-soft));border-radius:14px;padding:12px;margin:6px 0}.bs-lock p{margin:4px 0 8px}
.bs-more{text-align:center;margin:6px 0 10px}
.bs-lvs,.bs-tabs{flex-wrap:wrap;overflow:visible}
.bs-lv{padding:6px 10px}

/* ===== Scroll speed: smooth like a premium app ===== */
html { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
button, a, .btn, [role="button"], .item, .tp-fig, .bs-lv, .bs-tab { touch-action: manipulation; }
/* own compositor layers for the bars that stay on screen */
.bottom-nav, .hd-tab, .hd-pal { transform: translateZ(0); backface-visibility: hidden; will-change: transform; }
.item, .tp-sec, .bs-card, .quest { contain: layout style; }
/* while the finger moves the page, stop the loops that repaint behind it */
html.is-scrolling .hero-loopy, html.is-scrolling .loopy-mini, html.is-scrolling [class^="lp-"], html.is-scrolling [class*=" lp-"],
html.is-scrolling .sp2-bg i, html.is-scrolling .sp2-chip, html.is-scrolling .cr-orb, html.is-scrolling h1 span,
html.is-scrolling .today-chip.pulse, html.is-scrolling .today-stat.pulse, html.is-scrolling .hero-say-dot, html.is-scrolling .ticker-dot,
html.is-scrolling .boxbtn-ico, html.is-scrolling .launch-in::before, html.is-scrolling .launch-in::after, html.is-scrolling .wow-conf,
html.is-scrolling .skeleton, html.is-scrolling .tp-skel i, html.is-scrolling .av-hero, html.is-scrolling .bnav-pulse .bnav-icon { animation-play-state: paused !important; }
@media (max-width: 760px) {
  /* blur effects are the most expensive thing on a mid-range Android: drop them on phones */
  .tabs button, .college-btn, #themeBtn, .chip, .welcome, .cr, .ss-back, .new-toast { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .sp2-bg i, .cr-orb { filter: none !important; }
  .sp2-chip { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

.bs-subhead{display:flex;justify-content:space-between;align-items:center}
.bs-edit{border:0;background:none;color:var(--accent);font:inherit;font-weight:700;padding:6px 8px;cursor:pointer}
.bs-subj{display:inline-flex;align-items:center;gap:2px}
.bs-x{border:0;background:var(--accent-soft);color:var(--ink);border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:.75rem}
.bs-addrow{display:flex;gap:8px;margin-top:8px}
.bs-add{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:999px;background:var(--sheet);color:var(--ink);font:inherit;font-size:16px;padding:9px 14px}

.bs-tier{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.06em;padding:2px 6px;border-radius:99px;background:var(--accent-soft);color:var(--ink)}
.bs-tier.plus{background:#f6dcc5;color:#7a4a10}
.bs-lv.on .bs-tier{background:rgb(255 255 255/.25);color:inherit}
.bs-model{margin:4px 0 8px;font-size:.88rem;color:var(--muted)}.bs-model b{color:var(--ink)}
.bs-dots{letter-spacing:.12em;color:var(--accent);white-space:nowrap}

/* ===== Loopy Search: full-screen workspace ===== */
html.bs-open, html.bs-open body { overflow: hidden; }
.bsfull { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); animation: bsIn .25s ease both; }
@keyframes bsIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bsf-bar { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px; border-bottom: 1px solid var(--line); background: var(--sheet); }
.bsf-back { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.bsf-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bsf-title { flex: 1; font-size: 1.05rem; }
.bsf-pdf { border: 0; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font: inherit; font-weight: 700; padding: 9px 16px; cursor: pointer; min-height: 40px; }
.bsf-pdf[hidden] { display: none; }
.bsf-prog { height: 3px; background: var(--line); } .bsf-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22d3ee, #6366f1, #d946ef, #f59e0b); transition: width .1s linear; }
.bsf-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 40px); max-width: 820px; width: 100%; margin: 0 auto; }
.bsr-welcome { padding: 18px 2px 6px; } .bsr-welcome h2 { font-size: 1.7rem; margin: 0 0 6px; }
.bsfull .bs-bar { padding: 8px 8px 8px 18px; box-shadow: 0 6px 26px rgb(0 0 0 / .1); }
.bsfull .bs-in { font-size: 17px; padding: 14px 0; }
.bsfull .bs-go { padding: 13px 20px; font-size: 1rem; }
.bsr-load { text-align: center; padding: 26px 0; } .bsr-load p { color: var(--muted); }
.bsr-orb { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; background: conic-gradient(#22d3ee, #6366f1, #d946ef, #f59e0b, #22d3ee); animation: orbSpin 1.1s linear infinite; -webkit-mask: radial-gradient(circle 17px, transparent 98%, #000 100%); mask: radial-gradient(circle 17px, transparent 98%, #000 100%); }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.bsr-ask { padding: 14px 2px; } .bsr-ask small { color: var(--accent); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .bsr-ask h2 { font-size: 1.5rem; margin: 4px 0 6px; overflow-wrap: anywhere; }
.bsr-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.bsr-size { display: grid; gap: 4px; text-align: left; padding: 16px 14px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--sheet); color: var(--ink); font: inherit; cursor: pointer; min-height: 104px; transition: transform .15s ease, border-color .15s ease; }
.bsr-size:active { transform: scale(.97); } .bsr-size b { font-size: 1.1rem; } .bsr-size span { color: var(--muted); font-size: .85rem; } .bsr-size i { font-style: normal; font-size: .75rem; font-weight: 800; color: #7a4a10; }
.bsr-size.z0 { background: color-mix(in srgb, #22d3ee 14%, var(--sheet)); } .bsr-size.z1 { background: color-mix(in srgb, #6366f1 14%, var(--sheet)); } .bsr-size.z2 { background: color-mix(in srgb, #d946ef 12%, var(--sheet)); } .bsr-size.z3 { background: color-mix(in srgb, #f59e0b 16%, var(--sheet)); }
.bsr-size.pre { border-color: var(--accent); }
/* report */
.bsr-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .bsr-reveal.in { opacity: 1; transform: none; }
.bsr-hero { border-radius: 22px; padding: 22px 18px; margin: 4px 0 14px; color: #fff; background: linear-gradient(120deg, #4f46e5, #7c3aed, #db2777, #f59e0b); background-size: 300% 300%; animation: heroShift 9s ease infinite; }
@keyframes heroShift { 50% { background-position: 100% 50%; } }
.bsr-hero small { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; opacity: .9; } .bsr-hero h2 { margin: 6px 0 8px; font-size: 1.7rem; overflow-wrap: anywhere; color: #fff; } .bsr-hero p { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.55; }
.bsr-meta { display: flex; gap: 8px; flex-wrap: wrap; } .bsr-meta span { background: rgb(255 255 255 / .22); border-radius: 99px; padding: 4px 11px; font-size: .8rem; font-weight: 700; }
.bsr-card { background: var(--sheet); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin: 0 0 14px; }
.bsr-card h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.bsr-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .85rem; flex: none; background: var(--c, var(--accent)); }
.bsr-card.sec { border-left: 6px solid var(--c, var(--accent)); } .bsr-card.s0 { --c: #3b82f6; } .bsr-card.s1 { --c: #16a34a; } .bsr-card.s2 { --c: #ea580c; } .bsr-card.s3 { --c: #8b5cf6; } .bsr-card.s4 { --c: #0d9488; } .bsr-card.s5 { --c: #db2777; }
.bsr-s { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; line-height: 1.65; border-left: 4px solid transparent; }
.bsr-tag { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 99px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--tc, var(--accent)); vertical-align: 1px; }
.bsr-definition { --tc: #3b82f6; background: color-mix(in srgb, #3b82f6 13%, var(--sheet)); border-left-color: #3b82f6; }
.bsr-example { --tc: #16a34a; background: color-mix(in srgb, #16a34a 13%, var(--sheet)); border-left-color: #16a34a; }
.bsr-caution { --tc: #ea580c; background: color-mix(in srgb, #ea580c 13%, var(--sheet)); border-left-color: #ea580c; }
.bsr-cause { --tc: #0d9488; background: color-mix(in srgb, #0d9488 13%, var(--sheet)); border-left-color: #0d9488; }
.bsr-fact { --tc: #8b5cf6; background: color-mix(in srgb, #8b5cf6 13%, var(--sheet)); border-left-color: #8b5cf6; }
.bsr-formula { --tc: #ca8a04; background: color-mix(in srgb, #ca8a04 15%, var(--sheet)); border-left-color: #ca8a04; font-family: ui-monospace, Menlo, monospace; font-size: .95em; }
.bsr-hl { background: none; font-weight: 800; border-radius: 4px; padding: 0 2px; } .bsr-hl.num { color: #7c3aed; background: color-mix(in srgb, #8b5cf6 14%, transparent); } .bsr-hl.name { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bsr-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bsr-num { padding: 12px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, #8b5cf6 16%, var(--sheet)), color-mix(in srgb, #22d3ee 12%, var(--sheet))); }
.bsr-num b { display: block; font-size: 1.5rem; color: #6d28d9; } .bsr-num small { color: var(--muted); line-height: 1.4; display: block; }
.bsr-tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--line); display: grid; gap: 14px; } .bsr-tl li { position: relative; display: grid; gap: 2px; } .bsr-tl li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, #22d3ee, #d946ef); border: 2px solid var(--sheet); } .bsr-tl b { color: var(--accent); }
.bsr-card.rev { background: color-mix(in srgb, #f59e0b 12%, var(--sheet)); } .bsr-card.rev ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.bsr-paper { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; } .bsr-paper:first-of-type { border-top: 0; } .bsr-paper small { color: var(--muted); } .bsr-paper p { margin: 0; }
.bsr-print { display: none; }
@media (min-width: 700px) { .bsr-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bsr-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bsr-reveal { opacity: 1; transform: none; transition: none; } .bsr-hero, .bsr-orb { animation: none; } }
/* Save as PDF: only the report prints, in full colour */
@media print {
  html.bs-open, html.bs-open body { overflow: visible !important; height: auto !important; }
  body > *:not(#bsFull) { display: none !important; }
  .bsfull { position: static !important; display: block !important; animation: none !important; background: #fff !important; }
  .bsf-bar, .bsf-prog, .bsf-noprint, .bsr-ask { display: none !important; }
  .bsf-scroll { overflow: visible !important; max-width: none !important; padding: 0 !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .bsr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bsr-hero { animation: none !important; } .bsr-card, .bsr-s { break-inside: avoid; }
  .bsr-print { display: block; text-align: right; color: #666; font-size: 11px; margin-bottom: 6px; }
}

/* Search safety dialogs */
.safe-ov { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgb(8 6 28 / .72); }
.safe-card { width: min(420px, 100%); background: var(--sheet); color: var(--ink); border-radius: 22px; padding: 22px 20px; text-align: center; border-top: 6px solid #f59e0b; box-shadow: 0 20px 60px rgb(0 0 0 / .4); animation: bsIn .2s ease both; }
.safe-card.danger { border-top-color: #dc2626; }
.safe-ic { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; color: #fff; background: #f59e0b; }
.safe-card.danger .safe-ic, .bsr-blocked .safe-ic { background: #dc2626; }
.safe-card h3 { margin: 0 0 8px; } .safe-card p { margin: 0 0 8px; line-height: 1.55; } .safe-card .btn { margin-top: 8px; }
.bsr-blocked { text-align: center; padding: 40px 10px; } .bsr-blocked h2 { margin: 6px 0 10px; } .bsr-blocked p { color: var(--muted); }

/* easy language + source cards + sticky search */
.bs-sticky{position:sticky;top:-17px;z-index:8;background:var(--paper);margin:0 -16px;padding:10px 16px 6px}
.bs-sticky.compact{box-shadow:0 8px 18px -14px rgb(0 0 0/.35)}
.bs-sticky.compact .bs-bar{margin:0}.bs-sticky.compact .bs-in{padding:10px 0;font-size:16px}.bs-sticky.compact .bs-go{padding:9px 16px}
.bs-optrow{display:flex;gap:8px;margin:4px 0 8px}
.bs-easy{border:1px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:99px;font:inherit;font-size:.85rem;padding:7px 14px;cursor:pointer;min-height:36px}
.bs-easy.on{background:color-mix(in srgb,#16a34a 18%,var(--sheet));border-color:#16a34a}
.bsr-card.easy{background:color-mix(in srgb,#16a34a 12%,var(--sheet));border-left:6px solid #16a34a}
.bsr-easy{font-size:1.08rem;line-height:1.7;margin:0 0 6px}
.bsr-def{padding:8px 0;border-top:1px solid var(--line)}.bsr-def:first-of-type{border-top:0}.bsr-def b{font-size:1.02rem;color:var(--accent)}.bsr-def i{margin-left:8px;color:var(--muted);font-size:.8rem}.bsr-def p{margin:2px 0 0}
.bsr-conf{display:grid;gap:2px;padding:10px 12px;border-radius:12px;margin-bottom:10px}
.bsr-conf.high{background:color-mix(in srgb,#16a34a 15%,var(--sheet))}.bsr-conf.medium{background:color-mix(in srgb,#f59e0b 16%,var(--sheet))}.bsr-conf.low{background:color-mix(in srgb,#dc2626 14%,var(--sheet))}
.bsr-conf span{color:var(--muted);font-size:.9rem}
.bsfull .bs-bar{margin:6px 0}
@media (min-width:700px){.bsfull .bs-in{font-size:19px}}

.bs-opts{margin:4px 0 8px;border:1px solid var(--line);border-radius:14px;background:var(--sheet);padding:0 12px}
.bs-opts summary{cursor:pointer;padding:10px 0;font-weight:700;list-style:none;color:var(--ink)}
.bs-opts summary::-webkit-details-marker{display:none}
.bs-opts[open] summary{border-bottom:1px solid var(--line);margin-bottom:8px}

.bs-eff{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0}
.bs-eff>small{color:var(--muted);font-weight:700}.bs-effh{flex-basis:100%;color:var(--muted)}
.bs-effb{border:1px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:99px;font:inherit;font-size:.85rem;padding:7px 14px;cursor:pointer;min-height:36px}
.bs-effb.on{background:var(--btn);color:var(--btn-ink);border-color:transparent}.bs-effb.locked{opacity:.8}
.bsr-checks{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px}.bsr-checks .ok{color:#15803d}.bsr-checks .no{color:var(--muted)}

.bs-credits{margin:8px 0;padding:10px 12px;border-radius:14px;background:var(--sheet);border:1px solid var(--line)}
.bs-cr-row{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.85rem;font-weight:700}
.bs-credits>i{display:block;height:6px;border-radius:99px;background:var(--line);margin:8px 0 6px;overflow:hidden}.bs-credits>i b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#22d3ee,#6366f1);transition:width .4s ease}
.bs-credits.low>i b{background:linear-gradient(90deg,#f59e0b,#dc2626)}.bs-credits small{color:var(--muted)}

.bs-offer{margin:8px 0;padding:10px 12px;border-radius:14px;background:linear-gradient(120deg,#f59e0b,#ec4899);color:#fff;font-size:.9rem;line-height:1.4}
.safe-card.gift{border-top-color:#a855f7}.gift-ic{background:linear-gradient(135deg,#f59e0b,#ec4899)!important;animation:giftPop .6s ease both}
@keyframes giftPop{0%{transform:scale(.4) rotate(-20deg)}70%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){.gift-ic{animation:none}}

.bsr-vs{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:14px}
@media (min-width:700px){.bsr-vs{grid-template-columns:1fr 1fr}}
.bsr-card.vs{margin:0;border-left:6px solid #3b82f6;background:color-mix(in srgb,#3b82f6 10%,var(--sheet))}.bsr-card.vs.b{border-left-color:#16a34a;background:color-mix(in srgb,#16a34a 10%,var(--sheet))}
.bsr-crow{padding:10px 0;border-top:1px solid var(--line)}.bsr-crow:first-of-type{border-top:0}.bsr-crow>b{display:block;margin-bottom:6px;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem}
.bsr-cells{display:grid;gap:8px}@media (min-width:700px){.bsr-cells{grid-template-columns:1fr 1fr}}
.bsr-cells p{margin:0;padding:10px 12px;border-radius:12px;line-height:1.55}.bsr-cells small{display:block;font-weight:800;margin-bottom:2px}
.bsr-cells .ca{background:color-mix(in srgb,#3b82f6 12%,var(--sheet))}.bsr-cells .ca small{color:#2563eb}.bsr-cells .cb{background:color-mix(in srgb,#16a34a 12%,var(--sheet))}.bsr-cells .cb small{color:#15803d}

.bsf-save{border:1.5px solid var(--line);border-radius:999px;background:var(--sheet);color:var(--ink);font:inherit;font-weight:700;padding:8px 14px;min-height:40px;cursor:pointer}.bsf-save[hidden]{display:none}.bsf-save.on{background:color-mix(in srgb,#16a34a 18%,var(--sheet));border-color:#16a34a}
.bs-savedlist{display:grid;gap:8px}.bs-srow{display:flex;gap:8px;align-items:center}
.bs-sopen{flex:1;min-width:0;text-align:left;display:grid;gap:2px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);font:inherit;cursor:pointer}.bs-sopen small,.bs-sopen em{color:var(--muted);font-size:.8rem;font-style:normal}
.bs-mem{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}.bs-memchk{display:flex;gap:8px;align-items:center;font-size:.9rem}
.bs-note{width:100%;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;padding:10px}

/* Loopy Brain engines */
.bs-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 8px}
.bs-mode{display:flex;gap:10px;align-items:center;text-align:left;padding:12px;border-radius:16px;border:1.5px solid var(--line);background:var(--sheet);color:var(--ink);font:inherit;cursor:pointer;min-height:58px;transition:transform .12s ease,border-color .12s ease}
.bs-mode:active{transform:scale(.97)}.bs-mode svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
.bs-mode span{display:grid;gap:1px;min-width:0}.bs-mode b{font-size:1rem}.bs-mode small{color:var(--muted);font-size:.78rem}
.bs-mode.on{background:var(--btn);color:var(--btn-ink);border-color:transparent}.bs-mode.on svg,.bs-mode.on small{color:inherit}
.bs-modes.compact{display:flex;overflow-x:auto;scrollbar-width:none}.bs-modes.compact .bs-mode{flex:none;padding:8px 14px;min-height:44px;border-radius:999px}.bs-modes.compact small{display:none}.bs-modes.compact svg{width:20px;height:20px}
.bs-modeline{margin:2px 0 8px;color:var(--muted)}.bs-modeline b{color:var(--ink)}
@media (min-width:700px){.bs-modes{grid-template-columns:repeat(4,1fr)}}
.bsr-tagline{font-size:1.1rem;font-weight:700;margin:2px 0 6px;color:var(--accent)}
.bsr-code{margin:10px 0;padding:12px;border-radius:14px;background:#0f172a;color:#e2e8f0;overflow:auto;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;max-height:420px;white-space:pre}
.bsr-bul,.bsr-checklist{margin:0 0 8px;padding-left:20px;display:grid;gap:6px}.bsr-checklist li::marker{content:"\2713  ";color:#16a34a;font-weight:800}
.bsr-hero.mode-forge{background:linear-gradient(120deg,#0f172a,#1e40af,#0ea5e9)}.bsr-hero.mode-launchpad{background:linear-gradient(120deg,#7c3aed,#db2777,#f59e0b)}.bsr-hero.mode-aegis{background:linear-gradient(120deg,#064e3b,#0f766e,#22d3ee)}

/* Neat, uniform alignment for every result card */
.bsr-card{padding:16px;margin:0 0 14px}
.bsr-card>h3{font-size:1.12rem;margin:0 0 12px;line-height:1.3}
.bsr-card>p,.bsr-card>ul,.bsr-card>ol{margin:0 0 10px}
.bsr-s{display:block;margin:0 0 10px;padding:10px 14px;border-radius:12px;border-left:4px solid var(--line);background:color-mix(in srgb,var(--paper) 70%,var(--sheet));line-height:1.65;font-size:1.01rem;text-align:left;overflow-wrap:anywhere}
.bsr-plain{--tc:var(--muted)}
.bsr-tag{display:block;width:max-content;max-width:100%;margin:0 0 6px;font-size:.66rem}
.bsr-s:last-child{margin-bottom:0}
.bsr-card.sec>h3{margin-bottom:10px}
.bsr-hero p{max-width:60ch}
.bs-sticky{border-bottom:1px solid var(--line)}
.bsr-figs{display:grid;grid-template-columns:1fr;gap:12px}.bsr-figs.one{margin:8px 0}
@media (min-width:700px){.bsr-figs:not(.one){grid-template-columns:1fr 1fr}}
.bsr-fig{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.bsr-figbtn{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in}
.bsr-figbtn img{display:block;width:100%;max-height:230px;object-fit:contain;background:#fff}
.bsr-fig figcaption{padding:8px 12px;font-size:.85rem;color:var(--ink);border-top:1px solid var(--line);background:var(--sheet)}.bsr-fig figcaption small{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}
.bsr-crow{padding:12px 0}
.bsr-cells p{line-height:1.6}

.bsr-usegrid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}@media (min-width:700px){.bsr-usegrid{grid-template-columns:1fr 1fr}}
.bsr-use{position:relative;padding:14px 14px 14px 18px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--dc) 14%,var(--sheet)),color-mix(in srgb,var(--dc) 5%,var(--sheet)));border:1px solid color-mix(in srgb,var(--dc) 28%,var(--line));overflow:hidden}
.bsr-use::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--dc)}
.bsr-dom{display:inline-block;margin-bottom:6px;padding:2px 10px;border-radius:99px;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--dc)}
.bsr-use b{display:block;font-size:1.02rem;line-height:1.35;margin-bottom:4px}.bsr-use p{margin:0;color:var(--muted);line-height:1.55;font-size:.93rem}
.bsr-useline{margin:0 0 6px!important;padding:0!important;background:none!important}

/* ===== Opening screen: smooth scroll and a more premium look ===== */
.splash.sp2 { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: auto; padding-bottom: 0; }
.splash.sp2 > * { flex-shrink: 0; }
.sp2-row { position: relative; overflow: hidden; contain: layout paint; border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 10px 22px -14px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .2); background-image: linear-gradient(155deg, rgb(255 255 255 / .2), rgb(255 255 255 / 0) 55%); background-color: var(--wc, var(--accent)); transition: transform .15s ease; }
.sp2-row::after { content: ""; position: absolute; right: -26px; top: -26px; width: 84px; height: 84px; border-radius: 50%; background: rgb(255 255 255 / .1); pointer-events: none; }
.sp2-row:active { transform: scale(.97); }
.sp2-ic { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.sp2-row b { letter-spacing: .005em; }
.sp2-h { text-wrap: balance; }
.sp2-go { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 3; box-shadow: 0 14px 28px -12px rgb(0 0 0 / .55); }
.sp2-trust { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
@keyframes sp2In { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sp2-row { animation: sp2In .45s ease both; }
.sp2-row:nth-child(2) { animation-delay: .05s; } .sp2-row:nth-child(3) { animation-delay: .1s; } .sp2-row:nth-child(4) { animation-delay: .15s; } .sp2-row:nth-child(5) { animation-delay: .2s; } .sp2-row:nth-child(6) { animation-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .sp2-row { animation: none; } }

/* ===== Diagrams drawn by Loopy ===== */
.od-svg { width: 100%; height: auto; max-height: 220px; color: var(--ink, #e8ecf6); display: block; margin: 6px 0; }
.od-svg .od-b { fill: none; stroke: currentColor; stroke-width: 2; }
.od-svg .od-b.od-acc { fill: color-mix(in srgb, var(--accent, #7c5cff) 18%, transparent); stroke: var(--accent, #7c5cff); }
.od-svg .od-l { stroke: currentColor; stroke-width: 2; fill: none; }
.od-svg text { fill: currentColor; font: 600 13px/1 system-ui, sans-serif; }
.od-svg text.od-s { font-size: 11px; font-weight: 500; opacity: .8; }
.od-cap { margin: 4px 0 2px; font-weight: 600; }

/* ===== Loopy Knowledge Pack ===== */
.pk-hero { background: linear-gradient(135deg, #5b3df5, #c026d3 55%, #f59e0b); }
.pk-hero small { letter-spacing: .08em; }
.pk-forms { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pk-form { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent, #7c5cff) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #7c5cff) 28%, transparent); }
.pk-form small { font-weight: 700; opacity: .75; }
.pk-form code { font: 600 14px/1.4 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.pk-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.pk-more { margin: 18px 4px 4px; opacity: .8; }
.pk-note { margin: 10px 4px 18px; }
.pk-steps li b { flex: none; }

/* ===== Colourful logic and circuit diagrams ===== */
.dg-svg { width: 100%; height: auto; max-height: 340px; display: block; margin: 6px 0; color: var(--ink, #1f2433); }
.dg-svg .dg-t { fill: currentColor; font: 700 13px/1 system-ui, sans-serif; }
.dg-svg .dg-t.s { font-size: 11px; font-weight: 500; opacity: .85; } .dg-svg .dg-t.b { fill: #2563eb; } .dg-svg .dg-t.g { fill: #16a34a; } .dg-svg .dg-t.m { fill: #ea580c; }
.dg-svg .dg-cap { fill: currentColor; font: 600 10px system-ui, sans-serif; }
.dg-svg .dg-w { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.dg-svg .dg-w.in { stroke: #2563eb; } .dg-svg .dg-w.out { stroke: #16a34a; } .dg-svg .dg-w.mid { stroke: #0ea5e9; } .dg-svg .dg-w.clk { stroke: #ea580c; } .dg-svg .dg-w.fb { stroke: #9333ea; stroke-dasharray: 5 3; }
.dg-svg .dg-ar { stroke: none; } .dg-svg .dg-ar.in { fill: #2563eb; } .dg-svg .dg-ar.out { fill: #16a34a; } .dg-svg .dg-ar.mid { fill: #0ea5e9; } .dg-svg .dg-ar.clk { fill: #ea580c; } .dg-svg .dg-ar.fb { fill: #9333ea; }
.dg-svg .dg-dot.in { fill: #2563eb; } .dg-svg .dg-dot.out { fill: #16a34a; } .dg-svg .dg-dot.mid { fill: #0ea5e9; } .dg-svg .dg-dot.clk { fill: #ea580c; } .dg-svg .dg-dot.fb { fill: #9333ea; }
.dg-svg .dg-gate, .dg-svg .dg-bub { stroke-width: 2.4; } .dg-svg .dg-xo { fill: none; stroke-width: 2.4; }
.dg-svg .g-and { fill: #dbeafe; stroke: #2563eb; } .dg-svg .g-or { fill: #dcfce7; stroke: #16a34a; } .dg-svg .g-not { fill: #ffedd5; stroke: #ea580c; } .dg-svg .g-xor { fill: #f3e8ff; stroke: #9333ea; }
.dg-svg .g-nand { fill: #fee2e2; stroke: #dc2626; } .dg-svg .g-nor { fill: #fce7f3; stroke: #db2777; } .dg-svg .g-xnor { fill: #cffafe; stroke: #0891b2; }
.dg-svg .dg-box { stroke-width: 2.4; } .dg-svg .dg-box.ff { fill: #ede9fe; stroke: #7c3aed; } .dg-svg .dg-box.on { fill: #dcfce7; stroke: #16a34a; } .dg-svg .dg-box.off { fill: #f1f5f9; stroke: #94a3b8; }
.dg-svg .dg-bt { fill: #1e1b4b; font: 700 12px system-ui, sans-serif; } .dg-svg .dg-clk { fill: none; stroke: #ea580c; stroke-width: 2.4; }
.dg-svg .dg-grid { stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 4; opacity: .25; }
.dg-svg .dg-cell { fill: #f8fafc; stroke: #94a3b8; stroke-width: 1.5; } .dg-svg .dg-t.one { fill: #16a34a; font-size: 18px; } .dg-svg .dg-t.zero { fill: #94a3b8; font-size: 16px; font-weight: 500; } .dg-svg .dg-t.mn { fill: #64748b; font-size: 9px; font-weight: 500; }
.dg-svg .dg-grp { fill-opacity: .22; stroke-width: 3; } .dg-svg .dg-grp.g1 { fill: #2563eb; stroke: #2563eb; } .dg-svg .dg-grp.g2 { fill: #16a34a; stroke: #16a34a; }
.dg-card .dg-key { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; margin-top: 4px; } .dg-key i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.dg-key i.k-in { background: #2563eb; } .dg-key i.k-mid { background: #0ea5e9; } .dg-key i.k-out { background: #16a34a; } .dg-key i.k-clk { background: #ea580c; } .dg-key i.k-fb { background: #9333ea; }
.dg-card .dg-svg { background: #fff; border-radius: 12px; padding: 6px; color: #1f2433; }
.dg-svg .dg-w.ax { stroke: currentColor; opacity: .7; stroke-width: 1.8; } .dg-svg .dg-fill.sat { fill: #fde68a; opacity: .45; } .dg-svg .dg-fill.cut { fill: #cbd5e1; opacity: .6; } .dg-svg .dg-fill.g { fill: #86efac; opacity: .55; } .dg-svg .dg-fill.r { fill: #fca5a5; opacity: .5; } .dg-svg .dg-fill.b { fill: #93c5fd; opacity: .5; } .dg-svg .dg-fill.p { fill: #d8b4fe; opacity: .5; }
.dg-svg .dg-ucircle { fill: none; stroke: #9333ea; stroke-width: 2.4; stroke-dasharray: 6 4; } .dg-svg .dg-zero { fill: #fff; stroke: #2563eb; stroke-width: 2.4; }
.dg-svg .dg-venn { stroke-width: 2.6; fill-opacity: .35; } .dg-svg .dg-venn.a { fill: #2563eb; stroke: #2563eb; } .dg-svg .dg-venn.b { fill: #16a34a; stroke: #16a34a; }
.pk-simple .pk-sline { margin: 6px 0; font-size: 1.04em; line-height: 1.55; }
.pk-simple h3 { margin-bottom: 4px; }

/* ===== Save as PDF or JPEG ===== */
.bsx-back { position: fixed; inset: 0; z-index: 14500; display: grid; align-items: end; background: rgb(8 6 28 / .6); }
.bsx-sheet { max-height: 92vh; overflow: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--sheet, #fff); color: var(--ink, #1f2433); display: grid; gap: 10px; }
.bsx-sheet h3 { margin: 0; }
.bsx-opt { display: grid; gap: 2px; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--line, #d9d4c7); background: color-mix(in srgb, var(--accent, #7c5cff) 8%, transparent); color: inherit; font: inherit; cursor: pointer; }
.bsx-opt b { font-size: 1.05em; } .bsx-opt small { opacity: .75; }
.bsx-prev { max-height: 52vh; overflow: auto; border-radius: 12px; border: 1px solid var(--line, #d9d4c7); background: #fff; }
.bsx-prev img { display: block; width: 100%; height: auto; }
@media print { .bsx-back { display: none !important; } }
.bsx-pages { display: grid; gap: 10px; max-height: 50vh; overflow: auto; }
.bsx-pg { margin: 0; border-radius: 12px; border: 1px solid var(--line, #d9d4c7); background: #fff; overflow: hidden; }
.bsx-pg img { display: block; width: 100%; height: auto; }
.bsx-pg figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; color: #1f2433; background: #f4efe6; }
.bsx-pg figcaption a { font-weight: 700; color: #0f2a5c; }

/* ===== Loopy Brain home: premium AI-search look ===== */
.bsh-hero { position: relative; isolation: isolate; padding: 20px 2px 4px; clip-path: inset(-80px -16px -40px -16px); }
.bsh-orb { position: absolute; z-index: -1; width: 240px; height: 240px; border-radius: 50%; pointer-events: none; animation: bshDrift 16s ease-in-out infinite alternate; }
.bsh-orb.o1 { right: -70px; top: -50px; background: radial-gradient(circle closest-side, rgb(99 102 241 / .30), transparent); }
.bsh-orb.o2 { left: -90px; top: 70px; background: radial-gradient(circle closest-side, rgb(236 72 153 / .22), transparent); animation-delay: -6s; }
@keyframes bshDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(18px, 14px, 0) scale(1.08); } }
.bsh-hi { margin: 0; color: var(--muted); font-weight: 600; letter-spacing: .01em; }
.bsh-h { margin: 6px 0 8px; font-size: clamp(1.95rem, 8.4vw, 2.6rem); line-height: 1.06; letter-spacing: -.025em; font-weight: 800; }
.bsh-h span { background: linear-gradient(90deg, #6d28d9, #db2777 55%, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bsh-sub { margin: 0 0 10px; color: var(--muted); font-size: 1rem; line-height: 1.5; max-width: 30em; }
.bsh-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.bsh-badges span { padding: 5px 10px; font-size: .78rem; font-weight: 600; border-radius: 99px; border: 1px solid var(--line); background: color-mix(in srgb, var(--sheet) 80%, transparent); color: var(--ink); }
/* the search bar */
.bsfull .bs-bar { border: 1.5px solid transparent; background: linear-gradient(var(--sheet), var(--sheet)) padding-box, linear-gradient(120deg, #22d3ee, #6366f1, #d946ef, #f59e0b) border-box; box-shadow: 0 14px 34px -16px rgb(99 102 241 / .6), 0 2px 8px rgb(0 0 0 / .05); padding: 6px 6px 6px 12px; gap: 4px; transition: box-shadow .2s ease, transform .2s ease; }
.bsfull .bs-bar:focus-within { box-shadow: 0 18px 40px -14px rgb(217 70 239 / .65), 0 0 0 4px rgb(99 102 241 / .12); }
.bs-lead { display: grid; place-items: center; width: 30px; height: 30px; flex: none; color: var(--accent); }
.bs-lead svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bs-clear, .bs-mic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.bs-clear[hidden] { display: none; }
.bs-mic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bs-mic.on { color: #fff; background: #ef4444; animation: bsMic 1.1s ease-in-out infinite; }
@keyframes bsMic { 50% { box-shadow: 0 0 0 8px rgb(239 68 68 / .2); } }
.bsfull .bs-go, .bs-go { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; display: grid; place-items: center; background: linear-gradient(135deg, #4f46e5, #c026d3); color: #fff; box-shadow: 0 8px 18px -8px rgb(192 38 211 / .8); }
.bs-go:active { transform: scale(.94); }
/* engine pills */
.bs-modes.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 6px; margin: 8px 0 2px; }
.bs-modes.pills .bs-mode { flex: none; padding: 9px 14px 9px 12px; min-height: 42px; border-radius: 999px; gap: 8px; background: color-mix(in srgb, var(--sheet) 88%, transparent); }
.bs-modes.pills .bs-mode small { display: none; }
.bs-modes.pills .bs-mode svg { width: 20px; height: 20px; }
.bs-modes.pills .bs-mode.on { background: linear-gradient(135deg, #1e1b4b, #4338ca); color: #fff; box-shadow: 0 8px 18px -10px rgb(67 56 202 / .9); }
/* sections, try cards, topic tiles */
.bs-secthead { display: block; margin: 4px 0 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; color: var(--muted); }
.bs-try { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bs-tc { display: grid; gap: 4px; align-content: start; text-align: left; padding: 13px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 6px 16px -14px rgb(0 0 0 / .5); transition: transform .15s ease, box-shadow .15s ease; }
.bs-tc:active { transform: scale(.97); }
.bs-tc i { font-style: normal; font-size: 22px; line-height: 1; }
.bs-tc b { font-size: .95rem; line-height: 1.25; }
.bs-tc small { color: var(--muted); font-size: .76rem; }
.bs-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bs-tile { display: grid; gap: 2px; align-content: end; min-height: 78px; text-align: left; padding: 12px 14px; border: 0; border-radius: 18px; color: #fff; font: inherit; cursor: pointer; background-image: linear-gradient(155deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 60%); background-color: var(--tc, #6d28d9); box-shadow: 0 10px 20px -14px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .25); transition: transform .15s ease; }
.bs-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bs-tile:active { transform: scale(.97); }
.bs-tile b { font-size: .98rem; } .bs-tile small { opacity: .9; font-size: .78rem; }
.bs-tile.on { outline: 3px solid color-mix(in srgb, var(--tc, #6d28d9) 35%, #fff); outline-offset: 2px; }
.bs-packlist { margin-top: 10px; }
.bs-fbk { opacity: .9; }
/* loading steps */
.bsr-steps { list-style: none; margin: 10px auto 6px; padding: 0; max-width: 20em; text-align: left; display: grid; gap: 8px; }
.bsr-steps li { display: flex; align-items: center; gap: 10px; opacity: 0; color: var(--muted); font-size: .95rem; animation: bsStepIn .5s ease forwards; }
.bsr-steps .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #6366f1; border-top-color: transparent; animation: orbSpin .9s linear infinite; flex: none; }
.bsr-steps .st1 { animation-delay: .1s; } .bsr-steps .st2 { animation-delay: 1.1s; } .bsr-steps .st3 { animation-delay: 2.3s; } .bsr-steps .st4 { animation-delay: 3.6s; } .bsr-steps .st5 { animation-delay: 5s; }
@keyframes bsStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.is-scrolling .bsh-orb { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .bsh-orb, .bs-mic.on, .bsr-steps li, .bsr-steps .dot { animation: none !important; } .bsr-steps li { opacity: 1; } }

.bs-modes.pills .bs-mode { padding: 8px 11px 8px 10px; gap: 6px; font-size: .94rem; }
.bs-modes.pills .bs-mode svg { width: 18px; height: 18px; }
.bsfull .bs-head .bs-credits { padding: 7px 12px; margin: 6px 0; }
.bsfull .bs-head .bs-credits small { display: none; }
.bsfull .bs-head .bs-credits .bs-cr-row { font-size: .84rem; }
.bsfull .bs-head .bs-credits > i { margin: 6px 0 0; height: 5px; }
.bsfull .bs-modeline { font-size: .9rem; margin: 2px 0 6px; }
.bsfull .bs-in, .bsfull .bs-bar .bs-in { background: transparent !important; box-shadow: none; }

/* ===== Header and search bar: no wrapping on phones ===== */
.bsf-bar { gap: 8px; }
.bsf-back { width: 38px; height: 38px; flex: none; }
.bsf-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; }
.bsf-save, .bsf-pdf { flex: none; padding: 7px 12px; min-height: 36px; font-size: .88rem; }
.bs-lead { width: 24px; height: 24px; }
.bs-clear, .bs-mic { width: 32px; height: 32px; }
.bsfull .bs-bar { padding: 5px 5px 5px 12px; gap: 2px; }
.bsfull .bs-go, .bs-go { width: 42px; height: 42px; min-height: 42px; }
.bsfull .bs-in { font-size: 16px; padding: 12px 4px; }

/* ===== Knowledge pack: colour-coded sections ===== */
.pk-c { --pc: #6366f1; border-top: 4px solid var(--pc); border-radius: 20px; box-shadow: 0 10px 24px -20px rgb(0 0 0 / .6); }
.pk-c > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.pk-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 11px; font-size: 17px; background: color-mix(in srgb, var(--pc) 16%, transparent); }
.pk-points { --pc: #2563eb; } .pk-steps { --pc: #0d9488; } .pk-forms { --pc: #7c3aed; } .pk-ex { --pc: #d97706; } .pk-exam { --pc: #16a34a; } .pk-mist { --pc: #dc2626; } .pk-learn { --pc: #475569; } .pk-acc { --pc: #0891b2; } .pk-refs { --pc: #64748b; } .pk-simple { --pc: #16a34a; }
.pk-bul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pk-bul li { position: relative; padding: 9px 12px 9px 34px; border-radius: 12px; line-height: 1.5; background: color-mix(in srgb, var(--pc) 7%, transparent); }
.pk-bul li::before { content: ""; position: absolute; left: 13px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--pc); }
.pk-stepl { list-style: none; counter-reset: pks; margin: 0; padding: 0; display: grid; gap: 8px; }
.pk-stepl li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 9px 10px; border-radius: 12px; background: color-mix(in srgb, var(--pc) 7%, transparent); line-height: 1.5; }
.pk-stepl li b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pc); color: #fff; font-size: .85rem; }
.pk-forms { display: grid; gap: 8px; }
.pk-form { border-left: 4px solid var(--pc, #7c3aed); border-radius: 12px; padding: 9px 12px; background: color-mix(in srgb, #7c3aed 8%, transparent); border-top: 0; border-right: 0; border-bottom: 0; }
.pk-form small { display: block; font-weight: 700; color: #6d28d9; margin-bottom: 2px; }
.pk-form code { font: 600 .98rem/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.pk-extitle { margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; font-weight: 700; line-height: 1.45; background: color-mix(in srgb, #d97706 12%, transparent); }
.pk-ex .pk-pre { background: color-mix(in srgb, #d97706 7%, var(--paper, #fff)); border: 1px solid color-mix(in srgb, #d97706 25%, transparent); border-radius: 12px; padding: 12px; margin: 0; font-size: .95rem; line-height: 1.55; }
.pk-answer { margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; line-height: 1.6; background: color-mix(in srgb, #16a34a 9%, transparent); border-left: 4px solid #16a34a; }
.pk-answer .bsr-tag { display: inline-block; margin: 0 8px 4px 0; background: #16a34a; color: #fff; }
.pk-warn { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; line-height: 1.5; background: color-mix(in srgb, #dc2626 8%, transparent); border-left: 4px solid #dc2626; }
.pk-warn .bsr-tag { display: inline-block; margin: 0 8px 2px 0; background: #dc2626; color: #fff; }
.pk-simple .pk-sline { margin: 8px 0; line-height: 1.55; font-size: 1.02rem; }
/* "Remember this" strip */
.pk-remember { margin: 0 0 14px; padding: 14px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #1e1b4b, #4338ca 58%, #7c3aed); box-shadow: 0 14px 28px -18px rgb(67 56 202 / .9); }
.pk-remember > small { display: block; margin-bottom: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.pk-rgrid { display: grid; gap: 8px; }
.pk-rf { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .18); }
.pk-rf span { font-size: .78rem; opacity: .85; font-weight: 700; }
.pk-rf code { font: 700 1.05rem/1.4 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
/* accuracy panel */
.pk-acclvl { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; margin-bottom: 10px; background: color-mix(in srgb, #0891b2 10%, transparent); border-left: 4px solid #0891b2; }
.pk-acclvl.high { background: color-mix(in srgb, #16a34a 12%, transparent); border-left-color: #16a34a; } .pk-acclvl.good { border-left-color: #0891b2; } .pk-acclvl.standard { background: color-mix(in srgb, #d97706 10%, transparent); border-left-color: #d97706; }
.pk-acclvl b { font-size: 1.02rem; } .pk-acclvl span { opacity: .85; font-size: .9rem; line-height: 1.4; }
.pk-checks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.pk-checks li { line-height: 1.45; padding-left: 2px; }
.pk-checks li.ok { color: #15803d; } .pk-checks li.part { color: #b45309; } .pk-checks li.no { color: var(--muted); }
.pk-meter { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 4px 0 8px; }
.pk-meter i { display: block; height: 100%; } .pk-meter b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f59e0b, #16a34a); }
.pk-meter b.w5 { width: 5%; } .pk-meter b.w10 { width: 10%; } .pk-meter b.w15 { width: 15%; } .pk-meter b.w20 { width: 20%; } .pk-meter b.w25 { width: 25%; } .pk-meter b.w30 { width: 30%; } .pk-meter b.w35 { width: 35%; } .pk-meter b.w40 { width: 40%; } .pk-meter b.w45 { width: 45%; } .pk-meter b.w50 { width: 50%; } .pk-meter b.w55 { width: 55%; } .pk-meter b.w60 { width: 60%; } .pk-meter b.w65 { width: 65%; } .pk-meter b.w70 { width: 70%; } .pk-meter b.w75 { width: 75%; } .pk-meter b.w80 { width: 80%; } .pk-meter b.w85 { width: 85%; } .pk-meter b.w90 { width: 90%; } .pk-meter b.w95 { width: 95%; } .pk-meter b.w100 { width: 100%; }

/* ===== Loopy Search "calm" look: greeting, bottom composer, quiet loading ===== */
.bsfull.calm { --paper: #faf9f5; --sheet: #ffffff; --line: #e7e2d6; --ink: #1f1e1b; --muted: #77716a; background: var(--paper); }
:root[data-theme="dark"] .bsfull.calm { --paper: #141413; --sheet: #1f1e1c; --line: #35322e; --ink: #f3f0e8; --muted: #a39e94; --accent: #e8a27c; --accent-soft: #2b2622; }
.bsfull.calm .bsf-bar { background: transparent; border-bottom: 0; }
.bsfull.calm .bsf-prog { opacity: .6; }
.bsf-night { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 17px; cursor: pointer; }
.bsfull.calm .bsf-scroll { display: flex; flex-direction: column; padding-bottom: 0; }
.bsfull.calm .bsf-scroll > * { flex: none; }
.bsc-hero { flex: 1 1 auto !important; min-height: 36vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 18px 8px; }
.bsc-mark { width: 62px; height: 62px; animation: bscSpin 28s linear infinite; }
.bsc-hi { margin: 0; font: 400 clamp(2rem, 9vw, 2.7rem)/1.12 Georgia, "Iowan Old Style", "Times New Roman", serif; letter-spacing: -.01em; }
.bsc-sub { margin: 0; color: var(--muted); font-size: 1.02rem; }
@keyframes bscSpin { to { transform: rotate(360deg); } }
.bs-dock { position: sticky; bottom: 0; z-index: 9; margin: auto -16px 0; padding: 14px 12px calc(env(safe-area-inset-bottom, 0px) + 8px); background: linear-gradient(to bottom, transparent, var(--paper) 22px); }
.bs-comp { background: var(--sheet); border: 1px solid var(--line); border-radius: 28px; padding: 12px 12px 10px; box-shadow: 0 10px 34px -16px rgb(0 0 0 / .55); transition: border-color .2s; }
.bs-comp:focus-within { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.bs-comp-top { display: flex; align-items: center; gap: 4px; }
.bs-comp .bs-in { flex: 1; min-width: 0; font-size: 17px; padding: 8px 6px 12px; background: transparent !important; box-shadow: none; border: 0; outline: 0; color: var(--ink); }
.bs-comp .bs-in::placeholder { color: var(--muted); opacity: .85; }
.bs-comp .bs-clear { width: 32px; height: 32px; }
.bs-comp-row { display: flex; align-items: center; gap: 8px; }
.bs-sp { flex: 1; }
.bs-plus { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 25px; line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0 0 3px; transition: transform .2s; }
.bs-plus.on { transform: rotate(45deg); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.bs-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; max-width: 58%; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); font: inherit; font-size: .95rem; cursor: pointer; white-space: nowrap; }
.bs-chip b { font-weight: 600; } .bs-chip span { color: var(--muted); }
.bs-comp .bs-mic { flex: none; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.bs-comp .bs-go { flex: none; width: 44px; height: 44px; min-height: 44px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: var(--ink); color: var(--paper); }
.bs-comp .bs-go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bs-sheet { max-height: 54vh; overflow-y: auto; margin-bottom: 8px; padding: 12px; border-radius: 22px; background: var(--sheet); border: 1px solid var(--line); box-shadow: 0 14px 40px -18px rgb(0 0 0 / .6); }
.bs-sheet[hidden] { display: none; }
.bs-sheet-h { display: block; margin: 4px 2px 6px; color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; }
.bs-foot { margin: 7px 8px 0; text-align: center; font-size: .72rem; color: var(--muted); }
.bs-dock .bs-sug { margin: 0 4px 8px; }
/* quiet loading */
.bsr-load.calm { padding: 8vh 6px 4vh; text-align: center; }
.bsr-mark { width: 54px; height: 54px; display: block; margin: 0 auto 18px; animation: bscSpin 3.2s linear infinite; }
.bsr-lt { margin: 0 auto 10px; max-width: 28em; font: 400 1.25rem/1.35 Georgia, "Iowan Old Style", "Times New Roman", serif; color: var(--ink); }
.bsr-says { position: relative; height: 24px; margin: 0 auto 22px; }
.bsr-says span { position: absolute; inset: 0; opacity: 0; color: var(--muted); font-size: .95rem; background: linear-gradient(90deg, var(--muted) 30%, var(--ink) 50%, var(--muted) 70%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: bsrSay 15s infinite, bsrShine 2.2s linear infinite; }
.bsr-says .sy2 { animation-delay: 3s, 0s; } .bsr-says .sy3 { animation-delay: 6s, 0s; } .bsr-says .sy4 { animation-delay: 9s, 0s; } .bsr-says .sy5 { animation-delay: 12s, 0s; }
@keyframes bsrSay { 0% { opacity: 0; transform: translateY(4px); } 4%, 18% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes bsrShine { to { background-position: -220% 0; } }
.bsr-lines { display: grid; gap: 12px; max-width: 520px; margin: 0 auto; }
.bsr-lines i { display: block; height: 12px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 25%, color-mix(in srgb, var(--ink) 16%, transparent) 50%, color-mix(in srgb, var(--ink) 7%, transparent) 75%) 0 0 / 220% 100%; animation: bsrShine 1.8s linear infinite; }
.bsr-lines i:nth-child(1) { width: 92%; } .bsr-lines i:nth-child(2) { width: 76%; } .bsr-lines i:nth-child(3) { width: 58%; }
@media (prefers-reduced-motion: reduce) { .bsc-mark, .bsr-mark, .bsr-says span, .bsr-lines i { animation: none; } .bsr-says .sy1 { opacity: 1; } }
@media print { .bs-dock { display: none !important; } }
/* Campus Loop brand image */
.bsf-brand { flex: none; width: 28px; height: 28px; border-radius: 8px; }
.bsc-brand { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 12px 34px -10px rgb(168 85 247 / .6), 0 0 0 1px rgb(255 255 255 / .08); }
.bsc-kick { margin-top: -2px; letter-spacing: .16em; font-size: .68rem; font-weight: 700; color: var(--muted); }
.bsr-brand { display: block; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 13px; box-shadow: 0 8px 22px -8px rgb(168 85 247 / .6); }
.bsr-mark { width: 38px; height: 38px; margin-bottom: 14px; }
.bsr-think { margin: 0 auto 22px; font: 400 1.2rem/1.3 Georgia, "Iowan Old Style", "Times New Roman", serif; background: linear-gradient(90deg, var(--muted) 30%, var(--ink) 50%, var(--muted) 70%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: bsrShine 2.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .bsr-think { animation: none; -webkit-text-fill-color: var(--muted); } }

/* ===== Campus Loop identity for Loopy Search: indigo night, aurora glow, orbit mark ===== */
.bsfull.calm { --paper: #f6f4ff; --sheet: #ffffff; --line: #ddd7f7; --ink: #1a1642; --muted: #6d6a98; --glow1: rgb(139 92 246 / .18); --glow2: rgb(245 158 11 / .12); background: radial-gradient(60rem 28rem at 85% -8%, var(--glow1), transparent 70%), radial-gradient(46rem 26rem at -10% 4%, var(--glow2), transparent 70%), var(--paper); }
:root[data-theme="dark"] .bsfull.calm { --paper: #0a0920; --sheet: #14123a; --line: #2c2968; --ink: #eef0ff; --muted: #9b9ccb; --accent: #a78bfa; --accent-soft: #221f55; --glow1: rgb(124 58 237 / .34); --glow2: rgb(245 158 11 / .14); }
.bsfull.calm .bsf-bar { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, var(--paper) 70%, transparent); backdrop-filter: blur(10px); }
.bsc-hero { gap: 12px; padding-top: 10px; }
.bsc-orbit { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin-bottom: 4px; }
.bsc-orbit.sm { width: 104px; height: 104px; margin: 0 auto 14px; }
.bsc-orbit .r1, .bsc-orbit .r2 { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; background: conic-gradient(from 0deg, #22d3ee, #8b5cf6, #ec4899, #f59e0b, #22d3ee) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .8; animation: bscSpin 9s linear infinite; }
.bsc-orbit .r2 { inset: 12px; opacity: .45; animation-duration: 14s; animation-direction: reverse; }
.bsc-orbit b { position: absolute; width: 9px; height: 9px; border-radius: 50%; left: 50%; top: 50%; margin: -4.5px; background: #f59e0b; box-shadow: 0 0 14px 2px rgb(245 158 11 / .7); animation: bscOrb 6s linear infinite; }
.bsc-orbit .d2 { background: #22d3ee; box-shadow: 0 0 14px 2px rgb(34 211 238 / .7); animation-duration: 9s; animation-delay: -3s; width: 7px; height: 7px; margin: -3.5px; }
.bsc-orbit .d3 { background: #ec4899; box-shadow: 0 0 14px 2px rgb(236 72 153 / .7); animation-duration: 12s; animation-delay: -7s; width: 6px; height: 6px; margin: -3px; }
@keyframes bscOrb { from { transform: rotate(0deg) translateX(68px); } to { transform: rotate(360deg) translateX(68px); } }
.bsc-orbit.sm b { animation-name: bscOrbSm; } @keyframes bscOrbSm { from { transform: rotate(0deg) translateX(46px); } to { transform: rotate(360deg) translateX(46px); } }
.bsc-orbit .bsc-brand, .bsc-orbit.sm .bsc-brand { position: relative; border-radius: 22px; width: 84px; height: 84px; box-shadow: 0 14px 40px -8px rgb(139 92 246 / .75); }
.bsc-orbit.sm .bsc-brand { width: 56px; height: 56px; border-radius: 16px; }
.bsc-hi { font: 800 clamp(1.7rem, 7.6vw, 2.25rem)/1.12 inherit; font-family: inherit; letter-spacing: -.02em; }
.bsc-hi span { background: linear-gradient(90deg, #8b5cf6, #ec4899 55%, #f59e0b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bsc-sub { max-width: 21em; line-height: 1.45; }
.bsc-kick { display: none; }
/* command bar */
.bs-comp { border: 1.5px solid transparent; background: linear-gradient(var(--sheet), var(--sheet)) padding-box, linear-gradient(120deg, #22d3ee, #8b5cf6 40%, #ec4899 70%, #f59e0b) border-box; border-radius: 26px; box-shadow: 0 18px 44px -18px rgb(139 92 246 / .75); padding: 10px 12px 10px; }
.bs-comp:focus-within { border-color: transparent; box-shadow: 0 20px 50px -14px rgb(217 70 239 / .7), 0 0 0 4px rgb(139 92 246 / .14); }
.bs-eng { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px 6px; padding: 2px 4px; }
.bs-eng::-webkit-scrollbar { display: none; }
.bs-engb { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.bs-engb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bs-engb.on { color: #fff; border-color: transparent; background: linear-gradient(120deg, #6366f1, #a855f7 60%, #ec4899); box-shadow: 0 6px 16px -6px rgb(139 92 246 / .8); }
.bs-plus { width: auto; height: 40px; padding: 0 13px 0 11px; gap: 6px; display: inline-flex; align-items: center; border-radius: 999px; font-size: .86rem; font-weight: 600; transform: none !important; }
.bs-plus.on { background: color-mix(in srgb, #8b5cf6 22%, transparent); border-color: #8b5cf6; }
.bs-tuneic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.bs-chip { height: 40px; padding: 0 13px; gap: 6px; font-size: .86rem; min-width: 0; overflow: hidden; }
.bs-lvdots { font-size: .55rem; letter-spacing: 1.5px; color: #a78bfa; }
.bs-chip-e { color: var(--muted); }
.bs-comp .bs-go { background: linear-gradient(135deg, #6366f1, #a855f7 55%, #ec4899); color: #fff; box-shadow: 0 10px 22px -8px rgb(168 85 247 / .9); }
.bs-comp .bs-mic { width: 40px; height: 40px; }
.bs-comp .bs-in { font-size: 16.5px; padding: 6px 4px 10px; }
.bs-sheet { border-radius: 20px; }
/* cards */
.bs-try .bs-tc, .bs-tile { background: linear-gradient(160deg, color-mix(in srgb, var(--sheet) 92%, #8b5cf6), var(--sheet)); border-color: color-mix(in srgb, var(--line) 80%, #8b5cf6); }
.bs-secthead { letter-spacing: .1em; }
/* loading */
.bsr-load.calm { padding: 9vh 6px 4vh; }
.bsr-think { font: 700 1.15rem/1.3 inherit; font-family: inherit; background: linear-gradient(90deg, #8b5cf6 20%, #ec4899 40%, #f59e0b 60%, #8b5cf6 80%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: bsrShine 2.6s linear infinite; }
.bsr-lines i { background: linear-gradient(90deg, color-mix(in srgb, #8b5cf6 10%, transparent) 25%, color-mix(in srgb, #8b5cf6 28%, transparent) 50%, color-mix(in srgb, #8b5cf6 10%, transparent) 75%) 0 0 / 220% 100%; }
@media (prefers-reduced-motion: reduce) { .bsc-orbit .r1, .bsc-orbit .r2, .bsc-orbit b { animation: none; } .bsr-think { animation: none; -webkit-text-fill-color: var(--ink); } }
.bs-comp-row { gap: 6px; }
.bs-chip { flex: 1 1 auto; justify-content: flex-start; max-width: none; }
.bs-sp { display: none; }
.bs-comp .bs-go { flex: none; }
@media (max-width: 460px) { .bs-chip-e { display: none; } .bs-plus span { display: none; } .bs-plus { padding: 0 11px; } }
/* the C of the brand mark turns around the cap while Loopy reads */
.bsc-brand.live { display: block; }
.bs-spinc { transform-box: fill-box; transform-origin: center; }
.bsr-load .bs-spinc { animation: bscSpin 2.4s linear infinite; }
.bsc-hero .bs-spinc { animation: bscSpin 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { .bs-spinc { animation: none !important; } }