@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/inter.woff2) format("woff2")}

/* Tata letak panel admin (menu samping + bar atas), warna WarisaNet: biru, hijau, emas, cokelat (seragam dengan WarisaChat) */
:root{
  --bg:#f4f7fb;--panel:#eef2f7;--kartu:#ffffff;--teks:#1e293b;--redup:#64748b;--garis:#e5eaf1;--garis-kuat:#d3dbe6;
  --aksen:#0088c7;--aksen-h:#0073a8;--aksen-lembut:#e3f3fb;
  --hijau:#6f9a2e;--emas:#e0a21a;--coklat:#c27c3a;--langit:#2fa4dc;
  --ok:#2f855a;--ok-bg:#e6f4ec;--waspada:#9a6a00;--waspada-bg:#fdf3dc;--bahaya:#d14343;--bahaya-bg:#fdeceb;--info:#2563a8;--info-bg:#e5effa;
  --serif:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--sans:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bayang:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.06);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1720;--panel:#1d2935;--kartu:#17212c;--teks:#e6edf5;--redup:#94a3b8;--garis:#263341;--garis-kuat:#334354;
  --aksen:#2ea7e0;--aksen-h:#55b8e8;--aksen-lembut:#123447;
  --ok:#7fd1a2;--ok-bg:#1a3326;--waspada:#e8c063;--waspada-bg:#3a3020;--bahaya:#f08b8b;--bahaya-bg:#3a1f22;--info:#9cc3f0;--info-bg:#1b2c40;
  --bayang:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1720;--panel:#1d2935;--kartu:#17212c;--teks:#e6edf5;--redup:#94a3b8;--garis:#263341;--garis-kuat:#334354;
  --aksen:#2ea7e0;--aksen-h:#55b8e8;--aksen-lembut:#123447;
  --ok:#7fd1a2;--ok-bg:#1a3326;--waspada:#e8c063;--waspada-bg:#3a3020;--bahaya:#f08b8b;--bahaya-bg:#3a1f22;--info:#9cc3f0;--info-bg:#1b2c40;
  --bayang:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--teks);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
