/* Final theme and presentation layer for the legacy client shell. */
/* The old homepage hid the header below 900px; the shared command bar must
   remain reachable at every client width, including the mobile second row. */
html:not(.react-student-embedded) body .shell > .main > header.topbar {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Match the mobile drawer's 767px breakpoint. An old 900px block layout
   otherwise stacks the command bar below the full-height desktop sidebar. */
@media (min-width: 768px) and (max-width: 900px) {
  html:not(.react-student-embedded) body .shell.shell {
    display: grid !important;
  }
  html:not(.react-student-embedded) #workspaceCommandBar {
    grid-template-columns: minmax(64px, 88px) minmax(0, 1fr) auto !important;
    gap: 12px !important;
  }
  html:not(.react-student-embedded) #workspaceCommandBar > :is(.topbar-left, .topbar-center, .topbar-right) {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  html:not(.react-student-embedded) #workspaceCommandBar > .topbar-center {
    width: 100% !important;
    justify-self: stretch !important;
  }
}

/* One SVG owns the search icon. Legacy character/pseudo-element layers must
   stay disabled: their positioning used to split the lens and handle apart. */
html:not(.react-student-embedded) #globalSearchControl {
  --search-surface: #f5f7fb;
  --search-surface-hover: #eef2f8;
  --search-surface-focus: #ffffff;
  --search-border: #d9e1ec;
  --search-border-hover: #b8c7da;
  --search-focus: #597ded;
  --search-ring: rgb(75 111 227 / 12%);
  --search-text: #23344d;
  --search-muted: #596b84;
  --search-action: #e8efff;
  --search-action-hover: #dce7ff;
  --search-action-text: #3158a2;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 520px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--search-border) !important;
  border-radius: 10px !important;
  background: var(--search-surface) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease !important;
  color-scheme: light;
}

html[data-theme="dark"]:not(.react-student-embedded) #globalSearchControl {
  --search-surface: #121d2e;
  --search-surface-hover: #172438;
  --search-surface-focus: #18263b;
  --search-border: #34445d;
  --search-border-hover: #536783;
  --search-focus: #8da7ff;
  --search-ring: rgb(141 167 255 / 14%);
  --search-text: #edf3ff;
  --search-muted: #a9b8cd;
  --search-action: #263c60;
  --search-action-hover: #304c79;
  --search-action-text: #dce8ff;
  color-scheme: dark;
}

html:not(.react-student-embedded) #globalSearchControl:hover {
  border-color: var(--search-border-hover) !important;
  background: var(--search-surface-hover) !important;
}

html:not(.react-student-embedded) #globalSearchControl:focus-within {
  border-color: var(--search-focus) !important;
  background: var(--search-surface-focus) !important;
  box-shadow: 0 0 0 3px var(--search-ring) !important;
}

html:not(.react-student-embedded) #globalSearchControl::before,
html:not(.react-student-embedded) #globalSearchControl::after,
html:not(.react-student-embedded) #globalSearchControl > .topbar-search-icon::before,
html:not(.react-student-embedded) #globalSearchControl > .topbar-search-icon::after,
html:not(.react-student-embedded) #globalSearchControl > #topbarCommandSubmit::before,
html:not(.react-student-embedded) #globalSearchControl > #topbarCommandSubmit::after {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) #globalSearchControl > .topbar-search-icon {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  place-self: center !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--search-muted) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) #globalSearchControl .topbar-search-glyph {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  background: transparent !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) #globalSearchControl > #topbarCommandInput {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--search-text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 36px !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) #globalSearchControl > #topbarCommandInput::placeholder {
  color: var(--search-muted) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

html:not(.react-student-embedded) #globalSearchControl.has-search-value {
  grid-template-columns: 20px minmax(0, 1fr) 64px !important;
  padding-right: 4px !important;
}

html:not(.react-student-embedded) #globalSearchControl > #topbarCommandSubmit {
  position: static !important;
  inset: auto !important;
  display: none !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: var(--search-action) !important;
  color: var(--search-action-text) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 120ms ease !important;
}

html:not(.react-student-embedded) #globalSearchControl.has-search-value > #topbarCommandSubmit:not(:disabled) {
  display: inline-flex !important;
}

html:not(.react-student-embedded) #globalSearchControl > #topbarCommandSubmit:hover {
  background: var(--search-action-hover) !important;
}

html:not(.react-student-embedded) #globalSearchControl > #topbarCommandSubmit:focus-visible {
  outline: 2px solid var(--search-focus) !important;
  outline-offset: -2px !important;
}

/* Anchor results to the field, not the obsolete 520px-wide centered panel. */
html:not(.react-student-embedded) #globalAiSearchPanel {
  min-width: 0 !important;
  max-width: min(520px, calc(100vw - 24px)) !important;
  box-sizing: border-box !important;
  transform: none !important;
}

html:not(.react-student-embedded) #globalAiSearchPanel .global-ai-result-card > div > span {
  font-size: 12px !important;
  color: #52647e !important;
  background: #edf2f8 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) #globalAiSearchPanel .global-ai-result-card > div > span {
  color: #c4d4ec !important;
  background: #26364f !important;
}

html[data-theme="dark"]:not(.react-student-embedded) #globalAiSearchPanel .global-ai-search-head {
  border-color: #34445d !important;
}

html[data-theme="dark"]:not(.react-student-embedded) #globalAiSearchPanel .global-ai-result-card > button {
  color: #dce8ff !important;
  border-color: #3b5275 !important;
  background: #213654 !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) #globalAiSearchPanel .global-ai-result-card > button:hover {
  background: #304c79 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) #globalAiSearchPanel .global-ai-result-card > button:focus-visible {
  outline: 2px solid #8da7ff !important;
  outline-offset: 2px !important;
}

@media (max-width: 767px) {
  html:not(.react-student-embedded) #globalSearchControl > #topbarCommandInput {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.react-student-embedded) #globalSearchControl,
  html:not(.react-student-embedded) #globalSearchControl > #topbarCommandSubmit {
    transition: none !important;
  }
}

