/* ============================================================
   ai45.xyz — APP LOOK (2026-10-09). Loaded LAST on every page.
   The whole site in one design language: a black app bar with a
   notch tab, a soft-grey canvas, large white rounded cards, pastel
   accent surfaces, pill statuses, black pill buttons, a floating
   colour toolbar. Light only: the tokens below win over themes.css.
   ============================================================ */
html, html[data-palette], html[data-theme] {
  --navy: #F3F4F6; --navy-2: #ECEEF1; --slate: #E6E8EC; --card: #FFFFFF; --card-2: #F7F8FA;
  --surface: #FFFFFF; --surface-2: #F7F8FA; --hero-a: #FFFFFF; --hero-b: #F3F4F6;
  --paper: #15161A; --muted: #6B6F78; --faint: #9AA0AB; --hairline: #E6E8EC;
  --fg-rgb: 21, 22, 26; --glass-rgb: 255, 255, 255; --glass2-rgb: 255, 255, 255; --well-rgb: 21, 22, 26; --well-k: .12; --scrim-rgb: 14, 14, 16;
  --orange: #E37239; --amber: #F9982F; --sand: #B4621F; --accent-hi: #F08A4E; --on-accent: #FFFFFF;
  --ink: #0E0E10; --line: #E6E8EC;
  --lav: #EBD6FF; --lav-2: #D9BBFF; --mint: #D5F5DF; --mint-2: #B7EFC7; --sun: #FFF0B8; --sun-2: #FFE48A; --sky: #CFF2F7; --sky-2: #A8E6EF; --rose: #FFD6E0;
  --peach: #FFE0C2;
  --r: 26px; --r2: 18px;
}
body { background: var(--navy); color: var(--paper); font-size: 15px; padding-top: 76px; }
.toast { background: var(--ink); color: #fff; }
/* "Send to a friend" sheet (assets/friends.js pickAndSend) */
.fr-sheet { position: fixed; inset: 0; z-index: 880; display: grid; place-items: center; padding: 20px; background: rgba(8, 9, 12, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .22s cubic-bezier(0.32, 0.72, 0, 1); }
.fr-sheet.is-in { opacity: 1; }
.fr-sheet__card { width: min(420px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 22px; border-radius: 24px; background: var(--card); color: var(--paper); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); transform: translateY(8px) scale(.98); transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1); }
.fr-sheet.is-in .fr-sheet__card { transform: none; }
.fr-sheet h2 { font-size: 19px; font-weight: 700; }
.fr-sub { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.fr-list { margin-top: 14px; display: grid; gap: 6px; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 14px; background: var(--navy); }
.fr-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #2B1608; background: linear-gradient(140deg, #FFC56B, #F08A4E); }
.fr-who { flex: 1; min-width: 0; } .fr-who b { display: block; font-size: 14px; } .fr-who small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-h { margin-top: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fr-av--g { border-radius: 11px; color: #fff; background: linear-gradient(140deg, #B79CE8, #7FB0E8); }
.fr-av--g svg.pfp-ic { width: 58%; height: 58%; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fr-empty { padding: 12px 14px; border-radius: 14px; background: var(--navy); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.fr-empty a, .fr-link { color: var(--paper); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fr-acts { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fr-link { font-size: 13.5px; }
.fr-btn { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--navy); color: var(--paper); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background-color .2s, filter .2s; }
.fr-btn:hover { background: var(--slate); }
.fr-btn--go { background: var(--ink, #0E0E10); color: #fff; } .fr-btn--go:hover { background: var(--ink, #0E0E10); filter: brightness(1.25); }
html[data-theme="dark"] .fr-btn--go { background: var(--paper); color: var(--card); }
/* already shared there: Open goes to its whiteboard (owner, 2026-10-22) */
.fr-btn--open { display: inline-flex; align-items: center; text-decoration: none; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); }
.fr-btn--open:hover { background: color-mix(in srgb, var(--orange) 22%, transparent); }
.fr-btn--open small { margin-left: 5px; font-size: .86em; font-weight: 600; opacity: .85; white-space: nowrap; }
.fr-btn.is-done { background: color-mix(in srgb, #1E8A55 16%, transparent); color: #1E8A55; }
.fr-btn:disabled { cursor: default; }
/* AI45.ask(): the site's confirm / prompt box (auth.js), above everything incl. the SAT test view */
.ai-ask { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 20px; background: rgba(8, 9, 12, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .22s cubic-bezier(0.32, 0.72, 0, 1); }
.ai-ask.is-in { opacity: 1; }
.ai-ask__card { width: min(400px, 100%); margin: 0; padding: 22px; border-radius: 24px; background: var(--card); color: var(--paper); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); transform: translateY(8px) scale(.98); transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1); }
.ai-ask.is-in .ai-ask__card { transform: none; }
.ai-ask h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.ai-ask p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ai-ask__in { width: 100%; height: 44px; margin-top: 14px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--navy); color: var(--paper); font: inherit; font-size: 14.5px; outline: none; box-shadow: inset 0 0 0 1px var(--line); }
.ai-ask__in:focus { box-shadow: inset 0 0 0 2px var(--orange); }
.ai-ask__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.ai-ask__btn { height: 42px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; color: var(--paper); background: var(--navy); cursor: pointer; transition: background-color .2s, filter .2s; }
.ai-ask__btn:hover { background: var(--slate); }
.ai-ask__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ai-ask__btn--go { background: var(--ink, #0E0E10); color: #fff; }
.ai-ask__btn--go:hover { background: var(--ink, #0E0E10); filter: brightness(1.25); }
.ai-ask__btn--bad { background: #C0313F; color: #fff; }
.ai-ask__btn--bad:hover { background: #C0313F; filter: brightness(1.1); }
html[data-theme="dark"] .ai-ask__card { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 0 0 1px var(--line); }
html[data-theme="dark"] .ai-ask__btn--go { background: var(--paper); color: var(--card); }
@media (prefers-reduced-motion: reduce) { .ai-ask, .ai-ask__card { transition: none; } }

/* ============================================================
   APP BAR (nav.js builds it) + drawer + floating toolbar
   ============================================================ */
.bar { position: fixed; left: 0; right: 0; top: 0; z-index: 200; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; padding: 0 28px; background: var(--ink); color: #fff; }
.bar__logo img { display: block; height: 22px; width: auto; }
.bar__nav { display: flex; align-items: center; gap: 4px; }
.bar__nav a { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 13px; border-radius: 14px; color: rgba(255, 255, 255, .7); font-weight: 600; font-size: 14px; transition: background-color .2s, color .2s; }
.bar__nav a svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bar__nav a span { display: none; }
.bar__nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.bar__nav a.is-on { color: #fff; }
.bar__nav a.has-dot { position: relative; }
.bar__nav a.has-dot::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--ink, #0E0E10); }
.bar__nav a.is-on span { display: inline; }
.bar__right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.bar__up { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 13.5px; font-weight: 700; }
.bar__up svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.bar__who { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 999px; color: #fff; }
.bar__who:hover { background: rgba(255, 255, 255, .08); }
.bar__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FFB37A, #E37239); color: #1a1a1a; font-weight: 700; font-size: 15px; }
.bar__txt b { display: block; font-size: 13.5px; line-height: 1.15; }
.bar__txt small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.bar__who .nv-chev { width: 14px; height: 14px; opacity: .6; }
.bar__btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.bar .dock__burger { display: none; width: 40px; height: 40px; border-radius: 12px; place-items: center; flex-direction: column; gap: 4px; }
.bar .dock__burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
.bar__tab { position: absolute; left: 50%; bottom: 0; width: 150px; height: 15px; transform: translateX(-50%); background: var(--navy); border-radius: 14px 14px 0 0; transition: left .4s cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none; }
.bar__tab::before, .bar__tab::after { content: ""; position: absolute; bottom: 0; width: 14px; height: 14px; }
.bar__tab::before { left: -14px; background: radial-gradient(circle at 0 0, transparent 13.5px, var(--navy) 14px); }
.bar__tab::after { right: -14px; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--navy) 14px); }

/* the old dock is gone; pages pad for the bar instead */
.dock, .mega, .dock-tip { display: none !important; }
body.dock-mini .footer, .footer { padding-bottom: 40px !important; }
body.has-lockdock .footer { padding-bottom: 120px !important; } /* room for the Lock in bar, only while a session runs */

/* drawer: white sheet */
.drawer__pane { background: var(--card); border: 0; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); border-radius: 26px; }
.drawer__link { border-radius: 16px; }
.drawer__ic { background: var(--navy); border: 0; }
.drawer__link.is-here .drawer__ic { background: var(--ink); color: #fff; }
.drawer__cta { background: var(--navy); border: 0; }
.drawer__cta.is-p { background: var(--ink); color: #fff; }
.drawer__btn--p { background: var(--ink); color: #fff; }
.drawer__acct, .drawer__guest { background: var(--navy); border: 0; }

/* floating toolbar */
.tools { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 150; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 999px; background: var(--ink); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55); }
.tools a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); font-weight: 700; font-size: 16px; transition: transform .2s cubic-bezier(0.32, 0.72, 0, 1); }
.tools a:hover { transform: translateY(-3px); }
.tools a.is-here { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
.tools svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tools .c1 { background: var(--lav-2); } .tools .c2 { background: var(--sky-2); } .tools .c3 { background: var(--rose); } .tools .c4 { background: var(--sun-2); } .tools .c5 { background: #E2D8FF; } .tools .c6 { background: var(--mint-2); }
.tools .plus { background: #2A2A2E; color: #fff; }
body.menu-open .tools { display: none; }

/* progress bar sits on the black bar */
.pbar { z-index: 300; }
.pbar i { box-shadow: 0 0 10px var(--orange), 0 0 22px rgba(227, 114, 57, .7); }
.pbar__tip { top: 86px; background: var(--card); color: var(--paper); border: 0; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); }

/* ============================================================
   PAGE HEADERS
   ============================================================ */
.page-hero { padding: 34px 32px 0; }
.page-hero__frame { padding: 0 0 22px; border: 0; }
.page-hero__title, .ph__t, .ibh-title, h1.hero__title { font-size: clamp(28px, 3.2vw, 36px); font-weight: 600; letter-spacing: -0.02em; }
.page-hero__sub, .ph__s, .ibh-sub { font-size: 15px; color: var(--muted); }
.page-hero__eyebrow, .section__eyebrow, .eyebrow, .ph__crumbs, .ibh-head .eyebrow { color: var(--muted); font-weight: 600; font-size: 13px; }
.page-hero .search, .search { background: var(--card); border: 0; box-shadow: 0 1px 0 var(--line); border-radius: 999px; height: 48px; }
.ib { padding-top: 34px; }
.ph { border-bottom: 0; padding-bottom: 12px; }
.shell, .dash, .ib { max-width: 1320px; }
.dash { padding-top: 34px; }
.section { margin-top: 40px; }
.section__title { font-size: 24px; }
.rtabs { gap: 6px; border-bottom: 0; margin-top: 2px; }
.rtabs a { padding: 9px 14px; border-radius: 999px; border: 0; margin: 0; background: var(--card); color: var(--muted); box-shadow: 0 1px 0 var(--line); }
.rtabs a.is-on { background: var(--ink); color: #fff; }
/* subject tabs wrap instead of scrolling sideways, so no pill is ever cut at the edge (and the box shadow isn't clipped) */
.rtabs { flex-wrap: wrap; overflow: visible; }
.rtabs a { white-space: nowrap; }
/* a subject's sub-page row: back to the overview, this area's tabs, the SL / HL switch on its own at the end */
.rtabs { display: flex; align-items: center; gap: 8px; }
.rtabs a.rtabs__back { color: var(--paper); font-weight: 700; }
.rtabs__tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--line); }
.rtabs__lv { margin-left: auto; }

/* ============================================================
   SURFACES: everything card-like becomes a big white rounded card
   ============================================================ */
.card, .subj, .tcard, .tree, .syl, .nl__main, .panel, .ibs, .wid, .branch, .kpi, .plan__i, .dl__i, .more__btn, .hero, .next, .auth-card, .gate, .nt-gate, .tcard--start, .feed__feat, .fi, .task, .res, .thread, .ws, .post, .cd .panel, .acct, .stat, .ibh-head, .ibh-ses, .nb-block, .mcq, .rc, .ai, .nt-soon, .lesson, .ev, .nt-meta {
  background: var(--card); border: 0; box-shadow: 0 1px 0 var(--line); border-radius: var(--r);
}
.card:hover, .subj:hover, .tcard:hover, .branch:hover, .wid:hover, .ibs:hover, .fi:hover, .plan__i:hover, .dl__i:hover { background: var(--card); transform: none; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .25), 0 1px 0 var(--line); }
.fi, .task, .dl__i, .plan__i, .ts, .tree__all, .tp__h { border-radius: 16px; }
.tree, .syl, .panel { border-radius: 22px; }
.next, .nt-meta { background: var(--navy); box-shadow: none; }
.hero { padding: 30px 32px 0; }
.hero__title b { color: var(--orange); -webkit-text-fill-color: var(--orange); }
.plan { margin: 22px -32px 0; padding: 18px 32px 26px; border-top: 1px solid var(--line); }
.dl__i, .plan__i { background: var(--navy); box-shadow: none; }
.dl__add, .dl__empty, .more__btn, .stat--up, .empty { border: 1.5px dashed var(--line); }

/* pastel accents */
.branch:nth-child(1) .branch__ic, .tools .c1 { background: var(--lav-2); color: var(--ink); }
.branch:nth-child(2) .branch__ic { background: var(--sky-2); color: var(--ink); }
.branch:nth-child(3) .branch__ic { background: var(--sun-2); color: var(--ink); }
.branch__ic, .app__ic, .wid__ic, .plan__ic, .lesson__ic, .ibh-more .ic, .drawer__ic { box-shadow: none; }
.wid__ic, .plan__ic { background: var(--mint); color: #2E7D4F; }
.kpi--fire { background: var(--sun); } .kpi--acc { background: var(--sky); } .kpi--goal { background: var(--lav); } .kpi--todo { background: var(--mint); }
.subj__bar, .tcard__bar, .ibs__bar, .subj__bar i { border-radius: 999px; }
.subj__bar i, .tcard__bar i, .ibs__bar i, .ibh-ses { background: var(--mint-2); }
.ibh-ses { border: 0; }
.ring { background: conic-gradient(#2E7D4F calc(var(--p, 0) * 1%), var(--line) 0); }
.ring.is-full { background: #2E7D4F; }
.ts.is-on, .tree__all.is-on { background: var(--mint); color: var(--paper); }
.ts.is-on::after { background: #2E7D4F; }

/* note body: pastel boxes */
.note .box, .note .def, .note .ex, .note .eq, .note div.hl, .note .toc, .note figure, .note .tbl-wrap { border: 0; border-radius: 20px; }
.note .box.key { background: var(--mint); } .note .box.tip { background: var(--sky); } .note .box.trap { background: var(--rose); } .note .box.rule { background: var(--sun); } .note .box.exam { background: var(--lav); }
.note .box.nos { background: var(--sky); } .note .box.like { background: var(--sun); } .note .box.link { background: var(--lav); }
.note .box::before { color: rgba(0, 0, 0, .55); }
.note .def { background: var(--lav); } .note .def::before, .note .def dfn { color: #5B2DA0; }
.note .ex { background: var(--card); box-shadow: 0 1px 0 var(--line); }
.note .eq { background: var(--navy); }
.note div.hl { background: var(--navy); border: 1.5px dashed var(--line); }
.note .toc { background: var(--card); box-shadow: 0 1px 0 var(--line); }
.note span.hl, .ts__hl, .hlb, .nb-tag { background: var(--lav); color: #5B2DA0; border: 0; }
.mcq__o.is-right { background: var(--mint); } .mcq__o.is-wrong { background: var(--rose); }
.rc__rate button.is-on[data-r="got"] { background: #2E7D4F; } .rc__rate button.is-on[data-r="not"] { background: #D9536A; }

.chipx { background: var(--navy); }

/* ============================================================
   CONTROLS: pills
   ============================================================ */
.btn, .btn-primary, .btn-p, .btn-g, .nb-btn, .tbtn, .cust__edit, .drawer__btn, .nt-gate__btns a, .mcq__o, .rc__btn, .ai__copy, .feat__time, .pill {
  border-radius: 999px; border: 0; box-shadow: 0 1px 0 var(--line); background: var(--card); color: var(--paper); font-weight: 600;
}
.btn, .btn-g, .tbtn { height: 40px; padding: 0 16px; }
.btn--p, .btn-primary, .btn-p, .nb-btn--p, .drawer__btn--p, .nt-gate__btns .btn--p { background: var(--ink) !important; color: #fff !important; box-shadow: none; filter: none !important; }
.btn:hover, .btn-g:hover { background: var(--card-2); transform: none; }
.btn.is-on { background: var(--mint); color: #1E5C38; }
.chip { border: 0; background: var(--card); box-shadow: 0 1px 0 var(--line); border-radius: 999px; padding: 8px 14px; }
.chip.is-on { background: var(--ink); color: #fff; }
.tag--tool { color: var(--ink); }
.card--claude .tag--tool { background: var(--rose); } .card--gpt .tag--tool { background: var(--mint); } .card--pplx .tag--tool { background: var(--sky); } .card--gem .tag--tool { background: var(--lav); }
.tag--soft { border: 0; background: var(--navy); }
.field input, .search input { background: var(--navy); border: 0; border-radius: 14px; }
.field input:focus { background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.dash .search { background: var(--navy); box-shadow: none; }

/* footer: a white band */
.footer { margin: 60px 16px 0; padding: 36px 32px 130px; border: 0; border-radius: 26px 26px 0 0; background: var(--card); }
.footer__col h4 { color: var(--paper); }

/* ============================================================
   STATUS PILLS (used by notes/bank lists through classes above)
   ============================================================ */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-size: 13px; background: var(--mint); color: #1E5C38; box-shadow: none; }
.pill--up { background: var(--navy); color: var(--muted); } .pill--go { background: var(--sun); color: #6B4B00; }


@media (max-width: 920px) {
  body { padding-top: 66px; }
  .bar { grid-template-columns: auto 1fr auto; height: 66px; padding: 0 14px; }
  .bar__nav { justify-content: center; } .bar__nav a { padding: 0 10px; } .bar__nav a.is-on span { display: none; }
  .bar__txt, .bar__up span { display: none; } .bar__up { padding: 0 11px; }
  .bar .dock__burger { display: grid; }
  .bar__tab { display: none; }
  .bar__nav { min-width: 0; overflow: hidden; }
  .bar__right { gap: 6px; }
  .page-hero { padding: 22px 16px 0; } .ib, .dash { padding-top: 22px; }
  .plan { margin: 18px -16px 0; padding: 16px 16px 20px; }
  .tools { gap: 6px; padding: 8px; } .tools a { width: 40px; height: 40px; }
  .footer { margin: 40px 8px 0; padding: 28px 18px 120px; }
}

@media (max-width: 640px) {
  .bar { grid-template-columns: auto 1fr auto; }
  .bar__nav { display: none; }
  .bar__up, .bar__plan:not(.is-soon) { display: none; }
  .canvas .rail { display: none; }
}

/* hover: cards tint to a different pastel each */
.card, .subj, .tcard, .ibs, .fi, .ws, .post, .thread { transition: background-color .25s, transform .25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow .25s; }
.card:nth-child(5n+1):hover, .subj:nth-child(5n+1):hover, .tcard:nth-child(5n+1):hover, .ibs:nth-child(5n+1):hover { background: var(--rose); }
.card:nth-child(5n+2):hover, .subj:nth-child(5n+2):hover, .tcard:nth-child(5n+2):hover, .ibs:nth-child(5n+2):hover { background: var(--mint); }
.card:nth-child(5n+3):hover, .subj:nth-child(5n+3):hover, .tcard:nth-child(5n+3):hover, .ibs:nth-child(5n+3):hover { background: var(--sky); }
.card:nth-child(5n+4):hover, .subj:nth-child(5n+4):hover, .tcard:nth-child(5n+4):hover, .ibs:nth-child(5n+4):hover { background: var(--sun); }
.card:nth-child(5n+5):hover, .subj:nth-child(5n+5):hover, .tcard:nth-child(5n+5):hover, .ibs:nth-child(5n+5):hover { background: var(--lav); }
.card:hover, .subj:hover, .tcard:hover, .ibs:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .35); }
.card:hover .tag--soft, .subj:hover .subj__bar, .tcard:hover .tcard__bar { background: rgba(255, 255, 255, .7); }

/* ============================================================
   ROUND 3 (2026-10-09): hover labels in the bar, plain tab, editable
   toolbar, SL/HL slider, identical tilt-and-tint subject cards.
   ============================================================ */
.pbar { display: none !important; }
.bar__nav a { transition: background-color .25s, color .25s, padding .25s cubic-bezier(0.32, 0.72, 0, 1); }
.bar__nav a span { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s cubic-bezier(0.32, 0.72, 0, 1), opacity .25s, margin .35s; margin-left: -9px; }
.bar__nav a:hover span, .bar__nav a:focus-visible span, .bar__nav a.is-on span { max-width: 160px; opacity: 1; margin-left: 0; }
.bar__tab { width: 120px; height: 10px; border-radius: 0 0 12px 12px; transition: left .5s cubic-bezier(0.32, 0.72, 0, 1), width .3s; }
.bar__tab::before, .bar__tab::after { display: none; }

/* toolbar editor */
.tools { transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1); }
.tools.is-off { padding: 6px; }
.tools .plus { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #2A2A2E; color: #fff; font-size: 18px; font-weight: 600; }
.tools .plus svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.tools__edit { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: 260px; padding: 14px; border-radius: 20px; background: var(--card); color: var(--paper); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .4); display: grid; gap: 4px; }
.tools__edit[hidden] { display: none; }
.tools__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.tools__h button { width: 28px; height: 28px; border-radius: 50%; font-size: 18px; color: var(--muted); }
.tools__edit label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.tools__edit label:hover { background: var(--navy); }
.tools__edit input { accent-color: var(--ink); width: 16px; height: 16px; }
.tools__edit label > span { width: 18px; height: 18px; border-radius: 50%; }
.tools__edit .c1 { background: var(--lav-2); } .tools__edit .c2 { background: var(--sky-2); } .tools__edit .c3 { background: var(--rose); } .tools__edit .c4 { background: var(--sun-2); } .tools__edit .c5 { background: #E2D8FF; } .tools__edit .c6 { background: var(--mint-2); }
.tools__off { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px !important; color: var(--muted); }

/* SL / HL slider */
.lvl { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: var(--navy); }
.lvl button { height: 30px; min-width: 50px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted); transition: background-color .2s, color .2s; }
.lvl button.is-on { background: var(--ink); color: #fff; }
.subj:hover .lvl { background: rgba(255, 255, 255, .7); }

/* subject cards: identical, minimal, tilt + tint on hover */
.subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.subj { position: relative; min-height: 172px; padding: 22px 22px 18px; gap: 6px; border-radius: 26px; transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1), background-color .3s, box-shadow .35s; }
.subj__m, .subj__f, .subj__bar { display: none; }
.subj__g { font-size: 12.5px; color: var(--muted); }
.subj__n { font-size: 22px; }
.subj__lv { margin-top: auto; }
.subj__links { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.subj__links a, .subj__links span { padding: 4px 9px; border-radius: 999px; background: var(--navy); }
.subj__links a:hover { background: var(--ink); color: #fff; }
.subj:hover { transform: rotate(-1.6deg) translateY(-4px); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .4); }
.subj:nth-child(5n+1):hover { background: var(--rose); } .subj:nth-child(5n+2):hover { background: var(--mint); } .subj:nth-child(5n+3):hover { background: var(--sky); } .subj:nth-child(5n+4):hover { background: var(--sun); } .subj:nth-child(5n+5):hover { background: var(--lav); }
.subj:hover .subj__links a, .subj:hover .subj__links span { background: rgba(255, 255, 255, .75); }
.subj--edit { justify-content: center; border: 1.5px dashed var(--line); background: transparent; box-shadow: none; }
.subj--edit:hover { background: var(--card); }
.subj__hint { font-size: 13px; color: var(--muted); }
.subj__plus { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 20px; }
.main__sub { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.subjects--home { margin-top: 16px; }

/* every other card family tilts the same way */
.card:hover, .tcard:hover, .ibs:hover, .lesson:hover, .fi:hover { transform: rotate(-1deg) translateY(-3px); }

/* calendar track */
.cal { margin-top: 14px; padding: 18px; border-radius: 26px; background: var(--card); }
.cal__w { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: center; }
.cal__g { margin-top: 6px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__d { min-height: 64px; padding: 8px; border-radius: 14px; background: var(--navy); display: flex; flex-direction: column; gap: 4px; }
.cal__d.is-pad { background: transparent; }
.cal__d b { font-size: 13px; font-weight: 600; }
.cal__d.is-today { background: var(--ink); color: #fff; }
.cal__d.has { box-shadow: inset 0 0 0 1.5px var(--line); }
.cal__d .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 3px; }
.dot--rose { background: #E57A90; } .dot--sun { background: #E8B94A; } .dot--sky { background: #5BC4D4; } .dot--lav { background: #B48BE8; } .dot--mint { background: #5FC78A; }
.cal__list { margin-top: 12px; display: grid; gap: 6px; }
.cal__row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--card); }
.cal__date { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--muted); } .cal__date b { font-size: 18px; color: var(--paper); }
.cal__tag { display: inline-block; margin: 2px 4px 2px 0; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.cal__tag--rose { background: var(--rose); } .cal__tag--sun { background: var(--sun); } .cal__tag--sky { background: var(--sky); } .cal__tag--lav { background: var(--lav); } .cal__tag--mint { background: var(--mint); }
.rail__modes button { position: relative; }
.rail__modes button .n { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mint-2); color: var(--paper); font-style: normal; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 920px) { .subjects { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .subjects { grid-template-columns: 1fr; } .cal__d { min-height: 48px; padding: 6px; } }
/* base for subject cards on pages that don't load ib.css (home) */
.subjects { display: grid; margin-top: 18px; }
.subj { display: flex; flex-direction: column; color: var(--paper); }
.subj__g, .subj__n, .subj__links, .subj__lv { display: block; }
.subj__links { display: flex; }
.subj { text-align: left; align-items: flex-start; cursor: pointer; }
.subj__links a { color: var(--paper); }

/* ---------- the notch tab, refined: a light tongue inside the bar with concave shoulders ---------- */
.bar__tab { position: absolute; left: 50%; bottom: 0; width: 132px; height: 14px; transform: translateX(-50%); background: var(--navy); border-radius: 14px 14px 0 0; transition: left .5s cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none; }
.bar__tab::before, .bar__tab::after { content: ""; display: block; position: absolute; bottom: 0; width: 14px; height: 14px; }
.bar__tab::before { left: -14px; background: radial-gradient(circle at 0 0, var(--ink) 13.5px, var(--navy) 14.5px); }
.bar__tab::after { right: -14px; background: radial-gradient(circle at 100% 0, var(--ink) 13.5px, var(--navy) 14.5px); }

/* home: continue + this week, strips of mini cards */
.row2 { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.feat--flat { transform: none; box-shadow: none; }
.feat--flat:hover { transform: translateY(-3px); }
.week { padding: 20px 22px; border-radius: 26px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.week__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.week__h h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.week__ses { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--lav); color: #5B2DA0; }
.week__i { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 10px; border-radius: 14px; background: var(--navy); font-size: 14px; font-weight: 600; }
.week__i:hover { background: var(--sun); }
.week__d { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.week__d.is-late { color: #B8303F; }
.week__empty { font-size: 14px; color: var(--muted); } .week__empty a { font-weight: 700; color: var(--paper); text-decoration: underline; }
.strip { margin-top: 22px; }
.strip__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.strip__h h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.strip__h a { font-size: 13px; font-weight: 700; color: var(--muted); }
.strip__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: 22px; background: var(--card); color: var(--paper); transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1), background-color .25s; }
.mini:hover { transform: rotate(-1deg) translateY(-3px); }
.mini:nth-child(1):hover { background: var(--mint); } .mini:nth-child(2):hover { background: var(--sky); } .mini:nth-child(3):hover { background: var(--sun); }
.mini__t { font-size: 12px; font-weight: 700; color: var(--muted); }
.mini b { font-size: 15.5px; line-height: 1.25; }
.mini__m { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.mini--claude .mini__t { color: #B8484F; } .mini--gpt .mini__t { color: #1E7D50; } .mini--pplx .mini__t { color: #1C7480; } .mini--gem .mini__t { color: #3E63C9; }
.events .todo { margin-top: 0; }
@media (max-width: 900px) { .row2, .strip__row { grid-template-columns: 1fr; } }

/* the app bar wins over the progress-bar `.bar` rules in dashboard.css / sat.css */
#app-bar.bar { height: 76px; border-radius: 0; overflow: visible; background: var(--ink); }
#app-bar .bar__tab { width: 112px; height: 12px; border-radius: 12px 12px 0 0; bottom: 0; }
#app-bar .bar__tab::before, #app-bar .bar__tab::after { width: 12px; height: 12px; }
#app-bar .bar__tab::before { left: -12px; background: radial-gradient(circle at 0 0, var(--ink) 11.5px, var(--navy) 12.5px); }
#app-bar .bar__tab::after { right: -12px; background: radial-gradient(circle at 100% 0, var(--ink) 11.5px, var(--navy) 12.5px); }
@media (max-width: 920px) { #app-bar.bar { height: 66px; } }

/* the notch is one SVG shape now: a light tongue rising from the canvas into the bar, concave sides */
#app-bar .bar__tab, .bar__tab { width: 160px; height: 14px; border-radius: 0; background: none; bottom: 0; left: 50%; transform: translateX(-50%); display: block; overflow: visible; }
#app-bar .bar__tab::before, #app-bar .bar__tab::after, .bar__tab::before, .bar__tab::after { display: none; content: none; }
#app-bar .bar__tab path { fill: var(--navy); }
body.home #app-bar .bar__tab path { fill: var(--soft, #EAF4FB); }

/* ============================================================
   NOTE READER (notes.html): plain, easy to read. The note sits on a
   white page, no card borders; sections divided by headings and air;
   bold key terms; pastel blocks without borders.
   ============================================================ */
body.read { background: #fff; }
/* the bar's tab is the colour of the page under it: white while reading a note (light mode) */
html:not([data-theme="dark"]) body.read #app-bar .bar__tab path { fill: #fff; }
body.read .tools { opacity: .92; }
#notes .nl { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
#notes .nl__main { max-width: 740px; background: none; box-shadow: none; border-radius: 0; padding: 0; }
#notes .ph { padding-bottom: 6px; }
#notes .ph__t { font-size: clamp(30px, 3.6vw, 42px); letter-spacing: -0.025em; }
#notes .ph__t small { font-size: .5em; color: var(--muted); }
#notes .nt-kind { display: none; }
#notes .nt-acts { margin-top: 14px; padding-bottom: 0; border: 0; }
#notes .nt-meta { margin: 14px 0 0; padding: 0; background: none; box-shadow: none; gap: 22px; font-size: 13.5px; color: var(--muted); }
#notes .nt-meta div b { display: inline; margin-right: 6px; font-weight: 700; }
#notes .nt-meta div span { display: inline; }
#notes .rtabs { margin-top: 10px; }

#notes .note { margin-top: 26px; font-size: 17px; line-height: 1.72; color: #2A2C33; }
#notes .note p.lead { font-size: 19px; line-height: 1.6; color: var(--paper); font-weight: 500; }
#notes .note h2 { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--paper); }
#notes .note h2:first-of-type { border-top: 0; padding-top: 0; }
#notes .note h3 { margin-top: 28px; font-size: 19.5px; font-weight: 700; color: var(--paper); }
#notes .note h4 { margin-top: 20px; font-size: 16.5px; font-weight: 700; }
#notes .note p { margin-top: 14px; }
#notes .note b, #notes .note strong, #notes .note dfn { font-weight: 700; color: var(--paper); }
#notes .note ul, #notes .note ol { margin-top: 12px; padding-left: 1.3em; }
#notes .note li { margin-top: 8px; }
#notes .note li::marker { color: var(--muted); }
#notes .note .box, #notes .note .def, #notes .note div.hl, #notes .note .ex, #notes .note .eq, #notes .note .toc, #notes .note figure, #notes .note .tbl-wrap, #notes .note pre { border: 0; box-shadow: none; border-radius: 18px; }
#notes .note .box, #notes .note .def, #notes .note div.hl { margin-top: 22px; padding: 18px 22px; }
#notes .note .box::before, #notes .note .def::before, #notes .note div.hl::before, #notes .note .ex::before, #notes .note .ex-h { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
#notes .note .box.key { background: #E6F7EC; } #notes .note .box.tip { background: #E3F4F8; } #notes .note .box.trap { background: #FDE8EC; } #notes .note .box.rule { background: #FFF5D6; } #notes .note .box.exam { background: #F1E8FF; }
#notes .note .box.nos { background: #E3F4F8; } #notes .note .box.like { background: #FFF5D6; } #notes .note .box.link { background: #F1E8FF; }
#notes .note .def { background: #F1E8FF; }
#notes .note .ex { margin-top: 22px; padding: 20px 22px; background: #F5F6F8; }
#notes .note .ex .q { font-weight: 600; color: var(--paper); }
#notes .note .ex .a { margin-top: 10px; }
#notes .note .eq { margin-top: 18px; padding: 18px; background: #F5F6F8; }
#notes .note div.hl { background: #FAF7FF; border: 1.5px dashed #D9BBFF; }
#notes .note .toc { background: none; padding: 0; gap: 6px 8px; }
#notes .note .toc span { width: 100%; font-size: 12px; font-weight: 700; color: var(--muted); }
#notes .note .toc a { padding: 6px 12px; border-radius: 999px; background: #F5F6F8; font-size: 13px; font-weight: 600; color: var(--paper); }
#notes .note .toc a:hover { background: var(--ink); color: #fff; }
#notes .note .ns { scroll-margin-top: 100px; }
#notes .note table { font-size: 15px; }
#notes .note th { background: #F5F6F8; font-weight: 700; color: var(--paper); }
#notes .note td, #notes .note th { padding: 10px 14px; border-bottom: 1px solid var(--line); }
#notes .note figure { background: #F5F6F8; padding: 18px; }
#notes .note figcaption { color: var(--muted); font-size: 13.5px; }
#notes .nb-block { margin-top: 48px; padding: 0; border: 0; background: none; box-shadow: none; }
#notes .nb-block__h { font-size: 24px; }
#notes .mcq, #notes .rc, #notes .ai { background: #F5F6F8; box-shadow: none; border-radius: 18px; }
#notes .nt-soon, #notes .nt-gate { background: #F5F6F8; box-shadow: none; }
#notes .nt-pager { margin-top: 40px; }
#notes .nt-pager a { background: #F5F6F8; border-radius: 16px; }
#notes .nl__side .syl, #notes .nl__side .tree { background: #F5F6F8; box-shadow: none; }
@media (max-width: 1000px) { #notes .nl { grid-template-columns: 1fr; gap: 24px; } }

/* "Key points": a numbered contents list, no pills */
#notes .note .toc { display: block; margin-top: 22px; padding: 0 0 0 2px; counter-reset: kp; }
#notes .note .toc span { display: block; width: auto; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); margin-bottom: 6px; font-family: var(--font-display); }
#notes .note .toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 0; border-radius: 0; background: none; font-size: 16px; font-weight: 600; color: var(--paper); border-bottom: 1px solid var(--line); counter-increment: kp; }
#notes .note .toc a::before { content: counter(kp, decimal-leading-zero); font-size: 12px; font-weight: 700; color: var(--muted); }
#notes .note .toc a:last-child { border-bottom: 0; }
#notes .note .toc a:hover { background: none; color: var(--orange); }

/* ---------- skim bars: a translucent colour strip in the margin for each kind of block ---------- */
#notes .note [data-kind] { position: relative; }
#notes .note [data-kind]::after { content: ""; position: absolute; top: 4px; bottom: 4px; right: -26px; width: 5px; border-radius: 3px; opacity: .55; pointer-events: none; }
#notes .note [data-kind="concept"]::after { background: #5B8DEF; }
#notes .note [data-kind="memo"]::after { background: #F28A2E; }
#notes .note [data-kind="method"]::after { background: #2FB36B; }
#notes .note [data-kind="example"]::after { background: #9B6BE0; }
#notes .note [data-kind="exam"]::after { background: #E8577A; }
#notes .note [data-kind="visual"]::after { background: #22B5C4; }
#notes .note .ex[data-kind]::after, #notes .note .box[data-kind]::after, #notes .note .def[data-kind]::after, #notes .note .eq[data-kind]::after { top: 10px; bottom: 10px; }
.kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.kinds__t { font-weight: 700; margin-right: 4px; }
.kinds button { display: inline-flex; align-items: center; gap: 7px; padding: 4px 2px; font-size: 13px; font-weight: 600; color: var(--muted); border-radius: 8px; }
.kinds button:hover, .kinds button.is-on { color: var(--paper); }
.kinds button.is-on { text-decoration: underline; text-underline-offset: 4px; }
.kb { width: 14px; height: 5px; border-radius: 3px; opacity: .75; }
.kb--concept { background: #5B8DEF; } .kb--memo { background: #F28A2E; } .kb--method { background: #2FB36B; } .kb--example { background: #9B6BE0; } .kb--exam { background: #E8577A; } .kb--visual { background: #22B5C4; }
/* pick a colour in the key to dim everything else */
#notes .note[data-focus="concept"] [data-kind]:not([data-kind="concept"]), #notes .note[data-focus="memo"] [data-kind]:not([data-kind="memo"]), #notes .note[data-focus="method"] [data-kind]:not([data-kind="method"]), #notes .note[data-focus="example"] [data-kind]:not([data-kind="example"]), #notes .note[data-focus="exam"] [data-kind]:not([data-kind="exam"]), #notes .note[data-focus="visual"] [data-kind]:not([data-kind="visual"]) { opacity: .28; }
#notes .note[data-focus] [data-kind] { transition: opacity .25s; }
@media (max-width: 1000px) { #notes .note [data-kind]::after { right: -12px; } }

/* skim bars v2: a real element in the margin (hover shows what it means), never clipped by scrolling blocks */
#notes .note [data-kind]::after { content: none; }
#notes .note .eq, #notes .note .tbl-wrap, #notes .note pre, #notes .note .sim { overflow: visible; }
#notes .note .eq mjx-container, #notes .note .tbl-wrap table, #notes .note pre code { max-width: 100%; overflow-x: auto; }
#notes .note .eq mjx-container[display="true"] { display: block; }
.kbar { position: absolute; top: 2px; bottom: 2px; right: -30px; width: 18px; cursor: help; }
.kbar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 7px; width: 5px; border-radius: 3px; opacity: .5; transition: opacity .2s, width .2s, left .2s; }
.kbar:hover::before { opacity: .95; width: 7px; left: 6px; }
.kbar--concept::before { background: #5B8DEF; } .kbar--memo::before { background: #F28A2E; } .kbar--method::before { background: #2FB36B; } .kbar--example::before { background: #9B6BE0; } .kbar--exam::before { background: #E8577A; } .kbar--visual::before { background: #22B5C4; }
.kbar::after { content: attr(data-l); position: absolute; top: 0; right: 24px; white-space: nowrap; padding: 6px 11px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(0.32, 0.72, 0, 1); z-index: 5; }
.kbar:hover::after { opacity: 1; transform: none; }
.kinds button small { font-weight: 500; color: var(--muted); }
@media (max-width: 1000px) { .kbar { right: -16px; } }

/* ---------- account page ---------- */
.acct-frame { padding: 0 0 18px !important; min-height: 0 !important; text-align: left; align-items: stretch; }
.acct-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 24px; border-radius: 26px; background: var(--card); }
.acct-id { display: flex; align-items: center; gap: 16px; }
.acct-av { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 700; color: #1a1a1a; background: linear-gradient(135deg, #FFB37A, #E37239); }
.acct-name { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.acct-mail { font-size: 13.5px; color: var(--muted); }
.acct-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.logout-btn { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--navy); color: var(--paper); font-weight: 600; border: 0; }
.logout-btn:hover { background: var(--ink); color: #fff; }
.logout-btn.is-danger { color: #B8303F; } .logout-btn.is-danger:hover { background: var(--rose); color: #8A2A3C; }
.stat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-tiles .stat { padding: 18px 16px; border-radius: 20px; text-align: left; }
.stat-tiles .stat:nth-child(1) { background: var(--sky); } .stat-tiles .stat:nth-child(2) { background: var(--lav); } .stat-tiles .stat:nth-child(3) { background: var(--mint); } .stat-tiles .stat:nth-child(4) { background: var(--sun); } .stat-tiles .stat:nth-child(5) { background: var(--rose); }
.stat__label { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--paper); }
.stat__value { margin-top: 8px; font-size: 32px; }
.stat__hint { color: rgba(0, 0, 0, .55); }
.acct-subs { margin-top: 14px; display: grid; gap: 8px; }
.acct-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--navy); }
.acct-sub b { display: block; font-size: 14.5px; } .acct-sub small { display: block; font-size: 12px; color: var(--muted); }
.acct-sub__na { font-size: 12px; color: var(--muted); }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.acct-row:first-child { border-top: 0; padding-top: 0; }
.acct-row b { display: block; font-size: 14.5px; }
.acct-row .btn-g { white-space: nowrap; }
.nl-row { border-top: 1px solid var(--line) !important; }
@media (max-width: 920px) { .stat-tiles { grid-template-columns: 1fr 1fr; } }

/* ---------- sweep: coming-soon pages, about, forum, blog, guide, onboarding, games, 404 ---------- */
.soon .feat, .feat--soon, .faq, .post, .thread, .ws, .auth-card, .soon-card, .games-card { background: var(--card); border: 0; box-shadow: 0 1px 0 var(--line); border-radius: 22px; }
.faq summary { font-weight: 700; }
.feat__ic, .soon-badge { background: var(--lav); color: #5B2DA0; box-shadow: none; }
.post__teacher { background: var(--mint); color: #1E5C38; }
body.wl, .wl-bg { background: var(--navy) !important; }
.wl-step { background: var(--card); border: 0; box-shadow: 0 1px 0 var(--line); border-radius: 26px; }
.wl-prog i, .wl-prog b { background: var(--orange); }
.mono { font-family: var(--font-display); letter-spacing: 0; text-transform: none; }
.tag.mono, .crumbs { font-size: 12.5px; }
.article h2 { font-size: 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.article p { font-size: 16.5px; line-height: 1.7; color: #2A2C33; }
.callout { background: var(--sun); border: 0; border-radius: 18px; }
.copy-btn { border-radius: 999px; background: var(--ink); color: #fff; border: 0; }
.prompt-body { background: #F5F6F8; border: 0; border-radius: 16px; }

/* ---------- onboarding (welcome.html): flat canvas, white step card, black pills ---------- */
body.wl, .wl { background: var(--navy) !important; }
.wl-bg { display: none !important; }
.wl-top { background: none; }
.wl-step, .wl-sub { font-family: var(--font-display); letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--card); padding: 6px 12px; border-radius: 999px; border: 0; }
.wl-out { color: var(--muted); font-weight: 600; }
.wl-prog { background: var(--line); } .wl-prog i, .wl-prog b, .wl-prog > * { background: var(--ink); }
.q { max-width: 760px; margin: 0 auto; padding: 36px 40px 32px; border-radius: 28px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.q__eyebrow, .fl, .fl--big, .q__hint, .row__k { font-family: var(--font-display); letter-spacing: 0; text-transform: none; }
.q__eyebrow { font-size: 13px; font-weight: 700; color: var(--muted); }
.q__t { font-size: clamp(28px, 3.4vw, 38px); font-weight: 600; letter-spacing: -0.025em; }
.q__s { color: var(--muted); font-size: 15.5px; }
.fl, .fl--big { font-size: 13px; font-weight: 700; color: var(--paper); }
.q input[type="text"], .q input[type="number"], .q input[type="date"], .q input[type="email"], .q select, .q textarea { background: var(--navy); border: 0; border-radius: 14px; font-size: 18px; color: var(--paper); }
.q input:focus, .q select:focus { outline: 0; box-shadow: 0 0 0 2px var(--ink); background: var(--card); }
.ch, .tile, .tick, .row { background: var(--navy); border: 0; border-radius: 999px; color: var(--paper); font-weight: 600; }
.ch:hover, .tile:hover, .tick:hover { background: var(--sun); }
.ch.is-on, .ch[aria-pressed="true"], .tile.is-on, .tick.is-on, .ch--date.is-on { background: var(--ink); color: #fff; }
.tile, .tick, .row { border-radius: 16px; }
.tile.is-on .tile__ic, .tick.is-on .tick__box { background: #fff; color: var(--ink); }
.wb, .wb--p { border-radius: 999px; background: var(--ink); color: #fff; box-shadow: none; filter: none; }
.wb--g { background: var(--navy); color: var(--paper); }
.q__foot { gap: 12px; }
.q__foot kbd { font-family: var(--font-display); background: var(--navy); border: 0; border-radius: 6px; }
.glass { background: var(--card); border: 0; box-shadow: 0 1px 0 var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 20px; }
.sum, .wl .nl { background: var(--navy); border: 0; border-radius: 20px; }
#notes .nl { background: none; border-radius: 0; }
.nl__i { background: var(--card); border-radius: 12px; }
.gauge__fill { background: var(--orange); } .gauge__track { background: var(--line); }
.gauge__pin--tgt { background: var(--ink); }
.q__err { color: #B8303F; }
.done-mark { background: var(--mint); color: #1E5C38; }
@media (max-width: 640px) { .q { padding: 24px 18px; border-radius: 22px; } }

/* ---------- SAT app chrome (sat.html): tabs as pills ---------- */
.sat-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.sat-tab { border-radius: 999px; padding: 9px 16px; font-weight: 600; color: var(--muted); background: none; border: 0; }
.sat-tab:hover { background: var(--navy); color: var(--paper); }
.sat-tab.is-on, .sat-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.theme-btn { display: none; }

/* ============================================================
   SAT APP (sat.html views: practice, notes, vocab, desmos, mistakes,
   stats). Everything that was a bordered card becomes a white rounded
   card; labels plain; buttons pills; fills orange/mint. The SAT
   test screen (.bb) keeps its exam look on purpose.
   ============================================================ */
.sat-view .panel, .sat-view .qb-sec, .sat-view .qb-row, .sat-view .qb-all, .sat-view .mist, .sat-view .mtile, .sat-view .glance__tile, .sat-view .dt__card, .sat-view .dtc, .sat-view .note-wrap, .sat-view .nside, .sat-view .nsec, .sat-view .mg, .sat-view .notice-soft, .sat-view .empty-state, .sat-view .bank-tbl, .sat-view .chart, .sat-view .glance, .sat-view .log-list, .sat-view .activity, .sat-view .dt-ref, .sat-view .dt-steps, .sat-view .dt-tips, .sat-view .dt-answer, .sat-view .io-row, .sat-view .note-toc, .sat-view .vc, .sat-view .vcard, .sat-view .vrow, .sat-view .vstats, .sat-view .vset, .sat-view .vgame, .sat-view .vtile, .sat-view .stat-card, .sat-view .skills, .sat-view .skill, .sat-view .streak, .sat-view .heat {
  background: var(--card); border: 0; box-shadow: 0 1px 0 var(--line); border-radius: 20px;
}
.sat-view .qb-row, .sat-view .mist__row, .sat-view .nsec, .sat-view .vrow { border-radius: 16px; }
.sat-view .qb-row:hover, .sat-view .mtile:hover, .sat-view .dtc:hover, .sat-view .vtile:hover { background: var(--sun); transform: none; }
.sat-view .qb-sec:nth-child(odd):hover { background: var(--card); }
.sat-view .eyebrow, .sat-view .crumb, .sat-view .panel__h, .sat-view .qb-sec__meta, .sat-view .note-head__kind, .sat-view .note-meta, .sat-view .glance__sub, .sat-view .dtc__t, .sat-view .mist__facts, .sat-view .log-head, .sat-view .h-title small, .sat-view .lede small, .sat-view .faint, .sat-view .muted, .sat-view .mono { font-family: var(--font-display); letter-spacing: 0; text-transform: none; }
.sat-view .eyebrow, .sat-view .panel__h, .sat-view .qb-sec__meta, .sat-view .note-head__kind { font-size: 13px; font-weight: 700; color: var(--muted); }
.sat-view .h-title, .sat-view .note-head__title, .sat-view .qb-all__t, .sat-view .dt__title { font-weight: 600; letter-spacing: -0.02em; }
.sat-view .btn, .sat-view .qb-row__btn, .sat-view .qb-chip, .sat-view .qb-chip__btn, .sat-view .dt__acts button, .sat-view .mist__acts button, .sat-view .note-actions a, .sat-view .note-actions button, .sat-view .vbtn, .sat-view .qb-clear, .sat-view .qb-back { border-radius: 999px; border: 0; background: var(--navy); color: var(--paper); font-weight: 600; box-shadow: none; }
.sat-view .btn--primary, .sat-view .qb-row__btn--p, .sat-view .btn.is-primary, .sat-view .qb-all__acts .btn--primary, .sat-view .dt__acts .btn--primary, .sat-view .vbtn--p { background: var(--ink) !important; color: #fff !important; }
.sat-view .qb-chip.is-on, .sat-view .qb-chip[aria-pressed="true"], .sat-view .qb-opt.is-on, .sat-view .diff.is-on { background: var(--ink); color: #fff; }
.sat-view .qb-menu, .sat-view .bb-pop { background: var(--card); border: 0; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .35); border-radius: 18px; }
.sat-view .meter, .sat-view .chart__track, .sat-view .dt__prog, .sat-view .qb-row__prog .meter, .sat-view .gauge__track { background: var(--line); border: 0; }
.sat-view .bar__fill, .sat-view .chart__fill, .sat-view .dt__prog i, .sat-view .bar__fill--blue { background: var(--orange); }
.sat-view .bar__fill--blue { background: #5B8DEF; }
.sat-view .qb-row__acc b, .sat-view .glance__big { color: var(--paper); }
.sat-view .diff { border-radius: 999px; background: var(--navy); border: 0; }
.sat-view .diff--E, .sat-view .diff.e { background: var(--mint); } .sat-view .diff--M, .sat-view .diff.m { background: var(--sun); } .sat-view .diff--H, .sat-view .diff.h { background: var(--rose); }
.sat-view .nsec__h { background: none; }
.sat-view .nsec--traps { background: #FDE8EC; } .sat-view .nsec--look { background: #E3F4F8; } .sat-view .nsec--checklist { background: #E6F7EC; }
.sat-view .note { font-size: 16.5px; line-height: 1.7; }
.sat-view .note h2, .sat-view .note h3 { font-weight: 700; }
.sat-view .note-toc__chip { border-radius: 999px; background: var(--navy); border: 0; }
.sat-view .note-toc__chip.is-on { background: var(--ink); color: #fff; }
.sat-view .notice-soft { background: var(--sun); }
.sat-view .mist__note, .sat-view input[type="text"], .sat-view input[type="search"], .sat-view textarea, .sat-view select { background: var(--navy); border: 0; border-radius: 12px; }
.sat-view .activity__bar { background: var(--orange); border-radius: 3px; }
.sat-view .confetti { display: none; }
.sat-view .qb-cols { gap: 16px; }
.sat-view .glance__tile--ring .ring { background: conic-gradient(var(--orange) calc(var(--p, 0) * 1%), var(--line) 0); }
.sat-view .tile, .sat-view .trap-card, .sat-view .tree__dom, .sat-view .syl, .sat-view .stack, .sat-view .result, .sat-view .weak, .sat-view .vmode, .sat-view .vlevels, .sat-view .bar-row, .sat-view .sumrow, .sat-view .resume-bar, .sat-view .summary__tiles > *, .sat-view .qb-dom, .sat-view .page-hero--compact {
  background: var(--card); border: 0; box-shadow: 0 1px 0 var(--line); border-radius: 20px;
}
.sat-view .bar-row, .sat-view .sumrow, .sat-view .weak__row, .sat-view .tree__sec { box-shadow: none; background: transparent; }
.sat-view .tile:hover, .sat-view .vmode:hover, .sat-view .trap-card:hover { background: var(--lav); transform: none; box-shadow: 0 1px 0 var(--line); }
.sat-view .tile__h, .sat-view .tree__dom-h, .sat-view .tree__sec-h, .sat-view .trap-card__t, .sat-view .vmode__t, .sat-view .results-h, .sat-view .syl__h, .sat-view .stack__legend, .sat-view .weak__i, .sat-view .bar-row__l { font-family: var(--font-display); letter-spacing: 0; text-transform: none; font-weight: 700; }
.sat-view .tile__v, .sat-view .result__t, .sat-view .vc__count { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.sat-view .seg { background: var(--navy); border: 0; border-radius: 999px; padding: 3px; }
.sat-view .seg > * { border-radius: 999px; border: 0; }
.sat-view .seg .is-on, .sat-view .seg [aria-pressed="true"] { background: var(--ink); color: #fff; }
.sat-view .tree__link, .sat-view .tree__toggle { border-radius: 10px; border: 0; }
.sat-view .tree__link:hover { background: var(--sun); }
.sat-view .stack__bar { border-radius: 6px; }
.sat-view .vcard__face, .sat-view .vcard__back { background: var(--card); border: 0; border-radius: 22px; box-shadow: 0 12px 30px -18px rgba(0,0,0,.3); }
.sat-view .vcard__back { background: var(--sky); }
.sat-view .vrate button, .sat-view .vc__flipbtn, .sat-view .vc__new, .sat-view .vmode__opt { border-radius: 999px; border: 0; background: var(--navy); font-weight: 600; }
.sat-view .vrate--again { background: var(--rose); }
.sat-view .vmode__art { background: var(--lav); border-radius: 16px; }
.sat-view .ring { background: conic-gradient(var(--orange) calc(var(--p, 0) * 1%), var(--line) 0); }
.sat-view .ring__in { background: var(--card); }
.sat-view .stats-grid { gap: 16px; }
.sat-view .sat-loading { color: var(--muted); }
.sat-view .qb-row__note, .sat-view .bars__dom, .sat-view .note-toc__all, .sat-view .ring__in span, .sat-view .vc__count, .sat-view .mg__timer, .sat-view .stack__legend, .sat-view .activity__axis, .sat-view .chart__l, .sat-view .summary__list small, .sat-view th { font-family: var(--font-display); letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 600; }
.sat-view .dtc__method, .sat-view .tbl-wrap, .sat-view th, .sat-view td, .sat-view .vcard__hint, .sat-view .note-pager, .sat-view .dt__head, .sat-view .qb-sec__foot, .sat-view .mist__top, .sat-view .log-head { border-color: var(--line); }
.sat-view .tbl-wrap { border: 0; border-radius: 16px; background: var(--card); }
.sat-view code, .sat-view .dt-steps code, .sat-view .dt-tips code { border: 0; background: var(--navy); border-radius: 6px; }
.sat-view .vcard__hint span, .sat-view i[class=""] { border: 0; }

/* ---- SAT notes: read like the IB reader (plain sections, no cards-in-cards, no pills) ---- */
.sat-view .notes { gap: 28px; }
.sat-view .nb { border: 0; padding-bottom: 6px; }
.sat-view .note-wrap { padding: 36px 40px 40px; border-radius: 24px; max-width: none; }
.sat-view .note-head__title { font-size: clamp(30px, 3.4vw, 40px); }
.sat-view .note-head__kind { font-size: 14px; margin-top: 6px; }
.sat-view .note-actions { border: 0; padding-bottom: 0; margin-top: 16px; }
.sat-view .note-actions .btn--soft, .sat-view .note-actions .btn--soft.is-on { background: var(--navy); color: var(--paper); border: 0; }
.sat-view .note-actions .btn--soft.is-on { background: var(--mint); }
.sat-view .note-meta { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.sat-view .note-head__sum { font-size: 17px; }
/* at-a-glance tiles: flat grey wells inside the white page */
.sat-view .glance__tile { background: var(--navy); box-shadow: none; border-radius: 16px; }
.sat-view .glance__tile--ring { background: var(--navy); }
/* "On this page": a numbered list, not chips */
.sat-view .note-toc { display: block; margin-top: 30px; padding: 18px 22px; border-radius: 16px; background: var(--navy); counter-reset: toc; }
.sat-view .note-toc::before { content: "In this note"; display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.sat-view .note-toc__chip { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border: 0; background: none; border-radius: 0; font-size: 15px; font-weight: 500; transform: none; counter-increment: toc; }
.sat-view .note-toc__chip::before { content: counter(toc, decimal-leading-zero); font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sat-view .note-toc__chip > span { display: none; }
.sat-view .note-toc__chip:hover { color: var(--orange); }
.sat-view .note-toc__all { display: block; margin: 10px 0 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--orange); }
/* sections: headings on the page, separated by a hairline — no boxes, no tints */
.sat-view .nsec, .sat-view .nsec[open], .sat-view .nsec--traps, .sat-view .nsec--look, .sat-view .nsec--checklist { background: none; border: 0; box-shadow: none; border-radius: 0; margin-top: 0; overflow: visible; }
.sat-view .nsec + .nsec { border-top: 1px solid var(--line); }
.sat-view .nsec__h { padding: 26px 0 6px; gap: 12px; background: none; }
.sat-view .nsec__h:hover { background: none; }
.sat-view .nsec__h:hover .nsec__t { color: var(--orange); }
.sat-view .nsec__ic { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; background: var(--navy); }
.sat-view .nsec__t { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; }
.sat-view .nsec__meta { font-size: 12.5px; }
.sat-view .nsec__body { padding: 0 0 26px; border: 0; }
.sat-view .nsec__body > :first-child { margin-top: 12px; }
.sat-view .note { color: var(--ink); }
.sat-view .note h4 { margin-top: 26px; font-weight: 700; }
.sat-view .note b, .sat-view .note strong { font-weight: 700; }
.sat-view .note li::marker { color: var(--muted); }
.sat-view .note code { border: 0; background: var(--navy); }
/* callouts: soft pastel blocks with a plain bold label */
.sat-view .note .box { border: 0; border-left: 0; border-radius: 14px; padding: 16px 20px; background: var(--sun); }
.sat-view .note .box.rule { background: var(--sky); } .sat-view .note .box.tip { background: var(--mint); } .sat-view .note .box.trap { background: var(--rose); } .sat-view .note .box.key { background: var(--lav); }
.sat-view .note .box-t, .sat-view .note .box:not(:has(> .box-t))::before { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
.sat-view .note .box.key:not(:has(> .box-t))::before { content: "Key points"; }
.sat-view .note .demo { background: var(--navy); border-radius: 12px; }
.sat-view .note .ex { border: 0; background: var(--navy); border-radius: 16px; }
.sat-view .note .ex-h { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); }
.sat-view .note .ex-passage { background: var(--card); border: 0; border-radius: 12px; }
.sat-view .note ol.steps > li { border: 0; background: var(--navy); }
.sat-view .note ol.steps > li::before { background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 700; }
.sat-view .note details > summary { border: 0; background: var(--navy); color: var(--ink); }
.sat-view .note details > summary:hover { background: var(--sun); }
.sat-view .trap-card { border: 0; background: var(--rose); box-shadow: none; }
.sat-view .trap-card:hover { background: var(--rose); }
.sat-view .trap-card__n { font-family: var(--font-display); font-size: 12px; font-weight: 600; }
.sat-view .note-pager a { border: 0; background: var(--navy); border-radius: 16px; }
.sat-view .note-pager a:hover { background: var(--sun); }
/* side tree */
.sat-view .nside .syl { padding: 18px 20px; }
.sat-view .tree { background: var(--card); border: 0; box-shadow: 0 1px 0 var(--line); border-radius: 20px; }
.sat-view .tree__link > span.ring, .sat-view .tree .ring { flex: none; width: 16px; height: 16px; }
.sat-view .tree__dom-h .ring { width: 18px; height: 18px; }
.sat-view .tree__link.is-on, .sat-view .tree__dom-h.is-on { background: var(--sun); }
.sat-view .tree__link.is-on::after { display: none; }
.sat-view .tree__sec + .tree__sec { border-top: 1px solid var(--line); }
.sat-view .tree__foot { font-family: var(--font-display); font-size: 12.5px; letter-spacing: 0; border-top: 1px solid var(--line); }
.sat-view .tree__n { font-family: var(--font-display); font-size: 11.5px; }
.sat-view .tree__sec-h { font-size: 13px; color: var(--muted); }
/* hero: shorter so the note starts sooner */
.page-hero--compact .page-hero__frame { padding: 52px 44px 30px; }
@media (max-width: 760px) { .sat-view .note-wrap { padding: 24px 18px 28px; } .page-hero--compact .page-hero__frame { padding: 26px 18px 20px; } }
.sat-view .nsec__meta, .sat-view .trap-card__n { font-family: var(--font-display); letter-spacing: 0; text-transform: none; }

/* the extension button beside Upgrade */

/* cleaner bar: one accent (Upgrade), quiet icon buttons, the widget only shows its box on hover */
.bar { padding: 0 24px; }
.bar__left { gap: 14px; }
.bar__right { gap: 8px; }
.bar__nav { gap: 2px; }
.bar__nav a { height: 40px; padding: 0 12px; border-radius: 12px; }
#app-bar .bw__pill { height: 40px; background: none; padding: 0 8px 0 6px; }
#app-bar .bw__pill:hover, #app-bar #bar-widget.is-open .bw__pill { background: rgba(255, 255, 255, .08); }
#app-bar .bw__chev { opacity: 0; transition: opacity .2s, transform .2s; }
#app-bar .bw__pill:hover .bw__chev, #app-bar #bar-widget.is-open .bw__chev { opacity: 1; }
.bar__up, .bar__btn { height: 36px; }
.bar__who { padding: 3px 6px 3px 3px; }
.bar__av { width: 32px; height: 32px; font-size: 14px; }
/* the account chip keeps its size: long names/emails trim with … */
.bar__who { max-width: 220px; }
.bar__txt { min-width: 0; max-width: 150px; }
.bar__txt b, .bar__txt small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ============================================================
   Smooth page loads (nav.js adds html.ai45-ready)
   - pages cross-fade (cross-document view transitions); the bar and the Lock in dock hold still
   - a veil in the page colour covers the content until it has rendered (fonts, store, first paint),
     then fades away; the animated logo appears on it only if loading takes longer than ~0.45s
   - failsafe: the veil lifts by itself after 3s even if a script fails
   ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
#app-bar { view-transition-name: app-bar; }
.ld { view-transition-name: lock-dock; }
::view-transition-group(app-bar), ::view-transition-group(lock-dock) { animation-duration: .26s; }
body { animation: none; } /* the old whole-page fade blinked the bar on every click */
body::after { content: ""; position: fixed; inset: 0; z-index: 140; background: inherit; pointer-events: none; animation: ai45-veil 0s linear 3s forwards; }
body::before { content: ""; position: fixed; left: 50%; top: 50%; z-index: 141; width: 280px; height: 90px; margin: -45px 0 0 -140px; background: url("logo.svg?v=5") center / contain no-repeat; pointer-events: none; opacity: 0; animation: ai45-logo-in .4s cubic-bezier(0.32, 0.72, 0, 1) .45s forwards, ai45-veil 0s linear 3s forwards; }
@keyframes ai45-logo-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
/* a page or tab that's still loading shows the animated logo instead of the word "Loading" (owner, 2026-10-22); the
   text stays in the page for screen readers. Add .ai45-load to any new loading placeholder. */
:is(.ib-loading, .dash-loading, .sat-loading, .qb-loading, .ac-loading, .up-loading, .jq-load, .tq-load, div.loading, .ai45-load) { position: relative; display: block; min-height: 240px; padding: 0 !important; color: transparent !important; font-size: 0 !important; text-align: center; }
:is(.ib-loading, .dash-loading, .sat-loading, .qb-loading, .ac-loading, .up-loading, .jq-load, .tq-load, div.loading, .ai45-load)::before { content: ""; position: absolute; left: 50%; top: 50%; width: 220px; height: 71px; margin: -35px 0 0 -110px; background: url("logo.svg?v=5") center / contain no-repeat; opacity: 0; animation: ai45-logo-in .35s cubic-bezier(0.32, 0.72, 0, 1) .12s forwards; }
/* a whole page still loading (owner, 2026-10-25: "larger and centred"): the placeholder fills the screen under the bar,
   so the logo sits in the middle of the window, as big as the one on the veil */
main > :is(.ib-loading, .dash-loading, .sat-loading, .qb-loading, .ac-loading, .up-loading, .jq-load, .tq-load, div.loading, .ai45-load) { min-height: calc(100svh - 190px); }
main > :is(.ib-loading, .dash-loading, .sat-loading, .qb-loading, .ac-loading, .up-loading, .jq-load, .tq-load, div.loading, .ai45-load)::before { width: 280px; height: 90px; margin: -45px 0 0 -140px; }
@media (max-width: 600px) { main > :is(.ib-loading, .dash-loading, .sat-loading, .qb-loading, .ac-loading, .up-loading, .jq-load, .tq-load, div.loading, .ai45-load)::before { width: 220px; height: 71px; margin: -35px 0 0 -110px; } }
@media (prefers-reduced-motion: reduce) { :is(.ib-loading, .dash-loading, .sat-loading, .qb-loading, .ac-loading, .up-loading, .jq-load, .tq-load, div.loading, .ai45-load)::before { animation: none; opacity: 1; } }
@keyframes ai45-veil { to { opacity: 0; visibility: hidden; } }
html.ai45-ready body::after, html.ai45-ready body::before { animation: none; opacity: 0; visibility: hidden; transition: opacity .38s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear .38s; }
html.ai45-ready main, html.ai45-ready .canvas { animation: ai45-in .5s cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes ai45-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  body::before { display: none; }
  html.ai45-ready main, html.ai45-ready .canvas { animation: none; }
}

/* ============================================================
   Colour schemes (assets/theme.js sets html[data-scheme]). Classic = the tokens at the top.
   Each scheme swaps the page, the bar/buttons ink, the accent and the pastels.
   ============================================================ */
html { --soft: #EAF4FB; }
html.theme-anim body, html.theme-anim #app-bar, html.theme-anim .card, html.theme-anim .subj, html.theme-anim .c { transition: background-color .5s cubic-bezier(0.32, 0.72, 0, 1), color .5s; }
html[data-scheme="sky"] {
  --navy: #E9F1FA; --navy-2: #DFEAF6; --slate: #D5E2F0; --card-2: #F5F9FD; --surface-2: #F5F9FD; --hero-b: #E9F1FA; --soft: #E1EDF9;
  --paper: #10203A; --muted: #5A6B85; --faint: #8D9BB0; --hairline: #D9E4F1; --line: #D9E4F1; --fg-rgb: 16, 32, 58;
  --ink: #12233F; --orange: #E37239; --sand: #B4621F;
  --lav: #DCE3FF; --lav-2: #C5D0FF; --mint: #D3F1E8; --sky: #CBE6FB; --sky-2: #A9D4F5; --sun: #FFEFC2; --rose: #FFDCE4;
}
html[data-scheme="sage"] {
  --navy: #EDF2EC; --navy-2: #E3EBE2; --slate: #D7E2D5; --card-2: #F6F9F5; --surface-2: #F6F9F5; --hero-b: #EDF2EC; --soft: #E6EFE4;
  --paper: #15281C; --muted: #5C6E61; --faint: #8FA093; --hairline: #DBE5D9; --line: #DBE5D9; --fg-rgb: 21, 40, 28;
  --ink: #15301F; --orange: #2E8B57; --amber: #3FA66B; --sand: #22704A; --accent-hi: #3FA66B;
  --lav: #E1E6D3; --lav-2: #CFD8BC; --mint: #CFEBD6; --mint-2: #B3DFC0; --sky: #D4ECE8; --sun: #F4EDC6; --rose: #F6DDD6;
}
html[data-scheme="lilac"] {
  --navy: #F3F0FA; --navy-2: #EAE5F6; --slate: #E0D9F0; --card-2: #F9F7FD; --surface-2: #F9F7FD; --hero-b: #F3F0FA; --soft: #EDE7FA;
  --paper: #1E1533; --muted: #6A6082; --faint: #9E95B3; --hairline: #E4DEF2; --line: #E4DEF2; --fg-rgb: 30, 21, 51;
  --ink: #24193F; --orange: #7C5CFF; --amber: #9478FF; --sand: #5B3FD6; --accent-hi: #9478FF;
  --lav: #E4D9FF; --lav-2: #D2C2FF; --mint: #D9F1E6; --sky: #D8E8FB; --sun: #FBEFCB; --rose: #FBDDEA;
}
html[data-scheme="sand"] {
  --navy: #F4EFE7; --navy-2: #EDE6DA; --slate: #E3D9C9; --card: #FFFDF9; --card-2: #FBF7F1; --surface: #FFFDF9; --surface-2: #FBF7F1; --hero-b: #F4EFE7; --soft: #F1E9DC;
  --paper: #2A2118; --muted: #74685A; --faint: #A6998A; --hairline: #E7DED0; --line: #E7DED0; --fg-rgb: 42, 33, 24;
  --ink: #2A2118; --orange: #C8572A; --amber: #D9712F; --sand: #9C4320; --accent-hi: #D9712F;
  --lav: #EEDFE9; --mint: #E1EBD3; --sky: #DCE9EC; --sun: #FBEBC1; --rose: #F8DCD2;
}
/* ---------- dark schemes (theme.js sets data-theme="dark"): one shared layer, then each scheme's base tones ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --orange: #F08A4E; --amber: #F9A35F; --sand: #F6A77C; --accent-hi: #F9A35F; --on-accent: #2B1608;
  --well-rgb: 0, 0, 0; --scrim-rgb: 0, 0, 0;
  /* pastel surfaces keep their colour, just deep (owner, 2026-10-21: "dark mode does not mean no colour"): a jewel
     tone of each pastel's own hue, the same in every dark scheme. oklch keeps it saturated at a low lightness, so light
     text stays readable; the old 24% sRGB mix into the card came out pale and grey (owner, 2026-10-22) */
  --lav: oklch(0.35 0.085 300); --lav-2: oklch(0.41 0.10 300);
  --mint: oklch(0.36 0.068 160); --mint-2: oklch(0.42 0.08 160);
  --sun: oklch(0.38 0.068 80); --sun-2: oklch(0.44 0.08 80);
  --sky: oklch(0.36 0.09 250); --sky-2: oklch(0.42 0.105 250);
  --rose: oklch(0.36 0.09 10); --peach: oklch(0.38 0.075 55);
  --e-sun: #F2C94C; --e-lav: #B79CE8; --e-mint: #6FCF97; --e-sky: #7FB0E8; --e-rose: #F28BA0;
  --t-lav: #C9B5FF; --t-sun: #F2C66B; --t-mint: #8FD9A8; --t-rose: #FF9DB0; --t-sky: #8FD3DE;
}
html[data-theme="dark"] {
  --navy: #0F1115; --navy-2: #14171D; --slate: #232733; --card: #181B22; --card-2: #1F232B; --surface: #181B22; --surface-2: #1F232B; --hero-a: #181B22; --hero-b: #0F1115; --soft: #0F1115;
  --paper: #ECEEF2; --muted: #A0A6B2; --faint: #6E7583; --hairline: #262A33; --line: #262A33;
  --fg-rgb: 236, 238, 242; --glass-rgb: 24, 27, 34; --glass2-rgb: 31, 35, 43; --ink: #2B303C; --bar: #07080A;
}
html[data-scheme="navy"] {
  --navy: #0B1424; --navy-2: #0F1A2E; --slate: #1F2E48; --card: #121F35; --card-2: #182842; --surface: #121F35; --surface-2: #182842; --hero-a: #121F35; --hero-b: #0B1424; --soft: #0B1424;
  --paper: #E8EEF8; --muted: #9DAECA; --faint: #66789A; --hairline: #22324D; --line: #22324D;
  --fg-rgb: 232, 238, 248; --glass-rgb: 18, 31, 53; --glass2-rgb: 24, 40, 66; --ink: #22324F; --bar: #060C18;
}
html[data-scheme="forest"] {
  --navy: #0D1611; --navy-2: #111D16; --slate: #213428; --card: #142019; --card-2: #1A2920; --surface: #142019; --surface-2: #1A2920; --hero-a: #142019; --hero-b: #0D1611; --soft: #0D1611;
  --paper: #E6F0E9; --muted: #9BB1A2; --faint: #64796B; --hairline: #22352A; --line: #22352A;
  --fg-rgb: 230, 240, 233; --glass-rgb: 20, 32, 25; --glass2-rgb: 26, 41, 32; --ink: #263A2E; --bar: #070D09;
}
html[data-scheme="plum"] {
  --navy: #130F1D; --navy-2: #181326; --slate: #2B2442; --card: #1B1529; --card-2: #221B34; --surface: #1B1529; --surface-2: #221B34; --hero-a: #1B1529; --hero-b: #130F1D; --soft: #130F1D;
  --paper: #EEE9FA; --muted: #ACA3C5; --faint: #756C8E; --hairline: #2C2541; --line: #2C2541;
  --fg-rgb: 238, 233, 250; --glass-rgb: 27, 21, 41; --glass2-rgb: 34, 27, 52; --ink: #332A4A; --bar: #0A0711;
}
html[data-scheme="espresso"] {
  --navy: #16110C; --navy-2: #1C1610; --slate: #31271B; --card: #211912; --card-2: #2A2017; --surface: #211912; --surface-2: #2A2017; --hero-a: #211912; --hero-b: #16110C; --soft: #16110C;
  --paper: #F3ECE2; --muted: #B7A895; --faint: #7F725F; --hairline: #33281C; --line: #33281C;
  --fg-rgb: 243, 236, 226; --glass-rgb: 33, 25, 18; --glass2-rgb: 42, 32, 23; --ink: #3A2E21; --bar: #0D0906;
}
/* ---------- the theme's own accent, not orange (student report R-69CDCC, 2026-11-09) ----------
   Classic, Midnight, Espresso and Christmas keep the ai45 orange. Sky and the dark Navy / Forest / Plum used to keep it
   too (an orange Upgrade button on a lilac page); now each takes its own colour, site-wide. Sand keeps its terracotta.
   --ha-* are the home tokens: home rules read var(--ha-x, <the old orange>), so a theme without them (classic,
   midnight, espresso, Christmas) renders exactly as before. --ha-g1/2 = the solid Lock in tile and Explore card,
   --ha-solid = filled dots and rings, --ha-c / --ha-d = the "peach" widget's wash and text, --ha-bar1/2 = accent on
   the dark top bar, --ha-glow1/2 = the AI glow's first two colours (assistant.css). */
html[data-scheme="sky"]:not([data-season="christmas"]) { --orange: #2563EB; --amber: #3B82F6; --sand: #1D4ED8; --accent-hi: #3B82F6; --on-accent: #FFFFFF; }
html[data-scheme="navy"]:not([data-season="christmas"]) { --orange: #6CA6FF; --amber: #8BB8FF; --sand: #A9CAFF; --accent-hi: #8BB8FF; --on-accent: #081631; }
html[data-scheme="forest"] { --orange: #4CC38A; --amber: #6FD3A0; --sand: #9BDFBC; --accent-hi: #6FD3A0; --on-accent: #052014; }
html[data-scheme="plum"] { --orange: #A68CFF; --amber: #BBA6FF; --sand: #CDBDFF; --accent-hi: #BBA6FF; --on-accent: #170D33; }
html:is([data-scheme="sky"], [data-scheme="navy"]):not([data-season="christmas"]), html:is([data-scheme="sage"], [data-scheme="forest"], [data-scheme="lilac"], [data-scheme="plum"], [data-scheme="sand"]) {
  --ha: var(--orange); --ha-hi: var(--accent-hi); --ha-d: var(--sand); --ha-solid: var(--orange);
  --ha-c: color-mix(in srgb, var(--orange) 20%, #fff); --ha-wash: color-mix(in srgb, var(--orange) 24%, #fff);
}
html[data-theme="dark"]:is([data-scheme="navy"], [data-scheme="forest"], [data-scheme="plum"]):not([data-season="christmas"]) {
  --ha-c: var(--orange); --ha-wash: color-mix(in srgb, var(--orange) 30%, #13151C);
}
html[data-scheme="sky"]:not([data-season="christmas"]) { --ha-g1: #2563EB; --ha-g2: #4F46C8; --ha-glow1: #3B82F6; --ha-glow2: #8BD3FF; }
html[data-scheme="navy"]:not([data-season="christmas"]) { --ha-g1: #2457C9; --ha-g2: #4F46C8; --ha-solid: #3B6FE0; --ha-glow1: #6CA6FF; --ha-glow2: #A9CAFF; }
html:is([data-scheme="sky"], [data-scheme="navy"]):not([data-season="christmas"]) { --ha-bar1: #6CA6FF; --ha-bar2: #A9CAFF; }
html[data-scheme="sage"] { --ha-g1: #2E8B57; --ha-g2: #25667C; --ha-glow1: #3FA66B; --ha-glow2: #B5E86F; }
html[data-scheme="forest"] { --ha-g1: #23885C; --ha-g2: #25667C; --ha-solid: #2A8661; --ha-glow1: #4CC38A; --ha-glow2: #B5E86F; }
html:is([data-scheme="sage"], [data-scheme="forest"]) { --ha-bar1: #4CC38A; --ha-bar2: #9BDFBC; }
html[data-scheme="lilac"] { --ha-g1: #7C5CFF; --ha-g2: #5B3FD6; --ha-glow1: #9478FF; --ha-glow2: #F0A6FF; }
html[data-scheme="plum"] { --ha-g1: #6236C9; --ha-g2: #4140BE; --ha-solid: #7C5CFF; --ha-glow1: #A68CFF; --ha-glow2: #F0A6FF; }
html:is([data-scheme="lilac"], [data-scheme="plum"]) { --ha-bar1: #A68CFF; --ha-bar2: #CDBDFF; }
html[data-scheme="sand"] { --ha-g1: #C8572A; --ha-g2: #823548; --ha-glow1: #E58A5E; --ha-glow2: #F2B98F; --ha-bar1: #E58A5E; --ha-bar2: #F2B98F; }
html[data-theme="dark"] #app-bar.bar { background: var(--bar); }
html[data-theme="dark"] :is(.kc, .cxp, .qcard, .ev__t, .feat__time, .feat__avs span, .hg-mini, .seg button.is-on, .hw-sizes button.is-on, .kban__h em, .tile.is-on .tile__ic) { background: var(--card-2); color: var(--paper); }
html[data-theme="dark"] body.read { background: var(--navy); }
html[data-theme="dark"] :is(.week__ses, .tl__ses, .note .def::before, .note .def dfn, .chipx--lg, .feat__ic) { color: var(--t-lav); }
html[data-theme="dark"] :is(.aip__tool, .gl__tool).t-claude { color: #FFB3C4; }
html[data-theme="dark"] :is(.aip__tool, .gl__tool).t-gpt { color: #9BE3B6; }
html[data-theme="dark"] :is(.aip__tool, .gl__tool).t-pplx { color: #9EDCE6; }
html[data-theme="dark"] :is(.aip__tool, .gl__tool).t-gem { color: #CDB8FF; }
html[data-theme="dark"] .pm__blank { color: #FFB48A; }
html[data-theme="dark"] img.logo, html[data-theme="dark"] .g-logo { filter: none; }
/* progress fills keep their colour */
html[data-theme="dark"] :is(.subj__bar i, .tcard__bar i, .ibs__bar i, .ibh-ses) { background: var(--e-mint); }
/* (the coloured top edges that stood in for pastels in dark are gone: the pastels have their colour again) */

/* ============================================================
   Site map: the burger extends the bar downwards (nav.js buildDrawer)
   ============================================================ */
.bar .dock__burger { display: grid; width: 40px; height: 40px; border-radius: 12px; place-items: center; align-content: center; gap: 4px; transition: background-color .2s; }
.bar .dock__burger:hover, body.menu-open .bar .dock__burger { background: rgba(255, 255, 255, .1); }
body.menu-open #app-bar .bar__tab { opacity: 0; }
#app-bar .bar__tab { transition: left .5s cubic-bezier(0.32, 0.72, 0, 1), opacity .25s; }
.mm { position: fixed; inset: 0; z-index: 190; visibility: hidden; pointer-events: none; transition: visibility 0s linear .5s; }
.mm.is-open { visibility: visible; pointer-events: auto; transition: none; }
.mm__scrim { position: absolute; inset: 0; background: rgba(var(--scrim-rgb, 14, 14, 16), .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .45s cubic-bezier(0.32, 0.72, 0, 1); }
.mm.is-open .mm__scrim { opacity: 1; }
.mm__panel { position: absolute; left: 0; right: 0; top: 76px; max-height: calc(100dvh - 76px); overflow: auto; overscroll-behavior: contain; background: var(--ink); color: #fff; border-radius: 0 0 28px 28px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); clip-path: inset(0 0 100% 0 round 0 0 28px 28px); transition: clip-path .5s cubic-bezier(0.32, 0.72, 0, 1); }
.mm.is-open .mm__panel { clip-path: inset(0 0 0 0 round 0 0 28px 28px); }
.mm__panel.is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); } /* scrolled: content fades under the bar */
.mm__in { max-width: 1320px; margin: 0 auto; padding: 22px 28px 30px; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 34px; }
.mm__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 18px; }
.mm__col, .mm__side { opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .45s cubic-bezier(0.32, 0.72, 0, 1); }
.mm.is-open .mm__col, .mm.is-open .mm__side { opacity: 1; transform: none; transition-delay: calc(.06s + var(--i) * .04s); }
.mm h4 { margin: 0 0 8px; padding: 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.mm__col a { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 12px; color: #fff; transition: background-color .2s; } /* names only, the description is the hover tip (owner, 2026-10-27: "we don't need so many descriptions") */
.mm__col a:hover, .mm__col a:focus-visible { background: rgba(255, 255, 255, .08); outline: 0; }
.mm__col a.is-here { background: rgba(255, 255, 255, .12); }
.mm__ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
.mm__ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mm__col a.is-here .mm__ic { background: var(--orange); }
.mm__col b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.mm__col small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .5); }
.mm__side { display: flex; flex-direction: column; gap: 18px; padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .1); }
.mm__acct { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .06); color: #fff; }
.mm__acct:hover { background: rgba(255, 255, 255, .1); }
.mm__acct > span:nth-child(2) { flex: 1; min-width: 0; }
.mm__acct b { display: block; font-size: 14px; } .mm__acct small { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mm__acct > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .6; }
.mm__guest p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .65); }
.mm__guest div { display: flex; flex-wrap: wrap; gap: 6px; }
.mm__btn { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .1); }
.mm__btn--p { background: #fff; color: var(--ink); }
.mm__sw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mm__modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; margin: 0 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.mm__modes button { height: 30px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .7); transition: background-color .2s, color .2s; }
.mm__modes button:hover { color: #fff; }
.mm__modes button.is-on { background: #fff; color: var(--ink); }
.mm__sw button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; color: rgba(255, 255, 255, .75); font-size: 11.5px; font-weight: 700; transition: background-color .2s; }
.mm__sw button:hover { background: rgba(255, 255, 255, .07); }
.mm__sw button.is-on { background: rgba(255, 255, 255, .12); color: #fff; }
.mm__dot { position: relative; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(90deg, var(--b) 50%, var(--i) 50%); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25); } /* a straight split: a conic gradient's edge smeared at fractional display scaling (owner, 2026-10-22) */
.mm__dot i { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 2px var(--ink); }
.mm__sw button.is-on .mm__dot { box-shadow: 0 0 0 2px #fff; }
.mm__kb { margin: auto 0 0; font-size: 12px; color: rgba(255, 255, 255, .4); }
.mm__kb kbd { font: 600 11px var(--font-mono, ui-monospace, monospace); padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .1); }
/* account themes on account.html reuse the scheme swatches on a light card */
#account-themes .mm__th h4 { color: var(--muted); padding: 0; }
#account-themes .mm__sw { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 480px; }
#account-themes .mm__modes { max-width: 300px; background: var(--navy); }
#account-themes .mm__modes button { color: var(--muted); }
#account-themes .mm__modes button.is-on { background: var(--card); color: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
#account-themes .mm__sw button { color: var(--muted); }
#account-themes .mm__sw button.is-on { background: var(--navy); color: var(--paper); }
#account-themes .mm__dot { box-shadow: 0 0 0 1.5px rgba(var(--fg-rgb), .16); }
#account-themes .mm__dot i { box-shadow: 0 0 0 2px var(--card); }
#account-themes .mm__sw button.is-on .mm__dot { box-shadow: 0 0 0 2px var(--paper); }
html[data-theme="dark"] .mm__panel { background: var(--bar); }
html[data-theme="dark"] .mm__dot i { box-shadow: 0 0 0 2px var(--bar); }
@media (max-width: 1180px) { .mm__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mm__in { grid-template-columns: 1fr; } .mm__side { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; grid-template-columns: 1fr 1fr; align-items: start; } .mm__kb { display: none; } }
@media (max-width: 920px) { .mm__panel { top: 66px; max-height: calc(100dvh - 66px); } }
@media (max-width: 640px) { .mm__cols { grid-template-columns: 1fr 1fr; } .mm__col small { display: none; } .mm__side { grid-template-columns: 1fr; } .mm__in { padding: 16px 14px 24px; gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .mm__panel, .mm__col, .mm__side { transition: none; } }
/* ============================================================
   Account panel: the account chip slides a panel in from the right (nav.js initAcctPanel)
   ============================================================ */
.ap { position: fixed; inset: 0; z-index: 210; visibility: hidden; pointer-events: none; transition: visibility 0s linear .45s; }
.ap.is-open { visibility: visible; pointer-events: auto; transition: none; }
.ap__scrim { position: absolute; inset: 0; background: rgba(var(--scrim-rgb, 14, 14, 16), .3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s cubic-bezier(0.32, 0.72, 0, 1); }
.ap.is-open .ap__scrim { opacity: 1; }
.ap__panel { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(380px, calc(100vw - 20px)); display: flex; flex-direction: column; gap: 14px; padding: 18px; overflow: auto; overscroll-behavior: contain; border-radius: 26px; background: var(--card); color: var(--paper); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35); transform: translateX(calc(100% + 24px)); transition: transform .45s cubic-bezier(0.32, 0.72, 0, 1); }
.ap.is-open .ap__panel { transform: none; }
.ap__head { display: flex; align-items: center; gap: 12px; padding: 4px 2px 14px; border-bottom: 1px solid var(--line); }
.ap__av { flex: none; width: 46px; height: 46px; font-size: 18px; }
.ap__who { flex: 1; min-width: 0; } .ap__who b { display: block; font-size: 16px; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ap__who small { display: block; font-size: 13px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ap__x { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); transition: background-color .2s, color .2s; }
.ap__x:hover { background: var(--navy); color: var(--paper); }
.ap svg.nv-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ap__list { display: flex; flex-direction: column; gap: 4px; }
.ap__i { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px; border-radius: 16px; font-size: 14.5px; font-weight: 600; color: var(--paper); background: var(--navy); transition: background-color .2s; }
.ap__i span { flex: 1; } .ap__i > svg:first-child { color: var(--muted); }
a.ap__i:hover, a.ap__i:focus-visible { background: var(--slate); outline: 0; }
.ap__go { opacity: .45; transition: transform .25s cubic-bezier(0.32, 0.72, 0, 1), opacity .2s; } a.ap__i:hover .ap__go { opacity: .9; transform: translateX(3px); }
.ap__i.is-soon { color: var(--muted); cursor: default; }
.ap__i em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--card); color: var(--muted); }
.ap__th { padding: 14px; border-radius: 18px; background: var(--navy); }
.ap__th h4 { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ap__th .mm__modes { background: var(--card); } .ap__th .mm__modes button { color: var(--muted); } .ap__th .mm__modes button.is-on { background: var(--ink); color: #fff; }
.ap__th .mm__sw { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.ap__th .mm__sw button { color: var(--muted); padding: 8px 2px; } .ap__th .mm__sw button:hover { background: var(--card); }
.ap__th .mm__sw button.is-on { background: var(--card); color: var(--paper); }
.ap__th .mm__dot { width: 30px; height: 30px; box-shadow: 0 0 0 1.5px rgba(var(--fg-rgb), .16); } .ap__th .mm__dot i { box-shadow: 0 0 0 2px var(--navy); }
.ap__th .mm__sw button.is-on .mm__dot { box-shadow: 0 0 0 2px var(--paper); }
.ap__out { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 16px; font-size: 14.5px; font-weight: 700; color: #C0313F; background: transparent; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s; }
.ap__out:hover { background: rgba(192, 49, 63, .08); }
html[data-theme="dark"] .ap__out { color: var(--t-rose); }
/* every account option in the panel (2026-10-18): plan + code, numbers, groups, switches, sign out / delete */
.ap__panel { gap: 10px; }
.ap__i--btn { width: 100%; border: 0; font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; }
button.ap__i:hover, button.ap__i:focus-visible, label.ap__i:hover { background: var(--slate); outline: 0; }
.ap__i--2 { height: auto; min-height: 50px; padding-top: 9px; padding-bottom: 9px; }
.ap__i small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ap__i.is-bad, .ap__i.is-bad > svg:first-child { color: #C0313F; }
html[data-theme="dark"] .ap__i.is-bad, html[data-theme="dark"] .ap__i.is-bad > svg:first-child { color: var(--t-rose); }
.ap__g { padding: 12px; border-radius: 18px; background: var(--navy); }
.ap__g h4 { margin: 2px 2px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ap__g .ap__i { background: var(--card); }
.ap__g a.ap__i:hover, .ap__g button.ap__i:hover, .ap__g label.ap__i:hover { background: var(--slate); }
.ap__plan { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--ink, #0E0E10); color: #fff; }
.ap__plan.is-paid { background: radial-gradient(120% 90% at 100% 0%, rgba(240, 138, 78, .35), transparent 60%), var(--ink, #0E0E10); }
.ap__plan-t small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ap__plan-t b { font-size: 17px; letter-spacing: -0.01em; }
.ap__plan-t em { margin-left: 6px; font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.ap__plan-acts { display: flex; gap: 6px; }
.ap__pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 13px; border: 0; border-radius: 11px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); cursor: pointer; transition: background-color .2s, filter .2s; }
.ap__pbtn:hover { background: rgba(255, 255, 255, .2); }
.ap__pbtn--go { background: #fff; color: #0E0E10; } .ap__pbtn--go:hover { background: #fff; filter: brightness(.92); }
.ap__pbtn svg.nv-ic { width: 15px; height: 15px; }
.ap__code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.ap__code[hidden] { display: none; }
.ap__code input { height: 36px; min-width: 0; padding: 0 12px; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 13.5px; letter-spacing: .04em; outline: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.ap__code input::placeholder { color: rgba(255, 255, 255, .4); }
.ap__code input:focus { box-shadow: inset 0 0 0 2px var(--orange); }
.ap__err { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: #FF9AA5; } .ap__err:empty { display: none; }
.ap__subs { display: grid; gap: 2px; padding: 8px 10px; border-radius: 16px; background: var(--card); }
.ap__sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; font-size: 13.5px; font-weight: 600; }
.ap__sub > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ap__subs > small { padding: 4px 0 2px; font-size: 12px; color: var(--muted); }
.ap__sw { cursor: pointer; }
.ap__sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ap__sw i { flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line); transition: background-color .25s; }
.ap__sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1); }
.ap__sw input:checked + i { background: var(--orange); }
.ap__sw input:checked + i::after { transform: translateX(16px); }
.ap__sw input:focus-visible + i { outline: 2px solid var(--orange); outline-offset: 2px; }
.ap__end { margin-top: auto; padding-top: 4px; display: grid; gap: 4px; }
.ap__end .ap__out { margin-top: 0; }
.ap__del { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .2s, background-color .2s; }
.ap__del svg.nv-ic { width: 14px; height: 14px; }
.ap__del:hover { color: #C0313F; background: rgba(192, 49, 63, .06); }
html[data-theme="dark"] .ap__th .mm__modes button.is-on { background: var(--paper); color: var(--navy); }
html[data-theme="dark"] .ap__panel { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px var(--line); }
@media (prefers-reduced-motion: reduce) { .ap__panel, .ap__scrim { transition: none; } }
/* ============================================================
   Tour: first-time spotlight over the bar sections (assets/tour.js)
   ============================================================ */
.tour { position: fixed; inset: 0; z-index: 300; pointer-events: auto; }
.tour__shade { position: absolute; inset: 0; background: rgba(8, 9, 12, .55); opacity: 0; transition: opacity .35s cubic-bezier(0.32, 0.72, 0, 1); }
.tour:not(.is-center) .tour__shade { background: transparent; }
.tour.is-open .tour__shade { opacity: 1; }
.tour.is-out { opacity: 0; transition: opacity .3s; }
.tour__hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(8, 9, 12, .55), 0 0 0 2px rgba(255, 255, 255, .9); pointer-events: none; opacity: 0; transition: left .45s cubic-bezier(0.32, 0.72, 0, 1), top .45s cubic-bezier(0.32, 0.72, 0, 1), width .45s cubic-bezier(0.32, 0.72, 0, 1), height .45s cubic-bezier(0.32, 0.72, 0, 1), opacity .35s; }
.tour.is-open:not(.is-center) .tour__hole { opacity: 1; }
.tour.is-center .tour__hole { display: none; }
.tour__card { position: fixed; width: min(340px, calc(100vw - 28px)); padding: 18px 18px 16px; border-radius: 22px; background: var(--card); color: var(--paper); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45); transition: left .45s cubic-bezier(0.32, 0.72, 0, 1), top .45s cubic-bezier(0.32, 0.72, 0, 1); }
.tour__card::before { content: ""; position: absolute; top: -7px; left: var(--arrow, 50%); width: 14px; height: 14px; margin-left: -7px; border-radius: 3px; background: var(--card); transform: rotate(45deg); }
.tour.is-center .tour__card { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tour.is-center .tour__card::before { display: none; }
.tour__card.is-in > :not(.tour__top) { animation: tour-in .35s cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes tour-in { from { opacity: 0; transform: translateY(4px); } }
.tour__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tour__n { font-size: 12px; font-weight: 700; color: var(--muted); }
.tour__skip { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 4px 8px; margin-right: -8px; border-radius: 8px; }
.tour__skip:hover { color: var(--paper); background: var(--navy); }
.tour__t { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.tour__d { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.tour__dots { display: flex; gap: 5px; margin: 16px 0 0; }
.tour__dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: width .3s cubic-bezier(0.32, 0.72, 0, 1), background-color .3s; }
.tour__dots i.is-on { width: 18px; background: var(--orange); }
.tour__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: -22px; }
.tour__btn { height: 38px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--paper); background: var(--navy); }
.tour__btn:hover { background: var(--slate); }
.tour__btn--p { background: var(--ink); color: #fff; }
.tour__btn--p:hover { background: var(--ink); filter: brightness(1.25); }
html[data-theme="dark"] .tour__btn--p { background: var(--paper); color: var(--navy); }
html[data-theme="dark"] .tour__card { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 0 0 1px var(--line); }
@media (prefers-reduced-motion: reduce) { .tour__hole, .tour__card, .tour__shade { transition: none; } .tour__card.is-in > * { animation: none; } }
/* the account chip's email is pre-shortened in nav.js; keep the chip compact */
.bar__txt { max-width: 130px; }
html[data-theme="dark"] .ev__b { background: rgba(0, 0, 0, .28); color: var(--paper); }
html[data-theme="dark"] .ev__h span:last-child { color: var(--muted); }
html[data-theme="dark"] .ev--uni { background: #3B2618; }
html[data-theme="dark"] :is(.bar__btn) { background: #fff; color: #0E0E10; }
/* Bright accent fills need dark lettering, even when the surrounding page is dark. */
html[data-theme="dark"] :is(.bar__up, .sh-games__cta, .dl-btn, .dl-num, .dl-tabs button.is-on, .fp-nav em, .mine__shared h2 small, .mn-tab, .tb-done, .li .li-shop__buy.is-sure) { color: var(--on-accent); }
/* Upgrade stays ai45 orange on every theme (owner, 2026-11-09: "keep the upgrade button orange because its iconic"); everything else follows the theme accent */
#app-bar .bar__up { background: #E37239; color: #fff; }
html[data-theme="dark"] #app-bar .bar__up { background: #F08A4E; color: #2B1608; }
html[data-theme="dark"] .tb-go.is-on { color: var(--on-accent) !important; }
/* ---------- dark: home cards (homegrid.css). --c is the card's colour: in dark it is the bright edge, never a surface ---------- */
html[data-theme="dark"] .c-lav { --c: #B79CE8; --cd: var(--t-lav); } html[data-theme="dark"] .c-sky { --c: #7FB0E8; --cd: #9BC4F0; } html[data-theme="dark"] .c-mint { --c: #6FCF97; --cd: var(--t-mint); }
html[data-theme="dark"] .c-sun { --c: #F2C94C; --cd: var(--t-sun); } html[data-theme="dark"] .c-rose { --c: #F28BA0; --cd: var(--t-rose); } html[data-theme="dark"] .c-peach { --c: #F5A27A; --cd: #FFB48A; }
html[data-theme="dark"] :is(.hw-today__row > div, .hw-sub, .hw-stats > div, .hw-links a, .hw-add input, .hw-note, .hw-sizes, .hw-x) { background: var(--card-2); }
html[data-theme="dark"] :is(.hw-today__row > div:first-child, .hw-cont) { background: var(--card-2); box-shadow: inset 0 3px 0 var(--c); }
html[data-theme="dark"] :is(.hw-sub:hover, a.hw-li:hover, .hw-li:hover) { background: var(--slate); }
html[data-theme="dark"] .hg-tray { background: var(--navy-2); border-color: var(--line); }
html[data-theme="dark"] :is(.hw-grip b, .hw-empty a, .hw-h a:hover) { color: var(--paper); }
html[data-theme="dark"] .pv-ic { background: var(--card-2); }
html[data-theme="dark"] .pv-lines i { background: var(--slate); }
/* ---------- dark: light-mode-only text colours and white surfaces, remapped (generated by a scan of the stylesheets) ---------- */
/* app.css */
html[data-theme="dark"] .tools a { color: var(--paper); }
html[data-theme="dark"] .tools .c5 { background-color: var(--card-2); }
html[data-theme="dark"] .branch:nth-child(1) .branch__ic, html[data-theme="dark"] .tools .c1 { color: var(--paper); }
html[data-theme="dark"] .branch:nth-child(2) .branch__ic { color: var(--paper); }
html[data-theme="dark"] .branch:nth-child(3) .branch__ic { color: var(--paper); }
html[data-theme="dark"] .wid__ic, html[data-theme="dark"] .plan__ic { color: var(--t-mint); }
html[data-theme="dark"] .note .box::before { color: var(--muted); }
html[data-theme="dark"] .note .def::before, html[data-theme="dark"] .note .def dfn { color: var(--t-lav); }
html[data-theme="dark"] .note span.hl, html[data-theme="dark"] .ts__hl, html[data-theme="dark"] .hlb, html[data-theme="dark"] .nb-tag { color: var(--t-lav); }
html[data-theme="dark"] .chipx--mk { color: var(--t-sun); }
html[data-theme="dark"] .chipx--lg { color: var(--t-lav); }
html[data-theme="dark"] .qcard { background-color: var(--card-2); }
html[data-theme="dark"] .btn.is-on { color: var(--t-mint); }
html[data-theme="dark"] .tag--tool { color: var(--paper); }
html[data-theme="dark"] .pill { color: var(--t-mint); }
html[data-theme="dark"] .pill--go { color: var(--t-sun); }
html[data-theme="dark"] .tools__edit .c5 { background-color: var(--card-2); }
html[data-theme="dark"] .week__ses { color: var(--t-lav); }
html[data-theme="dark"] .week__d.is-late { color: var(--t-rose); }
html[data-theme="dark"] .mini--claude .mini__t { color: var(--t-rose); }
html[data-theme="dark"] .mini--gpt .mini__t { color: var(--t-mint); }
html[data-theme="dark"] .mini--pplx .mini__t { color: var(--t-sky); }
html[data-theme="dark"] .mini--gem .mini__t { color: var(--t-sky); }
html[data-theme="dark"] #notes .note { color: var(--paper); }
html[data-theme="dark"] #notes .note .box.key { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note .box.tip { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note .box.trap { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note .box.rule { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note .box.exam { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note .box.nos { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note .box.like { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note .box.link { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note .def { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note .ex { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note .eq { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note div.hl { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note .toc a { background: none; } /* the Key points list is a plain numbered list, as in light mode */
html[data-theme="dark"] #notes .note th { background-color: var(--card-2); }
html[data-theme="dark"] #notes .note figure { background-color: var(--card-2); }
html[data-theme="dark"] #notes .mcq, html[data-theme="dark"] #notes .rc, html[data-theme="dark"] #notes .ai { background-color: var(--card-2); }
html[data-theme="dark"] #notes .nt-practice, html[data-theme="dark"] #notes .nt-soon, html[data-theme="dark"] #notes .nt-gate { background-color: var(--card-2); }
html[data-theme="dark"] #notes .nt-pager a { background-color: var(--card-2); }
html[data-theme="dark"] #notes .nl__side .syl, html[data-theme="dark"] #notes .nl__side .tree { background-color: var(--card-2); }
html[data-theme="dark"] .logout-btn.is-danger { color: var(--t-rose); }
html[data-theme="dark"] .logout-btn.is-danger:hover { color: var(--t-rose); }
html[data-theme="dark"] .stat__hint { color: var(--muted); }
html[data-theme="dark"] .feat__ic, html[data-theme="dark"] .soon-badge { color: var(--t-lav); }
html[data-theme="dark"] .post__teacher { color: var(--t-mint); }
html[data-theme="dark"] .article p { color: var(--paper); }
html[data-theme="dark"] .prompt-body { background-color: var(--card-2); }
html[data-theme="dark"] #ib .qcard { background-color: var(--card-2); }
html[data-theme="dark"] #ib .rd__build span { color: var(--t-lav); }
html[data-theme="dark"] #ib .acts .btn.is-on { color: var(--t-mint); }
html[data-theme="dark"] .tile.is-on .tile__ic, html[data-theme="dark"] .tick.is-on .tick__box { background-color: var(--slate); }
html[data-theme="dark"] .tile.is-on .tile__ic, html[data-theme="dark"] .tick.is-on .tick__box { color: var(--paper); }
html[data-theme="dark"] .q__err { color: var(--t-rose); }
html[data-theme="dark"] .done-mark { color: var(--t-mint); }
html[data-theme="dark"] .sat-view .nsec--traps { background-color: var(--card-2); }
html[data-theme="dark"] .sat-view .nsec--look { background-color: var(--card-2); }
html[data-theme="dark"] .sat-view .nsec--checklist { background-color: var(--card-2); }
html[data-theme="dark"] .sat-view .note { color: var(--paper); }
html[data-theme="dark"] .sat-view .note .box-t, html[data-theme="dark"] .sat-view .note .box:not(:has(> .box-t))::before { color: var(--paper); }
html[data-theme="dark"] .sat-view .note details > summary { color: var(--paper); }
/* barwidget.css */
html[data-theme="dark"] .bw__go { background-color: var(--card-2); }
html[data-theme="dark"] .bw__go { color: var(--paper); }
html[data-theme="dark"] .bw__pop { background-color: var(--card-2); }
html[data-theme="dark"] .bw__pop { color: var(--paper); }
html[data-theme="dark"] .bw__tabs { background-color: var(--card-2); }
html[data-theme="dark"] .bw__tabs button { color: var(--paper); }
html[data-theme="dark"] .bw__tabs button:hover { color: var(--paper); }
html[data-theme="dark"] .bw__tabs button.is-on { background-color: var(--slate); }
html[data-theme="dark"] .bw__tabs button.is-on { color: var(--paper); }
html[data-theme="dark"] .bw__sub { color: var(--paper); }
html[data-theme="dark"] .bw__card { background-color: var(--card-2); }
html[data-theme="dark"] .bw__card b { color: var(--t-lav); }
html[data-theme="dark"] .bw__card em { color: var(--paper); }
html[data-theme="dark"] .bw__note { color: var(--paper); }
html[data-theme="dark"] .bw__a { color: var(--paper) !important; }
html[data-theme="dark"] .bw__phase button { color: var(--paper); }
html[data-theme="dark"] .bw__ctl button { background-color: var(--card-2) !important; }
html[data-theme="dark"] .bw__set { color: var(--paper); }
html[data-theme="dark"] .bw__set select { background-color: var(--card-2); }
html[data-theme="dark"] .bw__set select { color: var(--paper); }
html[data-theme="dark"] .bw__dots span { color: var(--paper); }
html[data-theme="dark"] .bw__li:hover { background-color: var(--slate); }
html[data-theme="dark"] .bw__li em { color: var(--paper); }
html[data-theme="dark"] .bw__chk:hover { color: var(--paper) !important; }
html[data-theme="dark"] .bw__link { background-color: var(--card-2); }
html[data-theme="dark"] .bw__sp { color: var(--paper) !important; }
html[data-theme="dark"] .bw__spe span { color: var(--paper); }
html[data-theme="dark"] .bw__np2-ph { background-color: var(--card-2); }
html[data-theme="dark"] .bw__np2-a { color: var(--paper); }
html[data-theme="dark"] .bw__bar { background-color: var(--card-2); }
html[data-theme="dark"] .bw__np2-f { color: var(--paper); }
html[data-theme="dark"] .bw__link--lock { background-color: var(--card-2); }
html[data-theme="dark"] .bw__link--lock { color: var(--t-mint); }
/* calendar.css */
html[data-theme="dark"] .mm__d.is-cur { color: var(--paper); }
html[data-theme="dark"] .nx__acts .is-p { color: var(--paper) !important; }
html[data-theme="dark"] .g__btn { background-color: var(--card-2) !important; }
html[data-theme="dark"] .g__btn { color: var(--paper) !important; }
html[data-theme="dark"] .cxh__nav button { background-color: var(--card-2) !important; }
html[data-theme="dark"] .cxh__nav button:hover { background-color: var(--slate) !important; }
html[data-theme="dark"] .cxw__d { background-color: var(--card-2) !important; }
html[data-theme="dark"] .cxw__d:hover { background-color: var(--slate) !important; }
html[data-theme="dark"] .cxw__d.is-today span { color: var(--t-lav); }
html[data-theme="dark"] .chip { color: var(--paper) !important; }
html[data-theme="dark"] .cxg__scroll { background-color: var(--card-2); }
html[data-theme="dark"] .evb { color: var(--paper); }
html[data-theme="dark"] .evb > span { color: var(--muted); }
html[data-theme="dark"] .cxm__c { background-color: var(--card-2); }
html[data-theme="dark"] .cxm__n:hover { background-color: var(--slate) !important; }
html[data-theme="dark"] .kban__add input { background-color: var(--card-2); }
html[data-theme="dark"] .kban__add input { color: var(--paper); }
html[data-theme="dark"] .kban__add input:focus { background-color: var(--slate); }
html[data-theme="dark"] .kban__col { background-color: var(--card-2); }
html[data-theme="dark"] .kban__col.is-over { background-color: var(--slate); }
html[data-theme="dark"] .kban__h em { background-color: var(--card-2); }
html[data-theme="dark"] .kc { background-color: var(--card-2); }
html[data-theme="dark"] .kc__tag { background-color: var(--card-2); }
html[data-theme="dark"] .kc__tag { color: var(--t-lav); }
html[data-theme="dark"] .kc__due { background-color: var(--card-2); }
html[data-theme="dark"] .kc__due.is-late { background-color: var(--card-2); }
html[data-theme="dark"] .kc__due.is-late { color: var(--t-rose); }
html[data-theme="dark"] .kc__due.is-today { background-color: var(--card-2); }
html[data-theme="dark"] .kc__due.is-today { color: var(--t-sun); }
html[data-theme="dark"] .kc__acts button:hover { background-color: var(--slate) !important; }
html[data-theme="dark"] .kc__acts button:hover { color: var(--paper) !important; }
html[data-theme="dark"] .cxp { background-color: var(--card-2); }
html[data-theme="dark"] .cxp svg { color: var(--paper); }
html[data-theme="dark"] .cxp__t { color: var(--paper); }
html[data-theme="dark"] .cxp__row input:not([type=checkbox]), html[data-theme="dark"] .cxp__row select { background-color: var(--card-2); }
html[data-theme="dark"] .cxp__row input:not([type=checkbox]), html[data-theme="dark"] .cxp__row select { color: var(--paper); }
html[data-theme="dark"] .cxp__row input:focus, html[data-theme="dark"] .cxp__row select:focus { background-color: var(--slate); }
html[data-theme="dark"] .cxp__x { background-color: var(--card-2); }
html[data-theme="dark"] .cxp__x:hover { color: var(--t-rose); }
/* ext.css */
html[data-theme="dark"] .xb--g { background-color: var(--card-2) !important; }
html[data-theme="dark"] .xb--g { color: var(--paper) !important; }
html[data-theme="dark"] .xb.is-done { background-color: var(--card-2) !important; }
html[data-theme="dark"] .xb.is-done { color: var(--t-mint) !important; }
html[data-theme="dark"] .xs { background-color: var(--card-2); }
html[data-theme="dark"] .xs--live { background-color: var(--card-2); }
html[data-theme="dark"] .xs--live { color: var(--t-mint); }
html[data-theme="dark"] .xp__h em { background-color: var(--card-2); }
html[data-theme="dark"] .xp__h em { color: var(--t-mint); }
html[data-theme="dark"] .xi__card code { background-color: var(--card-2); }
html[data-theme="dark"] .xwin { background-color: var(--card-2); }
html[data-theme="dark"] .xwin__bar { background-color: var(--card-2); }
html[data-theme="dark"] .xwin__url { background-color: var(--card-2); }
html[data-theme="dark"] .dbtn--g { background-color: var(--card-2) !important; }
html[data-theme="dark"] .dbtn--g { color: var(--paper) !important; }
html[data-theme="dark"] .dtabs { background-color: var(--card-2); }
html[data-theme="dark"] .dtabs button.is-on { background-color: var(--slate); }
html[data-theme="dark"] .dtabs button.is-on { color: var(--paper); }
html[data-theme="dark"] .dblk { background-color: var(--card-2); }
html[data-theme="dark"] .dyt__v b, html[data-theme="dark"] .dyt__v span { background-color: var(--card-2); }
html[data-theme="dark"] .dch { background-color: var(--card-2); }
html[data-theme="dark"] .dch__m { background-color: var(--card-2); }
html[data-theme="dark"] .dch__m--ai { background-color: var(--card-2); }
html[data-theme="dark"] .dch__in { background-color: var(--card-2); }
html[data-theme="dark"] .dch__ai { background-color: var(--card-2) !important; }
html[data-theme="dark"] .dch__ai { color: var(--t-sun) !important; }
html[data-theme="dark"] .dch__menu { background-color: var(--card-2); }
html[data-theme="dark"] .dch__menu button:hover { background-color: var(--slate); }
html[data-theme="dark"] .dct { background-color: var(--card-2); }
html[data-theme="dark"] .dct__t:hover, html[data-theme="dark"] .dct__t:focus { background-color: var(--slate); }
/* homegrid.css */
html[data-theme="dark"] .hg-btn--g { color: var(--paper); }
html[data-theme="dark"] .hg-btn--g:hover { background-color: var(--slate); }
html[data-theme="dark"] .hg-card { background-color: var(--card-2); }
html[data-theme="dark"] .hg-mini { background-color: var(--card-2); }
/* ib.css */
html[data-theme="dark"] .qcard { background-color: var(--card-2); }
html[data-theme="dark"] .ms__imgs { background-color: var(--card-2); }
/* lockdock.css */
html[data-theme="dark"] .ld__go { background-color: var(--card-2); }
html[data-theme="dark"] .ld__go { color: var(--paper); }
/* lockin.css */
html[data-theme="dark"] .li-chips button { background-color: var(--card-2) !important; }
html[data-theme="dark"] .li-chips button:hover { background-color: var(--slate) !important; }
html[data-theme="dark"] .li-custom { background-color: var(--card-2); }
html[data-theme="dark"] .li-custom input { color: var(--paper); }
html[data-theme="dark"] .li-tog { background-color: var(--card-2); }
html[data-theme="dark"] .li-tog b { color: var(--paper); }
html[data-theme="dark"] .li-help b { color: var(--paper); }
html[data-theme="dark"] .li-help code { background-color: var(--card-2); }
html[data-theme="dark"] .li-help code { color: var(--paper); }
html[data-theme="dark"] .li-pill { background-color: var(--card-2); }
html[data-theme="dark"] .li-pill--ok { background-color: var(--card-2); }
html[data-theme="dark"] .li-pill--ok { color: var(--t-mint); }
html[data-theme="dark"] .li-pill--bad { background-color: var(--card-2); }
html[data-theme="dark"] .li-pill--bad { color: var(--t-rose); }
html[data-theme="dark"] .li-pill--wait { background-color: var(--card-2); }
html[data-theme="dark"] .li-pill--wait { color: var(--t-sun); }
html[data-theme="dark"] .li-subj { background-color: var(--card-2); }
html[data-theme="dark"] .li-warn { background-color: var(--card-2); }
html[data-theme="dark"] .li-warn { color: var(--t-sun); }
html[data-theme="dark"] .li-warn.is-danger { background-color: var(--card-2); }
html[data-theme="dark"] .li-warn.is-danger { color: var(--t-rose); }
html[data-theme="dark"] .li-give:hover { color: var(--t-rose) !important; }
html[data-theme="dark"] .li-checks button { background-color: var(--card-2) !important; }
html[data-theme="dark"] .li-checks button:hover { background-color: var(--slate) !important; }
html[data-theme="dark"] .li-checks button.is-on { background-color: var(--slate) !important; }
/* dark: the chosen check and a switched-on toggle use the orange accent (var(--ink) is near black here, so the chosen radio looked empty) */
html[data-theme="dark"] .li-checks button.is-on { box-shadow: inset 0 0 0 2px var(--orange); }
html[data-theme="dark"] .li-checks button.is-on i { border-color: var(--orange); }
html[data-theme="dark"] .li-tog i { background: rgba(var(--fg-rgb), .2); }
html[data-theme="dark"] .li-tog input:checked + i { background: var(--orange); }
html[data-theme="dark"] .li-tog input:focus-visible + i { outline-color: var(--orange); }
html[data-theme="dark"] .li-checks b { color: var(--paper); }
html[data-theme="dark"] .li-code b { color: var(--paper); }
html[data-theme="dark"] .li-join input { background-color: var(--card-2); }
html[data-theme="dark"] .li-join input:focus { background-color: var(--slate); }
html[data-theme="dark"] .li-rar--common { background-color: var(--card-2); }
html[data-theme="dark"] .li-rar--common { color: var(--paper); }
html[data-theme="dark"] .li-rar--uncommon { background-color: var(--card-2); }
html[data-theme="dark"] .li-rar--uncommon { color: var(--t-mint); }
html[data-theme="dark"] .li-rar--rare { background-color: var(--card-2); }
html[data-theme="dark"] .li-rar--rare { color: var(--t-sky); }
html[data-theme="dark"] .li-rar--epic { background-color: var(--card-2); }
html[data-theme="dark"] .li-rar--epic { color: var(--t-lav); }
html[data-theme="dark"] .li-rar--legendary { background: var(--card-2); color: #F5D547; }
html[data-theme="dark"] .li-fish { background-color: var(--card-2) !important; }
html[data-theme="dark"] .li-fish:hover { background-color: var(--slate) !important; }
html[data-theme="dark"] .li-fish.is-on { background-color: var(--slate) !important; }
html[data-theme="dark"] .li-fish__lock { background-color: var(--card-2); }
html[data-theme="dark"] .li-unlock { background-color: var(--card-2); }
html[data-theme="dark"] .li-unlock b { color: var(--paper); }
html[data-theme="dark"] .li-time { color: var(--paper); }
html[data-theme="dark"] .li-new { background-color: var(--card-2); }
html[data-theme="dark"] .li-dex__c.is-locked { background-color: var(--card-2); }
html[data-theme="dark"] .li-dex__c:not(.is-locked) { background: linear-gradient(180deg, #1D2B3A, #15202C); }
html[data-theme="dark"] .li-dex__c:not(.is-locked) b { color: var(--paper); }
html[data-theme="dark"] .li-ext__ic { background-color: var(--card-2); }
html[data-theme="dark"] .li-ext__ic { color: var(--t-sky); }
html[data-theme="dark"] .li-ext.is-on .li-ext__ic { background-color: var(--slate); }
html[data-theme="dark"] .li-ext.is-on .li-ext__ic { color: var(--t-mint); }
html[data-theme="dark"] .li-mini button { background-color: var(--card-2); }
html[data-theme="dark"] .li-mini button { color: var(--paper); }
html[data-theme="dark"] .lr__count { color: var(--paper); }
html[data-theme="dark"] .lr__p--running small { color: var(--t-mint); }
html[data-theme="dark"] .lr__dot { color: var(--paper); }
html[data-theme="dark"] .li-what { background-color: var(--card-2); }
/* mynotes.css */
html[data-theme="dark"] .mn__src a:hover { color: var(--paper); }
html[data-theme="dark"] .mn__ed { color: var(--paper); }
html[data-theme="dark"] .mn__ed a { color: var(--t-sky); }
html[data-theme="dark"] .mn__ed code { color: var(--t-rose); }
html[data-theme="dark"] .mn__menu span b { color: var(--paper); }
html[data-theme="dark"] .mn__foot a:hover { color: var(--paper); }
html[data-theme="dark"] .mn__foot button:hover { color: var(--paper); }
html[data-theme="dark"] .syl-drawer__pane { background-color: var(--card-2); }
html[data-theme="dark"] .syl-drawer .syl, html[data-theme="dark"] .syl-drawer .tree { background-color: var(--card-2); }
html[data-theme="dark"] .mn__ed a.sl { color: var(--t-sky); }
html[data-theme="dark"] .mn__ed .tbw__acts button:hover { color: var(--paper); }
/* paper2.css */
html[data-theme="dark"] .p2-exam__c span { color: var(--t-lav); }
html[data-theme="dark"] .p2-warn { color: var(--t-rose); }
html[data-theme="dark"] .p2-glance > b { color: var(--t-sun); }
html[data-theme="dark"] .p2-poem__n { color: var(--t-lav); }
html[data-theme="dark"] .p2-chip--t { color: var(--t-mint); }
html[data-theme="dark"] .p2-fit__r--strong .p2-fit__f { color: var(--t-mint); }
html[data-theme="dark"] .bd-chip.is-on { color: var(--t-lav); }
html[data-theme="dark"] .bd-lenses button b { color: var(--t-mint); }
html[data-theme="dark"] .bd-pairnote h3 { color: var(--t-lav); }
html[data-theme="dark"] .sd--s { color: var(--t-mint); }
html[data-theme="dark"] .sd--d { color: var(--t-rose); }
html[data-theme="dark"] .plan__q b { color: var(--t-sky); }
html[data-theme="dark"] .plan__del { color: var(--t-rose); }
/* plan.css */
html[data-theme="dark"] .lesson__ic { color: var(--t-mint); }
html[data-theme="dark"] .feat p { color: var(--t-lav); }
html[data-theme="dark"] .feat__play { background-color: var(--card-2); }
html[data-theme="dark"] .feat__play { color: var(--paper); }
html[data-theme="dark"] .feat__time { background-color: var(--card-2); }
html[data-theme="dark"] .ti__due { color: var(--t-sun); }
html[data-theme="dark"] .ti__due.is-late { color: var(--t-rose); }
html[data-theme="dark"] .ti__due.is-today { color: var(--t-mint); }
html[data-theme="dark"] .ev__h span:last-child { color: var(--muted); }
html[data-theme="dark"] .ev__t { background-color: var(--card-2); }
html[data-theme="dark"] .feat--sky p { color: var(--t-sky); }
html[data-theme="dark"] .feat--sun p { color: var(--t-sun); }
html[data-theme="dark"] .aip__tool.t-claude { color: var(--t-rose); }
html[data-theme="dark"] .aip__tool.t-gpt { color: var(--t-mint); }
html[data-theme="dark"] .aip__tool.t-pplx { color: var(--t-sky); }
html[data-theme="dark"] .aip__tool.t-gem { color: var(--t-lav); }
/* Featured prompts use translucent white badges in light mode only. */
html[data-theme="dark"] .pm--big :is(.aip__tool, .aip__tag) { background: var(--navy); }
html[data-theme="dark"] .cal__tag--uni { background-color: var(--card-2); }
html[data-theme="dark"] .ev--uni { background-color: var(--card-2); }
html[data-theme="dark"] .pm__blank { color: var(--t-rose); }
html[data-theme="dark"] .tl__ses { color: var(--t-lav); }
html[data-theme="dark"] .is-late .tl__d { color: var(--t-rose); }
html[data-theme="dark"] .gl__tool.t-claude { color: var(--t-rose); }
html[data-theme="dark"] .gl__tool.t-gpt { color: var(--t-mint); }
html[data-theme="dark"] .gl__tool.t-pplx { color: var(--t-sky); }
html[data-theme="dark"] .gl__tool.t-gem { color: var(--t-lav); }
/* sat-home.css */
html[data-theme="dark"] .sh-next > span:nth-child(3) { color: var(--t-sky); }
html[data-theme="dark"] .sh-next__reg { background-color: var(--card-2); }
html[data-theme="dark"] .sh-stat span { color: var(--muted); }
html[data-theme="dark"] .sh-todo__i span { color: var(--t-sun); }
html[data-theme="dark"] .sh-todo__i span.is-late { color: var(--t-rose); }
/* teacher.css */
html[data-theme="dark"] .tg__ic--wait { color: var(--t-sun); }
html[data-theme="dark"] .tg__err { color: var(--t-rose); }
/* uni.css */
html[data-theme="dark"] .u-tab i { color: var(--paper); }
html[data-theme="dark"] .u-next .eyebrow { color: var(--muted); }
html[data-theme="dark"] .u-next__d { background-color: var(--card-2); }
html[data-theme="dark"] .u-stat span { color: var(--muted); }
html[data-theme="dark"] .u-days.is-soon { color: var(--t-rose); }
html[data-theme="dark"] .u-st.is-applying { color: var(--t-sun); }
html[data-theme="dark"] .u-st.is-submitted, html[data-theme="dark"] .u-st.is-interview { color: var(--t-sky); }
html[data-theme="dark"] .u-st.is-offer, html[data-theme="dark"] .u-st.is-committed { color: var(--t-mint); }
html[data-theme="dark"] .u-st.is-waitlist { color: var(--t-lav); }
html[data-theme="dark"] .u-st.is-rejected { color: var(--t-rose); }
html[data-theme="dark"] .u-item__chk.is-static { color: var(--t-mint); }
html[data-theme="dark"] .u-item.is-late { background-color: var(--card-2); }
html[data-theme="dark"] .u-item.is-late .u-item__when { color: var(--t-rose); }
html[data-theme="dark"] .u-tag.is-due { color: var(--t-sun); }
html[data-theme="dark"] .u-tag.is-sys { color: var(--t-lav); }
html[data-theme="dark"] .u-tag.is-incl { color: var(--t-mint); }
html[data-theme="dark"] .u-btn.is-on { color: var(--t-mint); }
html[data-theme="dark"] .u-btn--ghost.is-on { color: var(--t-sky); }
html[data-theme="dark"] .u-key span { color: var(--muted); }
html[data-theme="dark"] .u-key small { color: var(--muted); }
html[data-theme="dark"] .u-li__x:hover { color: var(--t-rose); }
html[data-theme="dark"] .u-month.is-late { background-color: var(--card-2); }
html[data-theme="dark"] .u-gd__s .g-box > b:first-child { color: var(--muted); }
html[data-theme="dark"] .u-gd__s .g-cols b { color: var(--muted); }
html[data-theme="dark"] .u-rules svg { color: var(--t-mint); }
html[data-theme="dark"] .u-stack__s { color: var(--paper); }
html[data-theme="dark"] .u-mono { color: var(--paper); }
html[data-theme="dark"] .u-fit.is-ok { color: var(--t-mint); }
html[data-theme="dark"] .u-fit.is-hi { color: var(--t-sun); }
html[data-theme="dark"] .u-due.is-mid { color: var(--t-sun); }
html[data-theme="dark"] .u-due.is-soon { color: var(--t-rose); }
html[data-theme="dark"] .u-dtbl .u-num small.is-soon { color: var(--t-rose); }
html[data-theme="dark"] .u-tray .btn-p { background-color: var(--card-2) !important; }
html[data-theme="dark"] .u-tray .btn-p { color: var(--paper) !important; }
html[data-theme="dark"] .u-ch.is-long { color: var(--t-rose); }
html[data-theme="dark"] .u-ch.is-reach { color: var(--t-sun); }
html[data-theme="dark"] .u-ch.is-target { color: var(--t-mint); }
html[data-theme="dark"] .u-ch.is-likely { color: var(--t-sky); }
html[data-theme="dark"] .u-bal__bar i { color: var(--paper); }
/* dark: per-page colour variables (case studies countries, Paper 2 works) */
html[data-theme="dark"] .cs { --c-eth: var(--card-2); --t-usa: #8FD3DE; --t-ken: #8FD9A8; --t-ind: #F2C66B; --t-idn: #FF9DB0; --t-chn: #C9B5FF; --t-eth: #FFB48A; }
html[data-theme="dark"] .p2 { --t-sun: #F2C66B; --t-sky: #8FD3DE; --t-rose: #FF9DB0; --t-mint: #8FD9A8; --t-lav: #C9B5FF; }
html[data-theme="dark"] .p2-work__main b { color: var(--paper); }
/* dark: the Lock in preview keeps the aquarium's light backdrop, so its caption stays dark */
html[data-theme="dark"] .li-preview__cap { color: #15161A; } html[data-theme="dark"] .li-preview__cap span { color: #5A6170; }
/* account: academic profile form (Uni prep reads store.uni.me) */
.acct-scores { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.acct-scores label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.acct-scores input, .acct-scores select { height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--navy); color: var(--paper); font: inherit; font-size: 15px; font-weight: 600; }
.acct-scores input:focus, .acct-scores select:focus { outline: 2px solid var(--ink); }
.acct-scores__f { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 560px) { .acct-scores { grid-template-columns: 1fr; } }

.acct-scores__maj { grid-column: 1 / -1; }
.acct-scores__mi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.acct-scores__mi input { min-width: 0; }
@media (max-width: 560px) { .acct-scores__mi { grid-template-columns: 1fr; } }

/* majors dropdown (assets/majorpick.js): replaces the browser's unstyleable datalist */
.mpick { position: fixed; z-index: 700; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 16px; background: var(--card, #fff); color: var(--paper, #15161A); box-shadow: 0 0 0 1px rgba(var(--fg-rgb, 21, 22, 26), .08), 0 18px 40px -12px rgba(var(--fg-rgb, 21, 22, 26), .28); font-size: 14px; }
.mpick[hidden] { display: none; }
.mpick__o { padding: 9px 12px; border-radius: 10px; cursor: pointer; line-height: 1.3; }
.mpick__o b { font-weight: 800; }
.mpick__o:hover, .mpick__o.is-act { background: rgba(var(--fg-rgb, 21, 22, 26), .07); }
.mpick__none { padding: 10px 12px; color: var(--muted, #6B6F78); font-size: 13px; }
.mpick__o--blank { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--muted, #6B6F78); font-weight: 600; border-bottom: 1px solid rgba(var(--fg-rgb, 21, 22, 26), .08); border-radius: 10px 10px 4px 4px; margin-bottom: 4px; }
.mpick__o--blank small { font-size: 11.5px; font-weight: 500; color: var(--faint, #9AA0AB); }
.mpick__o--blank, .mpick__o--blank small { white-space: nowrap; }

/* one-line truncated text (names, emails in the bar, site map, account panel, friends): tall enough that
   descenders (g, j, p, q, y) are never cut by overflow: hidden (owner, 2026-10-19) */
.fr-who small, .bar__txt b, .bar__txt small, .mm__acct small, .ap__who b, .ap__who small, .ap__sub > span { line-height: 1.4; padding-bottom: .1em; }
.bar__nav a span { line-height: 1.45; padding-bottom: .1em; } /* the sliding label hides overflow: room for the p in "Uni prep" */

/* ---------- the desktop app: "Get the app" in the bar + the one-time popup (nav.js initAppNudge) ---------- */
.bar__app { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background-color .2s, box-shadow .2s; }
.bar__app:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.bar__app svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1180px) { .bar__app span { display: none; } .bar__app { padding: 0 10px; } }
@media (max-width: 900px), (hover: none) { .bar__app { display: none; } }
/* Admin (admin accounts only, nav.js initAdmin): a pill like Get the app, with the waiting count */
.bar__admin { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background-color .2s, box-shadow .2s; }
.bar__admin:hover, .bar__admin.is-on { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.bar__admin svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bar__admin-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--orange, #E37239); color: #fff; font: 800 10.5px/18px Satoshi, system-ui, sans-serif; font-style: normal; text-align: center; }
@media (max-width: 1180px) { .bar__admin span { display: none; } .bar__admin { padding: 0 10px; } }
@media (max-width: 600px) { .bar__admin { width: 36px; padding: 0; justify-content: center; } .bar__admin-n { position: absolute; top: -2px; right: -4px; box-shadow: 0 0 0 2px var(--bar, #0E0E10); } }
html.is-desktop .bar__app, html.is-desktop .appn { display: none !important; }
.appn { position: fixed; left: 22px; bottom: 22px; z-index: 240; width: 330px; padding: 20px 20px 18px; border-radius: 24px; background: var(--card); color: var(--paper); box-shadow: 0 30px 70px -24px rgba(var(--scrim-rgb), .5), 0 0 0 1px rgba(var(--fg-rgb), .06); opacity: 0; transform: translateY(24px) scale(.96); transform-origin: 20% 100%; transition: opacity .4s, transform .55s cubic-bezier(0.32, 0.72, 0, 1); }
.appn.is-in { opacity: 1; transform: none; }
body.has-lockdock .appn { bottom: 96px; }
.appn__x { position: absolute; right: 12px; top: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.appn__x:hover { background: rgba(var(--fg-rgb), .06); color: var(--paper); }
.appn__art { position: relative; width: 58px; height: 58px; margin-bottom: 12px; }
.appn__art img { position: relative; z-index: 1; width: 58px; height: 58px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .3)); }
.appn__art i { position: absolute; inset: 0; border-radius: 16px; border: 2px solid var(--orange); opacity: 0; animation: appn-ring 2.6s cubic-bezier(0.32, 0.72, 0, 1) infinite; }
.appn__art i:nth-child(3) { animation-delay: .5s; } .appn__art i:nth-child(4) { animation-delay: 1s; }
@keyframes appn-ring { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
.appn b { display: block; font-size: 17px; letter-spacing: -.01em; }
.appn p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.appn__acts { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.appn__go { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--orange); color: var(--on-accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.appn__go:hover { filter: brightness(1.06); }
.appn__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.appn__no { height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.appn__no:hover { background: rgba(var(--fg-rgb), .06); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .appn { transition: none; } .appn__art i { animation: none; } }

/* the account button: just a circle (owner, 2026-10-21) */
.bar__who.bar__who--circle { padding: 3px; max-width: none; }
.bar__who--circle .bar__av { width: 36px; height: 36px; font-size: 15px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); transition: box-shadow .2s, transform .2s; }
.bar__who--circle:hover { background: none; }
.bar__who--circle:hover .bar__av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .45); transform: scale(1.05); }
.bar__av.is-custom { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }

html[data-theme="dark"] .subj:hover .lvl { background: rgba(var(--fg-rgb), .1); }
/* dark: the SL / HL switch everywhere (owner, 2026-10-21: "you can't even read this"): a dark track, and the
   selected side in the accent, like the other selected controls in dark (Lock in's toggles) */
html[data-theme="dark"] .lvl { background: rgba(var(--fg-rgb), .08); }
html[data-theme="dark"] .lvl button { color: var(--muted); }
html[data-theme="dark"] .lvl button.is-on, html[data-theme="dark"] .qb-lv .lvl button.is-on { background: var(--orange); color: var(--on-accent); }

/* ---------- dark: surfaces that are pastel in light mode keep their colour (owner, 2026-10-22: "make sure it applies
   to all colours"); the generated block above had turned them grey. Each gets the deep tone of its own hue. ---------- */
html[data-theme="dark"] .tools .c5 { background-color: var(--lav); }
html[data-theme="dark"] .tools__edit .c5 { background-color: var(--lav); }
html[data-theme="dark"] #notes .note .box.key { background-color: var(--mint); }
html[data-theme="dark"] #notes .note .box.trap { background-color: var(--rose); }
html[data-theme="dark"] #notes .note .box.rule { background-color: var(--sun); }
html[data-theme="dark"] #notes .note .box.exam { background-color: var(--lav); }
html[data-theme="dark"] #notes .note .box.like { background-color: var(--sun); }
html[data-theme="dark"] #notes .note .box.link { background-color: var(--lav); }
html[data-theme="dark"] #notes .note .def { background-color: var(--lav); }
html[data-theme="dark"] .sat-view .nsec--traps { background-color: var(--rose); }
html[data-theme="dark"] .sat-view .nsec--checklist { background-color: var(--mint); }
html[data-theme="dark"] .bw__card { background-color: var(--lav); }
html[data-theme="dark"] .bw__link--lock { background-color: var(--mint); }
html[data-theme="dark"] .kban__col.is-over { background-color: var(--lav); }
html[data-theme="dark"] .kc__tag { background-color: var(--lav); }
html[data-theme="dark"] .kc__due.is-late { background-color: var(--rose); }
html[data-theme="dark"] .kc__due.is-today { background-color: var(--sun); }
html[data-theme="dark"] .xb.is-done { background-color: var(--mint) !important; }
html[data-theme="dark"] .xs--live { background-color: var(--mint); }
html[data-theme="dark"] .xp__h em { background-color: var(--mint); }
html[data-theme="dark"] .li-pill--ok { background-color: var(--mint); }
html[data-theme="dark"] .li-pill--bad { background-color: var(--rose); }
html[data-theme="dark"] .li-pill--wait { background-color: var(--sun); }
html[data-theme="dark"] .li-warn { background-color: var(--sun); }
html[data-theme="dark"] .li-warn.is-danger { background-color: var(--rose); }
html[data-theme="dark"] .li-rar--uncommon { background-color: var(--mint); }
html[data-theme="dark"] .li-rar--rare { background-color: var(--sky); }
html[data-theme="dark"] .li-rar--epic { background-color: var(--lav); }
html[data-theme="dark"] .li-new { background-color: var(--sun); }
html[data-theme="dark"] .li-ext__ic { background-color: var(--sky); }
html[data-theme="dark"] .li-ext.is-on .li-ext__ic { background-color: var(--mint); }

/* the send sheet as a side panel (friends.js pickAndSend, owner 2026-10-22): slides in from the right, full height;
   Groups and Friends each have a search, and the list between the header and the buttons scrolls */
.fr-sheet--side { place-items: stretch end; padding: 0; }
.fr-sheet--side .fr-sheet__card { display: flex; flex-direction: column; width: min(420px, 100vw); height: 100%; max-height: none; overflow: hidden; padding: 22px 20px 18px; border-radius: 26px 0 0 26px; transform: translateX(100%); transition: transform .45s cubic-bezier(0.32, 0.72, 0, 1); }
.fr-sheet--side.is-in .fr-sheet__card { transform: none; }
.fr-side__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fr-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--navy); color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer; }
.fr-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 14px -6px 0; padding: 0 6px 4px; }
.fr-sec + .fr-sec { margin-top: 16px; }
.fr-sec__h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 8px; background: var(--card); }
.fr-sec__h .fr-h { margin: 0; }
.fr-find { display: flex; align-items: center; gap: 6px; width: min(190px, 55%); height: 32px; padding: 0 10px; border-radius: 999px; background: var(--navy); color: var(--muted); }
.fr-find svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fr-find input { flex: 1; min-width: 0; border: 0; background: none; color: var(--paper); font: inherit; font-size: 13px; outline: none; }
.fr-find:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 55%, transparent); }
.fr-sec .fr-list { margin-top: 0; }
.fr-row[hidden] { display: none; }
.fr-none { margin: 8px 2px 0; font-size: 13px; color: var(--muted); }
.fr-sheet--side .fr-acts { flex: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .fr-sheet--side .fr-sheet__card { transition: none; } }

/* ---------- a page shown inside a group's bank (friends.html, ?embed=1 in an iframe; owner, 2026-10-22) ----------
   just the note or the question: no bar, footer, drawers, dock or assistant (nav.js adds html.ai45-embed) */
html.ai45-embed body { padding-top: 0 !important; }
/* Christmas shared-paper margins reveal the host page's single scenery layer; embeds load no seasonal artwork. */
html[data-season="christmas"].ai45-embed, html[data-season="christmas"].ai45-embed body { background: transparent !important; }
html.ai45-embed body::before, html.ai45-embed body::after { display: none !important; }
html.ai45-embed #app-bar, html.ai45-embed .footer, html.ai45-embed .mn-tab, html.ai45-embed .mn-drawer, html.ai45-embed .syl-tab,
html.ai45-embed .syl-drawer, html.ai45-embed .as-launch, html.ai45-embed .lockdock, html.ai45-embed .appn, html.ai45-embed .rtabs,
html.ai45-embed .nt-pager, html.ai45-embed .pbar, html.ai45-embed .ph__crumbs { display: none !important; }
/* the question bank: only the question's pane, without the list, the filters or the steps between questions */
html.ai45-embed .qb-head, html.ai45-embed .qb-fbar, html.ai45-embed .qb-lp, html.ai45-embed .qb-preview,
html.ai45-embed .qb-tb--r [data-closeq], html.ai45-embed .qb-tb--r [data-share], html.ai45-embed .qb-tb--r [data-step], html.ai45-embed .qbs-btn--x, html.ai45-embed .qbw-btn,
html.ai45-embed .qb-tb--r [data-heart] { display: none !important; }
/* a question sent to friends or a group: no "How many marks did you get?" (owner, 2026-10-23) */
html.ai45-embed .qb-self { display: none !important; } /* (a question sent to you or a group: just Question and Answer; owner, 2026-10-22) */
html.ai45-embed .qb-split { display: block !important; }
html.ai45-embed .qb-rp { display: flex !important; overflow: visible !important; }

/* a question shared to you or a group: the Question / Answer tabs as tall as Annotate, a bit narrower (owner, 2026-10-22) */
html.ai45-embed .qb-tabs { margin-left: auto; padding-left: 0; border-left: 0; gap: 8px; }
html.ai45-embed .qb-tabs .qb-tbtn { height: 54px; min-width: 76px; padding: 0 18px; border-radius: 16px; }
html.ai45-embed .qb-tabs .qb-tbtn .ic { width: 30px; height: 30px; }
/* the legal row at the bottom of every footer (nav.js, 2026-10-23) */
.footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(var(--fg-rgb), .08); color: var(--muted); font-size: 13px; }
.footer__legal nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer:has(> .footer__legal) { flex-wrap: wrap; } .footer > .footer__legal { flex: 1 0 100%; } /* flex footers (site.css): the legal row goes under the columns, not beside them */
.footer__legal a { color: var(--muted); text-decoration: none; font-weight: 600; }
.footer__legal a:hover { color: var(--paper); text-decoration: underline; }

/* ---------- a subject that isn't yours (owner, 2026-10-24; nav.js AI45_BLOCK_HTML) ---------- */
.ai45-blocked { max-width: 560px; margin: 70px auto 90px; padding: 34px 30px; border-radius: 26px; background: var(--card); color: var(--paper); text-align: center; }
.ai45-blocked__ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--sun); }
.ai45-blocked__ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ai45-blocked h2 { margin: 16px 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ai45-blocked p { margin: 0 auto; max-width: 420px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.ai45-blocked__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.ai45-blocked__acts a { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; }
.ai45-blocked__go { background: var(--ink); color: #fff; }
.ai45-blocked__back { background: rgba(var(--fg-rgb), .06); color: var(--paper); }
html[data-theme="dark"] .ai45-blocked__go { background: var(--paper); color: var(--card); }

/* ---------- HL = the darker orange, SL = the lighter one, everywhere (owner, 2026-10-24; the same tokens as setup) ---------- */
/* SL shows in the HL colour everywhere (owner, 2026-10-24: "both just be the HL colour other than the selection in the
   start"); only the subject pickers (setup and My setup) keep a lighter SL, --pick-sl */
:root { --lv-hl: var(--orange); --lv-sl: var(--lv-hl); --lv-sl-ink: var(--on-accent, #fff); --pick-sl: color-mix(in srgb, var(--orange) 42%, #fff); --pick-sl-ink: color-mix(in srgb, var(--sand) 72%, #000); --pick-sl-txt: color-mix(in srgb, var(--orange) 62%, #fff); }
html[data-theme="dark"] { --pick-sl: color-mix(in srgb, var(--orange) 38%, var(--card)); --pick-sl-ink: var(--paper); --pick-sl-txt: color-mix(in srgb, var(--orange) 55%, #fff); }
html[data-theme] .lvl button.is-on[data-set="HL"], html[data-theme] .qb-lv .lvl button.is-on[data-set="HL"] { background: var(--lv-hl); color: var(--on-accent, #fff); }
html[data-theme] .lvl button.is-on[data-set="SL"], html[data-theme] .qb-lv .lvl button.is-on[data-set="SL"] { background: var(--lv-sl); color: var(--lv-sl-ink); }
html[data-theme] :is(.note span.hl, .ts__hl, .hlb, .qb-hl, .fp-subj__c em.lv-hl, .su-tag--hl) { background: var(--lv-hl); color: var(--on-accent, #fff); }
html[data-theme] :is(.fp-subj__c em.lv-sl, .su-tag--sl) { background: var(--lv-sl); color: var(--lv-sl-ink); }

/* no double-tap zoom anywhere; pinch still zooms (owner, 2026-10-24) */
html { touch-action: manipulation; }

/* ---------- Classic dark = "Night reading" (owner, 2026-10-24: option 7 of the 10 in mockups/ib-dark) ----------
   The pages stay dark, but what you read sits on dimmed warm paper, like a book under a lamp: the note in the reader
   (a paper sheet with the light-mode tokens, warmed), and the question / markscheme pictures and Work it out's sheet
   in the question bank. Only Classic's dark (data-scheme midnight); the other schemes get their own later. */
html[data-scheme="midnight"] body.read #notes .nl__main {
  color-scheme: light;
  --paper: #2A251E; --muted: #6A6153; --faint: #8F8576; --fg-rgb: 42, 37, 30;
  --card: #E2DBCF; --card-2: #D2CABC; --surface: #E2DBCF; --surface-2: #D2CABC; --navy: #D2CABC; --navy-2: #CCC3B4; --slate: #C3BAAA;
  --hairline: #C6BDAE; --line: #C6BDAE; --ink: #2A251E; --well-rgb: 42, 37, 30; --well-k: .12;
  --orange: #C9632B; --amber: #D27B32; --sand: #A4521B; --accent-hi: #C9632B; --on-accent: #fff;
  --lav: #CBBFD6; --lav-2: #BEAFCC; --mint: #C2D5C2; --mint-2: #ADC8AE; --sun: #E2D29E; --sun-2: #D6C27F; --sky: #BED0DA; --sky-2: #A9C2CF; --rose: #DFC2BF;
  --e-lav: #7E62A8; --e-mint: #4C8A5E; --e-sun: #A07A16; --e-sky: #3F7593; --e-rose: #A84A4E;
  --t-lav: #5B3F86; --t-mint: #2F6B45; --t-sun: #7D5A0E; --t-sky: #2C5E78; --t-rose: #94363B;
  background: #D9D2C5; color: var(--paper);
  border-radius: 26px; padding: 34px 40px 40px;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7);
}
@media (max-width: 700px) { html[data-scheme="midnight"] body.read #notes .nl__main { border-radius: 20px; padding: 22px 18px 26px; } }
/* simulations draw for a dark page, so they stay dark panels on the paper */
html[data-scheme="midnight"] body.read #notes .nl__main .sim {
  color-scheme: dark;
  --paper: #ECEEF2; --muted: #A0A6B2; --faint: #6E7583; --fg-rgb: 236, 238, 242;
  --card: #181B22; --card-2: #1F232B; --surface: #181B22; --surface-2: #1F232B; --navy: #0F1115; --navy-2: #14171D; --slate: #232733;
  --hairline: #262A33; --line: #262A33; --ink: #2B303C; --well-rgb: 0, 0, 0;
  --orange: #F08A4E; --amber: #F9A35F; --sand: #F6A77C; --accent-hi: #F9A35F; --on-accent: #2B1608;
  --t-lav: #C9B5FF; --t-sun: #F2C66B; --t-mint: #8FD9A8; --t-rose: #FF9DB0; --t-sky: #8FD3DE;
  color: var(--paper);
}
/* the question bank: printed pages on the same paper (qbank.css / qbank-ink.css load after this file, hence [data-theme]) */
html[data-scheme="midnight"][data-theme="dark"] .qb-img { filter: sepia(.35) brightness(.84) contrast(1.05); }
html[data-scheme="midnight"][data-theme="dark"] .qbw-space { background-color: #D9D2C5; filter: none; }
html[data-scheme="midnight"][data-theme="dark"] body.qbw-mode .qb-body.qbw-on::before { background-color: #D9D2C5; }

/* ---------- the login streak in the bar (nav.js paintStreak; owner, 2026-10-24: the pill beside the clock, +1 on each new day) ---------- */
/* just the flame and the number, no pill, close to the clock (owner, 2026-10-25) */
#app-bar .bar__streak { position: relative; flex: none; cursor: default; height: 38px; padding: 0 2px; margin-left: -10px; border-radius: 10px; background: none; color: #fff; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; outline: none; }
#app-bar .bar__streak[hidden] { display: none; }
#app-bar .bar__streak:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.bst__fl { width: 19px; height: 21px; display: block; transform-origin: 50% 90%; animation: bst-flick 1.8s ease-in-out infinite; }
.bst__fl svg, .bst__h svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes bst-flick { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(.97, 1.05) skewX(-2deg); } 60% { transform: scale(1.03, .97) skewX(2deg); } }
.bst__n { font-size: 15px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* +1: floats up and fades; the flame flares once */
.bst__plus { position: absolute; left: 50%; top: -2px; font-style: normal; font-size: 13px; font-weight: 900; color: #FFC15A; text-shadow: 0 0 8px rgba(255, 150, 60, .8); pointer-events: none; opacity: 0; transform: translate(-50%, 0); }
.bar__streak.is-up .bst__plus { animation: bst-plus 1.6s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
.bar__streak.is-up .bst__fl { animation: bst-flare .9s cubic-bezier(0.32, 0.72, 0, 1), bst-flick 1.8s ease-in-out .9s infinite; }
.bar__streak.is-up .bst__n { animation: bst-pop .6s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes bst-plus { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); } 18% { opacity: 1; transform: translate(-50%, -12px) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30px) scale(1); } }
@keyframes bst-flare { 0% { transform: scale(1); filter: none; } 35% { transform: scale(1.45, 1.6); filter: drop-shadow(0 0 8px rgba(255, 150, 60, .95)); } 100% { transform: scale(1); filter: none; } }
@keyframes bst-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); color: #FFC15A; } 100% { transform: scale(1); } }
/* the pop-up when you point at it */
.bst__pop { position: absolute; top: calc(100% + 12px); left: 0; z-index: 30; width: 268px; padding: 14px 16px; border-radius: 18px; background: #17181D; border: 1px solid #2A2C33; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6); color: #fff; display: block; text-align: left; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s .18s; pointer-events: none; }
#app-bar .bar__streak:hover .bst__pop, #app-bar .bar__streak:focus-visible .bst__pop { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s cubic-bezier(0.32, 0.72, 0, 1); }
.bst__h { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; }
.bst__h svg { width: 17px; height: 19px; }
.bst__p { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: #A9ADB7; font-weight: 500; }
.bst__wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; text-align: center; font-size: 10.5px; color: #8A8E98; font-weight: 600; }
.bst__wk i { display: block; height: 22px; border-radius: 7px; background: #26282F; margin-bottom: 3px; }
.bst__wk i.on { background: linear-gradient(#FFC15A, #F08A4E); }
.bst__wk i.is-today { box-shadow: 0 0 0 1.5px #fff; }
.bst__nx { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: #C8CBD2; font-weight: 600; }
.bst__meter { display: block; height: 6px; border-radius: 9px; background: #26282F; margin-top: 5px; overflow: hidden; }
.bst__meter i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #FFC15A, #F08A4E); }
@media (max-width: 420px) { #app-bar .bar__streak { height: 34px; } .bst__pop { display: none; } }
@media (prefers-reduced-motion: reduce) { .bst__fl, .bar__streak.is-up .bst__fl { animation: none; } }

/* the bar circle wearing an origami picture (assets/pfp.js, cached by friends-page.js) */
.bar__av.has-pfp { background: none; overflow: hidden; padding: 0; }
.bar__av.has-pfp svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
/* every dropdown's list (assets/select.js, owner 2026-10-25): the majors dropdown's card, with the chosen option marked */
.xsel .mpick__o { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xsel .mpick__o.is-sel { font-weight: 800; }
.xsel .mpick__o.is-sel::after { content: ""; flex: none; width: 14px; height: 14px; background: var(--orange, #F08A4E); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.xsel .mpick__o.is-ph { color: var(--muted, #6B6F78); font-weight: 600; }
.xsel .mpick__o.is-dis { opacity: .4; cursor: default; }
.xsel .mpick__o.is-dis:hover { background: none; }
.xsel__g { padding: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6B6F78); }
select:not([multiple]):not([disabled]) { cursor: pointer; }
/* the account panel's header wears your profile picture too (owner, 2026-10-25) */
.ap__av.has-pfp { padding: 0; overflow: hidden; background: none; }
.ap__av.has-pfp svg { width: 100%; height: 100%; display: block; }

/* The bar's notch is a see-through gap (owner, 2026-10-25): the same shape as the old tab, cut out of the bar's
   background with a mask, so whatever is behind the bar shows in it. The background is drawn by #app-bar::before, so the
   mask never clips the bar's own menus and pop-ups. nav.js sets --notch-x (the active or hovered section's middle). */
@property --notch-x { syntax: "<length>"; inherits: true; initial-value: -400px; }
#app-bar .bar__tab { display: none !important; }
#app-bar.bar.has-notch, html[data-theme="dark"] #app-bar.bar.has-notch { background: transparent; }
#app-bar.has-notch::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--ink);
  /* the cut-out runs 2px below the bar's edge: a shape ending exactly on the edge is drawn with a soft last row at
     125% / 150% screen scaling, which showed as a faint dark line along the bottom of the notch (owner, 2026-10-26) */
  --notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C14,14 14,0 28,0 H132 C146,0 146,14 160,14 V16 H0 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--notch), linear-gradient(#000 0 0); mask-image: var(--notch), linear-gradient(#000 0 0);
  -webkit-mask-position: calc(var(--notch-x) - 80px) calc(100% + 2px), 0 0; mask-position: calc(var(--notch-x) - 80px) calc(100% + 2px), 0 0;
  -webkit-mask-size: 160px 16px, 100% 100%; mask-size: 160px 16px, 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: xor; mask-composite: exclude;
}
html[data-theme="dark"] #app-bar.has-notch::before { background: var(--bar); }
#app-bar.notch-glide { transition: --notch-x .5s cubic-bezier(0.32, 0.72, 0, 1); }
@media (max-width: 920px) { #app-bar.has-notch::before { -webkit-mask: none; mask: none; } }
body.menu-open #app-bar.has-notch::before { -webkit-mask: none; mask: none; }
@media (prefers-reduced-motion: reduce) { #app-bar.notch-glide { transition: none; } }

/* the SL / HL switch on light pages (owner, 2026-10-25: "make the pill more visible on light mode"): a visible track
   and darker unpicked text; the picked side keeps its orange */
html:not([data-theme="dark"]) .lvl { background: rgba(var(--fg-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .12); }
html:not([data-theme="dark"]) .lvl button:not(.is-on) { color: color-mix(in srgb, var(--paper) 72%, transparent); }
html:not([data-theme="dark"]) .lvl button:not(.is-on):hover { color: var(--paper); background: rgba(var(--fg-rgb), .06); }
html:not([data-theme="dark"]) .subj:hover .lvl { background: rgba(255, 255, 255, .85); }

/* the plan chip that replaces Upgrade for people who pay (nav.js initPlanChip, owner 2026-10-27) */
.bar__plan { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13.5px; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: background-color .2s; }
.bar__plan:hover { background: rgba(255, 255, 255, .16); }
.bar__plan sub { font-size: .65em; vertical-align: -0.18em; line-height: 0; }
.bar__plan.is-full { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ha-bar1, #F08A4E) 75%, transparent); }
.bar__plan.is-full span { background: linear-gradient(90deg, var(--ha-bar1, #F08A4E), var(--ha-bar2, #FFC56B) 55%, #B79CE8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bar__plan.is-soon { background: var(--orange); box-shadow: none; }
/* Full AI45+ (bought or the free week): a light runs round the chip's border like a loading ring, slow, forever
   (owner, 2026-11-09: "a cool animation ... like a loading button around it"; always, AI45+ gradient, free week too).
   The first time it shows on a device it does a fast, glowing burst (.is-new, nav.js ringBurst). */
@property --plus-ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.bar__plan.is-full:not(.is-soon) { position: relative; isolation: isolate; }
.bar__plan.is-full:not(.is-soon)::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: -1;
  background: conic-gradient(from var(--plus-ring), transparent 0 52%, color-mix(in srgb, #F08A4E 40%, transparent) 64%, #F08A4E 76%, #FFC56B 86%, #B79CE8 96%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: plus-ring 3.6s linear infinite; }
.bar__plan.is-full.is-new::before { animation: plus-ring .75s cubic-bezier(.5, .1, .5, .9) 4, plus-ring 3.6s linear 3s infinite; }
.bar__plan.is-full.is-new { animation: plus-glow 3s ease-out; }
@keyframes plus-ring { to { --plus-ring: 360deg; } }
@keyframes plus-glow { 0% { filter: drop-shadow(0 0 0 rgba(255, 197, 107, 0)); } 25% { filter: drop-shadow(0 0 10px rgba(255, 170, 90, .75)) drop-shadow(0 0 18px rgba(183, 156, 232, .5)); } 100% { filter: drop-shadow(0 0 0 rgba(255, 197, 107, 0)); } }
/* No AI45+ (the Upgrade button) or another plan (ai45+ SAT etc., Renew): just a plain ai45-orange loading ring, nothing
   else (owner, 2026-11-09). It sits 1.5px off the button so it shows round the orange Upgrade fill. */
#app-bar :is(.bar__up, .bar__plan:not(.is-full), .bar__plan.is-soon) { position: relative; isolation: isolate; }
#app-bar :is(.bar__up, .bar__plan:not(.is-full), .bar__plan.is-soon)::before { content: ""; position: absolute; inset: -3.5px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: -1;
  background: conic-gradient(from var(--plus-ring), transparent 0 55%, rgba(227, 114, 57, .35) 68%, #E37239 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: plus-ring 3.6s linear infinite; }
html[data-theme="dark"] #app-bar :is(.bar__up, .bar__plan:not(.is-full), .bar__plan.is-soon)::before { background: conic-gradient(from var(--plus-ring), transparent 0 55%, rgba(240, 138, 78, .35) 68%, #F08A4E 88%, transparent 100%); }
@media (prefers-reduced-motion: reduce) { #app-bar :is(.bar__up, .bar__plan:not(.is-full), .bar__plan.is-soon)::before { animation: none; --plus-ring: 200deg; } }
@media (prefers-reduced-motion: reduce) { .bar__plan.is-full:not(.is-soon)::before, .bar__plan.is-full.is-new::before { animation: none; --plus-ring: 200deg; } .bar__plan.is-full.is-new { animation: none; } }
.bar__plan svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

/* Shared fish labels on your own and friends' aquariums. */
.aq-tag { position: absolute; z-index: 5; transform: translate(-50%,-100%); display: inline-flex; align-items: center; gap: 7px; width: max-content; max-width: calc(100% - 16px); padding: 4px 5px 4px 11px; border-radius: 999px; background: rgba(14,14,16,.88); box-shadow: 0 0 0 2px var(--aq-tag-color,transparent),0 6px 18px -8px #0008; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.4; pointer-events: none; }
.aq-tag[hidden] { display: none; }
.aq-tag__title { display: grid; min-width: 0; }
.aq-tag__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aq-tag__title small { font-size: 11px; font-weight: 600; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-tag__rarity { flex: none; display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 999px; background: var(--aq-tag-bg); color: var(--aq-tag-color); font-size: 10.5px; font-weight: 700; }

/* The account menu: edit identity at the top, usage circle, plan, shortcuts, full account and sign out. */
.ap__profile { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; color: inherit; border-radius: 14px; padding: 3px; }
.ap__profile:hover { background: var(--navy); }
.ap__profile .bar__av { width: 52px; height: 52px; flex: none; }
.ap__panel--compact { width: min(394px,calc(100vw - 20px)); gap: 12px; }
.ap__panel--compact > * { flex-shrink: 0; }
.ap__panel--compact .ap__head { padding-bottom: 15px; }
.ap__panel--compact .ap__plan { background: var(--card-2); color: var(--paper); padding: 16px 18px; border-radius: 20px; }
.ap__panel--compact .ap__plan-t small { color: var(--muted); }
.ap__panel--compact .ap__plan-t em { display: block; margin: 4px 0 0; color: var(--muted); }
.ap__panel--compact .ap__pbtn { background: var(--card); color: var(--paper); border-radius: 999px; }
.ap__panel--compact .ap__pbtn--go { background: var(--orange); color: var(--on-accent); }
.ap__panel--compact .ap__list { gap: 7px; }
/* the divider is its own element, so the panel's even spacing puts it halfway between the groups (owner, 2026-10-28) */
.ap__sep { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }
/* Sign out is the same size as Sign-in and security above it, at every height (owner, 2026-10-28) */
.ap__full .ap__i,.ap__out--compact { height: 60px; font-size: 16px; }
.ap__out--compact { width: 100%; flex: none; margin-top: 0; justify-content: flex-start; gap: 12px; padding: 0 14px; background: color-mix(in srgb,#D6384D 10%,var(--card)); color: #B82D42; box-shadow: none; }
.ap__out--compact span { flex: 1; text-align: left; }
html[data-theme="dark"] .ap__out--compact { color: #FF9CAA; }
.aiu-account { width: 100%; padding: 8px 0 9px; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 0; background: none; color: var(--paper); font: inherit; }
/* a speedometer: the arc opens at the bottom, "AI45 Today" sits in the opening, the % in the middle (usage.js gauge) */
.aiu-account__ring { display: block; width: 168px; height: 168px; position: relative; }
.aiu-account__ring > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.aiu-account__track,.aiu-account__fill { fill: none; stroke-width: 10; stroke-linecap: round; }
.aiu-account__ticks line { stroke: rgba(var(--fg-rgb),.28); stroke-width: 2; stroke-linecap: round; }
.aiu-account__track { stroke: rgba(var(--fg-rgb),.1); }
.aiu-account__fill { stroke: var(--orange); stroke-linecap: round; }
.aiu-account__value { position: absolute; inset: 0 0 12% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.aiu-account__value b { font-size: 36px; font-weight: 800; line-height: 1.2; letter-spacing: -.04em; }
.aiu-account__value small { color: var(--muted); font-size: 13px; }
.aiu-account__title { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.aiu-account__title sub,.ap__plan-t b sub { font-size: .62em; vertical-align: -.2em; line-height: 0; }

/* Keep the entire student account menu visible, including on short tablet/phone screens. */
body.ap-open { overflow: hidden; }
.ap__panel--compact { bottom: 10px; justify-content: space-between; overflow: hidden; max-height: calc(100dvh - 20px); }
.ap__panel--compact .ap__code input { color: var(--paper); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.ap__panel--compact .ap__code input::placeholder { color: var(--muted); }
.ap__panel--compact .ap__code-back { grid-column: 1 / -1; justify-self: start; }
.ap__panel--compact:has([data-codeform]:not([hidden])) [data-account-usage],
.ap__panel--compact .ap__plan:has([data-codeform]:not([hidden])) :is(.ap__plan-t,.ap__plan-acts) { display: none; }
@media (max-height: 840px) {
  .ap__panel--compact { padding: 14px; gap: 8px; }
  .ap__panel--compact .ap__head { padding: 0 0 10px; }
  .ap__panel--compact .ap__profile { padding: 0; }
  .ap__panel--compact .ap__profile .bar__av { width: 44px; height: 44px; }
  .ap__panel--compact .aiu-account { padding: 4px 0; gap: 6px; }
  .ap__panel--compact .aiu-account__ring { width: 150px; height: 150px; }
  .ap__panel--compact .aiu-account__value b { font-size: 34px; }
  .ap__panel--compact .aiu-account__title { font-size: 14px; line-height: 18px; }
  .ap__panel--compact .ap__full .ap__i,.ap__panel--compact .ap__out--compact { height: 52px; font-size: 15px; }
  .ap__panel--compact .ap__plan { padding: 12px 14px; gap: 6px; }
  .ap__panel--compact .ap__plan-t small { line-height: 14px; }
  .ap__panel--compact .ap__plan-t b { display: block; line-height: 21px; }
  .ap__panel--compact .ap__plan-t em { margin-top: 2px; line-height: 16px; font-size: 12px; }
  .ap__panel--compact .ap__pbtn { height: 32px; }
  .ap__panel--compact .ap__list { gap: 6px; }
  .ap__panel--compact .ap__i { height: 44px; font-size: 14px; }
  .ap__panel--compact .ap__full { padding-top: 0; }
}
@media (max-height: 720px) {
  .ap__panel--compact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: space-between; padding: 12px; gap: 8px; }
  .ap__panel--compact .ap__head,.ap__panel--compact .ap__list { grid-column: 1 / -1; }
  .ap__panel--compact [data-account-usage] { align-self: center; }
  .ap__panel--compact .aiu-account__ring { width: 140px; height: 140px; }
  .ap__panel--compact .aiu-account__value b { font-size: 32px; }
  .ap__panel--compact .aiu-account__title { font-size: 13px; }
  .ap__panel--compact .ap__sep { display: none; }
  .ap__panel--compact .ap__full .ap__i,.ap__panel--compact .ap__out--compact { height: 44px; }
  .ap__panel--compact .ap__plan { padding: 10px; }
  .ap__panel--compact .ap__plan-acts { display: grid; gap: 5px; }
  .ap__panel--compact .ap__pbtn { padding: 0 9px; font-size: 12px; }
  .ap__panel--compact .ap__list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .ap__panel--compact .ap__list .ap__i:last-child { grid-column: 1 / -1; }
  .ap__panel--compact .ap__full { padding: 0; border: 0; }
  .ap__panel--compact .ap__full .ap__i,.ap__panel--compact .ap__out--compact { padding: 0 10px; gap: 8px; font-size: 13px; line-height: 16px; }
  .ap__panel--compact .ap__full .ap__go,.ap__panel--compact .ap__out--compact .ap__go { display: none; }
  .ap__panel--compact:has([data-codeform]:not([hidden])) .ap__plan { grid-column: 1 / -1; }
}
@media (max-height: 520px) {
  .ap__panel--compact { width: min(620px,calc(100vw - 20px)); padding: 8px; gap: 4px; }
  .ap__panel--compact .ap__head { height: 44px; padding: 0; border: 0; }
  .ap__panel--compact .ap__profile .bar__av { width: 36px; height: 36px; }
  .ap__panel--compact .aiu-account { padding: 0; gap: 4px; }
  .ap__panel--compact .aiu-account__ring { width: 112px; height: 112px; }
  .ap__panel--compact .aiu-account__value b { font-size: 26px; }
  .ap__panel--compact .aiu-account__title { font-size: 11px; line-height: 14px; }
  .ap__panel--compact .ap__plan { padding: 8px; gap: 4px; }
  .ap__panel--compact .ap__plan-t small { font-size: 11px; line-height: 14px; }
  .ap__panel--compact .ap__plan-t b { font-size: 15px; line-height: 18px; }
  .ap__panel--compact .ap__plan-t em { margin: 0; font-size: 11px; line-height: 14px; }
  .ap__panel--compact .ap__plan-acts { display: flex; gap: 4px; flex-wrap: wrap; }
  .ap__panel--compact .ap__pbtn { height: 44px; padding: 0 12px; }
  .ap__panel--compact .ap__list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 0; border: 0; }
  .ap__panel--compact .ap__list .ap__i:last-child { grid-column: auto; }
  .ap__panel--compact .ap__list .ap__i { height: 44px; padding: 0 6px; justify-content: center; font-size: 12px; line-height: 15px; text-align: center; }
  .ap__panel--compact .ap__list .ap__i > svg { display: none; }
}

/* Tall screens: the account menu fills its height instead of floating in space (owner, 2026-10-28: "still looks so empty") */
@media (min-height: 950px) {
  .ap__panel--compact { padding: 22px; }
  .ap__panel--compact .ap__profile .bar__av { width: 58px; height: 58px; }
  .ap__panel--compact .ap__who b { font-size: 19px; } .ap__panel--compact .ap__who small { font-size: 14px; }
  .ap__panel--compact .aiu-account { gap: 0; padding: 6px 0 4px; }
  .ap__panel--compact .aiu-account__ring { width: 224px; height: 224px; }
  .ap__panel--compact .aiu-account__value b { font-size: 54px; }
  .ap__panel--compact .aiu-account__title { font-size: 18px; }
  .ap__panel--compact .ap__plan { padding: 20px 22px; border-radius: 22px; }
  .ap__panel--compact .ap__plan-t small { font-size: 12px; }
  .ap__panel--compact .ap__plan-t b { display: block; margin-top: 2px; font-size: 22px; }
  .ap__panel--compact .ap__plan-acts { margin-top: 6px; }
  .ap__panel--compact .ap__pbtn { height: 42px; padding: 0 18px; font-size: 14.5px; }
  .ap__panel--compact .ap__list { gap: 9px; }
  .ap__panel--compact .ap__i { height: 58px; padding: 0 18px; font-size: 16px; gap: 14px; }
  .ap__panel--compact .ap__i > svg:first-child,.ap__panel--compact .ap__out--compact > svg:first-child { width: 22px; height: 22px; }
  .ap__panel--compact .ap__full .ap__i,.ap__panel--compact .ap__out--compact { height: 66px; font-size: 17px; }
  .ap__panel--compact .ap__out--compact { padding: 0 18px; gap: 14px; }
}

/* "Don't" and "Common mistake" boxes can't be read as advice (owner, 2026-10-28, mockups/donts): a red edge and a big
   red uppercase label; "Don't" boxes and mistakes get a red cross, and a guide's own "don't" words are bold red too */
.box.trap, .g-box.avoid { border-left: 6px solid #C2364B !important; }
html .note .box.trap::before, html .note .box.trap > .box-t, html .u-gd__s .g-box.avoid > b:first-child, html .tgd__s .box.trap::before {
  display: flex; align-items: center; min-height: 26px; margin-bottom: 8px; font-family: inherit !important; font-size: 18px !important;
  font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase !important; color: #A11F35 !important; }
html .note .box.trap::before, html .note .box.trap > .box-t { font-size: 15.5px !important; }
html .note .box.trap::before, html .note .box.trap > .box-t, html .u-gd__s .g-box.avoid > b:first-child, html .tgd__s .box.trap::before {
  padding-left: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23C2364B'/%3E%3Cpath d='M9 9l8 8M17 9l-8 8' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 26px 26px; }
html .note .box.trap::before, html .note .box.trap > .box-t { padding-left: 30px; background-size: 22px 22px; min-height: 22px; }
html .tgd__s .box.trap::before { content: "Don't"; }
/* every "Don't ..." / "Never ..." instruction in the guides is marked <b class="no"> at the source */
b.no { color: #A11F35; font-weight: 800; }
html[data-theme="dark"] .box.trap, html[data-theme="dark"] .g-box.avoid { border-left-color: #FF6B83 !important; }
html[data-theme="dark"] .note .box.trap::before, html[data-theme="dark"] .note .box.trap > .box-t, html[data-theme="dark"] .u-gd__s .g-box.avoid > b:first-child, html[data-theme="dark"] .tgd__s .box.trap::before, html[data-theme="dark"] b.no { color: #FF8A9D !important; }

/* the free 10 days: AI₄₅+ for everyone (supabase/open-week.sql) */
.bar__plan.is-open { gap: 6px; }
.bar__plan.is-open em { white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, var(--ha-g1, #E37239), var(--ha-bar1, #F2B36B)); color: #fff; letter-spacing: .02em; }

/* No lone words on their own line, anywhere (owner, 2026-10-31): paragraphs wrap "pretty" (the browser
   evens out the last lines), headings are balanced. text-wrap-style inherits, so this reaches every page. */
body { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
@media (hover: none) and (pointer: coarse) { html { overscroll-behavior-y: none; } }
[data-guide-soon] { cursor: default !important; color: var(--muted); }
[data-guide-soon] > .nv-soon { display: inline-flex; flex: none; margin-left: .5em; white-space: nowrap; vertical-align: middle; }

/* One Seasonal tag for every limited item (owner, 4 Nov): glowy orange, top left of its card or picture.
   The card (or picture) it sits on needs position: relative. Same look in light and dark. */
.season-tag { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1; color: #fff; white-space: nowrap; pointer-events: none;
  background: linear-gradient(90deg, #FF7417, #FFB04A 50%, #FF7417); background-size: 200% 100%; text-shadow: 0 1px 1px rgba(150, 50, 0, .35);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 150, .65), 0 0 10px 1px rgba(255, 128, 32, .55), 0 0 22px 3px rgba(255, 150, 40, .25); animation: seasonGlow 2.6s steps(52) infinite; }
.season-tag--sm { top: 2px; left: 2px; height: 16px; padding: 0 6px; font-size: 9.5px; }
@keyframes seasonGlow { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .season-tag { animation: none; } }
.li-dex__c, .li-shop__c { position: relative; }
/* the tag sits on the picture; seasonal cards line up with the rest (owner, 5 Nov: "DONT BE PUSHING IT DOWN") */
.fp-pfp.is-limited { overflow: visible; } .fp-pfp.is-limited > svg { border-radius: 50%; }