a{color:var(--aksen)}
:focus-visible{outline:2px solid var(--aksen);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* rangka */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100%}
.sisi{background:var(--panel);border-right:1px solid var(--garis);padding:14px 12px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.merek{display:flex;align-items:center;gap:10px;padding:4px 6px}
.merek .tanda{width:30px;height:30px;border-radius:8px;background:var(--aksen);color:#fff;display:grid;place-items:center;font:600 15px var(--sans)}
.merek b{font:600 19px var(--serif);letter-spacing:-.01em}
.mitra{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--garis-kuat);border-radius:10px;background:var(--kartu);cursor:pointer;width:100%;text-align:left}
.mitra small{display:block;color:var(--redup);font-size:11.5px}
.mitra .panah{margin-left:auto;color:var(--redup)}
.grup{display:flex;flex-direction:column;gap:2px}
.grup h4{margin:0 0 4px;padding:0 10px;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--redup)}
.menu{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--teks);text-decoration:none;border:0;background:transparent;width:100%;text-align:left;cursor:pointer}
.menu svg{width:17px;height:17px;flex:none;color:var(--redup)}
.menu:hover{background:var(--kartu)}
.menu.on{background:var(--kartu);box-shadow:var(--bayang);font-weight:600}
.menu.on svg{color:var(--aksen)}
.menu .jml{margin-left:auto;font-size:11.5px;background:var(--aksen-lembut);color:var(--aksen);padding:0 7px;border-radius:9px;font-weight:600}
.utama{display:flex;flex-direction:column;min-width:0}
.atas{display:flex;align-items:center;gap:12px;padding:10px 24px;border-bottom:1px solid var(--garis);background:var(--bg);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.burger{display:none;border:1px solid var(--garis-kuat);background:var(--kartu);border-radius:8px;width:36px;height:36px;cursor:pointer}
.cari{flex:1;max-width:460px;display:flex;align-items:center;gap:8px;border:1px solid var(--garis-kuat);background:var(--kartu);border-radius:10px;padding:7px 11px}
.cari input{border:0;outline:0;background:transparent;width:100%}
.cari kbd{font:11px var(--sans);color:var(--redup);border:1px solid var(--garis);border-radius:5px;padding:0 5px}
.atas .kanan{margin-left:auto;display:flex;align-items:center;gap:10px}
.ikon{width:36px;height:36px;border-radius:9px;border:1px solid var(--garis-kuat);background:var(--kartu);display:grid;place-items:center;cursor:pointer;position:relative}
.ikon .titik{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--aksen)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--aksen-lembut);color:var(--aksen);display:grid;place-items:center;font-weight:600}
.isi{padding:22px 24px 40px;display:flex;flex-direction:column;gap:18px;max-width:1280px;width:100%}
.judul{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.judul h1{margin:0;font:600 26px/1.15 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.judul p{margin:4px 0 0;color:var(--redup)}
.pita-contoh{font-size:12.5px;color:var(--waspada);background:var(--waspada-bg);padding:6px 12px;border-radius:8px}

/* tombol & chip */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;border:1px solid transparent;cursor:pointer;font-weight:500}
.btn.utama-btn{background:var(--aksen);color:#fff}.btn.utama-btn:hover{background:var(--aksen-h)}
.btn.kedua{background:var(--kartu);border-color:var(--garis-kuat)}.btn.kedua:hover{background:var(--panel)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.c-ok{background:var(--ok-bg);color:var(--ok)}.c-waspada{background:var(--waspada-bg);color:var(--waspada)}.c-bahaya{background:var(--bahaya-bg);color:var(--bahaya)}.c-info{background:var(--info-bg);color:var(--info)}

/* kartu angka */
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.k{background:var(--kartu);border:1px solid var(--garis);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0;container-type:inline-size}
.k .lbl{font-size:12.5px;color:var(--redup);display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;align-items:flex-start}
.k .nilai{font:600 26px/1.1 var(--serif)}
@supports (font-size:1cqi){.k .nilai{font-size:clamp(14px,10.8cqi,26px)}}
.k .nilai{overflow-wrap:anywhere}
.k .bawah{overflow-wrap:anywhere}
.k .bawah{font-size:12.5px;color:var(--redup)}
.naik{color:var(--ok);font-weight:600}.turun{color:var(--bahaya);font-weight:600}
.bar-mini{height:6px;border-radius:4px;background:var(--panel);overflow:hidden;display:flex}
.bar-mini span{display:block;height:100%}

/* dua kolom */
.dua{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.panel{background:var(--kartu);border:1px solid var(--garis);border-radius:14px;padding:16px;min-width:0}
.panel h3{margin:0 0 2px;font:500 17px var(--serif)}
.panel .sub{color:var(--redup);font-size:12.5px;margin:0 0 12px}
.legenda{display:flex;gap:14px;font-size:12.5px;color:var(--redup);margin-bottom:6px}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
svg text{fill:var(--redup);font:11px var(--sans)}
.daftar{display:flex;flex-direction:column}
.daftar .r{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--garis)}
.daftar .r:first-child{border-top:0}
.daftar .r .nm{flex:1;min-width:0}
.daftar .r .nm b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.daftar .r .nm small{color:var(--redup)}
.jadwal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.jadwal div{border:1px solid var(--garis);border-radius:10px;padding:10px;background:var(--bg)}
.jadwal b{display:block;font:500 15px var(--serif)}
.jadwal small{color:var(--redup)}

/* tabel pelanggan */
.saring{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.saring select,.saring input{border:1px solid var(--garis-kuat);background:var(--kartu);border-radius:9px;padding:7px 10px}
.saring input{min-width:0;flex:1 1 200px}
.tab-st{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--garis)}
.tab-st button{border:0;background:transparent;padding:8px 12px;cursor:pointer;color:var(--redup);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-st button.on{color:var(--teks);border-bottom-color:var(--aksen);font-weight:600}
.tab-st span{font-size:11.5px;background:var(--panel);border-radius:9px;padding:0 6px;margin-left:4px}
.wadah-tabel{overflow-x:auto;border:1px solid var(--garis);border-radius:12px;background:var(--kartu)}
table{width:100%;border-collapse:collapse;min-width:860px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--garis);vertical-align:middle}
th{font:600 11.5px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--redup);background:var(--panel);position:sticky;top:0}
tbody tr{cursor:pointer}tbody tr:hover{background:var(--bg)}
td .nm b{display:block}td .nm small{color:var(--redup)}
td.kanan,th.kanan{text-align:right}
.aksi-baris{display:flex;gap:4px;justify-content:flex-end}
.aksi-baris button{width:30px;height:30px;border-radius:8px;border:1px solid var(--garis);background:var(--kartu);cursor:pointer;display:grid;place-items:center;color:var(--redup)}
.aksi-baris button:hover{color:var(--aksen);border-color:var(--aksen)}
.kaki-tabel{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;color:var(--redup);font-size:12.5px;flex-wrap:wrap}
.hal{display:flex;gap:4px}.hal button{min-width:30px;height:30px;border-radius:8px;border:1px solid var(--garis);background:var(--kartu);cursor:pointer}
.hal button.on{background:var(--aksen);color:#fff;border-color:var(--aksen)}

/* laci detail */
.tirai{position:fixed;inset:0;background:rgba(20,19,17,.35);z-index:20}
.laci{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--bg);border-left:1px solid var(--garis);z-index:21;display:flex;flex-direction:column;box-shadow:var(--bayang);padding-top:env(safe-area-inset-top,0px)}
.laci header{padding:16px 18px;border-bottom:1px solid var(--garis);display:flex;gap:12px;align-items:flex-start}
.laci header h2{margin:0;font:500 21px var(--serif)}
.laci header small{color:var(--redup)}
.laci .tutup{margin-left:auto}
.laci .tab-st{padding:0 14px}
.laci .badan{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px}
dt{color:var(--redup)}dd{margin:0;overflow-wrap:anywhere}
.riwayat .r{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--garis)}
.riwayat .r:first-child{border-top:0}

.tampil-hp{display:none}
@media (max-width:1100px){.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.dua{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sisi{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:30;transform:translateX(-100%);transition:transform .2s;padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .sisi.buka{transform:none;box-shadow:var(--bayang)}
  .burger{display:grid;place-items:center}
  .atas{padding:10px 16px}.isi{padding:16px 16px 32px}
  .cari kbd,.sembunyi-hp{display:none}
  .judul h1{font-size:24px}
  .jadwal{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:460px){.kpi{gap:10px}.k{padding:12px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- tambahan aplikasi ---------- */
.c-redup{background:var(--panel);color:var(--redup)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.form .penuh{grid-column:1/-1}
.form label,.lbl-f{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--redup)}
.form input,.form select,.form textarea,.isian{border:1px solid var(--garis-kuat);background:var(--kartu);border-radius:9px;padding:9px 11px;color:var(--teks);font:inherit;width:100%}
.form input:focus,.form select:focus,.form textarea:focus,.isian:focus{outline:none;border-color:var(--aksen);box-shadow:0 0 0 3px var(--aksen-lembut)}
.form .catatan{font-size:12px;color:var(--redup)}
.galat{background:var(--bahaya-bg);color:var(--bahaya);padding:10px 12px;border-radius:10px}
.sukses{background:var(--ok-bg);color:var(--ok);padding:10px 12px;border-radius:10px}
.kotak-masuk{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.kotak-masuk .panel{width:min(400px,100%);display:flex;flex-direction:column;gap:14px;padding:24px}
.kotak-masuk h1{margin:0;font:500 26px var(--serif)}
.sandi-sekali{font:600 20px ui-monospace,Menlo,monospace;background:var(--panel);padding:12px;border-radius:10px;user-select:all;overflow-wrap:anywhere}
.tbl-kecil{min-width:0}
.tbl-kecil td,.tbl-kecil th{padding:8px 10px}
.baris-aksi{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.btn.kecil{padding:5px 10px;font-size:12.5px}
a.btn{text-decoration:none}
.menu{text-decoration:none}
@media (max-width:600px){.form{grid-template-columns:minmax(0,1fr)}}
.btn.awas{background:var(--bahaya);color:#fff;border-color:var(--bahaya)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.sub a{color:var(--aksen)}
.cari kbd{white-space:nowrap}
/* Baris filter berlabel (Pembayaran, Pelanggan, dll.): grid rapi; isian di dalam label tidak boleh ikut melebar ke bawah */
.saring.saring-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-items:end}
.saring-grid .lbl-f>input,.saring-grid .lbl-f>select{flex:none;width:100%;height:40px;padding:7px 10px}
.saring-grid .lbl-f.lebar,.saring-grid .lbl-f:has(input[name="q"]){grid-column:span 2}
.saring-grid .lbl-f:has(>.btn){justify-content:flex-end}
.saring-grid .lbl-f>.btn{height:40px;width:100%}
@media (max-width:460px){.saring.saring-grid{grid-template-columns:1fr 1fr}.saring-grid .lbl-f:has(input[name="q"]),.saring-grid .lbl-f:has(>select),.saring-grid .lbl-f:has(>.btn){grid-column:1/-1}}


/* ---------- tampilan baru ala panel admin (MeeChat-like), warna WarisaNet ---------- */
body{font-size:14.5px}
.app{grid-template-columns:262px minmax(0,1fr)}
.sisi{background:var(--kartu);padding:18px 14px;gap:10px}
.merek{padding:2px 8px 10px;gap:10px}.merek img{width:34px;height:34px}.merek b{font:700 21px var(--sans)}.merek b span{color:var(--aksen)}
.grup{gap:3px}.grup h4{padding:10px 12px 4px;font-size:11px;font-weight:700}
.menu{padding:10px 12px;border-radius:10px;font-weight:500;gap:12px}
.menu svg{width:18px;height:18px}
.menu:hover{background:var(--aksen-lembut);color:var(--aksen)}.menu:hover svg{color:var(--aksen)}
.menu.on{background:var(--aksen);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--aksen) 30%,transparent);font-weight:600}
.menu.on svg{color:#fff}.menu.on .jml{background:#fff;color:var(--aksen)}
.mitra{border-color:var(--garis);background:var(--aksen-lembut);border-radius:12px;padding:10px 12px}
.atas{background:var(--kartu);padding:12px 24px}
.cari{border-radius:12px;background:var(--bg)}
.ikon{border-radius:50%;border-color:transparent;background:transparent;color:var(--redup)}.ikon:hover{background:var(--aksen-lembut);color:var(--aksen)}
.avatar{background:var(--aksen);color:#fff;font-weight:700;font-size:13px}
.judul h1{font:700 26px/1.2 var(--sans)}
.btn{border-radius:10px;font-weight:600}
.panel,.k,.wadah-tabel{border-radius:14px;box-shadow:var(--bayang)}
.panel h3{font:700 17px var(--sans)}
th{background:var(--bg);color:var(--teks);font-weight:700}
/* kartu angka: ikon bulat + varian berwarna */
.kpi{gap:18px}
.k{padding:20px 20px;gap:4px;flex-direction:row;align-items:center;flex-wrap:wrap}
.k .ikn{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;background:var(--aksen-lembut);color:var(--aksen);margin-right:4px}
.k .ikn svg{width:22px;height:22px}
.k .tub{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.k .lbl{font-size:13.5px;font-weight:600;color:var(--teks)}.k .nilai{font:700 26px/1.15 var(--sans)}
.k.warna{border:0;color:#fff}.k.warna .lbl,.k.warna .bawah,.k.warna .bawah a{color:rgba(255,255,255,.9)}.k.warna .ikn{background:#fff}
.k.biru{background:var(--aksen)}.k.biru .ikn{color:var(--aksen)}.k.langit{background:var(--langit)}.k.langit .ikn{color:var(--langit)}
.k.hijau{background:var(--hijau)}.k.hijau .ikn{color:var(--hijau)}.k.emas{background:var(--emas)}.k.emas .ikn{color:var(--emas)}
.k.warna .bar-mini{background:rgba(255,255,255,.3)}.k.warna .bar-mini span{background:#fff!important}
.k.warna .chip{background:rgba(255,255,255,.25);color:#fff}
@media (max-width:820px){.app{grid-template-columns:minmax(0,1fr)}.atas{padding:10px 14px}}
@media (max-width:600px){.kpi{grid-template-columns:1fr 1fr;gap:10px}.k{padding:14px;flex-direction:column;align-items:flex-start}.k .ikn{width:34px;height:34px;flex-basis:34px}.k .ikn svg{width:18px;height:18px}.k .nilai{font-size:19px}.k .lbl{font-size:12.5px}}
/* angka rupiah panjang tetap satu baris: ukuran mengikuti lebar kartu */
.k .nilai{white-space:nowrap;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis}
@supports (font-size:1cqi){.k .nilai{font-size:clamp(15px,8cqi,26px)}}
@media (max-width:600px){@supports (font-size:1cqi){.k .nilai{font-size:clamp(14px,10cqi,20px)}}}

.aksi-judul{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-apk{display:inline-flex;align-items:center;gap:6px;background:#3ddc84;color:#063;border-color:#3ddc84;font-weight:600}
.btn-apk:hover{background:#34c975;color:#063}
.btn-apk svg{width:16px;height:16px}
.di-apk .btn-apk{display:none}

.kpi a.k.klik{color:inherit;text-decoration:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.kpi a.k.klik:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.kpi a.k.klik:focus-visible{outline:2px solid var(--utama);outline-offset:2px}
.kpi a.k.klik .panah{font-weight:700;opacity:.7}

@media (min-width:1101px){.kpi{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
 .kpi .k{padding:16px;flex-direction:column;align-items:flex-start;gap:10px}
 .kpi .k .ikn{width:36px;height:36px;flex-basis:36px}.kpi .k .tub{width:100%}
 .kpi .k .nilai{font-size:clamp(17px,1.55vw,23px);white-space:nowrap;overflow:visible}}
@media (max-width:1100px){.kpi > .k:last-child:nth-child(odd){grid-column:1 / -1}}   /* HP/tablet 2 kolom: kotak terakhir yang sendirian dibuat selebar baris */
.k.ungu{background:#6d4bc3}.k.ungu .ikn{color:#6d4bc3}
/* panel status staf (khusus pengelola) */
.staf-online .so-kepala{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.staf-online .so-kepala h3{margin:0}
.so-daftar{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.so-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--garis);border-radius:12px;background:var(--bg)}
.so-titik{width:11px;height:11px;border-radius:50%;flex:none;background:#b8c0cc}
.so-titik.online{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.so-titik.baru{background:#f59e0b}
.so-nm{flex:1;min-width:0}.so-nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-nm small,.so-st small{display:block;color:var(--redup);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-st{text-align:right;flex:none;max-width:48%}
.so-st b{font-size:13px}.so-st b.online{color:#16a34a}.so-st b.baru{color:#b45309}.so-st b.offline{color:var(--redup);font-weight:500}
/* pratinjau pesan WA: teks panjang (tautan) membungkus, tautan bisa diklik */
.pratinjau-wa{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;background:var(--bg);border:1px solid var(--garis);border-radius:10px;padding:10px;font:14px/1.5 var(--serif)}
.pratinjau-wa a{color:#027eb5;text-decoration:underline}
.cek-ppn{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;color:var(--teks)!important;border:1px solid var(--garis-kuat);border-radius:10px;padding:10px 12px;background:var(--bg);cursor:pointer}
.cek-ppn input{width:18px!important;height:18px;margin-top:2px;flex:none}
/* ---------- Dasbor OLT (gaya R-Config) ---------- */
.od-cari{display:flex;gap:8px;margin:0 0 16px;max-width:560px}.od-cari input{flex:1;min-width:0}
.od-ring{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}
.od-k{position:relative;overflow:hidden;background:var(--kartu);border:1px solid var(--garis);border-radius:14px;padding:14px 16px 18px;text-decoration:none;color:var(--teks);display:flex;flex-direction:column;gap:10px;min-width:0}
.od-k:hover{border-color:var(--w)}
.od-atas{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14.5px}
.od-atas em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--w);background:var(--wb);padding:2px 7px;border-radius:7px}
.od-isi{display:flex;align-items:center;gap:12px;min-width:0}.od-isi>div{min-width:0}
.od-isi b{display:block;font-size:26px;line-height:1.1;font-weight:600}.od-isi small{display:block;color:var(--redup);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-ikn{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--wb);color:var(--w)}.od-ikn svg{width:22px;height:22px}
.od-bar{position:absolute;left:0;bottom:0;height:4px;background:var(--w);border-radius:0 3px 0 0;min-width:4px}
.od-olt{background:var(--kartu);border:1px solid var(--garis);border-left:4px solid var(--ok);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.od-olt.waspada{border-left-color:var(--waspada)}.od-olt.galat{border-left-color:var(--bahaya)}
.od-kepala{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.od-alat{flex:0 0 72px;width:72px;height:46px;background:var(--panel);border-radius:10px;display:grid;place-items:center}.od-alat svg{width:60px;height:38px}
.od-nama{flex:1 1 220px;min-width:0}.od-nama h3{margin:0;font-size:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.od-nama small{color:var(--redup);font-size:12.5px}
.od-angka{display:flex;gap:6px;flex-wrap:wrap}
.od-angka a{display:flex;flex-direction:column;align-items:center;min-width:76px;padding:6px 10px;border-radius:10px;background:var(--panel);text-decoration:none;color:var(--teks)}
.od-angka a:hover{outline:1px solid var(--garis-kuat)}.od-angka b{font-size:18px}.od-angka span{font-size:11.5px;color:var(--redup);white-space:nowrap}
.od-angka a.ok b{color:var(--ok)}.od-angka a.ws b{color:var(--waspada)}.od-angka a.bh b{color:var(--bahaya)}
.od-peringatan{margin:12px 0 0;padding:9px 12px;border-radius:10px;background:var(--bahaya-bg);color:var(--bahaya);font-size:13.5px}
.od-pon-judul{margin:14px 0 8px;font-weight:600;font-size:13.5px}.od-pon-judul small{font-weight:400;color:var(--redup)}
.od-pon{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.od-pon a{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:7px 9px 9px;border-radius:9px;border:1px solid var(--garis);text-decoration:none;color:var(--teks);background:var(--kartu)}
.od-pon a span{font-size:11.5px;color:var(--redup)}.od-pon a b{font-size:14px}
.od-pon a i{position:absolute;left:0;bottom:0;height:3px;background:var(--ok)}
.od-pon a.kurang{border-color:var(--waspada);background:var(--waspada-bg)}.od-pon a.kurang i{background:var(--waspada)}
.od-pon a.mati{border-color:var(--bahaya);background:var(--bahaya-bg)}.od-pon a.mati b,.od-pon a.mati span{color:var(--bahaya)}
@media (max-width:1100px){.od-ring{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.od-ring{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.od-isi b{font-size:21px}.od-ikn{flex-basis:36px;width:36px;height:36px}.od-ikn svg{width:18px;height:18px}
 .od-angka a{min-width:0;flex:1 1 30%}.od-ubah{margin-left:auto}}