/* ═══════════════════════════════════════════════════════════════════
   Учебник English Grammar — КОНТЕНТ главы (дети #tb-content).
   Рендерит TextbookRenderer (assets/js/modules/textbook.js), корень — .tbc.
   Оболочку (модалка, шапка, навигация, прокрутка #tb-content) стилизует
   textbook-shell.css; здесь — только то, что внутри .tbc.
   Тема: светлая по умолчанию; тёмная — prefers-color-scheme или
   :root[data-theme="dark"] (те же селекторы, что у оболочки).
   Оттенок времени: data-g present=teal / past=amber / future=indigo / cond=rose;
   аспект: data-a s ● / c ∿ / p ✓ / pc ✓∿.
   ═══════════════════════════════════════════════════════════════════ */

.tbc {
  --tbc-surface: #FFFFFF;
  --tbc-surface-2: #F1EFF8;
  --tbc-line: #E4E1EF;
  --tbc-line-strong: #CDC8DF;
  --tbc-text: #1D1A2E;
  --tbc-muted: #5D5873;
  --tbc-ok: #23863A; --tbc-ok-ink: #1A6B2E; --tbc-ok-tint: #E6F5E9;
  --tbc-bad: #D23B3F; --tbc-bad-ink: #A82428; --tbc-bad-tint: #FDECEC;
  --tbc-end: #7048E8; --tbc-end-ink: #5F3DC4;
  --tbc-pro-bg: #FFEFC2; --tbc-pro-ink: #7A5200;
  --tbc-super-bg: #EFE9FF; --tbc-super-ink: #5130C8;
  --tbc-on-h: #FFFFFF;
  --tbc-focus: #6B3FE8;
  --tbc-sh: 0 1px 2px rgba(29, 26, 46, .05), 0 6px 16px -6px rgba(29, 26, 46, .10);
  /* оттенок по умолчанию (present) */
  --tbc-h: #0F9480; --tbc-hi: #0A6B5D;
  --tbc-r: 16px;

  container-type: inline-size;
  position: relative; /* containing block для .tbc-sr — иначе они растягивают .textbook-container */
  color: var(--tbc-text);
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 8px;
  min-width: 0;
}
.tbc[data-g="present"] { --tbc-h: #0F9480; --tbc-hi: #0A6B5D; }
.tbc[data-g="past"]    { --tbc-h: #E07B00; --tbc-hi: #9A4D00; }
.tbc[data-g="future"]  { --tbc-h: #3D5BD9; --tbc-hi: #2D45B0; }
.tbc[data-g="cond"]    { --tbc-h: #D6336C; --tbc-hi: #A61E4D; }

/* ---------- dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tbc {
    --tbc-surface: #1C1B26; --tbc-surface-2: #262433; --tbc-line: #322F42; --tbc-line-strong: #47435B;
    --tbc-text: #F2F0FA; --tbc-muted: #ABA7C0;
    --tbc-ok: #2FA14B; --tbc-ok-ink: #7FDB93; --tbc-ok-tint: #173020;
    --tbc-bad: #E5484D; --tbc-bad-ink: #FF9C9E; --tbc-bad-tint: #3A1B1E;
    --tbc-end: #9775FA; --tbc-end-ink: #C4B0FF;
    --tbc-pro-bg: #3A2E10; --tbc-pro-ink: #FFD36B;
    --tbc-super-bg: #2A2148; --tbc-super-ink: #BBA6FF;
    --tbc-on-h: #121119; --tbc-focus: #BBA6FF;
    --tbc-sh: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px -8px rgba(0, 0, 0, .5);
    --tbc-h: #2FC7AC; --tbc-hi: #72E3CE;
  }
  :root:not([data-theme="light"]) .tbc[data-g="present"] { --tbc-h: #2FC7AC; --tbc-hi: #72E3CE; }
  :root:not([data-theme="light"]) .tbc[data-g="past"]    { --tbc-h: #F59E2B; --tbc-hi: #FFC57C; }
  :root:not([data-theme="light"]) .tbc[data-g="future"]  { --tbc-h: #7B93FF; --tbc-hi: #B0BCFF; }
  :root:not([data-theme="light"]) .tbc[data-g="cond"]    { --tbc-h: #F06595; --tbc-hi: #FFA8C5; }
}
:root[data-theme="dark"] .tbc {
  --tbc-surface: #1C1B26; --tbc-surface-2: #262433; --tbc-line: #322F42; --tbc-line-strong: #47435B;
  --tbc-text: #F2F0FA; --tbc-muted: #ABA7C0;
  --tbc-ok: #2FA14B; --tbc-ok-ink: #7FDB93; --tbc-ok-tint: #173020;
  --tbc-bad: #E5484D; --tbc-bad-ink: #FF9C9E; --tbc-bad-tint: #3A1B1E;
  --tbc-end: #9775FA; --tbc-end-ink: #C4B0FF;
  --tbc-pro-bg: #3A2E10; --tbc-pro-ink: #FFD36B;
  --tbc-super-bg: #2A2148; --tbc-super-ink: #BBA6FF;
  --tbc-on-h: #121119; --tbc-focus: #BBA6FF;
  --tbc-sh: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px -8px rgba(0, 0, 0, .5);
  --tbc-h: #2FC7AC; --tbc-hi: #72E3CE;
}
:root[data-theme="dark"] .tbc[data-g="present"] { --tbc-h: #2FC7AC; --tbc-hi: #72E3CE; }
:root[data-theme="dark"] .tbc[data-g="past"]    { --tbc-h: #F59E2B; --tbc-hi: #FFC57C; }
:root[data-theme="dark"] .tbc[data-g="future"]  { --tbc-h: #7B93FF; --tbc-hi: #B0BCFF; }
:root[data-theme="dark"] .tbc[data-g="cond"]    { --tbc-h: #F06595; --tbc-hi: #FFA8C5; }

/* ---------- base reset внутри .tbc ---------- */
.tbc *, .tbc *::before, .tbc *::after { box-sizing: border-box; }
.tbc p, .tbc h3, .tbc h4, .tbc ul, .tbc ol { margin: 0; padding: 0; }
.tbc ul, .tbc ol { list-style: none; }
.tbc button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tbc :focus-visible { outline: 3px solid var(--tbc-focus); outline-offset: 2px; }
.tbc-ic { width: 20px; height: 20px; flex: none; }
.tbc-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- PRO / SUPER видимость (классы ставит setMode на контейнер) ---------- */
.textbook-container:not(.pro-mode-active) .tbc .tbc-pro,
.textbook-container:not(.super-mode-active) .tbc .tbc-super { display: none !important; }
.textbook-container.pro-mode-active .tbc .tbc-more { display: none; }
.textbook-container.pro-mode-active .tbc .tbc-pro,
.textbook-container.super-mode-active .tbc .tbc-super { animation: tbcIn .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes tbcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tbc-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px;
  font-size: .6875rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; flex: none;
}
.tbc-badge--pro { background: var(--tbc-pro-bg); color: var(--tbc-pro-ink); }
.tbc-badge--super { background: var(--tbc-super-bg); color: var(--tbc-super-ink); }

/* ---------- section heads & cards ---------- */
.tbc-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tbc-h {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.125rem; font-weight: 900; line-height: 1.25; letter-spacing: -.01em; color: var(--tbc-text);
}
.tbc-h-ic {
  width: 32px; height: 32px; padding: 6px; border-radius: 10px; flex: none;
  background: color-mix(in oklab, var(--tbc-h) 14%, var(--tbc-surface)); color: var(--tbc-hi);
}
.tbc-card {
  background: var(--tbc-surface);
  border: 1px solid var(--tbc-line);
  border-radius: var(--tbc-r);
  box-shadow: var(--tbc-sh);
  padding: 16px;
  min-width: 0;
}

/* ---------- HERO ---------- */
.tbc-hero {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 16px 14px;
  border-radius: 20px;
  background: color-mix(in oklab, var(--tbc-h) 9%, var(--tbc-surface));
  border: 1px solid color-mix(in oklab, var(--tbc-h) 24%, var(--tbc-surface));
  overflow: hidden;
}
.tbc-hero::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--tbc-h);
}
.tbc-hero-top { display: flex; align-items: center; gap: 12px; }
.tbc-glyph {
  width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: color-mix(in oklab, var(--tbc-h) 24%, var(--tbc-surface)); color: var(--tbc-hi);
  font-weight: 900; font-size: 1.25rem; letter-spacing: -.06em;
}
.tbc-hero-names { min-width: 0; }
.tbc-hero-ru { font-size: 1.0625rem; font-weight: 900; line-height: 1.25; color: var(--tbc-text); }
.tbc-hero-asp { font-size: .875rem; font-weight: 700; color: var(--tbc-muted); }
.tbc-summary { font-size: 1.0625rem; font-weight: 700; line-height: 1.45; color: var(--tbc-text); }
.tbc-formula-text { font-size: 1.25rem; font-weight: 900; color: var(--tbc-hi); }

/* ---------- formula chips ---------- */
.tbc-formula { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tbc-fline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--tbc-surface-2);
  min-width: 0;
}
.tbc-formula--hero .tbc-fline { background: var(--tbc-surface); padding: 12px; gap: 8px 6px; }
.tbc-chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 4px 10px; border-radius: 10px;
  font-weight: 800; font-size: 1rem; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere;
  border: 2px solid transparent;
}
.tbc-formula--hero .tbc-chip { font-size: 1.125rem; min-height: 40px; padding: 6px 12px; }
.tbc-chip--subject { background: var(--tbc-surface); color: var(--tbc-text); border-color: var(--tbc-line-strong); }
.tbc-formula--hero .tbc-chip--subject { background: var(--tbc-surface-2); }
.tbc-chip--aux {
  background: color-mix(in oklab, var(--tbc-h) 8%, var(--tbc-surface)); color: var(--tbc-hi);
  border-style: dashed; border-color: color-mix(in oklab, var(--tbc-h) 60%, var(--tbc-surface));
}
.tbc-chip--verb {
  background: color-mix(in oklab, var(--tbc-h) 24%, var(--tbc-surface)); color: var(--tbc-hi);
  border-color: color-mix(in oklab, var(--tbc-h) 45%, var(--tbc-surface)); font-weight: 900;
}
.tbc-chip--ending {
  background: color-mix(in oklab, var(--tbc-end) 14%, var(--tbc-surface)); color: var(--tbc-end-ink);
  border-color: color-mix(in oklab, var(--tbc-end) 55%, var(--tbc-surface)); border-style: dashed; font-weight: 900;
}
.tbc-pair { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
@container (max-width: 420px) {
  .tbc-card { padding: 12px; }
  .tbc-fline { padding: 8px 6px; gap: 6px 2px; }
  .tbc-builder .tbc-chip { font-size: .9375rem; padding: 3px 6px; min-height: 32px; border-radius: 8px; }
  .tbc-builder .tbc-chip--ending { padding: 3px 5px; }
  .tbc-plus { padding: 0; font-size: .875rem; }
}
.tbc-plus { color: var(--tbc-muted); font-weight: 900; padding: 0 1px; }
.tbc-punct { color: var(--tbc-muted); font-weight: 900; font-size: 1.25rem; padding: 0 2px; }

.tbc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8125rem; font-weight: 700; color: var(--tbc-muted); }
.tbc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tbc-dot { width: 12px; height: 12px; border-radius: 4px; border: 2px solid; flex: none; }
.tbc-dot--subject { border-color: var(--tbc-line-strong); background: var(--tbc-surface); }
.tbc-dot--aux { border-style: dashed; border-color: color-mix(in oklab, var(--tbc-h) 60%, var(--tbc-surface)); }
.tbc-dot--verb { border-color: color-mix(in oklab, var(--tbc-h) 45%, var(--tbc-surface)); background: color-mix(in oklab, var(--tbc-h) 24%, var(--tbc-surface)); }
.tbc-dot--ending { border-style: dashed; border-color: var(--tbc-end); background: color-mix(in oklab, var(--tbc-end) 14%, var(--tbc-surface)); }

