/* =========================================================
   PE STRUCTURAL — ADVANCED FEATURES STYLES
   Dark-mode aware, mobile-friendly, matches existing design tokens.
========================================================= */

/* ============================================================
   DARK MODE — REBINDS SITE-WIDE DESIGN TOKENS
   The site is built on CSS custom properties. Instead of patching
   individual elements we redefine the tokens at :root under dark,
   so every existing rule that uses --panel, --paper, --ink, etc.
   automatically flips to dark values.
============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  /* --- Rebind the site's core palette --- */
  --ink: #e6ecf3;              /* was near-black text  */
  --ink-2: #cbd5df;
  --slate: #9aa8b6;
  --steel: #7b8894;
  --paper: #0f151c;            /* page background (was cream)  */
  --paper-2: #131a23;
  --panel: #1a222d;            /* cards / raised surfaces (was white)  */
  --blueprint: #6fb1ff;        /* headings / accents (was navy)  */
  --blueprint-2: #8dc0ff;
  --teal: #4ecdc4;
  --teal-soft: #1b3835;
  --orange: #f6a05a;
  --orange-soft: #3a2617;
  --green: #4ade80;
  --green-soft: #14301f;
  --red: #f87171;
  --red-soft: #3a1a1a;
  --line: #2a3441;             /* borders  */
  --line-dark: #3a4655;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);

  /* --- Rebind the study-section palette --- */
  --study-bg: #0f151c;
  --study-surface: #1a222d;
  --study-border: #2a3441;
  --study-muted: #98a5b3;
  --study-text: #e6ecf3;
  --study-title: #ffffff;
  --study-indigo: #7f9dff;
  --study-indigo-dark: #6383ee;
  --study-indigo-soft: #1c2440;
  --study-teal: #4ecdc4;
  --study-teal-soft: #1b3835;
  --study-amber: #f6a05a;

  /* --- Advanced-features tokens (only used inside our new pages) --- */
  --adv-bg: #0f151c;
  --adv-surface: #1a222d;
  --adv-surface-2: #232c38;
  --adv-border: #2a3441;
  --adv-text: #e6ecf3;
  --adv-text-muted: #9aa8b6;
  --adv-accent: #7f9dff;
  --adv-accent-2: #a0b5ff;
  --adv-success: #4ade80;
  --adv-warn: #f6a05a;
  --adv-danger: #f87171;
  --adv-critical: #ef4444;
}

/* Light-mode fallback for the advanced-features tokens (only
   these are new — the rest are the site's own defaults)  */
html:not([data-theme="dark"]) {
  --adv-surface: #ffffff;
  --adv-surface-2: #f6f8fb;
  --adv-border: #e5e9f0;
  --adv-text: #1f2937;
  --adv-text-muted: #64748b;
  --adv-accent: #2563eb;
  --adv-accent-2: #4b8dff;
  --adv-success: #16a34a;
  --adv-warn: #d97706;
  --adv-danger: #dc2626;
  --adv-critical: #b91c1c;
}

/* ============================================================
   DARK-MODE ELEMENT ADJUSTMENTS
   These handle spots where the site uses hardcoded colors
   (not the tokens) or needs extra contrast tuning.
============================================================ */
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }

/* Top bar: hardcoded white in the base stylesheet */
html[data-theme="dark"] .topbar {
  background: var(--panel) !important;
  border-bottom-color: var(--line) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .topbar .brand strong,
html[data-theme="dark"] .topbar .brand small { color: var(--ink); }
html[data-theme="dark"] .global-search {
  background: var(--paper-2) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .global-search input {
  background: transparent !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .global-search input::placeholder { color: var(--steel); }
html[data-theme="dark"] .search-icon { color: var(--steel); }

/* Sidebar */
html[data-theme="dark"] .sidebar {
  background: var(--panel) !important;
  border-right-color: var(--line) !important;
}
html[data-theme="dark"] .sidebar-label { color: var(--steel); }
html[data-theme="dark"] .sidebar button,
html[data-theme="dark"] .navlinks button {
  color: var(--ink-2);
  background: transparent;
}
html[data-theme="dark"] .sidebar button:hover,
html[data-theme="dark"] .navlinks button:hover {
  background: var(--paper-2);
  color: var(--ink);
}
html[data-theme="dark"] .sidebar button.active,
html[data-theme="dark"] .navlinks button.active {
  background: var(--study-indigo-soft);
  color: var(--study-indigo);
}

/* Panels / cards / bordered blocks — many are white or cream hardcoded */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .quiz-card,
html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .study-card,
html[data-theme="dark"] .study-tile,
html[data-theme="dark"] .study-block,
html[data-theme="dark"] .study-cta,
html[data-theme="dark"] .study-mode,
html[data-theme="dark"] .study-mode-card,
html[data-theme="dark"] .study-guide-card,
html[data-theme="dark"] .exam-topic-card,
html[data-theme="dark"] .home-cta,
html[data-theme="dark"] .home-panel,
html[data-theme="dark"] .continue-study,
html[data-theme="dark"] .continue-panel,
html[data-theme="dark"] .progress-panel,
html[data-theme="dark"] .progress-summary,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .topic-set,
html[data-theme="dark"] .continue-card,
html[data-theme="dark"] .adaptive-cta,
html[data-theme="dark"] .modal {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .topic-set strong { color: var(--ink); }
html[data-theme="dark"] .topic-set small { color: var(--slate); }
html[data-theme="dark"] .topic-set .set-meta { color: var(--steel); }
/* Safety net: any card-shaped block that is still white should darken */
html[data-theme="dark"] button[class*="card"],
html[data-theme="dark"] div[class*="card"],
html[data-theme="dark"] a[class*="card"],
html[data-theme="dark"] button[class*="tile"],
html[data-theme="dark"] div[class*="tile"],
html[data-theme="dark"] div[class*="panel"] {
  background: var(--panel);
  border-color: var(--line);
}
html[data-theme="dark"] button[class*="card"] strong,
html[data-theme="dark"] div[class*="card"] strong,
html[data-theme="dark"] button[class*="card"] h3,
html[data-theme="dark"] div[class*="card"] h3 { color: var(--ink); }
html[data-theme="dark"] .study-mode-card strong,
html[data-theme="dark"] .study-guide-card h3,
html[data-theme="dark"] .study-guide-card strong,
html[data-theme="dark"] .exam-topic-card h3,
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .panel h1,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .panel h3,
html[data-theme="dark"] .panel h4 { color: var(--ink); }
html[data-theme="dark"] .study-mode-card small,
html[data-theme="dark"] .study-guide-card p,
html[data-theme="dark"] .exam-topic-card p { color: var(--slate); }

/* Any element with an inline white or cream background — override those too */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"] {
  background: var(--panel) !important;
  color: var(--ink) !important;
}

/* Form controls */
html[data-theme="dark"] input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--steel); }

/* Buttons — keep primary buttons vibrant; tone secondary buttons */
html[data-theme="dark"] .btn:not(.primary):not([class*="srs-btn"]) {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .btn:not(.primary):not([class*="srs-btn"]):hover {
  background: var(--panel);
  border-color: var(--line-dark);
}

/* Disclaimer / notice bars often hardcoded */
html[data-theme="dark"] .disclaimer,
html[data-theme="dark"] .info-bar,
html[data-theme="dark"] .banner-note {
  background: var(--paper-2) !important;
  color: var(--ink-2) !important;
  border-color: var(--line) !important;
}

/* Study cards on the home page — colored top borders should stay */
html[data-theme="dark"] .study-guide-card {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

/* Text refinements */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 { color: var(--ink); }
html[data-theme="dark"] .muted,
html[data-theme="dark"] .subtle,
html[data-theme="dark"] small { color: var(--steel); }
html[data-theme="dark"] hr,
html[data-theme="dark"] .divider { border-color: var(--line); background: var(--line); }

/* Advanced-feature pages already use our --adv-* tokens which we
   redefined above, so they automatically flip. A few clarifiers: */
html[data-theme="dark"] .notice { background: var(--paper-2); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .notice .muted { color: var(--steel); }
html[data-theme="dark"] .page-sub,
html[data-theme="dark"] .hm-attempts,
html[data-theme="dark"] .hm-footer,
html[data-theme="dark"] .tb-eq-desc,
html[data-theme="dark"] .ref-item-keywords,
html[data-theme="dark"] .plan-week-date { color: var(--steel); }

/* Scrollbar polish in dark */
html[data-theme="dark"] ::-webkit-scrollbar { background: var(--paper); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--line-dark); border-radius: 6px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--slate); }

/* ---------- Common ---------- */
.page-header { margin-bottom: 20px; }
.page-header h2 { margin: 0 0 6px; font-size: 28px; }
.page-sub { color: var(--adv-text-muted); max-width: 780px; margin: 0; line-height: 1.5; }
.notice {
  padding: 16px 18px;
  background: var(--adv-surface-2);
  border: 1px solid var(--adv-border);
  border-radius: 10px;
  line-height: 1.55;
}
.muted { color: var(--adv-text-muted); }
.btn.compact { padding: 6px 12px; font-size: 13px; }
.text-button {
  background: transparent; border: 0; color: var(--adv-accent);
  text-decoration: underline; cursor: pointer; font: inherit; padding: 0;
}

/* ---------- SRS ---------- */
.srs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.srs-stat {
  padding: 16px;
  background: var(--adv-surface-2);
  border: 1px solid var(--adv-border);
  border-radius: 10px;
  text-align: center;
}
.srs-stat-num { font-size: 32px; font-weight: 700; color: var(--adv-accent); }
.srs-stat-label { font-size: 12px; text-transform: uppercase; color: var(--adv-text-muted); letter-spacing: 0.05em; margin-top: 4px; }

.srs-card {
  padding: 24px;
  background: var(--adv-surface);
  border: 1px solid var(--adv-border);
  border-radius: 12px;
  max-width: 720px;
  margin: 0 auto;
}
.srs-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--adv-text-muted);
}
.srs-cat {
  padding: 3px 10px;
  background: var(--adv-surface-2);
  border-radius: 12px;
  border: 1px solid var(--adv-border);
}
.srs-question { font-size: 17px; line-height: 1.55; margin: 8px 0 20px; }
.srs-answer-box {
  margin-top: 20px;
  padding: 16px;
  background: var(--adv-surface-2);
  border-radius: 10px;
  border-left: 3px solid var(--adv-success);
}
.srs-answer-label { font-size: 12px; text-transform: uppercase; color: var(--adv-text-muted); letter-spacing: 0.05em; }
.srs-answer-text { font-size: 16px; font-weight: 600; margin: 4px 0 10px; }
.srs-explain { font-size: 14px; line-height: 1.55; color: var(--adv-text-muted); }
.srs-grade { margin-top: 20px; }
.srs-grade-label { font-size: 13px; color: var(--adv-text-muted); margin-bottom: 10px; }
.srs-grade-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.srs-btn-hard { background: var(--adv-danger); color: #fff; border: 0; }
.srs-btn-tough { background: var(--adv-warn); color: #1f2937; border: 0; }
.srs-btn-good { background: var(--adv-accent); color: #fff; border: 0; }
.srs-btn-easy { background: var(--adv-success); color: #fff; border: 0; }

/* ---------- Mock Exams ---------- */
.mock-choose {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.mock-card {
  padding: 20px;
  background: var(--adv-surface);
  border: 1px solid var(--adv-border);
  border-radius: 12px;
}
.mock-card.featured {
  border-color: var(--adv-accent);
  box-shadow: 0 0 0 1px var(--adv-accent);
}
.mock-card-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--adv-accent); font-weight: 600; margin-bottom: 6px;
}
.mock-card h3 { margin: 0 0 8px; font-size: 18px; }
.mock-card p { color: var(--adv-text-muted); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }

.mock-history { margin-top: 32px; }
.mock-history h3 { margin: 0 0 12px; }
.mock-history-list { display: grid; gap: 8px; }
.mock-result {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--adv-surface);
  border: 1px solid var(--adv-border);
  border-radius: 10px;
}
.mock-result-score { font-size: 28px; font-weight: 700; text-align: center; }
.mock-pass .mock-result-score { color: var(--adv-success); }
.mock-borderline .mock-result-score { color: var(--adv-warn); }
.mock-fail .mock-result-score { color: var(--adv-danger); }

/* Mock runner */
.mock-runner { max-width: 820px; margin: 0 auto; }
.mock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--adv-surface-2);
  border: 1px solid var(--adv-border);
  border-radius: 10px;
  margin-bottom: 20px;
  position: sticky; top: 8px; z-index: 5;
}
.mock-header-left { display: flex; align-items: center; gap: 12px; }
.mock-progress { font-size: 14px; font-weight: 600; }
.mock-timer {
  font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700;
  color: var(--adv-accent);
}
.mock-body { padding: 20px; background: var(--adv-surface); border: 1px solid var(--adv-border); border-radius: 12px; }
.mock-cat { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--adv-text-muted); margin-bottom: 6px; }
.mock-prompt { font-size: 17px; line-height: 1.55; margin: 8px 0 20px; }
.mock-options { display: grid; gap: 8px; margin-bottom: 20px; }
.mock-opt {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: var(--adv-surface-2);
  border: 1px solid var(--adv-border);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  color: var(--adv-text);
  font: inherit;
  transition: background 0.15s, border 0.15s;
}
.mock-opt:hover { border-color: var(--adv-accent); }
.mock-opt.selected {
  background: rgba(75, 159, 255, 0.12);
  border-color: var(--adv-accent);
}
.mock-opt-letter {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--adv-surface);
  border: 1px solid var(--adv-border);
  font-weight: 600;
}
.mock-opt.selected .mock-opt-letter { background: var(--adv-accent); color: #fff; border-color: var(--adv-accent); }
.mock-nav { display: flex; gap: 8px; justify-content: space-between; margin-top: 8px; }

.mock-scorecard {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: var(--adv-surface);
  border: 1px solid var(--adv-border);
  border-radius: 12px;
}
.mock-score-big { font-size: 56px; font-weight: 700; color: var(--adv-accent); }
.mock-topics { display: grid; gap: 8px; }
.mock-topic-row {
  display: grid;
  grid-template-columns: 1fr 200px auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--adv-border);
}
.mock-topic-bar { height: 8px; background: var(--adv-surface-2); border-radius: 4px; overflow: hidden; }
.mock-topic-fill { height: 100%; background: var(--adv-accent); border-radius: 4px; }
.mock-topic-pct { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--adv-text-muted); }

