/* ================================================================
   BASE — reset, fonts, utilities, animations, shared components
   Design tokens live in css/tokens.css — it MUST load before this
   file (style.css imports it first; admin.html links it first).
   ================================================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; height: 100%; }
body { height: 100%; }

/* ── Thai glyph override: routes U+0E00-0E7F to Sarabun webfont
      so Thai tone-marks render identically on all OS/browsers ── */
@font-face {
  font-family: 'Kanit'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/sarabun@5.2.5/files/sarabun-thai-300-normal.woff2') format('woff2'),
       local('Leelawadee UI'), local('Thonburi'), local('Noto Sans Thai'), local('Sarabun');
  unicode-range: U+0E00-0E7F;
}
@font-face {
  font-family: 'Kanit'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/sarabun@5.2.5/files/sarabun-thai-400-normal.woff2') format('woff2'),
       local('Leelawadee UI'), local('Thonburi'), local('Noto Sans Thai'), local('Sarabun');
  unicode-range: U+0E00-0E7F;
}
@font-face {
  font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/sarabun@5.2.5/files/sarabun-thai-500-normal.woff2') format('woff2'),
       local('Leelawadee UI'), local('Thonburi'), local('Noto Sans Thai'), local('Sarabun');
  unicode-range: U+0E00-0E7F;
}
@font-face {
  font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/sarabun@5.2.5/files/sarabun-thai-600-normal.woff2') format('woff2'),
       local('Leelawadee UI'), local('Thonburi'), local('Noto Sans Thai'), local('Sarabun');
  unicode-range: U+0E00-0E7F;
}
@font-face {
  font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/sarabun@5.2.5/files/sarabun-thai-700-normal.woff2') format('woff2'),
       local('Leelawadee UI'), local('Thonburi'), local('Noto Sans Thai'), local('Sarabun');
  unicode-range: U+0E00-0E7F;
}


@keyframes ec-sk-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}

