/* 面试训练定稿视觉层。只作用于 interview-ui 页面；业务样式、数据逻辑保持独立。 */
body.interview-ui {
  --ink: #203a53;
  --text: #566b82;
  --muted: #6f8093;
  --ui-caption: 12px;
  --ui-label: 13px;
  --ui-body: 14px;
  --ui-title: 18px;
  --ui-motion: 180ms;
  font-size: var(--ui-body);
  line-height: 1.7;
}
body.interview-ui :is(button, input, select, textarea, a) {
  transition: background-color var(--ui-motion) ease, border-color var(--ui-motion) ease,
    color var(--ui-motion) ease, box-shadow var(--ui-motion) ease;
}
body.interview-ui :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
body.interview-ui :is(button, select):disabled { cursor: not-allowed; }
body.interview-ui :is(input, textarea)::placeholder { color: #77889a; }
body.interview-ui :is(.answer-panel.show, dialog[open]) {
  animation: interview-reveal var(--ui-motion) ease-out;
}
@keyframes interview-reveal { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 滚动能力保留，滚动条平时透明，悬停/键盘操作时弱显示。 */
html.interview-ui-root, body.interview-ui, body.interview-ui * {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
html.interview-ui-root:hover, body.interview-ui:hover, body.interview-ui :is(*:hover, *:focus-within) {
  scrollbar-color: #c5d1de transparent;
}
html.interview-ui-root::-webkit-scrollbar, body.interview-ui::-webkit-scrollbar,
body.interview-ui *::-webkit-scrollbar { width: 4px; height: 4px; }
html.interview-ui-root::-webkit-scrollbar-thumb, body.interview-ui::-webkit-scrollbar-thumb,
body.interview-ui *::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
html.interview-ui-root:hover::-webkit-scrollbar-thumb, body.interview-ui:hover::-webkit-scrollbar-thumb,
body.interview-ui :is(*:hover, *:focus-within)::-webkit-scrollbar-thumb { background: #c5d1de; }

/* 原生 select 保留值、change 事件、禁用、表单校验和键盘语义。 */
body.interview-ui :is(.bank-select, .filter-select, .mc-input, .field select) {
  min-height: 42px;
  border-radius: 10px;
  font-size: var(--ui-body);
}
body.interview-ui select { max-width: 100%; }
body.interview-ui select:focus-visible { border-color: var(--blue); }
@supports (appearance: base-select) {
  body.interview-ui select:not([multiple]):not([size]),
  body.interview-ui select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  body.interview-ui select:not([multiple]):not([size]) { padding: 8px 12px; align-items: center; }
  body.interview-ui select::picker-icon { color: #71859a; transition: rotate var(--ui-motion) ease; }
  body.interview-ui select:open::picker-icon { rotate: 180deg; }
  body.interview-ui select::picker(select) {
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid #dbe5ef;
    border-radius: 12px;
    padding: 6px;
    max-height: min(360px, 60dvh);
    overflow-y: auto;
    box-shadow: 0 12px 36px #203a531c;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--ui-motion), transform var(--ui-motion),
      display var(--ui-motion) allow-discrete, overlay var(--ui-motion) allow-discrete;
  }
  body.interview-ui select::picker(select):popover-open { opacity: 1; transform: none; }
  @starting-style {
    body.interview-ui select::picker(select):popover-open { opacity: 0; transform: translateY(-4px); }
  }
  body.interview-ui select option { padding: 9px 11px; gap: 9px; border-radius: 7px; font-size: 14px; }
  body.interview-ui select option:checked { background: #edf3ff; color: #365fbf; }
  body.interview-ui select option:is(:hover, :focus) { background: #f0f5fc; }
  body.interview-front select::picker(select) {
    max-height: min(240px, 40dvh);
    position-try-order: normal;
  }
}

/* 三种训练模式：标题 / 正文 / 控件 / 注释四层字体。 */
body.interview-front .module-head { height: 56px; flex-shrink: 0; gap: 12px; }
body.interview-front .module-head h2 { font-size: var(--ui-title); white-space: nowrap; }
body.interview-front :is(.module-body, .filter-body) { height: calc(100% - 56px); }
body.interview-front .module + .module::before { opacity: .35; }
body.interview-front .bank-grid { grid-template-columns: minmax(260px, 1fr) minmax(0, 4.8fr); }
body.interview-front .bank-grid.filter-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
body.interview-front .bank-grid.settings-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
body.interview-front :is(.assessment-grid, .simulation-grid).settings-collapsed {
  grid-template-columns: 64px minmax(0, 2.65fr) minmax(250px, 1.05fr);
}
body.interview-front .settings-collapsed .settings-module .module-head {
  height: 56px; padding: 10px 0; justify-content: center;
}
body.interview-front .settings-collapsed .settings-module :is(h2, .head-note, .text-btn) { display: none; }
body.interview-front .settings-collapsed .settings-module > :is(.filter-body, .settings) { display: none; }
body.interview-front .settings-collapse { flex-shrink: 0; }
body.interview-front .mode-tab { min-height: 42px; font-size: 15px; }
body.interview-front .filter-body { gap: 18px; padding: 12px 18px 20px; }
body.interview-front :is(.filter-label, .setting-group label) { font-size: var(--ui-label); color: var(--text); }
body.interview-front :is(.search-input, .select-trigger, .start-btn) { height: 42px; font-size: var(--ui-body); }
body.interview-front .select-menu { top: 46px; }
body.interview-front :is(.pill, .style-pill) { min-height: 34px; font-size: 12px; padding: 6px 10px; }
body.interview-front :is(.text-btn, .material-btn, .upload-btn) { min-height: 34px; font-size: 12px; }
body.interview-front .icon-btn { width: 34px; height: 34px; }
body.interview-front .qtitle { font-size: 18px; line-height: 1.65; }
body.interview-front .qid { font-size: 12px; }
body.interview-front .tag { font-size: 12px; line-height: 1.35; padding: 4px 9px; }
body.interview-front :is(.action-btn, .save-btn, .submit-btn, .pagination button) {
  min-height: 40px; font-size: 13px; padding: 8px 13px; white-space: nowrap;
}
body.interview-front :is(.action-line, .answer-foot, .input-foot, .personal-actions,
  .assessment-report-head, .simulation-report-head) { flex-wrap: wrap; gap: 8px; align-items: center; }
body.interview-front .input-foot .submit-btn { margin-left: auto; }
body.interview-front #simulation .input-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
}
body.interview-front #simulation .simulation-actions {
  display: flex; justify-self: end; flex-wrap: nowrap; align-items: center; gap: 8px;
}
body.interview-front #simulation .simulation-actions button {
  height: 40px; min-height: 40px; flex: 0 0 auto; margin-left: 0;
  padding: 8px 13px; font-size: 13px; white-space: nowrap;
}
body.interview-front :is(.answer-panel p, .my-answer textarea, .answer-box, .bubble,
  .personal-evidence p, .assessment-feedback, .assessment-report, .simulation-turn) {
  font-size: 14px; line-height: 1.85;
}
body.interview-front :is(.answer-panel h4, .assessment-feedback h4, .assessment-report h4) { font-size: 15px; }
body.interview-front :is(.head-note, .ai-state, .ai-mode p, .material-name, .material-status p,
  .ai-note, .answer-status, .input-tip, .progress-label, .bubble-role, .role, .q-source,
  .ability-label, .ability-note, .process-note, .scene-note, .stage-meta, .room-status,
  .time, .overview span, .overview p, .ability-summary p, .summary-score span,
  .mode-badge, .stage-pill, .assessment-muted, .assessment-message, .assessment-feedback blockquote,
  .assessment-report-pills span, .assessment-report a small, .assessment-score-reason p,
  .assessment-evidence p, .assessment-feedback summary, .simulation-options summary,
  .simulation-check, .simulation-dimensions small, .simulation-stage-summary span,
  .assessment-history-item strong, .assessment-history-item span, .personal-evidence small) {
  font-size: var(--ui-caption); color: var(--muted); line-height: 1.65;
}
body.interview-front #assessment .ability-item small,
body.interview-front #simulationHistory small { font-size: 12px; color: var(--muted); }
body.interview-front .assessment-history > div:first-child { font-size: 13px; }
body.interview-front :is(.personal-badge, .ability-note summary) { font-size: 12px; }
body.interview-front .answer-mode button { font-size: 12px; min-height: 38px; }
body.interview-front .stage-title { font-size: 14px; line-height: 1.6; }
body.interview-front .stage { min-height: 46px; }
body.interview-front .settings { gap: 14px; }
body.interview-front .simulation-dialog h3 { font-size: 18px; }
body.interview-front .simulation-dialog p { font-size: 14px; }
body.interview-front .pagination { flex-shrink: 0; }

/* 管理员、材料、登录：共享控件尺寸；记录和原文均按可读正文排版。 */
body.interview-ui :is(.mc, .student-table, .question-record, .job-row) { font-size: 14px; }
body.interview-ui :is(.mc-head h2, .panel-head h2, .modal-head h2, .mc-card-head h2) { font-size: 18px; }
body.interview-ui :is(.mc-top h1, .heading h1) { font-size: 28px; letter-spacing: -.02em; }
body.interview-ui :is(.mc-label, .field label, .markdown-label) { font-size: 13px; color: var(--text); }
body.interview-ui :is(.mc-btn, .ghost, .primary, .soft-btn, .record-actions button) {
  min-height: 40px; font-size: 13px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
body.interview-ui :is(.mc-actions, .button-row, .record-actions, .modal-actions) { gap: 8px; flex-wrap: wrap; }
body.interview-ui :is(.mc-muted, .mc-top p, .mc-file p, .mc-origin, .mc-evidence p, .mc-tag,
  .mc-drop span, .mc-banner, .auth-links, .student-crumb, .student-table td p, .import-hint,
  .upload-zone span, .job-row p, .question-record p, .question-tags span, .source-box pre,
  .source-box p, .filter-count, .panel-head p, .heading p, .job-counts div, .job-chunk,
  .nav-label, .brand span, .admin-user span, .live, .mc-help, .mc-profile-evidence small) {
  font-size: 12px; line-height: 1.8;
}
body.interview-ui :is(.mc-file strong, .mc-evidence strong, .question-record h3, .job-row strong) { font-size: 15px; }
body.interview-ui :is(.mc-evidence summary, .mc-profile-evidence summary) { font-size: 13px; padding: 7px 0; cursor: pointer; }
body.interview-ui :is(.markdown-preview, .question-dialog .field textarea, .mc-input, .field input,
  .field textarea, .search input) { font-size: 14px; line-height: 1.8; }
body.interview-ui .mc-file .mc-btn { min-height: 36px; font-size: 12px; padding: 6px 11px; }
/* 材料组件的旧内联尺寸在此统一，保留组件数据逻辑。 */
body.interview-ui .mc-origin .mc-btn[data-clear] { font-size: 12px !important; padding: 6px 10px !important; min-height: 34px; }
body.interview-ui .filterbar { flex-wrap: wrap; gap: 10px; }
body.interview-ui .search { height: 42px; flex: 1 1 260px; min-width: 180px; }
body.interview-ui .filter-select { min-width: 135px; }
body.interview-ui .question-record { padding: 22px; }
body.interview-ui .empty-state { font-size: 14px; }
body.interview-ui .stat label { font-size: 13px; }
body.interview-ui .nav button { font-size: 14px; min-height: 44px; }
body.interview-ui .logout-button { font-size: 12px; min-height: 36px; }
body.interview-ui :is(.mc-card-head, #adminAssessmentResult > .mc-card, #adminSimulationResult > .mc-card) { padding: 20px 22px; }
body.interview-ui .mc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.interview-ui :is(#adminAssessmentHistory, #adminSimulationHistory) > .mc-card > .mc-actions { padding: 0 22px 20px; }
body.interview-ui :is(.mc-profile-evidence p, #adminAssessmentResult p, #adminSimulationResult p) {
  white-space: pre-wrap; overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
  body.interview-front :is(.bank-grid, .bank-grid.filter-collapsed, .view.settings-collapsed) { grid-template-columns: 1fr; }
  body.interview-front .settings-collapsed .settings-module { min-height: 0; }
  body.interview-front :is(.module-body, .filter-body) { height: auto; }
  body.interview-front .filter-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.interview-front .module-head { min-height: 56px; height: auto; padding-top: 10px; padding-bottom: 10px; }
  body.interview-front .bank-grid.filter-collapsed .filter-module .module-head { height: 56px; }
  body.interview-front .question-scroll { overflow: visible; }
}
@media (max-width: 520px) {
  body.interview-front .filter-body { grid-template-columns: 1fr; }
  body.interview-front :is(.tag-line, .action-line, .answer-panel, .q-source) { margin-left: 0; }
  body.interview-front .q-line { grid-template-columns: 58px minmax(0, 1fr); }
  body.interview-front .qtitle { font-size: 17px; }
  body.interview-front .module-head h2 { font-size: 17px; }
  body.interview-ui :is(.mc-top h1, .heading h1) { font-size: 24px; }
  body.interview-ui .filter-count { flex-basis: 100%; }
  body.interview-ui .mc-card-head { flex-wrap: wrap; }
  body.interview-ui .auth-links { gap: 10px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html.interview-ui-root { scroll-behavior: auto; }
  body.interview-ui *, body.interview-ui *::before, body.interview-ui *::after,
  body.interview-ui select::picker(select), body.interview-ui select::picker-icon {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  html.interview-ui-root, body.interview-ui, body.interview-ui * { scrollbar-color: auto; }
  body.interview-ui :focus-visible { outline-color: Highlight; }
}