/* Gaya bersama seluruh halaman. Dipisah dari HTML supaya tidak ada lagi
   template literal raksasa di dalam index.js — satu backtick nyasar di
   sana dulu membuat container gagal start tanpa gejala yang jelas. */

:root {
  --bg:#f6f7f9; --card:#fff; --fg:#14171a; --muted:#6b7280; --line:#e5e7eb;
  --run:#2563eb; --ok:#15803d; --fail:#b91c1c; --queue:#a16207;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0f1115; --card:#171a21; --fg:#e6e8eb; --muted:#9aa3af; --line:#262b36;
    --run:#60a5fa; --ok:#4ade80; --fail:#f87171; --queue:#fbbf24;
  }
}
* { box-sizing:border-box }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
a { color:var(--run) }

/* --- bilah atas bersama --- */
.topbar {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line);
}
.topbar .brand { font-weight:700; font-size:.95rem; margin-right:.25rem }
.topbar nav { display:flex; gap:.9rem; font-size:.88rem }
.topbar nav a { text-decoration:none }
.topbar nav a.aktif { font-weight:700; text-decoration:underline }
.topbar .spacer { flex:1 }
.topbar .who { color:var(--muted); font-size:.82rem }
.topbar button.keluar {
  background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:6px; padding:.2rem .6rem; cursor:pointer; font:inherit; font-size:.82rem;
}
.topbar button.keluar:hover { color:var(--fail); border-color:var(--fail) }

.isi { padding:1.5rem }
h1 { font-size:1.15rem; margin:0 0 .25rem }
.sub { color:var(--muted); font-size:.85rem; margin-bottom:1.25rem }
section {
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:1rem 1.1rem; margin-bottom:1rem;
}
h2 {
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:0 0 .75rem; font-weight:600;
}
.empty { color:var(--muted); font-style:italic; padding:.4rem 0 }
.warn { color:var(--fail); font-size:.85rem; margin-top:.5rem }
.pill {
  background:var(--bg); border:1px solid var(--line); border-radius:999px;
  padding:.1rem .55rem; font-size:.8rem; color:var(--queue); font-weight:600;
}
input, select, button, textarea {
  font:inherit; color:var(--fg); background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:.4rem .6rem;
}
button { cursor:pointer }
button.utama { background:var(--run); color:#fff; border-color:transparent; font-weight:600 }
button:disabled { opacity:.5; cursor:not-allowed }