.mock-review { display: grid; gap: 6px; }
.mock-review-item {
  padding: 10px 14px;
  background: var(--adv-surface);
  border: 1px solid var(--adv-border);
  border-radius: 8px;
}
.mock-review-item.ok { border-left: 3px solid var(--adv-success); }
.mock-review-item.wrong { border-left: 3px solid var(--adv-danger); }
.mock-review-item summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: 30px 30px 180px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.mock-review-num { color: var(--adv-text-muted); font-variant-numeric: tabular-nums; }
.mock-review-mark { font-weight: 700; }
.mock-review-item.ok .mock-review-mark { color: var(--adv-success); }
.mock-review-item.wrong .mock-review-mark { color: var(--adv-danger); }
.mock-review-cat { font-size: 12px; color: var(--adv-text-muted); }
.mock-review-prompt { color: var(--adv-text); overflow: hidden; text-overflow: ellipsis; }
.mock-review-body { padding: 12px 0 4px 42px; font-size: 14px; line-height: 1.55; }
.mock-review-body .explanation { color: var(--adv-text-muted); }

/* ---------- Heatmap ---------- */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.heatmap-cell {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--adv-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hm-cat { font-weight: 600; font-size: 14px; line-height: 1.3; }
.hm-metrics { display: flex; align-items: baseline; gap: 8px; }
.hm-pct { font-size: 28px; font-weight: 700; }
.hm-attempts { font-size: 12px; color: var(--adv-text-muted); }
.hm-footer { display: flex; justify-content: space-between; font-size: 12px; color: var(--adv-text-muted); margin-top: auto; }
.hm-strong { background: rgba(62, 207, 142, 0.14); border-color: rgba(62, 207, 142, 0.4); }
.hm-strong .hm-pct { color: var(--adv-success); }
.hm-ok { background: rgba(75, 159, 255, 0.12); border-color: rgba(75, 159, 255, 0.4); }
.hm-ok .hm-pct { color: var(--adv-accent); }
.hm-weak { background: rgba(246, 195, 67, 0.14); border-color: rgba(246, 195, 67, 0.4); }
.hm-weak .hm-pct { color: var(--adv-warn); }
.hm-critical { background: rgba(217, 74, 72, 0.14); border-color: rgba(217, 74, 72, 0.45); }
.hm-critical .hm-pct { color: var(--adv-critical); }
.hm-unstarted { background: var(--adv-surface-2); }
.hm-unstarted .hm-pct { color: var(--adv-text-muted); }
.heatmap-legend {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-size: 12px; color: var(--adv-text-muted); margin-top: 8px;
}
.hm-swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px;
  margin-right: 4px; margin-left: 4px; vertical-align: middle;
  border: 1px solid var(--adv-border);
}
.hm-swatch.hm-strong { background: rgba(62, 207, 142, 0.4); }
.hm-swatch.hm-ok { background: rgba(75, 159, 255, 0.4); }
.hm-swatch.hm-weak { background: rgba(246, 195, 67, 0.4); }
.hm-swatch.hm-critical { background: rgba(217, 74, 72, 0.5); }
.hm-swatch.hm-unstarted { background: var(--adv-surface-2); }

