:root {
  --bp-paper: #fff;
  --bp-paper-2: #f3f5f8;
  --bp-paper-3: #e7ecf2;
  --bp-ink: #0f1a2b;
  --bp-ink-2: #44556b;
  --bp-ink-3: #7a8a9e;
  --bp-rule: #b9c4d2;
  --bp-shadow: #d7dfe9;
  --bp-accent: #123a8c;
  --bp-accent-soft: #dce5f5;
  --bp-second: #a34a00;
  --bp-second-soft: #f7e4d4;
  --bp-ok: #1c6b4a;
  --bp-warn: #8a5a00;
  --bp-err: #a81b22;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bp-paper); -webkit-text-size-adjust: 100%; }
body.bp {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: "Martian Mono", "JetBrains Mono", monospace; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--bp-accent-soft); }
:where(button, summary, input, select, textarea, a):focus-visible { outline: 2px solid var(--bp-second); outline-offset: 2px; }
.muted, .bp-hint { color: var(--bp-ink-3); }
.bp-label {
  margin: 0;
  color: var(--bp-ink-3);
  font-family: "Silkscreen", monospace;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Shell */
.app-shell { min-height: 100svh; }
.app-main, .flash-stack, .topbar-inner { width: min(104ch, calc(100% - 4ch)); margin-inline: auto; }
.app-main { padding: 1.6rem 0 5rem; }
.topbar { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--bp-rule); background: color-mix(in srgb, var(--bp-paper) 94%, transparent); backdrop-filter: blur(8px); }
.topbar-inner { display: flex; min-height: 3.25rem; align-items: center; gap: 2ch; padding: .7rem 0; }
.brand { flex: none; }
.brand-mark { font-family: "Martian Mono", monospace; font-size: .95rem; font-weight: 800; letter-spacing: -.04em; }
.brand-mark b { color: var(--bp-accent); }
.topnav { display: flex; flex-wrap: wrap; gap: 1.4ch; margin-left: auto; }
.topnav a, .admin-nav a { border-bottom: 2px solid transparent; padding: .15rem .5ch; color: var(--bp-ink-3); font-size: .82rem; }
.topnav a:hover, .admin-nav a:hover { color: var(--bp-ink); }
.topnav a.is-active { border-bottom-color: var(--bp-accent); color: var(--bp-ink); font-weight: 700; }
.flash-stack { display: grid; gap: .5rem; margin-top: .8rem; }
.flash { border-left: 3px solid var(--bp-accent); padding: .55rem 1.2ch; background: var(--bp-accent-soft); }
.flash:has(+ *) { margin-bottom: 0; }

/* Supplied frame language */
.bp-panel { position: relative; min-width: 0; margin: 0 0 2rem; border: 1px solid var(--bp-rule); padding: 1rem 2ch; }
.bp-panel.bp-framed { border: 0; padding: 0; }
.bp-panel.bp-framed[data-title]::before { display: none; }
.bp-fr { display: flex; width: 100%; min-width: 0; overflow: hidden; color: var(--bp-rule); font-size: .78rem; line-height: 1; white-space: nowrap; user-select: none; }
.bp-fr i { flex: none; font-style: normal; }
.bp-fr__h { flex: 1 1 auto; overflow: hidden; }
.bp-fr__t { flex: none; padding: 0 1ch; color: var(--bp-ink-3); font-family: "Silkscreen", monospace; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; }
.bp-fr__mid { position: relative; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); padding: 0 1ch; }
.bp-fr__body { min-width: 0; padding: .9rem 1.2ch; }
.bp-fr__v { position: absolute; top: 0; bottom: 0; width: 1ch; overflow: hidden; color: var(--bp-rule); font-size: .78rem; line-height: 1.05; white-space: pre; pointer-events: none; user-select: none; }
.bp-fr__v--l { left: 0; }
.bp-fr__v--r { right: 0; }