.tbc-rule {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .9375rem; font-weight: 700; line-height: 1.45; color: var(--tbc-text);
}
.tbc-rule .tbc-ic { color: var(--tbc-hi); margin-top: 1px; }

/* timeline */
.tbc-tl { display: block; width: 100%; max-width: 440px; height: auto; margin: 2px auto 0; overflow: visible; }
.tbc-tl-axis { stroke: var(--tbc-line-strong); stroke-width: 2; stroke-linecap: round; }
.tbc-tl-now { stroke: var(--tbc-muted); stroke-width: 2; stroke-linecap: round; }
.tbc-tl-ref { stroke: var(--tbc-hi); stroke-width: 2; stroke-dasharray: 3 3; }
.tbc-tl-dot { fill: var(--tbc-h); }
.tbc-tl-mark { stroke: var(--tbc-h); }
.tbc-tl-t { fill: var(--tbc-muted); font-size: 12px; font-weight: 700; font-family: inherit; }
.tbc-tl-t--now { fill: var(--tbc-text); font-weight: 900; }

/* ---------- usage cards ---------- */
.tbc-use-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@container (min-width: 600px) { .tbc-use-grid { grid-template-columns: 1fr 1fr; } }
.tbc-use { display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--tbc-h); }
.tbc-use.tbc-pro { border-left-color: #E5A400; }
.tbc-use.tbc-super { border-left-color: var(--tbc-super-ink); }
.tbc-use-head { display: flex; align-items: center; gap: 10px; }
.tbc-use-head h4 { font-size: 1.0625rem; font-weight: 900; line-height: 1.25; color: var(--tbc-text); flex: 1; min-width: 0; }
.tbc-use-ic {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: color-mix(in oklab, var(--tbc-h) 12%, var(--tbc-surface)); font-size: 1.125rem; line-height: 1;
}
.tbc-use-desc { font-size: .9375rem; font-weight: 600; color: var(--tbc-muted); line-height: 1.45; }
.tbc-more {
  font-size: .875rem; font-weight: 800; color: var(--tbc-pro-ink);
  background: var(--tbc-pro-bg); border-radius: 10px; padding: 8px 12px; align-self: flex-start;
}

/* ---------- example line ---------- */
.tbc-ex {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px 10px 8px; border-radius: 12px;
  background: var(--tbc-surface-2);
}
.tbc-ex--boxed { margin-top: 12px; }
.tbc-ex-body { min-width: 0; flex: 1; padding-top: 6px; }
.tbc-ex-en { font-size: 1.0625rem; font-weight: 800; line-height: 1.4; color: var(--tbc-text); overflow-wrap: anywhere; }
.tbc-ex-ru { font-size: .875rem; font-weight: 600; color: var(--tbc-muted); margin-top: 2px; }
.tbc-v { color: var(--tbc-hi); font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--tbc-h) 55%, transparent); }
.tbc-m {
  background: color-mix(in oklab, var(--tbc-h) 16%, var(--tbc-surface)); color: var(--tbc-text);
  border-radius: 6px; padding: 0 .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  font-weight: 800;
}
.tbc-say {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  color: var(--tbc-hi); background: var(--tbc-surface);
  border: 1px solid color-mix(in oklab, var(--tbc-h) 30%, var(--tbc-surface));
  transition: transform .15s, background-color .15s;
}
.tbc-say .tbc-ic { width: 20px; height: 20px; }
.tbc-say:active { transform: scale(.94); }
.tbc-say.is-speaking { background: var(--tbc-h); color: var(--tbc-on-h); border-color: var(--tbc-h); }
@media (hover: hover) { .tbc-say:hover { background: color-mix(in oklab, var(--tbc-h) 12%, var(--tbc-surface)); } }

