:root { color-scheme: dark; --bg:#0a0a0a; --panel:#111; --line:#292929; --soft:#8b8b8b; --lime:#c7ff3d; --white:#f4f4f0; --red:#ff6b61; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--white); min-height:100vh; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.hidden { display:none !important; }
.topbar { height:64px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1160px)/2)); }
.brand { color:var(--white); text-decoration:none; font:800 14px/1 monospace; letter-spacing:.12em; }
.network { color:var(--soft); font:600 11px/1 monospace; letter-spacing:.08em; display:flex; gap:8px; align-items:center; }
.network i { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px var(--lime); }
main { width:min(1160px,calc(100% - 40px)); margin:0 auto; padding:64px 0 80px; }
.create-shell { max-width:780px; margin:0 auto; }
.eyebrow { color:var(--lime); font:700 11px/1.3 monospace; letter-spacing:.16em; margin:0 0 20px; }
h1 { font-size:clamp(42px,7vw,78px); line-height:.96; letter-spacing:-.055em; margin:0; }
.lead { color:#aaa; font-size:18px; line-height:1.6; max-width:680px; margin:28px 0 40px; }
.create-card,.panel,.metrics article,.status-card { background:var(--panel); border:1px solid var(--line); }
.create-card { padding:28px; display:grid; gap:22px; }
label { color:#bbb; font-size:13px; display:grid; gap:9px; }
input,textarea { width:100%; color:var(--white); background:#080808; border:1px solid #343434; padding:13px 14px; outline:none; resize:vertical; }
input:focus,textarea:focus { border-color:var(--lime); }
fieldset { border:0; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
legend { color:#bbb; font-size:13px; margin-bottom:9px; }
.check { border:1px solid #303030; background:#0b0b0b; padding:14px; display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.check input { width:auto; accent-color:var(--lime); margin-top:3px; }
.check span { display:grid; gap:5px; }.check b { color:var(--white); }.check small { color:var(--soft); }
button { background:#1a1a1a; color:var(--white); border:1px solid #3a3a3a; padding:11px 15px; cursor:pointer; font-weight:700; }
button:hover:not(:disabled) { border-color:#777; } button:disabled { opacity:.35; cursor:not-allowed; }
button.primary { background:var(--lime); border-color:var(--lime); color:#0a0a0a; }
.fine { color:#666; font-size:11px; line-height:1.5; margin:0; }
.hero-row { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:32px; }
.hero-row h1 { font-size:clamp(38px,6vw,68px); }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }.tags span { border:1px solid #333; color:#aaa; padding:6px 9px; font:11px/1 monospace; }
.status-card { min-width:180px; padding:18px; display:grid; grid-template-columns:auto 1fr; gap:3px 10px; align-items:center; }
.status-card span { width:9px; height:9px; border-radius:50%; background:#555; grid-row:1/3; }.status-card span.running { background:var(--lime); box-shadow:0 0 12px #9bd328; }
.status-card strong { font:800 13px/1 monospace; }.status-card small { color:var(--soft); }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:10px; }
.metrics article { padding:20px; display:grid; gap:7px; }.metrics span,.panel-head span { color:var(--soft); font:10px/1 monospace; letter-spacing:.1em; }.metrics strong { font:700 22px/1.2 monospace; }.metrics small { color:#666; }
.grid { display:grid; grid-template-columns:minmax(300px,.85fr) minmax(420px,1.4fr); gap:10px; }
.panel { padding:22px; min-height:460px; }.panel-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:18px; }.panel h2 { font-size:16px; margin:0; }
.setup-box { border:1px solid #35352b; background:#11120d; padding:16px; }.setup-box p { color:var(--soft); font-size:13px; line-height:1.5; }.setup-box a,.inline-actions a { color:var(--lime); font-size:12px; }
.setup-box + .setup-box { margin-top:10px; }.setup-box em { color:var(--soft); float:right; font:10px/1 monospace; text-transform:uppercase; }.setup-box em[data-status="allowed"] { color:var(--lime); }
.inline { display:flex; gap:8px; margin:12px 0; }.inline input { flex:1; text-transform:uppercase; font-family:monospace; letter-spacing:.08em; }
.inline-actions,.run-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:18px; }.run-actions { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; }
#message-form { display:grid; gap:10px; }
.activity { display:grid; }.activity-row { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid #202020; }.activity-row>div:first-child { display:grid; gap:5px; }.activity-row strong { text-transform:capitalize; font-size:13px; }.activity-row span { color:var(--soft); font-size:12px; line-height:1.45; }.activity-meta { text-align:right; display:grid; align-content:start; gap:6px; min-width:130px; }.activity-meta b { color:#aaa; font:10px/1 monospace; }.activity-meta b[data-status="SETTLED"],.activity-meta b[data-status="SUCCEEDED"] { color:var(--lime); }.activity-meta b[data-status="FAILED"],.activity-meta b[data-status="RECONCILIATION_REQUIRED"] { color:var(--red); }.activity-meta time { color:#555; font-size:10px; }
.empty { color:#666; font-size:13px; }.notice { position:fixed; right:20px; bottom:20px; max-width:420px; background:var(--lime); color:#080808; padding:13px 16px; font-weight:700; box-shadow:0 12px 40px #000; }.notice[data-kind="error"] { background:var(--red); }
@media (max-width:760px) { main { width:min(100% - 24px,1160px); padding-top:38px; }.topbar { padding:0 14px; }.hero-row { align-items:flex-start; flex-direction:column; }.status-card { width:100%; }.metrics,.grid,fieldset { grid-template-columns:1fr; }.panel { min-height:auto; }.activity-row { flex-direction:column; }.activity-meta { text-align:left; }.create-card { padding:18px; } }