/* ================= INPOS — tema gelap, lampu status ================= */
/* ---- Font pilihan, di-host sendiri (tanpa CDN) ----
   Font berbobot tunggal (Pacifico, Bebas Neue) memakai berkas 400 untuk
   semua bobot supaya browser tidak membuat versi tebal palsu. */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/space-400.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/space-600.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/space-700.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/sora-400.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/sora-600.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/sora-700.woff2') format('woff2'); }
@font-face { font-family:'Orbitron'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/orbitron-400.woff2') format('woff2'); }
@font-face { font-family:'Orbitron'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/orbitron-700.woff2') format('woff2'); }
@font-face { font-family:'Orbitron'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/orbitron-700.woff2') format('woff2'); }
@font-face { font-family:'Comfortaa'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/comfortaa-400.woff2') format('woff2'); }
@font-face { font-family:'Comfortaa'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/comfortaa-600.woff2') format('woff2'); }
@font-face { font-family:'Comfortaa'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/comfortaa-700.woff2') format('woff2'); }
@font-face { font-family:'Lora'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/lora-400.woff2') format('woff2'); }
@font-face { font-family:'Lora'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/lora-600.woff2') format('woff2'); }
@font-face { font-family:'Lora'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/lora-700.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/playfair-400.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/playfair-600.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/playfair-700.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/fraunces-400.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/fraunces-700.woff2') format('woff2'); }
@font-face { font-family:'Caveat'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/caveat-400.woff2') format('woff2'); }
@font-face { font-family:'Caveat'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/caveat-600.woff2') format('woff2'); }
@font-face { font-family:'Caveat'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/caveat-700.woff2') format('woff2'); }
@font-face { font-family:'Pacifico'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/pacifico-400.woff2') format('woff2'); }
@font-face { font-family:'Pacifico'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/pacifico-400.woff2') format('woff2'); }
@font-face { font-family:'Pacifico'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/pacifico-400.woff2') format('woff2'); }
@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/bebas-400.woff2') format('woff2'); }
@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/bebas-400.woff2') format('woff2'); }
@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/bebas-400.woff2') format('woff2'); }

:root{
  --dasar:#0a0e17; --panel:#111826; --panel2:#0d1420;
  --garis:rgba(120,150,210,.16); --tinta:#e8eefc; --redup:#8ea0c4;
  --neon:#38bdf8; --hijau:#22c55e; --merah:#ef4444; --abu:#5b6b86;
  --kuning:#eab308; --jingga:#fb923c;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(1100px 560px at 50% -10%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(37,99,235,.10), transparent 55%),
    var(--dasar);
  color:var(--tinta); min-height:100dvh; line-height:1.55;
  /* --font-app diisi halaman dari pengaturan; kalau kosong pakai font sistem. */
  font-family:var(--font-app, system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
}
a{color:var(--neon)}

/* ---------- Bilah atas ---------- */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px clamp(14px,4vw,26px);
  background:rgba(10,14,23,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--garis);
}
.bar h1{font-size:16px; letter-spacing:.14em; font-weight:800; margin:0}
.bar .titik{width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon)}
.bar .kanan{margin-left:auto; display:flex; align-items:center; gap:8px}

/* ---------- Tata letak: menu grup di kiri, tabel di kanan ---------- */
.layout{display:flex; align-items:flex-start; max-width:1160px; margin:0 auto}
.sidebar{
  position:sticky; top:53px; flex:none; width:150px;
  display:flex; flex-direction:column; gap:4px;
  padding:clamp(16px,4vw,26px) 10px;
}
.sidebar .judul-nav{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--redup); padding:0 12px 6px}
.menu-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:9px; text-decoration:none;
  color:var(--redup); font-size:13.5px; font-weight:700; letter-spacing:.02em;
  border:1px solid transparent;
}
.menu-item:hover{background:rgba(255,255,255,.05); color:var(--tinta)}
.menu-item.aktif{background:linear-gradient(140deg,#38bdf8,#2563eb); color:#04121f}
.menu-item .cacah{font-size:10.5px; font-weight:700; opacity:.85}
/* Titik merah kecil di menu bila ada anggota grup yang terblokir. */
.menu-item .peringatan{width:7px;height:7px;border-radius:50%;background:var(--merah);box-shadow:0 0 6px var(--merah);flex:none}
.tambah-grup{display:flex; gap:6px; margin-top:8px; padding:0 4px}
.tambah-grup input{flex:1; min-width:0; padding:7px 10px; font-size:12.5px}
.tambah-grup button{flex:none; padding:7px 12px; font-size:15px; line-height:1}
.wrap{max-width:1000px; margin:0 auto; padding:clamp(16px,4vw,30px) clamp(14px,4vw,26px) 70px}
.layout .wrap{max-width:none; margin:0; flex:1; min-width:0; padding-left:clamp(6px,1.5vw,14px)}

/* Layar sempit: menu jadi bilah mendatar di atas tabel, bisa digeser. */
@media (max-width:680px){
  .layout{flex-direction:column}
  .sidebar{
    position:static; width:auto; flex-direction:row; gap:6px;
    padding:12px clamp(14px,4vw,26px) 0; overflow-x:auto;
  }
  .sidebar .judul-nav{display:none}
  .menu-item{white-space:nowrap}
  .tambah-grup{margin-top:0; flex:none}
  .tambah-grup input{width:110px}
}

/* ---------- Kontrol ---------- */
.tbl{font:inherit; cursor:pointer; border:1px solid var(--garis); background:rgba(255,255,255,.05);
  color:var(--tinta); padding:8px 13px; border-radius:9px; font-size:13px; font-weight:600;
  text-decoration:none; display:inline-block}
.tbl:hover{border-color:var(--neon); background:rgba(56,189,248,.12)}
.tbl.utama{background:linear-gradient(140deg,#38bdf8,#2563eb); color:#04121f; border:0}
.tbl.bahaya{color:#fecaca}
.tbl.bahaya:hover{border-color:var(--merah); background:rgba(239,68,68,.14)}
.tbl.kecil{padding:4px 9px; font-size:11.5px}
/* Tombol di dalam baris dibuat sekecil mungkin supaya tinggi baris
   ditentukan tulisannya, bukan tombolnya. */
td .tbl.kecil{padding:2px 7px; font-size:11px}
input,select{
  font:inherit; width:100%; padding:9px 11px; border-radius:9px;
  border:1px solid var(--garis); background:var(--panel2); color:var(--tinta); font-size:14px;
}
input:focus{outline:none; border-color:var(--neon)}
label{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--redup); margin:0 0 5px}

.pesan{max-width:1160px; margin:14px auto 0; padding:0 clamp(14px,4vw,26px)}
.pesan div{padding:10px 14px; border-radius:10px; background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.35); font-size:13.5px}
.pesan div.err{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4)}

/* ---------- Kartu tabel ---------- */
.kartu{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.16)), var(--panel);
  border:1px solid var(--garis); border-radius:16px; padding:16px 16px 8px; margin:0 0 18px}
.kartu-kepala{display:flex; align-items:center; gap:10px; margin:0 0 12px; flex-wrap:wrap}
.kartu-kepala h2{font-size:15px; margin:0; letter-spacing:.03em}
.kartu-kepala form{display:flex; gap:6px; align-items:center}
.kartu-kepala .isi{flex:1; min-width:120px}
.hitung{font-size:11px; color:var(--redup)}
.hitung b.b{color:var(--merah)} .hitung b.a{color:var(--hijau)} .hitung b.r{color:var(--kuning)}

table{width:100%; border-collapse:collapse}
th{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--redup);
  text-align:left; padding:4px 7px; border-bottom:1px solid var(--garis); font-weight:600}
td{padding:4px 7px; border-bottom:1px solid rgba(120,150,210,.08); vertical-align:middle; font-size:12px}
tr:last-child td{border-bottom:0}

/* ---------- Lampu status ---------- */
.lampu{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.bulat{width:10px; height:10px; border-radius:50%; flex:none; background:var(--abu); box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.s-aman  .bulat{background:var(--hijau); box-shadow:0 0 10px var(--hijau)}
.s-blokir .bulat{background:var(--merah); box-shadow:0 0 10px var(--merah); animation:kedip 1.1s ease-in-out infinite}
.s-belum .bulat{background:var(--abu)}
.s-ragu  .bulat{background:var(--kuning); box-shadow:0 0 8px var(--kuning)}
.s-error .bulat{background:var(--jingga); box-shadow:0 0 8px var(--jingga)}
/* "Tidak aktif" = cincin kosong, dibedakan dari titik abu penuh "belum". */
.s-nonaktif .bulat{background:transparent; border:2px solid var(--redup); box-shadow:none}
/* "Mati" = domainnya tidak ada di DNS mana pun: titik gelap padam. */
.s-mati  .bulat{background:#39415a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
@keyframes kedip{0%,100%{opacity:1}50%{opacity:.3}}
.teks-s{font-size:9.5px; font-weight:700; letter-spacing:.04em}
.s-aman .teks-s{color:var(--hijau)}  .s-blokir .teks-s{color:var(--merah)}
.s-belum .teks-s{color:var(--abu)}   .s-ragu .teks-s{color:var(--kuning)}
.s-error .teks-s{color:var(--jingga)} .s-mati .teks-s{color:#93a1bd}
.s-nonaktif .teks-s{color:var(--redup)}

.url{color:var(--tinta); word-break:break-all}
.url a{color:var(--tinta); text-decoration:none} .url a:hover{color:var(--neon)}
.url .ket{display:block; font-size:10px; color:var(--redup); word-break:break-word}
.waktu{font-size:10px; color:var(--redup); white-space:nowrap}
.waktu a{color:var(--redup); text-decoration:none} .waktu a:hover{color:var(--neon)}
.aksi-sel{text-align:right; white-space:nowrap}
.tambah-baris{display:flex; gap:8px; padding:12px 8px 6px; flex-wrap:wrap; align-items:end}
.tambah-baris .lnk{flex:1; min-width:180px}
.kosong{color:var(--redup); font-size:13px; padding:14px 8px}

/* ---------- Halaman masuk ---------- */
.masuk{max-width:380px; margin:9vh auto 0; padding:0 20px}
.masuk .kotak{background:var(--panel); border:1px solid var(--garis); border-radius:16px; padding:26px}
.masuk h1{font-size:18px; letter-spacing:.16em; text-align:center; margin:0 0 4px}
.masuk p.sub{text-align:center; color:var(--redup); font-size:12.5px; margin:0 0 20px}
.masuk .baris{margin:0 0 14px}
.mini{font-size:11px; color:var(--redup); margin-top:6px}

/* ---------- Halaman riwayat ---------- */
.riwayat{max-width:900px; margin:0 auto; padding:clamp(16px,4vw,30px) clamp(14px,4vw,26px) 70px}
.riwayat td{font-size:12.5px}
.riwayat .detail{color:var(--redup); font-size:11.5px}