html[data-theme="dark"]:not(.react-student-embedded) {
  --surface: #0e1628;
  --surface-strong: #14213a;
  --surface-muted: #0d1728;
  --text-primary: #eaf0ff;
  --text-secondary: #bcc8de;
  --text-strong: #f5f8ff;
  --border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"]:not(.react-student-embedded) body {
  color: var(--text-primary) !important;
  background: #07080d !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main,
html[data-theme="dark"]:not(.react-student-embedded) body .panel,
html[data-theme="dark"]:not(.react-student-embedded) body .panel.active {
  color: var(--text-primary) !important;
  background: transparent !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body :is(
  .section-card,
  .hero-card,
  .info-card,
  .metric-card,
  .stack-item,
  .question-card,
  .report-card,
  .feedback-box,
  .question-box,
  .empty-box,
  .settings-side-card,
  .modal-card,
  .copilot-panel,
  .interview-question-card,
  .interview-arena-stack,
  .interview-workspace-card,
  .interview-copilot-card,
  .interview-profile-card,
  .interview-video-tile,
  .training-rpg-shell,
  .training-rpg-next-stage,
  .training-rpg-path,
  .training-rpg-roadmap,
  .training-rpg-next-stage,
  .training-rpg-core,
  .training-rpg-hero,
  .engineering-bug-card,
  .engineering-bug-analysis,
  .engineering-case-card,
  .engineering-case-detail,
  .landing-final-goal-card,
  .landing-final-ai-plan,
  .landing-final-growth-feedback,
  .landing-home-grid > article,
  .landing-home-grid > section,
  .landing-v5-command-card,
  .landing-v5-summary-card,
  .landing-weekly-growth-item,
  .landing-action-plan,
  .landing-welcome-panel,
  .landing-today-panel,
  .landing-growth-panel,
  .landing-coach-card,
  .landing-special-card,
  .engineer-dossier-summary,
  .waveform-card,
  .interview-question-dialog,
  .interview-answer-summary,
  .audio-dialogue-summary,
  .audio-report-digest,
  .score-diff-box,
  .project-practice-page,
  .project-architecture-board,
  .project-case-grid article
) {
  background: #111b2f !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body :is(
  h1, h2, h3, h4, h5, h6,
  strong, b, label, em, small, p, span, div, li,
  .muted, .text-muted, .question-meta, .sidebar-subtitle,
  .landing-greeting-line, .landing-welcome-copy p, .landing-tips
) {
  color: var(--text-primary) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body p,
html[data-theme="dark"]:not(.react-student-embedded) body .muted,
html[data-theme="dark"]:not(.react-student-embedded) body .text-muted,
html[data-theme="dark"]:not(.react-student-embedded) body small {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .button,
html[data-theme="dark"]:not(.react-student-embedded) body button,
html[data-theme="dark"]:not(.react-student-embedded) body .ghost-button {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .progress-bar {
  background: rgba(148, 163, 184, 0.2) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .progress-fill,
html[data-theme="dark"]:not(.react-student-embedded) body .skill-badge-progress {
  background: linear-gradient(90deg, #6f8eff, #5ac8ff) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body :is(input, textarea, select) {
  color: var(--text-primary) !important;
  background: #101a2b !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar,
html[data-theme="dark"]:not(.react-student-embedded) body .global-ai-search-panel,
html[data-theme="dark"]:not(.react-student-embedded) body .companion-panel {
  background: #0b1020 !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .modal-backdrop {
  background: rgb(3 9 18 / 55%) !important;
}

/* v188 interview light fallback fixes */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone:not([data-voice-state="live"]) .interview-answer-recording-pill {
  color: #a6b8d4 !important;
  background: #101b31 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone[data-voice-state="processing"] .interview-answer-recording-pill,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone[data-voice-state="recording"] .interview-answer-recording-pill,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone .interview-answer-recording-pill i {
  background: #2a3f66 !important;
  color: #ffd58a !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-answer-transcript-body,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-profile-user,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-profile-ability,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-answer-mode-toggle,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-space-mode-option,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-training-statusbar,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-question-footer,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-bottom-actionbar,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-workspace-card,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-meeting-stage-grid,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-meeting-arena-grid {
  color: var(--text-primary) !important;
  background: #121d34 !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) .engineering-bug-analysis,
html[data-theme="dark"]:not(.react-student-embedded) .engineering-bug-analysis > summary {
  color: var(--text-primary) !important;
  background: #1f2940 !important;
  border-color: var(--border-color) !important;
}

/* v189 mobile workspace white fallback fixes */
html[data-theme="dark"]:not(.react-student-embedded) body.mobile-navigation-enabled :is(
  .training-rpg-shell,
  .training-rpg-next-stage,
  .landing-final-goal-card,
  .landing-final-ai-plan,
  .landing-final-growth-feedback,
  .interview-video-tile,
  .landing-action-plan,
  .landing-today-panel,
  .landing-growth-panel,
  .training-rpg-xp,
  .training-rpg-roadmap
) {
  background: #172338 !important;
  border-color: #34445c !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body.mobile-navigation-enabled :is(#mobileNavigationToggle, #mobileNavigationClose) {
  color: #e2e8f0 !important;
  background: #172338 !important;
  border-color: #35445c !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #mobileNavigationClose {
  background: #172338 !important;
  color: #e2e8f0 !important;
}

/* Legacy floor only. Redesigned pages own explicit surfaces; structural/text
   wrappers must remain transparent instead of receiving a class-name fill. */
html[data-theme="dark"]:not(.react-student-embedded) body .main .panel:not(.hw-product-page[data-ui-redesign="20260921"]) :is(
  [class*="-card"],
  [class*="-panel"],
  [class*="-workspace"],
  [class*="-shell"],
  [class*="-board"],
  [class*="-hero"],
  [class*="-cabin"],
  [class*="-grid"],
  [class*="-list"],
  [class*="-section"],
  [class*="-summary"],
  [class*="-route"],
  [class*="-goal"],
  [class*="-task"],
  [class*="-flow"],
  [class*="-case"],
  [class*="-coach"],
  [class*="-knowledge"],
  [class*="-entry"],
  [class*="-archive"],
  [class*="-record"],
  [class*="-ability"],
  [class*="-growth"],
  [class*="-analysis"],
  [class*="-question"],
  [class*="-audio"],
  [class*="-waveform"],
  [class*="-training"],
  [class*="-timeline"],
  [class*="-feedback"],
  [class*="-report"],
  [class*="-metric"],
  [class*="-drawer"],
  [class*="-module"],
  [class*="-step"],
  [class*="-head"],
  [class*="-foot"],
  [class*="-hero"],
  [class*="-console"],
  [class*="message-center"],
  [class*="learning-record"],
  [class*="stack-item"],
  [class*="stack-list"],
  [class*="score-history"],
  [class*="stack"],
  [class*="section-grid"],
  [class*="admin-console"],
  .section-card,
  .hero-card,
  .info-card,
  .metric-card,
  .question-card,
  .report-card,
  .feedback-box,
  .question-box,
  .empty-box,
  .theme-settings-card,
  .settings-side-card,
  .modal-card,
  .settings-card,
  .settings-diagnostic-box,
  .settings-inline-status,
  .panel-switch,
  .analysis-card,
  .voice-live-box,
  .format-chip,
  .pipeline-step,
  .launch-summary-item,
  .dashboard-card,
  .landing-v5-command-card,
  .landing-v5-summary-card,
  .landing-welcome-panel,
  .landing-today-panel,
  .landing-growth-panel,
  .landing-coach-card,
  .landing-special-card,
  .landing-route-card,
  .landing-hot-question,
  .landing-hot-question-action,
  .landing-special-training,
  .landing-recent-task-card,
  .landing-hardware-card,
  .landing-final-goal-card,
  .landing-final-ai-plan,
  .landing-final-growth-feedback,
  .ai-coach-reminder-card,
  .coach-live-score-card,
  .coach-judge-card,
  .coach-structure-card,
  .interview-workspace-card,
  .interview-arena-block,
  .interview-question-card,
  .interview-video-tile,
  .interview-space-shell,
  .interview-completion-card,
  .interview-answer-live-card,
  .interview-lobby-question,
  .interview-lobby-waveform,
  .engineering-lab-shell,
  .engineering-bug-card,
  .engineering-case-card,
  .engineer-dossier-summary,
  .engineering-lab-task,
  .engineering-entry-card,
  .training-rpg-shell,
  .training-rpg-hero,
  .training-rpg-roadmap,
  .training-rpg-next-stage,
  .training-rpg-xp,
  .question-training-center,
  .project-practice-page,
  .project-practice-shell,
  .project-architecture-board,
  .project-case-grid,
  .project-case-template-preview,
  .project-assets-shell,
  .knowledge-tree,
  .knowledge-layout,
  .knowledge-map-summary,
  .knowledge-cabin,
  .waveform-training-shell,
  .audio-cabin-form,
  .audio-main-card,
  .audio-coach-card,
  .audio-dialogue-summary,
  .audio-timeline-panel,
  .audio-review-cabin,
  .growth-archive-shell,
  .growth-archive-page,
  .learning-formula-grid,
  .learning-record-grid,
  .learning-knowledge-card-grid,
  .user-settings-card,
  .message-center-workspace,
  .training-summary-page,
  .dashboard-welcome-card,
  .dashboard-growth-card,
  .dashboard-growth-feedback,
  .dashboard-shortcut-card,
  .dashboard-todo-card,
  .dashboard-trend-card,
  .admin-console-grid,
  .admin-console-card,
  .admin-console-hero,
  .admin-cost-panel
) {
  background: linear-gradient(180deg, #101a2b, var(--surface-strong)) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Keep unclassified shell wrappers dark-safe (avoid forcing arbitrary unstyled children to white surfaces). */
html[data-theme="dark"]:not(.react-student-embedded) body .main > .panel > :is(section, div, aside, article):not([class]) {
  background: transparent !important;
}

/* Ensure generic text/metadata remains readable in every dark panel. */
html[data-theme="dark"]:not(.react-student-embedded) body .main .panel :is(
  h1, h2, h3, h4, h5, h6, p, li, dd, dt, label, small, span,
  em, strong, b, div, a,
  .muted, .text-muted, .question-meta, .section-head, .sidebar-subtitle,
  .landing-greeting-line, .landing-welcome-copy p, .landing-tips,
  .my-growth-records, .home-module-settings-item, .question-meta
) {
  color: var(--text-primary) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel :is(small, .muted, .text-muted, .question-meta, .section-head em, .feedback-box small) {
  color: var(--text-secondary) !important;
}

/* Global dark floor for components that are often injected without fixed class patterns. */
html[data-theme="dark"]:not(.react-student-embedded) body .panel [class*="chip"],
html[data-theme="dark"]:not(.react-student-embedded) body .panel [class*="tag"],
html[data-theme="dark"]:not(.react-student-embedded) body .panel [class*="badge"],
html[data-theme="dark"]:not(.react-student-embedded) body .panel [class*="timeline"],
html[data-theme="dark"]:not(.react-student-embedded) body .panel [class*="progress"] {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .panel [class*="chip"],
html[data-theme="dark"]:not(.react-student-embedded) body .panel [class*="tag"],
html[data-theme="dark"]:not(.react-student-embedded) body .panel [class*="badge"] {
  background: #0f1a2e !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel [class*="progress"] {
  background: #101a2b !important;
}

/* Inputs and action lists in interview/live pages */
html[data-theme="dark"]:not(.react-student-embedded) body .main .panel :is(.question-list, .question-list-summary, .interview-record-list, .learning-record-grid, .admin-weakness-list, .admin-action-list) {
  background: #101a2b !important;
  border-color: var(--border-color) !important;
}

/* Unmigrated pages retain this compatibility fallback. Do not paint arbitrary
   classified wrappers inside the token-owned redesign. */
html[data-theme="dark"]:not(.react-student-embedded) body .main .panel:not(.hw-product-page[data-ui-redesign="20260921"]) :is(
  div[class],
  section[class],
  article[class],
  aside[class],
  header[class],
  footer[class],
  main[class],
  nav[class],
  ul[class],
  ol[class],
  li[class],
  table[class],
  tbody[class],
  thead[class],
  tfoot[class],
  tr[class],
  td[class],
  fieldset[class],
  form[class],
  details[class],
  summary[class],
  label[class],
  dl[class],
  dt[class],
  dd[class]
):not(:is(button[class], input, textarea, select, option, img, video, svg, path, canvas, pre, code)) {
  background: var(--surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Training surfaces must outrank the v101 ID-weighted light-mode lock. */
:is(#hw-v6-home, html)[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="question-bank"] .shell .main.main > section.panel.active.training-rpg-workbench > article.section-card.training-rpg-shell {
  background: #101a2b !important;
  border-color: #34445f !important;
  box-shadow: 0 18px 42px rgb(0 0 0 / 18%) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell :is(
  .training-rpg-hero, .training-rpg-hero > div:first-child,
  .training-rpg-core, .training-rpg-xp-head, .training-rpg-xp-sources,
  .training-rpg-path, .training-rpg-path li > div,
  .training-rpg-stage-tag, .training-rpg-reward, .training-rpg-footer > div
) {
  background: transparent !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell :is(
  .training-rpg-roadmap, .training-rpg-xp, .training-rpg-footer
) {
  background: #172338 !important;
  border-color: #34445f !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell .training-rpg-next-stage {
  background: #19263f !important;
  border-color: #48548c !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell :is(
  .training-rpg-path li, .training-rpg-xp-sources li
) {
  background: #172338 !important;
  border-color: transparent !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell .training-rpg-path li.is-current {
  background: #263759 !important;
  border-color: #8495ff !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell .training-rpg-path li.is-complete {
  background: #163b34 !important;
  border-color: #317362 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell :is(
  .training-rpg-roadmap header > span, .training-rpg-path li > i, .training-rpg-next-stage li i
) {
  background: #2b3c56 !important;
  color: #eaf0ff !important;
  border-color: #425875 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell .training-rpg-path li.is-current > i {
  background: #4d51c8 !important;
  color: #fff !important;
  border-color: #a5b4fc !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell :is(
  .training-rpg-path li.is-complete > i, .training-rpg-xp-sources li b
) {
  background: #185345 !important;
  color: #abf3d6 !important;
  border-color: #53b899 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell .training-rpg-path::before {
  background: #425875 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell .training-rpg-xp > i {
  background: #34455f !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell .training-rpg-xp > i > b {
  background: linear-gradient(90deg, #7ba6ff, #b298ff) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell :is(
  small, em, .training-rpg-footer p, .training-rpg-footer span, .training-rpg-reward span
) {
  color: #bcc8de !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell :is(
  .training-rpg-hero p, .training-rpg-roadmap header p, .training-rpg-stage-tag span,
  .training-rpg-stage-tag b, .training-rpg-path .is-current em
) {
  color: #bdc8ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .main .panel[data-panel="question-bank"] .training-rpg-shell :is(
  .training-rpg-path .is-complete em, .training-rpg-reward strong
) {
  color: #a3e8cb !important;
}

:is(#hw-v6-home, html)[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="question-bank"] #trainingRpgNextBtn {
  background: linear-gradient(110deg, #285bcc, #6938ce) !important;
  color: #fff !important;
  border-color: #879cff !important;
}

/* Empty provenance has one column; it must not inherit the 72px badge column. */
html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources li > span:only-child {
  grid-column: 1 / -1 !important;
  white-space: normal !important;
  line-height: 1.6 !important;
}

/* Both five-step training and the three interview modes share this workspace. */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio {
  background: #0e1628 !important;
  color: #eaf0ff !important;
  border-color: #34445f !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio :is(
  #interviewCoachRoom, #engineeringTrainingFlow, .interview-copilot-card,
  #interviewExitDialog
) {
  background: #172338 !important;
  color: #eaf0ff !important;
  border-color: #34445f !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio :is(
  .interview-bottom-actions, .interview-bottom-timer, .interview-training-title,
  .interview-training-title > div, .interview-training-actions, .interview-copilot-card > .section-head,
  .interview-copilot-card > .section-head > div, #interviewExitDialog .form-actions
) {
  background: transparent !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio #engineeringTrainingFlow :is(header, ol) {
  background: transparent !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio #engineeringTrainingFlow li {
  background: #202e46 !important;
  color: #bcc8de !important;
  border-color: #40516c !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio #engineeringTrainingFlow li.is-current {
  background: #343f82 !important;
  color: #fff !important;
  border-color: #9dafff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio #engineeringTrainingFlow li.is-done {
  background: #185345 !important;
  color: #abf3d6 !important;
  border-color: #53b899 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio #engineeringTrainingFlow li :is(span, strong) {
  color: inherit !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio :is(
  #candidateAnswer, #interviewAnswerHighlightPreview, .interview-answer-transcript-body
) {
  background: #101a2b !important;
  color: #eaf0ff !important;
  -webkit-text-fill-color: #eaf0ff !important;
  caret-color: #a5b4fc !important;
  border-color: #526684 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio #candidateAnswer::placeholder {
  color: #acbdd5 !important;
  -webkit-text-fill-color: #acbdd5 !important;
  opacity: 1 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio :is(
  .interview-btn-secondary, .interview-btn-weak, #pauseInterviewTrainingBtn, #cancelInterviewExitBtn
) {
  background: #243553 !important;
  color: #eaf0ff !important;
  border-color: #617496 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio :is(
  #finishInterviewTrainingBtn, #discardInterviewSessionBtn
) {
  background: #452737 !important;
  color: #ffb8c5 !important;
  border-color: #966078 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio#interviewStudio :is(
  .interview-video-live
) {
  background: #243b55 !important;
  color: #d5e8ff !important;
  border-color: #526684 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewExitDialog::backdrop {
  background: rgb(3 9 18 / 72%) !important;
}

/* mountInterviewBottomActionbar moves this bar to .shell, outside the studio. */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) .shell > .interview-bottom-actionbar {
  background: #172338 !important;
  color: #eaf0ff !important;
  border-color: #425875 !important;
  box-shadow: 0 -8px 24px rgb(0 0 0 / 20%) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) .shell > .interview-bottom-actionbar :is(.interview-bottom-context, .interview-bottom-actions) {
  background: transparent !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) .shell > .interview-bottom-actionbar :is(.interview-btn-secondary, .interview-btn-weak) {
  background: #243553 !important;
  color: #eaf0ff !important;
  border-color: #617496 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) .shell > .interview-bottom-actionbar #interviewBottomStage {
  background: #343f82 !important;
  color: #fff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) .shell > .interview-bottom-actionbar #interviewRecordingTimer {
  color: #eaf0ff !important;
}

/* Profile drawers and skill dialogs are body-level portals, not panel children. */
html[data-theme="dark"]:not(.react-student-embedded) body :is(#interviewProfileDrawer, #profileSkillModal .modal-card) {
  background: #111c30 !important;
  color: #eaf0ff !important;
  border-color: #425875 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #interviewProfileDrawer :is(
  .interview-profile-drawer-head, .interview-profile-drawer-section,
  .interview-profile-drawer-grid > div, .interview-profile-drawer-close
),
html[data-theme="dark"]:not(.react-student-embedded) body #profileSkillModal :is(
  .profile-skill-score, .profile-skill-metrics > div, .profile-skill-missing, .profile-skill-recommendation
) {
  background: #1d2b43 !important;
  color: #eaf0ff !important;
  border-color: #425875 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #interviewProfileDrawer :is(
  .interview-profile-drawer-tags b, .interview-profile-drawer-flow span
),
html[data-theme="dark"]:not(.react-student-embedded) body #profileSkillModal #profileSkillMissingList span {
  background: #2b3c56 !important;
  color: #d5e8ff !important;
  border-color: #526684 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body :is(#interviewProfileDrawer, #profileSkillModal) :is(h3, strong, b, label) {
  color: #eaf0ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body :is(#interviewProfileDrawer, #profileSkillModal) :is(p, span, small, li) {
  color: #bcc8de !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #interviewProfileDrawerBackdrop {
  background: rgb(3 9 18 / 72%) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #profileSkillModal .profile-skill-progress {
  background: #34455f !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #profileSkillModal #profileSkillProgress {
  background: linear-gradient(90deg, #7ba6ff, #b298ff) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="question-bank"] #trainingRpgLevel {
  color: #fff !important;
  background: #4d51c8 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio #interviewPracticeAnswerGuide > div > span {
  color: #fff !important;
  background: #4d51c8 !important;
}

/* This section appears only after all five answers have been scored. */
html[data-theme="dark"]:not(.react-student-embedded) body #v1TrainingClosureResult {
  background: #172338 !important;
  border-color: #317362 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #v1TrainingClosureResult :is(.v1-training-closure-result__copy, .v1-training-closure-result__proofs) {
  background: transparent !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #v1TrainingClosureResult .v1-training-closure-result__proofs > span {
  background: #1e403a !important;
  border-color: #458572 !important;
  color: #c3ded5 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #v1TrainingClosureResult .v1-training-closure-result__proofs strong {
  color: #abf3d6 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #copilotAnswerFrame .coach-structure-item > b {
  background: #2b3c56 !important;
  color: #d5e8ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #copilotAnswerFrame .coach-structure-item.done > b {
  background: #185345 !important;
  color: #abf3d6 !important;
}

/* A saved model score and the full "待补充" label must fit in either palette. */
html:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio .interview-ai-coach-panel {
  grid-template-rows: repeat(3, max-content) !important;
  align-content: start !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio :is(.coach-live-score-card, .coach-structure-card, .coach-followup-card) {
  grid-template-rows: none !important;
  grid-auto-rows: max-content !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-content: start !important;
  overflow: visible !important;
  contain: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio .coach-completeness-main {
  height: auto !important;
  min-height: 64px !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio .coach-completeness-main strong {
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio .coach-structure-list {
  grid-template-rows: none !important;
  grid-auto-rows: minmax(32px, auto) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio .coach-structure-item {
  height: auto !important;
  min-height: 32px !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:is([data-interview-session-kind="engineering-training"], [data-interview-session-kind="mock-interview"]) #interviewStudio .coach-structure-item > b {
  width: max-content !important;
  min-width: 24px !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 24px !important;
  padding: 2px 7px !important;
  line-height: 1.5 !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

/* Ability profile: the visible career sheet, not the retired radar underneath.
   The separately generated print document intentionally keeps its white paper. */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .growth-archive-page, .growth-career-asset-section, .growth-career-asset-head,
  .career-asset-identity, .career-asset-content, .career-asset-section-title, .career-asset-ability-grid,
  .career-asset-project-grid, .career-asset-footer, .resume-role-match-result
) {
  background: transparent !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .career-asset-sheet, .resume-role-match-section
) {
  background: #111c30 !important;
  border-color: #425875 !important;
  box-shadow: 0 12px 36px rgb(0 0 0 / 16%) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .career-asset-block, .career-asset-ai-review, .resume-role-match-form,
  .resume-role-match-result > div
) {
  background: #1a2840 !important;
  border-color: #425875 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .career-asset-ability-grid > article, .career-asset-project-grid > article
) {
  background: #233550 !important;
  border-color: #526684 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .career-asset-monogram, .career-asset-section-title > span
) {
  background: #2d4268 !important;
  color: #d5e4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .career-asset-verified {
  background: #193b35 !important;
  border-color: #458572 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .career-asset-verified > i, .career-asset-ability-grid i
) {
  background: #185345 !important;
  color: #abf3d6 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .career-asset-identity, .career-asset-footer
) {
  border-color: #425875 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  p, small, .growth-career-asset-head > div > span,
  .career-asset-identity > div > span, .career-asset-ai-review > div > span,
  .career-asset-footer > span, .resume-role-match-section > header span,
  .resume-role-match-form label > span, .resume-role-match-result > div > span
) {
  color: #bcc8de !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .career-asset-ai-review blockquote {
  color: #eaf0ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .career-asset-ai-review blockquote::before {
  color: #b9abff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .resume-role-match-section > header > em {
  background: #2d4268 !important;
  border-color: #617496 !important;
  color: #d5e4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .resume-role-match-score strong {
  color: #b8ccff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .resume-role-match-score em {
  color: #bcc8de !important;
}

/* Empty evidence and long real training titles must stay legible in both modes. */
html:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .career-asset-ability-grid > p, .career-asset-project-grid > p,
  .career-asset-ability-grid > article:only-child
) {
  grid-column: 1 / -1;
}

html:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .career-asset-ability-grid article > div, .career-asset-project-grid article
) {
  min-width: 0;
  overflow-wrap: anywhere;
}

html:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .career-asset-ability-grid p, .career-asset-project-grid p, .career-asset-ai-review > p,
  .career-asset-verified small, .resume-role-match-form label > span,
  .resume-role-match-result > div > span, .resume-role-match-result em
) {
  font-size: 12px;
  line-height: 1.6;
}

html:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .career-asset-ability-grid strong {
  font-size: 14px;
  line-height: 1.5;
}

html:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .career-asset-footer {
  font-size: 11px;
  line-height: 1.6;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

html:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .resume-role-match-result p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* Notices belong to this page; the global home notice is hidden here. */
html:not(.react-student-embedded) body #growthProfileNotice[hidden] {
  display: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #growthProfileNotice {
  background: #193b35 !important;
  color: #abf3d6 !important;
  border-color: #458572 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #growthProfileNotice.warn {
  background: #3d3020 !important;
  color: #ffe0ad !important;
  border-color: #977445 !important;
}

/* The same evidence text must remain readable when switching back to day mode. */
html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .growth-career-asset-head > div > span, .career-asset-identity > div > span,
  .career-asset-verified small, .career-asset-section-title small,
  .career-asset-ability-grid p, .career-asset-project-grid > p,
  .career-asset-ai-review > div > span, .career-asset-ai-review > p,
  .career-asset-footer > span, .resume-role-match-section > header span,
  .resume-role-match-form label > span, .resume-role-match-result > div > span,
  .resume-role-match-score em
) {
  color: #4a5a73 !important;
}

html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard :is(
  .growth-career-asset-head > div > p, .resume-role-match-section > header p,
  .resume-role-match-score strong
) {
  color: #3656b8 !important;
}

html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .career-asset-verified > i {
  background: #16774d !important;
  color: #fff !important;
}

html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .career-asset-ability-grid i {
  color: #126140 !important;
}

html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .resume-role-match-section > header > em {
  background: #eaf0ff !important;
  border-color: #a5b8eb !important;
  color: #3656b8 !important;
}

html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .resume-role-match-form input {
  background: #fff !important;
  color: #151c2e !important;
}

html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .primary-btn {
  background: linear-gradient(135deg, #5b40ce, #285cda) !important;
  color: #fff !important;
}

html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .primary-btn:hover {
  background: linear-gradient(135deg, #4b32b8, #214dbb) !important;
}

html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .career-asset-sheet {
  box-shadow: 0 12px 36px rgb(31 48 82 / 9%) !important;
}

/* Only three result cards are rendered; retain the existing small-screen stack. */
@media (min-width: 921px) {
  html:not(.react-student-embedded) body[data-active-panel="growth-profile"] #growthArchiveBoard .resume-role-match-result {
    grid-template-columns: minmax(150px, .65fr) minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

/* Personal center: keep data cards, contribution levels and overlays distinct. */
html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage :is(
  .engineer-dossier-profile, .engineer-profile-stats, .engineer-dossier-summary-actions,
  .engineer-identity-card, .engineer-identity-shell, .engineer-identity-badge,
  .engineer-identity-person, .engineer-identity-abilities, .engineer-identity-completions,
  .engineer-profile-assets, .engineer-profile-assets-head, .engineer-profile-asset-grid,
  .my-growth-hub, .my-ability-map, .my-growth-records, .my-training-history,
  .engineer-contribution-legend, .section-head
) {
  background: transparent !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage :is(
  .engineer-dossier-hero, .engineer-identity-profile, .engineer-identity-contribution,
  .my-growth-card
) {
  background: #111c30 !important;
  border-color: #425875 !important;
  box-shadow: 0 12px 36px rgb(0 0 0 / 16%) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage :is(
  .engineer-profile-stats > span, .engineer-dossier-summary,
  .engineer-identity-completions > article, .engineer-profile-asset-grid > button,
  .my-ability-row, .my-growth-records > article, .my-training-history > article,
  .my-training-empty, .engineer-identity-contribution > footer
) {
  background: #1a2840 !important;
  border-color: #425875 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage :is(
  h2, h3, strong, b
) { color: #eaf0ff !important; }

html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage :is(
  p, small, em, .engineer-profile-assets-head > span,
  .engineer-identity-person > div > span, .engineer-identity-abilities span,
  .engineer-identity-profile > footer span, .engineer-identity-completions article > span,
  .engineer-contribution-legend span, .my-ability-row span,
  .my-growth-records > article > span, .my-training-history > article > span
) { color: #bcc8de !important; }

html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage :is(
  .engineer-identity-profile > header > em, .engineer-identity-contribution > header > em
) {
  background: #243b55 !important;
  color: #d5e8ff !important;
  border-color: #526684 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage .engineer-identity-profile > header > em {
  background: #193b35 !important;
  color: #abf3d6 !important;
  border-color: #458572 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage :is(
  .engineer-identity-abilities article > i, .my-ability-row > i
) { background: #34455f !important; }

html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage :is(
  .engineer-identity-abilities article > i > b, .my-ability-row > i > em
) { background: linear-gradient(90deg, #7ba6ff, #b298ff) !important; }

html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage .engineer-contribution-calendar {
  background: #0e192c !important;
  border-color: #425875 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage :is(.engineer-contribution-calendar, .engineer-contribution-legend) i {
  --contribution-color: #273650;
  border-color: #435878 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage i[data-level="1"] { --contribution-color: #365488; }
html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage i[data-level="2"] { --contribution-color: #557ac0; }
html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage i[data-level="3"] { --contribution-color: #85a3ed; }
html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage i[data-level="4"] { --contribution-color: #c0d0ff; }

html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterPage .engineer-identity-avatar {
  border-color: #526684 !important;
  /* background-image is the user's avatar; do not overwrite with a shorthand. */
}

html:not(.react-student-embedded) body #personalCenterPage .primary-btn {
  background: linear-gradient(135deg, #5b40ce, #285cda) !important;
  color: #fff !important;
}
html:not(.react-student-embedded) body #personalCenterPage .primary-btn:hover {
  background: linear-gradient(135deg, #4b32b8, #214dbb) !important;
}
html:not(.react-student-embedded) body #personalCenterPage .primary-btn span { color: inherit !important; }

/* Use the actual available column width, including the expanded desktop sidebar. */
html:not(.react-student-embedded) body #personalCenterPage .engineer-identity-shell {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)) !important;
}
html:not(.react-student-embedded) body #personalCenterPage .engineer-identity-completions {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
}
html:not(.react-student-embedded) body #personalCenterPage .engineer-identity-completions :is(p, article > span) {
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
}
html:not(.react-student-embedded) body #personalCenterPage :is(
  .engineer-identity-person > div > span, .engineer-identity-abilities span,
  .engineer-identity-profile > footer span, .engineer-identity-profile > footer em,
  .engineer-identity-profile > footer strong, .engineer-identity-contribution > header p,
  .engineer-identity-contribution > header > em, .engineer-identity-completions p,
  .engineer-identity-completions article > span, .engineer-contribution-legend span
) { font-size: 12px !important; line-height: 1.5 !important; }

html:not(.react-student-embedded) body #personalCenterPage .my-ability-row {
  grid-template-columns: minmax(0, 1fr) max-content !important;
}
html:not(.react-student-embedded) body #personalCenterPage .my-ability-row > b { grid-column: 2; grid-row: 1; }
html:not(.react-student-embedded) body #personalCenterPage .my-ability-row > i { grid-column: 1 / -1; grid-row: 2; }
html:not(.react-student-embedded) body #personalCenterPage :is(.my-growth-records, .my-training-history) > article > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
html:not(.react-student-embedded) body #personalCenterNotice[hidden] { display: none !important; }
html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterNotice {
  background: #193b35 !important; color: #abf3d6 !important; border-color: #458572 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body #personalCenterNotice.warn {
  background: #3d3020 !important; color: #ffe0ad !important; border-color: #977445 !important;
}

/* Score history is a body-level modal, including SVG paint and classless metrics. */
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal .score-history-card {
  background: #111c30 !important; border-color: #425875 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal :is(
  .score-history-current, .score-history-chart, .score-history-metrics > div,
  .score-provenance-section, .score-history-insight, .score-provenance-formula,
  .score-provenance-empty, .score-history-empty
) { background: #1a2840 !important; border-color: #425875 !important; }
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal .score-provenance-item {
  background: #233550 !important; border-color: #526684 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal :is(h3, h4, strong) { color: #eaf0ff !important; }
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal :is(p, span, time, small) { color: #bcc8de !important; }
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal :is(
  .score-provenance-icon, .score-provenance-item > em, .score-provenance-head > em
) { background: #343f68 !important; color: #dce3ff !important; border-color: #617496 !important; }
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal [data-evidence-kind="training"] :is(.score-provenance-icon, em) {
  background: #185345 !important; color: #abf3d6 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal [data-evidence-kind="interview"] :is(.score-provenance-icon, em) {
  background: #24466b !important; color: #c3deff !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal :is([data-evidence-kind="debug"], [data-evidence-kind="waveform"], [data-evidence-kind="project"]) :is(.score-provenance-icon, em) {
  background: #523722 !important; color: #ffdaad !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal .score-history-svg text { fill: #eaf0ff !important; }
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal .score-history-svg .score-history-axis-label { fill: #bcc8de !important; }
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal .score-history-svg line { stroke: #617496 !important; }
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal .score-history-svg polyline { stroke: #b298ff !important; }
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal .score-history-svg circle { fill: #233550 !important; stroke: #b298ff !important; }
html[data-theme="dark"]:not(.react-student-embedded) body #scoreHistoryModal .score-history-svg .is-current circle { fill: #b298ff !important; stroke: #eaf0ff !important; }

html:not(.react-student-embedded) body #scoreHistoryModal .score-history-empty {
  display: grid; gap: 8px; padding: 18px; line-height: 1.6;
}
html:not(.react-student-embedded) body #scoreHistoryModal .score-provenance-item :is(header, p, header strong) {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}
html:not(.react-student-embedded) body #scoreHistoryModal .score-provenance-item header { flex-wrap: wrap; }
html:not(.react-student-embedded) body #scoreHistoryModal .score-provenance-item :is(p, time) { font-size: 12px; }

/* This dialog is reached from the identity card, then moved outside growth-profile. */
html[data-theme="dark"]:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] {
  background: #111c30 !important; color: #eaf0ff !important; border-color: #425875 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] :is(
  .recruiter-profile-dialog-toolbar, .recruiter-profile-sheet
) { background: #111c30 !important; border-color: #425875 !important; }
html[data-theme="dark"]:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] :is(
  .recruiter-profile-stats > div, .recruiter-profile-section, .commercial-proof-completions > div,
  .recruiter-profile-abilities > article
) { background: #1a2840 !important; border-color: #425875 !important; }
html[data-theme="dark"]:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] :is(p, small, em) { color: #bcc8de !important; }
html[data-theme="dark"]:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] .recruiter-profile-verified i {
  background: #2b3c56 !important; color: #d5e8ff !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] .recruiter-profile-verified.is-ready i {
  background: #185345 !important; color: #abf3d6 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body #accountModal #accountPreviewAvatarHint { color: #bcc8de !important; }
html[data-theme="dark"]:not(.react-student-embedded) body #accountModal .account-form-status > span {
  background: #243b55 !important; color: #d5e8ff !important; border-color: #526684 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body #accountModal .account-form-status[data-tone="good"] > span {
  background: #185345 !important; color: #abf3d6 !important; border-color: #458572 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body #accountModal .account-form-status[data-tone="warn"] > span {
  background: #3d3020 !important; color: #ffe0ad !important; border-color: #977445 !important;
}

@media (max-width: 620px) {
  html:not(.react-student-embedded) body #personalCenterPage .engineer-identity-contribution > header { flex-wrap: wrap !important; }
  html:not(.react-student-embedded) body #personalCenterPage .engineer-identity-profile > header { flex-wrap: wrap !important; }
  html:not(.react-student-embedded) body #personalCenterPage .my-growth-records > article {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }
  html:not(.react-student-embedded) body #personalCenterPage .my-growth-records > article > div {
    grid-column: 1 / -1; grid-row: 2;
  }
}

html:not(.react-student-embedded) body #personalCenterPage .engineer-identity-badge > i {
  background: #5145b9 !important; color: #fff !important;
}
html:not(.react-student-embedded) body #personalCenterPage #myWorkspaceScore {
  background: transparent !important;
}
html:not(.react-student-embedded) body #scoreHistoryModal .score-history-chart:has(> .score-provenance-empty) {
  min-height: 0; padding: 12px;
}
html:not(.react-student-embedded) body #scoreHistoryModal .score-history-card:has(#scoreHistoryChart > .score-provenance-empty) .score-history-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html:not(.react-student-embedded) body [data-engineering-proof-notice] {
  margin: 8px 0 0; padding: 9px 12px; font-size: 13px; line-height: 1.5;
  max-width: 480px; overflow-wrap: anywhere;
}
html:not(.react-student-embedded) body [data-engineering-proof-notice][hidden] { display: none !important; }
html[data-theme="dark"]:not(.react-student-embedded) body [data-engineering-proof-notice] {
  background: #193b35 !important; color: #abf3d6 !important; border-color: #458572 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body [data-engineering-proof-notice].warn {
  background: #3d3020 !important; color: #ffe0ad !important; border-color: #977445 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] summary {
  color: #b8ccff !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body #accountModal #accountLogoutBtn {
  color: #ffbdc5 !important; background: #452737 !important; border-color: #966078 !important;
}

/* Day-mode baseline for the same page and its reachable overlays. */
html[data-theme="light"]:not(.react-student-embedded) body #personalCenterPage :is(
  p:not(.eyebrow), small, em, .engineer-identity-person > div > span,
  .engineer-contribution-legend span, .engineer-identity-completions article > span,
  .engineer-identity-profile > footer > span, .engineer-profile-assets-head > span
) { color: #4a5a73 !important; }
html[data-theme="light"]:not(.react-student-embedded) body #personalCenterPage .engineer-identity-contribution > header span {
  color: #3656b8 !important;
}
html[data-theme="light"]:not(.react-student-embedded) body #personalCenterPage .engineer-identity-profile > header > em {
  color: #176540 !important;
}
html[data-theme="light"]:not(.react-student-embedded) body #scoreHistoryModal :is(
  p, time, small, .score-history-current > span, .score-history-metrics span,
  .score-history-insight > span
) { color: #4a5a73 !important; }
html[data-theme="light"]:not(.react-student-embedded) body #scoreHistoryModal .score-history-card { background: #fff !important; }
html[data-theme="light"]:not(.react-student-embedded) body #scoreHistoryModal .score-history-current { background: #edf1fc !important; }
html[data-theme="light"]:not(.react-student-embedded) body #scoreHistoryModal .score-history-svg .score-history-axis-label { fill: #52617b !important; }
html[data-theme="light"]:not(.react-student-embedded) body #scoreHistoryModal :is([data-evidence-kind="debug"], [data-evidence-kind="waveform"], [data-evidence-kind="project"]) .score-provenance-icon {
  color: #9b4515 !important;
}
html[data-theme="light"]:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] :is(
  .commercial-proof-completions span, .commercial-proof-completions p,
  .commercial-proof-completions small, .recruiter-profile-projects span.pending,
  .recruiter-profile-abilities article.pending > div > span,
  .recruiter-profile-abilities article.unscored > div > span, .recruiter-profile-verified i
) { color: #52617b !important; }
html[data-theme="light"]:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] .recruiter-profile-abilities article.verified > div > span {
  color: #946000 !important;
}
html[data-theme="light"]:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] .recruiter-profile-verified.is-ready i {
  color: #126140 !important;
}
html:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] .primary-btn {
  background: #285cda !important; color: #fff !important;
}
html[data-theme="light"]:not(.react-student-embedded) body #accountModal :is(p.eyebrow, .account-auth-mode button:not(.active), #accountSavedProfiles small) {
  color: #4a5a73 !important;
}
html[data-theme="light"]:not(.react-student-embedded) body #accountModal input::placeholder {
  color: #52617b !important; opacity: 1 !important;
}
html[data-theme="light"]:not(.react-student-embedded) body #accountModal #accountLogoutBtn {
  background: #fff0f1 !important; color: #a32f43 !important; border-color: #d9a0ac !important;
}
html[data-theme="light"]:not(.react-student-embedded) body #accountModal #accountSubmitBtn {
  background: linear-gradient(135deg, #5b40ce, #285cda) !important; color: #fff !important;
}

html[data-theme="light"]:not(.react-student-embedded) body #personalCenterPage :is(
  #myGrowthRecords > article > b, #myGrowthRecords > article > em,
  #myTrainingHistory > article > b
) { color: #2857b8 !important; }
html[data-theme="light"]:not(.react-student-embedded) body #scoreHistoryModal [data-evidence-kind="training"] :is(.score-provenance-icon, em) {
  color: #126140 !important;
}

html:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] [data-engineering-proof-close] {
  display: grid; place-items: center; align-self: center; flex: 0 0 32px;
  width: 32px; min-width: 32px; height: 32px; padding: 0;
  border: 1px solid #bac7db; border-radius: 10px;
  background: #edf2fa; color: #233550; font-size: 22px; line-height: 1;
}
html[data-theme="dark"]:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] [data-engineering-proof-close] {
  background: #243553 !important; color: #eaf0ff !important; border-color: #617496 !important;
}
@media (max-width: 760px) {
  html:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] [data-engineering-proof-close] {
    position: absolute; top: 12px; right: 12px;
  }
  html:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] .recruiter-profile-dialog-toolbar > div:first-child {
    padding-right: 36px;
  }
  html:not(.react-student-embedded) body > .recruiter-profile-dialog[data-identity-proof-overlay="true"] .recruiter-profile-dialog-toolbar > div:last-child > button:not(.icon-btn) {
    min-width: 0; min-height: 42px; padding: 10px 8px; font-size: 13px; white-space: nowrap;
  }
}

/* Home: use explicit surfaces, not the broad legacy card/grid dark fallback. */
html:not(.react-student-embedded) body :is(#homeDashboard, #onboardingModal) {
  --home-card: #fff; --home-inset: #f1f5fc; --home-ink: #192b45;
  --home-muted: #52617b; --home-border: #d5deed; --home-accent: #4b40bc;
  --home-accent-bg: #eeeaff; --home-success: #166343; --home-success-bg: #e6f4ed;
}
html[data-theme="dark"]:not(.react-student-embedded) body :is(#homeDashboard, #onboardingModal) {
  --home-card: #101c2f; --home-inset: #1a2a43; --home-ink: #eaf0ff;
  --home-muted: #bcc8de; --home-border: #405877; --home-accent: #c8bbff;
  --home-accent-bg: #302b50; --home-success: #a0e4c8; --home-success-bg: #193d38;
}
html:not(.react-student-embedded) body #homeDashboard {
  padding: 16px 24px 48px !important; gap: 12px !important;
}
html:not(.react-student-embedded) body #homeDashboard > .landing-home-grid {
  padding: 0 0 24px !important;
}
html:not(.react-student-embedded) body #homeDashboard > [data-explicit-ai-refresh="home"] {
  margin: 0 !important;
}
html:not(.react-student-embedded) body.landing-first-use-active #homeDashboard > [data-explicit-ai-refresh="home"] {
  display: none !important;
}
html:not(.react-student-embedded) body #homeDashboard [data-explicit-ai-refresh="home"] button,
html:not(.react-student-embedded) body #homeDashboard [data-explicit-ai-refresh="home"] button:hover,
html:not(.react-student-embedded) body #homeDashboard [data-explicit-ai-refresh="home"] button:focus-visible {
  background: var(--home-inset) !important; color: var(--home-accent) !important;
  border-color: var(--home-border) !important;
}
/* The sidebar already identifies the user; avoid a second decorative avatar. */
html:not(.react-student-embedded) body #homeDashboard #landingProfileAvatar { display: none !important; }
html:not(.react-student-embedded) body #homeDashboard :is(
  .landing-home-grid, .landing-final-target-grid, .landing-final-welcome,
  .landing-final-task-title, .landing-final-task-metrics, .landing-final-weekly-stats,
  .landing-final-streak, .landing-final-ability-gain, .landing-recent-task,
  .landing-recent-task-copy, .landing-recent-task-progress,
  .landing-weekly-growth-head, .landing-home-shortcut-grid, .landing-home-shortcuts-head,
  .v1-closure-journey__track, .v1-closure-journey__step, .v1-closure-journey__summary
) { background: transparent !important; }
html:not(.react-student-embedded) body #homeDashboard :is(
  .landing-final-goal-card, .landing-final-ai-plan, .landing-final-growth-feedback,
  .landing-weekly-growth, .landing-home-shortcuts, #v1ClosureJourney,
  #landingFirstUseState
) {
  background: var(--home-card) !important; border-color: var(--home-border) !important;
  color: var(--home-ink) !important;
}
html:not(.react-student-embedded) body #homeDashboard :is(
  .landing-final-target-role, .landing-final-target-match, .landing-final-target-gaps,
  .landing-final-primary-task, .landing-final-secondary-tasks,
  .landing-final-task-metrics > span, .landing-final-weekly-stats > span,
  .landing-recent-task-card, .landing-home-shortcut-grid > button
) {
  background: var(--home-inset) !important; border-color: var(--home-border) !important;
  color: var(--home-ink) !important;
}
html:not(.react-student-embedded) body #homeDashboard :is(
  h1, h2, h3, strong, b, .landing-home-shortcut-grid > button > strong
) { color: var(--home-ink) !important; }
html:not(.react-student-embedded) body #homeDashboard #landingGreeting {
  color: var(--home-ink) !important; line-height: 1.4 !important; overflow-wrap: anywhere;
}
html:not(.react-student-embedded) body #homeDashboard :is(
  p, small, em, .eyebrow, .landing-final-welcome > div > span,
  .landing-final-target-role > span, .landing-final-target-match > span,
  .landing-final-target-gaps > span, .landing-final-growth-feedback > header > span,
  .landing-final-streak > span, .landing-final-ability-gain > span,
  .landing-weekly-growth-head > span, .landing-recent-task-copy > span,
  .landing-recent-task-progress > span, .v1-closure-journey__step > span
) { color: var(--home-muted) !important; font-size: 12px !important; line-height: 1.6 !important; }
html:not(.react-student-embedded) body #homeDashboard :is(
  .landing-final-task-title > span, .landing-final-task-reason > span,
  .landing-final-secondary-tasks > summary > span,
  .landing-final-secondary-tasks > summary > strong,
  .landing-final-secondary-tasks > summary > i
) { color: var(--home-muted) !important; font-size: 13px !important; }
html:not(.react-student-embedded) body #homeDashboard :is(
  .landing-final-target-gaps em, #landingPlanSource
) {
  background: var(--home-accent-bg) !important; color: var(--home-accent) !important;
  border-color: var(--home-border) !important; font-size: 12px !important;
  white-space: normal; line-height: 1.6; overflow-wrap: anywhere;
}
html:not(.react-student-embedded) body #homeDashboard #landingTargetMatchValue {
  color: var(--home-accent) !important; font-size: 22px !important; line-height: 1.3 !important;
}
html:not(.react-student-embedded) body #homeDashboard .landing-final-target-match {
  padding: 12px; min-width: 0;
}
html:not(.react-student-embedded) body #homeDashboard #landingTargetMatchNote {
  grid-column: 1 / -1; margin: 0; line-height: 1.6;
}
html:not(.react-student-embedded) body #homeDashboard #landingAiReview {
  padding: 16px; border: 1px solid var(--home-border); border-radius: 14px;
  background: var(--home-inset) !important;
}
html:not(.react-student-embedded) body #homeDashboard #landingAiReview[hidden] { display: none !important; }
html:not(.react-student-embedded) body #homeDashboard #landingAiReviewText {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px !important;
}
html:not(.react-student-embedded) body #homeDashboard .landing-final-task-reason {
  background: var(--home-card) !important; border-left-color: #927aff !important;
}
html:not(.react-student-embedded) body #homeDashboard .landing-final-task-reason strong {
  font-size: 14px !important; font-weight: 550; line-height: 1.7; overflow-wrap: anywhere;
}
html:not(.react-student-embedded) body #homeDashboard .landing-final-task-title h3 {
  font-size: 22px !important; line-height: 1.45; overflow-wrap: anywhere;
}
html:not(.react-student-embedded) body #homeDashboard .landing-final-task-title { grid-column: 1 / -1; }
html:not(.react-student-embedded) body #homeDashboard .landing-final-ai-plan > header { flex-wrap: wrap; }
html:not(.react-student-embedded) body #homeDashboard .landing-final-task-metrics {
  min-width: 0; flex-wrap: wrap;
}
html:not(.react-student-embedded) body #homeDashboard .landing-final-task-metrics > span { min-width: 0; }
html:not(.react-student-embedded) body #homeDashboard .landing-final-secondary-tasks > summary {
  min-height: 48px; padding-block: 10px;
}
html:not(.react-student-embedded) body #homeDashboard .landing-final-secondary-tasks > summary > strong {
  white-space: normal; overflow: visible; text-overflow: clip;
}
html:not(.react-student-embedded) body #homeDashboard .landing-optional-task {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px;
  align-items: center; min-height: 48px; width: 100%; padding: 10px;
  border: 1px solid var(--home-border); border-radius: 10px;
  background: var(--home-card) !important; color: var(--home-ink) !important;
  text-align: left; cursor: pointer;
}
html:not(.react-student-embedded) body #homeDashboard .landing-optional-task :is(span, em) {
  color: var(--home-muted) !important; font-size: 12px; font-style: normal;
}
html:not(.react-student-embedded) body #homeDashboard .landing-optional-task strong { font-size: 14px; }
html:not(.react-student-embedded) body #homeDashboard :is(.landing-optional-task, .landing-home-shortcut-grid > button):hover {
  border-color: var(--home-accent) !important; box-shadow: 0 0 0 1px var(--home-accent);
}
html:not(.react-student-embedded) body #homeDashboard :is(button, summary):focus-visible {
  outline: 3px solid #8774ff !important; outline-offset: 3px !important;
}
/* Keep a single prominent CTA. Stable geometry also avoids hover jitter. */
html:not(.react-student-embedded) body #homeDashboard#homeDashboard #landingStartInterviewBtn,
html:not(.react-student-embedded) body #homeDashboard #landingFirstUseAssessmentBtn {
  background: linear-gradient(120deg, #2457d6, #6640cb) !important;
  color: #fff !important; filter: none !important; transform: none !important;
}
html:not(.react-student-embedded) body #homeDashboard :is(#landingStartInterviewBtn, #landingFirstUseAssessmentBtn) > :is(span, small, i) {
  color: #fff !important;
}
html:not(.react-student-embedded) body #homeDashboard :is(#landingStartInterviewBtn, #landingFirstUseAssessmentBtn) > small {
  font-size: 12px !important; line-height: 1.5 !important;
}
html:not(.react-student-embedded) body #homeDashboard #landingRecommendedTrainingBtn {
  background: var(--home-card) !important; color: var(--home-accent) !important;
  border: 1px solid var(--home-border) !important; min-height: 44px;
}
html:not(.react-student-embedded) body #homeDashboard #landingRecommendedTrainingBtn i { color: inherit !important; }
html:not(.react-student-embedded) body #homeDashboard #landingRecentTaskButton {
  background: var(--home-accent-bg) !important; color: var(--home-accent) !important;
  border: 1px solid var(--home-border) !important; min-height: 44px;
}
html:not(.react-student-embedded) body #homeDashboard .landing-recent-task-progress > div > i {
  background: var(--home-border) !important;
}
html:not(.react-student-embedded) body #homeDashboard #landingRecentTaskBar {
  background: linear-gradient(90deg, #6c94ff, #b298ff) !important;
}
html:not(.react-student-embedded) body #homeDashboard #landingRecentTaskMeta:not([hidden]) {
  display: block !important; overflow-wrap: anywhere; line-height: 1.6;
}
/* Reset inherited dashboard grid placement; the continuation card must grow
   with its content so the following shortcuts cannot cover its action. */
