/* Verbault Quiet Scholarship - Reader destination styles.
   Scope: .verbault-reader root. Tokens: var(--vb-*) only.
   See: docs/superpowers/specs/2026-05-18-design-system-C-reader-design.md */

/* Section 1: Reader root + container baseline */
.verbault-reader.vb-reader-card {
  background: var(--vb-bg-page);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-lg);
  padding: var(--vb-space-6);
  margin: 0 auto;
  max-width: min(100%, 980px);
  font-family: var(--vb-font-sans);
  color: var(--vb-text-primary);
  overflow: visible;
}

.verbault-reader .vb-reader-app {
  display: flex;
  flex-direction: column;
  gap: var(--vb-space-4);
}

/* Section 2: Reader head + title + upload */
.verbault-reader .vb-reader-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vb-space-3);
  padding-bottom: var(--vb-space-3);
  border-bottom: 0.5px solid var(--vb-border);
}

.verbault-reader .vb-reader-head > div:first-child {
  flex: 1 1 0;
  min-width: 0;
}

.verbault-reader .vb-reader-head > .vb-reader-tts-badge {
  flex: 0 0 auto;
  align-self: flex-start;
}

.vb-reader-save-mybook {
  flex: none; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--vb-border, #d8d2c4); background: var(--vb-surface, #fff);
  color: var(--vb-text-primary, #2a2a2a); font-size: 13px; font-weight: 600; cursor: pointer;
  align-self: flex-start;
}
.vb-reader-save-mybook:hover { background: var(--vb-surface-hover, #f3efe6); }
.vb-reader-save-mybook[hidden] { display: none; }
.vb-reader-save-mybook.is-saved { opacity: .6; cursor: default; }

.verbault-reader .vb-reader-title {
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-2xl);
  font-weight: 500;
  color: var(--vb-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.verbault-reader .vb-reader-upload {
  display: flex;
  align-items: center;
  gap: var(--vb-space-2);
  flex-wrap: wrap;
}

.verbault-reader .vb-reader-file {
  display: inline-flex;
  align-items: center;
  gap: var(--vb-space-2);
}

.verbault-reader .vb-reader-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.verbault-reader .vb-reader-file-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--vb-space-2) var(--vb-space-4);
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
  border: 0.5px solid var(--vb-aubergine);
  border-radius: var(--vb-radius-md);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  cursor: pointer;
  transition: background-color var(--vb-dur-fast) var(--vb-ease);
}

.verbault-reader .vb-reader-file-btn:hover {
  background: color-mix(in srgb, var(--vb-aubergine), black 18%);
}

.verbault-reader .vb-reader-file-name {
  font-size: var(--vb-text-sm);
  color: var(--vb-text-secondary);
}

/* Section 3: Upload row */
.verbault-reader .vb-reader-upload-row {
  display: flex;
  align-items: center;
  gap: var(--vb-space-2);
  flex-wrap: nowrap;
  padding: var(--vb-space-2) var(--vb-space-3);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-md);
  background: var(--vb-bg-page);
}

.verbault-reader .vb-reader-upload-row .vb-reader-file {
  display: inline-flex;
  align-items: center;
  gap: var(--vb-space-3);
  flex: 1 1 auto;
  min-width: 0;
}

/* TTS 상태 배지는 업로드 행 오른쪽 끝에 고정 (제목 아래에서 이동). */
.verbault-reader .vb-reader-upload-row > .vb-reader-tts-badge {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

/* Section 4: Voice picker */
.verbault-reader .vb-reader-voice-group {
  display: inline-flex;
  align-items: center;
  gap: var(--vb-space-1);
  padding: 2px;
  background: var(--vb-bg-page);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-md);
}

.verbault-reader .vb-reader-voice-btn {
  padding: var(--vb-space-1) var(--vb-space-3);
  background: transparent;
  color: var(--vb-text-secondary);
  border: 0;
  border-radius: var(--vb-radius-sm);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  cursor: pointer;
  transition: background-color var(--vb-dur-fast) var(--vb-ease), color var(--vb-dur-fast) var(--vb-ease);
}

.verbault-reader .vb-reader-voice-btn[aria-pressed="true"] {
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
}

.verbault-reader .vb-reader-voice-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Section 5: Meta + status */
.verbault-reader .vb-reader-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vb-space-3);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  color: var(--vb-text-secondary);
}

.verbault-reader .vb-reader-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--vb-space-1);
}

/* Section 5a: Chapter navigation (pill + popup) — sticky at viewport top */
.verbault-reader .vb-reader-chapter-nav {
  position: sticky;
  top: var(--vb-nav-h, 64px);
  z-index: 30;
  background: var(--vb-bg-page);
  display: flex;
  align-items: center;
  gap: var(--vb-space-2);
  margin: 0 calc(-1 * var(--vb-space-6)) var(--vb-space-2);
  padding: var(--vb-space-2) var(--vb-space-6);
  border-bottom: 1px solid var(--vb-border);
}

.verbault-reader .vb-reader-chapter-nav[hidden] {
  display: none;
}

