:root {
  --bg: #07090d;
  --panel: #0e1218;
  --panel-2: #121820;
  --line: #202833;
  --line-soft: #171e27;
  --text: #f1f4f5;
  --muted: #87929f;
  --cyan: #54e4ce;
  --cyan-dim: #173e3a;
  --amber: #f5aa62;
  --violet: #9d8cf4;
  --danger: #fb7777;
  --green: #61d89a;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 65% -20%, #17252a 0, transparent 34%), var(--bg); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; }
.topbar { height: 76px; padding: 0 clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; background: rgba(7,9,13,.88); backdrop-filter: blur(18px); }
.brand { color: var(--text); text-decoration: none; display: flex; gap: 12px; align-items: center; }
.brand > span:last-child { display: grid; line-height: 1; gap: 5px; }
.brand b { font-size: 14px; letter-spacing: .13em; }
.brand small { color: var(--muted); font: 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.brand-mark { width: 30px; height: 30px; border: 1px solid #31534f; border-radius: 8px; display: flex; align-items: end; justify-content: center; gap: 3px; padding: 7px; transform: rotate(45deg); background: #0f201f; }
.brand-mark i { display: block; width: 3px; background: var(--cyan); border-radius: 2px; transform: rotate(-45deg); }
.brand-mark i:nth-child(1) { height: 7px; }.brand-mark i:nth-child(2) { height: 13px; }.brand-mark i:nth-child(3) { height: 9px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.live-status { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; margin-right: 6px; }
.live-status i { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .4; box-shadow: 0 0 4px var(--green); } }
.primary-button, .ghost-button, .icon-button { border: 1px solid transparent; border-radius: 7px; color: var(--text); padding: 10px 14px; background: transparent; }
.primary-button { background: var(--cyan); color: #061210; font-weight: 750; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.primary-button:hover { background: #74efdc; transform: translateY(-1px); }
.primary-button:disabled { opacity: .45; cursor: wait; transform: none; }
.ghost-button { border-color: var(--line); color: var(--muted); }
.icon-button { width: 39px; height: 39px; padding: 0; border-color: var(--line); color: var(--muted); }
main { width: min(1400px, calc(100% - 40px)); margin: 0 auto; }
.hero-grid { min-height: 460px; padding: 72px 0 56px; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(40px, 8vw, 130px); align-items: center; border-bottom: 1px solid var(--line-soft); }
.eyebrow, .section-label { color: var(--cyan); font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }
h1 { margin: 20px 0 22px; font-size: clamp(48px, 6.5vw, 92px); line-height: .95; letter-spacing: -.055em; font-weight: 620; }
h1 em { color: var(--muted); font-style: normal; }
.hero-copy > p { color: #a4adb7; max-width: 650px; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.65; }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 32px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.trust-row span { display: flex; gap: 8px; align-items: center; }
.dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }.dot.cyan { background: var(--cyan); }.dot.violet { background: var(--violet); }.dot.amber { background: var(--amber); }
.agent-rail { border: 1px solid var(--line); background: linear-gradient(160deg, rgba(18,24,32,.96), rgba(10,14,20,.96)); padding: 18px; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.rail-head { display: flex; justify-content: space-between; font: 9px/1 ui-monospace, monospace; letter-spacing: .12em; color: var(--muted); padding: 2px 2px 15px; }
.rail-head b { color: var(--cyan); font-weight: 500; }
.agent-step { min-height: 58px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(7,9,13,.5); }
.agent-step.active { border-color: #27514d; background: rgba(21,54,51,.28); }
.agent-step > span { color: var(--muted); font: 10px/1 ui-monospace, monospace; }.agent-step b { font-size: 13px; }.agent-step small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }.agent-step > i { color: var(--cyan); font: 8px/1 ui-monospace, monospace; font-style: normal; }
.rail-line { height: 10px; width: 1px; background: var(--line); margin-left: 28px; }
.human-gate { margin-top: 14px; padding: 12px; border: 1px solid #49382a; background: rgba(73,56,42,.18); border-radius: 8px; display: flex; align-items: center; gap: 12px; }.human-gate > span { color: var(--amber); font-size: 12px; }.human-gate b { font-size: 11px; color: #f0c69e; }.human-gate small { color: #a48b75; display: block; font-size: 9px; margin-top: 3px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line-soft); }
.metrics article { padding: 28px 24px 26px 0; position: relative; }.metrics article + article { border-left: 1px solid var(--line-soft); padding-left: 24px; }.metrics span { color: var(--muted); font: 9px/1 ui-monospace, monospace; letter-spacing: .1em; }.metrics strong { font-size: clamp(28px, 3vw, 42px); letter-spacing: -.04em; font-weight: 570; display: block; margin: 10px 0 5px; }.metrics small { color: #66717d; font-size: 10px; }
.operations-grid { display: grid; grid-template-columns: 1fr 310px; gap: 20px; margin-top: 20px; }
.panel { border: 1px solid var(--line); background: rgba(14,18,24,.82); border-radius: 10px; }
.panel-head, .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }.panel-head { padding: 22px 24px 12px; }.panel h2, .section-head h2 { margin: 7px 0 0; font-size: 19px; font-weight: 560; letter-spacing: -.02em; }.legend { color: var(--muted); font-size: 9px; display: flex; gap: 18px; }.legend span { display: flex; align-items: center; gap: 6px; }.cyan-line { width: 14px; height: 2px; background: var(--cyan); }
.chart-wrap { height: 240px; padding: 10px 20px 0; }.chart-wrap svg { width: 100%; height: 100%; overflow: visible; }.chart-grid { stroke: #1a222c; stroke-width: 1; }.chart-area { fill: url(#chartGradient); }.chart-line { fill: none; stroke: var(--cyan); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(84,228,206,.25)); }.chart-dot { fill: var(--cyan); stroke: var(--bg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-axis { border-top: 1px solid var(--line-soft); padding: 10px 22px 14px; display: flex; justify-content: space-between; color: #59636e; font: 8px/1 ui-monospace, monospace; }
.pulse-panel { padding-bottom: 18px; }.pulse-panel dl { margin: 5px 22px 18px; }.pulse-panel dl > div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 11px; }.pulse-panel dt { color: var(--muted); }.pulse-panel dd { margin: 0; }.pulse-panel .accent { color: var(--amber); }.ok { width: 5px; height: 5px; background: var(--green); display: inline-block; border-radius: 50%; margin-right: 5px; }
.pulse-note { margin: 0 16px; background: #0b1117; border: 1px solid var(--line-soft); border-radius: 8px; padding: 13px; }.pulse-note span { color: var(--cyan); font: 8px/1 ui-monospace, monospace; letter-spacing: .1em; }.pulse-note p { color: var(--muted); margin: 8px 0 0; font-size: 10px; line-height: 1.55; }
.incidents-section, .catalog-section { padding: 54px 0; border-bottom: 1px solid var(--line-soft); }.queue-count { color: var(--muted); font-size: 11px; }.queue-count b { color: var(--amber); font-size: 18px; margin-right: 5px; }.incident-list { display: grid; gap: 10px; margin-top: 22px; }.empty-state { min-height: 230px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); }.empty-state h3 { color: #c4cbd1; font-size: 14px; margin: 14px 0 4px; }.empty-state p { font-size: 11px; }.empty-radar { width: 45px; height: 45px; border: 1px solid #26443f; border-radius: 50%; position: relative; }.empty-radar::before, .empty-radar::after { content: ""; position: absolute; inset: 8px; border: 1px solid #1c3430; border-radius: 50%; }.empty-radar::after { inset: 18px; background: var(--cyan); border: 0; box-shadow: 0 0 12px var(--cyan); }.empty-radar i { width: 21px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); position: absolute; left: 22px; top: 22px; transform-origin: left; animation: sweep 2.4s linear infinite; }@keyframes sweep { to { transform: rotate(360deg); } }
.incident-card { display: grid; grid-template-columns: 7px 1.1fr .75fr .6fr auto; align-items: center; min-height: 92px; gap: 22px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); overflow: hidden; padding-right: 18px; transition: border-color .2s, transform .2s; }.incident-card:hover { border-color: #34404d; transform: translateY(-1px); }.severity-bar { align-self: stretch; background: var(--amber); }.severity-bar.critical { background: var(--danger); }.severity-bar.medium { background: #efc35e; }.incident-main span, .incident-metric span { color: var(--muted); font: 8px/1 ui-monospace, monospace; letter-spacing: .08em; }.incident-main h3 { margin: 7px 0 3px; font-size: 14px; }.incident-main p { margin: 0; color: var(--muted); font-size: 10px; }.incident-metric b { display: block; margin-top: 7px; font-size: 17px; font-weight: 560; }.status-pill { text-transform: uppercase; font: 8px/1 ui-monospace, monospace; border: 1px solid #49382a; color: var(--amber); border-radius: 99px; padding: 7px 9px; white-space: nowrap; }.status-pill.approved { border-color: #27523f; color: var(--green); }.status-pill.dismissed { border-color: #3a4149; color: var(--muted); }.view-button { color: var(--cyan); background: none; border: 0; font-size: 11px; }
.catalog-section .section-head > p { color: var(--muted); font-size: 10px; }.catalog-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 22px; }.title-card { aspect-ratio: .78; border-radius: 9px; position: relative; overflow: hidden; padding: 14px; display: flex; flex-direction: column; justify-content: end; border: 1px solid rgba(255,255,255,.12); isolation: isolate; }.title-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(145deg, var(--from), var(--to)); opacity: .8; }.title-card::after { content: ""; position: absolute; width: 140%; aspect-ratio: 1; left: -45%; top: -40%; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255,255,255,.035), 0 0 0 44px rgba(255,255,255,.025); z-index: -1; }.title-card span { font: 8px/1 ui-monospace, monospace; opacity: .75; text-transform: uppercase; }.title-card b { margin-top: 5px; font-size: 13px; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
footer { width: min(1400px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 40px; display: flex; justify-content: space-between; color: #59636e; font: 8px/1 ui-monospace, monospace; letter-spacing: .1em; }
dialog { width: min(560px, calc(100% - 30px)); padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--text); }.dialog-card { background: #10151c; border: 1px solid #2b3540; border-radius: 12px; padding: 24px; box-shadow: 0 30px 100px rgba(0,0,0,.65); }.dialog-card.compact { max-width: 440px; margin: auto; }.dialog-head { display: flex; justify-content: space-between; }.dialog-head h2 { margin: 7px 0 0; font-size: 20px; }.dialog-head > button { background: none; border: 0; color: var(--muted); font-size: 25px; }.dialog-card > p { color: var(--muted); font-size: 12px; line-height: 1.6; }.dialog-card > label { display: grid; gap: 8px; color: #c3cbd2; font-size: 11px; margin: 16px 0; }.dialog-card select, .dialog-card input[type="password"] { background: #090d12; border: 1px solid var(--line); border-radius: 7px; color: var(--text); padding: 11px; }.dialog-card fieldset { border: 0; padding: 0; margin: 20px 0; }.dialog-card legend { font-size: 11px; margin-bottom: 8px; }.radio-card { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 7px; padding: 10px; margin-top: 7px; cursor: pointer; }.radio-card:has(input:checked) { border-color: #2d6a63; background: #122622; }.radio-card input { accent-color: var(--cyan); }.radio-card b { font-size: 11px; }.radio-card small { display: block; color: var(--muted); font-size: 9px; margin-top: 2px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }dialog::backdrop { background: rgba(2,4,7,.78); backdrop-filter: blur(5px); }
.incident-detail { max-height: 90vh; overflow: auto; }.detail-top { display: flex; justify-content: space-between; gap: 30px; }.detail-top h2 { font-size: 26px; margin: 8px 0; }.detail-top p { color: var(--muted); margin: 0; font-size: 11px; }.detail-close { background: none; border: 0; color: var(--muted); font-size: 24px; align-self: start; }.brief-box { margin-top: 22px; border: 1px solid var(--line); background: #0a0e13; padding: 16px; border-radius: 8px; }.brief-box span { color: var(--cyan); font: 8px/1 ui-monospace, monospace; letter-spacing: .1em; }.brief-box p { line-height: 1.65; font-size: 12px; color: #c6cdd3; }.impact-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }.impact-row div { border: 1px solid var(--line); padding: 12px; border-radius: 7px; }.impact-row span { color: var(--muted); font-size: 8px; }.impact-row b { display: block; margin-top: 5px; font-size: 15px; }.trace { margin: 20px 0; }.trace > span { color: var(--muted); font: 8px/1 ui-monospace, monospace; }.trace-step { display: grid; grid-template-columns: 22px 1fr auto; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }.trace-step > i { color: var(--cyan); font-style: normal; font: 9px/1.7 ui-monospace, monospace; }.trace-step b { font-size: 11px; }.trace-step small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }.trace-step time { color: #5d6874; font: 8px/1 ui-monospace, monospace; }.decision-box { border: 1px solid #4a392a; background: #1d1712; border-radius: 8px; padding: 14px; }.decision-box b { color: var(--amber); font-size: 11px; }.decision-box p { color: #bea48d; font-size: 11px; line-height: 1.5; }.decision-actions { display: flex; gap: 8px; justify-content: flex-end; }.danger-button { color: #d5a5a5; background: transparent; border: 1px solid #583535; border-radius: 7px; padding: 9px 13px; }.toast { position: fixed; right: 24px; bottom: 24px; background: #15221f; border: 1px solid #2f5b52; color: #c9eee7; padding: 12px 16px; border-radius: 8px; font-size: 11px; transform: translateY(90px); opacity: 0; transition: .25s; z-index: 40; }.toast.show { transform: translateY(0); opacity: 1; }.toast.error { background: #271718; border-color: #5c3033; color: #f2b5b7; }

@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; }.agent-rail { max-width: 650px; }.metrics { grid-template-columns: repeat(2,1fr); }.operations-grid { grid-template-columns: 1fr; }.catalog-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 640px) { main, footer { width: min(100% - 24px, 1400px); }.topbar { height: 66px; padding: 0 12px; }.live-status { display: none; }.primary-button { font-size: 11px; }.top-actions .primary-button span { display: none; }.hero-grid { padding-top: 48px; }.metrics { grid-template-columns: 1fr 1fr; }.metrics article { padding: 18px 12px 18px 0; }.metrics article + article { padding-left: 12px; }.incident-card { grid-template-columns: 5px 1fr auto; padding-right: 10px; gap: 10px; }.incident-metric { display: none; }.catalog-grid { grid-template-columns: repeat(3,1fr); }.section-head { align-items: start; flex-direction: column; gap: 8px; }.impact-row { grid-template-columns: 1fr; } footer { flex-direction: column; gap: 10px; } }
.judge-note { border: 1px solid var(--line); border-left: 2px solid var(--cyan); border-radius: 8px; padding: 12px 14px; margin: 14px 0; background: rgba(34,211,197,.04); }
.judge-note strong { display: block; font-size: 12px; color: #c4cbd1; margin-bottom: 6px; }
.judge-note p { font-size: 11px; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
.judge-note code { font: 11px ui-monospace, monospace; color: var(--cyan); background: rgba(34,211,197,.1); padding: 2px 6px; border-radius: 4px; }
.judge-note .judge-note-limit { font-size: 10px; opacity: .8; }
.rail-note { font-size: 10px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; min-height: 30px; }
.rail-live { color: var(--amber) !important; }
.rail-live::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); margin-right: 6px; vertical-align: middle; animation: railPulse 1s ease-in-out infinite; }
@keyframes railPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.agent-step.done { border-color: rgba(34,211,197,.4); }
.agent-step.done i { color: var(--cyan); }
.agent-step.working { border-color: var(--amber); background: rgba(245,180,80,.06); }
.agent-step.working i { color: var(--amber); animation: railPulse 1s ease-in-out infinite; }
.agent-step.working span { color: var(--amber); }
.judge-note summary { cursor: pointer; font-size: 11px; color: var(--cyan); list-style: none; padding: 2px 0; }
.judge-note summary::-webkit-details-marker { display: none; }
.judge-note summary::before { content: "▸ "; }
.judge-note[open] summary::before { content: "▾ "; }
.judge-note[open] summary { margin-bottom: 8px; }