/* source: styles.css */
: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;
}


/* source: homepage-compact.css */
/* Final homepage reference overrides loaded after the legacy stylesheet. */
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;
}

/* Homepage frame v7: keep the homepage locked to the second reference format. */
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .topbar,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #aiDynamicStatus,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #runtimeStatusStrip,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #companionDock,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #companionMini,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #companionMiniBubble,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #companionAmbientStage {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .main {
  min-height: 100vh !important;
  height: 100vh !important;
  padding: 0 !important;
  background: #f5f8fc !important;
  overflow: hidden auto !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-workspace {
  padding: 0 !important;
  background: #f5f8fc !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-home-grid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 24px 18px !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.74fr) minmax(330px, 0.86fr) !important;
  grid-template-areas:
    "welcome welcome welcome"
    "recommendation recommendation route"
    "growth growth briefing"
    "hardware questions calendar"
    "special special coach" !important;
  grid-template-rows: 96px 260px 206px 190px 180px !important;
  gap: 12px !important;
  align-items: start !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-welcome-panel {
  grid-area: welcome !important;
  align-self: stretch !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 148px 164px !important;
  gap: 16px !important;
  align-items: center !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-home-grid > .section-card.landing-welcome-panel,
html:not([data-theme="dark"]) :is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-home-grid > .section-card.landing-welcome-panel,
html[data-theme="light"] :is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-home-grid > .section-card.landing-welcome-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-welcome-panel::before {
  content: "" !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(255, 115, 86, 0.72), rgba(91, 140, 255, 0.28), rgba(124, 77, 255, 0.62)) !important;
  opacity: 0.78 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-home-grid > .section-card.landing-welcome-panel::after {
  display: none !important;
  content: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-greeting-line {
  margin: 0 0 3px !important;
  color: #0f172a !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-streak-line {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-level-gap {
  display: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-coach-suggestion,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-customize-home {
  justify-self: end !important;
  width: auto !important;
  min-width: 132px !important;
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 9px !important;
  color: #172033 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-customize-home {
  min-width: 148px !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-coach-suggestion p {
  display: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-coach-suggestion::before {
  content: "✦" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #7c4dff, #5b8cff) !important;
  font-size: 12px !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-card {
  grid-area: route !important;
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  padding: 16px 18px 12px !important;
  display: grid !important;
  grid-template-rows: auto 4px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 60px !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-title {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-title span {
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-title strong {
  color: #7c879c !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-title strong::before,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-head strong::before {
  display: none !important;
  content: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .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: 0 10px 24px rgba(124, 77, 255, 0.14) !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-progress::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border-radius: 999px !important;
  background: #fff !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-progress i {
  display: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-progress span,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-progress strong {
  position: relative !important;
  z-index: 1 !important;
  line-height: 1 !important;
  text-align: center !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-progress span {
  margin-bottom: 4px !important;
  color: #64748b !important;
  font-size: 8px !important;
  font-weight: 850 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-progress strong {
  color: #4f46e5 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-progress-track {
  height: 4px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #edf1f8 !important;
  overflow: hidden !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-progress-track i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #7c4dff, #5b8cff) !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-timeline {
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step {
  position: relative !important;
  width: 100% !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  overflow: visible !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step::after {
  display: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step-index {
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step-title {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step-title strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #1f2937 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step-state {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 54px !important;
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step-feedback {
  display: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-status-bar {
  min-height: 30px !important;
  margin: 0 !important;
  padding-top: 9px !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  gap: 6px !important;
  align-items: center !important;
  overflow: visible !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #landingGrowthPathText {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-training-heatmap {
  grid-area: calendar !important;
  position: relative !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-training-heatmap .companion-mini,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-training-heatmap .companion-dock,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-training-heatmap .landing-xiaowen-briefing-avatar {
  display: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-coach-card-bottom {
  grid-area: coach !important;
  position: relative !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  display: grid !important;
  align-items: start !important;
  padding: 16px !important;
  overflow: hidden !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-coach-card-copy {
  position: relative !important;
  z-index: 1 !important;
  width: calc(100% - 132px) !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-coach-card-copy p {
  margin: 12px 0 14px !important;
  color: #334155 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-coach-card-bottom img {
  position: absolute !important;
  right: 2px !important;
  bottom: -4px !important;
  width: 142px !important;
  height: 142px !important;
  object-fit: contain !important;
  z-index: 0 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .sidebar {
  min-height: 100vh !important;
  overflow: hidden !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .menu-item {
  padding-left: 24px !important;
  overflow: visible !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .menu-item--bottom {
  margin-top: auto !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .sidebar-account-card {
  margin-top: 14px !important;
  padding: 18px 14px 24px !important;
}

@media (max-width: 1440px) {
  :is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-home-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.76fr) minmax(330px, 0.9fr) !important;
    grid-template-rows: 96px 260px 206px 190px 180px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  :is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-welcome-panel {
    grid-template-columns: minmax(0, 1fr) 132px 144px !important;
    gap: 16px !important;
  }

  :is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-greeting-line {
    font-size: 28px !important;
  }
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .menu-item {
  padding-left: 50px !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .menu-item::before {
  left: 18px !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-primary-recommendation,
body[data-active-panel="landing"] .landing-route-card {
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow {
  left: 26px !important;
  top: 24px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  left: 26px !important;
  top: 62px !important;
  font-size: 24px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-training-tag {
  left: 244px !important;
  top: 64px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy > p:not(.eyebrow) {
  left: 26px !important;
  top: 98px !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: 60px !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: 20px !important;
  right: 8px !important;
  width: 230px !important;
  height: 178px !important;
  min-height: 178px !important;
}

body[data-active-panel="landing"] .landing-hero-stack {
  width: 174px !important;
  height: 128px !important;
}

body[data-active-panel="landing"] .landing-route-card {
  padding: 10px 14px !important;
}

body[data-active-panel="landing"] .landing-route-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 56px !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: 50px !important;
  height: 50px !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;
}

body[data-active-panel="landing"] .landing-route-progress::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: #fff;
}

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: 7px !important;
  font-weight: 850 !important;
}

body[data-active-panel="landing"] .landing-route-progress strong {
  color: #4f46e5 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-panel="landing"] .landing-route-progress-track {
  height: 4px !important;
  margin: 0 0 5px !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: 4px !important;
}

body[data-active-panel="landing"] .landing-ai-step {
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  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;
  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: 172px !important;
  min-height: 172px !important;
  max-height: 172px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item {
  min-height: 60px !important;
  padding: 8px 10px 18px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item strong {
  top: 32px !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-stats {
  right: 102px !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;
  overflow: hidden !important;
  text-align: center !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats span,
body[data-active-panel="landing"] .landing-xiaowen-briefing-stats strong {
  display: block !important;
  line-height: 1 !important;
  white-space: nowrap !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-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;
  padding: 12px !important;
  overflow: hidden !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;
  padding: 12px !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-special-training-item {
  min-height: 78px !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;
}

body[data-active-panel="landing"] .landing-coach-card-bottom img {
  width: 88px !important;
  height: 88px !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;
  }
}

/* Homepage reference polish v2: fix the red-marked areas. */
body[data-active-panel="landing"] .landing-home-grid {
  padding: 14px 24px 18px !important;
  gap: 12px !important;
}

body[data-active-panel="landing"] .landing-welcome-panel {
  min-height: 64px !important;
  padding: 0 10px !important;
  grid-template-columns: minmax(0, 1fr) 148px 164px !important;
}

body[data-active-panel="landing"] .landing-greeting-line {
  font-size: 24px !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion,
body[data-active-panel="landing"] .landing-customize-home {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion {
  justify-self: center !important;
}

body[data-active-panel="landing"] .landing-customize-home {
  justify-self: end !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion::before {
  content: "✦";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  font-size: 11px;
}

body[data-active-panel="landing"] .landing-primary-recommendation,
body[data-active-panel="landing"] .landing-route-card {
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow {
  top: 30px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  top: 72px !important;
  font-size: 26px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-training-tag {
  top: 75px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy > p:not(.eyebrow) {
  top: 114px !important;
  width: min(420px, calc(100% - 380px)) !important;
}

body[data-active-panel="landing"] .landing-recommendation-meta {
  bottom: 72px !important;
}

body[data-active-panel="landing"] .landing-primary-action.primary-btn {
  bottom: 20px !important;
  width: 178px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
  top: 12px !important;
  right: 12px !important;
  width: clamp(300px, 38%, 440px) !important;
  height: 236px !important;
  min-height: 236px !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 84% 10%, rgba(255, 255, 255, 0.9), transparent 12%),
    radial-gradient(circle at 48% 42%, rgba(91, 140, 255, 0.24), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(237, 242, 255, 0.8)) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-active-panel="landing"] .landing-recommendation-preview::before {
  inset: 24px 34px 18px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(120deg, rgba(124, 77, 255, 0.16), rgba(91, 140, 255, 0.12)),
    linear-gradient(rgba(124, 77, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 140, 255, 0.1) 1px, transparent 1px) !important;
  background-size: auto, 26px 26px, 26px 26px !important;
  transform: perspective(820px) rotateX(60deg) rotateZ(-42deg) translateY(42px) !important;
}

body[data-active-panel="landing"] .landing-recommendation-preview::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  width: 250px;
  height: 92px;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(91, 140, 255, 0.2), transparent 68%);
  transform: translate(-50%, 42%) rotate(-8deg);
  filter: blur(4px);
  z-index: 0;
}

body[data-active-panel="landing"] .landing-hero-stack {
  width: 236px !important;
  height: 174px !important;
  transform: perspective(820px) rotateX(58deg) rotateZ(-42deg) translateY(10px) !important;
  filter: drop-shadow(0 34px 24px rgba(79, 70, 229, 0.24)) !important;
}

body[data-active-panel="landing"] .landing-hero-stack span,
body[data-active-panel="landing"] .landing-hero-stack b {
  border-radius: 28px !important;
  box-shadow:
    0 26px 52px rgba(79, 70, 229, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body[data-active-panel="landing"] .landing-hero-stack span:nth-child(1) {
  width: 190px !important;
  height: 150px !important;
  background: linear-gradient(135deg, rgba(166, 210, 255, 0.78), rgba(85, 88, 255, 0.9)) !important;
}

body[data-active-panel="landing"] .landing-hero-stack span:nth-child(2) {
  width: 156px !important;
  height: 122px !important;
  background: linear-gradient(135deg, rgba(122, 198, 255, 0.86), rgba(101, 72, 255, 0.96)) !important;
}

body[data-active-panel="landing"] .landing-hero-stack span:nth-child(3) {
  width: 102px !important;
  height: 78px !important;
  background: linear-gradient(135deg, rgba(207, 234, 255, 0.92), rgba(88, 128, 255, 0.9)) !important;
}

body[data-active-panel="landing"] .landing-hero-stack b {
  width: 42px !important;
  height: 42px !important;
}

body[data-active-panel="landing"] .landing-hero-panel {
  right: 42px !important;
  top: 18px !important;
  bottom: auto !important;
  min-width: 76px !important;
  min-height: 52px !important;
  padding: 9px !important;
  border-radius: 12px !important;
  opacity: 0.72 !important;
  transform: rotate(-8deg) !important;
}

body[data-active-panel="landing"] .landing-hero-panel strong,
body[data-active-panel="landing"] .landing-hero-panel p {
  display: none !important;
}

body[data-active-panel="landing"] .landing-hero-orbit {
  inset: 16px !important;
  border-radius: 0 !important;
  transform: none !important;
}

body[data-active-panel="landing"] .landing-hero-orbit i {
  width: 34px !important;
  height: 34px !important;
  inset: auto !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 12px 28px rgba(91, 140, 255, 0.16) !important;
}

body[data-active-panel="landing"] .landing-hero-orbit i:nth-child(1) {
  left: 30px !important;
  top: 86px !important;
}

body[data-active-panel="landing"] .landing-hero-orbit i:nth-child(2) {
  right: 50px !important;
  top: 42px !important;
}

body[data-active-panel="landing"] .landing-hero-orbit i:nth-child(3) {
  right: 26px !important;
  bottom: 50px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth,
body[data-active-panel="landing"] .landing-xiaowen-briefing {
  height: 206px !important;
  min-height: 206px !important;
  max-height: 206px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing {
  grid-template-columns: minmax(0, 1fr) 148px !important;
  padding: 16px 18px 0 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-copy p {
  max-width: 330px !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
  max-width: 330px !important;
  white-space: normal !important;
  line-height: 1.5 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
  left: 18px !important;
  right: 158px !important;
  bottom: 18px !important;
  grid-template-columns: repeat(3, minmax(74px, 1fr)) !important;
  gap: 10px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats span {
  font-size: 11px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-stats strong {
  font-size: 19px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
  width: 146px !important;
  height: 146px !important;
  align-self: end !important;
  justify-self: end !important;
  border-radius: 999px 999px 18px 18px !important;
  background: radial-gradient(circle at 50% 44%, rgba(124, 77, 255, 0.2), transparent 68%) !important;
}

body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
  width: 142px !important;
  height: 142px !important;
  object-fit: contain !important;
}

body[data-active-panel="landing"] .landing-special-training,
body[data-active-panel="landing"] .landing-coach-card-bottom {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
}

body[data-active-panel="landing"] .landing-special-training {
  grid-area: special !important;
}

body[data-active-panel="landing"] .landing-coach-card-bottom {
  grid-area: coach !important;
}

body[data-active-panel="landing"] .landing-special-training-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-active-panel="landing"] .landing-special-training-item {
  min-height: 116px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto 1fr auto !important;
  align-items: end !important;
  gap: 4px 8px !important;
  padding: 10px 12px !important;
}

body[data-active-panel="landing"] .landing-special-training-item strong {
  grid-column: 1 / -1 !important;
  font-size: 13px !important;
}

body[data-active-panel="landing"] .landing-special-training-item span {
  display: block !important;
  grid-column: 1 / -1 !important;
  color: #64748b !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-panel="landing"] .landing-special-training-item p {
  align-self: end !important;
  margin: 0 !important;
}

body[data-active-panel="landing"] .landing-special-training-item em {
  justify-self: end !important;
  align-self: end !important;
  min-width: 72px !important;
  height: 28px !important;
}

body[data-active-panel="landing"] .landing-coach-card-bottom {
  padding: 16px !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-coach-card-copy {
  width: calc(100% - 128px) !important;
}

body[data-active-panel="landing"] .landing-coach-card-copy p {
  font-size: 12px !important;
}

body[data-active-panel="landing"] .landing-coach-card-bottom img {
  right: 6px !important;
  bottom: -2px !important;
  width: 140px !important;
  height: 140px !important;
  object-fit: contain !important;
}

body[data-active-panel="landing"] .sidebar {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

body[data-active-panel="landing"] .menu {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body[data-active-panel="landing"] .menu-item--bottom {
  margin-top: auto !important;
  position: relative !important;
}

body[data-active-panel="landing"] .menu-item--bottom::after {
  content: none;
  display: none;
}

body[data-active-panel="landing"] .sidebar-account-card {
  margin-top: 18px !important;
  padding: 18px 14px 24px !important;
  border-top: 1px solid rgba(226, 232, 240, 0.14) !important;
}

body[data-active-panel="landing"] .sidebar-account-button {
  height: 58px !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

body[data-active-panel="landing"] .sidebar-account-button::before {
  content: "";
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 38%, #fff 0 12%, transparent 13%),
    radial-gradient(circle at 50% 66%, #fff 0 20%, transparent 21%),
    linear-gradient(135deg, #7c4dff, #5b8cff);
  box-shadow: 0 10px 22px rgba(124, 77, 255, 0.28);
}

body[data-active-panel="landing"] .sidebar-account-copy {
  min-width: 0 !important;
}

/* Homepage reference polish v2.1: keep cards readable at narrower desktop widths. */
body[data-active-panel="landing"] .landing-hero-stack span,
body[data-active-panel="landing"] .landing-hero-stack b {
  transform: translate(-50%, -50%) translateY(var(--layer-y, 0)) !important;
}

body[data-active-panel="landing"] .landing-hero-stack span::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -18px;
  height: 22px;
  border-radius: 0 0 22px 22px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-top: 0;
  background: linear-gradient(180deg, rgba(80, 114, 255, 0.68), rgba(85, 66, 228, 0.88));
  filter: saturate(1.08);
}

body[data-active-panel="landing"] .landing-hero-stack b::before,
body[data-active-panel="landing"] .landing-hero-stack b::after {
  content: "";
  position: absolute;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.38);
}

body[data-active-panel="landing"] .landing-hero-stack b::before {
  inset: 10px;
}

body[data-active-panel="landing"] .landing-hero-stack b::after {
  left: 50%;
  top: -34px;
  width: 6px;
  height: 30px;
  transform: translateX(-50%);
  box-shadow:
    -22px 10px 0 rgba(255, 255, 255, 0.32),
    22px 10px 0 rgba(255, 255, 255, 0.32);
}

body[data-active-panel="landing"] .landing-hero-stack span:nth-child(1) {
  --layer-y: 34px;
}

body[data-active-panel="landing"] .landing-hero-stack span:nth-child(2) {
  --layer-y: 4px;
}

body[data-active-panel="landing"] .landing-hero-stack span:nth-child(3) {
  --layer-y: -24px;
}

body[data-active-panel="landing"] .landing-hero-stack b {
  --layer-y: -46px;
}

body[data-active-panel="landing"] .landing-special-training-item p {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

body[data-active-panel="landing"] .landing-special-training-item p b {
  font-size: 18px !important;
  line-height: 1 !important;
}

body[data-active-panel="landing"] .landing-special-training-item em {
  white-space: nowrap !important;
}

@media (max-width: 1440px) {
  body[data-active-panel="landing"] .landing-home-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.76fr) minmax(330px, 0.9fr) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
    width: 300px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing {
    grid-template-columns: minmax(0, 1fr) 118px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
    width: 118px !important;
    height: 118px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
    width: 114px !important;
    height: 114px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 0 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-copy {
    gap: 6px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-head span {
    font-size: 16px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-head strong {
    font-size: 10px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-copy p {
    margin-top: 0 !important;
    font-size: 13px !important;
    line-height: 1.36 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
    font-size: 12px !important;
    line-height: 1.32 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-advice br {
    display: none !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-advice strong {
    font-size: 13px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats span {
    font-size: 9px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats strong {
    font-size: 16px !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item {
    padding: 10px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr auto !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item span {
    display: none !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item p,
  body[data-active-panel="landing"] .landing-special-training-item em {
    grid-column: 1 !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item em {
    justify-self: end !important;
  }

  body[data-active-panel="landing"] .landing-coach-card-copy {
    width: calc(100% - 148px) !important;
  }
}

@media (max-height: 820px) {
  body[data-active-panel="landing"] .brand {
    padding-top: 16px !important;
    padding-bottom: 10px !important;
  }

  body[data-active-panel="landing"] .brand-head--main {
    min-height: 60px !important;
  }

  body[data-active-panel="landing"] .sidebar-section {
    display: block !important;
    margin: 4px 14px 0 !important;
    color: rgba(203, 213, 225, 0.58) !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] .menu {
    gap: 2px !important;
    flex: 0 0 auto !important;
  }

  body[data-active-panel="landing"] .menu-item {
    min-height: 34px !important;
    height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body[data-active-panel="landing"] .menu-item--bottom {
    margin-top: 6px !important;
  }

  body[data-active-panel="landing"] .sidebar-account-card {
    margin-top: 8px !important;
    padding: 10px 14px 14px !important;
  }

  body[data-active-panel="landing"] .sidebar-account-button {
    height: 50px !important;
  }
}

/* Homepage frame v3: match the reference format with no generic topbar above the greeting. */
body[data-active-panel="landing"] .topbar,
body[data-active-panel="landing"] #aiDynamicStatus,
body[data-active-panel="landing"] #runtimeStatusStrip {
  display: none !important;
}

body[data-active-panel="landing"] .main {
  min-height: 100vh !important;
  padding: 0 !important;
  background: #f5f8fc !important;
}

body[data-active-panel="landing"] .landing-workspace {
  padding: 0 !important;
  background: #f5f8fc !important;
}

body[data-active-panel="landing"] .landing-home-grid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 26px 18px !important;
  grid-template-rows: 102px 260px 206px 190px 180px !important;
  gap: 12px !important;
}

body[data-active-panel="landing"] .landing-welcome-panel {
  height: 102px !important;
  min-height: 102px !important;
  max-height: 102px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 162px 166px !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 16px 18px 18px 20px !important;
  border: 1px solid rgba(90, 108, 148, 0.12) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
    linear-gradient(90deg, rgba(124, 77, 255, 0.14), rgba(15, 184, 198, 0.08)) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-welcome-panel::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 120, 96, 0.68), rgba(91, 140, 255, 0.34), rgba(124, 77, 255, 0.56));
}

body[data-active-panel="landing"] .landing-welcome-copy {
  align-self: center !important;
  display: grid !important;
  gap: 7px !important;
}

body[data-active-panel="landing"] .landing-greeting-line {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 29px !important;
  font-weight: 950 !important;
  line-height: 1.06 !important;
}

body[data-active-panel="landing"] .landing-streak-line {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

body[data-active-panel="landing"] .landing-level-gap {
  display: none !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion,
body[data-active-panel="landing"] .landing-customize-home {
  height: 52px !important;
  min-height: 52px !important;
  align-self: center !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion p {
  display: none !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion span,
body[data-active-panel="landing"] .landing-customize-home {
  color: #172033 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion::before {
  width: 24px !important;
  height: 24px !important;
}

body[data-active-panel="landing"] .landing-primary-recommendation,
body[data-active-panel="landing"] .landing-route-card {
  margin-top: 0 !important;
}

body[data-active-panel="landing"] .sidebar-account-card {
  border-top-color: rgba(226, 232, 240, 0.18) !important;
}

body[data-active-panel="landing"] .sidebar-account-button {
  min-height: 62px !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
}

@media (max-width: 1440px) {
  body[data-active-panel="landing"] .landing-home-grid {
    padding: 10px 18px 18px !important;
    grid-template-rows: 86px 260px 206px 190px 180px !important;
  }

  body[data-active-panel="landing"] .landing-welcome-panel {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    grid-template-columns: minmax(0, 1fr) 132px 144px !important;
    gap: 16px !important;
    padding: 12px 14px 14px 18px !important;
  }

  body[data-active-panel="landing"] .landing-greeting-line {
    font-size: 25px !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: 42px !important;
    min-height: 42px !important;
  }

  body[data-active-panel="landing"] .landing-coach-suggestion span,
  body[data-active-panel="landing"] .landing-customize-home {
    font-size: 13px !important;
  }
}

/* Homepage frame v4: red-box areas follow the second reference more strictly. */
body[data-active-panel="landing"] .landing-home-grid {
  padding-top: 8px !important;
  grid-template-rows: 104px 260px 206px 190px 180px !important;
}

body[data-active-panel="landing"] .landing-welcome-panel {
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 14px 2px 16px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel,
html[data-theme="light"] body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel::after {
  display: none !important;
  content: none !important;
}

body[data-active-panel="landing"] .landing-welcome-panel::before {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(255, 115, 86, 0.72), rgba(91, 140, 255, 0.28), rgba(124, 77, 255, 0.62)) !important;
  opacity: 0.78 !important;
}

body[data-active-panel="landing"] .landing-welcome-copy {
  padding-left: 2px !important;
}

body[data-active-panel="landing"] .landing-greeting-line {
  font-size: 31px !important;
}

body[data-active-panel="landing"] .landing-streak-line {
  font-size: 15px !important;
}

body[data-active-panel="landing"] .landing-coach-suggestion,
body[data-active-panel="landing"] .landing-customize-home {
  justify-self: end !important;
  width: auto !important;
  min-width: 146px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

body[data-active-panel="landing"] .landing-customize-home {
  min-width: 158px !important;
}

body[data-active-panel="landing"] .menu-item--bottom {
  margin-top: auto !important;
}

body[data-active-panel="landing"] .sidebar-account-card {
  margin-top: 14px !important;
  padding-top: 20px !important;
}

body[data-active-panel="landing"] .sidebar-account-button {
  height: 62px !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

@media (max-width: 1440px) {
  body[data-active-panel="landing"] .landing-home-grid {
    padding-top: 8px !important;
    grid-template-rows: 96px 260px 206px 190px 180px !important;
  }

  body[data-active-panel="landing"] .landing-welcome-panel {
    grid-template-columns: minmax(0, 1fr) 132px 144px !important;
    gap: 16px !important;
    padding: 12px 0 14px 0 !important;
  }

  body[data-active-panel="landing"] .landing-greeting-line {
    font-size: 28px !important;
  }

  body[data-active-panel="landing"] .landing-coach-suggestion,
  body[data-active-panel="landing"] .landing-customize-home {
    min-width: 118px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
  }

  body[data-active-panel="landing"] .landing-customize-home {
    min-width: 132px !important;
  }

  body[data-active-panel="landing"] .sidebar-account-card {
    margin-top: 12px !important;
    padding-top: 18px !important;
  }
}

/* Homepage frame v8: final red-box alignment after legacy overrides. */
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .topbar,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #aiDynamicStatus,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #runtimeStatusStrip,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #companionDock,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #companionMini,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #companionMiniBubble,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) #companionAmbientStage {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .main {
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  background: #f5f8fc !important;
  overflow: hidden auto !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-home-grid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 24px 18px !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.74fr) minmax(330px, 0.86fr) !important;
  grid-template-areas:
    "welcome welcome welcome"
    "recommendation recommendation route"
    "growth growth briefing"
    "hardware questions calendar"
    "special special coach" !important;
  grid-template-rows: 96px 260px 206px 190px 180px !important;
  gap: 12px !important;
  align-items: start !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-welcome-panel {
  grid-area: welcome !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 148px 164px !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 12px 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-welcome-panel::before {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 2px !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-greeting-line {
  margin: 0 0 3px !important;
  font-size: 30px !important;
  line-height: 1.08 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-streak-line {
  margin: 0 !important;
  font-size: 15px !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-coach-suggestion,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-customize-home {
  justify-self: end !important;
  min-width: 132px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-customize-home {
  min-width: 148px !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-card {
  grid-area: route !important;
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  display: grid !important;
  grid-template-rows: auto 4px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 16px 18px 12px !important;
  overflow: hidden !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 60px !important;
  gap: 12px !important;
  margin: 0 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-title span {
  font-size: 18px !important;
  line-height: 1.1 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-title strong {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-route-progress {
  width: 58px !important;
  height: 58px !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-timeline {
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step {
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 8px !important;
  overflow: visible !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step::after,
:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step-feedback {
  display: none !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step-title {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step-title strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-step-state {
  flex: 0 0 auto !important;
  min-width: 54px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-ai-status-bar {
  min-height: 30px !important;
  margin: 0 !important;
  padding-top: 9px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  gap: 6px !important;
  align-items: center !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  overflow: visible !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-training-heatmap {
  grid-area: calendar !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-coach-card-bottom {
  grid-area: coach !important;
  position: relative !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  display: grid !important;
  padding: 16px !important;
  overflow: hidden !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-coach-card-copy {
  width: calc(100% - 132px) !important;
  position: relative !important;
  z-index: 1 !important;
}

:is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-coach-card-bottom img {
  position: absolute !important;
  right: 2px !important;
  bottom: -4px !important;
  width: 142px !important;
  height: 142px !important;
  object-fit: contain !important;
  z-index: 0 !important;
}

@media (max-width: 1440px) {
  :is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-home-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.76fr) minmax(330px, 0.9fr) !important;
    grid-template-rows: 96px 260px 206px 190px 180px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  :is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-welcome-panel {
    grid-template-columns: minmax(0, 1fr) 132px 144px !important;
  }

  :is(body[data-active-panel="landing"], body:has(.landing-workspace.active)) .landing-greeting-line {
    font-size: 28px !important;
  }
}


/* source: homepage-override.css */
@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,
  body[data-active-panel="landing"] .landing-home-grid::before,
  body[data-active-panel="landing"] .landing-home-grid::after,
  body[data-active-panel="landing"] .landing-welcome-panel::before,
  body[data-active-panel="landing"] .landing-welcome-panel::after,
  body[data-active-panel="landing"] .landing-home-grid > .section-card::before,
  body[data-active-panel="landing"] .landing-home-grid > .section-card::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-active-panel="landing"] .landing-home-grid > .section-card {
    background: #fff !important;
    border-top-color: rgba(15, 23, 42, 0.06) !important;
  }

  body[data-active-panel="landing"] .shell .sidebar .brand,
  body[data-active-panel="landing"] .brand {
    height: 92px !important;
    padding: 0 0 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-active-panel="landing"] .shell .sidebar .brand-head,
  body[data-active-panel="landing"] .shell .sidebar .brand-head--main {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !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 {
    position: relative !important;
    left: 36px !important;
    display: block !important;
    width: 132px !important;
    max-width: 132px !important;
    min-width: 132px !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
    object-fit: contain !important;
  }

  body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > .landing-welcome-panel {
    min-height: 70px !important;
    height: 70px !important;
    max-height: 70px !important;
    padding: 0 0 0 2px !important;
    align-content: center !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;
    line-height: 1.35 !important;
  }

  body[data-active-panel="landing"] .sidebar {
    position: sticky !important;
    padding-bottom: 194px !important;
  }

  body[data-active-panel="landing"] .menu {
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  body[data-active-panel="landing"] .sidebar-bottom-zone {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 18px !important;
    width: auto !important;
    display: grid !important;
    gap: 7px !important;
    z-index: 30 !important;
  }

  body[data-active-panel="landing"] .sidebar-account-card {
    margin: 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(226, 232, 240, 0.12) !important;
    background: transparent !important;
  }

  body[data-active-panel="landing"] .sidebar-bottom-link {
    position: relative !important;
    width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 14px 0 46px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: rgba(226, 232, 240, 0.9) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    text-align: left !important;
  }

  body[data-active-panel="landing"] .sidebar-bottom-link:hover,
  body[data-active-panel="landing"] .sidebar-bottom-link.active {
    color: #fff !important;
    background: rgba(124, 77, 255, 0.24) !important;
  }

  body[data-active-panel="landing"] .sidebar-bottom-link[data-view="message-center"]::after {
    content: none !important;
    display: none !important;
  }

  body[data-active-panel="landing"] .sidebar-bottom-link[data-view="message-center"]::before {
    content: "◷" !important;
  }

  body[data-active-panel="landing"] .sidebar-bottom-link[data-view="settings"]::before {
    content: "⚙" !important;
  }

  body[data-active-panel="landing"] .sidebar-account-button {
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(226, 232, 240, 0.14) !important;
  }

  body[data-active-panel="landing"] .shell .sidebar .sidebar-account-card {
    margin: 0 !important;
    padding: 8px 0 0 !important;
  }

  body[data-active-panel="landing"] .shell .sidebar .sidebar-account-button {
    height: 64px !important;
    min-height: 64px !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-primary-recommendation {
    height: 280px !important;
    min-height: 280px !important;
    padding: 28px 30px !important;
  }

  body[data-active-panel="landing"] .landing-primary-recommendation .landing-welcome-copy {
    width: 390px !important;
    max-width: 390px !important;
  }

  body[data-active-panel="landing"] .landing-primary-recommendation h1 {
    margin-top: 12px !important;
    font-size: 25px !important;
    line-height: 1.16 !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] #landingRecommendationText {
    width: 360px !important;
    max-width: 360px !important;
    min-height: 22px !important;
    margin-top: 14px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-recommendation-reason {
    position: absolute !important;
    left: 30px !important;
    top: 151px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    width: 430px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(124, 77, 255, 0.12) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.07)) !important;
    box-shadow: 0 10px 24px rgba(91, 140, 255, 0.08) !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  body[data-active-panel="landing"] .landing-recommendation-reason span {
    flex: 0 0 auto !important;
    height: 20px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: rgba(124, 77, 255, 0.1) !important;
    color: #6d4dff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    line-height: 20px !important;
  }

  body[data-active-panel="landing"] .landing-recommendation-reason strong {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin-left: 8px !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-active-panel="landing"] .landing-recommendation-reason em {
    color: #7c4dff !important;
    font-style: normal !important;
    font-weight: 950 !important;
  }

  body[data-active-panel="landing"] .landing-recommendation-reason b {
    flex: 0 0 auto !important;
    margin-left: 10px !important;
    color: #ef4444 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
  }

  body[data-active-panel="landing"] .landing-recommendation-meta {
    grid-template-columns: repeat(3, 1fr) !important;
    width: 382px !important;
    gap: 8px !important;
    bottom: 64px !important;
  }

  body[data-active-panel="landing"] .landing-recommendation-meta span {
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
    right: 12px !important;
    width: 315px !important;
    height: 232px !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.95), transparent 9%),
      radial-gradient(circle at 54% 42%, rgba(124, 77, 255, 0.2), transparent 46%),
      linear-gradient(135deg, rgba(248, 251, 255, 0.95), rgba(241, 246, 255, 0.78)) !important;
    overflow: hidden !important;
  }

  body[data-active-panel="landing"] .landing-recommendation-preview::before {
    left: 34px !important;
    right: 28px !important;
    top: 72px !important;
    bottom: 18px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(142, 132, 255, 0.22) !important;
    background:
      linear-gradient(rgba(124, 77, 255, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(91, 140, 255, 0.08) 1px, transparent 1px),
      linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(221, 230, 255, 0.38)) !important;
    background-size: 22px 22px, 22px 22px, auto !important;
    transform: perspective(780px) rotateX(61deg) rotateZ(-43deg) translateY(46px) !important;
    box-shadow: 0 28px 46px rgba(91, 140, 255, 0.16) !important;
  }

  body[data-active-panel="landing"] .landing-recommendation-preview::after {
    left: 52% !important;
    top: 72% !important;
    width: 250px !important;
    height: 78px !important;
    border-radius: 999px !important;
    background: radial-gradient(ellipse, rgba(91, 140, 255, 0.22), transparent 68%) !important;
    transform: translate(-50%, -50%) rotate(-7deg) !important;
    filter: blur(6px) !important;
  }

  body[data-active-panel="landing"] .landing-hero-wireframe {
    position: absolute !important;
    left: 50% !important;
    top: 47% !important;
    width: 220px !important;
    height: 140px !important;
    transform: translate(-50%, -50%) perspective(780px) rotateX(58deg) rotateZ(-43deg) translateY(16px) !important;
    border: 1px solid rgba(139, 130, 255, 0.28) !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(140, 200, 255, 0.08)) !important;
    box-shadow: inset 0 0 30px rgba(130, 160, 255, 0.12) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  body[data-active-panel="landing"] .landing-hero-wireframe::before,
  body[data-active-panel="landing"] .landing-hero-wireframe::after {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    height: 54px !important;
    border-left: 1px solid rgba(139, 130, 255, 0.2) !important;
    border-right: 1px solid rgba(139, 130, 255, 0.2) !important;
  }

  body[data-active-panel="landing"] .landing-hero-wireframe::before {
    top: -42px !important;
    border-top: 1px solid rgba(139, 130, 255, 0.22) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  body[data-active-panel="landing"] .landing-hero-wireframe::after {
    bottom: -34px !important;
    border-bottom: 1px solid rgba(139, 130, 255, 0.18) !important;
    border-radius: 0 0 22px 22px !important;
  }

  body[data-active-panel="landing"] .landing-hero-wireframe i {
    position: absolute !important;
    width: 7px !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(141, 155, 255, 0.18), rgba(141, 205, 255, 0.06)) !important;
  }

  body[data-active-panel="landing"] .landing-hero-wireframe i:nth-child(1) { left: 18px !important; top: -36px !important; }
  body[data-active-panel="landing"] .landing-hero-wireframe i:nth-child(2) { right: 18px !important; top: -36px !important; }
  body[data-active-panel="landing"] .landing-hero-wireframe i:nth-child(3) { left: 28px !important; bottom: -30px !important; }
  body[data-active-panel="landing"] .landing-hero-wireframe i:nth-child(4) { right: 28px !important; bottom: -30px !important; }

  body[data-active-panel="landing"] .landing-hero-stack {
    left: 53% !important;
    top: 57% !important;
    width: 250px !important;
    height: 188px !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    z-index: 4 !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span,
  body[data-active-panel="landing"] .landing-hero-stack b {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    border-radius: 24px !important;
    transform: translate(-50%, -50%) perspective(760px) rotateX(55deg) rotateZ(-43deg) translateY(var(--layer-y, 0)) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    background:
      linear-gradient(145deg, rgba(125, 236, 255, 0.64), rgba(117, 78, 255, 0.86) 48%, rgba(37, 103, 255, 0.94)) !important;
    box-shadow:
      0 22px 30px rgba(72, 82, 220, 0.28),
      inset 0 1px 18px rgba(255, 255, 255, 0.34) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span::after {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: -28px !important;
    height: 36px !important;
    border-radius: 0 0 22px 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-top: 0 !important;
    background: linear-gradient(180deg, rgba(90, 130, 255, 0.46), rgba(90, 60, 230, 0.78)) !important;
    filter: saturate(1.12) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span:nth-child(1) {
    --layer-y: 30px;
    width: 212px !important;
    height: 130px !important;
    opacity: 0.92 !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span:nth-child(2) {
    --layer-y: -2px;
    width: 186px !important;
    height: 112px !important;
    border-radius: 24px !important;
    opacity: 0.94 !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span:nth-child(3) {
    --layer-y: -36px;
    width: 146px !important;
    height: 88px !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(150, 247, 255, 0.72), rgba(126, 75, 255, 0.9) 50%, rgba(70, 108, 255, 0.96)) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack b {
    --layer-y: -68px;
    width: 54px !important;
    height: 54px !important;
    border-radius: 12px !important;
    background:
      linear-gradient(145deg, rgba(176, 249, 255, 0.86), rgba(128, 86, 255, 0.92) 52%, rgba(63, 110, 255, 0.98)) !important;
    box-shadow:
      0 16px 24px rgba(91, 140, 255, 0.34),
      inset 0 0 18px rgba(255, 255, 255, 0.46) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack b::before {
    inset: 12px !important;
    border-radius: 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(126, 210, 255, 0.22)) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack b::after {
    display: block !important;
    left: 50% !important;
    top: -34px !important;
    width: 6px !important;
    height: 28px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: rgba(137, 150, 255, 0.22) !important;
    box-shadow:
      -26px 10px 0 rgba(137, 150, 255, 0.18),
      26px 10px 0 rgba(137, 150, 255, 0.18) !important;
  }

  body[data-active-panel="landing"] .landing-hero-panel {
    right: 34px !important;
    top: 28px !important;
    width: 82px !important;
    height: 54px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    color: #7c88a8 !important;
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(144, 154, 255, 0.16) !important;
    transform: rotate(-8deg) !important;
    z-index: 6 !important;
  }

  body[data-active-panel="landing"] .landing-hero-panel::after {
    content: "" !important;
    width: 46px !important;
    height: 26px !important;
    border-radius: 5px !important;
    background:
      linear-gradient(90deg, rgba(124, 77, 255, 0.42) 0 7px, transparent 7px 12px, rgba(91, 140, 255, 0.46) 12px 21px, transparent 21px 27px, rgba(124, 77, 255, 0.56) 27px 38px, transparent 38px),
      linear-gradient(180deg, transparent 44%, rgba(124, 77, 255, 0.18) 45% 55%, transparent 56%) !important;
  }

  body[data-active-panel="landing"] .landing-hero-panel strong,
  body[data-active-panel="landing"] .landing-hero-panel p {
    display: none !important;
  }

  body[data-active-panel="landing"] .landing-hero-orbit i {
    position: absolute !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(235, 240, 255, 0.45)) !important;
    border: 1px solid rgba(124, 77, 255, 0.16) !important;
    box-shadow: 0 12px 26px rgba(91, 140, 255, 0.16) !important;
    z-index: 5 !important;
  }

  body[data-active-panel="landing"] .landing-hero-orbit {
    inset: 0 !important;
    transform: none !important;
    z-index: 5 !important;
  }

  body[data-active-panel="landing"] .landing-hero-orbit i:nth-child(1) {
    left: 46px !important;
    top: 92px !important;
    inset: auto !important;
  }

  body[data-active-panel="landing"] .landing-hero-orbit i:nth-child(2) {
    left: 96px !important;
    top: 44px !important;
    inset: auto !important;
    width: 22px !important;
    height: 22px !important;
  }

  body[data-active-panel="landing"] .landing-hero-orbit i:nth-child(3) {
    right: 30px !important;
    top: 100px !important;
    inset: auto !important;
    width: 34px !important;
    height: 24px !important;
  }

  body[data-active-panel="landing"] .landing-hero-orbit i::after,
  body[data-active-panel="landing"] .landing-hero-chip span {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 3px !important;
    background: linear-gradient(135deg, rgba(124, 77, 255, 0.64), rgba(91, 140, 255, 0.5)) !important;
  }

  body[data-active-panel="landing"] .landing-hero-chip {
    position: absolute !important;
    width: 38px !important;
    height: 24px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(139, 130, 255, 0.16) !important;
    box-shadow: 0 12px 28px rgba(91, 140, 255, 0.14) !important;
    z-index: 6 !important;
  }

  body[data-active-panel="landing"] .landing-hero-chip--left {
    left: 42px !important;
    top: 118px !important;
    transform: rotate(-12deg) !important;
  }

  body[data-active-panel="landing"] .landing-hero-chip--right {
    right: 22px !important;
    top: 78px !important;
    transform: rotate(10deg) !important;
  }

  /* v17: make the hero illustration read as a real stacked 3D platform. */
  body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
    perspective: 980px !important;
    isolation: isolate !important;
    background:
      radial-gradient(circle at 88% 9%, rgba(255, 255, 255, 0.98), transparent 8%),
      radial-gradient(circle at 55% 43%, rgba(124, 77, 255, 0.24), transparent 44%),
      radial-gradient(circle at 45% 70%, rgba(91, 140, 255, 0.2), transparent 48%),
      linear-gradient(135deg, rgba(250, 253, 255, 0.98), rgba(236, 243, 255, 0.82)) !important;
  }

  body[data-active-panel="landing"] .landing-recommendation-preview::before {
    left: 22px !important;
    right: 20px !important;
    top: 76px !important;
    bottom: 16px !important;
    opacity: 0.82 !important;
    border-color: rgba(124, 108, 255, 0.26) !important;
    transform: perspective(860px) rotateX(64deg) rotateZ(-43deg) translateY(58px) !important;
    box-shadow:
      0 34px 52px rgba(91, 140, 255, 0.2),
      inset 0 0 34px rgba(124, 77, 255, 0.1) !important;
  }

  body[data-active-panel="landing"] .landing-recommendation-preview::after {
    left: 53% !important;
    top: 76% !important;
    width: 270px !important;
    height: 96px !important;
    opacity: 0.95 !important;
    background:
      radial-gradient(ellipse, rgba(37, 99, 235, 0.32), rgba(124, 77, 255, 0.18) 38%, transparent 72%) !important;
    transform: translate(-50%, -50%) rotate(-10deg) !important;
    filter: blur(8px) !important;
  }

  body[data-active-panel="landing"] .landing-hero-wireframe {
    left: 50% !important;
    top: 48% !important;
    width: 238px !important;
    height: 146px !important;
    opacity: 0.9 !important;
    transform: translate(-50%, -50%) perspective(880px) rotateX(61deg) rotateZ(-43deg) translateY(22px) !important;
    border-color: rgba(124, 108, 255, 0.34) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(124, 205, 255, 0.1)) !important;
    box-shadow:
      inset 0 0 34px rgba(124, 77, 255, 0.12),
      0 18px 38px rgba(91, 140, 255, 0.12) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack {
    left: 52% !important;
    top: 56% !important;
    width: 266px !important;
    height: 194px !important;
    filter:
      drop-shadow(0 36px 30px rgba(48, 73, 190, 0.28))
      drop-shadow(0 10px 8px rgba(124, 77, 255, 0.18)) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 80% !important;
    width: 250px !important;
    height: 72px !important;
    border-radius: 999px !important;
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.24), transparent 70%) !important;
    transform: translate(-50%, -50%) rotate(-10deg) !important;
    filter: blur(2px) !important;
    z-index: -1 !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span,
  body[data-active-panel="landing"] .landing-hero-stack b {
    overflow: visible !important;
    transform: translate(-50%, -50%) perspective(860px) rotateX(60deg) rotateZ(-43deg) translateY(var(--layer-y, 0)) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    background:
      radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.58), transparent 18%),
      linear-gradient(138deg, rgba(136, 236, 255, 0.84) 0%, rgba(110, 106, 255, 0.98) 43%, rgba(70, 56, 232, 0.98) 72%, rgba(37, 99, 235, 0.98) 100%) !important;
    box-shadow:
      0 28px 34px rgba(49, 72, 210, 0.34),
      0 10px 0 rgba(80, 74, 230, 0.18),
      inset 0 2px 18px rgba(255, 255, 255, 0.38),
      inset -18px -22px 32px rgba(48, 38, 190, 0.28) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    right: 18px !important;
    top: 14px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06)) !important;
    transform: rotate(1deg) !important;
    opacity: 0.62 !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span::after {
    left: 8px !important;
    right: 8px !important;
    bottom: -50px !important;
    height: 54px !important;
    border-radius: 0 0 26px 26px !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
    background:
      linear-gradient(180deg, rgba(95, 143, 255, 0.7), rgba(70, 59, 226, 0.94) 62%, rgba(49, 64, 205, 0.98)) !important;
    clip-path: polygon(7% 0, 93% 0, 100% 58%, 86% 100%, 14% 100%, 0 58%) !important;
    box-shadow:
      inset 0 12px 18px rgba(255, 255, 255, 0.14),
      inset 0 -18px 28px rgba(34, 42, 166, 0.3) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span:nth-child(1) {
    --layer-y: 42px;
    width: 232px !important;
    height: 140px !important;
    opacity: 1 !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span:nth-child(2) {
    --layer-y: -12px;
    width: 204px !important;
    height: 120px !important;
    opacity: 1 !important;
    background:
      radial-gradient(circle at 33% 22%, rgba(255, 255, 255, 0.58), transparent 18%),
      linear-gradient(138deg, rgba(120, 226, 255, 0.86) 0%, rgba(103, 111, 255, 0.99) 42%, rgba(92, 64, 245, 0.99) 72%, rgba(53, 102, 255, 0.98) 100%) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span:nth-child(3) {
    --layer-y: -66px;
    width: 158px !important;
    height: 92px !important;
    opacity: 1 !important;
    border-radius: 22px !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack b {
    --layer-y: -112px;
    width: 60px !important;
    height: 60px !important;
    border-radius: 14px !important;
    z-index: 8 !important;
    background:
      radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.72), transparent 24%),
      linear-gradient(138deg, rgba(178, 249, 255, 0.92), rgba(132, 93, 255, 1) 52%, rgba(57, 110, 255, 1)) !important;
    box-shadow:
      0 24px 32px rgba(91, 140, 255, 0.38),
      inset 0 2px 16px rgba(255, 255, 255, 0.52),
      inset -10px -14px 18px rgba(48, 38, 190, 0.24) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack b::before {
    content: "" !important;
    position: absolute !important;
    inset: 13px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(126, 210, 255, 0.18)) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack b::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: -24px !important;
    top: auto !important;
    width: auto !important;
    height: 24px !important;
    border-radius: 0 0 11px 11px !important;
    transform: none !important;
    background: linear-gradient(180deg, rgba(91, 140, 255, 0.66), rgba(59, 63, 215, 0.92)) !important;
    box-shadow: inset 0 -10px 14px rgba(38, 43, 160, 0.24) !important;
  }

  body[data-active-panel="landing"] .landing-hero-panel {
    right: 34px !important;
    top: 30px !important;
    width: 90px !important;
    height: 60px !important;
    border-radius: 14px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(241, 245, 255, 0.64)) !important;
    border-color: rgba(124, 108, 255, 0.2) !important;
    box-shadow:
      0 18px 34px rgba(91, 140, 255, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    transform: rotate(-8deg) translateZ(0) !important;
  }

  body[data-active-panel="landing"] .landing-hero-panel span {
    display: block !important;
    color: #7c88a8 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
  }

  body[data-active-panel="landing"] .landing-hero-orbit i,
  body[data-active-panel="landing"] .landing-hero-chip {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(231, 238, 255, 0.64)) !important;
    box-shadow:
      0 16px 32px rgba(91, 140, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  /* v18: compact the platform into a centered square stack instead of wide flat slabs. */
  body[data-active-panel="landing"] .landing-hero-wireframe {
    left: 50% !important;
    top: 48% !important;
    width: 210px !important;
    height: 132px !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack {
    left: 50% !important;
    top: 56% !important;
    width: 224px !important;
    height: 184px !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span,
  body[data-active-panel="landing"] .landing-hero-stack b {
    transform: translate(-50%, -50%) perspective(900px) rotateX(62deg) rotateZ(-42deg) translateY(var(--layer-y, 0)) !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span::after {
    bottom: -42px !important;
    height: 46px !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span:nth-child(1) {
    --layer-y: 34px;
    width: 190px !important;
    height: 132px !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span:nth-child(2) {
    --layer-y: -15px;
    width: 166px !important;
    height: 114px !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack span:nth-child(3) {
    --layer-y: -62px;
    width: 128px !important;
    height: 88px !important;
  }

  body[data-active-panel="landing"] .landing-hero-stack b {
    --layer-y: -104px;
    width: 54px !important;
    height: 54px !important;
  }

  body[data-active-panel="landing"] .landing-hero-panel {
    right: 42px !important;
    top: 30px !important;
  }

  body[data-active-panel="landing"] .landing-hero-orbit i:nth-child(1) {
    left: 52px !important;
    top: 112px !important;
  }

  body[data-active-panel="landing"] .landing-hero-orbit i:nth-child(2) {
    left: 92px !important;
    top: 42px !important;
  }

  body[data-active-panel="landing"] .landing-hero-orbit i:nth-child(3) {
    right: 42px !important;
    top: 106px !important;
  }

  body[data-active-panel="landing"] .landing-hero-3d-img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 12 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    pointer-events: none !important;
    transform: translateY(1px) scale(1.02) !important;
    filter: hue-rotate(14deg) saturate(1.24) contrast(1.08) drop-shadow(0 24px 30px rgba(91, 140, 255, 0.12)) !important;
  }

  body[data-active-panel="landing"] .landing-hero-wireframe,
  body[data-active-panel="landing"] .landing-hero-orbit,
  body[data-active-panel="landing"] .landing-hero-stack,
  body[data-active-panel="landing"] .landing-hero-panel,
  body[data-active-panel="landing"] .landing-hero-chip {
    display: none !important;
  }

  body[data-active-panel="landing"] .landing-hardware-questions {
    display: grid !important;
    grid-template-rows: 20px 1fr 18px !important;
    gap: 4px !important;
    padding: 12px 15px 10px !important;
    background: #fff !important;
  }

  body[data-active-panel="landing"] .landing-hardware-questions .landing-hardware-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
  }

  body[data-active-panel="landing"] .landing-hardware-questions .landing-hardware-head span {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] .landing-hardware-questions .landing-hardware-head strong {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] .landing-question-list {
    display: grid !important;
    grid-template-rows: repeat(5, 1fr) !important;
    gap: 0 !important;
    min-height: 0 !important;
  }

  body[data-active-panel="landing"] .landing-question-list .landing-hot-question {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) auto 60px !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 0 !important;
    height: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f172a !important;
  }

  body[data-active-panel="landing"] .landing-question-list .landing-hot-question:hover {
    background: rgba(124, 77, 255, 0.045) !important;
    box-shadow: none !important;
  }

  body[data-active-panel="landing"] .landing-hot-question span {
    width: 16px !important;
    height: 16px !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] .landing-hot-question strong {
    overflow: hidden !important;
    color: #1f2937 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-hot-question small {
    justify-self: start !important;
    min-width: 38px !important;
    padding: 3px 5px !important;
    border-radius: 5px !important;
    color: #5b6dff !important;
    background: rgba(91, 140, 255, 0.14) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-hot-question:nth-child(2) small {
    color: #7c4dff !important;
    background: rgba(124, 77, 255, 0.14) !important;
  }

  body[data-active-panel="landing"] .landing-hot-question:nth-child(4) small,
  body[data-active-panel="landing"] .landing-hot-question:nth-child(5) small {
    color: #16a66a !important;
    background: rgba(34, 197, 94, 0.14) !important;
  }

  body[data-active-panel="landing"] .landing-hot-question em {
    justify-self: end !important;
    width: 60px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #64748b !important;
    background: transparent !important;
    font-size: 10.5px !important;
    font-style: normal !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-align: right !important;
  }

  body[data-active-panel="landing"] .landing-question-more {
    justify-self: start !important;
    align-self: end !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #7c4dff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] .landing-training-heatmap {
    display: grid !important;
    grid-template-rows: 20px minmax(88px, auto) minmax(32px, auto) !important;
    gap: 7px !important;
    padding: 12px 16px 10px !important;
    background: #fff !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-head span {
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-head strong {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !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-grid {
    display: grid !important;
    grid-template-columns: repeat(35, minmax(3px, 1fr)) !important;
    grid-auto-rows: 6px !important;
    gap: 3px !important;
    align-content: center !important;
    align-items: center !important;
    margin: 0 !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-cell {
    width: 100% !important;
    height: 6px !important;
    min-width: 0 !important;
    min-height: 6px !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: #eef2f7 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-cell:hover {
    transform: translateY(-1px) !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-cell[data-level="0"] {
    background: #eef2f7 !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-cell[data-level="1"] {
    background: #eee7ff !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-cell[data-level="2"] {
    background: #cdbbff !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-cell[data-level="3"] {
    background: #6f3cff !important;
    box-shadow: 0 5px 10px rgba(111, 60, 255, 0.2) !important;
  }

  body[data-active-panel="landing"] .landing-calendar-weekday {
    display: grid !important;
    place-items: center !important;
    color: #9aa7bd !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body[data-active-panel="landing"] .landing-calendar-day {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #334155 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] .landing-calendar-day[data-muted="true"] {
    color: #a9b4c7 !important;
    background: transparent !important;
  }

  body[data-active-panel="landing"] .landing-calendar-day[data-level="1"] {
    color: #6d5be8 !important;
    background: #f0eaff !important;
  }

  body[data-active-panel="landing"] .landing-calendar-day[data-level="2"] {
    color: #5c38e8 !important;
    background: #dccfff !important;
  }

  body[data-active-panel="landing"] .landing-calendar-day[data-level="3"] {
    color: #fff !important;
    background: #6f3cff !important;
    box-shadow: 0 8px 16px rgba(111, 60, 255, 0.28) !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-legend {
    display: grid !important;
    grid-template-columns: repeat(4, auto) !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-legend i {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 10px !important;
    border-radius: 999px !important;
    background: #eef2f7 !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-legend i[data-level="1"] {
    background: #f0eaff !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-legend i[data-level="2"] {
    background: #dccfff !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-legend i[data-level="3"] {
    background: #6f3cff !important;
  }

  body[data-active-panel="landing"] .landing-achievement-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body[data-active-panel="landing"] .landing-achievement-list div {
    min-width: 0 !important;
    min-height: 40px !important;
    display: grid !important;
    align-content: center !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(90, 108, 148, 0.12) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.98), rgba(255, 255, 255, 0.98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 20px rgba(91, 140, 255, 0.08) !important;
    text-align: center !important;
  }

  body[data-active-panel="landing"] .landing-achievement-list span {
    display: block !important;
    color: #64748b !important;
    font-size: 9.5px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-achievement-list strong {
    display: block !important;
    margin-top: 3px !important;
    color: #0f172a !important;
    font-size: 19px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] .landing-achievement-list div:first-child {
    border-color: rgba(124, 77, 255, 0.18) !important;
    background: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.08) 62%, rgba(255, 255, 255, 0.98)) !important;
  }

  body[data-active-panel="landing"] .landing-achievement-list div:first-child strong {
    color: #7c4dff !important;
  }

  body[data-active-panel="landing"] .landing-achievement-list div:nth-child(4) {
    border-color: rgba(34, 197, 94, 0.18) !important;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(91, 140, 255, 0.08) 62%, rgba(255, 255, 255, 0.98)) !important;
  }

  body[data-active-panel="landing"] .landing-achievement-list div:nth-child(4) strong {
    color: #16a34a !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-strip {
    display: grid !important;
    grid-template-rows: 12px 6px !important;
    gap: 5px !important;
    min-height: 32px !important;
    padding: 6px 8px 7px !important;
    border: 1px solid rgba(90, 108, 148, 0.1) !important;
    border-radius: 14px !important;
    background: #f8fbff !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-strip-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    color: #94a3b8 !important;
    font-size: 9.5px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] .landing-heatmap-strip-head span,
  body[data-active-panel="landing"] .landing-heatmap-strip-head em {
    min-width: 0 !important;
    font-style: normal !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-hardware-focus {
    padding: 14px 18px 12px !important;
  }

  body[data-active-panel="landing"] .landing-hardware-chip-list {
    gap: 10px !important;
    align-items: stretch !important;
  }

  body[data-active-panel="landing"] .landing-hardware-card {
    min-height: 122px !important;
    height: 122px !important;
    display: grid !important;
    grid-template-rows: 58px 20px 18px !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 4px !important;
    padding: 8px 4px 7px !important;
    overflow: hidden !important;
  }

  body[data-active-panel="landing"] .landing-hardware-card strong {
    display: grid !important;
    gap: 5px !important;
    justify-items: center !important;
    align-content: start !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
    white-space: nowrap !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,
  body[data-active-panel="landing"] .landing-hardware-card small {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-hardware-card em {
    font-size: 13px !important;
  }

  body[data-active-panel="landing"] .landing-hardware-card small {
    font-size: 10px !important;
    font-weight: 850 !important;
    text-overflow: clip !important;
  }

  body[data-active-panel="landing"] .landing-special-training {
    display: grid !important;
    grid-template-rows: 20px 1fr !important;
    gap: 8px !important;
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
    padding: 12px 16px 10px !important;
    background: #fff !important;
  }

  body[data-active-panel="landing"] .landing-special-training-head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  body[data-active-panel="landing"] .landing-special-training-head span {
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] .landing-special-training-head strong {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] .landing-special-training-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item {
    position: relative !important;
    min-height: 96px !important;
    height: 96px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    grid-template-rows: 20px 18px 1fr !important;
    column-gap: 9px !important;
    row-gap: 3px !important;
    align-items: center !important;
    padding: 10px 10px 9px !important;
    border: 1px solid rgba(90, 108, 148, 0.12) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #fff, #fbfcff) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item::before {
    content: "" !important;
    grid-row: 1 / span 2 !important;
    grid-column: 1 !important;
    width: 26px !important;
    height: 26px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: #5b6dff !important;
    background: rgba(91, 140, 255, 0.14) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item[data-special-key="power"]::before {
    content: "▣" !important;
    color: #7c4dff !important;
    background: rgba(124, 77, 255, 0.14) !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item[data-special-key="can"]::before {
    content: "◉" !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item[data-special-key="i2c"]::before {
    content: "∿" !important;
    color: #06a6c9 !important;
    background: rgba(6, 182, 212, 0.14) !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item[data-special-key="ripple"]::before {
    content: "⌁" !important;
    color: #f97316 !important;
    background: rgba(249, 115, 22, 0.14) !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item strong {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    overflow: hidden !important;
    color: #111827 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item span {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    overflow: hidden !important;
    color: #8a97ad !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item p {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    align-self: end !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item p b {
    margin-left: 3px !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 950 !important;
  }

  body[data-active-panel="landing"] .landing-special-training-item em {
    grid-column: 3 !important;
    grid-row: 3 !important;
    align-self: end !important;
    justify-self: end !important;
    min-width: 64px !important;
    height: 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    color: #7c4dff !important;
    background: rgba(124, 77, 255, 0.12) !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > span {
    display: block !important;
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > p {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
  }

  body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > em {
    grid-column: 3 !important;
    grid-row: 3 !important;
  }

  body[data-active-panel="landing"] .landing-welcome-panel {
    min-height: 70px !important;
    height: 70px !important;
    padding: 0 0 0 2px !important;
    align-content: center !important;
  }

  body[data-active-panel="landing"] .landing-welcome-panel.is-briefing-open {
    min-height: 214px !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 0 12px 2px !important;
    align-content: start !important;
  }

  body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > .landing-welcome-panel.is-briefing-open {
    min-height: 214px !important;
    height: auto !important;
    max-height: none !important;
    align-content: start !important;
  }

  body[data-active-panel="landing"] .landing-welcome-briefing {
    pointer-events: auto !important;
  }

  body[data-active-panel="landing"] .landing-welcome-briefing[hidden] {
    display: none !important;
  }

  body[data-active-panel="landing"] .landing-ai-briefing-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body[data-active-panel="landing"] .landing-ai-briefing-head strong {
    margin-left: auto !important;
  }

  body[data-active-panel="landing"] .landing-ai-briefing-close {
    display: inline-grid !important;
    place-items: center !important;
    height: 24px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #7c4dff !important;
    background: rgba(124, 77, 255, 0.12) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing {
    position: relative !important;
    min-height: 174px !important;
    height: 174px !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-copy {
    width: calc(100% - 130px) !important;
    min-width: 0 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-head {
    display: flex !important;
    align-items: center !important;
    min-height: 22px !important;
    margin: 0 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-head span {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-head strong {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    color: #8a97ad !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  body[data-active-panel="landing"] #landingXiaowenBriefingText {
    position: absolute !important;
    left: 16px !important;
    top: 48px !important;
    width: calc(100% - 154px) !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
    position: absolute !important;
    left: 16px !important;
    top: 75px !important;
    width: calc(100% - 154px) !important;
    max-width: calc(100% - 154px) !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-advice strong {
    color: #5b4bff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
    position: absolute !important;
    top: auto !important;
    left: 16px !important;
    right: 138px !important;
    bottom: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
    background: rgba(255, 255, 255, 0.76) !important;
    min-height: 58px !important;
    padding: 9px 8px !important;
    border-radius: 8px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar {
    right: 18px !important;
    bottom: 14px !important;
    width: 102px !important;
    height: 102px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img {
    width: 100px !important;
    height: 100px !important;
  }

  /* v25: make XiaoWen sound like a coach observing behavior, not a system notice. */
  body[data-active-panel="landing"] #landingXiaowenBriefingText {
    top: 44px !important;
    width: calc(100% - 150px) !important;
    max-height: 38px !important;
    color: #0f172a !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
    line-height: 1.38 !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
    top: 86px !important;
    width: calc(100% - 150px) !important;
    max-width: calc(100% - 150px) !important;
    font-size: 12.5px !important;
    line-height: 1.18 !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-advice strong {
    display: inline-block !important;
    margin-top: 3px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
    right: 132px !important;
    bottom: 12px !important;
    gap: 7px !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
    min-height: 52px !important;
    padding: 7px 7px !important;
  }

  /* v27: XiaoWen only lives in the floating AI coach; homepage cards are system/tool surfaces. */
  body[data-active-panel="landing"] .landing-xiaowen-briefing-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar,
  body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img,
  body[data-active-panel="landing"] .landing-coach-card-bottom > img {
    display: none !important;
  }

  body[data-active-panel="landing"] #landingXiaowenBriefingText {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
  }

  body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
    right: 16px !important;
  }

  body[data-active-panel="landing"] .landing-coach-card-bottom {
    background:
      radial-gradient(circle at 88% 18%, rgba(124, 77, 255, 0.12), transparent 34%),
      linear-gradient(135deg, #ffffff 0%, #f7faff 58%, #f1efff 100%) !important;
  }

  body[data-active-panel="landing"] .landing-coach-card-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-active-panel="landing"] .landing-coach-card-head {
    justify-content: space-between !important;
  }

  body[data-active-panel="landing"] .landing-coach-card-head span {
    color: #0f172a !important;
    font-size: 14px !important;
  }

  body[data-active-panel="landing"] .landing-coach-card-copy p {
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  body[data-active-panel="landing"] .landing-coach-card-bottom .primary-btn {
    width: 82px !important;
  }

  /* v24: make the route card feel like a training stage, and add growth trend feedback. */
  body[data-active-panel="landing"] .landing-route-card {
    display: grid !important;
    grid-template-rows: auto auto auto 1fr auto !important;
    gap: 6px !important;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    padding: 12px 14px !important;
  }

  body[data-active-panel="landing"] .landing-route-head {
    margin-bottom: 0 !important;
  }

  body[data-active-panel="landing"] .landing-route-stage {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 50px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(124, 77, 255, 0.16) !important;
    border-radius: 12px !important;
    background:
      radial-gradient(circle at 12% 42%, rgba(124, 77, 255, 0.2), transparent 44%),
      linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.09)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  }

  body[data-active-panel="landing"] .landing-route-stage > div:first-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  body[data-active-panel="landing"] .landing-route-stage span {
    display: block !important;
    color: #7c8aa2 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
  }

  body[data-active-panel="landing"] .landing-route-stage strong {
    display: block !important;
    margin-top: 5px !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-route-completion {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 80px !important;
    text-align: left !important;
  }

  body[data-active-panel="landing"] .landing-route-completion strong {
    color: #7c4dff !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    line-height: 0.92 !important;
  }

  body[data-active-panel="landing"] .landing-route-progress-track {
    margin: 0 !important;
  }

  body[data-active-panel="landing"] .landing-ai-timeline {
    align-content: start !important;
    gap: 4px !important;
    min-height: 0 !important;
  }

  body[data-active-panel="landing"] .landing-ai-step {
    height: 28px !important;
    min-height: 28px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  body[data-active-panel="landing"] .landing-ai-step-title strong {
    font-size: 12px !important;
  }

  body[data-active-panel="landing"] .landing-ai-step-state {
    font-size: 10px !important;
  }

  body[data-active-panel="landing"] .landing-ai-status-bar {
    margin-top: 0 !important;
    padding-top: 7px !important;
  }

  body[data-active-panel="landing"] .landing-weekly-growth-item {
    padding-top: 12px !important;
  }

  body[data-active-panel="landing"] .landing-weekly-growth-item > span {
    display: block !important;
    max-width: calc(100% - 84px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-weekly-growth-trend {
    position: absolute !important;
    top: 9px !important;
    right: 9px !important;
    max-width: 86px !important;
    height: 20px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    color: #6d4dff !important;
    background: rgba(124, 77, 255, 0.1) !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 950 !important;
    line-height: 20px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-active-panel="landing"] .landing-weekly-growth-item:nth-child(even) .landing-weekly-growth-trend {
    color: #2f6fff !important;
    background: rgba(91, 140, 255, 0.12) !important;
  }

  html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-route-card.landing-ai-task-center {
    position: relative !important;
    display: block !important;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-route-head {
    position: absolute !important;
    top: 14px !important;
    left: 16px !important;
    right: 16px !important;
    height: 54px !important;
    margin: 0 !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-route-stage {
    position: absolute !important;
    top: 76px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    height: 54px !important;
    min-height: 54px !important;
    z-index: 2 !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-route-progress-track {
    position: absolute !important;
    top: 140px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    z-index: 2 !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
    position: absolute !important;
    top: 151px !important;
    left: 16px !important;
    right: 16px !important;
    display: grid !important;
    grid-template-rows: repeat(4, 1fr) !important;
    gap: 3px !important;
    height: 86px !important;
    min-height: 86px !important;
    z-index: 2 !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-ai-step {
    height: 19px !important;
    min-height: 19px !important;
    padding: 2px 5px !important;
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-index {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar {
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 12px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding-top: 7px !important;
    z-index: 2 !important;
  }
}

/* Homepage status bar: make the first row carry real training signal. */
body[data-active-panel="landing"] .landing-welcome-panel:not(.is-briefing-open) {
  min-height: 86px !important;
  height: 86px !important;
  padding: 7px 0 9px 2px !important;
  align-content: center !important;
}

body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > .section-card.landing-welcome-panel:not(.is-briefing-open) {
  min-height: 86px !important;
  height: 86px !important;
  max-height: 86px !important;
  padding: 7px 0 9px 2px !important;
}

body[data-active-panel="landing"] .landing-welcome-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

body[data-active-panel="landing"] .landing-greeting-line {
  margin: 0 !important;
  font-size: 26px !important;
  line-height: 1.05 !important;
}

body[data-active-panel="landing"] .shell .main .landing-workspace .landing-greeting-line {
  margin: 0 !important;
  font-size: 26px !important;
  line-height: 1.05 !important;
}

body[data-active-panel="landing"] .landing-training-statusbar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(96px, 1fr)) !important;
  gap: 8px !important;
  width: min(100%, 720px) !important;
}

body[data-active-panel="landing"] .landing-training-status {
  min-width: 0 !important;
  height: 40px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.88)),
    linear-gradient(90deg, rgba(124, 77, 255, 0.1), rgba(91, 140, 255, 0.08)) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045) !important;
  overflow: hidden !important;
}

body[data-active-panel="landing"] .landing-training-status span,
body[data-active-panel="landing"] .landing-training-status strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-active-panel="landing"] .landing-training-status span {
  color: #7b89a3 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
}

body[data-active-panel="landing"] .landing-training-status strong {
  margin-top: 3px !important;
  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}

body[data-active-panel="landing"] .landing-training-status:nth-child(1) strong,
body[data-active-panel="landing"] .landing-training-status:nth-child(3) strong,
body[data-active-panel="landing"] .landing-training-status:nth-child(4) strong {
  color: #6d4dff !important;
}

@media (max-width: 1180px) {
  body[data-active-panel="landing"] .landing-training-statusbar {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }

  body[data-active-panel="landing"] .landing-welcome-panel:not(.is-briefing-open) {
    min-height: 118px !important;
    height: 118px !important;
  }

  body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > .section-card.landing-welcome-panel:not(.is-briefing-open) {
    min-height: 118px !important;
    height: 118px !important;
    max-height: 118px !important;
  }
}

/* AI route card: make it feel like level progression, not a task board. */
html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-route-card.landing-ai-task-center {
  position: relative !important;
  display: block !important;
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 88% 22%, rgba(124, 77, 255, 0.16), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
}

html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center::before {
  content: "" !important;
  position: absolute !important;
  inset: 56px 16px auto 16px !important;
  height: 96px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.14), rgba(91, 140, 255, 0.12)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 255, 0.88)) !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 16px 30px rgba(91, 140, 255, 0.12) !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-head {
  position: absolute !important;
  top: 15px !important;
  left: 18px !important;
  right: 18px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  z-index: 4 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-title span {
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  color: #111827 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-title strong {
  display: inline-flex !important;
  align-items: center !important;
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.1) !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress {
  position: absolute !important;
  top: 56px !important;
  right: 18px !important;
  width: 108px !important;
  height: 96px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 255, 0.9)) !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  box-shadow: 0 12px 26px rgba(91, 140, 255, 0.13) !important;
  overflow: hidden !important;
  z-index: 4 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 16px !important;
  background: conic-gradient(from -90deg, #7c4dff var(--landing-progress, 65%), rgba(226, 232, 255, 0.9) 0) !important;
  opacity: 0.18 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress i {
  position: absolute !important;
  inset: 17px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 77, 255, 0.08) !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress span,
html body[data-active-panel="landing"] .landing-route-card .landing-route-progress strong {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress span {
  color: #7b89a3 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress strong {
  color: #6d4dff !important;
  font-size: 32px !important;
  line-height: 0.95 !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage {
  position: absolute !important;
  top: 56px !important;
  left: 18px !important;
  right: 138px !important;
  width: auto !important;
  height: 96px !important;
  min-height: 96px !important;
  display: flex !important;
  align-items: center !important;
  padding: 18px 18px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 4 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage > div:first-child {
  min-width: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage span {
  color: #7b89a3 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage strong {
  max-width: 100% !important;
  color: #111827 !important;
  font-size: 24px !important;
  line-height: 1.08 !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-completion {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress-track {
  position: absolute !important;
  top: 164px !important;
  left: 18px !important;
  right: 18px !important;
  width: auto !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #edf1fb !important;
  overflow: hidden !important;
  z-index: 4 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress-track i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #7c4dff, #5b8cff) !important;
  box-shadow: 0 0 18px rgba(124, 77, 255, 0.28) !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
  position: absolute !important;
  top: 182px !important;
  left: 18px !important;
  right: 18px !important;
  height: 58px !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-rows: repeat(4, 1fr) !important;
  gap: 3px !important;
  z-index: 4 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 6px !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 6px !important;
  border-radius: 9px !important;
  background: rgba(248, 250, 255, 0.72) !important;
  border: 1px solid rgba(226, 232, 240, 0.78) !important;
  box-shadow: none !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step.is-current {
  background: rgba(124, 77, 255, 0.09) !important;
  border-color: rgba(124, 77, 255, 0.14) !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-index {
  width: 15px !important;
  height: 15px !important;
  font-size: 9px !important;
  line-height: 15px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-title {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-title strong {
  min-width: 0 !important;
  color: #182033 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-state {
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-feedback,
html body[data-active-panel="landing"] .landing-route-card .landing-ai-step::after {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 12px !important;
  height: 26px !important;
  min-height: 26px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(124, 77, 255, 0.1) !important;
  z-index: 4 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar > span:not(.landing-ai-status-dot),
html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar em {
  color: #60708a !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar strong {
  color: #6d4dff !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
}

/* Weekly growth: emphasize achievement labels and demote the tiny sparkline. */
html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-list {
  gap: 10px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item {
  min-height: 86px !important;
  padding: 10px 10px 34px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.94)) !important;
  border: 1px solid rgba(90, 108, 148, 0.13) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.035) !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item > span {
  display: block !important;
  max-width: calc(100% - 48px) !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item p {
  margin: 11px 0 0 !important;
  color: #111827 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item strong {
  position: absolute !important;
  top: 33px !important;
  right: 10px !important;
  color: #22c55e !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-trend {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  top: auto !important;
  bottom: 8px !important;
  max-width: none !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.1) !important;
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item:nth-child(even) .landing-weekly-growth-trend {
  color: #2f6fff !important;
  background: rgba(91, 140, 255, 0.11) !important;
  border-color: rgba(91, 140, 255, 0.12) !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item::after {
  left: 10px !important;
  right: 10px !important;
  bottom: 34px !important;
  height: 16px !important;
  opacity: 0.16 !important;
  filter: saturate(0.82) !important;
}

/* v120: real-time growth reward after a training round. */
html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item.is-live-updated {
  border-color: rgba(34, 197, 94, 0.34) !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(34, 197, 94, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(240, 253, 244, 0.96)) !important;
  box-shadow:
    0 16px 34px rgba(34, 197, 94, 0.12),
    0 10px 22px rgba(15, 23, 42, 0.045) !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item.is-live-updated strong {
  color: #16a34a !important;
  font-size: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item.is-live-updated .landing-weekly-growth-trend {
  color: #047857 !important;
  background: rgba(34, 197, 94, 0.14) !important;
  border-color: rgba(34, 197, 94, 0.18) !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item.is-reward-pulse {
  animation: landingGrowthRewardPulse 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) 1 both !important;
}

@keyframes landingGrowthRewardPulse {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(34, 197, 94, 0);
  }
  34% {
    transform: translateY(-5px) scale(1.018);
    box-shadow: 0 22px 48px rgba(34, 197, 94, 0.2);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Route card polish: keep the new level panel from feeling cramped on desktop. */
html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center::before {
  height: 92px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress {
  top: 58px !important;
  width: 104px !important;
  height: 88px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage {
  top: 58px !important;
  right: 150px !important;
  height: 88px !important;
  min-height: 88px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress-track {
  top: 154px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
  top: 166px !important;
  height: 70px !important;
  min-height: 70px !important;
}

/* Hardware focus: expose mastery at a glance. */
html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-chip-list {
  gap: 8px !important;
  align-items: stretch !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card {
  height: 146px !important;
  min-height: 146px !important;
  display: grid !important;
  grid-template-rows: 54px 15px 14px 31px !important;
  align-content: start !important;
  gap: 4px !important;
  padding: 7px 7px 8px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card strong {
  gap: 5px !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card strong span {
  width: 38px !important;
  height: 38px !important;
  font-size: 19px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card em {
  font-size: 12px !important;
  line-height: 1.05 !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card small {
  font-size: 10px !important;
  line-height: 1.05 !important;
  color: #8794aa !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
  align-self: end !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery > div span {
  color: #7b89a3 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery b {
  color: #6d4dff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery.is-weak b {
  color: #f59e0b !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery.is-good b {
  color: #22c55e !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery i {
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #edf1fb !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery i span {
  display: block !important;
  width: var(--mastery, 72%) !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #7c4dff, #5b8cff) !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery.is-weak i span {
  background: linear-gradient(90deg, #f59e0b, #fb7185) !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery.is-good i span {
  background: linear-gradient(90deg, #22c55e, #5b8cff) !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation {
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
  padding: 24px 30px !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-route-card.landing-ai-task-center {
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  left: 30px !important;
  top: 54px !important;
  margin-top: 10px !important;
}

html body[data-active-panel="landing"] .landing-project-ability-state {
  position: absolute !important;
  left: 30px !important;
  top: 88px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(91, 140, 255, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(248, 251, 255, 0.92) !important;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.08) !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-project-ability-state span {
  color: #7b89a3 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-project-ability-state strong {
  color: #172033 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-project-ability-state em {
  color: #7c4dff !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .landing-training-tag {
  left: 256px !important;
  top: 62px !important;
}

html body[data-active-panel="landing"] #landingRecommendationText {
  left: 30px !important;
  top: 122px !important;
  width: 430px !important;
  max-width: 430px !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  z-index: 2 !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason {
  position: absolute !important;
  left: 30px !important;
  top: 150px !important;
  width: 430px !important;
  min-height: 64px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 82px repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 8px !important;
  border-color: rgba(124, 77, 255, 0.18) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.08) 58%, rgba(255, 255, 255, 0.94)) !important;
  box-shadow: 0 14px 28px rgba(91, 140, 255, 0.1) !important;
  white-space: normal !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason > span {
  height: auto !important;
  min-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #7c4dff, #5b8cff) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason div {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 6px 7px !important;
  border: 1px solid rgba(90, 108, 148, 0.1) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason small {
  color: #7b89a3 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason strong {
  min-width: 0 !important;
  margin: 0 !important;
  color: #101828 !important;
  font-size: 17px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason em,
html body[data-active-panel="landing"] .landing-recommendation-reason b {
  margin: 0 !important;
  color: #7c4dff !important;
  font-size: 17px !important;
  font-style: normal !important;
  font-weight: 1000 !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason div:nth-of-type(2) b,
html body[data-active-panel="landing"] .landing-recommendation-reason div:nth-of-type(3) b {
  color: #ef4444 !important;
}

html body[data-active-panel="landing"] .landing-recommendation-meta {
  left: 30px !important;
  bottom: 52px !important;
  z-index: 3 !important;
}

html body[data-active-panel="landing"] .landing-primary-action.primary-btn {
  left: 30px !important;
  bottom: 10px !important;
  height: 38px !important;
  min-height: 38px !important;
  z-index: 3 !important;
}

html body[data-active-panel="landing"] .landing-hero-3d-img {
  opacity: 0.82 !important;
  transform: translateY(-3px) scale(0.98) !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-card {
  position: absolute !important;
  left: 18px !important;
  bottom: 18px !important;
  z-index: 18 !important;
  width: 172px !important;
  display: grid !important;
  gap: 7px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 18px 38px rgba(91, 140, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(12px) !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-head,
html body[data-active-panel="landing"] .landing-hero-capability-row {
  display: grid !important;
  grid-template-columns: 52px 1fr 24px !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-head {
  grid-template-columns: 1fr auto !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-head span,
html body[data-active-panel="landing"] .landing-hero-capability-row em {
  color: #667085 !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-head strong {
  color: #7c4dff !important;
  font-size: 21px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-row i {
  display: block !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #e8edf7 !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-row i span {
  display: block !important;
  width: var(--ability, 70%) !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #7c4dff, #5b8cff) !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-row b {
  color: #172033 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: right !important;
}

html body[data-active-panel="landing"] .landing-hero-status-strip {
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  z-index: 18 !important;
  display: grid !important;
  gap: 7px !important;
}

html body[data-active-panel="landing"] .landing-hero-status-strip span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 112px !important;
  height: 28px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(90, 108, 148, 0.1) !important;
  border-radius: 999px !important;
  color: #667085 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 12px 28px rgba(91, 140, 255, 0.12) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  backdrop-filter: blur(10px) !important;
}

html body[data-active-panel="landing"] .landing-hero-status-strip b {
  color: #22c55e !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-card {
  left: 16px !important;
  bottom: 14px !important;
  width: 196px !important;
  min-height: 176px !important;
  gap: 8px !important;
  padding: 11px 12px 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 255, 0.76)) !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-head strong {
  font-size: 22px !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-wrap {
  position: relative !important;
  width: 100% !important;
  height: 112px !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-svg {
  width: 112px !important;
  height: 112px !important;
  overflow: visible !important;
  filter: drop-shadow(0 14px 18px rgba(91, 140, 255, 0.18)) !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-svg polygon,
html body[data-active-panel="landing"] .landing-hero-radar-svg line {
  vector-effect: non-scaling-stroke !important;
}

html body[data-active-panel="landing"] .landing-radar-grid {
  fill: rgba(124, 77, 255, 0.045) !important;
  stroke: rgba(124, 77, 255, 0.2) !important;
  stroke-width: 1.2 !important;
}

html body[data-active-panel="landing"] .landing-radar-grid.is-mid {
  fill: rgba(91, 140, 255, 0.04) !important;
  stroke: rgba(91, 140, 255, 0.16) !important;
}

html body[data-active-panel="landing"] .landing-radar-grid.is-low {
  fill: rgba(255, 255, 255, 0.42) !important;
  stroke: rgba(124, 77, 255, 0.12) !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-svg line {
  stroke: rgba(100, 116, 139, 0.13) !important;
  stroke-width: 1 !important;
}

html body[data-active-panel="landing"] .landing-radar-value {
  fill: rgba(124, 77, 255, 0.22) !important;
  stroke: #7c4dff !important;
  stroke-width: 2.4 !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-svg circle {
  fill: #ffffff !important;
  stroke: #7c4dff !important;
  stroke-width: 2.2 !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-labels {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-labels span {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  max-width: 58px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border: 1px solid rgba(90, 108, 148, 0.1) !important;
  border-radius: 999px !important;
  color: #667085 !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 8px 18px rgba(91, 140, 255, 0.1) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-labels b {
  color: #7c4dff !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-labels span[data-radar-label="project"] {
  left: 50% !important;
  top: -2px !important;
  transform: translateX(-50%) !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-labels span[data-radar-label="debug"] {
  right: -2px !important;
  top: 31px !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-labels span[data-radar-label="pi"] {
  right: 13px !important;
  bottom: 3px !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-labels span[data-radar-label="i2c"] {
  left: 11px !important;
  bottom: 5px !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-labels span[data-radar-label="can"] {
  left: -2px !important;
  top: 35px !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-summary span {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
  padding: 7px 7px !important;
  border-radius: 10px !important;
  color: #667085 !important;
  background: rgba(241, 245, 255, 0.9) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-summary b {
  color: #172033 !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-hero-status-strip {
  right: 16px !important;
  top: 18px !important;
}

/* Training achievement center: replaces the old calendar layout at every desktop width. */
html body[data-active-panel="landing"] .landing-training-heatmap {
  display: grid !important;
  grid-template-rows: 20px minmax(88px, auto) minmax(32px, auto) !important;
  gap: 7px !important;
  padding: 12px 16px 10px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-achievement-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

html body[data-active-panel="landing"] .landing-achievement-list div {
  min-width: 0 !important;
  min-height: 40px !important;
  display: grid !important;
  align-content: center !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(90, 108, 148, 0.12) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.98), rgba(255, 255, 255, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 20px rgba(91, 140, 255, 0.08) !important;
  text-align: center !important;
}

html body[data-active-panel="landing"] .landing-achievement-list span {
  display: block !important;
  color: #64748b !important;
  font-size: 9.5px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-achievement-list strong {
  display: block !important;
  margin-top: 3px !important;
  color: #0f172a !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-achievement-list div:first-child {
  border-color: rgba(124, 77, 255, 0.18) !important;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.08) 62%, rgba(255, 255, 255, 0.98)) !important;
}

html body[data-active-panel="landing"] .landing-achievement-list div:first-child strong {
  color: #7c4dff !important;
}

html body[data-active-panel="landing"] .landing-achievement-list div:nth-child(4) {
  border-color: rgba(34, 197, 94, 0.18) !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(91, 140, 255, 0.08) 62%, rgba(255, 255, 255, 0.98)) !important;
}

html body[data-active-panel="landing"] .landing-achievement-list div:nth-child(4) strong {
  color: #16a34a !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip {
  display: grid !important;
  grid-template-rows: 12px 6px !important;
  gap: 5px !important;
  min-height: 32px !important;
  padding: 6px 8px 7px !important;
  border: 1px solid rgba(90, 108, 148, 0.1) !important;
  border-radius: 14px !important;
  background: #f8fbff !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  color: #94a3b8 !important;
  font-size: 9.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip-head span,
html body[data-active-panel="landing"] .landing-heatmap-strip-head em {
  min-width: 0 !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-heatmap-grid {
  display: grid !important;
  grid-template-columns: repeat(35, minmax(3px, 1fr)) !important;
  grid-auto-rows: 6px !important;
  gap: 3px !important;
  align-content: center !important;
  align-items: center !important;
  margin: 0 !important;
}

html body[data-active-panel="landing"] .landing-heatmap-cell {
  width: 100% !important;
  height: 6px !important;
  min-width: 0 !important;
  min-height: 6px !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 3px !important;
}

/* Compact achievement center: higher signal than the old calendar, about half the visual weight. */
html body[data-active-panel="landing"] .landing-training-heatmap {
  align-self: start !important;
  box-sizing: border-box !important;
  height: 116px !important;
  min-height: 116px !important;
  max-height: 116px !important;
  grid-template-rows: 18px minmax(42px, auto) 18px !important;
  gap: 6px !important;
  padding: 12px 14px !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  align-self: start !important;
  box-sizing: border-box !important;
  height: 116px !important;
  min-height: 116px !important;
  max-height: 116px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-heatmap-head {
  min-height: 18px !important;
  align-items: center !important;
}

html body[data-active-panel="landing"] .landing-heatmap-head span {
  font-size: 15px !important;
  line-height: 18px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-head strong {
  height: 18px !important;
  font-size: 10px !important;
  line-height: 18px !important;
}

html body[data-active-panel="landing"] .landing-achievement-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html body[data-active-panel="landing"] .landing-achievement-list div {
  min-height: 42px !important;
  padding: 6px 5px !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 16px rgba(91, 140, 255, 0.06) !important;
}

html body[data-active-panel="landing"] .landing-achievement-list span {
  font-size: 8.5px !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-achievement-list strong {
  margin-top: 4px !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip {
  grid-template-rows: 6px !important;
  min-height: 18px !important;
  padding: 6px 7px !important;
  border-radius: 10px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip-head {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-heatmap-grid {
  grid-template-columns: repeat(35, minmax(2px, 1fr)) !important;
  grid-auto-rows: 6px !important;
  gap: 2px !important;
}

/* Homepage character rule: Xiaowen lives only in the bottom-right coach dock. */
html body[data-active-panel="landing"] #companionAmbientStage,
html body[data-active-panel="landing"] .landing-ai-briefing img,
html body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar,
html body[data-active-panel="landing"] .landing-xiaowen-briefing-avatar img,
html body[data-active-panel="landing"] .landing-xiaowen-briefing .character-stage-duo,
html body[data-active-panel="landing"] .landing-xiaowen-briefing .companion-hud-orb,
html body[data-active-panel="landing"] .landing-coach-card-bottom > img,
html body[data-active-panel="landing"] .landing-coach-card-bottom .character-stage-duo,
html body[data-active-panel="landing"] .landing-coach-card-bottom .companion-hud-orb,
html body[data-active-panel="landing"] .landing-welcome-panel .character-stage-duo,
html body[data-active-panel="landing"] .landing-welcome-panel .companion-hud-orb,
html body[data-active-panel="landing"] .landing-primary-recommendation .character-stage-duo,
html body[data-active-panel="landing"] .landing-primary-recommendation .companion-hud-orb,
html body[data-active-panel="landing"] [data-panel="landing"] img[src*="xiaowen"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock:not([hidden]),
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed:not([hidden]),
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-expanded:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock:not([hidden]) #companionMini {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Homepage priority v54: recommendation, growth, then route. */
html body[data-active-panel="landing"] .landing-home-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.86fr) minmax(300px, 0.74fr) !important;
  grid-template-areas:
    "welcome welcome welcome"
    "recommendation recommendation briefing"
    "growth growth growth"
    "route route calendar"
    "hardware questions coach"
    "special special special" !important;
  align-items: start !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation {
  grid-area: recommendation !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth {
  grid-area: growth !important;
  min-height: 176px !important;
  height: auto !important;
  max-height: none !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-route-card.landing-ai-task-center {
  grid-area: route !important;
  align-self: start !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing {
  grid-area: briefing !important;
  align-self: stretch !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  grid-area: calendar !important;
  align-self: start !important;
}

html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template:
    "welcome welcome welcome" 96px
    "recommendation recommendation briefing" 320px
    "growth growth growth" minmax(176px, auto)
    "route route calendar" 320px
    "hardware questions coach" 190px
    "special special special" 180px
    / minmax(0, 1.18fr) minmax(0, 0.86fr) minmax(300px, 0.74fr) !important;
  align-items: start !important;
}

/* Homepage priority v56: growth result, AI explanation, then recommendation. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template:
    "welcome welcome welcome" 96px
    "growth growth briefing" minmax(206px, auto)
    "recommendation recommendation recommendation" 320px
    "route route calendar" 320px
    "hardware questions coach" 190px
    "special special special" 180px
    / minmax(0, 1.18fr) minmax(0, 0.86fr) minmax(300px, 0.74fr) !important;
  align-items: start !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth {
  align-self: stretch !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing {
  align-self: stretch !important;
  min-height: 206px !important;
}

/* Homepage priority v57: keep special training as the final action layer. */
@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template:
      "welcome" auto
      "growth" auto
      "briefing" auto
      "recommendation" auto
      "route" auto
      "calendar" auto
      "hardware" auto
      "questions" auto
      "coach" auto
      "special" auto
      / minmax(0, 1fr) !important;
  }
}

/* Homepage hardware card lock v63: override older focus-specific card sizing. */
html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-chip-list {
  height: 104px !important;
  min-height: 104px !important;
  grid-template-rows: 104px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-chip-list .landing-hardware-card {
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  padding: 8px !important;
  grid-template-rows: 32px 14px 12px 22px !important;
  gap: 4px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card strong {
  min-height: 32px !important;
  height: 32px !important;
  gap: 4px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card strong span {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 16px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-mastery {
  min-height: 22px !important;
  height: 22px !important;
  gap: 3px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-mastery > div {
  height: 11px !important;
  min-height: 11px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-mastery i {
  height: 5px !important;
  min-height: 5px !important;
}

/* EOF top action v64b: welcome bar keeps only Customize Home. */
html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel {
  grid-template-columns: minmax(0, 1fr) 164px !important;
  gap: 24px !important;
}

html body[data-active-panel="landing"] .landing-welcome-panel .landing-coach-suggestion,
html body[data-active-panel="landing"] .landing-welcome-panel .landing-welcome-briefing {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-welcome-panel .landing-customize-home {
  justify-self: end !important;
  width: 164px !important;
  min-width: 164px !important;
}

/* EOF dashboard drawer visibility lock v66: must stay after legacy drawer rules. */
.training-dashboard-drawer:not(.is-open) {
  transform: translateX(104%) !important;
}

.training-dashboard-drawer.is-open {
  transform: translateX(0) !important;
}

/* XiaoWen final identity v144.1: keep this block last so legacy capsule/avatar rules cannot return. */
html body #companionAmbientStage,
html body #companionAmbientStage.companion-ambient-stage,
html body #companionAmbientStage.companion-ambient-stage.companion-ambient-moment {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body #companionDock.companion-dock.companion-collapsed {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 72px !important;
  max-width: 72px !important;
  min-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  right: calc(24px + var(--safe-right, 0px)) !important;
  bottom: calc(24px + var(--safe-bottom, 0px)) !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  place-items: center !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 0 !important;
  border: 3px solid rgba(124, 77, 255, 0.72) !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  background-image:
    radial-gradient(circle at 84% 84%, #22c55e 0 5px, transparent 5.8px),
    url("./assets/xiaowen-avatar.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
  box-shadow:
    0 18px 38px rgba(124, 77, 255, 0.28),
    0 0 0 8px rgba(124, 77, 255, 0.08) !important;
  transform: none !important;
  overflow: hidden !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini > *,
html body #companionDock.companion-dock.companion-collapsed #companionMiniAvatar,
html body #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage,
html body #companionDock.companion-dock.companion-collapsed #companionMiniCharacter,
html body #companionDock.companion-dock.companion-collapsed .companion-mini-bubble,
html body #companionDock.companion-dock.companion-collapsed .companion-drag-handle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini::before,
html body #companionDock.companion-dock.companion-collapsed #companionMini::after {
  content: "" !important;
  display: none !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 72px !important;
  max-width: 72px !important;
  min-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  border: 3px solid rgba(124, 77, 255, 0.72) !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  background-image:
    radial-gradient(circle at 84% 84%, #22c55e 0 5px, transparent 5.8px),
    url("./assets/xiaowen-avatar.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
  box-shadow:
    0 18px 38px rgba(124, 77, 255, 0.28),
    0 0 0 8px rgba(124, 77, 255, 0.08) !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini > *,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMiniAvatar,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMiniCharacter,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed .companion-mini-bubble,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed .companion-drag-handle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini::before,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini::after {
  content: "" !important;
  display: none !important;
}

/* Text fit v150: final EOF lock for unclipped cockpit copy and special-training cards. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-rows: 148px 276px 420px 240px 240px 180px 232px 180px 150px 196px !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-xiaowen-briefing,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-xiaowen-briefing {
  height: 276px !important;
  min-height: 276px !important;
  max-height: 276px !important;
  padding: 24px 28px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-copy {
  height: 100% !important;
  min-height: 0 !important;
  grid-template:
    "head stats" 32px
    "text stats" minmax(74px, auto)
    "advice stats" minmax(76px, 1fr)
    / minmax(0, 1fr) 372px !important;
  gap: 16px 28px !important;
  align-items: start !important;
}

html body[data-active-panel="landing"] #landingXiaowenBriefingText,
html body:has(.landing-workspace.active) #landingXiaowenBriefingText,
html body[data-active-panel="landing"] .landing-xiaowen-briefing-advice,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-advice {
  display: block !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #334155 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-special-training,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-special-training {
  height: 196px !important;
  min-height: 196px !important;
  max-height: 196px !important;
  padding: 22px 26px !important;
  display: grid !important;
  grid-template-rows: 28px minmax(0, 1fr) !important;
  gap: 18px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-special-training-list,
html body:has(.landing-workspace.active) .landing-special-training-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  height: 126px !important;
  min-height: 126px !important;
  max-height: none !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item {
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;
  padding: 16px !important;
  display: grid !important;
  grid-template:
    "icon title button" 30px
    "icon reason button" 36px
    "rate rate button" 34px
    / 42px minmax(0, 1fr) 96px !important;
  gap: 8px 14px !important;
  align-items: center !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-icon,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-icon {
  grid-area: icon !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  align-self: start !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > strong,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > strong {
  grid-area: title !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-reason,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-reason {
  grid-area: reason !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  color: #8a97ad !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > p,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > p {
  grid-area: rate !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: end !important;
  overflow: visible !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > p b,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > p b {
  color: #111827 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > em,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > em {
  grid-area: button !important;
  justify-self: end !important;
  align-self: end !important;
  width: 96px !important;
  min-width: 96px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 34px !important;
  white-space: nowrap !important;
}

/* Homepage hierarchy v184: one main recommendation, separate decision, follow-up, and report queue. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-rows: 164px 248px 420px 240px 240px 180px 232px 180px 150px 196px !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-welcome-panel {
  height: 164px !important;
  min-height: 164px !important;
  max-height: 164px !important;
  padding: 14px 0 16px 2px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-welcome-copy,
html body:has(.landing-workspace.active) .landing-welcome-copy {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: 14px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-greeting-line,
html body:has(.landing-workspace.active) .landing-greeting-line {
  margin: 0 !important;
  min-height: 36px !important;
  line-height: 1.08 !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-statusbar,
html body:has(.landing-workspace.active) .landing-training-statusbar {
  width: min(100%, 1000px) !important;
  grid-template-columns: minmax(320px, 1.42fr) repeat(3, minmax(168px, 1fr)) !important;
  gap: 18px !important;
  align-items: end !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-status,
html body:has(.landing-workspace.active) .landing-training-status {
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child),
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) {
  min-height: 78px !important;
  height: 78px !important;
  padding: 12px 16px !important;
  display: grid !important;
  grid-template-rows: 14px 27px 14px !important;
  align-content: center !important;
  gap: 4px !important;
  border-radius: 16px !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child) span,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) span {
  font-size: 11px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child) strong,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) strong {
  font-size: 24px !important;
  line-height: 1.08 !important;
  min-height: 27px !important;
  display: block !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child) em,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) em {
  font-size: 11px !important;
  line-height: 1.15 !important;
  min-height: 13px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow,
html body:has(.landing-workspace.active) .landing-primary-recommendation .eyebrow {
  background: rgba(124, 77, 255, 0.12) !important;
  color: #6d4dff !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats div:nth-child(4),
html body:has(.landing-workspace.active) .landing-training-cockpit-stats div:nth-child(4) {
  border-color: rgba(91, 140, 255, 0.2) !important;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.94)) !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats div:nth-child(4) strong,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats div:nth-child(4) strong {
  color: #2563eb !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom,
html body:has(.landing-workspace.active) .landing-coach-card-bottom {
  background:
    radial-gradient(circle at 92% 50%, rgba(91, 140, 255, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(249, 251, 255, 0.96)) !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom .landing-coach-card-head span,
html body:has(.landing-workspace.active) .landing-coach-card-bottom .landing-coach-card-head span {
  color: #334155 !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom .landing-coach-card-head strong,
html body:has(.landing-workspace.active) .landing-coach-card-bottom .landing-coach-card-head strong {
  color: #2563eb !important;
}

html body[data-active-panel="landing"] .landing-special-training-head span,
html body:has(.landing-workspace.active) .landing-special-training-head span {
  color: #0f172a !important;
}

html body[data-active-panel="landing"] .landing-special-training-head strong,
html body:has(.landing-workspace.active) .landing-special-training-head strong {
  color: #64748b !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: 224px 360px 420px 240px 240px 180px 232px 180px 150px 196px !important;
  }

  html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel,
  html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-welcome-panel {
    height: 224px !important;
    min-height: 224px !important;
    max-height: 224px !important;
  }

  html body[data-active-panel="landing"] .landing-training-statusbar,
  html body:has(.landing-workspace.active) .landing-training-statusbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: 214px auto 420px 300px 300px 220px auto auto 180px auto !important;
  }

  html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-xiaowen-briefing,
  html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-xiaowen-briefing,
  html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-special-training,
  html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-special-training {
    height: auto !important;
    max-height: none !important;
  }

  html body[data-active-panel="landing"] .landing-special-training-list,
  html body:has(.landing-workspace.active) .landing-special-training-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Text fit v149: avoid clipping cockpit copy and generated special-training cards. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-rows: 148px 276px 420px 240px 240px 180px 232px 180px 150px 196px !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-xiaowen-briefing,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-xiaowen-briefing {
  height: 276px !important;
  min-height: 276px !important;
  max-height: 276px !important;
  padding: 24px 28px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-copy {
  height: 100% !important;
  min-height: 0 !important;
  grid-template:
    "head stats" 32px
    "text stats" minmax(74px, auto)
    "advice stats" minmax(76px, 1fr)
    / minmax(0, 1fr) 372px !important;
  gap: 16px 28px !important;
  align-items: start !important;
}

html body[data-active-panel="landing"] #landingXiaowenBriefingText,
html body:has(.landing-workspace.active) #landingXiaowenBriefingText,
html body[data-active-panel="landing"] .landing-xiaowen-briefing-advice,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-advice {
  display: block !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #334155 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-advice strong,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-advice strong {
  line-height: 1.58 !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-special-training,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-special-training {
  height: 196px !important;
  min-height: 196px !important;
  max-height: 196px !important;
  padding: 22px 26px !important;
  display: grid !important;
  grid-template-rows: 28px minmax(0, 1fr) !important;
  gap: 18px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-special-training-head,
html body:has(.landing-workspace.active) .landing-special-training-head {
  height: auto !important;
  min-height: 28px !important;
  margin: 0 !important;
  align-items: center !important;
}

html body[data-active-panel="landing"] .landing-special-training-list,
html body:has(.landing-workspace.active) .landing-special-training-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  height: 126px !important;
  min-height: 126px !important;
  max-height: none !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item {
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;
  padding: 16px 16px !important;
  display: grid !important;
  grid-template:
    "icon title button" 30px
    "icon reason button" 36px
    "rate rate button" 34px
    / 42px minmax(0, 1fr) 96px !important;
  gap: 8px 14px !important;
  align-items: center !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-icon,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-icon {
  grid-area: icon !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  align-self: start !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > strong,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > strong {
  grid-area: title !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-reason,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-reason {
  grid-area: reason !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  color: #8a97ad !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > p,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > p {
  grid-area: rate !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: end !important;
  overflow: visible !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > p b,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > p b {
  color: #111827 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > em,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > em {
  grid-area: button !important;
  justify-self: end !important;
  align-self: end !important;
  width: 96px !important;
  min-width: 96px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 34px !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: 214px auto 420px 300px 300px 220px auto auto 180px auto !important;
  }

  html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-xiaowen-briefing,
  html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-xiaowen-briefing,
  html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-special-training,
  html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-special-training {
    height: auto !important;
    max-height: none !important;
  }

  html body[data-active-panel="landing"] .landing-special-training-list,
  html body:has(.landing-workspace.active) .landing-special-training-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* XiaoWen final identity v144: only one round coach entry in the bottom-right dock. */
html body #companionAmbientStage,
html body #companionAmbientStage.companion-ambient-stage,
html body #companionAmbientStage.companion-ambient-stage.companion-ambient-moment {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body #companionDock.companion-dock.companion-collapsed {
  width: 72px !important;
  max-width: 72px !important;
  right: calc(24px + var(--safe-right, 0px)) !important;
  bottom: calc(24px + var(--safe-bottom, 0px)) !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini {
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 3px solid rgba(124, 77, 255, 0.72) !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  background-image:
    radial-gradient(circle at 84% 84%, #22c55e 0 5px, transparent 5.8px),
    url("./assets/xiaowen-avatar.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
  box-shadow:
    0 18px 38px rgba(124, 77, 255, 0.28),
    0 0 0 8px rgba(124, 77, 255, 0.08) !important;
  overflow: hidden !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini > * {
  display: none !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini::before,
html body #companionDock.companion-dock.companion-collapsed #companionMini::after {
  content: "" !important;
  display: none !important;
}

html body .character-stage-duo,
html body .companion-hud-orb,
html body .character-speech-bubble .character-figure,
html body .character-empty-state .character-figure {
  display: none !important;
}

html body .ai-system-empty-state,
html body .ai-coach-system-bubble,
html body .ai-coach-system-card {
  position: relative !important;
}

html body .ai-system-empty-mark {
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 12px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.1) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

/* Achievement title system v128: shared growth badges across home, reports and Xiaowen. */
html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  height: 164px !important;
  min-height: 164px !important;
  max-height: 164px !important;
  grid-template-rows: 18px 42px 30px 24px !important;
  gap: 7px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-achievement-title-list {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 30px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .achievement-title-chip,
.training-summary-achievements .achievement-title-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: 26px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(124, 77, 255, 0.18) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.1), rgba(255, 255, 255, 0.95)) !important;
  color: #4f46e5 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(124, 77, 255, 0.08) !important;
}

html body[data-active-panel="landing"] .achievement-title-chip.is-primary,
.training-summary-achievements .achievement-title-chip.is-primary {
  border-color: rgba(34, 197, 94, 0.22) !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(91, 140, 255, 0.1), rgba(255, 255, 255, 0.96)) !important;
  color: #059669 !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip {
  min-height: 24px !important;
  padding: 5px 7px !important;
}

html body[data-active-panel="training-summary"] .training-summary-hero {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 190px) minmax(220px, 280px) !important;
  align-items: stretch !important;
}

.training-summary-achievements {
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 16px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(248, 250, 255, 0.98), rgba(244, 238, 255, 0.82)) !important;
}

.training-summary-achievements > span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.training-summary-achievements > strong {
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}

.training-summary-achievements > em {
  color: #5b6b84 !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.training-summary-achievement-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="training-summary"] .training-summary-hero {
    grid-template-columns: 1fr !important;
  }
}

/* EOF dashboard drawer visibility lock v128: must stay last. */
.training-dashboard-drawer:not(.is-open) {
  transform: translateX(104%) !important;
}

.training-dashboard-drawer.is-open {
  transform: translateX(0) !important;
}

/* EOF training dashboard drawer v65. */
.training-dashboard-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8990;
  background: rgba(15, 23, 42, 0.18);
  opacity: 0;
  transition: opacity 180ms ease;
}

.training-dashboard-drawer-backdrop.is-open {
  opacity: 1;
}

.training-dashboard-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9000;
  width: min(480px, calc(100vw - 24px));
  height: 100vh;
  padding: 24px;
  border-left: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 24px 0 0 24px;
  background:
    radial-gradient(circle at 16% 8%, rgba(124, 77, 255, 0.12), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.14);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}

.training-dashboard-drawer.is-open {
  transform: translateX(0);
}

.training-dashboard-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.training-dashboard-drawer-head div {
  display: grid;
  gap: 8px;
}

.training-dashboard-drawer-head span,
.training-dashboard-section-head span {
  color: #7c4dff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.training-dashboard-drawer-head strong {
  color: #0f172a;
  font-size: 24px;
  line-height: 1.2;
}

.training-dashboard-drawer-close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  background: #ffffff;
  color: #64748b;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.training-dashboard-section {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.training-dashboard-section-head {
  display: grid;
  gap: 6px;
}

.training-dashboard-section-head strong {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.3;
}

.training-direction-options {
  display: grid;
  gap: 10px;
}

.training-direction-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  background: #ffffff;
  color: #172033;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.training-direction-option:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 77, 255, 0.34);
  box-shadow: 0 10px 24px rgba(124, 77, 255, 0.1);
}

.training-direction-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #7c4dff;
}

.training-direction-option:has(input:checked) {
  border-color: rgba(124, 77, 255, 0.52);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.08));
  box-shadow: 0 12px 28px rgba(124, 77, 255, 0.14);
}

.training-dashboard-effect {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: rgba(124, 77, 255, 0.08);
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

/* EOF dashboard drawer v65: Customize Home opens a right-side training cockpit drawer. */
.training-dashboard-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.training-dashboard-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.training-dashboard-drawer-backdrop[hidden] {
  display: none;
}

.training-dashboard-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: min(480px, calc(100vw - 24px));
  height: 100vh;
  padding: 24px;
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 24px 0 0 24px;
  box-shadow: -24px 0 60px rgba(15, 23, 42, 0.16);
  transform: translateX(104%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.training-dashboard-drawer.is-open {
  transform: translateX(0);
}

.training-dashboard-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.training-dashboard-drawer-head div {
  display: grid;
  gap: 6px;
}

.training-dashboard-drawer-head span,
.training-dashboard-section-head span {
  color: #7c4dff;
  font-size: 13px;
  font-weight: 800;
}

.training-dashboard-drawer-head strong {
  color: #0f172a;
  font-size: 24px;
  line-height: 1.2;
}

.training-dashboard-drawer-close {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
}

.training-dashboard-section {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid rgba(124, 77, 255, 0.12);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(245, 248, 252, 0.92), rgba(255, 255, 255, 0.98));
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

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

.training-dashboard-section-head strong {
  color: #0f172a;
  font-size: 18px;
}

.training-direction-options,
.training-focus-options {
  display: grid;
  gap: 12px;
}

.training-focus-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.training-direction-option,
.training-focus-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.training-direction-option:hover,
.training-focus-option:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 77, 255, 0.28);
  box-shadow: 0 10px 24px rgba(124, 77, 255, 0.1);
}

.training-direction-option:has(input:checked),
.training-focus-option:has(input:checked) {
  border-color: rgba(124, 77, 255, 0.55);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.08));
  box-shadow: 0 12px 28px rgba(124, 77, 255, 0.16);
}

.training-direction-option input,
.training-focus-option input {
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  appearance: none;
  border: 2px solid rgba(148, 163, 184, 0.5);
  background: #fff;
}

.training-direction-option input {
  border-radius: 50%;
}

.training-focus-option input {
  border-radius: 6px;
}

.training-direction-option input:checked,
.training-focus-option input:checked {
  border-color: #7c4dff;
  background: #7c4dff;
}

.training-direction-option input:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}

.training-focus-option input:checked::after {
  content: "✓";
  position: absolute;
  inset: -2px 0 0 0;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  line-height: 18px;
}

.training-dashboard-effect {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(124, 77, 255, 0.08);
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

body.training-dashboard-drawer-open {
  overflow: hidden;
}

@media (max-width: 560px) {
  .training-dashboard-drawer {
    width: calc(100vw - 12px);
    padding: 18px;
    border-radius: 20px 0 0 20px;
  }

  .training-focus-options {
    grid-template-columns: 1fr;
  }
}

/* EOF top action v64: only keep Customize Home in the welcome bar. */
html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel {
  grid-template-columns: minmax(0, 1fr) 164px !important;
  gap: 24px !important;
}

html body[data-active-panel="landing"] .landing-welcome-panel .landing-coach-suggestion,
html body[data-active-panel="landing"] .landing-welcome-panel .landing-welcome-briefing {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-welcome-panel .landing-customize-home {
  justify-self: end !important;
  width: 164px !important;
  min-width: 164px !important;
}

/* Homepage height lock v61b: true final rule at EOF. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template:
    "welcome welcome welcome" 96px
    "growth growth briefing" 240px
    "recommendation recommendation recommendation" 320px
    "route route calendar" 240px
    "hardware questions coach" 180px
    "special special special" 180px
    / minmax(0, 1.18fr) minmax(0, 0.86fr) minmax(300px, 0.74fr) !important;
  row-gap: 40px !important;
  column-gap: 24px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation {
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body[data-active-panel="landing"] .landing-xiaowen-briefing,
html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center,
html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-coach-card-bottom,
html body[data-active-panel="landing"] .landing-special-training {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  padding: 16px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center,
html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  padding: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth-head,
html body[data-active-panel="landing"] .landing-route-head,
html body[data-active-panel="landing"] .landing-hardware-head,
html body[data-active-panel="landing"] .landing-special-training-head,
html body[data-active-panel="landing"] .landing-heatmap-head,
html body[data-active-panel="landing"] .landing-coach-card-head {
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth {
  grid-template-rows: 24px 112px 24px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-list {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item {
  min-height: 112px !important;
  padding: 10px 10px 32px !important;
}

html body[data-active-panel="landing"] .landing-growth-score {
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center {
  display: grid !important;
  grid-template-rows: 28px 48px 6px 68px 24px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-head {
  height: 28px !important;
  min-height: 28px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage {
  height: 48px !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress-track {
  height: 6px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
  height: 68px !important;
  min-height: 68px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, 30px) !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step {
  height: 30px !important;
  min-height: 30px !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  padding: 0 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-feedback {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  grid-template-rows: 24px 64px 80px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-achievement-list div {
  min-height: 64px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip {
  min-height: 80px !important;
  grid-template-rows: 16px 32px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip-head {
  display: flex !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus {
  grid-template-rows: 24px 104px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-hardware-chip-list {
  height: 104px !important;
  min-height: 104px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card {
  height: 104px !important;
  min-height: 104px !important;
  padding: 8px !important;
  grid-template-rows: 32px 14px 12px 22px !important;
  gap: 4px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card strong {
  min-height: 32px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card strong span {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 16px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery {
  min-height: 22px !important;
  gap: 3px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery > div {
  height: 11px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery i {
  height: 5px !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions {
  grid-template-rows: 24px 112px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-question-list {
  height: 112px !important;
  min-height: 112px !important;
  grid-template-rows: repeat(5, 20px) !important;
  gap: 3px !important;
}

html body[data-active-panel="landing"] .landing-hot-question {
  height: 20px !important;
  min-height: 20px !important;
  grid-template-rows: 20px !important;
}

html body[data-active-panel="landing"] .landing-question-more {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-copy,
html body[data-active-panel="landing"] .landing-coach-card-copy p {
  margin: 0 !important;
}

html body[data-active-panel="landing"] .landing-coach-card-copy {
  gap: 12px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-copy p {
  line-height: 1.45 !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom .primary-btn {
  height: 32px !important;
  min-height: 32px !important;
  margin-top: 0 !important;
}

html body[data-active-panel="landing"] .landing-special-training {
  grid-template-rows: 24px 108px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-special-training-list {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-special-training-item {
  min-height: 108px !important;
  padding: 12px !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template:
      "welcome" auto
      "growth" 240px
      "briefing" 240px
      "recommendation" 320px
      "route" 240px
      "calendar" 240px
      "hardware" 180px
      "questions" 180px
      "coach" 180px
      "special" 180px
      / minmax(0, 1fr) !important;
  }
}

/* Homepage height lock v61: final override after legacy compact rules. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template:
    "welcome welcome welcome" 96px
    "growth growth briefing" 240px
    "recommendation recommendation recommendation" 320px
    "route route calendar" 240px
    "hardware questions coach" 180px
    "special special special" 180px
    / minmax(0, 1.18fr) minmax(0, 0.86fr) minmax(300px, 0.74fr) !important;
  row-gap: 40px !important;
  column-gap: 24px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation {
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body[data-active-panel="landing"] .landing-xiaowen-briefing,
html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center,
html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-coach-card-bottom,
html body[data-active-panel="landing"] .landing-special-training {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  padding: 16px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center,
html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  padding: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth-head,
html body[data-active-panel="landing"] .landing-route-head,
html body[data-active-panel="landing"] .landing-hardware-head,
html body[data-active-panel="landing"] .landing-special-training-head,
html body[data-active-panel="landing"] .landing-heatmap-head,
html body[data-active-panel="landing"] .landing-coach-card-head {
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth {
  grid-template-rows: 24px 112px 24px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-list {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item {
  min-height: 112px !important;
  padding: 10px 10px 32px !important;
}

html body[data-active-panel="landing"] .landing-growth-score {
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center {
  display: grid !important;
  grid-template-rows: 28px 48px 6px 68px 24px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-head {
  height: 28px !important;
  min-height: 28px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage {
  height: 48px !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress-track {
  height: 6px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
  height: 68px !important;
  min-height: 68px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, 30px) !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step {
  height: 30px !important;
  min-height: 30px !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  padding: 0 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-feedback {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  grid-template-rows: 24px 64px 80px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-achievement-list div {
  min-height: 64px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip {
  min-height: 80px !important;
  grid-template-rows: 16px 32px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip-head {
  display: flex !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus {
  grid-template-rows: 24px 104px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-hardware-chip-list {
  height: 104px !important;
  min-height: 104px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card {
  height: 104px !important;
  min-height: 104px !important;
  padding: 8px !important;
  grid-template-rows: 32px 14px 12px 22px !important;
  gap: 4px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card strong {
  min-height: 32px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card strong span {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 16px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery {
  min-height: 22px !important;
  gap: 3px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery > div {
  height: 11px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery i {
  height: 5px !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions {
  grid-template-rows: 24px 112px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-question-list {
  height: 112px !important;
  min-height: 112px !important;
  grid-template-rows: repeat(5, 20px) !important;
  gap: 3px !important;
}

html body[data-active-panel="landing"] .landing-hot-question {
  height: 20px !important;
  min-height: 20px !important;
  grid-template-rows: 20px !important;
}

html body[data-active-panel="landing"] .landing-question-more {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-copy {
  gap: 12px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-copy p {
  margin: 0 !important;
  line-height: 1.45 !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom .primary-btn {
  height: 32px !important;
  min-height: 32px !important;
  margin-top: 0 !important;
}

html body[data-active-panel="landing"] .landing-special-training {
  grid-template-rows: 24px 108px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-special-training-list {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-special-training-item {
  min-height: 108px !important;
  padding: 12px !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template:
      "welcome" auto
      "growth" 240px
      "briefing" 240px
      "recommendation" 320px
      "route" 240px
      "calendar" 240px
      "hardware" 180px
      "questions" 180px
      "coach" 180px
      "special" 180px
      / minmax(0, 1fr) !important;
  }
}

/* Homepage height fit v60: make the inside of each tier match its outer height. */
html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body[data-active-panel="landing"] .landing-route-card,
html body[data-active-panel="landing"] .landing-training-heatmap,
html body[data-active-panel="landing"] .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-coach-card-bottom,
html body[data-active-panel="landing"] .landing-special-training {
  padding: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth-head,
html body[data-active-panel="landing"] .landing-route-head,
html body[data-active-panel="landing"] .landing-hardware-head,
html body[data-active-panel="landing"] .landing-special-training-head,
html body[data-active-panel="landing"] .landing-heatmap-head,
html body[data-active-panel="landing"] .landing-coach-card-head {
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth {
  grid-template-rows: 24px 112px 24px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-list {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item {
  min-height: 112px !important;
  padding: 10px 10px 32px !important;
}

html body[data-active-panel="landing"] .landing-growth-score {
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center {
  display: grid !important;
  grid-template-rows: 28px 48px 6px 68px 24px !important;
  gap: 8px !important;
  padding: 16px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-head {
  height: 28px !important;
  min-height: 28px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage {
  min-height: 48px !important;
  height: 48px !important;
  padding: 8px 12px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress-track {
  height: 6px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
  height: 68px !important;
  min-height: 68px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, 30px) !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step {
  height: 30px !important;
  min-height: 30px !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  padding: 0 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-feedback {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-training-heatmap {
  grid-template-rows: 24px 64px 104px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-achievement-list div {
  min-height: 64px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip {
  min-height: 104px !important;
  grid-template-rows: 16px 48px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip-head {
  display: flex !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-special-training {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-hardware-chip-list {
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card {
  min-height: 108px !important;
  padding: 8px !important;
  grid-template-rows: 36px 14px 12px 24px !important;
  gap: 4px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card strong span {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  font-size: 18px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery {
  min-height: 24px !important;
  gap: 4px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery > div {
  height: 12px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery i {
  height: 5px !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions {
  grid-template-rows: 24px 116px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-question-list {
  height: 116px !important;
  min-height: 116px !important;
  grid-template-rows: repeat(5, 20px) !important;
  gap: 3px !important;
}

html body[data-active-panel="landing"] .landing-hot-question {
  height: 20px !important;
  min-height: 20px !important;
  grid-template-rows: 20px !important;
}

html body[data-active-panel="landing"] .landing-question-more {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-special-training-list {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-special-training-item {
  min-height: 108px !important;
  padding: 12px !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template:
      "welcome" auto
      "growth" 240px
      "briefing" 240px
      "recommendation" 320px
      "route" 240px
      "calendar" 240px
      "hardware" 180px
      "questions" 180px
      "coach" 180px
      "special" 180px
      / minmax(0, 1fr) !important;
  }
}

/* Homepage spacing v58: normalize the dashboard to an 8px grid system. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  padding: 24px 24px 40px !important;
  column-gap: 24px !important;
  row-gap: 40px !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card {
  border-radius: 20px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation {
  padding: 24px 32px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  left: 32px !important;
}

html body[data-active-panel="landing"] .landing-project-ability-state,
html body[data-active-panel="landing"] #landingRecommendationText,
html body[data-active-panel="landing"] .landing-recommendation-reason,
html body[data-active-panel="landing"] .landing-recommendation-meta,
html body[data-active-panel="landing"] .landing-primary-action.primary-btn {
  left: 32px !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason {
  gap: 8px !important;
  padding: 8px !important;
  width: 432px !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason div {
  gap: 8px !important;
  padding: 8px !important;
}

/* Recommendation diagnosis v77: make the first cell read like AI analysis, not a score card. */
html body[data-active-panel="landing"] .landing-recommendation-reason div:first-of-type {
  grid-column: span 1 !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason div:first-of-type em {
  display: -webkit-box !important;
  max-width: 100% !important;
  color: #101828 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-labels span[data-radar-label="project"] {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-recommendation-meta {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-primary-action.primary-btn {
  bottom: 16px !important;
  height: 40px !important;
  min-height: 40px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body[data-active-panel="landing"] .landing-xiaowen-briefing,
html body[data-active-panel="landing"] .landing-route-card,
html body[data-active-panel="landing"] .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-special-training,
html body[data-active-panel="landing"] .landing-coach-card-bottom {
  padding: 24px !important;
}

html body[data-active-panel="landing"] .landing-training-heatmap {
  padding: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy,
html body[data-active-panel="landing"] .landing-route-card,
html body[data-active-panel="landing"] .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-special-training,
html body[data-active-panel="landing"] .landing-coach-card-copy,
html body[data-active-panel="landing"] .landing-training-heatmap {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth-head,
html body[data-active-panel="landing"] .landing-xiaowen-briefing-head,
html body[data-active-panel="landing"] .landing-route-head,
html body[data-active-panel="landing"] .landing-hardware-head,
html body[data-active-panel="landing"] .landing-special-training-head,
html body[data-active-panel="landing"] .landing-heatmap-head,
html body[data-active-panel="landing"] .landing-coach-card-head {
  margin: 0 0 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth-list,
html body[data-active-panel="landing"] .landing-hardware-chip-list,
html body[data-active-panel="landing"] .landing-special-training-list {
  gap: 24px !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats,
html body[data-active-panel="landing"] .landing-achievement-list,
html body[data-active-panel="landing"] .landing-hero-radar-summary {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-question-list,
html body[data-active-panel="landing"] .landing-ai-timeline,
html body[data-active-panel="landing"] .landing-heatmap-strip,
html body[data-active-panel="landing"] .landing-heatmap-grid {
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-question-more,
html body[data-active-panel="landing"] .landing-coach-card-bottom .primary-btn {
  margin-top: 16px !important;
}

html body[data-active-panel="landing"] .landing-special-training-item,
html body[data-active-panel="landing"] .landing-weekly-growth-item,
html body[data-active-panel="landing"] .landing-hardware-card {
  padding: 16px !important;
}

html body[data-active-panel="landing"] .landing-special-training-item {
  column-gap: 16px !important;
  row-gap: 8px !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    padding: 24px 24px 40px !important;
    row-gap: 40px !important;
    column-gap: 24px !important;
  }
}

/* Homepage height system v59: large 320, medium 240, small 180. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template:
    "welcome welcome welcome" 96px
    "growth growth briefing" 240px
    "recommendation recommendation recommendation" 320px
    "route route calendar" 240px
    "hardware questions coach" 180px
    "special special special" 180px
    / minmax(0, 1.18fr) minmax(0, 0.86fr) minmax(300px, 0.74fr) !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation {
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body[data-active-panel="landing"] .landing-xiaowen-briefing,
html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-route-card.landing-ai-task-center {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-coach-card-bottom,
html body[data-active-panel="landing"] .landing-special-training,
html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center::before {
  height: 76px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-head {
  min-height: 32px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage {
  min-height: 58px !important;
  padding: 12px 16px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
  grid-template-rows: repeat(4, 1fr) !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step {
  min-height: 30px !important;
  padding: 0 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-list {
  align-items: stretch !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item {
  min-height: 112px !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
  min-height: 48px !important;
}

html body[data-active-panel="landing"] .landing-training-heatmap {
  grid-template-rows: 20px 56px 40px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-achievement-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-achievement-list div {
  min-height: 56px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip {
  min-height: 40px !important;
  grid-template-rows: 8px 8px !important;
}

html body[data-active-panel="landing"] .landing-special-training-list {
  align-items: stretch !important;
}

html body[data-active-panel="landing"] .landing-special-training-item {
  min-height: 100px !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template:
      "welcome" auto
      "growth" 240px
      "briefing" 240px
      "recommendation" 320px
      "route" 240px
      "calendar" 180px
      "hardware" 180px
      "questions" 180px
      "coach" 180px
      "special" 180px
      / minmax(0, 1fr) !important;
  }
}

/* Homepage height lock v61c: terminal override, do not place legacy rules after this. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template:
    "welcome welcome welcome" 96px
    "growth growth briefing" 240px
    "recommendation recommendation recommendation" 320px
    "route route calendar" 240px
    "hardware questions coach" 180px
    "special special special" 180px
    / minmax(0, 1.18fr) minmax(0, 0.86fr) minmax(300px, 0.74fr) !important;
  row-gap: 40px !important;
  column-gap: 24px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation {
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body[data-active-panel="landing"] .landing-xiaowen-briefing,
html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center,
html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-coach-card-bottom,
html body[data-active-panel="landing"] .landing-special-training {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  padding: 16px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center,
html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  padding: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth-head,
html body[data-active-panel="landing"] .landing-route-head,
html body[data-active-panel="landing"] .landing-hardware-head,
html body[data-active-panel="landing"] .landing-special-training-head,
html body[data-active-panel="landing"] .landing-heatmap-head,
html body[data-active-panel="landing"] .landing-coach-card-head {
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth {
  grid-template-rows: 24px 112px 24px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-list {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth .landing-weekly-growth-item {
  min-height: 112px !important;
  padding: 10px 10px 32px !important;
}

html body[data-active-panel="landing"] .landing-growth-score {
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center {
  display: grid !important;
  grid-template-rows: 28px 48px 6px 68px 24px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-head {
  height: 28px !important;
  min-height: 28px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage {
  height: 48px !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress-track {
  height: 6px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
  height: 68px !important;
  min-height: 68px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, 30px) !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step {
  height: 30px !important;
  min-height: 30px !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  padding: 0 8px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-feedback {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  grid-template-rows: 24px 64px 80px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-achievement-list div {
  min-height: 64px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip {
  min-height: 80px !important;
  grid-template-rows: 16px 32px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip-head {
  display: flex !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus {
  grid-template-rows: 24px 104px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-hardware-chip-list {
  height: 104px !important;
  min-height: 104px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card {
  height: 104px !important;
  min-height: 104px !important;
  padding: 8px !important;
  grid-template-rows: 32px 14px 12px 22px !important;
  gap: 4px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card strong {
  min-height: 32px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card strong span {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 16px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery {
  min-height: 22px !important;
  gap: 3px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery > div {
  height: 11px !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery i {
  height: 5px !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions {
  grid-template-rows: 24px 112px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-question-list {
  height: 112px !important;
  min-height: 112px !important;
  grid-template-rows: repeat(5, 20px) !important;
  gap: 3px !important;
}

html body[data-active-panel="landing"] .landing-hot-question {
  height: 20px !important;
  min-height: 20px !important;
  grid-template-rows: 20px !important;
}

html body[data-active-panel="landing"] .landing-question-more {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-copy,
html body[data-active-panel="landing"] .landing-coach-card-copy p {
  margin: 0 !important;
}

html body[data-active-panel="landing"] .landing-coach-card-copy {
  gap: 12px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-copy p {
  line-height: 1.45 !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom .primary-btn {
  height: 32px !important;
  min-height: 32px !important;
  margin-top: 0 !important;
}

html body[data-active-panel="landing"] .landing-special-training {
  grid-template-rows: 24px 108px !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-special-training-list {
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-special-training-item {
  min-height: 108px !important;
  padding: 12px !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template:
      "welcome" auto
      "growth" 240px
      "briefing" 240px
      "recommendation" 320px
      "route" 240px
      "calendar" 240px
      "hardware" 180px
      "questions" 180px
      "coach" 180px
      "special" 180px
      / minmax(0, 1fr) !important;
  }
}
/* EOF hardware height lock v63: must remain last. */
html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-chip-list {
  height: 104px !important;
  min-height: 104px !important;
  grid-template-rows: 104px !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-chip-list .landing-hardware-card {
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  padding: 8px !important;
  grid-template-rows: 32px 14px 12px 22px !important;
  gap: 4px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card strong {
  min-height: 32px !important;
  height: 32px !important;
  gap: 4px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card strong span {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 16px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-mastery {
  min-height: 22px !important;
  height: 22px !important;
  gap: 3px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-mastery > div {
  height: 11px !important;
  min-height: 11px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-mastery i {
  height: 5px !important;
  min-height: 5px !important;
}

/* EOF top action v64c: welcome bar keeps only Customize Home. */
html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel {
  grid-template-columns: minmax(0, 1fr) 164px !important;
  gap: 24px !important;
}

html body[data-active-panel="landing"] .landing-welcome-panel .landing-coach-suggestion,
html body[data-active-panel="landing"] .landing-welcome-panel .landing-welcome-briefing {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-welcome-panel .landing-customize-home {
  justify-self: end !important;
  width: 164px !important;
  min-width: 164px !important;
}

/* EOF dashboard module composer v71. */
.training-module-order-list,
.training-module-visibility-options {
  display: grid;
  gap: 10px;
}

.training-module-order-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 15px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
  cursor: grab;
  user-select: none;
}

.training-module-order-item.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
}

.training-module-grip {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(124, 77, 255, 0.1);
  color: #7c4dff;
  font-size: 14px;
  font-weight: 900;
}

.training-module-order-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 900;
}

.training-module-order-item > div {
  display: inline-flex;
  gap: 6px;
}

.training-module-order-item button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background: rgba(124, 77, 255, 0.1);
  color: #6d4dff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.training-module-order-item button:hover {
  background: rgba(124, 77, 255, 0.18);
}

.training-module-visibility-options {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.training-module-visibility-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.training-module-visibility-option input {
  width: 18px;
  height: 18px;
  accent-color: #7c4dff;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-areas: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: row dense !important;
  grid-auto-rows: auto !important;
  row-gap: 40px !important;
  column-gap: 24px !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > .section-card {
  grid-area: auto !important;
  grid-column: span 4 !important;
  order: 80;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-primary-recommendation,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-weekly-growth,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-route-card.landing-ai-task-center,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-hardware-questions,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-special-training,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-xiaowen-briefing,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] #landingAchievementCenter.section-card.landing-training-heatmap {
  grid-area: auto !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > .landing-welcome-panel {
  grid-column: 1 / -1 !important;
  order: 0 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="recommendation"] {
  grid-column: span 12 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="growth"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="special"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="briefing"] {
  grid-column: span 8 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="route"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="questions"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="achievement"] {
  grid-column: span 4 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-dashboard-optional {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.08));
  border: 1px solid rgba(124, 77, 255, 0.12);
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-dashboard-optional span,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-dashboard-optional em {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  font-style: normal;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-dashboard-optional strong {
  color: #4f46e5;
  font-size: 18px;
  font-weight: 950;
}

html body[data-active-panel="landing"][data-show-training-calendar="false"] .landing-heatmap-strip,
html body[data-active-panel="landing"][data-show-leaderboard="false"] #landingLeaderboardPanel,
html body[data-active-panel="landing"][data-show-achievement-wall="false"] #landingAchievementWallPanel {
  display: none !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] #landingAchievementCenter.section-card.landing-training-heatmap {
  max-height: none !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"][data-show-training-calendar="false"] #landingAchievementCenter.section-card.landing-training-heatmap {
  grid-template-rows: 24px minmax(64px, auto) !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"][data-show-leaderboard="true"] #landingAchievementCenter.section-card.landing-training-heatmap,
html body[data-active-panel="landing"][data-landing-module-layout="custom"][data-show-achievement-wall="true"] #landingAchievementCenter.section-card.landing-training-heatmap {
  height: auto !important;
  min-height: 240px !important;
  grid-template-rows: 24px minmax(64px, auto) auto auto !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > .section-card,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key] {
    grid-column: 1 / -1 !important;
  }
}

/* EOF dashboard drawer goal controls v70. */
.training-goal-options {
  display: grid;
  gap: 12px;
}

.training-goal-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.training-goal-option:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 77, 255, 0.28);
  box-shadow: 0 10px 24px rgba(124, 77, 255, 0.1);
}

.training-goal-option:has(input:checked) {
  border-color: rgba(124, 77, 255, 0.55);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.08));
  box-shadow: 0 12px 28px rgba(124, 77, 255, 0.16);
}

.training-goal-option input {
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  appearance: none;
  border: 2px solid rgba(148, 163, 184, 0.5);
  border-radius: 50%;
  background: #fff;
}

.training-goal-option input:checked {
  border-color: #7c4dff;
  background: #7c4dff;
}

.training-goal-option input:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}

/* Dashboard target board v75. */
html body[data-active-panel="landing"] .topbar {
  display: grid !important;
  grid-template-columns: minmax(140px, 1fr) minmax(360px, 600px) minmax(220px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 64px !important;
  padding: 12px 22px !important;
}

html.react-student-embedded body[data-active-panel="landing"] .topbar {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body[data-active-panel="landing"] .topbar-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 260px !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body[data-active-panel="landing"] .topbar-user-wrap {
  display: none !important;
}

html body[data-active-panel="landing"] .topbar .landing-customize-home {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 156px !important;
  min-width: 156px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

html body[data-active-panel="landing"] .landing-training-statusbar {
  grid-template-columns: minmax(180px, 1.35fr) repeat(3, minmax(112px, 1fr)) !important;
  align-items: center !important;
  width: min(100%, 760px) !important;
}

html body[data-active-panel="landing"] .landing-training-status:first-child {
  height: 56px !important;
  padding: 8px 14px !important;
  border-color: rgba(124, 77, 255, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 244, 255, 0.92)),
    linear-gradient(135deg, rgba(124, 77, 255, 0.16), rgba(91, 140, 255, 0.08)) !important;
}

html body[data-active-panel="landing"] .landing-training-status:first-child span {
  font-size: 12px !important;
}

html body[data-active-panel="landing"] .landing-training-status:first-child strong {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  margin-top: 2px !important;
  color: #6d4dff !important;
  font-size: 32px !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="landing"] .landing-training-status:first-child strong small {
  color: #6d4dff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.training-ability-target-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.training-ability-target-card {
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.training-ability-target-card span,
.training-ability-target-card em {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  font-style: normal;
}

.training-ability-target-card strong,
.training-ability-target-card input {
  color: #0f172a;
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.training-ability-target-card.is-current strong,
.training-ability-target-card.is-rounds strong {
  color: #6d4dff;
}

.training-ability-target-card input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  appearance: textfield;
}

.training-ability-target-card input::-webkit-outer-spin-button,
.training-ability-target-card input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.training-dashboard-actions {
  position: sticky;
  bottom: -18px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 0 2px;
  background: linear-gradient(180deg, rgba(245, 248, 252, 0), #f5f8fc 38%);
}

.training-dashboard-secondary-action,
.training-dashboard-primary-action {
  min-width: 118px;
  min-height: 44px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.training-dashboard-secondary-action {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #fff;
  color: #334155;
}

.training-dashboard-primary-action {
  border: 0;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  color: #fff;
  box-shadow: 0 14px 30px rgba(124, 77, 255, 0.22);
}

@media (max-width: 1180px) {
  .training-ability-target-board {
    grid-template-columns: 1fr;
  }
}

/* Recommendation ability panel v78. */
html body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
  right: 32px !important;
  top: 28px !important;
  bottom: 28px !important;
  width: clamp(340px, 34vw, 430px) !important;
  height: auto !important;
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(124, 77, 255, 0.1), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.9)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 24px 60px rgba(91, 140, 255, 0.12) !important;
}

html body[data-active-panel="landing"] .landing-hero-3d-img,
html body[data-active-panel="landing"] .landing-hero-status-strip,
html body[data-active-panel="landing"] .landing-hero-wireframe,
html body[data-active-panel="landing"] .landing-hero-orbit,
html body[data-active-panel="landing"] .landing-hero-stack,
html body[data-active-panel="landing"] .landing-hero-panel,
html body[data-active-panel="landing"] .landing-hero-chip {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-card {
  position: absolute !important;
  inset: 18px !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 16px 18px !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(112px, 1fr) auto auto !important;
  gap: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(14px) !important;
}

html body[data-active-panel="landing"] .landing-hero-metric-row {
  display: grid !important;
  grid-template-columns: 1.12fr 0.86fr 1fr !important;
  gap: 10px !important;
}

html body[data-active-panel="landing"] .landing-hero-metric-row div {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.98), rgba(255, 255, 255, 0.86)) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 77, 255, 0.08) !important;
}

html body[data-active-panel="landing"] .landing-hero-metric-row span {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hero-metric-row strong {
  color: #111827 !important;
  font-size: 21px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="landing"] .landing-hero-metric-row div:first-child strong {
  color: #7c4dff !important;
  font-size: 28px !important;
}

html body[data-active-panel="landing"] .landing-hero-metric-row div:nth-child(2) strong,
html body[data-active-panel="landing"] .landing-hero-metric-row div:nth-child(3) strong {
  color: #22c55e !important;
}

html body[data-active-panel="landing"] .landing-hero-divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.28), transparent) !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-title {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-wrap {
  height: 122px !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-svg {
  width: 118px !important;
  height: 118px !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-summary {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-summary span {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 9px 2px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
  color: #64748b !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-summary span:last-child {
  border-bottom: 0 !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-summary b {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] #landingHeroStrongItem {
  color: #7c4dff !important;
}

html body[data-active-panel="landing"] #landingHeroWeakItem {
  color: #ef4444 !important;
}

/* Homepage layout rescue v80: stable 12-column cockpit grid and no online capsule. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  display: grid !important;
  grid-template:
    "welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome" 112px
    "briefing briefing briefing briefing recommendation recommendation recommendation recommendation recommendation recommendation recommendation recommendation" 420px
    "growth growth growth growth growth growth growth growth growth growth growth growth" 240px
    "route route route route route route route calendar calendar calendar calendar calendar" 240px
    "hardware hardware hardware hardware hardware hardware hardware hardware hardware hardware hardware hardware" 180px
    "questions questions questions questions questions questions questions coach coach coach coach coach" 180px
    "special special special special special special special special special special special special" 180px
    / repeat(12, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  row-gap: 40px !important;
  column-gap: 24px !important;
  align-items: start !important;
  padding: 24px 24px 40px !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card {
  min-width: 0 !important;
  grid-column: auto !important;
}

html body[data-active-panel="landing"] .landing-welcome-panel {
  grid-area: welcome !important;
  order: 0 !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing {
  grid-area: briefing !important;
  order: 10 !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation {
  grid-area: recommendation !important;
  order: 20 !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth {
  grid-area: growth !important;
  order: 30 !important;
}

html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center {
  grid-area: route !important;
  order: 40 !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  grid-area: calendar !important;
  order: 50 !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus {
  grid-area: hardware !important;
  order: 60 !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions {
  grid-area: questions !important;
  order: 70 !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom {
  grid-area: coach !important;
  order: 80 !important;
}

html body[data-active-panel="landing"] .landing-special-training {
  grid-area: special !important;
  order: 90 !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation {
  position: relative !important;
  height: 420px !important;
  min-height: 420px !important;
  max-height: 420px !important;
  padding: 24px 32px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow {
  left: 32px !important;
  top: 32px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  left: 32px !important;
  top: 78px !important;
  margin-top: 0 !important;
  max-width: calc(100% - 520px) !important;
  font-size: 28px !important;
  line-height: 1.12 !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .landing-training-tag {
  left: min(430px, calc(100% - 500px)) !important;
  top: 82px !important;
}

html body[data-active-panel="landing"] .landing-project-ability-state {
  left: 32px !important;
  top: 126px !important;
}

html body[data-active-panel="landing"] #landingRecommendationText {
  left: 32px !important;
  top: 168px !important;
  width: clamp(420px, calc(100% - 560px), 560px) !important;
  max-width: 560px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason {
  left: 32px !important;
  top: 218px !important;
  width: clamp(460px, calc(100% - 560px), 560px) !important;
  min-height: 66px !important;
  grid-template-columns: 94px repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-recommendation-meta {
  left: 32px !important;
  bottom: 76px !important;
  width: clamp(460px, calc(100% - 560px), 560px) !important;
  gap: 10px !important;
}

html body[data-active-panel="landing"] .landing-recommendation-meta span {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

html body[data-active-panel="landing"] .landing-primary-action.primary-btn {
  left: 32px !important;
  bottom: 24px !important;
  width: 214px !important;
  height: 44px !important;
  min-height: 44px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
  right: 32px !important;
  top: 30px !important;
  bottom: 30px !important;
  width: clamp(330px, 31vw, 420px) !important;
  height: auto !important;
}

html body[data-active-panel="landing"] .landing-hero-capability-card {
  inset: 14px !important;
  padding: 14px 16px !important;
  gap: 8px !important;
  grid-template-rows: auto auto auto minmax(102px, 1fr) auto auto !important;
}

html body[data-active-panel="landing"] .landing-hero-metric-row {
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-hero-metric-row div {
  padding: 8px 9px !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-wrap {
  height: 108px !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-svg {
  width: 106px !important;
  height: 106px !important;
}

html body[data-active-panel="landing"] .landing-hero-radar-summary span {
  padding: 8px 2px !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body[data-active-panel="landing"] .landing-xiaowen-briefing,
html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center,
html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-coach-card-bottom,
html body[data-active-panel="landing"] .landing-special-training {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap {
  grid-template-rows: 24px 72px 56px !important;
  gap: 16px !important;
  padding: 16px !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter .landing-achievement-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter .landing-achievement-list div {
  min-height: 72px !important;
  padding: 10px 8px !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter .landing-achievement-list span {
  font-size: 10px !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter .landing-achievement-list strong {
  font-size: 20px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip {
  display: grid !important;
  grid-template-rows: 14px 10px !important;
  min-height: 56px !important;
}

html body[data-active-panel="landing"] .landing-heatmap-strip-head {
  display: flex !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions .landing-question-list {
  gap: 5px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom {
  padding: 18px 20px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-copy p {
  max-width: 100% !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

html body[data-active-panel="landing"] #aiDynamicStatus,
html body[data-active-panel="landing"] #companionMiniBubble,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini::before,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini::after {
  display: none !important;
  visibility: hidden !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini {
  width: 84px !important;
  min-width: 84px !important;
  height: 84px !important;
  min-height: 84px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini > * {
  display: none !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMiniCharacter {
  display: block !important;
  visibility: visible !important;
}

@media (max-width: 1380px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template:
      "welcome" auto
      "briefing" 240px
      "recommendation" 420px
      "growth" 240px
      "route" 240px
      "calendar" 240px
      "hardware" 180px
      "questions" 180px
      "coach" 180px
      "special" 180px
      / minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  html body[data-active-panel="landing"] .shell {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-active-panel="landing"] .shell.sidebar-expanded,
  html body[data-active-panel="landing"] .shell.sidebar-collapsed {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-active-panel="landing"] .sidebar {
    display: none !important;
  }

  html body[data-active-panel="landing"] .main {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body[data-active-panel="landing"] .topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  html body[data-active-panel="landing"] .topbar-left {
    display: none !important;
  }

  html body[data-active-panel="landing"] .topbar-center {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-active-panel="landing"] .topbar-search {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body[data-active-panel="landing"] .topbar-right {
    display: none !important;
  }

  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 14px 32px !important;
    row-gap: 24px !important;
  }

  html body[data-active-panel="landing"] .landing-home-grid > .section-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body[data-active-panel="landing"] .landing-primary-recommendation {
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    padding: 18px !important;
  }

  html body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
    display: none !important;
  }

  html body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow {
    left: 18px !important;
    top: 18px !important;
  }

  html body[data-active-panel="landing"] .landing-primary-recommendation h1 {
    left: 18px !important;
    top: 64px !important;
    max-width: calc(100% - 36px) !important;
    font-size: 23px !important;
  }

  html body[data-active-panel="landing"] .landing-primary-recommendation .landing-training-tag {
    left: 18px !important;
    top: 104px !important;
  }

  html body[data-active-panel="landing"] .landing-project-ability-state {
    left: 18px !important;
    top: 134px !important;
  }

  html body[data-active-panel="landing"] #landingRecommendationText {
    left: 18px !important;
    top: 172px !important;
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
    white-space: normal !important;
  }

  html body[data-active-panel="landing"] .landing-recommendation-reason {
    left: 18px !important;
    top: 226px !important;
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 96px !important;
  }

  html body[data-active-panel="landing"] .landing-recommendation-reason > span {
    grid-column: 1 / -1 !important;
    min-height: 32px !important;
  }

  html body[data-active-panel="landing"] .landing-recommendation-reason div:first-of-type {
    grid-column: 1 / -1 !important;
  }

  html body[data-active-panel="landing"] .landing-recommendation-meta {
    left: 18px !important;
    bottom: 70px !important;
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body[data-active-panel="landing"] .landing-recommendation-meta span {
    min-width: 0 !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  html body[data-active-panel="landing"] .landing-primary-action.primary-btn {
    left: 18px !important;
    bottom: 18px !important;
    width: calc(100% - 36px) !important;
  }

  html body[data-active-panel="landing"] .landing-weekly-growth,
  html body[data-active-panel="landing"] .landing-xiaowen-briefing,
  html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center,
  html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap,
  html body[data-active-panel="landing"] .landing-hardware-focus,
  html body[data-active-panel="landing"] .landing-hardware-questions,
  html body[data-active-panel="landing"] .landing-coach-card-bottom,
  html body[data-active-panel="landing"] .landing-special-training {
    min-width: 0 !important;
  }
}

/* Remove AI online capsule v81: keep only the Xiaowen avatar button. */
html body #aiDynamicStatus,
html body .ai-dynamic-status-pill {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body #companionDock.companion-dock.companion-collapsed {
  width: 84px !important;
  max-width: 84px !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini {
  position: relative !important;
  width: 84px !important;
  min-width: 84px !important;
  height: 84px !important;
  min-height: 84px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  animation: none !important;
  transform: none !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini::before,
html body #companionDock.companion-dock.companion-collapsed #companionMini::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  pointer-events: none !important;
}

html body #companionDock.companion-dock.companion-collapsed .companion-mini-bubble,
html body #companionDock.companion-dock.companion-collapsed .companion-mini-badge,
html body #companionDock.companion-dock.companion-collapsed .companion-drag-handle,
html body #companionDock.companion-dock.companion-collapsed #companionMiniAvatar,
html body #companionDock.companion-dock.companion-collapsed #companionMiniName,
html body #companionDock.companion-dock.companion-collapsed #companionMiniState,
html body #companionDock.companion-dock.companion-collapsed #companionMiniText {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini > span {
  display: none !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage {
  position: relative !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 82px !important;
  min-width: 82px !important;
  height: 82px !important;
  min-height: 82px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  box-shadow:
    0 0 0 3px rgba(124, 77, 255, 0.28),
    0 12px 28px rgba(79, 70, 229, 0.2) !important;
  pointer-events: none !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMiniCharacter {
  position: absolute !important;
  left: 50% !important;
  top: 66% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 126% !important;
  height: 126% !important;
  object-fit: cover !important;
  object-position: center 26% !important;
  transform: translate(-50%, -50%) !important;
}

/* Decision flow v82: AI decision center leads directly into today's training. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template:
    "welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome" 112px
    "briefing briefing briefing briefing briefing briefing briefing briefing briefing briefing briefing briefing" 180px
    "recommendation recommendation recommendation recommendation recommendation recommendation recommendation recommendation recommendation recommendation recommendation recommendation" 420px
    "growth growth growth growth growth growth growth growth growth growth growth growth" 240px
    "route route route route route route route calendar calendar calendar calendar calendar" 240px
    "hardware hardware hardware hardware hardware hardware hardware hardware hardware hardware hardware hardware" 180px
    "questions questions questions questions questions questions questions coach coach coach coach coach" 180px
    "special special special special special special special special special special special special" 180px
    / repeat(12, minmax(0, 1fr)) !important;
  row-gap: 32px !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing {
  grid-area: briefing !important;
  order: 10 !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  padding: 22px 28px !important;
  overflow: hidden !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  background:
    radial-gradient(circle at 94% 14%, rgba(124, 77, 255, 0.1), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94)) !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  border-radius: 20px 0 0 20px !important;
  background: linear-gradient(180deg, #7c4dff, #5b8cff) !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy {
  position: relative !important;
  z-index: 1 !important;
  height: 100% !important;
  display: grid !important;
  grid-template:
    "head stats" auto
    "text stats" auto
    "advice stats" 1fr
    / minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 12px 24px !important;
  align-items: center !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-head {
  grid-area: head !important;
  min-width: 0 !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-head span {
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 1000 !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-head strong {
  color: #7c4dff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] #landingXiaowenBriefingText {
  grid-area: text !important;
  margin: 0 !important;
  max-width: 100% !important;
  color: #334155 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.48 !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
  grid-area: advice !important;
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-advice br {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-advice strong {
  color: #5b46ff !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
  grid-area: stats !important;
  align-self: stretch !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 14px 12px !important;
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats span {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats strong {
  color: #5b46ff !important;
  font-size: 24px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation {
  grid-area: recommendation !important;
  order: 20 !important;
}

@media (max-width: 1380px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template:
      "welcome" auto
      "briefing" 190px
      "recommendation" 420px
      "growth" 240px
      "route" 240px
      "calendar" 240px
      "hardware" 180px
      "questions" 180px
      "coach" 180px
      "special" 180px
      / minmax(0, 1fr) !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }
}

@media (max-width: 900px) {
  html body[data-active-panel="landing"] .landing-xiaowen-briefing {
    height: auto !important;
    min-height: 220px !important;
    max-height: none !important;
    padding: 18px !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy {
    grid-template:
      "head" auto
      "text" auto
      "advice" auto
      "stats" auto
      / minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Custom homepage placement lock v83: prevent old custom spans from breaking the decision flow. */
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > .section-card,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > [data-home-module-key] {
  grid-column: auto !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-welcome-panel {
  grid-area: welcome !important;
  grid-column: 1 / -1 !important;
  order: 0 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="briefing"] {
  grid-area: briefing !important;
  grid-column: 1 / -1 !important;
  order: 10 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="recommendation"] {
  grid-area: recommendation !important;
  grid-column: 1 / -1 !important;
  order: 20 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="growth"] {
  grid-area: growth !important;
  grid-column: 1 / -1 !important;
  order: 30 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="route"] {
  grid-area: route !important;
  grid-column: auto !important;
  order: 40 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="achievement"] {
  grid-area: calendar !important;
  grid-column: auto !important;
  order: 50 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="hardware"] {
  grid-area: hardware !important;
  grid-column: 1 / -1 !important;
  order: 60 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="questions"] {
  grid-area: questions !important;
  grid-column: auto !important;
  order: 70 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="coach"] {
  grid-area: coach !important;
  grid-column: auto !important;
  order: 80 !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="special"] {
  grid-area: special !important;
  grid-column: 1 / -1 !important;
  order: 90 !important;
}

/* Container placement lock v87: 20-column cockpit grid enables 55/45 question-coach split. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-areas: none !important;
  grid-template-rows: 112px 180px 420px 240px 240px 180px 180px 180px !important;
  grid-template-columns: repeat(20, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  row-gap: 32px !important;
  column-gap: 24px !important;
}

@media (max-width: 1380px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-areas: none !important;
    grid-template-rows: auto 190px 420px 240px 240px 240px 180px 180px 180px 180px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Grid item placement lock v88: route/achievement 60/40, questions/next-step 55/45. */
html body[data-active-panel="landing"] .landing-home-grid > .section-card,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > .section-card,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > [data-home-module-key] {
  grid-area: auto !important;
}

html body[data-active-panel="landing"] .landing-welcome-panel,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-welcome-panel {
  grid-row: 1 / 2 !important;
  grid-column: 1 / -1 !important;
  order: 0 !important;
}

html body[data-active-panel="landing"] [data-home-module-key="briefing"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="briefing"] {
  grid-row: 2 / 3 !important;
  grid-column: 1 / -1 !important;
  order: 10 !important;
}

html body[data-active-panel="landing"] [data-home-module-key="recommendation"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="recommendation"] {
  grid-row: 3 / 4 !important;
  grid-column: 1 / -1 !important;
  order: 20 !important;
}

html body[data-active-panel="landing"] [data-home-module-key="growth"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="growth"] {
  grid-row: 4 / 5 !important;
  grid-column: 1 / -1 !important;
  order: 30 !important;
}

html body[data-active-panel="landing"] [data-home-module-key="route"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="route"] {
  grid-row: 5 / 6 !important;
  grid-column: 1 / 13 !important;
  order: 40 !important;
}

html body[data-active-panel="landing"] [data-home-module-key="achievement"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="achievement"] {
  grid-row: 5 / 6 !important;
  grid-column: 13 / -1 !important;
  order: 50 !important;
}

html body[data-active-panel="landing"] [data-home-module-key="hardware"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="hardware"] {
  grid-row: 6 / 7 !important;
  grid-column: 1 / -1 !important;
  order: 60 !important;
}

html body[data-active-panel="landing"] [data-home-module-key="questions"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="questions"] {
  grid-row: 7 / 8 !important;
  grid-column: 1 / 12 !important;
  order: 70 !important;
}

html body[data-active-panel="landing"] [data-home-module-key="coach"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="coach"] {
  grid-row: 7 / 8 !important;
  grid-column: 12 / -1 !important;
  order: 80 !important;
}

html body[data-active-panel="landing"] [data-home-module-key="special"],
html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="special"] {
  grid-row: 8 / 9 !important;
  grid-column: 1 / -1 !important;
  order: 90 !important;
}

@media (max-width: 1380px) {
  html body[data-active-panel="landing"] [data-home-module-key="route"],
  html body[data-active-panel="landing"] [data-home-module-key="achievement"],
  html body[data-active-panel="landing"] [data-home-module-key="questions"],
  html body[data-active-panel="landing"] [data-home-module-key="coach"],
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="route"],
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="achievement"],
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="questions"],
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="coach"] {
    grid-column: 1 / -1 !important;
  }

  html body[data-active-panel="landing"] [data-home-module-key="achievement"],
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="achievement"] {
    grid-row: 6 / 7 !important;
  }

  html body[data-active-panel="landing"] [data-home-module-key="hardware"],
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="hardware"] {
    grid-row: 7 / 8 !important;
  }

  html body[data-active-panel="landing"] [data-home-module-key="questions"],
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="questions"] {
    grid-row: 8 / 9 !important;
  }

  html body[data-active-panel="landing"] [data-home-module-key="coach"],
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="coach"] {
    grid-row: 9 / 10 !important;
  }

  html body[data-active-panel="landing"] [data-home-module-key="special"],
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] [data-home-module-key="special"] {
    grid-row: 10 / 11 !important;
  }
}

/* Recommendation compact lock v90: keep today's primary training card at 420px with tighter horizontal rhythm. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-rows: 112px 180px 420px 240px 240px 180px 180px 180px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-primary-recommendation {
  height: 420px !important;
  min-height: 420px !important;
  max-height: 420px !important;
  padding: 22px 28px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .eyebrow {
  left: 28px !important;
  top: 24px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation h1 {
  left: 28px !important;
  top: 64px !important;
  max-width: calc(100% - 500px) !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .landing-training-tag {
  left: min(414px, calc(100% - 488px)) !important;
  top: 67px !important;
}

html body[data-active-panel="landing"] .landing-project-ability-state {
  left: 28px !important;
  top: 108px !important;
}

html body[data-active-panel="landing"] #landingRecommendationText {
  left: 28px !important;
  top: 144px !important;
  width: clamp(500px, calc(100% - 520px), 660px) !important;
  max-width: 660px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason {
  left: 28px !important;
  top: 184px !important;
  width: clamp(520px, calc(100% - 520px), 660px) !important;
  min-height: 68px !important;
  grid-template-columns: 90px repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 8px !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason > span {
  min-height: 48px !important;
}

html body[data-active-panel="landing"] .landing-recommendation-reason div {
  min-height: 48px !important;
  padding: 6px 8px !important;
}

html body[data-active-panel="landing"] .landing-recommendation-meta {
  left: 28px !important;
  bottom: 70px !important;
  width: clamp(520px, calc(100% - 520px), 660px) !important;
  gap: 9px !important;
}

html body[data-active-panel="landing"] .landing-recommendation-meta span {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

html body[data-active-panel="landing"] .landing-primary-action.primary-btn {
  left: 28px !important;
  bottom: 22px !important;
  width: 206px !important;
  height: 42px !important;
  min-height: 42px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
  top: 24px !important;
  right: 28px !important;
  bottom: 24px !important;
  width: clamp(380px, 34vw, 450px) !important;
  height: auto !important;
  min-height: 0 !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .landing-hero-capability-card {
  inset: 12px !important;
  gap: 7px !important;
  padding: 12px 14px !important;
  grid-template-rows: auto auto auto minmax(96px, 1fr) auto auto !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .landing-hero-radar-wrap {
  height: 102px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .landing-hero-radar-svg {
  width: 104px !important;
  height: 104px !important;
}

@media (max-width: 1380px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: auto 190px 420px 240px 240px 240px 180px 180px 180px 180px !important;
  }
}

/* Overlap cleanup lock v91: remove duplicated embedded chrome and let mid-width cards breathe. */
html body[data-active-panel="landing"] .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: minmax(110px, 180px) minmax(360px, 640px) minmax(180px, 1fr) !important;
  gap: 16px !important;
  min-height: 64px !important;
  padding: 10px 22px !important;
  align-items: center !important;
}

html body[data-active-panel="landing"] .topbar-user-wrap {
  display: none !important;
}

html.react-student-embedded body[data-active-panel="landing"] .topbar {
  display: block !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html.react-student-embedded body[data-active-panel="landing"] .topbar-left,
html.react-student-embedded body[data-active-panel="landing"] .topbar-center {
  display: none !important;
}

html.react-student-embedded body[data-active-panel="landing"] .topbar-right {
  position: absolute !important;
  top: 12px !important;
  right: 22px !important;
  z-index: 40 !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

html.react-student-embedded body[data-active-panel="landing"] .topbar .landing-customize-home {
  width: 148px !important;
  min-width: 148px !important;
  height: 40px !important;
  min-height: 40px !important;
}

@media (min-width: 901px) and (max-width: 1380px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-areas: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    row-gap: 24px !important;
    padding: 24px !important;
  }

  html body[data-active-panel="landing"] .landing-home-grid > .section-card,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > .section-card {
    grid-column: 1 / -1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body[data-active-panel="landing"] .landing-welcome-panel {
    min-height: 112px !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing {
    min-height: 218px !important;
    padding: 24px !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy {
    display: grid !important;
    grid-template:
      "head stats" auto
      "text stats" auto
      "advice stats" 1fr
      / minmax(0, 1fr) 300px !important;
    gap: 14px 24px !important;
    min-height: 168px !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-head {
    grid-area: head !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy > p:not(.landing-xiaowen-briefing-advice) {
    grid-area: text !important;
    margin: 0 !important;
    max-width: none !important;
    white-space: normal !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-advice {
    grid-area: advice !important;
    margin: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-advice strong {
    display: inline !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
    position: static !important;
    grid-area: stats !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-self: stretch !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div {
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
  }

  html body[data-active-panel="landing"] .landing-primary-recommendation {
    min-height: 420px !important;
    overflow: hidden !important;
  }

  html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center {
    min-height: 310px !important;
    padding: 22px 24px !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-ai-step {
    min-height: 70px !important;
    padding: 10px !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-feedback {
    display: none !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar {
    position: static !important;
    width: 100% !important;
    min-height: 32px !important;
    margin-top: 12px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar > span:not(.landing-ai-status-dot) {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-active-panel="landing"] .landing-hardware-focus {
    min-height: 236px !important;
    padding: 20px 24px !important;
  }

  html body[data-active-panel="landing"] .landing-hardware-chip-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body[data-active-panel="landing"] .landing-hardware-card {
    min-height: 168px !important;
    padding: 14px 10px !important;
    display: grid !important;
    grid-template-rows: auto auto auto 1fr !important;
    align-items: start !important;
    justify-items: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  html body[data-active-panel="landing"] .landing-hardware-card strong {
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  html body[data-active-panel="landing"] .landing-hardware-card strong span {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }

  html body[data-active-panel="landing"] .landing-hardware-card em,
  html body[data-active-panel="landing"] .landing-hardware-card small {
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  html body[data-active-panel="landing"] .landing-hardware-mastery {
    position: static !important;
    width: 100% !important;
    margin-top: auto !important;
  }
}

@media (max-width: 900px) {
  html body[data-active-panel="landing"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 10px 14px !important;
  }

  html body[data-active-panel="landing"] .topbar-left {
    display: none !important;
  }

  html body[data-active-panel="landing"] .topbar-right {
    display: flex !important;
    min-width: 0 !important;
  }

  html body[data-active-panel="landing"] .topbar .landing-customize-home {
    width: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy {
    grid-template:
      "head" auto
      "text" auto
      "advice" auto
      "stats" auto
      / minmax(0, 1fr) !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats {
    position: static !important;
  }

  html body[data-active-panel="landing"] .landing-hardware-chip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Landing overlap guard v92: keep route labels, next-step badges, and the coach dock out of content. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  padding-bottom: 156px !important;
}

html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-route-card.landing-ai-task-center {
  position: relative !important;
  display: block !important;
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-route-card.landing-ai-task-center::before {
  display: block !important;
  inset: 68px 22px auto 22px !important;
  height: 78px !important;
  border-radius: 18px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-head {
  position: absolute !important;
  top: 18px !important;
  left: 24px !important;
  right: 24px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  z-index: 7 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-title {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-title span {
  color: #0f172a !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-title strong {
  height: 26px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  line-height: 26px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress {
  position: absolute !important;
  top: 68px !important;
  right: 24px !important;
  width: 98px !important;
  height: 78px !important;
  min-height: 78px !important;
  z-index: 7 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress strong {
  font-size: 28px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage {
  position: absolute !important;
  top: 68px !important;
  left: 24px !important;
  right: 136px !important;
  width: auto !important;
  height: 78px !important;
  min-height: 78px !important;
  padding: 13px 16px !important;
  z-index: 7 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage::after {
  top: 14px !important;
  right: 14px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage strong {
  font-size: 22px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-progress-track {
  position: absolute !important;
  top: 157px !important;
  left: 24px !important;
  right: 24px !important;
  height: 7px !important;
  z-index: 7 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
  position: absolute !important;
  top: 176px !important;
  left: 24px !important;
  right: 24px !important;
  height: 50px !important;
  min-height: 50px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  gap: 10px !important;
  z-index: 7 !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step {
  height: 50px !important;
  min-height: 50px !important;
  padding: 8px 10px !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-index {
  width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
  line-height: 20px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-title {
  display: grid !important;
  gap: 5px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-title strong,
html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-state {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-status-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom {
  padding: 22px 28px !important;
  display: grid !important;
  align-content: center !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-coach-card-copy {
  max-width: 560px !important;
  display: grid !important;
  gap: 14px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-head {
  justify-content: flex-start !important;
  gap: 10px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-head strong {
  display: none !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed,
html body[data-active-panel="landing"] #companionDock.companion-dock:not(.companion-expanded) {
  position: fixed !important;
  right: 28px !important;
  bottom: 28px !important;
  width: 76px !important;
  max-width: 76px !important;
  height: 76px !important;
  z-index: 34 !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini {
  width: 76px !important;
  min-width: 76px !important;
  height: 76px !important;
  min-height: 76px !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini::before,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini::after,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed .companion-mini-state,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed .companion-mini-bubble,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed .companion-mini-badge,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMiniName,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMiniText {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage {
  width: 74px !important;
  min-width: 74px !important;
  height: 74px !important;
  min-height: 74px !important;
}

@media (max-width: 900px) {
  html body[data-active-panel="landing"] .landing-route-card .landing-ai-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    height: 72px !important;
    top: 166px !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-ai-step {
    height: 34px !important;
    min-height: 34px !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-route-progress {
    display: none !important;
  }

  html body[data-active-panel="landing"] .landing-route-card .landing-route-stage {
    right: 18px !important;
  }
}

/* Hardware direction card guard v93: split icon, title, status, detail, and mastery into fixed rows. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-rows: 112px 180px 420px 240px 240px 220px 180px 180px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-hardware-focus {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  padding: 18px 24px !important;
  display: grid !important;
  grid-template-rows: 26px 142px !important;
  gap: 18px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-head {
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
}

html body[data-active-panel="landing"] .landing-hardware-chip-list {
  height: 142px !important;
  min-height: 142px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-hardware-card {
  height: 142px !important;
  min-height: 142px !important;
  max-height: 142px !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  display: grid !important;
  grid-template-rows: 44px 20px 16px 34px !important;
  gap: 6px !important;
  align-items: start !important;
  justify-items: stretch !important;
  text-align: center !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-card strong {
  min-width: 0 !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-rows: 24px 16px !important;
  gap: 4px !important;
  align-items: center !important;
  justify-items: center !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hardware-card strong span {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-hardware-card strong b {
  display: block !important;
  max-width: 100% !important;
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 16px !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hardware-card em,
html body[data-active-panel="landing"] .landing-hardware-card small {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hardware-card em {
  height: 20px !important;
  color: #172033 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

html body[data-active-panel="landing"] .landing-hardware-card small {
  height: 16px !important;
  color: #7b89a3 !important;
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 850 !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery {
  position: static !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  grid-template-rows: 15px 7px !important;
  gap: 7px !important;
  align-self: end !important;
  margin: 0 !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery > div {
  height: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery > div span {
  color: #7b89a3 !important;
  font-size: 10px !important;
  line-height: 15px !important;
  font-weight: 850 !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery b {
  font-size: 13px !important;
  line-height: 15px !important;
  font-weight: 1000 !important;
}

html body[data-active-panel="landing"] .landing-hardware-mastery i {
  width: 100% !important;
  height: 7px !important;
  min-height: 7px !important;
  display: block !important;
  border-radius: 999px !important;
}

@media (max-width: 1380px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: auto 190px 420px 240px 240px 240px 220px 180px 180px 180px !important;
  }
}

@media (max-width: 900px) {
  html body[data-active-panel="landing"] .landing-hardware-focus {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: 26px auto !important;
    overflow: visible !important;
  }

  html body[data-active-panel="landing"] .landing-hardware-chip-list {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Landing companion cleanup v94: remove the extra floating Xiaowen avatar from the homepage. */
html body[data-active-panel="landing"] #companionDock.companion-dock,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-expanded,
html body[data-active-panel="landing"] #companionMini,
html body[data-active-panel="landing"] #companionMiniAvatarStage,
html body[data-active-panel="landing"] #companionMiniCharacter,
html body[data-active-panel="landing"] #companionAmbientStage {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Custom home topbar lock v95: keep the customize button parallel with the knowledge search. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 220px) minmax(420px, 660px) minmax(168px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 64px !important;
  padding: 8px 22px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-center {
  grid-column: 2 !important;
  display: flex !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 660px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-right {
  position: static !important;
  grid-column: 3 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-width: 156px !important;
  height: auto !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar .landing-customize-home {
  position: static !important;
  width: 148px !important;
  min-width: 148px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel .landing-customize-home {
  display: none !important;
}

html.react-student-embedded body.react-student-embedded[data-active-panel="landing"] .topbar,
html.react-student-embedded body.react-student-embedded[data-active-panel="landing"] .topbar-left,
html.react-student-embedded body.react-student-embedded[data-active-panel="landing"] .topbar-center,
html.react-student-embedded body.react-student-embedded[data-active-panel="landing"] .topbar-right {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Knowledge search submit v96: reveal a real search button after input. */
html body[data-active-panel="landing"] .topbar-search {
  display: flex !important;
  align-items: center !important;
}

html body[data-active-panel="landing"] .topbar-search input {
  padding-right: 98px !important;
}

html body[data-active-panel="landing"] .topbar-search-submit {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  z-index: 3 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c4dff, #5b8cff) !important;
  box-shadow: 0 10px 22px rgba(91, 140, 255, 0.24) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  transform: translateY(-50%) translateX(4px) scale(0.92) !important;
  pointer-events: none !important;
  transition:
    width 180ms ease,
    padding 180ms ease,
    opacity 160ms ease,
    transform 160ms ease !important;
}

html body[data-active-panel="landing"] .topbar-search.has-search-value .topbar-search-submit {
  width: 72px !important;
  padding: 0 12px !important;
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) scale(1) !important;
  pointer-events: auto !important;
}

html body[data-active-panel="landing"] .topbar-search-submit span {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  color: inherit !important;
  font-size: 12px !important;
}

html body[data-active-panel="landing"] .topbar-search-submit:disabled {
  cursor: default !important;
}

/* Landing spacing compact v97: tighten the rhythm between homepage modules. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  row-gap: 16px !important;
  column-gap: 20px !important;
  padding-top: 14px !important;
  padding-right: 20px !important;
  padding-left: 20px !important;
  padding-bottom: 96px !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > .section-card,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > [data-home-module-key] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (min-width: 901px) and (max-width: 1380px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    row-gap: 14px !important;
    padding: 14px 18px 92px !important;
  }
}

@media (max-width: 900px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    row-gap: 14px !important;
    padding: 12px 12px 88px !important;
  }
}

/* Hot questions more link v99: keep the full question list and bottom action visible. */
html body[data-active-panel="landing"] .landing-hardware-questions {
  display: grid !important;
  grid-template-rows: 22px 102px 18px !important;
  gap: 6px !important;
  padding: 14px 20px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions .landing-hardware-head {
  min-height: 22px !important;
  margin: 0 !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions .landing-question-list {
  height: 102px !important;
  min-height: 102px !important;
  display: grid !important;
  grid-template-rows: repeat(5, 18px) !important;
  gap: 3px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions .landing-hot-question {
  height: 18px !important;
  min-height: 18px !important;
  grid-template-columns: 16px minmax(0, 1fr) auto 62px 58px !important;
  grid-template-rows: 18px !important;
  gap: 6px !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions .landing-hot-question strong {
  font-size: 11px !important;
  line-height: 18px !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions .landing-hot-question span,
html body[data-active-panel="landing"] .landing-hardware-questions .landing-hot-question small,
html body[data-active-panel="landing"] .landing-hardware-questions .landing-hot-question em,
html body[data-active-panel="landing"] .landing-hardware-questions .landing-hot-question .landing-hot-question-action {
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions .landing-hot-question .landing-hot-question-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 999px !important;
  color: #6d4cff !important;
  background: rgba(124, 77, 255, 0.1) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hardware-questions .landing-question-more {
  grid-row: 3 !important;
  justify-self: start !important;
  align-self: end !important;
  width: max-content !important;
  height: 18px !important;
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #7c4dff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 18px !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Special training icons v98: replace blank placeholders with visible specialty badges. */
html body[data-active-panel="landing"] .landing-special-training-item {
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
}

html body[data-active-panel="landing"] .landing-special-training-item::before {
  content: none !important;
  display: none !important;
}

html body[data-active-panel="landing"] .landing-special-training-item > .landing-special-training-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  color: #7c4dff !important;
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.24) 42%, transparent 68%),
    linear-gradient(135deg, rgba(124, 77, 255, 0.2), rgba(91, 140, 255, 0.16)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(124, 77, 255, 0.16),
    0 9px 18px rgba(91, 140, 255, 0.16) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  align-self: center !important;
  justify-self: center !important;
  place-items: center !important;
  color: #7c4dff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-special-training-item > strong {
  grid-column: 2 / 4 !important;
  grid-row: 1 !important;
}

html body[data-active-panel="landing"] .landing-special-training-item > .landing-special-training-reason {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  display: block !important;
  min-width: 0 !important;
  color: #8a97ad !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-reason {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  display: block !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-special-training-item[data-special-key*="can"] > .landing-special-training-icon {
  color: #2563eb !important;
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.24) 42%, transparent 68%),
    linear-gradient(135deg, rgba(91, 140, 255, 0.22), rgba(6, 182, 212, 0.14)) !important;
}

html body[data-active-panel="landing"] .landing-special-training-item[data-special-key*="i2c"] > .landing-special-training-icon,
html body[data-active-panel="landing"] .landing-special-training-item[data-special-key*="linux"] > .landing-special-training-icon {
  color: #06a6c9 !important;
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.24) 42%, transparent 68%),
    linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(91, 140, 255, 0.14)) !important;
}

html body[data-active-panel="landing"] .landing-special-training-item[data-special-key*="ripple"] > .landing-special-training-icon,
html body[data-active-panel="landing"] .landing-special-training-item[data-special-key*="loop"] > .landing-special-training-icon {
  color: #f97316 !important;
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.24) 42%, transparent 68%),
    linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(245, 158, 11, 0.12)) !important;
}

html body[data-active-panel="landing"] .landing-special-training-item[data-target="interview"] > .landing-special-training-icon,
html body[data-active-panel="landing"] .landing-special-training-item[data-target="audio"] > .landing-special-training-icon,
html body[data-active-panel="landing"] .landing-special-training-item[data-target="resume"] > .landing-special-training-icon,
html body[data-active-panel="landing"] .landing-special-training-item[data-special-key*="goal"] > .landing-special-training-icon {
  color: #7c4dff !important;
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.28) 42%, transparent 68%),
    linear-gradient(135deg, rgba(124, 77, 255, 0.2), rgba(236, 72, 153, 0.12)) !important;
}

/* Hardware direction stack v100: prevent title/status/detail overlap inside direction cards. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-rows: 112px 180px 420px 240px 240px 232px 180px 180px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-hardware-focus {
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
  grid-template-rows: 26px 156px !important;
  gap: 16px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-chip-list {
  height: 156px !important;
  min-height: 156px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-card {
  height: 156px !important;
  min-height: 156px !important;
  max-height: 156px !important;
  display: grid !important;
  grid-template-rows: 48px 18px 16px 30px !important;
  gap: 6px !important;
  align-items: start !important;
  justify-items: stretch !important;
  padding: 10px 12px !important;
  text-align: center !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-card > strong {
  grid-row: 1 !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: grid !important;
  grid-template-rows: 26px 18px !important;
  gap: 4px !important;
  align-items: center !important;
  justify-items: center !important;
  margin: 0 !important;
  overflow: hidden !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-hardware-card > strong span {
  grid-row: 1 !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-hardware-card > strong b {
  grid-row: 2 !important;
  display: block !important;
  max-width: 100% !important;
  height: 18px !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 18px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hardware-card > em {
  grid-row: 2 !important;
  display: block !important;
  height: 18px !important;
  margin: 0 !important;
  color: #172033 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 18px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hardware-card > small {
  grid-row: 3 !important;
  display: block !important;
  height: 16px !important;
  margin: 0 !important;
  color: #7b89a3 !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 16px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hardware-card > .landing-hardware-mastery {
  grid-row: 4 !important;
  align-self: end !important;
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  display: grid !important;
  grid-template-rows: 14px 6px !important;
  gap: 6px !important;
  margin: 0 !important;
}

html body[data-active-panel="landing"] .landing-hardware-card > .landing-hardware-mastery > div {
  height: 14px !important;
  min-height: 14px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card > .landing-hardware-mastery > div span,
html body[data-active-panel="landing"] .landing-hardware-card > .landing-hardware-mastery b {
  line-height: 14px !important;
}

html body[data-active-panel="landing"] .landing-hardware-card > .landing-hardware-mastery i {
  height: 6px !important;
  min-height: 6px !important;
}

@media (max-width: 1380px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: auto 190px 420px 240px 240px 240px 232px 180px 180px 180px !important;
  }
}

@media (max-width: 900px) {
  html body[data-active-panel="landing"] .landing-hardware-focus {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: 26px auto !important;
    overflow: visible !important;
  }

  html body[data-active-panel="landing"] .landing-hardware-chip-list {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }
}

/* Briefing to recommendation gap v101: keep AI decision center from colliding with today's training. */
@media (min-width: 901px) and (max-width: 1380px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: auto 248px 420px 240px 240px 240px 232px 180px 180px 180px !important;
    row-gap: 24px !important;
  }

  html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-xiaowen-briefing,
  html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-xiaowen-briefing,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > .section-card.landing-xiaowen-briefing,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-xiaowen-briefing {
    height: 248px !important;
    min-height: 248px !important;
    max-height: 248px !important;
    padding: 22px 24px !important;
    overflow: hidden !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy,
  html body:has(.landing-workspace.active) .landing-xiaowen-briefing-copy {
    height: 100% !important;
    min-height: 0 !important;
    grid-template:
      "head stats" 28px
      "text stats" minmax(42px, auto)
      "advice stats" minmax(42px, 1fr)
      / minmax(0, 1fr) 300px !important;
    gap: 12px 24px !important;
    align-items: stretch !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats,
  html body:has(.landing-workspace.active) .landing-xiaowen-briefing-stats {
    height: 100% !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-self: stretch !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats div,
  html body:has(.landing-workspace.active) .landing-xiaowen-briefing-stats div {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    gap: 4px !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats span,
  html body:has(.landing-workspace.active) .landing-xiaowen-briefing-stats span {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-stats strong,
  html body:has(.landing-workspace.active) .landing-xiaowen-briefing-stats strong {
    font-size: 20px !important;
    line-height: 1 !important;
  }
}

/* Welcome status breathing v102: give the four top training metrics more room. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-rows: 128px 180px 420px 240px 240px 232px 180px 180px !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-welcome-panel,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > .section-card.landing-welcome-panel,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-welcome-panel {
  height: 128px !important;
  min-height: 128px !important;
  max-height: 128px !important;
  padding: 12px 0 14px 2px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-welcome-copy,
html body:has(.landing-workspace.active) .landing-welcome-copy {
  gap: 12px !important;
}

html body[data-active-panel="landing"] .landing-training-statusbar,
html body:has(.landing-workspace.active) .landing-training-statusbar {
  width: min(100%, 900px) !important;
  grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(150px, 0.85fr)) !important;
  gap: 16px !important;
  align-items: end !important;
}

html body[data-active-panel="landing"] .landing-training-status,
html body:has(.landing-workspace.active) .landing-training-status {
  height: 52px !important;
  min-height: 52px !important;
  padding: 9px 14px !important;
  border-radius: 14px !important;
}

html body[data-active-panel="landing"] .landing-training-status:first-child,
html body:has(.landing-workspace.active) .landing-training-status:first-child {
  height: 64px !important;
  min-height: 64px !important;
  padding: 10px 16px !important;
}

html body[data-active-panel="landing"] .landing-training-status span,
html body:has(.landing-workspace.active) .landing-training-status span {
  font-size: 11px !important;
  line-height: 1.1 !important;
}

html body[data-active-panel="landing"] .landing-training-status strong,
html body:has(.landing-workspace.active) .landing-training-status strong {
  margin-top: 5px !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
}

html body[data-active-panel="landing"] .landing-training-status:first-child strong,
html body:has(.landing-workspace.active) .landing-training-status:first-child strong {
  margin-top: 3px !important;
  font-size: 34px !important;
}

@media (min-width: 901px) and (max-width: 1380px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: 128px 248px 420px 240px 240px 240px 232px 180px 180px 180px !important;
  }
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: 176px 248px 420px 240px 240px 240px 232px 180px 180px 180px !important;
  }

  html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel,
  html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-welcome-panel {
    height: 176px !important;
    min-height: 176px !important;
    max-height: 176px !important;
  }

  html body[data-active-panel="landing"] .landing-training-statusbar,
  html body:has(.landing-workspace.active) .landing-training-statusbar {
    width: min(100%, 760px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* Custom dashboard controls v104: let drawer settings control module order and visibility. */
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-areas: none !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  grid-template-columns: repeat(20, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  row-gap: 24px !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-home-grid > [data-home-module-key] {
  grid-area: auto !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-dashboard-optional[hidden] {
  display: none !important;
}

html body[data-active-panel="landing"][data-landing-module-layout="custom"] .landing-dashboard-optional:not([hidden]) {
  display: grid !important;
}

@media (max-width: 1380px) {
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Homepage frozen layout v132: make current ability the dominant first-glance metric. */
html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-welcome-panel {
  min-height: 148px !important;
  height: 148px !important;
  max-height: 148px !important;
}

html body[data-active-panel="landing"] .landing-welcome-copy,
html body:has(.landing-workspace.active) .landing-welcome-copy {
  gap: 14px !important;
}

html body[data-active-panel="landing"] .landing-training-statusbar,
html body:has(.landing-workspace.active) .landing-training-statusbar {
  width: min(100%, 980px) !important;
  grid-template-columns: minmax(300px, 1.4fr) repeat(3, minmax(150px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

html body[data-active-panel="landing"] .landing-training-status,
html body:has(.landing-workspace.active) .landing-training-status {
  min-height: 58px !important;
  height: 58px !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
  align-self: end !important;
}

html body[data-active-panel="landing"] .landing-training-status-primary,
html body[data-active-panel="landing"] .landing-training-status:first-child,
html body:has(.landing-workspace.active) .landing-training-status-primary,
html body:has(.landing-workspace.active) .landing-training-status:first-child {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(104px, auto) minmax(0, 1fr) !important;
  grid-template-areas:
    "label stage"
    "score rank" !important;
  column-gap: 14px !important;
  row-gap: 4px !important;
  align-items: center !important;
  min-height: 86px !important;
  height: 86px !important;
  padding: 12px 18px !important;
  border-color: rgba(124, 77, 255, 0.28) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 92% 18%, rgba(91, 140, 255, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 239, 255, 0.96)) !important;
  box-shadow: 0 18px 38px rgba(124, 77, 255, 0.12) !important;
}

html body[data-active-panel="landing"] .landing-training-status-primary > span,
html body[data-active-panel="landing"] .landing-training-status:first-child > span,
html body:has(.landing-workspace.active) .landing-training-status-primary > span,
html body:has(.landing-workspace.active) .landing-training-status:first-child > span {
  grid-area: label !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

html body[data-active-panel="landing"] .landing-training-status-primary > strong,
html body[data-active-panel="landing"] .landing-training-status:first-child > strong,
html body:has(.landing-workspace.active) .landing-training-status-primary > strong,
html body:has(.landing-workspace.active) .landing-training-status:first-child > strong {
  grid-area: score !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  margin: 0 !important;
  color: #6d4dff !important;
  font-size: 42px !important;
  line-height: 0.95 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="landing"] .landing-training-status-primary > strong small,
html body[data-active-panel="landing"] .landing-training-status:first-child > strong small,
html body:has(.landing-workspace.active) .landing-training-status-primary > strong small,
html body:has(.landing-workspace.active) .landing-training-status:first-child > strong small {
  color: #6d4dff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="landing"] .landing-training-status-primary > em,
html body[data-active-panel="landing"] .landing-training-status:first-child > em,
html body:has(.landing-workspace.active) .landing-training-status-primary > em,
html body:has(.landing-workspace.active) .landing-training-status:first-child > em {
  grid-area: stage !important;
  justify-self: end !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #4f46e5 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-training-status-primary > b,
html body[data-active-panel="landing"] .landing-training-status:first-child > b,
html body:has(.landing-workspace.active) .landing-training-status-primary > b,
html body:has(.landing-workspace.active) .landing-training-status:first-child > b {
  grid-area: rank !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #059669 !important;
  background: rgba(34, 197, 94, 0.12) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel,
  html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-welcome-panel {
    min-height: 214px !important;
    height: 214px !important;
    max-height: 214px !important;
  }

  html body[data-active-panel="landing"] .landing-training-statusbar,
  html body:has(.landing-workspace.active) .landing-training-statusbar {
    grid-template-columns: 1fr 1fr !important;
  }

  html body[data-active-panel="landing"] .landing-training-status-primary,
  html body[data-active-panel="landing"] .landing-training-status:first-child,
  html body:has(.landing-workspace.active) .landing-training-status-primary,
  html body:has(.landing-workspace.active) .landing-training-status:first-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 680px) {
  html body[data-active-panel="landing"] .landing-training-statusbar,
  html body:has(.landing-workspace.active) .landing-training-statusbar {
    grid-template-columns: 1fr !important;
  }

  html body[data-active-panel="landing"] .landing-training-status-primary,
  html body[data-active-panel="landing"] .landing-training-status:first-child,
  html body:has(.landing-workspace.active) .landing-training-status-primary,
  html body:has(.landing-workspace.active) .landing-training-status:first-child {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "label"
      "score"
      "stage"
      "rank" !important;
    justify-items: start !important;
    height: auto !important;
    min-height: 122px !important;
  }

  html body[data-active-panel="landing"] .landing-training-status:first-child > em,
  html body[data-active-panel="landing"] .landing-training-status:first-child > b,
  html body:has(.landing-workspace.active) .landing-training-status:first-child > em,
  html body:has(.landing-workspace.active) .landing-training-status:first-child > b {
    justify-self: start !important;
  }
}

/* Homepage frozen layout v133: secondary status cards explain the number. */
html body[data-active-panel="landing"] .landing-training-status:not(:first-child),
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  gap: 4px !important;
  min-height: 72px !important;
  height: 72px !important;
  padding: 10px 14px !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child) span,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) span {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child) strong,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) strong {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="landing"] .landing-training-status:nth-child(3) strong,
html body[data-active-panel="landing"] .landing-training-status:nth-child(4) strong,
html body:has(.landing-workspace.active) .landing-training-status:nth-child(3) strong,
html body:has(.landing-workspace.active) .landing-training-status:nth-child(4) strong {
  color: #6d4dff !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child) em,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) em {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #7b89a3 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* AI training cockpit v134: this card is the platform brain. */
html body[data-active-panel="landing"] .landing-xiaowen-briefing,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing {
  background:
    radial-gradient(circle at 88% 18%, rgba(124, 77, 255, 0.13), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96)) !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-head span,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-head span {
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-copy {
  grid-template:
    "head stats" 30px
    "text stats" minmax(48px, auto)
    "advice stats" minmax(48px, 1fr)
    / minmax(0, 1fr) 380px !important;
  gap: 14px 24px !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats {
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats div,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats div {
  min-height: 0 !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.88) !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats span,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats span {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats strong,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats strong {
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats div:nth-child(2) strong,
html body[data-active-panel="landing"] .landing-training-cockpit-stats div:nth-child(5) strong,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats div:nth-child(2) strong,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats div:nth-child(5) strong {
  color: #6d4dff !important;
  font-size: 22px !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .landing-xiaowen-briefing,
  html body:has(.landing-workspace.active) .landing-xiaowen-briefing {
    height: auto !important;
    min-height: 360px !important;
    max-height: none !important;
  }

  html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy,
  html body:has(.landing-workspace.active) .landing-xiaowen-briefing-copy {
    grid-template:
      "head" auto
      "text" auto
      "advice" auto
      "stats" auto
      / 1fr !important;
  }

  html body[data-active-panel="landing"] .landing-training-cockpit-stats,
  html body:has(.landing-workspace.active) .landing-training-cockpit-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }
}

/* Next training action card v139: make the ninth layer an executable action, not a text notice. */
html body[data-active-panel="landing"] .landing-coach-card-bottom,
html body:has(.landing-workspace.active) .landing-coach-card-bottom {
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  padding: 18px 22px !important;
  display: grid !important;
  align-items: center !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom .landing-coach-card-copy,
html body:has(.landing-workspace.active) .landing-coach-card-bottom .landing-coach-card-copy {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template:
    "head button" auto
    "title button" 1fr
    "meta button" auto
    / minmax(0, 1fr) 132px !important;
  align-items: center !important;
  gap: 10px 18px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom .landing-coach-card-head,
html body:has(.landing-workspace.active) .landing-coach-card-bottom .landing-coach-card-head {
  grid-area: head !important;
  margin: 0 !important;
  gap: 10px !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom .landing-coach-card-head span,
html body:has(.landing-workspace.active) .landing-coach-card-bottom .landing-coach-card-head span {
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}

html body[data-active-panel="landing"] .landing-coach-card-bottom .landing-coach-card-head strong,
html body:has(.landing-workspace.active) .landing-coach-card-bottom .landing-coach-card-head strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] #landingNextTrainingTitle,
html body:has(.landing-workspace.active) #landingNextTrainingTitle {
  grid-area: title !important;
  margin: 0 !important;
  min-width: 0 !important;
  color: #111827 !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 1.16 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="landing"] .landing-next-training-meta,
html body:has(.landing-workspace.active) .landing-next-training-meta {
  grid-area: meta !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body[data-active-panel="landing"] .landing-next-training-meta span,
html body:has(.landing-workspace.active) .landing-next-training-meta span {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 999px !important;
  color: #5b6b84 !important;
  background: rgba(248, 250, 255, 0.86) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] #landingNextTrainingLift,
html body:has(.landing-workspace.active) #landingNextTrainingLift {
  color: #16a34a !important;
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.18) !important;
}

html body[data-active-panel="landing"] #landingNextTrainingStartBtn.primary-btn,
html body:has(.landing-workspace.active) #landingNextTrainingStartBtn.primary-btn {
  grid-area: button !important;
  justify-self: end !important;
  width: 132px !important;
  min-width: 132px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 28px rgba(124, 77, 255, 0.22) !important;
}

/* Final homepage structure v141: one Xiaowen entry, ten clear cockpit layers. */
html body #companionAmbientStage,
html body .character-stage-duo,
html body .companion-hud-orb,
html body[data-active-panel="landing"] .landing-home-grid .landing-xiaowen-briefing-avatar,
html body[data-active-panel="landing"] .landing-home-grid .landing-xiaowen-briefing-avatar img,
html body[data-active-panel="landing"] .landing-home-grid img[src*="xiaowen"],
html body[data-active-panel="landing"] .landing-home-grid img[src*="yingwen-mark"],
html body:has(.landing-workspace.active) .landing-home-grid .landing-xiaowen-briefing-avatar,
html body:has(.landing-workspace.active) .landing-home-grid .landing-xiaowen-briefing-avatar img,
html body:has(.landing-workspace.active) .landing-home-grid img[src*="xiaowen"],
html body:has(.landing-workspace.active) .landing-home-grid img[src*="yingwen-mark"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock:not([hidden]),
html body:has(.landing-workspace.active) #companionDock.companion-dock:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-areas: none !important;
  grid-template-columns: repeat(20, minmax(0, 1fr)) !important;
  grid-template-rows: 148px 248px 420px 240px 240px 180px 232px 180px 150px 150px !important;
  grid-auto-rows: auto !important;
  row-gap: 24px !important;
  column-gap: 24px !important;
  align-items: stretch !important;
}

html body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key],
html body:has(.landing-workspace.active) .landing-home-grid > [data-home-module-key] {
  grid-column: 1 / -1 !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-welcome-panel {
  height: 148px !important;
  min-height: 148px !important;
  max-height: 148px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-xiaowen-briefing,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-xiaowen-briefing {
  height: 248px !important;
  min-height: 248px !important;
  max-height: 248px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-primary-recommendation,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-primary-recommendation {
  height: 420px !important;
  min-height: 420px !important;
  max-height: 420px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-weekly-growth,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-weekly-growth,
html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-route-card,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-route-card {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-training-heatmap,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-training-heatmap,
html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-hardware-questions,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-hardware-questions {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-hardware-focus,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-hardware-focus {
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-coach-card-bottom,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-coach-card-bottom,
html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-special-training,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-special-training {
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > .section-card.landing-welcome-panel:not(.is-briefing-open),
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid > .section-card.landing-welcome-panel:not(.is-briefing-open) {
  height: 148px !important;
  min-height: 148px !important;
  max-height: 148px !important;
}

html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > #landingAchievementCenter.section-card.landing-training-heatmap,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid > #landingAchievementCenter.section-card.landing-training-heatmap {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 214px 360px 420px 300px 300px 220px auto auto 180px auto !important;
  }

  html body[data-active-panel="landing"] .landing-home-grid > .section-card,
  html body:has(.landing-workspace.active) .landing-home-grid > .section-card {
    max-height: none !important;
  }
}

/* Homepage layers 5-7 v142: route sync, recent achievements, stable hardware cards. */
html body[data-active-panel="landing"] .landing-route-card .landing-route-title strong,
html body:has(.landing-workspace.active) .landing-route-card .landing-route-title strong {
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.11) !important;
  border-color: rgba(124, 77, 255, 0.18) !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage,
html body:has(.landing-workspace.active) .landing-route-card .landing-route-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 160px !important;
  align-items: center !important;
  gap: 16px !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-route-stage strong,
html body:has(.landing-workspace.active) .landing-route-card .landing-route-stage strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-route-card .landing-ai-step-feedback,
html body:has(.landing-workspace.active) .landing-route-card .landing-ai-step-feedback {
  display: none !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter.section-card.landing-training-heatmap,
html body:has(.landing-workspace.active) #landingAchievementCenter.section-card.landing-training-heatmap {
  grid-template-rows: 28px 58px 44px !important;
  align-content: start !important;
  gap: 12px !important;
  padding: 20px 24px !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter .landing-heatmap-strip,
html body:has(.landing-workspace.active) #landingAchievementCenter .landing-heatmap-strip {
  display: none !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter .landing-achievement-list,
html body:has(.landing-workspace.active) #landingAchievementCenter .landing-achievement-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  height: 58px !important;
  min-height: 58px !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter .landing-achievement-list div,
html body:has(.landing-workspace.active) #landingAchievementCenter .landing-achievement-list div {
  height: 58px !important;
  min-height: 58px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter .landing-achievement-title-list,
html body:has(.landing-workspace.active) #landingAchievementCenter .landing-achievement-title-list {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 36px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter .landing-achievement-label,
html body:has(.landing-workspace.active) #landingAchievementCenter .landing-achievement-label {
  flex: 0 0 auto !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="landing"] #landingAchievementCenter .achievement-title-chip,
html body:has(.landing-workspace.active) #landingAchievementCenter .achievement-title-chip {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  line-height: 32px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-chip-list,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-chip-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  height: 156px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card {
  min-width: 0 !important;
  grid-template-rows: 50px 20px 18px 32px !important;
  gap: 6px !important;
  padding: 12px 12px 10px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card > strong,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card > strong {
  height: 50px !important;
  max-height: 50px !important;
  grid-template-rows: 28px 18px !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card > em,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card > em,
html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card > small,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card > small {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* EOF dashboard drawer visibility lock v70: must stay last. */
.training-dashboard-drawer:not(.is-open) {
  transform: translateX(104%) !important;
}

.training-dashboard-drawer.is-open {
  transform: translateX(0) !important;
}

/* XiaoWen final identity v146: this must be physically last. */
html body #companionAmbientStage,
html body #companionAmbientStage.companion-ambient-stage,
html body #companionAmbientStage.companion-ambient-stage.companion-ambient-moment {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body #companionDock.companion-dock.companion-collapsed {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 72px !important;
  max-width: 72px !important;
  min-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  right: calc(24px + var(--safe-right, 0px)) !important;
  bottom: calc(24px + var(--safe-bottom, 0px)) !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  place-items: center !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 0 !important;
  border: 3px solid rgba(124, 77, 255, 0.72) !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  background-image:
    radial-gradient(circle at 84% 84%, #22c55e 0 5px, transparent 5.8px),
    url("./assets/xiaowen-avatar.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
  box-shadow:
    0 18px 38px rgba(124, 77, 255, 0.28),
    0 0 0 8px rgba(124, 77, 255, 0.08) !important;
  transform: none !important;
  overflow: hidden !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini > *,
html body #companionDock.companion-dock.companion-collapsed #companionMiniAvatar,
html body #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage,
html body #companionDock.companion-dock.companion-collapsed #companionMiniCharacter,
html body #companionDock.companion-dock.companion-collapsed .companion-mini-bubble,
html body #companionDock.companion-dock.companion-collapsed .companion-drag-handle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html body #companionDock.companion-dock.companion-collapsed #companionMini::before,
html body #companionDock.companion-dock.companion-collapsed #companionMini::after {
  content: "" !important;
  display: none !important;
}

/* XiaoWen final identity v148: landing-specific override for older transparent capsule rules. */
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 72px !important;
  max-width: 72px !important;
  min-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  border: 3px solid rgba(124, 77, 255, 0.72) !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  background-image:
    radial-gradient(circle at 84% 84%, #22c55e 0 5px, transparent 5.8px),
    url("./assets/xiaowen-avatar.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
  box-shadow:
    0 18px 38px rgba(124, 77, 255, 0.28),
    0 0 0 8px rgba(124, 77, 255, 0.08) !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini > *,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMiniAvatar,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMiniCharacter,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed .companion-mini-bubble,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed .companion-drag-handle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini::before,
html body[data-active-panel="landing"] #companionDock.companion-dock.companion-collapsed #companionMini::after {
  content: "" !important;
  display: none !important;
}

/* Text fit v150 EOF lock: keep the last generated homepage layer readable. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-rows: 148px 276px 420px 240px 240px 180px 232px 180px 150px 196px !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-xiaowen-briefing,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-xiaowen-briefing {
  height: 276px !important;
  min-height: 276px !important;
  max-height: 276px !important;
  padding: 24px 28px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-copy {
  height: 100% !important;
  min-height: 0 !important;
  grid-template:
    "head stats" 32px
    "text stats" minmax(74px, auto)
    "advice stats" minmax(76px, 1fr)
    / minmax(0, 1fr) 372px !important;
  gap: 16px 28px !important;
  align-items: start !important;
}

html body[data-active-panel="landing"] #landingXiaowenBriefingText,
html body:has(.landing-workspace.active) #landingXiaowenBriefingText,
html body[data-active-panel="landing"] .landing-xiaowen-briefing-advice,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-advice {
  display: block !important;
  margin: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-special-training,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-special-training {
  height: 196px !important;
  min-height: 196px !important;
  max-height: 196px !important;
  padding: 22px 26px !important;
  display: grid !important;
  grid-template-rows: 28px minmax(0, 1fr) !important;
  gap: 18px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-special-training-list,
html body:has(.landing-workspace.active) .landing-special-training-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  height: 126px !important;
  min-height: 126px !important;
  max-height: none !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item {
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;
  padding: 16px !important;
  display: grid !important;
  grid-template:
    "icon title button" 30px
    "icon reason button" 36px
    "rate rate button" 34px
    / 42px minmax(0, 1fr) 96px !important;
  gap: 8px 14px !important;
  align-items: center !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-icon,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-icon {
  grid-area: icon !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  align-self: start !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > strong,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > strong {
  grid-area: title !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-reason,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-reason {
  grid-area: reason !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > p,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > p {
  grid-area: rate !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: end !important;
  overflow: visible !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > p b,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > p b {
  font-size: 22px !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > em,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > em {
  grid-area: button !important;
  justify-self: end !important;
  align-self: end !important;
  width: 96px !important;
  min-width: 96px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  font-size: 13px !important;
  line-height: 34px !important;
  white-space: nowrap !important;
}


/* source: homepage-final-fixes.css */
/* Final homepage fit fixes. Loaded after all legacy homepage overrides. */
html body .sidebar-account-copy em,
html body #sidebarAccountRole,
html body .sidebar-account-card .sidebar-account-copy > em,
html body .sidebar-account-card .sidebar-account-copy > :not(strong) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Experience optimization v281: homepage is a training decision surface. */
html body[data-active-panel="landing"] .landing-home-grid,
html body:has(.landing-workspace.active) .landing-home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 22px !important;
  align-items: start !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .landing-xiaowen-briefing,
html body[data-active-panel="landing"] .landing-home-grid > .landing-route-card,
html body[data-active-panel="landing"] .landing-home-grid > #landingAchievementCenter,
html body[data-active-panel="landing"] .landing-home-grid > .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-home-grid > .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-home-grid > .landing-coach-card-bottom,
html body[data-active-panel="landing"] .landing-home-grid > .landing-special-training,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-xiaowen-briefing,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-route-card,
html body:has(.landing-workspace.active) .landing-home-grid > #landingAchievementCenter,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-hardware-focus,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-hardware-questions,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-coach-card-bottom,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-special-training {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-welcome-panel,
html body:has(.landing-workspace.active) .landing-welcome-panel {
  min-height: 170px !important;
  height: auto !important;
  padding: 24px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-greeting-line,
html body:has(.landing-workspace.active) .landing-greeting-line {
  margin: 0 0 14px !important;
  line-height: 1.15 !important;
}

html body[data-active-panel="landing"] .landing-training-statusbar,
html body:has(.landing-workspace.active) .landing-training-statusbar {
  display: grid !important;
  grid-template-columns: minmax(300px, 1.45fr) repeat(3, minmax(190px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-status,
html body:has(.landing-workspace.active) .landing-training-status {
  min-height: 96px !important;
  height: auto !important;
  padding: 14px 18px !important;
  overflow: visible !important;
  align-content: center !important;
  gap: 4px !important;
}

html body[data-active-panel="landing"] .landing-training-status span,
html body[data-active-panel="landing"] .landing-training-status em,
html body[data-active-panel="landing"] .landing-training-status b,
html body:has(.landing-workspace.active) .landing-training-status span,
html body:has(.landing-workspace.active) .landing-training-status em,
html body:has(.landing-workspace.active) .landing-training-status b {
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-status strong,
html body:has(.landing-workspace.active) .landing-training-status strong {
  line-height: 1.02 !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-status-primary strong,
html body:has(.landing-workspace.active) .landing-training-status-primary strong {
  font-size: 46px !important;
}

html body[data-active-panel="landing"] .landing-focus-decision,
html body:has(.landing-workspace.active) .landing-focus-decision {
  min-height: 250px !important;
  padding: 24px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(124, 77, 255, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96)) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08) !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-head,
html body:has(.landing-workspace.active) .landing-focus-decision-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-head span,
html body:has(.landing-workspace.active) .landing-focus-decision-head span {
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-head strong,
html body:has(.landing-workspace.active) .landing-focus-decision-head strong {
  color: #7c4dff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-grid,
html body:has(.landing-workspace.active) .landing-focus-decision-grid {
  display: grid !important;
  grid-template-columns: 1.25fr 1fr 1.25fr !important;
  gap: 18px !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card,
html body:has(.landing-workspace.active) .landing-focus-decision-card {
  min-height: 154px !important;
  padding: 20px !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  text-align: left !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #0f172a !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card span,
html body:has(.landing-workspace.active) .landing-focus-decision-card span {
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card strong,
html body:has(.landing-workspace.active) .landing-focus-decision-card strong {
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card-primary strong,
html body:has(.landing-workspace.active) .landing-focus-decision-card-primary strong {
  color: #6d4dff !important;
  font-size: 52px !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card small,
html body:has(.landing-workspace.active) .landing-focus-decision-card small {
  font-size: 18px !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card em,
html body[data-active-panel="landing"] .landing-focus-decision-card b,
html body:has(.landing-workspace.active) .landing-focus-decision-card em,
html body:has(.landing-workspace.active) .landing-focus-decision-card b {
  font-style: normal !important;
  line-height: 1.25 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card em,
html body:has(.landing-workspace.active) .landing-focus-decision-card em {
  color: #5b8cff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card b,
html body:has(.landing-workspace.active) .landing-focus-decision-card b {
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-action,
html body:has(.landing-workspace.active) .landing-focus-decision-action {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.96), rgba(91, 140, 255, 0.96)) !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-action span,
html body[data-active-panel="landing"] .landing-focus-decision-action strong,
html body[data-active-panel="landing"] .landing-focus-decision-action em,
html body[data-active-panel="landing"] .landing-focus-decision-action b,
html body:has(.landing-workspace.active) .landing-focus-decision-action span,
html body:has(.landing-workspace.active) .landing-focus-decision-action strong,
html body:has(.landing-workspace.active) .landing-focus-decision-action em,
html body:has(.landing-workspace.active) .landing-focus-decision-action b {
  color: #fff !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation,
html body:has(.landing-workspace.active) .landing-primary-recommendation {
  min-height: 420px !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body:has(.landing-workspace.active) .landing-weekly-growth {
  min-height: 220px !important;
  height: auto !important;
}

@media (max-width: 1260px) {
  html body[data-active-panel="landing"] .landing-training-statusbar,
  html body:has(.landing-workspace.active) .landing-training-statusbar,
  html body[data-active-panel="landing"] .landing-focus-decision-grid,
  html body:has(.landing-workspace.active) .landing-focus-decision-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Experience optimization v281: interview coach is a live scoring panel. */
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
  grid-template-rows: 126px 316px minmax(216px, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card {
  grid-template-rows: 28px 56px minmax(0, 34px) !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card {
  grid-template-rows: 30px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
  grid-template-rows: repeat(8, 26px) !important;
  gap: 4px !important;
  align-content: start !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item b {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  font-size: 13px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card {
  grid-template-rows: 28px minmax(0, auto) auto !important;
  gap: 8px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .engineering-score-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 0 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .engineering-score-summary div {
  min-width: 0 !important;
  padding: 6px 7px !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .engineering-score-summary span {
  display: block !important;
  margin-bottom: 3px !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .engineering-score-summary strong {
  display: block !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  grid-template-rows: 30px minmax(0, 1fr) 38px 18px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  overflow-y: auto !important;
  max-height: none !important;
}

/* Experience optimization v281: audio review shows answer-vs-standard evidence. */
html body[data-active-panel="audio"] .audio-review-standard-compare {
  display: grid !important;
  gap: 14px !important;
  padding: 16px !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.95)) !important;
}

html body[data-active-panel="audio"] .audio-compare-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-compare-head span {
  color: #6d4dff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-compare-head strong {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-compare-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr 1fr !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-compare-grid section {
  min-height: 112px !important;
  padding: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 16px !important;
  background: #fff !important;
}

html body[data-active-panel="audio"] .audio-compare-grid small {
  display: block !important;
  margin-bottom: 8px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-compare-grid p {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.65 !important;
}

html body[data-active-panel="audio"] .audio-compare-grid b {
  color: #6d4dff !important;
}

html body[data-active-panel="audio"] .audio-compare-missing {
  border-color: rgba(239, 68, 68, 0.22) !important;
  background: rgba(254, 242, 242, 0.84) !important;
}

html body[data-active-panel="audio"] .audio-compare-missing b {
  color: #ef4444 !important;
}

/* Brand subtitle consistency v283: identical logo subtitle on every page. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head--main {
  width: 100% !important;
  min-height: 118px !important;
  height: 118px !important;
  padding: 14px 12px 10px !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 6px !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-main-logo {
  display: block !important;
  width: 144px !important;
  max-width: 144px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-subtitle-text {
  display: block !important;
  width: 180px !important;
  max-width: 180px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: rgba(226, 232, 240, 0.84) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text br,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text br {
  display: block !important;
  content: "" !important;
}

/* Absolute final homepage fold lock v282. */
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-xiaowen-briefing,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-route-card,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-ai-task-center,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-hardware-focus,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-hardware-questions,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-training-heatmap,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-coach-card-bottom,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-special-training {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-welcome-panel {
  min-height: 170px !important;
  height: auto !important;
}

/* Absolute brand subtitle consistency v283: must stay last. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head--main {
  width: 100% !important;
  min-height: 118px !important;
  height: 118px !important;
  padding: 14px 12px 10px !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 6px !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-main-logo {
  display: block !important;
  width: 144px !important;
  max-width: 144px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-subtitle-text {
  display: block !important;
  width: 180px !important;
  max-width: 180px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: rgba(226, 232, 240, 0.84) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text br,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text br {
  display: block !important;
}

/* V5 IA final override: this block must remain at the physical end of this file. */
body[data-active-panel="landing"] #landingCustomizeHomeBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 24px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
}

body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid > article.section-card {
  width: 100% !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: stretch !important;
}

body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid > article.section-card.landing-v5-command-center,
body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid > article.section-card.landing-v5-ai-advice,
body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid > article.section-card.landing-v5-training-plan,
body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid > article.section-card.landing-v5-job-match-section {
  min-height: 0 !important;
  height: auto !important;
}

/* Recorded ASR feedback is separate from AI scoring and must remain actionable. */
html body[data-active-panel="interview"] .interview-answer-zone #voiceTranscriptionFeedback:not([hidden]) {
  display: grid !important;
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6;
}

html body[data-active-panel="interview"] .interview-answer-zone #voiceTranscriptionFeedback .ghost-btn {
  justify-self: start;
  margin: 0;
}

html body[data-active-panel="interview"] .interview-answer-zone #voicePlayback[src] {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  margin-top: 12px;
}

/* Interview v5: Xiaowen as real-time coach, not post-score bot. */
html body[data-active-panel="interview"] .xiaowen-live-interview-coach {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(124, 77, 255, 0.2) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 242, 255, 0.94)),
    radial-gradient(circle at 10% 20%, rgba(124, 77, 255, 0.12), transparent 38%) !important;
  box-shadow: 0 14px 32px rgba(107, 76, 255, 0.1) !important;
}

html body[data-active-panel="interview"] .xiaowen-live-interview-coach[data-coach-level="warn"] {
  border-color: rgba(255, 128, 64, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(255, 251, 245, 0.98), rgba(255, 245, 235, 0.95)),
    radial-gradient(circle at 10% 20%, rgba(255, 128, 64, 0.14), transparent 40%) !important;
}

html body[data-active-panel="interview"] .xiaowen-live-interview-coach[data-coach-level="good"] {
  border-color: rgba(34, 197, 94, 0.24) !important;
  background:
    linear-gradient(135deg, rgba(248, 255, 251, 0.98), rgba(237, 253, 244, 0.94)),
    radial-gradient(circle at 10% 20%, rgba(34, 197, 94, 0.12), transparent 40%) !important;
}

html body[data-active-panel="interview"] .xiaowen-live-interview-coach span {
  display: block !important;
  color: #6d4dff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
}

html body[data-active-panel="interview"] .xiaowen-live-interview-coach[data-coach-level="warn"] span {
  color: #f97316 !important;
}

html body[data-active-panel="interview"] .xiaowen-live-interview-coach strong {
  display: block !important;
  margin-top: 4px !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.45 !important;
}

html body[data-active-panel="interview"] .xiaowen-live-interview-coach p {
  margin: 0 !important;
  color: #5f6f86 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.55 !important;
}

html body[data-active-panel="interview"] .xiaowen-coach-live-cue {
  display: block !important;
  margin: 6px 0 0 !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: rgba(124, 77, 255, 0.08) !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1.45 !important;
}

html body[data-active-panel="interview"] .xiaowen-coach-live-cue[data-coach-level="warn"] {
  background: rgba(255, 128, 64, 0.11) !important;
  color: #9a3412 !important;
}

/* Landing V5 simplification: only goal, Xiaowen advice and today's tasks stay primary. */
body[data-active-panel="landing"] .landing-v5-hidden-secondary,
body[data-active-panel="landing"] .landing-v5-hidden-secondary[hidden] {
  display: none !important;
}

body[data-active-panel="landing"] .landing-v5-today-hero {
  background:
    radial-gradient(circle at 12% 16%, rgba(124, 92, 255, 0.16), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f9fbff 55%, #f4f0ff 100%) !important;
}

body[data-active-panel="landing"] .landing-v5-today-hero .landing-v5-command-copy h1 {
  max-width: 760px;
}

body[data-active-panel="landing"] .landing-v5-today-hero .landing-v5-command-copy p strong {
  color: #111827;
  font-weight: 950;
}

body[data-active-panel="landing"] .landing-xiaowen-advice-card {
  align-items: stretch !important;
  gap: 24px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-advice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

body[data-active-panel="landing"] .landing-xiaowen-advice-grid span {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 82px;
  padding: 16px;
  border: 1px solid rgba(124, 92, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

body[data-active-panel="landing"] .landing-xiaowen-advice-grid small {
  color: #7c5cff;
  font-size: 13px;
  font-weight: 900;
}

body[data-active-panel="landing"] .landing-xiaowen-advice-grid b {
  color: #111827;
  font-size: 17px;
  line-height: 1.35;
}

body[data-active-panel="landing"] .landing-v5-today-tasks .landing-v5-plan-day {
  position: relative;
  min-height: 104px;
}

body[data-active-panel="landing"] .landing-v5-today-tasks .landing-v5-plan-day span {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f1efff;
  color: #6d5af2;
}

body[data-active-panel="landing"] .landing-v5-today-tasks .landing-v5-plan-day.is-current span {
  background: #e8fff3;
  color: #16a15f;
}

@media (max-width: 980px) {
  body[data-active-panel="landing"] .landing-xiaowen-advice-grid {
    grid-template-columns: 1fr;
  }
}

/* Xiaowen AI coach workbench v284. */
.xiaowen-coach-workbench.active {
  display: flex !important;
  flex-direction: column;
  gap: 24px;
}

.xiaowen-coach-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.7fr);
  gap: 24px;
  align-items: stretch;
  min-height: 250px;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 10%, rgba(124, 92, 255, 0.16), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #fbfdff 54%, #f4f0ff 100%) !important;
}

.xiaowen-coach-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.xiaowen-coach-hero h2 {
  margin: 0;
  color: #111827;
  font-size: 42px;
  line-height: 1.16;
  letter-spacing: 0;
}

.xiaowen-coach-hero-copy > p {
  max-width: 780px;
  margin: 0;
  color: #526174;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.7;
}

.xiaowen-loop-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.xiaowen-loop-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(124, 92, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #5645d8;
  font-weight: 850;
}

.xiaowen-loop-strip i {
  color: #9aa4b2;
  font-style: normal;
  font-weight: 900;
}

.xiaowen-coach-score-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(124, 92, 255, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 22px 52px rgba(84, 65, 180, 0.14);
}

.xiaowen-coach-score-card span,
.xiaowen-decision-card .section-head > span,
.xiaowen-memory-card .section-head > span,
.xiaowen-todo-card .section-head > span {
  color: #7c5cff;
  font-size: 13px;
  font-weight: 900;
}

.xiaowen-coach-score-card strong {
  color: #111827;
  font-size: 30px;
  line-height: 1.2;
}

.xiaowen-coach-score-card p {
  margin: 0;
  color: #64748b;
  font-weight: 760;
  line-height: 1.65;
}

.xiaowen-coach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: 24px;
}

.xiaowen-primary-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr);
  gap: 20px;
  margin-bottom: 18px;
}

.xiaowen-primary-action small {
  color: #7c5cff;
  font-weight: 900;
}

.xiaowen-primary-action strong {
  display: block;
  margin-top: 8px;
  color: #111827;
  font-size: 30px;
  line-height: 1.2;
}

.xiaowen-primary-action p {
  max-width: 680px;
  margin: 12px 0 0;
  color: #526174;
  font-size: 16px;
  font-weight: 720;
  line-height: 1.65;
}

.xiaowen-primary-action dl,
.xiaowen-memory-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.xiaowen-primary-action dl div,
.xiaowen-memory-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid #e9e3ff;
  border-radius: 16px;
  background: #fbfaff;
}

.xiaowen-primary-action dt,
.xiaowen-memory-list small {
  color: #738198;
  font-size: 13px;
  font-weight: 850;
}

.xiaowen-primary-action dd,
.xiaowen-memory-list b {
  margin: 0;
  color: #111827;
  font-weight: 950;
  text-align: right;
}

.xiaowen-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.xiaowen-stage-grid article {
  min-height: 180px;
  padding: 20px;
  border: 1px solid #e9e3ff;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #fbfaff);
}

.xiaowen-stage-grid span,
.xiaowen-action-item span {
  display: inline-flex;
  width: max-content;
  min-height: 30px;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: #f1edff;
  color: #7c5cff;
  font-size: 12px;
  font-weight: 950;
}

.xiaowen-stage-grid strong {
  display: block;
  margin: 14px 0 10px;
  color: #111827;
  font-size: 20px;
  line-height: 1.25;
}

.xiaowen-stage-grid p,
.xiaowen-boundary-card li {
  margin: 0;
  color: #526174;
  font-weight: 740;
  line-height: 1.65;
}

.xiaowen-action-list {
  display: grid;
  gap: 14px;
}

.xiaowen-action-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: center;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid #e6eaf2;
  border-radius: 18px;
  background: #ffffff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.xiaowen-action-item:hover {
  transform: translateY(-2px);
  border-color: #c8b9ff;
  box-shadow: 0 18px 38px rgba(84, 65, 180, 0.12);
}

.xiaowen-action-item strong {
  color: #111827;
  font-size: 18px;
  line-height: 1.25;
}

.xiaowen-action-item small {
  color: #64748b;
  font-weight: 800;
  text-align: right;
}

.xiaowen-boundary-card ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xiaowen-boundary-card li {
  padding: 14px 16px;
  border-radius: 16px;
  background: #f8fafc;
}

.xiaowen-boundary-card b {
  color: #111827;
}

@media (max-width: 1100px) {
  .xiaowen-coach-hero,
  .xiaowen-coach-grid,
  .xiaowen-primary-action,
  .xiaowen-stage-grid {
    grid-template-columns: 1fr;
  }

  .xiaowen-action-item {
    grid-template-columns: 1fr;
  }

  .xiaowen-action-item small {
    text-align: left;
  }
}

/* Engineering Lab must never look empty: visible first-screen task bench. */
body[data-active-panel="project-practice"] .engineering-lab-hero {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.82fr) minmax(420px, 1.18fr) !important;
  gap: 18px !important;
  margin: 16px 0 18px !important;
  padding: 18px !important;
  border: 1px solid rgba(124, 92, 255, 0.18) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 12% 15%, rgba(124, 92, 255, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}

body[data-active-panel="project-practice"] .engineering-lab-hero-main {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body[data-active-panel="project-practice"] .engineering-lab-hero-main span {
  width: fit-content !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(124, 92, 255, 0.1) !important;
  color: #6d4aff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-active-panel="project-practice"] .engineering-lab-hero-main h3 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="project-practice"] .engineering-lab-hero-main p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
}

body[data-active-panel="project-practice"] .engineering-lab-task-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-panel="project-practice"] .engineering-lab-task {
  min-height: 148px !important;
  padding: 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
  cursor: pointer !important;
}

body[data-active-panel="project-practice"] .engineering-lab-task em {
  color: #64748b !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body[data-active-panel="project-practice"] .engineering-lab-task strong {
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="project-practice"] .engineering-lab-task span {
  min-height: 38px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

body[data-active-panel="project-practice"] .engineering-lab-task b {
  margin-top: auto !important;
  color: #6d4aff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-panel="project-practice"] .engineering-lab-task:hover {
  border-color: rgba(124, 92, 255, 0.42) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 34px rgba(124, 92, 255, 0.12) !important;
}

@media (max-width: 1100px) {
  body[data-active-panel="project-practice"] .engineering-lab-hero {
    grid-template-columns: 1fr !important;
  }

  body[data-active-panel="project-practice"] .engineering-lab-task-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Engineering Lab entry polish: make this page feel like a real lab hub, not an empty category page. */
body[data-active-panel="project-practice"] .skill-training-map {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 28px 0 24px !important;
}

body[data-active-panel="project-practice"] .engineering-lab-entry {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  min-height: 210px !important;
  padding: 24px !important;
  border: 1px solid rgba(124, 92, 255, 0.18) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 92, 255, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96)) !important;
  box-shadow: 0 18px 42px rgba(32, 44, 84, 0.08) !important;
  color: #111827 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  cursor: pointer !important;
  font: inherit !important;
  overflow: hidden !important;
}

body[data-active-panel="project-practice"] .engineering-lab-entry:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(124, 92, 255, 0.36) !important;
  box-shadow: 0 24px 56px rgba(32, 44, 84, 0.12) !important;
}

body[data-active-panel="project-practice"] .engineering-lab-entry span {
  display: inline-flex !important;
  width: max-content !important;
  margin-bottom: 0 !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: rgba(124, 87, 255, 0.12) !important;
  color: #754cff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-panel="project-practice"] .engineering-lab-entry strong {
  display: block !important;
  min-height: 62px !important;
  color: #0f172a !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1.32 !important;
}

body[data-active-panel="project-practice"] .engineering-lab-entry em {
  display: block !important;
  margin-top: 0 !important;
  color: #64748b !important;
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

body[data-active-panel="project-practice"] .engineering-lab-entry b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  margin-top: auto !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #6f4dff, #4f8dff) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  box-shadow: 0 12px 24px rgba(111, 77, 255, 0.2) !important;
}

body[data-active-panel="project-practice"] .engineering-lab-secondary {
  opacity: 0.72 !important;
  transform: scale(0.985) !important;
  transform-origin: top center !important;
}

@media (max-width: 1180px) {
  body[data-active-panel="project-practice"] .skill-training-map {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body[data-active-panel="project-practice"] .skill-training-map {
    grid-template-columns: 1fr !important;
  }
}

body[data-active-panel="project-practice"] .engineering-entry-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 28px 0 24px !important;
}

body[data-active-panel="project-practice"] .engineering-entry-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  min-height: 210px !important;
  padding: 24px !important;
  border: 1px solid rgba(124, 92, 255, 0.18) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 92, 255, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96)) !important;
  box-shadow: 0 18px 42px rgba(32, 44, 84, 0.08) !important;
  color: #111827 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  cursor: pointer !important;
  font: inherit !important;
  overflow: hidden !important;
}

body[data-active-panel="project-practice"] .engineering-entry-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(124, 92, 255, 0.36) !important;
  box-shadow: 0 24px 56px rgba(32, 44, 84, 0.12) !important;
}

body[data-active-panel="project-practice"] .engineering-entry-card span {
  align-self: flex-start !important;
  width: max-content !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: rgba(124, 92, 255, 0.12) !important;
  color: #714cff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body[data-active-panel="project-practice"] .engineering-entry-card strong {
  display: block !important;
  color: #111827 !important;
  font-size: clamp(19px, 1.45vw, 24px) !important;
  line-height: 1.28 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="project-practice"] .engineering-entry-card em {
  display: block !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-style: normal !important;
  font-weight: 800 !important;
  min-height: 48px !important;
}

body[data-active-panel="project-practice"] .engineering-entry-card b {
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #7448ff, #4b8cff) !important;
  box-shadow: 0 12px 24px rgba(102, 83, 255, 0.18) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

@media (max-width: 1180px) {
  body[data-active-panel="project-practice"] .engineering-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body[data-active-panel="project-practice"] .engineering-entry-grid {
    grid-template-columns: 1fr !important;
  }
}

/* V5 IA homepage final layout lock: keep the first screen as a simple product flow. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 24px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card {
  width: 100% !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: stretch !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-training-command,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-v5-ai-advice,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-growth-panel,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-v5-job-match {
  min-height: 0 !important;
  height: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-training-command .landing-command-grid,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-v5-job-match .landing-v5-job-grid {
  align-items: stretch !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-customize-home {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] #landingCustomizeHomeBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-active-panel="landing"] #landingCustomizeHomeBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* V5 IA final lock: homepage cards must stack cleanly with one dominant action. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: start !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > .section-card {
  width: 100% !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-v5-command-center {
  min-height: 392px !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-grid {
  align-items: stretch !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-card {
  min-height: 220px !important;
  height: auto !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-ai-advice {
  min-height: 132px !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-training-plan,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-section {
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Product-subtraction final lock v5.1: keep homepage to four user-facing modules. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > details.landing-v5-analysis-details,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-weekly-growth,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-hardware-focus,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-hardware-questions,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-training-heatmap,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-special-training,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-coach-card-bottom {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid {
  gap: 20px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-v5-command-center {
  min-height: 330px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-v5-change-match .landing-v5-signal-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-v5-command-card-primary strong {
  font-size: 42px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-v5-job-match-card b {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  color: #6d4cff !important;
  background: #f1ecff !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-v5-change-match .landing-v5-signal-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-section {
  width: 100% !important;
  min-height: 220px !important;
  padding: 28px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8f4ff 100%) !important;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.07) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, .8fr) 220px !important;
  gap: 18px !important;
  align-items: center !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-content > div {
  min-height: 116px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(124,77,255,.16) !important;
  border-radius: 18px !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-content span {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-content strong {
  color: #0f172a !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-content em {
  color: #64748b !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-content em b {
  color: #7c4dff !important;
  font-size: 28px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-content ul {
  min-height: 116px !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(249, 115, 22, 0.18) !important;
  border-radius: 18px !important;
  background: #fff7ed !important;
  display: grid !important;
  gap: 10px !important;
  list-style: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-content li {
  color: #ea580c !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-content .primary-btn {
  height: 54px !important;
  border-radius: 16px !important;
  font-weight: 950 !important;
}

/* V5 homepage decision-first layout v284. */
html body[data-active-panel="landing"] .landing-v5-target-gap {
  display: block !important;
  margin-top: 2px !important;
  color: #4f46e5 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-details {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 22px !important;
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-details > summary {
  min-height: 72px !important;
  padding: 0 24px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
  color: #111827 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  list-style: none !important;
  user-select: none !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-details > summary::-webkit-details-marker {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-details > summary span {
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-details > summary em {
  flex: 1 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-details > summary b {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: #f1ecff !important;
  color: #7c4dff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: rotate(0deg) !important;
  transition: transform 0.18s ease !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-details[open] > summary b {
  transform: rotate(90deg) !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 24px !important;
  padding: 24px 0 0 !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-grid > article.section-card,
html body[data-active-panel="landing"] .landing-v5-analysis-grid > .section-card {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
  grid-column: span 12 !important;
  grid-row: auto !important;
  order: initial !important;
  opacity: 1 !important;
  transform: none !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-grid > .landing-focus-decision,
html body[data-active-panel="landing"] .landing-v5-analysis-grid > .landing-primary-recommendation,
html body[data-active-panel="landing"] .landing-v5-analysis-grid > .landing-route-card,
html body[data-active-panel="landing"] .landing-v5-analysis-grid > .landing-weekly-growth {
  grid-column: span 12 !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-grid > .landing-xiaowen-briefing,
html body[data-active-panel="landing"] .landing-v5-analysis-grid > .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-v5-analysis-grid > .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-v5-analysis-grid > .landing-training-heatmap,
html body[data-active-panel="landing"] .landing-v5-analysis-grid > .landing-coach-card-bottom {
  grid-column: span 6 !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-grid > .landing-special-training {
  grid-column: span 12 !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-grid > article.section-card.landing-coach-card-bottom {
  min-height: 180px !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-grid .landing-primary-recommendation {
  display: grid !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-grid .landing-route-card {
  display: grid !important;
}

html body[data-active-panel="landing"] .landing-v5-analysis-grid .landing-focus-decision {
  display: grid !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .landing-v5-analysis-grid {
    grid-template-columns: 1fr !important;
  }

  html body[data-active-panel="landing"] .landing-v5-analysis-grid > article.section-card,
  html body[data-active-panel="landing"] .landing-v5-analysis-grid > .section-card {
    grid-column: 1 / -1 !important;
  }
}

/* Growth archive V5: merged growth report + ability profile + offer prediction. */
html body[data-active-panel="growth-profile"] .main {
  background: #f5f8fc !important;
}

.growth-archive-shell {
  padding: 24px;
}

.growth-archive-page {
  display: grid;
  gap: 24px;
  color: #0f172a;
}

.growth-archive-hero,
.growth-archive-card {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.growth-archive-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.8fr) minmax(360px, 1.3fr);
  gap: 24px;
  align-items: center;
  padding: 28px;
}

.growth-archive-person {
  display: flex;
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.growth-archive-avatar {
  width: 88px;
  height: 88px;
  padding: 0;
  border: 3px solid rgba(124, 77, 255, 0.22);
  border-radius: 50%;
  background: #eef2ff;
  overflow: hidden;
  flex: 0 0 88px;
  cursor: pointer;
}

.growth-archive-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.growth-archive-person p,
.growth-archive-card-head p,
.growth-archive-ai-summary p {
  margin: 0;
  color: #7c4dff;
  font-size: 13px;
  font-weight: 900;
}

.growth-archive-person h2,
.growth-archive-card-head h3,
.growth-archive-ai-summary h3 {
  margin: 6px 0;
  color: #111827;
  letter-spacing: 0;
}

.growth-archive-person h2 {
  font-size: 30px;
}

.growth-archive-person span {
  color: #64748b;
  font-size: 15px;
  font-weight: 800;
}

.growth-archive-score {
  min-height: 150px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.08));
  border: 1px solid rgba(124, 77, 255, 0.2);
}

.growth-archive-score span,
.growth-archive-score em {
  color: #64748b;
  font-style: normal;
  font-weight: 800;
}

.growth-archive-score strong {
  color: #7c4dff;
  font-size: 64px;
  line-height: 1;
}

.growth-archive-score small {
  color: #64748b;
  font-size: 18px;
}

.growth-archive-ai-summary {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(245, 248, 252, 0.9), rgba(241, 245, 249, 0.35));
}

.growth-archive-ai-summary h3 {
  font-size: 18px;
  line-height: 1.6;
}

.growth-archive-ai-summary div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.growth-archive-ai-summary span {
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.growth-archive-ai-summary strong {
  display: block;
  color: #111827;
  font-size: 18px;
}

.growth-archive-answer-strip,
.growth-archive-suggestions {
  display: grid;
  gap: 16px;
}

.growth-archive-answer-strip {
  grid-template-columns: 1fr 1.2fr 1fr 1.25fr 1.25fr;
}

.growth-archive-answer-strip article,
.growth-archive-suggestion {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

.growth-archive-answer-strip span,
.growth-archive-suggestion span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.growth-archive-answer-strip strong,
.growth-archive-suggestion strong {
  display: block;
  margin-top: 6px;
  color: #111827;
  font-size: 18px;
  line-height: 1.35;
}

.growth-archive-answer-strip p,
.growth-archive-suggestion p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.growth-archive-answer-action {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(91, 140, 255, 0.07)) !important;
  border-color: rgba(124, 77, 255, 0.22) !important;
}

.growth-archive-answer-action .primary-btn {
  margin-top: 12px;
  width: 100%;
  min-height: 40px;
}

.growth-archive-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 24px;
}

.growth-archive-two-col:nth-of-type(3) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.growth-archive-card {
  padding: 22px;
  min-width: 0;
}

.growth-archive-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.growth-archive-card-head h3 {
  font-size: 22px;
}

.growth-archive-card-head > span,
.growth-archive-legend {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 800;
}

.growth-archive-radar-wrap {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(180px, 1fr);
  gap: 18px;
  align-items: center;
}

.growth-archive-radar {
  width: 100%;
  max-width: 360px;
  min-height: 280px;
}

.growth-archive-radar text {
  fill: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.growth-archive-radar-notes {
  display: grid;
  gap: 10px;
}

.growth-archive-radar-notes strong {
  color: #111827;
  margin-top: 8px;
}

.growth-archive-radar-notes span {
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
}

.growth-archive-radar-notes .strong {
  color: #047857;
  background: rgba(34, 197, 94, 0.12);
}

.growth-archive-radar-notes .weak {
  color: #ea580c;
  background: rgba(251, 146, 60, 0.14);
}

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

.growth-archive-skill-domain {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: #fbfdff;
}

.growth-archive-domain-head,
.growth-archive-skill-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(90px, 1.2fr) 42px 44px;
  align-items: center;
  gap: 10px;
}

.growth-archive-domain-head {
  margin-bottom: 10px;
  color: #111827;
  font-weight: 900;
}

.growth-archive-domain-head span {
  grid-column: 3 / 5;
  color: #7c4dff;
  text-align: right;
}

.growth-archive-skill-row {
  width: 100%;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #475569;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.growth-archive-skill-row i {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.growth-archive-skill-row i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
}

.growth-archive-skill-row strong {
  text-align: right;
  font-weight: 900;
}

.growth-archive-skill-row strong.strong {
  color: #16a34a;
}

.growth-archive-skill-row strong.good {
  color: #2563eb;
}

.growth-archive-skill-row strong.weak {
  color: #ea580c;
}

.growth-archive-skill-row small {
  color: #94a3b8;
  font-weight: 800;
}

.growth-archive-projects,
.growth-archive-job-list,
.growth-archive-plan {
  display: grid;
  gap: 12px;
}

.growth-archive-tags-card {
  background: linear-gradient(135deg, #fff, rgba(91, 140, 255, 0.045));
}

.growth-archive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.growth-archive-tags button {
  display: grid;
  gap: 4px;
  min-width: 136px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.growth-archive-tags button span {
  font-size: 11px;
  font-weight: 900;
}

.growth-archive-tags button strong {
  color: #111827;
  font-size: 15px;
  line-height: 1.25;
}

.growth-archive-tags button.strong {
  border-color: rgba(34, 197, 94, 0.25);
  background: rgba(34, 197, 94, 0.08);
}

.growth-archive-tags button.strong span {
  color: #16a34a;
}

.growth-archive-tags button.growing {
  border-color: rgba(91, 140, 255, 0.25);
  background: rgba(91, 140, 255, 0.08);
}

.growth-archive-tags button.growing span {
  color: #2563eb;
}

.growth-archive-tags button.weak {
  border-color: rgba(249, 115, 22, 0.25);
  background: rgba(249, 115, 22, 0.08);
}

.growth-archive-tags button.weak span {
  color: #ea580c;
}

.growth-archive-project,
.growth-archive-job-list button,
.growth-archive-plan button {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: #fff;
  color: #111827;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.growth-archive-project:hover,
.growth-archive-job-list button:hover,
.growth-archive-plan button:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 77, 255, 0.35);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.growth-archive-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: 6px 12px;
  padding: 16px;
}

.growth-archive-project span,
.growth-archive-job-list strong,
.growth-archive-plan strong {
  font-size: 16px;
  font-weight: 900;
}

.growth-archive-project strong,
.growth-archive-job-list span {
  color: #7c4dff;
  font-size: 24px;
  font-weight: 950;
  text-align: right;
}

.growth-archive-project p,
.growth-archive-project em,
.growth-archive-job-list p,
.growth-archive-job-list em,
.growth-archive-plan p {
  grid-column: 1 / -1;
  margin: 0;
  color: #64748b;
  font-style: normal;
  font-weight: 750;
  line-height: 1.45;
}

.growth-archive-impression {
  display: grid;
  gap: 14px;
}

.growth-archive-impression section {
  padding: 14px;
  border-radius: 18px;
  background: #f8fafc;
}

.growth-archive-impression h4 {
  margin: 0 0 8px;
  color: #111827;
}

.growth-archive-impression p {
  margin: 8px 0;
  color: #475569;
  font-weight: 800;
  line-height: 1.55;
}

.growth-archive-impression button {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(124, 77, 255, 0.2);
  border-radius: 14px;
  background: rgba(124, 77, 255, 0.08);
  color: #5b21b6;
  font-weight: 900;
  text-align: left;
}

.growth-archive-job-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.growth-archive-job-list button {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.growth-archive-job-list button.active {
  border-color: rgba(124, 77, 255, 0.55);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(91, 140, 255, 0.08));
}

.growth-archive-evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.growth-archive-evidence article {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: #fbfdff;
}

.growth-archive-evidence article:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -14px;
  top: 50%;
  color: #7c4dff;
  font-weight: 950;
}

.growth-archive-evidence span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.1);
  color: #7c4dff;
  font-weight: 900;
}

.growth-archive-evidence strong {
  display: block;
  margin-top: 12px;
  color: #111827;
  font-size: 34px;
  line-height: 1;
}

.growth-archive-evidence h4 {
  margin: 10px 0;
  color: #111827;
}

.growth-archive-evidence p,
.growth-archive-evidence em {
  margin: 0;
  color: #64748b;
  font-style: normal;
  font-weight: 750;
  line-height: 1.5;
}

.growth-archive-next {
  background: linear-gradient(135deg, #fff, rgba(124, 77, 255, 0.05));
}

.growth-archive-plan {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.growth-archive-plan button {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 8px 12px;
  align-items: center;
  padding: 16px;
}

.growth-archive-plan span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  color: #fff;
  font-weight: 950;
}

.growth-archive-plan em {
  color: #7c4dff;
  font-style: normal;
  font-weight: 900;
}

.growth-archive-plan p {
  grid-column: 2 / 4;
}

.growth-archive-suggestions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.growth-archive-suggestion {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 188px;
}

.growth-archive-suggestion .ghost-btn {
  align-self: end;
  margin-top: 8px;
  width: max-content;
}

.growth-archive-suggestion.优先提升 {
  background: linear-gradient(135deg, #fff, rgba(249, 115, 22, 0.08));
}

.growth-archive-suggestion.保持优势 {
  background: linear-gradient(135deg, #fff, rgba(34, 197, 94, 0.08));
}

.growth-archive-suggestion.长期发展 {
  background: linear-gradient(135deg, #fff, rgba(91, 140, 255, 0.08));
}

@media (max-width: 1280px) {
  .growth-archive-hero,
  .growth-archive-answer-strip,
  .growth-archive-two-col,
  .growth-archive-two-col:nth-of-type(3),
  .growth-archive-suggestions {
    grid-template-columns: 1fr;
  }

  .growth-archive-ai-summary div,
  .growth-archive-plan,
  .growth-archive-evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .growth-archive-shell {
    padding: 16px;
  }

  .growth-archive-radar-wrap,
  .growth-archive-skill-grid,
  .growth-archive-job-list,
  .growth-archive-ai-summary div,
  .growth-archive-plan,
  .growth-archive-evidence {
    grid-template-columns: 1fr;
  }

  .growth-archive-evidence article::after {
    display: none;
  }
}

/* Project Practice v1: hardware project authenticity cockpit. */
html:not(.react-student-embedded) body[data-active-panel="project-practice"] {
  background: #f5f8fc !important;
}

.project-practice-shell {
  padding: 24px;
}

.project-practice-page {
  display: grid;
  gap: 22px;
  color: #0f172a;
}

.project-practice-detail {
  display: grid;
  gap: 22px;
}

.project-practice-home {
  display: grid;
  gap: 18px;
}

.project-home-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 2px 0;
}

.project-home-title p {
  margin: 0 0 4px;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.project-home-title h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 0;
}

.project-home-title span {
  max-width: 440px;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}

.project-today-card,
.project-all-projects {
  background: #fff;
  border: 1px solid rgba(124, 77, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
}

.project-today-card {
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 24px;
  align-items: stretch;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 18%, rgba(124, 77, 255, 0.18), transparent 28%),
    linear-gradient(135deg, #fff 0%, #f6f9ff 58%, #f1efff 100%);
}

.project-today-copy {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 14px;
}

.project-today-copy > span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
  font-size: 13px;
  font-weight: 1000;
}

.project-today-copy h3 {
  margin: 0;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: 0;
}

.project-today-copy p {
  max-width: 780px;
  margin: 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 800;
}

.project-today-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(118px, 1fr));
  gap: 12px;
  width: min(760px, 100%);
}

.project-today-meta div {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(124, 77, 255, 0.12);
}

.project-today-meta em {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.project-today-meta strong {
  color: #0f172a;
  font-size: 24px;
  line-height: 1;
  font-weight: 1000;
  white-space: nowrap;
}

.project-today-progress {
  width: min(760px, 100%);
  height: 10px;
  border-radius: 999px;
  background: #e9edf7;
  overflow: hidden;
}

.project-today-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
  box-shadow: 0 8px 20px rgba(124, 77, 255, 0.22);
}

.project-today-panel {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(124, 77, 255, 0.13);
  background:
    radial-gradient(circle at 22% 18%, rgba(91, 140, 255, 0.18), transparent 28%),
    rgba(255, 255, 255, 0.72);
}

.project-today-panel strong {
  color: #0f172a;
  font-size: 18px;
  font-weight: 1000;
}

.project-today-panel div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-today-panel .project-today-loop-tags {
  gap: 8px;
  padding-top: 2px;
}

.project-today-panel span {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.1);
  color: #6741d9;
  font-size: 13px;
  font-weight: 1000;
}

.project-today-panel .project-today-loop-tags span {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  background: rgba(34, 197, 94, 0.08);
  color: #047857;
  font-size: 12px;
}

.project-today-panel p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 800;
}

.project-home-loop-strip {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(124, 77, 255, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 77, 255, 0.12), transparent 30%),
    #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.project-home-loop-strip div {
  display: grid;
  gap: 4px;
}

.project-home-loop-strip span {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 1000;
}

.project-home-loop-strip strong {
  color: #0f172a;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 1000;
}

.project-home-loop-strip ol {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-home-loop-strip li {
  position: relative;
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #f6f8ff;
  border: 1px solid rgba(91, 140, 255, 0.14);
  color: #334155;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

.project-home-loop-strip li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  color: #8b5cf6;
  font-size: 14px;
  font-weight: 1000;
}

.project-home-loop-strip li:first-child,
.project-home-loop-strip li:last-child {
  background: rgba(124, 77, 255, 0.1);
  color: #6d28d9;
}

.project-all-projects {
  padding: 20px;
}

.project-all-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.project-all-head h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.project-all-head span {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 900;
}

.project-home-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.project-home-card {
  min-height: 266px;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto auto;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fff;
  color: #0f172a;
  text-align: left;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.project-home-card.active {
  border-color: rgba(124, 77, 255, 0.42);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(91, 140, 255, 0.06));
}

.project-home-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.project-home-card-top span {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 1000;
}

.project-home-card-top strong {
  color: #7c4dff;
  font-size: 22px;
  line-height: 1;
  font-weight: 1000;
}

.project-home-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.project-home-card dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #f8fbff;
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.project-home-card dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.project-home-card dd {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 1000;
  white-space: nowrap;
}

.project-home-abilities {
  display: grid;
  gap: 8px;
}

.project-home-abilities > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.project-home-abilities p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.project-home-abilities em {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.1);
  color: #6741d9;
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
}

.project-home-loop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-home-loop-tags span {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(91, 140, 255, 0.16);
  background: rgba(91, 140, 255, 0.08);
  color: #2563eb;
  font-size: 11px;
  line-height: 1;
  font-weight: 1000;
  white-space: nowrap;
}

.project-home-card > em {
  color: #334155;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.project-home-card i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: #e8edf6;
  overflow: hidden;
}

.project-home-card b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
}

.project-card-action {
  width: 100%;
  justify-content: center;
  min-height: 38px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 1000;
}

.project-practice-hero,
.project-loop-board,
.project-pack-selector,
.project-practice-card,
.project-coach-panel {
  background: #fff;
  border: 1px solid rgba(124, 77, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
}

.project-practice-hero {
  min-height: 230px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: stretch;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(124, 77, 255, 0.16), transparent 30%),
    linear-gradient(135deg, #fff 0%, #f6f9ff 58%, #f1efff 100%);
}

.project-practice-hero-copy p:first-child,
.project-card-head p,
.project-coach-head p {
  margin: 0 0 8px;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-practice-hero-copy h2 {
  margin: 0;
  max-width: 720px;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: 0;
}

.project-practice-hero-copy > p:last-of-type {
  max-width: 760px;
  margin: 16px 0 0;
  color: #64748b;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 700;
}

.project-practice-goals,
.project-module-row,
.project-followup-list,
.project-coach-answer div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.project-practice-goals span,
.project-module-row span,
.project-coach-answer em {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.1);
  color: #6741d9;
  font-size: 13px;
  font-weight: 900;
  font-style: normal;
}

.project-practice-score-card {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(124, 77, 255, 0.16);
}

.project-practice-score-card span,
.project-authenticity-card span {
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.project-practice-score-card strong,
.project-authenticity-card strong {
  color: #7c4dff;
  font-size: 52px;
  line-height: 1;
  letter-spacing: 0;
}

.project-practice-score-card em {
  color: #22c55e;
  font-style: normal;
  font-weight: 900;
}

.project-loop-board {
  display: grid;
  gap: 16px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.98)),
    linear-gradient(90deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.04));
}

.project-loop-journey {
  grid-column: 1 / -1;
}

.project-loop-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.project-loop-heading p {
  margin: 0 0 6px;
  color: #7c4dff;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-loop-heading h3 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 1000;
}

.project-loop-heading span {
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

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

.project-loop-step {
  position: relative;
  min-height: 142px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.project-loop-step.done {
  border-color: rgba(34, 197, 94, 0.28);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.78), #fff);
}

.project-loop-step.active {
  border-color: rgba(124, 77, 255, 0.48);
  box-shadow: 0 14px 36px rgba(124, 77, 255, 0.14);
}

.project-loop-step.pending {
  opacity: .78;
}

.project-loop-step::after {
  content: "";
  position: absolute;
  inset: auto 16px 14px 16px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
  opacity: .78;
}

.project-loop-step i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
  font-size: 13px;
  font-style: normal;
  font-weight: 1000;
}

.project-loop-step.done i {
  background: #22c55e;
  color: #fff;
}

.project-loop-step.active i {
  background: #7c4dff;
  color: #fff;
}

.project-loop-step span {
  color: #64748b;
  font-size: 12px;
  font-weight: 1000;
}

.project-loop-step strong {
  min-height: 40px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 1000;
}

.project-loop-step em {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
  font-weight: 800;
}

.project-loop-step b {
  margin-top: 3px;
  color: #6741d9;
  font-size: 12px;
  font-weight: 1000;
}

.project-loop-step.done b {
  color: #16a34a;
}

.project-loop-step.pending b {
  color: #94a3b8;
}

.project-loop-step.home::after,
.project-loop-step.home_update::after {
  background: linear-gradient(90deg, #22c55e, #5b8cff);
}

.project-loop-step.project::after {
  background: linear-gradient(90deg, #7c4dff, #a78bfa);
}

.project-loop-step.case::after,
.project-loop-step.interview::after {
  background: linear-gradient(90deg, #5b8cff, #7c4dff);
}

.project-loop-step.debug::after {
  background: linear-gradient(90deg, #fb923c, #7c4dff);
}

.project-loop-step.waveform::after {
  background: linear-gradient(90deg, #38bdf8, #22c55e);
}

.project-loop-step.ai_score::after {
  background: linear-gradient(90deg, #f97316, #7c4dff);
}

.project-loop-step.growth::after,
.project-loop-step.growth_archive::after {
  background: linear-gradient(90deg, #22c55e, #7c4dff);
}

.project-pack-selector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}

.project-pack-selector button {
  min-height: 132px;
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #fff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

.project-pack-selector button.active {
  border-color: rgba(124, 77, 255, 0.42);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(91, 140, 255, 0.06));
  box-shadow: 0 12px 26px rgba(124, 77, 255, 0.14);
}

.project-pack-selector span {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 900;
}

.project-pack-selector strong {
  font-size: 16px;
  line-height: 1.3;
}

.project-pack-selector em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.project-pack-selector i {
  justify-self: end;
  color: #22c55e;
  font-size: 20px;
  font-style: normal;
  font-weight: 1000;
}

.project-practice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}

.project-practice-main {
  display: grid;
  gap: 18px;
}

.project-practice-card,
.project-coach-panel {
  padding: 20px;
}

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

.project-card-head h3,
.project-coach-head h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

.project-card-head > span {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(91, 140, 255, 0.1);
  color: #5b8cff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.project-background-card > p {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 700;
}

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

.project-schematic-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.project-schematic-flow span {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fbff;
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-weight: 900;
}

.project-schematic-flow i {
  color: #94a3b8;
  font-style: normal;
  font-weight: 900;
}

.project-test-data-list {
  display: grid;
  gap: 10px;
}

.project-test-data-list div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 12px;
  border-radius: 14px;
  background: #f8fbff;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.project-test-data-list span,
.project-test-data-list strong {
  font-weight: 900;
}

.project-test-data-list em,
.project-test-data-list i {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.project-waveform-card,
.project-debug-case-card {
  min-height: 360px;
}

.project-waveform-svg {
  width: 100%;
  height: 260px;
  border-radius: 18px;
  display: block;
}

.project-debug-steps {
  display: grid;
  gap: 10px;
}

.project-debug-steps p {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fbff;
  color: #334155;
  font-weight: 800;
}

.project-debug-steps span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #7c4dff;
  color: #fff;
  font-size: 12px;
}

.project-debug-case-card > strong {
  display: block;
  margin-top: 14px;
  color: #0f172a;
  line-height: 1.6;
}

.project-followup-list button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  background: rgba(124, 77, 255, 0.08);
  color: #6741d9;
  font-weight: 900;
}

.project-coach-panel {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 16px;
}

.project-coach-head span {
  color: #64748b;
  font-weight: 800;
}

.project-authenticity-card {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(34, 197, 94, 0.08));
  border: 1px solid rgba(124, 77, 255, 0.16);
}

.project-authenticity-card strong {
  display: block;
  margin: 8px 0 10px;
}

.project-authenticity-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

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

.project-authenticity-card dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.project-authenticity-card dd {
  margin: 0;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.45;
}

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

.project-coach-question-list button {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #fff;
  color: #0f172a;
  text-align: left;
  font-weight: 900;
}

.project-coach-question-list button.active {
  color: #6741d9;
  border-color: rgba(124, 77, 255, 0.36);
  background: rgba(124, 77, 255, 0.08);
}

.project-coach-answer {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: #f8fbff;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.project-coach-answer span {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 900;
}

.project-coach-answer h4,
.project-coach-answer p {
  margin: 0;
}

.project-coach-answer p {
  color: #475569;
  line-height: 1.65;
  font-weight: 800;
}

.project-coach-answer strong {
  color: #ef4444;
  line-height: 1.55;
}

.project-practice-detail {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}

.project-detail-section {
  grid-column: 1;
  min-width: 0;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(124, 77, 255, 0.12);
  background: #fff;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
}

.project-detail-section[aria-label="AI项目教练"] {
  grid-column: 2;
  grid-row: 2 / span 8;
  position: sticky;
  top: 92px;
  align-self: start;
}

.project-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.project-section-head > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
  font-size: 13px;
  font-weight: 1000;
}

.project-section-head p,
.project-section-head h3 {
  margin: 0;
}

.project-section-head p {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-section-head h3 {
  margin-top: 3px;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 1000;
}

.project-intro-layout,
.project-debug-layout,
.project-waveform-layout,
.project-summary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: stretch;
}

.project-section-intro .project-intro-layout {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.64fr);
}

.project-intro-copy {
  display: grid;
  align-content: start;
  gap: 14px;
}

.project-section-kicker {
  width: max-content;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
  font-size: 12px;
  font-weight: 1000;
}

.project-intro-copy h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: 0;
}

.project-intro-copy > p:not(.project-section-kicker) {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 800;
}

.project-intro-meta,
.project-intro-specs,
.project-summary-learned {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.project-intro-facts span {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #f8fbff;
}

.project-intro-facts b {
  color: #64748b;
  font-size: 12px;
  font-weight: 1000;
}

.project-intro-facts strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-intro-meta span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 12px;
  background: #f8fbff;
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.project-intro-specs span,
.project-summary-learned span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.1);
  color: #6741d9;
  font-size: 12px;
  font-weight: 1000;
}

.project-protection-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(34, 197, 94, 0.16);
  background: rgba(34, 197, 94, 0.07);
}

.project-protection-row b {
  color: #16a34a;
  font-size: 13px;
  font-weight: 1000;
}

.project-protection-row div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-protection-row span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  color: #15803d;
  font-size: 12px;
  font-weight: 1000;
}

.project-intro-score,
.project-intro-diagram,
.project-debug-layout aside,
.project-waveform-layout aside {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(124, 77, 255, 0.15);
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 77, 255, 0.12), transparent 38%),
    #f8fbff;
}

.project-intro-diagram {
  align-content: stretch;
  justify-items: stretch;
  gap: 12px;
}

.project-mini-system-head {
  display: grid;
  gap: 6px;
}

.project-mini-system-head span {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 1000;
}

.project-mini-system-head strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-mini-system-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.project-mini-system-flow button {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.project-mini-system-flow button:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 77, 255, 0.42);
}

.project-mini-system-flow button i {
  color: #7c4dff;
  font-style: normal;
  font-size: 12px;
  font-weight: 1000;
}

.project-mini-system-flow button span {
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-mini-system-flow em {
  display: none;
}

.project-intro-diagram > p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
  font-weight: 850;
}

.project-intro-score span,
.project-debug-layout aside span,
.project-waveform-layout aside span,
.project-coach-next span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.project-intro-score strong {
  color: #7c4dff;
  font-size: 48px;
  line-height: 1;
  font-weight: 1000;
}

.project-intro-score em,
.project-waveform-layout aside p {
  margin: 0;
  color: #475569;
  font-style: normal;
  line-height: 1.55;
  font-weight: 800;
}

.project-context-copy {
  margin: 8px 0 12px;
  color: #475569;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 800;
}

.project-context-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.project-context-chip-list span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  background: rgba(124, 77, 255, 0.08);
  color: #6741d9;
  font-size: 12px;
  font-weight: 1000;
}

.project-context-chip-list.compact {
  margin: 4px 0 2px;
}

.project-debug-layout aside em,
.project-waveform-layout aside em,
.project-waveform-layout aside small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
  font-style: normal;
  font-weight: 900;
}

.project-architecture-layout {
  display: grid;
  gap: 14px;
}

.project-architecture-board {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(124, 77, 255, 0.12);
  background:
    linear-gradient(rgba(124, 77, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 77, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 18% 18%, rgba(91, 140, 255, 0.12), transparent 30%),
    #f8fbff;
  background-size: 32px 32px, 32px 32px, auto, auto;
}

.project-architecture-node {
  position: relative;
  flex: 1 0 132px;
  min-height: 138px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.project-architecture-node:hover {
  border-color: rgba(124, 77, 255, 0.42);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(124, 77, 255, 0.14);
}

.project-architecture-node span {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.12);
  color: #6741d9;
  font-size: 12px;
  font-weight: 1000;
}

.project-architecture-node strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-architecture-node em {
  display: -webkit-box;
  min-height: 42px;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
  font-weight: 800;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.project-architecture-node small {
  margin-top: auto;
  color: #475569;
  font-size: 12px;
  font-weight: 1000;
}

.project-architecture-node[data-arch-tone="power"] span {
  background: rgba(34, 197, 94, 0.13);
  color: #16a34a;
}

.project-architecture-node[data-arch-tone="mos"] span,
.project-architecture-node[data-arch-tone="motion"] span {
  background: rgba(249, 115, 22, 0.13);
  color: #ea580c;
}

.project-architecture-node[data-arch-tone="bus"] span,
.project-architecture-node[data-arch-tone="sensor"] span {
  background: rgba(91, 140, 255, 0.14);
  color: #2563eb;
}

.project-architecture-arrow {
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  align-self: center;
  color: #7c4dff;
  font-style: normal;
  font-weight: 1000;
}

.project-architecture-flow button {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  background: #f8fbff;
  color: #0f172a;
  font-weight: 1000;
  cursor: pointer;
}

.project-architecture-flow button:hover {
  border-color: rgba(124, 77, 255, 0.42);
  color: #6741d9;
  transform: translateY(-1px);
}

.project-architecture-note {
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.06));
  border: 1px solid rgba(124, 77, 255, 0.12);
}

.project-architecture-note strong,
.project-architecture-note p,
.project-debug-layout h4,
.project-summary-layout h4,
.project-coach-next h4 {
  margin: 0;
}

.project-architecture-note p {
  margin-top: 6px;
  color: #475569;
  line-height: 1.6;
  font-weight: 800;
}

.project-learning-route-section {
  gap: 16px;
}

.project-route-overview {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  background: linear-gradient(120deg, rgba(124, 77, 255, 0.1), rgba(91, 140, 255, 0.06), #fff);
}

.project-route-overview div,
.project-route-step,
.project-route-step-main,
.project-route-step-foot {
  min-width: 0;
}

.project-route-overview span,
.project-route-overview em {
  display: block;
  color: #64748b;
  font-style: normal;
  font-weight: 900;
}

.project-route-overview strong {
  display: block;
  color: #7c4dff;
  font-size: 36px;
  line-height: 1.05;
  font-weight: 1000;
}

.project-route-overview p {
  margin: 0;
  color: #334155;
  line-height: 1.7;
  font-weight: 850;
}

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

.project-route-step {
  min-height: 176px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-content: start;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fff;
  color: #0f172a;
  text-align: left;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.project-route-step.is-next {
  border-color: rgba(124, 77, 255, 0.34);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 30px rgba(124, 77, 255, 0.12);
}

.project-route-step i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
  font-style: normal;
  font-weight: 1000;
}

.project-route-step[data-route-status="done"] i {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.project-route-step[data-route-status="weak"] i {
  background: rgba(249, 115, 22, 0.12);
  color: #ea580c;
}

.project-route-step span {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-route-step strong {
  justify-self: end;
  color: #7c4dff;
  font-size: 26px;
  line-height: 1;
  font-weight: 1000;
}

.project-route-step em {
  display: -webkit-box;
  min-height: 38px;
  margin-top: 6px;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
  font-style: normal;
  font-weight: 850;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.project-route-step b {
  color: #6741d9;
  font-size: 12px;
  font-weight: 1000;
}

.project-route-step small {
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #e8edf6;
  overflow: hidden;
}

.project-route-step small u {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
}

.project-route-step[data-route-status="done"] small u {
  background: linear-gradient(90deg, #22c55e, #5b8cff);
}

.project-route-step[data-route-status="weak"] small u {
  background: linear-gradient(90deg, #f97316, #fb7185);
}

.project-route-step-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.project-route-step-foot button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  background: rgba(124, 77, 255, 0.08);
  color: #6741d9;
  font-weight: 1000;
  cursor: pointer;
}

.project-route-step-foot button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  color: #fff;
}

.project-source-hub {
  display: grid;
  grid-template-columns: minmax(220px, 0.76fr) 1.24fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(124, 77, 255, 0.14);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.08), rgba(91, 140, 255, 0.04));
}

.project-source-hub strong {
  display: block;
  color: #111827;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 1000;
}

.project-source-hub p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 800;
}

.project-source-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.project-source-list button {
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.78);
  color: #334155;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.project-source-list button:hover,
.project-source-list button.active {
  border-color: rgba(124, 77, 255, 0.36);
  background: #fff;
  transform: translateY(-1px);
}

.project-source-list span,
.project-source-list b,
.project-source-list small {
  display: block;
}

.project-source-list span {
  font-size: 12px;
  font-weight: 1000;
}

.project-source-list b {
  margin-top: 2px;
  color: #7c4dff;
  font-size: 18px;
  line-height: 1;
  font-weight: 1000;
}

.project-source-list small {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
}

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

.project-case-grid article {
  min-height: 210px;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fff;
}

.project-case-grid article span,
.project-case-grid article i {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.project-case-grid article strong {
  color: #0f172a;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 1000;
}

.project-case-grid article em {
  min-height: 58px;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
  font-style: normal;
  font-weight: 800;
}

.project-case-template-preview {
  display: grid;
  gap: 5px;
  padding: 8px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.project-case-template-preview p {
  margin: 0;
  color: #475569;
  font-size: 11px;
  line-height: 1.42;
  font-weight: 850;
}

.project-case-template-preview b {
  color: #0f172a;
  font-weight: 1000;
}

.project-case-grid article .project-case-source {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: #f8fafc;
  color: #64748b;
}

.project-case-grid article .project-case-source.debug {
  background: rgba(124, 77, 255, 0.1);
  color: #6d3df3;
}

.project-case-grid article .project-case-source.waveform {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

.project-case-grid article .project-case-source.audio {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.project-case-grid article .project-case-source.official {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.project-case-grid article .project-case-source.ai {
  background: rgba(236, 72, 153, 0.1);
  color: #db2777;
}

.project-case-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.project-case-actions button:first-child {
  grid-column: 1 / -1;
}

.project-case-actions button {
  min-height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  background: rgba(124, 77, 255, 0.08);
  color: #6741d9;
  font-size: 12px;
  font-weight: 1000;
  cursor: pointer;
}

.project-case-detail-panel {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(124, 77, 255, 0.2);
  background:
    radial-gradient(circle at top left, rgba(124, 77, 255, 0.1), transparent 28%),
    linear-gradient(135deg, #fff, #f8fbff);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.project-case-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.project-case-detail-head span,
.project-case-flow b {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 1000;
}

.project-case-detail-head h4 {
  margin: 5px 0 8px;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 1000;
}

.project-case-detail-head p {
  max-width: 820px;
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 800;
}

.project-case-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.project-case-detail-actions button {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 12px;
  border: 1px solid rgba(124, 77, 255, 0.2);
  background: #fff;
  color: #6741d9;
  font-size: 12px;
  font-weight: 1000;
  cursor: pointer;
}

.project-case-detail-actions button:nth-child(2) {
  color: #fff;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
}

.project-case-template-section {
  grid-column: 1 / -1;
}

.project-case-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.project-case-template-grid div {
  min-height: 86px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 77, 255, 0.08), transparent 34%),
    #fff;
}

.project-case-template-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.1);
  color: #6d3df3;
  font-size: 11px;
  font-weight: 1000;
}

.project-case-template-grid p {
  margin: 8px 0 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 850;
}

.project-case-xiaowen {
  display: grid;
  gap: 14px;
  margin: 16px 0 18px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  background:
    radial-gradient(circle at 8% 0%, rgba(124, 77, 255, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.project-case-xiaowen.compact {
  margin: 0;
  box-shadow: none;
}

.project-case-xiaowen-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.project-case-xiaowen-head span {
  color: #7c4dff;
  font-size: 12px;
  font-weight: 1000;
}

.project-case-xiaowen-head h4 {
  margin: 4px 0 7px;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 1000;
}

.project-case-xiaowen-head p {
  max-width: 760px;
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 850;
}

.project-case-xiaowen-head > strong {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.1);
  color: #6741d9;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

.project-case-xiaowen-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-case-xiaowen-prompts span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(91, 140, 255, 0.1);
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
}

.project-case-xiaowen-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.project-case-xiaowen-modes section {
  min-height: 188px;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.92);
}

.project-case-xiaowen-modes section[data-case-mode="engineering"] {
  border-color: rgba(124, 77, 255, 0.2);
  background: rgba(124, 77, 255, 0.07);
}

.project-case-xiaowen-modes section[data-case-mode="interview"] {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.06);
}

.project-case-xiaowen-modes em {
  color: #7c4dff;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
}

.project-case-xiaowen-modes strong {
  color: #0f172a;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 1000;
}

.project-case-xiaowen-modes p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 850;
}

.project-case-xiaowen-modes div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-case-xiaowen-modes div span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
}

.project-case-xiaowen-modes button {
  align-self: end;
  justify-self: start;
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  cursor: pointer;
}

.project-my-assistant {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.project-my-assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.project-my-assistant-head span {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
  font-size: 12px;
  font-weight: 900;
}

.project-my-assistant-head h3 {
  margin: 10px 0 6px;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: 0;
}

.project-my-assistant-head p,
.project-xiaowen-project-preview span,
.project-xiaowen-architecture p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}

.project-xiaowen-project-preview {
  padding: 14px 16px;
  border: 1px dashed rgba(124, 58, 237, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

.project-xiaowen-project-assistant {
  display: grid;
  gap: 14px;
}

.project-xiaowen-analysis-main,
.project-xiaowen-answer-grid section,
.project-xiaowen-analysis-grid section,
.project-xiaowen-architecture {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.project-xiaowen-analysis-main {
  padding: 18px;
}

.project-xiaowen-analysis-main span,
.project-xiaowen-answer-grid em,
.project-xiaowen-analysis-grid em,
.project-xiaowen-architecture > span {
  display: block;
  margin-bottom: 8px;
  color: #7c3aed;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.project-xiaowen-analysis-main strong {
  display: block;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.65;
}

.project-xiaowen-answer-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 14px;
}

.project-xiaowen-answer-grid section,
.project-xiaowen-analysis-grid section,
.project-xiaowen-architecture {
  padding: 16px;
}

.project-xiaowen-answer-grid p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.72;
}

.project-xiaowen-analysis-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.project-xiaowen-analysis-grid span,
.project-xiaowen-analysis-grid button {
  display: block;
  width: 100%;
  min-height: 36px;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.86);
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
}

.project-xiaowen-analysis-grid button {
  cursor: pointer;
}

.project-xiaowen-analysis-grid button b {
  display: block;
  color: #0f172a;
  font-size: 13px;
}

.project-xiaowen-analysis-grid button small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.project-xiaowen-architecture {
  display: grid;
  gap: 10px;
}

.project-xiaowen-architecture ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-xiaowen-architecture li {
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(59, 130, 246, 0.08));
  color: #4338ca;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

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

.project-case-flow section {
  min-height: 150px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.9);
}

.project-case-flow section strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 1000;
}

.project-case-flow section p,
.project-case-flow section em {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
  font-style: normal;
  font-weight: 800;
}

.project-case-resource-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.project-case-resource-list span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(91, 140, 255, 0.1);
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
}

.project-case-analysis-box,
.project-case-score-box {
  grid-column: span 2;
}

.project-case-analysis-box textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  outline: none;
}

.project-case-analysis-box textarea:focus {
  border-color: rgba(124, 77, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.1);
}

.project-case-analysis-box button {
  justify-self: start;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
  cursor: pointer;
}

.project-case-score-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.project-case-score-value strong {
  color: #7c4dff !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

.project-case-score-value span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  font-size: 12px;
  font-weight: 1000;
}

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

.project-case-score-columns div {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  background: #f8fafc;
}

.project-case-score-columns div span {
  color: #334155;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 850;
}

@media (max-width: 1120px) {
  .project-case-detail-head,
  .project-case-flow,
  .project-case-score-columns {
    grid-template-columns: 1fr;
  }

  .project-case-analysis-box,
  .project-case-score-box {
    grid-column: auto;
  }

  .project-case-detail-actions {
    justify-content: flex-start;
  }

  .project-case-xiaowen-head,
  .project-case-xiaowen-modes {
    grid-template-columns: 1fr;
  }

  .project-my-assistant-head,
  .project-xiaowen-answer-grid,
  .project-xiaowen-analysis-grid,
  .project-xiaowen-architecture ol {
    grid-template-columns: 1fr;
  }
}

.project-debug-layout h4,
.project-waveform-layout aside strong,
.project-summary-layout h4,
.project-coach-next h4 {
  color: #0f172a;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 1000;
}

.project-waveform-preview .project-waveform-svg {
  height: 300px;
}

.project-coach-layout {
  display: grid;
  gap: 14px;
}

.project-coach-next {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(91, 140, 255, 0.06));
}

.project-coach-next p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
  font-weight: 800;
}

.project-summary-layout {
  grid-template-columns: minmax(0, 1fr) 260px;
}

.project-summary-layout p {
  margin: 10px 0 14px;
  color: #475569;
  line-height: 1.65;
  font-weight: 800;
}

.project-summary-metrics,
.project-ability-gain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.project-summary-metrics span,
.project-ability-gain span {
  min-height: 68px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  background: #f8fbff;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.project-summary-metrics b,
.project-ability-gain strong {
  color: #7c4dff;
  font-size: 22px;
  line-height: 1;
}

.project-summary-metrics em,
.project-ability-gain em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.project-summary-actions {
  display: grid;
  align-content: center;
  gap: 10px;
}

@media (max-width: 1200px) {
  .project-today-card,
  .project-practice-hero,
  .project-practice-grid,
  .project-practice-detail,
  .project-intro-layout,
  .project-section-intro .project-intro-layout,
  .project-architecture-board,
  .project-source-hub,
  .project-debug-layout,
  .project-waveform-layout,
  .project-summary-layout {
    grid-template-columns: 1fr;
  }
  .project-architecture-board {
    display: grid;
    gap: 10px;
    overflow-x: visible;
  }
  .project-architecture-arrow {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: -2px auto;
    border-radius: 999px;
    background: rgba(124, 77, 255, 0.1);
    color: #7c4dff;
    transform: rotate(90deg);
    font-style: normal;
    font-weight: 1000;
  }
  .project-detail-section[aria-label="AI项目教练"] {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  .project-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-route-grid,
  .project-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-source-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-loop-board {
    grid-template-columns: 1fr;
  }
  .project-loop-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-pack-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-route-overview {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .project-route-overview .primary-btn {
    justify-self: start;
  }
  .project-coach-panel {
    position: static;
  }
}

@media (max-width: 760px) {
  .project-practice-shell {
    padding: 14px;
  }
  .project-practice-hero-copy h2 {
    font-size: 26px;
  }
  .project-home-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .project-home-title span {
    text-align: left;
  }
  .project-today-copy h3 {
    font-size: 30px;
  }
  .project-today-meta,
  .project-home-grid,
  .project-intro-facts,
  .project-mini-system-flow,
  .project-protection-row {
    grid-template-columns: 1fr;
  }
  .project-pack-selector,
  .project-loop-board,
  .project-evidence-grid,
  .project-source-list,
  .project-route-grid,
  .project-case-grid,
  .project-summary-metrics,
  .project-ability-gain {
    grid-template-columns: 1fr;
  }
}

/* Debug Mission v5: evidence-first reasoning flow. */
html body[data-active-panel="debug-lab"] .debug-case-center-card {
  padding: 20px !important;
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.86)),
    radial-gradient(circle at 12% 12%, rgba(124, 77, 255, 0.12), transparent 38%) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06) !important;
}

html body[data-active-panel="debug-lab"] .debug-case-center-copy {
  min-height: 100% !important;
  padding: 18px !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(91, 140, 255, 0.08)) !important;
}

html body[data-active-panel="debug-lab"] .debug-case-center-copy p,
html body[data-active-panel="debug-lab"] .debug-case-group > div:first-child span {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="debug-lab"] .debug-case-center-copy h2 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 24px !important;
  line-height: 1.16 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="debug-lab"] .debug-case-center-copy > span {
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 800 !important;
}

html body[data-active-panel="debug-lab"] .debug-case-group-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html body[data-active-panel="debug-lab"] .debug-case-group {
  min-width: 0 !important;
  padding: 14px !important;
  display: grid !important;
  gap: 12px !important;
  align-content: start !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.84) !important;
}

html body[data-active-panel="debug-lab"] .debug-case-group > div:first-child {
  display: grid !important;
  gap: 4px !important;
}

html body[data-active-panel="debug-lab"] .debug-case-group > div:first-child strong {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="debug-lab"] .debug-case-chip-row {
  display: grid !important;
  gap: 8px !important;
}

html body[data-active-panel="debug-lab"] .debug-case-chip {
  width: 100% !important;
  min-height: 76px !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  text-align: left !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #0f172a !important;
  cursor: pointer !important;
}

html body[data-active-panel="debug-lab"] .debug-case-chip:hover,
html body[data-active-panel="debug-lab"] .debug-case-chip.is-active {
  border-color: rgba(124, 77, 255, 0.38) !important;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(91, 140, 255, 0.08)) !important;
  box-shadow: 0 12px 24px rgba(124, 77, 255, 0.12) !important;
}

html body[data-active-panel="debug-lab"] .debug-case-chip > span {
  width: 58px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.12) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="debug-lab"] .debug-case-chip strong {
  overflow: hidden !important;
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.36 !important;
  font-weight: 950 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="debug-lab"] .debug-case-chip em {
  padding: 5px 8px !important;
  border-radius: 999px !important;
  color: #2563eb !important;
  background: rgba(91, 140, 255, 0.12) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

html body[data-active-panel="debug-lab"] .debug-case-chip.is-active em {
  color: #15803d !important;
  background: rgba(34, 197, 94, 0.14) !important;
}

html body[data-active-panel="debug-lab"] .debug-hypothesis-board {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body[data-active-panel="debug-lab"] .debug-hypothesis-card {
  min-height: 142px !important;
  padding: 16px !important;
  display: grid !important;
  gap: 8px !important;
  align-content: start !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 255, 0.86)) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04) !important;
}

html body[data-active-panel="debug-lab"] .debug-hypothesis-card > span {
  width: 28px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.12) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="debug-lab"] .debug-hypothesis-card strong,
html body[data-active-panel="debug-lab"] .debug-exclusion-item strong,
html body[data-active-panel="debug-lab"] .debug-standard-path-item p {
  color: #0f172a !important;
  font-weight: 950 !important;
}

html body[data-active-panel="debug-lab"] .debug-hypothesis-card p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

html body[data-active-panel="debug-lab"] .debug-hypothesis-card em,
html body[data-active-panel="debug-lab"] .debug-root-locked-panel span {
  width: max-content !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  color: #2563eb !important;
  background: rgba(91, 140, 255, 0.12) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

html body[data-active-panel="debug-lab"] .debug-root-locked-panel {
  margin-top: 12px !important;
  padding: 18px !important;
  display: grid !important;
  gap: 8px !important;
  border: 1px dashed rgba(124, 77, 255, 0.32) !important;
  border-radius: 18px !important;
  background: rgba(124, 77, 255, 0.06) !important;
}

html body[data-active-panel="debug-lab"] .debug-root-locked-panel strong {
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="debug-lab"] .debug-root-locked-panel p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

html body[data-active-panel="debug-lab"] .debug-root-locked-panel.is-unlocked {
  border-style: solid !important;
  border-color: rgba(34, 197, 94, 0.28) !important;
  background: rgba(34, 197, 94, 0.07) !important;
}

html body[data-active-panel="debug-lab"] .debug-root-locked-panel.is-unlocked span {
  color: #15803d !important;
  background: rgba(34, 197, 94, 0.14) !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-coach-card {
  border: 1px solid rgba(124, 92, 255, 0.24) !important;
  background:
    linear-gradient(135deg, rgba(124, 92, 255, 0.10), rgba(37, 99, 235, 0.05)),
    rgba(255, 255, 255, 0.96) !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-coach-card .debug-card-head h3 span {
  width: auto !important;
  min-width: 48px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c3aed, #4f8cff) !important;
  color: #fff !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-flow {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-step {
  min-height: 92px !important;
  padding: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-step > span {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: #eef2ff !important;
  color: #6d5dfc !important;
  font-weight: 900 !important;
  font-size: 13px !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-step strong {
  display: block !important;
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-step p {
  margin: 6px 0 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-step.done {
  background: rgba(236, 253, 245, 0.9) !important;
  border-color: rgba(34, 197, 94, 0.26) !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-step.done > span {
  background: #22c55e !important;
  color: #fff !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-step.current {
  background: rgba(245, 243, 255, 0.96) !important;
  border-color: rgba(124, 92, 255, 0.46) !important;
  box-shadow: 0 16px 34px rgba(124, 92, 255, 0.14) !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-current {
  margin-top: 14px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(124, 92, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: start !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-current span {
  color: #7c5cff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-current strong {
  display: block !important;
  margin-top: 4px !important;
  color: #0f172a !important;
  font-size: 18px !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-current p {
  margin: 8px 0 0 !important;
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-current em {
  display: inline-flex !important;
  margin-top: 10px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-current ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  max-width: 300px !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-current li {
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-rule {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  color: #475569 !important;
  font-size: 13px !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-rule b {
  color: #0f172a !important;
  white-space: nowrap !important;
}

html body[data-active-panel="debug-lab"] .debug-xiaowen-coach-card > .primary-btn {
  margin-top: 14px !important;
}

@media (max-width: 1100px) {
  html body[data-active-panel="debug-lab"] .debug-xiaowen-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-active-panel="debug-lab"] .debug-xiaowen-current {
    grid-template-columns: 1fr !important;
  }

  html body[data-active-panel="debug-lab"] .debug-xiaowen-current ul {
    justify-content: flex-start !important;
    max-width: none !important;
  }
}

html body[data-active-panel="debug-lab"] .debug-exclusion-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body[data-active-panel="debug-lab"] .debug-exclusion-item {
  min-height: 96px !important;
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.88) !important;
}

html body[data-active-panel="debug-lab"] .debug-exclusion-item > b {
  width: 28px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #94a3b8 !important;
  background: rgba(148, 163, 184, 0.12) !important;
}

html body[data-active-panel="debug-lab"] .debug-exclusion-item.done > b {
  color: #fff !important;
  background: #22c55e !important;
}

html body[data-active-panel="debug-lab"] .debug-exclusion-item p {
  margin: 6px 0 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

html body[data-active-panel="debug-lab"] .debug-standard-path-list {
  display: grid !important;
  gap: 10px !important;
}

html body[data-active-panel="debug-lab"] .debug-standard-path-item {
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

html body[data-active-panel="debug-lab"] .debug-standard-path-item span {
  width: 30px !important;
  height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #7c4dff !important;
  background: rgba(124, 77, 255, 0.12) !important;
  font-weight: 950 !important;
}

html body[data-active-panel="debug-lab"] .debug-standard-path-item.done span {
  color: #fff !important;
  background: linear-gradient(135deg, #7c4dff, #5b8cff) !important;
}

html body[data-active-panel="debug-lab"] .debug-standard-path-item p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

html body[data-active-panel="debug-lab"] .debug-rubric-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body[data-active-panel="debug-lab"] .debug-rubric-item {
  min-height: 108px !important;
  padding: 14px !important;
  display: grid !important;
  gap: 10px !important;
  align-content: center !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 252, 0.9)) !important;
}

html body[data-active-panel="debug-lab"] .debug-rubric-item > div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="debug-lab"] .debug-rubric-item strong {
  color: #0f172a !important;
}

html body[data-active-panel="debug-lab"] .debug-rubric-item i {
  height: 8px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(124, 77, 255, 0.1) !important;
}

html body[data-active-panel="debug-lab"] .debug-rubric-item i b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #7c4dff, #5b8cff) !important;
}

html body[data-active-panel="debug-lab"] .debug-rubric-item em {
  color: #6d4dff !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

@media (max-width: 1280px) {
  html body[data-active-panel="debug-lab"] .debug-case-center-card,
  html body[data-active-panel="debug-lab"] .debug-case-group-grid {
    grid-template-columns: 1fr !important;
  }

  html body[data-active-panel="debug-lab"] .debug-hypothesis-board,
  html body[data-active-panel="debug-lab"] .debug-exclusion-list,
  html body[data-active-panel="debug-lab"] .debug-rubric-list {
    grid-template-columns: 1fr !important;
  }
}

/* V5 training center final lock: first screen = level / weakness / next action. */
html:not(.react-student-embedded) 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;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-focus-decision,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-primary-recommendation,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-route-card,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-xiaowen-briefing {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel {
  min-height: auto !important;
  padding: 24px 28px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-center,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-training-plan,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth {
  width: 100% !important;
  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;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-copy .eyebrow {
  color: #7c4dff !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) 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,.9), 0 16px 36px rgba(91,140,255,.08) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-card span {
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-card-primary {
  background: linear-gradient(140deg, #f7f2ff 0%, #fff 68%) !important;
  border-color: rgba(124,77,255,.28) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-card-primary strong {
  color: #6d4cff !important;
  font-size: 74px !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-card-primary small {
  margin-left: 3px !important;
  font-size: 22px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-card em,
html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-next-card {
  background: linear-gradient(140deg, #fff 0%, #eef6ff 100%) !important;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-training-plan {
  min-height: 260px !important;
  padding: 28px !important;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-section-head span {
  color: #64748b !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-plan-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-plan-day.is-current {
  border-color: rgba(124,77,255,.35) !important;
  background: linear-gradient(135deg, #f5f0ff 0%, #fff 100%) !important;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-plan-day strong {
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

html:not(.react-student-embedded) 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;
}

/* V5 product-subtraction pass: homepage becomes daily decision software, not a dashboard wall. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-analysis-details,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-hardware-focus,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-hardware-questions,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-heatmap,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-special-training,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-coach-card-bottom {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel {
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-greeting-line {
  margin: 0 0 16px !important;
  color: #0f172a !important;
  font-size: 30px !important;
  line-height: 1.22 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-statusbar {
  display: grid !important;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status {
  min-height: 104px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status strong {
  color: #111827 !important;
  font-size: 23px !important;
  line-height: 1.16 !important;
  white-space: normal !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status-primary strong {
  color: #6d4cff !important;
  font-size: 52px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status em,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status b {
  white-space: normal !important;
  line-height: 1.35 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-answer-strip {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-center {
  min-height: 330px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-card-primary strong {
  font-size: 42px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-signal-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-signal-list .landing-v5-plan-day {
  min-height: 150px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-card {
  border-color: rgba(124,77,255,.35) !important;
  background: linear-gradient(135deg, #f5f0ff 0%, #ffffff 100%) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-job-match-card b {
  width: max-content !important;
  max-width: 100% !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  color: #6d4cff !important;
  background: #f1ecff !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-ai-advice {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 26px 28px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-ai-advice h2 {
  margin: 4px 0 8px !important;
  font-size: 24px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: #0f172a !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-ai-advice p:not(.eyebrow) {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-ai-advice .ghost-btn {
  min-width: 148px !important;
  height: 46px !important;
  border-radius: 14px !important;
}

/* Skill Training is the single lower-level entrance for Debug, Waveform, Project and packs. */
.skill-training-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 20px;
}

.skill-training-map-secondary {
  margin-top: -6px;
}

.skill-training-group {
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  transition: none;
}

.skill-training-group span {
  width: max-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f1ecff;
  color: #7c4dff;
  font-size: 13px;
  font-weight: 950;
}

.skill-training-group strong {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.3;
}

.skill-training-group em {
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-statusbar,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-center,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-grid,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-signal-list,
  .skill-training-map {
    grid-template-columns: 1fr !important;
  }
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth {
  min-height: 300px !important;
  padding: 28px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item:nth-child(n + 4) {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item {
  min-height: 154px !important;
  padding: 20px !important;
  border-radius: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item span {
  font-size: 16px !important;
}

html:not(.react-student-embedded) 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;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item strong {
  right: 20px !important;
  top: 54px !important;
  font-size: 30px !important;
}

@media (max-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-center {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-command-grid,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-v5-plan-list,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-list,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-statusbar {
    grid-template-columns: 1fr !important;
  }
}

/* v391 final visual fit: these rules stay last to beat older experimental locks. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
  overflow: visible !important;
  inline-size: clamp(386px, 34vw, 448px) !important;
  width: clamp(386px, 34vw, 448px) !important;
  max-width: min(448px, calc(100% - 520px)) !important;
  top: 22px !important;
  right: 28px !important;
  bottom: 22px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-primary-recommendation .landing-hero-capability-card {
  overflow: visible !important;
  transform: scale(0.94) !important;
  transform-origin: center !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview *,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-primary-recommendation .landing-hero-capability-card * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-review-standard-compare,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-compare-grid,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-compare-grid section,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-compare-grid p,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-review-standard-compare,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-compare-grid,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-compare-grid section,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-compare-grid p {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-compare-grid,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-compare-grid {
  align-items: stretch !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-compare-grid section,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-compare-grid section {
  min-height: 142px !important;
  align-content: start !important;
}

/* v391 landing closeout: the compact primary card must never crop its radar. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-primary-recommendation,
html:not(.react-student-embedded) body:has(.landing-workspace.active) .landing-primary-recommendation {
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > article.section-card.landing-primary-recommendation,
html:not(.react-student-embedded) body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid > article.section-card.landing-primary-recommendation,
html:not(.react-student-embedded) body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid > article.section-card.landing-primary-recommendation,
html:not(.react-student-embedded) body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid > article.section-card.landing-primary-recommendation {
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
  contain: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-primary-recommendation .landing-hero-capability-card {
  inset: 6px !important;
  max-height: none !important;
  overflow: visible !important;
  grid-template-rows: auto auto auto minmax(96px, 1fr) auto auto !important;
}

/* v390: keep the primary recommendation radar fully visible. */
html body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview {
  overflow: visible !important;
  width: clamp(390px, 35vw, 460px) !important;
  right: 26px !important;
  top: 22px !important;
  bottom: 22px !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .landing-hero-capability-card {
  overflow: visible !important;
  transform: scale(0.96) !important;
  transform-origin: center !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .landing-hero-capability-card *,
html body[data-active-panel="landing"] .landing-primary-recommendation .landing-recommendation-preview * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation .landing-hero-capability-card p,
html body[data-active-panel="landing"] .landing-primary-recommendation .landing-hero-capability-card span,
html body[data-active-panel="landing"] .landing-primary-recommendation .landing-hero-capability-card strong {
  overflow: visible !important;
}

/* Sidebar hover freeze v284: sidebar size changes only by clicking the toggle. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed),
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover):not(.sidebar-collapsed),
  html:not(.react-student-embedded) body .shell:has(> .sidebar:focus-within):not(.sidebar-collapsed),
  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;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  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) {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:hover) .sidebar,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:focus-within) .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar,
  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: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 18px 16px 14px !important;
    overflow-x: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar,
  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 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 18px 10px 14px !important;
    overflow-x: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed) .brand-head--main,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:hover) .brand-head--main,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:focus-within) .brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-head--main {
    min-height: 118px !important;
    height: 118px !important;
    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
  }

  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed) .brand-icon-logo,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:hover) .brand-icon-logo,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:focus-within) .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-icon-logo {
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed) .brand-main-logo,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed) .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:hover) .brand-main-logo,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:hover) .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:focus-within) .brand-main-logo,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:focus-within) .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-subtitle-text {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed) .menu-item,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:hover) .menu-item,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:focus-within) .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .menu-item {
    width: 100% !important;
    min-width: 0 !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;
    transform: none !important;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .menu-item,
  html:not(.react-student-embedded) body .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;
    transform: none !important;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
  }

  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed) .sidebar-section,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:hover) .sidebar-section,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:focus-within) .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar-section {
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 4px !important;
    color: var(--muted) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar-section,
  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 {
    width: 48px !important;
    height: 0 !important;
    margin: 6px auto 0 !important;
    color: transparent !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed) .sidebar-account-card,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:hover) .sidebar-account-card,
  html:not(.react-student-embedded) body .shell:not(.sidebar-collapsed):has(> .sidebar:focus-within) .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar-account-card {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar-account-card,
  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 {
    opacity: 0 !important;
    transform: translateY(8px) scale(0.96) !important;
    pointer-events: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar-toggle,
  html:not(.react-student-embedded) body .sidebar-toggle:hover,
  html:not(.react-student-embedded) body .sidebar-account-button,
  html:not(.react-student-embedded) body .sidebar-account-button:hover {
    transform: none !important;
  }
}

/* Final homepage fold lock v282: beat inline custom grid slots and old module overrides. */
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-xiaowen-briefing,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-route-card,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-ai-task-center,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-hardware-focus,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-hardware-questions,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-training-heatmap,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-coach-card-bottom,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-special-training,
html body:has(.landing-workspace.active) .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-xiaowen-briefing,
html body:has(.landing-workspace.active) .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-route-card,
html body:has(.landing-workspace.active) .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-ai-task-center,
html body:has(.landing-workspace.active) .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-hardware-focus,
html body:has(.landing-workspace.active) .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-hardware-questions,
html body:has(.landing-workspace.active) .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-training-heatmap,
html body:has(.landing-workspace.active) .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-coach-card-bottom,
html body:has(.landing-workspace.active) .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-special-training {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-welcome-panel {
  min-height: 170px !important;
  height: auto !important;
}

/* Sidebar visual system v277: restore the desktop-client rail style. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  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),
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded,
  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: 236px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  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,
  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: 76px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 20px 18px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 88% 8%, rgba(124, 77, 255, 0.22), transparent 26%),
      radial-gradient(circle at 12% 18%, rgba(91, 140, 255, 0.12), transparent 28%),
      linear-gradient(180deg, #07142b 0%, #071225 50%, #061021 100%) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.12) !important;
    box-shadow: 18px 0 38px rgba(15, 23, 42, 0.16) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar,
  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 {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    padding: 18px 12px 14px !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar .brand,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .sidebar .brand {
    position: relative !important;
    width: 100% !important;
    height: 104px !important;
    min-height: 104px !important;
    margin: 0 0 14px !important;
    padding: 2px 36px 0 2px !important;
    display: grid !important;
    align-items: start !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar .brand-head,
  html:not(.react-student-embedded) body .shell .sidebar .brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .sidebar .brand-head,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .sidebar .brand-head--main {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    justify-items: start !important;
    align-content: start !important;
    gap: 7px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar .brand-icon-logo,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .sidebar .brand-icon-logo {
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .sidebar .brand-main-logo {
    display: block !important;
    width: 144px !important;
    max-width: 144px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: none !important;
    filter:
      saturate(1.08)
      contrast(1.08)
      drop-shadow(0 10px 20px rgba(2, 6, 23, 0.28)) !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .sidebar .brand-subtitle-text {
    display: block !important;
    width: 178px !important;
    max-width: 178px !important;
    margin: 0 !important;
    color: rgba(226, 232, 240, 0.82) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    transform: none !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .sidebar .sidebar-toggle {
    display: inline-grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    z-index: 120 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 10px !important;
    color: rgba(226, 232, 240, 0.86) !important;
    background: rgba(15, 23, 42, 0.58) !important;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.2) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar .sidebar-toggle:hover,
  html:not(.react-student-embedded) body .shell .sidebar .sidebar-toggle:focus-visible {
    color: #fff !important;
    background: rgba(124, 77, 255, 0.34) !important;
    border-color: rgba(167, 139, 250, 0.54) !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .brand {
    height: 98px !important;
    min-height: 98px !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
    display: grid !important;
    place-items: start center !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .brand-head--main {
    display: grid !important;
    place-items: center !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-icon-logo,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .brand-icon-logo {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    margin-top: 2px !important;
    object-fit: contain !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .brand-subtitle-text {
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar-toggle {
    top: 56px !important;
    left: 10px !important;
    right: auto !important;
    width: 34px !important;
    height: 30px !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .menu {
    display: grid !important;
    gap: 5px !important;
    align-items: start !important;
    align-content: start !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-section {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 10px 0 5px !important;
    padding: 0 12px !important;
    color: rgba(148, 163, 184, 0.76) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .menu-item,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-bottom-link {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 13px 0 44px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: rgba(226, 232, 240, 0.86) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item.active,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .menu-item.active {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(135deg, #4b8dff 0%, #7c4dff 62%, #a334ff 100%) !important;
    box-shadow: 0 12px 26px rgba(124, 77, 255, 0.28) !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .menu-item:hover {
    color: #fff !important;
    background: rgba(148, 163, 184, 0.1) !important;
    box-shadow: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item.active:hover,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .menu-item.active:hover {
    background: linear-gradient(135deg, #4b8dff 0%, #7c4dff 62%, #a334ff 100%) !important;
    box-shadow: 0 12px 26px rgba(124, 77, 255, 0.28) !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-bottom-link::before {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    color: currentColor !important;
    background: rgba(255, 255, 255, 0.06) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-indent: 0 !important;
    transform: translateY(-50%) !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="landing"]::before { content: "⌂" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="interview"]::before { content: "◉" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="audio"]::before { content: "▣" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="debug-lab"]::before { content: "⌘" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="waveform"]::before { content: "⌁" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="question-bank"]::before { content: "□" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="reports"]::before { content: "▤" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="resume"]::before { content: "◇" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="message-center"]::before { content: "◦" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="settings"]::before { content: "⚙" !important; }

  html:not(.react-student-embedded) body .sidebar .menu-item.active::before,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .menu-item.active::before {
    background: rgba(255, 255, 255, 0.18) !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-bottom-zone {
    position: static !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    display: grid !important;
    gap: 6px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-account-card {
    display: block !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-account-button {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-radius: 15px !important;
    color: #f8fafc !important;
    background: rgba(15, 23, 42, 0.44) !important;
    box-shadow: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-account-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-account-copy {
    min-width: 0 !important;
    display: block !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-copy strong,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-account-copy strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar .menu {
    align-items: center !important;
    gap: 9px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar .sidebar-section {
    width: 48px !important;
    height: 0 !important;
    margin: 3px auto 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar .sidebar-bottom-link {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -999px !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar .sidebar-bottom-link::before {
    position: static !important;
    transform: none !important;
    text-indent: 0 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar .sidebar-account-card {
    display: none !important;
  }
}

html body .sidebar-account-copy {
  gap: 0 !important;
}

html body .sidebar-account-button::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

html body .training-dashboard-actions {
  align-items: center !important;
}

html body .training-dashboard-apply-state {
  margin-right: auto !important;
  max-width: 250px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(124, 77, 255, 0.18) !important;
  border-radius: 999px !important;
  color: #5b6b84 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .training-dashboard-apply-state[data-state="saved"] {
  color: #15803d !important;
  border-color: rgba(34, 197, 94, 0.22) !important;
  background: rgba(240, 253, 244, 0.92) !important;
}

html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-rows: 148px 276px 420px 240px 240px 180px 232px 180px 150px 238px !important;
}

html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > .section-card.landing-xiaowen-briefing,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid > .section-card.landing-xiaowen-briefing,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid > .section-card.landing-xiaowen-briefing,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid > .section-card.landing-xiaowen-briefing {
  height: 276px !important;
  min-height: 276px !important;
  max-height: 276px !important;
  padding: 24px 28px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-copy,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-copy {
  height: 100% !important;
  min-height: 0 !important;
  grid-template:
    "head stats" 32px
    "text stats" minmax(74px, auto)
    "advice stats" minmax(76px, 1fr)
    / minmax(0, 1fr) 372px !important;
  gap: 16px 28px !important;
  align-items: start !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-head,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-head {
  grid-area: head !important;
  min-height: 32px !important;
  align-items: center !important;
}

html body[data-active-panel="landing"] .landing-xiaowen-briefing-head strong,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-head strong {
  position: static !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 148px !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #7c8aa2 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] #landingXiaowenBriefingText,
html body:has(.landing-workspace.active) #landingXiaowenBriefingText,
html body[data-active-panel="landing"] .landing-xiaowen-briefing-advice,
html body:has(.landing-workspace.active) .landing-xiaowen-briefing-advice {
  display: block !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #334155 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats {
  grid-area: stats !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(58px, auto)) !important;
  gap: 12px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-content: start !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats div,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats div {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  height: auto !important;
  max-height: none !important;
  padding: 12px 14px !important;
  align-content: center !important;
  overflow: visible !important;
  border-radius: 16px !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats div:first-child,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats div:first-child {
  grid-column: 1 / -1 !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats span,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats span {
  display: block !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats strong,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats strong {
  display: block !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.24 !important;
  letter-spacing: 0 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

html body[data-active-panel="landing"] .landing-training-cockpit-stats div:nth-child(2) strong,
html body[data-active-panel="landing"] .landing-training-cockpit-stats div:nth-child(5) strong,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats div:nth-child(2) strong,
html body:has(.landing-workspace.active) .landing-training-cockpit-stats div:nth-child(5) strong {
  color: #6d4dff !important;
  font-size: 22px !important;
  line-height: 1.12 !important;
}

html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > .section-card.landing-hardware-focus,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid > .section-card.landing-hardware-focus {
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
  padding: 18px 26px !important;
  display: grid !important;
  grid-template-rows: 28px 140px !important;
  gap: 14px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-chip-list,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-chip-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card {
  min-width: 0 !important;
  width: 100% !important;
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-rows: 30px 18px 17px 30px !important;
  gap: 5px !important;
  align-content: start !important;
  justify-items: stretch !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card > strong,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card > strong {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card > strong span,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card > strong span {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card > strong b,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card > strong b {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card > em,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card > em,
html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card > small,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card > small {
  display: block !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card > .landing-hardware-mastery,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card > .landing-hardware-mastery {
  display: grid !important;
  grid-template-rows: 14px 8px !important;
  gap: 6px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card > .landing-hardware-mastery > div,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card > .landing-hardware-mastery > div {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 14px !important;
  overflow: visible !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-hardware-focus .landing-hardware-card > .landing-hardware-mastery i,
html body:has(.landing-workspace.active) .landing-hardware-focus .landing-hardware-card > .landing-hardware-mastery i {
  height: 8px !important;
  min-height: 8px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > .section-card.landing-special-training,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid > .section-card.landing-special-training,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid > .section-card.landing-special-training,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid > .section-card.landing-special-training {
  height: 238px !important;
  min-height: 238px !important;
  max-height: 238px !important;
  padding: 20px 26px !important;
  display: grid !important;
  grid-template-rows: 28px minmax(0, 1fr) !important;
  gap: 16px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-special-training-list,
html body:has(.landing-workspace.active) .landing-special-training-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  height: 154px !important;
  min-height: 154px !important;
  max-height: none !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item {
  height: 154px !important;
  min-height: 154px !important;
  max-height: 154px !important;
  padding: 14px !important;
  display: grid !important;
  grid-template:
    "icon title title" 32px
    "reason reason reason" 44px
    "rate rate button" 32px
    / 38px minmax(0, 1fr) 88px !important;
  gap: 8px 10px !important;
  align-items: center !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-icon,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-icon {
  grid-area: icon !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  align-self: center !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > strong,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > strong {
  grid-area: title !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-reason,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > .landing-special-training-reason {
  grid-area: reason !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  color: #8a97ad !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.38 !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > p,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > p {
  grid-area: rate !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  overflow: visible !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > p b,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > p b {
  color: #111827 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

html body[data-active-panel="landing"] .landing-special-training .landing-special-training-list .landing-special-training-item > em,
html body:has(.landing-workspace.active) .landing-special-training .landing-special-training-list .landing-special-training-item > em {
  grid-area: button !important;
  justify-self: end !important;
  align-self: center !important;
  width: 88px !important;
  min-width: 88px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  overflow: hidden !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 32px !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: 214px auto 420px 300px 300px 220px auto auto 180px auto !important;
  }

  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > .section-card.landing-xiaowen-briefing,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid > .section-card.landing-xiaowen-briefing,
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid > .section-card.landing-special-training,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid > .section-card.landing-special-training {
    height: auto !important;
    max-height: none !important;
  }

  html body[data-active-panel="landing"] .landing-special-training-list,
  html body:has(.landing-workspace.active) .landing-special-training-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Interview final frame: fixed top/bottom, only the main arena scrolls. */
html body[data-active-panel="interview"] {
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .shell {
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .main {
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
  background: #f5f8fc !important;
}

html body[data-active-panel="interview"] .topbar,
html body[data-active-panel="interview"] #globalNotice {
  display: none !important;
}

html body[data-active-panel="interview"] .panel[data-panel="interview"] {
  display: block !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

html body[data-active-panel="interview"] .interview-studio {
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: 80px minmax(0, 1fr) 76px !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: #f5f8fc !important;
}

html body[data-active-panel="interview"] .interview-training-statusbar {
  position: fixed !important;
  top: 0 !important;
  left: 236px !important;
  right: 0 !important;
  z-index: 80 !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  margin: 0 !important;
  padding: 10px 24px !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 0.9fr) minmax(430px, 1.18fr) minmax(360px, 1.05fr) minmax(280px, auto) !important;
  align-items: center !important;
  gap: 18px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
}

html body[data-active-panel="interview"] .interview-v5-modebar {
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: 30px 30px !important;
  gap: 6px !important;
  align-items: center !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-v5-segment,
html body[data-active-panel="interview"] .interview-v5-company-tabs {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-v5-company-tabs {
  opacity: 0.55 !important;
  filter: saturate(0.85) !important;
  transition: opacity 0.16s ease, filter 0.16s ease !important;
}

html body[data-active-panel="interview"] .interview-v5-company-tabs.is-enabled {
  opacity: 1 !important;
  filter: none !important;
}

html body[data-active-panel="interview"] .interview-v5-mode-btn,
html body[data-active-panel="interview"] .interview-v5-company-btn {
  height: 28px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 999px !important;
  color: #64748b !important;
  background: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body[data-active-panel="interview"] .interview-v5-company-btn {
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}

html body[data-active-panel="interview"] .interview-v5-mode-btn.is-active,
html body[data-active-panel="interview"] .interview-v5-company-btn.is-active {
  border-color: rgba(124, 77, 255, 0.32) !important;
  color: #5f3dff !important;
  background: rgba(124, 77, 255, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 77, 255, 0.08) !important;
}

html body[data-active-panel="interview"] .interview-training-title,
html body[data-active-panel="interview"] .interview-training-metrics,
html body[data-active-panel="interview"] .interview-training-actions {
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-training-title > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

html body[data-active-panel="interview"] .interview-training-title strong,
html body[data-active-panel="interview"] .interview-training-title span:not(.interview-training-avatar) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"] .interview-training-title {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}

html body[data-active-panel="interview"] .interview-training-avatar {
  width: 44px !important;
  height: 44px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  color: #0f172a !important;
  background: linear-gradient(135deg, #7c4dff, #5b8cff) !important;
  box-shadow: 0 12px 24px rgba(124, 77, 255, 0.24) !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-training-avatar-img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

html body[data-active-panel="interview"] .interview-profile-inline-btn {
  height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 12px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.08) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

html body[data-active-panel="interview"] .interview-training-metrics {
  display: grid !important;
  grid-template-columns: 1.12fr 1fr 1.12fr !important;
  justify-content: center !important;
  gap: 10px !important;
}

html body[data-active-panel="interview"] .interview-training-metrics > span {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 7px 12px !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

html body[data-active-panel="interview"] .interview-training-metrics > span > em,
html body[data-active-panel="interview"] .interview-training-score > span,
html body[data-active-panel="interview"] #interviewTopRemaining {
  display: block !important;
  min-width: 0 !important;
  color: #7c8aa2 !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-style: normal !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="interview"] .interview-training-metrics > span > strong {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  justify-content: start !important;
  color: #0f172a !important;
  background: transparent !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"] #interviewTopRoundLabel {
  position: relative !important;
  display: inline-flex !important;
  padding-bottom: 13px !important;
}

html body[data-active-panel="interview"] #interviewTopRoundLabel::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 2px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, #6d4dff 0 var(--interview-top-progress, 30%), transparent var(--interview-top-progress, 30%) 100%),
    rgba(124, 77, 255, 0.12) !important;
}

html body[data-active-panel="interview"] .interview-training-actions {
  display: grid !important;
  grid-template-columns: minmax(92px, auto) minmax(72px, auto) minmax(88px, auto) !important;
  justify-content: end !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-active-panel="interview"] .interview-training-score {
  min-width: 92px !important;
  height: 52px !important;
  padding: 6px 14px !important;
  display: grid !important;
  align-content: center !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(124, 77, 255, 0.08) !important;
}

html body[data-active-panel="interview"] .interview-training-score strong {
  color: #6d4dff !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-main-dashboard {
  grid-row: 2 / 3 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 72%) minmax(320px, 28%) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-main-dashboard > .section-card {
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-setup-card {
  display: none !important;
}

html body[data-active-panel="interview"] .interview-setup-card > .section-head {
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  display: grid !important;
  align-content: center !important;
}

html body[data-active-panel="interview"] .interview-setup-card .section-head .eyebrow {
  display: none !important;
}

html body[data-active-panel="interview"] .interview-profile-dashboard {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1.08fr 1.5fr 1fr 1fr !important;
  gap: 10px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-profile-dashboard section {
  min-height: 0 !important;
  height: 88px !important;
  padding: 10px 12px !important;
  gap: 5px !important;
  align-content: center !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

html body[data-active-panel="interview"] .interview-profile-dashboard span,
html body[data-active-panel="interview"] .interview-profile-dashboard p,
html body[data-active-panel="interview"] .interview-profile-dashboard em,
html body[data-active-panel="interview"] .interview-profile-dashboard strong,
html body[data-active-panel="interview"] .interview-profile-dashboard b {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"] .interview-profile-user strong {
  font-size: 19px !important;
}

html body[data-active-panel="interview"] .interview-profile-tags {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

html body[data-active-panel="interview"] .interview-profile-tags b {
  min-height: 26px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
}

html body[data-active-panel="interview"] .interview-profile-ability b,
html body[data-active-panel="interview"] .interview-profile-gain b,
html body[data-active-panel="interview"] .interview-profile-ability em,
html body[data-active-panel="interview"] .interview-profile-gain em {
  font-size: 16px !important;
}

html body[data-active-panel="interview"] .interview-resume-sync-card,
html body[data-active-panel="interview"] .interview-profile-form {
  display: none !important;
}

html body[data-active-panel="interview"] .interview-workspace-card {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 18px !important;
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

html body[data-active-panel="interview"] .interview-copilot-card {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-rows: 44px minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html body[data-active-panel="interview"] .interview-copilot-card > .section-head {
  min-height: 0 !important;
  height: 44px !important;
  padding: 0 0 10px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-ai-coach-panel {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 132px 210px minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html body[data-active-panel="interview"] .coach-live-score-card,
html body[data-active-panel="interview"] .coach-structure-card,
html body[data-active-panel="interview"] .coach-followup-card,
html body[data-active-panel="interview"] .coach-judge-card {
  min-height: 0 !important;
  max-height: none !important;
  padding: 12px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

html body[data-active-panel="interview"] .coach-judge-card[hidden] {
  display: none !important;
}

html body[data-active-panel="interview"] .coach-structure-list,
html body[data-active-panel="interview"] .coach-followup-list {
  gap: 7px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .coach-structure-item,
html body[data-active-panel="interview"] .coach-followup-list button {
  min-height: 32px !important;
  padding: 7px 9px !important;
  font-size: 12px !important;
}

html body[data-active-panel="interview"] .coach-followup-list button.is-collapsed {
  display: none !important;
}

html body[data-active-panel="interview"] .coach-followup-toggle {
  width: 100% !important;
  min-height: 34px !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 12px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.08) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

html body[data-active-panel="interview"] .coach-live-score-card > p,
html body[data-active-panel="interview"] .coach-followup-card > p,
html body[data-active-panel="interview"] .coach-judge-card > p {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

html body[data-active-panel="interview"] #interviewProgressStats {
  display: none !important;
}

html body[data-active-panel="interview"] .interview-workspace-card .section-head {
  position: sticky !important;
  top: -18px !important;
  z-index: 4 !important;
  margin: -18px -18px 16px !important;
  padding: 16px 18px 12px !important;
  border-radius: 20px 20px 0 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
}

html body[data-active-panel="interview"] .interview-progress-board,
html body[data-active-panel="interview"] .interview-coach-strip,
html body[data-active-panel="interview"] .interview-exam-focus,
html body[data-active-panel="interview"] .interview-answer-stack,
html body[data-active-panel="interview"] .interview-state-compact,
html body[data-active-panel="interview"] #feedbackBox {
  max-height: none !important;
  overflow: visible !important;
}

html body[data-active-panel="interview"] .interview-question-feedback-card-inline[hidden] {
  display: none !important;
}

html body[data-active-panel="interview"] .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html body[data-active-panel="interview"] .interview-arena-stack {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  min-height: 0 !important;
}

html body[data-active-panel="interview"] .interview-arena-block {
  min-width: 0 !important;
  display: grid !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
  overflow: visible !important;
}

html body[data-active-panel="interview"] .interview-arena-block-head,
html body[data-active-panel="interview"] .interview-question-card-head {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body[data-active-panel="interview"] .interview-arena-block-head span,
html body[data-active-panel="interview"] .interview-question-card-head span {
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-question-card-head span {
  display: inline-flex !important;
  align-items: center !important;
}

html body[data-active-panel="interview"] .interview-question-card-head span::before {
  content: "" !important;
  width: 38px !important;
  height: 38px !important;
  margin-right: 10px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background:
    url("./assets/interviewer-avatar.png?v=20260614-sidebar-brand-v290") center 30% / 116% 116% no-repeat,
    linear-gradient(135deg, rgba(91, 140, 255, 0.18), rgba(124, 77, 255, 0.14)) !important;
  box-shadow:
    0 8px 18px rgba(91, 140, 255, 0.16),
    inset 0 0 0 1px rgba(124, 77, 255, 0.16) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-arena-block-head em,
html body[data-active-panel="interview"] .interview-question-card-head em {
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.1) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"] .interview-question-card > p {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

html body[data-active-panel="interview"] .interview-workspace-card .question-box {
  min-height: 74px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0f172a !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 25px !important;
  line-height: 1.42 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-question-requirements {
  display: grid !important;
  gap: 10px !important;
}

html body[data-active-panel="interview"] .interview-question-requirements > span {
  color: #7c8aa2 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-question-requirements ul,
html body[data-active-panel="interview"] .interview-question-meta-compact {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body[data-active-panel="interview"] .interview-question-requirements li,
html body[data-active-panel="interview"] .interview-question-meta-compact span {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  color: #475569 !important;
  background: #f1f5ff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="interview"] .interview-question-meta-compact span {
  color: #5b54ff !important;
  background: rgba(124, 77, 255, 0.1) !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
}

html body[data-active-panel="interview"] .interview-question-info-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

html body[data-active-panel="interview"] .interview-question-info-row span {
  min-width: 0 !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(91, 140, 255, 0.14) !important;
  border-radius: 14px !important;
  color: #475569 !important;
  background: rgba(91, 140, 255, 0.06) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="interview"] .interview-question-info-row b {
  color: #7c8aa2 !important;
  font-weight: 900 !important;
}

html body[data-active-panel="interview"] .interview-question-info-row strong {
  color: #0f172a !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-answer-zone {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  align-content: start !important;
}

html body[data-active-panel="interview"] .interview-answer-modes {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.9fr) minmax(340px, 1.1fr) !important;
  gap: 14px !important;
  min-width: 0 !important;
}

html body[data-active-panel="interview"] .interview-voice-mode,
html body[data-active-panel="interview"] .interview-text-mode {
  min-height: 250px !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 18px !important;
  background: #f8fbff !important;
}

html body[data-active-panel="interview"] .interview-recording-status-card {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
}

html body[data-active-panel="interview"] .interview-recording-status-card span {
  position: relative !important;
  padding-left: 16px !important;
  color: #ef4444 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"] .interview-recording-status-card span::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.12) !important;
}

html body[data-active-panel="interview"] .interview-recording-status-card strong {
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"] .interview-text-mode textarea {
  min-height: 158px !important;
  max-height: none !important;
  border-radius: 16px !important;
  background: #ffffff !important;
}

html body[data-active-panel="interview"] .interview-answer-live-preview {
  min-width: 0 !important;
  display: grid !important;
  gap: 10px !important;
  padding: 16px !important;
  border: 1px solid rgba(34, 197, 94, 0.16) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.84)) !important;
}

html body[data-active-panel="interview"] #interviewAnswerHighlightPreview {
  min-height: 74px !important;
  margin: 0 !important;
  padding: 15px !important;
  border: 1px solid rgba(34, 197, 94, 0.14) !important;
  border-radius: 16px !important;
  color: #0f172a !important;
  background: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
  font-weight: 850 !important;
}

html body[data-active-panel="interview"] #interviewAnswerHighlightPreview mark {
  padding: 1px 5px !important;
  border-radius: 7px !important;
  color: #5b21b6 !important;
  background: rgba(124, 77, 255, 0.14) !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-live-transcript-card {
  background: linear-gradient(135deg, #ffffff, rgba(245, 248, 252, 0.92)) !important;
}

html body[data-active-panel="interview"] .interview-live-transcript-text {
  min-height: 88px !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid rgba(91, 140, 255, 0.14) !important;
  border-radius: 16px !important;
  color: #0f172a !important;
  background: rgba(91, 140, 255, 0.06) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 850 !important;
}

html body[data-active-panel="interview"] .interview-live-transcript-note,
html body[data-active-panel="interview"] .interview-live-transcript-action {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  font-weight: 850 !important;
}

html body[data-active-panel="interview"] .interview-live-transcript-action {
  color: #6d4dff !important;
}

html body[data-active-panel="interview"] .interview-question-feedback-card-inline #feedbackBox {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Analysis results belong to the scrollable workspace, not a collapsed third grid row. */
html body[data-active-panel="interview"] #interviewStudio#interviewStudio > .interview-main-dashboard:has(#interviewQuestionFeedbackCard:not([hidden])) {
  grid-auto-rows: max-content !important;
}

html body[data-active-panel="interview"] #interviewQuestionFeedbackCard:not([hidden]) {
  height: auto !important;
  min-height: min-content !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  overflow: visible !important;
}

html body[data-active-panel="interview"] #interviewQuestionFeedbackCard:not([hidden]) #feedbackBox {
  height: auto !important;
  min-height: min-content !important;
  max-height: none !important;
  overflow: visible !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-box {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-active-panel="interview"] .interview-final-feedback {
  display: grid !important;
  gap: 14px !important;
  padding: 16px !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(124, 77, 255, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-head span {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-head strong {
  color: #7c4dff !important;
  font-size: 36px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-head small {
  margin-left: 2px !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-row {
  min-height: 64px !important;
  display: grid !important;
  place-items: center !important;
  gap: 5px !important;
  padding: 10px 8px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 14px !important;
  background: #fff !important;
  text-align: center !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-row span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-row b {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-row[data-level="excellent"] b {
  color: #16a34a !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-row[data-level="normal"] b {
  color: #f59e0b !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-row[data-level="weak"] b {
  color: #ef4444 !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-advice {
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  color: #334155 !important;
  background: rgba(124, 77, 255, 0.08) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 850 !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-advice strong {
  color: #6d4dff !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-followup {
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(91, 140, 255, 0.16) !important;
  border-radius: 14px !important;
  color: #0f172a !important;
  background: rgba(91, 140, 255, 0.08) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 850 !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-followup strong {
  color: #2563eb !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body[data-active-panel="interview"] .interview-final-feedback-actions .primary-btn,
html body[data-active-panel="interview"] .interview-final-feedback-actions .ghost-btn {
  min-height: 42px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

@media (max-width: 1280px) {
  html body[data-active-panel="interview"] .interview-final-feedback-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  html body[data-active-panel="interview"] .interview-answer-modes {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-active-panel="interview"] .interview-question-info-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html body[data-active-panel="interview"] .interview-bottom-actionbar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 30 !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  margin: 0 !important;
  padding: 12px 24px calc(12px + var(--safe-bottom)) !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;
  overflow: hidden !important;
  border-width: 1px 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 -12px 28px rgba(15, 23, 42, 0.05) !important;
}

html body[data-active-panel="interview"] .interview-profile-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 110 !important;
  background: rgba(15, 23, 42, 0.34) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease !important;
}

html body[data-active-panel="interview"] .interview-profile-drawer-backdrop.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body[data-active-panel="interview"] .interview-profile-drawer-backdrop[hidden] {
  display: none !important;
}

html body .interview-profile-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 111 !important;
  width: min(440px, 92vw) !important;
  padding: 22px !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto 1fr !important;
  gap: 16px !important;
  overflow-y: auto !important;
  transform: translateX(104%) !important;
  transition: transform 0.22s ease !important;
  border-left: 1px solid rgba(124, 77, 255, 0.16) !important;
  background: #ffffff !important;
  box-shadow: -20px 0 50px rgba(15, 23, 42, 0.16) !important;
}

html body .interview-profile-drawer.is-open {
  transform: translateX(0) !important;
}

html body .interview-profile-drawer[hidden] {
  display: none !important;
}

html body .interview-profile-drawer-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  gap: 12px !important;
  align-items: start !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(124, 77, 255, 0.14) !important;
}

html body .interview-profile-drawer-head span,
html body .interview-profile-drawer-section-head span,
html body .interview-profile-drawer-grid span {
  color: #7c8aa2 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body .interview-profile-drawer-head strong {
  display: block !important;
  margin-top: 4px !important;
  color: #0f172a !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

html body .interview-profile-drawer-head p {
  margin: 6px 0 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

html body .interview-profile-drawer-close {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 12px !important;
  color: #0f172a !important;
  background: #f8fbff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

html body .interview-profile-drawer-section,
html body .interview-profile-drawer-grid > div {
  padding: 16px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.9)) !important;
}

html body .interview-profile-drawer-section-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

html body .interview-profile-drawer-section-head strong,
html body .interview-profile-drawer-grid strong {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

html body .interview-profile-drawer-tags,
html body .interview-profile-drawer-flow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body .interview-profile-drawer-tags b,
html body .interview-profile-drawer-flow span {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #5b54ff !important;
  background: rgba(124, 77, 255, 0.1) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body .interview-profile-drawer-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body .interview-profile-drawer-grid p {
  margin: 8px 0 0 !important;
  color: #6d4dff !important;
  font-size: 24px !important;
  font-weight: 950 !important;
}

html body .interview-profile-drawer-list {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding-left: 18px !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.55 !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="interview"] .interview-training-statusbar,
  html body[data-active-panel="interview"] .interview-bottom-actionbar {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
  }

  html body[data-active-panel="interview"] .interview-studio {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  html body[data-active-panel="interview"] .interview-main-dashboard {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) 248px !important;
  }

  html body[data-active-panel="interview"] .interview-copilot-card {
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
  }

  html body[data-active-panel="interview"] .interview-ai-coach-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  html body[data-active-panel="interview"] .coach-judge-card {
    display: none !important;
  }
}

/* Last interview scroll ownership guard. */
html body[data-active-panel="interview"] .interview-main-dashboard > .section-card.interview-workspace-card,
html body[data-active-panel="interview"] .interview-workspace-card.section-card {
  grid-column: 1 / 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html body[data-active-panel="interview"] .interview-main-dashboard > .section-card.interview-setup-card,
html body[data-active-panel="interview"] .interview-main-dashboard > .section-card.interview-copilot-card,
html body[data-active-panel="interview"] .interview-copilot-card.section-card,
html body[data-active-panel="interview"] .interview-ai-coach-panel {
  grid-column: 2 / 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none !important;
}

html body[data-active-panel="interview"] .interview-main-dashboard {
  grid-template-columns: minmax(0, 72%) minmax(320px, 28%) !important;
}

html body[data-active-panel="interview"] .interview-bottom-actionbar {
  position: fixed !important;
  left: 236px !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: auto !important;
  height: calc(76px + var(--safe-bottom)) !important;
  min-height: 76px !important;
  max-height: calc(76px + var(--safe-bottom)) !important;
}

html body[data-active-panel="interview"] .interview-training-statusbar {
  position: fixed !important;
  top: 0 !important;
  left: 236px !important;
  right: 0 !important;
  bottom: auto !important;
  width: auto !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  grid-row: 1 / 2 !important;
}

html body[data-active-panel="interview"] .shell.sidebar-collapsed .interview-bottom-actionbar,
html body[data-active-panel="interview"].compact-shell .interview-bottom-actionbar,
html body[data-active-panel="interview"].ios-app .interview-bottom-actionbar,
html.react-student-embedded body[data-active-panel="interview"] .interview-bottom-actionbar {
  left: 0 !important;
}

html body[data-active-panel="interview"] .shell.sidebar-collapsed .interview-training-statusbar,
html body[data-active-panel="interview"].compact-shell .interview-training-statusbar,
html body[data-active-panel="interview"].ios-app .interview-training-statusbar,
html.react-student-embedded body[data-active-panel="interview"] .interview-training-statusbar {
  left: 0 !important;
}

/* Final interview coach guard: keep the right AI coach as a fixed, non-scrolling column. */
html body[data-active-panel="interview"] .interview-main-dashboard {
  align-items: stretch !important;
  grid-template-columns: minmax(0, 72%) minmax(320px, 28%) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

html body[data-active-panel="interview"] .interview-copilot-card,
html body[data-active-panel="interview"] .interview-copilot-card.section-card {
  align-self: stretch !important;
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 44px minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-copilot-card > .section-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

html body[data-active-panel="interview"] .interview-coach-toggle-btn {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 999px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.08) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"].interview-coach-collapsed .interview-main-dashboard {
  grid-template-columns: minmax(0, 1fr) 84px !important;
}

html body[data-active-panel="interview"].interview-coach-collapsed .interview-copilot-card,
html body[data-active-panel="interview"].interview-coach-collapsed .interview-copilot-card.section-card {
  padding: 14px 10px !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

html body[data-active-panel="interview"].interview-coach-collapsed .interview-copilot-card > .section-head {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-active-panel="interview"].interview-coach-collapsed .interview-copilot-card > .section-head > div {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
}

html body[data-active-panel="interview"].interview-coach-collapsed .interview-copilot-card > .section-head .eyebrow {
  display: none !important;
}

html body[data-active-panel="interview"].interview-coach-collapsed .interview-ai-coach-panel {
  display: none !important;
}

/* Product avatar true final lock v200: keep initials visible after all legacy overrides. */
html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar {
  position: relative !important;
  isolation: isolate !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden !important;
  color: transparent !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  background-color: #5b8cff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body .topbar-user-avatar::after,
html body .sidebar-account-avatar::after,
html body .account-preview-avatar::after,
html body[data-active-panel="interview"] .interview-training-avatar::after {
  content: attr(data-avatar-initial) !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  color: #0f172a !important;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  pointer-events: none !important;
}

html body .topbar-user-avatar::after {
  font-size: 13px !important;
}

html body .sidebar-account-avatar::after {
  font-size: 16px !important;
}

html body .account-preview-avatar::after {
  font-size: 22px !important;
}

html body[data-active-panel="interview"] .interview-training-avatar {
  position: relative !important;
  isolation: isolate !important;
  width: 44px !important;
  height: 44px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid rgba(91, 140, 255, 0.18) !important;
  background: #5b8cff !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.16) !important;
}

html body[data-active-panel="interview"] .interview-training-avatar::after {
  font-size: 19px !important;
}

html body[data-active-panel="interview"] .interview-training-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Default account avatar absolute final lock v202: must stay after legacy initial overlays. */
html body .topbar-user-avatar::after,
html body .sidebar-account-avatar::after,
html body .account-preview-avatar::after,
html body[data-active-panel="interview"] .interview-training-avatar::after {
  content: "" !important;
  display: none !important;
}

html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
  color: transparent !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Audio review final lock v246: keep this block last. */
html body[data-active-panel="audio"] #companionDock,
html body[data-active-panel="audio"] #companionMini,
html body[data-active-panel="audio"] #companionMiniAvatar,
html body[data-active-panel="audio"] #companionMiniAvatarStage,
html body[data-active-panel="audio"] #companionMiniCharacter,
html body[data-active-panel="audio"] #companionMiniBubble,
html body[data-active-panel="audio"] #companionAmbientStage,
html body[data-active-panel="audio"] #companionAmbientModel,
html body[data-active-panel="audio"] #companionAmbientCharacter,
html body[data-active-panel="audio"] .companion-dock,
html body[data-active-panel="audio"] .companion-mini,
html body[data-active-panel="audio"] .companion-avatar-stage,
html body[data-active-panel="audio"] .companion-mini-bubble,
html body[data-active-panel="audio"] .companion-ambient-stage,
html body[data-active-panel="audio"] .character-xiaowen,
html body[data-active-panel="audio"] img[src*="xiaowen"],
html body:has(.panel[data-panel="audio"].active) #companionDock,
html body:has(.panel[data-panel="audio"].active) #companionMini,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatar,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatarStage,
html body:has(.panel[data-panel="audio"].active) #companionMiniCharacter,
html body:has(.panel[data-panel="audio"].active) #companionMiniBubble,
html body:has(.panel[data-panel="audio"].active) #companionAmbientStage,
html body:has(.panel[data-panel="audio"].active) #companionAmbientModel,
html body:has(.panel[data-panel="audio"].active) #companionAmbientCharacter,
html body:has(.panel[data-panel="audio"].active) .companion-dock,
html body:has(.panel[data-panel="audio"].active) .companion-mini,
html body:has(.panel[data-panel="audio"].active) .companion-avatar-stage,
html body:has(.panel[data-panel="audio"].active) .companion-mini-bubble,
html body:has(.panel[data-panel="audio"].active) .companion-ambient-stage,
html body:has(.panel[data-panel="audio"].active) .character-xiaowen,
html body:has(.panel[data-panel="audio"].active) img[src*="xiaowen"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="audio"] .audio-review-cabin {
  grid-template-rows: 40px 104px minmax(0, 1fr) 104px !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-cabin-title .icon-btn,
html body[data-active-panel="audio"] .audio-panel-head .icon-btn,
html body[data-active-panel="audio"] .audio-question-kicker .icon-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html body[data-active-panel="audio"] .audio-cabin-statusbar {
  min-height: 104px !important;
  grid-template-columns: minmax(300px, 1.2fr) 118px 118px 124px minmax(230px, 0.9fr) !important;
}

html body[data-active-panel="audio"] .audio-status-actions {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-cabin-workspace {
  grid-template-columns: 316px minmax(0, 1fr) 360px !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-dialogue-timeline {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item,
html body[data-active-panel="audio"] .audio-cabin-timeline-item * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item {
  min-height: 70px !important;
  padding: 11px 12px 11px 38px !important;
  grid-template-columns: 58px minmax(130px, 1fr) 52px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 10px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item span {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item strong {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item em {
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item small {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 3 !important;
  justify-self: end !important;
  align-self: center !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item span,
html body[data-active-panel="audio"] .audio-cabin-timeline-item strong,
html body[data-active-panel="audio"] .audio-cabin-timeline-item em,
html body[data-active-panel="audio"] .audio-cabin-timeline-item small {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="audio"] .audio-thread-block {
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 14px !important;
}

html body[data-active-panel="audio"] .audio-thread-block > img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  object-position: center 32% !important;
  background: #ece8ff !important;
  border: 1px solid rgba(124, 77, 255, 0.22) !important;
  box-shadow: 0 8px 20px rgba(91, 140, 255, 0.12) !important;
}

html body[data-active-panel="audio"] .audio-comment-head {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-coach-panel {
  position: relative !important;
  z-index: 2 !important;
}

html body[data-active-panel="audio"] .audio-action-bar {
  position: relative !important;
  z-index: 3 !important;
  grid-template-columns: 84px minmax(340px, 1fr) minmax(560px, 1.15fr) !important;
  padding-right: 14px !important;
}

html body[data-active-panel="audio"] .audio-action-buttons {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1.15fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

html body[data-active-panel="audio"] .audio-action-buttons .primary-btn,
html body[data-active-panel="audio"] .audio-action-buttons .ghost-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

/* Audio review red-frame fixes v247: final override for the review cabin. */
html body[data-active-panel="audio"] #companionDock,
html body[data-active-panel="audio"] #companionMini,
html body[data-active-panel="audio"] #companionMiniAvatar,
html body[data-active-panel="audio"] #companionMiniAvatarStage,
html body[data-active-panel="audio"] #companionMiniCharacter,
html body[data-active-panel="audio"] #companionMiniBubble,
html body[data-active-panel="audio"] #companionAmbientStage,
html body[data-active-panel="audio"] #companionAmbientModel,
html body[data-active-panel="audio"] #companionAmbientCharacter,
html body[data-active-panel="audio"] .companion-dock,
html body[data-active-panel="audio"] .companion-mini,
html body[data-active-panel="audio"] .companion-avatar-stage,
html body[data-active-panel="audio"] .companion-mini-bubble,
html body[data-active-panel="audio"] .companion-ambient-stage,
html body[data-active-panel="audio"] .is-workspace-hidden,
html body[data-active-panel="audio"] .character-xiaowen,
html body[data-active-panel="audio"] img[src*="xiaowen"],
html body:has(.panel[data-panel="audio"].active) #companionDock,
html body:has(.panel[data-panel="audio"].active) #companionMini,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatar,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatarStage,
html body:has(.panel[data-panel="audio"].active) #companionMiniCharacter,
html body:has(.panel[data-panel="audio"].active) #companionMiniBubble,
html body:has(.panel[data-panel="audio"].active) #companionAmbientStage,
html body:has(.panel[data-panel="audio"].active) #companionAmbientModel,
html body:has(.panel[data-panel="audio"].active) #companionAmbientCharacter,
html body:has(.panel[data-panel="audio"].active) .companion-dock,
html body:has(.panel[data-panel="audio"].active) .companion-mini,
html body:has(.panel[data-panel="audio"].active) .companion-avatar-stage,
html body:has(.panel[data-panel="audio"].active) .companion-mini-bubble,
html body:has(.panel[data-panel="audio"].active) .companion-ambient-stage,
html body:has(.panel[data-panel="audio"].active) .is-workspace-hidden,
html body:has(.panel[data-panel="audio"].active) .character-xiaowen,
html body:has(.panel[data-panel="audio"].active) img[src*="xiaowen"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="audio"] .audio-cabin-title .audio-back-btn,
html body .panel[data-panel="audio"].active .audio-cabin-title .audio-back-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0f172a !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
}

html body[data-active-panel="audio"] .audio-panel-head .audio-collapse-btn,
html body .panel[data-panel="audio"].active .audio-panel-head .audio-collapse-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

html body[data-active-panel="audio"] .audio-cabin-workspace,
html body .panel[data-panel="audio"].active .audio-cabin-workspace {
  grid-template-columns: 328px minmax(0, 1fr) 372px !important;
  gap: 14px !important;
}

html body[data-active-panel="audio"] .audio-dialogue-timeline,
html body .panel[data-panel="audio"].active .audio-dialogue-timeline {
  min-height: 0 !important;
  padding: 4px 0 0 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 10px 12px 10px 38px !important;
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) 54px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: left !important;
  white-space: normal !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item *,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item .audio-timeline-time,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item .audio-timeline-time {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: 62px !important;
  display: block !important;
  color: #5b54ff !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item .audio-timeline-copy,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item .audio-timeline-copy {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  align-self: center !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item .audio-timeline-copy strong,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item .audio-timeline-copy strong {
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item .audio-timeline-copy em,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item .audio-timeline-copy em {
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  color: #64748b !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-style: normal !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item small,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item small {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
  justify-self: end !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: 54px !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  color: #64748b !important;
  background: rgba(148, 163, 184, 0.1) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-thread-block,
html body .panel[data-panel="audio"].active .audio-thread-block {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 14px !important;
}

html body[data-active-panel="audio"] .audio-thread-block > img,
html body .panel[data-panel="audio"].active .audio-thread-block > img {
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  object-position: center 34% !important;
  background: #ece8ff !important;
  border: 1px solid rgba(124, 77, 255, 0.22) !important;
  box-shadow: 0 8px 20px rgba(91, 140, 255, 0.14) !important;
}

html body[data-active-panel="audio"] .audio-comment-head,
html body .panel[data-panel="audio"].active .audio-comment-head {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-coach-panel,
html body .panel[data-panel="audio"].active .audio-coach-panel {
  min-height: 0 !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

html body[data-active-panel="audio"] .audio-report-digest,
html body[data-active-panel="audio"] .audio-dimension-list,
html body[data-active-panel="audio"] .audio-coach-card,
html body[data-active-panel="audio"] .audio-coach-card ul,
html body .panel[data-panel="audio"].active .audio-report-digest,
html body .panel[data-panel="audio"].active .audio-dimension-list,
html body .panel[data-panel="audio"].active .audio-coach-card,
html body .panel[data-panel="audio"].active .audio-coach-card ul {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body[data-active-panel="audio"] .audio-report-digest,
html body .panel[data-panel="audio"].active .audio-report-digest {
  padding: 0 !important;
  display: grid !important;
  gap: 12px !important;
  border: 0 !important;
  background: transparent !important;
}

html body[data-active-panel="audio"] .audio-coach-score,
html body .panel[data-panel="audio"].active .audio-coach-score {
  min-height: auto !important;
  padding: 12px !important;
}

html body[data-active-panel="audio"] .audio-coach-score p,
html body .panel[data-panel="audio"].active .audio-coach-score p,
html body[data-active-panel="audio"] .audio-coach-card li,
html body .panel[data-panel="audio"].active .audio-coach-card li {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body[data-active-panel="audio"] .audio-action-bar,
html body .panel[data-panel="audio"].active .audio-action-bar {
  z-index: 3 !important;
  grid-template-columns: 84px minmax(340px, 1fr) minmax(560px, 1.12fr) !important;
  padding-right: 18px !important;
  overflow: hidden !important;
}

/* Workspace stability guard v260: isolate workbench pages from historical page patches. */
html body:not([data-active-panel="landing"]) .topbar {
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 220px) minmax(320px, 640px) minmax(160px, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  overflow: visible !important;
}

html body:not([data-active-panel="landing"]) .topbar h1,
html body:not([data-active-panel="landing"]) .topbar h2,
html body:not([data-active-panel="landing"]) .topbar p,
html body:not([data-active-panel="landing"]) .topbar span,
html body:not([data-active-panel="landing"]) .topbar strong,
html body:not([data-active-panel="landing"]) .sidebar,
html body:not([data-active-panel="landing"]) .menu,
html body:not([data-active-panel="landing"]) .menu-item,
html body:not([data-active-panel="landing"]) .sidebar-section,
html body:not([data-active-panel="landing"]) .sidebar-account-card,
html body:not([data-active-panel="landing"]) .sidebar-account-card * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
}

html body:not([data-active-panel="landing"]) .topbar h1,
html body:not([data-active-panel="landing"]) .topbar h2 {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

html body:not([data-active-panel="landing"]) .topbar-search {
  min-width: 0 !important;
  width: 100% !important;
  justify-self: center !important;
}

html body:not([data-active-panel="landing"]) .topbar-search input {
  width: 100% !important;
  min-height: 42px !important;
  line-height: 1.2 !important;
}

html body:not([data-active-panel="landing"]) .topbar-user-trigger {
  justify-self: end !important;
  min-width: 104px !important;
  max-width: 168px !important;
  min-height: 42px !important;
  overflow: hidden !important;
}

html body:not([data-active-panel="landing"]) .topbar-user-trigger strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionDock,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionMini,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionMiniAvatar,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionMiniAvatarStage,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionMiniCharacter,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionMiniBubble,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionPanel,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionAmbientStage,
html body.companion-workspace-hidden #companionDock,
html body.companion-workspace-hidden #companionMini,
html body.companion-workspace-hidden #companionMiniAvatar,
html body.companion-workspace-hidden #companionMiniAvatarStage,
html body.companion-workspace-hidden #companionMiniCharacter,
html body.companion-workspace-hidden #companionMiniBubble,
html body.companion-workspace-hidden #companionPanel,
html body.companion-workspace-hidden #companionAmbientStage {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-hero,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 18px 24px !important;
  min-height: 136px !important;
  padding: 22px 28px !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-title,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title {
  flex: 1 1 640px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
  min-width: 0 !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-title h2,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title h2 {
  flex: 1 1 420px !important;
  min-width: min(420px, 100%) !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-title > p:last-child,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title > p:last-child {
  flex: 1 0 100% !important;
  max-width: 980px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-status,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-status {
  flex: 0 1 680px !important;
  width: auto !important;
  min-width: min(100%, 520px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-status > div:not(.waveform-progress-ring):not(.waveform-hero-actions),
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-status > div:not(.waveform-progress-ring):not(.waveform-hero-actions) {
  flex: 1 1 128px !important;
  min-width: 128px !important;
  max-width: 180px !important;
}

html body[data-active-panel="waveform"] .waveform-scope-card-main,
html body:has(.panel[data-panel="waveform"].active) .waveform-scope-card-main {
  min-height: 430px !important;
}

html body[data-active-panel="waveform"] .waveform-scope-svg,
html body:has(.panel[data-panel="waveform"].active) .waveform-scope-svg {
  width: 100% !important;
  min-height: 420px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item {
  min-height: 72px !important;
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item *,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

html body[data-active-panel="audio"] .audio-timeline-copy,
html body .panel[data-panel="audio"].active .audio-timeline-copy {
  min-width: 0 !important;
}

html body[data-active-panel="audio"] .audio-timeline-copy strong,
html body .panel[data-panel="audio"].active .audio-timeline-copy strong,
html body[data-active-panel="audio"] .audio-timeline-copy em,
html body .panel[data-panel="audio"].active .audio-timeline-copy em {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.45 !important;
}

@media (max-width: 1280px) {
  html body:not([data-active-panel="landing"]) .topbar {
    grid-template-columns: minmax(120px, 180px) minmax(260px, 1fr) auto !important;
  }

  html body[data-active-panel="waveform"] .waveform-investigation-status,
  html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-status {
    justify-content: flex-start !important;
  }
}

/* Audio review cabin stability v261 final: keep this at file end. */
html body[data-active-panel="audio"] .audio-review-cabin > .audio-workbench-metrics,
html body[data-active-panel="audio"] .audio-review-cabin > .feedback-box.full,
html body[data-active-panel="audio"] .audio-review-cabin > .pipeline-grid.full,
html body[data-active-panel="audio"] .audio-review-cabin > .stack-list,
html body .panel[data-panel="audio"].active .audio-review-cabin > .audio-workbench-metrics,
html body .panel[data-panel="audio"].active .audio-review-cabin > .feedback-box.full,
html body .panel[data-panel="audio"].active .audio-review-cabin > .pipeline-grid.full,
html body .panel[data-panel="audio"].active .audio-review-cabin > .stack-list {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="audio"] .audio-cabin-workspace,
html body .panel[data-panel="audio"].active .audio-cabin-workspace {
  grid-template-columns: clamp(208px, 20vw, 260px) minmax(430px, 1fr) clamp(276px, 24vw, 320px) !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-main-scroll,
html body .panel[data-panel="audio"].active .audio-main-scroll {
  min-width: 0 !important;
  padding: 16px !important;
}

html body[data-active-panel="audio"] .audio-current-question,
html body .panel[data-panel="audio"].active .audio-current-question {
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto) !important;
}

html body[data-active-panel="audio"] .audio-current-question h1,
html body .panel[data-panel="audio"].active .audio-current-question h1,
html body[data-active-panel="audio"] .audio-speech-card p,
html body .panel[data-panel="audio"].active .audio-speech-card p,
html body[data-active-panel="audio"] .audio-coach-card li,
html body .panel[data-panel="audio"].active .audio-coach-card li {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item {
  grid-template-columns: 54px minmax(0, 1fr) 48px !important;
  gap: 4px 8px !important;
}

html body[data-active-panel="audio"] .audio-timeline-copy,
html body .panel[data-panel="audio"].active .audio-timeline-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-question-meta,
html body .panel[data-panel="audio"].active .audio-question-meta {
  min-width: 112px !important;
  justify-self: end !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="audio"] .audio-cabin-workspace,
  html body .panel[data-panel="audio"].active .audio-cabin-workspace {
    grid-template-columns: 198px minmax(390px, 1fr) 268px !important;
  }

  html body[data-active-panel="audio"] .audio-question-meta,
  html body .panel[data-panel="audio"].active .audio-question-meta {
    display: none !important;
  }

  html body[data-active-panel="audio"] .audio-current-question,
  html body .panel[data-panel="audio"].active .audio-current-question {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Audio review cabin stability v261: keep the cockpit readable after legacy patches. */
html body[data-active-panel="audio"] .audio-review-cabin > .audio-workbench-metrics,
html body[data-active-panel="audio"] .audio-review-cabin > .feedback-box.full,
html body[data-active-panel="audio"] .audio-review-cabin > .pipeline-grid.full,
html body[data-active-panel="audio"] .audio-review-cabin > .stack-list,
html body .panel[data-panel="audio"].active .audio-review-cabin > .audio-workbench-metrics,
html body .panel[data-panel="audio"].active .audio-review-cabin > .feedback-box.full,
html body .panel[data-panel="audio"].active .audio-review-cabin > .pipeline-grid.full,
html body .panel[data-panel="audio"].active .audio-review-cabin > .stack-list {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="audio"] .audio-cabin-workspace,
html body .panel[data-panel="audio"].active .audio-cabin-workspace {
  grid-template-columns: clamp(208px, 20vw, 260px) minmax(430px, 1fr) clamp(276px, 24vw, 320px) !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-main-scroll,
html body .panel[data-panel="audio"].active .audio-main-scroll {
  min-width: 0 !important;
  padding: 16px !important;
}

html body[data-active-panel="audio"] .audio-current-question,
html body .panel[data-panel="audio"].active .audio-current-question {
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto) !important;
}

html body[data-active-panel="audio"] .audio-current-question h1,
html body .panel[data-panel="audio"].active .audio-current-question h1,
html body[data-active-panel="audio"] .audio-speech-card p,
html body .panel[data-panel="audio"].active .audio-speech-card p,
html body[data-active-panel="audio"] .audio-coach-card li,
html body .panel[data-panel="audio"].active .audio-coach-card li {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item {
  grid-template-columns: 54px minmax(0, 1fr) 48px !important;
  gap: 4px 8px !important;
}

html body[data-active-panel="audio"] .audio-timeline-copy,
html body .panel[data-panel="audio"].active .audio-timeline-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-question-meta,
html body .panel[data-panel="audio"].active .audio-question-meta {
  min-width: 112px !important;
  justify-self: end !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="audio"] .audio-cabin-workspace,
  html body .panel[data-panel="audio"].active .audio-cabin-workspace {
    grid-template-columns: 198px minmax(390px, 1fr) 268px !important;
  }

  html body[data-active-panel="audio"] .audio-question-meta,
  html body .panel[data-panel="audio"].active .audio-question-meta {
    display: none !important;
  }

  html body[data-active-panel="audio"] .audio-current-question,
  html body .panel[data-panel="audio"].active .audio-current-question {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Waveform Investigation - 示波器实验台 */
html body[data-active-panel="waveform"] .main,
html body:has(.panel[data-panel="waveform"].active) .main {
  background: #07111f !important;
}

html body[data-active-panel="waveform"] .content,
html body:has(.panel[data-panel="waveform"].active) .content {
  background:
    radial-gradient(circle at 24% 10%, rgba(91, 140, 255, 0.18), transparent 32%),
    radial-gradient(circle at 86% 8%, rgba(124, 77, 255, 0.12), transparent 30%),
    #07111f !important;
}

html body[data-active-panel="waveform"] .topbar,
html body:has(.panel[data-panel="waveform"].active) .topbar {
  background: rgba(6, 15, 29, 0.94) !important;
  border-bottom-color: rgba(148, 163, 184, 0.14) !important;
  color: #e5eefc !important;
}

html body[data-active-panel="waveform"] .topbar h1,
html body:has(.panel[data-panel="waveform"].active) .topbar h1 {
  color: #f8fafc !important;
}

html body[data-active-panel="waveform"] #companionDock,
html body[data-active-panel="waveform"] #companionMini,
html body[data-active-panel="waveform"] #companionMiniAvatar,
html body[data-active-panel="waveform"] #companionMiniAvatarStage,
html body[data-active-panel="waveform"] #companionMiniCharacter,
html body[data-active-panel="waveform"] #companionMiniBubble,
html body[data-active-panel="waveform"] #companionAmbientStage,
html body[data-active-panel="waveform"] #companionAmbientModel,
html body[data-active-panel="waveform"] #companionAmbientCharacter,
html body[data-active-panel="waveform"] .companion-dock,
html body[data-active-panel="waveform"] .companion-mini,
html body[data-active-panel="waveform"] .companion-avatar-stage,
html body[data-active-panel="waveform"] .companion-mini-bubble,
html body[data-active-panel="waveform"] .companion-ambient-stage,
html body[data-active-panel="waveform"] .character-xiaowen,
html body[data-active-panel="waveform"] img[src*="xiaowen"],
html body:has(.panel[data-panel="waveform"].active) #companionDock,
html body:has(.panel[data-panel="waveform"].active) #companionMini,
html body:has(.panel[data-panel="waveform"].active) #companionMiniAvatar,
html body:has(.panel[data-panel="waveform"].active) #companionMiniAvatarStage,
html body:has(.panel[data-panel="waveform"].active) #companionMiniCharacter,
html body:has(.panel[data-panel="waveform"].active) #companionMiniBubble,
html body:has(.panel[data-panel="waveform"].active) #companionAmbientStage,
html body:has(.panel[data-panel="waveform"].active) #companionAmbientModel,
html body:has(.panel[data-panel="waveform"].active) #companionAmbientCharacter,
html body:has(.panel[data-panel="waveform"].active) .companion-dock,
html body:has(.panel[data-panel="waveform"].active) .companion-mini,
html body:has(.panel[data-panel="waveform"].active) .companion-avatar-stage,
html body:has(.panel[data-panel="waveform"].active) .companion-mini-bubble,
html body:has(.panel[data-panel="waveform"].active) .companion-ambient-stage,
html body:has(.panel[data-panel="waveform"].active) .character-xiaowen,
html body:has(.panel[data-panel="waveform"].active) img[src*="xiaowen"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="waveform"] .panel[data-panel="waveform"].active,
html body .panel[data-panel="waveform"].active {
  display: block !important;
  padding: 12px 16px 18px !important;
  background: #07111f !important;
  color: #e5eefc !important;
}

html body[data-active-panel="waveform"] #waveformTrainingBoard,
html body .panel[data-panel="waveform"].active #waveformTrainingBoard {
  width: 100% !important;
}

.waveform-investigation-shell,
.waveform-investigation-shell * {
  box-sizing: border-box;
}

.waveform-investigation-shell {
  display: grid;
  gap: 12px;
  min-width: 0;
  color: #dbeafe;
}

.waveform-investigation-hero,
.waveform-investigation-grid,
.waveform-scope-card,
.waveform-measure-card,
.waveform-diagnosis-card,
.waveform-info-card,
.waveform-note-card,
.waveform-ai-panel,
.waveform-ai-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(10, 22, 39, 0.9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

.waveform-investigation-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 88px;
  padding: 14px 20px;
  border-radius: 18px;
}

.waveform-investigation-title {
  display: grid;
  grid-template-columns: auto minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 10px 18px;
  align-items: center;
  min-width: 0;
}

.waveform-investigation-title > p:first-child {
  margin: 0;
  color: #eef2ff;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0;
}

.waveform-investigation-title > p:first-child span {
  color: #93a4bd;
  font-size: 13px;
  font-weight: 850;
}

.waveform-investigation-title h2 {
  margin: 0;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: 0;
}

.waveform-investigation-title > p:last-child {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 920px;
  color: #b9c7dc;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.waveform-investigation-title > p:nth-of-type(2) {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 920px;
  color: #b9c7dc;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.waveform-project-context-banner,
.debug-project-context-banner {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.waveform-project-context-banner span,
.waveform-project-context-banner strong,
.waveform-project-context-banner em,
.debug-project-context-banner span,
.debug-project-context-banner strong,
.debug-project-context-banner em {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.waveform-project-context-banner span,
.debug-project-context-banner span {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.24);
}

.waveform-project-context-banner strong,
.debug-project-context-banner strong {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.waveform-project-context-banner em,
.debug-project-context-banner em {
  color: #bfdbfe;
  background: rgba(91, 140, 255, 0.12);
  border: 1px solid rgba(91, 140, 255, 0.18);
}

.debug-project-context-banner em {
  color: #2563eb;
}

.waveform-investigation-tabs {
  justify-content: flex-start !important;
}

.waveform-investigation-tabs button {
  background: rgba(15, 23, 42, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #cbd5e1 !important;
  border-radius: 999px !important;
}

.waveform-investigation-tabs button.active {
  background: rgba(124, 77, 255, 0.2) !important;
  border-color: rgba(124, 77, 255, 0.56) !important;
  color: #ffffff !important;
}

.waveform-mode-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.36);
}

.waveform-mode-tabs button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9fb0c8;
  font-size: 12px;
  font-weight: 950;
}

.waveform-mode-tabs button.active {
  background: linear-gradient(135deg, #7c4dff, #5b8cff);
  color: #fff;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.2);
}

.waveform-investigation-status {
  display: grid;
  grid-template-columns: auto minmax(104px, 1fr) minmax(104px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.waveform-investigation-status > div:not(.waveform-progress-ring):not(.waveform-hero-actions) {
  min-height: 56px;
  padding: 9px 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
}

.waveform-investigation-status span {
  display: block;
  color: #9fb0c8;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

.waveform-investigation-status strong {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

.waveform-progress-ring {
  --progress: 85;
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: conic-gradient(#7c4dff calc(var(--progress) * 1%), rgba(148, 163, 184, 0.18) 0);
}

.waveform-progress-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: inherit;
  background: #071426;
}

.waveform-progress-ring strong,
.waveform-progress-ring span {
  position: relative;
  z-index: 1;
  text-align: center;
}

.waveform-progress-ring strong {
  margin: 0;
  font-size: 18px;
  color: #ffffff;
}

.waveform-progress-ring span {
  margin-top: -14px;
  font-size: 10px;
}

.waveform-hero-actions {
  display: grid;
  grid-template-columns: auto auto 44px;
  gap: 10px;
  align-items: center;
}

.waveform-hero-actions button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 880;
}

.waveform-hero-avatar {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(124, 77, 255, 0.48);
  border-radius: 999px;
  background-color: rgba(226, 232, 240, 0.9);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.08);
  cursor: pointer;
}

.waveform-investigation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.25fr);
  gap: 12px;
  align-items: start;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.waveform-ability-growth-card {
  padding: 18px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(9, 20, 38, 0.95), rgba(15, 23, 42, 0.9)),
    radial-gradient(circle at 10% 20%, rgba(124, 77, 255, 0.2), transparent 42%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
}

.waveform-growth-title {
  display: grid;
  gap: 6px;
}

.waveform-growth-title span {
  color: #60a5fa;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.waveform-growth-title strong {
  color: #f8fafc;
  font-size: 22px;
  font-weight: 950;
}

.waveform-growth-title p {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 800;
}

.waveform-growth-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.waveform-growth-step {
  min-height: 104px;
  padding: 14px;
  display: grid;
  gap: 6px;
  align-content: center;
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.76);
}

.waveform-growth-step span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
}

.waveform-growth-step strong {
  color: #c4b5fd;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}

.waveform-growth-step p {
  margin: 0;
  color: #dbeafe;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
}

.waveform-growth-step.is-current {
  border-color: rgba(34, 197, 94, 0.34);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(91, 140, 255, 0.1));
}

.waveform-growth-step.is-current strong {
  color: #86efac;
}

.waveform-investigation-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.waveform-scope-card,
.waveform-measure-card,
.waveform-diagnosis-card,
.waveform-info-card,
.waveform-note-card,
.waveform-ai-panel,
.waveform-ai-card {
  border-radius: 16px;
}

body[data-active-panel="waveform"] .waveform-screenshot-assistant,
.panel[data-panel="waveform"].active .waveform-screenshot-assistant {
  display: grid;
  gap: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 77, 255, 0.13), transparent 36%),
    rgba(255, 255, 255, 0.96);
}

body[data-active-panel="waveform"] .waveform-screenshot-head,
.panel[data-panel="waveform"].active .waveform-screenshot-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

body[data-active-panel="waveform"] .waveform-screenshot-head h4,
.panel[data-panel="waveform"].active .waveform-screenshot-head h4 {
  margin: 0;
}

body[data-active-panel="waveform"] .waveform-screenshot-head p,
.panel[data-panel="waveform"].active .waveform-screenshot-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

body[data-active-panel="waveform"] .waveform-screenshot-head > span,
.panel[data-panel="waveform"].active .waveform-screenshot-head > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  color: #6d28d9;
  background: rgba(124, 77, 255, 0.11);
  font-weight: 900;
  font-size: 12px;
}

body[data-active-panel="waveform"] .waveform-screenshot-upload,
.panel[data-panel="waveform"].active .waveform-screenshot-upload {
  border: 1px dashed rgba(124, 77, 255, 0.42);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.11), rgba(59, 130, 246, 0.08));
  color: #4f46e5;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  font-weight: 950;
  cursor: pointer;
}

body[data-active-panel="waveform"] .waveform-screenshot-upload strong,
.panel[data-panel="waveform"].active .waveform-screenshot-upload strong {
  color: #64748b;
  font-size: 12px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-panel="waveform"] .waveform-screenshot-result,
.panel[data-panel="waveform"].active .waveform-screenshot-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body[data-active-panel="waveform"] .waveform-screenshot-result div,
.panel[data-panel="waveform"].active .waveform-screenshot-result div {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.92);
  padding: 10px;
  min-width: 0;
}

body[data-active-panel="waveform"] .waveform-screenshot-result span,
.panel[data-panel="waveform"].active .waveform-screenshot-result span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

body[data-active-panel="waveform"] .waveform-screenshot-result strong,
.panel[data-panel="waveform"].active .waveform-screenshot-result strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 1000;
}

body[data-active-panel="waveform"] .waveform-screenshot-evidence,
body[data-active-panel="waveform"] .waveform-screenshot-empty,
.panel[data-panel="waveform"].active .waveform-screenshot-evidence,
.panel[data-panel="waveform"].active .waveform-screenshot-empty {
  margin: 0;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
  color: #475569;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
}

body[data-active-panel="waveform"] .waveform-screenshot-empty strong,
.panel[data-panel="waveform"].active .waveform-screenshot-empty strong {
  color: #0f172a;
}

body[data-active-panel="waveform"] .waveform-screenshot-action,
.panel[data-panel="waveform"].active .waveform-screenshot-action {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 11px 14px;
  background: linear-gradient(135deg, #7c4dff, #4f8cff);
  color: #fff;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(79, 70, 229, 0.18);
}

.waveform-scope-card {
  padding: 12px;
}

.waveform-scope-card-main {
  min-height: min(880px, calc(100vh - 176px));
  background:
    radial-gradient(circle at 50% 16%, rgba(56, 189, 248, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(9, 20, 36, 0.96), rgba(4, 11, 22, 0.98));
}

.waveform-scope-card-main.is-focus-mode {
  border-color: rgba(124, 77, 255, 0.52);
  box-shadow:
    0 0 0 1px rgba(124, 77, 255, 0.18),
    0 22px 70px rgba(2, 6, 23, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.waveform-scope-toolbar {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(112px, 1fr)) auto 40px;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.waveform-scope-toolbar > strong {
  color: #60a5fa;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.waveform-scope-toolbar label,
.waveform-scope-toolbar button {
  min-height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.78);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 850;
}

.waveform-scope-toolbar label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 0 10px;
}

.waveform-scope-toolbar select {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #f8fafc;
  font: inherit;
}

.waveform-scope-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 12px;
  cursor: pointer;
}

.waveform-scope-toolbar button span {
  width: 24px;
  height: 14px;
  border-radius: 999px;
  background: rgba(71, 85, 105, 0.72);
  box-shadow: inset 13px 0 0 rgba(226, 232, 240, 0.86);
}

.waveform-scope-toolbar button.active {
  border-color: rgba(124, 77, 255, 0.48);
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.28), rgba(91, 140, 255, 0.18)),
    rgba(15, 23, 42, 0.92);
  color: #ffffff;
}

.waveform-scope-toolbar button.active span {
  background: linear-gradient(90deg, #7c4dff, #5b8cff);
  box-shadow: inset -13px 0 0 rgba(255, 255, 255, 0.9), 0 0 18px rgba(91, 140, 255, 0.32);
}

.waveform-scope-status-line {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.waveform-scope-status-line span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.64);
  color: #93c5fd;
  font-size: 11px;
  font-weight: 900;
}

.waveform-scope-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.waveform-scope-stage {
  min-width: 0;
}

.waveform-scope-svg {
  display: block;
  width: 100%;
  height: clamp(720px, 76vh, 1040px);
  min-height: 720px;
  border-radius: 16px;
  overflow: hidden;
  background: #071426;
}

.waveform-live-note-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 500px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(15, 23, 42, 0.72);
}

.waveform-live-note-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.waveform-live-note-head span,
.waveform-note-readback span,
.waveform-ai-note-read span {
  display: block;
  color: #93a4bd;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
}

.waveform-live-note-head h3 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: 20px;
  line-height: 1.2;
}

.waveform-live-note-head em {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.13);
  color: #22c55e;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.waveform-live-note-panel textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 300px;
  resize: none;
  padding: 14px 14px 14px 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  outline: none;
  background:
    linear-gradient(90deg, rgba(124, 77, 255, 0.32) 0 3px, transparent 3px),
    rgba(2, 6, 23, 0.36);
  color: #dbeafe;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.75;
}

.waveform-live-note-panel textarea:focus {
  border-color: rgba(124, 77, 255, 0.56);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.12);
}

.waveform-note-readback,
.waveform-ai-note-read {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(124, 77, 255, 0.22);
  border-radius: 12px;
  background: rgba(124, 77, 255, 0.1);
}

.waveform-note-readback strong,
.waveform-ai-note-read strong {
  color: #e9d5ff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.55;
}

.waveform-axis text,
.waveform-cursor-box text {
  fill: #cbd5e1;
  font-size: 16px;
  font-weight: 780;
}

.waveform-label {
  font-size: 22px;
  font-weight: 950;
}

.waveform-label-warn {
  fill: #fb923c;
}

.waveform-label-info {
  fill: #38bdf8;
}

.waveform-marker-text {
  fill: #ffffff;
  font-size: 14px;
  font-weight: 950;
}

.waveform-annotation,
.waveform-annotation-value {
  fill: #c4b5fd;
  font-size: 18px;
  font-weight: 950;
}

.waveform-annotation-value {
  font-size: 22px;
}

.waveform-annotation.danger,
.waveform-annotation-value.danger {
  fill: #f9a8d4;
}

.waveform-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.waveform-card-head h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 17px;
  line-height: 1.2;
}

.waveform-card-head span {
  color: #90a4c2;
  font-size: 12px;
  font-weight: 850;
}

.waveform-measure-card,
.waveform-diagnosis-card,
.waveform-info-card,
.waveform-note-card {
  padding: 14px;
}

.waveform-measure-card {
  border-color: rgba(56, 189, 248, 0.2);
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(8, 19, 34, 0.98), rgba(3, 10, 20, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.28);
}

.waveform-measure-card,
.waveform-diagnosis-card {
  min-height: 156px;
}

.waveform-measure-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.46);
}

.waveform-measure-item {
  position: relative;
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  min-height: 118px;
  padding: 14px;
  border: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.54));
  color: #cbd5e1;
  cursor: pointer;
  text-align: left;
}

.waveform-measure-item:last-child {
  border-right: 0;
}

.waveform-measure-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: #38bdf8;
}

.waveform-measure-name {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.waveform-measure-name span {
  color: #e0f2fe;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.waveform-measure-name small {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waveform-measure-item p {
  grid-column: 1 / -1;
  margin: 0;
  color: #9fb0c8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.waveform-measure-item strong {
  grid-column: 1 / 2;
  align-self: center;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.waveform-measure-item em {
  grid-column: 2 / 3;
  align-self: end;
  justify-self: end;
  min-width: 44px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  color: #ffffff;
  background: rgba(148, 163, 184, 0.22);
}

.waveform-measure-item p {
  align-self: end;
  color: #7f8fa8;
}

.waveform-measure-item.danger::before {
  background: #ef4444;
}

.waveform-measure-item.danger em {
  background: #ef4444;
}

.waveform-measure-item.warn::before {
  background: #f59e0b;
}

.waveform-measure-item.warn em {
  background: #f59e0b;
}

.waveform-measure-item.success::before {
  background: #22c55e;
}

.waveform-measure-item.success em {
  background: #22c55e;
}

.waveform-measure-item.locked {
  border-right-color: rgba(148, 163, 184, 0.1);
  background:
    repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.04) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.54));
}

.waveform-measure-item.locked::before {
  background: #64748b;
}

.waveform-measure-item.locked strong {
  color: #cbd5e1;
  font-size: 21px;
  letter-spacing: 0;
}

.waveform-measure-item.locked em {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.16);
}

.waveform-measure-item.active {
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(56, 189, 248, 0.62),
    0 0 0 1px rgba(56, 189, 248, 0.18),
    0 18px 34px rgba(14, 165, 233, 0.16);
  background:
    radial-gradient(circle at 48% 0%, rgba(56, 189, 248, 0.22), transparent 48%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.68));
}

.waveform-measure-item.active .waveform-measure-name span,
.waveform-measure-item.active strong {
  color: #bae6fd;
}

.waveform-diagnosis-path {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.08), rgba(124, 77, 255, 0.08) 46%, rgba(56, 189, 248, 0.07)),
    rgba(2, 6, 23, 0.42);
}

.waveform-diagnosis-card {
  background:
    radial-gradient(circle at 10% 0%, rgba(34, 197, 94, 0.12), transparent 34%),
    linear-gradient(90deg, rgba(124, 77, 255, 0.1), transparent 32%),
    rgba(10, 22, 39, 0.9);
}

.waveform-diagnosis-card .waveform-card-head {
  margin-bottom: 10px;
}

.waveform-diagnosis-path i {
  display: none;
}

.waveform-diagnosis-node {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  min-height: 104px;
  padding: 14px 18px 14px 14px;
  border: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0;
  background: rgba(15, 23, 42, 0.58);
  color: #cbd5e1;
  text-align: left;
}

.waveform-diagnosis-node:last-child {
  border-right: 0;
}

.waveform-diagnosis-node::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -9px;
  z-index: 2;
  width: 18px;
  height: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  border-right: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(8, 16, 30, 0.96);
  transform: translateY(-50%) rotate(45deg);
}

.waveform-diagnosis-node:last-child::after {
  display: none;
}

.waveform-diagnosis-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 950;
}

.waveform-diagnosis-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.waveform-diagnosis-copy small {
  color: #7c8ca6;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
}

.waveform-diagnosis-copy strong {
  min-width: 0;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 930;
  line-height: 1.3;
}

.waveform-diagnosis-copy em {
  min-width: 0;
  color: #91a4bd;
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.35;
}

.waveform-diagnosis-node.done {
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.14), rgba(15, 23, 42, 0.56));
}

.waveform-diagnosis-node.done .waveform-diagnosis-index {
  background: #22c55e;
  color: #ffffff;
}

.waveform-diagnosis-node.active {
  box-shadow: inset 0 0 0 1px rgba(124, 77, 255, 0.52);
  background:
    linear-gradient(180deg, rgba(124, 77, 255, 0.2), rgba(15, 23, 42, 0.62));
}

.waveform-diagnosis-node.active .waveform-diagnosis-index {
  background: #7c4dff;
  color: #ffffff;
}

.waveform-diagnosis-node.active .waveform-diagnosis-copy small {
  color: #bda8ff;
}

.waveform-training-form-card,
.waveform-training-result-card {
  display: grid;
  gap: 14px;
  min-height: 156px;
  padding: 16px;
  border: 1px solid rgba(124, 77, 255, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 77, 255, 0.16), transparent 38%),
    rgba(15, 23, 42, 0.62);
}

.waveform-training-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.waveform-training-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.waveform-training-form label.wide {
  grid-column: span 2;
}

.waveform-training-form span {
  color: #a7b4c8;
  font-size: 12px;
  font-weight: 950;
}

.waveform-training-form input,
.waveform-training-form select,
.waveform-training-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  outline: none;
  background: rgba(2, 6, 23, 0.48);
  color: #e5eefc;
  font-size: 13px;
  font-weight: 780;
}

.waveform-training-form textarea {
  min-height: 82px;
  resize: vertical;
  line-height: 1.5;
}

.waveform-training-form input:focus,
.waveform-training-form select:focus,
.waveform-training-form textarea:focus {
  border-color: rgba(124, 77, 255, 0.62);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.12);
}

.waveform-training-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.waveform-training-form-actions p {
  flex: 1;
  margin: 0;
  color: #9fb0c8;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.5;
}

.waveform-score-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.waveform-score-strip div {
  min-height: 94px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.34);
}

.waveform-score-strip span,
.waveform-score-strip em {
  display: block;
  color: #93a4bd;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.waveform-score-strip strong {
  display: block;
  margin: 6px 0;
  color: #a78bfa;
  font-size: 34px;
  line-height: 1;
}

.waveform-answer-compare {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.8fr;
  gap: 12px;
}

.waveform-answer-compare section {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.28);
}

.waveform-answer-compare h4 {
  margin: 0 0 10px;
  color: #f8fafc;
  font-size: 14px;
}

.waveform-answer-compare p {
  display: grid;
  gap: 4px;
  margin: 0 0 9px;
  color: #dbeafe;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.5;
}

.waveform-answer-compare p span {
  color: #93a4bd;
  font-size: 12px;
  font-weight: 950;
}

.waveform-locked-answer {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.08);
}

.waveform-locked-answer strong {
  color: #fde68a;
  font-size: 15px;
}

.waveform-locked-answer p {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.5;
}

.waveform-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: 12px;
}

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

.waveform-info-grid p {
  display: grid;
  gap: 6px;
  min-height: 54px;
  margin: 0;
}

.waveform-info-grid span,
.waveform-note-card p {
  color: #93a4bd;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.55;
}

.waveform-info-grid strong {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.waveform-note-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 194px;
}

.waveform-note-card button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.8);
  color: #dbeafe;
}

.waveform-note-card textarea {
  min-height: 92px;
  width: 100%;
  resize: none;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  outline: none;
  background: rgba(15, 23, 42, 0.54);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.6;
}

.waveform-note-card textarea:focus {
  border-color: rgba(124, 77, 255, 0.56);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.12);
}

.waveform-ai-panel {
  position: sticky;
  top: 72px;
  display: grid;
  gap: 10px;
  align-self: start;
  max-height: calc(100vh - 86px);
  padding: 12px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

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

.waveform-ai-head p {
  margin: 0 0 4px;
  color: #9fb0c8;
  font-size: 12px;
  font-weight: 950;
}

.waveform-ai-head h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 20px;
}

.waveform-ai-head button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(124, 77, 255, 0.42);
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.16);
  color: #c4b5fd;
  font-weight: 900;
}

.waveform-ai-card {
  padding: 12px;
  background: rgba(15, 23, 42, 0.58);
  box-shadow: none;
}

.waveform-ai-card h4 {
  margin: 0 0 12px;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.25;
}

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

.waveform-observation-list button {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.3);
  color: #cbd5e1;
}

.waveform-observation-list button span,
.waveform-observation-list button em {
  color: #9fb0c8;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.waveform-observation-list button strong {
  min-width: 0;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waveform-observation-list button.done {
  border-color: rgba(34, 197, 94, 0.34);
}

.waveform-observation-list button.done em {
  color: #22c55e;
}

.waveform-observation-list button.active {
  border-color: rgba(124, 77, 255, 0.62);
  background: rgba(124, 77, 255, 0.18);
}

.waveform-observation-list button.active em {
  color: #a78bfa;
}

.waveform-guide-chat {
  display: grid;
  gap: 10px;
}

.waveform-guide-chat p {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.28);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.55;
}

.waveform-guide-chat p.user {
  margin-left: 24px;
  border-color: rgba(124, 77, 255, 0.28);
  background: rgba(124, 77, 255, 0.16);
}

.waveform-guide-chat span {
  color: #a78bfa;
  font-size: 12px;
  font-weight: 950;
}

.waveform-observe-focus {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.14), transparent 42%),
    rgba(2, 6, 23, 0.34);
}

.waveform-observe-focus > span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: #7dd3fc;
  background: rgba(14, 165, 233, 0.13);
  font-size: 12px;
  font-weight: 950;
}

.waveform-observe-focus strong {
  color: #f8fafc;
  font-size: 17px;
  line-height: 1.25;
}

.waveform-observe-focus p {
  margin: 0;
  color: #9fb0c8;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.5;
}

.waveform-observe-focus dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.waveform-observe-focus dl div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.52);
}

.waveform-observe-focus dt,
.waveform-observe-focus dd {
  margin: 0;
}

.waveform-observe-focus dt {
  color: #7f8fa8;
  font-size: 11px;
  font-weight: 900;
}

.waveform-observe-focus dd {
  margin-top: 5px;
  overflow: hidden;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waveform-evidence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.waveform-evidence-chips button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  color: #9fb0c8;
  font-size: 12px;
  font-weight: 900;
}

.waveform-evidence-chips button.active {
  border-color: rgba(56, 189, 248, 0.58);
  background: rgba(14, 165, 233, 0.18);
  color: #bae6fd;
}

.waveform-guide-steps {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.waveform-guide-steps p {
  position: relative;
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 11px 12px 11px 34px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.26);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.5;
}

.waveform-guide-steps p::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #38bdf8;
}

.waveform-guide-steps p.active {
  border-color: rgba(124, 77, 255, 0.38);
  background: rgba(124, 77, 255, 0.14);
}

.waveform-guide-steps p.active::before {
  background: #a78bfa;
}

.waveform-guide-steps span {
  color: #a78bfa;
  font-size: 12px;
  font-weight: 950;
}

.waveform-tip-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.waveform-tip-list li {
  position: relative;
  padding-left: 18px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 790;
  line-height: 1.45;
}

.waveform-tip-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #38bdf8;
}

.waveform-tip-list li.warn::before {
  background: #f59e0b;
}

.waveform-tip-list li.danger::before {
  background: #ef4444;
}

.waveform-tip-list li.success::before {
  background: #22c55e;
}

.waveform-conclusion-card dl {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.waveform-conclusion-card div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
}

.waveform-conclusion-card dt {
  color: #93a4bd;
  font-size: 12px;
  font-weight: 850;
}

.waveform-conclusion-card dd {
  min-width: 0;
  margin: 0;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.waveform-conclusion-card .primary-btn {
  min-height: 44px;
  border-radius: 10px;
}

.waveform-final-conclusion-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 8%, rgba(124, 77, 255, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(11, 18, 32, 0.94));
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.22);
}

.waveform-final-conclusion-card.pending {
  border-style: dashed;
  border-color: rgba(124, 77, 255, 0.35);
}

.waveform-final-pending {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(124, 77, 255, 0.24);
  border-radius: 16px;
  background: rgba(124, 77, 255, 0.1);
}

.waveform-final-pending strong,
.waveform-final-main strong,
.waveform-final-grid strong {
  display: block;
  color: #f8fafc;
  font-weight: 950;
}

.waveform-final-pending p,
.waveform-final-main p,
.waveform-final-grid p,
.waveform-final-actions p {
  margin: 6px 0 0;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.55;
}

.waveform-final-report {
  display: grid;
  gap: 14px;
}

.waveform-final-main {
  padding: 18px;
  border: 1px solid rgba(124, 77, 255, 0.34);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.86), rgba(91, 140, 255, 0.74)),
    rgba(15, 23, 42, 0.78);
  box-shadow: 0 16px 28px rgba(79, 70, 229, 0.24);
}

.waveform-final-main span,
.waveform-final-grid span {
  display: block;
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.waveform-final-main strong {
  margin-top: 6px;
  font-size: 26px;
}

.waveform-final-main p {
  color: rgba(255, 255, 255, 0.84);
}

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

.waveform-final-grid div {
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.25);
}

.waveform-final-grid strong {
  margin-top: 8px;
  font-size: 19px;
}

.waveform-final-validation {
  grid-column: span 2;
}

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

.waveform-final-actions p {
  margin: 0;
}

/* Waveform workbench frame lock v259: prevent mixed-version topbar/hero compression. */
html body[data-active-panel="waveform"] .topbar,
html body:has(.panel[data-panel="waveform"].active) .topbar {
  min-height: 66px !important;
  display: grid !important;
  grid-template-columns: minmax(168px, 220px) minmax(420px, 680px) minmax(180px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 10px 22px !important;
  border-radius: 0 !important;
  background: rgba(4, 12, 24, 0.96) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  box-shadow: none !important;
}

html body[data-active-panel="waveform"] .topbar h2,
html body:has(.panel[data-panel="waveform"].active) .topbar h2 {
  opacity: 1 !important;
  color: #f8fafc !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="waveform"] .topbar-search,
html body:has(.panel[data-panel="waveform"].active) .topbar-search {
  width: 100% !important;
  max-width: 680px !important;
}

html body[data-active-panel="waveform"] .topbar-search input,
html body:has(.panel[data-panel="waveform"].active) .topbar-search input {
  min-height: 42px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  color: #dbeafe !important;
  box-shadow: inset 0 0 0 1px rgba(124, 77, 255, 0.32) !important;
}

html body[data-active-panel="waveform"] .topbar-user-trigger,
html body:has(.panel[data-panel="waveform"].active) .topbar-user-trigger {
  min-height: 42px !important;
  max-width: 150px !important;
  color: #f8fafc !important;
  background: rgba(15, 23, 42, 0.78) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

html body[data-active-panel="waveform"] .topbar-user-trigger strong,
html body:has(.panel[data-panel="waveform"].active) .topbar-user-trigger strong {
  color: #f8fafc !important;
  max-width: 64px !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-hero,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-hero {
  grid-template-columns: minmax(620px, 1fr) minmax(500px, auto) !important;
  gap: 22px !important;
  align-items: center !important;
  min-height: 148px !important;
  padding: 22px 28px !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-title,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title {
  grid-template-columns: auto minmax(260px, auto) !important;
  align-items: center !important;
  gap: 12px 18px !important;
  min-width: 0 !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-title > p:first-child,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title > p:first-child {
  min-width: max-content !important;
  white-space: nowrap !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-title h2,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title h2 {
  grid-column: 1 / -1 !important;
  max-width: 100% !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.16 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  writing-mode: horizontal-tb !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-title > p:last-child,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title > p:last-child {
  max-width: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-title > p:nth-of-type(2),
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title > p:nth-of-type(2) {
  grid-column: 1 / -1 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="waveform"] .waveform-project-context-banner,
html body:has(.panel[data-panel="waveform"].active) .waveform-project-context-banner {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-status,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-status {
  grid-template-columns: 72px minmax(128px, 1fr) minmax(128px, 1fr) auto !important;
  justify-self: end !important;
  width: min(100%, 720px) !important;
  min-width: 0 !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-status > div,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-status > div {
  min-width: 0 !important;
}

html body[data-active-panel="waveform"] .waveform-hero-actions,
html body:has(.panel[data-panel="waveform"].active) .waveform-hero-actions {
  grid-template-columns: auto auto 44px !important;
  min-width: max-content !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-tabs,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

@media (max-width: 1500px) {
  html body[data-active-panel="waveform"] .waveform-investigation-hero,
  html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-active-panel="waveform"] .waveform-investigation-status,
  html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-status {
    justify-self: stretch !important;
    width: 100% !important;
  }
}

@media (max-width: 1180px) {
  html body[data-active-panel="waveform"] .topbar,
  html body:has(.panel[data-panel="waveform"].active) .topbar {
    grid-template-columns: minmax(120px, 160px) minmax(260px, 1fr) auto !important;
  }

  html body[data-active-panel="waveform"] .waveform-investigation-title h2,
  html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title h2,
  html body[data-active-panel="waveform"] .waveform-investigation-title > p:last-child,
  html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title > p:last-child {
    white-space: normal !important;
  }
}

@media (max-width: 1380px) {
  .waveform-investigation-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .waveform-ai-panel {
    position: relative;
    top: auto;
    max-height: none;
  }
}

@media (max-width: 1100px) {
  .waveform-investigation-hero,
  .waveform-investigation-status,
  .waveform-scope-toolbar,
  .waveform-measure-grid,
  .waveform-diagnosis-path,
  .waveform-bottom-grid,
  .waveform-info-grid,
  .waveform-final-grid,
  .waveform-final-actions,
  .waveform-final-pending {
    grid-template-columns: 1fr;
  }

  .waveform-final-validation {
    grid-column: auto;
  }

  .waveform-diagnosis-node {
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .waveform-diagnosis-node::after {
    top: auto;
    right: 50%;
    bottom: -9px;
    transform: translateX(50%) rotate(135deg);
  }

  .waveform-scope-svg {
    min-height: 360px;
  }
}

@media (max-width: 1480px) {
  html body[data-active-panel="audio"] .audio-cabin-workspace {
    grid-template-columns: 300px minmax(0, 1fr) 340px !important;
  }

  html body[data-active-panel="audio"] .audio-cabin-timeline-item {
    grid-template-columns: 54px minmax(118px, 1fr) 50px !important;
  }

  html body[data-active-panel="audio"] .audio-action-bar {
    grid-template-columns: 78px minmax(300px, 1fr) minmax(500px, 1.12fr) !important;
  }
}

@media (max-width: 1320px) {
  html body[data-active-panel="audio"] .audio-cabin-workspace {
    grid-template-columns: 286px minmax(0, 1fr) 324px !important;
  }

  html body[data-active-panel="audio"] .audio-cabin-timeline-item {
    grid-template-columns: 52px minmax(108px, 1fr) 48px !important;
    padding-left: 36px !important;
  }
}

/* Audio review final polish v246: clean cockpit details and remove stray coach avatars. */
html body[data-active-panel="audio"] #companionDock,
html body[data-active-panel="audio"] #companionMini,
html body[data-active-panel="audio"] #companionMiniAvatar,
html body[data-active-panel="audio"] #companionMiniAvatarStage,
html body[data-active-panel="audio"] #companionMiniCharacter,
html body[data-active-panel="audio"] #companionMiniBubble,
html body[data-active-panel="audio"] #companionAmbientStage,
html body[data-active-panel="audio"] #companionAmbientModel,
html body[data-active-panel="audio"] #companionAmbientCharacter,
html body[data-active-panel="audio"] .companion-dock,
html body[data-active-panel="audio"] .companion-mini,
html body[data-active-panel="audio"] .companion-avatar-stage,
html body[data-active-panel="audio"] .companion-mini-bubble,
html body[data-active-panel="audio"] .companion-ambient-stage,
html body[data-active-panel="audio"] .character-xiaowen,
html body[data-active-panel="audio"] img[src*="xiaowen"],
html body:has(.panel[data-panel="audio"].active) #companionDock,
html body:has(.panel[data-panel="audio"].active) #companionMini,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatar,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatarStage,
html body:has(.panel[data-panel="audio"].active) #companionMiniCharacter,
html body:has(.panel[data-panel="audio"].active) #companionMiniBubble,
html body:has(.panel[data-panel="audio"].active) #companionAmbientStage,
html body:has(.panel[data-panel="audio"].active) #companionAmbientModel,
html body:has(.panel[data-panel="audio"].active) #companionAmbientCharacter,
html body:has(.panel[data-panel="audio"].active) .companion-dock,
html body:has(.panel[data-panel="audio"].active) .companion-mini,
html body:has(.panel[data-panel="audio"].active) .companion-avatar-stage,
html body:has(.panel[data-panel="audio"].active) .companion-mini-bubble,
html body:has(.panel[data-panel="audio"].active) .companion-ambient-stage,
html body:has(.panel[data-panel="audio"].active) .character-xiaowen,
html body:has(.panel[data-panel="audio"].active) img[src*="xiaowen"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="audio"] .audio-review-cabin {
  grid-template-rows: 40px 104px minmax(0, 1fr) 104px !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-cabin-title .icon-btn,
html body[data-active-panel="audio"] .audio-panel-head .icon-btn,
html body[data-active-panel="audio"] .audio-question-kicker .icon-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

html body[data-active-panel="audio"] .audio-panel-head .icon-btn,
html body[data-active-panel="audio"] .audio-question-kicker .icon-btn {
  font-size: 14px !important;
}

html body[data-active-panel="audio"] .audio-cabin-statusbar {
  min-height: 104px !important;
  grid-template-columns: minmax(300px, 1.2fr) 118px 118px 124px minmax(230px, 0.9fr) !important;
}

html body[data-active-panel="audio"] .audio-status-actions {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-status-hero,
html body[data-active-panel="audio"] .audio-top-metric,
html body[data-active-panel="audio"] .audio-training-card {
  padding: 14px !important;
}

html body[data-active-panel="audio"] .audio-cabin-workspace {
  grid-template-columns: 316px minmax(0, 1fr) 360px !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-dialogue-timeline {
  padding: 2px 0 0 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item,
html body[data-active-panel="audio"] .audio-cabin-timeline-item * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item {
  min-height: 70px !important;
  padding: 11px 12px 11px 38px !important;
  grid-template-columns: 58px minmax(130px, 1fr) 52px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 10px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item span,
html body[data-active-panel="audio"] .audio-cabin-timeline-item strong,
html body[data-active-panel="audio"] .audio-cabin-timeline-item em {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item span {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item strong {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item em {
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item small {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 3 !important;
  justify-self: end !important;
  align-self: center !important;
}

html body[data-active-panel="audio"] .audio-thread-block {
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 14px !important;
}

html body[data-active-panel="audio"] .audio-thread-block > img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  object-position: center 32% !important;
  background: #ece8ff !important;
  border: 1px solid rgba(124, 77, 255, 0.22) !important;
  box-shadow: 0 8px 20px rgba(91, 140, 255, 0.12) !important;
}

html body[data-active-panel="audio"] .audio-analysis-card {
  gap: 8px !important;
}

html body[data-active-panel="audio"] .audio-comment-head {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-ai-comment {
  gap: 8px !important;
}

html body[data-active-panel="audio"] .audio-ai-comment p {
  margin-top: 0 !important;
}

html body[data-active-panel="audio"] .audio-coach-panel {
  position: relative !important;
  z-index: 2 !important;
  grid-template-rows: 38px minmax(210px, 1fr) 150px 128px !important;
}

html body[data-active-panel="audio"] .audio-action-bar {
  position: relative !important;
  z-index: 3 !important;
  grid-template-columns: 84px minmax(340px, 1fr) minmax(560px, 1.15fr) !important;
  padding-right: 14px !important;
}

html body[data-active-panel="audio"] .audio-action-buttons {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1.15fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

html body[data-active-panel="audio"] .audio-action-buttons .primary-btn,
html body[data-active-panel="audio"] .audio-action-buttons .ghost-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

@media (max-width: 1480px) {
  html body[data-active-panel="audio"] .audio-cabin-workspace {
    grid-template-columns: 300px minmax(0, 1fr) 340px !important;
  }

  html body[data-active-panel="audio"] .audio-cabin-timeline-item {
    grid-template-columns: 54px minmax(118px, 1fr) 50px !important;
  }

  html body[data-active-panel="audio"] .audio-action-bar {
    grid-template-columns: 78px minmax(300px, 1fr) minmax(500px, 1.12fr) !important;
  }
}

@media (max-width: 1320px) {
  html body[data-active-panel="audio"] .audio-cabin-workspace {
    grid-template-columns: 286px minmax(0, 1fr) 324px !important;
  }

  html body[data-active-panel="audio"] .audio-cabin-timeline-item {
    grid-template-columns: 52px minmax(108px, 1fr) 48px !important;
    padding-left: 36px !important;
  }
}

/* Audio review cabin final frame v210. */
html body[data-active-panel="audio"] {
  overflow: hidden !important;
  background: #f5f8fc !important;
}

html body[data-active-panel="audio"] .shell {
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .main {
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f5f8fc !important;
}

html body[data-active-panel="audio"] .topbar,
html body[data-active-panel="audio"] #globalNotice {
  display: none !important;
}

html body[data-active-panel="audio"] .panel[data-panel="audio"] {
  display: block !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 14px 18px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 16% 8%, rgba(91, 140, 255, 0.08), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #f5f8fc 100%) !important;
}

html body[data-active-panel="audio"] .audio-review-cabin {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 42px 92px minmax(0, 1fr) 112px !important;
  gap: 10px !important;
  overflow: hidden !important;
  color: #0f172a !important;
}

html body[data-active-panel="audio"] .audio-cabin-form {
  display: contents !important;
}

html body[data-active-panel="audio"] .audio-cabin-header,
html body[data-active-panel="audio"] .audio-cabin-statusbar,
html body[data-active-panel="audio"] .audio-timeline-panel,
html body[data-active-panel="audio"] .audio-review-main,
html body[data-active-panel="audio"] .audio-coach-panel,
html body[data-active-panel="audio"] .audio-action-bar {
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07) !important;
}

html body[data-active-panel="audio"] .audio-cabin-header {
  min-height: 0 !important;
  padding: 0 6px 0 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

html body[data-active-panel="audio"] .audio-cabin-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body[data-active-panel="audio"] .audio-cabin-title .icon-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
}

html body[data-active-panel="audio"] .audio-cabin-title h2 {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="audio"] .audio-cabin-title span,
html body[data-active-panel="audio"] .audio-session-card > span,
html body[data-active-panel="audio"] .audio-question-tags span {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.1) !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="audio"] .audio-upload-button {
  position: relative !important;
  width: 146px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(124, 77, 255, 0.35) !important;
  background: #ffffff !important;
  color: #6d4dff !important;
  cursor: pointer !important;
}

html body[data-active-panel="audio"] .audio-upload-button input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

html body[data-active-panel="audio"] .audio-upload-button strong {
  font-size: 13px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-upload-button em {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-cabin-statusbar {
  min-height: 0 !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 1.25fr) 112px 112px 124px minmax(220px, 1fr) 184px !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-status-hero,
html body[data-active-panel="audio"] .audio-profile-card,
html body[data-active-panel="audio"] .audio-session-card,
html body[data-active-panel="audio"] .audio-top-metric,
html body[data-active-panel="audio"] .audio-training-card,
html body[data-active-panel="audio"] .audio-report-actions {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94)) !important;
  box-shadow: 0 10px 26px rgba(91, 140, 255, 0.08) !important;
}

html body[data-active-panel="audio"] .audio-status-hero {
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
}

html body[data-active-panel="audio"] .audio-profile-card {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-profile-card img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.16) !important;
}

html body[data-active-panel="audio"] .audio-profile-card div,
html body[data-active-panel="audio"] .audio-session-card {
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
}

html body[data-active-panel="audio"] .audio-profile-card strong {
  font-size: 16px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-profile-card span,
html body[data-active-panel="audio"] .audio-profile-card small,
html body[data-active-panel="audio"] .audio-session-card p,
html body[data-active-panel="audio"] .audio-status-hero p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

html body[data-active-panel="audio"] .audio-status-hero > span {
  color: #6d4dff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-status-hero > strong {
  min-width: 0 !important;
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-session-fields,
html body[data-active-panel="audio"] .audio-preview {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body[data-active-panel="audio"] .audio-session-card p {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-session-card p i,
html body[data-active-panel="audio"] .audio-status-hero p i {
  width: 1px !important;
  height: 14px !important;
  background: rgba(148, 163, 184, 0.35) !important;
}

html body[data-active-panel="audio"] .audio-top-metric,
html body[data-active-panel="audio"] .audio-training-card {
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
}

html body[data-active-panel="audio"] .audio-top-metric span,
html body[data-active-panel="audio"] .audio-training-card span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html body[data-active-panel="audio"] .audio-top-metric strong {
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-top-metric.is-score strong {
  color: #6d4dff !important;
}

html body[data-active-panel="audio"] .audio-top-metric strong em,
html body[data-active-panel="audio"] .audio-top-metric small {
  color: #64748b !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

html body[data-active-panel="audio"] .audio-training-card .ghost-btn {
  width: 100% !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.08) !important;
  border-color: rgba(124, 77, 255, 0.2) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="audio"] .audio-report-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 8px !important;
  border-right: 0 !important;
}

html body[data-active-panel="audio"] .audio-report-actions .ghost-btn {
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-cabin-workspace {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) 340px !important;
  gap: 10px !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-timeline-panel,
html body[data-active-panel="audio"] .audio-coach-panel {
  min-height: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-timeline-panel {
  padding: 14px !important;
  display: grid !important;
  grid-template-rows: 28px 38px minmax(0, 1fr) !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-panel-head,
html body[data-active-panel="audio"] .audio-coach-head,
html body[data-active-panel="audio"] .audio-card-title,
html body[data-active-panel="audio"] .audio-question-kicker {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body[data-active-panel="audio"] .audio-panel-head strong,
html body[data-active-panel="audio"] .audio-card-title span,
html body[data-active-panel="audio"] .audio-coach-head strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-search-field {
  min-height: 36px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

html body[data-active-panel="audio"] .audio-search-field input {
  min-width: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html body[data-active-panel="audio"] .audio-dialogue-timeline {
  position: relative !important;
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 2px !important;
  padding: 2px 0 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-dialogue-timeline::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 2px !important;
  background: linear-gradient(180deg, #6d4dff, #fb923c, #22c55e, #5b8cff, #a855f7) !important;
  border-radius: 999px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 9px 10px 9px 34px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  gap: 4px 8px !important;
  text-align: left !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: transparent !important;
  cursor: pointer !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 20px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  border: 3px solid #ffffff !important;
  background: #6d4dff !important;
  box-shadow: 0 0 0 1px rgba(109, 77, 255, 0.24) !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item.current {
  border-radius: 10px !important;
  background: linear-gradient(90deg, rgba(124, 77, 255, 0.12), rgba(124, 77, 255, 0.03)) !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item.warn::before { background: #fb923c !important; }
html body[data-active-panel="audio"] .audio-cabin-timeline-item.good::before { background: #22c55e !important; }
html body[data-active-panel="audio"] .audio-cabin-timeline-item.info::before { background: #5b8cff !important; }

html body[data-active-panel="audio"] .audio-cabin-timeline-item span {
  color: #5b54ff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item strong {
  min-width: 0 !important;
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item em,
html body[data-active-panel="audio"] .audio-cabin-timeline-item small {
  color: #64748b !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item em {
  grid-column: 2 / 3 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item small {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  color: #64748b !important;
  background: rgba(148, 163, 184, 0.1) !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-history-dock {
  min-height: 0 !important;
  display: none !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
  padding-top: 8px !important;
}

html body[data-active-panel="audio"] .audio-history-dock .audio-history-grid {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-record-list {
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  font-size: 11px !important;
}

html body[data-active-panel="audio"] .audio-review-main {
  min-height: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-main-scroll {
  height: 100% !important;
  min-height: 0 !important;
  padding: 16px 18px !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

html body[data-active-panel="audio"] .audio-current-question {
  min-height: 108px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}

html body[data-active-panel="audio"] .audio-question-kicker,
html body[data-active-panel="audio"] .audio-current-question h1,
html body[data-active-panel="audio"] .audio-question-tags {
  grid-column: 1 / 2 !important;
}

html body[data-active-panel="audio"] .audio-question-kicker span {
  color: #5b54ff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="audio"] .audio-current-question h1 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="audio"] .audio-question-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body[data-active-panel="audio"] .audio-question-meta {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 4 !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-main-card,
html body[data-active-panel="audio"] .audio-dialogue-summary,
html body[data-active-panel="audio"] .audio-analysis-card,
html body[data-active-panel="audio"] .audio-transcript-editor {
  min-width: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body[data-active-panel="audio"] .audio-dialogue-summary {
  padding: 12px !important;
  display: grid !important;
  gap: 14px !important;
}

html body[data-active-panel="audio"] .audio-thread-block {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

html body[data-active-panel="audio"] .audio-thread-block > img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(124, 77, 255, 0.18) !important;
}

html body[data-active-panel="audio"] .audio-thread-block > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

html body[data-active-panel="audio"] .audio-thread-block strong {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-speech-card {
  position: relative !important;
  display: grid !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(124, 77, 255, 0.14) !important;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.06), rgba(91, 140, 255, 0.03)) !important;
}

html body[data-active-panel="audio"] .audio-speech-card p {
  margin: 0 !important;
  color: #1f2a44 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  font-weight: 800 !important;
}

html body[data-active-panel="audio"] .audio-speech-card mark {
  color: #4f46e5 !important;
  background: rgba(124, 77, 255, 0.1) !important;
  border-radius: 4px !important;
  padding: 0 3px !important;
}

html body[data-active-panel="audio"] .audio-player-row {
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
}

html body[data-active-panel="audio"] .audio-player-row button {
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(124, 77, 255, 0.12) !important;
  color: #6d4dff !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

html body[data-active-panel="audio"] .audio-player-row span,
html body[data-active-panel="audio"] .audio-player-row em {
  color: #475569 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-cabin-waveform {
  min-width: 0 !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-cabin-waveform i {
  display: block !important;
  width: 3px !important;
  min-width: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #7c4dff, #5b8cff) !important;
  opacity: 0.9 !important;
}

html body[data-active-panel="audio"] .audio-cabin-waveform.green i {
  background: linear-gradient(180deg, #22c55e, #5b8cff) !important;
}

html body[data-active-panel="audio"] .audio-dialogue-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body[data-active-panel="audio"] .audio-dialogue-stat {
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: #f8fbff !important;
}

html body[data-active-panel="audio"] .audio-transcript-editor {
  padding: 12px !important;
  display: grid !important;
  gap: 8px !important;
}

html body[data-active-panel="audio"] .audio-transcript-editor span {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] #audioTranscript {
  min-height: 88px !important;
  max-height: 120px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  background: #f8fbff !important;
  color: #1f2a44 !important;
  resize: vertical !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 750 !important;
}

html body[data-active-panel="audio"] .audio-analysis-card {
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-review-evidence,
html body[data-active-panel="audio"] .audio-ai-comment {
  display: grid !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-ai-comment {
  padding: 0 !important;
}

html body[data-active-panel="audio"] .audio-comment-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body[data-active-panel="audio"] .audio-comment-head img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  background: rgba(124, 77, 255, 0.1) !important;
}

html body[data-active-panel="audio"] .audio-ai-comment p {
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: rgba(124, 77, 255, 0.07) !important;
  color: #1f2a44 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  font-weight: 800 !important;
}

html body[data-active-panel="audio"] .audio-comment-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-comment-columns section {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: #ffffff !important;
}

html body[data-active-panel="audio"] .audio-comment-columns strong {
  flex: 0 0 100% !important;
  color: #0f172a !important;
  font-size: 13px !important;
}

html body[data-active-panel="audio"] .audio-comment-columns span {
  padding: 5px 8px !important;
  border-radius: 999px !important;
  color: #16a34a !important;
  background: rgba(34, 197, 94, 0.1) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html body[data-active-panel="audio"] .audio-comment-columns section:nth-child(2) span {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

html body[data-active-panel="audio"] .audio-coach-panel {
  padding: 14px !important;
  display: grid !important;
  grid-template-rows: 38px minmax(242px, 1fr) 154px 126px !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-coach-head {
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
  padding-bottom: 8px !important;
}

html body[data-active-panel="audio"] .audio-coach-head span {
  display: block !important;
  color: #6d4dff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="audio"] .audio-coach-head .small-btn {
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.08) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="audio"] .audio-report-digest {
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
  border: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-coach-score {
  min-height: 112px !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px 10px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
}

html body[data-active-panel="audio"] .audio-coach-score span {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-coach-score strong {
  grid-column: 1 / 2 !important;
  color: #6d4dff !important;
  font-size: 42px !important;
  line-height: 0.95 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-coach-score strong em {
  color: #475569 !important;
  font-size: 14px !important;
  font-style: normal !important;
}

html body[data-active-panel="audio"] .audio-coach-score > b {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.1) !important;
  font-size: 12px !important;
}

html body[data-active-panel="audio"] .audio-coach-score p {
  grid-column: 1 / 3 !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html body[data-active-panel="audio"] .audio-coach-missing {
  color: #ef4444 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-dimension-list {
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 9px !important;
  padding: 4px 4px 0 !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-dimension-list > strong,
html body[data-active-panel="audio"] .audio-coach-card > strong {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-dimension-row {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 8px !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html body[data-active-panel="audio"] .audio-dimension-row i {
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, 0.16) !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-dimension-row b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #7c4dff, #5b8cff) !important;
}

html body[data-active-panel="audio"] .audio-dimension-row:nth-child(5) b {
  background: linear-gradient(90deg, #fb923c, #f59e0b) !important;
}

html body[data-active-panel="audio"] .audio-coach-card {
  min-height: 0 !important;
  padding: 12px !important;
  display: grid !important;
  gap: 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-coach-card ul {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 7px !important;
  list-style: none !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-coach-card li {
  position: relative !important;
  min-width: 0 !important;
  padding-left: 22px !important;
  color: #334155 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-coach-card li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 16px !important;
  height: 16px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  color: #fff !important;
  font-size: 10px !important;
}

html body[data-active-panel="audio"] .audio-coach-card li.is-warn::before { content: "!" !important; background: #f59e0b !important; }
html body[data-active-panel="audio"] .audio-coach-card li.is-danger::before { content: "×" !important; background: #ef4444 !important; }
html body[data-active-panel="audio"] .audio-coach-card li.is-hot::before { content: "↑" !important; background: #fb7185 !important; }

html body[data-active-panel="audio"] .audio-recommend-card p {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-recommend-card span {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

html body[data-active-panel="audio"] .audio-recommend-card .primary-btn {
  min-height: 32px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

html body[data-active-panel="audio"] .audio-action-bar {
  min-height: 0 !important;
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-columns: 86px minmax(320px, 1fr) minmax(430px, 0.92fr) !important;
  align-items: center !important;
  gap: 14px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-summary-score {
  width: 74px !important;
  height: 74px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 0 !important;
  background:
    radial-gradient(circle at center, #ffffff 58%, transparent 60%),
    conic-gradient(#6d4dff 0 82%, rgba(124, 77, 255, 0.12) 82% 100%) !important;
}

html body[data-active-panel="audio"] .audio-summary-score strong {
  color: #0f172a !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-summary-score span {
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

html body[data-active-panel="audio"] .audio-summary-copy,
html body[data-active-panel="audio"] .audio-next-steps,
html body[data-active-panel="audio"] .audio-action-buttons {
  min-width: 0 !important;
  display: grid !important;
  gap: 6px !important;
}

html body[data-active-panel="audio"] .audio-summary-copy strong,
html body[data-active-panel="audio"] .audio-next-steps > strong {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-next-steps {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-summary-copy p {
  margin: 0 !important;
  color: #334155 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-summary-copy .link-btn {
  justify-self: start !important;
  padding: 0 !important;
  color: #6d4dff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-action-bar .audio-review-flow {
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-action-bar .audio-flow-step {
  min-height: 48px !important;
  padding: 7px 8px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

html body[data-active-panel="audio"] .audio-action-bar .audio-flow-step::after {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-action-bar .audio-flow-step strong {
  color: #0f172a !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

html body[data-active-panel="audio"] .audio-action-bar .audio-flow-step span {
  color: #64748b !important;
  font-size: 10px !important;
}

html body[data-active-panel="audio"] .audio-action-bar .audio-progress-shell {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-action-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-action-buttons .primary-btn {
  grid-column: auto !important;
  min-height: 44px !important;
  border-radius: 10px !important;
}

html body[data-active-panel="audio"] .audio-action-buttons .ghost-btn {
  min-height: 44px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="audio"] .audio-review-cabin > #audioReviewMetrics,
html body[data-active-panel="audio"] .audio-review-cabin > #audioAutoStatus,
html body[data-active-panel="audio"] .audio-review-cabin > #audioPipelineStatus,
html body[data-active-panel="audio"] .audio-review-cabin > #audioChecklistBox {
  position: absolute !important;
  left: -9999px !important;
  bottom: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Audio review cockpit v221: value-first status bar and Feishu-style fixed timeline. */
html body[data-active-panel="audio"] .audio-review-cabin {
  grid-template-rows: 42px 118px minmax(0, 1fr) 112px !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-cabin-title h2 {
  font-size: 22px !important;
}

html body[data-active-panel="audio"] .audio-cabin-statusbar {
  min-height: 118px !important;
  padding: 14px !important;
  grid-template-columns: minmax(300px, 1.25fr) minmax(132px, 0.48fr) minmax(132px, 0.48fr) minmax(132px, 0.52fr) minmax(230px, 0.86fr) minmax(190px, 0.64fr) !important;
  gap: 14px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(124, 77, 255, 0.1), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94)) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07) !important;
}

html body[data-active-panel="audio"] .audio-status-hero,
html body[data-active-panel="audio"] .audio-top-metric,
html body[data-active-panel="audio"] .audio-training-card,
html body[data-active-panel="audio"] .audio-report-actions {
  border-radius: 16px !important;
  padding: 16px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 10px 26px rgba(91, 140, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.68) !important;
}

html body[data-active-panel="audio"] .audio-status-hero {
  gap: 8px !important;
}

html body[data-active-panel="audio"] .audio-status-hero > span {
  width: fit-content !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: rgba(124, 77, 255, 0.1) !important;
  color: #6d4dff !important;
}

html body[data-active-panel="audio"] .audio-status-hero > strong {
  font-size: 24px !important;
  line-height: 1.14 !important;
}

html body[data-active-panel="audio"] .audio-status-hero p {
  font-size: 13px !important;
}

html body[data-active-panel="audio"] .audio-top-metric span,
html body[data-active-panel="audio"] .audio-training-card span {
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="audio"] .audio-top-metric strong {
  font-size: 34px !important;
  color: #0f172a !important;
}

html body[data-active-panel="audio"] .audio-top-metric.is-score strong {
  font-size: 38px !important;
  color: #6d4dff !important;
}

html body[data-active-panel="audio"] .audio-training-card {
  align-content: center !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-training-card .ghost-btn {
  min-height: 40px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

html body[data-active-panel="audio"] .audio-report-actions {
  grid-template-columns: 1fr !important;
  align-content: center !important;
}

html body[data-active-panel="audio"] .audio-report-actions .ghost-btn {
  min-height: 38px !important;
}

html body[data-active-panel="audio"] .audio-cabin-workspace {
  grid-template-columns: 286px minmax(0, 1fr) 360px !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-timeline-panel {
  grid-template-rows: 32px 40px minmax(0, 1fr) !important;
  padding: 16px !important;
}

html body[data-active-panel="audio"] .audio-panel-head strong {
  font-size: 16px !important;
}

html body[data-active-panel="audio"] .audio-dialogue-timeline {
  gap: 4px !important;
  padding-left: 10px !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item {
  min-height: 74px !important;
  padding: 12px 12px 12px 38px !important;
  grid-template-columns: 58px minmax(0, 1fr) auto !important;
  border-radius: 12px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item::before {
  left: 6px !important;
  top: 25px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item:hover,
html body[data-active-panel="audio"] .audio-cabin-timeline-item.current {
  background:
    linear-gradient(90deg, rgba(124, 77, 255, 0.14), rgba(124, 77, 255, 0.04)) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 77, 255, 0.12) !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item span {
  font-size: 13px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item strong {
  font-size: 14px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item em,
html body[data-active-panel="audio"] .audio-cabin-timeline-item small {
  font-size: 12px !important;
}

@media (max-width: 1480px) {
  html body[data-active-panel="audio"] .audio-cabin-statusbar {
    grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(116px, 0.42fr)) minmax(210px, 0.72fr) !important;
  }

  html body[data-active-panel="audio"] .audio-status-actions {
    display: none !important;
  }

  html body[data-active-panel="audio"] .audio-cabin-workspace {
    grid-template-columns: 268px minmax(0, 1fr) 330px !important;
  }
}

@media (max-width: 1320px) {
  html body[data-active-panel="audio"] .audio-cabin-statusbar {
    grid-template-columns: minmax(220px, 1.1fr) 100px 100px 112px minmax(188px, 1fr) 168px !important;
  }

  html body[data-active-panel="audio"] .audio-cabin-workspace {
    grid-template-columns: 230px minmax(0, 1fr) 310px !important;
  }

  html body[data-active-panel="audio"] .audio-action-bar {
    grid-template-columns: 78px minmax(240px, 1fr) minmax(380px, 0.95fr) !important;
  }
}

@media (max-width: 1100px) {
  html body[data-active-panel="audio"] {
    overflow: auto !important;
  }

  html body[data-active-panel="audio"] .main,
  html body[data-active-panel="audio"] .panel[data-panel="audio"],
  html body[data-active-panel="audio"] .audio-review-cabin {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  html body[data-active-panel="audio"] .audio-review-cabin {
    grid-template-rows: auto auto auto auto !important;
  }

  html body[data-active-panel="audio"] .audio-cabin-statusbar,
  html body[data-active-panel="audio"] .audio-cabin-workspace,
  html body[data-active-panel="audio"] .audio-action-bar {
    grid-template-columns: 1fr !important;
  }

  html body[data-active-panel="audio"] .audio-main-scroll,
  html body[data-active-panel="audio"] .audio-dialogue-timeline {
    overflow: visible !important;
  }
}

/* Account circular avatar absolute final lock v206: after all legacy avatar rules. */
html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar,
html body[data-active-panel="interview"] .interview-training-avatar-img {
  border-radius: 999px !important;
}

html body .sidebar-account-avatar {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 10px 22px rgba(91, 140, 255, 0.2) !important;
}

html body .topbar-user-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
  width: 46px !important;
  height: 46px !important;
  border: 2px solid rgba(91, 140, 255, 0.2) !important;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.16) !important;
}

html body .account-modal-preview {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 16px !important;
}

html body .account-preview-avatar {
  width: 76px !important;
  height: 76px !important;
  border: 3px solid rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 14px 32px rgba(91, 140, 255, 0.18),
    0 0 0 1px rgba(124, 77, 255, 0.14) !important;
}

html body .account-avatar-upload-field {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body .account-avatar-upload-field > span {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body .account-avatar-upload-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

html body .account-avatar-upload-actions .ghost-btn {
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

html body .account-avatar-upload-actions .ghost-btn[hidden] {
  display: none !important;
}

/* Account circular avatar absolute final lock v206: after all legacy avatar rules. */
html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar,
html body[data-active-panel="interview"] .interview-training-avatar-img {
  border-radius: 999px !important;
}

html body .sidebar-account-avatar {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 10px 22px rgba(91, 140, 255, 0.2) !important;
}

html body .topbar-user-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
  width: 46px !important;
  height: 46px !important;
  border: 2px solid rgba(91, 140, 255, 0.2) !important;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.16) !important;
}

html body .account-modal-preview {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 16px !important;
}

html body .account-preview-avatar {
  width: 76px !important;
  height: 76px !important;
  border: 3px solid rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 14px 32px rgba(91, 140, 255, 0.18),
    0 0 0 1px rgba(124, 77, 255, 0.14) !important;
}

html body .account-avatar-upload-field {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body .account-avatar-upload-field > span {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body .account-avatar-upload-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

html body .account-avatar-upload-actions .ghost-btn {
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

html body .account-avatar-upload-actions .ghost-btn[hidden] {
  display: none !important;
}

/* Account avatar upload and circular avatar sizing v206. */
html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar,
html body[data-active-panel="interview"] .interview-training-avatar-img {
  border-radius: 999px !important;
}

html body .sidebar-account-avatar {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 10px 22px rgba(91, 140, 255, 0.2) !important;
}

html body .topbar-user-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
  width: 46px !important;
  height: 46px !important;
  border: 2px solid rgba(91, 140, 255, 0.2) !important;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.16) !important;
}

html body .account-modal-preview {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 16px !important;
}

html body .account-preview-avatar {
  width: 76px !important;
  height: 76px !important;
  border: 3px solid rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 14px 32px rgba(91, 140, 255, 0.18),
    0 0 0 1px rgba(124, 77, 255, 0.14) !important;
}

html body .account-avatar-upload-field {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body .account-avatar-upload-field > span {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body .account-avatar-upload-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

html body .account-avatar-upload-actions .ghost-btn {
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

html body .account-avatar-upload-actions .ghost-btn[hidden] {
  display: none !important;
}

/* Interview answer delivery lock v202: match the final cockpit reference. */
html body[data-active-panel="interview"] .interview-answer-zone {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 18px 20px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body[data-active-panel="interview"] .interview-answer-zone-head {
  min-height: 28px !important;
  align-items: center !important;
  border: 0 !important;
  padding: 0 !important;
}

html body[data-active-panel="interview"] .interview-answer-zone-head span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  color: #0f172a !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="interview"] .interview-answer-zone-head small {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="interview"] .interview-answer-recording-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 28px !important;
  padding: 0 !important;
  color: #64748b !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"] .interview-answer-recording-pill i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12) !important;
}

html body[data-active-panel="interview"] .interview-answer-recording-pill strong {
  color: #16a34a !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-answer-recording-pill b {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="interview"] .interview-answer-live-card {
  display: grid !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
}

html body[data-active-panel="interview"] .interview-waveform {
  position: relative !important;
  min-height: 62px !important;
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  padding: 0 18px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body[data-active-panel="interview"] .interview-waveform::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 50% !important;
  height: 1px !important;
  background: rgba(34, 197, 94, 0.18) !important;
  transform: translateY(-50%) !important;
}

html body[data-active-panel="interview"] .interview-waveform i {
  position: relative !important;
  z-index: 1 !important;
  width: 2px !important;
  min-width: 2px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  opacity: 0.82 !important;
  transform: none !important;
  animation: none !important;
}

html body[data-active-panel="interview"] .interview-waveform i:nth-child(3n + 1) { height: 10px !important; opacity: 0.7 !important; }
html body[data-active-panel="interview"] .interview-waveform i:nth-child(3n + 2) { height: 22px !important; opacity: 0.9 !important; }
html body[data-active-panel="interview"] .interview-waveform i:nth-child(5n) { height: 30px !important; opacity: 1 !important; }
html body[data-active-panel="interview"] .interview-waveform i:nth-child(7n) { height: 8px !important; opacity: 0.58 !important; }

html body[data-active-panel="interview"] .interview-voice-mode:has(.voice-badge.listening) .interview-waveform i,
html body[data-active-panel="interview"] .interview-voice-mode:has(.voice-badge.processing) .interview-waveform i,
html body[data-active-panel="interview"] .interview-answer-zone:has(.voice-badge.listening) .interview-waveform i,
html body[data-active-panel="interview"] .interview-answer-zone:has(.voice-badge.processing) .interview-waveform i {
  animation: interviewGreenWavePulse 1.08s ease-in-out infinite !important;
}

html body[data-active-panel="interview"] .interview-waveform i:nth-child(2n) { animation-delay: 0.04s !important; }
html body[data-active-panel="interview"] .interview-waveform i:nth-child(3n) { animation-delay: 0.1s !important; }
html body[data-active-panel="interview"] .interview-waveform i:nth-child(5n) { animation-delay: 0.16s !important; }

html body[data-active-panel="interview"] .interview-wave-label,
html body[data-active-panel="interview"] .interview-recording-status-card,
html body[data-active-panel="interview"] .interview-answer-live-preview,
html body[data-active-panel="interview"] .interview-answer-modes,
html body[data-active-panel="interview"] .interview-live-transcript-card {
  display: none !important;
}

html body[data-active-panel="interview"] .interview-answer-transcript-body {
  display: block !important;
  padding: 14px 18px 16px !important;
  color: #0f172a !important;
  background: #ffffff !important;
}

html body[data-active-panel="interview"] #interviewAnswerHighlightPreview {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0f172a !important;
  background: transparent !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  font-weight: 820 !important;
  box-shadow: none !important;
}

html body[data-active-panel="interview"] #interviewAnswerHighlightPreview mark {
  padding: 0 3px !important;
  color: #5b21ff !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-answer-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 34px !important;
}

html body[data-active-panel="interview"] .interview-answer-mode-toggle {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(124, 77, 255, 0.18) !important;
  border-radius: 10px !important;
  color: #5b21ff !important;
  background: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

html body[data-active-panel="interview"] .interview-answer-mode-toggle.is-active {
  color: #5b21ff !important;
  background: rgba(124, 77, 255, 0.07) !important;
}

html body[data-active-panel="interview"] .interview-answer-mode-toggle .voice-badge {
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  color: #16a34a !important;
  background: rgba(34, 197, 94, 0.1) !important;
  border: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] .interview-text-mode {
  display: none !important;
  min-height: 0 !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: #f8fbff !important;
}

html body[data-active-panel="interview"] .interview-answer-zone.text-mode-open .interview-text-mode {
  display: grid !important;
}

html body[data-active-panel="interview"] #candidateAnswer {
  min-height: 112px !important;
  max-height: 150px !important;
  padding: 13px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

html body[data-active-panel="interview"] .interview-answer-zone .audio-preview {
  display: none !important;
}

@keyframes interviewGreenWavePulse {
  0%, 100% { transform: scaleY(0.72) !important; opacity: 0.64 !important; }
  50% { transform: scaleY(1.18) !important; opacity: 1 !important; }
}

/* Default account avatar final lock v202: use product SVG avatars, not initials. */
html body .topbar-user-avatar::after,
html body .sidebar-account-avatar::after,
html body .account-preview-avatar::after,
html body[data-active-panel="interview"] .interview-training-avatar::after {
  content: "" !important;
  display: none !important;
}

html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
  color: transparent !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Account avatar final lock v198: initials render above the gradient asset. */
html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar {
  position: relative !important;
  isolation: isolate !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden !important;
  color: transparent !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  background-color: #5b8cff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body .topbar-user-avatar::after,
html body .sidebar-account-avatar::after,
html body .account-preview-avatar::after,
html body[data-active-panel="interview"] .interview-training-avatar::after {
  content: attr(data-avatar-initial) !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  pointer-events: none !important;
}

html body .topbar-user-avatar::after {
  font-size: 13px !important;
}

html body .sidebar-account-avatar::after {
  font-size: 16px !important;
}

html body .account-preview-avatar::after {
  font-size: 22px !important;
}

html body[data-active-panel="interview"] .interview-training-avatar {
  position: relative !important;
  isolation: isolate !important;
  width: 44px !important;
  height: 44px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid rgba(91, 140, 255, 0.18) !important;
  background: #5b8cff !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.16) !important;
}

html body[data-active-panel="interview"] .interview-training-avatar::after {
  font-size: 19px !important;
}

html body[data-active-panel="interview"] .interview-training-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Product default avatars v197: professional generated token, not cartoon portraits. */
html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar {
  position: relative !important;
  isolation: isolate !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden !important;
  color: #ffffff !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 950 !important;
  background-color: #5b8cff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  text-shadow: 0 2px 10px rgba(15, 23, 42, 0.2) !important;
}

html body .topbar-user-avatar::before,
html body .sidebar-account-avatar::before,
html body .account-preview-avatar::before,
html body[data-active-panel="interview"] .interview-training-avatar::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  pointer-events: none !important;
}

html body .topbar-user-avatar {
  font-size: 13px !important;
}

html body .sidebar-account-avatar {
  font-size: 15px !important;
}

html body .account-preview-avatar {
  font-size: 21px !important;
}

html body[data-active-panel="interview"] .interview-training-avatar {
  position: relative !important;
  isolation: isolate !important;
  width: 44px !important;
  height: 44px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid rgba(91, 140, 255, 0.18) !important;
  background: #5b8cff !important;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.16) !important;
}

html body[data-active-panel="interview"] .interview-training-avatar::after {
  content: attr(data-avatar-initial) !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 10px rgba(15, 23, 42, 0.2) !important;
}

html body[data-active-panel="interview"] .interview-training-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Interview AI coach rail v196: reserve real space for follow-ups and prevent inner-card overlap. */
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card {
  min-height: 0 !important;
  height: 100% !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-rows: 42px minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card > .section-head {
  min-height: 0 !important;
  height: 42px !important;
  padding: 0 2px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 112px 212px minmax(174px, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  min-height: 0 !important;
  height: 100% !important;
  padding: 10px !important;
  display: grid !important;
  gap: 6px !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card {
  grid-template-rows: 22px 42px 24px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-head,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-panel-title {
  min-height: 0 !important;
  height: 22px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-head span,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-panel-title strong {
  font-size: 13px !important;
  line-height: 1 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-head em,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-panel-title span {
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main {
  min-height: 0 !important;
  height: 42px !important;
  display: grid !important;
  grid-template-columns: minmax(72px, 0.68fr) minmax(78px, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main small {
  font-size: 11px !important;
  line-height: 1 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong {
  font-size: 34px !important;
  line-height: 0.9 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-track {
  width: 100% !important;
  height: 8px !important;
  min-width: 0 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p {
  min-height: 0 !important;
  max-height: 24px !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  color: #64748b !important;
  font-size: 11px !important;
  line-height: 1.18 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card {
  grid-template-rows: 24px minmax(0, 1fr) !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: repeat(5, minmax(28px, 1fr)) !important;
  gap: 6px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
  min-height: 28px !important;
  height: auto !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item b {
  min-width: 22px !important;
  width: 22px !important;
  min-height: 22px !important;
  height: 22px !important;
  font-size: 12px !important;
  flex: 0 0 22px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  grid-template-rows: 24px minmax(0, 1fr) 34px 16px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 2px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list {
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button:nth-child(n + 4),
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button.is-collapsed {
  display: none !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card.is-expanded .coach-followup-list button.is-collapsed {
  display: block !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
  min-height: 34px !important;
  height: auto !important;
  padding: 7px 10px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button::before {
  min-height: 20px !important;
  margin-right: 6px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
  position: relative !important;
  z-index: 3 !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
  min-height: 0 !important;
  height: 16px !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

/* Interview AI coach rail v195: compact fixed rows, no card collision, visible follow-up footer. */
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card {
  padding: 14px !important;
  display: grid !important;
  grid-template-rows: 40px minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card > .section-head {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 0 8px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 112px 224px minmax(178px, 1fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card {
  display: grid !important;
  grid-template-rows: 22px 52px 18px !important;
  gap: 4px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-head,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-panel-title {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(72px, 0.58fr) minmax(92px, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main small {
  font-size: 12px !important;
  line-height: 1 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong {
  font-size: 36px !important;
  line-height: 0.92 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card {
  display: grid !important;
  grid-template-rows: 30px minmax(0, 1fr) !important;
  gap: 8px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: repeat(5, minmax(28px, 1fr)) !important;
  gap: 7px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 9px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item b {
  width: 25px !important;
  min-width: 25px !important;
  height: 25px !important;
  min-height: 25px !important;
  font-size: 17px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  display: grid !important;
  grid-template-rows: 30px minmax(0, 1fr) 34px 18px !important;
  gap: 8px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 0 2px 0 0 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list {
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button:nth-child(n + 4),
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button.is-collapsed {
  display: none !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card.is-expanded .coach-followup-list button.is-collapsed {
  display: block !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
  min-height: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 3 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
  margin: 0 !important;
  min-height: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Homepage top status no-clipping v189: titles, numbers and notes each get a row. */
html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
  grid-template-rows: 176px 276px 420px 240px 240px 180px 232px 180px 150px 196px !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-welcome-panel {
  height: 176px !important;
  min-height: 176px !important;
  max-height: 176px !important;
  padding-top: 24px !important;
  padding-bottom: 22px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-welcome-copy,
html body:has(.landing-workspace.active) .landing-welcome-copy {
  min-height: 0 !important;
  gap: 16px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-greeting-line,
html body:has(.landing-workspace.active) .landing-greeting-line {
  min-height: 40px !important;
  line-height: 1.12 !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-statusbar,
html body:has(.landing-workspace.active) .landing-training-statusbar {
  width: min(100%, 1060px) !important;
  grid-template-columns: minmax(312px, 1.36fr) repeat(3, minmax(176px, 1fr)) !important;
  gap: 16px !important;
  align-items: end !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-status,
html body:has(.landing-workspace.active) .landing-training-status {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child),
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) {
  display: grid !important;
  grid-template-rows: 17px 34px 18px !important;
  align-content: center !important;
  gap: 1px !important;
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
  padding: 8px 18px !important;
  border-radius: 18px !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child) > span,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) > span,
html body[data-active-panel="landing"] .landing-training-status:not(:first-child) > strong,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) > strong,
html body[data-active-panel="landing"] .landing-training-status:not(:first-child) > em,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) > em {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child) > span,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) > span {
  display: block !important;
  height: 17px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 17px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child) > strong,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) > strong {
  display: block !important;
  height: 34px !important;
  color: #111827 !important;
  font-size: 25px !important;
  font-weight: 950 !important;
  line-height: 34px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-status:nth-child(3) > strong,
html body[data-active-panel="landing"] .landing-training-status:nth-child(4) > strong,
html body:has(.landing-workspace.active) .landing-training-status:nth-child(3) > strong,
html body:has(.landing-workspace.active) .landing-training-status:nth-child(4) > strong {
  color: #6d4dff !important;
}

html body[data-active-panel="landing"] .landing-training-status:not(:first-child) > em,
html body:has(.landing-workspace.active) .landing-training-status:not(:first-child) > em {
  display: block !important;
  height: 18px !important;
  color: #7b89a3 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  line-height: 18px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="landing"] .landing-training-status-primary,
html body[data-active-panel="landing"] .landing-training-status:first-child,
html body:has(.landing-workspace.active) .landing-training-status-primary,
html body:has(.landing-workspace.active) .landing-training-status:first-child {
  min-height: 112px !important;
  height: 112px !important;
  max-height: 112px !important;
  padding: 14px 18px !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-training-status-primary > span,
html body[data-active-panel="landing"] .landing-training-status:first-child > span,
html body:has(.landing-workspace.active) .landing-training-status-primary > span,
html body:has(.landing-workspace.active) .landing-training-status:first-child > span,
html body[data-active-panel="landing"] .landing-training-status-primary > em,
html body[data-active-panel="landing"] .landing-training-status:first-child > em,
html body:has(.landing-workspace.active) .landing-training-status-primary > em,
html body:has(.landing-workspace.active) .landing-training-status:first-child > em {
  min-height: 17px !important;
  height: 17px !important;
  line-height: 17px !important;
}

html body[data-active-panel="landing"] .landing-training-status-primary > strong,
html body[data-active-panel="landing"] .landing-training-status:first-child > strong,
html body:has(.landing-workspace.active) .landing-training-status-primary > strong,
html body:has(.landing-workspace.active) .landing-training-status:first-child > strong {
  line-height: 46px !important;
  overflow: visible !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: 228px 276px 420px 240px 240px 180px 232px 180px 150px 196px !important;
  }

  html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel,
  html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-welcome-panel {
    height: 228px !important;
    min-height: 228px !important;
    max-height: 228px !important;
  }

  html body[data-active-panel="landing"] .landing-training-statusbar,
  html body:has(.landing-workspace.active) .landing-training-statusbar {
    grid-template-columns: 1fr 1fr !important;
  }

  html body[data-active-panel="landing"] .landing-training-status-primary,
  html body[data-active-panel="landing"] .landing-training-status:first-child,
  html body:has(.landing-workspace.active) .landing-training-status-primary,
  html body:has(.landing-workspace.active) .landing-training-status:first-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 680px) {
  html body[data-active-panel="landing"] .shell .main .landing-workspace .landing-home-grid,
  html body:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid,
  html body[data-active-panel="landing"][data-landing-module-layout="custom"] .shell .main .landing-workspace .landing-home-grid,
  html body[data-landing-module-layout="custom"]:has(.landing-workspace.active) .shell .main .landing-workspace .landing-home-grid {
    grid-template-rows: 392px 276px 420px 240px 240px 180px 232px 180px 150px 196px !important;
  }

  html body[data-active-panel="landing"] .landing-home-grid > .section-card.landing-welcome-panel,
  html body:has(.landing-workspace.active) .landing-home-grid > .section-card.landing-welcome-panel {
    height: 392px !important;
    min-height: 392px !important;
    max-height: 392px !important;
  }

  html body[data-active-panel="landing"] .landing-training-statusbar,
  html body:has(.landing-workspace.active) .landing-training-statusbar {
    grid-template-columns: 1fr !important;
  }
}

/* Interview AI coach no-overlap v188: each card owns its space. */
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card {
  grid-template-rows: 40px minmax(0, 1fr) !important;
  gap: 10px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
  grid-template-rows: 150px 270px minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  min-height: 0 !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card {
  grid-template-rows: 28px 58px minmax(0, 38px) !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-head,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-panel-title {
  min-height: 0 !important;
  align-items: center !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main {
  grid-template-columns: minmax(82px, 0.68fr) minmax(96px, 1fr) !important;
  gap: 10px !important;
  min-height: 0 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main small {
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong {
  font-size: 34px !important;
  line-height: 0.95 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p {
  margin: 0 !important;
  max-height: 38px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 19px !important;
  -webkit-line-clamp: 2 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card {
  grid-template-rows: 32px minmax(0, 1fr) !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
  grid-template-rows: repeat(5, 36px) !important;
  gap: 7px !important;
  align-content: start !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item b {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  grid-template-rows: 32px minmax(0, 1fr) 38px 18px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-auto-rows: minmax(40px, max-content) !important;
  align-content: start !important;
  gap: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list {
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button:nth-child(n + 4),
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button.is-collapsed {
  display: none !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
  min-height: 40px !important;
  height: auto !important;
  padding: 0 10px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
  min-height: 38px !important;
  height: 38px !important;
  margin: 0 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle[hidden] {
  display: none !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 18px !important;
  -webkit-line-clamp: 1 !important;
}

/* Interview top status fit: keep three-line progress metrics fully visible. */
html body[data-active-panel="interview"] .interview-studio {
  grid-template-rows: 88px minmax(0, 1fr) calc(72px + var(--safe-bottom)) !important;
}

html body[data-active-panel="interview"] .interview-training-statusbar {
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  padding: 8px 24px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-training-metrics {
  align-items: center !important;
  overflow: visible !important;
}

html body[data-active-panel="interview"] .interview-training-metrics > span {
  min-height: 64px !important;
  height: 64px !important;
  padding: 8px 12px 7px !important;
  align-content: center !important;
  overflow: visible !important;
}

html body[data-active-panel="interview"] .interview-training-metrics > span small,
html body[data-active-panel="interview"] #interviewTopRemaining {
  line-height: 1.08 !important;
}

html body[data-active-panel="interview"] #interviewTopRoundLabel {
  min-height: 28px !important;
  padding-bottom: 9px !important;
  line-height: 1.02 !important;
  overflow: visible !important;
}

html body[data-active-panel="interview"] #interviewTopRoundLabel::after {
  bottom: 0 !important;
  height: 4px !important;
}

/* Interview candidate avatar: use the official default portrait, not an initial badge. */
html body[data-active-panel="interview"] .interview-training-avatar {
  background: #f3f7ff !important;
  border: 1px solid rgba(91, 140, 255, 0.16) !important;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.14) !important;
  color: transparent !important;
  font-size: 0 !important;
}

html body[data-active-panel="interview"] .interview-training-avatar::before,
html body[data-active-panel="interview"] .interview-training-avatar::after {
  content: none !important;
  display: none !important;
}

html body[data-active-panel="interview"] .interview-training-avatar-img {
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Account generated avatars v185: registration preference drives the default portrait. */
html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -999px !important;
  background-color: #f3f7ff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body .topbar-user-avatar {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(91, 140, 255, 0.18) !important;
  box-shadow: 0 10px 22px rgba(91, 140, 255, 0.16) !important;
}

html body .sidebar-account-button {
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
}

html body .sidebar-account-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
}

html body .account-modal-preview {
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
}

html body .account-preview-avatar {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(91, 140, 255, 0.18) !important;
  box-shadow: 0 12px 26px rgba(91, 140, 255, 0.16) !important;
}

html body #accountPreviewAvatarHint {
  display: block !important;
  margin-top: 4px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 1.3 !important;
}

html body[data-active-panel="interview"] .interview-ai-coach-panel,
html body[data-active-panel="interview"] .interview-copilot-card .interview-ai-coach-panel {
  align-content: stretch !important;
  grid-column: 1 / 2 !important;
  grid-row: 2 / 3 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 132px 210px minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
}

/* Final interview bottom action bar: fixed 72px, status / answer actions / question actions. */
html body[data-active-panel="interview"] .interview-bottom-actionbar {
  position: fixed !important;
  left: 236px !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: auto !important;
  height: calc(72px + var(--safe-bottom)) !important;
  min-height: calc(72px + var(--safe-bottom)) !important;
  max-height: calc(72px + var(--safe-bottom)) !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 0.8fr) minmax(180px, 280px) minmax(344px, auto) minmax(236px, auto) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 10px 24px calc(10px + var(--safe-bottom)) !important;
  border-width: 1px 0 0 !important;
  border-style: solid !important;
  border-color: rgba(124, 77, 255, 0.14) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 -12px 34px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(18px) !important;
}

html body[data-active-panel="interview"] .interview-bottom-context {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-active-panel="interview"] .interview-bottom-context span {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  color: #6d4dff !important;
  background: rgba(124, 77, 255, 0.1) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"] #interviewRecordingTimer {
  color: #0f172a !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"] .interview-bottom-waveform {
  min-width: 0 !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 16px !important;
  border-left: 1px solid rgba(124, 77, 255, 0.12) !important;
  border-right: 1px solid rgba(124, 77, 255, 0.12) !important;
}

html body[data-active-panel="interview"] .interview-bottom-waveform i {
  width: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #7c4dff, #5b8cff) !important;
  box-shadow: 0 0 10px rgba(124, 77, 255, 0.22) !important;
}

html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(1),
html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(8) {
  height: 12px !important;
}

html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(2),
html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(7),
html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(11) {
  height: 20px !important;
}

html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(3),
html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(6),
html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(10) {
  height: 30px !important;
}

html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(4),
html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(9),
html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(12) {
  height: 24px !important;
}

html body[data-active-panel="interview"] .interview-bottom-waveform i:nth-child(5) {
  height: 34px !important;
}

html body[data-active-panel="interview"] .interview-bottom-actions {
  min-width: 0 !important;
  display: grid !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

html body[data-active-panel="interview"] .interview-bottom-actions-center {
  grid-template-columns: minmax(104px, 1fr) minmax(104px, 1fr) minmax(96px, 0.9fr) !important;
}

html body[data-active-panel="interview"] .interview-bottom-actions-right {
  grid-template-columns: minmax(104px, 0.9fr) minmax(112px, 1fr) !important;
}

html body[data-active-panel="interview"] .interview-bottom-actionbar .primary-btn,
html body[data-active-panel="interview"] .interview-bottom-actionbar .ghost-btn,
html body[data-active-panel="interview"] .interview-bottom-actionbar .danger-btn {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html body[data-active-panel="interview"] .interview-bottom-actionbar .interview-btn-secondary {
  color: #5b54ff !important;
  border-color: rgba(124, 77, 255, 0.22) !important;
  background: rgba(124, 77, 255, 0.08) !important;
}

html body[data-active-panel="interview"] .interview-bottom-actionbar .interview-btn-weak {
  color: #64748b !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: rgba(248, 250, 252, 0.9) !important;
  box-shadow: none !important;
}

html body[data-active-panel="interview"] .shell.sidebar-collapsed .interview-bottom-actionbar,
html body[data-active-panel="interview"].compact-shell .interview-bottom-actionbar,
html body[data-active-panel="interview"].ios-app .interview-bottom-actionbar,
html.react-student-embedded body[data-active-panel="interview"] .interview-bottom-actionbar {
  left: 0 !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="interview"] .interview-bottom-actionbar {
    height: calc(112px + var(--safe-bottom)) !important;
    min-height: calc(112px + var(--safe-bottom)) !important;
    max-height: calc(112px + var(--safe-bottom)) !important;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) !important;
    grid-template-rows: 1fr 1fr !important;
  }

  html body[data-active-panel="interview"] .interview-bottom-actions-right {
    grid-column: 2 / 3 !important;
  }
}

@media (max-width: 760px) {
  html body[data-active-panel="interview"] .interview-bottom-actionbar {
    height: calc(160px + var(--safe-bottom)) !important;
    min-height: calc(160px + var(--safe-bottom)) !important;
    max-height: calc(160px + var(--safe-bottom)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    padding: 10px 12px calc(10px + var(--safe-bottom)) !important;
  }

  html body[data-active-panel="interview"] .interview-bottom-actions-center,
  html body[data-active-panel="interview"] .interview-bottom-actions-right {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body[data-active-panel="interview"] #interviewRecordingTimer {
    font-size: 18px !important;
  }
}

/* Interview delivery acceptance lock: 首页是驾驶舱，模拟面试页是固定框架训练舱。 */
html body[data-active-panel="interview"],
html body[data-active-panel="interview"] .shell,
html body[data-active-panel="interview"] .main,
html body[data-active-panel="interview"] .panel[data-panel="interview"],
html body[data-active-panel="interview"] .interview-studio,
html body[data-active-panel="interview"] .interview-main-dashboard {
  overflow: hidden !important;
  max-height: 100dvh !important;
}

html body[data-active-panel="interview"] .interview-studio {
  height: 100dvh !important;
  display: grid !important;
  grid-template-rows: 80px minmax(0, 1fr) calc(72px + var(--safe-bottom)) !important;
}

html body[data-active-panel="interview"] .interview-training-statusbar {
  position: fixed !important;
  top: 0 !important;
  left: 236px !important;
  right: 0 !important;
  height: 80px !important;
  max-height: 80px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-bottom-actionbar {
  position: fixed !important;
  left: 236px !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(72px + var(--safe-bottom)) !important;
  max-height: calc(72px + var(--safe-bottom)) !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-main-dashboard {
  grid-row: 2 / 3 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 72%) minmax(320px, 28%) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 16px !important;
}

html body[data-active-panel="interview"] .interview-setup-card,
html body[data-active-panel="interview"] .interview-profile-form,
html body[data-active-panel="interview"] .interview-profile-dashboard,
html body[data-active-panel="interview"] .interview-resume-sync-card {
  display: none !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-workspace-card {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

html body[data-active-panel="interview"] .interview-copilot-card,
html body[data-active-panel="interview"] .interview-ai-coach-panel {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html body[data-active-panel="interview"] .coach-live-score-card,
html body[data-active-panel="interview"] .coach-structure-card,
html body[data-active-panel="interview"] .coach-followup-card,
html body[data-active-panel="interview"] .coach-judge-card {
  overflow: hidden !important;
}

html body[data-active-panel="interview"] .interview-question-feedback-card-inline[hidden] {
  display: none !important;
}

html body[data-active-panel="interview"] .shell.sidebar-collapsed .interview-training-statusbar,
html body[data-active-panel="interview"] .shell.sidebar-collapsed .interview-bottom-actionbar,
html body[data-active-panel="interview"].compact-shell .interview-training-statusbar,
html body[data-active-panel="interview"].compact-shell .interview-bottom-actionbar,
html body[data-active-panel="interview"].ios-app .interview-training-statusbar,
html body[data-active-panel="interview"].ios-app .interview-bottom-actionbar,
html.react-student-embedded body[data-active-panel="interview"] .interview-training-statusbar,
html.react-student-embedded body[data-active-panel="interview"] .interview-bottom-actionbar {
  left: 0 !important;
}

/* Interview XiaoWen guard: AI coach owns the training guidance; Xiaowen returns before/after the session. */
html body[data-active-panel="interview"] #companionDock,
html body[data-active-panel="interview"] #companionDock.companion-dock,
html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed,
html body[data-active-panel="interview"] #companionDock.companion-dock.companion-expanded {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body[data-active-panel="interview"] #companionAmbientStage,
html body[data-active-panel="interview"] #companionAmbientStage.companion-ambient-stage,
html body[data-active-panel="interview"] #companionAmbientStage.companion-ambient-stage.companion-ambient-moment {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body[data-active-panel="interview"] #companionDock.companion-dock {
  right: calc(22px + var(--safe-right)) !important;
  bottom: calc(96px + var(--safe-bottom)) !important;
  left: auto !important;
  top: auto !important;
  z-index: 76 !important;
}

html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed {
  width: auto !important;
  max-width: 132px !important;
}

html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed #companionMini {
  width: auto !important;
  min-width: 104px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
  backdrop-filter: blur(14px) !important;
}

html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage,
html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed .companion-avatar-stage,
html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed .companion-drag-handle,
html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed .companion-mini-badge,
html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed #companionMiniText {
  display: none !important;
}

html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed #companionMiniAvatar {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  display: inline-block !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  color: transparent !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12), 0 0 10px rgba(34, 197, 94, 0.58) !important;
  animation: none !important;
}

html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed .companion-mini-bubble {
  display: inline-flex !important;
  min-width: 0 !important;
  gap: 0 !important;
}

html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed #companionMiniName {
  display: inline !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed #companionMiniState {
  display: none !important;
}

html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed #companionMini::before,
html body[data-active-panel="interview"] #companionDock.companion-dock.companion-collapsed #companionMini::after {
  content: none !important;
  display: none !important;
}

/* Interview AI coach final layout v196: no overlap, follow-ups stay visible in the fixed right rail. */
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card {
  min-height: 0 !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-rows: 42px minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 112px 212px minmax(174px, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  gap: 6px !important;
  padding: 10px !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card {
  grid-template-rows: 22px 42px 24px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main {
  min-height: 0 !important;
  height: 42px !important;
  display: grid !important;
  grid-template-columns: minmax(72px, 0.68fr) minmax(78px, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong {
  font-size: 34px !important;
  line-height: 0.9 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-track {
  width: 100% !important;
  height: 8px !important;
  min-width: 0 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
  min-height: 0 !important;
  max-height: 24px !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  font-size: 11px !important;
  line-height: 1.18 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: repeat(5, minmax(28px, 1fr)) !important;
  gap: 6px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
  min-height: 28px !important;
  height: auto !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item b {
  min-width: 22px !important;
  width: 22px !important;
  min-height: 22px !important;
  height: 22px !important;
  font-size: 12px !important;
  flex: 0 0 22px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  grid-template-rows: 24px minmax(0, 1fr) 34px 16px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 2px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
  min-height: 40px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list {
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button:nth-child(n + 4),
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button.is-collapsed {
  display: none !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card.is-expanded .coach-followup-list button.is-collapsed {
  display: block !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
  min-height: 34px !important;
  height: auto !important;
  padding: 7px 10px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
  position: relative !important;
  z-index: 3 !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
  min-height: 0 !important;
  height: 16px !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

html body[data-active-panel="interview"].interview-coach-collapsed .interview-ai-coach-panel {
  display: none !important;
}

/* Product avatar absolute final lock v200: appended after all legacy overrides. */
html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar {
  position: relative !important;
  isolation: isolate !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden !important;
  color: transparent !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  background-color: #5b8cff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body .topbar-user-avatar::after,
html body .sidebar-account-avatar::after,
html body .account-preview-avatar::after,
html body[data-active-panel="interview"] .interview-training-avatar::after {
  content: attr(data-avatar-initial) !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  color: #0f172a !important;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  pointer-events: none !important;
}

html body .topbar-user-avatar::after {
  font-size: 13px !important;
}

html body .sidebar-account-avatar::after {
  font-size: 16px !important;
}

html body .account-preview-avatar::after {
  font-size: 22px !important;
}

html body[data-active-panel="interview"] .interview-training-avatar {
  position: relative !important;
  isolation: isolate !important;
  width: 44px !important;
  height: 44px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid rgba(91, 140, 255, 0.18) !important;
  background: #5b8cff !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.16) !important;
}

html body[data-active-panel="interview"] .interview-training-avatar::after {
  font-size: 19px !important;
}

html body[data-active-panel="interview"] .interview-training-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Default account avatar absolute final lock v202: must stay after legacy initial overlays. */
html body .topbar-user-avatar::after,
html body .sidebar-account-avatar::after,
html body .account-preview-avatar::after,
html body[data-active-panel="interview"] .interview-training-avatar::after {
  content: "" !important;
  display: none !important;
}

html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
  color: transparent !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Audio review final lock v246: keep this block last. */
html body[data-active-panel="audio"] #companionDock,
html body[data-active-panel="audio"] #companionMini,
html body[data-active-panel="audio"] #companionMiniAvatar,
html body[data-active-panel="audio"] #companionMiniAvatarStage,
html body[data-active-panel="audio"] #companionMiniCharacter,
html body[data-active-panel="audio"] #companionMiniBubble,
html body[data-active-panel="audio"] #companionAmbientStage,
html body[data-active-panel="audio"] #companionAmbientModel,
html body[data-active-panel="audio"] #companionAmbientCharacter,
html body[data-active-panel="audio"] .companion-dock,
html body[data-active-panel="audio"] .companion-mini,
html body[data-active-panel="audio"] .companion-avatar-stage,
html body[data-active-panel="audio"] .companion-mini-bubble,
html body[data-active-panel="audio"] .companion-ambient-stage,
html body[data-active-panel="audio"] .character-xiaowen,
html body[data-active-panel="audio"] img[src*="xiaowen"],
html body:has(.panel[data-panel="audio"].active) #companionDock,
html body:has(.panel[data-panel="audio"].active) #companionMini,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatar,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatarStage,
html body:has(.panel[data-panel="audio"].active) #companionMiniCharacter,
html body:has(.panel[data-panel="audio"].active) #companionMiniBubble,
html body:has(.panel[data-panel="audio"].active) #companionAmbientStage,
html body:has(.panel[data-panel="audio"].active) #companionAmbientModel,
html body:has(.panel[data-panel="audio"].active) #companionAmbientCharacter,
html body:has(.panel[data-panel="audio"].active) .companion-dock,
html body:has(.panel[data-panel="audio"].active) .companion-mini,
html body:has(.panel[data-panel="audio"].active) .companion-avatar-stage,
html body:has(.panel[data-panel="audio"].active) .companion-mini-bubble,
html body:has(.panel[data-panel="audio"].active) .companion-ambient-stage,
html body:has(.panel[data-panel="audio"].active) .character-xiaowen,
html body:has(.panel[data-panel="audio"].active) img[src*="xiaowen"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="audio"] .audio-cabin-title .icon-btn,
html body[data-active-panel="audio"] .audio-panel-head .icon-btn,
html body[data-active-panel="audio"] .audio-question-kicker .icon-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html body[data-active-panel="audio"] .audio-status-actions {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-cabin-workspace {
  grid-template-columns: 316px minmax(0, 1fr) 360px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item,
html body[data-active-panel="audio"] .audio-cabin-timeline-item * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item {
  min-height: 70px !important;
  padding: 11px 12px 11px 38px !important;
  grid-template-columns: 58px minmax(130px, 1fr) 52px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 10px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item span {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item strong {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item em {
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item small {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 3 !important;
  justify-self: end !important;
  align-self: center !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item span,
html body[data-active-panel="audio"] .audio-cabin-timeline-item strong,
html body[data-active-panel="audio"] .audio-cabin-timeline-item em,
html body[data-active-panel="audio"] .audio-cabin-timeline-item small {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body[data-active-panel="audio"] .audio-thread-block > img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  object-position: center 32% !important;
  background: #ece8ff !important;
  border: 1px solid rgba(124, 77, 255, 0.22) !important;
  box-shadow: 0 8px 20px rgba(91, 140, 255, 0.12) !important;
}

html body[data-active-panel="audio"] .audio-comment-head {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-action-bar {
  z-index: 3 !important;
  grid-template-columns: 84px minmax(340px, 1fr) minmax(560px, 1.15fr) !important;
}

html body[data-active-panel="audio"] .audio-action-buttons {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1.15fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-action-buttons .primary-btn,
html body[data-active-panel="audio"] .audio-action-buttons .ghost-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}
/* Audio review red-frame final lock v247: this must remain the last block. */
html body[data-active-panel="audio"] #companionDock,
html body[data-active-panel="audio"] #companionMini,
html body[data-active-panel="audio"] #companionMiniAvatar,
html body[data-active-panel="audio"] #companionMiniAvatarStage,
html body[data-active-panel="audio"] #companionMiniCharacter,
html body[data-active-panel="audio"] #companionMiniBubble,
html body[data-active-panel="audio"] #companionAmbientStage,
html body[data-active-panel="audio"] #companionAmbientModel,
html body[data-active-panel="audio"] #companionAmbientCharacter,
html body[data-active-panel="audio"] .companion-dock,
html body[data-active-panel="audio"] .companion-mini,
html body[data-active-panel="audio"] .companion-avatar-stage,
html body[data-active-panel="audio"] .companion-mini-bubble,
html body[data-active-panel="audio"] .companion-ambient-stage,
html body[data-active-panel="audio"] .is-workspace-hidden,
html body[data-active-panel="audio"] .character-xiaowen,
html body[data-active-panel="audio"] img[src*="xiaowen"],
html body:has(.panel[data-panel="audio"].active) #companionDock,
html body:has(.panel[data-panel="audio"].active) #companionMini,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatar,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatarStage,
html body:has(.panel[data-panel="audio"].active) #companionMiniCharacter,
html body:has(.panel[data-panel="audio"].active) #companionMiniBubble,
html body:has(.panel[data-panel="audio"].active) #companionAmbientStage,
html body:has(.panel[data-panel="audio"].active) #companionAmbientModel,
html body:has(.panel[data-panel="audio"].active) #companionAmbientCharacter,
html body:has(.panel[data-panel="audio"].active) .companion-dock,
html body:has(.panel[data-panel="audio"].active) .companion-mini,
html body:has(.panel[data-panel="audio"].active) .companion-avatar-stage,
html body:has(.panel[data-panel="audio"].active) .companion-mini-bubble,
html body:has(.panel[data-panel="audio"].active) .companion-ambient-stage,
html body:has(.panel[data-panel="audio"].active) .is-workspace-hidden,
html body:has(.panel[data-panel="audio"].active) .character-xiaowen,
html body:has(.panel[data-panel="audio"].active) img[src*="xiaowen"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="audio"] .audio-cabin-title .audio-back-btn,
html body .panel[data-panel="audio"].active .audio-cabin-title .audio-back-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0f172a !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
}

html body[data-active-panel="audio"] .audio-panel-head .audio-collapse-btn,
html body .panel[data-panel="audio"].active .audio-panel-head .audio-collapse-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

html body[data-active-panel="audio"] .audio-cabin-workspace,
html body .panel[data-panel="audio"].active .audio-cabin-workspace {
  grid-template-columns: 328px minmax(0, 1fr) 372px !important;
  gap: 14px !important;
}

html body[data-active-panel="audio"] .audio-dialogue-timeline,
html body .panel[data-panel="audio"].active .audio-dialogue-timeline {
  min-height: 0 !important;
  padding: 4px 0 0 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 10px 12px 10px 38px !important;
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) 54px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: left !important;
  white-space: normal !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item *,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  letter-spacing: 0 !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item .audio-timeline-time,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item .audio-timeline-time {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: 62px !important;
  display: block !important;
  color: #5b54ff !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item .audio-timeline-copy,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item .audio-timeline-copy {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  align-self: center !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
  overflow: hidden !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item .audio-timeline-copy strong,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item .audio-timeline-copy strong {
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item .audio-timeline-copy em,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item .audio-timeline-copy em {
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  color: #64748b !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-style: normal !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item small,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item small {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
  justify-self: end !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: 54px !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  color: #64748b !important;
  background: rgba(148, 163, 184, 0.1) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-active-panel="audio"] .audio-thread-block,
html body .panel[data-panel="audio"].active .audio-thread-block {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 14px !important;
}

html body[data-active-panel="audio"] .audio-thread-block > img,
html body .panel[data-panel="audio"].active .audio-thread-block > img {
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  object-position: center 34% !important;
  background: #ece8ff !important;
  border: 1px solid rgba(124, 77, 255, 0.22) !important;
  box-shadow: 0 8px 20px rgba(91, 140, 255, 0.14) !important;
}

html body[data-active-panel="audio"] .audio-comment-head,
html body .panel[data-panel="audio"].active .audio-comment-head {
  display: none !important;
}

html body[data-active-panel="audio"] .audio-coach-panel,
html body .panel[data-panel="audio"].active .audio-coach-panel {
  min-height: 0 !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

html body[data-active-panel="audio"] .audio-report-digest,
html body[data-active-panel="audio"] .audio-dimension-list,
html body[data-active-panel="audio"] .audio-coach-card,
html body[data-active-panel="audio"] .audio-coach-card ul,
html body .panel[data-panel="audio"].active .audio-report-digest,
html body .panel[data-panel="audio"].active .audio-dimension-list,
html body .panel[data-panel="audio"].active .audio-coach-card,
html body .panel[data-panel="audio"].active .audio-coach-card ul {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body[data-active-panel="audio"] .audio-report-digest,
html body .panel[data-panel="audio"].active .audio-report-digest {
  padding: 0 !important;
  display: grid !important;
  gap: 12px !important;
  border: 0 !important;
  background: transparent !important;
}

html body[data-active-panel="audio"] .audio-coach-score,
html body .panel[data-panel="audio"].active .audio-coach-score {
  min-height: auto !important;
  padding: 12px !important;
}

html body[data-active-panel="audio"] .audio-coach-score p,
html body .panel[data-panel="audio"].active .audio-coach-score p,
html body[data-active-panel="audio"] .audio-coach-card li,
html body .panel[data-panel="audio"].active .audio-coach-card li {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body[data-active-panel="audio"] .audio-action-bar,
html body .panel[data-panel="audio"].active .audio-action-bar {
  z-index: 3 !important;
  grid-template-columns: 84px minmax(340px, 1fr) minmax(560px, 1.12fr) !important;
  padding-right: 18px !important;
  overflow: hidden !important;
}
/* Workspace stability guard v260 final: this block must remain at file end. */
html body:not([data-active-panel="landing"]) .topbar {
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 220px) minmax(320px, 640px) minmax(160px, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  overflow: visible !important;
}

html body:not([data-active-panel="landing"]) .topbar h1,
html body:not([data-active-panel="landing"]) .topbar h2,
html body:not([data-active-panel="landing"]) .topbar p,
html body:not([data-active-panel="landing"]) .topbar span,
html body:not([data-active-panel="landing"]) .topbar strong,
html body:not([data-active-panel="landing"]) .sidebar,
html body:not([data-active-panel="landing"]) .menu,
html body:not([data-active-panel="landing"]) .menu-item,
html body:not([data-active-panel="landing"]) .sidebar-section,
html body:not([data-active-panel="landing"]) .sidebar-account-card,
html body:not([data-active-panel="landing"]) .sidebar-account-card * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
}

html body:not([data-active-panel="landing"]) .topbar h1,
html body:not([data-active-panel="landing"]) .topbar h2 {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

html body:not([data-active-panel="landing"]) .topbar-search {
  min-width: 0 !important;
  width: 100% !important;
  justify-self: center !important;
}

html body:not([data-active-panel="landing"]) .topbar-search input {
  width: 100% !important;
  min-height: 42px !important;
  line-height: 1.2 !important;
}

html body:not([data-active-panel="landing"]) .topbar-user-trigger {
  justify-self: end !important;
  min-width: 104px !important;
  max-width: 168px !important;
  min-height: 42px !important;
  overflow: hidden !important;
}

html body:not([data-active-panel="landing"]) .topbar-user-trigger strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionDock,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionMini,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionMiniAvatar,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionMiniAvatarStage,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionMiniCharacter,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionMiniBubble,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionPanel,
html body:is([data-active-panel="interview"], [data-active-panel="audio"], [data-active-panel="debug-lab"], [data-active-panel="waveform"]) #companionAmbientStage,
html body.companion-workspace-hidden #companionDock,
html body.companion-workspace-hidden #companionMini,
html body.companion-workspace-hidden #companionMiniAvatar,
html body.companion-workspace-hidden #companionMiniAvatarStage,
html body.companion-workspace-hidden #companionMiniCharacter,
html body.companion-workspace-hidden #companionMiniBubble,
html body.companion-workspace-hidden #companionPanel,
html body.companion-workspace-hidden #companionAmbientStage {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-hero,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 18px 24px !important;
  min-height: 136px !important;
  padding: 22px 28px !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-title,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title {
  flex: 1 1 640px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
  min-width: 0 !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-title h2,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title h2 {
  flex: 1 1 420px !important;
  min-width: min(420px, 100%) !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-title > p:last-child,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title > p:last-child {
  flex: 1 0 100% !important;
  max-width: 980px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-status,
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-status {
  flex: 0 1 680px !important;
  width: auto !important;
  min-width: min(100%, 520px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html body[data-active-panel="waveform"] .waveform-investigation-status > div:not(.waveform-progress-ring):not(.waveform-hero-actions),
html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-status > div:not(.waveform-progress-ring):not(.waveform-hero-actions) {
  flex: 1 1 128px !important;
  min-width: 128px !important;
  max-width: 180px !important;
}

html body[data-active-panel="waveform"] .waveform-scope-card-main,
html body:has(.panel[data-panel="waveform"].active) .waveform-scope-card-main {
  min-height: 430px !important;
}

html body[data-active-panel="waveform"] .waveform-scope-svg,
html body:has(.panel[data-panel="waveform"].active) .waveform-scope-svg {
  width: 100% !important;
  min-height: 420px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item {
  min-height: 72px !important;
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item *,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

html body[data-active-panel="audio"] .audio-timeline-copy,
html body .panel[data-panel="audio"].active .audio-timeline-copy {
  min-width: 0 !important;
}

html body[data-active-panel="audio"] .audio-timeline-copy strong,
html body .panel[data-panel="audio"].active .audio-timeline-copy strong,
html body[data-active-panel="audio"] .audio-timeline-copy em,
html body .panel[data-panel="audio"].active .audio-timeline-copy em {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.45 !important;
}

@media (max-width: 1280px) {
  html body:not([data-active-panel="landing"]) .topbar {
    grid-template-columns: minmax(120px, 180px) minmax(260px, 1fr) auto !important;
  }

  html body[data-active-panel="waveform"] .waveform-investigation-status,
  html body:has(.panel[data-panel="waveform"].active) .waveform-investigation-status {
    justify-content: flex-start !important;
  }
}

/* Audio review cabin stability v261 EOF lock: final rule wins over historical audio locks. */
html body[data-active-panel="audio"] .audio-review-cabin > .audio-workbench-metrics,
html body[data-active-panel="audio"] .audio-review-cabin > .feedback-box.full,
html body[data-active-panel="audio"] .audio-review-cabin > .pipeline-grid.full,
html body[data-active-panel="audio"] .audio-review-cabin > .stack-list,
html body .panel[data-panel="audio"].active .audio-review-cabin > .audio-workbench-metrics,
html body .panel[data-panel="audio"].active .audio-review-cabin > .feedback-box.full,
html body .panel[data-panel="audio"].active .audio-review-cabin > .pipeline-grid.full,
html body .panel[data-panel="audio"].active .audio-review-cabin > .stack-list {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="audio"] .audio-cabin-workspace,
html body .panel[data-panel="audio"].active .audio-cabin-workspace {
  grid-template-columns: clamp(208px, 20vw, 260px) minmax(430px, 1fr) clamp(276px, 24vw, 320px) !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-current-question,
html body .panel[data-panel="audio"].active .audio-current-question {
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto) !important;
}

html body[data-active-panel="audio"] .audio-main-scroll,
html body .panel[data-panel="audio"].active .audio-main-scroll {
  min-width: 0 !important;
  padding: 16px !important;
}

html body[data-active-panel="audio"] .audio-current-question h1,
html body .panel[data-panel="audio"].active .audio-current-question h1,
html body[data-active-panel="audio"] .audio-speech-card p,
html body .panel[data-panel="audio"].active .audio-speech-card p,
html body[data-active-panel="audio"] .audio-coach-card li,
html body .panel[data-panel="audio"].active .audio-coach-card li {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item {
  grid-template-columns: 54px minmax(0, 1fr) 48px !important;
  gap: 4px 8px !important;
}

html body[data-active-panel="audio"] .audio-question-meta,
html body .panel[data-panel="audio"].active .audio-question-meta {
  min-width: 112px !important;
  justify-self: end !important;
}

@media (max-width: 1180px) {
  html body[data-active-panel="audio"] .audio-cabin-workspace,
  html body .panel[data-panel="audio"].active .audio-cabin-workspace {
    grid-template-columns: 198px minmax(390px, 1fr) 268px !important;
  }

  html body[data-active-panel="audio"] .audio-question-meta,
  html body .panel[data-panel="audio"].active .audio-question-meta {
    display: none !important;
  }

  html body[data-active-panel="audio"] .audio-current-question,
  html body .panel[data-panel="audio"].active .audio-current-question {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Audio timeline EOF lock: keep time, title and duration in separate readable columns. */
html body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-time,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item > .audio-timeline-time {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
  width: auto !important;
  min-width: 0 !important;
  justify-self: start !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item > .audio-timeline-copy {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  align-content: center !important;
  gap: 2px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy strong,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item > .audio-timeline-copy strong,
html body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy em,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item > .audio-timeline-copy em {
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item > small,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item > small {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 3 !important;
  justify-self: end !important;
  align-self: center !important;
}

/* Audio timeline compact columns v261: reserve readable width for the title. */
html body[data-active-panel="audio"] .audio-dialogue-timeline,
html body .panel[data-panel="audio"].active .audio-dialogue-timeline {
  padding-left: 8px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item {
  padding: 10px 8px 10px 30px !important;
  grid-template-columns: 42px minmax(56px, 1fr) 36px !important;
  gap: 4px 6px !important;
}

html body[data-active-panel="audio"] .audio-cabin-timeline-item small,
html body .panel[data-panel="audio"].active .audio-cabin-timeline-item small {
  font-size: 11px !important;
}

/* Sidebar collapse restore v263: keep the upper-left rail toggle visible on every workspace. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell .sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar .brand {
    position: relative !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .sidebar .sidebar-toggle {
    display: inline-grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 80 !important;
    width: 30px !important;
    height: 30px !important;
    place-items: center !important;
    border: 1px solid rgba(226, 232, 240, 0.14) !important;
    border-radius: 10px !important;
    color: rgba(226, 232, 240, 0.88) !important;
    background: rgba(15, 23, 42, 0.42) !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18) !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar .sidebar-toggle:hover,
  html:not(.react-student-embedded) body .shell .sidebar .sidebar-toggle:focus-visible {
    color: #fff !important;
    background: rgba(124, 77, 255, 0.34) !important;
    border-color: rgba(167, 139, 250, 0.5) !important;
    outline: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded {
    grid-template-columns: 236px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded {
    grid-template-columns: 208px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 18px 10px 14px !important;
    overflow-x: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .brand {
    height: 92px !important;
    min-height: 92px !important;
    margin: 0 0 8px !important;
    padding: 38px 0 0 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .brand-head--main {
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-icon-logo,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .brand-icon-logo {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .brand-subtitle-text {
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .menu,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .menu {
    align-items: center !important;
    gap: 10px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .menu-item,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .menu-item,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar-bottom-link {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: 48px !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .menu-item::before {
    position: static !important;
    transform: none !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar-section {
    width: 48px !important;
    height: 0 !important;
    margin: 4px auto 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    opacity: 0 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-collapsed .sidebar-account-card {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) scale(0.94) !important;
  }
}

/* Sidebar stable reset v271: button-driven collapse only; no checkbox/hover layout side effects. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  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,
  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,
  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,
  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 .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    padding: 18px 16px 14px !important;
    overflow-x: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded .sidebar {
    width: 208px !important;
    min-width: 208px !important;
    max-width: 208px !important;
    padding: 22px 14px 16px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 18px 10px 14px !important;
    overflow-x: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand {
    position: relative !important;
    height: auto !important;
    min-height: 92px !important;
    margin: 0 0 12px !important;
    padding: 0 8px 0 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-head--main {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-icon-logo {
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-main-logo {
    display: block !important;
    width: 130px !important;
    max-width: 130px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded .brand-main-logo {
    width: 118px !important;
    max-width: 118px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-subtitle-text {
    display: block !important;
    width: 100% !important;
    margin-top: 8px !important;
    color: rgba(226, 232, 240, 0.82) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .sidebar .sidebar-toggle {
    display: inline-grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 7px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 120 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(226, 232, 240, 0.16) !important;
    border-radius: 10px !important;
    color: rgba(226, 232, 240, 0.86) !important;
    background: rgba(15, 23, 42, 0.45) !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.2) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
    cursor: pointer !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand {
    height: 92px !important;
    min-height: 92px !important;
    margin: 0 0 8px !important;
    padding: 38px 0 0 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-head--main {
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-icon-logo {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-subtitle-text {
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar-toggle {
    top: 72px !important;
    left: 21px !important;
    right: auto !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu {
    display: grid !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 4px !important;
    overflow: hidden !important;
    padding-bottom: 10px !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-section {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 12px 0 4px !important;
    padding: 0 14px !important;
    color: rgba(203, 213, 225, 0.58) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.12em !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .menu-item,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-bottom-link {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 14px 0 46px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: rgba(226, 232, 240, 0.84) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item.active,
  html:not(.react-student-embedded) body .sidebar .menu-item:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #4b8dff 0%, #7c4dff 62%, #a334ff 100%) !important;
    box-shadow: 0 12px 28px rgba(124, 77, 255, 0.28) !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link::before {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: translateY(-50%) !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item.active::before {
    background: rgba(255, 255, 255, 0.14) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu {
    align-items: center !important;
    gap: 10px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-section {
    width: 48px !important;
    height: 0 !important;
    margin: 4px auto 0 !important;
    padding: 0 !important;
    color: transparent !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -999px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link::before {
    position: static !important;
    transform: none !important;
    text-indent: 0 !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-bottom-zone {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: auto !important;
    display: grid !important;
    gap: 7px !important;
    z-index: auto !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-zone {
    align-items: center !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-card {
    display: none !important;
  }
}

/* Sidebar compact fit v272: keep every nav entry readable without bottom-zone overlap. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand {
    min-height: 80px !important;
    height: 80px !important;
    margin: 0 0 10px !important;
    padding: 0 6px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded .brand-head--main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-auto-flow: row !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 7px !important;
    width: 100% !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded .brand-main-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: 126px !important;
    max-width: 126px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded .brand-main-logo {
    width: 116px !important;
    max-width: 116px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded .brand-subtitle-text {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 170px !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .menu {
    flex: 0 0 auto !important;
    gap: 4px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-section {
    margin: 9px 0 3px !important;
    padding: 0 14px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .menu-item {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding-left: 46px !important;
    font-size: 14px !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-bottom-zone {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    gap: 6px !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-bottom-link {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-account-card {
    margin: 0 !important;
    padding: 8px 0 0 !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .sidebar .sidebar-account-button {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    border-radius: 14px !important;
  }
}

/* Sidebar hover lock v275: mouse movement must never change sidebar structure. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell .sidebar,
  html:not(.react-student-embedded) body .shell .sidebar * {
    transition-property: background-color, border-color, color, box-shadow, opacity !important;
  }

  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;
    padding: 18px 16px 14px !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;
    padding: 22px 14px 16px !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;
    padding: 18px 10px 14px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand {
    min-height: 80px !important;
    height: 80px !important;
    margin: 0 0 10px !important;
    padding: 0 6px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-head--main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-auto-flow: row !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 7px !important;
    width: 100% !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-icon-logo {
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-main-logo {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: 126px !important;
    max-width: 126px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded:has(> .sidebar:hover) .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-main-logo {
    width: 116px !important;
    max-width: 116px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-subtitle-text {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 170px !important;
    margin: 0 auto !important;
    color: rgba(226, 232, 240, 0.82) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu {
    flex: 0 0 auto !important;
    display: grid !important;
    gap: 4px !important;
    align-items: stretch !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-section {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 9px 0 3px !important;
    padding: 0 14px !important;
    color: rgba(203, 213, 225, 0.58) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 14px 0 46px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-zone {
    position: static !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    display: grid !important;
    gap: 6px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-card {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .brand,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .brand {
    height: 92px !important;
    min-height: 92px !important;
    margin: 0 0 8px !important;
    padding: 38px 0 0 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .brand-head--main {
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .brand-icon-logo {
    display: block !important;
    width: 42px !important;
    height: 42px !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 {
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -999px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-account-card {
    display: none !important;
  }
}

/* Sidebar final visual lock v277.1: keep the client rail consistent on every page. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  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),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  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] .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar,
  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,
  html:not(.react-student-embedded) body[data-active-panel] .shell .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 18px 16px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 82% 10%, rgba(124, 77, 255, 0.22), transparent 28%),
      radial-gradient(circle at 12% 20%, rgba(91, 140, 255, 0.14), transparent 30%),
      linear-gradient(180deg, #07142b 0%, #071225 52%, #061021 100%) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.12) !important;
    box-shadow: 18px 0 38px rgba(15, 23, 42, 0.16) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar,
  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] .shell.sidebar-collapsed .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    padding: 18px 12px 14px !important;
  }

  html:not(.react-student-embedded) body .shell .sidebar,
  html:not(.react-student-embedded) body .shell .sidebar * {
    transition-property: background-color, border-color, color, box-shadow, opacity !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .brand {
    position: relative !important;
    width: 100% !important;
    height: 106px !important;
    min-height: 106px !important;
    margin: 0 0 14px !important;
    padding: 2px 38px 0 2px !important;
    display: grid !important;
    align-items: start !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand-head,
  html:not(.react-student-embedded) body .sidebar .brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .brand-head,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .brand-head--main {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    justify-items: start !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand-icon-logo,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .brand-icon-logo {
    display: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .brand-main-logo {
    display: block !important;
    width: 148px !important;
    max-width: 148px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: none !important;
    filter: saturate(1.08) contrast(1.08) drop-shadow(0 10px 20px rgba(2, 6, 23, 0.28)) !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .brand-subtitle-text {
    display: block !important;
    width: 178px !important;
    max-width: 178px !important;
    margin: 0 !important;
    color: rgba(226, 232, 240, 0.82) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .sidebar-toggle {
    display: inline-grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 10px !important;
    color: rgba(226, 232, 240, 0.86) !important;
    background: rgba(15, 23, 42, 0.58) !important;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.2) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .brand,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .brand,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .brand {
    height: 98px !important;
    min-height: 98px !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
    display: grid !important;
    place-items: start center !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-icon-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .brand-icon-logo {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    margin-top: 2px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .brand-subtitle-text {
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar-toggle {
    top: 56px !important;
    left: 10px !important;
    right: auto !important;
    width: 34px !important;
    height: 30px !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .menu {
    display: grid !important;
    gap: 5px !important;
    align-items: start !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .sidebar-section {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 10px 0 5px !important;
    padding: 0 12px !important;
    color: rgba(148, 163, 184, 0.76) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .sidebar-bottom-link {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 13px 0 44px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: rgba(226, 232, 240, 0.86) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item.active,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .menu-item.active {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(135deg, #4b8dff 0%, #7c4dff 62%, #a334ff 100%) !important;
    box-shadow: 0 12px 26px rgba(124, 77, 255, 0.28) !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .menu-item:hover {
    color: #fff !important;
    background: rgba(148, 163, 184, 0.1) !important;
    box-shadow: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item.active:hover,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .menu-item.active:hover {
    background: linear-gradient(135deg, #4b8dff 0%, #7c4dff 62%, #a334ff 100%) !important;
    box-shadow: 0 12px 26px rgba(124, 77, 255, 0.28) !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .sidebar-bottom-link::before {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    color: currentColor !important;
    background: rgba(255, 255, 255, 0.06) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-indent: 0 !important;
    transform: translateY(-50%) !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="landing"]::before { content: "⌂" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="interview"]::before { content: "◉" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="audio"]::before { content: "▣" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="debug-lab"]::before { content: "⌘" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="waveform"]::before { content: "⌁" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="question-bank"]::before { content: "□" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="reports"]::before { content: "▤" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="resume"]::before { content: "◇" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="message-center"]::before { content: "◦" !important; }
  html:not(.react-student-embedded) body .sidebar .menu-item[data-view="settings"]::before { content: "⚙" !important; }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu {
    align-items: center !important;
    gap: 9px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-section {
    width: 48px !important;
    height: 0 !important;
    margin: 3px auto 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-bottom-link {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -999px !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-bottom-link::before {
    position: static !important;
    transform: none !important;
    text-indent: 0 !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .sidebar-bottom-zone {
    position: static !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    display: grid !important;
    gap: 6px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .sidebar-account-card {
    display: block !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .sidebar-account-button {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-radius: 15px !important;
    color: #f8fafc !important;
    background: rgba(15, 23, 42, 0.44) !important;
    box-shadow: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .sidebar-account-avatar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.38), 0 10px 22px rgba(2, 6, 23, 0.22) !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .sidebar-account-copy {
    min-width: 0 !important;
    display: block !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-copy strong,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar .sidebar-account-copy strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #f8fafc !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar-account-card {
    display: none !important;
  }
}

/* Sidebar specificity lock v277.2: override older landing hover selectors. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand {
    height: 106px !important;
    min-height: 106px !important;
    margin: 0 0 14px !important;
    padding: 2px 38px 0 2px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-main-logo {
    display: block !important;
    width: 144px !important;
    max-width: 144px !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-toggle {
    display: inline-grid !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-card {
    margin: 5px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
}

/* Sidebar menu hover lock v277.3: hover/focus never changes menu geometry. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 13px 0 44px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before {
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    transform: translateY(-50%) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-section {
    height: auto !important;
    margin: 10px 0 5px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-button {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 15px !important;
  }
}

/* Sidebar hard hover kill v280: hover/focus must never expand, shrink, or reflow the rail. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) .shell,
  html:not(.react-student-embedded) body .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) body .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) body .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),
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  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;
    transition: none !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),
  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  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) {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) .shell .sidebar,
  html:not(.react-student-embedded) .shell:has(> .sidebar:hover) .sidebar,
  html:not(.react-student-embedded) .shell:has(> .sidebar:focus-within) .sidebar,
  html:not(.react-student-embedded) body .shell .sidebar,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:focus-within) .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    padding: 20px 18px 16px !important;
    overflow: hidden !important;
    transition: none !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,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar,
  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 {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    padding: 18px 12px 14px !important;
    overflow: hidden !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) .shell .sidebar *,
  html:not(.react-student-embedded) body .shell .sidebar * {
    transition: none !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-expanded .brand,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:hover) .brand,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand {
    height: 106px !important;
    min-height: 106px !important;
    padding: 2px 38px 0 2px !important;
    margin: 0 0 14px !important;
    display: grid !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-expanded .brand-head--main,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:hover) .brand-head--main,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-head--main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-expanded .brand-icon-logo,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:hover) .brand-icon-logo,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-icon-logo {
    display: none !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-expanded .brand-main-logo,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:hover) .brand-main-logo,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-main-logo {
    display: block !important;
    width: 144px !important;
    max-width: 144px !important;
    height: auto !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-expanded .brand-subtitle-text,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:hover) .brand-subtitle-text,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .brand-subtitle-text {
    display: block !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-expanded .sidebar-section,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar-section,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar-section {
    width: 100% !important;
    height: auto !important;
    margin: 10px 0 5px !important;
    padding: 0 12px !important;
    color: rgba(148, 163, 184, 0.76) !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-expanded .menu-item,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:hover) .menu-item,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:focus-within) .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .menu-item {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin-inline: 0 !important;
    padding: 0 13px 0 44px !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-expanded .menu-item::before,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:hover) .menu-item::before,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:focus-within) .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .menu-item::before {
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  html:not(.react-student-embedded) .shell.sidebar-expanded .sidebar-account-card,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar-account-card,
  html:not(.react-student-embedded) .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar-account-card {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* Final cascade lock v281: keep experience optimization last in the file. */
html body[data-active-panel="landing"] .landing-home-grid,
html body:has(.landing-workspace.active) .landing-home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 22px !important;
  align-items: start !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .section-card,
html body:has(.landing-workspace.active) .landing-home-grid > .section-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body[data-active-panel="landing"] .landing-home-grid > .landing-xiaowen-briefing,
html body[data-active-panel="landing"] .landing-home-grid > .landing-route-card,
html body[data-active-panel="landing"] .landing-home-grid > #landingAchievementCenter,
html body[data-active-panel="landing"] .landing-home-grid > .landing-hardware-focus,
html body[data-active-panel="landing"] .landing-home-grid > .landing-hardware-questions,
html body[data-active-panel="landing"] .landing-home-grid > .landing-coach-card-bottom,
html body[data-active-panel="landing"] .landing-home-grid > .landing-special-training,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-xiaowen-briefing,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-route-card,
html body:has(.landing-workspace.active) .landing-home-grid > #landingAchievementCenter,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-hardware-focus,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-hardware-questions,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-coach-card-bottom,
html body:has(.landing-workspace.active) .landing-home-grid > .landing-special-training {
  display: none !important;
}

html body[data-active-panel="landing"] .landing-welcome-panel,
html body:has(.landing-workspace.active) .landing-welcome-panel {
  min-height: 170px !important;
  height: auto !important;
  padding: 24px !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-greeting-line,
html body:has(.landing-workspace.active) .landing-greeting-line {
  margin: 0 0 14px !important;
  line-height: 1.15 !important;
}

html body[data-active-panel="landing"] .landing-training-statusbar,
html body:has(.landing-workspace.active) .landing-training-statusbar {
  display: grid !important;
  grid-template-columns: minmax(300px, 1.45fr) repeat(3, minmax(190px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-status,
html body:has(.landing-workspace.active) .landing-training-status {
  min-height: 96px !important;
  height: auto !important;
  padding: 14px 18px !important;
  overflow: visible !important;
  align-content: center !important;
  gap: 4px !important;
}

html body[data-active-panel="landing"] .landing-training-status span,
html body[data-active-panel="landing"] .landing-training-status em,
html body[data-active-panel="landing"] .landing-training-status b,
html body:has(.landing-workspace.active) .landing-training-status span,
html body:has(.landing-workspace.active) .landing-training-status em,
html body:has(.landing-workspace.active) .landing-training-status b {
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-status strong,
html body:has(.landing-workspace.active) .landing-training-status strong {
  line-height: 1.02 !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-training-status-primary strong,
html body:has(.landing-workspace.active) .landing-training-status-primary strong {
  font-size: 46px !important;
}

html body[data-active-panel="landing"] .landing-focus-decision,
html body:has(.landing-workspace.active) .landing-focus-decision {
  min-height: 250px !important;
  padding: 24px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(124, 77, 255, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96)) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08) !important;
  overflow: visible !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-head,
html body:has(.landing-workspace.active) .landing-focus-decision-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-head span,
html body:has(.landing-workspace.active) .landing-focus-decision-head span {
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-head strong,
html body:has(.landing-workspace.active) .landing-focus-decision-head strong {
  color: #7c4dff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-grid,
html body:has(.landing-workspace.active) .landing-focus-decision-grid {
  display: grid !important;
  grid-template-columns: 1.25fr 1fr 1.25fr !important;
  gap: 18px !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card,
html body:has(.landing-workspace.active) .landing-focus-decision-card {
  min-height: 154px !important;
  padding: 20px !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  text-align: left !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #0f172a !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card span,
html body:has(.landing-workspace.active) .landing-focus-decision-card span {
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card strong,
html body:has(.landing-workspace.active) .landing-focus-decision-card strong {
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card-primary strong,
html body:has(.landing-workspace.active) .landing-focus-decision-card-primary strong {
  color: #6d4dff !important;
  font-size: 52px !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card small,
html body:has(.landing-workspace.active) .landing-focus-decision-card small {
  font-size: 18px !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card em,
html body[data-active-panel="landing"] .landing-focus-decision-card b,
html body:has(.landing-workspace.active) .landing-focus-decision-card em,
html body:has(.landing-workspace.active) .landing-focus-decision-card b {
  font-style: normal !important;
  line-height: 1.25 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card em,
html body:has(.landing-workspace.active) .landing-focus-decision-card em {
  color: #5b8cff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-card b,
html body:has(.landing-workspace.active) .landing-focus-decision-card b {
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-action,
html body:has(.landing-workspace.active) .landing-focus-decision-action {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.96), rgba(91, 140, 255, 0.96)) !important;
}

html body[data-active-panel="landing"] .landing-focus-decision-action span,
html body[data-active-panel="landing"] .landing-focus-decision-action strong,
html body[data-active-panel="landing"] .landing-focus-decision-action em,
html body[data-active-panel="landing"] .landing-focus-decision-action b,
html body:has(.landing-workspace.active) .landing-focus-decision-action span,
html body:has(.landing-workspace.active) .landing-focus-decision-action strong,
html body:has(.landing-workspace.active) .landing-focus-decision-action em,
html body:has(.landing-workspace.active) .landing-focus-decision-action b {
  color: #fff !important;
}

html body[data-active-panel="landing"] .landing-primary-recommendation,
html body:has(.landing-workspace.active) .landing-primary-recommendation {
  min-height: 420px !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .landing-weekly-growth,
html body:has(.landing-workspace.active) .landing-weekly-growth {
  min-height: 220px !important;
  height: auto !important;
}

@media (max-width: 1260px) {
  html body[data-active-panel="landing"] .landing-training-statusbar,
  html body:has(.landing-workspace.active) .landing-training-statusbar,
  html body[data-active-panel="landing"] .landing-focus-decision-grid,
  html body:has(.landing-workspace.active) .landing-focus-decision-grid {
    grid-template-columns: 1fr !important;
  }
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
  grid-template-rows: 126px 316px minmax(216px, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card {
  grid-template-rows: 28px 56px minmax(0, 34px) !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card {
  grid-template-rows: 30px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
  grid-template-rows: repeat(7, 30px) !important;
  gap: 6px !important;
  align-content: start !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item b {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  font-size: 15px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  grid-template-rows: 30px minmax(0, 1fr) 38px 18px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  overflow-y: auto !important;
  max-height: none !important;
}

html body[data-active-panel="audio"] .audio-review-standard-compare {
  display: grid !important;
  gap: 14px !important;
  padding: 16px !important;
  border: 1px solid rgba(124, 77, 255, 0.16) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.95)) !important;
}

html body[data-active-panel="audio"] .audio-compare-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-compare-head span {
  color: #6d4dff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-compare-head strong {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-compare-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr 1fr !important;
  gap: 12px !important;
}

html body[data-active-panel="audio"] .audio-compare-grid section {
  min-height: 112px !important;
  padding: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 16px !important;
  background: #fff !important;
}

html body[data-active-panel="audio"] .audio-compare-grid small {
  display: block !important;
  margin-bottom: 8px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html body[data-active-panel="audio"] .audio-compare-grid p {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.65 !important;
}

html body[data-active-panel="audio"] .audio-compare-grid b {
  color: #6d4dff !important;
}

html body[data-active-panel="audio"] .audio-compare-missing {
  border-color: rgba(239, 68, 68, 0.22) !important;
  background: rgba(254, 242, 242, 0.84) !important;
}

html body[data-active-panel="audio"] .audio-compare-missing b {
  color: #ef4444 !important;
}

/* Absolute final homepage fold lock v283. */
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-xiaowen-briefing,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-route-card,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-ai-task-center,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-hardware-focus,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-hardware-questions,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-training-heatmap,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-coach-card-bottom,
html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-special-training {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

html body[data-active-panel="landing"] .shell .main .landing-workspace.active .landing-home-grid > article.section-card.landing-welcome-panel {
  min-height: 170px !important;
  height: auto !important;
}

/* Absolute brand subtitle consistency v283: must stay last. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head--main {
  width: 100% !important;
  min-height: 118px !important;
  height: 118px !important;
  padding: 14px 12px 10px !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 6px !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-main-logo {
  display: block !important;
  width: 144px !important;
  max-width: 144px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-subtitle-text {
  display: block !important;
  width: 180px !important;
  max-width: 180px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: rgba(226, 232, 240, 0.84) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text br,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text br {
  display: block !important;
}

/* V5 IA physical EOF override. */
body[data-active-panel="landing"] #landingCustomizeHomeBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 24px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
}

body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid > article.section-card {
  width: 100% !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: stretch !important;
}

body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid > article.section-card.landing-v5-command-center,
body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid > article.section-card.landing-v5-ai-advice,
body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid > article.section-card.landing-v5-training-plan,
body[data-active-panel="landing"] .landing-workspace.active .landing-home-grid > article.section-card.landing-v5-job-match-section {
  min-height: 0 !important;
  height: auto !important;
}


/* source: avatar-upload-final.css */
html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar,
html body[data-active-panel="interview"] .interview-training-avatar-img {
  border-radius: 999px !important;
}

/* Final interview avatar alignment: keep portrait centered inside circular frames. */
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-question-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .audio-thread-block.interviewer > img {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background-color: #e9e4ff !important;
  background-size: 108% 108% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  flex: 0 0 auto !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar-img,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-question-avatar img,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-avatar img,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  transform: none !important;
  margin: 0 !important;
}

/* Sidebar delivery lock v306: stable nav, clean logo, no hover morphing. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
  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),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within,
  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] .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    padding: 18px 18px 16px !important;
    overflow: hidden !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar > .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar > .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand {
    position: relative !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 146px !important;
    min-height: 146px !important;
    max-height: 146px !important;
    margin: 0 0 14px !important;
    padding: 8px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-head.brand-head--main {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    display: grid !important;
    grid-template-rows: 72px auto !important;
    align-items: center !important;
    justify-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-icon-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-icon-logo {
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar img.brand-logo.brand-main-logo {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-subtitle-text {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    margin: -2px auto 0 !important;
    color: rgba(226, 232, 240, 0.88) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-wrap: balance !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle {
    top: 6px !important;
    right: 0 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    color: rgba(226, 232, 240, 0.92) !important;
    background: rgba(15, 23, 42, 0.28) !important;
    border: 1px solid rgba(226, 232, 240, 0.14) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu {
    width: 200px !important;
    gap: 6px !important;
    overflow: visible !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section {
    width: 200px !important;
    height: 28px !important;
    margin: 10px 0 2px !important;
    padding: 8px 0 4px !important;
    color: rgba(148, 163, 184, 0.86) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link {
    position: relative !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 14px !important;
    color: rgba(226, 232, 240, 0.82) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before {
    content: "" !important;
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    display: block !important;
    background: currentColor !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 0.82 !important;
    transform: none !important;
    -webkit-mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
    mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.is-active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.active,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.is-active,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active {
    color: #fff !important;
    background: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(124, 77, 255, 0.28) !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.active::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.is-active::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active::before {
    opacity: 1 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone {
    width: 200px !important;
    gap: 8px !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    inline-size: 52px !important;
    block-size: 52px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 52px !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 999px !important;
    background-color: #ddd8ff !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-copy {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
}

/* Sidebar terminal override v307: this must stay at EOF. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
  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),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.is-active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.active,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.is-active,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active {
    color: #fff !important;
    background: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(124, 77, 255, 0.28) !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    background: currentColor !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 0.86 !important;
    transform: none !important;
    -webkit-mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
    mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    inline-size: 52px !important;
    block-size: 52px !important;
    aspect-ratio: 1 / 1 !important;
    background-size: cover !important;
    background-position: center center !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* Delivery polish v305: contextual training entries sync route state; Live2D runtime gets Pixi compatibility. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-statusbar,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-statusbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(304px, 0.98fr) minmax(402px, 1.32fr) minmax(268px, 0.82fr) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics small,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics small {
    min-height: 14px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-bar,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-action-bar {
    height: auto !important;
    min-height: 120px !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

html body .topbar-user-avatar::after,
html body .sidebar-account-avatar::after,
html body .account-preview-avatar::after,
html body[data-active-panel="interview"] .interview-training-avatar::after {
  content: "" !important;
  display: none !important;
}

html body .sidebar-account-avatar {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 10px 22px rgba(91, 140, 255, 0.2) !important;
}

html body .topbar-user-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
  width: 46px !important;
  height: 46px !important;
  border: 2px solid rgba(91, 140, 255, 0.2) !important;
  box-shadow: 0 10px 24px rgba(91, 140, 255, 0.16) !important;
}

html body .account-modal-preview {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 16px !important;
}

html body .account-preview-avatar {
  width: 76px !important;
  height: 76px !important;
  border: 3px solid rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 14px 32px rgba(91, 140, 255, 0.18),
    0 0 0 1px rgba(124, 77, 255, 0.14) !important;
}

html body .account-avatar-upload-field {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body .account-avatar-upload-field > span {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body .account-avatar-upload-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

html body .account-avatar-upload-actions .ghost-btn {
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

html body .account-avatar-upload-actions .ghost-btn[hidden] {
  display: none !important;
}

/* Avatar readability v220: larger generated portraits without changing navigation structure. */
html body .sidebar-account-button {
  grid-template-columns: 66px minmax(0, 1fr) auto !important;
  min-height: 88px !important;
  gap: 14px !important;
  padding: 14px 16px !important;
}

html body .sidebar-account-avatar {
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  border: 3px solid rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.28),
    0 0 0 2px rgba(91, 140, 255, 0.26) !important;
}

html body .topbar-user-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 12px 28px rgba(91, 140, 255, 0.2) !important;
}

html body[data-active-panel="interview"] .interview-training-statusbar {
  min-height: 92px !important;
  height: 92px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html body[data-active-panel="interview"] .interview-training-title {
  grid-template-columns: 76px minmax(0, 1fr) auto !important;
  gap: 16px !important;
}

html body[data-active-panel="interview"] .interview-training-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 999px !important;
  border: 4px solid rgba(255, 255, 255, 0.84) !important;
  box-shadow:
    0 16px 34px rgba(91, 140, 255, 0.24),
    0 0 0 3px rgba(91, 140, 255, 0.24) !important;
}

html body[data-active-panel="interview"] .interview-training-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

html body[data-active-panel="interview"] .interview-question-card-head {
  min-height: 68px !important;
}

html body[data-active-panel="interview"] .interview-question-card-head span {
  gap: 14px !important;
}

html body[data-active-panel="interview"] .interview-question-card-head span::before {
  width: 64px !important;
  height: 64px !important;
  margin-right: 0 !important;
  flex: 0 0 64px !important;
  border: 3px solid rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    0 14px 30px rgba(91, 140, 255, 0.2),
    0 0 0 2px rgba(124, 77, 255, 0.16) !important;
}

/* Direct avatar upload v222: Feishu-style, click the avatar itself to replace the photo. */
html body .account-avatar-upload-field {
  display: none !important;
}

html body .account-avatar-direct-trigger,
html body[data-active-panel="interview"] .interview-training-avatar.account-avatar-direct-trigger {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none !important;
}

html body .account-avatar-direct-trigger::before,
html body[data-active-panel="interview"] .interview-training-avatar.account-avatar-direct-trigger::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: block !important;
  background: rgba(15, 23, 42, 0.34) !important;
  opacity: 0 !important;
  transition: opacity 0.16s ease !important;
  pointer-events: none !important;
}

html body .account-avatar-direct-trigger::after,
html body[data-active-panel="interview"] .interview-training-avatar.account-avatar-direct-trigger::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 7 !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 9px !important;
  background:
    rgba(255, 255, 255, 0.94)
    url("data:image/svg+xml,%3Csvg%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M4.2%206.6H7l1.2-1.7h3.6L13%206.6h2.8c.8%200%201.4.6%201.4%201.4v5.8c0%20.8-.6%201.4-1.4%201.4H4.2c-.8%200-1.4-.6-1.4-1.4V8c0-.8.6-1.4%201.4-1.4Z%27%20stroke%3D%27%230F172A%27%20stroke-width%3D%271.5%27%20stroke-linejoin%3D%27round%27/%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2710.8%27%20r%3D%272.4%27%20stroke%3D%27%230F172A%27%20stroke-width%3D%271.5%27/%3E%3C/svg%3E")
    center / 16px 16px no-repeat !important;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.72) !important;
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.9) !important;
  transition: opacity 0.16s ease, transform 0.16s ease !important;
  pointer-events: none !important;
}

html body .account-avatar-direct-trigger:hover::before,
html body .account-avatar-direct-trigger:focus-visible::before,
html body[data-active-panel="interview"] .interview-training-avatar.account-avatar-direct-trigger:hover::before {
  opacity: 1 !important;
}

html body .account-avatar-direct-trigger:hover::after,
html body .account-avatar-direct-trigger:focus-visible::after,
html body[data-active-panel="interview"] .interview-training-avatar.account-avatar-direct-trigger:hover::after {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

html body .account-preview-avatar.account-avatar-direct-trigger::after {
  width: 30px !important;
  height: 30px !important;
  border-radius: 11px !important;
  background-size: 18px 18px !important;
}

html body .account-preview-avatar.account-avatar-direct-trigger:focus-visible {
  outline: 3px solid rgba(124, 77, 255, 0.28) !important;
  outline-offset: 4px !important;
}

/* Xiaowen single-entry lock: keep only the bottom-right dock, never render the old proactive avatar layer. */
html body #companionAmbientStage,
html body #companionAmbientStage.companion-ambient-stage,
html body #companionAmbientStage.companion-ambient-stage.companion-ambient-moment {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Avatar circle fill v232: crop generated portraits into the whole circle, no white outer ring. */
html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
  border-radius: 999px !important;
  overflow: hidden !important;
  background-color: #ebe7ff !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 124% 124% !important;
  border-color: rgba(124, 77, 255, 0.34) !important;
  box-shadow:
    0 10px 24px rgba(91, 140, 255, 0.18),
    0 0 0 1px rgba(124, 77, 255, 0.16) !important;
}

html body .sidebar-account-avatar {
  border-radius: 999px !important;
  border-width: 1px !important;
  background-size: 128% 128% !important;
}

html body[data-active-panel="interview"] .interview-training-avatar {
  border-width: 1px !important;
  background-size: 126% 126% !important;
}

html body[data-active-panel="interview"] .interview-training-avatar-img {
  position: absolute !important;
  inset: -8% !important;
  z-index: 1 !important;
  width: 116% !important;
  height: 116% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

html body[data-active-panel="interview"] .interview-question-card-head span::before {
  border: 1px solid rgba(124, 77, 255, 0.24) !important;
  background:
    url("./assets/interviewer-avatar.png?v=20260617-copy-polish-v314") center 30% / 116% 116% no-repeat,
    linear-gradient(135deg, rgba(124, 77, 255, 0.14), rgba(91, 140, 255, 0.08)) !important;
  box-shadow:
    0 10px 22px rgba(91, 140, 255, 0.14),
    0 0 0 1px rgba(124, 77, 255, 0.12) !important;
}

/* Sidebar account avatar readability v233: make the bottom profile entry a real user anchor. */
html body .sidebar-account-card {
  padding-top: 12px !important;
}

html body .sidebar-account-button {
  grid-template-columns: 66px minmax(0, 1fr) !important;
  min-height: 82px !important;
  height: 82px !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  align-items: center !important;
  border-radius: 16px !important;
}

html body[data-active-panel="landing"] .shell .sidebar .sidebar-account-button,
html body[data-active-panel="interview"] .shell .sidebar .sidebar-account-button,
html body[data-active-panel="audio"] .shell .sidebar .sidebar-account-button,
html body[data-active-panel="debug-lab"] .shell .sidebar .sidebar-account-button {
  grid-template-columns: 66px minmax(0, 1fr) !important;
  min-height: 82px !important;
  height: 82px !important;
  gap: 10px !important;
  padding: 10px 12px !important;
}

html body .sidebar-account-avatar {
  width: 62px !important;
  height: 62px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background-size: 134% 134% !important;
  background-position: center center !important;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.3),
    0 0 0 3px rgba(91, 140, 255, 0.72),
    0 0 0 5px rgba(255, 255, 255, 0.16) !important;
}

html body .sidebar-account-copy strong {
  font-size: 15px !important;
  line-height: 1.12 !important;
  max-width: 64px !important;
}

html body .sidebar-account-button i {
  display: none !important;
}

/* Voice-reactive waveform v234: driven by microphone analyser while the user is speaking. */
html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive] i,
html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive] i:nth-child(n),
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive] i:nth-child(n) {
  height: var(--voice-wave-height, 16px) !important;
  min-height: 0 !important;
  max-height: none !important;
  transform-origin: center center !important;
  transition:
    height 80ms linear,
    opacity 80ms linear,
    transform 80ms linear !important;
}

html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive="live"] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive="live"] i {
  animation: none !important;
  will-change: height, opacity, transform !important;
}

html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive="idle"] i,
html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive="recorded"] i,
html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive="processing"] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive="idle"] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive="recorded"] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive="processing"] i {
  animation: none !important;
}

html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive="processing"] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive="processing"] i {
  opacity: 0.5 !important;
}

/* Audio review cabin v235: the AI review coach owns this page, so Xiaowen must not cover the panel or action bar. */
html body[data-active-panel="audio"] #companionDock,
html body[data-active-panel="audio"] #companionDock.companion-dock,
html body[data-active-panel="audio"] #companionDock.companion-dock.companion-collapsed,
html body[data-active-panel="audio"] #companionDock.companion-dock.companion-expanded,
html body[data-active-panel="audio"] #companionMini,
html body[data-active-panel="audio"] #companionMiniAvatar,
html body[data-active-panel="audio"] #companionMiniAvatarStage,
html body[data-active-panel="audio"] #companionMiniCharacter,
html body[data-active-panel="audio"] #companionMiniBubble,
html body[data-active-panel="audio"] #companionAmbientStage,
html body[data-active-panel="audio"] #companionAmbientModel,
html body[data-active-panel="audio"] #companionAmbientCharacter,
html body[data-active-panel="audio"] #companionAmbientStage.companion-ambient-stage,
html body[data-active-panel="audio"] #companionAmbientStage.companion-ambient-stage.companion-ambient-moment,
html body[data-active-panel="audio"] .companion-dock,
html body[data-active-panel="audio"] .companion-mini,
html body[data-active-panel="audio"] .companion-avatar-stage,
html body[data-active-panel="audio"] .companion-mini-bubble,
html body[data-active-panel="audio"] .companion-ambient-stage,
html body[data-active-panel="audio"] .character-xiaowen,
html body[data-active-panel="audio"] .character-empty-state.character-xiaowen,
html body[data-active-panel="audio"] .companion-message.character-xiaowen,
html body[data-active-panel="audio"] img[src*="xiaowen"],
html body[data-active-panel="interview"] #companionDock,
html body[data-active-panel="interview"] #companionDock.companion-dock,
html body[data-active-panel="interview"] #companionMini,
html body[data-active-panel="interview"] #companionMiniAvatarStage,
html body[data-active-panel="interview"] #companionMiniCharacter,
html body[data-active-panel="interview"] #companionAmbientStage {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Audio review cabin v245: if the cabin is visible, the page belongs to AI review coach only. */
html body:has(.panel[data-panel="audio"].active) #companionDock,
html body:has(.panel[data-panel="audio"].active) #companionMini,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatar,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatarStage,
html body:has(.panel[data-panel="audio"].active) #companionMiniCharacter,
html body:has(.panel[data-panel="audio"].active) #companionMiniBubble,
html body:has(.panel[data-panel="audio"].active) #companionAmbientStage,
html body:has(.panel[data-panel="audio"].active) #companionAmbientModel,
html body:has(.panel[data-panel="audio"].active) #companionAmbientCharacter,
html body:has(.panel[data-panel="audio"].active) .companion-dock,
html body:has(.panel[data-panel="audio"].active) .companion-mini,
html body:has(.panel[data-panel="audio"].active) .companion-avatar-stage,
html body:has(.panel[data-panel="audio"].active) .companion-mini-bubble,
html body:has(.panel[data-panel="audio"].active) .companion-ambient-stage,
html body:has(.panel[data-panel="audio"].active) .character-xiaowen,
html body:has(.panel[data-panel="audio"].active) .character-empty-state.character-xiaowen,
html body:has(.panel[data-panel="audio"].active) .companion-message.character-xiaowen,
html body:has(.panel[data-panel="audio"].active) img[src*="xiaowen"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-panel="audio"] .audio-coach-panel {
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  gap: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 18px !important;
  scrollbar-gutter: stable !important;
}

html body[data-active-panel="audio"] .audio-report-digest,
html body[data-active-panel="audio"] .audio-dimension-list,
html body[data-active-panel="audio"] .audio-coach-card,
html body[data-active-panel="audio"] .audio-coach-card ul {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html body[data-active-panel="audio"] .audio-coach-score {
  min-height: 104px !important;
  padding: 10px 12px !important;
}

html body[data-active-panel="audio"] .audio-dimension-list {
  gap: 7px !important;
  padding: 0 4px 4px !important;
}

html body[data-active-panel="audio"] .audio-coach-card {
  min-height: auto !important;
  padding: 11px 12px !important;
}

html body[data-active-panel="audio"] .audio-coach-card li {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
}

/* Account avatar no-white-ring v236: remove every white rim and crop default portraits to the circle. */
html body .sidebar-account-avatar,
html body .topbar-user-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background-color: #dcd7ff !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 158% 158% !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.22) !important;
}

html body .sidebar-account-avatar {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.28) !important;
}

html body .sidebar-account-avatar::before,
html body .sidebar-account-avatar::after,
html body .topbar-user-avatar::before,
html body .topbar-user-avatar::after,
html body .account-preview-avatar::before,
html body .account-preview-avatar::after,
html body[data-active-panel="interview"] .interview-training-avatar::before,
html body[data-active-panel="interview"] .interview-training-avatar::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}

html body[data-active-panel="interview"] .interview-training-avatar-img {
  inset: -16% !important;
  width: 132% !important;
  height: 132% !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Interviewer avatar headroom v237: keep the portrait round, but stop the hair from touching the circle. */
html body[data-active-panel="interview"] .interview-question-card-head span::before {
  background:
    url("./assets/interviewer-avatar.png?v=20260617-copy-polish-v314") center 30% / 116% 116% no-repeat,
    linear-gradient(135deg, rgba(124, 77, 255, 0.14), rgba(91, 140, 255, 0.08)) !important;
}

/* Interview coach unclipped v238: the right rail is fixed, but its content must scroll instead of clipping. */
html body[data-active-panel="interview"] #companionDock,
html body[data-active-panel="interview"] #companionAmbientStage,
html body[data-active-panel="interview"] #companionMiniBubble {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body[data-active-panel="interview"] .interview-copilot-card {
  height: calc(100vh - 184px) !important;
  max-height: calc(100vh - 184px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 16px !important;
}

html body[data-active-panel="interview"] .interview-copilot-card .section-head {
  flex: 0 0 auto !important;
  margin-bottom: 10px !important;
}

html body[data-active-panel="interview"] .interview-ai-coach-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 4px 2px 0 !important;
  overscroll-behavior: contain !important;
}

html body[data-active-panel="interview"] .coach-live-score-card,
html body[data-active-panel="interview"] .coach-structure-card,
html body[data-active-panel="interview"] .coach-followup-card {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 12px !important;
  gap: 9px !important;
}

html body[data-active-panel="interview"] .coach-live-score-card > p,
html body[data-active-panel="interview"] .coach-followup-card > p {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

html body[data-active-panel="interview"] .coach-completeness-main {
  display: grid !important;
  grid-template-columns: minmax(76px, auto) minmax(92px, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

html body[data-active-panel="interview"] .coach-completeness-main strong {
  font-size: 34px !important;
  line-height: 1 !important;
}

html body[data-active-panel="interview"] .coach-completeness-track {
  width: 100% !important;
  min-width: 0 !important;
}

html body[data-active-panel="interview"] .coach-structure-list,
html body[data-active-panel="interview"] .coach-followup-list {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  gap: 6px !important;
  overflow: visible !important;
}

html body[data-active-panel="interview"] .coach-structure-item {
  min-height: 32px !important;
  height: auto !important;
  padding: 5px 10px !important;
}

html body[data-active-panel="interview"] .coach-structure-item b {
  min-width: 24px !important;
  min-height: 24px !important;
}

html body[data-active-panel="interview"] .coach-followup-list button {
  height: auto !important;
  min-height: 36px !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  padding: 8px 10px !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-height: 1.38 !important;
}

html body[data-active-panel="interview"] .coach-followup-list button.is-collapsed {
  display: none !important;
}

html body[data-active-panel="interview"] .coach-followup-card.is-expanded .coach-followup-list button {
  display: block !important;
}

html body[data-active-panel="interview"] .coach-followup-toggle {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  margin-top: 2px !important;
}

/* Interview coach rail final v239: override the older high-specificity compact grid rules. */
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card {
  height: calc(100vh - 184px) !important;
  max-height: calc(100vh - 184px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  gap: 6px !important;
  overflow: hidden !important;
  padding: 8px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 4px 4px 0 !important;
  overscroll-behavior: contain !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  contain: none !important;
  overflow: visible !important;
  padding: 12px !important;
  gap: 9px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card > p,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card > p,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card:not(.is-expanded) .coach-followup-list,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  gap: 6px !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list button,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
  height: auto !important;
  min-height: 36px !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list button.is-collapsed,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button:nth-child(n+4) {
  display: none !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card.is-expanded .coach-followup-list button.is-collapsed,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card.is-expanded .coach-followup-list button:nth-child(n+4) {
  display: block !important;
}

/* Interview coach fit v240: keep the default coach state fully readable in one fixed rail. */
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .section-head {
  min-height: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 6px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .section-head .eyebrow {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .section-head h3 {
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.05 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .section-head .ghost-btn {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  gap: 7px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-head,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-panel-title {
  min-height: 22px !important;
  gap: 8px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-completeness-main {
  grid-template-columns: minmax(70px, auto) minmax(82px, 1fr) !important;
  gap: 8px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-completeness-main strong {
  font-size: 32px !important;
  line-height: 0.95 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card > p {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-list {
  gap: 5px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item {
  min-height: 30px !important;
  padding: 4px 9px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item span {
  font-size: 12px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item b {
  min-width: 22px !important;
  min-height: 22px !important;
  font-size: 12px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list {
  gap: 6px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list button {
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list button::before {
  flex: 0 0 auto !important;
  margin-right: 0 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card > p {
  height: auto !important;
  min-height: 14px !important;
  max-height: none !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-toggle {
  min-height: 32px !important;
  height: 32px !important;
  margin-top: 0 !important;
}

/* Interview coach one-screen default v241: score, coverage and three follow-ups fit without clipping. */
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card {
  padding: 8px !important;
  gap: 6px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-head span,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-panel-title strong {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-head em,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-panel-title span {
  min-height: 22px !important;
  padding: 0 8px !important;
  font-size: 10.5px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-completeness-main strong {
  font-size: 30px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-completeness-track {
  height: 8px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card > p {
  display: none !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: minmax(28px, auto) !important;
  height: auto !important;
  gap: 5px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item {
  min-height: 28px !important;
  padding: 3px 7px !important;
  gap: 5px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11.5px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item b {
  min-width: 20px !important;
  min-height: 20px !important;
  font-size: 11px !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card > p {
  display: none !important;
}

html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-toggle {
  min-height: 30px !important;
  height: 30px !important;
}

/* Final avatar geometry lock v285: account portraits must never stretch with sidebar cards. */
html body .sidebar-account-button {
  grid-template-columns: 58px minmax(0, 1fr) 14px !important;
  align-items: center !important;
}

html body .sidebar-account-avatar,
html body .topbar-user-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar,
html body[data-active-panel="interview"] .interview-question-card-head span::before,
html body[data-active-panel="audio"] .audio-review-speaker-avatar {
  display: block !important;
  inline-size: var(--hw-avatar-size, 58px) !important;
  block-size: var(--hw-avatar-size, 58px) !important;
  width: var(--hw-avatar-size, 58px) !important;
  height: var(--hw-avatar-size, 58px) !important;
  min-width: var(--hw-avatar-size, 58px) !important;
  min-height: var(--hw-avatar-size, 58px) !important;
  max-width: var(--hw-avatar-size, 58px) !important;
  max-height: var(--hw-avatar-size, 58px) !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 var(--hw-avatar-size, 58px) !important;
  align-self: center !important;
  justify-self: center !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

html body .sidebar-account-avatar {
  --hw-avatar-size: 58px;
  background-size: 142% 142% !important;
  background-position: center center !important;
}

html body .topbar-user-avatar {
  --hw-avatar-size: 34px;
}

html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
  --hw-avatar-size: 72px;
}

html body[data-active-panel="interview"] .interview-question-card-head span::before,
html body[data-active-panel="audio"] .audio-review-speaker-avatar {
  --hw-avatar-size: 64px;
}

html body .sidebar-account-avatar img,
html body .topbar-user-avatar img,
html body .account-preview-avatar img,
html body[data-active-panel="interview"] .interview-training-avatar-img,
html body[data-active-panel="audio"] .audio-review-speaker-avatar img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

html body .shell.sidebar-collapsed .sidebar-account-avatar {
  --hw-avatar-size: 42px;
}

/* Absolute account avatar shape lock v286: beat older sidebar-specific width rules. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-button {
  height: 84px !important;
  min-height: 84px !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  align-items: center !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-avatar {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  inline-size: 58px !important;
  block-size: 58px !important;
  flex: 0 0 58px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background-size: 142% 142% !important;
  background-position: center center !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-account-button {
  height: 56px !important;
  min-height: 56px !important;
  grid-template-columns: 42px !important;
  justify-content: center !important;
  padding: 7px !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-account-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  inline-size: 42px !important;
  block-size: 42px !important;
  flex: 0 0 42px !important;
  aspect-ratio: 1 / 1 !important;
}

/* Sidebar icon polish v287: replace glyph placeholders with stable line icons. */
html:not(.react-student-embedded) body .sidebar .menu-item {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 11px !important;
  min-height: 44px !important;
  padding: 0 15px !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell:has(> .sidebar:focus-within) .sidebar .menu-item::before {
  content: "" !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 0.78 !important;
  color: currentColor !important;
  background: currentColor !important;
  background-image: none !important;
  -webkit-mask: var(--hw-sidebar-icon) center / 20px 20px no-repeat !important;
  mask: var(--hw-sidebar-icon) center / 20px 20px no-repeat !important;
}

html:not(.react-student-embedded) body .sidebar .menu-item.active::before {
  opacity: 1 !important;
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="landing"] {
  --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2011.2%2012%204l8.5%207.2'/%3E%3Cpath%20d='M5.5%2010.5V20h5v-5h3v5h5v-9.5'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="interview"] {
  --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='3'%20width='6'%20height='11'%20rx='3'/%3E%3Cpath%20d='M5%2011a7%207%200%200%200%2014%200'/%3E%3Cpath%20d='M12%2018v3'/%3E%3Cpath%20d='M8.5%2021h7'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="audio"] {
  --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2015h3l5%204V5L7%209H4z'/%3E%3Cpath%20d='M16%209.5a4%204%200%200%201%200%205'/%3E%3Cpath%20d='M18.5%207a8%208%200%200%201%200%2010'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="debug-lab"] {
  --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%207.5h8v9a4%204%200%200%201-8%200z'/%3E%3Cpath%20d='M9%204.5%2011%207'/%3E%3Cpath%20d='M15%204.5%2013%207'/%3E%3Cpath%20d='M4%2010h4'/%3E%3Cpath%20d='M16%2010h4'/%3E%3Cpath%20d='M4.5%2016H8'/%3E%3Cpath%20d='M16%2016h3.5'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="waveform"] {
  --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2016h3l2-8%203%2012%203-16%202%2012h5'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="question-bank"] {
  --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%204h10a2%202%200%200%201%202%202v14H8a2%202%200%200%201-2-2z'/%3E%3Cpath%20d='M6%2018a2%202%200%200%201%202-2h10'/%3E%3Cpath%20d='M9%208h5'/%3E%3Cpath%20d='M9%2011h6'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="reports"] {
  --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203.5h8l4%204V20a1%201%200%200%201-1%201H6a1%201%200%200%201-1-1V4.5a1%201%200%200%201%201-1z'/%3E%3Cpath%20d='M14%203.5V8h4'/%3E%3Cpath%20d='M8%2016l2-2%202%201%203-4'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="resume"] {
  --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='3.5'/%3E%3Cpath%20d='M5%2020a7%207%200%200%201%2014%200'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="message-center"] {
  --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209a6%206%200%200%201%2012%200v4l2%203H4l2-3z'/%3E%3Cpath%20d='M10%2019a2%202%200%200%200%204%200'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="settings"] {
  --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M19.4%2015a1.7%201.7%200%200%200%20.3%201.9l.1.2-2%203.4-.3-.1a1.7%201.7%200%200%200-1.9.1%201.7%201.7%200%200%200-.8%201.6V22H9.2v-.3a1.7%201.7%200%200%200-.8-1.6%201.7%201.7%200%200%200-1.9-.1l-.3.1-2-3.4.2-.2a1.7%201.7%200%200%200%20.2-1.8%201.7%201.7%200%200%200-1.4-1.1H3v-4h.3a1.7%201.7%200%200%200%201.4-1.1%201.7%201.7%200%200%200-.2-1.8l-.2-.2%202-3.4.3.1a1.7%201.7%200%200%200%201.9-.1%201.7%201.7%200%200%200%20.8-1.6V2h5.6v.3a1.7%201.7%200%200%200%20.8%201.6%201.7%201.7%200%200%200%201.9.1l.3-.1%202%203.4-.1.2a1.7%201.7%200%200%200-.3%201.9%201.7%201.7%200%200%200%201.5%201.1h.3v4H21a1.7%201.7%200%200%200-1.6%201.1z'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .menu-item {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  grid-template-columns: 48px !important;
  padding: 0 !important;
  column-gap: 0 !important;
  place-items: center !important;
  font-size: 0 !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .menu-item::before {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  -webkit-mask-size: 21px 21px !important;
  mask-size: 21px 21px !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 11px !important;
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  max-height: 42px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before {
  content: "" !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 auto !important;
  transform: none !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: currentColor !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask: var(--hw-sidebar-icon) center / 20px 20px no-repeat !important;
  mask: var(--hw-sidebar-icon) center / 20px 20px no-repeat !important;
}

/* Brand rail polish v289: remove the logo card look and stabilize title spacing. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand {
  position: relative !important;
  height: 150px !important;
  min-height: 150px !important;
  padding: 22px 16px 12px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head--main::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head--main::after {
  display: none !important;
  content: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-head,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-head,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-head,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-head--main {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-icon-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-icon-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-icon-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-icon-logo {
  display: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-main-logo {
  display: block !important;
  width: 176px !important;
  max-width: 176px !important;
  height: auto !important;
  max-height: none !important;
  margin: 2px auto 0 !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: brightness(1.16) contrast(1.08) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18)) !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-subtitle-text {
  display: block !important;
  width: 190px !important;
  margin: 2px auto 0 !important;
  color: rgba(226, 232, 240, 0.86) !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  line-height: 1.62 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  text-wrap: balance !important;
  opacity: 1 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-subtitle-text br,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-subtitle-text br {
  display: block !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-toggle {
  top: 18px !important;
  right: 18px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
  color: rgba(226, 232, 240, 0.9) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  outline: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.11) !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Brand inner specificity lock v290: beat older .brand .brand-head and img.brand-logo rules. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo {
  display: block !important;
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 1px auto 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: brightness(1.18) contrast(1.1) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.2)) !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text {
  display: block !important;
  width: 194px !important;
  max-width: 194px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: rgba(226, 232, 240, 0.9) !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Brand final clean v291: no visible logo box, no framed toggle, even two-line subtitle. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand {
  height: 148px !important;
  min-height: 148px !important;
  padding: 20px 16px 10px !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand *,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand *,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand *,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand * {
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main {
  width: 216px !important;
  max-width: 216px !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo {
  width: 184px !important;
  min-width: 184px !important;
  max-width: 184px !important;
  margin: 0 auto !important;
  filter: brightness(1.24) contrast(1.16) saturate(1.08) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22)) !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text {
  width: 210px !important;
  max-width: 210px !important;
  color: rgba(226, 232, 240, 0.92) !important;
  font-size: 13px !important;
  font-weight: 640 !important;
  line-height: 1.58 !important;
  text-align: center !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-toggle {
  top: 20px !important;
  right: 18px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: rgba(226, 232, 240, 0.86) !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Brand spacing v292: keep the menu toggle from covering the logo strokes. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand {
  height: 166px !important;
  min-height: 166px !important;
  padding-top: 14px !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main {
  padding-top: 24px !important;
  gap: 7px !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-toggle {
  top: 14px !important;
  right: 16px !important;
}

/* Brand spacing v293: fully separate toggle hit area from logo artwork. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand {
  height: 180px !important;
  min-height: 180px !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main {
  padding-top: 36px !important;
}

/* Workspace polish v294: stop duplicate Xiaowen surfaces and let fixed AI rails breathe. */
html:not(.react-student-embedded) body #companionAmbientStage,
html:not(.react-student-embedded) body #companionAmbientModel,
html:not(.react-student-embedded) body #companionAmbientCharacter,
html:not(.react-student-embedded) body #companionMiniBubble,
html:not(.react-student-embedded) body .companion-ambient-stage,
html:not(.react-student-embedded) body .companion-mini-bubble {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="interview"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="audio"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="waveform"] .companion-dock,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) #companionDock,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) #companionDock,
html:not(.react-student-embedded) body:has(.panel[data-panel="debug-lab"].active) #companionDock,
html:not(.react-student-embedded) body:has(.panel[data-panel="waveform"].active) #companionDock {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] img[src*="xiaowen"],
html:not(.react-student-embedded) body[data-active-panel="audio"] img[src*="xiaowen"],
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] img[src*="xiaowen"],
html:not(.react-student-embedded) body[data-active-panel="waveform"] img[src*="xiaowen"],
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) img[src*="xiaowen"],
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) img[src*="xiaowen"],
html:not(.react-student-embedded) body:has(.panel[data-panel="debug-lab"].active) img[src*="xiaowen"],
html:not(.react-student-embedded) body:has(.panel[data-panel="waveform"].active) img[src*="xiaowen"] {
  display: none !important;
  visibility: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card {
  height: calc(100vh - 188px) !important;
  max-height: calc(100vh - 188px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card > .section-head {
  flex: 0 0 auto !important;
  min-height: 40px !important;
  height: auto !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 6px 8px 0 !important;
  scrollbar-gutter: stable !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main {
  grid-template-columns: minmax(88px, auto) minmax(120px, 1fr) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong {
  font-size: 42px !important;
  line-height: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto !important;
  gap: 7px !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
  min-height: 34px !important;
  padding: 6px 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  display: grid !important;
  gap: 8px !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
  min-height: 42px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
  padding: 9px 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button:nth-child(n + 4),
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button.is-collapsed {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card.is-expanded .coach-followup-list button,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card.is-expanded .coach-followup-list button.is-collapsed {
  display: flex !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
  min-height: 38px !important;
  height: auto !important;
  margin-top: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle[hidden] {
  display: none !important;
}

/* Audio review cabin final v294: timeline remains horizontal text, coach rail scrolls internally. */
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-workspace,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-workspace {
  grid-template-columns: minmax(236px, 260px) minmax(0, 1fr) minmax(320px, 360px) !important;
  gap: 16px !important;
  min-height: calc(100vh - 310px) !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-timeline-panel,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-timeline-panel {
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline {
  display: grid !important;
  gap: 8px !important;
  max-height: calc(100vh - 460px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item {
  width: 100% !important;
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 52px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 10px 10px 14px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item *,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-time,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-time {
  min-width: 52px !important;
  white-space: nowrap !important;
  text-align: left !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy strong,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy em,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy strong,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy em {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > small,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > small {
  justify-self: end !important;
  min-width: 46px !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-coach-panel,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-coach-panel {
  max-height: calc(100vh - 310px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 18px !important;
  scrollbar-gutter: stable !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-coach-card,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-coach-card ul,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-coach-card,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-coach-card ul {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-bar,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-action-bar {
  z-index: 20 !important;
}

/* Interview coach compact fit v295: default three follow-ups and expand control stay in view. */
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card {
  height: calc(100vh - 176px) !important;
  max-height: calc(100vh - 176px) !important;
  gap: 8px !important;
  padding: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card > .section-head {
  min-height: 36px !important;
  padding-bottom: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
  gap: 8px !important;
  padding-right: 4px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  padding: 10px !important;
  gap: 7px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-head,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-panel-title {
  min-height: 22px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-head span,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-panel-title strong {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-head em,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-panel-title span {
  min-height: 22px !important;
  padding: 0 8px !important;
  font-size: 10.5px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong {
  font-size: 34px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-track {
  height: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p {
  font-size: 11px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
  min-height: 30px !important;
  padding: 4px 8px !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item span {
  font-size: 11.5px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item b {
  min-width: 20px !important;
  min-height: 20px !important;
  font-size: 11px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  gap: 7px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
  min-height: 38px !important;
  padding: 7px 10px !important;
  font-size: 11.5px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
  min-height: 34px !important;
  height: 34px !important;
}

/* Interview coach visible toggle v296: fit score, lamp board, three prompts and expand button at 720px height. */
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
  gap: 6px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  padding: 8px !important;
  gap: 5px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong {
  font-size: 30px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
  gap: 4px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
  min-height: 26px !important;
  padding: 3px 7px !important;
  gap: 4px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item span {
  font-size: 11px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item b {
  min-width: 18px !important;
  min-height: 18px !important;
  font-size: 10.5px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  gap: 5px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
  min-height: 32px !important;
  padding: 5px 9px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
  min-height: 30px !important;
  height: 30px !important;
}

/* Delivery stability v297: one final owner for sidebar geometry, avatars and fixed coach rails. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
  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;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within,
  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) {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar,
  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;
    padding: 18px 14px 16px !important;
    overflow: hidden !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar,
  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 {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    padding: 16px 10px 14px !important;
    overflow: hidden !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar,
  html:not(.react-student-embedded) body .sidebar *,
  html:not(.react-student-embedded) body .sidebar *::before,
  html:not(.react-student-embedded) body .sidebar *::after {
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand {
    position: relative !important;
    width: 100% !important;
    height: 146px !important;
    min-height: 146px !important;
    max-height: 146px !important;
    margin: 0 0 12px !important;
    padding: 18px 38px 0 8px !important;
    display: grid !important;
    place-items: start center !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand::after,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head::after {
    content: none !important;
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 8px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-icon-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-icon-logo {
    display: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand img.brand-logo.brand-main-logo {
    display: block !important;
    width: 156px !important;
    min-width: 156px !important;
    max-width: 156px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
    filter: brightness(1.22) contrast(1.14) saturate(1.08) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18)) !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-subtitle-text {
    display: block !important;
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: rgba(226, 232, 240, 0.88) !important;
    font-size: 11px !important;
    font-weight: 680 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-toggle {
    position: absolute !important;
    top: 10px !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: rgba(226, 232, 240, 0.86) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu {
    width: 100% !important;
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-section {
    height: 22px !important;
    min-height: 22px !important;
    margin: 4px 0 0 !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    color: rgba(148, 163, 184, 0.78) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 12px 0 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: rgba(226, 232, 240, 0.82) !important;
    font-size: 14px !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: left !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
    margin: 0 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: currentColor !important;
    opacity: 0.82 !important;
    transform: translateY(-50%) !important;
    -webkit-mask: var(--hw-sidebar-icon) center / 19px 19px no-repeat !important;
    mask: var(--hw-sidebar-icon) center / 19px 19px no-repeat !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #4f8cff 0%, #7c4dff 52%, #a833ff 100%) !important;
    box-shadow: 0 14px 28px rgba(124, 77, 255, 0.26) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-zone {
    width: 100% !important;
    display: grid !important;
    gap: 8px !important;
    margin-top: auto !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-card {
    width: 100% !important;
    padding: 10px 0 0 !important;
    margin: 6px 0 0 !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    inline-size: 52px !important;
    block-size: 52px !important;
    flex: 0 0 52px !important;
    aspect-ratio: 1 / 1 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: #ddd8ff !important;
    background-size: 138% 138% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-copy strong {
    display: block !important;
    max-width: 100% !important;
    color: rgba(248, 250, 252, 0.96) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Delivery polish v302: remove the last clipping/overlap points in cabin pages. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] #companionDock,
  html:not(.react-student-embedded) body[data-active-panel="interview"] #companionMini,
  html:not(.react-student-embedded) body[data-active-panel="interview"] #companionMiniBubble,
  html:not(.react-student-embedded) body[data-active-panel="audio"] #companionDock,
  html:not(.react-student-embedded) body[data-active-panel="audio"] #companionMini,
  html:not(.react-student-embedded) body[data-active-panel="audio"] #companionMiniBubble,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) #companionDock,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) #companionMini,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) #companionMiniBubble,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) #companionDock,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) #companionMini,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) #companionMiniBubble {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-statusbar,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-statusbar {
    height: auto !important;
    min-height: 82px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 0.95fr) minmax(380px, 1.25fr) minmax(260px, 0.8fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 10px 16px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-title,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-title {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 56px minmax(142px, 1fr) 78px !important;
    gap: 10px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-title > div,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-title > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-title strong,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-title strong {
    font-size: 18px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-title span:not(.interview-training-avatar),
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-title span:not(.interview-training-avatar) {
    width: auto !important;
    max-width: none !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-inline-btn,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-profile-inline-btn {
    width: 78px !important;
    min-width: 78px !important;
    height: 38px !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics span,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics span {
    min-width: 0 !important;
    height: 58px !important;
    padding: 8px 10px !important;
    display: grid !important;
    align-content: center !important;
    gap: 3px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics em,
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics strong,
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics small,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics em,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics strong,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics small {
    width: auto !important;
    max-width: none !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics strong,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics strong {
    font-size: 13px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-actions,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-actions {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 82px 70px 82px !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: end !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-actions button,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-actions button {
    min-width: 0 !important;
    width: 100% !important;
    height: 42px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active):not(.interview-coach-collapsed) .coach-completeness-main {
    height: auto !important;
    min-height: 66px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active):not(.interview-coach-collapsed) .coach-completeness-main strong {
    font-size: 44px !important;
    line-height: 0.98 !important;
    display: block !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .coach-live-score-card p,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .coach-live-score-card p {
    line-height: 1.45 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-bottom-actionbar,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-bottom-actionbar {
    display: grid !important;
    grid-template-columns: 190px minmax(120px, 1fr) 330px 224px !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 10px 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-bottom-actions,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-bottom-actions {
    min-width: 0 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-bottom-actionbar button,
  html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-bottom-actionbar button {
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-workspace,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-workspace {
    grid-template-columns: 252px minmax(0, 1fr) 300px !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-timeline-panel,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-timeline-panel {
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline {
    padding: 10px 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item {
    min-width: 0 !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 48px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 12px 8px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-time,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-time {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: right !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: grid !important;
    gap: 4px !important;
    overflow: visible !important;
    writing-mode: horizontal-tb !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy strong,
  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy em,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy strong,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy em {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy strong,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy strong {
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy em,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy em {
    font-size: 11px !important;
    color: #64748b !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > small,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > small {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 3px 6px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-bar,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-action-bar {
    display: grid !important;
    grid-template-columns: 82px minmax(300px, 1fr) minmax(400px, auto) !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-next-steps,
  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-progress-shell,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-next-steps,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-progress-shell {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-buttons,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-action-buttons {
    min-width: 0 !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-buttons button,
  html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-action-buttons button {
    min-width: 124px !important;
    height: 44px !important;
    padding: 0 16px !important;
    white-space: nowrap !important;
  }
}

/* Sidebar fit and active state v301. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    gap: 0 !important;
  }

  html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 200px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-zone:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
    flex: 0 0 auto !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    margin-top: 10px !important;
    display: grid !important;
    gap: 6px !important;
  }

  html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-card:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
    flex: 0 0 auto !important;
    width: 200px !important;
    padding-top: 8px !important;
    margin-top: 6px !important;
  }

  html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.active:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.is-active:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
    color: #ffffff !important;
    background-color: #7c4dff !important;
    background-image: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(124, 77, 255, 0.28) !important;
    opacity: 1 !important;
  }
}

/* Sidebar cascade seal v300: outrank legacy homepage/sidebar important rules. */
@media (min-width: 900px) {
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand .brand-head.brand-head--main:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    padding: 26px 0 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: start center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-active-panel] .shell.sidebar-expanded .sidebar .brand img.brand-logo.brand-main-logo:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand img.brand-logo.brand-main-logo:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand img.brand-logo.brand-main-logo:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 62px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  html body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand .brand-subtitle-text:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-subtitle-text:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    margin: -4px auto 0 !important;
    color: rgba(226, 232, 240, 0.9) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.active,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.is-active,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active {
    color: #fff !important;
    background: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(124, 77, 255, 0.28) !important;
  }

  html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-avatar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    aspect-ratio: 1 / 1 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-size: 128% 128% !important;
    background-position: center 48% !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="audio"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="waveform"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionPanel {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card {
  height: calc(100vh - 168px) !important;
  max-height: calc(100vh - 168px) !important;
  padding: 12px !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-card-head span::before {
  background:
    url("./assets/interviewer-avatar.png?v=20260617-copy-polish-v314") center 38% / 108% 108% no-repeat,
    linear-gradient(135deg, rgba(124, 77, 255, 0.14), rgba(91, 140, 255, 0.08)) !important;
}

html:not(.react-student-embedded) body .sidebar-account-avatar,
html:not(.react-student-embedded) body .topbar-user-avatar,
html:not(.react-student-embedded) body .account-preview-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar {
  border-radius: 999px !important;
  border: 0 !important;
  outline: 0 !important;
  overflow: hidden !important;
  background-color: #ddd8ff !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Sidebar visual lock v298: same sidebar on every page, no hover expansion and no boxed glyphs. */
@media (min-width: 900px) {
  html body .shell.sidebar-expanded,
  html body .shell.sidebar-expanded:hover,
  html body .shell.sidebar-expanded:focus-within,
  html body .shell.sidebar-expanded:has(> .sidebar:hover),
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within),
  html body[data-active-panel] .shell.sidebar-expanded,
  html body[data-active-panel] .shell.sidebar-expanded:hover,
  html body[data-active-panel] .shell.sidebar-expanded:focus-within,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html body .shell.sidebar-collapsed,
  html body .shell.sidebar-collapsed:hover,
  html body .shell.sidebar-collapsed:focus-within,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover),
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within),
  html body[data-active-panel] .shell.sidebar-collapsed,
  html body[data-active-panel] .shell.sidebar-collapsed:hover,
  html body[data-active-panel] .shell.sidebar-collapsed:focus-within,
  html body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover),
  html body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html body .shell.sidebar-expanded .sidebar,
  html body .shell.sidebar-expanded:hover .sidebar,
  html body .shell.sidebar-expanded:focus-within .sidebar,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar,
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar,
  html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    padding: 18px 14px 16px !important;
    overflow: hidden !important;
    transition: none !important;
  }

  html body .shell.sidebar-collapsed .sidebar,
  html body .shell.sidebar-collapsed:hover .sidebar,
  html body .shell.sidebar-collapsed:focus-within .sidebar,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar,
  html body[data-active-panel] .shell.sidebar-collapsed .sidebar,
  html body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar,
  html body[data-active-panel] .shell.sidebar-collapsed:focus-within .sidebar,
  html body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar,
  html body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    padding: 16px 10px 14px !important;
    overflow: hidden !important;
    transition: none !important;
  }

  html body .sidebar,
  html body .sidebar *,
  html body .sidebar *::before,
  html body .sidebar *::after {
    transition: none !important;
  }

  html body .shell.sidebar-expanded .sidebar > .brand,
  html body .shell.sidebar-expanded:hover .sidebar > .brand,
  html body .shell.sidebar-expanded:focus-within .sidebar > .brand,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand,
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand,
  html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand {
    position: relative !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    margin: 0 0 12px !important;
    padding: 16px 38px 0 8px !important;
    display: grid !important;
    place-items: start center !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body .shell.sidebar-expanded .sidebar > .brand::before,
  html body .shell.sidebar-expanded .sidebar > .brand::after,
  html body .shell.sidebar-expanded .sidebar > .brand .brand-head::before,
  html body .shell.sidebar-expanded .sidebar > .brand .brand-head::after,
  html body .shell.sidebar-expanded .sidebar > .brand .brand-head--main::before,
  html body .shell.sidebar-expanded .sidebar > .brand .brand-head--main::after,
  html body .shell.sidebar-collapsed .sidebar > .brand::before,
  html body .shell.sidebar-collapsed .sidebar > .brand::after,
  html body .shell.sidebar-collapsed .sidebar > .brand .brand-head::before,
  html body .shell.sidebar-collapsed .sidebar > .brand .brand-head::after {
    content: none !important;
    display: none !important;
  }

  html body .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main,
  html body .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main,
  html body .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main,
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main,
  html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 8px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
  }

  html body .shell.sidebar-expanded .sidebar > .brand .brand-icon-logo,
  html body .shell.sidebar-expanded:hover .sidebar > .brand .brand-icon-logo,
  html body .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-icon-logo,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-icon-logo,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-icon-logo,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-icon-logo,
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-icon-logo,
  html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-icon-logo,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-icon-logo,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-icon-logo {
    display: none !important;
  }

  html body .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
  html body .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
  html body .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
  html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo {
    display: block !important;
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
    filter: brightness(1.25) contrast(1.16) saturate(1.1) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.2)) !important;
    transform: none !important;
  }

  html body .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
  html body .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
  html body .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
  html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text {
    display: block !important;
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    margin: 0 auto !important;
    color: rgba(226, 232, 240, 0.88) !important;
    font-size: 11px !important;
    font-weight: 680 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body .shell.sidebar-expanded .sidebar > .brand .sidebar-toggle,
  html body .shell.sidebar-expanded:hover .sidebar > .brand .sidebar-toggle,
  html body .shell.sidebar-expanded:focus-within .sidebar > .brand .sidebar-toggle,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .sidebar-toggle,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .sidebar-toggle,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .sidebar-toggle,
  html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .sidebar-toggle,
  html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand .sidebar-toggle,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .sidebar-toggle,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .sidebar-toggle {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(15, 23, 42, 0.28) !important;
    border: 1px solid rgba(226, 232, 240, 0.18) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    color: rgba(226, 232, 240, 0.9) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  html body .shell.sidebar-expanded .sidebar > .brand .sidebar-toggle:hover,
  html body .shell.sidebar-expanded .sidebar > .brand .sidebar-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(226, 232, 240, 0.24) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body .shell.sidebar-expanded .sidebar .menu,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu {
    width: 100% !important;
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  html body .shell.sidebar-expanded .sidebar .sidebar-section,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-section,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-section,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-section {
    height: 22px !important;
    min-height: 22px !important;
    margin: 5px 0 1px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    color: rgba(148, 163, 184, 0.76) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  html body .shell.sidebar-expanded .sidebar .menu-item,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item,
  html body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 12px 0 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: rgba(226, 232, 240, 0.82) !important;
    font-size: 14px !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: left !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body .shell.sidebar-expanded .sidebar .menu-item::before,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item::before,
  html body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item::before,
  html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
  html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: currentColor !important;
    opacity: 0.84 !important;
    transform: translateY(-50%) !important;
    -webkit-mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
    mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
  }

  html body .sidebar .menu-item[data-view="landing"],
  html body .sidebar .sidebar-bottom-link[data-view="landing"] {
    --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2011.2%2012%204l8.5%207.2'/%3E%3Cpath%20d='M5.5%2010.5V20h5v-5h3v5h5v-9.5'/%3E%3C/svg%3E");
  }

  html body .sidebar .menu-item[data-view="interview"] {
    --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='3'%20width='6'%20height='11'%20rx='3'/%3E%3Cpath%20d='M5%2011a7%207%200%200%200%2014%200'/%3E%3Cpath%20d='M12%2018v3'/%3E%3Cpath%20d='M8.5%2021h7'/%3E%3C/svg%3E");
  }

  html body .sidebar .menu-item[data-view="audio"] {
    --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2015h3l5%204V5L7%209H4z'/%3E%3Cpath%20d='M16%209.5a4%204%200%200%201%200%205'/%3E%3Cpath%20d='M18.5%207a8%208%200%200%201%200%2010'/%3E%3C/svg%3E");
  }

  html body .sidebar .menu-item[data-view="debug-lab"] {
    --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%207.5h8v9a4%204%200%200%201-8%200z'/%3E%3Cpath%20d='M9%204.5%2011%207'/%3E%3Cpath%20d='M15%204.5%2013%207'/%3E%3Cpath%20d='M4%2010h4'/%3E%3Cpath%20d='M16%2010h4'/%3E%3Cpath%20d='M4.5%2016H8'/%3E%3Cpath%20d='M16%2016h3.5'/%3E%3C/svg%3E");
  }

  html body .sidebar .menu-item[data-view="waveform"] {
    --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2016h3l2-8%203%2012%203-16%202%2012h5'/%3E%3C/svg%3E");
  }

  html body .sidebar .menu-item[data-view="question-bank"] {
    --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%204h10a2%202%200%200%201%202%202v14H8a2%202%200%200%201-2-2z'/%3E%3Cpath%20d='M6%2018a2%202%200%200%201%202-2h10'/%3E%3Cpath%20d='M9%208h5'/%3E%3Cpath%20d='M9%2011h6'/%3E%3C/svg%3E");
  }

  html body .sidebar .menu-item[data-view="reports"] {
    --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203.5h8l4%204V20a1%201%200%200%201-1%201H6a1%201%200%200%201-1-1V4.5a1%201%200%200%201%201-1z'/%3E%3Cpath%20d='M14%203.5V8h4'/%3E%3Cpath%20d='M8%2016l2-2%202%201%203-4'/%3E%3C/svg%3E");
  }

  html body .sidebar .menu-item[data-view="resume"] {
    --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='3.5'/%3E%3Cpath%20d='M5%2020a7%207%200%200%201%2014%200'/%3E%3C/svg%3E");
  }

  html body .sidebar .menu-item[data-view="message-center"] {
    --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209a6%206%200%200%201%2012%200v4l2%203H4l2-3z'/%3E%3Cpath%20d='M10%2019a2%202%200%200%200%204%200'/%3E%3C/svg%3E");
  }

  html body .sidebar .menu-item[data-view="settings"] {
    --hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M19.4%2015a1.7%201.7%200%200%200%20.3%201.9l.1.2-2%203.4-.3-.1a1.7%201.7%200%200%200-1.9.1%201.7%201.7%200%200%200-.8%201.6V22H9.2v-.3a1.7%201.7%200%200%200-.8-1.6%201.7%201.7%200%200%200-1.9-.1l-.3.1-2-3.4.2-.2a1.7%201.7%200%200%200%20.2-1.8%201.7%201.7%200%200%200-1.4-1.1H3v-4h.3a1.7%201.7%200%200%200%201.4-1.1%201.7%201.7%200%200%200-.2-1.8l-.2-.2%202-3.4.3.1a1.7%201.7%200%200%200%201.9-.1%201.7%201.7%200%200%200%20.8-1.6V2h5.6v.3a1.7%201.7%200%200%200%20.8%201.6%201.7%201.7%200%200%200%201.9.1l.3-.1%202%203.4-.1.2a1.7%201.7%200%200%200-.3%201.9%201.7%201.7%200%200%200%201.5%201.1h.3v4H21a1.7%201.7%200%200%200-1.6%201.1z'/%3E%3C/svg%3E");
  }

  html body .shell.sidebar-expanded .sidebar .menu-item.active,
  html body .shell.sidebar-expanded .sidebar .menu-item:hover,
  html body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #4f8cff 0%, #7c4dff 56%, #a833ff 100%) !important;
    box-shadow: 0 14px 28px rgba(124, 77, 255, 0.26) !important;
  }

  html body .shell.sidebar-collapsed .sidebar > .brand,
  html body .shell.sidebar-collapsed:hover .sidebar > .brand,
  html body .shell.sidebar-collapsed:focus-within .sidebar > .brand,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand {
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body .shell.sidebar-collapsed .sidebar > .brand .brand-head.brand-head--main,
  html body .shell.sidebar-collapsed:hover .sidebar > .brand .brand-head.brand-head--main,
  html body .shell.sidebar-collapsed:focus-within .sidebar > .brand .brand-head.brand-head--main,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body .shell.sidebar-collapsed .sidebar > .brand .brand-icon-logo,
  html body .shell.sidebar-collapsed:hover .sidebar > .brand .brand-icon-logo,
  html body .shell.sidebar-collapsed:focus-within .sidebar > .brand .brand-icon-logo,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand .brand-icon-logo,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand .brand-icon-logo {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
  }

  html body .shell.sidebar-collapsed .sidebar > .brand .brand-main-logo,
  html body .shell.sidebar-collapsed .sidebar > .brand .brand-subtitle-text,
  html body .shell.sidebar-collapsed:hover .sidebar > .brand .brand-main-logo,
  html body .shell.sidebar-collapsed:hover .sidebar > .brand .brand-subtitle-text,
  html body .shell.sidebar-collapsed:focus-within .sidebar > .brand .brand-main-logo,
  html body .shell.sidebar-collapsed:focus-within .sidebar > .brand .brand-subtitle-text,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand .brand-main-logo,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand .brand-subtitle-text,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand .brand-main-logo,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand .brand-subtitle-text {
    display: none !important;
    visibility: hidden !important;
  }

  html body .shell.sidebar-collapsed .sidebar > .brand .sidebar-toggle,
  html body .shell.sidebar-collapsed:hover .sidebar > .brand .sidebar-toggle,
  html body .shell.sidebar-collapsed:focus-within .sidebar > .brand .sidebar-toggle,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand .sidebar-toggle,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand .sidebar-toggle {
    position: absolute !important;
    top: 4px !important;
    right: -1px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(226, 232, 240, 0.78) !important;
    font-size: 14px !important;
  }

  html body .shell.sidebar-collapsed .sidebar .menu,
  html body .shell.sidebar-collapsed:hover .sidebar .menu,
  html body .shell.sidebar-collapsed:focus-within .sidebar .menu,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .menu {
    width: 56px !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 8px !important;
  }

  html body .shell.sidebar-collapsed .sidebar .sidebar-section,
  html body .shell.sidebar-collapsed:hover .sidebar .sidebar-section,
  html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-section,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-section,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-section {
    height: 12px !important;
    min-height: 12px !important;
    margin: 8px 0 2px !important;
    padding: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    overflow: hidden !important;
  }

  html body .shell.sidebar-collapsed .sidebar .menu-item,
  html body .shell.sidebar-collapsed:hover .sidebar .menu-item,
  html body .shell.sidebar-collapsed:focus-within .sidebar .menu-item,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .menu-item,
  html body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link,
  html body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-link,
  html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-bottom-link,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
    width: 48px !important;
    height: 42px !important;
    min-width: 48px !important;
    min-height: 42px !important;
    max-width: 48px !important;
    max-height: 42px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    color: rgba(226, 232, 240, 0.82) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html body .shell.sidebar-collapsed .sidebar .menu-item::before,
  html body .shell.sidebar-collapsed:hover .sidebar .menu-item::before,
  html body .shell.sidebar-collapsed:focus-within .sidebar .menu-item::before,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item::before,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .menu-item::before,
  html body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link::before,
  html body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-link::before,
  html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-bottom-link::before,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before {
    left: 50% !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    background: currentColor !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%) !important;
    -webkit-mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
    mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
  }

  html body .shell.sidebar-expanded .sidebar .sidebar-bottom-zone,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-zone {
    width: 100% !important;
    display: grid !important;
    gap: 8px !important;
    margin-top: auto !important;
  }

  html body .shell.sidebar-expanded .sidebar .sidebar-account-card,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-card,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-card {
    width: 100% !important;
    padding: 10px 0 0 !important;
    margin: 6px 0 0 !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
  }

  html body .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 10px !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
  html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
  html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    inline-size: 52px !important;
    block-size: 52px !important;
    flex: 0 0 52px !important;
    aspect-ratio: 1 / 1 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 999px !important;
    background-color: #ddd8ff !important;
    background-size: 132% 132% !important;
    background-position: center 47% !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body .shell.sidebar-expanded .sidebar .sidebar-account-copy,
  html body .shell.sidebar-expanded .sidebar .sidebar-account-copy strong {
    min-width: 0 !important;
    max-width: 100% !important;
    color: rgba(248, 250, 252, 0.96) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body .shell.sidebar-collapsed .sidebar .sidebar-bottom-zone,
  html body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-zone,
  html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-bottom-zone,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-zone {
    width: 56px !important;
    margin: auto auto 0 !important;
    display: grid !important;
    gap: 8px !important;
  }

  html body .shell.sidebar-collapsed .sidebar .sidebar-account-card,
  html body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-card,
  html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-account-card,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-card,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-account-card {
    width: 56px !important;
    padding: 10px 0 0 !important;
    margin: 6px auto 0 !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
  }

  html body .shell.sidebar-collapsed .sidebar .sidebar-account-button,
  html body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-button,
  html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-account-button,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-button,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-account-button {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body .shell.sidebar-collapsed .sidebar .sidebar-account-avatar,
  html body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-avatar,
  html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-account-avatar,
  html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
  html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-account-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    inline-size: 44px !important;
    block-size: 44px !important;
    aspect-ratio: 1 / 1 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-size: 132% 132% !important;
    background-position: center 47% !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body .shell.sidebar-collapsed .sidebar .sidebar-account-copy,
  html body .shell.sidebar-collapsed .sidebar .sidebar-account-copy strong,
  html body .shell.sidebar-collapsed .sidebar .sidebar-account-button i {
    display: none !important;
    visibility: hidden !important;
  }
}

html body[data-active-panel="interview"] #companionDock,
html body[data-active-panel="interview"] #companionMini,
html body[data-active-panel="interview"] #companionMiniBubble,
html body[data-active-panel="interview"] #companionMiniAvatar,
html body[data-active-panel="interview"] #companionMiniAvatarStage,
html body[data-active-panel="interview"] #companionMiniCharacter,
html body[data-active-panel="interview"] #companionPanel,
html body[data-active-panel="interview"] #companionAmbientStage,
html body[data-active-panel="interview"] #companionAmbientModel,
html body[data-active-panel="interview"] #companionAmbientCharacter,
html body[data-active-panel="interview"] .companion-dock,
html body[data-active-panel="interview"] .companion-mini,
html body[data-active-panel="interview"] .companion-mini-bubble,
html body[data-active-panel="interview"] .companion-avatar-stage,
html body[data-active-panel="interview"] .companion-ambient-stage,
html body[data-active-panel="audio"] #companionDock,
html body[data-active-panel="audio"] #companionMini,
html body[data-active-panel="audio"] #companionMiniBubble,
html body[data-active-panel="audio"] #companionMiniAvatar,
html body[data-active-panel="audio"] #companionMiniAvatarStage,
html body[data-active-panel="audio"] #companionMiniCharacter,
html body[data-active-panel="audio"] #companionPanel,
html body[data-active-panel="audio"] #companionAmbientStage,
html body[data-active-panel="audio"] #companionAmbientModel,
html body[data-active-panel="audio"] #companionAmbientCharacter,
html body[data-active-panel="audio"] .companion-dock,
html body[data-active-panel="audio"] .companion-mini,
html body[data-active-panel="audio"] .companion-mini-bubble,
html body[data-active-panel="audio"] .companion-avatar-stage,
html body[data-active-panel="audio"] .companion-ambient-stage,
html body[data-active-panel="debug-lab"] #companionDock,
html body[data-active-panel="debug-lab"] #companionMini,
html body[data-active-panel="debug-lab"] #companionMiniBubble,
html body[data-active-panel="debug-lab"] #companionMiniAvatar,
html body[data-active-panel="debug-lab"] #companionMiniAvatarStage,
html body[data-active-panel="debug-lab"] #companionMiniCharacter,
html body[data-active-panel="debug-lab"] #companionPanel,
html body[data-active-panel="debug-lab"] #companionAmbientStage,
html body[data-active-panel="debug-lab"] #companionAmbientModel,
html body[data-active-panel="debug-lab"] #companionAmbientCharacter,
html body[data-active-panel="debug-lab"] .companion-dock,
html body[data-active-panel="debug-lab"] .companion-mini,
html body[data-active-panel="debug-lab"] .companion-mini-bubble,
html body[data-active-panel="debug-lab"] .companion-avatar-stage,
html body[data-active-panel="debug-lab"] .companion-ambient-stage,
html body[data-active-panel="waveform"] #companionDock,
html body[data-active-panel="waveform"] #companionMini,
html body[data-active-panel="waveform"] #companionMiniBubble,
html body[data-active-panel="waveform"] #companionMiniAvatar,
html body[data-active-panel="waveform"] #companionMiniAvatarStage,
html body[data-active-panel="waveform"] #companionMiniCharacter,
html body[data-active-panel="waveform"] #companionPanel,
html body[data-active-panel="waveform"] #companionAmbientStage,
html body[data-active-panel="waveform"] #companionAmbientModel,
html body[data-active-panel="waveform"] #companionAmbientCharacter,
html body[data-active-panel="waveform"] .companion-dock,
html body[data-active-panel="waveform"] .companion-mini,
html body[data-active-panel="waveform"] .companion-mini-bubble,
html body[data-active-panel="waveform"] .companion-avatar-stage,
html body[data-active-panel="waveform"] .companion-ambient-stage,
html body:has(.panel[data-panel="interview"].active) #companionDock,
html body:has(.panel[data-panel="interview"].active) #companionMini,
html body:has(.panel[data-panel="interview"].active) #companionMiniBubble,
html body:has(.panel[data-panel="audio"].active) #companionDock,
html body:has(.panel[data-panel="audio"].active) #companionMini,
html body:has(.panel[data-panel="audio"].active) #companionMiniBubble,
html body:has(.panel[data-panel="debug-lab"].active) #companionDock,
html body:has(.panel[data-panel="debug-lab"].active) #companionMini,
html body:has(.panel[data-panel="debug-lab"].active) #companionMiniBubble,
html body:has(.panel[data-panel="waveform"].active) #companionDock,
html body:has(.panel[data-panel="waveform"].active) #companionMini,
html body:has(.panel[data-panel="waveform"].active) #companionMiniBubble {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Sidebar hard lock v299: keep desktop navigation stable and visually consistent. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    padding: 18px 18px 16px !important;
    overflow: hidden !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    margin: 0 0 12px !important;
    padding: 14px 36px 0 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand img.brand-logo.brand-main-logo {
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 66px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-subtitle-text {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    margin: -8px auto 0 !important;
    color: rgba(226, 232, 240, 0.9) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .sidebar-toggle {
    top: 8px !important;
    right: 0 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border: 1px solid rgba(226, 232, 240, 0.18) !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.34) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 12px 0 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    background: currentColor !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
    opacity: 0.92 !important;
    -webkit-mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
    mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.is-active,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active {
    color: #fff !important;
    background: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(124, 77, 255, 0.28) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 10px !important;
    gap: 12px !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    inline-size: 52px !important;
    block-size: 52px !important;
    flex: 0 0 52px !important;
    aspect-ratio: 1 / 1 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 999px !important;
    background-color: #ddd8ff !important;
    background-size: 132% 132% !important;
    background-position: center 47% !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }
}


/* source: sidebar-final-lock.css */
/* Final sidebar lock. Loaded after all legacy styles. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
  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;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 18px 18px 16px !important;
    background:
      radial-gradient(circle at 48% 0%, rgba(124, 77, 255, 0.15), transparent 35%),
      linear-gradient(180deg, #101b35 0%, #071426 58%, #06101f 100%) !important;
    overflow: hidden !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar > .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar > .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-head.brand-head--main {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    display: grid !important;
    grid-template-rows: 58px 42px !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar img.brand-logo.brand-main-logo {
    width: 134px !important;
    min-width: 134px !important;
    max-width: 134px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    filter: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-subtitle-text {
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    margin: 0 auto !important;
    color: rgba(226, 232, 240, 0.86) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.52 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body .sidebar:hover .sidebar-toggle {
    top: 4px !important;
    right: 0 !important;
    width: 30px !important;
    height: 30px !important;
    color: rgba(226, 232, 240, 0.88) !important;
    background: rgba(15, 23, 42, 0.32) !important;
    border: 1px solid rgba(226, 232, 240, 0.16) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    gap: 3px !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-section-label,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-section-label {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 5px 0 3px !important;
    padding: 0 12px !important;
    color: rgba(148, 163, 184, 0.78) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 12px !important;
    color: rgba(226, 232, 240, 0.82) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transform: none !important;
    filter: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:hover {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
    transform: none !important;
    filter: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    background: currentColor !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 0.82 !important;
    transform: none !important;
    -webkit-mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
    mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.is-active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active {
    color: #fff !important;
    background: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(124, 77, 255, 0.26) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 132px !important;
    gap: 4px !important;
    margin-top: auto !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-zone .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone .sidebar-bottom-link {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-card {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-button {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 3px 12px !important;
    background: rgba(15, 23, 42, 0.38) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    background-color: #e9e5ff !important;
    background-size: 116% 116% !important;
    background-position: center 42% !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-role,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-role {
    display: none !important;
  }
}

/* Absolute last rule: no account card in the top-right toolbar. */
html:not(.react-student-embedded) body .topbar .topbar-user-wrap,
html:not(.react-student-embedded) body .topbar #topbarAccountBtn,
html:not(.react-student-embedded) body .topbar #topbarUserMenu,
html:not(.react-student-embedded) body .topbar #topbarAccountAvatar,
html:not(.react-student-embedded) body .topbar #topbarAccountName {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  pointer-events: none !important;
}

/* EOF lock: interview avatar image must sit exactly inside the circle. */
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background-color: #e9e4ff !important;
  background-size: 108% 108% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  flex: 0 0 72px !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  transform: none !important;
  margin: 0 !important;
}

/* EOF lock: interview avatar image must sit exactly inside the circle. */
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background-color: #e9e4ff !important;
  background-size: 108% 108% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  flex: 0 0 72px !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  transform: none !important;
  margin: 0 !important;
}

/* Absolute last rule: center interview portraits in circular frames. */
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background-color: #e9e4ff !important;
  background-size: 108% 108% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  flex: 0 0 72px !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  transform: none !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-question-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-avatar {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background-color: #e9e4ff !important;
  background-position: center center !important;
  background-size: cover !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-question-avatar img,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-avatar img,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-avatar img {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  margin: 0 !important;
}

/* Absolute last rule: center interview portraits in circular frames. */
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background-color: #e9e4ff !important;
  background-size: 108% 108% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  flex: 0 0 72px !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  transform: none !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-question-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-avatar {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background-color: #e9e4ff !important;
  background-position: center center !important;
  background-size: cover !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-question-avatar img,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-avatar img,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-avatar img {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  margin: 0 !important;
}

/* Absolute last rule: no account card in the top-right toolbar. */
html:not(.react-student-embedded) body .topbar .topbar-user-wrap,
html:not(.react-student-embedded) body .topbar #topbarAccountBtn,
html:not(.react-student-embedded) body .topbar #topbarUserMenu,
html:not(.react-student-embedded) body .topbar #topbarAccountAvatar,
html:not(.react-student-embedded) body .topbar #topbarAccountName {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  pointer-events: none !important;
}

/* Final topbar cleanup: account identity lives in the left sidebar only. */
html:not(.react-student-embedded) body .topbar-user-wrap,
html:not(.react-student-embedded) body #topbarAccountBtn,
html:not(.react-student-embedded) body #topbarUserMenu,
html:not(.react-student-embedded) body #topbarAccountAvatar,
html:not(.react-student-embedded) body #topbarAccountName {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Static expanded sidebar v362: no hover geometry, no collapse state in client shell. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell,
  html:not(.react-student-embedded) body .shell:hover,
  html:not(.react-student-embedded) body .shell:focus-within,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) body .shell:has(> .sidebar:focus-within),
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell,
  html:not(.react-student-embedded) body[data-active-panel] .shell:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell:has(> .sidebar:focus-within),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    transition: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell > .sidebar,
  html:not(.react-student-embedded) body .shell:hover > .sidebar,
  html:not(.react-student-embedded) body .shell:focus-within > .sidebar,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:focus-within) > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell:focus-within > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 14px 18px 12px !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand,
  html:not(.react-student-embedded) body .sidebar:hover .brand,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .brand,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    margin: 0 0 10px !important;
    padding: 4px 0 0 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .sidebar:hover .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand-head.brand-head--main {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    display: grid !important;
    grid-template-rows: 64px auto !important;
    place-items: center !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .sidebar:hover img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar img.brand-logo.brand-main-logo {
    display: block !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .sidebar:hover .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand-subtitle-text {
    display: block !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    height: auto !important;
    opacity: 1 !important;
    color: rgba(226, 232, 240, 0.86) !important;
    font-size: 11px !important;
    line-height: 1.52 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu,
  html:not(.react-student-embedded) body .sidebar:hover .menu,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .sidebar:hover .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-zone {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link:hover,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 0 14px !important;
    color: rgba(226, 232, 240, 0.82) !important;
    font-size: 14px !important;
    line-height: 37px !important;
    text-indent: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item.active,
  html:not(.react-student-embedded) body .sidebar .menu-item.is-active {
    color: #fff !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .sidebar:hover .sidebar-section,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-section {
    display: block !important;
    width: 200px !important;
    height: 21px !important;
    margin: 4px 0 2px !important;
    opacity: 1 !important;
    color: rgba(148, 163, 184, 0.78) !important;
    font-size: 11px !important;
    line-height: 21px !important;
  }
}

/* Sidebar immutable geometry v358: the nav must never resize or reflow on hover. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell,
  html:not(.react-student-embedded) body .shell:hover,
  html:not(.react-student-embedded) body .shell:focus-within,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) body .shell:has(> .sidebar:focus-within),
  html:not(.react-student-embedded) body[data-active-panel] .shell,
  html:not(.react-student-embedded) body[data-active-panel] .shell:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell:has(> .sidebar:focus-within) {
    transition: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
  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),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within,
  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] .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within > .sidebar,
  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,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 14px 18px 12px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within > .sidebar,
  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] .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:focus-within > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 14px 18px 12px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .brand,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .brand {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 0 12px !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-button i,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-button i,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-button i {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-link {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
    grid-template-columns: 20px !important;
    gap: 0 !important;
    padding: 0 10px !important;
    color: transparent !important;
    text-indent: -999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before {
    color: #cbd5e1 !important;
    background: currentColor !important;
    text-indent: 0 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .brand-main-logo {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    object-fit: contain !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    grid-template-columns: 36px !important;
    gap: 0 !important;
    padding: 3px 2px !important;
    overflow: visible !important;
  }
}

/* Sidebar viewport fit v356: keep the whole nav visible in a 720px-tall client. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within > .sidebar {
    padding: 14px 18px 12px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar > .brand,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar > .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    margin: 0 0 10px !important;
    padding: 4px 0 0 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand-head.brand-head--main {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    grid-template-rows: 64px auto !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar img.brand-logo.brand-main-logo {
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand-subtitle-text {
    font-size: 10.5px !important;
    line-height: 1.48 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu {
    gap: 3px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-section {
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    margin: 4px 0 2px !important;
    line-height: 21px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link {
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
    line-height: 37px !important;
    font-size: 13.5px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item:focus,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item:focus-visible,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:focus,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:focus-visible {
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
    line-height: 37px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    flex: 0 0 118px !important;
    gap: 3px !important;
    padding-top: 5px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-zone .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-zone .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone .sidebar-bottom-link {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 28px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-card {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-button {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    grid-template-columns: 42px minmax(0, 1fr) 16px !important;
    padding: 5px 12px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar #sidebarAccountAvatar.sidebar-account-avatar {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    inline-size: 42px !important;
    block-size: 42px !important;
    flex: 0 0 42px !important;
  }
}

/* Sidebar hard freeze v355: hover/focus must never resize, shift, or reflow the nav. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
  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),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within,
  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] .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar,
  html:not(.react-student-embedded) body .sidebar:hover,
  html:not(.react-student-embedded) body .sidebar:focus-within,
  html:not(.react-student-embedded) body .sidebar *,
  html:not(.react-student-embedded) body .sidebar *::before,
  html:not(.react-student-embedded) body .sidebar *::after {
    box-sizing: border-box !important;
    transition: none !important;
    animation: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within > .sidebar,
  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,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 18px 18px 16px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within > .sidebar,
  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] .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:focus-within > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-section,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section {
    display: block !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 6px 0 4px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 12px !important;
    padding: 0 14px !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    line-height: 42px !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transform: none !important;
    filter: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item:focus,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item:focus-visible,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:focus,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:focus-visible {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    outline: 0 !important;
    transform: none !important;
    filter: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 0.86 !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.is-active,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.active,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.is-active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 12px 28px rgba(124, 77, 255, 0.24) !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 16px !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 7px 12px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar #sidebarAccountAvatar.sidebar-account-avatar {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    inline-size: 44px !important;
    block-size: 44px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 44px !important;
    border-radius: 999px !important;
    background-size: 116% 116% !important;
    background-position: center 42% !important;
    transform: none !important;
  }
}

/* Delivery polish: keep workbench pages inside the desktop viewport. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="waveform"] .panel[data-panel="waveform"],
  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-training-shell,
  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-investigation-shell,
  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-investigation-grid,
  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-investigation-main,
  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-measure-card,
  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-diagnosis-card,
  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-bottom-grid,
  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-ai-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-investigation-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-investigation-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-measure-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-measure-item {
    min-width: 0 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-diagnosis-path {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: repeat(5, minmax(160px, 1fr)) !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-diagnosis-node {
    width: auto !important;
    min-width: 160px !important;
    max-width: 100% !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="waveform"] .waveform-bottom-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr) !important;
    gap: 12px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-workspace {
    grid-template-columns: minmax(250px, 0.88fr) minmax(0, 1.35fr) minmax(300px, 0.95fr) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item {
    grid-template-columns: 50px minmax(0, 1fr) 48px !important;
    gap: 4px 8px !important;
  }
}

/* Audio review cabin: keep the timeline readable instead of squeezing labels into columns. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-workspace,
  html:not(.react-student-embedded) body .panel[data-panel="audio"].active .audio-cabin-workspace {
    grid-template-columns: 280px minmax(0, 1fr) 300px !important;
    gap: 12px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline,
  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline,
  html:not(.react-student-embedded) body .panel[data-panel="audio"].active .audio-cabin-timeline,
  html:not(.react-student-embedded) body .panel[data-panel="audio"].active .audio-dialogue-timeline {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item,
  html:not(.react-student-embedded) body .panel[data-panel="audio"].active .audio-cabin-timeline-item {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 50px minmax(88px, 1fr) 40px !important;
    gap: 6px 4px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-time,
  html:not(.react-student-embedded) body .panel[data-panel="audio"].active .audio-cabin-timeline-item > .audio-timeline-time {
    width: 50px !important;
    min-width: 50px !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy,
  html:not(.react-student-embedded) body .panel[data-panel="audio"].active .audio-cabin-timeline-item > .audio-timeline-copy {
    min-width: 88px !important;
    overflow: hidden !important;
    writing-mode: horizontal-tb !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy strong,
  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy em,
  html:not(.react-student-embedded) body .panel[data-panel="audio"].active .audio-cabin-timeline-item > .audio-timeline-copy strong,
  html:not(.react-student-embedded) body .panel[data-panel="audio"].active .audio-cabin-timeline-item > .audio-timeline-copy em {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    writing-mode: horizontal-tb !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > small,
  html:not(.react-student-embedded) body .panel[data-panel="audio"].active .audio-cabin-timeline-item > small {
    width: 40px !important;
    min-width: 40px !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }
}

/* Typography guardrails: prevent heavy dashboard numerals from looking clipped. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .landing-focus-decision-card strong,
  html:not(.react-student-embedded) body .landing-hero-metric-row strong,
  html:not(.react-student-embedded) body .landing-hero-capability-card strong,
  html:not(.react-student-embedded) body .interview-top-score strong,
  html:not(.react-student-embedded) body .coach-completeness-main strong,
  html:not(.react-student-embedded) body .audio-cabin-shell h2,
  html:not(.react-student-embedded) body .audio-summary-card strong,
  html:not(.react-student-embedded) body .audio-top-metric strong,
  html:not(.react-student-embedded) body .audio-summary-score strong,
  html:not(.react-student-embedded) body .question-bank-stat strong {
    line-height: 1.22 !important;
    min-height: 1.22em !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .landing-focus-decision-card strong {
    padding-bottom: 2px !important;
  }

  html:not(.react-student-embedded) body .landing-hero-radar-labels .score-history-trigger {
    min-width: max-content !important;
    line-height: 1.3 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .coach-completeness-main {
    min-height: 78px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .audio-cabin-waveform,
  html:not(.react-student-embedded) body .audio-cabin-waveform.purple {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .audio-cabin-timeline-item {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .audio-top-metric,
  html:not(.react-student-embedded) body .audio-summary-score {
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .audio-top-metric strong,
  html:not(.react-student-embedded) body .audio-summary-score strong {
    display: block !important;
    line-height: 1.3 !important;
    min-height: 1.3em !important;
    padding-bottom: 2px !important;
  }

  html:not(.react-student-embedded) body .report-summary-card.span-all {
    min-height: 220px !important;
    overflow: visible !important;
  }
}

@media (min-width: 900px) {
  html:not(.react-student-embedded) body .panel:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .training-dashboard-drawer:not(.is-open),
  html:not(.react-student-embedded) body .training-dashboard-drawer-backdrop:not(.is-open),
  html:not(.react-student-embedded) body .interview-profile-drawer:not(.is-open),
  html:not(.react-student-embedded) body .interview-profile-drawer-backdrop:not(.is-open) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html:not(.react-student-embedded) body .training-dashboard-drawer:not(.is-open),
  html:not(.react-student-embedded) body .interview-profile-drawer:not(.is-open) {
    opacity: 0 !important;
    transform: translateX(32px) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar img.brand-logo.brand-main-logo {
    width: 134px !important;
    min-width: 134px !important;
    max-width: 134px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    filter: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel] .sidebar:hover .sidebar-toggle {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    top: 4px !important;
    right: 0 !important;
    background: rgba(15, 23, 42, 0.32) !important;
    border: 1px solid rgba(226, 232, 240, 0.16) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    grid-template-columns: 42px minmax(0, 1fr) 16px !important;
    gap: 12px !important;
    padding: 3px 12px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    background-size: 116% 116% !important;
    background-position: center 42% !important;
  }
}

@media (min-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-head.brand-head--main img.brand-logo.brand-main-logo {
    width: 134px !important;
    min-width: 134px !important;
    max-width: 134px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    filter: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar #sidebarToggle.sidebar-toggle,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar #sidebarToggle.sidebar-toggle {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    top: 4px !important;
    right: 0 !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar #sidebarAccountAvatar.sidebar-account-avatar {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    inline-size: 42px !important;
    block-size: 42px !important;
    aspect-ratio: 1 / 1 !important;
    background-size: 116% 116% !important;
    background-position: center 42% !important;
  }
}

/* Final homepage topbar lock: keep knowledge search and customize button visible and usable. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar {
    display: grid !important;
    grid-template-columns: 220px minmax(360px, 566px) 180px !important;
    align-items: center !important;
    justify-content: space-between !important;
    column-gap: 18px !important;
    width: calc(100vw - 236px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 236px) !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 8px 24px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    background: rgba(248, 250, 252, 0.96) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-left,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-center,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-right,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search,
  html:not(.react-student-embedded) body[data-active-panel="landing"] #topbarCommandInput {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-left {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    height: 48px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-title-stack {
    min-width: 0 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar h2 {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-center {
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search {
    width: min(566px, 100%) !important;
    min-width: 360px !important;
    max-width: 566px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(203, 213, 225, 0.92) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search > span {
    flex: 0 0 auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] #topbarCommandInput {
    height: 42px !important;
    min-width: 0 !important;
    padding-right: 76px !important;
    color: #0f172a !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search.has-search-value #topbarCommandSubmit,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search.has-search-value .topbar-search-submit,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search:has(#topbarCommandInput:not(:placeholder-shown)) #topbarCommandSubmit,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search:has(#topbarCommandInput:not(:placeholder-shown)) .topbar-search-submit {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 28px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    right: 9px !important;
    top: 8px !important;
    transform: none !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search:not(.has-search-value):not(:has(#topbarCommandInput:not(:placeholder-shown))) #topbarCommandSubmit,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search:not(.has-search-value):not(:has(#topbarCommandInput:not(:placeholder-shown))) .topbar-search-submit {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-right {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    height: 48px !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-user-wrap,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .debug-topbar-actions {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] #landingCustomizeHomeBtn {
    display: inline-flex !important;
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search.has-search-value .topbar-search-submit,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search.has-search-value #topbarCommandSubmit {
    display: inline-flex !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    right: 9px !important;
    top: 8px !important;
  }
}

/* Absolute last sidebar geometry lock v359. Keep hover/focus from expanding, shrinking, or reflowing nav. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
  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),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within,
  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] .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within > .sidebar,
  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,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    padding: 14px 18px 12px !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within > .sidebar,
  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] .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:focus-within > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    padding: 14px 18px 12px !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .brand,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar .brand,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .brand,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar .menu,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-link {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    grid-template-columns: 20px !important;
    gap: 0 !important;
    padding: 0 10px !important;
    text-indent: -999px !important;
    color: transparent !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before {
    color: #cbd5e1 !important;
    background: currentColor !important;
    text-indent: 0 !important;
  }
}

/* Collapsed logo/account centering v360. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .brand-head.brand-head--main {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    display: grid !important;
    grid-template-rows: 44px !important;
    place-items: center !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar .brand-main-logo,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .brand-main-logo {
    position: static !important;
    display: block !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-card {
    display: block !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar #sidebarAccountBtn.sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar #sidebarAccountBtn.sidebar-account-button,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar #sidebarAccountBtn.sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar #sidebarAccountBtn.sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar #sidebarAccountBtn.sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar #sidebarAccountBtn.sidebar-account-button {
    display: grid !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    grid-template-columns: 36px !important;
    padding: 3px 2px !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar #sidebarAccountAvatar.sidebar-account-avatar {
    display: block !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    inline-size: 36px !important;
    block-size: 36px !important;
    border-radius: 999px !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* LAST RULE v362: force the production client sidebar to stay expanded and static. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell,
  html:not(.react-student-embedded) body .shell:hover,
  html:not(.react-student-embedded) body .shell:focus-within,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) body .shell:has(> .sidebar:focus-within),
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell,
  html:not(.react-student-embedded) body[data-active-panel] .shell:hover,
  html:not(.react-student-embedded) body[data-active-panel] .shell:focus-within,
  html:not(.react-student-embedded) body[data-active-panel] .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) body[data-active-panel] .shell:has(> .sidebar:focus-within),
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    transition: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell > .sidebar,
  html:not(.react-student-embedded) body .shell:hover > .sidebar,
  html:not(.react-student-embedded) body .shell:focus-within > .sidebar,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:focus-within) > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell:hover > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell:focus-within > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 14px 18px 12px !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand,
  html:not(.react-student-embedded) body .sidebar:hover .brand,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .brand,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    margin: 0 0 10px !important;
    padding: 4px 0 0 !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .sidebar:hover .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand-head.brand-head--main {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    display: grid !important;
    grid-template-rows: 64px auto !important;
    place-items: center !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .sidebar:hover img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar img.brand-logo.brand-main-logo {
    display: block !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .sidebar:hover .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .brand-subtitle-text {
    display: block !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    opacity: 1 !important;
    color: rgba(226, 232, 240, 0.86) !important;
    font-size: 11px !important;
    line-height: 1.52 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu,
  html:not(.react-student-embedded) body .sidebar:hover .menu,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .sidebar:hover .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-zone {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link:hover,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    line-height: 37px !important;
    text-indent: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .sidebar:hover .sidebar-section,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-section {
    display: block !important;
    width: 200px !important;
    height: 21px !important;
    margin: 4px 0 2px !important;
    opacity: 1 !important;
    color: rgba(148, 163, 184, 0.78) !important;
    font-size: 11px !important;
    line-height: 21px !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .sidebar:hover .sidebar-account-card,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-card {
    display: flex !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 52px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* Absolute last rule: no account card in the top-right toolbar. */
html:not(.react-student-embedded) body .topbar .topbar-user-wrap,
html:not(.react-student-embedded) body .topbar #topbarAccountBtn,
html:not(.react-student-embedded) body .topbar #topbarUserMenu,
html:not(.react-student-embedded) body .topbar #topbarAccountAvatar,
html:not(.react-student-embedded) body .topbar #topbarAccountName {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  pointer-events: none !important;
}


/* source: sidebar-static-lock.css */
/* Final static sidebar lock.
   Loaded after legacy sidebar files so hover/collapsed states cannot shift layout. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) .training-dashboard-drawer[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .shell,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:focus-within,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:focus-within),
  html:not(.react-student-embedded) body:not(.compact-shell) .shell.sidebar-expanded,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell.sidebar-collapsed {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    transition: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .shell > .sidebar,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:hover > .sidebar,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:focus-within > .sidebar,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:focus-within) > .sidebar,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell.sidebar-collapsed > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 14px 18px 12px !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .brand,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover .brand,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .brand {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    margin: 0 0 10px !important;
    padding: 4px 0 0 !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover .brand-head.brand-head--main,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .brand-head.brand-head--main {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    display: grid !important;
    grid-template-rows: 64px auto !important;
    justify-items: center !important;
    align-items: center !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar img.brand-logo.brand-main-logo {
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover .brand-subtitle-text,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .brand-subtitle-text {
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    display: block !important;
    opacity: 1 !important;
    font-size: 11px !important;
    line-height: 1.52 !important;
    text-align: center !important;
    white-space: normal !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover .menu,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover .sidebar-bottom-zone {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item:focus,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-bottom-link:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .sidebar-bottom-link {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 14px !important;
    text-indent: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-bottom-link::before {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover .sidebar-account-card,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .sidebar-account-card {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-bottom-zone .sidebar-bottom-link,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover .sidebar-bottom-zone .sidebar-bottom-link,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone .sidebar-bottom-link {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 32px !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar #sidebarAccountAvatar.sidebar-account-avatar {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar #sidebarAccountAvatar.sidebar-account-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-zone .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone .sidebar-bottom-link,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone .sidebar-bottom-link {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 32px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-card {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar #sidebarAccountAvatar.sidebar-account-avatar {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }
}

/* v408 absolute last: sidebar labels must never shift, duplicate, or overlap. */
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link:hover {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 18px 0 30px !important;
  box-sizing: border-box !important;
  color: rgba(226, 232, 240, 0.84) !important;
  font-size: 14px !important;
  font-weight: 820 !important;
  line-height: 38px !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .menu.menu > .menu-item.menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .menu.menu > .menu-item.menu-item::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item:hover::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item:hover::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* v409 final tail: click-only collapsed sidebar. Hover must not expand or reflow it. */
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:hover),
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:focus-within) {
  grid-template-columns: 84px minmax(0, 1fr) !important;
  transition: none !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:hover) > .sidebar.sidebar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar.sidebar {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  padding: 14px 18px 12px !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .menu,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-bottom-zone,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .menu,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-bottom-zone {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  transform: none !important;
  transition: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-section,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-section,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-account-card,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-account-card {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
}

/* v410 final tail: the collapsed rail still needs an expand button. */
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar #sidebarToggle.sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar #sidebarToggle.sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:hover) > .sidebar.sidebar #sidebarToggle.sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar.sidebar #sidebarToggle.sidebar-toggle {
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  top: 14px !important;
  right: 8px !important;
  left: auto !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(248, 250, 252, 0.92) !important;
  background: rgba(15, 23, 42, 0.34) !important;
  border: 1px solid rgba(226, 232, 240, 0.18) !important;
  border-radius: 11px !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: none !important;
  z-index: 120 !important;
}

/* v410: keep the collapse/expand button visible in the collapsed rail. */
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar #sidebarToggle.sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar #sidebarToggle.sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:hover) > .sidebar.sidebar #sidebarToggle.sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar.sidebar #sidebarToggle.sidebar-toggle {
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  top: 14px !important;
  right: 8px !important;
  left: auto !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(248, 250, 252, 0.92) !important;
  background: rgba(15, 23, 42, 0.34) !important;
  border: 1px solid rgba(226, 232, 240, 0.18) !important;
  border-radius: 11px !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: none !important;
  z-index: 120 !important;
}

/* v409: click-only collapsed sidebar. Hover must not expand or reflow it. */
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:hover),
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:focus-within) {
  grid-template-columns: 84px minmax(0, 1fr) !important;
  transition: none !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:hover) > .sidebar.sidebar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar.sidebar {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  padding: 14px 18px 12px !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .menu,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-bottom-zone,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .menu,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-bottom-zone {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  transform: none !important;
  transition: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-section,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-section,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-account-card,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-account-card {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
}

/* v407: final readable sidebar lock. Keep nav geometry identical on hover/focus. */
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu .menu-item.menu-item,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .menu.menu .menu-item.menu-item,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu .menu-item.menu-item:hover,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link:hover {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 18px 0 30px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  font-weight: 820 !important;
  line-height: 38px !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu .menu-item.menu-item::before,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu .menu-item.menu-item::after,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .menu.menu .menu-item.menu-item::before,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .menu.menu .menu-item.menu-item::after,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu .menu-item.menu-item:hover::before,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu .menu-item.menu-item:hover::after,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link::before,
html:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* v390: absolute production sidebar freeze.
   This deliberately ignores collapsed/hover/focus classes so the client never
   jumps while the cursor moves across the navigation. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell,
  html:not(.react-student-embedded) body .shell:hover,
  html:not(.react-student-embedded) body .shell:focus-within,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) body .shell:has(> .sidebar:focus-within),
  html:not(.react-student-embedded) body .shell.sidebar-expanded,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body.compact-shell .shell,
  html:not(.react-student-embedded) body.compact-shell .shell:hover,
  html:not(.react-student-embedded) body.compact-shell .shell:has(> .sidebar:hover) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    transition: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .shell > .sidebar,
  html:not(.react-student-embedded) body .shell:hover > .sidebar,
  html:not(.react-student-embedded) body .shell:focus-within > .sidebar,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:focus-within) > .sidebar,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body.compact-shell .shell > .sidebar,
  html:not(.react-student-embedded) body.compact-shell .shell:hover > .sidebar,
  html:not(.react-student-embedded) body.compact-shell .shell:has(> .sidebar:hover) > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 14px 18px 12px !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand,
  html:not(.react-student-embedded) body .sidebar:hover .brand,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .brand {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    margin: 0 0 10px !important;
    padding: 4px 0 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .sidebar:hover .brand-head.brand-head--main,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .brand-head.brand-head--main {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    display: grid !important;
    grid-template-rows: 64px auto !important;
    place-items: center !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .sidebar:hover img.brand-logo.brand-main-logo,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar img.brand-logo.brand-main-logo {
    display: block !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand-icon-logo,
  html:not(.react-student-embedded) body .sidebar:hover .brand-icon-logo,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .brand-icon-logo {
    display: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .brand-subtitle-text,
  html:not(.react-student-embedded) body .sidebar:hover .brand-subtitle-text,
  html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .brand-subtitle-text {
    display: block !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    opacity: 1 !important;
    font-size: 11px !important;
    line-height: 1.52 !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: normal !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu,
  html:not(.react-student-embedded) body .sidebar:hover .menu,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body .sidebar:hover .sidebar-bottom-zone {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item,
  html:not(.react-student-embedded) body .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body .sidebar .menu-item:focus,
  html:not(.react-student-embedded) body .sidebar .menu-item:focus-visible,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link:hover,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link:focus,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link:focus-visible {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    justify-items: start !important;
    padding: 0 14px !important;
    overflow: hidden !important;
    text-indent: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .sidebar .sidebar-bottom-link::before {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .sidebar:hover .sidebar-account-card,
  html:not(.react-student-embedded) body .sidebar .sidebar-account-card:focus-within {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
  }
}

/* v385: report empty-state cards should read like guidance, not a clipped widget. */
html:not(.react-student-embedded) .report-empty-coach.empty-box,
html:not(.react-student-embedded) .empty-box.report-empty-coach {
  height: auto !important;
  min-height: 180px !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: start !important;
}

html:not(.react-student-embedded) .report-empty-coach.empty-box p,
html:not(.react-student-embedded) .empty-box.report-empty-coach p,
html:not(.react-student-embedded) .report-empty-coach.empty-box .report-empty-flow,
html:not(.react-student-embedded) .empty-box.report-empty-coach .report-empty-flow {
  overflow: visible !important;
  white-space: normal !important;
}

/* v382: hard freeze every visible sidebar control.
   Older experimental sidebar rules still exist in styles.css; this final layer
   makes hover/focus purely visual and prevents width, position, or text shifts. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar *,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar *::before,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar *::after {
    box-sizing: border-box !important;
    letter-spacing: 0 !important;
    transition-property: background-color, color, border-color, box-shadow !important;
    transition-duration: 0ms !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar button,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar button:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar button:focus,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar button:focus-visible,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item:focus,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item:focus-visible,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-bottom-link:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-bottom-link:focus,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-bottom-link:focus-visible,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button:focus,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button:focus-visible {
    outline: 0 !important;
    outline-offset: 0 !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item:focus,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item:focus-visible {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    place-items: center start !important;
    contain: layout paint !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item.active,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item.active:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item.active:focus,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item.active:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 12px 30px rgba(124, 77, 255, 0.28) !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-toggle,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-toggle:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-toggle:focus,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-toggle:focus-visible {
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    outline: 0 !important;
    background: rgba(15, 23, 42, 0.18) !important;
    box-shadow: none !important;
    border-radius: 11px !important;
    color: rgba(226, 232, 240, 0.82) !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-card:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-card:focus-within {
    width: 200px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    border-radius: 16px !important;
    background: rgba(15, 23, 42, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button:focus,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button:focus-visible {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 14px !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar #sidebarAccountAvatar.sidebar-account-avatar {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    background-size: 112% 112% !important;
    background-position: center 47% !important;
    box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.16) !important;
  }
}

/* v391: account card readability without hover movement. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover .sidebar-bottom-zone,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone {
    width: 208px !important;
    min-width: 208px !important;
    max-width: 208px !important;
    height: 134px !important;
    min-height: 134px !important;
    max-height: 134px !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-card:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-card:focus-within,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .sidebar-account-card {
    width: 208px !important;
    min-width: 208px !important;
    max-width: 208px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-card {
    width: 208px !important;
    min-width: 208px !important;
    max-width: 208px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button:focus,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-button:focus-visible {
    grid-template-columns: 52px minmax(0, 1fr) 14px !important;
    width: 186px !important;
    min-width: 186px !important;
    max-width: 186px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    overflow: visible !important;
  }
}

/* v397: terminal sidebar geometry lock.
   This is intentionally last so old hover/collapsed experiments cannot
   reintroduce width, text, logo, or account-card movement. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body:not(.compact-shell) .shell,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:focus-within,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell.sidebar-expanded,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell.sidebar-expanded:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell.sidebar-collapsed,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell.sidebar-collapsed:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover),
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:focus-within) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    transition: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:hover > .sidebar,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell.sidebar-expanded > .sidebar,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell.sidebar-collapsed > .sidebar,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) > .sidebar,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:focus-within) > .sidebar {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 14px 18px 12px !important;
    overflow-x: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar > .brand,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover > .brand,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar > .brand {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    margin: 0 0 10px !important;
    padding: 4px 0 0 !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover .menu,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .menu {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    gap: 3px !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item:focus,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .menu-item:focus-visible,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .menu-item {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 0 14px !important;
    line-height: 37px !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-bottom-zone,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar:hover .sidebar-bottom-zone,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone {
    width: 208px !important;
    min-width: 208px !important;
    max-width: 208px !important;
    height: 134px !important;
    min-height: 134px !important;
    max-height: 134px !important;
    flex: 0 0 134px !important;
    margin-top: auto !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-card:hover,
  html:not(.react-student-embedded) body:not(.compact-shell) .sidebar .sidebar-account-card:focus-within,
  html:not(.react-student-embedded) body:not(.compact-shell) .shell:has(> .sidebar:hover) .sidebar .sidebar-account-card {
    width: 208px !important;
    min-width: 208px !important;
    max-width: 208px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    padding: 6px 10px !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }
}

/* v398: readable content guard for secondary pages. */
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-main-dashboard {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-copilot-card,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .copilot-section,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .interview-coach-questions {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] #questionBankHint {
  min-height: 58px !important;
  height: auto !important;
  max-height: none !important;
  padding: 16px 18px !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-bank-card {
  min-height: 220px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: start !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-bank-card p,
html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-bank-card .question-meta,
html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-bank-card .question-answer {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body[data-active-panel="resume"] .resume-page-grid {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: start !important;
}

html:not(.react-student-embedded) body[data-active-panel="resume"] #resumeList.empty-box,
html:not(.react-student-embedded) body[data-active-panel="resume"] .stack-list.empty-box {
  min-height: 160px !important;
  height: auto !important;
  max-height: none !important;
  padding: 22px !important;
  overflow: visible !important;
  white-space: normal !important;
  align-content: center !important;
}

/* v399: interview coach rail delivery fit. */
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card {
  min-height: 0 !important;
  height: min(552px, calc(100vh - 168px)) !important;
  max-height: min(552px, calc(100vh - 168px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card > .section-head {
  flex: 0 0 42px !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: 112px 190px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px !important;
  border-radius: 16px !important;
  gap: 7px !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card {
  display: grid !important;
  grid-template-rows: 22px 44px 1fr !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong {
  font-size: 34px !important;
  line-height: 0.95 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card {
  display: grid !important;
  grid-template-rows: 24px minmax(0, 1fr) !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: 27px !important;
  gap: 5px !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
  min-height: 27px !important;
  height: 27px !important;
  padding: 3px 8px !important;
  gap: 7px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item span {
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item b {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  display: grid !important;
  grid-template-rows: 24px minmax(0, 1fr) 34px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  display: grid !important;
  grid-auto-rows: 34px !important;
  gap: 6px !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button:nth-child(n + 4),
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button.is-collapsed {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-judge-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-progress-stats {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}

/* v399b: remove the remaining 52px coach-panel overflow. */
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel {
  grid-template-rows: 114px 174px 170px !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card {
  height: 114px !important;
  min-height: 114px !important;
  max-height: 114px !important;
  grid-template-rows: 20px 66px 0 !important;
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card {
  height: 174px !important;
  min-height: 174px !important;
  max-height: 174px !important;
  grid-template-rows: 22px minmax(0, 1fr) !important;
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
  grid-auto-rows: 24px !important;
  gap: 4px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
  min-height: 24px !important;
  height: 24px !important;
  padding: 2px 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  grid-template-rows: 22px minmax(0, 1fr) 30px !important;
  box-sizing: border-box !important;
  padding: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
  grid-auto-rows: 30px !important;
  gap: 5px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
  min-height: 30px !important;
  height: 30px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
  min-height: 30px !important;
  height: 30px !important;
}

/* v401: keep the score card from clipping its helper sentence. */
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card {
  grid-template-rows: 20px 66px 0 !important;
  gap: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p {
  display: none !important;
}

/* v404: absolute sidebar text lock. Remove legacy pseudo-icons/letter icons that overlap labels. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
    position: relative !important;
    isolation: isolate !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 18px 0 30px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 13px !important;
    box-sizing: border-box !important;
    color: rgba(226, 232, 240, 0.84) !important;
    font-size: 14px !important;
    font-weight: 820 !important;
    line-height: 38px !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::after,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::after,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item::after,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link::after,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::after,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.is-active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item.is-active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item.active,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item.is-active {
    color: #fff !important;
    background: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
    box-shadow: 0 12px 30px rgba(124, 77, 255, 0.26) !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-section-label,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-section-label,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
  html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-section-label {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 18px !important;
    margin: 7px 0 3px !important;
    line-height: 24px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: rgba(148, 163, 184, 0.76) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
  }
}

/* v408 absolute last: sidebar labels must never shift, duplicate, or overlap. */
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link:hover {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 18px 0 30px !important;
  box-sizing: border-box !important;
  color: rgba(226, 232, 240, 0.84) !important;
  font-size: 14px !important;
  font-weight: 820 !important;
  line-height: 38px !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .menu.menu > .menu-item.menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .menu.menu > .menu-item.menu-item::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item:hover::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .menu.menu > .menu-item.menu-item:hover::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* v409 final tail: click-only collapsed sidebar. Hover must not expand or reflow it. */
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:hover),
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:focus-within) {
  grid-template-columns: 84px minmax(0, 1fr) !important;
  transition: none !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:hover) > .sidebar.sidebar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar.sidebar {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  padding: 14px 18px 12px !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .menu,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-bottom-zone,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .menu,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-bottom-zone {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  transform: none !important;
  transition: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-section,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-section,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-account-card,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-account-card {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar .sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
}


/* source: interview-avatar-lock.css */
/* Final interview avatar lock.
   This file is loaded after all legacy overrides so portrait frames cannot drift. */
html:not(.react-student-embedded) :is(body[data-active-panel="interview"], body:has(.panel[data-panel="interview"].active)) .interview-training-avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background-color: #e9e4ff !important;
  background-size: 108% 108% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  flex: 0 0 72px !important;
  transform: none !important;
}

html:not(.react-student-embedded) :is(body[data-active-panel="interview"], body:has(.panel[data-panel="interview"].active)) .interview-training-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  transform: none !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) :is(body[data-active-panel="interview"], body:has(.panel[data-panel="interview"].active)) .interviewer-question-avatar,
html:not(.react-student-embedded) :is(body[data-active-panel="interview"], body:has(.panel[data-panel="interview"].active)) .interview-question-avatar,
html:not(.react-student-embedded) :is(body[data-active-panel="interview"], body:has(.panel[data-panel="interview"].active)) .interviewer-avatar {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background-color: #e9e4ff !important;
  background-position: center center !important;
  background-size: cover !important;
  transform: none !important;
}

html:not(.react-student-embedded) :is(body[data-active-panel="interview"], body:has(.panel[data-panel="interview"].active)) .interviewer-question-avatar img,
html:not(.react-student-embedded) :is(body[data-active-panel="interview"], body:has(.panel[data-panel="interview"].active)) .interview-question-avatar img,
html:not(.react-student-embedded) :is(body[data-active-panel="interview"], body:has(.panel[data-panel="interview"].active)) .interviewer-avatar img {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  margin: 0 !important;
}


/* source: companion-single-lock.css */
/* XiaoWen V5 single-entry lock.
   Keep one global coach entry: a quiet bottom corner dot. Expand only on click. */

html:not(.react-student-embedded) #companionAmbientStage,
html:not(.react-student-embedded) .companion-drag-handle,
html:not(.react-student-embedded) .companion-mini-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
  top: auto !important;
  z-index: 80 !important;
  transform: none !important;
  transition: none !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed {
  width: 48px !important;
  height: 48px !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-position-left {
  left: 24px !important;
  right: auto !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed #companionMini.companion-mini {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(124, 58, 237, 0.26) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c3aed, #3b82f6) !important;
  box-shadow: 0 14px 32px rgba(79, 70, 229, 0.28) !important;
  overflow: visible !important;
  transform: none !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed #companionMini::before {
  content: "" !important;
  position: absolute !important;
  right: 5px !important;
  bottom: 5px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15) !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed #companionMini::after {
  content: "问" !important;
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: transparent !important;
  color: #fff !important;
  filter: none !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed #companionMiniAvatar {
  display: none !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed #companionMini::after {
  content: "" !important;
  display: none !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage {
  position: absolute !important;
  inset: 3px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.22) !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed #companionMiniCharacter {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed .companion-mini-bubble {
  position: absolute !important;
  right: 56px !important;
  bottom: 4px !important;
  display: none !important;
  min-width: 168px !important;
  max-width: 260px !important;
  min-height: 40px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-position-left.companion-collapsed .companion-mini-bubble {
  left: 56px !important;
  right: auto !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed #companionMiniName {
  display: inline !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed #companionMiniState {
  display: inline-flex !important;
  min-height: 20px !important;
  padding: 2px 7px !important;
  border: 0 !important;
  background: rgba(34, 197, 94, 0.1) !important;
  color: #16a34a !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed #companionMiniText {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 176px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed.companion-moment .companion-mini-bubble {
  display: inline-flex !important;
  animation: companionMomentPop 0.18s ease-out both !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-collapsed.companion-moment #companionMini.companion-mini {
  box-shadow:
    0 16px 34px rgba(79, 70, 229, 0.34),
    0 0 0 8px rgba(124, 58, 237, 0.1) !important;
}

@keyframes companionMomentPop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-expanded {
  width: min(390px, calc(100vw - 32px)) !important;
  height: auto !important;
}

html:not(.react-student-embedded) #companionDock.companion-dock.companion-expanded #companionMini {
  display: none !important;
}

html:not(.react-student-embedded) #companionPanel.companion-panel {
  max-height: min(620px, calc(100vh - 80px)) !important;
  overflow: auto !important;
}

html:not(.react-student-embedded) #companionForm {
  display: none !important;
}

html:not(.react-student-embedded) #companionInput,
html:not(.react-student-embedded) #companionVoiceBtn {
  display: none !important;
}

html:not(.react-student-embedded) #companionMessages {
  display: none !important;
}

html:not(.react-student-embedded) #companionActions {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 8px;
}

html:not(.react-student-embedded) #companionActions button {
  min-height: 40px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.08);
  color: #5b21b6;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

html:not(.react-student-embedded) .xiaowen-assistant-state-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

html:not(.react-student-embedded) .xiaowen-assistant-state-list span {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.06);
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

html:not(.react-student-embedded) .panel .companion-dock,
html:not(.react-student-embedded) .panel .companion-mini,
html:not(.react-student-embedded) .section-card .companion-dock,
html:not(.react-student-embedded) .section-card .companion-mini {
  display: none !important;
}


/* source: audio-cabin-lock.css */
/* Final audio review cabin lock: one cockpit, one work area, no legacy overflow. */
html:not(.react-student-embedded) body[data-active-panel="audio"] .main {
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .panel[data-panel="audio"].active {
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 80px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-review-cabin {
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 80px) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 184px minmax(0, 1fr) 116px !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 18px 18px 14px !important;
  overflow: hidden !important;
  background: #f5f8fc !important;
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-form {
  grid-row: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-rows: 56px 116px !important;
  gap: 12px !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-header {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-title h2 {
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-upload-button {
  flex: 0 0 auto !important;
  width: 180px !important;
  height: 42px !important;
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-upload-button em {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-statusbar {
  height: 116px !important;
  min-height: 116px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1.35fr) 100px 110px 110px minmax(210px, 1.05fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 12px !important;
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-status-hero,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-top-metric,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-training-card {
  min-width: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-top-metric {
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 2px !important;
  padding: 7px 12px !important;
  line-height: 1.08 !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-top-metric strong {
  display: block !important;
  font-size: 28px !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-top-metric span,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-top-metric em {
  line-height: 1.12 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-top-metric span,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-top-metric small {
  font-size: 12px !important;
  line-height: 1.1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-training-card {
  display: grid !important;
  align-content: center !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  line-height: 1.2 !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-session-fields,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-status-actions,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-preview {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-workspace,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-workspace {
  grid-row: 2 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  align-self: stretch !important;
  display: grid !important;
  grid-template-columns: 252px minmax(0, 1fr) 300px !important;
  gap: 14px !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-timeline-panel,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-review-main,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-coach-panel,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-timeline-panel,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-review-main,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-coach-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  align-self: stretch !important;
  border-radius: 20px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.055) !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-timeline-panel,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-coach-panel {
  display: flex !important;
  flex-direction: column !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 10px 8px 10px 12px !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline > button.audio-cabin-timeline-item {
  width: calc(100% - 4px) !important;
  max-width: calc(100% - 4px) !important;
  min-width: 0 !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 32px !important;
  align-items: center !important;
  column-gap: 4px !important;
  padding: 10px 4px 10px 20px !important;
  margin: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: background-color 120ms ease, border-color 120ms ease !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item > *,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline > button.audio-cabin-timeline-item > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item strong,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item span,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item em,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline > button.audio-cabin-timeline-item strong,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline > button.audio-cabin-timeline-item span,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline > button.audio-cabin-timeline-item em {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item .audio-timeline-time,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline > button.audio-cabin-timeline-item .audio-timeline-time {
  width: auto !important;
  min-width: 0 !important;
  font-size: 12px !important;
  text-align: left !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item small,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline > button.audio-cabin-timeline-item small {
  width: auto !important;
  min-width: 0 !important;
  max-width: 32px !important;
  padding: 2px 3px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-main-scroll {
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 18px !important;
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-coach-panel,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-coach-panel {
  padding: 14px !important;
  overflow: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-report-digest,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-coach-card {
  min-height: 0 !important;
  overflow: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-waveform {
  max-width: 100% !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-bar,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-action-bar {
  grid-row: 3 !important;
  height: auto !important;
  min-height: 116px !important;
  max-height: none !important;
  align-self: stretch !important;
  display: grid !important;
  grid-template-columns: 88px minmax(220px, 1fr) minmax(250px, 1.05fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-progress-shell {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(108px, 1fr)) !important;
  gap: 10px !important;
  min-width: 380px !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] #audioReviewMetrics,
html:not(.react-student-embedded) body[data-active-panel="audio"] #audioAutoStatus,
html:not(.react-student-embedded) body[data-active-panel="audio"] #audioPipelineStatus,
html:not(.react-student-embedded) body[data-active-panel="audio"] #audioChecklistBox {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-review-standard-compare,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-compare-grid,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-compare-grid section,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-compare-grid p {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-compare-grid section {
  min-height: 132px !important;
  align-content: start !important;
}

html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-compare-grid p {
  min-height: 0 !important;
  display: block !important;
  white-space: normal !important;
  word-break: normal !important;
}


/* source: sidebar-toggle-visible-lock.css */
/* Final loaded sidebar toggle lock.
   The rail may collapse, but the expand/collapse button must remain visible. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar #sidebarToggle.sidebar-toggle,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:hover > .sidebar.sidebar #sidebarToggle.sidebar-toggle,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:hover) > .sidebar.sidebar #sidebarToggle.sidebar-toggle,
  html:not(.react-student-embedded) body .shell.sidebar-collapsed.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar.sidebar #sidebarToggle.sidebar-toggle {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: 14px !important;
    right: 8px !important;
    left: auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(248, 250, 252, 0.92) !important;
    background: rgba(15, 23, 42, 0.34) !important;
    border: 1px solid rgba(226, 232, 240, 0.18) !important;
    border-radius: 11px !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    z-index: 120 !important;
  }

  html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar #sidebarToggle.sidebar-toggle,
  html:not(.react-student-embedded) body .shell.sidebar-expanded.sidebar-expanded:hover > .sidebar.sidebar #sidebarToggle.sidebar-toggle {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    left: auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    z-index: 120 !important;
  }
}


/* source: waveform-theme-sync-lock.css */
/* Waveform Lab theme sync: the page follows app theme, the oscilloscope screen stays dark. */
html[data-theme="light"] body[data-active-panel="waveform"],
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) {
  background: #f5f8fc !important;
  color: #0f172a !important;
}

html[data-theme="light"] body[data-active-panel="waveform"] .main,
html[data-theme="light"] body[data-active-panel="waveform"] .content,
html[data-theme="light"] body[data-active-panel="waveform"] .panel[data-panel="waveform"].active,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .main,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .content,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .panel[data-panel="waveform"].active {
  background:
    radial-gradient(circle at 20% 0%, rgba(91, 140, 255, 0.12), transparent 32%),
    radial-gradient(circle at 88% 6%, rgba(124, 77, 255, 0.1), transparent 30%),
    #f5f8fc !important;
  color: #0f172a !important;
}

html[data-theme="light"] body[data-active-panel="waveform"] .topbar,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .topbar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: rgba(148, 163, 184, 0.18) !important;
  color: #0f172a !important;
}

html[data-theme="light"] body[data-active-panel="waveform"] .topbar h1,
html[data-theme="light"] body[data-active-panel="waveform"] .topbar h2,
html[data-theme="light"] body[data-active-panel="waveform"] .topbar-user-trigger strong,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .topbar h1,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .topbar h2,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .topbar-user-trigger strong {
  color: #0f172a !important;
}

html[data-theme="light"] body[data-active-panel="waveform"] .topbar-search input,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .topbar-search input {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #0f172a !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22) !important;
}

html[data-theme="light"] body[data-active-panel="waveform"] .topbar-search input::placeholder,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .topbar-search input::placeholder {
  color: #94a3b8 !important;
}

html[data-theme="light"] body[data-active-panel="waveform"] .waveform-investigation-shell,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-investigation-shell {
  color: #0f172a !important;
}

html[data-theme="light"] body[data-active-panel="waveform"] .waveform-investigation-hero,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-measure-card,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-diagnosis-card,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-info-card,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-note-card,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-ai-panel,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-ai-card,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-investigation-hero,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-measure-card,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-diagnosis-card,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-info-card,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-note-card,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-ai-panel,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-ai-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07) !important;
}

html[data-theme="light"] body[data-active-panel="waveform"] .waveform-scope-card-main,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-scope-card-main {
  background:
    radial-gradient(circle at 50% 16%, rgba(56, 189, 248, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(9, 20, 36, 0.97), rgba(4, 11, 22, 0.99)) !important;
  border-color: rgba(30, 41, 59, 0.18) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] body[data-active-panel="waveform"] .waveform-investigation-title h2,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-card-head h3,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-ai-panel h3,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-info-grid strong,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-diagnosis-copy strong,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title h2,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-card-head h3,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-ai-panel h3,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-info-grid strong,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-diagnosis-copy strong {
  color: #0f172a !important;
}

html[data-theme="light"] body[data-active-panel="waveform"] .waveform-investigation-title p,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-card-head span,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-info-grid span,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-diagnosis-copy small,
html[data-theme="light"] body[data-active-panel="waveform"] .waveform-diagnosis-copy em,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-investigation-title p,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-card-head span,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-info-grid span,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-diagnosis-copy small,
html[data-theme="light"] body:has(.panel[data-panel="waveform"].active) .waveform-diagnosis-copy em {
  color: #64748b !important;
}


/* source: question-training-center-lock.css */
/* Question Bank -> Ability Training Center */
html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-training-center {
  display: grid !important;
  align-content: start !important;
  gap: 24px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 24px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07) !important;
}

.question-training-subtitle {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.5;
  letter-spacing: 0;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-ai-recommend-card {
  display: grid;
  gap: 20px;
  min-height: 360px;
  padding: 28px;
  border: 1px solid rgba(124, 77, 255, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 18%, rgba(91, 140, 255, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(255, 255, 255, 0.94) 42%, rgba(91, 140, 255, 0.08));
  box-shadow: 0 18px 50px rgba(91, 140, 255, 0.12);
}

.question-ai-recommend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.question-ai-recommend-head span {
  width: max-content;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
  font-size: 13px;
  font-weight: 950;
}

.question-ai-recommend-head h4 {
  margin: 10px 0 0;
  color: #0f172a;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.18;
  letter-spacing: 0;
}

.question-ai-recommend-head p {
  max-width: 420px;
  margin: 0;
  color: #475569;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.65;
}

.question-ai-recommend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) repeat(2, minmax(220px, 0.84fr));
  gap: 16px;
}

.question-ai-training-card {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  min-height: 244px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.question-ai-training-card.primary {
  min-height: 292px;
  padding: 24px;
  border-color: rgba(124, 77, 255, 0.34);
  background:
    radial-gradient(circle at 84% 18%, rgba(91, 140, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 240, 255, 0.94));
  box-shadow: 0 20px 45px rgba(124, 77, 255, 0.14);
}

.question-ai-training-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.question-ai-training-top span,
.question-ai-training-top strong {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.question-ai-training-top span {
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
}

.question-ai-training-top strong {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.question-ai-training-card h5 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.22;
}

.question-ai-training-card.primary h5 {
  font-size: clamp(28px, 2.2vw, 38px);
}

.question-ai-training-card p,
.question-ai-training-card small {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
}

.question-ai-training-card.primary p,
.question-ai-training-card.primary small {
  font-size: 15px;
}

.question-ai-training-card p b,
.question-ai-training-card small b {
  color: #0f172a;
}

.question-ai-why {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(91, 140, 255, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(238, 242, 255, 0.94), rgba(255, 255, 255, 0.9));
}

.question-ai-why-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.question-ai-why-head > div {
  display: grid;
  gap: 6px;
}

.question-ai-why-head span {
  width: max-content;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.12);
  color: #6d4aff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.question-ai-why-head strong {
  color: #172033;
  font-size: 16px;
  line-height: 1.45;
}

.question-ai-why-head > em {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(91, 140, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #51647e;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.question-ai-why-findings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.question-ai-why-finding {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.question-ai-why-finding > b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(91, 140, 255, 0.12);
  color: #2563eb;
  font-size: 12px;
}

.question-ai-why-finding > span {
  min-width: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.question-ai-why-finding > strong {
  color: #ef4444;
  font-size: 14px;
  white-space: nowrap;
}

.question-ai-why-judgement {
  padding: 10px 12px;
  border-left: 3px solid #7c4dff;
  border-radius: 4px 10px 10px 4px;
  background: rgba(124, 77, 255, 0.08);
  color: #52627a !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

.question-ai-why-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
}

.question-ai-why-result > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.question-ai-why-result > strong {
  color: #0f172a;
  font-size: 15px;
}

.question-ai-why-result > small {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 11px !important;
  line-height: 1.5;
}

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

.question-ai-training-meta em {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: #334155;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.question-ai-training-card .primary-btn {
  align-self: end;
  justify-self: start;
  min-height: 48px;
  min-width: 132px;
  border-radius: 14px;
}

.question-ai-training-card.primary .primary-btn {
  min-width: 176px;
  min-height: 54px;
  font-size: 16px;
}

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

.question-training-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.question-training-title h4 {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.25;
}

.question-training-title > span {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 900;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-ability-map {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
}

.question-ability-domain {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.98));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.question-ability-domain h5 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
}

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

.question-ability-point {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  min-height: 74px;
  padding: 12px;
  border-radius: 18px !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.8);
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.question-ability-point:hover,
.question-ability-point.active {
  transform: translateY(-1px);
  border-color: rgba(124, 77, 255, 0.42) !important;
  background: rgba(124, 77, 255, 0.08);
  box-shadow: 0 12px 24px rgba(124, 77, 255, 0.1);
}

.question-ability-point span {
  min-width: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
}

.question-ability-point strong {
  color: #7c4dff;
  font-size: 20px;
  line-height: 1;
}

.question-ability-point em {
  width: max-content;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.1);
  color: #7c4dff;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.question-ability-point small {
  justify-self: end;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 850;
}

.question-ability-point.not-started strong,
.question-ability-point.not-started em {
  color: #ef4444;
}

.question-ability-point.not-started em {
  background: rgba(239, 68, 68, 0.08);
}

.question-ability-point.weak strong,
.question-ability-point.weak em {
  color: #f97316;
}

.question-ability-point.weak em {
  background: rgba(249, 115, 22, 0.1);
}

.question-ability-point.strong strong,
.question-ability-point.strong em {
  color: #22c55e;
}

.question-ability-point.strong em {
  background: rgba(34, 197, 94, 0.1);
}

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

.question-special-packs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.question-training-pack {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 178px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.question-special-packs .question-training-pack {
  min-height: 330px;
  padding: 20px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 8%, rgba(124, 77, 255, 0.1), transparent 28%),
    #fff;
}

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

.question-project-packs .question-training-pack {
  min-height: 270px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 10%, rgba(91, 140, 255, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
}

.question-training-pack-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
  font-size: 18px;
  font-weight: 950;
}

.question-training-pack strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.35;
}

.question-training-pack p {
  display: -webkit-box;
  margin: 6px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #64748b;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.55;
}

.question-project-pack-detail {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.question-project-pack-detail div {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.9);
}

.question-project-pack-detail span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.question-project-pack-detail p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
  color: inherit;
  line-height: 1.2;
}

.question-project-pack-detail em {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.1);
  color: #7c4dff;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.question-project-pack-detail strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.4;
}

.question-training-pack-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.question-training-pack-stats span {
  min-height: 42px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.92);
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.question-training-pack-stats b {
  color: #7c4dff;
  font-size: 16px;
  line-height: 1.1;
}

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

.question-training-path li {
  min-height: 30px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.question-training-path li::before {
  counter-increment: training-step;
  content: counter(training-step);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
  font-size: 12px;
  font-weight: 950;
}

.question-training-pack {
  counter-reset: training-step;
}

.question-training-pack-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.question-training-pack-meta em {
  color: #22c55e;
  font-style: normal;
}

.question-training-pack .small-btn {
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 132px;
  min-height: 42px;
  border-radius: 12px;
}

.question-special-packs .question-training-pack .small-btn {
  min-width: 148px;
  min-height: 46px;
}

.question-mistake-replay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.question-mistake-empty {
  grid-column: 1 / -1;
  min-height: 172px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(124, 77, 255, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 10%, rgba(91, 140, 255, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.question-mistake-empty-icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
  font-size: 24px;
  font-weight: 950;
}

.question-mistake-empty strong,
.question-mistake-card h5 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.25;
}

.question-mistake-empty p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.question-mistake-card {
  display: grid;
  gap: 12px;
  min-height: 238px;
  padding: 18px;
  border: 1px solid rgba(239, 68, 68, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 12%, rgba(239, 68, 68, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 247, 0.9));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.question-mistake-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.question-mistake-card-head span,
.question-mistake-card-head em {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.question-mistake-card-head span {
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
}

.question-mistake-card-head em {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.question-mistake-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.question-mistake-missing {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.question-mistake-missing > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

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

.question-mistake-missing em {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.09);
  color: #ef4444;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.question-mistake-card .small-btn {
  justify-self: end;
  min-width: 132px;
  min-height: 42px;
  border-radius: 12px;
}

.question-list-drawer {
  position: relative;
  min-height: 64px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  isolation: isolate;
}

.question-list-summary {
  position: relative;
  z-index: 2;
  min-height: 64px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
  text-align: left;
  list-style: none;
}

.question-list-summary em {
  color: #94a3b8;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.question-list-content {
  display: grid;
  gap: 16px;
}

.question-list-content[hidden] {
  display: none !important;
}

.question-list-drawer.is-open {
  height: auto !important;
  min-height: 0;
  padding-bottom: 16px;
}

.question-list-drawer.is-open > .question-list-summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.question-list-drawer .toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) repeat(4, minmax(130px, 0.72fr)) auto;
  gap: 10px;
  align-items: center;
}

.question-list-drawer .toolbar input,
.question-list-drawer .toolbar select {
  min-height: 44px;
}

.question-list-drawer .question-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.question-bank-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: stretch !important;
  padding: 18px !important;
  border-left-width: 4px !important;
  border-radius: 18px !important;
}

.question-bank-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.question-bank-title-row h4 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: 0;
}

.question-bank-status {
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.question-bank-status.new {
  background: rgba(148, 163, 184, 0.12);
  color: #64748b;
}

.question-bank-status.training {
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
}

.question-bank-status.mastered {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.question-bank-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.question-bank-metrics span {
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.92);
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.question-bank-metrics b {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.question-bank-missing {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.question-bank-missing strong {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

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

.question-bank-missing em {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.question-bank-card .question-card-actions {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 118px;
}

.question-bank-card .question-card-actions .small-btn {
  min-height: 40px;
  border-radius: 12px;
}

.question-list-drawer .question-bank-overview,
.question-list-drawer .question-source-tabs,
.question-list-drawer .toolbar,
.question-list-drawer .feedback-box,
.question-list-drawer .question-list {
  margin-left: 16px;
  margin-right: 16px;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-training-center,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-training-pack,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-training-card,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ability-domain,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ability-point,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-mistake-empty,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-mistake-card,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-list-drawer,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-training-card.primary {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-recommend-card {
  background:
    radial-gradient(circle at 82% 18%, rgba(91, 140, 255, 0.2), transparent 30%),
    linear-gradient(135deg, rgba(124, 77, 255, 0.18), rgba(15, 23, 42, 0.96)) !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-why {
  border-color: rgba(91, 140, 255, 0.24) !important;
  background: rgba(15, 23, 42, 0.72) !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-why-head strong,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-why-result > strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-why-head > em,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-why-finding {
  border-color: rgba(148, 163, 184, 0.18) !important;
  background: rgba(30, 41, 59, 0.72) !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-why-head > em,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-why-finding > span,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-why-result > span,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-why-result > small,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-why-judgement {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-why-judgement {
  background: rgba(124, 77, 255, 0.12) !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-recommend-head h4,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-training-card h5,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-training-card p b,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-training-card small b,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ability-domain h5,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ability-point span,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-training-title h4,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-training-pack strong,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-mistake-empty strong,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-mistake-card h5,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-bank-title-row h4,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-list-summary {
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-recommend-head p,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-training-card p,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-training-card small,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-training-pack p,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-training-pack-stats span,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-training-path li,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-mistake-empty p,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-mistake-card p,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-ai-training-meta em {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-bank-metrics span,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-bank-missing {
  background: rgba(30, 41, 59, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-bank-metrics b,
html[data-theme="dark"] body[data-active-panel="question-bank"] .question-bank-missing strong {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-mistake-missing {
  background: rgba(30, 41, 59, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-project-pack-detail div {
  background: rgba(30, 41, 59, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-theme="dark"] body[data-active-panel="question-bank"] .question-project-pack-detail strong {
  color: #f8fafc !important;
}

@media (max-width: 1280px) {
  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-ai-recommend-grid,
  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-training-packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-ai-training-card.primary {
    grid-column: 1 / -1;
  }

  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-ability-map {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-mistake-replay {
    grid-template-columns: 1fr;
  }

  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-mistake-empty {
    grid-template-columns: 1fr;
  }

  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-list-drawer .toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-list-drawer .toolbar input,
  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-list-drawer .toolbar .primary-btn {
    grid-column: 1 / -1;
  }

  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-bank-card {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-bank-card .question-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-bank-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .question-ai-why-head,
  .question-training-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .question-ai-why-findings {
    grid-template-columns: 1fr;
  }
}


/* source: v5-architecture-lock.css */
/* HW Interview OS V5 architecture lock.
   Keeps the top-level IA stable: 首页工作台 / 面试空间 / 工程空间 / 实验室 / 我的. */

html:not(.react-student-embedded) .sidebar .menu {
  gap: 12px !important;
}

html:not(.react-student-embedded) .sidebar .menu-item {
  min-height: 52px !important;
  padding: 0 20px !important;
  border-radius: 14px !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) .sidebar .menu-item:hover {
  transform: none !important;
}

html:not(.react-student-embedded) .sidebar .menu-item.active {
  color: #fff !important;
  background: linear-gradient(135deg, #4d8dff 0%, #b536ff 100%) !important;
  box-shadow: 0 18px 36px rgba(103, 80, 255, 0.28) !important;
}

/* Phase 1: the home page becomes a daily engineering workbench, not a data dashboard. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .main {
  background: #f3f6fb !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-workspace {
  padding: 28px clamp(24px, 4vw, 64px) 48px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > :not(.engineering-workbench-task):not(.engineering-ai-assistant):not(.engineering-growth-card):not(.engineering-continue-card):not(.engineering-training-loop-card) {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 0.88fr) minmax(520px, 1.12fr) !important;
  gap: 24px !important;
  min-height: 420px !important;
  margin: 42px auto 0 !important;
  padding: clamp(28px, 4vw, 52px) !important;
  border: 1px solid rgba(124, 92, 255, 0.18) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(124, 92, 255, 0.18), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96)) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.1) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .eyebrow {
  width: fit-content !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(124, 92, 255, 0.12) !important;
  color: #6d4aff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task h1 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy p:not(.eyebrow) {
  max-width: 520px !important;
  margin: 0 !important;
  color: #475569 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy strong {
  color: #6d4aff !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card {
  min-height: 112px !important;
  padding: 22px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card span {
  display: block !important;
  margin-bottom: 8px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card strong {
  display: block !important;
  color: #0f172a !important;
  font-size: clamp(22px, 2.2vw, 32px) !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card em,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card b,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card li {
  color: #64748b !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card ul {
  margin: 12px 0 0 !important;
  padding-left: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .primary-btn {
  width: 100% !important;
  min-height: 56px !important;
  margin-top: 18px !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #6d4aff, #3b82f6) !important;
  box-shadow: 0 18px 34px rgba(109, 74, 255, 0.25) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-continue-card {
  min-height: 230px !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant {
  grid-column: span 4 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card {
  grid-column: span 5 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-continue-card {
  grid-column: span 3 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-training-loop-card {
  grid-column: 1 / -1 !important;
  min-height: 220px !important;
  padding: 24px !important;
  border: 1px solid rgba(124, 92, 255, 0.18) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 8% 20%, rgba(124, 92, 255, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-head .eyebrow {
  margin: 0 0 8px !important;
  color: #7c5cff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-head h2 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-head span {
  display: block !important;
  margin-top: 8px !important;
  color: #64748b !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-head .ghost-btn {
  flex: 0 0 auto !important;
  min-width: 168px !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #6d4aff, #3b82f6) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-flow {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-step {
  position: relative !important;
  min-height: 118px !important;
  padding: 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  text-align: left !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-step:not(:last-child)::after {
  content: "→" !important;
  position: absolute !important;
  top: 50% !important;
  right: -11px !important;
  z-index: 2 !important;
  transform: translateY(-50%) !important;
  color: #7c5cff !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-step span,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-step strong,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-step em {
  display: block !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-step span {
  width: fit-content !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  color: #6d4aff !important;
  background: rgba(124, 92, 255, 0.12) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-step strong {
  margin-top: 12px !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-step em {
  margin-top: 8px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant .eyebrow,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-continue-card .eyebrow {
  margin: 0 0 12px !important;
  color: #7c5cff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant h2,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-continue-card h2 {
  margin: 0 0 18px !important;
  color: #0f172a !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant .landing-xiaowen-advice-grid {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant .landing-xiaowen-advice-grid span {
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant .landing-xiaowen-advice-grid small {
  display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant .landing-xiaowen-advice-grid b {
  display: block !important;
  margin-top: 4px !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant .ghost-btn,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-continue-card .ghost-btn {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #6d4aff, #3b82f6) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card .landing-weekly-growth-head {
  margin-bottom: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card .landing-weekly-growth-list {
  display: grid !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card .landing-weekly-growth-item {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 52px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card .landing-weekly-growth-item span,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card .landing-weekly-growth-item p,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card .landing-weekly-growth-item strong {
  margin: 0 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card .landing-weekly-growth-item span {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card .landing-weekly-growth-item p {
  color: #64748b !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card .landing-weekly-growth-item strong {
  color: #16a34a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-continue-progress {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-continue-progress span,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-continue-progress strong {
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-continue-progress i {
  grid-column: 1 / -1 !important;
  height: 9px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e2e8f0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-continue-progress b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #22c55e, #3b82f6) !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-continue-card,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-training-loop-card {
    grid-column: 1 / -1 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-loop-step::after {
    display: none !important;
  }
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .main,
html:not(.react-student-embedded) body[data-active-panel="project-practice"] .main {
  background: #f3f6fb !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-shell,
body[data-active-panel="project-practice"] .project-practice-shell {
  width: min(100%, 1560px) !important;
  margin: 0 auto !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-page,
body[data-active-panel="project-practice"] .project-practice-page {
  padding: 24px 28px 48px !important;
}

body[data-active-panel="engineering-lab"] .project-home-title,
body[data-active-panel="project-practice"] .project-home-title {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 0 20px !important;
}

body[data-active-panel="engineering-lab"] .project-home-title p,
body[data-active-panel="project-practice"] .project-home-title p {
  margin: 0 0 8px !important;
  color: #7c5cff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body[data-active-panel="engineering-lab"] .project-home-title h2,
body[data-active-panel="project-practice"] .project-home-title h2 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(34px, 3vw, 48px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="engineering-lab"] .project-home-title > span,
body[data-active-panel="project-practice"] .project-home-title > span {
  max-width: 560px !important;
  color: #64748b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
  text-align: right !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-hero,
body[data-active-panel="project-practice"] .engineering-lab-hero {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.84fr) minmax(520px, 1.16fr) !important;
  gap: 18px !important;
  margin: 16px 0 20px !important;
  padding: 24px !important;
  border: 1px solid rgba(124, 92, 255, 0.18) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 12% 15%, rgba(124, 92, 255, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-hero-main,
body[data-active-panel="project-practice"] .engineering-lab-hero-main {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

/* Interview Space: one clean entry before the existing training cabin. */
html:not(.react-student-embedded) body[data-active-panel="interview"] .main {
  background: #f3f6fb !important;
}

html:not(.react-student-embedded) .interview-space-shell {
  width: min(100%, 1560px) !important;
  margin: 0 auto 22px !important;
  padding: 24px 28px 0 !important;
}

html:not(.react-student-embedded) .interview-space-title {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 18px !important;
}

html:not(.react-student-embedded) .interview-space-title h2 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(34px, 3vw, 48px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) .interview-space-title span {
  display: block !important;
  margin-top: 8px !important;
  color: #64748b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) .interview-space-mode-card {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.72fr) minmax(520px, 1.28fr) 150px !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: 24px !important;
  border: 1px solid rgba(124, 92, 255, 0.18) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 14% 20%, rgba(124, 92, 255, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96)) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08) !important;
}

html:not(.react-student-embedded) .interview-space-mode-copy h3 {
  margin: 0 0 10px !important;
  color: #0f172a !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) .interview-space-mode-copy p:not(.eyebrow) {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
}

html:not(.react-student-embedded) .interview-space-mode-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) .interview-space-mode-option {
  min-height: 118px !important;
  padding: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  text-align: left !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .interview-space-mode-option.is-active {
  border-color: rgba(124, 92, 255, 0.45) !important;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(59, 130, 246, 0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.14) !important;
}

html:not(.react-student-embedded) .interview-space-mode-option strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) .interview-space-mode-option span {
  display: block !important;
  margin-top: 10px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) .interview-space-start {
  align-self: stretch !important;
  border-radius: 18px !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #6d4aff, #3b82f6) !important;
}

html:not(.react-student-embedded) .interview-space-entry-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}

html:not(.react-student-embedded) .interview-space-entry-card {
  min-height: 176px !important;
  padding: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
}

html:not(.react-student-embedded) .interview-space-entry-card span {
  color: #7c5cff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) .interview-space-entry-card strong {
  display: block !important;
  margin-top: 12px !important;
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

html:not(.react-student-embedded) .interview-space-entry-card p {
  min-height: 44px !important;
  margin: 10px 0 16px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) .interview-space-entry-card .ghost-btn {
  width: 100% !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) .interview-records-panel {
  margin-top: 18px !important;
  padding: 20px !important;
  border-radius: 22px !important;
}

html:not(.react-student-embedded) .interview-weak-bank-panel {
  margin-top: 18px !important;
  padding: 20px !important;
  border-radius: 22px !important;
}

html:not(.react-student-embedded) .interview-record-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:not(.react-student-embedded) .interview-weak-bank-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:not(.react-student-embedded) .interview-weak-bank-item {
  min-height: 138px !important;
  padding: 18px !important;
  border: 1px solid rgba(124, 92, 255, 0.18) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96)) !important;
  text-align: left !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .interview-weak-bank-item span {
  display: block !important;
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) .interview-weak-bank-item strong {
  display: block !important;
  margin-top: 10px !important;
  color: #7c5cff !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html:not(.react-student-embedded) .interview-weak-bank-item em {
  display: block !important;
  margin-top: 12px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) .interview-record-item {
  padding: 18px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 18px !important;
  background: #fff !important;
}

html:not(.react-student-embedded) .interview-record-item time,
html:not(.react-student-embedded) .interview-record-item span {
  color: #7c5cff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) .interview-record-item strong {
  display: block !important;
  margin: 8px 0 !important;
  color: #0f172a !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) .interview-record-item p {
  margin: 6px 0 0 !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) .interview-space-arena-collapsed {
  display: none !important;
}

html:not(.react-student-embedded) .interview-space-arena-open {
  display: block !important;
}

@media (max-width: 1180px) {
  html:not(.react-student-embedded) .interview-space-mode-card {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) .interview-space-entry-grid,
  html:not(.react-student-embedded) .interview-record-list,
  html:not(.react-student-embedded) .interview-weak-bank-list {
    grid-template-columns: 1fr !important;
  }
}

body[data-active-panel="engineering-lab"] .engineering-lab-hero-main span,
body[data-active-panel="project-practice"] .engineering-lab-hero-main span {
  width: fit-content !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  background: rgba(124, 92, 255, 0.1) !important;
  color: #6d4aff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-hero-main h3,
body[data-active-panel="project-practice"] .engineering-lab-hero-main h3 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(28px, 2.2vw, 38px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-hero-main p,
body[data-active-panel="project-practice"] .engineering-lab-hero-main p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.7 !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-task-grid,
body[data-active-panel="project-practice"] .engineering-lab-task-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-task,
body[data-active-panel="project-practice"] .engineering-lab-task,
body[data-active-panel="engineering-lab"] .engineering-entry-card,
body[data-active-panel="project-practice"] .engineering-entry-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 166px !important;
  padding: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
  color: #0f172a !important;
  cursor: pointer !important;
  font: inherit !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-task:hover,
body[data-active-panel="project-practice"] .engineering-lab-task:hover,
body[data-active-panel="engineering-lab"] .engineering-entry-card:hover,
body[data-active-panel="project-practice"] .engineering-entry-card:hover {
  border-color: rgba(124, 92, 255, 0.42) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 34px rgba(124, 92, 255, 0.12) !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-task em,
body[data-active-panel="project-practice"] .engineering-lab-task em,
body[data-active-panel="engineering-lab"] .engineering-entry-card span,
body[data-active-panel="project-practice"] .engineering-entry-card span {
  width: fit-content !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  background: rgba(124, 92, 255, 0.1) !important;
  color: #704cff !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-task strong,
body[data-active-panel="project-practice"] .engineering-lab-task strong,
body[data-active-panel="engineering-lab"] .engineering-entry-card strong,
body[data-active-panel="project-practice"] .engineering-entry-card strong {
  color: #0f172a !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-task span,
body[data-active-panel="project-practice"] .engineering-lab-task span,
body[data-active-panel="engineering-lab"] .engineering-entry-card em,
body[data-active-panel="project-practice"] .engineering-entry-card em {
  color: #64748b !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 1.55 !important;
}

body[data-active-panel="engineering-lab"] .engineering-lab-task b,
body[data-active-panel="project-practice"] .engineering-lab-task b,
body[data-active-panel="engineering-lab"] .engineering-entry-card b,
body[data-active-panel="project-practice"] .engineering-entry-card b {
  margin-top: auto !important;
  color: #6d4aff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body[data-active-panel="engineering-lab"] .engineering-entry-grid,
body[data-active-panel="project-practice"] .engineering-entry-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 24px 0 !important;
}

body[data-active-panel="project-practice"] .engineering-asset-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 22px 0 24px !important;
}

body[data-active-panel="project-practice"] .engineering-assets-overview {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  margin: 20px 0 22px !important;
  padding: 22px !important;
  border: 1px solid rgba(124, 92, 255, 0.16) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 8% 12%, rgba(124, 92, 255, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07) !important;
}

body[data-active-panel="project-practice"] .engineering-assets-overview-head {
  display: grid !important;
  align-content: center !important;
  gap: 10px !important;
}

body[data-active-panel="project-practice"] .engineering-assets-overview-head span {
  color: #7c5cff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
}

body[data-active-panel="project-practice"] .engineering-assets-overview-head h3 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 34px !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="project-practice"] .engineering-assets-overview-head p {
  margin: 0 !important;
  max-width: 380px !important;
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.7 !important;
}

body[data-active-panel="project-practice"] .engineering-assets-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-panel="project-practice"] .engineering-asset-kpi {
  display: grid !important;
  align-content: space-between !important;
  gap: 12px !important;
  min-height: 168px !important;
  padding: 18px !important;
  text-align: left !important;
  border: 1px solid rgba(226, 232, 240, 0.94) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055) !important;
  cursor: pointer !important;
}

body[data-active-panel="project-practice"] .engineering-asset-kpi:hover {
  border-color: rgba(124, 92, 255, 0.34) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 38px rgba(124, 92, 255, 0.12) !important;
}

body[data-active-panel="project-practice"] .engineering-asset-kpi span,
body[data-active-panel="project-practice"] .engineering-asset-kpi strong,
body[data-active-panel="project-practice"] .engineering-asset-kpi em {
  display: block !important;
}

body[data-active-panel="project-practice"] .engineering-asset-kpi span {
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-panel="project-practice"] .engineering-asset-kpi strong {
  color: #0f172a !important;
  font-size: 44px !important;
  line-height: 0.95 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="project-practice"] .engineering-asset-kpi em {
  color: #64748b !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

body[data-active-panel="project-practice"] .engineering-asset-card {
  min-height: 238px !important;
  padding: 20px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(124, 92, 255, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06) !important;
}

body[data-active-panel="project-practice"] .engineering-asset-card > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  background: rgba(124, 92, 255, 0.1) !important;
  color: #6d4aff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body[data-active-panel="project-practice"] .engineering-asset-card strong {
  display: block !important;
  margin: 14px 0 12px !important;
  color: #0f172a !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="project-practice"] .engineering-asset-card p {
  margin: 8px 0 !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

body[data-active-panel="project-practice"] .engineering-asset-card p b {
  color: #0f172a !important;
  font-weight: 950 !important;
}

body[data-active-panel="project-practice"] .engineering-asset-card .ghost-btn {
  width: 100% !important;
  min-height: 40px !important;
  margin-top: 10px !important;
  border-radius: 12px !important;
  font-weight: 950 !important;
}

body[data-active-panel="project-practice"] .engineering-knowledge-card {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(124, 92, 255, 0.16), transparent 36%),
    linear-gradient(135deg, #ffffff, #f8fafc) !important;
}

body[data-active-panel="project-practice"] .engineering-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: -2px 0 4px !important;
}

body[data-active-panel="project-practice"] .engineering-card-tags em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  color: #6d4aff !important;
  background: rgba(124, 92, 255, 0.1) !important;
  border: 1px solid rgba(124, 92, 255, 0.16) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body[data-active-panel="project-practice"] .engineering-knowledge-mastery {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
  margin-top: 10px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
}

body[data-active-panel="project-practice"] .engineering-knowledge-mastery span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body[data-active-panel="project-practice"] .engineering-knowledge-mastery strong {
  margin: 0 !important;
  color: #6d4aff !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

body[data-active-panel="project-practice"] .engineering-knowledge-mastery i {
  grid-column: 1 / -1 !important;
  display: block !important;
  height: 8px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #edf2f7 !important;
}

body[data-active-panel="project-practice"] .engineering-knowledge-mastery i b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #7c5cff, #5b8cff) !important;
}

body[data-active-panel="project-practice"] .engineering-case-card {
  gap: 7px !important;
}

body[data-active-panel="project-practice"] .engineering-case-card p {
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(248, 250, 252, 0.86) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-card {
  display: grid !important;
  gap: 14px !important;
  margin-top: 16px !important;
  padding: 16px !important;
  border: 1px solid rgba(124, 77, 255, 0.18) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(124, 77, 255, 0.12), transparent 34%),
    linear-gradient(135deg, #ffffff, #f8fbff) !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-head span,
body[data-active-panel="debug-lab"] .debug-next-training-card span {
  display: block !important;
  color: #7c4dff !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-head strong {
  display: block !important;
  margin-top: 4px !important;
  color: #0f172a !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 1000 !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-head em {
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(124, 77, 255, 0.1) !important;
  color: #6d3df3 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-item {
  display: grid !important;
  gap: 8px !important;
  min-height: 166px !important;
  padding: 13px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 16px !important;
  background: #fff !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-item > span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-item strong {
  color: #0f172a !important;
  font-size: 34px !important;
  line-height: 0.95 !important;
  font-weight: 1000 !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-item.warning strong {
  color: #f59e0b !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-item.danger strong {
  color: #ef4444 !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-item i {
  display: block !important;
  height: 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #edf2f7 !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-item i b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #7c4dff, #5b8cff) !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-item.warning i b {
  background: linear-gradient(90deg, #f59e0b, #fb7185) !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-item.danger i b {
  background: linear-gradient(90deg, #ef4444, #f97316) !important;
}

body[data-active-panel="debug-lab"] .debug-growth-score-item p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 850 !important;
}

body[data-active-panel="debug-lab"] .debug-next-training-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 14px !important;
  align-items: center !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(124, 77, 255, 0.18) !important;
  background: rgba(124, 77, 255, 0.08) !important;
}

body[data-active-panel="debug-lab"] .debug-next-training-card strong {
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
}

body[data-active-panel="debug-lab"] .debug-next-training-card p {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 850 !important;
}

body[data-active-panel="debug-lab"] .debug-next-training-card button {
  grid-row: 1 / span 2 !important;
  grid-column: 2 !important;
}

/* V5 global Feishu-like shell: topbar = logo/search/xiaowen/user, sidebar = primary nav, content = work area. */
html:not(.react-student-embedded) body .shell {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  background: #f3f6fb !important;
}

html:not(.react-student-embedded) body .main {
  min-width: 0 !important;
  height: 100vh !important;
  overflow: auto !important;
  padding: 18px 24px 32px !important;
  background: #f3f6fb !important;
}

html:not(.react-student-embedded) body .sidebar .brand {
  min-height: 78px !important;
  padding: 18px 18px 10px !important;
  justify-content: flex-end !important;
}

html:not(.react-student-embedded) body .sidebar .brand-head.brand-head--main {
  display: none !important;
}

html:not(.react-student-embedded) body .sidebar #sidebarToggle.sidebar-toggle {
  position: static !important;
  width: 42px !important;
  height: 42px !important;
  margin-left: auto !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  background: rgba(15, 23, 42, 0.2) !important;
  color: #e2e8f0 !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) body .topbar,
html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar,
html:not(.react-student-embedded) body:has(.landing-workspace.active) .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: minmax(230px, 0.72fr) minmax(360px, 1.25fr) minmax(290px, 0.8fr) !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  min-height: 74px !important;
  margin: 0 0 22px !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(18px) !important;
}

html:not(.react-student-embedded) body .topbar-left,
html:not(.react-student-embedded) body .topbar-center,
html:not(.react-student-embedded) body .topbar-right,
html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-left,
html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-center,
html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-right {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

html:not(.react-student-embedded) body .topbar-left {
  justify-content: flex-start !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body .topbar-center {
  justify-content: center !important;
}

html:not(.react-student-embedded) body .topbar-right {
  justify-content: flex-end !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) body .global-topbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 126px !important;
  height: 46px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(226, 232, 240, 0.88) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body .global-topbar-brand img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

html:not(.react-student-embedded) body .global-topbar-brand span,
html:not(.react-student-embedded) body .global-topbar-user span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html:not(.react-student-embedded) body .global-topbar-brand strong,
html:not(.react-student-embedded) body .global-topbar-user strong {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body .global-topbar-brand em,
html:not(.react-student-embedded) body .global-topbar-user em {
  color: #64748b !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body .topbar-title-stack {
  min-width: 0 !important;
}

html:not(.react-student-embedded) body .topbar-center {
  position: relative !important;
  min-width: 0 !important;
}

html:not(.react-student-embedded) body .topbar h2,
html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar h2 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body .topbar-search,
html:not(.react-student-embedded) body[data-active-panel="landing"] .topbar-search {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: min(720px, 100%) !important;
  height: 46px !important;
  padding: 4px 6px 4px 10px !important;
  border: 1px solid rgba(203, 213, 225, 0.98) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.02) !important;
}

html:not(.react-student-embedded) body .topbar-search > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 9px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body .topbar-search input,
html:not(.react-student-embedded) body[data-active-panel="landing"] #topbarCommandInput {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body .topbar-search-submit {
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #6d4aff !important;
  color: #fff !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body .topbar-search-submit:disabled {
  display: none !important;
}

html:not(.react-student-embedded) body .global-ai-search-panel {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  width: min(760px, calc(100vw - 420px)) !important;
  min-width: 520px !important;
  transform: translateX(-50%) !important;
  z-index: 220 !important;
  padding: 16px !important;
  border: 1px solid rgba(203, 213, 225, 0.98) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: blur(18px) !important;
}

html:not(.react-student-embedded) body .global-ai-search-panel[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body .global-ai-search-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 2px 2px 12px !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
}

html:not(.react-student-embedded) body .global-ai-search-head span {
  color: #7c3aed !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
}

html:not(.react-student-embedded) body .global-ai-search-head strong {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
}

html:not(.react-student-embedded) body .global-ai-search-query {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 14px 0 !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(45, 212, 191, 0.08)) !important;
}

html:not(.react-student-embedded) body .global-ai-search-query span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body .global-ai-search-query strong {
  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
}

html:not(.react-student-embedded) body .global-ai-search-results {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body .global-ai-result-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
  min-height: 142px !important;
  padding: 15px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06) !important;
}

html:not(.react-student-embedded) body .global-ai-result-card.is-primary {
  border-color: rgba(124, 58, 237, 0.36) !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(59, 130, 246, 0.08)) !important;
}

html:not(.react-student-embedded) body .global-ai-result-card span {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body .global-ai-result-card strong {
  display: block !important;
  margin-top: 10px !important;
  color: #0f172a !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 1000 !important;
}

html:not(.react-student-embedded) body .global-ai-result-card p {
  margin: 8px 0 0 !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body .global-ai-result-card em {
  display: block !important;
  margin-top: 8px !important;
  color: #7c3aed !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body .global-ai-result-card button {
  min-width: 96px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #6d4aff !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(109, 74, 255, 0.2) !important;
}

html:not(.react-student-embedded) body .global-ai-result-card:not(.is-primary) button {
  background: #f8fafc !important;
  color: #4f46e5 !important;
  border: 1px solid rgba(199, 210, 254, 0.95) !important;
  box-shadow: none !important;
}

/* V5 Interview Space: 飞书会议式入口 + 左画像 / 中问题 / 右小问AI 三栏。 */
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-space-title span {
  max-width: 680px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-space-mode-card {
  grid-template-columns: minmax(280px, 0.68fr) minmax(560px, 1.32fr) 156px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-space-mode-card .interview-space-mode-copy h3 {
  font-size: 34px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-space-training-type-options .interview-space-mode-option {
  position: relative !important;
  min-height: 132px !important;
  padding: 20px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-space-training-type-options .interview-space-mode-option::before {
  content: "" !important;
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  margin-bottom: 14px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(124, 92, 255, 0.28) !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 6px #fff !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-space-training-type-options .interview-space-mode-option.is-active::before {
  background: #6d4aff !important;
  border-color: #6d4aff !important;
  box-shadow: inset 0 0 0 6px #fff, 0 0 0 5px rgba(109, 74, 255, 0.12) !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-space-entry-grid {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-main-dashboard {
  grid-row: 2 / 3 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 22%) minmax(0, 52%) minmax(300px, 26%) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 16px !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-candidate-profile-column,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-dashboard {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 18px !important;
  border-radius: 22px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card .section-head {
  margin-bottom: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-dashboard {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-dashboard section {
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  background: #fff !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-dashboard span {
  display: block !important;
  margin-bottom: 8px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-dashboard strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 1000 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-dashboard p,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-dashboard em {
  display: block !important;
  margin: 6px 0 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-tags b {
  padding: 6px 9px !important;
  border-radius: 999px !important;
  background: #f3efff !important;
  color: #6d4aff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-form,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-resume-sync-card,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewActiveResumeCard {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-copilot-card,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-copilot-card .section-head h3::after {
  content: none !important;
  display: block !important;
  margin-top: 4px !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}

@media (max-width: 1280px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-main-dashboard {
    grid-template-columns: 1fr !important;
    overflow-y: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card,
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card,
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-copilot-card {
    grid-column: 1 / 2 !important;
    height: auto !important;
  }
}

html:not(.react-student-embedded) body .global-topbar-ai-btn,
html:not(.react-student-embedded) body .global-topbar-user {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-height: 44px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body .global-topbar-ai-btn::before {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12) !important;
}

html:not(.react-student-embedded) body .global-topbar-ai-btn span {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body .global-topbar-ai-btn em {
  color: #7c3aed !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body .global-topbar-user img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  object-position: center 43% !important;
  flex: 0 0 auto !important;
}

html:not(.react-student-embedded) body .debug-topbar-actions[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body .panel.active {
  max-width: 1560px !important;
  margin: 0 auto !important;
}

/* V5.4 personal OS: keep Home as a daily workbench and move dense analysis into My. */
body[data-active-panel="landing"] [data-home-module-key="welcome"],
body[data-active-panel="landing"] [data-home-module-key="priority"],
body[data-active-panel="landing"] [data-home-module-key="recommendation"],
body[data-active-panel="landing"] [data-home-module-key="route"],
body[data-active-panel="landing"] [data-home-module-key="briefing"],
body[data-active-panel="landing"] [data-home-module-key="hardware"],
body[data-active-panel="landing"] [data-home-module-key="questions"],
body[data-active-panel="landing"] [data-home-module-key="achievement"],
body[data-active-panel="landing"] [data-home-module-key="special"],
body[data-active-panel="landing"] [data-home-module-key="coach"],
body[data-active-panel="landing"] [data-home-module-key="analysis"] {
  display: none !important;
}

body[data-active-panel="landing"] .landing-workspace.active,
body[data-active-panel="landing"] .panel[data-panel="landing"].active {
  min-height: calc(100vh - 118px) !important;
}

body[data-active-panel="landing"] .landing-home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(300px, 0.82fr) !important;
  grid-template-areas:
    "action action xiaowen"
    "growth growth continue"
    "loop loop loop" !important;
  grid-auto-rows: minmax(220px, auto) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

body[data-active-panel="landing"] [data-home-module-key="v5-command-center"] {
  grid-area: action !important;
}

body[data-active-panel="landing"] [data-home-module-key="ai-advice"] {
  grid-area: xiaowen !important;
}

body[data-active-panel="landing"] [data-home-module-key="growth"] {
  grid-area: growth !important;
}

body[data-active-panel="landing"] [data-home-module-key="continue-task"] {
  grid-area: continue !important;
}

body[data-active-panel="landing"] [data-home-module-key="training-loop"] {
  grid-area: loop !important;
}

body[data-active-panel="landing"] .engineering-workbench-task {
  min-height: 276px !important;
  padding: 28px !important;
  border-radius: 28px !important;
}

body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy h1 {
  margin: 8px 0 10px !important;
  max-width: 720px !important;
  color: #0f172a !important;
  font-size: clamp(32px, 3vw, 48px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy p:not(.eyebrow) {
  max-width: 700px !important;
  color: #475569 !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.65 !important;
}

body[data-active-panel="landing"] .landing-v5-command-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}

body[data-active-panel="landing"] .landing-v5-command-card {
  min-height: 118px !important;
  padding: 18px !important;
  border-radius: 18px !important;
}

body[data-active-panel="landing"] .landing-v5-next-card .primary-btn {
  width: 100% !important;
  min-height: 44px !important;
  margin-top: 10px !important;
  border-radius: 14px !important;
}

body[data-active-panel="landing"] .engineering-ai-assistant {
  min-height: 276px !important;
  padding: 24px !important;
  border-radius: 28px !important;
  display: grid !important;
  align-content: space-between !important;
  gap: 16px !important;
}

body[data-active-panel="landing"] .engineering-ai-assistant h2 {
  margin: 8px 0 16px !important;
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-advice-grid {
  display: grid !important;
  gap: 10px !important;
}

body[data-active-panel="landing"] .landing-xiaowen-advice-grid span {
  display: grid !important;
  gap: 5px !important;
  min-height: 58px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-advice-grid small {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body[data-active-panel="landing"] .landing-xiaowen-advice-grid b {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

body[data-active-panel="landing"] .engineering-growth-card,
body[data-active-panel="landing"] .engineering-continue-card {
  min-height: 220px !important;
  padding: 24px !important;
  border-radius: 28px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-head strong {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item {
  min-height: 122px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item span,
body[data-active-panel="landing"] .landing-weekly-growth-item p,
body[data-active-panel="landing"] .landing-weekly-growth-item strong {
  display: block !important;
  margin: 0 !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item span {
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item p {
  margin-top: 12px !important;
  color: #0f172a !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body[data-active-panel="landing"] .landing-weekly-growth-item strong {
  margin-top: 12px !important;
  color: #16a34a !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

body[data-active-panel="landing"] .engineering-continue-card {
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  gap: 14px !important;
}

body[data-active-panel="landing"] .engineering-training-loop-card {
  min-height: 236px !important;
  padding: 24px !important;
  border-radius: 28px !important;
}

body[data-active-panel="landing"] .engineering-continue-stack {
  display: grid !important;
  gap: 12px !important;
}

body[data-active-panel="landing"] .engineering-continue-task {
  padding: 14px !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body[data-active-panel="landing"] .engineering-continue-task h2 {
  margin: 0 0 10px !important;
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="landing"] .engineering-continue-card .ghost-btn {
  min-height: 42px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
}

body[data-active-panel="my"] .engineer-dossier-page {
  display: grid !important;
  gap: 22px !important;
}

body[data-active-panel="my"] .engineer-dossier-hero {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.1fr) minmax(180px, 0.55fr) minmax(320px, 1fr) !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 210px !important;
  padding: 28px !important;
  border: 1px solid rgba(124, 92, 255, 0.16) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(124, 92, 255, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08) !important;
}

body[data-active-panel="my"] .engineer-dossier-profile {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

body[data-active-panel="my"] .engineer-dossier-avatar {
  width: 92px !important;
  height: 92px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 3px solid rgba(124, 92, 255, 0.26) !important;
  border-radius: 999px !important;
  background: #ede9fe !important;
  box-shadow: 0 16px 32px rgba(124, 92, 255, 0.16) !important;
  cursor: pointer !important;
}

body[data-active-panel="my"] .engineer-dossier-avatar img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center 43% !important;
}

body[data-active-panel="my"] .engineer-dossier-profile h2 {
  margin: 6px 0 8px !important;
  color: #0f172a !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="my"] .engineer-dossier-profile p:last-child,
body[data-active-panel="my"] .engineer-dossier-summary p,
body[data-active-panel="my"] .engineer-dossier-note {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.65 !important;
}

body[data-active-panel="my"] .engineer-dossier-score {
  min-height: 148px !important;
  padding: 20px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(34, 197, 94, 0.08)) !important;
  border: 1px solid rgba(124, 92, 255, 0.18) !important;
}

body[data-active-panel="my"] .engineer-dossier-score span,
body[data-active-panel="my"] .engineer-dossier-summary span {
  display: block !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-panel="my"] .engineer-dossier-score strong {
  display: block !important;
  margin: 8px 0 !important;
  color: #7048ff !important;
  font-size: 54px !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

body[data-active-panel="my"] .engineer-dossier-score em {
  display: inline-flex !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  background: rgba(34, 197, 94, 0.12) !important;
  color: #059669 !important;
  font-style: normal !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-panel="my"] .engineer-dossier-summary {
  display: grid !important;
  gap: 12px !important;
  padding: 20px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
}

body[data-active-panel="my"] .engineer-dossier-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body[data-active-panel="my"] .engineer-dossier-card {
  min-height: 210px !important;
  padding: 22px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.055) !important;
}

body[data-active-panel="my"] .engineer-dossier-wide {
  grid-column: span 2 !important;
}

body[data-active-panel="my"] .engineer-dossier-skill-list,
body[data-active-panel="my"] .engineer-project-chip-row,
body[data-active-panel="my"] .engineer-hidden-home-list,
body[data-active-panel="my"] .xiaowen-ai-capability-list,
body[data-active-panel="my"] .engineer-v5-roadmap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

body[data-active-panel="my"] .engineer-dossier-skill-list span {
  flex: 1 1 110px !important;
  min-height: 86px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body[data-active-panel="my"] .engineer-dossier-skill-list b,
body[data-active-panel="my"] .engineer-dossier-skill-list strong {
  display: block !important;
}

body[data-active-panel="my"] .engineer-dossier-skill-list b {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-panel="my"] .engineer-dossier-skill-list strong {
  margin-top: 8px !important;
  color: #0f172a !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

body[data-active-panel="my"] .engineer-project-chip-row span,
body[data-active-panel="my"] .engineer-hidden-home-list span,
body[data-active-panel="my"] .xiaowen-ai-capability-list span,
body[data-active-panel="my"] .engineer-v5-roadmap span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: rgba(124, 92, 255, 0.1) !important;
  color: #5b3df5 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-panel="my"] .engineer-asset-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-active-panel="my"] .engineer-asset-metrics span {
  min-height: 92px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(124, 92, 255, 0.08)) !important;
  border: 1px solid rgba(34, 197, 94, 0.14) !important;
}

body[data-active-panel="my"] .engineer-asset-metrics strong,
body[data-active-panel="my"] .engineer-asset-metrics em {
  display: block !important;
}

body[data-active-panel="my"] .engineer-asset-metrics strong {
  color: #0f172a !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

body[data-active-panel="my"] .engineer-asset-metrics em {
  margin-top: 8px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body[data-active-panel="my"] .engineer-schema-list {
  display: grid !important;
  gap: 10px !important;
}

body[data-active-panel="my"] .engineer-growth-proof-timeline,
body[data-active-panel="my"] .engineer-proof-list {
  display: grid !important;
  gap: 12px !important;
}

body[data-active-panel="my"] .engineer-growth-proof-timeline span,
body[data-active-panel="my"] .engineer-proof-list span {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 86px minmax(70px, 0.35fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98)) !important;
}

body[data-active-panel="my"] .engineer-growth-proof-timeline span::before {
  content: "" !important;
  position: absolute !important;
  left: -1px !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #7c4dff, #22c55e) !important;
}

body[data-active-panel="my"] .engineer-growth-proof-timeline b,
body[data-active-panel="my"] .engineer-proof-list b {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body[data-active-panel="my"] .engineer-growth-proof-timeline strong {
  display: inline-flex !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(124, 77, 255, 0.1) !important;
  color: #5b21b6 !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
}

body[data-active-panel="my"] .engineer-growth-proof-timeline em,
body[data-active-panel="my"] .engineer-proof-list em {
  color: #334155 !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

body[data-active-panel="my"] .engineer-proof-list span {
  grid-template-columns: 90px minmax(0, 1fr) !important;
}

body[data-active-panel="my"] .engineer-proof-list b {
  color: #0f172a !important;
}

body[data-active-panel="my"] .engineer-schema-list span {
  display: grid !important;
  gap: 4px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body[data-active-panel="my"] .engineer-schema-list b {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-panel="my"] .engineer-schema-list em {
  color: #64748b !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

body[data-active-panel="my"] .engineer-v5-roadmap span b {
  margin-right: 6px !important;
  color: #0f172a !important;
}

@media (max-width: 1180px) {
  body[data-active-panel="engineering-lab"] .engineering-lab-hero,
  body[data-active-panel="project-practice"] .engineering-lab-hero,
  body[data-active-panel="project-practice"] .engineering-assets-overview,
  body[data-active-panel="engineering-lab"] .engineering-entry-grid,
  body[data-active-panel="project-practice"] .engineering-entry-grid,
  body[data-active-panel="project-practice"] .engineering-asset-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-active-panel="project-practice"] .engineering-assets-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-active-panel="my"] .engineer-dossier-hero,
  body[data-active-panel="my"] .engineer-dossier-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-active-panel="my"] .engineer-dossier-wide {
    grid-column: auto !important;
  }

  body[data-active-panel="engineering-lab"] .engineering-lab-task-grid,
  body[data-active-panel="project-practice"] .engineering-lab-task-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body[data-active-panel="project-practice"] .engineering-assets-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* V5 Audio Review: Feishu-style timeline + per-question review */
body[data-active-panel="audio"] .audio-dialogue-timeline {
  position: relative !important;
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
}

body[data-active-panel="audio"] .audio-dialogue-timeline::before {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #7c5cff, #22c55e, #5b8cff) !important;
  opacity: 0.46 !important;
}

body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item {
  position: relative !important;
  isolation: isolate !important;
  grid-template-columns: 52px minmax(0, 1fr) 46px !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  padding: 10px 10px 10px 28px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background: rgba(255, 255, 255, 0.88) !important;
}

body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  z-index: 1 !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
  border: 3px solid #ffffff !important;
  background: #7c5cff !important;
  box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.28), 0 8px 18px rgba(124, 92, 255, 0.18) !important;
  transform: translateY(-50%) !important;
}

body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item.warn::before {
  background: #fb923c !important;
}

body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item.good::before {
  background: #22c55e !important;
}

body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item.info::before {
  background: #5b8cff !important;
}

body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item.current {
  border-color: rgba(124, 92, 255, 0.46) !important;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.14), rgba(91, 140, 255, 0.08)) !important;
  box-shadow: 0 14px 28px rgba(124, 92, 255, 0.12) !important;
}

body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item .audio-timeline-time {
  color: #6d5dfc !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item .audio-timeline-copy strong {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item .audio-timeline-copy em,
body[data-active-panel="audio"] .audio-dialogue-timeline > button.audio-cabin-timeline-item small {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body[data-active-panel="audio"] .audio-review-question-detail {
  display: grid !important;
  gap: 16px !important;
  padding: 18px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(124, 92, 255, 0.18) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06) !important;
}

body[data-active-panel="audio"] .audio-review-question-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

body[data-active-panel="audio"] .audio-review-question-head span {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  color: #6d5dfc !important;
  background: rgba(124, 92, 255, 0.1) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body[data-active-panel="audio"] .audio-review-question-head h3 {
  margin: 10px 0 6px !important;
  color: #0f172a !important;
  font-size: 24px !important;
  line-height: 1.16 !important;
}

body[data-active-panel="audio"] .audio-review-question-head p {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.6 !important;
}

body[data-active-panel="audio"] .audio-knowledge-save-btn {
  flex: 0 0 auto !important;
  min-width: 112px !important;
  border-color: rgba(124, 92, 255, 0.24) !important;
  color: #6d5dfc !important;
  background: rgba(124, 92, 255, 0.08) !important;
  font-weight: 950 !important;
}

body[data-active-panel="audio"] .audio-review-answer-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-panel="audio"] .audio-review-answer-block {
  min-height: 176px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

body[data-active-panel="audio"] .audio-review-answer-block strong {
  display: block !important;
  margin-bottom: 10px !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body[data-active-panel="audio"] .audio-review-answer-block p {
  margin: 0 !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
}

body[data-active-panel="audio"] .audio-review-answer-block.mine {
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
}

body[data-active-panel="audio"] .audio-review-answer-block.coach {
  border-color: rgba(251, 146, 60, 0.22) !important;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.92), #ffffff) !important;
}

body[data-active-panel="audio"] .audio-review-answer-block.standard {
  border-color: rgba(34, 197, 94, 0.2) !important;
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.92), #ffffff) !important;
}

@media (max-width: 1180px) {
  body[data-active-panel="audio"] .audio-review-answer-grid {
    grid-template-columns: 1fr !important;
  }
}


/* source: companion-repair.css */
/* XiaoWen geometry repair — isolated from page and dashboard layouts. */
html:not(.react-student-embedded) body #companionDock.companion-dock {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 1500 !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-collapsed {
  display: block !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-collapsed #companionMini {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 !important;
  place-items: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #6366f1, #7c3aed 58%, #ec4899) !important;
  background-image: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage::before {
  content: "问" !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage::after {
  display: none !important;
  content: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-collapsed #companionMiniAvatarStage {
  position: absolute !important;
  inset: 4px !important;
  display: block !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-collapsed #companionMiniCharacter {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded {
  display: block !important;
  width: min(390px, calc(100vw - 32px)) !important;
  min-width: min(390px, calc(100vw - 32px)) !important;
  max-width: min(390px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 48px) !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded #companionMini {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded #companionPanel.companion-panel {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(620px, calc(100vh - 48px)) !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-radius: 20px !important;
  transform: none !important;
}

html:not(.react-student-embedded) body #companionPanel.companion-panel[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-fallback {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  width: calc(100% - 28px) !important;
  min-height: 160px !important;
  margin: 14px !important;
  padding: 12px 16px 0 !important;
  align-items: end !important;
  overflow: hidden !important;
  border: 1px solid rgba(124, 58, 237, 0.16) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(59, 130, 246, 0.08)) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-fallback-glow {
  position: absolute !important;
  left: 20px !important;
  bottom: 8px !important;
  width: 116px !important;
  height: 116px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.3), transparent 70%) !important;
  filter: blur(8px) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-fallback img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 124px !important;
  height: 148px !important;
  align-self: end !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: drop-shadow(0 10px 16px rgba(45, 35, 90, 0.2)) !important;
  transform-origin: 50% 100% !important;
  animation: companionModelBreathe 3.4s ease-in-out infinite !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-fallback > span {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  min-height: 72px !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: center !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-fallback > span b {
  color: #172033 !important;
  font-size: 20px !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #companionPanel .companion-model-fallback > span b {
  color: #f1f5f9 !important;
}

@keyframes companionModelBreathe {
  0%, 100% { transform: translateY(2px) scale(1); }
  50% { transform: translateY(-3px) scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.react-student-embedded) body #companionPanel .companion-model-fallback img {
    animation: none !important;
  }
}

@media (max-width: 700px) {
  html:not(.react-student-embedded) body #companionDock.companion-dock {
    right: 12px !important;
    bottom: 12px !important;
  }

  html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded {
    width: calc(100vw - 24px) !important;
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded #companionPanel.companion-panel {
    max-height: calc(100vh - 24px) !important;
  }
}


/* source: sidebar-theme-sync.css */
/* Sidebar follows the global automatic day/night theme. */
html:not([data-theme="dark"]):not(.react-student-embedded) body .shell > .sidebar {
  color: #20324a !important;
  background:
    radial-gradient(circle at 40% 4%, rgba(37, 99, 235, 0.1), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f5f8fc 58%, #edf3fa 100%) !important;
  border-right: 1px solid rgba(71, 103, 139, 0.14) !important;
  box-shadow: 8px 0 28px rgba(31, 62, 96, 0.07) !important;
}

html:not([data-theme="dark"]):not(.react-student-embedded) body .sidebar .brand-subtitle-text,
html:not([data-theme="dark"]):not(.react-student-embedded) body .sidebar .menu-item,
html:not([data-theme="dark"]):not(.react-student-embedded) body .sidebar .menu-item-label,
html:not([data-theme="dark"]):not(.react-student-embedded) body .sidebar .menu-item-icon {
  color: #526b86 !important;
}

html:not([data-theme="dark"]):not(.react-student-embedded) body .sidebar .sidebar-toggle {
  color: #39536f !important;
  background: rgba(230, 238, 248, 0.92) !important;
  box-shadow: 0 6px 18px rgba(30, 64, 99, 0.1) !important;
}

html:not([data-theme="dark"]):not(.react-student-embedded) body .sidebar .menu-item:hover {
  color: #174f94 !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

html:not([data-theme="dark"]):not(.react-student-embedded) body .sidebar .menu-item.active {
  color: #ffffff !important;
  background: linear-gradient(90deg, #2563eb, #7c3aed) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24) !important;
}

html:not([data-theme="dark"]):not(.react-student-embedded) body .sidebar .menu-item.active .menu-item-label,
html:not([data-theme="dark"]):not(.react-student-embedded) body .sidebar .menu-item.active .menu-item-icon {
  color: #ffffff !important;
}

html:not([data-theme="dark"]):not(.react-student-embedded) body .sidebar .sidebar-account-card,
html:not([data-theme="dark"]):not(.react-student-embedded) body .sidebar .sidebar-account-button {
  color: #20324a !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(71, 103, 139, 0.16) !important;
  box-shadow: 0 10px 24px rgba(31, 62, 96, 0.08) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .shell > .sidebar {
  color: #dbe7f5 !important;
  background:
    radial-gradient(circle at 42% 5%, rgba(91, 75, 220, 0.22), transparent 32%),
    linear-gradient(180deg, #111b38 0%, #081426 56%, #06101f 100%) !important;
  border-right: 1px solid rgba(148, 163, 184, 0.12) !important;
  box-shadow: 8px 0 30px rgba(2, 8, 23, 0.26) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .menu-item,
html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .menu-item-label,
html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .menu-item-icon {
  color: #aebfd3 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .menu-item.active,
html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .menu-item.active .menu-item-label,
html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .menu-item.active .menu-item-icon {
  color: #ffffff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .sidebar-account-card,
html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .sidebar-account-button {
  color: #e5eef9 !important;
  background: rgba(8, 20, 38, 0.78) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}


/* source: topbar-cleanup.css */
/* Keep identity controls in one place: the sidebar account card. */
html:not(.react-student-embedded) body .shell > .main > .topbar {
  display: grid !important;
  /* Symmetric side tracks keep the search field on the visual center line. */
  grid-template-columns: minmax(140px, 210px) minmax(320px, 720px) minmax(140px, 210px) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(18px, 3vw, 52px) !important;
  min-height: 72px !important;
  padding: 0 clamp(24px, 2.5vw, 48px) !important;
}

html:not(.react-student-embedded) body .topbar-left,
html:not(.react-student-embedded) body .topbar-center,
html:not(.react-student-embedded) body .topbar-right {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body .topbar-left,
html:not(.react-student-embedded) body .topbar-right {
  display: flex !important;
  align-items: center !important;
}

html:not(.react-student-embedded) body .topbar-right {
  justify-content: flex-end !important;
}

html:not(.react-student-embedded) body .topbar-right:empty {
  display: none !important;
}

html:not(.react-student-embedded) body .topbar-right:has(> .debug-topbar-actions[hidden]) {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .shell > .main > .topbar {
  grid-template-columns: minmax(140px, 210px) minmax(320px, 720px) minmax(140px, 210px) !important;
}

html:not(.react-student-embedded) body .topbar-title-stack,
html:not(.react-student-embedded) body .topbar-title-stack h2 {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body .topbar-title-stack h2 {
  overflow: hidden !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body .topbar-center {
  position: relative !important;
  justify-self: center !important;
  max-width: 720px !important;
}

html:not(.react-student-embedded) body .topbar-search {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 12px !important;
  gap: 10px !important;
  align-items: center !important;
}

html:not(.react-student-embedded) body .topbar label.topbar-search > .topbar-search-icon {
  position: static !important;
  display: grid !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 18px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .topbar label.topbar-search > input#topbarCommandInput {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  inline-size: 100% !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
}

html:not(.react-student-embedded) body .topbar label.topbar-search > input#topbarCommandInput::placeholder {
  color: #718399 !important;
  opacity: 1 !important;
}

html:not(.react-student-embedded) body .topbar .global-topbar-user,
html:not(.react-student-embedded) body .topbar .global-topbar-brand {
  display: none !important;
}

html:not(.react-student-embedded) body .sidebar-account-copy {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}

html:not(.react-student-embedded) body .sidebar-account-copy small {
  display: block !important;
  color: #8fa4bc !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body .sidebar-account-button > i {
  display: grid !important;
  width: 20px !important;
  height: 20px !important;
  place-items: center !important;
  font-size: 13px !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar-account-copy,
html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar-account-button > i {
  display: none !important;
}

html:not(.react-student-embedded) body .topbar-center .global-ai-search-panel {
  position: absolute !important;
  box-sizing: border-box !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 3000 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  max-height: min(500px, calc(100vh - 110px)) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: auto !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22) !important;
  transform: none !important;
}

html:not(.react-student-embedded) body .topbar-center .global-ai-search-panel[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body .global-ai-search-head {
  display: flex !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 4px 10px !important;
}

html:not(.react-student-embedded) body .global-ai-search-head > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html:not(.react-student-embedded) body .global-ai-search-head button {
  display: grid !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(148, 163, 184, 0.12) !important;
  color: #64748b !important;
  font-size: 21px !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body .global-ai-search-results {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body .global-ai-result-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 68px !important;
  padding: 10px 12px !important;
  gap: 12px !important;
  align-items: center !important;
}

html:not(.react-student-embedded) body .global-ai-result-card p {
  display: none !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body .shell > .main > .topbar {
    grid-template-columns: minmax(86px, 120px) minmax(220px, 1fr) minmax(86px, 120px) !important;
    gap: 12px !important;
    padding-inline: 18px !important;
  }
}


/* source: global-theme-sync.css */
/* Final color-only theme layer. It never changes layout geometry. */
html[data-theme="dark"]:not(.react-student-embedded) body,
html[data-theme="dark"]:not(.react-student-embedded) body .shell,
html[data-theme="dark"]:not(.react-student-embedded) body .main {
  color: #edf4ff !important;
  background-color: #0b1220 !important;
  background-image:
    radial-gradient(circle at 82% 8%, rgba(37, 99, 235, 0.1), transparent 30%),
    linear-gradient(rgba(82, 112, 148, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 112, 148, 0.035) 1px, transparent 1px) !important;
  background-size: auto, 32px 32px, 32px 32px !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar {
  color: #edf4ff !important;
  background: rgba(8, 18, 34, 0.96) !important;
  border-color: rgba(132, 155, 186, 0.16) !important;
  box-shadow: 0 12px 36px rgba(2, 8, 23, 0.24) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar h2,
html[data-theme="dark"]:not(.react-student-embedded) body .topbar strong,
html[data-theme="dark"]:not(.react-student-embedded) body .panel h1,
html[data-theme="dark"]:not(.react-student-embedded) body .panel h2,
html[data-theme="dark"]:not(.react-student-embedded) body .panel h3,
html[data-theme="dark"]:not(.react-student-embedded) body .panel h4,
html[data-theme="dark"]:not(.react-student-embedded) body .panel strong,
html[data-theme="dark"]:not(.react-student-embedded) body .panel b {
  color: #edf4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .panel p,
html[data-theme="dark"]:not(.react-student-embedded) body .panel em,
html[data-theme="dark"]:not(.react-student-embedded) body .panel small,
html[data-theme="dark"]:not(.react-student-embedded) body .panel label {
  color: #9fb1c7 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .panel .section-card,
html[data-theme="dark"]:not(.react-student-embedded) body .landing-home-grid > article,
html[data-theme="dark"]:not(.react-student-embedded) body .landing-home-grid > section,
html[data-theme="dark"]:not(.react-student-embedded) body :is(.dashboard-card,.workspace-card,.settings-card,.report-card,.question-card,.case-card,.lab-card,.profile-card) {
  color: #edf4ff !important;
  background-color: #111827 !important;
  background-image: linear-gradient(145deg, rgba(20, 32, 51, 0.98), rgba(14, 24, 39, 0.98)) !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
  box-shadow: 0 18px 48px rgba(2, 8, 23, 0.22) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body :is(.landing-training-status,.landing-v5-command-card,.landing-v5-summary-card,.landing-weekly-growth-item,.landing-hardware-card,.engineering-continue-task,.global-ai-result-card) {
  color: #edf4ff !important;
  background: #0d1a2c !important;
  border-color: rgba(126, 151, 184, 0.16) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar-search,
html[data-theme="dark"]:not(.react-student-embedded) body input,
html[data-theme="dark"]:not(.react-student-embedded) body textarea,
html[data-theme="dark"]:not(.react-student-embedded) body select {
  color: #e6eef8 !important;
  background-color: #0d1a2c !important;
  border-color: rgba(126, 151, 184, 0.2) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body input::placeholder,
html[data-theme="dark"]:not(.react-student-embedded) body textarea::placeholder {
  color: #71859e !important;
  opacity: 1 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .global-ai-search-panel,
html[data-theme="dark"]:not(.react-student-embedded) body .companion-panel,
html[data-theme="dark"]:not(.react-student-embedded) body .modal-card,
html[data-theme="dark"]:not(.react-student-embedded) body .drawer {
  color: #edf4ff !important;
  background: #111827 !important;
  border-color: rgba(126, 151, 184, 0.2) !important;
}

html:not([data-theme="dark"]):not(.react-student-embedded) body,
html:not([data-theme="dark"]):not(.react-student-embedded) body .shell,
html:not([data-theme="dark"]):not(.react-student-embedded) body .main {
  color: #172033 !important;
  background-color: #f3f6fb !important;
}

html:not([data-theme="dark"]):not(.react-student-embedded) body .topbar {
  color: #172033 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(71, 103, 139, 0.14) !important;
}

/* Terminal color authority over historical page-specific locks. */
html[data-theme="dark"][data-theme="dark"]:not(.react-student-embedded) body[data-active-panel][data-theme="dark"] .shell > .main.main {
  color: #edf4ff !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(37, 99, 235, 0.12), transparent 30%),
    linear-gradient(rgba(82, 112, 148, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 112, 148, 0.04) 1px, transparent 1px),
    #0b1220 !important;
  background-size: auto, 32px 32px, 32px 32px, auto !important;
}

html[data-theme="dark"][data-theme="dark"]:not(.react-student-embedded) body[data-active-panel][data-theme="dark"] .shell > .main.main > header.topbar.topbar {
  color: #edf4ff !important;
  background: rgba(8, 18, 34, 0.97) !important;
  border-color: rgba(132, 155, 186, 0.17) !important;
}

html[data-theme="dark"][data-theme="dark"]:not(.react-student-embedded) body[data-active-panel][data-theme="dark"] .shell > .main.main > .panel.active {
  color: #edf4ff !important;
  background-color: transparent !important;
  background-image: none !important;
}

html[data-theme="dark"][data-theme="dark"]:not(.react-student-embedded) body[data-active-panel][data-theme="dark"] .shell .main .panel.active .landing-home-grid > article.section-card,
html[data-theme="dark"][data-theme="dark"]:not(.react-student-embedded) body[data-active-panel][data-theme="dark"] .shell .main .panel.active :is(.landing-primary-recommendation,.landing-route-card,.landing-welcome-panel,.landing-weekly-growth,.landing-xiaowen-briefing,.landing-hardware-focus,.landing-hardware-questions,.landing-special-training) {
  color: #edf4ff !important;
  background: linear-gradient(145deg, #142033, #0e1827) !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
  box-shadow: 0 18px 48px rgba(2, 8, 23, 0.24) !important;
}

html[data-theme="dark"][data-theme="dark"]:not(.react-student-embedded) body[data-active-panel][data-theme="dark"] .shell .main .panel.active :is(.landing-training-status,.landing-recommendation-preview,.landing-v5-command-card,.landing-v5-summary-card,.landing-weekly-growth-item,.landing-hardware-card,.engineering-continue-task) {
  color: #edf4ff !important;
  background: #0d1a2c !important;
  border-color: rgba(126, 151, 184, 0.16) !important;
}

html[data-theme="dark"][data-theme="dark"]:not(.react-student-embedded) body[data-active-panel][data-theme="dark"] .shell .main .panel.active :is(h1,h2,h3,h4,strong,b) {
  color: #edf4ff !important;
}

html[data-theme="dark"][data-theme="dark"]:not(.react-student-embedded) body[data-active-panel][data-theme="dark"] .shell .main .panel.active :is(p,small,em) {
  color: #9fb1c7 !important;
}

/* Interview workspace */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .main .interview-studio {
  color: #edf4ff !important;
  background: #0b1220 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .main :is(.interview-training-statusbar,.interview-arena-block,.interview-record-item,.active-resume-card,.interview-answer-live-card,.interview-answer-transcript-body,.interview-profile-user,.interview-profile-ability,.interview-profile-block) {
  color: #edf4ff !important;
  background: #111827 !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
  box-shadow: 0 14px 34px rgba(2, 8, 23, 0.2) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .main :is(.interview-profile-gain,.interview-space-mode-option,.section-head,.interview-waveform) {
  color: #edf4ff !important;
  background: #111827 !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
}

/* Project / engineering workspace */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(.project-detail-section,.project-all-projects,.project-architecture-board,.project-today-panel,.engineering-asset-card) {
  color: #edf4ff !important;
  background: #111827 !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
  box-shadow: 0 14px 34px rgba(2, 8, 23, 0.2) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(.project-home-loop-strip,.project-home-card,.project-loop-step,.project-intro-diagram,.project-coach-answer),
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-case-xiaowen-modes > section,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-case-grid > article,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-debug-layout > aside,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-waveform-layout > aside,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .engineering-asset-card > p {
  color: #edf4ff !important;
  background: #111827 !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
  box-shadow: 0 12px 28px rgba(2, 8, 23, 0.18) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(.engineering-lab-task,.project-route-step,.project-architecture-node,.project-case-template-preview,.engineering-asset-kpi,.project-xiaowen-project-preview),
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-practice-page :is(article,section,aside,button,div):not([class]) {
  color: #edf4ff !important;
  background: #111827 !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.16) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-debug-steps > p,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-coach-question-list > button {
  color: #edf4ff !important;
  background: #111827 !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
}

/* Engineering lab */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .main :is(.engineering-entry-card,.engineering-lab-task) {
  color: #edf4ff !important;
  background: #111827 !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
  box-shadow: 0 14px 34px rgba(2, 8, 23, 0.2) !important;
}

/* Personal workspace */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="my"] .main .engineer-dossier-summary {
  color: #edf4ff !important;
  background: #111827 !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
  box-shadow: 0 14px 34px rgba(2, 8, 23, 0.2) !important;
}

/* Complete the dark palette for legacy cards that still carry light-mode
   gradients with !important. Keep this layer color-only: no geometry changes. */
html[data-theme="dark"]:not(.react-student-embedded) {
  color-scheme: dark;
}

/* Landing / workbench */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="landing"] .main :is(#landingV5ReasonPrimary,#landingV5ReasonSecondary),
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="landing"] .main .landing-xiaowen-advice-grid > span {
  color: #dbe7f5 !important;
  background: #162238 !important;
  border-color: rgba(126, 151, 184, 0.2) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="landing"] .main .landing-v5-command-card > b {
  color: #86efac !important;
  background: rgba(34, 197, 94, 0.14) !important;
  border-color: rgba(34, 197, 94, 0.24) !important;
}

/* Interview workspace and AI-managed weak-question bank */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .main .interview-weak-bank-item {
  color: #edf4ff !important;
  background: linear-gradient(145deg, #162238, #101c2f) !important;
  border-color: rgba(126, 151, 184, 0.2) !important;
  box-shadow: 0 14px 32px rgba(2, 8, 23, 0.22) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .main .interview-weak-bank-item span,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .main .interview-weak-bank-item strong {
  color: #edf4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .main .interview-weak-bank-item em {
  color: #9fb1c7 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .main :is(.interview-training-metrics > span,.interview-question-requirements li,.engineering-score-summary > div,.interview-answer-mode-toggle) {
  color: #dbe7f5 !important;
  background: #162238 !important;
  border-color: rgba(126, 151, 184, 0.2) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .main .danger-soft {
  color: #fca5a5 !important;
  background: rgba(127, 29, 29, 0.22) !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .main .xiaowen-live-interview-coach {
  color: #edf4ff !important;
  background-color: #162238 !important;
  background-image: linear-gradient(145deg, #162238, #101c2f) !important;
  border-color: rgba(126, 151, 184, 0.2) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .main .xiaowen-live-interview-coach :is(p,em,small) {
  color: #9fb1c7 !important;
}

/* Engineering space: large legacy white/gradient boards */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(
  .engineering-assets-overview,
  .engineering-lab-hero,
  .project-today-card,
  .project-my-assistant,
  .project-loop-board,
  .project-route-overview,
  .project-case-xiaowen
) {
  color: #edf4ff !important;
  background-color: #111827 !important;
  background-image: linear-gradient(145deg, #142033, #0e1827) !important;
  border-color: rgba(126, 151, 184, 0.2) !important;
  box-shadow: 0 18px 46px rgba(2, 8, 23, 0.24) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(.skill-training-group,.engineering-lab-entry) {
  color: #edf4ff !important;
  background-color: #162238 !important;
  background-image: linear-gradient(145deg, #162238, #101c2f) !important;
  border-color: rgba(126, 151, 184, 0.2) !important;
  box-shadow: 0 12px 30px rgba(2, 8, 23, 0.2) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(.skill-training-group,.engineering-lab-entry) strong,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(
  .engineering-assets-overview,
  .engineering-lab-hero,
  .project-today-card,
  .project-my-assistant,
  .project-loop-board,
  .project-route-overview,
  .project-case-xiaowen
) :is(h2,h3,h4,strong,b) {
  color: #edf4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(.skill-training-group,.engineering-lab-entry) em,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(
  .engineering-assets-overview,
  .engineering-lab-hero,
  .project-today-card,
  .project-my-assistant,
  .project-loop-board,
  .project-route-overview,
  .project-case-xiaowen
) :is(p,em,small) {
  color: #9fb1c7 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-route-overview > span,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-loop-track > span {
  color: #dbe7f5 !important;
  background: #162238 !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .skill-training-group > span {
  color: #c4b5fd !important;
  background: rgba(124, 92, 255, 0.16) !important;
  border-color: rgba(124, 92, 255, 0.22) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-case-xiaowen-modes section > div > span {
  color: #b9c9db !important;
  background: #162238 !important;
  border-color: rgba(126, 151, 184, 0.18) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(.project-summary-metrics,.project-ability-gain) > span {
  color: #dbe7f5 !important;
  background: #162238 !important;
  border-color: rgba(126, 151, 184, 0.2) !important;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.16) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(.project-summary-metrics,.project-ability-gain) > span :is(b,strong) {
  color: #c4b5fd !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(.project-summary-metrics,.project-ability-gain) > span em {
  color: #9fb1c7 !important;
}

/* Engineering lab */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .main .engineering-lab-hero {
  color: #edf4ff !important;
  background-color: #111827 !important;
  background-image: linear-gradient(145deg, #142033, #0e1827) !important;
  border-color: rgba(126, 151, 184, 0.2) !important;
  box-shadow: 0 18px 46px rgba(2, 8, 23, 0.24) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .main .engineering-lab-hero :is(h2,h3,h4,strong,b) {
  color: #edf4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .main .engineering-lab-hero :is(p,em,small) {
  color: #9fb1c7 !important;
}

/* Personal engineering profile */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="my"] .main :is(
  .engineer-dossier-skill-list > span,
  .engineer-growth-proof-timeline > span,
  .engineer-proof-list > span
) {
  color: #dbe7f5 !important;
  background-color: #162238 !important;
  background-image: linear-gradient(145deg, #162238, #101c2f) !important;
  border-color: rgba(126, 151, 184, 0.2) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="my"] .main :is(
  .engineer-dossier-skill-list > span,
  .engineer-growth-proof-timeline > span,
  .engineer-proof-list > span
) :is(b,strong) {
  color: #edf4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="my"] .main :is(
  .engineer-growth-proof-timeline > span,
  .engineer-proof-list > span
) em {
  color: #9fb1c7 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="my"] .main .engineer-dossier-avatar {
  background: #172554 !important;
  border-color: rgba(126, 151, 184, 0.24) !important;
}


/* source: v51-workbench.css */
/* 硬问 V5.1 workbench convergence.
   This file is intentionally loaded last: it replaces the legacy layout locks
   without changing the existing data and interaction layer. */

html:not(.react-student-embedded) {
  --v51-bg: #f3f6fb;
  --v51-card: #ffffff;
  --v51-card-soft: #f7f9fc;
  --v51-text: #0f172a;
  --v51-muted: #64748b;
  --v51-border: rgba(148, 163, 184, 0.24);
  --v51-blue: #1677ff;
  --v51-blue-soft: rgba(37, 99, 235, 0.1);
  --v51-green: #00b578;
  --v51-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

/* Engineering training is a two-level workspace: recommended cases first,
   measurement laboratories second. */
html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section {
  margin-top: 18px !important;
  padding: 22px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-heading :is(p, h3) {
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-heading p {
  color: var(--v51-blue) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-heading h3 {
  margin-top: 4px !important;
  color: var(--v51-text) !important;
  font-size: 21px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-heading > span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card {
  min-width: 0 !important;
  min-height: 158px !important;
  padding: 18px !important;
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card:hover {
  border-color: color-mix(in srgb, var(--v51-blue) 48%, var(--v51-border)) !important;
  transform: translateY(-2px) !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card span {
  width: fit-content !important;
  padding: 4px 9px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card strong {
  color: var(--v51-text) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card em {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card b {
  margin-top: auto !important;
  color: var(--v51-blue) !important;
  font-size: 12px !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-grid {
    grid-template-columns: 1fr !important;
  }
}

/* V5.2 five-item product shell. Concrete tools live inside workspaces, so the
   primary sidebar only communicates destination and must stay legible when
   collapsed. */
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar .menu.menu > .menu-item.menu-item {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .menu-item::before {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .menu-item-icon {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: currentColor !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html:not(.react-student-embedded) .shell.sidebar-collapsed .menu-item-label {
  display: none !important;
}

/* One visual grammar for the second layer: interview, engineering, learning
   and profile applications all use the same four-column launcher. */
html:not(.react-student-embedded) .workspace-app-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}

/* V5 focused home: one decision, one primary action, one growth result and
   four real workspaces. This terminal block deliberately wins over the legacy
   dashboard layouts that are still kept for data compatibility. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace {
  width: 100% !important;
  max-width: none !important;
  padding: 24px clamp(22px, 3vw, 48px) 48px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="welcome"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="v5-command-center"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="shortcuts"] {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] :is(
  .landing-welcome-panel,
  .engineering-workbench-task,
  .engineering-growth-card,
  .landing-home-shortcuts
) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] :is(
  .landing-welcome-panel,
  .engineering-workbench-task,
  .engineering-growth-card,
  .landing-home-shortcuts
)::before,
html:not(.react-student-embedded) body[data-active-panel="landing"] :is(
  .landing-welcome-panel,
  .engineering-workbench-task,
  .engineering-growth-card,
  .landing-home-shortcuts
)::after {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 112px !important;
  padding: 22px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-profile-avatar {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 60px !important;
  display: block !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 !important;
  border: 2px solid color-mix(in srgb, var(--v51-blue) 40%, var(--v51-border)) !important;
  border-radius: 50% !important;
  background-color: var(--v51-card-soft) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--v51-blue) 16%, transparent) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-profile-avatar::before,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-profile-avatar::after {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-copy {
  position: static !important;
  display: grid !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-copy > * {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-greeting-line {
  color: var(--v51-text) !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-current-target {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: var(--v51-muted) !important;
  font-size: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-current-target strong {
  color: var(--v51-text) !important;
  font-size: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] article.engineering-workbench-task[data-home-module-key="v5-command-center"] {
  display: block !important;
  min-height: 0 !important;
  padding: clamp(26px, 3vw, 40px) !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--v51-blue) 13%, transparent), transparent 38%),
    var(--v51-card) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 0 16px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-header h2,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-head h2,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcuts-head h2 {
  margin: 4px 0 0 !important;
  color: var(--v51-text) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-score {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  color: var(--v51-muted) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-score strong {
  color: var(--v51-text) !important;
  font-size: 42px !important;
  line-height: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-score small {
  margin-left: 3px !important;
  color: var(--v51-blue) !important;
  font-size: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-body {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr) !important;
  gap: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] :is(.landing-target-gap, .landing-today-advice) {
  min-width: 0 !important;
  padding: 20px !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-target-gap {
  display: grid !important;
  align-content: center !important;
  gap: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-target-gap > span,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-today-advice > span,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-action-row span {
  color: var(--v51-muted) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-target-gap-list {
  display: grid !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-target-gap-list strong {
  min-height: 46px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-target-gap-list strong::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  margin-right: 10px !important;
  background: var(--v51-orange) !important;
  border-radius: 50% !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-today-advice {
  display: grid !important;
  align-content: center !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-today-advice h1 {
  margin: 2px 0 0 !important;
  color: var(--v51-text) !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-today-advice > p {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-advice-evidence {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-advice-evidence em {
  padding: 7px 10px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-action-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-action-row > div {
  display: grid !important;
  gap: 3px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-action-row strong {
  color: var(--v51-text) !important;
  font-size: 24px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] #landingStartInterviewBtn {
  width: min(220px, 42%) !important;
  min-width: 180px !important;
  min-height: 50px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcuts {
  padding: 24px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] :is(.landing-weekly-growth-head, .landing-home-shortcuts-head) {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] :is(.landing-weekly-growth-head, .landing-home-shortcuts-head) > span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-list {
  display: block !important;
  width: 100% !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.2fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 18px 20px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item > span {
  color: var(--v51-text) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item > p {
  color: var(--v51-text) !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item > strong {
  color: var(--v51-green) !important;
  font-size: 17px !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid > button {
  min-width: 0 !important;
  min-height: 112px !important;
  padding: 16px 18px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-content: center !important;
  align-items: center !important;
  gap: 4px 12px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid > button:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--v51-blue) 52%, var(--v51-border)) !important;
  background: var(--v51-blue-soft) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid > button > span {
  grid-row: 1 / span 2 !important;
  font-size: 23px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid strong {
  color: var(--v51-text) !important;
  font-size: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid em {
  overflow: hidden !important;
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-body {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel {
    align-items: flex-start !important;
    padding: 18px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-profile-avatar {
    flex-basis: 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-current-target,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-header,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-action-row,
  html:not(.react-student-embedded) body[data-active-panel="landing"] :is(.landing-weekly-growth-head, .landing-home-shortcuts-head) {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-score {
    align-self: flex-start !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] #landingStartInterviewBtn {
    width: 100% !important;
    min-width: 0 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid {
    grid-template-columns: 1fr !important;
  }
}

/* V5 learning library: show real, actionable knowledge cards first and keep
   the expert map available without letting it dominate the everyday flow. */
html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 22px 0 14px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-head :is(p, h3) {
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-head h3 {
  margin-top: 4px !important;
  color: var(--v51-text) !important;
  font-size: 20px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-head > span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card {
  min-width: 0 !important;
  min-height: 164px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > span {
  color: var(--v51-blue) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > p {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > div {
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > div > em {
  color: var(--v51-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details {
  margin-top: 20px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary {
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  cursor: pointer !important;
  list-style: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary::-webkit-details-marker {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary > span {
  display: grid !important;
  gap: 4px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary b,
html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary em {
  color: var(--v51-blue) !important;
  font-size: 11px !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary strong {
  color: var(--v51-text) !important;
  font-size: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details[open] > summary {
  border-bottom: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > .knowledge-layout {
  margin: 0 !important;
  padding: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-workspace-app-grid {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-grid {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-head,
  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* Product IA v5: one stable 72px collapsed rail with no content overlap. */
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed {
  grid-template-columns: 72px minmax(0, 1fr) !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar {
  position: sticky !important;
  inset: 0 auto auto 0 !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  padding: 12px !important;
  overflow: hidden !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .main {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar > .brand {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;
  padding: 54px 0 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .brand-head.brand-head--main {
  display: grid !important;
  place-items: start center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .brand-icon-logo {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .brand-subtitle-text {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar #sidebarToggle.sidebar-toggle {
  position: absolute !important;
  top: 14px !important;
  right: 8px !important;
  left: auto !important;
  width: 32px !important;
  height: 32px !important;
  z-index: 120 !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  color: var(--v51-text) !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item-icon {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: var(--v51-text) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-account-card {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 2px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Feishu-meeting style interview: AI interviewer / answer / live scoring. */
@media (min-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 18px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-setup-card {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-arena-stack {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.42fr) minmax(340px, 0.58fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-card {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-answer-zone {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-feedback-card-inline {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card :is(.interview-live-transcript-card, #xiaowenLiveInterviewCoach) {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-copilot-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

/* “My” owns ability, growth and history; expert detail stays one level deeper. */
html:not(.react-student-embedded) .my-growth-hub {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 18px !important;
}

html:not(.react-student-embedded) .my-growth-card {
  min-width: 0 !important;
  padding: 24px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) .my-ability-card {
  grid-column: 1 / -1 !important;
}

html:not(.react-student-embedded) .my-ability-map {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 20px !important;
}

html:not(.react-student-embedded) .my-ability-row {
  display: grid !important;
  grid-template-columns: minmax(116px, 0.5fr) minmax(120px, 1fr) 40px !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 13px 14px !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 13px !important;
}

html:not(.react-student-embedded) .my-ability-row > div {
  display: grid !important;
  gap: 2px !important;
}

html:not(.react-student-embedded) .my-ability-row strong,
html:not(.react-student-embedded) .my-ability-row b {
  color: var(--v51-text) !important;
}

html:not(.react-student-embedded) .my-ability-row span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) .my-ability-row > i {
  height: 7px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--v51-text) 8%, transparent) !important;
  border-radius: 999px !important;
}

html:not(.react-student-embedded) .my-ability-row > i > em {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, var(--v51-blue), #7c3aed) !important;
  border-radius: inherit !important;
}

html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) {
  display: grid !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) > article {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 13px 14px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 13px !important;
}

html:not(.react-student-embedded) .my-training-history > article {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) span,
html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) p {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) b,
html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) em {
  color: var(--v51-blue) !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) .my-training-empty {
  display: grid !important;
  justify-items: start !important;
  gap: 8px !important;
  padding: 22px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px dashed var(--v51-border) !important;
  border-radius: 14px !important;
}

/* First-run onboarding: goal -> role -> generated route. */
html .onboarding-backdrop {
  z-index: 5000 !important;
  background: rgba(2, 8, 23, 0.58) !important;
  backdrop-filter: blur(10px) !important;
}

html .onboarding-card {
  display: grid !important;
  gap: 20px !important;
  width: min(720px, calc(100vw - 36px)) !important;
  max-width: 720px !important;
  max-height: min(760px, calc(100vh - 36px)) !important;
  padding: 28px !important;
  overflow: auto !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 28px 80px rgba(2, 8, 23, 0.3) !important;
}

html .onboarding-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

html .onboarding-head h3 {
  margin: 4px 0 0 !important;
  color: var(--v51-text) !important;
  font-size: 28px !important;
}

html #onboardingStepLabel {
  padding: 7px 11px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html .onboarding-progress {
  height: 6px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--v51-text) 8%, transparent) !important;
  border-radius: 999px !important;
}

html .onboarding-progress i {
  display: block !important;
  width: 33% !important;
  height: 100% !important;
  background: linear-gradient(90deg, var(--v51-blue), #7c3aed) !important;
  border-radius: inherit !important;
  transition: width 0.22s ease !important;
}

html .onboarding-step {
  display: grid !important;
  gap: 14px !important;
}

html .onboarding-step[hidden] {
  display: none !important;
}

html .onboarding-kicker {
  color: var(--v51-blue) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html .onboarding-step h4 {
  margin: 0 !important;
  color: var(--v51-text) !important;
  font-size: 21px !important;
}

html .onboarding-option-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html .onboarding-role-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html .onboarding-option-grid > button {
  display: grid !important;
  gap: 7px !important;
  min-height: 112px !important;
  padding: 18px !important;
  color: var(--v51-text) !important;
  text-align: left !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 15px !important;
  cursor: pointer !important;
}

html .onboarding-option-grid > button:hover,
html .onboarding-option-grid > button.is-selected {
  background: var(--v51-blue-soft) !important;
  border-color: var(--v51-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v51-blue) 12%, transparent) !important;
}

html .onboarding-option-grid b {
  font-size: 17px !important;
}

html .onboarding-option-grid em {
  color: var(--v51-muted) !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}

html .onboarding-route-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html .onboarding-route-list article {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 16px !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html .onboarding-route-list span {
  color: var(--v51-blue) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html .onboarding-route-list em {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}

html .onboarding-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding-top: 4px !important;
}

html .onboarding-actions > div {
  display: flex !important;
  gap: 10px !important;
}

@media (max-width: 820px) {
  html:not(.react-student-embedded) .my-growth-hub,
  html:not(.react-student-embedded) .my-ability-map,
  html .onboarding-option-grid,
  html .onboarding-role-grid,
  html .onboarding-route-list {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) .my-ability-card {
    grid-column: auto !important;
  }
}

html:not(.react-student-embedded) .workspace-app-grid > button {
  min-width: 0 !important;
  min-height: 116px !important;
  padding: 17px !important;
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
  overflow-wrap: anywhere !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .workspace-app-grid > button:hover,
html:not(.react-student-embedded) .workspace-app-grid > button.is-active {
  border-color: color-mix(in srgb, var(--v51-blue) 48%, transparent) !important;
  background-color: var(--v51-blue-soft) !important;
  transform: translateY(-1px) !important;
}

html:not(.react-student-embedded) .workspace-app-grid > button span {
  width: fit-content !important;
  padding: 4px 9px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .workspace-app-grid > button strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
}

html:not(.react-student-embedded) .workspace-app-grid > button em,
html:not(.react-student-embedded) .workspace-app-grid > button b {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) .workspace-app-grid > button {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) .v51-profile-entry-grid {
  margin: 18px 0 22px !important;
}

html:not(.react-student-embedded) .learning-library-section {
  padding: 22px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
  scroll-margin-top: 88px !important;
}

html:not(.react-student-embedded) .learning-formula-grid,
html:not(.react-student-embedded) .learning-record-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) .learning-formula-grid > article,
html:not(.react-student-embedded) .learning-record-card {
  min-width: 0 !important;
  padding: 16px !important;
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) .learning-formula-grid span,
html:not(.react-student-embedded) .learning-record-card > span {
  color: var(--v51-blue) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .learning-formula-grid strong,
html:not(.react-student-embedded) .learning-record-card > strong {
  color: var(--v51-text) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

html:not(.react-student-embedded) .learning-formula-grid p,
html:not(.react-student-embedded) .learning-record-card p,
html:not(.react-student-embedded) .learning-record-card em {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) .learning-record-card.is-empty {
  grid-column: 1 / -1 !important;
  min-height: 150px !important;
  align-content: center !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) .workspace-app-grid,
  html:not(.react-student-embedded) .learning-formula-grid,
  html:not(.react-student-embedded) .learning-record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  html:not(.react-student-embedded) .workspace-app-grid,
  html:not(.react-student-embedded) .learning-formula-grid,
  html:not(.react-student-embedded) .learning-record-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Focused-home terminal placement. Keep this at EOF: older homepage files and
   earlier compatibility rules must not re-enable hidden dashboard modules. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key="welcome"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key="v5-command-center"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key="shortcuts"] {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [hidden],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key="ai-advice"] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > article.landing-welcome-panel[data-home-module-key="welcome"] {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 112px !important;
  padding: 22px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > article.engineering-workbench-task[data-home-module-key="v5-command-center"] {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(26px, 3vw, 40px) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-today-advice h1 {
  color: var(--v51-text) !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: 1.15 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > article.engineering-growth-card[data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > article.landing-home-shortcuts[data-home-module-key="shortcuts"] {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 24px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-list {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-item {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.2fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 18px 20px !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-task-body {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-home-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-item,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-home-shortcut-grid {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL AI meeting room lock — question / answer / live scoring. */
@media (min-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 300px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    overflow: hidden auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-setup-card {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-arena-stack {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.9fr) minmax(320px, 1.1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-card {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-answer-zone {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-feedback-card-inline {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card :is(.interview-live-transcript-card, #xiaowenLiveInterviewCoach) {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-copilot-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

/* FINAL AI meeting room lock.
   The product-facing desktop structure is question, answer and live scoring.
   Candidate details remain available from the status bar drawer. */
@media (min-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 300px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    overflow: hidden auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-setup-card {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-arena-stack {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.9fr) minmax(320px, 1.1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-card {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-answer-zone {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-feedback-card-inline {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card :is(.interview-live-transcript-card, #xiaowenLiveInterviewCoach) {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-copilot-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

/* FINAL AI meeting room lock.
   The interview page has accumulated several historical layout layers. Keep
   the product-facing structure unambiguous on desktop: question, answer and
   live scoring. Candidate details remain available from the status bar drawer. */
@media (min-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 300px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    overflow: hidden auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-setup-card {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-arena-stack {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.9fr) minmax(320px, 1.1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-card {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-answer-zone {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-feedback-card-inline {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card :is(.interview-live-transcript-card, #xiaowenLiveInterviewCoach) {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-copilot-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

/* Exact-card specificity guard for legacy rules that name article.section-card. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-ai-assistant[data-home-module-key="ai-advice"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-welcome-panel[data-home-module-key="welcome"] {
  display: flex !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-height: 112px !important;
  height: auto !important;
  padding: 22px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-workbench-task[data-home-module-key="v5-command-center"] {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-height: 0 !important;
  height: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-growth-card[data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-home-shortcuts[data-home-module-key="shortcuts"] {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-height: 0 !important;
  height: auto !important;
}

html[data-theme="dark"]:not(.react-student-embedded) {
  --v51-bg: #0b1220;
  --v51-card: #111827;
  --v51-card-soft: #162238;
  --v51-text: #edf4ff;
  --v51-muted: #9fb1c7;
  --v51-border: rgba(126, 151, 184, 0.2);
  --v51-blue: #1677ff;
  --v51-blue-soft: rgba(79, 131, 255, 0.14);
  --v51-green: #00b578;
  --v51-shadow: 0 10px 28px rgba(2, 8, 23, 0.28);
}

/* Seven-item product navigation, compact enough for laptop windows. */
html:not(.react-student-embedded) .sidebar .menu {
  gap: 5px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) .sidebar .menu-item {
  min-height: 37px !important;
  max-height: 37px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) .sidebar .menu-item-icon {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  font-size: 17px !important;
  line-height: 1 !important;
  opacity: 0.94 !important;
}

html:not(.react-student-embedded) .shell.sidebar-collapsed .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  padding: 0 !important;
}

html:not(.react-student-embedded) .shell.sidebar-collapsed .sidebar .menu-item-icon,
html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item-icon {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  color: currentColor !important;
}

/* Home: four core modules only, full-width workbench instead of a centered demo. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .main {
  background: var(--v51-bg) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-workspace.active {
  width: 100% !important;
  max-width: none !important;
  padding: 24px clamp(24px, 3vw, 48px) 48px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 20px !important;
  align-items: stretch !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense !important;
  grid-auto-rows: auto !important;
  gap: 20px !important;
  align-items: stretch !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="welcome"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="v5-command-center"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="ai-advice"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="continue-task"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="welcome"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="continue-task"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="welcome"] {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  height: auto !important;
  min-height: 168px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="v5-command-center"] {
  grid-column: 1 / span 9 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="ai-advice"] {
  grid-column: 10 / -1 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="growth"] {
  grid-column: 1 / span 6 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="continue-task"] {
  grid-column: 7 / -1 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="v5-command-center"] {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="ai-advice"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="welcome"] {
  grid-column: 1 / -1 !important;
  min-height: 168px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="v5-command-center"] {
  grid-column: 1 / span 9 !important;
  min-height: 430px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="ai-advice"] {
  grid-column: 10 / -1 !important;
  min-height: 430px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="growth"] {
  grid-column: 1 / span 6 !important;
  min-height: 206px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="continue-task"] {
  grid-column: 7 / -1 !important;
  min-height: 206px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task {
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel {
  padding: 24px 28px !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel .landing-welcome-copy,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel .landing-training-statusbar,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel .landing-training-status {
  position: static !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-statusbar {
  width: 100% !important;
  grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status {
  min-width: 0 !important;
  min-height: 94px !important;
  padding: 14px 16px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  align-content: center !important;
  gap: 4px !important;
  border-radius: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status > :is(span,strong,em,b,button) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status > span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status > strong,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status > button {
  color: var(--v51-text) !important;
  font-size: 19px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status-primary > strong {
  font-size: 36px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task {
  padding: clamp(28px, 3vw, 44px) !important;
  grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr) !important;
  gap: 26px !important;
  background:
    radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.12), transparent 35%),
    var(--v51-card) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-grid {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy > *,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > * {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: center !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-grid > .landing-v5-command-card:last-child {
  grid-column: 1 / -1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 112px !important;
  max-height: none !important;
  padding: 18px 20px !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  transform: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > span,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > em,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > b {
  color: var(--v51-muted) !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.45 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > strong {
  color: var(--v51-text) !important;
  font-size: 27px !important;
  line-height: 1.18 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card-primary > strong {
  font-size: 27px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > ul {
  padding: 0 !important;
  display: grid !important;
  gap: 6px !important;
  list-style: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > ul > li {
  position: static !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  color: var(--v51-muted) !important;
  background: color-mix(in srgb, var(--v51-card) 70%, transparent) !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > button {
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task h1 {
  color: var(--v51-text) !important;
  font-size: clamp(40px, 4vw, 64px) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy p:not(.eyebrow) {
  color: var(--v51-muted) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-xiaowen-advice-grid > span,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid > span {
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant {
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant > div {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant h2 {
  color: var(--v51-text) !important;
  font-size: 28px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-xiaowen-advice-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 18px !important;
  width: 100% !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-xiaowen-advice-grid > span {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 78px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant > button {
  position: static !important;
  align-self: flex-start !important;
  width: auto !important;
  min-width: 118px !important;
  height: 44px !important;
  margin: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task {
  padding: 24px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-weekly-growth[data-home-module-key="growth"] {
  min-height: 206px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-head,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-list {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 104px !important;
  padding: 14px !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item > * {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item > strong {
  color: var(--v51-green) !important;
  font-size: 16px !important;
}

html:not(.react-student-embedded) #companionAmbientStage,
html:not(.react-student-embedded) #companionAmbientCharacter,
html:not(.react-student-embedded) #companionMiniCharacter {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-inline-link {
  padding: 0 !important;
  border: 0 !important;
  color: var(--v51-blue) !important;
  background: transparent !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-head h2 {
  margin: 4px 0 0 !important;
  color: var(--v51-text) !important;
  font-size: 22px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-tag {
  width: fit-content !important;
  padding: 5px 9px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > strong,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > p,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-progress,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-meta {
  grid-column: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > strong {
  color: var(--v51-text) !important;
  font-size: 24px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > p {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-progress {
  height: 7px !important;
  overflow: hidden !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-progress > i {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #1677ff, #7c3aed) !important;
  border-radius: inherit !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-meta {
  display: flex !important;
  justify-content: space-between !important;
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > button {
  grid-column: 2 !important;
  grid-row: 1 / span 5 !important;
  min-width: 126px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid > span {
  min-height: 104px !important;
  padding: 16px !important;
  display: grid !important;
  align-content: center !important;
  gap: 6px !important;
  border-radius: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid strong {
  color: var(--v51-text) !important;
  font-size: 30px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid em {
  color: var(--v51-muted) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

/* Today training cockpit. */
html:not(.react-student-embedded) body[data-active-panel="question-bank"] .panel.active,
html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .panel.active {
  width: 100% !important;
  max-width: none !important;
  padding: 24px clamp(24px, 3vw, 48px) 48px !important;
}

html:not(.react-student-embedded) .v51-training-cockpit {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 20px 0 24px !important;
}

html:not(.react-student-embedded) .v51-training-cockpit > div {
  min-height: 92px !important;
  padding: 16px 18px !important;
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
}

html:not(.react-student-embedded) .v51-training-cockpit span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) .v51-training-cockpit strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) .v51-training-cockpit > div:nth-child(3) {
  background: var(--v51-blue-soft) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 24px !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid > button {
  min-height: 112px !important;
  padding: 16px !important;
  display: grid !important;
  align-content: center !important;
  gap: 6px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid > button:hover {
  border-color: rgba(22, 119, 255, 0.46) !important;
  transform: translateY(-2px) !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid span {
  color: var(--v51-blue) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid em {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
}

/* Knowledge assets: category first, map second. */
html:not(.react-student-embedded) .v51-knowledge-page {
  display: grid !important;
  gap: 18px !important;
}

html:not(.react-student-embedded) .v51-knowledge-hero {
  padding: 28px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 28px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) .v51-knowledge-hero h2 {
  margin: 6px 0 10px !important;
  color: var(--v51-text) !important;
  font-size: 30px !important;
}

html:not(.react-student-embedded) .v51-knowledge-hero p:not(.eyebrow) {
  margin: 0 !important;
  color: var(--v51-muted) !important;
}

html:not(.react-student-embedded) .v51-knowledge-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, 128px) !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) .v51-knowledge-metrics > span {
  min-height: 86px !important;
  padding: 14px !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) .v51-knowledge-metrics strong {
  font-size: 26px !important;
}

html:not(.react-student-embedded) .v51-knowledge-metrics em {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) .v51-knowledge-query {
  padding: 20px !important;
  display: grid !important;
  gap: 14px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) .v51-knowledge-query-box {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 8px 8px 16px !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) .v51-knowledge-query-box > input {
  min-width: 0 !important;
  height: 42px !important;
  color: var(--v51-text) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  font: inherit !important;
}

html:not(.react-student-embedded) .v51-knowledge-answer {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) .v51-knowledge-answer > div {
  min-height: 90px !important;
  padding: 14px !important;
  display: grid !important;
  align-content: center !important;
  gap: 6px !important;
  background: var(--v51-card-soft) !important;
  border-radius: 12px !important;
}

html:not(.react-student-embedded) .v51-knowledge-answer span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) .v51-knowledge-answer strong {
  color: var(--v51-text) !important;
  font-size: 15px !important;
}

html:not(.react-student-embedded) .v51-knowledge-categories {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:not(.react-student-embedded) .v51-knowledge-categories > button {
  min-height: 132px !important;
  padding: 18px !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .v51-knowledge-categories span {
  width: fit-content !important;
  padding: 4px 9px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) .v51-knowledge-categories strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) .v51-knowledge-categories em {
  color: var(--v51-muted) !important;
  font-size: 13px !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) .v51-knowledge-page .knowledge-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr) !important;
  gap: 18px !important;
}

/* AI interview meeting room: restore the candidate column on laptops and desktops. */
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-space-shell {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-studio {
  margin-top: 0 !important;
}

@media (min-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    display: grid !important;
    grid-template-columns: 190px minmax(420px, 1fr) 280px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 18px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-setup-card {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 12px !important;
    min-width: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card > .section-head {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    align-content: normal !important;
    border-bottom: 1px solid var(--v51-border) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card > .section-head .eyebrow {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card .interview-profile-dashboard {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card .interview-profile-dashboard > section {
    width: 100% !important;
    height: auto !important;
    min-height: 72px !important;
    padding: 11px !important;
    align-content: center !important;
    color: var(--v51-text) !important;
    background: var(--v51-card-soft) !important;
    border-color: var(--v51-border) !important;
    border-radius: 14px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card .interview-profile-dashboard :is(span,p,em,strong,b) {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card > .active-resume-card.empty-box {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-copilot-card {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

@media (min-width: 1480px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    grid-template-columns: 220px minmax(500px, 1fr) 310px !important;
  }
}

/* Career-grade capability proof. */
html:not(.react-student-embedded) .growth-capability-proof-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) .growth-capability-proof-grid > div {
  min-height: 104px !important;
  padding: 16px !important;
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
}

html:not(.react-student-embedded) .growth-capability-proof-grid span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) .growth-capability-proof-grid strong {
  color: var(--v51-text) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

/* The legacy pages contain hard-coded white surfaces. Converge every visible
   workbench surface to the same dark tokens when auto/night mode is active. */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="question-bank"] .main :is(
  .question-ai-decision-strip > div,
  .question-ai-training-meta > em,
  .question-training-pack-stats > span,
  .question-training-path > li,
  .question-project-pack-detail > div,
  .question-ability-domain,
  .question-ability-point,
  .question-training-pack,
  .question-mistake-card,
  .question-mistake-empty
) {
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="question-bank"] .main :is(
  .question-ai-decision-strip span,
  .question-ai-training-meta > em,
  .question-training-pack-stats > span,
  .question-training-path > li,
  .question-training-pack p,
  .question-mistake-card p
) {
  color: var(--v51-muted) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(
  .project-today-card,
  .project-all-projects,
  .project-practice-card,
  .project-practice-score-card,
  .project-practice-goals,
  .project-home-loop-strip,
  .project-loop-board,
  .project-loop-step,
  .project-module-row,
  .project-today-panel,
  .project-today-meta > div,
  .project-test-data-list > *,
  .project-evidence-grid > *,
  .project-schematic-flow > span
) {
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-today-card {
  background:
    radial-gradient(circle at 86% 12%, rgba(22, 119, 255, 0.14), transparent 32%),
    var(--v51-card) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-today-progress {
  background: #26344a !important;
  border: 1px solid var(--v51-border) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(
  .project-today-copy p,
  .project-today-meta em,
  .project-today-panel p,
  .project-practice-card p,
  .project-module-row p,
  .project-all-projects p
) {
  color: var(--v51-muted) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] .main .growth-archive-page {
  color: var(--v51-text) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] .main :is(
  .growth-archive-hero,
  .growth-archive-card,
  .growth-archive-answer-strip > article,
  .growth-archive-suggestion,
  .growth-archive-project,
  .growth-archive-job-list > button,
  .growth-archive-plan > button,
  .growth-archive-tags > button,
  .growth-archive-skill-domain,
  .growth-archive-evidence > article,
  .growth-archive-impression > section
) {
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] .main :is(
  .growth-archive-ai-summary,
  .growth-archive-ai-summary span,
  .growth-archive-score,
  .growth-capability-proof-grid > div
) {
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] .main :is(
  .growth-archive-person h2,
  .growth-archive-ai-summary h3,
  .growth-archive-ai-summary strong,
  .growth-archive-answer-strip strong,
  .growth-archive-card-head h3,
  .growth-archive-domain-head,
  .growth-archive-tags strong,
  .growth-archive-project,
  .growth-archive-evidence h4,
  .growth-archive-evidence strong,
  .growth-archive-plan strong,
  .growth-archive-suggestion strong
) {
  color: var(--v51-text) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] .main :is(
  .growth-archive-person span,
  .growth-archive-score span,
  .growth-archive-score em,
  .growth-archive-answer-strip span,
  .growth-archive-answer-strip p,
  .growth-archive-card-head > span,
  .growth-archive-project p,
  .growth-archive-project em,
  .growth-archive-evidence p,
  .growth-archive-evidence em,
  .growth-archive-plan p,
  .growth-archive-suggestion p,
  .growth-capability-proof-grid span
) {
  color: var(--v51-muted) !important;
}

/* Large-screen expansion and compact fallbacks. */
@media (min-width: 1800px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="v5-command-center"] {
    grid-column: 1 / span 9 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="ai-advice"] {
    grid-column: 10 / -1 !important;
  }
}

@media (max-width: 1480px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="v5-command-center"],
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="ai-advice"] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant {
    min-height: 260px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant .landing-xiaowen-advice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task h1 {
    font-size: clamp(38px, 4vw, 54px) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="welcome"] {
    height: auto !important;
    min-height: 278px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-statusbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1120px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="growth"],
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="continue-task"] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task,
  html:not(.react-student-embedded) .v51-knowledge-hero {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) .v51-training-cockpit,
  html:not(.react-student-embedded) .v51-training-entry-grid,
  html:not(.react-student-embedded) .v51-knowledge-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:not(.react-student-embedded) .growth-capability-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:not(.react-student-embedded) .v51-knowledge-page .knowledge-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-statusbar,
  html:not(.react-student-embedded) .v51-training-cockpit,
  html:not(.react-student-embedded) .v51-training-entry-grid,
  html:not(.react-student-embedded) .v51-knowledge-categories,
  html:not(.react-student-embedded) .v51-knowledge-metrics,
  html:not(.react-student-embedded) .v51-knowledge-answer,
  html:not(.react-student-embedded) .growth-capability-proof-grid,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid {
    grid-template-columns: 1fr !important;
  }


  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-grid {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-list {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > button {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
  }
}

/* XiaoWen task assistant: one Live2D canvas, one entry, one execution workspace. */
html:not(.react-student-embedded) body #companionDock.companion-dock {
  z-index: 2200 !important;
  right: 18px !important;
  bottom: 18px !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded {
  width: min(860px, calc(100vw - 108px)) !important;
  min-width: min(860px, calc(100vw - 108px)) !important;
  max-width: min(860px, calc(100vw - 108px)) !important;
  height: min(688px, calc(100vh - 36px)) !important;
  max-height: min(688px, calc(100vh - 36px)) !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-fullscreen {
  inset: 14px 14px 14px max(86px, calc(var(--sidebar-w, 72px) + 14px)) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded #companionPanel.companion-panel {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--v51-text) !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(22, 119, 255, 0.13), transparent 34%),
    var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.32) !important;
  backdrop-filter: blur(22px) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-head {
  min-height: 68px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--v51-border) !important;
  background: color-mix(in srgb, var(--v51-card) 92%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-heading {
  min-width: 0 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-heading > strong {
  display: block !important;
  color: var(--v51-text) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-heading > p {
  margin: 3px 0 0 !important;
  color: var(--v51-muted) !important;
  font-size: 11px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-tools button {
  min-height: 30px !important;
  padding: 0 9px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-layout {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(248px, 286px) minmax(0, 1fr) !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-model-column {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(310px, 1fr) auto auto !important;
  gap: 10px !important;
  padding: 14px !important;
  overflow: auto !important;
  border-right: 1px solid var(--v51-border) !important;
  background:
    linear-gradient(rgba(22, 119, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 119, 255, 0.04) 1px, transparent 1px),
    color-mix(in srgb, var(--v51-card-soft) 88%, transparent) !important;
  background-size: 22px 22px, 22px 22px, auto !important;
}

html:not(.react-student-embedded) body #companionPanel #companionModelViewer.companion-model-viewer {
  position: relative !important;
  width: 100% !important;
  min-height: 310px !important;
  height: 100% !important;
  display: grid !important;
  place-items: end center !important;
  overflow: hidden !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(124, 58, 237, 0.19), transparent 38%),
    linear-gradient(180deg, rgba(22, 119, 255, 0.08), transparent 64%),
    var(--v51-card-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
  cursor: grab !important;
}

html:not(.react-student-embedded) body #companionPanel #companionModelViewer.is-rotating {
  cursor: grabbing !important;
}

html:not(.react-student-embedded) body #companionPanel #companionThreeCanvas.companion-three-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: drop-shadow(0 18px 26px rgba(2, 6, 23, 0.28)) !important;
  background: transparent !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body #companionPanel #companionThreeCanvas.companion-three-canvas[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-live2d-fallback {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-content: center !important;
  justify-items: center !important;
  gap: 8px !important;
  padding: 24px !important;
  color: var(--v51-muted) !important;
  text-align: center !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-live2d-fallback[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-live2d-fallback strong {
  color: var(--v51-text) !important;
  font-size: 15px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-live2d-fallback em {
  max-width: 210px !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1.45 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-live2d-loader {
  width: 30px !important;
  height: 30px !important;
  border: 3px solid var(--v51-blue-soft) !important;
  border-top-color: var(--v51-blue) !important;
  border-radius: 999px !important;
  animation: v51CompanionSpin 0.9s linear infinite !important;
}

@keyframes v51CompanionSpin {
  to { transform: rotate(360deg); }
}

html:not(.react-student-embedded) body #companionPanel .companion-model-angle,
html:not(.react-student-embedded) body #companionPanel .companion-model-state {
  position: absolute !important;
  z-index: 7 !important;
  bottom: 9px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  color: var(--v51-text) !important;
  background: color-mix(in srgb, var(--v51-card) 88%, transparent) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  backdrop-filter: blur(12px) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-angle {
  left: 9px !important;
  transform: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-state {
  right: 9px !important;
  max-width: 58% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-controls {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-controls button {
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 6px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border: 1px solid color-mix(in srgb, var(--v51-blue) 28%, transparent) !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-telemetry {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-telemetry span {
  min-height: 42px !important;
  padding: 7px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 9px !important;
  font-size: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-telemetry b {
  color: var(--v51-blue) !important;
  font-size: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-workspace {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto minmax(94px, 1fr) auto auto !important;
  gap: 10px !important;
  padding: 14px !important;
  overflow: auto !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow > span {
  min-width: 0 !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow b {
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  color: inherit !important;
  background: color-mix(in srgb, currentColor 10%, transparent) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow > span.is-active {
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-color: color-mix(in srgb, var(--v51-blue) 34%, transparent) !important;
  box-shadow: inset 0 -2px 0 var(--v51-blue) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow > span.is-complete {
  color: var(--v51-green) !important;
  background: color-mix(in srgb, var(--v51-green) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--v51-green) 28%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-board {
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  color: var(--v51-text) !important;
  background: color-mix(in srgb, var(--v51-card-soft) 92%, transparent) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 12px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-head {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-head > div:first-child {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-status {
  width: max-content !important;
  min-height: 21px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-status[data-tone="running"] {
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-status[data-tone="success"] {
  color: var(--v51-green) !important;
  background: color-mix(in srgb, var(--v51-green) 10%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-status:is([data-tone="warning"], [data-tone="error"]) {
  color: var(--v51-orange, #f59e0b) !important;
  background: color-mix(in srgb, var(--v51-orange, #f59e0b) 10%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel #companionAgentRunTitle {
  max-width: 320px !important;
  overflow: hidden !important;
  color: var(--v51-text) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-controls {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 5px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-controls button {
  min-height: 28px !important;
  padding: 0 8px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 8px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionStopTaskBtn {
  color: var(--v51-red, #ef4444) !important;
  border-color: color-mix(in srgb, var(--v51-red, #ef4444) 30%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps > li {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: start !important;
  padding: 7px !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps > li > span {
  width: 7px !important;
  height: 7px !important;
  margin-top: 3px !important;
  background: var(--v51-border) !important;
  border-radius: 999px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps > li.is-active > span {
  background: var(--v51-blue) !important;
  box-shadow: 0 0 0 4px var(--v51-blue-soft) !important;
  animation: v51AgentPulse 1.2s ease-in-out infinite !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps > li.is-complete > span {
  background: var(--v51-green) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps > li.is-stopped > span {
  background: var(--v51-orange, #f59e0b) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps div {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps strong,
html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps strong {
  color: var(--v51-text) !important;
  font-size: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps em {
  color: var(--v51-muted) !important;
  font-size: 8px !important;
  font-style: normal !important;
}

@keyframes v51AgentPulse {
  50% { opacity: 0.45; }
}

html:not(.react-student-embedded) body #companionPanel :is(.companion-brief-card, .companion-page-insight, .companion-memory-stat, .companion-message) {
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card > p {
  grid-column: 2 !important;
  color: var(--v51-muted) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-page-insight {
  padding: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .xiaowen-assistant-state-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body #companionPanel .xiaowen-assistant-state-list span {
  min-height: 32px !important;
  padding: 6px 8px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-blue-soft) !important;
  border: 1px solid color-mix(in srgb, var(--v51-blue) 18%, transparent) !important;
  border-radius: 9px !important;
  font-size: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-memory-hud {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-memory-stat {
  min-height: 48px !important;
  padding: 7px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-memory-stat strong {
  color: var(--v51-text) !important;
  font-size: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-memory-stat span {
  color: var(--v51-muted) !important;
  font-size: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionMessages.companion-messages {
  min-height: 94px !important;
  max-height: none !important;
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  padding: 2px 2px 6px !important;
  overflow: auto !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-message {
  display: grid !important;
  gap: 4px !important;
  padding: 9px 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-message.is-user {
  margin-left: 42px !important;
  background: var(--v51-blue-soft) !important;
  border-color: color-mix(in srgb, var(--v51-blue) 24%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-message :is(span, p) {
  color: var(--v51-text) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionActions.companion-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 0 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionActions button {
  min-height: 36px !important;
  padding: 0 10px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border: 1px solid color-mix(in srgb, var(--v51-blue) 22%, transparent) !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionForm.companion-input-row {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 9 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 7px !important;
  padding: 8px !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 12px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionInput {
  min-width: 0 !important;
  min-height: 40px !important;
  display: block !important;
  padding: 0 12px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 9px !important;
  outline: none !important;
}

html:not(.react-student-embedded) body #companionPanel #companionInput:focus {
  border-color: var(--v51-blue) !important;
  box-shadow: 0 0 0 3px var(--v51-blue-soft) !important;
}

html:not(.react-student-embedded) body #companionPanel #companionVoiceBtn,
html:not(.react-student-embedded) body #companionPanel #companionForm button[type="submit"] {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionVoiceBtn {
  color: var(--v51-muted) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body #companionPanel #companionForm button[type="submit"] {
  color: #fff !important;
  background: var(--v51-blue) !important;
  border: 1px solid var(--v51-blue) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #companionPanel :is(
  .companion-panel-head,
  .companion-agent-model-column,
  .companion-agent-workspace,
  .companion-brief-card,
  .companion-page-insight,
  .companion-memory-stat,
  .companion-message,
  #companionForm
) {
  color-scheme: dark !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-tags b {
  color: #8fb4ff !important;
  background: var(--v51-blue-soft) !important;
  border-color: rgba(22, 119, 255, 0.28) !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded {
    right: 12px !important;
    bottom: 12px !important;
    width: calc(100vw - 24px) !important;
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100vh - 24px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-agent-layout {
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-agent-model-column {
    grid-template-columns: minmax(170px, 0.8fr) minmax(210px, 1.2fr) !important;
    grid-template-rows: auto auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--v51-border) !important;
  }

  html:not(.react-student-embedded) body #companionPanel #companionModelViewer.companion-model-viewer {
    grid-row: 1 / span 2 !important;
    min-height: 260px !important;
  }
}

@media (max-width: 620px) {
  html:not(.react-student-embedded) body #companionPanel .companion-panel-head {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-panel-tools {
    grid-column: 1 / -1 !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-agent-model-column {
    grid-template-columns: 1fr !important;
    grid-template-rows: 300px auto auto !important;
  }

  html:not(.react-student-embedded) body #companionPanel #companionModelViewer.companion-model-viewer {
    grid-row: auto !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-memory-hud,
  html:not(.react-student-embedded) body #companionPanel .xiaowen-assistant-state-list,
  html:not(.react-student-embedded) body #companionPanel #companionActions.companion-actions,
  html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps {
    grid-template-columns: 1fr 1fr !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-agent-run-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html:not(.react-student-embedded) body #companionPanel #companionForm.companion-input-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html:not(.react-student-embedded) body #companionPanel #companionVoiceBtn {
    display: none !important;
  }
}

/* Theme interaction + navigation convergence. Keep this final layer limited to
   colors so switching appearance can never disturb page geometry. */
html:not(.react-student-embedded) .theme-option.is-selected {
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-color: color-mix(in srgb, var(--v51-blue) 38%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v51-blue) 14%, transparent) !important;
}

html:not(.react-student-embedded):not([data-theme="dark"]) body .sidebar {
  color: #334155 !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(22, 119, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%) !important;
  border-right-color: rgba(100, 116, 139, 0.16) !important;
  box-shadow: 12px 0 32px rgba(15, 23, 42, 0.06) !important;
}

html:not(.react-student-embedded):not([data-theme="dark"]) body .sidebar :is(
  .brand,
  .brand-head,
  .sidebar-foot,
  .sidebar-account-card,
  .sidebar-account-button
) {
  color: #334155 !important;
  background: transparent !important;
  border-color: rgba(100, 116, 139, 0.14) !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded):not([data-theme="dark"]) body .sidebar :is(
  .brand-copy,
  .brand-title,
  .sidebar-account-copy strong,
  .menu-item:not(.active)
) {
  color: #334155 !important;
}

html:not(.react-student-embedded):not([data-theme="dark"]) body .sidebar :is(
  .brand-subtitle,
  .brand-subtitle-text,
  .sidebar-section,
  .sidebar-account-copy em,
  .sidebar-foot p
) {
  color: #64748b !important;
}

html:not(.react-student-embedded):not([data-theme="dark"]) body .sidebar .menu-item:not(.active):hover {
  color: #0f172a !important;
  background: rgba(22, 119, 255, 0.08) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar {
  color: #dbe7f5 !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(22, 119, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #0b1526 0%, #08111f 100%) !important;
  border-right-color: rgba(126, 151, 184, 0.16) !important;
  box-shadow: 14px 0 38px rgba(2, 8, 23, 0.24) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar :is(
  .brand,
  .brand-head,
  .sidebar-foot,
  .sidebar-account-card,
  .sidebar-account-button
) {
  color: #dbe7f5 !important;
  background: transparent !important;
  border-color: rgba(126, 151, 184, 0.16) !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar :is(
  .brand-copy,
  .brand-title,
  .sidebar-account-copy strong,
  .menu-item:not(.active)
) {
  color: #dbe7f5 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar :is(
  .brand-subtitle,
  .brand-subtitle-text,
  .sidebar-section,
  .sidebar-account-copy em,
  .sidebar-foot p
) {
  color: #8fa3bb !important;
}

/* Known legacy cards used by the seven V5 workspaces still contain hard-coded
   white gradients. This final, dark-only guard removes those isolated flashes. */
html[data-theme="dark"]:not(.react-student-embedded) body .main .panel.active :is(
  .interview-weak-bank-item,
  .engineering-assets-overview,
  .engineering-lab-hero,
  .project-summary-metrics > span,
  .project-ability-gain > span,
  .engineer-dossier-summary,
  .engineer-dossier-card,
  .engineer-dossier-skill-list > span,
  .growth-capability-proof-grid > div
) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

/* React can embed the same workspace with `?embedded=react-student`. Layout
   rules intentionally stay isolated in that mode, but color rules must still
   follow the effective theme. Keep this terminal layer color-only so the
   standalone and embedded clients render the same dark surfaces. */
html.react-student-embedded[data-theme="dark"] {
  color-scheme: dark;
  --v51-bg: #0b1220;
  --v51-surface: #111827;
  --v51-card: #111827;
  --v51-card-soft: #162238;
  --v51-text: #edf4ff;
  --v51-muted: #9fb1c7;
  --v51-border: rgba(126, 151, 184, 0.2);
}

html.react-student-embedded[data-theme="dark"] body,
html.react-student-embedded[data-theme="dark"] body .shell,
html.react-student-embedded[data-theme="dark"] body .main,
html.react-student-embedded[data-theme="dark"] body .panel.active {
  color: var(--v51-text) !important;
  background-color: var(--v51-bg) !important;
}

html.react-student-embedded[data-theme="dark"] body .main .panel.active :is(
  .section-card,
  .interview-weak-bank-item,
  .interview-training-metrics > span,
  .interview-question-requirements li,
  .interview-answer-mode-toggle,
  .xiaowen-live-interview-coach,
  .engineering-assets-overview,
  .engineering-lab-hero,
  .engineering-entry-card,
  .engineering-lab-task,
  .project-today-card,
  .project-my-assistant,
  .project-loop-board,
  .project-route-overview,
  .project-case-xiaowen,
  .skill-training-group,
  .engineering-lab-entry,
  .project-summary-metrics > span,
  .project-ability-gain > span,
  .engineer-dossier-summary,
  .engineer-dossier-card,
  .engineer-dossier-skill-list > span,
  .engineer-growth-proof-timeline > span,
  .engineer-proof-list > span,
  .growth-capability-proof-grid > div,
  .learning-library-section,
  .learning-formula-grid > article,
  .learning-record-card,
  .workspace-app-grid > button
) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html.react-student-embedded[data-theme="dark"] body .main .panel.active :is(
  .section-card,
  .interview-weak-bank-item,
  .engineering-assets-overview,
  .engineering-lab-hero,
  .project-today-card,
  .project-my-assistant,
  .project-loop-board,
  .project-route-overview,
  .project-case-xiaowen,
  .engineer-dossier-summary,
  .engineer-dossier-card,
  .learning-library-section,
  .learning-formula-grid > article,
  .learning-record-card,
  .workspace-app-grid > button
) :is(h1, h2, h3, h4, strong, b) {
  color: var(--v51-text) !important;
}

html.react-student-embedded[data-theme="dark"] body .main .panel.active :is(
  .section-card,
  .interview-weak-bank-item,
  .engineering-assets-overview,
  .engineering-lab-hero,
  .project-today-card,
  .project-my-assistant,
  .project-loop-board,
  .project-route-overview,
  .project-case-xiaowen,
  .engineer-dossier-summary,
  .engineer-dossier-card,
  .learning-library-section,
  .learning-formula-grid > article,
  .learning-record-card,
  .workspace-app-grid > button
) :is(p, em, small) {
  color: var(--v51-muted) !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="question-bank"] .question-training-center .question-training-section[hidden] {
  display: none !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="project-practice"] .main :is(
  .engineering-asset-kpi,
  .engineering-asset-card,
  .engineering-asset-card > p,
  .project-home-loop-strip,
  .project-all-projects,
  .project-home-card,
  .project-loop-step,
  .project-detail-section,
  .project-intro-diagram,
  .project-architecture-board,
  .project-architecture-node,
  .project-route-step,
  .project-source-list > button,
  .project-case-grid > article,
  .project-case-template-preview,
  .project-case-xiaowen-modes > section,
  .project-debug-layout > aside,
  .project-waveform-layout > aside,
  .project-coach-answer,
  .project-intro-facts > span
) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="project-practice"] .main :is(
  .engineering-asset-kpi,
  .engineering-asset-card,
  .project-home-card,
  .project-loop-step,
  .project-detail-section,
  .project-intro-diagram,
  .project-architecture-node,
  .project-route-step,
  .project-case-grid > article,
  .project-case-template-preview,
  .project-case-xiaowen-modes > section,
  .project-debug-layout > aside,
  .project-waveform-layout > aside,
  .project-coach-answer,
  .project-intro-facts > span
) :is(h1, h2, h3, h4, strong, b) {
  color: var(--v51-text) !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="interview"] .main :is(
  #interviewStudio,
  #interviewCoachRoom,
  .interview-main-dashboard .section-head,
  .interview-arena-block,
  .interview-answer-live-card,
  .interview-waveform,
  .interview-answer-transcript-body
) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="interview"] .main :is(
  #interviewCoachRoom,
  .interview-arena-block,
  .interview-answer-live-card,
  .interview-answer-transcript-body
) :is(h1, h2, h3, h4, strong, b) {
  color: var(--v51-text) !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="audio"] .main :is(
  .audio-status-hero,
  .audio-training-card,
  .audio-timeline-panel,
  .audio-cabin-timeline-item,
  .audio-review-main,
  .audio-main-card,
  .audio-compare-grid > section,
  .audio-comment-columns > section,
  .audio-transcript-editor,
  .audio-transcript-editor > textarea,
  #audioTranscript,
  .audio-coach-panel,
  .audio-coach-card,
  .audio-action-bar
),
html.react-student-embedded[data-theme="dark"] body[data-active-panel="debug-lab"] .main :is(
  .debug-case-group,
  .debug-case-chip,
  .debug-mission-hero,
  .debug-card,
  .debug-work-step,
  .debug-standard-path-item,
  .debug-xiaowen-step,
  .debug-exclusion-item,
  .debug-wave-metrics > div,
  .debug-growth-score-item,
  .debug-phenomenon-card,
  .debug-before-after,
  .debug-before-after > div,
  .debug-report-item,
  .debug-ai-record-list > i,
  .debug-xiaowen-current,
  .debug-wave-context,
  .debug-waveform-card,
  .debug-proof-list
),
html.react-student-embedded[data-theme="dark"] body[data-active-panel="waveform"] .main .waveform-screenshot-assistant,
html.react-student-embedded[data-theme="dark"] body[data-active-panel="growth-profile"] .main :is(
  .growth-archive-hero,
  .growth-archive-card,
  .growth-archive-ai-summary > div > span,
  .growth-archive-answer-strip > article,
  .growth-archive-skill-domain,
  .growth-archive-project,
  .growth-archive-impression > section,
  .growth-archive-job-list > button,
  .growth-archive-evidence > article,
  .growth-archive-plan > button,
  .growth-capability-proof
),
html.react-student-embedded[data-theme="dark"] body[data-active-panel="training-summary"] .main .training-summary-flow > span {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html.react-student-embedded[data-theme="dark"] body :is(
  .audio-status-hero,
  .audio-training-card,
  .audio-review-main,
  .audio-main-card,
  .audio-coach-card,
  .debug-mission-hero,
  .debug-card,
  .debug-phenomenon-card,
  .debug-report-item,
  .waveform-screenshot-assistant,
  .growth-archive-hero,
  .growth-archive-card,
  .growth-archive-answer-strip > article,
  .growth-archive-skill-domain
) :is(h1, h2, h3, h4, strong, b) {
  color: var(--v51-text) !important;
}

html.react-student-embedded[data-theme="dark"] body :is(
  .audio-status-hero,
  .audio-training-card,
  .audio-review-main,
  .audio-main-card,
  .audio-coach-card,
  .debug-mission-hero,
  .debug-card,
  .debug-phenomenon-card,
  .debug-report-item,
  .waveform-screenshot-assistant,
  .growth-archive-hero,
  .growth-archive-card,
  .growth-archive-answer-strip > article,
  .growth-archive-skill-domain
) :is(p, em, small) {
  color: var(--v51-muted) !important;
}

/* Sidebar theme terminal layer.
   Older geometry locks intentionally use very specific selectors and
   !important declarations. Mirror that specificity here, but only for color,
   so expanded/collapsed geometry remains untouched while appearance follows
   the effective light/dark theme. */
html[data-theme="light"]:not(.react-student-embedded) {
  --v51-sidebar-text: #334155;
  --v51-sidebar-muted: #64748b;
  --v51-sidebar-bg:
    radial-gradient(circle at 88% 8%, rgba(22, 119, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
  --v51-sidebar-border: rgba(100, 116, 139, 0.16);
  --v51-sidebar-shadow: 12px 0 32px rgba(15, 23, 42, 0.06);
  --v51-sidebar-hover: rgba(22, 119, 255, 0.08);
  --v51-sidebar-account: rgba(255, 255, 255, 0.82);
  --v51-sidebar-toggle: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"]:not(.react-student-embedded) {
  --v51-sidebar-text: #dbe7f5;
  --v51-sidebar-muted: #8fa3bb;
  --v51-sidebar-bg:
    radial-gradient(circle at 88% 8%, rgba(22, 119, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #0b1526 0%, #08111f 100%);
  --v51-sidebar-border: rgba(126, 151, 184, 0.16);
  --v51-sidebar-shadow: 14px 0 38px rgba(2, 8, 23, 0.24);
  --v51-sidebar-hover: rgba(79, 131, 255, 0.1);
  --v51-sidebar-account: rgba(15, 23, 42, 0.46);
  --v51-sidebar-toggle: rgba(15, 23, 42, 0.5);
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar,
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar {
  color: var(--v51-sidebar-text) !important;
  background: var(--v51-sidebar-bg) !important;
  border-right-color: var(--v51-sidebar-border) !important;
  box-shadow: var(--v51-sidebar-shadow) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar :is(
  .brand-subtitle-text,
  .sidebar-section,
  .menu-section-label,
  .sidebar-account-copy small,
  .sidebar-account-copy em,
  .sidebar-account-button i
) {
  color: var(--v51-sidebar-muted) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .menu.menu .menu-item.menu-item:not(.active):not(.is-active),
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-bottom-zone.sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link:not(.active):not(.is-active) {
  color: var(--v51-sidebar-text) !important;
  background: transparent !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .menu.menu .menu-item.menu-item:not(.active):not(.is-active):hover,
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-bottom-zone.sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link:not(.active):not(.is-active):hover {
  color: var(--v51-sidebar-text) !important;
  background: var(--v51-sidebar-hover) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .menu.menu .menu-item.menu-item :is(.menu-item-label, .menu-item-icon),
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-bottom-zone.sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link :is(.menu-item-label, .menu-item-icon) {
  color: inherit !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .menu.menu .menu-item.menu-item:is(.active, .is-active),
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-bottom-zone.sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link:is(.active, .is-active) {
  color: #ffffff !important;
  background: linear-gradient(90deg, #2563eb 0%, #6d5dfc 58%, #9333ea 100%) !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-bottom-zone.sidebar-bottom-zone {
  border-top-color: var(--v51-sidebar-border) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-account-card.sidebar-account-card {
  color: var(--v51-sidebar-text) !important;
  background: var(--v51-sidebar-account) !important;
  border-color: var(--v51-sidebar-border) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-account-card.sidebar-account-card .sidebar-account-copy strong {
  color: var(--v51-sidebar-text) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar #sidebarToggle.sidebar-toggle {
  color: var(--v51-sidebar-text) !important;
  background: var(--v51-sidebar-toggle) !important;
  border-color: var(--v51-sidebar-border) !important;
}

/* Top search terminal layer. Legacy homepage locks used a more specific light
   input rule, leaving the dark placeholder unreadable and the input at its
   default 20-character width. Keep the field stretched across its grid track
   and let the current design tokens control both themes. */
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .topbar.topbar .topbar-search.topbar-search > #topbarCommandInput {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  inline-size: 100% !important;
  grid-column: 2 / 3 !important;
  justify-self: stretch !important;
  align-self: center !important;
  padding: 0 !important;
  color: var(--v51-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .topbar.topbar .topbar-search.topbar-search > .topbar-search-icon {
  position: static !important;
  inset: auto !important;
  grid-column: 1 / 2 !important;
  place-self: center !important;
  transform: none !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .topbar.topbar .topbar-search.topbar-search > #topbarCommandInput::placeholder {
  color: var(--v51-muted) !important;
  opacity: 1 !important;
}

html[data-theme="dark"][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .topbar.topbar .topbar-search.topbar-search > .topbar-search-icon {
  color: #9fb3ca !important;
  background: rgba(22, 119, 255, 0.12) !important;
}

/* V5.1 home convergence: the task card already contains XiaoWen's reason and
   recommendation. Keeping a second assistant card beside it duplicated the
   same message and pushed growth below the fold on 1366/1440px screens. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="ai-advice"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="ai-advice"] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="v5-command-center"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="v5-command-center"] {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Ordinary-user settings must never expose the independent administrator
   console, even if an older cached HTML copy still contains the legacy card. */
html:not(.react-student-embedded) .user-settings-admin-entry {
  display: none !important;
}

/* Training center uses one focused content lane at a time instead of stacking
   skill, mistake and role libraries into one long tools page. */
html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-training-center .question-training-section[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .v51-training-entry-grid > button.is-active {
  color: var(--v51-text) !important;
  border-color: color-mix(in srgb, var(--v51-blue) 58%, transparent) !important;
  background: var(--v51-blue-soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v51-blue) 18%, transparent) !important;
}

/* Feishu-style asset workspace: the first row launches the four concrete
   applications, while the knowledge search remains the active app below. */
html:not(.react-student-embedded) .v51-asset-app-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:not(.react-student-embedded) .v51-asset-app-grid > button {
  min-height: 118px !important;
  padding: 18px !important;
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .v51-asset-app-grid > button:hover {
  border-color: color-mix(in srgb, var(--v51-blue) 48%, transparent) !important;
  transform: translateY(-1px) !important;
}

html:not(.react-student-embedded) .v51-asset-app-grid span {
  width: fit-content !important;
  padding: 4px 9px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .v51-asset-app-grid strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) .v51-asset-app-grid em {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) .v51-asset-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Real asset overview is now rendered inside Engineering Training as well as
   the legacy project page, so it needs workbench-scoped styling. */
html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview {
  display: grid !important;
  grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin: 0 0 20px !important;
  padding: 22px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview-head {
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview-head > span {
  color: var(--v51-blue) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview-head h3 {
  margin: 0 !important;
  color: var(--v51-text) !important;
  font-size: 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview-head p {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  line-height: 1.65 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi {
  min-height: 126px !important;
  padding: 16px !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi span,
html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi strong,
html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi em {
  display: block !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi strong {
  color: var(--v51-text) !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi em {
  color: var(--v51-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1.4 !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview {
    grid-template-columns: 1fr !important;
  }
}

/* Terminal overrides for the five-workspace shell. Keep this block last so
   legacy sidebar masks and white engineering-card backgrounds cannot win. */
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar .menu.menu > .menu-item.menu-item {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .menu-item::before {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .menu-item-icon {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: currentColor !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html:not(.react-student-embedded) .shell.sidebar-collapsed .menu-item-label {
  display: none !important;
}

html:not(.react-student-embedded) .workspace-app-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:not(.react-student-embedded) .workspace-app-grid > button {
  min-width: 0 !important;
  min-height: 116px !important;
  padding: 17px !important;
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) .workspace-app-grid > button,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-entry-card,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="knowledge-map"] :is(.learning-library-section, .learning-formula-grid > article, .learning-record-card) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) .workspace-app-grid,
  html:not(.react-student-embedded) .learning-formula-grid,
  html:not(.react-student-embedded) .learning-record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  html:not(.react-student-embedded) .workspace-app-grid,
  html:not(.react-student-embedded) .learning-formula-grid,
  html:not(.react-student-embedded) .learning-record-grid {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL focused-home placement — this must remain the last homepage rule. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace {
  padding-top: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-welcome-panel[data-home-module-key="welcome"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-workbench-task[data-home-module-key="v5-command-center"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-growth-card[data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-home-shortcuts[data-home-module-key="shortcuts"] {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[hidden],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-ai-assistant[data-home-module-key="ai-advice"] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-welcome-panel[data-home-module-key="welcome"] {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 102px !important;
  padding: 16px 22px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-workbench-task[data-home-module-key="v5-command-center"] {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 28px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-today-advice h1 {
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: 1.15 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-growth-card[data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-home-shortcuts[data-home-module-key="shortcuts"] {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 24px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-list {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-item {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.2fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 18px 20px !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-task-body {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-home-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-item,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-home-shortcut-grid {
    grid-template-columns: 1fr !important;
  }
}


/* source: xiaowen-simple-assistant.css */
/* XiaoWen task agent — compact entry + one true Three.js / VRM 3D task workspace. */
html:not(.react-student-embedded) body #companionAmbientStage {
  display: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-simple-assistant {
  position: fixed !important;
  inset: auto 18px 18px auto !important;
  z-index: 2200 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-simple-assistant[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-collapsed.companion-simple-assistant {
  width: 286px !important;
  min-width: 286px !important;
  max-width: min(286px, calc(100vw - 36px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-collapsed.companion-simple-assistant #companionMini.companion-simple-card {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px !important;
  color: var(--v51-text, #0f172a) !important;
  text-align: left !important;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--v51-blue, #2563eb) 13%, transparent), transparent 38%),
    color-mix(in srgb, var(--v51-card, #fff) 96%, transparent) !important;
  border: 1px solid var(--v51-border, rgba(148, 163, 184, 0.24)) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18) !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  transform: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

html:not(.react-student-embedded) body #companionDock #companionMini.companion-simple-card::before,
html:not(.react-student-embedded) body #companionDock #companionMini.companion-simple-card::after {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body #companionDock #companionMini:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--v51-blue, #2563eb) 26%, transparent) !important;
  outline-offset: 3px !important;
}

html:not(.react-student-embedded) body #companionDock .companion-simple-head {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 38px !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body #companionDock .companion-mini-token,
html:not(.react-student-embedded) body #companionPanel .companion-panel-avatar-token,
html:not(.react-student-embedded) body #companionPanel .companion-brief-avatar-token {
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: linear-gradient(145deg, #2563eb, #7c3aed 68%, #ec4899) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 12px !important;
  box-shadow: 0 9px 20px rgba(79, 70, 229, 0.24) !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body #companionDock .companion-mini-token {
  width: 38px !important;
  height: 38px !important;
  font-size: 16px !important;
}

html:not(.react-student-embedded) body #companionDock .companion-mini-identity {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

html:not(.react-student-embedded) body #companionDock .companion-mini-identity strong {
  display: block !important;
  color: var(--v51-text, #0f172a) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

html:not(.react-student-embedded) body #companionDock .companion-mini-identity small {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--v51-muted, #64748b) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

html:not(.react-student-embedded) body #companionDock .companion-simple-online {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  display: inline-block !important;
  background: var(--v51-green, #22c55e) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v51-green, #22c55e) 15%, transparent) !important;
}

html:not(.react-student-embedded) body #companionDock #companionMiniOpenBtn {
  min-width: 48px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  color: var(--v51-blue, #2563eb) !important;
  background: var(--v51-blue-soft, rgba(37, 99, 235, 0.1)) !important;
  border: 1px solid color-mix(in srgb, var(--v51-blue, #2563eb) 24%, transparent) !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body #companionDock .companion-simple-suggestion {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  background: var(--v51-card-soft, #f8fafc) !important;
  border: 1px solid var(--v51-border, rgba(148, 163, 184, 0.2)) !important;
  border-radius: 11px !important;
}

html:not(.react-student-embedded) body #companionDock .companion-simple-suggestion span {
  position: static !important;
  display: block !important;
  color: var(--v51-muted, #64748b) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionDock .companion-simple-suggestion strong {
  position: static !important;
  display: block !important;
  min-width: 0 !important;
  color: var(--v51-text, #0f172a) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionDock #companionMiniStartBtn {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: linear-gradient(135deg, #2563eb, #6d5dfc) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

html:not(.react-student-embedded) body #companionDock #companionMiniStartBtn:hover,
html:not(.react-student-embedded) body #companionDock #companionMiniOpenBtn:hover {
  filter: brightness(1.05) !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant {
  width: min(920px, calc(100vw - 108px)) !important;
  min-width: min(920px, calc(100vw - 108px)) !important;
  max-width: min(920px, calc(100vw - 108px)) !important;
  height: min(720px, calc(100vh - 36px)) !important;
  min-height: min(620px, calc(100vh - 36px)) !important;
  max-height: min(720px, calc(100vh - 36px)) !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-fullscreen.companion-simple-assistant {
  inset: 14px 14px 14px max(86px, calc(var(--sidebar-w, 72px) + 14px)) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-expanded #companionMini {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionPanel.companion-panel[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-expanded #companionPanel.companion-panel {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-model-column,
html:not(.react-student-embedded) body #companionPanel #companionModelViewer,
html:not(.react-student-embedded) body #companionPanel .companion-model-controls,
html:not(.react-student-embedded) body #companionPanel .companion-model-telemetry {
  visibility: visible !important;
  opacity: 1 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-model-column {
  display: grid !important;
}

html:not(.react-student-embedded) body #companionPanel #companionModelViewer {
  display: grid !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-controls,
html:not(.react-student-embedded) body #companionPanel .companion-model-telemetry {
  display: grid !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-drag-handle {
  display: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-workspace {
  grid-template-rows: auto auto auto auto auto auto minmax(96px, 1fr) auto auto !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-commandbar {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 7px !important;
  color: var(--v51-text, #0f172a) !important;
  background: var(--v51-card-soft, #f8fafc) !important;
  border: 1px solid var(--v51-border, rgba(148, 163, 184, 0.2)) !important;
  border-radius: 11px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-mode-switch,
html:not(.react-student-embedded) body #companionPanel .companion-agent-context {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-mode-switch button {
  min-height: 28px !important;
  padding: 0 9px !important;
  color: var(--v51-muted, #64748b) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-mode-switch button.is-active {
  color: var(--v51-blue, #2563eb) !important;
  background: var(--v51-card, #fff) !important;
  border-color: color-mix(in srgb, var(--v51-blue, #2563eb) 24%, transparent) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-mode-switch button:disabled {
  cursor: not-allowed !important;
  opacity: 0.58 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-context {
  justify-content: flex-end !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-context span {
  min-width: 0 !important;
  min-height: 23px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 7px !important;
  overflow: hidden !important;
  color: var(--v51-muted, #64748b) !important;
  background: color-mix(in srgb, var(--v51-card, #fff) 84%, transparent) !important;
  border: 1px solid var(--v51-border, rgba(148, 163, 184, 0.2)) !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionPanel #companionInput {
  min-width: 0 !important;
  min-height: 52px !important;
  max-height: 112px !important;
  resize: vertical !important;
  padding: 9px 12px !important;
  color: var(--v51-text, #0f172a) !important;
  background: var(--v51-card-soft, #f8fafc) !important;
  border: 1px solid var(--v51-border, rgba(148, 163, 184, 0.22)) !important;
  border-radius: 9px !important;
  outline: none !important;
  font: inherit !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionInput:focus {
  border-color: var(--v51-blue, #2563eb) !important;
  box-shadow: 0 0 0 3px var(--v51-blue-soft, rgba(37, 99, 235, 0.1)) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #companionDock #companionMini.companion-simple-card {
  color: var(--v51-text, #edf4ff) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.2), transparent 38%),
    color-mix(in srgb, var(--v51-card, #111827) 96%, transparent) !important;
  border-color: var(--v51-border, rgba(126, 151, 184, 0.2)) !important;
  box-shadow: 0 18px 48px rgba(2, 8, 23, 0.48) !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant {
    inset: auto 12px 12px auto !important;
    width: calc(100vw - 24px) !important;
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100vh - 24px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 24px) !important;
  }
}

@media (max-width: 680px) {
  html:not(.react-student-embedded) body #companionDock.companion-dock.companion-collapsed.companion-simple-assistant {
    inset: auto 12px 12px auto !important;
    width: min(286px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-agent-commandbar {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-agent-context {
    justify-content: flex-start !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-agent-context span:last-child {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.react-student-embedded) body #companionDock *,
  html:not(.react-student-embedded) body #companionPanel * {
    scroll-behavior: auto !important;
  }
}

/* Final specificity bridge over the old collapsed-orb locks. */
html:not(.react-student-embedded) body[data-active-panel] #companionDock.companion-dock.companion-collapsed.companion-simple-assistant #companionMini.companion-simple-card > .companion-simple-head {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel] #companionDock.companion-dock.companion-collapsed.companion-simple-assistant #companionMini.companion-simple-card > .companion-simple-suggestion {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] #companionDock.companion-dock.companion-collapsed.companion-simple-assistant #companionMini.companion-simple-card > #companionMiniStartBtn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 36px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel] #companionDock.companion-dock.companion-collapsed.companion-simple-assistant #companionMini.companion-simple-card #companionMiniName,
html:not(.react-student-embedded) body[data-active-panel] #companionDock.companion-dock.companion-collapsed.companion-simple-assistant #companionMini.companion-simple-card #companionMiniState,
html:not(.react-student-embedded) body[data-active-panel] #companionDock.companion-dock.companion-collapsed.companion-simple-assistant #companionMini.companion-simple-card #companionMiniText,
html:not(.react-student-embedded) body[data-active-panel] #companionDock.companion-dock.companion-collapsed.companion-simple-assistant #companionMini.companion-simple-card #companionMiniOpenBtn {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  text-indent: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] #companionDock.companion-dock.companion-collapsed.companion-simple-assistant #companionMini.companion-simple-card #companionMiniOpenBtn {
  display: inline-flex !important;
  min-width: 48px !important;
  min-height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

/* V45 — one true 3D XiaoWen, standing independently like the Codex companion. */
html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock {
  --xiaowen-standalone-width: clamp(154px, 9vw, 190px);
  --xiaowen-standalone-height: clamp(258px, 16vw, 320px);
  position: fixed !important;
  inset: auto max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) auto !important;
  z-index: 2210 !important;
  display: block !important;
  width: var(--xiaowen-standalone-width) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--xiaowen-standalone-height) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--v51-text, #0f172a) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  isolation: isolate !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock[hidden],
html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock.companion-avatar-fullscreen {
  display: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock.companion-position-left {
  inset: auto auto max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
}

html:not(.react-student-embedded) body #companionAvatarDock #companionAmbientModel.companion-standalone-model {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock #companionAmbientModel.companion-standalone-model::before {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock #companionAmbientModel.companion-standalone-model::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 50% !important;
  bottom: 2px !important;
  display: block !important;
  width: min(104px, 70%) !important;
  height: 16px !important;
  background: radial-gradient(ellipse, rgba(37, 99, 235, 0.28), rgba(79, 70, 229, 0.1) 46%, transparent 74%) !important;
  border: 0 !important;
  border-radius: 50% !important;
  filter: blur(4px) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock #companionModelViewer.companion-model-viewer {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  cursor: grab !important;
  touch-action: none !important;
  pointer-events: auto !important;
}

html:not(.react-student-embedded) body #companionAvatarDock #companionModelViewer.companion-model-viewer:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--v51-blue, #2563eb) 64%, transparent) !important;
  outline-offset: 4px !important;
  border-radius: 28px !important;
}

html:not(.react-student-embedded) body #companionAvatarDock #companionModelViewer.companion-model-viewer.is-rotating {
  cursor: grabbing !important;
}

html:not(.react-student-embedded) body #companionAvatarDock #companionModelViewer.companion-model-viewer::before,
html:not(.react-student-embedded) body #companionAvatarDock #companionModelViewer.companion-model-viewer::after {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock #companionThreeCanvas.companion-three-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 17px 15px rgba(15, 23, 42, 0.2)) !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock #companionThreeCanvas.companion-three-canvas[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-live2d-fallback {
  position: absolute !important;
  inset: 34% 8px auto !important;
  display: grid !important;
  place-items: center !important;
  gap: 5px !important;
  min-height: 82px !important;
  padding: 10px !important;
  text-align: center !important;
  background: color-mix(in srgb, var(--v51-card, #fff) 82%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--v51-border, #dbe5f1) 72%, transparent) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px) !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-live2d-fallback[hidden],
html:not(.react-student-embedded) body #companionAvatarDock .companion-model-angle,
html:not(.react-student-embedded) body #companionAvatarDock .companion-model-state,
html:not(.react-student-embedded) body #companionAvatarDock .companion-model-controls,
html:not(.react-student-embedded) body #companionAvatarDock .companion-model-telemetry {
  display: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-avatar-hint {
  position: absolute !important;
  z-index: 2 !important;
  top: 48% !important;
  right: calc(100% - 12px) !important;
  display: grid !important;
  gap: 1px !important;
  width: max-content !important;
  max-width: 150px !important;
  padding: 8px 11px !important;
  color: var(--v51-text, #0f172a) !important;
  text-align: left !important;
  background: color-mix(in srgb, var(--v51-card, #fff) 90%, transparent) !important;
  border: 1px solid var(--v51-border, rgba(148, 163, 184, 0.28)) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(8px, -50%) scale(0.96) !important;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-avatar-hint strong {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-avatar-hint span {
  color: var(--v51-muted, #64748b) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

html:not(.react-student-embedded) body #companionAvatarDock:hover .companion-avatar-hint,
html:not(.react-student-embedded) body #companionAvatarDock:focus-within .companion-avatar-hint {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(0, -50%) scale(1) !important;
}

html:not(.react-student-embedded) body #companionAvatarDock.companion-position-left .companion-avatar-hint {
  right: auto !important;
  left: calc(100% - 12px) !important;
  text-align: right !important;
  transform: translate(-8px, -50%) scale(0.96) !important;
}

html:not(.react-student-embedded) body #companionAvatarDock.companion-position-left:hover .companion-avatar-hint,
html:not(.react-student-embedded) body #companionAvatarDock.companion-position-left:focus-within .companion-avatar-hint {
  transform: translate(0, -50%) scale(1) !important;
}

html:not(.react-student-embedded) body #companionMini,
html:not(.react-student-embedded) body #companionDock.companion-collapsed {
  display: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant:not(.companion-fullscreen) {
  position: fixed !important;
  inset: auto calc(clamp(154px, 9vw, 190px) + 28px) 16px auto !important;
  z-index: 2200 !important;
  display: block !important;
  width: clamp(560px, 40vw, 720px) !important;
  min-width: 0 !important;
  max-width: calc(100vw - clamp(154px, 9vw, 190px) - 58px) !important;
  height: min(720px, calc(100vh - 32px)) !important;
  min-height: 480px !important;
  max-height: calc(100vh - 32px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant.companion-position-left:not(.companion-fullscreen) {
  inset: auto auto 16px calc(clamp(154px, 9vw, 190px) + 28px) !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded #companionPanel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionDock #companionPanel[hidden],
html:not(.react-student-embedded) body #companionDock[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-model-column {
  display: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-workspace {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #companionAvatarDock .companion-avatar-hint,
html[data-theme="dark"]:not(.react-student-embedded) body #companionAvatarDock .companion-live2d-fallback {
  background: color-mix(in srgb, var(--v51-card, #111827) 88%, transparent) !important;
  border-color: var(--v51-border, rgba(126, 151, 184, 0.24)) !important;
  box-shadow: 0 14px 34px rgba(2, 8, 23, 0.46) !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock {
    --xiaowen-standalone-width: 142px;
    --xiaowen-standalone-height: 248px;
  }

  html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant:not(.companion-fullscreen) {
    inset: auto 170px 12px auto !important;
    width: min(620px, calc(100vw - 188px)) !important;
    max-width: calc(100vw - 188px) !important;
    height: min(700px, calc(100vh - 24px)) !important;
    max-height: calc(100vh - 24px) !important;
  }
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock {
    --xiaowen-standalone-width: 112px;
    --xiaowen-standalone-height: 196px;
    inset: auto 8px 8px auto !important;
  }

  html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock.companion-avatar-panel-open {
    display: none !important;
  }

  html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant:not(.companion-fullscreen) {
    inset: 12px !important;
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100vh - 24px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 24px) !important;
  }
}

@media (max-width: 620px) {
  html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock {
    --xiaowen-standalone-width: 96px;
    --xiaowen-standalone-height: 168px;
  }

  html:not(.react-student-embedded) body #companionAvatarDock .companion-avatar-hint {
    display: none !important;
  }
}

@supports selector(body:has(*)) {
  html:not(.react-student-embedded) body:has(#mobileActionDock:not([hidden])) #companionAvatarDock.companion-avatar-dock {
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.react-student-embedded) body #companionAvatarDock .companion-avatar-hint {
    transition: none !important;
  }
}

/* V50 — Codex-style assistant: one freely draggable launcher and one compact popover. */
html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock {
  --xiaowen-standalone-width: clamp(148px, 10vw, 188px) !important;
  --xiaowen-standalone-height: clamp(258px, 17vw, 316px) !important;
  inset: auto max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) auto !important;
  width: var(--xiaowen-standalone-width) !important;
  height: var(--xiaowen-standalone-height) !important;
  transition: filter 150ms ease, transform 150ms ease !important;
  will-change: left, top, transform !important;
}

html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock.companion-position-left {
  inset: auto auto max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
}

html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock.companion-avatar-panel-open {
  display: block !important;
}

html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock.is-dragging {
  filter: drop-shadow(0 18px 24px rgba(37, 99, 235, 0.3)) !important;
  transform: scale(1.035) !important;
}

html:not(.react-student-embedded) body #companionAvatarDock #companionModelViewer.companion-model-viewer {
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock.is-dragging #companionModelViewer.companion-model-viewer {
  cursor: grabbing !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-avatar-hint {
  top: 44% !important;
  max-width: 172px !important;
  padding: 7px 10px !important;
  border-radius: 11px !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-avatar-hint strong {
  font-size: 11px !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-avatar-hint span {
  font-size: 9px !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant,
html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant.companion-position-left,
html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant.companion-fullscreen {
  position: fixed !important;
  inset: auto !important;
  left: 12px !important;
  top: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2200 !important;
  width: min(390px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  height: min(520px, calc(100vh - 24px)) !important;
  min-height: 0 !important;
  max-height: calc(100vh - 24px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/*
 * The legacy workbench stylesheet gives the old drawer an extra
 * :not(.companion-fullscreen) specificity point. Match it here so the
 * compact assistant can never fall back to the 560–720px drawer size.
 */
html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant:not(.companion-fullscreen),
html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant.companion-position-left:not(.companion-fullscreen) {
  width: min(390px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  height: min(520px, calc(100vh - 24px)) !important;
  min-height: 0 !important;
  max-height: calc(100vh - 24px) !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded #companionPanel.companion-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--v51-text) !important;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--v51-blue) 13%, transparent), transparent 32%),
    color-mix(in srgb, var(--v51-card) 96%, transparent) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 64px rgba(2, 6, 23, 0.26) !important;
  backdrop-filter: blur(22px) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-head {
  min-height: 62px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 11px !important;
  border-bottom: 1px solid var(--v51-border) !important;
  background: color-mix(in srgb, var(--v51-card) 94%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel #companionPanelAvatar.companion-panel-avatar-token {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: linear-gradient(145deg, var(--v51-blue), #7c3aed) !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--v51-blue) 26%, transparent) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-heading > strong {
  font-size: 13px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-heading > p {
  max-width: 190px !important;
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  color: var(--v51-muted) !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionPanel #companionPanelEmotion.companion-emotion-chip {
  display: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-tools {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-tools button {
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionCollapseBtn,
html:not(.react-student-embedded) body #companionPanel #companionHideBtn {
  width: 30px !important;
  padding: 0 !important;
  font-size: 16px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-layout {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-workspace {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(76px, 1fr) auto auto !important;
  gap: 8px !important;
  padding: 11px !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card {
  min-height: 76px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 10px !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 12px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-avatar-token {
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card .eyebrow {
  margin: 0 0 2px !important;
  color: var(--v51-blue) !important;
  font-size: 8px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card strong {
  color: var(--v51-text) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card > p {
  grid-column: 2 !important;
  margin: -2px 0 0 !important;
  color: var(--v51-muted) !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionAgentRunBoard.companion-agent-run-board {
  display: grid !important;
  gap: 6px !important;
  padding: 8px !important;
  background: color-mix(in srgb, var(--v51-blue-soft) 64%, var(--v51-card)) !important;
  border: 1px solid color-mix(in srgb, var(--v51-blue) 20%, var(--v51-border)) !important;
  border-radius: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionAgentRunBoard[data-agent-status="idle"] {
  display: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionAgentRunTitle {
  display: block !important;
  max-width: 230px !important;
  overflow: hidden !important;
  color: var(--v51-text) !important;
  font-size: 10px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-controls {
  display: flex !important;
  gap: 4px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-controls button {
  min-height: 25px !important;
  padding: 0 7px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 7px !important;
  font-size: 8px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionMessages.companion-messages {
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  padding: 0 2px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-message {
  padding: 8px 9px !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-message.is-user {
  margin-left: 34px !important;
  background: var(--v51-blue-soft) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-message :is(span, p) {
  font-size: 10px !important;
  line-height: 1.45 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionActions.companion-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionActions button {
  min-height: 32px !important;
  padding: 0 8px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border: 1px solid color-mix(in srgb, var(--v51-blue) 22%, transparent) !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionForm.companion-input-row {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 6px !important;
  padding: 7px !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 11px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionInput {
  min-height: 36px !important;
  max-height: 82px !important;
  padding: 8px 10px !important;
  resize: none !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionVoiceBtn,
html:not(.react-student-embedded) body #companionPanel #companionForm button[type="submit"] {
  min-height: 36px !important;
  padding: 0 9px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}

@media (max-width: 620px) {
  html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock {
    --xiaowen-standalone-width: clamp(96px, 27vw, 112px) !important;
    --xiaowen-standalone-height: clamp(168px, 47vw, 194px) !important;
  }

  html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock.companion-avatar-panel-open {
    display: none !important;
  }

  html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: min(470px, calc(100vh - 16px)) !important;
    max-height: calc(100vh - 16px) !important;
  }

  html:not(.react-student-embedded) body #companionPanel #companionOpenCoachBtn {
    display: none !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-panel-heading > p {
    max-width: 142px !important;
  }

  html:not(.react-student-embedded) body #companionPanel #companionVoiceBtn {
    display: none !important;
  }

  html:not(.react-student-embedded) body #companionPanel #companionForm.companion-input-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock {
    transition: none !important;
  }
}

/* V52 — natural character moments: contextual speech bubble beside the draggable 3D mentor. */
html:not(.react-student-embedded) body #companionAvatarDock .companion-interaction-bubble {
  position: absolute !important;
  z-index: 8 !important;
  top: 10% !important;
  right: calc(100% - 8px) !important;
  width: min(246px, calc(100vw - 176px)) !important;
  min-width: 196px !important;
  display: grid !important;
  grid-template-columns: 9px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 9px !important;
  padding: 12px 13px !important;
  color: var(--v51-text, #0f172a) !important;
  text-align: left !important;
  background: color-mix(in srgb, var(--v51-card, #fff) 96%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--v51-blue, #2563eb) 24%, var(--v51-border, #dbe5f1)) !important;
  border-radius: 15px !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  transform-origin: right center !important;
  animation: xiaowenInteractionBubbleIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-interaction-bubble[hidden],
html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-panel-open .companion-interaction-bubble,
html:not(.react-student-embedded) body #companionAvatarDock.is-dragging .companion-interaction-bubble {
  display: none !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-interaction-bubble::after {
  content: "" !important;
  position: absolute !important;
  top: 34px !important;
  right: -7px !important;
  width: 13px !important;
  height: 13px !important;
  background: inherit !important;
  border-top: 1px solid color-mix(in srgb, var(--v51-blue, #2563eb) 24%, var(--v51-border, #dbe5f1)) !important;
  border-right: 1px solid color-mix(in srgb, var(--v51-blue, #2563eb) 24%, var(--v51-border, #dbe5f1)) !important;
  transform: rotate(45deg) !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-interaction-dot {
  width: 8px !important;
  height: 8px !important;
  margin-top: 4px !important;
  display: block !important;
  background: var(--v51-green, #22c55e) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--v51-green, #22c55e) 13%, transparent) !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-interaction-bubble > div {
  min-width: 0 !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-interaction-bubble strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: var(--v51-text, #0f172a) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-interaction-bubble p {
  margin: 0 !important;
  color: var(--v51-muted, #64748b) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body #companionAvatarDock .companion-interaction-bubble small {
  display: block !important;
  margin-top: 7px !important;
  color: color-mix(in srgb, var(--v51-muted, #64748b) 78%, transparent) !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
}

html:not(.react-student-embedded) body #companionAvatarDock.companion-position-left .companion-interaction-bubble {
  right: auto !important;
  left: calc(100% - 8px) !important;
  transform-origin: left center !important;
}

html:not(.react-student-embedded) body #companionAvatarDock.companion-position-left .companion-interaction-bubble::after {
  right: auto !important;
  left: -7px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--v51-blue, #2563eb) 24%, var(--v51-border, #dbe5f1)) !important;
  border-left: 1px solid color-mix(in srgb, var(--v51-blue, #2563eb) 24%, var(--v51-border, #dbe5f1)) !important;
}

html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-moment .companion-avatar-hint {
  display: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #companionAvatarDock .companion-interaction-bubble {
  background: color-mix(in srgb, var(--v51-card, #111827) 94%, transparent) !important;
  border-color: color-mix(in srgb, var(--v51-blue, #60a5fa) 28%, var(--v51-border, #334155)) !important;
  box-shadow: 0 20px 52px rgba(2, 8, 23, 0.48) !important;
}

@keyframes xiaowenInteractionBubbleIn {
  from { opacity: 0; transform: translateY(7px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 620px) {
  html:not(.react-student-embedded) body #companionAvatarDock .companion-interaction-bubble {
    top: 2% !important;
    width: min(210px, calc(100vw - 112px)) !important;
    min-width: 172px !important;
    padding: 10px 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.react-student-embedded) body #companionAvatarDock .companion-interaction-bubble {
    animation: none !important;
  }
}