/* 苟豆咖啡点单 · 移动端优先 */
:root {
  --brand: #cf0d1e;
  --brand-2: #9c0716;
  --brand-soft: #fdecee;
  --accent: #fc091f;
  --price: #ff5a2a;
  --ink: #1a1215;
  --muted: #857679;
  --line: #f0e6e7;
  --bg: #f7f4f4;
  --card: #ffffff;
  --radius: 16px;
  --shadow: 0 6px 22px rgba(120, 20, 30, .08);
  --sheet-h: 76vh;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: var(--ink);
  background: #2b0308;
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 100dvh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(900px 600px at 20% -10%, #7a0a17 0%, #2b0308 60%, #140205 100%);
  z-index: -1;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.art-img { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; }

/* ---------- 手机画框 ---------- */
.phone {
  position: relative;
  width: min(100%, 430px);
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  /* 同 .ad 那条：hidden 的盒子仍然会被浏览器当滚动容器（滚子元素进视野时会滚到它头上），
     整个画框就被推走；clip 才是真的不可滚，圆角裁切效果一样。 */
  overflow: clip;
}
@media (min-width: 480px) {
  .phone {
    margin: 18px 0;
    height: min(880px, calc(100dvh - 36px));
    border-radius: 30px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .08);
  }
  body { align-items: center; }
}

/* ---------- 顶栏（三行都收小：自取/外卖+搜索、门店名、距离+制作状态） ---------- */
.appbar {
  flex: 0 0 auto;
  padding: 8px 12px 7px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
}
/* 第一行：自取/外卖分段开关 + 搜索框并排（参考图把搜索从最后一行提上来跟切换器同一行） */
.appbar__top { display: flex; align-items: center; gap: 9px; }
.mode-switch {
  flex: 0 0 auto;
  display: flex; align-items: center; padding: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
.mode-switch__btn {
  min-width: 36px; height: 25px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .82);
  transition: color .2s ease, background .2s ease;
}
.mode-switch__btn:active { transform: scale(.96); }
/* 外卖还没开通，所以它永远不会变成选中态，白底红字这颗药丸始终停在自取上 */
.mode-switch__btn.is-on { background: #fff; color: var(--brand); }

/* 第二行：门店名独占一行，所以字号可以留得住 */
.store-line {
  display: flex; align-items: center; gap: 5px; width: 100%;
  /* button 的默认内距在这一行里是白吃 12px 宽度，最窄的 iPhone 就是这么被挤掉门店名的 */
  min-width: 0; margin-top: 8px; padding: 0; color: #fff;
  font-size: 17px; font-weight: 800; letter-spacing: .2px; text-align: left;
}
.store-line .ico { width: 18px; height: 18px; flex: 0 0 auto; opacity: .92; }
.store-line__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-line .caret { width: 14px; height: 14px; flex: 0 0 auto; opacity: .7; }

.search {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 10px;
  height: 29px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .16);
  color: #ffdfe3;
}
.search .ico { width: 15px; height: 15px; flex: 0 0 auto; }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  color: #fff;
  font-size: 14px;
}
.search input::placeholder { color: rgba(255, 255, 255, .6); }

