/* 硬问 V5.1 workbench convergence.
   This file is intentionally loaded last: it replaces the legacy layout locks
   without changing the existing data and interaction layer. */

html:not(.react-student-embedded) {
  --v51-bg: #f3f6fb;
  --v51-card: #ffffff;
  --v51-card-soft: #f7f9fc;
  --v51-text: #0f172a;
  --v51-muted: #64748b;
  --v51-border: rgba(148, 163, 184, 0.24);
  --v51-blue: #1677ff;
  --v51-blue-soft: rgba(37, 99, 235, 0.1);
  --v51-green: #00b578;
  --v51-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

/* Engineering training is a two-level workspace: recommended cases first,
   measurement laboratories second. */
html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section {
  margin-top: 18px !important;
  padding: 22px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-heading :is(p, h3) {
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-heading p {
  color: var(--v51-blue) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-heading h3 {
  margin-top: 4px !important;
  color: var(--v51-text) !important;
  font-size: 21px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-heading > span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card {
  min-width: 0 !important;
  min-height: 158px !important;
  padding: 18px !important;
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card:hover {
  border-color: color-mix(in srgb, var(--v51-blue) 48%, var(--v51-border)) !important;
  transform: translateY(-2px) !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card span {
  width: fit-content !important;
  padding: 4px 9px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card strong {
  color: var(--v51-text) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card em {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-card b {
  margin-top: auto !important;
  color: var(--v51-blue) !important;
  font-size: 12px !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-training-section .engineering-entry-grid {
    grid-template-columns: 1fr !important;
  }
}

/* V5.2 five-item product shell. Concrete tools live inside workspaces, so the
   primary sidebar only communicates destination and must stay legible when
   collapsed. */
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar .menu.menu > .menu-item.menu-item {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .menu-item::before {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .menu-item-icon {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: currentColor !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html:not(.react-student-embedded) .shell.sidebar-collapsed .menu-item-label {
  display: none !important;
}

/* One visual grammar for the second layer: interview, engineering, learning
   and profile applications all use the same four-column launcher. */
html:not(.react-student-embedded) .workspace-app-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}

/* V5 focused home: one decision, one primary action, one growth result and
   four real workspaces. This terminal block deliberately wins over the legacy
   dashboard layouts that are still kept for data compatibility. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace {
  width: 100% !important;
  max-width: none !important;
  padding: 24px clamp(22px, 3vw, 48px) 48px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="welcome"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="v5-command-center"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="shortcuts"] {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] :is(
  .landing-welcome-panel,
  .engineering-workbench-task,
  .engineering-growth-card,
  .landing-home-shortcuts
) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] :is(
  .landing-welcome-panel,
  .engineering-workbench-task,
  .engineering-growth-card,
  .landing-home-shortcuts
)::before,
html:not(.react-student-embedded) body[data-active-panel="landing"] :is(
  .landing-welcome-panel,
  .engineering-workbench-task,
  .engineering-growth-card,
  .landing-home-shortcuts
)::after {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 112px !important;
  padding: 22px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-profile-avatar {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 60px !important;
  display: block !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 !important;
  border: 2px solid color-mix(in srgb, var(--v51-blue) 40%, var(--v51-border)) !important;
  border-radius: 50% !important;
  background-color: var(--v51-card-soft) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--v51-blue) 16%, transparent) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-profile-avatar::before,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-profile-avatar::after {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-copy {
  position: static !important;
  display: grid !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-copy > * {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-greeting-line {
  color: var(--v51-text) !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-current-target {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: var(--v51-muted) !important;
  font-size: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-current-target strong {
  color: var(--v51-text) !important;
  font-size: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] article.engineering-workbench-task[data-home-module-key="v5-command-center"] {
  display: block !important;
  min-height: 0 !important;
  padding: clamp(26px, 3vw, 40px) !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--v51-blue) 13%, transparent), transparent 38%),
    var(--v51-card) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 0 16px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-header h2,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-head h2,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcuts-head h2 {
  margin: 4px 0 0 !important;
  color: var(--v51-text) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-score {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  color: var(--v51-muted) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-score strong {
  color: var(--v51-text) !important;
  font-size: 42px !important;
  line-height: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-score small {
  margin-left: 3px !important;
  color: var(--v51-blue) !important;
  font-size: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-body {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr) !important;
  gap: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] :is(.landing-target-gap, .landing-today-advice) {
  min-width: 0 !important;
  padding: 20px !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-target-gap {
  display: grid !important;
  align-content: center !important;
  gap: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-target-gap > span,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-today-advice > span,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-action-row span {
  color: var(--v51-muted) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-target-gap-list {
  display: grid !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-target-gap-list strong {
  min-height: 46px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-target-gap-list strong::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  margin-right: 10px !important;
  background: var(--v51-orange) !important;
  border-radius: 50% !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-today-advice {
  display: grid !important;
  align-content: center !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-today-advice h1 {
  margin: 2px 0 0 !important;
  color: var(--v51-text) !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-today-advice > p {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-advice-evidence {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-advice-evidence em {
  padding: 7px 10px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-action-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-action-row > div {
  display: grid !important;
  gap: 3px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-action-row strong {
  color: var(--v51-text) !important;
  font-size: 24px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] #landingStartInterviewBtn {
  width: min(220px, 42%) !important;
  min-width: 180px !important;
  min-height: 50px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcuts {
  padding: 24px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] :is(.landing-weekly-growth-head, .landing-home-shortcuts-head) {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] :is(.landing-weekly-growth-head, .landing-home-shortcuts-head) > span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-list {
  display: block !important;
  width: 100% !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.2fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 18px 20px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item > span {
  color: var(--v51-text) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item > p {
  color: var(--v51-text) !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item > strong {
  color: var(--v51-green) !important;
  font-size: 17px !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid > button {
  min-width: 0 !important;
  min-height: 112px !important;
  padding: 16px 18px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-content: center !important;
  align-items: center !important;
  gap: 4px 12px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid > button:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--v51-blue) 52%, var(--v51-border)) !important;
  background: var(--v51-blue-soft) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid > button > span {
  grid-row: 1 / span 2 !important;
  font-size: 23px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid strong {
  color: var(--v51-text) !important;
  font-size: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid em {
  overflow: hidden !important;
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-body {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel {
    align-items: flex-start !important;
    padding: 18px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-profile-avatar {
    flex-basis: 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-current-target,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-header,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-action-row,
  html:not(.react-student-embedded) body[data-active-panel="landing"] :is(.landing-weekly-growth-head, .landing-home-shortcuts-head) {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-task-score {
    align-self: flex-start !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] #landingStartInterviewBtn {
    width: 100% !important;
    min-width: 0 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-shortcut-grid {
    grid-template-columns: 1fr !important;
  }
}

/* V5 learning library: show real, actionable knowledge cards first and keep
   the expert map available without letting it dominate the everyday flow. */
html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 22px 0 14px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-head :is(p, h3) {
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-head h3 {
  margin-top: 4px !important;
  color: var(--v51-text) !important;
  font-size: 20px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-head > span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card {
  min-width: 0 !important;
  min-height: 164px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > span {
  color: var(--v51-blue) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > p {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > div {
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > div > em {
  color: var(--v51-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details {
  margin-top: 20px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary {
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  cursor: pointer !important;
  list-style: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary::-webkit-details-marker {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary > span {
  display: grid !important;
  gap: 4px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary b,
html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary em {
  color: var(--v51-blue) !important;
  font-size: 11px !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary strong {
  color: var(--v51-text) !important;
  font-size: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details[open] > summary {
  border-bottom: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > .knowledge-layout {
  margin: 0 !important;
  padding: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-workspace-app-grid {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-grid {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card-head,
  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-expert-details > summary {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* Product IA v5: one stable 72px collapsed rail with no content overlap. */
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed {
  grid-template-columns: 72px minmax(0, 1fr) !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar {
  position: sticky !important;
  inset: 0 auto auto 0 !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  padding: 12px !important;
  overflow: hidden !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .main {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar > .brand {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;
  padding: 54px 0 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .brand-head.brand-head--main {
  display: grid !important;
  place-items: start center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .brand-icon-logo {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .brand-subtitle-text {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar #sidebarToggle.sidebar-toggle {
  position: absolute !important;
  top: 14px !important;
  right: 8px !important;
  left: auto !important;
  width: 32px !important;
  height: 32px !important;
  z-index: 120 !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  color: var(--v51-text) !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item-icon {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: var(--v51-text) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-account-card {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 2px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Feishu-meeting style interview: AI interviewer / answer / live scoring. */
@media (min-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 18px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-setup-card {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-arena-stack {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.42fr) minmax(340px, 0.58fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-card {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-answer-zone {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-feedback-card-inline {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card :is(.interview-live-transcript-card, #xiaowenLiveInterviewCoach) {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-copilot-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

/* “My” owns ability, growth and history; expert detail stays one level deeper. */
html:not(.react-student-embedded) .my-growth-hub {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 18px !important;
}

html:not(.react-student-embedded) .my-growth-card {
  min-width: 0 !important;
  padding: 24px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) .my-ability-card {
  grid-column: 1 / -1 !important;
}

html:not(.react-student-embedded) .my-ability-map {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 20px !important;
}

html:not(.react-student-embedded) .my-ability-row {
  display: grid !important;
  grid-template-columns: minmax(116px, 0.5fr) minmax(120px, 1fr) 40px !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 13px 14px !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 13px !important;
}

html:not(.react-student-embedded) .my-ability-row > div {
  display: grid !important;
  gap: 2px !important;
}

html:not(.react-student-embedded) .my-ability-row strong,
html:not(.react-student-embedded) .my-ability-row b {
  color: var(--v51-text) !important;
}

html:not(.react-student-embedded) .my-ability-row span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) .my-ability-row > i {
  height: 7px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--v51-text) 8%, transparent) !important;
  border-radius: 999px !important;
}

html:not(.react-student-embedded) .my-ability-row > i > em {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, var(--v51-blue), #7c3aed) !important;
  border-radius: inherit !important;
}

html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) {
  display: grid !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) > article {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 13px 14px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 13px !important;
}

html:not(.react-student-embedded) .my-training-history > article {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) span,
html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) p {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) b,
html:not(.react-student-embedded) :is(.my-growth-records, .my-training-history) em {
  color: var(--v51-blue) !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) .my-training-empty {
  display: grid !important;
  justify-items: start !important;
  gap: 8px !important;
  padding: 22px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px dashed var(--v51-border) !important;
  border-radius: 14px !important;
}

/* First-run onboarding: goal -> role -> generated route. */
html .onboarding-backdrop {
  z-index: 5000 !important;
  background: rgba(2, 8, 23, 0.58) !important;
  backdrop-filter: blur(10px) !important;
}

html .onboarding-card {
  display: grid !important;
  gap: 20px !important;
  width: min(720px, calc(100vw - 36px)) !important;
  max-width: 720px !important;
  max-height: min(760px, calc(100vh - 36px)) !important;
  padding: 28px !important;
  overflow: auto !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 28px 80px rgba(2, 8, 23, 0.3) !important;
}

html .onboarding-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

html .onboarding-head h3 {
  margin: 4px 0 0 !important;
  color: var(--v51-text) !important;
  font-size: 28px !important;
}

html #onboardingStepLabel {
  padding: 7px 11px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html .onboarding-progress {
  height: 6px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--v51-text) 8%, transparent) !important;
  border-radius: 999px !important;
}

html .onboarding-progress i {
  display: block !important;
  width: 33% !important;
  height: 100% !important;
  background: linear-gradient(90deg, var(--v51-blue), #7c3aed) !important;
  border-radius: inherit !important;
  transition: width 0.22s ease !important;
}

html .onboarding-step {
  display: grid !important;
  gap: 14px !important;
}

html .onboarding-step[hidden] {
  display: none !important;
}

html .onboarding-kicker {
  color: var(--v51-blue) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html .onboarding-step h4 {
  margin: 0 !important;
  color: var(--v51-text) !important;
  font-size: 21px !important;
}

html .onboarding-option-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html .onboarding-role-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html .onboarding-option-grid > button {
  display: grid !important;
  gap: 7px !important;
  min-height: 112px !important;
  padding: 18px !important;
  color: var(--v51-text) !important;
  text-align: left !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 15px !important;
  cursor: pointer !important;
}

html .onboarding-option-grid > button:hover,
html .onboarding-option-grid > button.is-selected {
  background: var(--v51-blue-soft) !important;
  border-color: var(--v51-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v51-blue) 12%, transparent) !important;
}

html .onboarding-option-grid b {
  font-size: 17px !important;
}

html .onboarding-option-grid em {
  color: var(--v51-muted) !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}

html .onboarding-route-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html .onboarding-route-list article {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 16px !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html .onboarding-route-list span {
  color: var(--v51-blue) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html .onboarding-route-list em {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}

html .onboarding-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding-top: 4px !important;
}

html .onboarding-actions > div {
  display: flex !important;
  gap: 10px !important;
}

@media (max-width: 820px) {
  html:not(.react-student-embedded) .my-growth-hub,
  html:not(.react-student-embedded) .my-ability-map,
  html .onboarding-option-grid,
  html .onboarding-role-grid,
  html .onboarding-route-list {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) .my-ability-card {
    grid-column: auto !important;
  }
}

html:not(.react-student-embedded) .workspace-app-grid > button {
  min-width: 0 !important;
  min-height: 116px !important;
  padding: 17px !important;
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
  overflow-wrap: anywhere !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .workspace-app-grid > button:hover,
html:not(.react-student-embedded) .workspace-app-grid > button.is-active {
  border-color: color-mix(in srgb, var(--v51-blue) 48%, transparent) !important;
  background-color: var(--v51-blue-soft) !important;
  transform: translateY(-1px) !important;
}

html:not(.react-student-embedded) .workspace-app-grid > button span {
  width: fit-content !important;
  padding: 4px 9px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .workspace-app-grid > button strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
}

html:not(.react-student-embedded) .workspace-app-grid > button em,
html:not(.react-student-embedded) .workspace-app-grid > button b {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) .workspace-app-grid > button {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) .v51-profile-entry-grid {
  margin: 18px 0 22px !important;
}

html:not(.react-student-embedded) .learning-library-section {
  padding: 22px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
  scroll-margin-top: 88px !important;
}

html:not(.react-student-embedded) .learning-formula-grid,
html:not(.react-student-embedded) .learning-record-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) .learning-formula-grid > article,
html:not(.react-student-embedded) .learning-record-card {
  min-width: 0 !important;
  padding: 16px !important;
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) .learning-formula-grid span,
html:not(.react-student-embedded) .learning-record-card > span {
  color: var(--v51-blue) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .learning-formula-grid strong,
html:not(.react-student-embedded) .learning-record-card > strong {
  color: var(--v51-text) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

html:not(.react-student-embedded) .learning-formula-grid p,
html:not(.react-student-embedded) .learning-record-card p,
html:not(.react-student-embedded) .learning-record-card em {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) .learning-record-card.is-empty {
  grid-column: 1 / -1 !important;
  min-height: 150px !important;
  align-content: center !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) .workspace-app-grid,
  html:not(.react-student-embedded) .learning-formula-grid,
  html:not(.react-student-embedded) .learning-record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  html:not(.react-student-embedded) .workspace-app-grid,
  html:not(.react-student-embedded) .learning-formula-grid,
  html:not(.react-student-embedded) .learning-record-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Focused-home terminal placement. Keep this at EOF: older homepage files and
   earlier compatibility rules must not re-enable hidden dashboard modules. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key="welcome"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key="v5-command-center"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key="shortcuts"] {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [hidden],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > [data-home-module-key="ai-advice"] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > article.landing-welcome-panel[data-home-module-key="welcome"] {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 112px !important;
  padding: 22px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > article.engineering-workbench-task[data-home-module-key="v5-command-center"] {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(26px, 3vw, 40px) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-today-advice h1 {
  color: var(--v51-text) !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: 1.15 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > article.engineering-growth-card[data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > article.landing-home-shortcuts[data-home-module-key="shortcuts"] {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 24px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-list {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-item {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.2fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 18px 20px !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-task-body {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-home-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-item,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-home-shortcut-grid {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL AI meeting room lock — question / answer / live scoring. */
@media (min-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 300px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    overflow: hidden auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-setup-card {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-arena-stack {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.9fr) minmax(320px, 1.1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-card {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-answer-zone {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-feedback-card-inline {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card :is(.interview-live-transcript-card, #xiaowenLiveInterviewCoach) {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-copilot-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

/* FINAL AI meeting room lock.
   The product-facing desktop structure is question, answer and live scoring.
   Candidate details remain available from the status bar drawer. */
@media (min-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 300px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    overflow: hidden auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-setup-card {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-arena-stack {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.9fr) minmax(320px, 1.1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-card {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-answer-zone {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-feedback-card-inline {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card :is(.interview-live-transcript-card, #xiaowenLiveInterviewCoach) {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-copilot-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

/* FINAL AI meeting room lock.
   The interview page has accumulated several historical layout layers. Keep
   the product-facing structure unambiguous on desktop: question, answer and
   live scoring. Candidate details remain available from the status bar drawer. */
@media (min-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 300px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    overflow: hidden auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-setup-card {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-arena-stack {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.9fr) minmax(320px, 1.1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-card {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-answer-zone {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-feedback-card-inline {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card :is(.interview-live-transcript-card, #xiaowenLiveInterviewCoach) {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-copilot-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

/* Exact-card specificity guard for legacy rules that name article.section-card. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-ai-assistant[data-home-module-key="ai-advice"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-welcome-panel[data-home-module-key="welcome"] {
  display: flex !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-height: 112px !important;
  height: auto !important;
  padding: 22px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-workbench-task[data-home-module-key="v5-command-center"] {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-height: 0 !important;
  height: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-growth-card[data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-home-shortcuts[data-home-module-key="shortcuts"] {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-height: 0 !important;
  height: auto !important;
}

html[data-theme="dark"]:not(.react-student-embedded) {
  --v51-bg: #0b1220;
  --v51-card: #111827;
  --v51-card-soft: #162238;
  --v51-text: #edf4ff;
  --v51-muted: #9fb1c7;
  --v51-border: rgba(126, 151, 184, 0.2);
  --v51-blue: #1677ff;
  --v51-blue-soft: rgba(79, 131, 255, 0.14);
  --v51-green: #00b578;
  --v51-shadow: 0 10px 28px rgba(2, 8, 23, 0.28);
}

/* Seven-item product navigation, compact enough for laptop windows. */
html:not(.react-student-embedded) .sidebar .menu {
  gap: 5px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) .sidebar .menu-item {
  min-height: 37px !important;
  max-height: 37px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) .sidebar .menu-item-icon {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  font-size: 17px !important;
  line-height: 1 !important;
  opacity: 0.94 !important;
}

html:not(.react-student-embedded) .shell.sidebar-collapsed .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  padding: 0 !important;
}

html:not(.react-student-embedded) .shell.sidebar-collapsed .sidebar .menu-item-icon,
html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item-icon {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  color: currentColor !important;
}

/* Home: four core modules only, full-width workbench instead of a centered demo. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .main {
  background: var(--v51-bg) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-workspace.active {
  width: 100% !important;
  max-width: none !important;
  padding: 24px clamp(24px, 3vw, 48px) 48px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 20px !important;
  align-items: stretch !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense !important;
  grid-auto-rows: auto !important;
  gap: 20px !important;
  align-items: stretch !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="welcome"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="v5-command-center"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="ai-advice"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="continue-task"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="welcome"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="continue-task"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="welcome"] {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  height: auto !important;
  min-height: 168px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="v5-command-center"] {
  grid-column: 1 / span 9 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="ai-advice"] {
  grid-column: 10 / -1 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="growth"] {
  grid-column: 1 / span 6 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="continue-task"] {
  grid-column: 7 / -1 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="v5-command-center"] {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="ai-advice"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  grid-row: auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="welcome"] {
  grid-column: 1 / -1 !important;
  min-height: 168px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="v5-command-center"] {
  grid-column: 1 / span 9 !important;
  min-height: 430px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="ai-advice"] {
  grid-column: 10 / -1 !important;
  min-height: 430px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="growth"] {
  grid-column: 1 / span 6 !important;
  min-height: 206px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="continue-task"] {
  grid-column: 7 / -1 !important;
  min-height: 206px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task {
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel {
  padding: 24px 28px !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel .landing-welcome-copy,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel .landing-training-statusbar,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-welcome-panel .landing-training-status {
  position: static !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-statusbar {
  width: 100% !important;
  grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status {
  min-width: 0 !important;
  min-height: 94px !important;
  padding: 14px 16px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  align-content: center !important;
  gap: 4px !important;
  border-radius: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status > :is(span,strong,em,b,button) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status > span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status > strong,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status > button {
  color: var(--v51-text) !important;
  font-size: 19px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-status-primary > strong {
  font-size: 36px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task {
  padding: clamp(28px, 3vw, 44px) !important;
  grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr) !important;
  gap: 26px !important;
  background:
    radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.12), transparent 35%),
    var(--v51-card) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-grid {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy > *,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > * {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: center !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-grid > .landing-v5-command-card:last-child {
  grid-column: 1 / -1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 112px !important;
  max-height: none !important;
  padding: 18px 20px !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  transform: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > span,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > em,
html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > b {
  color: var(--v51-muted) !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.45 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > strong {
  color: var(--v51-text) !important;
  font-size: 27px !important;
  line-height: 1.18 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card-primary > strong {
  font-size: 27px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > ul {
  padding: 0 !important;
  display: grid !important;
  gap: 6px !important;
  list-style: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > ul > li {
  position: static !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  color: var(--v51-muted) !important;
  background: color-mix(in srgb, var(--v51-card) 70%, transparent) !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card > button {
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task h1 {
  color: var(--v51-text) !important;
  font-size: clamp(40px, 4vw, 64px) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-copy p:not(.eyebrow) {
  color: var(--v51-muted) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-card,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-xiaowen-advice-grid > span,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid > span {
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant {
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant > div {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant h2 {
  color: var(--v51-text) !important;
  font-size: 28px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-xiaowen-advice-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 18px !important;
  width: 100% !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-xiaowen-advice-grid > span {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 78px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant > button {
  position: static !important;
  align-self: flex-start !important;
  width: auto !important;
  min-width: 118px !important;
  height: 44px !important;
  margin: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-growth-card,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task {
  padding: 24px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-weekly-growth[data-home-module-key="growth"] {
  min-height: 206px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-head,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-list {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 104px !important;
  padding: 14px !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item > * {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-item > strong {
  color: var(--v51-green) !important;
  font-size: 16px !important;
}

html:not(.react-student-embedded) #companionAmbientStage,
html:not(.react-student-embedded) #companionAmbientCharacter,
html:not(.react-student-embedded) #companionMiniCharacter {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-inline-link {
  padding: 0 !important;
  border: 0 !important;
  color: var(--v51-blue) !important;
  background: transparent !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-head h2 {
  margin: 4px 0 0 !important;
  color: var(--v51-text) !important;
  font-size: 22px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-tag {
  width: fit-content !important;
  padding: 5px 9px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > strong,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > p,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-progress,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-meta {
  grid-column: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > strong {
  color: var(--v51-text) !important;
  font-size: 24px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > p {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-progress {
  height: 7px !important;
  overflow: hidden !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-progress > i {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #1677ff, #7c3aed) !important;
  border-radius: inherit !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-meta {
  display: flex !important;
  justify-content: space-between !important;
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > button {
  grid-column: 2 !important;
  grid-row: 1 / span 5 !important;
  min-width: 126px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid > span {
  min-height: 104px !important;
  padding: 16px !important;
  display: grid !important;
  align-content: center !important;
  gap: 6px !important;
  border-radius: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid strong {
  color: var(--v51-text) !important;
  font-size: 30px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid em {
  color: var(--v51-muted) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

/* Today training cockpit. */
html:not(.react-student-embedded) body[data-active-panel="question-bank"] .panel.active,
html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .panel.active {
  width: 100% !important;
  max-width: none !important;
  padding: 24px clamp(24px, 3vw, 48px) 48px !important;
}

html:not(.react-student-embedded) .v51-training-cockpit {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 20px 0 24px !important;
}

html:not(.react-student-embedded) .v51-training-cockpit > div {
  min-height: 92px !important;
  padding: 16px 18px !important;
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
}

html:not(.react-student-embedded) .v51-training-cockpit span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) .v51-training-cockpit strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) .v51-training-cockpit > div:nth-child(3) {
  background: var(--v51-blue-soft) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 24px !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid > button {
  min-height: 112px !important;
  padding: 16px !important;
  display: grid !important;
  align-content: center !important;
  gap: 6px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid > button:hover {
  border-color: rgba(22, 119, 255, 0.46) !important;
  transform: translateY(-2px) !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid span {
  color: var(--v51-blue) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) .v51-training-entry-grid em {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
}

/* Knowledge assets: category first, map second. */
html:not(.react-student-embedded) .v51-knowledge-page {
  display: grid !important;
  gap: 18px !important;
}

html:not(.react-student-embedded) .v51-knowledge-hero {
  padding: 28px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 28px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) .v51-knowledge-hero h2 {
  margin: 6px 0 10px !important;
  color: var(--v51-text) !important;
  font-size: 30px !important;
}

html:not(.react-student-embedded) .v51-knowledge-hero p:not(.eyebrow) {
  margin: 0 !important;
  color: var(--v51-muted) !important;
}

html:not(.react-student-embedded) .v51-knowledge-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, 128px) !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) .v51-knowledge-metrics > span {
  min-height: 86px !important;
  padding: 14px !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) .v51-knowledge-metrics strong {
  font-size: 26px !important;
}

html:not(.react-student-embedded) .v51-knowledge-metrics em {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) .v51-knowledge-query {
  padding: 20px !important;
  display: grid !important;
  gap: 14px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) .v51-knowledge-query-box {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 8px 8px 16px !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
}

html:not(.react-student-embedded) .v51-knowledge-query-box > input {
  min-width: 0 !important;
  height: 42px !important;
  color: var(--v51-text) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  font: inherit !important;
}

html:not(.react-student-embedded) .v51-knowledge-answer {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) .v51-knowledge-answer > div {
  min-height: 90px !important;
  padding: 14px !important;
  display: grid !important;
  align-content: center !important;
  gap: 6px !important;
  background: var(--v51-card-soft) !important;
  border-radius: 12px !important;
}

html:not(.react-student-embedded) .v51-knowledge-answer span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
}

html:not(.react-student-embedded) .v51-knowledge-answer strong {
  color: var(--v51-text) !important;
  font-size: 15px !important;
}

html:not(.react-student-embedded) .v51-knowledge-categories {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:not(.react-student-embedded) .v51-knowledge-categories > button {
  min-height: 132px !important;
  padding: 18px !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .v51-knowledge-categories span {
  width: fit-content !important;
  padding: 4px 9px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) .v51-knowledge-categories strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) .v51-knowledge-categories em {
  color: var(--v51-muted) !important;
  font-size: 13px !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) .v51-knowledge-page .knowledge-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr) !important;
  gap: 18px !important;
}

/* AI interview meeting room: restore the candidate column on laptops and desktops. */
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-space-shell {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-studio {
  margin-top: 0 !important;
}

@media (min-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    display: grid !important;
    grid-template-columns: 190px minmax(420px, 1fr) 280px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 18px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-setup-card {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 12px !important;
    min-width: 0 !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card > .section-head {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    align-content: normal !important;
    border-bottom: 1px solid var(--v51-border) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card > .section-head .eyebrow {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card .interview-profile-dashboard {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card .interview-profile-dashboard > section {
    width: 100% !important;
    height: auto !important;
    min-height: 72px !important;
    padding: 11px !important;
    align-content: center !important;
    color: var(--v51-text) !important;
    background: var(--v51-card-soft) !important;
    border-color: var(--v51-border) !important;
    border-radius: 14px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card .interview-profile-dashboard :is(span,p,em,strong,b) {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-setup-card > .active-resume-card.empty-box {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-copilot-card {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

@media (min-width: 1480px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    grid-template-columns: 220px minmax(500px, 1fr) 310px !important;
  }
}

/* Career-grade capability proof. */
html:not(.react-student-embedded) .growth-capability-proof-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) .growth-capability-proof-grid > div {
  min-height: 104px !important;
  padding: 16px !important;
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
}

html:not(.react-student-embedded) .growth-capability-proof-grid span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) .growth-capability-proof-grid strong {
  color: var(--v51-text) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

/* The legacy pages contain hard-coded white surfaces. Converge every visible
   workbench surface to the same dark tokens when auto/night mode is active. */
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="question-bank"] .main :is(
  .question-ai-decision-strip > div,
  .question-ai-training-meta > em,
  .question-training-pack-stats > span,
  .question-training-path > li,
  .question-project-pack-detail > div,
  .question-ability-domain,
  .question-ability-point,
  .question-training-pack,
  .question-mistake-card,
  .question-mistake-empty
) {
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="question-bank"] .main :is(
  .question-ai-decision-strip span,
  .question-ai-training-meta > em,
  .question-training-pack-stats > span,
  .question-training-path > li,
  .question-training-pack p,
  .question-mistake-card p
) {
  color: var(--v51-muted) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(
  .project-today-card,
  .project-all-projects,
  .project-practice-card,
  .project-practice-score-card,
  .project-practice-goals,
  .project-home-loop-strip,
  .project-loop-board,
  .project-loop-step,
  .project-module-row,
  .project-today-panel,
  .project-today-meta > div,
  .project-test-data-list > *,
  .project-evidence-grid > *,
  .project-schematic-flow > span
) {
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-today-card {
  background:
    radial-gradient(circle at 86% 12%, rgba(22, 119, 255, 0.14), transparent 32%),
    var(--v51-card) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main .project-today-progress {
  background: #26344a !important;
  border: 1px solid var(--v51-border) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="project-practice"] .main :is(
  .project-today-copy p,
  .project-today-meta em,
  .project-today-panel p,
  .project-practice-card p,
  .project-module-row p,
  .project-all-projects p
) {
  color: var(--v51-muted) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] .main .growth-archive-page {
  color: var(--v51-text) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] .main :is(
  .growth-archive-hero,
  .growth-archive-card,
  .growth-archive-answer-strip > article,
  .growth-archive-suggestion,
  .growth-archive-project,
  .growth-archive-job-list > button,
  .growth-archive-plan > button,
  .growth-archive-tags > button,
  .growth-archive-skill-domain,
  .growth-archive-evidence > article,
  .growth-archive-impression > section
) {
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] .main :is(
  .growth-archive-ai-summary,
  .growth-archive-ai-summary span,
  .growth-archive-score,
  .growth-capability-proof-grid > div
) {
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] .main :is(
  .growth-archive-person h2,
  .growth-archive-ai-summary h3,
  .growth-archive-ai-summary strong,
  .growth-archive-answer-strip strong,
  .growth-archive-card-head h3,
  .growth-archive-domain-head,
  .growth-archive-tags strong,
  .growth-archive-project,
  .growth-archive-evidence h4,
  .growth-archive-evidence strong,
  .growth-archive-plan strong,
  .growth-archive-suggestion strong
) {
  color: var(--v51-text) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="growth-profile"] .main :is(
  .growth-archive-person span,
  .growth-archive-score span,
  .growth-archive-score em,
  .growth-archive-answer-strip span,
  .growth-archive-answer-strip p,
  .growth-archive-card-head > span,
  .growth-archive-project p,
  .growth-archive-project em,
  .growth-archive-evidence p,
  .growth-archive-evidence em,
  .growth-archive-plan p,
  .growth-archive-suggestion p,
  .growth-capability-proof-grid span
) {
  color: var(--v51-muted) !important;
}

/* Large-screen expansion and compact fallbacks. */
@media (min-width: 1800px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="v5-command-center"] {
    grid-column: 1 / span 9 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="ai-advice"] {
    grid-column: 10 / -1 !important;
  }
}

@media (max-width: 1480px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="v5-command-center"],
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="ai-advice"] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant {
    min-height: 260px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-ai-assistant .landing-xiaowen-advice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task h1 {
    font-size: clamp(38px, 4vw, 54px) !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key="welcome"] {
    height: auto !important;
    min-height: 278px !important;
  }

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

@media (max-width: 1120px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="growth"],
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="continue-task"] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task,
  html:not(.react-student-embedded) .v51-knowledge-hero {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) .v51-training-cockpit,
  html:not(.react-student-embedded) .v51-training-entry-grid,
  html:not(.react-student-embedded) .v51-knowledge-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:not(.react-student-embedded) .growth-capability-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:not(.react-student-embedded) .v51-knowledge-page .knowledge-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-training-statusbar,
  html:not(.react-student-embedded) .v51-training-cockpit,
  html:not(.react-student-embedded) .v51-training-entry-grid,
  html:not(.react-student-embedded) .v51-knowledge-categories,
  html:not(.react-student-embedded) .v51-knowledge-metrics,
  html:not(.react-student-embedded) .v51-knowledge-answer,
  html:not(.react-student-embedded) .growth-capability-proof-grid,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-engineering-assets-grid {
    grid-template-columns: 1fr !important;
  }


  html:not(.react-student-embedded) body[data-active-panel="landing"] .engineering-workbench-task .landing-v5-command-grid {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-weekly-growth-list {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-continue-task-body > button {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
  }
}

/* XiaoWen task assistant: one Live2D canvas, one entry, one execution workspace. */
html:not(.react-student-embedded) body #companionDock.companion-dock {
  z-index: 2200 !important;
  right: 18px !important;
  bottom: 18px !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded {
  width: min(860px, calc(100vw - 108px)) !important;
  min-width: min(860px, calc(100vw - 108px)) !important;
  max-width: min(860px, calc(100vw - 108px)) !important;
  height: min(688px, calc(100vh - 36px)) !important;
  max-height: min(688px, calc(100vh - 36px)) !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-fullscreen {
  inset: 14px 14px 14px max(86px, calc(var(--sidebar-w, 72px) + 14px)) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded #companionPanel.companion-panel {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--v51-text) !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(22, 119, 255, 0.13), transparent 34%),
    var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.32) !important;
  backdrop-filter: blur(22px) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-head {
  min-height: 68px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--v51-border) !important;
  background: color-mix(in srgb, var(--v51-card) 92%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-heading {
  min-width: 0 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-heading > strong {
  display: block !important;
  color: var(--v51-text) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-heading > p {
  margin: 3px 0 0 !important;
  color: var(--v51-muted) !important;
  font-size: 11px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-tools button {
  min-height: 30px !important;
  padding: 0 9px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-layout {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(248px, 286px) minmax(0, 1fr) !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-model-column {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(310px, 1fr) auto auto !important;
  gap: 10px !important;
  padding: 14px !important;
  overflow: auto !important;
  border-right: 1px solid var(--v51-border) !important;
  background:
    linear-gradient(rgba(22, 119, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 119, 255, 0.04) 1px, transparent 1px),
    color-mix(in srgb, var(--v51-card-soft) 88%, transparent) !important;
  background-size: 22px 22px, 22px 22px, auto !important;
}

html:not(.react-student-embedded) body #companionPanel #companionModelViewer.companion-model-viewer {
  position: relative !important;
  width: 100% !important;
  min-height: 310px !important;
  height: 100% !important;
  display: grid !important;
  place-items: end center !important;
  overflow: hidden !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(124, 58, 237, 0.19), transparent 38%),
    linear-gradient(180deg, rgba(22, 119, 255, 0.08), transparent 64%),
    var(--v51-card-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
  cursor: grab !important;
}

html:not(.react-student-embedded) body #companionPanel #companionModelViewer.is-rotating {
  cursor: grabbing !important;
}

html:not(.react-student-embedded) body #companionPanel #companionThreeCanvas.companion-three-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: drop-shadow(0 18px 26px rgba(2, 6, 23, 0.28)) !important;
  background: transparent !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body #companionPanel #companionThreeCanvas.companion-three-canvas[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-live2d-fallback {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-content: center !important;
  justify-items: center !important;
  gap: 8px !important;
  padding: 24px !important;
  color: var(--v51-muted) !important;
  text-align: center !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-live2d-fallback[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-live2d-fallback strong {
  color: var(--v51-text) !important;
  font-size: 15px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-live2d-fallback em {
  max-width: 210px !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1.45 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-live2d-loader {
  width: 30px !important;
  height: 30px !important;
  border: 3px solid var(--v51-blue-soft) !important;
  border-top-color: var(--v51-blue) !important;
  border-radius: 999px !important;
  animation: v51CompanionSpin 0.9s linear infinite !important;
}

@keyframes v51CompanionSpin {
  to { transform: rotate(360deg); }
}

html:not(.react-student-embedded) body #companionPanel .companion-model-angle,
html:not(.react-student-embedded) body #companionPanel .companion-model-state {
  position: absolute !important;
  z-index: 7 !important;
  bottom: 9px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  color: var(--v51-text) !important;
  background: color-mix(in srgb, var(--v51-card) 88%, transparent) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  backdrop-filter: blur(12px) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-angle {
  left: 9px !important;
  transform: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-state {
  right: 9px !important;
  max-width: 58% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-controls {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-controls button {
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 6px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border: 1px solid color-mix(in srgb, var(--v51-blue) 28%, transparent) !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-telemetry {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-telemetry span {
  min-height: 42px !important;
  padding: 7px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 9px !important;
  font-size: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-model-telemetry b {
  color: var(--v51-blue) !important;
  font-size: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-workspace {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto minmax(94px, 1fr) auto auto !important;
  gap: 10px !important;
  padding: 14px !important;
  overflow: auto !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow > span {
  min-width: 0 !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow b {
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  color: inherit !important;
  background: color-mix(in srgb, currentColor 10%, transparent) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow > span.is-active {
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-color: color-mix(in srgb, var(--v51-blue) 34%, transparent) !important;
  box-shadow: inset 0 -2px 0 var(--v51-blue) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-task-flow > span.is-complete {
  color: var(--v51-green) !important;
  background: color-mix(in srgb, var(--v51-green) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--v51-green) 28%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-board {
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  color: var(--v51-text) !important;
  background: color-mix(in srgb, var(--v51-card-soft) 92%, transparent) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 12px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-head {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-head > div:first-child {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-status {
  width: max-content !important;
  min-height: 21px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-status[data-tone="running"] {
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-status[data-tone="success"] {
  color: var(--v51-green) !important;
  background: color-mix(in srgb, var(--v51-green) 10%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-status:is([data-tone="warning"], [data-tone="error"]) {
  color: var(--v51-orange, #f59e0b) !important;
  background: color-mix(in srgb, var(--v51-orange, #f59e0b) 10%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel #companionAgentRunTitle {
  max-width: 320px !important;
  overflow: hidden !important;
  color: var(--v51-text) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-controls {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 5px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-controls button {
  min-height: 28px !important;
  padding: 0 8px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 8px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionStopTaskBtn {
  color: var(--v51-red, #ef4444) !important;
  border-color: color-mix(in srgb, var(--v51-red, #ef4444) 30%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps > li {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: start !important;
  padding: 7px !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps > li > span {
  width: 7px !important;
  height: 7px !important;
  margin-top: 3px !important;
  background: var(--v51-border) !important;
  border-radius: 999px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps > li.is-active > span {
  background: var(--v51-blue) !important;
  box-shadow: 0 0 0 4px var(--v51-blue-soft) !important;
  animation: v51AgentPulse 1.2s ease-in-out infinite !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps > li.is-complete > span {
  background: var(--v51-green) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps > li.is-stopped > span {
  background: var(--v51-orange, #f59e0b) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps div {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps strong,
html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps strong {
  color: var(--v51-text) !important;
  font-size: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps em {
  color: var(--v51-muted) !important;
  font-size: 8px !important;
  font-style: normal !important;
}

@keyframes v51AgentPulse {
  50% { opacity: 0.45; }
}

html:not(.react-student-embedded) body #companionPanel :is(.companion-brief-card, .companion-page-insight, .companion-memory-stat, .companion-message) {
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card > p {
  grid-column: 2 !important;
  color: var(--v51-muted) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-page-insight {
  padding: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .xiaowen-assistant-state-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body #companionPanel .xiaowen-assistant-state-list span {
  min-height: 32px !important;
  padding: 6px 8px !important;
  color: var(--v51-muted) !important;
  background: var(--v51-blue-soft) !important;
  border: 1px solid color-mix(in srgb, var(--v51-blue) 18%, transparent) !important;
  border-radius: 9px !important;
  font-size: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-memory-hud {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-memory-stat {
  min-height: 48px !important;
  padding: 7px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-memory-stat strong {
  color: var(--v51-text) !important;
  font-size: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-memory-stat span {
  color: var(--v51-muted) !important;
  font-size: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionMessages.companion-messages {
  min-height: 94px !important;
  max-height: none !important;
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  padding: 2px 2px 6px !important;
  overflow: auto !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-message {
  display: grid !important;
  gap: 4px !important;
  padding: 9px 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-message.is-user {
  margin-left: 42px !important;
  background: var(--v51-blue-soft) !important;
  border-color: color-mix(in srgb, var(--v51-blue) 24%, transparent) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-message :is(span, p) {
  color: var(--v51-text) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionActions.companion-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 0 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionActions button {
  min-height: 36px !important;
  padding: 0 10px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border: 1px solid color-mix(in srgb, var(--v51-blue) 22%, transparent) !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionForm.companion-input-row {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 9 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 7px !important;
  padding: 8px !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 12px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionInput {
  min-width: 0 !important;
  min-height: 40px !important;
  display: block !important;
  padding: 0 12px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 9px !important;
  outline: none !important;
}

html:not(.react-student-embedded) body #companionPanel #companionInput:focus {
  border-color: var(--v51-blue) !important;
  box-shadow: 0 0 0 3px var(--v51-blue-soft) !important;
}

html:not(.react-student-embedded) body #companionPanel #companionVoiceBtn,
html:not(.react-student-embedded) body #companionPanel #companionForm button[type="submit"] {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
}

html:not(.react-student-embedded) body #companionPanel #companionVoiceBtn {
  color: var(--v51-muted) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
}

html:not(.react-student-embedded) body #companionPanel #companionForm button[type="submit"] {
  color: #fff !important;
  background: var(--v51-blue) !important;
  border: 1px solid var(--v51-blue) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #companionPanel :is(
  .companion-panel-head,
  .companion-agent-model-column,
  .companion-agent-workspace,
  .companion-brief-card,
  .companion-page-insight,
  .companion-memory-stat,
  .companion-message,
  #companionForm
) {
  color-scheme: dark !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-tags b {
  color: #8fb4ff !important;
  background: var(--v51-blue-soft) !important;
  border-color: rgba(22, 119, 255, 0.28) !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded {
    right: 12px !important;
    bottom: 12px !important;
    width: calc(100vw - 24px) !important;
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100vh - 24px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-agent-layout {
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-agent-model-column {
    grid-template-columns: minmax(170px, 0.8fr) minmax(210px, 1.2fr) !important;
    grid-template-rows: auto auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--v51-border) !important;
  }

  html:not(.react-student-embedded) body #companionPanel #companionModelViewer.companion-model-viewer {
    grid-row: 1 / span 2 !important;
    min-height: 260px !important;
  }
}

@media (max-width: 620px) {
  html:not(.react-student-embedded) body #companionPanel .companion-panel-head {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-panel-tools {
    grid-column: 1 / -1 !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-agent-model-column {
    grid-template-columns: 1fr !important;
    grid-template-rows: 300px auto auto !important;
  }

  html:not(.react-student-embedded) body #companionPanel #companionModelViewer.companion-model-viewer {
    grid-row: auto !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-memory-hud,
  html:not(.react-student-embedded) body #companionPanel .xiaowen-assistant-state-list,
  html:not(.react-student-embedded) body #companionPanel #companionActions.companion-actions,
  html:not(.react-student-embedded) body #companionPanel .companion-agent-run-steps {
    grid-template-columns: 1fr 1fr !important;
  }

  html:not(.react-student-embedded) body #companionPanel .companion-agent-run-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html:not(.react-student-embedded) body #companionPanel #companionForm.companion-input-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html:not(.react-student-embedded) body #companionPanel #companionVoiceBtn {
    display: none !important;
  }
}

/* Theme interaction + navigation convergence. Keep this final layer limited to
   colors so switching appearance can never disturb page geometry. */
html:not(.react-student-embedded) .theme-option.is-selected {
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-color: color-mix(in srgb, var(--v51-blue) 38%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v51-blue) 14%, transparent) !important;
}

html:not(.react-student-embedded):not([data-theme="dark"]) body .sidebar {
  color: #334155 !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(22, 119, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%) !important;
  border-right-color: rgba(100, 116, 139, 0.16) !important;
  box-shadow: 12px 0 32px rgba(15, 23, 42, 0.06) !important;
}

html:not(.react-student-embedded):not([data-theme="dark"]) body .sidebar :is(
  .brand,
  .brand-head,
  .sidebar-foot,
  .sidebar-account-card,
  .sidebar-account-button
) {
  color: #334155 !important;
  background: transparent !important;
  border-color: rgba(100, 116, 139, 0.14) !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded):not([data-theme="dark"]) body .sidebar :is(
  .brand-copy,
  .brand-title,
  .sidebar-account-copy strong,
  .menu-item:not(.active)
) {
  color: #334155 !important;
}

html:not(.react-student-embedded):not([data-theme="dark"]) body .sidebar :is(
  .brand-subtitle,
  .brand-subtitle-text,
  .sidebar-section,
  .sidebar-account-copy em,
  .sidebar-foot p
) {
  color: #64748b !important;
}

html:not(.react-student-embedded):not([data-theme="dark"]) body .sidebar .menu-item:not(.active):hover {
  color: #0f172a !important;
  background: rgba(22, 119, 255, 0.08) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar {
  color: #dbe7f5 !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(22, 119, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #0b1526 0%, #08111f 100%) !important;
  border-right-color: rgba(126, 151, 184, 0.16) !important;
  box-shadow: 14px 0 38px rgba(2, 8, 23, 0.24) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar :is(
  .brand,
  .brand-head,
  .sidebar-foot,
  .sidebar-account-card,
  .sidebar-account-button
) {
  color: #dbe7f5 !important;
  background: transparent !important;
  border-color: rgba(126, 151, 184, 0.16) !important;
  box-shadow: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar :is(
  .brand-copy,
  .brand-title,
  .sidebar-account-copy strong,
  .menu-item:not(.active)
) {
  color: #dbe7f5 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar :is(
  .brand-subtitle,
  .brand-subtitle-text,
  .sidebar-section,
  .sidebar-account-copy em,
  .sidebar-foot p
) {
  color: #8fa3bb !important;
}

/* Known legacy cards used by the seven V5 workspaces still contain hard-coded
   white gradients. This final, dark-only guard removes those isolated flashes. */
html[data-theme="dark"]:not(.react-student-embedded) body .main .panel.active :is(
  .interview-weak-bank-item,
  .engineering-assets-overview,
  .engineering-lab-hero,
  .project-summary-metrics > span,
  .project-ability-gain > span,
  .engineer-dossier-summary,
  .engineer-dossier-card,
  .engineer-dossier-skill-list > span,
  .growth-capability-proof-grid > div
) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

/* React can embed the same workspace with `?embedded=react-student`. Layout
   rules intentionally stay isolated in that mode, but color rules must still
   follow the effective theme. Keep this terminal layer color-only so the
   standalone and embedded clients render the same dark surfaces. */
html.react-student-embedded[data-theme="dark"] {
  color-scheme: dark;
  --v51-bg: #0b1220;
  --v51-surface: #111827;
  --v51-card: #111827;
  --v51-card-soft: #162238;
  --v51-text: #edf4ff;
  --v51-muted: #9fb1c7;
  --v51-border: rgba(126, 151, 184, 0.2);
}

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

html.react-student-embedded[data-theme="dark"] body .main .panel.active :is(
  .section-card,
  .interview-weak-bank-item,
  .interview-training-metrics > span,
  .interview-question-requirements li,
  .interview-answer-mode-toggle,
  .xiaowen-live-interview-coach,
  .engineering-assets-overview,
  .engineering-lab-hero,
  .engineering-entry-card,
  .engineering-lab-task,
  .project-today-card,
  .project-my-assistant,
  .project-loop-board,
  .project-route-overview,
  .project-case-xiaowen,
  .skill-training-group,
  .engineering-lab-entry,
  .project-summary-metrics > span,
  .project-ability-gain > span,
  .engineer-dossier-summary,
  .engineer-dossier-card,
  .engineer-dossier-skill-list > span,
  .engineer-growth-proof-timeline > span,
  .engineer-proof-list > span,
  .growth-capability-proof-grid > div,
  .learning-library-section,
  .learning-formula-grid > article,
  .learning-record-card,
  .workspace-app-grid > button
) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html.react-student-embedded[data-theme="dark"] body .main .panel.active :is(
  .section-card,
  .interview-weak-bank-item,
  .engineering-assets-overview,
  .engineering-lab-hero,
  .project-today-card,
  .project-my-assistant,
  .project-loop-board,
  .project-route-overview,
  .project-case-xiaowen,
  .engineer-dossier-summary,
  .engineer-dossier-card,
  .learning-library-section,
  .learning-formula-grid > article,
  .learning-record-card,
  .workspace-app-grid > button
) :is(h1, h2, h3, h4, strong, b) {
  color: var(--v51-text) !important;
}

html.react-student-embedded[data-theme="dark"] body .main .panel.active :is(
  .section-card,
  .interview-weak-bank-item,
  .engineering-assets-overview,
  .engineering-lab-hero,
  .project-today-card,
  .project-my-assistant,
  .project-loop-board,
  .project-route-overview,
  .project-case-xiaowen,
  .engineer-dossier-summary,
  .engineer-dossier-card,
  .learning-library-section,
  .learning-formula-grid > article,
  .learning-record-card,
  .workspace-app-grid > button
) :is(p, em, small) {
  color: var(--v51-muted) !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="question-bank"] .question-training-center .question-training-section[hidden] {
  display: none !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="project-practice"] .main :is(
  .engineering-asset-kpi,
  .engineering-asset-card,
  .engineering-asset-card > p,
  .project-home-loop-strip,
  .project-all-projects,
  .project-home-card,
  .project-loop-step,
  .project-detail-section,
  .project-intro-diagram,
  .project-architecture-board,
  .project-architecture-node,
  .project-route-step,
  .project-source-list > button,
  .project-case-grid > article,
  .project-case-template-preview,
  .project-case-xiaowen-modes > section,
  .project-debug-layout > aside,
  .project-waveform-layout > aside,
  .project-coach-answer,
  .project-intro-facts > span
) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="project-practice"] .main :is(
  .engineering-asset-kpi,
  .engineering-asset-card,
  .project-home-card,
  .project-loop-step,
  .project-detail-section,
  .project-intro-diagram,
  .project-architecture-node,
  .project-route-step,
  .project-case-grid > article,
  .project-case-template-preview,
  .project-case-xiaowen-modes > section,
  .project-debug-layout > aside,
  .project-waveform-layout > aside,
  .project-coach-answer,
  .project-intro-facts > span
) :is(h1, h2, h3, h4, strong, b) {
  color: var(--v51-text) !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="interview"] .main :is(
  #interviewStudio,
  #interviewCoachRoom,
  .interview-main-dashboard .section-head,
  .interview-arena-block,
  .interview-answer-live-card,
  .interview-waveform,
  .interview-answer-transcript-body
) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="interview"] .main :is(
  #interviewCoachRoom,
  .interview-arena-block,
  .interview-answer-live-card,
  .interview-answer-transcript-body
) :is(h1, h2, h3, h4, strong, b) {
  color: var(--v51-text) !important;
}

html.react-student-embedded[data-theme="dark"] body[data-active-panel="audio"] .main :is(
  .audio-status-hero,
  .audio-training-card,
  .audio-timeline-panel,
  .audio-cabin-timeline-item,
  .audio-review-main,
  .audio-main-card,
  .audio-compare-grid > section,
  .audio-comment-columns > section,
  .audio-transcript-editor,
  .audio-transcript-editor > textarea,
  #audioTranscript,
  .audio-coach-panel,
  .audio-coach-card,
  .audio-action-bar
),
html.react-student-embedded[data-theme="dark"] body[data-active-panel="debug-lab"] .main :is(
  .debug-case-group,
  .debug-case-chip,
  .debug-mission-hero,
  .debug-card,
  .debug-work-step,
  .debug-standard-path-item,
  .debug-xiaowen-step,
  .debug-exclusion-item,
  .debug-wave-metrics > div,
  .debug-growth-score-item,
  .debug-phenomenon-card,
  .debug-before-after,
  .debug-before-after > div,
  .debug-report-item,
  .debug-ai-record-list > i,
  .debug-xiaowen-current,
  .debug-wave-context,
  .debug-waveform-card,
  .debug-proof-list
),
html.react-student-embedded[data-theme="dark"] body[data-active-panel="waveform"] .main .waveform-screenshot-assistant,
html.react-student-embedded[data-theme="dark"] body[data-active-panel="growth-profile"] .main :is(
  .growth-archive-hero,
  .growth-archive-card,
  .growth-archive-ai-summary > div > span,
  .growth-archive-answer-strip > article,
  .growth-archive-skill-domain,
  .growth-archive-project,
  .growth-archive-impression > section,
  .growth-archive-job-list > button,
  .growth-archive-evidence > article,
  .growth-archive-plan > button,
  .growth-capability-proof
),
html.react-student-embedded[data-theme="dark"] body[data-active-panel="training-summary"] .main .training-summary-flow > span {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

html.react-student-embedded[data-theme="dark"] body :is(
  .audio-status-hero,
  .audio-training-card,
  .audio-review-main,
  .audio-main-card,
  .audio-coach-card,
  .debug-mission-hero,
  .debug-card,
  .debug-phenomenon-card,
  .debug-report-item,
  .waveform-screenshot-assistant,
  .growth-archive-hero,
  .growth-archive-card,
  .growth-archive-answer-strip > article,
  .growth-archive-skill-domain
) :is(h1, h2, h3, h4, strong, b) {
  color: var(--v51-text) !important;
}

html.react-student-embedded[data-theme="dark"] body :is(
  .audio-status-hero,
  .audio-training-card,
  .audio-review-main,
  .audio-main-card,
  .audio-coach-card,
  .debug-mission-hero,
  .debug-card,
  .debug-phenomenon-card,
  .debug-report-item,
  .waveform-screenshot-assistant,
  .growth-archive-hero,
  .growth-archive-card,
  .growth-archive-answer-strip > article,
  .growth-archive-skill-domain
) :is(p, em, small) {
  color: var(--v51-muted) !important;
}

/* Sidebar theme terminal layer.
   Older geometry locks intentionally use very specific selectors and
   !important declarations. Mirror that specificity here, but only for color,
   so expanded/collapsed geometry remains untouched while appearance follows
   the effective light/dark theme. */
html[data-theme="light"]:not(.react-student-embedded) {
  --v51-sidebar-text: #334155;
  --v51-sidebar-muted: #64748b;
  --v51-sidebar-bg:
    radial-gradient(circle at 88% 8%, rgba(22, 119, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
  --v51-sidebar-border: rgba(100, 116, 139, 0.16);
  --v51-sidebar-shadow: 12px 0 32px rgba(15, 23, 42, 0.06);
  --v51-sidebar-hover: rgba(22, 119, 255, 0.08);
  --v51-sidebar-account: rgba(255, 255, 255, 0.82);
  --v51-sidebar-toggle: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"]:not(.react-student-embedded) {
  --v51-sidebar-text: #dbe7f5;
  --v51-sidebar-muted: #8fa3bb;
  --v51-sidebar-bg:
    radial-gradient(circle at 88% 8%, rgba(22, 119, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #0b1526 0%, #08111f 100%);
  --v51-sidebar-border: rgba(126, 151, 184, 0.16);
  --v51-sidebar-shadow: 14px 0 38px rgba(2, 8, 23, 0.24);
  --v51-sidebar-hover: rgba(79, 131, 255, 0.1);
  --v51-sidebar-account: rgba(15, 23, 42, 0.46);
  --v51-sidebar-toggle: rgba(15, 23, 42, 0.5);
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-expanded.sidebar-expanded > .sidebar.sidebar,
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.sidebar-collapsed.sidebar-collapsed > .sidebar.sidebar {
  color: var(--v51-sidebar-text) !important;
  background: var(--v51-sidebar-bg) !important;
  border-right-color: var(--v51-sidebar-border) !important;
  box-shadow: var(--v51-sidebar-shadow) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar :is(
  .brand-subtitle-text,
  .sidebar-section,
  .menu-section-label,
  .sidebar-account-copy small,
  .sidebar-account-copy em,
  .sidebar-account-button i
) {
  color: var(--v51-sidebar-muted) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .menu.menu .menu-item.menu-item:not(.active):not(.is-active),
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-bottom-zone.sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link:not(.active):not(.is-active) {
  color: var(--v51-sidebar-text) !important;
  background: transparent !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .menu.menu .menu-item.menu-item:not(.active):not(.is-active):hover,
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-bottom-zone.sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link:not(.active):not(.is-active):hover {
  color: var(--v51-sidebar-text) !important;
  background: var(--v51-sidebar-hover) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .menu.menu .menu-item.menu-item :is(.menu-item-label, .menu-item-icon),
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-bottom-zone.sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link :is(.menu-item-label, .menu-item-icon) {
  color: inherit !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .menu.menu .menu-item.menu-item:is(.active, .is-active),
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-bottom-zone.sidebar-bottom-zone .sidebar-bottom-link.sidebar-bottom-link:is(.active, .is-active) {
  color: #ffffff !important;
  background: linear-gradient(90deg, #2563eb 0%, #6d5dfc 58%, #9333ea 100%) !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-bottom-zone.sidebar-bottom-zone {
  border-top-color: var(--v51-sidebar-border) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-account-card.sidebar-account-card {
  color: var(--v51-sidebar-text) !important;
  background: var(--v51-sidebar-account) !important;
  border-color: var(--v51-sidebar-border) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar .sidebar-account-card.sidebar-account-card .sidebar-account-copy strong {
  color: var(--v51-sidebar-text) !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .shell.shell > .sidebar.sidebar #sidebarToggle.sidebar-toggle {
  color: var(--v51-sidebar-text) !important;
  background: var(--v51-sidebar-toggle) !important;
  border-color: var(--v51-sidebar-border) !important;
}

/* Top search terminal layer. Legacy homepage locks used a more specific light
   input rule, leaving the dark placeholder unreadable and the input at its
   default 20-character width. Keep the field stretched across its grid track
   and let the current design tokens control both themes. */
html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .topbar.topbar .topbar-search.topbar-search > #topbarCommandInput {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  inline-size: 100% !important;
  grid-column: 2 / 3 !important;
  justify-self: stretch !important;
  align-self: center !important;
  padding: 0 !important;
  color: var(--v51-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .topbar.topbar .topbar-search.topbar-search > .topbar-search-icon {
  position: static !important;
  inset: auto !important;
  grid-column: 1 / 2 !important;
  place-self: center !important;
  transform: none !important;
}

html[data-theme][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .topbar.topbar .topbar-search.topbar-search > #topbarCommandInput::placeholder {
  color: var(--v51-muted) !important;
  opacity: 1 !important;
}

html[data-theme="dark"][data-theme]:not(.react-student-embedded) body[data-active-panel][data-active-panel] .topbar.topbar .topbar-search.topbar-search > .topbar-search-icon {
  color: #9fb3ca !important;
  background: rgba(22, 119, 255, 0.12) !important;
}

/* V5.1 home convergence: the task card already contains XiaoWen's reason and
   recommendation. Keeping a second assistant card beside it duplicated the
   same message and pushed growth below the fold on 1366/1440px screens. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="ai-advice"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="ai-advice"] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-home-grid > [data-home-module-key="v5-command-center"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > [data-home-module-key="v5-command-center"] {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Ordinary-user settings must never expose the independent administrator
   console, even if an older cached HTML copy still contains the legacy card. */
html:not(.react-student-embedded) .user-settings-admin-entry {
  display: none !important;
}

/* Training center uses one focused content lane at a time instead of stacking
   skill, mistake and role libraries into one long tools page. */
html:not(.react-student-embedded) body[data-active-panel="question-bank"] .question-training-center .question-training-section[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .v51-training-entry-grid > button.is-active {
  color: var(--v51-text) !important;
  border-color: color-mix(in srgb, var(--v51-blue) 58%, transparent) !important;
  background: var(--v51-blue-soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v51-blue) 18%, transparent) !important;
}

/* Feishu-style asset workspace: the first row launches the four concrete
   applications, while the knowledge search remains the active app below. */
html:not(.react-student-embedded) .v51-asset-app-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:not(.react-student-embedded) .v51-asset-app-grid > button {
  min-height: 118px !important;
  padding: 18px !important;
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .v51-asset-app-grid > button:hover {
  border-color: color-mix(in srgb, var(--v51-blue) 48%, transparent) !important;
  transform: translateY(-1px) !important;
}

html:not(.react-student-embedded) .v51-asset-app-grid span {
  width: fit-content !important;
  padding: 4px 9px !important;
  color: var(--v51-blue) !important;
  background: var(--v51-blue-soft) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .v51-asset-app-grid strong {
  color: var(--v51-text) !important;
  font-size: 17px !important;
}

html:not(.react-student-embedded) .v51-asset-app-grid em {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) .v51-asset-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Real asset overview is now rendered inside Engineering Training as well as
   the legacy project page, so it needs workbench-scoped styling. */
html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview {
  display: grid !important;
  grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin: 0 0 20px !important;
  padding: 22px !important;
  color: var(--v51-text) !important;
  background: var(--v51-card) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview-head {
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview-head > span {
  color: var(--v51-blue) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview-head h3 {
  margin: 0 !important;
  color: var(--v51-text) !important;
  font-size: 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview-head p {
  margin: 0 !important;
  color: var(--v51-muted) !important;
  line-height: 1.65 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi {
  min-height: 126px !important;
  padding: 16px !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  text-align: left !important;
  color: var(--v51-text) !important;
  background: var(--v51-card-soft) !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi span,
html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi strong,
html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi em {
  display: block !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi span {
  color: var(--v51-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi strong {
  color: var(--v51-text) !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-asset-kpi em {
  color: var(--v51-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1.4 !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-assets-overview {
    grid-template-columns: 1fr !important;
  }
}

/* Terminal overrides for the five-workspace shell. Keep this block last so
   legacy sidebar masks and white engineering-card backgrounds cannot win. */
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar .menu.menu > .menu-item.menu-item {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .menu-item::before {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .menu-item-icon {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: currentColor !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html:not(.react-student-embedded) .shell.sidebar-collapsed .menu-item-label {
  display: none !important;
}

html:not(.react-student-embedded) .workspace-app-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:not(.react-student-embedded) .workspace-app-grid > button {
  min-width: 0 !important;
  min-height: 116px !important;
  padding: 17px !important;
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border: 1px solid var(--v51-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--v51-shadow) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) .workspace-app-grid > button,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="engineering-lab"] .engineering-entry-card,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="knowledge-map"] :is(.learning-library-section, .learning-formula-grid > article, .learning-record-card) {
  color: var(--v51-text) !important;
  background-color: var(--v51-card) !important;
  background-image: none !important;
  border-color: var(--v51-border) !important;
  box-shadow: none !important;
}

@media (max-width: 1100px) {
  html:not(.react-student-embedded) .workspace-app-grid,
  html:not(.react-student-embedded) .learning-formula-grid,
  html:not(.react-student-embedded) .learning-record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  html:not(.react-student-embedded) .workspace-app-grid,
  html:not(.react-student-embedded) .learning-formula-grid,
  html:not(.react-student-embedded) .learning-record-grid {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL focused-home placement — this must remain the last homepage rule. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace {
  padding-top: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[data-home-module-key] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-welcome-panel[data-home-module-key="welcome"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-workbench-task[data-home-module-key="v5-command-center"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-growth-card[data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-home-shortcuts[data-home-module-key="shortcuts"] {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card[hidden],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-ai-assistant[data-home-module-key="ai-advice"] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-welcome-panel[data-home-module-key="welcome"] {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 102px !important;
  padding: 16px 22px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-workbench-task[data-home-module-key="v5-command-center"] {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 28px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-today-advice h1 {
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: 1.15 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.engineering-growth-card[data-home-module-key="growth"],
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > div.landing-home-grid > article.section-card.landing-home-shortcuts[data-home-module-key="shortcuts"] {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 24px 26px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-list {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-item {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.2fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 18px 20px !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-task-body {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-home-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-weekly-growth-item,
  html:not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-home-shortcut-grid {
    grid-template-columns: 1fr !important;
  }
}