html:not(.react-student-embedded) body #homeDashboard#homeDashboard .landing-weekly-growth {
  display: flex !important; flex-direction: column; gap: 16px !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  grid-template-rows: none !important; grid-template-columns: none !important;
}
html:not(.react-student-embedded) body #homeDashboard#homeDashboard :is(.landing-weekly-growth-head, #landingWeeklyGrowthList) {
  position: static !important; transform: none !important; grid-area: auto !important;
  width: 100% !important; height: auto !important; min-height: 0 !important;
  max-height: none !important; margin: 0 !important; flex: 0 0 auto !important;
}
html:not(.react-student-embedded) body #homeDashboard #landingWeeklyGrowthList {
  grid-template-rows: none !important; grid-auto-rows: auto !important;
}
html:not(.react-student-embedded) body #homeDashboard#homeDashboard .landing-weekly-growth-head {
  text-align: left !important; align-items: flex-start !important; flex-wrap: wrap;
}
html:not(.react-student-embedded) body #homeDashboard#homeDashboard .landing-recent-task-card {
  position: static !important; transform: none !important; height: auto !important;
  min-height: 0 !important; max-height: none !important; overflow: visible !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr) !important;
  grid-template-rows: auto !important; align-items: center !important; gap: 16px !important;
}
html:not(.react-student-embedded) body #homeDashboard#homeDashboard .landing-recent-task-card > div {
  position: static !important; transform: none !important; grid-area: auto !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
}
html:not(.react-student-embedded) body #homeDashboard#homeDashboard .landing-recent-task-progress {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}
html:not(.react-student-embedded) body #homeDashboard#homeDashboard #landingRecentTaskMeta {
  white-space: normal !important; text-overflow: clip !important; overflow: visible !important;
}
html:not(.react-student-embedded) body #homeDashboard #v1ClosureJourney .v1-closure-journey__step i {
  background: var(--home-inset) !important; color: var(--home-muted) !important;
  border: 1px solid var(--home-border); width: 26px; height: 26px; font-size: 12px;
}
html:not(.react-student-embedded) body #homeDashboard #v1ClosureJourney .v1-closure-journey__step::after {
  background: var(--home-border) !important; top: 12px;
}
html:not(.react-student-embedded) body #homeDashboard #v1ClosureJourney .v1-closure-journey__step.is-done i {
  background: var(--home-success-bg) !important; color: var(--home-success) !important;
}
html:not(.react-student-embedded) body #homeDashboard #v1ClosureJourney .v1-closure-journey__step.is-current i {
  background: #4b40bc !important; color: #fff !important; border-color: #a89afa;
}
html:not(.react-student-embedded) body #homeDashboard #v1ClosureJourney .v1-closure-journey__step > span {
  white-space: normal; overflow: visible; text-overflow: clip;
}
html:not(.react-student-embedded) body #homeDashboard #v1ClosureJourney .v1-closure-journey__action {
  background: var(--home-accent-bg) !important; color: var(--home-accent) !important;
  border: 1px solid var(--home-border) !important; box-shadow: none !important; min-height: 44px;
}
/* First visit: all nested surfaces and step badges participate in the theme. */
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-main {
  background: var(--home-card) !important;
}
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-route {
  background: var(--home-inset) !important; border-color: var(--home-border) !important;
}
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-route li {
  background: var(--home-card) !important; border-color: var(--home-border) !important;
}
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-route li > b,
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-badge {
  background: var(--home-accent-bg) !important; color: var(--home-accent) !important;
}
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-route :is(header > span, li span, li em),
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-trust span {
  color: var(--home-muted) !important; font-size: 12px !important; line-height: 1.6 !important;
}
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-route footer {
  background: var(--home-success-bg) !important;
}
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-route footer :is(span, strong, small) {
  color: var(--home-success) !important; font-size: 12px !important;
}
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-route footer > span {
  background: var(--home-success-bg) !important; border: 1px solid var(--home-success);
}
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-description { font-size: 14px !important; }
html:not(.react-student-embedded) body #homeDashboard .landing-first-use-lead { font-size: 20px !important; }
/* The first-use action opens a body-level dialog rather than an in-panel card. */
html[data-theme="dark"]:not(.react-student-embedded) body #onboardingModal {
  background: #081221 !important;
}
html:not(.react-student-embedded) body #onboardingModal .onboarding-card {
  background: var(--home-card) !important; border-color: var(--home-border) !important;
  color: var(--home-ink) !important;
}
html:not(.react-student-embedded) body #onboardingModal :is(h3, h4, strong, b) { color: var(--home-ink) !important; }
html:not(.react-student-embedded) body #onboardingModal :is(p, span, em, small, .eyebrow, .onboarding-kicker) {
  color: var(--home-muted) !important; font-size: 12px !important; line-height: 1.6 !important;
}
html:not(.react-student-embedded) body #onboardingModal :is(
  .onboarding-direction-grid > button, .onboarding-experience-grid > button,
  .onboarding-assessment-item, .onboarding-assessment-status, .onboarding-profile-hero,
  .onboarding-seven-day-plan article
) {
  background: var(--home-inset) !important; border-color: var(--home-border) !important;
}
html:not(.react-student-embedded) body #onboardingModal :is(
  .onboarding-profile-diagnosis > span, .onboarding-assessment-options > button
) {
  background: var(--home-card) !important; color: var(--home-ink) !important;
  border-color: var(--home-border) !important; font-size: 12px;
}
html:not(.react-student-embedded) body #onboardingModal .onboarding-experience-grid > button i,
html:not(.react-student-embedded) body #onboardingModal #onboardingStepLabel,
html:not(.react-student-embedded) body #onboardingModal [role="radio"].is-selected,
html:not(.react-student-embedded) body #onboardingModal .onboarding-assessment-options > button.is-selected {
  background: var(--home-accent-bg) !important; color: var(--home-accent) !important;
  border-color: #9684e9 !important; transform: none;
}
html:not(.react-student-embedded) body #onboardingModal .onboarding-ai-ready {
  background: var(--home-success-bg) !important; color: var(--home-success) !important;
}
html:not(.react-student-embedded) body #onboardingModal .onboarding-first-training-card {
  background: #244294 !important; border-color: #819cdb !important;
}
html:not(.react-student-embedded) body #onboardingModal .onboarding-first-training-card :is(span, strong, b, em) {
  color: #fff !important;
}
html:not(.react-student-embedded) body #onboardingModal :is(.primary-btn, #onboardingStartBtn) {
  background: linear-gradient(120deg, #2457d6, #6640cb) !important; color: #fff !important;
}
html:not(.react-student-embedded) body #onboardingModal .ghost-btn {
  background: var(--home-inset) !important; color: var(--home-ink) !important; border-color: var(--home-border) !important;
}
html:not(.react-student-embedded) body #onboardingModal .onboarding-progress { background: var(--home-border) !important; }
html:not(.react-student-embedded) body #onboardingModal .onboarding-progress i { background: #8f9dff !important; }
html:not(.react-student-embedded) body #onboardingModal .onboarding-assessment-options > button { min-height: 44px; }
html:not(.react-student-embedded) body #onboardingModal :is(.onboarding-profile-title, .onboarding-seven-day-head) { flex-wrap: wrap; }
@media (min-width: 761px) {
  html:not(.react-student-embedded) body #homeDashboard #v1ClosureJourney {
    grid-template-columns: minmax(0, 1fr) auto; gap: 20px;
  }
  html:not(.react-student-embedded) body #homeDashboard #v1ClosureJourney .v1-closure-journey__track {
    grid-row: 2; grid-column: 1 / -1;
  }
  html:not(.react-student-embedded) body #homeDashboard #v1ClosureJourney .v1-closure-journey__action {
    grid-row: 1; grid-column: 2;
  }
}
@media (max-width: 1100px) and (min-width: 761px) {
  html:not(.react-student-embedded) body #homeDashboard .landing-final-growth-feedback {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  html:not(.react-student-embedded) body #homeDashboard .landing-final-weekly-stats { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  html:not(.react-student-embedded) body #homeDashboard { padding: 12px 14px 36px !important; }
  html:not(.react-student-embedded) body #homeDashboard#homeDashboard .landing-recent-task-card {
    grid-template-columns: minmax(0, 1fr) !important; padding: 16px !important;
  }
  html:not(.react-student-embedded) body #homeDashboard#homeDashboard .landing-recent-task-progress {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  html:not(.react-student-embedded) body #homeDashboard#homeDashboard .landing-recent-task-progress > span { grid-column: 1 / -1; }
  html:not(.react-student-embedded) body #homeDashboard#homeDashboard .landing-home-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html:not(.react-student-embedded) body #homeDashboard#homeDashboard .landing-home-shortcut-grid > button {
    display: flex !important; flex-direction: column; align-items: flex-start !important;
    padding: 14px !important; min-height: 100px !important; gap: 8px !important;
  }
  html:not(.react-student-embedded) body[data-active-panel="landing"].mobile-navigation-enabled .topbar:has(#pageTitle#pageTitle) .topbar-left {
    min-width: max-content !important; width: auto !important; grid-column: 1 !important; grid-row: 1 !important;
  }
  html:not(.react-student-embedded) body[data-active-panel="landing"] #pageTitle#pageTitle#pageTitle {
    white-space: nowrap !important; width: max-content !important; min-width: max-content !important;
  }
  html:not(.react-student-embedded) body #homeDashboard .landing-final-primary-task { padding: 14px; }
  html:not(.react-student-embedded) body #homeDashboard .landing-final-target-grid {
    grid-template-columns: minmax(0, 1fr) 108px !important;
  }
  html:not(.react-student-embedded) body #homeDashboard .landing-final-target-gaps { grid-column: 1 / -1 !important; }
  html:not(.react-student-embedded) body #homeDashboard .landing-final-growth-feedback {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 16px;
  }
  html:not(.react-student-embedded) body #homeDashboard .landing-final-growth-feedback > header,
  html:not(.react-student-embedded) body #homeDashboard .landing-final-weekly-stats { grid-column: 1 / -1 !important; }
  html:not(.react-student-embedded) body #homeDashboard .landing-final-weekly-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html:not(.react-student-embedded) body #homeDashboard :is(.landing-final-streak, .landing-final-ability-gain) { padding-inline: 0; }
  html:not(.react-student-embedded) body #homeDashboard .landing-final-ability-gain { grid-column: 2; grid-row: 2; }
  html:not(.react-student-embedded) body #homeDashboard .landing-final-weekly-stats > span { padding: 10px 7px; }
  html:not(.react-student-embedded) body #homeDashboard #landingFirstUseAssessmentBtn {
    width: 100%; min-width: 0 !important; grid-template-columns: minmax(0, 1fr) 24px !important;
    gap: 0 8px !important; padding: 12px 16px !important; text-align: left;
  }
  html:not(.react-student-embedded) body #homeDashboard #landingFirstUseAssessmentBtn > small {
    grid-column: 1; padding: 0 !important; border: 0 !important;
  }
  html:not(.react-student-embedded) body #homeDashboard #landingFirstUseAssessmentBtn > i { grid-column: 2; grid-row: 1 / 3; }
}