/* ---------- Study Plan ---------- */
.plan-form {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: end;
  padding: 20px; background: var(--adv-surface); border: 1px solid var(--adv-border);
  border-radius: 12px; margin-top: 16px;
}
.plan-form label { display: flex; flex-direction: column; font-size: 13px; color: var(--adv-text-muted); gap: 4px; }
.plan-form input {
  padding: 8px 12px; font-size: 14px; border-radius: 8px;
  border: 1px solid var(--adv-border); min-width: 180px;
}

.plan-summary {
  padding: 16px 20px; background: var(--adv-surface-2); border: 1px solid var(--adv-border);
  border-radius: 10px; margin-bottom: 20px;
}
.plan-priority { margin: 6px 0 12px; padding-left: 20px; }
.plan-priority li { padding: 3px 0; }
.plan-weeks { display: grid; gap: 12px; }
.plan-week {
  padding: 16px; background: var(--adv-surface); border: 1px solid var(--adv-border);
  border-radius: 10px;
}
.plan-week-current { border-color: var(--adv-accent); box-shadow: 0 0 0 1px var(--adv-accent); }
.plan-week-head { display: flex; justify-content: space-between; margin-bottom: 6px; align-items: baseline; }
.plan-week-num { font-weight: 700; }
.plan-week-date { font-size: 13px; color: var(--adv-text-muted); }
.plan-week-focus { font-size: 13px; color: var(--adv-accent); margin-bottom: 10px; }
.plan-activities { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.plan-activity {
  display: grid; grid-template-columns: 60px 1fr; gap: 12px;
  padding: 6px 10px; background: var(--adv-surface-2); border-radius: 6px; font-size: 14px;
}
.plan-act-hours { font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-act-learn { border-left: 3px solid var(--adv-accent); }
.plan-act-practice { border-left: 3px solid var(--adv-success); }
.plan-act-review { border-left: 3px solid var(--adv-warn); }
.plan-act-mock { border-left: 3px solid var(--adv-danger); }

/* ---------- Toolbox ---------- */
.toolbox-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--adv-border); margin: 16px 0;
}
.tb-tab {
  padding: 10px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--adv-text-muted); cursor: pointer; font-size: 14px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.tb-tab.active { color: var(--adv-accent); border-bottom-color: var(--adv-accent); }
