:root {
  color-scheme: dark;
  --bg: #050608;
  --bg-strong: #0a0c10;
  --panel: #11141a;
  --panel-soft: #161a21;
  --panel-tint: #1a1014;
  --text: #f5f7fb;
  --muted: #a6b0c3;
  --line: #262c36;
  --line-strong: #343c49;
  --line-soft: rgba(255, 255, 255, 0.08);
  --accent: #e11d48;
  --accent-strong: #be123c;
  --accent-rgb: 225, 29, 72;
  --brand: #1677ff;
  --brand-rgb: 22, 119, 255;
  --success: #16a34a;
  --success-rgb: 22, 163, 74;
  --warning: #f59e0b;
  --warning-rgb: 245, 158, 11;
  --warning-deep: #b45309;
  --danger: #dc2626;
  --danger-rgb: 220, 38, 38;
  --danger-deep: #991b1b;
  --brand-dark: #ffffff;
  --brand-dark-strong: #ffffff;
  --brand-contrast: #f5f7fb;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.24);
  --shadow-card: 0 8px 18px rgba(0, 0, 0, 0.22);
  --font-ui: "Source Han Sans SC", "Source Han Sans CN", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-cn: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html { font-family: var(--font-ui); }
* { box-sizing: border-box; }
body, button, input, textarea, select { font-family: var(--font-ui); }
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.18) 0%, transparent 26%),
    linear-gradient(180deg, #030406 0%, var(--bg) 52%, var(--bg-strong) 100%);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  line-height: 1.55;
}
.ios-app body,
body.ios-app {
  overscroll-behavior-y: contain;
}
.shell { min-height: 100vh; display: grid; grid-template-columns: 324px minmax(0, 1fr); }
html.react-student-embedded,
html.react-student-embedded body {
  background: transparent !important;
}
html.react-student-embedded .shell {
  display: block !important;
  min-height: 100vh !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
html.react-student-embedded .sidebar,
html.react-student-embedded .topbar,
html.react-student-embedded #runtimeStatusStrip,
html.react-student-embedded #globalNotice,
html.react-student-embedded #companionAmbientStage,
html.react-student-embedded #companionDock,
html.react-student-embedded #companionPanel,
html.react-student-embedded #companionMiniBubble,
html.react-student-embedded #accountModal,
html.react-student-embedded .modal-backdrop,
html.react-student-embedded .mobile-action-dock {
  display: none !important;
}
html.react-student-embedded .main {
  min-height: 100vh !important;
  padding: 0 !important;
}
html.react-student-embedded .panel,
html.react-student-embedded .section-card,
html.react-student-embedded .hero-card,
html.react-student-embedded .info-card,
html.react-student-embedded .metric-card {
  animation: none !important;
  transition: none !important;
}

/* HW dark mode v2 - calmer references: Linear / 豆包AI / Notion AI */
html[data-theme="dark"] {
  --bg: #07080d;
  --bg-strong: #0a0d14;
  --panel: rgba(16, 19, 27, 0.82);
  --panel-soft: rgba(16, 19, 27, 0.66);
  --panel-tint: rgba(18, 22, 31, 0.74);
  --surface: #101a2c;
  --surface-strong: #162238;
  --surface-muted: #0d1728;
  --text-primary: rgba(234, 241, 250, 0.95);
  --text-strong: rgba(247, 250, 255, 0.96);
  --text-secondary: #aec0de;
  --border-color: rgba(226, 232, 240, 0.18);
  --glass: rgba(12, 15, 23, 0.58);
  --text: rgba(238, 242, 247, 0.86);
  --muted: rgba(166, 174, 188, 0.66);
  --line: rgba(226, 232, 240, 0.08);
  --line-strong: rgba(226, 232, 240, 0.13);
  --line-soft: rgba(226, 232, 240, 0.055);
  --accent: #8f9cff;
  --accent-rgb: 143, 156, 255;
  --brand: #7da2ff;
  --brand-rgb: 125, 162, 255;
  --shadow: 0 28px 82px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.24);
  --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] body {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 82% -4%, rgba(94, 92, 230, 0.075), transparent 30%),
    radial-gradient(circle at 8% 12%, rgba(56, 189, 248, 0.035), transparent 24%),
    linear-gradient(180deg, #07080d 0%, #090b12 48%, #07080d 100%) !important;
}

html.react-student-embedded[data-theme="dark"],
html.react-student-embedded[data-theme="dark"] body {
  background: transparent !important;
}

html[data-theme="dark"] .main,
html[data-theme="dark"] .panel.active {
  background: transparent !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .ios-app .sidebar,
html[data-theme="dark"] .compact-shell .sidebar {
  background:
    linear-gradient(180deg, rgba(5, 8, 14, 0.99) 0%, rgba(7, 10, 17, 0.99) 100%) !important;
  border-right-color: rgba(226, 232, 240, 0.07) !important;
  box-shadow: 18px 0 52px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .topbar {
  background:
    linear-gradient(180deg, rgba(18, 21, 30, 0.82), rgba(12, 15, 22, 0.72)) !important;
  border-color: rgba(226, 232, 240, 0.08) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .sidebar-foot,
html[data-theme="dark"] .shell .sidebar .brand-head {
  background:
    linear-gradient(180deg, rgba(10, 13, 20, 0.84), rgba(7, 10, 16, 0.76)) !important;
  border-color: rgba(226, 232, 240, 0.08) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] .topbar h2,
html[data-theme="dark"] .landing-welcome-copy h1,
html[data-theme="dark"] .landing-task-row strong,
html[data-theme="dark"] .landing-special-card strong,
html[data-theme="dark"] .landing-growth-grid strong {
  color: rgba(238, 242, 247, 0.88) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .brand-subtitle,
html[data-theme="dark"] .sidebar-section,
html[data-theme="dark"] .sidebar-foot p,
html[data-theme="dark"] .landing-welcome-copy p:not(.eyebrow),
html[data-theme="dark"] .landing-task-row em,
html[data-theme="dark"] .landing-special-card p,
html[data-theme="dark"] .landing-growth-grid span,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .stack-item p,
html[data-theme="dark"] .question-meta,
html[data-theme="dark"] .topbar-search input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--muted) !important;
}

html[data-theme="dark"] .section-card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .landing-welcome-panel,
html[data-theme="dark"] .landing-today-panel,
html[data-theme="dark"] .landing-special-panel,
html[data-theme="dark"] .landing-growth-panel,
html[data-theme="dark"] .landing-coach-card,
html[data-theme="dark"] .landing-coach-note,
html[data-theme="dark"] .landing-ai-map,
html[data-theme="dark"] .landing-task-row,
html[data-theme="dark"] .landing-special-card,
html[data-theme="dark"] .landing-growth-grid div,
html[data-theme="dark"] .stack-item,
html[data-theme="dark"] .dashboard-mission-card,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .feedback-box,
html[data-theme="dark"] .question-box,
html[data-theme="dark"] .empty-box,
html[data-theme="dark"] .theme-settings-card,
html[data-theme="dark"] .settings-side-card,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .account-modal-card,
html[data-theme="dark"] .companion-panel,
html[data-theme="dark"] .audio-dialogue-summary,
html[data-theme="dark"] .audio-dialogue-timeline,
html[data-theme="dark"] .audio-report-digest,
html[data-theme="dark"] .copilot-panel,
html[data-theme="dark"] .copilot-score-card,
html[data-theme="dark"] .interviewer-profile-card,
html[data-theme="dark"] .active-resume-card {
  background:
    linear-gradient(180deg, rgba(18, 21, 30, 0.86), rgba(12, 15, 22, 0.74)),
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.035), transparent 34%) !important;
  border-color: var(--line) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    var(--shadow-soft) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .landing-today-panel,
html[data-theme="dark"] .landing-growth-panel {
  background:
    linear-gradient(180deg, rgba(18, 21, 30, 0.74), rgba(11, 14, 21, 0.56)),
    radial-gradient(circle at 100% 0%, rgba(125, 162, 255, 0.045), transparent 36%) !important;
  backdrop-filter: blur(24px);
}

html[data-theme="dark"] .section-card::before {
  opacity: 0.08 !important;
  background: linear-gradient(90deg, rgba(143, 156, 255, 0.34), rgba(249, 115, 22, 0.14)) !important;
}

html[data-theme="dark"] .section-card:hover,
html[data-theme="dark"] .hero-card:hover,
html[data-theme="dark"] .info-card:hover,
html[data-theme="dark"] .metric-card:hover,
html[data-theme="dark"] .landing-task-row:hover,
html[data-theme="dark"] .landing-special-card:hover {
  border-color: var(--line-strong) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    var(--shadow) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .topbar-search,
html[data-theme="dark"] .topbar-search input,
html[data-theme="dark"] .ghost-btn,
html[data-theme="dark"] .launch-secondary-btn,
html[data-theme="dark"] .small-btn,
html[data-theme="dark"] .toolbar button,
html[data-theme="dark"] .topbar-user-trigger,
html[data-theme="dark"] .topbar-ai-status {
  color: rgba(230, 236, 246, 0.86) !important;
  border-color: rgba(226, 232, 240, 0.1) !important;
  background: rgba(7, 10, 17, 0.78) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] .primary-btn,
html[data-theme="dark"] .launch-primary-btn,
html[data-theme="dark"] .dashboard-main-cta,
html[data-theme="dark"] .topbar-create-btn,
html[data-theme="dark"] .full-width-btn {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 18px 42px rgba(79, 70, 229, 0.18) !important;
}

html[data-theme="dark"] .pipeline-step.done,
html[data-theme="dark"] .stack-item.review-good,
html[data-theme="dark"] .checklist-state-good,
html[data-theme="dark"] .report-card.review-good {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(52, 211, 153, 0.18) !important;
  color: rgba(187, 247, 208, 0.86) !important;
}

html[data-theme="dark"] .landing-growth-trend {
  background:
    linear-gradient(180deg, rgba(12, 15, 22, 0.66), rgba(7, 10, 17, 0.52)) !important;
  border-color: rgba(226, 232, 240, 0.08) !important;
}

html[data-theme="dark"] .landing-growth-trend span {
  background: linear-gradient(180deg, #5b8fff, #3868dd) !important;
  box-shadow: 0 10px 18px rgba(59, 130, 246, 0.12) !important;
}

/* HW night workspace tuning - darker, softer, less gaming glow */
html[data-theme="dark"] {
  --bg: #040712;
  --bg-strong: #060a14;
  --panel: rgba(10, 15, 27, 0.78);
  --panel-soft: rgba(12, 18, 31, 0.66);
  --panel-tint: rgba(15, 23, 42, 0.58);
  --text: rgba(229, 231, 235, 0.86);
  --muted: rgba(148, 163, 184, 0.68);
  --line: rgba(148, 163, 184, 0.13);
  --line-strong: rgba(148, 163, 184, 0.18);
  --line-soft: rgba(148, 163, 184, 0.09);
  --glass: rgba(8, 13, 24, 0.54);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.24);
  --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.24);
  --accent: #8b9cff;
  --accent-rgb: 139, 156, 255;
  --brand: #7da2ff;
  --brand-rgb: 125, 162, 255;
}

html[data-theme="dark"] body {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 80% 0%, rgba(var(--accent-rgb), 0.075), transparent 28%),
    radial-gradient(circle at 8% 10%, rgba(14, 165, 233, 0.04), transparent 30%),
    linear-gradient(180deg, #030611 0%, #050815 52%, #05070f 100%) !important;
}

html.react-student-embedded[data-theme="dark"],
html.react-student-embedded[data-theme="dark"] body {
  background: transparent !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .ios-app .sidebar,
html[data-theme="dark"] .compact-shell .sidebar {
  background:
    linear-gradient(180deg, rgba(5, 10, 20, 0.98) 0%, rgba(6, 12, 24, 0.98) 58%, rgba(3, 7, 15, 0.98) 100%) !important;
  border-right-color: rgba(148, 163, 184, 0.1) !important;
  box-shadow: 18px 0 46px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .topbar {
  color: var(--text) !important;
  background:
    linear-gradient(180deg, rgba(10, 15, 27, 0.78), rgba(8, 12, 22, 0.62)) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(22px);
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .sidebar-foot {
  background: rgba(8, 13, 24, 0.52) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .shell .sidebar .brand-head {
  border-color: rgba(148, 163, 184, 0.12) !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(239, 68, 68, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(3, 7, 15, 0.8), rgba(8, 13, 24, 0.6)) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .brand-subtitle,
html[data-theme="dark"] .sidebar-section,
html[data-theme="dark"] .sidebar-foot p,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .landing-task-row em,
html[data-theme="dark"] .landing-special-card p,
html[data-theme="dark"] .landing-growth-grid span,
html[data-theme="dark"] .landing-coach-note p,
html[data-theme="dark"] .topbar-search input::placeholder {
  color: var(--muted) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .topbar h2,
html[data-theme="dark"] .landing-welcome-copy h1,
html[data-theme="dark"] .landing-task-row strong,
html[data-theme="dark"] .landing-special-card strong,
html[data-theme="dark"] .landing-growth-grid strong {
  color: rgba(241, 245, 249, 0.88) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .landing-welcome-copy p:not(.eyebrow),
html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .topbar-user-trigger strong {
  color: rgba(203, 213, 225, 0.7) !important;
}

html[data-theme="dark"] .section-card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .landing-welcome-panel,
html[data-theme="dark"] .landing-special-panel,
html[data-theme="dark"] .dashboard-focus-card,
html[data-theme="dark"] .dashboard-donut-card,
html[data-theme="dark"] .dashboard-radar-card,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .feedback-box,
html[data-theme="dark"] .question-box,
html[data-theme="dark"] .empty-box,
html[data-theme="dark"] .theme-settings-card,
html[data-theme="dark"] .settings-side-card,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .account-modal-card,
html[data-theme="dark"] .companion-panel,
html[data-theme="dark"] .audio-dialogue-summary,
html[data-theme="dark"] .audio-dialogue-timeline,
html[data-theme="dark"] .audio-report-digest,
html[data-theme="dark"] .copilot-panel,
html[data-theme="dark"] .copilot-score-card,
html[data-theme="dark"] .interviewer-profile-card,
html[data-theme="dark"] .active-resume-card {
  background:
    linear-gradient(180deg, rgba(13, 18, 31, 0.76), rgba(7, 11, 21, 0.6)),
    radial-gradient(circle at 12% 0%, rgba(var(--brand-rgb), 0.045), transparent 34%) !important;
  border-color: rgba(148, 163, 184, 0.13) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.022) inset,
    0 24px 70px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .landing-today-panel,
html[data-theme="dark"] .landing-growth-panel {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.58), rgba(8, 13, 24, 0.42)),
    radial-gradient(circle at 100% 0%, rgba(167, 139, 250, 0.055), transparent 36%) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 26px 76px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(24px);
}

html[data-theme="dark"] .landing-welcome-panel {
  background:
    radial-gradient(circle at 78% 14%, rgba(139, 156, 255, 0.07), transparent 34%),
    linear-gradient(135deg, rgba(12, 18, 31, 0.72), rgba(7, 11, 21, 0.56)) !important;
}

html[data-theme="dark"] .landing-task-row,
html[data-theme="dark"] .landing-special-card,
html[data-theme="dark"] .landing-growth-grid div,
html[data-theme="dark"] .landing-coach-card,
html[data-theme="dark"] .landing-coach-note,
html[data-theme="dark"] .landing-ai-map,
html[data-theme="dark"] .stack-item,
html[data-theme="dark"] .dashboard-mission-card {
  background: rgba(8, 13, 24, 0.58) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.018) inset,
    0 14px 34px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(16px);
}

html[data-theme="dark"] .section-card::before {
  opacity: 0.14 !important;
  background: linear-gradient(90deg, rgba(125, 162, 255, 0.42), rgba(249, 115, 22, 0.2)) !important;
}

html[data-theme="dark"] .landing-task-row:hover,
html[data-theme="dark"] .landing-special-card:hover,
html[data-theme="dark"] .section-card:hover,
html[data-theme="dark"] .metric-card:hover,
html[data-theme="dark"] .hero-card:hover,
html[data-theme="dark"] .info-card:hover {
  border-color: rgba(139, 156, 255, 0.2) !important;
  box-shadow:
    0 0 0 1px rgba(139, 156, 255, 0.05) inset,
    0 28px 76px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="dark"] .ghost-btn,
html[data-theme="dark"] .launch-secondary-btn,
html[data-theme="dark"] .small-btn,
html[data-theme="dark"] .toolbar button,
html[data-theme="dark"] .topbar-user-trigger,
html[data-theme="dark"] .topbar-search,
html[data-theme="dark"] .topbar-ai-status {
  color: rgba(229, 231, 235, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  background: rgba(7, 11, 21, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 14px 34px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] .primary-btn,
html[data-theme="dark"] .launch-primary-btn,
html[data-theme="dark"] .dashboard-main-cta,
html[data-theme="dark"] .topbar-create-btn,
html[data-theme="dark"] .full-width-btn {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 18px 42px rgba(79, 70, 229, 0.22) !important;
}

html[data-theme="dark"] .landing-growth-trend {
  background:
    linear-gradient(180deg, rgba(10, 15, 27, 0.5), rgba(5, 8, 18, 0.42)) !important;
  border-color: rgba(148, 163, 184, 0.11) !important;
}

html[data-theme="dark"] .landing-growth-trend span {
  background: linear-gradient(180deg, #4f8cff, #2f6eea) !important;
  box-shadow: 0 10px 18px rgba(59, 130, 246, 0.14) !important;
}

/* HW sidebar brand lockup - theme aware image logo */
.shell .sidebar .brand {
  padding: 18px 16px 14px !important;
}

.shell .sidebar .brand-head {
  display: block !important;
  padding: 8px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(var(--accent-rgb), 0.18) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(239, 68, 68, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(8, 20, 38, 0.74), rgba(15, 23, 42, 0.58)) !important;
  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.22) !important;
}

html[data-theme="dark"] .shell .sidebar .brand-head {
  background:
    radial-gradient(circle at 18% 20%, rgba(239, 68, 68, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(2, 6, 23, 0.86), rgba(15, 23, 42, 0.7)) !important;
}

.shell .sidebar .brand-logo,
.ios-app .brand-logo,
.compact-shell .brand-logo,
html[data-theme="dark"] .brand-logo,
html[data-theme="light"] .brand-logo {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 471 / 216 !important;
  object-fit: contain !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: contrast(1.04) saturate(1.04) !important;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  color: var(--brand-contrast);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--line);
}
.brand {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(var(--accent-rgb), 0.035) 100%);
  box-shadow: var(--shadow-soft);
}
.ios-app .shell,
.compact-shell .shell {
  grid-template-columns: 1fr;
}
.ios-app .sidebar,
.compact-shell .sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: auto;
  overflow: visible;
  padding:
    calc(10px + var(--safe-top))
    calc(12px + var(--safe-right))
    12px
    calc(12px + var(--safe-left));
  border-right: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
}
.ios-app .brand,
.compact-shell .brand {
  padding: 12px;
  gap: 12px;
}
.ios-app .brand-logo,
.compact-shell .brand-logo {
  width: min(100%, 180px);
  aspect-ratio: 1180 / 690;
  height: auto;
  padding: 0;
}
.ios-app .brand-copy,
.compact-shell .brand-copy {
  gap: 6px;
}
.ios-app .brand-title,
.compact-shell .brand-title {
  font-size: 28px;
}
.ios-app .brand-subtitle,
.compact-shell .brand-subtitle {
  max-width: none;
  font-size: 11px;
  line-height: 1.5;
}
.ios-app .brand-chip-row,
.compact-shell .brand-chip-row {
  display: none;
}
.ios-app .status-card,
.compact-shell .status-card {
  display: none;
}
.ios-app .menu,
.compact-shell .menu {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}
.ios-app .menu::-webkit-scrollbar,
.compact-shell .menu::-webkit-scrollbar {
  display: none;
}
.ios-app .menu-item,
.compact-shell .menu-item {
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 10px 14px;
  scroll-snap-align: center;
}
.ios-app .main,
.compact-shell .main {
  padding:
    14px
    calc(12px + var(--safe-right))
    calc(22px + var(--safe-bottom))
    calc(12px + var(--safe-left));
}
.ios-app .topbar,
.compact-shell .topbar {
  position: sticky;
  top: calc(142px + var(--safe-top));
  z-index: 10;
  padding: 14px;
}
.ios-app .topbar h2,
.compact-shell .topbar h2 {
  font-size: 22px;
}
.ios-app .topbar-actions,
.compact-shell .topbar-actions {
  display: none;
}
.ios-app .panel,
.compact-shell .panel {
  gap: 14px;
}
.ios-app .section-card,
.compact-shell .section-card,
.ios-app .launch-card,
.compact-shell .launch-card {
  padding: 16px;
}
.ios-app .feedback-box,
.compact-shell .feedback-box {
  font-size: 13px;
  line-height: 1.55;
}
.ios-app .launch-card h3,
.compact-shell .launch-card h3 {
  font-size: 30px;
  max-width: 100%;
}
.ios-app .launch-summary-grid,
.compact-shell .launch-summary-grid {
  grid-template-columns: 1fr;
}
.ios-app .launch-actions,
.compact-shell .launch-actions {
  grid-template-columns: 1fr;
}
.ios-app .launch-primary-btn,
.compact-shell .launch-primary-btn {
  font-size: 20px;
  padding: 16px 18px;
}
.ios-app .metric-grid,
.compact-shell .metric-grid,
.ios-app .section-grid,
.compact-shell .section-grid,
.ios-app .interview-main-dashboard,
.compact-shell .interview-main-dashboard,
.ios-app .interview-workspace-grid,
.compact-shell .interview-workspace-grid,
.ios-app .interview-layout,
.compact-shell .interview-layout,
.ios-app .settings-panel-grid,
.compact-shell .settings-panel-grid,
.ios-app .settings-config-grid,
.compact-shell .settings-config-grid,
.ios-app .settings-control-grid,
.compact-shell .settings-control-grid,
.ios-app .settings-meta-grid,
.compact-shell .settings-meta-grid,
.ios-app .audio-history-grid,
.compact-shell .audio-history-grid {
  grid-template-columns: 1fr;
}
.ios-app .metric-card,
.compact-shell .metric-card {
  padding: 16px;
}
.ios-app .metric-card h3,
.compact-shell .metric-card h3 {
  font-size: 24px;
}
.ios-app .toolbar,
.compact-shell .toolbar {
  gap: 10px;
}
.ios-app .toolbar > *,
.compact-shell .toolbar > * {
  width: 100%;
}
.ios-app .form-grid,
.compact-shell .form-grid {
  grid-template-columns: 1fr;
}
.ios-app .question-box,
.compact-shell .question-box {
  font-size: 16px;
}
.ios-app textarea,
.compact-shell textarea {
  font-size: 16px;
}
.ios-app .interview-answer-stack textarea,
.compact-shell .interview-answer-stack textarea,
.ios-app #paperAnswer,
.compact-shell #paperAnswer {
  min-height: 150px;
}
.ios-app .interview-answer-stack .form-actions,
.compact-shell .interview-answer-stack .form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ios-app .qa-inline-actions,
.compact-shell .qa-inline-actions {
  display: none !important;
}
.ios-app .interview-answer-stack .form-actions .primary-btn,
.compact-shell .interview-answer-stack .form-actions .primary-btn,
.ios-app .interview-answer-stack .form-actions .ghost-btn,
.compact-shell .interview-answer-stack .form-actions .ghost-btn {
  width: 100%;
}
.ios-app .audio-record-list,
.compact-shell .audio-record-list,
.ios-app .settings-diagnostic-box,
.compact-shell .settings-diagnostic-box {
  max-height: none;
}
.ios-app .embed-frame,
.compact-shell .embed-frame {
  min-height: 70vh;
}
body.compact-shell[data-active-panel="interview"] .main,
body.compact-shell[data-active-panel="paper"] .main,
body.ios-app[data-active-panel="interview"] .main,
body.ios-app[data-active-panel="paper"] .main {
  padding-bottom: calc(142px + var(--safe-bottom));
}
.mobile-action-dock {
  display: none;
}

.mobile-action-dock[hidden],
.mobile-action-dock-panel[hidden] {
  display: none !important;
}

.ios-app .mobile-action-dock,
.compact-shell .mobile-action-dock {
  position: fixed;
  left: calc(10px + var(--safe-left));
  right: calc(10px + var(--safe-right));
  bottom: calc(10px + var(--safe-bottom));
  z-index: 40;
  display: grid;
}
.mobile-action-dock-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 249, 0.96) 100%);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
}
.mobile-action-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mobile-action-dock-head strong,
.mobile-action-dock-head p {
  margin: 0;
}
.mobile-action-dock-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.mobile-action-dock-head strong {
  font-size: 14px;
  color: var(--text);
}
.mobile-action-dock-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-action-dock-grid-paper {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-action-dock-grid .primary-btn,
.mobile-action-dock-grid .ghost-btn,
.mobile-action-dock-grid .danger-btn {
  min-height: 46px;
  padding: 12px;
  font-size: 15px;
}
.mobile-action-dock-grid button:disabled {
  opacity: 0.52;
  transform: none;
}
.brand-logo {
  width: min(100%, 248px);
  aspect-ratio: 1180 / 690;
  height: auto;
  padding: 0;
  border-radius: 8px;
  object-fit: cover;
  background: transparent;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.14);
  flex: 0 0 auto;
  display: block;
}
.brand-copy { width: 100%; min-width: 0; display: grid; gap: 10px; align-content: start; }
.brand h1, .brand p, .section-head h3, .hero-card h3, .info-card h3, .topbar h2 { margin: 0; }
.brand-kicker {
  margin: 0 0 2px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-title {
  display: grid;
  gap: 0;
  font-family: var(--font-ui);
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--brand-contrast);
  font-weight: 800;
  justify-items: start;
}
.brand-title-line { display: block; white-space: nowrap; }
.brand-subtitle { margin-top: 0; max-width: none; font-size: 12px; line-height: 1.7; color: var(--muted); }
.brand-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.brand-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}
.status-card span, .sidebar-foot p, .eyebrow, .stack-item p, .question-tags, .question-meta { color: var(--muted); }
.topbar h2, .section-head h3, .launch-card h3 {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: 0;
}
.status-card, .sidebar-foot {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(var(--accent-rgb), 0.03) 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.status-card h2 { margin: 0 0 12px; font-size: 15px; }
.status-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.status-card li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.status-card span { color: var(--muted); }
.status-card strong { color: var(--text); }
.menu { display: grid; gap: 8px; }
.menu-section-label {
  margin: 10px 8px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.menu-section-label:first-child {
  margin-top: 0;
}
.menu-item, .primary-btn, .ghost-btn, .danger-btn, select, input, textarea { border-radius: 8px; font: inherit; }
.menu-item {
  text-align: left;
  background: transparent;
  color: #374151;
  border: 1px solid transparent;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.menu-item.active, .menu-item:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}
.main { padding: 22px 26px 28px; display: grid; gap: 18px; }
.topbar, .section-head, .toolbar, .hero-actions, .form-actions, .topbar-actions, .role-switch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar, .section-head { justify-content: space-between; }
.topbar {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 100%);
  box-shadow: var(--shadow-soft);
}
.topbar h2 { font-size: 26px; line-height: 1.08; }
.topbar-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.topbar-pill-primary {
  border-color: rgba(var(--accent-rgb), 0.16);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}
.eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.panel { display: none; gap: 18px; }
.panel.active {
  display: grid;
  visibility: visible;
  opacity: 1;
  filter: none;
}
.section-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.hero-grid, .section-grid, .metric-grid { display: grid; gap: 18px; }
.hero-grid { grid-template-columns: minmax(0,2fr) minmax(280px,1fr); }
.section-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.compact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.interview-shell {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  align-items: start;
}
.interview-main-stack,
.interview-side-stack {
  display: grid;
  gap: 18px;
}
.interview-main-dashboard {
  grid-template-columns: minmax(320px, 0.84fr) minmax(0, 1.16fr);
  align-items: start;
}
.hero-card, .info-card, .section-card, .metric-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.hero-card, .info-card, .section-card { padding: 20px; }
.metric-card { padding: 18px; }
.launch-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #ffffff 0%, rgba(var(--accent-rgb), 0.05) 38%, rgba(var(--accent-rgb), 0.11) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid;
  gap: 18px;
}
.launch-card::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14) 0%, rgba(var(--accent-rgb), 0) 68%);
  pointer-events: none;
}
.launch-card h3 { margin: 0; font-size: 36px; line-height: 1.1; max-width: 10.5em; }
.launch-card p { margin: 0; }
.dashboard-workbench-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
  align-items: start;
}
.dashboard-main-column,
.dashboard-right-rail {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.dashboard-right-rail {
  position: sticky;
  top: 16px;
}
.dashboard-command-card {
  padding: 24px;
}
.dashboard-command-head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr);
  align-items: start;
}
.dashboard-command-head h3 {
  max-width: 14em;
}
.dashboard-command-head > div:first-child {
  display: grid;
  gap: 12px;
}
.dashboard-focus-card {
  display: grid;
  gap: 8px;
  min-height: 152px;
  padding: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-soft);
}
.dashboard-focus-card span,
.dashboard-focus-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.dashboard-focus-card strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.35;
}
.dashboard-focus-card p {
  color: var(--muted);
  line-height: 1.65;
}
.dashboard-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dashboard-kpi-grid {
  gap: 12px;
}
.dashboard-copilot-card,
.dashboard-loop-card,
.dashboard-next-card,
.dashboard-shortcut-card {
  box-shadow: var(--shadow-card);
}
.dashboard-copilot-card {
  border-color: rgba(var(--brand-rgb), 0.28);
  background:
    radial-gradient(circle at 88% 8%, rgba(168, 85, 247, 0.16), transparent 34%),
    radial-gradient(circle at 10% 0%, rgba(var(--brand-rgb), 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 255, 0.84));
}
.dashboard-task-center-core {
  display: grid;
  gap: 12px;
}
.dashboard-task-center-hero {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(var(--brand-rgb), 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--hot-rgb), 0.12), transparent 38%),
    rgba(255, 255, 255, 0.74);
}
.dashboard-task-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  aspect-ratio: 1;
}
.dashboard-task-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.dashboard-task-ring circle {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}
.dashboard-task-ring-track {
  stroke: rgba(var(--brand-rgb), 0.12);
}
.dashboard-task-ring-fill {
  stroke: var(--brand);
  stroke-dasharray: 100;
  stroke-dashoffset: var(--ring-offset);
  filter: drop-shadow(0 0 8px rgba(var(--brand-rgb), 0.34));
  transition: stroke-dashoffset 700ms ease;
}
.dashboard-task-ring div {
  position: relative;
  display: grid;
  gap: 3px;
  text-align: center;
}
.dashboard-task-ring span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.dashboard-task-ring strong {
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}
.dashboard-task-center-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.dashboard-task-center-copy > span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #7c2d12;
  background: rgba(255, 237, 213, 0.82);
  font-size: 11px;
  font-weight: 950;
}
.dashboard-task-center-copy strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
}
.dashboard-task-center-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.dashboard-task-center-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dashboard-task-center-meta small {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), 0.09);
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
}
.dashboard-shortcut-card,
.dashboard-system-card,
.dashboard-learning-grid {
  display: none;
}
.dashboard-loop-list {
  display: grid;
  gap: 10px;
}
.dashboard-loop-item {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.dashboard-loop-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.dashboard-loop-item strong {
  color: var(--text);
  font-size: 14px;
}
.dashboard-loop-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.dashboard-loop-item.done {
  border-color: rgba(var(--success-rgb), 0.24);
  background: rgba(var(--success-rgb), 0.06);
}
.dashboard-loop-item.active {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.08);
}
.dashboard-shortcut-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-shortcut-grid button {
  min-height: 42px;
}
.dashboard-mission-list {
  display: grid;
  gap: 9px;
}
.dashboard-mission-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.dashboard-mission-card:hover {
  border-color: rgba(var(--brand-rgb), 0.3);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.dashboard-mission-card span {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(var(--brand-rgb), 0.08);
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}
.dashboard-mission-card strong {
  color: var(--text);
  font-size: 14px;
}
.dashboard-mission-card p {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.dashboard-mission-card em {
  justify-self: end;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.dashboard-mission-card.primary {
  border-color: rgba(var(--brand-rgb), 0.25);
  background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.08), #ffffff);
}
.dashboard-mission-card.hot {
  border-color: rgba(var(--hot-rgb), 0.28);
  background: linear-gradient(180deg, rgba(var(--hot-rgb), 0.08), #ffffff);
}
.dashboard-mission-card.hot span {
  background: rgba(var(--hot-rgb), 0.1);
  color: var(--hot);
}
.dashboard-mission-card.active {
  border-color: rgba(var(--brand-rgb), 0.34);
  background:
    radial-gradient(circle at 88% 10%, rgba(96, 165, 250, 0.13), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.9));
  box-shadow:
    0 0 0 1px rgba(var(--brand-rgb), 0.12) inset,
    0 18px 38px rgba(var(--brand-rgb), 0.12);
}
.dashboard-mission-card.active em {
  background: rgba(var(--brand-rgb), 0.12);
  color: var(--brand);
}
.dashboard-mission-card.done {
  border-color: rgba(var(--success-rgb), 0.22);
}
.dashboard-mission-card.done span {
  background: rgba(var(--success-rgb), 0.1);
  color: #16a34a;
}
.dashboard-mission-card.done em {
  background: rgba(var(--success-rgb), 0.1);
  color: #16a34a;
}
.dashboard-mission-card.pending em {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.dashboard-mission-card.locked {
  opacity: 0.56;
}
.dashboard-welcome-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 12px;
  align-items: center;
  min-height: 0;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94));
}
.dashboard-welcome-copy {
  display: grid;
  gap: 5px;
}
.dashboard-welcome-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0;
}
.dashboard-welcome-copy p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
#dashboardHeroText {
  display: none;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dashboard-action-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dashboard-training-goal-card {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--brand-rgb), 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 8%, rgba(139, 92, 246, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 255, 0.66));
  box-shadow:
    0 18px 44px rgba(79, 70, 229, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.dashboard-training-goal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-training-goal-head span {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}
.dashboard-training-goal-head strong {
  padding: 6px 10px;
  border: 1px solid rgba(var(--hot-rgb), 0.16);
  border-radius: 999px;
  color: var(--hot);
  background: rgba(var(--hot-rgb), 0.08);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}
.dashboard-progress-summary {
  display: grid;
  gap: 8px;
}
.dashboard-progress-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-progress-summary span {
  color: var(--text);
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}
.dashboard-progress-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.dashboard-progress-summary i {
  display: block;
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), 0.1);
}
.dashboard-progress-summary b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #8b5cf6, var(--hot));
  transition: width 260ms ease;
}
.dashboard-goal-list {
  display: grid;
  gap: 8px;
}
.dashboard-goal-item {
  display: grid;
  grid-template-columns: 28px minmax(86px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.56);
}
.dashboard-goal-item span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: var(--brand);
  background: rgba(var(--brand-rgb), 0.1);
  font-size: 12px;
  font-weight: 950;
}
.dashboard-goal-item strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}
.dashboard-goal-item p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.35;
}
.dashboard-goal-item p em {
  margin-right: 6px;
  color: var(--brand);
  font-style: normal;
  font-weight: 950;
}
.dashboard-goal-item[data-goal-state="active"] {
  border-color: rgba(var(--brand-rgb), 0.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.1), transparent 40%),
    rgba(255, 255, 255, 0.72);
}
.dashboard-goal-item[data-goal-state="active"] span {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), #8b5cf6);
}
.dashboard-goal-item[data-goal-state="done"] span {
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
}
html[data-theme="dark"] .dashboard-training-goal-card {
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at 92% 8%, rgba(139, 92, 246, 0.08), transparent 38%),
    linear-gradient(135deg, rgba(10, 15, 27, 0.66), rgba(7, 11, 21, 0.48));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
html[data-theme="dark"] .dashboard-training-goal-head span,
html[data-theme="dark"] .dashboard-progress-summary span,
html[data-theme="dark"] .dashboard-goal-item strong {
  color: rgba(238, 242, 247, 0.92);
}
html[data-theme="dark"] .dashboard-training-goal-head strong {
  color: rgba(253, 186, 116, 0.94);
  border-color: rgba(251, 146, 60, 0.18);
  background: rgba(124, 45, 18, 0.18);
}
html[data-theme="dark"] .dashboard-progress-summary small,
html[data-theme="dark"] .dashboard-goal-item p {
  color: rgba(203, 213, 225, 0.72);
}
html[data-theme="dark"] .dashboard-progress-summary i {
  background: rgba(148, 163, 184, 0.16);
}
html[data-theme="dark"] .dashboard-goal-item {
  border-color: rgba(148, 163, 184, 0.1);
  background: rgba(15, 23, 42, 0.42);
}
html[data-theme="dark"] .dashboard-goal-item[data-goal-state="active"] {
  border-color: rgba(139, 140, 255, 0.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.08), transparent 40%),
    rgba(15, 23, 42, 0.58);
}
.dashboard-main-cta {
  width: min(210px, 100%);
  min-height: 42px;
  border-radius: 8px;
  font-size: 15px;
  box-shadow: 0 14px 26px rgba(var(--brand-rgb), 0.18);
}
.dashboard-action-strip .launch-secondary-btn {
  min-height: 42px;
  padding: 9px 12px;
  border-color: rgba(var(--brand-rgb), 0.12);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(11, 31, 58, 0.06);
}
.dashboard-action-strip .launch-secondary-btn span {
  font-size: 14px;
}
.dashboard-action-strip .launch-secondary-btn small {
  display: none;
  font-size: 12px;
}
.dashboard-welcome-card .launch-hint {
  grid-column: 1 / -1;
  display: none;
  padding: 8px 10px;
  background: rgba(var(--brand-rgb), 0.07);
  border-color: rgba(var(--brand-rgb), 0.14);
  color: var(--muted);
  box-shadow: none;
}
.dashboard-welcome-card .dashboard-focus-card {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.dashboard-welcome-card .dashboard-focus-card span {
  color: var(--brand);
}
.dashboard-welcome-card .dashboard-focus-card strong {
  font-size: 13px;
}
.dashboard-welcome-card .dashboard-focus-card p {
  display: none;
}
.dashboard-welcome-card .dashboard-focus-card small {
  font-size: 11px;
}
.dashboard-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dashboard-stat-card {
  min-height: 104px;
  padding: 14px 15px;
  border-radius: 8px;
  border: 1px solid rgba(219, 229, 240, 0.88);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(11, 31, 58, 0.06);
}
.metric-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.metric-card-top span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.metric-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(var(--brand-rgb), 0.08);
  color: var(--brand);
  font-size: 14px;
  font-style: normal;
}
.dashboard-stat-card h3 {
  margin-top: 12px;
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}
.dashboard-stat-card p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.metric-sparkline {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  width: 42px;
  height: 22px;
}
.metric-sparkline i {
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7bb2ff, var(--brand));
}
.dashboard-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.9fr);
  gap: 18px;
}
.dashboard-mini-tabs {
  display: flex;
  gap: 8px;
}
.dashboard-mini-tabs span {
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(var(--brand-rgb), 0.08);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}
.dashboard-mini-tabs span + span {
  background: transparent;
  color: var(--muted);
}
.dashboard-line-chart {
  display: grid;
  gap: 8px;
}
.dashboard-line-chart svg {
  width: 100%;
  min-height: 188px;
  overflow: visible;
}
.dashboard-line-chart .chart-grid line {
  stroke: #e7eef8;
  stroke-width: 1;
}
.dashboard-chart-caption {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}
.dashboard-chart-caption strong {
  color: var(--brand);
}
.dashboard-scope-frame {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  border: 1px solid rgba(147, 197, 253, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 20%, rgba(34, 211, 238, 0.10), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(124, 92, 255, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.86), rgba(239, 246, 255, 0.66));
  box-shadow:
    0 22px 58px rgba(15, 23, 42, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.78) inset;
}
.dashboard-scope-hud {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.9fr 0.9fr;
  gap: 8px;
  margin: 12px 12px 0;
}
.dashboard-scope-hud div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(96, 165, 250, 0.20);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(239, 246, 255, 0.52)),
    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.12), transparent 42%);
}
.dashboard-scope-hud span {
  display: block;
  color: rgba(71, 85, 105, 0.74);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
}
.dashboard-scope-hud strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 3px;
  color: #0f172a;
  font-size: 22px;
  line-height: 1;
}
.dashboard-scope-hud small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.dashboard-scope-frame::before {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(147, 197, 253, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  pointer-events: none;
  content: "";
}
.dashboard-scope-chart {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 206px !important;
  padding: 8px;
}
.dashboard-scope-chart .scope-grid line {
  stroke: rgba(96, 165, 250, 0.20);
  stroke-width: 1;
}
.dashboard-scope-chart .scope-label {
  fill: rgba(71, 85, 105, 0.80);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}
.dashboard-scope-chart .scope-label-right {
  text-anchor: end;
}
.dashboard-scope-chart .scope-fill {
  opacity: 0.92;
}
.dashboard-scope-chart .scope-trace {
  stroke: #2563eb;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard-scope-chart .scope-trace-glow {
  stroke: rgba(34, 211, 238, 0.52);
  stroke-width: 9;
  opacity: 0.70;
}
.dashboard-scope-chart .scope-node circle {
  fill: #eff6ff;
  stroke: rgba(37, 99, 235, 0.78);
  stroke-width: 2;
}
.dashboard-scope-chart .scope-node.is-last circle {
  fill: #22d3ee;
  stroke: #ffffff;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.62));
}
.dashboard-scope-chart .scope-node text {
  fill: #0f172a;
  font-size: 12px;
  font-weight: 900;
}
.dashboard-scope-chart .scope-scan {
  stroke: rgba(34, 211, 238, 0.34);
  stroke-width: 2;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.40));
  animation: none;
}
.dashboard-scope-frame[data-trend="up"] .scope-trace {
  stroke: #2563eb;
}
.dashboard-scope-frame[data-trend="down"] .scope-trace {
  stroke: #f97316;
}
.dashboard-recent-list {
  display: grid;
  gap: 8px;
}
.dashboard-recent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 56px 76px;
  gap: 10px;
  align-items: center;
  min-height: 44px;
}
.dashboard-recent-row strong,
.dashboard-recent-row p {
  margin: 0;
}
.dashboard-recent-row strong {
  color: var(--text);
  font-size: 13px;
}
.dashboard-recent-row p,
.dashboard-recent-row small {
  color: var(--muted);
  font-size: 12px;
}
.dashboard-recent-row em {
  color: var(--text);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
.status-pass,
.status-warn {
  display: inline-flex;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}
.status-pass {
  background: rgba(var(--success-rgb), 0.1);
  color: var(--success);
}
.status-warn {
  background: rgba(var(--warning-rgb), 0.14);
  color: var(--warning-deep);
}
.dashboard-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 18px;
}
.dashboard-donut-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.dashboard-donut {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--panel) 0 55%, transparent 56%),
    conic-gradient(var(--success) var(--value), rgba(var(--warning-rgb), 0.28) 0);
}
.dashboard-donut strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}
.dashboard-donut span {
  margin-top: -34px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.dashboard-donut-legend {
  display: grid;
  gap: 8px;
}
.dashboard-donut-legend p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.dashboard-donut-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.legend-pass { background: var(--success); }
.legend-warn { background: var(--warning); }
.legend-muted { background: #94a3b8; }
.dashboard-radar-card {
  display: grid;
  gap: 12px;
}
.dashboard-radar-line {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
}
.dashboard-radar-line span,
.dashboard-radar-line strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}
.dashboard-radar-line div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef3fb;
}
.dashboard-radar-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #8bbcff);
}
.dashboard-insight-list {
  display: grid;
  gap: 10px;
}
.dashboard-ai-insight-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), 0.08), transparent 42%),
    #f7faff;
}
.dashboard-ai-insight-card span {
  color: var(--brand);
  font-size: 11px;
  font-weight: 950;
}
.dashboard-ai-insight-card strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}
.dashboard-ai-insight-card p,
.dashboard-insight-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.dashboard-ai-insight-card p {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.dashboard-ai-insight-card[data-tone="lift"] {
  border-color: rgba(34, 197, 94, 0.2);
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.1), transparent 42%),
    #f6fef9;
}
.dashboard-ai-insight-card[data-tone="weak"] {
  border-color: rgba(249, 115, 22, 0.2);
  background:
    radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.1), transparent 42%),
    #fffaf4;
}
.dashboard-ai-insight-card[data-tone="next"] {
  border-color: rgba(var(--brand-rgb), 0.22);
}
.dashboard-ai-insight-card button {
  width: fit-content;
  min-height: 30px;
  margin-top: 2px;
  padding: 6px 10px;
  border: 1px solid rgba(var(--brand-rgb), 0.18);
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), #7c3aed);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}
.dashboard-todo-list,
.dashboard-system-list {
  display: grid;
  gap: 10px;
}
.dashboard-todo-list > div,
.dashboard-system-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  color: var(--muted);
  font-size: 13px;
}
.dashboard-todo-list > div {
  justify-content: flex-start;
}
.dashboard-todo-list span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--danger);
}
.dashboard-todo-list .done span {
  background: var(--success);
}
.dashboard-todo-list p {
  margin: 0;
}
.dashboard-system-list strong {
  color: var(--success);
}
.launch-summary-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.launch-summary-item {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}
.launch-summary-item strong { color: var(--text); font-size: 14px; line-height: 1.35; }
.launch-summary-item span { color: var(--muted); font-size: 13px; line-height: 1.6; }
.launch-actions { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.launch-primary-btn, .launch-secondary-btn { border-radius: 8px; border: 1px solid var(--line); cursor: pointer; font: inherit; }
.launch-primary-btn {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  border-color: transparent;
  padding: 18px 20px;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 16px 28px rgba(var(--accent-rgb), 0.2);
}
.launch-secondary-btn {
  display: grid;
  gap: 6px;
  padding: 18px 18px;
  background: rgba(255,255,255,0.92);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}
.launch-secondary-btn span { font-weight: 700; font-size: 18px; color: var(--text); }
.launch-secondary-btn small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.launch-hint {
  padding: 12px 14px;
  background: #05070b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.metric-card p, .metric-card h3 { margin: 0; }
.metric-card {
  position: relative;
  overflow: hidden;
}
.metric-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(var(--accent-rgb), 0.2) 100%);
}
.metric-card h3 { margin-top: 8px; font-size: 28px; line-height: 1.05; }
.metric-card .eyebrow { margin-bottom: 8px; }
.plain-list, .stack-list, .report-list, .question-list { display: grid; gap: 12px; }
.plain-list { padding-left: 18px; }
.env-list { display: grid; gap: 12px; }
.env-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.env-item strong { display: block; min-width: 132px; color: var(--text); }
.env-item span { color: var(--muted); text-align: right; }
.stack-item, .question-card, .report-card, .feedback-box, .question-box, .empty-box {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}
.stack-item strong,
.question-card h4,
.report-card strong {
  font-size: 15px;
  line-height: 1.4;
}
.stack-item p,
.report-card p,
.feedback-box p,
.question-card p {
  line-height: 1.62;
}
.feedback-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(var(--accent-rgb), 0.03) 100%);
}
.toolbar {
  padding: 2px 0 2px;
}
.toolbar input,
.toolbar select,
.toolbar button {
  min-height: 42px;
}
.pipeline-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pipeline-grid.compact-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pipeline-step { display: grid; gap: 4px; min-height: 68px; padding: 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.pipeline-step strong { margin: 0; font-size: 14px; color: var(--text); }
.pipeline-step span { font-size: 12px; line-height: 1.5; color: var(--muted); }
.pipeline-step.pending { background: #fff; }
.pipeline-step.active { background: rgba(var(--accent-rgb), 0.08); border-color: rgba(var(--accent-rgb), 0.24); }
.pipeline-step.done { background: rgba(var(--success-rgb), 0.08); border-color: rgba(var(--success-rgb), 0.24); }
.pipeline-step.warn { background: rgba(var(--warning-rgb), 0.1); border-color: rgba(var(--warning-rgb), 0.28); }
.stack-item.review-warn { border-color: rgba(var(--warning-rgb), 0.28); background: rgba(var(--warning-rgb), 0.08); }
.stack-item.review-good { border-color: rgba(var(--success-rgb), 0.22); background: rgba(var(--success-rgb), 0.06); }
.review-collapse {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  overflow: hidden;
}
.review-collapse summary {
  cursor: pointer;
  list-style: none;
  padding: 14px;
  font-weight: 700;
  color: var(--text);
  background: rgba(var(--warning-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--warning-rgb), 0.16);
}
.review-collapse summary::-webkit-details-marker { display: none; }
.review-collapse-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.audio-question-group {
  display: grid;
  gap: 10px;
}
.audio-question-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(var(--success-rgb), 0.08);
  border: 1px solid rgba(var(--success-rgb), 0.18);
}
.audio-question-group-head strong,
.audio-question-group-head span {
  color: var(--text);
}
.audio-question-group-head span {
  font-size: 12px;
  color: var(--muted);
}
.audio-question-group-body {
  display: grid;
  gap: 10px;
}
.audio-review-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.audio-flow-step {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}
.audio-flow-step::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--line);
}
.audio-flow-step:last-child::after {
  display: none;
}
.audio-flow-step strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}
.audio-flow-step span {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.25;
}
.audio-flow-step.done {
  border-color: rgba(var(--success-rgb), 0.24);
  background: rgba(var(--success-rgb), 0.07);
}
.audio-flow-step.active {
  border-color: rgba(var(--accent-rgb), 0.26);
  background: rgba(var(--accent-rgb), 0.08);
}
.audio-dialogue-timeline {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.audio-dialogue-line {
  display: grid;
  grid-template-columns: 28px 54px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}
.audio-dialogue-line span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}
.audio-dialogue-line.interviewer span {
  background: rgba(var(--success-rgb), 0.1);
  color: var(--success);
}
.audio-dialogue-line strong {
  color: var(--text);
  font-size: 13px;
}
.audio-dialogue-line p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.audio-workbench-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.audio-workbench-metric {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.audio-workbench-metric strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}
.audio-workbench-metric span {
  color: var(--muted);
  font-size: 12px;
}
.audio-dialogue-summary,
.audio-report-digest {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.audio-dialogue-stats,
.audio-report-score-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.audio-dialogue-stat,
.audio-report-score {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.78);
}
.audio-dialogue-stat strong,
.audio-report-score strong {
  color: var(--text);
  font-size: 18px;
}
.audio-dialogue-stat span,
.audio-report-score span {
  color: var(--muted);
  font-size: 12px;
}
.audio-interviewer-preview,
.audio-report-suggestions {
  display: grid;
  gap: 8px;
}
.audio-interviewer-preview p,
.audio-report-suggestions p,
.audio-report-digest > p,
.audio-dialogue-summary > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.audio-interviewer-preview p {
  padding: 8px 10px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.32);
  background: rgba(var(--accent-rgb), 0.06);
  border-radius: 0 8px 8px 0;
  color: var(--text);
}
.audio-lower-grid {
  align-items: start;
}
.audio-history-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}
.audio-history-grid .metric-card {
  padding: 14px;
  box-shadow: none;
}
.audio-history-grid .metric-card h3 {
  font-size: 22px;
}
.audio-record-list {
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}
.audio-record-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.audio-record-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.audio-record-card-head strong {
  min-width: 0;
}
.audio-record-time {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.audio-record-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.troubleshoot-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.troubleshoot-item { display: grid; gap: 8px; }
.troubleshoot-item strong { color: var(--text); }
.troubleshoot-item p { margin: 0; color: var(--muted); line-height: 1.6; }
.diagnostic-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.diagnostic-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.72);
}
.diagnostic-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.diagnostic-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.diagnostic-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.diagnostic-good {
  border-color: rgba(var(--success-rgb), 0.2);
  background: rgba(var(--success-rgb), 0.05);
}
.diagnostic-good .diagnostic-pill {
  border-color: rgba(var(--success-rgb), 0.2);
  color: var(--success);
}
.diagnostic-warn {
  border-color: rgba(var(--warning-rgb), 0.22);
  background: rgba(var(--warning-rgb), 0.05);
}
.diagnostic-warn .diagnostic-pill {
  border-color: rgba(var(--warning-rgb), 0.22);
  color: var(--warning-deep);
}
.format-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.format-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 600; }
.checklist-state-good { border-color: rgba(var(--success-rgb), 0.25); background: rgba(var(--success-rgb), 0.08); }
.checklist-state-warn { border-color: rgba(var(--warning-rgb), 0.24); background: rgba(var(--warning-rgb), 0.1); }
.question-bank-overview {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}
.question-bank-stat {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.question-bank-stat strong {
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}
.question-bank-stat span {
  color: var(--text);
  font-weight: 800;
}
.question-bank-stat p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.question-source-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.question-source-tabs button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.question-source-tabs button span {
  margin-left: 8px;
  color: var(--muted);
  font-weight: 700;
}
.question-source-tabs button.active {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.question-training-center {
  display: grid;
  gap: 18px;
}

.question-training-subtitle,
.question-training-title span,
.question-training-pack-progress-text {
  color: var(--muted);
  line-height: 1.55;
}

.question-training-section {
  display: grid;
  gap: 12px;
}

.question-training-title,
.question-ai-recommend-head,
.question-training-pack-headline,
.question-mistake-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.question-training-title h4,
.question-training-title p,
.question-ai-recommend-head h4,
.question-ai-recommend-head p,
.question-ai-training-card h5,
.question-ai-training-card p,
.question-training-pack p,
.question-mistake-card p {
  margin: 0;
}

.question-ai-recommend-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--accent-rgb), 0.16), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, rgba(var(--accent-rgb), 0.045) 100%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.question-ai-recommend-head span {
  color: var(--accent);
  font-weight: 900;
}

.question-ai-recommend-head h4 {
  margin-top: 4px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.2;
}

.question-ai-recommend-head p {
  max-width: 520px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.6;
}

.question-ai-recommend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.85fr));
  gap: 14px;
}

.question-ai-training-card,
.question-training-pack,
.question-mistake-card,
.question-mistake-empty,
.question-ability-domain {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

.question-ai-training-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  align-content: start;
}

.question-ai-training-card.primary {
  border-color: rgba(var(--accent-rgb), 0.38);
  padding: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), 0.12), transparent 36%),
    linear-gradient(180deg, #fff 0%, rgba(var(--accent-rgb), 0.065) 100%);
}

.question-ai-training-card.primary h5 {
  font-size: 26px;
  line-height: 1.18;
}

.question-ai-training-card.secondary {
  gap: 10px;
}

.question-ai-training-card.secondary h5 {
  font-size: 17px;
  line-height: 1.28;
}

.question-ai-training-top,
.question-ai-training-meta,
.question-training-pack-stats,
.question-training-pack-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.question-ai-training-top {
  justify-content: space-between;
}

.question-ai-training-top span,
.question-training-pack-status,
.question-ai-training-meta em,
.question-training-pack-stats span,
.question-training-pack-meta span,
.question-training-pack-meta em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.question-ai-training-top strong,
.question-ai-training-card small,
.question-training-pack-stats b,
.question-training-pack-meta em {
  color: var(--brand);
}

.question-ai-training-progress,
.question-training-pack-progress {
  position: relative;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}

.question-ai-training-progress i,
.question-training-pack-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.95), rgba(var(--brand-rgb), 0.88));
}

.question-ai-training-card p,
.question-ai-training-card small {
  color: var(--muted);
  line-height: 1.58;
}

.question-ai-training-reason {
  display: -webkit-box;
  min-height: 48px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.question-ai-training-card.primary .question-ai-training-reason {
  min-height: 0;
  -webkit-line-clamp: 3;
}

.question-ai-decision-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.question-ai-decision-strip div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.question-ai-decision-strip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.question-ai-decision-strip strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.question-ai-decision-strip div:first-child strong {
  color: var(--accent);
  font-size: 15px;
}

.question-ai-training-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.question-ai-training-steps span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px 0 6px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.075);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.question-ai-training-steps b {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: 11px;
}

.question-ai-training-cta {
  min-height: 44px;
  justify-content: center;
  font-size: 15px;
}

.question-ai-training-card.primary .question-ai-training-cta {
  min-height: 52px;
  font-size: 16px;
}

.question-ability-map,
.question-training-packs,
.question-mistake-replay {
  display: grid;
  gap: 14px;
}

.question-ability-map {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.question-ability-domain {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.question-ability-domain h5 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.question-ability-points {
  display: grid;
  gap: 9px;
}

.question-ability-point {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.question-ability-point strong {
  color: var(--accent);
}

.question-ability-point em,
.question-ability-point small {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.question-ability-point.active {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
}

.question-ability-point.strong strong { color: var(--success); }
.question-ability-point.weak strong,
.question-ability-point.not-started strong { color: var(--warning-deep); }

.question-training-packs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.question-project-packs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.question-training-pack {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
}

.question-training-pack::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.84), rgba(var(--brand-rgb), 0.72));
  opacity: 0.7;
}

.question-training-pack-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-weight: 900;
}

.question-training-pack-headline strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}

.question-training-pack p {
  color: var(--muted);
  line-height: 1.58;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.question-training-pack-status.completed {
  background: rgba(var(--success-rgb), 0.12);
  color: var(--success);
}

.question-training-pack-status.progressing,
.question-training-pack-status.training {
  background: rgba(var(--brand-rgb), 0.12);
  color: var(--brand);
}

.question-training-pack-status.weak {
  background: rgba(var(--warning-rgb), 0.14);
  color: var(--warning-deep);
}

.question-training-path {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.question-training-path li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.question-training-path li span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 12px;
}

.question-training-path li.done span {
  background: rgba(var(--success-rgb), 0.14);
  color: var(--success);
}

.question-training-pack-meta {
  justify-content: space-between;
}

.question-project-pack-detail {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: var(--panel-soft);
}

.question-project-pack-detail span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.question-project-pack-detail p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.question-project-pack-detail em {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.question-mistake-replay {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.question-mistake-card,
.question-mistake-empty {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.question-mistake-card-head span,
.question-mistake-card-head em {
  color: var(--hot);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.question-mistake-card h5 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.question-mistake-missing {
  display: grid;
  gap: 8px;
}

.question-mistake-missing span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.question-mistake-missing div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.question-mistake-missing em {
  display: inline-flex;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(var(--hot-rgb), 0.1);
  color: var(--hot);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.question-mistake-empty {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.question-mistake-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-weight: 900;
}

.question-bank-playbook {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.question-bank-playbook div {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.question-bank-playbook strong {
  color: var(--text);
}

.question-bank-playbook p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 12px;
}

.question-skill-lanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.question-skill-lane {
  display: grid;
  gap: 6px;
  min-height: 142px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.question-skill-lane:hover:not(:disabled) {
  border-color: rgba(var(--brand-rgb), 0.3);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.question-skill-lane:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}
.question-skill-lane span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.question-skill-lane strong {
  color: var(--brand);
  font-size: 26px;
  line-height: 1;
}
.question-skill-lane p,
.question-skill-lane small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.question-skill-lane p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--text);
  font-weight: 800;
}
.question-skill-lane.empty p {
  color: var(--muted);
}
.question-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  max-height: calc(100vh - 390px);
  overflow: auto;
  padding-right: 4px;
}
.question-card, .report-card { display: flex; justify-content: space-between; gap: 16px; }
.question-bank-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  border-left: 3px solid rgba(var(--accent-rgb), 0.34);
}
.question-bank-card.source-audio { border-left-color: rgba(var(--success-rgb), 0.62); }
.question-bank-card.source-resume { border-left-color: rgba(var(--hot-rgb), 0.72); }
.question-bank-card.source-official { border-left-color: rgba(var(--accent-rgb), 0.62); }
.question-card-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.question-card-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.question-card-topline span,
.question-source-badge,
.question-chip-row em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.question-source-badge {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.22);
}
.question-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.question-bank-detail {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(var(--accent-rgb), 0.04);
}
.question-bank-detail p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.question-bank-detail strong {
  color: var(--text);
}
.question-card-actions {
  display: grid;
  gap: 8px;
  min-width: 104px;
}
.report-card { flex-direction: column; }
.report-card.review-warn { border-color: rgba(var(--warning-rgb), 0.26); background: rgba(var(--warning-rgb), 0.05); }
.report-card.review-good { border-color: rgba(var(--success-rgb), 0.22); background: rgba(var(--success-rgb), 0.04); }
.report-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.report-overview-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.25fr 1fr 1.15fr;
  gap: 12px;
  margin: 12px 0 16px;
}
.report-summary-card {
  display: grid;
  gap: 10px;
  min-height: 168px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel-soft) 0%, rgba(var(--accent-rgb), 0.035) 100%);
}
.report-summary-card.span-all {
  grid-column: 1 / -1;
}
.report-summary-card h4,
.report-summary-card p {
  margin: 0;
}
.report-summary-card h4 {
  font-size: 22px;
  line-height: 1.15;
}
.report-summary-card > span,
.report-summary-card p {
  color: var(--muted);
  line-height: 1.6;
}
.report-score-card h4 {
  font-size: 48px;
  letter-spacing: 0;
  color: var(--accent);
}
.report-radar-list,
.report-next-list {
  display: grid;
  gap: 9px;
}
.report-radar-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.report-radar-item div {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(var(--muted-rgb), 0.16);
}
.report-radar-item i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, var(--danger) 100%);
}
.report-radar-item strong {
  font-size: 12px;
  text-align: right;
}
.report-trend-bars {
  display: flex;
  align-items: end;
  gap: 8px;
  min-height: 112px;
  padding-top: 12px;
}
.report-trend-bars span {
  position: relative;
  flex: 1;
  min-width: 12px;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(var(--accent-rgb), 0.24) 100%);
}
.report-trend-bars em {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}
.report-next-list p {
  padding-left: 10px;
  border-left: 3px solid rgba(var(--accent-rgb), 0.34);
}
.report-next-list strong {
  display: block;
  color: var(--text);
}
.report-qa-list { display: grid; gap: 10px; }
.report-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.report-stage-card {
  display: grid;
  gap: 7px;
  min-height: 128px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}
.report-stage-card span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(var(--brand-rgb), 0.08);
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}
.report-stage-card strong {
  color: var(--text);
}
.report-stage-card p,
.report-stage-card small {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.report-stage-card p {
  font-weight: 800;
}
.coach-report-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.055), rgba(255, 255, 255, 0.76));
}
.coach-report-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(112px, 0.22fr));
  gap: 12px;
  align-items: center;
}
.coach-report-head h4,
.coach-report-head p {
  margin: 0;
}
.coach-report-score {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
}
.coach-report-score strong {
  color: var(--accent);
  font-size: 24px;
}
.coach-report-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.hardware-rubric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.hardware-rubric-item {
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}
.hardware-rubric-item > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.hardware-rubric-item span,
.hardware-rubric-item p {
  color: var(--muted);
  font-size: 12px;
}
.hardware-rubric-item p {
  margin: 0;
  line-height: 1.5;
}
.hardware-rubric-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--muted-rgb), 0.16);
}
.hardware-rubric-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, var(--hot) 100%);
}
.coach-warning-card {
  padding: 12px;
  border: 1px solid rgba(var(--warning-rgb), 0.2);
  border-radius: 8px;
  background: rgba(var(--warning-rgb), 0.08);
}
.coach-warning-card p {
  margin: 6px 0 0;
}
.report-evidence-card p {
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}
.report-empty-coach {
  display: grid;
  gap: 12px;
  padding: 18px;
}
.report-empty-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.report-empty-flow span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-weight: 800;
}
.report-empty-flow i {
  width: 28px;
  height: 1px;
  background: var(--line);
}
.mistake-training-shell {
  display: grid;
  gap: 18px;
}
.mistake-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.85fr);
  gap: 18px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb), 0.08), rgba(var(--hot-rgb), 0.06)),
    #ffffff;
}
.mistake-hero h3,
.mistake-hero p {
  margin: 0;
}
.mistake-hero p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.7;
}
.mistake-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mistake-summary-grid div {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}
.mistake-summary-grid strong {
  color: var(--brand);
  font-size: 24px;
  line-height: 1.1;
}
.mistake-summary-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.mistake-workbench-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  align-items: start;
}
.mistake-list {
  display: grid;
  gap: 12px;
}
.mistake-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}
.mistake-card-head,
.mistake-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mistake-card-head span,
.mistake-card-foot span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.mistake-card-head strong {
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(var(--hot-rgb), 0.1);
  color: var(--hot);
}
.mistake-card h4,
.mistake-card p {
  margin: 0;
}
.mistake-card h4 {
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
}
.mistake-card p {
  color: var(--muted);
  line-height: 1.65;
}
.mistake-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.mistake-chip-row em {
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(var(--warning-rgb), 0.1);
  color: var(--warning-deep);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.mistake-retrain-frame {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid rgba(var(--brand-rgb), 0.14);
  border-radius: 8px;
  background: rgba(var(--brand-rgb), 0.055);
}
.mistake-retrain-frame strong {
  color: var(--text);
  font-size: 13px;
}
.mistake-retrain-frame span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}
.mistake-sprint-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.mistake-sprint-card {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}
.mistake-sprint-card span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.mistake-sprint-card strong {
  color: var(--text);
}
.mistake-sprint-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.mistake-radar-list {
  display: grid;
  gap: 12px;
}
.mistake-radar-item {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}
.mistake-radar-item > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.mistake-radar-item strong {
  color: var(--text);
}
.mistake-radar-item span,
.mistake-radar-item p {
  color: var(--muted);
  font-size: 12px;
}
.mistake-radar-item p {
  margin: 0;
  line-height: 1.65;
}
.mistake-radar-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--muted-rgb), 0.16);
}
.mistake-radar-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hot), var(--brand));
}
.mistake-plan-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(var(--brand-rgb), 0.18);
  border-radius: 8px;
  background: rgba(var(--brand-rgb), 0.06);
}
.mistake-plan-card strong {
  color: var(--text);
}
.mistake-plan-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
.mistake-plan-card span {
  display: block;
  color: var(--brand);
  font-weight: 900;
}
.mistake-rule-list {
  margin-top: 14px;
}
.paper-question-item { width: 100%; text-align: left; cursor: pointer; color: inherit; }
.paper-question-item.active { border-color: rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.08); }
.resume-card { display: grid; gap: 10px; }
.resume-card.current-resume {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.05);
}
.resume-result-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.resume-result-grid.compact {
  grid-template-columns: 1fr;
}
.resume-result-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.resume-result-card strong,
.resume-result-card p {
  margin: 0;
}
.resume-result-card p {
  color: var(--muted);
  line-height: 1.7;
}
.resume-result-card.span-full {
  grid-column: 1 / -1;
}
.resume-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.resume-section-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex: 0 0 auto;
}
.resume-section-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.resume-section-copy strong,
.resume-section-copy p {
  margin: 0;
}
.resume-section-copy p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.resume-inline-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.resume-fact-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.resume-upload-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.resume-insight-chip {
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.resume-insight-chip strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}
.resume-insight-chip span {
  color: var(--muted);
  font-size: 12px;
}
.resume-skill-depth-list,
.resume-question-preview {
  display: grid;
  gap: 10px;
}
.resume-skill-depth-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.resume-skill-depth-item strong,
.resume-skill-depth-item p,
.resume-question-preview-item p {
  margin: 0;
}
.resume-skill-depth-item p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.resume-depth-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.resume-depth-pill.高级 {
  background: rgba(var(--hot-rgb), 0.12);
  color: var(--hot);
}
.resume-depth-pill.初级 {
  background: rgba(var(--muted-rgb), 0.12);
  color: var(--muted);
}
.resume-question-preview-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.resume-question-preview-item span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 28px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.resume-question-preview-item p {
  color: var(--text);
  line-height: 1.55;
}
.resume-timeline-list {
  display: grid;
  gap: 10px;
}
.resume-timeline-item {
  display: grid;
  gap: 4px;
  padding-left: 12px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.2);
}
.resume-timeline-item strong {
  color: var(--text);
  font-size: 14px;
}
.resume-timeline-item p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.resume-empty-text {
  color: var(--muted);
  line-height: 1.6;
}
.resume-card.current-resume .ghost-btn {
  border-color: rgba(var(--accent-rgb), 0.28);
  color: var(--accent);
  background: rgba(255,255,255,0.95);
}
.active-resume-card {
  display: grid;
  gap: 10px;
  margin-bottom: 0;
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(255,255,255,0.94) 100%);
}
.active-resume-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.active-resume-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.active-resume-meta strong,
.active-resume-meta p {
  margin: 0;
}
.active-resume-meta p {
  color: var(--muted);
  line-height: 1.5;
  font-size: 14px;
}
.active-resume-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.active-resume-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.active-resume-stat {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  background: rgba(255,255,255,0.88);
}
.active-resume-stat strong,
.active-resume-stat p {
  margin: 0;
}
.active-resume-stat strong {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.active-resume-stat p {
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--text);
  font-weight: 800;
}
.active-resume-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: #fff;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.active-resume-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}
.interview-active-resume-card {
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
}
.interview-active-resume-card .active-resume-tags {
  gap: 6px;
}
.interview-active-resume-card .active-resume-chip {
  min-height: 24px;
  padding: 0 8px;
}
.interview-active-resume-card .active-resume-stats {
  gap: 6px;
}
.interview-active-resume-card .active-resume-stat {
  padding: 8px;
}
.interview-active-resume-card .active-resume-stat p {
  font-size: 16px;
}
.interview-active-resume-card .active-resume-note {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.form-grid label, .answer-block { display: grid; gap: 8px; }
.form-grid .full, .form-grid > .full { grid-column: 1 / -1; }
label > span,
.answer-block > span {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  padding: 11px 12px;
  background: #fff;
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
textarea { resize: vertical; line-height: 1.68; }

.file-drop-field {
  position: relative;
  min-height: 142px;
  padding: 16px;
  border: 1px dashed rgba(var(--accent-rgb), 0.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--hot-rgb), 0.04)),
    #ffffff;
  cursor: pointer;
  overflow: hidden;
}

.file-drop-field input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  border: 0;
}

.file-drop-field > span,
.file-drop-field > strong,
.file-drop-field > p,
.file-drop-field > em {
  position: relative;
  z-index: 1;
}

.file-drop-field > strong {
  color: var(--text);
  font-size: 18px;
}

.file-drop-field > p,
.file-drop-field > em {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.file-drop-field > em {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.resume-action-strip {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.resume-action-strip span {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.resume-action-strip i {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.2), var(--accent));
}

#resumeContent {
  min-height: 260px;
  line-height: 1.8;
  font-size: 14px;
  white-space: pre-wrap;
}
.primary-btn, .ghost-btn, .danger-btn {
  border: 1px solid var(--line);
  min-height: 42px;
  padding: 10px 14px;
  cursor: pointer;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.primary-btn:hover, .ghost-btn:hover, .danger-btn:hover, .launch-primary-btn:hover, .launch-secondary-btn:hover, .menu-item:hover {
  transform: translateY(-1px);
}
.primary-btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.16);
}
.ghost-btn {
  background: rgba(255, 255, 255, 0.96);
}
.danger-btn { color: var(--danger); }
.small-btn { padding: 8px 12px; }
.upload-btn { position: relative; overflow: hidden; }
.feedback-box.good {
  border-color: rgba(var(--success-rgb), 0.25);
  background: linear-gradient(180deg, rgba(var(--success-rgb), 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.feedback-box.warn {
  border-color: rgba(var(--warning-rgb), 0.24);
  background: linear-gradient(180deg, rgba(var(--warning-rgb), 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
  color: var(--warning-deep);
}
.interview-layout { grid-template-columns: 1.15fr 0.85fr; }
.question-box {
  font-size: 18px;
  line-height: 1.6;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.03) 0%, rgba(255, 255, 255, 0.96) 100%);
  border-color: rgba(var(--accent-rgb), 0.1);
}
.audio-preview { width: 100%; min-height: 44px; }
.voice-panel {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 16px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.045) 0%, rgba(255, 255, 255, 0.94) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 8px;
}
.inline-source-hint {
  margin-top: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05) 0%, rgba(255, 255, 255, 0.96) 100%);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.voice-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.voice-badge { padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid var(--line); background: #fff; color: var(--text); }
.voice-badge.listening { background: rgba(var(--success-rgb), 0.12); border-color: rgba(var(--success-rgb), 0.25); color: var(--success); }
.voice-badge.processing { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.2); color: var(--accent); }
.voice-badge.warn { background: rgba(var(--warning-rgb), 0.1); border-color: rgba(var(--warning-rgb), 0.24); color: var(--warning-deep); }
.voice-live-box { min-height: 88px; font-size: 18px; line-height: 1.7; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.voice-meta-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.audio-progress-shell {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(var(--accent-rgb), 0.05) 100%);
}
.audio-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.audio-progress-head strong,
.audio-progress-head span {
  margin: 0;
}
.audio-progress-head span {
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}
.audio-progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #ecf1f7;
  border: 1px solid rgba(var(--accent-rgb), 0.08);
}
.audio-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, #fb7185 100%);
  transition: width 0.24s ease;
}
.audio-progress-detail {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 13px;
}
.audio-stage-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.audio-stage-hint {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.audio-stage-hint.done {
  background: rgba(var(--success-rgb), 0.08);
  border-color: rgba(var(--success-rgb), 0.22);
  color: var(--success);
}
.audio-stage-hint.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.22);
  color: var(--accent);
}
.audio-stage-hint.warn {
  background: rgba(var(--warning-rgb), 0.1);
  border-color: rgba(var(--warning-rgb), 0.24);
  color: var(--warning-deep);
}
.interview-setup-card,
.interview-workspace-card {
  padding: 16px;
}
.interviewer-profile-card {
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--hot-rgb), 0.06));
}

.interviewer-profile-plain {
  grid-template-columns: minmax(0, 1fr);
}

.role-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(var(--brand-rgb), 0.22);
  border-radius: 8px;
  color: var(--brand);
  background: rgba(var(--brand-rgb), 0.08);
  font-size: 12px;
  font-weight: 900;
}

.role-chip-coach {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.24);
  background: rgba(var(--accent-rgb), 0.08);
}
.interviewer-avatar {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #0f172a;
  color: #ffffff;
  font-weight: 900;
}
.interviewer-profile-card strong {
  color: var(--text);
}
.interviewer-profile-card p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.interview-setup-card .section-head,
.interview-workspace-card .section-head {
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.interview-setup-card .feedback-box,
.interview-setup-card .inline-source-hint {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}
.interview-workspace-card .question-box {
  font-size: 16px;
  line-height: 1.55;
  padding: 12px 14px;
}
.interview-progress-board {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.interview-progress-board > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.interview-progress-board span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.interview-progress-board strong {
  color: var(--text);
  font-size: 20px;
}
.interview-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--muted-rgb), 0.15);
}
.interview-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--hot));
}
.interview-progress-board p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.interview-question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.interview-question-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.interview-workspace-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
}
.interview-workspace-grid .voice-panel {
  margin: 0;
  padding: 14px;
}
.interview-workspace-grid .voice-live-box {
  min-height: 70px;
  font-size: 16px;
  line-height: 1.6;
  padding: 12px;
}
.interview-workspace-grid .voice-meta-grid {
  gap: 10px;
}
.interview-workspace-grid .stack-item,
.interview-answer-stack .feedback-box {
  padding: 12px;
}
.interview-session-brief {
  align-content: start;
}
.interviewer-mode-card {
  min-height: 120px;
}
.interview-progress-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.interview-progress-stats div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.interview-progress-stats strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}
.interview-progress-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.interview-answer-stack {
  display: grid;
  gap: 12px;
  min-height: 100%;
}
.call-state-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}
.call-state-grid .span-full {
  grid-column: 1 / -1;
}
.call-state-grid .stack-item {
  min-height: 92px;
}
.call-state-grid p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.interview-answer-stack textarea {
  min-height: 190px;
  background: #05070b;
  color: #f8fafc;
  caret-color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#paperAnswer,
#candidateAnswer {
  background: #05070b;
  color: #f8fafc;
  caret-color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  -webkit-text-fill-color: #f8fafc;
  appearance: none;
}

#paperAnswer::placeholder,
#candidateAnswer::placeholder {
  color: #7f8aa0;
}
.interview-answer-stack .form-actions {
  justify-content: space-between;
}
.interview-answer-stack .feedback-box {
  min-height: 150px;
  max-height: 420px;
  margin: 0;
  overflow: auto;
}
.settings-panel-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.34fr) minmax(300px, 0.78fr);
  align-items: start;
}
.settings-main-card,
.settings-side-card {
  padding: 16px;
}
.settings-main-card {
  display: grid;
  gap: 14px;
}
.settings-form {
  gap: 14px;
}
.settings-config-grid {
  display: grid;
  gap: 0 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.settings-config-block {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.settings-config-block + .settings-config-block {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
.settings-block-head {
  display: grid;
  gap: 4px;
  padding-bottom: 2px;
}
.settings-block-head strong {
  color: var(--text);
}
.settings-field-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-field-grid > .full {
  grid-column: 1 / -1;
}
.settings-field-grid .feedback-box {
  padding: 12px;
  font-size: 13px;
  line-height: 1.55;
}
.settings-control-grid {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.settings-control-grid > .full {
  grid-column: 1 / -1;
}
.settings-actions {
  align-items: center;
}
.settings-side-stack {
  display: grid;
  gap: 18px;
  align-items: start;
  min-width: 0;
}
.settings-panel-grid > *,
.settings-side-card,
.settings-meta-grid,
.settings-meta-grid .stack-item {
  min-width: 0;
}
.settings-meta-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-side-card {
  overflow: hidden;
}
.settings-side-card p {
  overflow-wrap: anywhere;
}
.settings-meta-grid .stack-item {
  padding: 12px;
}
.settings-inline-actions {
  justify-content: flex-start;
}
.settings-diagnostic-box {
  max-height: 380px;
  overflow: auto;
}
.automation-test-log {
  max-height: 340px;
  overflow: auto;
  padding-right: 2px;
}
.automation-test-log .stack-item {
  padding: 10px 12px;
}
button:disabled,
.primary-btn:disabled,
.ghost-btn:disabled,
.danger-btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}
.embed-frame { width: 100%; min-height: 760px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.question-meta, .question-tags { margin: 0 0 6px; font-size: 13px; }
.question-card h4, .stack-item strong { margin: 0; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 30; }
.modal-backdrop.hidden { display: none; }
.modal-card {
  width: min(440px, 100%);
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.16);
  padding: 22px;
  display: grid;
  gap: 14px;
}
.modal-card h3, .modal-card p { margin: 0; }
.countdown-text { padding: 10px 12px; border-radius: 8px; background: var(--panel-soft); border: 1px solid var(--line); font-weight: 700; color: var(--text); text-align: center; }

body[data-active-panel="landing"] .score-history-trigger {
  cursor: pointer;
  transition: color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body[data-active-panel="landing"] .score-history-trigger:hover,
body[data-active-panel="landing"] .score-history-trigger:focus-visible {
  color: #7c4dff !important;
  outline: none;
  transform: translateY(-1px);
}

body[data-active-panel="landing"] .landing-weekly-growth-item.score-history-trigger:hover,
body[data-active-panel="landing"] .landing-weekly-growth-item.score-history-trigger:focus-visible,
body[data-active-panel="landing"] .landing-hardware-mastery.score-history-trigger:hover,
body[data-active-panel="landing"] .landing-hardware-mastery.score-history-trigger:focus-visible {
  border-color: rgba(124, 77, 255, 0.28);
  box-shadow: 0 12px 28px rgba(124, 77, 255, 0.12);
}

.score-history-backdrop {
  z-index: 70;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(12px);
}

.score-history-card {
  width: min(680px, calc(100vw - 32px));
  gap: 18px;
  padding: 26px;
  border-radius: 24px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  background:
    radial-gradient(circle at 82% 12%, rgba(124, 77, 255, 0.12), transparent 34%),
    #ffffff;
  box-shadow: 0 32px 70px rgba(15, 23, 42, 0.18);
}

.score-history-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 18px;
  align-items: center;
}

.score-history-title-row h3 {
  color: #0f172a;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 950;
}

.score-history-title-row p {
  margin-top: 8px;
  color: #64748b;
  font-size: 14px;
  font-weight: 760;
}

.score-history-current {
  display: grid;
  place-items: center;
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.08));
}

.score-history-current span {
  color: #64748b;
  font-size: 12px;
  font-weight: 920;
}

.score-history-current strong {
  color: #7c4dff;
  font-size: 38px;
  line-height: 1;
  font-weight: 950;
}

.score-history-chart {
  overflow: hidden;
  min-height: 250px;
  padding: 18px 14px 8px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.score-history-svg {
  width: 100%;
  min-height: 220px;
}

.score-history-svg line {
  stroke: rgba(148, 163, 184, 0.42);
  stroke-width: 2;
}

.score-history-svg polyline {
  fill: none;
  stroke: url("#scoreHistoryGradient");
  stroke-width: 0;
}

.score-history-svg polyline {
  stroke: #7c4dff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.score-history-svg circle {
  fill: #ffffff;
  stroke: #7c4dff;
  stroke-width: 4;
  filter: drop-shadow(0 6px 10px rgba(124, 77, 255, 0.22));
}

.score-history-svg g.is-current circle {
  fill: #7c4dff;
  stroke: #ffffff;
}

.score-history-svg text {
  text-anchor: middle;
  fill: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.score-history-svg .score-history-axis-label {
  fill: #94a3b8;
  font-size: 11px;
  font-weight: 850;
}

.score-history-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.score-history-metrics div {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 16px;
  background: #ffffff;
}

.score-history-metrics span,
.score-history-insight span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.score-history-metrics strong {
  color: #111827;
  font-size: 22px;
  font-weight: 950;
}

.score-history-insight {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(124, 77, 255, 0.08);
}

.score-history-insight p {
  color: #334155;
  font-size: 14px;
  font-weight: 820;
  line-height: 1.7;
}

@media (max-width: 720px) {
  .score-history-title-row,
  .score-history-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    overflow: visible;
    padding-bottom: 10px;
  }
  .metric-grid, .section-grid, .hero-grid, .interview-layout, .compact-grid, .interview-shell, .interview-main-dashboard, .interview-workspace-grid, .settings-panel-grid, .settings-config-grid, .settings-control-grid, .settings-meta-grid, .launch-summary-grid, .report-overview-grid, .dashboard-workbench-grid, .dashboard-command-head, .dashboard-welcome-card, .dashboard-analytics-grid, .dashboard-insight-grid, .mistake-hero, .mistake-workbench-grid, .question-bank-playbook { grid-template-columns: 1fr; }
  .dashboard-right-rail { position: static; }
  .troubleshoot-grid { grid-template-columns: 1fr; }
  .launch-actions { grid-template-columns: 1fr; }
  .launch-primary-btn { grid-column: auto; }
  .voice-meta-grid { grid-template-columns: 1fr; }
  .pipeline-grid { grid-template-columns: 1fr 1fr; }
  .active-resume-stats { grid-template-columns: 1fr; }
  .resume-result-grid { grid-template-columns: 1fr; }
  .question-bank-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-active-panel="question-bank"] .question-ai-recommend-grid,
  body[data-active-panel="question-bank"] .question-ai-decision-strip {
    grid-template-columns: 1fr;
  }
  .question-bank-card { grid-template-columns: 1fr; }
  .question-card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resume-upload-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resume-action-strip { grid-template-columns: 1fr; }
  .resume-action-strip i { display: none; }
  .mistake-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audio-workbench-metrics,
  .audio-dialogue-stats,
  .audio-report-score-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-config-block + .settings-config-block {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 14px;
  }
  .settings-diagnostic-box {
    max-height: none;
  }
  .landing-welcome-panel {
    grid-template-columns: 1fr;
  }
  .landing-ai-briefing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-weekly-growth-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-hardware-focus {
    grid-template-columns: 1fr;
  }
  .landing-special-training-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1440px) {
  .dashboard-welcome-card {
    grid-template-columns: 1fr;
  }
  .dashboard-action-strip {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .main { padding: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; }
  .topbar-actions { width: 100%; }
  .brand-logo { width: min(100%, 196px); height: auto; }
  .brand-title { font-size: 24px; }
  .brand-subtitle { max-width: none; }
  .launch-card h3 { font-size: 28px; }
  .launch-primary-btn { font-size: 20px; }
  .env-item { flex-direction: column; }
  .env-item span { text-align: left; }
  .pipeline-grid { grid-template-columns: 1fr; }
  .question-bank-overview { grid-template-columns: 1fr; }
  .question-card-actions { grid-template-columns: 1fr; }
  .resume-upload-insights { grid-template-columns: 1fr; }
  .audio-workbench-metrics,
  .audio-dialogue-stats,
  .audio-report-score-row { grid-template-columns: 1fr; }
  .landing-weekly-growth-list {
    grid-template-columns: 1fr;
  }
  .landing-ai-briefing-grid {
    grid-template-columns: 1fr;
  }
  .interview-answer-stack textarea { min-height: 160px; }
  .interview-answer-stack .form-actions { grid-template-columns: 1fr; }
  .interviewer-profile-card,
  .interview-progress-stats,
  .call-state-grid,
  .dashboard-shortcut-grid,
  .dashboard-kpi-grid,
  .dashboard-action-strip,
  .report-stage-grid,
  .question-skill-lanes,
  .audio-review-flow,
  .dashboard-donut-card,
  .dashboard-recent-row {
    grid-template-columns: 1fr;
  }
  .mobile-action-dock-grid { grid-template-columns: 1fr 1fr; }
}

.sidebar,
.ios-app .sidebar,
.compact-shell .sidebar {
  background: rgba(10, 12, 16, 0.94);
  color: var(--text);
}

.brand,
.status-card,
.sidebar-foot,
.topbar,
.hero-card,
.info-card,
.section-card,
.metric-card,
.launch-card,
.mobile-action-dock-panel,
.modal-card,
.review-collapse,
.resume-result-card,
.active-resume-card,
.active-resume-stat,
.diagnostic-item,
.audio-progress-shell {
  background: linear-gradient(180deg, rgba(18, 22, 28, 0.98) 0%, rgba(12, 15, 20, 0.96) 100%);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

.launch-card,
.active-resume-card,
.voice-panel,
.inline-source-hint,
.question-box {
  background: linear-gradient(180deg, rgba(27, 19, 23, 0.96) 0%, rgba(18, 14, 18, 0.98) 100%);
  border-color: rgba(var(--accent-rgb), 0.2);
}

.launch-summary-item,
.stack-item,
.question-card,
.report-card,
.feedback-box,
.question-box,
.empty-box,
.env-item,
.pipeline-step,
.format-chip,
.diagnostic-pill,
.audio-stage-hint,
.voice-badge,
.voice-live-box,
.embed-frame,
.countdown-text {
  background: var(--panel-soft);
  border-color: var(--line);
  color: var(--text);
}

.review-collapse summary,
.audio-question-group-head,
.stack-item.review-warn,
.report-card.review-warn,
.feedback-box.warn {
  color: var(--text);
}

.status-card strong,
.metric-card h3,
.launch-summary-item strong,
.env-item strong,
.pipeline-step strong,
.resume-result-card strong,
.resume-timeline-item strong,
.audio-question-group-head strong,
.topbar-pill,
.question-card h4,
.stack-item strong,
.report-card strong,
label > span,
.answer-block > span {
  color: var(--text);
}

.menu-item {
  color: var(--muted);
}

.menu-item.active,
.menu-item:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.22);
  color: #ffffff;
}

.topbar-pill,
.diagnostic-pill,
.format-chip,
.audio-stage-hint,
.voice-badge {
  background: rgba(255, 255, 255, 0.04);
}

.topbar-pill-primary,
.audio-stage-hint.active,
.voice-badge.processing {
  background: rgba(var(--accent-rgb), 0.18);
  color: #ffffff;
}

.pipeline-step.pending,
.pipeline-step.active,
.pipeline-step.done,
.pipeline-step.warn,
.feedback-box.good,
.feedback-box.warn,
.paper-question-item.active,
.resume-card.current-resume,
.resume-card.current-resume .ghost-btn,
.report-card.review-good,
.report-card.review-warn,
.active-resume-chip,
.active-resume-stat,
.audio-stage-hint.done,
.audio-stage-hint.warn,
.voice-badge.listening,
.voice-badge.warn {
  color: var(--text);
}

.pipeline-step.pending {
  background: var(--panel-soft);
}

.feedback-box.good,
.report-card.review-good {
  background: linear-gradient(180deg, rgba(var(--success-rgb), 0.14) 0%, rgba(18, 22, 28, 0.98) 100%);
}

.feedback-box.warn,
.report-card.review-warn,
.stack-item.review-warn {
  background: linear-gradient(180deg, rgba(var(--warning-rgb), 0.14) 0%, rgba(18, 22, 28, 0.98) 100%);
}

.paper-question-item.active,
.resume-card.current-resume,
.active-resume-card,
.active-resume-stat,
.active-resume-chip {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.14) 0%, rgba(18, 22, 28, 0.98) 100%);
}

input,
select,
textarea,
.primary-btn,
.ghost-btn,
.danger-btn,
.launch-secondary-btn {
  background: #12161d;
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}

input::placeholder,
textarea::placeholder {
  color: #7f8aa0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.ghost-btn {
  background: rgba(255, 255, 255, 0.04);
}

.danger-btn {
  background: rgba(var(--danger-rgb), 0.08);
}

.launch-secondary-btn small,
.audio-progress-detail,
.diagnostic-item p,
.resume-result-card p,
.resume-timeline-item p,
.active-resume-meta p,
.active-resume-note,
.stack-item p,
.report-card p,
.feedback-box p,
.question-card p {
  color: var(--muted);
}

.audio-progress-bar {
  background: #0c1015;
  border-color: rgba(255, 255, 255, 0.06);
}

.launch-secondary-btn span,
.topbar h2,
.section-head h3,
.launch-card h3,
.brand-subtitle {
  color: var(--text);
}

.brand-subtitle,
.status-card span,
.sidebar-foot p,
.eyebrow,
.stack-item p,
.question-tags,
.question-meta {
  color: var(--muted);
}

/* 硬问 UI 2.0 - hardware interview operations workspace */
:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --bg-strong: #eaf0f7;
  --panel: #ffffff;
  --panel-soft: #f8fbff;
  --panel-tint: #eef6ff;
  --text: #172033;
  --muted: #64748b;
  --line: #dbe5f0;
  --line-strong: #b9c8dc;
  --line-soft: rgba(15, 40, 72, 0.08);
  --accent: #1677ff;
  --accent-strong: #0b5ed7;
  --accent-rgb: 22, 119, 255;
  --brand: #1677ff;
  --brand-rgb: 22, 119, 255;
  --brand: #1677ff;
  --brand-rgb: 22, 119, 255;
  --hot: #ff8a00;
  --hot-rgb: 255, 138, 0;
  --success: #16a34a;
  --success-rgb: 22, 163, 74;
  --warning: #f59e0b;
  --warning-rgb: 245, 158, 11;
  --warning-deep: #a15c00;
  --danger: #e5484d;
  --danger-rgb: 229, 72, 77;
  --danger-deep: #b4232a;
  --brand-dark: #0b1f3a;
  --brand-dark-strong: #07172b;
  --brand-contrast: #ffffff;
  --shadow: 0 18px 42px rgba(11, 31, 58, 0.12);
  --shadow-soft: 0 10px 26px rgba(11, 31, 58, 0.08);
  --shadow-card: 0 8px 20px rgba(11, 31, 58, 0.07);
}

body {
  background:
    linear-gradient(90deg, rgba(22, 119, 255, 0.016) 1px, transparent 1px),
    linear-gradient(180deg, #f8fbff 0%, var(--bg) 44%, #edf3fb 100%);
  background-size: 28px 28px, auto;
  color: var(--text);
}

.shell {
  grid-template-columns: 220px minmax(0, 1fr);
}

.sidebar,
.ios-app .sidebar,
.compact-shell .sidebar {
  background:
    linear-gradient(180deg, #0b1f3a 0%, #08203f 58%, #06172b 100%);
  color: var(--brand-contrast);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.brand,
.ios-app .brand,
.compact-shell .brand {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.brand-logo {
  width: 46px;
  height: 46px;
  aspect-ratio: 1 / 1;
  margin: 0;
  object-fit: cover;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.brand-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-name-stack {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brand-name-stack strong {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.1;
}

.brand-name-stack span {
  color: rgba(226, 232, 240, 0.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.brand-chip-row {
  display: none;
}

.sidebar > .status-card {
  display: none;
}

.brand-chip {
  background: rgba(22, 119, 255, 0.14);
  border-color: rgba(87, 166, 255, 0.28);
  color: #dbeafe;
}

.status-card,
.sidebar-foot {
  padding: 12px;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: none;
}

.status-card h2,
.status-card strong {
  color: #ffffff;
}

.status-card h2 {
  margin-bottom: 8px;
  font-size: 13px;
}

.status-card ul {
  gap: 7px;
}

.status-card li {
  font-size: 12px;
}

.status-card span {
  color: rgba(255, 255, 255, 0.68);
}

.menu {
  gap: 4px;
}

.menu-item {
  position: relative;
  color: rgba(255, 255, 255, 0.76);
  border-color: transparent;
  background: transparent;
  min-height: 40px;
  padding: 9px 12px 9px 22px;
  font-size: 13px;
}

.menu-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 8px;
  background: transparent;
  transform: translateY(-50%);
}

.menu-item.active,
.menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.menu-item.active::before {
  background: var(--hot);
}

.main {
  padding: 22px 28px 32px;
}

.topbar,
.hero-card,
.info-card,
.section-card,
.metric-card,
.modal-card,
.mobile-action-dock-panel,
.review-collapse,
.resume-result-card,
.active-resume-card,
.active-resume-stat,
.diagnostic-item,
.audio-progress-shell {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

.topbar {
  min-height: 70px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.94) 100%);
}

body:not([data-active-panel="landing"]) .topbar {
  min-height: 62px;
  padding-top: 12px;
  padding-bottom: 12px;
}

body:not([data-active-panel="landing"]) .topbar h2 {
  font-size: 24px;
}

body:not([data-active-panel="landing"]) .topbar .eyebrow {
  font-size: 11px;
}

.topbar .eyebrow {
  max-width: 620px;
  color: #72819a;
  letter-spacing: 0;
  text-transform: none;
}

.topbar h2,
.section-head h3,
.metric-card h3,
.stack-item strong,
.question-card h4,
.report-card strong,
label > span,
.answer-block > span {
  color: var(--text);
}

.topbar-pill,
.diagnostic-pill,
.format-chip,
.audio-stage-hint,
.voice-badge {
  background: #f8fbff;
  border-color: var(--line);
  color: var(--muted);
}

.topbar-pill-primary,
.audio-stage-hint.active,
.voice-badge.processing {
  background: rgba(22, 119, 255, 0.1);
  border-color: rgba(22, 119, 255, 0.18);
  color: var(--accent);
}

.launch-card {
  background:
    linear-gradient(135deg, rgba(11, 31, 58, 0.98) 0%, rgba(17, 63, 120, 0.96) 62%, rgba(22, 119, 255, 0.92) 100%);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 22px 48px rgba(11, 31, 58, 0.2);
}

.launch-card::after {
  display: none;
}

.launch-card h3,
.launch-card p,
.launch-card .eyebrow {
  color: #ffffff;
}

.launch-card > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.78);
}

.launch-summary-item {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}

.launch-summary-item strong {
  color: #ffffff;
}

.launch-summary-item span {
  color: rgba(255, 255, 255, 0.72);
}

.launch-primary-btn {
  background: linear-gradient(135deg, var(--hot) 0%, #ff5c2a 100%);
  box-shadow: 0 16px 32px rgba(var(--hot-rgb), 0.28);
}

.launch-secondary-btn {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.24);
}

.launch-secondary-btn span {
  color: var(--text);
}

.launch-secondary-btn small {
  color: var(--muted);
}

.launch-hint {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.86);
}

.metric-card,
.section-card {
  position: relative;
}

.metric-card::before {
  background: linear-gradient(90deg, var(--accent) 0%, var(--hot) 100%);
}

.section-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, rgba(22, 119, 255, 0.78), rgba(255, 138, 0, 0.5));
  opacity: 0.42;
}

.stack-item,
.question-card,
.report-card,
.feedback-box,
.question-box,
.empty-box,
.env-item,
.pipeline-step,
.voice-live-box,
.countdown-text {
  background: var(--panel-soft);
  border-color: var(--line);
  color: var(--text);
}

.feedback-box {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

body:not([data-active-panel="landing"]) .stack-item p,
body:not([data-active-panel="landing"]) .feedback-box,
body:not([data-active-panel="landing"]) .resume-result-card p,
body:not([data-active-panel="landing"]) .audio-report-digest p,
body:not([data-active-panel="landing"]) .audio-dialogue-summary p {
  line-height: 1.55;
}

body:not([data-active-panel="landing"]) .stack-item p,
body:not([data-active-panel="landing"]) .resume-result-card p,
body:not([data-active-panel="landing"]) .audio-report-digest p,
body:not([data-active-panel="landing"]) .audio-dialogue-summary p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feedback-box.good,
.report-card.review-good {
  background: linear-gradient(180deg, rgba(var(--success-rgb), 0.1) 0%, #ffffff 100%);
  border-color: rgba(var(--success-rgb), 0.24);
}

.feedback-box.warn,
.report-card.review-warn,
.stack-item.review-warn {
  background: linear-gradient(180deg, rgba(var(--warning-rgb), 0.12) 0%, #ffffff 100%);
  border-color: rgba(var(--warning-rgb), 0.28);
  color: var(--text);
}

.stack-item.review-good,
.resume-card.current-resume,
.paper-question-item.active,
.active-resume-card,
.active-resume-stat,
.active-resume-chip {
  background: linear-gradient(180deg, rgba(22, 119, 255, 0.08) 0%, #ffffff 100%);
  border-color: rgba(22, 119, 255, 0.18);
}

.primary-btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  box-shadow: 0 12px 24px rgba(22, 119, 255, 0.18);
}

.ghost-btn,
.danger-btn,
input,
select,
textarea,
.launch-secondary-btn {
  background: #ffffff;
  color: var(--text);
  border-color: var(--line);
}

.danger-btn {
  color: var(--danger-deep);
  background: rgba(var(--danger-rgb), 0.06);
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(22, 119, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.13);
}

#paperAnswer,
#candidateAnswer,
#audioTranscript,
.interview-answer-stack textarea {
  background: #ffffff;
  color: var(--text);
  caret-color: var(--accent);
  border-color: var(--line);
  box-shadow: inset 0 1px 2px rgba(11, 31, 58, 0.03);
  -webkit-text-fill-color: var(--text);
}

#paperAnswer::placeholder,
#candidateAnswer::placeholder,
#audioTranscript::placeholder {
  color: #94a3b8;
}

.question-box,
.inline-source-hint,
.voice-panel,
.active-resume-card {
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  border-color: rgba(22, 119, 255, 0.16);
}

.audio-review-grid {
  grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.05fr) minmax(300px, 1.05fr);
  align-items: start;
}

.resume-page-grid {
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}

.resume-upload-card #resumeContent {
  min-height: 220px;
}

.audio-progress-fill {
  background: linear-gradient(90deg, var(--accent) 0%, var(--hot) 100%);
}

.audio-progress-bar {
  background: #e7eef8;
  border-color: rgba(22, 119, 255, 0.12);
}

.audio-stage-hint.done,
.voice-badge.listening {
  background: rgba(var(--success-rgb), 0.1);
  border-color: rgba(var(--success-rgb), 0.22);
  color: var(--success);
}

.audio-stage-hint.warn,
.voice-badge.warn {
  background: rgba(var(--warning-rgb), 0.12);
  border-color: rgba(var(--warning-rgb), 0.24);
  color: var(--warning-deep);
}

.question-card,
.report-card {
  background: #ffffff;
}

.question-card:hover,
.report-card:hover,
.stack-item:hover {
  border-color: rgba(22, 119, 255, 0.24);
}

.settings-config-block + .settings-config-block {
  border-left-color: var(--line);
}

.modal-backdrop {
  background: rgba(11, 31, 58, 0.44);
}

@media (max-width: 1180px) {
  .audio-review-grid,
  .resume-page-grid,
  .hardware-rubric-grid,
  .coach-report-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .main {
    padding: 16px;
  }

  .shell {
    grid-template-columns: 1fr;
  }

  .launch-card h3 {
    font-size: 28px;
  }
}

.topbar-actions {
  justify-content: flex-end;
}

/* 桌面端统一为固定高度AI 工作空间，避免页面因内容多少变成长短不一 */
@media (min-width: 1181px) {
  html,
  body {
    height: 100%;
  }

  body {
    overflow: hidden;
  }

  .shell {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .sidebar {
    height: 100vh;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main {
    height: 100vh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: start;
    gap: 16px;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 12;
  }

  .panel.active {
    min-height: calc(100vh - 130px);
    align-content: start;
    gap: 16px;
  }

  .dashboard-workbench-grid,
  .interview-shell,
  .audio-review-grid,
  .settings-panel-grid,
  .resume-page-grid {
    min-height: calc(100vh - 148px);
    align-items: start;
  }

  .interview-layout,
  .report-overview-grid,
  .mistake-workbench-grid,
  .question-bank-overview,
  .debug-layout,
  .waveform-grid {
    align-items: start;
  }

  .dashboard-right-rail {
    top: 88px;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
    padding-right: 2px;
    overscroll-behavior: contain;
  }

  body[data-active-panel="dashboard"] .dashboard-main-column,
  body[data-active-panel="dashboard"] .dashboard-right-rail {
    gap: 14px;
  }

  body[data-active-panel="dashboard"] .dashboard-kpi-grid {
    gap: 14px;
  }

  body[data-active-panel="dashboard"] .dashboard-stat-card {
    min-height: 108px;
  }

  body[data-active-panel="dashboard"] .dashboard-command-card {
    min-height: 138px;
    padding: 18px;
  }

  body[data-active-panel="dashboard"] .dashboard-analytics-grid {
    gap: 14px;
  }

  body[data-active-panel="dashboard"] .dashboard-analytics-grid > .section-card {
    min-height: 318px;
    max-height: 318px;
    overflow: hidden;
  }

  body[data-active-panel="dashboard"] .dashboard-insight-grid {
    gap: 14px;
  }

  body[data-active-panel="dashboard"] .dashboard-insight-grid > .section-card {
    min-height: 232px;
    max-height: 232px;
    overflow: hidden;
  }

  body[data-active-panel="dashboard"] .dashboard-right-rail > .section-card {
    min-height: 196px;
    max-height: 196px;
    overflow: hidden;
  }

  body[data-active-panel="dashboard"] .dashboard-right-rail > .section-card:last-child {
    min-height: 236px;
    max-height: 236px;
  }

  body[data-active-panel="dashboard"] .dashboard-right-rail .stack-list,
  body[data-active-panel="dashboard"] .dashboard-right-rail .dashboard-loop-list {
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
  }

  body[data-active-panel="resume"] .resume-page-grid,
  body[data-active-panel="audio"] .audio-review-grid,
  body[data-active-panel="interview"] .interview-main-dashboard {
    max-height: calc(100vh - 148px);
    overflow: hidden;
  }

  body[data-active-panel="resume"] .resume-page-grid > .section-card,
  body[data-active-panel="audio"] .audio-review-grid > .section-card,
  body[data-active-panel="interview"] .interview-main-dashboard > .section-card {
    max-height: calc(100vh - 148px);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body[data-active-panel="resume"] #resumeContent {
    min-height: 300px;
    max-height: 360px;
    overflow-y: auto;
  }

  body[data-active-panel="resume"] .resume-result-grid {
    grid-auto-rows: minmax(188px, auto);
  }

  body[data-active-panel="resume"] .resume-result-card {
    min-height: 188px;
  }

  body[data-active-panel="resume"] .resume-result-card.span-full {
    min-height: 154px;
  }

  body[data-active-panel="resume"] .resume-upload-insights {
    grid-auto-rows: 88px;
  }

  body[data-active-panel="resume"] .resume-insight-chip,
  body[data-active-panel="audio"] .audio-workbench-metric,
  body[data-active-panel="audio"] .audio-dialogue-stat,
  body[data-active-panel="audio"] .audio-report-score {
    align-content: center;
  }

  body[data-active-panel="audio"] #audioTranscript {
    max-height: 238px;
    overflow-y: auto;
  }

  body[data-active-panel="audio"] .audio-workbench-metrics {
    grid-auto-rows: 90px;
  }

  body[data-active-panel="audio"] .audio-dialogue-summary,
  body[data-active-panel="audio"] .audio-report-digest {
    min-height: 164px;
  }

  body[data-active-panel="audio"] .audio-interviewer-preview,
  body[data-active-panel="audio"] .audio-report-suggestions {
    max-height: 190px;
    overflow-y: auto;
    padding-right: 2px;
  }

  body[data-active-panel="interview"] .interview-main-dashboard {
    grid-template-columns: minmax(250px, 0.64fr) minmax(520px, 1.32fr) minmax(260px, 0.72fr);
    gap: 16px;
  }

  body[data-active-panel="interview"] .interview-setup-card,
  body[data-active-panel="interview"] .interview-workspace-card,
  body[data-active-panel="interview"] .interview-copilot-card {
    padding: 18px;
  }

  body[data-active-panel="interview"] .interviewer-profile-card {
    min-height: 112px;
    margin-bottom: 12px;
  }

  body[data-active-panel="interview"] #interviewQuestionSourceStatus,
  body[data-active-panel="interview"] #interviewOpeningIntent,
  body[data-active-panel="interview"] #analyzeWithAiBtn {
    display: none;
  }

  body[data-active-panel="interview"] #interviewForm {
    gap: 10px;
  }

  body[data-active-panel="interview"] #interviewForm label,
  body[data-active-panel="interview"] #interviewResumeSource {
    display: none;
  }

  body[data-active-panel="interview"] #interviewForm .form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-active-panel="interview"] #interviewResumeSource {
    max-height: 78px;
    overflow: hidden;
  }

  body[data-active-panel="interview"] .interview-progress-board {
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }

  body[data-active-panel="interview"] .interview-progress-board > div:first-child {
    display: grid;
    gap: 2px;
  }

  body[data-active-panel="interview"] .interview-progress-board p {
    display: none;
  }

  body[data-active-panel="interview"] .interview-workspace-card .question-box {
    min-height: 104px;
    font-size: 17px;
    line-height: 1.62;
    padding: 16px;
  }

  body[data-active-panel="interview"] .interview-workspace-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-active-panel="interview"] .interview-session-brief,
  body[data-active-panel="interview"] .call-state-grid {
    display: none;
  }

  body[data-active-panel="interview"] .interview-answer-stack > .stack-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.86fr);
    gap: 12px;
  }

  body[data-active-panel="interview"] .interview-answer-stack > .stack-list .stack-item {
    min-height: 92px;
  }

  body[data-active-panel="interview"] #voiceQualityText {
    display: none;
  }

  body[data-active-panel="interview"] .audio-preview {
    margin-top: 8px;
  }

  body[data-active-panel="interview"] #candidateAnswer {
    min-height: 150px;
    max-height: 180px;
    font-size: 16px;
    line-height: 1.65;
  }

  body[data-active-panel="interview"] .qa-inline-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-active-panel="interview"] .interview-answer-stack .feedback-box {
    min-height: 72px;
    max-height: 110px;
  }

  body[data-active-panel="interview"] .copilot-score-card,
  body[data-active-panel="interview"] .copilot-group,
  body[data-active-panel="interview"] .copilot-followup {
    padding: 14px;
  }

  body[data-active-panel="interview"] .copilot-panel > .copilot-group:nth-of-type(4),
  body[data-active-panel="interview"] .copilot-panel > .copilot-followup:last-child {
    display: none;
  }

  body[data-active-panel="interview"] .copilot-list {
    max-height: 116px;
    overflow-y: auto;
  }

  .main::-webkit-scrollbar,
  .sidebar::-webkit-scrollbar,
  .dashboard-right-rail::-webkit-scrollbar {
    width: 8px;
  }

  .main::-webkit-scrollbar-thumb,
  .sidebar::-webkit-scrollbar-thumb,
  .dashboard-right-rail::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.22);
    border-radius: 8px;
  }

  body[data-active-panel="question-bank"] .panel.active > .section-card {
    display: grid;
    grid-template-rows: auto auto auto auto auto auto auto minmax(0, 1fr);
    max-height: calc(100vh - 148px);
    overflow: hidden;
    padding: 18px;
  }

  body[data-active-panel="question-bank"] .toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) repeat(4, minmax(122px, 150px)) auto;
    gap: 10px;
    align-items: center;
  }

  body[data-active-panel="question-bank"] .toolbar > * {
    width: 100%;
    min-width: 0;
  }

  body[data-active-panel="question-bank"] .toolbar button {
    white-space: nowrap;
  }

  body[data-active-panel="question-bank"] .question-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }

  body[data-active-panel="question-bank"] .question-bank-overview {
    gap: 12px;
  }

  body[data-active-panel="question-bank"] .question-bank-stat {
    min-height: 108px;
  }

  body[data-active-panel="question-bank"] #questionBankHint {
    padding: 10px 12px;
    font-size: 13px;
  }

  body[data-active-panel="question-bank"] .question-ai-decision-strip div {
    min-height: 78px;
  }

  body[data-active-panel="reports"] .panel.active > .section-card {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    max-height: calc(100vh - 148px);
    overflow: hidden;
    padding: 18px;
  }

  body[data-active-panel="reports"] .report-list {
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
  }

  body[data-active-panel="reports"] .report-summary-card {
    height: 176px;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
  }

  body[data-active-panel="reports"] .report-score-card h4 {
    font-size: 40px;
  }

  body[data-active-panel="reports"] .report-trend-bars {
    min-height: 74px;
  }

  body[data-active-panel="reports"] .report-next-list {
    max-height: 118px;
    overflow-y: auto;
    padding-right: 3px;
  }

  body[data-active-panel="reports"] .report-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 10px 0 14px;
    align-items: stretch;
  }

  body[data-active-panel="reports"] .toolbar {
    gap: 10px;
  }

  body[data-active-panel="reports"] .report-card {
    padding: 14px;
  }

  body[data-active-panel="settings"] .settings-main-card,
  body[data-active-panel="settings"] .settings-side-stack {
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    padding-right: 4px;
  }
}

.topbar-search {
  position: relative;
  min-width: 240px;
}

.topbar-search span {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.topbar-search input {
  min-height: 34px;
  padding-left: 44px;
  border-radius: 8px;
  background: #f8fafc;
}

.topbar-create-btn {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 10px 20px rgba(22, 119, 255, 0.16);
}

.landing-hero-card {
  display: grid;
  gap: 24px;
  padding: 24px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.landing-nav strong {
  color: #0f172a;
  font-size: 18px;
}

.landing-nav div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.landing-nav button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
}

.landing-nav button:hover {
  background: #f1f5f9;
  color: var(--text);
}

.landing-hero-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
}

.landing-copy {
  display: grid;
  gap: 16px;
}

.landing-copy h1 {
  margin: 0;
  color: #0f172a;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: 0;
}

.landing-copy > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}

.landing-start-flow {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-start-flow div {
  display: grid;
  gap: 6px;
  min-height: 128px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.landing-start-flow span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.landing-start-flow strong {
  color: var(--text);
  font-size: 15px;
}

.landing-start-flow p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.landing-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.landing-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.landing-proof-row span {
  padding: 7px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-preview {
  display: grid;
  gap: 16px;
  min-height: 360px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(22, 119, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #0f172a 0%, #102341 100%);
  background-size: 28px 28px, auto;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
}

.preview-topline {
  display: flex;
  gap: 8px;
}

.preview-topline span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}

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

.preview-card {
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.preview-card.wide {
  grid-column: 1 / -1;
}

.preview-card strong,
.preview-card p {
  margin: 0;
}

.preview-card p {
  color: rgba(255, 255, 255, 0.72);
}

.feature-card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-card {
  display: grid;
  gap: 10px;
  min-height: 170px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-card);
}

.feature-card strong {
  color: var(--text);
  font-size: 18px;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.landing-workspace {
  --home-card-min: 248px;
}

body[data-active-panel="landing"] #globalNotice {
  display: none;
}

.landing-home-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "welcome";
  align-items: stretch;
}

.landing-welcome-panel {
  grid-area: welcome;
  min-height: min(560px, calc(100vh - 190px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.44fr);
  align-items: stretch;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(34, 197, 94, 0.16), transparent 32%),
    radial-gradient(circle at 4% 92%, rgba(59, 130, 246, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(245, 249, 255, 0.92));
}

.landing-today-panel {
  grid-area: today;
  min-height: var(--home-card-min);
}

.landing-special-panel {
  grid-area: special;
  min-height: 236px;
}

.landing-growth-panel {
  grid-area: growth;
  min-height: 236px;
}

.landing-welcome-copy {
  display: grid;
  align-content: center;
  gap: 16px;
  max-width: 620px;
}

.landing-welcome-copy h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.1;
  letter-spacing: 0;
}

.landing-welcome-copy p:not(.eyebrow) {
  max-width: 56ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.landing-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.landing-greeting-line {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.landing-coach-suggestion {
  display: grid;
  gap: 8px;
  max-width: 640px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--brand-rgb), 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb), 0.08), rgba(255, 255, 255, 0.74)),
    radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.12), transparent 36%);
}

.landing-coach-suggestion span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(var(--brand-rgb), 0.1);
  font-size: 12px;
  font-weight: 950;
}

.landing-coach-suggestion p {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
}

.landing-ai-briefing {
  display: grid;
  gap: 12px;
  max-width: 680px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.72));
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.landing-ai-briefing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-ai-briefing-head span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.12);
  font-size: 12px;
  font-weight: 950;
}

.landing-ai-briefing-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.landing-ai-briefing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.landing-ai-briefing-grid div {
  display: grid;
  gap: 6px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.landing-ai-briefing-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.landing-ai-briefing-grid strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
}

.landing-ai-briefing p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.landing-recommendation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.landing-recommendation-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(var(--brand-rgb), 0.12);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 850;
}

.landing-training-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 999px;
  color: #4f46e5;
  background: rgba(238, 242, 255, 0.86);
  font-size: 13px;
  font-weight: 950;
}

.landing-primary-action {
  width: min(360px, 100%);
  min-height: 64px;
  margin-top: 8px;
  justify-content: center;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 950;
}

.landing-right-column {
  align-self: center;
  display: grid;
  gap: 14px;
}

.landing-recommendation-preview {
  position: relative;
  place-items: center;
  overflow: hidden;
  display: grid;
  min-height: 300px;
  padding: 28px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(255, 255, 255, 0.7)),
    radial-gradient(circle at 50% 100%, rgba(14, 165, 233, 0.18), transparent 52%);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
  isolation: isolate;
}

.landing-recommendation-preview::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(rgba(99, 102, 241, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  transform: perspective(760px) rotateX(60deg) rotateZ(-12deg) translateY(28px);
  transform-origin: center;
}

.landing-hero-orbit {
  position: absolute;
  inset: 30px;
  border-radius: 999px;
  transform: perspective(760px) rotateX(62deg) rotateZ(-18deg);
}

.landing-hero-orbit i {
  position: absolute;
  display: block;
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: inherit;
  background: transparent;
}

.landing-hero-orbit i:nth-child(1) {
  inset: 12px 34px;
}

.landing-hero-orbit i:nth-child(2) {
  inset: 38px 62px;
}

.landing-hero-orbit i:nth-child(3) {
  inset: 66px 92px;
}

.landing-hero-stack {
  position: relative;
  z-index: 1;
  width: min(210px, 76%);
  height: 156px;
  transform: perspective(760px) rotateX(58deg) rotateZ(-32deg);
  transform-style: preserve-3d;
}

.landing-hero-stack span,
.landing-hero-stack b {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 152px;
  height: 152px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 24px;
  transform: translate(-50%, -50%) translateZ(var(--hero-z, 0));
  box-shadow:
    0 24px 55px rgba(79, 70, 229, 0.20),
    0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.landing-hero-stack span:nth-child(1) {
  --hero-z: 0px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.46), rgba(124, 58, 237, 0.58));
}

.landing-hero-stack span:nth-child(2) {
  --hero-z: 34px;
  width: 122px;
  height: 122px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.82), rgba(99, 102, 241, 0.78));
}

.landing-hero-stack span:nth-child(3) {
  --hero-z: 66px;
  width: 86px;
  height: 86px;
  background: linear-gradient(135deg, rgba(221, 214, 254, 0.95), rgba(59, 130, 246, 0.76));
}

.landing-hero-stack b {
  --hero-z: 94px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff, #a5b4fc);
}

.landing-hero-panel {
  position: absolute;
  right: 20px;
  bottom: 22px;
  z-index: 2;
  display: grid;
  gap: 4px;
  min-width: 128px;
  padding: 12px;
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(12px);
}

.landing-hero-panel span {
  width: fit-content;
  padding: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.landing-hero-panel strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1.2;
}

.landing-hero-panel p {
  margin: 0;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.landing-training-heatmap {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.78);
}

.landing-heatmap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.landing-heatmap-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.landing-heatmap-head strong {
  color: #6d28d9;
  font-size: 14px;
}

.landing-heatmap-streak {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 8px;
  background: rgba(245, 243, 255, 0.72);
}

.landing-heatmap-streak span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.landing-heatmap-streak strong {
  color: #4c1d95;
  font-size: 30px;
  font-weight: 950;
  line-height: 0.95;
}

.landing-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.landing-heatmap-grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.14);
}

.landing-heatmap-grid i[data-level="1"] {
  background: rgba(196, 181, 253, 0.72);
}

.landing-heatmap-grid i[data-level="2"] {
  background: #8b5cf6;
}

.landing-heatmap-grid i[data-level="3"] {
  background: #6d28d9;
  box-shadow: 0 6px 14px rgba(109, 40, 217, 0.18);
}

.landing-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.landing-heatmap-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.landing-heatmap-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.14);
}

.landing-heatmap-legend i[data-level="1"] {
  background: rgba(196, 181, 253, 0.72);
}

.landing-heatmap-legend i[data-level="2"] {
  background: #8b5cf6;
}

.landing-heatmap-legend i[data-level="3"] {
  background: #6d28d9;
}

.landing-weekly-growth {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  align-self: end;
  margin-top: 8px;
  padding: 18px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 96% 0%, rgba(124, 58, 237, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.72);
}

.landing-weekly-growth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-weekly-growth-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.landing-weekly-growth-head strong {
  color: #6d28d9;
  font-size: 14px;
}

.landing-weekly-growth-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.landing-weekly-growth-item {
  display: grid;
  gap: 7px;
  min-height: 96px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.landing-weekly-growth-item span {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.landing-weekly-growth-item p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.landing-weekly-growth-item strong {
  color: #16a34a;
  font-size: 20px;
  line-height: 1;
}

.landing-growth-score {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-top: 2px;
}

.landing-growth-score span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.landing-growth-score strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.landing-growth-score-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}

.landing-growth-score-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #8b5cf6, #a855f7);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.24);
}

.landing-xiaowen-briefing {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 14px;
  min-height: 219px;
  padding: 18px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 18%, rgba(124, 58, 237, 0.12), transparent 38%),
    radial-gradient(circle at 10% 100%, rgba(14, 165, 233, 0.10), transparent 34%),
    rgba(255, 255, 255, 0.78);
}

.landing-xiaowen-briefing-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 12px;
}

.landing-xiaowen-briefing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.landing-xiaowen-briefing-head span {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.landing-xiaowen-briefing-head strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.landing-xiaowen-briefing-copy p {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.65;
}

.landing-xiaowen-briefing-advice strong {
  color: #4f46e5;
  font-size: 17px;
  line-height: 1.45;
}

.landing-xiaowen-briefing-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.landing-xiaowen-briefing-stats div {
  display: grid;
  gap: 5px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
}

.landing-xiaowen-briefing-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.landing-xiaowen-briefing-stats strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.landing-xiaowen-briefing-avatar {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: end;
  width: 132px;
  height: 168px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(238, 242, 255, 0.72)),
    radial-gradient(circle at 50% 18%, rgba(124, 58, 237, 0.16), transparent 54%);
}

.landing-xiaowen-briefing-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.landing-hardware-focus {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1.14fr);
  gap: 12px;
}

.landing-hardware-directions,
.landing-hardware-questions {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.1), transparent 36%),
    rgba(255, 255, 255, 0.76);
}

.landing-hardware-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-hardware-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.landing-hardware-head strong {
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0;
}

.landing-hardware-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.landing-hardware-chip-list button {
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.74)),
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.10), transparent 42%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.landing-hardware-chip-list button:hover,
.landing-hardware-chip-list button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--brand-rgb), 0.22);
  box-shadow: 0 18px 38px rgba(79, 70, 229, 0.12);
}

.landing-hardware-chip-list button:focus-visible {
  outline: 2px solid rgba(var(--brand-rgb), 0.28);
  outline-offset: 2px;
}

.landing-hardware-card {
  display: grid;
  align-content: start;
  gap: 8px;
}

.landing-hardware-card strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.25;
}

.landing-hardware-card strong span {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

.landing-hardware-card em {
  color: #4f46e5;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.25;
}

.landing-hardware-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.landing-question-list {
  display: grid;
  gap: 10px;
}

.landing-question-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 113, 67, 0.18);
  border-radius: 8px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255, 247, 237, 0.9), rgba(255, 255, 255, 0.94)),
    #ffffff;
  text-align: left;
  cursor: pointer;
}

.landing-hot-question span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 237, 213, 0.9);
  font-size: 16px;
}

.landing-hot-question strong {
  min-width: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.35;
}

.landing-hot-question em {
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  color: #ea580c;
  background: rgba(255, 237, 213, 0.72);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.landing-hardware-chip-list button:hover,
.landing-question-list button:hover {
  border-color: rgba(var(--brand-rgb), 0.3);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
}

.landing-special-training {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.landing-special-training-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-special-training-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.landing-special-training-head strong {
  color: var(--text);
  font-size: 14px;
}

.landing-special-training-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.landing-special-training-item {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  min-height: 150px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86)),
    #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.landing-special-training-item:hover {
  border-color: rgba(var(--brand-rgb), 0.28);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.landing-special-training-item strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.3;
}

.landing-special-training-item span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.landing-special-training-item p {
  align-self: end;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.landing-special-training-item p b {
  color: #111827;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.landing-hot-question-action {
  justify-self: end;
  padding: 5px 9px;
  border-radius: 999px;
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.11);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.landing-special-training-item em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 10px 18px rgba(79, 70, 229, 0.18);
}

.landing-coach-card {
  position: relative;
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 210px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(255, 255, 255, 0.64)),
    radial-gradient(circle at 50% 100%, rgba(59, 130, 246, 0.18), transparent 46%);
  overflow: hidden;
}

.landing-ai-map {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.68)),
    radial-gradient(circle at 94% 12%, rgba(37, 99, 235, 0.1), transparent 42%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.landing-ai-map::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 70% 24%, black, transparent 72%);
  opacity: 0.8;
}

.landing-ai-task-head,
.landing-ai-timeline,
.landing-ai-status-bar {
  position: relative;
  z-index: 1;
}

.landing-ai-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-ai-task-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-ai-task-head strong {
  color: var(--accent);
  font-size: 13px;
}

.landing-ai-timeline {
  display: grid;
  gap: 0;
}

.landing-ai-step {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.landing-ai-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 42px;
  bottom: -12px;
  left: 28px;
  width: 1px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.14), rgba(124, 58, 237, 0.18));
}

.landing-ai-step-index {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #2563eb;
  background: #eef2ff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.landing-ai-step strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.landing-ai-step p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.landing-ai-step.is-current {
  border-color: rgba(var(--accent-rgb), 0.22);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(255, 255, 255, 0.42)),
    radial-gradient(circle at 100% 0%, rgba(236, 72, 153, 0.1), transparent 44%);
  transform: translateX(2px);
}

.landing-ai-step.is-current .landing-ai-step-index {
  color: #fff;
  background: linear-gradient(135deg, #1677ff, #8b5cf6);
  box-shadow: 0 12px 26px rgba(79, 70, 229, 0.26);
}

.landing-ai-step.is-done .landing-ai-step-index {
  color: #0f766e;
  background: rgba(20, 184, 166, 0.12);
}

.landing-ai-step.is-pending {
  opacity: 0.7;
}

.landing-ai-status-bar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(14px);
}

.landing-ai-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.12);
}

.landing-ai-status-bar strong {
  color: var(--brand);
  font-size: 20px;
  font-weight: 950;
  white-space: nowrap;
}

.landing-ai-status-bar > span:not(.landing-ai-status-dot),
.landing-ai-status-bar em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.landing-ai-status-bar > span:not(.landing-ai-status-dot) {
  color: var(--text);
}

.landing-ai-status-bar p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  min-width: 0;
}

.landing-task-list {
  display: grid;
  gap: 10px;
}

.landing-task-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px 10px;
  min-height: 58px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.landing-task-row:hover,
.landing-special-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 14px 24px rgba(var(--accent-rgb), 0.1);
}

.landing-task-row span {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-weight: 900;
  font-size: 12px;
}

.landing-task-row strong,
.landing-special-card strong {
  color: var(--text);
  font-size: 14px;
}

.landing-task-row em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.landing-special-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.landing-special-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  min-height: 154px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.landing-special-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.55;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.landing-growth-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-growth-grid div {
  display: grid;
  gap: 4px;
  min-height: 72px;
  align-content: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass);
}

.landing-growth-grid strong {
  color: var(--text);
  font-size: 24px;
  letter-spacing: 0;
}

.landing-growth-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.landing-growth-trend {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 74px;
  margin-top: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.14));
}

.landing-growth-trend span {
  flex: 1;
  min-width: 10px;
  height: var(--h);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #60a5fa, #1677ff);
  box-shadow: 0 10px 16px rgba(22, 119, 255, 0.18);
}

html[data-theme="dark"] .landing-welcome-panel {
  background:
    radial-gradient(circle at 88% 16%, rgba(59, 130, 246, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(8, 13, 26, 0.94));
}

html[data-theme="dark"] .landing-coach-card {
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.08), rgba(15, 23, 42, 0.62)),
    radial-gradient(circle at 50% 100%, rgba(129, 140, 248, 0.18), transparent 46%);
  border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .landing-coach-note {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .landing-ai-map {
  border-color: rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.56)),
    radial-gradient(circle at 90% 20%, rgba(96, 165, 250, 0.14), transparent 42%);
}

html[data-theme="dark"] .landing-ai-map b {
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.24);
  box-shadow: none;
}

html[data-theme="dark"] .landing-ai-step {
  border-color: transparent;
}

html[data-theme="dark"] .landing-ai-step.is-current {
  border-color: rgba(143, 156, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(143, 156, 255, 0.12), rgba(12, 15, 23, 0.48)),
    radial-gradient(circle at 100% 0%, rgba(236, 72, 153, 0.1), transparent 42%);
}

html[data-theme="dark"] .landing-ai-step-index {
  color: rgba(191, 219, 254, 0.92);
  background: rgba(37, 99, 235, 0.2);
  box-shadow: none;
}

html[data-theme="dark"] .landing-ai-status-bar {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(8, 13, 24, 0.62);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .landing-ai-status-bar p,
html[data-theme="dark"] .landing-ai-step p {
  color: rgba(203, 213, 225, 0.66) !important;
}

html[data-theme="dark"] .landing-task-row,
html[data-theme="dark"] .landing-special-card,
html[data-theme="dark"] .landing-growth-grid div {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .landing-growth-trend {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.08), rgba(15, 23, 42, 0.72));
  border-color: rgba(148, 163, 184, 0.16);
}

.dashboard-learning-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.skill-progress-list {
  display: grid;
  gap: 14px;
}

.skill-progress-item {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.skill-progress-item span,
.skill-progress-item strong {
  color: var(--text);
  font-weight: 700;
}

.skill-progress-item div {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.skill-progress-item i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--hot));
}

.interview-main-dashboard {
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.18fr) minmax(280px, 0.78fr);
}

.interview-coach-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.interview-coach-strip div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.06);
}

.interview-coach-strip strong {
  color: var(--text);
  font-size: 13px;
}

.interview-coach-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.interview-copilot-card {
  align-self: start;
}

.copilot-panel,
.copilot-group,
.copilot-followup {
  display: grid;
  gap: 10px;
}

.copilot-list {
  display: grid;
  gap: 8px;
}

.copilot-panel {
  gap: 14px;
}

.copilot-score-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--hot-rgb), 0.05));
}
.copilot-score-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.copilot-score-card strong {
  color: var(--text);
  font-size: 34px;
  line-height: 1;
}
.copilot-score-card div {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--muted-rgb), 0.15);
}
.copilot-score-card i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--hot));
}
.copilot-score-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.copilot-answer-frame {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.copilot-answer-frame > strong {
  color: var(--text);
}

.copilot-frame-item {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(var(--muted-rgb), 0.14);
  border-radius: 8px;
  background: #f8fbff;
}

.copilot-frame-item span {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(var(--warning-rgb), 0.12);
  color: var(--warning);
  font-size: 11px;
  font-weight: 900;
}

.copilot-frame-item.done span {
  background: rgba(var(--success-rgb), 0.12);
  color: var(--success);
}

.copilot-frame-item p,
.copilot-frame-item small {
  margin: 0;
}

.copilot-frame-item p {
  color: var(--text);
  font-weight: 850;
}

.copilot-frame-item small {
  color: var(--muted);
  line-height: 1.5;
}

.copilot-group,
.copilot-followup {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.copilot-group strong,
.copilot-followup strong {
  color: var(--text);
}

.copilot-group p,
.copilot-followup p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.copilot-group .muted-hit::before {
  content: "";
}

.copilot-group .hit::before {
  content: "✓ ";
  color: var(--success);
  font-weight: 800;
}

.copilot-group .miss::before {
  content: "× ";
  color: var(--danger);
  font-weight: 800;
}

.rule-tree {
  display: grid;
  gap: 8px;
}

.rule-tree span,
.rule-tree em {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--text);
  font-style: normal;
}

.rule-tree em {
  margin-left: 14px;
  color: var(--muted);
}

.admin-action-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-console-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 26px 30px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  background:
    radial-gradient(circle at 88% 20%, rgba(124, 77, 255, 0.16), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 55%, #f3efff 100%);
}

.admin-console-hero h3 {
  margin: 4px 0 8px;
  color: #0f172a;
  font-size: 34px;
  font-weight: 950;
}

.admin-console-hero p {
  max-width: 760px;
  margin: 0;
  color: #64748b;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
}

.admin-console-health {
  display: grid;
  gap: 10px;
}

.admin-console-health span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  color: #334155;
  background: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 900;
}

.admin-console-health b {
  color: #6d4cff;
  font-size: 14px;
  font-weight: 950;
}

.admin-console-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.admin-console-technical-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.admin-console-technical-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 260px;
  padding: 18px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 12%, rgba(124, 77, 255, 0.12), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.admin-console-technical-card h4 {
  margin: 2px 0 4px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
}

.admin-console-technical-card label {
  display: grid;
  gap: 6px;
}

.admin-console-technical-card label span,
.admin-console-technical-card li {
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.5;
}

.admin-console-technical-card input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 12px;
  padding: 0 12px;
  color: #0f172a;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 800;
}

.admin-console-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-console-button-row .small-btn {
  min-height: 36px;
}

.admin-console-technical-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-console-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 210px;
  padding: 18px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 12%, rgba(91, 140, 255, 0.12), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.admin-console-card h4 {
  margin: 2px 0 8px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
}

.admin-console-card div > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #6d4cff;
  background: rgba(124, 77, 255, 0.1);
  font-size: 12px;
  font-weight: 950;
}

.admin-console-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-console-card li {
  position: relative;
  padding-left: 14px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
}

.admin-console-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7c4dff;
}

.admin-cost-panel {
  margin-bottom: 18px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  background:
    radial-gradient(circle at 92% 6%, rgba(34, 197, 94, 0.12), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.admin-cost-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.mini-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.mini-section-head strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
}

.mini-section-head span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 850;
}

.admin-cost-list {
  display: grid;
  gap: 8px;
}

.admin-cost-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(72px, auto));
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

.admin-cost-row strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cost-row span {
  color: #64748b;
  text-align: right;
  white-space: nowrap;
}

.admin-cost-row .danger-text {
  color: #ef4444;
}

.admin-assistant-brief {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(99, 102, 241, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 20%, rgba(139, 92, 246, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(255, 255, 255, 0.66));
  box-shadow: 0 16px 34px rgba(30, 64, 175, 0.10);
}

.admin-assistant-brief strong {
  color: var(--text);
}

.admin-assistant-brief span {
  color: var(--muted);
  line-height: 1.6;
}

.admin-assistant-action-card {
  min-height: 118px;
}

html[data-theme="dark"] .admin-assistant-brief {
  border-color: rgba(129, 140, 248, 0.30);
  background:
    radial-gradient(circle at 88% 20%, rgba(139, 92, 246, 0.22), transparent 40%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.72));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.30);
}

html[data-theme="dark"] .admin-console-hero,
html[data-theme="dark"] .admin-console-technical-card,
html[data-theme="dark"] .admin-console-card,
html[data-theme="dark"] .admin-cost-panel {
  border-color: rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at 88% 20%, rgba(124, 77, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.78));
}

html[data-theme="dark"] .admin-console-hero h3,
html[data-theme="dark"] .admin-console-technical-card h4,
html[data-theme="dark"] .admin-console-card h4,
html[data-theme="dark"] .mini-section-head strong,
html[data-theme="dark"] .admin-cost-row strong {
  color: rgba(248, 250, 252, 0.94);
}

html[data-theme="dark"] .admin-console-hero p,
html[data-theme="dark"] .admin-console-technical-card label span,
html[data-theme="dark"] .admin-console-technical-card li,
html[data-theme="dark"] .admin-console-card li {
  color: rgba(203, 213, 225, 0.82);
}

html[data-theme="dark"] .admin-console-technical-card input {
  color: rgba(241, 245, 249, 0.92);
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(8, 13, 24, 0.72);
}

html[data-theme="dark"] .admin-console-health span {
  border-color: rgba(148, 163, 184, 0.16);
  color: rgba(226, 232, 240, 0.88);
  background: rgba(15, 23, 42, 0.62);
}

html[data-theme="dark"] .admin-cost-row {
  border-color: rgba(148, 163, 184, 0.16);
  color: rgba(226, 232, 240, 0.88);
  background: rgba(15, 23, 42, 0.62);
}

html[data-theme="dark"] .mini-section-head span,
html[data-theme="dark"] .admin-cost-row span {
  color: rgba(203, 213, 225, 0.78);
}

.admin-lower-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.admin-lower-grid .section-card {
  min-height: 326px;
}

.admin-action-card {
  display: grid;
  gap: 7px;
  min-height: 120px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.admin-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.38);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.admin-action-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.admin-action-card strong {
  color: var(--text);
  font-size: 22px;
}

.admin-action-card p,
.admin-feed-card p,
.admin-weakness-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.admin-mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-mini-tags span {
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.admin-weakness-list {
  display: grid;
  gap: 10px;
}

.admin-weakness-item {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.admin-weakness-item div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-weakness-item strong {
  color: var(--text);
}

.admin-weakness-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-weakness-item i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--muted-rgb), 0.14);
}

.admin-weakness-item b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--hot));
}

.knowledge-layout,
.waveform-layout,
.debug-layout {
  align-items: start;
}

.knowledge-tree {
  display: grid;
  gap: 12px;
}

.knowledge-branch {
  display: grid;
  gap: 10px;
  padding-left: 18px;
  border-left: 2px solid #dbeafe;
}

.knowledge-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-weight: 800;
  text-align: left;
}

.knowledge-node button,
button.knowledge-node {
  cursor: pointer;
}

.knowledge-node strong {
  color: var(--text);
}

.knowledge-node span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.knowledge-node.mastered {
  border-color: rgba(var(--success-rgb), 0.24);
  background: rgba(var(--success-rgb), 0.06);
}

.knowledge-node.weak {
  border-color: rgba(var(--hot-rgb), 0.28);
  background: rgba(var(--hot-rgb), 0.07);
}

.knowledge-node.training {
  border-color: rgba(var(--accent-rgb), 0.26);
  background: rgba(var(--accent-rgb), 0.07);
}

.knowledge-node.locked {
  background: #f8fafc;
  color: #64748b;
}

.knowledge-path-item {
  display: grid;
  gap: 10px;
}

.knowledge-path-item .small-btn {
  justify-self: start;
}

.waveform-upload-box,
.debug-case-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.waveform-upload-box strong,
.debug-case-card h3 {
  color: var(--text);
}

.waveform-upload-box p,
.debug-case-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.waveform-preview {
  position: relative;
  min-height: 260px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(22, 119, 255, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(22, 119, 255, 0.12) 1px, transparent 1px),
    #0f172a;
  background-size: 28px 28px;
}

.wave-line {
  position: absolute;
  left: 24px;
  right: 24px;
  height: 3px;
  background: #60a5fa;
  transform: skewY(-8deg);
}

.line-a {
  top: 96px;
  box-shadow: 80px 26px 0 #60a5fa, 160px -18px 0 #60a5fa, 240px 18px 0 #60a5fa;
}

.line-b {
  top: 170px;
  background: #fb923c;
  box-shadow: 72px -20px 0 #fb923c, 164px 16px 0 #fb923c, 250px -12px 0 #fb923c;
}

.wave-marker {
  position: absolute;
  left: 36px;
  top: 34px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.14);
  border: 1px solid rgba(249, 115, 22, 0.32);
  color: #fed7aa;
  font-size: 12px;
  font-weight: 800;
}

.marker-right {
  left: auto;
  right: 36px;
  top: 206px;
}

.debug-action-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.debug-training-shell,
.waveform-training-shell {
  display: grid;
  gap: 18px;
}

.debug-workbench-grid,
.waveform-workbench-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  align-items: start;
}

.debug-case-tabs,
.waveform-case-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.debug-case-tabs button,
.waveform-case-tabs button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
}

.debug-case-tabs button.active,
.waveform-case-tabs button.active {
  border-color: rgba(var(--brand-rgb), 0.35);
  background: rgba(var(--brand-rgb), 0.1);
  color: var(--brand);
}

.debug-case-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb), 0.1), rgba(var(--hot-rgb), 0.08)),
    #f8fbff;
}

.debug-score-card {
  display: grid;
  place-items: center;
  width: 108px;
  min-height: 96px;
  border: 1px solid rgba(var(--brand-rgb), 0.18);
  border-radius: 8px;
  background: #ffffff;
}

.debug-score-card strong {
  color: var(--brand);
  font-size: 34px;
  line-height: 1;
}

.debug-score-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.debug-symptom-grid,
.waveform-metric-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.debug-symptom-grid span,
.waveform-metric-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  padding: 12px;
}

.debug-fault-tree {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.debug-fault-tree strong {
  color: var(--text);
}

.debug-fault-tree > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.debug-fault-tree span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.debug-fault-tree span.done {
  border-color: rgba(var(--success-rgb), 0.3);
  background: rgba(var(--success-rgb), 0.08);
  color: var(--success);
}

.debug-fault-tree span.active {
  border-color: rgba(var(--hot-rgb), 0.3);
  background: rgba(var(--hot-rgb), 0.08);
  color: var(--hot);
}

.debug-progress-board {
  display: grid;
  gap: 10px;
  grid-template-columns: 1.2fr 0.55fr 1fr;
  margin-top: 14px;
}

.debug-progress-board div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.debug-progress-board span,
.waveform-metric-grid span,
.waveform-metric-grid em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.debug-progress-board strong,
.waveform-metric-grid strong {
  color: var(--text);
  font-size: 15px;
}

.debug-progress-bar {
  height: 10px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), 0.1);
}

.debug-progress-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--hot));
}

.debug-action-card {
  display: grid;
  gap: 6px;
  min-height: 76px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.debug-action-card strong {
  color: var(--text);
}

.debug-action-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.debug-action-card.selected {
  border-color: rgba(var(--success-rgb), 0.36);
  background: rgba(var(--success-rgb), 0.08);
  box-shadow: inset 3px 0 0 rgba(var(--success-rgb), 0.8);
}

.debug-evidence-timeline,
.waveform-finding-list {
  display: grid;
  gap: 10px;
}

.debug-coach-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.debug-coach-metrics div,
.waveform-rubric-grid div {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.debug-coach-metrics strong,
.waveform-rubric-grid strong {
  color: var(--text);
}

.debug-coach-metrics span,
.waveform-rubric-grid span,
.debug-answer-frame span,
.waveform-finding-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.debug-evidence-item {
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.debug-evidence-item em {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(var(--brand-rgb), 0.1);
  color: var(--brand);
  font-style: normal;
  font-weight: 900;
}

.debug-evidence-item.critical em {
  background: rgba(var(--hot-rgb), 0.12);
  color: var(--hot);
}

.debug-evidence-item strong,
.debug-copilot-panel strong,
.waveform-finding-item strong {
  color: var(--text);
}

.debug-evidence-item p,
.debug-copilot-panel p,
.waveform-finding-item p {
  margin: 5px 0;
  color: var(--muted);
  line-height: 1.7;
}

.debug-evidence-item span {
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
}

.debug-copilot-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(var(--brand-rgb), 0.18);
  border-radius: 8px;
  background: rgba(var(--brand-rgb), 0.06);
}

.debug-answer-frame {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(var(--brand-rgb), 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.debug-answer-frame p {
  margin: 0;
}

.waveform-rubric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.waveform-case-brief {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.waveform-case-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.waveform-case-copy strong,
.waveform-case-copy p {
  min-width: 0;
}

.waveform-case-brief .small-btn {
  justify-self: end;
  white-space: nowrap;
}

.waveform-signal-preview {
  min-height: 300px;
}

.waveform-signal-preview[data-waveform-kind="i2c-rise"] .line-a {
  top: 82px;
  transform: skewY(-2deg);
  box-shadow: 70px 58px 0 #60a5fa, 150px 1px 0 #60a5fa, 245px 58px 0 #60a5fa;
}

.waveform-signal-preview[data-waveform-kind="i2c-rise"] .line-b {
  top: 168px;
  transform: skewY(-2deg);
  box-shadow: 82px 52px 0 #fb923c, 168px 0 0 #fb923c, 252px 52px 0 #fb923c;
}

.waveform-signal-preview[data-waveform-kind="can-reflection"] .line-a {
  top: 110px;
  transform: skewY(-12deg);
  box-shadow: 54px -22px 0 #60a5fa, 104px 22px 0 #60a5fa, 174px -20px 0 #60a5fa, 252px 18px 0 #60a5fa;
}

.waveform-signal-preview[data-waveform-kind="can-reflection"] .line-b {
  top: 174px;
  transform: skewY(10deg);
  box-shadow: 58px 18px 0 #fb923c, 126px -24px 0 #fb923c, 202px 24px 0 #fb923c, 274px -14px 0 #fb923c;
}

.waveform-metric-grid div {
  display: grid;
  gap: 5px;
}

.waveform-finding-item {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.waveform-finding-item.warn {
  border-color: rgba(var(--warning-rgb), 0.3);
  background: rgba(var(--warning-rgb), 0.08);
}

.waveform-finding-item.good {
  border-color: rgba(var(--success-rgb), 0.28);
  background: rgba(var(--success-rgb), 0.07);
}

.waveform-question-list {
  margin-top: 14px;
}

.full-width-btn {
  width: 100%;
}

@media (max-width: 1180px) {
  .landing-hero-grid,
  .landing-start-flow,
  .feature-card-grid,
  .dashboard-learning-grid,
  .interview-main-dashboard,
  .interview-coach-strip,
  .admin-action-list,
  .admin-lower-grid,
  .debug-workbench-grid,
  .waveform-workbench-grid,
  .mistake-workbench-grid,
  .mistake-hero {
    grid-template-columns: 1fr;
  }

  .topbar-search {
    min-width: 100%;
  }
}

@media (max-width: 720px) {
  .landing-hero-card {
    padding: 18px;
  }

  .landing-copy h1 {
    font-size: 34px;
  }

  .landing-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-preview {
    min-height: 300px;
  }

  .preview-grid,
  .landing-start-flow,
  .admin-action-list,
  .debug-action-grid,
  .debug-symptom-grid,
  .debug-progress-board,
  .debug-coach-metrics,
  .waveform-metric-grid,
  .waveform-rubric-grid,
  .mistake-summary-grid,
  .debug-case-hero,
  .waveform-case-brief {
    grid-template-columns: 1fr;
  }

  .waveform-case-brief .small-btn {
    justify-self: start;
  }
}

/* 自动主题模式 */
html {
  background: var(--bg);
}

html,
body,
.sidebar,
.main,
.topbar,
.section-card,
.metric-card,
.hero-card,
.info-card,
.modal-card,
.stack-item,
.question-card,
.report-card,
.feedback-box,
.question-box,
.empty-box,
.settings-config-block,
.settings-main-card,
.theme-settings-card,
.topbar-pill,
.menu-item,
.primary-btn,
.ghost-btn,
.danger-btn,
.launch-card,
.launch-secondary-btn,
input,
select,
textarea {
  transition:
    background-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.theme-settings-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: var(--shadow-card);
}

.theme-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.theme-option input {
  width: auto;
  min-width: auto;
  accent-color: var(--accent);
  box-shadow: none;
}

.theme-option:has(input:checked) {
  border-color: rgba(var(--accent-rgb), 0.36);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.theme-time-grid {
  margin-top: 0;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f8fafc;
  --bg-strong: #edf3fb;
  --panel: #ffffff;
  --panel-soft: #f8fbff;
  --panel-tint: #eef6ff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #dbe5f0;
  --line-strong: #b9c8dc;
  --line-soft: rgba(15, 40, 72, 0.08);
  --accent: #1677ff;
  --accent-strong: #0b5ed7;
  --accent-rgb: 22, 119, 255;
  --hot: #f97316;
  --hot-rgb: 249, 115, 22;
  --shadow: 0 18px 42px rgba(11, 31, 58, 0.12);
  --shadow-soft: 0 10px 26px rgba(11, 31, 58, 0.08);
  --shadow-card: 0 8px 20px rgba(11, 31, 58, 0.07);
}

html[data-theme="light"] body {
  background:
    linear-gradient(90deg, rgba(22, 119, 255, 0.016) 1px, transparent 1px),
    linear-gradient(180deg, #f8fbff 0%, var(--bg) 44%, #edf3fb 100%);
  background-size: 28px 28px, auto;
  color: var(--text);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #020617;
  --bg-strong: #050b16;
  --panel: #0f172a;
  --panel-soft: #111827;
  --panel-tint: #0b1220;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --line: #263244;
  --line-strong: #334155;
  --line-soft: rgba(148, 163, 184, 0.14);
  --accent: #60a5fa;
  --accent-strong: #3b82f6;
  --accent-rgb: 96, 165, 250;
  --brand: #60a5fa;
  --brand-rgb: 96, 165, 250;
  --hot: #f97316;
  --hot-rgb: 249, 115, 22;
  --brand-dark: #020617;
  --brand-dark-strong: #020617;
  --brand-contrast: #e5e7eb;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
  --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.26);
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.14) 0%, transparent 30%),
    linear-gradient(180deg, #020617 0%, #050b16 54%, #020617 100%);
  color: var(--text);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .ios-app .sidebar,
html[data-theme="dark"] .compact-shell .sidebar {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(8, 19, 38, 0.98) 58%, rgba(2, 6, 23, 0.98) 100%);
  border-right-color: rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .ios-app .brand,
html[data-theme="dark"] .compact-shell .brand,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .sidebar-foot {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .brand-logo {
  background: #070b14;
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .brand-subtitle,
html[data-theme="dark"] .status-card span,
html[data-theme="dark"] .sidebar-foot p {
  color: rgba(226, 232, 240, 0.72);
}

html[data-theme="dark"] .brand-chip {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.24);
  color: #bfdbfe;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .mobile-action-dock-panel,
html[data-theme="dark"] .review-collapse,
html[data-theme="dark"] .resume-result-card,
html[data-theme="dark"] .active-resume-card,
html[data-theme="dark"] .active-resume-stat,
html[data-theme="dark"] .diagnostic-item,
html[data-theme="dark"] .audio-progress-shell,
html[data-theme="dark"] .theme-settings-card,
html[data-theme="dark"] .dashboard-stat-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 16, 30, 0.98) 100%);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .topbar {
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
}

html[data-theme="dark"] .section-card::before {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.82), rgba(249, 115, 22, 0.56));
}

html[data-theme="dark"] .launch-card {
  background:
    linear-gradient(135deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.96) 54%, rgba(127, 29, 29, 0.72) 100%);
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .dashboard-welcome-card {
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.98));
}

html[data-theme="dark"] .dashboard-copilot-card {
  border-color: rgba(96, 165, 250, 0.22);
  background:
    radial-gradient(circle at 88% 8%, rgba(168, 85, 247, 0.13), transparent 34%),
    radial-gradient(circle at 10% 0%, rgba(96, 165, 250, 0.11), transparent 32%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 32, 0.98));
}

html[data-theme="dark"] .dashboard-task-center-hero {
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.1), transparent 38%),
    rgba(15, 23, 42, 0.48);
}

html[data-theme="dark"] .dashboard-task-ring-track {
  stroke: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .dashboard-task-ring-fill {
  stroke: #93c5fd;
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.34));
}

html[data-theme="dark"] .dashboard-task-ring strong,
html[data-theme="dark"] .dashboard-task-center-copy strong {
  color: rgba(248, 250, 252, 0.94);
}

html[data-theme="dark"] .dashboard-task-center-copy > span {
  color: rgba(253, 186, 116, 0.94);
  background: rgba(124, 45, 18, 0.22);
}

html[data-theme="dark"] .dashboard-task-center-copy p {
  color: rgba(203, 213, 225, 0.72);
}

html[data-theme="dark"] .dashboard-task-center-meta small {
  color: rgba(191, 219, 254, 0.96);
  background: rgba(96, 165, 250, 0.14);
}

html[data-theme="dark"] .dashboard-ai-insight-card,
html[data-theme="dark"] .dashboard-ai-insight-card[data-tone="lift"],
html[data-theme="dark"] .dashboard-ai-insight-card[data-tone="weak"],
html[data-theme="dark"] .dashboard-ai-insight-card[data-tone="next"] {
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.08), transparent 42%),
    rgba(15, 23, 42, 0.46);
}

html[data-theme="dark"] .dashboard-ai-insight-card strong {
  color: rgba(248, 250, 252, 0.94);
}

html[data-theme="dark"] .dashboard-ai-insight-card p {
  color: rgba(203, 213, 225, 0.72);
}

html[data-theme="dark"] .launch-summary-item,
html[data-theme="dark"] .dashboard-focus-card,
html[data-theme="dark"] .dashboard-loop-item,
html[data-theme="dark"] .dashboard-action-strip .launch-secondary-btn,
html[data-theme="dark"] .metric-sparkline,
html[data-theme="dark"] .dashboard-insight-list p,
html[data-theme="dark"] .dashboard-radar-line div,
html[data-theme="dark"] .interviewer-profile-card,
html[data-theme="dark"] .interview-progress-board,
html[data-theme="dark"] .interview-coach-strip div,
html[data-theme="dark"] .interview-question-meta span,
html[data-theme="dark"] .interview-progress-stats div,
html[data-theme="dark"] .copilot-score-card,
html[data-theme="dark"] .copilot-answer-frame,
html[data-theme="dark"] .copilot-frame-item,
html[data-theme="dark"] .stack-item,
html[data-theme="dark"] .dashboard-mission-card,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .report-stage-card,
html[data-theme="dark"] .coach-report-panel,
html[data-theme="dark"] .coach-report-score,
html[data-theme="dark"] .hardware-rubric-item,
html[data-theme="dark"] .coach-warning-card,
html[data-theme="dark"] .feedback-box,
html[data-theme="dark"] .question-box,
html[data-theme="dark"] .empty-box,
html[data-theme="dark"] .question-bank-stat,
html[data-theme="dark"] .question-bank-playbook div,
html[data-theme="dark"] .question-skill-lane,
html[data-theme="dark"] .question-source-tabs button,
html[data-theme="dark"] .question-card-topline span,
html[data-theme="dark"] .question-chip-row em,
html[data-theme="dark"] .question-bank-detail,
html[data-theme="dark"] .audio-flow-step,
html[data-theme="dark"] .audio-workbench-metric,
html[data-theme="dark"] .audio-dialogue-summary,
html[data-theme="dark"] .audio-dialogue-timeline,
html[data-theme="dark"] .audio-dialogue-line,
html[data-theme="dark"] .audio-report-digest,
html[data-theme="dark"] .audio-dialogue-stat,
html[data-theme="dark"] .audio-report-score,
html[data-theme="dark"] .resume-insight-chip,
html[data-theme="dark"] .resume-action-strip,
html[data-theme="dark"] .file-drop-field,
html[data-theme="dark"] .resume-skill-depth-item,
html[data-theme="dark"] .resume-question-preview-item,
html[data-theme="dark"] .env-item,
html[data-theme="dark"] .pipeline-step,
html[data-theme="dark"] .format-chip,
html[data-theme="dark"] .diagnostic-pill,
html[data-theme="dark"] .audio-stage-hint,
html[data-theme="dark"] .voice-badge,
html[data-theme="dark"] .voice-live-box,
html[data-theme="dark"] .embed-frame,
html[data-theme="dark"] .countdown-text,
html[data-theme="dark"] .settings-config-block,
html[data-theme="dark"] .theme-option,
html[data-theme="dark"] .copilot-group,
html[data-theme="dark"] .copilot-followup,
html[data-theme="dark"] .knowledge-node,
html[data-theme="dark"] .waveform-upload-box,
html[data-theme="dark"] .debug-case-card,
html[data-theme="dark"] .debug-score-card,
html[data-theme="dark"] .debug-case-tabs button,
html[data-theme="dark"] .waveform-case-tabs button,
html[data-theme="dark"] .debug-symptom-grid span,
html[data-theme="dark"] .debug-fault-tree,
html[data-theme="dark"] .debug-fault-tree span,
html[data-theme="dark"] .debug-coach-metrics div,
html[data-theme="dark"] .debug-answer-frame,
html[data-theme="dark"] .debug-progress-board div,
html[data-theme="dark"] .debug-action-card,
html[data-theme="dark"] .debug-evidence-item,
html[data-theme="dark"] .debug-copilot-panel,
html[data-theme="dark"] .waveform-metric-grid div,
html[data-theme="dark"] .waveform-rubric-grid div,
html[data-theme="dark"] .waveform-finding-item,
html[data-theme="dark"] .mistake-summary-grid div,
html[data-theme="dark"] .mistake-card,
html[data-theme="dark"] .mistake-retrain-frame,
html[data-theme="dark"] .mistake-sprint-card,
html[data-theme="dark"] .mistake-radar-item,
html[data-theme="dark"] .mistake-plan-card,
html[data-theme="dark"] .admin-action-card,
html[data-theme="dark"] .admin-weakness-item,
html[data-theme="dark"] .rule-tree span,
html[data-theme="dark"] .rule-tree em {
  background: var(--panel-soft);
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .question-box,
html[data-theme="dark"] .inline-source-hint,
html[data-theme="dark"] .voice-panel,
html[data-theme="dark"] .active-resume-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(11, 18, 32, 0.98) 100%);
  border-color: rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] .dashboard-welcome-card .launch-hint {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.2);
  color: var(--muted);
}

html[data-theme="dark"] .dashboard-line-chart .chart-grid line {
  stroke: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .dashboard-scope-frame {
  border-color: rgba(96, 165, 250, 0.18);
  background:
    radial-gradient(circle at 18% 20%, rgba(34, 211, 238, 0.09), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(124, 92, 255, 0.10), transparent 32%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.78), rgba(15, 23, 42, 0.58));
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.035) inset;
}

html[data-theme="dark"] .dashboard-scope-hud div {
  border-color: rgba(125, 211, 252, 0.16);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.48)),
    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.10), transparent 42%);
}

html[data-theme="dark"] .dashboard-scope-hud span {
  color: rgba(203, 213, 225, 0.62);
}

html[data-theme="dark"] .dashboard-scope-hud strong,
html[data-theme="dark"] .dashboard-scope-chart .scope-node text {
  color: rgba(248, 250, 252, 0.94);
  fill: rgba(248, 250, 252, 0.94);
}

html[data-theme="dark"] .dashboard-scope-chart .scope-label {
  fill: rgba(203, 213, 225, 0.64);
}

@keyframes hwScopeScan {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.18;
  }

  48% {
    transform: translateX(454px);
    opacity: 0.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-scope-chart .scope-scan {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  .dashboard-scope-hud {
    grid-template-columns: 1fr;
  }

  .dashboard-scope-frame {
    min-height: 340px;
  }
}

html[data-theme="dark"] .status-warn {
  color: #fbbf24;
}

html[data-theme="dark"] .feedback-box {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(11, 18, 32, 0.98) 100%);
}

html[data-theme="dark"] .feedback-box.good,
html[data-theme="dark"] .report-card.review-good {
  background: linear-gradient(180deg, rgba(var(--success-rgb), 0.16) 0%, rgba(15, 23, 42, 0.98) 100%);
  border-color: rgba(var(--success-rgb), 0.28);
}

html[data-theme="dark"] .feedback-box.warn,
html[data-theme="dark"] .report-card.review-warn,
html[data-theme="dark"] .stack-item.review-warn {
  background: linear-gradient(180deg, rgba(var(--warning-rgb), 0.16) 0%, rgba(15, 23, 42, 0.98) 100%);
  border-color: rgba(var(--warning-rgb), 0.28);
  color: var(--text);
}

html[data-theme="dark"] .report-card.review-warn {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(11, 18, 32, 0.98) 100%);
  border-color: rgba(var(--warning-rgb), 0.34);
  box-shadow: inset 3px 0 0 rgba(var(--warning-rgb), 0.68);
}

html[data-theme="dark"] .stack-item.review-good,
html[data-theme="dark"] .dashboard-mission-card.primary,
html[data-theme="dark"] .resume-card.current-resume,
html[data-theme="dark"] .paper-question-item.active,
html[data-theme="dark"] .active-resume-card,
html[data-theme="dark"] .active-resume-stat,
html[data-theme="dark"] .active-resume-chip,
html[data-theme="dark"] .debug-case-tabs button.active,
html[data-theme="dark"] .waveform-case-tabs button.active,
html[data-theme="dark"] .debug-action-card.selected,
html[data-theme="dark"] .waveform-finding-item.good,
html[data-theme="dark"] .theme-option:has(input:checked) {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.14) 0%, rgba(15, 23, 42, 0.98) 100%);
  border-color: rgba(96, 165, 250, 0.28);
}

html[data-theme="dark"] .topbar h2,
html[data-theme="dark"] .section-head h3,
html[data-theme="dark"] .metric-card h3,
html[data-theme="dark"] .stack-item strong,
html[data-theme="dark"] .dashboard-mission-card strong,
html[data-theme="dark"] .question-card h4,
html[data-theme="dark"] .report-card strong,
html[data-theme="dark"] .report-stage-card strong,
html[data-theme="dark"] .coach-report-head h4,
html[data-theme="dark"] .coach-report-score strong,
html[data-theme="dark"] .hardware-rubric-item strong,
html[data-theme="dark"] .coach-warning-card strong,
html[data-theme="dark"] .question-bank-stat strong,
html[data-theme="dark"] .question-bank-stat span,
html[data-theme="dark"] .question-bank-playbook strong,
html[data-theme="dark"] .question-skill-lane strong,
html[data-theme="dark"] .question-bank-detail strong,
html[data-theme="dark"] .audio-flow-step strong,
html[data-theme="dark"] .audio-dialogue-line strong,
html[data-theme="dark"] .audio-workbench-metric strong,
html[data-theme="dark"] .audio-dialogue-stat strong,
html[data-theme="dark"] .audio-report-score strong,
html[data-theme="dark"] .resume-insight-chip strong,
html[data-theme="dark"] .file-drop-field > strong,
html[data-theme="dark"] .resume-action-strip span,
html[data-theme="dark"] .resume-question-preview-item p,
html[data-theme="dark"] label > span,
html[data-theme="dark"] .answer-block > span,
html[data-theme="dark"] .copilot-group strong,
html[data-theme="dark"] .copilot-followup strong,
html[data-theme="dark"] .waveform-upload-box strong,
html[data-theme="dark"] .debug-case-card h3,
html[data-theme="dark"] .interview-coach-strip strong,
html[data-theme="dark"] .debug-fault-tree strong,
html[data-theme="dark"] .debug-coach-metrics strong,
html[data-theme="dark"] .debug-score-card strong,
html[data-theme="dark"] .debug-progress-board strong,
html[data-theme="dark"] .debug-action-card strong,
html[data-theme="dark"] .debug-evidence-item strong,
html[data-theme="dark"] .debug-copilot-panel strong,
html[data-theme="dark"] .copilot-answer-frame > strong,
html[data-theme="dark"] .copilot-frame-item p,
html[data-theme="dark"] .admin-action-card strong,
html[data-theme="dark"] .admin-weakness-item strong,
html[data-theme="dark"] .waveform-metric-grid strong,
html[data-theme="dark"] .waveform-rubric-grid strong,
html[data-theme="dark"] .waveform-finding-item strong,
html[data-theme="dark"] .mistake-summary-grid strong,
html[data-theme="dark"] .mistake-retrain-frame strong,
html[data-theme="dark"] .mistake-sprint-card strong,
html[data-theme="dark"] .mistake-card h4,
html[data-theme="dark"] .mistake-radar-item strong,
html[data-theme="dark"] .mistake-plan-card strong {
  color: var(--text);
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .stack-item p,
html[data-theme="dark"] .dashboard-mission-card p,
html[data-theme="dark"] .report-card p,
html[data-theme="dark"] .report-stage-card p,
html[data-theme="dark"] .report-stage-card small,
html[data-theme="dark"] .coach-report-score span,
html[data-theme="dark"] .hardware-rubric-item p,
html[data-theme="dark"] .hardware-rubric-item span,
html[data-theme="dark"] .coach-warning-card p,
html[data-theme="dark"] .question-bank-stat p,
html[data-theme="dark"] .question-bank-playbook p,
html[data-theme="dark"] .question-skill-lane span,
html[data-theme="dark"] .question-skill-lane p,
html[data-theme="dark"] .question-skill-lane small,
html[data-theme="dark"] .question-source-tabs button span,
html[data-theme="dark"] .question-card-topline span,
html[data-theme="dark"] .question-chip-row em,
html[data-theme="dark"] .question-bank-detail p,
html[data-theme="dark"] .feedback-box p,
html[data-theme="dark"] .audio-workbench-metric span,
html[data-theme="dark"] .audio-flow-step span,
html[data-theme="dark"] .audio-dialogue-line p,
html[data-theme="dark"] .audio-dialogue-stat span,
html[data-theme="dark"] .audio-report-score span,
html[data-theme="dark"] .audio-report-digest > p,
html[data-theme="dark"] .audio-dialogue-summary > p,
html[data-theme="dark"] .audio-report-suggestions p,
html[data-theme="dark"] .question-card p,
html[data-theme="dark"] .question-tags,
html[data-theme="dark"] .question-meta,
html[data-theme="dark"] .diagnostic-item p,
html[data-theme="dark"] .resume-result-card p,
html[data-theme="dark"] .resume-timeline-item p,
html[data-theme="dark"] .resume-insight-chip span,
html[data-theme="dark"] .file-drop-field > p,
html[data-theme="dark"] .file-drop-field > em,
html[data-theme="dark"] .resume-skill-depth-item p,
html[data-theme="dark"] .active-resume-meta p,
html[data-theme="dark"] .active-resume-note,
html[data-theme="dark"] .launch-secondary-btn small,
html[data-theme="dark"] .audio-progress-detail,
html[data-theme="dark"] .copilot-group p,
html[data-theme="dark"] .copilot-followup p,
html[data-theme="dark"] .rule-tree em,
html[data-theme="dark"] .knowledge-node span,
html[data-theme="dark"] .waveform-upload-box p,
html[data-theme="dark"] .debug-case-card p,
html[data-theme="dark"] .interview-coach-strip p,
html[data-theme="dark"] .debug-score-card span,
html[data-theme="dark"] .debug-fault-tree span,
html[data-theme="dark"] .debug-coach-metrics span,
html[data-theme="dark"] .debug-answer-frame span,
html[data-theme="dark"] .debug-progress-board span,
html[data-theme="dark"] .debug-action-card span,
html[data-theme="dark"] .debug-evidence-item p,
html[data-theme="dark"] .debug-copilot-panel p,
html[data-theme="dark"] .copilot-frame-item small,
html[data-theme="dark"] .admin-action-card span,
html[data-theme="dark"] .admin-action-card p,
html[data-theme="dark"] .admin-feed-card p,
html[data-theme="dark"] .admin-weakness-item span,
html[data-theme="dark"] .admin-weakness-item p,
html[data-theme="dark"] .waveform-metric-grid span,
html[data-theme="dark"] .waveform-metric-grid em,
html[data-theme="dark"] .waveform-rubric-grid span,
html[data-theme="dark"] .waveform-finding-item span,
html[data-theme="dark"] .waveform-finding-item p,
html[data-theme="dark"] .mistake-summary-grid span,
html[data-theme="dark"] .mistake-card p,
html[data-theme="dark"] .mistake-retrain-frame span,
html[data-theme="dark"] .mistake-sprint-card p,
html[data-theme="dark"] .mistake-card-head span,
html[data-theme="dark"] .mistake-card-foot span,
html[data-theme="dark"] .mistake-radar-item span,
html[data-theme="dark"] .mistake-radar-item p,
html[data-theme="dark"] .mistake-plan-card p {
  color: var(--muted);
}

html[data-theme="dark"] .menu-item {
  color: rgba(226, 232, 240, 0.72);
}

html[data-theme="dark"] .menu-item.active,
html[data-theme="dark"] .menu-item:hover {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.2);
  color: #ffffff;
}

html[data-theme="dark"] .menu-item.active::before {
  background: var(--hot);
}

html[data-theme="dark"] .topbar-pill,
html[data-theme="dark"] .diagnostic-pill,
html[data-theme="dark"] .format-chip,
html[data-theme="dark"] .audio-stage-hint,
html[data-theme="dark"] .voice-badge {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.16);
  color: var(--muted);
}

html[data-theme="dark"] .topbar-pill-primary,
html[data-theme="dark"] .audio-stage-hint.active,
html[data-theme="dark"] .voice-badge.processing {
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(96, 165, 250, 0.26);
  color: #bfdbfe;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .ghost-btn,
html[data-theme="dark"] .danger-btn,
html[data-theme="dark"] .launch-secondary-btn {
  background: #0b1220;
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #64748b;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: rgba(96, 165, 250, 0.52);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}

html[data-theme="dark"] #paperAnswer,
html[data-theme="dark"] #candidateAnswer,
html[data-theme="dark"] #audioTranscript,
html[data-theme="dark"] .interview-answer-stack textarea {
  background: #0b1220;
  color: var(--text);
  caret-color: var(--accent);
  border-color: var(--line);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  -webkit-text-fill-color: var(--text);
}

html[data-theme="dark"] #paperAnswer::placeholder,
html[data-theme="dark"] #candidateAnswer::placeholder,
html[data-theme="dark"] #audioTranscript::placeholder {
  color: #64748b;
}

html[data-theme="dark"] .primary-btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  box-shadow: 0 14px 28px rgba(59, 130, 246, 0.2);
}

html[data-theme="dark"] .dashboard-focus-card,
html[data-theme="dark"] .dashboard-loop-item {
  background: rgba(15, 23, 42, 0.76);
  border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .dashboard-loop-item.done {
  border-color: rgba(var(--success-rgb), 0.26);
  background: rgba(var(--success-rgb), 0.1);
}

html[data-theme="dark"] .dashboard-loop-item.active {
  border-color: rgba(96, 165, 250, 0.32);
  background: rgba(96, 165, 250, 0.12);
}

html[data-theme="dark"] .danger-btn {
  color: #fecaca;
  background: rgba(var(--danger-rgb), 0.1);
}

html[data-theme="dark"] .launch-secondary-btn span {
  color: var(--text);
}

html[data-theme="dark"] .audio-progress-bar {
  background: #070d18;
  border-color: rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] .knowledge-branch {
  border-left-color: rgba(96, 165, 250, 0.28);
}

html[data-theme="dark"] .knowledge-node.locked {
  background: #0b1220;
  color: #94a3b8;
}

html[data-theme="dark"] .modal-backdrop {
  background: rgba(2, 6, 23, 0.72);
}

html[data-theme="dark"] audio {
  filter: invert(0.92) hue-rotate(180deg);
}

html[data-theme="dark"] .landing-hero-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 13, 26, 0.98) 100%);
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .landing-nav {
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .landing-nav strong,
html[data-theme="dark"] .landing-copy h1,
html[data-theme="dark"] .feature-card strong,
html[data-theme="dark"] .skill-progress-item span,
html[data-theme="dark"] .skill-progress-item strong {
  color: var(--text);
}

html[data-theme="dark"] .landing-copy > p:not(.eyebrow),
html[data-theme="dark"] .feature-card p {
  color: var(--muted);
}

html[data-theme="dark"] .landing-nav button {
  color: rgba(226, 232, 240, 0.7);
}

html[data-theme="dark"] .landing-nav button:hover {
  background: rgba(96, 165, 250, 0.12);
  color: var(--text);
}

html[data-theme="dark"] .feature-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(11, 18, 32, 0.98) 100%);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .landing-start-flow div,
html[data-theme="dark"] .landing-proof-row span {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] .landing-start-flow strong {
  color: var(--text);
}

html[data-theme="dark"] .landing-start-flow p {
  color: var(--muted);
}

html[data-theme="dark"] .dashboard-preview {
  border-color: rgba(96, 165, 250, 0.2);
  background:
    linear-gradient(90deg, rgba(96, 165, 250, 0.1) 1px, transparent 1px),
    linear-gradient(180deg, #020617 0%, #0f172a 100%);
  background-size: 28px 28px, auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .preview-card {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .topbar-search input {
  background: #0b1220;
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] .skill-progress-item div {
  background: #1f2937;
}

html[data-theme="dark"] .question-source-tabs button.active,
html[data-theme="dark"] .question-source-badge {
  background: rgba(96, 165, 250, 0.14);
  border-color: rgba(96, 165, 250, 0.3);
  color: #bfdbfe;
}

html[data-theme="dark"] .audio-interviewer-preview p {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.32);
  color: var(--text);
}

@media (max-width: 720px) {
  .theme-mode-grid,
  .theme-time-grid {
    grid-template-columns: 1fr;
  }
}

/* 硬问 UI 3.0 - 专业工程感 + AI训练提示 + 微可爱训练氛围 */
:root {
  --coach: #ff6b4a;
  --coach-rgb: 255, 107, 74;
  --mint: #20b486;
  --mint-rgb: 32, 180, 134;
  --soft-lilac: #eef2ff;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --bg: #f7f9ff;
  --bg-strong: #eef6f4;
  --panel: rgba(255, 255, 255, 0.86);
  --panel-soft: rgba(255, 255, 255, 0.68);
  --line: rgba(99, 116, 139, 0.18);
  --line-strong: rgba(99, 116, 139, 0.28);
  --text: #182033;
  --muted: #68758a;
  --accent: #3468f6;
  --accent-strong: #244fd4;
  --accent-rgb: 52, 104, 246;
  --hot: var(--coach);
  --hot-rgb: var(--coach-rgb);
  --shadow: 0 20px 52px rgba(45, 59, 91, 0.14);
  --shadow-soft: 0 12px 30px rgba(45, 59, 91, 0.1);
  --shadow-card: 0 8px 24px rgba(45, 59, 91, 0.08);
}

html[data-theme="dark"] {
  --bg: #2f3440;
  --bg-strong: #363d49;
  --panel: rgba(255, 255, 255, 0.11);
  --panel-soft: rgba(255, 255, 255, 0.085);
  --panel-tint: rgba(255, 255, 255, 0.1);
  --text: #f4f7fb;
  --muted: #b9c3d1;
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.22);
  --glass: rgba(64, 71, 84, 0.78);
  --glass-strong: rgba(75, 83, 98, 0.88);
  --shadow: 0 18px 44px rgba(26, 31, 42, 0.22);
  --shadow-soft: 0 12px 28px rgba(26, 31, 42, 0.16);
  --shadow-card: 0 8px 22px rgba(26, 31, 42, 0.14);
}

body {
  background:
    linear-gradient(180deg, #fbfcff 0%, #f3faf6 48%, #f7f4ff 100%);
  color: var(--text);
}

html[data-theme="dark"] body {
  background:
    linear-gradient(180deg, #3a414d 0%, #303743 52%, #383f4a 100%);
}

.main {
  padding: 26px 34px 36px;
}

.sidebar,
.ios-app .sidebar,
.compact-shell .sidebar {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
  color: var(--text);
  border-right-color: rgba(99, 116, 139, 0.14);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .ios-app .sidebar,
html[data-theme="dark"] .compact-shell .sidebar {
  background: rgba(55, 62, 75, 0.78);
  border-right-color: rgba(255, 255, 255, 0.1);
}

.brand,
.ios-app .brand,
.compact-shell .brand {
  background: var(--glass-strong);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

.brand-name-stack strong,
.status-card h2,
.status-card strong {
  color: var(--text);
}

.brand-name-stack span,
.brand-subtitle,
.status-card span,
.sidebar-foot p {
  color: var(--muted);
}

.menu-item {
  color: #667085;
  border-color: transparent;
  background: transparent;
  min-height: 42px;
}

html[data-theme="dark"] .menu-item {
  color: rgba(235, 240, 248, 0.72);
}

.menu-item.active,
.menu-item:hover {
  background: var(--glass-strong);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(45, 59, 91, 0.08);
}

html[data-theme="dark"] .menu-item.active,
html[data-theme="dark"] .menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.menu-item.active::before {
  background: var(--coach);
}

.topbar,
.section-card,
.metric-card,
.stack-item,
.question-card,
.report-card,
.feedback-box,
.question-box,
.empty-box,
.resume-result-card,
.active-resume-card,
.audio-progress-shell,
.question-bank-stat,
.question-skill-lane,
.question-bank-playbook div,
.file-drop-field,
.coach-report-panel,
.coach-report-score {
  background: var(--glass);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .stack-item,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .feedback-box,
html[data-theme="dark"] .question-box,
html[data-theme="dark"] .empty-box,
html[data-theme="dark"] .resume-result-card,
html[data-theme="dark"] .active-resume-card,
html[data-theme="dark"] .audio-progress-shell,
html[data-theme="dark"] .question-bank-stat,
html[data-theme="dark"] .question-skill-lane,
html[data-theme="dark"] .question-bank-playbook div,
html[data-theme="dark"] .file-drop-field,
html[data-theme="dark"] .coach-report-panel,
html[data-theme="dark"] .coach-report-score {
  background: var(--glass);
  border-color: var(--line);
}

.section-card {
  padding: 22px;
}

.section-card::before,
.metric-card::before {
  background: linear-gradient(90deg, rgba(var(--coach-rgb), 0.78), rgba(var(--mint-rgb), 0.58), rgba(var(--accent-rgb), 0.52));
  opacity: 0.7;
}

.primary-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #6aa7ff 56%, #ff8a63 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(52, 104, 246, 0.18);
}

.ghost-btn,
.launch-secondary-btn {
  background: var(--glass-strong);
  border-color: var(--line);
}

.empty-box {
  color: var(--muted);
}

.empty-box::before {
  content: none !important;
  display: none !important;
}

.landing-hero-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 255, 0.82));
  border-color: rgba(99, 116, 139, 0.14);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .landing-hero-card {
  background:
    linear-gradient(135deg, rgba(45, 51, 64, 0.9), rgba(32, 38, 48, 0.84));
  border-color: rgba(255, 255, 255, 0.12);
}

.landing-copy h1 {
  color: var(--text);
}

.landing-start-flow div,
.feature-card {
  min-height: 156px;
  background: var(--glass);
  border-color: var(--line);
}

.feature-card {
  align-content: start;
}

.feature-icon {
  position: relative;
  display: none !important;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.13), rgba(var(--coach-rgb), 0.13));
  color: var(--accent);
  font-weight: 900;
  box-shadow: inset 0 -10px 18px rgba(255, 255, 255, 0.18), 0 10px 18px rgba(var(--coach-rgb), 0.08);
  overflow: hidden;
}

.feature-icon img {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: saturate(1.35) contrast(1.08) brightness(1.03);
}

.feature-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.interviewer-avatar-coach {
  background: rgba(255, 255, 255, 0.74);
}

.interviewer-avatar-coach img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html[data-theme="dark"] .interviewer-avatar-coach {
  background: rgba(255, 255, 255, 0.78);
}

.feature-icon-audio {
  color: #0f766e;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(59, 130, 246, 0.12));
}

.feature-icon-wave {
  color: #1d4ed8;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(103, 232, 249, 0.16));
}

.feature-icon-debug {
  color: #c2410c;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(239, 68, 68, 0.12));
}

.landing-special-card .feature-icon-character {
  width: 52px;
  height: 52px;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.95), transparent 20%),
    radial-gradient(circle at 50% 78%, rgba(96, 165, 250, 0.22), transparent 58%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(168, 85, 247, 0.08));
}

.landing-special-card .feature-icon-character .character-figure-icon {
  --figure-h: 64px;
  transform: translateY(8px);
}

.dashboard-preview {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(240, 248, 255, 0.5));
  border-color: rgba(99, 116, 139, 0.18);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .dashboard-preview {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: var(--shadow);
}

.coach-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass-strong);
}

.coach-bubble img,
.coach-room-persona img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 18px rgba(45, 59, 91, 0.12);
}

.coach-bubble strong,
.coach-room-persona strong {
  display: block;
  color: var(--text);
}

.coach-bubble p,
.coach-room-persona p,
.coach-room-growth span {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.growth-ribbon {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.growth-ribbon div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

html[data-theme="dark"] .growth-ribbon div {
  background: rgba(255, 255, 255, 0.06);
}

.growth-ribbon strong {
  color: var(--coach);
  font-size: 22px;
}

.growth-ribbon span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.landing-illustration-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(var(--coach-rgb), 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(var(--mint-rgb), 0.12));
  box-shadow: 0 14px 24px rgba(var(--coach-rgb), 0.08);
}

.landing-illustration-card img {
  width: 100%;
  max-height: 88px;
  object-fit: contain;
}

.landing-illustration-card strong {
  display: block;
  color: var(--text);
}

.landing-illustration-card p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.preview-card {
  background: rgba(255, 255, 255, 0.56);
  border-color: rgba(99, 116, 139, 0.16);
  color: var(--text);
}

.preview-card p {
  color: var(--muted);
}

html[data-theme="dark"] .preview-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

html[data-theme="dark"] .landing-start-flow div,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .landing-proof-row span,
html[data-theme="dark"] .landing-illustration-card {
  background: var(--glass);
  border-color: var(--line);
}

html[data-theme="dark"] .topbar-search input {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--line);
}

.coach-room-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 14px;
  margin-bottom: 14px;
}

.coach-room-persona,
.coach-room-growth {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
}

.coach-room-persona {
  grid-template-columns: auto minmax(0, 1fr);
}

.coach-room-persona span {
  color: var(--coach);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.coach-room-growth {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.coach-room-mood {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
}

.coach-room-mood small,
.coach-room-mood b,
.coach-room-mood em {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 8px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.2;
}

.coach-room-mood small {
  background: rgba(var(--coach-rgb), 0.1);
  color: var(--coach);
  font-weight: 900;
}

.coach-room-mood b {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.coach-room-mood em {
  background: rgba(var(--mint-rgb), 0.1);
  color: var(--muted);
}

.coach-companion-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 10%, rgba(var(--accent-rgb), 0.12), transparent 34%),
    linear-gradient(135deg, rgba(var(--coach-rgb), 0.1), rgba(255, 255, 255, 0.66));
}

.coach-companion-card::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -18px;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: rgba(var(--coach-rgb), 0.08);
  pointer-events: none;
}

.coach-companion-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.coach-companion-head img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 22px rgba(var(--coach-rgb), 0.12);
}

.coach-companion-card > p {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.coach-companion-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.coach-companion-actions span {
  padding: 6px 8px;
  border: 1px solid rgba(var(--coach-rgb), 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

html[data-theme="dark"] .coach-companion-card {
  background:
    radial-gradient(circle at 88% 10%, rgba(var(--accent-rgb), 0.16), transparent 34%),
    linear-gradient(135deg, rgba(var(--coach-rgb), 0.16), rgba(255, 255, 255, 0.06));
}

html[data-theme="dark"] .coach-companion-actions span {
  background: rgba(255, 255, 255, 0.08);
}

.coach-room-growth div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(var(--mint-rgb), 0.09);
}

.coach-room-growth strong {
  color: var(--mint);
  font-size: 22px;
}

.coach-floating-tip {
  display: grid;
  gap: 5px;
  max-width: 560px;
  margin: -6px 0 12px auto;
  padding: 12px 14px;
  border: 1px solid rgba(var(--coach-rgb), 0.22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--coach-rgb), 0.12), rgba(255, 255, 255, 0.68));
  box-shadow: 0 12px 24px rgba(var(--coach-rgb), 0.12);
}

html[data-theme="dark"] .coach-floating-tip {
  background: linear-gradient(135deg, rgba(var(--coach-rgb), 0.2), rgba(255, 255, 255, 0.06));
}

.coach-floating-tip strong {
  color: var(--coach);
  font-size: 13px;
}

.coach-floating-tip p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

body[data-active-panel="interview"] .interview-main-dashboard {
  max-height: calc(100vh - 260px);
}

body[data-active-panel="interview"] .interview-setup-card,
body[data-active-panel="interview"] .interview-workspace-card,
body[data-active-panel="interview"] .interview-copilot-card {
  background: var(--glass);
}

.copilot-score-card,
.copilot-answer-frame,
.copilot-group,
.copilot-followup,
.interview-coach-strip div,
.interviewer-profile-card,
.interview-progress-board {
  background: rgba(255, 255, 255, 0.58);
  border-color: var(--line);
}

html[data-theme="dark"] .copilot-score-card,
html[data-theme="dark"] .copilot-answer-frame,
html[data-theme="dark"] .copilot-group,
html[data-theme="dark"] .copilot-followup,
html[data-theme="dark"] .interview-coach-strip div,
html[data-theme="dark"] .interviewer-profile-card,
html[data-theme="dark"] .interview-progress-board {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line);
}

@media (max-width: 1180px) {
  .coach-room-banner,
  .growth-ribbon {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .main {
    padding: 18px 14px 28px;
  }

  .coach-room-growth,
  .growth-ribbon {
    grid-template-columns: 1fr;
  }

  .landing-illustration-card {
    grid-template-columns: 1fr;
  }
}

/* 硬问 UI 4.0 - 模块尺寸与视觉节奏统一 */
.section-card,
.metric-card,
.feature-card,
.preview-card,
.stack-item,
.question-card,
.report-card,
.resume-result-card,
.audio-workbench-metric,
.audio-dialogue-stat,
.audio-report-score,
.question-bank-stat,
.question-skill-lane,
.question-bank-playbook div,
.report-summary-card,
.report-stage-card,
.hardware-rubric-item,
.mistake-summary-grid div,
.mistake-card,
.debug-action-card,
.debug-symptom-grid span,
.debug-progress-board div,
.waveform-metric-grid div,
.waveform-rubric-grid div,
.admin-action-card {
  min-width: 0;
}

.section-card,
.metric-card,
.feature-card,
.preview-card,
.stack-item,
.question-card,
.report-card,
.resume-result-card,
.question-bank-stat,
.question-skill-lane,
.question-bank-playbook div,
.report-summary-card,
.report-stage-card,
.hardware-rubric-item,
.mistake-card,
.debug-action-card,
.waveform-finding-item,
.admin-action-card {
  display: grid;
  align-content: start;
}

.section-card {
  gap: 14px;
}

.section-card > .section-head {
  margin-bottom: 0;
}

.section-grid,
.metric-grid,
.feature-card-grid,
.landing-start-flow,
.preview-grid,
.growth-ribbon,
.dashboard-kpi-grid,
.dashboard-analytics-grid,
.dashboard-insight-grid,
.dashboard-learning-grid,
.question-bank-overview,
.question-bank-playbook,
.question-skill-lanes,
.audio-workbench-metrics,
.audio-dialogue-stats,
.audio-report-score-row,
.report-overview-grid,
.report-stage-grid,
.hardware-rubric-grid,
.mistake-summary-grid,
.admin-action-list,
.admin-lower-grid,
.debug-symptom-grid,
.debug-progress-board,
.debug-action-grid,
.debug-coach-metrics,
.waveform-metric-grid,
.waveform-rubric-grid {
  align-items: stretch;
}

.section-grid > *,
.metric-grid > *,
.feature-card-grid > *,
.landing-start-flow > *,
.preview-grid > *,
.growth-ribbon > *,
.dashboard-kpi-grid > *,
.dashboard-analytics-grid > *,
.dashboard-insight-grid > *,
.dashboard-learning-grid > *,
.question-bank-overview > *,
.question-bank-playbook > *,
.question-skill-lanes > *,
.audio-workbench-metrics > *,
.audio-dialogue-stats > *,
.audio-report-score-row > *,
.report-overview-grid > *,
.report-stage-grid > *,
.hardware-rubric-grid > *,
.mistake-summary-grid > *,
.admin-action-list > *,
.admin-lower-grid > *,
.debug-symptom-grid > *,
.debug-progress-board > *,
.debug-action-grid > *,
.debug-coach-metrics > *,
.waveform-metric-grid > *,
.waveform-rubric-grid > * {
  height: 100%;
}

.feature-card-grid {
  grid-auto-rows: minmax(184px, 1fr);
}

.feature-card {
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 184px;
}

.feature-card p,
.landing-start-flow p,
.preview-card p,
.stack-item p,
.question-bank-playbook p,
.question-skill-lane p,
.report-summary-card > span,
.report-summary-card p,
.report-stage-card p,
.hardware-rubric-item p,
.mistake-card p,
.debug-action-card span,
.waveform-finding-item p,
.admin-action-card p,
.coach-companion-card > p,
.coach-bubble p,
.coach-room-persona p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.feature-card p,
.landing-start-flow p,
.preview-card p,
.question-bank-playbook p,
.debug-action-card span,
.coach-companion-card > p {
  -webkit-line-clamp: 2;
}

.stack-item p,
.question-skill-lane p,
.report-summary-card p,
.report-stage-card p,
.hardware-rubric-item p,
.mistake-card p,
.waveform-finding-item p,
.admin-action-card p,
.coach-bubble p,
.coach-room-persona p {
  -webkit-line-clamp: 3;
}

.landing-start-flow {
  grid-auto-rows: minmax(132px, 1fr);
}

.landing-start-flow div {
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 132px;
}

.dashboard-preview {
  align-content: start;
}

.growth-ribbon {
  grid-auto-rows: 82px;
}

.growth-ribbon div {
  align-content: center;
}

.preview-grid {
  grid-auto-rows: minmax(98px, 1fr);
}

.preview-card {
  min-height: 98px;
}

.preview-card.wide {
  min-height: 100px;
}

.dashboard-kpi-grid {
  grid-auto-rows: minmax(112px, 1fr);
}

.dashboard-stat-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 112px;
}

.dashboard-analytics-grid > .section-card,
.dashboard-insight-grid > .section-card,
.dashboard-learning-grid > .section-card {
  min-height: 288px;
}

.dashboard-insight-grid {
  grid-auto-rows: minmax(248px, 1fr);
}

.dashboard-right-rail {
  grid-auto-rows: minmax(184px, auto);
}

.dashboard-right-rail > .section-card {
  min-height: 184px;
}

.coach-companion-card {
  min-height: 184px;
}

.dashboard-todo-list > div,
.dashboard-system-list > div {
  min-height: 32px;
}

.resume-page-grid > .section-card {
  min-height: 100%;
}

.resume-upload-insights,
.question-bank-overview,
.audio-workbench-metrics,
.audio-dialogue-stats,
.audio-report-score-row,
.mistake-summary-grid,
.debug-coach-metrics,
.waveform-metric-grid,
.waveform-rubric-grid {
  grid-auto-rows: minmax(92px, 1fr);
}

.resume-insight-chip,
.audio-workbench-metric,
.audio-dialogue-stat,
.audio-report-score,
.mistake-summary-grid div,
.debug-coach-metrics div,
.waveform-metric-grid div,
.waveform-rubric-grid div {
  min-height: 92px;
  align-content: center;
}

.resume-result-grid {
  grid-auto-rows: minmax(176px, auto);
}

.resume-result-card {
  min-height: 176px;
}

.resume-result-card.span-full {
  min-height: 148px;
}

.interview-main-dashboard {
  align-items: stretch;
}

.interview-main-dashboard > .section-card {
  height: 100%;
}

.coach-room-banner {
  align-items: stretch;
}

.coach-room-persona,
.coach-room-growth {
  min-height: 122px;
}

.coach-room-growth {
  grid-auto-rows: 1fr;
}

.coach-room-growth div {
  min-height: 86px;
  align-content: center;
}

.interview-progress-board,
.interviewer-profile-card,
.active-resume-card,
.interview-coach-strip div,
.copilot-score-card,
.copilot-answer-frame,
.copilot-group,
.copilot-followup {
  min-height: 112px;
}

.interview-coach-strip {
  grid-auto-rows: minmax(96px, 1fr);
}

.interview-coach-strip div {
  min-height: 96px;
}

.interview-workspace-grid {
  align-items: stretch;
}

.interview-answer-stack,
.interview-session-brief {
  min-height: 100%;
}

.call-state-grid {
  grid-auto-rows: minmax(108px, 1fr);
}

.call-state-grid .stack-item {
  min-height: 108px;
}

.question-bank-overview {
  grid-auto-rows: minmax(118px, 1fr);
}

.question-bank-stat {
  min-height: 118px;
}

.question-bank-playbook {
  grid-auto-rows: minmax(112px, 1fr);
}

.question-bank-playbook div {
  min-height: 112px;
}

.question-skill-lanes {
  grid-auto-rows: minmax(152px, 1fr);
}

.question-skill-lane {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 152px;
}

.audio-review-grid {
  align-items: stretch;
}

.audio-review-grid > .section-card {
  height: 100%;
}

.audio-dialogue-summary,
.audio-dialogue-timeline,
.audio-report-digest,
#extractedQuestions {
  min-height: 172px;
}

.audio-dialogue-line {
  min-height: 72px;
}

.report-overview-grid {
  grid-auto-rows: minmax(176px, 1fr);
}

.report-summary-card {
  min-height: 176px;
}

.report-stage-grid,
.hardware-rubric-grid {
  grid-auto-rows: minmax(132px, 1fr);
}

.report-stage-card,
.hardware-rubric-item {
  min-height: 132px;
}

.debug-symptom-grid,
.debug-progress-board {
  grid-auto-rows: minmax(84px, 1fr);
}

.debug-symptom-grid span,
.debug-progress-board div {
  min-height: 84px;
  align-content: center;
}

.debug-action-grid {
  grid-auto-rows: minmax(92px, 1fr);
}

.debug-action-card {
  min-height: 92px;
}

.waveform-preview,
.waveform-signal-preview {
  min-height: 300px;
}

.waveform-finding-list {
  grid-auto-rows: minmax(112px, auto);
}

.waveform-finding-item {
  min-height: 112px;
}

.admin-action-list {
  grid-auto-rows: minmax(132px, 1fr);
}

.admin-action-card {
  min-height: 132px;
}

.admin-lower-grid {
  grid-auto-rows: minmax(326px, 1fr);
}

@media (min-width: 1181px) {
  body[data-active-panel="landing"] .panel.active {
    min-height: auto;
    grid-template-rows: auto auto;
  }

  body[data-active-panel="landing"] .landing-hero-card {
    min-height: 620px;
    overflow: visible;
  }

  body[data-active-panel="landing"] .feature-card-grid {
    grid-auto-rows: 184px;
  }

  body[data-active-panel="dashboard"] .dashboard-right-rail > .section-card {
    min-height: 184px;
    max-height: 184px;
  }

  body[data-active-panel="dashboard"] .dashboard-right-rail > .coach-companion-card {
    min-height: 194px;
    max-height: 194px;
  }

  body[data-active-panel="dashboard"] .dashboard-analytics-grid > .section-card {
    min-height: 318px;
    max-height: 318px;
  }

  body[data-active-panel="dashboard"] .dashboard-insight-grid > .section-card {
    min-height: 248px;
    max-height: 248px;
  }

  body[data-active-panel="question-bank"] .question-bank-overview,
  body[data-active-panel="question-bank"] .question-bank-playbook,
  body[data-active-panel="question-bank"] .question-skill-lanes {
    flex: 0 0 auto;
  }

  body[data-active-panel="reports"] .report-overview-grid {
    grid-auto-rows: 176px;
  }

  body[data-active-panel="reports"] .report-summary-card {
    height: 176px;
  }
}

@media (max-width: 1180px) {
  .section-card,
  .metric-card,
  .feature-card,
  .preview-card,
  .stack-item,
  .question-card,
  .report-card {
    min-height: auto;
  }

  .dashboard-analytics-grid > .section-card,
  .dashboard-insight-grid > .section-card,
  .dashboard-learning-grid > .section-card,
  .interview-main-dashboard > .section-card,
  .audio-review-grid > .section-card,
  .resume-page-grid > .section-card {
    height: auto;
  }
}

/* 硬问 UI 5.0 - 参考图式 SaaS 训练台外壳与学员账号 */
html[data-theme="light"] {
  --bg: #f7faff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --text: #0f172a;
  --muted: #667085;
  --line: #e8eef7;
  --shadow-card: 0 18px 44px rgba(15, 23, 42, 0.07);
  --glass: rgba(255, 255, 255, 0.92);
  --glass-strong: rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.09), transparent 30%),
    radial-gradient(circle at 88% 6%, rgba(239, 68, 68, 0.05), transparent 28%),
    linear-gradient(180deg, #f9fbff 0%, #f4f8ff 100%);
  color: var(--text);
}

.shell {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
}

.sidebar,
.ios-app .sidebar,
.compact-shell .sidebar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .ios-app .sidebar,
html[data-theme="dark"] .compact-shell .sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 0%, rgba(59, 130, 246, 0.22), transparent 36%),
    linear-gradient(180deg, #071329 0%, #0c1833 52%, #081124 100%);
  border-right: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 18px 0 44px rgba(15, 23, 42, 0.16);
}

.brand,
.ios-app .brand,
.compact-shell .brand,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .ios-app .brand,
html[data-theme="dark"] .compact-shell .brand {
  padding: 4px 4px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.brand-logo,
html[data-theme="dark"] .brand-logo {
  width: 38px;
  height: 38px;
  padding: 4px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.26);
  object-fit: contain;
}

.brand-name-stack strong,
html[data-theme="dark"] .brand-name-stack strong {
  color: #ffffff;
  font-size: 17px;
  letter-spacing: 0;
}

.brand-name-stack span,
html[data-theme="dark"] .brand-name-stack span {
  color: rgba(203, 213, 225, 0.72);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-copy,
.status-card {
  display: none;
}

.menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0 6px;
  scrollbar-width: none;
}

.menu::-webkit-scrollbar {
  display: none;
}

.menu-section-label {
  margin: 12px 8px 5px;
  color: rgba(203, 213, 225, 0.52);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.menu-item,
html[data-theme="dark"] .menu-item {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(226, 232, 240, 0.72);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
}

.menu-item::before,
.menu-item.active::before {
  content: "";
  position: static;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(226, 232, 240, 0.18);
}

.menu-item.active,
.menu-item:hover,
html[data-theme="dark"] .menu-item.active,
html[data-theme="dark"] .menu-item:hover {
  background: linear-gradient(135deg, #2f6dff, #1d4ed8);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.34);
}

.menu-item.active::before,
.menu-item:hover::before {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.42);
}

.sidebar-account-card {
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 1px solid rgba(226, 232, 240, 0.1);
}

.sidebar-account-button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(226, 232, 240, 0.12);
  border-radius: 8px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.sidebar-account-button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.24);
}

.sidebar-account-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: left;
}

.sidebar-account-copy strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-copy em,
.topbar-account em {
  overflow: hidden;
  color: rgba(203, 213, 225, 0.72);
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-button i {
  color: rgba(226, 232, 240, 0.62);
  font-style: normal;
}

.main {
  padding: 22px;
  background: transparent;
}

.topbar,
html[data-theme="light"] .topbar {
  min-height: 82px;
  padding: 15px 18px;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.055);
  backdrop-filter: blur(18px);
}

.topbar-greeting {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
}

.topbar h2 {
  font-size: 24px;
  letter-spacing: 0;
}

.topbar-actions {
  align-items: center;
}

.topbar-search {
  min-width: 270px;
}

.topbar-search input {
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9);
}

.topbar-account {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, auto);
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 8px;
  color: var(--text);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

.topbar-account span:last-child {
  display: grid;
  gap: 2px;
  text-align: left;
}

.topbar-account strong {
  max-width: 96px;
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-account em {
  color: #667085;
}

.panel.active {
  gap: 18px;
}

html[data-theme="light"] .section-card,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .preview-card,
html[data-theme="light"] .stack-item,
html[data-theme="light"] .question-card,
html[data-theme="light"] .report-card,
html[data-theme="light"] .feedback-box,
html[data-theme="light"] .question-box,
html[data-theme="light"] .empty-box,
html[data-theme="light"] .resume-result-card,
html[data-theme="light"] .active-resume-card,
html[data-theme="light"] .audio-progress-shell,
html[data-theme="light"] .question-bank-stat,
html[data-theme="light"] .question-skill-lane,
html[data-theme="light"] .file-drop-field,
html[data-theme="light"] .coach-report-panel {
  border-color: rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.055);
  backdrop-filter: blur(16px);
}

.account-modal-card {
  max-width: 460px;
}

.account-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.account-modal-grid label {
  display: grid;
  gap: 7px;
}

.account-modal-grid .full {
  grid-column: 1 / -1;
}

.account-modal-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.06);
}

.account-modal-preview strong,
.account-modal-preview p {
  margin: 0;
}

.account-modal-preview p {
  color: var(--muted);
}

@media (max-width: 1180px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar,
  .ios-app .sidebar,
  .compact-shell .sidebar {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .sidebar-account-card {
    display: block;
  }

  .topbar-search {
    min-width: min(100%, 270px);
  }
}

html[data-theme="dark"] .topbar {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .topbar-greeting,
html[data-theme="dark"] .topbar-account strong {
  color: #e5e7eb;
}

html[data-theme="dark"] .topbar-account {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.82);
}

html[data-theme="dark"] .topbar-account em {
  color: rgba(203, 213, 225, 0.72);
}

.menu-item::before,
.menu-item.active::before,
.menu-item:hover::before {
  content: none !important;
  display: none !important;
}

.account-settings-card {
  gap: 14px;
}

.account-settings-summary,
.saved-account-list {
  display: grid;
  gap: 10px;
}

.account-settings-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(47, 109, 255, 0.08), rgba(239, 68, 68, 0.055)),
    #ffffff;
}

.account-settings-current strong,
.saved-account-item strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}

.account-settings-current p,
.account-settings-current em,
.saved-account-item em,
.saved-account-item i {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.saved-account-item {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.saved-account-item:hover,
.saved-account-item.active {
  transform: translateY(-1px);
  border-color: rgba(47, 109, 255, 0.38);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
}

.saved-account-item i {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(47, 109, 255, 0.08);
  color: #1d4ed8;
  font-weight: 800;
  white-space: nowrap;
}

.account-settings-current > div,
.saved-account-item > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.compact-empty {
  min-height: 52px;
  padding: 14px;
  align-content: center;
}

html[data-theme="dark"] .account-settings-current,
html[data-theme="dark"] .saved-account-item {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.82);
}

/* 硬问 UI 6.0 - 小问 AI 助教人格 */
.character-duo-bubble {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.character-duo-bubble img {
  width: 100%;
  height: 112px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

.feature-character-card .feature-icon {
  width: 74px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  background: #0f172a;
}

.feature-character-card .feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.character-panel-card.span-all,
.report-character-summary.span-all {
  grid-column: 1 / -1;
}

.character-coach-card {
  min-height: 150px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.character-coach-portrait {
  min-height: 136px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.character-coach-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.character-coach-copy {
  display: grid;
  gap: 8px;
  align-content: center;
}

.character-coach-copy h3,
.character-coach-copy p {
  margin: 0;
}

.character-coach-copy h3 {
  color: var(--text);
  font-size: 22px;
  line-height: 1.18;
}

.character-coach-copy > p {
  color: var(--muted);
  line-height: 1.7;
}

.character-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.character-chip-row span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.character-badge,
.character-speech-bubble,
.character-empty-state {
  position: relative;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.065);
}

.character-badge {
  display: inline-grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 7px 10px 7px 7px;
}

.character-badge img,
.character-speech-bubble img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.character-badge strong,
.character-speech-bubble strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.character-badge em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.character-speech-bubble {
  min-height: 74px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.character-speech-bubble img {
  width: 44px;
  height: 44px;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.14);
}

.character-speech-bubble p {
  margin: 3px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.character-empty-state {
  min-height: 148px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px;
  text-align: left;
}

.character-empty-state img {
  width: 96px;
  height: 112px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
  background: #0f172a;
}

.character-empty-state strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}

.character-empty-state p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.character-empty-state span {
  display: inline-flex;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.character-loading-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

.character-loading-strip > i {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47, 109, 255, 0.08), rgba(47, 109, 255, 0.95), rgba(168, 85, 247, 0.16));
  background-size: 180% 100%;
  animation: hwRoleLoading 1.15s linear infinite;
}

@keyframes hwRoleLoading {
  from { background-position: 0 0; }
  to { background-position: 180% 0; }
}

.character-xiaowen {
  --character-main: #2563eb;
  --character-soft: rgba(37, 99, 235, 0.09);
  --character-line: rgba(37, 99, 235, 0.26);
}

.character-xiaowen {
  --character-main: #8b5cf6;
  --character-soft: rgba(139, 92, 246, 0.09);
  --character-line: rgba(139, 92, 246, 0.28);
}

.character-xiaowen,
.character-xiaowen {
  border-color: var(--character-line);
  background:
    radial-gradient(circle at 92% 18%, var(--character-soft), transparent 38%),
    rgba(255, 255, 255, 0.92);
}

.character-xiaowen .character-chip-row span,
.character-xiaowen .character-chip-row span,
.character-empty-state.character-xiaowen span,
.character-empty-state.character-xiaowen span {
  color: var(--character-main);
  background: var(--character-soft);
  border: 1px solid var(--character-line);
}

.debug-copilot-panel + .character-speech-bubble,
.waveform-finding-list + .character-speech-bubble {
  margin-top: 12px;
}

.report-character-summary {
  min-height: 178px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.report-character-summary img {
  width: 100%;
  height: 140px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
  background: #0f172a;
}

.report-character-summary h4,
.report-character-summary p {
  margin: 0;
}

.report-character-summary p:last-child {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.7;
}

.report-role-coach-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

html[data-theme="dark"] .character-badge,
html[data-theme="dark"] .character-speech-bubble,
html[data-theme="dark"] .character-empty-state,
html[data-theme="dark"] .character-xiaowen,
html[data-theme="dark"] .character-xiaowen {
  border-color: rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at 92% 18%, rgba(96, 165, 250, 0.11), transparent 38%),
    rgba(15, 23, 42, 0.88);
}

html[data-theme="dark"] .character-speech-bubble p,
html[data-theme="dark"] .character-empty-state p,
html[data-theme="dark"] .report-character-summary p:last-child {
  color: rgba(203, 213, 225, 0.78);
}

@media (max-width: 1180px) {
  .character-coach-card,
  .character-empty-state,
  .report-character-summary,
  .report-role-coach-row,
  .character-duo-bubble {
    grid-template-columns: 1fr;
  }

  .character-coach-portrait,
  .report-character-summary img {
    min-height: 160px;
  }
}

/* 硬问 UI 7.0 - 小问教练入口 */
.companion-dock {
  position: fixed;
  z-index: 80;
  right: calc(22px + var(--safe-right));
  bottom: calc(22px + var(--safe-bottom));
  width: min(390px, calc(100vw - 32px));
  color: var(--text);
  pointer-events: auto;
  --companion-look-x: 0;
  --companion-look-y: 0;
}

.companion-dock.companion-position-left {
  left: calc(22px + var(--safe-left));
  right: auto;
}

.companion-dock[hidden] {
  display: none;
}

.companion-mini {
  width: auto;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(var(--brand-rgb), 0.22);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 0%, rgba(129, 140, 248, 0.22), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 255, 0.82));
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  color: #0f172a;
  text-align: left;
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}

.companion-mini .companion-avatar-stage {
  display: none !important;
}

.companion-mini[hidden] {
  display: none;
}

.companion-mini::after {
  content: "";
  position: absolute;
  inset: auto 16px 10px auto;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.13);
  filter: blur(18px);
}

.companion-mini img {
  width: 86px;
  height: 96px;
  object-fit: cover;
  object-position: center 12%;
  border-radius: 14px;
  background: linear-gradient(180deg, #0f172a, #312e81);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.22);
}

.companion-mini-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.companion-mini-bubble strong {
  font-size: 14px;
  letter-spacing: 0;
  white-space: nowrap;
}

.companion-mini-state,
.companion-emotion-chip {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.16);
  background: rgba(255, 255, 255, 0.68);
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.companion-mini-state::before,
.companion-emotion-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.companion-mini-bubble em {
  display: none;
}

.companion-drag-handle {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.16);
  cursor: grab;
}

.companion-drag-handle:active {
  cursor: grabbing;
}

.companion-panel {
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 42px));
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(var(--brand-rgb), 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--brand-rgb), 0.14), transparent 38%),
    radial-gradient(circle at 100% 18%, rgba(168, 85, 247, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(22px);
  color: #0f172a;
}

.companion-panel[hidden] {
  display: none;
}

.companion-panel-head {
  display: flex;
  gap: 9px;
  align-items: center;
  position: relative;
  padding: 6px 4px 2px;
}

.companion-panel-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12);
}

.companion-mini-avatar-token,
.companion-panel-avatar-token,
.companion-brief-avatar-token {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.26), transparent 44%),
    linear-gradient(135deg, #2563eb 0%, #7c3aed 58%, #ef4f7a 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0;
  box-shadow:
    0 10px 24px rgba(79, 70, 229, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.companion-mini-avatar-token {
  display: none;
}

.companion-panel-head img {
  width: 78px;
  height: 90px;
  object-fit: cover;
  object-position: center 12%;
  border-radius: 16px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.65);
  flex: 0 0 auto;
}

.companion-panel-head > div {
  flex: 1 1 168px;
  min-width: 150px;
}

.companion-panel-head strong,
.companion-panel-head p {
  margin: 0;
}

.companion-panel-head strong {
  font-size: 15px;
}

.companion-panel-head p {
  margin-top: 4px;
  color: rgba(15, 23, 42, 0.58);
  font-size: 12px;
}

.companion-panel-head .small-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.72);
}

.companion-brief-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--brand-rgb), 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.68));
}

.companion-brief-card > p {
  grid-column: 2;
}

.companion-brief-card .eyebrow {
  margin-bottom: 4px;
  color: rgba(15, 23, 42, 0.48);
}

.companion-brief-card strong {
  color: #0f172a;
  font-size: 15px;
}

.companion-brief-card p {
  margin: 0;
  color: rgba(15, 23, 42, 0.66);
  font-size: 13px;
  line-height: 1.65;
}

.companion-panel-grip {
  top: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.companion-page-insight {
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--brand-rgb), 0.16);
  background: rgba(255, 255, 255, 0.66);
}

.companion-memory-hud {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.companion-memory-stat {
  min-height: 52px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(var(--brand-rgb), 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 250, 252, 0.54)),
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), 0.1), transparent 55%);
}

.companion-memory-stat strong {
  font-size: 13px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.companion-memory-stat span {
  font-size: 11px;
  color: rgba(15, 23, 42, 0.56);
}

.companion-hud {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  min-height: 114px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--brand-rgb), 0.18);
  background:
    linear-gradient(90deg, rgba(var(--brand-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--brand-rgb), 0.06) 1px, transparent 1px),
    radial-gradient(circle at 24% 20%, rgba(96, 165, 250, 0.18), transparent 35%),
    radial-gradient(circle at 88% 18%, rgba(168, 85, 247, 0.16), transparent 36%),
    rgba(255, 255, 255, 0.58);
  background-size: 22px 22px, 22px 22px, auto, auto, auto;
}

.companion-hud-title,
.companion-hud-flow {
  position: relative;
  z-index: 1;
}

.companion-hud-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.companion-hud-title strong {
  color: #0f172a;
}

.companion-hud-title span {
  font-size: 11px;
  font-weight: 900;
  color: #1d4ed8;
  letter-spacing: 0;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--brand-rgb), 0.16);
  background: rgba(255, 255, 255, 0.62);
}

.companion-hud-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.companion-hud-flow i {
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(var(--brand-rgb), 0.14);
  background: rgba(255, 255, 255, 0.64);
  animation: companionNodePulse 3.2s ease-in-out infinite;
  animation-delay: calc(var(--hud-index) * 0.22s);
}

.companion-hud-scan {
  position: relative;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(var(--brand-rgb), 0.12);
  background: rgba(15, 23, 42, 0.08);
}

.companion-hud-scan span {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 36%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #fb7185);
  animation: companionScanMove 2.8s ease-in-out infinite;
}

.companion-page-insight strong,
.companion-page-insight p {
  margin: 0;
}

.companion-page-insight p {
  margin-top: 6px;
  color: rgba(15, 23, 42, 0.68);
  font-size: 13px;
  line-height: 1.7;
}

.companion-stage-console,
.companion-engine-board {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--brand-rgb), 0.16);
  background:
    linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(124, 58, 237, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 18% 12%, rgba(96, 165, 250, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.66);
  background-size: 20px 20px, 20px 20px, auto, auto;
}

.companion-stage-console::after,
.companion-engine-board::after {
  display: none;
  content: none;
}

.companion-stage-main,
.companion-engine-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.companion-stage-main strong,
.companion-engine-head strong {
  color: #0f172a;
  font-size: 13px;
}

.companion-stage-main em,
.companion-engine-head span {
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #1d4ed8;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  background: rgba(255, 255, 255, 0.68);
}

.companion-stage-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12), 0 0 18px rgba(34, 197, 94, 0.7);
}

.companion-stage-grid,
.companion-engine-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.companion-stage-grid span,
.companion-engine-grid span {
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid rgba(var(--brand-rgb), 0.12);
  background: rgba(255, 255, 255, 0.62);
}

.companion-stage-grid b,
.companion-engine-grid b {
  color: rgba(15, 23, 42, 0.52);
  font-size: 10px;
}

.companion-stage-grid i,
.companion-engine-grid i {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(15, 23, 42, 0.78);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.companion-asset-links {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 8px;
}

.companion-asset-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(239, 246, 255, 0.72));
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.1);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.companion-asset-links a:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.16);
}

.companion-hud-only {
  display: grid;
  place-items: center;
  min-height: 132px;
  overflow: hidden;
}

.companion-hud-orb {
  position: relative;
  z-index: 2;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.42), transparent 30%),
    linear-gradient(135deg, #2563eb 0%, #7c3aed 58%, #0f172a 100%);
  box-shadow:
    0 22px 46px rgba(37, 99, 235, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.companion-hud-orb::before,
.companion-hud-orb::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  inset: -12px;
  animation: companionHudPulse 4.8s ease-in-out infinite;
}

.companion-hud-orb::after {
  inset: -24px;
  opacity: 0.42;
  animation-delay: -1.4s;
}

.companion-hud-orb span {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.companion-hud-orb-small {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}

.companion-hud-orb-small span {
  font-size: 15px;
}

.coach-room-symbol {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.42), transparent 30%),
    linear-gradient(135deg, #0f172a 0%, #2563eb 56%, #7c3aed 100%);
  box-shadow:
    0 20px 42px rgba(37, 99, 235, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

@keyframes companionHudPulse {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.36;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.78;
  }
}

.companion-stage-strip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.companion-stage-strip i {
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.68);
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.56);
}

.companion-stage-console p,
.companion-engine-board p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(15, 23, 42, 0.64);
  font-size: 12px;
  line-height: 1.65;
}

.companion-role-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.companion-role-card {
  min-height: 156px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(var(--brand-rgb), 0.14);
  background:
    radial-gradient(circle at 18% 14%, rgba(96, 165, 250, 0.14), transparent 36%),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.companion-role-card:hover,
.companion-role-card:focus-visible {
  transform: translateY(-2px);
  outline: none;
  border-color: rgba(var(--brand-rgb), 0.34);
  box-shadow: 0 20px 44px rgba(var(--brand-rgb), 0.14);
}

.companion-role-card.is-active {
  border-color: rgba(var(--brand-rgb), 0.32);
  box-shadow: 0 18px 42px rgba(var(--brand-rgb), 0.14);
}

.companion-role-card .character-figure {
  --figure-h: 110px;
}

.companion-role-card div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.companion-role-card span,
.companion-role-card em {
  font-size: 11px;
  color: rgba(15, 23, 42, 0.56);
  font-style: normal;
}

.companion-role-card strong {
  color: #0f172a;
  font-size: 14px;
}

.companion-role-card p {
  margin: 0;
  color: rgba(15, 23, 42, 0.72);
  font-size: 12px;
  line-height: 1.55;
}

.companion-messages {
  display: grid;
  gap: 8px;
  max-height: 214px;
  overflow: auto;
  padding: 2px;
}

.companion-message {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.companion-message.is-user {
  margin-left: 28px;
  background: rgba(var(--brand-rgb), 0.1);
  border-color: rgba(var(--brand-rgb), 0.18);
}

.companion-message.character-xiaowen {
  border-color: rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.86), rgba(255, 255, 255, 0.72));
}

.companion-message.character-xiaowen {
  border-color: rgba(124, 58, 237, 0.18);
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.88), rgba(255, 255, 255, 0.72));
}

.companion-message.character-xiaoying {
  border-color: rgba(14, 165, 233, 0.22);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(255, 255, 255, 0.72)),
    linear-gradient(90deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px);
  background-size: auto, 18px 18px;
}

.companion-message.character-minimal {
  border-color: rgba(100, 116, 139, 0.18);
  background: rgba(255, 255, 255, 0.82);
}

.companion-message span {
  font-size: 12px;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.78);
}

.companion-message p {
  margin: 0;
  color: rgba(15, 23, 42, 0.74);
  line-height: 1.75;
}

.companion-message div,
.companion-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.companion-message button,
.companion-action-btn {
  border: 1px solid rgba(var(--brand-rgb), 0.18);
  background: rgba(255, 255, 255, 0.78);
  color: #1d4ed8;
  border-radius: 8px;
  min-height: 30px;
  padding: 0 10px;
  font-weight: 800;
  cursor: pointer;
}

.companion-actions {
  padding: 2px;
}

.companion-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  position: sticky;
  z-index: 8;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.92) 28%);
}

#companionVoiceBtn {
  display: none !important;
}

.companion-input-row input {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.78);
  color: #0f172a;
}

.companion-input-row button {
  min-height: 42px;
  border-radius: 8px;
}

.companion-fullscreen {
  inset: 18px 24px 18px 220px !important;
  width: auto;
  right: 24px !important;
  bottom: 18px !important;
  left: 220px !important;
  top: 18px !important;
}

.companion-fullscreen .companion-panel {
  width: 100%;
  max-height: none;
  height: 100%;
  grid-template-columns: minmax(320px, 410px) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head head"
    "insight messages"
    "stage messages"
    "memory messages"
    "hud messages"
    "actions form";
  align-items: stretch;
}

.companion-fullscreen .companion-panel-head {
  grid-area: head;
}

.companion-fullscreen #companionPageInsight {
  grid-area: insight;
}

.companion-fullscreen #companionStageConsole {
  grid-area: stage;
}

.companion-fullscreen #companionMemoryHud {
  grid-area: memory;
}

.companion-fullscreen #companionHud {
  grid-area: hud;
}

.companion-fullscreen #companionMessages {
  grid-area: messages;
}

.companion-fullscreen #companionActions {
  grid-area: actions;
  align-content: start;
}

.companion-fullscreen #companionForm {
  grid-area: form;
  align-self: end;
}

.companion-fullscreen .companion-messages {
  max-height: none;
  align-content: start;
  min-height: 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(var(--brand-rgb), 0.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.1), transparent 36%),
    rgba(255, 255, 255, 0.48);
}

.companion-fullscreen .companion-panel-head {
  gap: 12px;
}

.companion-fullscreen .companion-panel-head img {
  width: 110px;
  height: 132px;
}

.companion-fullscreen .companion-page-insight,
.companion-fullscreen .companion-stage-console,
.companion-fullscreen .companion-memory-hud,
.companion-fullscreen .companion-hud {
  min-height: 0;
}

.companion-fullscreen .companion-memory-hud {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.companion-dock[data-character="xiaowen"] .companion-mini,
.companion-dock[data-character="xiaowen"] .companion-panel {
  border-color: rgba(37, 99, 235, 0.26);
}

.companion-dock[data-character="xiaowen"] .companion-mini,
.companion-dock[data-character="xiaowen"] .companion-panel {
  border-color: rgba(124, 58, 237, 0.24);
}

.companion-settings-card {
  border-color: rgba(var(--brand-rgb), 0.18);
}

.companion-settings-grid {
  margin-top: 12px;
}

.companion-toggle-grid {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-note {
  margin-top: 10px;
  font-size: 12px;
}

@keyframes companionBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.012);
  }
}

@keyframes companionGlow {
  0%, 100% {
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  }
  50% {
    box-shadow: 0 24px 62px rgba(var(--brand-rgb), 0.22);
  }
}

.companion-mini img,
.companion-panel-head img {
  animation: companionBreath 3.4s ease-in-out infinite;
  translate: calc(var(--companion-look-x) * 5px) calc(var(--companion-look-y) * 4px);
}

.companion-mini {
  animation: companionGlow 4.8s ease-in-out infinite;
}

.companion-motion-off .companion-mini,
.companion-motion-off .companion-mini img,
.companion-motion-off .companion-panel-head img {
  animation: none;
}

.companion-dock[data-emotion="happy"] .companion-mini,
.companion-dock[data-emotion="success"] .companion-mini {
  border-color: rgba(16, 185, 129, 0.35);
}

.companion-dock[data-emotion="warning"] .companion-mini,
.companion-dock[data-emotion="confused"] .companion-mini {
  border-color: rgba(245, 158, 11, 0.38);
}

.companion-dock[data-emotion="analyzing"] .companion-hud-scan span,
.companion-dock[data-emotion="thinking"] .companion-hud-scan span {
  animation-duration: 1.8s;
}

.companion-dock[data-emotion-tone="happy"] .companion-mini-state,
.companion-dock[data-emotion-tone="success"] .companion-mini-state,
.companion-emotion-chip[data-tone="happy"],
.companion-emotion-chip[data-tone="success"] {
  color: #059669;
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(236, 253, 245, 0.72);
}

.companion-dock[data-emotion-tone="thinking"] .companion-mini-state,
.companion-dock[data-emotion-tone="analyzing"] .companion-mini-state,
.companion-emotion-chip[data-tone="thinking"],
.companion-emotion-chip[data-tone="analyzing"] {
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.24);
  background: rgba(245, 243, 255, 0.76);
}

.companion-dock[data-emotion-tone="warning"] .companion-mini-state,
.companion-emotion-chip[data-tone="warning"] {
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(255, 251, 235, 0.78);
}

/* 硬问 UI 8.3 - AI 人格主题层：UI 跟随小硬 / 小问 / 极简 AI 变化 */
.character-xiaoying {
  --character-main: #0ea5e9;
  --character-soft: rgba(14, 165, 233, 0.1);
  --character-line: rgba(14, 165, 233, 0.28);
}

.character-xiaowen {
  --character-main: #8b5cf6;
  --character-soft: rgba(139, 92, 246, 0.12);
  --character-line: rgba(139, 92, 246, 0.26);
}

.character-minimal {
  --character-main: #334155;
  --character-soft: rgba(100, 116, 139, 0.1);
  --character-line: rgba(100, 116, 139, 0.22);
}

.character-panel-card.character-xiaoying {
  border-color: rgba(14, 165, 233, 0.18);
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 16% 14%, rgba(56, 189, 248, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.82);
  background-size: 22px 22px, 22px 22px, auto, auto;
}

.character-panel-card.character-xiaowen {
  border-color: rgba(139, 92, 246, 0.18);
  background:
    radial-gradient(circle at 18% 10%, rgba(168, 85, 247, 0.16), transparent 36%),
    radial-gradient(circle at 92% 12%, rgba(59, 130, 246, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.84);
}

.character-panel-card .character-coach-card,
.character-panel-card .character-coach-portrait {
  overflow: hidden !important;
}

.character-panel-card .character-figure-coach {
  --figure-h: 124px;
}

.character-figure.character-xiaoying {
  --figure-h: 72px;
  width: 72px;
  place-items: center;
  padding: 10px;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, #081426 0%, #0b1730 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 16px 32px rgba(14, 165, 233, 0.18) !important;
}

.character-figure.character-xiaoying img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  filter:
    saturate(1.4)
    contrast(1.14)
    brightness(1.08)
    drop-shadow(0 0 12px rgba(14, 165, 233, 0.36)) !important;
}

.character-figure-minimal,
.character-figure.character-minimal {
  display: none !important;
}

body[data-companion-persona="xiaoying"] {
  --brand: #1d4ed8;
  --brand-rgb: 29, 78, 216;
  --accent: #0ea5e9;
  --accent-rgb: 14, 165, 233;
  --hot: #38bdf8;
  --hot-rgb: 56, 189, 248;
}

body[data-companion-persona="xiaowen"] {
  --brand: #7c3aed;
  --brand-rgb: 124, 58, 237;
  --accent: #8b5cf6;
  --accent-rgb: 139, 92, 246;
  --hot: #fb7185;
  --hot-rgb: 251, 113, 133;
}

body[data-companion-persona="minimal"] {
  --brand: #111827;
  --brand-rgb: 17, 24, 39;
  --accent: #475569;
  --accent-rgb: 71, 85, 105;
  --hot: #64748b;
  --hot-rgb: 100, 116, 139;
}

body[data-companion-persona="xiaoying"] .companion-panel {
  border-color: rgba(14, 165, 233, 0.24);
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 20% 0%, rgba(14, 165, 233, 0.18), transparent 40%),
    rgba(255, 255, 255, 0.92);
  background-size: 22px 22px, 22px 22px, auto, auto;
}

body[data-companion-persona="xiaowen"] .companion-panel {
  border-color: rgba(139, 92, 246, 0.24);
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.16), transparent 40%),
    radial-gradient(circle at 96% 14%, rgba(251, 113, 133, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.92);
}

body[data-companion-persona="minimal"] .companion-panel {
  border-color: rgba(100, 116, 139, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
}

body[data-companion-persona="minimal"] #companionAmbientStage,
body[data-companion-persona="minimal"] .character-stage-duo,
body[data-companion-persona="minimal"] .companion-role-card .character-figure,
body[data-companion-persona="minimal"] .companion-avatar-stage {
  display: none !important;
}

body[data-companion-persona="xiaoying"] .companion-brief-card,
body[data-companion-persona="xiaoying"] .companion-page-insight,
body[data-companion-persona="xiaoying"] .companion-memory-stat,
body[data-companion-persona="xiaoying"] .companion-hud {
  border-color: rgba(14, 165, 233, 0.18);
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.07) 1px, transparent 1px),
    rgba(255, 255, 255, 0.7);
  background-size: 20px 20px, auto;
}

body[data-companion-persona="xiaowen"] .companion-brief-card,
body[data-companion-persona="xiaowen"] .companion-page-insight,
body[data-companion-persona="xiaowen"] .companion-memory-stat,
body[data-companion-persona="xiaowen"] .companion-hud {
  border-color: rgba(139, 92, 246, 0.18);
  background:
    radial-gradient(circle at 12% 10%, rgba(139, 92, 246, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.72);
}

body[data-companion-persona="minimal"] .companion-brief-card,
body[data-companion-persona="minimal"] .companion-page-insight,
body[data-companion-persona="minimal"] .companion-memory-stat,
body[data-companion-persona="minimal"] .companion-hud,
body[data-companion-persona="minimal"] .companion-message {
  border-color: rgba(100, 116, 139, 0.16);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: none;
}

body[data-companion-persona="xiaoying"] .companion-panel-dot {
  background: #38bdf8;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.14), 0 0 18px rgba(56, 189, 248, 0.46);
}

body[data-companion-persona="xiaowen"] .companion-panel-dot {
  background: #8b5cf6;
  box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.14), 0 0 18px rgba(139, 92, 246, 0.42);
}

body[data-companion-persona="minimal"] .companion-panel-dot {
  background: #111827;
  box-shadow: 0 0 0 5px rgba(15, 23, 42, 0.1);
}

.topbar-persona-pill {
  border-color: rgba(var(--accent-rgb), 0.22);
  color: rgb(var(--brand-rgb));
  background:
    radial-gradient(circle at 18% 20%, rgba(var(--accent-rgb), 0.14), transparent 36%),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 12px 24px rgba(var(--brand-rgb), 0.08);
}

.topbar-persona-pill::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  vertical-align: 1px;
}

body[data-companion-persona="xiaoying"] .menu-item.active,
body[data-companion-persona="xiaoying"] .primary-btn,
body[data-companion-persona="xiaoying"] .dashboard-main-cta {
  background:
    linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
  box-shadow: 0 14px 30px rgba(14, 165, 233, 0.22);
}

body[data-companion-persona="xiaowen"] .menu-item.active,
body[data-companion-persona="xiaowen"] .primary-btn,
body[data-companion-persona="xiaowen"] .dashboard-main-cta {
  background:
    linear-gradient(135deg, #7c3aed 0%, #3b82f6 60%, #fb7185 100%);
  box-shadow: 0 14px 30px rgba(124, 58, 237, 0.18);
}

body[data-companion-persona="minimal"] .menu-item.active,
body[data-companion-persona="minimal"] .primary-btn,
body[data-companion-persona="minimal"] .dashboard-main-cta {
  background:
    linear-gradient(135deg, #111827 0%, #334155 100%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

body[data-companion-persona="xiaoying"] .topbar,
body[data-companion-persona="xiaoying"] .section-card {
  border-color: rgba(14, 165, 233, 0.2);
}

body[data-companion-persona="xiaowen"] .topbar,
body[data-companion-persona="xiaowen"] .section-card {
  border-color: rgba(139, 92, 246, 0.18);
}

body[data-companion-persona="minimal"] .topbar,
body[data-companion-persona="minimal"] .section-card {
  border-color: rgba(100, 116, 139, 0.16);
}

body[data-companion-persona="xiaoying"] .topbar {
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px),
    rgba(255, 255, 255, 0.9);
  background-size: 22px 22px, auto;
}

body[data-companion-persona="xiaowen"] .topbar {
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.9);
}

body[data-companion-persona="minimal"] .topbar {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
}

@keyframes companionNodePulse {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.82;
  }
  50% {
    transform: translateY(-2px);
    opacity: 1;
  }
}

@keyframes companionScanMove {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(170%);
  }
}

@keyframes companionPanelSweep {
  0%, 78%, 100% {
    transform: translateX(-125%);
  }
  88% {
    transform: translateX(125%);
  }
}

html[data-theme="dark"] .companion-mini,
html[data-theme="dark"] .companion-panel {
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at 18% 0%, rgba(96, 165, 250, 0.2), transparent 42%),
    radial-gradient(circle at 100% 20%, rgba(168, 85, 247, 0.16), transparent 36%),
    rgba(15, 23, 42, 0.88);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .companion-mini-bubble em,
html[data-theme="dark"] .companion-panel-head p,
html[data-theme="dark"] .companion-brief-card p,
html[data-theme="dark"] .companion-page-insight p,
html[data-theme="dark"] .companion-message p {
  color: rgba(226, 232, 240, 0.74);
}

html[data-theme="dark"] .companion-page-insight,
html[data-theme="dark"] .companion-brief-card,
html[data-theme="dark"] .companion-memory-stat,
html[data-theme="dark"] .companion-hud,
html[data-theme="dark"] .companion-stage-console,
html[data-theme="dark"] .companion-engine-board,
html[data-theme="dark"] .companion-message,
html[data-theme="dark"] .companion-input-row input,
html[data-theme="dark"] .companion-panel-head .small-btn,
html[data-theme="dark"] .companion-action-btn,
html[data-theme="dark"] .companion-message button {
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.66);
}

html[data-theme="dark"] .companion-memory-stat strong,
html[data-theme="dark"] .companion-brief-card strong,
html[data-theme="dark"] .companion-hud-title strong,
html[data-theme="dark"] .companion-hud-flow i,
html[data-theme="dark"] .companion-stage-main strong,
html[data-theme="dark"] .companion-engine-head strong,
html[data-theme="dark"] .companion-stage-grid i,
html[data-theme="dark"] .companion-engine-grid i {
  color: rgba(226, 232, 240, 0.88);
}

html[data-theme="dark"] .companion-memory-stat span,
html[data-theme="dark"] .companion-stage-grid b,
html[data-theme="dark"] .companion-engine-grid b,
html[data-theme="dark"] .companion-stage-console p,
html[data-theme="dark"] .companion-engine-board p,
html[data-theme="dark"] .companion-stage-strip i {
  color: rgba(203, 213, 225, 0.62);
}

html[data-theme="dark"] .companion-stage-grid span,
html[data-theme="dark"] .companion-engine-grid span,
html[data-theme="dark"] .companion-stage-strip i,
html[data-theme="dark"] .companion-stage-main em,
html[data-theme="dark"] .companion-engine-head span {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.52);
}

html[data-theme="dark"] .companion-asset-links a {
  color: rgba(191, 219, 254, 0.94);
  border-color: rgba(96, 165, 250, 0.2);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.58));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .companion-asset-links a:hover {
  border-color: rgba(96, 165, 250, 0.42);
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.24);
}

html[data-theme="dark"] .companion-role-card {
  border-color: rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at 20% 16%, rgba(96, 165, 250, 0.15), transparent 38%),
    rgba(15, 23, 42, 0.72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .companion-role-card strong {
  color: rgba(226, 232, 240, 0.9);
}

html[data-theme="dark"] .companion-role-card span,
html[data-theme="dark"] .companion-role-card em,
html[data-theme="dark"] .companion-role-card p {
  color: rgba(203, 213, 225, 0.68);
}

html[data-theme="dark"] .companion-message.character-xiaowen {
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.24), rgba(15, 23, 42, 0.72));
}

html[data-theme="dark"] .companion-message.character-xiaowen {
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.24), rgba(15, 23, 42, 0.72));
}

html[data-theme="dark"] .companion-message.character-xiaoying {
  border-color: rgba(14, 165, 233, 0.22);
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(15, 23, 42, 0.72));
  background-size: 18px 18px, auto;
}

html[data-theme="dark"] .companion-message.character-minimal {
  background: rgba(15, 23, 42, 0.72);
}

html[data-theme="dark"] body[data-companion-persona="xiaoying"] .companion-panel {
  border-color: rgba(14, 165, 233, 0.22);
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 20% 0%, rgba(14, 165, 233, 0.18), transparent 40%),
    rgba(2, 6, 23, 0.92);
  background-size: 22px 22px, 22px 22px, auto, auto;
}

html[data-theme="dark"] body[data-companion-persona="xiaowen"] .companion-panel {
  border-color: rgba(139, 92, 246, 0.24);
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.2), transparent 42%),
    radial-gradient(circle at 96% 14%, rgba(251, 113, 133, 0.12), transparent 34%),
    rgba(15, 23, 42, 0.9);
}

html[data-theme="dark"] body[data-companion-persona="minimal"] .companion-panel {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] body[data-companion-persona="minimal"] .companion-brief-card,
html[data-theme="dark"] body[data-companion-persona="minimal"] .companion-page-insight,
html[data-theme="dark"] body[data-companion-persona="minimal"] .companion-memory-stat,
html[data-theme="dark"] body[data-companion-persona="minimal"] .companion-hud,
html[data-theme="dark"] body[data-companion-persona="minimal"] .companion-message {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.62);
}

html[data-theme="dark"] .topbar-persona-pill {
  background:
    radial-gradient(circle at 18% 20%, rgba(var(--accent-rgb), 0.18), transparent 36%),
    rgba(15, 23, 42, 0.72);
  color: rgba(226, 232, 240, 0.92);
}

html[data-theme="dark"] body[data-companion-persona="xiaoying"] .topbar {
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px),
    rgba(2, 6, 23, 0.9);
  background-size: 22px 22px, auto;
}

html[data-theme="dark"] body[data-companion-persona="xiaowen"] .topbar {
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.2), transparent 34%),
    rgba(15, 23, 42, 0.9);
}

html[data-theme="dark"] body[data-companion-persona="minimal"] .topbar {
  background: rgba(2, 6, 23, 0.92);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .companion-message span {
  color: rgba(226, 232, 240, 0.86);
}

html[data-theme="dark"] .companion-mini-state,
html[data-theme="dark"] .companion-emotion-chip {
  background: rgba(15, 23, 42, 0.62);
  border-color: rgba(148, 163, 184, 0.18);
}

@media (max-width: 1180px) {
  .companion-fullscreen {
    inset: 14px !important;
    left: 14px !important;
    right: 14px !important;
  }

  .companion-fullscreen .companion-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "insight"
      "stage"
      "memory"
      "hud"
      "messages"
      "actions"
      "form";
  }
}

@media (max-width: 720px) {
  .companion-dock {
    right: calc(12px + var(--safe-right));
    bottom: calc(14px + var(--safe-bottom));
    width: min(330px, calc(100vw - 24px));
  }

  .companion-mini {
    width: min(276px, calc(100vw - 24px));
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .companion-mini img {
    width: 70px;
    height: 82px;
  }

  .companion-panel {
    width: min(330px, calc(100vw - 24px));
    max-height: calc(100vh - 34px);
  }

  .companion-memory-hud,
  .companion-hud-flow,
  .companion-stage-grid,
  .companion-engine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .companion-panel-head {
    gap: 8px;
  }

  .companion-panel-head img {
    width: 64px;
    height: 76px;
  }

  .companion-panel-head .small-btn {
    padding: 0 7px;
  }

  #companionMuteBtn,
  #companionHideBtn {
    display: none;
  }

  .companion-input-row {
    grid-template-columns: 1fr;
  }

  .companion-toggle-grid {
    grid-template-columns: 1fr;
  }

  .companion-role-preview {
    grid-template-columns: 1fr;
  }
}

/* 硬问 UI 8.1 - 透明 Logo 品牌系统 */
:root {
  --hw-nav-bg: #07111f;
  --hw-nav-bg-strong: #0b1730;
  --hw-logo-red: #ff3b30;
  --hw-logo-orange: #ff5a1f;
  --hw-brand-subtle: rgba(255, 255, 255, 0.65);
  --hw-brand-muted: rgba(255, 255, 255, 0.55);
}

.sidebar,
.ios-app .sidebar,
.compact-shell .sidebar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .ios-app .sidebar,
html[data-theme="dark"] .compact-shell .sidebar {
  background: linear-gradient(180deg, #081426 0%, #0b1730 100%) !important;
  border-right-color: rgba(255, 255, 255, 0.08) !important;
}

.brand,
.ios-app .brand,
.compact-shell .brand,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .ios-app .brand,
html[data-theme="dark"] .compact-shell .brand {
  padding: 2px 4px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.brand-head,
.ios-app .brand-head,
.compact-shell .brand-head,
html[data-theme="dark"] .brand-head {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

.shell .sidebar .brand-logo,
.ios-app .brand-logo,
.compact-shell .brand-logo,
html[data-theme="dark"] .brand-logo,
html[data-theme="light"] .brand-logo {
  width: 36px !important;
  height: 36px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter:
    saturate(1.45)
    contrast(1.12)
    brightness(1.06)
    drop-shadow(0 0 8px rgba(255, 59, 48, 0.38)) !important;
}

.brand-name-stack {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.brand-name-stack strong,
html[data-theme="dark"] .brand-name-stack strong,
html[data-theme="light"] .brand-name-stack strong {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.brand-name-stack span,
html[data-theme="dark"] .brand-name-stack span,
html[data-theme="light"] .brand-name-stack span {
  color: var(--hw-brand-subtle) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

.sidebar .brand-copy {
  display: none !important;
}

.topbar-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-title-stack {
  min-width: 0;
}

.topbar-brand-lockup,
.landing-brand-lockup {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #081426 0%, #0b1730 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.12);
}

.topbar-brand-lockup img,
.landing-brand-lockup img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  object-fit: contain;
  background: transparent;
}

.topbar-brand-lockup span,
.landing-brand-lockup span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.topbar-brand-lockup strong,
.landing-brand-lockup b {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.topbar-brand-lockup em,
.landing-brand-lockup em {
  color: var(--hw-brand-subtle);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-brand-lockup {
  padding: 9px 12px;
}

.landing-brand-lockup img {
  width: 36px;
  height: 36px;
}

.landing-brand-lockup b {
  font-size: 26px;
}

.landing-brand-lockup em {
  font-size: 11px;
}

.landing-brand-subtitle {
  margin: 0 0 10px;
  color: rgba(15, 23, 42, 0.64);
  font-weight: 800;
  letter-spacing: 0.02em;
}

html[data-theme="dark"] .landing-brand-subtitle {
  color: var(--hw-brand-muted);
}

.companion-hud-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 14px;
  color: #dbeafe;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(180deg, #111c34 0%, #07111f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 14px 26px rgba(15, 23, 42, 0.22),
    0 0 20px rgba(96, 165, 250, 0.18);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.companion-panel-badge {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}

.companion-avatar-stage {
  position: relative;
  display: block;
  flex: 0 0 auto;
}

.companion-avatar-stage img {
  display: block;
}

.companion-mouth {
  display: none !important;
}

.companion-dock[data-voice-state="speaking"] .companion-mouth {
  opacity: 0.88;
  animation: companionMouthTalk 0.18s ease-in-out infinite alternate;
}

.companion-dock[data-voice-state="listening"] .companion-mouth {
  width: 10px;
  height: 10px;
  opacity: 0.7;
  background: rgba(34, 211, 238, 0.72);
}

.companion-lipsync-off .companion-mouth {
  display: none;
}

@keyframes companionMouthTalk {
  from { transform: translate(-50%, -50%) scaleY(0.35); }
  to { transform: translate(-50%, -50%) scaleY(1.45); }
}

@media (max-width: 980px) {
  .topbar-left {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .topbar-brand-lockup {
    padding: 7px 9px;
  }
}

@media (max-width: 680px) {
  .topbar-brand-lockup {
    display: none !important;
  }

  .landing-nav {
    align-items: flex-start;
  }
}

/* 硬问 UI 8.2 - AI 数字角色透明图层系统 */
.character-figure {
  --figure-h: 96px;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: end center;
  width: min(100%, calc(var(--figure-h) * 0.9));
  height: var(--figure-h);
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  vertical-align: bottom;
  transform-origin: 50% 88%;
  animation: hwCharacterBreath 4.6s ease-in-out infinite;
}

.character-figure img,
.character-duo-bubble .character-figure img,
.feature-character-card .feature-icon .character-figure img,
.character-coach-portrait .character-figure img,
.character-badge .character-figure img,
.character-speech-bubble .character-figure img,
.character-empty-state .character-figure img,
.report-character-summary .character-figure img,
.interviewer-avatar .character-figure img {
  position: relative;
  z-index: 2;
  width: auto !important;
  max-width: 132%;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    saturate(1.42)
    contrast(1.12)
    brightness(1.05)
    drop-shadow(0 16px 24px rgba(2, 6, 23, 0.34))
    drop-shadow(0 0 12px rgba(96, 165, 250, 0.22));
}

.character-xiaowen.character-figure img,
.character-figure.character-xiaowen img {
  filter:
    saturate(1.48)
    contrast(1.14)
    brightness(1.05)
    drop-shadow(0 16px 26px rgba(2, 6, 23, 0.36))
    drop-shadow(0 0 12px rgba(59, 130, 246, 0.34));
}

.character-xiaowen.character-figure img,
.character-figure.character-xiaowen img {
  filter:
    saturate(1.5)
    contrast(1.14)
    brightness(1.06)
    drop-shadow(0 16px 26px rgba(2, 6, 23, 0.32))
    drop-shadow(0 0 14px rgba(168, 85, 247, 0.36));
}

.character-rim-light {
  position: absolute;
  z-index: 1;
  inset: 7% 4% 10%;
  border-radius: 44% 44% 24% 24%;
  opacity: 0.7;
  background:
    radial-gradient(circle at 68% 12%, rgba(255, 255, 255, 0.56), transparent 16%),
    radial-gradient(circle at 20% 34%, rgba(96, 165, 250, 0.36), transparent 26%),
    radial-gradient(circle at 78% 54%, rgba(168, 85, 247, 0.32), transparent 30%);
  filter: blur(18px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: hwRimPulse 3.8s ease-in-out infinite;
}

.character-ground-shadow {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 1%;
  width: 78%;
  height: 13%;
  border-radius: 999px;
  opacity: 0.68;
  background: radial-gradient(ellipse, rgba(2, 6, 23, 0.46), rgba(37, 99, 235, 0.16) 45%, transparent 72%);
  filter: blur(9px);
  transform: translateX(-50%);
  pointer-events: none;
}

.character-figure-badge { --figure-h: 44px; }
.character-figure-bubble { --figure-h: 58px; }
.character-figure-icon { --figure-h: 76px; }
.character-figure-empty { --figure-h: 124px; }
.character-figure-coach { --figure-h: 132px; }
.character-figure-stage { --figure-h: 134px; }

.motion-wave { animation-name: hwCharacterWave; animation-duration: 4.8s; }
.motion-point,
.motion-thinking { animation-name: hwCharacterFocus; animation-duration: 4.2s; }
.motion-success { animation-name: hwCharacterCelebrate; animation-duration: 4.4s; }

.character-stage-duo {
  position: relative;
  isolation: isolate;
  min-height: 128px;
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  align-items: end;
  justify-items: center;
  gap: 0;
  overflow: visible;
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.18), transparent 35%),
    radial-gradient(circle at 80% 22%, rgba(168, 85, 247, 0.2), transparent 38%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(255, 255, 255, 0.06));
}

.character-stage-duo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 10px;
  border-radius: 8px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background:
    linear-gradient(rgba(96, 165, 250, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: 0.8;
}

.character-stage-duo .character-figure {
  z-index: 2;
}

.character-figure-left {
  transform: translateX(10px);
}

.character-figure-right {
  transform: translateX(-8px);
}

.character-figure-center {
  grid-column: 1 / -1;
  justify-self: center;
  transform: none;
}

.character-stage-card {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 12px;
  max-width: 190px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 232, 240, 0.74);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.13);
}

.character-stage-card strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.character-stage-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.character-hud-ring {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 50%;
  pointer-events: none;
  animation: hwHudFloat 6s ease-in-out infinite;
}

.character-hud-ring-a {
  width: 86px;
  height: 86px;
  left: 9%;
  bottom: 10px;
}

.character-hud-ring-b {
  width: 118px;
  height: 118px;
  right: 8%;
  top: 8px;
  border-color: rgba(168, 85, 247, 0.3);
  animation-delay: -1.6s;
}

.character-stage-mini {
  width: 136px;
  min-height: 94px;
  background: transparent;
}

.character-stage-mini .character-figure {
  --figure-h: 96px;
}

.coach-bubble.character-duo-bubble {
  grid-template-columns: minmax(176px, 0.82fr) minmax(0, 1fr) !important;
  align-items: center;
  gap: 14px;
  overflow: visible !important;
}

.coach-bubble.character-duo-bubble > .character-stage-duo {
  min-height: 138px;
}

.feature-character-card .feature-icon {
  overflow: visible !important;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.9), transparent 18%),
    radial-gradient(circle at 50% 76%, rgba(96, 165, 250, 0.18), transparent 55%) !important;
  border: 1px solid rgba(226, 232, 240, 0.78);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.feature-character-card .feature-icon .character-figure {
  transform: translateY(9px);
}

.character-coach-card {
  overflow: visible;
}

.character-coach-portrait {
  display: grid;
  place-items: end center;
  overflow: visible !important;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 20%, rgba(96, 165, 250, 0.2), transparent 38%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.06), rgba(168, 85, 247, 0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.15);
}

.character-badge {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  overflow: visible;
}

.character-speech-bubble {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  overflow: visible;
}

.character-empty-state {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  overflow: visible;
}

.report-character-summary {
  grid-template-columns: 280px minmax(0, 1fr) !important;
  overflow: visible;
}

.report-character-summary > .character-stage-duo {
  min-height: 168px;
}

.coach-companion-head {
  grid-template-columns: 148px minmax(0, 1fr) !important;
  overflow: visible;
}

.coach-room-persona {
  overflow: visible;
}

.coach-room-persona > .character-figure {
  flex: 0 0 auto;
}

.interviewer-avatar-coach {
  overflow: visible !important;
}

.interviewer-avatar-coach .character-figure {
  --figure-h: 56px;
}

.companion-avatar-stage {
  filter:
    drop-shadow(0 16px 22px rgba(2, 6, 23, 0.3))
    drop-shadow(0 0 12px rgba(168, 85, 247, 0.28));
  animation: hwCharacterBreath 4.8s ease-in-out infinite;
  isolation: isolate;
}

.companion-avatar-stage::before,
.companion-avatar-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.companion-avatar-stage::before {
  left: 11%;
  right: 11%;
  bottom: 0;
  height: 16%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(96, 165, 250, 0.36), transparent 68%),
    radial-gradient(circle, rgba(168, 85, 247, 0.22), transparent 72%);
  filter: blur(5px);
}

.companion-avatar-stage::after {
  inset: -8px -10px 8px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.14), transparent 42%),
    radial-gradient(circle at 72% 18%, rgba(168, 85, 247, 0.22), transparent 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  opacity: 0.72;
}

.companion-avatar-stage img {
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  border-radius: 0 !important;
  filter:
    saturate(1.5)
    contrast(1.14)
    brightness(1.06)
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.18))
    drop-shadow(0 12px 14px rgba(15, 23, 42, 0.24));
}

.companion-mini img {
  width: 84px !important;
  height: 96px !important;
}

.companion-panel-head img {
  width: 80px !important;
  height: 96px !important;
}

html[data-theme="dark"] .character-stage-card {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.82);
}

html[data-theme="dark"] .character-stage-card p {
  color: rgba(203, 213, 225, 0.78);
}

/* 硬问 Companion - 小问 Live2D 悬浮头像 */
.companion-mini {
  width: min(374px, calc(100vw - 32px)) !important;
  min-height: 166px !important;
  grid-template-columns: 128px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: end !important;
  padding: 12px 14px 14px 10px !important;
  overflow: visible !important;
  border-color: rgba(124, 58, 237, 0.28) !important;
  background:
    radial-gradient(circle at 22% 24%, rgba(168, 85, 247, 0.24), transparent 42%),
    radial-gradient(circle at 78% 8%, rgba(59, 130, 246, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 243, 255, 0.82)) !important;
}

.companion-mini::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12px;
  border-radius: 16px;
  background:
    linear-gradient(rgba(124, 58, 237, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.62;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
  pointer-events: none;
}

.companion-mini-bubble {
  position: relative;
  z-index: 4;
  align-self: center;
  padding: 9px 8px 9px 0;
}

.companion-mini-badge {
  width: fit-content !important;
  min-width: 42px;
  height: 26px !important;
  padding: 0 9px;
  border-radius: 999px !important;
  font-size: 10px !important;
}

.companion-mini #companionMiniAvatarStage {
  display: none !important;
}

.companion-mini {
  width: min(292px, calc(100vw - 32px)) !important;
  min-height: 118px !important;
  grid-template-columns: 1fr !important;
  padding: 14px !important;
}

.companion-character-deck {
  position: relative;
  overflow: visible;
  min-height: 236px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 24%, rgba(168, 85, 247, 0.22), transparent 42%),
    radial-gradient(circle at 92% 12%, rgba(59, 130, 246, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(245, 243, 255, 0.58));
}

.companion-character-deck::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  background:
    linear-gradient(rgba(96, 165, 250, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.7;
  mask-image: radial-gradient(circle at 28% 50%, #000 0 34%, transparent 72%);
  pointer-events: none;
}

.companion-character-copy {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.companion-character-copy span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #7c3aed;
  background: rgba(245, 243, 255, 0.8);
  border: 1px solid rgba(124, 58, 237, 0.18);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.companion-character-copy strong {
  color: #0f172a;
  font-size: 17px;
  line-height: 1.25;
}

.companion-character-copy p {
  margin: 0;
  color: rgba(15, 23, 42, 0.66);
  font-size: 12px;
  line-height: 1.65;
}

.companion-avatar-stage {
  --avatar-w: 124px;
  --avatar-h: 166px;
  width: var(--avatar-w);
  height: var(--avatar-h);
  position: relative;
  z-index: 3;
  display: grid !important;
  place-items: end center;
  flex: 0 0 var(--avatar-w);
  isolation: isolate;
  overflow: visible;
  perspective: 900px;
  transform-style: preserve-3d;
  animation: companionFloat3d 5.4s ease-in-out infinite;
  translate: calc(var(--companion-look-x) * 4px) calc(var(--companion-look-y) * 3px);
}

.companion-avatar-panel {
  --avatar-w: 184px;
  --avatar-h: 224px;
}

.companion-model-viewer {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: end center;
  border-radius: 8px;
  cursor: grab;
  outline: none;
  touch-action: none;
  transform-style: preserve-3d;
  background: transparent !important;
  background-size: auto;
}

.companion-model-viewer:focus-visible {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.24);
}

.companion-model-viewer.is-rotating {
  cursor: grabbing;
}

.companion-model-viewer::before {
  content: none !important;
  display: none !important;
}

.companion-model-viewer::after {
  content: none !important;
  display: none !important;
}

.companion-avatar-stage img,
.companion-mini .companion-avatar-stage img,
.companion-panel .companion-avatar-stage img {
  position: relative;
  z-index: 4;
  width: auto !important;
  height: 100% !important;
  max-width: 145% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-origin: 50% 88%;
  transform:
    rotateY(calc(var(--companion-look-x) * 8deg))
    rotateX(calc(var(--companion-look-y) * -5deg))
    translateZ(18px);
  filter:
    saturate(1.42)
    contrast(1.13)
    brightness(1.05)
    drop-shadow(0 22px 26px rgba(2, 6, 23, 0.34))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 18px rgba(168, 85, 247, 0.34)) !important;
}

.companion-model-viewer #companionPanelCharacter {
  height: 100% !important;
  max-width: 130% !important;
  transform:
    rotateY(calc(var(--companion-look-x) * 7deg))
    rotateX(calc(var(--companion-look-y) * -4deg))
    translateY(-4px)
    translateZ(30px);
  filter:
    saturate(1.28)
    contrast(1.16)
    brightness(0.98)
    drop-shadow(0 18px 16px rgba(2, 6, 23, 0.32)) !important;
}

.companion-model-angle {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  min-width: 82px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #6d28d9;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(124, 58, 237, 0.22);
  font-size: 10px;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

.companion-model-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
}

.companion-model-controls button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: rgba(255, 255, 255, 0.76);
  color: #6d28d9;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.companion-model-controls button:hover {
  border-color: rgba(124, 58, 237, 0.34);
  background: rgba(245, 243, 255, 0.92);
}

.companion-model-controls em {
  min-width: 0;
  flex: 1 1 100%;
  color: rgba(15, 23, 42, 0.54);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  word-break: break-word;
}

.companion-model-telemetry {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.companion-model-telemetry span {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 7px;
  border-radius: 10px;
  color: rgba(15, 23, 42, 0.68);
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(124, 58, 237, 0.14);
  font-size: 10px;
  font-weight: 800;
}

.companion-model-telemetry b {
  color: #6d28d9;
  font-size: 11px;
}

.companion-ambient-stage {
  position: fixed;
  z-index: 76;
  right: calc(32px + var(--safe-right));
  bottom: calc(154px + var(--safe-bottom));
  width: 230px;
  min-height: 268px;
  display: grid;
  place-items: end center;
  pointer-events: none;
  color: #0f172a;
  transition:
    right 0.28s ease,
    left 0.28s ease,
    bottom 0.28s ease,
    transform 0.28s ease,
    opacity 0.22s ease;
}

.companion-ambient-stage[hidden] {
  display: none;
}

.companion-ambient-stage.companion-ambient-expanded {
  right: min(424px, calc(100vw - 274px));
  bottom: calc(38px + var(--safe-bottom));
}

.companion-ambient-stage.companion-position-left {
  left: calc(32px + var(--safe-left));
  right: auto;
}

.companion-ambient-stage.companion-position-left.companion-ambient-expanded {
  left: min(424px, calc(100vw - 274px));
  right: auto;
}

.companion-ambient-model {
  position: relative;
  z-index: 2;
  width: 176px;
  height: 238px;
  display: grid;
  place-items: end center;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  isolation: isolate;
  transform-style: preserve-3d;
  animation: companionAmbientFloat 5.8s ease-in-out infinite;
  filter:
    drop-shadow(0 18px 16px rgba(2, 6, 23, 0.34));
}

.companion-ambient-model::before {
  content: none !important;
  display: none !important;
}

.companion-ambient-model::after {
  content: none !important;
  display: none !important;
}

.companion-ambient-model img {
  position: relative;
  z-index: 3;
  width: auto;
  height: 100%;
  max-width: 136%;
  object-fit: contain;
  object-position: center bottom;
  transform:
    rotateY(calc(var(--companion-look-x) * 7deg))
    rotateX(calc(var(--companion-look-y) * -4deg))
    translateY(-6px)
    translateZ(28px);
  filter:
    saturate(1.28)
    contrast(1.18)
    brightness(0.98)
    drop-shadow(0 18px 16px rgba(2, 6, 23, 0.34));
}

.companion-live2d-canvas {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform:
    translateX(-50%)
    rotateY(calc(var(--companion-look-x) * 5deg))
    rotateX(calc(var(--companion-look-y) * -3deg))
    translateZ(24px);
  pointer-events: none;
  background: transparent;
  opacity: 1;
  mix-blend-mode: normal;
  filter:
    saturate(1.06)
    contrast(1.04)
    drop-shadow(0 16px 22px rgba(15, 23, 42, 0.28));
}

.companion-live2d-canvas[hidden] {
  display: none;
}

.companion-ambient-model[data-live2d-active="true"] img {
  visibility: hidden !important;
}

.companion-ambient-model[data-live2d-active="false"] img,
.companion-ambient-model:not([data-live2d-active]) img {
  display: none !important;
}

.companion-ambient-model[data-live2d-active="false"]::before,
.companion-ambient-model:not([data-live2d-active])::before {
  content: "小问加载中" !important;
  position: absolute;
  right: 0;
  bottom: 26px;
  z-index: 7;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #6d28d9;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(124, 58, 237, 0.2);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
}

.companion-ambient-model[data-live2d-active="true"] .companion-live2d-canvas {
  display: block;
}

#companionPanelCharacter,
#companionAmbientCharacter {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  will-change: transform;
}

html:not([data-theme="dark"]) .companion-ambient-model {
  filter:
    drop-shadow(0 18px 14px rgba(2, 6, 23, 0.32));
}

html:not([data-theme="dark"]) .companion-ambient-model::before {
  content: none !important;
  display: none !important;
}

html:not([data-theme="dark"]) .companion-ambient-model::after {
  content: none !important;
  display: none !important;
}

html:not([data-theme="dark"]) .companion-ambient-model img,
html:not([data-theme="dark"]) .companion-model-viewer #companionPanelCharacter {
  opacity: 1 !important;
  filter:
    saturate(1.72)
    contrast(1.34)
    brightness(0.96)
    drop-shadow(1px 0 0 rgba(15, 23, 42, 0.78))
    drop-shadow(-1px 0 0 rgba(15, 23, 42, 0.78))
    drop-shadow(0 1px 0 rgba(15, 23, 42, 0.78))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.72))
    drop-shadow(0 18px 16px rgba(2, 6, 23, 0.36)) !important;
}

html:not([data-theme="dark"]) .companion-model-viewer {
  background: transparent !important;
}

html:not([data-theme="dark"]) .character-figure img,
html:not([data-theme="dark"]) .character-xiaowen.character-figure img,
html:not([data-theme="dark"]) .character-figure.character-xiaowen img {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter:
    saturate(1.58)
    contrast(1.24)
    brightness(0.98)
    drop-shadow(1px 0 0 rgba(15, 23, 42, 0.56))
    drop-shadow(-1px 0 0 rgba(15, 23, 42, 0.56))
    drop-shadow(0 16px 22px rgba(2, 6, 23, 0.34))
    drop-shadow(0 0 12px rgba(124, 58, 237, 0.32)) !important;
}

.companion-ambient-angle {
  display: none !important;
}

.companion-ambient-bubble {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 16px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  pointer-events: auto;
  transform: translateY(12px);
}

.companion-ambient-bubble strong {
  color: #0f172a;
  font-size: 13px;
}

.companion-ambient-bubble p {
  display: -webkit-box;
  margin: 0;
  color: rgba(15, 23, 42, 0.64);
  font-size: 11px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.companion-ambient-stage[data-voice-state="speaking"] .companion-ambient-model,
.companion-ambient-stage[data-motion="point"] .companion-ambient-model {
  animation-name: companionAmbientExplain;
  animation-duration: 3.2s;
}

.companion-ambient-stage[data-voice-state="thinking"] .companion-ambient-model,
.companion-ambient-stage[data-motion="warning"] .companion-ambient-model {
  animation-name: companionAmbientThink;
  animation-duration: 3.8s;
}

.companion-ambient-stage[data-emotion="success"] .companion-ambient-model,
.companion-ambient-stage[data-emotion="happy"] .companion-ambient-model {
  animation-name: companionAmbientCelebrate;
  animation-duration: 4.2s;
}

.companion-avatar-stage::after {
  content: none !important;
  display: none !important;
}

.companion-avatar-stage::before {
  content: none !important;
  display: none !important;
}

.companion-orbit {
  display: none !important;
}

.companion-orbit-a {
  width: 108px;
  height: 108px;
  animation: companionOrbitSpin 9s linear infinite;
}

.companion-orbit-b {
  width: 82px;
  height: 82px;
  border-color: rgba(59, 130, 246, 0.28);
  animation: companionOrbitSpin 6.2s linear infinite reverse;
}

.companion-float-shadow {
  display: none !important;
}

.companion-ambient-ring {
  display: none !important;
}

.companion-dock[data-voice-state="thinking"] .companion-avatar-stage,
.companion-dock[data-emotion="thinking"] .companion-avatar-stage,
.companion-dock[data-emotion="analyzing"] .companion-avatar-stage {
  animation-name: companionThinkFloat;
  animation-duration: 3.6s;
}

.companion-dock[data-voice-state="listening"] .companion-avatar-stage {
  animation-name: companionListenFloat;
  animation-duration: 3.2s;
}

.companion-dock[data-voice-state="speaking"] .companion-avatar-stage {
  animation-name: companionTalkFloat;
  animation-duration: 2.8s;
}

.companion-dock[data-emotion="happy"] .companion-avatar-stage,
.companion-dock[data-emotion="success"] .companion-avatar-stage {
  animation-name: companionCelebrateFloat;
  animation-duration: 4.2s;
}

.companion-dock[data-motion="point"] .companion-avatar-stage img {
  transform:
    rotateY(calc(var(--companion-look-x) * 8deg - 4deg))
    rotateX(calc(var(--companion-look-y) * -5deg))
    translateX(3px)
    translateZ(22px);
}

.companion-motion-off .companion-avatar-stage,
.companion-motion-off .companion-avatar-stage img,
.companion-motion-off .companion-orbit {
  animation: none !important;
}

.companion-fullscreen .companion-panel {
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "head head"
    "character messages"
    "insight messages"
    "stage messages"
    "memory messages"
    "hud messages"
    "actions form" !important;
}

.companion-fullscreen #companionCharacterDeck {
  grid-area: character;
}

.companion-fullscreen .companion-character-deck {
  min-height: 286px;
  grid-template-columns: 220px minmax(0, 1fr);
}

.companion-fullscreen .companion-avatar-panel {
  --avatar-w: 212px;
  --avatar-h: 270px;
}

html[data-theme="dark"] .companion-character-deck,
html[data-theme="dark"] .companion-mini {
  background:
    radial-gradient(circle at 24% 16%, rgba(168, 85, 247, 0.2), transparent 42%),
    radial-gradient(circle at 86% 8%, rgba(59, 130, 246, 0.18), transparent 38%),
    rgba(15, 23, 42, 0.9) !important;
}

html[data-theme="dark"] .companion-character-copy strong {
  color: rgba(226, 232, 240, 0.92);
}

html[data-theme="dark"] .companion-character-copy p {
  color: rgba(203, 213, 225, 0.72);
}

html[data-theme="dark"] .companion-character-copy span {
  color: #c4b5fd;
  background: rgba(76, 29, 149, 0.34);
  border-color: rgba(168, 85, 247, 0.28);
}

html[data-theme="dark"] .companion-model-angle,
html[data-theme="dark"] .companion-model-controls button {
  color: #c4b5fd;
  border-color: rgba(168, 85, 247, 0.3);
  background: rgba(15, 23, 42, 0.78);
}

html[data-theme="dark"] .companion-model-controls em {
  color: rgba(203, 213, 225, 0.62);
}

html[data-theme="dark"] .companion-model-telemetry span,
html[data-theme="dark"] .companion-ambient-bubble {
  color: rgba(226, 232, 240, 0.88);
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(168, 85, 247, 0.22);
}

html[data-theme="dark"] .companion-model-telemetry b,
html[data-theme="dark"] .companion-ambient-bubble strong {
  color: #ddd6fe;
}

html[data-theme="dark"] .companion-ambient-bubble p {
  color: rgba(203, 213, 225, 0.66);
}

html[data-theme="dark"] .companion-ambient-angle {
  color: #c4b5fd;
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(168, 85, 247, 0.28);
}

html[data-theme="dark"] .companion-input-row {
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.94) 28%);
}

@keyframes companionFloat3d {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50% { transform: translateY(-8px) rotateZ(-0.6deg); }
}

@keyframes companionThinkFloat {
  0%, 100% { transform: translateY(0) rotateZ(-0.2deg); }
  45% { transform: translateY(-6px) rotateZ(0.9deg); }
  70% { transform: translateY(-3px) rotateZ(-0.6deg); }
}

@keyframes companionListenFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.012); }
}

@keyframes companionTalkFloat {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  35% { transform: translateY(-4px) rotateZ(-0.8deg); }
  70% { transform: translateY(-2px) rotateZ(0.8deg); }
}

@keyframes companionCelebrateFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-10px) scale(1.02); }
  70% { transform: translateY(-4px) scale(1.01); }
}

@keyframes companionOrbitSpin {
  from { transform: translateX(-50%) rotateX(68deg) rotateZ(0deg); }
  to { transform: translateX(-50%) rotateX(68deg) rotateZ(360deg); }
}

@keyframes companionModelRing {
  from { transform: translateX(-50%) rotateX(68deg) rotateZ(var(--model-yaw, 0deg)); }
  to { transform: translateX(-50%) rotateX(68deg) rotateZ(calc(var(--model-yaw, 0deg) + 360deg)); }
}

@keyframes companionAmbientFloat {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50% { transform: translateY(-9px) rotateZ(-0.6deg); }
}

@keyframes companionAmbientExplain {
  0%, 100% { transform: translateY(0) translateX(0) rotateZ(0deg); }
  45% { transform: translateY(-7px) translateX(4px) rotateZ(-1deg); }
  70% { transform: translateY(-3px) translateX(2px) rotateZ(0.6deg); }
}

@keyframes companionAmbientThink {
  0%, 100% { transform: translateY(0) rotateZ(-0.4deg); }
  50% { transform: translateY(-6px) rotateZ(1.1deg); }
}

@keyframes companionAmbientCelebrate {
  0%, 100% { transform: translateY(0) scale(1); }
  34% { transform: translateY(-13px) scale(1.018); }
  68% { transform: translateY(-5px) scale(1.008); }
}

@media (max-width: 1180px) {
  .companion-fullscreen .companion-panel {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "head"
      "character"
      "insight"
      "stage"
      "memory"
      "hud"
      "messages"
      "actions"
      "form" !important;
  }
}

@media (max-width: 980px) {
  .companion-ambient-stage {
    width: 170px;
    min-height: 216px;
    bottom: calc(132px + var(--safe-bottom));
    transform: scale(0.86);
    transform-origin: right bottom;
  }

  .companion-ambient-stage.companion-ambient-expanded {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 720px) {
  .companion-mini {
    width: min(276px, calc(100vw - 24px)) !important;
    min-height: 112px !important;
    grid-template-columns: 1fr !important;
  }

  .companion-avatar-mini {
    --avatar-w: 94px;
    --avatar-h: 130px;
  }

  .companion-character-deck {
    min-height: auto;
    grid-template-columns: 114px minmax(0, 1fr);
  }

  .companion-avatar-panel {
    --avatar-w: 112px;
    --avatar-h: 154px;
  }

  .companion-character-copy strong {
    font-size: 15px;
  }

  .companion-ambient-stage {
    display: grid !important;
    width: 148px;
    min-height: 190px;
    right: calc(10px + var(--safe-right));
    bottom: calc(116px + var(--safe-bottom));
    transform: scale(0.76);
    transform-origin: right bottom;
  }

  .companion-ambient-stage.companion-ambient-expanded {
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes hwCharacterBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.012); }
}

@keyframes hwCharacterWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-4px) rotate(-1.5deg); }
  70% { transform: translateY(-2px) rotate(1deg); }
}

@keyframes hwCharacterFocus {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-2px) translateX(2px); }
}

@keyframes hwCharacterCelebrate {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-5px) scale(1.025); }
  70% { transform: translateY(-2px) scale(1.01); }
}

@keyframes hwRimPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.96); }
  50% { opacity: 0.86; transform: scale(1.04); }
}

@keyframes hwHudFloat {
  0%, 100% { opacity: 0.42; transform: translateY(0) rotate(0deg); }
  50% { opacity: 0.86; transform: translateY(-7px) rotate(8deg); }
}

@media (max-width: 1180px) {
  .landing-home-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "welcome"
      "today"
      "special"
      "growth";
  }

  .landing-welcome-panel {
    grid-template-columns: 1fr;
  }

  .landing-special-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .coach-bubble.character-duo-bubble,
  .coach-companion-head,
  .report-character-summary {
    grid-template-columns: 1fr !important;
  }

  .coach-bubble.character-duo-bubble > .character-stage-duo,
  .report-character-summary > .character-stage-duo {
    min-height: 160px;
  }
}

@media (max-width: 720px) {
  .landing-home-grid {
    gap: 12px;
  }

  .landing-welcome-panel,
  .landing-today-panel,
  .landing-special-panel,
  .landing-growth-panel {
    min-height: auto;
  }

  .landing-special-grid,
  .landing-growth-grid {
    grid-template-columns: 1fr;
  }

  .landing-coach-stage {
    min-height: 116px;
    transform: scale(0.78);
  }

  .character-stage-duo {
    min-height: 116px;
  }

  .character-figure-stage {
    --figure-h: 112px;
  }
}

/* 硬问 AI 模拟面试室：保留核心功能，压低信息噪音 */
body[data-active-panel="interview"] .interview-studio {
  display: grid;
  gap: 14px;
}

body[data-active-panel="interview"] .coach-room-banner.interview-studio-head {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  margin-bottom: 0;
}

body[data-active-panel="interview"] .interview-studio-head .coach-room-persona,
body[data-active-panel="interview"] .interview-studio-head .coach-room-growth {
  min-height: 74px;
  padding: 10px 12px;
  border-color: rgba(var(--accent-rgb), 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(var(--accent-rgb), 0.08)),
    var(--glass);
}

html[data-theme="dark"] body[data-active-panel="interview"] .interview-studio-head .coach-room-persona,
html[data-theme="dark"] body[data-active-panel="interview"] .interview-studio-head .coach-room-growth {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(var(--accent-rgb), 0.1)),
    var(--glass);
}

body[data-active-panel="interview"] .interview-studio-head .coach-room-persona {
  grid-template-columns: 62px minmax(0, 1fr);
}

body[data-active-panel="interview"] .interview-studio-head .character-figure-coach {
  --figure-h: 72px;
}

body[data-active-panel="interview"] .interview-studio-head .coach-room-persona strong {
  font-size: 17px;
  line-height: 1.25;
}

body[data-active-panel="interview"] .interview-studio-head .coach-room-persona p {
  -webkit-line-clamp: 2;
}

body[data-active-panel="interview"] .interview-studio-head .coach-room-growth {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-active-panel="interview"] .interview-studio-head .coach-room-growth div {
  min-height: 54px;
  padding: 8px;
}

body[data-active-panel="interview"] .interview-main-dashboard {
  grid-template-columns: minmax(220px, 0.62fr) minmax(480px, 1.38fr) minmax(270px, 0.78fr) !important;
  gap: 14px;
  align-items: start;
  max-height: none;
}

body[data-active-panel="interview"] .interview-main-dashboard > .section-card {
  height: auto;
  min-height: 0;
}

body[data-active-panel="interview"] .interview-setup-card,
body[data-active-panel="interview"] .interview-workspace-card,
body[data-active-panel="interview"] .interview-copilot-card {
  gap: 12px;
  padding: 16px;
  border-color: rgba(var(--accent-rgb), 0.12);
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] body[data-active-panel="interview"] .interview-setup-card,
html[data-theme="dark"] body[data-active-panel="interview"] .interview-workspace-card,
html[data-theme="dark"] body[data-active-panel="interview"] .interview-copilot-card {
  background: rgba(15, 23, 42, 0.74);
}

body[data-active-panel="interview"] .interviewer-profile-card,
body[data-active-panel="interview"] .active-resume-card,
body[data-active-panel="interview"] .interview-progress-board,
body[data-active-panel="interview"] .interview-coach-strip div,
body[data-active-panel="interview"] .copilot-score-card,
body[data-active-panel="interview"] .copilot-answer-frame,
body[data-active-panel="interview"] .copilot-group,
body[data-active-panel="interview"] .copilot-followup {
  min-height: 0;
}

body[data-active-panel="interview"] .interviewer-profile-card {
  margin-bottom: 0;
  padding: 12px;
}

body[data-active-panel="interview"] #interviewForm {
  display: grid;
  gap: 10px;
}

body[data-active-panel="interview"] #interviewForm label {
  display: grid;
}

body[data-active-panel="interview"] #interviewForm input {
  min-height: 42px;
}

body[data-active-panel="interview"] #interviewResumeSource,
body[data-active-panel="interview"] #interviewQuestionSourceStatus,
body[data-active-panel="interview"] #interviewOpeningIntent,
body[data-active-panel="interview"] #analyzeWithAiBtn {
  display: none;
}

body[data-active-panel="interview"] #interviewForm .form-actions {
  display: grid;
  grid-template-columns: 1fr;
}

body[data-active-panel="interview"] .interview-left-flow {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.06);
}

body[data-active-panel="interview"] .interview-left-flow strong {
  color: var(--text);
  font-size: 13px;
}

body[data-active-panel="interview"] .interview-left-flow span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(var(--muted-rgb), 0.12);
  font-size: 12px;
  font-weight: 800;
}

html[data-theme="dark"] body[data-active-panel="interview"] .interview-left-flow span {
  background: rgba(255, 255, 255, 0.06);
}

body[data-active-panel="interview"] .interview-progress-board {
  grid-template-columns: 92px minmax(0, 1fr);
  padding: 9px 11px;
}

body[data-active-panel="interview"] .interview-progress-board p {
  display: none;
}

body[data-active-panel="interview"] .interview-coach-strip {
  display: none;
}

body[data-active-panel="interview"] .interview-workspace-card .question-box {
  min-height: 94px;
  padding: 14px;
  font-size: 17px;
  line-height: 1.62;
  border-color: rgba(var(--accent-rgb), 0.18);
  background:
    radial-gradient(circle at 98% 8%, rgba(var(--accent-rgb), 0.12), transparent 24%),
    rgba(255, 255, 255, 0.68);
}

html[data-theme="dark"] body[data-active-panel="interview"] .interview-workspace-card .question-box {
  background:
    radial-gradient(circle at 98% 8%, rgba(var(--accent-rgb), 0.18), transparent 24%),
    rgba(255, 255, 255, 0.06);
}

body[data-active-panel="interview"] .coach-floating-tip {
  margin-top: 0;
  padding: 10px 12px;
}

body[data-active-panel="interview"] .coach-floating-tip p {
  -webkit-line-clamp: 2;
}

body[data-active-panel="interview"] .interview-focus-workspace {
  display: block;
}

body[data-active-panel="interview"] .interview-answer-stack {
  display: grid;
  gap: 12px;
}

body[data-active-panel="interview"] .interview-answer-stack > .stack-list {
  order: 3;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(240px, 1.18fr);
  gap: 10px;
}

body[data-active-panel="interview"] .qa-inline-actions {
  order: 1;
}

body[data-active-panel="interview"] .interview-answer-stack .answer-block {
  order: 2;
}

body[data-active-panel="interview"] .interview-state-compact {
  order: 4;
}

body[data-active-panel="interview"] #feedbackBox {
  order: 5;
}

body[data-active-panel="interview"] .interview-answer-stack > .stack-list .stack-item {
  min-height: 62px;
  padding: 10px 12px;
}

body[data-active-panel="interview"] #voiceQualityText {
  display: none;
}

body[data-active-panel="interview"] .audio-preview {
  display: none;
  height: 34px;
  margin-top: 8px;
}

body[data-active-panel="interview"] .qa-inline-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 0.88fr;
  gap: 9px;
}

body[data-active-panel="interview"] #candidateAnswer {
  min-height: 116px;
  max-height: 150px;
  font-size: 16px;
  line-height: 1.65;
}

body[data-active-panel="interview"] .interview-state-compact {
  display: grid !important;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 10px;
}

body[data-active-panel="interview"] .interview-state-compact .stack-item {
  min-height: 72px;
  padding: 10px 12px;
}

body[data-active-panel="interview"] .interview-state-compact .stack-item:nth-child(2),
body[data-active-panel="interview"] .interview-state-compact .stack-item:nth-child(4),
body[data-active-panel="interview"] .interview-state-compact .stack-item:nth-child(5) {
  display: none;
}

body[data-active-panel="interview"] .interview-answer-stack .feedback-box {
  min-height: 72px;
  max-height: 132px;
  overflow-y: auto;
}

body[data-active-panel="interview"] .copilot-panel {
  gap: 12px;
}

body[data-active-panel="interview"] .copilot-score-card,
body[data-active-panel="interview"] .copilot-answer-frame,
body[data-active-panel="interview"] .copilot-group,
body[data-active-panel="interview"] .copilot-followup {
  padding: 12px;
}

body[data-active-panel="interview"] .copilot-score-card strong {
  font-size: 32px;
}

body[data-active-panel="interview"] .copilot-list {
  max-height: 118px;
  overflow-y: auto;
}

body[data-active-panel="interview"] #copilotRuleTree {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-active-panel="interview"] #interviewProgressStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body[data-active-panel="interview"] #interviewProgressStats div {
  min-height: 62px;
  padding: 10px;
}

@media (max-width: 1280px) {
  body[data-active-panel="interview"] .interview-main-dashboard {
    grid-template-columns: minmax(220px, 0.72fr) minmax(460px, 1.28fr);
  }

  body[data-active-panel="interview"] .interview-copilot-card {
    grid-column: 1 / -1;
  }

  body[data-active-panel="interview"] .copilot-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  body[data-active-panel="interview"] .copilot-answer-frame,
  body[data-active-panel="interview"] .copilot-followup {
    grid-column: span 1;
  }
}

@media (max-width: 920px) {
  body[data-active-panel="interview"] .coach-room-banner.interview-studio-head,
  body[data-active-panel="interview"] .interview-main-dashboard,
  body[data-active-panel="interview"] .copilot-panel,
  body[data-active-panel="interview"] .interview-answer-stack > .stack-list,
  body[data-active-panel="interview"] .interview-state-compact {
    grid-template-columns: 1fr !important;
  }

  body[data-active-panel="interview"] .qa-inline-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  body[data-active-panel="interview"] .interview-studio-head .coach-room-persona {
    grid-template-columns: 1fr;
  }

  body[data-active-panel="interview"] .coach-room-growth {
    grid-template-columns: 1fr;
  }

  body[data-active-panel="interview"] .qa-inline-actions {
    grid-template-columns: 1fr;
  }
}

/* 硬问 UI 8.5 - 实色图像渲染：浅色模式下人物与 Logo 不再被透明通道洗掉 */
.shell .sidebar .brand-logo,
.ios-app .brand-logo,
.compact-shell .brand-logo,
html[data-theme="dark"] .brand-logo,
html[data-theme="light"] .brand-logo {
  box-sizing: border-box !important;
  padding: 5px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, #081426 0%, #0b1730 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(2, 6, 23, 0.24),
    0 0 18px rgba(255, 59, 48, 0.18) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter:
    saturate(1.65)
    contrast(1.2)
    brightness(1.08)
    drop-shadow(0 0 8px rgba(255, 59, 48, 0.3)) !important;
}

.character-figure img,
.character-xiaowen.character-figure img,
.character-figure.character-xiaowen img,
.companion-avatar-stage img,
.companion-mini .companion-avatar-stage img,
.companion-panel .companion-avatar-stage img,
.companion-ambient-model img,
#companionPanelCharacter,
#companionAmbientCharacter,
#companionMiniCharacter {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  image-rendering: auto !important;
  filter:
    saturate(1.68)
    contrast(1.26)
    brightness(1.02)
    drop-shadow(1px 0 0 rgba(15, 23, 42, 0.58))
    drop-shadow(-1px 0 0 rgba(15, 23, 42, 0.5))
    drop-shadow(0 1px 0 rgba(15, 23, 42, 0.5))
    drop-shadow(0 18px 22px rgba(2, 6, 23, 0.34))
    drop-shadow(0 0 16px rgba(124, 58, 237, 0.26)) !important;
}

.character-stage-duo,
.companion-model-viewer,
.companion-ambient-model {
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(124, 58, 237, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.9)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.58),
    0 18px 40px rgba(15, 23, 42, 0.13) !important;
}

.companion-ambient-model {
  border-radius: 18px !important;
}

.companion-avatar-stage::after,
.companion-avatar-stage::before,
.companion-mini::before,
.companion-character-deck::before {
  opacity: 0.16 !important;
  mix-blend-mode: normal !important;
}

.character-rim-light {
  opacity: 0.34 !important;
  mix-blend-mode: normal !important;
  filter: blur(12px) !important;
}

html[data-theme="dark"] .character-stage-duo,
html[data-theme="dark"] .companion-model-viewer,
html[data-theme="dark"] .companion-ambient-model {
  border-color: rgba(124, 58, 237, 0.22) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(124, 58, 237, 0.2), transparent 45%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 22px 48px rgba(2, 6, 23, 0.42) !important;
}

html[data-theme="dark"] .character-figure img,
html[data-theme="dark"] .companion-avatar-stage img,
html[data-theme="dark"] .companion-ambient-model img,
html[data-theme="dark"] #companionPanelCharacter,
html[data-theme="dark"] #companionAmbientCharacter,
html[data-theme="dark"] #companionMiniCharacter {
  filter:
    saturate(1.5)
    contrast(1.18)
    brightness(1.05)
    drop-shadow(0 18px 24px rgba(2, 6, 23, 0.5))
    drop-shadow(0 0 18px rgba(168, 85, 247, 0.34)) !important;
}

/* 硬问 UI 8.6 - 小问无透明主视觉：浅色模式也使用实体暗场，不再出现“透明人物” */
.character-stage-duo,
.companion-model-viewer,
.companion-ambient-model,
html:not([data-theme="dark"]) .character-stage-duo,
html:not([data-theme="dark"]) .companion-model-viewer,
html:not([data-theme="dark"]) .companion-ambient-model {
  overflow: hidden !important;
  border: 1px solid rgba(30, 41, 59, 0.18) !important;
  background:
    radial-gradient(circle at 56% 24%, rgba(124, 58, 237, 0.22), transparent 38%),
    linear-gradient(180deg, #0d1428 0%, #111a33 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 42px rgba(15, 23, 42, 0.18) !important;
}

.character-figure img,
.character-xiaowen.character-figure img,
.character-figure.character-xiaowen img,
.companion-avatar-stage img,
.companion-mini .companion-avatar-stage img,
.companion-panel .companion-avatar-stage img,
.companion-ambient-model img,
#companionPanelCharacter,
#companionAmbientCharacter,
#companionMiniCharacter,
html:not([data-theme="dark"]) .character-figure img,
html:not([data-theme="dark"]) .character-xiaowen.character-figure img,
html:not([data-theme="dark"]) .character-figure.character-xiaowen img,
html:not([data-theme="dark"]) .companion-ambient-model img,
html:not([data-theme="dark"]) .companion-model-viewer #companionPanelCharacter {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background: #0d1428 !important;
  border-radius: 8px !important;
  filter:
    saturate(1.32)
    contrast(1.16)
    brightness(1.08)
    drop-shadow(0 14px 18px rgba(2, 6, 23, 0.42)) !important;
}

.character-rim-light,
.character-stage-duo::before,
.companion-avatar-stage::after,
.companion-avatar-stage::before,
.companion-mini::before,
.companion-character-deck::before {
  opacity: 0 !important;
  display: none !important;
}

/* 硬问 UI 8.7 - 去除小问黑色方框：人物实心、背景透明、只保留轻阴影 */
.character-stage-duo,
.companion-model-viewer,
.companion-ambient-model,
html:not([data-theme="dark"]) .character-stage-duo,
html:not([data-theme="dark"]) .companion-model-viewer,
html:not([data-theme="dark"]) .companion-ambient-model,
html[data-theme="dark"] .character-stage-duo,
html[data-theme="dark"] .companion-model-viewer,
html[data-theme="dark"] .companion-ambient-model {
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.character-figure img,
.character-xiaowen.character-figure img,
.character-figure.character-xiaowen img,
.companion-avatar-stage img,
.companion-mini .companion-avatar-stage img,
.companion-panel .companion-avatar-stage img,
.companion-ambient-model img,
#companionPanelCharacter,
#companionAmbientCharacter,
#companionMiniCharacter,
html:not([data-theme="dark"]) .character-figure img,
html:not([data-theme="dark"]) .character-xiaowen.character-figure img,
html:not([data-theme="dark"]) .character-figure.character-xiaowen img,
html:not([data-theme="dark"]) .companion-ambient-model img,
html:not([data-theme="dark"]) .companion-model-viewer #companionPanelCharacter,
html[data-theme="dark"] .character-figure img,
html[data-theme="dark"] .companion-avatar-stage img,
html[data-theme="dark"] .companion-ambient-model img,
html[data-theme="dark"] #companionPanelCharacter,
html[data-theme="dark"] #companionAmbientCharacter,
html[data-theme="dark"] #companionMiniCharacter {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter:
    saturate(1.72)
    contrast(1.28)
    brightness(1.02)
    drop-shadow(1px 0 0 rgba(15, 23, 42, 0.78))
    drop-shadow(-1px 0 0 rgba(15, 23, 42, 0.66))
    drop-shadow(0 1px 0 rgba(15, 23, 42, 0.62))
    drop-shadow(0 16px 22px rgba(15, 23, 42, 0.28))
    drop-shadow(0 0 14px rgba(124, 58, 237, 0.28)) !important;
}

.companion-ambient-model {
  width: 176px !important;
  height: 238px !important;
}

.companion-ambient-model img {
  max-width: 150% !important;
}

/* 硬问 UI 8.8 - 小问实心层轻量出场：不遮挡主内容，不再像大贴片盖住卡片 */
.companion-ambient-stage,
html:not([data-theme="dark"]) .companion-ambient-stage,
html[data-theme="dark"] .companion-ambient-stage {
  right: calc(20px + var(--safe-right)) !important;
  bottom: calc(104px + var(--safe-bottom)) !important;
  width: 176px !important;
  min-height: 250px !important;
  opacity: 1 !important;
}

.companion-ambient-model,
html:not([data-theme="dark"]) .companion-ambient-model,
html[data-theme="dark"] .companion-ambient-model {
  width: 152px !important;
  height: 236px !important;
  filter:
    drop-shadow(0 14px 18px rgba(15, 23, 42, 0.2))
    drop-shadow(0 0 12px rgba(124, 58, 237, 0.18)) !important;
}

.companion-ambient-model img,
#companionAmbientCharacter,
html:not([data-theme="dark"]) .companion-ambient-model img,
html[data-theme="dark"] .companion-ambient-model img {
  max-width: 128% !important;
  transform:
    rotateY(calc(var(--companion-look-x) * 5deg))
    rotateX(calc(var(--companion-look-y) * -3deg))
    translateY(-2px)
    translateZ(18px) !important;
}

.companion-ambient-model .companion-live2d-canvas,
html:not([data-theme="dark"]) .companion-ambient-model .companion-live2d-canvas,
html[data-theme="dark"] .companion-ambient-model .companion-live2d-canvas {
  left: 0 !important;
  bottom: 0 !important;
  width: 152px !important;
  height: 236px !important;
  max-width: 152px !important;
  max-height: 236px !important;
  transform: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  filter:
    saturate(1.02)
    contrast(1.06)
    brightness(1)
    drop-shadow(0 14px 18px rgba(15, 23, 42, 0.26)) !important;
}

/* 硬问 UI 8.9 - 小问本色渲染：取消紫色染色，只保留清晰轮廓和真实阴影 */
.character-figure img,
.character-xiaowen.character-figure img,
.character-figure.character-xiaowen img,
.companion-avatar-stage img,
.companion-mini .companion-avatar-stage img,
.companion-panel .companion-avatar-stage img,
.companion-ambient-model img,
#companionPanelCharacter,
#companionAmbientCharacter,
#companionMiniCharacter,
html:not([data-theme="dark"]) .character-figure img,
html:not([data-theme="dark"]) .character-xiaowen.character-figure img,
html:not([data-theme="dark"]) .character-figure.character-xiaowen img,
html:not([data-theme="dark"]) .companion-ambient-model img,
html[data-theme="dark"] .character-figure img,
html[data-theme="dark"] .companion-ambient-model img,
html[data-theme="dark"] #companionAmbientCharacter,
html[data-theme="dark"] #companionMiniCharacter {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  filter:
    saturate(1.02)
    contrast(1.06)
    brightness(1)
    drop-shadow(1px 0 0 rgba(15, 23, 42, 0.82))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.42))
    drop-shadow(0 1px 0 rgba(15, 23, 42, 0.55))
    drop-shadow(0 14px 18px rgba(15, 23, 42, 0.28)) !important;
}

.character-rim-light,
.companion-avatar-stage::after,
.companion-avatar-stage::before,
.companion-mini::before,
.companion-character-deck::before {
  opacity: 0 !important;
  display: none !important;
}

/* 硬问 UI 9.0 - 静态人物贴图退场：只保留真实 Live2D 小问和品牌 Logo */
.character-figure,
.character-stage-duo,
.character-badge .character-figure,
.character-speech-bubble .character-figure,
.character-empty-state .character-figure,
.report-character-summary .character-figure,
.interviewer-avatar .character-figure,
.coach-room-persona > .character-figure,
.feature-character-card .feature-icon .character-figure {
  display: none !important;
}

.character-badge,
.character-speech-bubble,
.character-empty-state,
.report-character-summary,
.coach-companion-head {
  grid-template-columns: minmax(0, 1fr) !important;
}

.character-empty-state,
.report-character-summary {
  min-height: auto !important;
}

/* 硬问 UI 10.0 - 顶部栏极简化：页面标题 / 全局搜索 / 工程提示 */
.topbar,
html[data-theme="light"] .topbar {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(260px, 460px) minmax(120px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-radius: 8px;
}

.topbar-left,
.topbar-title-stack,
.topbar-center,
.topbar-right {
  min-width: 0;
}

.topbar-title-stack {
  display: block;
}

.topbar h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
}

.topbar-center {
  display: flex;
  justify-content: center;
}

.topbar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.topbar-search {
  width: 100%;
  min-width: 0;
}

.topbar-search span {
  display: none;
}

.topbar-search input {
  width: 100%;
  min-height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
}

.topbar-ai-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: 999px;
  color: #0f766e;
  background: rgba(236, 253, 245, 0.72);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.topbar-ai-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}

.topbar-user-wrap {
  position: relative;
  display: inline-flex;
}

.topbar-user-trigger {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 11px 4px 5px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  cursor: pointer;
}

.topbar-user-trigger strong {
  max-width: 92px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-user-avatar {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.topbar-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  min-width: 148px;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(18px);
}

.topbar-user-menu button {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  color: #0f172a;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.topbar-user-menu button:hover {
  background: rgba(59, 130, 246, 0.1);
}

.topbar-user-menu button[data-topbar-user-action="logout"] {
  color: #dc2626;
}

html[data-theme="dark"] .topbar h2 {
  color: #f8fafc;
}

html[data-theme="dark"] .topbar-search input {
  color: rgba(226, 232, 240, 0.94);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
}

html[data-theme="dark"] .topbar-ai-status {
  color: #bbf7d0;
  border-color: rgba(16, 185, 129, 0.22);
  background: rgba(6, 78, 59, 0.36);
}

html[data-theme="dark"] .topbar-user-trigger {
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.72);
}

html[data-theme="dark"] .topbar-user-menu {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.96);
}

html[data-theme="dark"] .topbar-user-menu button {
  color: #e5e7eb;
}

html[data-theme="dark"] .topbar-user-menu button:hover {
  background: rgba(59, 130, 246, 0.16);
}

html[data-theme="dark"] .topbar-user-menu button[data-topbar-user-action="logout"] {
  color: #fca5a5;
}

@media (max-width: 900px) {
  .topbar,
  html[data-theme="light"] .topbar {
    grid-template-columns: 1fr;
  }

  .topbar-center,
  .topbar-right {
    justify-content: flex-start;
  }
}

/* HW Stage 8 - unified card and data surface system */
:root {
  --hw-card-radius: 8px;
  --hw-card-border-glow: rgba(var(--brand-rgb), 0.14);
  --hw-card-shadow-soft: 0 14px 34px rgba(15, 23, 42, 0.07);
  --hw-card-shadow-hover: 0 18px 42px rgba(var(--brand-rgb), 0.13);
  --hw-card-glass: rgba(255, 255, 255, 0.72);
  --hw-card-glass-strong: rgba(255, 255, 255, 0.86);
}

.brand,
.topbar,
.hero-card,
.info-card,
.section-card,
.metric-card,
.landing-coach-card,
.landing-special-card,
.dashboard-focus-card,
.dashboard-donut-card,
.dashboard-radar-card,
.stack-item,
.question-card,
.report-card,
.feedback-box,
.question-box,
.empty-box,
.pipeline-step,
.theme-settings-card,
.settings-side-card,
.modal-card,
.account-modal-card,
.companion-panel,
.companion-brief-card,
.saved-account-item,
.audio-dialogue-summary,
.audio-dialogue-timeline,
.audio-report-digest,
.copilot-panel,
.copilot-score-card,
.interviewer-profile-card,
.active-resume-card {
  overflow: hidden;
  border: 1px solid var(--hw-card-border-glow) !important;
  border-radius: var(--hw-card-radius) !important;
  background:
    linear-gradient(180deg, var(--hw-card-glass-strong), var(--hw-card-glass)),
    radial-gradient(circle at 12% 0%, rgba(var(--brand-rgb), 0.08), transparent 38%),
    radial-gradient(circle at 92% 8%, rgba(124, 58, 237, 0.06), transparent 34%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.42) inset,
    var(--hw-card-shadow-soft) !important;
  backdrop-filter: blur(18px);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.hero-card:hover,
.info-card:hover,
.section-card:hover,
.metric-card:hover,
.landing-special-card:hover,
.stack-item:hover,
.question-card:hover,
.report-card:hover,
.saved-account-item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-rgb), 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.16) inset,
    var(--hw-card-shadow-hover) !important;
}

.section-head,
.card-head,
.stack-item + .stack-item,
.report-card + .report-card,
.question-card + .question-card,
.saved-account-item + .saved-account-item {
  border-color: rgba(148, 163, 184, 0.1) !important;
}

.stack-list,
.question-list,
.report-list,
.admin-action-list,
.admin-weakness-list,
.saved-account-list {
  gap: 10px;
}

.pipeline-grid,
.metric-grid,
.section-grid,
.hero-grid,
.dashboard-workbench-grid,
.landing-home-grid {
  gap: 16px;
}

table,
.data-table,
.report-table,
.audio-table {
  overflow: hidden;
  border: 1px solid rgba(var(--brand-rgb), 0.12) !important;
  border-radius: var(--hw-card-radius) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.36) inset,
    0 12px 28px rgba(15, 23, 42, 0.055) !important;
  border-collapse: separate;
  border-spacing: 0;
}

table th,
table td,
.data-table th,
.data-table td,
.report-table th,
.report-table td,
.audio-table th,
.audio-table td {
  border-color: rgba(148, 163, 184, 0.09) !important;
}

table th,
.data-table th,
.report-table th,
.audio-table th {
  background: rgba(248, 250, 252, 0.58) !important;
  font-weight: 800;
}

tbody tr:hover > td,
.data-table tbody tr:hover > td,
.report-table tbody tr:hover > td,
.audio-table tbody tr:hover > td {
  background: rgba(var(--brand-rgb), 0.07) !important;
}

.section-card > .section-head,
.section-card > header,
.section-card .card-head,
.modal-card .card-head,
.account-modal-card .card-head {
  border-color: rgba(148, 163, 184, 0.1) !important;
}

html[data-theme="dark"] {
  --hw-card-border-glow: rgba(96, 165, 250, 0.18);
  --hw-card-shadow-soft: 0 16px 42px rgba(2, 6, 23, 0.3);
  --hw-card-shadow-hover: 0 20px 54px rgba(59, 130, 246, 0.16);
  --hw-card-glass: rgba(15, 23, 42, 0.62);
  --hw-card-glass-strong: rgba(15, 23, 42, 0.82);
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .landing-coach-card,
html[data-theme="dark"] .landing-special-card,
html[data-theme="dark"] .dashboard-focus-card,
html[data-theme="dark"] .dashboard-donut-card,
html[data-theme="dark"] .dashboard-radar-card,
html[data-theme="dark"] .stack-item,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .feedback-box,
html[data-theme="dark"] .question-box,
html[data-theme="dark"] .empty-box,
html[data-theme="dark"] .pipeline-step,
html[data-theme="dark"] .theme-settings-card,
html[data-theme="dark"] .settings-side-card,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .account-modal-card,
html[data-theme="dark"] .companion-panel,
html[data-theme="dark"] .companion-brief-card,
html[data-theme="dark"] .saved-account-item,
html[data-theme="dark"] .audio-dialogue-summary,
html[data-theme="dark"] .audio-dialogue-timeline,
html[data-theme="dark"] .audio-report-digest,
html[data-theme="dark"] .copilot-panel,
html[data-theme="dark"] .copilot-score-card,
html[data-theme="dark"] .interviewer-profile-card,
html[data-theme="dark"] .active-resume-card {
  background:
    linear-gradient(180deg, var(--hw-card-glass-strong), var(--hw-card-glass)),
    radial-gradient(circle at 12% 0%, rgba(var(--brand-rgb), 0.15), transparent 40%),
    radial-gradient(circle at 92% 8%, rgba(124, 58, 237, 0.12), transparent 36%) !important;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.1) inset,
    var(--hw-card-shadow-soft) !important;
}

/* HW Stage 9 - unified button system */
:root {
  --hw-button-radius: 8px;
  --hw-button-primary-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 58%, #ef5f7a 100%);
  --hw-button-ai-gradient:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.42), transparent 32%),
    linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --hw-button-glass: rgba(255, 255, 255, 0.64);
  --hw-button-glass-strong: rgba(255, 255, 255, 0.84);
  --hw-button-border: rgba(148, 163, 184, 0.24);
  --hw-button-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
  --hw-button-shadow-hover: 0 14px 32px rgba(37, 99, 235, 0.24);
}

.primary-btn,
.ghost-btn,
.danger-btn,
.small-btn,
.launch-primary-btn,
.launch-secondary-btn,
.dashboard-main-cta,
.topbar-create-btn,
.full-width-btn,
.toolbar button,
.question-source-tabs button,
.debug-case-tabs button,
.waveform-case-tabs button,
.knowledge-node button,
button.knowledge-node,
.companion-model-controls button,
.companion-action-btn,
.companion-message button,
.companion-input-row button,
.topbar-user-trigger {
  border-radius: var(--hw-button-radius) !important;
  font-weight: 900;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.primary-btn,
.launch-primary-btn,
.dashboard-main-cta,
.topbar-create-btn,
.full-width-btn,
.question-source-tabs button.active,
.debug-case-tabs button.active,
.waveform-case-tabs button.active,
.knowledge-node.training {
  border-color: transparent !important;
  color: #ffffff !important;
  background: var(--hw-button-primary-gradient) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    var(--hw-button-shadow) !important;
}

.primary-btn:not(:disabled):hover,
.launch-primary-btn:not(:disabled):hover,
.dashboard-main-cta:not(:disabled):hover,
.topbar-create-btn:not(:disabled):hover,
.full-width-btn:not(:disabled):hover,
.question-source-tabs button.active:not(:disabled):hover,
.debug-case-tabs button.active:not(:disabled):hover,
.waveform-case-tabs button.active:not(:disabled):hover,
.knowledge-node.training:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    var(--hw-button-shadow-hover),
    0 0 24px rgba(124, 58, 237, 0.22) !important;
}

.ghost-btn,
.launch-secondary-btn,
.small-btn,
.toolbar button,
.question-source-tabs button,
.debug-case-tabs button,
.waveform-case-tabs button,
.knowledge-node button,
button.knowledge-node,
.companion-model-controls button,
.topbar-user-trigger {
  color: var(--text) !important;
  border-color: var(--hw-button-border) !important;
  background:
    linear-gradient(180deg, var(--hw-button-glass-strong), var(--hw-button-glass)),
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), 0.08), transparent 38%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.36) inset,
    0 8px 18px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(14px);
}

.ghost-btn:not(:disabled):hover,
.launch-secondary-btn:not(:disabled):hover,
.small-btn:not(:disabled):hover,
.toolbar button:not(:disabled):hover,
.question-source-tabs button:not(:disabled):hover,
.debug-case-tabs button:not(:disabled):hover,
.waveform-case-tabs button:not(:disabled):hover,
.knowledge-node button:not(:disabled):hover,
button.knowledge-node:not(:disabled):hover,
.companion-model-controls button:not(:disabled):hover,
.topbar-user-trigger:not(:disabled):hover {
  transform: translateY(-1px);
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), 0.34) !important;
  box-shadow:
    0 0 0 1px rgba(147, 197, 253, 0.2) inset,
    0 12px 26px rgba(37, 99, 235, 0.12) !important;
}

.companion-action-btn,
.companion-message button,
.companion-input-row button {
  overflow: hidden;
  border-color: transparent !important;
  color: #ffffff !important;
  background: var(--hw-button-ai-gradient) !important;
  box-shadow:
    0 0 0 1px rgba(147, 197, 253, 0.28) inset,
    0 12px 30px rgba(59, 130, 246, 0.24),
    0 0 22px rgba(124, 58, 237, 0.2) !important;
  animation: hw-ai-button-glow 3.8s ease-in-out infinite;
}

.companion-action-btn:not(:disabled):hover,
.companion-message button:not(:disabled):hover,
.companion-input-row button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28) inset,
    0 16px 36px rgba(59, 130, 246, 0.28),
    0 0 30px rgba(124, 58, 237, 0.28) !important;
}

.danger-btn {
  color: var(--danger) !important;
  border-color: rgba(var(--danger-rgb), 0.32) !important;
  background: linear-gradient(180deg, rgba(var(--danger-rgb), 0.1), rgba(255, 255, 255, 0.58)) !important;
  box-shadow: 0 8px 18px rgba(var(--danger-rgb), 0.08) !important;
}

.danger-btn:not(:disabled):hover {
  transform: translateY(-1px);
  color: #ffffff !important;
  border-color: rgba(var(--danger-rgb), 0.62) !important;
  background: linear-gradient(135deg, var(--danger), var(--danger-deep)) !important;
  box-shadow: 0 12px 26px rgba(var(--danger-rgb), 0.18) !important;
}

button:disabled,
.primary-btn:disabled,
.ghost-btn:disabled,
.danger-btn:disabled,
.small-btn:disabled,
.launch-primary-btn:disabled,
.launch-secondary-btn:disabled {
  transform: none !important;
  opacity: 0.54;
  box-shadow: none !important;
  cursor: not-allowed;
}

html[data-theme="dark"] {
  --hw-button-glass: rgba(15, 23, 42, 0.52);
  --hw-button-glass-strong: rgba(30, 41, 59, 0.72);
  --hw-button-border: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .ghost-btn,
html[data-theme="dark"] .launch-secondary-btn,
html[data-theme="dark"] .small-btn,
html[data-theme="dark"] .toolbar button,
html[data-theme="dark"] .question-source-tabs button,
html[data-theme="dark"] .debug-case-tabs button,
html[data-theme="dark"] .waveform-case-tabs button,
html[data-theme="dark"] .knowledge-node button,
html[data-theme="dark"] button.knowledge-node,
html[data-theme="dark"] .companion-model-controls button,
html[data-theme="dark"] .topbar-user-trigger {
  color: #e5e7eb !important;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.78), rgba(15, 23, 42, 0.56)),
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), 0.12), transparent 38%) !important;
}

@keyframes hw-ai-button-glow {
  0%,
  100% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(1.12) brightness(1.05);
  }
}

/* HW Stage 13/14 - unified motion + three-mode theme system */
:root {
  --hw-motion-fast: 160ms;
  --hw-motion-normal: 240ms;
  --hw-motion-slow: 420ms;
  --hw-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.panel,
.section-card,
.hero-card,
.info-card,
.metric-card,
.dashboard-focus-card,
.dashboard-mini-card,
.theme-settings-card,
.companion-mini,
.companion-panel {
  animation: hw-panel-enter var(--hw-motion-slow) var(--hw-motion-ease) both;
  transition:
    transform var(--hw-motion-fast) var(--hw-motion-ease),
    box-shadow var(--hw-motion-fast) var(--hw-motion-ease),
    border-color var(--hw-motion-fast) var(--hw-motion-ease),
    background var(--hw-motion-normal) var(--hw-motion-ease);
}

.section-card:hover,
.hero-card:hover,
.info-card:hover,
.metric-card:hover,
.dashboard-focus-card:hover,
.dashboard-mini-card:hover,
.theme-settings-card:hover {
  transform: translateY(-2px);
}

button,
.menu-item,
.launch-primary-btn,
.launch-secondary-btn,
.small-btn,
.ghost-btn,
.primary-btn {
  transition:
    transform var(--hw-motion-fast) var(--hw-motion-ease),
    box-shadow var(--hw-motion-fast) var(--hw-motion-ease),
    border-color var(--hw-motion-fast) var(--hw-motion-ease),
    background var(--hw-motion-normal) var(--hw-motion-ease),
    color var(--hw-motion-fast) var(--hw-motion-ease);
}

button:not(:disabled):hover,
.menu-item:hover,
.launch-primary-btn:hover,
.launch-secondary-btn:hover,
.small-btn:hover,
.ghost-btn:hover,
.primary-btn:hover {
  transform: translateY(-1px);
}

.companion-mini,
.companion-panel,
.companion-ambient-stage,
.floating-companion-window {
  animation: hw-ai-appear 360ms var(--hw-motion-ease) both;
}

html[data-theme-mode="ai-night"] {
  --bg: #020617;
  --bg-strong: #07111f;
  --panel: rgba(15, 23, 42, 0.92);
  --panel-soft: rgba(8, 13, 30, 0.84);
  --line: rgba(129, 140, 248, 0.2);
  --line-strong: rgba(167, 139, 250, 0.28);
  --brand: #60a5fa;
  --brand-rgb: 96, 165, 250;
  --accent: #a78bfa;
  --accent-rgb: 167, 139, 250;
  --shadow: 0 22px 58px rgba(2, 6, 23, 0.38);
  --shadow-soft: 0 14px 34px rgba(2, 6, 23, 0.28);
}

html[data-theme-mode="ai-night"] body {
  background:
    radial-gradient(circle at 78% 6%, rgba(var(--brand-rgb), 0.2) 0%, transparent 32%),
    radial-gradient(circle at 14% 18%, rgba(var(--accent-rgb), 0.18) 0%, transparent 34%),
    linear-gradient(180deg, #020617 0%, #07111f 54%, #0b1020 100%);
}

html[data-theme-mode="ai-night"] .theme-option:has(input:checked),
html[data-theme-mode="ai-night"] .topbar-ai-status,
html[data-theme-mode="ai-night"] .companion-mini,
html[data-theme-mode="ai-night"] .companion-panel {
  box-shadow:
    var(--shadow-soft),
    0 0 28px rgba(var(--accent-rgb), 0.14);
}

@keyframes hw-panel-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hw-ai-appear {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

html.react-student-embedded,
html.react-student-embedded body {
  background: transparent !important;
  overflow: hidden !important;
}

html.react-student-embedded .shell {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 100vh !important;
}

html.react-student-embedded .sidebar,
html.react-student-embedded .topbar,
html.react-student-embedded #runtimeStatusStrip,
html.react-student-embedded #globalNotice,
html.react-student-embedded #companionAmbientStage,
html.react-student-embedded #companionDock,
html.react-student-embedded #companionPanel,
html.react-student-embedded #companionMiniBubble,
html.react-student-embedded #accountModal,
html.react-student-embedded .modal-backdrop,
html.react-student-embedded .mobile-action-dock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.react-student-embedded .main {
  min-height: 100vh !important;
  padding: 0 !important;
}

html.react-student-embedded .panel,
html.react-student-embedded .section-card,
html.react-student-embedded .hero-card,
html.react-student-embedded .info-card,
html.react-student-embedded .metric-card {
  animation: none !important;
  transition: none !important;
}

/* HW sidebar transparent logo - background follows the navigation rail */
.shell .sidebar .brand,
.ios-app .brand,
.compact-shell .brand {
  padding: 22px 24px 18px !important;
}

.shell .sidebar .brand-head,
.ios-app .brand-head,
.compact-shell .brand-head,
html[data-theme="dark"] .shell .sidebar .brand-head,
html[data-theme="light"] .shell .sidebar .brand-head {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shell .sidebar .brand-logo,
.ios-app .brand-logo,
.compact-shell .brand-logo,
html[data-theme="dark"] .brand-logo,
html[data-theme="light"] .brand-logo {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 560 / 154 !important;
  object-fit: contain !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 12px 24px rgba(2, 6, 23, 0.22)) !important;
}

/* HW sidebar original logo cutout - preserve approved typography and red/orange mark */
.shell .sidebar .brand-logo,
.ios-app .brand-logo,
.compact-shell .brand-logo,
html[data-theme="dark"] .brand-logo,
html[data-theme="light"] .brand-logo {
  aspect-ratio: 471 / 216 !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 10px 20px rgba(2, 6, 23, 0.2)) !important;
}

/* HW sidebar logo scale - make original subtitle readable */
.shell .sidebar .brand,
.ios-app .brand,
.compact-shell .brand {
  padding: 24px 18px 18px !important;
}

.shell .sidebar .brand-logo,
.ios-app .brand-logo,
.compact-shell .brand-logo,
html[data-theme="dark"] .brand-logo,
html[data-theme="light"] .brand-logo {
  width: 112% !important;
  max-width: none !important;
  transform: translateX(-6%) !important;
  transform-origin: left center !important;
}

/* HW sidebar structured brand - crisp text on low-resolution screens */
.shell .sidebar .brand,
.ios-app .brand,
.compact-shell .brand {
  padding: 26px 22px 20px !important;
}

.shell .sidebar .brand-head--structured,
.ios-app .brand-head--structured,
.compact-shell .brand-head--structured,
html[data-theme="dark"] .shell .sidebar .brand-head--structured,
html[data-theme="light"] .shell .sidebar .brand-head--structured {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shell .sidebar .brand-logo.brand-logo-mark,
.ios-app .brand-logo.brand-logo-mark,
.compact-shell .brand-logo.brand-logo-mark,
html[data-theme="dark"] .brand-logo.brand-logo-mark,
html[data-theme="light"] .brand-logo.brand-logo-mark {
  width: 66px !important;
  height: 54px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  transform: none !important;
  filter:
    saturate(1.12)
    contrast(1.08)
    drop-shadow(0 8px 16px rgba(255, 49, 49, 0.16))
    drop-shadow(0 10px 20px rgba(2, 6, 23, 0.18)) !important;
}

.brand-text-lockup {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
}

.brand-text-lockup strong {
  color: #f8fafc;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 8px 18px rgba(2, 6, 23, 0.28);
}

.brand-text-lockup span {
  color: rgba(248, 250, 252, 0.76);
  font-size: 9.5px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.24em;
  white-space: nowrap;
}

.brand-text-lockup em {
  display: block;
  margin-top: 6px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 9.5px;
  line-height: 1.35;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.shell .sidebar .brand-head--main,
.ios-app .brand-head--main,
.compact-shell .brand-head--main,
html[data-theme="dark"] .shell .sidebar .brand-head--main,
html[data-theme="light"] .shell .sidebar .brand-head--main {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shell .sidebar .brand-logo.brand-main-logo,
.ios-app .brand-logo.brand-main-logo,
.compact-shell .brand-logo.brand-main-logo,
html[data-theme="dark"] .brand-logo.brand-main-logo,
html[data-theme="light"] .brand-logo.brand-main-logo {
  position: relative !important;
  z-index: 1 !important;
  width: 112% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 471 / 158 !important;
  object-fit: contain !important;
  transform: translateX(-6%) !important;
  filter:
    saturate(1.08)
    contrast(1.05)
    drop-shadow(0 10px 20px rgba(2, 6, 23, 0.22)) !important;
}

.brand-subtitle-text {
  position: relative;
  z-index: 1;
  width: 112%;
  transform: translateX(-6%);
  margin-top: 8px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 9.8px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* AI Workspace Navigation: collapsed rail, hover/focus expansion */
@media (min-width: 900px) {
  html:not(.react-student-embedded) .shell {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    transition: grid-template-columns 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  html:not(.react-student-embedded) .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) .sidebar,
  html:not(.react-student-embedded) html[data-theme="dark"] .sidebar,
  html:not(.react-student-embedded) html[data-theme="light"] .sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: hidden !important;
    padding: 18px 10px 14px !important;
    transition:
      padding 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 220ms ease,
      background 220ms ease !important;
  }

  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .sidebar,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .sidebar {
    padding: 18px 16px 14px !important;
    overflow-x: visible !important;
    box-shadow: 16px 0 44px rgba(2, 6, 23, 0.22) !important;
  }

  html:not(.react-student-embedded) .brand {
    padding: 0 0 18px !important;
  }

  html:not(.react-student-embedded) .brand-head--main,
  html[data-theme="dark"]:not(.react-student-embedded) .shell .sidebar .brand-head--main,
  html[data-theme="light"]:not(.react-student-embedded) .shell .sidebar .brand-head--main {
    min-height: 56px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
  }

  .brand-icon-logo {
    display: none;
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter:
      saturate(1.14)
      contrast(1.1)
      drop-shadow(0 8px 18px rgba(255, 68, 32, 0.18))
      drop-shadow(0 10px 24px rgba(2, 6, 23, 0.22));
  }

  html:not(.react-student-embedded) .brand-icon-logo {
    display: block !important;
  }

  html:not(.react-student-embedded) .brand-main-logo,
  html:not(.react-student-embedded) .brand-subtitle-text {
    display: none !important;
  }

  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .brand-head--main,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .brand-head--main {
    display: block !important;
    min-height: 0 !important;
  }

  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .brand-icon-logo,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .brand-icon-logo {
    display: none !important;
  }

  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .brand-main-logo,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .brand-main-logo {
    display: block !important;
  }

  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .brand-subtitle-text,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .brand-subtitle-text {
    display: block !important;
  }

  html:not(.react-student-embedded) .menu {
    gap: 10px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) .sidebar-section {
    width: 48px !important;
    height: 10px !important;
    margin: 8px auto 2px !important;
    overflow: hidden !important;
    color: transparent !important;
    opacity: 0.28 !important;
    transition:
      width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
      height 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
      color 180ms ease,
      opacity 180ms ease !important;
  }

  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .sidebar-section,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .sidebar-section {
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 4px !important;
    color: var(--muted) !important;
    opacity: 1 !important;
  }

  html:not(.react-student-embedded) .menu-item {
    position: relative !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin-inline: auto !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    transition:
      width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
      padding 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
      border-radius 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease !important;
  }

  html:not(.react-student-embedded) .menu-item::before {
    margin: 0 !important;
    width: 18px !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }

  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .menu-item,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .menu-item {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    margin-inline: 0 !important;
    padding: 0 18px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .menu-item::before,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .menu-item::before {
    margin-right: 0 !important;
  }

  html:not(.react-student-embedded) .sidebar-account-card {
    opacity: 0 !important;
    transform: translateY(8px) scale(0.96) !important;
    pointer-events: none !important;
    transition:
      opacity 180ms ease,
      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .sidebar-account-card,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .sidebar-account-card {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }
}

/* Fixed AI Workspace Sidebar: click to expand/collapse; hover only shows native tooltips. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) .shell,
  html:not(.react-student-embedded) .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within),
  html:not(.react-student-embedded) .shell.sidebar-expanded,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:hover),
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-collapsed,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:hover),
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) .sidebar {
    padding: 18px 16px 14px !important;
    overflow-x: hidden !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-collapsed .sidebar,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar {
    padding: 18px 10px 14px !important;
    box-shadow: none !important;
  }

  .sidebar-toggle {
    position: absolute;
    top: 6px;
    right: 12px;
    z-index: 5;
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    color: rgba(226, 232, 240, 0.72);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    transition:
      transform 180ms ease,
      color 180ms ease,
      opacity 180ms ease;
  }

  .sidebar-toggle:hover {
    transform: translateY(-1px);
    color: rgba(248, 250, 252, 0.9);
    background: transparent;
  }

  html:not(.react-student-embedded) .brand {
    position: relative;
    padding: 0 0 18px !important;
  }

  html:not(.react-student-embedded) .brand-head--main,
  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .brand-head--main,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .brand-head--main {
    display: block !important;
    min-height: 0 !important;
  }

  html:not(.react-student-embedded) .brand-icon-logo,
  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .brand-icon-logo,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .brand-icon-logo {
    display: none !important;
  }

  html:not(.react-student-embedded) .brand-main-logo,
  html:not(.react-student-embedded) .brand-subtitle-text,
  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .brand-main-logo,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .brand-main-logo,
  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .brand-subtitle-text,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .brand-subtitle-text {
    display: block !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-collapsed .brand {
    padding: 0 0 78px !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-collapsed .brand-head--main,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:hover) .brand-head--main,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:focus-within) .brand-head--main {
    min-height: 54px !important;
    display: grid !important;
    place-items: center !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-collapsed .brand-icon-logo,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:hover) .brand-icon-logo,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:focus-within) .brand-icon-logo {
    display: block !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-collapsed .brand-main-logo,
  html:not(.react-student-embedded) .shell.sidebar-collapsed .brand-subtitle-text,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:hover) .brand-main-logo,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:focus-within) .brand-main-logo,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:hover) .brand-subtitle-text,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:focus-within) .brand-subtitle-text {
    display: none !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-collapsed .sidebar-toggle {
    top: 72px;
    right: auto;
    left: 12px;
    width: 28px;
    height: 28px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
  }

  html:not(.react-student-embedded) .shell.sidebar-collapsed .menu,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:hover) .menu,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:focus-within) .menu {
    align-items: center !important;
    gap: 10px !important;
  }

  html:not(.react-student-embedded) .menu-item,
  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .menu-item,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .menu-item {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    margin-inline: 0 !important;
    padding: 0 18px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-collapsed .menu-item,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:hover) .menu-item,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:focus-within) .menu-item {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 48px !important;
    place-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
  }

  html:not(.react-student-embedded) .menu-item::before,
  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .menu-item::before,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .menu-item::before {
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) .sidebar-section,
  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .sidebar-section,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .sidebar-section {
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 4px !important;
    color: var(--muted) !important;
    opacity: 1 !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-collapsed .sidebar-section,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar-section,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar-section {
    width: 48px !important;
    height: 0 !important;
    margin: 6px auto 0 !important;
    color: transparent !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) .sidebar-account-card,
  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .sidebar-account-card,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .sidebar-account-card {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-collapsed .sidebar-account-card,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar-account-card,
  html:not(.react-student-embedded) .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar-account-card {
    opacity: 0 !important;
    transform: translateY(8px) scale(0.96) !important;
    pointer-events: none !important;
  }
}

/* 小问默认轻量化：平时只保留右下角头像入口，点击后再展开 AI 侧边工作台 */
.companion-dock.companion-collapsed {
  width: auto;
  max-width: none;
}

.companion-dock.companion-collapsed .companion-mini {
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  display: grid !important;
  place-items: center !important;
  grid-template-columns: 1fr !important;
  padding: 0 !important;
  border-radius: 20px !important;
  border-color: rgba(129, 140, 248, 0.24) !important;
  background:
    radial-gradient(circle at 34% 22%, rgba(129, 140, 248, 0.34), transparent 45%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.86)) !important;
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  overflow: visible !important;
}

.companion-dock.companion-collapsed .companion-mini::before {
  content: "今日工程提示" !important;
  position: absolute !important;
  right: 66px !important;
  top: 50% !important;
  display: block !important;
  min-width: 118px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(129, 140, 248, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.86) !important;
  color: rgba(248, 250, 252, 0.92) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(8px, -50%) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}

.companion-dock.companion-collapsed .companion-mini:hover::before {
  opacity: 1 !important;
  transform: translate(0, -50%) !important;
}

.companion-dock.companion-collapsed .companion-mini-avatar-token {
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.22), transparent 44%),
    linear-gradient(135deg, #2563eb, #7c3aed 58%, #ef4f7a) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 10px 26px rgba(79, 70, 229, 0.34) !important;
  mask-image: none !important;
  opacity: 1 !important;
  animation: xiaowen-mini-breathe 3.8s ease-in-out infinite !important;
}

.companion-dock.companion-collapsed .companion-mini::after {
  content: "" !important;
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  width: 9px !important;
  height: 9px !important;
  border: 2px solid rgba(15, 23, 42, 0.94) !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  filter: none !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.78) !important;
}

.companion-dock.companion-collapsed .companion-drag-handle,
.companion-dock.companion-collapsed #companionMiniAvatarStage,
.companion-dock.companion-collapsed #companionMiniText,
.companion-dock.companion-collapsed .companion-mini-badge {
  display: none !important;
}

.companion-dock.companion-collapsed .companion-mini-bubble {
  display: none !important;
}

.companion-dock.companion-collapsed .companion-mini:hover .companion-mini-bubble {
  display: none !important;
}

.companion-dock.companion-collapsed .companion-mini-bubble strong {
  color: #fff;
  font-size: 12px;
}

.companion-dock.companion-collapsed .companion-mini-state {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(226, 232, 240, 0.76);
  font-size: 11px;
}

.companion-dock.companion-collapsed .companion-mini-state::before {
  width: 6px;
  height: 6px;
  color: #22c55e;
  background: #22c55e;
}

@keyframes xiaowen-mini-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.035);
  }
}

/* Expanded AI workspace: keep XiaoWen off the bottom edge and remove the redundant standby pill. */
.companion-dock.companion-expanded:not(.companion-fullscreen) {
  right: calc(28px + var(--safe-right)) !important;
  top: max(104px, 18vh) !important;
  bottom: auto !important;
  left: auto !important;
  width: min(380px, calc(100vw - 56px)) !important;
}

.companion-dock.companion-expanded:not(.companion-fullscreen).companion-position-left {
  left: calc(28px + var(--safe-left)) !important;
  right: auto !important;
}

.companion-dock.companion-expanded .companion-mini {
  display: none !important;
}

.companion-dock.companion-expanded:not(.companion-fullscreen) .companion-panel {
  width: 100% !important;
  max-height: min(460px, calc(100vh - 150px)) !important;
}

#companionAmbientStage.companion-ambient-stage.companion-ambient-expanded {
  right: min(430px, calc(100vw - 266px)) !important;
  top: max(128px, 20vh) !important;
  bottom: auto !important;
}

#companionAmbientStage.companion-ambient-stage.companion-position-left.companion-ambient-expanded {
  left: min(430px, calc(100vw - 266px)) !important;
  right: auto !important;
  top: max(128px, 20vh) !important;
  bottom: auto !important;
}

@media (max-width: 720px) {
  .companion-dock.companion-expanded:not(.companion-fullscreen) {
    right: 14px !important;
    left: 14px !important;
    top: 96px !important;
    width: auto !important;
  }

  #companionAmbientStage.companion-ambient-stage.companion-ambient-expanded {
    right: 20px !important;
    top: 390px !important;
    width: 176px !important;
  }
}

/* Dashboard balance: move execution details into the main canvas, keep the rail decisive. */
body[data-active-panel="dashboard"] .dashboard-operation-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

body[data-active-panel="dashboard"] .dashboard-operation-grid .section-card {
  min-height: 196px !important;
  max-height: none !important;
}

body[data-active-panel="dashboard"] .dashboard-operation-grid .dashboard-loop-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-active-panel="dashboard"] .dashboard-operation-grid .dashboard-loop-item {
  min-height: 112px;
}

body[data-active-panel="dashboard"] .dashboard-right-rail {
  align-self: start;
  grid-auto-rows: auto !important;
}

body[data-active-panel="dashboard"] .dashboard-right-rail > .section-card {
  max-height: none !important;
}

body[data-active-panel="dashboard"] .dashboard-right-rail > .coach-companion-card,
body[data-active-panel="dashboard"] .dashboard-right-rail > .dashboard-todo-card,
body[data-active-panel="dashboard"] .dashboard-right-rail > .dashboard-loop-card,
body[data-active-panel="dashboard"] .dashboard-right-rail > .dashboard-shortcut-card,
body[data-active-panel="dashboard"] .dashboard-right-rail > .dashboard-system-card {
  display: none !important;
}

body[data-active-panel="dashboard"] .dashboard-right-rail > .dashboard-copilot-card {
  order: 1;
  min-height: 360px !important;
  max-height: 396px !important;
  overflow: hidden !important;
}

body[data-active-panel="dashboard"] .dashboard-right-rail > .dashboard-copilot-card #dashboardCoachText {
  max-height: 284px;
  overflow-y: auto;
  padding-right: 2px;
}

body[data-active-panel="dashboard"] .dashboard-right-rail .dashboard-task-center-hero {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}

body[data-active-panel="dashboard"] .dashboard-right-rail .dashboard-task-ring {
  width: 88px;
}

body[data-active-panel="dashboard"] .dashboard-right-rail .dashboard-mission-list {
  gap: 8px;
}

body[data-active-panel="dashboard"] .dashboard-right-rail .dashboard-mission-card {
  min-height: 66px !important;
  padding: 9px !important;
}

body[data-active-panel="dashboard"] .dashboard-right-rail .dashboard-mission-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

body[data-active-panel="dashboard"] .dashboard-right-rail > .dashboard-next-card {
  order: 2;
  min-height: 188px !important;
  max-height: 188px !important;
  overflow: hidden !important;
}

body[data-active-panel="dashboard"] .dashboard-right-rail > .dashboard-next-card #dashboardNextText {
  max-height: 86px;
  overflow-y: auto;
  padding-right: 2px;
}

body[data-active-panel="dashboard"] .dashboard-recent-row {
  grid-template-columns: minmax(0, 1fr) 56px 62px 58px;
}

body[data-active-panel="dashboard"] .dashboard-hardware-cabin-card {
  overflow: hidden;
  border-color: rgba(14, 165, 233, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.9)),
    repeating-linear-gradient(90deg, rgba(14, 165, 233, 0.08) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(20, 184, 166, 0.07) 0 1px, transparent 1px 34px) !important;
}

.dashboard-hardware-badge {
  padding: 6px 10px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 999px;
  color: #0369a1;
  background: rgba(14, 165, 233, 0.08);
  font-size: 12px;
  font-weight: 950;
}

.dashboard-hardware-cabin {
  min-width: 0;
}

.dashboard-hardware-cabin-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.dashboard-hardware-identity-panel,
.dashboard-hardware-recommend-panel {
  min-width: 0;
  border-radius: 12px;
}

.dashboard-hardware-identity-panel {
  display: grid;
  align-content: center;
  gap: 10px;
  grid-row: 1 / span 2;
  min-height: 246px;
  padding: 16px;
  color: #e0f2fe;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background:
    linear-gradient(135deg, rgba(7, 19, 38, 0.98), rgba(12, 38, 56, 0.94)),
    repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.12) 0 1px, transparent 1px 28px);
  box-shadow: inset 0 0 28px rgba(56, 189, 248, 0.1);
}

.dashboard-hardware-identity-panel > span,
.dashboard-hardware-panel-head span {
  color: rgba(100, 116, 139, 0.86);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.dashboard-hardware-identity-panel > span {
  color: rgba(186, 230, 253, 0.72);
}

.dashboard-hardware-identity-panel strong {
  color: #ffffff;
  font-size: 26px;
  line-height: 1.08;
}

.dashboard-hardware-identity-panel p {
  margin: 0;
  color: rgba(224, 242, 254, 0.78);
  font-size: 13px;
  line-height: 1.55;
}

.dashboard-hardware-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dashboard-hardware-scope em {
  padding: 5px 8px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 999px;
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.12);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.dashboard-hardware-direction-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.dashboard-hardware-direction,
.dashboard-hardware-recommend {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.dashboard-hardware-direction:hover,
.dashboard-hardware-recommend:hover {
  transform: translateY(-1px);
  border-color: rgba(14, 165, 233, 0.28);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.dashboard-hardware-direction {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 12px;
}

.dashboard-hardware-direction > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #075985;
  background: rgba(14, 165, 233, 0.1);
  font-size: 12px;
  font-weight: 950;
}

.dashboard-hardware-direction strong,
.dashboard-hardware-recommend strong {
  display: block;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.dashboard-hardware-direction p,
.dashboard-hardware-recommend p {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dashboard-hardware-direction p,
.dashboard-hardware-recommend p {
  -webkit-line-clamp: 1;
}

.dashboard-hardware-direction em,
.dashboard-hardware-recommend em {
  color: #0f766e;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.dashboard-hardware-direction i {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.dashboard-hardware-direction b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #14b8a6, #a78bfa);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.24);
}

.dashboard-hardware-direction[data-tone="hot"],
.dashboard-hardware-recommend[data-tone="hot"] {
  border-color: rgba(244, 63, 94, 0.22);
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.72), rgba(255, 255, 255, 0.72));
}

.dashboard-hardware-direction[data-tone="hot"] > span {
  color: #be123c;
  background: rgba(244, 63, 94, 0.12);
}

.dashboard-hardware-direction[data-tone="ready"],
.dashboard-hardware-recommend[data-tone="ready"] {
  border-color: rgba(20, 184, 166, 0.22);
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.78), rgba(255, 255, 255, 0.72));
}

.dashboard-hardware-recommend-panel {
  display: grid;
  grid-column: 2;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, 0.12);
  background: rgba(255, 255, 255, 0.64);
}

.dashboard-hardware-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-hardware-panel-head strong {
  color: #0369a1;
  font-size: 12px;
}

.dashboard-hardware-recommend-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-hardware-recommend {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 9px;
}

.dashboard-hardware-recommend em {
  width: fit-content;
  padding: 5px 7px;
  border-radius: 999px;
  color: #075985;
  background: rgba(14, 165, 233, 0.1);
}

.dashboard-hardware-recommend p {
  display: none;
}

body[data-active-panel="dashboard"] .dashboard-growth-card {
  overflow: hidden;
  border-color: rgba(20, 184, 166, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.84)),
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.12), transparent 38%) !important;
}

.dashboard-growth-period {
  padding: 6px 10px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 999px;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.08);
  font-size: 12px;
  font-weight: 900;
}

.dashboard-growth-feedback {
  display: grid;
  grid-template-columns: minmax(140px, 0.28fr) minmax(260px, 1fr) minmax(150px, 0.28fr);
  gap: 14px;
  align-items: stretch;
}

.dashboard-growth-rank,
.dashboard-growth-summary {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 126px;
  padding: 14px;
  border: 1px solid rgba(20, 184, 166, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.dashboard-growth-rank span,
.dashboard-growth-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.dashboard-growth-rank strong,
.dashboard-growth-summary strong {
  color: var(--text);
  font-size: 32px;
  line-height: 1;
}

.dashboard-growth-rank small {
  color: var(--muted);
  font-size: 14px;
}

.dashboard-growth-rank p,
.dashboard-growth-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-growth-rank em {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.dashboard-growth-list {
  display: grid;
  gap: 9px;
}

.dashboard-growth-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(59, 130, 246, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.66);
}

.dashboard-growth-item strong {
  color: var(--text);
  font-size: 14px;
}

.dashboard-growth-item span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-growth-item em {
  color: #0f766e;
  font-size: 18px;
  font-style: normal;
  font-weight: 950;
}

.dashboard-growth-item i {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.dashboard-growth-item b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #38bdf8, #f472b6);
  box-shadow: 0 0 18px rgba(20, 184, 166, 0.22);
}

html[data-theme="dark"] body[data-active-panel="dashboard"] .dashboard-growth-card {
  border-color: rgba(45, 212, 191, 0.14) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.08), transparent 38%),
    rgba(8, 13, 24, 0.58) !important;
}

html[data-theme="dark"] .dashboard-growth-rank,
html[data-theme="dark"] .dashboard-growth-summary,
html[data-theme="dark"] .dashboard-growth-item {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.38);
}

html[data-theme="dark"] .dashboard-growth-period {
  color: #5eead4;
  border-color: rgba(45, 212, 191, 0.2);
  background: rgba(20, 184, 166, 0.1);
}

html[data-theme="dark"] .dashboard-growth-rank em,
html[data-theme="dark"] .dashboard-growth-item em {
  color: #5eead4;
}

html[data-theme="dark"] body[data-active-panel="dashboard"] .dashboard-hardware-cabin-card {
  border-color: rgba(56, 189, 248, 0.14) !important;
  background:
    rgba(8, 13, 24, 0.58),
    repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.08) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(45, 212, 191, 0.06) 0 1px, transparent 1px 34px) !important;
}

html[data-theme="dark"] .dashboard-hardware-badge,
html[data-theme="dark"] .dashboard-hardware-panel-head strong {
  color: #7dd3fc;
}

html[data-theme="dark"] .dashboard-hardware-direction,
html[data-theme="dark"] .dashboard-hardware-recommend,
html[data-theme="dark"] .dashboard-hardware-recommend-panel {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.38);
}

html[data-theme="dark"] .dashboard-hardware-direction[data-tone="hot"],
html[data-theme="dark"] .dashboard-hardware-recommend[data-tone="hot"] {
  border-color: rgba(251, 113, 133, 0.18);
  background: rgba(76, 5, 25, 0.28);
}

html[data-theme="dark"] .dashboard-hardware-direction[data-tone="ready"],
html[data-theme="dark"] .dashboard-hardware-recommend[data-tone="ready"] {
  border-color: rgba(45, 212, 191, 0.18);
  background: rgba(15, 118, 110, 0.14);
}

/* XiaoWen non-active state: a single quiet presence dot. */
#companionDock.companion-dock.companion-collapsed {
  width: 26px !important;
  max-width: 26px !important;
}

#companionDock.companion-dock.companion-collapsed #companionMini {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

#companionDock.companion-dock.companion-collapsed #companionMini > span,
#companionDock.companion-dock.companion-collapsed #companionMiniAvatar,
#companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage,
#companionDock.companion-dock.companion-collapsed .companion-mini-bubble,
#companionDock.companion-dock.companion-collapsed .companion-drag-handle {
  display: none !important;
}

#companionDock.companion-dock.companion-collapsed #companionMini::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  display: block !important;
  border-radius: 999px !important;
  background: #35f0c2 !important;
  box-shadow:
    0 0 8px rgba(53, 240, 194, 0.9),
    0 0 18px rgba(96, 165, 250, 0.42) !important;
  opacity: 0.96 !important;
  pointer-events: none !important;
  transform: none !important;
}

#companionDock.companion-dock.companion-collapsed #companionMini::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  border: 1px solid rgba(96, 165, 250, 0.28) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: 0 0 0 7px rgba(53, 240, 194, 0.07) !important;
  animation: xiaowenPresenceDotPulse 3.8s ease-in-out infinite !important;
  pointer-events: none !important;
}

#companionDock.companion-dock.companion-collapsed #companionMini:hover {
  transform: none !important;
}

#companionDock.companion-dock.companion-collapsed[data-voice-state="thinking"] #companionMini::after,
#companionDock.companion-dock.companion-collapsed[data-voice-state="speaking"] #companionMini::after,
#companionDock.companion-dock.companion-collapsed[data-emotion="thinking"] #companionMini::after,
#companionDock.companion-dock.companion-collapsed[data-emotion="analyzing"] #companionMini::after {
  animation-duration: 1.8s !important;
  box-shadow: 0 0 0 9px rgba(96, 165, 250, 0.11) !important;
}

#companionAmbientStage.companion-ambient-stage.companion-ambient-moment {
  display: grid !important;
  right: calc(96px + var(--safe-right)) !important;
  bottom: calc(96px + var(--safe-bottom)) !important;
  width: 178px !important;
  min-height: 248px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: xiaowenMomentSlideOut 320ms ease-out both !important;
}

#companionAmbientStage.companion-ambient-stage.companion-ambient-moment .companion-ambient-model {
  width: 150px !important;
  height: 230px !important;
  pointer-events: auto !important;
}

#companionAmbientStage.companion-ambient-stage.companion-ambient-moment::after {
  content: attr(data-moment-text);
  position: absolute;
  right: 104px;
  top: 18px;
  width: max-content;
  max-width: 210px;
  padding: 9px 11px;
  border: 1px solid rgba(129, 140, 248, 0.14);
  border-radius: 15px;
  color: rgba(30, 41, 59, 0.86);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(22px) saturate(1.16);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

#companionAmbientStage.companion-ambient-stage.companion-ambient-moment::before {
  content: "";
  position: absolute;
  right: 96px;
  top: 54px;
  width: 14px;
  height: 14px;
  border-right: 1px solid rgba(129, 140, 248, 0.14);
  border-bottom: 1px solid rgba(129, 140, 248, 0.14);
  background: rgba(255, 255, 255, 0.52);
  transform: rotate(45deg);
  backdrop-filter: blur(22px);
}

html[data-theme="dark"] #companionAmbientStage.companion-ambient-stage.companion-ambient-moment::after,
html[data-theme="dark"] #companionAmbientStage.companion-ambient-stage.companion-ambient-moment::before {
  color: rgba(226, 232, 240, 0.86) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  background: rgba(9, 14, 25, 0.54) !important;
}

@keyframes xiaowenPresenceDotPulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes xiaowenMomentSlideOut {
  from {
    opacity: 0;
    transform: translateX(28px) translateY(10px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

@media (max-width: 1180px) {
  body[data-active-panel="dashboard"] .dashboard-operation-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-active-panel="dashboard"] .dashboard-growth-feedback {
    grid-template-columns: 1fr !important;
  }

  body[data-active-panel="dashboard"] .dashboard-hardware-cabin-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-active-panel="dashboard"] .dashboard-hardware-identity-panel,
  body[data-active-panel="dashboard"] .dashboard-hardware-recommend-panel {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body[data-active-panel="dashboard"] .dashboard-operation-grid .dashboard-loop-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body[data-active-panel="dashboard"] .dashboard-operation-grid .dashboard-loop-list,
  body[data-active-panel="dashboard"] .dashboard-recent-row {
    grid-template-columns: 1fr !important;
  }

  body[data-active-panel="dashboard"] .dashboard-hardware-direction-list,
  body[data-active-panel="dashboard"] .dashboard-hardware-recommend-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-active-panel="dashboard"] .dashboard-hardware-direction {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 10px;
  }

  body[data-active-panel="dashboard"] .dashboard-hardware-direction > span {
    width: 38px;
    height: 28px;
  }

  body[data-active-panel="dashboard"] .dashboard-hardware-direction p {
    display: none;
  }

body[data-active-panel="dashboard"] .dashboard-hardware-direction em {
    grid-column: auto;
  }
}

/* Homepage compact cockpit: match the reference layout with less vertical travel. */
body[data-active-panel="landing"] .landing-home-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.74fr) minmax(280px, 0.68fr) !important;
  grid-template-areas:
    "welcome welcome welcome"
    "recommendation recommendation route"
    "growth growth briefing"
    "hardware questions calendar"
    "special special coach" !important;
  gap: 10px !important;
  padding: 12px 16px 16px !important;
}

body[data-active-panel="landing"] .landing-welcome-panel {
  min-height: 48px !important;
  padding: 0 8px !important;
}

body[data-active-panel="landing"] .landing-greeting-line {
  margin-bottom: 2px !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
}

body[data-active-panel="landing"] .landing-streak-line {
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion,
body[data-active-panel="landing"] .landing-welcome-panel::after {
  height: 34px !important;
  min-height: 34px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation,
body[data-active-panel="landing"] .landing-route-card {
  height: 246px !important;
  min-height: 246px !important;
  max-height: 246px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation {
  padding: 22px 26px !important;
  grid-template-columns: minmax(300px, 0.95fr) minmax(220px, 0.62fr) !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow {
  margin-bottom: 10px !important;
  padding: 6px 10px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  font-size: 24px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy > p:not(.eyebrow) {
  margin: 10px 0 12px !important;
  max-width: 420px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

body[data-active-panel="landing"] .landing-recommendation-meta {
  left: 26px !important;
  bottom: 76px !important;
}

body[data-active-panel="landing"] .landing-recommendation-meta span {
  min-width: 90px !important;
  height: 34px !important;
}

body[data-active-panel="landing"] .landing-primary-action.primary-btn {
  left: 26px !important;
  bottom: 16px !important;
  height: 38px !important;
  min-height: 38px !important;
}

body[data-active-panel="landing"] .landing-recommendation-preview {
  min-height: 198px !important;
}

body[data-active-panel="landing"] .landing-hero-stack {
  width: 178px !important;
  height: 132px !important;
}

body[data-active-panel="landing"] .landing-route-card {
  padding: 16px 18px 12px !important;
}

body[data-active-panel="landing"] .landing-ai-timeline {
  gap: 5px !important;
}

body[data-active-panel="landing"] .landing-ai-step {
  height: 34px !important;
  min-height: 34px !important;
  padding: 5px !important;
}

body[data-active-panel="landing"] .landing-ai-step-index {
  width: 20px !important;
  height: 20px !important;
}

body[data-active-panel="landing"] .landing-ai-status-bar {
  margin-top: 6px !important;
  padding-top: 8px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth,
body[data-active-panel="landing"] .landing-xiaowen-briefing {
  height: 188px !important;
  min-height: 188px !important;
  max-height: 188px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth {
  padding: 12px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-head,
body[data-active-panel="landing"] .landing-xiaowen-briefing-head,
body[data-active-panel="landing"] .landing-hardware-head,
body[data-active-panel="landing"] .landing-heatmap-head,
body[data-active-panel="landing"] .landing-special-training-head {
  margin-bottom: 8px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-list {
  gap: 8px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item {
  min-height: 70px !important;
  padding: 8px 10px 20px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item p {
  margin-top: 8px !important;
  font-size: 14px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item strong {
  top: 36px !important;
  right: 10px !important;
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item::after {
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 14px;
}

body[data-active-panel="landing"] .landing-growth-score {
  margin-top: 8px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing {
  grid-template-columns: minmax(0, 1fr) 108px !important;
  padding: 12px 14px 0 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-copy p {
  margin-top: 6px !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
  left: 14px !important;
  right: 118px !important;
  bottom: 12px !important;
  gap: 6px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
  min-height: 44px !important;
  padding: 7px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats span {
  font-size: 10px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats strong {
  font-size: 16px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
  width: 104px !important;
  height: 104px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
  width: 100px !important;
  height: 100px !important;
}

body[data-active-panel="landing"] .landing-hardware-focus,
body[data-active-panel="landing"] .landing-hardware-questions,
body[data-active-panel="landing"] .landing-training-heatmap {
  height: 206px !important;
  min-height: 206px !important;
  max-height: 206px !important;
  padding: 12px !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-hardware-chip-list {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body[data-active-panel="landing"] .landing-hardware-card {
  min-height: 142px !important;
  padding: 9px 6px !important;
}

body[data-active-panel="landing"] .landing-hardware-card strong {
  gap: 6px !important;
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-hardware-card strong span {
  width: 42px !important;
  height: 42px !important;
  font-size: 20px !important;
}

body[data-active-panel="landing"] .landing-hardware-card em {
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-hardware-card small {
  font-size: 11px !important;
}

body[data-active-panel="landing"] .landing-question-list {
  gap: 6px !important;
}

body[data-active-panel="landing"] .landing-question-list button {
  min-height: 23px !important;
  gap: 6px !important;
}

body[data-active-panel="landing"] .landing-question-list button strong {
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-question-list button small {
  padding: 2px 5px !important;
  font-size: 10px !important;
}

body[data-active-panel="landing"] .landing-question-list button em {
  font-size: 11px !important;
}

body[data-active-panel="landing"] .landing-question-more {
  margin-top: 7px !important;
}

body[data-active-panel="landing"] .landing-heatmap-grid {
  gap: 4px 5px !important;
  margin: 4px 0 8px !important;
}

body[data-active-panel="landing"] .landing-calendar-weekday {
  font-size: 10px !important;
}

body[data-active-panel="landing"] .landing-calendar-day {
  width: 21px !important;
  height: 21px !important;
  font-size: 10px !important;
}

body[data-active-panel="landing"] .landing-heatmap-legend {
  gap: 8px !important;
  flex-wrap: wrap !important;
  font-size: 10px !important;
}

body[data-active-panel="landing"] .landing-special-training,
body[data-active-panel="landing"] .landing-coach-card-bottom {
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  padding: 12px !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-special-training-list {
  gap: 7px !important;
}

body[data-active-panel="landing"] .landing-special-training-item {
  min-height: 92px !important;
  padding: 9px !important;
}

body[data-active-panel="landing"] .landing-special-training-item strong {
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-special-training-item span {
  display: none !important;
}

body[data-active-panel="landing"] .landing-special-training-item p {
  margin: 6px 0 !important;
  font-size: 11px !important;
}

body[data-active-panel="landing"] .landing-special-training-item p b {
  font-size: 16px !important;
}

body[data-active-panel="landing"] .landing-special-training-item em {
  min-width: 66px !important;
  height: 26px !important;
  font-size: 11px !important;
}

body[data-active-panel="landing"] .landing-coach-card-copy {
  width: calc(100% - 94px) !important;
}

body[data-active-panel="landing"] .landing-coach-card-copy p {
  margin-bottom: 8px !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}

body[data-active-panel="landing"] .landing-coach-card-bottom .primary-btn {
  height: 28px !important;
}

body[data-active-panel="landing"] .landing-coach-card-bottom img {
  width: 100px !important;
  height: 100px !important;
  bottom: -6px !important;
}

@media (max-width: 1180px) {
  body[data-active-panel="landing"] .landing-home-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "welcome"
      "recommendation"
      "route"
      "growth"
      "briefing"
      "hardware"
      "questions"
      "calendar"
      "special"
      "coach" !important;
  }
}

/* HW Interview OS V5: training center, not a dashboard pile. */
body[data-active-panel="landing"] .landing-home-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
}

body[data-active-panel="landing"] .landing-focus-decision,
body[data-active-panel="landing"] .landing-primary-recommendation,
body[data-active-panel="landing"] .landing-route-card,
body[data-active-panel="landing"] .landing-xiaowen-briefing {
  display: none !important;
}

body[data-active-panel="landing"] .landing-welcome-panel {
  min-height: auto !important;
  padding: 24px 28px !important;
}

body[data-active-panel="landing"] .landing-training-statusbar {
  grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(180px, 1fr)) !important;
  gap: 20px !important;
}

body[data-active-panel="landing"] .landing-v5-command-center,
body[data-active-panel="landing"] .landing-v5-training-plan,
body[data-active-panel="landing"] .landing-weekly-growth {
  border-radius: 24px !important;
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f9fbff 100%) !important;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.07) !important;
}

body[data-active-panel="landing"] .landing-v5-command-center {
  min-height: 380px !important;
  padding: 32px !important;
  display: grid !important;
  grid-template-columns: 0.72fr 1.28fr !important;
  gap: 28px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-v5-command-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

body[data-active-panel="landing"] .landing-v5-command-copy .eyebrow {
  color: #7c4dff !important;
  font-weight: 900 !important;
}

body[data-active-panel="landing"] .landing-v5-command-copy h1 {
  margin: 10px 0 14px !important;
  color: #0f172a !important;
  font-size: 42px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="landing"] .landing-v5-command-copy p {
  max-width: 360px !important;
  color: #64748b !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

body[data-active-panel="landing"] .landing-v5-command-grid {
  display: grid !important;
  grid-template-columns: 1.12fr 1fr 1.1fr !important;
  gap: 18px !important;
  min-width: 0 !important;
}

body[data-active-panel="landing"] .landing-v5-answer-strip {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(248, 250, 252, 0.86) !important;
}

body[data-active-panel="landing"] .landing-v5-answer-strip span {
  min-width: 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9) !important;
}

body[data-active-panel="landing"] .landing-v5-answer-strip b {
  color: #7c4dff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

body[data-active-panel="landing"] .landing-v5-answer-strip em {
  color: #0f172a !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

body[data-active-panel="landing"] .landing-v5-command-card {
  min-height: 280px !important;
  padding: 24px !important;
  border: 1px solid #e5e7f5 !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 36px rgba(91, 140, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body[data-active-panel="landing"] .landing-v5-command-card span {
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body[data-active-panel="landing"] .landing-v5-command-card strong {
  color: #111827 !important;
  font-size: 28px !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="landing"] .landing-v5-command-card-primary {
  background: linear-gradient(140deg, #f7f2ff 0%, #ffffff 68%) !important;
  border-color: rgba(124, 77, 255, 0.28) !important;
}

body[data-active-panel="landing"] .landing-v5-command-card-primary strong {
  color: #6d4cff !important;
  font-size: 74px !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="landing"] .landing-v5-command-card-primary small {
  margin-left: 3px !important;
  font-size: 22px !important;
}

body[data-active-panel="landing"] .landing-v5-command-card em,
body[data-active-panel="landing"] .landing-v5-command-card b {
  color: #64748b !important;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

body[data-active-panel="landing"] .landing-v5-command-card b {
  width: max-content !important;
  max-width: 100% !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  background: #ecfdf5 !important;
  color: #059669 !important;
}

body[data-active-panel="landing"] .landing-v5-weakness-card ul {
  margin: 2px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 8px !important;
  list-style: none !important;
}

body[data-active-panel="landing"] .landing-v5-weakness-card li {
  padding: 9px 11px !important;
  border-radius: 12px !important;
  background: #fff7ed !important;
  color: #f97316 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body[data-active-panel="landing"] .landing-v5-next-card {
  background: linear-gradient(140deg, #ffffff 0%, #eef6ff 100%) !important;
}

body[data-active-panel="landing"] .landing-v5-next-card .primary-btn {
  width: 100% !important;
  height: 52px !important;
  margin-top: 8px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

body[data-active-panel="landing"] .landing-v5-training-plan {
  min-height: 260px !important;
  padding: 28px !important;
}

body[data-active-panel="landing"] .landing-v5-section-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

body[data-active-panel="landing"] .landing-v5-section-head h2 {
  margin: 4px 0 0 !important;
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
}

body[data-active-panel="landing"] .landing-v5-section-head span {
  color: #64748b !important;
  font-weight: 800 !important;
}

body[data-active-panel="landing"] .landing-v5-plan-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body[data-active-panel="landing"] .landing-v5-plan-day {
  min-height: 142px !important;
  padding: 18px !important;
  border: 1px solid #e5e7f5 !important;
  border-radius: 18px !important;
  background: #fff !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: none !important;
}

body[data-active-panel="landing"] .landing-v5-plan-day.is-current {
  border-color: rgba(124, 77, 255, 0.35) !important;
  background: linear-gradient(135deg, #f5f0ff 0%, #ffffff 100%) !important;
}

body[data-active-panel="landing"] .landing-v5-plan-day span {
  width: max-content !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #f1ecff !important;
  color: #7c4dff !important;
  font-weight: 900 !important;
}

body[data-active-panel="landing"] .landing-v5-plan-day strong {
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

body[data-active-panel="landing"] .landing-v5-plan-day em {
  color: #64748b !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.45 !important;
}

body[data-active-panel="landing"] .landing-weekly-growth {
  min-height: 300px !important;
  padding: 28px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item:nth-child(n + 4) {
  display: none !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item {
  min-height: 154px !important;
  padding: 20px !important;
  border-radius: 18px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item span {
  font-size: 16px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item p {
  margin: 14px 0 0 !important;
  color: #111827 !important;
  font-size: 30px !important;
  font-weight: 950 !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item strong {
  right: 20px !important;
  top: 54px !important;
  font-size: 30px !important;
}

@media (max-width: 1180px) {
  body[data-active-panel="landing"] .landing-v5-command-center {
    grid-template-columns: 1fr !important;
  }

  body[data-active-panel="landing"] .landing-v5-command-grid,
  body[data-active-panel="landing"] .landing-v5-answer-strip,
  body[data-active-panel="landing"] .landing-v5-plan-list,
  body[data-active-panel="landing"] .landing-weekly-growth-list,
  body[data-active-panel="landing"] .landing-training-statusbar {
    grid-template-columns: 1fr !important;
  }
}

/* Growth/Profile visibility guard: keep new archive/profile pages out of legacy panel fade states. */
body[data-active-panel="reports"] .panel[data-panel="reports"].active,
body[data-active-panel="resume"] .panel[data-panel="resume"].active {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

body[data-active-panel="reports"] #growthArchivePage,
body[data-active-panel="reports"] .growth-archive-shell,
body[data-active-panel="resume"] #abilityProfilePage {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  color: #111827 !important;
}

body[data-active-panel="reports"] #growthArchivePage :is(h2, h3, h4, p, span, strong, b, em, small, button, article, div),
body[data-active-panel="resume"] #abilityProfilePage :is(h2, h3, h4, p, span, strong, b, em, small, button, article, div) {
  visibility: visible !important;
}

.profile-skill-backdrop {
  z-index: 72;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(12px);
}

.profile-skill-card {
  width: min(620px, calc(100vw - 32px));
  gap: 18px;
  padding: 26px;
  border-radius: 24px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  background:
    radial-gradient(circle at 82% 8%, rgba(124, 77, 255, 0.14), transparent 34%),
    #ffffff;
  box-shadow: 0 32px 70px rgba(15, 23, 42, 0.18);
}

.profile-skill-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 18px;
  align-items: center;
}

.profile-skill-title-row h3 {
  margin: 0;
  color: #0f172a;
  font-size: 28px;
  font-weight: 950;
  line-height: 1.15;
}

.profile-skill-title-row p {
  margin: 8px 0 0;
  color: #64748b;
  font-weight: 800;
  line-height: 1.55;
}

.profile-skill-score {
  min-height: 112px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(180deg, #fbfaff, #ffffff);
}

.profile-skill-score span {
  padding: 4px 10px;
  border-radius: 999px;
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.1);
  font-size: 12px;
  font-weight: 950;
}

.profile-skill-score strong {
  color: #7c4dff;
  font-size: 46px;
  line-height: 1;
}

.profile-skill-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f8;
}

.profile-skill-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff, #22c55e);
}

.profile-skill-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.profile-skill-metrics div {
  min-height: 74px;
  padding: 12px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: #fff;
}

.profile-skill-metrics span,
.profile-skill-missing > span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.profile-skill-metrics strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
}

.profile-skill-missing {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e8edf5;
  border-radius: 18px;
  background: #f8fbff;
}

.profile-skill-recommendation {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 94% 10%, rgba(34, 197, 94, 0.12), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f6f2ff 100%);
}

.profile-skill-recommendation span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.profile-skill-recommendation strong {
  color: #111827;
  font-size: 20px;
  font-weight: 950;
}

.profile-skill-recommendation p {
  margin: 0;
  color: #64748b;
  font-weight: 800;
  line-height: 1.45;
}

#profileSkillMissingList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#profileSkillMissingList span {
  padding: 7px 10px;
  border-radius: 999px;
  color: #f97316;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-size: 12px;
  font-weight: 900;
}

.profile-skill-actions {
  justify-content: end;
}

/* Growth archive + engineer digital twin */
body[data-active-panel="reports"] .content-area,
body[data-active-panel="resume"] .content-area {
  background: #f5f8fc;
}

.growth-archive-shell,
.engineer-profile-page {
  display: grid;
  gap: 24px;
}

.growth-archive-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 0 2px;
}

.growth-archive-topbar h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0;
  color: #111827;
}

.growth-archive-topbar span,
.engineer-section-head span,
.growth-section-head span {
  color: #8a97ad;
  font-weight: 700;
}

.growth-archive-page {
  display: grid;
  gap: 24px;
}

.growth-overview-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.35fr) repeat(4, minmax(150px, 0.75fr));
  gap: 16px;
}

.growth-score-hero,
.growth-metric-card,
.growth-card,
.growth-section,
.engineer-hero-card,
.engineer-card,
.ability-source-drawer {
  border: 1px solid rgba(124, 77, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.growth-score-hero {
  position: relative;
  overflow: hidden;
  min-height: 196px;
  padding: 24px;
  background:
    radial-gradient(circle at 96% -10%, rgba(34, 197, 94, 0.18), transparent 30%),
    radial-gradient(circle at 84% 24%, rgba(124, 77, 255, 0.18), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f6f2ff 100%);
}

.growth-score-hero::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 92px;
  height: 92px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(124, 77, 255, 0.08)),
    conic-gradient(from 210deg, rgba(124, 77, 255, 0.14), rgba(34, 197, 94, 0.2), rgba(91, 140, 255, 0.12), rgba(124, 77, 255, 0.14));
  opacity: 0.72;
  transform: rotate(10deg);
  pointer-events: none;
}

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

.growth-score-head .eyebrow {
  margin-bottom: 6px;
}

.growth-score-head span {
  display: block;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
}

.growth-week-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: #059669;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.growth-score-main {
  display: flex;
  align-items: end;
  gap: 24px;
  margin: 16px 0 10px;
}

.growth-score-main > div {
  display: grid;
  gap: 6px;
}

.growth-score-main small {
  color: #8a97ad;
  font-size: 12px;
  font-weight: 900;
}

.growth-score-main strong {
  font-size: clamp(56px, 5.6vw, 78px);
  line-height: 0.95;
  color: #111827;
}

.growth-score-main strong:last-child,
.growth-gain,
.growth-score-hero b {
  color: #7c4dff;
}

.growth-score-main span {
  color: #7c4dff;
  padding-bottom: 12px;
  font-size: 38px;
  font-weight: 900;
}

.growth-score-lift {
  position: relative;
  z-index: 1;
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 2px 10px;
  align-items: center;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 16px;
  background: rgba(236, 253, 245, 0.74);
  box-shadow: 0 10px 22px rgba(34, 197, 94, 0.08);
}

.growth-score-lift span,
.growth-score-lift em {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.growth-score-lift strong {
  grid-row: span 2;
  color: #16a34a;
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.growth-score-lift em {
  font-style: normal;
}

.growth-score-proof {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.growth-score-proof p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.growth-gain {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
}

.growth-score-track,
.engineer-score-core i {
  display: block;
  height: 8px;
  margin-top: 18px;
  border-radius: 999px;
  background: #edf1f8;
  overflow: hidden;
}

.growth-score-track i,
.engineer-score-core i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff, #22c55e);
}

.growth-hero-sparkline {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 5px;
  height: 38px;
  margin-top: 14px;
}

.growth-hero-sparkline i {
  display: block;
  min-height: 10px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, rgba(124, 77, 255, 0.78), rgba(91, 140, 255, 0.32));
}

.growth-decision-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(124, 77, 255, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 2% 0%, rgba(124, 77, 255, 0.1), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.12), transparent 30%),
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.growth-decision-title {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 0 2px 2px;
}

.growth-decision-title span {
  display: block;
  margin-bottom: 5px;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.growth-decision-title strong {
  display: block;
  color: #111827;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.35;
}

.growth-decision-strip article {
  min-height: 126px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 14%, rgba(124, 77, 255, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.growth-decision-strip span {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
}

.growth-decision-strip strong {
  display: block;
  color: #111827;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.growth-decision-strip p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.growth-decision-action {
  background:
    radial-gradient(circle at 86% 12%, rgba(34, 197, 94, 0.16), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f4efff 100%) !important;
}

.growth-decision-action .primary-btn {
  width: 100%;
  min-height: 38px;
  margin-top: auto;
}

.growth-metric-card {
  min-height: 196px;
  padding: 20px;
  overflow: hidden;
}

.growth-metric-card span,
.growth-top-card p,
.growth-card p,
.engineer-card p,
.engineer-mini-metrics span {
  color: #6b778c;
}

.growth-metric-card strong {
  display: block;
  margin-top: 18px;
  color: #111827;
  font-size: 34px;
  line-height: 1;
}

.growth-metric-card p {
  margin: 10px 0 14px;
  color: #22c55e;
  font-weight: 800;
}

.growth-mini-bars {
  display: grid;
  align-items: end;
  grid-template-columns: repeat(10, 1fr);
  height: 48px;
  gap: 4px;
}

.growth-mini-bars i {
  display: block;
  border-radius: 5px 5px 0 0;
  background: rgba(91, 140, 255, 0.32);
}

.growth-metric-card.green .growth-mini-bars i { background: rgba(34, 197, 94, 0.32); }
.growth-metric-card.orange .growth-mini-bars i { background: rgba(249, 115, 22, 0.35); }
.growth-metric-card.purple .growth-mini-bars i { background: rgba(124, 77, 255, 0.34); }

.growth-section,
.growth-card,
.engineer-card {
  padding: 20px;
}

.growth-section-head,
.engineer-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.growth-section-head h3,
.engineer-section-head h3 {
  margin: 0;
  color: #111827;
  font-size: 20px;
  letter-spacing: 0;
}

.growth-top3-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.growth-top-card {
  padding: 18px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fbfcff);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.growth-top-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 77, 255, 0.22);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.growth-top-card header,
.engineer-project-head,
.growth-domain header,
.engineer-skill-domain header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.growth-top-card strong,
.engineer-project-item strong {
  color: #111827;
  font-size: 16px;
}

.growth-top-card em {
  color: #22c55e;
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
}

.growth-score-pair {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
  color: #111827;
  font-size: 30px;
  font-weight: 900;
}

.growth-score-pair b {
  color: #94a3b8;
}

.growth-top-track,
.engineer-project-item i,
.engineer-roadmap > i {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #edf1f8;
  overflow: hidden;
}

.growth-top-track i,
.engineer-project-item i b,
.engineer-roadmap > i b {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
}

.growth-top-track.lift-track i {
  position: absolute;
  top: 0;
}

.growth-top-track.lift-track .before {
  left: 0;
  background: linear-gradient(90deg, rgba(124, 77, 255, 0.32), rgba(91, 140, 255, 0.38));
}

.growth-top-track.lift-track .gain {
  background: linear-gradient(90deg, #7c4dff, #22c55e);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.28);
}

.growth-top-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.growth-top-meta span {
  padding: 6px 10px;
  border-radius: 999px;
  color: #475569;
  background: #f3f6fb;
  font-size: 12px;
  font-weight: 900;
}

.growth-card-action {
  width: 100%;
  min-height: 36px;
  margin-top: 14px;
}

.growth-two-column,
.engineer-two-column {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
}

.growth-ai-list {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.growth-ai-coach-intro {
  margin: 0 0 12px;
  color: #111827 !important;
  font-size: 16px;
  font-weight: 950;
}

.growth-ai-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f7faff;
  color: #334155;
  font-weight: 800;
  line-height: 1.55;
}

.growth-ai-list li b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #22c55e;
  font-size: 12px;
}

.growth-ai-list li.positive {
  border-left: 4px solid #22c55e;
}

.growth-ai-list li.warning {
  border-left: 4px solid #f97316;
  background: #fff7ed;
}

.growth-ai-list li.warning b {
  background: #f97316;
}

.growth-ai-list li span {
  min-width: 0;
}

.growth-ai-list p {
  display: none;
}

/* legacy paragraph fallback kept hidden after the AI summary became an ordered coach list. */
.growth-ai-list.legacy {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.growth-ai-list.legacy p {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7faff;
  color: #334155;
  font-weight: 700;
}

.growth-ai-list.legacy p.positive {
  border-left: 4px solid #22c55e;
}

.growth-ai-list.legacy p.warning {
  border-left: 4px solid #f97316;
  background: #fff7ed;
}

.growth-skill-tree,
.engineer-skill-tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.growth-domain,
.engineer-skill-domain {
  padding: 14px;
  border-radius: 16px;
  background: #f8fbff;
  border: 1px solid #e8edf5;
}

.growth-domain .ability-skill-row {
  grid-template-columns: 86px minmax(92px, 1fr) 34px 44px;
}

.growth-domain .ability-status {
  justify-self: end;
  text-align: center;
}

.ability-skill-row {
  display: grid;
  grid-template-columns: 86px minmax(70px, 1fr) 34px auto;
  align-items: center;
  width: 100%;
  gap: 10px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #334155;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.ability-skill-row div {
  height: 7px;
  border-radius: 999px;
  background: #e9eef6;
  overflow: hidden;
}

.ability-skill-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #5b8cff);
}

.ability-skill-row strong {
  color: #111827;
}

.ability-status {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
}

.status-great { color: #059669; background: #dcfce7; }
.status-ok { color: #2563eb; background: #dbeafe; }
.status-weak { color: #ea580c; background: #ffedd5; }

.growth-weakest-card h4 {
  margin: 0 0 12px;
  color: #ea580c;
  font-size: 28px;
}

.growth-weakest-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(300px, 1.1fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.growth-weakest-main,
.growth-weakest-evidence,
.growth-weakest-impact {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid #e8edf5;
  background: #fff;
}

.growth-weakest-main {
  background:
    radial-gradient(circle at 86% 10%, rgba(249, 115, 22, 0.14), transparent 34%),
    linear-gradient(135deg, #fff7ed 0%, #ffffff 70%);
}

.growth-weakest-main > span,
.growth-weak-action span {
  display: block;
  color: #ea580c;
  font-size: 12px;
  font-weight: 950;
}

.growth-weakest-main p,
.growth-weak-action p {
  margin: 0;
  color: #64748b;
  font-weight: 800;
  line-height: 1.55;
}

.growth-weakest-evidence strong,
.growth-weakest-impact > strong {
  display: block;
  margin-bottom: 12px;
  color: #111827;
  font-size: 16px;
  font-weight: 950;
}

.growth-weakest-evidence ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.growth-weakest-evidence li {
  position: relative;
  padding-left: 20px;
  color: #334155;
  font-weight: 850;
  line-height: 1.45;
}

.growth-weakest-evidence li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f97316;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
}

.growth-missing-list,
.engineer-roadmap-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.growth-missing-list span,
.engineer-roadmap-checks button,
.engineer-tag-cloud button {
  border: 1px solid rgba(124, 77, 255, 0.18);
  border-radius: 999px;
  background: #f3edff;
  color: #7c4dff;
  padding: 8px 12px;
  font-weight: 900;
}

.engineer-tag-cloud {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

.engineer-tag-group {
  padding: 12px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: #f8fbff;
}

.engineer-tag-group header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.engineer-tag-group header strong {
  color: #111827;
  font-weight: 950;
}

.engineer-tag-group header span {
  color: #8a97ad;
  font-size: 12px;
  font-weight: 900;
}

.engineer-tag-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.engineer-tag-group.tag-group-strong {
  background: linear-gradient(135deg, #f0fdf4 0%, #f7f2ff 100%);
}

.engineer-tag-group.tag-group-growing {
  background: #eff6ff;
}

.engineer-tag-group.tag-group-weak {
  background: #fff7ed;
}

.growth-weak-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fbff, #f4efff);
  border: 1px solid rgba(124, 77, 255, 0.14);
}

.growth-weak-action strong {
  display: block;
  margin: 4px 0;
  color: #111827;
  font-size: 18px;
  font-weight: 950;
}

.growth-evidence-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(34, 197, 94, 0.12), transparent 34%),
    radial-gradient(circle at 12% 0%, rgba(124, 77, 255, 0.1), transparent 30%),
    rgba(255, 255, 255, 0.96);
}

.growth-evidence-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.growth-evidence-chain::before {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  top: 30px;
  height: 2px;
  background: linear-gradient(90deg, #7c4dff, #5b8cff, #22c55e);
  opacity: 0.42;
}

.growth-evidence-node {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.growth-evidence-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(124, 77, 255, 0.22);
  border-radius: 50%;
  background: #f3edff;
  box-shadow: 0 8px 20px rgba(124, 77, 255, 0.14);
}

.growth-evidence-marker b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #7c4dff;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.growth-evidence-node.latest .growth-evidence-marker b {
  background: #22c55e;
}

.growth-evidence-content {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e8edf5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.growth-evidence-node.latest .growth-evidence-content {
  border-color: rgba(34, 197, 94, 0.24);
  background: linear-gradient(180deg, #fff, #f6fff9);
}

.growth-evidence-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  margin-bottom: 12px;
}

.growth-evidence-title span {
  grid-column: 1 / -1;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.growth-evidence-title strong {
  color: #111827;
  font-size: 18px;
  font-weight: 950;
}

.growth-evidence-title em {
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3edff;
  color: #7c4dff;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.growth-evidence-content dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.growth-evidence-content dl div {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fbff;
}

.growth-evidence-content dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.growth-evidence-content dd {
  margin: 4px 0 0;
  color: #334155;
  font-weight: 850;
  line-height: 1.5;
}

.growth-module-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 98% 12%, rgba(34, 197, 94, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 255, 0.96));
}

.growth-module-action.compact {
  margin-top: 14px;
  background:
    radial-gradient(circle at 2% 20%, rgba(34, 197, 94, 0.12), transparent 32%),
    rgba(255, 255, 255, 0.88);
}

.growth-module-action span {
  display: block;
  margin-bottom: 4px;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.growth-module-action strong {
  display: block;
  color: #111827;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.35;
}

.growth-heatmap-card {
  background:
    radial-gradient(circle at 8% 8%, rgba(124, 77, 255, 0.1), transparent 30%),
    radial-gradient(circle at 96% 18%, rgba(34, 197, 94, 0.12), transparent 32%),
    rgba(255, 255, 255, 0.96);
}

.growth-heatmap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: stretch;
}

.growth-heatmap-board {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e8edf5;
  border-radius: 18px;
  background: #fff;
  overflow-x: auto;
}

.growth-heatmap-months {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  min-width: 292px;
  margin-bottom: 10px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
}

.growth-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(14, 16px);
  grid-auto-rows: 16px;
  gap: 6px;
  min-width: 292px;
  margin: 0 0 18px;
}

.growth-heatmap-grid i,
.growth-heatmap-legend i {
  display: block;
  border-radius: 5px;
  background: #edf2f7;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

.growth-heatmap-grid i[data-level="1"],
.growth-heatmap-legend i[data-level="1"] { background: #ddd3ff; }
.growth-heatmap-grid i[data-level="2"],
.growth-heatmap-legend i[data-level="2"] { background: #a78bfa; }
.growth-heatmap-grid i[data-level="3"],
.growth-heatmap-legend i[data-level="3"] {
  background: linear-gradient(135deg, #7c4dff, #4f46e5);
}

.growth-heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.growth-heatmap-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.growth-heatmap-legend i {
  width: 12px;
  height: 12px;
}

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

.growth-heatmap-kpis article {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fbff);
}

.growth-heatmap-kpis span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.growth-heatmap-kpis strong {
  display: block;
  margin: 6px 0;
  color: #111827;
  font-size: 28px;
  line-height: 1.05;
  font-weight: 950;
}

.growth-heatmap-kpis p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.growth-history-list,
.engineer-job-list {
  display: grid;
  gap: 10px;
}

.engineer-job-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background:
    radial-gradient(circle at 98% 0%, rgba(124, 77, 255, 0.1), transparent 30%),
    #fff;
  text-align: left;
}

.engineer-job-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.engineer-job-card header span {
  color: #111827;
  font-weight: 950;
}

.engineer-job-card header strong {
  color: #7c4dff;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}

.engineer-job-card > i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f8;
}

.engineer-job-card > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff, #22c55e);
}

.engineer-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.engineer-job-tags em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.engineer-job-tags span {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.engineer-job-tags.good span {
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
}

.engineer-job-tags.gap span {
  color: #ea580c;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.engineer-job-card > button {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(124, 77, 255, 0.2);
  border-radius: 12px;
  background: #f3edff;
  color: #7c4dff;
  font-weight: 950;
  cursor: pointer;
}

.growth-job-card {
  background:
    radial-gradient(circle at 100% 4%, rgba(91, 140, 255, 0.12), transparent 32%),
    radial-gradient(circle at 4% 96%, rgba(124, 77, 255, 0.1), transparent 32%),
    rgba(255, 255, 255, 0.96);
}

.growth-job-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: stretch;
}

.growth-job-match-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.growth-job-match-list button {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid #e8edf5;
  border-radius: 18px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.growth-job-match-list button:hover,
.growth-job-match-list button.active {
  border-color: rgba(124, 77, 255, 0.34);
  box-shadow: 0 16px 34px rgba(124, 77, 255, 0.12);
  transform: translateY(-1px);
}

.growth-job-ring {
  --match: 72;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 58%, transparent 60%),
    conic-gradient(#7c4dff calc(var(--match) * 1%), #e9eef6 0);
}

.growth-job-ring strong {
  color: #7c4dff;
  font-size: 18px;
  font-weight: 950;
}

.growth-job-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.growth-job-copy header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.growth-job-copy header strong {
  color: #111827;
  font-size: 16px;
  font-weight: 950;
}

.growth-job-copy header span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f3edff;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.growth-job-copy p {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.growth-job-copy p b {
  color: #94a3b8;
  font-size: 12px;
}

.growth-job-plan-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(124, 77, 255, 0.2);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #f7f4ff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.growth-job-plan-head span {
  display: block;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.growth-job-plan-head strong {
  display: block;
  margin: 6px 0;
  color: #111827;
  font-size: 22px;
  font-weight: 950;
}

.growth-job-plan-head p,
.growth-job-plan-footer p {
  margin: 0;
  color: #64748b;
  font-weight: 850;
  line-height: 1.55;
}

.growth-job-plan-score {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: end;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #ece7ff;
}

.growth-job-plan-score span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.growth-job-plan-score strong {
  color: #7c4dff;
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
}

.growth-job-plan-score em {
  justify-self: end;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #16a34a;
  font-style: normal;
  font-weight: 950;
}

.growth-job-plan-steps {
  display: grid;
  gap: 10px;
}

.growth-job-plan-steps article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #edf1f7;
}

.growth-job-plan-steps b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.growth-job-plan-steps span {
  color: #334155;
  font-weight: 900;
}

.growth-job-plan-footer {
  display: grid;
  gap: 12px;
}

.growth-next-plan {
  display: grid;
  gap: 16px;
}

.growth-next-plan-cta {
  padding: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 77, 255, 0.14), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(91, 140, 255, 0.12), transparent 34%),
    linear-gradient(135deg, #fff, #f8fbff);
}

.growth-next-plan-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 34px rgba(124, 77, 255, 0.08);
}

.growth-next-plan-hero h3 {
  margin: 4px 0 6px;
  color: #111827;
  font-size: 30px;
  font-weight: 950;
}

.growth-next-plan-hero p {
  margin: 0;
  color: #64748b;
  font-weight: 850;
  line-height: 1.55;
}

.growth-next-plan-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 220px;
}

.growth-next-plan-meta span {
  display: grid;
  place-items: center;
  min-width: 64px;
  padding: 9px 12px;
  border: 1px solid #ece7ff;
  border-radius: 14px;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.growth-next-plan-meta b {
  display: block;
  color: #7c4dff;
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
}

.growth-plan-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.growth-plan-steps button {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.growth-plan-steps button:hover {
  border-color: rgba(124, 77, 255, 0.28);
  box-shadow: 0 14px 30px rgba(124, 77, 255, 0.1);
}

.growth-step-order {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3edff;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.growth-plan-steps strong {
  color: #111827;
  font-size: 18px;
  font-weight: 950;
}

.growth-plan-steps em {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #16a34a;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
}

.growth-plan-steps p {
  margin: 0;
  color: #64748b;
  font-weight: 850;
  line-height: 1.55;
}

.growth-plan-steps p b {
  color: #334155;
  font-weight: 950;
}

.growth-history-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.growth-history-list article {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.growth-history-item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.growth-history-item header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.growth-history-item header strong {
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3edff;
  color: #7c4dff;
  font-size: 13px;
  font-weight: 950;
}

.growth-history-item h4 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 950;
}

.growth-history-item dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.growth-history-item dl div {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fbff;
}

.growth-history-item dt {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 950;
}

.growth-history-item dd {
  margin: 4px 0 0;
  color: #334155;
  font-weight: 900;
  line-height: 1.45;
}

.growth-history-empty,
.growth-report-empty-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.75fr);
  gap: 22px;
  align-items: center;
  padding: 22px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 77, 255, 0.12), transparent 34%),
    linear-gradient(135deg, #fff, #f8fbff);
}

.growth-history-empty > div:first-child,
.growth-report-empty-inline > div:first-child {
  display: grid;
  gap: 8px;
}

.growth-history-empty span,
.growth-report-empty-inline h4 {
  color: #111827;
  font-size: 24px;
  font-weight: 950;
}

.growth-history-empty strong,
.growth-report-empty-inline p {
  color: #475569;
  font-weight: 850;
  line-height: 1.6;
}

.growth-history-empty ol,
.growth-report-empty-inline ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.growth-history-empty li,
.growth-report-empty-inline li {
  position: relative;
  padding: 10px 12px 10px 38px;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  background: #fff;
  color: #334155;
  font-weight: 900;
}

.growth-history-empty li::before,
.growth-report-empty-inline li::before {
  content: counter(list-item);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.growth-history-empty-actions,
.growth-report-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1 / -1;
}

.engineer-profile-page {
  padding-bottom: 8px;
}

.engineer-hero-card {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(240px, 0.72fr) minmax(380px, 1.28fr);
  gap: 20px;
  align-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(91, 140, 255, 0.12), transparent 32%),
    radial-gradient(circle at 52% 6%, rgba(124, 77, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #f5f1ff 100%);
}

.engineer-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.engineer-avatar {
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e9e4ff;
  overflow: hidden;
  box-shadow: 0 0 0 4px #eef2ff;
  cursor: pointer;
  flex: 0 0 auto;
}

.engineer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.engineer-identity h2 {
  margin: 4px 0 10px;
  color: #111827;
  font-size: 30px;
  line-height: 1.08;
}

.engineer-identity-copy {
  min-width: 0;
}

.engineer-identity-copy dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.engineer-identity-copy dl div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.engineer-identity-copy dt,
.engineer-identity-copy dd {
  margin: 0;
  line-height: 1.28;
}

.engineer-identity-copy dt {
  color: #8a97ad;
  font-size: 12px;
  font-weight: 950;
}

.engineer-identity-copy dd {
  color: #111827;
  font-size: 14px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.engineer-score-core strong {
  color: #7c4dff;
  font-size: 72px;
  line-height: 1;
}

.engineer-score-core {
  min-height: 188px;
  padding: 20px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 4%, rgba(34, 197, 94, 0.12), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(124, 77, 255, 0.14), transparent 38%),
    linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 16px 36px rgba(124, 77, 255, 0.12);
}

.engineer-score-core span,
.engineer-score-core p {
  display: block;
  margin: 0;
  color: #64748b;
  font-weight: 900;
}

.engineer-score-core i {
  display: block;
  height: 7px;
  margin-top: 12px;
  border-radius: 999px;
  background: #e9eef6;
  overflow: hidden;
}

.engineer-score-core i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff, #22c55e);
}

.engineer-score-core em {
  color: #64748b;
  font-style: normal;
  font-weight: 900;
  font-size: 18px;
}

.engineer-profile-insights {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.engineer-ai-summary {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f6f2ff 0%, #f8fbff 100%);
  border: 1px solid rgba(124, 77, 255, 0.12);
}

.engineer-ai-summary strong {
  color: #7c4dff;
}

.engineer-mini-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.engineer-mini-metrics div {
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}

.engineer-mini-metrics strong {
  display: block;
  color: #111827;
  font-size: 21px;
  line-height: 1.15;
  white-space: nowrap;
}

.engineer-first-screen-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, rgba(91, 140, 255, 0.12), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 48%, #f6f2ff 100%);
}

.engineer-first-screen-strip article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 132px;
  padding: 14px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  min-width: 0;
}

.engineer-first-screen-strip span {
  color: #8a97ad;
  font-size: 12px;
  font-weight: 950;
}

.engineer-first-screen-strip strong {
  color: #111827;
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.engineer-first-screen-strip p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}

.engineer-next-action {
  border-color: rgba(124, 77, 255, 0.22) !important;
  background:
    radial-gradient(circle at 96% 8%, rgba(34, 197, 94, 0.14), transparent 34%),
    linear-gradient(135deg, #f8fbff 0%, #f6f2ff 100%) !important;
}

.engineer-score-answer {
  border-color: rgba(124, 77, 255, 0.22) !important;
  background:
    radial-gradient(circle at 92% 6%, rgba(124, 77, 255, 0.16), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f6f2ff 100%) !important;
}

.engineer-score-answer strong {
  color: #7c4dff;
  font-size: clamp(20px, 1.55vw, 28px);
}

.engineer-next-action .primary-btn {
  width: 100%;
  min-height: 34px;
  margin-top: auto;
  padding: 8px 10px;
}

.engineer-two-column {
  grid-template-columns: minmax(360px, 0.8fr) minmax(560px, 1.2fr);
}

.engineer-two-column.lower {
  grid-template-columns: 0.9fr 1.1fr;
}

.engineer-radar-layout {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 170px;
  gap: 16px;
  align-items: center;
}

.engineer-radar-svg {
  width: 100%;
  min-height: 260px;
}

.engineer-radar-ring {
  fill: none;
  stroke: #e8ddff;
  stroke-width: 1;
}

.engineer-radar-axis line {
  stroke: #ece5ff;
}

.engineer-radar-axis text {
  fill: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.engineer-radar-shape {
  fill: rgba(124, 77, 255, 0.22);
  stroke: #7c4dff;
  stroke-width: 3;
}

.engineer-radar-dot {
  fill: #7c4dff;
}

.engineer-radar-hit {
  cursor: pointer;
  outline: none;
}

.engineer-radar-hit:hover text,
.engineer-radar-hit:focus-visible text {
  fill: #7c4dff;
  font-weight: 950;
}

.engineer-radar-side {
  display: grid;
  gap: 8px;
}

.engineer-radar-side strong {
  color: #111827;
}

.engineer-radar-side button {
  display: flex;
  justify-content: space-between;
  border: 1px solid #e8edf5;
  border-radius: 12px;
  background: #f8fbff;
  padding: 10px;
  color: #334155;
  font-weight: 900;
  cursor: pointer;
}

.engineer-radar-side button.radar-strength {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #14532d;
}

.engineer-radar-side button.radar-strength b {
  color: #16a34a;
}

.engineer-radar-side button.weak {
  background: #fff7ed;
  border-color: #fed7aa;
}

.engineer-radar-side button.weak b {
  color: #f97316;
}

.engineer-grid-three {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr 1fr;
  gap: 24px;
}

.engineer-tag-cloud button.tag-strong {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #059669;
}

.engineer-tag-cloud button.tag-growing {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

.engineer-tag-cloud button.tag-weak {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #ea580c;
}

.engineer-tag-cloud button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.engineer-tag-cloud button span,
.engineer-suggestions article > span {
  color: inherit;
  font-weight: 950;
}

.engineer-tag-cloud button b {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: currentColor;
  font-size: 12px;
  font-weight: 950;
}

.engineer-project-card {
  display: grid;
  gap: 12px;
}

.engineer-project-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background:
    radial-gradient(circle at 96% 6%, rgba(124, 77, 255, 0.08), transparent 32%),
    #fff;
}

.engineer-project-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.engineer-project-head span b {
  color: #7c4dff;
  font-size: 18px;
}

.engineer-project-evidence,
.engineer-project-risk {
  display: grid;
  gap: 8px;
}

.engineer-project-evidence > span,
.engineer-project-risk > span {
  color: #8a97ad;
  font-size: 12px;
  font-weight: 950;
}

.engineer-project-evidence div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.engineer-project-evidence em {
  padding: 6px 9px;
  border-radius: 999px;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.engineer-project-risk ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.engineer-project-risk li {
  color: #ea580c;
  font-weight: 850;
  line-height: 1.45;
}

.interviewer-impression {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}

.interviewer-impression.good {
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.interviewer-impression.warn {
  background: #fff7ed;
  border-color: #fed7aa;
}

.interviewer-impression > strong {
  color: #111827;
  font-weight: 950;
}

.interviewer-impression p {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: #334155;
  font-weight: 850;
  line-height: 1.45;
}

.interviewer-impression.good p {
  grid-template-columns: 22px minmax(0, 1fr);
}

.interviewer-impression p i {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.interviewer-impression.good p i {
  color: #fff;
  background: #22c55e;
}

.interviewer-impression.warn p i {
  color: #fff;
  background: #f97316;
}

.interviewer-impression button {
  border: 0;
  border-radius: 999px;
  background: #7c4dff;
  color: #fff;
  padding: 5px 10px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.interviewer-followups {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 16px;
  background: #f8fbff;
}

.interviewer-followups strong {
  color: #111827;
}

.interviewer-followups button {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  border-radius: 12px;
  background: #fff;
  color: #334155;
  text-align: left;
  font-weight: 900;
  cursor: pointer;
}

.engineer-roadmap-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 77, 255, 0.14), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(91, 140, 255, 0.1), transparent 30%),
    #fff;
}

.engineer-roadmap {
  display: grid;
  grid-template-columns: minmax(118px, 0.72fr) minmax(180px, 1fr) minmax(138px, 0.82fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
}

.engineer-roadmap-level {
  min-height: 120px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 16px;
  border: 1px solid #e8edf5;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
}

.engineer-roadmap-level span,
.engineer-roadmap-summary span,
.engineer-roadmap-step span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.engineer-roadmap-level strong {
  color: #111827;
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
}

.engineer-roadmap-level em {
  color: #475569;
  font-style: normal;
  font-weight: 900;
}

.engineer-roadmap-level.current {
  border-color: rgba(124, 77, 255, 0.22);
  background: linear-gradient(135deg, #f6f1ff, #fff);
}

.engineer-roadmap-level.next {
  border-color: rgba(34, 197, 94, 0.22);
  background: linear-gradient(135deg, #ecfdf5, #fff);
}

.engineer-roadmap-bridge {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 120px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.08)),
    #fff;
  border: 1px dashed rgba(124, 77, 255, 0.24);
}

.engineer-roadmap-bridge i {
  position: relative;
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f8;
}

.engineer-roadmap-bridge i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff, #22c55e);
  box-shadow: 0 0 18px rgba(124, 77, 255, 0.24);
}

.engineer-roadmap-bridge span {
  color: #7c4dff;
  font-weight: 950;
  text-align: center;
}

.engineer-roadmap-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.engineer-roadmap-summary div {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fbff;
  border: 1px solid #e8edf5;
}

.engineer-roadmap-summary strong {
  display: block;
  margin-top: 4px;
  color: #111827;
  font-size: 18px;
  font-weight: 950;
}

.engineer-roadmap-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.engineer-roadmap-checks .engineer-roadmap-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  min-height: 88px;
  padding: 12px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  color: #334155;
  text-align: left;
  cursor: pointer;
}

.engineer-roadmap-checks .engineer-roadmap-step strong {
  grid-column: 1 / -1;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.engineer-roadmap-checks .engineer-roadmap-step small {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.engineer-roadmap-checks .engineer-roadmap-step em {
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.engineer-roadmap-cta {
  width: 100%;
  min-height: 42px;
}

.engineer-suggestions {
  display: grid;
  grid-template-columns: 1fr repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.engineer-suggestions .engineer-section-head {
  grid-column: 1 / -1;
}

.engineer-suggestions article {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 178px;
  padding: 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 8%, rgba(124, 77, 255, 0.12), transparent 34%),
    #f8fbff;
  border: 1px solid #e8edf5;
}

.engineer-suggestions article > span {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3edff;
  color: #7c4dff;
  font-size: 12px;
}

.engineer-suggestion-card strong {
  color: #111827;
  font-size: 18px;
  font-weight: 950;
}

.engineer-suggestion-card p {
  margin: 0;
  color: #475569;
  font-weight: 850;
  line-height: 1.55;
}

.engineer-suggestion-card .ghost-btn {
  align-self: end;
  width: 100%;
  min-height: 38px;
  margin-top: 4px;
  border-radius: 12px;
  font-weight: 950;
}

.engineer-suggestion-card.suggestion-priority {
  border-color: rgba(249, 115, 22, 0.24);
  background:
    radial-gradient(circle at 94% 8%, rgba(249, 115, 22, 0.14), transparent 34%),
    linear-gradient(135deg, #fff7ed, #fff);
}

.engineer-suggestion-card.suggestion-priority > span {
  color: #ea580c;
  background: #ffedd5;
}

.engineer-suggestion-card.suggestion-strength {
  border-color: rgba(34, 197, 94, 0.22);
  background:
    radial-gradient(circle at 94% 8%, rgba(34, 197, 94, 0.12), transparent 34%),
    linear-gradient(135deg, #ecfdf5, #fff);
}

.engineer-suggestion-card.suggestion-strength > span {
  color: #047857;
  background: #dcfce7;
}

.engineer-suggestion-card.suggestion-longterm {
  border-color: rgba(91, 140, 255, 0.22);
  background:
    radial-gradient(circle at 94% 8%, rgba(91, 140, 255, 0.12), transparent 34%),
    linear-gradient(135deg, #eff6ff, #fff);
}

.engineer-suggestion-card.suggestion-longterm > span {
  color: #2563eb;
  background: #dbeafe;
}

.engineer-hero-card {
  position: relative;
  overflow: hidden;
}

.engineer-hero-card::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 22px;
  width: 124px;
  height: 124px;
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(124, 77, 255, 0.08)),
    conic-gradient(from 220deg, rgba(124, 77, 255, 0.16), rgba(34, 197, 94, 0.16), rgba(91, 140, 255, 0.12), rgba(124, 77, 255, 0.16));
  opacity: 0.42;
  transform: rotate(10deg);
  pointer-events: none;
}

.engineer-hero-card > * {
  position: relative;
  z-index: 1;
}

.engineer-avatar,
.engineer-score-core,
.engineer-card,
.engineer-first-screen-strip article,
.engineer-job-card,
.engineer-suggestion-card,
.engineer-project-item {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.engineer-avatar:hover,
.engineer-card:hover,
.engineer-first-screen-strip article:hover,
.engineer-job-card:hover,
.engineer-suggestion-card:hover,
.engineer-project-item:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 77, 255, 0.22);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.engineer-score-core {
  display: grid;
  align-content: center;
}

.engineer-score-core strong {
  letter-spacing: 0;
  text-shadow: 0 16px 34px rgba(124, 77, 255, 0.12);
}

.engineer-section-head span {
  color: #8a97ad;
  font-size: 12px;
  font-weight: 900;
}

.engineer-radar-side button,
.engineer-tag-cloud button,
.engineer-project-questions button,
.interviewer-followups button,
.engineer-job-card > button,
.engineer-roadmap-step,
.engineer-suggestion-card .ghost-btn {
  outline: none;
}

.engineer-radar-side button:hover,
.engineer-tag-cloud button:hover,
.engineer-project-questions button:hover,
.interviewer-followups button:hover,
.engineer-job-card > button:hover,
.engineer-roadmap-step:hover,
.engineer-suggestion-card .ghost-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 77, 255, 0.28);
  box-shadow: 0 10px 20px rgba(124, 77, 255, 0.12);
}

.engineer-project-questions {
  display: grid;
  gap: 8px;
}

.engineer-project-questions > span {
  color: #8a97ad;
  font-size: 12px;
  font-weight: 950;
}

.engineer-project-questions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.engineer-project-questions button {
  min-height: 30px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 999px;
  background: #f6f2ff;
  color: #7c4dff;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.engineer-job-card > button {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(91, 140, 255, 0.08));
}

.engineer-suggestions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.engineer-empty-state {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(360px, 1fr);
  gap: 22px;
  align-items: start;
  padding: 28px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 0%, rgba(91, 140, 255, 0.14), transparent 32%),
    radial-gradient(circle at 10% 100%, rgba(34, 197, 94, 0.12), transparent 30%),
    #fff;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.engineer-empty-state span {
  color: #7c4dff;
  font-size: 13px;
  font-weight: 950;
}

.engineer-empty-state h2 {
  margin: 10px 0;
  color: #111827;
  font-size: 30px;
}

.engineer-empty-state p {
  margin: 0;
  color: #64748b;
  line-height: 1.65;
  font-weight: 800;
}

.engineer-empty-state ol {
  counter-reset: engineer-empty-step;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.engineer-empty-state li {
  counter-increment: engineer-empty-step;
  position: relative;
  padding: 14px;
  padding-left: 54px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: #f8fbff;
}

.engineer-empty-state li::before {
  content: counter(engineer-empty-step);
  position: absolute;
  left: 14px;
  top: 16px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  font-size: 13px;
  font-weight: 950;
}

.engineer-empty-state li strong {
  color: #111827;
}

.engineer-empty-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ability-source-drawer {
  padding: 0;
  overflow: hidden;
}

.ability-source-drawer > summary {
  cursor: pointer;
  padding: 16px 20px;
  color: #7c4dff;
  font-weight: 900;
  list-style: none;
}

.ability-source-drawer > summary::-webkit-details-marker {
  display: none;
}

.ability-source-drawer[open] {
  padding-bottom: 20px;
}

.ability-source-drawer[open] > .section-grid,
.ability-source-drawer[open] > .section-card {
  margin: 0 20px 20px;
}

@media (max-width: 1280px) {
  .growth-overview-grid,
  .growth-decision-strip,
  .engineer-hero-card,
  .engineer-two-column,
  .growth-two-column,
  .engineer-grid-three,
  .engineer-empty-state {
    grid-template-columns: 1fr;
  }
  .engineer-first-screen-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .growth-decision-title,
  .growth-module-action {
    grid-template-columns: 1fr;
  }
  .growth-top3-grid,
  .growth-plan-steps,
  .growth-history-list {
    grid-template-columns: 1fr;
  }
  .growth-skill-tree,
  .engineer-skill-tree,
  .engineer-mini-metrics {
    grid-template-columns: 1fr;
  }
  .growth-weakest-layout {
    grid-template-columns: 1fr;
  }
  .growth-weak-action {
    grid-template-columns: 1fr;
  }
  .growth-evidence-chain {
    grid-template-columns: 1fr;
  }
  .growth-evidence-chain::before {
    top: 0;
    bottom: 0;
    left: 22px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .growth-heatmap-layout {
    grid-template-columns: 1fr;
  }
  .growth-job-layout,
  .growth-job-match-list {
    grid-template-columns: 1fr;
  }
  .growth-next-plan-hero {
    grid-template-columns: 1fr;
  }
  .growth-next-plan-meta {
    justify-content: flex-start;
  }
  .growth-history-empty,
  .growth-report-empty-inline {
    grid-template-columns: 1fr;
  }
  .engineer-suggestions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .engineer-first-screen-strip {
    grid-template-columns: 1fr;
  }
}

/* Sidebar no-hover structural lock.
   The sidebar may highlight hovered items, but mouse movement must never
   expand, collapse, resize, or reveal hidden labels. The toggle button is the
   only control allowed to change sidebar structure. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover),
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
    grid-template-columns: 208px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover),
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within),
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar {
    width: 208px !important;
    min-width: 208px !important;
    max-width: 208px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar-section {
    display: none !important;
  }
}

/* Interview AI coach final: mentor guidance, no overlap, expandable follow-ups. */
body[data-active-panel="interview"] .interview-copilot-card {
  position: sticky !important;
  top: 112px !important;
  align-self: start !important;
  max-height: calc(100vh - 176px) !important;
  overflow: hidden !important;
}

body[data-active-panel="interview"] .interview-ai-coach-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  max-height: calc(100vh - 276px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
  overscroll-behavior: contain;
}

body[data-active-panel="interview"] .coach-live-score-card,
body[data-active-panel="interview"] .coach-structure-card,
body[data-active-panel="interview"] .coach-followup-card {
  position: relative !important;
  display: grid !important;
  gap: 12px !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
}

body[data-active-panel="interview"] .coach-live-score-card > p,
body[data-active-panel="interview"] .coach-followup-card > p {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  color: #475569 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

body[data-active-panel="interview"] .coach-completeness-main {
  display: grid !important;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr) !important;
  align-items: end !important;
}

body[data-active-panel="interview"] .coach-completeness-main strong {
  font-size: 38px !important;
  line-height: 1 !important;
}

body[data-active-panel="interview"] .coach-completeness-track {
  width: 100% !important;
}

body[data-active-panel="interview"] .coach-structure-list,
body[data-active-panel="interview"] .coach-followup-list {
  display: grid !important;
  gap: 8px !important;
  min-height: 0 !important;
}

body[data-active-panel="interview"] .coach-structure-item {
  min-height: 36px !important;
  padding: 0 10px !important;
}

body[data-active-panel="interview"] .coach-followup-list button.is-collapsed {
  display: none !important;
}

body[data-active-panel="interview"] .coach-followup-card.is-expanded .coach-followup-list button {
  display: block !important;
}

body[data-active-panel="interview"] .coach-followup-toggle {
  width: 100% !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(124, 77, 255, 0.18) !important;
  border-radius: 14px !important;
  color: #7c4dff !important;
  background: rgba(124, 77, 255, 0.08) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

body[data-active-panel="interview"] .coach-followup-toggle[hidden] {
  display: none !important;
}

body[data-active-panel="interview"] .coach-followup-list button {
  cursor: pointer !important;
}

@media (max-width: 1320px) {
  body[data-active-panel="interview"] .interview-copilot-card {
    position: static !important;
    max-height: none !important;
  }

  body[data-active-panel="interview"] .interview-ai-coach-panel {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Debug Mission owns the coaching area, so the global XiaoWen dock is hidden here. */
body[data-active-panel="debug-lab"] #companionDock,
body[data-active-panel="debug-lab"] #companionAmbientStage,
body[data-active-panel="debug-lab"] #companionMiniBubble {
  display: none !important;
}

body[data-active-panel="debug-lab"] #companionDock,
body[data-active-panel="debug-lab"] #companionAmbientStage,
body[data-active-panel="debug-lab"] #companionMiniBubble {
  display: none !important;
}

/* Debug Mission final layout */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.debug-mission-shell {
  display: grid;
  gap: 16px;
  color: #0f172a;
  opacity: 1 !important;
  filter: none !important;
}

body[data-active-panel="debug-lab"] #debugTrainingBoard,
body[data-active-panel="debug-lab"] #debugTrainingBoard .debug-mission-shell {
  opacity: 1 !important;
  filter: none !important;
}

body[data-active-panel="debug-lab"] .panel[data-panel="debug-lab"].active {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.debug-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.debug-topbar-actions[hidden] {
  display: none !important;
}

.debug-topbar-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.debug-topbar-actions button:first-child::before {
  content: "▥";
  margin-right: 7px;
  color: #7c4dff;
}

.debug-topbar-actions button:last-child::before {
  content: "▣";
  margin-right: 7px;
  color: #7c4dff;
}

.debug-mission-hero,
.debug-card {
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.debug-mission-hero {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(560px, 1.22fr);
  gap: 26px;
  align-items: stretch;
  padding: 22px 24px;
}

.debug-mission-head {
  display: grid;
  align-content: center;
  gap: 18px;
  min-width: 0;
}

.debug-mission-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: #5b21b6;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.debug-mission-head .eyebrow span {
  padding: 4px 10px;
  border: 1px solid rgba(124, 77, 255, 0.24);
  border-radius: 999px;
  background: #f2efff;
  color: #7c4dff;
  font-size: 12px;
}

.debug-mission-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 26px;
  line-height: 1.18;
}

.debug-mission-case-title {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 6px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(124, 77, 255, 0.2);
  border-radius: 16px;
  background: linear-gradient(135deg, #f5f1ff 0%, #ffffff 100%);
  box-shadow: 0 10px 24px rgba(124, 77, 255, 0.08);
}

.debug-mission-case-title span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #7c4dff;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.debug-mission-case-title strong {
  min-width: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
}

.debug-mission-head p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
}

.debug-mission-head p b,
.debug-mission-meta span b {
  color: #334155;
  font-weight: 950;
}

.debug-mission-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.debug-mission-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.debug-mission-head .debug-case-tabs {
  justify-content: flex-start;
}

.debug-mission-progress-area {
  display: grid;
  align-content: center;
  gap: 18px;
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid rgba(203, 213, 225, 0.68);
}

.debug-mission-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.debug-mission-progress-head strong {
  color: #0f172a;
  font-size: 16px;
}

.debug-mission-progress-head span {
  margin-left: auto;
  color: #334155;
  font-size: 14px;
  font-weight: 900;
}

.debug-mission-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.debug-mission-steps::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c4dff 0 22%, #e2e8f0 22% 100%);
}

.debug-mission-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 74px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font: inherit;
}

.debug-mission-step span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: #ffffff;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.debug-mission-step strong {
  max-width: 96px;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.debug-mission-step.done span,
.debug-mission-step.current span {
  border-color: rgba(124, 77, 255, 0.4);
  background: #7c4dff;
  color: #ffffff;
}

.debug-mission-step.done,
.debug-mission-step.current {
  color: #5b21b6;
}

.debug-mission-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.1fr) minmax(320px, 0.78fr) minmax(360px, 0.92fr);
  gap: 16px;
  align-items: stretch;
}

.debug-card {
  min-width: 0;
  padding: 18px;
}

.debug-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 14px;
}

.debug-card-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.25;
}

.debug-card-head h3 span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(124, 77, 255, 0.28);
  border-radius: 50%;
  background: #f2efff;
  color: #7c4dff;
  font-size: 13px;
  font-weight: 900;
}

.debug-phenomena-card {
  grid-column: 1 / span 2;
  align-self: start;
}

.debug-root-card {
  grid-column: 3;
  align-self: start;
}

.debug-work-card {
  grid-column: 1;
  grid-row: 2 / span 2;
}

.debug-evidence-card {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.debug-wave-card {
  grid-column: 3;
  grid-row: 2;
}

.debug-coach-card {
  grid-column: 3;
  grid-row: 3;
}

.debug-conclusion-card {
  grid-column: 1 / -1;
}

.debug-phenomena-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.debug-phenomenon-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 118px;
  padding: 14px 14px 42px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 10px;
  background: #ffffff;
}

.debug-phenomenon-card b {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.debug-phenomenon-card span {
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.debug-phenomenon-card strong {
  color: #0f172a;
  font-size: 26px;
  line-height: 1;
}

.debug-phenomenon-card small {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.debug-phenomenon-card em {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.debug-phenomenon-card em.danger,
.debug-root-row em.danger {
  background: #ffe4e6;
  color: #e11d48;
}

.debug-phenomenon-card em.success {
  background: #dcfce7;
  color: #16a34a;
}

.debug-phenomenon-card em.warn {
  background: #fef3c7;
  color: #d97706;
}

.debug-root-list {
  display: grid;
  gap: 16px;
  padding: 4px 0;
}

.debug-root-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(110px, 0.9fr) auto;
  gap: 12px;
  align-items: center;
}

.debug-root-row strong {
  color: #0f172a;
  font-size: 14px;
}

.debug-root-row i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.debug-root-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
}

.debug-root-row em {
  min-width: 76px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.debug-root-row em.info {
  background: #dbeafe;
  color: #2563eb;
}

.debug-root-row em.low {
  background: #eef2ff;
  color: #64748b;
}

.debug-root-agent-head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 12%, rgba(124, 77, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #ffffff, #f8fbff);
}

.debug-root-agent-head span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f2efff;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.debug-root-agent-head strong {
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
}

.debug-root-agent-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.debug-root-main,
.debug-root-score,
.debug-root-verify {
  min-width: 0;
}

.debug-root-main {
  display: grid;
  gap: 7px;
}

.debug-root-main span,
.debug-root-verify span {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.debug-root-main p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.debug-root-score {
  display: grid;
  gap: 8px;
  align-content: center;
}

.debug-root-score b {
  color: #7c4dff;
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.debug-root-score i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.debug-root-score i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
}

.debug-root-score em {
  width: fit-content;
  min-width: 72px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.debug-root-verify {
  display: grid;
  gap: 7px;
  align-content: center;
  padding: 10px 12px;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 12px;
  background: #ffffff;
}

.debug-root-verify strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
}

.debug-link-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  border-radius: 10px;
  background: #fbfaff;
  color: #7c4dff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.debug-work-steps {
  display: grid;
  gap: 10px;
}

.debug-work-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
}

.debug-work-step span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-weight: 900;
}

.debug-work-step strong {
  display: block;
  margin-bottom: 3px;
  color: #0f172a;
  font-size: 14px;
}

.debug-work-step p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.debug-work-step em {
  min-width: 58px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.debug-work-step.done {
  border-color: rgba(34, 197, 94, 0.26);
  background: #f0fdf4;
}

.debug-work-step.done span,
.debug-work-step.done em {
  background: #dcfce7;
  color: #16a34a;
}

.debug-work-step.active {
  border-color: rgba(124, 77, 255, 0.34);
  background: #f6f3ff;
}

.debug-work-step.active span,
.debug-work-step.active em {
  background: #7c4dff;
  color: #ffffff;
}

.debug-chain-list {
  position: relative;
  display: grid;
  gap: 14px;
  padding-left: 18px;
}

.debug-chain-list::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(#7c4dff, #22c55e, #94a3b8);
}

.debug-chain-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 7px 12px;
  align-items: center;
}

.debug-chain-item > span {
  position: absolute;
  left: -22px;
  top: 6px;
  width: 12px;
  height: 12px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #7c4dff;
  box-shadow: 0 0 0 2px rgba(124, 77, 255, 0.25);
}

.debug-chain-item.good > span,
.debug-chain-item.critical > span,
.debug-chain-item.recorded > span {
  background: #22c55e;
}

.debug-chain-item.current > span {
  background: #7c4dff;
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.18), 0 0 0 8px rgba(124, 77, 255, 0.08);
}

.debug-chain-item.preview > span {
  background: #94a3b8;
}

.debug-chain-item time {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.debug-chain-item strong {
  color: #0f172a;
  font-size: 14px;
}

.debug-chain-item div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.debug-chain-item p {
  grid-column: auto;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.debug-chain-item em {
  justify-self: end;
  min-width: 72px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
}

.debug-chain-item.recorded em {
  background: #dcfce7;
  color: #16a34a;
}

.debug-chain-item.current em {
  background: #f2efff;
  color: #7c4dff;
}

.debug-waveform-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.debug-waveform-toolbar select {
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.debug-waveform-svg {
  display: block;
  width: 100%;
  height: 250px;
  border-radius: 16px;
}

.debug-coach-callout {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(124, 77, 255, 0.2);
  border-radius: 12px;
  background: linear-gradient(135deg, #f8f5ff, #ffffff);
}

.debug-coach-callout strong {
  color: #0f172a;
  font-size: 14px;
}

.debug-coach-callout p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

.debug-coach-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.debug-coach-chips button {
  min-height: 34px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.debug-conclusion-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(260px, 1fr) minmax(320px, 1.05fr) minmax(260px, 0.85fr);
  gap: 16px;
  align-items: stretch;
}

.debug-root-verdict,
.debug-proof-list,
.debug-before-after,
.debug-next-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 12px;
  background: #ffffff;
}

.debug-root-verdict,
.debug-next-card {
  display: grid;
  gap: 10px;
  align-content: center;
}

.debug-root-verdict span,
.debug-proof-list span,
.debug-before-after span,
.debug-next-card span {
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.debug-root-verdict strong {
  color: #0f172a;
  font-size: 22px;
  line-height: 1.2;
}

.debug-root-verdict em,
.debug-before-after em {
  color: #16a34a;
  font-style: normal;
  font-weight: 900;
}

.debug-proof-list {
  display: grid;
  gap: 6px;
}

.debug-proof-list p,
.debug-next-card p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.debug-before-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.debug-before-after span {
  grid-column: 1 / -1;
}

.debug-before-after div {
  display: grid;
  gap: 5px;
  min-height: 110px;
  padding: 12px;
  border-radius: 10px;
  background: #f8fafc;
}

.debug-before-after strong {
  color: #0f172a;
}

.debug-before-after p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.debug-before-after b {
  color: #94a3b8;
  font-size: 20px;
}

.debug-next-card .primary-btn {
  width: 100%;
}

.debug-proof-note {
  margin: 14px 0 0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
}

@media (max-width: 1480px) {
  .debug-mission-hero {
    grid-template-columns: 1fr;
  }

  .debug-mission-progress-area {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(203, 213, 225, 0.68);
    padding-top: 18px;
  }

  .debug-mission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debug-phenomena-card,
  .debug-root-card,
  .debug-work-card,
  .debug-evidence-card,
  .debug-wave-card,
  .debug-coach-card,
  .debug-conclusion-card {
    grid-column: auto;
    grid-row: auto;
  }

  .debug-phenomena-card,
  .debug-conclusion-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .debug-mission-grid,
  .debug-conclusion-grid {
    grid-template-columns: 1fr;
  }

  .debug-phenomena-grid,
  .debug-mission-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debug-mission-steps::before {
    display: none;
  }
}

/* Debug Mission flow v215: one case, one chain, one conclusion. */
body[data-active-panel="debug-lab"] .debug-current-case-card {
  grid-template-columns: minmax(280px, 0.7fr) minmax(260px, 0.42fr) minmax(520px, 1.15fr);
  align-items: center;
}

body[data-active-panel="debug-lab"] .debug-current-case-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, #fbfaff, #ffffff);
}

body[data-active-panel="debug-lab"] .debug-current-case-panel span {
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

body[data-active-panel="debug-lab"] .debug-current-case-panel strong {
  color: #0f172a;
  font-size: 20px;
  line-height: 1.25;
}

body[data-active-panel="debug-lab"] .debug-current-case-panel p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

body[data-active-panel="debug-lab"] .debug-case-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

body[data-active-panel="debug-lab"] .debug-case-progress i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef7;
}

body[data-active-panel="debug-lab"] .debug-case-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
}

body[data-active-panel="debug-lab"] .debug-case-progress em {
  color: #7c4dff;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

body[data-active-panel="debug-lab"] .debug-mission-flow {
  display: grid;
  gap: 16px;
}

body[data-active-panel="debug-lab"] .debug-flow-card {
  position: relative;
  overflow: hidden;
}

body[data-active-panel="debug-lab"] .debug-flow-card::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 54px;
  bottom: -18px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(#7c4dff, rgba(91, 140, 255, 0.24));
}

body[data-active-panel="debug-lab"] .debug-flow-card:last-child::before {
  display: none;
}

body[data-active-panel="debug-lab"] .debug-flow-card > * {
  position: relative;
  z-index: 1;
}

body[data-active-panel="debug-lab"] .debug-card-head {
  align-items: flex-start;
}

body[data-active-panel="debug-lab"] .debug-card-head p {
  margin: 2px 0 0 auto;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  text-align: right;
}

body[data-active-panel="debug-lab"] .debug-evidence-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(280px, 0.78fr) minmax(360px, 0.95fr);
  gap: 16px;
  align-items: stretch;
}

body[data-active-panel="debug-lab"] .debug-workspace-layout {
  display: grid;
  grid-template-columns: minmax(560px, 1.35fr) minmax(320px, 0.65fr);
  gap: 16px;
  align-items: stretch;
}

body[data-active-panel="debug-lab"] .debug-workflow-panel,
body[data-active-panel="debug-lab"] .debug-ai-record-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
}

body[data-active-panel="debug-lab"] .debug-workflow-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-active-panel="debug-lab"] .debug-workflow-title strong,
body[data-active-panel="debug-lab"] .debug-ai-record-panel > strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

body[data-active-panel="debug-lab"] .debug-workflow-title span,
body[data-active-panel="debug-lab"] .debug-ai-record-panel > span {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f2efff;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-panel="debug-lab"] .debug-ai-record-panel p {
  margin: 0;
  color: #475569;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
}

body[data-active-panel="debug-lab"] .debug-ai-record-list {
  display: grid;
  gap: 10px;
}

body[data-active-panel="debug-lab"] .debug-ai-record-list i {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(124, 77, 255, 0.15);
  border-radius: 12px;
  background: #ffffff;
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.5;
}

body[data-active-panel="debug-lab"] .debug-ai-record-list b {
  color: #22c55e;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-panel="debug-lab"] .debug-evidence-layout-proof {
  grid-template-columns: minmax(460px, 1fr) minmax(500px, 1fr);
}

body[data-active-panel="debug-lab"] .debug-evidence-layout-timeline-only {
  grid-template-columns: minmax(0, 1fr);
}

body[data-active-panel="debug-lab"] .debug-evidence-column {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 100%;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 14px;
  background: #ffffff;
}

body[data-active-panel="debug-lab"] .debug-evidence-timeline-card,
body[data-active-panel="debug-lab"] .debug-evidence-layout .debug-wave-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 14px;
  background: #ffffff;
}

body[data-active-panel="debug-lab"] .debug-evidence-layout .debug-wave-card {
  grid-column: auto;
  grid-row: auto;
}

body[data-active-panel="debug-lab"] .debug-evidence-column > strong,
body[data-active-panel="debug-lab"] .debug-evidence-timeline-card > strong,
body[data-active-panel="debug-lab"] .debug-evidence-layout .debug-wave-card > strong {
  display: block;
  margin-bottom: 12px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
}

body[data-active-panel="debug-lab"] .debug-evidence-timeline-panel {
  background:
    radial-gradient(circle at 14% 12%, rgba(124, 77, 255, 0.1), transparent 34%),
    linear-gradient(135deg, #ffffff, #f8fbff);
}

body[data-active-panel="debug-lab"] .debug-timeline-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}

body[data-active-panel="debug-lab"] .debug-timeline-title strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

body[data-active-panel="debug-lab"] .debug-timeline-title span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #f2efff;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-panel="debug-lab"] .debug-root-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 0.86fr);
  gap: 16px;
  align-items: stretch;
}

body[data-active-panel="debug-lab"] .debug-work-steps-flow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-active-panel="debug-lab"] .debug-work-steps-flow .debug-work-step {
  min-height: 78px;
}

body[data-active-panel="debug-lab"] .debug-evidence-column .debug-work-step {
  border-radius: 12px;
}

body[data-active-panel="debug-lab"] .debug-workspace-card .debug-work-step {
  min-height: 96px;
  border-radius: 14px;
}

body[data-active-panel="debug-lab"] .debug-work-step.locked {
  border-color: rgba(226, 232, 240, 0.9);
  background: #f8fafc;
  cursor: default;
}

body[data-active-panel="debug-lab"] .debug-work-step:disabled {
  opacity: 1;
}

body[data-active-panel="debug-lab"] .debug-work-step.locked span,
body[data-active-panel="debug-lab"] .debug-work-step.locked em {
  background: #e2e8f0;
  color: #94a3b8;
}

body[data-active-panel="debug-lab"] .debug-chain-list-wide {
  gap: 18px;
  padding: 8px 0 8px 22px;
}

body[data-active-panel="debug-lab"] .debug-chain-list-wide .debug-chain-item {
  grid-template-columns: 82px minmax(0, 1fr) auto;
  min-height: 86px;
  padding: 12px 14px 12px 6px;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
}

body[data-active-panel="debug-lab"] .debug-chain-list-wide .debug-chain-item.recorded {
  border-color: rgba(34, 197, 94, 0.24);
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

body[data-active-panel="debug-lab"] .debug-chain-list-wide .debug-chain-item.current {
  border-color: rgba(124, 77, 255, 0.34);
  background: linear-gradient(135deg, #f6f3ff, #ffffff);
}

body[data-active-panel="debug-lab"] .debug-chain-list-wide .debug-chain-item time {
  color: #7c4dff;
  font-size: 14px;
}

body[data-active-panel="debug-lab"] .debug-chain-list-wide .debug-chain-item strong {
  font-size: 16px;
}

body[data-active-panel="debug-lab"] .debug-chain-list-wide .debug-chain-item p {
  font-size: 13px;
}

body[data-active-panel="debug-lab"] .debug-root-list-large {
  gap: 12px;
}

body[data-active-panel="debug-lab"] .debug-root-list-large .debug-root-row {
  grid-template-columns: minmax(260px, 1.1fr) minmax(150px, 0.42fr) minmax(220px, 0.72fr);
  min-height: 118px;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.74);
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
}

body[data-active-panel="debug-lab"] .debug-root-list-large .debug-root-row strong {
  font-size: 16px;
}

body[data-active-panel="debug-lab"] .debug-root-agent-list .debug-root-row:first-child {
  border-color: rgba(225, 29, 72, 0.2);
  box-shadow: inset 4px 0 0 rgba(225, 29, 72, 0.62);
}

body[data-active-panel="debug-lab"] .debug-root-agent-list .debug-root-row:nth-child(2) {
  box-shadow: inset 4px 0 0 rgba(37, 99, 235, 0.42);
}

body[data-active-panel="debug-lab"] .debug-root-agent-list .debug-root-row:nth-child(3) {
  box-shadow: inset 4px 0 0 rgba(100, 116, 139, 0.32);
}

body[data-active-panel="debug-lab"] .debug-wave-section {
  background:
    radial-gradient(circle at 82% 8%, rgba(91, 140, 255, 0.14), transparent 32%),
    radial-gradient(circle at 14% 20%, rgba(124, 77, 255, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.98);
}

body[data-active-panel="debug-lab"] .debug-wave-core {
  display: grid;
  gap: 16px;
}

body[data-active-panel="debug-lab"] .debug-wave-context {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
}

body[data-active-panel="debug-lab"] .debug-wave-context span {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f2efff;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-panel="debug-lab"] .debug-wave-context strong {
  color: #0f172a;
  font-size: 22px;
  font-weight: 950;
}

body[data-active-panel="debug-lab"] .debug-wave-context p {
  max-width: 860px;
  margin: 0;
  color: #475569;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
}

body[data-active-panel="debug-lab"] .debug-wave-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body[data-active-panel="debug-lab"] .debug-wave-metrics div {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 14px;
  background: #ffffff;
}

body[data-active-panel="debug-lab"] .debug-wave-metrics span {
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

body[data-active-panel="debug-lab"] .debug-wave-metrics strong {
  color: #0f172a;
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

body[data-active-panel="debug-lab"] .debug-wave-metrics em {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

body[data-active-panel="debug-lab"] .debug-wave-metrics em.danger {
  background: #ffe4e6;
  color: #e11d48;
}

body[data-active-panel="debug-lab"] .debug-wave-metrics em.success {
  background: #dcfce7;
  color: #16a34a;
}

body[data-active-panel="debug-lab"] .debug-wave-section .debug-waveform-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  background: #ffffff;
}

body[data-active-panel="debug-lab"] .debug-evidence-wave .debug-waveform-card {
  display: grid;
  gap: 12px;
}

body[data-active-panel="debug-lab"] .debug-wave-section .debug-waveform-toolbar {
  max-width: 860px;
}

body[data-active-panel="debug-lab"] .debug-evidence-wave .debug-waveform-toolbar {
  max-width: 720px;
}

body[data-active-panel="debug-lab"] .debug-wave-section .debug-waveform-svg {
  height: 440px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

body[data-active-panel="debug-lab"] .debug-evidence-wave .debug-waveform-svg {
  min-height: 360px;
  height: 42vh;
  max-height: 460px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

body[data-active-panel="debug-lab"] .debug-coach-card .debug-coach-callout {
  grid-template-columns: minmax(260px, 0.55fr) minmax(420px, 1fr);
  align-items: start;
  gap: 18px;
  padding: 18px;
}

body[data-active-panel="debug-lab"] .debug-coach-card .debug-coach-callout > p {
  font-size: 18px;
  color: #0f172a;
}

body[data-active-panel="debug-lab"] .debug-coach-question-list {
  display: grid;
  gap: 10px;
}

body[data-active-panel="debug-lab"] .debug-coach-question-list button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(124, 77, 255, 0.2);
  border-radius: 12px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

body[data-active-panel="debug-lab"] .debug-link-btn.inline {
  width: auto;
  min-height: 34px;
  margin: 0;
  padding: 0 14px;
}

body[data-active-panel="debug-lab"] .debug-validation-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.9fr);
  gap: 16px;
  align-items: stretch;
}

body[data-active-panel="debug-lab"] .debug-conclusion-grid {
  grid-template-columns: minmax(260px, 0.65fr) minmax(360px, 1fr);
}

body[data-active-panel="debug-lab"] .debug-report-shell {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.04) 36%, rgba(255, 255, 255, 0.98));
}

body[data-active-panel="debug-lab"] .debug-report-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

body[data-active-panel="debug-lab"] .debug-report-title span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #7c4dff;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

body[data-active-panel="debug-lab"] .debug-report-title strong {
  color: #0f172a;
  font-size: 20px;
  line-height: 1.25;
}

body[data-active-panel="debug-lab"] .debug-report-title em {
  color: #16a34a;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

body[data-active-panel="debug-lab"] .debug-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body[data-active-panel="debug-lab"] .debug-report-item {
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 16px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
}

body[data-active-panel="debug-lab"] .debug-report-item span {
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

body[data-active-panel="debug-lab"] .debug-report-item strong {
  color: #0f172a;
  font-size: 20px;
  line-height: 1.32;
}

body[data-active-panel="debug-lab"] .debug-report-item p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

body[data-active-panel="debug-lab"] .debug-report-item.validation strong {
  color: #16a34a;
}

body[data-active-panel="debug-lab"] .debug-report-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

body[data-active-panel="debug-lab"] .debug-report-actions p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
}

body[data-active-panel="debug-lab"] .debug-root-card,
body[data-active-panel="debug-lab"] .debug-work-card,
body[data-active-panel="debug-lab"] .debug-evidence-card,
body[data-active-panel="debug-lab"] .debug-wave-card,
body[data-active-panel="debug-lab"] .debug-coach-card,
body[data-active-panel="debug-lab"] .debug-phenomena-card,
body[data-active-panel="debug-lab"] .debug-conclusion-card {
  grid-column: auto;
  grid-row: auto;
  align-self: stretch;
}

@media (max-width: 1480px) {
  body[data-active-panel="debug-lab"] .debug-current-case-card,
  body[data-active-panel="debug-lab"] .debug-evidence-layout,
  body[data-active-panel="debug-lab"] .debug-workspace-layout,
  body[data-active-panel="debug-lab"] .debug-evidence-layout-proof,
  body[data-active-panel="debug-lab"] .debug-root-layout,
  body[data-active-panel="debug-lab"] .debug-validation-layout,
  body[data-active-panel="debug-lab"] .debug-conclusion-grid,
  body[data-active-panel="debug-lab"] .debug-report-grid,
  body[data-active-panel="debug-lab"] .debug-report-title,
  body[data-active-panel="debug-lab"] .debug-report-actions,
  body[data-active-panel="debug-lab"] .debug-work-steps-flow,
  body[data-active-panel="debug-lab"] .debug-coach-card .debug-coach-callout {
    grid-template-columns: 1fr;
  }

  body[data-active-panel="debug-lab"] .debug-flow-card::before {
    display: none;
  }

  body[data-active-panel="debug-lab"] .debug-evidence-wave .debug-waveform-svg {
    min-height: 300px;
    height: 300px;
  }
}

@media (max-width: 980px) {
  body[data-active-panel="debug-lab"] .debug-wave-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-active-panel="debug-lab"] .debug-wave-section .debug-waveform-svg {
    height: 300px;
  }
}

/* AI interview training cabin v105 */
body[data-active-panel="interview"] .interview-studio {
  display: grid !important;
  gap: 16px !important;
  padding-bottom: 18px !important;
}

body[data-active-panel="interview"] .interview-training-statusbar {
  height: 72px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.88)),
    #ffffff;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

body[data-active-panel="interview"] .interview-training-title,
body[data-active-panel="interview"] .interview-training-metrics,
body[data-active-panel="interview"] .interview-training-actions {
  display: flex;
  align-items: center;
}

body[data-active-panel="interview"] .interview-training-title {
  gap: 12px;
  min-width: 0;
}

body[data-active-panel="interview"] .interview-training-title strong {
  display: block;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.2;
}

body[data-active-panel="interview"] .interview-training-title span:not(.interview-training-dot) {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body[data-active-panel="interview"] .interview-training-dot {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 12px;
  background:
    radial-gradient(circle at 38% 34%, #ffffff 0 12%, transparent 13%),
    linear-gradient(135deg, #7c4dff, #5b8cff);
  box-shadow: 0 12px 22px rgba(124, 77, 255, 0.24);
}

body[data-active-panel="interview"] .interview-training-metrics {
  gap: 8px;
}

body[data-active-panel="interview"] .interview-training-metrics span,
body[data-active-panel="interview"] .interview-training-metrics strong {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 12px;
  color: #475569;
  background: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

body[data-active-panel="interview"] .interview-training-metrics strong {
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.08);
}

body[data-active-panel="interview"] .interview-training-actions {
  gap: 8px;
  justify-content: flex-end;
}

body[data-active-panel="interview"] .danger-soft {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.18) !important;
  background: rgba(254, 242, 242, 0.86) !important;
}

body[data-active-panel="interview"] .interview-main-dashboard {
  grid-template-columns: minmax(220px, 22fr) minmax(520px, 52fr) minmax(280px, 26fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

body[data-active-panel="interview"] .interview-main-dashboard > .section-card {
  min-height: 560px !important;
  height: auto !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06) !important;
}

body[data-active-panel="interview"] .interview-setup-card,
body[data-active-panel="interview"] .interview-workspace-card,
body[data-active-panel="interview"] .interview-copilot-card {
  padding: 18px !important;
  gap: 14px !important;
  overflow: hidden;
}

body[data-active-panel="interview"] .interview-setup-card .section-head h3,
body[data-active-panel="interview"] .interview-workspace-card .section-head h3,
body[data-active-panel="interview"] .interview-copilot-card .section-head h3 {
  font-size: 18px;
  letter-spacing: 0;
}

body[data-active-panel="interview"] .interviewer-profile-card {
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.06)) !important;
}

body[data-active-panel="interview"] .active-resume-card {
  border-radius: 16px !important;
  background: #f8fbff !important;
}

body[data-active-panel="interview"] #interviewForm {
  gap: 10px !important;
}

body[data-active-panel="interview"] #interviewForm .form-actions {
  margin-top: 2px;
}

body[data-active-panel="interview"] .interview-left-flow {
  margin-top: auto;
  border-radius: 16px !important;
}

body[data-active-panel="interview"] .interview-progress-board {
  grid-template-columns: 104px minmax(0, 1fr) !important;
  border-radius: 16px !important;
}

body[data-active-panel="interview"] .interview-workspace-card .question-box {
  min-height: 154px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  color: #0f172a !important;
  font-size: 20px !important;
  line-height: 1.68 !important;
  background:
    radial-gradient(circle at 94% 10%, rgba(124, 77, 255, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(245, 248, 252, 0.92), rgba(255, 255, 255, 0.96)) !important;
}

body[data-active-panel="interview"] .coach-floating-tip {
  border-radius: 16px !important;
  background: rgba(124, 77, 255, 0.08) !important;
}

body[data-active-panel="interview"] .interview-answer-stack {
  gap: 12px !important;
}

body[data-active-panel="interview"] .interview-answer-stack > .stack-list {
  grid-template-columns: 1fr 1.25fr !important;
}

body[data-active-panel="interview"] .interview-answer-stack .answer-block {
  display: grid;
  gap: 8px;
}

body[data-active-panel="interview"] .interview-answer-stack .answer-block span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-panel="interview"] #candidateAnswer {
  min-height: 146px !important;
  max-height: 190px !important;
  border-radius: 18px !important;
  background: #f8fbff !important;
}

body[data-active-panel="interview"] .interview-state-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-active-panel="interview"] .copilot-panel {
  display: grid !important;
  gap: 12px !important;
}

body[data-active-panel="interview"] .copilot-score-card,
body[data-active-panel="interview"] .copilot-answer-frame,
body[data-active-panel="interview"] .copilot-group,
body[data-active-panel="interview"] .copilot-followup {
  border-radius: 16px !important;
  background: #f8fbff !important;
}

body[data-active-panel="interview"] .copilot-score-card strong {
  color: #7c4dff !important;
}

body[data-active-panel="interview"] .interview-bottom-actionbar {
  min-height: 80px;
  position: sticky;
  bottom: 16px;
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(420px, 640px);
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 252, 0.9)),
    #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(14px);
}

body[data-active-panel="interview"] .interview-bottom-context {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body[data-active-panel="interview"] .interview-bottom-context span {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-panel="interview"] .interview-bottom-context strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.3;
}

body[data-active-panel="interview"] .interview-bottom-actionbar .qa-inline-actions {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr 1fr 0.86fr !important;
  gap: 10px !important;
  margin: 0 !important;
}

body[data-active-panel="interview"] .interview-bottom-actionbar .primary-btn,
body[data-active-panel="interview"] .interview-bottom-actionbar .ghost-btn {
  min-height: 46px;
  border-radius: 14px;
}

body[data-active-panel="interview"] .interview-profile-dashboard {
  display: grid;
  gap: 12px;
}

body[data-active-panel="interview"] .interview-profile-dashboard section {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.86)),
    #ffffff;
}

body[data-active-panel="interview"] .interview-profile-dashboard span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-panel="interview"] .interview-profile-user {
  background:
    radial-gradient(circle at 92% 12%, rgba(124, 77, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(91, 140, 255, 0.06)),
    #ffffff !important;
}

body[data-active-panel="interview"] .interview-profile-user strong {
  color: #0f172a;
  font-size: 24px;
  line-height: 1.1;
}

body[data-active-panel="interview"] .interview-profile-user p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  font-weight: 900;
}

body[data-active-panel="interview"] .interview-profile-user em {
  width: fit-content;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.1);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-panel="interview"] .interview-profile-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-active-panel="interview"] .interview-profile-tags b {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 12px;
  color: #475569;
  background: #f1f5ff;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

body[data-active-panel="interview"] .interview-profile-ability strong,
body[data-active-panel="interview"] .interview-profile-gain strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.2;
}

body[data-active-panel="interview"] .interview-profile-ability div,
body[data-active-panel="interview"] .interview-profile-gain div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-active-panel="interview"] .interview-profile-ability b,
body[data-active-panel="interview"] .interview-profile-gain b {
  color: #7c4dff;
  font-size: 18px;
  line-height: 1;
}

body[data-active-panel="interview"] .interview-profile-ability em,
body[data-active-panel="interview"] .interview-profile-gain em {
  color: #22c55e;
  font-style: normal;
  font-size: 18px;
  font-weight: 950;
}

body[data-active-panel="interview"] .interview-profile-form {
  margin-top: auto;
}

body[data-active-panel="interview"] .interview-profile-form .form-actions {
  display: grid !important;
}

body[data-active-panel="interview"] .interview-profile-generate {
  min-height: 42px;
  border-radius: 14px;
  color: #7c4dff !important;
  background: rgba(124, 77, 255, 0.08) !important;
}

body[data-active-panel="interview"] .interview-question-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 10%, rgba(124, 77, 255, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.92)),
    #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

body[data-active-panel="interview"] .interview-question-card-head,
body[data-active-panel="interview"] .interview-answer-mode-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-active-panel="interview"] .interview-question-card-head span,
body[data-active-panel="interview"] .interview-answer-mode-head span,
body[data-active-panel="interview"] .interview-exam-focus > span,
body[data-active-panel="interview"] .interview-question-requirements > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-panel="interview"] .interview-question-card-head em {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.1);
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-panel="interview"] .interview-question-card > p {
  margin: 0;
  color: #334155;
  font-size: 15px;
  font-weight: 900;
}

body[data-active-panel="interview"] .interview-workspace-card .question-box {
  min-height: 92px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0f172a !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 28px !important;
  line-height: 1.38 !important;
  font-weight: 950;
}

body[data-active-panel="interview"] .interview-question-requirements {
  display: grid;
  gap: 10px;
}

body[data-active-panel="interview"] .interview-question-requirements ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-active-panel="interview"] .interview-question-requirements li {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: #475569;
  background: #f1f5ff;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-panel="interview"] .interview-exam-focus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(91, 140, 255, 0.16);
  border-radius: 18px;
  background: rgba(91, 140, 255, 0.06);
}

body[data-active-panel="interview"] .interview-exam-focus .interview-question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

body[data-active-panel="interview"] .interview-exam-focus .interview-question-meta span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: #5b54ff;
  background: rgba(124, 77, 255, 0.1);
  border: 1px solid rgba(124, 77, 255, 0.14);
  font-size: 12px;
  font-weight: 950;
}

body[data-active-panel="interview"] .interview-answer-zone {
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(320px, 1.08fr);
  gap: 14px;
}

body[data-active-panel="interview"] .interview-voice-mode,
body[data-active-panel="interview"] .interview-text-mode {
  min-height: 230px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 20px;
  background: #ffffff;
}

body[data-active-panel="interview"] .interview-answer-mode-head strong:not(.voice-badge) {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-panel="interview"] .interview-waveform {
  min-height: 112px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 34%, rgba(124, 77, 255, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.1));
}

body[data-active-panel="interview"] .interview-waveform i {
  width: 8px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7c4dff, #5b8cff);
  opacity: 0.72;
  transform-origin: center;
}

body[data-active-panel="interview"] .interview-waveform i:nth-child(2),
body[data-active-panel="interview"] .interview-waveform i:nth-child(9) {
  height: 48px;
}

body[data-active-panel="interview"] .interview-waveform i:nth-child(3),
body[data-active-panel="interview"] .interview-waveform i:nth-child(7) {
  height: 68px;
}

body[data-active-panel="interview"] .interview-waveform i:nth-child(4),
body[data-active-panel="interview"] .interview-waveform i:nth-child(6) {
  height: 84px;
}

body[data-active-panel="interview"] .interview-waveform i:nth-child(5) {
  height: 58px;
}

body[data-active-panel="interview"] .interview-voice-mode:has(.voice-badge.listening) .interview-waveform i,
body[data-active-panel="interview"] .interview-voice-mode:has(.voice-badge.processing) .interview-waveform i {
  animation: interviewWavePulse 1.08s ease-in-out infinite;
}

body[data-active-panel="interview"] .interview-waveform i:nth-child(2) { animation-delay: 0.08s; }
body[data-active-panel="interview"] .interview-waveform i:nth-child(3) { animation-delay: 0.16s; }
body[data-active-panel="interview"] .interview-waveform i:nth-child(4) { animation-delay: 0.24s; }
body[data-active-panel="interview"] .interview-waveform i:nth-child(5) { animation-delay: 0.32s; }
body[data-active-panel="interview"] .interview-waveform i:nth-child(6) { animation-delay: 0.4s; }
body[data-active-panel="interview"] .interview-waveform i:nth-child(7) { animation-delay: 0.48s; }
body[data-active-panel="interview"] .interview-waveform i:nth-child(8) { animation-delay: 0.56s; }
body[data-active-panel="interview"] .interview-waveform i:nth-child(9) { animation-delay: 0.64s; }

body[data-active-panel="interview"] .interview-wave-label {
  position: absolute;
  inset: auto 14px 12px 14px;
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

body[data-active-panel="interview"] .interview-wave-label b {
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
}

body[data-active-panel="interview"] .interview-wave-label span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body[data-active-panel="interview"] .interview-voice-mode > strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.2;
}

body[data-active-panel="interview"] .interview-voice-mode > p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

body[data-active-panel="interview"] .interview-text-mode textarea {
  min-height: 166px !important;
  max-height: 214px !important;
  border-radius: 18px !important;
  background: #f8fbff !important;
}

body[data-active-panel="interview"] .interview-answer-stack > .interview-answer-zone {
  order: 1;
}

body[data-active-panel="interview"] .interview-answer-stack > .coach-floating-tip {
  order: 2;
}

body[data-active-panel="interview"] .interview-answer-stack > .interview-state-compact {
  order: 3;
}

body[data-active-panel="interview"] .interview-answer-stack > #feedbackBox {
  order: 4;
}

@keyframes interviewWavePulse {
  0%, 100% { transform: scaleY(0.52); opacity: 0.5; }
  50% { transform: scaleY(1.12); opacity: 0.95; }
}

@media (max-width: 1320px) {
  body[data-active-panel="interview"] .interview-main-dashboard {
    grid-template-columns: minmax(220px, 0.7fr) minmax(460px, 1.3fr) !important;
  }

  body[data-active-panel="interview"] .interview-copilot-card {
    grid-column: 1 / -1;
    min-height: 260px !important;
  }

  body[data-active-panel="interview"] .copilot-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  body[data-active-panel="interview"] .interview-training-statusbar,
  body[data-active-panel="interview"] .interview-main-dashboard,
  body[data-active-panel="interview"] .interview-bottom-actionbar {
    grid-template-columns: 1fr !important;
    height: auto;
  }

  body[data-active-panel="interview"] .interview-training-metrics,
  body[data-active-panel="interview"] .interview-training-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body[data-active-panel="interview"] .interview-main-dashboard > .section-card {
    min-height: auto !important;
  }

  body[data-active-panel="interview"] .interview-bottom-actionbar .qa-inline-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  body[data-active-panel="interview"] .interview-answer-zone,
  body[data-active-panel="interview"] .interview-exam-focus {
    grid-template-columns: 1fr !important;
  }

  body[data-active-panel="interview"] .interview-workspace-card .question-box {
    font-size: 22px !important;
  }
}

/* Message center - real learner-facing destination for the sidebar entry. */
.message-center-workspace {
  display: none;
  gap: 18px;
}

.message-center-workspace.active {
  display: grid;
}

.message-center-hero {
  min-height: 150px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 16%, rgba(124, 77, 255, 0.16), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f7faff 60%, #f1efff 100%);
}

.message-center-hero h3 {
  margin: 4px 0 8px;
  color: #0f172a;
  font-size: 30px;
  font-weight: 950;
}

.message-center-hero p {
  max-width: 640px;
  margin: 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.7;
}

.ai-todo-hero-note {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 14px;
  padding: 0 12px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 999px;
  color: #6d4cff;
  background: rgba(124, 77, 255, 0.08);
  font-size: 12px;
  font-weight: 950;
}

.message-center-empty-badge {
  min-width: 96px;
  display: inline-grid;
  place-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
  font-size: 13px;
  font-weight: 950;
}

.message-center-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.message-center-card {
  min-height: 320px;
}

.message-center-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.message-center-item {
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  color: inherit;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.98));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
  text-align: left;
  cursor: pointer;
}

.message-center-item span {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.message-center-item strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.35;
}

.message-center-item p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

html[data-theme="dark"] .message-center-hero,
html[data-theme="dark"] .message-center-item {
  background: rgba(8, 13, 24, 0.58) !important;
  border-color: rgba(148, 163, 184, 0.13) !important;
}

html[data-theme="dark"] .message-center-hero h3,
html[data-theme="dark"] .message-center-item strong {
  color: rgba(241, 245, 249, 0.9);
}

@media (max-width: 900px) {
  .message-center-hero,
  .message-center-grid {
    grid-template-columns: 1fr;
  }
}

/* AI todo center: turn notifications into actionable training work. */
.ai-todo-workspace {
  gap: 16px;
  align-content: start;
}

.ai-todo-hero {
  min-height: 170px;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.72fr);
}

.ai-todo-decision-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.ai-todo-decision-strip span {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.ai-todo-decision-strip small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 950;
}

.ai-todo-decision-strip b {
  color: #1e293b;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
}

.ai-todo-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ai-todo-stat-grid span {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.055);
}

.ai-todo-stat-card.todo {
  border-color: rgba(124, 77, 255, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 241, 255, 0.92));
}

.ai-todo-stat-card.urgent {
  border-color: rgba(249, 115, 22, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 237, 0.9));
}

.ai-todo-stat-card.done {
  border-color: rgba(34, 197, 94, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 244, 0.9));
}

.ai-todo-stat-card.unread {
  border-color: rgba(91, 140, 255, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.9));
}

.ai-todo-stat-grid b {
  color: #6d4cff;
  font-size: 32px;
  font-weight: 950;
  line-height: 1;
}

.ai-todo-stat-card.urgent b {
  color: #f97316;
}

.ai-todo-stat-card.done b {
  color: #16a34a;
}

.ai-todo-stat-card.unread b {
  color: #5b8cff;
}

.ai-todo-stat-grid small {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.ai-todo-stat-grid em {
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.ai-todo-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.ai-todo-tab {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: #64748b;
  background: transparent;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.ai-todo-tab-badge {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.1);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.ai-todo-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #9f3dff);
  box-shadow: 0 10px 22px rgba(124, 77, 255, 0.25);
}

.ai-todo-tab.active .ai-todo-tab-badge {
  color: #6d4cff;
  background: rgba(255, 255, 255, 0.94);
}

.ai-todo-section {
  padding: 22px;
}

.ai-todo-must-section {
  border-color: rgba(124, 77, 255, 0.18);
  background:
    radial-gradient(circle at 96% 0%, rgba(124, 77, 255, 0.08), transparent 30%),
    #fff;
}

.ai-todo-section[hidden],
.ai-todo-workspace [hidden] {
  display: none !important;
}

.ai-todo-section-note {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 900;
}

.ai-todo-priority-grid,
.ai-coach-reminder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.ai-coach-reminder-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-todo-task-card,
.ai-coach-reminder-card,
.ai-result-notice-card,
.ai-system-message-item,
.ai-history-message-item {
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.055);
}

.ai-todo-task-card {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.ai-todo-task-card.high {
  border-color: rgba(124, 77, 255, 0.32);
  background:
    radial-gradient(circle at 92% 10%, rgba(124, 77, 255, 0.12), transparent 32%),
    linear-gradient(180deg, #ffffff, #f8f5ff);
}

.ai-todo-task-head,
.ai-todo-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-todo-priority {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.ai-todo-priority.high {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.ai-todo-priority.medium {
  color: #f97316;
  background: rgba(249, 115, 22, 0.11);
}

.ai-todo-task-card small,
.ai-todo-meta-row span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.ai-todo-task-card h4 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 950;
}

.ai-todo-task-card p,
.ai-coach-reminder-card p,
.ai-result-notice-card p {
  margin: 0;
  color: #475569;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.6;
}

.ai-todo-task-card p b {
  color: #334155;
  font-weight: 950;
}

.ai-todo-field-list {
  display: grid;
  gap: 9px;
  margin: 0;
}

.ai-todo-field-list div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 232, 240, 0.82);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.74);
}

.ai-todo-field-list dt {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 950;
}

.ai-todo-field-list dd {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.ai-todo-task-card.high .ai-todo-field-list div {
  border-color: rgba(124, 77, 255, 0.14);
  background: rgba(255, 255, 255, 0.74);
}

.ai-todo-status {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.ai-todo-status.pending {
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.1);
}

.ai-todo-status.unread {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.11);
}

.ai-todo-status.done {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
}

.ai-todo-status.ignored {
  color: #64748b;
  background: rgba(100, 116, 139, 0.12);
}

.ai-todo-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.ai-todo-state-actions span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 999px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.ai-todo-state-actions span:hover {
  color: #6d4cff;
  background: rgba(124, 77, 255, 0.08);
}

.ai-todo-state-actions span.active {
  color: #ffffff;
  border-color: rgba(124, 77, 255, 0.5);
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  box-shadow: 0 8px 18px rgba(124, 77, 255, 0.18);
}

.is-ai-todo-done,
.is-ai-todo-ignored {
  opacity: 0.72;
}

.is-ai-todo-unread {
  border-color: rgba(91, 140, 255, 0.34) !important;
}

.is-ai-todo-unread::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #5b8cff;
  box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.12);
}

.ai-coach-reminder-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-color: rgba(124, 77, 255, 0.16);
  background:
    radial-gradient(circle at 94% 0%, rgba(124, 77, 255, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96));
}

.ai-coach-reminder-card strong,
.ai-result-notice-card strong,
.ai-history-message-item strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.35;
}

.ai-coach-reminder-card small {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.1);
  font-size: 12px;
  font-weight: 950;
}

.ai-coach-reminder-card span {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #6d4cff;
  background: rgba(124, 77, 255, 0.09);
  font-size: 13px;
  font-weight: 950;
}

.ai-coach-reminder-card .ai-todo-state-actions,
.ai-system-message-item .ai-todo-state-actions,
.ai-history-message-item .ai-todo-state-actions {
  display: flex;
}

.ai-coach-reminder-card .ai-todo-state-actions span,
.ai-system-message-item .ai-todo-state-actions span,
.ai-history-message-item .ai-todo-state-actions span {
  width: auto;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 999px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 950;
}

.ai-todo-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.8fr);
  gap: 16px;
}

.ai-result-notice-list,
.ai-system-message-list,
.ai-history-message-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.ai-system-section {
  background:
    radial-gradient(circle at 96% 0%, rgba(148, 163, 184, 0.08), transparent 30%),
    #fff;
}

.ai-system-message-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-result-notice-card {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.ai-result-field-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.ai-result-field-list div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 11px;
  border: 1px solid rgba(226, 232, 240, 0.78);
  border-radius: 13px;
  background: rgba(248, 250, 252, 0.72);
}

.ai-result-field-list dt {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 950;
}

.ai-result-field-list dd {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.ai-result-notice-card > span,
.ai-history-message-item span {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.ai-result-notice-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ai-system-message-item,
.ai-history-message-item {
  width: 100%;
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ai-system-message-item {
  min-height: 112px;
  align-content: start;
  color: #475569;
  font-size: 14px;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.96));
  box-shadow: none;
}

.ai-system-message-item span {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #64748b;
  background: rgba(148, 163, 184, 0.12);
  font-size: 11px;
  font-weight: 950;
}

.ai-system-message-item strong {
  color: #334155;
  font-size: 15px;
  font-weight: 950;
}

.ai-system-message-item em {
  color: #94a3b8;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.ai-history-message-item em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.ai-todo-empty {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 34px 26px;
  text-align: center;
  border: 1px dashed rgba(124, 77, 255, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 77, 255, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
}

.ai-todo-empty::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
  font-size: 22px;
  font-weight: 950;
}

.ai-todo-empty h3 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 950;
}

.ai-todo-empty p {
  max-width: 520px;
  margin: 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.6;
}

.ai-todo-empty > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding-top: 4px;
}

html[data-theme="dark"] .ai-todo-stat-grid span,
html[data-theme="dark"] .ai-todo-tabs,
html[data-theme="dark"] .ai-todo-task-card,
html[data-theme="dark"] .ai-coach-reminder-card,
html[data-theme="dark"] .ai-result-notice-card,
html[data-theme="dark"] .ai-system-message-item,
html[data-theme="dark"] .ai-history-message-item {
  background: rgba(8, 13, 24, 0.66) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="dark"] .ai-todo-task-card h4,
html[data-theme="dark"] .ai-coach-reminder-card strong,
html[data-theme="dark"] .ai-result-notice-card strong,
html[data-theme="dark"] .ai-history-message-item strong {
  color: rgba(241, 245, 249, 0.92);
}

@media (max-width: 1120px) {
  .admin-console-hero {
    grid-template-columns: 1fr;
  }

  .admin-console-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-console-technical-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-todo-hero,
  .ai-todo-decision-strip,
  .ai-todo-priority-grid,
  .ai-coach-reminder-grid,
  .ai-todo-two-column,
  .ai-system-message-list {
    grid-template-columns: 1fr;
  }

  .ai-todo-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .admin-console-grid,
  .admin-console-technical-strip {
    grid-template-columns: 1fr;
  }
}

/* User settings center: learner preferences first, admin controls elsewhere. */
.user-settings-center {
  display: grid;
  gap: 20px;
}

.settings-technical-console {
  display: none !important;
}

body:not([data-role="admin"]) .user-settings-admin-entry {
  display: none !important;
}

.user-settings-hero {
  min-height: 160px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 26px 30px;
  background:
    radial-gradient(circle at 88% 18%, rgba(91, 140, 255, 0.14), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 58%, #f3efff 100%);
}

.user-settings-hero h2 {
  margin: 4px 0 8px;
  color: #0f172a;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: 0;
}

.user-settings-hero h3 {
  margin: 4px 0 8px;
  color: #0f172a;
  font-size: 34px;
  font-weight: 950;
}

.user-settings-hero p {
  max-width: 720px;
  margin: 0;
  color: #64748b;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
}

.user-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.user-settings-account-card,
.user-settings-card {
  padding: 22px;
  border-color: rgba(226, 232, 240, 0.92);
  background:
    radial-gradient(circle at 96% 0%, rgba(124, 77, 255, 0.055), transparent 30%),
    #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.user-settings-card .section-head,
.user-settings-account-card .section-head {
  align-items: flex-start;
  gap: 12px;
}

.user-settings-card .section-head h3,
.user-settings-account-card .section-head h3 {
  margin-top: 2px;
  color: #0f172a;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0;
}

.user-settings-account-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
}

.user-settings-avatar-button {
  position: relative;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ede9fe;
  box-shadow: 0 12px 26px rgba(91, 140, 255, 0.18);
  cursor: pointer;
  overflow: hidden;
}

.user-settings-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.user-settings-avatar-button span {
  position: absolute;
  inset: auto 8px 8px;
  display: grid;
  place-items: center;
  min-height: 24px;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 23, 42, 0.68);
  font-size: 11px;
  font-weight: 950;
}

.user-settings-account-row strong {
  color: #0f172a;
  font-size: 24px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.user-settings-account-profile {
  min-width: 0;
}

.user-settings-account-profile dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 12px 0 0;
}

.user-settings-account-profile dl div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(124, 77, 255, 0.12);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.78);
}

.user-settings-account-profile dt {
  margin: 0 0 4px;
  color: #7b88a1;
  font-size: 12px;
  font-weight: 900;
}

.user-settings-account-profile dd {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

html[data-theme="dark"] .user-settings-account-profile dd {
  color: var(--text);
}

html[data-theme="dark"] .user-settings-account-profile dl div {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.22);
}

.user-settings-account-row p,
.user-settings-account-row em,
.user-settings-note {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.55;
}

.user-settings-account-actions,
.user-settings-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.user-settings-account-switcher {
  margin-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 14px;
}

.user-settings-account-switcher summary {
  cursor: pointer;
  color: #7c4dff;
  font-size: 13px;
  font-weight: 950;
}

.user-settings-account-switcher[open] summary {
  margin-bottom: 12px;
}

.user-settings-choice-grid,
.user-settings-split-controls,
.notification-settings-list,
.training-data-settings-grid,
.ability-target-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.user-settings-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.user-settings-choice-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-settings-identity-block {
  display: grid;
  gap: 10px;
}

.user-settings-goal-block {
  display: grid;
  gap: 10px;
}

.user-settings-field-caption {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.user-settings-choice-grid button,
.home-module-settings-list button {
  min-height: 42px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  color: #334155;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.user-settings-choice-grid button.active {
  color: #6d4cff;
  border-color: rgba(124, 77, 255, 0.32);
  background: rgba(124, 77, 255, 0.09);
}

.user-settings-field,
.user-settings-split-controls label,
.notification-settings-list label {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.user-settings-field span,
.user-settings-split-controls span,
.notification-settings-list span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.user-settings-field input,
.user-settings-field textarea,
.user-settings-split-controls select,
.notification-settings-list select {
  width: 100%;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  padding: 12px 14px;
  color: #0f172a;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
}

.user-settings-rule-box {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 16px;
  background: rgba(34, 197, 94, 0.08);
}

.user-settings-rule-box strong {
  color: #16a34a;
  font-size: 13px;
  font-weight: 950;
}

.user-settings-rule-box p {
  margin: 6px 0 0;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.training-goal-priority-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.training-goal-priority-list span {
  padding: 7px 10px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 999px;
  color: #15803d;
  background: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 950;
}

.training-identity-preview {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 10%, rgba(124, 77, 255, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.06));
}

.training-identity-preview strong {
  color: #5b3ff4;
  font-size: 13px;
  font-weight: 950;
}

.training-identity-preview p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
}

.training-identity-focus-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.training-identity-focus-list span {
  padding: 7px 10px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  border-radius: 999px;
  color: #6d4cff;
  background: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 950;
}

.user-settings-split-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-settings-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.user-settings-toggle-grid label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  color: #334155;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.home-module-settings-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.home-module-settings-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 16px;
  background: #fff;
  text-align: left;
}

.home-module-settings-item.is-hidden {
  opacity: 0.58;
}

.home-module-settings-item.is-dragging {
  opacity: 0.45;
}

.home-module-drag-handle {
  color: #94a3b8;
  cursor: grab;
  font-size: 16px;
  font-weight: 950;
}

.home-module-settings-item strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.home-module-settings-item em {
  color: #16a34a;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.home-module-settings-item.is-hidden em {
  color: #94a3b8;
}

.home-module-settings-item .ghost-btn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 12px;
}

.home-module-settings-item label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.user-theme-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.user-theme-mode-grid .theme-option span {
  display: grid;
  gap: 3px;
}

.user-theme-mode-grid .theme-option small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 850;
}

.user-theme-mode-grid .theme-option:has(input:checked) small {
  color: #6d4cff;
}

.ability-target-card,
.training-data-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.training-data-settings-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ability-target-card span,
.training-data-settings-grid span {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8faff);
}

.training-data-settings-grid span {
  min-height: 82px;
  align-content: center;
}

.ability-target-card b,
.training-data-settings-grid b {
  color: #6d4cff;
  font-size: 22px;
  font-weight: 950;
}

.training-data-settings-grid small {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.user-settings-danger-card {
  border-color: rgba(239, 68, 68, 0.18);
  background:
    radial-gradient(circle at 96% 0%, rgba(239, 68, 68, 0.08), transparent 28%),
    #fff;
}

.privacy-export-panel,
.privacy-danger-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(124, 77, 255, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8faff);
}

.privacy-export-panel strong,
.privacy-danger-panel strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
}

.privacy-export-panel p,
.privacy-danger-panel p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.5;
}

.privacy-danger-panel {
  border-color: rgba(239, 68, 68, 0.16);
  background: linear-gradient(180deg, #fff, #fff7f7);
}

.privacy-danger-panel strong {
  color: #dc2626;
}

.admin-entry-settings-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(91, 140, 255, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at right top, rgba(124, 77, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #fff, #f8fbff);
}

.admin-entry-settings-panel strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.admin-entry-settings-panel p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
}

.user-settings-note.danger {
  color: #ef4444;
}

html[data-theme="dark"] .user-settings-hero,
html[data-theme="dark"] .user-settings-choice-grid button,
html[data-theme="dark"] .home-module-settings-list button,
html[data-theme="dark"] .user-settings-field input,
html[data-theme="dark"] .user-settings-field textarea,
html[data-theme="dark"] .user-settings-split-controls select,
html[data-theme="dark"] .notification-settings-list select,
html[data-theme="dark"] .user-settings-toggle-grid label,
html[data-theme="dark"] .ability-target-card span,
html[data-theme="dark"] .training-data-settings-grid span,
html[data-theme="dark"] .privacy-export-panel,
html[data-theme="dark"] .privacy-danger-panel,
html[data-theme="dark"] .admin-entry-settings-panel {
  background: rgba(8, 13, 24, 0.66) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="dark"] .user-settings-hero h3,
html[data-theme="dark"] .user-settings-account-row strong,
html[data-theme="dark"] .privacy-export-panel strong,
html[data-theme="dark"] .privacy-danger-panel strong,
html[data-theme="dark"] .admin-entry-settings-panel strong {
  color: rgba(241, 245, 249, 0.92);
}

@media (max-width: 1120px) {
  .user-settings-grid,
  .user-settings-hero,
  .user-settings-account-row,
  .user-settings-split-controls,
  .admin-console-technical-strip {
    grid-template-columns: 1fr;
  }

  .user-settings-account-actions {
    justify-content: flex-start;
  }

  .training-data-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .privacy-export-panel,
  .privacy-danger-panel,
  .admin-entry-settings-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .training-data-settings-grid {
    grid-template-columns: 1fr;
  }
}

/* AI interview coach v108: real-time scoring, structure lighting and adaptive follow-ups. */
body[data-active-panel="interview"] .interview-ai-coach-panel {
  display: grid !important;
  gap: 12px !important;
  align-content: start;
}

body[data-active-panel="interview"] .coach-live-score-card,
body[data-active-panel="interview"] .coach-structure-card,
body[data-active-panel="interview"] .coach-followup-card,
body[data-active-panel="interview"] .coach-judge-card {
  display: grid;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 94% 8%, rgba(124, 77, 255, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.94));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

body[data-active-panel="interview"] .coach-live-score-head,
body[data-active-panel="interview"] .coach-panel-title,
body[data-active-panel="interview"] .coach-completeness-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body[data-active-panel="interview"] .coach-live-score-head span,
body[data-active-panel="interview"] .coach-panel-title strong,
body[data-active-panel="interview"] .coach-judge-card strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
}

body[data-active-panel="interview"] .coach-live-score-head em,
body[data-active-panel="interview"] .coach-panel-title span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.1);
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

body[data-active-panel="interview"] .coach-completeness-main {
  align-items: end;
}

body[data-active-panel="interview"] .coach-completeness-main div:first-child {
  display: grid;
  gap: 2px;
}

body[data-active-panel="interview"] .coach-completeness-main small {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-panel="interview"] .coach-completeness-main strong {
  color: #7c4dff !important;
  font-size: 42px;
  line-height: 0.95;
  font-weight: 950;
}

body[data-active-panel="interview"] .coach-completeness-track {
  width: 120px;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef8;
}

body[data-active-panel="interview"] .coach-completeness-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
  transition: width 0.24s ease;
}

body[data-active-panel="interview"] .coach-live-score-card > p,
body[data-active-panel="interview"] .coach-followup-card > p,
body[data-active-panel="interview"] .coach-judge-card > p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.62;
}

body[data-active-panel="interview"] .coach-structure-list {
  display: grid;
  gap: 8px;
}

body[data-active-panel="interview"] .coach-structure-item {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  background: #ffffff;
}

body[data-active-panel="interview"] .coach-structure-item span {
  color: #334155;
  font-size: 13px;
  font-weight: 950;
}

body[data-active-panel="interview"] .coach-structure-item b {
  min-width: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #94a3b8;
  background: #f1f5f9;
  font-size: 14px;
  line-height: 1;
}

body[data-active-panel="interview"] .coach-structure-item.done {
  border-color: rgba(34, 197, 94, 0.22);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(255, 255, 255, 0.98));
}

body[data-active-panel="interview"] .coach-structure-item.done b {
  color: #ffffff;
  background: #22c55e;
}

body[data-active-panel="interview"] .coach-followup-list {
  display: grid;
  gap: 8px;
}

body[data-active-panel="interview"] .coach-followup-list button {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 14px;
  color: #0f172a;
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.05)),
    #ffffff;
  font-size: 13px;
  font-weight: 880;
  line-height: 1.35;
  text-align: left;
  cursor: default;
}

body[data-active-panel="interview"] .coach-followup-list button::before {
  content: "追问 " attr(data-followup-depth);
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-right: 8px;
  padding: 0 7px;
  border-radius: 999px;
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.1);
  font-size: 11px;
  font-weight: 950;
}

body[data-active-panel="interview"] .coach-judge-card {
  border-color: rgba(91, 140, 255, 0.14);
  background:
    radial-gradient(circle at 94% 10%, rgba(91, 140, 255, 0.12), transparent 30%),
    #ffffff;
}

html[data-theme="dark"] body[data-active-panel="interview"] .coach-live-score-card,
html[data-theme="dark"] body[data-active-panel="interview"] .coach-structure-card,
html[data-theme="dark"] body[data-active-panel="interview"] .coach-followup-card,
html[data-theme="dark"] body[data-active-panel="interview"] .coach-judge-card,
html[data-theme="dark"] body[data-active-panel="interview"] .coach-structure-item,
html[data-theme="dark"] body[data-active-panel="interview"] .coach-followup-list button {
  background: rgba(15, 23, 42, 0.68) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

html[data-theme="dark"] body[data-active-panel="interview"] .coach-live-score-head span,
html[data-theme="dark"] body[data-active-panel="interview"] .coach-panel-title strong,
html[data-theme="dark"] body[data-active-panel="interview"] .coach-judge-card strong,
html[data-theme="dark"] body[data-active-panel="interview"] .coach-structure-item span,
html[data-theme="dark"] body[data-active-panel="interview"] .coach-followup-list button {
  color: rgba(241, 245, 249, 0.9) !important;
}

/* AI interview per-question feedback v114: show score immediately after one question. */
.interview-question-feedback-backdrop {
  z-index: 140 !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(124, 77, 255, 0.22), transparent 34%),
    rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(18px);
}

.interview-question-feedback-card {
  position: relative;
  width: min(560px, calc(100vw - 32px)) !important;
  padding: 28px !important;
  border: 1px solid rgba(124, 77, 255, 0.18) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 86% 8%, rgba(91, 140, 255, 0.16), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.98)) !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22) !important;
}

.question-feedback-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 999px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.86);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.question-feedback-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
}

.question-feedback-hero h3 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 950;
}

.question-feedback-hero p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 820;
  line-height: 1.5;
}

.question-feedback-hero > strong {
  min-width: 104px;
  min-height: 104px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  color: #ffffff;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  box-shadow: 0 18px 36px rgba(124, 77, 255, 0.28);
  font-size: 48px;
  line-height: 1;
  font-weight: 950;
}

.question-feedback-rubric {
  display: grid;
  gap: 10px;
}

.question-feedback-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
}

.question-feedback-row span {
  color: #334155;
  font-size: 14px;
  font-weight: 920;
}

.question-feedback-row strong {
  min-width: 58px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #64748b;
  background: #f1f5f9;
  font-size: 13px;
  font-weight: 950;
}

.question-feedback-row[data-level="excellent"] strong,
.question-feedback-row[data-level="good"] strong {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
}

.question-feedback-row[data-level="normal"] strong {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

.question-feedback-row[data-level="weak"] strong,
.question-feedback-row[data-level="poor"] strong {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.question-feedback-advice {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.06)),
    rgba(255, 255, 255, 0.9);
}

.question-feedback-advice span {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.question-feedback-advice p {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.55;
}

.question-feedback-advice strong {
  color: #7c4dff;
  font-weight: 950;
}

.question-feedback-actions {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px !important;
  margin: 0 !important;
}

.question-feedback-actions .primary-btn,
.question-feedback-actions .ghost-btn {
  min-height: 48px;
  border-radius: 14px;
  font-weight: 950;
}

html[data-theme="dark"] .interview-question-feedback-card {
  background:
    radial-gradient(circle at 86% 8%, rgba(91, 140, 255, 0.18), transparent 28%),
    rgba(15, 23, 42, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="dark"] .question-feedback-hero h3,
html[data-theme="dark"] .question-feedback-advice p {
  color: rgba(241, 245, 249, 0.94);
}

html[data-theme="dark"] .question-feedback-row,
html[data-theme="dark"] .question-feedback-advice,
html[data-theme="dark"] .question-feedback-close {
  background: rgba(15, 23, 42, 0.68);
  border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .question-feedback-row span {
  color: rgba(226, 232, 240, 0.9);
}

/* AI interview final report v115: close the training loop before returning home. */
body[data-active-panel="training-summary"] .main {
  background:
    radial-gradient(circle at 82% 12%, rgba(124, 77, 255, 0.14), transparent 30%),
    #f5f8fc;
}

body[data-active-panel="training-summary"] .training-summary-page {
  display: grid;
  gap: 24px;
}

body[data-active-panel="training-summary"] .training-summary-hero {
  min-height: 260px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: 32px;
  padding: 34px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 20%, rgba(91, 140, 255, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.98));
}

body[data-active-panel="training-summary"] .training-summary-copy {
  display: grid;
  gap: 14px;
}

body[data-active-panel="training-summary"] .training-summary-copy h2 {
  margin: 0;
  color: #0f172a;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: 0;
}

body[data-active-panel="training-summary"] .training-summary-copy p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: #64748b;
  font-size: 16px;
  font-weight: 820;
  line-height: 1.75;
}

body[data-active-panel="training-summary"] .training-summary-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 820px;
  margin-top: 4px;
}

body[data-active-panel="training-summary"] .training-summary-flow span {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas:
    "index title"
    "index state";
  column-gap: 9px;
  row-gap: 2px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

body[data-active-panel="training-summary"] .training-summary-flow b {
  grid-area: index;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #64748b;
  background: #eef2ff;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-panel="training-summary"] .training-summary-flow strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-panel="training-summary"] .training-summary-flow em {
  grid-area: state;
  color: #94a3b8;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

body[data-active-panel="training-summary"] .training-summary-flow .is-done {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(240, 253, 244, 0.9);
}

body[data-active-panel="training-summary"] .training-summary-flow .is-done b {
  color: #059669;
  background: rgba(34, 197, 94, 0.14);
}

body[data-active-panel="training-summary"] .training-summary-flow .is-current {
  border-color: rgba(124, 77, 255, 0.28);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.08), rgba(255, 255, 255, 0.9));
}

body[data-active-panel="training-summary"] .training-summary-flow .is-current b,
body[data-active-panel="training-summary"] .training-summary-flow .is-next b {
  color: #ffffff;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
}

body[data-active-panel="training-summary"] .training-summary-flow .is-current em,
body[data-active-panel="training-summary"] .training-summary-flow .is-next em {
  color: #7c4dff;
}

body[data-active-panel="training-summary"] .training-summary-score-card {
  min-height: 208px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(circle at 76% 22%, rgba(255, 255, 255, 0.24), transparent 28%),
    linear-gradient(135deg, #7c4dff, #5b8cff);
  box-shadow: 0 24px 48px rgba(124, 77, 255, 0.24);
}

body[data-active-panel="training-summary"] .training-summary-score-card span,
body[data-active-panel="training-summary"] .training-summary-score-card em {
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

body[data-active-panel="training-summary"] .training-summary-score-card strong {
  font-size: 72px;
  line-height: 0.95;
  font-weight: 950;
}

body[data-active-panel="training-summary"] .training-summary-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  gap: 24px;
}

body[data-active-panel="training-summary"] .training-summary-grid > .section-card {
  min-height: 230px;
  padding: 24px;
  border-radius: 24px;
}

body[data-active-panel="training-summary"] .training-summary-ability .section-head > strong {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.1);
  font-size: 13px;
  font-weight: 950;
}

body[data-active-panel="training-summary"] .training-summary-ability-flow {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 18px;
}

body[data-active-panel="training-summary"] .training-summary-ability-flow span,
body[data-active-panel="training-summary"] .training-summary-ability-flow strong {
  color: #0f172a;
  font-size: 52px;
  line-height: 1;
  font-weight: 950;
}

body[data-active-panel="training-summary"] .training-summary-ability-flow strong {
  color: #7c4dff;
}

body[data-active-panel="training-summary"] .training-summary-ability-flow i {
  color: #94a3b8;
  font-style: normal;
  font-size: 34px;
  font-weight: 950;
}

body[data-active-panel="training-summary"] .training-summary-progress {
  height: 10px;
  overflow: hidden;
  margin-top: 26px;
  border-radius: 999px;
  background: #e9eef8;
}

body[data-active-panel="training-summary"] .training-summary-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
}

body[data-active-panel="training-summary"] .training-summary-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

body[data-active-panel="training-summary"] .training-summary-chip-list span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(239, 68, 68, 0.16);
  border-radius: 999px;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  font-size: 15px;
  font-weight: 950;
}

body[data-active-panel="training-summary"] .training-summary-next {
  display: grid;
  gap: 14px;
}

body[data-active-panel="training-summary"] .training-summary-next > strong {
  color: #0f172a;
  font-size: 28px;
  line-height: 1.18;
  font-weight: 950;
}

body[data-active-panel="training-summary"] .training-summary-next > p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 820;
  line-height: 1.65;
}

body[data-active-panel="training-summary"] .training-summary-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

body[data-active-panel="training-summary"] .training-summary-actions .primary-btn,
body[data-active-panel="training-summary"] .training-summary-actions .ghost-btn {
  min-height: 48px;
  border-radius: 14px;
  font-weight: 950;
}

body[data-active-panel="training-summary"] .training-summary-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-radius: 22px;
}

body[data-active-panel="training-summary"] .training-summary-chain span,
body[data-active-panel="training-summary"] .training-summary-chain strong {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #64748b;
  background: #f1f5f9;
  font-size: 13px;
  font-weight: 920;
}

body[data-active-panel="training-summary"] .training-summary-chain strong {
  color: #7c4dff;
  background: rgba(124, 77, 255, 0.1);
}

body[data-active-panel="training-summary"] .training-summary-chain i {
  color: #94a3b8;
  font-style: normal;
  font-weight: 950;
}

html[data-theme="dark"] body[data-active-panel="training-summary"] .training-summary-hero,
html[data-theme="dark"] body[data-active-panel="training-summary"] .training-summary-grid > .section-card,
html[data-theme="dark"] body[data-active-panel="training-summary"] .training-summary-chain {
  background: rgba(15, 23, 42, 0.78) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="dark"] body[data-active-panel="training-summary"] .training-summary-copy h2,
html[data-theme="dark"] body[data-active-panel="training-summary"] .training-summary-ability-flow span,
html[data-theme="dark"] body[data-active-panel="training-summary"] .training-summary-next > strong {
  color: rgba(241, 245, 249, 0.94);
}

@media (max-width: 1180px) {
  body[data-active-panel="training-summary"] .training-summary-hero,
  body[data-active-panel="training-summary"] .training-summary-grid {
    grid-template-columns: 1fr;
  }

  body[data-active-panel="training-summary"] .training-summary-score-card {
    min-height: 160px;
  }
}

@media (max-width: 720px) {
  body[data-active-panel="training-summary"] .training-summary-copy h2 {
    font-size: 30px;
  }

  body[data-active-panel="training-summary"] .training-summary-flow {
    grid-template-columns: 1fr;
  }

  body[data-active-panel="training-summary"] .training-summary-actions {
    grid-template-columns: 1fr;
  }
}

/* AI interview bottom bar v113: fixed to the viewport bottom, not a floating card. */
body:not([data-active-panel="interview"]) .interview-bottom-actionbar {
  display: none !important;
}

body[data-active-panel="interview"] .main {
  padding-bottom: calc(118px + var(--safe-bottom)) !important;
}

body[data-active-panel="interview"] .panel[data-panel="interview"] {
  transform: none !important;
}

body[data-active-panel="interview"] .interview-studio {
  padding-bottom: calc(108px + var(--safe-bottom)) !important;
}

body[data-active-panel="interview"] .interview-bottom-actionbar {
  position: fixed !important;
  left: 236px !important;
  right: 0 !important;
  top: calc(100dvh - 76px - var(--safe-bottom)) !important;
  bottom: auto !important;
  z-index: 90 !important;
  height: calc(76px + var(--safe-bottom)) !important;
  min-height: 76px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 320px) minmax(520px, 760px) !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 12px 28px calc(12px + var(--safe-bottom)) 28px !important;
  border-width: 1px 0 0 0 !important;
  border-style: solid !important;
  border-color: rgba(124, 77, 255, 0.16) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.7) inset !important;
  backdrop-filter: blur(18px);
}

.shell.sidebar-collapsed body[data-active-panel="interview"] .interview-bottom-actionbar,
body[data-active-panel="interview"] .shell.sidebar-collapsed .interview-bottom-actionbar {
  left: 72px !important;
}

body.compact-shell[data-active-panel="interview"] .interview-bottom-actionbar,
body.ios-app[data-active-panel="interview"] .interview-bottom-actionbar {
  left: 0 !important;
}

body[data-active-panel="interview"] .interview-bottom-context {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px !important;
}

body[data-active-panel="interview"] .interview-bottom-context span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0 10px;
  border-radius: 999px;
  color: #7c4dff !important;
  background: rgba(124, 77, 255, 0.1);
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap;
}

body[data-active-panel="interview"] #interviewRecordingTimer {
  color: #0f172a !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

body[data-active-panel="interview"] .interview-bottom-actionbar .qa-inline-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(112px, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}

body[data-active-panel="interview"] .interview-bottom-actionbar .primary-btn,
body[data-active-panel="interview"] .interview-bottom-actionbar .ghost-btn {
  min-height: 46px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

html[data-theme="dark"] body[data-active-panel="interview"] .interview-bottom-actionbar {
  background: rgba(8, 13, 24, 0.94) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="dark"] body[data-active-panel="interview"] #interviewRecordingTimer {
  color: rgba(241, 245, 249, 0.92) !important;
}

@media (max-width: 899px) {
  body[data-active-panel="interview"] .interview-bottom-actionbar {
    left: 0 !important;
    top: calc(100dvh - 128px - var(--safe-bottom)) !important;
    height: calc(128px + var(--safe-bottom)) !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px 14px calc(10px + var(--safe-bottom)) !important;
  }

  body[data-active-panel="interview"] .interview-bottom-actionbar .qa-inline-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-active-panel="interview"] #interviewRecordingTimer {
    font-size: 22px !important;
  }

  .interview-question-feedback-card {
    padding: 22px !important;
  }

  .question-feedback-hero {
    grid-template-columns: 1fr;
  }

  .question-feedback-hero > strong {
    width: 94px;
    min-width: 94px;
    min-height: 94px;
    font-size: 42px;
  }

  .question-feedback-actions {
    grid-template-columns: 1fr;
  }
}

/* Homepage cockpit v1.8: true tail override. */
@media (min-width: 1181px) {
  body[data-active-panel="landing"]::before,
  body[data-active-panel="landing"]::after,
  body[data-active-panel="landing"] .main::before,
  body[data-active-panel="landing"] .main::after,
  body[data-active-panel="landing"] .landing-workspace::before,
  body[data-active-panel="landing"] .landing-workspace::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  body[data-active-panel="landing"] .shell .sidebar .brand-logo.brand-main-logo,
  body[data-active-panel="landing"] .sidebar .brand-logo.brand-main-logo,
  body[data-active-panel="landing"] img.brand-logo.brand-main-logo {
    width: 118px !important;
    max-width: 118px !important;
    min-width: 118px !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Homepage cockpit v1.6: appended last so legacy overrides cannot win. */
@media (min-width: 1181px) {
  body[data-active-panel="landing"] body::before,
  body[data-active-panel="landing"] .main::before,
  body[data-active-panel="landing"] .panel.active::before,
  body[data-active-panel="landing"] .landing-workspace::before {
    display: none !important;
    content: none !important;
  }

  body[data-active-panel="landing"] .brand {
    height: 92px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-active-panel="landing"] .brand-head,
  body[data-active-panel="landing"] .brand-head--main {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    align-items: flex-start !important;
  }

  body[data-active-panel="landing"] .brand-main-logo {
    display: block !important;
    width: 122px !important;
    max-width: 122px !important;
    height: auto !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body[data-active-panel="landing"] .brand-subtitle-text {
    display: block !important;
    margin-top: 8px !important;
    color: rgba(226, 232, 240, 0.88) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body[data-active-panel="landing"] .landing-home-grid {
    grid-template-columns: minmax(0, 1.24fr) minmax(286px, 0.72fr) minmax(330px, 0.86fr) !important;
    grid-template-areas:
      "welcome welcome welcome"
      "recommendation recommendation route"
      "growth growth briefing"
      "hardware questions calendar"
      "special special coach" !important;
    gap: 10px !important;
  }

  body[data-active-panel="landing"] .landing-hardware-focus {
    min-width: 0 !important;
  }

  body[data-active-panel="landing"] .landing-hardware-chip-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing {
    position: relative !important;
    padding: 12px 14px 0 !important;
  }

  body[data-active-panel="landing"] #landingXiaowenBriefingText {
    position: absolute !important;
    left: 14px !important;
    top: 50px !important;
    width: 205px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
    position: absolute !important;
    left: 14px !important;
    top: 84px !important;
    width: 206px !important;
    max-width: 206px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
    left: 14px !important;
    right: 112px !important;
    bottom: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 6px 4px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
    right: 6px !important;
    bottom: -4px !important;
    width: 98px !important;
    height: 98px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
    width: 96px !important;
    height: 96px !important;
  }
}

/* Homepage cockpit v1.7: brand lockup and top-line cleanup. */
@media (min-width: 1181px) {
  body[data-active-panel="landing"]::before,
  body[data-active-panel="landing"]::after,
  body[data-active-panel="landing"] .main::before,
  body[data-active-panel="landing"] .main::after,
  body[data-active-panel="landing"] .landing-workspace::before,
  body[data-active-panel="landing"] .landing-workspace::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  body[data-active-panel="landing"] .shell .sidebar .brand-logo.brand-main-logo,
  body[data-active-panel="landing"] .sidebar .brand-logo.brand-main-logo,
  body[data-active-panel="landing"] img.brand-logo.brand-main-logo {
    display: block !important;
    width: 118px !important;
    max-width: 118px !important;
    min-width: 118px !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    object-fit: contain !important;
  }
}

/* Homepage cockpit v1.5: final desktop balance at the in-app 1280px viewport. */
@media (min-width: 1181px) {
  body[data-active-panel="landing"] .landing-home-grid {
    grid-template-columns: minmax(410px, 1.24fr) minmax(248px, 0.72fr) minmax(330px, 0.86fr) !important;
    grid-template-areas:
      "welcome welcome welcome"
      "recommendation recommendation route"
      "growth growth briefing"
      "hardware questions calendar"
      "special special coach" !important;
    gap: 10px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing {
    position: relative !important;
    padding: 12px 14px 0 !important;
  }

  body[data-active-panel="landing"] #landingXiaowenBriefingText {
    position: absolute !important;
    left: 14px !important;
    top: 50px !important;
    width: 205px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
    position: absolute !important;
    left: 14px !important;
    top: 85px !important;
    width: 206px !important;
    max-width: 206px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
    left: 14px !important;
    right: 112px !important;
    bottom: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 6px 4px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats span {
    font-size: 8px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats strong {
    font-size: 14px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
    right: 6px !important;
    bottom: -4px !important;
    width: 98px !important;
    height: 98px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
    width: 96px !important;
    height: 96px !important;
  }
}

/* Image match v1.2: rebalance the 3-column cockpit and stabilize XiaoWen briefing. */
body[data-active-panel="landing"] .landing-home-grid {
  grid-template-columns: minmax(410px, 1.18fr) minmax(248px, 0.72fr) minmax(338px, 0.92fr) !important;
  grid-template-areas:
    "welcome welcome welcome"
    "recommendation recommendation route"
    "growth growth briefing"
    "hardware questions calendar"
    "special special coach" !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing {
  width: auto !important;
  min-width: 0 !important;
  padding: 14px 16px 0 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-head {
  margin-bottom: 8px !important;
}

body[data-active-panel="landing"] #landingXiaowenBriefingText {
  position: absolute !important;
  left: 16px !important;
  top: 52px !important;
  width: 205px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
  position: absolute !important;
  left: 16px !important;
  top: 91px !important;
  width: 210px !important;
  max-width: 210px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
  left: 16px !important;
  right: 126px !important;
  bottom: 14px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 7px 5px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats span {
  font-size: 9px !important;
  white-space: normal !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats strong {
  font-size: 15px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
  right: 8px !important;
  bottom: -2px !important;
  width: 104px !important;
  height: 104px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
  width: 102px !important;
  height: 102px !important;
}

/* Homepage cockpit v1.5: final compact override after all legacy landing rules. */
body[data-active-panel="landing"] .landing-primary-recommendation,
body[data-active-panel="landing"] .landing-route-card {
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow { top: 24px !important; }
body[data-active-panel="landing"] .landing-primary-recommendation h1 { top: 62px !important; }
body[data-active-panel="landing"] .landing-primary-recommendation .landing-training-tag { top: 64px !important; }
body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy > p:not(.eyebrow) { top: 98px !important; }
body[data-active-panel="landing"] .landing-recommendation-meta { bottom: 60px !important; }
body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
  top: 20px !important;
  height: 178px !important;
  min-height: 178px !important;
}

body[data-active-panel="landing"] .landing-route-card { padding: 10px 14px !important; }
body[data-active-panel="landing"] .landing-route-progress {
  width: 50px !important;
  height: 50px !important;
}
body[data-active-panel="landing"] .landing-route-progress span { font-size: 7px !important; }
body[data-active-panel="landing"] .landing-route-progress strong { font-size: 13px !important; }
body[data-active-panel="landing"] .landing-route-progress-track { margin-bottom: 5px !important; }
body[data-active-panel="landing"] .landing-ai-timeline { gap: 4px !important; }
body[data-active-panel="landing"] .landing-ai-step {
  height: 28px !important;
  min-height: 28px !important;
  padding: 4px 5px !important;
}
body[data-active-panel="landing"] .landing-ai-status-bar {
  margin-top: 5px !important;
  padding-top: 5px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth,
body[data-active-panel="landing"] .landing-xiaowen-briefing {
  height: 172px !important;
  min-height: 172px !important;
  max-height: 172px !important;
}
body[data-active-panel="landing"] .landing-weekly-growth-item {
  min-height: 60px !important;
  padding-bottom: 18px !important;
}
body[data-active-panel="landing"] .landing-weekly-growth-item strong { top: 32px !important; }
body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
  width: 92px !important;
  height: 92px !important;
}
body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
  width: 88px !important;
  height: 88px !important;
}
body[data-active-panel="landing"] .landing-xiaowen-briefing-stats { right: 102px !important; }

body[data-active-panel="landing"] .landing-hardware-focus,
body[data-active-panel="landing"] .landing-hardware-questions,
body[data-active-panel="landing"] .landing-training-heatmap {
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
}
body[data-active-panel="landing"] .landing-hardware-card { min-height: 126px !important; }

body[data-active-panel="landing"] .landing-special-training,
body[data-active-panel="landing"] .landing-coach-card-bottom {
  height: 136px !important;
  min-height: 136px !important;
  max-height: 136px !important;
}
body[data-active-panel="landing"] .landing-special-training-item { min-height: 78px !important; }
body[data-active-panel="landing"] .landing-coach-card-bottom img {
  width: 88px !important;
  height: 88px !important;
}

/* Homepage cockpit v1.4: shorter rows for less vertical scrolling. */
body[data-active-panel="landing"] .landing-primary-recommendation,
body[data-active-panel="landing"] .landing-route-card {
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow {
  top: 24px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  top: 62px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-training-tag {
  top: 64px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy > p:not(.eyebrow) {
  top: 98px !important;
}

body[data-active-panel="landing"] .landing-recommendation-meta {
  bottom: 60px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
  top: 20px !important;
  height: 178px !important;
  min-height: 178px !important;
}

body[data-active-panel="landing"] .landing-route-card {
  padding: 10px 14px !important;
}

body[data-active-panel="landing"] .landing-route-progress {
  width: 50px !important;
  height: 50px !important;
}

body[data-active-panel="landing"] .landing-route-progress span {
  font-size: 7px !important;
}

body[data-active-panel="landing"] .landing-route-progress strong {
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-route-progress-track {
  margin-bottom: 5px !important;
}

body[data-active-panel="landing"] .landing-ai-timeline {
  gap: 4px !important;
}

body[data-active-panel="landing"] .landing-ai-step {
  height: 28px !important;
  min-height: 28px !important;
  padding: 4px 5px !important;
}

body[data-active-panel="landing"] .landing-ai-status-bar {
  margin-top: 5px !important;
  padding-top: 5px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth,
body[data-active-panel="landing"] .landing-xiaowen-briefing {
  height: 172px !important;
  min-height: 172px !important;
  max-height: 172px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item {
  min-height: 60px !important;
  padding-bottom: 18px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item strong {
  top: 32px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
  width: 92px !important;
  height: 92px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
  width: 88px !important;
  height: 88px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
  right: 102px !important;
}

body[data-active-panel="landing"] .landing-hardware-focus,
body[data-active-panel="landing"] .landing-hardware-questions,
body[data-active-panel="landing"] .landing-training-heatmap {
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
}

body[data-active-panel="landing"] .landing-hardware-card {
  min-height: 126px !important;
}

body[data-active-panel="landing"] .landing-special-training,
body[data-active-panel="landing"] .landing-coach-card-bottom {
  height: 136px !important;
  min-height: 136px !important;
  max-height: 136px !important;
}

body[data-active-panel="landing"] .landing-special-training-item {
  min-height: 78px !important;
}

body[data-active-panel="landing"] .landing-coach-card-bottom img {
  width: 88px !important;
  height: 88px !important;
}

/* Static tech-grid mode: keep hardware grid texture, remove left-to-right sweep lines. */
.landing-ai-current-step::before,
.landing-ai-progress-track i::after,
.landing-task-row[data-state="current"]::after,
.landing-special-card.is-current .landing-special-visual::after,
.landing-training-goal-card::before,
.dashboard-training-goal-card::before,
.companion-stage-console::after,
.companion-engine-board::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

.landing-special-card.is-current .special-wave-flow,
.landing-special-card.is-current .special-pulse-flow,
.landing-special-card.is-current .special-debug-flow,
.landing-special-card.is-current .special-pulse-ghost,
.companion-hud-scan span,
.ai-dynamic-card > .ai-dynamic-border-flow {
  animation: none !important;
}

body::before {
  animation: none !important;
}

/* Landing cockpit layout v1 */
body[data-active-panel="landing"] .landing-home-grid {
  grid-template-columns: minmax(0, 1.32fr) minmax(360px, 0.88fr);
  grid-template-areas:
    "welcome welcome"
    "recommendation route"
    "growth briefing"
    "hardware hardware"
    "questions calendar"
    "special special";
  gap: 12px;
}

body[data-active-panel="landing"] .landing-welcome-panel {
  grid-area: welcome;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 18px;
  align-items: center;
  padding: 20px;
}

body[data-active-panel="landing"] .landing-welcome-panel .landing-welcome-copy {
  max-width: none;
  align-content: start;
  gap: 8px;
}

body[data-active-panel="landing"] .landing-greeting-line {
  color: var(--text);
  font-size: 32px;
  font-weight: 950;
  line-height: 1.2;
}

body[data-active-panel="landing"] .landing-streak-line {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.55;
}

body[data-active-panel="landing"] .landing-level-gap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 850;
}

body[data-active-panel="landing"] .landing-level-gap strong {
  color: var(--brand);
  font-size: 20px;
  font-weight: 950;
}

body[data-active-panel="landing"] .landing-coach-suggestion {
  justify-self: end;
  max-width: none;
  width: min(360px, 100%);
  appearance: none;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body[data-active-panel="landing"] .landing-coach-suggestion:hover,
body[data-active-panel="landing"] .landing-coach-suggestion:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--brand-rgb), 0.28);
  box-shadow: 0 18px 40px rgba(79, 70, 229, 0.11);
}

body[data-active-panel="landing"] .landing-coach-suggestion:focus-visible {
  outline: 2px solid rgba(var(--brand-rgb), 0.28);
  outline-offset: 2px;
}

body[data-active-panel="landing"] .landing-welcome-briefing {
  grid-column: 1 / -1;
  max-width: none;
}

body[data-active-panel="landing"] .landing-welcome-briefing[hidden] {
  display: none;
}

body[data-active-panel="landing"] .landing-cockpit-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(124, 77, 255, 0.1);
  border-radius: 16px;
  background: #f5f8fc;
}

body[data-active-panel="landing"] .landing-cockpit-strip div {
  display: grid;
  gap: 4px;
  min-height: 64px;
  align-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

body[data-active-panel="landing"] .landing-cockpit-strip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

body[data-active-panel="landing"] .landing-cockpit-strip strong {
  min-width: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-active-panel="landing"] .landing-primary-recommendation {
  grid-area: recommendation;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.78fr);
  gap: 22px;
  align-items: center;
  height: 280px;
  min-height: 280px;
  padding: 24px 30px;
  overflow: hidden;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy {
  align-content: center;
  gap: 12px;
  max-width: none;
}

body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  font-size: clamp(32px, 3vw, 44px);
}

body[data-active-panel="landing"] .landing-recommendation-preview {
  height: 232px;
  min-height: 232px;
}

body[data-active-panel="landing"] .landing-route-card {
  grid-area: route;
  display: grid;
  align-content: stretch;
  gap: 14px;
  padding: 18px;
}

.landing-route-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-route-head span {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.landing-route-head strong {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.landing-route-head em {
  color: var(--brand);
  font-style: normal;
}

body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
  gap: 8px;
}

body[data-active-panel="landing"] .landing-route-card .landing-ai-step {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  min-height: 50px;
  padding: 8px 10px;
  border-color: rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

body[data-active-panel="landing"] .landing-route-card .landing-ai-step::after {
  content: none;
}

body[data-active-panel="landing"] .landing-route-card .landing-ai-step-feedback {
  display: none;
}

body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar {
  margin-top: auto;
}

body[data-active-panel="landing"] .landing-weekly-growth {
  grid-area: growth;
  grid-column: auto;
  margin-top: 0;
}

body[data-active-panel="landing"] .landing-ai-briefing {
  max-width: none;
  align-content: start;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing {
  grid-area: briefing;
}

body[data-active-panel="landing"] .landing-ai-briefing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-active-panel="landing"] .landing-hardware-focus {
  grid-area: hardware;
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.1), transparent 36%),
    rgba(255, 255, 255, 0.76);
}

body[data-active-panel="landing"] .landing-hardware-chip-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body[data-active-panel="landing"] .landing-hardware-chip-list button {
  min-height: 112px;
  border-radius: 8px;
}

body[data-active-panel="landing"] .landing-hardware-questions {
  grid-area: questions;
}

body[data-active-panel="landing"] .landing-training-heatmap {
  grid-area: calendar;
}

body[data-active-panel="landing"] .landing-special-training {
  grid-area: special;
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  body[data-active-panel="landing"] .landing-home-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "welcome"
      "recommendation"
      "route"
      "growth"
      "briefing"
      "hardware"
      "questions"
      "calendar"
      "special";
  }

  body[data-active-panel="landing"] .landing-primary-recommendation {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 280px;
  }

  body[data-active-panel="landing"] .landing-welcome-panel {
    grid-template-columns: 1fr;
  }

  body[data-active-panel="landing"] .landing-coach-suggestion {
    justify-self: stretch;
    width: 100%;
  }

  body[data-active-panel="landing"] .landing-hardware-chip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-active-panel="landing"] .landing-cockpit-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body[data-active-panel="landing"] .landing-greeting-line {
    font-size: 22px;
  }

  body[data-active-panel="landing"] .landing-ai-briefing-grid,
  body[data-active-panel="landing"] .landing-weekly-growth-list,
  body[data-active-panel="landing"] .landing-special-training-list,
  body[data-active-panel="landing"] .landing-hardware-chip-list {
    grid-template-columns: 1fr;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing {
    grid-template-columns: 1fr;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
    justify-self: center;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
    grid-template-columns: 1fr;
  }

  body[data-active-panel="landing"] .landing-cockpit-strip {
    grid-template-columns: 1fr;
  }
}

/* XiaoWen system: default online capsule, expanded character appears only on proactive coach moments. */
#companionDock.companion-dock.companion-collapsed #companionMini {
  width: auto !important;
  min-width: 112px !important;
  height: 40px !important;
  min-height: 40px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 14px !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 18px 50%, #22c55e 0 4px, transparent 4.8px),
    rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 14px 30px rgba(79, 70, 229, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.74) inset !important;
  overflow: hidden !important;
}

#companionDock.companion-dock.companion-collapsed #companionMini > * {
  display: none !important;
}

#companionDock.companion-dock.companion-collapsed #companionMini::after {
  content: "工程指导" !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  padding: 0 0 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(51, 65, 85, 0.94) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  transform: none !important;
}

html[data-theme="dark"] #companionDock.companion-dock.companion-collapsed #companionMini {
  background:
    radial-gradient(circle at 18px 50%, #22c55e 0 4px, transparent 4.8px),
    rgba(15, 23, 42, 0.9) !important;
}

html[data-theme="dark"] #companionDock.companion-dock.companion-collapsed #companionMini::after {
  color: rgba(226, 232, 240, 0.92) !important;
}

/* Visual spec v1 */
:root,
html[data-theme="light"] {
  --bg: #f5f8fc;
  --bg-strong: #f5f8fc;
  --panel: #ffffff;
  --panel-soft: #ffffff;
  --panel-tint: #ffffff;
  --text: #111827;
  --muted: #64748b;
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.12);
  --line-soft: rgba(15, 23, 42, 0.06);
  --brand: #7c4dff;
  --brand-rgb: 124, 77, 255;
  --accent: #5b8cff;
  --accent-strong: #4f7df2;
  --accent-rgb: 91, 140, 255;
  --success: #22c55e;
  --success-rgb: 34, 197, 94;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.06);
}

html:not([data-theme="dark"]) body,
html[data-theme="light"] body {
  background: #f5f8fc !important;
  color: var(--text) !important;
}

html:not([data-theme="dark"]) .main,
html[data-theme="light"] .main,
html:not([data-theme="dark"]) .panel.active,
html[data-theme="light"] .panel.active {
  background: #f5f8fc !important;
}

html:not([data-theme="dark"]) body::before,
html:not([data-theme="dark"]) body::after,
html[data-theme="light"] body::before,
html[data-theme="light"] body::after,
html:not([data-theme="dark"]) .panel.active::before,
html[data-theme="light"] .panel.active::before {
  display: none !important;
}

html:not([data-theme="dark"]) .section-card,
html:not([data-theme="dark"]) .hero-card,
html:not([data-theme="dark"]) .info-card,
html:not([data-theme="dark"]) .metric-card,
html:not([data-theme="dark"]) .panel.active .section-card,
html:not([data-theme="dark"]) .panel.active .hero-card,
html:not([data-theme="dark"]) .panel.active .info-card,
html:not([data-theme="dark"]) .panel.active .metric-card,
html[data-theme="light"] .section-card,
html[data-theme="light"] .hero-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .panel.active .section-card,
html[data-theme="light"] .panel.active .hero-card,
html[data-theme="light"] .panel.active .info-card,
html[data-theme="light"] .panel.active .metric-card {
  border-color: rgba(15, 23, 42, 0.06) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: none !important;
}

html:not([data-theme="dark"]) body[data-active-panel="landing"] .landing-home-grid > .section-card,
html[data-theme="light"] body[data-active-panel="landing"] .landing-home-grid > .section-card {
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}

html:not([data-theme="dark"]) .primary-btn,
html[data-theme="light"] .primary-btn {
  background: linear-gradient(135deg, #7c4dff, #5b8cff) !important;
}

/* Image match v1: homepage cockpit follows the provided dashboard reference. */
body[data-active-panel="landing"] #runtimeStatusStrip,
body[data-active-panel="landing"] .landing-cockpit-strip,
body[data-active-panel="landing"] #companionDock {
  display: none !important;
}

body[data-active-panel="landing"] .content {
  background: #f5f8fc !important;
}

body[data-active-panel="landing"] .landing-workspace {
  padding: 0 !important;
  background: #f5f8fc !important;
}

body[data-active-panel="landing"] .landing-home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.9fr) !important;
  grid-template-areas:
    "welcome welcome"
    "recommendation route"
    "growth briefing"
    "hardware hardware"
    "questions calendar"
    "special coach" !important;
  gap: 12px !important;
  width: min(100%, 1286px) !important;
  margin: 0 auto !important;
  padding: 0 20px 22px !important;
}

body[data-active-panel="landing"] .landing-home-grid > .section-card {
  border: 1px solid rgba(90, 108, 148, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}

body[data-active-panel="landing"] .landing-welcome-panel {
  grid-area: welcome !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 10px 10px 12px 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-panel="landing"] .landing-greeting-line {
  margin: 0 0 6px !important;
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="landing"] .landing-streak-line {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
}

body[data-active-panel="landing"] .landing-streak-line::after {
  content: "，一起持续进步吧！";
}

body[data-active-panel="landing"] .landing-level-gap {
  display: none !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion {
  justify-self: center !important;
  width: 118px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion span {
  color: #172033 !important;
  font-size: 14px !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion p {
  display: none !important;
}

body[data-active-panel="landing"] .landing-welcome-panel::after {
  content: "↻  自定义首页";
  justify-self: end;
  display: inline-grid;
  place-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(90, 108, 148, 0.16);
  border-radius: 8px;
  color: #0f172a;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  font-size: 13px;
  font-weight: 800;
}

body[data-active-panel="landing"] .landing-primary-recommendation {
  grid-area: recommendation !important;
  min-height: 268px !important;
  height: 268px !important;
  display: grid !important;
  grid-template-columns: minmax(330px, 0.88fr) minmax(260px, 0.72fr) !important;
  align-items: center !important;
  padding: 28px 30px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(124, 77, 255, 0.16), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f6f9ff 64%, #f0edff 100%) !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow {
  width: fit-content !important;
  margin-bottom: 14px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  color: #7c4dff !important;
  background: rgba(124, 77, 255, 0.12) !important;
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  display: inline !important;
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="landing"] .landing-training-tag {
  display: inline-flex !important;
  margin-left: 10px !important;
  transform: translateY(-3px);
  padding: 4px 8px !important;
  border-radius: 6px !important;
  color: #4f7df2 !important;
  background: rgba(91, 140, 255, 0.13) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy > p:not(.eyebrow) {
  margin: 12px 0 24px !important;
  color: #64748b !important;
  font-size: 14px !important;
}

body[data-active-panel="landing"] .landing-recommendation-meta {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

body[data-active-panel="landing"] .landing-recommendation-meta span {
  min-width: 112px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(90, 108, 148, 0.12) !important;
  border-radius: 8px !important;
  color: #475569 !important;
  background: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

body[data-active-panel="landing"] .landing-primary-action {
  width: 170px !important;
  height: 42px !important;
  border-radius: 7px !important;
  box-shadow: 0 10px 22px rgba(124, 77, 255, 0.26) !important;
}

body[data-active-panel="landing"] .landing-recommendation-preview {
  min-height: 230px !important;
  display: grid !important;
  place-items: center !important;
}

body[data-active-panel="landing"] .landing-hero-stack {
  width: 210px !important;
  height: 154px !important;
  filter: drop-shadow(0 24px 22px rgba(79, 70, 229, 0.22)) !important;
  transform: rotateX(58deg) rotateZ(-42deg) !important;
}

body[data-active-panel="landing"] .landing-hero-stack span {
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(180, 205, 255, 0.75), rgba(90, 82, 255, 0.95)) !important;
}

body[data-active-panel="landing"] .landing-hero-orbit,
body[data-active-panel="landing"] .landing-hero-panel {
  opacity: 0.72 !important;
}

body[data-active-panel="landing"] .landing-route-card {
  grid-area: route !important;
  min-height: 268px !important;
  padding: 18px 20px 14px !important;
}

body[data-active-panel="landing"] .landing-route-head,
body[data-active-panel="landing"] .landing-weekly-growth-head,
body[data-active-panel="landing"] .landing-xiaowen-briefing-head,
body[data-active-panel="landing"] .landing-hardware-head,
body[data-active-panel="landing"] .landing-heatmap-head,
body[data-active-panel="landing"] .landing-special-training-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

body[data-active-panel="landing"] .landing-route-head span,
body[data-active-panel="landing"] .landing-weekly-growth-head span,
body[data-active-panel="landing"] .landing-xiaowen-briefing-head span,
body[data-active-panel="landing"] .landing-hardware-head span,
body[data-active-panel="landing"] .landing-heatmap-head span,
body[data-active-panel="landing"] .landing-special-training-head span {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

body[data-active-panel="landing"] .landing-route-head strong,
body[data-active-panel="landing"] .landing-weekly-growth-head strong,
body[data-active-panel="landing"] .landing-xiaowen-briefing-head strong,
body[data-active-panel="landing"] .landing-hardware-head strong,
body[data-active-panel="landing"] .landing-heatmap-head strong,
body[data-active-panel="landing"] .landing-special-training-head strong {
  color: #8a97ad !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

body[data-active-panel="landing"] .landing-route-head strong {
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-route-head strong::before {
  content: "今日进度  2/4";
}

body[data-active-panel="landing"] .landing-route-head strong > * {
  display: none !important;
}

body[data-active-panel="landing"] .landing-ai-timeline {
  gap: 8px !important;
}

body[data-active-panel="landing"] .landing-ai-step {
  grid-template-columns: 26px 1fr auto !important;
  min-height: 34px !important;
  padding: 8px 6px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-panel="landing"] .landing-ai-step.is-current {
  background: rgba(124, 77, 255, 0.08) !important;
}

body[data-active-panel="landing"] .landing-ai-step-index {
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-ai-step-title strong {
  color: #172033 !important;
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-ai-step-state {
  justify-self: end !important;
  color: #8a97ad !important;
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-ai-step.is-done .landing-ai-step-state {
  color: #22c55e !important;
}

body[data-active-panel="landing"] .landing-ai-step.is-current .landing-ai-step-state {
  color: #7c4dff !important;
}

body[data-active-panel="landing"] .landing-ai-step-feedback {
  display: none !important;
}

body[data-active-panel="landing"] .landing-ai-status-bar {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(90, 108, 148, 0.12) !important;
  color: #64748b !important;
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-ai-status-bar strong {
  color: #7c4dff !important;
  font-size: 16px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth {
  grid-area: growth !important;
  padding: 14px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-head {
  display: block !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-head strong {
  display: block !important;
  margin-top: 2px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item {
  position: relative !important;
  min-height: 92px !important;
  padding: 12px 14px 26px !important;
  border: 1px solid rgba(90, 108, 148, 0.12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 18px;
  background: var(--sparkline, linear-gradient(135deg, transparent 45%, #7c4dff 46% 52%, transparent 53%)) center / 100% 100% no-repeat;
}

body[data-active-panel="landing"] .landing-weekly-growth-item:nth-child(1)::after {
  --sparkline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpolyline points='0,20 16,15 30,16 44,12 60,10 76,6 92,9 108,4 120,6' fill='none' stroke='%237C4DFF' stroke-width='3'/%3E%3C/svg%3E");
}

body[data-active-panel="landing"] .landing-weekly-growth-item:nth-child(2)::after {
  --sparkline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpolyline points='0,16 16,12 32,15 48,8 64,11 80,9 96,12 112,5 120,7' fill='none' stroke='%235B8CFF' stroke-width='3'/%3E%3C/svg%3E");
}

body[data-active-panel="landing"] .landing-weekly-growth-item:nth-child(3)::after {
  --sparkline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpolyline points='0,18 14,14 28,13 42,8 58,10 74,7 90,2 104,6 120,3' fill='none' stroke='%23F59E0B' stroke-width='3'/%3E%3C/svg%3E");
}

body[data-active-panel="landing"] .landing-weekly-growth-item:nth-child(4)::after {
  --sparkline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpolyline points='0,15 16,10 32,13 48,8 64,9 80,7 96,3 112,8 120,4' fill='none' stroke='%2306B6D4' stroke-width='3'/%3E%3C/svg%3E");
}

body[data-active-panel="landing"] .landing-weekly-growth-item span {
  color: #172033 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item p {
  margin: 12px 0 0 !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item strong {
  position: absolute !important;
  top: 45px !important;
  right: 14px !important;
  color: #22c55e !important;
  font-size: 15px !important;
}

body[data-active-panel="landing"] .landing-growth-score {
  display: grid !important;
  grid-template-columns: auto auto 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

body[data-active-panel="landing"] .landing-growth-score span {
  color: #475569 !important;
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-growth-score strong {
  color: #4f46e5 !important;
  font-size: 18px !important;
}

body[data-active-panel="landing"] .landing-growth-score-track {
  height: 5px !important;
  border-radius: 999px !important;
  background: #edf0f7 !important;
}

body[data-active-panel="landing"] .landing-growth-score-track i {
  background: linear-gradient(90deg, #7c4dff, #5b8cff) !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing {
  grid-area: briefing !important;
  grid-template-columns: minmax(0, 1fr) 138px !important;
  align-items: end !important;
  min-height: 218px !important;
  padding: 16px 18px 0 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7faff 58%, #f1efff 100%) !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-copy p {
  color: #0f172a !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-copy strong {
  color: #4f46e5 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
  min-height: 62px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
  align-self: end !important;
  width: 132px !important;
  height: 132px !important;
  border-radius: 999px 999px 16px 16px !important;
  background: radial-gradient(circle, rgba(124, 77, 255, 0.17), transparent 68%) !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
  width: 128px !important;
  height: 128px !important;
  object-fit: contain !important;
}

body[data-active-panel="landing"] .landing-hardware-focus {
  grid-area: hardware !important;
  padding: 16px !important;
}

body[data-active-panel="landing"] .landing-hardware-chip-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body[data-active-panel="landing"] .landing-hardware-card {
  display: grid !important;
  justify-items: center !important;
  min-height: 132px !important;
  padding: 12px 10px !important;
  border: 1px solid rgba(90, 108, 148, 0.12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: center !important;
}

body[data-active-panel="landing"] .landing-hardware-card strong {
  display: grid !important;
  gap: 8px !important;
  justify-items: center !important;
  color: #0f172a !important;
  font-size: 16px !important;
}

body[data-active-panel="landing"] .landing-hardware-card strong span {
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  background: rgba(124, 77, 255, 0.12) !important;
  font-size: 24px !important;
}

body[data-active-panel="landing"] .landing-hardware-card:nth-child(2) strong span {
  background: rgba(91, 140, 255, 0.12) !important;
}

body[data-active-panel="landing"] .landing-hardware-card:nth-child(3) strong span {
  background: rgba(6, 182, 212, 0.12) !important;
}

body[data-active-panel="landing"] .landing-hardware-card:nth-child(4) strong span {
  background: rgba(245, 158, 11, 0.13) !important;
}

body[data-active-panel="landing"] .landing-hardware-card:nth-child(5) strong span {
  background: rgba(34, 197, 94, 0.13) !important;
}

body[data-active-panel="landing"] .landing-hardware-card em {
  color: #0f172a !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

body[data-active-panel="landing"] .landing-hardware-card small {
  color: #8a97ad !important;
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-hardware-questions {
  grid-area: questions !important;
  padding: 16px !important;
}

body[data-active-panel="landing"] .landing-question-list {
  display: grid !important;
  gap: 9px !important;
}

body[data-active-panel="landing"] .landing-question-list button {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-panel="landing"] .landing-question-list button strong {
  color: #172033 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-panel="landing"] .landing-question-list button small {
  padding: 3px 7px !important;
  border-radius: 5px !important;
  color: #4f46e5 !important;
  background: rgba(124, 77, 255, 0.12) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body[data-active-panel="landing"] .landing-question-list button:nth-child(4) small,
body[data-active-panel="landing"] .landing-question-list button:nth-child(5) small {
  color: #16a34a !important;
  background: rgba(34, 197, 94, 0.12) !important;
}

body[data-active-panel="landing"] .landing-question-list button em {
  color: #64748b !important;
  font-size: 12px !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

body[data-active-panel="landing"] .landing-question-more {
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #7c4dff !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body[data-active-panel="landing"] .landing-training-heatmap {
  grid-area: calendar !important;
  padding: 16px !important;
}

body[data-active-panel="landing"] .landing-heatmap-head strong em {
  color: #64748b !important;
  font-style: normal !important;
}

body[data-active-panel="landing"] .landing-heatmap-streak {
  display: none !important;
}

body[data-active-panel="landing"] .landing-heatmap-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px 10px !important;
  align-items: center !important;
  margin: 8px 0 14px !important;
}

body[data-active-panel="landing"] .landing-calendar-weekday {
  color: #8a97ad !important;
  font-size: 12px !important;
  text-align: center !important;
}

body[data-active-panel="landing"] .landing-calendar-day {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #334155 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

body[data-active-panel="landing"] .landing-calendar-day[data-muted="true"] {
  color: #a9b4c7 !important;
}

body[data-active-panel="landing"] .landing-calendar-day[data-level="1"] {
  color: #6d5be8 !important;
  background: rgba(124, 77, 255, 0.12) !important;
}

body[data-active-panel="landing"] .landing-calendar-day[data-level="2"] {
  color: #5b3df4 !important;
  background: rgba(124, 77, 255, 0.22) !important;
}

body[data-active-panel="landing"] .landing-calendar-day[data-level="3"] {
  color: #fff !important;
  background: linear-gradient(135deg, #7c4dff, #5b8cff) !important;
}

body[data-active-panel="landing"] .landing-heatmap-legend {
  display: flex !important;
  gap: 14px !important;
  color: #8a97ad !important;
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-heatmap-legend span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body[data-active-panel="landing"] .landing-heatmap-legend i {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
}

body[data-active-panel="landing"] .landing-heatmap-legend i[data-level="1"] {
  background: rgba(124, 77, 255, 0.18) !important;
}

body[data-active-panel="landing"] .landing-heatmap-legend i[data-level="2"] {
  background: rgba(124, 77, 255, 0.34) !important;
}

body[data-active-panel="landing"] .landing-heatmap-legend i[data-level="3"] {
  background: #7c4dff !important;
}

body[data-active-panel="landing"] .landing-special-training {
  grid-area: special !important;
  grid-column: auto !important;
  padding: 14px !important;
}

body[data-active-panel="landing"] .landing-special-training-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body[data-active-panel="landing"] .landing-special-training-item {
  min-height: 118px !important;
  padding: 12px !important;
  border: 1px solid rgba(90, 108, 148, 0.12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-active-panel="landing"] .landing-special-training-item strong {
  color: #172033 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-active-panel="landing"] .landing-special-training-item span {
  color: #64748b !important;
  font-size: 11px !important;
}

body[data-active-panel="landing"] .landing-special-training-item p {
  color: #475569 !important;
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-special-training-item p b {
  color: #0f172a !important;
  font-size: 18px !important;
}

body[data-active-panel="landing"] .landing-special-training-item em {
  min-width: 76px !important;
  height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 7px !important;
  color: #7c4dff !important;
  background: rgba(124, 77, 255, 0.12) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

body[data-active-panel="landing"] .landing-coach-card-bottom {
  grid-area: coach !important;
  position: relative !important;
  min-height: 144px !important;
  padding: 16px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7faff 58%, #f1efff 100%) !important;
}

body[data-active-panel="landing"] .landing-coach-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

body[data-active-panel="landing"] .landing-coach-card-head span {
  color: #7c4dff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

body[data-active-panel="landing"] .landing-coach-card-head strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #64748b !important;
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-coach-card-head i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
}

body[data-active-panel="landing"] .landing-coach-card-copy {
  position: relative !important;
  z-index: 1 !important;
  width: calc(100% - 108px) !important;
}

body[data-active-panel="landing"] .landing-coach-card-copy p {
  margin: 0 0 12px !important;
  color: #334155 !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

body[data-active-panel="landing"] .landing-coach-card-bottom .primary-btn {
  width: 72px !important;
  height: 30px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-coach-card-bottom img {
  position: absolute !important;
  right: 4px !important;
  bottom: -8px !important;
  width: 118px !important;
  height: 118px !important;
  object-fit: contain !important;
}

.landing-special-card.is-current .special-wave-flow,
.landing-special-card.is-current .special-pulse-flow,
.landing-special-card.is-current .special-debug-flow,
.landing-special-card.is-current .special-pulse-ghost,
.landing-special-visual::after,
.landing-hero-orbit,
.landing-hero-stack,
.landing-hero-panel {
  animation: none !important;
}

@media (max-width: 1180px) {
  body[data-active-panel="landing"] .landing-home-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "welcome"
      "recommendation"
      "route"
      "growth"
      "briefing"
      "hardware"
      "questions"
      "calendar"
      "special"
      "coach" !important;
  }

  body[data-active-panel="landing"] .landing-special-training-list,
  body[data-active-panel="landing"] .landing-weekly-growth-list,
  body[data-active-panel="landing"] .landing-hardware-chip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body[data-active-panel="landing"] .landing-home-grid {
    padding: 0 12px 18px !important;
  }

  body[data-active-panel="landing"] .landing-welcome-panel {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body[data-active-panel="landing"] .landing-welcome-panel::after {
    justify-self: stretch !important;
  }

  body[data-active-panel="landing"] .landing-primary-recommendation,
  body[data-active-panel="landing"] .landing-xiaowen-briefing {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  body[data-active-panel="landing"] .landing-special-training-list,
  body[data-active-panel="landing"] .landing-weekly-growth-list,
  body[data-active-panel="landing"] .landing-hardware-chip-list {
    grid-template-columns: 1fr !important;
  }
}

/* Image match v1.1: remove legacy shell chrome and tighten the reference layout. */
body[data-active-panel="landing"] .topbar,
body[data-active-panel="landing"] #aiDynamicStatus {
  display: none !important;
}

body[data-active-panel="landing"] .shell.sidebar-expanded {
  grid-template-columns: 208px minmax(0, 1fr) !important;
}

body[data-active-panel="landing"] .sidebar {
  width: 208px !important;
  padding: 22px 14px 16px !important;
  background:
    radial-gradient(circle at 80% 15%, rgba(124, 77, 255, 0.18), transparent 32%),
    linear-gradient(180deg, #07142b 0%, #061229 100%) !important;
}

body[data-active-panel="landing"] .brand {
  height: 78px !important;
  margin: 0 0 14px !important;
  padding: 0 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-panel="landing"] .brand-head {
  align-items: flex-start !important;
}

body[data-active-panel="landing"] .brand-icon-logo,
body[data-active-panel="landing"] .sidebar-toggle {
  display: none !important;
}

body[data-active-panel="landing"] .brand-main-logo {
  width: 116px !important;
  height: auto !important;
  object-fit: contain !important;
}

body[data-active-panel="landing"] .brand-subtitle-text {
  margin-top: 8px !important;
  color: rgba(226, 232, 240, 0.88) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="landing"] .sidebar-section {
  display: block !important;
  margin: 9px 14px 2px !important;
  color: rgba(203, 213, 225, 0.62) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body[data-active-panel="landing"] .menu {
  gap: 4px !important;
}

body[data-active-panel="landing"] .menu-item {
  position: relative !important;
  height: 42px !important;
  padding: 0 14px 0 46px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: rgba(226, 232, 240, 0.88) !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

body[data-active-panel="landing"] .menu-item.active {
  color: #fff !important;
  background: linear-gradient(135deg, #6d5cff 0%, #a334ff 100%) !important;
  box-shadow: 0 12px 28px rgba(124, 77, 255, 0.34) !important;
}

body[data-active-panel="landing"] .menu-item::before {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  color: currentColor;
  font-size: 16px;
}

body[data-active-panel="landing"] .menu-item:nth-of-type(1)::before { content: "⌂"; }
body[data-active-panel="landing"] .menu-item:nth-of-type(2)::before { content: "▥"; }
body[data-active-panel="landing"] .menu-item:nth-of-type(3)::before { content: "♙"; }
body[data-active-panel="landing"] .menu-item:nth-of-type(4)::before { content: "⚙"; }
body[data-active-panel="landing"] .menu-item:nth-of-type(5)::before { content: "⌁"; }
body[data-active-panel="landing"] .menu-item:nth-of-type(6)::before { content: "◖"; }
body[data-active-panel="landing"] .menu-item:nth-of-type(7)::before { content: "□"; }
body[data-active-panel="landing"] .menu-item:nth-of-type(8)::before { content: "▧"; }
body[data-active-panel="landing"] .menu-item:nth-of-type(9)::before { content: "▤"; }
body[data-active-panel="landing"] .menu-item:nth-of-type(10)::before { content: "♢"; }
body[data-active-panel="landing"] .menu-item:nth-of-type(11)::before { content: "⚙"; }

body[data-active-panel="landing"] .menu-item--bottom {
  margin-top: 170px !important;
}

body[data-active-panel="landing"] .sidebar-account-card {
  margin-top: auto !important;
  padding: 10px !important;
  border-top: 1px solid rgba(226, 232, 240, 0.12) !important;
  background: transparent !important;
}

body[data-active-panel="landing"] .sidebar-account-button {
  height: 52px !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

body[data-active-panel="landing"] .main {
  background: #f5f8fc !important;
  padding: 0 !important;
}

body[data-active-panel="landing"] .landing-home-grid {
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 20px 22px !important;
  grid-template-columns: minmax(0, 1.38fr) minmax(410px, 0.84fr) !important;
  align-items: start !important;
}

body[data-active-panel="landing"] .landing-welcome-panel {
  min-height: 58px !important;
  padding: 0 10px 2px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation,
body[data-active-panel="landing"] .landing-route-card {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  overflow: hidden !important;
  margin: 0 !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy {
  display: contents !important;
  min-width: 0 !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow {
  position: absolute !important;
  left: 30px !important;
  top: 42px !important;
  margin: 0 !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  position: absolute !important;
  left: 30px !important;
  top: 86px !important;
  margin: 0 !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-training-tag {
  position: absolute !important;
  left: 248px !important;
  top: 88px !important;
  margin-left: 0 !important;
  transform: none !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy > p:not(.eyebrow) {
  position: absolute !important;
  left: 30px !important;
  top: 126px !important;
  width: 330px !important;
  margin: 0 !important;
  line-height: 1.7 !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
  position: absolute !important;
  right: 12px !important;
  top: 32px !important;
  width: 250px !important;
  height: 224px !important;
  min-height: 224px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow,
body[data-active-panel="landing"] .landing-primary-recommendation h1,
body[data-active-panel="landing"] .landing-primary-recommendation .landing-training-tag,
body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy > p:not(.eyebrow),
body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-meta,
body[data-active-panel="landing"] .landing-primary-recommendation .landing-primary-action {
  z-index: 2 !important;
}

body[data-active-panel="landing"] .landing-recommendation-meta {
  position: absolute !important;
  left: 30px !important;
  top: auto !important;
  bottom: 76px !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

body[data-active-panel="landing"] .landing-recommendation-meta span {
  min-width: 96px !important;
  height: 38px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

body[data-active-panel="landing"] .landing-primary-action.primary-btn {
  position: absolute !important;
  left: 30px !important;
  top: auto !important;
  bottom: 18px !important;
  min-height: 42px !important;
  height: 42px !important;
  margin-top: 0 !important;
  padding: 0 18px !important;
  transform: none !important;
}

body[data-active-panel="landing"] .landing-ai-step {
  height: 38px !important;
  min-height: 38px !important;
  padding: 6px 6px !important;
}

body[data-active-panel="landing"] .landing-ai-status-bar {
  margin-top: 8px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth,
body[data-active-panel="landing"] .landing-xiaowen-briefing {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  align-self: start !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-list {
  gap: 10px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item {
  min-height: 86px !important;
  padding: 10px 12px 24px !important;
}

body[data-active-panel="landing"] .landing-growth-score {
  margin-top: 10px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing {
  padding-top: 14px !important;
  position: relative !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-copy {
  position: static !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-copy p {
  margin: 8px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  max-width: 245px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
  max-width: 220px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-advice br {
  display: none !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
  position: absolute !important;
  left: 18px !important;
  right: 150px !important;
  bottom: 18px !important;
  width: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-top: 0 !important;
  gap: 8px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
  min-height: 54px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
  width: 116px !important;
  height: 116px !important;
  position: absolute !important;
  right: 12px !important;
  bottom: 0 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
  width: 112px !important;
  height: 112px !important;
}

body[data-active-panel="landing"] #companionDock.companion-dock,
body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed,
body[data-active-panel="landing"] #companionDock.companion-dock.companion-expanded {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Homepage cockpit v1.3: functional reference layout with compact vertical travel. */
body[data-active-panel="landing"] .landing-home-grid {
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 16px 16px !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.74fr) minmax(280px, 0.68fr) !important;
  grid-template-areas:
    "welcome welcome welcome"
    "recommendation recommendation route"
    "growth growth briefing"
    "hardware questions calendar"
    "special special coach" !important;
  gap: 10px !important;
  align-items: start !important;
}

body[data-active-panel="landing"] .landing-welcome-panel {
  min-height: 48px !important;
  padding: 0 8px !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 12px !important;
}

body[data-active-panel="landing"] .landing-welcome-panel::after {
  display: none !important;
  content: none !important;
}

body[data-active-panel="landing"] .landing-greeting-line {
  margin-bottom: 2px !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
}

body[data-active-panel="landing"] .landing-streak-line {
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion,
body[data-active-panel="landing"] .landing-customize-home {
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(90, 108, 148, 0.14) !important;
  border-radius: 8px !important;
  color: #172033 !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body[data-active-panel="landing"] .landing-customize-home span {
  color: #4f46e5 !important;
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation,
body[data-active-panel="landing"] .landing-route-card {
  height: 246px !important;
  min-height: 246px !important;
  max-height: 246px !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation {
  padding: 22px 26px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow {
  left: 26px !important;
  top: 30px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  left: 26px !important;
  top: 70px !important;
  font-size: 24px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-training-tag {
  left: 244px !important;
  top: 72px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy > p:not(.eyebrow) {
  left: 26px !important;
  top: 108px !important;
  width: min(390px, calc(100% - 310px)) !important;
  line-height: 1.55 !important;
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-recommendation-meta {
  left: 26px !important;
  bottom: 66px !important;
  gap: 8px !important;
}

body[data-active-panel="landing"] .landing-recommendation-meta span {
  min-width: 90px !important;
  height: 34px !important;
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-primary-action.primary-btn {
  left: 26px !important;
  bottom: 16px !important;
  height: 38px !important;
  min-height: 38px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
  top: 24px !important;
  right: 8px !important;
  width: 230px !important;
  height: 190px !important;
  min-height: 190px !important;
}

body[data-active-panel="landing"] .landing-hero-stack {
  width: 174px !important;
  height: 128px !important;
}

body[data-active-panel="landing"] .landing-route-card {
  padding: 12px 14px !important;
}

body[data-active-panel="landing"] .landing-route-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 62px !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 5px !important;
}

body[data-active-panel="landing"] .landing-route-title {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body[data-active-panel="landing"] .landing-route-title span {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

body[data-active-panel="landing"] .landing-route-title strong {
  color: #8a97ad !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

body[data-active-panel="landing"] .landing-route-title strong::before,
body[data-active-panel="landing"] .landing-route-head strong::before {
  display: none !important;
  content: none !important;
}

body[data-active-panel="landing"] .landing-route-progress {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: conic-gradient(#7c4dff var(--landing-progress, 65%), #e9eef8 0) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 77, 255, 0.08), 0 8px 18px rgba(124, 77, 255, 0.13) !important;
}

body[data-active-panel="landing"] .landing-route-progress::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(90, 108, 148, 0.08);
}

body[data-active-panel="landing"] .landing-route-progress i {
  display: none !important;
}

body[data-active-panel="landing"] .landing-route-progress span,
body[data-active-panel="landing"] .landing-route-progress strong {
  position: relative !important;
  z-index: 1 !important;
  line-height: 1 !important;
}

body[data-active-panel="landing"] .landing-route-progress span {
  margin-bottom: 4px !important;
  color: #64748b !important;
  font-size: 8px !important;
  font-weight: 850 !important;
}

body[data-active-panel="landing"] .landing-route-progress strong {
  color: #4f46e5 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body[data-active-panel="landing"] .landing-route-progress-track {
  height: 4px !important;
  margin: 0 0 6px !important;
  border-radius: 999px !important;
  background: #edf1f8 !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-route-progress-track i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #7c4dff, #5b8cff) !important;
}

body[data-active-panel="landing"] .landing-ai-timeline {
  gap: 5px !important;
}

body[data-active-panel="landing"] .landing-ai-step {
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 5px 5px !important;
}

body[data-active-panel="landing"] .landing-ai-step-index {
  width: 20px !important;
  height: 20px !important;
}

body[data-active-panel="landing"] .landing-ai-step-title strong {
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-ai-status-bar {
  margin-top: 7px !important;
  padding-top: 7px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  gap: 6px !important;
  align-items: center !important;
}

body[data-active-panel="landing"] #landingGrowthPathText {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-panel="landing"] .landing-weekly-growth,
body[data-active-panel="landing"] .landing-xiaowen-briefing {
  height: 188px !important;
  min-height: 188px !important;
  max-height: 188px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth {
  padding: 12px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-head,
body[data-active-panel="landing"] .landing-xiaowen-briefing-head,
body[data-active-panel="landing"] .landing-hardware-head,
body[data-active-panel="landing"] .landing-heatmap-head,
body[data-active-panel="landing"] .landing-special-training-head {
  margin-bottom: 8px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-list {
  gap: 8px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item {
  min-height: 70px !important;
  padding: 8px 10px 20px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item p {
  margin-top: 8px !important;
  font-size: 14px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item strong {
  top: 36px !important;
  right: 10px !important;
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item::after {
  left: 10px !important;
  right: 10px !important;
  bottom: 8px !important;
  height: 14px !important;
}

body[data-active-panel="landing"] .landing-growth-score {
  margin-top: 8px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing {
  grid-template-columns: minmax(0, 1fr) 108px !important;
  padding: 12px 14px 0 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-copy p {
  margin-top: 6px !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
  margin-top: 5px !important;
  max-width: 154px !important;
  font-size: 12px !important;
  line-height: 1.28 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-advice strong {
  display: inline !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
  left: 14px !important;
  right: 118px !important;
  bottom: 12px !important;
  gap: 6px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
  padding: 7px !important;
  overflow: hidden !important;
  text-align: center !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats span {
  display: block !important;
  font-size: 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats strong {
  display: block !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
  width: 104px !important;
  height: 104px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
  width: 100px !important;
  height: 100px !important;
}

body[data-active-panel="landing"] .landing-hardware-focus,
body[data-active-panel="landing"] .landing-hardware-questions,
body[data-active-panel="landing"] .landing-training-heatmap {
  height: 206px !important;
  min-height: 206px !important;
  max-height: 206px !important;
  padding: 12px !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-hardware-chip-list {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body[data-active-panel="landing"] .landing-hardware-card {
  min-height: 142px !important;
  padding: 9px 6px !important;
}

body[data-active-panel="landing"] .landing-hardware-card strong {
  gap: 6px !important;
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-hardware-card strong span {
  width: 42px !important;
  height: 42px !important;
  font-size: 20px !important;
}

body[data-active-panel="landing"] .landing-question-list {
  gap: 6px !important;
}

body[data-active-panel="landing"] .landing-question-list button {
  min-height: 23px !important;
  gap: 6px !important;
}

body[data-active-panel="landing"] .landing-question-list button strong {
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-question-list button small {
  padding: 2px 5px !important;
  font-size: 10px !important;
}

body[data-active-panel="landing"] .landing-question-list button em {
  font-size: 11px !important;
}

body[data-active-panel="landing"] .landing-question-more {
  margin-top: 7px !important;
}

body[data-active-panel="landing"] .landing-heatmap-grid {
  gap: 4px 5px !important;
  margin: 4px 0 8px !important;
}

body[data-active-panel="landing"] .landing-calendar-weekday {
  font-size: 10px !important;
}

body[data-active-panel="landing"] .landing-calendar-day {
  width: 21px !important;
  height: 21px !important;
  font-size: 10px !important;
  cursor: pointer !important;
}

body[data-active-panel="landing"] .landing-special-training,
body[data-active-panel="landing"] .landing-coach-card-bottom {
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  padding: 12px !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-special-training-list {
  gap: 7px !important;
}

body[data-active-panel="landing"] .landing-special-training-item {
  min-height: 92px !important;
  padding: 9px !important;
}

body[data-active-panel="landing"] .landing-special-training-item.is-current,
body[data-active-panel="landing"] .landing-special-training-item[aria-current="true"] {
  border-color: rgba(124, 77, 255, 0.34) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f6f3ff 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 77, 255, 0.12), 0 8px 20px rgba(124, 77, 255, 0.08) !important;
}

body[data-active-panel="landing"] .landing-special-training-item strong {
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-special-training-item span {
  display: none !important;
}

body[data-active-panel="landing"] .landing-special-training-item p {
  margin: 6px 0 !important;
  font-size: 11px !important;
}

body[data-active-panel="landing"] .landing-special-training-item p b {
  font-size: 16px !important;
}

body[data-active-panel="landing"] .landing-special-training-item em {
  min-width: 66px !important;
  height: 26px !important;
  font-size: 11px !important;
}

body[data-active-panel="landing"] .landing-coach-card-copy {
  width: calc(100% - 94px) !important;
}

body[data-active-panel="landing"] .landing-coach-card-copy p {
  margin-bottom: 8px !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}

body[data-active-panel="landing"] .landing-coach-card-bottom .primary-btn {
  height: 28px !important;
}

body[data-active-panel="landing"] .landing-coach-card-bottom img {
  width: 100px !important;
  height: 100px !important;
  bottom: -6px !important;
}

@media (max-width: 1180px) {
  body[data-active-panel="landing"] .landing-home-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "welcome"
      "recommendation"
      "route"
      "growth"
      "briefing"
      "hardware"
      "questions"
      "calendar"
      "special"
      "coach" !important;
  }
}
/* Interview responsive acceptance: prevent legacy lock sheets from squeezing
   the answer column or assigning overlapping bottom-bar cells.
   The repeated studio ID intentionally outranks later one-ID !important locks.
   app.js mounts the bottom bar under .shell, outside #interviewStudio. */
body[data-active-panel="interview"].interview-meeting-active:has(#interviewStudio#interviewStudio) .interview-bottom-actionbar {
  position: fixed !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  grid-area: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 72px !important;
  max-height: none !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 2fr) !important;
  grid-template-rows: auto !important;
  grid-template-areas: "context answer navigation" !important;
  gap: 12px !important;
  padding: 10px 16px calc(10px + var(--safe-bottom, 0px)) !important;
  overflow: visible !important;
}
body[data-active-panel="interview"].interview-meeting-active:has(#interviewStudio#interviewStudio) .interview-bottom-context {
  grid-area: context !important;
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  height: auto !important;
  gap: 6px 10px !important;
}
body[data-active-panel="interview"].interview-meeting-active:has(#interviewStudio#interviewStudio) .interview-bottom-waveform {
  display: none !important;
}
body[data-active-panel="interview"].interview-meeting-active:has(#interviewStudio#interviewStudio) .interview-bottom-actions {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  gap: 8px !important;
  margin: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
body[data-active-panel="interview"].interview-meeting-active:has(#interviewStudio#interviewStudio) .interview-bottom-actions-center {
  grid-area: answer !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body[data-active-panel="interview"].interview-meeting-active:has(#interviewStudio#interviewStudio) .interview-bottom-actions-right {
  grid-area: navigation !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body[data-active-panel="interview"].interview-meeting-active:has(#interviewStudio#interviewStudio) .interview-bottom-actionbar button {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-area: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 8px !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.3 !important;
}

@media (max-width: 1179px) {
  body[data-active-panel="interview"] #interviewStudio#interviewStudio.interview-space-arena-open {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - 56px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 56px) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    margin-top: 0 !important;
    padding: 10px 0 calc(116px + var(--safe-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio > .interview-training-statusbar {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    grid-area: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-training-title,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-training-actions {
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-training-metrics,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-final-active-mode {
    display: none !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio > .engineering-training-flow {
    flex: 0 0 auto !important;
    grid-area: auto !important;
    min-width: 0 !important;
    margin: 0 12px !important;
    padding: 10px !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio > .engineering-training-flow > header {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio > .engineering-training-flow > header > em {
    display: none !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio > .engineering-training-flow > ol {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio > .interview-main-dashboard {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    grid-area: auto !important;
    gap: 14px !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 12px 14px !important;
    box-sizing: border-box !important;
    overflow: hidden auto !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio > .interview-main-dashboard > .interview-setup-card {
    display: none !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-workspace-card,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-arena-stack,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-copilot-card,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-ai-coach-panel,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-meeting-stage-grid {
    grid-area: auto !important;
    flex: 0 0 auto !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-workspace-card,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-arena-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-workspace-card > .section-head,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-copilot-card > .section-head {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    writing-mode: horizontal-tb !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-arena-stack > .interview-arena-block {
    grid-area: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-answer-live-card,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-text-mode,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio #candidateAnswer {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone {
    position: static !important;
    grid-area: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    padding: 14px !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-answer-action-row,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-answer-zone-head,
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-question-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-copilot-card > .section-head > div {
    height: auto !important;
    min-height: 0 !important;
    writing-mode: horizontal-tb !important;
  }
  body[data-active-panel="interview"]:not(.interview-coach-collapsed) #interviewStudio#interviewStudio .interview-ai-coach-panel {
    display: grid !important;
  }
  body[data-active-panel="interview"].interview-coach-collapsed #interviewStudio#interviewStudio .interview-ai-coach-panel {
    display: none !important;
  }
  body[data-active-panel="interview"].interview-meeting-active:has(#interviewStudio#interviewStudio) .interview-bottom-actionbar {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "context context" "answer navigation" !important;
    gap: 8px 12px !important;
    padding: 10px 12px calc(10px + var(--safe-bottom, 0px)) !important;
  }
  body[data-active-panel="interview"].interview-meeting-active:has(#interviewStudio#interviewStudio) #interviewRecordingTimer {
    font-size: 18px !important;
  }
}
@media (max-width: 640px) {
  body[data-active-panel="interview"] #interviewStudio#interviewStudio.interview-space-arena-open {
    padding-bottom: calc(168px + var(--safe-bottom, 0px)) !important;
  }
  body[data-active-panel="interview"] #interviewStudio#interviewStudio > .interview-training-statusbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-active-panel="interview"].interview-meeting-active:has(#interviewStudio#interviewStudio) .interview-bottom-actionbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas: "context" "answer" "navigation" !important;
  }
}
/* End interview responsive acceptance. */

/* Archived evidence is long-form content, not a three-line list preview. */
#personalProjectAssetsBoard [data-training-report-archive] p,
#personalProjectAssetsBoard [data-training-report-archive] pre {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

/* The engineering guide shares the light workspace, not the dark scope plot. */
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-ai-card h4 {
  color: #0f172a !important;
}
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-note-card textarea {
  color: #334155 !important;
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-note-readback {
  background: #f3f0ff !important;
}
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-note-readback strong {
  color: #5b21b6 !important;
}
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-observation-list button {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-observation-list button strong {
  color: #0f172a !important;
}
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-observation-list button span,
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-observation-list button em {
  color: #475569 !important;
}
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-observation-list button.done {
  background: #edf9f2 !important;
}
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-observation-list button.done em {
  color: #166534 !important;
}
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-observation-list button.active {
  background: #ede9fe !important;
  border-color: #a78bfa !important;
}
html[data-theme="light"] .panel[data-panel="waveform"] .waveform-observation-list button.active em {
  color: #5b21b6 !important;
}