:root{--coral:#e66c63;--black:#25272a;--grey:#eef0f2;--line:#d9dde0;--blue:#56a6d6;--yellow:#efbd5d;--green:#4da79d;--red:#e36d62;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC",sans-serif;color:#4b5055}*{box-sizing:border-box}html,body,#pos-app{margin:0;width:100%;min-height:100%;background:#eef0f2}body{min-width:760px;overflow:hidden}button{font:inherit;cursor:pointer}.status{height:25px;background:#151618;color:#fff;display:flex;justify-content:space-between;padding:4px 13px;font-size:11px}.floor{height:calc(100vh - 25px);min-height:595px;display:grid;grid-template-columns:70px minmax(620px,1fr) 57px;background:#f4f5f6;overflow:hidden}.floor-tools,.right-tools{background:var(--coral);display:flex;flex-direction:column;align-items:center;padding:13px 0;gap:14px}.tool{width:39px;height:39px;border:0;background:transparent;color:#fff;border-radius:7px;font-size:15px;font-weight:650}.tool.active,.tool:hover{background:#ffffff35}.floor-plan{position:relative;min-height:0;background:#f6f6f5;margin:18px 0;overflow:hidden}.floor-title{position:absolute;top:13px;left:0;right:0;text-align:center;color:#a3a7aa;font-size:14px}.floor-title b{color:#62676b;margin:0 24px}.table-card{position:absolute;width:86px;height:72px;border:0;color:#fff;text-align:left;padding:9px;border-radius:2px;box-shadow:0 1px 4px #0003}.table-card.empty{background:#2e3033}.table-card.red{background:var(--red)}.table-card.yellow{background:var(--yellow)}.table-card.green{background:var(--green)}.table-card.blue{background:var(--blue)}.table-card.round{border-radius:50%;width:78px;height:78px;text-align:center;padding-top:16px}.table-card.round .table-name{font-size:17px;padding-right:14px}.table-card.round .plus{right:12px;top:23px;font-size:18px}.table-name{font-size:19px;display:block;line-height:1}.table-info{font-size:11px;display:block;opacity:.9;margin-top:6px}.plus{position:absolute;right:9px;top:15px;font-size:26px;font-weight:200}.receipt{position:absolute;right:6px;bottom:6px;background:#fff;color:#73777b;font-size:10px;padding:3px}.right-tools{padding-top:14px}.right-tools .floor-level{font-size:14px;color:#fff;margin:3px 0 14px}.zone-panel{padding:38px 42px;max-width:900px;margin:auto}.zone-panel header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dadde0;padding:14px 0}.zone-panel header b{font-size:20px;display:block}.zone-panel header small{color:#8c9297;margin-top:5px;display:block}.zone-panel header button,.zone-panel article button{border:0;background:var(--coral);color:#fff;padding:9px 14px;border-radius:3px}.zone-panel>p{color:#9aa0a5;text-align:center;padding:60px}.zone-panel article{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:center;padding:16px 4px;border-bottom:1px solid #e4e6e8}.zone-panel article span{font-size:13px;color:#71777c}.pos-view{height:calc(100vh - 25px);min-height:595px;display:grid;grid-template-columns:320px 1fr;background:#f3f4f5;min-height:0}.order-pane{background:#fff;display:flex;flex-direction:column;min-height:0}.order-head{background:var(--coral);color:#fff;padding:12px 15px}.order-head .row{display:flex;align-items:center;justify-content:space-between}.order-head .large{font-size:24px;font-weight:300}.order-head .sub{font-size:11px;opacity:.9;margin-top:6px}.order-meta{padding:11px 15px;border-bottom:1px solid #e5e7e8;font-size:12px}.order-meta .customer{display:block;margin-top:8px;color:#70757a}.items{overflow:auto;flex:1;padding:0 14px}.item{padding:12px 2px;border-bottom:1px solid #eceef0;display:grid;grid-template-columns:1fr auto;gap:9px;background:#fff;border:0;width:100%;text-align:left}.item strong{font-size:14px}.item small{display:block;color:#969ba0;margin-top:3px;font-size:11px}.item .qty{font-size:18px;color:#686d72}.summary{border-top:1px solid #e0e3e5;padding:10px 15px}.summary div{display:flex;justify-content:space-between;font-size:12px;margin:4px 0}.summary strong{font-size:22px;color:#3f94d1}.order-bottom{display:flex;border-top:1px solid #dfe2e4;height:58px}.order-bottom button{flex:1;border:0;background:#fff;color:#70767b;font-size:13px}.order-bottom button.primary{background:var(--coral);color:#fff;font-weight:700}.menu-pane{min-width:0;display:flex;flex-direction:column}.categories{height:52px;background:#fff;border-bottom:1px solid #d7dade;display:flex;padding-left:10px}.categories button{min-width:100px;border:0;border-right:1px solid #eceef0;background:#fff;color:#999fa4}.categories button.active{color:#3f4448;border-top:3px solid var(--coral);font-weight:600}.products{padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px;overflow:auto;align-content:start}.product{height:142px;border:3px solid #fff;padding:0;position:relative;text-align:left;color:#fff;background:linear-gradient(140deg,#c9a786,#594237);box-shadow:0 1px 4px #0003;overflow:hidden}.product:before{content:"";position:absolute;inset:12px 12px 37px;border-radius:50%;background:radial-gradient(ellipse at 50% 48%,#f7f0dc 0 24%,#bfa582 27% 43%,#795341 46% 55%,transparent 57%);opacity:.94}.product:nth-child(3n+2){background:linear-gradient(140deg,#d6e0ba,#5e8958)}.product:nth-child(3n){background:linear-gradient(140deg,#bbd0df,#617c92)}.product .pname{position:absolute;left:7px;bottom:6px;text-shadow:0 1px 2px #000}.product .price{position:absolute;right:7px;bottom:6px;font-size:11px}.pop-bg{position:fixed;inset:0;background:#0004;display:grid;place-items:center;z-index:5}.choice{width:420px;background:#fff;box-shadow:0 13px 34px #0004}.choice header{padding:16px 20px;border-bottom:1px solid #ddd;font-size:18px}.choice .choice-body{padding:16px 20px}.guest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.guest-grid button{border:1px solid #dadddf;background:#fff;padding:15px;border-radius:3px;color:#5d6367}.guest-grid button.selected{background:var(--coral);border-color:var(--coral);color:#fff}.choice footer{padding:13px 20px;border-top:1px solid #ddd;display:flex;justify-content:flex-end;gap:9px}.choice footer button{border:0;padding:9px 18px}.choice footer .confirm{background:var(--coral);color:#fff}.field{display:grid;gap:6px;margin:10px 0;color:#60666b;font-size:13px}.field input{height:36px;border:1px solid #d9dde0;border-radius:3px;padding:7px;font:inherit}.modifier-list{display:grid;gap:5px}.modifier-list label{border-bottom:1px solid #eee;padding:10px 2px;display:flex;justify-content:space-between}.floor-summary{position:absolute;z-index:3;width:240px;background:#fff;box-shadow:0 5px 17px #0003}.floor-summary header{background:var(--yellow);color:#fff;padding:12px}.floor-summary main{padding:10px;font-size:12px;line-height:1.9}.notice{position:fixed;right:20px;bottom:20px;background:#34383c;color:#fff;padding:12px 16px;z-index:8;box-shadow:0 3px 12px #0003}@media(max-width:920px){.floor{grid-template-columns:58px minmax(620px,1fr) 48px}.floor-tools,.right-tools{gap:7px}.products{grid-template-columns:repeat(auto-fill,minmax(106px,1fr))}.product{height:118px}.pos-view{grid-template-columns:280px 1fr}}
/* Photographic menu cards: local food sheet cropped per tile for iPad POS. */
.products .product{background-color:#665044;background-image:linear-gradient(0deg,#000a 0 26%,transparent 61%),url('/assets/pos-menu-food-v1.png');background-size:100% 100%,300% 300%;background-position:center,0% 0%}.products .product:before{inset:0;border-radius:0;background:linear-gradient(145deg,transparent 48%,#0002);pointer-events:none}.products .product:nth-child(2){background-position:center,50% 0%}.products .product:nth-child(3){background-position:center,100% 0%}.products .product:nth-child(4){background-position:center,0% 50%}.products .product:nth-child(5){background-position:center,50% 50%}.products .product:nth-child(6){background-position:center,100% 50%}.products .product:nth-child(7){background-position:center,0% 100%}.products .product:nth-child(8){background-position:center,50% 100%}.products .product:nth-child(9){background-position:center,100% 100%}.products .product .pname,.products .product .price{z-index:1;text-shadow:0 1px 3px #000}.products .product .pname{font-weight:650}
/* The iPad reference keeps adjustment and customer views as broad cards instead of phone-like dialogs. */
.choice:has(.item-quantity){width:min(660px,calc(100vw - 70px));border-top:4px solid #efefef}.choice:has(.item-quantity) header{text-align:center;font-size:20px;font-weight:600;padding:17px 24px}.choice:has(.item-quantity) .choice-body{padding:0}.choice:has(.item-quantity) .item-quantity{display:grid;grid-template-columns:1fr 48px 50px 48px auto;align-items:center;gap:10px;padding:17px 24px;background:#f6f7f7;border-bottom:1px solid #d9dcdf}.choice:has(.item-quantity) .item-quantity button{height:36px;border:1px solid #d9dde0;background:#fff;color:#565b60;font-size:22px}.choice:has(.item-quantity) .item-quantity .remove-item{font-size:13px;color:#d96058;border:0;background:transparent}.choice:has(.item-quantity) .modifier-list{grid-template-columns:repeat(2,1fr);gap:0;padding:8px 24px 20px}.choice:has(.item-quantity) .modifier-list label{padding:15px 6px;border-bottom:1px solid #e6e8ea}.choice:has(.item-quantity) footer{background:#fafafa}.choice:has(.categories){width:min(610px,calc(100vw - 70px))}.choice:has(.categories) header{text-align:center;font-size:20px}.choice:has(.categories) .modifier-list label{padding:13px 4px}