*{box-sizing:border-box}body{margin:0;background:#f8f5ef;color:#243b35;font-family:system-ui,'Microsoft JhengHei',sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:22px 5%;background:#fff;border-bottom:1px solid #e7e3db}.brand{font-size:25px;font-weight:900;letter-spacing:3px;color:#234c3e;text-decoration:none}.brand span{display:block;font-size:11px;letter-spacing:1px;font-weight:500;margin-top:5px}nav{display:flex;gap:24px}a{color:#315c4c}.notice{padding:10px 5%;background:#efe7cd;color:#695727;font-size:12px}main{max-width:1280px;margin:auto;padding:35px 28px}h1{font-size:40px;letter-spacing:-1px;margin:8px 0}h2{margin:0 0 18px}p{line-height:1.65}.eyebrow{font-size:12px;letter-spacing:3px;color:#9b6d39}.muted{color:#777f73;font-size:14px}.layout{display:grid;grid-template-columns:1fr 340px;gap:28px;margin-top:30px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.card,.panel{background:white;border:1px solid #e4e5dc;border-radius:18px;padding:22px}.food-icon{font-size:50px;background:#f2eee2;border-radius:12px;padding:16px;text-align:center;margin-bottom:16px}.card h3{margin:0 0 5px}.card p{font-size:13px;color:#72786e;min-height:40px}.price{font-weight:800;color:#234c3e}.row{display:flex;justify-content:space-between;gap:12px;align-items:center}.panel{align-self:start;position:sticky;top:20px}button{border:0;background:#285a46;color:white;padding:13px 17px;border-radius:10px;font-size:15px;font-weight:650;cursor:pointer;min-height:44px}button:disabled{opacity:.45;cursor:not-allowed}button.secondary{background:#eeeae0;color:#344c3d}button.danger{background:#fff0ed;color:#a23f32}input,textarea{width:100%;padding:12px;border:1px solid #d4d8cd;border-radius:9px;font:inherit;margin:7px 0 13px;background:#fff}label{font-size:13px;display:block}textarea{resize:vertical}small{display:block;color:#797b73}.cart-row{border-bottom:1px solid #eee;padding:15px 0}.cart-row button{padding:5px 12px}.total{font-size:25px;font-weight:800;margin:22px 0}.wide{width:100%}.success{padding:40px;background:#e7f0e7;border-radius:18px;margin:25px 0}.ticket{font-size:50px;font-weight:900}.orders{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:25px}.order{background:white;border:1px solid #e1e5da;padding:22px;border-radius:16px}.order.pending{border-top:5px solid #d6a14a}.order.paid{border-top:5px solid #285a46}.order.ready,.order.cancelled{opacity:.7}.badge{font-size:12px;background:#eee9da;padding:6px 10px;border-radius:20px}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{font-size:13px}.order li{margin:8px 0}.receipt{font:14px monospace;width:384px;padding:18px;color:black;background:white;white-space:pre-wrap}.receipt h2{text-align:center}.login{max-width:420px;margin:40px auto}#message{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#253c32;color:white;padding:14px 22px;border-radius:12px;display:none;z-index:10}dialog{border:0;border-radius:18px;max-width:95vw;padding:24px}dialog::backdrop{background:#0007}@media(max-width:900px){.layout{grid-template-columns:1fr}.panel{position:static}.orders{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){main{padding:24px 16px}h1{font-size:30px}.grid,.orders{grid-template-columns:1fr}.brand{font-size:19px}nav{gap:12px;font-size:13px}.receipt{width:100%}}@media print{@page{size:58mm auto;margin:2mm}body>*{display:none!important}body>dialog[open]{display:block!important;position:static;margin:0;padding:0;border:0;width:54mm;max-width:54mm}dialog .actions,dialog>p{display:none!important}.receipt{width:54mm;padding:0;font-size:10px}.receipt h2{font-size:14px}}
/* Operations dashboard */
.toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:25px 0}.toolbar input{margin-bottom:0}.toolbar label{flex:1;min-width:140px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0 28px}.metrics article{background:#fff;border:1px solid #dfe3d9;border-radius:16px;padding:24px}.metrics strong{display:block;font-size:29px;margin:12px 0;white-space:nowrap}.metrics article:first-child{background:#254d3e;color:white}.metrics article:first-child small,.metrics article:first-child span{color:#d4dfd2}.metrics span{font-size:12px;color:#788070;line-height:1.6;display:block}.finance-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:24px}.finance-grid .panel,.section{position:static}.section{margin-top:24px}.cost-row{margin:18px 0;font-size:14px}.bar{height:7px;background:#eeeee5;border-radius:8px;margin-top:8px;overflow:hidden}.bar i{height:100%;background:#c4944d;display:block;border-radius:8px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}th{font-size:12px;color:#737b70;background:#f5f5ee;white-space:nowrap}th,td{padding:13px 12px;border-bottom:1px solid #eee;line-height:1.6}td{vertical-align:top}td small{max-width:280px;overflow-wrap:anywhere}.negative{color:#b94735}.cash-form,.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px}.cash-result{font-size:22px;font-weight:bold;align-self:center}.finance-dialog{width:480px}select{display:block;width:100%;padding:13px 10px;margin:7px 0 13px;border:1px solid #d4d8cd;border-radius:9px;font:inherit;background:white}.section h2{font-size:21px}.section .row{margin-bottom:15px}@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,1fr)}.finance-grid{grid-template-columns:1fr}}@media(max-width:560px){.metrics{gap:10px}.metrics article{padding:16px}.metrics strong{font-size:22px}.cash-form,.form-grid{grid-template-columns:1fr}.toolbar button{flex:1}.section{padding:16px}header{padding:18px 16px}nav{gap:10px}.brand{letter-spacing:1px}}
@media(max-width:560px){.toolbar button{flex:1 1 110px;min-width:100px;white-space:nowrap}.metrics strong{font-size:clamp(17px,5vw,22px);white-space:normal;overflow-wrap:anywhere}}
/* Shared theme: navy / teal / gold, based on the supplied reference. */
:root{--navy:#102f47;--teal:#116b62;--cyan:#008b9c;--gold:#f6cb6e;--page:#f3f6f8;--line:#d5e2ec;--muted:#607789;--sidebar-width:224px}
html{scroll-behavior:smooth}body{background:var(--page);color:var(--navy)}header{border-color:var(--line)}a,.brand{color:var(--navy)}.brand span{color:var(--cyan)}nav a{text-decoration:none;font-size:14px}nav a:hover{color:var(--cyan)}.notice{background:#fff6df;color:#705620;border-bottom:1px solid #f0e4c2;line-height:1.6}h1{font-size:36px;letter-spacing:-.5px}.eyebrow{color:var(--cyan);letter-spacing:2px}.muted,small,.card p,.metrics span{color:var(--muted)}.card,.panel,.order,.metrics article,dialog{border-color:var(--line)}.food-icon{background:linear-gradient(135deg,#eaf0f5,#e9f5ef)}.price{color:var(--teal)}
button{background:var(--teal);border:1px solid transparent;padding:12px 17px;border-radius:9px;transition:background .15s}button:hover:not(:disabled){background:#0b554e}button.secondary{background:#fff;color:var(--navy);border-color:#c7d8e5}button.secondary:hover:not(:disabled){background:#edf4f8;border-color:#91b2c8}button.danger{background:#fff0ed;color:#ac3e35;border-color:#f0d2ce}button.danger:hover:not(:disabled){background:#ffe3de}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:3px}input,textarea,select{border-color:#cbdbe6;color:var(--navy)}
.success{background:linear-gradient(120deg,var(--navy),var(--teal));color:#fff}.success .eyebrow{color:#9ae8e7}.success .ticket{color:var(--gold)}.success button{background:var(--gold);color:var(--navy)}.order.pending{border-top-color:var(--gold)}.order.paid{border-top-color:var(--teal)}.badge{background:#edf4f7;color:var(--navy)}.order.pending .badge{background:#fff3d5}.order.paid .badge{background:#e7f4f1;color:var(--teal)}#message{background:var(--navy);max-width:90vw;z-index:50}dialog{color:var(--navy)}dialog::backdrop{background:#0b263c80}
.metrics article:first-child{background:linear-gradient(115deg,var(--navy),var(--teal));border-color:transparent}.metrics article:first-child strong{color:var(--gold)}.metrics article:first-child small,.metrics article:first-child span{color:#d1eeed}.bar{background:#e6eef2}.bar i{background:linear-gradient(90deg,#048a81,#30aa97)}th{background:#f2f6f9;color:var(--muted)}th,td,.cart-row{border-color:#e5edf3}.section{scroll-margin-top:24px}.negative{color:#ac3e35}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);background:var(--navy);color:#fff;padding:20px 12px;display:flex;flex-direction:column;z-index:20}.sidebar-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-size:15px;font-weight:700;border-bottom:1px solid #ffffff24;padding:0 3px 22px;margin-bottom:20px}.brand-mark{background:#fff;color:var(--teal);border-radius:12px;display:grid;place-items:center;min-width:43px;height:43px;font-size:20px;letter-spacing:-1px}.sidebar-brand small{font-size:10px;color:#85d7ea;font-weight:400;letter-spacing:1px;margin-top:6px}.sidebar nav{flex-direction:column;gap:8px}.sidebar nav a{color:#e5f5ff;display:flex;align-items:center;gap:17px;padding:17px 16px;border-radius:10px;font-size:14px;font-weight:550}.sidebar nav a span{font-size:18px;width:18px;text-align:center}.sidebar nav a:hover{background:#ffffff12;color:#fff}.sidebar nav a[aria-current="page"]{background:#fff;color:var(--navy)}.sidebar footer{margin-top:auto;padding:22px 12px 0}.sidebar footer strong{display:block;font-size:12px;letter-spacing:2px;color:var(--gold)}.sidebar footer span,.sidebar footer small{display:block;color:#85bdcf;font-size:11px;margin-top:7px}
.staff-shell{padding-left:var(--sidebar-width)}.staff-shell>header{padding:18px 32px;min-height:76px}.staff-shell>header .brand{font-size:19px;letter-spacing:2px}.staff-shell>.notice{padding:9px 32px}.staff-shell>main{max-width:1600px;padding:32px;width:100%}.staff-shell h1{font-size:30px}
@media(max-width:1200px){.staff-shell .orders{grid-template-columns:repeat(2,1fr)}.staff-shell .metrics{grid-template-columns:repeat(2,1fr)}.staff-shell .finance-grid{grid-template-columns:1fr}}
@media(max-width:1050px){.staff-shell .layout{grid-template-columns:1fr}.staff-shell .panel{position:static}}
@media(max-width:760px){.staff-shell{padding-left:0}.sidebar{position:static;width:100%;padding:12px}.sidebar-brand{border:0;margin:0;padding:3px 5px 14px}.sidebar nav{flex-direction:row;overflow-x:auto;gap:6px}.sidebar nav a{padding:10px 12px;white-space:nowrap;gap:8px;font-size:13px}.sidebar footer{display:none}.staff-shell>header{display:none}.staff-shell>.notice{padding:9px 16px}.staff-shell>main{padding:24px 16px}.sidebar nav a span{font-size:15px;width:15px}}
@media(max-width:560px){h1,.staff-shell h1{font-size:27px}.staff-shell .orders{grid-template-columns:1fr}.row{flex-wrap:wrap}header{flex-wrap:wrap;gap:14px}.success{padding:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}}
@media print{body{padding:0!important;background:white}.receipt{color:black;background:white}}

.dish-photo{width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:14px}.check-label{display:flex;align-items:center;gap:12px}.check-label input{width:auto;margin:0}.receipt-center{text-align:center}header nav{display:flex;gap:14px;align-items:center}.finance-dialog{max-height:90dvh;overflow:auto}.card .actions{flex-wrap:wrap}input,textarea,select{font-size:16px}@media(max-width:600px){header{gap:8px;flex-wrap:wrap}header nav{gap:10px}.dish-photo{height:150px}.toolbar{align-items:stretch}.form-grid{grid-template-columns:1fr}}
.dialog-error{color:#ac3e35;background:#fff0ed;border-radius:8px;padding:12px}.dialog-error:empty{display:none}@media(max-width:760px){.staff-shell>header{display:flex;padding:12px 16px}.staff-shell>header nav>a{display:none}.staff-shell>header .brand{font-size:16px}}
.ordering .notice{display:none}.order-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.order-heading h1{font-size:28px;margin:0}.order-heading p{font-size:14px;color:var(--muted);margin:6px 0 0}.order-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;min-height:0}.dish-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;align-content:start}.dish-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;padding:16px 10px;background:white;color:var(--navy);border:2px solid var(--line);border-radius:16px;text-align:center;touch-action:manipulation;box-shadow:0 3px 10px #102f4705}.dish-tile:hover:not(:disabled){background:#f0f9f6;border-color:#76b7ac}.dish-tile:active{transform:scale(.98)}.dish-tile.selected{border-color:var(--teal);background:#edf8f3}.dish-quantity{position:absolute;right:9px;top:9px;min-width:32px;padding:5px 8px;background:var(--teal);color:white;border-radius:20px;z-index:1;font-size:13px}.dish-quantity[hidden]{display:none}.tile-icon{font-size:42px;line-height:1.25;display:block;margin:0 0 4px}.tile-photo{width:100%;height:100px;object-fit:cover;border-radius:9px;margin-bottom:4px}.tile-name{font-size:18px;line-height:1.35;overflow-wrap:anywhere}.tile-subtitle{font-size:12px;font-weight:400;color:var(--muted);line-height:1.3}.tile-category{font-size:11px;color:var(--muted);font-weight:400}.tile-price{font-size:20px;color:var(--teal);font-weight:800;margin-top:5px}.order-basket{display:flex;flex-direction:column;min-height:0;background:white;border:1px solid var(--line);border-radius:16px;padding:16px;overflow:hidden}.basket-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}.basket-heading h2{font-size:20px;margin:0}.basket-heading>span{font-size:13px;color:var(--muted)}.basket-items{flex:1;overflow:auto;min-height:100px;overscroll-behavior:contain}.basket-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0;border-bottom:1px solid #e5edf3}.basket-item-info{min-width:0}.basket-item-info strong{display:block;font-size:14px;overflow-wrap:anywhere}.basket-item-info>span{font-size:13px;color:var(--muted)}.quantity-controls{display:flex;gap:6px;align-items:center;flex-shrink:0;font-size:14px}.quantity-controls button{min-height:42px;min-width:38px;padding:6px;font-size:18px}.quantity-controls>span{min-width:18px;text-align:center}.basket-empty{text-align:center;color:var(--muted);padding:28px 4px;font-size:14px}.basket-empty>span{font-size:36px}.basket-footer{flex-shrink:0;padding-top:12px}.order-details{font-size:12px;color:var(--muted)}.order-details summary{cursor:pointer;padding:8px 0;min-height:36px}.order-details input,.order-details textarea{padding:8px;margin:4px 0 8px}.basket-total{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:16px}.basket-total strong{font-size:26px}.basket-help{font-size:11px;line-height:1.4;text-align:center;color:var(--muted);margin:9px 0}.basket-footer #reload-menu{padding:4px;min-height:32px;font-size:12px}.basket-footer #submit{font-size:14px;min-height:48px}
@media(min-width:740px) and (min-height:600px){body.ordering{height:100dvh;overflow:hidden;padding-left:0}.ordering>.sidebar{display:none}.ordering>header,.staff-shell.ordering>header{display:flex;height:64px;min-height:64px;padding:8px 24px}.ordering>header .brand{font-size:19px}.ordering>main,.staff-shell.ordering>main{display:flex;flex-direction:column;height:calc(100dvh - 64px);max-width:1600px;padding:18px 24px}.ordering .order-heading{flex-shrink:0;margin-bottom:14px}.ordering .order-workspace{flex:1;min-height:0}.ordering .dish-grid{overflow:auto;grid-template-rows:repeat(2,minmax(170px,1fr));grid-auto-rows:minmax(170px,1fr);align-content:stretch;overscroll-behavior:contain;padding:3px}.ordering .order-basket{height:100%}.ordering .order-details[open]{max-height:190px;overflow:auto}.ordering .tile-photo{height:clamp(65px,13dvh,130px)}}
@media(min-width:740px) and (max-width:1000px) and (min-height:600px){.ordering .dish-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(135px,1fr));grid-auto-rows:minmax(135px,1fr)}.ordering .tile-icon{font-size:32px}.ordering .tile-photo{height:65px}.ordering .dish-tile{padding:9px}.ordering .tile-name{font-size:16px}.ordering .tile-category{display:none}.ordering .tile-price{font-size:18px;margin-top:1px}.ordering .order-workspace{grid-template-columns:minmax(0,1fr) 280px;gap:12px}}
@media(max-width:739px){.order-workspace{grid-template-columns:1fr}.dish-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.order-basket{min-height:340px}.order-heading h1{font-size:25px}.tile-name{font-size:16px}.tile-photo{height:95px}.ordering>main{padding:18px 16px}.ordering .basket-items{max-height:300px}}