/* ---------- form builder (+ / − / ?) ---------- */
.tbc-builder { display: flex; flex-direction: column; gap: 12px; }
.tbc-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
  border-radius: 14px; background: var(--tbc-surface-2);
}
.tbc-seg-btn {
  min-height: 44px; border-radius: 10px; padding: 4px 6px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .875rem; font-weight: 800; color: var(--tbc-muted);
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.tbc-seg-sign {
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none;
  font-weight: 900; font-size: 1rem; line-height: 1;
  background: color-mix(in oklab, var(--tbc-h) 12%, var(--tbc-surface)); color: var(--tbc-hi);
}
.tbc-seg-btn[aria-selected="true"] { background: var(--tbc-surface); color: var(--tbc-text); box-shadow: var(--tbc-sh); }
.tbc-seg-btn[aria-selected="true"] .tbc-seg-sign { background: var(--tbc-h); color: var(--tbc-on-h); }
@container (max-width: 440px) {
  .tbc-seg-btn { flex-direction: column; gap: 2px; min-height: 52px; font-size: .8125rem; }
}
.tbc-form-panel { display: flex; flex-direction: column; gap: 10px; animation: tbcIn .25s ease; }
.tbc-form-panel[hidden] { display: none; }

/* conditionals: clauses */
.tbc-clause { display: flex; flex-direction: column; gap: 6px; }
.tbc-clause-label { font-size: .8125rem; font-weight: 800; color: var(--tbc-muted); letter-spacing: .02em; text-transform: uppercase; }
.tbc-join { display: flex; justify-content: center; color: var(--tbc-muted); font-weight: 900; margin: -4px 0; }
.tbc-join span {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px;
  background: var(--tbc-surface-2); line-height: 1;
}

/* ---------- markers ---------- */
.tbc-markers { display: flex; flex-wrap: wrap; gap: 8px; }
.tbc-markers li {
  padding: 6px 12px; border-radius: 999px; background: var(--tbc-surface);
  border: 2px solid color-mix(in oklab, var(--tbc-h) 45%, var(--tbc-surface));
  color: var(--tbc-hi); font-weight: 800; font-size: .9375rem; line-height: 1.3;
}
.tbc-note { font-size: .9375rem; font-weight: 600; color: var(--tbc-muted); }

/* ---------- traps ---------- */
.tbc-traps { display: grid; grid-template-columns: 1fr; gap: 10px; }
@container (min-width: 600px) { .tbc-traps { grid-template-columns: 1fr 1fr; } }
.tbc-trap {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  background: var(--tbc-surface); border: 1px solid var(--tbc-line); border-radius: 14px; box-shadow: var(--tbc-sh);
  min-width: 0;
}
.tbc-trap-bad, .tbc-trap-ok { display: flex; gap: 8px; align-items: flex-start; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.tbc-trap-ic { width: 22px; height: 22px; padding: 3px; border-radius: 7px; flex: none; margin-top: 1px; }
.tbc-trap-bad { color: var(--tbc-bad-ink); }
.tbc-trap-bad s { text-decoration-thickness: 2px; text-decoration-color: color-mix(in oklab, var(--tbc-bad) 70%, transparent); }
.tbc-trap-bad .tbc-trap-ic { background: var(--tbc-bad-tint); color: var(--tbc-bad-ink); }
.tbc-trap-ok { color: var(--tbc-ok-ink); }
.tbc-trap-ok .tbc-trap-ic { background: var(--tbc-ok-tint); color: var(--tbc-ok-ink); }
.tbc-trap-note { font-size: .875rem; font-weight: 600; color: var(--tbc-muted); padding-left: 30px; }

/* ---------- compare ---------- */
.tbc-cmp { display: flex; flex-direction: column; gap: 12px; border-left: 4px solid #E5A400; }
.tbc-cmp-grid { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: stretch; }
@container (min-width: 600px) { .tbc-cmp-grid { grid-template-columns: 1fr auto 1fr; } }
.tbc-cmp-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tbc-cmp-label { font-size: .8125rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: var(--tbc-hi); }
.tbc-cmp-side--b .tbc-cmp-label { color: var(--tbc-muted); }
.tbc-vs { align-self: center; justify-self: center; font-weight: 900; font-size: .8125rem; color: var(--tbc-muted);
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; background: var(--tbc-surface-2); }

/* ---------- quiz ---------- */
.tbc-qs { display: flex; flex-direction: column; gap: 12px; }
.tbc-q {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--tbc-surface); border: 1px solid var(--tbc-line); border-radius: 16px; box-shadow: var(--tbc-sh);
}
.tbc-q-text { display: flex; gap: 10px; align-items: baseline; font-size: 1.0625rem; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.tbc-q-n {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: inline-grid; place-items: center; align-self: flex-start;
  background: color-mix(in oklab, var(--tbc-h) 14%, var(--tbc-surface)); color: var(--tbc-hi); font-size: .875rem; font-weight: 900;
}
.tbc-q-s { min-width: 0; flex: 1; }
.tbc-gap { display: inline-block; position: relative; width: 3em; height: 1em; border-bottom: 3px solid var(--tbc-h); vertical-align: -2px; }
.tbc-gap.is-filled {
  width: auto; height: auto; vertical-align: baseline; padding: 0 4px; border-radius: 6px 6px 0 0;
  color: var(--tbc-ok-ink); border-bottom-color: var(--tbc-ok); background: var(--tbc-ok-tint);
}
.tbc-q-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tbc-opt {
  flex: 1 1 auto; min-width: 30%; min-height: 44px; padding: 8px 12px; border-radius: 12px;
  background: var(--tbc-surface); border: 2px solid var(--tbc-line-strong); color: var(--tbc-text);
  font-weight: 800; font-size: 1rem; line-height: 1.25; text-align: center;
  transition: border-color .15s, background-color .15s, transform .1s;
}
.tbc-opt:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) { .tbc-opt:hover:not(:disabled) { border-color: var(--tbc-h); } }
.tbc-opt:disabled { cursor: default; opacity: 1; }
.tbc-q.is-done .tbc-opt:not(.is-right):not(.is-wrong) { color: var(--tbc-muted); border-color: var(--tbc-line); }
.tbc-opt.is-right { background: var(--tbc-ok-tint); border-color: var(--tbc-ok); color: var(--tbc-ok-ink); }
.tbc-opt.is-wrong { background: var(--tbc-bad-tint); border-color: var(--tbc-bad); color: var(--tbc-bad-ink); animation: tbcShake .35s; }
@keyframes tbcShake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.tbc-q-fb { font-size: .9375rem; font-weight: 600; line-height: 1.45; color: var(--tbc-text); padding: 8px 12px; border-radius: 10px; }
.tbc-q.is-ok .tbc-q-fb { background: var(--tbc-ok-tint); }
.tbc-q.is-ok .tbc-q-fb b { color: var(--tbc-ok-ink); }
.tbc-q.is-bad .tbc-q-fb { background: var(--tbc-bad-tint); }
.tbc-q.is-bad .tbc-q-fb b { color: var(--tbc-bad-ink); }
.tbc-q-fb[hidden], .tbc-q-result[hidden] { display: none; }
.tbc-q-result {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 14px; background: var(--tbc-surface-2);
}
.tbc-q-result.is-perfect { background: var(--tbc-ok-tint); }
.tbc-q-score { font-weight: 900; font-size: 1rem; }
.tbc-q-result.is-perfect .tbc-q-score { color: var(--tbc-ok-ink); }
.tbc-q-retry {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px;
  background: var(--tbc-surface); border: 2px solid var(--tbc-line-strong); font-weight: 800;
}

/* ---------- error ---------- */
.tbc-error { padding: 20px; border-radius: 16px; background: var(--tbc-bad-tint); color: var(--tbc-text); gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  .tbc *, .tbc *::before, .tbc *::after { animation: none !important; transition: none !important; }
}