/* Tampilan kasir Warlok. Token dan komponen diangkat dari mockup docs/mockup/kasir.html,
 * diubah dari kanvas tetap 1280×800 menjadi tata letak yang mengikuti layar: tablet mendatar lebih dulu,
 * ponsel tegak di bawah 700 px. Cetak 58 mm ada di bagian akhir.
 */

/* ===== Token ===== */
.app {
  --bg: #F4F2EC; --surface: #FFFFFF; --panel: #ECE8DF; --line: #D6D0C4; --ink: #18202A; --ink2: #4E5764;
  --nila: #2A3B8F; --on-nila: #FFFFFF; --nila-teks: #2A3B8F; --sel-bg: #18202A; --sel-fg: #FFFFFF;
  --ok: #1A6B43; --ok-bg: #E3F2E9; --tunggu: #8A5A00; --tunggu-bg: #FDF0D2; --off: #3F4A56; --off-bg: #E4E7EB;
  --galat: #B3261E; --galat-bg: #FCE4E2; --bahaya: #B3261E; --on-bahaya: #FFFFFF;
  --tirai: rgba(24, 32, 42, .45); --tirai-kuat: rgba(17, 21, 27, .6); --bayang: rgba(24, 32, 42, .14);
  --kam-bg: #11151B; --kam-fg: #ECEFF3; --kam-ok: #7BD4A0; --kam-ok-bg: #15301F; --kam-tunggu: #F0C05A; --kam-tombol: #1A2028;
  --kertas: #FFFFFF; --tinta: #18202A; --tinta2: #4E5764; --meja-kertas: #D9D5CC;
}
.app[data-mode="redup"] {
  --bg: #11151B; --surface: #1A2028; --panel: #212833; --line: #333C48; --ink: #ECEFF3; --ink2: #A7B0BC;
  --nila: #4C5FCB; --on-nila: #FFFFFF; --nila-teks: #9AA8F0; --sel-bg: #ECEFF3; --sel-fg: #11151B;
  --ok: #7BD4A0; --ok-bg: #15301F; --tunggu: #F0C05A; --tunggu-bg: #33270B; --off: #AEB8C4; --off-bg: #262D36;
  --galat: #FF8F85; --galat-bg: #3A1714; --bahaya: #C23A30; --on-bahaya: #FFFFFF;
  --tirai: rgba(0, 0, 0, .5); --tirai-kuat: rgba(0, 0, 0, .65); --bayang: rgba(0, 0, 0, .4); --meja-kertas: #0B0E12;
}

