/* 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; }
}