:root{
  --bg:#080d16; --bg2:#0d1524; --bg3:#111c2e; --garis:#1e2d44;
  --teks:#e8eefc; --teks2:#93a4c0; --teks3:#64758f;
  --aksen:#22d3ee; --aksen2:#0e7490; --kuning:#fbbf24; --merah:#f43f5e; --hijau:#34d399; --ungu:#a78bfa;
  --bayang:0 10px 40px rgba(0,0,0,.45); --radius:14px;
}
html[data-tema="terang"]{
  --bg:#f4f7fb; --bg2:#ffffff; --bg3:#eef3f9; --garis:#d8e2ee;
  --teks:#0d1a2b; --teks2:#4a5c75; --teks3:#7d8ea6;
  --aksen:#0891b2; --aksen2:#0e7490; --bayang:0 10px 30px rgba(15,40,70,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1100px 600px at 15% -10%,rgba(34,211,238,.10),transparent 60%),
             radial-gradient(900px 500px at 100% 0%,rgba(167,139,250,.08),transparent 55%),var(--bg);
  color:var(--teks);font-family:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:15px;line-height:1.55;min-height:100vh;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--aksen);text-decoration:none;cursor:pointer}
[hidden]{display:none!important}

/* ---------- layar masuk ---------- */
.layar{min-height:100vh;display:grid;place-items:center;padding:22px}
.kotak-masuk{
  width:100%;max-width:430px;background:linear-gradient(170deg,var(--bg2),var(--bg3));
  border:1px solid var(--garis);border-radius:18px;padding:30px 28px;box-shadow:var(--bayang)
}
.merek{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.lambang{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--aksen),var(--aksen2));color:#04121a;font-weight:800;
  box-shadow:0 6px 20px rgba(34,211,238,.35)}
