:root{--hijau:#0b6e63;--hijau-muda:#e3f1ee;--teks:#16231f;--abu:#52605b;--garis:#d9dfda;--latar:#f4f6f3;--merah:#a4261c;--kuning:#8a4b08;--kuning-muda:#fdf0dc}*{box-sizing:border-box}body,html{margin:0;background:var(--latar);color:var(--teks);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}a{color:var(--hijau)}.tombol,button{background:var(--hijau);color:#fff;border:0;border-radius:8px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer}button.sekunder{background:#fff;color:var(--hijau);border:1px solid var(--hijau)}button.bahaya{background:var(--merah)}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--garis);border-radius:8px;background:#fff;max-width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--hijau);outline-offset:1px}label{display:grid;grid-gap:4px;gap:4px;font-size:13px;color:var(--abu)}table{border-collapse:collapse;width:100%}td,th{text-align:left;padding:7px 8px;border-bottom:1px solid var(--garis);vertical-align:middle}th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--abu)}td.angka,th.angka{text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.atas{align-items:center;gap:16px;padding:0 16px;min-height:52px;background:#fff;border-bottom:1px solid var(--garis);position:-webkit-sticky;position:sticky;top:0;z-index:5}.atas,.atas nav{display:flex;flex-wrap:wrap}.atas nav{gap:4px}.atas nav a{padding:6px 10px;border-radius:8px;text-decoration:none;color:#3d4c47}.atas nav a.aktif{background:var(--hijau);color:#fff;font-weight:600}.atas .kanan{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.pengguna{color:var(--abu);font-size:13px}.lencana{padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700}.hijau{background:#e3f4ea;color:#17613b}.merah{background:#fce8e6;color:var(--merah)}.kuning{background:var(--kuning-muda);color:var(--kuning)}main{padding:16px;max-width:1400px;margin:0 auto}.kartu{background:#fff;border:1px solid var(--garis);border-radius:12px;padding:14px 16px}.kisi{display:grid;grid-gap:14px;gap:14px}.baris{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.dua{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.tiga{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.galat{background:#fce8e6;color:var(--merah)}.galat,.info{padding:8px 12px;border-radius:8px}.info{background:var(--hijau-muda);color:#0b5f55}.peringatan{background:var(--kuning-muda);color:var(--kuning);padding:8px 12px;border-radius:8px}.muat{padding:24px;color:var(--abu)}.tengah{max-width:420px;margin:8vh auto}.kasir{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);grid-gap:14px;gap:14px;align-items:start}@media (max-width:900px){.kasir{grid-template-columns:1fr}.atas{padding:6px 10px}main{padding:10px}}.total{font-size:28px;font-weight:800;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.hasil-cari{border:1px solid var(--garis);border-radius:8px;background:#fff;margin-top:4px}.hasil-cari button{display:block;width:100%;text-align:left;background:#fff;color:var(--teks);border-radius:0;border-bottom:1px solid var(--garis);font-weight:500}.hasil-cari button:hover{background:var(--hijau-muda)}pre.struk{background:#fff;border:1px dashed #999;padding:10px;font:12px/1.35 ui-monospace,Menlo,Consolas,monospace;white-space:pre;overflow-x:auto;margin:0}.tab{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}.tab button{background:#fff;color:#3d4c47;border:1px solid var(--garis)}.tab button.aktif{background:var(--hijau);color:#fff;border-color:var(--hijau)}.angka-besar{font-size:22px;font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.kecil{font-size:12px;color:var(--abu)}.batang{display:flex;align-items:flex-end;gap:6px;height:140px;border-bottom:1px solid var(--garis)}.batang div{flex:1 1;background:#9ccbc4;border-radius:3px 3px 0 0;min-height:2px}.batang div:last-child{background:var(--hijau)}@media print{body *{visibility:hidden}#cetak-struk,#cetak-struk *{visibility:visible}#cetak-struk{position:absolute;left:0;top:0;width:100%}pre.struk{border:0;padding:0;font-size:10px}@page{margin:2mm}}