/* Controls */
.bp-btn {
  display: inline-flex;
  min-height: 2.2rem;
  align-items: center;
  justify-content: center;
  gap: 1ch;
  border: 1px solid var(--bp-rule);
  padding: .36rem 1.25ch;
  background: var(--bp-paper);
  color: var(--bp-ink);
  cursor: pointer;
  font-size: .86rem;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.bp-btn:hover { border-color: var(--bp-ink-2); }
.bp-btn:active { transform: translateY(1px); }
.bp-btn:disabled, .is-disabled { opacity: .42; pointer-events: none; }
.bp-btn--primary { border-color: var(--bp-accent); background: var(--bp-accent); color: #fff; font-weight: 700; }
.bp-btn--primary:hover { border-color: #0d2c6b; background: #0d2c6b; }
.bp-btn--ghost { border-color: transparent; padding-inline: .75ch; color: var(--bp-ink-2); font-size: .8rem; }
.bp-btn--danger { border-color: var(--bp-err); color: var(--bp-err); }
.inp {
  width: 100%; min-height: 2.35rem; border: 1px solid var(--bp-rule); border-radius: 0;
  padding: .4rem 1ch; background: var(--bp-paper); font-size: .86rem;
}
.inp:focus { border-color: var(--bp-accent); }
.inp::placeholder { color: var(--bp-ink-3); }
.bp-pill { display: inline-block; border: 1px solid var(--bp-rule); padding: .05rem .7ch; background: var(--bp-paper-2); color: var(--bp-ink-2); font-size: .72rem; }
.bp-pill--warn { border-color: var(--bp-second); background: transparent; color: var(--bp-second); }
.kbd { display: inline-block; border: 1px solid currentColor; border-radius: 2px; padding: 0 .5ch; font-size: .7rem; font-weight: 400; line-height: 1.35; opacity: .75; }

/* Home */
.today-hero { display: grid; gap: 1rem; padding: .4rem 0 1.8rem; }
.hero-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.5ch; }
.hero-line h1, .page-hero h1 { font-size: clamp(1.45rem, 3vw, 2rem); }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr)); gap: 1.5ch; }
.deck-card { display: flex; min-height: 4.7rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; border: 1px solid var(--bp-rule); padding: .75rem 1.6ch; background: var(--bp-paper); text-align: left; }
.deck-card:hover { border-color: var(--bp-ink-2); }
.deck-card strong { font-family: "Martian Mono", monospace; font-size: .92rem; letter-spacing: -.02em; }
.deck-card small { color: var(--bp-ink-3); font-size: .76rem; }
.deck-card--main { border-color: var(--bp-accent); background: var(--bp-accent); color: #fff; }
.deck-card--main strong { font-size: 1.05rem; }
.deck-card--main small { color: #fff; opacity: .86; }
.deck-card--main:hover { border-color: #0d2c6b; background: #0d2c6b; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2ch; }
.weak-list, .stat-list { display: grid; }
.weak-row { display: grid; grid-template-columns: minmax(0, 1fr) 9ch 6ch; gap: 1ch; align-items: center; border-bottom: 1px dotted var(--bp-paper-3); padding: .3rem 0; font-size: .84rem; }
.weak-row:hover { background: var(--bp-paper-2); }
.weak-row b { color: var(--bp-ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; text-align: right; }
.weak-bar { position: relative; height: .68em; border: 1px solid var(--bp-rule); }
.weak-bar::before { position: absolute; inset: 1px auto 1px 1px; width: calc(var(--fill) - 2px); background: var(--bp-second); content: ""; }
.panel-hint { margin-top: .75rem; color: var(--bp-ink-3); font-size: .76rem; }
.stat-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1ch; border-bottom: 1px dotted var(--bp-paper-3); padding: .28rem 0; font-size: .84rem; }
.stat-list b { font-family: "Martian Mono", monospace; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.activity-label { margin: 1rem 0 .35rem; }
.activity-map { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, .58rem); gap: 2px; overflow-x: auto; padding: .2rem 0; }
.activity-cell { width: .58rem; height: .58rem; background: var(--bp-paper-3); }
.activity-cell.is-level-1 { background: color-mix(in srgb, var(--bp-accent) 26%, var(--bp-paper)); }
.activity-cell.is-level-2 { background: color-mix(in srgb, var(--bp-accent) 55%, var(--bp-paper)); }
.activity-cell.is-level-3 { background: var(--bp-accent); }
.home-library { margin-top: .8rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2ch; margin-bottom: .7rem; }
.section-heading h2 { margin-top: .2rem; font-size: 1.05rem; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr)); border-top: 1px solid var(--bp-rule); border-left: 1px solid var(--bp-rule); }
.category-card { display: grid; gap: .2rem; min-height: 6.3rem; border-right: 1px solid var(--bp-rule); border-bottom: 1px solid var(--bp-rule); padding: .8rem 1.4ch; }
.category-card:hover { background: var(--bp-paper-2); }
.category-card strong { font-family: "Martian Mono", monospace; font-size: .88rem; }
.category-card small { color: var(--bp-ink-3); font-size: .75rem; }
.category-card span { align-self: end; color: var(--bp-accent); font-size: .72rem; }

/* Shared page headers */
.page-hero { display: flex; justify-content: space-between; align-items: center; gap: 2ch; margin-bottom: 1rem; padding: .35rem 0 .8rem; border-bottom: 1px solid var(--bp-rule); }
.page-hero > div { display: grid; gap: .35rem; }
.crumbs { margin-bottom: .7rem; }

/* Phrase library */
.library-filter { display: grid; grid-template-columns: minmax(20ch, 1fr) auto auto auto; gap: 1ch; align-items: center; margin-bottom: .9rem; }
.filter-submit { min-height: 2.35rem; }
.chips { display: flex; flex-wrap: wrap; gap: .6ch; margin-bottom: .9rem; }
.chip { border: 1px solid var(--bp-rule); padding: .16rem .9ch; background: var(--bp-paper); color: var(--bp-ink-2); font-size: .78rem; white-space: nowrap; }
.chip:hover { border-color: var(--bp-ink-2); }
.chip.is-on { border-color: var(--bp-accent); background: var(--bp-accent); color: #fff; font-weight: 700; }
.library-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5ch; border-bottom: 1px solid var(--bp-rule); padding: .5rem 0 .8rem; color: var(--bp-ink-2); font-size: .8rem; }
.library-actions .bp-btn--primary { min-height: 2.15rem; padding-block: .25rem; }
.selection-all { display: inline-flex; align-items: center; gap: .7ch; cursor: pointer; }
.selection-all input, .phrase-item input { accent-color: var(--bp-accent); }
.library-found { margin-left: auto; }
.phrase-table { display: grid; }
.phrase-item { border-bottom: 1px dotted var(--bp-paper-3); }
.phrase-item > summary { display: grid; grid-template-columns: 2.2ch minmax(0, 1.15fr) 12ch 10ch; gap: 1.2ch; align-items: center; min-height: 3.2rem; padding: .4rem 0; list-style: none; cursor: pointer; }
.phrase-item > summary::-webkit-details-marker { display: none; }
.phrase-item > summary:hover, .phrase-item[open] > summary { background: var(--bp-paper-2); }
.phrase-item__main { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4ch; align-items: center; }
.phrase-item__main b, .phrase-item__main i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phrase-item__main b { font-weight: 500; }
.phrase-item__main i { color: var(--bp-accent); font-style: normal; font-weight: 600; }
.phrase-item__theme { overflow: hidden; color: var(--bp-ink-3); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.phrase-status { justify-self: end; border: 1px solid var(--bp-rule); padding: .05rem .5ch; color: var(--bp-ink-3); font-size: .66rem; white-space: nowrap; }
.phrase-status.is-known { border-color: var(--bp-ok); color: var(--bp-ok); }
.phrase-status.is-problem { border-color: var(--bp-second); color: var(--bp-second); }
.phrase-detail { display: grid; gap: .55rem; max-width: 78ch; padding: .35rem 0 1rem 3.4ch; color: var(--bp-ink-2); font-size: .82rem; }
.phrase-detail__actions { display: flex; flex-wrap: wrap; gap: 1ch; }
.pronunciation { color: var(--bp-ink-3); font-size: .78rem; }
.pager { display: flex; justify-content: center; align-items: center; gap: 1.5ch; padding: 1.2rem 0; color: var(--bp-ink-3); font-size: .82rem; }
.empty-state { display: grid; gap: .65rem; justify-items: center; padding: 2.5rem 1ch; color: var(--bp-ink-3); text-align: center; }
.empty-state strong { color: var(--bp-ink); }
.empty-state--large { min-height: 60svh; align-content: center; }

/* Topic list */
.topic-phrases { display: grid; border-top: 1px solid var(--bp-rule); }
.topic-phrase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18ch, .42fr); gap: 1.4ch 2ch; border-bottom: 1px dotted var(--bp-rule); padding: .8rem 0; }
.topic-phrase__copy { display: grid; gap: .2rem; }
.phrase-ru { font-weight: 700; }
.phrase-sr { color: var(--bp-accent); font-weight: 600; }
.topic-phrase aside { display: grid; justify-items: end; align-content: start; gap: .3rem; color: var(--bp-ink-3); font-size: .76rem; text-align: right; }

