:root{--red: #e02828;--red-dark: #c21f1f;--red-soft: #fdecec;--ink: #141414;--muted: #6b6b6b;--line: #ececec;--bg: #f6f6f6;--green: #1f9d55;--green-soft: #e7f6ee;--amber: #b7791f;--amber-soft: #fff5e0;color-scheme:light}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{background:#fff}body{font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif;color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:disabled{opacity:.55;cursor:default}input{font:inherit;color:inherit}.page{max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative;background:#fff}.muted{color:var(--muted)}.block{display:block}.center{text-align:center}.center-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:12px}.center-page h1{font-size:20px}.center-page p{color:var(--muted);max-width:320px;line-height:1.5}.center-logo{width:160px}.pulse{animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.45}}.hdr{background:var(--ink);color:#fff;padding:16px;display:flex;align-items:center;gap:12px}.hdr img{height:38px;background:#fff;border-radius:8px;padding:3px 6px}.hdr-t{flex:1;min-width:0}.hdr-t b{display:block;font-size:16px}.hdr-t span{font-size:12px;opacity:.75}.meja-badge{background:var(--red);border-radius:12px;padding:6px 12px;font-weight:800;font-size:16px;text-align:center;line-height:1.1}.meja-badge small{display:block;font-size:9px;font-weight:600;letter-spacing:.06em;opacity:.85}.banner{display:block;width:100%;text-align:left;padding:11px 16px;font-size:13px;font-weight:600}.banner-red{background:var(--red-soft);color:var(--red-dark)}.banner-dark{background:#2a2a2a;color:#fff}.sticky-top{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line)}.search{display:block;width:calc(100% - 32px);margin:12px 16px 0;background:var(--bg);border:0;border-radius:12px;padding:11px 14px;font-size:14px;outline:none}.tabs{display:flex;gap:8px;padding:12px 16px;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{white-space:nowrap;padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--bg)}.tab.on{background:var(--red);color:#fff}.list{padding:0 16px}.sec{font-size:15px;font-weight:800;margin:16px 0 4px}.item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}.item.habis{opacity:.5}.thumb{width:58px;height:58px;border-radius:12px;background:linear-gradient(135deg,#f7d9d9,#fbefef);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--red);flex:none;object-fit:cover}.item-n{flex:1;min-width:0}.item-n b{display:block;font-size:14px;line-height:1.3}.price{display:block;font-weight:700;font-size:13px;margin-top:3px}.habis-tag{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);border-radius:6px;padding:2px 6px}.add{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--red);color:var(--red);font-weight:800;font-size:18px;flex:none}.qty{display:flex;align-items:center;gap:10px;font-weight:700;flex:none}.qty span{min-width:16px;text-align:center}.qty button{width:30px;height:30px;border-radius:9px;background:var(--red);color:#fff;font-weight:800;font-size:16px}.qty button.o{background:#fff;border:1.5px solid var(--line);color:var(--ink)}.cartbar{position:fixed;left:50%;transform:translate(-50%);bottom:16px;width:calc(100% - 32px);max-width:488px;background:var(--red);color:#fff;border-radius:16px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;text-align:left;box-shadow:0 8px 20px #e028284d;z-index:10}.cartbar b{font-size:15px}.cartbar small{display:block;font-size:12px;opacity:.9}.topbar{padding:16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:5}.topbar b{font-size:16px;flex:1}.back{width:36px;height:36px;border-radius:10px;background:var(--bg);font-weight:800;font-size:16px;flex:none}.body{padding:12px 16px}.card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px}.card>b{font-size:14.5px}.card p{font-size:13px;line-height:1.5;margin-top:4px}.card-amber{background:var(--amber-soft);border-color:#f3dfb5}.card-amber p{color:#7a5a1a}.card-green{background:var(--green-soft);border-color:#bfe6cf}.card-green p{color:#1c5f39}.card-gray{background:var(--bg)}.row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:5px 0}.row.total{font-weight:800;font-size:16px;border-top:1px dashed var(--line);margin-top:6px;padding-top:10px}.cart-line{padding:8px 0;border-bottom:1px solid var(--line)}.cart-row{display:flex;align-items:center;gap:12px}.cart-name{flex:1;min-width:0}.cart-name b{display:block;font-size:14px}.cart-name span{font-size:12.5px;color:var(--muted)}.line-note{width:100%;margin-top:8px;border:0;background:var(--bg);border-radius:9px;padding:8px 10px;font-size:12.5px;outline:none}.lbl{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:8px 0 6px}.input{display:block;width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:14px;margin-bottom:6px;outline:none}.input:focus,.line-note:focus,.search:focus{box-shadow:0 0 0 2px var(--red-soft);border-color:var(--red)}.pay{display:flex;gap:10px;margin-bottom:10px}.opt{flex:1;border:1.5px solid var(--line);border-radius:14px;padding:12px;text-align:left;position:relative}.opt b{display:block;font-size:14px;margin-bottom:2px}.opt span{color:var(--muted);font-size:11.5px}.opt.on{border-color:var(--red);background:var(--red-soft)}.radio{position:absolute;top:12px;right:12px;width:16px;height:16px;border-radius:50%;border:2px solid #c9c9c9}.opt.on .radio{border:5px solid var(--red)}.note{font-size:12px;color:var(--muted);line-height:1.5}.error{margin-top:10px;background:var(--red-soft);color:var(--red-dark);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600}.bottom{position:fixed;left:50%;transform:translate(-50%);bottom:0;width:100%;max-width:520px;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#fff 25%);z-index:10}.btn{display:inline-block;text-align:center;font-weight:800;border-radius:14px;padding:14px 18px;font-size:15px;text-decoration:none}.btn-block{display:block;width:100%}.btn-red{background:var(--red);color:#fff}.btn-red:active{background:var(--red-dark)}.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}.ordno{text-align:center;padding:20px 16px 4px}.ordno .k{font-size:12.5px;color:var(--muted);font-weight:600}.ordno .v{font-size:42px;font-weight:800;letter-spacing:.04em}.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap}.b-amber{background:var(--amber-soft);color:var(--amber)}.b-green{background:var(--green-soft);color:var(--green)}.b-red{background:var(--red-soft);color:var(--red)}.b-gray{background:var(--bg);color:var(--muted)}.steps{display:flex;gap:6px;margin:8px 0 14px}.steps div{flex:1;text-align:center;font-size:11px;font-weight:600;color:var(--muted)}.steps div:before{content:"";display:block;height:5px;border-radius:5px;background:var(--line);margin-bottom:6px}.steps .done{color:var(--ink)}.steps .done:before{background:var(--red)}.qris-card{text-align:center}.qris-amount{font-size:28px;font-weight:800;margin:4px 0 8px}.qr{margin:0 auto 8px;background:#fff;padding:10px;border:1px solid var(--line);border-radius:12px}.qr svg{width:100%;height:100%;display:block}.qris-card .btn{margin-top:10px}.actions{padding:4px 16px calc(24px + env(safe-area-inset-bottom))}