/* Task navigation contains nested group buttons as well as direct links.
   The old direct-child icon fix missed groups: the fallback text and mask
   occupied two grid rows inside a 22px clipping box. Render only one mask. */
html:not(.react-student-embedded) body.mobile-navigation-enabled {
  --hw-sidebar-color: #334155; --hw-sidebar-muted: #52627a;
  --hw-sidebar-background: linear-gradient(180deg, #fff, #f6f8fc);
  --hw-sidebar-border: #d8e1ed; --hw-sidebar-shadow: 12px 0 32px rgb(15 23 42 / 12%);
  --hw-sidebar-accountBorder: #cbd7e7; --hw-sidebar-avatarRing: #b9c7db;
  --hw-sidebar-toggleColor: #334155; --hw-sidebar-account-background: #f0f4fb;
  --hw-sidebar-color-scheme: light;
}
html[data-theme="dark"]:not(.react-student-embedded) body.mobile-navigation-enabled {
  --hw-sidebar-color: #e2ebf8; --hw-sidebar-muted: #bfcee3;
  --hw-sidebar-background: linear-gradient(180deg, #0e1c32, #0a1424);
  --hw-sidebar-border: #344864; --hw-sidebar-shadow: 12px 0 32px rgb(0 0 0 / 30%);
  --hw-sidebar-accountBorder: #455b7b; --hw-sidebar-avatarRing: #6c82a1;
  --hw-sidebar-toggleColor: #e2ebf8; --hw-sidebar-account-background: #1b2b43;
  --hw-sidebar-color-scheme: dark;
}
html:not(.react-student-embedded) body.mobile-navigation-enabled #mobileNavigationDrawer {
  background: var(--hw-sidebar-background) !important;
  color: var(--hw-sidebar-color) !important;
}
html:not(.react-student-embedded) body #workspaceNavigation .menu-item::before,
html:not(.react-student-embedded) body #workspaceNavigation .menu-item::after {
  content: none !important; display: none !important;
}
html:not(.react-student-embedded) body #workspaceNavigation .menu-item > .menu-item-icon {
  position: relative !important; inset: auto !important;
  display: block !important; flex: 0 0 22px !important;
  width: 22px !important; min-width: 22px !important; max-width: 22px !important;
  height: 22px !important; min-height: 22px !important; max-height: 22px !important;
  margin: 0 10px 0 0 !important; padding: 0 !important;
  font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important;
  overflow: visible !important; opacity: 1 !important; visibility: visible !important;
  transform: none !important; pointer-events: none !important;
}
html:not(.react-student-embedded) body #workspaceNavigation .menu-item > .menu-item-icon::before {
  content: "" !important; position: absolute !important; inset: 1px !important;
  display: block !important; width: 20px !important; min-width: 20px !important; max-width: 20px !important;
  height: 20px !important; min-height: 20px !important; max-height: 20px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: currentColor !important; box-shadow: none !important;
  opacity: 1 !important; visibility: visible !important; transform: none !important;
  -webkit-mask: var(--hw-nav-icon) center / 20px 20px no-repeat !important;
  mask: var(--hw-nav-icon) center / 20px 20px no-repeat !important;
}
html:not(.react-student-embedded) body #workspaceNavigation .menu-item > .menu-item-icon::after {
  content: none !important; display: none !important;
}
/* The mobile drawer used a two-ID static-position lock; keep the mask anchored
   to its icon box there as well, without changing drawer visibility or sizing. */