.ec-ins-modal-title {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--text-ink);
  margin-bottom: var(--space-3);
  padding-right: var(--space-8);
  line-height: 1.3;
}
.ec-ins-modal-title--compact { margin-bottom: 6px; }
.ec-modal-section-title {
  padding-top: 2px;
  margin: 0 var(--space-8) 2px 0;
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--text-ink);
  line-height: 1.3;
}
.ec-modal-caption {
  font-size: var(--text-caption-sm);
  color: var(--text-secondary);
}
.ec-modal-caption--mb10 { margin: 0 0 10px 0; }
.ec-modal-caption--mb8 { margin-bottom: 8px; margin-left: 0; }
.ec-stat-overline {
  font-size: var(--text-overline);
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-3-5) 0 var(--space-1);
}
.ec-stat-select {
  margin-bottom: var(--space-3);
  padding: var(--space-1-5) var(--space-2-5);
  border: 1.5px solid var(--border-accent);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  color: var(--text-ink);
  background: var(--surface-accent-soft);
  width: 100%;
  cursor: pointer;
  font-family: inherit;
}
.ec-stat-row-label {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--text-ink);
}
.ec-stat-row-label--sm { font-size: var(--text-sm); }
.ec-stat-row-label--grow { flex: 1; min-width: 0; }
.ec-stat-click-label { cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.ec-stat-detail-row--clickable { cursor: pointer; }
.ec-stat-detail-row--clickable:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 8px; }
.ec-stat-row-meta { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.ec-stat-row-pct { font-size: var(--text-body-sm); font-weight: 700; white-space: nowrap; min-width: 42px; text-align: right; }
.ec-stat-row-count { font-size: var(--text-body-sm); font-weight: 700; color: var(--purple); white-space: nowrap; margin-left: 12px; }
/* Performance-tier text colours — templates emit the tier class (thresholds
   stay in JS as domain logic); tokens decide the colour per theme. Replaces
   the inline pctColor() hex trio (jsHexBudgets ratchet). */
.ec-tier-good { color: var(--success-fg); }
.ec-tier-mid  { color: var(--warning-fg-strong); }
.ec-tier-low  { color: var(--danger-fg); }
.ec-stat-hist-ico { color: var(--accent); }
.ec-pwcr-explain-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--text-accent);
  margin-bottom: var(--space-1);
}
.ec-index-prefix { font-size: var(--text-2xs); color: var(--text-tertiary); font-weight: 700; margin-right: var(--space-1-5); }
.ec-legend-note { font-size: var(--text-2xs); color: var(--danger); font-style: italic; }
.ec-role-pill-admin {
  background: var(--warning-surface);
  color: var(--warning-fg);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
}
/* Legacy warm banner — intentionally literal one-off, not themed */
.ec-auth-session-banner {
  background: linear-gradient(135deg, #fff8e1, #ffe5b4); /* on-accent */
  border: 1px solid #ffc14d; /* on-accent */
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: var(--text-banner);
  color: #3a2a00;
}
.ec-avatar-emoji-inline { font-size: var(--text-avatar-row); line-height: 1; display: inline-block; }
.ec-avatar-preview-emoji { font-size: var(--text-avatar-preview); line-height: 1; display: inline-block; }
.ec-material-14 { font-size: 14px !important; flex-shrink: 0; }
.ec-material-20 { font-size: 20px; vertical-align: middle; }
.ec-ins-chevron-soft { font-size: var(--text-md); color: var(--purple-300); }

/* ── Quiz / exam / difficulty picker (wave 2) ─────────────────── */
/* The exam card's difficulty badge moved into the question head row and is
   styled as .xr-diff-pill in gym-exam.css (quiz-card parity); the .ec-quiz-diff-*
   rules that used to live here had no emitter left. */
.ec-quiz-loading-msg { padding: 32px; text-align: center; color: var(--text-secondary); }

.ec-diff-pick-close {
  position: absolute;
  top: var(--space-3-5);
  right: var(--space-3-5);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ec-diff-pick-ai { font-size: var(--text-display-sm); color: var(--accent-strong); }
.ec-diff-pick-title { font-weight: 800; font-size: var(--text-subtitle); color: var(--text-strong); margin-bottom: var(--space-1); }
.ec-diff-pick-sub { font-size: var(--text-sm); color: var(--text-secondary); }
.ec-diff-pick-emoji { font-size: var(--text-emoji-row); flex-shrink: 0; line-height: 1; }
.ec-diff-pick-row-title { font-weight: 700; font-size: var(--text-ui); color: var(--text-strong); }
.ec-diff-pick-row-sub { font-size: var(--text-caption); color: var(--text-secondary); margin-top: 1px; }
.ec-diff-pick-chevron { color: var(--gray-dim); font-size: var(--text-md); line-height: 1; }
.ec-diff-pick-foot-icon { font-size: var(--text-md); color: var(--purple-dark); }
.ec-diff-pick-foot-text { font-size: var(--text-caption); color: var(--accent-deep); }
.ec-material-110 { font-size: 1.1rem; line-height: 1; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  max-width: 100%;
}

/* ── Body ── */
body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--text-default);
  background: var(--surface-body);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

html.iab-compact,
html.iab-compact body {
  overflow-x: clip;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; }

/* ── Shared Animations ── */
@keyframes fadeIn    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp   { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes pvid-pop-in { from { opacity: 0; transform: scale(0.88) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes pvid-bg-in  { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Utilities ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.highlight  { color: var(--brand); font-weight: 700; }

/* Responsive layout primitives (contract: base.css --layout-* tokens) */
.u-grid-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-panel-min, 360px)), 1fr));
  gap: var(--space-5, 20px);
  align-items: start;
}
/* Workspace 2-panel preset — compose on page grids (exam/history/stats overrides in gym.css) */
.u-grid-panels--split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(min(var(--layout-panel-comfort, 320px), 100%), 0.92fr);
  gap: var(--space-5, 20px);
  align-items: start;
}

.badge {
  display: inline-block; padding: 8px 20px;
  border-radius: 50px; font-size: 0.85rem;
  font-weight: 600; background: var(--pink-light);
  color: var(--pink-deeper); text-transform: uppercase; letter-spacing: 0.5px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  border: none; cursor: pointer; transition: var(--transition);
  position: relative; overflow: hidden;
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.2); opacity: 0; transition: var(--transition); /* on-accent */
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: scale(0.96); }
.btn-primary {
  background: var(--gradient-cta);
  color: var(--text-inverse); box-shadow: 0 4px 15px rgba(255,94,145,0.4);
}
.btn-primary:hover  { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255,94,145,0.5); }
.btn-primary:active { transform: translateY(0); }
.btn-outline {
  background: transparent; color: var(--text-brand); border: 2px solid var(--brand);
}
.btn-outline:hover { background: var(--pink-light); border-color: var(--brand-strong); }
.btn-lg    { padding: 16px 32px; font-size: 1.1rem; border-radius: var(--radius-sm); }
.btn-sm    { padding: 8px 16px; font-size: 0.9rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-icon {
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); transition: var(--transition);
  padding: 8px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.btn-icon:hover { color: var(--brand); background: var(--pink-light); transform: scale(1.1); }
.btn-danger {
  background: var(--danger); color: var(--text-inverse);
  padding: var(--space-2-5) var(--space-5); border: none; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-1-5); transition: var(--transition);
}
.btn-danger:hover { background: var(--danger-strong); }
/* ── Loading spinner ── */
.loading-container { text-align: center; padding: 60px 0; }
.loading-container--ai {
  padding: 28px 12px 32px;
  max-width: 420px;
  margin: 0 auto;
}
.loading-container--ai .loading-spinner {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}
.loading-container--ai .loading-text {
  margin-bottom: 14px;
  font-size: 0.98rem;
  line-height: 1.4;
}

