/* source: v110-feishu-sidebar-account.css */
/* V110 — compact Feishu-style sidebar account dock. */
@media (min-width: 900px) {
  html:not(.react-student-embedded) body[data-active-panel]
    .shell > .sidebar.sidebar {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 12px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell > .sidebar.sidebar > .menu.workspace-nav {
    flex: 0 1 auto !important;
    margin-bottom: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell > .sidebar.sidebar > .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell:hover > .sidebar.sidebar > .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell:has(> .sidebar:hover) > .sidebar.sidebar > .sidebar-bottom-zone {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: auto 0 0 !important;
    padding: 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .sidebar .sidebar-bottom-zone::before,
  html:not(.react-student-embedded) body[data-active-panel]
    .sidebar .sidebar-bottom-zone::after,
  html:not(.react-student-embedded) body[data-active-panel]
    .sidebar .sidebar-account-card::before,
  html:not(.react-student-embedded) body[data-active-panel]
    .sidebar .sidebar-account-card::after {
    content: none !important;
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded:hover > .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar .sidebar-account-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar #sidebarAccountBtn.sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded:hover > .sidebar #sidebarAccountBtn.sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar #sidebarAccountBtn.sidebar-account-button {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    color: #1f2937 !important;
    text-align: left !important;
    background: rgba(241, 245, 249, 0.82) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 140ms ease, border-color 140ms ease !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar #sidebarAccountBtn.sidebar-account-button:hover,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar #sidebarAccountBtn.sidebar-account-button:focus-visible {
    background: #eef2f7 !important;
    border-color: rgba(100, 116, 139, 0.24) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded:hover > .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar #sidebarAccountAvatar.sidebar-account-avatar {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    inline-size: 36px !important;
    block-size: 36px !important;
    flex: 0 0 36px !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar .sidebar-account-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar .sidebar-account-copy strong {
    overflow: hidden !important;
    color: #1f2937 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 18px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar .sidebar-account-copy small {
    display: block !important;
    overflow: hidden !important;
    color: #8a97a8 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 14px !important;
    opacity: 1 !important;
    text-overflow: ellipsis !important;
    visibility: visible !important;
    white-space: nowrap !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar #sidebarAccountBtn.sidebar-account-button > i {
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    place-items: center !important;
    color: #7b8798 !important;
    font-size: 13px !important;
    font-style: normal !important;
    background: transparent !important;
    border-radius: 7px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed > .sidebar > .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed:hover > .sidebar > .sidebar-bottom-zone,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed:has(> .sidebar:hover) > .sidebar > .sidebar-bottom-zone {
    display: grid !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    place-items: center !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed > .sidebar .sidebar-account-card,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed:hover > .sidebar .sidebar-account-card {
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed > .sidebar #sidebarAccountBtn.sidebar-account-button,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed:hover > .sidebar #sidebarAccountBtn.sidebar-account-button {
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 4px !important;
    place-items: center !important;
    background: rgba(241, 245, 249, 0.82) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed > .sidebar #sidebarAccountAvatar.sidebar-account-avatar,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed:hover > .sidebar #sidebarAccountAvatar.sidebar-account-avatar {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    inline-size: 34px !important;
    block-size: 34px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed > .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed:hover > .sidebar .sidebar-account-copy,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed > .sidebar #sidebarAccountBtn > i,
  html:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed:hover > .sidebar #sidebarAccountBtn > i {
    display: none !important;
  }

  html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar #sidebarAccountBtn.sidebar-account-button,
  html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-collapsed > .sidebar #sidebarAccountBtn.sidebar-account-button {
    color: #e5edf8 !important;
    background: rgba(30, 41, 59, 0.72) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
  }

  html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar .sidebar-account-copy strong {
    color: #e5edf8 !important;
  }

  html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar .sidebar-account-copy small,
  html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel]
    .shell.sidebar-expanded > .sidebar #sidebarAccountBtn > i {
    color: #94a3b8 !important;
  }
}


/* source: v112-compact-sticky-topbar.css */
/* Feishu-style global command bar: persistent, compact and non-obstructive. */
html:not(.react-student-embedded) body .main {
  padding-top: 0 !important;
}

html:not(.react-student-embedded) body .shell > .main > header.topbar,
html:not(.react-student-embedded) body[data-active-panel] .shell > .main > header.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 240 !important;
  align-self: start !important;
  display: grid !important;
  grid-template-columns: minmax(140px, 200px) minmax(280px, 520px) minmax(140px, 200px) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: calc(100% + 48px) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 -24px 18px !important;
  padding: 0 24px !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(210, 219, 232, 0.9) !important;
  border-radius: 0 !important;
  background: rgba(248, 250, 253, 0.94) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
}

/* The homepage owns its horizontal spacing inside the panel, so it does not need the full-bleed offset. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .shell > .main > header.topbar {
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

html:not(.react-student-embedded) body .topbar-left,
html:not(.react-student-embedded) body .topbar-center,
html:not(.react-student-embedded) body .topbar-right {
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  align-items: center !important;
}

html:not(.react-student-embedded) body .topbar-title-stack,
html:not(.react-student-embedded) body .topbar-title-stack h2 {
  min-width: 0 !important;
  margin: 0 !important;
}

html:not(.react-student-embedded) body .topbar-title-stack h2 {
  color: #172033 !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body .topbar-center {
  position: relative !important;
  justify-self: center !important;
  width: 100% !important;
  max-width: 520px !important;
}

html:not(.react-student-embedded) body .topbar-search {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 520px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  overflow: hidden !important;
  border: 1px solid #dce4ee !important;
  border-radius: 10px !important;
  background: #f3f6fa !important;
  box-shadow: none !important;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease !important;
}

html:not(.react-student-embedded) body .topbar-search:hover {
  border-color: #c8d4e3 !important;
  background: #f8fafc !important;
}

html:not(.react-student-embedded) body .topbar-search:focus-within {
  border-color: #6b7cff !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(84, 104, 255, 0.1) !important;
}

html:not(.react-student-embedded) body .topbar-search-icon {
  position: relative !important;
  display: block !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) body .topbar-search-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 8px !important;
  height: 8px !important;
  border: 1.7px solid #718198 !important;
  border-radius: 50% !important;
}

html:not(.react-student-embedded) body .topbar-search-icon::after {
  content: "" !important;
  position: absolute !important;
  right: 1px !important;
  bottom: 2px !important;
  width: 6px !important;
  height: 1.7px !important;
  border-radius: 999px !important;
  background: #718198 !important;
  transform: rotate(45deg) !important;
  transform-origin: center !important;
}

html:not(.react-student-embedded) body .topbar-search > input#topbarCommandInput {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #273449 !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  line-height: 34px !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) body .topbar-search > input#topbarCommandInput::placeholder {
  color: #7a899e !important;
  opacity: 1 !important;
}

html:not(.react-student-embedded) body .topbar-search-submit {
  display: none !important;
}

/* Beat the historical homepage-only grid lock so the icon and text keep one geometry everywhere. */
html:not(.react-student-embedded) body[data-active-panel] .shell > .main > header.topbar .topbar-center > .topbar-search {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 0 11px !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell > .main > header.topbar .topbar-search > .topbar-search-icon {
  display: block !important;
  justify-self: center !important;
}

html:not(.react-student-embedded) body .topbar-center .global-ai-search-panel {
  top: calc(50% + 26px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 520px !important;
  padding: 12px !important;
  border: 1px solid rgba(210, 219, 232, 0.96) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .shell > .main > header.topbar,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel] .shell > .main > header.topbar {
  color: #eef4ff !important;
  border-bottom-color: rgba(125, 145, 174, 0.18) !important;
  background: rgba(10, 18, 31, 0.94) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar-title-stack h2 {
  color: #eef4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar-search {
  border-color: rgba(125, 145, 174, 0.24) !important;
  background: #121d2e !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar-search:hover,
html[data-theme="dark"]:not(.react-student-embedded) body .topbar-search:focus-within {
  border-color: rgba(113, 133, 255, 0.78) !important;
  background: #172438 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar-search > input#topbarCommandInput {
  color: #e7eef9 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar-search > input#topbarCommandInput::placeholder {
  color: #8090a6 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar-search-icon::before {
  border-color: #91a0b5 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar-search-icon::after {
  background: #91a0b5 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .topbar-center .global-ai-search-panel {
  border-color: rgba(125, 145, 174, 0.24) !important;
  background: rgba(17, 27, 43, 0.98) !important;
}

@media (max-width: 1040px) {
  html:not(.react-student-embedded) body .shell > .main > header.topbar,
  html:not(.react-student-embedded) body[data-active-panel] .shell > .main > header.topbar {
    grid-template-columns: minmax(100px, 150px) minmax(220px, 1fr) minmax(100px, 150px) !important;
    gap: 12px !important;
  }
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body .shell > .main > header.topbar,
  html:not(.react-student-embedded) body[data-active-panel] .shell > .main > header.topbar {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 0 14px !important;
    padding: 0 14px !important;
    grid-template-columns: minmax(88px, 120px) minmax(180px, 1fr) minmax(24px, 88px) !important;
    gap: 10px !important;
  }

  html:not(.react-student-embedded) body .topbar-title-stack h2 {
    font-size: 16px !important;
  }
}

@media (max-width: 680px) {
  html:not(.react-student-embedded) body .shell > .main > header.topbar,
  html:not(.react-student-embedded) body[data-active-panel] .shell > .main > header.topbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:not(.react-student-embedded) body .topbar-left,
  html:not(.react-student-embedded) body .topbar-right {
    display: none !important;
  }

  html:not(.react-student-embedded) body .topbar-center,
  html:not(.react-student-embedded) body .topbar-search {
    max-width: none !important;
  }
}


/* source: v114-unique-home-growth-cta.css */
/* Homepage single-call-to-action lock: one obvious first click, three passive task rows. */
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-action-plan {
  grid-template-rows: auto auto !important;
  min-height: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-action-item {
  cursor: default !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-action-item:hover,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-action-item:focus-visible {
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
  transform: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-action-item.is-primary:hover {
  border-color: rgba(79, 70, 229, 0.24) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-action-result {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 34px !important;
  padding-top: 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-action-result > span {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-action-result > strong {
  color: #4f46e5 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-entry {
  position: relative !important;
  z-index: 3 !important;
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 292px) !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 96px !important;
  padding: 18px 20px 18px 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(67, 56, 202, 0.28) !important;
  border-radius: 19px !important;
  background:
    radial-gradient(circle at 78% 10%, rgba(147, 197, 253, 0.24), transparent 34%),
    linear-gradient(112deg, #233dbe 0%, #5146d9 48%, #733ee8 100%) !important;
  box-shadow: 0 18px 36px rgba(67, 56, 202, 0.2) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-entry::after {
  content: "" !important;
  position: absolute !important;
  right: 250px !important;
  bottom: -92px !important;
  width: 210px !important;
  height: 210px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-copy {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-copy > span {
  color: rgba(224, 231, 255, 0.8) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-copy > strong {
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-copy > p {
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(238, 242, 255, 0.76) !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-meta {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-meta > span {
  display: grid !important;
  min-width: 98px !important;
  gap: 2px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-meta small {
  color: rgba(224, 231, 255, 0.74) !important;
  font-size: 9px !important;
  font-weight: 720 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-meta strong {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

:is(#hw-v6-home, html):not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-growth-super-entry > #landingStartInterviewBtn.landing-growth-super-button {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 240px !important;
  max-width: 292px !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 9px 16px 9px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #352fa6 !important;
  text-align: left !important;
  box-shadow: 0 12px 28px rgba(23, 29, 95, 0.3) !important;
  cursor: pointer !important;
  transition: transform 150ms ease, box-shadow 150ms ease !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-button:hover,
html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-button:focus-visible {
  outline: none !important;
  box-shadow: 0 16px 32px rgba(23, 29, 95, 0.38), 0 0 0 3px rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-button > span {
  grid-column: 1 !important;
  color: #352fa6 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-button > small {
  grid-column: 1 !important;
  color: #716caa !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-button > i {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: #ebe9ff !important;
  color: #5146d9 !important;
  font-size: 19px !important;
  font-style: normal !important;
}

@media (max-width: 1050px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-entry {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-copy {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 720px) {
  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-entry {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 13px !important;
    padding: 18px !important;
  }

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

  html:not(.react-student-embedded) body[data-active-panel="landing"] .landing-growth-super-meta > span {
    min-width: 0 !important;
  }

  :is(#hw-v6-home, html):not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace .landing-growth-super-entry > #landingStartInterviewBtn.landing-growth-super-button {
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* source: v116-interview-meeting-workbench.css */
/* v116 · Feishu-style AI interview meeting workbench */

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-meeting-stage-grid {
  display: grid !important;
  grid-template-columns: minmax(210px, 0.72fr) minmax(0, 2.28fr) !important;
  gap: 16px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-video-tile {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  place-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding: 16px !important;
  border: 1px solid rgba(91, 140, 255, 0.17) !important;
  border-radius: 18px !important;
  color: #172033 !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(124, 77, 255, 0.15), transparent 42%),
    linear-gradient(145deg, #f7f9ff 0%, #edf3ff 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82) !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-video-tile::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -34px -62px auto !important;
  width: 150px !important;
  height: 150px !important;
  border-radius: 999px !important;
  background: rgba(91, 140, 255, 0.08) !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-video-tile > img {
  position: relative !important;
  z-index: 1 !important;
  width: 92px !important;
  height: 92px !important;
  align-self: end !important;
  object-fit: cover !important;
  object-position: center 22% !important;
  border: 4px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 32px rgba(70, 87, 140, 0.2) !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-video-tile > div {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
  text-align: center !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-video-tile > div strong {
  color: #172033 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-video-tile > div small {
  color: #6b7890 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 760 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-video-live {
  position: absolute !important;
  z-index: 2 !important;
  top: 12px !important;
  left: 12px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 9px !important;
  color: #334155 !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  backdrop-filter: blur(12px) !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-video-live i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12) !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-dialog {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 9px !important;
  padding: 4px 6px 4px 2px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-dialog > p {
  margin: 0 !important;
  color: #6d4dff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-dialog .interview-question-card-head {
  min-height: 24px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-dialog .interview-question-card-head span {
  font-size: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-dialog .interview-question-card-head span::before {
  display: none !important;
  content: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-footer {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-footer .interview-question-info-row {
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-footer .interview-question-info-row span {
  min-height: 28px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-footer .interview-question-meta-compact {
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-footer .interview-question-meta-compact span {
  min-height: 27px !important;
  padding: 0 9px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-copilot-card > .section-head h3 {
  font-size: 18px !important;
}

@media (min-width: 1180px) {
  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio.interview-space-arena-open {
    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    margin-top: 88px !important;
  }

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] #interviewStudio.interview-space-arena-open {
    grid-template-rows: 64px minmax(0, 1fr) calc(72px + var(--safe-bottom)) !important;
    background: #f5f7fb !important;
  }

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] #interviewStudio > .engineering-training-flow {
    display: none !important;
  }

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] #interviewCoachRoom.interview-training-statusbar {
    grid-row: 1 / 2 !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    display: grid !important;
    grid-template-columns: auto minmax(250px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 8px 18px !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewCoachRoom .interview-training-title {
    min-width: 190px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewCoachRoom .interview-v5-modebar {
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewCoachRoom .interview-v5-company-tabs {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewCoachRoom .interview-training-metrics {
    display: flex !important;
    align-items: center !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewCoachRoom .interview-training-metrics > span:not(:last-child) {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewCoachRoom .interview-training-metrics > span:last-child {
    min-width: 146px !important;
    min-height: 42px !important;
    padding: 5px 12px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewCoachRoom .interview-training-actions {
    flex-wrap: nowrap !important;
  }

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] #interviewStudio > .interview-main-dashboard {
    grid-row: 2 / 3 !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(188px, 0.88fr) minmax(222px, 1.12fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px 16px !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(188px, 0.88fr) minmax(222px, 1.12fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px 16px !important;
    overflow: hidden !important;
  }

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

  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio > .interview-main-dashboard > .interview-workspace-card,
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card > .interview-arena-stack {
    display: contents !important;
  }

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

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-card {
    grid-column: 1 / 13 !important;
    grid-row: 1 / 2 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055) !important;
  }

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card .interview-question-card {
    grid-column: 1 / 13 !important;
    grid-row: 1 / 2 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-answer-zone {
    grid-column: 1 / 9 !important;
    grid-row: 2 / 3 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-content: start !important;
    overflow: hidden auto !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
  }

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] .shell .main.main > section.panel.active > #interviewStudio > .interview-main-dashboard > .interview-workspace-card .interview-answer-zone {
    grid-column: 1 / 9 !important;
    grid-row: 2 / 3 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-content: start !important;
    overflow: hidden auto !important;
  }

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

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-workspace-card .interview-question-feedback-card-inline {
    grid-column: 1 / 13 !important;
    grid-row: 3 / 4 !important;
    max-height: 210px !important;
    overflow: auto !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio > .interview-main-dashboard > .interview-copilot-card {
    grid-column: 9 / 13 !important;
    grid-row: 2 / 3 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 16px !important;
    position: relative !important;
    inset: auto !important;
    align-self: stretch !important;
    overflow: hidden auto !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
  }

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

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] .interview-question-dialog .question-box {
    min-height: 0 !important;
    max-height: 76px !important;
    overflow: hidden auto !important;
    font-size: 20px !important;
    line-height: 1.42 !important;
  }

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] .interview-question-dialog .interview-question-requirements {
    display: block !important;
  }

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] .interview-question-dialog .interview-question-requirements > span,
  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] .interview-question-dialog .interview-question-requirements li:nth-child(n + 5) {
    display: none !important;
  }

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] .interview-question-dialog .interview-question-requirements ul {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html:not(.react-student-embedded) body.interview-meeting-active[data-active-panel="interview"] .interview-question-dialog .interview-question-requirements li {
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-copilot-card > .section-head {
    min-height: 36px !important;
    margin-bottom: 10px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-copilot-card .interview-coach-toggle-btn {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .coach-live-score-card {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .coach-live-score-head,
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel #copilotCoverageText,
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel #xiaowenCoachLiveCue {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .coach-completeness-main {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .coach-completeness-main > div:first-child {
    display: flex !important;
    align-items: baseline !important;
    gap: 7px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .coach-completeness-main strong {
    font-size: 26px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .coach-structure-card {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .coach-structure-card > .coach-panel-title,
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .coach-structure-list,
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .coach-followup-card,
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .coach-judge-card,
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-ai-coach-panel .interview-progress-stats {
    display: none !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .engineering-score-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .engineering-score-summary > div {
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .engineering-score-summary > div span {
    color: #6d4dff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .engineering-score-summary > div strong {
    overflow: hidden !important;
    color: #172033 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-answer-zone .interview-answer-live-card {
    min-height: 114px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-answer-zone .interview-waveform {
    min-height: 66px !important;
    height: 66px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-answer-zone .interview-answer-transcript-body {
    padding: 11px 16px 13px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-answer-zone #interviewAnswerHighlightPreview {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-bottom-actionbar {
    grid-row: 3 / 4 !important;
    border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: blur(18px) !important;
  }
}

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

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-video-tile {
    min-height: 128px !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    place-items: center start !important;
    padding: 42px 16px 14px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-video-tile > img {
    width: 72px !important;
    height: 72px !important;
    align-self: center !important;
    border-radius: 22px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-video-tile > div {
    text-align: left !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-footer {
    display: grid !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-footer .interview-question-meta-compact {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 720px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-dialog .question-box {
    font-size: 20px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-requirements li:nth-child(n + 4),
  html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-info-row span:nth-child(-n + 2) {
    display: none !important;
  }
}


/* source: v117-training-xp-sources.css */
/* v117 · Visible engineering XP provenance */

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-hero {
  align-items: stretch !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-hero > div:first-child {
  display: grid !important;
  align-content: center !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp {
  width: min(390px, 42%) !important;
  min-width: 340px !important;
  gap: 7px !important;
  padding: 14px 15px 13px !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp > .training-rpg-xp-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
  margin-top: 4px !important;
  padding-top: 9px !important;
  border-top: 1px solid rgba(99, 102, 241, 0.12) !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources > header span {
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources > header em {
  color: #94a3b8 !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 750 !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources ul {
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources li {
  min-width: 0 !important;
  min-height: 34px !important;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 9px !important;
  background: rgba(248, 250, 252, 0.86) !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources li b {
  min-height: 23px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 7px !important;
  border-radius: 7px !important;
  color: #059669 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources li span {
  overflow: hidden !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources li {
  border-color: rgba(129, 140, 248, 0.16) !important;
  background: rgba(30, 41, 59, 0.72) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources > header span,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp-sources li span {
  color: #dbeafe !important;
}

@media (max-width: 1060px) {
  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp {
    width: min(380px, 48%) !important;
    min-width: 310px !important;
  }
}

@media (max-width: 760px) {
  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-hero {
    display: grid !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="question-bank"] .training-rpg-xp {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* source: v118-ai-debug-mentor.css */
/* v118 · Xiaowen as an active AI Debug engineer */

@media (min-width: 1220px) {
  html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-layout {
    grid-template-columns: 190px minmax(0, 1fr) 320px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-aside {
    position: sticky !important;
    top: 72px !important;
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 1440px) {
  html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-layout {
    grid-template-columns: 216px minmax(0, 1fr) 340px !important;
  }
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-mentor-ai {
  gap: 11px !important;
  padding: 14px !important;
  overflow: hidden !important;
  border-color: rgba(124, 58, 237, 0.25) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.12), transparent 34%),
    linear-gradient(150deg, rgba(248, 250, 255, 0.98), var(--debug-surface)) !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-mentor-ai > header {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.13) !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-mentor-ai > header .debug-mentor-avatar {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  background:
    url("./assets/xiaowen-avatar.png") center 16% / cover no-repeat,
    #eef2ff !important;
  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.16) !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-mentor-ai > header > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-mentor-ai > header span {
  color: #7c3aed !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-mentor-ai > header strong {
  overflow: hidden !important;
  color: var(--debug-text) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-mentor-ai > header em {
  min-height: 23px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 7px !important;
  color: #6d4dff !important;
  background: rgba(124, 58, 237, 0.1) !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-confirmed,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-avoid,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-next {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
  padding: 10px !important;
  border-radius: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-confirmed {
  border: 1px solid rgba(16, 185, 129, 0.18) !important;
  background: rgba(236, 253, 245, 0.72) !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-avoid {
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  background: rgba(255, 251, 235, 0.88) !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-next {
  border: 1px solid rgba(59, 130, 246, 0.18) !important;
  background: rgba(239, 246, 255, 0.82) !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] :is(.debug-mentor-confirmed, .debug-mentor-avoid, .debug-mentor-next) > span {
  color: #64748b !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-confirmed ul,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-next ol {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-confirmed li,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-next li {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 7px !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-confirmed li > i,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-next li > i {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 7px !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-confirmed li > i {
  color: #ffffff !important;
  background: #10b981 !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-next li > i {
  color: #ffffff !important;
  background: linear-gradient(135deg, #3b82f6, #7c3aed) !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] :is(.debug-mentor-confirmed, .debug-mentor-next) li > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] :is(.debug-mentor-confirmed, .debug-mentor-next) li strong {
  color: var(--debug-text) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] :is(.debug-mentor-confirmed, .debug-mentor-next) li small {
  overflow: hidden !important;
  color: var(--debug-muted) !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
  text-overflow: ellipsis !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-avoid strong {
  color: #92400e !important;
  font-size: 10px !important;
  line-height: 1.55 !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-rationale {
  margin: 0 !important;
  padding: 0 2px !important;
  color: var(--debug-muted) !important;
  font-size: 9px !important;
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-mentor-ai > button {
  width: 100% !important;
  min-height: 36px !important;
  height: 36px !important;
  margin-top: 0 !important;
  padding: 0 12px !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
  color: #6d4dff !important;
  background: rgba(255, 255, 255, 0.78) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-workflow-mentor-ai {
  background: linear-gradient(150deg, rgba(76, 29, 149, 0.18), var(--debug-surface)) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-confirmed {
  background: rgba(6, 78, 59, 0.22) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-avoid {
  background: rgba(120, 53, 15, 0.22) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-mentor-next {
  background: rgba(30, 64, 175, 0.18) !important;
}


/* source: v119-waveform-learning-mode.css */
/* v119 · Waveform Lab learning / engineering dual-track experience */

/* Learning surfaces must switch together with the global night text palette. */
html[data-theme="dark"] #waveformTrainingBoard .waveform-learning-shell {
  color: #edf4ff !important;
}
html[data-theme="dark"] #waveformTrainingBoard :is(.waveform-learning-topbar, .waveform-learning-question-card, .waveform-learning-coach-card, .waveform-learning-case-tabs) {
  background: #111e31 !important;
  border-color: #33455f !important;
  box-shadow: 0 12px 32px rgb(0 0 0 / 15%) !important;
}
html[data-theme="dark"] #waveformTrainingBoard :is(.waveform-experience-switch, .waveform-learning-feedback, .waveform-learning-next-action, .waveform-learning-guardrail, .waveform-learning-coach-hint li, .waveform-learning-options button, .waveform-learning-secondary, .waveform-learning-engineering-link, .waveform-learning-evidence > strong, .waveform-learning-question-card > header > em) {
  background: #1c2c43 !important;
  border-color: #3c506d !important;
  color: #e0eafa !important;
}
html[data-theme="dark"] #waveformTrainingBoard .waveform-learning-shell :is(h2,h3,h4,strong,b) {
  color: #edf4ff !important;
}
html[data-theme="dark"] #waveformTrainingBoard .waveform-learning-shell :is(p,small,em,i,.waveform-learning-case-tabs button,.waveform-learning-progress span,.waveform-learning-evidence > span,.waveform-learning-next-action > span,.waveform-learning-coach-hint > span,.waveform-learning-actions > span,.waveform-experience-switch button) {
  color: #b8c9df !important;
}
html[data-theme="dark"] #waveformTrainingBoard :is(.waveform-experience-switch button.active,.waveform-learning-case-tabs button.active,.waveform-learning-options button.selected) {
  background: #263c67 !important;
  border-color: #7b9dff !important;
  color: #d7e4ff !important;
}
html[data-theme="dark"] #waveformTrainingBoard :is(.waveform-learning-kicker,.waveform-learning-coach-title span,.waveform-learning-case-tabs button.active span) {
  color: #a6baff !important;
}
html[data-theme="dark"] #waveformTrainingBoard :is(.waveform-learning-step,.waveform-learning-choice-head > span,.waveform-learning-options button > span,.waveform-learning-coach-hint li > i) {
  color: #e0eaff !important;
  background: #304774 !important;
}
html[data-theme="dark"] #waveformTrainingBoard :is(.waveform-learning-options button.correct,.waveform-learning-score.good) {
  background: #173b33 !important;
  border-color: #4dac86 !important;
}
html[data-theme="dark"] #waveformTrainingBoard :is(.waveform-learning-options button.wrong,.waveform-learning-score.retry) {
  background: #3f2736 !important;
  border-color: #b87788 !important;
}
html[data-theme="dark"] #waveformTrainingBoard .waveform-learning-score > span {
  color: #cfdfec !important;
}
html[data-theme="dark"] #waveformTrainingBoard .waveform-learning-score.good > strong { color: #78e8bb !important; }
html[data-theme="dark"] #waveformTrainingBoard .waveform-learning-score.retry > strong { color: #ffb1b7 !important; }
html[data-theme="dark"] #waveformTrainingBoard .waveform-learning-preview {
  background: #0c1729 !important;
  border-color: #405471 !important;
}
html[data-theme="dark"] #waveformTrainingBoard .wave-learn-bg { fill: #0c1729 !important; }
html[data-theme="dark"] #waveformTrainingBoard .wave-learn-grid { color: #344962 !important; }
html[data-theme="dark"] #waveformTrainingBoard .wave-learn-line.primary { stroke: #91a1ff !important; }
html[data-theme="dark"] #waveformTrainingBoard .wave-learn-cursor text { fill: #ffa5ab !important; }
html[data-theme="dark"] #waveformTrainingBoard :is(.waveform-learning-options button:hover:not(:disabled),.waveform-learning-case-tabs button:hover,.waveform-experience-switch button:hover) { background: #2c3e5d !important; }

html:not(.react-student-embedded) body[data-active-panel="waveform-lab"] #waveformTrainingBoard {
  padding-bottom: 104px !important;
}

html:not(.react-student-embedded) .waveform-learning-shell {
  width: min(1540px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 18px !important;
  color: #172033 !important;
}

html:not(.react-student-embedded) .waveform-learning-topbar {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 570px) !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 26px 30px !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 4% 4%, rgba(77, 112, 255, 0.09), transparent 24%),
    #ffffff !important;
  box-shadow: 0 16px 40px rgba(20, 32, 61, 0.07) !important;
}

html:not(.react-student-embedded) .waveform-learning-topbar > div:first-child {
  min-width: 0 !important;
}

html:not(.react-student-embedded) .waveform-learning-kicker {
  margin: 0 0 7px !important;
  color: #4f6ef7 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  letter-spacing: 0.11em !important;
}

html:not(.react-student-embedded) .waveform-learning-topbar h2 {
  margin: 0 !important;
  color: #111a2c !important;
  font-size: clamp(24px, 2.1vw, 34px) !important;
  line-height: 1.24 !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
}

html:not(.react-student-embedded) .waveform-learning-topbar > div:first-child > p:last-child {
  margin: 9px 0 0 !important;
  color: #66738a !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  font-weight: 650 !important;
}

html:not(.react-student-embedded) .waveform-experience-switch {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 5px !important;
  border: 1px solid #dfe5ef !important;
  border-radius: 15px !important;
  background: #f4f6fa !important;
}

html:not(.react-student-embedded) .waveform-experience-switch button {
  min-width: 0 !important;
  min-height: 58px !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 9px 13px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #69758a !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease !important;
}

html:not(.react-student-embedded) .waveform-experience-switch button:hover {
  color: #263650 !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

html:not(.react-student-embedded) .waveform-experience-switch button.active {
  border-color: rgba(79, 110, 247, 0.22) !important;
  background: #ffffff !important;
  color: #3556e8 !important;
  box-shadow: 0 6px 18px rgba(46, 71, 136, 0.1) !important;
}

html:not(.react-student-embedded) .waveform-experience-switch button span {
  overflow: hidden !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) .waveform-experience-switch button small {
  overflow: hidden !important;
  color: #8490a4 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) .waveform-experience-switch button.active small {
  color: #7182c3 !important;
}

html:not(.react-student-embedded) .waveform-learning-case-tabs {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(112px, 1fr)) !important;
  gap: 8px !important;
  padding: 6px !important;
  overflow-x: auto !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 28px rgba(20, 32, 61, 0.045) !important;
  scrollbar-width: none !important;
}

html:not(.react-student-embedded) .waveform-learning-case-tabs::-webkit-scrollbar {
  display: none !important;
}

html:not(.react-student-embedded) .waveform-learning-case-tabs button {
  min-width: 112px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #66738a !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .waveform-learning-case-tabs button span {
  color: #9aa5b7 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .waveform-learning-case-tabs button:hover {
  background: #f5f7fb !important;
  color: #35445d !important;
}

html:not(.react-student-embedded) .waveform-learning-case-tabs button.active {
  border-color: rgba(79, 110, 247, 0.2) !important;
  background: #eef2ff !important;
  color: #3f5ce0 !important;
}

html:not(.react-student-embedded) .waveform-learning-case-tabs button.active span {
  color: #5d76e8 !important;
}

html:not(.react-student-embedded) .waveform-learning-workbench {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  align-items: start !important;
  gap: 18px !important;
}

html:not(.react-student-embedded) .waveform-learning-question-card,
html:not(.react-student-embedded) .waveform-learning-coach-card {
  min-width: 0 !important;
  border: 1px solid #e3e8f1 !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 44px rgba(20, 32, 61, 0.065) !important;
}

html:not(.react-student-embedded) .waveform-learning-question-card {
  padding: 26px !important;
}

html:not(.react-student-embedded) .waveform-learning-question-card > header {
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 18px !important;
}

html:not(.react-student-embedded) .waveform-learning-question-card > header > div {
  min-width: 0 !important;
}

html:not(.react-student-embedded) .waveform-learning-step,
html:not(.react-student-embedded) .waveform-learning-choice-head > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: #eef2ff !important;
  color: #4d67d8 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.05em !important;
}

html:not(.react-student-embedded) .waveform-learning-question-card > header h3 {
  margin: 10px 0 0 !important;
  color: #111a2c !important;
  font-size: clamp(25px, 2.4vw, 38px) !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
}

html:not(.react-student-embedded) .waveform-learning-question-card > header p {
  max-width: 760px !important;
  margin: 9px 0 0 !important;
  color: #66738a !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 650 !important;
}

html:not(.react-student-embedded) .waveform-learning-question-card > header > em {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 11px !important;
  border: 1px solid #dbe4ff !important;
  border-radius: 9px !important;
  background: #f7f9ff !important;
  color: #5c6fba !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) .waveform-learning-preview {
  width: 100% !important;
  height: auto !important;
  min-height: 176px !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid #dfe6f2 !important;
  border-radius: 18px !important;
  background: #f8faff !important;
}

html:not(.react-student-embedded) .waveform-learning-preview .wave-learn-bg {
  fill: #f8faff !important;
}

html:not(.react-student-embedded) .waveform-learning-preview .wave-learn-grid {
  color: rgba(112, 132, 168, 0.11) !important;
}

html:not(.react-student-embedded) .waveform-learning-preview .wave-learn-line {
  fill: none !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}

html:not(.react-student-embedded) .waveform-learning-preview .wave-learn-line.primary {
  stroke: #4f6ef7 !important;
}

html:not(.react-student-embedded) .waveform-learning-preview .wave-learn-line.secondary {
  stroke: #f59e0b !important;
}

html:not(.react-student-embedded) .waveform-learning-preview .wave-learn-line.marker {
  stroke: #f05252 !important;
  stroke-width: 2 !important;
  stroke-dasharray: 5 5 !important;
}

html:not(.react-student-embedded) .waveform-learning-preview .wave-learn-cursor line {
  stroke: #f05252 !important;
  stroke-width: 1.5 !important;
  stroke-dasharray: 5 5 !important;
}

html:not(.react-student-embedded) .waveform-learning-preview .wave-learn-cursor circle {
  fill: #f05252 !important;
}

html:not(.react-student-embedded) .waveform-learning-preview .wave-learn-cursor text {
  fill: #d13c3c !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .waveform-learning-evidence {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 13px 0 0 !important;
}

html:not(.react-student-embedded) .waveform-learning-evidence > span {
  color: #7c879a !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) .waveform-learning-evidence > strong {
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  border: 1px solid #e0e6ef !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #43516a !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) .waveform-learning-choice-block {
  margin-top: 22px !important;
  padding-top: 21px !important;
  border-top: 1px solid #edf0f5 !important;
}

html:not(.react-student-embedded) .waveform-learning-choice-head h4 {
  margin: 9px 0 0 !important;
  color: #172033 !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .waveform-learning-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

html:not(.react-student-embedded) .waveform-learning-options button {
  min-width: 0 !important;
  min-height: 96px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: 1fr auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 6px !important;
  padding: 14px !important;
  border: 1px solid #dfe5ee !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: #334155 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}

html:not(.react-student-embedded) .waveform-learning-options button:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: #a9b9f7 !important;
  box-shadow: 0 10px 24px rgba(48, 73, 143, 0.1) !important;
}

html:not(.react-student-embedded) .waveform-learning-options button > span {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-row: 1 / span 2 !important;
  border-radius: 10px !important;
  background: #f0f3f8 !important;
  color: #607089 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) .waveform-learning-options button > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

html:not(.react-student-embedded) .waveform-learning-options button strong {
  color: #253147 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .waveform-learning-options button small {
  color: #8390a4 !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
}

html:not(.react-student-embedded) .waveform-learning-options button > i {
  grid-column: 2 !important;
  color: #9aa4b5 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) .waveform-learning-options button.selected {
  border-color: #6b82eb !important;
  background: #f4f6ff !important;
  box-shadow: inset 0 0 0 1px rgba(79, 110, 247, 0.14) !important;
}

html:not(.react-student-embedded) .waveform-learning-options button.selected > span {
  background: #4f6ef7 !important;
  color: #ffffff !important;
}

html:not(.react-student-embedded) .waveform-learning-options button.correct {
  border-color: #4bb889 !important;
  background: #f0fbf6 !important;
}

html:not(.react-student-embedded) .waveform-learning-options button.correct > span {
  background: #21a775 !important;
  color: #ffffff !important;
}

html:not(.react-student-embedded) .waveform-learning-options button.wrong {
  border-color: #ee9a9a !important;
  background: #fff5f5 !important;
}

html:not(.react-student-embedded) .waveform-learning-options button.wrong > span {
  background: #e85d5d !important;
  color: #ffffff !important;
}

html:not(.react-student-embedded) .waveform-learning-options button:disabled {
  cursor: default !important;
  opacity: 1 !important;
}

html:not(.react-student-embedded) .waveform-learning-actions {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

html:not(.react-student-embedded) .waveform-learning-actions > span {
  margin-right: auto !important;
  color: #758196 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

html:not(.react-student-embedded) .waveform-learning-primary,
html:not(.react-student-embedded) .waveform-learning-secondary,
html:not(.react-student-embedded) .waveform-learning-engineering-link {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) .waveform-learning-primary {
  border: 1px solid #4f6ef7 !important;
  background: linear-gradient(135deg, #4b6df5, #6b55ec) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(79, 110, 247, 0.22) !important;
}

html:not(.react-student-embedded) .waveform-learning-primary:disabled {
  border-color: #ccd3df !important;
  background: #dfe4ec !important;
  color: #8792a4 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

html:not(.react-student-embedded) .waveform-learning-secondary {
  border: 1px solid #dce2eb !important;
  background: #ffffff !important;
  color: #59667b !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-card {
  position: sticky !important;
  top: 76px !important;
  padding: 20px !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-title {
  display: grid !important;
  gap: 4px !important;
  padding-bottom: 15px !important;
  border-bottom: 1px solid #edf0f5 !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-title span {
  color: #7057e8 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-title strong {
  color: #172033 !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-hint {
  margin-top: 17px !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-hint > span,
html:not(.react-student-embedded) .waveform-learning-feedback > span,
html:not(.react-student-embedded) .waveform-learning-next-action > span {
  color: #8a95a6 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-hint > strong {
  display: block !important;
  margin-top: 4px !important;
  color: #263247 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-hint ol {
  display: grid !important;
  gap: 8px !important;
  margin: 13px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-hint li {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px !important;
  border: 1px solid #e7ebf2 !important;
  border-radius: 10px !important;
  background: #fafbfe !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-hint li > i {
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: #eef2ff !important;
  color: #526de1 !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-hint li > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-hint li b {
  color: #334056 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .waveform-learning-coach-hint li small {
  color: #8893a5 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
}

html:not(.react-student-embedded) .waveform-learning-guardrail {
  margin-top: 14px !important;
  padding: 12px !important;
  border: 1px solid #e6e1fb !important;
  border-radius: 11px !important;
  background: #faf8ff !important;
}

html:not(.react-student-embedded) .waveform-learning-guardrail span {
  color: #6956c5 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) .waveform-learning-guardrail p {
  margin: 5px 0 0 !important;
  color: #736b91 !important;
  font-size: 10px !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
}

html:not(.react-student-embedded) .waveform-learning-score {
  display: grid !important;
  justify-items: center !important;
  gap: 3px !important;
  margin-top: 17px !important;
  padding: 17px !important;
  border: 1px solid #d8efe5 !important;
  border-radius: 14px !important;
  background: #f2fbf7 !important;
}

html:not(.react-student-embedded) .waveform-learning-score.retry {
  border-color: #f2dddd !important;
  background: #fff7f7 !important;
}

html:not(.react-student-embedded) .waveform-learning-score > span {
  color: #718078 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) .waveform-learning-score > strong {
  color: #16956a !important;
  font-size: 40px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.05em !important;
}

html:not(.react-student-embedded) .waveform-learning-score.retry > strong {
  color: #d85151 !important;
}

html:not(.react-student-embedded) .waveform-learning-score > strong small {
  margin-left: 3px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

html:not(.react-student-embedded) .waveform-learning-score > em {
  color: #4e7164 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) .waveform-learning-feedback,
html:not(.react-student-embedded) .waveform-learning-next-action {
  margin-top: 11px !important;
  padding: 12px !important;
  border: 1px solid #e7ebf2 !important;
  border-radius: 11px !important;
  background: #fafbfe !important;
}

html:not(.react-student-embedded) .waveform-learning-feedback p,
html:not(.react-student-embedded) .waveform-learning-next-action strong {
  display: block !important;
  margin: 5px 0 0 !important;
  color: #46536a !important;
  font-size: 10px !important;
  line-height: 1.62 !important;
  font-weight: 700 !important;
}

html:not(.react-student-embedded) .waveform-learning-progress {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid #edf0f5 !important;
}

html:not(.react-student-embedded) .waveform-learning-progress > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) .waveform-learning-progress span {
  overflow: hidden !important;
  color: #8994a6 !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) .waveform-learning-progress i {
  width: 100% !important;
  height: 4px !important;
  display: block !important;
  border-radius: 99px !important;
  background: #e7eaf0 !important;
}

html:not(.react-student-embedded) .waveform-learning-progress i.active {
  background: #a8b5f4 !important;
}

html:not(.react-student-embedded) .waveform-learning-progress i.done {
  background: #4f6ef7 !important;
}

html:not(.react-student-embedded) .waveform-learning-engineering-link {
  width: 100% !important;
  margin-top: 14px !important;
  border: 1px solid #dce2ec !important;
  background: #ffffff !important;
  color: #4d5c73 !important;
}

html:not(.react-student-embedded) .waveform-learning-engineering-link:hover {
  border-color: #aebcf0 !important;
  color: #425bd0 !important;
  background: #f7f8ff !important;
}

/* Engineering mode keeps the full instrument workbench and exposes the same top-level switch. */
html:not(.react-student-embedded) .waveform-investigation-title > .waveform-experience-switch {
  width: min(560px, 100%) !important;
  margin: 14px 0 12px !important;
}

html:not(.react-student-embedded) .waveform-investigation-title > .waveform-experience-switch button {
  min-height: 52px !important;
}

@media (max-width: 1180px) {
  html:not(.react-student-embedded) .waveform-learning-topbar {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) .waveform-learning-topbar .waveform-experience-switch {
    width: min(640px, 100%) !important;
  }

  html:not(.react-student-embedded) .waveform-learning-workbench {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) .waveform-learning-coach-card {
    position: static !important;
  }
}

@media (max-width: 760px) {
  html:not(.react-student-embedded) .waveform-learning-topbar,
  html:not(.react-student-embedded) .waveform-learning-question-card,
  html:not(.react-student-embedded) .waveform-learning-coach-card {
    padding: 18px !important;
    border-radius: 17px !important;
  }

  html:not(.react-student-embedded) .waveform-experience-switch {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) .waveform-learning-options {
    grid-template-columns: 1fr !important;
  }

  html:not(.react-student-embedded) .waveform-learning-options button {
    min-height: 78px !important;
  }

  html:not(.react-student-embedded) .waveform-learning-question-card > header {
    display: grid !important;
  }

  html:not(.react-student-embedded) .waveform-learning-question-card > header > em {
    justify-self: start !important;
  }

  html:not(.react-student-embedded) .waveform-learning-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  html:not(.react-student-embedded) .waveform-learning-actions > span {
    margin: 0 !important;
  }
}


/* source: v120-knowledge-case-linkage.css */
/* v120 · Knowledge → experiment → Debug case → interview linkage */

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey {
  min-width: 0 !important;
  padding: 18px !important;
  border: 1px solid #dfe5ef !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(79, 110, 247, 0.07), transparent 25%),
    #ffffff !important;
  box-shadow: 0 12px 32px rgba(25, 38, 70, 0.055) !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey > header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 14px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey > header > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey > header span {
  color: #4f6ef7 !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  letter-spacing: 0.12em !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey > header strong {
  color: #172033 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey > header > em {
  flex: 0 0 auto !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  border: 1px solid #e0e5f0 !important;
  border-radius: 8px !important;
  background: #f7f9fc !important;
  color: #69768a !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-track {
  min-width: 0 !important;
  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"] .knowledge-association-node {
  --association-accent: #4f6ef7;
  --association-soft: #eef2ff;
  position: relative !important;
  min-width: 0 !important;
  min-height: 154px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(42px, 1fr) auto !important;
  align-content: start !important;
  column-gap: 9px !important;
  row-gap: 5px !important;
  padding: 14px !important;
  overflow: visible !important;
  border: 1px solid #e1e6ef !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: #334155 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: 0 7px 20px rgba(31, 45, 77, 0.045) !important;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node.experiment {
  --association-accent: #0f9f84;
  --association-soft: #eafaf6;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node.case {
  --association-accent: #e37b28;
  --association-soft: #fff5e9;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node.interview {
  --association-accent: #8055df;
  --association-soft: #f5efff;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 3px !important;
  border-radius: 13px 0 0 13px !important;
  background: var(--association-accent) !important;
  opacity: 0.82 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node:not(:last-child)::after {
  content: "→" !important;
  position: absolute !important;
  z-index: 3 !important;
  top: 50% !important;
  right: -19px !important;
  width: 25px !important;
  height: 25px !important;
  display: grid !important;
  place-items: center !important;
  transform: translateY(-50%) !important;
  border: 1px solid #e0e5ef !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #8a96a9 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  box-shadow: 0 4px 10px rgba(39, 51, 80, 0.08) !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node:hover {
  z-index: 4 !important;
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--association-accent) 42%, #ffffff) !important;
  box-shadow: 0 13px 28px rgba(31, 45, 77, 0.1) !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node > i {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-row: 1 / span 2 !important;
  border-radius: 9px !important;
  background: var(--association-soft) !important;
  color: var(--association-accent) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node > span {
  min-width: 0 !important;
  color: var(--association-accent) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node > strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #202b3e !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node > p {
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  margin: 3px 0 0 !important;
  color: #718096 !important;
  font-size: 10px !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node > em {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  grid-column: 1 / -1 !important;
  padding-top: 8px !important;
  border-top: 1px solid #edf0f4 !important;
  color: var(--association-accent) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node > em b {
  font-size: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > .learning-knowledge-linkage {
  order: 4 !important;
  margin: 3px 0 2px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 4px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > .learning-knowledge-linkage > span {
  min-width: 0 !important;
  min-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 1px solid #e2e7f0 !important;
  border-radius: 6px !important;
  background: #f7f9fc !important;
  color: #718096 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > .learning-knowledge-linkage + div {
  order: 5 !important;
  margin-top: auto !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node {
  background: #101b2c !important;
  border-color: #2b3950 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey > header strong,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node > strong {
  color: #edf3ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node > p {
  color: #9eabc0 !important;
}

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

  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node::after {
    display: none !important;
  }
}

@media (max-width: 700px) {
  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey {
    padding: 15px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey > header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

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

  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node {
    min-height: 136px !important;
  }
}


/* source: v121-engineer-identity-card.css */
/* v121 · Engineer identity card and enterprise-ready contribution profile */

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-card {
  min-width: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-shell {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 0.82fr) minmax(560px, 1.45fr) !important;
  gap: 16px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] :is(.engineer-identity-profile, .engineer-identity-contribution) {
  min-width: 0 !important;
  border: 1px solid #dfe5ef !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 40px rgba(25, 38, 70, 0.065) !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-profile {
  display: flex !important;
  flex-direction: column !important;
  padding: 22px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(79, 110, 247, 0.12), transparent 34%),
    linear-gradient(150deg, #ffffff, #f8faff) !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-profile > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-badge {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-badge > i {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #4f6ef7, #7455e7) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  box-shadow: 0 8px 18px rgba(79, 110, 247, 0.22) !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-badge > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-badge strong {
  color: #1b2537 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-badge small {
  color: #76839a !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-profile > header > em {
  min-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 9px !important;
  border: 1px solid #cfe9dc !important;
  border-radius: 999px !important;
  background: #effaf4 !important;
  color: #24845d !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-person {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 22px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid #e7ebf2 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-avatar {
  width: 68px !important;
  height: 68px !important;
  display: block !important;
  flex: 0 0 68px !important;
  border: 3px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 19px !important;
  background-position: center 16% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: 0 10px 24px rgba(36, 54, 98, 0.14) !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-person > div {
  min-width: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-person h2 {
  margin: 0 !important;
  color: #111a2b !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-person p {
  margin: 4px 0 0 !important;
  color: #44516a !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-person > div > span {
  display: block !important;
  margin-top: 5px !important;
  color: #7c879a !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-abilities {
  display: grid !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-abilities article {
  min-width: 0 !important;
  display: grid !important;
  gap: 6px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-abilities article > div {
  min-width: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-abilities span {
  color: #526078 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-abilities strong {
  color: #293750 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-abilities article > i {
  width: 100% !important;
  height: 6px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e8ecf3 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-abilities article > i > b {
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #4f6ef7, #7654e7) !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-profile > footer {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 3px 9px !important;
  margin-top: auto !important;
  padding-top: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-profile > footer span,
html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-profile > footer em {
  color: #8994a6 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-profile > footer strong {
  color: #43516a !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-profile > footer em {
  grid-column: 1 / -1 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution {
  padding: 22px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > header {
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > header > div {
  min-width: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > header span {
  color: #4f6ef7 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0.12em !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > header h3 {
  margin: 4px 0 0 !important;
  color: #172033 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > header p {
  margin: 5px 0 0 !important;
  color: #768297 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > header > em {
  min-height: 29px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  padding: 0 10px !important;
  border: 1px solid #dce4f6 !important;
  border-radius: 9px !important;
  background: #f5f7ff !important;
  color: #566cb8 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-contribution-calendar {
  width: 100% !important;
  min-height: 136px !important;
  display: grid !important;
  grid-template-rows: repeat(7, 13px) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(13px, 1fr) !important;
  align-content: center !important;
  gap: 5px !important;
  margin-top: 17px !important;
  padding: 16px !important;
  border: 1px solid #e3e8f0 !important;
  border-radius: 13px !important;
  background: #fafbfe !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] :is(.engineer-contribution-calendar, .engineer-contribution-legend) i {
  --contribution-color: #e6eaf1;
  display: block !important;
  border: 1px solid rgba(102, 119, 150, 0.08) !important;
  border-radius: 3px !important;
  background: var(--contribution-color) !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] :is(.engineer-contribution-calendar, .engineer-contribution-legend) i[data-level="1"] {
  --contribution-color: #dbe4ff;
}

html:not(.react-student-embedded) body[data-active-panel="my"] :is(.engineer-contribution-calendar, .engineer-contribution-legend) i[data-level="2"] {
  --contribution-color: #aabdf7;
}

html:not(.react-student-embedded) body[data-active-panel="my"] :is(.engineer-contribution-calendar, .engineer-contribution-legend) i[data-level="3"] {
  --contribution-color: #708bed;
}

html:not(.react-student-embedded) body[data-active-panel="my"] :is(.engineer-contribution-calendar, .engineer-contribution-legend) i[data-level="4"] {
  --contribution-color: #4c63d9;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-contribution-legend {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  margin-top: 7px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-contribution-legend span {
  color: #8a95a7 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-contribution-legend i {
  width: 10px !important;
  height: 10px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-completions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 15px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-completions article {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  min-height: 84px !important;
  padding: 11px !important;
  border: 1px solid #e3e8f0 !important;
  border-radius: 11px !important;
  background: #fbfcfe !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-completions article > span {
  overflow: hidden !important;
  color: #788498 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-completions strong {
  color: #1d2940 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-completions strong small {
  margin-left: 2px !important;
  color: #69768c !important;
  font-size: 9px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-completions p {
  overflow: hidden !important;
  margin: 0 !important;
  color: #8a95a7 !important;
  font-size: 8px !important;
  line-height: 1.3 !important;
  font-weight: 650 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: 17px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e7ebf2 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > footer > div {
  min-width: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > footer strong {
  color: #2e3a50 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > footer p {
  margin: 4px 0 0 !important;
  color: #818da0 !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] [data-engineer-identity-proof] {
  min-height: 42px !important;
  flex: 0 0 auto !important;
  gap: 9px !important;
  padding: 0 17px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: 0 9px 21px rgba(79, 110, 247, 0.21) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="my"] :is(.engineer-identity-profile, .engineer-identity-contribution) {
  border-color: #2c3950 !important;
  background: #101a2b !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="my"] :is(.engineer-identity-badge strong, .engineer-identity-person h2, .engineer-identity-contribution > header h3, .engineer-identity-completions strong) {
  color: #edf3ff !important;
}

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

  html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-profile > footer {
    margin-top: 18px !important;
  }
}

@media (max-width: 720px) {
  html:not(.react-student-embedded) body[data-active-panel="my"] :is(.engineer-identity-profile, .engineer-identity-contribution) {
    padding: 17px !important;
    border-radius: 15px !important;
  }

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

  html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="my"] [data-engineer-identity-proof] {
    width: 100% !important;
  }
}


/* source: v124-translation-widget-cleanup.css */
/* Keep the product surface free from translation-extension bubbles and banners. */

html body > #google_translate_element,
html body > .goog-te-banner-frame,
html body > iframe.goog-te-banner-frame,
html body > iframe.skiptranslate,
html body > immersive-translate-float-bubble,
html body > immersive-translate-popup,
html body > [id^="immersive-translate"],
html body > [class*="immersive-translate"],
html body > [id*="translate"][aria-label*="翻译"],
html body > [class*="translate"][aria-label*="翻译"],
html body > [id*="translator"][aria-label*="翻译"],
html body > [class*="translator"][aria-label*="翻译"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[style*="top:"] {
  top: 0 !important;
}


/* source: v125-v1-closure-path.css */
/* HardAsk V1.0 · one complete growth path */

.v1-closure-journey {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.8fr) auto;
  align-items: center;
  gap: 20px;
  margin: 18px 0 22px;
  padding: 18px 20px;
  border: 1px solid rgba(99, 102, 241, .16);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 34px rgba(30, 41, 59, .07);
}

/*
 * The V7.1 four-region home lock hides every unlisted direct child with an
 * ID-specific selector. Keep the V1 path as the single full-width hand-off
 * between the user-state hero and the daily action cards.
 */
:is(#hw-v126-v1-path, html) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > #v1ClosureJourney.v1-closure-journey {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.v1-closure-journey__summary span,
.v1-training-closure-result__copy > span {
  color: #6d5dfc;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
}

.v1-closure-journey__summary strong {
  display: block;
  margin-top: 5px;
  color: #172033;
  font-size: 18px;
}

.v1-closure-journey__summary p {
  margin: 5px 0 0;
  color: #718096;
  font-size: 12px;
}

.v1-closure-journey__track {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
}

.v1-closure-journey__step {
  position: relative;
  min-width: 0;
  text-align: center;
}

.v1-closure-journey__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(50% + 12px);
  width: calc(100% - 18px);
  height: 2px;
  background: #e7eaf2;
}

.v1-closure-journey__step i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: #edf0f6;
  color: #8a94a8;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.v1-closure-journey__step span {
  display: block;
  overflow: hidden;
  color: #8a94a8;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v1-closure-journey__step.is-done i,
.v1-closure-journey__step.is-done:not(:last-child)::after {
  background: #22c55e;
  color: #fff;
}

.v1-closure-journey__step.is-done span {
  color: #3f4b60;
}

.v1-closure-journey__step.is-current i {
  background: linear-gradient(135deg, #3b82f6, #8b3dff);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(99, 102, 241, .12);
}

.v1-closure-journey__step.is-current span {
  color: #5b4ee5;
  font-weight: 850;
}

.v1-closure-journey__action {
  min-width: 126px;
  white-space: nowrap;
}

.onboarding-card {
  width: min(880px, calc(100vw - 32px)) !important;
  max-height: min(820px, calc(100vh - 32px));
  overflow: auto;
}

.onboarding-assessment-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.onboarding-assessment-title h4 {
  margin-bottom: 0;
}

.onboarding-assessment-title p {
  display: grid;
  gap: 2px;
  margin: 0;
  text-align: right;
}

.onboarding-assessment-title p strong {
  color: #6757f2;
  font-size: 16px;
}

.onboarding-assessment-title p span {
  color: #7b879c;
  font-size: 11px;
}

.onboarding-assessment-list {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.onboarding-assessment-item {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(0, 1.7fr);
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #e5e8f0;
  border-radius: 15px;
  background: #fbfcff;
}

.onboarding-assessment-item > div:first-child strong {
  display: block;
  color: #1c2638;
  font-size: 14px;
}

.onboarding-assessment-item > div:first-child span {
  display: block;
  margin-top: 3px;
  color: #7c879a;
  font-size: 11px;
}

.onboarding-assessment-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.onboarding-assessment-options button {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #dfe3ec;
  border-radius: 10px;
  background: #fff;
  color: #536077;
  font-size: 11px;
  font-weight: 750;
}

.onboarding-assessment-options button.is-selected {
  border-color: #7462f6;
  background: rgba(109, 93, 252, .09);
  color: #5c4ce0;
  box-shadow: 0 0 0 2px rgba(109, 93, 252, .08);
}

.onboarding-assessment-result {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  margin: 14px 0;
}

.onboarding-assessment-result > div,
.onboarding-assessment-result > p {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid #e2e6f0;
  border-radius: 14px;
  background: #f8f9fd;
}

.onboarding-assessment-result span,
.onboarding-assessment-result em {
  color: #7a8699;
  font-size: 11px;
  font-style: normal;
}

.onboarding-assessment-result strong {
  color: #20293a;
  font-size: 15px;
}

.onboarding-route-step .onboarding-route-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.v1-training-closure-result {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr auto;
  align-items: center;
  gap: 20px;
  margin: 0 0 18px;
  padding: 20px 22px;
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(240, 253, 244, .98), rgba(245, 247, 255, .98));
  box-shadow: 0 14px 34px rgba(22, 101, 52, .08);
}

.v1-training-closure-result[hidden] {
  display: none !important;
}

.v1-training-closure-result__copy strong {
  display: block;
  margin-top: 6px;
  color: #172033;
  font-size: 19px;
}

.v1-training-closure-result__copy p {
  margin: 5px 0 0;
  color: #637087;
  font-size: 12px;
}

.v1-training-closure-result__proofs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.v1-training-closure-result__proofs span {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 12px;
  background: rgba(255, 255, 255, .74);
  color: #718096;
  font-size: 10px;
}

.v1-training-closure-result__proofs strong {
  color: #213047;
  font-size: 13px;
}

html[data-theme="dark"] .v1-closure-journey,
html[data-theme="dark"] .v1-training-closure-result,
html[data-theme="dark"] .onboarding-assessment-item,
html[data-theme="dark"] .onboarding-assessment-options button,
html[data-theme="dark"] .onboarding-assessment-result > div,
html[data-theme="dark"] .onboarding-assessment-result > p {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .9);
}

html[data-theme="dark"] .v1-closure-journey__summary strong,
html[data-theme="dark"] .v1-training-closure-result__copy strong,
html[data-theme="dark"] .onboarding-assessment-item strong,
html[data-theme="dark"] .onboarding-assessment-result strong,
html[data-theme="dark"] .v1-training-closure-result__proofs strong {
  color: #f6f8ff;
}

@media (max-width: 1100px) {
  .v1-closure-journey {
    grid-template-columns: 1fr auto;
  }

  .v1-closure-journey__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 760px) {
  .v1-closure-journey,
  .v1-training-closure-result {
    grid-template-columns: 1fr;
  }

  .v1-closure-journey__track {
    grid-template-columns: repeat(5, 1fr);
    row-gap: 14px;
  }

  .v1-closure-journey__step::after {
    display: none;
  }

  .onboarding-assessment-item,
  .onboarding-assessment-result {
    grid-template-columns: 1fr;
  }

  .onboarding-route-step .onboarding-route-list {
    grid-template-columns: 1fr;
  }
}


/* source: v127-home-final.css */
/* HardAsk V1.0 · final homepage hierarchy */

:is(#hw-v127-home-final, html):not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > article.landing-action-plan {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  gap: 16px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.landing-final-goal-card,
.landing-final-ai-plan,
.landing-final-growth-feedback {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 38px rgba(30, 41, 59, .07);
}

.landing-final-goal-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 356px;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 94% 0%, rgba(124, 58, 237, .14), transparent 38%),
    linear-gradient(145deg, #f8fbff 0%, #f5f3ff 100%);
}

.landing-final-goal-card::after {
  content: "";
  position: absolute;
  right: -82px;
  bottom: -118px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(99, 102, 241, .1);
  border-radius: 50%;
  pointer-events: none;
}

.landing-final-welcome {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
}

:is(#hw-v127-home-final, html):not(.react-student-embedded) body[data-active-panel="landing"] .landing-final-welcome .landing-action-avatar {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  border-radius: 15px !important;
}

.landing-final-welcome > div:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.landing-final-welcome .eyebrow,
.landing-final-ai-plan .eyebrow {
  margin: 0;
  color: #6657ee;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
}

:is(#hw-v127-home-final, html):not(.react-student-embedded) body[data-active-panel="landing"] .landing-final-welcome .landing-greeting-line {
  margin: 0 !important;
  color: #172033 !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 880 !important;
  line-height: 1.2 !important;
}

.landing-final-welcome > div:last-child > span {
  color: #7b879c;
  font-size: 11px;
  font-weight: 650;
}

.landing-final-target-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 10px;
}

.landing-final-target-role,
.landing-final-target-match,
.landing-final-target-gaps {
  display: grid;
  gap: 6px;
  padding: 14px 15px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 15px;
  background: rgba(255, 255, 255, .76);
}

.landing-final-target-role > span,
.landing-final-target-match > span,
.landing-final-target-gaps > span {
  color: #7c879a;
  font-size: 10px;
  font-weight: 750;
}

.landing-final-target-role > strong {
  color: #172033;
  font-size: 16px;
  font-weight: 880;
  line-height: 1.35;
}

.landing-final-target-match {
  place-content: center;
  text-align: center;
}

.landing-final-target-match > strong {
  color: #5b4ee5;
  font-size: 28px;
  font-weight: 920;
  line-height: 1;
}

.landing-final-target-match > strong small {
  font-size: 13px;
}

.landing-final-target-gaps {
  grid-column: 1 / -1;
}

.landing-final-target-gaps > span b {
  color: #e45467;
  font-size: 13px;
}

.landing-final-target-gaps > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.landing-final-target-gaps em {
  padding: 6px 9px;
  color: #38465c;
  border: 1px solid rgba(99, 102, 241, .13);
  border-radius: 9px;
  background: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

:is(#hw-v127-home-final, html):not(.react-student-embedded) body[data-active-panel="landing"] .landing-final-goal-card > #landingStartInterviewBtn.landing-final-goal-action {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 58px !important;
  margin-top: auto !important;
  padding: 9px 12px 9px 16px !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #397cf4, #7447ed) !important;
  box-shadow: 0 13px 26px rgba(91, 78, 229, .24) !important;
  text-align: left !important;
}

.landing-final-goal-action > span {
  grid-column: 1;
  font-size: 16px;
  font-weight: 900;
}

.landing-final-goal-action > small {
  grid-column: 1;
  color: rgba(255, 255, 255, .76);
  font-size: 10px;
  font-weight: 650;
}

.landing-final-goal-action > i {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .16);
  font-size: 18px;
  font-style: normal;
}

.landing-final-ai-plan {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 356px;
  padding: 24px;
}

.landing-final-ai-plan > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.landing-final-ai-plan > header h2 {
  margin: 3px 0 0;
  color: #172033;
  font-size: 21px;
  font-weight: 880;
}

.landing-final-ai-plan > header > span {
  padding: 6px 9px;
  color: #6657ee;
  border-radius: 999px;
  background: #f0eeff;
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.landing-final-primary-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 13px 16px;
  padding: 18px;
  border: 1px solid rgba(99, 102, 241, .2);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(238, 242, 255, .95), rgba(250, 245, 255, .95));
}

.landing-final-task-title,
.landing-final-task-reason {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.landing-final-task-title > span,
.landing-final-task-reason > span {
  color: #7164ec;
  font-size: 10px;
  font-weight: 820;
}

.landing-final-task-title h3 {
  margin: 0;
  color: #172033;
  font-size: 22px;
  font-weight: 900;
}

.landing-final-task-reason {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border-left: 3px solid #8b5cf6;
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, .65);
}

.landing-final-task-reason strong {
  color: #3e4b60;
  font-size: 12px;
  font-weight: 740;
}

.landing-final-task-metrics {
  display: flex;
  gap: 8px;
}

.landing-final-task-metrics > span {
  display: grid;
  min-width: 86px;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, .17);
  border-radius: 11px;
  background: rgba(255, 255, 255, .78);
}

.landing-final-task-metrics small {
  color: #8993a5;
  font-size: 9px;
  font-weight: 700;
}

.landing-final-task-metrics strong {
  color: #27344a;
  font-size: 13px;
  font-weight: 850;
}

.landing-final-task-metrics > span:last-child strong {
  color: #0b9b6d;
}

.landing-final-task-start {
  align-self: end;
  min-width: 116px;
  min-height: 42px;
  padding: 0 14px;
  color: #fff;
  border: 0;
  border-radius: 12px;
  background: #5b4ee5;
  box-shadow: 0 9px 20px rgba(91, 78, 229, .2);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.landing-final-task-start i {
  margin-left: 8px;
  font-style: normal;
}

.landing-final-secondary-tasks {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 13px;
  background: #fbfcff;
}

.landing-final-secondary-tasks > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 13px;
  color: #7b879b;
  list-style: none;
  cursor: pointer;
}

.landing-final-secondary-tasks > summary::-webkit-details-marker {
  display: none;
}

.landing-final-secondary-tasks > summary span {
  color: #4a5870;
  font-size: 11px;
  font-weight: 820;
}

.landing-final-secondary-tasks > summary strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-final-secondary-tasks > summary i {
  font-style: normal;
  transition: transform 160ms ease;
}

.landing-final-secondary-tasks[open] > summary i {
  transform: rotate(180deg);
}

.landing-final-secondary-tasks > div {
  display: grid;
  gap: 7px;
  padding: 0 12px 12px;
}

.landing-final-secondary-tasks article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 9px;
  background: #fff;
}

.landing-final-secondary-tasks article span,
.landing-final-secondary-tasks article em {
  color: #8a95a8;
  font-size: 10px;
  font-style: normal;
  font-weight: 730;
}

.landing-final-secondary-tasks article strong {
  color: #3a475d;
  font-size: 11px;
  font-weight: 760;
}

.landing-final-growth-feedback {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 1.05fr) .55fr minmax(300px, 1.25fr) .45fr;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
}

.landing-final-growth-feedback > header {
  display: grid;
  gap: 3px;
}

.landing-final-growth-feedback > header span,
.landing-final-streak > span,
.landing-final-ability-gain > span {
  color: #7e899b;
  font-size: 10px;
  font-weight: 740;
}

.landing-final-growth-feedback > header strong {
  color: #263247;
  font-size: 13px;
  font-weight: 830;
}

.landing-final-streak,
.landing-final-ability-gain {
  display: grid;
  gap: 3px;
  min-height: 48px;
  padding: 7px 12px;
  border-left: 1px solid rgba(148, 163, 184, .18);
}

.landing-final-streak > strong {
  color: #e96538;
  font-size: 17px;
  font-weight: 900;
}

.landing-final-streak b {
  color: #27344a;
}

.landing-final-weekly-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.landing-final-weekly-stats > span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 11px;
  background: #f6f8fc;
}

.landing-final-weekly-stats small {
  color: #8993a5;
  font-size: 9px;
  font-weight: 680;
}

.landing-final-weekly-stats strong {
  color: #344157;
  font-size: 13px;
  font-weight: 850;
}

.landing-final-ability-gain > strong {
  color: #0aa276;
  font-size: 23px;
  font-weight: 920;
}

html[data-theme="dark"] .landing-final-goal-card,
html[data-theme="dark"] .landing-final-ai-plan,
html[data-theme="dark"] .landing-final-growth-feedback {
  color: #eef4ff;
  border-color: rgba(148, 163, 184, .17);
  background: linear-gradient(145deg, #142033, #0e1827);
}

html[data-theme="dark"] .landing-final-target-role,
html[data-theme="dark"] .landing-final-target-match,
html[data-theme="dark"] .landing-final-target-gaps,
html[data-theme="dark"] .landing-final-primary-task,
html[data-theme="dark"] .landing-final-secondary-tasks,
html[data-theme="dark"] .landing-final-secondary-tasks article,
html[data-theme="dark"] .landing-final-weekly-stats > span {
  color: #eaf1ff;
  border-color: rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .74);
}

html[data-theme="dark"] :is(.landing-final-welcome .landing-greeting-line, .landing-final-target-role > strong, .landing-final-ai-plan > header h2, .landing-final-task-title h3, .landing-final-growth-feedback > header strong, .landing-final-weekly-stats strong, .landing-final-streak b) {
  color: #f4f7ff !important;
}

@media (max-width: 1050px) {
  :is(#hw-v127-home-final, html):not(.react-student-embedded) body[data-active-panel="landing"] .shell .main.main > section.panel.active.landing-workspace > .landing-home-grid > article.landing-action-plan {
    grid-template-columns: 1fr !important;
  }

  .landing-final-goal-card,
  .landing-final-ai-plan {
    min-height: 0;
  }

  .landing-final-growth-feedback {
    grid-template-columns: 1fr .55fr 1.35fr .45fr;
  }
}

@media (max-width: 760px) {
  .landing-final-goal-card,
  .landing-final-ai-plan {
    padding: 18px;
    border-radius: 18px;
  }

  .landing-final-primary-task {
    grid-template-columns: 1fr;
  }

  .landing-final-task-start {
    width: 100%;
  }

  .landing-final-growth-feedback {
    grid-template-columns: 1fr 1fr;
  }

  .landing-final-growth-feedback > header,
  .landing-final-weekly-stats {
    grid-column: 1 / -1;
  }

  .landing-final-streak {
    border-left: 0;
  }
}

@media (max-width: 480px) {
  .landing-final-target-grid,
  .landing-final-growth-feedback {
    grid-template-columns: 1fr;
  }

  .landing-final-target-gaps,
  .landing-final-growth-feedback > header,
  .landing-final-weekly-stats {
    grid-column: 1;
  }

  .landing-final-weekly-stats {
    grid-template-columns: 1fr;
  }

  .landing-final-streak,
  .landing-final-ability-gain {
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, .18);
  }
}


/* source: v128-new-user-onboarding.css */
/* HardAsk V1.0 · first-login AI engineering assessment */

html:not(.react-student-embedded) .onboarding-backdrop {
  background:
    radial-gradient(circle at 50% 6%, rgba(91, 78, 229, .14), transparent 34%),
    linear-gradient(145deg, #edf3fb 0%, #f7f4ff 52%, #eef4fa 100%) !important;
  backdrop-filter: none !important;
}

html:not(.react-student-embedded) .onboarding-card {
  gap: 18px !important;
  width: min(920px, calc(100vw - 36px)) !important;
  max-width: 920px !important;
  max-height: min(850px, calc(100vh - 32px)) !important;
  padding: 26px 28px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 34px 96px rgba(2, 8, 23, .38) !important;
}

html:not(.react-student-embedded) .onboarding-head .eyebrow {
  color: #6757ed !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

html:not(.react-student-embedded) .onboarding-head h3 {
  color: #172033 !important;
  font-size: 26px !important;
  font-weight: 900 !important;
}

html:not(.react-student-embedded) #onboardingStepLabel {
  color: #5b4ee5 !important;
  background: #f0eeff !important;
}

html:not(.react-student-embedded) .onboarding-progress {
  height: 5px !important;
  background: #edf0f5 !important;
}

html:not(.react-student-embedded) .onboarding-progress i {
  background: linear-gradient(90deg, #3980f4, #7d45ee) !important;
}

html:not(.react-student-embedded) #onboardingModal[data-step="1"] .onboarding-progress i { width: 25% !important; }
html:not(.react-student-embedded) #onboardingModal[data-step="2"] .onboarding-progress i { width: 50% !important; }
html:not(.react-student-embedded) #onboardingModal[data-step="3"] .onboarding-progress i { width: 75% !important; }
html:not(.react-student-embedded) #onboardingModal[data-step="4"] .onboarding-progress i { width: 100% !important; }

html:not(.react-student-embedded) .onboarding-step {
  gap: 12px !important;
}

html:not(.react-student-embedded) .onboarding-kicker {
  color: #6657ed !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
}

html:not(.react-student-embedded) .onboarding-step h4 {
  color: #172033 !important;
  font-size: 23px !important;
  font-weight: 900 !important;
}

.onboarding-step-lead {
  margin: -4px 0 4px;
  color: #7b8799;
  font-size: 12px;
  line-height: 1.55;
}

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

html:not(.react-student-embedded) .onboarding-direction-grid > button {
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 92px !important;
  padding: 16px 18px !important;
  border-color: #e4e8f0 !important;
  border-radius: 16px !important;
  background: #fbfcff !important;
}

.onboarding-direction-grid > button > i {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid #b9c1cf;
  border-radius: 50%;
}

.onboarding-direction-grid > button > i::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: transparent;
}

.onboarding-direction-grid > button > span {
  display: grid;
  gap: 5px;
}

html:not(.react-student-embedded) .onboarding-direction-grid > button b {
  color: #253147 !important;
  font-size: 15px !important;
  font-weight: 860 !important;
}

html:not(.react-student-embedded) .onboarding-direction-grid > button em {
  color: #8490a4 !important;
  font-size: 11px !important;
}

html:not(.react-student-embedded) .onboarding-direction-grid > button:hover,
html:not(.react-student-embedded) .onboarding-direction-grid > button.is-selected {
  border-color: rgba(91, 78, 229, .55) !important;
  background: linear-gradient(135deg, #f4f7ff, #f7f2ff) !important;
  box-shadow: 0 0 0 3px rgba(91, 78, 229, .09) !important;
}

.onboarding-direction-grid > button.is-selected > i {
  border-color: #5b4ee5;
}

.onboarding-direction-grid > button.is-selected > i::after {
  background: #5b4ee5;
}

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

.onboarding-experience-grid > button {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 154px;
  padding: 18px;
  color: #253147;
  border: 1px solid #e3e8f0;
  border-radius: 17px;
  background: #fbfcff;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.onboarding-experience-grid > button:hover,
.onboarding-experience-grid > button.is-selected {
  border-color: rgba(91, 78, 229, .56);
  background: linear-gradient(145deg, #f5f8ff, #f8f3ff);
  box-shadow: 0 0 0 3px rgba(91, 78, 229, .09), 0 12px 24px rgba(55, 65, 81, .06);
  transform: translateY(-2px);
}

.onboarding-experience-grid > button i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #6a5bea;
  border-radius: 11px;
  background: #efedff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.onboarding-experience-grid > button b {
  font-size: 17px;
  font-weight: 880;
}

.onboarding-experience-grid > button em {
  color: #818da1;
  font-size: 11px;
  font-style: normal;
  line-height: 1.55;
}

.onboarding-assessment-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  color: #657287;
  border: 1px solid #e5e9f1;
  border-radius: 12px;
  background: #f8faff;
  font-size: 11px;
  font-weight: 760;
}

.onboarding-assessment-status strong {
  color: #6556e9;
  font-size: 10px;
}

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

.onboarding-assessment-item {
  display: grid;
  grid-template-columns: minmax(190px, .9fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid #e5e9f1;
  border-radius: 14px;
  background: #fbfcff;
}

.onboarding-assessment-item > div:first-child {
  display: grid;
  gap: 3px;
}

.onboarding-assessment-item > div:first-child strong {
  color: #263247;
  font-size: 12px;
  font-weight: 880;
}

.onboarding-assessment-item > div:first-child span {
  color: #8793a5;
  font-size: 9px;
}

.onboarding-assessment-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.onboarding-assessment-options > button {
  min-width: 0;
  min-height: 36px;
  padding: 7px 8px;
  color: #667389;
  border: 1px solid #dde3ed;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 9px;
  font-weight: 760;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.onboarding-assessment-options > button:hover,
.onboarding-assessment-options > button.is-selected {
  color: #5546dc;
  border-color: rgba(91, 78, 229, .5);
  background: #f1efff;
  box-shadow: 0 0 0 2px rgba(91, 78, 229, .08);
}

.onboarding-profile-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.onboarding-profile-title > div {
  display: grid;
  gap: 4px;
}

.onboarding-ai-ready {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #0b936b;
  border-radius: 999px;
  background: #eafaf4;
  font-size: 10px;
  font-weight: 800;
}

.onboarding-ai-ready i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14b885;
  box-shadow: 0 0 0 4px rgba(20, 184, 133, .12);
}

.onboarding-profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: stretch;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, .22);
  border-radius: 19px;
  background:
    radial-gradient(circle at 90% 5%, rgba(147, 197, 253, .26), transparent 34%),
    linear-gradient(125deg, #eef4ff, #f5efff);
}

.onboarding-profile-identity {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 5px 10px;
}

.onboarding-profile-identity > span {
  color: #5d51d8;
  font-size: 11px;
  font-weight: 820;
}

.onboarding-profile-identity > strong {
  color: #172033;
  font-size: 38px;
  font-weight: 940;
  line-height: 1;
}

.onboarding-profile-identity > em {
  color: #727f93;
  font-size: 10px;
  font-style: normal;
  font-weight: 680;
}

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

.onboarding-profile-diagnosis > span {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, .17);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
}

.onboarding-profile-diagnosis small {
  color: #7f8b9f;
  font-size: 10px;
  font-weight: 760;
}

.onboarding-profile-diagnosis strong {
  color: #263247;
  font-size: 16px;
  font-weight: 880;
}

.onboarding-profile-diagnosis > span:first-child strong {
  color: #0b9a70;
}

.onboarding-profile-diagnosis > span:last-child strong {
  color: #e35b67;
}

.onboarding-first-training-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  color: #fff;
  border: 1px solid rgba(77, 92, 255, .28);
  border-radius: 16px;
  background: linear-gradient(115deg, #285fe9, #6548ed 68%, #7b45e6);
  box-shadow: 0 13px 28px rgba(71, 75, 218, .2);
}

.onboarding-first-training-card > div {
  display: grid;
  gap: 3px;
}

.onboarding-first-training-card span {
  color: rgba(255, 255, 255, .76);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
}

.onboarding-first-training-card strong {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.onboarding-first-training-card em {
  color: rgba(255, 255, 255, .76);
  font-size: 9px;
  font-style: normal;
}

.onboarding-first-training-card > b {
  flex: 0 0 auto;
  padding: 8px 10px;
  color: #e8efff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-size: 9px;
  font-weight: 800;
}

.onboarding-seven-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.onboarding-seven-day-head > span {
  color: #27344a;
  font-size: 14px;
  font-weight: 880;
}

.onboarding-seven-day-head > strong {
  color: #7d8798;
  font-size: 10px;
  font-weight: 720;
}

.onboarding-seven-day-plan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.onboarding-seven-day-plan article {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 94px;
  padding: 12px;
  border: 1px solid #e5e9f0;
  border-radius: 13px;
  background: #fbfcff;
}

.onboarding-seven-day-plan article.is-first {
  border-color: rgba(91, 78, 229, .3);
  background: linear-gradient(145deg, #f0f5ff, #f6f1ff);
}

.onboarding-seven-day-plan article > span {
  color: #6b5de7;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
}

.onboarding-seven-day-plan article > strong {
  color: #2a374d;
  font-size: 12px;
  font-weight: 860;
}

.onboarding-seven-day-plan article > em {
  color: #8290a5;
  font-size: 9px;
  font-style: normal;
  line-height: 1.45;
}

html:not(.react-student-embedded) .onboarding-actions {
  padding-top: 2px !important;
  border-top: 1px solid rgba(148, 163, 184, .14);
}

html:not(.react-student-embedded) #onboardingNextBtn {
  min-width: 148px;
  min-height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3980f4, #7447ed);
  box-shadow: 0 10px 22px rgba(91, 78, 229, .2);
}

html[data-theme="dark"] .onboarding-card {
  color: #eef4ff !important;
  border-color: rgba(148, 163, 184, .18) !important;
  background: #111b2b !important;
}

html[data-theme="dark"] .onboarding-backdrop {
  background:
    radial-gradient(circle at 50% 6%, rgba(99, 102, 241, .2), transparent 34%),
    linear-gradient(145deg, #080f1d 0%, #111329 52%, #0b1422 100%) !important;
}

html[data-theme="dark"] :is(.onboarding-head h3, .onboarding-step h4, .onboarding-direction-grid > button b, .onboarding-experience-grid > button b, .onboarding-assessment-item > div:first-child strong, .onboarding-profile-identity > strong, .onboarding-profile-diagnosis strong, .onboarding-seven-day-head > span, .onboarding-seven-day-plan article > strong) {
  color: #f3f7ff !important;
}

html[data-theme="dark"] :is(.onboarding-direction-grid > button, .onboarding-experience-grid > button, .onboarding-assessment-status, .onboarding-assessment-item, .onboarding-assessment-options > button, .onboarding-seven-day-plan article) {
  color: #eef4ff;
  border-color: rgba(148, 163, 184, .17) !important;
  background: rgba(15, 23, 42, .78) !important;
}

html[data-theme="dark"] .onboarding-profile-hero {
  border-color: rgba(129, 140, 248, .22);
  background: linear-gradient(135deg, #17243a, #211d3c);
}

html[data-theme="dark"] .onboarding-profile-diagnosis > span {
  border-color: rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .7);
}

@media (max-width: 760px) {
  html:not(.react-student-embedded) .onboarding-card {
    padding: 20px !important;
  }

  html:not(.react-student-embedded) .onboarding-direction-grid,
  .onboarding-experience-grid,
  .onboarding-assessment-item,
  .onboarding-profile-hero {
    grid-template-columns: 1fr !important;
  }

  .onboarding-experience-grid > button {
    min-height: 112px;
  }

  .onboarding-seven-day-plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .onboarding-first-training-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .onboarding-profile-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .onboarding-profile-diagnosis,
  .onboarding-seven-day-plan {
    grid-template-columns: 1fr;
  }

}


/* source: v131-ai-engineering-coach-final.css */
/* HardAsk V1.0 · 小问 AI工程教练最终定位 */

html:not(.react-student-embedded) .xiaowen-coach-workbench[data-panel="ai-coach-legacy"] {
  display: none !important;
}

html:not(.react-student-embedded) .xiaowen-final-coach {
  --coach-ink: #172033;
  --coach-muted: #748196;
  --coach-line: #e4e9f1;
  --coach-purple: #6757ed;
  --coach-blue: #347df2;
  --coach-green: #0c9a72;
  --coach-red: #e45d67;
  display: grid !important;
  gap: 16px;
  padding-bottom: 32px;
}

html:not(.react-student-embedded) .xiaowen-final-coach:not(.active) {
  display: none !important;
}

.xiaowen-final-coach__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  min-height: 178px;
  padding: 30px 34px !important;
  overflow: hidden;
  border-color: rgba(103, 87, 237, .2) !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(126, 167, 255, .24), transparent 32%),
    linear-gradient(128deg, #f7faff 0%, #f7f3ff 58%, #eef5ff 100%) !important;
}

.xiaowen-final-coach__hero::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #347df2, #7b48ef, #42c8a2);
}

.xiaowen-final-coach__identity {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.xiaowen-final-coach__mark {
  display: grid;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  background: linear-gradient(145deg, #377ff2, #7848ed);
  box-shadow: 0 16px 34px rgba(91, 78, 229, .25);
  font-size: 27px;
  font-weight: 950;
}

.xiaowen-final-coach__identity > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.xiaowen-final-coach__identity .eyebrow {
  margin: 0;
  color: var(--coach-purple) !important;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: .14em;
}

.xiaowen-final-coach__identity h1 {
  margin: 0;
  color: var(--coach-ink);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 930;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.xiaowen-final-coach__identity p:last-child {
  max-width: 720px;
  margin: 0;
  color: #68768c;
  font-size: 13px;
  font-weight: 620;
  line-height: 1.7;
}

.xiaowen-final-coach__status {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 190px;
  gap: 5px;
  padding: 18px 20px;
  border: 1px solid rgba(103, 87, 237, .16);
  border-radius: 17px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 14px 30px rgba(52, 65, 92, .07);
}

.xiaowen-final-coach__status > span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--coach-green);
  font-size: 10px;
  font-weight: 850;
}

.xiaowen-final-coach__status > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16b889;
  box-shadow: 0 0 0 4px rgba(22, 184, 137, .12);
}

.xiaowen-final-coach__status small {
  color: var(--coach-muted);
  font-size: 10px;
  font-weight: 730;
}

.xiaowen-final-coach__status strong {
  color: var(--coach-ink);
  font-size: 16px;
  font-weight: 880;
}

.xiaowen-final-coach__scope {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  padding: 13px 22px;
  border: 1px solid var(--coach-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 25px rgba(40, 51, 74, .04);
}

.xiaowen-final-coach__scope span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #37445a;
  font-size: 12px;
  font-weight: 820;
}

.xiaowen-final-coach__scope b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--coach-purple);
  border-radius: 8px;
  background: #efedff;
  font-size: 9px;
}

.xiaowen-final-coach__scope > i {
  color: #b7c0cf;
  font-size: 12px;
  font-style: normal;
}

.xiaowen-final-coach__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.xiaowen-final-coach__card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 470px;
  flex-direction: column;
  gap: 16px;
  padding: 22px !important;
  overflow: hidden;
  border-color: var(--coach-line) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 16px 36px rgba(34, 44, 67, .07) !important;
}

.xiaowen-final-coach__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #347df2, #7850ed);
}

.xiaowen-final-coach__card.is-guidance::before {
  background: linear-gradient(90deg, #e96873, #f19b55);
}

.xiaowen-final-coach__card.is-summary::before {
  background: linear-gradient(90deg, #14aa7d, #48c9aa);
}

.xiaowen-final-coach__card > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.xiaowen-final-coach__step {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  border-radius: 11px;
  background: linear-gradient(145deg, #347df2, #7450ea);
  font-size: 10px;
  font-weight: 900;
}

.is-guidance .xiaowen-final-coach__step {
  background: linear-gradient(145deg, #e7606d, #ee9651);
}

.is-summary .xiaowen-final-coach__step {
  background: linear-gradient(145deg, #0fa67a, #43c5a5);
}

.xiaowen-final-coach__card > header div {
  display: grid;
  gap: 2px;
}

.xiaowen-final-coach__card > header p {
  margin: 0;
  color: #9aa4b4;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.xiaowen-final-coach__card > header h2 {
  margin: 0;
  color: var(--coach-ink);
  font-size: 19px;
  font-weight: 900;
}

.xiaowen-final-coach__card > header em {
  padding: 6px 8px;
  color: #6c5ee5;
  border-radius: 999px;
  background: #f0eeff;
  font-size: 8px;
  font-style: normal;
  font-weight: 820;
  white-space: nowrap;
}

.is-guidance > header em {
  color: #d75461;
  background: #fff0f1;
}

.is-summary > header em {
  color: #0a936c;
  background: #eaf9f4;
}

.xiaowen-final-coach__finding,
.xiaowen-final-coach__result,
.xiaowen-final-coach__confirmed,
.xiaowen-final-coach__warning,
.xiaowen-final-coach__growth,
.xiaowen-final-coach__summary-list {
  border: 1px solid #e6eaf1;
  border-radius: 15px;
  background: #fbfcff;
}

.xiaowen-final-coach__finding,
.xiaowen-final-coach__result,
.xiaowen-final-coach__confirmed,
.xiaowen-final-coach__warning,
.xiaowen-final-coach__growth {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.xiaowen-final-coach__card section > small,
.xiaowen-final-coach__summary-list dt {
  color: var(--coach-muted);
  font-size: 9px;
  font-weight: 800;
}

.xiaowen-final-coach__finding > strong,
.xiaowen-final-coach__confirmed > strong,
.xiaowen-final-coach__warning > strong {
  color: var(--coach-ink);
  font-size: 17px;
  font-weight: 890;
}

.xiaowen-final-coach__finding > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.xiaowen-final-coach__finding > div > i {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9edf4;
}

.xiaowen-final-coach__finding > div > i b {
  display: block;
  width: var(--coach-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #347df2, #7650ed);
}

.xiaowen-final-coach__finding > div span {
  color: #6d5fe4;
  font-size: 9px;
  font-weight: 820;
}

.xiaowen-final-coach__result {
  flex: 1;
  align-content: start;
  background: linear-gradient(145deg, #f4f7ff, #f8f4ff);
}

.xiaowen-final-coach__result > div,
.xiaowen-final-coach__growth > div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.xiaowen-final-coach__result > div > strong,
.xiaowen-final-coach__growth > div > strong {
  color: var(--coach-ink);
  font-size: 19px;
  font-weight: 900;
}

.xiaowen-final-coach__result > div > b {
  color: var(--coach-purple);
  font-size: 31px;
  font-weight: 930;
  line-height: 1;
}

.xiaowen-final-coach__result > div > b em {
  margin-left: 3px;
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
}

.xiaowen-final-coach__result p,
.xiaowen-final-coach__warning p {
  margin: 0;
  color: #748096;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.6;
}

.xiaowen-final-coach__confirmed {
  background: #eefaf6;
  border-color: #d6f0e7;
}

.xiaowen-final-coach__confirmed strong {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xiaowen-final-coach__confirmed strong i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #13a77b;
  font-size: 10px;
  font-style: normal;
}

.xiaowen-final-coach__warning {
  flex: 1;
  align-content: start;
  border-color: #f1dfe1;
  background: #fff9f9;
}

.xiaowen-final-coach__warning > strong {
  color: #d64d5a;
}

.xiaowen-final-coach__warning ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xiaowen-final-coach__warning li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #eee5e6;
  border-radius: 10px;
  background: #fff;
}

.xiaowen-final-coach__warning li b {
  color: #d95763;
  font-size: 8px;
}

.xiaowen-final-coach__warning li span {
  color: #354156;
  font-size: 10px;
  font-weight: 770;
}

.xiaowen-final-coach__growth {
  border-color: #d9efe8;
  background: linear-gradient(145deg, #eefaf6, #f5fbf9);
}

.xiaowen-final-coach__growth > div > b {
  color: #0b9a71;
  font-size: 34px;
  font-weight: 930;
  line-height: 1;
}

.xiaowen-final-coach__summary-list {
  display: grid;
  flex: 1;
  align-content: start;
  margin: 0;
  overflow: hidden;
}

.xiaowen-final-coach__summary-list > div {
  display: grid;
  gap: 6px;
  padding: 16px;
}

.xiaowen-final-coach__summary-list > div + div {
  border-top: 1px solid #e6eaf1;
}

.xiaowen-final-coach__summary-list dd {
  margin: 0;
  color: var(--coach-ink);
  font-size: 15px;
  font-weight: 860;
}

.xiaowen-final-coach__card > .primary-btn {
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  border-radius: 12px;
  background: linear-gradient(135deg, #347df2, #7449ed);
  box-shadow: 0 10px 20px rgba(91, 78, 229, .17);
}

.xiaowen-final-coach__card.is-guidance > .primary-btn {
  background: linear-gradient(135deg, #df5967, #ed8d51);
  box-shadow: 0 10px 20px rgba(224, 89, 103, .16);
}

.xiaowen-final-coach__card.is-summary > .primary-btn {
  background: linear-gradient(135deg, #0d9f75, #38b996);
  box-shadow: 0 10px 20px rgba(13, 159, 117, .16);
}

html[data-theme="dark"] .xiaowen-final-coach {
  --coach-ink: #f2f6ff;
  --coach-muted: #96a4b9;
  --coach-line: rgba(148, 163, 184, .16);
}

html[data-theme="dark"] .xiaowen-final-coach__hero {
  border-color: rgba(129, 140, 248, .2) !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(79, 120, 219, .18), transparent 32%),
    linear-gradient(128deg, #111c2c 0%, #1b1935 58%, #122237 100%) !important;
}

html[data-theme="dark"] .xiaowen-final-coach__identity p:last-child,
html[data-theme="dark"] .xiaowen-final-coach__result p,
html[data-theme="dark"] .xiaowen-final-coach__warning p {
  color: #a4b0c2;
}

html[data-theme="dark"] .xiaowen-final-coach__status,
html[data-theme="dark"] .xiaowen-final-coach__scope,
html[data-theme="dark"] .xiaowen-final-coach__card {
  border-color: rgba(148, 163, 184, .16) !important;
  background: rgba(16, 25, 40, .96) !important;
}

html[data-theme="dark"] :is(.xiaowen-final-coach__finding, .xiaowen-final-coach__result, .xiaowen-final-coach__confirmed, .xiaowen-final-coach__warning, .xiaowen-final-coach__growth, .xiaowen-final-coach__summary-list) {
  border-color: rgba(148, 163, 184, .15);
  background: rgba(15, 23, 42, .72);
}

html[data-theme="dark"] .xiaowen-final-coach__warning li {
  border-color: rgba(148, 163, 184, .14);
  background: rgba(26, 35, 52, .92);
}

html[data-theme="dark"] .xiaowen-final-coach__warning li span,
html[data-theme="dark"] .xiaowen-final-coach__scope span {
  color: #dfe7f4;
}

@media (max-width: 1120px) {
  .xiaowen-final-coach__grid {
    grid-template-columns: 1fr;
  }

  .xiaowen-final-coach__card {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .xiaowen-final-coach__hero {
    grid-template-columns: 1fr;
    padding: 24px !important;
  }

  .xiaowen-final-coach__identity {
    align-items: flex-start;
  }

  .xiaowen-final-coach__mark {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    font-size: 21px;
  }

  .xiaowen-final-coach__status {
    min-width: 0;
  }

  .xiaowen-final-coach__scope {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .xiaowen-final-coach__scope > i {
    display: none;
  }

  .xiaowen-final-coach__scope span {
    justify-content: flex-start;
  }
}


/* source: v132-interview-final-modes.css */
/* HardAsk V1.0 · 模拟面试三模式最终版 */

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-meeting-active) .main.main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: start !important;
  width: 100% !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-meeting-active) .main.main > .topbar,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-meeting-active) .main.main > .panel[data-panel="interview"].active {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-meeting-active) .interview-space-shell {
  width: min(1120px, 100%) !important;
  max-width: none !important;
  margin: 0 auto !important;
}

html:not(.react-student-embedded) .interview-final-mode-card {
  display: grid;
  gap: 16px;
  padding: 22px 24px !important;
  border-color: rgba(90, 105, 132, .15) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 18px 46px rgba(35, 46, 69, .07) !important;
}

.interview-final-mode-card > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.interview-final-mode-card > header > div {
  display: grid;
  gap: 3px;
}

.interview-final-mode-card > header .eyebrow {
  margin: 0;
  color: #6657ed !important;
  font-size: 9px !important;
  font-weight: 900;
  letter-spacing: .14em;
}

.interview-final-mode-card > header h3 {
  margin: 0;
  color: #172033;
  font-size: 20px;
  font-weight: 900;
}

.interview-final-mode-card > header > span {
  color: #8490a3;
  font-size: 10px;
  font-weight: 700;
}

.interview-final-mode-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.interview-final-mode-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 78px;
  padding: 13px 14px;
  color: #27344a;
  border: 1px solid #e2e7ef;
  border-radius: 15px;
  background: #fbfcff;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.interview-final-mode-option:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 78, 229, .34);
  box-shadow: 0 10px 22px rgba(55, 65, 81, .07);
}

.interview-final-mode-option.is-active {
  border-color: rgba(91, 78, 229, .55);
  background: linear-gradient(145deg, #f3f7ff, #f7f2ff);
  box-shadow: 0 0 0 3px rgba(91, 78, 229, .08), 0 12px 24px rgba(55, 65, 81, .06);
}

.interview-final-mode-option[data-interview-final-mode="real"].is-active {
  border-color: rgba(33, 111, 224, .55);
  background: linear-gradient(145deg, #eef6ff, #f4f8ff);
  box-shadow: 0 0 0 3px rgba(33, 111, 224, .08), 0 12px 24px rgba(55, 65, 81, .06);
}

.interview-final-mode-option[data-interview-final-mode="pressure"].is-active {
  border-color: rgba(226, 83, 94, .55);
  background: linear-gradient(145deg, #fff3f4, #fff8f3);
  box-shadow: 0 0 0 3px rgba(226, 83, 94, .07), 0 12px 24px rgba(55, 65, 81, .06);
}

.interview-final-mode-option > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #6a5bea;
  border-radius: 11px;
  background: #efedff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.interview-final-mode-option[data-interview-final-mode="real"] > i {
  color: #2673d9;
  background: #eaf3ff;
}

.interview-final-mode-option[data-interview-final-mode="pressure"] > i {
  color: #db4f5b;
  background: #ffeaec;
}

.interview-final-mode-option > span {
  display: grid;
  gap: 4px;
}

.interview-final-mode-option strong {
  font-size: 14px;
  font-weight: 880;
}

.interview-final-mode-option small {
  color: #7f8b9e;
  font-size: 9px;
  font-weight: 650;
}

.interview-final-mode-option > em {
  padding: 5px 7px;
  color: #7669da;
  border-radius: 999px;
  background: rgba(238, 236, 255, .84);
  font-size: 8px;
  font-style: normal;
  font-weight: 830;
  white-space: nowrap;
}

.interview-final-mode-option[data-interview-final-mode="real"] > em {
  color: #2b70c8;
  background: #eaf3ff;
}

.interview-final-mode-option[data-interview-final-mode="pressure"] > em {
  color: #d24b58;
  background: #ffeaec;
}

.interview-final-mode-brief {
  min-height: 110px;
}

.interview-final-mode-brief > section {
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 20px;
  min-height: 110px;
  padding: 16px 18px;
  border: 1px solid rgba(103, 87, 237, .16);
  border-radius: 16px;
  background: linear-gradient(135deg, #f5f8ff, #f8f4ff);
}

.interview-final-mode-brief > section[hidden] {
  display: none !important;
}

.interview-final-mode-brief > section > div:first-child {
  display: grid;
  gap: 5px;
}

.interview-final-mode-brief > section > div:first-child span {
  color: #6a5bea;
  font-size: 9px;
  font-weight: 850;
}

.interview-final-mode-brief > section > div:first-child strong {
  color: #243147;
  font-size: 15px;
  font-weight: 880;
}

.interview-final-mode-brief ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.interview-final-mode-brief ol li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 45px;
  padding: 10px;
  color: #2d3a50;
  border: 1px solid #e2e7f0;
  border-radius: 11px;
  background: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 800;
}

.interview-final-mode-brief ol b {
  color: #6a5bea;
  font-size: 8px;
}

.interview-final-mode-brief [data-interview-mode-brief="real"] {
  border-color: rgba(33, 111, 224, .17);
  background: linear-gradient(135deg, #f0f6ff, #f8fbff);
}

.interview-final-mode-brief dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.interview-final-mode-brief dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 50px;
  padding: 11px 13px;
  border: 1px solid #dce7f5;
  border-radius: 11px;
  background: rgba(255, 255, 255, .84);
}

.interview-final-mode-brief dt {
  color: #66758b;
  font-size: 10px;
  font-weight: 760;
}

.interview-final-mode-brief dd {
  margin: 0;
  color: #236ccf;
  font-size: 21px;
  font-weight: 920;
}

.interview-final-mode-brief [data-interview-mode-brief="pressure"] {
  border-color: rgba(226, 83, 94, .17);
  background: linear-gradient(135deg, #fff3f4, #fff9f4);
}

.interview-pressure-example {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px !important;
}

.interview-pressure-example p {
  display: grid;
  gap: 4px;
  min-height: 50px;
  margin: 0;
  padding: 9px 11px;
  color: #39465a;
  border: 1px solid #f0dfe0;
  border-radius: 11px;
  background: rgba(255, 255, 255, .82);
  font-size: 9px;
  font-weight: 670;
  line-height: 1.45;
}

.interview-pressure-example b {
  color: #d44e5a;
  font-size: 8px;
}

html:not(.react-student-embedded) .interview-final-mode-start {
  justify-self: end;
  min-width: 210px;
  min-height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #347df2, #7448ed);
  box-shadow: 0 11px 22px rgba(91, 78, 229, .18);
}

.interview-final-active-mode {
  display: grid;
  min-width: 170px;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid rgba(91, 78, 229, .2);
  border-radius: 12px;
  background: linear-gradient(135deg, #f3f7ff, #f7f2ff);
}

.interview-final-active-mode > span {
  color: #7e899b;
  font-size: 8px;
  font-weight: 760;
}

.interview-final-active-mode > strong {
  color: #5f51df;
  font-size: 12px;
  font-weight: 890;
}

.interview-final-active-mode > em {
  color: #748095;
  font-size: 8px;
  font-style: normal;
  font-weight: 650;
}

.interview-practice-answer-guide {
  display: grid;
  gap: 9px;
  margin-top: 11px;
  padding: 12px 13px;
  border: 1px solid rgba(103, 87, 237, .2);
  border-radius: 13px;
  background: linear-gradient(135deg, #f4f7ff, #f8f3ff);
}

.interview-practice-answer-guide[hidden] {
  display: none !important;
}

.interview-practice-answer-guide > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.interview-practice-answer-guide > div span {
  padding: 4px 7px;
  color: #fff;
  border-radius: 7px;
  background: #6a5bea;
  font-size: 8px;
  font-weight: 850;
}

.interview-practice-answer-guide > div strong {
  color: #28354b;
  font-size: 10px;
  font-weight: 820;
}

.interview-practice-answer-guide ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.interview-practice-answer-guide li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  color: #344157;
  border: 1px solid #e1e6ee;
  border-radius: 9px;
  background: rgba(255, 255, 255, .85);
  font-size: 9px;
  font-weight: 760;
}

.interview-practice-answer-guide li b {
  color: #6a5bea;
  font-size: 7px;
}

.interview-pressure-chain {
  display: grid;
  gap: 10px;
  margin-top: 11px;
  padding: 13px;
  border: 1px solid rgba(218, 75, 87, .22);
  border-radius: 13px;
  background: linear-gradient(135deg, #fff4f5, #fff9f5);
}

.interview-pressure-chain[hidden] {
  display: none !important;
}

.interview-pressure-chain > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.interview-pressure-chain > header span {
  color: #d54d59;
  font-size: 10px;
  font-weight: 880;
}

.interview-pressure-chain > header strong {
  color: #8e5360;
  font-size: 8px;
  font-weight: 760;
}

#interviewPressureTranscript {
  display: grid;
  gap: 6px;
}

#interviewPressureTranscript p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 9px;
  line-height: 1.45;
}

#interviewPressureTranscript p[data-role="candidate"] {
  color: #39465a;
  background: rgba(255, 255, 255, .86);
}

#interviewPressureTranscript p[data-role="ai"] {
  color: #8d3f48;
  background: #ffe9eb;
}

#interviewPressureTranscript p b {
  font-size: 8px;
  white-space: nowrap;
}

.interview-final-score-panel {
  display: grid;
  gap: 13px;
  padding: 15px;
  border: 1px solid rgba(31, 108, 216, .2);
  border-radius: 14px;
  background: linear-gradient(145deg, #f0f6ff, #f8fbff);
}

.interview-final-score-panel[hidden] {
  display: none !important;
}

.interview-final-score-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.interview-final-score-panel > header span {
  color: #1f69c8;
  font-size: 11px;
  font-weight: 880;
}

.interview-final-score-panel > header em {
  color: #76859a;
  font-size: 8px;
  font-style: normal;
  font-weight: 680;
}

.interview-final-score-panel > div {
  display: grid;
  gap: 8px;
}

.interview-final-score-panel article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 10px;
  border: 1px solid #dfe8f4;
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
}

.interview-final-score-panel article span {
  color: #5c6b81;
  font-size: 9px;
  font-weight: 730;
}

.interview-final-score-panel article strong {
  color: #216bd0;
  font-size: 18px;
  font-weight: 920;
}

.interview-final-score-panel article > i {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3eaf4;
}

.interview-final-score-panel article > i b {
  display: block;
  width: var(--mode-score);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #347df2, #6757ed);
}

html:not(.react-student-embedded) body[data-interview-final-mode="real"] :is(#engineeringTrainingFlow, #interviewPracticeAnswerGuide, #interviewPressureChain, #xiaowenLiveInterviewCoach, .interview-ai-coach-panel > .coach-live-score-card, .interview-ai-coach-panel > .coach-structure-card, .interview-ai-coach-panel > .coach-followup-card) {
  display: none !important;
}

html:not(.react-student-embedded) body[data-interview-final-mode="pressure"] :is(#engineeringTrainingFlow, #interviewPracticeAnswerGuide) {
  display: none !important;
}

html:not(.react-student-embedded) body[data-interview-final-mode="pressure"] .interview-final-active-mode {
  border-color: rgba(218, 75, 87, .22);
  background: linear-gradient(135deg, #fff2f3, #fff8f3);
}

html:not(.react-student-embedded) body[data-interview-final-mode="pressure"] .interview-final-active-mode > strong {
  color: #d54d59;
}

html:not(.react-student-embedded) body[data-interview-final-mode="real"] .interview-final-active-mode {
  border-color: rgba(31, 108, 216, .22);
  background: linear-gradient(135deg, #eef6ff, #f7fbff);
}

html:not(.react-student-embedded) body[data-interview-final-mode="real"] .interview-final-active-mode > strong {
  color: #216bd0;
}

html[data-theme="dark"] .interview-final-mode-card,
html[data-theme="dark"] .interview-final-mode-option,
html[data-theme="dark"] .interview-final-mode-brief > section,
html[data-theme="dark"] .interview-final-active-mode,
html[data-theme="dark"] .interview-practice-answer-guide,
html[data-theme="dark"] .interview-pressure-chain,
html[data-theme="dark"] .interview-final-score-panel {
  color: #eef4ff;
  border-color: rgba(148, 163, 184, .17) !important;
  background: rgba(16, 25, 40, .94) !important;
}

html[data-theme="dark"] :is(.interview-final-mode-card h3, .interview-final-mode-option strong, .interview-final-mode-brief > section > div:first-child strong, .interview-final-active-mode > strong, .interview-practice-answer-guide > div strong) {
  color: #f1f6ff !important;
}

html[data-theme="dark"] :is(.interview-final-mode-brief ol li, .interview-final-mode-brief dl > div, .interview-pressure-example p, .interview-practice-answer-guide li, #interviewPressureTranscript p[data-role="candidate"], .interview-final-score-panel article) {
  color: #dfe7f4;
  border-color: rgba(148, 163, 184, .14);
  background: rgba(28, 38, 56, .9);
}

@media (max-width: 980px) {
  .interview-final-mode-selector,
  .interview-final-mode-brief ol,
  .interview-final-mode-brief dl,
  .interview-pressure-example {
    grid-template-columns: 1fr;
  }

  .interview-final-mode-brief > section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .interview-final-mode-card > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .interview-final-mode-option {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .interview-final-mode-option > em {
    grid-column: 2;
    justify-self: start;
  }

  html:not(.react-student-embedded) .interview-final-mode-start {
    width: 100%;
    min-width: 0;
  }
}


/* source: v134-debug-lab-final.css */
/* V13.4: enterprise Debug Case identity, engineering record and project-asset closure. */

.engineering-bug-case-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: -5px;
}

.engineering-bug-case-profile > span,
.engineering-bug-case-profile > em {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.engineering-bug-case-profile > span {
  color: #3457d5;
  background: rgba(72, 107, 232, 0.11);
  border: 1px solid rgba(72, 107, 232, 0.22);
}

.engineering-bug-case-profile > em {
  color: #a36300;
  background: rgba(245, 158, 11, 0.11);
  border: 1px solid rgba(245, 158, 11, 0.22);
  letter-spacing: 0.04em;
}

.engineering-bug-case-profile > strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 10px;
  color: var(--bug-text);
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 9px;
  font-size: 12px;
}

.engineering-bug-case-profile > strong b {
  color: #17824b;
  font-size: 10px;
}

.debug-case-hero-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 6px !important;
}

.debug-case-hero-tags > span {
  color: #93a9c6 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.debug-case-hero-tags > em {
  padding: 5px 9px !important;
  color: #dbeafe !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 750 !important;
}

.debug-case-hero-tags > b {
  padding: 6px 10px !important;
  color: #bbf7d0 !important;
  background: rgba(34, 197, 94, 0.11) !important;
  border: 1px solid rgba(74, 222, 128, 0.2) !important;
  border-radius: 9px !important;
  font-size: 11px !important;
}

.debug-workflow-hero > aside .debug-case-difficulty {
  color: #fde68a !important;
  background: rgba(245, 158, 11, 0.13) !important;
  border-color: rgba(251, 191, 36, 0.24) !important;
  letter-spacing: 0.03em !important;
}

.debug-workflow-report > header > div > p {
  margin: 5px 0 0;
  color: var(--debug-muted);
  font-size: 13px;
  font-weight: 700;
}

.debug-engineering-record-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.debug-engineering-record-grid > article {
  min-height: 112px;
  padding: 15px;
  background: var(--debug-surface-soft);
  border: 1px solid var(--debug-border);
  border-radius: 13px;
}

.debug-engineering-record-grid span {
  display: block;
  margin-bottom: 9px;
  color: #4f46e5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.debug-engineering-record-grid strong {
  color: var(--debug-text);
  font-size: 13px;
  line-height: 1.55;
}

.debug-engineering-record-proof {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(79, 70, 229, 0.06);
  border: 1px solid rgba(79, 70, 229, 0.14);
  border-radius: 13px;
}

.debug-engineering-record-proof > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.debug-engineering-record-proof > div > span {
  color: var(--debug-muted);
  font-size: 10px;
  font-weight: 800;
}

.debug-engineering-record-proof em {
  padding: 4px 7px;
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.09);
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.debug-engineering-record-proof p {
  margin: 0;
  color: var(--debug-muted);
  font-size: 12px;
  line-height: 1.55;
}

.debug-engineering-record-proof > strong {
  white-space: nowrap;
  color: #4f46e5;
  font-size: 13px;
}

.debug-workflow-report-actions {
  grid-template-columns: auto auto minmax(180px, 1fr) !important;
}

.debug-project-asset-shelf {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: var(--v51-card, #fff);
  border: 1px solid var(--v51-border, #dbe4f0);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.debug-project-asset-shelf > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.debug-project-asset-shelf > header span {
  color: #4f46e5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.debug-project-asset-shelf > header h3 {
  margin: 5px 0 4px;
  color: var(--v51-text, #0f172a);
  font-size: 22px;
}

.debug-project-asset-shelf > header p {
  margin: 0;
  color: var(--v51-muted, #64748b);
  font-size: 12px;
}

.debug-project-asset-shelf > header > strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #4f46e5;
  font-size: 30px;
}

.debug-project-asset-shelf > header > strong small {
  color: var(--v51-muted, #64748b);
  font-size: 11px;
}

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

.debug-project-asset-card,
.debug-project-asset-empty {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: var(--v51-card-soft, #f7f9fc);
  border: 1px solid var(--v51-border, #dbe4f0);
  border-radius: 16px;
}

.debug-project-asset-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.debug-project-asset-card > header span,
.debug-project-asset-empty > span {
  color: #4f46e5;
  font: 850 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.debug-project-asset-card > header em {
  padding: 5px 8px;
  color: #1d6d42;
  background: rgba(34, 197, 94, 0.09);
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.debug-project-asset-card h4 {
  margin: 0;
  color: var(--v51-text, #0f172a);
  font-size: 17px;
}

.debug-project-asset-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.debug-project-asset-card dl > div {
  padding: 9px 10px;
  background: var(--v51-card, #fff);
  border: 1px solid var(--v51-border, #dbe4f0);
  border-radius: 10px;
}

.debug-project-asset-card dt {
  margin-bottom: 5px;
  color: var(--v51-muted, #64748b);
  font-size: 9px;
  font-weight: 800;
}

.debug-project-asset-card dd {
  margin: 0;
  color: var(--v51-text, #0f172a);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.debug-project-asset-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.debug-project-asset-tags span {
  padding: 4px 7px;
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.08);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}

.debug-project-asset-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--v51-border, #dbe4f0);
}

.debug-project-asset-card > footer p {
  display: grid;
  gap: 3px;
  margin: 0;
  color: var(--v51-text, #0f172a);
  font-size: 11px;
}

.debug-project-asset-card > footer span {
  color: var(--v51-muted, #64748b);
  font-size: 10px;
}

.debug-project-asset-card button,
.debug-project-asset-empty button {
  min-height: 36px;
  padding: 0 13px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #6d4aff);
  border: 0;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.debug-project-asset-empty {
  grid-column: 1 / -1;
  justify-items: start;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(109, 74, 255, 0.05));
}

.debug-project-asset-empty strong {
  color: var(--v51-text, #0f172a);
  font-size: 17px;
}

.debug-project-asset-empty p {
  margin: 0;
  color: var(--v51-muted, #64748b);
  font-size: 12px;
}

html[data-theme="dark"] .engineering-bug-case-profile > span,
html[data-theme="dark"] .debug-project-asset-shelf > header span,
html[data-theme="dark"] .debug-project-asset-card > header span,
html[data-theme="dark"] .debug-project-asset-empty > span,
html[data-theme="dark"] .debug-engineering-record-grid span,
html[data-theme="dark"] .debug-engineering-record-proof em {
  color: #a5b4fc;
}

html[data-theme="dark"] .engineering-bug-case-profile > strong b {
  color: #86efac;
}

html[data-theme="dark"] .debug-project-asset-shelf,
html[data-theme="dark"] .debug-project-asset-card dl > div {
  background: #111827;
}

html[data-theme="dark"] .debug-project-asset-card,
html[data-theme="dark"] .debug-project-asset-empty {
  background: #0d1728;
}

@media (max-width: 980px) {
  .debug-engineering-record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debug-engineering-record-proof {
    grid-template-columns: 1fr;
  }

  .debug-project-asset-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .debug-engineering-record-grid,
  .debug-project-asset-card dl {
    grid-template-columns: 1fr;
  }

  .debug-workflow-report-actions {
    grid-template-columns: 1fr !important;
  }

  .debug-project-asset-shelf > header,
  .debug-project-asset-card > footer {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* source: v136-commercial-engineering-proof.css */
/* V13.6: commercial engineering proof for enterprise review. */

.recruiter-profile-stats strong.is-role {
  max-width: 150px;
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em;
}

.commercial-proof-completions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: -8px 0 22px;
}

.commercial-proof-completions > div {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--public-border, #dfe6ef);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(65, 105, 225, 0.055), transparent 65%),
    var(--public-soft, #f8faff);
}

.commercial-proof-completions span,
.commercial-proof-completions p {
  display: block;
  color: var(--public-muted, #718096);
  font-size: 10px;
}

.commercial-proof-completions strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--public-text, #172033);
  font-size: 27px;
  line-height: 1;
}

.commercial-proof-completions strong small {
  margin-left: 2px;
  color: var(--public-muted, #718096);
  font-size: 10px;
}

.commercial-proof-completions p {
  margin: 0;
  line-height: 1.4;
}

.recruiter-profile-footer b {
  color: #315fd4;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > footer {
  padding: 15px !important;
  border: 1px solid rgba(79, 110, 247, 0.15) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(79, 110, 247, 0.07), rgba(116, 85, 231, 0.035)) !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > footer strong {
  color: #263c91 !important;
  font-size: 13px !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] [data-engineer-identity-proof] {
  min-width: 150px !important;
  background: linear-gradient(135deg, #386fe7, #7550e7) !important;
}

html[data-theme="dark"] .commercial-proof-completions > div {
  border-color: #2c3950;
  background: #111c2e;
}

html[data-theme="dark"] .commercial-proof-completions strong {
  color: #edf3ff;
}

html[data-theme="dark"] .recruiter-profile-footer b {
  color: #a5b4fc;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="my"] .engineer-identity-contribution > footer strong {
  color: #c7d2fe !important;
}

@media (max-width: 760px) {
  .commercial-proof-completions {
    grid-template-columns: 1fr;
  }

  .recruiter-profile-stats strong.is-role {
    max-width: none;
  }
}


/* source: v137-knowledge-final-closure.css */
/* V13.7 · Knowledge is a fixed four-layer engineering closure, not a content shelf. */

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .v51-knowledge-hero > div:first-child {
  max-width: 760px;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .engineering-knowledge-categories > button {
  min-height: 112px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .engineering-knowledge-categories > button em {
  line-height: 1.55 !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey {
  position: relative !important;
  margin-top: 2px !important;
  border-color: rgba(79, 110, 247, 0.22) !important;
  box-shadow: 0 16px 38px rgba(34, 53, 96, 0.075) !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(180deg, #4f6ef7, #0f9f84 36%, #e37b28 68%, #8055df);
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-journey > header > div > span {
  letter-spacing: 0.16em !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node {
  min-height: 168px !important;
  grid-template-rows: auto auto minmax(50px, 1fr) auto !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node > strong {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node > span::after {
  content: " · 固定节点";
  color: #98a3b5;
  font-size: 8px;
  font-weight: 750;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > .learning-knowledge-linkage {
  gap: 8px !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > .learning-knowledge-linkage > span {
  position: relative;
  min-height: 26px !important;
  overflow: visible !important;
  background: #f8faff !important;
}

html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > .learning-knowledge-linkage > span:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  right: -8px;
  color: #a7b0c0;
  font-size: 8px;
  font-weight: 950;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .learning-knowledge-card > .learning-knowledge-linkage > span {
  border-color: #2b3950 !important;
  background: #111c2e !important;
  color: #aebbd0 !important;
}

@media (max-width: 1120px) {
  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node {
    min-height: 152px !important;
  }
}

@media (max-width: 700px) {
  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .engineering-knowledge-categories > button {
    min-height: 96px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="knowledge-map"] .knowledge-association-node > span::after {
    content: "";
  }
}


/* source: v138-final-entry-cleanup.css */
/* V13.8 · Final surface lock: one navigation, no chat launcher, only meaningful preferences. */

html:not(.react-student-embedded) body #companionAvatarDock,
html:not(.react-student-embedded) body #companionDock,
html:not(.react-student-embedded) body #companionMini,
html:not(.react-student-embedded) body #companionPanel,
html:not(.react-student-embedded) body #companionAmbientStage,
html:not(.react-student-embedded) body #companionMiniBubble,
html:not(.react-student-embedded) body #companionExitModal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body .workspace-nav .menu-item[aria-hidden="true"],
html:not(.react-student-embedded) body .workspace-nav-group[aria-hidden="true"],
html:not(.react-student-embedded) body [data-target="settings"],
html:not(.react-student-embedded) body [data-panel-target="settings"],
html:not(.react-student-embedded) body .final-hidden-setting {
  display: none !important;
}

html:not(.react-student-embedded) body .sidebar-account-button {
  grid-template-columns: 36px minmax(0, 1fr) !important;
}

html:not(.react-student-embedded) body .sidebar-account-button > i {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="my"] .engineer-dossier-summary-actions {
  justify-content: flex-end !important;
}

html:not(.react-student-embedded) body[data-active-panel="settings"] .user-settings-grid {
  align-items: start !important;
}

html:not(.react-student-embedded) body[data-active-panel="settings"] .final-hidden-setting {
  display: none !important;
}

@media (max-width: 760px) {
  html:not(.react-student-embedded) body .sidebar-account-button {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }
}


/* source: v140-interview-meeting-lobby.css */
/* HardAsk V1.0 · 模拟面试会议式工作台 */

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-meeting-active) .main.main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 24px 40px !important;
  overflow-x: clip !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-meeting-active) .main.main > .topbar,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-meeting-active) .panel[data-panel="interview"].active {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

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

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-meeting-active) .interview-space-shell {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 22px 0 42px !important;
}

.interview-meeting-lobby {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.interview-meeting-lobby-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 2px;
}

.interview-meeting-lobby-head > div:first-child {
  display: grid;
  gap: 4px;
}

.interview-meeting-lobby-head .eyebrow {
  margin: 0;
  color: #246df3 !important;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: .14em;
}

.interview-meeting-lobby-head h2 {
  margin: 0;
  color: #101828;
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 920;
  letter-spacing: -.045em;
}

.interview-meeting-lobby-head > div:first-child > span {
  color: #718096;
  font-size: 13px;
  font-weight: 650;
}

.interview-meeting-lobby-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 24px rgba(47, 64, 93, .06);
}

.interview-meeting-lobby-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28b67a;
  box-shadow: 0 0 0 5px rgba(40, 182, 122, .12);
}

.interview-meeting-lobby-status span,
.interview-meeting-lobby-status strong {
  color: #536176;
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  white-space: nowrap;
}

.interview-meeting-lobby-status strong {
  padding-left: 8px;
  color: #1e2b3e;
  border-left: 1px solid #dce5f2;
}

.interview-lobby-mode-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid #dde5f0;
  border-radius: 15px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 30px rgba(45, 57, 80, .05);
}

.interview-lobby-mode-bar .interview-final-mode-option {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 56px;
  padding: 9px 12px;
  border-color: transparent;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
}

.interview-lobby-mode-bar .interview-final-mode-option:hover {
  transform: none;
  border-color: #dfe5ee;
  background: #f7f9fc;
  box-shadow: none;
}

.interview-lobby-mode-bar .interview-final-mode-option.is-active {
  border-color: rgba(73, 105, 238, .22);
  background: linear-gradient(135deg, #eef4ff, #f4f1ff);
  box-shadow: 0 6px 16px rgba(74, 92, 170, .08);
}

.interview-lobby-mode-bar .interview-final-mode-option > i {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.interview-lobby-mode-bar .interview-final-mode-option strong {
  font-size: 12px;
}

.interview-lobby-mode-bar .interview-final-mode-option small,
.interview-lobby-mode-bar .interview-final-mode-option > em {
  font-size: 8px;
}

.interview-meeting-lobby-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(320px, .78fr);
  gap: 14px;
  min-width: 0;
  min-height: 570px;
}

.interview-lobby-interviewer,
.interview-lobby-side > section,
.interview-lobby-mode-brief {
  border: 1px solid #dce4ef;
  background: #fff;
  box-shadow: 0 18px 46px rgba(39, 52, 75, .07);
}

.interview-lobby-interviewer {
  display: grid;
  grid-template-rows: minmax(330px, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
}

.interview-lobby-video {
  position: relative;
  display: grid;
  min-height: 330px;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(108, 128, 255, .28), transparent 38%),
    linear-gradient(150deg, #141b2e 0%, #1b2640 56%, #263159 100%);
}

.interview-lobby-video::after {
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  background: linear-gradient(transparent, rgba(8, 13, 25, .76));
  content: "";
  pointer-events: none;
}

.interview-lobby-video > img {
  width: min(48%, 340px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  border: 6px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  box-shadow: 0 28px 46px rgba(0, 0, 0, .32);
}

.interview-lobby-video > .interview-video-live {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #eef4ff;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(12, 20, 36, .58);
  backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 820;
}

.interview-lobby-video > .interview-video-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35d494;
  box-shadow: 0 0 0 4px rgba(53, 212, 148, .14);
}

.interview-lobby-video > div {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 18px;
  left: 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
}

.interview-lobby-video > div strong {
  font-size: 16px;
  font-weight: 880;
}

.interview-lobby-video > div small {
  color: #b9c5db;
  font-size: 10px;
  font-weight: 680;
}

.interview-lobby-question {
  display: grid;
  gap: 10px;
  padding: 20px 22px 21px;
  background: linear-gradient(180deg, #fff, #fbfcff);
}

.interview-lobby-question > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.interview-lobby-question > div:first-child span {
  color: #4768dc;
  font-size: 10px;
  font-weight: 880;
  letter-spacing: .06em;
}

.interview-lobby-question > div:first-child em {
  color: #8a96a9;
  font-size: 9px;
  font-style: normal;
  font-weight: 720;
}

.interview-lobby-question h3 {
  margin: 0;
  color: #182235;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: -.025em;
}

.interview-lobby-question p {
  margin: 0;
  color: #69778c;
  font-size: 11px;
  line-height: 1.7;
  font-weight: 640;
}

.interview-lobby-question-tags {
  display: flex !important;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: 7px !important;
}

.interview-lobby-question-tags span {
  padding: 5px 8px;
  color: #54657c !important;
  border: 1px solid #e0e6ef;
  border-radius: 8px;
  background: #f7f9fc;
  font-size: 9px !important;
  font-weight: 740 !important;
  letter-spacing: 0 !important;
}

.interview-lobby-side {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
}

.interview-lobby-side > section,
.interview-lobby-mode-brief {
  border-radius: 16px;
}

.interview-lobby-answer,
.interview-lobby-analysis {
  display: grid;
  gap: 12px;
  padding: 16px 17px;
}

.interview-lobby-answer > header,
.interview-lobby-analysis > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.interview-lobby-answer > header > div {
  display: grid;
  gap: 3px;
}

.interview-lobby-answer > header span,
.interview-lobby-analysis > header span {
  color: #25334a;
  font-size: 12px;
  font-weight: 880;
}

.interview-lobby-answer > header strong,
.interview-lobby-answer > header time,
.interview-lobby-analysis > header em {
  color: #8490a2;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.interview-lobby-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  padding: 10px;
  border-radius: 12px;
  background: #f4f7fc;
}

.interview-lobby-waveform i {
  width: 3px;
  height: calc(10px + (var(--wave-index, 1) * 2px));
  min-height: 10px;
  max-height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6d5bf6, #3e85f6);
  opacity: .78;
}

.interview-lobby-waveform i:nth-child(3n) { height: 34px; }
.interview-lobby-waveform i:nth-child(4n) { height: 20px; }
.interview-lobby-waveform i:nth-child(5n) { height: 42px; }
.interview-lobby-waveform i:nth-child(7n) { height: 27px; }

.interview-lobby-answer > p {
  margin: 0;
  color: #8591a3;
  font-size: 9px;
  text-align: center;
}

.interview-lobby-analysis dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.interview-lobby-analysis dl > div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #e4e9f1;
  border-radius: 10px;
  background: #fbfcfe;
}

.interview-lobby-analysis dt {
  color: #778397;
  font-size: 9px;
  font-weight: 740;
}

.interview-lobby-analysis dd {
  margin: 0;
  color: #2c3a50;
  font-size: 9px;
  font-weight: 760;
}

.interview-lobby-mode-brief {
  min-height: 0;
  overflow: hidden;
}

.interview-lobby-mode-brief > section {
  grid-template-columns: 1fr !important;
  align-content: center;
  gap: 10px;
  min-height: 100% !important;
  padding: 14px 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.interview-lobby-mode-brief ol,
.interview-lobby-mode-brief dl,
.interview-lobby-mode-brief .interview-pressure-example {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.interview-lobby-mode-brief .interview-pressure-example p {
  min-height: 40px;
  margin: 0;
}

.interview-lobby-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.interview-lobby-actions button {
  min-height: 48px;
  border-radius: 12px;
}

.interview-lobby-actions .interview-final-mode-start {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.interview-lobby-actions .ghost-btn[disabled] {
  min-width: 86px;
  color: #a1aabd;
  cursor: not-allowed;
  opacity: .72;
}

html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-meeting-active) .interview-secondary-details {
  margin-top: 0 !important;
  border-color: #dfe6ef !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) body.interview-lobby-active[data-active-panel="interview"]:not(.interview-meeting-active):has(.panel[data-panel="interview"].active) .interview-bottom-actionbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="interview"].interview-meeting-active .main.main,
html:not(.react-student-embedded) body[data-active-panel="interview"].interview-meeting-active .panel[data-panel="interview"].active,
html:not(.react-student-embedded) body[data-active-panel="interview"].interview-meeting-active #interviewStudio {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

html[data-theme="dark"] .interview-meeting-lobby-head h2,
html[data-theme="dark"] .interview-lobby-question h3,
html[data-theme="dark"] .interview-lobby-answer > header span,
html[data-theme="dark"] .interview-lobby-analysis > header span {
  color: #f2f6ff;
}

html[data-theme="dark"] :is(.interview-meeting-lobby-status,.interview-lobby-mode-bar,.interview-lobby-interviewer,.interview-lobby-side > section,.interview-lobby-mode-brief) {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(17, 26, 42, .96);
}

html[data-theme="dark"] :is(.interview-lobby-question,.interview-lobby-waveform,.interview-lobby-analysis dl > div) {
  border-color: rgba(148, 163, 184, .16);
  background: rgba(25, 36, 54, .96);
}

@media (max-width: 1080px) {
  .interview-meeting-lobby-grid {
    grid-template-columns: 1fr;
  }

  .interview-lobby-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }

  .interview-lobby-actions {
    align-self: stretch;
  }
}

@media (max-width: 720px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-meeting-active) .main.main {
    padding-inline: 14px !important;
  }

  .interview-meeting-lobby-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .interview-lobby-mode-bar,
  .interview-lobby-side {
    grid-template-columns: 1fr;
  }

  .interview-lobby-mode-bar .interview-final-mode-option {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .interview-lobby-interviewer {
    grid-template-rows: minmax(270px, 1fr) auto;
  }

  .interview-lobby-video {
    min-height: 270px;
  }

  .interview-lobby-video > img {
    width: min(78%, 360px);
  }
}


/* source: v144-xiaowen-settings-restore.css */
/* V144 — restore XiaoWen as a compact companion, without adding a sidebar entry. */

html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html:not(.react-student-embedded) body #companionDock:not([hidden]) #companionPanel:not([hidden]) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html:not(.react-student-embedded) body #companionExitModal:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html:not(.react-student-embedded) body #companionSettingsCard.companion-settings-card {
  display: block !important;
  grid-column: 1 / -1;
  scroll-margin-top: 88px;
  border-color: rgba(79, 70, 229, 0.22);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

html:not(.react-student-embedded) body #companionSettingsCard.is-settings-focus {
  border-color: rgba(79, 70, 229, 0.58);
  box-shadow: 0 18px 48px rgba(79, 70, 229, 0.14);
}

html:not(.react-student-embedded) body #companionPanel #companionSettingsBtn {
  width: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  font-size: 15px !important;
}

@media (max-width: 760px) {
  html:not(.react-student-embedded) body #companionSettingsCard.companion-settings-card {
    grid-column: auto;
    scroll-margin-top: 72px;
  }
}


/* source: v145-home-primary-cta.css */
/* V145 — make “开始今日训练” the single unmistakable primary action on Home. */

:is(#hw-v145-home-primary-cta, html):not(.react-student-embedded) body[data-active-panel="landing"] .landing-final-goal-card > #landingStartInterviewBtn.landing-final-goal-action {
  min-height: 76px !important;
  padding: 13px 16px 13px 21px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.22), transparent 27%),
    linear-gradient(125deg, #1769f5 0%, #4f5ff4 48%, #8439eb 100%) !important;
  box-shadow:
    0 18px 38px rgba(67, 75, 229, 0.34),
    0 5px 13px rgba(37, 99, 235, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  cursor: pointer !important;
  transform: translateY(0) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

:is(#hw-v145-home-primary-cta, html):not(.react-student-embedded) body[data-active-panel="landing"] .landing-final-goal-card > #landingStartInterviewBtn.landing-final-goal-action:hover {
  filter: saturate(1.08) brightness(1.04) !important;
  box-shadow:
    0 22px 46px rgba(67, 75, 229, 0.4),
    0 7px 17px rgba(37, 99, 235, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  transform: translateY(-2px) !important;
}

:is(#hw-v145-home-primary-cta, html):not(.react-student-embedded) body[data-active-panel="landing"] .landing-final-goal-card > #landingStartInterviewBtn.landing-final-goal-action:active {
  filter: saturate(1.02) !important;
  transform: translateY(0) scale(0.992) !important;
}

:is(#hw-v145-home-primary-cta, html):not(.react-student-embedded) body[data-active-panel="landing"] .landing-final-goal-card > #landingStartInterviewBtn.landing-final-goal-action:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.3) !important;
  outline-offset: 4px !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] #landingStartInterviewBtn.landing-final-goal-action > span {
  font-size: clamp(18px, 1.25vw, 20px) !important;
  font-weight: 920 !important;
  line-height: 1.18 !important;
  letter-spacing: 0.01em !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] #landingStartInterviewBtn.landing-final-goal-action > small {
  margin-top: 3px !important;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] #landingStartInterviewBtn.landing-final-goal-action > i {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  font-size: 22px !important;
}

/* This remains actionable, but visually reads as the task-level secondary action. */
html:not(.react-student-embedded) body[data-active-panel="landing"] #landingRecommendedTrainingBtn.landing-final-task-start {
  color: #5448da !important;
  border: 1px solid rgba(91, 78, 229, 0.24) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"] #landingRecommendedTrainingBtn.landing-final-task-start:hover {
  border-color: rgba(91, 78, 229, 0.4) !important;
  background: #ffffff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel="landing"] #landingRecommendedTrainingBtn.landing-final-task-start {
  color: #dcd8ff !important;
  border-color: rgba(167, 139, 250, 0.38) !important;
  background: rgba(79, 70, 229, 0.14) !important;
}

@media (max-width: 760px) {
  :is(#hw-v145-home-primary-cta, html):not(.react-student-embedded) body[data-active-panel="landing"] .landing-final-goal-card > #landingStartInterviewBtn.landing-final-goal-action {
    min-height: 70px !important;
    padding: 11px 13px 11px 17px !important;
    border-radius: 16px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] #landingStartInterviewBtn.landing-final-goal-action > span {
    font-size: 18px !important;
  }

  html:not(.react-student-embedded) body[data-active-panel="landing"] #landingStartInterviewBtn.landing-final-goal-action > i {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }
}


/* source: v147-xiaowen-engineering-drawer.css */
/* V147 — professional XiaoWen entry: topbar button + right-side engineering assistant drawer. */

html:not(.react-student-embedded) body .topbar-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

html:not(.react-student-embedded) body .topbar-right:has(> .debug-topbar-actions[hidden]) {
  display: flex !important;
}

html:not(.react-student-embedded) body .xiaowen-engineering-entry {
  display: inline-flex !important;
  width: auto !important;
  min-width: 134px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 4px 10px 4px 5px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  border: 1px solid #dce4ee !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #1f2b3d !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease !important;
}

html:not(.react-student-embedded) body .xiaowen-engineering-entry[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body .xiaowen-engineering-entry:hover {
  border-color: #c5d1e0 !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

html:not(.react-student-embedded) body .xiaowen-engineering-entry.is-active,
html:not(.react-student-embedded) body .xiaowen-engineering-entry[aria-expanded="true"] {
  border-color: rgba(79, 70, 229, 0.34) !important;
  background: #f4f3ff !important;
}

html:not(.react-student-embedded) body .xiaowen-engineering-entry:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.2) !important;
  outline-offset: 2px !important;
}

html:not(.react-student-embedded) body .xiaowen-engineering-entry__avatar-wrap {
  position: relative !important;
  display: block !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  overflow: visible !important;
  border-radius: 9px !important;
  background: #eef2ff !important;
}

html:not(.react-student-embedded) body .xiaowen-engineering-entry__avatar-wrap img {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  object-fit: cover !important;
  object-position: center 34% !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
  border-radius: 9px !important;
}

html:not(.react-student-embedded) body .xiaowen-engineering-entry__avatar-wrap i {
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: 8px !important;
  height: 8px !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: #22c55e !important;
}

html:not(.react-student-embedded) body .xiaowen-engineering-entry__copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 1px !important;
  text-align: left !important;
}

html:not(.react-student-embedded) body .xiaowen-engineering-entry__copy strong {
  color: #172033 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.1 !important;
}

html:not(.react-student-embedded) body .xiaowen-engineering-entry__copy small {
  color: #718198 !important;
  font-size: 9px !important;
  font-weight: 620 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .xiaowen-engineering-entry {
  width: 36px !important;
  min-width: 36px !important;
  padding: 4px !important;
  justify-content: center !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .xiaowen-engineering-entry__copy {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-topbar-actions {
  gap: 6px !important;
}

html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .debug-topbar-actions button {
  min-height: 34px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
}

/* The old character and avatar launcher are removed from the product surface. */
html:not(.react-student-embedded) body #companionAvatarDock.companion-avatar-dock,
html:not(.react-student-embedded) body #companionAmbientStage,
html:not(.react-student-embedded) body #companionMini {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body .companion-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 3180 !important;
  display: block !important;
  border: 0 !important;
  background: rgba(15, 23, 42, 0.32) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
}

html:not(.react-student-embedded) body .companion-drawer-backdrop[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body.companion-drawer-open {
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionDock.companion-dock.companion-simple-assistant,
html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant:not(.companion-fullscreen) {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  z-index: 3200 !important;
  display: block !important;
  width: min(430px, 100vw) !important;
  min-width: min(430px, 100vw) !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: -18px 0 52px rgba(15, 23, 42, 0.16) !important;
  transform: none !important;
}

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

html:not(.react-student-embedded) body #companionDock #companionPanel.companion-panel {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

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

html:not(.react-student-embedded) body #companionPanel .companion-panel-head {
  min-height: 72px !important;
  padding: 12px 16px !important;
  gap: 11px !important;
  border-bottom: 1px solid #e6ebf2 !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

html:not(.react-student-embedded) body #companionPanel #companionPanelAvatar.companion-panel-avatar-token,
html:not(.react-student-embedded) body #companionPanel .companion-brief-avatar-token {
  display: block !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center 34% !important;
  border: 1px solid rgba(99, 102, 241, 0.16) !important;
  background: #eef2ff !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) body #companionPanel #companionPanelAvatar.companion-panel-avatar-token {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-heading > strong {
  color: #172033 !important;
  font-size: 15px !important;
  font-weight: 780 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-heading > p {
  max-width: 240px !important;
  margin-top: 3px !important;
  color: #718198 !important;
  font-size: 11px !important;
  font-weight: 540 !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-tools button {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9px !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 15px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-panel-tools button:hover {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
}

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

html:not(.react-student-embedded) body #companionPanel .companion-agent-layout {
  min-height: 0 !important;
  overflow: hidden !important;
  background: #f6f8fb !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-agent-workspace {
  display: grid !important;
  grid-template-rows: auto auto minmax(96px, 1fr) auto auto auto !important;
  gap: 10px !important;
  height: 100% !important;
  padding: 16px !important;
  overflow: hidden !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card {
  min-height: 96px !important;
  padding: 14px !important;
  gap: 9px !important;
  border: 1px solid #e1e7f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04) !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-avatar-token {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card .eyebrow {
  color: #4f46e5 !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card strong {
  color: #1e293b !important;
  font-size: 13px !important;
}

html:not(.react-student-embedded) body #companionPanel .companion-brief-card > p {
  color: #64748b !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
}

html:not(.react-student-embedded) body #companionPanel #companionMessages.companion-messages {
  display: grid !important;
  min-height: 96px !important;
  padding: 2px !important;
  overflow-y: auto !important;
}

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

html:not(.react-student-embedded) body #companionPanel #companionActions button {
  min-height: 38px !important;
  border: 1px solid rgba(79, 70, 229, 0.15) !important;
  border-radius: 10px !important;
  background: #f2f1ff !important;
  color: #4338ca !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

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

html:not(.react-student-embedded) body #companionPanel #companionForm.companion-input-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid #dde4ee !important;
  border-radius: 13px !important;
  background: #ffffff !important;
}

html:not(.react-student-embedded) body #companionPanel #companionInput {
  display: block !important;
  min-height: 38px !important;
  max-height: 96px !important;
  padding: 8px 4px !important;
  resize: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #1e293b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
}

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

html[data-theme="dark"]:not(.react-student-embedded) body .xiaowen-engineering-entry {
  border-color: rgba(125, 145, 174, 0.24) !important;
  background: #121d2e !important;
  color: #eef4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .xiaowen-engineering-entry__copy strong {
  color: #eef4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .xiaowen-engineering-entry__copy small {
  color: #91a0b5 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #companionDock.companion-dock,
html[data-theme="dark"]:not(.react-student-embedded) body #companionDock #companionPanel.companion-panel,
html[data-theme="dark"]:not(.react-student-embedded) body #companionPanel .companion-panel-head {
  border-color: #26364c !important;
  background: #101a2a !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #companionPanel .companion-agent-layout {
  background: #0c1523 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #companionPanel .companion-brief-card,
html[data-theme="dark"]:not(.react-student-embedded) body #companionPanel #companionForm.companion-input-row {
  border-color: #26364c !important;
  background: #142033 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #companionPanel .companion-panel-heading > strong,
html[data-theme="dark"]:not(.react-student-embedded) body #companionPanel .companion-brief-card strong,
html[data-theme="dark"]:not(.react-student-embedded) body #companionPanel #companionInput {
  color: #eef4ff !important;
}

@media (max-width: 900px) {
  html:not(.react-student-embedded) body .xiaowen-engineering-entry {
    min-width: 112px !important;
    padding-right: 7px !important;
  }

  html:not(.react-student-embedded) body .xiaowen-engineering-entry__copy small {
    display: none !important;
  }
}

@media (max-width: 680px) {
  html:not(.react-student-embedded) body .shell > .main > header.topbar,
  html:not(.react-student-embedded) body[data-active-panel] .shell > .main > header.topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html:not(.react-student-embedded) body .topbar-right {
    display: flex !important;
  }

  html:not(.react-student-embedded) body .xiaowen-engineering-entry {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 4px !important;
    justify-content: center !important;
  }

  html:not(.react-student-embedded) body .xiaowen-engineering-entry__copy {
    display: none !important;
  }

  html:not(.react-student-embedded) body #companionDock.companion-dock.companion-simple-assistant,
  html:not(.react-student-embedded) body #companionDock.companion-dock.companion-expanded.companion-simple-assistant:not(.companion-fullscreen) {
    width: 100vw !important;
    min-width: 100vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.react-student-embedded) body .xiaowen-engineering-entry {
    transition: none !important;
  }
}


/* source: v148-home-first-use-state.css */
/* V148 — first-use homepage: one clear action before any training data exists. */

html:not(.react-student-embedded) body .landing-home-grid[hidden],
html:not(.react-student-embedded) body .landing-first-use-state[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel="landing"].landing-first-use-active .landing-workspace {
  min-height: calc(100vh - 92px) !important;
}

html:not(.react-student-embedded) body .landing-first-use-state {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr) !important;
  width: min(1040px, calc(100% - 32px)) !important;
  min-height: min(580px, calc(100vh - 126px)) !important;
  margin: 18px auto 40px !important;
  overflow: hidden !important;
  border: 1px solid rgba(203, 213, 225, 0.78) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 22px 64px rgba(15, 23, 42, 0.09) !important;
}

html:not(.react-student-embedded) body .landing-first-use-state::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 3px !important;
  background: linear-gradient(90deg, #4f46e5, #3b82f6 52%, #8b5cf6) !important;
}

html:not(.react-student-embedded) body .landing-first-use-main {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  min-width: 0 !important;
  padding: clamp(44px, 6vw, 76px) clamp(36px, 5.5vw, 72px) !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 6% 6%, rgba(79, 70, 229, 0.08), transparent 34%),
    linear-gradient(145deg, #ffffff, #fafbff) !important;
}

html:not(.react-student-embedded) body .landing-first-use-badge {
  display: inline-flex !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid rgba(79, 70, 229, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(79, 70, 229, 0.06) !important;
  color: #4338ca !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

html:not(.react-student-embedded) body .landing-first-use-badge i {
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #4f46e5 !important;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1) !important;
}

html:not(.react-student-embedded) body .landing-first-use-main > .eyebrow {
  margin: 30px 0 10px !important;
  color: #5370a0 !important;
  font-size: 10px !important;
  font-weight: 780 !important;
  letter-spacing: 0.16em !important;
}

html:not(.react-student-embedded) body .landing-first-use-main h1 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(38px, 4.4vw, 58px) !important;
  font-weight: 820 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
}

html:not(.react-student-embedded) body .landing-first-use-lead {
  margin: 18px 0 0 !important;
  color: #334155 !important;
  font-size: clamp(19px, 2vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

html:not(.react-student-embedded) body .landing-first-use-description {
  max-width: 540px !important;
  margin: 14px 0 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
}

html:not(.react-student-embedded) body .landing-first-use-action {
  display: grid !important;
  grid-template-columns: auto auto 22px !important;
  min-width: 244px !important;
  min-height: 58px !important;
  margin: 30px 0 0 !important;
  padding: 0 17px 0 22px !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 12px !important;
  border: 1px solid #4f46e5 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #4f46e5, #536dfe) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.24) !important;
  cursor: pointer !important;
  transition: transform 150ms ease, box-shadow 150ms ease !important;
}

html:not(.react-student-embedded) body .landing-first-use-action:hover {
  box-shadow: 0 18px 38px rgba(79, 70, 229, 0.31) !important;
  transform: translateY(-2px) !important;
}

html:not(.react-student-embedded) body .landing-first-use-action:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.24) !important;
  outline-offset: 3px !important;
}

html:not(.react-student-embedded) body .landing-first-use-action span {
  font-size: 16px !important;
  font-weight: 760 !important;
}

html:not(.react-student-embedded) body .landing-first-use-action small {
  padding-left: 12px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

html:not(.react-student-embedded) body .landing-first-use-action i {
  justify-self: end !important;
  color: #ffffff !important;
  font-size: 19px !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) body .landing-first-use-trust {
  display: flex !important;
  margin-top: 18px !important;
  flex-wrap: wrap !important;
  gap: 8px 18px !important;
}

html:not(.react-student-embedded) body .landing-first-use-trust span {
  position: relative !important;
  padding-left: 13px !important;
  color: #718198 !important;
  font-size: 10px !important;
  font-weight: 610 !important;
}

html:not(.react-student-embedded) body .landing-first-use-trust span::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #94a3b8 !important;
  transform: translateY(-50%) !important;
}

html:not(.react-student-embedded) body .landing-first-use-route {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  margin: 24px !important;
  padding: 30px !important;
  flex-direction: column !important;
  justify-content: center !important;
  border: 1px solid rgba(199, 210, 254, 0.82) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(rgba(79, 70, 229, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.026) 1px, transparent 1px),
    linear-gradient(145deg, #f7f8ff, #f3f6ff) !important;
  background-size: 24px 24px, 24px 24px, auto !important;
}

html:not(.react-student-embedded) body .landing-first-use-route header {
  display: grid !important;
  gap: 7px !important;
  margin-bottom: 26px !important;
}

html:not(.react-student-embedded) body .landing-first-use-route header span {
  color: #6366f1 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
}

html:not(.react-student-embedded) body .landing-first-use-route header strong {
  color: #1e293b !important;
  font-size: 20px !important;
  font-weight: 780 !important;
}

html:not(.react-student-embedded) body .landing-first-use-route ol {
  display: grid !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 12px !important;
  list-style: none !important;
}

html:not(.react-student-embedded) body .landing-first-use-route li {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  min-height: 68px !important;
  padding: 12px 13px !important;
  align-items: center !important;
  gap: 11px !important;
  border: 1px solid rgba(203, 213, 225, 0.72) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

html:not(.react-student-embedded) body .landing-first-use-route li.is-current {
  border-color: rgba(79, 70, 229, 0.32) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(79, 70, 229, 0.1) !important;
}

html:not(.react-student-embedded) body .landing-first-use-route li > b {
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: #eef2ff !important;
  color: #4f46e5 !important;
  font-size: 10px !important;
  font-weight: 780 !important;
}

html:not(.react-student-embedded) body .landing-first-use-route li > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

html:not(.react-student-embedded) body .landing-first-use-route li strong {
  color: #253249 !important;
  font-size: 13px !important;
  font-weight: 740 !important;
}

html:not(.react-student-embedded) body .landing-first-use-route li span {
  overflow: hidden !important;
  color: #718198 !important;
  font-size: 10px !important;
  font-weight: 520 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:not(.react-student-embedded) body .landing-first-use-route li em {
  color: #94a3b8 !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 760 !important;
}

html:not(.react-student-embedded) body .landing-first-use-route footer {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  margin-top: 18px !important;
  padding: 14px !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 12px !important;
  background: rgba(34, 197, 94, 0.08) !important;
}

html:not(.react-student-embedded) body .landing-first-use-route footer > span {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

html:not(.react-student-embedded) body .landing-first-use-route footer p {
  display: grid !important;
  margin: 0 !important;
  gap: 2px !important;
}

html:not(.react-student-embedded) body .landing-first-use-route footer strong {
  color: #166534 !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

html:not(.react-student-embedded) body .landing-first-use-route footer small {
  color: #4b7a5b !important;
  font-size: 9px !important;
  font-weight: 560 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .landing-first-use-state {
  border-color: rgba(100, 116, 139, 0.3) !important;
  background: #0f1928 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .landing-first-use-main {
  background: radial-gradient(circle at 6% 6%, rgba(99, 102, 241, 0.16), transparent 34%), #111c2c !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .landing-first-use-main h1,
html[data-theme="dark"]:not(.react-student-embedded) body .landing-first-use-route header strong,
html[data-theme="dark"]:not(.react-student-embedded) body .landing-first-use-route li strong {
  color: #eef4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .landing-first-use-lead {
  color: #d7e2f1 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .landing-first-use-description,
html[data-theme="dark"]:not(.react-student-embedded) body .landing-first-use-route li span {
  color: #91a0b5 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .landing-first-use-route {
  border-color: rgba(99, 102, 241, 0.24) !important;
  background: #0c1624 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .landing-first-use-route li {
  border-color: #26364c !important;
  background: rgba(20, 32, 51, 0.88) !important;
}

@media (max-width: 920px) {
  html:not(.react-student-embedded) body .landing-first-use-state {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  html:not(.react-student-embedded) body .landing-first-use-main {
    padding: 48px 42px 34px !important;
  }

  html:not(.react-student-embedded) body .landing-first-use-route {
    margin-top: 0 !important;
  }
}

@media (max-width: 620px) {
  html:not(.react-student-embedded) body .landing-first-use-state {
    width: 100% !important;
    margin: 8px 0 24px !important;
    border-radius: 18px !important;
  }

  html:not(.react-student-embedded) body .landing-first-use-main {
    padding: 36px 22px 28px !important;
  }

  html:not(.react-student-embedded) body .landing-first-use-main h1 {
    font-size: 36px !important;
  }

  html:not(.react-student-embedded) body .landing-first-use-action {
    width: 100% !important;
    min-width: 0 !important;
  }

  html:not(.react-student-embedded) body .landing-first-use-route {
    margin: 0 14px 14px !important;
    padding: 22px 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.react-student-embedded) body .landing-first-use-action {
    transition: none !important;
  }
}


/* source: v149-pro-membership-reserve.css */
/* V149 — reserved commercial architecture. Hidden until PRO_MEMBERSHIP_ENTRY_ENABLED is enabled. */

html:not(.react-student-embedded) body #proMembershipCard.pro-membership-card[hidden] {
  display: none !important;
}

html:not(.react-student-embedded) body #proMembershipCard.pro-membership-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(210px, 1.05fr) minmax(128px, 0.55fr) minmax(260px, 1.2fr) auto !important;
  min-height: 116px !important;
  padding: 22px 24px !important;
  align-items: center !important;
  gap: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 2% 0%, rgba(99, 102, 241, 0.13), transparent 30%),
    linear-gradient(135deg, #ffffff, #f8f9ff) !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07) !important;
}

html:not(.react-student-embedded) body #proMembershipCard.pro-membership-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, #4f46e5, #8b5cf6) !important;
}

html:not(.react-student-embedded) body .pro-membership-brand {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
}

html:not(.react-student-embedded) body .pro-membership-mark {
  display: grid !important;
  width: 50px !important;
  height: 50px !important;
  place-items: center !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, #3730a3, #5b4ff2 58%, #7c3aed) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.24) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
}

html:not(.react-student-embedded) body .pro-membership-brand > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

html:not(.react-student-embedded) body .pro-membership-brand p {
  margin: 0 !important;
  color: #6366f1 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
}

html:not(.react-student-embedded) body .pro-membership-brand h2 {
  margin: 0 !important;
  color: #172033 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

html:not(.react-student-embedded) body .pro-membership-brand > div > span {
  color: #718198 !important;
  font-size: 10px !important;
  font-weight: 580 !important;
}

html:not(.react-student-embedded) body .pro-membership-trial {
  display: grid !important;
  min-height: 72px !important;
  padding: 0 22px !important;
  align-content: center !important;
  gap: 2px !important;
  border-right: 1px solid #e3e8f0 !important;
  border-left: 1px solid #e3e8f0 !important;
}

html:not(.react-student-embedded) body .pro-membership-trial > span {
  color: #718198 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

html:not(.react-student-embedded) body .pro-membership-trial strong {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  color: #172033 !important;
  line-height: 1 !important;
}

html:not(.react-student-embedded) body .pro-membership-trial strong b {
  font-size: 28px !important;
  font-weight: 820 !important;
}

html:not(.react-student-embedded) body .pro-membership-trial strong small {
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

html:not(.react-student-embedded) body .pro-membership-trial em {
  color: #94a3b8 !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 560 !important;
}

html:not(.react-student-embedded) body .pro-membership-benefits {
  display: flex !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

html:not(.react-student-embedded) body .pro-membership-benefits span {
  display: inline-flex !important;
  min-height: 27px !important;
  padding: 0 9px !important;
  align-items: center !important;
  border: 1px solid rgba(99, 102, 241, 0.14) !important;
  border-radius: 8px !important;
  background: rgba(99, 102, 241, 0.06) !important;
  color: #4f46e5 !important;
  font-size: 9px !important;
  font-weight: 650 !important;
}

html:not(.react-student-embedded) body .pro-membership-upgrade {
  display: grid !important;
  grid-template-columns: auto auto 15px !important;
  min-width: 164px !important;
  min-height: 44px !important;
  padding: 0 13px 0 16px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid #4f46e5 !important;
  border-radius: 11px !important;
  background: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.2) !important;
  cursor: pointer !important;
}

html:not(.react-student-embedded) body .pro-membership-upgrade span {
  font-size: 12px !important;
  font-weight: 760 !important;
}

html:not(.react-student-embedded) body .pro-membership-upgrade small {
  padding-left: 8px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
}

html:not(.react-student-embedded) body .pro-membership-upgrade i {
  font-size: 14px !important;
  font-style: normal !important;
}

html:not(.react-student-embedded) body .pro-membership-upgrade:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.22) !important;
  outline-offset: 3px !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body #proMembershipCard.pro-membership-card {
  border-color: rgba(99, 102, 241, 0.28) !important;
  background: radial-gradient(circle at 2% 0%, rgba(99, 102, 241, 0.18), transparent 30%), #111c2c !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .pro-membership-brand h2,
html[data-theme="dark"]:not(.react-student-embedded) body .pro-membership-trial strong {
  color: #eef4ff !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .pro-membership-trial {
  border-color: #26364c !important;
}

@media (max-width: 1060px) {
  html:not(.react-student-embedded) body #proMembershipCard.pro-membership-card {
    grid-template-columns: minmax(210px, 1fr) minmax(124px, 0.5fr) minmax(220px, 1fr) !important;
  }

  html:not(.react-student-embedded) body .pro-membership-upgrade {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
  }
}

@media (max-width: 720px) {
  html:not(.react-student-embedded) body #proMembershipCard.pro-membership-card {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 20px !important;
    gap: 16px !important;
  }

  html:not(.react-student-embedded) body .pro-membership-trial {
    padding: 14px 0 !important;
    border-top: 1px solid #e3e8f0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e3e8f0 !important;
    border-left: 0 !important;
  }

  html:not(.react-student-embedded) body .pro-membership-upgrade {
    grid-column: auto !important;
    width: 100% !important;
    justify-self: stretch !important;
  }
}


/* source: v150-score-provenance.css */
/* v150 — auditable scoring: every visible ability score can reveal its real sources. */

.score-history-trigger {
  cursor: pointer !important;
  text-underline-offset: 3px;
  transition: color 160ms ease, opacity 160ms ease, text-decoration-color 160ms ease !important;
}

.score-history-trigger::after {
  content: "↗";
  display: inline-block;
  margin-left: 4px;
  color: #7c5cff;
  font-size: 0.56em;
  font-weight: 950;
  line-height: 1;
  vertical-align: super;
  opacity: 0.72;
}

.score-history-trigger:hover,
.score-history-trigger:focus-visible {
  color: #6842f5 !important;
  outline: none;
  text-decoration: underline dotted rgba(104, 66, 245, 0.56);
}

.score-history-trigger:hover::after,
.score-history-trigger:focus-visible::after {
  opacity: 1;
}

.score-history-card {
  max-height: min(900px, calc(100vh - 32px));
  overflow: auto;
  overscroll-behavior: contain;
}

.score-provenance-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(124, 92, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.96), #fff);
}

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

.score-provenance-head > div {
  display: grid;
  gap: 4px;
}

.score-provenance-head span {
  color: #6842f5;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.score-provenance-head h4 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 950;
}

.score-provenance-head em {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(124, 92, 255, 0.14);
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.08);
  color: #6948e8;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.score-provenance-list {
  display: grid;
  gap: 9px;
  max-height: 294px;
  overflow: auto;
  padding-right: 3px;
}

.score-provenance-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #e7eaf2;
  border-radius: 15px;
  background: #fff;
}

.score-provenance-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #f1edff;
  color: #6842f5;
  font-size: 12px;
  font-weight: 950;
}

.score-provenance-item[data-evidence-kind="training"] .score-provenance-icon {
  background: #e9f8ef;
  color: #11824f;
}

.score-provenance-item[data-evidence-kind="interview"] .score-provenance-icon {
  background: #eaf2ff;
  color: #2866d7;
}

.score-provenance-item[data-evidence-kind="debug"] .score-provenance-icon,
.score-provenance-item[data-evidence-kind="waveform"] .score-provenance-icon,
.score-provenance-item[data-evidence-kind="project"] .score-provenance-icon {
  background: #fff1e8;
  color: #d65d18;
}

.score-provenance-item > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.score-provenance-item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.score-provenance-item header strong {
  overflow: hidden;
  color: #172033;
  font-size: 13px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-provenance-item time {
  flex: 0 0 auto;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
}

.score-provenance-item p {
  overflow: hidden;
  margin: 0;
  color: #667085;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-provenance-item > em {
  padding: 6px 9px;
  border-radius: 9px;
  background: #f4f1ff;
  color: #6842f5;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.score-provenance-item[data-evidence-kind="training"] > em {
  background: #e9f8ef;
  color: #11824f;
}

.score-provenance-formula {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f7fb;
  color: #667085;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.6;
}

.score-provenance-empty {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px dashed #d8dce8;
  border-radius: 14px;
  background: #fafbfe;
  text-align: center;
}

.score-provenance-empty strong {
  color: #344054;
  font-size: 13px;
}

.score-provenance-empty p {
  margin: 0;
  color: #98a2b3;
  font-size: 11px;
}

html[data-theme="dark"] .score-provenance-section {
  border-color: rgba(139, 111, 255, 0.24);
  background: linear-gradient(180deg, rgba(25, 31, 45, 0.98), rgba(18, 24, 36, 0.98));
}

html[data-theme="dark"] .score-provenance-head h4,
html[data-theme="dark"] .score-provenance-item header strong {
  color: #eef2ff;
}

html[data-theme="dark"] .score-provenance-item {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(30, 38, 54, 0.92);
}

html[data-theme="dark"] .score-provenance-item p,
html[data-theme="dark"] .score-provenance-formula {
  color: #aab4c8;
}

html[data-theme="dark"] .score-provenance-formula {
  background: rgba(44, 52, 70, 0.82);
}

@media (max-width: 720px) {
  .score-provenance-head {
    display: grid;
  }

  .score-provenance-head em {
    justify-self: start;
  }

  .score-provenance-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .score-provenance-icon {
    width: 34px;
    height: 34px;
  }

  .score-provenance-item > em {
    grid-column: 2;
    justify-self: start;
  }
}


/* source: v151-account-onboarding-submit.css */
/* v151 — make account creation visibly progressive and continue directly into onboarding. */

.account-form-status {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid #dbe4f3;
  border-radius: 13px;
  background: #f7f9fd;
  color: #526078;
}

.account-form-status[hidden] {
  display: none !important;
}

.account-form-status > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #e8efff;
  color: #2d61d5;
  font-size: 13px;
  font-weight: 950;
}

.account-form-status p {
  margin: 0;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.account-form-status[data-tone="good"] {
  border-color: #bee7d1;
  background: #f0fbf5;
  color: #20734b;
}

.account-form-status[data-tone="good"] > span {
  background: #d9f4e5;
  color: #15814f;
}

.account-form-status[data-tone="warn"] {
  border-color: #f2c8c5;
  background: #fff5f4;
  color: #a33b34;
}

.account-form-status[data-tone="warn"] > span {
  background: #ffe3e0;
  color: #c8443d;
}

#accountSubmitBtn {
  min-width: 250px;
}

#accountSubmitBtn > i {
  display: none;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.46);
  border-top-color: #fff;
  border-radius: 50%;
}

#accountSubmitBtn.is-loading > i {
  display: inline-block;
  animation: account-submit-spin 720ms linear infinite;
}

#accountSubmitBtn.is-loading {
  cursor: progress;
  opacity: 0.92;
}

@keyframes account-submit-spin {
  to { transform: rotate(360deg); }
}

html[data-theme="dark"] .account-form-status {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(30, 38, 54, 0.92);
  color: #b8c2d5;
}

html[data-theme="dark"] .account-form-status[data-tone="good"] {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(16, 94, 65, 0.24);
  color: #a7f3d0;
}

html[data-theme="dark"] .account-form-status[data-tone="warn"] {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.24);
  color: #fecaca;
}

@media (max-width: 720px) {
  #accountSubmitBtn {
    width: 100%;
    min-width: 0;
  }
}


/* source: v152-account-workspace-boundary.css */
/* v152 — make guest mode and local training profiles visibly different. */

.account-guest-notice {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  padding: 13px 14px;
  border: 1px solid #d8e4fb;
  border-radius: 15px;
  background: linear-gradient(135deg, #f5f8ff, #f8f6ff);
}

.account-guest-notice[hidden],
.account-guest-migration-option[hidden],
#accountLogoutBtn[hidden] {
  display: none !important;
}

.account-guest-notice > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #397cf6, #8145ef);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.account-guest-notice strong,
.account-guest-notice p {
  display: block;
  margin: 0;
}

.account-guest-notice strong {
  color: #17233b;
  font-size: 13px;
}

.account-guest-notice p {
  margin-top: 4px;
  color: #60708a;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.55;
}

#accountRoleInput[readonly] {
  cursor: default;
  border-color: #dfe6f2;
  background: #f4f7fb;
  color: #35445d;
  font-weight: 800;
}

.account-guest-migration-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin: 13px 0;
  padding: 13px 14px;
  border: 1px solid #cfe7dc;
  border-radius: 14px;
  background: #f3fbf7;
  cursor: pointer;
}

.account-guest-migration-option input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #2875eb;
}

.account-guest-migration-option strong,
.account-guest-migration-option small {
  display: block;
}

.account-guest-migration-option strong {
  color: #174b36;
  font-size: 12px;
}

.account-guest-migration-option small {
  margin-top: 4px;
  color: #5e756a;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.5;
}

.account-saved-profiles {
  margin: 13px 0;
  padding: 13px;
  border: 1px solid #dfe6f0;
  border-radius: 15px;
  background: #fbfcfe;
}

.account-saved-profiles[hidden] {
  display: none !important;
}

.account-saved-profiles > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.account-saved-profiles > header strong {
  color: #25334a;
  font-size: 12px;
}

.account-saved-profiles > header small {
  color: #7a879b;
  font-size: 9px;
  font-weight: 650;
}

#accountSavedProfileList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-saved-profile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid #e0e6ef;
  border-radius: 12px;
  background: #fff;
  color: #27354c;
  text-align: left;
  cursor: pointer;
}

.account-saved-profile:hover:not(:disabled) {
  border-color: #9dbcf6;
  background: #f6f9ff;
}

.account-saved-profile.is-active {
  border-color: #b9d0fb;
  background: #f1f6ff;
}

.account-saved-profile > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e5edff, #ede6ff);
  color: #315fc4;
  font-size: 13px;
  font-weight: 900;
}

.account-saved-profile div {
  min-width: 0;
}

.account-saved-profile strong,
.account-saved-profile small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-saved-profile strong {
  font-size: 11px;
}

.account-saved-profile small {
  margin-top: 3px;
  color: #78869a;
  font-size: 9px;
}

.account-saved-profile em {
  color: #3871df;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

body[data-account-state="guest"] .sidebar-account-card {
  border-color: rgba(73, 112, 184, 0.2) !important;
  background: linear-gradient(135deg, rgba(246, 249, 255, 0.96), rgba(248, 246, 255, 0.96)) !important;
}

body[data-account-state="guest"] .sidebar-account-copy small {
  color: #65789b !important;
}

.onboarding-direction-grid.is-single-direction {
  grid-template-columns: minmax(0, 1fr) !important;
}

.onboarding-direction-grid.is-single-direction [data-onboarding-role] {
  min-height: 88px;
}

html[data-theme="dark"] .account-guest-notice {
  border-color: rgba(113, 148, 214, 0.3);
  background: linear-gradient(135deg, rgba(31, 43, 67, 0.96), rgba(43, 36, 70, 0.94));
}

html[data-theme="dark"] .account-guest-notice strong {
  color: #edf3ff;
}

html[data-theme="dark"] .account-guest-notice p {
  color: #aab9d1;
}

html[data-theme="dark"] #accountRoleInput[readonly] {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(34, 43, 60, 0.92);
  color: #d7dfed;
}

html[data-theme="dark"] .account-guest-migration-option {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(16, 94, 65, 0.2);
}

html[data-theme="dark"] .account-guest-migration-option strong {
  color: #b9f2d5;
}

html[data-theme="dark"] .account-guest-migration-option small {
  color: #9fc9b5;
}

html[data-theme="dark"] .account-saved-profiles,
html[data-theme="dark"] .account-saved-profile {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(28, 36, 51, 0.94);
}

html[data-theme="dark"] .account-saved-profiles > header strong,
html[data-theme="dark"] .account-saved-profile strong {
  color: #e4ebf7;
}

html[data-theme="dark"] .account-saved-profiles > header small,
html[data-theme="dark"] .account-saved-profile small {
  color: #9aa9bf;
}

@media (max-width: 720px) {
  .account-guest-notice,
  .account-guest-migration-option {
    margin-block: 11px;
  }

  #accountSavedProfileList {
    grid-template-columns: 1fr;
  }
}


/* source: v166-production-auth.css */
/* v166 — formal account authentication and session states. */

.account-modal-card {
  width: min(640px, calc(100vw - 32px));
  max-width: 640px;
  max-height: min(860px, calc(100vh - 32px));
  overflow-y: auto;
}

.account-auth-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 18px 0 4px;
  padding: 5px;
  border: 1px solid #dfe6f1;
  border-radius: 14px;
  background: #f2f5fa;
}

.account-auth-mode button {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #66748a;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.account-auth-mode button[aria-selected="true"] {
  background: #fff;
  color: #1f5fd4;
  box-shadow: 0 5px 16px rgba(34, 76, 143, 0.11);
}

.account-modal-card[data-auth-mode="login"] [data-account-register-field],
.account-modal-card[data-auth-mode="login"] #accountGuestMigrationOption,
.account-modal-card[data-auth-mode="login"] [data-account-verification-field],
.account-modal-card[data-auth-mode="reset"] [data-account-register-field],
.account-modal-card[data-auth-mode="reset"] #accountGuestMigrationOption,
.account-modal-card[data-auth-mode="reset"] #accountSavedProfiles {
  display: none !important;
}

.account-modal-card[data-auth-mode="login"] .account-modal-grid {
  grid-template-columns: minmax(0, 1fr);
}

.account-modal-card[data-auth-mode="reset"] .account-modal-grid {
  grid-template-columns: minmax(0, 1fr);
}

.account-verification-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.account-verification-input-row #accountSendVerificationBtn,
.account-verification-input-row .hardask-email-challenge-trigger {
  min-width: 116px;
  min-height: 48px;
  padding-inline: 14px;
  white-space: nowrap;
}

.account-verification-input-row #accountSendVerificationBtn:disabled,
.account-verification-input-row .hardask-email-challenge-trigger:disabled {
  cursor: wait;
  opacity: 0.64;
}

#accountModal .account-verification-input-row #accountSendVerificationBtn[hidden] { display: none !important; }
#accountModal .account-verification-input-row .hardask-email-challenge-trigger:not(:disabled) {
  color: var(--accent, #a83930);
  border-color: currentColor;
  font-weight: 600;
}

#accountModal .account-verification-field { display: grid; gap: 8px; min-width: 0; }
#accountModal #accountForm .account-verification-status {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--text-secondary, #526076);
}
#accountModal #accountForm .account-verification-status[data-tone="warn"] { color: #b42318; }
#accountModal #accountForm .account-verification-status[data-tone="good"] { color: #047857; }
html[data-theme="dark"] #accountModal #accountForm .account-verification-status { color: #bdc6d5; }
html[data-theme="dark"] #accountModal #accountForm .account-verification-status[data-tone="warn"] { color: #ff9b90; }
html[data-theme="dark"] #accountModal #accountForm .account-verification-status[data-tone="good"] { color: #81d9b1; }
#accountModal #hardaskEmailCaptcha { min-width: 0; }
#accountModal #hardaskEmailCaptcha[hidden] { display: none; }
#accountModal #hardaskEmailCaptcha > button { max-width: 100%; min-height: 44px; white-space: normal; }

.account-modal-grid input[autocomplete="username"],
.account-modal-grid input[type="password"] {
  min-height: 48px;
}

#accountModal .account-password-field { display: grid; gap: 8px; min-width: 0; }
#accountModal .account-password-input-row { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
#accountModal .account-password-input-row input { flex: 1; width: 0; min-width: 0; }
#accountModal #accountPasswordToggle { flex: 0 0 auto; min-width: 60px; padding: 8px 12px; }
#accountModal #accountForm .account-password-error { margin: 0; color: #b42318 !important; font-size: 14px; }
#accountModal .account-password-error[hidden] { display: none; }
html[data-theme="dark"] #accountModal #accountForm .account-password-error { color: #ff9b90 !important; }

.account-form-status[data-tone="warn"] {
  border-color: rgba(220, 38, 38, 0.18);
  background: rgba(254, 242, 242, 0.96);
  color: #b42318;
}

.account-form-status[data-tone="good"] {
  border-color: rgba(5, 150, 105, 0.18);
  background: rgba(236, 253, 245, 0.96);
  color: #047857;
}

.account-modal-card .form-actions {
  position: sticky;
  bottom: -1px;
  z-index: 2;
  margin-top: 16px;
  padding-top: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 18px);
}

body[data-account-state="local-profile"] .sidebar-account-card {
  border-color: rgba(245, 158, 11, 0.24) !important;
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 247, 237, 0.98)) !important;
}

html[data-theme="dark"] .account-auth-mode {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.72);
}

html[data-theme="dark"] .account-auth-mode button {
  color: #94a3b8;
}

html[data-theme="dark"] .account-auth-mode button[aria-selected="true"] {
  background: rgba(51, 65, 85, 0.96);
  color: #bfdbfe;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.28);
}

html[data-theme="dark"] .account-form-status[data-tone="warn"] {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
}

html[data-theme="dark"] .account-form-status[data-tone="good"] {
  border-color: rgba(52, 211, 153, 0.22);
  background: rgba(6, 78, 59, 0.24);
  color: #a7f3d0;
}

html[data-theme="dark"] .account-modal-card .form-actions {
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0), #101827 18px);
}

@media (max-width: 620px) {
  .account-modal-card {
    width: min(100%, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
  }

  .account-modal-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-modal-grid .full {
    grid-column: auto;
  }

  .account-auth-mode {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* source: v187-truthful-workflow.css */
/* First-batch functional presentation only: preserve existing product theme. */
body[data-active-panel="learning-records"] #personalLearningRecordsBoard {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 0 48px;
}
#personalLearningRecordsBoard details, #personalProjectAssetsBoard details,
.recruiter-profile-abilities details { margin-top: 12px; overflow-wrap: anywhere; }
#personalLearningRecordsBoard summary, #personalProjectAssetsBoard summary,
.recruiter-profile-abilities summary { cursor: pointer; color: var(--hw-primary, #3267e9); }
.xiaowen-final-coach__card p { line-height: 1.7; overflow-wrap: anywhere; }
.xiaowen-final-coach__card button:disabled { opacity: .55; cursor: default; }
/* A training session owns its flow row. Do not reuse the interview's hidden row. */
html:not(.react-student-embedded) body[data-active-panel="interview"][data-interview-session-kind="engineering-training"].interview-meeting-active #interviewStudio#interviewStudio {
  grid-template-rows: 64px auto minmax(0, 1fr) !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"][data-interview-session-kind="engineering-training"].interview-meeting-active #interviewStudio#interviewStudio > #engineeringTrainingFlow:not([hidden]) {
  display: grid !important;
  grid-row: 2 !important;
  position: relative !important;
  margin: 0 !important;
  min-height: 0 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"][data-interview-session-kind="engineering-training"].interview-meeting-active #interviewStudio#interviewStudio > .interview-main-dashboard {
  grid-row: 3 !important;
}

/* Hidden agent sections must not shift the flexible row onto action buttons. */
html:not(.react-student-embedded) body #companionPanel .companion-agent-workspace {
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}
html:not(.react-student-embedded) body #companionPanel .companion-agent-workspace > * {
  flex-shrink: 0;
}
html:not(.react-student-embedded) body #companionPanel #companionMessages.companion-messages {
  flex: 1 1 96px !important;
  align-content: start !important;
  gap: 8px !important;
}
html:not(.react-student-embedded) body #companionPanel #companionActions button {
  min-height: 44px !important;
  height: auto !important;
  padding: 10px 12px !important;
}


/* source: v188-workspace-clarity.css */
/* v188: compact, truthful task controls; existing color themes are retained. */
html:not(.react-student-embedded) body[data-active-panel="interview"].interview-meeting-active #interviewStudio#interviewStudio.interview-space-arena-open {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 0 !important;
  scroll-margin-top: 74px !important;
  padding: 0 0 calc(92px + var(--safe-bottom, 0px)) !important;
  height: calc(100dvh - 74px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 74px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewCoachRoom {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 80px !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(200px, 1fr) minmax(170px, .85fr) auto auto !important;
  grid-template-rows: auto !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  overflow: visible !important;
  border-radius: 14px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-training-title {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  gap: 10px !important;
  overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-training-avatar {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  overflow: hidden !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-training-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-training-title > div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewTopCandidateRoleMeta {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-profile-inline-btn {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-training-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  gap: 8px !important;
  overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio > #engineeringTrainingFlow:not([hidden]) {
  flex: 0 0 auto !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio > .interview-main-dashboard {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden auto !important;
  padding-bottom: 20px !important;
}
@media (min-width: 1180px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio > .interview-main-dashboard {
    grid-template-rows: max-content max-content !important;
    align-content: start !important;
  }
  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-question-card,
  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-meeting-stage-grid {
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-question-card {
    display: block !important;
  }
  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone,
  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-copilot-card {
    height: auto !important;
    min-height: 280px !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-waveform:not([data-audio-reactive="live"]) i,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-bottom-waveform:not([data-audio-reactive="live"]) i {
  height: 2px !important;
  min-height: 2px !important;
  transform: none !important;
  animation: none !important;
  background: #94a3b8 !important;
  box-shadow: none !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-waveform:not([data-audio-reactive="live"])::before,
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-waveform:not([data-audio-reactive="live"])::after {
  animation: none !important;
  background: #e2e8f0 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone:not([data-voice-state="live"]) .interview-answer-recording-pill {
  color: #64748b !important;
  background: #f1f5f9 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone:not([data-voice-state="live"]) .interview-answer-recording-pill strong { color: inherit !important; }
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone:not([data-voice-state="live"]) .interview-answer-recording-pill i {
  background: #94a3b8 !important;
  box-shadow: none !important;
  animation: none !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone[data-voice-state="processing"] .interview-answer-recording-pill {
  color: #9a6700 !important;
  background: #fff7df !important;
}
.engineering-bug-analysis {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  background: var(--surface-muted, #f8fafc);
}
.engineering-bug-analysis > summary {
  cursor: pointer;
  color: var(--hw-primary, #3267e9);
  line-height: 1.5;
  font-weight: 650;
}
.engineering-bug-analysis > summary:focus-visible {
  outline: 2px solid #4f6fff;
  outline-offset: 4px;
  border-radius: 4px;
}
.engineering-bug-analysis[open] > summary { margin-bottom: 12px; }
.engineering-bug-analysis p, .engineering-bug-analysis dd { overflow-wrap: anywhere; }
@media (max-width: 1179px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"].interview-meeting-active #interviewStudio#interviewStudio.interview-space-arena-open {
    padding-bottom: calc(116px + var(--safe-bottom, 0px)) !important;
  }
  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewCoachRoom {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-training-title { flex-wrap: wrap !important; }
  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-training-title > div { flex: 1 1 140px !important; }
}
@media (max-width: 640px) {
  html:not(.react-student-embedded) body[data-active-panel="interview"].interview-meeting-active #interviewStudio#interviewStudio.interview-space-arena-open { padding-bottom: calc(168px + var(--safe-bottom, 0px)) !important; }
  html:not(.react-student-embedded) body[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewCoachRoom { grid-template-columns: minmax(0, 1fr) !important; }
}
html[data-theme="dark"] .engineering-bug-analysis { background: #1e293b; border-color: #334155; }


/* source: v189-mobile-workspace.css */
/* Phone-only workspace layout. Desktop sizing and persisted sidebar stay intact. */
#mobileNavigationToggle, #mobileNavigationBackdrop, #mobileNavigationClose { display: none; }
@media (max-width: 767px) {
  html:has(body.mobile-navigation-enabled) { height: auto !important; min-height: 100% !important; overflow-y: auto !important; }
  html:has(body.mobile-navigation-open), body.mobile-navigation-open { overflow: hidden !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled {
    --mobile-toolbar-height: 162px;
    height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow: visible !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled .shell.shell {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled .shell > .main.main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 12px 28px !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled :is(#mobileNavigationDrawer, #workspaceSidebar) {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 15001 !important;
    width: min(304px, calc(100vw - 40px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 40px) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: auto !important;
    box-sizing: border-box !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-open :is(#mobileNavigationDrawer, #workspaceSidebar) {
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  :is(#mobileNavigationDrawer, #workspaceSidebar) :is(.brand, .brand-head, .menu, .sidebar-bottom-zone, .sidebar-account-card, .sidebar-account-button) {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    transform: none !important; visibility: visible !important; opacity: 1 !important;
  }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .brand { height: 92px !important; min-height: 92px !important; max-height: none !important; padding: 0 36px 0 0 !important; margin: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .brand-head { display: flex !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; flex-direction: column !important; align-items: flex-start !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .brand-icon-logo { display: none !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .brand-main-logo { display: grid !important; opacity: 1 !important; visibility: visible !important; width: 156px !important; min-width: 156px !important; height: 46px !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .brand-subtitle-text { display: block !important; width: auto !important; height: auto !important; opacity: 1 !important; font-size: 11px !important; text-align: left !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) #sidebarToggle { display: none !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .menu { flex: 1 0 auto !important; display: flex !important; flex-direction: column !important; gap: 4px !important; overflow: visible !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 44px !important; height: auto !important; max-height: none !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 10px !important; font-size: 15px !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) :is(.menu-item-label, .sidebar-account-copy) { display: block !important; opacity: 1 !important; visibility: visible !important; width: auto !important; font-size: 15px !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .workspace-nav-chevron { display: block !important; margin-left: auto !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .workspace-nav-subitem { padding-left: 32px !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; justify-content: flex-start !important; text-indent: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item-label { height: auto !important; min-height: 22px !important; max-height: none !important; line-height: 1.5 !important; transform: none !important; position: static !important; overflow: visible !important; white-space: normal !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item-icon { position: static !important; flex: 0 0 22px !important; width: 22px !important; height: 22px !important; margin: 0 !important; transform: none !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-button { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-copy { width: auto !important; max-width: none !important; min-width: 0 !important; flex: 1 !important; text-align: left !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .brand-head { align-items: flex-start !important; justify-content: flex-start !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) :is(.brand, .brand-head, .menu, .workspace-nav-group, .workspace-nav-children, .sidebar-bottom-zone, .sidebar-account-card, .sidebar-account-button) { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item { width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 10px 12px !important; box-sizing: border-box !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .workspace-nav-subitem { padding-left: 32px !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item-label { width: auto !important; min-width: 0 !important; max-width: none !important; flex: 1 1 auto !important; margin: 0 !important; text-align: left !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-card { padding: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-copy { display: block !important; width: auto !important; min-width: 80px !important; max-width: none !important; flex: 1 1 auto !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-copy strong { width: auto !important; max-width: none !important; display: block !important; text-indent: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .workspace-nav-children { display: none !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .workspace-nav-group.is-open > .workspace-nav-children { display: grid !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-bottom-zone { margin-top: auto !important; padding: 8px 0 0 !important; border: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-button { display: flex !important; gap: 10px !important; padding: 10px !important; min-height: 58px !important; height: auto !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) #sidebarAccountAvatar { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; flex: 0 0 36px !important; padding: 0 !important; aspect-ratio: 1 !important; box-sizing: border-box !important; border-radius: 50% !important; overflow: hidden !important; }
  #mobileNavigationToggle, #mobileNavigationClose {
    display: grid !important; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--border-color, #dce4ef); border-radius: 12px;
    background: var(--surface, #fff); color: var(--text-primary, #25364f); font-size: 22px; cursor: pointer;
  }
  #mobileNavigationToggle { position: fixed; top: 8px; left: 12px; z-index: 1001; }
  #mobileNavigationClose { position: absolute; top: 12px; right: 12px; z-index: 100; box-shadow: none !important; background: #fff !important; color: #334155 !important; }
  #mobileNavigationClose::before, #mobileNavigationClose::after { content: none !important; }
  #mobileNavigationBackdrop:not([hidden]) { display: block !important; position: fixed; inset: 0; z-index: 15000; border: 0; background: rgb(15 23 42 / 40%); }
  #mobileNavigationToggle:focus-visible, #mobileNavigationClose:focus-visible { outline: 3px solid #5076f5; outline-offset: 2px; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled .main.main > .topbar.topbar {
    position: sticky !important; top: 0 !important; left: auto !important; right: auto !important;
    width: calc(100% + 24px) !important; min-width: 0 !important; height: auto !important; min-height: 60px !important; max-height: none !important;
    margin: 0 -12px 16px !important; padding: 8px 12px 8px 64px !important;
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important;
    border-radius: 0 !important; box-sizing: border-box !important; z-index: 1000 !important;
  }
  body.mobile-navigation-enabled .topbar .topbar-left { min-width: 0 !important; }
  :is(#hw-v189-mobile, html):not(.react-student-embedded) body.mobile-navigation-enabled .main.main > .topbar :is(.topbar-left, .topbar-title-stack, #pageTitle) { width: auto !important; min-width: 0 !important; max-width: none !important; flex: 1 !important; display: block !important; overflow: visible !important; white-space: normal !important; }
  body.mobile-navigation-enabled #pageTitle { font-size: 18px !important; line-height: 1.4 !important; }
  body.mobile-navigation-enabled .topbar .topbar-title-stack, body.mobile-navigation-enabled #pageTitle { display: block !important; opacity: 1 !important; visibility: visible !important; }
  body.mobile-navigation-enabled .topbar .topbar-center { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; min-width: 0 !important; }
  body.mobile-navigation-enabled .topbar .topbar-right { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; }
  body.mobile-navigation-enabled .topbar-search { width: 100% !important; min-width: 0 !important; height: 40px !important; }
  body.mobile-navigation-enabled #topbarCommandInput { min-width: 0 !important; width: 100% !important; font-size: 16px !important; }
  body.mobile-navigation-enabled #companionTopbarEntry { min-width: 64px !important; width: auto !important; padding: 5px 8px !important; }
  body.mobile-navigation-enabled #companionTopbarEntry small { display: none !important; }
  body.mobile-navigation-enabled #debugTopbarActions { display: none !important; }
  body.mobile-navigation-enabled #globalAiSearchPanel { position: fixed !important; left: 12px !important; right: 12px !important; top: 110px !important; width: auto !important; max-height: calc(100dvh - 130px) !important; overflow: auto !important; }
  body.mobile-navigation-enabled #mobileActionDock { display: none !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled .main.main > .panel.active {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    margin: 0 !important; padding: 0 0 24px !important; box-sizing: border-box !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] .main.main > .panel.active { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
  body.mobile-navigation-enabled :is(.section-card, .hero-card, .info-card, .training-rpg-shell, .engineering-bug-card) { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  body.mobile-navigation-enabled :is(.section-card, .hero-card, .info-card) { animation: none !important; transform: none !important; }
  body.mobile-navigation-enabled :is(.landing-final-grid, .landing-first-use-layout, .training-rpg-core, .training-rpg-hero, .engineering-bug-grid, .section-grid) { grid-template-columns: minmax(0, 1fr) !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html):not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="landing"] .main.main > .panel.active > .landing-home-grid { width: 100% !important; padding: 0 !important; margin: 0 !important; gap: 16px !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html):not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="landing"] .main.main > .panel.active > .landing-home-grid > .landing-action-plan { grid-template-columns: minmax(0, 1fr) !important; padding: 0 !important; }
  body.mobile-navigation-enabled .landing-final-goal-card::after { content: none !important; }
  body.mobile-navigation-enabled .landing-action-plan::after { content: none !important; }
  :is(#hw-v189-mobile, html) body.mobile-navigation-enabled :is(.landing-action-plan, .landing-final-goal-card)::after { content: none !important; }
  body.mobile-navigation-enabled #trainingDashboardDrawer[aria-hidden="true"] { display: none !important; visibility: hidden !important; pointer-events: none !important; }
  body.mobile-navigation-enabled :is(.training-rpg-path, .training-rpg-next-stage, .engineering-bug-grid) { min-width: 0 !important; }
  body.mobile-navigation-enabled :is(.section-head, .engineering-bug-toolbar, .training-rpg-footer) { flex-wrap: wrap !important; gap: 12px !important; }
  body.mobile-navigation-enabled :is(.section-head h3, .training-rpg-hero h3, .engineering-bug-hero h3) { font-size: 25px !important; overflow-wrap: anywhere; }
  body.mobile-navigation-enabled :is(input, select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 16px; }
  body.mobile-navigation-enabled .modal-card { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow-y: auto !important; box-sizing: border-box !important; }
  body.mobile-navigation-enabled .modal-backdrop { z-index: 20000 !important; padding: 12px !important; box-sizing: border-box !important; }
  body.mobile-navigation-enabled #accountForm .account-auth-mode { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; }
  body.mobile-navigation-enabled #accountForm .account-auth-mode button { min-width: 0 !important; min-height: 44px !important; padding: 8px 4px !important; font-size: 12px !important; }
  body.mobile-navigation-enabled #accountForm .form-actions { position: static !important; margin-top: 16px !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"].interview-meeting-active #interviewStudio#interviewStudio.interview-space-arena-open {
    height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
    padding-bottom: calc(var(--mobile-toolbar-height) + 16px + env(safe-area-inset-bottom)) !important; scroll-margin-top: 120px !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewCoachRoom {
    grid-template-columns: minmax(0, 1fr) !important; padding: 12px !important; gap: 10px !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio :is(.interview-training-title, .interview-training-actions) { flex-wrap: wrap !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio > .interview-main-dashboard {
    display: flex !important; flex-direction: column !important; gap: 14px !important; overflow: visible !important; height: auto !important; max-height: none !important; flex: none !important; padding: 0 !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio :is(.interview-workspace-card, .interview-arena-stack) {
    display: flex !important; flex-direction: column !important; gap: 14px !important;
    padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; flex: none !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-workspace-card > .section-head { display: none !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio :is(.interview-question-card, .interview-meeting-stage-grid, .interview-question-dialog, #interviewAnswerZone, .interview-copilot-card) {
    width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-question-card { display: block !important; padding: 14px !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-meeting-stage-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-interviewer-stage { min-height: 90px !important; max-height: none !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-question-footer { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone { padding: 14px !important; }
  body.mobile-navigation-enabled #engineeringTrainingFlow .engineering-training-steps { overflow: auto !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] .interview-bottom-actionbar.interview-bottom-actionbar {
    position: fixed !important; inset: auto 0 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important; display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important; gap: 7px !important; box-sizing: border-box !important; z-index: 900 !important;
  }
  body.mobile-navigation-enabled .interview-bottom-actionbar .interview-bottom-context { display: flex !important; align-items: center !important; gap: 12px !important; padding: 0 !important; }
  body.mobile-navigation-enabled #interviewRecordingTimer { font-size: 15px !important; }
  body.mobile-navigation-enabled .interview-bottom-waveform { display: none !important; }
  body.mobile-navigation-enabled .interview-bottom-actionbar .interview-bottom-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100% !important; gap: 7px !important; padding: 0 !important; }
  body.mobile-navigation-enabled .interview-bottom-actionbar .interview-bottom-actions-right { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.mobile-navigation-enabled .interview-bottom-actionbar button { width: 100% !important; min-width: 0 !important; min-height: 44px !important; padding: 8px 6px !important; font-size: 14px !important; white-space: nowrap !important; }
  html[data-theme="dark"] body.mobile-navigation-enabled :is(#mobileNavigationToggle, #mobileNavigationClose) { background: #172338 !important; color: #e2e8f0 !important; border-color: #35435a !important; }
  html[data-theme="dark"] body.mobile-navigation-enabled :is(#mobileNavigationDrawer, #workspaceSidebar) { background: #0f1b2e !important; color: #e2e8f0 !important; }
  html[data-theme="light"] body.mobile-navigation-enabled :is(#mobileNavigationDrawer, #workspaceSidebar) { background: #f8faff !important; color: #334155 !important; }
  :is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled :is(.training-rpg-shell, .training-rpg-next-stage, .landing-final-goal-card, .landing-final-ai-plan, .landing-final-growth-feedback, .interview-video-tile) { background: #172338 !important; color: #e2e8f0 !important; border-color: #34435c !important; }
  :is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled :is(.training-rpg-shell, .landing-final-goal-card, .landing-final-ai-plan, .interview-video-tile) :is(h3, h4, strong, .landing-greeting-line) { color: #e2e8f0 !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled .training-rpg-shell { background: #172338 !important; border-color: #34435c !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled :is(.training-rpg-xp, .training-rpg-roadmap) { background: #223148 !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled .training-rpg-shell :is(h2, h3, h4, strong) { color: #e2e8f0 !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled .training-rpg-shell :is(p, small) { color: #bac9df !important; }
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* source: p04-resume-profile.css */
/* P04: a scoped, progressively disclosed workflow; existing workspace tokens and navigation stay intact. */
.p04-profile {
  --p04-bg: var(--panel, #fff);
  --p04-soft: #f5f7fb;
  --p04-text: #202b3e;
  --p04-muted: #58677d;
  --p04-line: #d9e0ea;
  --p04-blue: #245ee8;
  --p04-warning: #795315;
  --p04-warning-bg: #fff8e9;
  color: var(--p04-text);
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 4px calc(40px + env(safe-area-inset-bottom, 0px));
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
html[data-theme="dark"] .p04-profile {
  --p04-bg: #111e30;
  --p04-soft: #18283e;
  --p04-text: #e9eff9;
  --p04-muted: #b5c3d8;
  --p04-line: #40516b;
  --p04-blue: #245ee8;
  --p04-warning: #f4d18c;
  --p04-warning-bg: #352a1b;
}
.p04-profile * { box-sizing: border-box; }
#resumeProfileWorkspace [hidden] { display: none !important; }
.p04-profile h2, .p04-profile h3, .p04-profile p { color: inherit; margin: 0; }
.p04-profile h2 { font-size: clamp(24px, 4vw, 32px); letter-spacing: -.02em; }
.p04-profile h3 { font-size: 19px; }
.p04-profile .p04-muted { color: var(--p04-muted); }
.p04-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.p04-header p { margin-top: 6px; }
.p04-steps { display: flex; list-style: none; padding: 0; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; color: var(--p04-muted); }
.p04-steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.p04-steps li + li::before { content: "›"; margin-right: 4px; }
.p04-steps [aria-current="step"] { color: var(--p04-text); font-weight: 700; }
.p04-card { background: var(--p04-bg); border: 1px solid var(--p04-line); border-radius: 16px; padding: 24px; margin-bottom: 16px; min-width: 0; }
.p04-card > * + * { margin-top: 16px; }
.p04-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.p04-grid > * { min-width: 0; }
.p04-profile label { display: block; color: var(--p04-text); font-size: 15px; font-weight: 600; }
.p04-profile label > input, .p04-profile label > textarea, .p04-profile label > select { margin-top: 7px; }
.p04-profile :is(input:not([type="checkbox"]), textarea, select) {
  display: block; width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--p04-line);
  border-radius: 9px; background: var(--p04-bg); color: var(--p04-text); padding: 10px 12px; font: inherit;
}
.p04-profile textarea { resize: vertical; }
.p04-profile textarea::placeholder { color: var(--p04-muted); opacity: 1; }
.p04-profile input[type="file"] { font-size: 14px; }
.p04-profile input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--p04-blue); margin: 3px 0 0; }
.p04-profile .p04-check { display: flex; align-items: start; gap: 10px; font-weight: 400; }
.p04-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.p04-profile .p04-button {
  appearance: none; min-height: 44px; padding: 10px 18px; border: 1px solid var(--p04-line); border-radius: 9px;
  background: var(--p04-bg); color: var(--p04-text); font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: none; transform: none; white-space: normal; line-height: 1.5;
}
.p04-profile .p04-button.p04-primary { background: var(--p04-blue); color: #fff; border-color: var(--p04-blue); }
/* Existing v200 applies !important colors to every dark-theme button. Keep the
 * new workflow's single primary action white on blue (WCAG contrast > 5:1). */
html[data-theme="dark"] #resumeProfileWorkspace .p04-button.p04-primary {
  background: #245ee8 !important; color: #fff !important; border-color: #245ee8 !important;
}
.p04-profile .p04-button:hover:not(:disabled) { filter: brightness(.96); }
.p04-profile .p04-button:disabled { cursor: not-allowed; opacity: .6; }
.p04-profile :is(button, input, select, textarea, summary, a):focus-visible { outline: 3px solid #6e9eff; outline-offset: 3px; }
.p04-profile details { border-top: 1px solid var(--p04-line); padding-top: 14px; }
.p04-profile summary { cursor: pointer; color: var(--p04-muted); min-height: 36px; padding: 4px 0; }
.p04-profile details > :not(summary) { margin-top: 12px; }
.p04-fact { padding: 18px 0; border-top: 1px solid var(--p04-line); }
.p04-fact:first-of-type { margin-top: 12px; }
.p04-fact-text { white-space: pre-wrap; font-weight: 600; }
.p04-fact .p04-grid { margin-top: 12px; }
.p04-source { margin: 0; padding: 12px 16px; border-left: 3px solid var(--p04-line); background: var(--p04-soft); white-space: pre-wrap; color: var(--p04-text); }
.p04-notice { padding: 14px 16px; border-radius: 10px; background: var(--p04-soft); color: var(--p04-text); margin-bottom: 16px; }
.p04-notice[data-tone="warning"] { background: var(--p04-warning-bg); color: var(--p04-warning); }
.p04-notice .p04-actions { margin-top: 10px; }
.p04-state { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 7px; background: var(--p04-soft); color: var(--p04-muted); font-size: 14px; }
.p04-version-list { list-style: none; padding: 0; margin: 0; }
.p04-version-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--p04-line); }
.p04-profile .p04-small { font-size: 14px; }
.p04-interview-entry { margin-bottom: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.p04-interview-entry p { margin: 0; flex: 1; min-width: 180px; }
@media (max-width: 720px) {
  .p04-profile { padding-top: 12px; }
  .p04-header { flex-direction: column; gap: 10px; }
  .p04-card { padding: 18px 16px; border-radius: 12px; }
  .p04-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .p04-actions .p04-primary { width: 100%; }
  .p04-version-list li { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .p04-profile * { scroll-behavior: auto; transition: none; } }


/* source: p10-workspace.css */
/* P10 reviewed scopes only: main journey, its two hosts and navigation labels. */
.p10-workspace {
  --p10-bg: #fff; --p10-soft: #f4f7fc; --p10-text: #202b3e; --p10-muted: #536278; --p10-line: #d9e0ea;
  max-width: 1060px; margin: 0 auto; padding: 32px 12px calc(48px + env(safe-area-inset-bottom, 0px));
  color: var(--p10-text); font-size: 16px; line-height: 1.7; overflow-wrap: anywhere;
}
html[data-theme="dark"] .p10-workspace {
  --p10-bg: #111e30; --p10-soft: #18283e; --p10-text: #e9eff9; --p10-muted: #b5c3d8; --p10-line: #40516b;
}
.p10-workspace * { box-sizing: border-box; }
.p10-workspace :is(h1,h2,h3,p) { color: inherit; margin: 0; }
.p10-workspace h1 { font-size: clamp(25px, 3.3vw, 38px); line-height: 1.35; letter-spacing: -.02em; margin: 10px 0 16px; }
.p10-workspace h2 { font-size: 21px; line-height: 1.5; }
.p10-workspace h3 { font-size: 17px; }
/* Historical dashboard paragraph rules are more specific than the module root. */
#homeDashboard.p10-journey-enabled #p10Home.p10-workspace p,
#p10InterviewReports #p10Reports.p10-workspace p { font-size: 16px !important; line-height: 1.7 !important; }
#homeDashboard.p10-journey-enabled #p10Home.p10-workspace :is(.p10-eyebrow,.p10-muted),
#p10InterviewReports #p10Reports.p10-workspace :is(.p10-eyebrow,.p10-muted) { font-size: 14px !important; }
.p10-workspace .p10-heading { margin-bottom: 28px; max-width: 780px; }
.p10-workspace .p10-heading > p { color: var(--p10-muted); }
.p10-workspace .p10-eyebrow { font-size: 14px; font-weight: 600; color: var(--p10-muted); }
.p10-workspace :is(.p10-card,.p10-hero) { background: var(--p10-bg); border: 1px solid var(--p10-line); border-radius: 16px; padding: 24px; min-width: 0; margin-bottom: 20px; }
.p10-workspace .p10-hero { background: var(--p10-soft); padding: 30px; }
.p10-workspace :is(.p10-card,.p10-hero) > * + * { margin-top: 14px; }
.p10-workspace .p10-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }
.p10-workspace .p10-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.p10-workspace .p10-muted { color: var(--p10-muted); font-size: 14px; }
.p10-workspace .p10-button { appearance: none; min-height: 44px; padding: 10px 18px; border: 1px solid var(--p10-line); border-radius: 9px; background: var(--p10-bg); color: var(--p10-text); font: inherit; font-weight: 600; line-height: 1.5; white-space: normal; cursor: pointer; box-shadow: none; transform: none; }
.p10-workspace .p10-button.p10-primary { background: #245ee8 !important; color: #fff !important; border-color: #245ee8 !important; padding: 14px 24px; }
.p10-workspace .p10-button:disabled { color: var(--p10-muted); background: var(--p10-soft); cursor: not-allowed; }
.p10-workspace :is(button,summary):focus-visible { outline: 3px solid #6e9eff; outline-offset: 3px; }
.p10-workspace summary { cursor: pointer; min-height: 40px; font-weight: 600; }
.p10-workspace .p10-answer { border-top: 1px solid var(--p10-line); padding: 18px 0; }
.p10-workspace .p10-answer-text { white-space: pre-wrap; margin-top: 10px; }
#homeDashboard.p10-journey-enabled > :not(#p10Home) { display: none !important; }
#homeDashboard.p10-journey-enabled #p10Home { display: block !important; width: 100%; min-width: 0; }
#homeDashboard.p10-journey-enabled { display: none; }
#homeDashboard.p10-journey-enabled.active { display: block !important; }
#p10InterviewReports.active { display: block; }
@media (max-width: 720px) {
  .p10-workspace { padding: 22px 4px calc(44px + env(safe-area-inset-bottom, 0px)); font-size: 16px; }
  .p10-workspace .p10-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .p10-workspace :is(.p10-card,.p10-hero) { padding: 20px; }
  .p10-workspace .p10-actions { align-items: stretch; }
  .p10-workspace .p10-actions > button { flex: 1 1 100%; }
}

/* Product introduction lives in the existing home, not a second app/account.
   A short entrance animation settles once; no autoplay or moving controls. */
html.hw-shell-v2 body #hwWorkbenchMain #homeDashboard #p10Home {
  --p10-bg:var(--hw-ui-surface); --p10-soft:var(--hw-ui-hover);
  --p10-text:var(--hw-ui-text); --p10-muted:var(--hw-ui-muted); --p10-line:var(--hw-ui-line);
  max-width:1160px; padding:12px 0 calc(36px + env(safe-area-inset-bottom,0px));
}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-home {display:grid;gap:64px;min-width:0;color:var(--hw-ui-text);font-family:var(--font-ui)}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-hero {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:32px;padding:8px 0 24px}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-copy {min-width:0}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-eyebrow {font-size:12px!important;line-height:1.6!important;letter-spacing:.06em;font-weight:600;color:var(--hw-ui-accent)!important;margin:0 0 14px}
#hwWorkbenchMain #homeDashboard #p10Home #hwIntroTitle {font-size:clamp(30px,3.7vw,48px)!important;line-height:1.22!important;font-weight:650!important;letter-spacing:-.035em;margin:0 0 24px;color:var(--hw-ui-text)!important}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-lead {max-width:34em;color:var(--hw-ui-muted)!important;font-size:16px!important;line-height:1.9!important;margin:0 0 24px}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-actions {display:flex;flex-wrap:wrap;gap:10px}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-home .p10-button {min-height:46px;padding:11px 16px;border-radius:14px;font-size:15px;line-height:1.5;transition:background-color .15s ease}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-home .p10-button.p10-primary {background:var(--hw-ui-primary,var(--hw-ui-accent))!important;border-color:var(--hw-ui-primary,var(--hw-ui-accent))!important;color:var(--hw-ui-on-primary,#fff)!important}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-note {font-size:13px!important;line-height:1.7!important;color:var(--hw-ui-muted)!important;margin:14px 0 0}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-text-link {min-height:44px;background:transparent!important;color:var(--hw-ui-text)!important;border:0;padding:8px 0;text-align:left;text-decoration:underline;text-underline-offset:4px;font:inherit;font-size:14px;cursor:pointer;box-shadow:none}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-visual {min-width:0;position:relative;overflow:hidden;margin:0;border-radius:28px;background:#111316!important;border:1px solid #282b30;color:#f7f7f8;isolation:isolate}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-visual>img {display:block;width:100%;height:auto;aspect-ratio:1.24;object-fit:cover;object-position:50% 45%;border:0;border-radius:0;margin:0}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-lockup {position:absolute;left:22px;top:20px;z-index:1;display:flex;gap:10px;align-items:center;color:#fff!important;text-shadow:0 2px 10px #0008}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-lockup .hw-brand-mark {background:#ef9787!important}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-lockup strong {display:block;font-size:23px;line-height:1.25;letter-spacing:.06em;color:#fff!important;font-weight:650}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-lockup small {display:block;color:#d9dce1!important;font-size:10px;letter-spacing:.2em;font-weight:600;line-height:1.5}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-visual figcaption {position:relative;display:grid;gap:9px;padding:24px;background:#16191d!important;color:#fff!important}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-visual figcaption span {font-size:10px;letter-spacing:.16em;font-weight:600;color:#b4bbc5!important}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-visual figcaption strong {font-size:clamp(18px,1.8vw,22px);line-height:1.5;font-weight:600;color:#f7f7f8!important}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-section-heading {margin:0 0 24px}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-home h2 {font-size:clamp(22px,2.3vw,28px)!important;line-height:1.4!important;color:var(--hw-ui-text)!important;font-weight:650!important;letter-spacing:-.025em;margin:0}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-home h3 {font-size:18px!important;line-height:1.5!important;font-weight:600!important;color:var(--hw-ui-text)!important;margin:0 0 8px}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-path ol {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-path li {display:flex;gap:14px;align-items:flex-start;min-width:0;padding:22px 0;border-top:1px solid var(--hw-ui-line)}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-path li>span {display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;background:var(--hw-ui-soft)!important;color:var(--hw-ui-accent)!important;border-radius:12px;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
#hwWorkbenchMain #homeDashboard #p10Home :is(.hw-intro-path,.hw-intro-benefits,.hw-intro-plan,.hw-intro-help) p {color:var(--hw-ui-muted)!important;font-size:14px!important;line-height:1.8!important}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-benefits {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-benefits article {padding:24px;border:1px solid var(--hw-ui-line);background:var(--hw-ui-surface)!important;border-radius:20px;min-width:0}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-benefits article>span {display:block;font:400 26px/1.5 system-ui;color:var(--hw-ui-accent)!important;margin-bottom:18px}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-plan-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-plan {display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;padding:28px;border:1px solid var(--hw-ui-line);border-radius:24px;background:var(--hw-ui-surface)!important}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-plan .p10-button {margin-top:auto}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-tag {display:inline-block;border-radius:7px;padding:4px 8px;font-size:12px;background:var(--hw-ui-soft)!important;color:var(--hw-ui-accent)!important;font-weight:600}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-plan .hw-intro-plan-value {font-size:30px!important;line-height:1.5!important;font-weight:650;color:var(--hw-ui-text)!important;letter-spacing:-.025em}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-plan-value span {font-size:14px;letter-spacing:0;font-weight:400;color:var(--hw-ui-muted)!important}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-help {max-width:800px;width:100%;margin:auto}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-help h2 {margin-bottom:20px}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-help details {border-top:1px solid var(--hw-ui-line);padding:8px 0;background:transparent!important}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-help summary {min-height:48px;padding:12px 0;font-size:15px;line-height:24px;color:var(--hw-ui-text)!important}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-help details p {margin:0 0 16px}
#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-help details .p10-button {margin-bottom:12px}
@media(max-width:1100px){
  #hwWorkbenchMain #homeDashboard #p10Home .hw-intro-hero {gap:24px;grid-template-columns:minmax(0,1fr)}
  #hwWorkbenchMain #homeDashboard #p10Home .hw-intro-visual>img {aspect-ratio:1.8}
}
@media(max-width:767px){
  #hwWorkbenchMain #homeDashboard #p10Home .hw-intro-home {gap:40px}
  #hwWorkbenchMain #homeDashboard #p10Home .hw-intro-hero {padding:8px 0;gap:24px}
  #hwWorkbenchMain #homeDashboard #p10Home #hwIntroTitle {font-size:34px!important;margin-bottom:16px}
  #hwWorkbenchMain #homeDashboard #p10Home .hw-intro-lead {font-size:15px!important;margin-bottom:20px}
  #hwWorkbenchMain #homeDashboard #p10Home .hw-intro-actions>.p10-button {flex:1 1 100%;width:100%}
  #hwWorkbenchMain #homeDashboard #p10Home .hw-intro-visual {border-radius:20px}
  #hwWorkbenchMain #homeDashboard #p10Home .hw-intro-visual>img {aspect-ratio:1.35}
  #hwWorkbenchMain #homeDashboard #p10Home .hw-intro-lockup {top:16px;left:18px}
  #hwWorkbenchMain #homeDashboard #p10Home .hw-intro-visual figcaption {padding:20px}
  #hwWorkbenchMain #homeDashboard #p10Home :is(.hw-intro-path ol,.hw-intro-benefits,.hw-intro-plan-grid) {grid-template-columns:minmax(0,1fr);gap:12px}
  #hwWorkbenchMain #homeDashboard #p10Home .hw-intro-path li {padding:16px 0}
  #hwWorkbenchMain #homeDashboard #p10Home :is(.hw-intro-plan,.hw-intro-benefits article) {padding:22px}
}
@media(prefers-reduced-motion:no-preference){#hwWorkbenchMain #homeDashboard #p10Home .hw-intro-visual {animation:hw-intro-arrive .7s ease-out both}}
@keyframes hw-intro-arrive {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}


/* source: resume-practice.css */
/* Scoped to the new bounded experience-practice view. Shared brand/theme tokens. */
body[data-interview-workspace="training"] #resumePracticeWorkspace,
body[data-interview-workspace="legacy"] #resumePracticeWorkspace,
body[data-interview-workspace="resume"] #resumePracticeLegacyTools,
body[data-interview-workspace="resume"][data-active-panel="interview"] .interview-bottom-actionbar,
body[data-interview-workspace="resume"][data-active-panel="interview"] #mobileActionDock { display: none !important; }
body[data-interview-workspace="training"] #resumePracticeLegacyTools > summary,
body[data-interview-workspace="legacy"] #resumePracticeLegacyTools > summary { display: none !important; }
body[data-interview-workspace="training"] #resumePracticeLegacyTools,
body[data-interview-workspace="legacy"] #resumePracticeLegacyTools { border: 0; max-width: none; margin: 0; }
html:root body .rp-workspace {
  --rp-bg: var(--hw-ui-bg, #f5f6f8); --rp-surface: var(--hw-ui-surface, #fff);
  --rp-text: var(--hw-ui-text, #20252c); --rp-muted: var(--hw-ui-muted, #66717e);
  --rp-line: var(--hw-ui-line, #e2e5ea); --rp-hover: var(--hw-ui-hover, #f3f4f6);
  --rp-primary: var(--hw-ui-primary, #a63d32);
  max-width: 1240px; margin: 0 auto; padding: 28px 28px 52px; color: var(--rp-text); background: transparent !important; font-size: 15px; line-height: 1.7;
}
html:root body .rp-workspace * { box-sizing: border-box; min-width: 0; }
/* Dialogue v2: one scrolling history and one composer in the same grid. The
   composer occupies layout space (including the mobile keyboard), never an
   overlay above an answer. All colors inherit the existing brand/theme. */
html:root body .rp-workspace.rp-dialogue { box-sizing:border-box; max-width:860px; height:var(--rp-visible-height,min(860px,calc(100dvh - 146px))); min-height:min(420px,var(--rp-visible-height,420px)); padding:16px 22px 20px; display:flex; flex-direction:column; position:relative; gap:12px; }
html:root body .rp-dialogue .rp-dialogue-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--rp-line); flex:none; }
html:root body .rp-dialogue .rp-dialogue-title h1 { font-size:21px; margin:0 0 3px; }
html:root body .rp-dialogue .rp-dialogue-meta { display:flex; flex-wrap:wrap; gap:6px 12px; color:var(--rp-muted); font-size:14px; font-variant-numeric:tabular-nums; }
html:root body .rp-dialogue .rp-dialogue-top-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
html:root body .rp-dialogue .rp-dialogue-top-actions .rp-button { padding:8px 12px; }
html:root body .rp-dialogue .rp-dialogue-more { position:relative; }
html:root body .rp-dialogue .rp-dialogue-more summary { padding:10px; cursor:pointer; }
html:root body .rp-dialogue .rp-dialogue-more[open] { z-index:6; }
html:root body .rp-dialogue .rp-dialogue-more[open] .rp-dialogue-more-menu { position:absolute; inset:100% 0 auto auto; min-width:180px; max-width:calc(100vw - 32px); padding:8px; display:grid; gap:4px; background:var(--rp-surface)!important; border:1px solid var(--rp-line); border-radius:12px; box-shadow:0 8px 24px #0002; }
html:root body .rp-dialogue .rp-dialogue-more[open] .rp-button { display:block; width:100%; text-align:left; background:var(--rp-surface)!important; }
html:root body .rp-dialogue .rp-dialogue-timeline { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:8px 8px 20px; display:flex; flex-direction:column; gap:24px; }
html:root body .rp-dialogue .rp-dialogue-turn { display:flex; flex-direction:column; gap:14px; flex:none; }
html:root body .rp-dialogue .rp-dialogue-message { max-width:85%; padding:16px 18px; border-radius:14px; font-size:16px; line-height:1.8; }
html:root body .rp-dialogue .rp-dialogue-interviewer { align-self:flex-start; padding-left:0; }
html:root body .rp-dialogue .rp-dialogue-user { align-self:flex-end; background:var(--rp-hover)!important; border:0; }
html:root body .rp-dialogue :is(.rp-dialogue-question,.rp-dialogue-answer) { white-space:pre-wrap; overflow-wrap:anywhere; }
html:root body .rp-dialogue .rp-dialogue-speaker { font-size:13px; color:var(--rp-muted); margin-bottom:6px; }
html:root body .rp-dialogue .rp-dialogue-message-actions { display:flex; gap:8px; margin-top:8px; }
html:root body .rp-dialogue .rp-dialogue-message-actions .rp-button { min-height:36px; padding:4px 10px; font-size:13px; }
html:root body .rp-dialogue .rp-dialogue-answer-detail { border-top:1px solid var(--rp-line); margin-top:12px; padding-top:8px; }
html:root body .rp-dialogue .rp-dialogue-answer-detail summary { color:var(--rp-muted); cursor:pointer; min-height:36px; }
html:root body .rp-dialogue .rp-dialogue-answer-detail[open] > :not(summary) { margin-top:12px; }
html:root body .rp-dialogue .rp-dialogue-composer { flex:none; padding:12px 14px; border:1px solid var(--rp-line); border-radius:16px; background:var(--rp-surface)!important; box-shadow:0 3px 12px #0000000a; }
html:root body .rp-dialogue .rp-dialogue-input { display:block; width:100%; min-height:68px; max-height:160px; resize:vertical; padding:4px; border:0; border-radius:6px; color:var(--rp-text); background:transparent; font:inherit; font-size:16px; line-height:1.6; }
html:root body .rp-dialogue .rp-dialogue-input::placeholder { color:var(--rp-muted); }
/* The legacy dark theme applies !important blue fills to every textarea.
   Keep this composer on its own surface in idle, focused and disabled states. */
html:root body .rp-workspace.rp-dialogue .rp-dialogue-composer .rp-dialogue-input {
  background:transparent!important; color:var(--rp-text)!important;
  -webkit-text-fill-color:var(--rp-text)!important; caret-color:var(--rp-text);
}
html:root body .rp-workspace.rp-dialogue .rp-dialogue-composer .rp-dialogue-input::placeholder {
  color:var(--rp-muted)!important; -webkit-text-fill-color:var(--rp-muted)!important; opacity:1;
}
html:root body .rp-dialogue .rp-dialogue-composer-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
html:root body .rp-dialogue .rp-dialogue-input-actions { display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
html:root body .rp-dialogue .rp-dialogue-input-actions .rp-button { padding:8px 14px; }
html:root body .rp-dialogue .rp-dialogue-input-actions .rp-dialogue-icon-button { display:grid; place-items:center; padding:9px; width:44px; height:44px; flex:none; border-radius:50%; }
html:root body .rp-dialogue .rp-dialogue-status { color:var(--rp-muted); font-size:14px; }
html:root body .rp-dialogue .rp-dialogue-composer[data-rp-dictating] { border-color:var(--rp-primary); }
html:root body .rp-dialogue .rp-dialogue-input[readonly] { cursor:text; opacity:1; outline:none!important; box-shadow:none!important; }
html:root body .rp-dialogue .rp-dictation-processing { display:inline-block; width:18px; height:18px; flex:none; border:2px solid var(--rp-line); border-top-color:var(--rp-primary); border-radius:50%; animation:rp-dictation-spin .8s linear infinite; }
@keyframes rp-dictation-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { html:root body .rp-dialogue .rp-dictation-processing { animation:none; } }
html:root body .rp-dialogue .rp-dialogue-audio { font-size:13px; padding-top:8px; }
html:root body .rp-dialogue .rp-dialogue-audio summary { cursor:pointer; }
html:root body .rp-dialogue .rp-dialogue-audio[open] { display:grid; gap:8px; }
html:root body .rp-dialogue .rp-dictation-wave { height:32px; display:inline-flex; gap:3px; align-items:center; }
html:root body .rp-dialogue .rp-dictation-wave i { width:3px; height:4px; border-radius:3px; background:var(--rp-primary); transition:height .08s linear; }
html:root body .rp-dialogue .rp-dialogue-jump { position:absolute; bottom:165px; left:50%; transform:translateX(-50%); box-shadow:0 2px 8px #0002; }
html:root body .rp-dialogue .rp-dialogue-drawer-layer { position:absolute; inset:0; z-index:8; background:#0005!important; display:flex; justify-content:flex-end; border-radius:12px; }
html:root body .rp-dialogue .rp-dialogue-drawer { width:min(380px,100%); background:var(--rp-surface)!important; padding:20px; overflow:auto; box-shadow:-6px 0 28px #0002; }
html:root body .rp-dialogue .rp-dialogue-drawer-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:20px; }
html:root body .rp-dialogue .rp-dialogue-drawer > .rp-button { display:block; width:100%; margin-top:12px; }
html:root body .rp-dialogue .rp-dialogue-drawer .rp-question-card { display:block!important; position:static; padding:0; border:0; background:transparent!important; max-height:none; }
html:root body .rp-dialogue .rp-dialogue-drawer .rp-question-card > h2 { display:none; }
/* The shared container owns overlay/focus/history. These are content styles,
   scoped so an information panel never becomes a second interview workspace. */
html:root body .rp-workspace.rp-interview-panel-content { padding:0; margin:0; max-width:none; font-size:16px; display:grid; gap:16px; }
html:root body .rp-interview-panel-content .rp-question-card { display:block!important; padding:0; border:0; position:static; background:transparent!important; }
html:root body .rp-interview-panel-content .rp-question-card > h2 { display:none; }
html:root body .rp-interview-panel-content .rp-question-count { margin:0 0 16px; font-size:14px; line-height:1.6; }
html:root body .rp-interview-panel-content .rp-question-grid { display:grid; grid-template-columns:1fr; gap:8px; padding:3px; max-height:70dvh; overflow-y:auto; }
html:root body .rp-interview-panel-content .rp-question-number { position:relative; min-width:44px; min-height:64px; padding:12px; display:flex; align-items:flex-start; gap:12px; text-align:left; border-radius:10px; font-variant-numeric:tabular-nums; }
html:root body .rp-interview-panel-content .rp-question-mark { position:absolute; top:2px; right:4px; font-size:11px; }
html:root body .rp-interview-panel-content .rp-question-draft { position:absolute; bottom:0; right:4px; font-size:14px; }
html:root body .rp-interview-panel-content .rp-question-number[aria-current="step"] { outline:2px solid var(--rp-primary); outline-offset:1px; }
html:root body .rp-interview-panel-content .rp-question-legend { margin:16px 0; font-size:13px; color:var(--rp-muted); line-height:1.6; }
html:root body .rp-interview-panel-content .rp-panel-question { font-size:16px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
html:root body .rp-interview-panel-content .rp-panel-quote { padding:12px 0 12px 16px; border-left:2px solid var(--rp-line); color:var(--rp-muted); white-space:pre-wrap; overflow-wrap:anywhere; }
html:root body .rp-interview-panel-content > .rp-button { text-align:left; }
@media(max-width:700px) {
  html:root body .rp-workspace.rp-dialogue { height:var(--rp-visible-height,calc(100dvh - 105px)); min-height:min(300px,var(--rp-visible-height,300px)); padding:10px 8px max(10px,env(safe-area-inset-bottom)); gap:8px; }
  html:root body .rp-dialogue .rp-dialogue-header { flex-wrap:wrap; align-items:flex-start; gap:8px; }
  html:root body .rp-dialogue .rp-dialogue-title h1 { font-size:19px; }
  html:root body .rp-dialogue .rp-dialogue-top-actions { gap:4px; }
  html:root body .rp-dialogue .rp-dialogue-top-actions .rp-button { padding:6px 10px; min-height:40px; }
  html:root body .rp-dialogue .rp-dialogue-message { max-width:94%; padding:12px; }
  html:root body .rp-dialogue .rp-dialogue-interviewer { padding-left:0; }
  html:root body .rp-dialogue .rp-dialogue-timeline { gap:16px; padding:4px 2px 12px; }
  html:root body .rp-dialogue .rp-dialogue-composer { padding:10px; }
  html:root body .rp-dialogue .rp-dialogue-composer-footer { flex-wrap:wrap; }
  html:root body .rp-dialogue .rp-dialogue-input { min-height:54px; max-height:100px; }
}
html:root body .rp-workspace :is(h1,h2,h3,p,span,label,strong,ol,li,header,div,main,aside,article,summary,details,blockquote) { color: inherit; background: transparent; }
html:root body .rp-workspace :is(h1,h2,h3,p,blockquote) { margin: 0; overflow-wrap: anywhere; }
html:root body .rp-workspace h1 { font-size: 28px; font-weight: 650; line-height: 1.4; margin: 3px 0 8px; }
html:root body .rp-workspace h2 { font-size: 21px; font-weight: 650; line-height: 1.65; }
html:root body .rp-workspace h3 { font-size: 16px; font-weight: 600; line-height: 1.7; }
html:root body .rp-workspace .rp-muted { color: var(--rp-muted); font-size: 13px; }
html:root body .rp-workspace .rp-eyebrow { color: var(--rp-muted); font-size: 12px; }
html:root body .rp-workspace .rp-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
html:root body .rp-workspace .rp-badge { flex-shrink: 0; padding: 4px 9px; border: 1px solid var(--rp-line); border-radius: 6px; background: var(--rp-surface) !important; color: var(--rp-muted) !important; font-size: 12px; }
html:root body .rp-workspace .rp-notice { padding: 12px 16px; margin-bottom: 20px; border: 1px solid var(--rp-line); border-radius: 8px; background: var(--rp-hover) !important; color: var(--rp-muted); font-size: 13px; }
html:root body .rp-workspace .rp-error { border-left: 3px solid var(--rp-primary); color: var(--rp-text); }
html:root body .rp-workspace .rp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: start; }
html:root body .rp-interview .rp-layout { grid-template-columns: minmax(0, 1fr); }
html:root body .rp-reports .rp-layout { grid-template-columns: minmax(0, 1fr); }
html:root body .rp-reports > .rp-history { display: block; margin-bottom: 20px; padding: 12px 18px; }
html:root body .rp-reports > .rp-history > summary { min-height: 32px; cursor: pointer; font-size: 14px; font-weight: 600; }
html:root body .rp-reports > .rp-history[open] > :not(summary) { margin-top: 12px; }
html:root body .rp-interview .rp-run-progress { position: sticky; top: 0; z-index: 2; background: var(--rp-surface) !important; flex-wrap: wrap; }
html:root body .rp-workspace .rp-local-answer { border-left: 3px solid var(--rp-primary); }
html:root body .rp-workspace .rp-main { display: grid; gap: 16px; }
html:root body .rp-workspace .rp-card { padding: 24px; border: 1px solid var(--rp-line); border-radius: 12px; background: var(--rp-surface) !important; display: grid; gap: 16px; }
html:root body .rp-workspace .rp-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; list-style-position: inside; padding: 0; margin: 4px 0; font-size: 13px; }
html:root body .rp-workspace .rp-flow li { padding: 12px; border-radius: 8px; background: var(--rp-hover) !important; }
html:root body .rp-workspace .rp-consent { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; align-items: start; padding: 16px; border: 1px solid var(--rp-line); border-radius: 8px; font-size: 13px; cursor: pointer; }
html:root body .rp-workspace .rp-consent input { width: 17px; height: 17px; margin: 4px 0 0; accent-color: var(--rp-primary); }
html:root body .rp-workspace .rp-button { justify-self: start; min-height: 44px; padding: 10px 16px; border: 1px solid var(--rp-line) !important; border-radius: 7px; background: var(--rp-surface) !important; color: var(--rp-text) !important; font: inherit; font-size: 14px; font-weight: 550; line-height: 1.6; box-shadow: none; cursor: pointer; white-space: normal; text-align: left; }
html:root body .rp-workspace .rp-button.rp-primary { background: var(--rp-primary) !important; color: #fff !important; border-color: var(--rp-primary) !important; }
html:root body .rp-workspace .rp-button:disabled { opacity: .55; cursor: not-allowed; }
html:root body .rp-workspace .rp-button:hover:not(:disabled):not(.rp-primary) { background: var(--rp-hover) !important; }
html:root body .rp-workspace :is(button,input,textarea,summary):focus-visible { outline: 3px solid var(--hw-ui-focus,#6679b7); outline-offset: 3px; }
html:root body .rp-workspace .rp-session-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
html:root body .rp-workspace .rp-question { font-size: 22px; line-height: 1.7; white-space: pre-wrap; }
html:root body .rp-workspace .rp-answer-label { display: grid; gap: 8px; }
html:root body .rp-workspace .rp-answer { width: 100%; min-height: 190px; resize: vertical; padding: 15px; border: 1px solid var(--rp-line); border-radius: 8px; color: var(--rp-text) !important; background: var(--rp-bg) !important; font: inherit; line-height: 1.75; }
html:root body .rp-workspace .rp-answer::placeholder { color: var(--rp-muted); opacity: 1; }
html:root body .rp-workspace .rp-transcript { border-top: 1px solid var(--rp-line); padding-top: 12px; }
html:root body .rp-workspace .rp-transcript summary { min-height: 38px; cursor: pointer; font-size: 13px; color: var(--rp-muted); }
html:root body .rp-workspace .rp-transcript[open] > :not(summary) { margin-top: 12px; }
html:root body .rp-workspace .rp-original { white-space: pre-wrap; padding: 14px 16px; border-radius: 8px; background: var(--rp-hover) !important; }
html:root body .rp-workspace .rp-history { padding: 20px; gap: 12px; }
html:root body .rp-workspace .rp-history h2 { font-size: 16px; }
html:root body .rp-workspace .rp-history-item { width: 100%; font-size: 13px; }
html:root body .rp-workspace .rp-history-item[aria-current="true"] { border-left: 3px solid var(--rp-primary) !important; }
html:root body .rp-reports .rp-history-item { display: grid; gap: 4px; overflow-wrap: anywhere; }
html:root body .rp-reports .rp-history-item strong { font-weight: 600; }
html:root body .rp-reports .rp-report-summary { display: grid; gap: 12px; padding: 18px; border-radius: 8px; background: var(--rp-hover) !important; }
html:root body .rp-reports .rp-report-summary .rp-primary { margin-top: 4px; }
html:root body #p10Reports[hidden] { display: none !important; }
html:root body .rp-workspace .rp-history-empty { padding-block: 12px; color: var(--rp-muted); font-size: 13px; }
html:root body .rp-workspace .rp-report-item { display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--rp-line); }
html:root body .rp-workspace .rp-label { font-size: 12px; color: var(--rp-muted); padding-top: 4px; }
html:root body .rp-workspace .rp-quote { padding: 12px 16px; border-left: 3px solid var(--rp-primary); background: var(--rp-hover) !important; white-space: pre-wrap; }
html:root body .rp-workspace .rp-suggestion { white-space: pre-wrap; }
html:root body .rp-workspace .rp-voice { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--rp-line); border-radius: 10px; background: var(--rp-bg) !important; }
html:root body .rp-workspace .rp-voice-option { display: flex; align-items: start; gap: 9px; font-size: 13px; color: var(--rp-muted); cursor: pointer; }
html:root body .rp-workspace .rp-voice-option input { flex: 0 0 auto; width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--rp-primary); }
html:root body .rp-workspace .rp-voice-status { font-size: 14px; }
html:root body .rp-workspace .rp-voice-headline { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
html:root body .rp-workspace .rp-voice-timer { color: var(--rp-muted); font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: .04em; flex-shrink: 0; }
html:root body .rp-workspace .rp-recording-notice { border: 1px solid var(--rp-line); border-radius: 8px; padding: 16px; display: grid; gap: 10px; }
html:root body .rp-workspace .rp-recording-explanation { display: grid; gap: 10px; color: var(--rp-muted); font-size: 13px; }
html:root body .rp-workspace .rp-saved-audio[open] { display: grid; gap: 8px; }
html:root body .rp-workspace .rp-voice-actions { display: flex; flex-wrap: wrap; gap: 12px; }
html:root body .rp-workspace .rp-voice-actions .rp-primary { min-width: 150px; text-align: center; min-height: 48px; }
html:root body .rp-workspace .rp-recording { width: 100%; max-width: 480px; }
html:root body .rp-workspace .rp-text-entry label { margin-bottom: 12px; }
html:root body .rp-workspace .rp-feedback-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 16px; }
html:root body .rp-workspace .rp-feedback-split section { border: 1px solid var(--rp-line); border-radius: 8px; padding: 14px; display: grid; gap: 8px; }
html:root body .rp-workspace .rp-answer-reviews,
html:root body .rp-workspace .rp-answer-result { display: grid; gap: 20px; }
html:root body .rp-workspace .rp-answer-result + .rp-answer-result { border-top: 1px solid var(--rp-line); padding-top: 24px; }
html:root body .rp-workspace .rp-result-section { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--rp-line); border-radius: 10px; background: var(--rp-surface) !important; }
html:root body .rp-workspace .rp-optimized-answer { border-left: 3px solid var(--rp-primary); background: var(--rp-bg) !important; }
html:root body .rp-workspace .rp-answer-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 16px; }
html:root body .rp-workspace .rp-answer-comparison > section { min-width: 0; }
html:root body .rp-workspace .rp-suggested-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
html:root body .rp-workspace .rp-suggested-heading .rp-button { min-height: 40px; padding: 7px 16px; }
html:root body .rp-workspace .rp-suggested-editor { display: grid; gap: 12px; }
html:root body .rp-workspace .rp-suggested-editor label { display: grid; gap: 8px; }
html:root body .rp-workspace .rp-suggested-editor textarea { width: 100%; min-height: 200px; resize: vertical; padding: 12px; border: 1px solid var(--rp-line); border-radius: 8px; color: var(--rp-text); background: var(--rp-surface); font: inherit; line-height: 1.75; }
html:root body .rp-workspace .rp-personal-answer-status { margin-bottom: 8px; }
html:root body .rp-workspace .rp-suggested-error { margin: 12px 0; padding: 8px 12px; }
html:root body .rp-workspace .rp-optimization-actions { display: grid; justify-items: start; gap: 12px; }
html:root body .rp-workspace .rp-feedback-group { display: grid; gap: 8px; }
html:root body .rp-workspace .rp-feedback-point { display: grid; gap: 8px; }
html:root body .rp-reports .rp-priority-points > .rp-feedback-point { padding: 14px; border-left: 3px solid var(--rp-primary); border-radius: 4px; background: var(--rp-bg) !important; }
html:root body .rp-reports .rp-question-review { gap: 20px; }
html:root body .rp-reports .rp-feedback-group { gap: 14px; }
html:root body .rp-reports .rp-feedback-evidence,
html:root body .rp-reports .rp-knowledge-basis { padding-top: 6px; }
html:root body .rp-reports .rp-report-next { display: grid; gap: 12px; padding: 16px 0; }
html:root body .rp-reports .rp-review-status > summary { color: var(--rp-muted); }
html:root body .rp-reports details.rp-standard-answer { display: block; }
html:root body .rp-reports details.rp-standard-answer > summary { font-size: 14px; font-weight: 550; }
html:root body .rp-workspace .rp-feedback-group h4 { color: var(--rp-text); background: transparent; margin: 4px 0 0; font-size: 14px; font-weight: 600; }
html:root body .rp-workspace :is(.rp-optimized-text,.rp-reference-text,.rp-streaming) { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; }
html:root body .rp-workspace .rp-result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
html:root body .rp-workspace .rp-streaming { border-left: 2px solid var(--rp-line); padding-left: 12px; }
html:root body .rp-workspace .rp-earlier-reviews > .rp-answer-result { margin-top: 18px; }
html:root body .rp-workspace :is(.rp-goal-settings,.rp-run-progress,.rp-goal-reached) { display: grid; gap: 16px; border: 1px solid var(--rp-line); border-radius: 10px; padding: 18px; background: var(--rp-surface) !important; }
html:root body .rp-workspace .rp-goal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
html:root body .rp-workspace .rp-goal-grid > div { display: grid; gap: 10px; min-width: 0; }
html:root body .rp-workspace .rp-goal-modes { display: flex; flex-wrap: wrap; gap: 8px; }
html:root body .rp-workspace .rp-goal-modes .rp-button[aria-pressed="true"] { border-color: var(--rp-primary) !important; color: var(--rp-primary) !important; box-shadow: inset 0 0 0 1px var(--rp-primary); }
html:root body .rp-workspace .rp-goal-grid > :only-child { grid-column: 1 / -1; }
html:root body .rp-workspace .rp-start-notice { margin: 4px 0; }
html:root body .rp-workspace .rp-goal-settings > details .rp-goal-select { width: 100%; }
html:root body .rp-workspace .rp-goal-field { display: grid; gap: 8px; min-width: 0; }
html:root body .rp-workspace .rp-goal-values { display: flex; flex-wrap: wrap; gap: 8px; }
html:root body .rp-workspace :is(.rp-goal-select,.rp-goal-number) { box-sizing: border-box; border: 1px solid var(--rp-line); border-radius: 7px; color: var(--rp-text); background: var(--rp-bg) !important; min-height: 42px; padding: 8px 12px; font: inherit; width: 132px; max-width: 100%; }
html:root body .rp-workspace .rp-goal-number[hidden] { display: none; }
html:root body .rp-workspace .rp-run-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html:root body .rp-workspace .rp-run-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; flex: 1 1 300px; font-size: 14px; }
html:root body .rp-workspace .rp-run-stats strong { font-variant-numeric: tabular-nums; }
html:root body .rp-workspace .rp-goal-reached { border-left: 3px solid var(--rp-primary); background: var(--rp-bg) !important; }
html:root body .rp-workspace .rp-report-segment { display: grid; gap: 16px; padding-block: 20px; border-top: 1px solid var(--rp-line); }
@media (max-width: 1000px) { html:root body .rp-workspace .rp-layout { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 640px) {
  html:root body .rp-workspace .rp-answer-comparison { grid-template-columns: minmax(0,1fr); }
  html:root body .rp-workspace { padding: 18px 14px 36px; }
  html:root body .rp-workspace .rp-heading { align-items: start; flex-direction: column; gap: 10px; }
  html:root body .rp-workspace .rp-card { padding: 18px; }
  html:root body .rp-workspace .rp-flow { grid-template-columns: minmax(0,1fr); }
  html:root body .rp-workspace .rp-feedback-split { grid-template-columns: minmax(0,1fr); }
  html:root body .rp-workspace .rp-goal-grid { grid-template-columns: minmax(0,1fr); }
  html:root body .rp-workspace .rp-question { font-size: 19px; }
}
html:root body[data-theme="dark"] .rp-workspace,
html:root[data-theme="dark"] body .rp-workspace { --rp-bg: var(--hw-ui-bg,#111417); --rp-surface: var(--hw-ui-surface,#1d2126); --rp-text: var(--hw-ui-text,#eef0f4); --rp-muted: var(--hw-ui-muted,#afb7c3); --rp-line: var(--hw-ui-line,#363d47); --rp-hover: var(--hw-ui-hover,#262c34); }
html:root body .rp-legacy-tools { max-width: 1184px; margin: 0 auto 28px; border: 1px solid var(--hw-ui-line,#e2e5ea); border-radius: 10px; color: var(--hw-ui-text,#20252c); background: var(--hw-ui-surface,#fff) !important; }
html:root body .rp-legacy-tools > summary { min-height: 48px; padding: 14px 18px; color: var(--hw-ui-muted,#66717e); background: transparent !important; font-size: 14px; line-height: 1.6; font-weight: 550; cursor: pointer; }
html:root body .rp-legacy-tools > summary:focus-visible { outline: 3px solid var(--hw-ui-focus,#6679b7); outline-offset: 2px; }
html:root body .rp-legacy-tools[open] > summary { border-bottom: 1px solid var(--hw-ui-line,#e2e5ea); }
html:root body .rp-legacy-tools > :not(summary) { margin-inline: 0; }
@media (max-width: 640px) { html:root body .rp-legacy-tools { margin-inline: 14px; } }

/* Interview = one current action; report = overview and an explicit question directory.
   Only this layout opts in. Historic text keeps its original bytes and normal flow. */
html:root body :is(.rp-live-workspace,.rp-reports) { font-size: 16px; line-height: 1.75; }
html:root body :is(.rp-live-workspace,.rp-reports) .rp-heading { margin-bottom: 16px; }
html:root body :is(.rp-live-workspace,.rp-reports) .rp-card { gap: 16px; padding: 22px; }
html:root body :is(.rp-live-workspace,.rp-reports) :is(.rp-muted,.rp-label,.rp-eyebrow) { font-size: 14px; }
html:root body :is(.rp-live-workspace,.rp-reports) :is(.rp-button,.rp-voice-status,.rp-transcript summary,.rp-feedback-group h4) { font-size: 16px; }
html:root body .rp-live-workspace .rp-run-progress { position: static; padding: 12px 16px; gap: 8px 12px; }
html:root body .rp-live-workspace .rp-run-stats { gap: 8px 18px; font-size: 15px; }
html:root body .rp-live-workspace .rp-run-progress .rp-button { padding: 8px 12px; }
html:root body .rp-live-workspace .rp-question { font-size: 24px; line-height: 1.65; }
html:root body .rp-workspace .rp-current-feedback { display: grid; gap: 8px; padding: 14px 16px; border-left: 3px solid var(--rp-primary); background: var(--rp-hover) !important; }
html:root body .rp-workspace .rp-current-feedback > .rp-notice { margin: 0; padding: 0; border: 0; }

/* The sole live action bar remains in flow: it cannot cover following inputs or
   require a fixed-height spacer. Its containing block must include the details. */
html:root body .rp-live-workspace .rp-stable-actions { position: sticky; top: 64px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; border-block: 1px solid var(--rp-line); background: var(--rp-surface) !important; }
html:root body .rp-live-workspace .rp-stable-actions > .rp-primary { min-width: 168px; text-align: center; }
html:root body .rp-live-workspace .rp-stable-actions .rp-voice-actions { align-items: center; gap: 10px; }
html:root body .rp-live-workspace .rp-stable-actions .rp-button { min-height: 46px; }
html:root body .rp-live-workspace :is(.rp-voice,.rp-text-entry) { scroll-margin-top: 152px; }

html:root body .rp-workspace .rp-answer-details { display: grid; gap: 16px; margin-top: 4px; }
html:root body .rp-workspace .rp-detail-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html:root body .rp-workspace .rp-detail-tabs .rp-button { border-radius: 7px; }
html:root body .rp-workspace .rp-detail-tabs :is([aria-selected="true"],[aria-pressed="true"]) { color: var(--rp-primary) !important; border-color: var(--rp-primary) !important; background: var(--rp-hover) !important; }
html:root body .rp-workspace .rp-detail-panel { display: grid; gap: 16px; padding: 18px 0 0; border-top: 1px solid var(--rp-line); scroll-margin-top: 148px; }
html:root body .rp-workspace .rp-detail-panel[hidden] { display: none; }
html:root body .rp-workspace .rp-detail-panel .rp-result-section { border: 0; border-radius: 0; padding: 0; background: transparent !important; }
html:root body .rp-workspace .rp-detail-panel .rp-answer-comparison { align-items: start; gap: 24px; }
html:root body .rp-workspace .rp-detail-panel .rp-answer-comparison > section + section { padding-left: 24px; border-left: 1px solid var(--rp-line); }
html:root body .rp-workspace .rp-detail-panel :is(.rp-original,.rp-reference-text,.rp-optimized-text) { font-size: 16px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; max-height: none; }
html:root body .rp-workspace .rp-more-actions { padding: 10px 0; border-top: 1px solid var(--rp-line); }
html:root body .rp-workspace .rp-more-actions > summary { width: fit-content; min-height: 44px; display: list-item; align-content: center; padding-block: 8px; font-size: 16px; cursor: pointer; }
html:root body .rp-workspace .rp-more-actions[open] > :not(summary) { margin-top: 10px; }
html:root body .rp-workspace :is(.rp-detail-tabs,.rp-stable-actions,.rp-directory-row) .rp-button:focus-visible,
html:root body .rp-workspace .rp-more-actions > summary:focus-visible { outline: 3px solid var(--hw-ui-focus,#6679b7); outline-offset: 3px; }

html:root body .rp-reports .rp-report-summary { padding: 0 0 18px; border-bottom: 1px solid var(--rp-line); border-radius: 0; background: transparent !important; }
html:root body .rp-reports > .rp-history { padding: 8px 0; border: 0; border-radius: 0; background: transparent !important; }
html:root body .rp-reports > .rp-history > summary { min-height: 44px; padding-block: 8px; font-size: 16px; }
html:root body .rp-reports .rp-focus-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
html:root body .rp-reports .rp-focus-list > .rp-focus-item { display: grid; gap: 6px; padding: 0 0 0 14px; border-left: 3px solid var(--rp-primary); }
html:root body .rp-reports .rp-focus-list :is(p,.rp-suggestion) { font-size: 16px; }
html:root body .rp-reports .rp-report-directory { display: grid; gap: 0; }
html:root body .rp-reports .rp-directory-row { display: grid; grid-template-columns: 2.5rem minmax(0,1fr) auto; align-items: center; gap: 12px 20px; padding: 16px 0; border-bottom: 1px solid var(--rp-line); }
html:root body .rp-reports .rp-directory-row:first-child { border-top: 1px solid var(--rp-line); }
html:root body .rp-reports .rp-directory-row :is(h3,h4,.rp-directory-question) { margin: 0; font-size: 17px; line-height: 1.6; }
html:root body .rp-reports .rp-directory-row .rp-button { justify-self: end; white-space: nowrap; }
/* Unanswered rows have two actions. Give each its own column instead of
   auto-placing the fourth child into the narrow question-number column. */
@media (min-width: 641px) {
  html:root body .rp-reports .rp-directory-row:has(> .rp-button + .rp-button) { grid-template-columns: 2.5rem minmax(0,1fr) auto auto; }
}
html:root body .rp-reports .rp-directory-row[aria-current="true"] { border-left: 3px solid var(--rp-primary); padding-left: 12px; }
html:root body .rp-reports .rp-report-detail { display: grid; gap: 18px; padding-top: 20px; border-top: 1px solid var(--rp-line); scroll-margin-top: 80px; }
html:root body .rp-reports .rp-report-detail[hidden] { display: none; }
html:root body .rp-reports .rp-report-detail .rp-answer-result { gap: 18px; }
html:root body .rp-reports .rp-report-detail .rp-result-section { border: 0; padding: 0; border-radius: 0; background: transparent !important; }
html:root body .rp-reports .rp-report-detail .rp-result-section + .rp-result-section { border-top: 1px solid var(--rp-line); padding-top: 18px; }
html:root body .rp-reports .rp-report-detail .rp-report-next { padding-block: 0; }

@media (max-width: 900px) {
  html:root body .rp-live-workspace .rp-stable-actions { top: 60px; }
}
/* These two pages retain the existing mobile drawer after the shared shell
   identifies it as workspaceSidebar. Closed navigation must not occupy a page. */
@media (max-width: 767px) {
  html:root body.mobile-navigation-enabled:is([data-active-panel="interview"],[data-active-panel="interview-reports"]) #workspaceSidebar {
    position: fixed !important; inset: 0 auto 0 0 !important; z-index: 15001 !important;
    width: min(304px, calc(100vw - 40px)) !important; max-width: calc(100vw - 40px) !important;
    height: 100dvh !important; max-height: 100dvh !important; overflow: auto !important;
    box-sizing: border-box !important; transform: none !important;
  }
  html:root body.mobile-navigation-enabled:is([data-active-panel="interview"],[data-active-panel="interview-reports"]) #workspaceSidebar[aria-hidden="true"] { display: none !important; }
  html:root body.mobile-navigation-enabled:is([data-active-panel="interview"],[data-active-panel="interview-reports"]) #workspaceSidebar[aria-hidden="false"] { display: flex !important; visibility: visible !important; pointer-events: auto !important; }
}
@media (max-width: 640px) {
  html:root body :is(.rp-live-workspace,.rp-reports) { padding: 16px 12px 28px; }
  html:root body :is(.rp-live-workspace,.rp-reports) .rp-card { padding: 16px; }
  html:root body .rp-live-workspace .rp-question { font-size: 21px; }
  html:root body .rp-live-workspace .rp-run-progress { padding: 10px 12px; }
  html:root body .rp-live-workspace .rp-run-stats { flex-basis: 100%; gap: 6px 14px; }
  html:root body .rp-live-workspace .rp-stable-actions { gap: 8px; padding-block: 10px; }
  html:root body .rp-live-workspace .rp-stable-actions > .rp-primary { min-width: 144px; }
  html:root body .rp-workspace .rp-detail-tabs { align-items: stretch; }
  html:root body .rp-workspace .rp-detail-tabs .rp-button { flex: 1 1 130px; text-align: center; }
  html:root body .rp-workspace .rp-detail-panel .rp-answer-comparison { grid-template-columns: minmax(0,1fr); gap: 18px; }
  html:root body .rp-workspace .rp-detail-panel .rp-answer-comparison > section + section { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--rp-line); }
  html:root body .rp-reports .rp-directory-row { grid-template-columns: minmax(0,1fr); gap: 10px; padding-block: 14px; }
  html:root body .rp-reports .rp-directory-row .rp-button { justify-self: start; }
  html:root body .rp-live-workspace:has(:is(textarea,input,select):focus) .rp-stable-actions { position: static; }
}
@media (max-height: 520px) {
  html:root body .rp-live-workspace .rp-stable-actions { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  html:root body .rp-workspace,
  html:root body .rp-workspace * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* The current run only: no account history or hidden reference answers. */
html:root body .rp-live-workspace .rp-layout.rp-with-question-card { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:20px; align-items:start; }
html:root body .rp-live-workspace .rp-question-card { position:sticky; top:80px; border:1px solid var(--rp-line); border-radius:12px; padding:12px; background:var(--rp-surface); }
html:root body .rp-live-workspace .rp-question-card h2 { font-size:17px; margin:0 0 4px; }
html:root body .rp-live-workspace .rp-question-count { margin-bottom:10px; font-size:14px; line-height:1.5; }
html:root body .rp-live-workspace .rp-question-grid { display:grid; grid-template-columns:1fr; gap:6px; align-content:start; padding:4px; max-height:min(560px,65vh); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
html:root body .rp-live-workspace .rp-question-number { position:relative; display:flex; align-items:flex-start; gap:12px; width:100%; min-height:64px; padding:12px; font-size:15px; line-height:1.6; text-align:left; }
html:root body .rp-workspace .rp-question-summary { display:grid; gap:5px; flex:1; }
html:root body .rp-workspace .rp-question-index { flex:none; min-width:22px; padding-top:4px; }
html:root body .rp-workspace .rp-question-text { white-space:normal; overflow-wrap:anywhere; line-height:1.6; }
html:root body .rp-workspace .rp-question-status { font-size:12px; color:var(--rp-muted); font-weight:400; }
html:root body .rp-live-workspace .rp-question-number strong { font-size:16px; line-height:1; font-variant-numeric:tabular-nums; }
html:root body .rp-live-workspace .rp-question-number .rp-question-mark { position:absolute; top:3px; right:3px; font-size:11px; line-height:1; }
html:root body .rp-live-workspace .rp-question-number .rp-question-draft { position:absolute; bottom:2px; right:4px; font-size:14px; line-height:1; }
html:root body .rp-live-workspace .rp-question-legend { margin:8px 0; color:var(--rp-muted); font-size:12px; line-height:1.6; }
html:root body .rp-live-workspace .rp-question-empty { margin:8px 0; }
html:root body .rp-live-workspace .rp-question-number[aria-current="step"] { outline:2px solid var(--rp-accent,#a54236); outline-offset:2px; }
html:root body .rp-live-workspace .rp-question-navigation { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
html:root body .rp-live-workspace .rp-last-question { flex-basis:100%; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
html:root body .rp-live-workspace .rp-last-question p { margin:0; }
html:root body .rp-live-captions { margin:12px 0; padding:14px 16px; border:1px solid var(--rp-line); border-radius:12px; background:var(--rp-surface); }
html:root body .rp-live-captions .rp-label { margin:0 0 8px; }
html:root body .rp-live-text { margin:0; min-height:3em; max-height:10em; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font-size:16px; line-height:1.65; }
html:root body .rp-connection-status { margin:8px 0; padding:10px 14px; border-inline-start:3px solid var(--rp-line); background:var(--rp-surface); font-size:16px; line-height:1.6; }
html:root body .rp-connection-status[data-connection="slow"], html:root body .rp-connection-status[data-connection="offline"] { border-inline-start-color:var(--rp-accent,#a54236); }
html:root body .rp-connection-help ol { margin:10px 0; padding-inline-start:24px; line-height:1.7; }
@media(max-width:1100px) {
  html:root body .rp-live-workspace .rp-layout.rp-with-question-card { grid-template-columns:minmax(0,1fr); }
  html:root body .rp-live-workspace .rp-question-card { display:none; position:static; grid-row:1; }
  html:root body .rp-live-workspace .rp-question-card.is-open { display:block; }
}


/* source: personal-content.css */
.personal-question-tools,.personal-library-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.personal-question-tools button,.personal-library-toolbar button,.personal-library-item button,.personal-question-editor button{font:inherit;font-size:14px;padding:7px 12px;border:1px solid var(--border-color,#dce0e5);border-radius:8px;background:transparent;color:inherit;cursor:pointer}
.personal-question-tools button:disabled,.personal-library-toolbar button:disabled,.personal-question-editor button:disabled{opacity:.55;cursor:wait}
.personal-question-editor{display:grid;gap:12px;margin-top:12px;padding:16px;border:1px solid var(--border-color,#dce0e5);border-radius:12px}
.personal-question-editor label{display:block;font-size:14px;line-height:1.6}
.personal-question-editor textarea,.personal-question-editor input:not([type=checkbox]){box-sizing:border-box;width:100%;display:block;margin-top:8px;font:inherit;line-height:1.6;background:transparent;color:inherit;border:1px solid var(--border-color,#dce0e5);border-radius:8px;padding:10px;resize:vertical}
.personal-question-editor p{margin:0;font-size:13px;line-height:1.6}
.personal-library-toolbar{margin-bottom:16px}.personal-library-toolbar [aria-pressed=true]{color:var(--hw-ui-accent,#a63a30);font-weight:600;border-color:currentColor}
html[data-theme=dark] .personal-library-toolbar [aria-pressed=true]{color:var(--hw-ui-accent,#ed9489)}
.personal-library-item{padding:20px 0;border-bottom:1px solid var(--border-color,#dce0e5)}.personal-library-item h3{font-size:18px;line-height:1.6;margin:0 0 8px}.personal-library-item p{font-size:14px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.personal-library-item details{margin:12px 0}.personal-library-item button{margin-right:8px}
/* Reading actions inherit their card surface, not the legacy global div tint. */
html:root body #contentLibraryWorkspace :is(.personal-question-tools,.personal-question-editor){background:transparent!important;background-image:none!important;box-shadow:none!important;border-color:var(--hw-ui-line,#dce0e5)!important}


/* source: content-library.css */
.cl-workspace{--cl-bg:var(--hw-ui-surface,#fff);--cl-bg-soft:var(--hw-ui-bg,#f5f6f8);--cl-text:var(--hw-ui-text,#20252b);--cl-muted:var(--hw-ui-muted,#657080);--cl-border:var(--hw-ui-line,#e0e4e9);--cl-accent:var(--hw-ui-accent,#a13d32);color:var(--cl-text);max-width:1320px;margin:0 auto;padding:24px 0 48px;line-height:1.6}
html[data-theme=dark] .cl-workspace{--cl-bg:var(--hw-ui-surface,#1e2026);--cl-bg-soft:var(--hw-ui-bg,#15171c);--cl-text:var(--hw-ui-text,#f1f2f5);--cl-muted:var(--hw-ui-muted,#aeb4c0);--cl-border:var(--hw-ui-line,#343842);--cl-accent:var(--hw-ui-accent,#e47d6f)}
.cl-scenario-label{display:inline-block;font-size:12px;color:var(--cl-muted);margin-left:8px}
/* Scope the reading workspace to its own full-width panel. Historical theme
   fallbacks tint every classified div/section; structural wrappers stay clear. */
html:root body #hwWorkbenchMain>.panel.active[data-panel="knowledge-cases"]{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;grid-column:1/-1;box-sizing:border-box;padding:28px 32px 64px!important;background:var(--hw-ui-bg)!important;background-image:none!important;color:var(--hw-ui-text)!important}
html:root body #contentLibraryWorkspace{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;background:transparent!important;box-shadow:none!important}
html:root body #contentLibraryWorkspace .cl-workspace{width:100%!important;min-width:0!important;max-width:1320px!important;padding:0!important;margin:0 auto!important;background:transparent!important;box-shadow:none!important;color:var(--cl-text)!important}
html:root body #contentLibraryWorkspace :is(.cl-header,.cl-header>div,.cl-search,.cl-filterbar,.cl-type-filter,.cl-skill-filter,.cl-result-heading,.cl-list,.cl-detail-top,.cl-detail-layout,.cl-aside,.cl-section,.cl-related,.cl-meta,.cl-pagination,.cl-assistant-actions,.cl-action-message){background:transparent!important;background-image:none!important;box-shadow:none!important}
html:root body #contentLibraryWorkspace :is(.cl-article,.cl-action-card,.cl-list-item,.cl-state){background:var(--cl-bg)!important;background-image:none!important;border-color:var(--cl-border)!important;box-shadow:none!important;color:var(--cl-text)!important}
html:root body #contentLibraryWorkspace :is(h1,h2,h3,strong,label){color:var(--cl-text)!important}
html:root body #contentLibraryWorkspace :is(p,.cl-muted,.cl-skill-filter,.cl-result-heading,.cl-meta){color:var(--cl-muted)!important}
html:root body #contentLibraryWorkspace :is(.cl-type,.cl-meta>span){color:var(--cl-accent)!important;background:var(--cl-bg-soft)!important}
html:root body #contentLibraryWorkspace :is(input,select,textarea){color:var(--cl-text)!important;background:var(--cl-bg-soft)!important;border-color:var(--cl-border)!important;box-shadow:none!important}
html:root body #contentLibraryWorkspace button{color:var(--cl-text)!important;background:var(--cl-bg)!important;border-color:var(--cl-border)!important;box-shadow:none!important}
html:root body #contentLibraryWorkspace :is(.cl-primary,.cl-search>button){color:var(--hw-ui-on-primary,#fff)!important;background:var(--hw-ui-primary,#a13d32)!important;border-color:var(--hw-ui-primary,#a13d32)!important}
html:root body #contentLibraryWorkspace .cl-type-filter [aria-pressed=true]{color:var(--cl-accent)!important;background:var(--hw-ui-soft)!important;border-color:var(--cl-accent)!important}
html:root body #contentLibraryWorkspace .cl-header>div{flex:0 0 auto;min-width:210px}
@media(max-width:600px){html:root body #hwWorkbenchMain>.panel.active[data-panel="knowledge-cases"]{padding:20px 14px 44px!important}}
.cl-workspace *{box-sizing:border-box}.cl-workspace [hidden]{display:none!important}.cl-workspace button,.cl-workspace input,.cl-workspace select,.cl-workspace textarea{font:inherit;color:inherit}.cl-workspace button{min-height:40px;padding:8px 14px;border:1px solid var(--cl-border);border-radius:9px;background:var(--cl-bg);cursor:pointer;transition:border-color .12s}.cl-workspace button:hover{border-color:var(--cl-accent)}.cl-workspace button:disabled{opacity:.5;cursor:default}.cl-workspace :focus-visible{outline:2px solid var(--cl-accent);outline-offset:3px}.cl-workspace h1,.cl-workspace h2,.cl-workspace h3,.cl-workspace p{color:inherit;background:transparent!important}.cl-header{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:26px}.cl-header h1{font-size:28px;line-height:1.4;margin:0 0 5px}.cl-header p{font-size:14px;margin:0;color:var(--cl-muted)}.cl-search{display:flex;gap:8px;flex:0 1 580px;margin:0}.cl-search input{min-width:0;flex:1;border:1px solid var(--cl-border);border-radius:9px;background:var(--cl-bg);padding:10px 14px}.cl-search button{background:var(--cl-accent);border-color:var(--cl-accent);color:#fff;min-width:76px}.cl-filterbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}.cl-type-filter{display:flex;gap:6px}.cl-type-filter button{background:transparent}.cl-type-filter [aria-pressed=true]{border-color:var(--cl-accent);color:var(--cl-accent);font-weight:650;background:var(--cl-bg)}.cl-skill-filter{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--cl-muted)}.cl-skill-filter select{max-width:220px;padding:9px 32px 9px 12px;background:var(--cl-bg);border:1px solid var(--cl-border);border-radius:9px}.cl-result-heading{display:flex;align-items:center;justify-content:space-between;color:var(--cl-muted);font-size:14px;margin:0 0 12px}.cl-result-heading button{font-size:14px;min-height:34px;padding:5px 12px}.cl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.cl-workspace .cl-list-item{position:relative;display:block;text-align:left;padding:22px 24px 46px;background:var(--cl-bg);min-width:0;box-shadow:none}.cl-list-item h2{font-size:19px;line-height:1.5;margin:9px 0 8px;overflow-wrap:anywhere}.cl-list-item p{font-size:14px;color:var(--cl-muted);margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cl-type{display:inline-block;font-size:12px;line-height:1.5;padding:3px 7px;border-radius:5px;color:var(--cl-accent);background:var(--cl-bg-soft)}.cl-meta{display:flex;gap:6px;flex-wrap:wrap;color:var(--cl-muted);font-size:12px}.cl-meta span{background:var(--cl-bg-soft);padding:2px 7px;border-radius:4px;overflow-wrap:anywhere}.cl-open-hint{position:absolute;bottom:17px;right:24px;color:var(--cl-accent);font-size:13px}.cl-pagination{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:24px;font-size:14px}.cl-state{padding:64px 24px;text-align:center;border:1px solid var(--cl-border);border-radius:12px;background:var(--cl-bg)}.cl-state strong{font-size:19px}.cl-state p{color:var(--cl-muted);margin:10px 0 20px}.cl-state button+button{margin-left:10px}.cl-muted{color:var(--cl-muted)}.cl-detail-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px;font-size:13px}.cl-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}.cl-article{background:var(--cl-bg);border:1px solid var(--cl-border);border-radius:12px;padding:28px 32px;min-width:0}.cl-article>h2{font-size:26px;line-height:1.45;margin:12px 0 14px;overflow-wrap:anywhere}.cl-section{margin-top:25px;border-top:1px solid var(--cl-border);padding-top:21px}.cl-section h3,.cl-related h3{font-size:17px;margin:0 0 9px}.cl-section p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85;margin:0;font-size:15px}.cl-related{border-top:1px solid var(--cl-border);padding-top:20px;margin-top:25px;display:flex;align-items:flex-start;flex-direction:column;gap:8px}.cl-related h3{margin-bottom:3px}.cl-related button{text-align:left;font-size:14px;max-width:100%;overflow-wrap:anywhere}.cl-aside{display:grid;gap:15px}.cl-action-card{padding:20px;border:1px solid var(--cl-border);border-radius:12px;background:var(--cl-bg);min-width:0}.cl-action-card h3{margin:0 0 10px;font-size:17px}.cl-action-card p{font-size:13px;color:var(--cl-muted);margin:8px 0 14px}.cl-action-card label{font-size:14px;display:block}.cl-action-card textarea{display:block;resize:vertical;width:100%;background:var(--cl-bg-soft);border:1px solid var(--cl-border);border-radius:8px;padding:9px;margin:8px 0 12px;font-size:14px;line-height:1.6}.cl-workspace button.cl-primary{width:100%;background:var(--cl-accent);border-color:var(--cl-accent);color:#fff;font-weight:650}.cl-assistant-actions{display:flex;flex-wrap:wrap;gap:7px}.cl-assistant-actions button{font-size:13px;padding:7px 10px}.cl-action-card.cl-personal:empty{display:none}.cl-action-message{margin:0;font-size:14px;overflow-wrap:anywhere}.cl-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){.cl-header{align-items:flex-start;flex-direction:column;gap:18px}.cl-search{flex:auto;width:100%}.cl-detail-layout{grid-template-columns:minmax(0,1fr)}.cl-aside{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-personal,.cl-action-message{grid-column:1/-1}}
@media(max-width:600px){.cl-workspace{padding:14px 0 36px}.cl-header h1{font-size:25px}.cl-list{grid-template-columns:minmax(0,1fr)}.cl-skill-filter{width:100%}.cl-skill-filter select{flex:1;max-width:none}.cl-type-filter{width:100%}.cl-type-filter button{flex:1;padding:8px 9px;font-size:14px}.cl-workspace .cl-list-item{padding:18px 18px 44px}.cl-article{padding:22px 20px}.cl-article>h2{font-size:23px}.cl-aside{grid-template-columns:minmax(0,1fr)}.cl-search input{padding:9px 11px;font-size:14px}.cl-state{padding:42px 20px}}

/* The existing assistant is opened explicitly from a reading action. Embedded
   clients normally hide it; do not restore any ambient model or microphone UI. */
html.react-student-embedded:root body.library-assistant-open #companionDock{display:block!important;visibility:visible!important;pointer-events:auto!important;position:fixed!important;inset:0 0 0 auto!important;width:min(500px,100vw)!important;max-width:100vw!important;height:100dvh!important;z-index:2000!important;transform:none!important}
html.react-student-embedded:root body.library-assistant-open #companionDock #companionPanel{display:grid!important;visibility:visible!important;pointer-events:auto!important;position:relative!important;inset:0!important;grid-template-rows:auto minmax(0,1fr)!important;width:100%!important;height:100dvh!important;max-height:100dvh!important;overflow:hidden!important;transform:none!important}
html:root body.library-assistant-open #companionDock>:not(#companionPanel),html:root body.library-assistant-open :is(#companionAmbientStage,#companionVoiceBtn,#companionPanelCharacter,#companionPanelEmotion,#companionSettingsBtn,#companionOpenCoachBtn),html:root body.library-assistant-open #companionPanel [data-ui-feature-preview="assistant-drawer"]{display:none!important;visibility:hidden!important;pointer-events:none!important}
/* Reading questions do not use the older assessment recommendations. Keep the
   current run status (including retry/failure), conversation and composer. */
html:root body.library-assistant-open #companionPanel :is(#companionBriefCard,#companionActions,#companionPanelStatus){display:none!important;visibility:hidden!important;pointer-events:none!important}


/* source: workbench-ui.css */
/* Workbench 01: shell chrome + home only. Business panels, forms and dialogs
   retain their existing component styles. Theme selection remains in app.js. */
:root {
  --hw-ui-bg: #f6f7f9;
  --hw-ui-sidebar: #fafafb;
  --hw-ui-surface: #fff;
  --hw-ui-text: #20252d;
  --hw-ui-muted: #626a75;
  --hw-ui-line: #e6e8ec;
  --hw-ui-accent: #a63a32;
  --hw-ui-primary: #a63a32;
  --hw-ui-primary-hover: #902d27;
  --hw-ui-on-primary: #fff;
  --hw-ui-soft: #f8ece9;
  --hw-ui-hover: #eeeff2;
  --hw-ui-focus: #a63a32;
  --hw-sidebar-color: var(--hw-ui-text);
  --hw-sidebar-muted: var(--hw-ui-muted);
  --hw-sidebar-background: var(--hw-ui-sidebar);
  --hw-sidebar-border: var(--hw-ui-line);
  --hw-sidebar-shadow: none;
  --hw-sidebar-accountBorder: var(--hw-ui-line);
  --hw-sidebar-avatarRing: var(--hw-ui-line);
  --hw-sidebar-toggleColor: var(--hw-ui-muted);
  --hw-sidebar-account-background: var(--hw-ui-surface);
}
html:root[data-theme="dark"] {
  --hw-ui-bg: #111317;
  --hw-ui-sidebar: #17191e;
  --hw-ui-surface: #1d2026;
  --hw-ui-text: #f3f4f6;
  --hw-ui-muted: #acb1bb;
  --hw-ui-line: #30343d;
  --hw-ui-accent: #ee9186;
  --hw-ui-primary: #b94338;
  --hw-ui-primary-hover: #a63a32;
  --hw-ui-soft: #362422;
  --hw-ui-hover: #24272e;
  --hw-ui-focus: #ee9186;
  --hw-sidebar-color: var(--hw-ui-text);
  --hw-sidebar-muted: var(--hw-ui-muted);
  --hw-sidebar-background: var(--hw-ui-sidebar);
  --hw-sidebar-border: var(--hw-ui-line);
  --hw-sidebar-shadow: none;
  --hw-sidebar-accountBorder: var(--hw-ui-line);
  --hw-sidebar-avatarRing: var(--hw-ui-line);
  --hw-sidebar-toggleColor: var(--hw-ui-muted);
  --hw-sidebar-account-background: var(--hw-ui-surface);
}
html:root:not(.react-student-embedded) body.mobile-navigation-enabled {
  --hw-sidebar-color: var(--hw-ui-text);
  --hw-sidebar-muted: var(--hw-ui-muted);
  --hw-sidebar-background: var(--hw-ui-sidebar);
  --hw-sidebar-border: var(--hw-ui-line);
  --hw-sidebar-shadow: none;
  --hw-sidebar-accountBorder: var(--hw-ui-line);
  --hw-sidebar-avatarRing: var(--hw-ui-line);
  --hw-sidebar-toggleColor: var(--hw-ui-muted);
  --hw-sidebar-account-background: var(--hw-ui-surface);
}
html:root:not(.react-student-embedded) body[data-active-panel] .shell > .main:has(> #workspaceCommandBar) {
  background: var(--hw-ui-bg) !important;
  background-image: none !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell > .sidebar,
html:not(.react-student-embedded) body #mobileNavigationDrawer .sidebar {
  background: var(--hw-ui-sidebar) !important;
  box-shadow: none !important;
  border-right-color: var(--hw-ui-line) !important;
}
/* The historical desktop lock uses two artificial :not(#id) selectors.
   Repeat the actual nav ID to outrank it without affecting other buttons. */
html:not(.react-student-embedded) body[data-active-panel] .shell > .sidebar #workspaceNavigation#workspaceNavigation#workspaceNavigation .menu-item,
html:not(.react-student-embedded) body #mobileNavigationDrawer #workspaceNavigation .menu-item {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html:not(.react-student-embedded) body[data-active-panel] #workspaceNavigation#workspaceNavigation#workspaceNavigation .menu-item:hover,
html:not(.react-student-embedded) body #mobileNavigationDrawer #workspaceNavigation .menu-item:hover {
  background: var(--hw-ui-hover) !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell > .sidebar #workspaceNavigation#workspaceNavigation#workspaceNavigation .menu-item.active,
html:not(.react-student-embedded) body #mobileNavigationDrawer #workspaceNavigation .menu-item.active {
  --hw-sidebar-color: var(--hw-ui-accent);
  color: var(--hw-ui-accent) !important;
  background: var(--hw-ui-soft) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
html body #workspaceNavigation .menu-item.active :is(.menu-item-icon,.menu-item-label,.workspace-nav-chevron) {
  color: var(--hw-ui-accent) !important;
}
html body #workspaceNavigation .menu-item.active .menu-item-icon::before {
  background-color: var(--hw-ui-accent) !important;
}
html body #workspaceNavigation :is(.workspace-nav-group-toggle,.menu-item):focus-visible {
  outline: 2px solid var(--hw-ui-focus) !important;
  outline-offset: -2px !important;
}
html body #workspaceNavigation [data-workspace-nav-group="growth"] {
  margin-top: 16px;
}
html body #workspaceNavigation .workspace-nav-subitem {
  color: var(--hw-ui-muted) !important;
}
html body .sidebar .brand-subtitle-text {
  color: var(--hw-ui-muted) !important;
  text-shadow: none !important;
}
html body .sidebar #sidebarAccountBtn {
  background: var(--hw-ui-surface) !important;
  border-color: var(--hw-ui-line) !important;
  box-shadow: none !important;
}
html body .shell > .main > #workspaceCommandBar {
  background: var(--hw-ui-surface) !important;
  border-bottom: 1px solid var(--hw-ui-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html body #workspaceCommandBar #pageTitle { color: var(--hw-ui-text) !important; }
html body #workspaceCommandBar #globalSearchControl {
  --search-surface: var(--hw-ui-bg);
  --search-surface-hover: var(--hw-ui-hover);
  --search-surface-focus: var(--hw-ui-surface);
  --search-border: var(--hw-ui-line);
  --search-border-hover: var(--hw-ui-muted);
  --search-focus: var(--hw-ui-focus);
  --search-ring: transparent;
  --search-text: var(--hw-ui-text);
  --search-muted: var(--hw-ui-muted);
  --search-action: var(--hw-ui-soft);
  --search-action-hover: var(--hw-ui-hover);
  --search-action-text: var(--hw-ui-accent);
  border-radius: 8px !important;
}
html body #workspaceCommandBar #companionTopbarEntry {
  background: var(--hw-ui-surface) !important;
  border-color: var(--hw-ui-line) !important;
  color: var(--hw-ui-text) !important;
  box-shadow: none !important;
}
html body #workspaceCommandBar #companionTopbarEntry :is(strong,small) { color: inherit !important; }
html body #homeDashboard.p10-journey-enabled {
  background: var(--hw-ui-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#homeDashboard.p10-journey-enabled #p10Home.p10-workspace {
  --p10-bg: var(--hw-ui-surface);
  --p10-soft: var(--hw-ui-bg);
  --p10-text: var(--hw-ui-text);
  --p10-muted: var(--hw-ui-muted);
  --p10-line: var(--hw-ui-line);
  max-width: 1180px;
  padding: 36px 32px calc(48px + env(safe-area-inset-bottom, 0px));
  background: transparent !important;
}
/* Existing dark fallbacks target every classified div and names containing
   -hero/-route. Reset only this homepage's structural/text wrappers. */
#homeDashboard #p10Home :is(.p10-heading,.p10-start-grid,.p10-hero-meta,.p10-hero-icon,.p10-actions,.p10-journey,.p10-support-grid,.p10-hero-description,.p10-route-note) {
  background: transparent !important;
  box-shadow: none !important;
}
#homeDashboard #p10Home :is(h1,h2,h3) { color: var(--hw-ui-text) !important; }
#homeDashboard #p10Home :is(p,.p10-muted,.p10-eyebrow,.p10-summary-hint,.p10-hero-icon) { color: var(--hw-ui-muted) !important; }
#homeDashboard #p10Home .p10-heading { margin-bottom: 28px; max-width: 860px; }
#homeDashboard #p10Home .p10-heading h1 { font-size: clamp(26px, 2.5vw, 32px); margin: 10px 0 12px; font-weight: 650; }
#homeDashboard #p10Home .p10-heading .p10-eyebrow { display: flex; align-items: center; gap: 8px; letter-spacing: .02em; }
#homeDashboard #p10Home .p10-brand-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--hw-ui-accent); }
#homeDashboard #p10Home .p10-start-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,1fr); gap: 24px; align-items: stretch; margin-bottom: 24px; }
#homeDashboard #p10Home :is(.p10-card,.p10-hero,.p10-route-card) { border-radius: 12px; border: 1px solid var(--hw-ui-line) !important; background: var(--hw-ui-surface) !important; box-shadow: none !important; }
#homeDashboard #p10Home .p10-hero { display: flex; flex-direction: column; padding: 30px; margin: 0; }
#homeDashboard #p10Home .p10-hero-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 24px; }
#homeDashboard #p10Home .p10-action-label { color: var(--hw-ui-accent) !important; background: var(--hw-ui-soft) !important; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 5px; }
#homeDashboard #p10Home .p10-hero-icon { display: grid; place-items: center; color: var(--hw-ui-muted); }
#homeDashboard #p10Home .p10-hero-icon svg { width: 28px; height: 28px; }
#homeDashboard #p10Home .p10-hero h2 { font-size: 25px; font-weight: 650; margin-top: 0; }
#homeDashboard #p10Home .p10-hero-description { color: var(--hw-ui-muted); margin-top: 14px; max-width: 480px; }
#homeDashboard #p10Home .p10-actions { gap: 12px; margin-top: 28px; }
#homeDashboard #p10Home .p10-button { border-radius: 7px; font-size: 15px; font-weight: 600; min-height: 44px; background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-line) !important; }
#homeDashboard #p10Home .p10-button:not(.p10-primary):hover:not(:disabled) { background: var(--hw-ui-hover) !important; border-color: var(--hw-ui-line) !important; }
#homeDashboard #p10Home .p10-button.p10-primary { background: var(--hw-ui-primary) !important; border-color: var(--hw-ui-primary) !important; color: var(--hw-ui-on-primary) !important; padding: 13px 20px; }
#homeDashboard #p10Home .p10-button.p10-primary:hover:not(:disabled) { background: var(--hw-ui-primary-hover) !important; border-color: var(--hw-ui-primary-hover) !important; }
#homeDashboard #p10Home .p10-button:disabled { opacity: 1; background: var(--hw-ui-hover) !important; border-color: var(--hw-ui-line) !important; color: var(--hw-ui-muted) !important; }
#homeDashboard #p10Home :is(button,summary):focus-visible { outline: 2px solid var(--hw-ui-focus); outline-offset: 3px; }
#homeDashboard #p10Home .p10-action-note { margin-top: auto; padding-top: 28px; }
#homeDashboard #p10Home .p10-route-card { padding: 24px; }
#homeDashboard #p10Home .p10-route-card h2 { font-size: 17px; font-weight: 650; }
#homeDashboard #p10Home .p10-route-card > .p10-muted { margin-top: 3px; }
#homeDashboard #p10Home .p10-journey { display: grid; gap: 14px; list-style: none; padding: 0; margin: 20px 0 16px; }
#homeDashboard #p10Home .p10-journey li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; align-items: start; margin: 0; padding: 0; }
#homeDashboard #p10Home .p10-step-number { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--hw-ui-line) !important; background: var(--hw-ui-bg) !important; border-radius: 50%; font-size: 11px; font-weight: 600; color: var(--hw-ui-muted) !important; }
#homeDashboard #p10Home .p10-journey h3 { font-size: 14px; font-weight: 650; line-height: 1.5; }
#homeDashboard.p10-journey-enabled #p10Home.p10-workspace .p10-journey p { font-size: 13px !important; line-height: 1.5 !important; color: var(--hw-ui-muted); margin-top: 2px; }
#homeDashboard.p10-journey-enabled #p10Home.p10-workspace .p10-route-note { font-size: 12px !important; line-height: 1.65 !important; color: var(--hw-ui-muted); border-top: 1px solid var(--hw-ui-line) !important; padding-top: 12px; }
#homeDashboard #p10Home .p10-support-grid { gap: 24px; }
#homeDashboard #p10Home .p10-support-grid .p10-card { display: flex; flex-direction: column; align-items: start; margin-bottom: 24px; padding: 24px; }
#homeDashboard #p10Home .p10-support-grid h2 { margin-top: 5px; font-size: 19px; font-weight: 650; }
#homeDashboard #p10Home .p10-support-grid .p10-card > p:not(.p10-eyebrow) { color: var(--hw-ui-muted); margin: 10px 0 20px; }
#homeDashboard #p10Home .p10-support-grid .p10-button { margin-top: auto; }
#homeDashboard #p10Home .p10-card.p10-availability { padding: 12px 20px; background: transparent !important; margin-bottom: 0; }
#homeDashboard #p10Home .p10-availability summary { min-height: 44px; font-size: 14px; line-height: 44px; color: var(--hw-ui-muted) !important; }
#homeDashboard #p10Home .p10-summary-hint { float: right; font-size: 12px; font-weight: 400; }
@media (max-width: 1100px) {
  #homeDashboard #p10Home .p10-start-grid { grid-template-columns: minmax(0,1.3fr) minmax(235px,1fr); gap: 18px; }
  #homeDashboard #p10Home :is(.p10-hero,.p10-route-card) { padding: 24px; }
  #homeDashboard #p10Home .p10-actions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 940px) {
  #homeDashboard #p10Home .p10-start-grid { grid-template-columns: minmax(0,1fr); }
  #homeDashboard #p10Home .p10-journey { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #homeDashboard #p10Home .p10-hero { min-height: 300px; }
  #homeDashboard #p10Home .p10-support-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
}
@media (max-width: 600px) {
  #homeDashboard.p10-journey-enabled #p10Home.p10-workspace { padding: 24px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
  #homeDashboard #p10Home .p10-heading { margin-bottom: 22px; }
  #homeDashboard #p10Home :is(.p10-hero,.p10-route-card,.p10-support-grid .p10-card) { padding: 20px; }
  #homeDashboard #p10Home .p10-hero h2 { font-size: 22px; }
  #homeDashboard #p10Home .p10-actions { margin-top: 22px; }
  #homeDashboard #p10Home .p10-actions > .p10-button { flex: none; width: 100%; }
  #homeDashboard #p10Home .p10-journey { grid-template-columns: minmax(0,1fr); }
  #homeDashboard #p10Home .p10-summary-hint { display: none; }
}


/* source: profile-workbench-ui.css */
/* Functional UI round 02: resume and target preparation. Deliberately scoped to
 * the P04 root; presentation only, with no hidden permissions or feature gates. */
#resumeProfileWorkspace.p04-profile {
  --p04-bg: var(--hw-ui-surface, #fff);
  --p04-soft: var(--hw-ui-hover, #eeeff2);
  --p04-text: var(--hw-ui-text, #20252d);
  --p04-muted: var(--hw-ui-muted, #626a75);
  --p04-line: var(--hw-ui-line, #e6e8ec);
  --p04-blue: var(--hw-ui-primary, #a63a32);
  --p04-warning: #795315;
  --p04-warning-bg: #fff8e9;
  max-width: 1180px;
  padding: 32px 28px calc(44px + env(safe-area-inset-bottom, 0px));
  color: var(--p04-text) !important;
  background: transparent !important;
  line-height: 1.65;
}
html[data-theme="dark"] #resumeProfileWorkspace.p04-profile {
  --p04-bg: var(--hw-ui-surface, #1d2026);
  --p04-soft: var(--hw-ui-hover, #24272e);
  --p04-text: var(--hw-ui-text, #f3f4f6);
  --p04-muted: var(--hw-ui-muted, #acb1bb);
  --p04-line: var(--hw-ui-line, #30343d);
  --p04-blue: var(--hw-ui-primary, #b94338);
  --p04-warning: #efcd91;
  --p04-warning-bg: #332a1f;
}
#resumeProfileWorkspace.p04-profile :is(h2, h3, p, label, strong, small, span, dt, dd, li) {
  color: inherit !important;
  background: transparent !important;
}
#resumeProfileWorkspace.p04-profile .p04-header {
  gap: 20px;
  margin-bottom: 24px;
  align-items: center;
}
#resumeProfileWorkspace.p04-profile .p04-header h2 {
  margin: 4px 0 8px;
  font-size: clamp(26px, 3vw, 32px) !important;
  line-height: 1.3;
  letter-spacing: -.025em;
}
#resumeProfileWorkspace.p04-profile .p04-eyebrow {
  color: var(--p04-muted) !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: .02em;
}
#resumeProfileWorkspace.p04-profile .p04-muted { color: var(--p04-muted) !important; }
#resumeProfileWorkspace.p04-profile :is(h2,h3) { color: var(--p04-text) !important; }
#resumeProfileWorkspace.p04-profile .p04-small { font-size: 13px !important; }
#resumeProfileWorkspace.p04-profile .p04-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  margin: 0 0 24px;
  border: 1px solid var(--p04-line);
  border-radius: 14px;
  background: var(--p04-bg) !important;
}
#resumeProfileWorkspace.p04-profile .p04-steps li {
  padding: 12px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--p04-muted) !important;
  min-width: 0;
}
#resumeProfileWorkspace.p04-profile .p04-steps li + li::before { content: none; }
#resumeProfileWorkspace.p04-profile .p04-steps li strong { display: block; font-size: 15px; font-weight: 650; }
#resumeProfileWorkspace.p04-profile .p04-steps li small { display: block; font-size: 12px; font-weight: 400; margin-top: 2px; }
#resumeProfileWorkspace.p04-profile .p04-step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  font-size: 14px;
  font-weight: 650;
  border: 1px solid var(--p04-line);
  border-radius: 50%;
}
#resumeProfileWorkspace.p04-profile .p04-steps [aria-current="step"] {
  color: var(--hw-ui-accent, #a63a32) !important;
  background: var(--hw-ui-soft, #f8ece9) !important;
}
#resumeProfileWorkspace.p04-profile .p04-steps [aria-current="step"] .p04-step-number { border-color: currentColor; }
#resumeProfileWorkspace.p04-profile .p04-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; align-items: start; }
#resumeProfileWorkspace.p04-profile .p04-main { min-width: 0; }
#resumeProfileWorkspace.p04-profile .p04-card {
  background: var(--p04-bg) !important;
  color: var(--p04-text) !important;
  border: 1px solid var(--p04-line) !important;
  border-radius: 14px;
  box-shadow: none !important;
  padding: 24px;
  margin-bottom: 18px;
}
#resumeProfileWorkspace.p04-profile .p04-card h3 { font-size: 20px !important; line-height: 1.5; }
#resumeProfileWorkspace.p04-profile .p04-card > p { line-height: 1.75; }
#resumeProfileWorkspace.p04-profile .p04-start-card { padding-block: 30px; }
#resumeProfileWorkspace.p04-profile .p04-start-card > .p04-actions { margin-top: 24px; }
#resumeProfileWorkspace.p04-profile .p04-guide {
  border: 1px solid var(--p04-line);
  border-radius: 14px;
  padding: 22px;
  background: var(--p04-bg) !important;
  color: var(--p04-text) !important;
}
#resumeProfileWorkspace.p04-profile .p04-guide h3 { margin: 8px 0 12px; font-size: 17px !important; line-height: 1.6; }
#resumeProfileWorkspace.p04-profile .p04-guide p { font-size: 14px !important; line-height: 1.8; }
#resumeProfileWorkspace.p04-profile .p04-boundaries { margin: 22px 0 0; border-top: 1px solid var(--p04-line); }
#resumeProfileWorkspace.p04-profile .p04-boundaries > div { padding-top: 16px; }
#resumeProfileWorkspace.p04-profile .p04-boundaries dt { font-weight: 650; font-size: 13px; }
#resumeProfileWorkspace.p04-profile .p04-boundaries dd { margin: 4px 0 0; font-size: 13px; color: var(--p04-muted) !important; line-height: 1.8; }
#resumeProfileWorkspace.p04-profile .p04-input-mode {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--p04-line);
  border-radius: 10px;
  background: var(--p04-soft);
}
#resumeProfileWorkspace.p04-profile .p04-input-mode .p04-button { min-height: 40px; padding: 7px 18px; border-color: transparent !important; background: transparent !important; }
#resumeProfileWorkspace.p04-profile .p04-input-mode [aria-pressed="true"] {
  background: var(--p04-bg) !important;
  color: var(--hw-ui-accent, #a63a32) !important;
  border-color: var(--p04-line) !important;
}
#resumeProfileWorkspace.p04-profile .p04-upload-area { padding: 20px; border: 1px dashed var(--p04-line); border-radius: 10px; background: var(--p04-bg); }
#resumeProfileWorkspace.p04-profile .p04-upload-area p { margin-top: 12px; }
#resumeProfileWorkspace.p04-profile :is(input:not([type="checkbox"]), textarea, select) {
  background: var(--p04-bg) !important;
  color: var(--p04-text) !important;
  border: 1px solid var(--p04-line) !important;
  border-radius: 8px;
  min-height: 44px;
  font-size: 15px !important;
  line-height: 1.65;
}
#resumeProfileWorkspace.p04-profile textarea::placeholder { color: var(--p04-muted) !important; }
#resumeProfileWorkspace.p04-profile input[type="file"] { padding: 8px; font-size: 13px !important; }
#resumeProfileWorkspace.p04-profile input[type="file"]::file-selector-button {
  border: 1px solid var(--p04-line);
  border-radius: 6px;
  min-height: 34px;
  padding: 5px 10px;
  margin-right: 12px;
  background: var(--p04-soft);
  color: var(--p04-text);
  font: inherit;
  cursor: pointer;
}
#resumeProfileWorkspace.p04-profile input[type="checkbox"] { accent-color: var(--p04-blue); }
#resumeProfileWorkspace.p04-profile .p04-consent { padding: 14px 16px; border: 1px solid var(--p04-line); border-radius: 8px; font-size: 14px !important; line-height: 1.8; }
#resumeProfileWorkspace.p04-profile .p04-button {
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--p04-line) !important;
  background: var(--p04-bg) !important;
  color: var(--p04-text) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#resumeProfileWorkspace.p04-profile .p04-button:hover:not(:disabled) { background: var(--p04-soft) !important; }
#resumeProfileWorkspace.p04-profile .p04-button.p04-primary {
  background: var(--p04-blue) !important;
  border-color: var(--p04-blue) !important;
  color: #fff !important;
}
html[data-theme="dark"] #resumeProfileWorkspace.p04-profile .p04-button.p04-primary {
  background: var(--p04-blue) !important;
  border-color: var(--p04-blue) !important;
  color: #fff !important;
}
#resumeProfileWorkspace.p04-profile .p04-button.p04-primary:hover:not(:disabled) { background: var(--hw-ui-primary-hover, #902d27) !important; }
#resumeProfileWorkspace.p04-profile .p04-button:disabled { opacity: .65; cursor: not-allowed; }
#resumeProfileWorkspace.p04-profile :is(button, input, select, textarea, summary, a):focus-visible { outline: 3px solid var(--hw-ui-focus, #a63a32) !important; outline-offset: 3px; }
#resumeProfileWorkspace.p04-profile .p04-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
#resumeProfileWorkspace.p04-profile .p04-state { color: var(--p04-muted) !important; background: var(--p04-soft) !important; font-size: 12px !important; border-radius: 6px; }
#resumeProfileWorkspace.p04-profile .p04-fact { padding: 20px 0; }
#resumeProfileWorkspace.p04-profile .p04-fact-text { display: flex; align-items: flex-start; gap: 10px; line-height: 1.8; }
#resumeProfileWorkspace.p04-profile .p04-fact-number { flex: 0 0 24px; min-height: 24px; text-align: center; border: 1px solid var(--p04-line); border-radius: 6px; color: var(--p04-muted) !important; font-size: 12px; margin-top: 2px; }
#resumeProfileWorkspace.p04-profile .p04-fact .p04-grid { gap: 16px; }
#resumeProfileWorkspace.p04-profile [data-p04-correction] { margin-top: 14px; }
#resumeProfileWorkspace.p04-profile details { border-color: var(--p04-line); }
#resumeProfileWorkspace.p04-profile summary { min-height: 44px; padding: 9px 0; color: var(--p04-muted) !important; font-size: 14px !important; line-height: 1.8; }
#resumeProfileWorkspace.p04-profile summary:hover { color: var(--p04-text) !important; }
#resumeProfileWorkspace.p04-profile details[open] > summary { color: var(--p04-text) !important; }
#resumeProfileWorkspace.p04-profile details.p04-card { padding-block: 10px; }
#resumeProfileWorkspace.p04-profile details.p04-card[open] { padding-bottom: 22px; }
#resumeProfileWorkspace.p04-profile details.p04-card > .p04-card { border: 0 !important; padding: 6px 0 0; margin-bottom: 0; }
#resumeProfileWorkspace.p04-profile .p04-source { background: var(--p04-soft) !important; color: var(--p04-text) !important; border-color: var(--p04-line); font-size: 14px; border-radius: 0 8px 8px 0; }
#resumeProfileWorkspace.p04-profile .p04-next-step { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--p04-line); }
#resumeProfileWorkspace.p04-profile .p04-next-step > * + * { margin-top: 12px; }
#resumeProfileWorkspace.p04-profile .p04-pending-feature { padding: 16px; border: 1px dashed var(--p04-line); border-radius: 10px; }
#resumeProfileWorkspace.p04-profile .p04-pending-feature p { margin-top: 10px; }
#resumeProfileWorkspace.p04-profile .p04-notice { background: var(--p04-soft) !important; color: var(--p04-text) !important; }
#resumeProfileWorkspace.p04-profile .p04-notice[data-tone="warning"] { background: var(--p04-warning-bg) !important; color: var(--p04-warning) !important; }
@media (max-width: 1000px) {
  #resumeProfileWorkspace.p04-profile .p04-workbench { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #resumeProfileWorkspace.p04-profile .p04-boundaries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 720px) {
  #resumeProfileWorkspace.p04-profile { padding: 22px 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
  #resumeProfileWorkspace.p04-profile .p04-header { align-items: flex-start; gap: 14px; }
  #resumeProfileWorkspace.p04-profile .p04-steps { gap: 4px; padding: 6px; }
  #resumeProfileWorkspace.p04-profile .p04-steps li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 6px; }
  #resumeProfileWorkspace.p04-profile .p04-steps li strong { font-size: 13px; }
  #resumeProfileWorkspace.p04-profile .p04-steps li small { font-size: 11px; line-height: 1.7; }
  #resumeProfileWorkspace.p04-profile .p04-card { padding: 20px 16px; }
  #resumeProfileWorkspace.p04-profile .p04-upload-area { padding: 16px; }
  #resumeProfileWorkspace.p04-profile .p04-actions { align-items: stretch; gap: 10px; }
  #resumeProfileWorkspace.p04-profile .p04-actions .p04-button { width: 100%; }
  #resumeProfileWorkspace.p04-profile .p04-boundaries { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #resumeProfileWorkspace.p04-profile * { scroll-behavior: auto; transition: none; }
}


/* source: interview-workbench-ui.css */
/* Functional UI round: interview preparation and active answer workspace.
 * Presentation only. Keep [hidden], role, voice, permission and exit state owned
 * by the existing controller. The bottom bar is reparented by app.js. */
html:root body[data-active-panel="interview"] #interviewPage#interviewPage {
  --interview-ink: var(--hw-ui-text);
  --interview-muted: var(--hw-ui-muted);
  --interview-card: var(--hw-ui-surface);
  --interview-inset: var(--hw-ui-bg);
  --interview-line: var(--hw-ui-line);
  --interview-accent: var(--hw-ui-accent);
  --interview-accent-bg: var(--hw-ui-soft);
  color: var(--hw-ui-text) !important;
  background: var(--hw-ui-bg) !important;
  background-image: none !important;
  min-width: 0 !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage :is(.interview-space-shell, #interviewLobby) {
  width: 100% !important; max-width: 1200px !important; min-width: 0 !important;
  margin: 0 auto !important; background: transparent !important; box-shadow: none !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-space-shell { padding: 28px 32px 40px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewLobby { padding: 0 !important; border: 0 !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-meeting-lobby-head {
  gap: 20px !important; margin: 0 0 24px !important; align-items: center !important; background: transparent !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-meeting-lobby-head h2 {
  margin: 4px 0 8px !important; font-size: clamp(24px, 2.5vw, 30px) !important; letter-spacing: -.6px !important;
  line-height: 1.3 !important; color: var(--hw-ui-text) !important; background: transparent !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-meeting-lobby-head :is(.eyebrow, span) {
  font-size: 13px !important; line-height: 1.65 !important; color: var(--hw-ui-muted) !important; background: transparent !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-meeting-lobby-status {
  padding: 9px 12px !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 8px !important;
  background: var(--hw-ui-surface) !important; box-shadow: none !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .p04-interview-entry {
  display: flex !important; gap: 16px !important; align-items: center !important; justify-content: space-between !important;
  border: 1px solid var(--hw-ui-line) !important; padding: 14px 18px !important; border-radius: 10px !important;
  background: var(--hw-ui-surface) !important; margin: 0 0 20px !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .p04-interview-entry p {
  color: var(--hw-ui-muted) !important; margin: 0 !important; font-size: 14px !important; line-height: 1.7 !important; background: transparent !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-mode-bar {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important;
  padding: 0 !important; margin: 0 0 20px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-final-mode-option {
  --mode-ink: var(--hw-ui-accent); --mode-bg: var(--hw-ui-soft);
  display: flex !important; gap: 12px !important; align-items: center !important;
  min-width: 0 !important; min-height: 80px !important; padding: 14px 16px !important; border-radius: 10px !important;
  background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important;
  box-shadow: none !important; transform: none !important; color: var(--hw-ui-text) !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-final-mode-option.is-active {
  background: var(--hw-ui-soft) !important; border-color: var(--hw-ui-accent) !important; box-shadow: inset 0 0 0 1px var(--hw-ui-accent) !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-final-mode-option > i {
  width: 30px !important; height: 30px !important; flex: 0 0 30px !important; border-radius: 7px !important;
  background: var(--hw-ui-bg) !important; color: var(--hw-ui-muted) !important; font-size: 12px !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-final-mode-option.is-active > i { background: var(--hw-ui-accent) !important; color: var(--hw-ui-surface) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-final-mode-option strong { font-size: 15px !important; color: var(--hw-ui-text) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-final-mode-option small { font-size: 12px !important; color: var(--hw-ui-muted) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-final-mode-option em {
  margin-left: auto !important; padding: 3px 7px !important; font-size: 11px !important;
  background: var(--hw-ui-bg) !important; color: var(--hw-ui-muted) !important; border-radius: 5px !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-meeting-lobby-grid {
  display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr) !important;
  gap: 20px !important; align-items: start !important; min-width: 0 !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage :is(.interview-lobby-interviewer, .interview-lobby-answer, .interview-lobby-analysis, .interview-lobby-mode-brief, .interview-secondary-details) {
  min-width: 0 !important; background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important;
  border-radius: 12px !important; box-shadow: none !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-interviewer { grid-template-rows: auto auto !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-video {
  display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; grid-template-rows: auto auto !important;
  align-items: center !important; justify-items: start !important; gap: 4px 16px !important; padding: 22px 24px !important;
  height: auto !important; min-height: 112px !important; background: transparent !important; overflow: visible !important;
  border-bottom: 1px solid var(--hw-ui-line) !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage :is(.interview-lobby-video, .interview-video-tile)::after { content: none !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-video > img {
  position: static !important; grid-column: 1 !important; grid-row: 1 / 3 !important;
  width: 64px !important; height: 64px !important; min-height: 0 !important; max-width: 64px !important;
  object-fit: cover !important; border-radius: 50% !important; transform: none !important; border: 0 !important; filter: none !important; box-shadow: none !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-video > div {
  position: static !important; grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-wrap: wrap !important;
  gap: 4px 12px !important; align-items: center !important; padding: 0 !important; background: transparent !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-video > div strong { font-size: 16px !important; color: var(--hw-ui-text) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-video > div small { font-size: 12px !important; color: var(--hw-ui-muted) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-video > .interview-video-live {
  grid-column: 2 !important; grid-row: 2 !important; position: static !important; width: fit-content !important; max-width: 100% !important;
  margin: 0 !important; background: var(--hw-ui-bg) !important; color: var(--hw-ui-muted) !important;
  border: 0 !important; border-radius: 5px !important; min-height: 24px !important; padding: 3px 7px !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-question { padding: 24px !important; background: transparent !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-question h3 {
  font-size: clamp(20px, 2vw, 25px) !important; line-height: 1.6 !important; letter-spacing: -.25px !important;
  margin: 18px 0 14px !important; color: var(--hw-ui-text) !important; background: transparent !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-question :is(p, em) { color: var(--hw-ui-muted) !important; font-size: 13px !important; line-height: 1.7 !important; background: transparent !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-question-tags { margin-top: 20px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-side { display: flex !important; flex-direction: column !important; gap: 12px !important; min-width: 0 !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage :is(.interview-lobby-answer, .interview-lobby-analysis, .interview-lobby-mode-brief) { padding: 18px 20px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-waveform { height: 44px !important; min-height: 44px !important; margin: 12px 0 !important; padding: 8px !important; background: var(--hw-ui-bg) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-waveform i { background: var(--hw-ui-muted) !important; height: 10px !important; animation: none !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-answer > p { margin: 0 !important; font-size: 12px !important; color: var(--hw-ui-muted) !important; background: transparent !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-analysis dl { margin: 12px 0 0 !important; gap: 6px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-analysis dl > div { padding: 8px 10px !important; background: var(--hw-ui-bg) !important; border: 0 !important; border-radius: 6px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-mode-brief strong { font-size: 16px !important; color: var(--hw-ui-text) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-mode-brief :is(ol, dl) { margin-top: 12px !important; gap: 8px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-mode-brief li { min-height: 36px !important; padding: 9px !important; background: var(--hw-ui-bg) !important; border-radius: 6px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-actions { order: -1 !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 0 4px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewSpaceStartBtn {
  flex: 1 1 100% !important; min-height: 48px !important; background: var(--hw-ui-primary) !important; color: var(--hw-ui-on-primary) !important;
  border: 1px solid var(--hw-ui-primary) !important; border-radius: 9px !important; font-size: 16px !important; box-shadow: none !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewSpaceStartBtn span { color: inherit !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-secondary-details { margin-top: 24px !important; padding: 0 !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-secondary-details summary { min-height: 48px !important; padding: 16px 20px !important; color: var(--hw-ui-text) !important; }

/* The active meeting stays vertically scrollable, with the current question
 * above the answer. The controller still owns profile/coach drawer visibility. */
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio.interview-space-arena-open {
  background: var(--hw-ui-bg) !important; min-width: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; padding-bottom: 0 !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-training-statusbar {
  background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important;
  border-radius: 10px !important; padding: 14px 18px !important; margin: 20px 24px 0 !important; width: calc(100% - 48px) !important; gap: 16px !important; box-shadow: none !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio > .interview-main-dashboard {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important; grid-template-rows: auto !important;
  align-items: start !important; gap: 20px !important; padding: 20px 24px 130px !important;
  min-width: 0 !important; min-height: 0 !important; max-height: none !important; height: auto !important; overflow: visible !important; background: transparent !important; flex: 0 0 auto !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-workspace-card {
  display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
  padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; grid-area: 1 / 1 / 2 / 2 !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-copilot-card { grid-area: 1 / 2 / 2 / 3 !important; align-self: start !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-workspace-card > .section-head { padding: 0 0 14px !important; background: transparent !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-arena-stack {
  display: flex !important; flex-direction: column !important; gap: 16px !important; height: auto !important; overflow: visible !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-question-card, .interview-answer-zone, .interview-question-feedback-card-inline, .interview-copilot-card) {
  width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important;
  border-radius: 12px !important; box-shadow: none !important; overflow: visible !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-meeting-stage-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-video-tile {
  position: relative !important; display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 16px 20px !important; min-height: 74px !important; height: auto !important;
  border: 0 !important; border-bottom: 1px solid var(--hw-ui-line) !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-video-tile > img {
  position: static !important; order: -1 !important; width: 40px !important; height: 40px !important; min-height: 0 !important;
  object-fit: cover !important; border-radius: 50% !important; transform: none !important; filter: none !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-video-tile > div {
  position: static !important; padding: 0 !important; order: 0 !important; flex: 1 !important; background: transparent !important;
  display: grid !important; gap: 4px !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-video-tile > .interview-video-live { position: static !important; order: 1 !important; font-size: 11px !important; background: var(--hw-ui-bg) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-question-dialog { padding: 20px !important; background: transparent !important; min-width: 0 !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio #questionBox {
  font-size: clamp(20px, 2vw, 26px) !important; line-height: 1.65 !important; font-weight: 650 !important;
  margin: 12px 0 20px !important; padding: 0 !important; min-height: 0 !important; background: transparent !important;
  border: 0 !important; box-shadow: none !important; color: var(--hw-ui-text) !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-answer-zone, .interview-copilot-card) { padding: 20px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-answer-live-card {
  border: 1px solid var(--hw-ui-line) !important; background: var(--hw-ui-bg) !important; border-radius: 8px !important; padding: 16px !important; min-height: 100px !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio #candidateAnswer {
  background: var(--hw-ui-bg) !important; color: var(--hw-ui-text) !important; border: 1px solid var(--hw-ui-line) !important;
  border-radius: 8px !important; padding: 14px !important; min-height: 150px !important; width: 100% !important; resize: vertical !important; font-size: 15px !important; line-height: 1.8 !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio #candidateAnswer::placeholder { color: var(--hw-ui-muted) !important; -webkit-text-fill-color: var(--hw-ui-muted) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.coach-live-score-card, .coach-structure-card, .coach-followup-card) {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--hw-ui-line) !important; border-radius: 0 !important;
  padding: 16px 0 !important; box-shadow: none !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-practice-answer-guide, .coach-structure-item, #engineeringScoreSummary > div, .interview-question-meta > span) { background: var(--hw-ui-bg) !important; border-color: var(--hw-ui-line) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage :is(h3, h4, strong, dt, dd, label) { color: var(--hw-ui-text) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage :is(p, small, em, .eyebrow) { color: var(--hw-ui-muted) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage :is(.interview-lobby-answer, .interview-lobby-analysis, .interview-lobby-mode-brief, .interview-training-statusbar, .interview-copilot-card, .interview-question-dialog, .interview-answer-zone) :is(header, p, span, strong, em, small) { background-color: transparent !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage :is(button, summary, textarea):focus-visible { outline: 3px solid var(--hw-ui-focus) !important; outline-offset: 3px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage .ghost-btn {
  background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 8px !important;
  color: var(--hw-ui-text) !important; min-height: 40px !important; box-shadow: none !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage button:disabled { opacity: .58 !important; cursor: not-allowed !important; }
/* Legacy .section-card rules override the native hidden attribute. Keep the
 * controller's explicit visibility decisions authoritative at every width. */
html:root body[data-active-panel="interview"] #interviewPage#interviewPage#interviewPage [hidden] { display: none !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-training-title, .interview-training-title > div, .interview-training-actions, .interview-final-active-mode, .interview-training-metrics, .interview-training-score, .interview-question-card-head, .interview-question-footer, .interview-answer-transcript-body, #interviewAnswerHighlightPreview, .interview-ai-coach-panel, .interview-copilot-card > .section-head, .interview-copilot-card > .section-head > div) { background: transparent !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-video-tile, .interview-answer-zone-head, .interview-waveform, .interview-question-info-row, .interview-question-info-row > span, .coach-structure-list, .coach-followup-list) { background: transparent !important; border-color: var(--hw-ui-line) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio #interviewTopRoundLabel::after { background: var(--hw-ui-accent) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(#pauseInterviewTrainingBtn, #interviewProfileDrawerBtn, #toggleInterviewTextModeBtn, #interviewCoachCollapseBtn) { background: var(--hw-ui-bg) !important; color: var(--hw-ui-text) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 8px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-practice-answer-guide li, #copilotFollowupLibrary button, .coach-live-score-head em, .coach-panel-title > span) { background: var(--hw-ui-bg) !important; color: var(--hw-ui-muted) !important; border-color: var(--hw-ui-line) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-question-info-row, .interview-practice-answer-guide, .interview-answer-zone-head, .interview-copilot-card, .interview-video-tile) :is(span, small, p, li, em, b) { font-size: 12px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-question-dialog, .interview-copilot-card, .interview-answer-zone) :is(p, span, strong, em, small, h3) { background-color: transparent !important; color: var(--hw-ui-text) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-question-dialog, .interview-copilot-card, .interview-answer-zone) :is(p, em, small) { color: var(--hw-ui-muted) !important; }

/* Existing reparented controls. Never change their display/visibility or
 * disabled state: recording/transcribing/analyzing owns those transitions. */
html:root body[data-active-panel="interview"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar {
  background: var(--hw-ui-surface) !important; border-top: 1px solid var(--hw-ui-line) !important;
  box-shadow: 0 -4px 18px rgb(0 0 0 / 5%) !important; padding: 12px 20px !important; gap: 12px !important; min-height: 76px !important;
}
html:root body[data-active-panel="interview"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar :is(.interview-bottom-actions, .interview-bottom-context) { background: transparent !important; }
html:root body[data-active-panel="interview"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar button {
  min-height: 44px !important; border-radius: 8px !important; box-shadow: none !important; font-size: 14px !important; white-space: nowrap !important;
  background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border: 1px solid var(--hw-ui-line) !important;
}
html:root body[data-active-panel="interview"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar #startInterviewRecordingBtn {
  background: var(--hw-ui-primary) !important; border-color: var(--hw-ui-primary) !important; color: var(--hw-ui-on-primary) !important;
}
html:root body[data-active-panel="interview"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar :is(#interviewBottomStage, #interviewRecordingTimer) { color: var(--hw-ui-muted) !important; background: transparent !important; }
html:root body[data-active-panel="interview"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar button:focus-visible { outline: 3px solid var(--hw-ui-focus) !important; outline-offset: 3px !important; }
/* Existing body-level portals: identity, evidence and explicit exit stay
 * readable without changing open/close semantics or injecting sample scores. */
html:root body[data-active-panel="interview"] #interviewProfileDrawer#interviewProfileDrawer {
  width: min(440px, 100vw) !important; max-width: 100vw !important; height: 100dvh !important;
  background: var(--hw-ui-surface) !important; border-left: 1px solid var(--hw-ui-line) !important;
  color: var(--hw-ui-text) !important; box-shadow: -12px 0 40px rgb(0 0 0 / 12%) !important;
  padding: 24px !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 20001 !important;
}
html:root body[data-active-panel="interview"] #interviewProfileDrawerBackdrop#interviewProfileDrawerBackdrop { z-index: 20000 !important; background: rgb(0 0 0 / 42%) !important; }
html:root body[data-active-panel="interview"] #interviewProfileDrawer#interviewProfileDrawer :is(.interview-profile-drawer-head, .interview-profile-drawer-section, .interview-profile-drawer-grid > div) {
  background: transparent !important; border-color: var(--hw-ui-line) !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; flex: 0 0 auto !important;
}
html:root body[data-active-panel="interview"] #interviewProfileDrawer#interviewProfileDrawer :is(h3, strong, span, li) { color: var(--hw-ui-text) !important; background: transparent !important; }
html:root body[data-active-panel="interview"] #interviewProfileDrawer#interviewProfileDrawer p { color: var(--hw-ui-muted) !important; background: transparent !important; font-size: 13px !important; line-height: 1.7 !important; }
html:root body[data-active-panel="interview"] #interviewProfileDrawer#interviewProfileDrawer .interview-profile-drawer-head > div > strong { font-size: 24px !important; }
html:root body[data-active-panel="interview"] #interviewProfileDrawer#interviewProfileDrawer .interview-profile-drawer-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
html:root body[data-active-panel="interview"] #interviewProfileDrawer#interviewProfileDrawer :is(.interview-profile-drawer-grid > div, .interview-profile-drawer-tags > span, .interview-profile-drawer-flow > span) { background: var(--hw-ui-bg) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 8px !important; }
html:root body[data-active-panel="interview"] #interviewProfileDrawer#interviewProfileDrawer .interview-profile-drawer-close {
  position: static !important; width: 40px !important; height: 40px !important; min-width: 40px !important;
  color: var(--hw-ui-muted) !important; background: var(--hw-ui-bg) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 8px !important; box-shadow: none !important;
}
html:root body[data-active-panel="interview"] #interviewProfileDrawer#interviewProfileDrawer button:focus-visible { outline: 3px solid var(--hw-ui-focus) !important; outline-offset: 3px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio #interviewExitDialog {
  width: min(520px, calc(100vw - 32px)) !important; max-height: calc(100dvh - 32px) !important;
  padding: 24px !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 14px !important;
  background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; overflow-y: auto !important;
}
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio #interviewExitDialog :is(h3, p, .form-actions) { background: transparent !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio #interviewExitDialog p { font-size: 14px !important; line-height: 1.8 !important; color: var(--hw-ui-muted) !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio #interviewExitDialog .form-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 22px !important; }
html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio #interviewExitDialog #saveInterviewProgressBtn { background: var(--hw-ui-primary) !important; color: var(--hw-ui-on-primary) !important; border: 1px solid var(--hw-ui-primary) !important; border-radius: 8px !important; min-height: 44px !important; }
html:root body[data-active-panel="interview"] #interviewQuestionFeedbackModal#interviewQuestionFeedbackModal .modal-card {
  width: min(680px, calc(100vw - 32px)) !important; max-height: calc(100dvh - 40px) !important;
  background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 14px !important;
  padding: 28px !important; overflow-y: auto !important; color: var(--hw-ui-text) !important;
}
html:root body[data-active-panel="interview"] #interviewQuestionFeedbackModal#interviewQuestionFeedbackModal :is(.question-feedback-hero, .question-feedback-advice, .question-feedback-rubric, .form-actions, p, h3, strong) { background: transparent !important; color: var(--hw-ui-text) !important; }
html:root body[data-active-panel="interview"] #interviewQuestionFeedbackModal#interviewQuestionFeedbackModal #questionFeedbackScore { font-size: 24px !important; color: var(--hw-ui-accent) !important; }
html:root body[data-active-panel="interview"] #interviewQuestionFeedbackModal#interviewQuestionFeedbackModal :is(.question-feedback-rubric > div, .question-feedback-advice) { background: var(--hw-ui-bg) !important; border-color: var(--hw-ui-line) !important; border-radius: 8px !important; }
html:root body[data-active-panel="interview"] #interviewQuestionFeedbackModal#interviewQuestionFeedbackModal button { min-height: 44px !important; border-radius: 8px !important; box-shadow: none !important; }
html:root body[data-active-panel="interview"] #interviewQuestionFeedbackModal#interviewQuestionFeedbackModal #questionFeedbackNextBtn { color: var(--hw-ui-on-primary) !important; background: var(--hw-ui-primary) !important; border-color: var(--hw-ui-primary) !important; }
html:root body[data-active-panel="interview"] #interviewQuestionFeedbackModal#interviewQuestionFeedbackModal button:focus-visible { outline: 3px solid var(--hw-ui-focus) !important; outline-offset: 3px !important; }
@media (max-width: 1100px) {
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-space-shell { padding: 24px !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-meeting-lobby-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-side { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage :is(.interview-lobby-actions, .interview-lobby-mode-brief) { grid-column: 1 / -1 !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio > .interview-main-dashboard { display: flex !important; flex-direction: column !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-training-statusbar { flex-wrap: wrap !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-copilot-card { position: static !important; }
}
@media (max-width: 600px) {
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-space-shell { padding: 20px 16px 28px !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-meeting-lobby-head { align-items: flex-start !important; flex-direction: column !important; gap: 12px !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage .p04-interview-entry { align-items: flex-start !important; flex-direction: column !important; gap: 10px !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-mode-bar { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-final-mode-option { min-height: 64px !important; padding: 10px 12px !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage .interview-lobby-side { display: flex !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage :is(.interview-lobby-question, .interview-lobby-video) { padding: 18px !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio > .interview-main-dashboard { padding: 16px 12px 220px !important; gap: 16px !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-training-statusbar { margin: 16px 12px 0 !important; width: calc(100% - 24px) !important; padding: 12px !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-answer-zone, .interview-question-dialog, .interview-copilot-card) { padding: 16px !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-video-tile { flex-wrap: wrap !important; }
  html:root body[data-active-panel="interview"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-answer-zone-head { flex-wrap: wrap !important; gap: 10px !important; }
  html:root body[data-active-panel="interview"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; gap: 8px !important; }
  html:root body[data-active-panel="interview"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar button { padding: 10px !important; font-size: 13px !important; }
}

/* Training: one question, one answer area, one state-owned primary action.
 * Preserve original nodes/handlers; keep this presentation out of other rooms. */
.training-simple-heading, .training-simple-help, .training-simple-answer-status { display: none; }
/* The legacy guide uses six ID selectors; match that specificity only here. */
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #interviewPracticeAnswerGuide#interviewPracticeAnswerGuide { display: none !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio {
  max-width: 1120px !important; margin: 0 auto !important; padding: 24px 28px 120px !important;
}

/* Shared question speech controls, never a second answer submission control. */
.question-speech-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.question-speech-controls button { width: auto !important; min-width: 0 !important; min-height: 36px; padding: 7px 12px !important; font-size: 14px !important; line-height: 1.5; white-space: nowrap; }
.question-speech-controls span { color: var(--hw-ui-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.question-speech-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
#hwSettingsQuestionSpeech .user-settings-field { min-width: 0; }
#hwSettingsQuestionSpeech :is(select,textarea) { width: 100%; max-width: 100%; color: var(--hw-ui-text); background: var(--hw-ui-bg); border: 1px solid var(--hw-ui-line); border-radius: 8px; padding: 10px; }
.question-speech-auto { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.question-speech-dictionary { margin: 12px 0; }
#hwSettingsQuestionSpeech summary { cursor: pointer; padding: 8px 0; }
#hwSettingsQuestionSpeech :is(summary,p,label) { color: var(--hw-ui-text); }
#questionSpeechDictionaryStatus { display: block; margin: 8px 0; color: var(--hw-ui-muted); }
@media(max-width:600px) { .question-speech-settings-grid { grid-template-columns: 1fr; } .question-speech-controls span { flex-basis: 100%; } }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-training-statusbar {
  display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important;
  width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; gap: 12px !important; background: transparent !important; border: 0 !important;
}
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .training-simple-heading { display: grid !important; gap: 6px; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .training-simple-heading h2 { margin: 0 !important; font-size: 26px !important; color: var(--hw-ui-text) !important; line-height: 1.4; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .training-simple-heading p { margin: 0 !important; font-size: 14px !important; line-height: 1.6; color: var(--hw-ui-muted) !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-training-title,.interview-final-active-mode,.interview-training-metrics,.interview-training-score,.interview-video-tile,.interview-question-card-head,.interview-question-dialog > p,.interview-question-footer,#interviewPracticeAnswerGuide,.interview-copilot-card,.interview-live-transcript-card,#xiaowenLiveInterviewCoach,.interview-answer-zone-head,.interview-answer-action-row > button:first-child) { display: none !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-training-actions { display: flex !important; width: auto !important; margin: 0 !important; gap: 8px !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-training-actions button { width: auto !important; max-width: none !important; flex: 0 0 auto !important; min-width: 0 !important; padding: 8px 12px !important; min-height: 40px !important; font-size: 13px !important; background: transparent !important; white-space: nowrap !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow {
  margin: 0 0 20px !important; padding: 18px 20px !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 12px !important;
  background: var(--hw-ui-surface) !important; background-image: none !important; box-shadow: none !important; width: 100% !important;
}
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow[hidden] { display: none !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow header { margin: 0 0 14px !important; padding: 0 !important; display: block !important; background: transparent !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow header :is(span,em) { display: none !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingProblem { font-size: 16px !important; line-height: 1.6 !important; color: var(--hw-ui-text) !important; background: transparent !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow ol { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow li {
  display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 5px 8px !important; min-width: 0 !important; min-height: 40px !important; padding: 10px !important;
  border: 1px solid var(--hw-ui-line) !important; border-radius: 7px !important; background: var(--hw-ui-bg) !important; background-image: none !important; box-shadow: none !important; color: var(--hw-ui-muted) !important;
}
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow li :is(span,strong) { color: inherit !important; background: transparent !important; font-size: 13px !important; line-height: 1.4; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow li.is-current { border-color: var(--hw-ui-primary) !important; background: var(--hw-ui-soft) !important; color: var(--hw-ui-accent) !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow li.is-done { color: var(--hw-ui-text) !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow [data-engineering-flow-score] { display: none !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio > .interview-main-dashboard {
  display: block !important; padding: 0 !important; width: 100% !important; margin: 0 !important; min-height: 0 !important;
}
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-arena-stack { gap: 16px !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-question-dialog { padding: 24px !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #questionBox { font-size: 22px !important; line-height: 1.7 !important; font-weight: 600 !important; margin: 0 0 16px !important; overflow-wrap: anywhere; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .training-simple-help { display: block; color: var(--hw-ui-muted) !important; font-size: 14px !important; background: transparent !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .training-simple-help summary { cursor: pointer; padding: 6px 0; line-height: 1.6; min-height: 32px; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .training-simple-help p { margin: 10px 0 0 !important; font-size: 14px !important; line-height: 1.8; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .training-simple-help:not([open]) > :not(summary) { display: none !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #interviewNotice.good { display: none !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-answer-zone { display: grid !important; gap: 14px !important; padding: 22px 24px !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .training-simple-answer-status { display: grid !important; gap: 6px; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #trainingAnswerStatus { font-size: 16px !important; line-height: 1.6; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #trainingAnswerHint { font-size: 14px !important; margin: 0 !important; line-height: 1.7; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-answer-live-card { min-height: 0 !important; padding: 14px 16px !important; margin: 0 !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-waveform { display: none !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"][data-training-answer-state="recording"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-waveform { display: flex !important; height: 32px !important; margin: 0 !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-answer-transcript-body { min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #interviewAnswerHighlightPreview { font-size: 15px !important; line-height: 1.75 !important; margin: 0 !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"][data-training-answer-state="idle"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-answer-live-card { display: none !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-answer-action-row { margin: 0 !important; padding: 0 !important; justify-content: flex-start !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #toggleInterviewTextModeBtn { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 6px 0 !important; min-height: 36px !important; color: var(--hw-ui-accent) !important; font-size: 14px !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .interview-question-feedback-card-inline { padding: 24px !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio [hidden] { display: none !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #voiceTranscriptionFeedback button { border-radius: 7px; padding: 10px 14px; min-height: 44px; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar {
  display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 16px !important; min-height: 78px !important; padding: 12px 28px !important;
}
html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar .interview-bottom-context { margin-right: auto !important; display: grid !important; gap: 3px !important; min-width: 100px !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar #interviewRecordingTimer { font-size: 22px !important; font-variant-numeric: tabular-nums; line-height: 1.3; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar :is(.interview-bottom-actions-center,.interview-bottom-actions-right) { display: flex !important; width: auto !important; flex: 0 1 auto !important; gap: 10px !important; padding: 0 !important; margin: 0 !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar :is(button,.primary-btn) { min-width: 0 !important; width: auto !important; padding: 11px 22px !important; font-size: 15px !important; background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-line) !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar button.primary-btn { background: var(--hw-ui-primary) !important; color: var(--hw-ui-on-primary) !important; border-color: var(--hw-ui-primary) !important; min-width: 160px !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar #startInterviewRecordingBtn.ghost-btn { background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-line) !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar [hidden] { display: none !important; }
html:root body[data-active-panel="interview"][data-interview-workspace="training"] #mobileActionDock, html:root body[data-active-panel="interview"][data-interview-workspace="training"] .interview-bottom-waveform { display: none !important; }
@media (max-width: 600px) {
  html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio { padding: 18px 14px 160px !important; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio .training-simple-heading h2 { font-size: 22px !important; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow { padding: 14px !important; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow ol { grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 5px !important; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow li { justify-content: center; padding: 8px 3px !important; text-align: center; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow li span { display: none !important; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #engineeringTrainingFlow li strong { font-size: 12px !important; line-height: 1.5; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio :is(.interview-question-dialog,.interview-answer-zone,.interview-question-feedback-card-inline) { padding: 18px !important; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"] #interviewPage#interviewPage #interviewStudio#interviewStudio #questionBox { font-size: 18px !important; line-height: 1.65 !important; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important; bottom: 0 !important; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar .interview-bottom-context { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar :is(button,.primary-btn) { padding: 10px 12px !important; font-size: 14px !important; }
  html:root body[data-active-panel="interview"][data-interview-workspace="training"].interview-meeting-active:has(#interviewPage#interviewPage#interviewPage) .shell > .interview-bottom-actionbar button.primary-btn { min-width: 130px !important; }
}


/* source: sections-workbench-ui.css */
/* Functional workbench: training/resources/history/account only.
 * No data, permissions, visibility, dialog or provider behaviour is changed.
 * Every selector belongs to an explicit panel. Native hidden/details states
 * remain authoritative; nested dialogs are intentionally outside this layer.
 */
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) {
  color: var(--hw-ui-text);
  font-size: 15px;
  line-height: 1.65;
  max-width: 1240px;
  width: 100%;
  min-width: 0;
  margin-inline: auto;
  padding-bottom: 36px;
  --section-gap: 20px;
}
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(h2, h3, h4, p, label, button, input, select, textarea, article, section, aside, main, nav, header, footer):not(dialog, dialog *) {
  min-width: 0;
  box-sizing: border-box;
}
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(h2, h3, h4):not(dialog *) {
  color: var(--hw-ui-text) !important;
  font-family: inherit;
  font-weight: 650;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) h2:not(dialog *) { font-size: clamp(22px, 2.1vw, 28px) !important; line-height: 1.35; }
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) h3:not(dialog *) { font-size: 19px !important; line-height: 1.45; }
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(p, .eyebrow, .muted, .user-settings-note):not(dialog *, .waveform-scope-stage *) {
  color: var(--hw-ui-muted) !important;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(button, summary, a, input, textarea, select):not(dialog *):focus-visible {
  outline: 3px solid var(--hw-ui-focus) !important;
  outline-offset: 3px !important;
}
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(button, summary):not(dialog *) {
  min-height: 44px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color .14s ease, border-color .14s ease;
}
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(.primary-btn, .waveform-learning-primary):not(dialog *, :disabled, [aria-disabled="true"]) {
  color: var(--hw-ui-on-primary) !important;
  background: var(--hw-ui-primary) !important;
  border: 1px solid var(--hw-ui-primary) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  padding: 11px 18px;
  font-weight: 650;
}
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(.ghost-btn, .waveform-learning-secondary):not(dialog *, :disabled) {
  background: var(--hw-ui-surface) !important;
  color: var(--hw-ui-text) !important;
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  padding: 10px 15px;
}
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):not(dialog *, .waveform-scope-toolbar *) {
  min-height: 44px;
  max-width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 9px !important;
  background: var(--hw-ui-surface) !important;
  color: var(--hw-ui-text) !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 15px;
}
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(input, textarea):not(dialog *)::placeholder { color: var(--hw-ui-muted) !important; opacity: 1; }
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) textarea:not(dialog *) { resize: vertical; min-height: 116px; }
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(input[type="checkbox"], input[type="radio"]):not(dialog *) { accent-color: var(--hw-ui-primary); flex: 0 0 auto; width: 18px; height: 18px; }

/* Neutral surfaces are applied to named components, never arbitrary SVGs or dialogs. */
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(.section-card, .growth-archive-card, .career-asset-sheet, .growth-career-asset-section, .resume-role-match-section, .growth-recruiter-value, .engineer-identity-card, .debug-workflow-stage, .debug-workflow-mentor, .debug-workflow-context, .debug-workflow-timeline, .waveform-measure-card, .waveform-diagnosis-card, .waveform-info-card, .waveform-note-card, .waveform-ai-panel, .waveform-final-conclusion-card, .waveform-learning-question-card, .waveform-learning-coach-card, .v51-knowledge-query):not(dialog *) {
  padding: 24px;
  color: var(--hw-ui-text) !important;
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 12px !important;
  background: var(--hw-ui-surface) !important;
  box-shadow: none !important;
}
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(.section-head, .question-training-title, .growth-archive-card-head, .career-asset-identity, .growth-career-asset-head, .recruiter-profile-card-head, .waveform-card-head):not(dialog *) { gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(.feedback-box, .empty-box, [role="note"], .debug-workflow-gate-note):not(dialog *, [hidden]) {
  background: var(--hw-ui-hover) !important;
  border-color: var(--hw-ui-line) !important;
  color: var(--hw-ui-text) !important;
  border-radius: 9px;
  line-height: 1.7;
  padding: 14px 16px;
  overflow-wrap: anywhere;
}

/* Training: one working area, distinct entry choices, then explicit filters. */
html:root[data-theme] body[data-active-panel="question-bank"] .panel[data-panel="question-bank"] :is(.training-rpg-shell, .training-rpg-roadmap, .training-rpg-next-stage, .training-rpg-xp) {
  background: var(--hw-ui-surface) !important;
  border: 1px solid var(--hw-ui-line) !important;
  color: var(--hw-ui-text) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}
html:root[data-theme] body[data-active-panel="question-bank"] .panel[data-panel="question-bank"] .training-rpg-shell {
  padding: 24px !important;
  gap: 20px !important;
}
html:root[data-theme] body[data-active-panel="question-bank"] .panel[data-panel="question-bank"] .training-rpg-core {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  gap: 20px !important;
}
html:root[data-theme] body[data-active-panel="question-bank"] .panel[data-panel="question-bank"] .training-rpg-next-stage {
  min-height: 0 !important;
  background: var(--hw-ui-hover) !important;
}
html:root[data-theme] body[data-active-panel="question-bank"] .panel[data-panel="question-bank"] :is(.training-rpg-shell, .training-rpg-roadmap, .training-rpg-next-stage, .training-rpg-xp) :is(h2, h3, strong, span, p, small, em, b) {
  color: var(--hw-ui-text) !important;
  text-shadow: none !important;
}
html:root[data-theme] body[data-active-panel="question-bank"] .panel[data-panel="question-bank"] :is(.training-rpg-path small, .training-rpg-footer p, .training-rpg-xp small) {
  font-size: 14px !important;
  color: var(--hw-ui-muted) !important;
}
html:root[data-theme] body[data-active-panel="question-bank"] .panel[data-panel="question-bank"] .training-rpg-path li.is-current {
  background: var(--hw-ui-soft) !important;
  border-color: var(--hw-ui-accent) !important;
  box-shadow: none !important;
}
html:root[data-theme] body[data-active-panel="question-bank"] .panel[data-panel="question-bank"] :is(.training-rpg-path li.is-current > i, #trainingRpgLevel) {
  background: var(--hw-ui-primary) !important;
  color: var(--hw-ui-on-primary) !important;
  box-shadow: none !important;
}
html:root body .panel[data-panel="question-bank"] .question-training-center { display: grid; gap: var(--section-gap); }
html:root body .panel[data-panel="question-bank"] :is(.v51-training-entry-grid, .question-training-packs):not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html:root body .panel[data-panel="question-bank"] :is(.v51-training-entry-grid > button, .question-training-pack, .question-bank-card) { background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 10px; box-shadow: none !important; padding: 18px; text-align: left; }
html:root body .panel[data-panel="question-bank"] :is(.v51-training-entry-grid > button) :is(strong, span) { color: var(--hw-ui-text) !important; }
html:root body .panel[data-panel="question-bank"] :is(.v51-training-entry-grid > button) em { color: var(--hw-ui-muted) !important; font-size: 14px; line-height: 1.6; font-style: normal; }
html:root body .panel[data-panel="question-bank"] :is(.v51-training-cockpit, .training-center-fixed-flow, .training-center-secondary-tools) { background: var(--hw-ui-hover) !important; border-color: var(--hw-ui-line) !important; border-radius: 10px; padding: 16px; gap: 16px; }
html:root body .panel[data-panel="question-bank"] .v51-training-cockpit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:root body .panel[data-panel="question-bank"] .v51-training-cockpit strong { color: var(--hw-ui-text) !important; font-size: 16px; }
html:root body .panel[data-panel="question-bank"] .training-center-fixed-flow ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
html:root body .panel[data-panel="question-bank"] .training-center-fixed-flow li { border-color: var(--hw-ui-line) !important; background: var(--hw-ui-surface) !important; padding: 10px; min-width: 0; }
html:root body .panel[data-panel="question-bank"] .question-list-drawer { border: 1px solid var(--hw-ui-line) !important; border-radius: 10px; background: var(--hw-ui-surface) !important; }
html:root body .panel[data-panel="question-bank"] .question-list-summary { width: 100%; padding: 16px; background: var(--hw-ui-hover) !important; color: var(--hw-ui-text) !important; text-align: left; }
html:root body .panel[data-panel="question-bank"] .question-list-content:not([hidden]) { padding: 16px; }
html:root body .panel[data-panel="question-bank"] .toolbar { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(2, minmax(120px, 1fr)); gap: 10px; }
html:root body .panel[data-panel="question-bank"] #questionSearch { grid-column: 1 / -1; width: 100%; }
html:root body .panel[data-panel="question-bank"] #addQuestionBtn { background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-line) !important; }
html:root body .panel[data-panel="question-bank"] :is(.question-source-tabs, .training-center-secondary-actions) { display: flex; flex-wrap: wrap; gap: 8px; }

/* Knowledge: the search/answer pair remains adjacent; provenance remains visible. */
html:root body .panel[data-panel="knowledge-map"] .v51-knowledge-page { display: grid; gap: var(--section-gap); }
html:root body .panel[data-panel="knowledge-map"] :is(.v51-knowledge-query-box, .knowledge-ai-search-head, .knowledge-ai-result-head, .learning-knowledge-card-head) { gap: 14px; flex-wrap: wrap; }
html:root body .panel[data-panel="knowledge-map"] .v51-knowledge-query-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto !important; padding: 12px; background: var(--hw-ui-hover) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 10px; }
html:root body .panel[data-panel="knowledge-map"] .v51-knowledge-query-box > span { color: var(--hw-ui-muted); font-size: 20px; }
html:root body .panel[data-panel="knowledge-map"] #knowledgeCenterQuery { width: 100%; background: var(--hw-ui-surface) !important; }
html:root body .panel[data-panel="knowledge-map"] :is(.v51-asset-app-grid, .knowledge-association-track, .learning-formula-grid, .v51-knowledge-categories) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html:root body .panel[data-panel="knowledge-map"] :is(.knowledge-association-node, .engineering-knowledge-categories > button, .v51-knowledge-categories > button, .learning-formula-grid > article, .learning-record-grid > article, .learning-knowledge-card) { padding: 18px; background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 10px; box-shadow: none !important; }
html:root body .panel[data-panel="knowledge-map"] :is(.knowledge-association-node, .engineering-knowledge-categories > button, .v51-knowledge-categories > button) :is(strong, span) { color: var(--hw-ui-text) !important; }
html:root body .panel[data-panel="knowledge-map"] :is(.knowledge-association-node, .engineering-knowledge-categories > button, .v51-knowledge-categories > button) em { font-size: 14px; color: var(--hw-ui-muted) !important; font-style: normal; }
html:root body .panel[data-panel="knowledge-map"] :is(.knowledge-ai-diagnosis-grid, .learning-record-grid, .learning-knowledge-card-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html:root body .panel[data-panel="knowledge-map"] :is(.knowledge-center-answer-summary, .knowledge-ai-root-causes, .knowledge-ai-experiments, .knowledge-ai-context, .knowledge-association-journey) { background: var(--hw-ui-hover) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-line) !important; border-radius: 10px; padding: 18px; margin-top: 16px; }
html:root body .panel[data-panel="knowledge-map"] .knowledge-center-answer-summary strong { font-size: 16px; line-height: 1.8; font-weight: 500; color: var(--hw-ui-text) !important; }
html:root body .panel[data-panel="knowledge-map"] .learning-expert-details { border: 1px solid var(--hw-ui-line); border-radius: 10px; background: var(--hw-ui-surface); padding: 16px; }

/* Debug: task input is the main column; evidence/context are supporting panels. */
html:root body .panel[data-panel="debug-lab"] .debug-engineering-workflow { display: grid; gap: 20px; }
html:root body .panel[data-panel="debug-lab"] .debug-workflow-hero { background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 12px; padding: 24px; gap: 24px; }
html:root body .panel[data-panel="debug-lab"] .debug-workflow-layout { display: grid; grid-template-columns: minmax(150px, .6fr) minmax(0, 2fr) minmax(240px, 1fr) !important; gap: 16px; align-items: start; }
html:root body .panel[data-panel="debug-lab"] .debug-workflow-step-rail { position: static !important; background: transparent !important; padding: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
html:root body .panel[data-panel="debug-lab"] .debug-workflow-step-rail > button:not(.debug-workflow-reset) { min-width: 0 !important; }
html:root body .panel[data-panel="debug-lab"] .debug-workflow-step-rail > button { background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 9px; color: var(--hw-ui-text) !important; padding: 12px; text-align: left; }
html:root body .panel[data-panel="debug-lab"] .debug-workflow-step-rail > button.current { color: var(--hw-ui-accent) !important; border-color: var(--hw-ui-accent) !important; background: var(--hw-ui-soft) !important; }
html:root body .panel[data-panel="debug-lab"] .debug-workflow-step-rail > button :is(strong, em) { color: inherit !important; font-size: 14px !important; }
html:root body .panel[data-panel="debug-lab"] .debug-workflow-aside { position: static !important; display: grid; gap: 16px; }
html:root body .panel[data-panel="debug-lab"] :is(.debug-workflow-phenomena, .debug-workflow-tools, .debug-workflow-hypotheses, .debug-workflow-root-causes, .debug-engineering-record-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html:root body .panel[data-panel="debug-lab"] :is(.debug-workflow-phenomena > article, .debug-workflow-tools > label, .debug-workflow-hypotheses > label, .debug-workflow-root-causes > label, .debug-workflow-confirmations > label, .debug-workflow-plan > label, .debug-workflow-measurements > article) { background: var(--hw-ui-hover) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 9px; color: var(--hw-ui-text) !important; padding: 14px; gap: 10px; }
html:root body .panel[data-panel="debug-lab"] :is(.debug-workflow-tools, .debug-workflow-hypotheses, .debug-workflow-root-causes, .debug-workflow-plan) > label.selected { border-color: var(--hw-ui-accent) !important; background: var(--hw-ui-soft) !important; }
html:root body .panel[data-panel="debug-lab"] .debug-workflow-textarea { display: grid; gap: 8px; margin-block: 18px; }
html:root body .panel[data-panel="debug-lab"] .debug-workflow-textarea textarea { width: 100%; }
html:root body .panel[data-panel="debug-lab"] .debug-workflow-primary { width: 100%; margin-top: 18px; }
html:root body .panel[data-panel="debug-lab"] :is(.debug-mentor-confirmed, .debug-mentor-avoid, .debug-mentor-next) { padding: 12px; background: var(--hw-ui-hover) !important; border-color: var(--hw-ui-line) !important; border-radius: 8px; margin-top: 12px; }

/* Waveform: keep the plotted instrument canvas intact and make controls readable. */
html:root body .panel[data-panel="waveform"] :is(.waveform-investigation-shell, .waveform-learning-shell) { display: grid; gap: var(--section-gap); }
html:root body .panel[data-panel="waveform"] :is(.waveform-investigation-hero, .waveform-learning-topbar, .waveform-ability-growth-card) { background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 12px; padding: 24px; gap: 20px; }
html:root body .panel[data-panel="waveform"] :is(.waveform-investigation-grid, .waveform-learning-workbench) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
html:root body .panel[data-panel="waveform"] :is(.waveform-investigation-main, .waveform-ai-panel, .waveform-learning-coach-card) { min-width: 0; position: static !important; }
html:root body .panel[data-panel="waveform"] :is(.waveform-experience-switch, .waveform-case-tabs, .waveform-mode-tabs, .waveform-learning-case-tabs) { display: flex; gap: 8px; flex-wrap: wrap; max-width: 100%; padding: 4px; background: var(--hw-ui-hover) !important; border-radius: 10px; }
html:root body .panel[data-panel="waveform"] :is(.waveform-experience-switch, .waveform-case-tabs, .waveform-mode-tabs, .waveform-learning-case-tabs) > button { color: var(--hw-ui-text) !important; background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 8px; padding: 10px 13px; }
html:root body .panel[data-panel="waveform"] :is(.waveform-experience-switch, .waveform-case-tabs, .waveform-mode-tabs, .waveform-learning-case-tabs) > button.active { color: var(--hw-ui-accent) !important; background: var(--hw-ui-soft) !important; border-color: var(--hw-ui-accent) !important; }
html:root body .panel[data-panel="waveform"] .waveform-scope-toolbar { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; }
html:root body .panel[data-panel="waveform"] .waveform-scope-toolbar label { display: grid; gap: 5px; min-width: 100px; flex: 1 1 100px; font-size: 14px; }
html:root body .panel[data-panel="waveform"] .waveform-scope-toolbar select { min-height: 40px; width: 100%; font-size: 14px; }
html:root body .panel[data-panel="waveform"] .waveform-scope-status-line { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 14px; }
html:root body .panel[data-panel="waveform"] .waveform-scope-stage { max-width: 100%; overflow-x: auto; }
html:root body .panel[data-panel="waveform"] :is(.waveform-measure-grid, .waveform-bottom-grid, .waveform-info-grid, .waveform-final-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html:root body .panel[data-panel="waveform"] .waveform-measure-item { padding: 16px; border: 1px solid var(--hw-ui-line) !important; border-radius: 9px; color: var(--hw-ui-text) !important; background: var(--hw-ui-hover) !important; text-align: left; }
html:root body .panel[data-panel="waveform"] .waveform-measure-item.active { border-color: var(--hw-ui-accent) !important; }
html:root body .panel[data-panel="waveform"] .waveform-measure-item strong { color: var(--hw-ui-text) !important; font-size: 22px; }
html:root body .panel[data-panel="waveform"] :is(.waveform-note-card textarea, .waveform-training-form textarea) { width: 100%; }
html:root body .panel[data-panel="waveform"] .waveform-learning-options > button { min-height: 78px; padding: 16px; border: 1px solid var(--hw-ui-line) !important; border-radius: 10px; background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; text-align: left; }
html:root body .panel[data-panel="waveform"] .waveform-learning-options > button.selected { border-color: var(--hw-ui-accent) !important; background: var(--hw-ui-soft) !important; }

/* Growth/history: modest statistics, readable provenance and explicit evidence. */
html:root body .panel:is([data-panel="growth-profile"], [data-panel="my"]) :is(.growth-archive-page, .engineer-dossier-page) { display: grid; gap: var(--section-gap); }
html:root body .panel[data-panel="growth-profile"] :is(.growth-archive-hero, .growth-archive-answer-strip, .recruiter-profile-controls, .resume-role-match-result):not(dialog *) { background: var(--hw-ui-hover) !important; color: var(--hw-ui-text) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 10px; padding: 20px; }
html:root body .panel[data-panel="growth-profile"] :is(.growth-archive-two-col, .career-asset-project-grid, .career-asset-ability-grid):not(dialog *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html:root body .panel[data-panel="growth-profile"] .recruiter-profile-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 20px; }
html:root body .panel[data-panel="growth-profile"] .recruiter-profile-controls { position: static !important; display: grid; gap: 16px; }
html:root body .panel[data-panel="growth-profile"] .recruiter-profile-controls > label { display: flex; gap: 12px; align-items: flex-start; }
html:root body .panel:is([data-panel="growth-profile"], [data-panel="my"]) :is(.growth-recruiter-metrics, .engineer-profile-stats, .engineer-profile-asset-grid) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html:root body .panel:is([data-panel="growth-profile"], [data-panel="my"]) :is(.growth-recruiter-metrics > article, .engineer-profile-stats > span, .engineer-profile-asset-grid > button) { background: var(--hw-ui-hover) !important; color: var(--hw-ui-text) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 10px; padding: 16px; }
html:root body .panel:is([data-panel="growth-profile"], [data-panel="my"]) :is(.growth-recruiter-metrics, .engineer-profile-stats) strong { font-size: 26px !important; color: var(--hw-ui-text) !important; line-height: 1.4; }
html:root body .panel[data-panel="my"] :is(.engineer-dossier-profile, .engineer-dossier-summary) { gap: 20px; align-items: center; }
html:root body .panel[data-panel="my"] .my-growth-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
html:root body .panel:is([data-panel="learning-records"], [data-panel="project-assets"]) .stack-list { display: grid; gap: 16px; }
html:root body .panel[data-panel="project-assets"] .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
html:root body .panel[data-panel="project-assets"] .metric-card { padding: 14px 16px; background: var(--hw-ui-hover) !important; border-color: var(--hw-ui-line) !important; border-radius: 9px; }
html:root body .panel[data-panel="project-assets"] .metric-card strong { font-size: 26px !important; color: var(--hw-ui-text) !important; }
html:root body .panel:is([data-panel="learning-records"], [data-panel="project-assets"]) details { border-top: 1px solid var(--hw-ui-line); padding-top: 12px; margin-top: 16px; }
html:root body .panel:is([data-panel="learning-records"], [data-panel="project-assets"]) summary { color: var(--hw-ui-accent); padding: 10px 4px; cursor: pointer; }
html:root body .panel:is([data-panel="learning-records"], [data-panel="project-assets"]) details li { margin-block: 10px; color: var(--hw-ui-text); overflow-wrap: anywhere; }

/* Settings: readable labeled forms, visible save status, separated destructive actions. */
html:root body .panel[data-panel="settings"] .user-settings-center { display: grid; gap: 20px; max-width: 1120px; margin-inline: auto; }
html:root body .panel[data-panel="settings"] .user-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
html:root body .panel[data-panel="settings"] .user-settings-account-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; }
html:root body .panel[data-panel="settings"] .user-settings-account-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
html:root body .panel[data-panel="settings"] :is(.user-settings-field, .user-settings-field-grid > label) { display: grid; gap: 8px; margin-bottom: 16px; color: var(--hw-ui-text); }
html:root body .panel[data-panel="settings"] :is(.user-settings-field-grid, .user-settings-toggle-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html:root body .panel[data-panel="settings"] .user-settings-toggle-grid > label { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px; color: var(--hw-ui-text) !important; background: var(--hw-ui-hover) !important; border-radius: 8px; }
html:root body .panel[data-panel="settings"] :is(.user-settings-action-row, .user-settings-account-profile dl) { display: flex; flex-wrap: wrap; gap: 12px; }
html:root body .panel[data-panel="settings"] .user-settings-account-profile dl > div { min-width: 135px; }
html:root body .panel[data-panel="settings"] .user-settings-account-profile :is(dt, dd) { margin: 0; font-size: 14px; color: var(--hw-ui-text) !important; }
html:root body .panel[data-panel="settings"] .user-theme-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html:root body .panel[data-panel="settings"] .theme-option { padding: 14px 12px; background: var(--hw-ui-hover) !important; color: var(--hw-ui-text) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 9px; min-height: 68px; }
html:root body .panel[data-panel="settings"] .theme-option:has(input:checked) { background: var(--hw-ui-soft) !important; border-color: var(--hw-ui-accent) !important; }
html:root body .panel[data-panel="settings"] .user-settings-danger-card { grid-column: 1 / -1; }
html:root body .panel[data-panel="settings"] .privacy-danger-panel { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hw-ui-line); }

/* These legacy components have theme-specific important declarations. Keep
 * the override confined to the active, named workbench and real component. */
html:root[data-theme] body[data-active-panel] .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(button, summary):not(dialog *) {
  min-height: 46px !important;
  font-size: 14px !important;
}
html:root[data-theme] body[data-active-panel] .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(.section-card, .growth-archive-card, .growth-career-asset-section, .resume-role-match-section, .growth-recruiter-value, .engineer-identity-card, .debug-workflow-hero, .debug-workflow-stage, .debug-workflow-mentor, .debug-workflow-context, .debug-workflow-timeline, .waveform-investigation-hero, .waveform-learning-topbar, .waveform-measure-card, .waveform-diagnosis-card, .waveform-info-card, .waveform-note-card, .waveform-ai-panel, .waveform-final-conclusion-card, .waveform-learning-question-card, .waveform-learning-coach-card):not(dialog *) {
  color: var(--hw-ui-text) !important;
  background: var(--hw-ui-surface) !important;
  border-color: var(--hw-ui-line) !important;
  box-shadow: none !important;
}
html:root[data-theme] body[data-active-panel="knowledge-map"] .panel[data-panel="knowledge-map"] #learningKnowledgeCards {
  background: var(--hw-ui-surface) !important;
  border-color: var(--hw-ui-line) !important;
  box-shadow: none !important;
}
html:root[data-theme] body[data-active-panel="knowledge-map"] .panel[data-panel="knowledge-map"] .knowledge-ai-result-head {
  background: var(--hw-ui-hover) !important;
  color: var(--hw-ui-text) !important;
  border: 1px solid var(--hw-ui-line) !important;
}
html:root[data-theme] body[data-active-panel="knowledge-map"] .panel[data-panel="knowledge-map"] .knowledge-ai-result-head :is(strong, span, p, em) {
  color: var(--hw-ui-text) !important;
  font-size: 14px !important;
}
html:root[data-theme] body[data-active-panel="debug-lab"] .panel[data-panel="debug-lab"] .debug-workflow-step-rail > button.current i {
  color: var(--hw-ui-on-primary) !important;
  background: var(--hw-ui-primary) !important;
  border-color: var(--hw-ui-primary) !important;
}
html:root[data-theme] body[data-active-panel="debug-lab"] .panel[data-panel="debug-lab"] #debugTrainingBoard [data-debug-workflow-back] {
  color: var(--hw-ui-accent) !important;
  background: var(--hw-ui-surface) !important;
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 9px !important;
  padding: 10px 14px !important;
}
/* The repeated real ID is intentional: v101/v200 give this same button two
 * ID specificity through :is(#hw-v6-home, html) despite no such root ID. */
html:root[data-theme] body[data-active-panel="question-bank"] .panel[data-panel="question-bank"] #trainingRpgNextBtn#trainingRpgNextBtn,
html:root[data-theme] body[data-active-panel="growth-profile"] .panel[data-panel="growth-profile"] #growthArchiveBoard .primary-btn:not(dialog *, :disabled),
html:root[data-theme] body[data-active-panel="my"] .panel[data-panel="my"] #engineerIdentityCard [data-engineer-identity-proof] {
  color: var(--hw-ui-on-primary) !important;
  background: var(--hw-ui-primary) !important;
  border: 1px solid var(--hw-ui-primary) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  min-height: 46px !important;
  font-size: 15px !important;
}
html:root[data-theme] body[data-active-panel] .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(h2, h3, h4):not(dialog *) { color: var(--hw-ui-text) !important; }
html:root[data-theme] body[data-active-panel="settings"] .panel[data-panel="settings"] :is(.user-settings-heading, .user-settings-intro) {
  background: var(--hw-ui-surface) !important;
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 12px;
}
html:root[data-theme] body[data-active-panel="settings"] .panel[data-panel="settings"] .user-settings-avatar-button {
  color: var(--hw-ui-text) !important;
  background: var(--hw-ui-surface) !important;
  border: 1px solid var(--hw-ui-line) !important;
  box-shadow: none !important;
}
html:root[data-theme] body[data-active-panel="settings"] .panel[data-panel="settings"] #settingsProfileAvatar + span {
  color: var(--hw-ui-on-primary) !important;
  background: var(--hw-ui-primary) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  min-height: 26px;
}
html:root[data-theme] body[data-active-panel="settings"] .panel[data-panel="settings"] .user-settings-account-switcher > summary {
  color: var(--hw-ui-accent) !important;
  background: var(--hw-ui-surface) !important;
  font-size: 14px !important;
}

/* Leaf labels need their own theme contract: legacy saturated captions and
 * translucent light badges do not inherit the readable card text color. */
html:root[data-theme] body[data-active-panel="knowledge-map"] .panel[data-panel="knowledge-map"] #knowledgeCenterAnswer :is(.knowledge-center-answer-summary > span, .knowledge-association-journey > header span, .knowledge-ai-root-causes > header span, .knowledge-ai-experiments > header span) {
  color: var(--hw-ui-accent) !important;
  font-size: 14px !important;
}
html:root[data-theme] body[data-active-panel="knowledge-map"] .panel[data-panel="knowledge-map"] #knowledgeCenterAnswer :is(.knowledge-association-journey, .knowledge-ai-root-causes, .knowledge-ai-experiments) > header em {
  color: var(--hw-ui-muted) !important;
  background: var(--hw-ui-surface) !important;
  border-color: var(--hw-ui-line) !important;
  font-size: 14px !important;
}
html:root[data-theme] body[data-active-panel="knowledge-map"] .panel[data-panel="knowledge-map"] :is(#learningKnowledgeCardList .learning-knowledge-card > span, #engineeringFormulaLibrary .learning-formula-grid > article > span, #learningExperimentRecordList .learning-record-card > span, #learningCaseRecordList .learning-record-card > span) {
  color: var(--hw-ui-accent) !important;
  font-size: 14px !important;
}
html:root[data-theme] body[data-active-panel="knowledge-map"] .panel[data-panel="knowledge-map"] #learningKnowledgeCardList .learning-knowledge-linkage > span {
  color: var(--hw-ui-muted) !important;
  background: var(--hw-ui-hover) !important;
  border-color: var(--hw-ui-line) !important;
  font-size: 14px !important;
}
html:root[data-theme] body[data-active-panel="knowledge-map"] .panel[data-panel="knowledge-map"] .learning-expert-details > summary :is(b, em) { color: var(--hw-ui-accent) !important; font-size: 14px !important; }
html:root[data-theme] body[data-active-panel="debug-lab"] .panel[data-panel="debug-lab"] #debugTrainingBoard { --debug-muted: var(--hw-ui-muted); }
html:root[data-theme] body[data-active-panel="debug-lab"] .panel[data-panel="debug-lab"] #debugTrainingBoard :is(.debug-workflow-hero > div > span, .debug-workflow-progress > span, .debug-workflow-phenomena > article > span, .debug-workflow-confirmations em, .debug-workflow-mentor small, .debug-mentor-confirmed > span, .debug-mentor-avoid > span, .debug-mentor-next > span) {
  color: var(--hw-ui-muted) !important;
  font-size: 14px !important;
}
html:root[data-theme] body[data-active-panel="debug-lab"] .panel[data-panel="debug-lab"] #debugTrainingBoard :is(.debug-case-hero-tags > em, .debug-case-hero-tags > b, .debug-workflow-hero > aside > span, .debug-workflow-phenomena em.warn, .debug-workflow-mentor > header > em) {
  color: var(--hw-ui-text) !important;
  background: var(--hw-ui-hover) !important;
  border: 1px solid var(--hw-ui-line) !important;
  font-size: 14px !important;
}
html:root[data-theme] body[data-active-panel="debug-lab"] .panel[data-panel="debug-lab"] #debugTrainingBoard .debug-case-hero-tags > span { color: var(--hw-ui-muted) !important; font-size: 14px !important; }
html:root[data-theme] body[data-active-panel="waveform"] .panel[data-panel="waveform"] #waveformTrainingBoard :is(.waveform-experience-switch small, .waveform-learning-case-tabs span, .waveform-learning-evidence > span, .waveform-learning-options small, .waveform-learning-actions > span, .waveform-learning-coach-hint > span, .waveform-learning-coach-card small, .waveform-learning-progress span) {
  color: var(--hw-ui-muted) !important;
  font-size: 14px !important;
}
html:root[data-theme] body[data-active-panel="waveform"] .panel[data-panel="waveform"] #waveformTrainingBoard :is(.waveform-learning-step, .waveform-learning-choice-head > span) {
  color: var(--hw-ui-accent) !important;
  background: var(--hw-ui-soft) !important;
  font-size: 14px !important;
}
html:root[data-theme] body[data-active-panel="waveform"] .panel[data-panel="waveform"] #waveformTrainingBoard .waveform-learning-case-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100%;
  min-width: 0 !important;
  gap: 8px;
}
html:root[data-theme] body[data-active-panel="waveform"] .panel[data-panel="waveform"] #waveformTrainingBoard .waveform-learning-case-tabs > button { min-width: 0 !important; white-space: normal !important; }
html:root[data-theme] body[data-active-panel="settings"] .panel[data-panel="settings"] :is(#trainingIdentityPreview, #trainingGoalPreview) {
  background: var(--hw-ui-hover) !important;
  border-color: var(--hw-ui-line) !important;
}
html:root[data-theme] body[data-active-panel="settings"] .panel[data-panel="settings"] #trainingGoalPreview > strong { color: var(--hw-ui-accent) !important; }
html:root[data-theme] body[data-active-panel="settings"] .panel[data-panel="settings"] :is(#trainingIdentityPreview .training-identity-focus-list > span, #trainingGoalPreview .training-goal-priority-list > span) {
  color: var(--hw-ui-text) !important;
  background: var(--hw-ui-surface) !important;
  border-color: var(--hw-ui-line) !important;
  font-size: 14px !important;
}
html:root[data-theme] body[data-active-panel="settings"] .panel[data-panel="settings"] .theme-option small { color: var(--hw-ui-muted) !important; font-size: 14px !important; }

@media (max-width: 1100px) {
  html:root body .panel[data-panel="debug-lab"] .debug-workflow-layout { grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr) !important; }
  html:root body .panel[data-panel="debug-lab"] .debug-workflow-step-rail { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html:root body .panel:is([data-panel="growth-profile"], [data-panel="my"]) :is(.growth-recruiter-metrics, .engineer-profile-stats, .engineer-profile-asset-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  html:root[data-theme] body[data-active-panel="question-bank"] .panel[data-panel="question-bank"] .training-rpg-core { grid-template-columns: minmax(0, 1fr) !important; }
  html:root body .panel[data-panel="debug-lab"] .debug-workflow-layout,
  html:root body .panel[data-panel="waveform"] :is(.waveform-investigation-grid, .waveform-learning-workbench),
  html:root body .panel[data-panel="growth-profile"] .recruiter-profile-layout,
  html:root body .panel[data-panel="settings"] .user-settings-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html:root body .panel[data-panel="debug-lab"] .debug-workflow-aside { grid-template-columns: minmax(0, 1fr); }
  html:root body .panel[data-panel="waveform"] .waveform-investigation-status { display: flex; flex-wrap: wrap; gap: 18px; }
  html:root body .panel[data-panel="question-bank"] .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  html:root[data-theme] body[data-active-panel="waveform"] .panel[data-panel="waveform"] #waveformTrainingBoard .waveform-learning-case-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html:root[data-theme] body[data-active-panel="question-bank"] .panel[data-panel="question-bank"] .training-rpg-shell { padding: 16px !important; }
  html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) { --section-gap: 16px; padding-bottom: 28px; }
  html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(.section-card, .growth-archive-card, .career-asset-sheet, .growth-career-asset-section, .resume-role-match-section, .growth-recruiter-value, .debug-workflow-stage, .debug-workflow-hero, .debug-workflow-mentor, .waveform-investigation-hero, .waveform-learning-topbar, .waveform-measure-card, .waveform-ai-panel, .waveform-learning-question-card, .waveform-learning-coach-card, .v51-knowledge-query):not(dialog *) { padding: 18px; border-radius: 10px !important; }
  html:root body .panel[data-panel="question-bank"] :is(.v51-training-entry-grid, .question-training-packs, .v51-training-cockpit):not([hidden]),
  html:root body .panel[data-panel="knowledge-map"] :is(.v51-asset-app-grid, .knowledge-association-track, .learning-formula-grid, .v51-knowledge-categories, .knowledge-ai-diagnosis-grid, .learning-record-grid, .learning-knowledge-card-grid),
  html:root body .panel[data-panel="debug-lab"] :is(.debug-workflow-phenomena, .debug-workflow-tools, .debug-workflow-hypotheses, .debug-workflow-root-causes, .debug-engineering-record-grid),
  html:root body .panel[data-panel="growth-profile"] :is(.growth-archive-two-col, .career-asset-project-grid, .career-asset-ability-grid):not(dialog *),
  html:root body .panel[data-panel="my"] .my-growth-hub,
  html:root body .panel[data-panel="settings"] .user-settings-field-grid { grid-template-columns: minmax(0, 1fr); }
  html:root body .panel[data-panel="knowledge-map"] .v51-knowledge-query-box { grid-template-columns: auto minmax(0, 1fr) !important; }
  html:root body .panel[data-panel="knowledge-map"] #knowledgeCenterSearchBtn { grid-column: 1 / -1; width: 100%; }
  html:root body .panel[data-panel="debug-lab"] .debug-workflow-step-rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html:root body .panel[data-panel="waveform"] :is(.waveform-bottom-grid, .waveform-info-grid, .waveform-final-grid) { grid-template-columns: minmax(0, 1fr); }
  html:root body .panel[data-panel="waveform"] .waveform-scope-toolbar { gap: 10px; padding: 12px; }
  html:root body .panel[data-panel="waveform"] .waveform-experience-switch > button { flex: 1 1 100%; }
  html:root body .panel[data-panel="project-assets"] .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root body .panel[data-panel="settings"] .user-settings-account-row { gap: 16px; }
  html:root body .panel[data-panel="settings"] .user-settings-toggle-grid { grid-template-columns: minmax(0, 1fr); }
  html:root body .panel[data-panel="settings"] .theme-option { padding: 12px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html:root body .panel:is([data-panel="question-bank"], [data-panel="knowledge-map"], [data-panel="debug-lab"], [data-panel="waveform"], [data-panel="growth-profile"], [data-panel="learning-records"], [data-panel="project-assets"], [data-panel="my"], [data-panel="settings"]) :is(button, summary):not(dialog *) { transition: none; }
}


/* source: functional-workbench-ui.css */
/* UI round 02. Presentation only: reports, secondary pages and owned overlays.
   Existing hidden/open state and all event handlers remain authoritative. */
#p10InterviewReports #p10Reports.p10-workspace {
  --p10-bg: var(--hw-ui-surface);
  --p10-soft: var(--hw-ui-bg);
  --p10-text: var(--hw-ui-text);
  --p10-muted: var(--hw-ui-muted);
  --p10-line: var(--hw-ui-line);
  max-width: 1180px;
  padding: 32px 24px 64px;
  background: transparent !important;
}
#p10InterviewReports #p10Reports :is(.p10-heading,.p10-report-layout,.p10-records,.p10-list-heading,.p10-report-tools,.p10-actions,.p10-planned-actions) { background: transparent !important; box-shadow: none !important; }
#p10InterviewReports #p10Reports :is(h1,h2,h3,strong,summary) { color: var(--hw-ui-text) !important; }
#p10InterviewReports #p10Reports :is(p,.p10-muted,small) { color: var(--hw-ui-muted) !important; }
#p10InterviewReports #p10Reports h1 { font-size: 30px; font-weight: 650; }
#p10InterviewReports #p10Reports h2 { font-size: 19px; }
#p10InterviewReports #p10Reports .p10-card { background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important; box-shadow: none !important; border-radius: 12px; }
#p10InterviewReports #p10Reports .p10-report-start { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; }
#p10InterviewReports #p10Reports .p10-report-start p { margin-top: 8px; }
#p10InterviewReports #p10Reports .p10-report-start > .p10-button { flex-shrink: 0; margin-top: 0; }
#p10InterviewReports #p10Reports .p10-report-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; }
#p10InterviewReports #p10Reports .p10-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
#p10InterviewReports #p10Reports .p10-record { padding: 0 20px 20px; }
#p10InterviewReports #p10Reports .p10-record:not([open]) { padding-bottom: 0; }
#p10InterviewReports #p10Reports .p10-record summary { display: flex; gap: 14px; align-items: center; min-height: 80px; padding: 16px 0; }
#p10InterviewReports #p10Reports .p10-record-number { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 8px; background: var(--hw-ui-soft) !important; color: var(--hw-ui-accent) !important; font-size: 13px; }
#p10InterviewReports #p10Reports .p10-record-title { flex: 1; min-width: 0; }
#p10InterviewReports #p10Reports .p10-record-title small { display: block; font-size: 12px; font-weight: 400; }
#p10InterviewReports #p10Reports .p10-record-open { font-size: 12px; font-weight: 500; color: var(--hw-ui-muted) !important; }
#p10InterviewReports #p10Reports .p10-answer { padding: 22px 0; border-color: var(--hw-ui-line) !important; background: transparent !important; }
#p10InterviewReports #p10Reports .p10-answer h3 { font-size: 17px; margin: 6px 0 18px; }
#p10InterviewReports #p10Reports .p10-answer-text { background: var(--hw-ui-bg) !important; color: var(--hw-ui-text) !important; padding: 16px; border-radius: 8px; }
#p10InterviewReports #p10Reports .p10-report-empty { padding: 38px 24px; text-align: center; }
#p10InterviewReports #p10Reports .p10-report-empty > span { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: var(--hw-ui-soft) !important; color: var(--hw-ui-accent) !important; }
#p10InterviewReports #p10Reports .p10-report-empty h3 { font-size: 18px; }
#p10InterviewReports #p10Reports .p10-report-empty p { max-width: 380px; margin: 10px auto; }
#p10InterviewReports #p10Reports .p10-planned-actions { display: grid; gap: 10px; margin-top: 18px; }
#p10InterviewReports #p10Reports .p10-button { min-height: 44px; border-radius: 8px; font-size: 14px; color: var(--hw-ui-text) !important; background: var(--hw-ui-surface) !important; border-color: var(--hw-ui-line) !important; box-shadow: none !important; }
#p10InterviewReports #p10Reports .p10-button.p10-primary { color: #fff !important; background: var(--hw-ui-primary) !important; border-color: var(--hw-ui-primary) !important; }
#p10InterviewReports #p10Reports .p10-button:disabled { color: var(--hw-ui-muted) !important; background: var(--hw-ui-bg) !important; opacity: 1; cursor: not-allowed; }
#p10InterviewReports #p10Reports :is(button,summary):focus-visible { outline: 2px solid var(--hw-ui-focus) !important; outline-offset: 3px; }

/* Inline previews reserve documented functions without submitting any task. */
html body .hw-feature-preview {
  margin-top: 20px; padding: 14px 18px; border: 1px solid var(--hw-ui-line) !important;
  border-radius: 10px; background: var(--hw-ui-bg) !important; color: var(--hw-ui-text) !important;
}
html body .hw-feature-preview summary { min-height: 40px; line-height: 1.5; padding: 8px 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--hw-ui-text) !important; }
html body .hw-feature-preview p { font-size: 13px !important; line-height: 1.7 !important; color: var(--hw-ui-muted) !important; margin: 10px 0; }
html body .hw-feature-preview .hw-feature-actions { display: flex; flex-wrap: wrap; gap: 8px; background: transparent !important; }
html body .hw-feature-preview button:disabled { min-height: 40px; padding: 8px 12px; border: 1px solid var(--hw-ui-line) !important; border-radius: 7px; background: var(--hw-ui-surface) !important; color: var(--hw-ui-muted) !important; font-size: 13px; cursor: not-allowed; opacity: 1; box-shadow: none !important; }

/* Secondary destinations keep their working controls; no changes to display,
   visibility, selected state, evaluation logic, diagrams or media canvases. */
html:root body .main > .panel:is([data-panel="audio"],[data-panel="reports"],[data-panel="training-summary"],[data-panel="message-center"],[data-panel="ai-coach"],[data-panel="engineering-lab"],[data-panel="project-practice"],[data-panel="mistakes"],[data-panel="paper"],[data-panel="dashboard"],[data-panel="resume"]) {
  color: var(--hw-ui-text) !important; background: var(--hw-ui-bg) !important; padding: 28px 24px 72px;
}
html:root body[data-active-panel] .main > .panel:is([data-panel="audio"],[data-panel="reports"],[data-panel="training-summary"],[data-panel="message-center"],[data-panel="ai-coach"],[data-panel="engineering-lab"],[data-panel="project-practice"],[data-panel="mistakes"],[data-panel="paper"],[data-panel="dashboard"],[data-panel="resume"]) :is(.section-card,.audio-main-card,.empty-box,.feedback-box,.stat-card,.xiaowen-goal-card,.xiaowen-plan-card,.xiaowen-summary-card) {
  background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 12px !important; box-shadow: none !important; color: var(--hw-ui-text) !important;
}
html:root body[data-active-panel] .main > .panel:is([data-panel="audio"],[data-panel="reports"],[data-panel="training-summary"],[data-panel="message-center"],[data-panel="ai-coach"],[data-panel="engineering-lab"],[data-panel="project-practice"],[data-panel="mistakes"],[data-panel="paper"],[data-panel="dashboard"],[data-panel="resume"]) :is(h1,h2,h3,h4,h5,strong,label) { color: var(--hw-ui-text) !important; }
html:root body[data-active-panel] .main > .panel:is([data-panel="audio"],[data-panel="reports"],[data-panel="training-summary"],[data-panel="message-center"],[data-panel="ai-coach"],[data-panel="engineering-lab"],[data-panel="project-practice"],[data-panel="mistakes"],[data-panel="paper"],[data-panel="dashboard"],[data-panel="resume"]) :is(p,small,.muted,.eyebrow) { color: var(--hw-ui-muted) !important; line-height: 1.65; }
html:root body[data-active-panel] .main > .panel:is([data-panel="audio"],[data-panel="reports"],[data-panel="training-summary"],[data-panel="message-center"],[data-panel="ai-coach"],[data-panel="engineering-lab"],[data-panel="project-practice"],[data-panel="mistakes"],[data-panel="paper"],[data-panel="dashboard"],[data-panel="resume"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select,.ghost-btn) { color: var(--hw-ui-text) !important; background: var(--hw-ui-surface) !important; border-color: var(--hw-ui-line) !important; border-radius: 8px !important; box-shadow: none !important; font-size: 14px; }
html:root body[data-active-panel] .main > .panel:is([data-panel="audio"],[data-panel="reports"],[data-panel="training-summary"],[data-panel="message-center"],[data-panel="ai-coach"],[data-panel="engineering-lab"],[data-panel="project-practice"],[data-panel="mistakes"],[data-panel="paper"],[data-panel="dashboard"],[data-panel="resume"]) .primary-btn:not(:disabled) { color: #fff !important; background: var(--hw-ui-primary) !important; border-color: var(--hw-ui-primary) !important; box-shadow: none !important; }
html body .panel[data-panel="audio"] #audioDialogueSummary { min-height: 0 !important; }
html body .panel[data-panel="audio"] :is(.audio-upload-panel,.audio-review-cabin,.audio-dialogue-summary) { border-radius: 12px !important; }
html:root body #hwWorkbenchMain .panel:is([data-panel="audio"],[data-panel="project-practice"]) > .hw-example-notice { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--hw-ui-line); border-radius: 8px; background: var(--hw-ui-surface) !important; color: var(--hw-ui-muted) !important; font-size: 13px; line-height: 1.7; }
/* Stable workspace anchor outranks the old repeated-class theme locks. */
html:root body #hwWorkbenchMain > .panel:not([data-panel="landing"]):not([data-panel="interview"]):not([data-panel="resume-profile"]):not([data-panel="interview-reports"]) :is(h1,h2,h3,h4),
html:root body #hwWorkbenchMain #myWorkspaceName { color: var(--hw-ui-text) !important; }
html:root body #hwWorkbenchMain #hwTrainingWorkbench.panel.training-rpg-workbench .training-rpg-shell .training-rpg-hero h2 { color: var(--hw-ui-text) !important; }

/* Overlays: one scroll surface, bounded width/height, reachable footer. IDs
   intentionally outrank historical theme locks while leaving hidden/open alone. */
html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal) {
  padding: 20px !important; background: rgb(9 12 18 / 52%) !important; backdrop-filter: blur(3px);
  overflow-y: auto !important; overscroll-behavior: contain;
  z-index: 20050 !important;
}
html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal) > :is(.modal-card,form) {
  box-sizing: border-box; width: min(640px,100%) !important; max-width: 100% !important;
  max-height: calc(100dvh - 40px) !important; min-height: 0 !important; overflow-y: auto !important;
  padding: 28px !important; margin: auto; border-radius: 14px !important;
  background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important;
  border: 1px solid var(--hw-ui-line) !important; box-shadow: 0 18px 64px rgb(0 0 0 / 22%) !important;
}
html:root body #accountModal #accountForm { width: min(620px,100%) !important; }
html:root body #accountModal #accountForm .form-actions { background: var(--hw-ui-surface) !important; }
html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal,#trainingDashboardDrawer,#interviewProfileDrawer,#companionPanel,dialog[data-engineering-proof-dialog]) :is(h1,h2,h3,h4,h5,label,strong,b,summary) { color: var(--hw-ui-text) !important; }
html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal,#trainingDashboardDrawer,#interviewProfileDrawer,#companionPanel,dialog[data-engineering-proof-dialog]) :is(p,small,em,.eyebrow) { color: var(--hw-ui-muted) !important; line-height: 1.65; }
html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal,#trainingDashboardDrawer,#interviewProfileDrawer,#companionPanel,dialog[data-engineering-proof-dialog]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),textarea,select) {
  color: var(--hw-ui-text) !important; background: var(--hw-ui-bg) !important; border: 1px solid var(--hw-ui-line) !important;
  border-radius: 8px !important; font-size: 15px; box-shadow: none !important; min-width: 0;
}
html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal,#trainingDashboardDrawer,#interviewProfileDrawer,#companionPanel,dialog[data-engineering-proof-dialog]) :is(input,textarea)::placeholder { color: var(--hw-ui-muted) !important; opacity: 1; }
html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal,#trainingDashboardDrawer,#interviewProfileDrawer,#companionPanel,dialog[data-engineering-proof-dialog]) button {
  min-height: 40px; border-radius: 8px !important; font-size: 14px; text-shadow: none !important; box-shadow: none !important;
}
html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal,#trainingDashboardDrawer,#interviewProfileDrawer,#companionPanel,dialog[data-engineering-proof-dialog]) .ghost-btn { color: var(--hw-ui-text) !important; background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important; }
html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#trainingDashboardDrawer,#interviewProfileDrawer,#companionPanel,dialog[data-engineering-proof-dialog]) .primary-btn:not(:disabled) { color: #fff !important; background: var(--hw-ui-primary) !important; border-color: var(--hw-ui-primary) !important; }
html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal,#trainingDashboardDrawer,#interviewProfileDrawer,#companionPanel,dialog[data-engineering-proof-dialog]) :is(button,input,textarea,select,summary):focus-visible { outline: 2px solid var(--hw-ui-focus) !important; outline-offset: 3px !important; }
html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal,#trainingDashboardDrawer,#interviewProfileDrawer,#companionPanel,dialog[data-engineering-proof-dialog]) button:disabled { background: var(--hw-ui-hover) !important; color: var(--hw-ui-muted) !important; border-color: var(--hw-ui-line) !important; opacity: 1; cursor: not-allowed; }
html body #accountModal :is(.account-modal-grid,.account-verification-input-row,.form-actions) { gap: 12px !important; }
html body #accountModal #accountForm .account-auth-mode { padding: 4px !important; gap: 4px; background: var(--hw-ui-bg) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 10px !important; }
html body #accountModal #accountForm .account-auth-mode button { background: transparent !important; color: var(--hw-ui-muted) !important; border: 0 !important; }
html body #accountModal #accountForm .account-auth-mode button[aria-selected="true"] { background: var(--hw-ui-surface) !important; color: var(--hw-ui-accent) !important; }
html body #accountModal :is(.account-guest-notice,.account-guest-migration-option,.account-modal-preview,.account-saved-profiles) { background: var(--hw-ui-bg) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 10px !important; box-shadow: none !important; }
html body #accountModal #accountSubmitBtn { min-height: 46px; }
html body #accountModal #accountSubmitBtn span { color: inherit !important; }
html body #accountModal #accountLogoutBtn { font-size: 12px; }
html body #accountModal .account-form-status { border-radius: 8px !important; }
html body #accountModal .account-form-status[data-tone="error"] p { color: #d86659 !important; }
html body :is(#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal) :is(.score-history-title-row,.profile-skill-title-row,.question-feedback-hero,.score-provenance-head,.form-actions,.profile-skill-actions) { background: transparent !important; }
html body :is(#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal) :is(.score-provenance-section,.score-history-insight,.profile-skill-missing,.profile-skill-recommendation,.question-feedback-advice,.question-feedback-rubric > div) { background: var(--hw-ui-bg) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 10px !important; padding: 16px; }

html:root body :is(#trainingDashboardDrawer,#interviewProfileDrawer) { background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; width: min(480px,100vw) !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; overflow-y: auto !important; padding-bottom: calc(24px + env(safe-area-inset-bottom,0px)) !important; border-left: 1px solid var(--hw-ui-line) !important; box-shadow: -12px 0 44px rgb(0 0 0 / 15%) !important; }
html:root body :is(#trainingDashboardDrawer,#interviewProfileDrawer) > header { position: sticky; top: 0; z-index: 2; background: var(--hw-ui-surface) !important; border-bottom: 1px solid var(--hw-ui-line) !important; padding: 20px 24px; }
html body :is(#trainingDashboardDrawer,#interviewProfileDrawer) :is(.training-dashboard-section,.interview-profile-drawer-section,.interview-profile-drawer-grid > div,.training-direction-option,.training-dashboard-section-head) { background: var(--hw-ui-surface) !important; border-color: var(--hw-ui-line) !important; box-shadow: none !important; border-radius: 10px !important; }
html body :is(#trainingDashboardDrawerBackdrop,#interviewProfileDrawerBackdrop,#companionDrawerBackdrop) { background: rgb(9 12 18 / 42%) !important; backdrop-filter: blur(2px); }
html body :is(#trainingDashboardDrawerCloseBtn,#interviewProfileDrawerCloseBtn,#companionCollapseBtn,#companionSettingsBtn) { width: 40px; min-width: 40px; height: 40px; background: transparent !important; color: var(--hw-ui-muted) !important; border: 1px solid transparent !important; }

/* One assistant drawer: stable header, scrolling task/messages, reachable input.
   No alternate conversation or automated execution is introduced. */
html:root body #companionDock #companionPanel {
  width: min(500px,100vw) !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important;
  background: var(--hw-ui-surface) !important; border-left: 1px solid var(--hw-ui-line) !important; border-radius: 0 !important;
  box-shadow: -12px 0 44px rgb(0 0 0 / 15%) !important; padding: 0 !important; overflow: auto !important;
}
html body #companionDock #companionPanel .companion-panel-head { position: sticky; top: 0; z-index: 3; padding: 20px; gap: 12px; background: var(--hw-ui-surface) !important; border-bottom: 1px solid var(--hw-ui-line) !important; }
html body #companionDock #companionPanel .companion-panel-avatar-token { width: 38px !important; height: 38px !important; border-radius: 10px !important; box-shadow: none !important; }
html body #companionDock #companionPanel .companion-agent-layout { display: block; padding: 16px 20px; background: transparent !important; }
html body #companionDock #companionPanel .companion-agent-workspace { display: flex; flex-direction: column; min-height: calc(100dvh - 160px); min-width: 0; background: transparent !important; }
html body #companionDock #companionPanel :is(.companion-brief-card,.companion-agent-run-board) { background: var(--hw-ui-bg) !important; border: 1px solid var(--hw-ui-line) !important; box-shadow: none !important; border-radius: 10px !important; padding: 14px; }
html body #companionDock #companionPanel .companion-brief-card { display: block; }
html body #companionDock #companionPanel .companion-brief-avatar-token { width: 24px !important; height: 24px !important; float: left; margin-right: 10px; }
html body #companionDock #companionPanel #companionMessages { flex: 1; min-height: 120px; overflow: visible; background: transparent !important; padding: 16px 0; }
html body #companionDock #companionPanel #companionForm { position: sticky; bottom: -16px; flex-wrap: wrap; padding: 14px 0 calc(16px + env(safe-area-inset-bottom,0px)); background: var(--hw-ui-surface) !important; border-top: 1px solid var(--hw-ui-line) !important; }
html body #companionDock #companionPanel #companionInput { width: 100%; flex: 1 1 100%; min-height: 84px; resize: vertical; padding: 12px; }
html body #companionDock #companionPanel #companionForm > button { min-height: 40px; padding: 8px 16px; }
html body #companionDock #companionPanel .companion-panel-heading { min-width: 0; flex: 1; }
html body #companionDock #companionPanel #companionPanelStatus { font-size: 12px !important; }
html body #companionDock #companionPanel .companion-panel-tools { gap: 2px; flex-shrink: 0; }
html body #companionDock #companionPanel .companion-emotion-chip { background: var(--hw-ui-bg) !important; color: var(--hw-ui-muted) !important; border: 1px solid var(--hw-ui-line) !important; }

/* Actual portal controls (some legacy buttons are not .primary-btn). */
html:root body #trainingDashboardDrawer :is(.training-focus-option,.training-goal-option,.training-module-visibility-option,.training-ability-target-card,.training-module-order-item) {
  background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-line) !important; box-shadow: none !important;
}
html:root body #trainingDashboardDrawer :is(.training-focus-option,.training-goal-option,.training-direction-option):has(input:checked) {
  background: var(--hw-ui-soft) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-accent) !important;
}
html:root body #trainingDashboardDrawer :is(.training-module-order-item button,#trainingDashboardResetBtn) {
  background: var(--hw-ui-bg) !important; color: var(--hw-ui-text) !important; border: 1px solid var(--hw-ui-line) !important;
}
html:root body #trainingDashboardDrawer #trainingDashboardSaveBtn,
html:root body #companionDock #companionPanel #companionForm button[type="submit"] {
  background: var(--hw-ui-primary) !important; color: #fff !important; border-color: var(--hw-ui-primary) !important; box-shadow: none !important;
}
html:root body #trainingDashboardDrawer .training-dashboard-actions { background: var(--hw-ui-surface) !important; border-top: 1px solid var(--hw-ui-line); padding: 12px 0 !important; flex-wrap: wrap; bottom: 0; }
html:root body #trainingDashboardDrawer #trainingDashboardApplyState { background: var(--hw-ui-bg) !important; color: var(--hw-ui-muted) !important; border-color: var(--hw-ui-line) !important; }
html:root body #trainingDashboardDrawer .training-dashboard-effect { background: var(--hw-ui-bg) !important; color: var(--hw-ui-muted) !important; }
html:root body #trainingDashboardDrawer .training-module-grip { background: var(--hw-ui-bg) !important; color: var(--hw-ui-text) !important; }
html:root body #trainingDashboardDrawer .hw-drawer-options { margin-top: 16px; background: transparent !important; }
html:root body #trainingDashboardDrawer .hw-drawer-options > summary { padding: 16px; min-height: 48px; border: 1px solid var(--hw-ui-line); border-radius: 8px; cursor: pointer; }
html:root body #companionDock #companionPanel :is(#companionPanelStatus,#companionCharacterText) {
  color: var(--hw-ui-muted) !important; background: transparent !important; opacity: 1 !important;
}
html:root body #companionDock #companionPanel #companionBriefCard .eyebrow { color: var(--hw-ui-accent) !important; }
html:root body #companionDock #companionPanel :is(#companionActions > button,#companionOpenCoachBtn) {
  color: var(--hw-ui-text) !important; background: var(--hw-ui-surface) !important; border: 1px solid var(--hw-ui-line) !important;
}

/* Recording review and case library share neutral cards; category/selection
   cues use a border as well as color. No media or business state is changed. */
html:root[data-theme="dark"] body #debugTopbarActions > button {
  background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important;
  border-color: var(--hw-ui-line) !important; box-shadow: none !important;
}
html:root[data-theme="dark"] body #debugTopbarActions > button:hover {
  background: var(--hw-ui-hover) !important;
}
html:root[data-theme="dark"] body #hwWorkbenchMain .panel[data-panel="settings"] [data-account-logout-trigger].danger-btn {
  background: var(--hw-ui-surface) !important; color: var(--hw-ui-accent) !important;
  border-color: var(--hw-ui-line) !important; box-shadow: none !important;
}
html:root[data-theme="dark"] body #hwWorkbenchMain .panel[data-panel="waveform"] .waveform-learning-primary:disabled {
  background: var(--hw-ui-hover) !important; color: var(--hw-ui-muted) !important;
  border-color: var(--hw-ui-line) !important;
}
/* The recording cabin predates the product theme. Theme its actual surfaces,
   not every classed descendant: layout wrappers must not paint text-sized blocks. */
html:root[data-theme="dark"] body #hwWorkbenchMain .panel[data-panel="audio"] .audio-review-cabin {
  background: var(--hw-ui-bg) !important;
}
html:root[data-theme="dark"] body #hwWorkbenchMain .panel[data-panel="audio"] :is(.audio-status-hero,.audio-top-metric,.audio-training-card,.audio-timeline-panel,.audio-review-main,.audio-coach-panel,.audio-coach-card,.audio-action-bar,.audio-upload-button,.audio-search-field,.audio-transcript-editor,.audio-review-question-detail,.audio-review-standard-compare,.audio-speech-card,.icon-btn) {
  background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-line) !important; box-shadow: none !important;
}
html:root[data-theme="dark"] body #hwWorkbenchMain .panel[data-panel="audio"] :is(.audio-question-tags,.audio-review-question-head,.audio-compare-head) {
  background: transparent !important;
}
html:root body[data-active-panel="audio"] .main .panel[data-panel="audio"] :is(.audio-review-answer-block,.audio-dialogue-card,.audio-report-digest,.audio-review-detail-card,.audio-cabin-timeline-item,.audio-cabin-answer-block,.audio-answer-card) {
  background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-line) !important; box-shadow: none !important;
}
html:root body[data-active-panel="audio"] .main .panel[data-panel="audio"] :is(.audio-review-answer-block,.audio-cabin-answer-block,.audio-answer-card) p {
  color: var(--hw-ui-text) !important;
}
html:root body[data-active-panel="audio"] .main .panel[data-panel="audio"] :is(.link-btn,.audio-knowledge-save-btn,.audio-cabin-timeline-item.current,.audio-cabin-timeline-item.active) {
  color: var(--hw-ui-accent) !important; background: var(--hw-ui-soft) !important; border-color: var(--hw-ui-accent) !important; box-shadow: none !important;
}
html:root body #engineeringLabBoard :is(.engineering-bug-header,.engineering-bug-card,.engineering-bug-filters button,.engineering-bug-favorite,.engineering-bug-card button) {
  background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-line) !important; box-shadow: none !important;
}
html:root body #engineeringLabBoard :is(.engineering-bug-filters button.is-active,.engineering-bug-answer-btn) {
  color: var(--hw-ui-accent) !important; background: var(--hw-ui-soft) !important; border-color: var(--hw-ui-accent) !important;
}
html:root body #engineeringLabBoard .primary-btn:not(:disabled) { color: #fff !important; background: var(--hw-ui-primary) !important; border-color: var(--hw-ui-primary) !important; }
html:root body #hwWorkbenchMain .panel[data-panel="audio"] .audio-compare-grid > section {
  color: var(--hw-ui-text) !important; background: var(--hw-ui-surface) !important; border-color: var(--hw-ui-line) !important;
}
html:root body #hwWorkbenchMain .panel[data-panel="audio"] .audio-compare-grid > section p { color: var(--hw-ui-text) !important; }
html:root body #hwWorkbenchMain .panel[data-panel="audio"] :is(.audio-cabin-title > div > span,.audio-status-hero > span,#audioQuestionTags > span,.audio-coach-score > b,.audio-comment-columns > section > span) {
  color: var(--hw-ui-text) !important; background: var(--hw-ui-bg) !important; border-color: var(--hw-ui-line) !important;
}
html:root body #hwWorkbenchMain .panel[data-panel="audio"] .audio-cabin-timeline-item :is(.audio-timeline-time,em,small),
html:root body #hwWorkbenchMain .panel[data-panel="audio"] .audio-compare-missing b { color: var(--hw-ui-text) !important; background: transparent !important; }
html:root body #hwWorkbenchMain .panel[data-panel="audio"] .audio-comment-columns > section { background: var(--hw-ui-surface) !important; border-color: var(--hw-ui-line) !important; }
html:root body #hwWorkbenchMain .panel[data-panel="audio"] .audio-comment-columns > section > strong { color: var(--hw-ui-text) !important; }
html:root body #engineeringLabBoard :is(.engineering-bug-case-profile > em,.engineering-bug-tool-list > span) { color: var(--hw-ui-text) !important; background: var(--hw-ui-bg) !important; border-color: var(--hw-ui-line) !important; }
html:root body #profileSkillModal :is(.profile-skill-missing > span,#profileSkillRecommendation > span) { color: var(--hw-ui-muted) !important; }
html:root body #profileSkillModal #profileSkillMissingList > span { color: var(--hw-ui-text) !important; background: var(--hw-ui-soft) !important; border-color: var(--hw-ui-accent) !important; }

html:root body dialog[data-engineering-proof-dialog] { box-sizing: border-box; width: min(900px,calc(100vw - 32px)) !important; max-height: calc(100dvh - 40px) !important; overflow: auto !important; padding: 24px !important; background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border: 1px solid var(--hw-ui-line) !important; border-radius: 14px !important; }
html:root body dialog[data-engineering-proof-dialog]::backdrop { background: rgb(9 12 18 / 52%); }
/* The proof is reparented to body; keep the same theme after that portal move. */
html:root[data-theme] body > dialog.recruiter-profile-dialog[data-engineering-proof-dialog][data-identity-proof-overlay="true"] {
  background: var(--hw-ui-surface) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-line) !important;
}
html:root[data-theme] body > dialog.recruiter-profile-dialog[data-engineering-proof-dialog][data-identity-proof-overlay="true"] .recruiter-profile-projects > div:last-child span {
  background: var(--hw-ui-bg) !important; color: var(--hw-ui-text) !important; border-color: var(--hw-ui-line) !important;
}

@media (max-width: 980px) {
  #p10InterviewReports #p10Reports .p10-report-layout { grid-template-columns: minmax(0,1fr); }
  #p10InterviewReports #p10Reports .p10-report-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 600px) {
  #p10InterviewReports #p10Reports.p10-workspace { padding: 24px 16px 48px; }
  #p10InterviewReports #p10Reports .p10-report-start { flex-direction: column; align-items: stretch; padding: 20px; }
  #p10InterviewReports #p10Reports .p10-report-tools { grid-template-columns: minmax(0,1fr); gap: 0; }
  #p10InterviewReports #p10Reports .p10-record-open { font-size: 11px; }
  html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal) { padding: 12px !important; }
  html:root body :is(#accountModal,#onboardingModal,#scoreHistoryModal,#profileSkillModal,#interviewQuestionFeedbackModal,#startPromptModal,#companionExitModal) > :is(.modal-card,form) { padding: 20px !important; max-height: calc(100dvh - 24px) !important; }
  html body #accountModal .account-modal-grid { grid-template-columns: minmax(0,1fr) !important; }
  html body #accountModal .account-verification-input-row { flex-wrap: wrap; }
  html body #accountModal #accountSendVerificationBtn { width: 100%; }
  html body #accountModal #accountForm .form-actions { display: flex; flex-direction: column; align-items: stretch; }
  html body #companionDock #companionPanel .companion-panel-head { padding: 16px; }
  html body #companionDock #companionPanel .companion-agent-layout { padding: 16px; }
}


/* source: project-workbench-ui.css */
/* Engineering project workbench: layout and theme only. This scoped layer does
 * not change data, navigation, templates, hidden state, or feature permissions. */
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--hw-ui-text, #20252d) !important;
  background: transparent !important;
  line-height: 1.7;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(div, main, section, article, aside, header, footer, ol, ul, li, h2, h3, h4, p, span, strong, em, button, input, textarea, select) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-practice-page, .project-practice-home, .project-practice-detail) {
  padding: 0 !important;
  gap: 24px;
  background: transparent !important;
  color: var(--hw-ui-text) !important;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(div:not([class]), .project-home-title, .engineering-assets-overview-head, .engineering-assets-kpi-grid, .engineering-lab-hero-main, .project-loop-heading, .project-my-assistant-head, .debug-project-asset-shelf > header, .debug-project-asset-shelf > header > div) { background: transparent !important; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(h2, h3, h4, strong, b, dt, dd, label) {
  color: var(--hw-ui-text) !important;
  font-weight: 650;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(p, span, em, li, small) {
  color: var(--hw-ui-muted) !important;
  font-weight: 400;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(h2, h3, h4, p) { line-height: 1.65; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-home-title, .project-detail-header, .project-card-head) {
  gap: 16px !important;
  flex-wrap: wrap;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-home-title {
  align-items: flex-start !important;
  margin: 0 0 4px !important;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-home-title h2 {
  font-size: clamp(25px, 2.5vw, 32px) !important;
  letter-spacing: -.025em;
  line-height: 1.35;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-home-title > span, .project-home-title p, .project-section-kicker) {
  color: var(--hw-ui-muted) !important;
  font-size: 13px !important;
  text-align: left;
  letter-spacing: 0;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-today-card, .project-all-projects, .project-detail-section, .project-practice-card, .project-home-card, .project-coach-panel, .project-architecture-board, .engineering-asset-card, .project-case-grid > article, .engineering-assets-overview, .debug-project-asset-shelf, .debug-project-asset-empty, .debug-project-asset-card, .engineering-lab-hero, .project-my-assistant, .project-loop-board) {
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 14px !important;
  background: var(--hw-ui-surface) !important;
  background-image: none !important;
  color: var(--hw-ui-text) !important;
  box-shadow: none !important;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-detail-section, .project-all-projects, .project-practice-card, .project-coach-panel) { padding: 24px; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-today-panel, .project-home-loop-strip, .project-loop-step, .project-intro-diagram, .project-coach-answer, .project-case-xiaowen, .project-case-xiaowen-modes > section, .project-debug-layout > aside, .project-waveform-layout > aside, .engineering-asset-card > p, .engineering-lab-task, .project-route-step, .project-case-template-preview, .engineering-asset-kpi, .project-xiaowen-project-preview, .project-route-overview, .project-source-summary, .project-authenticity-card, .project-architecture-note, .project-source-hub, .project-coach-next) {
  border-color: var(--hw-ui-line) !important;
  border-radius: 10px !important;
  background: var(--hw-ui-hover) !important;
  background-image: none !important;
  color: var(--hw-ui-text) !important;
  box-shadow: none !important;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-section-kicker { background: transparent !important; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-debug-steps p > span, .project-context-chip-list > span) {
  color: var(--hw-ui-accent) !important;
  background: var(--hw-ui-soft) !important;
  border-color: var(--hw-ui-line) !important;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-home-loop-strip li, .project-today-meta > div, .project-intro-facts > div, .project-intro-facts > span, .project-xiaowen-architecture li, .project-intro-meta span, .project-intro-specs span, .project-summary-learned span, .project-module-row span, .project-card-head > span, .project-coach-answer em, .project-today-panel span, .project-protection-row, .project-protection-row span, .project-case-xiaowen-prompts span) {
  border-color: var(--hw-ui-line) !important;
  border-radius: 8px;
  color: var(--hw-ui-text) !important;
  background: var(--hw-ui-surface) !important;
  background-image: none !important;
  white-space: normal;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 8px !important;
  color: var(--hw-ui-text) !important;
  background: var(--hw-ui-surface) !important;
  background-image: none !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.6;
  white-space: normal !important;
  box-shadow: none !important;
  text-shadow: none;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard button :is(span, strong, em, i, b) { color: inherit !important; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard button:hover:not(:disabled) { background: var(--hw-ui-hover) !important; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(button.active, .project-route-step.is-next) {
  color: var(--hw-ui-accent) !important;
  border-color: var(--hw-ui-accent) !important;
  background: var(--hw-ui-soft) !important;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard button.primary-btn {
  color: #fff !important;
  background: var(--hw-ui-primary) !important;
  border-color: var(--hw-ui-primary) !important;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard button.primary-btn:hover:not(:disabled) { background: var(--hw-ui-primary-hover) !important; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(button, a, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--hw-ui-focus, #a63a32) !important;
  outline-offset: 3px;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(input:not([type="checkbox"]), textarea, select) {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 8px;
  background: var(--hw-ui-surface) !important;
  color: var(--hw-ui-text) !important;
  font: inherit;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-today-card {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  min-height: 0;
  padding: 24px;
  gap: 24px;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-today-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  gap: 10px;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-today-meta > div { padding: 12px; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-today-meta strong {
  font-size: 20px;
  white-space: normal;
  line-height: 1.5;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-home-loop-strip { padding: 16px; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-home-loop-strip ol { gap: 10px; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-home-loop-strip li { min-height: 44px; padding: 8px; font-size: 13px; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-architecture-board {
  flex-wrap: wrap;
  gap: 10px;
  overflow-x: visible;
  padding: 16px;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-architecture-node {
  flex: 1 1 145px;
  min-width: 0;
  padding: 16px;
  color: var(--hw-ui-text) !important;
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 10px;
  background: var(--hw-ui-hover) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-architecture-arrow { flex: 0 0 16px; color: var(--hw-ui-muted) !important; }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-section-intro .project-intro-layout, .project-intro-layout, .project-debug-layout, .project-waveform-layout, .project-summary-layout) { grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); }
html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-practice-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
@media (max-width: 1200px) {
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-today-card, .project-practice-grid, .project-section-intro .project-intro-layout, .project-intro-layout, .project-debug-layout, .project-waveform-layout, .project-summary-layout) { grid-template-columns: minmax(0, 1fr); }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-today-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-home-loop-strip ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-case-xiaowen-modes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-practice-page, .project-practice-home, .project-practice-detail) { gap: 18px; }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-detail-section, .project-all-projects, .project-practice-card, .project-coach-panel, .project-today-card) { padding: 18px 16px; }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-today-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-home-loop-strip { grid-template-columns: minmax(0, 1fr); }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-home-loop-strip ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-home-loop-strip li::after { content: none; }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-case-xiaowen-head, .project-route-overview, .project-xiaowen-architecture ol, .project-case-flow, .project-evidence-grid, .project-summary-metrics, .project-ability-gain) { grid-template-columns: minmax(0, 1fr); }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-card-head, .project-home-title) { align-items: flex-start !important; }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard .project-card-head > button { width: 100%; }
  html:root body .panel[data-panel="project-practice"] #projectPracticeBoard :is(.project-section-kicker, .project-card-head > span) { width: auto; }
}


/* source: assistant-workbench-ui.css */
/* Assistant overview only. The companion drawer and business state are not
 * part of this layer. Native hidden/disabled/details states remain untouched. */
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] {
  --coach-ink: var(--hw-ui-text);
  --coach-muted: var(--hw-ui-muted);
  --coach-line: var(--hw-ui-line);
  --coach-purple: var(--hw-ui-accent);
  --coach-blue: var(--hw-ui-accent);
  --coach-green: var(--hw-ui-accent);
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: none !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 20px !important;
  padding-bottom: 32px;
  color: var(--hw-ui-text) !important;
  background: transparent !important;
  font-size: 15px;
  line-height: 1.65;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] :is(article, section, header, div, button, summary, h1, h2, p, strong, small, em, span):not(dialog *) {
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] :is(.xiaowen-final-coach__hero, .xiaowen-final-coach__card) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: var(--hw-ui-surface) !important;
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: none !important;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] :is(.xiaowen-final-coach__hero, .xiaowen-final-coach__card)::before { background: transparent !important; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .3fr) !important;
  align-items: start !important;
  gap: 24px !important;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__identity { align-items: flex-start; gap: 18px; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__identity > div { gap: 12px; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__mark {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 12px;
  border: 1px solid var(--hw-ui-line);
  background: var(--hw-ui-soft) !important;
  color: var(--hw-ui-accent) !important;
  font-size: 24px;
  box-shadow: none !important;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] :is(h1, h2, h3, strong, b, dt, dd):not(dialog *) { color: var(--hw-ui-text) !important; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] h1 { font-size: clamp(24px, 2.2vw, 30px) !important; line-height: 1.4 !important; font-weight: 650; letter-spacing: -.02em; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] h2 { font-size: 19px !important; line-height: 1.45; font-weight: 650; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] :is(p, small, em, .eyebrow, .xiaowen-final-coach__status > span):not(dialog *) {
  color: var(--hw-ui-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  font-style: normal;
  letter-spacing: normal !important;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] :is(button, summary):not(dialog *) {
  min-height: 46px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  white-space: normal;
  padding: 11px 16px !important;
  border-radius: 9px !important;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] :is(button, summary):not(dialog *):focus-visible {
  outline: 3px solid var(--hw-ui-focus) !important;
  outline-offset: 3px !important;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] [data-ui-open-assistant] {
  width: max-content !important;
  max-width: 100%;
  position: static !important;
  margin-top: 4px;
  color: var(--hw-ui-on-primary) !important;
  background: var(--hw-ui-primary) !important;
  border: 1px solid var(--hw-ui-primary) !important;
  box-shadow: none !important;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] :is(.xiaowen-final-coach__status, .xiaowen-final-coach__scope) {
  background: var(--hw-ui-hover) !important;
  border: 1px solid var(--hw-ui-line) !important;
  color: var(--hw-ui-text) !important;
  border-radius: 10px;
  box-shadow: none !important;
  padding: 16px;
  min-width: 0;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__status > span i { background: var(--hw-ui-muted); box-shadow: none; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__scope span { color: var(--hw-ui-text) !important; font-size: 14px; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] :is(.xiaowen-final-coach__scope b, .xiaowen-final-coach__step) {
  background: var(--hw-ui-soft) !important;
  color: var(--hw-ui-accent) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__card { gap: 18px; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__card > header { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__card > header em {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  white-space: normal;
  background: var(--hw-ui-hover) !important;
  color: var(--hw-ui-text) !important;
  border: 1px solid var(--hw-ui-line);
  border-radius: 6px;
  padding: 5px 9px;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] :is(.xiaowen-final-coach__finding, .xiaowen-final-coach__result, .xiaowen-final-coach__confirmed, .xiaowen-final-coach__warning, .xiaowen-final-coach__growth, .xiaowen-final-coach__summary-list) {
  background: var(--hw-ui-hover) !important;
  color: var(--hw-ui-text) !important;
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 9px;
  padding: 16px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__card > .primary-btn {
  margin-top: auto;
  background: var(--hw-ui-surface) !important;
  color: var(--hw-ui-text) !important;
  border: 1px solid var(--hw-ui-line) !important;
  box-shadow: none !important;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .hw-feature-preview {
  padding: 16px 20px;
  background: var(--hw-ui-surface) !important;
  color: var(--hw-ui-text) !important;
  border: 1px solid var(--hw-ui-line) !important;
  border-radius: 10px;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .hw-feature-preview summary { color: var(--hw-ui-text) !important; cursor: pointer; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .hw-feature-preview .hw-feature-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .hw-feature-preview button:disabled {
  color: var(--hw-ui-muted) !important;
  background: var(--hw-ui-hover) !important;
  border: 1px dashed var(--hw-ui-line) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}
/* The existing training renderer owns this real control ID. The relational
 * scope also outranks legacy theme rules without affecting the global drawer. */
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"]:has(#xiaowenCoachPlanStart) :is(.xiaowen-final-coach__hero, .xiaowen-final-coach__card, .hw-feature-preview) {
  background: var(--hw-ui-surface) !important;
  border-color: var(--hw-ui-line) !important;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"]:has(#xiaowenCoachPlanStart) :is(.xiaowen-final-coach__identity, .xiaowen-final-coach__identity > div, .xiaowen-final-coach__card > header, .xiaowen-final-coach__card > header > div) { background: transparent !important; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"]:has(#xiaowenCoachPlanStart) :is(.xiaowen-final-coach__status, .xiaowen-final-coach__scope, .xiaowen-final-coach__finding, .xiaowen-final-coach__result, .xiaowen-final-coach__confirmed, .xiaowen-final-coach__warning, .xiaowen-final-coach__growth, .xiaowen-final-coach__summary-list) {
  background: var(--hw-ui-hover) !important;
  border-color: var(--hw-ui-line) !important;
}
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"]:has(#xiaowenCoachPlanStart) :is(h1, h2, h3, strong, dt, dd) { color: var(--hw-ui-text) !important; }
html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"]:has(#xiaowenCoachPlanStart) :is(p, small, em) { color: var(--hw-ui-muted) !important; }
@media (max-width: 1100px) {
  html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__hero { grid-template-columns: minmax(0, 1fr) !important; }
  html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .hw-feature-preview .hw-feature-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] :is(.xiaowen-final-coach__hero, .xiaowen-final-coach__card) { padding: 18px !important; }
  html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .xiaowen-final-coach__identity { flex-direction: column; gap: 14px; }
  html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] [data-ui-open-assistant] { width: 100% !important; }
  html:root[data-theme] body[data-active-panel="ai-coach"] .panel[data-panel="ai-coach"] .hw-feature-preview .hw-feature-actions { grid-template-columns: minmax(0, 1fr); }
}


/* Live dictation preview: same source rules as resume-practice.css. */
.rp-live-transcript { min-width: 0; max-height: 9em; overflow: auto; border-top: 1px solid var(--rp-line); margin-top: 10px; padding-top: 8px; color: inherit; background: transparent; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.rp-live-transcript p { margin: 4px 0; }
.rp-live-transcript .rp-muted { font-size: 12px; }