:root {
  color-scheme: dark;
  --bg: #07110e;
  --surface: rgba(12, 26, 21, .78);
  --line: rgba(166, 211, 190, .14);
  --text: #edf8f2;
  --muted: #8ca39a;
  --mint: #75f0b4;
  --lime: #c9ff6b;
  --amber: #ffcb66;
  --red: #ff6f78;
  font-family: Manrope, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
.ambient { position: fixed; width: 42vw; height: 42vw; border-radius: 50%; filter: blur(100px); opacity: .12; pointer-events: none; }
.ambient-a { background: #35e897; right: -16vw; top: -20vw; }.ambient-b { background: #e2ff72; left: -25vw; bottom: -32vw; }
main { position: relative; width: min(1540px, 100%); margin: auto; padding: 0 34px 24px; }
.topbar { height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(117,240,180,.5); transform: rotate(45deg); }.brand-mark i { width: 9px; height: 9px; background: var(--mint); box-shadow: 0 0 18px var(--mint); }
.system-state, .cloud-pill { font: 500 11px DM Mono, monospace; letter-spacing: .05em; text-transform: uppercase; }
.system-state { color: var(--mint); display: flex; gap: 9px; align-items: center; }.system-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.cloud-pill { justify-self: end; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 9px 13px; }
.hero { padding: 56px 0 38px; display: grid; grid-template-columns: minmax(540px, 1.4fr) minmax(300px, .6fr); gap: 50px; align-items: end; }
.eyebrow, .kicker { margin: 0 0 14px; color: var(--mint); font: 500 11px DM Mono, monospace; letter-spacing: .13em; }
h1 { margin: 0; max-width: 950px; font-size: clamp(45px, 5.4vw, 82px); line-height: .96; letter-spacing: -.06em; font-weight: 600; } h1 em { color: var(--lime); font-style: normal; }
.hero-copy { max-width: 470px; margin: 0 0 5px; color: var(--muted); line-height: 1.75; font-size: 14px; }
.agent-intake { display: grid; grid-template-columns: 190px 1fr 190px; gap: 12px; align-items: stretch; margin-bottom: 14px; padding: 14px; border: 1px solid rgba(117,240,180,.22); background: linear-gradient(90deg, rgba(117,240,180,.055), rgba(5,14,11,.72)); }
.agent-intake-label { display: grid; align-content: center; gap: 5px; }.agent-intake-label span { color: var(--mint); font: 500 10px DM Mono; letter-spacing: .1em; }.agent-intake-label small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.agent-intake textarea { min-height: 58px; resize: vertical; border: 1px solid var(--line); background: #07120e; color: var(--text); padding: 11px 13px; font: 500 11px/1.55 DM Mono; outline: none; }.agent-intake textarea:focus { border-color: rgba(117,240,180,.6); }
.agent-intake button { border: 0; background: var(--lime); color: #07110e; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; font-weight: 800; cursor: pointer; }.agent-intake button:disabled { opacity: .5; cursor: wait; }.agent-status { grid-column: 2/-1; min-height: 14px; color: var(--muted); font: 9px DM Mono; }.agent-status.success { color: var(--mint); }.agent-status.error { color: var(--red); }
.pipeline { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr; padding: 15px; border: 1px solid var(--line); background: rgba(5,14,11,.6); }
.pipe-step { padding: 13px 16px; display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; opacity: .52; }.pipe-step.active { opacity: 1; }.pipe-step b { grid-row: 1/3; font: 500 10px DM Mono; color: var(--mint); }.pipe-step span { font-size: 13px; font-weight: 700; }.pipe-step small { color: var(--muted); font-size: 10px; margin-top: 3px; }.connector { height: 1px; align-self: center; background: linear-gradient(90deg, var(--mint), rgba(117,240,180,.12)); }
.registry { margin-top: 14px; padding: 20px 22px; border: 1px solid var(--line); background: rgba(5,14,11,.6); }
.registry-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 14px; }.registry-heading .kicker { margin-bottom: 5px; }.registry-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.03em; }
.registry-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.agent-card { padding: 16px; border: 1px solid var(--line); background: rgba(12,26,21,.72); }.agent-card-top { display: flex; justify-content: space-between; align-items: center; }.agent-status-pill, .agent-version { font: 500 9px DM Mono; text-transform: uppercase; }.agent-status-pill { color: var(--mint); }.agent-version { color: var(--muted); }.agent-card h3 { margin: 9px 0 5px; font-size: 14px; }.agent-card > p { margin: 0 0 13px; color: var(--muted); font-size: 11px; }.agent-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }.agent-card dl div { min-width: 0; }.agent-card dt { color: #62766e; font: 500 8px DM Mono; letter-spacing: .08em; }.agent-card dd { margin: 4px 0 0; color: #c8d8d1; font: 9px/1.45 DM Mono; overflow-wrap: anywhere; }
.queue { margin-top: 14px; padding: 20px 22px; border: 1px solid rgba(255,203,102,.18); background: linear-gradient(90deg, rgba(255,203,102,.035), rgba(5,14,11,.68)); }.queue-list { display: grid; gap: 8px; }.queue-empty { padding: 18px; border: 1px dashed var(--line); color: var(--muted); font-size: 11px; text-align: center; }.queue-item { display: grid; grid-template-columns: 1fr 1fr 190px; gap: 16px; align-items: center; padding: 13px 15px; border: 1px solid var(--line); background: rgba(4,12,9,.52); }.queue-item > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }.queue-item b { font-size: 11px; }.queue-item small { grid-column: 2; margin-top: 3px; color: #62766e; font: 9px DM Mono; }.queue-status { padding: 6px 8px; border: 1px solid currentColor; color: var(--amber); font: 500 8px DM Mono; }.queue-status.authorized { color: var(--mint); }.queue-status.blocked { color: var(--red); }.queue-controls { display: flex; flex-wrap: wrap; gap: 6px; }.queue-controls span { color: var(--amber); font: 500 8px DM Mono; }.resume-button { border: 0; background: var(--amber); color: #171006; padding: 11px 12px; font-size: 10px; font-weight: 800; cursor: pointer; }.resume-button:disabled { opacity: .55; cursor: wait; }.queue-complete { justify-self: end; color: var(--mint); font: 500 9px DM Mono; }
.workspace { display: grid; grid-template-columns: 1.05fr 1.05fr .9fr; gap: 14px; margin-top: 14px; }
.panel { min-height: 515px; padding: 24px; border: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(20px); }
.panel-heading { display: flex; justify-content: space-between; align-items: start; padding-bottom: 19px; border-bottom: 1px solid var(--line); margin-bottom: 21px; }.panel-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.03em; }.panel-heading .kicker { margin-bottom: 6px; }.panel-index { color: #496159; font: 500 12px DM Mono; }
form > label, .field-pair label { display: grid; gap: 8px; color: var(--muted); font-size: 11px; margin-bottom: 16px; }
select, input { width: 100%; border: 1px solid var(--line); background: #07120e; color: var(--text); padding: 13px 14px; border-radius: 3px; font: 500 12px DM Mono, monospace; outline: none; } select:focus, input:focus { border-color: rgba(117,240,180,.6); box-shadow: 0 0 0 3px rgba(117,240,180,.06); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.control-box { border: 1px solid var(--line); padding: 14px; margin: 4px 0 17px; }.control-box > p { margin: 0 0 10px; color: var(--muted); font: 500 10px DM Mono; letter-spacing: .08em; text-transform: uppercase; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid rgba(166,211,190,.08); cursor: pointer; }.toggle-row span { display: grid; gap: 2px; }.toggle-row b { font-size: 12px; }.toggle-row small { color: var(--muted); font-size: 10px; }.toggle-row input { display: none; }.toggle-row i { width: 34px; height: 19px; border-radius: 20px; background: #26332e; position: relative; transition: .2s; }.toggle-row i::after { content: ""; width: 13px; height: 13px; border-radius: 50%; background: #829189; position: absolute; left: 3px; top: 3px; transition: .2s; }.toggle-row input:checked + i { background: var(--mint); }.toggle-row input:checked + i::after { transform: translateX(15px); background: #082015; }
.primary-button { width: 100%; border: 0; background: var(--mint); color: #07110e; padding: 15px 16px; display: flex; justify-content: space-between; font-weight: 800; cursor: pointer; }.primary-button:hover { background: var(--lime); }.primary-button:disabled { opacity: .5; cursor: wait; }
.empty-state { height: 370px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); font-size: 12px; }.radar { width: 100px; height: 100px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; position: relative; margin-bottom: 22px; }.radar::before, .radar::after { content: ""; position: absolute; background: var(--line); }.radar::before { width: 1px; height: 130%; }.radar::after { height: 1px; width: 130%; }.radar i { position: absolute; border: 1px solid rgba(117,240,180,.16); border-radius: 50%; inset: 20px; }.radar i:nth-child(2) { inset: 37px; background: var(--mint); box-shadow: 0 0 18px var(--mint); }.radar i:nth-child(3) { inset: 7px; border-color: rgba(117,240,180,.06); }
.verdict-row { display: flex; justify-content: space-between; align-items: center; }.verdict { padding: 10px 13px; font: 500 12px DM Mono; border: 1px solid currentColor; }.verdict.allow { color: var(--mint); }.verdict.require-approval { color: var(--amber); }.verdict.block { color: var(--red); }.risk { color: var(--muted); font: 500 10px DM Mono; text-transform: uppercase; }.decision-id { margin: 17px 0; color: #71877e; font: 10px DM Mono; }.evidence-block { margin-top: 17px; padding-top: 16px; border-top: 1px solid var(--line); }.evidence-block > p { margin: 0 0 10px; color: var(--muted); font: 500 10px DM Mono; letter-spacing: .1em; }.evidence-block ul { margin: 0; padding-left: 17px; }.evidence-block li { color: #c8d8d1; font-size: 12px; line-height: 1.55; margin-bottom: 7px; }.chips { display: flex; flex-wrap: wrap; gap: 7px; }.chips span { padding: 7px 9px; background: rgba(255,203,102,.08); border: 1px solid rgba(255,203,102,.2); color: var(--amber); font: 500 9px DM Mono; }
.execution-lock { display: flex; gap: 12px; align-items: center; margin-top: 20px; padding: 13px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }.execution-lock > span { color: var(--muted); }.execution-lock div { display: grid; gap: 2px; }.execution-lock b { font-size: 11px; }.execution-lock small { color: var(--muted); font-size: 10px; }
.storage-pill { padding: 6px 8px; color: var(--mint); border: 1px solid rgba(117,240,180,.18); font: 9px DM Mono; }.audit-list { display: grid; gap: 8px; max-height: 415px; overflow: auto; }.audit-empty { color: var(--muted); font-size: 12px; line-height: 1.6; padding: 40px 12px; text-align: center; }.audit-item { padding: 13px; border: 1px solid var(--line); background: rgba(4,12,9,.48); }.audit-item-top { display: flex; justify-content: space-between; margin-bottom: 8px; }.audit-verdict { font: 500 9px DM Mono; }.audit-verdict.allow { color: var(--mint); }.audit-verdict.require-approval { color: var(--amber); }.audit-verdict.block { color: var(--red); }.audit-time { color: #62766e; font: 9px DM Mono; }.audit-action { font-size: 11px; font-weight: 700; margin-bottom: 4px; }.audit-id { color: #62766e; font: 9px DM Mono; }
.hidden { display: none !important; } footer { display: flex; justify-content: space-between; padding: 19px 2px 0; color: #52675e; font: 9px DM Mono; letter-spacing: .08em; }
@media (max-width: 1050px) { .workspace { grid-template-columns: 1fr 1fr; }.audit-panel { grid-column: 1/-1; min-height: 300px; }.hero { grid-template-columns: 1fr; }.hero-copy { max-width: 680px; }.pipeline { grid-template-columns: 1fr 25px 1fr 25px 1fr 25px 1fr; }.agent-intake { grid-template-columns: 150px 1fr; }.agent-intake button { grid-column: 2; min-height: 46px; }.agent-status { grid-column: 2; } }
@media (max-width: 720px) { main { padding: 0 15px 20px; }.topbar { grid-template-columns: 1fr auto; }.system-state { display: none; }.hero { padding-top: 40px; }.workspace { grid-template-columns: 1fr; }.audit-panel { grid-column: auto; }.pipeline { overflow-x: auto; grid-template-columns: repeat(7, minmax(36px, auto)); }.field-pair { grid-template-columns: 1fr; }.cloud-pill { font-size: 8px; } footer { gap: 15px; }.agent-intake { grid-template-columns: 1fr; }.agent-intake textarea, .agent-intake button, .agent-status { grid-column: 1; }.agent-intake button { min-height: 46px; } }
@media (max-width: 720px) { .registry-list { grid-template-columns: 1fr; }.agent-card dl { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .queue-item { grid-template-columns: 1fr; }.queue-complete { justify-self: start; } }