/* Phase strip — highlights match `data-phase` on `#loadingContainer` (set by generateContent). */
.loading-phase-strip {
  list-style: none;
  margin: 0 auto 14px;
  padding: 0 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 380px;
}
.loading-phase-strip li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-tertiary);
  background: rgba(148, 163, 184, 0.16);
  padding: 5px 10px;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.loading-phase-strip li span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  font-size: 0.65rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-card) 75%, transparent);
  color: var(--text-secondary);
}
.loading-container[data-phase="file"] .loading-phase-strip li[data-phase="file"],
.loading-container[data-phase="plan"] .loading-phase-strip li[data-phase="plan"],
.loading-container[data-phase="topics"] .loading-phase-strip li[data-phase="topics"],
.loading-container[data-phase="bank"] .loading-phase-strip li[data-phase="bank"],
.loading-container[data-phase="done"] .loading-phase-strip li {
  color: var(--text-inverse);
  background: var(--gradient-brand);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.28);
  transform: translateY(-1px);
}
.loading-container[data-phase="done"] .loading-phase-strip li span:first-child {
  background: rgba(255, 255, 255, 0.28); /* on-accent */
  color: var(--text-inverse);
}
.loading-container[data-phase="file"] .loading-phase-strip li[data-phase="file"] span:first-child,
.loading-container[data-phase="plan"] .loading-phase-strip li[data-phase="plan"] span:first-child,
.loading-container[data-phase="topics"] .loading-phase-strip li[data-phase="topics"] span:first-child,
.loading-container[data-phase="bank"] .loading-phase-strip li[data-phase="bank"] span:first-child {
  background: rgba(255, 255, 255, 0.25); /* on-accent */
  color: var(--text-inverse);
}

/* Plan-like skeleton preview (upload modal) */
.ec-ai-loading-preview {
  text-align: left;
  margin: 0 auto 18px;
  max-width: 360px;
}
.ec-ai-prev-hero {
  height: 52px;
  border-radius: 14px;
  margin-bottom: 10px;
}
.ec-ai-prev-stack { display: flex; flex-direction: column; gap: 8px; }
.ec-ai-prev-line {
  height: 12px;
  border-radius: 8px;
  width: 78%;
}
.ec-ai-prev-line--short { width: 52%; }
.ec-ai-prev-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.ec-ai-prev-chip {
  height: 28px;
  width: 62px;
  border-radius: 999px;
}
.ec-ai-prev-week {
  height: 64px;
  border-radius: 16px;
  margin-top: 4px;
}
.ec-ai-prev-week--narrow { width: 88%; }

.loading-spinner {
  width: 60px; height: 60px;
  border: 4px solid rgba(255,94,145,0.2);
  border-top-color: var(--brand); border-right-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
  margin: 0 auto 20px; box-shadow: 0 0 20px rgba(255,94,145,0.2);
}
.loading-text  { color: var(--text-secondary); margin-bottom: 20px; font-weight: 600; font-size: 1.05rem; }
.loading-bar   { width: 300px; height: 8px; background: linear-gradient(90deg, rgba(255,94,145,0.1), rgba(168,85,247,0.1)); border-radius: 4px; margin: 0 auto; overflow: hidden; }
.loading-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 4px; width: 0%; transition: width 0.3s; box-shadow: 0 0 12px rgba(255,94,145,0.4); }

