:root {
  color-scheme: light;
  --bg: #fbfbfd;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #aeaeb2;
  --border: #e8e8ed;
  --border-strong: #d2d2d7;
  --accent: #4353f5;
  --accent-soft: rgba(67, 83, 245, 0.09);
  --accent-contrast: #ffffff;
  --fill: rgba(0, 0, 0, 0.045);   /* Apple-style tinted gray fill (buttons) */
  --ok: #0d9b57;
  --warn: #e07c0c;
  --danger: #e5484d;
  --easy: #0d9b57;
  --medium: #e07c0c;
  --hard: #e5484d;
  --radius: 18px;      /* cards, banners */
  --radius-sm: 12px;   /* inputs, small frames */
  --pill: 980px;       /* buttons & chips */
  --shadow: 0 1px 2px rgba(0, 0, 20, 0.04), 0 8px 24px rgba(0, 0, 20, 0.04);
  /* Content is capped and centered; --edge is the distance from the viewport
     edge to the content edge, so full-bleed chrome (the nav) can align with it. */
  --content-max: 1360px;
  --gutter: 40px;
  --edge: max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));
}
/* Dark theme: applied when the user picked it, or by system preference
   unless the user explicitly picked light. */
:root {
  /* The default wallpaper follows the app theme like a macOS dynamic
     wallpaper. Veil: lower alpha = more photo. */
  --wall-img: url("/static/walls/monterra-day.jpg");
  --wall-veil: rgba(251, 251, 253, 0.32);
  --wall-halo: rgba(251, 251, 253, 0.85);
  --wall-halo-clear: rgba(251, 251, 253, 0);  /* same hue at zero alpha: WebKit
     fades `transparent` toward black, which draws a dirty edge on photos */
  --wall-glass: 92%;   /* card opacity on wallpaper pages */
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131315;
  --card: #1d1d1f;
  --text: #f5f5f7;
  --muted: #86868b;
  --faint: #6e6e73;
  --border: #2c2c2e;
  --border-strong: #3d3d40;
  --accent: #8c9bff;
  --accent-soft: rgba(140, 155, 255, 0.13);
  --accent-contrast: #14143c;
  --fill: rgba(255, 255, 255, 0.09);
  --ok: #3dd68c;
  --warn: #ffab4a;
  --danger: #ff7a72;
  --easy: #3dd68c;
  --medium: #ffab4a;
  --hard: #ff7a72;
  --wall-img: url("/static/walls/monterra-night.jpg");
  --wall-veil: rgba(19, 19, 21, 0.55);
  --wall-halo: rgba(19, 19, 21, 0.8);
  --wall-halo-clear: rgba(19, 19, 21, 0);
  --wall-glass: 84%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131315;
    --card: #1d1d1f;
    --text: #f5f5f7;
    --muted: #86868b;
    --faint: #6e6e73;
    --border: #2c2c2e;
    --border-strong: #3d3d40;
    --accent: #8c9bff;
    --accent-soft: rgba(140, 155, 255, 0.13);
    --accent-contrast: #14143c;
    --fill: rgba(255, 255, 255, 0.09);
    --ok: #3dd68c;
    --warn: #ffab4a;
    --danger: #ff7a72;
    --easy: #3dd68c;
    --medium: #ffab4a;
    --hard: #ff7a72;
    --wall-img: url("/static/walls/monterra-night.jpg");
    --wall-veil: rgba(19, 19, 21, 0.55);
    --wall-halo: rgba(19, 19, 21, 0.8);
    --wall-glass: 84%;
  }
}

/* ---- Wallpaper (all pages): photo behind a readability veil ---- */
body.wall::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: var(--wall-img) center / cover no-repeat;
}
body.wall::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--wall-veil);
}
/* collapsible card section (Settings sync history) */
details.fold summary {
  display: flex; align-items: baseline; gap: 12px;
  cursor: pointer; list-style: none;
}
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary h3 { margin: 0; display: inline; }
details.fold summary::before {
  content: "▸"; color: var(--muted); font-size: 12px;
  transition: transform 0.15s ease; display: inline-block;
}
details.fold[open] summary::before { transform: rotate(90deg); }
details.fold[open] summary { margin-bottom: 10px; }

/* wallpaper picker (Settings) */
.wp-grid { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 16px; }
.wp-grid form { margin: 0; }
.wp-opt {
  display: block; padding: 6px 6px 8px; font: inherit; color: var(--text);
  background: none; border: 2px solid var(--border); border-radius: 12px; cursor: pointer;
}
.wp-opt:hover { border-color: var(--accent); }
.wp-opt.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wp-thumb { display: flex; gap: 3px; width: 148px; height: 64px; border-radius: 7px; overflow: hidden; }
.wp-thumb img { width: 50%; height: 100%; object-fit: cover; display: block; }
.wp-thumb.wp-none { align-items: center; justify-content: center; background: var(--bg); color: var(--muted); font-size: 12.5px; }
.wp-name { display: block; text-align: center; font-size: 12.5px; margin-top: 7px; color: var(--muted); }
.wp-opt.sel .wp-name { color: var(--accent); font-weight: 600; }

/* translucent cards on wallpaper pages — the photo tints through.
   Deliberately NO backdrop-filter here: live blur re-renders on every
   scrolled frame and makes long pages (Settings) visibly laggy. */
