:root{--bg:#eceff1;--surface:#fff;--ink:#1c1b1f;--muted:#868b94;--line:#e7e9ec;--red:#e0243a;--red-d:#c01a2e;--red-l:#fdebed;--ok:#16a34a;--soft:#f5f6f7;--oil:var(--ink);--bad:var(--red);--chili:var(--red);--paper:var(--bg);--gold:var(--red);--sh:0 2px 12px #1c1b1f0f;--focus:#2563eb}*{box-sizing:border-box;margin:0}[hidden]{display:none!important}body{background:var(--bg);color:var(--ink);height:100dvh;font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:14.5px;overflow:hidden}h1,h2{letter-spacing:-.3px;font-weight:800}button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:10px 14px;font-weight:700;transition:background .15s,transform .1s,box-shadow .15s,color .15s}button:active{transform:scale(.97)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.ghost:hover{border-color:var(--red);color:var(--red)}.pay{background:var(--red);color:#fff;border-radius:14px;width:100%;padding:14px;font-size:16px;box-shadow:0 6px 16px #e0243a40}.pay:hover:not(:disabled){background:var(--red-d)}.pay:disabled{color:#a3a8b0;box-shadow:none;cursor:not-allowed;background:#e4e6e9}.link{color:var(--muted);background:0 0;width:100%;margin-top:6px;text-decoration:underline}.app{grid-template-columns:208px minmax(0,1fr) 390px;gap:16px;height:100dvh;padding:16px;display:grid}.side,.right{background:var(--surface);box-shadow:var(--sh);border-radius:24px;min-height:0}.side{flex-direction:column;padding:18px 14px;display:flex}.brand{align-items:center;gap:10px;padding:2px 6px 18px;font-size:17px;font-weight:800;line-height:1.15;display:flex}.brand img{object-fit:contain;border:1px solid var(--line);background:#fff;border-radius:10px;width:40px;height:40px}nav{flex-direction:column;gap:4px;display:flex}.nav{text-align:left;color:#4b5058;background:0 0;border-radius:12px;align-items:center;gap:10px;width:100%;padding:11px 12px;font-weight:600;display:flex}.nav:before{content:attr(data-i);text-align:center;width:22px}.nav:hover{background:var(--soft)}.nav.on{background:var(--red);color:#fff;box-shadow:0 6px 14px #e0243a40}.side-foot{gap:8px;margin-top:auto;display:grid}.badge{background:var(--red-l);color:var(--red);text-align:center;border-radius:12px;padding:7px 12px;font-size:12.5px;font-weight:700}.badge:empty{display:none}.center{flex-direction:column;min-width:0;min-height:0;display:flex}.topbar{align-items:center;gap:10px;margin-bottom:14px;display:flex}.search{max-width:520px;font:inherit;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='17' fill='%23e0243a'/%3E%3Ccircle cx='15.5' cy='15.5' r='5.5' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M20 20l5 5' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;box-shadow:var(--sh);border:0;border-radius:99px;flex:1;padding:13px 52px 13px 20px}.search:focus{outline:2px solid var(--red)}#today{background:var(--surface);box-shadow:var(--sh);border-radius:12px;padding:9px 14px;font-size:12.5px;font-weight:600}#today:empty,#lowAlert:empty{display:none}#lowAlert{background:var(--red);color:#fff;cursor:pointer;border-radius:12px;padding:9px 14px;font-size:12.5px;font-weight:700}#clock{color:var(--muted);margin-left:auto;font-size:12.5px}.tabs{gap:10px;margin-bottom:14px;padding:2px 2px 8px;display:flex;overflow-x:auto}.tab{text-align:center;background:0 0;border:0;border-radius:18px;flex:none;min-width:86px;padding:6px 8px;font-size:12.5px;font-weight:600;line-height:1.3}.tab i{width:62px;height:62px;box-shadow:var(--sh);background:#fff;border:2px solid #0000;border-radius:50%;place-items:center;margin:0 auto 6px;font-size:26px;font-style:normal;display:grid}.tab small{color:var(--muted);font-size:11.5px;font-weight:500;display:block}.tab.on{color:var(--red)}.tab.on i{border-color:var(--red);background:var(--red-l)}.grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));align-content:start;gap:16px;padding:2px 2px 16px;display:grid;overflow:auto}.item{--tone:#fde3e6;background:var(--surface);box-shadow:var(--sh);cursor:pointer;border:2px solid #0000;border-radius:20px;flex-direction:column;gap:8px;padding:10px 10px 12px;transition:transform .12s,border-color .12s;display:flex;position:relative}.item:hover{border-color:#e0243a55;transform:translateY(-3px)}.item[data-cat=Minuman]{--tone:#dff1fb}.item[data-cat=Paket]{--tone:#efe5fb}.item[data-cat=Topping]{--tone:#ffe9d2}.emo{aspect-ratio:1;background:var(--tone) center/cover no-repeat;border-radius:50%;place-items:center;width:80%;margin:6px auto 2px;font-size:46px;display:grid;box-shadow:0 10px 22px #1c1b1f26}.item b{text-align:center;padding:0 4px;font-size:14.5px;font-weight:700;line-height:1.25}.foot{justify-content:space-between;align-items:center;gap:6px;margin-top:auto;padding:0 4px;display:flex}.price{color:var(--red);font-size:16px;font-weight:800}.add{background:var(--red-l);color:var(--red);border-radius:99px;padding:6px 10px;font-size:12px;font-weight:700}.item:hover .add{background:var(--red);color:#fff}.tog{color:var(--muted);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffe6;border-radius:99px;padding:3px 9px;font-size:10.5px;position:absolute;top:16px;left:16px}.tog:hover{color:var(--red)}.item.off{opacity:.55;filter:grayscale(.7)}.item.off:after{content:"HABIS";background:var(--ink);color:#fff;letter-spacing:.5px;border-radius:99px;padding:3px 9px;font-size:10.5px;font-weight:800;position:absolute;top:46px;left:16px}.cnt{background:var(--red);color:#fff;text-align:center;border-radius:99px;min-width:28px;height:28px;padding:0 7px;font-size:13px;font-weight:800;line-height:28px;position:absolute;top:-8px;right:-8px;box-shadow:0 4px 10px #e0243a55}.item:has(.cnt){border-color:var(--red)}.item:has(.cnt) .tog{display:none}.right{flex-direction:column;display:flex;overflow:hidden}.right h2{padding:20px 22px 4px;font-size:22px}#antrean{background:var(--red-l);color:var(--red);vertical-align:middle;border-radius:99px;margin-left:6px;padding:2px 12px;font-size:14px}.seg{background:var(--soft);border-radius:14px;flex-wrap:wrap;gap:6px;margin:10px 22px;padding:5px;display:flex}.seg button{color:var(--muted);background:0 0;border-radius:10px;flex:30%;padding:8px 4px;font-size:12px}.seg button.on{background:var(--red);color:#fff;box-shadow:0 4px 10px #e0243a40}.cart{flex:1;align-content:start;gap:8px;padding:4px 22px;display:grid;overflow:auto}.row{border:1px solid var(--line);border-radius:16px;padding:10px 12px}.row .top{justify-content:space-between;align-items:center;gap:8px;font-weight:700;display:flex}.nm{align-items:center;gap:10px;display:flex}.th{background:var(--red-l) center/cover no-repeat;border-radius:12px;flex:none;place-items:center;width:42px;height:42px;font-size:20px;font-style:normal;display:grid}.mods-line{color:var(--muted);margin:4px 0 0 52px;font-size:12px}.qty{align-items:center;gap:8px;margin-top:8px;display:flex}.qty button{background:var(--soft);border-radius:50%;width:30px;height:30px;padding:0;font-size:17px;line-height:1}.qty button:hover{background:var(--red);color:#fff}.qty b{text-align:center;min-width:20px}.qty input{border:1px solid var(--line);min-width:0;font:inherit;background:var(--soft);border-radius:10px;flex:1;padding:7px 10px;font-size:12.5px}.empty{color:var(--muted);text-align:center;padding:44px 10px;line-height:1.6}.sum{border-top:2px dashed #d5d8dd;gap:8px;margin:12px 0 0;padding:22px 22px 18px;display:grid;position:relative}.sum:before,.sum:after{content:"";background:var(--bg);border-radius:50%;width:24px;height:24px;position:absolute;top:-13px}.sum:before{left:-12px}.sum:after{right:-12px}.sum div{color:#5d626b;justify-content:space-between;align-items:center;display:flex}.sum .total{color:var(--ink);font-size:15px}.sum .total .big{color:var(--red);font-size:26px;font-weight:800}.disc{gap:6px;display:flex}.disc input,.disc select,.vin{border:1px solid var(--line);font:inherit;background:#fff;border-radius:10px;width:84px;padding:6px 8px}.vrow{gap:6px}.vin{text-transform:uppercase;flex:1;width:auto}.vrow .ghost{padding:6px 14px}dialog{background:var(--surface);width:min(450px,94vw);color:var(--ink);border:0;border-radius:24px;padding:26px;box-shadow:0 30px 80px #1c1b1f40}dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#1c1b1f80}dialog[open]{animation:.18s ease-out pop}@keyframes pop{0%{opacity:0;transform:translateY(10px)scale(.97)}to{opacity:1;transform:none}}dialog h2{margin-bottom:12px;font-size:22px}dialog div[style*=display\:flex]{flex-wrap:wrap}.opts{flex-wrap:wrap;gap:8px;margin:12px 0;display:flex}.opts button{background:var(--surface);border:1.5px solid var(--line);flex-direction:column;flex:40%;align-items:center;gap:4px;padding:12px 8px;display:flex}.opts button i{font-size:20px;font-style:normal}.opts button.on{background:var(--red-l);border-color:var(--red);color:var(--red)}.field{border:1.5px solid var(--line);width:100%;font:inherit;background:var(--soft);color:var(--ink);border-radius:14px;margin:6px 0;padding:13px 14px;font-size:17px;font-weight:600}.field:focus{border-color:var(--red);background:#fff;outline:none}.quick{flex-wrap:wrap;gap:6px;margin-bottom:8px;display:flex}.quick button{background:var(--soft);padding:7px 12px;font-size:13px}.quick button:hover{background:var(--red-l);color:var(--red)}.chg{min-height:30px;font-size:21px;font-weight:800}.ok{color:var(--ok)}.bad{color:var(--red)}.mg{margin:14px 0}.mg small{color:var(--muted)}.chips{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.chip{background:var(--soft);border:1.5px solid #0000;padding:8px 14px;font-size:13px}.chip.on{background:var(--red-l);color:var(--red);border-color:var(--red)}table{border-collapse:collapse;width:100%;font-size:13.5px}td{border-bottom:1px solid var(--line);vertical-align:middle;padding:9px 0}td:last-child{text-align:right;font-weight:600}td small{color:var(--muted);font-weight:400}.stat{grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 16px;display:grid}.stat div{background:var(--soft);color:var(--muted);border-radius:16px;padding:12px;font-size:12px}.stat div:first-child{background:var(--red);color:#fffc}.stat b{color:var(--ink);margin-top:3px;font-size:18px;font-weight:800;display:block}.stat div:first-child b{color:#fff}.bars{align-items:flex-end;gap:6px;height:130px;margin:10px 0 4px;display:flex}.bar{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:4px;height:100%;display:flex}.bar i{background:var(--red);opacity:.85;border-radius:10px 10px 4px 4px;width:100%;display:block}.bar:hover i{opacity:1}.bar small{color:var(--muted);font-size:10px}.receipt{color:#000;background:#fff;width:270px;margin:0 auto;font-family:Courier New,monospace;font-size:13px}.receipt hr{border:0;border-top:1px dashed #000;margin:6px 0}.receipt .r{justify-content:space-between;display:flex}.receipt .c{text-align:center}.q{text-align:center;font-size:44px;font-weight:800;line-height:1}#btnWa{color:#fff;background:#25d366;border:0}#btnWa:hover{color:#fff;background:#1ebe5a}#login{z-index:50;background:var(--bg);justify-content:center;align-items:center;padding:16px;display:none;position:fixed;inset:0;overflow:auto}.lbox{background:var(--surface);border-radius:28px;grid-template-columns:1fr 1fr;width:min(860px,100%);display:grid;overflow:hidden;box-shadow:0 30px 80px #1c1b1f26}.lbrand{background:var(--red);color:#fff;background-image:radial-gradient(circle at 85% 12%,#ffffff2e,#0000 45%);flex-direction:column;justify-content:flex-end;min-height:420px;padding:40px 34px;display:flex}.lbrand img{object-fit:contain;background:#fff;border-radius:22px;width:84px;height:84px;margin-bottom:22px;padding:8px}.lbrand h1{font-size:36px;line-height:1.1}.lbrand p{color:#fffc;margin-top:10px;line-height:1.5}.lform{flex-direction:column;justify-content:center;padding:34px;display:flex}.lform .opts{margin-top:0}.lform .opts button{flex-direction:row;justify-content:center}.lbl{margin-bottom:6px;font-weight:700;display:block}.logo-pick{text-align:center;color:var(--muted);cursor:pointer;border:1.5px dashed #c9cdd3;border-radius:14px;margin:6px 0;padding:13px;display:block}.logo-pick:hover{border-color:var(--red);color:var(--red)}.chk{align-items:center;gap:8px;margin:8px 0;display:flex}#loginUsers{flex-wrap:wrap;gap:8px;margin:8px 0;display:flex}#loginUsers button{background:var(--soft);border:1.5px solid #0000}#loginUsers button.on{background:var(--red-l);color:var(--red);border-color:var(--red)}.err{color:var(--red);min-height:22px;font-size:13px;font-weight:700}#pin{letter-spacing:6px;text-align:center}#toast{background:var(--ink);color:#fff;z-index:99;border-radius:99px;padding:12px 20px;font-weight:600;display:none;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0003}.mrow{gap:6px}.mrow button{text-overflow:ellipsis;white-space:nowrap;flex:1;padding:8px 10px;font-size:13px;overflow:hidden}.row2{gap:8px;display:flex}.row2 button{flex:1}.prow{border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:7px 0;display:flex}.prow span{flex:1}.prow button{background:var(--soft);border-radius:50%;padding:2px 9px}.share{background:var(--red-l);color:var(--red);border-radius:12px;margin:6px 0;padding:7px 12px;font-size:13px;font-weight:700}.price small{color:var(--muted);margin-left:2px;font-size:11px;font-weight:500}.info{width:26px;height:26px;color:var(--muted);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffe6;border-radius:50%;padding:0;font-size:13px;font-style:italic;font-weight:800;position:absolute;top:16px;right:16px}.info:hover{background:var(--red);color:#fff}.hero{aspect-ratio:16/10;background:var(--red-l) center/cover no-repeat;border-radius:20px;place-items:center;width:100%;margin-bottom:14px;font-size:76px;display:grid}.dtag{background:var(--red-l);color:var(--red);border-radius:99px;padding:3px 12px;font-size:12px;font-weight:700;display:inline-block}.kpis{grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0;display:grid}.kpis div{background:var(--soft);border-radius:16px;padding:12px}.kpis small{color:var(--muted);display:block}.kpis b{font-size:18px;font-weight:800}.kpis .pos{background:#e8f6ee}.kpis .pos b{color:var(--ok)}.kpis .neg{background:var(--red-l)}.kpis .neg b{color:var(--red)}dialog h3{margin:16px 0 6px;font-size:15px}.otable{overflow-x:auto}.otable .oh,.otable .or{grid-template-columns:1.3fr 1.2fr 1fr 1fr .9fr;align-items:center;gap:8px;min-width:520px;padding:9px 14px;font-size:13px;display:grid}.otable .oh{background:var(--soft);color:var(--muted);border-radius:99px;font-weight:700}.otable .or{border-bottom:1px solid var(--line)}.pill{border-radius:99px;padding:3px 12px;font-size:12px;font-style:normal;font-weight:700;display:inline-block}.pill.done{color:#15803d;background:#dcf5e6}.pill.void{background:var(--red-l);color:var(--red)}.vrow{background:var(--soft);border-radius:99px;align-items:center;padding:5px 6px 5px 16px}.vrow span{color:#5d626b;font-size:13px;font-weight:600}.vrow .vin{text-align:center;border:0;border-radius:99px;font-weight:700}.pay{border-radius:99px}.mbar,.sheet-x{display:none}@media (width<=1100px){.app{grid-template-columns:76px minmax(0,1fr) 340px}.brand b,.nav{font-size:0}.nav:before{width:auto;font-size:18px}.nav{justify-content:center;padding:12px 6px}.brand{justify-content:center;padding-bottom:14px}.badge{display:none}}@media (width<=900px){.app{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr;gap:10px;padding:10px}.side{border-radius:18px;flex-direction:row;align-items:center;gap:6px;padding:8px 10px;overflow-x:auto}.brand{padding:0 8px 0 0}.brand b{display:none}nav{flex-direction:row}.side-foot{margin:0 0 0 auto;display:flex}.nav{width:auto;padding:10px 12px}.center{padding-bottom:84px}#clock,#today{display:none}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.right{z-index:30;border-radius:26px 26px 0 0;height:88dvh;transition:transform .25s;position:fixed;bottom:0;left:0;right:0;transform:translateY(105%);box-shadow:0 -14px 40px #1c1b1f33}.right.open{transform:none}.sheet-x{background:var(--soft);border-radius:99px;margin:10px auto 0;padding:6px 24px;font-size:13px;display:block}.mbar{z-index:20;background:var(--red);color:#fff;border-radius:16px;justify-content:space-between;align-items:center;padding:15px 18px;font-size:15px;display:flex;position:fixed;bottom:14px;left:14px;right:14px;box-shadow:0 10px 24px #e0243a55}.mbar:disabled{color:#8a8f98;box-shadow:none;background:#d9dce0;justify-content:center}.lbox{grid-template-columns:1fr}.lbrand{min-height:0;padding:26px}.lbrand h1{font-size:28px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media print{body>:not(#print){display:none!important}#print{display:block!important}}#print{display:none}