:root {
  color-scheme: dark;
  --bg: #0b1020;
  --panel: #121a2f;
  --panel-2: #1a2543;
  --border: #1b2340;
  --muted: #7b8bad;
  --text: #e5e9f4;
  --accent: #60a5fa;
  --ok: #10b981;
  --err: #ef4444;
  --warn: #f59e0b;
  --unknown: #a78bfa;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { background:#070a17; border-right: 1px solid var(--border); padding:16px;
  display:flex; flex-direction:column; gap:16px; }
.sidebar .brand { font-weight:800; letter-spacing:0.14em; color:var(--accent); line-height:1.15; }
.sidebar nav { display:flex; flex-direction:column; gap:4px; }
.sidebar nav a { color: var(--text); padding: 8px 10px; border-radius: 6px; }
.sidebar nav a:hover, .sidebar nav a.active { background: var(--panel-2); text-decoration: none; }
.sidebar footer { margin-top:auto; color: var(--muted); font-size:12px;
  display:flex; flex-direction:column; gap:4px; }
.sidebar footer .logout { color: var(--err); }

.content { padding: 24px; }
h1 { font-size: 20px; margin: 0 0 16px; display:flex; align-items:center; gap:10px; }
h2 { font-size: 13px; margin: 0 0 12px; color: var(--muted); text-transform: uppercase; letter-spacing:0.08em; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; margin-bottom: 16px; }

.flash { padding:10px 14px; border-radius:8px; margin-bottom:12px; font-size:13px; border:1px solid; }
.flash.ok { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.35); color:#a7f3d0; }
.flash.err { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); color:#fecaca; }

.kpi-row { display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  margin-bottom: 16px; }
.kpi { background: var(--panel); border:1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; }
.kpi .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing:0.08em; }
.kpi .value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-ok .value { color: var(--ok); }
.kpi-err .value { color: var(--err); }
.kpi-unknown .value { color: var(--unknown); }

label { display:block; color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing:0.08em; margin: 10px 0 6px; }
input[type=text], input[type=password], input[type=number], input[type=file], input:not([type]),
textarea {
  width:100%; background:#070a17; color: var(--text); border:1px solid var(--border);
  border-radius:8px; padding: 10px 12px; font: inherit;
}
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
input:focus, textarea:focus { outline: 1px solid var(--accent); }

.row { display:flex; gap:12px; }
.row .col { flex:1; }
.row .col.narrow { flex: 0 0 180px; }

.btn { display:inline-block; background:#1f2a4a; color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding: 9px 14px; font: inherit; cursor:pointer; text-decoration:none; }
.btn:hover { background: var(--panel-2); }
.btn.primary { background:#1f3a6a; border-color: rgba(96,165,250,0.5); color:#dbeafe; }
.btn.primary:hover { background:#244a86; }
.btn.danger { background:#3a1414; border-color: rgba(239,68,68,0.4); color:#fecaca; }
.btn.danger:hover { background:#551a1a; }

.actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 10px; }
.downloads { display:flex; gap:8px; flex-wrap:wrap; }

table.grid { width:100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { border-bottom: 1px solid var(--border); padding: 8px; text-align:left; vertical-align: top; }
table.grid th { color: var(--muted); font-weight: 500; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.06em; }
table.grid td.ok { color: var(--ok); }
table.grid td.err { color: var(--err); }
table.grid td.warn { color: var(--warn); }
td.muted, .muted { color: var(--muted); }

.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; }
.badge.st-queued, .badge.st-paused { background:#1e293b; color:#94a3b8; }
.badge.st-running { background:#2f2103; color: var(--warn); }
.badge.st-done { background:#0d3b2c; color: #a7f3d0; }
.badge.st-error, .badge.st-cancelled { background:#3a1414; color: var(--err); }
.badge.st-valid { background:#0d3b2c; color:#a7f3d0; }
.badge.st-invalid { background:#3a1414; color: var(--err); }
.badge.st-unknown { background:#2a1e4a; color: var(--unknown); }
.badge.st-rate_limited { background:#2f2103; color: var(--warn); }
.badge.st-pending { background:#1e293b; color:#94a3b8; }
.badge.st-in_progress { background:#142134; color: var(--accent); }

.progress { width:100%; height:10px; background:#070a17; border:1px solid var(--border);
  border-radius: 999px; overflow: hidden; }
.progress .bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok));
  transition: width 0.4s ease; }
.progress-text { margin-top: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }

.err { color: var(--err); }

/* Login */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 32px; width: 360px; max-width: 92vw; }
.login-card h1 { font-size: 20px; margin-bottom: 16px; }
.login-card .btn { width: 100%; margin-top: 14px; }