html:not(.react-student-embedded) body #mobileNavigationDrawer #workspaceNavigation .menu-item > .menu-item-icon {
  position: relative !important;
}
@media (min-width: 768px) {
  html:not(.react-student-embedded) body .shell.sidebar-collapsed #workspaceNavigation .menu-item > .menu-item-icon {
    grid-area: 1 / 1 !important; margin: 0 !important; place-self: center !important;
  }
  html:not(.react-student-embedded) body .shell.sidebar-collapsed #workspaceNavigation :is(.menu-item-label, .workspace-nav-chevron, .workspace-nav-children) {
    display: none !important;
  }
}
/* Keep a transparent hit target, not a decorative square around the menu icon.
   Only keyboard focus draws an outline; mouse hover never changes its size. */
html:not(.react-student-embedded) body :is(#sidebarToggle#sidebarToggle, #mobileNavigationToggle#mobileNavigationToggle) {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; font-size: 20px !important; line-height: 1 !important;
  transform: none !important; cursor: pointer;
}
html:not(.react-student-embedded) body :is(#sidebarToggle#sidebarToggle, #mobileNavigationToggle#mobileNavigationToggle):not(:focus-visible) {
  outline: none !important;
}
html:not(.react-student-embedded) body :is(#sidebarToggle#sidebarToggle, #mobileNavigationToggle#mobileNavigationToggle):focus-visible,
html:not(.react-student-embedded) body #workspaceNavigation .menu-item:focus-visible {
  outline: 2px solid #8b9fff !important; outline-offset: 2px !important;
}

