:root { --bg:#f4f6f9; --card:#fff; --text:#1b1f24; --muted:#5d6670; --accent:#2f5bea; --border:#e2e6ec; --danger:#b42318;
        --pass:#12805c; --fail:#c4320a; --run:#c27c0e; --queue:#7a8491; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI", system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--text); font-size:15px; }
a { color:var(--accent); }
code, .mono { font-family:"Cascadia Code", Consolas, "SFMono-Regular", monospace; font-size:.9em; }
h1 { margin:0 0 4px; font-size:1.5rem; }
h2 { font-size:1.05rem; margin:28px 0 10px; }
.muted { color:var(--muted); margin:0; }
.small { font-size:.82rem; }
.hidden { display:none !important; }

.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5; }
.brand { font-weight:700; color:var(--accent); text-decoration:none; margin:0 0 8px; }
.topbar .brand { margin:0; }
.who { font-size:.88rem; color:var(--muted); }

.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.page { width:90%; margin:0 auto; padding:24px 16px 64px; }
.page.narrow { max-width:720px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.head-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crumbs { font-size:.85rem; color:var(--muted); margin:0 0 8px; }
.crumbs a { color:var(--muted); }

.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:24px; }
.center .card { width:100%; max-width:440px; box-shadow:0 4px 20px rgba(0,0,0,.05); padding:32px; }
.center .muted { margin-bottom:24px; }
.empty { text-align:center; color:var(--muted); }

.btn { display:inline-flex; align-items:center; gap:8px; justify-content:center; padding:8px 14px; border:1px solid var(--border); border-radius:7px; background:#fff; color:var(--text); text-decoration:none; font:inherit; font-weight:600; cursor:pointer; }
.btn:hover { background:#f0f3f8; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { filter:brightness(1.08); }
.btn.danger { color:var(--danger); border-color:#fecdca; }
.center .btn { width:100%; padding:12px 16px; }
.alert { background:#fef3f2; color:var(--danger); border:1px solid #fecdca; border-radius:8px; padding:10px 12px; margin-bottom:16px; font-size:.9rem; }

.list { background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-top:1px solid var(--border); color:inherit; text-decoration:none; }
.row:first-child { border-top:0; }
.row:hover { background:#f8fafc; }
.row .grow { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.row .grow strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .right { text-align:right; white-space:nowrap; }
.num { font-weight:700; color:var(--muted); min-width:44px; }
.dot { width:10px; height:10px; border-radius:50%; flex:none; background:var(--border); }

.badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; text-transform:capitalize; color:#fff; min-width:76px; justify-content:center; }
.s-passed { background:var(--pass); } .s-failed { background:var(--fail); } .s-running { background:var(--run); }
.s-queued, .s-canceled { background:var(--queue); } .s-none { background:var(--border); }
.spin { width:9px; height:9px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:sp 0.8s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }

.form { display:flex; flex-direction:column; gap:16px; margin-bottom:16px; }
.form h2 { margin:0; }
.form label { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:.9rem; }
.form input, .form textarea { font:inherit; font-weight:400; padding:9px 11px; border:1px solid var(--border); border-radius:7px; background:#fff; }
.form input:focus, .form textarea:focus { outline:2px solid #c7d4fb; border-color:var(--accent); }
.form small { font-weight:400; color:var(--muted); }
.form .two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.actions { display:flex; gap:8px; }
.danger-zone { margin-top:32px; }

.logbar { display:flex; justify-content:space-between; align-items:center; background:#1f2329; color:#c9d1d9; padding:8px 14px; border-radius:10px 10px 0 0; }
.log { margin:0; background:#16191d; color:#d6dde6; padding:14px; border-radius:0 0 10px 10px; min-height:320px; overflow-x:auto;
       font-family:"Cascadia Code", Consolas, monospace; font-size:.82rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.log .sect { color:#7fb3ff; font-weight:700; margin-top:10px; border-top:1px solid #2a2f36; padding-top:8px; }
.log .sect:first-child { margin-top:0; border-top:0; padding-top:0; }

@media (max-width:640px) {
  .form .two { grid-template-columns:1fr; }
  .row .right { display:none; }
  .who { display:none; }
}
.btn.big { padding:12px 22px; font-size:1rem; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

.logbar { display:flex; justify-content:space-between; align-items:center; background:#1f2329; color:#c9d1d9; padding:8px 14px; border-radius:10px 10px 0 0; }
.logbar + .log { border-radius:0 0 10px 10px; }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#3fb950; margin-right:4px; animation:blink 1.2s infinite; }
.live-dot.off { background:#6e7681; animation:none; }
@keyframes blink { 50% { opacity:.3; } }
.log .b { font-weight:700; }
.log .fg30{color:#6e7681}.log .fg31{color:#ff7b72}.log .fg32{color:#3fb950}.log .fg33{color:#d29922}.log .fg34{color:#58a6ff}.log .fg35{color:#bc8cff}.log .fg36{color:#39c5cf}.log .fg37{color:#d6dde6}
.log .fg90{color:#8b949e}.log .fg91{color:#ffa198}.log .fg92{color:#56d364}.log .fg93{color:#e3b341}.log .fg94{color:#79c0ff}.log .fg95{color:#d2a8ff}.log .fg96{color:#56d4dd}.log .fg97{color:#fff}
.log [class*="bg"]{color:#fff}
.log .bg40{background:#30363d}.log .bg41{background:#b62324}.log .bg42{background:#1a7f37}.log .bg43{background:#9a6700}.log .bg44{background:#1f6feb}.log .bg45{background:#8250df}.log .bg46{background:#1b7c83}.log .bg47{background:#d6dde6;color:#16191d}
.log .bg100{background:#484f58}.log .bg101{background:#da3633}.log .bg102{background:#2ea043}.log .bg103{background:#bb8009}.log .bg104{background:#388bfd}.log .bg105{background:#a371f7}.log .bg106{background:#2b9aa3}.log .bg107{background:#fff;color:#16191d}

/* running build row + modal */
.row.is-running { background:#fffbeb; }
.loader { width:14px; height:14px; flex:none; border:2px solid #f3d38a; border-top-color:var(--run); border-radius:50%; animation:sp .8s linear infinite; }
.progress { height:3px; background:#fdecc8; overflow:hidden; }
.progress i { display:block; height:100%; width:30%; background:var(--run); animation:slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { transform:translateX(-100%); } 100% { transform:translateX(400%); } }
code.branch { background:#eef2ff; color:#3045b5; padding:1px 6px; border-radius:4px; }
.modal { border:1px solid var(--border); border-radius:12px; padding:24px; width:min(480px, calc(100% - 32px)); box-shadow:0 20px 60px rgba(0,0,0,.2); }
.modal::backdrop { background:rgba(15,20,30,.45); }
.modal .form { margin:0; }
.btn.sm { padding:5px 10px; font-size:.8rem; }
.btn.danger:hover { background:#fef3f2; }