/* ── Error / toast ── */
.error-toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  /* max-content is what lets max-width mean anything: shrink-to-fit measures the
     space from left:50% to the right edge, so on a 375px phone the box was capped
     at 188px and stacked into a tall column instead of the 351px it declares. */
  width: max-content; max-width: calc(100vw - 24px);
  background: linear-gradient(135deg, var(--red-dark), var(--red-deep));
  color: var(--text-inverse); padding: 12px 16px 12px 20px; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: var(--text-md, 1rem); font-weight: 600;
  box-shadow: 0 12px 32px rgba(239,68,68,0.35);
  z-index: var(--z-toast); opacity: 0; transition: opacity var(--duration-normal, 0.19s) var(--ease-out-soft, ease); pointer-events: none;
  border: 1px solid rgba(255,255,255,0.22); /* on-accent */
}
.error-toast-msg { flex: 1 1 200px; min-width: 0; text-align: left; line-height: var(--leading-snug, 1.35); }
.error-toast-action {
  flex-shrink: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: var(--text-sm, 0.85rem);
  padding: 8px 14px; border-radius: var(--r-control, var(--radius-sm)); border: 1px solid rgba(255,255,255,0.55); /* on-accent */
  background: rgba(0, 0, 0, 0.16); color: var(--text-inverse); /* on-accent */
  transition: background var(--duration-fast, 0.16s) var(--ease-out-soft, ease);
}
.error-toast-action:hover { background: rgba(0, 0, 0, 0.26); } /* on-accent */
/* Corner badge, out of the flex flow: inline it would wrap onto the action
   row on narrow screens and read as a stray glyph beside a bordered button. */
.error-toast-close {
  position: absolute; top: 8px; right: 8px;
  cursor: pointer; font-family: inherit; font-size: var(--text-sm, 0.85rem); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; border: none;
  background: rgba(0, 0, 0, 0.16); color: var(--text-inverse); /* on-accent */
  transition: background var(--duration-fast, 0.16s) var(--ease-out-soft, ease);
}
.error-toast-close:hover { background: rgba(0, 0, 0, 0.26); } /* on-accent */
/* The display above would otherwise beat the UA rule for [hidden]. */
.error-toast-close[hidden] { display: none; }
/* 8px inset + 32px badge + 12px gap, applied only while a ✕ is shown so a
   plain 4-second toast keeps its tight padding. */
.error-toast:has(.error-toast-close:not([hidden])) { padding-right: 52px; }
.error-toast.show { opacity: 1; pointer-events: auto; }
/* For a toast that stays long enough to be in the way. At the top it sits over
   the sticky header and the tab bar, which no scrolling can move out from under
   it; down here it covers page content, which scrolls. One step above the update
   notice in the same corner: that one lasts until dismissed, and a shared-device
   "not me" button must not end up behind it. */