/* Interview lobby is outside #interviewStudio. Give its unclassified span/em
   badges explicit foreground AND surface colors in both themes. */
html:not(.react-student-embedded) body[data-active-panel="interview"] {
  --interview-card: #fff; --interview-inset: #f0f4fb; --interview-ink: #20314b;
  --interview-muted: #475b76; --interview-line: #cbd7e7;
  --interview-accent: #4b33a8; --interview-accent-bg: #ede9ff;
  --interview-blue: #174b92; --interview-blue-bg: #e5efff;
  --interview-rose: #9c2542; --interview-rose-bg: #ffe8ee;
}
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] {
  --interview-card: #101b2e; --interview-inset: #1b2b43; --interview-ink: #eaf0ff;
  --interview-muted: #bfcee3; --interview-line: #4a6081;
  --interview-accent: #d4c6ff; --interview-accent-bg: #30274d;
  --interview-blue: #bfdbff; --interview-blue-bg: #1b3556;
  --interview-rose: #ffbfd0; --interview-rose-bg: #47273a;
}
html:not(.react-student-embedded) body #interviewLobby :is(
  .interview-meeting-lobby-head, .interview-meeting-lobby-grid,
  .interview-lobby-side, .interview-lobby-actions, .interview-lobby-question-tags
) { background: transparent !important; }
html:not(.react-student-embedded) body #interviewLobby :is(
  .interview-lobby-mode-bar, .interview-meeting-lobby-status, .interview-lobby-interviewer,
  .interview-lobby-question, .interview-lobby-side > section,
  .interview-lobby-mode-brief, .interview-lobby-mode-brief > section
) { background: var(--interview-card) !important; border-color: var(--interview-line) !important; }
html:not(.react-student-embedded) body #interviewLobby :is(h2, h3, strong, dd) { color: var(--interview-ink) !important; }
html:not(.react-student-embedded) body #interviewLobby :is(p, small, em, time, dt, .eyebrow),
html:not(.react-student-embedded) body #interviewLobby .interview-meeting-lobby-head > div > span {
  color: var(--interview-muted) !important; font-size: 12px !important; line-height: 1.6 !important;
}
html:not(.react-student-embedded) body #interviewLobby .interview-final-mode-option {
  --mode-ink: var(--interview-accent); --mode-bg: var(--interview-accent-bg);
  background: var(--interview-card) !important; color: var(--interview-ink) !important;
  border: 1px solid var(--interview-line) !important;
  transform: none !important; min-height: 72px; box-shadow: none !important;
}
html:not(.react-student-embedded) body #interviewLobby [data-interview-final-mode="real"] {
  --mode-ink: var(--interview-blue); --mode-bg: var(--interview-blue-bg);
}
html:not(.react-student-embedded) body #interviewLobby [data-interview-final-mode="pressure"] {
  --mode-ink: var(--interview-rose); --mode-bg: var(--interview-rose-bg);
}
html:not(.react-student-embedded) body #interviewLobby .interview-final-mode-option:is(:hover, :focus-visible, .is-active) {
  background: var(--mode-bg) !important; border-color: var(--mode-ink) !important;
}
html:not(.react-student-embedded) body #interviewLobby .interview-final-mode-option.is-active {
  box-shadow: inset 0 0 0 1px var(--mode-ink) !important;
}
html:not(.react-student-embedded) body #interviewLobby .interview-final-mode-option > :is(i, em) {
  background: var(--mode-bg) !important; color: var(--mode-ink) !important;
  font-size: 12px !important; line-height: 1.5 !important;
}
html:not(.react-student-embedded) body #interviewLobby .interview-final-mode-option strong { font-size: 15px !important; }
html:not(.react-student-embedded) body #interviewLobby .interview-lobby-question-tags > span {
  background: var(--interview-inset) !important; color: var(--interview-ink) !important;
  border-color: var(--interview-line) !important; font-size: 12px !important; line-height: 1.5 !important;
}
html:not(.react-student-embedded) body #interviewPage .interview-video-live {
  background: var(--interview-inset) !important; color: var(--interview-ink) !important;
  border-color: var(--interview-line) !important; min-height: 30px !important;
  max-width: calc(100% - 24px); padding: 5px 10px !important; font-size: 12px !important;
  line-height: 1.5 !important; white-space: normal;
}
html:not(.react-student-embedded) body #interviewPage .interview-video-live [data-client-ai-status-label] {
  color: var(--interview-ink) !important; font-size: 12px !important;
}
html:not(.react-student-embedded) body #interviewLobby :is(
  .interview-lobby-analysis dl > div, .interview-lobby-mode-brief li,
  .interview-lobby-mode-brief dl > div, .interview-pressure-example p,
  .interview-lobby-waveform
) { background: var(--interview-inset) !important; border-color: var(--interview-line) !important; }
html:not(.react-student-embedded) body #interviewLobby :is(
  .interview-lobby-analysis dt, .interview-lobby-analysis dd,
  .interview-lobby-question > div:first-child > span,
  .interview-lobby-mode-brief li, .interview-lobby-mode-brief li b,
  .interview-lobby-mode-brief section > div > span
) { color: var(--interview-ink) !important; font-size: 12px !important; }
html:not(.react-student-embedded) body #interviewLobby .interview-lobby-mode-brief dd { color: var(--interview-accent) !important; }
html:not(.react-student-embedded) body #interviewLobby .interview-pressure-example b {
  background: var(--interview-rose-bg) !important; color: var(--interview-rose) !important;
}
html:not(.react-student-embedded) body #interviewLobby .interview-lobby-video > div {
  background: transparent !important;
}
html:not(.react-student-embedded) body #interviewLobby .interview-lobby-video > div > strong { color: #f3f7ff !important; }
html:not(.react-student-embedded) body #interviewLobby .interview-lobby-video > div > small { color: #cad7eb !important; }
html:not(.react-student-embedded) body #interviewLobby #interviewSpaceStartBtn {
  background: linear-gradient(120deg, #2457d6, #6640cb) !important; color: #fff !important;
}
html:not(.react-student-embedded) body #interviewLobby #interviewSpaceStartBtn span { color: #fff !important; }
html:not(.react-student-embedded) body #interviewLobby .interview-lobby-actions .ghost-btn {
  background: var(--interview-inset) !important; color: var(--interview-muted) !important;
  border-color: var(--interview-line) !important;
}
html:not(.react-student-embedded) body #interviewLobby .interview-lobby-actions button:disabled {
  opacity: 1 !important; border-style: dashed !important; cursor: not-allowed;
}
html:not(.react-student-embedded) body #interviewLobby :is(button, summary):focus-visible {
  outline: 3px solid #9482ef !important; outline-offset: 3px !important;
}
/* Shared interview/training workbench metadata: the old light-only locks used
   pale gray even on tinted cards. Scope this to text, preserving avatar assets. */
