/* Gaya tampilan aplikasi: token warna, panel samping, kepala halaman, kartu, ubin angka, tombol, keping, jendela, dan
   layar masuk. Aturannya seragam dengan aplikasi lain dalam keluarga produk yang sama (acuannya dicatat di README).
   Warna merek ada di kelompok pertama :root dan diganti per pemasangan lewat /merek.css (server/merek/<nama>/merek.css).
   Tanpa gaya inline (CSP style-src 'self'); huruf sistem saja, tanpa unduhan huruf. */
:root {
  /* ---- Warna merek. Merek lain (server/merek/<nama>/merek.css) cukup mengganti token di kelompok ini. ---- */
  --biru: #0057E0;       /* warna utama: tombol, tautan, keadaan terpilih */
  --biru-rgb: 0, 87, 224;
  --biru-tua: #0A2A8C;   /* penekanan: angka besar, judul nilai */
  --biru-tua-rgb: 10, 42, 140;
  --biru-terang: #0A6CF5;
  --biru-tengah: #0A4BCB;
  --biru-cincin: #0B48C6;
  --navy: #0A1633;
  --aksen: #0089FD;
  --aksen-rgb: 0, 137, 253;
  --kilau: #1FD0FF;
  --kilau-rgb: 31, 208, 255;
  --kilau-muda: #7CF0FF;
  --biru-muda: #EAF2FF;
  --biru-muda-2: #DCE9FF;
  --teks-samping: #DCE8FF;
  --hangat-1: #FED607;
  --hangat-1-rgb: 254, 214, 7;
  --hangat-2: #FE8A01;
  --hangat-2-rgb: 254, 138, 1;
  --hangat-3: #FB1D09;
  --hangat-4: #EA0268;
  --hangat-4-rgb: 234, 2, 104;
  --hangat-5-rgb: 90, 2, 96;
  /* ---- Warna umum (sama untuk semua merek). ---- */
  --merah: #C1121F;      /* BAHAYA saja */
  --hijau: #15803D;
  --kanvas: #F3F6FB;
  --kertas: #FFFFFF;
  --tinta: var(--navy);
  --redup: #5B6B84;
  --garis: #DFE6F1;
  --garis-halus: #EDF1F7;
  --biru-sorot: #F3F8FF;
  --merah-muda: #FDECEE;
  --hijau-muda: #E6F4EA;
  --kuning: #8A5A00;
  --kuning-muda: #FFF4DA;
  --pita-biru: linear-gradient(135deg, var(--kilau) 0%, var(--aksen) 28%, var(--biru) 62%, var(--biru-tua) 100%);
  --pita-hangat: linear-gradient(90deg, var(--hangat-1) 0%, var(--hangat-2) 34%, var(--hangat-3) 67%, var(--hangat-4) 100%);
  --isi-utama: linear-gradient(135deg, var(--aksen) 0%, var(--biru) 48%, var(--biru-tua) 100%);
  --bayang: 0 1px 2px rgba(10, 22, 51, .05), 0 4px 16px rgba(var(--biru-tua-rgb), .07);
  --bayang-angkat: 0 2px 4px rgba(10, 22, 51, .06), 0 12px 28px rgba(var(--biru-tua-rgb), .15);
  --cincin: 0 0 0 3px rgba(var(--biru-rgb), .16);
  --tinggi-kepala: 71px;   /* kepala halaman & kotak logo panel samping: satu pita putih */
  --sudut: 16px;
  --huruf: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--kanvas); color: var(--tinta); font: 400 14px/1.5 var(--huruf);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
a { color: var(--biru); }
:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }
::placeholder { color: #95A3B8; opacity: 1; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: .92em; }
.redup { color: var(--redup); }
.kecil { font-size: 12.5px; }
.angka, #atas-jam { font-variant-numeric: tabular-nums; }

/* ---------- kerangka: panel samping + (kepala halaman, isi) ---------- */
.kerangka { display: flex; height: 100vh; height: 100dvh; }
/* Panel samping: gradasi pita biru logo, terang di atas lalu mendalam; dua semburat lembut (biru langit, magenta). */
.samping {
  width: 224px; flex-shrink: 0; overflow-y: auto;
  background:
    radial-gradient(380px 240px at 118% -6%, rgba(var(--kilau-rgb), .34), rgba(var(--kilau-rgb), 0) 64%),
    radial-gradient(300px 260px at -35% 104%, rgba(var(--hangat-4-rgb), .20), rgba(var(--hangat-4-rgb), 0) 66%),
    linear-gradient(180deg, var(--biru) 0%, var(--biru-tengah) 42%, var(--biru-tua) 100%);
  color: var(--teks-samping); display: flex; flex-direction: column; padding: 0 10px 12px;
}
/* Kotak logo putih setinggi & sejajar kepala halaman (satu pita putih), pita hangat tipis di kakinya. */
.samping-merek {
  position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 9px;
  background: var(--kertas); height: var(--tinggi-kepala); margin: 0 -10px 14px; padding: 0 15px;
  border-bottom: 1px solid var(--garis);
}
.samping-merek::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--pita-hangat); }
.samping-lambang { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.samping-teks { min-width: 0; }
.samping-nama { width: 106px; height: auto; display: block; }
/* Jenis produk di bawah tulisan logo, selebar tulisan, diapit garis seperti logo. */
.samping-produk {
  display: flex; align-items: center; gap: 5px; width: 106px; margin-top: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .2em; line-height: 1; white-space: nowrap; color: var(--biru);
}
.samping-produk::before, .samping-produk::after { content: ""; flex: 1; height: 1.5px; border-radius: 2px; }
.samping-produk::before { background: linear-gradient(90deg, rgba(var(--aksen-rgb), 0), var(--aksen)); }
.samping-produk::after { background: linear-gradient(90deg, var(--hangat-2), rgba(var(--hangat-2-rgb), 0)); margin-left: -.2em; }
.pilih-lokasi {
  width: 100%; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px;
  background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; font-size: 13px;
}
.pilih-lokasi option { color: var(--tinta); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-grup { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 12px 12px 4px; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: var(--teks-samping); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s;
}
.nav a:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.nav a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* Menu terpilih: keping putih, pita hangat tipis di tepi kiri (gema pita jingga–magenta pada lambang). */
.nav a[aria-current="page"] { background: var(--kertas); color: var(--biru); font-weight: 700; box-shadow: 0 3px 12px rgba(2, 16, 60, .24); }
.nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3.5px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--hangat-1), var(--hangat-2) 45%, var(--hangat-4));
}
.nav svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.samping-bawah { margin-top: auto; padding-top: 12px; }
.sesi { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); }
.sesi-avatar {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hangat-2), var(--hangat-4)); color: #fff; font-weight: 800; font-size: 13px;
  text-shadow: 0 1px 1px rgba(var(--hangat-5-rgb), .35); box-shadow: 0 2px 6px rgba(var(--hangat-4-rgb), .3);
}
.sesi-teks { flex: 1; min-width: 0; }
.sesi-nama { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sesi-peran { font-size: 10.5px; color: rgba(255, 255, 255, .72); text-transform: capitalize; }
.sesi-keluar { border: 0; background: none; color: var(--teks-samping); padding: 4px; border-radius: 6px; cursor: pointer; }
.sesi-keluar:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sesi-keluar svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.samping-versi { padding: 8px 13px 2px; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .62); }

