:root {
  --bg:#0f1220; --panel:#171a2b; --line:#2a2f45;
  --txt:#e6e8f0; --muted:#9aa0b4; --accent:#5b8cff; --danger:#ff6b6b;
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--txt); }

nav { display:flex; align-items:center; gap:16px; padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--line); }
nav a { color:var(--txt); text-decoration:none; font-size:14px; }
nav a:hover { color:var(--accent); }
nav .spacer { flex:1; }
nav .user { color:var(--muted); font-size:13px; margin-right:8px; }

main { padding:20px; max-width:1000px; margin:0 auto; }
h1 { font-size:20px; margin:0 0 16px; }

button { background:var(--accent); color:#fff; border:0; padding:7px 12px; border-radius:6px; cursor:pointer; font-size:14px; }
button:hover { opacity:.9; }
button.ghost { background:transparent; color:var(--muted); }
button.ghost:hover { color:var(--txt); }
button.del { background:transparent; color:var(--muted); padding:2px 8px; }
button.del:hover { color:var(--danger); }

input, select { background:var(--bg); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-size:14px; }

.cards { display:flex; gap:14px; flex-wrap:wrap; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 20px; min-width:120px; }
.card b { display:block; font-size:26px; }
.card span { color:var(--muted); font-size:13px; }

.row-form { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }

table.grid { width:100%; border-collapse:collapse; }
table.grid th, table.grid td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:14px; }
table.grid th { color:var(--muted); font-weight:600; }

.login-page { display:grid; place-items:center; height:100vh; }
.login { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:12px; width:280px; }
.login h1 { margin:0 0 6px; text-align:center; }
.login .error { color:var(--danger); font-size:13px; margin:0; }

.muted { color:var(--muted); font-size:13px; }
.stage { width:100%; height:660px; background:#000; border:1px solid var(--line); border-radius:10px; margin:12px 0; }

.actions { white-space:nowrap; }
.actions > * { margin-right:4px; }
.btn-link { display:inline-block; text-decoration:none; background:var(--accent); color:#fff; padding:7px 12px; border-radius:6px; font-size:14px; }
.btn-warn { background:#c26a2b; }
.status { font-size:12px; padding:2px 8px; border-radius:10px; }
.status-idle { color:var(--muted); border:1px solid var(--line); }
.status-active { color:#7ee787; border:1px solid #2a6b34; }
.status-launching { color:#e3b341; border:1px solid #6b5a2a; }
.status-error { color:var(--danger); border:1px solid #6b2a2a; }