:root { color-scheme: dark; --bg: #07111f; --panel: #0d1b2d; --edge: #1e3550; --ink: #e9f2ff; --muted: #8fa7c1; --accent: #68e0b9; --warning: #f8cf70; --danger: #ff8a9c; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 10% 0, #173253 0, var(--bg) 34rem); color: var(--ink); font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.site-header, main { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.site-header { min-height: 136px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.eyebrow { margin: 0 0 6px; color: var(--accent); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
h1, h2 { margin: 0; letter-spacing: -.02em; } h1 { font-size: clamp(28px, 5vw, 42px); } h2 { font-size: 18px; }
.phase-pill { border: 1px solid #376b71; border-radius: 999px; color: var(--accent); padding: 7px 11px; font: 700 12px ui-monospace, monospace; white-space: nowrap; }
main { padding-bottom: 64px; }
.warning { border: 1px solid #765b1e; background: #211b0e; color: #f9df9a; border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.metrics article, .panel { border: 1px solid var(--edge); background: color-mix(in srgb, var(--panel) 92%, transparent); border-radius: 12px; }
.metrics article { padding: 18px; } .metrics span, .metrics small { color: var(--muted); display: block; } .metrics strong { display: block; margin: 4px 0; font-size: 30px; }
.layout-grid { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); gap: 14px; margin-bottom: 14px; }.panel { padding: 18px; }.wide-panel { margin-bottom: 14px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }.panel-heading > span { color: var(--muted); font-size: 12px; }
form { display: grid; gap: 12px; } label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input, select, textarea { width: 100%; color: var(--ink); background: #07111f; border: 1px solid #29445f; border-radius: 7px; padding: 9px 10px; font: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid #2b8577; outline-offset: 1px; } textarea { resize: vertical; }.checkbox-label { display: flex; align-items: center; gap: 8px; }.checkbox-label input { width: auto; }.inline-form { grid-template-columns: minmax(260px, 1fr) auto; align-items: end; }.inline-form button { margin-bottom: 0; }
.resource-plan-options { display: grid; gap: 8px; margin: 0; padding: 10px; border: 1px solid #29445f; border-radius: 7px; }.resource-plan-options legend { color: var(--muted); font-size: 12px; padding: 0 4px; }
button { color: #022018; background: var(--accent); border: 0; border-radius: 7px; padding: 10px 12px; cursor: pointer; font-weight: 800; }button.secondary { color: var(--ink); background: transparent; border: 1px solid #375270; padding: 7px 10px; }.hint, .muted { color: var(--muted); }
.table-wrap { overflow-x: auto; }table { width: 100%; min-width: 760px; border-collapse: collapse; }th { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }th, td { padding: 10px 8px; border-top: 1px solid #1a2e45; text-align: left; white-space: nowrap; }.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.state { display: inline-flex; border: 1px solid #36536e; border-radius: 999px; padding: 2px 7px; font: 700 11px ui-monospace, monospace; }.state.delivered, .state.succeeded { border-color: #317961; color: var(--accent); }.state.reserved, .state.queued { border-color: #78612c; color: var(--warning); }.state.reconcile_required, .state.failed { border-color: #864052; color: var(--danger); }
ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }li { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; border-top: 1px solid #1a2e45; padding-top: 9px; }li span { color: var(--muted); }
.checkpoint-list { margin: 0; padding-left: 22px; display: grid; gap: 9px; }.checkpoint-list li { display: grid; justify-content: stretch; gap: 2px; }
.compact-list { margin-top: 16px; min-height: 24px; }
#notice { position: fixed; right: 18px; bottom: 18px; max-width: min(420px, calc(100vw - 36px)); color: #021f18; background: var(--accent); border-radius: 9px; padding: 12px 14px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: .2s; }.visible { opacity: 1 !important; transform: translateY(0) !important; }.error { color: #fff0f2 !important; background: #8c3248 !important; }
@media (max-width: 760px) { .site-header { min-height: 112px; padding-top: 20px; padding-bottom: 20px; align-items: flex-start; }.metrics, .layout-grid, .inline-form { grid-template-columns: 1fr; }.two-columns { grid-template-columns: 1fr; } }