.toolbox-panel {
  padding: 20px; background: var(--adv-surface); border: 1px solid var(--adv-border);
  border-radius: 12px; min-height: 240px;
}
.tb-converter { display: grid; gap: 16px; max-width: 500px; }
.tb-converter label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--adv-text-muted); }
.tb-converter input, .tb-converter select {
  padding: 10px 12px; font-size: 14px; border-radius: 8px; border: 1px solid var(--adv-border);
}
.tb-result-value { padding: 14px; background: var(--adv-surface-2); border-radius: 8px; font-size: 20px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

.tb-combo-group { margin-bottom: 24px; }
.tb-combo-group h3 { margin: 0 0 10px; font-size: 16px; }
.tb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tb-table th, .tb-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--adv-border); }
.tb-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--adv-text-muted); }
.tb-formula { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }

.tb-table-scroll { overflow-x: auto; }
.tb-wtable { min-width: 720px; }
.tb-wtable td { font-variant-numeric: tabular-nums; text-align: right; }
.tb-wtable td:first-child, .tb-wtable th:first-child { text-align: left; }

.tb-equations { display: grid; gap: 8px; }
.tb-equations input[type="search"] { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--adv-border); font-size: 14px; margin-bottom: 8px; }
.tb-eq { padding: 12px 14px; background: var(--adv-surface-2); border-radius: 8px; }
.tb-eq-head { margin-bottom: 4px; }
.tb-eq-code { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--adv-accent); font-weight: 600; }
.tb-eq-formula { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; margin: 4px 0; }
.tb-eq-desc { font-size: 13px; }