.utama { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.atas-bar {
  display: flex; align-items: center; gap: 16px; flex-shrink: 0; padding: 14px 22px; min-height: var(--tinggi-kepala);
  background: var(--kertas); border-bottom: 1px solid var(--garis);
}
.atas-kiri { flex: 1; min-width: 0; }
#atas-judul { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
#atas-usaha { font-size: 12px; color: var(--redup); margin-top: 1px; }
#atas-jam { font-size: 12.5px; font-weight: 700; color: var(--biru-tua); background: var(--biru-muda); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.isi-halaman { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 40px; }
.aksi-halaman { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin: 0 0 14px; }
.tombol-menu {
  display: none; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--biru-muda); color: var(--biru); align-items: center; justify-content: center;
}
.tombol-menu svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.tirai-samping { display: none; }
/* Laci: sempit ATAU pendek (HP lanskap). */
@media (max-width: 900px), (max-height: 520px) {
  :root { --tinggi-kepala: 58px; }
  .samping { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(84vw, 300px); transform: translateX(-100%); transition: transform .22s ease; }
  .samping.buka { transform: none; box-shadow: 0 0 40px rgba(10, 22, 51, .45); }
  .tirai-samping { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(10, 22, 51, .45); }
  .nav a { padding: 12px 13px; font-size: 14px; }
  .tombol-menu { display: inline-flex; }
  .atas-bar { padding: 9px 14px; gap: 12px; }
  #atas-judul { font-size: 17px; }
  #atas-usaha { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #atas-jam { font-size: 11px; line-height: 1.35; background: none; padding: 0; white-space: normal; text-align: right; max-width: 42vw; }
  .isi-halaman { padding: 12px 14px 32px; }
}

