#app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pad{padding:22px 24px 28px}

/* Kasir header */
.khead{height:var(--hdr-h);flex:none;background:var(--red);color:#fff;display:flex;align-items:center;
  gap:16px;padding:0 18px;box-shadow:0 2px 10px rgba(0,0,0,.12);position:relative;z-index:6}
.khead .brand{display:flex;align-items:center;gap:11px;min-width:0}
.khead .flame{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.khead .flame svg{width:20px;height:20px}
.khead .bt{font-size:19px;font-weight:800;letter-spacing:.4px;line-height:1}
.khead .bt small{display:block;font-size:9.5px;font-weight:700;opacity:.85;letter-spacing:2px}
.khead .who{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;opacity:.95;padding-left:6px}
.khead .who svg{width:17px;height:17px;opacity:.9}
.khead .sp{flex:1}
.khead .stat{display:flex;align-items:center;gap:22px;margin-right:6px}
.khead .hb{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff}
.khead .hb:hover{background:rgba(255,255,255,.14)}
.khead .hb svg{width:24px;height:24px}

/* status chip in header */
.chip-st{display:flex;align-items:center;gap:8px;color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap}
.chip-st .ci{width:20px;height:20px;opacity:.95}
.chip-st .ci svg{width:20px;height:20px}
.chip-st .lb{display:flex;flex-direction:column;line-height:1.05}
.chip-st .lb b{font-size:12.5px;font-weight:700}
.chip-st .dot{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;opacity:.9}
.chip-st .dot i{width:7px;height:7px;border-radius:50%;background:#7CF29B;display:inline-block}
.chip-st .dot.off i{background:#FFC24D}
.chip-st .dot.bad i{background:#FF6B6B}

/* Kasir body: 2 columns */
.kwrap{flex:1;min-height:0;display:grid;grid-template-columns:1fr 384px;overflow:hidden}
.kleft{min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--line)}
.kleft .ktop{padding:16px 20px 8px;flex:none}
.kleft .kmenu{flex:1;min-height:0;overflow-y:auto;padding:6px 20px 22px}
.kright{min-height:0;display:flex;flex-direction:column;background:var(--surface);overflow:hidden}