:root{
  --bg:#0b0f14;
  --card:#111827;
  --muted:#a7b0bf;
  --text:#e6edf7;
  --line:#223046;
  --btn:#2563eb;
  --btn2:#1f2937;
  --danger:#dc2626;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:linear-gradient(180deg, #070a0f, #0b1220 35%, #070a0f);
  color:var(--text);
}
a{color:#93c5fd; text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px; margin:0 auto; padding:18px}
.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(10,14,20,.8);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .container{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 18px}
.brand{display:flex; align-items:center; gap:10px}
.logo{font-size:22px}
.brand-title{font-weight:700}
.brand-sub{font-size:12px; color:var(--muted)}
.nav{display:flex; gap:12px}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--text)}

.card{
  background:rgba(17,24,39,.75);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 16px;
  margin:14px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
h2,h3{margin:0 0 10px 0}
.muted{color:var(--muted)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 900px){.grid2{grid-template-columns:1fr}}

.kv{display:flex; gap:10px; align-items:baseline; margin:6px 0}
.kv span:first-child{min-width:120px; color:var(--muted)}
code{background:rgba(0,0,0,.25); padding:2px 6px; border-radius:8px; border:1px solid rgba(255,255,255,.06)}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.gap{gap:12px}
.btn{
  border:0;
  background:var(--btn);
  color:white;
  padding:9px 12px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
}
.btn.secondary{background:var(--btn2); border:1px solid rgba(255,255,255,.06)}
.btn.danger{background:var(--danger)}
.btn:hover{filter:brightness(1.06)}
.pill{
  display:inline-flex;
  align-items:center;
  padding:2px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  font-size:12px;
  color:var(--muted);
}
.pill.done{color:#86efac}
.pill.error{color:#fca5a5}
.pill.running{color:#fcd34d}
.pill.pending{color:#93c5fd}
.notice{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(37,99,235,.18);
  border:1px solid rgba(37,99,235,.4);
  margin:10px 0;
}

.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line); padding:10px 8px; text-align:left; font-size:14px}
.table th{color:var(--muted); font-weight:600; font-size:12px}
.truncate{max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}