:root{--bg:#f4f6fa;--kartu:#fff;--teks:#1b2430;--redup:#5b6676;--garis:#d9dee7;--biru:#1d4ed8;--biru-tua:#1e3a8a;--biru-muda:#e8efff;--hijau:#157347;--hijau-muda:#e3f5ea;--merah:#b42318;--merah-muda:#fdecea;--kuning:#8a5a00;--kuning-muda:#fff4d6}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--teks);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--biru)}
.atas{background:var(--biru-tua);color:#fff}
.atas .isi{max-width:1100px;margin:0 auto;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.atas strong{font-size:17px}.atas small{display:block;opacity:.8;font-size:13px}
.atas a{color:#fff;margin-left:14px;font-size:14px}
.atas form{display:inline}.atas button{background:none;border:0;color:#fff;font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;padding:0;margin-left:14px}
.atas .redup{color:#dbe4ff;margin-left:14px;font-size:13px}
.bungkus{max-width:680px;margin:0 auto;padding:20px 16px 48px}
.bungkus.lebar{max-width:1100px}
.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:12px;padding:20px;margin-bottom:16px}
h1{font-size:22px;margin:0 0 6px}h2{font-size:17px;margin:0 0 10px}
.redup{color:var(--redup)}.kecil{font-size:14px}
.info{background:var(--biru-muda);border:1px solid #c5d6ff;border-radius:10px;padding:14px 16px;margin-bottom:16px;font-size:15px}
.info ul{margin:6px 0 0;padding-left:20px}
.galat-ringkas,.galat-kotak{background:var(--merah-muda);border:1px solid #f4b8b1;color:var(--merah);border-radius:10px;padding:12px 14px;margin-bottom:16px}
.sukses{background:var(--hijau-muda);border:1px solid #b7e3c7;color:var(--hijau);border-radius:10px;padding:12px 14px;margin-bottom:16px}
label{display:block;font-weight:600;margin:14px 0 4px;font-size:15px}
label .wajib{color:var(--merah)}
.petunjuk{font-size:13px;color:var(--redup);margin-top:3px}
input[type=text],input[type=email],input[type=date],input[type=tel],input[type=password],input[type=file],select,textarea{width:100%;padding:11px 12px;border:1px solid #b9c1ce;border-radius:8px;font:inherit;background:#fff;color:var(--teks)}
input:focus,select:focus,textarea:focus{outline:2px solid #93b4ff;border-color:var(--biru)}
textarea{min-height:84px;resize:vertical}
.salah input,.salah select,.salah textarea{border-color:var(--merah)}
.pesan-salah{color:var(--merah);font-size:14px;margin-top:4px}
.centang{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin-top:18px}
.centang input{margin-top:5px;width:18px;height:18px;flex:none}
.ocr-status{margin-top:8px;padding:10px 12px;border-radius:8px;font-size:14px;border:1px solid var(--garis);background:#f0f3f8;color:var(--teks)}
.ocr-status[hidden]{display:none}
.ocr-status.proses{background:var(--biru-muda);border-color:#c5d6ff;color:var(--biru-tua)}
.ocr-status.selesai{background:var(--hijau-muda);border-color:#b7e3c7;color:var(--hijau)}
.ocr-status.gagal{background:var(--kuning-muda);border-color:#f0d58a;color:var(--kuning)}
input.otomatis,textarea.otomatis{background:#fffbe6;border-color:#e0c66a}
.catatan-otomatis{color:var(--kuning)}
.kolom-sandi{position:relative}
.kolom-sandi input{padding-right:48px}
.mata{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;color:var(--redup);cursor:pointer;padding:0}
.mata:hover{background:#eef1f6;color:var(--teks)}
.mata:focus-visible{outline:2px solid #93b4ff}
.mata[aria-pressed="true"]{color:var(--biru)}
.tombol{display:inline-block;background:var(--biru);color:#fff;border:0;border-radius:8px;padding:12px 20px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.tombol:hover{background:var(--biru-tua)}
.tombol.penuh{width:100%;margin-top:20px}
.tombol.abu{background:#fff;color:var(--teks);border:1px solid #b9c1ce}
.tombol.abu:hover{background:#f0f2f6}
.tombol.kecil{padding:7px 12px;font-size:14px}
.tombol.hijau{background:var(--hijau)}
.perangkap{position:absolute;left:-9999px;height:0;overflow:hidden}
.kode{font-size:30px;font-weight:700;letter-spacing:1px;background:var(--biru-muda);border-radius:10px;padding:14px;text-align:center;margin:14px 0;user-select:all}
.langkah{display:flex;gap:6px;margin:18px 0;padding:0;list-style:none}
.langkah li{flex:1;text-align:center;font-size:13px;padding:8px 4px;border-radius:8px;background:#eceff4;color:var(--redup)}
.langkah li.sudah{background:var(--hijau-muda);color:var(--hijau);font-weight:600}
.langkah li.kini{background:var(--biru);color:#fff;font-weight:600}
.kaki{max-width:680px;margin:0 auto;padding:0 16px 32px;color:var(--redup);font-size:13px;text-align:center}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 8px;border-bottom:1px solid var(--garis);text-align:left;vertical-align:top}
th{background:#f0f3f8;font-weight:600;white-space:nowrap}
.gulir{overflow-x:auto}
.lencana{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.l-baru{background:var(--biru-muda);color:var(--biru-tua)}
.l-diperiksa,.l-diproses{background:var(--kuning-muda);color:var(--kuning)}
.l-selesai,.l-ok{background:var(--hijau-muda);color:var(--hijau)}
.l-ditolak,.l-telat{background:var(--merah-muda);color:var(--merah)}
.l-netral{background:#eceff4;color:var(--redup)}
.tab{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tab a{padding:7px 13px;border-radius:99px;background:#fff;border:1px solid var(--garis);text-decoration:none;color:var(--teks);font-size:14px}
.tab a.aktif{background:var(--biru);color:#fff;border-color:var(--biru)}
.saring{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;margin-bottom:14px}
.saring label{margin:0 0 3px;font-size:13px}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.dua{grid-template-columns:1fr}}
.dua-lebar{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);align-items:start}
@media(max-width:1100px){.dua-lebar{grid-template-columns:1fr}}
.dua-lebar td,.dua-lebar th{vertical-align:top}.dua-lebar td:last-child{white-space:nowrap}.dua-lebar td:nth-child(2){word-break:break-all}
dl{margin:0}dt{font-size:13px;color:var(--redup);margin-top:10px}dd{margin:0;font-weight:500;word-break:break-word}
.lampiran img{max-width:100%;border:1px solid var(--garis);border-radius:8px}
.petak{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.petak .kartu{text-align:center;margin:0}
.petak img{width:160px;height:160px}
pre.salin{background:#f0f3f8;border-radius:8px;padding:12px;white-space:pre-wrap;font:14px/1.5 inherit;margin:8px 0}
.halaman{margin-top:14px}.halaman nav svg{width:16px;height:16px}
.pratinjau{margin-top:10px}
.pratinjau-isi{display:flex;gap:14px;align-items:flex-start;background:var(--kartu);border:1px solid var(--garis);border-radius:10px;padding:10px}
.pratinjau-gambar{width:120px;height:90px;object-fit:contain;background:#f0f3f8;border:1px solid var(--garis);border-radius:6px;flex:none}
.pratinjau-pdf{width:70px;height:90px;display:flex;align-items:center;justify-content:center;background:#fdecec;color:var(--merah);font-weight:700;border:1px solid #f3c3c3;border-radius:6px;flex:none}
.pratinjau-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.pratinjau-info strong{word-break:break-all;font-size:14px}
.pratinjau-galat{font-size:13px;color:var(--merah);font-weight:600}
.pratinjau-bungkus{position:relative;flex:none}
.pratinjau-mata{position:absolute;right:6px;bottom:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(27,36,48,.82);color:#fff;border:0;border-radius:50%;cursor:pointer;padding:0}
.pratinjau-mata:hover,.pratinjau-mata:focus-visible{background:var(--biru,#1d4ed8);outline:2px solid #fff;outline-offset:1px}
.zoom-buka{overflow:hidden}
.zoom-lapis{position:fixed;inset:0;z-index:1000;background:rgba(10,14,20,.88);display:flex;align-items:center;justify-content:center;overflow:auto;padding:48px 16px 56px;cursor:zoom-out}
.zoom-gambar{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:6px;cursor:zoom-in;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.zoom-lapis.asli{align-items:flex-start;justify-content:flex-start}
.zoom-lapis.asli .zoom-gambar{max-width:none;max-height:none;cursor:zoom-out}
.zoom-tutup{position:fixed;top:12px;right:12px;background:#fff;color:#1b2430;border:0;border-radius:8px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;z-index:1001}
.zoom-petunjuk{position:fixed;left:0;right:0;bottom:10px;text-align:center;color:#d6dce6;font-size:13px;pointer-events:none}
.pratinjau-hapus{align-self:flex-start;margin-top:6px;background:#fff;color:var(--merah);border:1px solid #f0b4b4;border-radius:8px;padding:6px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.pratinjau-hapus:hover,.pratinjau-hapus:focus-visible{background:#fdecec}
.outlet-tetap{background:#eef3ff;border:1px solid #c9d7fb;border-radius:10px;padding:12px 14px;margin-bottom:16px}
.outlet-tetap strong{display:block;font-size:18px;color:var(--biru-tua,#1e3a8a)}
.batang-baris{display:flex;align-items:center;gap:8px;margin:2px 0}
.batang{height:12px;border-radius:4px;background:var(--biru);min-width:4px}
.batang.hijau{background:var(--hijau)}
a.kartu:hover{border-color:var(--biru)}

/* Laporan bergaya kertas Accurate (21 Okt) */
.laporan-alat{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.laporan-ikon{display:flex;gap:6px;flex-wrap:wrap}
.laporan-param summary{cursor:pointer}
.kertas{background:#fff;border:1px solid #cfd6e2;border-radius:6px;padding:18px 20px;margin-top:10px;overflow:auto}
.kertas-kop{text-align:center;font-family:Consolas,"Courier New",monospace;font-size:14px}
.kertas-judul{text-align:center;font-size:24px;font-weight:700;color:#8b1538;margin-top:2px}
.kertas-sub{text-align:center;font-family:Consolas,"Courier New",monospace;font-size:13px;margin-bottom:6px}
.kertas-cat{text-align:right;font-style:italic;font-size:11px;color:#444;margin-bottom:8px}
.kertas-tabel{border-collapse:collapse;width:100%;font-size:13px}
.kertas-tabel th{background:#cfe2f7;border:1px solid #222;padding:4px 8px;text-align:left;font-weight:700}
.kertas-tabel td{border:1px solid #222;padding:3px 8px}
.kertas-tabel .angka{text-align:right;white-space:nowrap}
.kertas-tabel tr.t-s td{background:#eaf2fc;font-weight:700}
.kertas-tabel tr.t-g td{background:#cfe2f7;font-weight:700}
@media print{header.atas,.laporan-alat,.laporan-param,.petunjuk{display:none!important}.kertas{border:0;padding:0}}

/* Kerangka bergaya Accurate POS: bilah ikon kiri, panel kartu, toast (21 Okt) */
:root{--teal:#0f7c80;--teal-tua:#0a5c5f}
.acc{display:inline-block;font-style:normal;font-weight:700;font-size:10px;line-height:1;background:#0f7c80;color:#fff;border-radius:3px;padding:2px 4px;vertical-align:middle;margin-left:3px}
.acc.kecil-acc{position:absolute;top:3px;right:3px;margin:0;font-size:8px;padding:1px 3px}
.legenda{font-size:12px;color:var(--redup);margin:14px 4px 0}
body.dengan-bilah{padding-left:64px}
.atas{margin-left:-64px}
.atas .isi{max-width:none;padding-left:80px}
.atas-kiri{display:flex;align-items:center;gap:12px}
.atas-kanan{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ikon-atas{position:relative;display:inline-flex;align-items:center;background:none;border:0;color:#fff;cursor:pointer;padding:6px 8px;margin-left:4px;text-decoration:none;font-size:14px}
.ikon-atas svg{width:22px;height:22px}
.lencana-hitung{position:absolute;top:0;right:0;background:#e11d48;color:#fff;border-radius:99px;font-size:11px;font-weight:700;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.bilah-buka{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
.bilah{position:fixed;left:0;top:0;bottom:0;width:64px;background:linear-gradient(180deg,var(--teal) 0%,var(--teal-tua) 100%);z-index:40;display:flex;flex-direction:column;align-items:center;padding-top:70px;gap:4px}
.bilah-ikon{position:relative;width:50px;height:46px;background:none;border:0;border-radius:10px;color:#e6fffd;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bilah-ikon:hover{background:rgba(255,255,255,.14)}
.bilah-ikon.aktif{background:#e11d6a;color:#fff}
.bilah-nama{position:absolute;left:58px;top:50%;transform:translateY(-50%);background:#fff7cf;color:#222;border:1px solid #d6c76b;border-radius:4px;padding:3px 8px;font-size:13px;white-space:nowrap;display:none;z-index:5}
.bilah-ikon:hover .bilah-nama{display:block}
.panel-menu{position:fixed;left:64px;top:62px;width:min(640px,calc(100vw - 80px));max-height:calc(100vh - 80px);overflow:auto;background:#fff;border:1px solid #cfd6e2;border-top:3px solid #e11d6a;border-radius:0 0 10px 10px;box-shadow:0 12px 32px rgba(0,0,0,.25);z-index:50;padding:14px 16px 12px}
.panel-menu h2{font-size:19px;color:#1b2430;margin:0 0 8px;border-bottom:2px solid #e11d6a;padding-bottom:6px}
.panel-tab{display:flex;gap:4px;margin-bottom:10px}
.panel-tab-btn{background:#f1f3f7;border:0;border-radius:8px 8px 0 0;padding:8px 16px;font:inherit;font-weight:600;cursor:pointer;color:#444}
.panel-tab-btn.aktif{background:#fff;color:#e11d6a;border-bottom:3px solid #e11d6a}
.panel-kartu{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.kartu-menu{display:flex;flex-direction:column;gap:3px;border:1px solid #bcd3f5;background:#e9f2ff;border-radius:10px;padding:12px;text-decoration:none;color:#123;min-height:76px}
.kartu-menu:hover{border-color:var(--teal);background:#dcefff}
.kartu-menu strong{font-size:15px}
.kartu-menu span{font-size:12px;color:#556}
.cari-menu{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding-top:80px}
.cari-menu[hidden]{display:none}
.cari-kotak{background:#fff;border-radius:10px;padding:18px;width:min(560px,92vw);max-height:80vh;overflow:auto}
.cari-kotak input{border:2px solid var(--biru);border-radius:99px;padding:10px 16px}
#cari-hasil{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.toast{position:fixed;top:70px;right:16px;z-index:70;background:#1d7fd1;color:#fff;border-radius:6px;padding:12px 16px;max-width:360px;box-shadow:0 6px 20px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:2px;cursor:pointer;transition:opacity .5s}
.toast strong{font-size:16px}.toast span{font-size:14px}
.toast.hilang{opacity:0;pointer-events:none}
@media(max-width:820px){
  body.dengan-bilah{padding-left:0}
  .atas{margin-left:0}.atas .isi{padding-left:16px}
  .bilah-buka{display:inline-block}
  .bilah{display:none;width:200px;padding-top:62px;align-items:stretch;padding-left:8px;padding-right:8px}
  .bilah.terbuka{display:flex}
  .bilah-ikon{width:100%;justify-content:flex-start;gap:10px;padding:0 10px}
  .bilah-nama{position:static;display:inline;background:none;border:0;color:inherit;transform:none;padding:0;font-size:14px}
  .panel-menu{left:8px;right:8px;width:auto;top:60px}
}
@media print{body.dengan-bilah{padding-left:0}.bilah,.panel-menu,.toast{display:none!important}}

/* Modul Absensi (layar HRD di tata letak utama) */
.absen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.absen-angka{font-size:26px;font-weight:700}
.absen-baris-form{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.absen-baris-form>div{flex:1;min-width:150px}

/* Kolom sandi dengan tombol mata (public/js/mata-sandi.js) */
.mata-sandi{position:relative;display:block}
.mata-sandi>input{padding-right:46px;width:100%}
.mata-tombol{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px;cursor:pointer;color:#64748b;line-height:0;width:auto;margin:0;box-shadow:none}
.mata-tombol:hover{color:#1d4ed8}