:root{
  --bs-body-bg:#f6f7f9;
  --bs-body-color:#1a1f36;
  --bs-border-color:#e7e9ee;
  --bs-primary:#635bff;
  --brand:#635bff;
  --brand-dark:#4c44e0;
  --muted:#697386;
  --hint:#8792a2;
  --surface:#ffffff;
  --radius:12px;
}
*{ -webkit-font-smoothing:antialiased; }
body{
  background:var(--bs-body-bg);
  color:var(--bs-body-color);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
}
.topbar{ background:var(--surface); border-bottom:1px solid var(--bs-border-color); }
.brand{ font-weight:600; display:flex; align-items:center; gap:.5rem; color:var(--bs-body-color); }
.brand .bi{ color:var(--brand); font-size:1.3rem; }
.muted{ color:var(--muted); } .hint{ color:var(--hint); font-size:.85rem; }
.card-s{ background:var(--surface); border:1px solid var(--bs-border-color); border-radius:var(--radius); }
.metric{ background:var(--surface); border:1px solid var(--bs-border-color); border-radius:10px; padding:.9rem 1.1rem; }
.metric .label{ font-size:.8rem; color:var(--muted); }
.metric .value{ font-size:1.6rem; font-weight:600; line-height:1.2; }
.proj{ background:var(--surface); border:1px solid var(--bs-border-color); border-radius:var(--radius); padding:.85rem 1.05rem; cursor:pointer; transition:border-color .15s; }
.proj:hover{ border-color:#cdd2db; }
.proj.active{ border:1.5px solid var(--brand); }
.code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; color:var(--hint); }
.st{ font-size:.72rem; padding:.15rem .55rem; border-radius:20px; font-weight:500; white-space:nowrap; }
.st-running{ background:#e3f6ec; color:#1a7f4b; }
.st-building{ background:#fdf3d6; color:#9a6700; }
.st-failed{ background:#fdeceb; color:#b42318; }
.st-pending,.st-created{ background:#eef0f3; color:#697386; }
.st-stopped,.st-absent{ background:#eceef1; color:#52525b; }
.btn{ border-radius:8px; font-size:.9rem; }
.btn-brand{ background:var(--brand); color:#fff; border:none; }
.btn-brand:hover,.btn-brand:focus{ background:var(--brand-dark); color:#fff; }
.btn-soft{ background:#fff; border:1px solid var(--bs-border-color); color:var(--bs-body-color); }
.btn-soft:hover{ background:#f6f7f9; color:var(--bs-body-color); }
.form-control{ border-radius:8px; border-color:var(--bs-border-color); font-size:.95rem; }
.form-control:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(99,91,255,.15); }
.nav-pills .nav-link{ color:var(--muted); font-size:.95rem; }
.nav-pills .nav-link.active{ background:var(--brand); color:#fff; }
a{ color:var(--brand); text-decoration:none; } a:hover{ text-decoration:underline; }
.row-line{ display:flex; justify-content:space-between; align-items:center; padding:.32rem 0; font-size:.9rem; }
.row-line+.row-line{ border-top:1px solid #f1f2f5; }
.sectitle{ font-size:1.05rem; font-weight:600; }
.divide{ border-top:1px solid var(--bs-border-color); }
.mono-pill{ font-family:ui-monospace,Menlo,monospace; font-size:.78rem; background:#f1f2f5; padding:.1rem .4rem; border-radius:6px; color:#3c4257; word-break:break-all; }