/* HardAsk V1.0 · 模拟面试三模式最终版 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html:not(.react-student-embedded) body[data-interview-final-mode="pressure"] :is(#engineeringTrainingFlow, #interviewPracticeAnswerGuide) {
  display: none !important;
}

html:not(.react-student-embedded) body[data-interview-final-mode="pressure"] .interview-final-active-mode {
  border-color: rgba(218, 75, 87, .22);
  background: linear-gradient(135deg, #fff2f3, #fff8f3);
}

html:not(.react-student-embedded) body[data-interview-final-mode="pressure"] .interview-final-active-mode > strong {
  color: #d54d59;
}

html:not(.react-student-embedded) body[data-interview-final-mode="real"] .interview-final-active-mode {
  border-color: rgba(31, 108, 216, .22);
  background: linear-gradient(135deg, #eef6ff, #f7fbff);
}

html:not(.react-student-embedded) body[data-interview-final-mode="real"] .interview-final-active-mode > strong {
  color: #216bd0;
}

html[data-theme="dark"] .interview-final-mode-card,
html[data-theme="dark"] .interview-final-mode-option,
html[data-theme="dark"] .interview-final-mode-brief > section,
html[data-theme="dark"] .interview-final-active-mode,
html[data-theme="dark"] .interview-practice-answer-guide,
html[data-theme="dark"] .interview-pressure-chain,
html[data-theme="dark"] .interview-final-score-panel {
  color: #eef4ff;
  border-color: rgba(148, 163, 184, .17) !important;
  background: rgba(16, 25, 40, .94) !important;
}

html[data-theme="dark"] :is(.interview-final-mode-card h3, .interview-final-mode-option strong, .interview-final-mode-brief > section > div:first-child strong, .interview-final-active-mode > strong, .interview-practice-answer-guide > div strong) {
  color: #f1f6ff !important;
}

html[data-theme="dark"] :is(.interview-final-mode-brief ol li, .interview-final-mode-brief dl > div, .interview-pressure-example p, .interview-practice-answer-guide li, #interviewPressureTranscript p[data-role="candidate"], .interview-final-score-panel article) {
  color: #dfe7f4;
  border-color: rgba(148, 163, 184, .14);
  background: rgba(28, 38, 56, .9);
}

@media (max-width: 980px) {
  .interview-final-mode-selector,
  .interview-final-mode-brief ol,
  .interview-final-mode-brief dl,
  .interview-pressure-example {
    grid-template-columns: 1fr;
  }

  .interview-final-mode-brief > section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .interview-final-mode-card > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .interview-final-mode-option {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .interview-final-mode-option > em {
    grid-column: 2;
    justify-self: start;
  }

  html:not(.react-student-embedded) .interview-final-mode-start {
    width: 100%;
    min-width: 0;
  }
}