/* 顶栏那格是入口不是输入框（点它才进搜索页），所以做成按钮 + 一行文字 */
.search--entry { text-align: left; }
.search__label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: rgba(255, 255, 255, .62);
}
/* 搜过的词回到点单页要留在入口上，用纯白加粗跟占位文案区分开 */
.search--entry.is-query .search__label { color: #fff; font-weight: 600; }

/* ---------- 搜索页 ---------- */
.search-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 16px 0; padding: 0 12px; height: 40px;
  border-radius: 20px; background: #fff; border: 1px solid #ecdfdf; color: #a29294;
}
.search-bar .ico { width: 16px; height: 16px; flex: 0 0 auto; }
.search-bar input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  color: var(--ink); font-size: 14px;
}
.search-bar input::placeholder { color: #b3a4a6; }
/* 自己画清除按钮，所以把 WebKit 那颗原生的 ✕ 关掉，免得出现两个 */
.search-bar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  background: #c9c0c1; color: #fff; display: grid; place-items: center;
}
.search-clear svg { width: 9px; height: 9px; stroke-width: 2.6; }
.search-clear[hidden] { display: none; }
.search-count { padding: 15px 16px 9px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.search-count b { color: var(--brand); font-size: 15.5px; padding: 0 2px; font-variant-numeric: tabular-nums; }
/* 结果直接铺满一屏白底，和点单页的列表同一套行样式 */
.search-results { background: var(--card); min-height: 45vh; padding: 2px 14px 80px; }

/* ---------- 舞台 / 屏幕 ---------- */
.stage { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.screen { min-height: 100%; background: var(--bg); }
.screen[hidden] { display: none; }
/* 推进类页面的进出场：新页从右边整页推进来，返回就从左边退回去 */
.screen.is-push-in { animation: screen-push .26s cubic-bezier(.32,.72,.28,1) both; }
.screen.is-pop-in { animation: screen-pop .26s cubic-bezier(.32,.72,.28,1) both; }
@keyframes screen-push { from { transform: translateX(100%); } to { transform: none; } }
@keyframes screen-pop { from { transform: translateX(-28%); opacity: .55; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .screen.is-push-in, .screen.is-pop-in { animation: none; }
}
.screen__head { padding: 20px 16px 8px; }
.screen__head h2 { margin: 0; font-size: 20px; letter-spacing: .5px; }
.screen__head p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.screen__head--back { display: flex; align-items: center; gap: 10px; position: relative; }
/* top 要跟 .screen__head 的上内距一致：绝对定位的标题若不显式给 top，会被 flex 的 align-items 垂直居中，
   于是比订单列表那种普通流的标题低一两像素，几个页面来回跳就能看出来 */
.screen__head--back h2 { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.screen__head--center { text-align: center; }
/* 详情页整页包在 .ticket 的 14px 内距里，标题行得把这份内距退掉，才和订单列表、确认订单落在同一条基线上 */
.ticket > .screen__head--back { margin: -14px -14px 0; }
.icon-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: var(--shadow); color: var(--brand); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- 门店列表 ---------- */
.stores-tip { margin: 2px 16px 0; font-size: 12px; color: var(--muted); }
.store-list { padding: 10px 12px 24px; display: grid; gap: 10px; }
.store-card {
  text-align: left;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
}
.store-card.is-picked { border-color: var(--accent); background: #fff5f6; }
.store-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.store-card__name { font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-card__pick { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.store-card.is-picked .store-card__pick { color: var(--accent); }
.store-card__busy { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.store-card__busy em { font-style: normal; color: var(--muted); }
.store-card__busy em.is-shut { color: #8a8586; background: #f1eff0; border-radius: 4px; padding: 1px 5px; }
.store-card__busy em.is-busy { color: var(--brand); background: #fff0f1; border-radius: 4px; padding: 1px 5px; }
.store-card__addr { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.store-card__meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.1s infinite; flex: 0 0 auto; }
.pip.is-free { background: #16a34a; animation: none; }
/* 定位图标统一走 currentColor，跟旁边的小字一个色 */
.dist { display: inline-flex; align-items: center; gap: 3px; }
.dist svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------- 附近门店（腾讯地图，照库迪那张图1/图2） ---------- */
/* 这一屏要自己撑满可视区（地图按剩余高度长），不能像别的页那样往下滚 */
.screen#screen-stores { height: 100%; }
.nearby { height: 100%; display: flex; flex-direction: column; background: #fff; position: relative; }
/* 标题栏压在图上做半透明（他 2026-10-22 图2 库迪那种）：地图从屏幕顶一直铺到列表，
   标题和返回按钮浮在上面，别让一条白底把地图切掉 */
.nearby__head {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  height: 52px; display: flex; align-items: center;
  padding: 0 14px; background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nearby__head h2 {
  position: absolute; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .5px;
}
/* isolation：腾讯地图的 logo 自带很高的 z-index，不隔离会穿到抽屉/城市选择页上面 */
.nearby__stage { position: relative; z-index: 0; isolation: isolate; flex: 1 1 auto; min-height: 180px; background: #eef1f3; overflow: hidden; }
.nearby__map { position: absolute; inset: 0; }
.nearby__loc {
  position: absolute; right: 12px; bottom: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #3a3a3a; box-shadow: 0 4px 14px rgba(60, 10, 16, .18);
}
/* display:grid 会盖掉 [hidden]，所以显式再关一次 */
.nearby__loc[hidden] { display: none; }
/* 最近门店头上的名字气泡（库迪图3）：白底圆角 + ›，点一下选中并回点单 */
.nearby__callout {
  position: absolute; z-index: 3; transform: translate(-50%, -100%);
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 74%; padding: 7px 12px; border-radius: 16px;
  background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(60, 10, 16, .18); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.nearby__callout[hidden] { display: none; }
.nv-more {
  margin: 4px 0 2px; padding: 10px 0; text-align: center;
  font-size: 12px; color: #b3a4a6;
}
.nearby__loc svg { width: 19px; height: 19px; }
/* 地图底下那条黑底提示（脚本没加载出来 / 正在定位） */
.nearby__mapTip {
  position: absolute; left: 12px; right: 58px; bottom: 14px; z-index: 2; margin: 0;
  padding: 6px 10px; border-radius: 10px; background: rgba(26, 18, 21, .72);
  color: #fff; font-size: 11.5px; line-height: 1.45;
}
/* 拖地图后压在地图中心的选址针（图2）；卡片给出最近的店 */
.nearby__dragPin {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 34px; height: 34px; transform: translate(-50%, -100%);
  filter: drop-shadow(0 5px 8px rgba(60, 10, 16, .3));
  pointer-events: none;
}
.nearby__dragPin svg { width: 100%; height: 100%; display: block; }
.nearby__dragPin[hidden] { display: none; }
.nearby__dragCard {
  position: absolute; left: 12px; right: 58px; bottom: 32px; z-index: 3;
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 9px 10px 9px 14px; border-radius: 23px; background: #fff;
  border: 1px solid #f1e4e6; box-shadow: 0 6px 18px rgba(60, 10, 16, .14);
}
.nearby__dragCard[hidden] { display: none; }
.nearby__dragCard span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.nearby__dragCard b { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nearby__dragCard i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.nearby__dragCard em { flex: 0 0 auto; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--brand); }
.nearby__sheet {
  flex: 0 0 auto; height: var(--sheet, 44%); display: flex; flex-direction: column;
  position: relative; z-index: 1; background: #fff;
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px rgba(60, 10, 16, .08);
  margin-top: -14px;
  transition: height .26s cubic-bezier(.22, .9, .28, 1);
}
/* 展开 / 收起（图3 / 图4）：抽屉变高，地图自己吃掉剩下的高度 */
.nearby.is-open .nearby__sheet { --sheet: 78%; }
.nearby__sheet.is-dragging { transition: none; }
.nearby__grip {
  width: 100%; height: 26px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; color: #9c8e90; cursor: pointer;
  touch-action: none;
}
.nearby__chev { width: 15px; height: 15px; transform: rotate(180deg); transition: transform .2s ease; }
.nearby.is-open .nearby__chev { transform: rotate(0deg); }
.nearby__cityRow { display: flex; align-items: center; gap: 6px; padding: 8px 14px 4px; }
.nearby__searchRow { padding: 4px 14px 9px; border-bottom: 1px solid var(--line); }
.nearby__city {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
  background: none; border: 0; padding: 3px 2px; font: inherit;
  font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.nearby__city svg { width: 11px; height: 11px; color: #8a8586; }
.nearby__region { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink); }
.nearby__region[hidden] { display: none; }
.nearby__region i { font-style: normal; color: #e5ddde; }
.nearby__region b { font-weight: 600; }
.nearby__region button {
  width: 17px; height: 17px; border: 0; border-radius: 50%; padding: 0;
  background: none; color: #9c8e90; font-size: 14px; line-height: 1; cursor: pointer;
}
.nearby__search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px; border-radius: 17px; background: #f6f3f3; color: var(--muted);
}
.nearby__search svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nearby__search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--ink); font-family: inherit;
}
.nearby__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 18px; display: grid; gap: 10px; align-content: start; }
.nv-card {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 14px; background: #fff;
  border: 1px solid #f1eaeb; box-shadow: 0 2px 8px rgba(60, 10, 16, .04);
  transition: border-color .15s ease, background .15s ease;
}
.nv-card.is-picked { border-color: #f3b6bd; background: #fff7f8; }
.nv-card.is-focus { border-color: var(--brand); }
.nv-card__main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.nv-card__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nv-card__row b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-card__row i { flex: 0 0 auto; font-style: normal; font-size: 12px; color: var(--muted); }
.nv-card__closed { flex: 0 0 auto; font-style: normal; font-size: 10.5px; color: #8a8586; background: #f1eff0; border-radius: 4px; padding: 1px 5px; }
/* 忙不过来暂停线上点单：红字提醒，和灰色的「休息中」分开 */
.nv-card__closed.is-busy { color: var(--brand); background: #fff0f1; }
.nv-card__addr, .nv-card__meta { font-size: 12px; color: var(--muted); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-card__busy { display: flex; align-items: center; min-height: 18px; }
.nv-card__busy .busy-txt { font-size: 11.5px; }
.nv-card__meta { color: #9c8e90; font-size: 11px; }
.nv-card__go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; color: var(--brand); }
.nv-card__go i { font-style: normal; font-size: 15px; line-height: 1; }
/* 定位不到时整页空态（图1）：插画 + 两行字 + 两颗按钮 */
.nearby-list { display: none; flex: 1; min-height: 0; overflow-y: auto; background: var(--bg); padding-top: 52px; }
.nearby-empty { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 10px 24px 40px; background: #fff; }
.nearby.is-empty .nearby-empty { display: flex; }
.nearby.is-empty .nearby__stage, .nearby.is-empty .nearby__sheet { display: none; }
.nearby.is-list .nearby__stage, .nearby.is-list .nearby__sheet { display: none; }
.nearby.is-list .nearby-list { display: block; }
.nearby-empty__art { width: 218px; max-width: 68%; height: auto; margin-bottom: 4px; }
.nearby-empty h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.nearby-empty p { margin: 6px 0 20px; font-size: 13px; color: var(--muted); }
.nearby-empty__go, .nearby-empty__pick {
  width: 190px; height: 44px; border-radius: 22px; font-size: 15px; font-weight: 700;
}
.nearby-empty__go { background: var(--brand); color: #fff; margin-bottom: 10px; }
.nearby-empty__pick { background: #f4f1f2; color: var(--ink); }
/* 点单页的「无法定位」门禁（他 2026-10-22 图2/图3）：没门店时整页替换菜单主体 */
#screen-menu .menu-gate { display: none; }
#screen-menu.is-needs-store { display: flex; flex-direction: column; min-height: 100%; }
#screen-menu.is-needs-store .menu-shell { display: none; }
#screen-menu.is-needs-store .menu-gate { display: flex; flex: 1; padding-bottom: 80px; }
/* 红顶栏里那行「开启定位，为您推荐附近门店」：库迪图3 的蓝字位置，我们放在第二行 */
.appbar-hint {
  background: none; border: 0; padding: 0; font: inherit; color: rgba(255, 255, 255, .88);
  text-decoration: underline; cursor: pointer;
}
/* 城市 / 区县选择（图5/图6）：整页盖住「附近」（底栏在「附近」整页就已经收掉了） */
.city-pick {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column;
  background: #fff;
}
.city-pick[hidden] { display: none; }
.city-pick__head { display: flex; align-items: center; gap: 4px; padding: 6px 14px 6px 4px; }
.city-pick__back {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; color: #2b2527; cursor: pointer;
}
.city-pick__back svg { width: 20px; height: 20px; }
.city-pick__search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 12px; border-radius: 19px;
  background: #f6f4f4; color: #a29294;
}
.city-pick__search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.city-pick__search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 14px; color: var(--ink);
}
.city-pick__here { display: flex; align-items: center; border-bottom: 1px solid #f0ecec; }
.city-pick__hereMain {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 11px 0 11px 16px;
  font: inherit; text-align: left; cursor: pointer;
}
.city-pick__hereMain svg { width: 17px; height: 17px; color: #4a4446; }
.city-pick__hereMain b { font-size: 15px; color: var(--ink); }
.city-pick__hereMain span { font-size: 12px; color: #9c9495; }
.city-pick__relocate {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 8px 16px;
  font: inherit; font-size: 13px; color: #6f6769; cursor: pointer;
}
.city-pick__relocate svg { width: 14px; height: 14px; }
.city-pick__body { flex: 1; min-height: 0; position: relative; }
.city-pick__list {
  position: absolute; inset: 0; overflow-y: auto;
  overscroll-behavior: contain; padding-right: 24px;
}
.city-pick__sec { padding: 6px 16px; background: #f7f5f5; font-size: 12px; color: #9c9495; }
.city-pick__item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 15px 16px; background: none; border: 0; border-bottom: 1px solid #f4f1f1;
  font: inherit; font-size: 15px; color: #2b2527; text-align: left; cursor: pointer;
}
.city-pick__item em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--brand); }
.city-pick__none { margin: 40px 0; text-align: center; font-size: 13px; color: var(--muted); }
/* 附近页空态：跟原生同一套话术，别再是一行小字顶在最上面 */
.nearby__none {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 220px; margin: 26px 0; text-align: center;
}
.nearby__none b { font-size: 14px; font-weight: 600; color: #6f6769; }
.nearby__none span { margin-top: 6px; font-size: 12px; color: #b3a4a6; }
.nearby__none button {
  margin-top: 14px; padding: 5px 12px; border-radius: 14px;
  font-size: 13px; font-weight: 700; color: var(--brand);
}
.city-pick__rail {
  position: absolute; right: 2px; top: 6px; bottom: 6px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.city-pick__rail button {
  width: 22px; border: 0; background: none; padding: 1px 0;
  font: inherit; font-size: 10px; color: #4a4446; cursor: pointer;
}
.city-pick__rail button.is-off { color: #c9c2c3; pointer-events: none; }
@media (max-height: 640px) {
  .nearby__sheet { --sheet: 48%; }
  .nearby.is-open .nearby__sheet { --sheet: 80%; }
}

/* 忙闲进度条：5 杯内绿、10 杯内橙、10 杯起红，条长按杯数开方缩放 */
.busy-meter { display: inline-flex; align-items: center; gap: 6px; }
.busy-bar { flex: 0 0 auto; width: 54px; height: 6px; border-radius: 999px; background: #efe7e8; overflow: hidden; }
/* 进页面时条从 0 涨到该涨的长度，卡片一张接一张（延迟走 --d）；红档再叠一层呼吸，忙得发烫 */
.busy-bar i {
  display: block; height: 100%; border-radius: inherit; transform-origin: left center;
  animation: busy-grow .8s cubic-bezier(.22, .68, .3, 1) var(--d, 0ms) both;
}
.busy-meter.is-high .busy-bar i {
  animation: busy-grow .8s cubic-bezier(.22, .68, .3, 1) var(--d, 0ms) both,
    busy-hot 1.5s ease-in-out calc(var(--d, 0ms) + .85s) infinite;
}
@keyframes busy-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes busy-hot { 0%, 100% { filter: none; } 50% { filter: brightness(1.35) saturate(1.2); } }
.busy-txt { font-size: 12px; font-weight: 600; color: var(--muted); }
.busy-txt b { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.busy-txt.is-free, .busy-pill .is-free { color: #16a34a; font-weight: 700; }
.busy-meter.is-low .busy-bar i { background: #16a34a; }
.busy-meter.is-low .busy-txt b { color: #16a34a; }
.busy-meter.is-mid .busy-bar i { background: #f59e0b; }
.busy-meter.is-mid .busy-txt b { color: #d97706; }
.busy-meter.is-high .busy-bar i { background: var(--brand); }
.busy-meter.is-high .busy-txt b { color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .busy-bar i, .busy-meter.is-high .busy-bar i { animation: none; }
}

/* ---------- 菜单主体 ---------- */
.menu-shell {
  display: flex; align-items: flex-start; background: var(--card); margin-top: 6px; min-height: 60vh;
  /* 底部购物车条现在是浮层，留出它的高度，最后一行才不会被压住 */
  padding-bottom: 80px;
  /* 左侧 68px 用背景补齐灰色轨道，分类栏本身只占内容高度才能吸顶 */
  background: linear-gradient(to right, #f4edee 68px, var(--card) 68px);
}
.cat-rail {
  flex: 0 0 68px;
  align-self: flex-start;
  position: sticky;
  top: 0;
  background: #f4edee;
  padding-bottom: 10px;
  /* 分类多了以后比可视区还高，max-height 由 app.js 的 fitRail() 按 #stage 高度给，自己滚 */
  overflow-y: auto;
  scrollbar-width: none;
}
.cat-rail::-webkit-scrollbar { display: none; }
/* 图标 + 名称两行，二级描述（「大师拼配」「TOP」）已删。
   左右内距对称 + align-items: center：图标和名称共用栏的正中轴，两行叠起来是一个居中的整体。
   「靠左」靠的是把栏从 74px 收到 68px（右侧列表跟着往左扩），不是把内容推到左边。 */
.cat-rail button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 100%;
  padding: 11px 5px 12px;
  font-size: 12.5px;
  color: #6b5a5e;
  text-align: center;
  position: relative;
  line-height: 1.25;
}
/* 图标都按内容裁过边了，所以「定高 + 宽随字形」才是本体等高（同取餐码气球那套）；
   上一版给的是正方形 + object-fit，结果宽图（奶牛）实际只有 22px 高、高图（杯子）30px 高，
   一排看过去就是「没对齐」。 */
.cat-rail__ico { display: block; height: 27px; width: auto; max-width: 100%; }
.cat-rail__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-rail button.is-active { background: var(--card); color: var(--ink); font-weight: 800; }
.cat-rail button.is-active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.cat-body { flex: 1 1 auto; min-width: 0; }
.cat-section { padding: 14px 14px 4px; }
.cat-section__title { font-size: 15px; font-weight: 800; }
/* 楼层 banner（运营位 / 分类头图）：撑满区块宽度，原图 4:1，等比出高度不裁字 */
.cat-section__banner { display: block; width: 100%; height: auto; margin-top: 10px; border-radius: 12px; }
/* 新品营销卡片：整块图 + 右下角压在图上的「¥x 起 + 加号」，跟参考图那张「超神南瓜」一模一样。
   价格和按钮必须在卡片**里面**（2026-10-15「营销卡片价格和按钮应该在卡片里面…并且下面也是圆角」）：
   之前是图下面接一条白底 footer，白底压在白底页面上等于没底，图的直角就露出来了。
   现在 footer 绝对定位到图上，卡片只剩一张图，四角一起被 overflow: hidden 裁圆。 */
.mk-card { position: relative; margin-top: 10px; border-radius: 12px; overflow: hidden; }
.mk-card__img { display: block; width: 100%; height: auto; }
.mk-card__foot { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 9px; }
.mk-card__price { display: flex; align-items: baseline; gap: 3px; }
/* 压在图上的一行价格用黑（红字在浅色图上不显眼，也不跟图里的紫色标题抢），加号照旧品牌红 */
.mk-card__price .price__now { color: var(--ink); }
.mk-card__price em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); }

.p-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  /* 商品之间不画分割线（用户反馈难看），靠行高和留白分开就够 */
  /* 右侧名称+标签+简介+价格一坨比 74px 的图高出一截，图顶部对齐就成了「飘在上方」，居中才像一对 */
  align-items: center;
}
.p-row__img { width: 74px; height: 74px; border-radius: 12px; background: #f6f2ec; overflow: hidden; position: relative; }
.p-row__tag {
  position: absolute; left: 0; top: 0; font-size: 9.5px; font-weight: 800; color: #fff;
  background: linear-gradient(90deg, #ff7a3c, #ff5a2a); padding: 2px 6px; border-radius: 12px 0 10px 0;
}
/* 不能 overflow: hidden，否则「选规格」右上角那颗角标会被裁掉 */
.p-row__main { min-width: 0; }
.p-row__name { font-size: 15px; font-weight: 700; line-height: 1.35; }
/* 商品标签条 .p-row__tags 也搬去 public/spec.css 了（后台预览同一份） */
/* 简介只留一行，超出走省略号：这一行原本是两行，是商品行高的主要来源 */
.p-row__desc {
  font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-row__sub { font-size: 11px; color: #b0a0a1; margin-top: 5px; }
.p-row__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 7px; margin-top: 8px; }
.price { display: flex; align-items: baseline; gap: 3px 3px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.price__now { font-size: 18px; font-weight: 800; color: var(--brand); white-space: nowrap; }
.price__now i { font-style: normal; font-size: 12px; margin-right: 1px; }
/* 划线价 + ⓘ 包成一组，共用同一条中轴：之前 ⓘ 单独 align-self: center，被 18px 的特惠价顶得
   比划线价高了一截（2026-10-15「感叹号按钮没有对齐划线价 偏离了一些」）。 */
.price__was { display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
.price__was s { font-size: 11px; color: #b6a8a9; font-weight: 600; line-height: 1; }
/* 「预估到手」是特惠价的定语，所以跟价同色、贴在它和划线价中间（参考图3），不另起一行。
   这行要在 360 窄屏也保持一行（价格 + 定语 + 划线价 + ⓘ 全挤在商品图右边那 120px 里），
   所以定语和划线价都比简介还小一号，ⓘ 只有 14px */
.price__est { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--brand); white-space: nowrap; }
/* ⓘ 用 SVG 画（圆 + 点 + 竖都绕 (12,12) 对称），灰到几乎不参与比价，只是给说明留个入口 */
.price__info { flex: 0 0 auto; width: 14px; height: 14px; color: #b6a8a9; }
.price__info svg { width: 14px; height: 14px; stroke-width: 1.7; }
/* 加购按钮统一成红色圆加号（2026-10-15「选规格你也换成他这样的加号，下面的没有选规格的也换成这种加号，
   但要我们自己的红色」）：有规格的走 open-product、没规格的走 quick-add，两只长得一模一样，
   区别只在点下去的行为，给读屏留了 aria-label。 */
.add-btn {
  flex: 0 0 auto;
  position: relative;
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center;
}
.add-btn svg { width: 15px; height: 15px; stroke-width: 2.1; }
.add-btn:active { transform: scale(.96); }
/* 购物车里已有的件数：浅粉底红字，压在按钮右上角外侧，参考「特惠购买 ①」那颗 */
.add-btn__badge {
  position: absolute; top: -6px; right: -5px; z-index: 1;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 11.5px; font-weight: 800; line-height: 1;
  display: grid; place-items: center; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.add-btn__badge[hidden] { display: none; }
/* 售罄（参考图1）：商品图压暗 + 居中一颗半透明灰「当前售罄」牌，加号换成灰色不可点的「售罄」牌 */
/* 售罄（参考图2/图3）：图片「加白」冲淡而不是压灰、左上角写「已售罄」、整块文字价格一起变淡 */
.p-row.is-oos .p-row__img::after {
  content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .55);
}
.p-row__oos {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  background: rgba(92,92,92,.62); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap; letter-spacing: .5px;
}
.p-row.is-oos .p-row__main { opacity: .5; }
/* 库存不多：只留在购物车行（灰字贴步进器左边）；菜单图和规格底栏不再挂这颗签 */
.stock-hint {
  position: absolute; right: 5px; bottom: 5px; z-index: 1;
  background: rgba(30, 12, 14, .72); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 4px 6px; border-radius: 6px; white-space: nowrap;
}
/* 购物车行里的同一句话不压在图片上，只是灰字贴在步进器左边 */
.stock-hint--line {
  position: static; background: none; color: #9a8a8c;
  font-size: 11px; font-weight: 600; padding: 0; margin: 0 2px 0 auto;
}
.add-btn--oos {
  width: auto; height: 26px; padding: 0 12px; border-radius: 13px;
  background: #d9d2d3; color: #fff; font-size: 12px; font-weight: 800;
}
/* 售罄那颗牌不是按钮，去掉按压回弹 */
.add-btn--oos:active { transform: none; }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- 底部抽屉 ---------- */
.scrim {
  --lift: 0px;
  position: absolute; left: 0; right: 0; top: 0; bottom: var(--lift);
  background: rgba(30, 8, 10, .48);
  opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 20;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  --dock: 0px;
  position: absolute; left: 0; right: 0; bottom: var(--dock); z-index: 21;
  background: var(--card); border-radius: 22px 22px 0 0;
  max-height: calc(var(--sheet-h) - var(--dock)); display: flex; flex-direction: column;
  transform: translateY(calc(100% + var(--dock) + 8px));
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 -10px 30px rgba(70, 10, 14, .18);
}
.sheet.is-open { transform: translateY(0); }
/* 规格页选项多、底部还要放价格与双按钮，抽屉抬到近整页高；
   用百分比而不是 vh，桌面端手机画框只有 880px，按 vh 会把表头顶出框外 */
.sheet.is-tall { max-height: 92%; }
/* 购物车抽屉坐在菜单栏上沿，底部让出悬浮的购物车条；不打投影，免得在胶囊和菜单栏之间留一层灰 */
.sheet.is-docked { box-shadow: none; }
.sheet.is-docked .sheet__body { padding-bottom: 86px; }
.sheet__grab { width: 34px; height: 4px; border-radius: 4px; background: #ece2e0; margin: 8px auto 0; flex: 0 0 auto; }
.sheet__head { padding: 10px 16px 12px; display: flex; gap: 14px; align-items: flex-start; border-bottom: 1px solid var(--line); }
.sheet__head .art-lg { width: 78px; height: 78px; flex: 0 0 auto; }
.sheet__title { font-size: 17px; font-weight: 800; }
.sheet__desc { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.sheet__body { flex: 1 1 auto; overflow-y: auto; padding: 6px 16px 16px; }
.close-x { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: #f8f1f1; color: #786568; display: grid; place-items: center; z-index: 2; }
.close-x svg { width: 15px; height: 15px; }

/* 规格卡片（.spec-group / .spec-opt / 图标三档 / 温度选中发光）整块搬到 public/spec.css，
   和后台「商品预览」共用同一份，改一处两边一起变。这一页在 </head> 里 link 它。 */

/* 规格页底部：大价 + 划线价 + 已选规格摘要 + 数量 + 双按钮，整块不跟着正文滚 */
.spec-foot {
  flex: 0 0 auto; padding: 10px 16px calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--line); background: #fff;
}
.spec-foot__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.spec-price { display: flex; align-items: baseline; gap: 5px; color: var(--brand); font-weight: 800; }
.spec-price i { font-style: normal; font-size: 14px; }
.spec-price b { font-size: 25px; line-height: 1; letter-spacing: -.3px; }
.spec-price s { font-size: 12.5px; font-weight: 600; color: #a99899; }
.spec-foot__sum { margin-top: 6px; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 后台设的「N 杯起售 / 每单限购 M 杯」压在价格栏最上面一行，不加高抽屉 */
.spec-foot__limit { display: inline-block; font-size: 11px; color: var(--brand); background: var(--brand-soft); border-radius: 6px; padding: 3px 8px; margin-bottom: 8px; }
/* 商品详情：后台那段富文本，接在做法下面，虚线分一道，字号比正文小一号 */
/* 商品详情底部的「产品介绍 / 价格说明」（2026-10-23 照参考图加） */
.pd-notes { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2, #e4d9da); }
.pd-notes__h { display: flex; align-items: center; gap: 6px; margin: 14px 0 8px; font-size: 14px; font-weight: 800; color: var(--ink); }
.pd-notes__h:first-child { margin-top: 0; }
.pd-notes__h svg { width: 15px; height: 15px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pd-notes__p, .pd-notes__cap { margin: 0 0 6px; font-size: 12.5px; line-height: 1.8; color: #6b5a5e; }
.pd-notes__p { white-space: pre-wrap; }
.pd-notes__cap { color: var(--muted); }
.pd-notes__list { margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.pd-notes__list li { margin-bottom: 3px; }
.pd-detail { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2, #e4d9da); font-size: 12.5px; line-height: 1.75; color: var(--muted); word-break: break-word; }
.pd-detail h3 { font-size: 13.5px; color: var(--ink); margin: 10px 0 5px; }
.pd-detail p { margin: 0 0 7px; }
.pd-detail img { display: block; max-width: 100%; border-radius: 10px; margin: 8px 0; }
.pd-detail ul, .pd-detail ol { margin: 0 0 7px; padding-left: 18px; }
.spec-foot__btns { display: flex; gap: 11px; margin-top: 12px; }
.spec-btn { flex: 1; height: 45px; border-radius: 23px; font-size: 15px; font-weight: 800; display: grid; place-items: center; }
.spec-btn.is-ghost { background: #fff; border: 1.5px solid var(--brand); color: var(--brand); }
.spec-btn.is-solid { background: var(--brand); color: #fff; }

.qty { display: flex; align-items: center; gap: 2px; margin-left: auto; transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.qty button { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; line-height: 1; }
.qty button svg { width: 13px; height: 13px; }
.qty__n { min-width: 26px; text-align: center; font-size: 14px; font-weight: 700; }
.qty .minus { background: #f8f1f1; color: #a99899; }
.qty .plus { background: var(--brand); color: #fff; }

.big-btn {
  flex: 1; height: 46px; border-radius: 23px; background: var(--brand); color: #fff;
  font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.big-btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- 购物车抽屉 ---------- */
.cart-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 6px 0 1px; }
.cart-label__tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--brand); border-radius: 5px; padding: 2.5px 6px; letter-spacing: .5px; }
.cart-label__tag svg { width: 11px; height: 11px; flex: 0 0 auto; }
/* 左滑删除：红色按钮从右侧滑进行右边的留白区，商品图和文字都不动，只让加减器挪位 */
.cart-row { position: relative; overflow: hidden; touch-action: pan-y; }
.cart-del {
  position: absolute; top: 0; right: 0; bottom: 0; width: 76px; z-index: 2;
  background: var(--brand); color: #fff; border-radius: 10px 0 0 10px;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.cart-del span {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 14px; font-weight: 800; letter-spacing: 1px; text-align: center;
}
.cart-line { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 11px; padding: 12px 0; border-bottom: 1px solid #f1e8e9; align-items: center; }
.cart-row:last-child .cart-line { border-bottom: 0; }
.cart-row.is-open .cart-del { transform: translateX(0); }
.cart-row.is-open .qty { transform: translateX(-84px); }
.cart-row.is-dragging .cart-del, .cart-row.is-dragging .qty { transition: none; }
.cart-line__main { min-width: 0; }
.cart-line__name { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.cart-line__spec { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.cart-line__bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.cart-line__price { font-size: 16.5px; font-weight: 800; color: var(--brand); white-space: nowrap; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }
.cart-line__price s { font-size: 11.5px; font-weight: 600; color: #b6a8a9; }
.cart-line__price i { font-style: normal; font-size: 11.5px; margin-right: 1px; }
.cart-line .art { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #fff; }
.sheet__head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; }
.sheet__head-row h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 7px; min-width: 0; }
.sheet__head-row h3 i { font-style: normal; color: var(--muted); font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.cart-head__name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 「清空 / 取消 / 关闭」这类文字按钮：以前带下划线，他说「把清空文字下面的下划线给移除」 */
.link-btn { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.link-btn:active { color: var(--brand); }
/* 二次确认那一步：从灰文字变成一颗描边胶囊，点下去才真的清空（照他给的参考图3） */
.link-btn--confirm {
  color: var(--brand); border: 1px solid var(--brand); border-radius: 6px;
  padding: 3px 12px; font-size: 12.5px; font-weight: 700; background: #fff;
}
.link-btn__ico { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---------- 门店打烊提示（照库迪那张「休息中，可切换其他门店选购」） ---------- */
/* 只浮在内容之上、盖住遮罩：它是个提示，不是抽屉，所以不进 #stage 的滚动流 */
.notice { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(24, 12, 14, .5); padding: 0 26px; }
.notice[hidden] { display: none; }
.notice__box {
  width: 100%; max-width: 320px; background: #fff; border-radius: 14px; padding: 24px 20px 18px;
  text-align: center; box-shadow: 0 18px 44px rgba(60, 10, 16, .24);
}
.notice__title { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.5; }
.notice__body { font-size: 13.5px; color: var(--ink-2); line-height: 1.9; margin-top: 14px; }
.notice__acts { display: flex; gap: 12px; margin-top: 22px; }
.notice__btn {
  flex: 1; height: 42px; border-radius: 9px; border: 1px solid var(--line-2, #e4d9da);
  background: #fff; color: var(--ink); font-size: 15px; font-weight: 700;
}
.notice__btn.is-solid { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 门店名后面那颗「休息中」：和弹窗同一判据（后端 open_hours 算出来的 closed），不会一处说打烊一处说营业 */
.store-line__closed {
  font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: #9a8f90;
  border-radius: 4px; padding: 1px 5px; flex: 0 0 auto;
}

/* ---------- 底部购物车条 / Tab ---------- */
/* 浮在菜单栏上方：胶囊后面不留底色也不打投影，只靠描边分离，商品列表从它底下滚过 */
.cartbar {
  position: absolute; left: 0; right: 0; bottom: var(--tab-h, 60px); z-index: 12;
  margin: 0 12px 8px; padding: 4px 8px 4px 12px; border-radius: 30px;
  background: #fff; color: var(--ink); display: flex; align-items: center; gap: 10px;
  border: 1px solid #eedfe0;
}
.cartbar[hidden] { display: none; }
.cartbar__left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; }
.cart-bag { position: relative; flex: 0 0 auto; width: 54px; height: 54px; }
.cart-bag img { width: 54px; height: 54px; display: block; object-fit: contain; }
.cart-badge {
  position: absolute; top: 0; right: -4px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.cartbar__prices { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 两行：「预估到手 ¥合计」+「特惠立减 ¥一共省了多少」（参考图3 的预计到手 / 共减免）。
   定语小一号压在金额左边，第二行比定语还小一号，胶囊高度由 54px 的购物袋顶着，不会因此变高。 */
.cartbar__total { display: flex; align-items: baseline; gap: 4px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cartbar__total em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.cartbar__save { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartbar__save[hidden] { display: none; }
.cartbar__go {
  height: 38px; padding: 0 22px; border-radius: 19px; background: var(--brand); color: #fff;
  font-size: 14.5px; font-weight: 800;
}
.cartbar__go[disabled] { background: #e7dcdd; color: #fff; }

.tabbar {
  flex: 0 0 auto; position: relative; display: flex; background: #fff; border-top: 1px solid #efe7e8;
  padding: 6px 0 calc(6px + var(--safe-bottom));
  /* 和原生菜单栏同一件事：条上方一道「浮着」的投影（原生那边是渐变，见 ui/Shell.kt 的 TabBar） */
  box-shadow: 0 -7px 12px rgba(0, 0, 0, .055);
}
/* 购物车抽屉展开时，底部购物车条和菜单栏浮在抽屉之上、也不进遮罩 */
.phone.cart-docked .cartbar, .phone.cart-docked .tabbar { z-index: 22; }
.tabbar[hidden] { display: none; }
.tab { flex: 1; display: grid; justify-items: center; gap: 3px; color: #a99899; font-size: 11px; padding: 3px 0 4px; }
.tab.is-active { color: var(--brand); font-weight: 700; }
/* 四格都用他给的那对图：未选中黑色版，选中红色版（同一格叠两张，靠 display 切） */
.tab__ico { width: 22px; height: 22px; object-fit: contain; display: none; }
.tab__ico--off { display: block; }
.tab.is-active .tab__ico--off { display: none; }
/* --on 那张从 display:none 变可见时，选择器重新开始匹配 → 回弹动画每次切 tab 都会重掷 */
@keyframes tab-pop { 0% { transform: scale(.7) } 60% { transform: scale(1.14) } 100% { transform: scale(1) } }
.tab.is-active .tab__ico--on { display: block; animation: tab-pop .34s cubic-bezier(.34, 1.56, .64, 1); }
.tab.is-active > span { animation: tab-pop .34s cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- 结算页 ---------- */
.checkout { padding: 4px 14px 24px; }
.panel { background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.panel__title { font-size: 14px; font-weight: 800; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.panel__title span { font-size: 12px; color: var(--muted); font-weight: 500; }
.pickup-store { display: flex; gap: 10px; align-items: flex-start; }
.pickup-store__ico { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: 0 0 auto; }
.pickup-store__ico svg { width: 17px; height: 17px; }
.pickup-store__name { font-size: 14.5px; font-weight: 700; }
.pickup-store__meta { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.mode-row { display: flex; gap: 8px; margin-top: 12px; }
.mode { flex: 1; padding: 9px; border-radius: 11px; background: #f8f1f1; font-size: 13px; text-align: center; color: #7d6a6d; }
.mode.is-on { background: var(--brand-soft); color: var(--brand); font-weight: 700; border: 1px solid var(--accent); }
.mode.is-off { opacity: .5; }
.co-line { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; }
.co-line:first-of-type { border-top: 0; }
.co-line .art { width: 38px; height: 38px; border-radius: 8px; overflow: hidden; background: #f6f2ec; }
.co-line__name { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.co-line__spec { font-size: 11px; color: var(--muted); margin-top: 2px; }
.co-line__p { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-line__p s { display: block; font-size: 11px; color: #b6a8a9; }
.co-line__p b { font-size: 14px; font-weight: 800; color: var(--ink); }
/* 清单底部的原价 / 优惠两行，用虚线跟商品分开 */
.co-sum { margin-top: 12px; padding-top: 6px; border-top: 1px dashed var(--line); }
.field { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.field:first-of-type { border-top: 0; }
.field label { font-size: 13px; color: #634f53; flex: 0 0 62px; }
.field input, .field textarea {
  flex: 1; border: 0; outline: none; background: none; font-size: 13.5px; resize: none; min-width: 0;
}
.field textarea { height: 40px; }
.amount-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 5px 0; color: #634f53; }
.amount-row b { font-weight: 700; color: var(--ink); }
.amount-row.is-off b { color: var(--brand); }
.amount-row.is-off > span { display: flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 600; }
.amount-row--total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; font-size: 14px; font-weight: 700; color: var(--ink); }
/* 整单没优惠时合计是块里第一行，上面已经有一条虚线了，别再叠一条 */
.co-sum > .amount-row:first-child { border-top: none; margin-top: 0; }
.amount-row--total i, .amount-row--total em { font-style: normal; font-weight: 800; color: var(--brand); font-size: 16px; padding: 0 1px; }
.amount-row--total em { color: var(--ink); font-size: 19px; letter-spacing: -.3px; padding: 0; }
.amount-row--total s { font-size: 12px; font-weight: 500; color: #b6a8a9; margin-right: 7px; }
.checkout-bar {
  position: sticky; bottom: 0; margin: 0 -14px -24px; padding: 12px 16px calc(14px + var(--safe-bottom));
  background: #fff; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px;
}
/* 参考图那一版：左边两行（大字价 + 同行灰字已优惠 / 下面一句红字提示），右边只剩动作 */
.checkout-bar__sum { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; }
.checkout-bar__row { display: flex; align-items: baseline; gap: 5px; }
.checkout-bar__row b { font-size: 22px; color: var(--brand); letter-spacing: -.3px; }
.checkout-bar__row i { font-style: normal; font-size: 11.5px; color: #b0a0a1; }
.checkout-bar__hint { font-size: 11.5px; font-weight: 700; color: var(--price); }

/* ---------- 订单详情 / 取餐码 ---------- */
.ticket { padding: 14px 14px 26px; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

/* 取餐码是一块蓝天：气球数字飘在天上，完成后换成 Happy every day 气球 */
.tk-sky {
  position: relative; overflow: hidden; margin-top: 6px; height: 252px; border-radius: 20px;
  background: #6aa8e0 url('/assets/sky.jpg') center 32% / cover no-repeat;
  box-shadow: 0 10px 26px rgba(50, 100, 155, .24);
}
/* 三位码一只气球有 ~110px 宽，飘起来（bob 绕 165% 处甩 ±2°）横向能移十几像素，
   左右各留 20px 内距，免得最边上那只被卡片的 overflow: hidden 削掉一块。
   气球本体是撑满整张 PNG 画布的，圆头顶就贴着 img 上沿，所以顶部内距一定要留出
   「飘动摆幅 + 落位偏移」以外的余量，否则最上那只的脑袋会被卡片上边界削掉。 */
.tk-balloons {
  position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-start;
  padding: 34px 20px 0;
}
/* 十张图都裁成「气球本体等高 330px」，所以 --h 就是每只的随机高度；
   外层负责「从卡片底下斜着飞上来」和落位后的错落、倾角，内层负责之后一直飘 */
.tk-balloon {
  flex: 0 0 auto;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg));
  animation: balloon-rise var(--rise, 1.3s) cubic-bezier(.22, .68, .3, 1) var(--rise-delay, 0s) both;
}
/* 起点在卡片下边界之外（240 高的卡 + 268 位移），所以是「从底下飞进来」而不是淡入；
   --x0 / --r0 让每只从不一样的横向位置和姿态斜着飘到位，每次进来都不一样 */
@keyframes balloon-rise {
  from { transform: translate(calc(var(--dx, 0px) + var(--x0, 0px)), calc(var(--dy, 0px) + 268px)) rotate(var(--r0, 0deg)); }
  to { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)); }
}
.tk-balloon img {
  display: block; height: var(--h, 150px); width: auto; will-change: transform; transform-origin: 50% 165%;
  animation: balloon-bob var(--dur, 4.6s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes balloon-bob {
  0%, 100% { transform: translateY(0) rotate(calc(var(--tilt, 1.6deg) * -1)); }
  50% { transform: translateY(calc(var(--amp, 9px) * -1)) rotate(var(--tilt, 1.6deg)); }
}
/* 制作中 → 制作完成那一下：整排气球**真飞出天空外**、空出半秒、再从卡片底下重新飞回来落位，
   落位后 balloon-bob 照旧一直飘。只在状态翻页那一次播。
   2026-10-21 他把「还在天空里就淡出消失」点回来过，所以这里**一路不藏 opacity**：
   飞出去靠卡片那圈 overflow: hidden 裁掉，看着就是气球飘出画面；起飞用 ease-in（一上来就窜出去是「假」的来源）。
   30%→31% 是「已经在天空上方外面」瞬移到「卡片下面外面」，两端都在画面外，所以不需要藏。 */
@keyframes balloon-cheer {
  0% { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)); animation-timing-function: cubic-bezier(.5, 0, .95, .55); }
  30% { transform: translate(calc(var(--dx, 0px) + var(--x0, 0px)), calc(var(--dy, 0px) - 420px)) rotate(var(--r0, 0deg)); animation-timing-function: linear; }
  31% { transform: translate(calc(var(--dx, 0px) + var(--x0, 0px)), calc(var(--dy, 0px) + 300px)) rotate(var(--r0, 0deg)); }
  48% { transform: translate(calc(var(--dx, 0px) + var(--x0, 0px)), calc(var(--dy, 0px) + 300px)) rotate(var(--r0, 0deg)); animation-timing-function: cubic-bezier(.22, .68, .3, 1); }
  100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)); }
}
.tk-balloons.is-cheer .tk-balloon {
  /* 三只的错开压到 1/3：不然第一只都飞回来了第三只才起飞，中间凑不出那 0.5s 空天空 */
  animation: balloon-cheer 3.2s linear calc(var(--rise-delay, 0s) * .3) both;
}
/* 顾客取餐（这一单翻到「已完成」）那一下：取餐码那串气球往上飘出天空，**不折回来**。
   位移 420px 是算过的：顶部内距 34 + 落位偏移最多 22 + 单只最高 168 = 224，飞够 420 早就出画了，
   所以尾巴上不会挂着半只没飞干净的气球，也不需要中途淡出。 */
@keyframes balloon-out {
  from { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)); }
  to { transform: translate(calc(var(--dx, 0px) + var(--x0, 0px) * .35), calc(var(--dy, 0px) - 420px)) rotate(var(--r0, 0deg)); }
}
.tk-balloons.is-exit .tk-balloon {
  animation: balloon-out 1.25s cubic-bezier(.5, 0, .95, .5) calc(var(--rise-delay, 0s) * .25) both;
}
/* 这条要排在上面几条后面（同权重靠后者胜），否则减弱动效压不住飞入和庆祝 */
@media (prefers-reduced-motion: reduce) {
  .tk-balloon, .tk-balloon img, .tk-balloons.is-cheer .tk-balloon, .tk-balloons.is-exit .tk-balloon,
  .tk-dog, .tk-dog img { animation: none; }
}
/* 完成后换成这只穿红围裙的苟豆气球：从卡片底下飞进来，落在天空里一直飘（左中右随机进、随机飘） */
.tk-dog {
  position: absolute; top: var(--y, 40px); left: var(--x, 50%);
  animation: dog-rise var(--rise, 1.5s) cubic-bezier(.22, .68, .3, 1) var(--rise-delay, .6s) both;
}
@keyframes dog-rise {
  from { transform: translate(calc(-50% + var(--x0, 0px)), 320px) rotate(var(--r0, -6deg)); }
  to { transform: translateX(-50%) rotate(0deg); }
}
/* 落位之后：上下飘 + 左右游 + 轻微摆，周期、幅度、相位每次进这一页都重掷（跟那串气球一个路子） */
.tk-dog img {
  display: block; height: var(--h, 168px); width: auto; will-change: transform; transform-origin: 50% 165%;
  animation: dog-float var(--dur, 5s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes dog-float {
  0%, 100% { transform: translate(0, 0) rotate(calc(var(--tilt, 1.8deg) * -1)); }
  25% { transform: translate(calc(var(--drift, 10px) * -1), calc(var(--amp, 9px) * -1)) rotate(0deg); }
  50% { transform: translate(var(--drift, 10px), calc(var(--amp, 9px) * -.35)) rotate(var(--tilt, 1.8deg)); }
  75% { transform: translate(calc(var(--drift, 10px) * .45), calc(var(--amp, 9px) * -.85)) rotate(0deg); }
}

.tk-status { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 14.5px; font-weight: 700; text-align: center; }
.tk-status b { color: var(--brand); font-variant-numeric: tabular-nums; }
/* 状态主句下面那行灰色小字（「预估时长仅供参考」那一类）：比主句小两号、压暗，别抢进度条的位置 */
.tk-status__sub { margin-top: 6px; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--muted); text-align: center; padding: 0 22px; }
/* 催单：进度条下面一颗奶粉底胶囊；催过以后原地换成回复文案（他 2026-10-21 给的喜茶详情页同款） */
.tk-urge-slot { display: flex; justify-content: center; margin-top: 12px; }
.tk-urge {
  border: 0; background: #f6eeea; color: #7c5b4f; border-radius: 999px;
  padding: 9px 18px; font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1;
}
.tk-urge.is-sent { background: #f6eeea; color: var(--muted); font-weight: 600; }
.tk-urge:active { transform: scale(.97); }
/* 「等待制作」进度条：三个节点是这一单自己的阶段（已付款 → 制作中 → 待取餐），
   只用品牌红，跟门店忙闲那根绿/橙/红条不是一回事。线的两端对齐第一、第三个圆点中心（16.667% 是三列栅格的列中线）。 */
.tk-steps { position: relative; margin-top: 16px; }
.tk-steps__line { position: absolute; left: 16.667%; right: 16.667%; top: 4px; height: 3px; border-radius: 999px; background: #ece0e1; overflow: hidden; }
.tk-steps__line i {
  display: block; height: 100%; border-radius: inherit; background: var(--brand); transform-origin: left center;
  /* 前方杯数掉下来、状态翻页时条都是滑过去的，不跳 */
  transition: width .6s cubic-bezier(.22, .68, .3, 1);
}
/* 刚进详情页那一下：条从左边扫过去，三颗圆点按条到达的先后依次亮起（--dot-delay 由 JS 按节点位置给） */
.tk-steps.is-enter .tk-steps__line i { animation: busy-grow .8s cubic-bezier(.22, .68, .3, 1) both; }
.tk-steps.is-enter .dot { animation: tk-dot-in .2s ease var(--dot-delay, 0s) both; }
@keyframes tk-dot-in { from { background: #ece0e1; } }
/* 排队/制作中时红条上有一道慢慢扫过的反光，让「正在等」这件事自己动起来 */
.tk-steps.is-running .tk-steps__line i { position: relative; overflow: hidden; }
.tk-steps.is-running .tk-steps__line i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  animation: tk-sheen 1.8s ease-in-out infinite;
}
@keyframes tk-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* 反光要扫过亮着的圆点才算一条完整的「等待」动效，不能只扫条。同动画同名同时长、跟条一起起播，
   视觉上就是一束光从左到右扫过整组（圆点自己 11px，所以扫过时是一道细闪） */
.tk-steps.is-running .tk-steps__nodes li.is-on .dot { position: relative; overflow: hidden; }
.tk-steps.is-running .tk-steps__nodes li.is-on .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  animation: tk-sheen 1.8s ease-in-out infinite;
}
.tk-steps__nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.tk-steps__nodes li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tk-steps__nodes .dot { width: 11px; height: 11px; border-radius: 50%; background: #ece0e1; flex: 0 0 auto; transition: background .35s ease; }
.tk-steps__nodes .lbl { font-size: 11.5px; color: var(--muted); transition: color .35s ease; }
.tk-steps__nodes li.is-on .dot { background: var(--brand); }
.tk-steps__nodes li.is-on .lbl { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .tk-steps__line i { transition: none; animation: none; }
  .tk-steps.is-enter .dot { animation: none; }
  .tk-steps.is-running .tk-steps__line i::after,
  .tk-steps.is-running .tk-steps__nodes li.is-on .dot::after { animation: none; content: none; }
}

.tk-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 14px; margin-top: 14px; }
/* 门店行只剩一行：自取标签 + 门店名，右侧两个纯图标用一条竖线隔开（参考瑞幸那张卡片） */
.tk-store { padding: 14px 0 12px; }
.tk-store__name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 15px; font-weight: 800; }
.tk-store__name .oc-mode { flex: 0 0 auto; }
.tk-store__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-store__acts { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; margin-left: auto; padding-left: 8px; }
.tk-act { width: 20px; height: 20px; display: grid; place-items: center; color: #5d4b4e; }
.tk-act:active { color: var(--brand); }
.tk-act svg { width: 17px; height: 17px; stroke-width: 1.6; }
.tk-act__div { width: 1px; height: 13px; background: var(--line); }

.tk-goods__row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 11px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.tk-goods__art { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: #f6f2ec; }
.tk-goods__art svg { width: 100%; height: 100%; display: block; }
/* 商品图一律 contain + 白底，不许裁：订单缩略图和取餐码卡片以前用 cover，
   遇到横构图的商品图（藤椒翅尖 1125×618、黄金脆片炸鸡 560×420）就把两边切掉、
   看着像「图没适配」（2026-10-17 图5）。竖构图那几张本来就是方的，改了没差别。 */
.tk-goods__art .art-img { width: 100%; height: 100%; object-fit: contain; }
.tk-goods__name { min-width: 0; }
.tk-goods__name b { display: block; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.tk-goods__name span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.tk-goods__price { text-align: right; white-space: nowrap; }
.tk-goods__price s { display: block; font-size: 11px; color: #b6a8a9; }
.tk-goods__price em { display: block; font-style: normal; font-size: 14px; font-weight: 800; color: var(--ink); }
.tk-goods__price i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* 卡片最后一行：左「共 N 件商品」（数字标红），右「划线原价 + 大字合计」，与结算页 .amount-row--total 同一套字号 */
.tk-pay { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 700; color: var(--ink); padding: 14px 0; border-top: 1px solid var(--line); }
.tk-pay i { font-style: normal; font-weight: 800; color: var(--brand); font-size: 16px; padding: 0 1px; }
.tk-pay__right { display: flex; align-items: baseline; gap: 7px; }
.tk-pay__right s { font-size: 12px; font-weight: 500; color: #b6a8a9; }
.tk-pay b { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-pay em { font-style: normal; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
/* 优惠紧跟商品行（卡片内、合计之上）：红底「减」圆标 + 黑字「特惠立减」+ 右侧红色「已省 ¥X」 */
.tk-cut { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); padding: 12px 0; }
.cut-badge { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; display: grid; place-items: center; }
.tk-cut b { margin-left: auto; color: var(--brand); font-weight: 800; font-variant-numeric: tabular-nums; }
/* 退款那一行和「减」同款圆标（换成「退」），两行同时出现时不重复留白 */
.tk-cut + .tk-cut { padding-top: 0; }
.tk-cut--refund .cut-badge.is-refund { background: #8f7377; }
.tk-cut--refund b { color: #8f7377; }

.tk-info { padding: 6px 14px 12px; }
.tk-info__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; padding: 8px 0; }
.tk-info__row span { color: var(--muted); flex: 0 0 auto; }
.tk-info__row b { font-weight: 700; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
/* 订单编号前的来源徽标（网页端标 H5，App 端标 App） */
.tk-src { font-style: normal; flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #6b5a5e; background: #f1eaea; border-radius: 999px; padding: 1px 7px; }
/* 「复制」从文字换成图标 */
.tk-copy { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: #6b5a5e; }
.tk-copy svg { width: 14px; height: 14px; stroke-width: 1.8; }
.ticket-actions { display: grid; gap: 10px; margin-top: 18px; }

/* ---------- 下拉刷新 ---------- */
.ptr {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 0; overflow: hidden; font-size: 12px; color: var(--muted);
  transition: height .2s ease;
}
.ptr.is-drag { transition: none; }
.ptr__dot { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; border: 2px solid #e5dad8; border-top-color: var(--brand); }
.ptr.is-spin .ptr__dot { animation: spin .8s linear infinite; }

/* ---------- 订单列表 ---------- */
.order-list { padding: 4px 12px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.order-card { background: #fff; border-radius: var(--radius); padding: 13px 14px; box-shadow: var(--shadow); text-align: left; min-width: 0; }
.oc-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.oc-mode {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 800; color: #fff; background: var(--brand);
  padding: 2.5px 6px; border-radius: 5px; letter-spacing: .5px;
}
.oc-mode svg { width: 11px; height: 11px; flex: 0 0 auto; }
.oc-store { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-status { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--accent); }
.oc-status.is-ready { color: #16a34a; }
.oc-status.is-done { color: #a99899; }
.oc-status.is-refund { color: #8f7377; }
/* 状态后面的「›」：提示整张卡片可点进详情，中性灰、贴着状态文字 */
.oc-head .oc-go { flex: 0 0 auto; width: 13px; height: 13px; margin-left: -3px; color: #bfb3b4; stroke-width: 2.2; }
.oc-time { font-size: 11.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
/* 商品全部列出：一行正好放 5 个，第 6 个起左右滑动查看 */
.oc-goods { position: relative; margin-top: 10px; --oc-gap: 8px; }
.oc-rail { display: flex; gap: var(--oc-gap); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.oc-rail::-webkit-scrollbar { display: none; }
.oc-item { flex: 0 0 calc((100% - var(--oc-gap) * 4) / 5); min-width: 0; scroll-snap-align: start; }
.oc-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; }
.oc-thumb .art-img { width: 100%; height: 100%; object-fit: contain; }
.oc-thumb svg { width: 100%; height: 100%; display: block; }
.oc-qty {
  position: absolute; right: 0; bottom: 0; min-width: 19px; height: 17px; padding: 0 4px; border-radius: 6px 0 10px 0;
  background: rgba(32, 6, 9, .72); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center;
}
/* 名字居中压在图的中间，不然长短不一的名字全靠左，看着像没对齐 */
.oc-item__name {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 5px; min-height: 27px; font-size: 10.5px; line-height: 1.3; color: #6b5a5e;
  text-align: center; word-break: break-all;
}
.oc-goods.is-more::after {
  content: ''; position: absolute; right: -4px; top: 0; bottom: 0; width: 26px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 76%);
}
.oc-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.oc-code { font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-code b { font-size: 16px; color: var(--brand); letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.oc-thanks { font-size: 12px; color: #a99899; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-total { display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto; }
.oc-total i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.oc-total b { font-size: 15px; font-weight: 800; color: var(--brand); }
.oc-total b.oc-refund { font-size: 13.5px; color: #8f7377; }

/* ---------- toast ---------- */
/* 价格说明气泡：深色，那颗小三角单独指回被点的 ⓘ（--ax 由 JS 按按钮中心算）。
   left / width 全部由 JS 按「所在内容列」算：点单页只铺在商品列里、不盖左边 68px 分类栏（图1），
   规格抽屉里按抽屉内距铺。贴在屏幕下沿放不下时整体翻到按钮上方，三角改朝下。 */
.price-tip {
  position: absolute; z-index: 30;
  background: rgba(32, 6, 9, .92); color: #fff; border-radius: 10px; padding: 10px 26px 10px 12px;
  font-size: 11.5px; line-height: 1.6;
}
.price-tip p { margin: 0; }
.price-tip p + p { margin-top: 5px; }
.price-tip b { font-weight: 800; }
.price-tip__x {
  position: absolute; right: 7px; top: 7px; width: 18px; height: 18px; border-radius: 50%;
  color: rgba(255, 255, 255, .72); display: grid; place-items: center;
}
.price-tip__x svg { width: 10px; height: 10px; stroke-width: 2.2; }
.price-tip::before {
  content: ""; position: absolute; top: -5px; left: var(--ax, 20px); margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid rgba(32, 6, 9, .92);
}
.price-tip.is-above::before {
  top: auto; bottom: -5px; border-bottom: none; border-top: 5px solid rgba(32, 6, 9, .92);
}
.toast {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 40;
  background: rgba(32, 6, 9, .9); color: #fff; padding: 10px 18px; border-radius: 12px;
  font-size: 13.5px; opacity: 0; transition: opacity .2s ease; pointer-events: none; max-width: 80%; text-align: center;
}
.toast.is-show { opacity: 1; }

.loading { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 13px; }
/* 订单列表分页：底部那行「加载中」要贴着列表尾巴，不能像整屏加载那样空一大截 */
.loading--more { padding: 14px 20px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.oc-end { padding: 14px 0 2px; text-align: center; color: var(--muted); font-size: 12px; }
.spin { width: 22px; height: 22px; margin: 0 auto 10px; border-radius: 50%; border: 2px solid #e5dad8; border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 首页（与原生 App 的 Home.kt 同一套：整屏白底，三块都做成看得出的「模块」） ---------- */
/* 三块固定高度在矮屏上刚好、在高屏上底下会空一条（他「太上了显得用户 ui 下面一片空白」）。
   所以整屏做成 flex 列：海报封顶 330 不再拉长，剩下的空白交给两块 auto 上边距均分 ——
   模块往下散开铺满一屏；矮屏上 auto 退化成 padding-top 那 12px，和以前一样。 */
/* ⚠️ 必须写成 :not([hidden])：`#screen-home { display: flex }` 的 ID 选择器优先级
   压过 `.screen[hidden] { display: none }`，hidden 就白设了 —— 结果首页那三块
   在点单 / 订单 / 我的每一屏都叠在上面露出来（2026-10-17 他图2-5）。 */
#screen-home:not([hidden]) { display: flex; flex-direction: column; }
/* 整页底色是他定的 #f2f2f1：白色的是海报图本身和两张入口图，不是页面（2026-10-23 他纠正过一次） */
#screen-home { background: #f2f2f1; }
#homeBody { flex: 1; display: flex; flex-direction: column; }
/* 2026-10-23 他给参考图：「把点单首页设计成这样，不要那些框」——
   整屏只剩内容和留白：海报顶到左右两边，入口图/会员条都不套边框、圆角和投影。 */
.home-body { flex: 1; display: flex; flex-direction: column; padding: 0 0 10px; }

/* 海报/入口图本身是白底图，页面底色（#f2f2f1）只在图与图之间露出来 */
.banner { position: relative; background: transparent; overflow: hidden; }
.banner__track { display: flex; transition: transform .45s cubic-bezier(.4, .1, .2, 1); }
/* 海报原图是竖版 843×1125（宽/高 ≈ 0.75）：框按原图比例，整张完整显示，不再上下裁掉饼底 */
.banner__item { flex: 0 0 100%; display: block; aspect-ratio: .75; background: transparent; overflow: hidden; }
.banner__img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 页码那颗药丸压在海报底部居中（以前挂在海报外面，白底上像多出来的一条灰杠） */
.banner__page { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; pointer-events: none; }
.banner__page span {
  padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .16);
  font-size: 11.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
}

.home-modes { margin-top: auto; margin-bottom: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 10px 0; }
/* 入口图本身就是一张 250×250 的插画（标题画在图里），直接贴白底，不再加卡片、描边和底部 CTA */
.home-mode { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 14px; overflow: hidden; }
.home-mode img { width: 100%; display: block; object-fit: contain; }

/* 会员条：头像 + 苟豆 + 「苟豆大师」标签 + 标语，右边一列数字压着「累计订单」——
   参考图里是白底上的一行，不套卡片（他 2026-10-23「不要那些框」） */
.me-strip {
  display: flex; align-items: center; gap: 9px; width: auto; margin: auto 10px 0;
  padding: 12px; text-align: left; background: #fff; border-radius: 6px; border: 0; box-shadow: none;
}
.me-strip__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); overflow: hidden; }
.me-strip__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.me-strip__main { flex: 1; min-width: 0; }
.me-strip__name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--ink); }
.me-strip__name i {
  font-style: normal; padding: 1.5px 5px; border-radius: 5px; background: #f7efe3;
  font-size: 10px; font-weight: 700; color: #8a7058;
}
.me-strip__slogan { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-strip__stat { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.me-strip__stat b { font-size: 17px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.me-strip__stat span { font-size: 10.5px; color: var(--muted); }

/* ---------- 顶栏第三行（门店名下方：定位距离 + 制作进度药丸，对应参考图的距离 + 座位数） ---------- */
.appbar-busy { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.appbar-busy:empty { display: none; }
.appbar-busy .dist { color: rgba(255, 255, 255, .88); flex: 0 0 auto; }
/* 参考图把公里数加粗提亮，标签本身留半透明，一眼扫过去先看到数字 */
.appbar-busy .dist b { font-size: 12.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.appbar-busy .busy-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px;
  min-width: 0; overflow: hidden;
  border-radius: 999px; background: rgba(255, 255, 255, .95); color: #6b5a5e; font-weight: 600; white-space: nowrap;
}
.appbar-busy .busy-pill .pip { animation: none; }
/* 只有红档闪——不忙的时候别抖 */
.appbar-busy .busy-pill.is-high .pip { animation: pulse 1.05s infinite; }
.appbar-busy .busy-pill b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.appbar-busy .busy-pill.is-low .pip { background: #16a34a; }
.appbar-busy .busy-pill.is-low b { color: #16a34a; }
.appbar-busy .busy-pill.is-mid .pip { background: #f59e0b; }
.appbar-busy .busy-pill.is-mid b { color: #d97706; }
.appbar-busy .busy-pill.is-high .pip { background: var(--brand); }
.appbar-busy .busy-pill.is-high b { color: var(--brand); }
/* 休息中/已打烊：整颗药丸换成灰色，制作进度不再显示（他 2026-10-22 图1） */
.appbar-busy .busy-pill.is-shut { color: #6f6b6b; background: rgba(255, 255, 255, .8); }
.appbar-busy .busy-pill .pip.is-shut { background: #9a8f90; animation: none; }
/* 忙不过来暂停线上点单：在进度药丸前面挂一个红字小签 */
.appbar-busy .busy-tag { flex: 0 0 auto; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .22); border-radius: 4px; padding: 1px 5px; }

/* ---------- 支付方式（结算页那一行 + 抽屉里的选择列表） ---------- */
.cashier { padding: 4px 16px 0; }
/* 整行可点：左边标题、右边「图标 + 名称 + 箭头」，参考图那种一条白卡里的排法 */
.pay-line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 4px 0; font-size: 15px; font-weight: 700; color: var(--ink); text-align: left;
}
.pay-line__v { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #6b5a5e; }
.pay-line .caret { width: 15px; height: 15px; flex: 0 0 auto; opacity: .55; }
.pay-opt {
  display: flex; align-items: center; gap: 11px; padding: 14px 12px; border-radius: 12px;
  background: #f7f9fc; margin-bottom: 9px; border: 1.5px solid transparent; width: 100%; text-align: left;
}
.pay-opt.is-on { border-color: var(--accent); background: #fff1f3; }
.pay-opt__ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.pay-opt__ico svg { width: 18px; height: 18px; }
.pay-opt__name { font-size: 14.5px; font-weight: 700; flex: 1; }
.pay-opt__desc { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.pay-opt__radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #d4c5c3; flex: 0 0 auto; position: relative; }
.pay-opt.is-on .pay-opt__radio { border-color: var(--accent); background: var(--accent); }
.pay-opt.is-on .pay-opt__radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.cashier__note { font-size: 11px; color: #ab9a9c; text-align: center; padding: 8px 0 4px; line-height: 1.6; }
.paying { text-align: center; padding: 26px 0 8px; }
.paying .spin { border-top-color: var(--accent); }
.paying p { font-size: 13px; color: var(--muted); margin: 0; }

/* ---------- 我的（与原生 App 的 Profile.kt 同一套：浅底大标题 + 白会员卡 + 一叠入口行 + 底部促销图） ---------- */
#screen-profile { padding-bottom: 20px; }
.me-title { padding: 18px 18px 14px; font-size: 20px; font-weight: 800; color: var(--ink); }
.me-card { margin: 0 14px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.me-card + .me-card { margin-top: 12px; }
.me-member { padding: 16px 14px 14px; }
.me-member__row { display: flex; align-items: center; gap: 12px; }
.me-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.me-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-name { font-size: 17px; font-weight: 800; color: var(--ink); }
.me-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.me-member__line { height: 1px; background: var(--line); margin: 14px 0 12px; }
.me-stats { display: flex; align-items: center; }
.me-stats div { flex: 1; text-align: center; }
.me-stats i { width: 1px; height: 26px; background: var(--line); flex: 0 0 auto; }
.me-stats b { display: block; font-size: 19px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.me-stats span { font-size: 11px; color: var(--muted); }
/* 四格把字收小一点，360 宽也不挤（余额 / 积分 / 消费笔数 / 累计消费） */
.me-stats--four b { font-size: 17px; }
.me-stats--four span { font-size: 10.5px; }
/* 昵称后面挂一枚会员等级（爨火同步过来的 rank_text），没有就不画 */
.me-name i {
  margin-left: 7px; padding: 2px 7px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 10.5px; font-weight: 700; font-style: normal; vertical-align: 2px;
}
.me-who { min-width: 0; }
.me-who .me-sub { margin-top: 3px; }
.me-row { display: flex; align-items: center; gap: 11px; padding: 15px 14px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; }
.me-row:last-child { border-bottom: 0; }
a.me-row { text-decoration: none; color: inherit; }
/* 参考图那种「只有一枚线框图标 + 标题 + 右侧值 + ›」的行，图标不再套粉色方块 */
.me-row__ico { width: 20px; height: 20px; color: #3d2e31; display: grid; place-items: center; flex: 0 0 auto; }
.me-row__ico svg { width: 20px; height: 20px; }
.me-row__t { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.me-row__v { font-size: 12.5px; color: var(--muted); text-align: right; max-width: 184px; }
.me-row__go { color: #cfc0be; font-size: 16px; padding-left: 3px; }
/* ---------- 设置（他 2026-10-21 图2）----------
   协议入口一张卡，退出登录钉在整屏最底下。靠 flex + margin-top:auto 顶下去，
   `.screen` 的 min-height:100% 保证页面不满一屏时按钮也在底部。 */
.screen#screen-settings { display: flex; flex-direction: column; }
.screen#screen-settings[hidden] { display: none; }
#settingsBody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.set-body { flex: 1; display: flex; flex-direction: column; padding-top: 4px; }
.set-logout {
  margin: auto 14px calc(26px + var(--safe-bottom)); height: 46px; border-radius: 23px;
  background: #f2eeee; color: var(--ink); font-size: 15px; font-weight: 700;
  transition: transform .12s ease, background .12s ease;
}
.set-logout:active { transform: scale(.99); background: #eae4e5; }
.me-promo { display: block; margin: 14px 14px 0; padding: 0; width: calc(100% - 28px); background: #f6f2ec; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.me-promo img { display: block; width: 100%; }
.ticket-card__paid { margin-top: 10px; font-size: 12.5px; opacity: .85; }

/* ---------- 登录门（首次进 App 必须登录，他 2026-10-21 图2）----------
   没有短信验证码：手机号 + 用户ID 两样都要对上会员表。整屏盖在 tabbar / 购物车条之上，
   登录完再露出下面的点单界面。 */
.login {
  position: absolute; inset: 0; z-index: 80;
  display: flex; flex-direction: column;
  padding: calc(54px + env(safe-area-inset-top, 0px)) 26px calc(22px + var(--safe-bottom));
  background: #fff;
  /* 两个输入框以后，小屏手机 + 浏览器工具栏一挤就放不下：整屏可以滚，别把下面的说明裁掉 */
  overflow-y: auto; overscroll-behavior: contain;
}
.login[hidden] { display: none; }
.login__logo {
  width: 66px; height: 66px; border-radius: 20px; overflow: hidden;
  box-shadow: 0 10px 24px rgba(120, 20, 30, .18);
}
.login__logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.login__title { margin: 24px 0 0; font-size: 25px; font-weight: 800; letter-spacing: .2px; color: var(--ink); }
.login__sub { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.login__form { margin-top: 30px; }
.login__field {
  display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px;
  border: 1.5px solid transparent; border-radius: 14px; background: #f7f4f4;
  transition: border-color .16s, background .16s;
}
.login__field:focus-within { border-color: var(--brand); background: #fff; }
.login__field--second { margin-top: 10px; }
.login__field__label { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--ink); }
.login__field input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font-size: 16px; font-weight: 700; letter-spacing: .5px; color: var(--ink);
}
.login__field input::placeholder { font-size: 14px; font-weight: 400; letter-spacing: 0; color: #bfb0b3; }
.login__err { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--brand); }
.login__err[hidden] { display: none; }
.login__agree {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 17px;
  font-size: 12px; line-height: 1.5; color: var(--muted);
}
.login__agree input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.login__box {
  width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  border: 1.5px solid #d8cacc; border-radius: 50%;
  transition: background .15s, border-color .15s;
}
.login__box svg { width: 11px; height: 11px; opacity: 0; stroke-width: 3.2; }
.login__agree input:checked + .login__box { background: var(--brand); border-color: var(--brand); }
.login__agree input:checked + .login__box svg { opacity: 1; }
.login__agree input:focus-visible + .login__box { box-shadow: 0 0 0 3px var(--brand-soft); }
.login__terms a { color: var(--brand); text-decoration: none; }
.login__go {
  width: 100%; height: 50px; margin-top: 26px; border-radius: 25px;
  display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 16px; font-weight: 800;
  box-shadow: 0 10px 22px rgba(207, 13, 30, .22);
  transition: transform .08s, opacity .16s, background .16s;
}
.login__go:active:not([disabled]) { transform: scale(.985); }
.login__go[disabled] { background: #e7dcde; box-shadow: none; cursor: default; }
.login__go .spin { width: 17px; height: 17px; border-width: 2px; border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.login__help {
  margin-top: auto; padding: 14px 16px; border-radius: 14px;
  background: #fbf7f5; border: 1px solid #f2e9e6;
  font-size: 12px; line-height: 1.7; color: #8c7b7d;
}
.login__help b { display: block; margin-bottom: 3px; font-size: 12.5px; color: #5c4c4f; }

/* 登录页的协议抽屉：正文服务端下发，这里只管排版 */
.agree { padding: 4px 18px 18px; }
.agree__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 8px; }
.agree__head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.agree__body { max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.agree__body p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.75; color: #5f5254; }
.agree__at { margin-top: 14px !important; color: #a8989a !important; font-size: 11.5px !important; }

/* ============ 标签创作（客户手绘杯贴）============ */
/* 顶部那块：中间一幅自画的小插画，左右一句「标签」一句「随杯送达」。
   喜茶那张是它自己的手绘素材，我们只借版式不借图（同「参考图只借结构」那条口径） */
.sk-hero { position: relative; padding: 18px 0 22px; text-align: center; background: #f6f2ec; }
.sk-hero__art { width: 200px; height: 96px; display: block; margin: 0 auto; }
.sk-hero__l, .sk-hero__r { position: absolute; top: 52px; font-size: 17px; font-weight: 800; letter-spacing: 2px; color: var(--ink); }
.sk-hero__l { left: 22px; }
.sk-hero__r { right: 18px; }

.sk-tabs { display: flex; gap: 26px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #fff; }
.sk-tab { position: relative; border: 0; background: none; padding: 13px 0 12px; font-size: 14.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.sk-tab.is-on { color: var(--ink); font-weight: 800; }
.sk-tab.is-on::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 26px; height: 3px; border-radius: 2px; background: var(--brand); }

.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; padding: 16px 18px 0; }
.sk-card { position: relative; aspect-ratio: 2/3; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.sk-card__img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.sk-card__img--none { background: repeating-linear-gradient(45deg, #faf7f4, #faf7f4 8px, #f4efe9 8px, #f4efe9 16px); }
.sk-card__badge { position: absolute; left: 0; top: 0; z-index: 2; padding: 3px 7px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(28, 28, 28, .62); border-radius: 9px 0 9px 0; }
.sk-card__badge--no { background: rgba(200, 40, 60, .82); }
.sk-card__badge--def { background: var(--brand); }
.sk-card__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 5px 7px; font-size: 10.5px; color: var(--muted); background: rgba(255, 255, 255, .9); border-top: 1px solid #f1eae4; }
.sk-card__ok { color: var(--brand); font-style: normal; font-weight: 800; }
.sk-card__more { font-weight: 700; color: var(--ink); }
.sk-card--new { justify-content: center; align-items: center; gap: 6px; background: #f4f1ee; border-style: dashed; }
.sk-card__plus { font-size: 30px; font-weight: 300; color: #9c8f8d; line-height: 1; }
.sk-card__tip { font-size: 12px; color: #8b7c79; }
.sk-note { margin: 16px 18px 26px; padding: 11px 12px; font-size: 11.5px; line-height: 1.75; color: var(--muted); background: #faf6f2; border-radius: 9px; }
/* 「默认打印」说明（2026-10-22 他：小程序还没上这功能，先在 App 里选一张） */
.sk-deftip { margin: 16px 18px 0; padding: 12px; background: #fff6f3; border: 1px solid #f4dcd2; border-radius: 10px; }
.sk-deftip b { display: block; font-size: 12.5px; color: var(--brand); }
.sk-deftip p { margin: 5px 0 0; font-size: 11.5px; line-height: 1.75; color: var(--muted); }
/* 列表右上角那颗「N 个喜贴创作生成中 ›」 */
.sk-prog { display: flex; align-items: center; gap: 6px; margin: 12px 18px 0 auto; padding: 7px 12px; border: 1px solid #f3d6d9; border-radius: 999px; background: #fff3f4; font-size: 12px; font-weight: 700; color: var(--brand); }
.sk-prog i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: sk-pulse 1.4s ease-in-out infinite; }
.sk-prog span { font-size: 13px; line-height: 1; }
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* 两张列表抽屉共用的标题栏 */
.sk-sheet-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-bottom: 10px; padding: 0 14px; }
.sk-sheet-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.sk-sheet-head button { position: absolute; top: 50%; transform: translateY(-50%); border: 0; padding: 0; background: none; }
.sk-sheet-head__fold { left: 0; display: grid; place-items: center; width: 30px; height: 30px; color: #6f605d; }
.sk-sheet-head__fold svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sk-sheet-head__x {
  right: 0; width: 30px; height: 30px; border-radius: 50%;
  background: #fff0f1; color: #d33a4c; font-size: 20px; line-height: 1; font-weight: 500;
}

/* 审核进度 */
.sk-prog-list { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding-bottom: 4px; }
.sk-prog-card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: #faf7f4; }
.sk-prog-card__pic { flex: 0 0 auto; width: 58px; aspect-ratio: 2/3; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.sk-prog-card__pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sk-prog-card__body { flex: 1 1 auto; min-width: 0; }
.sk-prog-card__state { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--brand); }
.sk-prog-card__state i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: sk-pulse 1.4s ease-in-out infinite; }
.sk-prog-card__body p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.sk-prog-card__body span { display: block; margin-top: 6px; font-size: 11px; color: #a2938f; }

/* 已通过：「我的创作」左右画廊，中间那张低一点（图9） */
/* 卡片宽度先按抽屉宽取 70%，再被「抽屉剩余高度 / 1.5」封顶 —— 2:3 的卡片只看宽度的话，
   在矮屏上会把下面那排按钮顶出抽屉（顶出去的部分直接被裁掉，看不到也点不到）。
   左右留白用 flex 占位块做 —— 用 padding 的话百分比 flex-basis 会按内容盒算，卡片会缩成 36% */
.sk-works__rail { --card-w: min(70%, max(96px, calc((var(--sheet-h) - 170px) * 0.6667))); display: flex; align-items: center; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; position: relative; padding: 8px 0 14px; scrollbar-width: none; }
.sk-works__rail::-webkit-scrollbar { display: none; }
.sk-works__rail::before, .sk-works__rail::after { content: ''; flex: 0 0 max(0px, calc((100% - var(--card-w)) / 2 - 12px)); }
/* 中间那张最大、两边缩到 84%（他 2026-10-21 图3：像卡片一样左右滑，旁边的比中间小一圈）。
   只做 scale、不改布局尺寸，滑动时整条 rail 的高度不跳 */
.sk-work-card { position: relative; flex: 0 0 var(--card-w, 70%); aspect-ratio: 2/3; scroll-snap-align: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; transform: scale(.84); opacity: .62; transition: transform .22s ease, opacity .22s ease; }
.sk-work-card.is-active { transform: scale(1); opacity: 1; box-shadow: 0 10px 26px rgba(70, 10, 14, .12); }
.sk-work-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sk-work-card__none { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #faf7f4, #faf7f4 8px, #f4efe9 8px, #f4efe9 16px); }
/* 下单选贴和「我的创作」用同一条画廊，只是卡片略小、给底下两排按钮留位置（多让 110px） */
.sk-pick__rail { --card-w: min(64%, max(96px, calc((var(--sheet-h) - 280px) * 0.6667))); padding: 8px 0 10px; }
.sk-works__tip { margin: 0 0 12px; text-align: center; font-size: 11.5px; color: var(--muted); }
.sk-works__foot { display: flex; gap: 10px; padding: 0 16px; }
.sk-works__foot button { height: 46px; border-radius: 999px; font-size: 14.5px; font-weight: 700; min-width: 0; }
.sk-works__del { flex: 0 0 23%; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.sk-works__def { flex: 1 1 0; border: 1px solid #f2ccd2; background: #fff5f6; color: var(--brand); }
.sk-works__def.is-on { border-color: var(--brand); background: var(--brand); color: #fff; }
.sk-works__go { flex: 1 1 0; border: 0; background: var(--brand); color: #fff; }

/* 画布那一屏：整屏竖排「提示 / 画布 / 撤销条 / 底栏」，画布吃剩下的高度。
   以前画布按宽度撑 2:3，手机上比可视区还高，撤销条和底栏被顶到屏幕外（他 2026-10-20 图8 那个箭头） */
#screen-sticker-edit:not([hidden]) { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
#screen-sticker-edit > #stickerEditBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sk-tip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; font-size: 11.5px; color: #8b7c79; background: #f6f2ec; }
.sk-tip button { border: 0; background: none; font-size: 11.5px; color: #6f605d; white-space: nowrap; }
.sk-locked { margin: 12px 16px 0; padding: 10px 12px; font-size: 12px; line-height: 1.7; color: var(--brand); background: #fff3f4; border-radius: 9px; }
.sk-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 22px 6px; }
/* 画布在舞台里居中：贴顶显得太靠上（他 2026-10-21 图6「下来一点点」），
   但也不能把多出来的高度全压在提示条下面 */
/* 画布往下让 10px（和 app.js 里 SK_DOWN 一致），别贴着提示条 */
.sk-work { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; }
.sk-frame { position: relative; flex: 0 0 auto; }
.sk-canvas { display: block; width: 100%; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 6px; touch-action: none; cursor: crosshair; }
.sk-canvas.is-eraser { cursor: cell; }

/* 撤销/重做：落在画布正下方、左对齐的胶囊（照喜茶图4，不压画布也不占底栏） */
.sk-hist { flex: 0 0 auto; align-self: flex-start; display: flex; align-items: center; gap: 2px; margin-top: 7px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.sk-hist i { width: 1px; height: 14px; background: var(--line); }
.sk-hist button { border: 0; background: none; padding: 5px 4px; }
.sk-hist svg { width: 17px; height: 17px; fill: none; stroke: #6f605d; stroke-width: 1.9; stroke-linecap: round; }
.sk-hist button:disabled svg { stroke: #ddd4d1; }
.sk-hist.is-dim { opacity: .45; }

/* 选中元素浮层：拖本体移位；左上 × 丢掉；右下圆柄**又转又缩**（照喜茶图4） */
.sk-sel { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sk-sel__box { position: absolute; pointer-events: auto; touch-action: none; outline: 1px solid #e4e0dd; padding: 4px 6px; }
.sk-sel__text { display: block; font-weight: 700; color: #1c1c1c; line-height: 1.12; white-space: nowrap; font-family: -apple-system, "PingFang SC", sans-serif; }
.sk-sel__box > svg { display: block; width: 100%; height: 100%; color: #1c1c1c; }
.sk-sel__del, .sk-sel__grip {
  position: absolute; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: #fff; border: 1px solid #eee; box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  display: grid; place-items: center; touch-action: none;
}
.sk-sel__del { left: -20px; top: -20px; font-size: 24px; line-height: 1; font-weight: 300; color: #d33a4c; }
.sk-sel__grip { right: -20px; bottom: -20px; color: #4b4442; }
.sk-sel__grip svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 底栏：工具在左，提交审核在右（照喜茶图2「按钮再靠右一点」）。
   **它永远钉在最下面**：抽屉从上面长出来，点开/收起都不带动这条（他 2026-10-21 图7） */
.sk-bar { display: flex; align-items: center; gap: 4px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.sk-bar__locked { margin: 0 auto; font-size: 13px; color: var(--muted); }
.sk-tool { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 3px 10px; font-size: 11px; color: #6f605d; }
.sk-tool svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sk-tool.is-on { color: var(--brand); font-weight: 800; }
.sk-submit { flex: 0 0 auto; margin-left: auto; min-width: 132px; height: 42px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-size: 14.5px; font-weight: 800; }
.sk-submit:disabled { background: #d8cfcc; }

/* 文字 / 贴纸 / 画笔的底抽屉：左上「收起 ∨」、居中标题（照喜茶图4/6）。
   他 2026-10-21：「从系统底部弹出来，遮挡原来的工具条」—— 抽屉浮在 #skBottom 上，
   不参与排版，所以画布尺寸一动不动（以前插在工具条上面，一开面板画布就缩一次）。 */
#skBottom { position: relative; z-index: 2; flex: 0 0 auto; }
.sk-drawer-slot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: block; }
.sk-drawer { border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; background: #fff; padding: 7px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(70, 10, 14, .1); animation: sk-drawer-up .24s cubic-bezier(.22, .9, .3, 1) both; }
.sk-drawer.is-out { animation: sk-drawer-down .17s ease-in both; }
@keyframes sk-drawer-up { from { transform: translateY(100%); opacity: .4; } }
@keyframes sk-drawer-down { to { transform: translateY(100%); opacity: .3; } }
.sk-drawer.no-anim { animation: none; }
/* 标题行：收起 ∨ ｜ 标题 ｜ 胶囊 ｜ 打勾 ✓（都在同一行，他 2026-10-21 图5） */
.sk-drawer__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; }
.sk-drawer__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 62%; }
.sk-drawer__close { display: flex; align-items: center; gap: 1px; border: 0; background: none; padding: 0; font-size: 13px; color: #8b7c79; }
.sk-drawer__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk-drawer__title { font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
/* 白底红勾在白抽屉上几乎看不见（他 2026-10-21），改成实心品牌红 + 白勾 */
.sk-drawer__done {
  flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--brand); display: grid; place-items: center; color: #fff;
  box-shadow: 0 2px 6px rgba(207, 13, 30, .24);
}
.sk-drawer__done svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sk-drawer__body { padding-top: 2px; }
.sk-seg { display: flex; width: max-content; margin: 0; border-radius: 999px; background: #f3ecea; padding: 2px; }
.sk-seg__b { border: 0; background: none; padding: 5px 11px; border-radius: 999px; font-size: 12px; color: #6f605d; }
.sk-seg__b.is-on { background: #fff; color: var(--brand); font-weight: 800; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
/* 笔粗改滑杆（他 2026-10-21 图2/图3/图4）：一条轨道从最细滑到最粗，左边字母由白变黑就是当前粗细 */
.sk-size-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px 8px; }
.sk-size-row label { flex: 0 0 auto; font-size: 14px; color: var(--ink); }
.sk-range { -webkit-appearance: none; appearance: none; flex: 1 1 auto; height: 26px; background: none; margin: 0; }
.sk-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, #1c1c1c 0 var(--p, 33%), #ece7e5 var(--p, 33%) 100%);
}
/* 拇指原来也是白的、压在浅灰轨道上看不见（他 2026-10-21 圈的就是这颗），改品牌红 */
.sk-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px;
  border-radius: 50%; background: var(--brand); border: 0; box-shadow: 0 2px 6px rgba(207, 13, 30, .28);
}
.sk-range::-moz-range-track { height: 4px; border-radius: 999px; background: #ece7e5; }
.sk-range::-moz-range-progress { height: 4px; border-radius: 999px; background: #1c1c1c; }
.sk-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); border: 0; box-shadow: 0 2px 6px rgba(207, 13, 30, .28); }
.sk-custom { display: flex; gap: 8px; align-items: center; padding: 4px 2px 2px; }
.sk-input { flex: 1 1 auto; min-width: 0; height: 40px; border: 0; border-radius: 999px; padding: 0 14px; font-size: 13.5px; background: #f5f2ef; }
.sk-custom__add { flex: 0 0 auto; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 2px 4px; }
.sk-chip { flex: 0 0 auto; border: 0; background: #f5f2ef; border-radius: 999px; padding: 9px 14px; font-size: 13px; color: #55494a; white-space: nowrap; }
.sk-chip:active { color: var(--brand); }
.sk-stamps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 8px 2px 4px; }
.sk-stamp { width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; background: #f8f6f3; padding: 8px; color: #2b2b2b; }
.sk-stamp svg { width: 100%; height: 100%; }
.sk-stamp:active { border-color: var(--brand); color: var(--brand); }

/* 提交确认 / 创作规则 两张抽屉 */
.sk-confirm { padding: 4px 2px 6px; }
.sk-confirm h3, .sk-rules h3 { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.sk-confirm p { margin: 0 0 8px; font-size: 13px; line-height: 1.8; color: #55494a; }
.sk-confirm__warn { color: #a2938f !important; font-size: 12px !important; }
.sk-confirm__row { display: flex; gap: 10px; margin-top: 16px; }
.sk-confirm__row button { flex: 1; height: 44px; border-radius: 10px; font-size: 14.5px; font-weight: 700; border: 1px solid var(--line); background: #fff; }
.sk-confirm__row .is-go { border-color: var(--brand); background: var(--brand); color: #fff; }
/* 须知条文很长：正文自己滚，同意按钮钉在抽屉底部（跟着滚走就点不到了） */
.sk-rules { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 16px calc(14px + var(--safe-bottom)); }
.sk-rules__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 0 4px; }
.sk-rules h3 { margin: 0 0 6px; }
.sk-rules h4 { margin: 14px 0 0; font-size: 13px; font-weight: 800; color: var(--ink); }
.sk-rules p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.75; color: #55494a; }
.sk-rules b { color: var(--ink); }
.sk-rules__hi, .sk-rules__bye { color: var(--ink); font-weight: 700; }
.sk-rules__bye { margin-top: 14px; }
/* 「同意」要先滑到底才亮：没读完时是灰的，滚到末尾才变品牌红 */
.sk-rules__ok { flex: 0 0 auto; width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: 10px; background: #d8d3d3; color: #fff; font-size: 14px; font-weight: 700; transition: background .18s; }
.sk-rules__ok.is-ready { background: var(--brand); }

/* 结算页那一行 */
.ck-sticker { width: 100%; display: flex; align-items: center; gap: 8px; margin: 10px 0; padding: 12px 14px; border: 0; border-radius: 12px; background: #fff; text-align: left; }
.ck-sticker__pen { width: 16px; height: 16px; fill: none; stroke: var(--brand); stroke-width: 1.9; stroke-linecap: round; flex: 0 0 auto; }
.ck-sticker__t { flex: 1 1 auto; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ck-sticker__thumb { width: 26px; height: 39px; border-radius: 4px; border: 1px solid var(--line); background: #fff; object-fit: contain; flex: 0 0 auto; }
.ck-sticker__go { font-size: 12.5px; color: var(--muted); }

/* 订单详情「标签定制」那一行 */
.tk-sticker { width: 100%; display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 13px 14px; border: 0; border-radius: 12px; background: #fff; text-align: left; }
.tk-sticker__pen { width: 16px; height: 16px; fill: none; stroke: var(--brand); stroke-width: 1.9; stroke-linecap: round; flex: 0 0 auto; }
.tk-sticker__t { font-size: 14px; font-weight: 800; color: var(--ink); }
.tk-sticker__sub { flex: 1 1 auto; font-size: 12.5px; color: var(--muted); }
.tk-sticker__go { font-size: 15px; color: #c3b7b4; }

/* 下单选贴「我的创作」抽屉：和作品画廊同一套（左右滑的卡片），右上角红底 × 代替「关闭」两个字 */
.sk-choose { padding: 0 0 6px; }
.sk-pick-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 0 18px; border-bottom: 1px solid var(--line); }
.sk-pick-head .sk-tabs { flex: 1 1 auto; padding: 0; border: 0; gap: 24px; }
.sk-pick-head .sk-sheet-head__x { flex: 0 0 auto; width: 32px; height: 32px; font-size: 22px; margin-bottom: 8px; }
.sk-choose__foot { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; padding: 0 16px; }
.sk-choose__new { height: 46px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 700; }
.sk-choose__none { height: 40px; border: 0; background: none; font-size: 13px; color: var(--muted); }
/* 选中的那张：「已选用」变灰底（和原生同一观感） */
.sk-works__go.is-on { background: #ede3e1; color: #8a7b78; }

/* 订单详情看杯贴：左上收起、中间标题、右上红色「关闭」；图按剩下的高度等比缩，整张都露出来
   （他 2026-10-21 图6：以前没有收起、图被抽屉裁掉一截） */
.sk-view { display: flex; flex-direction: column; min-height: 0; padding: 4px 0 6px; text-align: center; }
.sk-view__head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-bottom: 10px; padding: 0 16px; }
.sk-view__head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.sk-view__head button { border: 0; background: none; padding: 0; }
.sk-view__fold { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 1px; font-size: 13px; color: #6f605d; }
.sk-view__fold svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sk-view__close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: var(--brand); }
.sk-view__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px calc(8px + env(safe-area-inset-bottom)); }
.sk-view__pic { display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: 12px; background: #fbf6f5; }
.sk-view__img { display: block; width: auto; height: min(46vh, 330px); max-width: 100%; aspect-ratio: 2/3; object-fit: contain; border-radius: 4px; background: #fff; }
.sk-view__tip { margin: 12px 0 4px; font-size: 12px; line-height: 1.7; color: var(--muted); }

/* 门店紧急关店 / 隐藏 / 繁忙：购物车条的位置换一条灰底提示。商品照常看、规格照常开，
   只把加号与规格抽屉里的购买按钮压成灰黑（他 2026-10-22：不要把整块商品灰掉） */
.closed-bar {
  position: absolute; left: 0; right: 0; bottom: var(--tab-h, 60px); z-index: 12;
  margin: 0 12px 8px; height: 54px; border-radius: 30px;
  display: grid; place-items: center;
  background: #6f6b6b; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 1px;
}
.closed-bar[hidden] { display: none; }
#screen-menu.is-order-closed .add-btn,
#screen-search.is-order-closed .add-btn { background: #6f6b6b; }
#sheet.is-shut .spec-btn,
#sheet.is-shut .spec-btn.is-ghost,
#sheet.is-shut .spec-btn.is-solid { background: #6f6b6b; border-color: #6f6b6b; color: #fff; }