html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio :is(
  .interview-final-active-mode > span, #interviewActiveModeDescription,
  #interviewProgressKindLabel, #interviewTopRemaining, .interview-training-score > span,
  .interview-question-info-row b, #interviewAnswerRecordingLabel, #interviewAnswerRecordingTimer,
  .interview-video-tile > div > small, .interview-question-card-head > em,
  #engineeringTrainingFlow > header > em
) { color: #3e526d !important; }
html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio :is(
  #engineeringTrainingFlow > header > span, #interviewQuestionMeta > span
) { background: #ede9ff !important; color: #4b33a8 !important; }
html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #voiceStatusBadge {
  background: #e6f4ed !important; color: #166343 !important;
}
html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #finishInterviewTrainingBtn {
  background: #fff0f3 !important; color: #a12843 !important; border-color: #c78090 !important;
}
html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #engineeringTrainingFlow li.is-current {
  background: linear-gradient(120deg, #2457d6, #6640cb) !important;
}
html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #engineeringTrainingFlow li.is-current :is(span, strong, small, i) {
  color: #fff !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] :is(#startInterviewRecordingBtn, #nextQuestionBtn) {
  background: linear-gradient(120deg, #2457d6, #6640cb) !important; color: #fff !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewBottomStage {
  background: var(--interview-accent-bg) !important; color: var(--interview-accent) !important;
}
/* Answer entry, scoring and pressure follow-ups can appear after the lobby.
   Pair their colors locally; do not alter hidden states or model behavior. */
