/* --accent/--accent-deep moved off blue (was #3B4B9E / #28336E) to a
     plum/berry hue, chosen after reviewing several directions side by side —
     the old indigo-blue read as generic "corporate SaaS" (too close to
     Facebook's brand blue) and, worse, its dark-mode periwinkle counterpart
     (#8B95E8) looked washed out/muddy against the near-black background.
     Plum keeps the same warm-cool crossover feel as the rest of the palette
     (brick/gold warm, teal cool) without colliding with any of them, and
     the dark-mode value (#D191CE) carries more chroma than the old one so
     it doesn't go flat next to --paper. Every other token is unchanged. */
  :root {
    color-scheme: light;
    --paper: #EDEFF5;
    --paper-raised: #E1E5F0;
    --paper-sunken: #D5DAEA;
    --ink: #1C2333;
    --ink-soft: #565F7A;
    --line: #C2C9DE;
    --accent: #6E3B72;
    --accent-deep: #4B2350;
    --accent-ink: #F5F6FC;
    --brick: #8C4A20;
    --brick-soft: #F0DCC8;
    --gold: #6B5316;
    --gold-soft: #F0E4C0;
    --teal: #146B63;
    --teal-soft: #D2EEEA;
    --danger: #A23A3A;
    --shadow: rgba(28, 35, 51, 0.14);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #12141F;
      --paper-raised: #171A2C;
      --paper-sunken: #0D0E18;
      --ink: #E7E9F5;
      --ink-soft: #A7ADC9;
      --line: #2C3049;
      --accent: #D191CE;
      --accent-deep: #E6AEE0;
      --accent-ink: #11132A;
      --brick: #E19A6C;
      --brick-soft: #3A2A1D;
      --gold: #DDBE72;
      --gold-soft: #35301C;
      --teal: #6FE0D0;
      --teal-soft: #12302C;
      --danger: #E28881;
      --shadow: rgba(0, 0, 0, 0.4);
    }
  }
  :root[data-theme="dark"] {
    --paper: #12141F;
    --paper-raised: #171A2C;
    --paper-sunken: #0D0E18;
    --ink: #E7E9F5;
    --ink-soft: #A7ADC9;
    --line: #2C3049;
    --accent: #D191CE;
    --accent-deep: #E6AEE0;
    --accent-ink: #11132A;
    --brick: #E19A6C;
    --brick-soft: #3A2A1D;
    --gold: #DDBE72;
    --gold-soft: #35301C;
    --teal: #6FE0D0;
    --teal-soft: #12302C;
    --danger: #E28881;
    --shadow: rgba(0, 0, 0, 0.4);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; }

  /* Mobile Safari (and some Android browsers) auto-boosts font size in
     text it judges "dense" or narrow-column content, as a readability
     heuristic — and it can boost the wide gustar-type cells (long
     "me gusta / me gustan" text) differently from the narrow pronoun
     column right next to them, then not fully re-settle when the content
     changes. That's what was throwing the two conjugation tables' row
     heights out of sync specifically after viewing a gustar-type verb.
     Turning the heuristic off keeps every cell at the size this stylesheet
     actually asks for. */
  html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* nicer, on-theme scrollbars instead of the browser's bulky default —
     scrollbar-color/-width is inherited, so setting it on html covers the
     page scrollbar and every internal scroll area (conj tables, the
     flashcard matrix); the -webkit- pseudo-elements need their own rule
     per element, so that one goes on the universal selector instead. */
  html { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  *::-webkit-scrollbar { width: 9px; height: 9px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
  *::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
    padding: 28px 16px 72px;
  }
  img { max-width: 100%; }
  [hidden] { display: none !important; }
  .wrap { max-width: 760px; margin: 0 auto; }

  header.masthead {
    border-bottom: 2px solid var(--ink);
    padding-bottom: 16px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }
  header.masthead h1 {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(28px, 6vw, 40px);
    margin: 0;
    letter-spacing: -0.01em;
  }
  header.masthead .tag {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
  }
  .user-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
  }

  .status-banner {
    background: var(--brick-soft);
    color: var(--ink);
    border: 1px solid var(--brick);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13.5px;
    margin-bottom: 18px;
  }

  /* An active mode, not a warning, so it gets the accent color rather than
     .status-banner's brick tone — and it sits above the tabs (not inside
     one panel) since Verbos, Vocabulario and Tarjetas all read from the
     same filtered arrays while a study list is active. */
  /* Shown when a load fell back to the local offline cache (see the
     saveCache/readCache helpers in app.js). Deliberately more muted than
     .study-filter-banner (a plain line, not the accent color) since this
     is ambient status, not something the person chose. */
  .offline-banner {
    background: var(--paper-sunken);
    border: 1px solid var(--line);
    border-left: 4px solid var(--ink-soft);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13.5px;
    color: var(--ink-soft);
  }

  .study-filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--paper-sunken);
    border: 1px solid var(--accent);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13.5px;
    color: var(--ink);
  }
  #study-filter-text { font-weight: 600; }
  #study-filter-clear {
    background: none;
    border: none;
    padding: 2px 4px;
    font-family: inherit;
    font-size: 12.5px;
    font-style: italic;
    color: var(--accent-deep);
    text-decoration: underline;
    cursor: pointer;
    flex-shrink: 0;
  }
  #study-filter-clear:hover { color: var(--danger); }

  /* ---------- verbs / vocabulario tabs ---------- */
  /* More tabs than reliably fit a phone width (5 as of the phrases tab,
     more later maybe) — same edge-to-edge horizontal-scroll trick as
     .conj-scroll below rather than wrapping or shrinking text: the row
     scrolls, tabs keep their natural width, and the row bleeds off the
     right edge of the screen so a partially-visible tab hints there's
     more to scroll to. Left edge stays flush with the page's own
     padding, matching where content normally starts. */
  .main-tabs {
    display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 2px solid var(--ink);
    /* overflow-x: auto on its own makes the browser implicitly treat
       overflow-y as auto too (a CSS quirk: one axis non-"visible" forces
       the other out of "visible" as well) — which is what let the row be
       dragged up/down as if it had vertical content. Pin overflow-y to
       hidden explicitly so only the intended horizontal swipe works. */
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    margin-right: -16px; padding-right: 16px;
    /* The row itself is the scroll affordance (tabs bleeding off the right
       edge) — a scrollbar underneath just doubles up on that same signal
       and looks out of place sitting right on the border-bottom divider.
       Scrolling still works via swipe/wheel; only the bar is hidden. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .main-tabs::-webkit-scrollbar { display: none; }
  .main-tab {
    background: none; border: none; padding: 9px 18px 11px; cursor: pointer;
    font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: 17px;
    color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -2px;
    flex-shrink: 0; white-space: nowrap;
  }
  .main-tab:hover { color: var(--ink); }
  .main-tab.active { color: var(--accent-deep); border-bottom-color: var(--accent); }

  /* ---------- auth screen ---------- */
  .auth-wrap {
    max-width: 400px;
    margin: 12vh auto 0;
  }
  .auth-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper-raised);
    padding: 28px;
    box-shadow: 0 2px 10px var(--shadow);
  }
  .auth-card h1 {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 30px;
    margin: 0 0 2px;
  }
  .auth-card .tag {
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
  }
  .auth-tabs {
    display: flex;
    gap: 4px;
    margin: 20px 0 16px;
    border-bottom: 1px solid var(--line);
  }
  .auth-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 8px 4px 10px;
    font-family: "Public Sans", sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .auth-tab.active { color: var(--accent-deep); border-bottom-color: var(--accent); }
  #auth-form { display: flex; flex-direction: column; gap: 12px; }
  #auth-form .field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
  }
  #auth-form input {
    width: 100%;
    font-family: "Public Sans", sans-serif;
    font-size: 14px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
  }
  #auth-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  #auth-submit { margin-top: 4px; }

  /* ---------- search / list ---------- */
  /* Search + its filter chips are grouped as their own card, set off from
     the tab bar above and the results list below — search is a way to get
     into your índice, not the main event, so it shouldn't visually compete
     with the verb/word content itself. */
  .search-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper-raised);
    padding: 14px 16px 12px;
    margin-bottom: 20px;
  }
  .search-box { position: relative; margin-bottom: 4px; }
  .search-box input {
    width: 100%;
    font-family: "Public Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--ink);
    color: var(--ink);
    padding: 6px 2px 7px;
    outline: none;
  }
  .search-box input::placeholder { color: var(--ink-soft); font-style: italic; font-size: 13.5px; }
  .search-box .count {
    position: absolute;
    right: 2px;
    bottom: 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--ink-soft);
  }

  .filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 10px;
  }
  .chip-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .chip-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-right: 2px;
  }
  .chip {
    /* one shade darker than the .search-card it now sits inside (which is
       itself --paper-raised), the same raised-card/sunken-content contrast
       .detail already uses for its .tile elements — otherwise the chips
       would blend into the card behind them. */
    background: var(--paper-sunken);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 4px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    line-height: 1.4;
  }
  .chip:hover { border-color: var(--accent); color: var(--ink); }
  .chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
    font-weight: 600;
  }
  .chip-clear {
    background: none;
    border: none;
    padding: 4px 2px;
    font-family: inherit;
    font-size: 12.5px;
    font-style: italic;
    color: var(--ink-soft);
    text-decoration: underline;
    cursor: pointer;
    margin-left: auto;
  }
  .chip-clear:hover { color: var(--danger); }

  .card-list {
    list-style: none;
    margin: 10px 0 12px;
    padding: 0;
    max-height: 110px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper-raised);
  }
  .card-list li + li { border-top: 1px solid var(--line); }
  /* the verb, word and phrase selection lists get their own taller height
     (rather than the shared 110px above) so more of the filtered list is
     visible before you have to scroll — all three matched to the same
     330px (the word list's height, confirmed as the right feel). */
  #card-list { max-height: 330px; }
  #word-list { max-height: 330px; }
  #phrase-list { max-height: 330px; }
  .card-row {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
  }
  .card-row:hover, .card-row:focus-visible { background: var(--paper-sunken); }
  .card-row .inf { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 17px; min-width: 120px; }
  .card-row .def { color: var(--ink-soft); font-size: 13.5px; flex: 1; }
  .card-row .badge { flex-shrink: 0; }
  .empty-note { padding: 18px 14px; color: var(--ink-soft); font-size: 14px; }
  .empty-note p { margin: 0 0 10px; font-style: italic; }

  .badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
  }
  .badge.type { background: var(--gold-soft); color: var(--gold); }
  .badge.irregular { background: var(--brick-soft); color: var(--brick); }
  .badge.reflexive { background: var(--paper-sunken); color: var(--ink-soft); border: 1px solid var(--line); }
  .badge.gender { background: var(--paper-sunken); color: var(--ink-soft); border: 1px solid var(--line); }
  .badge.transitivity { background: var(--paper-sunken); color: var(--ink-soft); border: 1px solid var(--line); }
  .badge.auxiliar { background: var(--paper-sunken); color: var(--accent-deep); border: 1px solid var(--line); }
  /* its own hue (teal) rather than the accent blue, so it doesn't read as
     a selected filter chip — it's flagging a genuine usage quirk (see the
     "pattern" note / the gustar legend), not a selection state. */
  .badge.gustarLike { background: var(--teal-soft); color: var(--teal); border: 1px solid var(--teal); }
  /* register (coloquial/lunfardo) — same "flagging a quirk" brick tone as
     irregular, since it's calling out that this phrase isn't textbook-
     neutral; register:neutro never renders a badge at all (see app.js). */
  .badge.register { background: var(--brick-soft); color: var(--brick); }
  /* idiomatic — same teal treatment as gustarLike, for the same reason:
     it's a usage-shape flag, not a selection state. */
  .badge.idiomatic { background: var(--teal-soft); color: var(--teal); border: 1px solid var(--teal); }

  .detail {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper-raised);
    padding: 22px 22px 8px;
    margin: 26px 0 24px;
    box-shadow: 0 2px 10px var(--shadow);
  }
  .detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
  .detail-actions-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin: 18px 0 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .detail-head h2 { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: 32px; margin: 0; }
  .icon-btn {
    background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft);
    font-family: "Public Sans", sans-serif; font-size: 12.5px; font-weight: 600; padding: 5px 10px; cursor: pointer;
  }
  .icon-btn:hover { border-color: var(--accent); color: var(--accent-deep); }
  .icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
  /* the gear glyph reads small at the plain .icon-btn text size */
  #settings-btn { font-size: 15px; line-height: 1; }

  .detail .definition { color: var(--ink-soft); font-size: 15px; margin: 2px 0 10px; }
  .detail .badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
  .detail .pattern-note { font-size: 13px; color: var(--ink-soft); font-style: italic; margin: 6px 0 18px; }
  .detail .example-note { font-size: 13.5px; color: var(--ink); background: var(--paper-sunken); border-radius: 8px; padding: 8px 12px; margin: 0 0 18px; }
  .detail .example-note::before { content: "\201C"; color: var(--ink-soft); }
  .detail .example-note::after { content: "\201D"; color: var(--ink-soft); }

  .conj-hint { display: none; }
  .conj-wrap { display: flex; align-items: flex-start; }
  .conj-scroll { overflow-x: auto; flex: 1 1 auto; min-width: 0; margin-right: -22px; padding-right: 22px; }
  table.conj { border-collapse: collapse; width: 100%; min-width: 560px; font-family: "JetBrains Mono", monospace; font-size: 14px; }
  table.conj th, table.conj td { padding: 7px 10px; text-align: left; white-space: nowrap; line-height: 17px; }
  table.conj thead tr.mood-row th {
    font-family: "Public Sans", sans-serif; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent-deep); padding-bottom: 2px; border-bottom: none;
  }
  table.conj thead tr.tense-row th {
    font-family: "Public Sans", sans-serif; font-weight: 600; font-size: 12.5px; color: var(--ink-soft);
    border-bottom: 2px solid var(--ink); padding-top: 0; padding-bottom: 8px;
  }
  table.conj tbody th { font-family: "Public Sans", sans-serif; font-weight: 600; font-size: 13px; color: var(--ink); white-space: normal; }
  table.conj tbody tr + tr th, table.conj tbody tr + tr td { border-top: 1px solid var(--line); }
  table.conj tbody td { color: var(--accent-deep); font-weight: 500; border-radius: 5px; }
  /* display: table-cell here isn't cosmetic — it's overriding the plain
     .irreg rule below, which sets display: inline-block for its OWN use
     case (a standalone <span> chip). That class is reused unmodified on
     real <td> elements for irregular cells (see app.js isCellIrregular
     call sites), and without this override the inline-block wins (no
     other rule touches display on td.irreg), which rips the cell out of
     the table's row/column layout entirely — it stops occupying its
     column and just flows in document order instead, so a row with
     several irregular cells (e.g. "yo" in a heavily-irregular verb like
     "superponer") renders as pills bunched together off to one side with
     empty gaps left in their real columns, especially at mobile widths. */
  table.conj tbody td.irreg { display: table-cell; background: var(--brick-soft); color: var(--brick); font-weight: 700; }

  /* .irreg is also reused standalone (not inside table.conj) by the JSON
     import preview, to flag individual mismatching cells with the exact
     same visual treatment as the real conjugation table, just as an inline
     chip instead of a table cell. */
  .irreg {
    display: inline-block;
    background: var(--brick-soft);
    color: var(--brick);
    font-weight: 700;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    border-radius: 5px;
    padding: 2px 7px;
  }

  /* imperativo column: usted/ustedes don't share él/ella's or ellos/ellas's
     form the way every other mood/tense in this table does, so those two
     merged rows show "— / — / <real form>" instead of one clean value */
  table.conj thead tr.mood-row th.imp-head { color: var(--brick); }
  table.conj tbody td.imp-col { font-size: 0.9em; }
  table.conj tbody td.imp-col .dash { color: var(--line); }
  table.conj tbody td.imp-col .real { color: var(--brick); font-weight: 700; font-size: 1.1em; }

  /* the optional impersonal row (hay, llueve...) sits apart from the
     personal yo/vos/él/nosotros/ellos rows above it */
  table.conj tbody tr.impersonal-row th, table.conj tbody tr.impersonal-row td {
    border-top: 2px solid var(--line); font-style: italic; color: var(--ink-soft);
  }
  table.conj tbody tr.impersonal-row td { color: var(--accent-deep); }

  /* frozen pronoun column, as its own small table beside the scrolling one
     rather than a sticky cell inside it (sticky-in-table renders unreliably,
     especially in mobile Safari, causing the column to visibly pop/duplicate
     as it re-syncs with the scroll position) */
  table.conj.conj-pronouns {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    border-right: 1px solid var(--line);
  }
  table.conj.conj-pronouns th { white-space: nowrap; }

  .conj-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); margin: 4px 0 14px; }
  .conj-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--brick-soft); border: 1px solid var(--brick); flex: none; }
  .conj-legend .swatch.gustar { background: var(--teal-soft); border-color: var(--teal); }

  .imperativo-heading {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin: 0 0 8px;
  }

  .nonpersonal { display: flex; gap: 10px; margin: 18px 0 20px; flex-wrap: wrap; }
  .nonpersonal .tile { background: var(--paper-sunken); border-radius: 8px; padding: 8px 14px; flex: 1; min-width: 140px; }
  .nonpersonal .tile .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); display: block; margin-bottom: 2px; }
  .nonpersonal .tile .val { font-family: "JetBrains Mono", monospace; color: var(--accent-deep); font-size: 15px; }

  .toolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
  .add-toggle {
    display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink);
    border: none; border-radius: 6px; padding: 9px 16px; font-family: "Public Sans", sans-serif; font-weight: 600;
    font-size: 14px; cursor: pointer;
  }
  .add-toggle:hover { background: var(--accent-deep); }
  .seed-btn {
    background: none; border: 1px solid var(--accent); color: var(--accent-deep); border-radius: 6px;
    padding: 7px 14px; font-family: "Public Sans", sans-serif; font-weight: 600; font-size: 13px; cursor: pointer;
  }
  .seed-btn:hover { background: var(--paper-sunken); }

  form#verb-form { border: 1px dashed var(--line); border-radius: 10px; padding: 20px; background: var(--paper-raised); margin-bottom: 32px; }
  form#verb-form h3 { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 20px; margin: 0 0 14px; }
  .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
  .field { display: flex; flex-direction: column; gap: 4px; }
  .field.checks { flex-direction: row; align-items: center; gap: 8px; }
  .field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); font-weight: 600; }
  .field input[type="text"], .field select {
    font-family: "Public Sans", sans-serif; font-size: 14px; padding: 7px 9px; border: 1px solid var(--line);
    border-radius: 6px; background: var(--paper); color: var(--ink);
  }
  .field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .field textarea {
    font-family: "JetBrains Mono", monospace; font-size: 13px; padding: 8px 9px; border: 1px solid var(--line);
    border-radius: 6px; background: var(--paper); color: var(--ink); resize: vertical; min-height: 160px;
  }
  .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .field input[type="file"] { font-family: "Public Sans", sans-serif; font-size: 13px; color: var(--ink-soft); }

  .conj-form-scroll { overflow-x: auto; margin-bottom: 6px; }
  table.conj-form { border-collapse: collapse; min-width: 560px; }
  table.conj-form th { font-family: "Public Sans", sans-serif; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); text-align: left; padding: 4px 6px; }
  table.conj-form td { padding: 4px 6px; }
  table.conj-form input {
    width: 92px; font-family: "JetBrains Mono", monospace; font-size: 13px; padding: 5px 6px;
    border: 1px solid var(--line); border-radius: 5px; background: var(--paper); color: var(--ink);
  }
  table.conj-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  table.conj-form th.person-col { min-width: 130px; }
  table.conj-form tr.impersonal-row th, table.conj-form tr.impersonal-row td { padding-top: 10px; border-top: 2px solid var(--line); }
  table.conj-form tr.impersonal-row th { font-style: italic; }

  .nonpersonal-form { display: flex; gap: 12px; margin: 14px 0; flex-wrap: wrap; }

  .form-actions { display: flex; gap: 10px; margin-top: 6px; align-items: center; flex-wrap: wrap; }
  .btn-primary {
    background: var(--accent); color: var(--accent-ink); border: none; border-radius: 6px; padding: 9px 18px;
    font-family: "Public Sans", sans-serif; font-weight: 700; font-size: 14px; cursor: pointer;
  }
  .btn-primary:hover { background: var(--accent-deep); }
  .btn-primary:disabled { opacity: 0.6; cursor: default; }
  .btn-secondary {
    background: none; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 6px; padding: 9px 16px;
    font-family: "Public Sans", sans-serif; font-weight: 600; font-size: 14px; cursor: pointer;
  }
  .form-msg { font-size: 13px; color: var(--danger); }

  footer.note { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: 40px; }

  /* ---------- flashcards ---------- */
  .flash-setup {
    border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised);
    padding: 22px; margin-bottom: 24px;
  }
  .flash-setup h2 { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: 24px; margin: 0 0 4px; }
  .flash-setup-note { font-size: 13px; color: var(--ink-soft); font-style: italic; margin: 0 0 18px; }

  .flash-source-toggle { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 6px; }
  .switch-row { display: flex; align-items: center; gap: 10px; font-family: "Public Sans", sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; }
  /* Standard "real checkbox, visually hidden" toggle-switch technique: the
     <input> stays in the DOM, sized and positioned to exactly cover the
     track (so it stays keyboard-focusable and is what el.flashSrcVerbs/
     el.flashSrcWords actually read — this is a pure visual restyle, no
     change to that behavior), just made invisible via opacity rather than
     display:none/visibility:hidden, which would drop it from the tab order. */
  .switch { position: relative; display: inline-flex; flex: none; width: 40px; height: 23px; }
  .switch input[type="checkbox"] {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: pointer; z-index: 1;
  }
  .switch-track {
    position: absolute; inset: 0; border-radius: 999px;
    background: var(--paper-sunken); border: 1px solid var(--line);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .switch-thumb {
    position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
    background: var(--paper); box-shadow: 0 1px 3px var(--shadow);
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent-deep); }
  .switch input:checked + .switch-track .switch-thumb { transform: translateX(17px); background: var(--accent-ink); }
  /* replaces (rather than removes) the outline the invisible input would
     otherwise lose visually, so tab-focus is still clearly visible */
  .switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
  .flash-count { color: var(--ink-soft); font-weight: 500; font-size: 13px; font-family: "JetBrains Mono", monospace; }

  .flash-group-label {
    font-family: "JetBrains Mono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-soft); margin: 14px 0 6px;
  }
  .flash-check-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

  .flash-matrix-scroll { overflow-x: auto; margin: 0 0 6px; padding-bottom: 2px; }
  table.flash-matrix { border-collapse: collapse; font-family: "JetBrains Mono", monospace; font-size: 12px; }
  table.flash-matrix th, table.flash-matrix td { padding: 3px; text-align: center; }
  /* Two-row header mirroring #detail table.conj-tenses' own mood-row/
     tense-row split (see table.conj thead tr.mood-row above) — adapted to
     this grid's smaller monospace sizing — so indicative "Presente" and
     subjunctive "Presente" (etc.) read as different groups instead of
     looking like duplicate columns. */
  table.flash-matrix thead tr.mood-row th {
    font-family: "Public Sans", sans-serif; font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--accent-deep); padding-bottom: 4px; border-bottom: none;
  }
  table.flash-matrix thead tr.mood-row th.imp-head { color: var(--brick); }
  table.flash-matrix thead tr.tense-row th { padding-top: 2px; padding-bottom: 5px; }
  table.flash-matrix thead th.flash-matrix-corner { vertical-align: bottom; }
  .flash-matrix-head {
    background: var(--paper-sunken); border: 1px solid var(--line); cursor: pointer; font: inherit; font-weight: 700;
    color: var(--ink-soft); padding: 6px 10px; border-radius: 8px; white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
  .flash-matrix-head:hover { background: var(--accent); border-color: var(--accent-deep); color: var(--paper); }
  .flash-matrix-row-head { text-align: left; }
  .flash-matrix-toggle-all {
    background: var(--paper-sunken); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
    color: var(--ink-soft); padding: 6px 9px;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
  .flash-matrix-toggle-all:hover { background: var(--accent); border-color: var(--accent-deep); color: var(--paper); }
  /* More breathing room + rounded corners consistent with .chip, and an
     on-state that doesn't rely on a background swap alone (a checkmark),
     so a selected cell reads clearly in both themes even where the accent
     background's contrast against the border is lower. */
  .flash-matrix-cell {
    width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--paper); cursor: pointer; padding: 0; position: relative;
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  .flash-matrix-cell:hover { border-color: var(--accent); background: var(--paper-sunken); }
  .flash-matrix-cell.on { background: var(--accent); border-color: var(--accent-deep); }
  .flash-matrix-cell.on::after {
    content: "\2713";
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: "Public Sans", sans-serif; font-size: 15px; font-weight: 700; color: var(--accent-ink);
  }
  .flash-matrix-na { background: none; }
  /* subtle zebra shading across the 5 person rows for scannability — only
     visible where a button doesn't already cover the cell (the row-head
     label and any n/a cell), since the cell buttons keep their own opaque
     background either way. */
  table.flash-matrix tbody tr:nth-child(even) > th,
  table.flash-matrix tbody tr:nth-child(even) > td { background: var(--paper-sunken); }
  .flash-matrix-hint { font-size: 11.5px; color: var(--ink-soft); font-style: italic; margin: 0 0 10px; }

  .flash-verb-options, .flash-word-options { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 12px; }
  .flash-radio-row { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }
  .flash-radio-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
  .flash-radio-row input[type="radio"] { accent-color: var(--accent); cursor: pointer; }

  #flash-start-btn { margin-top: 20px; }
  #flash-setup-msg:empty { margin: 0; }
  #flash-setup-msg { margin: 10px 0 0; }

  .flash-overlay {
    position: fixed; inset: 0; background: var(--paper); z-index: 100;
    display: flex; flex-direction: column; padding: 16px;
  }
  .flash-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .flash-progress { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--ink-soft); }

  /* The prev/next arrows are laid out as ordinary flex siblings of the card
     (not absolutely positioned against the full-width stage) so they always
     sit a fixed gap off the card's own edges, wherever the card ends up on a
     wide desktop window, rather than pinning themselves to the far edges of
     the browser. */
  .flash-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 0; perspective: 1200px; position: relative; }
  .flash-card {
    position: relative; width: min(92vw, 420px); height: min(56vh, 320px);
    cursor: pointer; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(.4,.2,.2,1);
    touch-action: none;
    /* without these, holding a finger down on the card (or dragging it
       slowly) lets the browser's own touch feedback take over — a gray
       tap-highlight box, a text-selection tint, or iOS's press-and-hold
       callout — any of which can make the card look like it's vanished
       under an overlay while you're mid-drag. */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  /* The card (only the card — not the overlay's background/topbar/arrows
     around it) deliberately shows the OPPOSITE theme from the rest of the
     app, via a "data-theme" attribute placed on this element itself and
     computed in JS from whatever theme is currently ambient. These two
     blocks re-declare the same tokens :root uses, scoped here so every
     descendant (front/back faces, badges) inherits the inverted palette
     while the page around the card stays in your actual theme. */
  .flash-card[data-theme="dark"] {
    --paper: #12141F; --paper-raised: #171A2C; --paper-sunken: #0D0E18;
    --ink: #E7E9F5; --ink-soft: #A7ADC9; --line: #2C3049;
    --accent: #D191CE; --accent-deep: #E6AEE0; --accent-ink: #11132A;
    --brick: #E19A6C; --brick-soft: #3A2A1D; --gold: #DDBE72; --gold-soft: #35301C;
    --teal: #6FE0D0; --teal-soft: #12302C;
    --danger: #E28881; --shadow: rgba(0, 0, 0, 0.4);
  }
  .flash-card[data-theme="light"] {
    --paper: #EDEFF5; --paper-raised: #E1E5F0; --paper-sunken: #D5DAEA;
    --ink: #1C2333; --ink-soft: #565F7A; --line: #C2C9DE;
    --accent: #6E3B72; --accent-deep: #4B2350; --accent-ink: #F5F6FC;
    --brick: #8C4A20; --brick-soft: #F0DCC8; --gold: #6B5316; --gold-soft: #F0E4C0;
    --teal: #146B63; --teal-soft: #D2EEEA;
    --danger: #A23A3A; --shadow: rgba(28, 35, 51, 0.14);
  }
  .flash-card.flipped { transform: rotateY(180deg); }
  /* Used for one frame when jumping to a different card (next/prev), so the
     rotation snaps back to 0 with no animation before the new content is
     painted — otherwise the still-flipped card would briefly show the new
     card's answer face mid-rotation. The tap-to-flip animation is unaffected
     since this class is only ever added and removed by the JS navigation
     functions, never present during a user's tap.

     It's also the same class the drag handlers add for the duration of an
     active swipe (see app.js), so this is where will-change belongs too:
     left on the base .flash-card permanently, it makes Chromium promote
     the card to its own compositing layer, which breaks backface-visibility
     on its two 3D-rotated faces — tapping to flip then shows the mirrored
     FRONT face instead of the back one. Scoping it to the drag window keeps
     the smoother compositing during a swipe without breaking the ordinary
     tap-to-flip. */
  .flash-card.no-anim { transition: none; will-change: transform, opacity; }
  .flash-arrow {
    flex: none; z-index: 5;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--paper-raised); color: var(--ink-soft); font-size: 20px; line-height: 1;
    cursor: pointer; opacity: 0.45; transition: opacity 0.15s;
  }
  .flash-arrow:hover, .flash-arrow:focus-visible { opacity: 0.9; color: var(--accent-deep); border-color: var(--accent); }
  .flash-arrow:disabled { opacity: 0.15; cursor: default; }
  .flash-face {
    position: absolute; inset: 0; backface-visibility: hidden;
    border: 1px solid var(--line); border-radius: 16px;
    background-color: var(--paper-raised);
    /* A faint fractal-noise grain, tiled, so the card reads as cardstock
       rather than a flat digital rectangle. Kept to a hint on purpose: the
       noise's own alpha is tuned low in the color matrix below rather than
       relying on a visible repeating pattern, so it doesn't compete with
       the text sitting on top of it. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    box-shadow: 0 6px 24px var(--shadow);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px; text-align: center; gap: 10px;
  }
  .flash-back { transform: rotateY(180deg); }

  .flash-prompt-main, .flash-answer {
    font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600;
    font-size: clamp(22px, 6vw, 34px); color: var(--ink); word-break: break-word;
  }
  .flash-prompt-sub { font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--accent-deep); }
  .flash-sub { color: var(--ink-soft); font-style: italic; font-family: "Public Sans", sans-serif; font-size: 14px; }
  .flash-back-badges { justify-content: center; margin-top: 4px; }
  .flash-hint { text-align: center; font-size: 11.5px; color: var(--ink-soft); font-style: italic; margin: 10px 0 0; }

  .flash-controls { display: flex; justify-content: center; gap: 14px; margin-top: 14px; }

  /* ---------- mobile ---------- */
  @media (max-width: 640px) {
    body { padding: 16px 10px 56px; }

    header.masthead h1 { font-size: 24px; }
    .main-tab { font-size: 15px; padding: 8px 12px 10px; }
    .main-tabs { margin-right: -10px; padding-right: 10px; }

    .auth-wrap { margin: 6vh auto 0; }
    .auth-card { padding: 20px 16px; }
    .auth-card h1 { font-size: 24px; }

    .detail { padding: 16px 14px 6px; margin: 20px 0 18px; }
    .detail-head h2 { font-size: 24px; }
    .icon-btn { padding: 8px 12px; font-size: 13px; }

    .conj-hint { display: block; font-size: 11px; font-style: italic; color: var(--ink-soft); margin: 0 0 4px; }
    .conj-scroll { margin-right: -14px; padding-right: 14px; }
    table.conj { font-size: 12.5px; min-width: 480px; }
    table.conj th, table.conj td { padding: 6px 7px; line-height: 15px; }
    table.conj tbody th { font-size: 12px; }

    .nonpersonal { gap: 8px; margin: 14px 0 16px; }
    .nonpersonal .tile { min-width: calc(50% - 4px); padding: 7px 10px; }

    /* A phrase can carry up to 3 badges (function/register/idiomatic) plus
       its definition, on top of a longer-than-a-word headline ("¿Cuánto
       sale?") — all of that no longer fits beside the text on one line at
       phone widths without the shrunk .inf overflowing underneath its
       siblings. Give the headline its own full-width row and let the
       badges + definition wrap onto the line(s) below it, rather than
       fighting for horizontal space. Same card-row markup/order (inf,
       then badges, then def) as verbs/words, so this applies everywhere
       uniformly — it just wraps sooner. */
    .card-row { padding: 11px 12px; font-size: 14px; flex-wrap: wrap; row-gap: 4px; }
    .card-row .inf { min-width: 0; flex: 1 1 100%; font-size: 16px; }
    .card-row .def { font-size: 12.5px; }

    /* On a touch screen, a short fixed-height box with its own internal
       scroll (the desktop compromise, so the list doesn't push everything
       else far down the page) just fights the page scroll instead — your
       thumb lands on the list and only the list moves, not the page. Let
       these three grow to their full content height on mobile so the
       whole page scrolls as one, the way touch scrolling is expected to
       work. Modal-embedded lists (list picker, import preview) keep their
       bounded scroll — those sit inside an already-bounded dialog, a
       different context from the main tab content flow. */
    #card-list, #word-list, #phrase-list { max-height: none; overflow-y: visible; }

    .chip { padding: 4px 10px; font-size: 12px; }
    .chip-clear { flex-basis: 100%; margin-left: 0; }

    form#verb-form { padding: 16px 14px; }
    .conj-form-scroll { margin: 0 -14px; padding: 0 14px; }

    .btn-primary, .btn-secondary { padding: 11px 16px; font-size: 14.5px; }

    .toolbar-row { gap: 8px; }
    .add-toggle, .seed-btn { padding: 10px 14px; font-size: 13.5px; }

    .flash-setup { padding: 16px 14px; }
    .flash-card { width: min(94vw, 380px); height: min(48vh, 280px); }
    /* desktop-only: on mobile the arrows crowd a card that's already
       nearly full-width, and swiping covers the same job better there. */
    .flash-arrow { display: none; }
    /* the bottom anterior/siguiente buttons are desktop-only too, now that
       the card itself slides with your finger as you drag it — that visual
       feedback is enough to navigate by swipe alone on a phone, so the
       buttons would just be redundant chrome underneath the card. */
    .flash-controls { display: none; }
    table.flash-matrix { font-size: 10.5px; }
    table.flash-matrix thead tr.mood-row th { font-size: 8.5px; }
    .flash-matrix-cell { width: 28px; height: 26px; border-radius: 6px; }
    .flash-matrix-cell.on::after { font-size: 13px; }
    .flash-matrix-head { padding: 4px 6px; font-size: 10px; border-radius: 6px; }
    .flash-matrix-toggle-all { padding: 4px 6px; font-size: 9px; border-radius: 6px; }
  }

  /* ================= listas compartidas ================= */
  #lists-list { max-height: 260px; }
  .list-detail-group { margin-top: 14px; }
  .list-detail-group h4 {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 6px;
  }
  form#list-form h3 { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 20px; margin: 0 0 14px; }

  /* wraps rather than overflowing now that it can hold the link input plus
     two buttons (copy + native share) — the input keeps a sane minimum
     width so it wraps onto its own line first on a narrow phone screen,
     with the buttons dropping beneath it instead of squeezing everything
     onto one row. */
  .share-link-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
  .share-link-row input[type="text"] {
    flex: 1 1 200px;
    min-width: 160px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper-sunken);
    color: var(--ink);
  }

  /* "agregar a lista" picker — a small centered dialog rather than the
     full-screen overlay flashcards/sharing use, since it's a quick choice
     made from inside a verb/word's detail view, not its own destination. */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 35, 51, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 200;
  }
  .modal-card {
    background: var(--paper);
    border-radius: 12px;
    padding: 22px;
    max-width: 420px;
    width: 100%;
    max-height: 84vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(28, 35, 51, 0.3);
  }
  .modal-card h3 { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 20px; margin: 0 0 12px; }
  .list-picker-list { max-height: 180px; }

  /* the JSON-import panel needs more room than the small "add to list"
     picker (a textarea, per-row errors/warnings, a preview list), so it
     gets a wider variant of the same overlay/card rather than its own
     dialog treatment. */
  .modal-card.modal-card-wide { max-width: 640px; }

  /* collapsible "view/copy the import format spec" section — a native
     <details>/<summary> disclosure, the simplest option and this app has
     no other disclosure widget to match instead. */
  .import-spec-details {
    border: 1px solid var(--line); border-radius: 8px; background: var(--paper-sunken);
    padding: 10px 12px; margin: 0 0 16px;
  }
  .import-spec-details summary {
    cursor: pointer; font-family: "Public Sans", sans-serif; font-weight: 600; font-size: 13px;
    color: var(--accent-deep);
  }
  .import-spec-details[open] summary { margin-bottom: 10px; }
  .import-spec-pre {
    max-height: 260px; overflow: auto; margin: 0 0 10px;
    font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap;
    background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--ink);
  }
  .import-spec-details .form-actions { margin-top: 0; }
  #import-json-preview h4 {
    font-family: "Public Sans", sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--ink-soft); margin: 16px 0 8px;
  }
  .import-issue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .import-issue-list li { font-size: 13px; background: var(--paper-sunken); border-radius: 8px; padding: 8px 10px; line-height: 1.4; }
  #import-json-errors li { color: var(--danger); }
  #import-json-warnings li { color: var(--ink-soft); }
  .import-cell-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  #import-json-preview-list-wrap .card-list { max-height: 220px; }

  /* settings panel — the app-language toggle is a simple two-button
     segmented control, in keeping with the app's flat bordered-chip look
     rather than a native <select>. */
  #settings-overlay .field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 6px; }
  .lang-toggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .lang-option {
    flex: 1; background: var(--paper-raised); border: none; padding: 9px 10px;
    font-family: "Public Sans", sans-serif; font-size: 13.5px; font-weight: 600;
    color: var(--ink-soft); cursor: pointer;
  }
  .lang-option + .lang-option { border-left: 1px solid var(--line); }
  .lang-option.active { background: var(--accent-deep); color: var(--accent-ink); }
  .lang-option:hover:not(.active) { color: var(--accent-deep); }

  /* the detail card's normal-use/dative-use tabs for a dual-mode gustar-type
     verb (see the #d-gustar-tabs handling in selectVerb()) reuse .lang-toggle/
     .lang-option's segmented-button look verbatim, just narrower than the
     full-width settings-panel version and with room below before the table. */
  .gustar-mode-toggle { max-width: 300px; margin: 2px 0 16px; }

  /* the shared-list preview reuses .flash-overlay's full-screen chrome
     (same topbar, same close button) but its own scrollable body, since a
     list can run longer than a single flashcard's front/back content. */
  .share-body { max-width: 560px; width: 100%; margin: 0 auto; overflow-y: auto; }
  .share-body h2 { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: 28px; margin: 6px 0 2px; }
  .share-actions { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
  .share-actions .flash-setup-note { margin: 0 0 10px; }