:root { --bg:#fafbfd; --card:#fff; --text:#0b1220; --muted:#6e7791; --border:rgba(11,18,32,.1); --accent:#4f46e5; --ok:#047857; --warn:#b45309; --bad:#b91c1c; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg:#0a0e1a; --card:#131a2d; --text:#e7eaf3; --muted:#7a8395; --border:rgba(255,255,255,.1); --accent:#818cf8; --ok:#34d399; --warn:#fbbf24; --bad:#f87171; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
header { border-bottom:1px solid var(--border); } .bar { display:flex; justify-content:space-between; align-items:center; min-height:56px; }
.logo { font-weight:700; color:var(--text); text-decoration:none; } .logo span { color:var(--accent); }
main { padding: 20px 16px 48px; } h1 { font-size:1.3rem; margin: 24px 0 12px; } h2 { font-size:1.1rem; }
a { color: var(--accent); } .muted { color: var(--muted); font-size: .85rem; } code { font-size: .85rem; }
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:16px; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; display:block; overflow-x:auto; }
th, td { text-align:left; padding:8px 12px; border-bottom:1px solid var(--border); vertical-align:top; } th { font-size:.8rem; color:var(--muted); }
.btn, button { background:var(--accent); color:#fff; border:0; border-radius:10px; padding:8px 16px; font:600 .9rem inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button.ghost, .ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
form.inline { display:inline; margin-right:8px; } .flash { padding:10px 14px; border-radius:10px; background:var(--card); border:1px solid var(--border); }
dl { display:grid; grid-template-columns: max-content 1fr; gap: 4px 16px; } dt { color:var(--muted); } dd { margin:0; }
pre.log { background:#0b1220; color:#e7eaf3; padding:14px; border-radius:12px; overflow-x:auto; font-size:.8rem; line-height:1.45; max-height:70vh; }
.state { padding:2px 10px; border-radius:999px; font-size:.8rem; font-weight:600; border:1px solid var(--border); }
.state-succeeded { color:var(--ok); } .state-failed, .state-rejected, .state-expired { color:var(--bad); }
.state-running, .state-queued, .state-awaiting_approval { color:var(--warn); } .state-skipped, .state-superseded { color:var(--muted); }