.verbault-reader .vb-reader-chapter-arrow {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--vb-bg-page);
  color: var(--vb-text-secondary);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-full);
  cursor: pointer;
  transition: background-color var(--vb-dur-fast) var(--vb-ease),
              color var(--vb-dur-fast) var(--vb-ease),
              border-color var(--vb-dur-fast) var(--vb-ease);
}
.verbault-reader .vb-reader-chapter-arrow:hover:not(:disabled) {
  background: var(--vb-aubergine-soft);
  color: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
}
.verbault-reader .vb-reader-chapter-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 북마크 버튼 — chapter-arrow 톤 공유 + 카운트 배지 */
.verbault-reader .vb-reader-bookmark-btn {
  position: relative;
}
.verbault-reader .vb-reader-bookmark-btn[aria-pressed="true"] {
  background: var(--vb-aubergine-soft);
  color: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
}
.verbault-reader .vb-reader-bookmark-btn[aria-pressed="true"] svg {
  fill: currentColor;
}
.verbault-reader .vb-reader-bookmark-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent, #fff);
  font-family: var(--vb-font-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--vb-radius-full);
}
.verbault-reader .vb-reader-bookmark-count[hidden] {
  display: none;
}

.verbault-reader .vb-reader-chapter-pill {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--vb-space-2) var(--vb-space-4);
  background: var(--vb-bg-page);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-md);
  color: var(--vb-text-primary);
  font-family: var(--vb-font-sans);
  cursor: pointer;
  transition: background-color var(--vb-dur-fast) var(--vb-ease),
              border-color var(--vb-dur-fast) var(--vb-ease);
}
.verbault-reader .vb-reader-chapter-pill:hover,
.verbault-reader .vb-reader-chapter-pill[aria-expanded="true"] {
  background: var(--vb-aubergine-soft);
  border-color: var(--vb-aubergine);
}

.verbault-reader .vb-reader-chapter-pill__title {
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-lg);
  font-weight: 500;
  color: var(--vb-text-primary);
  line-height: 1.2;
}

.verbault-reader .vb-reader-chapter-pill__meta {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vb-text-tertiary);
}

.verbault-reader .vb-reader-chapter-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 36px;
  right: 36px;
  z-index: 60;
  max-height: 360px;
  overflow-y: auto;
  background: var(--vb-bg-page);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.verbault-reader .vb-reader-chapter-popup[hidden] {
  display: none;
}

.verbault-reader .vb-reader-chapter-popup ul {
  list-style: none;
  margin: 0;
  padding: var(--vb-space-1) 0;
}

