/* Palette. Light is the default; dark is applied either by the OS preference
   or by data-theme on <html>, which the toggle sets and remembers. */
:root {
  --bg: #fdfbf7;
  --bg-tint: radial-gradient(1200px 600px at 12% -8%, #e8f0ff 0%, transparent 60%),
             radial-gradient(900px 500px at 92% 0%, #ffe9f0 0%, transparent 55%);
  --surface: #ffffff;
  --surface-2: #f4f1ea;
  --border: #e5ded2;
  --text: #1f1d1a;
  --muted: #6d665d;

  --accent: #2d5bd7;
  --accent-2: #7b3fe4;
  --accent-soft: #e9eeff;
  --accent-grad: linear-gradient(135deg, #2d5bd7, #7b3fe4);

  --good: #15794a;
  --good-soft: #e1f5ea;
  --bad: #b7301b;
  --bad-soft: #fdeae5;
  --warn: #8a5a05;
  --warn-soft: #fdf1d8;

  /* Per-category colour. These are only the saturation/lightness halves — the
     hue comes from --cat-h, set inline on each element. They must be composed
     at the point of use: a var() inside a :root value would resolve --cat-h
     here, where it is unset, and every category would come out the same. */
  --cat-s: 78%;  --cat-l: 92%;   /* chip / tile background */
  --cat-fs: 68%; --cat-fl: 30%;  /* text on that background */
  --cat-ls: 60%; --cat-ll: 70%;  /* hairline border */
  --cat-ss: 62%; --cat-sl: 52%;  /* solid stripe */

  --radius: 14px;
  --shadow: 0 1px 2px rgba(31,29,26,.05), 0 6px 20px rgba(31,29,26,.06);
  --shadow-lg: 0 2px 6px rgba(31,29,26,.07), 0 16px 42px rgba(31,29,26,.11);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* Dark, when the OS asks for it and the user has not chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131217;
    --bg-tint: radial-gradient(1200px 600px at 12% -8%, #1b2340 0%, transparent 60%),
               radial-gradient(900px 500px at 92% 0%, #2c1a2c 0%, transparent 55%);
    --surface: #1d1c22;
    --surface-2: #26252d;
    --border: #353341;
    --text: #efece6;
    --muted: #a29b92;

    --accent: #8aa8f8;
    --accent-2: #b98cf5;
    --accent-soft: #212741;
    --accent-grad: linear-gradient(135deg, #7b9bf7, #b98cf5);

    --good: #5fcf8e;
    --good-soft: #152a1e;
    --bad: #f5917a;
    --bad-soft: #301a16;
    --warn: #e6bb5e;
    --warn-soft: #2d2415;

    --cat-s: 42%;  --cat-l: 20%;
    --cat-fs: 80%; --cat-fl: 78%;
    --cat-ls: 45%; --cat-ll: 38%;
    --cat-ss: 62%; --cat-sl: 62%;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.28);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 16px 42px rgba(0,0,0,.4);
  }
}

/* Dark, when the user chose it explicitly. */
:root[data-theme="dark"] {
  --bg: #131217;
  --bg-tint: radial-gradient(1200px 600px at 12% -8%, #1b2340 0%, transparent 60%),
             radial-gradient(900px 500px at 92% 0%, #2c1a2c 0%, transparent 55%);
  --surface: #1d1c22;
  --surface-2: #26252d;
  --border: #353341;
  --text: #efece6;
  --muted: #a29b92;

  --accent: #8aa8f8;
  --accent-2: #b98cf5;
  --accent-soft: #212741;
  --accent-grad: linear-gradient(135deg, #7b9bf7, #b98cf5);

  --good: #5fcf8e;
  --good-soft: #152a1e;
  --bad: #f5917a;
  --bad-soft: #301a16;
  --warn: #e6bb5e;
  --warn-soft: #2d2415;

  --cat-s: 42%;  --cat-l: 20%;
  --cat-fs: 80%; --cat-fl: 78%;
  --cat-ls: 45%; --cat-ll: 38%;
  --cat-ss: 62%; --cat-sl: 62%;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.28);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 16px 42px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  background-image: var(--bg-tint);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand h1 { font-size: 1.22rem; letter-spacing: -.01em; font-weight: 650; }
.flag {
  width: 22px; height: 15px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg,
    #0b4ea2 0 33.3%, #f5f4f2 33.3% 66.6%, #c8102e 66.6% 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .82rem; color: var(--muted); white-space: nowrap;
}
.pill b { font-size: .95rem; color: var(--text); font-weight: 620; }
.pill.due b { color: var(--accent); }
.pill.streak b { color: var(--warn); }

/* -------------------------------------------------------------------- tabs */
.tabs {
  display: flex; gap: 2px; padding: 0 24px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 11px 15px; font: inherit; font-size: .92rem; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 560; }

main { max-width: 820px; margin: 0 auto; padding: 24px 16px 80px; }
.panel { display: none; }
.panel.active { display: block; animation: rise .18s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* ------------------------------------------------------------- form basics */
input, select, textarea, button { font: inherit; color: inherit; }

/* Match by exclusion: an <input> with no type attribute is still a text box,
   and `input[type=text]` would not catch it. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea {
  width: 100%; padding: 10px 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

button { cursor: pointer; border-radius: 9px; transition: filter .12s, background .12s; }
button:disabled { opacity: .55; cursor: not-allowed; }

.primary {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 10px 20px; font-weight: 560; white-space: nowrap;
}
.primary:hover:not(:disabled) { filter: brightness(1.08); }

.ghost {
  background: var(--surface); border: 1px solid var(--border);
  padding: 9px 15px; color: var(--muted);
}
.ghost:hover { color: var(--text); border-color: var(--muted); }
.ghost.small { padding: 5px 11px; font-size: .84rem; }

label { display: block; font-size: .83rem; color: var(--muted); }
label > input, label > select { margin-top: 5px; }
.req { color: var(--bad); margin-left: 2px; }

.hint { color: var(--muted); font-size: .86rem; margin: 10px 0 0; }

/* ------------------------------------------------------------------ lookup */
.lookup-form { display: flex; gap: 9px; }
.lookup-form input { font-size: 1.05rem; padding: 13px 15px; }

.status {
  margin-top: 16px; padding: 11px 14px; border-radius: 9px;
  font-size: .89rem; border: 1px solid var(--border); background: var(--surface-2);
}
.status.error { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); }
.status.ok { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 35%, transparent); color: var(--good); }
.status.working { color: var(--muted); }

.inline-status { font-size: .85rem; color: var(--muted); }
.inline-status.error { color: var(--bad); }
.inline-status.ok { color: var(--good); }

/* -------------------------------------------------------------- entry card */
.entry {
  margin-top: 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.entry-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--border); }
.entry-word {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 1.75rem; font-weight: 640; letter-spacing: -.015em;
}
.entry-word .article { color: var(--muted); font-weight: 450; }
.ipa { font-family: var(--mono); font-size: .88rem; color: var(--muted); }

.speak {
  appearance: none; border: 1px solid var(--border); background: var(--surface-2);
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; font-size: .85rem; color: var(--muted);
}
.speak:hover { color: var(--accent); border-color: var(--accent); }

.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.badge {
  font-size: .73rem; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.badge.m { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.f { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.badge.idiom { background: var(--warn-soft); color: var(--warn); border-color: transparent; }

.meanings { margin: 14px 0 0; padding: 0; list-style: none; }
.meanings li { font-size: 1.05rem; }
.meanings li + li { margin-top: 2px; color: var(--muted); font-size: .95rem; }

.entry-body { padding: 4px 22px 20px; }
.block { margin-top: 18px; }
.block > h3 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 620; margin-bottom: 8px;
}

.example { padding: 10px 0; border-top: 1px dashed var(--border); }
.example:first-of-type { border-top: 0; padding-top: 0; }
.example .fr { display: flex; align-items: flex-start; gap: 8px; }
.example .fr span { flex: 1; }
.example .en { color: var(--muted); font-size: .9rem; margin-top: 3px; }

.note {
  background: var(--warn-soft); border-left: 3px solid var(--warn);
  padding: 11px 14px; border-radius: 0 8px 8px 0; font-size: .92rem;
}

.conj { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.conj div {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 11px; font-size: .9rem;
}

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: .82rem; padding: 4px 10px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}

/* ------------------------------------------------------------------ manual */
.manual { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 14px; }
.manual summary {
  cursor: pointer; font-size: .9rem; color: var(--accent); font-weight: 530;
  list-style: none;
}
.manual summary::-webkit-details-marker { display: none; }
.manual summary::before { content: "+ "; }
.manual[open] summary::before { content: "− "; }
.manual-form { margin-top: 14px; display: grid; gap: 13px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 11px; }
.manual-actions { display: flex; align-items: center; gap: 12px; }

/* ----------------------------------------------------------------- library */
.toolbar {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 9px; margin-bottom: 18px;
}
@media (max-width: 560px) { .toolbar { grid-template-columns: 1fr 1fr; } .toolbar input { grid-column: 1 / -1; } }

.word-list { display: grid; gap: 10px; }
.word-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
}
.word-card-top { display: flex; align-items: flex-start; gap: 10px; }
.word-card h3 { font-size: 1.05rem; font-weight: 600; }
.word-card .trans { color: var(--muted); font-size: .92rem; margin-top: 1px; }
.word-card-meta { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: none; }

.strength {
  font-size: .7rem; padding: 3px 8px; border-radius: 999px; font-weight: 580;
  text-transform: uppercase; letter-spacing: .04em;
}
.strength.new { background: var(--surface-2); color: var(--muted); }
.strength.learning { background: var(--warn-soft); color: var(--warn); }
.strength.young { background: var(--accent-soft); color: var(--accent); }
.strength.mature { background: var(--good-soft); color: var(--good); }

.icon-btn {
  appearance: none; background: none; border: 0; padding: 4px;
  color: var(--muted); font-size: .95rem; line-height: 1; border-radius: 6px;
}
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn.starred { color: var(--warn); }
.icon-btn.danger:hover { color: var(--bad); background: var(--bad-soft); }

.word-expand { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.word-stats { font-size: .82rem; color: var(--muted); margin-top: 10px; }

.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty h3 { font-size: 1.05rem; color: var(--text); margin-bottom: 6px; }

/* -------------------------------------------------------------------- test */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; margin: 16px 0 20px; }
.mode-card {
  text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; display: grid; gap: 4px;
}
.mode-card:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow); }
.mode-card strong { font-size: .98rem; font-weight: 600; }
.mode-card span { font-size: .85rem; color: var(--muted); }
.mode-card em { font-size: .78rem; color: var(--accent); font-style: normal; }
.mode-card:disabled em { color: var(--muted); }

.test-options { display: flex; gap: 14px; flex-wrap: wrap; }
.test-options label { flex: 1; min-width: 150px; }

.quiz-head { margin-bottom: 20px; }
.progress { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }
.quiz-meta {
  display: flex; align-items: center; gap: 12px; margin-top: 9px;
  font-size: .84rem; color: var(--muted);
}
.quiz-meta #quiz-score { margin-left: auto; font-variant-numeric: tabular-nums; }

.quiz-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 24px;
}
.quiz-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 620; }
.quiz-prompt {
  font-size: 1.85rem; font-weight: 620; letter-spacing: -.02em;
  margin: 12px 0 6px; line-height: 1.3;
}
.quiz-prompt.sentence { font-size: 1.3rem; font-weight: 500; line-height: 1.5; }
.quiz-hint { color: var(--muted); font-size: .9rem; }

.quiz-answer { margin-top: 20px; }
.quiz-answer input { font-size: 1.1rem; padding: 12px 14px; }
.quiz-actions { display: flex; gap: 9px; margin-top: 13px; align-items: center; }

.choices { display: grid; gap: 8px; margin-top: 20px; }
.choice {
  text-align: left; background: var(--surface-2); border: 1px solid var(--border);
  padding: 13px 16px; font-size: 1rem;
}
.choices.two { grid-template-columns: 1fr 1fr; }
.choices.two .choice { text-align: center; font-size: 1.15rem; font-weight: 580; }
.choice:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.choice.right { background: var(--good-soft); border-color: var(--good); color: var(--good); font-weight: 580; }
.choice.wrong { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }

.verdict { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.verdict-line { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1.02rem; }
.verdict-line.right { color: var(--good); }
.verdict-line.wrong { color: var(--bad); }
.verdict-line.partial { color: var(--warn); }
.verdict-detail { margin-top: 9px; font-size: .93rem; }
.verdict-detail .big { font-size: 1.15rem; font-weight: 600; }
.accent-fix {
  display: inline-block; font-family: var(--mono); font-size: .85rem;
  background: var(--warn-soft); color: var(--warn); padding: 2px 8px; border-radius: 6px; margin-right: 5px;
}
.next-due { font-size: .82rem; color: var(--muted); margin-top: 11px; }

/* ------------------------------------------------------------------- stats */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 11px; margin-bottom: 26px; }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 15px 16px;
}
.stat b { display: block; font-size: 1.7rem; font-weight: 640; letter-spacing: -.02em; line-height: 1.1; }
.stat span { font-size: .82rem; color: var(--muted); }

.bar-row { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: 11px; margin-bottom: 7px; font-size: .87rem; }
.bar { height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > div { height: 100%; border-radius: 999px; }
.bar-row .count { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.section-head { font-size: .95rem; font-weight: 620; margin: 26px 0 11px; }
.export-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.goal-note { font-size: .86rem; color: var(--muted); margin-top: 8px; }

/* ===================================================================
   Category colour, theme toggle, sentence breakdown
   =================================================================== */

/* A pill tinted by its category's hue, set inline as --cat-h. */
.cat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 570; padding: 3px 10px; border-radius: 999px;
  background: hsl(var(--cat-h, 220) var(--cat-s) var(--cat-l));
  color: hsl(var(--cat-h, 220) var(--cat-fs) var(--cat-fl));
  border: 1px solid hsl(var(--cat-h, 220) var(--cat-ls) var(--cat-ll));
  white-space: nowrap;
}
.cat-chip.grey { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.cat-chip .ico { font-size: .85em; line-height: 1; }

/* A word card wears a stripe of its category colour. */
.word-card {
  border-left: 3px solid hsl(var(--cat-h, 220) var(--cat-ss) var(--cat-sl));
  transition: box-shadow .14s, transform .14s, border-color .14s;
}
.word-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.cat-select {
  appearance: none; font-size: .74rem; font-weight: 570;
  padding: 3px 24px 3px 10px; border-radius: 999px; cursor: pointer;
  background: hsl(var(--cat-h, 220) var(--cat-s) var(--cat-l));
  color: hsl(var(--cat-h, 220) var(--cat-fs) var(--cat-fl));
  border: 1px solid hsl(var(--cat-h, 220) var(--cat-ls) var(--cat-ll));
  width: auto; min-width: 0;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.cat-select:hover { filter: brightness(.97); }

/* Category browser */
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 11px; margin-bottom: 8px;
}
.cat-tile {
  text-align: left; cursor: pointer; padding: 14px 15px; border-radius: 12px;
  background: hsl(var(--cat-h, 220) var(--cat-s) var(--cat-l));
  border: 1px solid hsl(var(--cat-h, 220) var(--cat-ls) var(--cat-ll));
  color: hsl(var(--cat-h, 220) var(--cat-fs) var(--cat-fl));
  display: grid; gap: 2px; transition: transform .14s, box-shadow .14s;
}
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cat-tile.active { outline: 2px solid hsl(var(--cat-h, 220) var(--cat-ss) var(--cat-sl)); outline-offset: 2px; }
.cat-tile .ico { font-size: 1.3rem; line-height: 1.2; }
.cat-tile .name { font-weight: 600; font-size: .9rem; }
.cat-tile .n { font-size: .78rem; opacity: .75; }
.cat-tile.empty-cat { opacity: .5; }

/* Theme toggle */
.theme-toggle {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px; gap: 2px;
}
.theme-toggle button {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 28px; height: 24px; border-radius: 999px; font-size: .8rem;
  display: grid; place-items: center; color: var(--muted); padding: 0;
}
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

/* Gradient flourishes */
.brand h1 {
  background: var(--accent-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.primary {
  background: var(--accent-grad); border-color: transparent;
  box-shadow: 0 1px 2px rgba(45,91,215,.25);
}
.tab.active { border-bottom-color: var(--accent); }
.progress-bar { background: var(--accent-grad); }
.entry { box-shadow: var(--shadow-lg); }
.entry-head {
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
}
.quiz-card { box-shadow: var(--shadow-lg); }
.stat { transition: transform .14s, box-shadow .14s; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat b { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mode-card { transition: transform .14s, box-shadow .14s, border-color .14s; }
.mode-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); }

/* ----------------------------------------------------- sentence breakdown */
.sentence-form textarea {
  min-height: 84px; resize: vertical; font-size: 1.05rem; line-height: 1.5;
  font-family: inherit;
}
.sentence-actions { display: flex; align-items: center; gap: 11px; margin-top: 11px; flex-wrap: wrap; }
.sentence-actions .hint { margin: 0; }

.sent-card {
  margin-top: 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden;
}
.sent-head {
  padding: 20px 22px; background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
.sent-fr {
  font-size: 1.32rem; font-weight: 600; line-height: 1.45;
  display: flex; align-items: flex-start; gap: 9px;
}
.sent-fr span { flex: 1; }
.sent-en { font-size: 1.02rem; color: var(--muted); margin-top: 9px; }
.sent-literal {
  font-size: .89rem; color: var(--muted); margin-top: 7px; font-style: italic;
}
.corrected-flag {
  display: inline-block; font-size: .74rem; padding: 2px 9px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn); margin-bottom: 9px; font-weight: 560;
}
.sent-body { padding: 18px 22px 22px; }

.grammar-note {
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: .92rem;
}
.grammar-note + .grammar-note { margin-top: 8px; }

.sent-words { display: grid; gap: 8px; }
.sw {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid hsl(var(--cat-h, 220) var(--cat-ss) var(--cat-sl));
}
.sw-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.sw-head b { font-size: 1rem; font-weight: 620; }
.sw-form { font-size: .8rem; color: var(--muted); font-family: var(--mono); }
.sw-trans { font-size: .89rem; color: var(--muted); margin-top: 1px; }
.sw-note { font-size: .83rem; color: var(--muted); margin-top: 4px; }
.sw-flag {
  font-size: .68rem; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--good-soft); color: var(--good); font-weight: 580;
}
.sw-flag.known { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }

.sent-summary {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  font-size: .89rem; color: var(--muted); margin-bottom: 13px;
}
.sent-summary b { color: var(--text); }

@media (max-width: 480px) {
  .topbar { padding: 14px 16px 12px; }
  .tabs { padding: 0 10px; }
  main { padding: 18px 16px 70px; }
  .quiz-prompt { font-size: 1.5rem; }
  .sw { grid-template-columns: auto 1fr; }
  .choices.two { grid-template-columns: 1fr; }
}

.topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sentence-form > label { font-size: .85rem; margin-bottom: 7px; }

/* ------------------------------------------------------------- welcome
   Shown on first run only. The <html data-known> flag is set before paint
   from localStorage, so a returning user never sees this flash past. */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
  background-image: var(--bg-tint);
}
:root[data-known] .welcome { display: none; }

.welcome-card {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-lg);
  animation: rise .25s ease-out;
}
.welcome-flag { font-size: 2.6rem; line-height: 1; }
.welcome-card h2 {
  margin: 0;
  font-size: 1.6rem;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.welcome-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.welcome-card label { margin-top: 6px; font-weight: 600; font-size: .9rem; }
.welcome-card .primary { margin-top: 4px; }
.welcome-foot { font-size: .8rem !important; opacity: .8; }

/* The signed-in name in the top bar, which doubles as "change my name". */
.who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.who:hover { border-color: var(--accent); }
.who::before { content: "👤"; font-size: .9em; }

/* ------------------------------------------------- user-made categories */
.cat-tile.add-cat {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  justify-content: center;
}
.cat-tile.add-cat:hover { color: var(--accent); border-color: var(--accent); }

.cat-new {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cat-new label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 600; }
.cat-new input[type="text"] { width: 190px; }
.cat-new input[type="color"] { width: 44px; height: 38px; padding: 2px; cursor: pointer; }
.cat-new .icon-in { width: 58px; text-align: center; }
.cat-new .cat-new-msg { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--bad); }

/* A custom category gets a small mark so it reads as one the user made. */
.cat-tile.is-custom .name::after,
.cat-chip.is-custom .ico::after { content: "✎"; margin-left: 5px; font-size: .75em; opacity: .5; }

/* The passphrase step on the welcome screen. */
#welcome-pass-wrap { display: flex; flex-direction: column; gap: 4px; }
#welcome-pass-wrap label { margin-top: 6px; }
.welcome-error {
  margin: 0 !important;
  padding: 8px 12px;
  font-size: .85rem !important;
  color: var(--bad) !important;
  background: var(--bad-soft);
  border-radius: 10px;
}

/* ------------------------------------------------------------- greeting */
.greeting {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid hsl(225 70% 85%);
  border-radius: var(--radius);
  animation: rise .25s ease-out;
}
.greeting[hidden] { display: none; }
.greeting-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.greeting-text strong {
  font-size: 1.05rem;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.greeting .g-line { font-size: .88rem; color: var(--muted); }
.greeting-close {
  flex: none;
  padding: 2px 6px;
  font: inherit;
  font-size: .85rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.greeting-close:hover { color: var(--text); background: rgba(0,0,0,.06); }

:root:not([data-theme="light"]) .greeting,
:root[data-theme="dark"] .greeting { border-color: hsl(225 30% 32%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .greeting-close:hover { background: rgba(255,255,255,.08); }
}

/* ---------------------------------------------------------------- mobile
   The desktop top bar is three rows on a phone — brand, pills, theme — which
   pushes the actual app below the fold. These rules fold it into two compact
   rows and give the tab strip a hint that it scrolls. */
@media (max-width: 560px) {
  .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 12px 16px 10px;
  }
  /* The wrapper stops being a box so its children lay out as part of the top
     bar itself — otherwise the whole group is one unbreakable item and the
     bar grows to three rows. */
  .topbar-right { display: contents; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand h1 { font-size: 1.1rem; }
  .theme-toggle { order: 1; flex: none; }
  .who { order: 2; flex: 0 1 auto; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pills { order: 3; flex: 1 1 auto; gap: 6px; }
  .pill { padding: 4px 9px; font-size: .78rem; }


  /* Tabs scroll; fade the right edge so it is obvious there are more. */
  .tabs {
    padding: 0 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding-left: 11px; padding-right: 11px; font-size: .92rem; white-space: nowrap; }

  /* A side-by-side input and button leaves the input too narrow to read. */
  .lookup-form { flex-wrap: wrap; }
  .lookup-form input { flex: 1 1 100%; font-size: 16px; }
  .lookup-form button { flex: 1 1 100%; }

  /* 16px keeps iOS from zooming in when a field takes focus. */
  input:not([type=checkbox]):not([type=radio]):not([type=submit]),
  textarea, select { font-size: 16px; }

  /* Two across reads better than one tall column. */
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cat-tile { padding: 10px; }
  .cat-tile .name { font-size: .82rem; }
  .cat-tile .n { font-size: .72rem; }

  .cat-new { flex-direction: column; align-items: stretch; }
  .cat-new input[type="text"] { width: 100%; }

  .greeting { padding: 12px 14px; }
  .welcome-card { padding: 26px 20px; }

  /* Comfortable tap targets for the drill controls. */
  .quiz-actions button, .choices button { min-height: 46px; }
}

/* Very narrow phones: stop the toolbar selects from squeezing the search box. */
@media (max-width: 400px) {
  .toolbar { grid-template-columns: 1fr; }
  .brand .flag { display: none; }
}

/* The plain-English respelling, next to the IPA. The IPA is exact; this is the
   one you can act on without knowing the symbols. */
.say-like {
  display: inline-block;
  padding: 2px 9px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  white-space: nowrap;
}

/* Synonyms read as a list rather than chips: each one carries a note about
   when to reach for it, which a chip has no room for. */
.syn-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.syn-list li { font-size: .92rem; line-height: 1.45; }
.syn-list li::marker { color: var(--accent); }