/* Review */
.app-main:has(.review-screen) { width: min(76ch, calc(100% - 4ch)); padding-top: .7rem; padding-bottom: 2rem; }
.review-screen { display: grid; grid-template-rows: auto auto auto; }
.review-progress { display: grid; grid-template-columns: minmax(12ch, 1fr) auto auto; align-items: center; gap: 1ch; border-bottom: 1px solid var(--bp-rule); padding: .35rem 0 .65rem; }
.progress-track { display: flex; min-width: 12ch; height: .55rem; gap: 2px; align-items: center; }
.progress-track i { flex: 1 1 0; height: 100%; background: var(--bp-paper-3); }
.progress-track i.is-ok { background: var(--bp-accent); }
.progress-track i.is-miss { background: var(--bp-second); }
.progress-track i.is-current { background: var(--bp-paper); box-shadow: inset 0 0 0 1px var(--bp-accent); }
.review-count { color: var(--bp-ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.undo-button { min-height: 1.75rem; padding-block: .12rem; }
.review-card-body { display: grid; align-content: start; gap: .8rem; min-width: 0; padding: 1.15rem 0 1rem; }
.review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2ch; }
.review-meta .muted { font-size: .72rem; }
.review-question { margin: .1rem 0 .25rem; font-size: clamp(1.45rem, 3.4vw, 2.2rem); line-height: 1.24; white-space: pre-wrap; }
.review-answer { position: relative; display: grid; gap: .25rem; min-height: 4.2rem; padding: .7rem 1.4ch; background: var(--bp-paper-2); }
.review-answer__serbian { color: var(--bp-accent); font-family: "Martian Mono", monospace; font-size: clamp(1.05rem, 2.3vw, 1.45rem); font-weight: 600; line-height: 1.32; white-space: pre-wrap; }
.review-answer__pronunciation { color: var(--bp-ink-2); font-size: .84rem; }
.review-answer__note { color: var(--bp-ink-3); font-size: .78rem; }
.review-answer[data-open="0"] > p { visibility: hidden; }
.review-spoiler { position: absolute; inset: 0; overflow: hidden; width: 100%; border: 0; margin: 0; padding: 0; background: var(--bp-paper-2); color: var(--bp-accent); font-family: inherit; font-size: .95rem; line-height: 1; text-align: left; white-space: pre; cursor: pointer; }
.review-answer[data-open="1"] .review-spoiler { background: transparent; }
.review-spoiler[hidden] { display: none; }
.spoiler-cue { position: absolute; bottom: 0; left: 0; z-index: 2; padding: .08rem .8ch; background: var(--bp-ink); color: var(--bp-paper); font-size: .72rem; pointer-events: none; }
.review-footer { display: grid; gap: .45rem; border-top: 1px solid var(--bp-rule); padding: .65rem 0 0; }
.reveal-button { display: flex; width: 100%; min-height: 2.75rem; align-items: center; justify-content: center; gap: 1.2ch; border: 1px solid var(--bp-ink); background: var(--bp-ink); color: var(--bp-paper); font-weight: 700; cursor: pointer; }
.grade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5ch; }
.grade-grid form { display: block; }
.grade-button { display: flex; width: 100%; min-height: 4.2rem; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; border: 1px solid; color: #fff; cursor: pointer; }
.grade-button strong { font-size: .94rem; }
.grade-button small { font-size: .68rem; font-weight: 400; }
.grade-button--miss { border-color: var(--bp-second); background: var(--bp-second); }
.grade-button--ok { border-color: var(--bp-accent); background: var(--bp-accent); }
.grade-button:disabled { opacity: .45; cursor: default; }
.review-keys { display: flex; flex-wrap: wrap; gap: 2ch; color: var(--bp-ink-3); font-size: .7rem; }
.review-screen.is-turning .review-question, .review-screen.is-turning .review-answer { opacity: .25; transform: translateY(2px); transition: opacity .16s, transform .16s; }
.review-done { display: grid; max-width: 72ch; gap: 1.5rem; margin: 0 auto; padding: 3rem 0; }
.review-done h1 { font-size: clamp(1.5rem, 4vw, 2.3rem); }
.done-score { display: flex; flex-wrap: wrap; gap: 3ch; }
.done-score > div { display: grid; }
.done-score b { font-family: "Martian Mono", monospace; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.done-score span { color: var(--bp-ink-3); }
.done-label { margin-bottom: .5rem; }
.missed-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2ch; border-bottom: 1px dotted var(--bp-paper-3); padding: .35rem 0; font-size: .84rem; }
.missed-list i { color: var(--bp-accent); font-style: normal; font-weight: 600; }
.done-actions { display: flex; flex-wrap: wrap; gap: 1.2ch; }
.done-actions form { display: inline-flex; }

/* Linked theory drawers */
.phrase-theory { display: grid; grid-column: 1 / -1; gap: .55rem; min-width: 0; margin-top: .35rem; }
.phrase-theory__header { display: flex; justify-content: space-between; align-items: center; gap: 2ch; }
.phrase-theory__count { color: var(--bp-ink-3); font-size: .7rem; }
.phrase-theory__list { display: grid; gap: .4rem; }
.theory-drawer { border: 1px dashed var(--bp-rule); }
.theory-drawer__toggle { display: grid; width: 100%; min-height: 2.8rem; grid-template-columns: 2ch minmax(0, 1fr) auto; gap: 1ch; align-items: center; border: 0; padding: .4rem 1ch; background: transparent; text-align: left; cursor: pointer; }
.theory-drawer__toggle:hover { background: var(--bp-paper-2); }
.theory-drawer__glyph { color: var(--bp-accent); }
.theory-drawer__title { display: grid; min-width: 0; }
.theory-drawer__title small { overflow: hidden; color: var(--bp-ink-3); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.theory-drawer__title strong { font-size: .78rem; }
.theory-drawer__state { color: var(--bp-ink-3); font-size: .68rem; }
.theory-drawer__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows .22s, opacity .16s; }
.theory-drawer[data-open="true"] .theory-drawer__panel { grid-template-rows: 1fr; visibility: visible; opacity: 1; }
.theory-drawer__panel-inner { min-height: 0; overflow: hidden; }
.theory-drawer__preview { max-height: min(32rem, 56svh); overflow: auto; border-top: 1px dotted var(--bp-rule); padding: .8rem 1.2ch; background: var(--bp-paper-2); }
.theory-drawer__actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1ch; border-top: 1px solid var(--bp-rule); padding: .45rem 1ch; }