.verbault-reader .vb-reader-chapter-popup li {
  display: flex;
  align-items: baseline;
  gap: var(--vb-space-3);
  padding: var(--vb-space-2) var(--vb-space-4);
  cursor: pointer;
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  color: var(--vb-text-primary);
  transition: background-color var(--vb-dur-fast) var(--vb-ease);
}
.verbault-reader .vb-reader-chapter-popup li:hover {
  background: var(--vb-aubergine-soft);
}
.verbault-reader .vb-reader-chapter-popup li[aria-current="true"] {
  background: var(--vb-aubergine-soft);
  color: var(--vb-aubergine);
  font-weight: 500;
}
.verbault-reader .vb-reader-chapter-popup li .num {
  flex: 0 0 24px;
  color: var(--vb-text-tertiary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.verbault-reader .vb-reader-chapter-popup li.vb-reader-popup-empty {
  color: var(--vb-text-tertiary);
  cursor: default;
  justify-content: center;
}
.verbault-reader .vb-reader-chapter-popup li .ch-page {
  margin-left: auto;
  opacity: .65;
  font-size: .85em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Section 6: Reading canvas + sentences + words */
.verbault-reader .vb-reader-content {
  font-family: var(--vb-font-serif);
  /* --vb-reader-font-scale 는 #reader-content 에 인라인으로 세팅(JS), 기본 1.
     모바일 override(아래 @media 720px)에도 동일 곱을 적용해야 스케일이 먹는다. */
  font-size: calc(var(--vb-text-reading) * var(--vb-reader-font-scale, 1));
  line-height: 1.7;
  color: var(--vb-text-primary);
  background: var(--vb-bg-page);
  padding: var(--vb-space-5) var(--vb-space-4);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-md);
}
/* 다크모드 본문만 밝기를 살짝 낮춤 (#F0E9DC → #D8D1C3, 두 단계 다운). 헤더/네비 등 전역 텍스트는 그대로. */
:root[data-theme="dark"] .verbault-reader .vb-reader-content {
  color: var(--vb-reader-dark-text, #D8D1C3);
}

.verbault-reader .vb-reader-empty {
  color: var(--vb-text-tertiary);
  font-style: italic;
  text-align: center;
  padding: var(--vb-space-6) 0;
}

.verbault-reader .vb-reader-paragraph {
  margin: 0 0 var(--vb-space-4) 0;
}

.verbault-reader .vb-reader-paragraph:last-child {
  margin-bottom: 0;
}

.verbault-reader .vb-reader-sentence {
  display: inline;
  border-radius: 2px;
  transition: background-color 160ms ease;
  cursor: pointer;
}

/* 북마크/저장 문장 — 호박색 형광펜 배경 + 왼쪽 3px 엣지. inline span 이라
   기본(slice) 동작: 배경은 줄바꿈 전체에 깔리고 border-left 는 시작점에만 1회. */
.verbault-reader .vb-reader-sentence--bookmarked {
  background: var(--hl-bookmark-bg);
  color: var(--hl-bookmark-text);
  border-left: 3px solid var(--hl-bookmark-edge);
  padding-left: var(--vb-space-2);
}

/* 낭독 중(활성) 문장 — 부드러운 보라. 북마크 뒤에 선언해 배경/텍스트는 덮되,
   border-left 는 미설정이라 북마크 엣지가 활성 중에도 유지된다. */
.verbault-reader .vb-reader-sentence--active {
  background: var(--hl-speaking-bg);
  color: var(--hl-speaking-text);
}

.verbault-reader .vb-reader-token {
  border-radius: 4px;
}

.verbault-reader .vb-reader-sentence--active .vb-reader-token {
  cursor: pointer;
}

.verbault-reader .vb-reader-word {
  border-radius: 4px;
  /* padding 은 hard-레벨/flash/hover 배경의 breathing room 용. 단, 음수 margin 으로
     레이아웃 advance 를 상쇄해 본문 단어 간격이 일정하고 구두점 앞 가짜 공백
     ("sailor ," 처럼 보이던 현상) 이 생기지 않게 한다 (배경만 텍스트 밖으로 확장). */
  padding: 0 3px;
  margin: 0 -3px;
  cursor: pointer;
  transition: background 0.15s;
}

/* Vocab "Open in Reader" 진입 시 대상 단어 강조 — 2.4s 후 자동 해제. */
.verbault-reader .vb-reader-word--flash {
  background: var(--vb-aubergine-soft, rgba(120, 88, 140, 0.22));
  border-radius: 3px;
  padding: 0 2px;
  animation: vb-reader-word-flash 2.4s ease-out;
}
@keyframes vb-reader-word-flash {
  0%   { background: var(--vb-ember, #d97757); color: var(--vb-text-on-accent, #fff); }
  20%  { background: var(--vb-ember, #d97757); color: var(--vb-text-on-accent, #fff); }
  100% { background: transparent; color: inherit; }
}

/* Section 6a: CEFR 밴드별 단어 표시 — Settings 의 "CEFR level highlight" 밴드
   체크에 연동. #reader-content 는 applyDefaultsToReader() 가 reader-cefr-{band}
   클래스를 토글하므로, 체크된 밴드의 단어만 밑줄이 그어진다 (컨테이너 클래스
   게이팅 → 설정 변경 시 재렌더 없이 즉시 반영). 색 = tier 색조(A=sage·B=ember·
   C=brick), sub-band = 점선(·1)/실선(·2) → 6밴드 모두 시각적으로 구분. */
.verbault-reader .vb-reader-content.reader-cefr-A1 .vb-reader-word[data-cefr-band="A1"] {
  text-decoration: underline dotted var(--vb-sage);
  text-underline-offset: 3px;
}
.verbault-reader .vb-reader-content.reader-cefr-A2 .vb-reader-word[data-cefr-band="A2"] {
  text-decoration: underline solid var(--vb-sage);
  text-underline-offset: 3px;
}
.verbault-reader .vb-reader-content.reader-cefr-B1 .vb-reader-word[data-cefr-band="B1"] {
  text-decoration: underline dotted var(--vb-ember);
  text-underline-offset: 3px;
}
.verbault-reader .vb-reader-content.reader-cefr-B2 .vb-reader-word[data-cefr-band="B2"] {
  text-decoration: underline solid var(--vb-ember);
  text-underline-offset: 3px;
}
.verbault-reader .vb-reader-content.reader-cefr-C1 .vb-reader-word[data-cefr-band="C1"] {
  text-decoration: underline dotted var(--vb-danger);
  text-underline-offset: 3px;
}
.verbault-reader .vb-reader-content.reader-cefr-C2 .vb-reader-word[data-cefr-band="C2"] {
  text-decoration: underline solid var(--vb-danger);
  text-underline-offset: 3px;
}

/* Section 6a: Drop-cap on first paragraph of each chapter */
.verbault-reader .vb-reader-content .vb-reader-paragraph:first-of-type::first-letter {
  font-family: var(--vb-font-serif);
  font-size: 4em;
  line-height: 0.85;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--vb-aubergine);
  font-weight: 500;
}

/* Section 7: Translation chip + translation line */
.verbault-reader .vb-reader-translate-chip {
  display: none;
  align-items: center;
  margin-left: var(--vb-space-1);
  padding: 0 var(--vb-space-2);
  background: var(--vb-aubergine-soft);
  color: var(--vb-aubergine);
  border: 0.5px solid var(--vb-aubergine);
  border-radius: var(--vb-radius-full);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--vb-dur-fast) var(--vb-ease);
}

/* ko 칩: translate-mode 에서 "하이라이트된(활성) 문장" 에만 노출 (활성 문장은
   고정 탭으로 렌더 — 아래 §265 블록). 비활성 문장의 번역은 translation-line 이
   유지하므로 칩을 숨겨도 번역이 사라지지 않는다(collapse 는 문장 재탭으로).
   ⚠ 이전엔 data-state open/loading/error 를 비활성에서도 inline 표시했는데, 그것이
   탭마다 inline 폭을 토글해 직전 문장 칩이 사라질 때 다음 문장을 왼쪽으로 당기는
   reflow(단어 점프) 의 일부였다 → 비활성 inline 표시 제거(§265). */
.verbault-reader .vb-reader-content.translate-mode .vb-reader-sentence--active .vb-reader-translate-chip {
  display: inline-flex;
}

.verbault-reader .vb-reader-translate-chip[data-state="error"] {
  color: var(--vb-ember);
  border-color: var(--vb-ember);
  background: color-mix(in srgb, var(--vb-ember) 12%, transparent);
}

.verbault-reader .vb-reader-translation-line {
  display: block;
  margin: var(--vb-space-1) 0 var(--vb-space-3) var(--vb-space-5);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-base);
  font-style: italic;
  color: var(--vb-text-primary);
  line-height: 1.6;
}

/* Section 8: TTS badge + loading overlay */
.verbault-reader .vb-reader-tts-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vb-space-1);
  padding: 2px var(--vb-space-2);
  background: var(--vb-bg-page);
  color: var(--vb-text-secondary);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-full);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
}

.verbault-reader .vb-reader-tts-badge--ok {
  background: color-mix(in srgb, var(--vb-sage) 12%, transparent);
  color: var(--vb-sage);
  border-color: var(--vb-sage);
}

.verbault-reader .vb-reader-tts-badge--warn {
  background: color-mix(in srgb, var(--vb-ember) 12%, transparent);
  color: var(--vb-ember);
  border-color: var(--vb-ember);
}

.vb-reader-tts-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--vb-ink) 60%, transparent);
  z-index: 1000;
}

