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