:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-muted: #f1f3f6;
  --line: #e3e7ec;
  --line-strong: #cfd6df;
  --ink: #172230;
  --muted: #6e7885;
  --subtle: #8e98a4;
  --blue: #2f6fed;
  --blue-strong: #1f56c2;
  --blue-soft: #edf3ff;
  --green: #198768;
  --orange: #c97931;
  --shadow: 0 16px 36px rgba(26, 38, 54, 0.07);
  --radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr) 320px; min-height: 100dvh; }
.sidebar { position: relative; display: flex; flex-direction: column; min-height: 100dvh; padding: 22px 14px 18px; background: #fbfcfd; border-right: 1px solid var(--line); }
.brand-block { display: flex; align-items: center; gap: 10px; padding: 0 10px 24px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: #fff; font-weight: 750; font-size: 12px; letter-spacing: .04em; }
.brand-name { margin: 0; font-size: 13px; font-weight: 760; letter-spacing: .01em; }
.brand-subtitle { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.workspace-picker { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 11px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #435160; font-size: 12px; text-align: left; }
.workspace-picker[aria-expanded="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,111,237,.1); }
.workspace-menu { position: absolute; top: 78px; right: 14px; left: 14px; z-index: 8; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 14px 30px rgba(24, 40, 60, .16); }
.workspace-menu[hidden] { display: none; }
.workspace-menu-head { display: grid; gap: 3px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.workspace-menu-head strong { color: var(--ink); font-size: 11px; }
.workspace-menu-head small, .workspace-menu-item small { color: var(--muted); font-size: 9px; }
.workspace-menu-item { display: grid; grid-template-columns: 8px 1fr; gap: 8px; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: var(--ink); text-align: left; font-size: 11px; }
.workspace-menu-item small { grid-column: 2; }
.workspace-menu-item:hover:not(:disabled) { background: var(--blue-soft); }
.workspace-menu-item:disabled { cursor: default; opacity: .6; }
.workspace-menu-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: var(--green); }
.workspace-menu-dot.demo { background: var(--orange); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #31ad7e; box-shadow: 0 0 0 3px #e2f5ed; }
.chevron { margin-left: auto; color: var(--subtle); font-size: 16px; }
.nav-list { display: grid; gap: 3px; }
.nav-item, .mini-project, .role-card { border: 0; background: transparent; text-align: left; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 37px; padding: 0 11px; border-radius: 7px; color: var(--muted); font-size: 12px; transition: background .18s, color .18s, transform .18s; }
.nav-item:hover { background: #eef1f5; color: var(--ink); }
.nav-item:active, .mini-project:active, .role-card:active { transform: translateY(1px); }
.nav-item.active { background: var(--blue-soft); color: var(--blue-strong); font-weight: 700; }
.nav-glyph { display: grid; place-items: center; width: 23px; height: 23px; color: #9aa5b2; font-variant-numeric: tabular-nums; font-size: 10px; }
.nav-glyph img { width: 17px; height: 17px; object-fit: contain; opacity: 1; filter: brightness(0) saturate(100%); }
.nav-item.active .nav-glyph img { filter: brightness(0) saturate(100%) invert(40%) sepia(92%) saturate(1864%) hue-rotate(205deg) brightness(96%) contrast(94%); }
.active .nav-glyph { color: var(--blue); }
.nav-count, .nav-live { margin-left: auto; color: var(--subtle); font-size: 10px; }
.nav-live { padding: 3px 5px; border-radius: 4px; background: #e5f5ef; color: var(--green); font-size: 9px; font-weight: 760; letter-spacing: .06em; }
.sidebar-section { margin-top: 28px; }
.sidebar-section-head { display: flex; align-items: center; justify-content: space-between; padding: 0 9px 9px; color: var(--subtle); font-size: 10px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.text-button { border: 0; padding: 0; background: transparent; color: var(--blue); font-size: 11px; }
.sidebar-inline-actions { display: inline-flex; align-items: center; gap: 10px; }
.role-card { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.role-logo, .company-mark { display: grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; border-radius: 7px; background: linear-gradient(135deg, #3e66ff, #9256e8); color: #fff; font-size: 13px; font-weight: 800; }
.role-copy { display: grid; gap: 3px; min-width: 0; }
.role-copy strong { font-size: 12px; }
.role-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.role-arrow { margin-left: auto; color: var(--subtle); font-size: 18px; }
.mini-project { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; color: var(--muted); font-size: 11px; border-radius: 6px; }
.mini-project:hover, .mini-project.selected { background: #eef1f5; color: var(--ink); }
.project-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--subtle); }
.project-dot.blue { background: var(--blue); }.project-dot.green { background: var(--green); }.project-dot.orange { background: var(--orange); }
.project-check { margin-left: auto; color: var(--blue); font-size: 12px; }
.sidebar-footer { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line); }
.progress-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.progress-label strong { color: var(--ink); font-size: 10px; }
.progress-track { height: 4px; margin: 9px 0 8px; overflow: hidden; border-radius: 99px; background: #e8ebef; }.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.sidebar-footer p { margin: 0; color: var(--subtle); font-size: 10px; }

.main-content { min-width: 0; background: var(--bg); }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 66px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(246,247,249,.94); }
.breadcrumbs { display: flex; align-items: center; gap: 10px; color: var(--subtle); font-size: 12px; }.breadcrumbs strong { color: var(--ink); font-weight: 680; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.demo-toggle { flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.demo-toggle:hover { border-color: var(--blue); color: var(--blue-strong); }
.demo-inline-note { display: inline-flex; align-items: center; min-height: 30px; color: var(--muted); font-size: 10px; }
.model-control { position: relative; }
.model-switcher { display: inline-flex; align-items: center; gap: 8px; min-width: 156px; min-height: 36px; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); text-align: left; transition: border-color .18s, background .18s, transform .18s; }
.model-switcher:hover { border-color: #a9b4c1; background: #fafbfc; }.model-switcher:active { transform: scale(.96); }.model-switcher:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.model-switcher-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--subtle); }.model-switcher-dot.ready { background: var(--green); box-shadow: 0 0 0 3px #e2f5ed; }.model-switcher-dot.offline { background: var(--orange); box-shadow: 0 0 0 3px #fff0de; }.model-switcher-dot.checking { background: var(--blue); animation: pulse 1.1s ease-in-out infinite; }
.model-switcher-copy { display: grid; gap: 2px; min-width: 0; }.model-switcher-copy small { color: var(--subtle); font-size: 9px; line-height: 1; }.model-switcher-copy strong { max-width: 112px; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 760; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.model-switcher-chevron { margin-left: auto; color: var(--subtle); font-size: 15px; line-height: 1; }
.model-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: min(300px, calc(100vw - 36px)); padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 16px 34px rgba(26, 38, 54, .14); }.model-menu[hidden] { display: none; }.model-menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 7px 8px; border-bottom: 1px solid var(--line); }.model-menu-head strong { font-size: 11px; }.model-menu-head span { color: var(--subtle); font-size: 9px; }.model-options { display: grid; gap: 3px; padding-top: 6px; }.model-option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; transition: background .15s, border-color .15s; }.model-option:hover:not(:disabled) { border-color: var(--line); background: #f8fafc; }.model-option.active { border-color: #cbdafb; background: var(--blue-soft); }.model-option:disabled { cursor: not-allowed; opacity: .58; }.model-option-mark { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--subtle); }.model-option-mark.ready { background: var(--green); }.model-option-mark.pending { background: var(--orange); }.model-option-copy { display: grid; gap: 3px; min-width: 0; }.model-option-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.model-option-copy small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.model-option-state { margin-left: auto; flex: 0 0 auto; color: var(--subtle); font-size: 9px; }.model-option.active .model-option-state { color: var(--blue-strong); font-weight: 760; }.model-menu-empty { padding: 12px 8px; color: var(--muted); font-size: 10px; }
.icon-button, .avatar-button { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--muted); font-size: 12px; }.icon-button:hover { color: var(--ink); border-color: #aeb8c5; }.icon-button.small { width: 24px; height: 24px; }
.avatar-button { border: 0; border-radius: 50%; background: #dfe8f8; color: #345894; font-size: 9px; font-weight: 800; }
.workspace { max-width: 1010px; margin: 0 auto; padding: 38px 34px 50px; }
.view-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; }.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.view-heading h1 { margin: 0; font-size: 26px; letter-spacing: -.03em; line-height: 1.15; }.view-heading p { max-width: 580px; margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.session-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 99px; background: #e5f5ef; color: var(--green); font-size: 10px; font-weight: 750; }.status-pill .status-dot { width: 6px; height: 6px; box-shadow: none; }
.ghost-button, .primary-button { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 7px; font-size: 11px; font-weight: 700; white-space: nowrap; transition: transform .18s, background .18s, border-color .18s; }.ghost-button { border: 1px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer; }.ghost-button:hover { border-color: #a9b4c1; background: #fafbfc; }.primary-button { border: 1px solid var(--blue); background: var(--blue); color: #fff; box-shadow: 0 5px 12px rgba(47,111,237,.18); }.primary-button:hover { background: var(--blue-strong); }.primary-button:active, .ghost-button:active { transform: translateY(1px); }
.practice-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }.practice-panel { min-height: 535px; padding: 24px; }.panel-kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--subtle); font-size: 10px; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }.round-count { color: var(--blue); letter-spacing: 0; }.realtime-availability { margin-left: auto; color: var(--subtle); letter-spacing: 0; text-transform: none; white-space: nowrap; }.realtime-availability.ready { color: var(--green); }.realtime-availability.pending { color: var(--orange); }
.question-block { margin: 54px 0 38px; }.question-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.question-block h2 { max-width: 690px; margin: 0; font-size: clamp(22px, 2.8vw, 31px); letter-spacing: -.04em; line-height: 1.24; }.question-block p { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.question-refresh { flex: 0 0 auto; margin-top: 3px; color: var(--blue-strong); }
.mode-switcher { display: flex; gap: 6px; margin-top: 19px; padding: 4px; width: fit-content; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-muted); }.mode-button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }.mode-button:hover { color: var(--ink); }.mode-button.active { background: #fff; color: var(--blue-strong); box-shadow: 0 1px 4px rgba(28, 47, 72, .08); }
.answer-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: var(--ink); font-size: 11px; font-weight: 750; }.answer-label span { color: var(--subtle); font-weight: 500; }.answer-box { width: 100%; min-height: 126px; padding: 14px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 8px; outline: none; color: var(--ink); background: #fcfdfe; font-size: 13px; line-height: 1.7; transition: border-color .18s, box-shadow .18s; }.answer-box::placeholder { color: #a4adb8; }.answer-box:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,111,237,.1); background: #fff; }.answer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }.answer-footer p { margin: 0; color: var(--subtle); font-size: 10px; }.answer-actions { display: flex; align-items: center; gap: 8px; }
.voice-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 77px; min-height: 34px; padding: 0 10px; border: 1px solid #c6d6f6; border-radius: 7px; background: #f6f9ff; color: var(--blue-strong); font-size: 11px; font-weight: 700; white-space: nowrap; }.voice-button:hover { border-color: #9eb9ef; background: var(--blue-soft); }.voice-button.recording { border-color: #e5a8a8; background: #fff4f4; color: #b34b4b; }.mic-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }.voice-button.recording .mic-dot { animation: pulse 1.1s ease-in-out infinite; } .voice-preview { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border: 1px solid #d7e2f5; border-radius: 7px; background: #f7faff; color: #55709b; font-size: 10px; }.voice-preview audio { width: min(100%, 280px); height: 28px; }.recording-note { display: inline-flex; align-items: center; gap: 6px; color: #b34b4b; font-size: 10px; }.recording-note .mic-dot { width: 6px; height: 6px; } @keyframes pulse { 0%,100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.feedback-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }.feedback-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.feedback-head strong { font-size: 12px; }.feedback-score { color: var(--green); font-size: 12px; font-weight: 800; }.feedback-text { margin: 0; color: #4d5a68; font-size: 12px; line-height: 1.7; }.feedback-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }.feedback-tag { padding: 5px 7px; border-radius: 5px; background: #f1f4f7; color: #647180; font-size: 10px; }.feedback-tag.warn { background: #fff4e6; color: #9d612a; }
.thinking-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }.thinking-card { min-height: 75px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fafbfd; }.thinking-card.emphasis { border-color: #d7e2f5; background: #f7faff; }.thinking-card small, .coach-question small, .story-label, .story-basis, .story-steering small { color: var(--subtle); font-size: 10px; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }.thinking-card p, .coach-question p, .story-preview p { margin: 6px 0 0; color: #4d5a68; font-size: 11px; line-height: 1.55; }.coach-question { margin-top: 10px; padding: 12px 13px; border-left: 3px solid var(--orange); background: #fff8ee; }.coach-question small { color: #a86c2c; }.coach-question p { color: #76542f; }.story-preview { margin-top: 10px; padding: 12px 13px; border: 1px solid #d7e2f5; border-radius: 7px; background: #f7faff; }.story-label { display: flex; justify-content: space-between; color: var(--blue-strong); }.story-preview p { color: #34527e; }.story-basis { display: block; margin-top: 8px; color: #718096; font-weight: 600; letter-spacing: 0; text-transform: none; }.story-steering { margin-top: 9px; padding-top: 9px; border-top: 1px solid #e0e8f3; }.story-steering small { color: #607da7; }.story-steering p { margin-top: 4px; color: #496b9d; }.coach-list { display: grid; gap: 5px; margin: 11px 0 0; padding-left: 18px; color: #647180; font-size: 11px; line-height: 1.45; }
.evidence-sources { display: grid; gap: 9px; margin-top: 13px; padding: 12px 13px; border: 1px solid #dce5ef; border-radius: 7px; background: #fbfcfe; }.evidence-sources > small { color: var(--subtle); font-size: 10px; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }.evidence-sources > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.evidence-source { display: flex; align-items: flex-start; gap: 8px; }.evidence-source + .evidence-source { padding-top: 9px; border-top: 1px solid var(--line); }.evidence-source > span { display: grid; place-items: center; flex: 0 0 auto; width: 19px; height: 19px; border-radius: 5px; background: var(--blue-soft); color: var(--blue-strong); font-size: 9px; font-weight: 800; }.evidence-source-body { display: grid; gap: 3px; min-width: 0; }.evidence-source-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }.evidence-source strong { min-width: 0; overflow: hidden; color: #405264; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.evidence-source small { color: var(--muted); font-size: 9px; }.evidence-source-head small { flex: 0 0 auto; white-space: nowrap; }.evidence-source-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.evidence-source-snippet { margin: 5px 0 0; color: #4d5a68; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }.evidence-source-snippet span { margin-right: 6px; color: var(--blue-strong); font-size: 9px; font-weight: 780; }.evidence-source-snippet.is-missing { color: var(--muted); }.evidence-sources.empty p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.example-answer { display: grid; gap: 9px; margin-top: 15px; padding: 14px 15px; border: 1px solid rgba(104, 126, 255, .42); border-radius: 10px; background: linear-gradient(145deg, rgba(47, 56, 94, .5), rgba(23, 26, 36, .72)); }.example-answer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.example-answer-head > div { display: grid; gap: 3px; }.example-answer-head small { color: #aebdff; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.example-answer-head strong { color: #eef1ff; font-size: 11px; }.example-answer-head > span { color: #aeb8d5; font-size: 9px; white-space: nowrap; }.example-answer > p { margin: 0; color: #eef1f8; font-size: 12px; line-height: 1.75; }.answer-citation-text { display: inline; padding: 1px 3px; border-radius: 3px; background: rgba(101, 124, 255, .2); color: #d9e1ff; font-weight: 720; }.answer-citation { display: inline-block; margin-inline: 2px; padding: 1px 5px; border: 1px solid rgba(143, 164, 255, .6); border-radius: 4px; background: rgba(101, 124, 255, .2); color: #b9c7ff; font-size: .86em; font-weight: 800; }.example-answer-note { display: flex; align-items: center; gap: 9px; color: #8995ae; font-size: 9px; }.citation-legend { color: #b9c7ff; }.golden-card { display: grid; gap: 9px; padding-top: 11px; border-top: 1px solid rgba(156, 169, 222, .2); }.golden-card-head { display: flex; align-items: center; gap: 9px; }.golden-icon { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255, 199, 103, .6); border-radius: 8px; background: rgba(245, 181, 72, .14); color: #ffd27e; }.golden-icon svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }.golden-card-head div { display: grid; gap: 2px; }.golden-card-head strong { color: #ffd27e; font-size: 11px; }.golden-card-head small { color: #a6adbf; font-size: 9px; }.golden-method { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.golden-method small, .golden-row small { color: #9ea8bf; font-size: 9px; }.golden-method strong { color: #fff0c8; font-size: 11px; }.golden-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: start; }.golden-row p { margin: 0; color: #d2d8e6; font-size: 10px; line-height: 1.5; }.review-example-lab { margin-top: 22px; }.review-example-lab .review-section-head { margin-bottom: 12px; }.review-example-lab .review-section-head h3 { margin: 0; }.review-example-lab .review-section-subtitle { margin: 5px 0 0; }.example-answer-item + .example-answer-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }.example-answer-question { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; }.example-answer-question span { color: var(--blue-strong); font-size: 10px; font-weight: 800; }.example-answer-question strong { color: var(--ink); font-size: 11px; line-height: 1.5; }.example-answer.is-compact { margin-top: 0; }
.next-question { margin-top: 19px; padding: 13px 14px; border-left: 3px solid var(--blue); background: var(--blue-soft); }.next-question small { display: block; margin-bottom: 5px; color: var(--blue-strong); font-size: 10px; font-weight: 800; }.next-question p { margin: 0; color: #34527e; font-size: 12px; line-height: 1.6; }
.rail-card { padding: 16px; }.rail-card + .rail-card { margin-top: 14px; }.rail-card h3 { margin: 0 0 13px; font-size: 12px; }.match-row { display: grid; gap: 6px; padding: 11px 0; border-top: 1px solid var(--line); }.match-row:first-of-type { padding-top: 0; border-top: 0; }.match-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #4a5765; font-size: 11px; }.match-top strong { color: var(--green); font-size: 10px; }.match-top strong.partial { color: var(--orange); }.match-bar { height: 4px; overflow: hidden; border-radius: 99px; background: #e9edf1; }.match-bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); }.match-bar span.partial { background: var(--orange); }.current-project { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }.current-project-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #e8effd; color: var(--blue); font-size: 11px; font-weight: 800; }.current-project strong { display: block; font-size: 11px; }.current-project small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }.bullet-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }.bullet-list li { position: relative; padding-left: 13px; color: #596674; font-size: 11px; line-height: 1.45; }.bullet-list li::before { position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); content: ""; }
.view-table { width: 100%; border-collapse: collapse; font-size: 12px; }.view-table th { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--subtle); font-size: 10px; font-weight: 780; text-align: left; text-transform: uppercase; letter-spacing: .06em; }.view-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); color: #4e5b68; vertical-align: top; line-height: 1.55; }.view-table td:first-child { color: var(--ink); font-weight: 700; }.view-table tr:last-child td { border-bottom: 0; }.table-subline { display: block; max-width: 360px; margin-top: 4px; overflow: hidden; color: var(--subtle); font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.table-empty { padding: 28px 12px !important; color: var(--muted) !important; font-weight: 500 !important; text-align: center; }.empty-note { padding: 28px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.7; }.knowledge-summary { display: flex; align-items: center; gap: 8px; margin: -8px 0 18px; color: var(--muted); font-size: 11px; }.knowledge-summary-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #e2f5ed; }
.review-tabs { display: flex; gap: 5px; margin: -5px 0 19px; padding: 4px; width: fit-content; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-muted); }.review-tab { min-height: 30px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; }.review-tab:hover { color: var(--ink); }.review-tab.active { background: #fff; color: var(--blue-strong); box-shadow: 0 1px 4px rgba(28, 47, 72, .08); }.review-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 17px; }.review-summary-card { display: grid; gap: 5px; padding: 14px 15px; box-shadow: none; }.review-summary-card small { color: var(--subtle); font-size: 10px; font-weight: 760; text-transform: uppercase; letter-spacing: .05em; }.review-summary-card strong { font-size: 20px; letter-spacing: -.03em; }.review-summary-card span { color: var(--muted); font-size: 10px; line-height: 1.45; }.review-grid { align-items: start; }.review-report-panel { min-height: auto; }.review-intro { margin: 38px 0 27px; }.review-intro h2 { font-size: 26px; }.review-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.review-columns h3 { margin: 0 0 9px; font-size: 12px; }.review-list { display: grid; gap: 7px; margin: 0; padding: 0 0 0 17px; color: #596674; font-size: 11px; line-height: 1.55; }.review-list.positive li::marker { color: var(--green); }.review-muted { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.review-callout { margin-top: 24px; padding: 13px 14px; border-left: 3px solid var(--blue); background: var(--blue-soft); }.review-callout strong { color: var(--blue-strong); font-size: 11px; }.review-callout p { margin: 5px 0 0; color: #496b9d; font-size: 11px; line-height: 1.55; }.review-round { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 11px 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }.review-round:first-of-type { border-top: 0; padding-top: 0; }.review-round > span { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; background: var(--blue-soft); color: var(--blue-strong); font-size: 10px; font-weight: 800; }.review-round > div { display: grid; gap: 3px; min-width: 0; }.review-round strong { overflow: hidden; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }.review-round small { color: var(--muted); font-size: 9px; }.review-round b { margin-left: auto; color: var(--subtle); font-size: 16px; font-weight: 500; }.review-round:hover strong { color: var(--blue-strong); }.review-empty { display: grid; justify-items: start; gap: 10px; padding: 42px 28px; }.review-empty-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #cbdafb; border-radius: 50%; color: var(--blue); font-size: 20px; }.review-empty h2 { margin: 0; font-size: 19px; }.review-empty p { max-width: 520px; margin: 0 0 5px; color: var(--muted); font-size: 12px; line-height: 1.6; }.history-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 15px; align-items: start; }.history-list-panel { padding: 16px; box-shadow: none; }.history-sessions, .history-records { display: grid; gap: 4px; margin-top: 11px; }.history-session, .history-record { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; }.history-session:hover, .history-session.active, .history-record:hover, .history-record.active { border-color: #cbdafb; background: var(--blue-soft); }.history-session-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); }.history-session div, .history-record > span:last-child { display: grid; gap: 3px; min-width: 0; }.history-session strong, .history-record strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.history-session small, .history-record small { color: var(--muted); font-size: 9px; }.history-session b { margin-left: auto; color: var(--subtle); font-size: 16px; font-weight: 500; }.history-list-kicker { margin-top: 21px; }.history-record { align-items: flex-start; }.history-round { display: grid; place-items: center; flex: 0 0 auto; width: 23px; height: 23px; border-radius: 5px; background: #f1f4f7; color: var(--muted); font-size: 9px; font-weight: 800; }.history-record.active .history-round { background: #d9e6ff; color: var(--blue-strong); }.history-detail { min-height: 470px; padding: 21px; box-shadow: none; }.history-question { margin: 38px 0 25px; }.history-question small, .history-answer > small, .history-insights small { color: var(--subtle); font-size: 10px; font-weight: 760; text-transform: uppercase; letter-spacing: .05em; }.history-question h2 { max-width: 650px; margin: 8px 0 0; font-size: 23px; line-height: 1.35; }.history-answer { padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #fafbfd; }.history-answer p { margin: 7px 0 0; color: #4d5a68; font-size: 12px; line-height: 1.7; white-space: pre-wrap; }.audio-attached { display: inline-flex; margin-top: 9px; padding: 4px 7px; border-radius: 4px; background: #edf3ff; color: var(--blue-strong); font-size: 9px; }.history-feedback { margin-top: 22px; }.history-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 15px; }.history-insights > div { padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fafbfd; }.history-insights > div:last-child { border-color: #d7e2f5; background: #f7faff; }.history-insights p { margin: 6px 0 0; color: #4d5a68; font-size: 11px; line-height: 1.55; }.review-audio-panel { padding: 22px; }.pending-pill { background: #fff4e6; color: var(--orange); }.audio-import-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 31px 0 22px; }.audio-import-head h2 { margin: 0; font-size: 23px; }.audio-import-head p { max-width: 580px; margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.audio-upload-button { display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; }.audio-empty { display: flex; align-items: center; gap: 11px; padding: 15px; border: 1px dashed var(--line-strong); border-radius: 7px; background: #fafbfd; }.audio-empty-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--blue-soft); color: var(--blue-strong); font-size: 15px; }.audio-empty p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }.imported-audio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 300px) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid #d7e2f5; border-radius: 7px; background: #f7faff; }.imported-audio div { display: grid; gap: 4px; min-width: 0; }.imported-audio strong { overflow: hidden; color: #405264; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.imported-audio small { color: var(--muted); font-size: 9px; }.imported-audio audio { width: 100%; height: 29px; }.audio-contract { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--muted); font-size: 10px; }.audio-contract span { color: var(--subtle); font-weight: 760; }.audio-contract code { padding: 4px 6px; border-radius: 4px; background: #f1f4f7; color: #596674; font-size: 9px; }
.right-rail { min-height: 100dvh; padding: 23px 20px; border-left: 1px solid var(--line); background: #fbfcfd; }.rail-header { display: flex; align-items: flex-start; margin-bottom: 27px; color: var(--muted); }.rail-header-copy { display: grid; gap: 4px; }.rail-header-copy strong { color: var(--ink); font-size: 14px; font-weight: 780; line-height: 1.2; }.rail-header-copy small { color: var(--subtle); font-size: 10px; line-height: 1.4; }.context-block { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }.context-label { margin-bottom: 8px; color: var(--subtle); font-size: 10px; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }.context-title { font-size: 14px; font-weight: 760; line-height: 1.4; }.context-company { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--muted); font-size: 11px; }.company-mark { width: 22px; height: 22px; border-radius: 5px; font-size: 10px; }.skill-list { display: flex; flex-wrap: wrap; gap: 6px; }.skill-chip { padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--muted); font-size: 10px; }.skill-chip.current { border-color: #b9cdf8; background: var(--blue-soft); color: var(--blue-strong); font-weight: 700; }.evidence-title { margin-bottom: 12px; color: var(--ink); font-size: 12px; font-weight: 760; }.evidence-item { display: grid; gap: 4px; margin-bottom: 11px; color: #53606e; font-size: 11px; line-height: 1.45; }.evidence-key { color: var(--subtle); font-size: 10px; }.evidence-link { padding: 0; border: 0; background: transparent; color: var(--blue); font-size: 11px; }.tip-block { display: flex; gap: 9px; padding: 12px; border: 1px solid #d8e4fb; border-radius: 8px; background: var(--blue-soft); }.tip-icon { display: grid; place-items: center; flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; background: #cdddfd; color: var(--blue-strong); font-size: 10px; font-weight: 800; }.tip-block strong { color: #34527e; font-size: 10px; }.tip-block p { margin: 5px 0 0; color: #5b7295; font-size: 10px; line-height: 1.5; }
.toast { position: fixed; right: 24px; bottom: 22px; z-index: 10; max-width: 320px; padding: 11px 14px; border: 1px solid #cdd8e7; border-radius: 8px; opacity: 0; transform: translateY(8px); background: #fff; box-shadow: var(--shadow); color: var(--ink); font-size: 11px; pointer-events: none; transition: opacity .2s, transform .2s; }.toast.visible { opacity: 1; transform: translateY(0); }
.fade-in { animation: fade-in .28s ease both; } @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.button-icon { width: 15px; height: 15px; margin-inline-end: 6px; object-fit: contain; }
.button-icon-on-dark { filter: brightness(0) invert(1); }
.question-refresh { gap: 5px; }
.context-label { display: flex; align-items: center; gap: 6px; }
.context-label-icon { width: 14px; height: 14px; object-fit: contain; opacity: .8; }
.project-manage-menu { position: relative; }
.project-manage-menu > summary { list-style: none; cursor: pointer; }
.project-manage-menu > summary::-webkit-details-marker { display: none; }
.project-manage-popover { position: absolute; top: calc(100% + 7px); right: 0; z-index: 5; display: grid; min-width: 148px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
.project-manage-item { padding: 8px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font-size: 10px; text-align: left; }
.project-manage-item:hover { background: var(--blue-soft); }
.project-manage-item.danger { color: #c44c62; }
.overview-practice-panel { min-height: 0; }
.overview-practice-panel .question-block { margin-bottom: 24px; }
.match-status-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 12px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.status-key { width: 7px; height: 7px; border-radius: 50%; }
.evidence-key-dot { margin-inline-start: 2px; background: var(--green); }
.model-key-dot { margin-inline-start: 8px; background: var(--blue); }
.evidence-status { background: #e5f5ef; color: #16845f; }
.model-status { background: var(--blue-soft); color: var(--blue-strong); }

/* Keep report tabs calm: the active tab uses a stable surface instead of a moving blue edge. */
.review-tabs .t-tabs-pill,
.review-report-tabs .t-tabs-pill { display: none; }
.review-tab.active,
.review-report-tab.active { background: var(--panel); color: var(--blue-strong); box-shadow: 0 1px 3px rgba(28, 47, 72, .1); }
.review-tab:focus-visible,
.review-report-tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset: 1px; }

@media (max-width: 1160px) { .app-shell { grid-template-columns: 220px minmax(0, 1fr); }.right-rail { display: none; } }
@media (max-width: 760px) { .app-shell { display: block; }.sidebar { min-height: auto; padding: 14px 14px 10px; border-right: 0; border-bottom: 1px solid var(--line); }.brand-block { padding-bottom: 14px; }.workspace-picker, .sidebar-section, .sidebar-footer { display: none; }.nav-list { grid-template-columns: repeat(5, 1fr); gap: 4px; }.nav-item { justify-content: center; min-height: 36px; padding: 0 2px; font-size: 10px; }.nav-item .nav-glyph { display: none; }.nav-item span:not(.nav-glyph):not(.nav-count):not(.nav-live) { display: inline; }.nav-count, .nav-live { display: none !important; }.topbar { height: 56px; padding: 0 18px; }.model-switcher { min-width: 130px; max-width: 145px; }.model-switcher-copy strong { max-width: 92px; }.workspace { padding: 24px 16px 38px; }.view-heading { display: block; }.session-meta { justify-content: flex-start; margin-top: 14px; }.practice-grid { grid-template-columns: 1fr; }.practice-panel { padding: 18px; min-height: 0; }.question-block { margin: 35px 0 28px; }.question-heading { align-items: flex-start; gap: 10px; }.question-block h2 { font-size: 24px; }.question-refresh { padding: 0 9px; }.answer-footer { align-items: flex-start; flex-direction: column; }.answer-actions { width: 100%; }.answer-actions button { flex: 1; }.rail-card { box-shadow: none; }.view-table { display: block; overflow-x: auto; white-space: nowrap; } }
@media (max-width: 520px) { .thinking-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .review-summary-grid { grid-template-columns: 1fr; }.review-columns, .history-insights { grid-template-columns: 1fr; }.review-intro { margin-top: 28px; }.review-intro h2, .history-question h2, .audio-import-head h2 { font-size: 21px; }.history-layout { grid-template-columns: 1fr; }.audio-import-head { align-items: flex-start; flex-direction: column; }.imported-audio { grid-template-columns: 1fr; }.imported-audio audio { max-width: 100%; }.audio-contract { align-items: flex-start; flex-direction: column; gap: 5px; }.review-tabs { max-width: 100%; overflow-x: auto; }.review-tab { flex: 0 0 auto; } }

.ready-pill { background: #e7f6ef; color: var(--green); }
.review-transcript-input { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.review-input-head, .review-input-footer, .review-report-head, .review-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-input-head h3, .review-report-result h3, .review-section-head h3 { margin: 0; font-size: 12px; }
.review-input-head p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.review-transcript-input textarea { display: block; width: 100%; min-height: 156px; margin-top: 13px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 7px; outline: 0; resize: vertical; background: #fff; color: var(--ink); font: inherit; font-size: 12px; line-height: 1.65; }
.review-transcript-input textarea:focus { border-color: #9eb9ef; box-shadow: 0 0 0 3px rgba(91, 132, 214, .12); }
.review-input-footer { margin-top: 10px; }
.review-input-footer > span { color: var(--subtle); font-size: 10px; }
.review-input-footer .primary-button:disabled { cursor: not-allowed; opacity: .45; }
.review-report-result { margin-top: 24px; padding-top: 23px; border-top: 1px solid var(--line); }
.review-report-head { align-items: flex-start; }
.review-report-head .panel-kicker { margin-bottom: 10px; }
.review-report-head h2 { width: min(100%, 645px); max-width: 645px; margin: 0; padding-left: 12px; border-left: 4px solid var(--blue); font-size: 14px; font-weight: 300; line-height: 1.65; }
.review-report-head .ready-pill { width: 221px; min-width: 221px; justify-content: center; }
.review-overall-score { flex: 0 0 auto; color: var(--green); font-size: 23px; }
.review-report-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.review-report-columns > section { min-width: 0; }
.review-point-list { display: grid; gap: 8px; margin-top: 10px; }
.review-point { padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.review-point h4 { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.45; }
.review-evidence { margin-top: 8px; padding-top: 8px; border-top: 1px solid #edf0f3; }
.review-evidence small { color: var(--subtle); font-size: 9px; font-weight: 750; }
.review-evidence p { margin: 4px 0 0; color: #4d5a68; font-size: 10px; line-height: 1.55; }
.review-evidence > span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.review-question-reviews { margin-top: 23px; }
.review-section-head > span { color: var(--muted); font-size: 10px; }
.review-question-card { margin-top: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.review-question-top { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 9px; align-items: start; }
.review-question-top > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: var(--blue-soft); color: var(--blue-strong); font-size: 9px; font-weight: 800; }
.review-question-top h4 { margin: 3px 0 0; color: var(--ink); font-size: 11px; line-height: 1.5; }
.review-question-top strong { color: var(--green); font-size: 11px; }
.review-answer-quote { margin-top: 11px; padding: 10px 11px; border-left: 3px solid #cbdafb; background: #f7faff; }
.review-answer-quote small, .review-question-grid small, .review-next-question small { color: var(--subtle); font-size: 9px; font-weight: 750; }
.review-answer-quote p, .review-question-grid p, .review-next-question p { margin: 5px 0 0; color: #4d5a68; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
.review-question-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 11px; }
.review-question-grid > div { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; }
.review-next-question { margin-top: 10px; padding: 10px 11px; border-left: 3px solid var(--orange); background: #fff8ee; }
.review-report-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }
.review-actions { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 18px; color: #596674; font-size: 10px; line-height: 1.5; }
.review-report-empty { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 17px; border: 1px dashed var(--line-strong); border-radius: 7px; background: #fafbfd; }
.review-report-empty h3 { margin: 0; font-size: 12px; }
.review-report-empty p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.review-transcript { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 13px; }
.review-transcript summary { cursor: pointer; color: var(--blue-strong); font-size: 10px; font-weight: 700; }
.review-transcript p { max-height: 260px; overflow: auto; margin: 10px 0 0; padding: 11px; border-radius: 6px; background: #fafbfd; color: #596674; font-size: 10px; line-height: 1.65; white-space: pre-wrap; }
@media (max-width: 760px) { .review-report-columns, .review-report-footer { grid-template-columns: 1fr; }.review-report-head { align-items: flex-start; }.review-report-head h2 { width: 100%; max-width: 100%; font-size: 14px; }.review-report-head .ready-pill { width: auto; min-width: 0; max-width: 100%; }.review-overall-score { font-size: 19px; }.review-question-grid { grid-template-columns: 1fr; }.review-input-head { align-items: flex-start; flex-direction: column; }.review-input-footer { align-items: flex-start; flex-direction: column; }.review-input-footer .primary-button { width: 100%; }.review-report-empty { align-items: flex-start; } }

/* Focus theme: dark surfaces with one controlled gradient accent. */
:root {
  --bg: #090b10;
  --panel: #11141b;
  --panel-muted: #171b24;
  --line: #252b37;
  --line-strong: #3a4353;
  --ink: #f2f5fb;
  --muted: #9aa5b5;
  --subtle: #6f7b8d;
  --blue: #7d8cff;
  --blue-strong: #b4beff;
  --blue-soft: #1c2135;
  --green: #65d7ae;
  --orange: #ffb26f;
  --accent-start: #7084ff;
  --accent-end: #c06dff;
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --radius: 12px;
}

html, body { background: var(--bg); }
body { color: var(--ink); }
.app-shell { background: var(--bg); }
.sidebar { background: #0d0f14; border-color: var(--line); }
.brand-mark { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); box-shadow: 0 8px 22px rgba(112, 132, 255, .22); }
.brand-subtitle, .sidebar-footer p { color: var(--subtle); }
.workspace-picker, .role-card { border-color: var(--line); background: #11141b; color: var(--muted); }
.workspace-picker:hover, .role-card:hover { border-color: #434d60; background: #151923; }
.nav-item { color: var(--muted); }
.nav-item:hover, .mini-project:hover, .mini-project.selected { background: #171b24; color: var(--ink); }
.nav-item.active { background: linear-gradient(90deg, rgba(112, 132, 255, .2), rgba(192, 109, 255, .08)); color: #d3d8ff; box-shadow: inset 2px 0 0 var(--accent-start); }
.nav-live { background: rgba(101, 215, 174, .12); color: var(--green); }
.sidebar-section-head, .panel-kicker, .context-label { color: var(--subtle); }
.role-copy small, .mini-project { color: var(--muted); }
.role-logo, .company-mark { background: #1d2230; }
.project-dot { background: #566174; }
.project-dot.blue { background: var(--accent-start); }
.project-dot.green { background: var(--green); }
.project-dot.orange { background: var(--orange); }
.progress-track { background: #202632; }
.progress-track span, .match-bar span { background: linear-gradient(90deg, var(--accent-start), var(--accent-end)); }
.main-content { background: linear-gradient(180deg, #0a0c11 0%, #090b10 70%); }
.topbar { border-color: var(--line); background: rgba(9, 11, 16, .88); backdrop-filter: blur(16px); }
.breadcrumbs { color: var(--subtle); }
.breadcrumbs strong, .view-heading h1 { color: var(--ink); }
.model-switcher, .icon-button, .avatar-button { border-color: var(--line-strong); background: #11141b; color: var(--ink); }
.model-switcher:hover, .icon-button:hover { border-color: #67728b; background: #171b24; }
.model-switcher-copy small, .model-switcher-chevron { color: var(--subtle); }
.model-switcher-dot.ready { box-shadow: 0 0 0 3px rgba(101, 215, 174, .13); }
.model-switcher-dot.offline { box-shadow: 0 0 0 3px rgba(255, 178, 111, .13); }
.model-menu { border-color: var(--line); background: #11141b; box-shadow: 0 22px 48px rgba(0, 0, 0, .5); }
.model-menu-head { border-color: var(--line); }
.model-option { color: var(--ink); }
.model-option:hover:not(:disabled) { border-color: var(--line-strong); background: #171b24; }
.model-option.active { border-color: rgba(125, 140, 255, .45); background: linear-gradient(90deg, rgba(112, 132, 255, .18), rgba(192, 109, 255, .08)); }
.model-option-copy small, .model-option-state { color: var(--muted); }
.avatar-button { background: linear-gradient(135deg, #273054, #3c2450); color: #e0e4ff; }
.view-heading p, .question-block p { color: var(--muted); }
.status-pill { background: rgba(101, 215, 174, .12); color: var(--green); }
.status-pill .status-dot { background: var(--green); }
.ghost-button { border-color: var(--line-strong); background: #11141b; color: var(--ink); }
.ghost-button:hover { border-color: #64708a; background: #191e29; }
.primary-button { border-color: transparent; background: linear-gradient(110deg, var(--accent-start), var(--accent-end)); color: #fff; box-shadow: 0 9px 24px rgba(112, 132, 255, .2); }
.primary-button:hover { background: linear-gradient(110deg, #8294ff, #cb7aff); box-shadow: 0 12px 30px rgba(160, 110, 255, .26); }
.panel { border-color: var(--line); background: var(--panel); box-shadow: var(--shadow); }

/* The answer surface is the visual anchor of the practice flow. */
.practice-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
.practice-panel { position: relative; overflow: hidden; border: 1px solid transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(135deg, rgba(112, 132, 255, .72), rgba(192, 109, 255, .34) 52%, rgba(37, 43, 55, .8)) border-box; box-shadow: 0 28px 86px rgba(0, 0, 0, .42), 0 0 0 1px rgba(112, 132, 255, .06); }
.practice-panel::before { position: absolute; top: 0; right: 28px; left: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-start), var(--accent-end), transparent); content: ""; opacity: .85; }
.practice-grid > div { opacity: .84; }
.practice-panel .panel-kicker { color: #8f9ab0; }
.round-count { color: var(--blue-strong); }
.question-block { margin: 62px 0 42px; }
.question-block h2 { color: #fbfcff; font-size: clamp(25px, 3vw, 37px); letter-spacing: -.045em; line-height: 1.2; text-wrap: balance; }
.question-block p { max-width: 670px; }
.question-refresh { border-color: rgba(125, 140, 255, .38); background: rgba(112, 132, 255, .08); color: var(--blue-strong); }
.question-refresh:hover { border-color: rgba(192, 109, 255, .62); background: rgba(192, 109, 255, .12); color: #e2d8ff; }
.mode-switcher { border-color: var(--line); background: #0d1016; }
.mode-button { color: var(--muted); }
.mode-button:hover { color: var(--ink); }
.mode-button.active { background: linear-gradient(110deg, var(--accent-start), var(--accent-end)); color: #fff; box-shadow: 0 5px 18px rgba(112, 132, 255, .24); }
.answer-label { color: #dfe4ef; }
.answer-label span { color: var(--subtle); }
.answer-box { min-height: 142px; border-color: #303849; background: #0b0e14; color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02); }
.answer-box::placeholder { color: #667185; }
.answer-box:hover { border-color: #475269; }
.answer-box:focus { border-color: transparent; background: #0c1018; box-shadow: 0 0 0 1px var(--accent-start), 0 0 0 3px rgba(112, 132, 255, .17), 0 16px 38px rgba(0, 0, 0, .2); }
.answer-footer { padding-top: 14px; border-top: 1px solid rgba(37, 43, 55, .86); }
.answer-footer p, .api-status { color: var(--subtle); }
.voice-button { border-color: #39445a; background: #151a25; color: #bdc6ff; }
.voice-button:hover { border-color: #6a79ae; background: #1b2131; }
.voice-button.recording { border-color: rgba(255, 141, 141, .58); background: rgba(255, 141, 141, .1); color: #ff9f9f; }
.voice-preview { border-color: #36415a; background: #151a25; color: #aeb9e9; }
.feedback-block { border-color: var(--line); }
.feedback-text, .thinking-card p, .coach-list { color: #bdc5d2; }
.feedback-score { color: var(--green); }
.feedback-tag { background: #1b202a; color: #aab4c2; }
.feedback-tag.warn { background: rgba(255, 178, 111, .12); color: var(--orange); }
.thinking-card { border-color: var(--line); background: #151921; }
.thinking-card.emphasis { border-color: rgba(125, 140, 255, .34); background: rgba(112, 132, 255, .09); }
.thinking-card p, .coach-question p, .story-preview p { color: #c5ccd8; }
.coach-question { border-color: var(--orange); background: rgba(255, 178, 111, .08); }
.coach-question small { color: var(--orange); }
.story-preview { border-color: rgba(125, 140, 255, .34); background: rgba(112, 132, 255, .08); }
.story-label { color: var(--blue-strong); }
.story-preview p { color: #d0d6e6; }
.story-basis { color: #8995ac; }
.story-steering { border-color: rgba(125, 140, 255, .18); }
.story-steering small { color: #a6b0d8; }
.story-steering p { color: #bec7e6; }
.evidence-sources { border-color: var(--line); background: #0e1219; }
.evidence-source > span { background: rgba(112, 132, 255, .15); color: var(--blue-strong); }
.evidence-source strong { color: #d6dcea; }
.evidence-source small, .evidence-sources > p { color: var(--muted); }
.evidence-source-snippet { color: #c5ccd8; }
.evidence-source-snippet.is-missing { color: var(--muted); }
.example-answer-question strong { color: var(--ink); }
.next-question { border-color: var(--accent-start); background: linear-gradient(90deg, rgba(112, 132, 255, .13), rgba(192, 109, 255, .06)); }
.next-question small { color: var(--blue-strong); }
.next-question p { color: #d3d9ea; }
.rail-card { border-color: var(--line); background: #10131a; }
.rail-card h3 { color: #dbe1eb; }
.match-row { border-color: var(--line); }
.match-top { color: #aeb7c7; }
.match-bar { background: #222936; }
.bullet-list li { color: #98a3b4; }
.bullet-list li::before { background: var(--accent-start); }
.right-rail { border-color: var(--line); background: #0d0f14; }
.rail-header { color: var(--muted); }
.context-title, .evidence-title { color: #dfe5f0; }
.context-company, .evidence-item { color: var(--muted); }
.skill-chip { border-color: var(--line); background: #151921; color: var(--muted); }
.skill-chip.current { border-color: rgba(125, 140, 255, .42); background: rgba(112, 132, 255, .14); color: var(--blue-strong); }
.evidence-key { color: var(--subtle); }
.evidence-link { color: var(--blue-strong); }
.current-project-mark { background: rgba(112, 132, 255, .16); color: var(--blue-strong); }
.tip-block { border-color: rgba(125, 140, 255, .28); background: rgba(112, 132, 255, .11); }
.tip-icon { background: rgba(125, 140, 255, .28); color: #d8ddff; }
.tip-block strong { color: #d7ddff; }
.tip-block p { color: #aab4d8; }

/* Keep secondary surfaces legible after the theme switch. */
.review-tabs, .review-transcript-input, .review-answer, .history-answer, .history-insights > div, .review-point, .review-question-card, .review-report-empty, .audio-empty, .imported-audio { border-color: var(--line); background: #11141b; color: var(--ink); }
.review-tab.active, .history-session:hover, .history-session.active, .history-record:hover, .history-record.active { border-color: rgba(125, 140, 255, .42); background: rgba(112, 132, 255, .12); }
.review-tab { color: var(--muted); }
.review-tab.active { color: var(--blue-strong); box-shadow: none; }
.review-muted, .history-answer p, .history-insights p, .review-question-grid p, .review-answer-quote p, .review-next-question p, .review-report-empty p, .review-transcript p { color: #b5bfce; }
.review-answer-quote, .review-transcript p { border-color: rgba(125, 140, 255, .26); background: #0e1219; }
.review-question-grid > div { border-color: var(--line); background: #151921; }
.review-next-question { background: rgba(255, 178, 111, .08); }
.review-next-question p { color: #d4c1aa; }
.review-report-head h2 { border-color: var(--accent-start); color: #dbe2f1; }
.review-report-head .ready-pill { background: rgba(101, 215, 174, .12); color: var(--green); }
.history-round { background: #1b202a; color: var(--muted); }
.history-record.active .history-round { background: rgba(112, 132, 255, .2); color: var(--blue-strong); }
.history-detail, .history-list-panel, .review-report-panel, .review-audio-panel { background: #11141b; }
.audio-contract code { background: #1b202a; color: #aeb8c8; }
.toast { border-color: var(--line-strong); background: #171b24; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); color: var(--ink); }

@media (max-width: 760px) {
  .topbar { background: rgba(9, 11, 16, .94); }
  .workspace { padding: 24px 16px 42px; }
  .practice-grid { grid-template-columns: 1fr; gap: 16px; }
  .practice-panel { padding: 20px 18px; }
  .question-block { margin: 42px 0 32px; }
  .question-block h2 { font-size: 27px; }
  .practice-grid > div { opacity: 1; }
  .answer-box { min-height: 154px; }
}

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

@media (max-width: 760px) {
  .practice-panel .panel-kicker {
    flex-wrap: wrap;
  }

  .practice-panel .realtime-availability {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Theme control */
.theme-toggle { position: relative; width: 38px; height: 38px; min-width: 38px; border-radius: 10px; overflow: hidden; }
.theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.theme-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; line-height: 1; transition: opacity .18s cubic-bezier(.2, 0, 0, 1), transform .18s cubic-bezier(.2, 0, 0, 1); }
.theme-icon-light { opacity: 1; transform: scale(1) rotate(0); }
.theme-icon-dark { opacity: 0; transform: scale(.65) rotate(-18deg); }
html[data-theme="light"] .theme-icon-light { opacity: 0; transform: scale(.65) rotate(18deg); }
html[data-theme="light"] .theme-icon-dark { opacity: 1; transform: scale(1) rotate(0); }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-muted: #f1f3f6;
  --line: #e3e7ec;
  --line-strong: #cfd6df;
  --ink: #172230;
  --muted: #6e7885;
  --subtle: #8e98a4;
  --blue: #2f6fed;
  --blue-strong: #1f56c2;
  --blue-soft: #edf3ff;
  --green: #198768;
  --orange: #c97931;
  --accent-start: #2f6fed;
  --accent-end: #8a63f5;
  --shadow: 0 16px 36px rgba(26, 38, 54, .07);
}

html[data-theme="light"] body, html[data-theme="light"] .app-shell { background: var(--bg); }
html[data-theme="light"] .sidebar { background: #fbfcfd; border-color: var(--line); }
html[data-theme="light"] .brand-mark { background: var(--ink); box-shadow: none; }
html[data-theme="light"] .workspace-picker, html[data-theme="light"] .role-card { border-color: var(--line); background: #fff; color: #435160; }
html[data-theme="light"] .workspace-picker:hover, html[data-theme="light"] .role-card:hover { border-color: #a9b4c1; background: #fafbfc; }
html[data-theme="light"] .nav-item { color: var(--muted); }
html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .mini-project:hover, html[data-theme="light"] .mini-project.selected { background: #eef1f5; color: var(--ink); }
html[data-theme="light"] .nav-item.active { background: var(--blue-soft); color: var(--blue-strong); box-shadow: none; }
html[data-theme="light"] .nav-live { background: #e5f5ef; color: var(--green); }
html[data-theme="light"] .role-logo, html[data-theme="light"] .company-mark { background: #202b38; }
html[data-theme="light"] .project-dot { background: var(--subtle); }
html[data-theme="light"] .project-dot.blue { background: var(--blue); }
html[data-theme="light"] .project-dot.green { background: var(--green); }
html[data-theme="light"] .project-dot.orange { background: var(--orange); }
html[data-theme="light"] .progress-track { background: #e8ebef; }
html[data-theme="light"] .progress-track span, html[data-theme="light"] .match-bar span { background: var(--blue); }
html[data-theme="light"] .main-content { background: var(--bg); }
html[data-theme="light"] .topbar { border-color: var(--line); background: rgba(246, 247, 249, .94); backdrop-filter: none; }
html[data-theme="light"] .breadcrumbs { color: var(--subtle); }
html[data-theme="light"] .breadcrumbs strong, html[data-theme="light"] .view-heading h1 { color: var(--ink); }
html[data-theme="light"] .model-switcher, html[data-theme="light"] .icon-button, html[data-theme="light"] .avatar-button { border-color: var(--line-strong); background: #fff; color: var(--ink); }
html[data-theme="light"] .model-switcher:hover, html[data-theme="light"] .icon-button:hover { border-color: #a9b4c1; background: #fafbfc; }
html[data-theme="light"] .avatar-button { background: #dfe8f8; color: #345894; }
html[data-theme="light"] .ghost-button { border-color: var(--line-strong); background: #fff; color: var(--ink); }
html[data-theme="light"] .ghost-button:hover { border-color: #a9b4c1; background: #fafbfc; }
html[data-theme="light"] .status-pill { background: #e5f5ef; color: var(--green); }
html[data-theme="light"] .model-menu { border-color: var(--line); background: #fff; box-shadow: 0 16px 34px rgba(26, 38, 54, .14); }
html[data-theme="light"] .model-menu-head { border-color: var(--line); }
html[data-theme="light"] .model-option { color: var(--ink); }
html[data-theme="light"] .model-option:hover:not(:disabled) { border-color: var(--line); background: #f8fafc; }
html[data-theme="light"] .model-option.active { border-color: #cbdafb; background: var(--blue-soft); }
html[data-theme="light"] .panel { border-color: var(--line); background: #fff; box-shadow: var(--shadow); }
html[data-theme="light"] .practice-panel { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, rgba(47, 111, 237, .55), rgba(138, 99, 245, .3), rgba(207, 214, 223, .85)) border-box; box-shadow: var(--shadow); }
html[data-theme="light"] .practice-panel::before { background: linear-gradient(90deg, transparent, var(--accent-start), var(--accent-end), transparent); }
html[data-theme="light"] .practice-grid > div { opacity: 1; }
html[data-theme="light"] .practice-panel .panel-kicker, html[data-theme="light"] .panel-kicker { color: var(--subtle); }
html[data-theme="light"] .question-block h2 { color: var(--ink); }
html[data-theme="light"] .question-block p, html[data-theme="light"] .view-heading p { color: var(--muted); }
html[data-theme="light"] .question-refresh { border-color: #c6d6f6; background: #f6f9ff; color: var(--blue-strong); }
html[data-theme="light"] .question-refresh:hover { border-color: #9eb9ef; background: var(--blue-soft); color: var(--blue-strong); }
html[data-theme="light"] .mode-switcher { border-color: var(--line); background: var(--panel-muted); }
html[data-theme="light"] .mode-button { color: var(--muted); }
html[data-theme="light"] .mode-button.active { background: #fff; color: var(--blue-strong); box-shadow: 0 1px 4px rgba(28, 47, 72, .08); }
html[data-theme="light"] .answer-label { color: var(--ink); }
html[data-theme="light"] .answer-box { border-color: var(--line-strong); background: #fcfdfe; color: var(--ink); box-shadow: none; }
html[data-theme="light"] .answer-box::placeholder { color: #a4adb8; }
html[data-theme="light"] .answer-box:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(47, 111, 237, .1); }
html[data-theme="light"] .answer-footer { border-color: var(--line); }
html[data-theme="light"] .voice-button { border-color: #c6d6f6; background: #f6f9ff; color: var(--blue-strong); }
html[data-theme="light"] .voice-button:hover { border-color: #9eb9ef; background: var(--blue-soft); }
html[data-theme="light"] .voice-preview { border-color: #d7e2f5; background: #f7faff; color: #55709b; }
html[data-theme="light"] .feedback-text, html[data-theme="light"] .thinking-card p, html[data-theme="light"] .coach-list { color: #4d5a68; }
html[data-theme="light"] .feedback-tag { background: #f1f4f7; color: #647180; }
html[data-theme="light"] .feedback-tag.warn { background: #fff4e6; color: #9d612a; }
html[data-theme="light"] .thinking-card { border-color: var(--line); background: #fafbfd; }
html[data-theme="light"] .thinking-card.emphasis { border-color: #d7e2f5; background: #f7faff; }
html[data-theme="light"] .thinking-card p, html[data-theme="light"] .coach-question p, html[data-theme="light"] .story-preview p { color: #4d5a68; }
html[data-theme="light"] .coach-question { border-color: var(--orange); background: #fff8ee; }
html[data-theme="light"] .story-preview { border-color: #d7e2f5; background: #f7faff; }
html[data-theme="light"] .story-preview p { color: #34527e; }
html[data-theme="light"] .evidence-sources { border-color: #dce5ef; background: #fbfcfe; }
html[data-theme="light"] .evidence-source > span { background: var(--blue-soft); color: var(--blue-strong); }
html[data-theme="light"] .evidence-source strong { color: #405264; }
html[data-theme="light"] .evidence-source-snippet { color: #4d5a68; }
html[data-theme="light"] .evidence-source-snippet.is-missing { color: var(--muted); }
html[data-theme="light"] .example-answer { border-color: #c5d2ff; background: linear-gradient(145deg, #f4f6ff, #fbfcff); }
html[data-theme="light"] .example-answer-head small { color: #5068bd; }
html[data-theme="light"] .example-answer-head strong { color: #25345e; }
html[data-theme="light"] .example-answer-head > span { color: #62708d; }
html[data-theme="light"] .example-answer > p { color: #26344c; }
html[data-theme="light"] .answer-citation-text { background: #e9edff; color: #30468f; }
html[data-theme="light"] .answer-citation { border-color: #9eb2ff; background: #e9edff; color: #4158af; }
html[data-theme="light"] .example-answer-note { color: #68758d; }
html[data-theme="light"] .citation-legend { color: #4158af; }
html[data-theme="light"] .golden-card { border-color: #d5ddf7; }
html[data-theme="light"] .golden-icon { border-color: #e2b14e; background: #fff7e3; color: #b47b16; }
html[data-theme="light"] .golden-card-head strong { color: #966312; }
html[data-theme="light"] .golden-card-head small, html[data-theme="light"] .golden-method small, html[data-theme="light"] .golden-row small { color: #68758d; }
html[data-theme="light"] .golden-method strong { color: #704e0c; }
html[data-theme="light"] .golden-row p { color: #4d5a68; }
html[data-theme="light"] .next-question { border-color: var(--blue); background: var(--blue-soft); }
html[data-theme="light"] .next-question p { color: #34527e; }
html[data-theme="light"] .rail-card { border-color: var(--line); background: #fff; }
html[data-theme="light"] .rail-card h3 { color: var(--ink); }
html[data-theme="light"] .match-row { border-color: var(--line); }
html[data-theme="light"] .match-top { color: #4a5765; }
html[data-theme="light"] .match-bar { background: #e9edf1; }
html[data-theme="light"] .bullet-list li { color: #596674; }
html[data-theme="light"] .bullet-list li::before { background: var(--blue); }
html[data-theme="light"] .right-rail { border-color: var(--line); background: #fbfcfd; }
html[data-theme="light"] .context-title, html[data-theme="light"] .evidence-title { color: var(--ink); }
html[data-theme="light"] .context-company, html[data-theme="light"] .evidence-item { color: #53606e; }
html[data-theme="light"] .skill-chip { border-color: var(--line); background: #fff; color: var(--muted); }
html[data-theme="light"] .skill-chip.current { border-color: #b9cdf8; background: var(--blue-soft); color: var(--blue-strong); }
html[data-theme="light"] .current-project-mark { background: #e8effd; color: var(--blue); }
html[data-theme="light"] .tip-block { border-color: #d8e4fb; background: var(--blue-soft); }
html[data-theme="light"] .tip-icon { background: #cdddfd; color: var(--blue-strong); }
html[data-theme="light"] .tip-block strong { color: #34527e; }
html[data-theme="light"] .tip-block p { color: #5b7295; }
html[data-theme="light"] .review-tabs, html[data-theme="light"] .review-transcript-input, html[data-theme="light"] .review-answer, html[data-theme="light"] .history-answer, html[data-theme="light"] .history-insights > div, html[data-theme="light"] .review-point, html[data-theme="light"] .review-question-card, html[data-theme="light"] .review-report-empty, html[data-theme="light"] .audio-empty, html[data-theme="light"] .imported-audio, html[data-theme="light"] .history-detail, html[data-theme="light"] .history-list-panel, html[data-theme="light"] .review-report-panel, html[data-theme="light"] .review-audio-panel { border-color: var(--line); background: #fff; color: var(--ink); }
html[data-theme="light"] .review-tab.active, html[data-theme="light"] .history-session:hover, html[data-theme="light"] .history-session.active, html[data-theme="light"] .history-record:hover, html[data-theme="light"] .history-record.active { border-color: #cbdafb; background: var(--blue-soft); }
html[data-theme="light"] .review-tab { color: var(--muted); }
html[data-theme="light"] .review-tab.active { color: var(--blue-strong); }
html[data-theme="light"] .review-muted, html[data-theme="light"] .history-answer p, html[data-theme="light"] .history-insights p, html[data-theme="light"] .review-question-grid p, html[data-theme="light"] .review-answer-quote p, html[data-theme="light"] .review-next-question p, html[data-theme="light"] .review-report-empty p, html[data-theme="light"] .review-transcript p { color: #4d5a68; }
html[data-theme="light"] .review-answer-quote, html[data-theme="light"] .review-transcript p { border-color: #cbdafb; background: #f7faff; }
html[data-theme="light"] .review-question-grid > div { border-color: var(--line); background: #fff; }
html[data-theme="light"] .review-next-question { background: #fff8ee; }
html[data-theme="light"] .review-next-question p { color: #76542f; }
html[data-theme="light"] .history-round { background: #f1f4f7; color: var(--muted); }
html[data-theme="light"] .history-record.active .history-round { background: #d9e6ff; color: var(--blue-strong); }
html[data-theme="light"] .audio-contract code { background: #f1f4f7; color: #596674; }
html[data-theme="light"] .toast { border-color: #cdd8e7; background: #fff; box-shadow: var(--shadow); color: var(--ink); }

@media (max-width: 1160px) and (min-width: 761px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .right-rail { display: none; }
  .workspace { max-width: 1120px; }
  .rail-capability-block, .rail-coach-block { display: none; }
}

.rail-capability-block .match-row { padding: 10px 0; }
.rail-capability-block .match-row:first-of-type { padding-top: 0; border-top: 0; }
.rail-coach-block .bullet-list { gap: 8px; }

@media (min-width: 1161px) {
  .app-shell { grid-template-columns: 252px minmax(0, 1fr) 312px; gap: 14px; padding: 14px; background: var(--bg); }
  .sidebar { min-height: calc(100dvh - 28px); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
  .main-content { min-height: calc(100dvh - 28px); }
  .topbar { height: 66px; padding: 0 28px; border: 1px solid var(--line); border-radius: 16px 16px 0 0; background: color-mix(in srgb, var(--bg) 88%, transparent); }
  .workspace { max-width: none; padding: 34px 30px 52px; }
  .practice-grid { display: block; }
  .practice-grid > div { display: none; }
  .practice-panel { width: min(100%, 900px); margin: 0 auto; }
  .right-rail { min-height: calc(100dvh - 28px); max-height: calc(100dvh - 28px); margin: 0; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
}

/* Discord-inspired dark surfaces: neutral graphite layers with a restrained blurple accent. */
html:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #313338;
  --panel: #2b2d31;
  --panel-muted: #1e1f22;
  --line: #3f4147;
  --line-strong: #4e5058;
  --ink: #f2f3f5;
  --muted: #b5bac1;
  --subtle: #949ba4;
  --blue: #5865f2;
  --blue-strong: #8ea1ff;
  --blue-soft: rgba(88, 101, 242, .16);
  --green: #23a559;
  --orange: #f0b232;
  --shadow: 0 16px 32px rgba(0, 0, 0, .22);
  --accent-start: #5865f2;
  --accent-end: #7289da;
}

html:not([data-theme="light"]) body,
html:not([data-theme="light"]) .app-shell {
  background: var(--bg);
}

html:not([data-theme="light"]) body {
  scrollbar-color: #1e1f22 #313338;
}

html:not([data-theme="light"]) ::selection {
  color: #fff;
  background: rgba(88, 101, 242, .55);
}

html:not([data-theme="light"]) .sidebar {
  background: #1e1f22;
  border-color: #18191c;
}

html:not([data-theme="light"]) .brand-mark {
  background: #5865f2;
  box-shadow: 0 8px 20px rgba(88, 101, 242, .24);
}

html:not([data-theme="light"]) .brand-subtitle,
html:not([data-theme="light"]) .sidebar-footer p {
  color: #949ba4;
}

html:not([data-theme="light"]) .workspace-picker,
html:not([data-theme="light"]) .role-card {
  border-color: #3f4147;
  background: #2b2d31;
  color: #dbdee1;
}

html:not([data-theme="light"]) .workspace-menu { border-color: #3f4147; background: #2b2d31; box-shadow: 0 18px 36px rgba(0,0,0,.4); }
html:not([data-theme="light"]) .workspace-menu-head { border-color: #3f4147; }
html:not([data-theme="light"]) .workspace-menu-item:hover:not(:disabled) { background: #35373c; }
html:not([data-theme="light"]) .nav-glyph img,
html:not([data-theme="light"]) .context-label-icon { filter: invert(1) brightness(1.65); }

html:not([data-theme="light"]) .workspace-picker:hover,
html:not([data-theme="light"]) .role-card:hover {
  border-color: #5865f2;
  background: #35373c;
}

html:not([data-theme="light"]) .nav-item {
  position: relative;
  color: #b5bac1;
}

html:not([data-theme="light"]) .nav-item:hover,
html:not([data-theme="light"]) .mini-project:hover,
html:not([data-theme="light"]) .mini-project.selected {
  background: #35373c;
  color: #f2f3f5;
}

html:not([data-theme="light"]) .nav-item.active {
  background: #404249;
  color: #fff;
  box-shadow: inset 3px 0 0 #5865f2;
}

html:not([data-theme="light"]) .nav-glyph,
html:not([data-theme="light"]) .nav-count,
html:not([data-theme="light"]) .sidebar-section-head,
html:not([data-theme="light"]) .role-arrow {
  color: #949ba4;
}

html:not([data-theme="light"]) .active .nav-glyph,
html:not([data-theme="light"]) .text-button,
html:not([data-theme="light"]) .project-check {
  color: #8ea1ff;
}

html:not([data-theme="light"]) .nav-live {
  background: rgba(35, 165, 89, .16);
  color: #57f287;
}

html:not([data-theme="light"]) .status-pill {
  background: rgba(35, 165, 89, .16);
  color: #57f287;
}

html:not([data-theme="light"]) .status-dot {
  box-shadow: 0 0 0 3px rgba(35, 165, 89, .16);
}

html:not([data-theme="light"]) .model-switcher-dot.ready {
  box-shadow: 0 0 0 3px rgba(35, 165, 89, .16);
}

html:not([data-theme="light"]) .sidebar-footer {
  border-color: #3f4147;
}

html:not([data-theme="light"]) .progress-track {
  background: #35373c;
}

html:not([data-theme="light"]) .progress-track span {
  background: #5865f2;
}

html:not([data-theme="light"]) .role-logo,
html:not([data-theme="light"]) .company-mark {
  background: #404249;
  color: #f2f3f5;
}

html:not([data-theme="light"]) .main-content {
  background: #313338;
}

html:not([data-theme="light"]) .topbar {
  border-color: #1f2023;
  background: #2b2d31;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

html:not([data-theme="light"]) .breadcrumbs,
html:not([data-theme="light"]) .model-switcher-copy small {
  color: #949ba4;
}

html:not([data-theme="light"]) .breadcrumbs strong,
html:not([data-theme="light"]) .view-heading h1 {
  color: #f2f3f5;
}

html:not([data-theme="light"]) .model-switcher,
html:not([data-theme="light"]) .icon-button {
  border-color: #1f2023;
  background: #1e1f22;
  color: #dbdee1;
}

html:not([data-theme="light"]) .model-switcher:hover,
html:not([data-theme="light"]) .icon-button:hover {
  border-color: #5865f2;
  background: #35373c;
  color: #fff;
}

html:not([data-theme="light"]) .avatar-button {
  background: #5865f2;
  color: #fff;
}

html:not([data-theme="light"]) .model-menu {
  border-color: #1f2023;
  background: #1e1f22;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
}

html:not([data-theme="light"]) .model-menu-head {
  border-color: #3f4147;
}

html:not([data-theme="light"]) .model-option {
  color: #dbdee1;
}

html:not([data-theme="light"]) .model-option:hover:not(:disabled) {
  border-color: #4e5058;
  background: #35373c;
}

html:not([data-theme="light"]) .model-option.active {
  border-color: rgba(88, 101, 242, .62);
  background: rgba(88, 101, 242, .18);
}

html:not([data-theme="light"]) .model-option.active .model-option-state,
html:not([data-theme="light"]) .model-option-copy small {
  color: #8ea1ff;
}

html:not([data-theme="light"]) .panel,
html:not([data-theme="light"]) .right-rail {
  border-color: #1f2023;
  background: #2b2d31;
  box-shadow: var(--shadow);
}

html:not([data-theme="light"]) .practice-panel {
  border: 1px solid #1f2023;
  background: #2b2d31;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .22);
}

html:not([data-theme="light"]) .practice-panel::before {
  right: 30px;
  left: 30px;
  background: linear-gradient(90deg, transparent, rgba(88, 101, 242, .72), transparent);
  opacity: .7;
}

html:not([data-theme="light"]) .panel-kicker,
html:not([data-theme="light"]) .practice-panel .panel-kicker,
html:not([data-theme="light"]) .round-count {
  color: #949ba4;
}

html:not([data-theme="light"]) .round-count {
  color: #8ea1ff;
}

html:not([data-theme="light"]) .question-block h2 {
  color: #f2f3f5;
}

html:not([data-theme="light"]) .question-block p,
html:not([data-theme="light"]) .view-heading p {
  color: #b5bac1;
}

html:not([data-theme="light"]) .question-refresh {
  border-color: rgba(88, 101, 242, .62);
  background: rgba(88, 101, 242, .14);
  color: #b5c1ff;
}

html:not([data-theme="light"]) .question-refresh:hover {
  border-color: #8ea1ff;
  background: rgba(88, 101, 242, .24);
  color: #fff;
}

html:not([data-theme="light"]) .mode-switcher {
  border-color: #1f2023;
  background: #1e1f22;
}

html:not([data-theme="light"]) .mode-button {
  color: #b5bac1;
}

html:not([data-theme="light"]) .mode-button:hover {
  color: #f2f3f5;
}

html:not([data-theme="light"]) .mode-button.active {
  background: #5865f2;
  color: #fff;
  box-shadow: 0 4px 10px rgba(88, 101, 242, .28);
}

html:not([data-theme="light"]) .answer-label {
  color: #f2f3f5;
}

html:not([data-theme="light"]) .answer-box {
  border-color: #1f2023;
  background: #1e1f22;
  color: #f2f3f5;
}

html:not([data-theme="light"]) .answer-box::placeholder {
  color: #949ba4;
}

html:not([data-theme="light"]) .answer-box:hover {
  border-color: #4e5058;
}

html:not([data-theme="light"]) .answer-box:focus {
  border-color: #5865f2;
  background: #1e1f22;
  box-shadow: 0 0 0 2px rgba(88, 101, 242, .34);
}

html:not([data-theme="light"]) .answer-footer,
html:not([data-theme="light"]) .feedback-block,
html:not([data-theme="light"]) .story-steering,
html:not([data-theme="light"]) .match-row,
html:not([data-theme="light"]) .context-block {
  border-color: #3f4147;
}

html:not([data-theme="light"]) .answer-footer p,
html:not([data-theme="light"]) .api-status,
html:not([data-theme="light"]) .feedback-text,
html:not([data-theme="light"]) .thinking-card p,
html:not([data-theme="light"]) .coach-list,
html:not([data-theme="light"]) .bullet-list li {
  color: #b5bac1;
}

html:not([data-theme="light"]) .voice-button {
  border-color: #4e5058;
  background: #35373c;
  color: #b5c1ff;
}

html:not([data-theme="light"]) .voice-button:hover {
  border-color: #5865f2;
  background: #404249;
}

html:not([data-theme="light"]) .voice-button.recording {
  border-color: rgba(237, 66, 69, .65);
  background: rgba(237, 66, 69, .14);
  color: #ff6b6b;
}

html:not([data-theme="light"]) .review-transcript-input textarea {
  border-color: #1f2023;
  background: #1e1f22;
  color: #f2f3f5;
  caret-color: #8ea1ff;
}

html:not([data-theme="light"]) .review-transcript-input textarea::placeholder {
  color: #949ba4;
}

html:not([data-theme="light"]) .review-transcript-input textarea:focus {
  border-color: #5865f2;
  background: #1e1f22;
  box-shadow: 0 0 0 2px rgba(88, 101, 242, .34);
}

html:not([data-theme="light"]) .voice-preview,
html:not([data-theme="light"]) .thinking-card,
html:not([data-theme="light"]) .evidence-sources,
html:not([data-theme="light"]) .review-answer-quote,
html:not([data-theme="light"]) .review-transcript p {
  border-color: #3f4147;
  background: #1e1f22;
}

html:not([data-theme="light"]) .voice-preview,
html:not([data-theme="light"]) .story-preview p,
html:not([data-theme="light"]) .next-question p {
  color: #c9cdf3;
}

html:not([data-theme="light"]) .thinking-card.emphasis,
html:not([data-theme="light"]) .story-preview,
html:not([data-theme="light"]) .next-question {
  border-color: rgba(88, 101, 242, .45);
  background: rgba(88, 101, 242, .12);
}

html:not([data-theme="light"]) .coach-question,
html:not([data-theme="light"]) .review-next-question {
  border-color: #f0b232;
  background: rgba(240, 178, 50, .12);
}

html:not([data-theme="light"]) .story-label,
html:not([data-theme="light"]) .story-basis,
html:not([data-theme="light"]) .story-steering small,
html:not([data-theme="light"]) .next-question small {
  color: #aeb8ff;
}

html:not([data-theme="light"]) .evidence-source > span,
html:not([data-theme="light"]) .current-project-mark {
  background: rgba(88, 101, 242, .18);
  color: #aeb8ff;
}

html:not([data-theme="light"]) .evidence-source strong,
html:not([data-theme="light"]) .context-title,
html:not([data-theme="light"]) .evidence-title,
html:not([data-theme="light"]) .rail-card h3 {
  color: #f2f3f5;
}

html:not([data-theme="light"]) .context-company,
html:not([data-theme="light"]) .evidence-item,
html:not([data-theme="light"]) .match-top,
html:not([data-theme="light"]) .review-muted {
  color: #b5bac1;
}

html:not([data-theme="light"]) .skill-chip,
html:not([data-theme="light"]) .feedback-tag,
html:not([data-theme="light"]) .history-round,
html:not([data-theme="light"]) .audio-contract code {
  border-color: #3f4147;
  background: #1e1f22;
  color: #b5bac1;
}

html:not([data-theme="light"]) .skill-chip.current {
  border-color: rgba(88, 101, 242, .62);
  background: rgba(88, 101, 242, .18);
  color: #b5c1ff;
}

html:not([data-theme="light"]) .match-bar {
  background: #1e1f22;
}

html:not([data-theme="light"]) .match-bar span {
  background: #23a559;
}

html:not([data-theme="light"]) .match-top strong,
html:not([data-theme="light"]) .feedback-score {
  color: #57f287;
}

html:not([data-theme="light"]) .match-bar span.partial {
  background: #f0b232;
}

html:not([data-theme="light"]) .primary-button {
  border-color: #5865f2;
  background: #5865f2;
  box-shadow: 0 6px 16px rgba(88, 101, 242, .26);
}

html:not([data-theme="light"]) .primary-button:hover {
  background: #4752c4;
}

html:not([data-theme="light"]) .ghost-button {
  border-color: #4e5058;
  background: #35373c;
  color: #f2f3f5;
}

html:not([data-theme="light"]) .ghost-button:hover {
  border-color: #5865f2;
  background: #404249;
}

html:not([data-theme="light"]) .tip-block {
  border-color: rgba(88, 101, 242, .42);
  background: rgba(88, 101, 242, .12);
}

html:not([data-theme="light"]) .tip-icon {
  background: rgba(88, 101, 242, .28);
  color: #d7dcff;
}

html:not([data-theme="light"]) .tip-block strong {
  color: #d7dcff;
}

html:not([data-theme="light"]) .tip-block p {
  color: #c2c9eb;
}

html:not([data-theme="light"]) .review-tabs,
html:not([data-theme="light"]) .review-transcript-input,
html:not([data-theme="light"]) .review-answer,
html:not([data-theme="light"]) .history-answer,
html:not([data-theme="light"]) .history-insights > div,
html:not([data-theme="light"]) .review-point,
html:not([data-theme="light"]) .review-question-card,
html:not([data-theme="light"]) .review-report-empty,
html:not([data-theme="light"]) .audio-empty,
html:not([data-theme="light"]) .imported-audio,
html:not([data-theme="light"]) .history-detail,
html:not([data-theme="light"]) .history-list-panel,
html:not([data-theme="light"]) .review-report-panel,
html:not([data-theme="light"]) .review-audio-panel {
  border-color: #1f2023;
  background: #2b2d31;
  color: #f2f3f5;
}

html:not([data-theme="light"]) .review-tab.active,
html:not([data-theme="light"]) .history-session:hover,
html:not([data-theme="light"]) .history-session.active,
html:not([data-theme="light"]) .history-record:hover,
html:not([data-theme="light"]) .history-record.active {
  border-color: rgba(88, 101, 242, .62);
  background: rgba(88, 101, 242, .18);
}

html:not([data-theme="light"]) .review-tab.active,
html:not([data-theme="light"]) .history-record.active .history-round {
  color: #b5c1ff;
}

html:not([data-theme="light"]) .review-question-grid > div {
  border-color: #3f4147;
  background: #1e1f22;
}

html:not([data-theme="light"]) .review-report-head h2 {
  border-color: #5865f2;
  color: #f2f3f5;
}

html:not([data-theme="light"]) .toast {
  border-color: #4e5058;
  background: #1e1f22;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
  color: #f2f3f5;
}

html:not([data-theme="light"]) :focus-visible {
  outline-color: #8ea1ff;
}

html[data-theme="light"] .review-report-head h2 {
  border-color: var(--blue);
  color: var(--ink);
}

.sidebar-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.project-list {
  display: grid;
  gap: 2px;
}

.project-library {
  margin-bottom: 18px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.section-heading h2 {
  margin: 0;
  font-size: 14px;
}

.section-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.section-heading > span {
  color: var(--subtle);
  font-size: 10px;
}

.project-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.project-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(88, 101, 242, .18), var(--shadow);
}

.project-card-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.project-card-head > div {
  min-width: 0;
}

.project-card-head h3 {
  margin: 0;
  font-size: 12px;
}

.project-card-head p {
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-badge {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--subtle);
  font-size: 9px;
}

.project-card-facts {
  display: grid;
  gap: 9px;
  margin: 0;
}

.project-card-facts > div {
  display: grid;
  gap: 3px;
}

.project-card-facts dt {
  color: var(--subtle);
  font-size: 9px;
}

.project-card-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 10px;
  line-height: 1.45;
}

.project-card .ghost-button {
  justify-self: start;
}

.project-dialog[hidden] {
  display: none;
}

.project-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}

.project-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
}

.project-dialog-card {
  position: relative;
  width: min(100%, 520px);
  max-height: min(720px, calc(100dvh - 40px));
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}

.project-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.project-dialog-head .panel-kicker {
  margin-bottom: 6px;
}

.project-dialog-head h2 {
  margin: 0;
  font-size: 20px;
}

.project-dialog-note {
  margin: 10px 0 20px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.project-field {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}

.project-field > span {
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
}

.project-field input,
.project-field textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  outline: none;
  background: var(--panel-muted);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
}

.project-field textarea {
  min-height: 98px;
  resize: vertical;
}

.project-field input::placeholder,
.project-field textarea::placeholder {
  color: var(--subtle);
}

.project-field input:focus,
.project-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(88, 101, 242, .2);
}

.project-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.review-report-tabs {
  display: flex;
  gap: 4px;
  max-width: 100%;
  margin: 22px 0 18px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-muted);
}

.review-report-tab {
  min-height: 31px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.review-report-tab:hover {
  color: var(--ink);
}

.review-report-tab.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 3px 9px rgba(88, 101, 242, .22);
}

.review-report-tab-content {
  min-height: 180px;
}

.review-evidence-next-title {
  margin-top: 22px !important;
}

.review-transcript-tab {
  display: grid;
  gap: 10px;
}

.review-transcript-full {
  max-height: 420px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-muted);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .project-card-grid {
    grid-template-columns: 1fr;
  }

  .project-dialog-card {
    padding: 18px;
  }

  .project-form-actions {
    flex-direction: column-reverse;
  }

  .project-form-actions button {
    width: 100%;
  }
}

.audio-import-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.asr-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; }
.asr-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.asr-switch-track { position: relative; width: 28px; height: 16px; flex: 0 0 auto; border-radius: 999px; background: #b9c1cc; transition: background .18s; }
.asr-switch-track::after { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(25, 35, 48, .2); content: ""; transition: transform .18s; }
.asr-switch input:checked + .asr-switch-track { background: var(--green); }
.asr-switch input:checked + .asr-switch-track::after { transform: translateX(12px); }
.asr-switch:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.asr-switch.disabled { cursor: not-allowed; opacity: .56; }
.asr-switch > span:last-child { display: grid; gap: 2px; }
.asr-switch strong { font-size: 10px; line-height: 1.1; }
.asr-switch small { color: var(--muted); font-size: 9px; line-height: 1.1; }
.compact-button { min-height: 28px; padding: 0 9px; font-size: 10px; }
.imported-audio-actions { display: flex !important; align-items: center; justify-content: flex-end; gap: 9px; }
.audio-transcribing, .audio-local-only { color: var(--muted); font-size: 10px; white-space: nowrap; }
.audio-transcribe-progress { grid-column: 1 / -1; display: grid; gap: 9px; padding: 12px; border: 1px solid #c9d9f5; border-radius: 7px; background: #f5f8ff; }
.audio-transcribe-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.audio-transcribe-progress-head > div { display: grid; gap: 4px; min-width: 0; }
.audio-transcribe-progress-head strong { color: var(--blue-strong); font-size: 11px; }
.audio-transcribe-progress-head small { color: var(--muted); font-size: 9px; }
.audio-transcribe-progress-head > span { color: var(--blue-strong); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 780; }
.audio-transcribe-progress-bar { height: 6px; overflow: hidden; border-radius: 999px; background: #dfe8f8; }
.audio-transcribe-progress-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4b7ff0, #6aa5f7); transform: scaleX(var(--progress, 0)); transform-origin: left center; transition: transform var(--duration-fast) var(--ease-smooth-out); will-change: transform; }
.audio-transcribe-progress p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.audio-transcribe-error { grid-column: 1 / -1; display: grid; gap: 4px; padding: 12px; border: 1px solid #e6b8b8; border-radius: 7px; background: #fff6f6; }
.audio-transcribe-error strong { color: #ad4a4a; font-size: 11px; }
.audio-transcribe-error p { margin: 0; color: #784d4d; font-size: 10px; line-height: 1.5; }
.audio-transcribe-error small { color: #9a6b6b; font-size: 9px; line-height: 1.45; }
html:not([data-theme="light"]) .asr-switch { border-color: var(--line); background: #151921; }
html:not([data-theme="light"]) .asr-switch-track { background: #3b4351; }
html:not([data-theme="light"]) .asr-switch input:checked + .asr-switch-track { background: var(--green); }
html:not([data-theme="light"]) .audio-transcribing, html:not([data-theme="light"]) .audio-local-only { color: #aeb8c8; }
html:not([data-theme="light"]) .audio-transcribe-progress { border-color: #2e4770; background: #151d2b; }
html:not([data-theme="light"]) .audio-transcribe-progress-head strong, html:not([data-theme="light"]) .audio-transcribe-progress-head > span { color: #8eb4ff; }
html:not([data-theme="light"]) .audio-transcribe-progress-bar { background: #26344d; }
html:not([data-theme="light"]) .audio-transcribe-progress p { color: #aeb8c8; }
html:not([data-theme="light"]) .audio-transcribe-error { border-color: #633d43; background: #281a1e; }
html:not([data-theme="light"]) .audio-transcribe-error strong { color: #f29a9a; }
html:not([data-theme="light"]) .audio-transcribe-error p { color: #e1b5b5; }
html:not([data-theme="light"]) .audio-transcribe-error small { color: #c79595; }
@media (max-width: 760px) {
  .audio-import-tools { align-items: stretch; width: 100%; flex-direction: column; }
  .asr-switch, .audio-upload-button { width: 100%; justify-content: center; }
  .imported-audio-actions { justify-content: flex-start; flex-wrap: wrap; }
  .example-answer-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .example-answer-head > span { white-space: normal; }
  .golden-method { align-items: flex-start; flex-direction: column; gap: 3px; }
  .golden-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Structured question review: read from the question to the evidence, then act. */
.review-question-reviews {
  margin-top: 28px;
}

.review-section-head {
  align-items: flex-end;
  margin-bottom: 14px;
}

.review-section-head h3 {
  font-size: 15px;
  line-height: 1.25;
}

.review-section-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.review-question-card {
  overflow: hidden;
  margin-top: 14px;
  padding: 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 32, 50, .055);
}

.review-question-top {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 13px;
  padding: 17px 18px 15px;
  border-bottom: 1px solid var(--line);
}

.review-question-index {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
}

.review-question-copy {
  min-width: 0;
}

.review-question-copy > small,
.review-score-block > small,
.review-answer-label > small,
.review-insight > small {
  display: block;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .02em;
}

.review-question-copy h4 {
  max-width: 70ch;
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}

.review-score-block {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 58px;
}

.review-score-block strong {
  color: var(--green);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.review-answer-quote {
  margin: 0;
  padding: 15px 18px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel-muted);
}

.review-answer-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.review-answer-label span {
  color: var(--subtle);
  font-size: 10px;
}

.review-answer-quote p {
  max-width: 75ch;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.75;
  text-wrap: pretty;
}

.review-question-grid {
  gap: 12px;
  margin: 15px 18px 0;
}

.review-question-grid > div {
  min-height: 104px;
  padding: 13px 14px;
  border-radius: 9px;
}

.review-insight {
  position: relative;
  padding-inline-start: 17px !important;
}

.review-insight::before {
  position: absolute;
  inset-block: 13px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--blue);
  content: "";
}

.review-insight-positive::before { background: var(--green); }
.review-insight-improve::before { background: var(--orange); }

.review-question-grid p {
  max-width: 62ch;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.65;
  text-wrap: pretty;
}

.review-question-card > .review-evidence {
  margin: 15px 18px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-muted);
}

.review-question-card > .review-evidence small {
  font-size: 10px;
}

.review-question-card > .review-evidence p {
  max-width: 72ch;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.65;
}

.review-question-card > .review-evidence > span {
  font-size: 10px;
  line-height: 1.5;
}

.review-next-question {
  margin: 15px 18px 18px;
  padding: 13px 14px;
  border: 1px solid rgba(201, 121, 49, .28);
  border-left: 3px solid var(--orange);
  border-radius: 9px;
}

.review-next-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.review-next-heading span {
  color: var(--orange);
  font-size: 10px;
  font-weight: 750;
}

.review-next-question p {
  max-width: 70ch;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.65;
  text-wrap: pretty;
}

html:not([data-theme="light"]) .review-question-card {
  border-color: #3b3e46;
  background: #2b2d31;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}

html:not([data-theme="light"]) .review-question-top,
html:not([data-theme="light"]) .review-answer-quote {
  border-color: #3b3e46;
}

html:not([data-theme="light"]) .review-answer-quote,
html:not([data-theme="light"]) .review-question-card > .review-evidence {
  background: #1e1f22;
}

html:not([data-theme="light"]) .review-question-copy h4,
html:not([data-theme="light"]) .review-section-head h3 {
  color: #f2f3f5;
}

html:not([data-theme="light"]) .review-question-card > .review-evidence {
  border-color: #3b3e46;
}

html:not([data-theme="light"]) .review-next-question {
  border-color: rgba(240, 178, 50, .34);
  background: rgba(240, 178, 50, .1);
}

html[data-theme="light"] .review-question-card {
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 32, 50, .055);
}

@media (max-width: 760px) {
  .review-section-head { align-items: flex-start; }
  .review-question-top { grid-template-columns: 32px minmax(0, 1fr); padding: 15px; }
  .review-score-block { grid-column: 2; justify-items: start; margin-top: -5px; }
  .review-answer-quote { padding: 14px 15px; }
  .review-question-grid { margin-inline: 15px; }
  .review-question-card > .review-evidence { margin-inline: 15px; }
  .review-next-question { margin-inline: 15px; }
}

/* The inspiration icon is a line icon, so its bulb stays legible in both themes. */
.golden-icon svg { fill: none; }
.history-session-row, .history-record-row { display: flex; align-items: stretch; gap: 4px; }
.history-session-row .history-session, .history-record-row .history-record { flex: 1 1 auto; min-width: 0; }
.history-delete { display: grid; place-items: center; flex: 0 0 30px; align-self: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--subtle); opacity: .35; transition: opacity .16s, color .16s, background .16s, border-color .16s; }
.history-session-row:hover .history-delete, .history-record-row:hover .history-delete, .history-delete:focus-visible { opacity: 1; }
.history-delete:hover { border-color: rgba(240, 112, 112, .35); background: rgba(240, 112, 112, .1); color: #ed8a8a; }
.history-delete svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }

/* Shared motion tokens from transitions.dev. Keep the report motion predictable across themes. */
:root {
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-stagger: 40ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --distance-base: 8px;
  --blur-small: 2px;
  --tabs-dur: var(--duration-fast);
  --tabs-ease: var(--ease-smooth-out);
  --tabs-pill-bg: var(--blue);
  --tabs-text-active: #fff;
  --toast-open: var(--duration-medium);
  --toast-close: var(--duration-quick);
  --toast-distance: 16px;
  --toast-blur: var(--blur-small);
  --toast-scale: .97;
  --toast-ease: var(--ease-smooth-out);
}

/* Sliding indicators keep the active view visible without repainting a whole report. */
.review-tabs.t-tabs,
.review-report-tabs.t-tabs {
  position: relative;
  isolation: isolate;
}

.review-tabs .t-tabs-pill,
.review-report-tabs .t-tabs-pill {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 0;
  height: 31px;
  width: 0;
  border-radius: 5px;
  background: var(--tabs-pill-bg);
  pointer-events: none;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
}

.review-tab,
.review-report-tab {
  position: relative;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease), background-color var(--tabs-dur) var(--tabs-ease);
}

.review-tab.active,
.review-report-tab.active {
  background: transparent;
  color: var(--tabs-text-active);
  box-shadow: none;
}

.review-tab:focus-visible,
.review-report-tab:focus-visible {
  z-index: 2;
  outline: 2px solid var(--blue-strong);
  outline-offset: 2px;
}

.review-report-head > div:first-child {
  min-width: 0;
}

.review-report-head h2 {
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.review-report-tab-content {
  overflow-wrap: anywhere;
}

.review-report-tab-content.is-changing {
  animation: review-panel-in var(--duration-fast) var(--ease-smooth-out) both;
}

@keyframes review-panel-in {
  from {
    opacity: 0;
    filter: blur(var(--blur-small));
    transform: translateY(var(--distance-base));
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.review-question-card {
  animation: review-card-in var(--duration-fast) var(--ease-smooth-out) both;
  animation-delay: calc(var(--review-index, 0) * var(--duration-stagger));
}

.review-question-card:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 20%, transparent), 0 8px 24px rgba(20, 32, 50, .055);
}

@keyframes review-card-in {
  from {
    opacity: 0;
    filter: blur(var(--blur-small));
    transform: translateY(var(--distance-base));
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.review-transcript-full {
  overflow-wrap: anywhere;
}

.toast {
  opacity: 0;
  filter: blur(var(--toast-blur));
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
  will-change: transform, opacity, filter;
}

.toast.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

html:not([data-theme="light"]) .review-tabs .t-tabs-pill,
html:not([data-theme="light"]) .review-report-tabs .t-tabs-pill {
  --tabs-pill-bg: #5865f2;
}

html[data-theme="light"] .review-tabs .t-tabs-pill,
html[data-theme="light"] .review-report-tabs .t-tabs-pill {
  --tabs-pill-bg: var(--blue);
}

@media (prefers-reduced-motion: reduce) {
  .review-tabs .t-tabs-pill,
  .review-report-tabs .t-tabs-pill,
  .review-tab,
  .review-report-tab,
  .review-report-tab-content.is-changing,
  .review-question-card,
  .toast,
  .toast.visible {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .review-report-head {
    flex-direction: column;
  }

  .review-report-head .panel-kicker {
    flex-wrap: wrap;
  }

  .review-report-tabs,
  .review-tabs {
    scrollbar-width: none;
  }

  .review-report-tabs::-webkit-scrollbar,
  .review-tabs::-webkit-scrollbar {
    display: none;
  }

  .topbar {
    min-width: 0;
    gap: 8px;
    overflow: hidden;
  }

  .breadcrumbs {
    min-width: 0;
    flex: 1 1 auto;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
  }

  .breadcrumbs strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions {
    flex: 0 1 auto;
    min-width: 0;
    gap: 6px;
  }

  .demo-toggle {
    min-width: 0;
    padding-inline: 6px;
    font-size: 9px;
  }

  .model-switcher {
    min-width: 112px;
    max-width: 124px;
    padding-inline: 7px;
  }

  .model-switcher-copy strong {
    max-width: 74px;
  }

  .topbar-actions > .icon-button[title="查看快捷键"] {
    display: none;
  }
}

/* Replace legacy side tabs with inset accents so callouts keep hierarchy without a heavy edge. */
.coach-question,
.next-question,
.review-callout,
.review-report-head h2,
.review-answer-quote,
.review-next-question {
  border-left: 0;
  box-shadow: inset 3px 0 var(--blue);
}

.coach-question,
.review-next-question {
  box-shadow: inset 3px 0 var(--orange);
}

.review-report-head h2 {
  box-shadow: inset 4px 0 var(--blue);
}

.review-answer-quote {
  box-shadow: inset 3px 0 #cbdafb;
}

/* Keep evidence and follow-up prompts as compact reading rows, not extra cards. */
.review-question-card > .review-evidence {
  margin: 11px 18px 0;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.review-question-card > .review-evidence p {
  margin-top: 4px;
  line-height: 1.5;
}

.review-next-question {
  margin: 11px 18px 14px;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.review-next-question p {
  margin-top: 5px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .review-question-card > .review-evidence,
  .review-next-question {
    margin-inline: 15px;
  }
}

/* Theme rules above intentionally style these surfaces; override them with the compact treatment. */
html:not([data-theme="light"]) .review-question-card > .review-evidence,
html[data-theme="light"] .review-question-card > .review-evidence {
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

html:not([data-theme="light"]) .review-next-question,
html[data-theme="light"] .review-next-question {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line));
  background: transparent;
  box-shadow: none;
}

/* Give the two judgments a clearer semantic read without turning them into loud cards. */
.review-question-grid > .review-insight {
  min-height: 112px;
  padding: 14px 16px 14px 18px;
  border-radius: 9px;
}

.review-insight > small {
  font-size: 10px;
  font-weight: 800;
}

.review-insight-positive > small {
  color: var(--green);
}

.review-insight-improve > small {
  color: var(--orange);
}

.review-question-grid p {
  max-width: 64ch;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.75;
}

html[data-theme="light"] .review-insight-positive {
  border-color: color-mix(in srgb, var(--green) 30%, var(--line));
  background: color-mix(in srgb, var(--green) 7%, var(--panel));
}

html[data-theme="light"] .review-insight-improve {
  border-color: color-mix(in srgb, var(--orange) 34%, var(--line));
  background: color-mix(in srgb, var(--orange) 8%, var(--panel));
}

html[data-theme="light"] .review-insight-positive p,
html[data-theme="light"] .review-insight-improve p {
  color: #344353;
}

html:not([data-theme="light"]) .review-insight-positive {
  border-color: color-mix(in srgb, var(--green) 42%, #3f4147);
  background: color-mix(in srgb, var(--green) 12%, #151921);
}

html:not([data-theme="light"]) .review-insight-improve {
  border-color: color-mix(in srgb, var(--orange) 44%, #3f4147);
  background: color-mix(in srgb, var(--orange) 13%, #151921);
}

html:not([data-theme="light"]) .review-insight-positive p {
  color: #d5eee5;
}

html:not([data-theme="light"]) .review-insight-improve p {
  color: #f3dfc7;
}

.voice-button {
  touch-action: manipulation;
  user-select: none;
}

/* Click-to-record controls: the red action stays visually distinct from submit. */
.voice-button {
  min-width: 112px;
  min-height: 40px;
  border-color: #ed4245;
  background: #ed4245;
  color: #fff;
  box-shadow: 0 6px 16px rgba(237, 66, 69, .22);
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.voice-button:hover {
  border-color: #d83a3d;
  background: #d83a3d;
  color: #fff;
  box-shadow: 0 8px 20px rgba(237, 66, 69, .28);
}

.voice-button:active {
  transform: translateY(1px) scale(.99);
}

.voice-button.recording {
  border-color: #c93438;
  background: #c93438;
  color: #fff;
}

.voice-button.paused {
  border-color: #d48629;
  background: #d48629;
  color: #fff;
  box-shadow: 0 6px 16px rgba(212, 134, 41, .22);
}

.voice-button.paused:hover {
  border-color: #bd7422;
  background: #bd7422;
}

.stop-voice {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(237, 66, 69, .58);
  border-radius: 7px;
  background: transparent;
  color: #ed4245;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.stop-voice:hover {
  border-color: #ed4245;
  background: rgba(237, 66, 69, .1);
}

.stop-voice:active {
  transform: translateY(1px);
}

.recording-note.paused {
  color: #d48629;
}

html[data-theme="light"] .voice-button {
  border-color: #ed4245;
  background: #ed4245;
  color: #fff;
}

html[data-theme="light"] .voice-button:hover {
  border-color: #d83a3d;
  background: #d83a3d;
  color: #fff;
}

html[data-theme="light"] .voice-button.recording {
  border-color: #c93438;
  background: #c93438;
  color: #fff;
}

html[data-theme="light"] .voice-button.paused {
  border-color: #d48629;
  background: #d48629;
  color: #fff;
}

html:not([data-theme="light"]) .voice-button,
html:not([data-theme="light"]) .voice-button:hover {
  border-color: #ed4245;
  background: #ed4245;
  color: #fff;
}

html:not([data-theme="light"]) .voice-button.recording {
  border-color: #c93438;
  background: #c93438;
  color: #fff;
}

html:not([data-theme="light"]) .voice-button.paused {
  border-color: #d48629;
  background: #d48629;
  color: #fff;
}

html:not([data-theme="light"]) .stop-voice {
  color: #ff6b6b;
}

@media (prefers-reduced-motion: reduce) {
  .voice-button,
  .stop-voice {
    transition: none;
  }

  .voice-button.recording .mic-dot {
    animation: none;
  }
}

/* Evidence is a scan-first list; details open only when a source needs checking. */
.review-evidence-tab {
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  align-items: stretch;
}

.review-evidence-tab > section {
  min-width: 0;
}

.review-evidence-column,
.review-training-column {
  min-height: 100%;
}

.review-training-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.review-evidence-column .evidence-sources {
  max-height: 520px;
  overflow: auto;
}

.evidence-source-list {
  display: grid;
  gap: 0;
}

.evidence-source {
  display: block;
  border-top: 1px solid var(--line);
}

.evidence-source:first-child {
  border-top: 0;
}

.evidence-source summary {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}

.evidence-source summary::-webkit-details-marker {
  display: none;
}

.evidence-source summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 5px;
}

.evidence-source-ref {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  background: var(--blue-soft);
  color: var(--blue-strong);
  font-size: 9px;
  font-weight: 800;
}

.evidence-source-preview {
  display: -webkit-box;
  overflow: hidden;
  margin: 5px 0 0;
  color: #4d5a68;
  font-size: 10px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.evidence-source-preview span,
.evidence-source-snippet span {
  margin-right: 6px;
  color: var(--blue-strong);
  font-size: 9px;
  font-weight: 780;
}

.evidence-source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  color: var(--blue-strong);
  font-size: 9px;
  font-weight: 750;
}

.evidence-source-toggle::after {
  content: "⌄";
  font-size: 12px;
  line-height: 1;
  transform: translateY(-1px);
}

.evidence-source[open] .evidence-source-toggle {
  font-size: 0;
}

.evidence-source[open] .evidence-source-toggle::before {
  content: "收起详情";
  font-size: 9px;
}

.evidence-source[open] .evidence-source-toggle::after {
  content: "⌃";
}

.evidence-source-detail {
  margin: 0 0 12px 27px;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
}

.evidence-source-detail .evidence-source-snippet {
  margin: 0;
  color: #4d5a68;
  font-size: 10px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* One complete example per view: explicit paging keeps cards aligned and readable. */
.example-answer-stage {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.example-answer-stage .example-answer-item {
  min-width: 0;
}

.example-answer-stage .example-answer {
  min-height: 400px;
}

.example-nav {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-muted);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.example-nav:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue-strong);
}

.example-nav:disabled {
  opacity: .3;
  cursor: default;
}

html:not([data-theme="light"]) .evidence-source-preview,
html:not([data-theme="light"]) .evidence-source-detail .evidence-source-snippet {
  color: #c5ccd8;
}

html:not([data-theme="light"]) .evidence-source-ref {
  background: rgba(112, 132, 255, .15);
  color: var(--blue-strong);
}

html:not([data-theme="light"]) .example-nav {
  border-color: #4e5058;
  background: #35373c;
}

@media (max-width: 760px) {
  .review-evidence-tab {
    grid-template-columns: 1fr;
  }

  .review-evidence-column .evidence-sources {
    max-height: none;
  }

  .example-answer-stage {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 7px;
  }

  .example-nav {
    width: 32px;
    height: 32px;
  }

  .example-answer-stage .example-answer {
    min-height: 360px;
  }
}

/* Final state tokens for navigation and report tabs. Keep both themes deterministic. */
html[data-theme="light"] .nav-glyph img,
html[data-theme="light"] .context-label-icon {
  filter: brightness(0) saturate(100%);
  opacity: .52;
}

html[data-theme="light"] .nav-item.active .nav-glyph img {
  filter: brightness(0) saturate(100%) invert(40%) sepia(92%) saturate(1864%) hue-rotate(205deg) brightness(96%) contrast(94%);
  opacity: 1;
}

html:not([data-theme="light"]) .nav-glyph img,
html:not([data-theme="light"]) .context-label-icon {
  filter: brightness(0) invert(74%);
  opacity: .9;
}

html:not([data-theme="light"]) .nav-item.active .nav-glyph img {
  filter: brightness(0) saturate(100%) invert(72%) sepia(18%) saturate(1675%) hue-rotate(199deg) brightness(103%) contrast(103%);
  opacity: 1;
}

html[data-theme="light"] .nav-item.active { color: var(--blue-strong); }
html:not([data-theme="light"]) .nav-item.active { color: #b5c1ff; }
html[data-theme="light"] .question-refresh .button-icon { filter: brightness(0) saturate(100%); }
html:not([data-theme="light"]) .question-refresh .button-icon { filter: brightness(0) invert(1); }
html:not([data-theme="light"]) .evidence-status { background: rgba(35, 165, 89, .16); color: #57f287; }
html:not([data-theme="light"]) .model-status { background: rgba(88, 101, 242, .18); color: #b5c1ff; }

html[data-theme="light"] .review-tab.active,
html[data-theme="light"] .review-report-tab.active {
  background: #fff;
  color: var(--blue-strong);
  box-shadow: 0 1px 3px rgba(28, 47, 72, .1);
}

html:not([data-theme="light"]) .review-tab.active,
html:not([data-theme="light"]) .review-report-tab.active {
  background: #35373c;
  color: #b5c1ff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .24);
}