.error-toast.error-toast--bottom {
  top: auto;
  bottom: calc(24px + var(--vv-bottom-inset, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: calc(var(--z-toast) + 1);
}
/* An open sheet puts the tab bar out of reach anyway and keeps its own action at
   the foot, where a round's submit button lives, so the toast goes back to the top.
   The inline overflow is Viewport.lockDocumentScroll, set while any sheet is open. */
body[style*="overflow: hidden"] .error-toast.error-toast--bottom { top: 24px; bottom: auto; }

/* ── SW update toast ── */
/* One shade deeper than the success-toast pair used to be: white on its
   Emerald-600 start read 3.77:1 (4.15 by glyph). Emerald-700 → 800 keeps the
   green and holds 5.48:1 at the light end. Its two buttons darken the green
   instead of washing it with white, which had dropped them to 3.4:1. */
.error-toast.error-toast--success {
  background: linear-gradient(135deg, var(--green-deep), var(--green-800));
  box-shadow: 0 12px 32px rgba(5, 150, 105, 0.35);
}
.error-toast--success :is(.error-toast-action, .error-toast-close) { background: rgba(0, 0, 0, 0.16); } /* on-accent */
.error-toast--success :is(.error-toast-action, .error-toast-close):hover { background: rgba(0, 0, 0, 0.26); } /* on-accent */
/* The same step for the warning: white on the Amber-600 start read 3.19:1.
   Amber-700 → 800 holds 5.02:1 at the light end, and its buttons darken for
   the reason the success ones do. */
.error-toast.error-toast--warn {
  background: linear-gradient(135deg, var(--amber-deep), var(--amber-deeper));
  box-shadow: 0 12px 32px rgba(217, 119, 6, 0.35);
}
.error-toast--warn :is(.error-toast-action, .error-toast-close) { background: rgba(0, 0, 0, 0.16); } /* on-accent */
.error-toast--warn :is(.error-toast-action, .error-toast-close):hover { background: rgba(0, 0, 0, 0.26); } /* on-accent */
.auth-inline-error {
  display: none; padding: 10px 14px; margin-bottom: 12px;
  border-radius: 10px; font-size: 0.88rem; font-weight: 600;
  font-family: var(--font-display); text-align: center;
  background: var(--danger-surface); color: var(--danger-fg-strong); border: 1px solid var(--danger-border);
  animation: fadeIn 0.3s ease;
}
.auth-inline-error.show    { display: block; }
.auth-inline-error.success { background: var(--success-surface); color: var(--success-fg-strong); border-color: var(--success-border); }

/* ── Page visibility ── */
.page        { display: none; position: relative; z-index: 1; }
.page.active { display: block; }

/* ── Compact bookmark list (openBookmarksModal flat view) ──────── */
.bm-item { position: relative; }
.bm-item[data-removed] { opacity: .35; pointer-events: none; }
/* Expanded bookmark detail — choice rows (tmplBookmarkItemDetail).
   The ✓ badge fills with --green-deep, not --green-mid: white-on-green must
   clear AA 4.5:1 and the brighter greens cannot. */
.bm-choice { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; margin-bottom: 5px; border-radius: var(--radius-xs); background: var(--surface-subtle); border: 1px solid var(--border-default); }
.bm-choice--ok { background: var(--success-surface); border-color: var(--success-border); }
.bm-choice-label { width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface-sunken-strong); color: var(--text-secondary-strong); }
.bm-choice--ok .bm-choice-label { background: var(--green-deep); color: var(--text-inverse); }
.bm-choice-text { font-size: var(--text-caption); line-height: 1.5; }
.bm-item-header {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 0; cursor: pointer; user-select: none;
  border-bottom: 0.5px solid var(--divider);
}
.bm-item-header[aria-expanded="true"] { border-bottom: none; }
.bm-item-header:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.bm-item-header[aria-expanded="true"] .bm-chevron { transform: rotate(180deg); }
.bm-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-accent); color: var(--accent-strong); font-size: 10px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.bm-item-q {
  flex: 1; font-size: 13px; line-height: 1.5; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bm-chevron {
  color: var(--text-tertiary); flex-shrink: 0;
  transition: transform .15s ease; padding-top: 2px;
}
.bm-chevron .material-icons-round { font-size: 18px; }
.bm-remove-btn {
  width: 24px; height: 24px; border-radius: 50%;
  border: 0.5px solid var(--border-default); background: transparent; color: var(--text-tertiary);
  cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  font-family: inherit;
  transition: border-color .1s, color .1s, background .1s;
}
.bm-remove-btn .material-icons-round { font-size: 16px; }
.bm-remove-btn:hover { border-color: var(--red-300); color: var(--danger); background: var(--danger-surface); }
.bm-item-detail { padding: 8px 28px 10px; border-bottom: 0.5px solid var(--divider); }
/* ── Bookmark 2-step drill-down ──────────────────────────────────── */
.bm-topic-row { display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer;user-select:none;border-bottom:0.5px solid var(--divider); }
.bm-topic-row:last-child { border-bottom:none; }
.bm-topic-row:hover .bm-topic-name { color:var(--accent-strong); }
.bm-topic-row:focus-visible { outline:2px solid var(--accent);outline-offset:2px;border-radius:3px; }
.bm-topic-icon { width:30px;height:30px;border-radius:8px;background:var(--surface-accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; }
.bm-topic-icon .material-icons-round { font-size:18px;color:var(--accent-strong); }
.bm-topic-info { flex:1;min-width:0; }
.bm-topic-name { font-size:13px;font-weight:500;transition:color .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.bm-topic-count { font-size:11px;font-weight:500;background:var(--surface-accent);color:var(--text-accent);border-radius:999px;padding:2px 8px;flex-shrink:0;white-space:nowrap; }
.bm-topic-chev { color:var(--text-tertiary);flex-shrink:0;display:inline-flex; }
.bm-topic-chev .material-icons-round { font-size:20px; }
.bm-back-btn { display:inline-flex;align-items:center;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--accent-strong);padding:0;flex-shrink:0; }
.bm-back-btn .material-icons-round { font-size:20px; }
.bm-footer { display:flex;gap:8px;padding:10px 16px;border-top:0.5px solid var(--divider);flex-shrink:0; }
.bm-footer-stat-btn { flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:var(--surface-sunken);color:var(--text-secondary-strong);border:1px solid var(--border-default);border-radius:8px;padding:8px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .1s; }
.bm-footer-stat-btn .material-icons-round { font-size:16px; }
.bm-footer-stat-btn:hover { background:var(--gray-border); }
.bm-footer-prac-btn { flex:2;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:var(--learner-action-primary);color:var(--learner-on-action);border:none;border-radius:8px;padding:8px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .1s; }
.bm-footer-prac-btn .material-icons-round { font-size:18px; }
.bm-footer-prac-btn:hover { background:var(--learner-action-hover); }