/* Textbook */
.library-stack, .stack, .admin-list { display: grid; }
.library-row, .list-row, .admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5ch; align-items: center; border-bottom: 1px solid var(--bp-paper-3); padding: .7rem 0; }
.library-row:hover, .list-row:hover, .admin-row:hover { background: var(--bp-paper-2); }
.library-main { display: grid; grid-template-columns: 3.5ch minmax(0, 1fr); gap: 1.2ch; }
.library-main h2 { font-size: .95rem; }
.library-main p { grid-column: 2; color: var(--bp-ink-3); font-size: .78rem; }
.row-index { color: var(--bp-rule); font-family: "Martian Mono", monospace; font-size: 1.05rem; font-weight: 800; }
.row-actions, .admin-row nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6ch; }
.list-row span, .admin-row > span { display: grid; }
.list-row small, .admin-row small { color: var(--bp-ink-3); font-size: .76rem; }
.list-row b { color: var(--bp-ink-3); font-size: .72rem; }
.section-block { margin-top: 2rem; }
.reader-page { max-width: 72ch; }
.reader-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2ch; align-items: start; margin-bottom: 1.3rem; }
.reader-header h1 { margin-top: .25rem; font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
.reader-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5ch; max-width: 72ch; border-top: 1px solid var(--bp-rule); padding-top: .7rem; }
.favorite-toggle { display: inline-flex; margin: 0; }
.theory-favorite { display: inline-flex; min-height: 2.3rem; align-items: center; justify-content: center; gap: .7ch; border: 1px solid var(--bp-rule); padding: .35rem 1ch; background: var(--bp-paper); color: var(--bp-ink-2); cursor: pointer; }
.theory-favorite.is-saved { border-color: var(--bp-second); color: var(--bp-second); }
.theory-favorite.is-compact { min-height: 2rem; border-color: transparent; font-size: .75rem; }
.markup-body { display: grid; gap: .9rem; max-width: 72ch; color: var(--bp-ink-2); line-height: 1.65; }
.markup-body h2 { margin-top: .4rem; font-size: 1.15rem; }
.markup-body h3 { margin-top: .25rem; font-size: .95rem; }
.markup-body ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.markup-body li { position: relative; padding-left: 2ch; }
.markup-body li::before { position: absolute; left: 0; color: var(--bp-accent); content: "▸"; }
.markup-body code { padding: 0 .4ch; background: var(--bp-accent-soft); color: var(--bp-ink); }
.markup-body blockquote, .theory-note, .pattern-block, .example-pair, .self-check, .markup-label-line { border: 1px solid var(--bp-rule); padding: .65rem 1.2ch; background: var(--bp-paper-2); }
.theory-note, .pattern-block { display: grid; gap: .3rem; }
.theory-note.is-trap { border-color: var(--bp-second); background: var(--bp-second-soft); }
.theory-note > span, .pattern-block > span, .markup-label-line > span, .example-pair span { color: var(--bp-accent); font-family: "Silkscreen", monospace; font-size: .62rem; text-transform: uppercase; }
.pattern-block code { display: block; white-space: pre-wrap; }
.example-pair { display: grid; gap: 0; padding: 0; }
.example-pair p { display: grid; grid-template-columns: 4ch minmax(0, 1fr); gap: 1ch; border-bottom: 1px dotted var(--bp-rule); padding: .5rem 1.2ch; }
.example-pair p:last-child { border: 0; }
.self-check { padding: 0; }
.self-check summary { padding: .65rem 1.2ch; color: var(--bp-accent); font-weight: 700; cursor: pointer; }
.self-check p { padding: 0 1.2ch .7rem; }
.markup-label-line { display: grid; grid-template-columns: 4ch minmax(0, 1fr); gap: 1ch; }