html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #candidateAnswer::placeholder {
  color: #52627a !important; -webkit-text-fill-color: #52627a !important; opacity: 1 !important;
}
html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone:not([data-voice-state="live"]) .interview-answer-recording-pill {
  background: #eaf0f8 !important; color: #3e526d !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio :is(
  #interviewFinalScoreStatus, .coach-completeness-main small
) { color: var(--interview-muted) !important; }
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio :is(
  .coach-live-score-head em, .coach-panel-title > span, #copilotFollowupToggle
) {
  background: var(--interview-accent-bg) !important; color: var(--interview-accent) !important;
  border-color: var(--interview-line) !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #copilotAnswerFrame .coach-structure-item > b {
  background: var(--interview-inset) !important; color: var(--interview-muted) !important;
}
html[data-theme="light"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #copilotAnswerFrame .coach-structure-item.done > b {
  background: #e6f4ed !important; color: #166343 !important;
}
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #copilotAnswerFrame .coach-structure-item.done > b {
  background: #185345 !important; color: #abf3d6 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"][data-interview-final-mode="pressure"] #interviewStudio#interviewStudio #interviewActiveModeLabel,
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewPressureChain > header > :is(span, strong) {
  color: var(--interview-rose) !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewPressureTranscript p {
  background: var(--interview-inset) !important; color: var(--interview-ink) !important;
  font-size: 12px !important; line-height: 1.6 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewPressureTranscript p[data-role="ai"] {
  background: var(--interview-rose-bg) !important; color: var(--interview-rose) !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewPressureTranscript p :is(b, span) {
  color: inherit !important; font-size: inherit !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewFinalScorePanel article > i {
  background: var(--interview-inset) !important;
}
@media (max-width: 760px) {
  html:not(.react-student-embedded) body #interviewLobby .interview-final-mode-option { min-height: 70px; }
  html:not(.react-student-embedded) body #interviewLobby .interview-lobby-question { padding: 18px; }
  html:not(.react-student-embedded) body #interviewLobby .interview-lobby-video > div { flex-wrap: wrap; }
  html:not(.react-student-embedded) body #interviewLobby .interview-lobby-actions { grid-template-columns: minmax(0, 1fr); }
  html:not(.react-student-embedded) body[data-active-panel="interview"].mobile-navigation-enabled .topbar:has(#pageTitle#pageTitle) .topbar-left {
    min-width: max-content !important; width: auto !important; grid-column: 1 !important; grid-row: 1 !important;
  }
  html:not(.react-student-embedded) body[data-active-panel="interview"] #pageTitle#pageTitle#pageTitle {
    white-space: nowrap !important; width: max-content !important; min-width: max-content !important;
  }
}