.vb-reader-tts-overlay--open {
  display: flex;
}

.vb-reader-tts-overlay__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vb-space-3);
  padding: var(--vb-space-6) var(--vb-space-8);
  background: var(--vb-bg-page);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-lg);
  width: min(440px, calc(100vw - 32px));
  min-width: 320px;
  text-align: center;
}

.vb-reader-tts-overlay__title {
  font-family: var(--vb-font-serif);
  font-size: var(--vb-text-lg);
  color: var(--vb-text-primary);
  margin: 0;
}

.vb-reader-tts-overlay__message {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  color: var(--vb-text-secondary);
}

.vb-reader-tts-overlay__cancel {
  padding: var(--vb-space-2) var(--vb-space-4);
  background: transparent;
  color: var(--vb-text-secondary);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-md);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  cursor: pointer;
  transition: background-color var(--vb-dur-fast) var(--vb-ease);
}

.vb-reader-tts-overlay__cancel:hover {
  background: var(--vb-aubergine-soft);
  color: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
}

/* Section 9: Reader handoff bar */
.verbault-reader .vb-reader-handoff-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vb-space-2);
  margin: var(--vb-space-3) 0;
}

.verbault-reader .vb-reader-handoff-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vb-space-2);
  padding: var(--vb-space-2) var(--vb-space-4);
  background: var(--vb-aubergine-soft);
  color: var(--vb-aubergine);
  border: 0.5px solid var(--vb-aubergine);
  border-radius: var(--vb-radius-full);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--vb-dur-fast) var(--vb-ease),
              color var(--vb-dur-fast) var(--vb-ease),
              border-color var(--vb-dur-fast) var(--vb-ease);
}

.verbault-reader .vb-reader-handoff-icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}

.verbault-reader .vb-reader-handoff-label {
  line-height: 1;
  white-space: nowrap;
}

.verbault-reader .vb-reader-handoff-btn:hover:not(:disabled) {
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
}

.verbault-reader .vb-reader-handoff-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: transparent;
  color: var(--vb-text-tertiary);
  border-color: var(--vb-border);
}

/* Section 9a: Sticky bottom playbar (viewport-fixed) */
.vb-reader-playbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: var(--vb-space-3) var(--vb-space-4);
  background: var(--vb-bg-page);
  border-top: 0.5px solid var(--vb-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.vb-reader-playbar[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .vb-reader-playbar {
    bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

.vb-reader-playbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vb-space-4);
  max-width: 980px;
  margin: 0 auto;
}

.vb-reader-playbar__transport {
  display: inline-flex;
  align-items: center;
  gap: var(--vb-space-2);
}

.vb-reader-play-circle {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
  border: 0;
  border-radius: 50%;
  font-size: var(--vb-text-xl);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--vb-dur-fast) var(--vb-ease);
}
.vb-reader-play-circle:hover:not(:disabled) {
  background: color-mix(in srgb, var(--vb-aubergine), black 14%);
}
.vb-reader-play-circle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vb-reader-playbar__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--vb-bg-page);
  color: var(--vb-text-secondary);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-full);
  font-size: var(--vb-text-base);
  cursor: pointer;
  transition: background-color var(--vb-dur-fast) var(--vb-ease),
              color var(--vb-dur-fast) var(--vb-ease),
              border-color var(--vb-dur-fast) var(--vb-ease);
}
.vb-reader-playbar__icon:hover:not(:disabled) {
  background: var(--vb-aubergine-soft);
  color: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
}
.vb-reader-playbar__icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Text-size control: 'Aa' icon in the playbar opens an upward popover stepper.
   playbar 는 화면 하단 고정이라 팝오버는 위로 열고(bottom:100%), 우측 기준으로
   좌측 전개(right:0)해 모바일 우측 가장자리 클립을 막는다(미디어쿼리 불필요). */