body.wall .card,
body.wall .events {
  background: color-mix(in srgb, var(--card) var(--wall-glass), transparent);
}
/* with a thin veil, text sitting directly on the photo gets a soft halo */
body.wall .page-head,
body.wall main > p {
  text-shadow: 0 1px 2px var(--wall-halo), 0 0 16px var(--wall-halo);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-padding-top: 72px; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
main { max-width: var(--content-max); margin: 0 auto; padding: 32px var(--gutter) calc(96px + env(safe-area-inset-bottom, 0px)); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Problem titles that link to their review page: read as text, reveal on hover. */
a.title-link { color: inherit; }
a.title-link:hover { color: var(--accent); text-decoration: none; }

/* ---- native iPhone shell ----
   The iOS app stamps data-app="ios" before the page renders. Kill the grey
   tap flash so buttons and links feel native (the property inherits). */
:root[data-app="ios"] { -webkit-tap-highlight-color: transparent; }

/* ---- native Mac shell ----
   Inside the Mac app the titlebar is transparent and content is full-size;
   shift the nav right so the brand clears the traffic lights. */
:root[data-app="mac"] .topnav { padding-left: max(92px, var(--edge)); }
:root[data-app="mac"] .topnav.stuck { padding-left: max(92px, calc(var(--edge) + 16px)); }

/* ---- nav ---- */
.topnav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 10px;
  /* env() insets keep the bar clear of the iPhone Dynamic Island when the
     page runs edge-to-edge (viewport-fit=cover); they are 0 elsewhere. */
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--edge) 12px;
  transition: padding 0.25s ease;
}
/* When floating, the pill's edges line up with the content cards below
   (the shared --edge); the extra padding keeps text off the pill's edge. */
.topnav.stuck {
  padding-left: calc(var(--edge) + 16px);
  padding-right: calc(var(--edge) + 16px);
}
/* The bar's background lives on a pseudo-element so it can morph into a
   floating rounded pill on scroll without shifting the layout. */
.topnav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg);
  border: 1px solid transparent; border-radius: 0;
  transition: inset 0.25s ease, border-radius 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, box-shadow 0.25s ease;
}
/* Elevated once the page is scrolled (class set by a tiny listener in base.html). */
.topnav.stuck::before {
  inset: calc(7px + env(safe-area-inset-top, 0px)) var(--edge) 1px;
  border-radius: 999px;
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  /* modest radius: the live blur re-renders on every scrolled frame, and
     20px+ made the first scroll after a page load visibly stutter */
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
/* Over a wallpaper the resting nav keeps a soft scrim fading into the photo,
   so 13px links stay legible on bright skies (pill state keeps its own bg).
   The scrim overhangs the nav and finishes fading before its own edge, so
   there is never a visible line where it ends. */
body.wall .topnav:not(.stuck)::before {
  inset: 0 0 -48px;
  /* to top, transparent stop first: the browser's gradient edge rows can wrap
     and sample the FIRST stop — keep that stop invisible or it draws a line */
  background: linear-gradient(to top, var(--wall-halo-clear) 10%, var(--wall-halo) 80%) no-repeat;
}
.topnav .brand {
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  margin-right: 12px; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
}
.topnav .brand .logo { width: 21px; height: 21px; flex: none; }
/* Tab strip wrapper: invisible to layout on wide screens, becomes a
   horizontally scrollable strip on phones. */
.nav-tabs { display: contents; }
.topnav a {
  color: var(--muted); font-size: 13.5px; text-decoration: none;
  padding: 5px 12px; border-radius: var(--pill);
  transition: color .15s ease, background .15s ease;
}
.topnav a:hover { color: var(--text); text-decoration: none; background: var(--fill); }
.topnav a.active { color: var(--accent); background: var(--accent-soft); }
/* right-side cluster: account sync · source status · settings · theme toggle */
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.sync-pill {
  font-size: 12px !important; color: var(--muted) !important;
  white-space: nowrap; display: inline-flex; align-items: center;
}
.topnav .sync-pill { padding: 5px 9px; }
.sync-pill:hover { color: var(--text) !important; text-decoration: none; }
.sync-pill .dot { margin-right: 0; }
.sync-pill .sync-label { margin-left: 7px; }
.topnav .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  color: var(--muted); background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 15px; line-height: 1;
  transition: color .15s ease, background .15s ease;
}
.topnav .icon-btn:hover { color: var(--text); background: var(--fill); text-decoration: none; }
.topnav .icon-btn.active { color: var(--accent); background: var(--accent-soft); }
.topnav .icon-btn:disabled { color: var(--faint); cursor: wait; }
.account-sync-button.syncing svg {
  transform-box: fill-box; transform-origin: center;
  animation: account-sync-spin .8s linear infinite;
}
@keyframes account-sync-spin { to { transform: rotate(360deg); } }

/* Signed-in identity: provider profile image with a small GitHub/Google mark. */
.topnav .nav-avatar {
  position: relative; display: inline-flex; flex: none;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
}
.topnav .nav-avatar img,
.topnav .nav-avatar .nav-avatar-initial {
  width: 26px; height: 26px; margin: 2px; border-radius: 50%;
  border: 1px solid var(--border-strong); box-sizing: border-box;
}
.topnav .nav-avatar .nav-avatar-initial {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 650; line-height: 1;
  color: var(--accent); background: var(--accent-soft);
}
.topnav .nav-avatar:hover img,
.topnav .nav-avatar:hover .nav-avatar-initial { border-color: var(--accent); }
.topnav .nav-avatar .nav-avatar-badge {
  position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--card); border: 1px solid var(--border);
  color: var(--text);
}
.topnav .nav-avatar .nav-avatar-badge svg { width: 9px; height: 9px; display: block; }

/* Keep the full navigation useful on iPad-sized windows without allowing its
   intrinsic width to widen the whole page. The status dot still communicates
   sync state when its text label is hidden. */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .topnav { gap: 4px; }
  .topnav .brand { margin-right: 0; }
  .topnav a { padding-left: 6px; padding-right: 6px; }
  .topnav .sync-pill {
    width: 30px; height: 30px; padding: 0;
    justify-content: center;
  }
  .sync-pill .sync-label { display: none; }
}

/* ---- walkthrough code coloring ----
   Python syntax colors for the animation code panels, matching VS Code's
   default themes (Light+ / Dark+); spans are injected by the shared
   highlighter script. hl-k control flow · hl-d def/class/constants ·
   hl-f calls · hl-s strings · hl-n numbers · hl-c comments */