/* ===== Dasar ===== */
html, body { margin: 0; height: 100%; background: #F4F2EC; }
/* Mode malam juga untuk latar halaman, gulir, dan isian bawaan peramban (data-mode di <html> diatur app.js) */
html[data-mode="redup"], html[data-mode="redup"] body { background: #11151B; color-scheme: dark; }
#app { min-height: 100%; }
.app { min-height: 100vh; font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--ink); background: var(--bg); font-variant-numeric: tabular-nums; line-height: 1.3; -webkit-font-smoothing: antialiased; text-align: left; }
:where(.app) *, :where(.app) *::before, :where(.app) *::after { box-sizing: border-box; }
:where(.app) :where(h1, h2, p, ul, ol, dl, dd) { margin: 0; }
:where(.app) :where(h1, h2) { font-size: inherit; }
:where(.app) :where(ul, ol) { padding: 0; list-style: none; }
:where(.app) :where(button, input, output, select) { font: inherit; color: inherit; }
:where(.app) button { cursor: pointer; }
:where(.app) a { color: inherit; text-decoration: none; }
:where(.app) svg { flex: none; }
.app :focus-visible { outline: 3px solid var(--nila-teks); outline-offset: 2px; }
.app ::placeholder { color: var(--ink2); opacity: 1; }

/* ===== Struktur layar ===== */
.layar { width: 100%; height: 100vh; height: 100dvh; position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); --atas: 56px; --tinggi: calc(100dvh - var(--atas)); }
.layar.ada-banner { --atas: 100px; }
.isi { display: flex; height: var(--tinggi); flex: none; min-height: 0; }
.kiri { flex: 1 1 0; min-width: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; }
.kanan { width: clamp(360px, 40%, 520px); flex: none; padding: 24px 20px 16px; display: flex; flex-direction: column; gap: 16px; background: var(--panel); border-left: 1px solid var(--line); min-height: 0; overflow-y: auto; }
.penuh-layar { height: var(--tinggi); flex: none; padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.penuh-layar.sempit { padding: 48px clamp(24px, 10vw, 160px); gap: 24px; }
.baris-z4 { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.banner { height: 44px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--line); }
.banner .tombol { height: 36px; flex: none; }

/* Bilah atas */
.bilah { height: 56px; flex: none; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.bilah-kiri, .bilah-kanan { min-width: 0; }
.jam-bilah { padding: 0 8px; }
.operator { height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 8px; border: 0; border-radius: 24px; background: var(--panel); font-size: 15px; font-weight: 600; }
.ava { width: 32px; height: 32px; border-radius: 16px; background: var(--sel-bg); color: var(--sel-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex: none; }
.ava.besar { width: 48px; height: 48px; border-radius: 24px; font-size: 20px; }
.ava.lembut { background: var(--panel); color: var(--ink); }
.dipilih .ava { background: var(--sel-fg); color: var(--sel-bg); }
.hitung { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--sel-bg); color: var(--sel-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.status { height: 48px; padding: 0 14px; border: 0; border-radius: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.status.polos { height: 40px; background: transparent; color: var(--ink2); font-weight: 500; padding: 0 12px; }
.menu-shift { display: flex; align-items: center; gap: 6px; padding-left: 8px; margin-left: 4px; border-left: 1px solid var(--line); }
.menu-shift button { height: 48px; display: inline-flex; align-items: center; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-size: 15px; font-weight: 600; }

/* Tombol */
.tombol { height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.tombol.h56 { height: 56px; font-size: 16px; padding: 0 18px; border-radius: 12px; }
.tombol.h64 { height: 64px; font-size: 17px; border-radius: 12px; }
.tombol.kotak56 { width: 56px; height: 56px; border-radius: 12px; font-size: 24px; padding: 0; }
.tombol.kotak48 { width: 48px; height: 48px; border-radius: 10px; font-size: 22px; padding: 0; }
.tombol.kotak-112 { width: 112px; height: 72px; flex-direction: column; gap: 4px; border-radius: 12px; white-space: normal; text-align: center; padding: 0 6px; }
.tombol.penuh { width: 100%; justify-content: flex-start; }
.tombol.garis-bahaya { border-color: var(--galat); color: var(--galat); }
.tombol.kecil { height: 34px; padding: 0 10px; font-size: 13px; border-radius: 8px; gap: 6px; }
.tombol-kecil { height: 40px !important; }
.dipilih { background: var(--sel-bg) !important; color: var(--sel-fg) !important; border: 2px solid var(--sel-bg) !important; }
.mati { background: transparent !important; border: 1px dashed var(--ink2) !important; color: var(--ink2) !important; cursor: not-allowed !important; }
.z4 { width: 240px; height: 72px; flex: none; border: 0; border-radius: 12px; background: var(--nila); color: var(--on-nila); font-size: 20px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.z4.bahaya { background: var(--bahaya); color: var(--on-bahaya); }
.z4.garis { background: transparent; border: 2px solid var(--nila-teks); color: var(--nila-teks); }
.z4.dua { flex-direction: column; gap: 2px; }
.z4.pojok { position: absolute; right: 20px; bottom: 16px; }
.tutup { width: 48px; height: 48px; flex: none; border: 0; border-radius: 24px; background: var(--panel); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.kembali { height: 48px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 8px; border-radius: 8px; border: 1px solid var(--line); background: transparent; font-size: 16px; font-weight: 600; flex: none; }
.tautan { border: 0; background: transparent; padding: 0; text-decoration: underline; color: var(--nila-teks); font-weight: 600; cursor: pointer; }

/* Kartu, kotak pesan, chip */
.kartu { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.kartu-krem { background: var(--bg); border-radius: 12px; }
.rinci { display: flex; flex-direction: column; gap: 6px; }
.rinci > div { display: flex; justify-content: space-between; gap: 12px; }
.kotak { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.kotak.garis { border: 1px dashed var(--ink2); background: transparent; color: var(--ink); font-weight: 400; }
.chip { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 14px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.chip.besar { height: 36px; padding: 0 12px; border-radius: 18px; font-size: 15px; }
.chip.netral { border: 1px solid var(--ink2); background: var(--surface); color: var(--ink); }
.chip.putih { background: var(--surface); color: var(--ink2); }
.poin-titik { flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 4px; background: var(--ink); }

/* Katalog */
.katalog { flex: 1 1 0; min-width: 0; height: var(--tinggi); padding: 16px; display: flex; flex-direction: column; gap: 16px; position: relative; background: var(--bg); overflow-y: auto; }
.kategori { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.kategori .tombol { height: 56px; border-radius: 12px; font-size: 16px; padding: 0 18px; flex: none; }
.cari { flex: none; width: 240px; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink2); }
.cari.lebar { width: auto; flex: 1; min-width: 200px; height: 48px; border-radius: 10px; }
.cari input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; color: var(--ink); outline: none; }
.grid-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding-bottom: 32px; }
.tile { height: 112px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; text-align: left; position: relative; }
.tile.ada { border: 2px solid var(--ink); }
.tile .nama { font-size: 18px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile.ada .nama { padding-right: 32px; }
.tile.kecil { height: 96px; padding: 12px; }
.tile.kecil .nama { font-size: 17px; }
.lencana { position: absolute; top: 10px; right: 10px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: var(--sel-bg); color: var(--sel-fg); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.kosong-cari { padding: 8px 4px; }
.snackbar { position: absolute; left: 16px; bottom: 36px; z-index: 35; min-height: 56px; max-width: min(700px, calc(100% - 32px)); display: flex; align-items: center; gap: 20px; padding: 0 4px 0 18px; border-radius: 12px; background: var(--sel-bg); color: var(--sel-fg); font-size: 16px; box-shadow: 0 6px 18px var(--bayang); }
.layar:has(.pisah) .snackbar, .layar:has(.status-pisah) .snackbar { bottom: 104px; }
.snackbar button { height: 48px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-weight: 700; text-decoration: underline; flex: none; }

/* Panel bill */
.panel-bill { width: clamp(380px, 40%, 520px); height: var(--tinggi); flex: none; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); }
.panel-kosong-isi { flex: 1; justify-content: center; padding: 32px 28px; }
.kepala-bill { padding: 14px 20px 10px; }
.chip-bill { padding: 0 20px 10px; }
.info-bayar { margin: 0 20px 12px; }
.alat { display: flex; gap: 6px; padding: 0 20px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.alat .tombol { padding: 0 10px; }
.alasan-kunci { margin: 10px 20px 0; padding: 10px 14px !important; }
.tombol-rinci { margin: 10px 20px 0; border-radius: 10px; }
.daftar-pembayar { margin-top: 8px; padding: 0 20px; }
.daftar-bill { flex: 1; min-height: 0; overflow-y: auto; }
.baris-bill { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.baris-bill .utama { width: 100%; display: flex; gap: 12px; font-size: 18px; font-weight: 600; }
.baris-bill .sub { width: 100%; display: flex; gap: 12px; font-size: 15px; color: var(--ink2); }
.tanda-dapur { margin-left: 8px; padding: 2px 6px; border-radius: 6px; background: var(--surface); color: var(--ink2); font-size: 12px; font-weight: 700; vertical-align: 2px; }
.qty { width: 20px; flex: none; } .nm { flex: 1; min-width: 0; }
.kosong-bill { padding: 20px; }
.total-bill { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px 0; border-top: 1px solid var(--line); }
.total-besar { padding-top: 6px; }
.aksi-bill { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 16px; }
.pembayar { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pembayar .chip { width: 72px; justify-content: center; }

/* Keypad dan isian */
.keypad { width: 280px; flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.keypad button { height: 72px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 28px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.keypad.pendek button { height: 64px; }
.keypad .k000 { font-size: 24px; } .keypad .khapus { background: var(--panel); } .keypad .kosong { visibility: hidden; }
.isian-pin { height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--surface); font-size: 15px; color: var(--ink2); }
.isian-pin.salah { border-color: var(--galat); }
.isian-otp { height: 64px; font-size: 30px; letter-spacing: .3em; color: var(--ink); font-weight: 700; }
.titik { width: 16px; height: 16px; border-radius: 8px; background: var(--ink); flex: none; }
.isian-uang { display: flex; flex-direction: column; gap: 2px; padding: 10px 18px; border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); }
.isian-uang.waspada { border-color: var(--tunggu); }
.isian-uang > span { font-size: 15px; font-weight: 600; color: var(--ink2); }
.nilai-uang { display: block; min-height: 48px; font-size: 40px; font-weight: 700; line-height: 48px; color: var(--ink); font-variant-numeric: tabular-nums; }
.nilai-uang .redam { font-size: 20px; }
.isian { width: 100%; height: 56px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 16px; color: var(--ink); }
.isian.kecil { height: 34px; width: auto; font-size: 13px; padding: 0 8px; border-radius: 8px; }
.isian-kecil { height: 40px !important; width: 84px !important; padding: 0 8px !important; border-radius: 8px !important; }
.lebar-auto { width: auto; }
.isian-kode { width: 100%; height: 72px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); color: var(--ink); font: 600 34px "IBM Plex Mono", Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; }
.angka-qty { min-width: 40px; } .lebar72 { width: 72px; }

/* Lembar, panel PIN, modal */
.tirai-kiri, .tirai-pin, .tirai-penuh { position: absolute; left: 0; right: 0; top: var(--atas); height: var(--tinggi); border: 0; z-index: 20; }
.tirai-kiri { background: var(--tirai); }
.tirai-pin, .tirai-penuh { background: var(--tirai-kuat); }
.tirai-bening { position: absolute; inset: 0; background: transparent; z-index: 20; }
.lembar { position: absolute; right: 0; top: var(--atas); width: min(760px, 100%); height: var(--tinggi); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 24px var(--bayang); z-index: 21; }
.lembar.pin { width: min(640px, 100%); z-index: 23; }
.tirai-pin { z-index: 22; }
.lembar-kepala { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); flex: none; }
.lembar-isi { flex: 1; min-height: 0; padding: 20px 24px; display: flex; gap: 32px; overflow-y: auto; }
.lembar-isi.col { flex-direction: column; gap: 24px; }
.lembar-kaki { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px 20px 16px 24px; border-top: 1px solid var(--line); flex: none; }
.pita { height: 64px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; }
.pita.gelap { background: var(--sel-bg); color: var(--sel-fg); }
.pita.terang { background: var(--panel); border-bottom: 1px solid var(--line); }
.isi-pin { overflow-y: auto; min-height: 0; }
.grup-wajib { padding: 16px; border: 2px dashed var(--tunggu); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; }
.grup-wajib.terisi { border: 1px solid var(--line); }
.grup-wajib.sorot { border-color: var(--galat); background: var(--galat-bg); }
.modal { position: absolute; left: 50%; transform: translateX(-50%); top: 88px; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 104px); overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; border-radius: 16px; background: var(--surface); box-shadow: 0 16px 40px var(--bayang); z-index: 24; }
.kamera { height: 288px; flex: none; position: relative; overflow: hidden; border-radius: 12px; background: var(--kam-bg); color: var(--kam-fg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 0 40px; }
.video-kamera { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sudut { position: absolute; width: 40px; height: 40px; border: 0 solid var(--kam-fg); z-index: 1; }
.sudut.a { left: calc(50% - 120px); top: 40px; border-left-width: 4px; border-top-width: 4px; border-radius: 6px 0 0 0; }
.sudut.b { right: calc(50% - 120px); top: 40px; border-right-width: 4px; border-top-width: 4px; border-radius: 0 6px 0 0; }
.sudut.c { left: calc(50% - 120px); bottom: 40px; border-left-width: 4px; border-bottom-width: 4px; border-radius: 0 0 0 6px; }
.sudut.d { right: calc(50% - 120px); bottom: 40px; border-right-width: 4px; border-bottom-width: 4px; border-radius: 0 0 6px 0; }
.centang-besar { width: 88px; height: 88px; border-radius: 44px; background: var(--kam-ok-bg); color: var(--kam-ok); display: flex; align-items: center; justify-content: center; }
.centang-besar.tolak { background: var(--tunggu-bg); color: var(--tunggu); }
.teks-kam-tunggu { color: var(--kam-tunggu); }
.garis-atas { padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.menu-pop { position: absolute; right: 20px; top: 166px; width: 320px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px var(--bayang); display: flex; flex-direction: column; z-index: 25; }
.menu-pop button { width: 100%; min-height: 56px; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; font-size: 16px; font-weight: 600; }
.menu-pop button[aria-disabled="true"] { color: var(--ink2); cursor: not-allowed; }
.menu-pop button span { font-size: 14px; font-weight: 400; color: var(--ink2); }
.pratinjau { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--atas) + 16px); width: min(480px, calc(100% - 32px)); height: calc(var(--tinggi) - 32px); display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); box-shadow: 0 16px 40px var(--bayang); overflow: hidden; z-index: 26; }
.pratinjau-kepala { padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.kertas-gulir { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 0; background: var(--meja-kertas); display: flex; justify-content: center; align-items: flex-start; }
.kertas-gulir .struk { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }

/* Kartu khusus */
.staf { height: 96px; padding: 0 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); display: flex; align-items: center; gap: 14px; text-align: left; }
.grid-staf { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kartu-bill { min-height: 172px; padding: 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); align-items: stretch; }
.grid-bill { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-content: start; padding-bottom: 96px; }
.kolom-pisah { display: flex; flex-direction: column; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; min-height: 0; }
.kolom-pisah.aktif { border: 2px solid var(--ink); }
.kolom-pisah > header { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.kolom-pisah-wadah { min-height: 0; }
.baris-pisah { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.status-pisah { min-height: 72px; flex: none; }
.dorong-kanan { margin-left: auto; }
.bulat44 { width: 44px; height: 44px; border-radius: 22px; background: var(--panel); display: flex; align-items: center; justify-content: center; flex: none; }
.bulat40 { width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex: none; }
.bulat44.ok-isi, .bulat40.ok-isi { background: var(--ok-bg); color: var(--ok); }
.kaki-kolom { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px; background: var(--bg); font-size: 16px; }
.total-kolom { padding-top: 4px; }
.qr-tempat { width: 340px; height: 340px; flex: none; border: 2px dashed var(--ink2); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink2); text-align: center; padding: 24px; }
.qr-tempat.qr-asli { border: 1px solid var(--line); background: #FFFFFF; color: #4E5764; padding: 20px; }
.qr-tempat.qr-asli .qr-svg { width: 260px; }
.qr-tempat.garis-padat { border-style: solid; }
.qr-svg { display: inline-block; line-height: 0; }
.qr-svg svg { width: 100%; height: auto; display: block; }
.qris-penuh { position: fixed; inset: 0; z-index: 60; background: #FFFFFF; color: #11151B; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: pointer; }
.qris-penuh .qr-svg { width: min(62vh, 80vw); }
.langkah { width: 28px; height: 28px; border-radius: 14px; background: var(--sel-bg); color: var(--sel-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex: none; }
.baris-refund { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.baris-refund.dipilih-baris { background: var(--bg); box-shadow: inset 4px 0 0 var(--ink); }
.kartu-refund { overflow: hidden; flex: none; }
.kepala-refund { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.daftar-refund { max-height: 320px; }
.angka-refund { min-width: 56px; }
.kartu-metode { padding: 12px 14px; border: 0; }
.pilihan-awal { min-height: 132px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); display: flex; align-items: center; gap: 18px; text-align: left; }
.pilihan-awal.utama { border: 2px solid var(--ink); }
.ikon-bulat { width: 56px; height: 56px; border-radius: 28px; background: var(--panel); display: flex; align-items: center; justify-content: center; flex: none; }
.daftar-antre li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.kartu-kembali { padding: 16px 18px; }
.kartu-kode { padding: 12px 14px; border: 1px solid var(--line); }
.kartu-cocok { overflow: hidden; flex: none; }
.rinci-cocok { padding: 14px 18px; gap: 8px; }
.rinci-cocok.latar { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--bg); }
.baris-selisih { padding: 14px 18px; border-top: 1px solid var(--line); }
.kanan-tutup { padding-top: 20px; }
.rinci-rekap { gap: 5px; }
.pecahan label { padding: 4px 0; }
.tab-metode { display: grid; }
.nominal { justify-content: flex-start; padding: 0 18px; }
.preset { padding: 0 12px; white-space: normal; text-align: left; gap: 8px; }
.lunas { padding-top: 20px; }
.diskon-ada { padding: 6px 6px 6px 12px; }
.laci-bawah { padding-top: 14px; border-top: 1px solid var(--line); }
.kotak-bagian { padding: 20px 24px; }

/* Daftar transaksi */
.daftar-tr { border-top: 1px solid var(--line); padding-bottom: 32px; }
.baris-tr { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 10px 4px 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
button.baris-tr:active { background: var(--panel); }
.jam-tr { width: 48px; flex: none; }
.judul-tr { overflow-wrap: anywhere; }
.nilai-tr { white-space: nowrap; }
.tr-batal .nilai-tr { text-decoration: line-through; color: var(--ink2); }
.panah-tr { width: 18px; flex: none; color: var(--ink2); display: flex; }
.pilihan-tr { height: auto; min-height: 56px; padding: 8px 14px; border-radius: 12px; text-align: left; }

/* Kertas: struk, tiket dapur, slip refund, rekap shift */
.struk { width: 360px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--kertas); color: var(--tinta); font-family: "IBM Plex Mono", Consolas, "Courier New", monospace; font-size: 15px; }
.struk pre { margin: 0; font: inherit; line-height: 20px; white-space: pre; }
.qr-klaim { width: 150px; height: 150px; flex: none; display: flex; align-items: center; justify-content: center; }
.qr-klaim svg { width: 100%; height: 100%; }

/* Ponsel */
.ponsel { width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); position: relative; overflow: hidden; --atas: 0px; --tinggi: 100dvh; }
.ponsel-atas { height: 56px; flex: none; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ponsel-atas .status { height: 40px; padding: 0 12px; }
.banner-ponsel { height: auto; padding: 8px 12px; }
.tab-ponsel { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface); border-bottom: 1px solid var(--line); }
.tab-ponsel button { height: 52px; border: 0; background: transparent; font-size: 16px; font-weight: 600; color: var(--ink); }
.tab-ponsel button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--ink); }
.ponsel-isi { flex: 1; min-height: 0; overflow-y: auto; }
.ponsel .katalog { height: auto; padding: 12px; overflow: visible; }
.ponsel .kategori .tombol { height: 48px; border-radius: 10px; }
.ponsel .grid-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bill-ponsel { min-height: 100%; background: var(--panel); }
.kepala-ponsel { padding: 12px 16px; }
.bill-ponsel .alat { padding: 0 16px 12px; }
.bill-ponsel .daftar-bill { flex: none; overflow: visible; }
.bill-ponsel .baris-bill { padding: 10px 16px; }
.total-ponsel { padding: 12px 16px; }
.aksi-ponsel { padding: 0 16px 16px; }
.ponsel-bawah { flex: none; height: 88px; padding: 12px 12px 16px; display: flex; align-items: center; gap: 10px; background: var(--surface); border-top: 1px solid var(--line); }
.ringkas-ponsel { height: 56px; border: 0; background: transparent; justify-content: center; padding: 0 4px; color: var(--ink); }
.bayar-ponsel { width: 168px; height: 56px; font-size: 19px; }
.menu-ponsel { top: 60px; right: 12px; width: min(320px, calc(100% - 24px)); }
.ponsel .snackbar { left: 12px; right: 12px; bottom: 100px; max-width: none; }

/* Alat uji (hanya data contoh) */
.chip-contoh { position: fixed; left: 6px; bottom: 6px; z-index: 40; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid currentColor; border-radius: 12px; background: var(--tunggu-bg); color: var(--tunggu); font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .9; }
.chip-contoh.beda { background: var(--galat-bg); color: var(--galat); }
.tirai-alat { position: fixed; z-index: 44; }
.panel-alat { position: fixed; left: 6px; bottom: 36px; z-index: 45; width: min(440px, calc(100vw - 12px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 16px 40px var(--bayang); }
.panel-alat section { padding-top: 10px; border-top: 1px solid var(--line); }
.panel-alat .tutup { width: 40px; height: 40px; }
.kotak-token .qr-svg { width: 168px; padding: 8px; background: #FFFFFF; border-radius: 8px; }
.token { word-break: break-all; font-family: "IBM Plex Mono", Consolas, monospace; }
.mono { font-family: "IBM Plex Mono", Consolas, monospace; letter-spacing: .1em; }

/* Utilitas: ditulis terakhir supaya mengalahkan bawaan komponen */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; }
.sb { justify-content: space-between; } .je { justify-content: flex-end; } .jc { justify-content: center; }
.ai-s { align-items: flex-start; } .ai-e { align-items: flex-end; } .ai-b { align-items: baseline; } .ai-st { align-items: stretch; } .ai-mulai { align-self: flex-start; }
.wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .none { flex: none; }
.g2 { gap: 2px; } .g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; } .g14 { gap: 14px; }
.g16 { gap: 16px; } .g18 { gap: 18px; } .g20 { gap: 20px; } .g24 { gap: 24px; } .g32 { gap: 32px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.t13 { font-size: 13px; } .t14 { font-size: 14px; } .t15 { font-size: 15px; } .t16 { font-size: 16px; } .t17 { font-size: 17px; } .t18 { font-size: 18px; }
.t19 { font-size: 19px; } .t20 { font-size: 20px; } .t22 { font-size: 22px; } .t26 { font-size: 26px; } .t28 { font-size: 28px; }
.t32 { font-size: 32px; line-height: 1.15; } .t40 { font-size: 40px; line-height: 1.1; } .t64 { font-size: 64px; line-height: 1.1; }
.b4 { font-weight: 400; } .b5 { font-weight: 500; } .b6 { font-weight: 600; } .b7 { font-weight: 700; }
.redam { color: var(--ink2); } .tinta { color: var(--ink); } .lh { line-height: 1.45; } .tengah { text-align: center; } .kanan-teks { text-align: right; }
.mt-auto { margin-top: auto; } .p24 { padding: 24px; } .p32 { padding: 32px; } .pk { padding: 14px 16px; } .w280 { width: 280px; flex: none; } .scroll { overflow-y: auto; min-height: 0; }
.tengah-v { margin: auto 0; } .lebar-penuh { width: 100% !important; } .tanpa-garis { border: 0; } .garis-tinta { border-color: var(--ink) !important; } .garis-galat { border-color: var(--galat) !important; } .c-ok { color: var(--ok); }
.maks600 { max-width: 600px; } .maks640 { max-width: 640px; } .maks720 { max-width: 720px; } .maks760 { max-width: 760px; } .maks820 { max-width: 820px; }
.ok { background: var(--ok-bg); color: var(--ok); } .tunggu { background: var(--tunggu-bg); color: var(--tunggu); }
.off { background: var(--off-bg); color: var(--off); } .galat { background: var(--galat-bg); color: var(--galat); }

/* ===== Layar sempit: tablet tegak dan laptop kecil ===== */
@media (max-width: 1100px) {
  .menu-shift button { padding: 0 8px; }
  .status { padding: 0 10px; }
  .bilah { gap: 8px; }
  .lembar-isi { gap: 20px; }
}
@media (max-width: 900px) {
  .bilah-kiri .tombol:last-child, .status.polos { display: none; }
  .cari { width: 160px; }
}

/* ===== Ponsel tegak ===== */
@media (max-width: 699px) {
  .layar { height: auto; min-height: 100dvh; overflow: visible; --tinggi: auto; }
  .layar.ada-banner { --atas: 56px; }
  .bilah { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 12px; }
  .bilah-kiri, .bilah-kanan { flex-wrap: wrap; }
  .bilah-kiri .tombol, .status.polos, .menu-shift { display: none; }
  .app:has(.ponsel) .chip-contoh { display: none; }
  .banner { height: auto; padding: 8px 12px; flex-wrap: wrap; }
  .isi { flex-direction: column; height: auto; }
  .kiri, .kanan, .katalog, .panel-bill { width: 100%; height: auto; overflow: visible; flex: none; }
  .kanan { border-left: 0; border-top: 1px solid var(--line); }
  .p32, .p24 { padding: 20px 16px; }
  .penuh-layar, .penuh-layar.sempit { height: auto; padding: 20px 16px; }
  .lembar, .lembar.pin { position: fixed; top: 0; width: 100%; height: 100dvh; }
  .tirai-kiri, .tirai-pin, .tirai-penuh { position: fixed; top: 0; height: 100dvh; }
  .lembar-isi { flex-direction: column; gap: 20px; padding: 16px; }
  .lembar-kepala { padding: 12px 16px; }
  .lembar-kaki { padding: 12px 16px; flex-wrap: wrap; }
  .keypad, .w280 { width: 100%; }
  .modal { position: fixed; top: 16px; max-height: calc(100dvh - 32px); padding: 16px; }
  .pratinjau { position: fixed; top: 16px; height: calc(100dvh - 32px); }
  .z4 { width: auto; min-width: 160px; height: 60px; font-size: 18px; padding: 0 16px; }
  .z4.pojok { position: fixed; }
  .baris-z4 { margin-top: 16px; flex-wrap: wrap; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qr-tempat { width: 100%; height: auto; aspect-ratio: 1; }
  .t64 { font-size: 44px; } .t40 { font-size: 32px; } .t32 { font-size: 26px; }
  .kolom-pisah-wadah { grid-template-columns: 1fr; }
  .isi-pin { flex-direction: column; padding: 16px; gap: 16px; }
  .pilihan-awal { min-height: 0; padding: 16px; }
  .kamera { height: 240px; padding: 0 16px; }
  .snackbar { position: fixed; bottom: 36px; }
  .tab-metode { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .tab-metode .tombol { height: 52px; font-size: 15px; padding: 0 6px; white-space: normal; }
  .kartu-bill { min-height: 140px; }
  /* Transaksi di ponsel: ringkasan dan pilihan di atas daftar */
  .isi-tr .kanan { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
  .jam-tr { width: 42px; }
}

/* ===== Cetak 58 mm ===== */
#area-cetak { display: none; }
@media print {
  @page { margin: 0; }
  html, body { background: #FFFFFF !important; height: auto; }
  body > *:not(#area-cetak) { display: none !important; }
  #area-cetak { display: block !important; width: 58mm; }
  #area-cetak .struk { width: 58mm; padding: 3mm 2mm 6mm; gap: 2mm; background: #FFFFFF; color: #000000; font-size: 2.6mm; box-shadow: none; }
  #area-cetak .struk pre { line-height: 1.25; }
  #area-cetak .qr-klaim { width: 30mm; height: 30mm; }
}