/* ---------- Reference Index ---------- */
.ref-search { display: flex; align-items: center; gap: 16px; margin: 16px 0; }
.ref-search input {
  flex: 1; padding: 12px 16px; font-size: 15px; border-radius: 10px; border: 1px solid var(--adv-border);
}
.ref-group { margin-bottom: 24px; }
.ref-code { font-size: 15px; color: var(--adv-accent); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--adv-border); }
.ref-items { display: grid; gap: 6px; }
.ref-item {
  padding: 10px 14px; background: var(--adv-surface); border: 1px solid var(--adv-border); border-radius: 8px;
  display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline;
}
.ref-item-section { font-weight: 600; font-size: 13px; color: var(--adv-text-muted); }
.ref-item-topic { font-size: 14px; }
.ref-item-keywords { grid-column: 2; font-size: 12px; margin-top: 2px; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .srs-grade-buttons { grid-template-columns: repeat(2, 1fr); }
  .mock-choose { grid-template-columns: 1fr; }
  .mock-scorecard { grid-template-columns: 1fr; text-align: center; }
  .mock-topic-row { grid-template-columns: 1fr; gap: 4px; }
  .mock-review-item summary { grid-template-columns: 20px 20px 1fr; }
  .mock-review-cat { display: none; }
  .mock-review-body { padding-left: 0; }
  .ref-item { grid-template-columns: 1fr; }
  .heatmap-grid { grid-template-columns: 1fr; }
  .toolbox-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .toolbox-tabs::-webkit-scrollbar { height: 4px; }
  .toolbox-tabs::-webkit-scrollbar-thumb { background: var(--adv-border); border-radius: 4px; }
  .tb-tab { padding: 10px 12px; font-size: 13px; }
  .plan-form { flex-direction: column; align-items: stretch; }
  .plan-form input { min-width: 0; width: 100%; }
}

/* ---------- Nav icon (sidebar) ---------- */
.nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 8px;
  font-size: 14px; opacity: 0.7;
}

/* ---------- Flag for review (mock exam) ---------- */
.mock-flag-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; margin-left: 8px;
  background: #fef3c7; color: #92400e;
  border: 1px solid #fbbf24; border-radius: 12px;
  font-size: 12px; font-weight: 600;
}
.btn.flagged-active {
  background: #fef3c7; color: #92400e; border-color: #f59e0b;
}
.btn.flagged-active:hover { background: #fde68a; }
.mock-flag-jump {
  margin-top: 12px; padding: 10px 12px;
  background: #fffbeb; border: 1px dashed #fbbf24; border-radius: 6px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.mock-flag-jump .muted { font-size: 13px; margin-right: 4px; }
.mock-flag-jump .btn.compact { padding: 4px 10px; font-size: 12px; }
.mock-review-item.flagged { border-left: 3px solid #f59e0b; }
.mock-review-item.flagged > summary { background: #fffbeb; }