/* Admin */
.admin-nav { display: flex; flex-wrap: wrap; gap: .7ch; margin-bottom: 1.2rem; border-bottom: 1px solid var(--bp-rule); padding-bottom: .55rem; }
.page-head { margin-bottom: 1.4rem; }
.page-head > .bp-fr__mid > .bp-fr__body { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2ch; }
.page-head h1 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr)); gap: 1.2ch; margin-bottom: 1.5rem; }
.stat-tile { margin: 0; }
.stat-tile .bp-fr__body { display: grid; gap: .25rem; }
.stat-tile strong { color: var(--bp-accent); font-family: "Martian Mono", monospace; font-size: 1.4rem; }
.admin-panel { margin-top: 1.5rem; }
.admin-row > span { min-width: 0; }
.admin-row strong, .admin-row small { overflow-wrap: anywhere; }
.admin-form { display: grid; gap: 1rem; max-width: 76ch; }
.admin-form.bp-panel .bp-fr__body { display: grid; gap: 1rem; }
.bp-field { display: grid; gap: .2rem; }
.bp-input { display: flex; align-items: center; border: 1px solid var(--bp-rule); background: var(--bp-paper); }
.bp-input > b { padding: 0 .7ch; color: var(--bp-rule); font-weight: 400; }
.bp-input:focus-within { border-color: var(--bp-accent); }
.bp-input input, .bp-input select, .bp-input textarea { width: 100%; min-width: 0; border: 0; padding: .42rem .4ch; background: transparent; outline: 0; }
.bp-input--area { align-items: stretch; }
.bp-input--area > b { padding-top: .42rem; }
.admin-form textarea, .code-input { min-height: 7rem; resize: vertical; line-height: 1.5; }
.code-input { font-size: .8rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr)); gap: 1.5ch; }
.bp-check { display: flex; align-items: center; gap: .7ch; cursor: pointer; }
.bp-check input { accent-color: var(--bp-accent); }
.bp-mark { display: none; }
.theory-picker { border: 1px dashed var(--bp-rule); padding: .8rem 1.2ch; }
.theory-picker__sections { display: grid; gap: .8rem; margin-top: .7rem; }
.theory-picker__section { display: grid; gap: .3rem; }
.theory-picker__section h3 { font-size: .8rem; }
.theory-picker__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); gap: .35rem 1ch; }
.form-errors { border-color: var(--bp-err); color: var(--bp-err); }
.button_to { margin: 0; }