.vb-reader-font-control {
  position: relative;
  display: inline-flex;
}
.vb-reader-font-btn {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.vb-reader-font-btn[aria-expanded="true"] {
  background: var(--vb-aubergine-soft);
  color: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
}
.vb-reader-font-popover {
  position: absolute;
  bottom: calc(100% + var(--vb-space-2));
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vb-space-2);
  padding: var(--vb-space-3);
  background: var(--vb-bg-page);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 60;
}
.vb-reader-font-popover[hidden] {
  display: none;
}
.vb-reader-font-popover__row {
  display: flex;
  align-items: center;
  gap: var(--vb-space-2);
}
.vb-reader-font-step {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--vb-bg-page);
  color: var(--vb-text-secondary);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-full);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--vb-dur-fast) var(--vb-ease),
              color var(--vb-dur-fast) var(--vb-ease),
              border-color var(--vb-dur-fast) var(--vb-ease);
}
.vb-reader-font-step--lg {
  font-size: var(--vb-text-lg);
}
.vb-reader-font-step:hover:not(:disabled) {
  background: var(--vb-aubergine-soft);
  color: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
}
.vb-reader-font-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vb-reader-font-step:focus-visible,
.vb-reader-font-reset:focus-visible {
  outline: 2px solid var(--vb-aubergine);
  outline-offset: 2px;
}
.vb-reader-font-value {
  min-width: 3.4em;
  text-align: center;
  font-size: var(--vb-text-sm);
  color: var(--vb-text-secondary);
  font-variant-numeric: tabular-nums;
}
.vb-reader-font-reset {
  background: none;
  border: 0;
  padding: var(--vb-space-1) var(--vb-space-2);
  color: var(--vb-aubergine);
  font-size: var(--vb-text-sm);
  cursor: pointer;
  border-radius: var(--vb-radius-sm);
}
.vb-reader-font-reset:hover {
  text-decoration: underline;
}

.vb-reader-playbar__voice {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--vb-bg-page);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-md);
}
.vb-reader-playbar__voice button {
  padding: var(--vb-space-1) var(--vb-space-3);
  background: transparent;
  color: var(--vb-text-secondary);
  border: 0;
  border-radius: var(--vb-radius-sm);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  cursor: pointer;
  transition: background-color var(--vb-dur-fast) var(--vb-ease),
              color var(--vb-dur-fast) var(--vb-ease);
}
.vb-reader-playbar__voice button[aria-pressed="true"] {
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
}
.vb-reader-playbar__voice button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vb-reader-playbar__speed {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--vb-space-3);
  flex: 1 1 200px;
  max-width: 320px;
  margin: 0;
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  color: var(--vb-text-secondary);
  line-height: 1;
}
.vb-reader-playbar__speed input[type="range"] {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  accent-color: var(--vb-aubergine);
}
.vb-reader-playbar__speed-label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--vb-text-xs);
  color: var(--vb-text-tertiary);
}

.vb-reader-playbar__status {
  display: inline-flex;
  align-items: baseline;
  gap: var(--vb-space-2);
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  color: var(--vb-text-secondary);
  font-variant-numeric: tabular-nums;
}
.vb-reader-playbar__status .wpm-unit {
  color: var(--vb-text-tertiary);
  font-size: var(--vb-text-xs);
  letter-spacing: 0.05em;
}
.vb-reader-playbar__status .progress {
  color: var(--vb-text-tertiary);
}

/* 본문이 playbar 에 가려지지 않도록 view 자체에 padding 부여 */
body[data-view="reader"] {
  padding-bottom: 96px;
}

@media (min-width: 721px) {
  .vb-reader-playbar__row-top {
    display: contents;
  }
}

/* Section 9b: Keyboard focus rings for new interactive elements */
.verbault-reader .vb-reader-chapter-arrow:focus-visible,
.verbault-reader .vb-reader-chapter-pill:focus-visible,
.vb-reader-play-circle:focus-visible,
.vb-reader-playbar__icon:focus-visible,
.vb-reader-playbar__voice button:focus-visible {
  outline: 2px solid var(--vb-aubergine);
  outline-offset: 2px;
}

/* Section 10: Responsive (max-width: 720px, 420px) */
@media (max-width: 720px) {
  .verbault-reader.vb-reader-card {
    padding: var(--vb-space-4);
  }

  .verbault-reader .vb-reader-head {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 좁은 화면에서는 TTS 배지가 업로드 행 다음 줄로 줄바꿈되도록 허용. */
  .verbault-reader .vb-reader-upload-row {
    flex-wrap: wrap;
  }

  .verbault-reader .vb-reader-content {
    font-size: calc(var(--vb-text-base) * var(--vb-reader-font-scale, 1));
    padding: var(--vb-space-4) var(--vb-space-3);
  }

  .verbault-reader .vb-reader-content .vb-reader-paragraph:first-of-type::first-letter {
    font-size: 3em;
  }

  .verbault-reader .vb-reader-chapter-nav {
    margin: 0 calc(-1 * var(--vb-space-4)) var(--vb-space-2);
    padding: var(--vb-space-2) var(--vb-space-4);
  }

  .verbault-reader .vb-reader-chapter-popup {
    left: 0;
    right: 0;
  }

  .vb-reader-playbar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--vb-space-2);
  }

  .vb-reader-playbar__row-top,
  .vb-reader-playbar__row-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--vb-space-3);
    flex-wrap: wrap;
  }

  body[data-view="reader"] {
    padding-bottom: 128px;
  }
}