.hl-k { color: #af00db; }
.hl-d { color: #0000ff; }
.hl-f { color: #795e26; }
.hl-s { color: #a31515; }
.hl-n { color: #098658; }
.hl-c { color: #008000; }
:root[data-theme="dark"] .hl-k { color: #c586c0; }
:root[data-theme="dark"] .hl-d { color: #569cd6; }
:root[data-theme="dark"] .hl-f { color: #dcdcaa; }
:root[data-theme="dark"] .hl-s { color: #ce9178; }
:root[data-theme="dark"] .hl-n { color: #b5cea8; }
:root[data-theme="dark"] .hl-c { color: #6a9955; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hl-k { color: #c586c0; }
  :root:not([data-theme="light"]) .hl-d { color: #569cd6; }
  :root:not([data-theme="light"]) .hl-f { color: #dcdcaa; }
  :root:not([data-theme="light"]) .hl-s { color: #ce9178; }
  :root:not([data-theme="light"]) .hl-n { color: #b5cea8; }
  :root:not([data-theme="light"]) .hl-c { color: #6a9955; }
}

/* ---- phone layout (iPhone app / phone browsers) ----
   Every tab stays reachable via a horizontally scrollable strip; the brand
   collapses to the logo mark. Rows and fixed-column tables restack so
   nothing overflows a 390px viewport. */
@media (max-width: 700px) {
  :root { --gutter: 16px; }
  body { overflow-x: clip; }
  .topnav { gap: 6px; }
  .topnav .brand { margin-right: 0; font-size: 0; gap: 0; }
  .nav-tabs {
    display: flex; align-items: center; gap: 2px;
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs a { flex: none; padding-left: 8px; padding-right: 8px; }
  .topnav .sync-pill, .topnav #theme-toggle { display: none; }
  .nav-right { gap: 2px; }

  /* 16px stops iOS Safari/WKWebView from auto-zooming focused fields. */
  input[type=text], input[type=date], input[type=number], select,
  .rh-form select, .rh-form input { font-size: 16px; }

  /* Review/queue rows: actions drop below the text and wrap. */
  .item { flex-wrap: wrap; gap: 8px 24px; }
  .item-main { flex: 1 1 100%; min-width: 0; }
  .item-actions { flex-wrap: wrap; margin-top: 0; }

  /* Multi-column tables (e.g. review history) scroll sideways inside
     their card instead of pushing the whole page wider. */
  table.list { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Fixed-column tables become stacked rows: the title spans the full
     width, meta cells flow inline after it, buttons get their own line. */
  table.list.fixed { table-layout: auto; }
  table.list.fixed, table.list.fixed tbody { display: block; width: 100%; }
  table.list.fixed tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
  }
  table.list.fixed tr:has(th) { display: none; }
  table.list.fixed tr:last-child { border-bottom: none; }
  table.list.fixed td {
    display: block; border-bottom: none; padding: 0; white-space: normal;
  }
  table.list.fixed td:first-child.muted { display: none; } /* row index */
  table.list.fixed td:has(.title-link) { flex: 1 1 100%; }
  table.list.fixed td:has(.btn) {
    flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
  }
}

/* ---- headings & text ---- */
.page-head { margin: 28px 0 8px; }
.page-head h1 {
  margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}
h2 {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin: 0;
}
h3 {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin: 0 0 14px;
}
.pace { margin: 4px 0; font-size: 14px; }
.pace.ok { color: var(--ok); }
.pace.warn { color: var(--warn); }
.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }
.center { text-align: center; margin-top: 40px; }
.empty { color: var(--faint); font-size: 14px; padding: 12px 0; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }

/* ---- sections ---- */
.card {
  margin: 26px 0; padding: 20px 24px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.section-head .count {
  color: var(--accent); background: var(--accent-soft);
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 10px; border-radius: 999px;
}
.section-head .scope-toggle {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--border); border-radius: 999px;
  margin-left: auto; margin-right: 10px; align-self: center;
}
.scope-toggle .scope-opt {
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 2px 10px; border-radius: 999px; text-decoration: none;
}
.scope-toggle .scope-opt:hover { color: var(--text); text-decoration: none; }
.scope-toggle .scope-opt.on { color: var(--accent); background: var(--accent-soft); }
.card > h3 { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); }
.danger-zone .section-head { border-bottom-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }
.danger-zone .section-head h2 { color: var(--danger); }
.danger-confirm {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
}
.danger-confirm p { margin: 0 0 5px; }
.danger-confirm .btn-row { margin: 12px 0 0; }

/* ---- first-run checklist (Today) ---- */
.setup-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.setup-steps li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.setup-steps li:last-child { border-bottom: none; padding-bottom: 8px; }
.setup-mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border: 1.5px solid var(--border-strong);
}
.setup-steps li.done .setup-mark {
  color: var(--ok); border-color: transparent;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.setup-body { flex: 1; }
.setup-body strong { font-size: 14.5px; }
.setup-steps li.done .setup-body strong { color: var(--muted); }
.setup-body p { margin: 3px 0 0; font-size: 13px; color: var(--muted); max-width: 62ch; }
.setup-steps .btn { flex-shrink: 0; margin-top: 3px; }

/* ---- item rows ---- */
.item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--border);
}
.item:last-child { border-bottom: none; padding-bottom: 6px; }
.item-title { font-size: 15px; letter-spacing: -0.01em; }
.item-title strong { font-weight: 600; }
.item-meta { color: var(--muted); font-size: 13px; margin-top: 3px; }
.item-why { color: var(--faint); font-size: 13px; margin-top: 3px; }
.item-actions { display: flex; gap: 8px; flex-shrink: 0; margin-top: 2px; }

/* ---- difficulty & status ---- */
.badge { font-size: 12px; font-weight: 500; margin-left: 8px; white-space: nowrap; }
.badge::before { content: "·"; margin-right: 8px; color: var(--faint); font-weight: 400; }
.rating-chip {
  display: inline-block; margin-left: 7px;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 999px;
  cursor: help;
  /* --rc-h: hue on one green→yellow→red ramp over the rating itself;
     --rc-t: 0..1 position on that ramp — deeper tint = harder, full stop. */
  color: hsl(var(--rc-h, 220) 55% 34%);
  background: hsl(var(--rc-h, 220) 80% 45% / calc(0.10 + var(--rc-t, 0) * 0.30));
}
:root[data-theme="dark"] .rating-chip { color: hsl(var(--rc-h, 220) 70% 68%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rating-chip { color: hsl(var(--rc-h, 220) 70% 68%); }
}
.badge-easy { color: var(--easy); }
.badge-medium { color: var(--medium); }
.badge-hard { color: var(--hard); }
.badge-na { color: var(--faint); }
.badge-overdue { color: var(--danger); }
.badge-viz { color: var(--accent); }
/* premium: listed like everything else, but LeetCode wants a subscription */
.badge-premium { color: var(--warn); }
.badge-premium .lock-ico { margin-right: 2px; opacity: 0.8; }
a.badge-viz:hover { text-decoration: underline; }
.lock-ico { vertical-align: -1px; flex: none; }
.badge-viz .lock-ico { margin-left: 1px; opacity: 0.75; }
.btn-locked { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.btn-locked:hover { color: var(--text); }
.anim-teaser { margin: 10px 0 14px; padding-left: 22px; color: var(--muted); font-size: 14px; }
.anim-teaser li { margin: 4px 0; }
#walkthrough .lock-ico { vertical-align: -1.5px; margin-right: 3px; }

/* Keep each animation at its designed width and give the remaining card space to its code. */
#walkthrough > [id$="-root"] { width: 100%; max-width: none; }
#walkthrough > :is(#cfa-root, #crp-root, #rot-root, #ssk-root, #t3s-root, #vpa-root) { --walkthrough-animation-width: 455px; }
#walkthrough > :is(#ts2-root) { --walkthrough-animation-width: 480px; }
#walkthrough > :is(#sbt-root) { --walkthrough-animation-width: 495px; }
#walkthrough > :is(#mws-root) { --walkthrough-animation-width: 500px; }
#walkthrough > :is(#lsw-root, #pst-root) { --walkthrough-animation-width: 505px; }
#walkthrough > :is(#cbs-root, #mdb-root, #scl-root, #mvz-root, #nws-root) { --walkthrough-animation-width: 520px; }
#walkthrough > :is(#mwc-root, #sus-root) { --walkthrough-animation-width: 545px; }
#walkthrough > :is(#pxa-root) { --walkthrough-animation-width: 550px; }
#walkthrough > :is(#cpr-root, #sbk-root, #sbs-root) { --walkthrough-animation-width: 560px; }
#walkthrough > :is(#dtp-root, #eda-root, #gaa-root, #lcs-root, #mns-root, #rpn-root, #swm-root, #swmv-root, #tka-root, #tsa-root, #vaa-root, #vpr-root) { --walkthrough-animation-width: 580px; }
#walkthrough > :is(#btp-root, #nis-root, #nid-root, #ccc-root, #ccd-root, #ccb-root, #avd-root, #fdt-root, #mer-root, #bur-root, #csd-root, #csp-root, #mkl-root, #nop-root, #pcx-root, #mkh-root, #mrd-root) { --walkthrough-animation-width: 500px; }
#walkthrough > :is(#trw-root) { --walkthrough-animation-width: 585px; }
#walkthrough > :is(#pas-root, #rne-root, #vsa-root, #vso-root) { --walkthrough-animation-width: 600px; }
#walkthrough > :is(#bsc-root) { --walkthrough-animation-width: 610px; }
#walkthrough > :is(#ac-root, #kk-root, #lot-root, #rds-root, #rng-root, #itl-root, #rvb-root, #sot-root, #sym-root, #syq-root, #xor-root) { --walkthrough-animation-width: 620px; }
#walkthrough > :is(#atn-root, #cda-root, #fma-root, #ibt-root, #llc-root, #rla-root, #rva-root) { --walkthrough-animation-width: 630px; }
#walkthrough > :is(#lca-root, #vbst-root, #vbi-root) { --walkthrough-animation-width: 680px; }
#walkthrough > :is(#fdn-root) { --walkthrough-animation-width: 650px; }
#walkthrough > :is(#ksb-root, #lru-root) { --walkthrough-animation-width: 680px; }
#walkthrough > :is(#rlf-root) { --walkthrough-animation-width: 720px; }
#walkthrough > [id$="-root"] > [class$="-cols"] > [class$="-left"] {
  /* The fallback keeps an unregistered animation at a stable width instead of
     letting the column track its per-step content. */
  flex: 0 1 var(--walkthrough-animation-width, 680px);
}
#walkthrough > [id$="-root"] > [class$="-cols"] > pre[class$="-code"] { flex-grow: 1; }
@media (min-width: 881px) {
  #walkthrough > :is(#swm-root, #swmv-root) > [class$="-cols"] [class$="-vars"] {
    min-height: 56px;
  }
}

/* license / purchase page */
.paycard { max-width: 600px; }
.pay-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.pay-state {
  margin: 8px 0 6px; font-size: 27px; font-weight: 700;
  text-transform: none; letter-spacing: -0.02em; color: var(--text);
}
.pay-state .dot { margin-right: 9px; vertical-align: 2px; }
.pay-amount { margin-top: 8px; font-size: 42px; font-weight: 700; letter-spacing: -0.03em; }
.pay-amount small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pay-sub { margin-top: 2px; }
.pay-want {
  margin: 14px 0 0; font-size: 14px; padding: 10px 14px;
  background: var(--accent-soft); border-radius: var(--radius-sm);
}
.pay-benefits {
  list-style: none; margin: 16px 0 20px; padding: 0;
  display: grid; gap: 9px; font-size: 14px; color: var(--muted);
}
.pay-benefits li { padding-left: 24px; position: relative; }
.pay-benefits li::before {
  content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 600;
}
.pay-buy { display: block; text-align: center; padding: 11px 22px; font-size: 15px; }
.pay-hint { margin-top: 10px; }
.pay-actions { margin: 14px 0; }
.pay-or {
  display: flex; align-items: center; gap: 12px; margin: 24px 0 12px;
  color: var(--faint); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.key-row { display: flex; gap: 10px; }
.key-row input { flex: 1; font-family: var(--mono); font-size: 13px; }
.anim-part {
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin: 26px 0 12px; padding-top: 22px; border-top: 1px solid var(--border);
}
.anim-part:first-of-type { margin-top: 18px; padding-top: 0; border-top: none; }
/* Category chips: every category has a stable hue (via --cat-h), so
   problems of the same type visibly belong together. */
.cat {
  display: inline-block; font-size: 11.5px; font-weight: 500; line-height: 1.6;
  padding: 0 10px; border-radius: 999px; white-space: nowrap;
  background: hsl(var(--cat-h) 60% 50% / 0.13);
  color: hsl(var(--cat-h) 55% 34%);
}
:root[data-theme="dark"] .cat { color: hsl(var(--cat-h) 75% 76%); background: hsl(var(--cat-h) 60% 60% / 0.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cat { color: hsl(var(--cat-h) 75% 76%); background: hsl(var(--cat-h) 60% 60% / 0.14); }
}
/* Long list pages: skip layout and paint of offscreen cards entirely — the
   Problems page can run 400+ rows, and without this the first scroll pays
   for every row below the fold. `auto` keeps a card's real size once it has
   rendered; 900px is only the pre-render estimate. */
main > .card:has(table.list) {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
/* line the columns up across the per-category cards: fixed table layout
   with pinned widths for every column except the flexible one */
table.list td.date { white-space: nowrap; }
table.list.fixed { table-layout: fixed; }
table.list.fixed th.w-idx { width: 34px; }
table.list.fixed th.w-diff { width: 132px; }
table.list td.nowrap { white-space: nowrap; }
.sort-sep {
  display: inline-block; width: 1px; height: 15px;
  background: var(--border-strong); margin: 0 9px; vertical-align: -2px;
}
table.list.fixed th.w-solved { width: 205px; }
table.list.fixed th.w-due { width: 125px; }
/* wide enough for Review + NeetCode + LeetCode; wraps if it still runs out */
table.list.fixed th.w-act { width: 280px; }
table.list.fixed td:last-child { white-space: normal; }
table.list.fixed th.w-watch { width: 110px; }
table.list.fixed th.w-prob { width: 300px; }

/* per-category card header (Problems / Animations tabs) */
.cat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.cat-head .count {
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* memory-strength bar (FSRS retrievability) shown next to problem titles;
   the outlined track is the full 100% so the empty part reads as decay */
.mem {
  display: inline-block; width: 54px; height: 7px; border-radius: 999px;
  background: var(--border); border: 1px solid var(--border-strong);
  vertical-align: 1px; margin-left: 8px;
  overflow: hidden;
}
.mem .mem-fill { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.mem-hi .mem-fill { background: var(--ok); }
.mem-mid .mem-fill { background: var(--warn); }
.mem-lo .mem-fill { background: var(--danger); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.dot-ok { background: var(--ok); }
.dot-off { background: var(--faint); }
.dot-warn { background: var(--warn); }
.dot-danger { background: var(--danger); }
.check { color: var(--ok); }

/* ---- buttons ---- */
.btn {
  display: inline-block; border: none; border-radius: var(--pill);
  background: var(--fill); color: var(--text); padding: 6px 14px;
  font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
  font-family: inherit; line-height: 1.5; white-space: nowrap;
  transition: filter .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; filter: brightness(0.96); }
:root[data-theme="dark"] .btn:hover { filter: brightness(1.25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:hover { filter: brightness(1.25); } }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { filter: brightness(1.08); color: var(--accent-contrast); }
:root[data-theme="dark"] .btn-primary:hover { filter: brightness(1.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary:hover { filter: brightness(1.08); } }
.btn:disabled { opacity: 0.5; cursor: default; filter: none; }
.btn-danger { color: var(--danger); }
.btn-sm { padding: 4px 11px; font-size: 12.5px; }
.btn-row { display: flex; gap: 8px; margin: 14px 0; }
.account-provider-row { align-items: center; }
.btn.github-provider {
  min-width: 220px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #24292f; border-color: #24292f; color: #fff;
}
.btn.github-provider:hover { background: #1b1f23; color: #fff; }
.github-provider svg { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }
.btn.provider-button {
  min-width: 220px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  color: #fff; font-weight: 600;
}
.btn.provider-button:hover { color: #fff; text-decoration: none; filter: brightness(1.09); }
.provider-logo { width: 19px; height: 19px; flex: none; }
.btn.neetcode-provider { background: #172033; border-color: #172033; }
.btn.leetcode-provider { background: #252525; border-color: #252525; }
.leetcode-logo { fill: #ffa116; }
.provider-row { flex-wrap: wrap; }
.provider-form .provider-button { width: 100%; }
/* LeetCode links by public username: a pill input paired with its button. */
.lc-connect-form { display: inline-flex; gap: 8px; align-items: stretch; }
.lc-connect-form input[type=text] {
  border-radius: var(--pill); padding: 8px 16px; min-width: 0; width: 190px; flex: 1 1 auto;
}
.lc-connect-form .provider-button { min-width: 0; flex: none; }
.inline-form { display: inline-flex; gap: 8px; }

/* ---- continuous onboarding journey ---- */
.onboarding-page main { max-width: 1000px; padding-top: 38px; }
.onboarding-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
  margin: 0 auto 24px; max-width: 860px;
}
.onboarding-head h1 { margin: 2px 0 7px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.035em; }
.onboarding-head p { margin: 0; max-width: 660px; }
.eyebrow {
  margin: 0 0 8px; color: var(--accent); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.btn-quiet { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.text-link { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--muted); }
.onboarding-shell {
  max-width: 860px; margin: 0 auto; overflow: hidden;
  border: 1px solid var(--border); border-radius: 24px;
  background: color-mix(in srgb, var(--card) 96%, transparent); box-shadow: var(--shadow);
}
body.wall .onboarding-shell { background: color-mix(in srgb, var(--card) var(--wall-glass), transparent); }
.journey-progress {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; padding: 0; margin: 0; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
}
.journey-progress li {
  position: relative; min-width: 0; color: var(--faint);
}
.journey-step-link {
  display: flex; align-items: center; gap: 11px; height: 100%; padding: 18px 20px;
  color: inherit; text-decoration: none; border-radius: 0;
  transition: color .15s ease, background .15s ease;
}
.journey-step-link:hover {
  color: var(--text); text-decoration: none;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.journey-step-link:focus-visible {
  position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: -3px;
}
.journey-progress li + li::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--border);
}
.journey-progress li.active { color: var(--text); background: var(--accent-soft); }
.journey-progress li.done { color: var(--text); }
.journey-number {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-strong);
  font-size: 12px; font-weight: 700; color: inherit; background: var(--card);
}
.journey-progress li.active .journey-number { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
.journey-progress li.done .journey-number { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); color: var(--ok); }
.journey-progress strong, .journey-progress small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey-progress strong { font-size: 13px; }
.journey-progress small { margin-top: 1px; font-size: 11px; color: var(--muted); }
.journey-stage { max-width: 640px; margin: 0 auto; padding: 52px 42px 56px; text-align: center; }
.journey-stage h2 {
  margin: 0 0 12px; font-size: clamp(24px, 4vw, 34px); letter-spacing: -0.025em;
  /* Undo the global section-label h2 (uppercase, muted) — these are headlines. */
  text-transform: none; color: var(--text); font-weight: 700;
}
.journey-copy { max-width: 580px; margin: 0 auto 22px; color: var(--muted); line-height: 1.65; }
.journey-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: 20px; border-radius: 18px;
  background: #24292f; color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.journey-icon svg { width: 30px; height: 30px; fill: currentColor; }
/* Google's multicolor G needs a light tile; its paths carry their own fills. */
.journey-icon.google-mark { background: #fff; border: 1px solid var(--border-strong); }
.data-safety {
  display: flex; align-items: flex-start; gap: 2px; max-width: 520px; margin: 0 auto 24px;
  padding: 12px 15px; text-align: left; border: 1px solid color-mix(in srgb, var(--ok) 24%, var(--border));
  border-radius: 13px; color: var(--muted); background: color-mix(in srgb, var(--ok) 6%, transparent); font-size: 13px;
}
.data-safety .dot { flex: none; margin-top: 7px; }
.journey-primary { min-height: 44px; padding: 10px 21px; font-size: 14px; font-weight: 650; }
.journey-stage .small { display: block; margin: 11px 0 0; }
.journey-waiting {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  max-width: 550px; margin: 6px auto 0; padding: 17px 18px; text-align: left;
  border: 1px solid var(--border); border-radius: 15px; background: var(--fill);
}
.journey-waiting[hidden] { display: none; }
.journey-waiting p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.journey-waiting .btn-row { grid-column: 2; margin: 3px 0 0; }
.practice-sync-copy { min-width: 0; }
.practice-sync-bar { margin-top: 12px; }
.practice-sync-waiting .practice-progress-detail {
  margin-top: 5px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text);
}
.practice-sync-waiting .practice-patience {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
  color: var(--muted); line-height: 1.45;
}
.journey-spinner {
  width: 22px; height: 22px; border: 2px solid var(--border-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: journey-spin .8s linear infinite;
}
@keyframes journey-spin { to { transform: rotate(360deg); } }
.journey-notice { margin: 18px 24px 0; padding: 10px 14px; border-radius: 12px; font-size: 13px; text-align: center; }
.journey-notice.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.journey-notice.warn { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.journey-success-summary {
  display: flex; align-items: center; gap: 13px; margin: -20px auto 34px; padding: 13px 16px;
  text-align: left; border: 1px solid color-mix(in srgb, var(--ok) 28%, var(--border));
  border-radius: 14px; background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.journey-success-summary p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.account-connected-summary { max-width: 540px; margin-top: 26px; margin-bottom: 22px; }
.success-check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: #fff; font-weight: 750;
}
.practice-choices { display: grid; gap: 12px; margin: 26px 0 18px; text-align: left; }
.practice-choice {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 17px 18px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.practice-choice p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.practice-choice .btn { min-height: 40px; display: inline-flex; align-items: center; }
.journey-complete { padding-top: 58px; }
/* Text links sit on their own line so the primary button centers alone. */
.journey-stage .text-link { display: block; }
.completion-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; margin-bottom: 20px; border-radius: 50%;
  color: #fff; background: var(--ok); font-size: 34px; font-weight: 750;
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--ok) 10%, transparent);
}
.sync-receipt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px auto; }
.sync-receipt div { padding: 14px 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--fill); }
.sync-receipt strong, .sync-receipt span { display: block; }
.sync-receipt strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.sync-receipt span { color: var(--muted); font-size: 11px; }
.open-today-countdown {
  position: relative; isolation: isolate; overflow: hidden; min-width: 156px;
}
.open-today-countdown::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: color-mix(in srgb, var(--accent-contrast) 20%, transparent);
  transform: scaleX(0); transform-origin: left center;
  animation: open-today-fill 2s linear forwards;
}
.open-today-countdown #open-today-label { position: relative; z-index: 1; }
@keyframes open-today-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .open-today-countdown::before { animation: none; opacity: .12; transform: scaleX(1); }
}

@media (max-width: 700px) {
  .onboarding-page main { padding: 24px 16px 80px; }
  .onboarding-head { align-items: center; }
  .onboarding-head .muted { display: none; }
  .onboarding-shell { border-radius: 18px; }
  .journey-step-link { justify-content: center; padding: 14px 8px; }
  .journey-progress li > span:last-child,
  .journey-step-link > span:last-child { display: none; }
  .journey-progress li + li::before { top: 28%; bottom: 28%; }
  .journey-stage { padding: 38px 20px 42px; }
  .journey-success-summary { margin-top: -8px; }
  .practice-choice { align-items: stretch; flex-direction: column; gap: 12px; }
  .practice-choice .btn, .practice-choice form { width: 100%; justify-content: center; }
  .journey-waiting { grid-template-columns: auto 1fr; }
  .sync-receipt { gap: 6px; }
  .sync-receipt div { padding: 11px 5px; }
  .sync-receipt strong { font-size: 19px; }
}

/* ---- live sync progress (Settings) ---- */
.sync-progress { margin: 14px 0 4px; max-width: 560px; }
.sync-progress-head {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; margin-bottom: 6px;
}
.sync-progress-head .muted { font-variant-numeric: tabular-nums; }
.sp-row { display: flex; align-items: center; gap: 10px; }
.sp-row .sp-bar { flex: 1; }
.sp-x {
  flex: none; width: 22px; height: 22px; padding: 0; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--muted); background: var(--fill); cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.sp-x svg { display: block; }
.sp-x:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.sp-x:disabled { opacity: 0.5; cursor: default; }
.sp-bar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--accent-soft);
}
.sp-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--accent); transition: width 0.4s ease;
}
.sp-fill.indet { width: 38%; animation: sp-slide 1.3s ease-in-out infinite; }
@keyframes sp-slide {
  0% { margin-left: -38%; }
  100% { margin-left: 100%; }
}

/* ---- tables ---- */
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th {
  text-align: left; color: var(--faint); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border-strong);
}
table.list td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); vertical-align: top; font-variant-numeric: tabular-nums; }
table.list tr:last-child td { border-bottom: none; }
table.list td:last-child { white-space: nowrap; }

.sort-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: -8px 0 18px; }
/* the sort row tucks up under a bare header; a search pill between them needs
   its own breathing room, so drop the tuck */
.page-head:has(.quick-search) + .sort-row { margin-top: 0; }
.sort-row .small { margin-right: 4px; }
.sort-row .sort-dir { font-size: 9px; vertical-align: 1px; }

/* inline editor for one review-history row */
.rh-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; padding: 4px 0 6px; }
.rh-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.rh-form select, .rh-form input { font: inherit; font-size: 13px; padding: 5px 8px; background: var(--card); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.rh-form .rh-note { flex: 1; min-width: 180px; }
.rh-form .rh-btns { display: flex; gap: 6px; }
table.list .badge { margin-left: 0; display: inline-block; min-width: 56px; }
table.list .badge::before { content: none; }
table.kv { font-size: 14px; }
table.kv td { padding: 5px 16px 5px 0; }
table.kv td:first-child { color: var(--muted); white-space: nowrap; }

/* ---- forms ---- */
.form-row { margin: 18px 0; }
.form-row > label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 5px; }
.form-row label.inline { display: inline-block; font-weight: 400; font-size: 14px; margin-right: 14px; }
input[type=text], input[type=date], input[type=number], select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 7px 12px; font-size: 14px; font-family: inherit; min-width: 240px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

/* ---- Today: quick search ---- */
/* A launcher, not a filter: one pill that hands the query to the Problems
   page. Translucent so it settles into the wallpaper until it has focus. */
.quick-search { position: relative; display: block; max-width: 400px; margin: 16px 0 18px; }
.quick-search .qs-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--faint); pointer-events: none;
}
.quick-search input[type=search] {
  width: 100%; box-sizing: border-box; padding: 9px 16px 9px 39px;
  font: inherit; font-size: 14px; color: var(--text);
  background: color-mix(in srgb, var(--card) 78%, transparent);
  border: 1px solid var(--border); border-radius: 999px;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.quick-search input[type=search]::placeholder { color: var(--faint); }
.quick-search input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
.quick-search input[type=search]:hover { border-color: var(--border-strong); }
.quick-search input[type=search]:focus {
  outline: none; background: var(--card);
  border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-soft);
}
.quick-search:focus-within .qs-ico { color: var(--accent); }

/* ---- Problems: pager ---- */
/* The catalog is every LeetCode problem, so reading the list is a paging
   problem; finding one is .quick-search's job, on every page that lists. */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 20px 0 8px; font-size: 13px; font-variant-numeric: tabular-nums;
}

/* ---- rating cards ---- */
.rating-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 22px; }
.rating {
  border: 1px solid var(--border-strong); border-radius: 14px; padding: 12px 14px;
  cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px;
  background: var(--bg);
}
.rating span { color: var(--muted); line-height: 1.4; }
.rating:hover { border-color: var(--muted); }
.rating:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.rating input { display: none; }
.rating strong { font-size: 14px; }
.rating .rating-next { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rating .rating-next b { font-size: 14px; font-weight: 700; color: var(--text); }
.rating.again strong { color: var(--danger); }
.rating.hard strong { color: var(--warn); }
.rating.good strong { color: var(--accent); }
.rating.easy strong { color: var(--ok); }

/* ---- bars ---- */
.bar-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 13px; }
.bar-label { width: 190px; flex-shrink: 0; text-align: right; color: var(--muted); }
.bar { flex: 1; background: var(--border); border-radius: 999px; height: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.warn-fill { background: var(--warn); }
.bar-value { width: 64px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---- progress page ---- */
.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 26px 0;
}
.kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi-value { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.kpi-value small { font-size: 17px; font-weight: 500; color: var(--muted); margin-left: 1px; }
.kpi-label { font-size: 12px; color: var(--muted); }

.pattern-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin-top: 16px;
}
.pattern {
  border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px;
  background: var(--bg);
  display: block; color: var(--text); text-decoration: none;
}
a.pattern:hover { text-decoration: none; border-color: var(--accent); }
/* Card tint = recall confidence; the word label in the meta line carries the
   same state, so color is never the only channel. */
.pattern.solid {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--border));
  background: color-mix(in srgb, var(--ok) 7%, var(--bg));
}
.pattern.developing {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
  background: color-mix(in srgb, var(--warn) 7%, var(--bg));
}
.pattern.at-risk {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--bg));
}
.pattern-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pattern-conf { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.meter {
  height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent);
  overflow: hidden; margin: 10px 0 8px;
}
.meter-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.pattern-meta { font-size: 12px; color: var(--muted); }
.pattern-word { font-weight: 550; color: var(--text); }

/* GitHub-style activity heatmap: sequential steps of the accent hue. */
.heatmap-scroll { overflow-x: auto; padding-top: 14px; }
.heatmap { min-width: 760px; width: fit-content; margin: 0 auto; }
.hm-months {
  display: grid; grid-template-columns: repeat(53, 12px); gap: 3px;
  margin-left: 34px; font-size: 10.5px; color: var(--faint); height: 15px;
}
.hm-months span { grid-row: 1; white-space: nowrap; }
.hm-body { display: flex; gap: 6px; }
.hm-days {
  display: grid; grid-template-rows: repeat(7, 12px); gap: 3px;
  font-size: 10px; color: var(--faint); width: 28px; text-align: right;
}
.hm-grid { display: flex; gap: 3px; }
.hm-week { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; }
.hm-cell {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
  background: var(--hm-l0); flex: none;
}
.hm-cell.l1 { background: var(--hm-l1); }
.hm-cell.l2 { background: var(--hm-l2); }
.hm-cell.l3 { background: var(--hm-l3); }
.hm-cell.l4 { background: var(--hm-l4); }
.hm-cell.hm-empty { background: transparent; }
:root {
  --hm-l0: rgba(120, 120, 130, 0.10);
  --hm-l1: rgba(67, 83, 245, 0.22);
  --hm-l2: rgba(67, 83, 245, 0.45);
  --hm-l3: rgba(67, 83, 245, 0.70);
  --hm-l4: rgba(67, 83, 245, 0.95);
}
:root[data-theme="dark"] {
  --hm-l0: rgba(255, 255, 255, 0.06);
  --hm-l1: rgba(140, 155, 255, 0.25);
  --hm-l2: rgba(140, 155, 255, 0.45);
  --hm-l3: rgba(140, 155, 255, 0.68);
  --hm-l4: rgba(140, 155, 255, 0.95);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hm-l0: rgba(255, 255, 255, 0.06);
    --hm-l1: rgba(140, 155, 255, 0.25);
    --hm-l2: rgba(140, 155, 255, 0.45);
    --hm-l3: rgba(140, 155, 255, 0.68);
    --hm-l4: rgba(140, 155, 255, 0.95);
  }
}
.hm-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin: 12px 0 0 34px; font-size: 12px; color: var(--muted);
}
.hm-legend { display: inline-flex; align-items: center; gap: 3px; }
.hm-legend .hm-cell { cursor: default; }
.hm-tip {
  position: absolute; z-index: 10; pointer-events: none;
  background: var(--text); color: var(--bg); font-size: 12px;
  padding: 4px 9px; border-radius: 7px; white-space: nowrap;
}

/* ---- calendar (Apple Calendar-style month grid) ---- */
.cal-month-label {
  font-size: 17px; font-weight: 650; letter-spacing: -0.01em;
  margin: 30px 0 10px;
}
.cal-month-label:first-child { margin-top: 4px; }
.cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.cal-dow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); text-align: right; padding-right: 10px;
}
.cal-dow:nth-child(n+6) { color: var(--faint); }  /* weekend headers dimmed */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.cal-cell {
  min-height: 98px; padding: 6px 8px 8px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:nth-last-child(-n+7) { border-bottom: none; }
.cal-cell.rest { background: color-mix(in srgb, var(--text) 4%, transparent); }
.cal-cell:not(.pad):not(.blank) { cursor: pointer; }
.cal-cell:not(.pad):not(.blank):hover { background: var(--fill); }
.cal-cell.sel {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cal-cell:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.cal-top {
  display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  margin-bottom: 1px;
}
.cal-daynum {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--muted); border-radius: 50%;
}
.cal-cell.pad .cal-daynum, .cal-cell.rest .cal-daynum { color: var(--faint); }
.cal-cell.blank { min-height: 0; }
.cal-cell.pad, .cal-cell.blank { cursor: default; }
.cal-cell.today .cal-daynum {
  background: var(--accent); color: var(--accent-contrast); font-weight: 600;
}
.cal-dot-buffer {
  width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none;
}
.cal-ev {
  font-size: 11px; line-height: 1.6; font-weight: 500;
  padding: 0 7px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-review { background: var(--accent-soft); color: var(--accent); }
.ev-new { background: color-mix(in srgb, var(--easy) 13%, transparent); color: var(--easy); }
.ev-deadline { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); font-weight: 600; }
.cal-more { font-size: 11px; color: var(--faint); padding-left: 7px; }
.cd-sub {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin: 20px 0 2px;
}
#cd-list .cd-sub:first-child { margin-top: 12px; }
.cal-restlabel { font-size: 11px; color: var(--faint); padding-left: 7px; margin-top: auto; }
.cal-ev.cal-count { display: none; }  /* compact count chip: mobile only */
@media (max-width: 860px) {
  .cal-cell { min-height: 64px; padding: 4px 6px 6px; }
  .cal-cell .ev-review, .cal-cell .cal-more, .cal-cell .cal-restlabel { display: none; }
  .cal-cell .ev-review.cal-count { display: block; }
  .cal-ev { font-size: 10px; }
}

/* ---- events banner ---- */
.events {
  margin: 24px 0; padding: 16px 20px;
  background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--radius);
}
.events h3 { color: var(--accent); border: none; padding: 0; margin-bottom: 8px; }
.events-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.events-head h3 { margin-bottom: 0; }
.events-head form { margin: 0; }
.event-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 8px 0; font-size: 14px;
}

