:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #687386;
  --line: #e5e9f0;
  --blue: #2468f2;
  --blue-dark: #1853cc;
  --blue-soft: #eef4ff;
  --green: #11875d;
  --green-soft: #eaf8f2;
  --orange: #aa5b12;
  --orange-soft: #fff4e7;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --sidebar: #111a2c;
  --danger: #c83d4c;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; white-space: nowrap; }
[hidden] { display: none !important; }

.login-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(360px, .85fr);
  background:
    radial-gradient(circle at 18% 20%, rgba(67, 126, 255, .3), transparent 35%),
    linear-gradient(135deg, #0d1830 0 50%, #f6f8fc 50%);
  align-items: center;
  gap: 8vw;
  padding: 8vw;
}
.login-brand { color: white; max-width: 600px; }
.login-brand h1 { font-size: clamp(38px, 5vw, 72px); line-height: 1.08; margin: 18px 0; }
.login-brand > p:last-child { max-width: 460px; color: #c9d6ef; font-size: 18px; line-height: 1.8; }
.brand-mark { display: block; width: 56px; height: 56px; border-radius: 17px; object-fit: cover; box-shadow: 0 14px 34px rgba(36, 104, 242, .35); }
.brand-mark.small { width: 38px; height: 38px; border-radius: 11px; }
.eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #6c83a8; text-transform: uppercase; }
.login-brand .eyebrow { color: #83a9ff; margin-top: 30px; }
.login-card { width: min(430px, 100%); padding: 42px; background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.75); border-radius: 26px; box-shadow: 0 30px 80px rgba(12, 27, 53, .18); display: grid; gap: 22px; }
.login-card h2, .dialog-card h2 { margin: 0 0 6px; font-size: 26px; }
.muted { color: var(--muted); line-height: 1.6; margin: 0; }
label { display: grid; gap: 8px; color: #3f4b60; font-size: 14px; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid #d7dde7; border-radius: 10px; padding: 0 13px; color: var(--ink); background: white; outline: none; }
input, select { height: 47px; }
textarea { min-height: 128px; padding: 13px; line-height: 1.65; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,104,242,.12); }
.button { min-height: 40px; border-radius: 10px; border: 1px solid transparent; padding: 0 18px; font-weight: 700; }
.button-primary { background: var(--blue); color: white; box-shadow: 0 7px 18px rgba(36,104,242,.18); }
.button-primary:hover { background: var(--blue-dark); }
.button-secondary { background: white; border-color: #dce1e9; color: #445064; }
.button-danger { background: #fff0f1; border-color: #ffd4d8; color: var(--danger); }
.button-warning { background: #fff7e8; border-color: #f6ddac; color: #8a5a16; }
.form-message { min-height: 20px; color: var(--danger); margin: 0; font-size: 13px; }
.autosave-status { min-height: 18px; margin: -10px 0 0; color: #7a8699; font-size: 12px; text-align: right; }
.autosave-status[data-state="saving"], .autosave-status[data-state="pending"] { color: #9b6b18; }
.autosave-status[data-state="saved"] { color: var(--green); }
.autosave-status[data-state="error"] { color: var(--danger); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 15px; background: var(--sidebar); color: white; display: flex; flex-direction: column; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 25px; }
.sidebar-brand div { display: grid; gap: 2px; }
.sidebar-brand small, .sidebar-user small { color: #8f9bb1; }
nav { display: grid; gap: 5px; }
.nav-stack { display: grid; gap: 5px; }
.nav-heading { color: #667187; font-size: 10px; font-weight: 800; letter-spacing: .12em; padding: 19px 12px 8px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 43px; padding: 0 13px; border: 0; border-radius: 10px; color: #aeb8ca; background: transparent; text-align: left; }
.nav-item:hover { background: rgba(255,255,255,.06); color: white; }
.nav-item.active { background: var(--blue); color: white; box-shadow: 0 8px 22px rgba(36,104,242,.25); }
.readonly-nav-group { display: grid; gap: 5px; margin-top: 3px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.08); }
.readonly-nav-toggle { display: grid; grid-template-columns: 19px minmax(0, 1fr) auto 15px; align-items: center; gap: 10px; width: 100%; min-height: 39px; padding: 0 13px; border: 0; border-radius: 9px; color: #8794aa; background: transparent; text-align: left; }
.readonly-nav-toggle:hover { color: white; background: rgba(255,255,255,.05); }
.readonly-nav-toggle small { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; color: #b8c2d3; background: rgba(255,255,255,.08); font-size: 10px; }
.readonly-chevron { transition: transform .18s ease; }
.readonly-nav-toggle[aria-expanded="true"] .readonly-chevron { transform: rotate(180deg); }
.readonly-nav-items { padding-left: 10px; }
.readonly-nav-items .nav-item { min-height: 39px; color: #8996ab; }
.readonly-nav-items .nav-item::after { content: "只读"; margin-left: auto; color: #718097; font-size: 9px; }
.nav-icon { display: grid; place-items: center; flex: 0 0 19px; width: 19px; height: 19px; }
.nav-icon svg, .icon-button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-user { margin-top: auto; padding: 14px 8px 2px; border-top: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: 36px 1fr 30px; align-items: center; gap: 10px; }
.sidebar-user div { display: grid; min-width: 0; }
.sidebar-user strong { overflow: hidden; text-overflow: ellipsis; }
.avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #dce8ff; color: var(--blue); font-weight: 800; }
.icon-button { display: grid; place-items: center; min-width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #8390a6; font-size: 20px; }
.icon-button:hover { background: rgba(124,139,163,.12); color: var(--ink); }
.sidebar .icon-button:hover { color: white; }
.sidebar-user .icon-button svg { width: 18px; height: 18px; }

.workspace { min-width: 0; }
.topbar { height: 96px; padding: 20px 34px; background: white; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { margin: 0; font-size: 25px; }
.topbar-actions { display: flex; gap: 8px; }
.status-chip { padding: 7px 11px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.status-chip.human { color: var(--green); background: var(--green-soft); }
.status-chip.paused { color: var(--orange); background: var(--orange-soft); }
.page { display: none; padding: 28px 34px 50px; }
.page.active { display: block; }
.welcome-panel { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 31px 34px; border-radius: 19px; color: white; background: linear-gradient(116deg, #1f5fec, #3a7afb 62%, #5c8ef6); box-shadow: 0 18px 40px rgba(36,104,242,.17); }
.welcome-panel h2 { margin: 4px 0 10px; font-size: 27px; }
.welcome-panel p:not(.eyebrow) { margin: 0; color: #dbe6ff; }
.welcome-panel .eyebrow { color: #bcd0ff; }
.mode-badge { flex: none; padding: 12px 15px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(255,255,255,.12); font-weight: 800; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 16px; margin-top: 20px; }
.metric-card { padding: 22px; background: white; border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 8px; }
.metric-card span, .metric-card small { color: var(--muted); }
.metric-card strong { font-size: 30px; }
.green-text { color: var(--green); }
.section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-toolbar h2 { margin: 0 0 7px; }
.section-toolbar p { margin: 0; color: var(--muted); }
.toolbar-actions { display: flex; align-items: center; gap: 9px; }
.toolbar-actions select { min-width: 145px; }
.subsection-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 28px 0 13px; }
.subsection-heading h2 { margin: 0 0 5px; font-size: 19px; }
.subsection-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.direction-grid { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 14px; }
.direction-card { min-width: 0; padding: 19px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 20px rgba(26,43,73,.04); display: grid; gap: 14px; }
.direction-card.pinned { border-color: #b9cdfa; box-shadow: 0 9px 24px rgba(36,104,242,.09); }
.direction-card.paused, .direction-card.archived { opacity: .7; }
.direction-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.direction-title { min-width: 0; }
.direction-title h3 { margin: 5px 0 0; font-size: 17px; overflow-wrap: anywhere; }
.direction-kicker { color: var(--blue); font-size: 11px; font-weight: 800; }
.direction-description { min-height: 42px; margin: 0; color: #566276; font-size: 13px; line-height: 1.6; }
.direction-seeds { margin: 0; padding: 10px 11px; border-radius: 9px; background: #f6f8fc; color: #627087; font-size: 12px; line-height: 1.5; white-space: pre-line; max-height: 66px; overflow: hidden; }
.direction-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid #edf0f4; }
.mini-metrics { display: flex; gap: 11px; color: var(--muted); font-size: 11px; }
.mini-metrics strong { color: var(--ink); font-size: 13px; }
.priority-pill, .workflow-pill { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 800; }
.priority-pill { color: #85551d; background: #fff1df; }
.workflow-pill.todo { color: #5b6678; background: #eef1f5; }
.workflow-pill.in_progress { color: #1b5ecf; background: #eaf1ff; }
.workflow-pill.submitted { color: #875510; background: #fff1d9; }
.workflow-pill.completed { color: var(--green); background: var(--green-soft); }
.workflow-pill.cancelled { color: #8a5260; background: #f7e9ed; }
.workflow-pill.draft { color: #4e5d73; background: #eef1f5; }
.workflow-pill.approved { color: var(--green); background: var(--green-soft); }
.workflow-pill.rejected { color: #a33f50; background: #fcecef; }
.task-cell { display: grid; gap: 4px; max-width: 360px; }
.task-cell small { color: var(--muted); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standalone { margin-top: 0; border: 1px dashed #ccd4e0; border-radius: 14px; background: white; }
.table-card { background: white; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.table-filters { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.table-filters input { width: 260px; }
.candidate-metrics { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 11px; margin-bottom: 15px; }
.final-review-metrics { grid-template-columns: repeat(6, minmax(120px, 1fr)); }
.candidate-metric { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: white; color: #647087; text-align: left; }
.candidate-metric strong { color: var(--ink); font-size: 22px; }
.candidate-metric:hover { border-color: #b8caf0; }
.candidate-metric.active { border-color: #90b2fb; background: var(--blue-soft); color: var(--blue); box-shadow: 0 7px 20px rgba(36,104,242,.08); }
.candidate-metric.active strong { color: var(--blue); }
.candidate-filters { justify-content: space-between; align-items: center; }
.filter-copy { display: grid; gap: 3px; }
.filter-copy small { color: var(--muted); font-size: 12px; }
.candidate-table { min-width: 1290px; }
.keyword-cell { display: grid; gap: 5px; min-width: 260px; max-width: 390px; }
.keyword-cell strong { color: #185bd5; line-height: 1.4; overflow-wrap: anywhere; }
.keyword-cell span { color: #4e5a6d; font-size: 13px; }
.keyword-cell small { color: #8a94a5; }
.keyword-cell .keyword-direction { color: #53709c; font-weight: 700; line-height: 1.45; }
.mini-tag-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.mini-tag-list span { padding: 2px 6px; border-radius: 999px; background: #f0f4fb; color: #55709b; font-size: 10px; font-weight: 700; }
.assignment-cell { display: grid; gap: 4px; min-width: 170px; }
.assignment-cell span { font-weight: 700; }
.assignment-cell small { color: var(--muted); }
.numeric-cluster { display: flex; gap: 12px; min-width: 175px; }
.numeric-cluster span { display: grid; gap: 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.numeric-cluster strong { color: var(--ink); font-size: 13px; }
.owner-cell { display: grid; gap: 3px; min-width: 90px; }
.owner-cell small { color: var(--muted); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 18px; border-bottom: 1px solid #edf0f4; text-align: left; vertical-align: middle; }
th { color: #728096; background: #fafbfc; font-size: 12px; font-weight: 800; }
td { font-size: 14px; }
.account-cell { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 11px; }
.account-cell div { display: grid; gap: 2px; }
.account-cell small { color: var(--muted); }
.role-list { display: flex; flex-wrap: wrap; gap: 5px; }
.role-pill { padding: 4px 7px; border-radius: 6px; background: var(--blue-soft); color: #315fae; font-size: 11px; font-weight: 700; }
.access-pill { padding: 4px 7px; border-radius: 6px; background: #f1f3f6; color: #687386; font-size: 11px; font-weight: 700; }
.access-pill.edit { background: var(--green-soft); color: var(--green); }
.state-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.state-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.state-pill.disabled { color: var(--muted); }
.state-pill.disabled::before { background: #abb4c3; }
.row-actions { white-space: nowrap; }
.row-actions > * + * { margin-left: 7px; }
.candidate-primary-actions { min-width: 210px; white-space: normal; }
.candidate-primary-actions > * { margin-bottom: 5px; }
.row-button { border: 0; border-radius: 7px; padding: 6px 8px; background: #f3f5f8; color: #566276; }
.row-button:hover { background: var(--blue-soft); color: var(--blue); }
.copy-keyword-button { color: #245eb6; background: #edf4ff; }
.row-link { display: inline-flex; align-items: center; text-decoration: none; font-size: 13px; }
.empty-state { padding: 35px; text-align: center; color: var(--muted); }
.placeholder { min-height: calc(100vh - 96px); place-items: center; }
.placeholder.active { display: grid; }
.placeholder-card { width: min(520px, 100%); text-align: center; padding: 48px; border: 1px dashed #cfd6e2; border-radius: 20px; background: white; }
.placeholder-card span { color: var(--blue); font-weight: 800; }

.dialog-card { width: min(620px, calc(100vw - 40px)); border: 0; border-radius: 19px; padding: 0; box-shadow: 0 30px 90px rgba(17,28,49,.25); }
.dialog-card.wide { width: min(1080px, calc(100vw - 56px)); }
.dialog-card.extra-wide { width: min(1360px, calc(100vw - 56px)); }
.dialog-card::backdrop { background: rgba(10,18,34,.5); backdrop-filter: blur(2px); }
.dialog-card form { max-height: calc(94vh - 20px); overflow-y: auto; padding: 34px 38px; display: grid; gap: 20px; }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compact-grid { align-items: end; }
.check-row { min-height: 43px; display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8f9fc; }
.check-row input { width: 17px; height: 17px; }
fieldset { margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 15px; }
legend { padding: 0 7px; color: #46536a; font-size: 13px; font-weight: 750; }
.role-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-option { display: flex; grid-template-columns: auto 1fr; align-items: start; gap: 9px; padding: 10px; border-radius: 9px; background: #f7f9fc; font-size: 13px; }
.role-option input { width: 16px; height: 16px; margin-top: 1px; }
.role-option div { display: grid; gap: 2px; }
.role-option small { color: var(--muted); font-weight: 400; line-height: 1.4; }
.field-help { margin: -2px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.access-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.permission-preview { display: grid; gap: 13px; padding: 16px; border: 1px solid #cfe0ff; border-radius: 12px; background: #f6f9ff; }
.permission-preview > div:first-child { display: grid; gap: 3px; }
.permission-preview > div:first-child small { color: #6c7b92; font-size: 11px; }
.permission-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.permission-preview-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 11px; border-radius: 9px; background: white; }
.permission-preview-item > span:first-child { min-width: 0; color: #43516a; font-size: 12px; font-weight: 750; }
.permission-preview-item small { color: #748198; font-size: 10px; font-weight: 650; text-align: right; }
.permission-preview-mode { flex: none; padding: 4px 7px; border-radius: 999px; color: #687386; background: #eef1f5; }
.permission-preview-mode.edit { color: var(--green); background: var(--green-soft); }
.permission-preview-mode.hidden { color: #9b4752; background: #fcecef; }
.tag-fieldset { padding: 14px 15px 15px; background: #fbfcfe; }
.tag-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag-option { min-height: 34px; padding: 6px 11px; border: 1px solid #d9e0ea; border-radius: 999px; background: white; color: #526076; font-size: 12px; font-weight: 700; }
.tag-option:hover { border-color: #9fb9ee; color: var(--blue); }
.tag-option.selected { border-color: #8fb0f5; color: #185bd5; background: var(--blue-soft); box-shadow: inset 0 0 0 1px rgba(36,104,242,.08); }
.tag-picker.read-only { opacity: .78; }
.custom-tag-row { flex: 1 1 100%; display: grid; grid-template-columns: minmax(190px, 1fr) auto; gap: 8px; margin-top: 3px; }
.custom-tag-row input { height: 40px; }
.custom-tag-row .button { min-height: 40px; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .68; }
#supply-assessment-report, #final-report { min-height: 230px; }
#candidate-note, #review-reason, #supply-summary, #final-summary, #final-decision-reason, #final-next-action { min-height: 160px; }
.candidate-detail-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; padding: 15px 16px; border-radius: 12px; background: #f6f8fc; }
.candidate-detail-head > div { display: grid; gap: 5px; }
.candidate-detail-head strong { color: #155bd5; font-size: 18px; overflow-wrap: anywhere; }
.candidate-detail-head span:not(.workflow-pill) { color: #536075; }
.data-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }
.data-strip span { display: grid; gap: 4px; padding: 11px 12px; background: white; color: var(--muted); font-size: 10px; }
.data-strip strong { color: var(--ink); font-size: 14px; }
.source-link { width: fit-content; color: var(--blue); font-size: 13px; font-weight: 700; text-decoration: none; }
.source-link:not([href]) { display: none; }
.external-links { display: flex; flex-wrap: wrap; gap: 18px; }
.google-link { color: #116c46; }
.trend-detail-card { min-height: 62px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfe; }
.trend-cell { display: grid; grid-template-columns: 112px minmax(180px, 1fr); align-items: center; gap: 12px; padding: 10px 12px; min-width: 320px; }
.trend-cell.compact { grid-template-columns: 72px minmax(116px, 1fr); min-width: 220px; padding: 5px 0; }
.trend-spark { width: 112px; height: 34px; color: #6f84ad; }
.trend-cell.compact .trend-spark { width: 72px; }
.trend-spark polyline { stroke: currentColor; stroke-width: 2; }
.trend-cell.rising { color: var(--green); }
.trend-cell.falling { color: var(--danger); }
.trend-copy { min-width: 0; display: grid; gap: 3px; }
.trend-copy strong { color: currentColor; font-size: 13px; }
.trend-copy small { color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.supply-table { min-width: 1460px; }
.supply-keyword { min-width: 240px; }
.summary-cell { min-width: 230px; max-width: 310px; color: #536075; font-size: 13px; line-height: 1.55; }
.supply-metric-wrap { display: grid; gap: 4px; min-width: 230px; }
.profit-cell { display: grid; gap: 4px; min-width: 155px; }
.profit-cell strong { color: #175f45; }
.profit-cell small { color: var(--muted); font-size: 11px; }
.workflow-pill.supply-pending { color: #4e5d73; background: #eef1f5; }
.workflow-pill.supply-in_progress { color: #1b5ecf; background: #eaf1ff; }
.workflow-pill.supply-passed { color: var(--green); background: var(--green-soft); }
.workflow-pill.supply-rejected { color: #a33f50; background: #fcecef; }
.final-review-table { min-width: 1580px; }
.final-project-cell { min-width: 270px; }
.final-supply-cell { min-width: 230px; max-width: 320px; }
.final-supply-cell small:last-child { margin-top: 2px; line-height: 1.4; white-space: normal; }
.workflow-pill.final-pending { color: #4e5d73; background: #eef1f5; }
.workflow-pill.final-in_progress { color: #1b5ecf; background: #eaf1ff; }
.workflow-pill.final-needs_revision { color: #875510; background: #fff1d9; }
.workflow-pill.final-approved { color: var(--green); background: var(--green-soft); }
.workflow-pill.final-rejected { color: #a33f50; background: #fcecef; }
.decision-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.decision-source-card { display: grid; align-content: start; gap: 6px; padding: 14px 15px; border: 1px solid #cfe0ff; border-radius: 11px; background: #f5f8ff; }
.decision-source-card > span { color: #6880a8; font-size: 11px; font-weight: 800; }
.decision-source-card strong { color: #273c60; font-size: 13px; }
.decision-source-card p { margin: 0; color: #536075; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.decision-source-card small { color: #7b8799; line-height: 1.45; }
.supply-source-card { border-color: #cfe9df; background: #f3fbf7; }
.report-details { border: 1px solid var(--line); border-radius: 11px; background: #fbfcfe; }
.report-details summary { cursor: pointer; padding: 12px 14px; color: #40506a; font-size: 13px; font-weight: 750; }
.report-details p { margin: 0; padding: 0 14px 14px; color: #536075; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
#candidate-dialog, #review-dialog { width: min(1120px, calc(100vw - 56px)); }
#final-review-dialog { width: min(1440px, calc(100vw - 56px)); }
#final-review-dialog form { max-height: calc(94vh - 20px); overflow-y: auto; }
.final-actions > div:first-child { flex-wrap: wrap; }
.three-column { grid-template-columns: repeat(3, 1fr); }
.review-history, .review-context { padding: 13px 14px; border-left: 3px solid #e2a63a; border-radius: 8px; background: #fff8e9; color: #685432; font-size: 13px; line-height: 1.6; }
.review-context { display: grid; gap: 5px; border-left-color: #72a1f7; background: #f1f6ff; color: #435675; }
.review-context > span { color: #71809a; font-size: 11px; font-weight: 800; }
.review-context p { margin: 3px 0 0; white-space: pre-wrap; }
.split-actions { justify-content: space-between; }
.split-actions > div { display: flex; gap: 9px; }
.toast { position: fixed; right: 24px; bottom: 24px; max-width: 360px; padding: 13px 17px; border-radius: 11px; color: white; background: #17243b; box-shadow: 0 14px 35px rgba(17,28,49,.24); z-index: 10; }

.performance-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.performance-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr); gap: 16px; margin-bottom: 18px; }
.performance-panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 7px 24px rgba(26,43,73,.04); }
.performance-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.performance-panel-head h3 { margin: 0 0 5px; font-size: 17px; }
.performance-panel-head p { margin: 0; color: var(--muted); font-size: 12px; }
.performance-panel-head select { min-width: 155px; }
.ranking-chart { display: grid; gap: 12px; min-height: 216px; }
.ranking-row { display: grid; grid-template-columns: 27px minmax(85px, 140px) minmax(90px, 1fr) 45px; align-items: center; gap: 10px; }
.ranking-row > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ranking-position { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #6d788a; background: #f0f2f6; font-size: 11px; font-weight: 800; }
.ranking-position.rank-1 { color: #805a00; background: #fff0b7; }
.ranking-position.rank-2 { color: #536071; background: #e8edf4; }
.ranking-position.rank-3 { color: #86471f; background: #f8ded0; }
.ranking-track { height: 10px; overflow: hidden; border-radius: 999px; background: #edf1f7; }
.ranking-bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2b6df4, #67a0ff); transition: width .25s ease; }
.ranking-row > b { color: #245eb6; font-size: 13px; text-align: right; }
.compact-empty { padding: 55px 20px; }
.performance-funnel { display: grid; gap: 13px; padding-top: 2px; }
.funnel-stage { height: 42px; }
.funnel-bar { height: 100%; min-width: 92px; padding: 0 13px; border-radius: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: white; background: #2468f2; transition: width .25s ease; }
.funnel-stage-2 .funnel-bar { background: #4382f5; }
.funnel-stage-3 .funnel-bar { background: #24a579; }
.funnel-stage-4 .funnel-bar { background: #14845f; }
.funnel-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.funnel-bar strong { font-size: 15px; }
.performance-table { min-width: 1180px; }
.performance-table-card { margin-top: 0; }
.performance-account-cell { min-width: 150px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; }
.performance-account-cell > div { display: grid; gap: 3px; }
.performance-account-cell small { color: var(--muted); }
.performance-rank { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #466184; background: #edf3fc; font-size: 12px; font-weight: 850; }
.performance-rank.rank-1 { color: #7d5600; background: #fff1bc; }
.performance-rank.rank-2 { color: #536071; background: #e8edf4; }
.performance-rank.rank-3 { color: #86471f; background: #f8ded0; }
.performance-directions { display: grid; gap: 7px; min-width: 240px; max-width: 390px; }
.direction-chip-list { display: flex; flex-wrap: wrap; gap: 5px; }
.direction-chip-list span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 7px; border-radius: 999px; color: #45699d; background: #eff4fb; font-size: 10px; font-weight: 700; }
.direction-chip-list small { color: var(--muted); }
.performance-metric-cell { min-width: 135px; display: grid; gap: 3px; }
.performance-metric-cell small { color: var(--muted); font-size: 10px; }
.performance-metric-cell strong { font-size: 15px; }
.performance-metric-cell span { color: #607087; font-size: 11px; }
.performance-score { display: grid; gap: 2px; text-align: center; }
.performance-score strong { color: #245fcb; font-size: 22px; }
.performance-score small { color: var(--muted); font-size: 10px; }

@media (max-width: 980px) {
  .login-layout { grid-template-columns: 1fr; background: #f5f7fb; padding: 24px; }
  .login-brand { display: none; }
  .login-card { margin: auto; }
  .app-shell { grid-template-columns: 78px 1fr; }
  .sidebar-brand div, .sidebar-user div, .sidebar-user .icon-button, .nav-heading { display: none; }
  .nav-item { justify-content: center; font-size: 0; }
  .nav-item .nav-icon { width: 19px; height: 19px; }
  .readonly-nav-toggle { display: flex; justify-content: center; padding: 0; font-size: 0; }
  .readonly-nav-toggle > :not(.nav-icon) { display: none; }
  .readonly-nav-items { padding-left: 0; }
  .readonly-nav-items .nav-item::after { display: none; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .candidate-metrics { grid-template-columns: repeat(3, 1fr); }
  .final-review-metrics { grid-template-columns: repeat(3, 1fr); }
  .performance-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .performance-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .topbar { height: auto; padding: 18px; align-items: start; }
  .topbar-actions { display: none; }
  .page { padding: 18px; }
  .metric-grid, .form-grid, .role-options, .access-mode-grid, .permission-preview-grid, .three-column { grid-template-columns: 1fr; }
  .dialog-card, .dialog-card.wide, .dialog-card.extra-wide, #candidate-dialog, #review-dialog, #final-review-dialog { width: calc(100vw - 18px); }
  .dialog-card form { max-height: calc(100vh - 18px); padding: 22px 18px; }
  .direction-grid { grid-template-columns: 1fr; }
  .candidate-metrics, .data-strip { grid-template-columns: 1fr 1fr; }
  .decision-source-grid { grid-template-columns: 1fr; }
  .performance-summary-grid { grid-template-columns: 1fr; }
  .performance-panel-head { align-items: stretch; flex-direction: column; }
  .section-toolbar, .subsection-heading { align-items: stretch; flex-direction: column; }
  .welcome-panel { align-items: start; flex-direction: column; }
}