@media (max-width: 420px) {
  .verbault-reader.vb-reader-card {
    padding: var(--vb-space-3);
    border-radius: var(--vb-radius-md);
  }

  .verbault-reader .vb-reader-chapter-nav {
    margin: 0 calc(-1 * var(--vb-space-3)) var(--vb-space-2);
    padding: var(--vb-space-2) var(--vb-space-3);
  }

  .verbault-reader .vb-reader-title {
    font-size: var(--vb-text-xl);
  }

  .vb-reader-play-circle {
    width: 48px;
    height: 48px;
    font-size: var(--vb-text-lg);
  }
}

/* Section 9: Bookmark chip + sentence flash */
/* 북마크 칩 — translate-chip 미러. 문장 끝(translate 칩 앞), 하이라이트/저장 시 표시.
   margin-left 로 앞 단어와 띄운다 (firstChild 시절 margin-right 잔재 제거 — 끝으로 이동). */
.vb-reader-bookmark-chip {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: var(--vb-space-1);
  padding: 2px 7px;
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  line-height: 1.4;
  border: 1.5px solid var(--vb-aubergine);
  border-radius: var(--vb-radius-full);
  /* 불투명 배경 — tan 활성 하이라이트 위에서 칩이 또렷하게 떠 보이도록 */
  background: var(--vb-bg-elevated);
  color: var(--vb-aubergine);
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: background-color var(--vb-dur-fast) var(--vb-ease),
              color var(--vb-dur-fast) var(--vb-ease);
}
.vb-reader-bookmark-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.vb-reader-bookmark-chip:hover { background: var(--vb-aubergine-soft); }

/* 저장된 문장 — solid aubergine + 밝은 아이콘으로 활성 탭에서 "켜짐" 명확화.
   ⚠ display 는 설정하지 않는다(§265): 비활성 저장문장의 칩을 inline 으로 띄우면
   탭 토글 reflow 의 원인 → 비활성 표시는 문장 border-left+배경(.--bookmarked, 위)
   이 담당하고, 칩은 활성 문장 고정 탭에서만 보인다. 활성+저장 시 이 색이 적용돼
   filled 탭이 된다. */
.vb-reader-sentence--bookmarked .vb-reader-bookmark-chip {
  background: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
}
.vb-reader-sentence--bookmarked .vb-reader-bookmark-chip svg { fill: currentColor; }
.vb-reader-sentence--bookmarked .vb-reader-bookmark-chip:hover {
  background: color-mix(in srgb, var(--vb-aubergine), black 12%);
}

/* 활성 문장 — 저장 여부와 무관하게 칩 표시 (저장 안 됨: 불투명 아웃라인 형태) */
.vb-reader-sentence--active .vb-reader-bookmark-chip { display: inline-flex; }

/* ═══ §265 chip word-jump fix ═══════════════════════════════════════════════
   The active sentence's KO + bookmark chips render as FIXED right-edge tabs
   centered AROUND the Vocabulary ribbon — translate just above it, bookmark
   just below it — styled to match it (vertical, rounded left, aubergine-medium).
   position:fixed takes them OUT of inline flow, so showing/hiding them on
   sentence (de)activation no longer toggles inline width → the text never
   reflows and the tapped word never jumps left. Only one sentence is active at
   a time, so exactly one pair is ever fixed-positioned. Non-active state is
   shown without these chips (bookmark=border-left+bg, translation=persistent
   translation-line). The chip click handlers are unchanged — these are the same
   per-sentence elements, only repositioned.
   ⚠ §277: splitting the pair above/below the centered ribbon (vs the old
   both-below stack) is what makes this fit on phones. With both chips below the
   ribbon, the bottom one landed inside the playbar's band on viewports ≤~700px
   (playbar is position:fixed bottom:56px on mobile, ~137px tall, equal z-index
   and later in DOM → it painted over the chip; verified occluded via
   elementFromPoint). Above the ribbon there is ample room and below it ~72px to
   the playbar, so one 46px chip on each side clears down to a 640px-tall phone.
   ⚠ top offsets assume the centered ribbon (~108px tall, English "Vocabulary");
   verify alignment on deploy. position:fixed is viewport-relative here — no
   reader ancestor establishes a containing block (.verbault-reader is only
   position:relative, which traps absolute not fixed). */
.verbault-reader .vb-reader-sentence--active .vb-reader-bookmark-chip,
.verbault-reader .vb-reader-content.translate-mode .vb-reader-sentence--active .vb-reader-translate-chip {
  position: fixed;
  right: max(0px, calc((100vw - 1000px) / 2));
  z-index: 50;
  box-sizing: border-box;
  width: 31px;          /* match the Vocabulary ribbon width exactly (no protrusion) */
  height: 46px;
  margin: 0;
  padding: 0;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border: 0;
  border-radius: 10px 0 0 10px;
  background: var(--vb-aubergine-medium);
  color: var(--vb-aubergine);
  letter-spacing: .04em;
  box-shadow: none;
}
/* translate ABOVE the ribbon (ribbon top ≈ 50% − 54px; 46px tab + ~6px gap),
   bookmark BELOW it (ribbon bottom ≈ 50% + 54px + ~6px gap). */