/* ---- Today: done-today session log ---- */
.done-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.done-row:last-child { border-bottom: none; padding-bottom: 6px; }
a.done-row { color: inherit; text-decoration: none; }
a.done-row:hover .done-main strong { color: var(--accent); }
.done-time {
  flex: none; width: 64px; text-align: right; color: var(--faint);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.done-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.done-again { background: var(--danger); }
.done-hard { background: var(--warn); }
.done-good { background: var(--accent); }
.done-easy { background: var(--ok); }
/* Was this row new material or something coming back around? The verb in
   .done-what says so too, but a fixed-width pill is what the eye actually
   scans once the log runs to a dozen rows. A re-solve counts as review. */
.done-kind {
  flex: none; min-width: 52px; text-align: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  border: 1px solid var(--border);
}
.done-kind-new {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.done-kind-review {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
}
/* on a phone the titles need the width more than the pills need to line up */
@media (max-width: 700px) {
  .done-kind { min-width: 0; padding: 1px 6px; font-size: 10px; }
}
.done-main { min-width: 0; }
.done-main strong { font-weight: 600; letter-spacing: -0.01em; }
.done-what { color: var(--muted); font-size: 13px; margin-left: 8px; }
.done-next { margin-left: auto; flex: none; color: var(--faint); font-size: 12px; }
.done-wrap {
  margin: 12px 0 6px; padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--border));
  background: color-mix(in srgb, var(--ok) 7%, transparent);
  font-size: 14px; line-height: 1.5;
}
.done-wrap strong { color: var(--ok); }