/* 红黄主题 · 依据纳纳《麦麦现拼-UI预览方案》2026-10-18。只覆盖样式，不改业务逻辑。不使用官方 logo/金拱门/官方吉祥物。 */
:root{--red:#DA291C;--red-d:#B51F14;--yel:#FFC72C;--yel-l:#FFE7A3;--yel-d:#D9A400;--cream:#FFF8EC;--paper:#FFF8EC;--ink:#3A1A0E;--mut:#8A6A55;--muted:#8A6A55;--line:#FFE7A3;--soft:#FFF1CF;--gold:#FFC72C}
body{background:var(--cream);color:var(--ink);font-family:"PingFang SC","Noto Sans CJK SC",system-ui,sans-serif}
.ico{width:22px;height:22px;object-fit:contain;vertical-align:-5px;margin-right:6px}

/* 顶栏：经典深棕「麦麦」+ 麦麦红「现拼」，加高约 2.5 倍，底下红黄两道边 */
.topbar{max-width:none;background:var(--yel);color:var(--ink);border:0;border-bottom:6px solid var(--red);box-shadow:0 3px 0 var(--red-d);padding:34px max(18px,calc((100% - 1120px)/2 + 32px)) 30px;min-height:170px;margin-bottom:4px}
.wordmark{display:flex;align-items:center;gap:14px;letter-spacing:0}
.wordmark img{width:96px;height:96px;object-fit:contain;flex-shrink:0}
.wordmark .wm-text{color:var(--ink)}
.wm-text b{display:block;font-size:40px;font-weight:900;letter-spacing:2px;line-height:1.15;color:var(--ink)}
.wm-text b span{color:var(--red)}
.wm-text small{display:block;color:var(--red-d);font-size:15px;font-weight:800;letter-spacing:1px;margin-top:6px}
.badge{background:#fff;border:0;color:var(--ink);font-weight:700;align-self:start}

/* 首屏：除大标题外字号放大一倍 */
h1 span{color:var(--red)}
.hero .eyebrow{font-size:22px;letter-spacing:2px}
.hero .intro{font-size:22px;line-height:1.75;color:var(--mut)}
.store-panel .eyebrow{font-size:20px;color:var(--red)}
.store-panel .eyebrow .ico{width:44px;height:44px;vertical-align:-14px}
.store-panel p.muted{font-size:16px}
.hero-art{background:radial-gradient(circle,#FFE7A3 0,#FFF1CF 62%,transparent 63%);width:300px;height:300px}
.mascot{width:86%;height:86%;object-fit:contain}
.notice{background:#FFF1CF;border:2px solid var(--yel-l);border-radius:16px;font-size:15px}

/* 衣服吊牌标签：尖头、穿绳孔、内圈缝线 */
.hero-notes{display:flex;flex-wrap:wrap;gap:16px 14px;margin-top:26px}
.hero-notes span:before{content:none}
.hang{position:relative;display:inline-flex;align-items:center;font-size:18px;font-weight:800;padding:10px 18px 10px 34px;clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%);filter:drop-shadow(0 3px 0 #0000001a)}
.hang:before{content:'';position:absolute;left:12px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--cream);box-shadow:inset 0 1px 2px #0004}
.hang:after{content:'';position:absolute;inset:4px 5px 4px 20px;border:1.5px dashed currentColor;opacity:.45;pointer-events:none}
.hang.y{background:var(--yel);color:var(--ink);transform:rotate(-3deg)}
.hang.r{background:var(--red);color:#fff;transform:rotate(2deg)}
.hang.c{background:var(--ink);color:var(--yel);transform:rotate(-1.5deg)}
.hero-art .art-note{position:absolute;bottom:-6px;right:-10px;left:auto;background:var(--yel);color:var(--ink);border:0;border-radius:0;box-shadow:none;font-size:18px;padding:10px 18px 10px 34px;transform:rotate(-6deg)}
.hero-art .art-note:before{background:#fff}
.hero-art .art-note i{display:none}

/* 按钮：厚游戏按钮 */
button{border-radius:99px;font-weight:800}
.primary{background:var(--red);border:0;color:#fff;box-shadow:0 3px 0 var(--red-d)}
.btn-y{background:var(--yel);border:0;color:var(--ink);box-shadow:0 3px 0 var(--yel-d)}
.primary:active,.btn-y:active{transform:translateY(3px);box-shadow:none}
.primary.sm{padding:5px 12px;font-size:12px}

/* 选店胶囊 */
.store-panel{background:#fff;border:2px solid var(--yel-l);border-radius:16px}
.store-panel select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 4px}
.tag{display:inline-block;background:var(--yel);color:var(--ink);border:1.5px solid var(--yel);border-radius:99px;padding:4px 12px;font-size:13px;font-weight:700;box-shadow:none;margin:0}
.tag.off{background:#fff;font-weight:500}
#new-group{padding:11px 22px}

/* 标签页 */
.tabs{border-bottom:2px solid var(--yel-l)}
.tabs .active{border-bottom:3px solid var(--red);font-weight:800}
.tabs span{background:var(--yel);color:var(--ink);border-radius:99px}

/* 拼单卡片：图标 · 文字 · 拼！ */
.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card{background:#fff;border:2px solid var(--yel-l);border-radius:16px;padding:12px 14px;flex-direction:row;align-items:center;gap:10px}
.card.urgent{border-color:#F6B3AC}
.card.mine{border-color:var(--yel)}
.card img.food{width:66px;height:56px;object-fit:contain;mix-blend-mode:normal;align-self:center;flex-shrink:0}
.card .t{flex:1;min-width:0}
.card{position:relative;padding-top:46px}
.card .t b{padding-right:0}
.corner{position:absolute;top:10px;right:12px;display:inline-flex;align-items:center;gap:4px;background:#FFF1F0;color:var(--red);border:2px solid #F6B3AC;border-radius:99px;padding:2px 10px 2px 4px;font-size:14px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.corner img{width:24px;height:24px;object-fit:contain}
.corner.ready{background:#FFF8E1;color:var(--ink);border-color:var(--yel)}
.corner.done{background:#EEF7EE;color:#2e7d32;border-color:#b7dfb9;padding-left:10px}
.card.urgent .corner{background:var(--red);color:#fff;border-color:var(--red);animation:tick 1s infinite}
@keyframes tick{50%{transform:scale(1.06)}}
.card .t b{display:block;font-size:15px}
.card .t b em{font-style:normal;white-space:nowrap;display:inline-block;font-size:11px;font-weight:700;background:var(--yel);border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:2px}
.card .t .meal-name{color:var(--ink);font-weight:600}
.card .t span{display:block;font-size:12px;color:var(--mut);line-height:1.5}
.timer{font-size:12px;color:var(--red);font-weight:700;font-variant-numeric:tabular-nums}
.card button{flex-shrink:0;padding:9px 16px;font-size:14px}
.card button:not(.primary):not(.btn-y){background:#fff;border:1.5px solid var(--yel)}

/* 别人的单＝麦麦黄底；我的单＝麦麦红底 */
.card{background:var(--yel);border-color:var(--yel-d);box-shadow:0 4px 0 var(--yel-d)}
.card.urgent{border-color:var(--red)}
.card .t span{color:#5a3a1e}
.card .t .allow{background:#fff;color:var(--ink)}
.card button:not(.primary):not(.btn-y){background:#fff;border-color:#fff}
.card.mine{background:var(--red);border-color:var(--red-d);box-shadow:0 4px 0 var(--red-d);color:#fff}
.card.mine .t b,.card.mine .t .meal-name{color:#fff}
.card.mine .t span{color:#FFE7A3}
.card.mine .t b em{background:var(--yel);color:var(--ink)}
.card.mine .t .allow{background:#fff;color:var(--red-d)}
.card .corner{background:#fff}
.card.mine .corner{border-color:#fff}

/* 卡片放大：字号、行距、图标（倒计时角标、我的卡片、拼！保持原样） */
.card{gap:16px;padding:52px 18px 18px}
.card img.food{width:104px;height:84px}
.card .t b{font-size:20px;line-height:1.45}
.card .t .meal-name{font-size:16px;margin-top:4px}
.card .t .allow{font-size:14px;padding:2px 12px;margin:8px 0}
.card .t span{font-size:15px;line-height:1.7}
@media(max-width:560px){
  .card{gap:12px;padding:50px 14px 16px}
  .card img.food{width:80px;height:66px}
  .card .t b{font-size:17px}
  .card .t .meal-name{font-size:14px}
  .card .t .allow{font-size:13px}
  .card .t span{font-size:13px;line-height:1.65}
}

/* 空状态 */
.empty{border:0;padding:30px 20px;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:4px}
.empty img{width:120px;filter:grayscale(.2)}
.empty b{color:var(--ink);font-size:16px;margin-top:8px}
.empty button{margin-top:12px}

/* 薯条 loading */
.fries-ld{grid-column:1/-1;text-align:center;padding:20px 0;color:var(--mut);font-size:12px}
.fries-ld .box{position:relative;width:120px;aspect-ratio:639/530;margin:auto}
.fries-ld .box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fries-ld .grey{filter:grayscale(1) opacity(.55)}
.fries-ld .color{animation:fill 1.6s infinite ease-in-out}
@keyframes fill{0%{clip-path:inset(100% 0 0 0)}80%,100%{clip-path:inset(0 0 0 0)}}
.fries-ld .sp{position:absolute;color:#ffd63c;font-size:16px;animation:tw 1.2s infinite ease-in-out}
.fries-ld .sp:nth-of-type(1){left:0;top:4%}.fries-ld .sp:nth-of-type(2){right:0;top:8%;animation-delay:.4s}.fries-ld .sp:nth-of-type(3){right:6%;top:58%;animation-delay:.8s}
@keyframes tw{0%,100%{transform:scale(.4);opacity:.4}50%{transform:scale(1.1);opacity:1}}
.fries-ld .bar{height:10px;width:140px;margin:10px auto 0;background:#f0dcc8;border-radius:7px;overflow:hidden}
.fries-ld .bar i{display:block;height:100%;background:var(--red);border-radius:7px;animation:bar 1.6s infinite ease-in-out}
@keyframes bar{0%{width:0}80%,100%{width:100%}}
.fries-ld p{margin:6px 0 0}

/* 弹窗 */
dialog{background:#fff;border:0;border-radius:20px;padding:0;overflow:auto}
dialog::backdrop{background:#3A1A0E88}
dialog>.dialog-head{padding:14px 18px;background:var(--red);color:#fff;align-items:center;position:sticky;top:0;z-index:1}
dialog>.dialog-head.ph2{background:var(--yel);color:var(--ink)}
dialog>.dialog-head h2{margin:0;font-size:17px;font-weight:800}
dialog .close{color:inherit;box-shadow:none}
dialog>form,dialog>#similar-content,dialog>#detail-content,dialog>p{padding:0 18px}
dialog>form{padding-top:14px;padding-bottom:18px}
#detail-content{padding-top:12px;padding-bottom:18px}
.similar-row{background:var(--cream);border:0;border-radius:12px;padding:8px 10px;margin:6px 0;font-size:13px}
.similar-row button{margin-top:6px}
.ft{display:flex;gap:8px;padding:4px 18px 18px}.ft button{flex:1}
input,form select,.checks{border:1.5px solid var(--yel-l);border-radius:12px;background:#fff}
.checks input{accent-color:var(--red)}
.hint{border-left:3px solid var(--yel);background:#FFF8EC;border-radius:0 10px 10px 0}

/* 小卡片：票根 */
.ticket{background:#fff;border:2px dashed var(--red);border-radius:18px;padding:14px 16px;text-align:center;margin:12px 0}
.ticket.own{background:#FFFDF6}
.ticket .who{font-size:12px;color:var(--mut);font-weight:700}
.ticket .lbl{font-weight:800;margin-top:6px}
.ticket .num{font-size:44px;font-weight:900;color:var(--red);letter-spacing:4px;line-height:1.1;font-variant-numeric:tabular-nums}
.ticket p{font-size:14px;margin:6px 0}
.ticket .chips{justify-content:center}
.ticket button{margin-top:8px;font-size:12px}
.actions{margin-top:12px}
.actions button:not(.primary):not(.btn-y){background:#fff;border:1.5px solid var(--yel)}

.how b{color:var(--red);font-size:16px}
.how>div p{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:14px;align-items:start;padding-left:0!important}
.how>div p .how-ico{grid-row:1/4;width:72px;height:72px;object-fit:contain;align-self:center}
.how>div p b,.how>div p strong,.how>div p span{grid-column:2;position:static!important}
.how h2{font-size:24px}.how strong{font-size:18px}.how span{font-size:16px}
footer{font-size:14px}
.section-note{font-size:15px}
.tabs button{font-size:16px}
#toast{background:var(--ink);border-radius:99px}

/* 发起拼单：分步、可点、带图 */
dialog.sheet{width:min(560px,100%);max-height:100dvh;height:min(900px,100dvh);margin:auto;padding:0;display:none;flex-direction:column}
dialog.sheet[open]{display:flex}
dialog.sheet>form{flex:1;overflow:auto;padding:6px 16px 0}
.step{padding:12px 0 6px;border-bottom:2px dashed var(--yel-l)}
.step:last-of-type{border:0}
.step h3{font-size:17px;margin:4px 0 10px;display:flex;align-items:center;gap:8px}
.step h3 b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-size:14px}
.meal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.meal-tile{background:#fff;border:2px solid var(--yel-l);border-radius:16px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:2px;box-shadow:0 3px 0 var(--yel-l);transition:transform .12s,border-color .12s}
.meal-tile .pic{display:grid;place-items:center;height:92px;background:#FFF8EC;border-radius:12px;margin-bottom:6px}
.meal-tile .pic img{max-width:100%;max-height:88px;object-fit:contain}
.meal-tile b{font-size:14px;line-height:1.35}.meal-tile small{font-size:12px;color:var(--red);font-weight:700}
.meal-tile.on{border-color:var(--red);box-shadow:0 3px 0 var(--red-d);transform:translateY(-2px)}
.meal-tile:active,.item-card:active,.opt span:active{transform:scale(.96)}
.item-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 8px}
.item{margin:0;display:block}
.item input,.opt input,.chip input{position:absolute;opacity:0;pointer-events:none}
.item-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:2px solid var(--yel-l);border-radius:14px;padding:8px 6px;min-height:118px;transition:transform .12s,border-color .12s,background .12s;cursor:pointer}
.item-card img{width:52px;height:52px;object-fit:contain}
.item-card b{font-size:12px;line-height:1.3;color:var(--ink);margin-top:4px}
.item-card small{font-size:11px;color:var(--mut)}
.item-card .tick{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--yel-l);color:transparent;font-style:normal;font-size:13px;font-weight:900;display:grid;place-items:center}
.item input:checked+.item-card{border-color:var(--red);background:#FFF4F2;animation:pop .25s}
.item input:checked+.item-card .tick{background:var(--red);border-color:var(--red);color:#fff}
@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:none}}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{margin:0;position:relative}
.opt span{display:flex;flex-direction:column;background:#fff;border:2px solid var(--yel-l);border-radius:14px;padding:12px;cursor:pointer;transition:transform .12s}
.opt b{font-size:16px;color:var(--ink)}.opt small{font-size:12px;color:var(--mut)}
.opt input:checked+span{background:var(--yel);border-color:var(--yel);box-shadow:0 3px 0 var(--yel-d)}
.opt input:disabled+span{opacity:.4}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{margin:0;position:relative}
.chip span{display:inline-block;background:#fff;border:2px solid var(--yel-l);border-radius:99px;padding:6px 12px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.chip input:checked+span{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 3px 0 var(--red-d)}
.sheet-bar{position:sticky;bottom:0;margin:8px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:2px solid var(--yel-l);display:flex;align-items:center;gap:10px}
.sheet-bar #compose-sum{flex:1;min-width:0}.sheet-bar b{display:block;font-size:16px;color:var(--red)}.sheet-bar small{font-size:12px;color:var(--mut)}
.sheet-bar button{flex-shrink:0}
@media(max-width:560px){dialog.sheet{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}}

/* 发起人选餐规则 */
.rule{background:#3A1A0E;color:#FFE7A3;border-radius:12px;padding:8px 12px;font-size:13px;margin:4px 0 8px}.rule b{color:var(--yel)}
.item-card .kind{position:absolute;top:6px;left:6px;font-style:normal;font-size:10px;font-weight:800;border-radius:99px;padding:0 6px;background:#FFF1CF;color:var(--mut)}
.item-card .kind.drink{background:#E3F1FF;color:#1f5d99}.item-card .kind.main{background:#FFE1DD;color:var(--red-d)}

/* 拼友卡：只露昵称、餐品、金额 */
.mate{display:grid;grid-template-columns:1fr auto;gap:2px 10px;background:#FFF8EC;border-radius:12px;padding:10px 12px;margin:8px 0;font-size:13px}
.mate b{font-size:14px}.mate span:not(.tag){grid-column:1}.mate .tag{grid-column:2;grid-row:1/3;align-self:center}.mate small{grid-column:1/-1;color:var(--mut);font-size:12px}
.ticket .ticket-note{display:block;color:var(--mut);font-size:12px;margin-top:8px}
.card .t .allow{display:inline-block;width:auto;font-size:12px;font-weight:700;color:var(--ink);background:#FFF1CF;border-radius:99px;padding:1px 9px;margin:3px 0;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* 取餐码铃铛 */
.ticket .num{display:flex;align-items:center;justify-content:center;gap:8px}
.bell{width:48px;height:48px;object-fit:contain}.bell.sm{width:26px;height:26px;vertical-align:-5px;margin-right:2px}
.code-row b{display:flex;align-items:center}

/* 付款结算：红色圆润框 */
dialog.pay{width:min(400px,calc(100% - 24px));margin:auto;padding:0;border-radius:28px;background:var(--red);color:#fff;border:0;box-shadow:0 10px 0 var(--red-d),0 24px 60px #3a1a0e55;overflow:hidden}
dialog.pay::backdrop{background:#3A1A0E99}
.pay-top{display:flex;align-items:center;gap:8px;padding:16px 18px 6px}
.pay-top b{font-size:20px;font-weight:900;letter-spacing:2px}
.pay-top small{background:var(--yel);color:var(--ink);border-radius:99px;padding:1px 9px;font-size:11px;font-weight:800}
.pay-top .close{margin-left:auto;color:#fff;font-size:26px;box-shadow:none}
#pay-body{margin:8px 12px 0;background:#fff;color:var(--ink);border-radius:22px;padding:14px 14px 10px}
.pay-head{display:flex;gap:10px;align-items:center;padding-bottom:10px;border-bottom:2px dashed var(--yel-l)}
.pay-head img{width:54px;height:54px;object-fit:contain}.pay-head b{display:block;font-size:16px}.pay-head small{color:var(--mut);font-size:12px}
.pay-items{list-style:none;margin:8px 0;padding:0}
.pay-items li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:5px 0;font-size:14px}
.pay-items img{width:34px;height:34px;object-fit:contain}.pay-items small{color:var(--mut);font-size:12px}
.pay-row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0}.pay-row.off b{color:var(--red)}
.pay-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:10px;border-top:2px solid var(--yel-l)}
.pay-total span{font-weight:800}.pay-total b{font-size:32px;font-weight:900;color:var(--red)}
.pay-note{font-size:11px;color:var(--mut);margin:8px 0 0}
.pay-foot{padding:14px 16px 18px}
.pay-btn{width:100%;background:var(--yel);color:var(--ink);border:0;border-radius:99px;padding:15px;font-size:18px;font-weight:900;box-shadow:0 4px 0 var(--yel-d)}
.pay-btn:active{transform:translateY(4px);box-shadow:none}
.pay-done{display:none;position:absolute;inset:0;background:var(--red);flex-direction:column;align-items:center;justify-content:center;gap:6px}
dialog.pay.done .pay-done{display:flex;animation:pop .35s}
.pay-cheers{width:170px;height:170px;object-fit:contain;animation:cheers .9s ease-out}
@keyframes cheers{0%{transform:scale(.4) rotate(-8deg);opacity:0}55%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:none}}
.pay-check{width:84px;height:84px;border-radius:50%;background:var(--yel);color:var(--red);font-size:48px;font-weight:900;display:grid;place-items:center;box-shadow:0 5px 0 var(--yel-d)}
.pay-done b{font-size:22px}.pay-done span{font-size:28px;font-weight:900;color:var(--yel)}.pay-done small{font-size:12px;opacity:.85}

/* 发起人等待补偿 */
.perk{background:#FFF8EC;border:2px solid var(--yel);border-radius:14px;padding:10px 12px;margin:10px 0;display:flex;flex-direction:column}
.perk b{font-size:15px;color:var(--red)}.perk span{font-size:13px}.perk em{font-style:normal;font-weight:900;color:var(--red)}
.pay-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:8px 0;font-size:14px}.pay-line b{font-size:24px;color:var(--red)}.pay-line small{color:var(--mut);font-size:12px}
#wait-body{padding:12px 18px 4px;font-size:15px}#wait-body p{margin:6px 0}
.window-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;background:#fff;border:2px dashed var(--red);border-radius:14px;padding:10px 14px;font-size:15px;margin:0 0 20px}
.window-note b{color:var(--red)}.window-note small{color:var(--mut);font-size:12px;width:100%}
.title-tag{position:absolute;top:6px;left:50%;transform:translateX(-50%) rotate(-4deg);z-index:2;background:var(--red);color:var(--yel);font-weight:900;font-size:18px;letter-spacing:3px;padding:6px 18px;border-radius:8px;box-shadow:0 3px 0 var(--red-d);white-space:nowrap}
.title-tag:before,.title-tag:after{content:'';position:absolute;top:50%;width:14px;height:20px;margin-top:-4px;background:var(--red-d);z-index:-1}
.title-tag:before{left:-10px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%)}.title-tag:after{right:-10px;clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%)}

/* 理想版模拟 */
.sm-link{background:none;border:1.5px dashed var(--yel);padding:6px 12px;font-size:12px;color:var(--ink);box-shadow:none}
.counter{background:#FFF8EC;border:2px solid var(--yel-l);border-radius:16px;padding:12px 14px;margin:12px 0}
.counter-head{font-weight:800;margin-bottom:6px}
.counter-head em,.coupon small em{font-style:normal;font-size:11px;background:var(--yel);border-radius:99px;padding:1px 8px;margin-left:6px}
.code-row{display:grid;grid-template-columns:64px 1fr;gap:0 10px;align-items:center;background:#fff;border-radius:12px;padding:8px 10px;margin:6px 0}
.code-row.me{outline:2px solid var(--red)}
.code-row b{grid-row:1/3;font-size:22px;font-weight:900;color:var(--red);letter-spacing:1px}
.code-row span{font-size:13px}.code-row small{font-size:11px;color:var(--mut)}
.counter p{font-size:12px;color:var(--mut);margin:6px 0 0}
.tag.code{background:var(--red);border-color:var(--red);color:#fff}
.coupon{display:flex;margin:12px 0;border-radius:14px;overflow:hidden;border:2px solid var(--yel)}
.coupon .c-amt{background:var(--yel);font-size:28px;font-weight:900;color:var(--red);padding:12px 14px;display:flex;align-items:center;border-right:2px dashed #fff}
.coupon .c-txt{background:#fff;padding:10px 12px;display:flex;flex-direction:column}
.coupon .c-txt span{font-size:13px}.coupon .c-txt small{font-size:11px;color:var(--mut);margin-top:2px}
.push{margin:0;border:0;inset:auto;position:fixed;top:10px;left:50%;transform:translate(-50%,-140%);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);z-index:20;width:min(370px,calc(100% - 20px));background:#fffffff2;backdrop-filter:blur(12px);border-radius:18px;box-shadow:0 8px 30px #3a1a0e30;padding:10px 12px;display:flex;gap:10px;align-items:center}
.push.in{transform:translate(-50%,0)}
.push img{width:36px;height:36px;object-fit:contain;background:var(--red);border-radius:9px;padding:3px}
.push div{flex:1;min-width:0}.push b{display:block;font-size:13px}.push span{display:block;font-size:12px;color:var(--ink)}.push small{font-size:11px;color:var(--mut);align-self:start}

@media(max-width:820px){.grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .topbar{padding:40px 16px 24px;min-height:160px;align-items:center}
  .wordmark img{width:76px;height:76px}
  .wm-text b{font-size:34px}
  .wm-text small{font-size:14px}
  .badge{font-size:10px;padding:4px 9px;position:absolute;right:12px;top:10px}
  .topbar{position:relative}
  .hero{display:flex;flex-direction:column;align-items:stretch}
  .hero .intro{font-size:20px;max-width:none}
  .hero .eyebrow{font-size:20px}
  .hero-notes{gap:12px 10px}.hang{font-size:16px}
  .hero-art{position:relative;right:auto;bottom:auto;width:230px;height:230px;opacity:1;align-self:center;margin-top:10px}
  .hero-art .art-note{display:inline-flex;font-size:16px;right:-30px;bottom:-4px}
  .store-panel .eyebrow{font-size:18px}
  .card{display:flex}
  .card .t b{font-size:14px}
}

/* 拼单卡 v2（10-19 梅宝说「怪怪的」后重排）：头部一行（托盘图标·谁·还差几人·角标）→ 套餐名 → 剩下的餐品小胶囊 → 底部价钱和按钮 */
.card.v2{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px 16px}
.card.v2 .c-head{display:flex;align-items:center;gap:10px;min-width:0}
.card.v2 img.food{width:84px;height:68px;flex-shrink:0;margin:0}
@media(max-width:560px){.card.v2 img.food{width:72px;height:58px}}
.card.v2 .who{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.card.v2 .who b{font-size:16px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.card.v2 .who .need{font-size:13px;font-weight:700;color:var(--red-d);white-space:nowrap}
.card.v2 .who em{font-style:normal;font-size:11px;font-weight:700;background:#fff;border-radius:99px;padding:1px 8px;white-space:nowrap}
.card.v2 .corner{position:static;flex-shrink:0;align-self:flex-start;font-size:13px}
.card.v2 .corner img{width:20px;height:20px}
.card.v2 .c-meal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.card.v2 .meal-name{font-size:18px;font-weight:800;line-height:1.35;color:var(--ink)}
.card.v2 .allow{display:inline-block;font-size:12px;font-weight:700;color:var(--ink);background:#fff;border-radius:99px;padding:2px 10px;white-space:nowrap}
.card.v2 .c-parts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.card.v2 .c-parts small{font-size:12px;color:#5a3a1e;margin-right:2px}
.card.v2 .c-parts i{font-style:normal;font-size:13px;line-height:1.4;background:#FFF6D6;color:var(--ink);border-radius:8px;padding:3px 9px}
.card.v2 .c-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.card.v2 .price{font-size:24px;font-weight:900;color:var(--red-d);font-variant-numeric:tabular-nums;line-height:1}
.card.v2 .price small{display:block;font-size:12px;font-weight:700;color:#5a3a1e;margin-bottom:4px}
.card.v2 .c-foot button{padding:10px 26px;font-size:17px}
.card.v2.mine .who b,.card.v2.mine .meal-name{color:#fff}
.card.v2.mine .who .need{color:var(--yel)}
.card.v2.mine .c-parts small,.card.v2.mine .price small{color:#FFE7A3}
.card.v2.mine .price{color:#fff}
.card.v2.mine .allow{color:var(--red-d)}
.card.v2.mine .c-parts i{background:#ffffff26;color:#fff}
.card.v2.mine .who em{background:var(--yel);color:var(--ink)}

/* 10-19 01:3x：头部换「拼拼」券图标；右侧中间放大图——正在拼放取餐盘，拼成了放碰杯 */
.card.v2 img.food{width:56px;height:56px}
.card.v2 img.side{position:absolute;right:18px;top:50%;transform:translateY(-46%);width:96px;height:96px;object-fit:contain;pointer-events:none}
.card.v2 .c-meal,.card.v2 .c-parts{padding-right:112px}
@media(max-width:560px){.card.v2 img.food{width:48px;height:48px}.card.v2 img.side{width:76px;height:76px;right:12px}.card.v2 .c-meal,.card.v2 .c-parts{padding-right:88px}}

/* 旧样式给 .card img 加了 multiply 混色，红底卡上的图会被染成红色；v2 卡里的图一律原色 */
.card.v2 img{mix-blend-mode:normal}

/* 拼单成功卡的「看看」：麦麦棕底白字（梅宝 10-19 01:40） */
.card.v2 .c-foot button.see{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 4px 0 #1f0d06}

/* 三步图：01 门店、03 托盘的图自带留白，看着只有 02 的一半大，放大一倍；三步的图都占 136px 一列，02 保持原大居中，文字列对齐（梅宝 10-19 01:42） */
.how>div p{grid-template-columns:136px 1fr}
.how>div p .how-ico{justify-self:center}
.how>div p:nth-child(1) .how-ico,.how>div p:nth-child(3) .how-ico{width:136px;height:136px}
.how>div p:nth-child(2) .how-ico{width:108px;height:108px}

/* 小卡片弹窗顶部：左边麦麦现拼纸袋图标，右边套餐名和状态；倒计时前加计时器图标（梅宝 10-19 01:57） */
.detail-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.detail-head>img{width:72px;height:66px;object-fit:contain;flex-shrink:0}
.detail-head h3{margin:0 0 4px}
.detail-head p{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.detail-head .clock-ico{width:20px;height:20px;object-fit:contain}

/* 示例套餐标记：演示里补的套餐一律标「示例」（10-19 02:3x） */
.sample-tag{display:inline-block;font-style:normal;font-size:11px;font-weight:800;line-height:1.5;color:#fff;background:var(--ink);border-radius:6px;padding:0 6px;margin:0 0 0 6px;vertical-align:3px}
.meal-tile{position:relative}.meal-tile .sample-tag{position:absolute;top:6px;right:6px;margin:0}

/* Keep transparent choice inputs inside their own cards on narrow screens. */
.item, .opt, .chip { position: relative; min-width: 0; }
.item > input, .opt > input, .chip > input { inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }
.item-card small { white-space: normal; overflow-wrap: anywhere; }

/* Language controls stay available in the page and native dialogs. */
.header-tools{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}.language-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:#fff9e8;border:1px solid #dca600}.language-switch button{font:600 12px/1.2 system-ui,sans-serif;min-height:30px;padding:6px 11px;border:0;border-radius:999px;background:transparent;color:#542c17;box-shadow:none;white-space:nowrap}.language-switch button[aria-pressed="true"]{background:#da291c;color:white}.language-switch button:focus-visible{outline:2px solid #542c17;outline-offset:2px}.dialog-language{margin-left:auto;flex-shrink:0}.dialog-language button{font-size:11px;min-height:26px;padding:4px 7px}.dialog-head h2{min-width:0}.region-note{color:#77513c;font-size:13px;line-height:1.6;margin:-12px 0 24px}html:lang(zh-CN) .region-note{display:none}html:lang(en) .wordmark small{letter-spacing:.2px}html:lang(en) .hero h1{font-size:clamp(30px,4vw,46px);letter-spacing:-1px;line-height:1.2}html:lang(en) .hero .intro{font-size:18px;line-height:1.6}html:lang(en) .hero .eyebrow{letter-spacing:.5px}html:lang(en) .c-meal{align-items:flex-start;flex-wrap:wrap;gap:8px}html:lang(en) .meal-name{overflow-wrap:anywhere}html:lang(en) .who{flex-wrap:wrap;min-width:0}html:lang(en) .c-head{align-items:flex-start}html:lang(en) .allow{white-space:normal}html:lang(en) .tabs button{white-space:normal}html:lang(en) .item-card b{overflow-wrap:anywhere}html:lang(en) .pay-top{flex-wrap:wrap}html:lang(en) .sheet-bar small{line-height:1.4}
@media(max-width:560px){.header-tools{gap:6px}.header-tools .badge{font-size:10px;padding:5px 8px}.language-switch button{padding:6px 8px}.topbar{gap:10px;align-items:center}.wordmark{min-width:0}.wordmark .wm-text{min-width:0}html:lang(en) .wordmark img{width:56px;height:56px}html:lang(en) .wordmark .wm-text b{font-size:25px;white-space:nowrap}html:lang(en) .wordmark small{display:none}html:lang(en) .hero .intro{font-size:14px}html:lang(en) .hero-notes{gap:8px;flex-wrap:wrap}html:lang(en) .hero-notes span{font-size:11px}html:lang(en) .tabs{display:grid;grid-template-columns:1.1fr 1fr .8fr auto;gap:8px;align-items:stretch}html:lang(en) .tabs button{font-size:12px;min-width:0;padding:14px 0;line-height:1.5}html:lang(en) .tabs .refresh{font-size:11px}html:lang(en) .c-head{padding-right:0}html:lang(en) .c-head .corner{position:static;margin-left:auto;flex-shrink:0}html:lang(en) .c-head .who{padding-right:0}html:lang(en) .c-head .who b{font-size:13px}html:lang(en) .c-head .need{font-size:12px}html:lang(en) .dialog-head h2{font-size:17px}html:lang(en) .dialog-head{gap:8px}html:lang(en) .dialog-language button{padding:4px 6px}html:lang(en) .sheet-bar{gap:8px}html:lang(en) .sheet-bar button{max-width:46%;font-size:12px;white-space:normal}html:lang(en) .hero-art .title-tag{font-size:12px}}