*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif;
background:#f7f7f7;color:#222;font-size:14px;
/* 整页纵向 flex：顶栏/搜索/提示条自然占位，主体吃掉剩余高度。
   之前用 fixed + 写死 margin-top 去躲，提示条换行就被盖住（2026-08-17 踩过） */
height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}

/* ===== 顶栏 ===== */
.topbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:11px 14px;
background:linear-gradient(135deg,#c0392b,#8e2b20);color:#fff}
.tb-main{flex:1;min-width:0}
.tb-name{font-size:16px;font-weight:700;line-height:1.25}
.tb-sub{font-size:11px;opacity:.8;margin-top:2px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.tb-tbl{flex:0 0 auto;background:rgba(255,255,255,.2);border-radius:9px;
padding:5px 11px;font-size:19px;font-weight:800;line-height:1;text-align:center}
.tb-tbl span{display:block;font-size:10px;font-weight:400;opacity:.85;margin-top:2px}

/* ===== 搜索 ===== */
.searchbar{flex:0 0 auto;padding:8px 12px;background:#fff;border-bottom:1px solid #f0f0f0}
.searchbar input{width:100%;border:none;background:#f2f2f2;border-radius:16px;
padding:8px 13px;font-size:13px;outline:none}

/* ===== 小料提示 ===== */
.notice{flex:0 0 auto;background:#fff6dd;color:#8a6516;font-size:12.5px;
padding:9px 14px;line-height:1.55;border-bottom:1px solid #f0e2bb;
border-left:3px solid #e6a817;font-weight:500}

/* ===== 主体：左分类 + 右菜品 ===== */
.main{flex:1 1 auto;display:flex;min-height:0}
.side{flex:0 0 84px;background:#f0f0f0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.side::-webkit-scrollbar{display:none}
.side button{display:block;width:100%;border:none;background:transparent;
padding:13px 6px;font-size:12px;color:#666;cursor:pointer;line-height:1.35;
position:relative;text-align:center}
.side button.on{background:#fff;color:#c0392b;font-weight:700}
.side button.on::before{content:"";position:absolute;left:0;top:50%;
transform:translateY(-50%);width:3px;height:17px;background:#c0392b;border-radius:0 2px 2px 0}
.side button .n{display:block;font-size:9px;color:#bbb;font-weight:400;margin-top:1px}
.side button.on .n{color:#e08b80}

.list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;
padding-bottom:20px}
.list::-webkit-scrollbar{display:none}
.grp{padding:0 12px}
.grp h2{font-size:13px;color:#888;font-weight:600;padding:11px 0 7px;
position:sticky;top:0;background:#fff;z-index:2}
.grp h2 em{font-style:normal;color:#e67e22;font-size:11px;font-weight:400;margin-left:4px}

/* ===== 菜品卡 ===== */
.dish{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #f5f5f5}
.dish .thumb{flex:0 0 62px;height:62px;border-radius:8px;background:#f7f4f0;
display:flex;align-items:center;justify-content:center;font-size:31px}
.dish .mid{flex:1;min-width:0;display:flex;flex-direction:column}
.dish .nm{font-size:14.5px;font-weight:600;line-height:1.35}
.dish .ds{font-size:11px;color:#aaa;margin-top:2px;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dish .btm{display:flex;align-items:flex-end;justify-content:space-between;
margin-top:auto;padding-top:4px}
.dish .pr{font-size:16px;color:#c0392b;font-weight:800;line-height:1}
.dish .pr small{font-size:10.5px;font-weight:400;color:#aaa;margin-left:1px}
.tg{display:inline-block;font-size:9.5px;padding:1px 4px;border-radius:3px;
margin-left:4px;vertical-align:1.5px;font-weight:500}
.tg-hot{background:#ffe8e6;color:#c0392b}
.tg-new{background:#e6f1ff;color:#2874a6}
.tg-spicy{background:#fff0e3;color:#ca6f1e}
.tg-must{background:#fff6dc;color:#96690f}

/* 加减控件 */
.ctl{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ctl .q{font-size:15px;font-weight:700;min-width:15px;text-align:center;color:#333}
.ctl button{width:25px;height:25px;border-radius:50%;border:none;font-size:17px;
line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ctl .minus{background:#fff;border:1.5px solid #ddd;color:#999}
.ctl .plus{background:#c0392b;color:#fff;font-weight:600}
.ctl .minus.hide,.ctl .q.hide{display:none}

/* 售完 */
.dish.out{opacity:.42}
.dish.out .nm,.dish.out .pr{text-decoration:line-through}
.dish.out .ctl{display:none}
.dish.out .btm::after{content:"今日售完";font-size:11px;color:#e74c3c;font-weight:600}

/* ===== 底部购物车条 ===== */
.cartbar{flex:0 0 auto;height:58px;background:#fff;
border-top:1px solid #eee;display:flex;align-items:center;gap:11px;padding:0 13px;
box-shadow:0 -2px 11px rgba(0,0,0,.07);z-index:30;
padding-bottom:env(safe-area-inset-bottom)}
.cb-icon{position:relative;font-size:27px;flex:0 0 auto;cursor:pointer;line-height:1}
.cb-icon .badge{position:absolute;top:-3px;right:-6px;background:#e74c3c;color:#fff;
font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;
display:flex;align-items:center;justify-content:center;padding:0 4px}
.cb-icon .badge.zero{display:none}
.cb-sum{flex:1;min-width:0}
.cb-total{font-size:19px;font-weight:800;color:#c0392b;line-height:1.1}
.cb-tip{font-size:10.5px;color:#999;margin-top:1px}
.cartbar button{flex:0 0 auto;background:#c0392b;color:#fff;border:none;
padding:10px 25px;border-radius:20px;font-size:15px;font-weight:600;cursor:pointer}
.cartbar button:disabled{background:#ccc}

/* ===== 弹层 ===== */
.mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;
align-items:flex-end;justify-content:center}
.mask.on{display:flex}
.sheet{background:#fff;border-radius:15px 15px 0 0;width:100%;max-width:540px;
max-height:82vh;overflow-y:auto;padding:17px}
.sheet h2{font-size:16px;margin-bottom:11px;display:flex;justify-content:space-between;
align-items:center}
.sheet h2 .clr{font-size:12px;color:#999;font-weight:400;cursor:pointer}
.sheet .li{display:flex;align-items:center;gap:9px;padding:9px 0;
border-bottom:1px solid #f5f5f5;font-size:14px}
.sheet .li .lnm{flex:1;min-width:0}
.sheet .li .lpr{color:#c0392b;font-weight:700;flex:0 0 auto}
.sheet .li.fee{color:#e67e22;font-size:13px}
.sheet .li.fee .lpr{color:#e67e22}
.sheet .tt{border-top:2px solid #c0392b;margin-top:11px;padding-top:11px;
text-align:right;font-size:17px;font-weight:800;color:#c0392b}
.fld{margin:13px 0}
.fld label{display:block;font-size:12.5px;color:#666;margin-bottom:5px}
.fld label b{color:#c0392b}
.fld input{width:100%;border:1px solid #e0e0e0;border-radius:8px;padding:10px;
font-size:16px;outline:none}
.fld input:focus{border-color:#c0392b}
.paybtns{display:flex;gap:8px;margin-top:14px}
.paybtns button{flex:1;padding:13px 5px;border:none;border-radius:9px;
font-size:15px;font-weight:600;cursor:pointer}
.pb-cash{background:#f2f2f2;color:#444}
.pb-code{background:#c0392b;color:#fff}
.paybtns button:disabled{opacity:.5}

/* 下单成功 */
.ok{text-align:center;padding:12px 6px}
.ok .big{font-size:42px}
.ok h2{font-size:19px;color:#27ae60;margin:6px 0;display:block}
.ok .no{font-size:27px;font-weight:800;color:#c0392b;letter-spacing:1px;margin:7px 0}
.ok p{font-size:13px;color:#666;line-height:1.75}
.ok .qr{width:185px;margin:11px auto;display:block;border:1px solid #eee;border-radius:8px}
.ok .warn{background:#fff8e6;color:#8a6516;font-size:12px;padding:9px;
border-radius:7px;margin-top:10px;line-height:1.6}
.ok button{margin-top:13px;padding:11px 29px;background:#c0392b;color:#fff;
border:none;border-radius:21px;font-size:15px;cursor:pointer}

/* 本桌已点 */
.mine{background:#fffdf5;border:1px solid #f5e9c8;border-radius:8px;
margin:10px 12px 0;padding:9px 11px}
.mine h3{font-size:12px;color:#8a6516;margin-bottom:5px}
.mine .row{display:flex;justify-content:space-between;font-size:11.5px;
color:#8a6516;padding:2px 0;opacity:.85}
.mine .gt{border-top:1px dashed #e5d5a8;margin-top:4px;padding-top:4px;
font-weight:700;opacity:1}

.toast{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);
background:rgba(0,0,0,.84);color:#fff;padding:11px 19px;border-radius:9px;
font-size:14px;z-index:99;display:none;max-width:78%;text-align:center;line-height:1.5}
.empty-search{text-align:center;color:#bbb;padding:44px 0;font-size:13px}

/* ===== 后厨页（深色，不受上面影响） ===== */
body.k-body{background:#141414;color:#eee;padding:10px;padding-bottom:56px;
/* 后厨页不用 flex 布局，恢复普通滚动（顾客页那套 flex 别影响它） */
display:block;height:auto;overflow:auto}
.k-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.k-hd h1{font-size:17px;color:#e74c3c;flex:1;min-width:130px}
.k-hd .kpi{display:flex;gap:14px;font-size:11px;color:#888;text-align:center}
.k-hd .kpi b{display:block;font-size:17px;color:#fff;font-weight:800;line-height:1.2}
.k-hd .kpi .g b{color:#2ecc71}
#alert{display:none;position:fixed;top:0;left:0;right:0;background:#e74c3c;color:#fff;
text-align:center;padding:12px;font-size:16px;font-weight:700;z-index:99}
.orders{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:9px}
.empty{grid-column:1/-1;text-align:center;color:#555;padding:48px 0;font-size:15px}
.od{background:#222;border-radius:9px;padding:10px;border-left:4px solid #555}
.od.chk{border-left-color:#f39c12;background:#2a2312}
.od.new{border-left-color:#e74c3c;background:#2a1717}
.od.cook{border-left-color:#27ae60;background:#16281a}
.od.srv{border-left-color:#3498db;background:#161f2a}
.od.pay{border-left-color:#555;opacity:.5}
.od.cxl{border-left-color:#444;opacity:.35}
.od .oh{display:flex;align-items:baseline;gap:7px;margin-bottom:5px}
.od .tbl{font-size:17px;font-weight:800;color:#f39c12}
.od .no{font-size:11.5px;color:#888;flex:1}
.od .tm{font-size:11px;color:#666}
.od .meta{font-size:11px;color:#888;margin-bottom:5px}
.od .meta .pd{color:#2ecc71}
.od .meta i{color:#e67e22;font-style:normal}
.od .its{font-size:13px;line-height:1.8;color:#ddd;margin-bottom:5px}
.od .its span{display:inline-block;margin-right:9px}
.od .its b{color:#e74c3c;font-weight:700}
.od .note{font-size:11px;color:#f39c12;background:#2b2410;padding:4px 6px;
border-radius:4px;margin-bottom:5px}
.od .bot{display:flex;justify-content:space-between;align-items:center;font-size:11px;
color:#888;border-top:1px solid #333;padding-top:5px}
.od .amt{font-size:15px;font-weight:800;color:#fff}
.od .act{display:flex;gap:5px;margin-top:7px}
.od .act button{flex:1;padding:7px 4px;border:none;border-radius:5px;font-size:12px;
font-weight:600;cursor:pointer}
.od .act .go,.od .act .pay2{background:#e74c3c;color:#fff}
.od .act .ok{background:#27ae60;color:#fff}
.od .act .fin{background:#3498db;color:#fff}
.od .act .bk,.od .act .cxl{background:#3a3a3a;color:#aaa;flex:0 0 60px}
.k-bar{position:fixed;bottom:0;left:0;right:0;background:#1c1c1c;
border-top:1px solid #2c2c2c;padding:7px 10px;display:flex;gap:7px}
.k-bar button{background:#333;color:#ccc;border:none;padding:7px 13px;
border-radius:5px;font-size:12px;cursor:pointer}

/* ===== 我的订单 ===== */
.tb-my{flex:0 0 auto;position:relative;font-size:23px;line-height:1;cursor:pointer;
padding:3px 2px 3px 4px}
.tb-my .mybadge{position:absolute;top:-2px;right:-5px;background:#f39c12;color:#fff;
font-size:9.5px;font-weight:700;min-width:15px;height:15px;border-radius:8px;
display:flex;align-items:center;justify-content:center;padding:0 3px}
.tb-my .mybadge.zero{display:none}

.myord{border:1px solid #f0f0f0;border-radius:10px;margin-bottom:10px;overflow:hidden}
.myord .mh{display:flex;align-items:center;gap:8px;padding:9px 11px;background:#fafafa;
border-bottom:1px solid #f0f0f0}
.myord .mh .mno{font-size:13px;font-weight:700;color:#c0392b}
.myord .mh .mtm{font-size:11px;color:#aaa;flex:1}
.myord .mh .mst{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}
.st-chk{background:#fff4d9;color:#96690f}
.st-new{background:#ffe8e6;color:#c0392b}
.st-cook{background:#e3f6e8;color:#1e7e42}
.st-srv{background:#e6f1ff;color:#2874a6}
.st-pay{background:#f0f0f0;color:#888}
.st-cxl{background:#f5f5f5;color:#bbb}
.myord .mb{padding:7px 11px}
.myord .mi{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;
color:#444}
.myord .mi .miq{color:#999;font-size:12px;margin-left:3px}
.myord .mi.mfee{color:#e67e22;font-size:12px}
.myord .mf{display:flex;justify-content:space-between;align-items:center;
padding:7px 11px;border-top:1px dashed #eee;font-size:12px;color:#999}
.myord .mf b{font-size:15px;color:#c0392b}
.mygrand{background:#fff6dd;border:1px solid #f0e2bb;border-radius:10px;padding:11px;
display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.mygrand span{font-size:13px;color:#8a6516}
.mygrand b{font-size:20px;color:#c0392b}
.mytip{font-size:11.5px;color:#aaa;text-align:center;margin-top:11px;line-height:1.6}
.myempty{text-align:center;color:#bbb;padding:38px 0;font-size:13.5px;line-height:1.8}
.okbtns{display:flex;gap:8px;margin-top:14px}
.okbtns button{flex:1;padding:11px 5px;border:none;border-radius:21px;
font-size:14.5px;font-weight:600;cursor:pointer;margin-top:0}
.okbtns .ob-my{background:#f2f2f2;color:#444}
.okbtns .ob-go{background:#c0392b;color:#fff}