@media (max-width: 820px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .library-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .library-filter .inp:first-child { grid-column: 1 / -1; }
  .phrase-item > summary { grid-template-columns: 2.2ch minmax(0, 1fr) 9ch; }
  .phrase-item__main { grid-column: 2 / 4; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .phrase-item__theme { grid-column: 2; grid-row: 2; }
  .phrase-status { grid-column: 3; grid-row: 2; }
}

@media (max-width: 620px) {
  .app-main, .flash-stack, .topbar-inner { width: min(100% - 3ch, 104ch); }
  .app-main { padding-top: 1.25rem; }
  body.bp .topbar-inner { align-items: flex-start; flex-direction: column; gap: .45rem; }
  body.bp .topnav { width: 100%; margin-left: 0; gap: .45ch 1.1ch; }
  .topnav a { padding-left: 0; font-size: .78rem; }
  .deck-grid { grid-template-columns: minmax(0, 1fr); }
  .deck-card { min-height: 4.45rem; }
  .page-hero { align-items: flex-start; flex-direction: column; }
  .page-hero .bp-btn--primary { width: 100%; }
  .library-filter { grid-template-columns: minmax(0, 1fr); }
  .library-filter .inp:first-child { grid-column: auto; }
  .filter-submit { display: none; }
  .library-actions .bp-btn--primary { order: 3; width: 100%; }
  .library-found { margin-left: 0; }
  .topic-phrase { grid-template-columns: minmax(0, 1fr); }
  .topic-phrase aside { justify-items: start; text-align: left; }
  .review-progress { grid-template-columns: minmax(0, 1fr) auto; padding-top: .15rem; }
  .undo-button { display: none; }
  .review-card-body { padding-top: .9rem; }
  .review-keys { display: none; }
  .grade-grid { gap: .7ch; }
  .grade-button { min-height: 4.5rem; padding: .45rem .5ch; }
  .grade-button strong { font-size: .82rem; }
  .missed-list > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .reader-header { grid-template-columns: minmax(0, 1fr); }
  .reader-header .favorite-toggle { justify-self: start; }
  .library-row, .list-row, .admin-row { grid-template-columns: minmax(0, 1fr); }
  .row-actions, .admin-row nav { justify-content: flex-start; }
  .admin-row nav .bp-btn { min-height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}