.verbault-reader .vb-reader-content.translate-mode .vb-reader-sentence--active .vb-reader-translate-chip { top: calc(50% - 106px); }
.verbault-reader .vb-reader-sentence--active .vb-reader-bookmark-chip { top: calc(50% + 60px); }
.verbault-reader .vb-reader-sentence--active .vb-reader-bookmark-chip:hover,
.verbault-reader .vb-reader-content.translate-mode .vb-reader-sentence--active .vb-reader-translate-chip:hover {
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
}
/* active + saved → filled tab (must out-specify the fixed-tab bg above). */
.verbault-reader .vb-reader-sentence--active.vb-reader-sentence--bookmarked .vb-reader-bookmark-chip {
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
}
/* Reader BODY only: never float the tabs while the Vocabulary word-list panel is
   open. showReaderVocabPanel() already hides #reader-content (display:none cascades
   to these descendants), but this guards independent of the hide mechanism — a
   fixed-positioned chip is easy to leak onto the wrong surface. (Other views hide
   via section.view[hidden]{display:none}, which also removes them.) */
.verbault-reader:has(#reader-vocab-ribbon[aria-pressed="true"]) .vb-reader-sentence--active .vb-reader-bookmark-chip,
.verbault-reader:has(#reader-vocab-ribbon[aria-pressed="true"]) .vb-reader-content.translate-mode .vb-reader-sentence--active .vb-reader-translate-chip {
  display: none;
}

/* 점프 시 일시 플래시 (2400ms) */
.vb-reader-sentence--flash { animation: vb-reader-sentence-flash 2.4s var(--vb-ease-out); }
@keyframes vb-reader-sentence-flash {
  0%   { background: var(--vb-aubergine-medium); }
  100% { background: transparent; }
}

/* ── Vocabulary collector ribbon + panel (Reader §) ──────────────────────── */
.verbault-reader { position: relative; }            /* anchor for the ribbon */
/* 리본: 뷰포트 고정 오버레이(스크롤해도 항상 보임, 데스크탑/모바일 동일 위치).
   데스크탑은 980px 리더 컬럼 우측 가장자리에, 모바일(좁은 화면)은 화면 우측 끝에 clamp. */
.vb-reader-vocab-ribbon {
  position: fixed; top: 50%; transform: translateY(-50%);
  right: max(0px, calc((100vw - 1000px) / 2));
  z-index: 50;
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: 16px 8px; border-radius: 10px 0 0 10px;   /* 오른쪽 가장자리에 붙은 탭 */
  background: var(--vb-aubergine-medium); color: var(--vb-aubergine);
  font-weight: 600; letter-spacing: .04em; cursor: pointer; user-select: none;
  border: 0; transition: background .15s ease, color .15s ease;
}
.vb-reader-vocab-ribbon:hover,
.vb-reader-vocab-ribbon[aria-pressed="true"] {
  background: var(--vb-aubergine); color: var(--vb-text-on-accent);
}
.vb-reader-vocab-panel[hidden] { display: none; }   /* hidden attr beats display:flex */
.vb-reader-vocab-panel { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px; }
/* First-open loading placeholder — centered, not a left-aligned group header. */
.vb-reader-vocab-loading {
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-sm);
  color: var(--vb-text-secondary);
  text-align: center;
  padding: 32px 0;
}
.vb-reader-vocab-group-title {
  font-family: var(--vb-font-sans);
  font-weight: 700;
  font-size: var(--vb-text-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* 6-band CEFR group titles. A=easy / B=medium / C=hard hue (theme-safe reuse of
   the proven reader-level vars); the band code in the title text disambiguates the
   two sub-bands per tier, so colour need not be unique — same colourblind-safe
   philosophy as the .cefr--tag badges. */
.vb-reader-vocab-group--A1 .vb-reader-vocab-group-title,
.vb-reader-vocab-group--A2 .vb-reader-vocab-group-title { color: var(--vb-reader-level-easy); }
.vb-reader-vocab-group--B1 .vb-reader-vocab-group-title,
.vb-reader-vocab-group--B2 .vb-reader-vocab-group-title { color: var(--vb-reader-level-medium); }
.vb-reader-vocab-group--C1 .vb-reader-vocab-group-title,
.vb-reader-vocab-group--C2 .vb-reader-vocab-group-title { color: var(--vb-reader-level-hard); }
.vb-reader-vocab-group--other .vb-reader-vocab-group-title { color: var(--vb-text-secondary); }
/* 단어 = 격자 테이블 (셀 경계선). 레벨 섹션은 세로로 적층. */
.vb-reader-vocab-words {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border-top: 1px solid var(--vb-border);
  border-left: 1px solid var(--vb-border);
}
.vb-reader-vocab-word {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 8px;
  border-right: 1px solid var(--vb-border);
  border-bottom: 1px solid var(--vb-border);
  font-family: var(--vb-font-sans);
  font-weight: 400;                  /* BOLD 해제 */
  font-size: var(--vb-text-sm);
  color: var(--vb-text-primary);
}
/* 이미 단어장에 저장된 단어 — 식별력 강한 테마색(sage) + 틴트 배경, 재선택 불가 */
.vb-reader-vocab-word--saved { background: var(--vb-highlight-learned); }
.vb-reader-vocab-word--saved span { color: var(--vb-sage); font-weight: 600; }
.vb-reader-vocab-word--saved input { cursor: default; }
/* 도움말 + 레벨별 전체 선택/해제/저장 */
.vb-reader-vocab-help {
  font-size: var(--vb-text-sm); color: var(--vb-text-secondary); line-height: 1.5;
}
.vb-reader-vocab-caveat { font-style: italic; opacity: .85; }
.vb-reader-vocab-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--vb-border);   /* 테마 섹션 언더라인 */
}
.vb-reader-vocab-bulk { display: inline-flex; gap: 8px; align-items: center; }
/* 토글(전체 선택⇄해제)·저장은 동일 base — min-width 로 같은 폭, 중앙 정렬 */
.vb-reader-vocab-bulk button {
  box-sizing: border-box;
  min-width: 6.75em; text-align: center;
  font-family: var(--vb-font-sans);
  font-size: var(--vb-text-xs);
  color: var(--vb-aubergine);
  background: var(--vb-aubergine-soft);
  border: 1px solid var(--vb-aubergine-medium);
  border-radius: var(--vb-radius-full);
  padding: 3px 12px; cursor: pointer; text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.vb-reader-vocab-bulk button:hover {
  background: var(--vb-aubergine); color: var(--vb-text-on-accent);
}
.vb-reader-vocab-bulk button:disabled {
  opacity: .4; cursor: not-allowed;
}
.vb-reader-vocab-bulk button:disabled:hover {
  background: var(--vb-aubergine-soft); color: var(--vb-aubergine);
}
/* 레벨별 저장 = 채워진 강조 액션(선택 pill 과 구분), 클러스터 맨 오른쪽 */
.vb-reader-vocab-bulk .vb-reader-vocab-save,
.vb-reader-vocab-bulk .vb-reader-vocab-save:hover {
  color: var(--vb-text-on-accent);
  background: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
  font-weight: 600;
}
.vb-reader-vocab-bulk .vb-reader-vocab-save:disabled {
  opacity: .4; cursor: not-allowed;
}

/* ── Chapter quiz button + progress badge (§151) ────────────────────────── */
.vb-reader-quiz-btn {
  position: relative;
  font-weight: 600;
  gap: 2px;
  /* Override .vb-reader-playbar__icon's fixed 36px width so the progress
     count (e.g. "13/3691" for books with many chapters) grows as a pill
     instead of being clipped inside the 36px circle. */
  width: auto;
  min-width: 36px;
  padding: 0 10px;
}
.vb-reader-quiz-btn[hidden] { display: none; }
.vb-reader-quiz-progress {
  font-size: var(--vb-text-sm);
  line-height: 1;
  max-width: 7em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vb-reader-quiz-btn.is-complete {
  background: var(--vb-aubergine-soft);
  color: var(--vb-aubergine);
  border-color: var(--vb-aubergine);
}

/* ── Chapter quiz modal overlay + panel ─────────────────────────────────── */
.vb-quiz-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--vb-ink) 55%, transparent);
  z-index: 9900;
}
.vb-quiz-modal[hidden] { display: none; }
.vb-quiz-modal__panel {
  display: flex;
  flex-direction: column;
  background: var(--vb-bg-page);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  width: min(520px, calc(100vw - 32px));
  max-height: 85vh;
  overflow-y: auto;
}
.vb-quiz-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vb-space-3);
  padding: var(--vb-space-4) var(--vb-space-5);
  border-bottom: 0.5px solid var(--vb-border);
}
.vb-quiz-modal__head h2 {
  margin: 0;
  font-size: var(--vb-text-lg, 1.125rem);
  font-family: var(--vb-font-serif, serif);
  color: var(--vb-text-primary);
}
.vb-quiz-modal__close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--vb-text-secondary);
  padding: 4px 8px;
  border-radius: var(--vb-radius-full);
  transition: background var(--vb-dur-fast) var(--vb-ease);
}
.vb-quiz-modal__close:hover { background: var(--vb-aubergine-soft); color: var(--vb-aubergine); }
.vb-quiz-modal__body {
  padding: var(--vb-space-4) var(--vb-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--vb-space-3);
}
.vb-quiz-modal__foot {
  padding: var(--vb-space-3) var(--vb-space-5);
  border-top: 0.5px solid var(--vb-border);
  display: flex;
  justify-content: flex-end;
}
.vb-quiz-q {
  margin: 0;
  padding: var(--vb-space-3);
  border: 0.5px solid var(--vb-border);
  border-radius: var(--vb-radius-md, 8px);
}
.vb-quiz-q legend {
  font-size: var(--vb-text-sm);
  font-weight: 500;
  padding: 0 4px;
  color: var(--vb-text-primary);
}
.vb-quiz-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 0;
  font-size: var(--vb-text-sm);
  color: var(--vb-text-primary);
  cursor: pointer;
}