@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/sarabun-thai-400-normal-C2DaJlKK.woff2)format("woff2"),url(/assets/sarabun-thai-400-normal-CH-UbWgg.woff)format("woff")}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/sarabun-thai-600-normal-3dIAQ-_s.woff2)format("woff2"),url(/assets/sarabun-thai-600-normal-DWKeTe6a.woff)format("woff")}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/sarabun-latin-400-normal-URPBxl-K.woff2)format("woff2"),url(/assets/sarabun-latin-400-normal-DmguIS-7.woff)format("woff")}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/sarabun-latin-600-normal-DMD3TROr.woff2)format("woff2"),url(/assets/sarabun-latin-600-normal-9FonlkKx.woff)format("woff")}:root{--brand:#b91116;--brand-hover:#9a0e12;--brand-soft:#fdecec;--bg:#f8fafb;--card:#fff;--ink:#1a1a2e;--ink-2:#374151;--muted:#6b7280;--line:#d9dee5;--ok:#15803d;--ok-bg:#dcfce7;--warn:#854d0e;--warn-bg:#fef08a;--danger:#c2410c;--danger-bg:#ffedd5;--info-bg:#dbeafe;--info:#1e40af;--nav:#1c1c20;--radius:10px;--tap:52px;color:var(--ink);background:var(--bg);font-family:Sarabun,Leelawadee UI,Tahoma,sans-serif;font-size:16px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer}input,select{font:inherit}.btn{min-height:var(--tap);border-radius:var(--radius);border:1px solid var(--line);background:#fff;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-weight:600;display:inline-flex}.btn:hover{background:#f1f3f5}.btn:disabled{color:#5b6472;cursor:not-allowed;background:#eef0f3}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.primary:hover:not(:disabled){background:var(--brand-hover)}.btn.primary:disabled{color:#fff;background:#d9a3a5;border-color:#d9a3a5}.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}.btn.danger{border-color:var(--danger);color:var(--danger);background:#fff}.btn.small{min-height:40px;padding:0 12px;font-size:14px}.btn.big{min-height:64px;font-size:20px}.btn.wide{width:100%}.chip{color:#4b5563;background:#e5e7eb;border-radius:999px;align-items:center;padding:2px 10px;font-size:13px;font-weight:600;display:inline-flex}.chip.ok{background:var(--ok-bg);color:#166534}.chip.warn{background:var(--warn-bg);color:var(--warn)}.chip.danger{background:var(--danger-bg);color:#9a3412}.chip.info{background:var(--info-bg);color:var(--info)}.field{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.field label{color:var(--ink-2);font-size:14px;font-weight:600}.field input,.field select{background:#fff;border:1px solid #818b9b;border-radius:8px;min-height:48px;padding:0 12px}.field input:focus,.field select:focus{outline:2px solid var(--brand);outline-offset:1px}.shell{grid-template-rows:auto auto 1fr;height:100%;display:grid}.topbar{background:var(--nav);color:#fff;align-items:center;gap:16px;padding:8px 16px;display:flex}.topbar .brand{align-items:center;gap:10px;font-weight:600;display:flex}.topbar .logo{background:var(--brand);border-radius:8px;place-items:center;width:36px;height:36px;font-weight:700;display:grid}.topbar nav{flex:1;gap:6px;display:flex}.topbar nav a{color:#cbd5e1;border-radius:8px;align-items:center;gap:6px;min-height:44px;padding:10px 14px;font-weight:600;text-decoration:none;display:inline-flex}.topbar nav a.active{color:#fff;background:#f871712e;box-shadow:inset 3px 0 #f87171}.topbar .who{color:#cbd5e1;align-items:center;gap:10px;font-size:14px;display:flex}.alert{padding:10px 16px;font-weight:600}.alert.warn{background:var(--warn-bg);color:var(--warn)}.alert.danger{background:var(--danger-bg);color:#9a3412}.page{padding:16px;overflow:auto}.page.fill{padding:0;overflow:hidden}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}h1,h2,h3{margin:0 0 12px}h1{font-size:22px}h2{font-size:18px}.center-screen{place-items:center;min-height:100%;padding:24px;display:grid}.pin-layout{grid-template-columns:1fr 340px;gap:24px;width:min(960px,100%);display:grid}.staff-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));align-content:start;gap:12px;display:grid}.staff-btn{border:2px solid var(--line);background:#fff;border-radius:12px;min-height:84px;font-size:18px;font-weight:600}.staff-btn.sel{border-color:var(--brand);background:var(--brand-soft)}.staff-btn small{color:var(--muted);font-weight:400;display:block}.pin-dots{justify-content:center;gap:14px;height:32px;margin:8px 0 16px;display:flex}.pin-dots i{border:2px solid var(--brand);border-radius:50%;width:18px;height:18px}.pin-dots i.on{background:var(--brand)}.keypad{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.keypad button{border:1px solid var(--line);background:#fff;border-radius:12px;min-height:64px;font-size:24px;font-weight:600}.keypad button:active{background:var(--brand-soft)}.error{color:#9a3412;background:var(--danger-bg);border-radius:8px;margin:8px 0;padding:8px 12px;font-weight:600}.zone-title{color:var(--muted);margin:4px 0 8px;font-size:15px;font-weight:600}.table-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:18px;display:grid}.table-card{border:2px solid var(--line);text-align:left;background:#fff;border-radius:12px;flex-direction:column;justify-content:space-between;min-height:118px;padding:12px;display:flex}.table-card .name{font-size:20px;font-weight:700}.table-card.free{border-color:#cbd5e1}.table-card.occupied{border-color:var(--brand);background:var(--brand-soft)}.table-card.billing{background:#fef3c7;border-color:#b45309}.table-card .meta{color:var(--ink-2);justify-content:space-between;font-size:14px;display:flex}.order-layout{grid-template-columns:1fr 400px;height:100%;display:grid}.menu-pane{border-right:1px solid var(--line);grid-template-rows:auto 1fr;min-height:0;display:grid}.cat-tabs{border-bottom:1px solid var(--line);background:#fff;gap:8px;padding:10px 12px;display:flex;overflow-x:auto}.cat-tabs button{border:1px solid var(--line);white-space:nowrap;background:#fff;border-radius:999px;min-height:48px;padding:0 18px;font-weight:600}.cat-tabs button.on{background:var(--brand);border-color:var(--brand);color:#fff}.menu-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));align-content:start;gap:12px;padding:12px;display:grid;overflow:auto}.menu-btn{border:1px solid var(--line);text-align:left;background:#fff;border-radius:12px;flex-direction:column;justify-content:space-between;min-height:96px;padding:10px;font-weight:600;display:flex}.menu-btn:active{background:var(--brand-soft)}.menu-btn .price{color:var(--brand)}.bill-pane{background:#fff;grid-template-rows:auto 1fr auto;min-height:0;display:grid}.bill-head{border-bottom:1px solid var(--line);padding:12px 16px}.bill-lines{padding:8px 12px;overflow:auto}.line{border-bottom:1px solid #eef0f3;grid-template-columns:1fr auto;gap:4px 8px;padding:10px 4px;display:grid}.line .mods{color:var(--muted);grid-column:1/2;font-size:13px}.line .act{grid-column:1/3;align-items:center;gap:6px;display:flex}.line.voided{opacity:.5;text-decoration:line-through}.qty-btn{border:1px solid var(--line);background:#fff;border-radius:8px;width:40px;height:40px;font-size:20px;font-weight:700}.bill-foot{border-top:1px solid var(--line);gap:10px;padding:12px 16px;display:grid}.totals{color:var(--ink-2);gap:2px;font-size:14px;display:grid}.totals .grand{color:var(--ink);justify-content:space-between;font-size:26px;font-weight:700;display:flex}.btn-row{grid-auto-columns:1fr;grid-auto-flow:column;gap:8px;display:grid}.overlay{z-index:50;background:#00000080;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:14px;width:min(560px,100%);max-height:94vh;padding:20px;overflow:auto}.modal.wide{width:min(760px,100%)}.modal h2,.opt-group{margin-bottom:14px}.opt-group h3{align-items:center;gap:8px;font-size:15px;display:flex}.opt-list{flex-wrap:wrap;gap:8px;display:flex}.opt{border:2px solid var(--line);background:#fff;border-radius:10px;min-height:52px;padding:0 16px;font-weight:600}.opt.on{border-color:var(--brand);background:var(--brand-soft)}.method-tabs{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.big-amount{text-align:center;margin:8px 0;font-size:40px;font-weight:700}.qr-box{place-items:center;margin:8px 0;display:grid}.qr-box img{width:260px;height:260px;image-rendering:pixelated}.quick{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}table.t{border-collapse:collapse;border:1px solid var(--line);background:#fff;border-radius:10px;width:100%;overflow:hidden}table.t th,table.t td{text-align:left;border-bottom:1px solid #eef0f3;padding:10px 12px}table.t th{color:var(--ink-2);background:#f3f4f6;font-size:13px}table.t td.num,table.t th.num{text-align:right}.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;display:grid}.stat{gap:2px;display:grid}.stat b{font-size:26px}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.spacer{flex:1}.tabs{flex-wrap:wrap;gap:6px;margin-bottom:14px;display:flex}.tabs button{border:1px solid var(--line);background:#fff;border-radius:8px;min-height:44px;padding:0 16px;font-weight:600}.tabs button.on{background:var(--brand);border-color:var(--brand);color:#fff}.toast-wrap{z-index:80;gap:8px;display:grid;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.toast{color:#fff;background:#1f2937;border-radius:10px;padding:12px 20px;font-weight:600}.toast.err{background:#b91c1c}.muted{color:var(--muted)}.offline-banner{color:#fff;background:#1f2937;padding:6px 16px;font-weight:600}@media (width<=900px){.order-layout{grid-template-rows:1fr 46%;grid-template-columns:1fr}.pin-layout{grid-template-columns:1fr}}