:root {
  --navy: #13212a;
  --navy-2: #1d303b;
  --canvas: #f1f3f2;
  --paper: #ffffff;
  --ink: #172127;
  --muted: #66737a;
  --faint: #89949a;
  --line: #dce2e1;
  --amber: #d99a35;
  --amber-soft: #fbf0dc;
  --green: #257056;
  --green-soft: #e6f2ec;
  --red: #a4443e;
  --red-soft: #f8e9e7;
  --blue: #356c8a;
  --blue-soft: #e7f0f5;
  --radius: 12px;
  --shadow: 0 14px 40px rgba(19, 33, 42, 0.07);
  --font: "Avenir Next", "Segoe UI", sans-serif;
  --display: Georgia, "Times New Roman", serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(217, 154, 53, 0.3); outline-offset: 2px; }
a { color: var(--green); text-underline-offset: 3px; }

.auth-gate { display: grid; min-height: 100vh; place-items: center; padding: 28px; background: radial-gradient(circle at 20% 10%, #29404b 0, transparent 34%), linear-gradient(145deg, #101c24, #1d303b 62%, #15252e); }
.auth-card { width: min(440px, 100%); padding: 38px; color: #edf3f1; background: rgba(16, 28, 36, 0.82); border: 1px solid rgba(255,255,255,.13); border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.35); backdrop-filter: blur(20px); }
.admin-mark { display: grid; width: 42px; height: 42px; place-items: center; color: var(--navy); background: var(--amber); border-radius: 10px; font-family: var(--mono); font-size: .82rem; font-weight: 800; letter-spacing: -.04em; }
.auth-card h1 { margin: 14px 0 10px; font-family: var(--display); font-size: 2.5rem; font-weight: 400; letter-spacing: -.04em; }
.auth-card > p:not(.kicker) { color: #aebbbf; line-height: 1.6; }
.auth-card form { margin-top: 26px; }
.auth-card label span, .control-form label > span, .editor-form label > span { display: block; margin-bottom: 7px; color: inherit; font-size: .72rem; font-weight: 750; letter-spacing: .04em; }
.auth-card input { width: 100%; height: 48px; padding: 0 14px; color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; }
.auth-card form button { width: 100%; min-height: 48px; margin-top: 12px; color: var(--navy); background: var(--amber); border: 0; border-radius: 8px; cursor: pointer; font-weight: 800; }
.auth-card small { display: block; margin-top: 18px; color: #84949a; }
.auth-error { padding: 10px 12px; color: #ffd9d5 !important; background: rgba(164,68,62,.25); border-radius: 7px; font-size: .82rem; }

.admin-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 246px; padding: 24px 18px; color: #dfe7e4; background: var(--navy); flex-direction: column; }
.admin-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 22px; color: white; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-brand small, .admin-brand strong { display: block; }
.admin-brand small { margin-bottom: 2px; color: #8fa0a7; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.admin-brand strong { font-family: var(--display); font-size: 1.05rem; font-weight: 500; }
.sidebar nav { display: grid; gap: 5px; margin-top: 26px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 9px 12px; color: #9eacb1; background: transparent; border: 0; border-radius: 8px; cursor: pointer; text-align: left; font-size: .84rem; font-weight: 650; }
.nav-item span { color: #687d87; font-family: var(--mono); font-size: .65rem; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active { color: #172127; background: var(--amber); }
.nav-item.active span { color: #785313; }
.sidebar-foot { display: grid; gap: 12px; margin-top: auto; padding: 18px 8px 2px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-foot a, .sidebar-foot button { color: #9eacb1; background: transparent; border: 0; cursor: pointer; font-size: .72rem; text-align: left; }
.service-state { display: flex; align-items: center; gap: 8px; color: #cad4d1; font-size: .72rem; }
.service-state i { width: 8px; height: 8px; background: #7e8b90; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.04); }
.service-state i.online { background: #52b788; }
.service-state i.offline { background: #d66b63; }

.admin-main { min-height: 100vh; margin-left: 246px; padding: 34px clamp(24px, 4vw, 54px) 80px; }
.admin-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1400px; margin: 0 auto 28px; }
.kicker { margin: 0 0 7px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.admin-header h1 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.header-actions { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: .72rem; }
.icon-button, .secondary-button, .review-filters button { min-height: 36px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: .76rem; font-weight: 700; text-decoration: none; }
.icon-button:hover, .secondary-button:hover { border-color: #aab8b6; }
.admin-view { display: none; max-width: 1400px; margin: 0 auto; }
.admin-view.active { display: block; animation: enter .18s ease-out both; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.global-alert { max-width: 1400px; margin: -10px auto 20px; padding: 12px 14px; color: var(--blue); background: var(--blue-soft); border: 1px solid #c9dce7; border-radius: 8px; font-size: .82rem; }
.global-alert.error { color: var(--red); background: var(--red-soft); border-color: #e9c3bf; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric-card { min-width: 0; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.metric-card span { color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.metric-card strong { display: block; margin: 10px 0 4px; font-family: var(--display); font-size: 2rem; font-weight: 400; letter-spacing: -.04em; }
.metric-card small { color: var(--faint); font-size: .72rem; }
.content-grid { display: grid; gap: 16px; }
.overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pipeline-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.admin-panel { min-width: 0; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(19,33,42,.035); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.panel-head h2 { margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 500; letter-spacing: -.025em; }
.panel-note { color: var(--faint); font-size: .72rem; }
.panel-copy { color: var(--muted); font-size: .82rem; line-height: 1.65; }
.status-pill { display: inline-flex; min-height: 25px; padding: 4px 9px; color: var(--muted); background: #eef1f0; border-radius: 999px; font-size: .66rem; font-weight: 800; text-transform: capitalize; }
.status-pill.running { color: var(--blue); background: var(--blue-soft); }
.status-pill.completed { color: var(--green); background: var(--green-soft); }
.status-pill.failed { color: var(--red); background: var(--red-soft); }

.definition-list { display: grid; gap: 11px; }
.definition-row { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid #edf0ef; }
.definition-row:last-child { padding: 0; border: 0; }
.definition-row span { color: var(--muted); font-size: .76rem; }
.definition-row strong { color: var(--ink); font-size: .78rem; text-align: right; }
.quality-bars { display: grid; gap: 13px; }
.quality-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 54px; align-items: center; gap: 14px; }
.quality-row label { color: var(--muted); font-size: .75rem; text-transform: capitalize; }
.bar-track, .progress-track { height: 8px; overflow: hidden; background: #edf0ef; border-radius: 999px; }
.bar-track span, .progress-track span { display: block; width: 0; height: 100%; background: var(--green); border-radius: inherit; transition: width .3s ease; }
.quality-row strong { font-size: .72rem; text-align: right; }
.job-empty, .editor-placeholder { padding: 26px; color: var(--muted); background: #f7f9f8; border: 1px dashed #cfd8d5; border-radius: 9px; text-align: center; font-size: .82rem; }
.job-card { display: grid; gap: 13px; }
.job-card p { margin: 0; color: var(--muted); font-size: .8rem; }

.control-panel { grid-row: span 2; }
.control-form { display: grid; gap: 16px; margin-top: 22px; }
.control-form input:not([type=checkbox]), .control-form select, .editor-form input, .editor-form select, .editor-form textarea, .review-filters select { width: 100%; padding: 10px 11px; color: var(--ink); background: #fbfcfb; border: 1px solid var(--line); border-radius: 7px; outline: 0; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px; background: #f6f8f7; border-radius: 8px; }
.switch-row strong, .switch-row small { display: block; }
.switch-row small { margin-top: 3px; color: var(--faint); font-size: .68rem; line-height: 1.4; }
.switch-row input { width: 18px; height: 18px; accent-color: var(--green); }
.primary-button { min-height: 44px; padding: 10px 15px; color: white; background: var(--green); border: 0; border-radius: 8px; cursor: pointer; font-weight: 800; }
.primary-button:hover { background: #1d5b45; }
.primary-button:disabled, .secondary-button:disabled { cursor: wait; opacity: .6; }
.secondary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.progress-track { height: 10px; margin: 8px 0 13px; }
.progress-track span { background: linear-gradient(90deg, var(--blue), #62a5c4); }
.pipeline-steps { display: grid; gap: 8px; margin-top: 16px; }
.pipeline-step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; background: #f7f9f8; border-radius: 8px; }
.pipeline-step i { display: grid; width: 20px; height: 20px; place-items: center; color: var(--muted); background: #e6ebe9; border-radius: 50%; font-style: normal; font-size: .62rem; }
.pipeline-step strong { font-size: .76rem; }
.pipeline-step span { color: var(--faint); font-size: .68rem; }
.metric-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.strip-item { padding: 8px 18px; border-right: 1px solid var(--line); }
.strip-item:first-child { padding-left: 0; }
.strip-item:last-child { border: 0; }
.strip-item span, .strip-item strong { display: block; }
.strip-item span { color: var(--muted); font-size: .68rem; }
.strip-item strong { margin-top: 5px; font-family: var(--display); font-size: 1.45rem; font-weight: 400; }

.review-layout { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(520px, 1.4fr); gap: 16px; align-items: start; }
.review-list-panel { padding: 0; overflow: hidden; }
.review-list-panel .panel-head { padding: 20px 20px 0; }
.review-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0 20px 14px; }
.review-list { max-height: calc(100vh - 280px); overflow-y: auto; border-top: 1px solid var(--line); }
.review-item { display: block; width: 100%; padding: 15px 20px; background: white; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.review-item:hover, .review-item.active { background: #f5f8f6; }
.review-item.active { box-shadow: inset 3px 0 var(--green); }
.review-item small { display: flex; justify-content: space-between; gap: 8px; color: var(--faint); font-size: .66rem; }
.review-item strong { display: block; margin: 7px 0 3px; overflow: hidden; font-family: var(--display); font-size: 1rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.review-item span { display: block; overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.load-more { display: block; margin: 14px auto; }
.review-editor-panel { position: sticky; top: 20px; }
.editor-placeholder { padding: 70px 30px; }
.editor-placeholder strong { font-family: var(--display); font-size: 1.35rem; font-weight: 500; }
.editor-form { display: grid; gap: 14px; }
.editor-form + .editor-form { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.editor-form textarea { resize: vertical; line-height: 1.5; }
.decision-form { padding: 18px; background: #f7f9f8; border-radius: 9px; }

.distribution { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.distribution-item { padding: 13px; background: #f6f8f7; border-radius: 8px; }
.distribution-item span, .distribution-item strong { display: block; }
.distribution-item span { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.distribution-item strong { margin-top: 5px; font-family: var(--display); font-size: 1.25rem; font-weight: 400; }
.data-table { overflow-x: auto; }
.data-table table { width: 100%; border-collapse: collapse; font-size: .74rem; }
.data-table th { padding: 9px; color: var(--faint); border-bottom: 1px solid var(--line); text-align: left; font-size: .63rem; letter-spacing: .05em; text-transform: uppercase; }
.data-table td { padding: 11px 9px; border-bottom: 1px solid #edf0ef; }
.inline-status { min-height: 20px; color: var(--muted); font-size: .74rem; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline-grid, .model-grid { grid-template-columns: 1fr 1fr; }
  .pipeline-grid .span-3 { grid-column: span 2; }
  .review-layout { grid-template-columns: 1fr; }
  .review-editor-panel { position: static; }
  .review-list { max-height: 420px; }
}

@media (max-width: 760px) {
  .sidebar { position: static; width: 100%; padding: 14px; }
  .admin-brand { padding-bottom: 14px; }
  .sidebar nav { display: flex; margin-top: 14px; overflow-x: auto; }
  .nav-item { min-width: max-content; }
  .sidebar-foot { display: none; }
  .admin-main { margin: 0; padding: 24px 14px 60px; }
  .admin-header { align-items: flex-start; flex-direction: column; }
  .header-actions { width: 100%; justify-content: space-between; }
  .overview-grid, .pipeline-grid, .model-grid { grid-template-columns: 1fr; }
  .span-2, .span-3, .pipeline-grid .span-3 { grid-column: auto; }
  .metric-strip { grid-template-columns: 1fr 1fr; gap: 12px; }
  .strip-item { padding: 8px 0; border: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .quality-row { grid-template-columns: 105px minmax(0, 1fr) 44px; gap: 8px; }
  .distribution { grid-template-columns: 1fr 1fr; }
  .auth-card { padding: 28px 22px; }
}