@font-face{font-family:Poppins;src:url('/fonts/Poppins-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('/fonts/Poppins-Medium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url('/fonts/Poppins-SemiBold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url('/fonts/Poppins-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url('/fonts/Poppins-ExtraBold.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}
:root{font-family:Poppins,"Segoe UI",Arial,sans-serif;color:#302326;background:#f7f5f4;font-synthesis:none;--green:#c73535;--dark:#401b20;--line:#e8dedd;--muted:#7d7071;--orange:#b65d16}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{min-height:48px;border:1px solid var(--line);border-radius:10px;background:white;color:inherit;padding:12px 18px;cursor:pointer;font-weight:600}button:hover{background:#fff0ee}button:disabled{opacity:.45;cursor:wait}button.primary{background:var(--green);color:white;border-color:var(--green)}button.primary:hover{background:#a9242c}button.danger{color:#a52c2c;background:#fff4f3}button.small{min-height:38px;padding:7px 12px;font-size:14px}a{color:var(--green)}input,select,textarea{width:100%;min-height:48px;padding:12px;border:1px solid #dac8c7;border-radius:8px;background:white;color:#302326}input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid #e99898;outline-offset:2px}input[type=checkbox]{width:22px;min-height:22px;vertical-align:middle;margin-right:8px}label{display:block;font-size:14px;font-weight:600;margin:12px 0 5px}h1,h2,h3,p{margin-top:0}h1{font-size:30px;letter-spacing:-1px}h2{font-size:21px}h3{font-size:18px}p{line-height:1.5}.muted,small{color:var(--muted)}small{font-size:14px}.eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--green)}.shell{display:grid;grid-template-columns:218px 1fr;min-height:100vh}.sidebar{background:var(--dark);color:#fff4f1;padding:30px 18px;display:flex;flex-direction:column;gap:26px;position:sticky;top:0;height:100vh}.brand{font-size:25px;letter-spacing:4px;font-weight:850}.sidebar .brand{padding-left:14px}.sidebar small{color:#d9b7b9}.sidebar nav{display:flex;flex-direction:column;gap:7px}.sidebar nav button{border:0;background:transparent;text-align:left;color:#e3c7c8}.sidebar nav button.active{background:#e54848;color:#ffffff}.sidebar footer{margin-top:auto;padding:12px;font-size:14px}.sidebar footer button{width:100%;margin-top:12px;background:#55292e;border-color:#77454b;color:white}.work{min-width:0;padding:26px 32px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px}.topbar p{margin:0}.status{padding:8px 12px;border:1px solid var(--line);border-radius:30px;background:#fff;font-size:14px}.status.offline{background:#fff1d6;color:#8b4113}.heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.heading h1{margin-bottom:6px}.heading p{margin-bottom:0}.split{display:grid;grid-template-columns:minmax(0,1fr) 365px;gap:24px}.panel{background:white;border:1px solid var(--line);border-radius:16px;padding:22px}.searchbar{display:flex;gap:10px;margin-bottom:16px}.searchbar input{flex:1;min-width:0}.filters{display:flex;gap:8px;margin:14px 0 22px;flex-wrap:wrap}.filters button.active{background:#fbe7e4;border-color:#e4b1b0}.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:13px}.product{text-align:left;padding:0;overflow:hidden;position:relative;border-radius:13px;min-height:210px}.product img,.product .no-photo{width:100%;height:110px;object-fit:contain;background:#faf7f6}.no-photo{display:flex;align-items:center;justify-content:center;color:#87938e;font-size:14px;font-weight:400;border-bottom:1px solid var(--line)}.product-body{padding:14px}.product strong{display:block;margin:4px 0}.product .price{color:var(--green);font-size:20px;margin-top:12px;font-weight:750}.badge{display:inline-block;border-radius:5px;padding:4px 8px;font-size:13px;background:#f4edeb;color:#78615e;white-space:nowrap}.badge.amber{background:#fff0cf;color:#865214}.badge.red{background:#fce4e1;color:#962c28}
.badge.green{background:#e3f5e8;color:#1c7a3d}.cart{display:flex;flex-direction:column;position:sticky;top:22px;max-height:calc(100vh - 44px)}.cart h2{display:flex;justify-content:space-between}.cart-items{overflow:auto;min-height:100px;flex:1}.cart-line{padding:16px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}.cart-line strong{display:block}.qty{display:flex;align-items:center;gap:10px;margin-top:8px}.qty button{width:38px;padding:5px;min-height:38px}.cart-total{display:flex;justify-content:space-between;align-items:center;margin:22px 0;font-size:20px}.cart-total strong{font-size:30px}.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.pay-grid .primary{grid-column:1/-1;min-height:60px;font-size:19px}.cart .secondary{width:100%;margin-top:10px}.empty{padding:42px 20px;text-align:center;color:var(--muted);border:1px dashed #dac8c7;border-radius:12px;line-height:1.6}.empty h2{color:#513337}.notice{padding:13px 16px;background:#fff3d9;border:1px solid #f1d79f;border-radius:9px;color:#785323;line-height:1.5;margin-bottom:16px;font-size:14px}.success{background:#e9f5ec;border-color:#b8d5c2;color:#295640}.row{display:flex;align-items:center;gap:12px}.row.between{justify-content:space-between}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.table-wrap{overflow:auto;max-height:520px}
.row h2{white-space:nowrap;flex-shrink:0}
td button{white-space:nowrap}
#co-incoming::before{display:none!important}
.app-header-actions #connection,.topbar #connection{display:none!important}
td button.small{font-size:12px;padding:7px 9px}
.row input{flex:1;min-width:120px}
#inbox-meal-search,#order-history-search,#meal-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b909b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:11px center;background-size:15px 15px;padding-left:34px!important;margin-bottom:16px;display:block}table{border-collapse:collapse;width:100%;background:white;font-size:15px}th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}th{color:var(--muted);font-size:13px;font-weight:650;background:#faf7f6;white-space:nowrap}td strong{display:block}.thumb{width:46px;height:46px;object-fit:contain;border-radius:6px}.student-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}.student-card{text-align:left;padding:20px}.student-card strong{font-size:19px;display:block;margin:10px 0}.student-card b{font-size:24px;color:var(--orange)}.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}.column{background:#eee7e5;padding:12px;border-radius:0}
.column .muted{margin:6px 0 0}
.column .badge,.order .badge,.order button{border-radius:0}
.order-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.order-grid .order{margin-top:0}.order{background:white;border:1px solid var(--line);border-radius:0;padding:17px;margin-top:14px}.order.urgent{border:2px solid #d88920;background:#fffaf1}.order p{margin:10px 0}.order .actions button{flex:1}.alertbar{background:#ffd98c;color:#513608;border-radius:10px;padding:14px 18px;margin-bottom:18px;font-weight:650}.metric{background:var(--dark);color:#e3ffa4;padding:23px;border-radius:12px}.metric strong{display:block;font-size:30px;margin:9px 0}.metric small{color:#d3e4dc}dialog{position:relative;border:0;border-radius:18px;padding:28px;max-width:760px;width:calc(100% - 32px);max-height:90vh;box-shadow:0 30px 100px #05271e55}dialog::backdrop{background:#092d2677}dialog .close{float:none;position:absolute;top:20px;right:20px;z-index:1}dialog h2{padding-right:40px}dialog form{clear:both}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.full{grid-column:1/-1}.preview-photo{max-height:180px;max-width:100%;object-fit:contain}.invoice-line{border:1px solid var(--line);border-radius:10px;padding:18px;margin:15px 0}.invoice-line .grid3{gap:10px}.invoice-line label{font-size:13px}.quote{background:#e6f3ec;color:#1e533e;padding:14px;border-radius:8px;margin-top:14px}.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.auth-story{background:var(--dark);color:white;padding:10vw 7vw;display:flex;flex-direction:column;justify-content:center}.auth-story h1{font-size:54px;line-height:1.1;margin-top:60px}.auth-story p{color:#c4dfd2}.auth-form{align-self:center;max-width:450px;padding:30px;width:100%;margin:auto}.auth-form button{width:100%;margin-top:25px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#153e32;color:white;padding:14px 22px;border-radius:10px;box-shadow:0 5px 30px #0002;display:none;max-width:90%;z-index:100}#toast.error{background:#982f29}.loading{padding:80px;text-align:center}.customer header{display:flex;justify-content:space-between;padding:25px 40px;background:var(--dark);color:white}.customer #connection{font-size:14px}.customer main{padding:40px;max-width:1300px;margin:auto}.welcome{padding:15vh 5vw}.welcome h1{font-size:72px;margin:18px 0}.welcome p{font-size:26px;color:var(--muted)}.display-line{display:flex;align-items:center;gap:24px;background:white;border-bottom:1px solid var(--line);padding:24px}.display-line img,.display-line .no-photo{width:100px;height:100px;object-fit:contain}.display-line h2{font-size:28px}.display-line p{font-size:23px}.display-line strong{margin-left:auto;font-size:30px}.display-total{display:flex;justify-content:space-between;padding:32px;background:var(--green);color:white;font-size:32px;border-radius:0 0 16px 16px}.display-total strong{font-size:48px}video{width:100%;max-height:350px;background:#132e27;border-radius:10px}.subsection{margin-top:24px}.error-text{color:#a32d27;margin-top:12px}#alert-slot:empty{display:none}@media(max-width:1100px){.shell{grid-template-columns:170px 1fr}.work{padding:22px 18px}.split{grid-template-columns:1fr 310px}.sidebar{padding:25px 10px}.kanban{gap:10px}.products{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}}@media(max-width:850px){.shell{display:block}.sidebar{height:auto;position:static;padding:15px;gap:12px}.sidebar .brand{font-size:20px}.sidebar nav{flex-direction:row;overflow:auto}.sidebar nav button{white-space:nowrap}.sidebar footer{display:none}.split{grid-template-columns:1fr}.cart{position:static;max-height:none}.grid3,.kanban{grid-template-columns:1fr}.topbar{flex-wrap:wrap}.heading{align-items:flex-start;flex-wrap:wrap}.auth{grid-template-columns:1fr}.auth-story{padding:35px}.auth-story h1{font-size:36px;margin-top:30px}.form-grid,.grid2{grid-template-columns:1fr}.full{grid-column:auto}.customer header{padding:18px;gap:15px;flex-wrap:wrap}.customer main{padding:15px}.welcome h1{font-size:45px}.display-line{gap:12px;padding:15px}.display-line h2{font-size:20px}.display-line strong{font-size:22px}.display-line img,.display-line .no-photo{width:65px;height:65px}.display-total strong{font-size:36px}}

.loading{min-height:65vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#445066;font-size:14px;font-weight:600}
.loading-spinner{display:block;width:38px;height:38px;border:3px solid #e9edf3;border-top-color:#ed2635;border-radius:50%;animation:kantin-spin .75s linear infinite}
@keyframes kantin-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation-duration:2s}}

.order-desktop-setting{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid #e6eaf0}
.order-desktop-setting button{min-height:42px;padding:8px 14px;border-radius:9px;border:1px solid #dce3ec;background:#fff;color:#34465e;font-weight:600}
.order-desktop-setting button:hover{background:#f6f8fb}
.order-desktop-setting small{font-size:12px;line-height:1.5}

.staff-attention{display:flex;align-items:center;gap:16px;width:100%;min-height:82px;margin:0 0 18px;padding:16px 18px;text-align:left;background:#fff;color:#401b20;border:1px solid #ead7d4;border-radius:18px;box-shadow:0 6px 20px #401b200d;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.staff-attention:hover{background:#fff7f6;border-color:#c73535;transform:translateY(-1px);box-shadow:0 10px 24px #401b2015}
.staff-attention-count{display:grid;place-items:center;flex:0 0 50px;width:50px;height:50px;border-radius:15px;background:#c73535;color:white;font-size:20px;font-weight:750}
.staff-attention-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.staff-attention-copy strong{font-size:16px;line-height:1.25;font-weight:700}
.staff-attention-copy small{font-size:13px;line-height:1.35;color:#78686b;font-weight:500}
.staff-attention-action{display:flex;align-items:center;gap:10px;white-space:nowrap;color:#a32932;font-size:13px;font-weight:700}
.staff-attention-action span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f9e9e8;font-size:19px;line-height:1}
.order.urgent{border-color:#c73535;background:#fff9f8}
.order.late{border-color:#e3d9d7;background:#fff}
.staff-order-card .staff-order-urgent{color:#a32932;font-weight:700}
.staff-order-card .staff-order-late{color:#78686b}
@media(max-width:640px){.staff-attention{gap:12px;min-height:74px;padding:12px 14px;border-radius:15px}.staff-attention-count{flex-basis:44px;width:44px;height:44px;border-radius:13px;font-size:18px}.staff-attention-copy strong{font-size:14px}.staff-attention-copy small{font-size:11px}.staff-attention-action{font-size:0;gap:0}.staff-attention-action span{width:28px;height:28px;font-size:18px}}

/* Order attention and uncertain transaction feedback. */
.staff-attention{background:#fff1f2;border-color:#efcdd1;box-shadow:0 5px 16px #7f26300d}
.staff-attention:hover{background:#ffe9eb;border-color:#d68189}
.staff-attention-pending{display:inline-flex;align-items:center;align-self:flex-start;margin-top:6px;padding:5px 9px;border:1px solid #efc7cd;border-radius:8px;background:#fff9f9;color:#9d3440;font-size:11px;font-style:normal;font-weight:650;line-height:1.35}
.pending-inline{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;border:1px solid #efcdd1;border-radius:12px;background:#fff1f2;color:#74323a}
.pending-inline-mark{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px;background:#f5d7db;color:#9d3440;font-weight:800}
.pending-inline>span:nth-child(2){display:grid;gap:2px;min-width:0}.pending-inline strong{font-size:12px}.pending-inline small{font-size:11px;line-height:1.4;color:#80545a}.pending-inline button{margin-left:auto;white-space:nowrap;padding:7px 10px;border:1px solid #e8bfc5;border-radius:8px;background:#fff;color:#9d3440;font-size:11px;font-weight:700}
@media(max-width:640px){.staff-attention-pending{font-size:10px}.pending-inline{flex-wrap:wrap}.pending-inline button{margin-left:34px}}

/* Dedicated customer display palette; product names and amounts are untouched. */
body.customer{min-height:100dvh;background:radial-gradient(circle at 8% 0,#ffe9e9 0,transparent 30%),radial-gradient(circle at 92% 26%,#eaf2ff 0,transparent 30%),#f8f9fc}
.customer header{background:linear-gradient(112deg,#273b59,#873b57 54%,#c72c43);box-shadow:0 8px 24px #68304429}
.customer .welcome{border:1px solid #e4e8f1;border-radius:22px;background:linear-gradient(135deg,#fff,#fff5f6 58%,#f0f5ff);box-shadow:0 12px 30px #29365012}
.customer .welcome h1{color:#273b59}
.customer .display-line{border-color:#e3e8f1;box-shadow:0 3px 12px #2936500b}
.customer .display-total{background:linear-gradient(112deg,#a5223c,#d5394e);box-shadow:0 10px 24px #8b2c4030}
@media(max-width:760px){.customer .welcome{border-radius:16px}}

/* Keep settings and pricing layouts compatible with the strict CSP. */
.order-sound-label{display:flex;align-items:center;gap:10px}
#pricing-preview-form #pricing-rate{width:100px;max-width:100%}
@media(max-width:400px){
  #pricing-preview-form{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center;gap:8px}
  #pricing-preview-form #pricing-rate{width:100%;min-width:0}
  #pricing-preview-form button{grid-column:1/-1;width:100%}
}

/* Keep QR and other popups centered in the visible viewport. */
#modal:modal{position:fixed;inset:0;margin:auto;box-sizing:border-box;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}