.merek b{display:block;font-size:16px}.merek span{display:block;font-size:11.5px;color:var(--teks3);letter-spacing:.6px;text-transform:uppercase}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--teks3);margin:14px 0 5px;font-weight:700}
.masukan{width:100%;background:var(--bg);border:1px solid var(--garis);border-radius:11px;padding:12px 13px;outline:none;transition:.16s}
.masukan:focus{border-color:var(--aksen);box-shadow:0 0 0 4px rgba(34,211,238,.13)}
textarea.masukan{min-height:90px;resize:vertical;font-family:inherit}
.tombol{background:var(--bg3);border:1px solid var(--garis);border-radius:11px;padding:11px 15px;cursor:pointer;transition:.16s;color:var(--teks2);white-space:nowrap}
.tombol:hover{border-color:var(--aksen);color:var(--teks)}
.tombol.utama{background:linear-gradient(140deg,var(--aksen),var(--aksen2));color:#031218;border:none;font-weight:700}
.tombol.bahaya{border-color:rgba(244,63,94,.4);color:#ff8fa3}
.tombol.bahaya:hover{background:rgba(244,63,94,.14);border-color:var(--merah)}
.tombol.penuh{width:100%;margin-top:20px;padding:13px}
.pesan{margin-top:14px;font-size:13.5px;padding:10px 12px;border-radius:10px;display:none}
.pesan.tampil{display:block}
.pesan.salah{background:rgba(244,63,94,.14);color:#ff9fb0;border:1px solid rgba(244,63,94,.35)}
.pesan.benar{background:rgba(52,211,153,.13);color:#6ee7b7;border:1px solid rgba(52,211,153,.32)}
.catatan-kecil{font-size:12px;color:var(--teks3);margin-top:14px;line-height:1.5}

/* ---------- rangka aplikasi ---------- */
.bungkus{display:grid;grid-template-columns:296px 1fr;min-height:100vh}
.sisi{background:linear-gradient(180deg,var(--bg2),var(--bg));border-right:1px solid var(--garis);
  padding:20px 16px;position:sticky;top:0;height:100vh;overflow-y:auto}
.pemisah{height:1px;background:var(--garis);margin:15px 0}
.judul-kecil{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--teks3);margin:0 0 9px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.judul-kecil button{background:none;border:none;color:var(--aksen);cursor:pointer;font-size:15px;line-height:1;padding:0 3px}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kotak{background:var(--bg3);border:1px solid var(--garis);border-radius:11px;padding:9px 10px}
.kotak b{display:block;font-size:20px;line-height:1.15;color:var(--aksen)}
.kotak span{font-size:10.5px;color:var(--teks3);text-transform:uppercase;letter-spacing:.7px}
.daftar-vertikal{display:flex;flex-direction:column;gap:3px}
.baris-menu{display:flex;justify-content:space-between;align-items:center;gap:8px;background:transparent;
  border:1px solid transparent;border-radius:9px;padding:8px 10px;cursor:pointer;text-align:left;
  color:var(--teks2);transition:.15s;font-size:13.5px;width:100%}
.baris-menu:hover{background:var(--bg3);color:var(--teks)}
.baris-menu.aktif{background:rgba(34,211,238,.13);border-color:rgba(34,211,238,.4);color:var(--teks);font-weight:600}
.baris-menu i{font-style:normal;font-size:11px;background:var(--bg3);border:1px solid var(--garis);border-radius:20px;padding:1px 7px;color:var(--teks3)}
.pil-baris{display:flex;flex-wrap:wrap;gap:6px}
.pil{background:var(--bg3);border:1px solid var(--garis);border-radius:20px;padding:5px 11px;font-size:12px;cursor:pointer;color:var(--teks2);transition:.15s}
.pil:hover{border-color:var(--aksen);color:var(--teks)}
.pil.aktif{background:rgba(34,211,238,.15);border-color:var(--aksen);color:var(--aksen);font-weight:600}
.kaki-sisi{margin-top:18px;padding-top:13px;border-top:1px solid var(--garis);font-size:12px;color:var(--teks3)}
.siapa{display:flex;align-items:center;gap:9px;background:var(--bg3);border:1px solid var(--garis);border-radius:11px;padding:9px 10px}
.lingkaran{width:32px;height:32px;border-radius:50%;background:linear-gradient(140deg,var(--aksen),var(--ungu));display:grid;place-items:center;color:#08121e;font-weight:800;font-size:13px;flex:none}
.utama{padding:22px 24px 70px;max-width:1560px}
.atas{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.cari-luar{position:relative;flex:1;min-width:220px}
.cari{width:100%;background:var(--bg2);border:1px solid var(--garis);border-radius:12px;padding:13px 14px;outline:none;transition:.18s}
.cari:focus{border-color:var(--aksen);box-shadow:0 0 0 4px rgba(34,211,238,.13)}
.aksi{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.aksi .tombol{height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px}
.info{color:var(--teks3);font-size:13px;margin:2px 0 15px}
.info b{color:var(--aksen)}
.kartu-baris{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:13px}
.kartu{background:linear-gradient(170deg,var(--bg2),var(--bg3));border:1px solid var(--garis);border-radius:var(--radius);
  padding:15px;cursor:pointer;transition:.18s;position:relative;display:flex;flex-direction:column;gap:9px}
.kartu:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--aksen);opacity:.75}
.kartu:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.55);box-shadow:var(--bayang)}
.kartu h3{margin:0;font-size:14.5px;line-height:1.35;font-weight:650}
.kartu .kode{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--aksen);letter-spacing:.4px}
.tanda{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lencana{font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:650;letter-spacing:.3px;white-space:nowrap}
.l-kat{background:rgba(167,139,250,.15);color:var(--ungu);border:1px solid rgba(167,139,250,.3)}
.l-darurat{background:rgba(244,63,94,.16);color:#ff8fa3;border:1px solid rgba(244,63,94,.35)}
.l-tinggi{background:rgba(251,191,36,.15);color:var(--kuning);border:1px solid rgba(251,191,36,.32)}
.l-sedang{background:rgba(52,211,153,.14);color:var(--hijau);border:1px solid rgba(52,211,153,.3)}
.l-standar{background:rgba(34,211,238,.12);color:var(--aksen);border:1px solid rgba(34,211,238,.28)}
.l-draf{background:rgba(100,117,143,.2);color:var(--teks2);border:1px solid var(--garis)}
.kartu .bawah{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--teks3);gap:8px}
.kosong{text-align:center;padding:60px 20px;color:var(--teks3)}
.kosong b{display:block;font-size:17px;color:var(--teks2);margin-bottom:6px}

/* ---------- panel rincian ---------- */
.tutup-latar{position:fixed;inset:0;background:rgba(2,6,14,.72);backdrop-filter:blur(5px);display:none;z-index:50}
.tutup-latar.buka{display:block}
.rincian{position:fixed;top:0;right:0;height:100vh;width:min(800px,100%);z-index:51;background:var(--bg2);
  border-left:1px solid var(--garis);transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:0 0 40px}
.rincian.buka{transform:none;box-shadow:-30px 0 70px rgba(0,0,0,.5)}
.kepala-rincian{position:sticky;top:0;background:linear-gradient(180deg,var(--bg3),var(--bg2));
  border-bottom:1px solid var(--garis);padding:17px 22px 14px;z-index:2}
.kepala-rincian .kode{color:var(--aksen);font-family:ui-monospace,Consolas,monospace;font-size:12px}
.kepala-rincian h2{margin:5px 0 9px;font-size:19px;line-height:1.3}
.isi-rincian{padding:18px 22px}
.isi-rincian h4{font-size:11.5px;text-transform:uppercase;letter-spacing:1.3px;color:var(--teks3);margin:20px 0 9px}
ol.langkah{list-style:none;counter-reset:l;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
ol.langkah li{counter-increment:l;background:var(--bg3);border:1px solid var(--garis);border-radius:11px;
  padding:11px 13px 11px 46px;position:relative;font-size:14px;white-space:pre-wrap}
ol.langkah li:before{content:counter(l);position:absolute;left:11px;top:10px;width:24px;height:24px;border-radius:8px;
  background:linear-gradient(140deg,var(--aksen),var(--aksen2));color:#031218;font-weight:800;display:grid;place-items:center;font-size:12px}
.baris-aksi{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* ---------- jendela ---------- */
.jendela{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:18px;background:rgba(2,6,14,.75);backdrop-filter:blur(5px)}
.jendela.buka{display:grid}
.isi-jendela{background:var(--bg2);border:1px solid var(--garis);border-radius:16px;width:min(880px,100%);
  max-height:92vh;overflow-y:auto;padding:22px 24px;box-shadow:var(--bayang)}
.isi-jendela h2{margin:0 0 4px;font-size:19px}
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.tiga-kolom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
.langkah-masukan{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.langkah-masukan textarea{flex:1;min-height:60px}
.tautan-kecil{background:none;border:1px solid var(--garis);border-radius:9px;padding:9px 11px;cursor:pointer;color:var(--teks2)}
.tautan-kecil:hover{border-color:var(--aksen);color:var(--teks)}
.tabel{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:12px}
.tabel th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--teks3);
  padding:8px 9px;border-bottom:1px solid var(--garis)}
.tabel td{padding:9px;border-bottom:1px solid var(--garis);vertical-align:middle}
.tabel tr:hover td{background:var(--bg3)}
.menempel{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
@media(max-width:900px){
  .bungkus{grid-template-columns:1fr}
  .sisi{position:fixed;z-index:60;left:0;top:0;width:286px;height:100vh;transform:translateX(-102%);transition:transform .24s}
  .sisi.buka{transform:none;box-shadow:var(--bayang)}
  .tombol-sisi{display:inline-block!important}
  .utama{padding:15px 13px 55px}
  .kartu-baris{grid-template-columns:1fr}
  .rincian{width:100%}
  .dua-kolom,.tiga-kolom{grid-template-columns:1fr}
}
.tombol-sisi{display:none}
/* =====================================================================
   TEMA PUTIH SALJU — bersih, lapang, elegan
   ===================================================================== */
html[data-tema="salju"]{
  --bg:#f7f9fc; --bg2:#ffffff; --bg3:#f3f6fa; --garis:#e4eaf2;
  --teks:#141f2e; --teks2:#55657c; --teks3:#8b99ab;
  --aksen:#1a56db; --aksen2:#1e40af; --kuning:#b45309; --merah:#dc2626; --hijau:#047857; --ungu:#4338ca;
  --bayang:0 6px 24px rgba(20,40,80,.07); --radius:15px;
}
html[data-tema="salju"] body{
  background:linear-gradient(180deg,#ffffff 0%,#fafcfe 45%,#eff3f9 100%);
  background-attachment:fixed;
}
html[data-tema="salju"] .sisi{background:#fff;border-right:1px solid #e9eef5}
html[data-tema="salju"] .kotak{background:#fbfcfe;border-color:#eaeff6}
html[data-tema="salju"] .kotak b{color:#1a56db}
html[data-tema="salju"] .kartu{background:#fff;border-color:#e8eef6}
html[data-tema="salju"] .kartu:hover{border-color:#bcd0ee;box-shadow:0 10px 30px rgba(20,40,80,.10);transform:translateY(-2px)}
html[data-tema="salju"] .kartu:before{background:linear-gradient(180deg,#1a56db,#60a5fa)}
html[data-tema="salju"] .kartu h3{color:#101b28;letter-spacing:-.15px}
html[data-tema="salju"] .baris-menu.aktif{background:#f0f5ff;border-color:#c7d9f7;color:#1e3a8a}
html[data-tema="salju"] .pil.aktif{background:#f0f5ff;border-color:#bcd0ee;color:#1a56db}
html[data-tema="salju"] .tombol{background:#fff;border-color:#e4eaf2;color:#4a5b72}
html[data-tema="salju"] .tombol:hover{border-color:#b9cdea;color:#141f2e}
html[data-tema="salju"] .tombol.utama{background:linear-gradient(135deg,#1a56db,#1e3f9e);color:#fff;border:none;
  box-shadow:0 4px 14px rgba(26,86,219,.25)}
html[data-tema="salju"] .tombol.utama:hover{box-shadow:0 6px 20px rgba(26,86,219,.32)}
html[data-tema="salju"] .lambang{background:linear-gradient(135deg,#1a56db,#3b82f6);color:#fff;box-shadow:0 6px 18px rgba(26,86,219,.28)}
html[data-tema="salju"] .masukan,html[data-tema="salju"] .cari{background:#fff;border-color:#e4eaf2}
html[data-tema="salju"] .masukan:focus,html[data-tema="salju"] .cari:focus{border-color:#1a56db;box-shadow:0 0 0 4px rgba(26,86,219,.10)}
html[data-tema="salju"] .cari::placeholder{color:#9aa8ba}
html[data-tema="salju"] .rincian{background:#fff;border-left:1px solid #e9eef5}
html[data-tema="salju"] .kepala-rincian{background:linear-gradient(180deg,#fdfefe,#ffffff)}
html[data-tema="salju"] .isi-jendela{background:#fff;border-color:#e9eef5}
html[data-tema="salju"] .tutup-latar{background:rgba(23,42,70,.42)}
html[data-tema="salju"] ol.langkah li{background:#fbfcfe;border-color:#eaeff6}
html[data-tema="salju"] ol.langkah li:before{background:linear-gradient(135deg,#1a56db,#3b82f6);color:#fff}
html[data-tema="salju"] .siapa{background:#fbfcfe;border-color:#eaeff6}
html[data-tema="salju"] .lingkaran{background:linear-gradient(135deg,#1a56db,#6366f1);color:#fff}
html[data-tema="salju"] .tabel th{color:#8b99ab;border-bottom-color:#e9eef5}
html[data-tema="salju"] .tabel td{border-bottom-color:#eef3f8}
html[data-tema="salju"] .tabel tr:hover td{background:#fafcff}
html[data-tema="salju"] #r-lampiran-isi{background:#fbfcfe;border-color:#eaeff6}
html[data-tema="salju"] .kaki-sisi{border-top-color:#e9eef5}
/* lencana versi terang — kontras nyaman di atas putih */
html[data-tema="salju"] .l-kat{background:#eef2ff;color:#3730a3;border-color:#cdd8fb}
html[data-tema="salju"] .l-darurat{background:#fef2f2;color:#b91c1c;border-color:#fbc9c9}
html[data-tema="salju"] .l-tinggi{background:#fffbeb;color:#a16207;border-color:#fbe3a6}
html[data-tema="salju"] .l-sedang{background:#ecfdf5;color:#047857;border-color:#a9e8cd}
html[data-tema="salju"] .l-standar{background:#eff6ff;color:#1d4ed8;border-color:#c3dafb}
html[data-tema="salju"] .l-draf{background:#f4f6f9;color:#64748b;border-color:#e4e9f0}
/* sentuhan elegan: garis emas tipis pada judul bagian */
html[data-tema="salju"] .judul-kecil{color:#94a2b4;letter-spacing:1.6px}
html[data-tema="salju"] .pemisah{background:linear-gradient(90deg,#e9eef5,#f4f7fb)}
html[data-tema="salju"] .kepala-rincian h2{letter-spacing:-.2px}
html[data-tema="salju"] .info b{color:#1a56db}

@media print{
  .sisi,.atas,.aksi,.info,.tutup-latar,.jendela{display:none!important}
  body{background:#fff;color:#000}.bungkus{display:block}.utama{padding:0}
  .kartu-baris{display:block}.kartu{break-inside:avoid;border:1px solid #bbb;background:#fff;color:#000;margin-bottom:10px;box-shadow:none;transform:none}
  .rincian{position:static;transform:none;width:auto;border:none;height:auto;overflow:visible}
}


/* =====================================================================
   MODUL TEMPLATE PESAN
   ===================================================================== */
.isian-baris{margin-bottom:11px}
.isian-baris label{margin:0 0 4px;font-size:11px}
.pratinjau-wa{
  background:#d9dee5;border:1px solid var(--garis);border-radius:14px;padding:16px 14px;
  background-image:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35));
  max-height:none;overflow:auto;
}
html[data-tema="salju"] .pratinjau-wa{background:#e8ecf1}
.gelembung{
  background:#fff;border-radius:14px 14px 14px 4px;padding:12px 14px;
  font-size:13.8px;color:#111b21;white-space:pre-wrap;word-break:break-word;
  box-shadow:0 1px 2px rgba(11,20,26,.13);max-width:100%;line-height:1.5;
}
.gelembung .jam{display:block;text-align:right;font-size:11px;color:#667781;margin-top:6px}
html[data-tema="gelap"] .pratinjau-wa{background:#0b141a}
html[data-tema="gelap"] .gelembung{background:#202c33;color:#e9edef}
html[data-tema="gelap"] .gelembung .jam{color:#8696a0}
.lencana-nada{background:rgba(34,211,238,.12);color:var(--aksen);border:1px solid rgba(34,211,238,.28)}
html[data-tema="salju"] .lencana-nada{background:#eff6ff;color:#1d4ed8;border-color:#c3dafb}
.tanda-tempat{font-family:ui-monospace,Consolas,monospace;color:var(--aksen);font-size:12.5px}


/* =====================================================================
   DASBOR ADMINISTRATOR
   ===================================================================== */
.kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:12px}
.kpi .kotak{padding:13px 14px}
.kpi .kotak b{font-size:23px}
.kpi .kotak span{display:block;margin-top:2px}
.batang{display:flex;flex-direction:column;gap:9px}
.batang-baris{display:grid;grid-template-columns:200px 1fr 58px;gap:11px;align-items:center;font-size:13.5px}
.batang-latar{background:var(--bg3);border:1px solid var(--garis);border-radius:20px;height:12px;overflow:hidden}
.batang-isi{height:100%;background:linear-gradient(90deg,#1a56db,#60a5fa);border-radius:20px}
html[data-tema="gelap"] .batang-isi{background:linear-gradient(90deg,#22d3ee,#0e7490)}
.panel-bagian{background:var(--bg2);border:1px solid var(--garis);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px}
html[data-tema="salju"] .panel-bagian{background:#fff;border-color:#e8eef6}
.panel-bagian h3{margin:0 0 12px;font-size:14px;letter-spacing:.2px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.saring{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.saring > div{min-width:158px}
.saring label{margin:0 0 4px}
h1.judul-admin{font-size:22px;margin:0;letter-spacing:-.2px}
.dua-panel{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1100px){.dua-panel{grid-template-columns:1fr}}
@media(max-width:900px){.batang-baris{grid-template-columns:120px 1fr 46px}}