:root { --bg:#0f1419; --card:#171e26; --ink:#e8eef4; --muted:#8b98a5; --line:#2a3542; --acc:#3d8bfd; --err:#ff6b6b; --ok:#3dd68c; --run:#f5c84c; }
*{ box-sizing:border-box; }
body{ margin:0; font:14px/1.45 ui-sans-serif,system-ui; background:var(--bg); color:var(--ink); }
header{ display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--line); }
main.layout{ padding:20px; max-width:1280px; margin:0 auto; display:grid; grid-template-columns:240px minmax(0,1fr) 300px; gap:16px; align-items:start; }
.main-col, .card, .aside{ min-width:0; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; }
.aside{ position:sticky; top:16px; }
@media(max-width:1100px){
  main.layout{ grid-template-columns:1fr; padding:12px; }
  .aside{ position:static; }
  header{ padding:12px 16px; }
}
.login{ max-width:420px; margin:12vh auto; }
h1,h2{ margin:0 0 12px; font-size:18px; }
label{ display:block; margin:10px 0 4px; color:var(--muted); }
input,select,button,textarea{ width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:#10161c; color:var(--ink); }
button,.btn{ background:var(--acc); border:0; color:#fff; cursor:pointer; font-weight:600; text-align:center; text-decoration:none; display:inline-block; }
button:disabled{ opacity:.45; cursor:not-allowed; }
button.ghost,.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); width:auto; }
button.danger{ background:#2a1416; color:var(--err); border:1px solid #5a2428; }
.actions{ display:flex; gap:8px; margin-top:12px; }
.actions button{ flex:1; }
.row{ display:flex; gap:8px; margin-top:12px; align-items:center; }
.row.spread{ justify-content:space-between; align-items:center; }
.row input{ flex:1; }
.muted{ color:var(--muted); }
.sm{ font-size:12px; margin:6px 0 0; }
.err{ color:var(--err); }
.ok{ color:var(--ok); }
.hint{ background:#10161c; padding:8px; border-radius:8px; }
.check{ display:flex; gap:8px; align-items:center; }
.check input{ width:auto; }
pre{ background:#0b0f13; padding:12px; border-radius:8px; overflow:auto; max-height:min(420px, 55vh); font:12px/1.4 ui-monospace,monospace; white-space:pre-wrap; }
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); }
tbody tr{ cursor:pointer; }
tbody tr:hover, .list li:hover{ background:#1c2733; }
tbody tr.selected, .list li.selected{ background:#1c2a3c; outline:1px solid #3d8bfd55; }
.list{ list-style:none; padding:0; margin:8px 0 0; }
.list li{ display:flex; justify-content:space-between; gap:8px; padding:10px 8px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:8px; }
.list li.active-item{ flex-direction:column; align-items:flex-start; gap:4px; position:relative; }
.list li.active-item.running{ border-left:3px solid var(--run); background:#2a2410; }
.list li.active-item.queued{ border-left:3px solid var(--muted); }
.list li.active-item.selected{ outline:1px solid var(--acc); }
.list li.active-item .pulse{ position:absolute; right:8px; top:12px; width:8px; height:8px; border-radius:50%; background:var(--run); }
.list li.active-item.running .pulse{ animation:pulse 1s ease-in-out infinite; }
.list li.repo-item.selected{ outline:1px solid var(--acc); }
.pill{ display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; }
.pill.queued{ background:#1c2733; color:var(--muted); }
.pill.running{ background:#2a2410; color:var(--run); }
.pill.success{ background:#10261c; color:var(--ok); }
.pill.exists{ background:#1c2a3c; color:#8eb6ff; }
.pill.failure{ background:#2a1416; color:var(--err); }
.pill.cancelled{ background:#1c2733; color:var(--muted); }
.jobs{ list-style:none; padding:0; margin:0 0 10px; display:flex; flex-wrap:wrap; gap:8px; }
.jobs .job-item{ display:flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:#10161c; }
.jobs .job-item:hover{ border-color:#3d8bfd88; }
.jobs .job-item.selected{ border-color:var(--acc); background:#1c2a3c; }
.jobs .job-item.running{ border-color:var(--run); }
code{ font-family:ui-monospace,monospace; }
.phase{ display:inline-block; margin:0 0 10px; padding:4px 10px; border-radius:999px; font-weight:600; }
.phase.queued{ background:#1c2733; color:var(--muted); }
.phase.running{ background:#2a2410; color:var(--run); }
.phase.success{ background:#10261c; color:var(--ok); }
.phase.exists{ background:#1c2a3c; color:#8eb6ff; }
.phase.failure{ background:#2a1416; color:var(--err); }
.phase.cancelled{ background:#1c2733; color:var(--muted); }
.pipeline{ list-style:none; display:flex; gap:0; padding:0; margin:0 0 12px; overflow-x:auto; }
.pipeline li{ flex:1; min-width:88px; text-align:center; font-size:12px; color:var(--muted); position:relative; padding:0 6px 0; }
.pipeline li:not(:last-child)::after{ content:""; position:absolute; top:11px; left:calc(50% + 14px); right:calc(-50% + 14px); height:2px; background:var(--line); }
.pipeline li.success:not(:last-child)::after{ background:var(--ok); }
.pipeline li.failure:not(:last-child)::after{ background:var(--err); }
.pipeline li.running:not(:last-child)::after, .pipeline li.queued:not(:last-child)::after{ background:var(--run); }
.pipeline .dot{ width:22px; height:22px; border-radius:50%; margin:0 auto 6px; border:2px solid var(--line); background:#10161c; }
.pipeline li.success .dot{ border-color:var(--ok); background:var(--ok); }
.pipeline li.running .dot, .pipeline li.queued .dot{ border-color:var(--run); background:var(--run); animation:pulse 1.2s ease-in-out infinite; }
.pipeline li.failure .dot{ border-color:var(--err); background:var(--err); }
.pipeline li.skipped .dot{ border-color:var(--line); background:transparent; }
.pipeline li.success, .pipeline li.running, .pipeline li.queued{ color:var(--ink); }
.pipeline li.failure{ color:var(--err); }
@keyframes pulse{ 50%{ opacity:.45; } }
.main-col{ display:flex; flex-direction:column; gap:16px; }
.main-col .card{ margin:0; }
.filters{ display:flex; gap:8px; margin:0 0 10px; flex-wrap:wrap; }
.filters select{ flex:1 1 9rem; width:auto; min-width:0; }
.pager{ display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:10px; flex-wrap:wrap; }
.history{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:6px; }
.history-item{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 12px; padding:10px 8px; border-bottom:1px solid var(--line); border-radius:8px; cursor:pointer; }
.history-item:hover{ background:#1c2733; }
.history-item.selected{ background:#1c2a3c; outline:1px solid #3d8bfd55; }
.history-main, .history-meta{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; min-width:0; }
.history-main{ flex:1 1 16rem; }
.history-meta{ flex:1 1 14rem; color:var(--muted); font-size:12px; }
.history-item strong, .history-item code{ overflow-wrap:anywhere; }
.history-empty{ cursor:default; }
.history-empty:hover{ background:transparent; }
.pager button{ width:auto; }
.pager .sm{ margin:0; }
.wait{ color:var(--run); }
dialog{ width:min(440px, calc(100% - 32px)); margin:auto; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); }
dialog::backdrop{ background:rgba(8,12,16,.72); }
dialog.prod{ border-color:#8a3038; }
dialog h2{ font-size:16px; }
.facts{ display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:8px 10px; margin:12px 0; }
.facts dt{ color:var(--muted); }
.facts dd{ margin:0; overflow-wrap:anywhere; }