:root {
  --bg: #090d16;
  --panel: #111827;
  --panel-2: #172033;
  --line: rgba(148, 163, 184, .14);
  --text: #e8edf7;
  --muted: #8c9ab2;
  --accent: #7c6df2;
  --accent-2: #38bdf8;
  --green: #34d399;
  --yellow: #fbbf24;
  --red: #fb7185;
  --radius: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; background:
    radial-gradient(circle at 8% -10%, rgba(124,109,242,.18), transparent 28rem),
    radial-gradient(circle at 95% 0%, rgba(56,189,248,.10), transparent 25rem), var(--bg);
  color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
.topbar { height: 68px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 34px; position:sticky; top:0; background:rgba(9,13,22,.86); backdrop-filter:blur(18px); z-index:20; }
.brand { display:flex; gap:12px; align-items:center; font-weight:700; letter-spacing:-.02em; }
.brand small { font-weight:400; color:var(--muted); }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,var(--accent),#a78bfa); box-shadow:0 8px 28px rgba(124,109,242,.25); }
nav { display:flex; gap:8px; }
nav a { color:var(--muted); padding:8px 12px; border-radius:9px; font-size:14px; }
nav a:hover, nav a.active { color:var(--text); background:rgba(255,255,255,.06); }
.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-left:4px; box-shadow:0 0 12px var(--green); }
.shell { max-width:1480px; margin:0 auto; padding:34px; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; margin:10px 0 28px; }
.hero.compact { align-items:center; }
h1 { font-size:36px; margin:3px 0 5px; letter-spacing:-.035em; }
h2 { font-size:18px; margin:0; letter-spacing:-.015em; }
.eyebrow { text-transform:uppercase; letter-spacing:.13em; color:#a5b4fc; font-size:11px; font-weight:700; margin:0 0 6px; }
.muted { color:var(--muted); margin:0; }
.back { display:block; color:var(--muted); font-size:13px; margin-bottom:18px; }
.health { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; border:1px solid var(--line); background:rgba(17,24,39,.7); padding:9px 12px; border-radius:999px; }
.health span { width:7px; height:7px; border-radius:50%; }
.health.online span { background:var(--green); box-shadow:0 0 10px var(--green); }
.health.offline span { background:var(--red); }
.health b { font-size:10px; text-transform:uppercase; color:var(--yellow); margin-left:2px; }
.grid { display:grid; gap:20px; }
.dashboard-grid { grid-template-columns:minmax(0,2fr) minmax(280px,1fr); margin-bottom:20px; }
.detail-grid { grid-template-columns:1.3fr 1fr; margin-bottom:20px; }
.live-grid { grid-template-columns:minmax(350px,.78fr) minmax(0,1.5fr); }
.panel { background:linear-gradient(180deg,rgba(23,32,51,.96),rgba(17,24,39,.96)); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:0 16px 50px rgba(0,0,0,.16); }
.panel-title { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.badge, .count { border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.04); padding:5px 9px; border-radius:999px; font-size:11px; }
.launch-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; align-items:end; }
label { color:var(--muted); font-size:12px; font-weight:600; }
input, select { width:100%; border:1px solid var(--line); background:#0c1321; color:var(--text); padding:10px 11px; border-radius:9px; outline:none; margin-top:7px; }
input:focus, select:focus { border-color:rgba(124,109,242,.7); box-shadow:0 0 0 3px rgba(124,109,242,.12); }
.checks { display:flex; gap:17px; grid-column:span 2; align-items:center; min-height:38px; }
.checks label { display:flex; gap:6px; align-items:center; white-space:nowrap; }
.checks input { width:auto; margin:0; accent-color:var(--accent); }
.button { border:0; border-radius:9px; padding:10px 15px; color:var(--text); font-weight:650; cursor:pointer; font-size:13px; display:inline-block; text-align:center; }
.button.primary { background:linear-gradient(135deg,var(--accent),#6254dd); box-shadow:0 8px 25px rgba(124,109,242,.22); }
.button.ghost { border:1px solid var(--line); background:rgba(255,255,255,.04); }
.button.danger { background:rgba(251,113,133,.12); border:1px solid rgba(251,113,133,.3); color:#fda4af; }
.button.small { padding:7px 10px; font-size:11px; }
.button:disabled { opacity:.4; cursor:not-allowed; }
.form-result { grid-column:1/-1; margin:0; min-height:18px; font-size:12px; color:var(--muted); }
.form-result.success { color:var(--green); } .form-result.error { color:var(--red); }
.steps { list-style:none; padding:0; margin:18px 0 22px; display:grid; gap:14px; }
.steps li { display:flex; align-items:center; gap:12px; }
.steps li > span { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:rgba(124,109,242,.15); color:#c4b5fd; font-size:12px; }
.steps b { display:block; font-size:13px; } .steps small, td small { display:block; color:var(--muted); margin-top:3px; }
.filters { display:grid; grid-template-columns:1.3fr .7fr .8fr .8fr auto; gap:10px; margin-bottom:16px; }
.filters input, .filters select { margin:0; }
.table-wrap { overflow:auto; max-height:58vh; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:var(--muted); font-weight:700; padding:11px 10px; text-align:left; position:sticky; top:0; background:var(--panel-2); z-index:2; }
td { padding:13px 10px; border-top:1px solid var(--line); vertical-align:top; }
tbody tr:hover { background:rgba(255,255,255,.025); }
.roles-table { min-width:1000px; }
.roles-table-wrap { max-height:70vh; }
.role-details { min-width:620px; }
.role-details summary { color:#a5b4fc; cursor:pointer; font-size:12px; font-weight:650; }
.role-details-content { margin-top:12px; border:1px solid var(--line); border-radius:10px; overflow:auto; }
.role-classification-table th { position:static; }
.role-classification-table td { padding:10px; }
.run-id { color:#a5b4fc; font-family:ui-monospace,monospace; font-weight:700; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; }
.status { display:inline-block; border-radius:999px; padding:4px 8px; font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; background:rgba(148,163,184,.12); color:#cbd5e1; }
.status.completed, .status.succeeded { color:#6ee7b7; background:rgba(52,211,153,.12); }
.status.failed { color:#fda4af; background:rgba(251,113,133,.12); }
.status.stale { color:#fdba74; background:rgba(249,115,22,.13); }
.status.started, .status.running { color:#7dd3fc; background:rgba(56,189,248,.12); }
.status.pending { color:#fde68a; background:rgba(251,191,36,.12); }
.status.large { padding:7px 12px; font-size:11px; }
.metadata { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0; }
.metadata div { background:rgba(9,13,22,.28); padding:11px; border-radius:10px; }
.metadata .full { grid-column:1/-1; }
dt { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
dd { margin:0; font-size:13px; }
pre { white-space:pre-wrap; word-break:break-word; }
pre.json { background:#0b111d; border:1px solid var(--line); padding:13px; border-radius:10px; color:#c7d2fe; max-height:330px; overflow:auto; margin:0; font-size:11px; }
pre.json.small { max-height:200px; margin-top:8px; }
.inline-filter select { margin:0; width:130px; }
.log-actions select { margin:0; width:130px; padding:7px 10px; }
.log-sources { display:grid; gap:6px; color:var(--muted); font-size:10px; margin-bottom:12px; }
.log-sources div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.log-section + .log-section { margin-top:16px; }
.log-head { display:flex; justify-content:space-between; gap:15px; background:#0c1321; color:var(--muted); padding:9px 11px; font-size:11px; border:1px solid var(--line); border-bottom:0; border-radius:10px 10px 0 0; }
pre.logs { margin:0; height:420px; overflow:auto; background:#060a11; border:1px solid var(--line); border-radius:0 0 10px 10px; padding:14px; color:#cbd5e1; font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }
.log-line { display:block; } .level-error { color:#fda4af; } .level-warning { color:#fde68a; }
.empty { color:var(--muted); text-align:center; padding:32px !important; }
.error-box { color:#fda4af; background:rgba(251,113,133,.08); border:1px solid rgba(251,113,133,.2); padding:10px; border-radius:9px; font-size:12px; margin-bottom:12px; }
.hidden { display:none !important; }
.job-list { display:grid; gap:9px; max-height:68vh; overflow:auto; }
.job-card { border:1px solid var(--line); background:rgba(9,13,22,.35); border-radius:11px; padding:13px; cursor:pointer; }
.job-card:hover, .job-card.selected { border-color:rgba(124,109,242,.55); background:rgba(124,109,242,.07); }
.job-card-head { display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; }
.job-card h3 { font:600 12px/1.35 ui-monospace,monospace; margin:0; word-break:break-all; }
.job-meta { display:flex; gap:9px; color:var(--muted); font-size:10px; flex-wrap:wrap; }
.log-actions { display:flex; gap:7px; }
.live-log { height:61vh !important; border-radius:10px !important; }
.progress-cards { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.progress-card { min-width:90px; background:#0c1321; border:1px solid var(--line); padding:8px 10px; border-radius:9px; }
.progress-card b { display:block; font-size:15px; } .progress-card small { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.skeleton { height:75px; border-radius:11px; background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.06),rgba(255,255,255,.02)); background-size:200% 100%; animation:shimmer 1.4s infinite; }
#toast-root { position:fixed; right:22px; bottom:22px; display:grid; gap:8px; z-index:30; }
.toast { background:#172033; border:1px solid var(--line); border-radius:10px; padding:11px 14px; box-shadow:0 15px 40px rgba(0,0,0,.35); font-size:12px; }
@keyframes shimmer { to { background-position:-200% 0; } }
.nav-user { color:var(--muted); font-size:12px; padding:8px 10px; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-logout { color:var(--muted); }
.login-body { display:grid; place-items:center; padding:24px; }
.login-card { width:100%; max-width:380px; margin-top:12vh; background:linear-gradient(180deg,rgba(23,32,51,.96),rgba(17,24,39,.96)); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.login-brand { display:flex; gap:12px; align-items:center; font-weight:700; letter-spacing:-.02em; margin-bottom:18px; }
.login-brand small { font-weight:400; color:var(--muted); }
.login-hint { color:var(--muted); font-size:13px; margin:0 0 18px; }
.login-form { display:grid; gap:14px; }
.login-form label { display:grid; }
.login-form .button { margin-top:6px; padding:11px; }
.login-error { color:#fda4af; background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.25); padding:10px 12px; border-radius:9px; font-size:12px; margin-bottom:16px; }
@media(max-width:900px) {
  .shell { padding:20px; } .topbar { padding:0 20px; }
  .dashboard-grid,.detail-grid,.live-grid { grid-template-columns:1fr; }
  .launch-form { grid-template-columns:1fr 1fr; }
  .filters { grid-template-columns:1fr 1fr; }
}