/* ---------- kartu ---------- */
.kartu { background: var(--kertas); border: 1px solid rgba(223, 230, 241, .9); border-radius: var(--sudut); padding: 18px 20px; box-shadow: var(--bayang); min-width: 0; }
/* Judul kartu: batang kecil bergradasi pita biru, garis pemisah selebar kartu. */
.kartu > h2:first-child, .kepala-kartu h2 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -.005em; margin: 0 0 12px; }
.kartu > h2:first-child { margin: -18px -20px 14px; padding: 15px 20px; border-bottom: 1px solid var(--garis); }
.kartu > h2:first-child::before, .kepala-kartu h2::before {
  content: ""; width: 4px; height: 16px; border-radius: 3px; flex-shrink: 0; background: linear-gradient(180deg, var(--kilau), var(--biru) 70%);
}
.kisi { display: grid; gap: 18px; }
.kisi-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* ---------- ubin angka: kartu berwarna bergradasi ---------- */
.ubin { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ubin > .kartu {
  position: relative; overflow: hidden; isolation: isolate; border: 0; border-radius: 16px; padding: 16px 18px 18px;
  color: #fff; box-shadow: 0 6px 18px rgba(var(--biru-tua-rgb), .15); background: linear-gradient(135deg, var(--aksen), var(--biru) 55%, var(--biru-tua));
}
.ubin > .kartu:nth-child(8n+2) { background: linear-gradient(135deg, #0896E0, #0B3FB0); }
.ubin > .kartu:nth-child(8n+3) { background: linear-gradient(135deg, #8E1A93, #5A0260); }
.ubin > .kartu:nth-child(8n+4) { background: linear-gradient(135deg, var(--biru-tua), var(--navy)); }
.ubin > .kartu:nth-child(8n+5) { background: linear-gradient(135deg, #F07800, #E24A0C); }
.ubin > .kartu:nth-child(8n+6) { background: linear-gradient(135deg, var(--hangat-4), #B0036F); }
.ubin > .kartu:nth-child(8n+7) { background: linear-gradient(135deg, #1D63F0, var(--biru-tua)); }
.ubin > .kartu:nth-child(8n+8) { background: linear-gradient(135deg, #C98A00, #B8600A); }
.ubin > .kartu.peringatan { background: linear-gradient(135deg, #C1121F, #8F0D17); }
.ubin > .kartu::before {
  content: ""; position: absolute; z-index: -1; right: -48px; top: -70px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 68%);
}
.ubin > .kartu::after {
  content: ""; position: absolute; z-index: -1; left: -15%; right: -30%; bottom: -78px; height: 96px; border-radius: 50%;
  border-top: 2px solid rgba(255, 255, 255, .2); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%);
}
.ubin .label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; opacity: .92; text-shadow: 0 1px 2px rgba(10, 22, 51, .22); }
.ubin .angka { font-size: 24px; font-weight: 800; margin-top: 6px; letter-spacing: -.01em; line-height: 1.2; text-shadow: 0 1px 2px rgba(10, 22, 51, .2); }
.ubin .ket { font-size: 12px; margin-top: 3px; opacity: .88; }

/* ---------- tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px;
  padding: 9px 18px; min-height: 40px; font-weight: 700; font-size: 13px; white-space: nowrap; text-decoration: none; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, var(--biru-terang), var(--biru));
  box-shadow: 0 2px 6px rgba(var(--biru-rgb), .24), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: box-shadow .15s, transform .1s, background-color .15s;
}
.tombol:hover { background: linear-gradient(135deg, var(--biru), var(--biru-tua)); box-shadow: 0 4px 12px rgba(var(--biru-rgb), .3); }
.tombol:active { transform: scale(.98); }
.tombol:disabled { opacity: .5; cursor: default; box-shadow: none; transform: none; }
.tombol.garis { background: #fff; color: var(--biru); border: 1.5px solid var(--biru); box-shadow: none; padding: 7.5px 16px; }
.tombol.garis:hover { background: var(--biru-muda); }
.tombol.bahaya { background: linear-gradient(135deg, #D3182A, #C1121F); box-shadow: 0 2px 6px rgba(193, 18, 31, .25); }
.tombol.bahaya:hover { background: linear-gradient(135deg, #C1121F, #8F0D17); }
.tombol.kecil { min-height: 32px; padding: 6px 12px; font-size: 12.5px; }
.tombol.garis.kecil { padding: 4.5px 11px; }
.tombol.lebar { width: 100%; }
/* Tombol utama besar: isi pita biru + pita hangat tipis di kakinya. */
.tombol-besar {
  position: relative; overflow: hidden; width: 100%; padding: 15px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--isi-utama); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .14em;
  box-shadow: 0 6px 18px rgba(var(--biru-rgb), .32), inset 0 1px 0 rgba(255, 255, 255, .2); transition: transform .12s, filter .15s;
}
.tombol-besar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pita-hangat); }
.tombol-besar:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.tombol-besar:disabled { background: #E1E8F3; color: #8C9BB3; cursor: default; box-shadow: none; }
.tombol-besar:disabled::after { display: none; }

/* ---------- isian ---------- */
.isian { display: grid; gap: 5px; margin-bottom: 13px; min-width: 0; }
.isian > span { font-size: 12.5px; font-weight: 600; color: var(--redup); }
.isian input, .isian select, .isian textarea {
  width: 100%; min-width: 0; border: 1.5px solid var(--garis); background: #fff; border-radius: 10px; padding: 10px 12px; min-height: 42px;
  outline: none; font-size: 14px; color: var(--tinta); transition: border-color .15s, box-shadow .15s;
}
.isian input:hover:not(:focus), .isian select:hover:not(:focus), .isian textarea:hover:not(:focus) { border-color: #C9D7EB; }
.isian input:focus, .isian select:focus, .isian textarea:focus { border-color: var(--biru); box-shadow: var(--cincin); }
.isian .bantu { font-size: 12px; color: var(--redup); }
.baris-isian { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.centang { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 13.5px; margin-bottom: 12px; }
.centang input { width: 16px; height: 16px; accent-color: var(--biru); }

/* ---------- lencana status ---------- */
.lencana { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.l-aktif, .l-berhasil, .l-lunas, .l-online { background: var(--hijau-muda); color: var(--hijau); }
.l-menunggu, .l-antri, .l-terkirim, .l-belum { background: var(--kuning-muda); color: var(--kuning); }
.l-gagal, .l-isolir, .l-habis, .l-dicabut { background: var(--merah-muda); color: var(--merah); }
.l-nonaktif, .l-dihapus, .l-berhenti, .l-offline, .l-batal { background: #EEF1F6; color: var(--redup); }

/* ---------- tabel (rata tepi kartu, kepala berlatar) -> kartu di layar sempit ---------- */
.tabel-bungkus { overflow-x: auto; }
.kartu > .tabel-bungkus { margin: 0 -20px; }
.kartu > .tabel-bungkus:last-child { margin-bottom: -18px; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; padding: 11px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--redup); background: #F6F9FD; border-bottom: 1px solid var(--garis); white-space: nowrap;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--garis-halus); vertical-align: middle; }
table.data th:first-child, table.data td:first-child { padding-left: 20px; }
table.data th:last-child, table.data td:last-child { padding-right: 20px; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--biru-sorot); }
table.data td.angka, table.data th.angka { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .kartu > .tabel-bungkus, .kartu > .tabel-bungkus:last-child { margin: 0; }
  table.data:not(.rapat) thead { display: none; }
  table.data:not(.rapat), table.data:not(.rapat) tbody, table.data:not(.rapat) tr, table.data:not(.rapat) td { display: block; width: 100%; }
  table.data:not(.rapat) tr { border: 1px solid var(--garis); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
  table.data:not(.rapat) td, table.data:not(.rapat) td:first-child, table.data:not(.rapat) td:last-child { border: 0; padding: 4px 0; display: flex; gap: 10px; justify-content: space-between; }
  table.data:not(.rapat) td::before { content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--redup); }
  table.data:not(.rapat) td.angka { text-align: left; }
  table.data:not(.rapat) tbody tr:hover td { background: none; }
  /* Tabel rapat di HP: tetap tabel, huruf & jarak dikecilkan. */
  table.data.rapat { font-size: 12px; }
  table.data.rapat th, table.data.rapat td { padding: 8px 4px; }
  table.data.rapat th { font-size: 10px; }
  table.data.rapat th:first-child, table.data.rapat td:first-child { padding-left: 2px; }
  table.data.rapat th:last-child, table.data.rapat td:last-child { padding-right: 2px; }
  table.data.rapat .bukan-hp { display: none; }
  table.data.rapat td:first-child, table.data.rapat td.angka { white-space: nowrap; }
}

/* ---------- kisi unit (kamar/villa) ---------- */
.unit-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.unit {
  border: 1px solid rgba(223, 230, 241, .9); background: #fff; border-radius: 14px; padding: 13px 14px; text-align: left; cursor: pointer;
  display: grid; gap: 4px; min-height: 96px; box-shadow: var(--bayang); transition: transform .12s, box-shadow .15s, border-color .15s;
}
.unit:hover { transform: translateY(-1px); box-shadow: var(--bayang-angkat); border-color: #A9C6F7; }
.unit .nama { font-weight: 800; }
.unit .isi { font-size: 12.5px; color: var(--redup); }
.unit.terisi { border-color: #9DBBF0; background: linear-gradient(135deg, #F1F6FE, var(--biru-muda)); }
.unit.penuh { border-color: #E7A1A8; }

/* ---------- jendela & kabar ---------- */
.latar { position: fixed; inset: 0; background: rgba(10, 22, 51, .5); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; z-index: 70; }
/* Pita biru tipis di tepi atas tiap jendela (lapisan latar: tetap di atas walau isi digulir). */
.jendela {
  background: linear-gradient(90deg, var(--kilau), var(--aksen) 30%, var(--biru) 70%, var(--biru-tua)) top / 100% 4px no-repeat, var(--kertas);
  border-radius: 20px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 20px 20px;
  box-shadow: 0 24px 64px rgba(10, 22, 51, .32), 0 2px 8px rgba(10, 22, 51, .08); animation: jendela-masuk .18s ease;
}
@keyframes jendela-masuk { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.jendela h2 { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.jendela .kaki { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.kabar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); }
.kabar div { background: var(--navy); color: #fff; border-radius: 12px; padding: 11px 14px; font-weight: 600; box-shadow: var(--bayang-angkat); }
.kabar div.salah { background: var(--merah); }
.pesan-salah { background: var(--merah-muda); color: var(--merah); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-weight: 600; font-size: 13.5px; }
.kosong { text-align: center; padding: 30px 16px; color: var(--redup); font-size: 13px; }
.alat { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.alat input[type="search"] {
  flex: 1 1 220px; border: 1.5px solid var(--garis); border-radius: 12px; padding: 10px 14px; min-height: 44px; background: #fff;
  outline: none; box-shadow: var(--bayang); transition: border-color .15s, box-shadow .15s;
}
.alat input[type="search"]:focus { border-color: var(--biru); box-shadow: var(--cincin); }

/* ---------- layar masuk ---------- */
.masuk-latar {
  min-height: 100vh; min-height: 100dvh; display: flex; padding: 16px; overflow-x: hidden;
  background:
    radial-gradient(900px 560px at 92% -12%, rgba(var(--kilau-rgb), .42), rgba(var(--kilau-rgb), 0) 62%),
    radial-gradient(760px 540px at -10% 112%, rgba(var(--hangat-4-rgb), .34), rgba(var(--hangat-4-rgb), 0) 62%),
    radial-gradient(520px 380px at 22% 108%, rgba(var(--hangat-2-rgb), .26), rgba(var(--hangat-2-rgb), 0) 64%),
    linear-gradient(155deg, var(--biru) 0%, var(--biru-tua) 50%, var(--navy) 100%);
}
.masuk-latar::before, .masuk-latar::after {
  content: ""; position: fixed; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%, transparent); mask-image: linear-gradient(180deg, transparent, #000 50%, transparent);
}
.masuk-latar::before {
  width: 160vmax; height: 26vmax; left: -35vmax; top: -2vh; transform: rotate(-16deg);
  background: linear-gradient(90deg, rgba(var(--kilau-rgb), 0), rgba(var(--kilau-rgb), .3) 40%, rgba(var(--aksen-rgb), .2) 70%, rgba(var(--aksen-rgb), 0));
}
.masuk-latar::after {
  width: 160vmax; height: 20vmax; left: -45vmax; bottom: -2vh; transform: rotate(-16deg); mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(var(--hangat-1-rgb), 0), rgba(var(--hangat-2-rgb), .3) 32%, rgba(var(--hangat-4-rgb), .32) 66%, rgba(var(--hangat-5-rgb), 0));
}
.masuk-kartu {
  position: relative; z-index: 1; overflow: hidden; margin: auto; flex-shrink: 0; background: var(--kertas); border-radius: 22px;
  padding: 36px 32px 26px; width: 380px; max-width: 100%;
  box-shadow: 0 30px 80px rgba(3, 10, 40, .45), 0 2px 6px rgba(3, 10, 40, .15);
}
.masuk-kartu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--kilau), var(--biru) 42%, var(--hangat-2) 72%, var(--hangat-4)); }
.masuk-merek { text-align: center; }
.masuk-lambang { width: 64px; height: 64px; display: block; margin: 0 auto 12px; }
.masuk-nama { width: 140px; height: auto; display: block; margin: 2px auto 7px; }
.masuk-produk { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .2em; color: var(--biru); white-space: nowrap; }
.masuk-produk::before, .masuk-produk::after { content: ""; width: 30px; height: 2px; border-radius: 2px; }
.masuk-produk::before { background: linear-gradient(90deg, rgba(var(--aksen-rgb), 0), var(--aksen)); }
.masuk-produk::after { background: linear-gradient(90deg, var(--hangat-2), rgba(var(--hangat-2-rgb), 0)); margin-left: -.2em; }
.masuk-kartu h1 { font-size: 17px; font-weight: 700; text-align: center; margin: 18px 0 2px; }
.masuk-kartu > p { text-align: center; color: var(--redup); font-size: 12.5px; margin: 0 0 16px; }
.masuk-kartu .isian input { background: #F8FAFE; }
.masuk-kartu .isian input:focus { background: #fff; }
.masuk-kartu .tombol-besar { margin-top: 6px; }
.qr-kotak { display: grid; place-items: center; margin: 8px 0 14px; }
.qr-kotak img { width: 200px; height: 200px; image-rendering: pixelated; }
.kode-rahasia { font-family: var(--mono); background: var(--kanvas); border-radius: 10px; padding: 8px 10px; word-break: break-all; font-size: 13px; margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- komponen halaman hotspot ---------- */
.jarak-atas { margin-top: 14px; }
.jarak-bawah { margin-bottom: 18px; }
.jarak-kiri { margin-left: 6px; }
.judul-bagian { font-size: 15px; font-weight: 800; margin: 0 0 10px; }
.kepala-kartu { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.kepala-kartu h2 { margin: 0; }
.kepala-kartu .menu-aksi { margin-left: auto; }
.baris-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; font-size: 14px; }
.baris-info .label { display: block; font-size: 12px; font-weight: 700; color: var(--redup); }
.wan { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wan-item { background: var(--hijau-muda); color: var(--hijau); border-radius: 8px; padding: 6px 10px; font-size: 13px; display: grid; }
.wan-item.mati { background: var(--merah-muda); color: var(--merah); }
.titik { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.titik.hijau { background: var(--hijau); }
.titik.merah { background: var(--merah); }
.status-salinan { margin: -8px 0 12px; }
.menu-aksi { border: 1px solid #CFDDF3; border-radius: 8px; padding: 6px 10px; background: #fff; font-size: 12.5px; font-weight: 650; color: var(--biru); cursor: pointer; max-width: 150px; }
.menu-aksi:hover { border-color: var(--biru); }
/* Keping pilihan: terpilih = isi pita biru. */
.tab { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab button { padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #fff; color: var(--redup); border: 1.5px solid var(--garis); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.tab button:hover { border-color: #A9C6F7; color: var(--biru); background: var(--biru-sorot); }
.tab button[aria-pressed="true"] { background: var(--isi-utama); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(var(--biru-rgb), .26); }
.halaman { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 12px; flex-wrap: wrap; font-size: 14px; }
.baris-pasang { width: 100%; font-family: var(--mono); font-size: 12.5px; border: 1.5px solid var(--garis); border-radius: 9px; padding: 10px; background: var(--kanvas); resize: vertical; }
.jadwal { display: grid; gap: 8px; margin-bottom: 8px; }
.jadwal-baris { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border: 1px solid var(--garis); border-radius: 9px; padding: 8px; }
.jadwal-baris input[type="time"] { border: 1.5px solid var(--garis); border-radius: 8px; padding: 6px; }
.jadwal-baris .hari { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.jadwal-baris .hari label { display: flex; gap: 3px; align-items: center; }
.pilih-cetak { display: grid; gap: 8px; }
.pilih-cetak .opsi { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--garis); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.pilih-cetak .opsi:has(input:checked) { border-color: var(--biru); background: var(--biru-muda); }
.pilih-cetak .opsi span { display: grid; }
.pilih-cetak .opsi small { color: var(--redup); }
.daftar-v { display: grid; gap: 8px; margin-bottom: 14px; }
.baris-v { display: flex; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid var(--garis); border-radius: 9px; padding: 8px 10px; }
.jendela h3 { font-size: 15px; margin: 8px 0 10px; }
.legenda { display: flex; gap: 14px; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.lg-unduh::before, .lg-unggah::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.lg-unduh::before { background: var(--biru); }
.lg-unggah::before { background: #E08A00; }
.grafik { width: 100%; height: auto; display: block; }
.grafik-kisi { stroke: var(--garis); stroke-width: 1; }
.grafik-unduh { fill: none; stroke: var(--biru); stroke-width: 2; stroke-linejoin: round; }
.grafik-unggah { fill: none; stroke: #E08A00; stroke-width: 2; stroke-linejoin: round; }
.grafik-label, .grafik-kosong { font-size: 12px; fill: var(--redup); }
.batang { display: grid; gap: 4px; }
.batang-baris { display: grid; grid-template-columns: 44px 1fr 110px; gap: 8px; align-items: center; }
.batang-baris meter { width: 100%; height: 12px; }
.batang-baris .angka { text-align: right; font-variant-numeric: tabular-nums; }
.alat input[type="date"] { border: 1.5px solid var(--garis); border-radius: 9px; padding: 7px 10px; min-height: 40px; }
.tab-batch { background: var(--kuning-muda) !important; }

/* ---------- cetak ---------- */
#area-cetak { display: none; }
@media print {
  html.mode-cetak body > *:not(#area-cetak) { display: none !important; }
  html.mode-cetak body { background: #fff; }
  html.mode-cetak #area-cetak { display: block; color: #000; font-family: var(--huruf); }
  html:not(.mode-cetak) body::before { content: "Gunakan tombol Cetak di aplikasi."; }
  html:not(.mode-cetak) body > * { display: none !important; }
}
@page { size: A4; margin: 10mm; }
/* Warna aksen dipasang JS lewat CSSOM (--aksen). print-color-adjust: warna & latar tetap tercetak walau
   "Background graphics" di dialog cetak tidak dicentang. */
#area-cetak { --aksen: var(--biru); --aksen-muda: color-mix(in srgb, var(--aksen) 11%, #fff); --tinta-cetak: var(--navy); --redup-cetak: #5A6B7D; }
#area-cetak, #area-cetak * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-sizing: border-box; }

/* ---- kartu tamu: 2 × 5 = 10 per A4 (maks 93 × 50 mm), garis potong putus-putus di sekeliling ----
   Kolom LENTUR (minmax 0..93 mm): kalau area cetak lebih sempit dari 190 mm (iPhone memakai margin sendiri ±15-18 mm),
   kartu menyusut. Dulu lebar tetap + rata tengah → kelebihannya meluber ke kiri dan sisi kiri kartu terpotong. */
.kt-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 93mm)); grid-auto-rows: 50mm; gap: 3mm; justify-content: center; width: 100%; }
.kt { border: .3mm solid #cfd6e0; border-radius: 3mm; overflow: hidden; display: flex; flex-direction: column; break-inside: avoid;
  font-size: 8pt; line-height: 1.25; color: var(--tinta-cetak); outline: .2mm dashed #b5b5b5; outline-offset: 1.4mm; }
.kt-kepala { background: var(--aksen); color: #fff; display: flex; align-items: center; gap: 2.5mm; padding: 2mm 3mm; min-height: 12.5mm; }
.kt-logo { background: #fff; border-radius: 1.6mm; padding: .8mm 1.3mm; display: flex; align-items: center; flex: none; }
.kt-logo img { display: block; max-height: 8mm; max-width: 24mm; }
.kt-judul { flex: 1; min-width: 0; }
.kt-judul b { display: block; font-size: 10.5pt; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-judul small, .kt-unit small { display: block; font-size: 7pt; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-unit { flex: none; max-width: 34mm; text-align: right; }
.kt-unit b { display: block; font-size: 10.5pt; font-weight: 800; }
.kt-isi { flex: 1; display: flex; gap: 3mm; align-items: center; padding: 2.2mm 3mm 1mm; min-height: 0; }
.kt-akun { flex: 1; min-width: 0; display: grid; gap: 1.3mm; container-type: inline-size; }
.kt-baris { display: flex; align-items: baseline; gap: 2mm; background: var(--aksen-muda); border-radius: 1.6mm; padding: 1.1mm 2.2mm; }
.kt-baris span { flex: none; width: 12.5mm; font-size: 6pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--redup-cetak); }
.kt-baris b { font-family: var(--mono); font-size: min(12.5pt, calc((100cqi - 18.9mm) / (var(--n, 16) * .61))); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-masa { font-size: 8pt; font-weight: 800; padding-left: .5mm; }
/* Kartu berkode pintu: tiga baris kode harus muat di kartu 50 mm (diukur juga dengan huruf lebar seperti cetak iPhone). */
.kt.ada-pintu .kt-isi { padding-top: 1.4mm; }
.kt.ada-pintu .kt-akun { gap: .7mm; }
.kt.ada-pintu .kt-baris { padding: .55mm 2.2mm; }
.kt.ada-pintu .kt-baris span { letter-spacing: .02em; font-size: 5.6pt; white-space: nowrap; }
.kt.ada-pintu .kt-baris b { font-size: min(11pt, calc((100cqi - 18.9mm) / (var(--n, 16) * .61))); }
.kt-masa small, .kv-masa small { display: block; font-weight: 500; color: var(--redup-cetak); }
.kt-masa small { font-size: 6.6pt; }
.kt-qr { flex: none; text-align: center; }
.kt-qr img { display: block; width: 22mm; height: 22mm; image-rendering: pixelated; }
.kt-qr small { font-size: 5.8pt; color: var(--redup-cetak); }
.kt-kaki { padding: 0 3mm 1.8mm; font-size: 6.4pt; color: var(--redup-cetak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- kartu voucher massal: 4 × 5 = 20 per A4 (maks 45,5 × 53 mm; 5 baris = 275 mm), kolom lentur seperti kartu tamu ---- */
.kv-kisi { display: grid; grid-template-columns: repeat(4, minmax(0, 45.5mm)); grid-auto-rows: 53mm; gap: 2.5mm 3mm; justify-content: center; width: 100%; }
.kv { border: .3mm solid #cfd6e0; border-radius: 2.5mm; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  break-inside: avoid; font-size: 7pt; line-height: 1.2; color: var(--tinta-cetak); outline: .2mm dashed #b5b5b5; outline-offset: 1.1mm; }
.kv-kepala { width: 100%; background: var(--aksen); color: #fff; display: flex; align-items: center; justify-content: center; gap: 1.5mm; padding: 1.4mm 2mm; min-height: 8.5mm; }
/* Judul boleh 2 baris (logo memakan tempat di kartu sempit), tidak dipotong di tengah nama usaha. */
.kv-kepala b { font-size: 7.6pt; font-weight: 800; line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.kv-logo { background: #fff; border-radius: 1mm; padding: .5mm .8mm; display: flex; flex: none; }
.kv-logo img { display: block; max-height: 5mm; max-width: 14mm; }
.kv-paket { display: flex; gap: 1.5mm; align-items: baseline; justify-content: center; margin-top: 1.1mm; padding: 0 1.5mm; font-size: 7pt; }
.kv-paket span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv-paket b { color: var(--aksen); white-space: nowrap; }
.kv-kode { width: calc(100% - 4mm); margin-top: 1mm; display: grid; container-type: inline-size; border: .3mm dashed var(--aksen); background: var(--aksen-muda); border-radius: 1.6mm; padding: .7mm 1mm; }
.kv-kode small { font-size: 5.4pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--redup-cetak); }
.kv-kode b { font-family: var(--mono); font-size: min(12pt, calc((100cqi - 2.6mm) / (var(--n, 16) * .62))); font-weight: 800; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv-kode b + b { font-size: min(10pt, calc((100cqi - 2.6mm) / (var(--n, 16) * .62))); }
.kv > * { flex-shrink: 0; }  /* tidak ada baris yang terjepit (dulu baris Wi-Fi tinggal setengah) */
.kv-qr { display: block; width: 16mm; height: 16mm; margin-top: 1mm; image-rendering: pixelated; }
.kv-kode:has(b + b) + .kv-qr { width: 14mm; height: 14mm; }
.kv-masa { margin-top: .8mm; padding: 0 1.5mm; font-size: 6.8pt; font-weight: 800; }
.kv-masa small { font-size: 5.8pt; }
/* Kartu kecil berkode pintu: QR dikecilkan supaya baris kode pintu & Wi-Fi tetap muat di kartu 53 mm. */
.kv.ada-pintu .kv-qr { width: 12.5mm; height: 12.5mm; }
.kv.ada-pintu .kv-kode:has(b + b) + .kv-qr { width: 11mm; height: 11mm; }
.kv-pintu { margin-top: .5mm; padding: 0 1.5mm; font-size: 6.4pt; color: var(--redup-cetak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kv-pintu b { font-family: var(--mono); font-weight: 800; color: var(--tinta-cetak); }
.kv-wifi { margin-top: auto; padding: 0 1.5mm 1.2mm; font-size: 5.8pt; color: var(--redup-cetak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---- gaya hemat tinta: tanpa blok warna, hanya garis & teks aksen ---- */
.gaya-hemat .kt-kepala, .gaya-hemat .kv-kepala { background: #fff; color: var(--tinta-cetak); border-bottom: .45mm solid var(--aksen); }
.gaya-hemat .kt-judul b, .gaya-hemat .kv-kepala b { color: var(--aksen); }
.gaya-hemat .kt-logo, .gaya-hemat .kv-logo { background: none; padding: 0; }
.gaya-hemat .kt-baris, .gaya-hemat .kv-kode { background: #fff; }
.gaya-hemat .kt-baris { border: .25mm solid #cfd6e0; }

/* ---- thermal 58 mm lewat dialog cetak ---- */
html.cetak-58mm .cetak-58 { width: 48mm; margin: 0 auto 6mm; text-align: center; font-size: 9pt; break-after: page; color: #000; }
.c58-logo { display: block; max-width: 32mm; max-height: 14mm; margin: 0 auto 1mm; filter: grayscale(1); }
.c58-judul { font-weight: 800; font-size: 11pt; }
.c58-kode { font-family: var(--mono); font-size: 12pt; font-weight: 800; }
.c58-garis { border-top: 1px dashed #000; margin: 1.5mm 0; }
.c58-kecil { font-size: 7.5pt; }
.c58-qr { width: 34mm; height: 34mm; image-rendering: pixelated; }
/* Halaman bernama: kertas 58 mm hanya untuk struk thermal lewat dialog cetak. */
.cetak-58 { page: struk58; }
@page struk58 { size: 58mm 170mm; margin: 3mm; }
.merah { color: var(--merah); }
.hijau { color: var(--hijau); }
.pesan-ok { background: var(--hijau-muda); color: var(--hijau); border-radius: 9px; padding: 10px 12px; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
.lebar-penuh { flex: 1 1 220px; border: 1.5px solid var(--garis); border-radius: 9px; padding: 8px 10px; min-width: 0; }
.isian textarea { resize: vertical; }

/* ---------- form panjang: bagian, kolom sejajar, tombol selalu terlihat ---------- */
.isian { align-content: start; }
.jendela.lebar { width: min(760px, 100%); }
.jendela .kaki { position: sticky; bottom: -20px; background: #fff; margin: 16px -20px -20px; padding: 12px 20px; border-top: 1px solid var(--garis); }
.bagian-form { border-top: 1px solid var(--garis); padding-top: 14px; margin-top: 14px; }
.bagian-form:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.bagian-form h3 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--biru); margin: 0 0 10px; }
.bagian-form > .bantu { display: block; margin: -6px 0 4px; }
.kolom-2, .kolom-3 { display: grid; gap: 0 14px; }
.kolom-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kolom-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .kolom-2, .kolom-3 { grid-template-columns: minmax(0, 1fr); } }
.gabung { display: flex; gap: 8px; }
.isian .gabung input { flex: 1 1 auto; min-width: 0; width: 100%; }
.isian .gabung select { flex: 0 0 auto; width: auto; }

/* ---------- pengaturan: logo ---------- */
.logo-baris { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pratinjau-logo { max-height: 56px; max-width: 180px; border: 1px solid var(--garis); border-radius: 8px; padding: 6px; background: #fff; }
.pilih-berkas { font-size: 13.5px; max-width: 100%; }
.isian .pilih-berkas { width: auto; min-height: 0; border: 0; padding: 4px 0; background: none; box-shadow: none; }


/* ---------- kepala kartu dengan tombol ---------- */
.kartu > .kartu-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -18px -20px 16px; padding: 12px 20px; border-bottom: 1px solid var(--garis); }
.kartu > .kartu-kepala h2 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; margin: 0; }
.kartu > .kartu-kepala h2::before { content: ""; width: 4px; height: 16px; border-radius: 3px; flex-shrink: 0; background: linear-gradient(180deg, var(--kilau), var(--biru) 70%); }

/* ---------- hak akses: kartu peran ---------- */
.peran-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.peran-kartu { display: flex; flex-direction: column; gap: 10px; border: 1.5px solid var(--garis); border-radius: 14px; padding: 14px 16px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.peran-kartu:hover { border-color: #C9D7EB; box-shadow: var(--bayang); }
.peran-kartu.pemilik { border-color: #9DBBF0; background: linear-gradient(180deg, #F7FAFF, #fff); }
.peran-atas { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.peran-nama { font-size: 15px; font-weight: 800; color: var(--biru-tua); }
.peran-kode { font-size: 11.5px; color: var(--redup); }
.peran-keping { display: flex; flex-wrap: wrap; gap: 6px; }
.keping-izin { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--biru-muda); color: var(--biru-tua); }
.keping-izin.lagi { background: #EEF1F6; color: var(--redup); }
.keping-izin.penuh { background: var(--isi-utama); color: #fff; }
.peran-kaki { display: flex; justify-content: space-between; margin-top: auto; font-size: 12.5px; color: var(--redup); }
.izin-alat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.izin-alat b { margin-right: auto; font-size: 13.5px; }
.izin-susun { display: flex; flex-direction: column; gap: 12px; }
.izin-grup { border: 1px solid var(--garis); border-radius: 12px; padding: 8px 12px 12px; margin: 0; }
.izin-menu-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.izin-menu { background: #F7FAFF; border: 1px solid #E3EBF7; border-radius: 10px; padding: 8px 10px 2px; }
.izin-menu-nama { font-size: 13px; font-weight: 800; color: var(--biru-tua); margin-bottom: 6px; }
.izin-grup legend { padding: 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--biru); }
.izin-grup .centang { margin-bottom: 6px; font-weight: 600; font-size: 13px; }
.izin-grup .centang:has(input:disabled) { color: #9AA8BC; }

.aksi-baris { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- log router ---------- */
.keping-log { display: flex; flex-wrap: wrap; gap: 4px; }
.keping-topik { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #EEF1F6; color: var(--redup); }
.keping-topik.merah { background: #FDECEC; color: #B42318; }
.keping-topik.kuning { background: #FFF4DE; color: #93570B; }
.pesan-log { white-space: pre-wrap; word-break: break-word; max-width: 720px; }
.arti-log { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--biru-tua); }
.nowrap { white-space: nowrap; }

.isian-sandi { display: flex; gap: 8px; align-items: center; }
.isian-sandi input { flex: 1; min-width: 0; font-family: var(--mono, ui-monospace, monospace); }
.isian input[readonly] { background: var(--kanvas); }
.isian .perintah { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--kanvas); color: var(--tinta); font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; user-select: all; }

/* ---------- dashboard ---------- */
.kisi-dasbor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .kisi-dasbor { grid-template-columns: 1fr; } }
.ubin .angka-pecah { display: flex; gap: 20px; flex-wrap: wrap; }
.ubin .angka-pecah span { display: flex; flex-direction: column; line-height: 1.1; }
.ubin .angka-pecah small { font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .85; margin-bottom: 2px; }

.kartu-router .rt-kepala { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rt-ikon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--biru-muda); color: var(--biru); flex: none; }
.rt-ikon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rt-nama { flex: 1; min-width: 0; }
.rt-nama h2 { margin: 0; font-size: 16px; }
.rt-sub { font-size: 12.5px; color: var(--redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-stat-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rt-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid #E3EBF7; border-radius: 12px; background: #F7FAFF; }
.rt-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.rt-stat b { font-size: 17px; font-weight: 800; color: var(--biru-tua); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-kecil { font-size: 12px; color: var(--redup); }
.rt-meter { height: 6px; margin-top: 4px; border-radius: 99px; background: #E6ECF5; overflow: hidden; }
.rt-meter > i { display: block; height: 100%; width: var(--isi, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--kilau), var(--biru)); }
.rt-meter.sedang > i { background: linear-gradient(90deg, #FFC24A, #F07800); }
.rt-meter.tinggi > i { background: linear-gradient(90deg, #FF6B6B, #C1121F); }
.rt-meter.netral > i { background: linear-gradient(90deg, #7FB2FF, #0B6BFF); opacity: .6; }
.rt-wan { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.rt-wan-baris { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "t n u g" "m m m m"; align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 12px; }
.rt-wan-baris .titik-status { grid-area: t; width: 9px; height: 9px; border-radius: 50%; background: #1DB954; box-shadow: 0 0 0 3px rgba(29, 185, 84, .15); }
.rt-wan-baris.mati .titik-status { background: #C1121F; box-shadow: 0 0 0 3px rgba(193, 18, 31, .15); }
.rt-wan-nama { grid-area: n; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-unduh { grid-area: u; font-size: 13px; font-weight: 700; color: #0B6BFF; white-space: nowrap; }
.rt-unggah { grid-area: g; font-size: 13px; font-weight: 700; color: #C77700; white-space: nowrap; }
.rt-mati { grid-column: 3 / 5; font-size: 13px; font-weight: 700; color: #C1121F; }
.rt-wan-baris .rt-meter { grid-area: m; height: 4px; margin-top: 2px; }

.kartu-trafik .legenda { margin: 0 0 4px; }
.tab.tab-kecil { margin: 0; }
.tab.tab-kecil button { padding: 5px 12px; font-size: 12.5px; }
.trafik-info { min-height: 1.4em; margin-top: 8px; font-size: 12.5px; color: var(--redup); }
.kartu-pemakaian { margin-top: 16px; }
.pemakaian-jumlah { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin: 0 0 12px; font-size: 13px; color: var(--redup); }
.pemakaian-jumlah b { color: var(--teks); }
.pemakaian-catatan { margin: 10px 0 0; }
.grafik-sumbu { font-size: 10.5px; fill: var(--redup); }
.grafik-sumbu.tebal { font-weight: 800; fill: var(--biru-tua); }
.grafik-dasar { stroke: #C9D3E3; stroke-width: 1; }
.grafik-kisi { stroke: var(--garis); stroke-width: 1; stroke-dasharray: 3 4; }
.batang-unduh { fill: #0B6BFF; }
.batang-unggah { fill: #F59E0B; }
.batang.sekarang .batang-unduh, .batang.sekarang .batang-unggah { opacity: .55; }
.batang-sentuh { fill: transparent; cursor: pointer; }
.batang:hover .batang-sentuh, .batang.dipilih .batang-sentuh { fill: rgba(11, 107, 255, .08); }
.area-unduh { fill: url(#gradien-unduh); }
.area-unggah { fill: url(#gradien-unggah); }
.garis-unduh { fill: none; stroke: #0B6BFF; stroke-width: 2; stroke-linejoin: round; }
.garis-unggah { fill: none; stroke: #F59E0B; stroke-width: 2; stroke-linejoin: round; }
.gu-atas { stop-color: #0B6BFF; stop-opacity: .32; }
.gu-bawah { stop-color: #0B6BFF; stop-opacity: 0; }
.gg-atas { stop-color: #F59E0B; stop-opacity: .3; }
.gg-bawah { stop-color: #F59E0B; stop-opacity: 0; }
div.grafik-kosong { padding: 40px 0; text-align: center; font-size: 13px; color: var(--redup); }
.lg-unduh::before { background: #0B6BFF; }
.lg-unggah::before { background: #F59E0B; }
@media (max-width: 560px) { .rt-stat-kisi { grid-template-columns: 1fr 1fr; } .rt-stat b { font-size: 15px; } }

/* ---------- urutan tabel (klik judul kolom) ---------- */
table.data th button.urut { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
table.data th button.urut:hover { color: var(--biru); }
table.data th button.urut:focus-visible { outline: 2px solid var(--biru); outline-offset: 3px; border-radius: 4px; }
.panah-urut { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .25; }
th[aria-sort="ascending"] .panah-urut { border-top: 0; border-bottom: 5px solid var(--biru); opacity: 1; }
th[aria-sort="descending"] .panah-urut { border-top-color: var(--biru); opacity: 1; }
table.data th[aria-sort="ascending"] button.urut, table.data th[aria-sort="descending"] button.urut { color: var(--biru); }
table.data th.angka button.urut { flex-direction: row-reverse; }
.urut-kecil { display: none; }
@media (max-width: 700px) {
  .urut-kecil { display: flex; align-items: center; gap: 8px; padding: 10px 14px 4px; font-size: 12.5px; font-weight: 700; color: var(--redup); }
  .urut-kecil select { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; }
}