:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  color: #25324b;
  background: #f6f8fc;
  font-synthesis: none;
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-soft: #eff6ff;
  --sky: #38bdf8;
  --success: #27c7a1;
  --warning: #f3aa42;
  --danger: #ef7866;
  --text: #25324b;
  --muted: #758198;
  --line: #e7ecf4;
  --canvas: #f6f8fc;
  --surface: #ffffff;
  --shadow: 0 8px 26px rgba(39, 58, 96, 0.06);
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--canvas);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.brand-symbol {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 7px;
  background: url("/static/img/logo.png") center / contain no-repeat;
}

.brand-symbol::before,
.brand-symbol::after {
  display: none;
  content: none;
}

.brand-symbol::before {
  display: none;
}

.brand-symbol::after {
  display: none;
}

.builder-brand-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 7px;
  object-fit: contain;
}

.standalone-logo {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 8px;
}

/* Organization management */
.organization-page { padding-bottom: 32px; }
.organization-page-heading { align-items: flex-end; }
.organization-workspace {
  display: grid;
  min-height: 620px;
  grid-template-columns: 320px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #e2e8f1;
  border-radius: 7px;
  background: #ffffff;
}
.organization-tree-panel { border-right: 1px solid #e4e9f1; background: #f8fafc; }
.organization-tree-panel > header { display: flex; min-height: 70px; align-items: center; padding: 0 20px; border-bottom: 1px solid #e5eaf1; background: #ffffff; }
.organization-tree-panel > header strong, .organization-tree-panel > header span { display: block; }
.organization-tree { display: grid; gap: 3px; padding: 12px; }
.organization-node {
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #52617a;
  background: transparent;
  text-align: left;
}
.organization-node.level-1 { padding-left: 28px; }
.organization-node.level-2 { padding-left: 46px; }
.organization-node:hover { border-color: #dbe3ef; background: #ffffff; }
.organization-node.active { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; }
.organization-node-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: #3b82f6; }
.organization-node-icon svg { width: 19px; height: 19px; }
.organization-node-copy strong, .organization-node-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.organization-node-copy small { margin-top: 3px; color: #8a96a8; font-size: 10px; }
.organization-tree-empty { padding: 28px 18px; color: #8c97a8; text-align: center; line-height: 1.7; }
.organization-detail-panel { min-width: 0; padding: 26px 28px; }
.organization-empty { display: grid; min-height: 500px; place-items: center; align-content: center; color: #8a96a8; text-align: center; }
.organization-empty > span { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; margin-bottom: 13px; border-radius: 8px; color: #3b82f6; background: #eff6ff; }
.organization-empty svg { width: 28px; height: 28px; }
.organization-empty strong { color: #53617a; font-size: 16px; }
.organization-empty p { margin: 7px 0 0; }
.organization-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.organization-detail-header h2 { margin: 5px 0 7px; font-size: 25px; }
.organization-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0; border: 1px solid #e5eaf1; border-radius: 6px; }
.organization-metrics > div { padding: 17px 20px; border-right: 1px solid #e5eaf1; }
.organization-metrics > div:last-child { border-right: 0; }
.organization-metrics span, .organization-metrics strong { display: block; }
.organization-metrics span { color: #7d899c; font-size: 12px; }
.organization-metrics strong { margin-top: 4px; color: #3158ad; font-size: 24px; }
.organization-members-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 10px; }
.organization-members-heading strong, .organization-members-heading span { display: block; }
.organization-member-table { box-shadow: none; }
.organization-dialog {
  width: min(680px, calc(100vw - 28px));
  max-height: min(720px, calc(100dvh - 24px));
  overflow: hidden;
}
.organization-dialog-content {
  display: grid;
  width: 100%;
  max-height: min(720px, calc(100dvh - 24px));
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.organization-dialog-body { min-height: 0; overflow-y: auto; padding: 22px 24px 24px; }
.organization-form-context { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid #dfe7f3; border-radius: 6px; background: #f6f9fd; }
.organization-form-context-icon { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; border-radius: 6px; color: #4169c1; background: #e8efff; }
.organization-form-context-icon svg { width: 20px; height: 20px; }
.organization-form-context span, .organization-form-context strong { display: block; }
.organization-form-context span { color: #8793a6; font-size: 11px; }
.organization-form-context strong { margin-top: 2px; color: #354665; font-size: 14px; }
.organization-form-grid { gap: 17px; padding: 0; }
.organization-dialog-body > .form-message { min-height: 20px; margin: 12px 0 0; }

/* Paper audience */
.audience-mode-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.audience-mode-control label { display: flex; min-height: 78px; align-items: flex-start; gap: 10px; padding: 15px; border: 1px solid #dfe5ee; border-radius: 6px; background: #ffffff; cursor: pointer; }
.audience-mode-control label:has(input:checked) { border-color: #93c5fd; background: #eff6ff; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); }
.audience-mode-control input { margin-top: 4px; accent-color: var(--primary); }
.audience-mode-control strong, .audience-mode-control small { display: block; }
.audience-mode-control small { margin-top: 5px; color: #7f8b9e; line-height: 1.5; }
.audience-custom-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.audience-picker-panel { min-width: 0; overflow: hidden; border: 1px solid #e1e7ef; border-radius: 6px; background: #fbfcfe; }
.audience-picker-panel > header { min-height: 62px; padding: 12px 15px; border-bottom: 1px solid #e5eaf1; background: #ffffff; }
.audience-picker-panel header strong, .audience-picker-panel header small { display: block; }
.audience-picker-panel header small { margin-top: 4px; color: #8994a6; line-height: 1.4; }
.audience-organization-tree, .audience-person-results { max-height: 300px; overflow: auto; padding: 9px; }
.audience-organization-group.level-1 { padding-left: 17px; }
.audience-organization-group.level-2 { padding-left: 34px; }
.audience-organization-node, .audience-person-row { display: grid; min-height: 47px; grid-template-columns: 20px 24px minmax(0,1fr); align-items: center; gap: 7px; padding: 6px 8px; border-radius: 5px; color: #53617a; cursor: pointer; }
.audience-person-row { grid-template-columns: 20px minmax(0,1fr); }
.audience-organization-node:hover, .audience-person-row:hover { background: #f0f4fb; }
.audience-organization-node input, .audience-person-row input { accent-color: var(--primary); }
.audience-organization-icon { display: inline-flex; color: #3b82f6; }
.audience-organization-icon svg { width: 17px; height: 17px; }
.audience-organization-node strong, .audience-organization-node small, .audience-person-row strong, .audience-person-row small { display: block; }
.audience-organization-node small, .audience-person-row small { margin-top: 2px; color: #8a96a8; font-size: 10px; }
.audience-person-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; padding: 9px; border-bottom: 1px solid #e5eaf1; background: #ffffff; }
.audience-person-search input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #d9e0eb; border-radius: 5px; outline: 0; }
.audience-selected-summary { grid-column: 1 / -1; padding: 13px 15px; border: 1px solid #e1e7ef; border-radius: 6px; background: #ffffff; }
.audience-selected-summary > div:first-child { display: flex; justify-content: space-between; }
.audience-selected-users { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.audience-coverage-header { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 13px; border-top: 1px solid #e8edf3; }
.audience-covered-users { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.audience-covered-user { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #dfe7ef; border-radius: 5px; color: #44536a; background: #f8fafc; }
.audience-covered-user small { color: #8894a5; }
.audience-user-chip { display: inline-flex; min-height: 32px; align-items: center; gap: 7px; padding: 0 5px 0 10px; border: 1px solid #d8e2f1; border-radius: 5px; color: #52627c; background: #f7f9fd; }
.audience-user-chip button { display: inline-flex; width: 25px; height: 25px; align-items: center; justify-content: center; padding: 0; border: 0; color: #8490a3; background: transparent; }
.audience-user-chip svg { width: 14px; height: 14px; }
.audience-scope-summary { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 13px 15px; border-left: 3px solid #55a88f; color: #43665d; background: #edf8f4; }
.audience-scope-summary > span { display: inline-flex; }
.audience-scope-summary svg { width: 20px; height: 20px; }
.audience-scope-summary strong, .audience-scope-summary small { display: block; }
.audience-scope-summary small { margin-top: 3px; color: #718981; }

/* Login */
.login-page-body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px clamp(24px, 5vw, 68px);
  background: #f1f5fa;
}

.login-layout {
  display: grid;
  width: min(1080px, 100%);
  min-height: min(660px, calc(100dvh - 48px));
  grid-template-columns: minmax(390px, 1.08fr) minmax(460px, 0.92fr);
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 22px 60px rgba(50, 72, 102, 0.1);
}

.brand-panel {
  position: relative;
  display: flex;
  min-height: 620px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px clamp(38px, 4vw, 54px) 34px;
  border-right: 1px solid #dfe9f7;
  background: #edf5ff;
}

.login-brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #1f2a44;
  font-size: 18px;
  font-weight: 700;
}

.login-brand img,
.login-mobile-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.login-flow-lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.login-flow-lines span {
  position: absolute;
  top: calc(30% + var(--line-offset, 0px));
  left: -30%;
  width: 160%;
  height: 180px;
  border: 1px solid rgba(72, 130, 214, 0.11);
  border-radius: 50%;
  transform: rotate(-9deg);
}
.login-flow-lines span:nth-child(1) { --line-offset: 0px; animation-delay: -2s; }
.login-flow-lines span:nth-child(2) { --line-offset: 74px; }
.login-flow-lines span:nth-child(3) { --line-offset: 148px; }
.login-flow-lines span:nth-child(4) { --line-offset: 222px; }

.brand-copy {
  position: relative;
  z-index: 2;
  max-width: 440px;
}
.brand-eyebrow { margin-bottom: 12px !important; color: #4771b7 !important; font-size: 11px; font-weight: 700; }
.brand-copy h1 {
  margin: 0 0 14px;
  color: #203252;
  font-size: 36px;
  line-height: 1.22;
  letter-spacing: 0;
}

.brand-copy p,
.brand-footer {
  margin: 0;
  color: #647792;
  line-height: 1.8;
}

.brand-copy > p:last-child { font-size: 15px; }
.brand-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 20px; font-size: 11px; }

.login-panel {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 48px clamp(44px, 5vw, 68px);
  background: #ffffff;
}

.login-card {
  width: min(400px, 100%);
}

.login-mobile-brand { display: none; }
.login-heading { margin-bottom: 28px; }
.login-kicker { display: block; margin-bottom: 10px; color: #3f73c8; font-size: 11px; font-weight: 700; }
.login-heading h2 {
  margin: 0 0 9px;
  color: var(--text);
  font-size: 29px;
  letter-spacing: 0;
}

.muted {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.login-form {
  display: grid;
  gap: 18px;
}

.login-field { gap: 9px; }
.login-input-control { position: relative; }
.login-field .login-input-control > input { height: 50px; padding: 0 46px 0 45px; border-color: #d8e1ee; border-radius: 6px; background: #fbfcfe; }
.login-input-control > input:hover { border-color: #bdcaDC; background: #ffffff; }
.login-input-control > input:focus { border-color: #60a5fa; background: #ffffff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.login-input-control > input:-webkit-autofill,
.login-input-control > input:-webkit-autofill:hover,
.login-input-control > input:-webkit-autofill:focus {
  -webkit-text-fill-color: #26354d;
  box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 9999s ease-out;
}
.login-input-icon,
.login-password-toggle,
.login-submit-icon { display: inline-grid; place-items: center; }
.login-input-icon { position: absolute; z-index: 1; top: 50%; left: 15px; color: #8290a6; transform: translateY(-50%); pointer-events: none; }
.login-input-icon svg { width: 18px; height: 18px; }
.login-password-toggle { position: absolute; z-index: 2; top: 50%; right: 7px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 5px; color: #7f8ca1; background: transparent; transform: translateY(-50%); }
.login-password-toggle:hover { color: #2563eb; background: #eef5ff; }
.login-password-toggle svg { width: 18px; height: 18px; }
.login-form .form-message { min-height: 20px; margin: -3px 0 -5px; }
.login-submit-button { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; border-radius: 6px; font-weight: 700; }
.login-submit-button[data-loading="true"] .login-submit-icon { animation: login-submit-pulse 0.9s ease-in-out infinite alternate; }
.login-submit-icon svg { width: 17px; height: 17px; }
.login-system-name { margin: 24px 0 0; color: #a1aaba; font-size: 10px; text-align: center; }

@keyframes login-submit-pulse {
  from { opacity: 0.35; transform: translateX(-2px); }
  to { opacity: 1; transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .login-submit-button[data-loading="true"] .login-submit-icon { animation: none; }
}

/* Shared controls */
.field,
.compact-field {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.field label,
.compact-field label {
  color: #4b5870;
  font-size: 13px;
  font-weight: 600;
}

.field input,
.field select,
.field textarea,
.compact-field input,
.compact-field select {
  width: 100%;
  border: 1px solid #d9e0eb;
  border-radius: 5px;
  outline: none;
  color: var(--text);
  background: #ffffff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field input,
.field select {
  height: 44px;
  padding: 0 13px;
}

.field textarea {
  min-height: 96px;
  padding: 11px 13px;
  resize: vertical;
  line-height: 1.6;
}

.compact-field input,
.compact-field select {
  height: 40px;
  padding: 0 11px;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.compact-field input:focus,
.compact-field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.field-hint {
  color: #8a95a8;
  font-size: 12px;
  line-height: 1.5;
}

.primary-button,
.secondary-button,
.danger-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 17px;
  border-radius: 5px;
  font-weight: 600;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.primary-button {
  border: 1px solid var(--primary);
  color: #ffffff;
  background: var(--primary);
}

.primary-button:hover {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
}

.secondary-button {
  border: 1px solid #d9e0eb;
  color: #4d5b73;
  background: #ffffff;
}

.secondary-button:hover {
  border-color: #c7d1e2;
  background: #f8fbff;
}

.danger-button {
  border: 1px solid var(--danger);
  color: #ffffff;
  background: var(--danger);
}

.danger-button:hover {
  border-color: #df6554;
  background: #df6554;
}

.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled {
  cursor: default;
  opacity: 0.52;
}

.button-icon {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

.form-message {
  min-height: 22px;
  margin: 0;
  color: #d65f50;
  font-size: 13px;
  line-height: 1.6;
}

/* Admin shell */
.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 240px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  padding: 26px 18px 20px;
  border-right: 1px solid var(--line);
  background: #ffffff;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 2px 27px;
  color: #202c45;
  font-size: 18px;
  font-weight: 700;
}

.nav-section-label {
  margin: 7px 11px 9px;
  color: #99a3b5;
  font-size: 11px;
  font-weight: 700;
}

.nav-list {
  display: grid;
  gap: 5px;
  margin: 0;
}

.nav-item {
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border-radius: 5px;
  color: #647087;
  text-decoration: none;
  font-size: 14px;
}

.nav-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe5ef;
  border-radius: 5px;
  color: #7c879a;
  font-size: 11px;
  font-weight: 700;
}

.nav-icon svg { width: 17px; height: 17px; }
.button-icon svg { width: 15px; height: 15px; }
.icon-close svg, .builder-back svg { width: 18px; height: 18px; }
.question-canvas-actions svg, .visual-option-remove svg, .fill-blank-remove svg, .attachment-remove svg { width: 15px; height: 15px; }

.nav-item:hover {
  color: var(--primary);
  background: #f4f9ff;
}

.nav-item.active {
  color: #ffffff;
  background: var(--primary);
  font-weight: 600;
}

.nav-item.active .nav-icon {
  border-color: rgba(255, 255, 255, 0.46);
  color: #ffffff;
}

.sidebar-account {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding: 17px 8px 0;
  border-top: 1px solid var(--line);
}

.avatar {
  display: inline-flex;
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #dbe3ef;
  color: transparent;
  background: #ffffff;
  font-weight: 700;
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sidebar-account-copy {
  min-width: 0;
}

.sidebar-account strong,
.sidebar-account span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account strong {
  font-size: 13px;
}

.sidebar-account span {
  margin-top: 3px;
  color: #8b96a9;
  font-size: 12px;
}

.main-content {
  min-width: 0;
  padding: 0 34px 48px;
}

.topbar {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.topbar-title {
  display: grid;
  gap: 3px;
}

.topbar h1 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  letter-spacing: 0;
}

.topbar-context {
  color: #929cad;
  font-size: 12px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-user {
  color: #68758b;
  font-size: 13px;
}

.content-section {
  width: min(1220px, 100%);
  margin: 0 auto;
  padding-top: 32px;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.content-section h2 {
  margin: 0;
  color: var(--text);
  font-size: 27px;
  letter-spacing: 0;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.section-description {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

/* Dashboard */
.welcome-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.5fr);
  gap: 24px;
  align-items: center;
  min-height: 168px;
  padding: 29px 32px;
  border: 1px solid #dfe7f8;
  border-radius: 7px;
  background: #eef4ff;
}

.welcome-panel h2 {
  margin: 0 0 10px;
  font-size: 27px;
}

.welcome-panel p {
  max-width: 600px;
  margin: 0;
  color: #687995;
  line-height: 1.7;
}

.welcome-graphic {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  gap: 12px;
  justify-content: end;
  align-items: end;
  height: 90px;
  padding-right: 14px;
}

.welcome-graphic span {
  display: block;
  border-radius: 5px 5px 0 0;
  background: var(--primary);
}

.welcome-graphic span:nth-child(1) {
  height: 48px;
  background: var(--sky);
}

.welcome-graphic span:nth-child(2) {
  height: 82px;
}

.welcome-graphic span:nth-child(3) {
  height: 64px;
  background: var(--success);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.metric-card,
.dashboard-panel {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.metric-card {
  display: flex;
  min-height: 112px;
  align-items: center;
  gap: 15px;
  padding: 20px;
}

.metric-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 700;
}
.metric-icon svg { width: 21px; height: 21px; }

.metric-card:nth-child(2) .metric-icon {
  color: #1389c5;
  background: #eaf7fe;
}

.metric-card:nth-child(3) .metric-icon {
  color: #178b70;
  background: #e8faf5;
}

.metric-card > div > span,
.metric-card strong {
  display: block;
}

.metric-card > div > span {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
}

.metric-card strong {
  overflow-wrap: anywhere;
  font-size: 18px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 18px;
  margin-top: 18px;
}

.dashboard-panel {
  min-height: 230px;
  padding: 23px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-heading h3 {
  margin: 0;
  font-size: 16px;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.quick-link {
  display: grid;
  min-height: 76px;
  align-content: center;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
}

.quick-link:hover {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.quick-link strong {
  color: #36435b;
  font-size: 14px;
}

.quick-link span {
  color: #909bad;
  font-size: 12px;
}

.system-list {
  display: grid;
  gap: 0;
}

.system-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #f0f3f8;
  color: #667288;
  font-size: 13px;
}

.system-row:last-child {
  border-bottom: 0;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--success);
}

/* Management tables */
.filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.48fr) minmax(125px, 0.36fr) auto;
  gap: 13px;
  align-items: end;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px 7px 0 0;
  background: #ffffff;
}

.account-filter-bar { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(145px, 0.45fr)) auto; }
.account-role-tabs { display: flex; min-height: 52px; align-items: flex-end; gap: 2px; padding: 0 18px; border: 1px solid var(--line); border-bottom: 0; background: #ffffff; }
.account-role-tab { position: relative; min-height: 51px; padding: 0 18px; border: 0; color: #77859a; background: transparent; font-size: 12px; font-weight: 600; }
.account-role-tab::after { position: absolute; right: 14px; bottom: 0; left: 14px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; content: ""; }
.account-role-tab:hover { color: #42516a; background: #fafbfe; }
.account-role-tab.active { color: var(--primary-dark); }
.account-role-tab.active::after { background: var(--primary); }
.account-role-tabs + .account-filter-bar { border-top: 1px solid #eef1f5; }

.account-table {
  min-width: 1120px;
}
.account-user-cell { display: flex; min-width: 150px; align-items: center; gap: 10px; }
.account-user-cell strong { overflow: hidden; color: #34435b; text-overflow: ellipsis; white-space: nowrap; }
.account-gender-avatar { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border-radius: 50%; }
.account-gender-avatar svg, .candidate-avatar svg, #supervision-person-avatar svg { width: 18px; height: 18px; }
.gender-male { color: #3565b6 !important; background: #e9f1ff !important; }
.gender-female { color: #b64f78 !important; background: #fff0f5 !important; }
.gender-unspecified { color: #6f7c90 !important; background: #eef1f5 !important; }

.filter-actions {
  display: flex;
  gap: 8px;
}

.compact-button {
  min-height: 40px;
  padding: 0 14px;
}

.table-surface {
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.table-header,
.pagination-bar {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
}

.table-header {
  border-bottom: 1px solid var(--line);
}

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 18px;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  vertical-align: middle;
}

th {
  color: #707c91;
  background: #fafbfe;
  font-size: 12px;
  font-weight: 600;
}

td {
  color: #46536a;
  font-size: 13px;
}

tbody tr:hover {
  background: #fbfcff;
}

.action-column {
  width: 132px;
}

.table-actions {
  display: flex;
  gap: 14px;
  white-space: nowrap;
}

.text-button {
  padding: 2px 0;
  border: 0;
  color: var(--primary);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}

.text-button:hover {
  text-decoration: underline;
}

.danger-text {
  color: #df6655;
}

.status-badge,
.type-badge,
.difficulty-badge,
.role-badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.role-badge.super_admin {
  color: #bf5147;
  background: #fff0ed;
}

.role-badge.paper_teacher {
  color: #2563eb;
  background: #eff6ff;
}

.role-badge.reviewer {
  color: #158167;
  background: #e7f9f4;
}

.role-badge.examinee {
  color: #68758a;
  background: #eef1f5;
}

.status-badge.active {
  color: #158167;
  background: #e7f9f4;
}

.status-badge.disabled {
  color: #d05c4d;
  background: #fff0ed;
}

.type-badge {
  color: #2563eb;
  background: #eff6ff;
}

.difficulty-badge.easy {
  color: #158167;
  background: #e7f9f4;
}

.difficulty-badge.medium {
  color: #b47616;
  background: #fff6e5;
}

.difficulty-badge.hard {
  color: #d05c4d;
  background: #fff0ed;
}

.content-preview {
  display: -webkit-box;
  max-width: 440px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.55;
}

.empty-state {
  padding: 52px 20px;
  color: var(--muted);
  text-align: center;
}

.pagination-bar {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  color: #707c91;
  font-size: 12px;
}

/* Dialogs */
.modal-dialog {
  width: min(580px, calc(100% - 32px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: auto;
  border: 1px solid #dbe2ee;
  border-radius: 7px;
  color: var(--text);
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(36, 50, 77, 0.2);
}

.wide-dialog {
  width: min(780px, calc(100% - 32px));
}

.modal-dialog::backdrop {
  background: rgba(34, 46, 69, 0.42);
}

.modal-content {
  margin: 0;
  padding: 0;
}

.modal-header,
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 23px;
}

.modal-header {
  position: sticky;
  z-index: 2;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.modal-header h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: 0;
}

.modal-footer {
  position: sticky;
  z-index: 2;
  bottom: 0;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.icon-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: #7b879a;
  background: transparent;
  font-size: 25px;
  line-height: 1;
}

.icon-close:hover {
  color: var(--text);
  background: #f2f5fa;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 23px;
}

.field-span-2 {
  grid-column: 1 / -1;
}

.form-grid + .form-message,
.modal-content > .field,
.modal-content > .validation-list,
.modal-content > .form-message,
.confirm-dialog .modal-content > p,
.import-help {
  margin-right: 23px;
  margin-left: 23px;
}

.validation-list {
  max-height: 180px;
  margin-top: 16px;
  overflow: auto;
  border: 1px solid #f1c8c2;
  border-radius: 5px;
  color: #b64e41;
  background: #fff7f5;
  font-size: 13px;
}

.validation-list ul {
  margin: 0;
  padding: 13px 16px 13px 34px;
}

.confirm-dialog {
  width: min(440px, calc(100% - 32px));
}

.toast {
  position: fixed;
  z-index: 20;
  right: 24px;
  bottom: 24px;
  max-width: min(360px, calc(100% - 48px));
  padding: 13px 16px;
  border: 1px solid #bce9dd;
  border-radius: 6px;
  color: #14745d;
  background: #edfbf7;
  box-shadow: 0 12px 32px rgba(36, 50, 77, 0.14);
  font-size: 13px;
  font-weight: 600;
}

.toast[data-type="error"] {
  border-color: #f1c8c2;
  color: #bd5042;
  background: #fff5f3;
}

.standalone-page {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--canvas);
}

.standalone-card {
  width: min(560px, 100%);
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.standalone-card h1 {
  margin: 0 0 12px;
  font-size: 27px;
  letter-spacing: 0;
}

.standalone-card .secondary-button {
  margin-top: 28px;
}

/* Question bank */
.question-filter-bar {
  grid-template-columns: minmax(180px, 1.35fr) repeat(3, minmax(100px, 0.75fr));
}
.question-bank-content .question-filter-bar { margin-top: 0; padding: 12px 13px; border-radius: 6px 6px 0 0; background: #ffffff; }
.question-bank-content .question-filter-bar .filter-actions { grid-column: 1 / -1; justify-content: flex-end; }

.question-bank-workspace {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 610px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 7px 24px rgba(41, 58, 84, .05);
}

.question-folder-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #f7f9fc;
}

.question-folder-panel > header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px 11px 15px;
  border-bottom: 1px solid var(--line);
}

.question-folder-panel > header strong,
.question-folder-panel > header span { display: block; }
.question-folder-panel > header strong { color: #31415a; font-size: 13px; }
.question-folder-panel > header span { margin-top: 3px; color: #8a97aa; font-size: 10px; }
.question-folder-header-actions, .folder-action-group { display: flex; align-items: center; gap: 6px; }
.question-folder-header-actions .icon-tool-button { width: 31px; height: 31px; }
.question-folder-tree { display: grid; align-content: start; flex: 1; gap: 4px; padding: 9px 8px 12px; overflow-y: auto; }
.question-folder-group, .question-folder-children { display: grid; gap: 2px; }
.question-folder-root-row { display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; }
.question-folder-toggle { display: grid; width: 27px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 4px; color: #8491a3; background: transparent; }
.question-folder-toggle:hover { color: #315fae; background: #eaf1fb; }
.question-folder-toggle svg { width: 14px; height: 14px; }
.question-folder-children { margin: 1px 0 3px 13px; padding-left: 13px; border-left: 1px solid #dfe6f0; }
.question-folder-children[hidden] { display: none; }
.folder-empty-hint { padding: 5px 10px; color: #a1adbc; font-size: 9px; }

.question-folder-node {
  display: grid;
  width: 100%;
  min-height: 38px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  color: #52627a;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.question-folder-node.child { padding-left: 9px; }
.question-folder-node:hover { color: #315fae; background: #edf5ff; }
.question-folder-node.active { color: #2459bd; background: #e6f0ff; font-weight: 700; }
.question-folder-node > span:first-child { display: grid; width: 18px; height: 18px; place-items: center; }
.question-folder-node > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.question-folder-node small { color: #93a0b2; font-size: 9px; font-weight: 500; }

.question-folder-panel > footer { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px 9px 14px; border-top: 1px solid var(--line); background: #ffffff; }
.folder-selection-label { min-width: 0; overflow: hidden; color: #65738a; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.question-bank-content { min-width: 0; padding: 15px 14px 18px; background: #fcfdff; }
.question-bank-content .table-surface { border-radius: 6px; }
.question-current-folder { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 8px; padding: 0 3px; }
.question-current-folder span { display: block; margin-bottom: 3px; color: #929dae; font-size: 9px; }
.question-current-folder strong { color: #30425f; font-size: 15px; }
.question-current-folder small { color: #8290a5; font-size: 10px; text-align: right; }

.icon-tool-button { display: inline-grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid #dce4ef; border-radius: 5px; color: #536987; background: #ffffff; cursor: pointer; }
.icon-tool-button:hover { color: var(--primary); border-color: #b9cbec; background: #f4f8ff; }
.icon-tool-button.danger:hover { color: #c9574d; border-color: #f0c2bd; background: #fff4f2; }
.icon-tool-button svg, [data-icon] svg { width: 17px; height: 17px; }
.import-target-folder { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid #dfe8f5; border-radius: 5px; background: #f5f9ff; color: #687a94; font-size: 11px; }
.import-target-folder strong { color: #315fae; }

.question-table-surface { border-top: 0; border-radius: 0 0 6px 6px !important; }
.question-table-header { min-height: 47px; padding-top: 7px; padding-bottom: 7px; }
.question-batch-bar { display: flex; min-height: 45px; align-items: center; gap: 14px; padding: 7px 14px; border-bottom: 1px solid #dfe7f1; background: #f3f7fc; color: #64738a; font-size: 10px; }
.question-batch-bar[hidden] { display: none; }
.question-select-all { display: inline-flex; align-items: center; gap: 7px; color: #4f6078; font-weight: 650; cursor: pointer; }
.question-batch-bar > span { margin-right: auto; }
.question-batch-actions { display: flex; align-items: center; gap: 8px; }
.question-batch-bar .compact-button { min-height: 32px; gap: 6px; padding: 0 10px; }
.question-batch-bar svg { width: 14px; height: 14px; }
.question-table { min-width: 600px; table-layout: fixed; }
.question-table th,
.question-table td { padding: 12px 8px; }
.question-table th:nth-child(2) { width: 96px; }
.question-table th:nth-child(3) { width: auto; }
.question-table th:nth-child(4) { width: 58px; }
.question-table th:nth-child(5) { width: 82px; }
.question-table th:nth-child(6) { width: 45px; }
.question-table th:nth-child(7) { width: 82px; }
.question-table th:nth-child(8) { width: 72px; }
.question-table .content-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.question-select-column { width: 38px; padding-right: 5px !important; padding-left: 9px !important; text-align: center; }
.question-row-select, #select-all-questions { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.question-table tbody tr.selected td { background: #f2f7ff; }
.question-table td.table-actions { display: table-cell; white-space: nowrap; text-align: center; }
.question-table td.table-actions .question-row-action + .question-row-action { margin-left: 5px; }
.question-table th:last-child,
.question-table td:last-child { position: sticky; right: 0; z-index: 1; background: #ffffff; box-shadow: -7px 0 12px rgba(47, 65, 94, .04); }
.question-table th:last-child { z-index: 2; background: #fafbfe; }
.question-table tbody tr:hover td:last-child { background: #fbfcff; }
.question-table tbody tr.selected td:last-child { background: #f2f7ff; }
.question-row-action { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid #dce4ef; border-radius: 5px; color: #536987; background: #ffffff; }
.question-row-action:hover { color: #315fae; border-color: #b9cbec; background: #f4f8ff; }
.question-row-action.danger:hover { color: #c9574d; border-color: #f0c2bd; background: #fff4f2; }
.question-row-action svg { width: 14px; height: 14px; }
.question-dialog-hint { margin: 18px 23px 14px; padding: 11px 13px; border: 1px solid #dfe7f1; border-radius: 5px; color: #64758e; background: #f6f9fc; font-size: 11px; line-height: 1.55; }
#question-folder-dialog .eyebrow, #question-move-dialog .eyebrow { margin-bottom: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

.question-form-grid {
  padding-bottom: 18px;
}

.option-editor {
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafbfe;
}

.option-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.option-heading strong,
.option-heading span {
  display: block;
}

.option-heading strong {
  margin-bottom: 4px;
  color: #4b5870;
  font-size: 13px;
}

.option-list {
  display: grid;
  gap: 9px;
}

.option-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}

.option-row input {
  width: 100%;
  height: 39px;
  padding: 0 10px;
  border: 1px solid #d9e0eb;
  border-radius: 5px;
  outline: none;
  color: var(--text);
  background: #ffffff;
}

.option-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.option-key {
  text-align: center;
  font-weight: 700;
}

.remove-option-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: #d66657;
  background: transparent;
  font-size: 20px;
}

.remove-option-button:hover {
  background: #fff0ed;
}

.import-help {
  margin-top: 20px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #dce5f8;
  border-radius: 5px;
  background: #f4f9ff;
  font-size: 13px;
}

.modal-content > .import-help + .field {
  margin-top: 0;
}

.notice-band {
  margin-top: 22px;
  padding: 15px 17px;
  border: 1px solid #dce5f8;
  border-radius: 6px;
  color: #596b8c;
  background: #f3f7ff;
  line-height: 1.6;
}

/* Exam projects */
.paper-project-section {
  padding-bottom: 40px;
}

.paper-project-filter {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 170px auto auto 1fr;
  gap: 10px;
  align-items: end;
  margin-top: 25px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.paper-result-count {
  align-self: center;
  justify-self: end;
  color: var(--muted);
  font-size: 13px;
}

.paper-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.paper-project-card {
  display: grid;
  min-height: 278px;
  grid-template-rows: auto auto auto auto 1fr auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  background: #ffffff;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.paper-project-card:hover,
.paper-project-card:focus-visible {
  border-color: #cbd7f6;
  box-shadow: 0 12px 30px rgba(39, 58, 96, 0.1);
  transform: translateY(-2px);
}

.paper-card-top,
.paper-card-footer,
.paper-card-actions,
.paper-card-metrics {
  display: flex;
  align-items: center;
}

.paper-card-top,
.paper-card-footer {
  justify-content: space-between;
  gap: 12px;
}

.paper-project-mark {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #ffffff;
  background: var(--primary);
  font-size: 13px;
  font-weight: 700;
}

.paper-status {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.paper-status.draft {
  color: #66748b;
  background: #f0f3f8;
}

.paper-status.published {
  color: #158167;
  background: #e7f9f4;
}

.paper-status.closed {
  color: #c45d4f;
  background: #fff0ed;
}

.paper-project-card h3 {
  margin: 18px 0 8px;
  overflow: hidden;
  color: #2e3a51;
  font-size: 17px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paper-card-time {
  margin: 0;
  color: #8a95a8;
  font-size: 12px;
  line-height: 1.6;
}

.paper-card-metrics {
  gap: 20px;
  align-self: center;
  padding: 16px 0;
}

.paper-card-metrics span {
  color: #8a95a8;
  font-size: 12px;
}

.paper-card-metrics strong {
  margin-right: 3px;
  color: #3d4a61;
  font-size: 16px;
}

.paper-card-audience {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-self: start;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e2e9f4;
  border-radius: 5px;
  color: #586a84;
  background: #f7faff;
  font-size: 11px;
}

.paper-card-audience > span:first-child {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #2563eb;
}

.paper-card-audience > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paper-card-audience small {
  color: #21745f;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.paper-card-footer {
  padding-top: 13px;
  border-top: 1px solid #f0f3f8;
  color: #98a2b3;
  font-size: 11px;
}

.paper-card-actions {
  gap: 3px;
}

.paper-card-action {
  display: inline-grid;
  width: 31px;
  min-width: 31px;
  height: 31px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: #65738b;
  background: transparent;
  cursor: pointer;
}

.paper-card-action svg { width: 15px; height: 15px; }

.paper-card-action:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.paper-card-action.danger:hover {
  color: #d45e50;
  background: #fff0ed;
}

.paper-empty-state {
  display: grid;
  min-height: 330px;
  place-items: center;
  align-content: center;
  gap: 9px;
  margin-top: 20px;
  border: 1px dashed #d7deeb;
  border-radius: 7px;
  color: #68758b;
  background: #ffffff;
}

.paper-empty-state p {
  margin: 0;
  color: #9aa4b5;
  font-size: 13px;
}

.empty-illustration {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  border-radius: 50%;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 25px;
}

.paper-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
  color: var(--muted);
  font-size: 12px;
}

.template-choice-row {
  display: flex;
  gap: 10px;
  margin: 0 23px 18px;
}

.template-choice-row + .field {
  margin: 0 23px;
}

/* Visual paper builder */
.paper-builder-page {
  overflow: hidden;
  background: #f3f5f9;
}

.paper-builder-shell {
  min-height: 100vh;
}

.paper-builder-header {
  display: grid;
  height: 66px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.builder-title-area,
.builder-header-actions,
.builder-view-tabs,
.paper-builder-subbar > div,
.property-type-line {
  display: flex;
  align-items: center;
}

.builder-title-area {
  min-width: 0;
  gap: 12px;
}

.builder-title-area > div {
  min-width: 0;
}

.builder-title-area strong,
.builder-title-area span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-title-area strong {
  max-width: 360px;
  font-size: 15px;
}

.builder-title-area span {
  margin-top: 3px;
  color: #96a0b2;
  font-size: 11px;
}

.builder-back {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #66738a;
  text-decoration: none;
  font-size: 20px;
}

.builder-back:hover {
  background: #f2f5fa;
}

.builder-view-tabs {
  z-index: 2;
  min-width: 210px;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border-radius: 6px;
  background: #f5f7fb;
}

.builder-view-tab {
  min-width: 64px;
  height: 34px;
  padding: 0 19px;
  border: 0;
  border-radius: 5px;
  color: #768299;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.builder-view-tab.active {
  color: var(--primary);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(39, 58, 96, 0.08);
}

.builder-header-actions {
  min-width: 0;
  justify-content: flex-end;
  gap: 11px;
}

@media (min-width: 721px) and (max-width: 1040px) {
  .paper-builder-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .builder-title-area { gap: 8px; }
  .builder-title-area strong { max-width: 155px; }
  .builder-title-area span,
  .builder-header-actions .paper-status { display: none; }
  .builder-view-tabs { min-width: 198px; }
  .builder-view-tab { min-width: 60px; padding-right: 12px; padding-left: 12px; }
  .builder-header-actions .primary-button { padding-right: 12px; padding-left: 12px; }
}

.paper-builder-subbar {
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  color: #68758b;
  font-size: 12px;
}

.paper-builder-subbar > span {
  color: #354159;
  font-size: 13px;
  font-weight: 700;
}

.paper-builder-subbar > div {
  gap: 11px;
}

.subbar-divider {
  width: 1px;
  height: 15px;
  background: var(--line);
}

.builder-edit-view {
  display: grid;
  height: calc(100vh - 118px);
  grid-template-columns: 246px minmax(560px, 1fr);
}

.builder-palette,
.builder-property-panel {
  overflow-y: auto;
  background: #ffffff;
}

.builder-palette {
  padding: 20px 16px;
  border-right: 1px solid var(--line);
}

.builder-property-panel {
  padding: 20px;
  border-left: 1px solid var(--line);
}

.builder-panel-heading strong,
.builder-panel-heading span {
  display: block;
}

.builder-panel-heading strong {
  color: #39465d;
  font-size: 14px;
}

.builder-panel-heading span {
  margin-top: 5px;
  color: #97a1b2;
  font-size: 11px;
  line-height: 1.5;
}

.question-toolbox {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 15px;
}

.question-toolbox button {
  display: flex;
  min-width: 0;
  min-height: 66px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 4px;
  border: 1px solid #e1e7f0;
  border-radius: 5px;
  color: #58677f;
  background: #ffffff;
}

.question-toolbox button:hover {
  border-color: #bcd0fa;
  color: var(--primary);
  background: #f6f9ff;
}

.question-toolbox button:disabled { opacity: 0.55; }

.question-toolbox button > span {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #2f78dc;
  background: #eaf3ff;
  font-size: 13px;
  font-weight: 700;
}

.question-toolbox button:nth-child(3n + 2) > span { color: #16846a; background: #e9f8f3; }
.question-toolbox button:nth-child(3n) > span { color: #c05d4f; background: #fff0ed; }
.question-toolbox button strong { font-size: 10px; font-weight: 600; white-space: nowrap; }

.palette-section-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  color: #8d98aa;
  font-size: 10px;
}

.palette-section-divider::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.build-method-list {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.build-method {
  display: grid;
  min-height: 66px;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: left;
  background: #ffffff;
}

.build-method:hover,
.build-method.primary-method:hover {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.build-method.primary-method {
  border-color: #dbeafe;
  background: #f4f9ff;
}

.build-method > span:last-child,
.build-method strong,
.build-method small {
  display: block;
}

.build-method strong {
  color: #3d4960;
  font-size: 13px;
}

.build-method small {
  margin-top: 4px;
  color: #9aa4b5;
  font-size: 10px;
}

.method-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 11px;
  font-weight: 700;
}

.method-icon.sky { color: #1688c3; background: #eaf7fe; }
.method-icon.green { color: #16846a; background: #e8faf5; }
.method-icon.coral { color: #cf6253; background: #fff0ed; }

.field-help {
  display: block;
  margin-top: 5px;
  color: #98a2b3;
  font-size: 10px;
  line-height: 1.5;
}

.palette-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
  padding: 15px;
  border-top: 1px solid var(--line);
}

.palette-summary > span {
  grid-column: 1 / -1;
  color: #8d98aa;
  font-size: 11px;
}

.palette-summary div {
  padding: 10px;
  border-radius: 5px;
  background: #f7f9fc;
}

.palette-summary strong,
.palette-summary small {
  display: block;
}

.palette-summary strong { font-size: 18px; }
.palette-summary small { margin-top: 3px; color: #96a0b2; font-size: 10px; }

.paper-canvas-wrap {
  overflow-y: auto;
  padding: 18px clamp(18px, 3vw, 44px) 44px;
  background: #f3f5f9;
}

.paper-canvas {
  width: min(980px, 100%);
  min-height: calc(100vh - 180px);
  margin: 0 auto;
  padding: 31px 34px 28px;
  border: 1px solid #edf0f5;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(39, 58, 96, 0.04);
}

.paper-canvas-header {
  position: relative;
  min-height: 105px;
  padding: 0 90px 24px 0;
  border-bottom: 1px solid #eef2f7;
  text-align: center;
}

.paper-canvas-header p {
  margin: 0 0 8px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
}

.paper-canvas-header h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.paper-canvas-header > div:first-child > span {
  display: block;
  margin-top: 9px;
  color: #8c97a9;
  font-size: 11px;
}

.paper-score-block {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  align-content: center;
  border-radius: 7px;
  color: #ffffff;
  background: var(--primary);
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.22);
}

.paper-score-block small { font-size: 9px; }
.paper-score-block strong { margin-top: 2px; font-size: 21px; }

.paper-canvas-empty {
  display: grid;
  min-height: 430px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #57647c;
}

.paper-canvas-empty p {
  margin: 0;
  color: #a0a9b9;
  font-size: 12px;
}

.canvas-empty-mark {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  border: 1px dashed #bfdbfe;
  border-radius: 7px;
  color: var(--primary);
  background: #f4f9ff;
  font-size: 24px;
}

.paper-question-list {
  display: grid;
  gap: 13px;
  padding: 24px 0;
}

.paper-question-item {
  position: relative;
  padding: 18px 54px 18px 46px;
  border: 1px solid #e9edf4;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
}

.paper-question-item[draggable="true"],
.paper-section-item[draggable="true"] { cursor: grab; }
.paper-question-item.dragging,
.paper-section-item.dragging { opacity: 0.46; cursor: grabbing; }
.paper-question-item.drag-before::before,
.paper-section-item.drag-before::before,
.paper-question-item.drag-after::after,
.paper-section-item.drag-after::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;
  height: 3px;
  border-radius: 3px;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
  content: "";
}
.paper-question-item.drag-before::before,
.paper-section-item.drag-before::before { top: -8px; }
.paper-question-item.drag-after::after,
.paper-section-item.drag-after::after { bottom: -8px; }

.paper-drag-handle {
  position: absolute;
  top: 17px;
  left: 13px;
  display: inline-flex;
  width: 22px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #a2adbd;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.paper-drag-handle svg { width: 17px; height: 17px; }
.paper-question-item:hover > .paper-drag-handle,
.paper-section-item:hover > .paper-drag-handle { color: var(--primary); }
.paper-item-pointer-dragging,
.paper-item-pointer-dragging * { cursor: grabbing !important; user-select: none !important; }

.paper-question-item:hover {
  border-color: #d5def5;
}

.paper-question-item.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.paper-section-item {
  position: relative;
  padding: 16px 54px 16px 45px;
  border: 1px solid #cfe0f5;
  border-left: 4px solid #3b82f6;
  border-radius: 5px;
  background: #f6faff;
}

.paper-section-fields { display: grid; gap: 8px; }
.paper-section-fields input { min-height: 40px; padding: 0 10px; border: 1px solid #d4e0ef; border-radius: 4px; color: #2f4770; background: #ffffff; font-size: 15px; font-weight: 700; }
.paper-section-fields textarea { width: 100%; min-height: 58px; resize: vertical; padding: 9px 10px; border: 1px solid #dce5f0; border-radius: 4px; color: #60708a; background: #ffffff; line-height: 1.55; }
.paper-section-fields .primary-button { width: max-content; }
.paper-section-preview { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 18px; }
.paper-section-preview-copy { min-width: 0; }
.paper-section-preview h3 { margin: 0; color: #2f4770; font-size: 16px; line-height: 1.45; }
.paper-section-preview p { margin: 6px 0 0; color: #718099; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.paper-section-preview p:empty { display: none; }
.paper-section-preview .secondary-button { flex: 0 0 auto; }
.paper-section-preview .secondary-button span { display: inline-flex; margin-right: 6px; vertical-align: middle; }
.paper-section-preview .secondary-button svg { width: 15px; height: 15px; }
.paper-section-field-actions { display: flex; justify-content: flex-end; gap: 8px; }
.toolbox-section-button { grid-column: 1 / -1; }
.toolbox-section-button > span { color: #2f69cf !important; background: #e8f2ff !important; }

.question-item-heading {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #3a465d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.65;
}

.question-index {
  color: var(--primary);
  white-space: nowrap;
}

.question-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 9px 0 13px 28px;
  color: #8c97a8;
  font-size: 10px;
}

.question-item-meta strong { color: var(--primary); }

.question-option-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-left: 28px;
}

.question-option-preview span {
  min-height: 36px;
  padding: 9px 11px;
  border: 1px solid #edf0f5;
  border-radius: 5px;
  color: #657188;
  font-size: 11px;
  line-height: 1.45;
}

.question-option-block {
  display: grid;
  gap: 6px;
}

.question-answer-preview {
  margin: 8px 0 0 28px;
  color: #5b9a81;
  font-size: 10px;
}

.inline-blank-display {
  display: inline-flex;
  min-width: 72px;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  padding: 1px 10px;
  border-bottom: 2px solid #60a5fa;
  color: var(--primary);
  background: #f4f9ff;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

.question-file-placeholder {
  display: grid;
  min-height: 66px;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 2px 11px;
  margin: 12px 0 0 28px;
  padding: 10px 13px;
  border: 1px dashed #cbd7ee;
  border-radius: 6px;
  background: #f8fbff;
}

.question-file-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  grid-row: 1 / 3;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--primary);
  background: #eaf4ff;
  font-size: 18px;
}

.question-file-placeholder strong { color: #4d5b73; font-size: 11px; }
.question-file-placeholder small { color: #96a1b3; font-size: 10px; }

.question-canvas-actions {
  position: absolute;
  top: 13px;
  right: 10px;
  display: grid;
  gap: 4px;
}

.question-canvas-actions button {
  width: 30px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: #8b95a6;
  background: #f6f8fb;
  font-size: 12px;
}

.question-canvas-actions button:hover { color: var(--primary); background: var(--primary-soft); }
.question-canvas-actions button.danger:hover { color: #d45e50; background: #fff0ed; }
.question-canvas-actions button:disabled { color: #c8cfda; background: #fafbfc; cursor: not-allowed; }

.paper-canvas-footer {
  padding-top: 18px;
  border-top: 1px solid #eef2f7;
  text-align: center;
}

.paper-canvas-footer button { width: 240px; }

.property-empty {
  display: grid;
  min-height: 320px;
  place-items: center;
  align-content: center;
  gap: 7px;
  text-align: center;
}

.property-empty > span {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 700;
}

.property-empty strong { margin-top: 7px; color: #536078; font-size: 13px; }
.property-empty p { margin: 0; color: #9ba5b5; font-size: 11px; line-height: 1.6; }

#question-property-form {
  display: grid;
  gap: 15px;
  margin-top: 18px;
}

.property-type-line { gap: 7px; }
#question-property-form .primary-button { width: 100%; }

.paper-question-item.editing {
  padding: 0;
  border-color: #93c5fd;
  cursor: default;
  box-shadow: 0 8px 24px rgba(52, 79, 139, 0.08);
}

.paper-question-item.editing > .paper-drag-handle { display: none; }

.paper-question-item.editing .question-card-preview {
  display: none;
}

.paper-question-item.editing .question-canvas-actions {
  display: none;
}

.inline-question-editor {
  gap: 0 !important;
  margin: 0 !important;
  cursor: default;
  background: #ffffff;
}

.inline-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid #e8edf5;
  background: #f8fbff;
}

.inline-editor-header small {
  display: block;
  margin-bottom: 7px;
  color: #7f8ca2;
  font-size: 10px;
}

.inline-editor-close,
.visual-option-remove,
.fill-blank-remove,
.attachment-remove {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: #8a95a7;
  background: transparent;
  font-size: 17px;
}

.inline-editor-close:hover,
.visual-option-remove:hover,
.fill-blank-remove:hover,
.attachment-remove:hover {
  color: #d55f51;
  background: #fff0ed;
}

.inline-editor-grid {
  display: grid;
  grid-template-columns: 120px 140px minmax(240px, 1fr);
  gap: 14px;
  padding: 18px;
}

.editor-label-row,
.asset-add-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.editor-label-row > label { margin: 0; }

.asset-add-actions { justify-content: flex-end; flex-wrap: wrap; }

.asset-add-actions button,
.visual-option-asset-button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #dbe3f1;
  border-radius: 4px;
  color: #5e6f8b;
  background: #f8fbff;
  font-size: 10px;
}

.asset-add-actions button:hover,
.visual-option-asset-button:hover {
  border-color: #bfdbfe;
  color: var(--primary);
  background: #eef3ff;
}

.inline-editor-content,
.inline-editor-wide {
  grid-column: 1 / -1;
}

.inline-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 13px 18px 17px;
  border-top: 1px solid #edf1f6;
}

.inline-editor-actions .primary-button,
.inline-editor-actions .secondary-button {
  width: auto !important;
  min-width: 96px;
}

.inline-question-editor > .form-message {
  margin: 0 18px;
}

#property-score[readonly] {
  color: var(--primary);
  background: #f4f9ff;
  font-weight: 700;
}

.visual-option-heading,
.fill-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.visual-option-heading label { margin: 0; }

.visual-choice-option-list,
.fill-blank-list {
  display: grid;
  gap: 8px;
}

.visual-choice-option-row {
  display: grid;
  min-height: 44px;
  grid-template-columns: 24px 30px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 8px;
  padding: 5px 7px 5px 11px;
  border: 1px solid #e4e9f1;
  border-radius: 5px;
  background: #ffffff;
}

.visual-option-assets {
  display: grid;
  grid-column: 3 / -1;
  gap: 6px;
}

.question-asset-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.question-asset-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e1e7f0;
  border-radius: 6px;
  background: #f8fafc;
}

.question-asset-card > header {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 6px 36px 6px 9px;
}

.question-asset-card > header strong,
.question-asset-card > header small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.question-asset-card > header strong { color: #4b5870; font-size: 10px; }
.question-asset-card > header small { margin-top: 2px; color: #929dad; font-size: 9px; }
.question-asset-card .attachment-type-mark { flex: 0 0 auto; }

.question-asset-remove {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 5px;
}

.question-asset-body {
  display: grid;
  min-height: 180px;
  place-items: center;
  overflow: hidden;
  border-top: 1px solid #e7ebf2;
  color: #8a96a8;
  background: #ffffff;
  font-size: 10px;
}

.question-asset-body img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 180px;
  max-height: 420px;
  border: 0;
  object-fit: contain;
  background: #ffffff;
}

.question-asset-body video,
.question-asset-body iframe {
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  border: 0;
  object-fit: contain;
  background: #f4f6f9;
}

.question-asset-body audio { width: calc(100% - 18px); }
.question-asset-download { color: var(--primary); text-decoration: none; }
.question-card-assets { margin: 12px 0 0 28px; }
.question-card-assets .question-asset-body { min-height: 72px; }

.visual-choice-option-row:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.visual-option-correct {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
}

.visual-option-key,
.fill-blank-number {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--primary);
  background: #eff6ff;
  font-size: 11px;
  font-weight: 700;
}

.visual-option-text {
  width: 100%;
  min-height: 34px;
  padding: 0 7px;
  border: 0;
  outline: 0;
}

.visual-option-remove:disabled { opacity: 0.35; cursor: not-allowed; }

.judge-answer-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.judge-answer-picker label {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0 13px;
  border: 1px solid #e1e7f0;
  border-radius: 5px;
  color: #59677f;
  cursor: pointer;
}

.judge-answer-picker input { accent-color: var(--primary); }

.fill-content-composer {
  border: 1px solid #dfe5ee;
  border-radius: 5px;
  background: #ffffff;
}

.fill-composer-toolbar {
  min-height: 46px;
  margin: 0;
  padding: 7px 9px 7px 13px;
  border-bottom: 1px solid #e8edf4;
  color: #7e899d;
  background: #f8fbff;
  font-size: 10px;
}

.fill-content-editor {
  min-height: 96px;
  padding: 13px;
  outline: 0;
  color: #354159;
  font-size: 13px;
  line-height: 2;
  white-space: pre-wrap;
}

.fill-content-editor:focus {
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.fill-blank-token {
  display: inline-flex;
  min-width: 76px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  padding: 0 10px;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  color: var(--primary);
  background: #eef3ff;
  font-size: 10px;
  font-weight: 700;
  user-select: all;
}

.fill-blank-list {
  padding: 11px;
  border-top: 1px solid #edf1f6;
  background: #fbfcfe;
}

.fill-blank-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 106px 30px;
  align-items: center;
  gap: 8px;
}

.fill-blank-row > input,
.fill-blank-score input {
  min-height: 38px;
}

.fill-blank-score {
  display: grid;
  grid-template-columns: 1fr 18px;
  align-items: center;
  gap: 4px;
  color: #7e899c;
  font-size: 10px;
}

.fill-blank-score input { min-width: 0; padding: 0 8px; }

/* Builder settings and preview */
.builder-settings-view {
  display: grid;
  height: calc(100vh - 118px);
  grid-template-columns: 220px minmax(0, 760px);
  gap: 18px;
  justify-content: center;
  align-items: start;
  padding: 22px;
  overflow-y: auto;
}

.settings-side-nav,
.paper-settings-content,
.paper-preview-sheet {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.settings-side-nav {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.settings-side-nav button {
  min-height: 43px;
  padding: 0 13px;
  border: 0;
  border-radius: 5px;
  color: #657289;
  text-align: left;
  background: transparent;
  font-size: 12px;
}

.settings-side-nav button.active { color: var(--primary); background: var(--primary-soft); font-weight: 700; }

.paper-settings-content { overflow: hidden; }

.settings-section {
  padding: 22px;
  border-bottom: 1px solid var(--line);
}

.settings-section > header { margin-bottom: 18px; }
.settings-section h2 { margin: 0; font-size: 15px; }
.settings-section header p { margin: 5px 0 0; color: #98a2b3; font-size: 11px; }

.settings-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.setting-toggle-row,
.settings-inline-field {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #f0f3f7;
}

.setting-toggle-row:last-child { border-bottom: 0; }
.setting-toggle-row span, .setting-toggle-row strong, .setting-toggle-row small,
.settings-inline-field div, .settings-inline-field strong, .settings-inline-field small { display: block; }
.setting-toggle-row strong, .settings-inline-field strong { color: #46536a; font-size: 12px; }
.setting-toggle-row small, .settings-inline-field small { margin-top: 5px; color: #9ba5b5; font-size: 10px; }

.setting-toggle-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.setting-toggle-row i {
  position: relative;
  width: 38px;
  height: 22px;
  flex: 0 0 38px;
  border-radius: 999px;
  background: #dfe4ec;
  transition: background 0.16s ease;
}

.setting-toggle-row i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  content: "";
  transition: transform 0.16s ease;
}

.setting-toggle-row input:checked + i { background: var(--primary); }
.setting-toggle-row input:checked + i::after { transform: translateX(16px); }
.setting-toggle-row input:focus-visible + i { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16); }

.settings-inline-field input { width: 110px; height: 40px; padding: 0 10px; border: 1px solid #d9e0eb; border-radius: 5px; }
.supervision-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.supervision-mode-grid label { min-width: 0; cursor: pointer; }
.supervision-mode-grid input { position: absolute; opacity: 0; pointer-events: none; }
.supervision-mode-grid label > span { display: grid; min-height: 116px; grid-template-columns: 34px minmax(0, 1fr); align-content: start; gap: 3px 10px; padding: 15px; border: 1px solid #dfe5ee; border-radius: 6px; background: #ffffff; }
.supervision-mode-grid i { display: inline-flex; width: 34px; height: 34px; grid-row: 1 / span 2; align-items: center; justify-content: center; border-radius: 6px; color: #2563eb; background: #eff6ff; }
.supervision-mode-grid i svg { width: 19px; height: 19px; }
.supervision-mode-grid strong { align-self: end; color: #3c4b64; font-size: 13px; }
.supervision-mode-grid small { grid-column: 1 / -1; margin-top: 7px; color: #8490a3; font-size: 10px; line-height: 1.55; }
.supervision-mode-grid input:checked + span { border-color: #60a5fa; background: #f4f9ff; box-shadow: inset 0 0 0 1px #60a5fa; }
.supervision-mode-grid label:nth-child(2) i { color: #18755e; background: #e7f6f1; }
.supervision-mode-grid label:nth-child(3) i { color: #ad574a; background: #fff0ed; }
.supervision-standard-row { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 0 14px; border: 1px solid #e6eaf1; border-radius: 5px; background: #fafbfd; opacity: 0.55; }
.supervision-standard-row[data-active="true"] { border-color: #bfdbfe; background: #f4f9ff; opacity: 1; }
.supervision-standard-row strong, .supervision-standard-row small { display: block; }
.supervision-standard-row strong { color: #46536a; font-size: 12px; }
.supervision-standard-row small { margin-top: 4px; color: #919daf; font-size: 10px; }
.supervision-standard-row input { width: 100px; }
.supervision-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 15px; border-top: 1px solid #edf1f5; }
.supervision-toggle-grid .setting-toggle-row { padding: 0 14px; }
.supervision-toggle-grid .setting-toggle-row:nth-child(odd) { border-right: 1px solid #edf1f5; }
.supervision-parameter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid #e6eaf1; border-radius: 6px; background: #fafbfd; }
.supervision-rule-editor { container-type: inline-size; margin-top: 22px; border-top: 1px solid #e5eaf1; padding-top: 18px; }
.supervision-rule-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.supervision-rule-editor > header strong, .supervision-rule-editor > header small { display: block; }
.supervision-rule-editor > header strong { color: #3e4d66; font-size: 13px; }
.supervision-rule-editor > header small { margin-top: 4px; color: #909bad; font-size: 10px; }
.supervision-rule-columns, .supervision-rule-row { display: grid; min-width: 0; grid-template-columns: minmax(80px, .75fr) minmax(100px, .9fr) minmax(130px, 1.5fr) minmax(82px, .75fr) minmax(120px, 1.35fr) 38px; gap: 8px; align-items: center; }
.supervision-rule-columns { padding: 8px 7px; color: #8b96a7; font-size: 10px; }
.supervision-rule-row { padding: 8px 7px; border-top: 1px solid #edf1f5; }
.supervision-rule-row input, .supervision-rule-row select { width: 100%; min-width: 0; }
.supervision-rule-row .icon-action { display: grid; width: 34px; height: 34px; place-self: center; place-items: center; padding: 0; border: 1px solid #edbbb5; border-radius: 5px; color: #c65247; background: #fff6f4; }
.supervision-rule-row .icon-action:hover { border-color: #dd8075; background: #ffecea; }
.supervision-rule-row .icon-action svg { width: 16px; height: 16px; }
.supervision-rule-empty { margin: 0; padding: 24px 10px; border-top: 1px solid #edf1f5; color: #8a95a7; text-align: center; font-size: 11px; }

@container (max-width: 640px) {
  .supervision-rule-columns { display: none; }
  .supervision-rule-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; gap: 8px; padding: 12px 7px; }
  .supervision-rule-row > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .supervision-rule-row > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .supervision-rule-row > :nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .supervision-rule-row > :nth-child(4) { grid-column: 1; grid-row: 3; }
  .supervision-rule-row > :nth-child(5) { grid-column: 2; grid-row: 3; }
  .supervision-rule-row > :nth-child(6) { grid-column: 3; grid-row: 1; align-self: start; }
}
.settings-save-bar { position: sticky; bottom: 0; padding: 15px 22px; border-top: 1px solid var(--line); text-align: right; background: #ffffff; }
.paper-settings-content > .form-message { margin: 12px 22px 0; }

.builder-preview-view {
  height: calc(100vh - 118px);
  padding: 22px;
  overflow-y: auto;
}

.paper-preview-sheet {
  width: min(860px, 100%);
  min-height: 600px;
  margin: 0 auto;
  padding: 34px;
}

.paper-preview-sheet > header { padding-bottom: 25px; border-bottom: 1px solid var(--line); text-align: center; }
.paper-preview-sheet h1 { margin: 0; font-size: 24px; }
.paper-preview-sheet header p { margin: 9px 0; color: var(--muted); font-size: 12px; }
.preview-meta { display: flex; justify-content: center; gap: 8px; }
.preview-meta span { padding: 5px 9px; border-radius: 4px; color: #60708d; background: #f3f6fb; font-size: 10px; }
#paper-preview-list { display: grid; gap: 21px; padding: 28px 0; }
.preview-question { padding-bottom: 20px; border-bottom: 1px solid #f0f3f7; }
.preview-paper-section { margin: 24px 0 18px; padding: 13px 16px; border-left: 4px solid #3b82f6; background: #f3f8ff; }
.preview-paper-section h2 { margin: 0; color: #294f93; font-size: 16px; }
.preview-paper-section p { margin: 6px 0 0; color: #657792; font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
.preview-question h3 { margin: 0 0 12px; font-size: 13px; line-height: 1.7; }
.preview-question-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.preview-question-options label { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 5px; color: #66738a; font-size: 11px; }
.preview-answer-box { width: 100%; min-height: 78px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; resize: none; }
.preview-sub-question { margin: 14px 0 7px; color: #59667d; font-size: 12px; }

.preview-question-score { color: #8490a5; font-size: 10px; font-weight: 500; }

.preview-inline-blank {
  width: 118px;
  height: 32px;
  margin: 0 5px;
  padding: 0 7px;
  border: 0;
  border-bottom: 2px solid #60a5fa;
  border-radius: 0;
  background: #f4f9ff;
  vertical-align: middle;
}

.preview-blank-score {
  margin-right: 4px;
  color: var(--primary);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.preview-file-upload { display: grid; gap: 10px; }

.preview-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.preview-file-dropzone {
  display: grid;
  min-height: 132px;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 16px;
  border: 1px dashed #b9c8e6;
  border-radius: 6px;
  color: #526079;
  background: #f8fbff;
  text-align: center;
  cursor: pointer;
}

.preview-file-dropzone:hover,
.preview-file-dropzone.dragging { border-color: var(--primary); background: #f1f5ff; }
.preview-file-dropzone small { color: #909caf; font-size: 10px; }

.preview-upload-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #ffffff;
  background: var(--primary);
  font-size: 18px;
}

.preview-attachment-list { display: grid; gap: 7px; }

.preview-attachment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  border: 1px solid #e1e7f0;
  border-radius: 5px;
  background: #ffffff;
}

.preview-attachment-row.active { border-color: #93c5fd; background: #f8fbff; }

.attachment-select {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.attachment-type-mark {
  display: inline-flex;
  width: 42px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--primary);
  background: #eff6ff;
  font-size: 9px;
  font-weight: 800;
}

.attachment-file-copy,
.attachment-file-copy strong,
.attachment-file-copy small,
.attachment-preview-header div,
.attachment-preview-header strong,
.attachment-preview-header span { display: block; min-width: 0; }

.attachment-file-copy strong,
.attachment-preview-header strong {
  overflow: hidden;
  color: #46536a;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-file-copy small,
.attachment-preview-header span { margin-top: 3px; color: #929dae; font-size: 9px; }

.attachment-live-preview {
  overflow: hidden;
  border: 1px solid #e1e7ef;
  border-radius: 6px;
  background: #ffffff;
}

.attachment-preview-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #e9edf3;
  background: #fafbfc;
}

.attachment-preview-body {
  display: grid;
  min-height: 250px;
  max-height: 430px;
  place-items: center;
  overflow: auto;
  background: #f4f6f9;
}

.attachment-preview-body img { display: block; max-width: 100%; max-height: 420px; object-fit: contain; }
.attachment-preview-body iframe { width: 100%; height: 420px; border: 0; background: #ffffff; }

.attachment-text-preview {
  width: 100%;
  min-height: 250px;
  margin: 0;
  padding: 16px;
  overflow: auto;
  color: #46536b;
  background: #ffffff;
  font-family: Consolas, monospace;
  font-size: 10px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.attachment-generic-preview {
  display: grid;
  place-items: center;
  padding: 30px;
  color: #536078;
  text-align: center;
}

.attachment-generic-icon {
  display: inline-flex;
  width: 66px;
  height: 66px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 6px;
  color: var(--primary);
  background: #eaf4ff;
  font-size: 13px;
  font-weight: 800;
}

.attachment-generic-preview p { margin: 6px 0 0; color: #909bad; font-size: 10px; }
.compact-empty { min-height: 220px; color: #97a1b2; font-size: 12px; }
.paper-preview-sheet > footer { padding-top: 20px; text-align: center; }
.paper-preview-sheet > footer button { width: 240px; }

/* Builder dialogs */
.builder-dialog { width: min(1080px, calc(100% - 32px)); }
.modal-subtitle { margin: 5px 0 0; color: #98a2b3; font-size: 11px; }
.builder-dialog-filter { display: grid; grid-template-columns: minmax(170px,1fr) repeat(4,135px) auto; gap: 9px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.builder-dialog-filter input, .builder-dialog-filter select { height: 39px; padding: 0 10px; border: 1px solid #d9e0eb; border-radius: 5px; background: #fff; }
.manual-search-bar { grid-template-columns: minmax(220px,1fr) repeat(3,135px) auto; }
.manual-search-bar button { display: inline-flex; align-items: center; gap: 6px; }
.manual-search-bar button svg { width: 15px; height: 15px; }
.manual-bank-browser { display: grid; min-height: 470px; grid-template-columns: 235px minmax(0,1fr); }
.manual-folder-pane { min-width: 0; border-right: 1px solid var(--line); background: #f8fafc; }
.manual-folder-heading { display: flex; height: 49px; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); color: #394961; font-size: 12px; }
.manual-folder-heading svg { width: 17px; height: 17px; color: var(--primary); }
.manual-folder-tree { max-height: 420px; padding: 8px; overflow-y: auto; }
.manual-folder-group + .manual-folder-group { margin-top: 3px; }
.manual-folder-children { position: relative; padding-left: 14px; }
.manual-folder-children::before { position: absolute; top: 1px; bottom: 5px; left: 15px; width: 1px; background: #dfe5ee; content: ""; }
.manual-folder-node { position: relative; display: grid; width: 100%; min-height: 38px; grid-template-columns: 20px minmax(0,1fr) auto; gap: 7px; align-items: center; padding: 6px 8px; border: 0; border-radius: 5px; color: #526079; background: transparent; text-align: left; cursor: pointer; }
.manual-folder-node:hover { background: #edf3fb; }
.manual-folder-node.active { color: #245fae; background: #e7f0fc; font-weight: 700; }
.manual-folder-node.level-1 { min-height: 35px; margin-left: 8px; font-size: 11px; }
.manual-folder-icon { display: inline-flex; align-items: center; justify-content: center; }
.manual-folder-icon svg { width: 16px; height: 16px; }
.manual-folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-folder-count { min-width: 24px; color: #8a96a8; font-size: 10px; text-align: right; }
.manual-question-pane { min-width: 0; }
.manual-current-folder { display: flex; min-height: 49px; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); color: #43526a; font-size: 12px; }
.manual-current-folder > div { display: flex; align-items: center; gap: 8px; }
.manual-current-folder svg { width: 17px; height: 17px; color: #efad3d; }
.manual-current-folder > span { color: #8c97a8; font-size: 11px; }
.manual-question-list-head { display: flex; min-height: 45px; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); color: #66738a; font-size: 12px; }
.manual-question-list { max-height: 326px; overflow-y: auto; }
.manual-question-row { display: grid; grid-template-columns: 26px 92px minmax(0,1fr) 68px 88px 55px; gap: 9px; align-items: center; min-height: 58px; padding: 10px 20px; border-bottom: 1px solid #f0f3f7; color: #5f6c82; font-size: 11px; }
.manual-question-row:hover { background: #fbfcff; }
.manual-question-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-question-pane > .form-message { min-height: 27px; margin: 0; padding: 7px 20px 0; }
.dialog-empty-state { padding: 54px 22px; color: #98a2b3; text-align: center; font-size: 12px; }
.builder-dialog .modal-content > .form-message { margin-top: 12px; }
.random-paper-dialog { width: min(1160px, calc(100% - 32px)); }
.random-delivery-summary { display: grid; grid-template-columns: repeat(3,1fr); margin: 18px 22px 4px; border: 1px solid #dfe6ef; border-radius: 6px; background: #f8fafc; }
.random-master-toggle { margin: 14px 22px 0; padding: 0 14px; border: 1px solid #dfe6ef; border-radius: 6px; background: #ffffff; }
.random-mode-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: min(420px, calc(100% - 44px)); margin: 14px 22px 0; padding: 3px; border: 1px solid #dfe6ef; border-radius: 6px; background: #f4f7fa; }
.random-mode-segment label { cursor: pointer; }
.random-mode-segment input { position: absolute; opacity: 0; pointer-events: none; }
.random-mode-segment span { display: flex; min-height: 36px; align-items: center; justify-content: center; border-radius: 4px; color: #69778b; font-size: 12px; font-weight: 600; }
.random-mode-segment input:checked + span { color: #176b56; background: #fff; box-shadow: 0 1px 4px rgba(31, 50, 73, .12); }
.random-delivery-summary > div { display: flex; min-height: 68px; align-items: center; justify-content: center; flex-direction: column; }
.random-delivery-summary > div + div { border-left: 1px solid #dfe6ef; }
.random-delivery-summary span { color: #7d899b; font-size: 11px; }
.random-delivery-summary strong { margin-top: 5px; color: #2f415c; font-size: 18px; }
.random-rule-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 10px; }
.random-rule-header > div { display: grid; gap: 3px; }
.random-rule-header small { color: #8c97a8; font-size: 10px; font-weight: 400; }
.random-rule-columns, .random-rule-row { display: grid; grid-template-columns: minmax(145px,1.3fr) 105px 105px 105px 95px 34px; gap: 9px; align-items: center; }
.random-range-columns, .random-range-rule-row { display: grid; grid-template-columns: minmax(190px,1.4fr) minmax(190px,1.4fr) 70px 76px 96px 82px 34px; gap: 8px; align-items: center; }
.random-rule-columns { padding: 0 34px 7px; color: #8b96a7; font-size: 10px; }
.random-range-columns { padding: 0 34px 7px; color: #8b96a7; font-size: 10px; }
.random-rule-list { display: grid; gap: 9px; min-height: 76px; max-height: 350px; padding: 0 22px 18px; overflow-y: auto; }
.random-rule-list:empty::after { display: flex; min-height: 74px; align-items: center; justify-content: center; border: 1px dashed #d7dee8; border-radius: 6px; color: #8c97a8; background: #fafbfd; content: "未设置随机规则，所有候选题都会进入正式试卷"; font-size: 11px; }
.random-range-rule-list:empty::after { content: "未设置题目范围，添加范围后可从其中随机抽题"; }
.random-rule-row, .random-range-rule-row { padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfe; }
.random-range-rule-row.has-error { border-color: #e5a29a; background: #fff8f7; }
.random-rule-field { display: block; min-width: 0; }
.random-rule-field > small { display: none; }
.random-rule-field .rule-pool, .random-rule-field .rule-subtotal, .random-rule-field .range-pool, .random-rule-field .range-subtotal { display: block; color: #53627a; font-size: 12px; text-align: center; }
.random-rule-row select, .random-rule-row input, .random-range-rule-row select, .random-range-rule-row input { width: 100%; height: 38px; padding: 0 9px; border: 1px solid #d9e0eb; border-radius: 5px; background: #fff; }
.random-rule-row button, .random-range-rule-row button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 4px; color: #d45e50; background: transparent; font-size: 18px; }
.random-rule-row button svg, .random-range-rule-row button svg { width: 17px; height: 17px; }
.modal-footer-spacer { flex: 1; }

.ai-paper-dialog { width: min(1040px, calc(100% - 32px)); }
.ai-generate-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 22px; }
.ai-type-fieldset { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 6px; }
.ai-type-fieldset legend { padding: 0 5px; color: #4b5870; font-size: 12px; font-weight: 600; }
.ai-type-fieldset label { color: #647087; font-size: 12px; }
.ai-generate-action { text-align: right; }
.ai-candidate-section { padding: 0 22px 22px; border-top: 1px solid var(--line); background: #f6f8fb; }
.ai-candidate-toolbar { display: flex; min-height: 54px; align-items: center; justify-content: space-between; color: #647087; font-size: 12px; }
.ai-candidate-toolbar label { display: inline-flex; align-items: center; gap: 8px; color: #43516a; font-weight: 600; }
.ai-candidate-toolbar input { width: 15px; height: 15px; }
#ai-selected-count { color: #2f78dc; font-weight: 700; }
.ai-candidate-list { display: grid; gap: 14px; }
.ai-candidate-card { display: grid; min-width: 0; gap: 14px; padding: 0 0 16px; overflow: hidden; border: 1px solid #dce4ef; border-radius: 7px; background: #ffffff; box-shadow: 0 2px 7px rgba(41, 64, 98, .04); transition: border-color .18s ease, opacity .18s ease; }
.ai-candidate-card:hover { border-color: #b8d0f2; }
.ai-candidate-card.excluded { opacity: .58; border-style: dashed; background: #f8fafc; }
.ai-candidate-selection { display: flex; min-height: 54px; align-items: center; gap: 11px; padding: 10px 16px; border-bottom: 1px solid #e8edf4; background: #f7faff; cursor: pointer; }
.ai-candidate-selection > input { width: 16px; height: 16px; margin: 0; flex: 0 0 16px; accent-color: #2f78dc; }
.ai-candidate-selection-copy { display: grid; min-width: 0; gap: 2px; }
.ai-candidate-selection-copy strong { color: #34445d; font-size: 13px; }
.ai-candidate-selection-copy small { color: #8a96a8; font-size: 10px; }
.ai-candidate-card textarea, .ai-candidate-card input:not([type="checkbox"]):not([type="radio"]), .ai-candidate-card select { width: 100%; border: 1px solid #d7e0eb; border-radius: 5px; color: #344159; background: #fff; }
.ai-candidate-card textarea { min-height: 70px; padding: 10px 11px; resize: vertical; font-size: 13px; line-height: 1.65; }
.ai-candidate-card input:not([type="checkbox"]):not([type="radio"]), .ai-candidate-card select { height: 40px; padding: 0 10px; }
.ai-candidate-editor { min-width: 0; padding: 0 16px; }
.ai-candidate-field { display: grid; gap: 6px; color: #58677e; font-size: 11px; font-weight: 600; }
.ai-candidate-meta { display: grid; min-width: 0; grid-template-columns: minmax(150px, 1.15fr) minmax(125px, .8fr) 90px minmax(190px, 1.4fr); gap: 10px; padding: 0 16px; }
.ai-candidate-meta-field { display: grid; min-width: 0; gap: 6px; }
.ai-candidate-meta-field > span { color: #738096; font-size: 10px; font-weight: 600; }
.ai-candidate-details { margin: 0 16px; padding-top: 1px; color: #748096; font-size: 11px; }
.ai-candidate-details summary { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 11px; border: 1px solid #dce6f2; border-radius: 5px; cursor: pointer; color: #286fcf; background: #f4f8fe; font-weight: 600; list-style: none; }
.ai-candidate-details summary::-webkit-details-marker { display: none; }
.ai-candidate-details summary svg { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .18s ease; }
.ai-candidate-details[open] summary svg { transform: rotate(180deg); }
.ai-candidate-details[open] summary { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.ai-candidate-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border: 1px solid #dce6f2; border-top: 0; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background: #fbfcfe; }
.ai-candidate-choice-field, .ai-candidate-judge-field { grid-column: 1 / -1; }
.ai-candidate-choice-field[hidden], .ai-candidate-judge-field[hidden], .ai-candidate-answer-field[hidden] { display: none; }
.ai-candidate-choice-field .visual-option-heading strong { color: #58677e; font-size: 11px; }
.ai-candidate-choice-field .compact-button { min-height: 32px; gap: 5px; padding: 0 10px; font-size: 10px; }
.ai-candidate-choice-field .compact-button svg { width: 14px; height: 14px; }
.ai-candidate-choice-row { grid-template-columns: 24px 30px minmax(0, 1fr) 30px; }
.ai-candidate-card .ai-candidate-choice-row .visual-option-correct { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); }
.ai-candidate-card .ai-candidate-choice-row .visual-option-text { width: 100%; height: 34px; min-height: 34px; padding: 0 7px; border: 0; border-radius: 0; outline: 0; }
.ai-candidate-analysis-field.wide { grid-column: 1 / -1; }
.ai-candidate-options-field { grid-column: 1 / -1; }
.ai-candidate-options-field[hidden] { display: none; }

/* Review, results and system settings */
.review-filter-bar, .result-filter-bar { align-items: end; }
.review-filter-bar .paper-result-count { margin-left: auto; }
.review-question-cell, .result-paper-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-round, .result-status, .settings-state { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 8px; border-radius: 4px; color: #52647e; background: #eef3f9; font-size: 10px; font-weight: 700; }
.review-round.arbitration { color: #b44e40; background: #fff0ed; }
.result-status.graded { color: #147861; background: #e8f7f1; }
.result-status.submitted { color: #a26024; background: #fff5e8; }
.result-status.published { color: #147861; background: #e8f7f1; }
.rank-cell { color: #2f78dc; font-weight: 800; }
.score-cell { color: #34445e; font-weight: 700; }
.score-rise { color: #147861; font-weight: 700; }
.score-fall { color: #c25145; font-weight: 700; }
.review-dialog .modal-content, .result-detail-dialog .modal-content { width: min(1080px, calc(100vw - 36px)); }
.review-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: 520px; }
.review-answer-pane { padding: 24px 28px; border-right: 1px solid var(--line); }
.review-score-pane { padding: 24px; background: #f8fafc; }
.review-question-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-question-meta > strong { color: #2f78dc; font-size: 13px; }
.review-answer-pane h3 { margin: 18px 0; color: #344159; font-size: 16px; line-height: 1.8; }
.review-block, .review-reference-block { margin-top: 16px; padding: 16px; border: 1px solid #e3e9f1; border-radius: 6px; background: #ffffff; }
.review-block.reference { background: #f7faff; }
.review-block > span { color: #8190a6; font-size: 10px; font-weight: 700; }
.review-rich-text { margin-top: 10px; color: #3f4c62; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-block.reference > p { margin: 10px 0 0; color: #748198; font-size: 11px; line-height: 1.7; }
.review-reference-block p { margin: 5px 0; color: #596981; font-size: 12px; }
.review-file-list { display: grid; gap: 7px; margin-top: 14px; }
.ai-review-panel { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid #e1e7f0; }
.ai-review-panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ai-review-panel header strong { font-size: 13px; }
.ai-review-panel p { margin: 7px 0 0; color: #68778f; font-size: 11px; line-height: 1.7; }
#ai-review-score { color: #2f78dc; font-size: 20px; }
.score-input-wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.score-input-wrap span { color: #7c899d; font-size: 11px; }
#submit-review-score { width: 100%; }
.result-summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #f8fafc; }
.result-summary-strip > div { padding: 16px 20px; border-right: 1px solid var(--line); }
.result-summary-strip > div:last-child { border-right: 0; }
.result-summary-strip span, .result-summary-strip strong { display: block; }
.result-summary-strip span { color: #8b97a9; font-size: 10px; }
.result-summary-strip strong { margin-top: 5px; color: #344159; font-size: 17px; }
.result-answer-list { max-height: 58vh; overflow-y: auto; padding: 5px 28px 20px; }
.result-answer-item { padding: 21px 0; border-bottom: 1px solid #e9edf3; }
.result-answer-item header { display: flex; justify-content: space-between; gap: 18px; }
.result-answer-item header strong { color: #3a475e; font-size: 13px; line-height: 1.7; }
.result-answer-item header span { flex: 0 0 auto; color: #2f78dc; font-size: 12px; font-weight: 700; }
.result-answer-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.result-answer-columns > div { padding: 13px; border: 1px solid #e5eaf1; border-radius: 5px; }
.result-answer-columns span { color: #8b97a9; font-size: 10px; }
.result-answer-columns p { margin: 7px 0 0; color: #59677e; font-size: 11px; line-height: 1.7; white-space: pre-wrap; }
.result-ai-comment, .result-review-comment { margin: 10px 0 0; padding: 9px 11px; border-left: 3px solid #8ab4ef; color: #66758c; background: #f6f9fd; font-size: 10px; line-height: 1.6; }
.result-review-comment { border-left-color: #71b6a2; background: #f3faf7; }
.settings-page-section { max-width: 980px; }
.system-settings-form { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #ffffff; }
.settings-band { padding: 28px 30px; border-bottom: 1px solid var(--line); }
.settings-band > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.settings-band h2 { margin: 3px 0 0; font-size: 18px; }
.settings-state[data-configured="true"] { color: #147861; background: #e8f7f1; }
.settings-state[data-configured="false"] { color: #a26024; background: #fff5e8; }
.clear-secret-row { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: #6d7a90; font-size: 11px; }
.settings-inline-actions { margin-top: 18px; }
.settings-page-actions { padding: 18px 30px; text-align: right; background: #f8fafc; }
.system-settings-form > .form-message { margin: 14px 30px 0; }
#cleanup-supervision-data[data-available="false"] { opacity: .72; cursor: help; }

/* Review workbench */
.review-main-content { padding-bottom: 18px; }
.review-page-section { width: min(1480px, 100%); padding-top: 18px; }
.review-workbench {
  display: grid;
  height: calc(100vh - 102px);
  min-height: 650px;
  overflow: hidden;
  grid-template-columns: 380px minmax(0, 1fr);
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(44, 61, 91, 0.05);
}
.review-queue-pane { display: grid; min-height: 0; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; border-right: 1px solid #e3e8f0; background: #fbfcfe; }
.review-queue-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 23px 20px 17px; }
.review-queue-header h2 { margin: 4px 0 0; font-size: 21px; }
.review-queue-header > span { flex: 0 0 auto; padding: 4px 8px; border-radius: 4px; color: #2563eb; background: #eff6ff; font-size: 11px; font-weight: 700; }
.review-queue-filter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(108px, .58fr); gap: 12px 10px; padding: 0 18px 17px; }
.review-queue-filter label { display: grid; min-width: 0; gap: 6px; color: #65748a; font-size: 11px; font-weight: 650; }
.review-queue-filter label:first-child { grid-column: 1 / -1; }
.review-queue-filter label:nth-child(2) { grid-column: 1 / -1; }
.review-queue-filter select { width: 100%; height: 42px; min-width: 0; padding: 0 11px; border: 1px solid #d7e1ee; border-radius: 6px; outline: 0; color: #34445d; background: #ffffff; font-size: 12px; font-weight: 600; text-overflow: ellipsis; }
.review-queue-filter select:hover { border-color: #93c5fd; background: #f8fbff; }
.review-queue-filter select:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(59, 130, 246, .12); }
.review-refresh-button { min-height: 42px; align-self: end; font-size: 12px; }
.review-refresh-button svg { width: 15px; height: 15px; }
.review-queue-status { min-height: 20px; padding: 0 18px; color: #be594e; font-size: 11px; }
.review-task-list { min-height: 0; overflow-y: auto; border-top: 1px solid #edf0f5; }
.review-task-card { display: grid; width: 100%; gap: 9px; padding: 16px 18px; border: 0; border-bottom: 1px solid #e9edf3; color: #344159; background: transparent; text-align: left; }
.review-task-card:hover { background: #f3f7fd; }
.review-task-card.active { box-shadow: inset 3px 0 0 var(--primary); background: #eff6ff; }
.review-task-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-task-card-top strong { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.review-task-state { flex: 0 0 auto; padding: 4px 7px; border-radius: 4px; color: #a26024; background: #fff2e2; font-size: 10px; font-weight: 700; }
.review-task-state.completed { color: #147861; background: #e7f7f1; }
.review-task-question { display: -webkit-box; overflow: hidden; color: #536178; font-size: 12px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.review-task-meta { display: flex; justify-content: space-between; gap: 8px; color: #7e8a9d; font-size: 10px; }
.review-queue-empty { padding: 42px 20px; color: #919daf; text-align: center; font-size: 11px; }
.review-queue-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; border-top: 1px solid #e8edf4; color: #596a83; font-size: 11px; }
.icon-page-button { width: 30px; height: 30px; padding: 0; border: 1px solid #dbe2ec; border-radius: 5px; color: #61718a; background: #ffffff; font-size: 20px; line-height: 1; }
.icon-page-button:disabled { cursor: default; opacity: 0.4; }
.review-workspace-pane { min-width: 0; min-height: 0; overflow: hidden; background: #ffffff; }
.review-workspace-empty { display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column; gap: 13px; color: #77859a; }
.review-workspace-empty > span { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid #dce5f2; border-radius: 50%; color: #3b82f6; background: #eff6ff; font-size: 20px; font-weight: 800; }
.review-workspace-empty strong { font-size: 14px; }
.review-workspace { display: grid; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.review-workspace-header { display: flex; min-height: 100px; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 26px; border-bottom: 1px solid #e4e9f0; }
.review-workspace-header h2 { margin: 9px 0 0; font-size: 18px; }
.review-workspace-header .review-question-meta { justify-content: flex-start; }
.review-workspace-header .review-question-meta > strong { margin-left: auto; }
.review-workspace-header .modal-subtitle { margin-top: 6px; }
.review-workspace-nav { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.review-workspace-nav > span { min-width: 42px; color: #78869a; font-size: 10px; text-align: center; }
.review-workspace-nav .table-icon-action:disabled { cursor: default; opacity: .4; }
.review-workspace .review-detail-grid { min-height: 0; grid-template-columns: minmax(0, 1fr) 350px; }
.review-workspace .review-answer-pane { min-height: 0; overflow-y: auto; padding: 26px 30px 42px; }
.review-workspace .review-score-pane { min-height: 0; overflow-y: auto; padding: 24px; }
.review-stem-block { padding: 0 2px 22px; border-bottom: 1px solid #e8edf3; }
.review-stem-block h3 { margin: 12px 0 0; color: #303d54; font-size: 16px; font-weight: 600; line-height: 1.85; }
.review-block-label { color: #7f8da3; font-size: 10px; font-weight: 700; }
.review-workspace .review-block { margin-top: 20px; padding: 20px; }
.review-workspace .review-block.candidate { border-color: #dce6f5; background: #fbfdff; }
.review-file-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 7px 8px 7px 10px; border: 1px solid #dce5f1; border-radius: 6px; background: #ffffff; }
.review-file-row > div { display: flex; min-width: 0; align-items: center; gap: 9px; }
.review-file-row > div:first-child > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 5px; color: #2563eb; background: #eff6ff; }
.review-file-row svg { width: 15px; height: 15px; }
.review-file-row strong, .review-file-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-file-row strong { color: #40516b; font-size: 11px; }
.review-file-row small { margin-top: 3px; color: #8995a7; font-size: 8px; }
.review-file-action { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; padding: 0; border: 1px solid #d9e2ef; border-radius: 5px; color: #55708f; background: #ffffff; }
.review-file-action:hover { border-color: #93c5fd; color: #1d4ed8; background: #f3f8ff; }
.review-file-preview { margin-top: 12px; overflow: hidden; border: 1px solid #d9e3f0; border-radius: 6px; background: #ffffff; }
.review-file-preview > header { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid #e4eaf2; background: #f8fbff; }
.review-file-preview > header > div { display: flex; min-width: 0; align-items: center; gap: 9px; }
.review-file-preview > header > div > span { display: inline-flex; color: #2563eb; }
.review-file-preview > header svg { width: 16px; height: 16px; }
.review-file-preview > header strong, .review-file-preview > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-file-preview > header strong { max-width: 420px; color: #3c4c65; font-size: 11px; }
.review-file-preview > header small { margin-top: 3px; color: #8995a7; font-size: 8px; }
.review-file-preview-stage { display: grid; min-height: 280px; max-height: 620px; overflow: auto; place-items: center; background: #eef2f6; }
.review-file-preview-stage img { display: block; width: 100%; max-height: 620px; object-fit: contain; background: #111827; }
.review-file-preview-stage video { display: block; width: 100%; max-height: 620px; background: #111827; }
.review-file-preview-stage audio { width: min(560px, calc(100% - 40px)); }
.review-file-preview-stage iframe { width: 100%; height: min(620px, 70vh); border: 0; background: #ffffff; }
.review-file-preview-stage pre { width: 100%; min-height: 280px; margin: 0; padding: 18px; overflow: auto; color: #334155; background: #ffffff; font: 11px/1.7 Consolas, "Courier New", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-file-preview-loading { color: #78869a; font-size: 11px; }
.review-file-preview-empty { display: grid; place-items: center; align-content: center; gap: 7px; padding: 32px; color: #7c899b; text-align: center; }
.review-file-preview-empty > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 6px; color: #3b82f6; background: #eaf3ff; }
.review-file-preview-empty svg { width: 21px; height: 21px; }
.review-file-preview-empty strong { color: #4b5b72; font-size: 12px; }
.review-file-preview-empty p { margin: 0; font-size: 9px; }
.review-workspace .ai-review-panel header > div { display: grid; gap: 3px; }
.review-workspace .ai-review-panel header span { color: #8a96a8; font-size: 9px; }
.review-workspace .ai-review-panel header strong { font-size: 14px; }
.review-workspace #review-score-form { display: grid; gap: 16px; }
.review-workspace #review-score-form .field { gap: 7px; }
.review-workspace #review-comment { min-height: 130px; }
.review-quick-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 7px; }
.review-quick-scores button { min-height: 30px; border: 1px solid #dbe2ea; border-radius: 5px; color: #5f6f83; background: #fff; font-size: 9px; font-weight: 650; }
.review-quick-scores button:hover { color: #2e765f; border-color: #a8cdbc; background: #f3faf7; }
.review-quick-scores button:disabled { cursor: default; opacity: .45; }
.review-completed-note { margin: 12px 0 0; padding: 10px; color: #597268; background: #edf8f4; text-align: center; font-size: 10px; }
.ai-review-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-review-summary > span { padding: 4px 7px; border-radius: 4px; color: #7a5b24; background: #fff7df; font-size: 9px; font-weight: 600; }
.ai-review-criteria { display: grid; gap: 6px; margin-top: 10px; }
.ai-review-criteria > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; padding: 8px 9px; border: 1px solid #e6eaf1; border-radius: 5px; background: #fafbfd; }
.ai-review-criteria strong, .ai-review-criteria span { color: #4b5b73; font-size: 10px; }
.ai-review-criteria p { grid-column: 1 / -1; margin: 0; color: #7c889a; font-size: 9px; line-height: 1.55; }
.accept-ai-review-button { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; border: 1px solid #9dcfbe; border-radius: 5px; color: #176b54; background: #edf8f4; font-weight: 650; }
.accept-ai-review-button:hover { border-color: #70b69f; background: #e2f4ed; }
.accept-ai-review-button svg { width: 15px; height: 15px; }

/* Result detail workspace */
.result-detail-dialog {
  width: min(1420px, calc(100vw - 24px));
  max-width: none;
  height: min(900px, calc(100vh - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
}
.result-detail-dialog .modal-content { display: grid; width: 100%; height: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.result-detail-header { position: static; min-height: 76px; padding-right: 18px; }
.result-detail-header-actions { display: flex; align-items: center; gap: 10px; }
.result-detail-dialog .result-summary-strip { background: #f7f9fc; }
.result-detail-dialog .result-summary-strip > div { padding: 14px 22px; }
.result-detail-dialog .result-answer-list { min-height: 0; max-height: none; overflow-y: auto; padding: 8px 30px 28px; }
.result-detail-dialog .result-answer-item { padding: 22px 2px; }
.result-detail-dialog .result-answer-columns > div { min-width: 0; padding: 15px 16px; background: #fbfcfe; }
.result-detail-dialog .result-answer-columns p { overflow-wrap: anywhere; font-size: 12px; }
.result-file-list { margin-top: 11px; }
.result-file-list .review-file-row { background: #ffffff; }
.result-file-preview-dialog { width: min(1080px, calc(100vw - 36px)); max-width: none; }
.result-file-preview-dialog .modal-content { display: grid; max-height: calc(100vh - 40px); grid-template-rows: auto minmax(280px, 1fr) auto; }
.result-file-preview-dialog .review-file-preview-stage { max-height: calc(100vh - 190px); }
.result-detail-footer { position: static; justify-content: space-between; min-height: 70px; padding: 13px 22px; }
.result-admin-actions, .result-detail-export-actions { display: flex; align-items: center; gap: 9px; }
.danger-outline-button { min-height: 38px; padding: 0 14px; border: 1px solid #ebafa7; border-radius: 5px; color: #bd5145; background: #ffffff; font-weight: 600; }
.danger-outline-button:hover { background: #fff5f3; }

/* Results center: exam-first analytics */
.results-page-section { width: min(1500px, 100%); padding-top: 26px; padding-bottom: 54px; }
.results-index-heading { margin-bottom: 17px; }
.result-paper-grid { display: grid; max-height: 218px; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 9px; overflow-y: auto; padding: 2px 5px 2px 2px; scrollbar-gutter: stable; }
.result-paper-card { position: relative; display: grid; min-width: 0; min-height: 96px; align-content: space-between; gap: 10px; padding: 13px 14px; overflow: hidden; border: 1px solid #e0e6ee; border-radius: 7px; color: #36445a; background: #fff; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.result-paper-card:hover { border-color: #b9c8da; box-shadow: 0 8px 22px rgba(46, 64, 86, .07); transform: translateY(-1px); }
.result-paper-card.active { border-color: #6da991; box-shadow: inset 0 0 0 1px #6da991, 0 8px 22px rgba(39, 103, 79, .08); }
.result-paper-card.active::after { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: #4f9a7e; content: ""; }
.result-paper-card-header { display: grid; min-width: 0; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px; }
.result-paper-card-header > span:first-child { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 5px; color: #387b67; background: #eaf6f1; }
.result-paper-card-header svg { width: 14px; height: 14px; }
.result-paper-card-title { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.result-paper-card-title strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.result-paper-status { flex: 0 0 auto; padding: 2px 5px; border-radius: 3px; color: #7b8797; background: #f0f2f5; font-size: 8px; font-weight: 600; }
.result-paper-status.published { color: #31745f; background: #eaf6f1; }
.result-paper-status.closed { color: #6f7480; background: #eceef1; }
.result-paper-card-progress { display: grid; gap: 6px; }
.result-paper-card-progress > span { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #7f8a9b; font-size: 9px; white-space: nowrap; }
.result-paper-card-progress > i { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: #e8edf2; }
.result-paper-card-progress > i b { display: block; height: 100%; border-radius: 3px; background: #55a889; }
.results-paper-empty { margin-top: 12px; border: 1px dashed #dce2e9; background: #fbfcfd; }
.result-workspace { margin-top: 30px; padding-top: 27px; border-top: 1px solid #dfe5ec; }
.result-workspace-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.result-workspace-header h2 { margin: 4px 0 0; font-size: 23px; }
.result-workspace-header .section-description { margin-top: 6px; }
.result-metric-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 20px; overflow: hidden; border: 1px solid #dfe5ec; border-radius: 7px; background: #fff; }
.result-metric-strip > div { display: grid; min-width: 0; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: center; column-gap: 8px; padding: 16px; border-right: 1px solid #e6eaf0; }
.result-metric-strip > div:last-child { border-right: 0; }
.result-metric-strip > div > span:first-child { display: grid; width: 28px; height: 28px; grid-row: 1 / span 2; place-items: center; border-radius: 5px; color: #31745f; background: #eaf6f1; }
.result-metric-strip svg { width: 15px; height: 15px; }
.result-metric-strip > div:nth-child(3n + 2) > span:first-child { color: #8a652b; background: #fff4dc; }
.result-metric-strip > div:nth-child(3n) > span:first-child { color: #426ba5; background: #edf3fb; }
.result-metric-strip > div > span:nth-child(2) { color: #8590a0; font-size: 9px; }
.result-metric-strip strong { overflow: hidden; margin-top: 3px; color: #35445a; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.result-metric-strip small { grid-column: 1 / -1; margin-top: 8px; overflow: hidden; color: #98a1ae; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.result-analysis-grid { display: grid; grid-template-columns: minmax(390px, .9fr) minmax(520px, 1.1fr); gap: 14px; margin-top: 14px; }
.result-analysis-panel { min-width: 0; padding: 20px 22px; border: 1px solid #e0e5ec; border-radius: 7px; background: #fff; }
.result-analysis-panel > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.result-analysis-panel h3, .result-candidate-heading h3 { margin: 3px 0 0; color: #344258; font-size: 16px; }
.result-distribution { display: grid; gap: 13px; }
.result-distribution > div { display: grid; grid-template-columns: 72px minmax(0, 1fr) 46px; align-items: center; gap: 11px; }
.result-distribution > div > div { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #778397; font-size: 10px; }
.result-distribution > div > div strong { color: #44536a; }
.result-distribution i { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: #edf0f4; }
.result-distribution i b { display: block; min-width: 2px; height: 100%; border-radius: 4px; background: #5d9f88; }
.result-distribution > div:nth-child(4) i b, .result-distribution > div:nth-child(5) i b { background: #4f79ae; }
.result-distribution small { color: #8994a4; font-size: 9px; text-align: right; }
.result-department-scroll { max-height: 225px; overflow-y: auto; }
.result-department-table { width: 100%; }
.result-department-table th, .result-department-table td { height: 38px; padding: 0 10px; border-bottom: 1px solid #edf0f4; color: #657186; font-size: 10px; text-align: right; }
.result-department-table th { height: 31px; color: #8a95a5; font-weight: 500; }
.result-department-table th:first-child, .result-department-table td:first-child { padding-left: 0; text-align: left; }
.result-department-table .department-name { max-width: 180px; overflow: hidden; color: #3e4d63; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.compact-empty { padding: 34px; color: #939daa; text-align: center; font-size: 10px; }
.result-candidate-section { margin-top: 27px; }
.result-candidate-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 13px; }
.result-candidate-heading > strong { color: #6d798c; font-size: 11px; font-weight: 500; }
.result-candidate-section .result-filter-bar { margin-bottom: 12px; padding: 14px 16px; border: 1px solid #e1e6ed; border-radius: 7px; background: #f8fafb; }
.result-candidate-section .search-field { min-width: 230px; }
.result-table-surface { border-radius: 7px; }
.result-candidate-cell { min-width: 150px; }
.result-candidate-cell strong, .result-candidate-cell span { display: block; }
.result-candidate-cell strong { color: #35445a; font-size: 11px; }
.result-candidate-cell span { margin-top: 3px; color: #939dac; font-size: 9px; }
.table-icon-action { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 1px solid #dce3eb; border-radius: 5px; color: #55718f; background: #fff; }
.table-icon-action:hover { color: #2d6e5a; border-color: #9bc5b6; background: #f3faf7; }
.table-icon-action svg { width: 15px; height: 15px; }
.result-answer-score-area { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.result-score-edit-button { display: inline-flex; min-height: 29px; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #cfdbe8; border-radius: 5px; color: #4f6c8e; background: #fff; font-size: 9px; font-weight: 650; }
.result-score-edit-button svg { width: 13px; height: 13px; }
.result-answer-score-editor { display: grid; grid-template-columns: 130px minmax(230px, 1fr) auto; align-items: end; gap: 10px; margin-top: 13px; padding: 13px; border: 1px solid #d7e4de; border-radius: 6px; background: #f4faf7; }
.result-answer-score-editor[hidden] { display: none; }
.result-answer-score-editor label { display: grid; gap: 5px; color: #6c7b8b; font-size: 9px; }
.result-answer-score-editor input { width: 100%; height: 36px; padding: 0 9px; border: 1px solid #ced9d5; border-radius: 5px; background: #fff; }
.result-answer-score-editor > div { display: flex; gap: 7px; }

#builder-save-status[data-failed="true"] { color: #d45e50; }

@media (max-width: 1180px) {
  .result-paper-grid { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
  .result-metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-metric-strip > div:nth-child(3) { border-right: 0; }
  .result-metric-strip > div:nth-child(-n + 3) { border-bottom: 1px solid #e6eaf0; }
  .result-analysis-grid { grid-template-columns: 1fr; }
  .paper-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder-edit-view { grid-template-columns: 210px minmax(460px,1fr) 270px; }
  .paper-canvas-wrap { padding-right: 18px; padding-left: 18px; }
  .paper-canvas { padding-right: 24px; padding-left: 24px; }
}

@media (max-width: 920px) {
  .login-page-body { padding: 24px; }
  .login-layout { display: block; width: min(520px, 100%); min-height: 0; background: #ffffff; }
  .brand-panel { display: none; }
  .login-panel { min-height: 610px; align-items: flex-start; padding: 44px 48px; }
  .login-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; color: #243553; font-size: 17px; }

  .app-shell {
    grid-template-columns: 205px minmax(0, 1fr);
  }

  .main-content {
    padding-right: 24px;
    padding-left: 24px;
  }

  .result-paper-grid { max-height: 213px; grid-template-columns: repeat(2, minmax(190px, 1fr)); }
  .result-workspace-header { align-items: flex-start; flex-direction: column; }
  .result-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-metric-strip > div:nth-child(2n) { border-right: 0; }
  .result-metric-strip > div:nth-child(3) { border-right: 1px solid #e6eaf0; }
  .result-metric-strip > div:nth-child(-n + 4) { border-bottom: 1px solid #e6eaf0; }
  .result-answer-score-editor { grid-template-columns: 1fr; }

  .filter-bar,
  .question-filter-bar,
  .account-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-actions {
    align-self: end;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .question-bank-workspace { grid-template-columns: 1fr; overflow: visible; }
  .question-folder-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .question-folder-tree { max-height: 250px; }
  .question-folder-panel > footer { position: static; }

  .paper-project-grid { grid-template-columns: 1fr; }
  .paper-project-filter { grid-template-columns: 1fr 1fr auto auto; }
  .paper-result-count { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 720px) {
  .result-paper-grid { max-height: 213px; grid-template-columns: 1fr; }
  .question-bank-content { padding: 12px; }
  .question-current-folder { align-items: flex-start; flex-direction: column; gap: 4px; padding: 4px 2px 8px; }
  .question-current-folder small { text-align: left; }
  .question-batch-bar { flex-wrap: wrap; gap: 8px 12px; }
  .question-batch-bar > span { min-width: calc(100% - 100px); }
  .question-batch-actions { width: 100%; justify-content: flex-end; }
  .organization-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  .organization-dialog-content { max-height: calc(100dvh - 12px); }
  .organization-dialog-body { padding: 18px 15px 20px; }
  .organization-form-grid { grid-template-columns: 1fr; }
  .organization-form-grid .field { grid-column: auto; }
  .login-page-body { padding: 14px; }
  .login-panel { min-height: calc(100dvh - 30px); padding: 30px 28px 34px; }
  .login-mobile-brand { margin-bottom: 38px; }
  .login-heading h2 { font-size: 27px; }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 15px 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-brand {
    padding-bottom: 14px;
  }

  .nav-section-label,
  .sidebar-account {
    display: none;
  }

  .nav-list {
    display: flex;
    padding-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-list::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    min-height: 39px;
    flex: 0 0 auto;
    padding: 0 11px;
  }

  .nav-icon {
    display: none;
  }

  .main-content {
    padding: 0 17px 34px;
  }

  .topbar {
    min-height: 64px;
  }

  .topbar-context,
  .topbar-user {
    display: none;
  }

  .topbar h1 {
    font-size: 19px;
  }

  .topbar .secondary-button {
    min-height: 36px;
    padding: 0 11px;
  }

  .content-section {
    padding-top: 24px;
  }

  .welcome-panel {
    display: block;
    min-height: 0;
    padding: 24px 21px;
  }

  .welcome-graphic {
    display: none;
  }

  .metric-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
  }

  .button-group {
    width: 100%;
    justify-content: flex-start;
  }

  .button-group > button {
    flex: 1 1 140px;
  }

  .filter-bar {
    grid-template-columns: 1fr;
  }

  .filter-actions .primary-button,
  .filter-actions .secondary-button {
    flex: 1;
  }

  .form-grid {
    grid-template-columns: 1fr;
    padding: 19px;
  }

  .field-span-2 {
    grid-column: auto;
  }

  .modal-header,
  .modal-footer {
    padding-right: 18px;
    padding-left: 18px;
  }

  .quick-links {
    grid-template-columns: 1fr;
  }

  .option-row {
    grid-template-columns: 48px minmax(0, 1fr) 34px;
  }

  .paper-project-filter { grid-template-columns: 1fr 1fr; }
  .paper-project-filter .compact-field { grid-column: 1 / -1; }
  .paper-project-card { min-height: 260px; }
  .paper-card-footer { align-items: flex-start; flex-direction: column; }
  .paper-card-actions { width: 100%; justify-content: space-between; }
  .template-choice-row { flex-direction: column; }

  .paper-builder-page { overflow: auto; }
  .paper-builder-header { position: sticky; z-index: 8; top: 0; height: auto; min-height: 62px; grid-template-columns: minmax(0,1fr) auto; padding: 9px 12px; }
  .builder-title-area strong { max-width: 175px; }
  .builder-view-tabs { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .builder-view-tab { flex: 1; padding: 0 10px; }
  .builder-header-actions .paper-status { display: none; }
  .builder-header-actions .primary-button { min-height: 36px; padding: 0 11px; }
  .paper-builder-subbar { height: 45px; padding: 0 14px; }
  .builder-edit-view { display: flex; height: auto; min-height: calc(100vh - 145px); flex-direction: column; }
  .builder-palette, .builder-property-panel { overflow: visible; border: 0; }
  .builder-palette { order: 1; padding: 14px; border-bottom: 1px solid var(--line); }
  .build-method-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .build-method { min-height: 60px; grid-template-columns: 32px 1fr; padding: 8px; }
  .method-icon { width: 30px; height: 30px; }
  .palette-summary { display: none; }
  .paper-canvas-wrap { order: 2; overflow: visible; padding: 12px; }
  .paper-canvas { min-height: 520px; padding: 22px 14px; }
  .paper-canvas-header { padding-right: 0; }
  .paper-score-block { position: static; margin: 14px auto 0; }
  .question-option-preview { grid-template-columns: 1fr; margin-left: 0; }
  .question-item-meta, .question-answer-preview { margin-left: 0; }
  .question-file-placeholder { margin-left: 0; }
  .inline-editor-grid { grid-template-columns: 1fr; padding: 14px; }
  .inline-editor-content, .inline-editor-wide { grid-column: auto; }
  .visual-choice-option-row { grid-template-columns: 22px 27px minmax(0, 1fr) auto 28px; gap: 5px; padding-left: 7px; }
  .editor-label-row { align-items: flex-start; flex-direction: column; }
  .asset-add-actions { justify-content: flex-start; }
  .question-asset-gallery { grid-template-columns: 1fr; }
  .fill-composer-toolbar { align-items: flex-start; flex-direction: column; }
  .fill-blank-row { grid-template-columns: 42px minmax(0, 1fr) 90px 28px; gap: 5px; }
  .inline-editor-actions { padding: 12px 14px 15px; }
  .preview-inline-blank { width: 92px; }
  .attachment-preview-body { min-height: 190px; }
  .builder-property-panel { order: 3; padding: 17px; border-top: 1px solid var(--line); }
  .property-empty { min-height: 160px; }
  .builder-settings-view { display: block; height: auto; padding: 12px; }
  .settings-side-nav { display: flex; margin-bottom: 10px; overflow-x: auto; }
  .settings-side-nav button { flex: 0 0 auto; }
  .settings-fields-grid { grid-template-columns: 1fr; }
  .settings-fields-grid .field-span-2 { grid-column: auto; }
  .builder-preview-view { height: auto; padding: 12px; }
  .paper-preview-sheet { padding: 24px 15px; }
  .preview-question-options { grid-template-columns: 1fr; }
  .builder-dialog-filter { grid-template-columns: 1fr 1fr; }
  .builder-dialog-filter input { grid-column: 1 / -1; }
  .manual-bank-browser { grid-template-columns: 180px minmax(0,1fr); }
  .manual-question-row { min-width: 0; grid-template-columns: 24px 78px minmax(0,1fr) 55px; grid-template-rows: auto auto; gap: 5px 7px; }
  .manual-question-row > input { grid-row: 1 / 3; }
  .manual-question-row > :nth-child(4) { grid-column: 4; grid-row: 1; }
  .manual-question-row > :nth-child(5) { grid-column: 3; grid-row: 2; color: #8b96a7; }
  .manual-question-row > :nth-child(6) { grid-column: 4; grid-row: 2; text-align: center; }
  .manual-question-content { white-space: normal; }
  .manual-question-list { overflow-x: hidden; }
  .random-rule-columns { display: none; }
  .random-range-columns { display: none; }
  .random-rule-row { grid-template-columns: 1fr 1fr; }
  .random-range-rule-row { grid-template-columns: 1fr 1fr; }
  .random-rule-row .rule-type-field { grid-column: 1 / -1; }
  .random-range-rule-row .range-start-field, .random-range-rule-row .range-end-field { grid-column: 1 / -1; }
  .random-rule-field { display: grid; gap: 4px; }
  .random-rule-field > small { display: block; color: #8894a6; font-size: 9px; }
  .random-rule-field .rule-pool, .random-rule-field .rule-subtotal, .random-rule-field .range-pool, .random-rule-field .range-subtotal { display: flex; height: 38px; align-items: center; padding: 0 9px; border: 1px solid #d9e0eb; border-radius: 5px; background: #fff; text-align: left; }
  .random-rule-row button, .random-range-rule-row button { justify-self: end; }
  .ai-generate-form { grid-template-columns: 1fr; padding: 18px; }
  .ai-generate-form .field-span-2, .ai-type-fieldset { grid-column: auto; }
  .ai-candidate-meta { grid-template-columns: 1fr 1fr; }
  .ai-meta-knowledge { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .review-detail-grid { grid-template-columns: 1fr; }
  .review-answer-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .result-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-summary-strip > div:nth-child(2) { border-right: 0; }
  .result-summary-strip > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 520px) {
  .ai-candidate-section { padding-right: 12px; padding-left: 12px; }
  .ai-candidate-meta, .ai-candidate-detail-grid { grid-template-columns: 1fr; }
  .ai-meta-knowledge, .ai-candidate-options-field { grid-column: auto; }
  .ai-candidate-selection, .ai-candidate-editor, .ai-candidate-meta { padding-right: 12px; padding-left: 12px; }
  .ai-candidate-details { margin-right: 12px; margin-left: 12px; }
  .manual-bank-browser { display: block; min-height: 0; }
  .manual-folder-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .manual-folder-heading { height: 39px; }
  .manual-folder-tree { display: flex; max-height: none; gap: 5px; padding: 7px 9px; overflow-x: auto; }
  .manual-folder-group, .manual-folder-children { display: contents; }
  .manual-folder-children::before { display: none; }
  .manual-folder-node, .manual-folder-node.level-1 { width: auto; min-height: 32px; flex: 0 0 auto; grid-template-columns: 17px auto auto; margin: 0; padding: 5px 8px; border: 1px solid #e1e6ee; background: #fff; }
  .manual-folder-node.active { border-color: #bad1f2; background: #e7f0fc; }
  .manual-current-folder { min-height: 42px; padding: 0 12px; }
  .manual-question-list-head { min-height: 40px; padding: 0 12px; }
  .manual-question-list { max-height: 280px; }
  .manual-question-row { grid-template-columns: 22px 70px minmax(0,1fr) 50px; padding: 9px 11px; }
  .manual-question-pane > .form-message { padding-right: 12px; padding-left: 12px; }
  .random-delivery-summary { margin-right: 14px; margin-left: 14px; }
  .random-rule-header { padding-right: 14px; padding-left: 14px; }
  .random-rule-list { padding-right: 14px; padding-left: 14px; }
}

@media (max-width: 720px) {
  .review-dialog .modal-content, .result-detail-dialog .modal-content { width: calc(100vw - 20px); }
  .review-answer-pane, .review-score-pane, .settings-band { padding: 18px 15px; }
  .result-summary-strip, .result-answer-columns { grid-template-columns: 1fr; }
  .result-summary-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .result-answer-list { padding: 4px 15px 16px; }
  .result-answer-item header { display: block; }
  .result-answer-item header span { display: block; margin-top: 7px; }
  .settings-page-actions { padding: 15px; }
}

@media (max-width: 1100px) {
  .review-workbench { grid-template-columns: 340px minmax(0, 1fr); }
  .review-workspace .review-detail-grid { grid-template-columns: minmax(0, 1fr) 310px; }
}

@media (max-width: 920px) {
  .review-main-content { padding-bottom: 34px; }
  .review-workbench { height: auto; min-height: 0; overflow: visible; grid-template-columns: 1fr; }
  .review-queue-pane { height: 370px; border-right: 0; border-bottom: 1px solid #e3e8f0; }
  .review-workspace-pane { overflow: visible; }
  .review-workspace { height: auto; }
  .review-workspace .review-detail-grid { display: block; }
  .review-workspace .review-answer-pane,
  .review-workspace .review-score-pane { overflow: visible; }
  .review-workspace-empty { min-height: 320px; }
}

@media (max-width: 720px) {
  .result-detail-dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); max-height: calc(100vh - 12px); }
  .result-detail-dialog .modal-content { width: 100%; }
  .result-detail-header { min-height: 68px; }
  .result-detail-header .modal-subtitle { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .result-detail-dialog .result-answer-list { padding-right: 15px; padding-left: 15px; }
  .result-detail-footer { align-items: stretch; flex-direction: column; }
  .result-admin-actions, .result-detail-export-actions { width: 100%; }
  .result-admin-actions > button, .result-detail-export-actions > button { flex: 1; }
  .review-workspace-header { padding-right: 16px; padding-left: 16px; }
  .review-task-meta { align-items: flex-start; flex-direction: column; }
  .account-role-tabs { overflow-x: auto; padding: 0 8px; }
  .account-role-tab { min-width: max-content; padding: 0 13px; }
  .organization-workspace { display: block; min-height: 0; }
  .organization-tree-panel { border-right: 0; border-bottom: 1px solid #e4e9f1; }
  .organization-tree { max-height: 300px; overflow: auto; }
  .organization-detail-panel { padding: 20px 15px; }
  .organization-detail-header { display: block; }
  .organization-detail-header .button-group { margin-top: 14px; }
  .organization-metrics { grid-template-columns: 1fr; }
  .organization-metrics > div { border-right: 0; border-bottom: 1px solid #e5eaf1; }
  .organization-metrics > div:last-child { border-bottom: 0; }
  .organization-members-heading { align-items: flex-start; flex-direction: column; }
  .audience-mode-control, .audience-custom-panel { grid-template-columns: 1fr; }
  .audience-selected-summary { grid-column: auto; }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .organization-workspace { grid-template-columns: 270px minmax(0, 1fr); }
  .organization-detail-header { display: block; }
  .organization-detail-header .button-group { margin-top: 14px; }
}

/* Supervision center */
.supervision-main { min-width: 0; }
.supervision-page { padding-bottom: 34px; }
.supervision-toolbar { display: grid; min-height: 78px; grid-template-columns: minmax(300px, 1fr) auto auto; align-items: center; gap: 22px; padding: 14px 0 18px; border-bottom: 1px solid #e4e9f0; }
.supervision-exam-picker label { display: block; margin-bottom: 6px; color: #7d899a; font-size: 11px; }
.supervision-exam-picker { min-width: 0; }
.supervision-exam-select { position: relative; width: min(520px, 100%); }
.supervision-exam-select select { width: 100%; min-height: 44px; overflow: hidden; appearance: none; padding: 0 42px 0 43px; border: 1px solid #d9e1ec; border-radius: 6px; color: #34445d; background: #ffffff; box-shadow: 0 3px 12px rgba(43, 59, 86, .04); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.supervision-exam-select:hover select { border-color: #afbee2; background: #fbfcff; }
.supervision-exam-select:focus-within select { border-color: #60a5fa; outline: 2px solid #dbeafe; outline-offset: 0; }
.supervision-exam-select-icon, .supervision-exam-select-arrow { position: absolute; z-index: 1; top: 50%; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; transform: translateY(-50%); }
.supervision-exam-select-icon { left: 13px; width: 20px; height: 20px; color: #2563eb; }
.supervision-exam-select-arrow { right: 13px; width: 17px; height: 17px; color: #8190a6; }
.supervision-exam-select-icon svg { width: 19px; height: 19px; }
.supervision-exam-select-arrow svg { width: 15px; height: 15px; }
.supervision-live-state { display: grid; grid-template-columns: 9px auto; align-items: center; column-gap: 8px; }
.supervision-live-state > span { width: 9px; height: 9px; grid-row: 1 / span 2; border-radius: 50%; background: #aab3c0; }
.supervision-live-state.connected > span { background: #2ba77d; box-shadow: 0 0 0 4px #e4f6ef; }
.supervision-live-state strong { color: #536178; font-size: 12px; }
.supervision-live-state small { color: #929daf; font-size: 10px; }
.supervision-toolbar .button-group svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: middle; }
.supervision-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid #e4e9f0; background: #ffffff; }
.supervision-summary button { min-width: 0; padding: 19px 18px; border: 0; border-right: 1px solid #e7ebf1; color: inherit; background: transparent; text-align: left; }
.supervision-summary button:last-child { border-right: 0; }
.supervision-summary button:hover { background: #f7f9fc; }
.supervision-summary span, .supervision-summary strong, .supervision-summary small { display: block; }
.supervision-summary span { color: #788599; font-size: 11px; }
.supervision-summary strong { margin: 4px 0 2px; color: #2d3c55; font-size: 26px; }
.supervision-summary small { overflow: hidden; color: #9aa4b3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.supervision-summary button:nth-child(2) strong { color: #218063; }
.supervision-summary button:nth-child(3) strong { color: #c2574b; }
.supervision-summary button:nth-child(4) strong { color: #9b7529; }
.supervision-filter { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 0.75fr)) auto auto; align-items: end; gap: 10px; padding: 17px 0; border-bottom: 1px solid #e7ebf1; }
.supervision-filter .compact-field { min-width: 0; }
.supervision-filter input, .supervision-filter select { width: 100%; }
.supervision-filter button svg { width: 15px; height: 15px; margin-right: 5px; vertical-align: middle; }
.supervision-grid-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 20px 0 12px; }
.supervision-grid-heading strong, .supervision-grid-heading span { display: block; }
.supervision-grid-heading strong { color: #2f3e57; font-size: 16px; }
.supervision-grid-heading div span { margin-top: 4px; }
.supervision-candidate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 13px; }
.supervision-candidate-card { min-width: 0; overflow: hidden; border: 1px solid #e0e6ef; border-radius: 7px; background: #ffffff; cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }
.supervision-candidate-card:hover, .supervision-candidate-card:focus-visible { border-color: #93c5fd; outline: 0; box-shadow: 0 8px 24px rgba(52, 68, 99, 0.1); transform: translateY(-1px); }
.supervision-candidate-card > header { display: flex; min-height: 72px; align-items: center; gap: 9px; padding: 11px 13px; }
.supervision-candidate-card > header > div { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 10px; overflow: hidden; }
.supervision-candidate-card > header > div > div { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.candidate-avatar, #supervision-person-avatar { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; border-radius: 6px; color: #1d4ed8; background: #eaf4ff; font-size: 14px; font-weight: 700; }
.supervision-candidate-card > header > div > div strong, .supervision-candidate-card > header > div > div span { display: block; }
.supervision-candidate-card > header > div > div strong { overflow: hidden; color: #32415a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.supervision-candidate-card > header > div > div span { overflow: hidden; width: 100%; margin-top: 3px; color: #8994a5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.monitor-status { display: inline-flex; min-width: 58px; min-height: 25px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 8px; border-radius: 4px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.monitor-status.online { color: #167257; background: #e7f6f0; }
.monitor-status.offline { color: #b64e43; background: #fff0ed; }
.monitor-status.not-started { color: #7c8798; background: #f0f2f5; }
.monitor-status.submitted, .monitor-status.graded { color: #1d4ed8; background: #eff6ff; }
.candidate-screen { display: grid; aspect-ratio: 16 / 9; overflow: hidden; place-items: center; border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; background: #eef2f6; }
.candidate-screen img { width: 100%; height: 100%; object-fit: cover; }
.candidate-screen > div { display: flex; align-items: center; gap: 8px; color: #8a96a8; font-size: 11px; }
.candidate-screen > div span { display: inline-flex; }
.candidate-screen > div svg { width: 20px; height: 20px; }
.candidate-progress { padding: 12px 13px 8px; }
.candidate-progress > div { display: flex; align-items: center; justify-content: space-between; color: #7e8a9d; font-size: 10px; }
.candidate-progress > div strong { color: #4a5a73; font-size: 10px; }
.candidate-progress > i { display: block; height: 5px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: #e8edf3; }
.candidate-progress > i b { display: block; height: 100%; border-radius: 3px; background: #63b49a; }
.candidate-activity { min-width: 0; padding: 3px 13px 10px; }
.candidate-activity span, .candidate-activity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candidate-activity span { color: #42516a; font-size: 11px; font-weight: 600; }
.candidate-activity small { margin-top: 3px; color: #8d98a9; font-size: 9px; }
.supervision-candidate-card > footer { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 13px; border-top: 1px solid #edf1f5; color: #8e99a9; font-size: 9px; }
.risk-badge { display: inline-flex; min-height: 22px; align-items: center; padding: 0 7px; border-radius: 4px; font-weight: 600; }
.risk-badge.low { color: #22785f; background: #edf8f4; }
.risk-badge.medium { color: #8b681e; background: #fff7df; }
.risk-badge.high { color: #b64c42; background: #fff0ed; }
.supervision-empty { display: grid; min-height: 300px; place-items: center; align-content: center; color: #8b96a7; text-align: center; }
.supervision-empty > span { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: 7px; color: #3b82f6; background: #eff6ff; }
.supervision-empty svg { width: 24px; height: 24px; }
.supervision-empty strong { color: #536178; }
.supervision-empty p { margin: 6px 0 0; font-size: 11px; }

.supervision-detail-dialog { width: calc(100vw - 24px); height: calc(100vh - 24px); max-height: calc(100vh - 24px); overflow: hidden; }
.supervision-detail-content { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr); }
.supervision-detail-header { min-height: 72px; }
.supervision-person-heading { display: flex; min-width: 0; align-items: center; gap: 11px; }
.supervision-person-heading h2 { overflow: hidden; max-width: 380px; text-overflow: ellipsis; white-space: nowrap; }
.supervision-person-heading .monitor-status { margin-left: 6px; }
.supervision-detail-header .button-group svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: middle; }
.supervision-detail-layout { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 360px; }
.supervision-workspace { display: grid; min-width: 0; min-height: 0; grid-template-rows: 52px minmax(0, 1fr); overflow: hidden; border-right: 1px solid #e3e8f0; background: #ffffff; }
.supervision-detail-tabs { display: flex; align-items: end; gap: 4px; padding: 0 20px; border-bottom: 1px solid #e3e8f0; background: #f8fafc; }
.supervision-detail-tabs button { position: relative; display: inline-flex; height: 51px; align-items: center; gap: 7px; padding: 0 15px; border: 0; border-radius: 0; color: #768397; background: transparent; font-size: 11px; }
.supervision-detail-tabs button::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; content: ""; background: transparent; }
.supervision-detail-tabs button:hover { color: #4c638c; background: #f1f5fa; }
.supervision-detail-tabs button.active { color: #2563eb; font-weight: 600; }
.supervision-detail-tabs button.active::after { background: #3b82f6; }
.supervision-detail-tabs button span { display: inline-flex; }
.supervision-detail-tabs button svg { width: 16px; height: 16px; }
.supervision-detail-tabs button small { min-width: 20px; padding: 2px 5px; border-radius: 9px; color: #71809a; background: #e8edf5; text-align: center; font-size: 8px; }
.supervision-tab-panel { min-width: 0; min-height: 0; }
.supervision-tab-panel[hidden] { display: none; }
.supervision-live-panel { display: grid; grid-template-rows: 48px minmax(260px, 1fr) auto; padding: 12px 20px 18px; }
.live-frame-badge { padding: 5px 8px; border-radius: 4px; color: #26745f; background: #eaf7f2; font-size: 9px; font-weight: 600; }
.supervision-live-note { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-left: 3px solid #76ad9d; color: #65748a; background: #f4faf8; }
.supervision-live-note > span { display: inline-flex; color: #38806c; }
.supervision-live-note svg { width: 19px; height: 19px; }
.supervision-live-note div { display: grid; gap: 2px; }
.supervision-live-note strong { color: #3f5e57; font-size: 10px; }
.supervision-live-note div span { font-size: 9px; line-height: 1.5; }
.supervision-no-screen small { color: #7f8c9f; font-size: 9px; }
.supervision-recordings-panel { display: grid; grid-template-rows: 48px minmax(260px, 1fr) minmax(90px, auto); padding: 12px 20px 18px; overflow: hidden; }
.recording-player-heading { grid-row: 1; grid-column: 1; }
.recording-player-stage { grid-row: 2; grid-column: 1; }
.recording-list { grid-row: 3; grid-column: 1; }
.recording-player-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.recording-player-heading > div:first-child { display: grid; gap: 3px; }
.recording-player-heading strong { color: #3a4961; font-size: 13px; }
.recording-player-heading span { color: #909cad; font-size: 9px; }
.recording-page-actions { display: flex; align-items: center; gap: 8px; }
.recording-page-actions .icon-tool-button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid #dce3ed; border-radius: 4px; color: #66758d; background: #ffffff; }
.recording-page-actions .icon-tool-button:last-child svg { transform: rotate(180deg); }
.recording-page-actions svg { width: 15px; height: 15px; }
.recording-player-stage { display: grid; min-height: 0; overflow: hidden; place-items: center; border: 1px solid #dfe5ed; border-radius: 6px; background: #151b25; }
.recording-player-stage video { width: 100%; height: 100%; object-fit: contain; background: #151b25; }
.recording-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 8px; padding-top: 12px; overflow-x: auto; }
.recording-list.loading { opacity: 0.55; pointer-events: none; }
.recording-row { display: grid; min-width: 0; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #e0e5ed; border-radius: 5px; color: #53627a; background: #f9fafc; text-align: left; }
.recording-row:hover, .recording-row.active { border-color: #60a5fa; background: #eff6ff; }
.recording-row-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #2563eb; background: #eaf4ff; }
.recording-row-icon svg { width: 17px; height: 17px; }
.recording-row > span:last-child { display: grid; min-width: 0; gap: 3px; }
.recording-row strong, .recording-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recording-row strong { color: #46556e; font-size: 10px; }
.recording-row small { color: #8995a6; font-size: 9px; }
.recording-empty { z-index: 2; display: grid; min-height: 120px; grid-row: 2 / 4; grid-column: 1; place-items: center; align-content: center; gap: 5px; color: #8a96a7; background: #ffffff; text-align: center; }
.recording-empty span { display: inline-flex; }
.recording-empty svg { width: 24px; height: 24px; }
.recording-empty strong { color: #607089; font-size: 11px; }
.recording-empty p { margin: 0; font-size: 9px; }
.supervision-audit-panel { display: grid; grid-template-rows: 52px minmax(0, 1fr); padding: 10px 20px 18px; overflow: hidden; }
.supervision-screen-column { display: grid; min-height: 0; grid-template-rows: auto minmax(250px, 1.2fr) 76px auto minmax(170px, 0.8fr); padding: 17px 20px 20px; overflow: hidden; border-right: 1px solid #e3e8f0; }
.supervision-screen-heading, .supervision-timeline-heading { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 12px; }
.supervision-screen-heading strong, .supervision-screen-heading span, .supervision-timeline-heading strong, .supervision-timeline-heading span { display: block; }
.supervision-screen-heading strong, .supervision-timeline-heading strong { color: #3a4961; font-size: 13px; }
.supervision-screen-heading div span { margin-top: 2px; color: #929dad; font-size: 9px; }
.supervision-screen-stage { display: grid; min-height: 0; overflow: hidden; place-items: center; border: 1px solid #dfe5ed; border-radius: 6px; background: #151b25; }
.supervision-screen-stage img, .supervision-screen-stage video { display: block; width: 100%; height: 100%; object-fit: contain; background: #151b25; }
.supervision-no-screen { display: grid; place-items: center; gap: 9px; color: #aeb8c6; font-size: 11px; }
.supervision-no-screen span { display: inline-flex; }
.supervision-no-screen svg { width: 30px; height: 30px; }
.supervision-media-strip { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 9px 0; overflow-x: auto; }
.supervision-media-thumb { display: grid; width: 88px; height: 56px; flex: 0 0 88px; overflow: hidden; place-items: center; padding: 0; border: 1px solid #dfe5ed; border-radius: 5px; color: #5d6f8d; background: #edf1f6; font-size: 9px; }
.supervision-media-thumb:hover { border-color: #60a5fa; }
.supervision-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.supervision-media-thumb.recording { gap: 3px; }
.supervision-media-thumb.recording span { display: inline-flex; }
.supervision-media-thumb.recording svg { width: 20px; height: 20px; }
.supervision-timeline-heading { border-top: 1px solid #e7ebf1; }
.supervision-timeline-heading > div span { margin-top: 2px; }
.supervision-timeline-heading select { width: 150px; min-height: 32px; }
.audit-heading-actions { display: flex; align-items: center; gap: 10px; }
.audit-heading-actions .recording-page-actions > span { margin: 0; color: #7b8799; white-space: nowrap; font-size: 9px; }
.supervision-event-list { min-height: 0; overflow-y: auto; padding: 3px 5px 5px 0; }
.supervision-event-list.loading { opacity: 0.55; pointer-events: none; }
.supervision-event { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; padding: 8px 0; }
.supervision-event-marker { width: 8px; height: 8px; margin-top: 5px; border: 2px solid #7190dc; border-radius: 50%; background: #ffffff; }
.supervision-event.warning .supervision-event-marker { border-color: #d0a23d; }
.supervision-event.high .supervision-event-marker { border-color: #d06458; }
.supervision-event.rule-hit { margin: 2px 0; padding: 9px 8px; border-left: 3px solid #dc2626; background: #fff5f5; }
.supervision-event.rule-hit .supervision-event-marker { border-color: #dc2626; background: #dc2626; }
.supervision-event.rule-hit header strong { color: #b91c1c; }
.supervision-event.rule-hit p { color: #9f3535; }
.supervision-event header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.supervision-event header strong { color: #46556d; font-size: 11px; }
.supervision-event header time { color: #99a3b2; font-size: 9px; }
.supervision-event p { margin: 3px 0 0; overflow: hidden; color: #7c899c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.supervision-event details { margin-top: 6px; color: #61718a; font-size: 9px; }
.supervision-event summary { cursor: pointer; }
.supervision-event pre { max-height: 110px; margin: 6px 0 0; overflow: auto; padding: 8px; border: 1px solid #e5e9ef; border-radius: 4px; background: #f7f9fb; color: #40506a; white-space: pre-wrap; word-break: break-word; }
.supervision-event-empty { padding: 30px 0; color: #909bab; text-align: center; font-size: 10px; }
.supervision-status-column { min-height: 0; overflow-y: auto; background: #fafbfd; }
.supervision-detail-refresh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e4e8ef; background: #ffffff; }
.supervision-detail-refresh span { color: #29785f; font-size: 11px; font-weight: 600; }
.supervision-detail-refresh small { color: #929dac; font-size: 9px; }
.candidate-live-metrics { display: grid; grid-template-columns: 92px minmax(0, 1fr); margin: 0; padding: 9px 16px; }
.candidate-live-metrics dt, .candidate-live-metrics dd { min-width: 0; margin: 0; padding: 7px 0; border-bottom: 1px solid #e8ecf2; font-size: 10px; }
.candidate-live-metrics dt { color: #8792a3; }
.candidate-live-metrics dd { overflow: hidden; color: #42516a; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.candidate-command-history, .supervision-review-panel { padding: 15px 16px; border-top: 1px solid #e3e8ef; }
.candidate-command-history > header, .supervision-review-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.candidate-command-history > header strong, .supervision-review-panel > header strong { color: #3f4e66; font-size: 12px; }
.candidate-command-history > header span, .supervision-review-panel > header span { max-width: 210px; text-align: right; font-size: 9px; line-height: 1.4; }
#candidate-command-list { color: #8b96a6; font-size: 9px; }
#candidate-command-list > div { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid #e9edf2; }
#candidate-command-list > div > span { display: inline-flex; width: 25px; height: 25px; flex: 0 0 25px; align-items: center; justify-content: center; border-radius: 4px; color: #2563eb; background: #eff6ff; }
#candidate-command-list svg { width: 14px; height: 14px; }
#candidate-command-list strong, #candidate-command-list small { display: block; }
#candidate-command-list strong { color: #526078; font-size: 10px; }
#candidate-command-list small { margin-top: 2px; color: #929cac; font-size: 8px; }
.supervision-review-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.supervision-review-options label { cursor: pointer; }
.supervision-review-options input { position: absolute; opacity: 0; }
.supervision-review-options span { display: flex; min-height: 34px; align-items: center; justify-content: center; border: 1px solid #dce2eb; border-radius: 4px; color: #6a778b; background: #ffffff; font-size: 10px; }
.supervision-review-options input:checked + span { border-color: #60a5fa; color: #1d4ed8; background: #eff6ff; font-weight: 600; }
.supervision-review-panel textarea { width: 100%; margin: 9px 0; resize: vertical; }
.supervision-review-save-state { min-height: 18px; margin: -2px 0 8px; color: #8793a5; font-size: 10px; line-height: 1.5; }
.supervision-review-save-state.dirty { color: #b45309; }
.supervision-review-save-state.saved { color: #15803d; }
.supervision-review-save-state.error { color: #dc2626; }
.supervision-review-panel > button { width: 100%; }

@media (max-width: 1180px) {
  .supervision-toolbar { grid-template-columns: minmax(260px, 1fr) auto; }
  .supervision-toolbar .supervision-live-state { display: none; }
  .supervision-filter { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(145px, 0.7fr)) auto auto; }
  .supervision-filter .compact-field:nth-child(4) { display: none; }
  .supervision-detail-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 820px) {
  .supervision-toolbar { grid-template-columns: 1fr; }
  .supervision-toolbar .button-group { justify-content: flex-start; }
  .supervision-summary { grid-template-columns: repeat(2, 1fr); }
  .supervision-summary button { border-bottom: 1px solid #e7ebf1; }
  .supervision-filter { grid-template-columns: 1fr 1fr; }
  .supervision-filter .compact-field:nth-child(4) { display: block; }
  .supervision-search { grid-column: 1 / -1; }
  .supervision-detail-dialog { width: calc(100vw - 10px); height: calc(100vh - 10px); max-height: calc(100vh - 10px); }
  .supervision-detail-header { align-items: flex-start; flex-direction: column; }
  .supervision-detail-header .button-group { width: 100%; }
  .supervision-detail-layout { display: block; overflow-y: auto; }
  .supervision-workspace { min-height: 650px; border-right: 0; border-bottom: 1px solid #e3e8f0; }
  .supervision-detail-tabs { overflow-x: auto; padding: 0 10px; }
  .supervision-detail-tabs button { flex: 0 0 auto; padding: 0 10px; }
  .supervision-live-panel, .supervision-recordings-panel, .supervision-audit-panel { padding-right: 12px; padding-left: 12px; }
  .supervision-timeline-heading { align-items: flex-start; flex-direction: column; padding: 7px 0; }
  .audit-heading-actions { width: 100%; justify-content: space-between; }
  .supervision-screen-column { height: auto; min-height: 720px; overflow: visible; border-right: 0; }
  .supervision-status-column { overflow: visible; }
  .supervision-mode-grid, .supervision-toggle-grid, .supervision-parameter-grid { grid-template-columns: 1fr; }
  .supervision-toggle-grid .setting-toggle-row:nth-child(odd) { border-right: 0; }
}