:root{
  --bg:#fff; --fg:#1a1d22; --muted:#667085; --line:#e2e6ec;
  --accent:#2f6fed; --ok:#1b845a; --warn:#b0700d; --bad:#c0392b;
  --card:#f8fafc;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0f1115; --fg:#e6e8ec; --muted:#9aa3b2; --line:#2a2f3a;
    --accent:#6ea8fe; --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
    --card:#161a21;
  }
}
*{box-sizing:border-box}

/*
 * WAJIB berada di atas aturan display mana pun.
 *
 * Atribut `hidden` menyembunyikan lewat display:none milik stylesheet PERAMBAN,
 * dan aturan penulis selalu mengalahkannya. Tanpa baris ini, `#login{display:flex}`
 * di bawah membuat form login tetap tampil walau sudah di-set hidden — layar tak
 * berganti setelah masuk, dan panelnya terdorong satu layar ke bawah.
 */
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* --- layar masuk --- */
#login{display:flex; min-height:100vh; align-items:center; justify-content:center; padding:1.5rem}
#login form{width:100%; max-width:22rem}
#login h1{font-size:1.6rem; margin:0 0 .3rem}
#login .sub{color:var(--muted); margin:0 0 1.6rem; font-size:.9rem}
label{display:block; font-size:.85rem; color:var(--muted); margin:.9rem 0 .3rem}
input,select{
  width:100%; padding:.55rem .7rem; border:1px solid var(--line); border-radius:7px;
  background:var(--bg); color:var(--fg); font:inherit;
}
input:focus,select:focus{outline:2px solid var(--accent); outline-offset:-1px}
button{
  font:inherit; cursor:pointer; border-radius:7px; border:1px solid transparent;
  padding:.5rem 1rem; background:var(--accent); color:#fff; font-weight:600;
}
button:disabled{opacity:.55; cursor:default}
#login button{width:100%; margin-top:1.4rem}
button.ghost{background:transparent; color:var(--fg); border-color:var(--line); font-weight:500}
button.link{background:none; color:var(--muted); border:none; padding:.3rem; font-weight:500}
button.link:hover{color:var(--fg)}
button.sm{padding:.28rem .6rem; font-size:.82rem}

/* --- kerangka --- */
header{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.7rem 1.2rem; border-bottom:1px solid var(--line);
}
header nav{display:flex; gap:.25rem; flex:1; flex-wrap:wrap}
.tab{background:none; color:var(--muted); font-weight:500; padding:.4rem .75rem}
.tab:hover{color:var(--fg)}
.tab.on{background:var(--card); color:var(--fg)}
.who{color:var(--muted); font-size:.85rem}
main{max-width:66rem; margin:0 auto; padding:1.5rem 1.2rem 5rem}

h2{font-size:1.15rem; margin:0 0 .2rem}
.hint{color:var(--muted); font-size:.87rem; margin:0 0 1.2rem}
.err{
  background:color-mix(in srgb, var(--bad) 12%, transparent);
  color:var(--bad); border:1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  padding:.6rem .8rem; border-radius:7px; margin:0 0 1rem; font-size:.9rem;
}

/* --- tabel --- */
table{width:100%; border-collapse:collapse; margin:0 0 1.5rem; font-size:.9rem}
th,td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle}
th{color:var(--muted); font-weight:500; font-size:.82rem; white-space:nowrap}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr.off td{opacity:.5}
.empty{color:var(--muted); font-size:.9rem; padding:1.5rem 0; text-align:center}

/* --- kartu angka --- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.8rem; margin:0 0 1.8rem}
.card{background:var(--card); border:1px solid var(--line); border-radius:9px; padding:.8rem .9rem}
.card .k{color:var(--muted); font-size:.8rem}
.card .v{font-size:1.35rem; font-weight:600; font-variant-numeric:tabular-nums; margin-top:.15rem}

/* --- lencana status --- */
.badge{font-size:.78rem; padding:.15rem .5rem; border-radius:20px; white-space:nowrap;
       border:1px solid currentColor}
.badge.ok{color:var(--ok)} .badge.bad{color:var(--bad)} .badge.warn{color:var(--warn)}

/* --- bar kapasitas & pemakaian --- */
.bar{height:8px; background:var(--line); border-radius:5px; overflow:hidden; margin:.3rem 0 .2rem}
.bar > i{display:block; height:100%; background:var(--accent)}
.bar > i.ok{background:var(--ok)}
.bar > i.warn{background:var(--warn)}
.bar > i.bad{background:var(--bad)}
.pakai{font-variant-numeric:tabular-nums}
.pakai.ok{color:var(--ok)} .pakai.warn{color:var(--warn)} .pakai.bad{color:var(--bad)}

/* --- sub-tab di dalam halaman --- */
.subtabs{display:flex; gap:.25rem; margin:.6rem 0 1.2rem; border-bottom:1px solid var(--line); padding-bottom:.5rem}
td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; color:var(--muted)}

/* --- panel login akun claude --- */
td.aksi{white-space:nowrap}
td.aksi button + button{margin-left:.3rem}
.login-panel{border-color:var(--accent)}
.login-panel .url{
  display:block; margin:.2rem 0 .4rem; padding:.6rem .7rem;
  background:var(--card); border:1px solid var(--line); border-radius:7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem;
  /* URL otorisasi sangat panjang; biarkan membungkus alih-alih mendorong lebar halaman */
  word-break:break-all; line-height:1.45;
}

/* --- form sebaris --- */
.row{display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; margin:0 0 1.5rem}
.row > div{flex:1; min-width:8rem}
.row label{margin-top:0}
fieldset{border:1px solid var(--line); border-radius:9px; padding:1rem 1.1rem 1.2rem; margin:0 0 1.5rem}
legend{padding:0 .4rem; color:var(--muted); font-size:.85rem}