/* ============================================================================
   小猫咪私厨 · 全局样式表
   ----------------------------------------------------------------------------
   设计语言：Apple Liquid Glass（毛玻璃 / 通透 / 悬浮） + Hello Kitty 粉白
   骨架：
     1. 设计令牌（颜色 / 阴影 / 弹簧曲线）
     2. 基础重置 & 背景光斑
     3. 玻璃材质 & 通用按钮
     4. 顾客端：顶栏 / 菜单 / 菜品卡
     5. 顾客端：底部导航 / 购物车条
     6. 抽屉 & 弹窗 & Toast
     7. 顾客端：盲盒 / 幸运转盘
     8. 顾客端：订单列表
     9. 老板端（登录 / 订单看板 / 菜单管理 / 设置）
    10. 关键帧动画
    11. 响应式 & 兼容降级
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌
   ========================================================================== */
:root {
  /* —— 粉白主色 —— */
  --pink-50: #fff7fa;
  --pink-100: #ffe9f1;
  --pink-200: #ffd6e5;
  --pink-300: #ffb8d2;
  --pink-400: #ff90b5;
  --pink-500: #ff5f92;
  --pink-600: #e8417a;
  --mint: #b8f0e4;
  --butter: #ffe9a8;

  /* —— 文字（暖灰紫，比纯黑柔和） —— */
  --ink: #3d2a33;
  --ink-2: #6f5761;
  --ink-3: #a5919a;

  /* —— 玻璃材质（核心） —— */
  --glass: rgba(255, 255, 255, 0.46);
  --glass-2: rgba(255, 255, 255, 0.66);
  --glass-3: rgba(255, 255, 255, 0.86);
  --stroke: rgba(255, 255, 255, 0.85);
  --stroke-soft: rgba(255, 255, 255, 0.55);

  /* —— 阴影（多层叠加才有悬浮感） —— */
  --shadow-sm: 0 2px 10px rgba(198, 108, 146, 0.10);
  --shadow-md: 0 12px 28px -14px rgba(198, 108, 146, 0.45), 0 2px 8px rgba(198, 108, 146, 0.08);
  --shadow-lg: 0 28px 64px -26px rgba(190, 90, 132, 0.55), 0 8px 22px rgba(190, 90, 132, 0.12);
  --shadow-pink: 0 16px 32px -14px rgba(255, 95, 146, 0.72);
  /* 玻璃内部高光：让边缘像真的玻璃一样反光 */
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35);

  /* —— 弹簧曲线（全站动画灵魂，禁止 linear/ease） —— */
  --spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);   /* 强回弹：按钮、弹窗、卡片 */
  --spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 柔和回弹：列表入场 */
  --smooth-out: cubic-bezier(0.16, 1, 0.3, 1);        /* 顺滑减速：抽屉、遮罩 */
  --snap: cubic-bezier(0.2, 0.9, 0.2, 1.02);          /* 细微吸附感 */

  /* —— 圆角 —— */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 26px;
  --r-xl: 32px;

  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   2. 基础重置 & 背景
   ========================================================================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { width: 100%; max-width: 100%; overflow-x: hidden; }
html, body { margin: 0; padding: 0; }

/* 任何情况下都不允许出现横向滚动：WebGL canvas 比元素略大，容易撑破视口 */
body { width: 100%; max-width: 100%; overscroll-behavior-x: none; }

/* 粉色渐变同时铺在 html（画布层）和 body 上：
   html 负责盖住 iOS 橡皮筋回弹、PWA 启动瞬间等「视口外」区域，
   保证状态栏 / 手势条后面永远是粉色，永远不露白 */
html {
  background:
    radial-gradient(1100px 620px at 8% -12%, #ffe3f0 0%, rgba(255, 227, 240, 0) 62%),
    radial-gradient(900px 700px at 102% -4%, #e6f6ff 0%, rgba(230, 246, 255, 0) 58%),
    radial-gradient(900px 620px at 46% 112%, #fff5d8 0%, rgba(255, 245, 216, 0) 62%),
    linear-gradient(180deg, #fffafc 0%, #fdf2f7 48%, #fff 100%);
  /* 实色兜底必须写在 background 简写之后（简写会重置 color 为 transparent）：
     渐变盖不到/未加载的视口外区域（安卓手势条、iOS 回弹）露的是这块粉底 */
  background-color: #fff7fa;
  background-attachment: fixed;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background:
    radial-gradient(1100px 620px at 8% -12%, #ffe3f0 0%, rgba(255, 227, 240, 0) 62%),
    radial-gradient(900px 700px at 102% -4%, #e6f6ff 0%, rgba(230, 246, 255, 0) 58%),
    radial-gradient(900px 620px at 46% 112%, #fff5d8 0%, rgba(255, 245, 216, 0) 62%),
    linear-gradient(180deg, #fffafc 0%, #fdf2f7 48%, #fff 100%);
  /* 实色兜底必须写在 background 简写之后（简写会重置 color 为 transparent）：
     安卓系统手势条区域延伸下去的就是这块粉底，不露纯白 */
  background-color: #fff7fa;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 15px; color: var(--ink); }
img, svg { display: block; }
[hidden] { display: none !important; }

::selection { background: var(--pink-200); color: var(--pink-600); }

/* 滚动条（桌面端老板页更好看） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 150, 185, 0.45);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* —— 背景漂浮光斑：液体感来源，纯装饰 —— */
.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* 高饱和液态光斑：玻璃滑过时靠它们的明暗交替把折射「照」出来 */
.bg-blobs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(84px);
  opacity: 0.66;
  will-change: transform;
}
.bg-blobs span:nth-child(1) {
  width: 460px; height: 460px; left: -140px; top: 2%;
  background: radial-gradient(circle, #ff2f7d 0%, rgba(255, 47, 125, 0) 68%);
  animation: floatBlob 26s var(--snap) infinite alternate;
}
.bg-blobs span:nth-child(2) {
  width: 380px; height: 380px; right: -120px; top: 20%;
  background: radial-gradient(circle, #ff9a2e 0%, rgba(255, 154, 46, 0) 68%);
  animation: floatBlob 32s var(--snap) infinite alternate-reverse;
}
.bg-blobs span:nth-child(3) {
  width: 430px; height: 430px; left: 24%; bottom: -140px;
  background: radial-gradient(circle, #2f7bff 0%, rgba(47, 123, 255, 0) 68%);
  animation: floatBlob 38s var(--snap) infinite alternate;
}
.bg-blobs span:nth-child(4) {
  width: 300px; height: 300px; right: 16%; bottom: 4%;
  background: radial-gradient(circle, #a25bff 0%, rgba(162, 91, 255, 0) 70%);
  animation: floatBlob 30s var(--snap) infinite alternate-reverse;
}

/* ==========================================================================
   3. 玻璃材质 & 通用组件
   ========================================================================== */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--stroke);
  box-shadow: var(--inset-hi), var(--shadow-md);
}

/* 玻璃的「液面高光」：一条斜向的柔光带 */
.glass-shine { position: relative; overflow: hidden; }
.glass-shine::after {
  content: "";
  position: absolute;
  top: -60%; left: -30%;
  width: 60%; height: 220%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(12deg);
  pointer-events: none;
  opacity: 0.7;
}

/* —— 主按钮：粉色渐变 + 弹簧按压 —— */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(140deg, #ff97b9 0%, var(--pink-500) 55%, var(--pink-600) 100%);
  box-shadow: var(--shadow-pink), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.45s var(--spring), box-shadow 0.3s var(--smooth-out), filter 0.3s;
  will-change: transform;
}
.btn-primary:hover { filter: brightness(1.03); }
.btn-primary:active {
  transform: scale(0.94);
  box-shadow: 0 8px 18px -10px rgba(255, 95, 146, 0.8), inset 0 2px 6px rgba(160, 40, 80, 0.15);
}
.btn-primary:disabled { opacity: 0.5; pointer-events: none; }
.btn-primary.block { width: 100%; padding: 16px 24px; font-size: 16px; }

/* —— 幽灵按钮 —— */
.btn-ghost {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pink-600);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  box-shadow: var(--inset-hi), var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.4s var(--spring), background 0.25s;
}
.btn-ghost:active { transform: scale(0.93); background: var(--pink-100); }

/* —— 圆形图标按钮 —— */
.round-btn {
  position: relative;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 17px;
  color: var(--pink-600);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  box-shadow: var(--inset-hi), var(--shadow-sm);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 0.45s var(--spring), background 0.25s;
}
.round-btn:active { transform: scale(0.88) rotate(-6deg); background: var(--pink-100); }
.round-btn.sm { width: 32px; height: 32px; font-size: 14px; }
/* 顶栏骰子上的蝴蝶结：往外挪一点，避免压住图标 */
.round-btn > .css-bow { top: -10px; right: -9px; transform: scale(0.82); }

/* —— 迷你按钮（次要操作） —— */
.mini-btn {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--stroke-soft);
  transition: transform 0.35s var(--spring), background 0.2s, color 0.2s;
}
.mini-btn:active { transform: scale(0.9); }
.mini-btn.danger { color: #e05270; }
.mini-btn.danger:hover { background: #ffe6ec; }

/* —— 纯 CSS 蝴蝶结（挂在按钮/卡片角上，非图片） —— */
.css-bow {
  position: absolute;
  top: -8px; right: -6px;
  width: 16px; height: 14px;
  pointer-events: none;
  z-index: 2;
}
.css-bow::before,
.css-bow::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 8px; height: 11px;
  background: linear-gradient(135deg, #ffb6cf 0%, var(--pink-500) 100%);
  border-radius: 70% 40% 60% 45% / 55% 60% 45% 50%;
  box-shadow: 0 2px 5px rgba(255, 95, 146, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.css-bow::before { left: 0; transform: rotate(-24deg); }
.css-bow::after  { right: 0; transform: rotate(24deg); }

/* —— 输入框 —— */
.input, textarea.input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 2px 6px rgba(198, 108, 146, 0.06);
  outline: none;
  transition: border-color 0.25s, box-shadow 0.35s var(--smooth-out), transform 0.35s var(--spring);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: var(--ink-3); }
.input:focus {
  border-color: var(--pink-300);
  box-shadow: 0 0 0 4px rgba(255, 143, 180, 0.18), inset 0 2px 6px rgba(198, 108, 146, 0.06);
  transform: translateY(-1px);
}
textarea.input { resize: none; line-height: 1.55; }

.field { display: block; }
.field > span {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-3);
}

/* —— 徽标 / 状态胶囊 —— */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--pink-100);
  color: var(--pink-600);
}
.status-chip { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.status-chip.pending  { background: #fff3cf; color: #b3771a; }
.status-chip.cooking  { background: #e2f2ff; color: #2b7fb8; }
.status-chip.done     { background: #e7f7ee; color: #2f8a5b; }
.status-chip.cancelled{ background: #f0edef; color: #9a8b92; }

/* ==========================================================================
   4. 顾客端 · 布局骨架
   ========================================================================== */
.app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(270px + env(safe-area-inset-bottom, 0px));
}

/* —— 三个区域（点餐 / 转盘摇菜 / 我的订单）：同一时刻只显示一个 —— */
.page { display: none; }
.page.is-active { display: block; animation: pageIn 0.45s var(--spring-soft) both; }

/* —— 顶栏 —— */
.topbar {
  /* 跟着页面一起滚走，不吸顶：把上方空间还给菜品 */
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  margin-bottom: 16px;
}
.avatar {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, #ffe9f3 0%, #ffd6e7 100%);
  border: 1px solid #fff;
  box-shadow: 0 6px 16px -6px rgba(200, 110, 150, 0.55), inset 0 1px 0 #fff;
  overflow: hidden;
}
.avatar .kitty-svg { width: 86%; height: 86%; }
.avatar.big { width: 84px; height: 84px; }
.titles { flex: 1 1 auto; min-width: 0; }
.titles h1 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titles p {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* —— 公告条 —— */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  margin-bottom: 14px;
  font-size: 12.5px;
  color: #a35a2e;
  background: rgba(255, 246, 220, 0.62);
  border-color: rgba(255, 226, 160, 0.85);
  box-shadow: var(--inset-hi), 0 8px 20px -14px rgba(190, 140, 60, 0.5);
  animation: popIn 0.55s var(--spring) both;
}
.notice p { flex: 1; }

/* —— 搜索框：毛玻璃胶囊，聚焦时微微上浮 —— */
.search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 8px 0 15px;
  margin: 0 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.3s var(--smooth-out), box-shadow 0.35s var(--smooth-out),
              transform 0.4s var(--spring);
}
.search:focus-within {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(255, 143, 180, 0.16), var(--shadow-md);
  transform: translateY(-1px);
}
.search-ico {
  flex: 0 0 auto;
  font-size: 14px;
  opacity: 0.7;
  transition: transform 0.45s var(--spring), opacity 0.25s;
}
.search:focus-within .search-ico { transform: scale(1.15) rotate(-6deg); opacity: 1; }
.search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.search-input::placeholder { color: var(--ink-3); }
.search-clear {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  color: var(--ink-2);
  background: rgba(240, 230, 235, 0.85);
  transition: transform 0.35s var(--spring), background 0.2s, color 0.2s;
}
.search-clear:active { transform: scale(0.86); background: var(--pink-100); color: var(--pink-600); }

/* 搜索结果顶部提示条 */
.search-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px 2px;
  font-size: 12px;
  color: var(--ink-2);
}
.search-meta b { color: var(--pink-600); font-size: 13px; }
.search-meta .mini-btn { padding: 4px 11px; font-size: 11.5px; }

/* 搜不到时的空状态 */
.search-empty { padding: 40px 20px; }
.search-empty p { margin: 5px 0 14px; font-size: 12px; color: var(--ink-3); }

/* 搜索时不重播卡片入场动画，避免每敲一个字就闪一下 */
.dish-list.is-searching .dish { animation: none; }

/* —— 分类胶囊条：横向滑动，不挤压页面 —— */
.cats {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* 右侧留 20px：滚到尽头时最后一个标签不会贴着边 */
  padding: 4px 20px 12px 2px;
  scroll-padding-right: 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* 边缘柔化：滑到一半被裁的标签是淡出的，不会像被刀切 */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent 100%);
  transition: opacity 0.3s var(--smooth-out), filter 0.3s var(--smooth-out);
}
/* 搜索时分类不参与过滤，整体变淡作为暗示 */
.cats.is-muted { opacity: 0.45; filter: grayscale(0.25); }
/* 搜索时取消分类高亮：避免"以为是只在这个分类里搜" */
.cats.is-muted .cat.is-active {
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--stroke-soft);
  box-shadow: none;
  transform: none;
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--stroke-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.45s var(--spring), background 0.25s, color 0.25s, box-shadow 0.25s;
}
.cat:active { transform: scale(0.93); }
.cat.is-active {
  color: #fff;
  background: linear-gradient(140deg, #ff9dbd, var(--pink-500));
  border-color: transparent;
  box-shadow: var(--shadow-pink);
  transform: translateY(-1px);
}

/* —— 菜品列表 —— */
.dish-list { display: flex; flex-direction: column; gap: 12px; }

.dish {
  position: relative;
  display: flex;
  gap: 13px;
  padding: 12px;
  border-radius: var(--r-lg);
  animation: cardIn 0.6s var(--spring-soft) both;
  transition: transform 0.5s var(--spring), box-shadow 0.35s var(--smooth-out);
}
.dish:active { transform: scale(0.985); }
.dish.is-out { opacity: 0.62; }

.dish-thumb {
  position: relative;
  width: 84px; height: 84px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 38px;
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, #ffe6ef 0%, #fff7f2 55%, #ffeef6 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.9), 0 8px 18px -12px rgba(200, 110, 150, 0.65);
  overflow: hidden;
}
/* 缩略图右下角的小爪印水印 */
.dish-thumb::after {
  content: "🐾";
  position: absolute;
  right: 4px; bottom: 1px;
  font-size: 11px;
  opacity: 0.2;
}
/* 真实菜品图：铺满整个缩略图区域，cover 裁切不变形，圆角跟随容器 */
.dish-thumb-img {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #ffe6ef, #fff7f2);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  display: block;
}
/* 有图时收起爪印水印，避免压在照片上 */
.dish-thumb.has-img::after { display: none; }
/* emoji 兜底（图片加载失败时显示） */
.dish-thumb-emoji { line-height: 1; }

/* 菜品详情弹窗：优先真实图片，没图才落到 emoji */
.dd-emoji { overflow: hidden; }
.dd-emoji img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: linear-gradient(150deg, #ffe6ef, #fff7f2);
}

.dish-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dish-main h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.1px;
}
.dish-main h3 .tag {
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  color: var(--pink-600);
  background: rgba(255, 214, 229, 0.9);
}
.dish-desc {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dish-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.price {
  font-size: 17px;
  font-weight: 800;
  color: var(--pink-600);
  letter-spacing: -0.3px;
}
.price small { font-size: 11px; font-weight: 700; margin-left: 1px; }

/* —— 加入购物车按钮（带蝴蝶结） —— */
.add-btn {
  position: relative;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 19px;
  line-height: 1;
  background: linear-gradient(140deg, #ffa2c1, var(--pink-500));
  box-shadow: 0 8px 16px -8px rgba(255, 95, 146, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.5s var(--spring), box-shadow 0.3s;
}
.add-btn:active { transform: scale(0.82) rotate(8deg); }
.add-btn.is-in { animation: popBounce 0.55s var(--spring); }

/* 购物车里的数量小角标 */
.qty-badge {
  position: absolute;
  top: -5px; left: -6px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: var(--pink-600);
  background: #fff;
  border: 1.5px solid var(--pink-200);
  box-shadow: 0 2px 6px rgba(200, 110, 150, 0.25);
  animation: popIn 0.4s var(--spring);
}

.soldout-mask {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: rgba(120, 100, 110, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* —— 空状态 —— */
.empty {
  padding: 46px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.empty .empty-emoji { font-size: 44px; margin-bottom: 10px; opacity: 0.8; }
.empty b { display: block; margin-bottom: 4px; color: var(--ink-2); font-size: 14px; }

/* ==========================================================================
   5. 底部导航 & 购物车条
   ========================================================================== */
/* 桌面顶部导航：移动端隐藏，≥1200px 由响应式区接管 */
.desktop-nav { display: none; }

.bottom-nav {
  position: fixed;
  left: 0; right: 0;
  /* 三层叠加：地址栏伸缩高度(--vv-bottom) + 手势条安全区 + 最小抬升 */
  bottom: calc(var(--vv-bottom, 0px) + max(26px, calc(env(safe-area-inset-bottom, 0px) + 12px)));
  z-index: 60;
  max-width: 460px;
  margin: 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  border-radius: 26px;
  box-shadow: var(--inset-hi), 0 -6px 34px -18px rgba(190, 90, 132, 0.5), var(--shadow-md);
}

/* 纯粉色液态玻璃底座：半透明渐变 + 20px 背景模糊 + 顶部细高光 */
#nav {
  background: linear-gradient(135deg, rgba(255, 214, 231, 0.38) 0%, rgba(255, 150, 200, 0.18) 55%, rgba(255, 255, 255, 0.22) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    inset 0 18px 30px -26px rgba(255, 255, 255, 0.95),
    0 -6px 24px -14px rgba(255, 105, 180, 0.45),
    0 18px 40px -26px rgba(150, 60, 100, 0.45);
}

.nav-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  border-radius: 18px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-3);
  transition: color 0.25s, transform 0.45s var(--spring);
}
.nav-item .nav-ico {
  display: grid;
  place-items: center;
  width: 34px; height: 28px;
  font-size: 17px;
  border-radius: 12px;
  transition: transform 0.5s var(--spring), background 0.3s, box-shadow 0.3s;
}
.nav-item:active { transform: scale(0.92); }
.nav-item.is-active { color: var(--pink-600); }
.nav-item.is-active .nav-ico {
  transform: translateY(-2px) scale(1.1);
  background: linear-gradient(140deg, rgba(255, 214, 229, 0.95), rgba(255, 236, 243, 0.9));
  box-shadow: 0 6px 14px -8px rgba(255, 95, 146, 0.8), inset 0 1px 0 #fff;
}
/* 活跃项下方的小圆点 */
.nav-item.is-active::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pink-500);
  animation: popIn 0.4s var(--spring);
}

/* ==========================================================================
   底部导航的液态玻璃高亮（Liquid Glass）
   ----------------------------------------------------------------------------
   为什么不用 SVG #gooey：
     feGaussianBlur + feColorMatrix 是对「预乘 alpha」的像素做运算，
     半透明色块经过 alpha 阈值放大会把颜色压暗、发黑，和「通透玻璃」互斥。
   现在的做法：
     · 单个胶囊，有自己的 backdrop-filter，背后内容真的透上来（带模糊）
     · 白色内描边 + 顶部弧形反光 = 水晶边缘
     · 形变交给 transform：定向拉伸 + 轻微压扁 + 弹簧回弹
   只在 ≤1199px（底部导航存在的区间）启用，桌面顶部导航完全不受影响。
   ========================================================================== */

.nav-goo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;              /* 默认关闭，桌面端零开销 */
  pointer-events: none;       /* 绝不挡住按钮热区 */
}

/* 高亮块 = 一块真的半透明玻璃：
   背景只给很淡的白粉渐变，靠 backdrop-filter 让背后的内容真正透上来，
   再用白色内描边 + 顶部高光做出水晶边缘。 */
.nav-blob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 80px;
  height: 46px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(163deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 178, 212, 0.5) 46%,
    rgba(255, 126, 179, 0.42) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(190%);
  backdrop-filter: blur(18px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.78),
    inset 0 -12px 18px -14px rgba(196, 52, 110, 0.4),
    0 10px 24px -12px rgba(232, 65, 122, 0.62),
    0 2px 8px -3px rgba(150, 60, 100, 0.28);
  transform: translate3d(0, -50%, 0) scale(1, 1);
  transform-origin: 50% 50%;
  /* 弹簧曲线带回弹：甩出去拉伸，落定后收回来会轻轻弹一下 */
  transition: transform 0.5s var(--spring-soft), width 0.38s var(--smooth-out);
  will-change: transform, width;
}
/* WebGL 接管后：CSS 只保留形状，玻璃全部由 canvas 绘制 */
#navBlob[data-liquid-glass="webgl"] {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  overflow: visible;          /* 库的 canvas 比元素略大，用于采样边缘 */
}
#navBlob[data-liquid-glass="webgl"]::before { display: none; }

/* 顶部弧形反光：玻璃的「厚度」全靠这一道 */
.nav-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 78% at 50% -26%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.28) 46%,
    rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

@media (max-width: 1199.98px) {
  .nav-goo {
    display: block;
  }
  /* 已经有果冻块了，图标不再自己铺底色，避免两层高亮打架 */
  #nav .nav-item.is-active .nav-ico {
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  #nav .nav-item.is-active::after { display: none; }
  /* 按钮始终盖在色块上方，保证能点 */
  #nav .nav-item { z-index: 1; }

  /* 粉色玻璃底上的字色：未选中深紫红，选中亮白 */
  #nav .nav-item { color: #7b3552; }
  /* 玻璃背后可能是深色菜品图，深玫瑰字配一圈白色光晕才稳定可读 */
  #nav .nav-item.is-active {
    color: #a81452;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 1px 0 rgba(255, 255, 255, 0.7);
  }
}

/* —— 购物车悬浮条 —— */
.cart-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--nav-h) + var(--vv-bottom, 0px) + max(26px, calc(env(safe-area-inset-bottom, 0px) + 12px)) + 14px);
  z-index: 59;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 9px 9px 16px;
  border-radius: 999px;
  box-shadow: var(--inset-hi), 0 20px 40px -18px rgba(190, 90, 132, 0.65), var(--shadow-md);
  animation: cartUp 0.55s var(--spring) both;
}
.cart-bar.out { animation: cartDown 0.35s var(--smooth-out) both; }
.cart-info {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  font-size: 13px;
  color: var(--ink-2);
}
.cart-info b { color: var(--pink-600); font-size: 15px; }
.cart-info .basket {
  position: relative;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  font-size: 17px;
  border-radius: 50%;
  background: linear-gradient(140deg, #fff, #ffe6ef);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px -6px rgba(200, 110, 150, 0.7);
}
.cart-info .basket.bump { animation: bump 0.5s var(--spring); }
.cart-bar .btn-primary { padding: 11px 20px; font-size: 14px; }

/* ==========================================================================
   6. 抽屉 / 弹窗 / Toast
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(60, 42, 51, 0.24);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  transition: opacity 0.3s var(--smooth-out);
}
.overlay.in { opacity: 1; }
.overlay.center { align-items: center; padding: 24px; }

/* 底部抽屉 */
.sheet {
  width: 100%;
  max-width: 480px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 18px calc(18px + var(--safe-b));
  border-radius: 30px 30px 0 0;
  background: rgba(255, 255, 255, 0.8);
  border-bottom: none;
  box-shadow: 0 -20px 60px -20px rgba(150, 70, 105, 0.4);
  transform: translateY(104%);
  transition: transform 0.5s var(--spring);
}
.overlay.in .sheet { transform: translateY(0); }

.grab {
  width: 38px; height: 5px;
  margin: 0 auto 2px;
  border-radius: 99px;
  background: rgba(180, 150, 165, 0.35);
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sheet-head h2 { font-size: 17px; font-weight: 800; }

.cart-items {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px;
  margin: 0 -2px;
  max-height: 46vh;
}
.cart-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--stroke-soft);
  animation: rowIn 0.45s var(--spring-soft) both;
}
.ci-emoji {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 20px;
  border-radius: 13px;
  background: linear-gradient(150deg, #fff3f8, #ffe9f2);
}
.ci-main { flex: 1 1 auto; min-width: 0; }
.ci-top { display: flex; align-items: baseline; gap: 6px; }
.ci-top b { font-size: 14px; font-weight: 800; }
.ci-top span { font-size: 12px; color: var(--ink-3); }
.ci-note-btn {
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  background: rgba(240, 230, 235, 0.6);
  transition: transform 0.35s var(--spring), color 0.2s, background 0.2s;
}
.ci-note-btn:active { transform: scale(0.92); }
.ci-note-btn.has-note { color: var(--pink-600); background: var(--pink-100); }
.ci-note-input {
  width: 100%;
  margin-top: 5px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--pink-200);
  outline: none;
  animation: rowIn 0.4s var(--spring) both;
}

/* 数量步进器 */
.stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--stroke-soft);
  box-shadow: inset 0 1px 3px rgba(198, 108, 146, 0.06);
}
.stepper button {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  color: var(--pink-600);
  transition: transform 0.35s var(--spring), background 0.2s;
}
.stepper button:active { transform: scale(0.82); background: var(--pink-100); }
.stepper span {
  min-width: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.sheet-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  font-size: 13px;
  color: var(--ink-2);
}
.sheet-sum b { font-size: 20px; color: var(--pink-600); letter-spacing: -0.4px; }

/* 桌面侧栏专属控件：移动端保持原抽屉结构；display:contents 让移动端布局不变 */
.desktop-cart-icon,
.desktop-checkout,
.checkout-back { display: none; }
.checkout-details { display: contents; }

/* 居中弹窗：打开时「轻微放大再回弹」 */
.modal {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 20px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.84);
  text-align: center;
  transform: scale(0.82) translateY(14px);
  opacity: 0;
  transition: transform 0.55s var(--spring), opacity 0.32s var(--smooth-out);
}
.overlay.in .modal { transform: scale(1) translateY(0); opacity: 1; }
.modal h2 { font-size: 19px; font-weight: 800; letter-spacing: 0.2px; }
.modal-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.modal-kitty {
  width: 108px;
  height: 100px;
  margin: -6px auto 0;
  animation: kittyFloat 3.4s var(--snap) infinite;
}
.modal-kitty .kitty-svg { width: 100%; height: 100%; }

/* 单品备注弹窗里的菜品头 */
.dish-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.dd-emoji {
  width: 62px; height: 62px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 30px;
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 62%),
    linear-gradient(150deg, #ffe6ef 0%, #fff7f2 60%, #ffeef6 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.9), 0 10px 20px -14px rgba(200, 110, 150, 0.8);
}
.dd-main { min-width: 0; }
.dd-main h2 { font-size: 17px; font-weight: 800; text-align: left; }
.dd-main .modal-sub { margin-top: 3px; }

/* 订单小票 */
.receipt {
  padding: 14px;
  border-radius: var(--r-md);
  background: rgba(255, 249, 251, 0.9);
  border: 1px dashed rgba(255, 184, 210, 0.9);
  text-align: left;
  font-size: 12.5px;
  color: var(--ink-2);
}
.receipt .r-line { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.receipt .r-line b { color: var(--ink); }
.receipt .r-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 184, 210, 0.9);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 800;
}
.receipt .r-total b { font-size: 18px; color: var(--pink-600); }
.receipt .r-note {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 12px;
  color: #a35a2e;
  background: rgba(255, 246, 220, 0.75);
}

/* Toast */
.toast-host {
  position: fixed;
  left: 0; right: 0;
  top: calc(14px + env(safe-area-inset-top, 0px));
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 16px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 92%;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  transform: translateY(-16px) scale(0.92);
  opacity: 0;
  transition: transform 0.5s var(--spring), opacity 0.28s;
}
.toast.in { transform: translateY(0) scale(1); opacity: 1; }
.toast-dot {
  width: 7px; height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pink-500);
  box-shadow: 0 0 0 3px rgba(255, 95, 146, 0.18);
}
.toast.ok .toast-dot { background: #35b97f; box-shadow: 0 0 0 3px rgba(53, 185, 127, 0.18); }
.toast.warn .toast-dot { background: #f0a12a; box-shadow: 0 0 0 3px rgba(240, 161, 42, 0.18); }

/* —— 飞入购物车的小球 —— */
.fly-ball {
  position: fixed;
  z-index: 250;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  font-size: 12px;
  border-radius: 50%;
  background: linear-gradient(140deg, #ffa2c1, var(--pink-500));
  box-shadow: 0 6px 14px -4px rgba(255, 95, 146, 0.85);
  pointer-events: none;
}

/* ==========================================================================
   7. 盲盒 & 幸运转盘
   ========================================================================== */
.play-stack { display: flex; flex-direction: column; gap: 14px; }
.play-card {
  padding: 18px 16px;
  border-radius: var(--r-lg);
  text-align: center;
}
.play-card h2 {
  font-size: 15.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.play-card .hint { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }

/* —— 转盘结果卡片（盲盒卡片已移除，这里只保留结果条样式） —— */
.blind-result {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blind-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--stroke);
  box-shadow: var(--inset-hi), var(--shadow-sm);
  animation: revealCard 0.6s var(--spring) both;
  text-align: left;
}
.blind-item .bi-emoji {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: 14px;
  background: linear-gradient(150deg, #fff5f9, #ffe6ef);
}
.blind-item .bi-main { flex: 1 1 auto; min-width: 0; }
.blind-item .bi-main b { font-size: 14px; }
.blind-item .bi-main p { font-size: 11.5px; color: var(--ink-3); }
.blind-placeholder { font-size: 12.5px; color: var(--ink-3); }

/* —— 转盘 —— */
.wheel-card {
  max-width: 520px;
  margin: 0 auto;              /* 视觉中心：手机单列 / 桌面内容列都居中 */
  padding: 20px 16px 18px;
}
.wheel-sub {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--ink-3);
}

.wheel-wrap {
  --wheel-size: clamp(240px, 72vw, 340px);
  --wheel-r: calc(var(--wheel-size) * 0.34);
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  margin: 42px auto 12px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* 外发光：静止时缓慢呼吸，转动时变亮变快，像霓虹灯 */
.wheel-glow {
  position: absolute;
  inset: -16px;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #ff8ab5, #ffd76e, #6fe0c2, #63b3f7, #a684f0, #ff8ab5);
  filter: blur(18px);
  opacity: 0.45;
  animation: wheelGlow 3.6s var(--snap) infinite;
  pointer-events: none;
}
.wheel-wrap.is-spinning .wheel-glow {
  opacity: 0.95;
  animation-duration: 1.1s;
}

/* 外圈玻璃环 */
.wheel-wrap::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--stroke);
  box-shadow: var(--inset-hi), 0 18px 40px -22px rgba(190, 90, 132, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 转盘本体：8 等分（每份 45deg），conic-gradient 绘制，不依赖图片 */
.wheel-disc {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 58%),
    conic-gradient(
      #ffa6c9 0deg 45deg,
      #ff4d6d 45deg 90deg,
      #ffd76e 90deg 135deg,
      #ff9a5c 135deg 180deg,
      #6fe0c2 180deg 225deg,
      #63b3f7 225deg 270deg,
      #a684f0 270deg 315deg,
      #f06ba8 315deg 360deg
    );
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.92),
    0 16px 34px -16px rgba(190, 90, 132, 0.7),
    inset 0 0 26px rgba(255, 255, 255, 0.32);
  /* 旋转由 JS 设置 transform；曲线保持原来的超长减速，只是盘子更大了 */
  transition: transform 4.6s cubic-bezier(0.12, 0.86, 0.06, 1), filter 0.35s var(--smooth-out);
  will-change: transform;
}
/* 转动时的霓虹残影 */
.wheel-wrap.is-spinning .wheel-disc {
  filter: drop-shadow(0 0 16px rgba(255, 95, 146, 0.65)) saturate(1.12);
}

/* 8 条分隔线 */
.wheel-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.92) 0deg 0.7deg,
    transparent 0.7deg 45deg
  );
  pointer-events: none;
}
/* 盘面内圈高光，让颜色有厚度 */
.wheel-disc::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 56%);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.wheel-label {
  position: absolute;
  left: 50%; top: 50%;
  width: 26%;
  /* 固定高度 + 居中：让旋转原点正好落在盘心，标签才会精准压在扇区中线上 */
  height: 36px;
  margin: -18px 0 0 -13%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  line-height: 1.15;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 3px rgba(120, 30, 60, 0.5);
  pointer-events: none;
}
.wheel-label em {
  display: block;
  font-style: normal;
  font-size: 17px;
  margin-bottom: 2px;
  filter: drop-shadow(0 1px 2px rgba(120, 30, 60, 0.35));
}
/* 浅色扇区（樱花粉 / 奶黄 / 薄荷）用深色字，保证对比度 */
.wheel-label.is-light {
  color: #5a2233;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* 顶部指针：猫耳 + 爱心，立体渐变 */
.wheel-pointer {
  position: absolute;
  top: -34px;
  left: 50%;
  z-index: 6;
  width: 44px;
  height: 58px;
  margin-left: -22px;
  transform-origin: 50% 78%;
  filter: drop-shadow(0 8px 12px rgba(232, 65, 122, 0.45)) drop-shadow(0 0 10px rgba(255, 143, 180, 0.55));
  animation: pinFloat 2.6s var(--snap) infinite;
  pointer-events: none;
}
.wheel-pointer svg { display: block; width: 100%; height: 100%; }
.wheel-wrap.is-spinning .wheel-pointer { animation: pointerTick 0.22s var(--snap) infinite; }

/* 中心按钮：3D 质感 + 呼吸光环 */
.wheel-hub {
  position: absolute;
  z-index: 4;
  width: clamp(66px, 27%, 86px);
  height: clamp(66px, 27%, 86px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  background: radial-gradient(circle at 34% 26%,
    #ffffff 0%, #ffc2d8 16%, #ff6f9f 52%, #e8417a 78%, #c92e63 100%);
  box-shadow:
    0 16px 28px -10px rgba(232, 65, 122, 0.95),
    inset 0 3px 6px rgba(255, 255, 255, 0.85),
    inset 0 -8px 12px rgba(150, 30, 75, 0.35),
    0 0 0 7px rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 4px rgba(150, 30, 75, 0.5);
  transition: transform 0.4s var(--spring), box-shadow 0.3s;
}
/* 呼吸灯：一圈缓慢扩散的粉色光环 */
.wheel-hub::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 143, 180, 0.6);
  animation: hubRing 2.8s var(--snap) infinite;
  pointer-events: none;
}
.wheel-hub:active { transform: scale(0.9); }
.wheel-hub.spinning { animation: hubPulse 0.9s var(--spring) infinite; }
.wheel-hub.spinning::after { animation-duration: 1s; }

/* ==========================================================================
   8. 顾客端 · 我的订单
   ========================================================================== */
.orders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 12px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.orders-head b { color: var(--ink); font-size: 15px; font-weight: 800; }

.order-card {
  padding: 15px 16px;
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  animation: cardIn 0.55s var(--spring-soft) both;
}
.oc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.oc-head .code {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.oc-head time { font-size: 11px; color: var(--ink-3); }
/* 顾客点了「催一催」后，老板端订单号旁出现的小旗子 */
.urge-flag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  vertical-align: middle;
  color: #b3771a;
  background: linear-gradient(140deg, #fff6d8, #ffe9b3);
  box-shadow: 0 4px 10px -6px rgba(200, 150, 40, 0.8);
  animation: popIn 0.5s var(--spring) both;
}
.oc-items { margin: 10px 0 8px; font-size: 13px; color: var(--ink-2); }
.oc-items li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;          /* 备注很长时自动换行，不撑破卡片 */
  gap: 8px;
  padding: 3px 0;
}
.oc-items .n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-items .q { color: var(--ink-3); font-size: 12px; }
.oc-items .p { font-weight: 700; color: var(--ink); }
.oc-note {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  color: #a35a2e;
  background: rgba(255, 246, 220, 0.7);
}
.oc-note b { font-weight: 800; }
.oc-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 214, 229, 0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.oc-total { font-size: 12.5px; color: var(--ink-3); }
.oc-total b { font-size: 17px; color: var(--pink-600); letter-spacing: -0.3px; }

/* 订单进度三点 */
.progress { display: flex; align-items: center; gap: 5px; margin-top: 10px; }
.progress i {
  flex: 1 1 0;
  height: 4px;
  border-radius: 99px;
  background: rgba(230, 215, 222, 0.85);
  transition: background 0.4s var(--smooth-out);
}
.progress i.on { background: linear-gradient(90deg, #ffb0cb, var(--pink-500)); }
.progress i.done { background: #7fd6a8; }

/* ==========================================================================
   9. 老板端
   ========================================================================== */
/* —— 登录 —— */
.login-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  /* safe-area-inset-top：iPhone 刘海 / PWA 状态栏让位（普通浏览器为 0，不影响） */
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px 24px;
}
.login-card {
  width: 100%;
  max-width: 348px;
  padding: 30px 24px 24px;
  border-radius: var(--r-xl);
  text-align: center;
  animation: modalPop 0.7s var(--spring) both;
}
.login-card .avatar { margin: 0 auto 14px; }
.login-card h1 { font-size: 20px; font-weight: 800; letter-spacing: 0.3px; }
.login-card > p { margin: 6px 0 20px; font-size: 12.5px; color: var(--ink-3); }
.login-card .input { text-align: center; letter-spacing: 6px; font-size: 18px; font-weight: 700; }
.login-card .btn-primary { margin-top: 14px; }
.login-card .tip { margin-top: 12px; font-size: 11px; color: var(--ink-3); }
.login-card.shake { animation: shake 0.5s var(--spring); }

/* —— 主框架 —— */
.boss-app {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 80px;
}
.boss-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}
.boss-title { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.boss-title h1 { font-size: 17px; font-weight: 800; }
.boss-title p { font-size: 11.5px; color: var(--ink-3); }
#syncState { font-weight: 700; color: #2f8a5b; }
#syncState.off { color: #b3771a; }

/* 统计卡 */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat {
  padding: 14px 12px;
  border-radius: var(--r-md);
  text-align: center;
}
.stat b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--pink-600);
}
.stat span { font-size: 11px; color: var(--ink-3); font-weight: 600; }

/* —— 经营看板（boss.js renderDashboard 渲染） —— */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.dash-card {
  padding: 16px 8px 14px;
  border-radius: var(--r-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.dash-ico { display: block; font-size: 22px; margin-bottom: 6px; }
.dash-card b {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--pink-600);
}
.dash-label { font-size: 11px; color: var(--ink-3); font-weight: 600; }

.dash-title { margin: 18px 2px 10px; font-size: 14px; font-weight: 800; }

.dash-top { display: flex; flex-direction: column; gap: 8px; }
.dash-top-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.dash-medal { font-size: 20px; flex: 0 0 auto; }
.dash-dish-img {
  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--pink-100);
}
.dash-dish-emoji {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: var(--pink-100);
  border-radius: 12px;
  flex: 0 0 auto;
}
.dash-dish-info { flex: 1 1 auto; min-width: 0; }
.dash-dish-info b { display: block; font-size: 14px; }
.dash-dish-info span { font-size: 11.5px; color: var(--ink-3); }

.dash-cats { display: flex; flex-direction: column; gap: 10px; }
.dash-cat-row {
  display: grid;
  grid-template-columns: 62px 1fr 86px;
  align-items: center;
  gap: 10px;
}
.dash-cat-name { font-size: 12.5px; font-weight: 700; }
.dash-cat-track {
  height: 12px;
  border-radius: 99px;
  background: var(--pink-100);
  overflow: hidden;
}
.dash-cat-track i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--pink-400), var(--pink-500));
}
.dash-cat-n { font-size: 11px; color: var(--ink-3); text-align: right; white-space: nowrap; }

.dash-empty {
  padding: 26px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  border-radius: var(--r-md);
}

@media (max-width: 560px) {
  .dash-card b { font-size: 17px; }
  .dash-cat-row { grid-template-columns: 56px 1fr 78px; }
}

/* 分段控件 */
.boss-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--stroke);
  box-shadow: var(--inset-hi), var(--shadow-sm);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.tab {
  padding: 9px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  transition: transform 0.45s var(--spring), background 0.28s, color 0.28s, box-shadow 0.28s;
}
.tab:active { transform: scale(0.94); }
.tab.is-active {
  color: #fff;
  background: linear-gradient(140deg, #ff9dbd, var(--pink-500));
  box-shadow: var(--shadow-pink);
}

.boss-panel { display: none; }
.boss-panel.is-active { display: block; animation: pageIn 0.45s var(--spring-soft) both; }

/* 筛选 */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filter {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--stroke-soft);
  transition: transform 0.4s var(--spring), background 0.25s, color 0.25s;
}
.filter:active { transform: scale(0.93); }
.filter.is-active { background: var(--pink-100); color: var(--pink-600); border-color: var(--pink-200); }
.filter .n {
  display: inline-block;
  min-width: 17px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 99px;
  font-size: 10.5px;
  background: var(--pink-500);
  color: #fff;
}

/* 订单网格 */
.order-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
.order-grid .order-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
/* 让同一行两张卡的底部操作区对齐 */
.order-grid .order-card .oc-foot { margin-top: auto; }
.order-card.is-new {
  border-color: var(--pink-300);
  box-shadow: var(--inset-hi), 0 0 0 3px rgba(255, 143, 180, 0.25), var(--shadow-md);
  animation: newOrder 1.4s var(--spring-soft) 2;
}
.o-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.o-actions .btn-primary { padding: 9px 18px; font-size: 13px; }
.o-items .oi-note {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  color: #b06a2a;
  background: rgba(255, 240, 205, 0.9);
}

/* 菜单管理 */
.menu-list { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.menu-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  animation: cardIn 0.5s var(--spring-soft) both;
}
.mr-emoji {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 20px;
  border-radius: 13px;
  background: linear-gradient(150deg, #fff5f9, #ffe6ef);
}
.mr-main { flex: 1 1 auto; min-width: 0; }
.mr-main b { font-size: 14px; font-weight: 800; }
.mr-main small { display: block; font-size: 11.5px; color: var(--ink-3); }
.mr-main small em { font-style: normal; color: var(--pink-600); font-weight: 700; }
.menu-row.is-out .mr-main b { color: var(--ink-3); text-decoration: line-through; }

/* iOS 风格开关 */
.switch { position: relative; width: 44px; height: 26px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: rgba(200, 185, 192, 0.55);
  transition: background 0.3s var(--smooth-out);
  pointer-events: none;
}
.switch span::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(120, 80, 100, 0.3);
  transition: transform 0.42s var(--spring);
}
.switch input:checked + span { background: linear-gradient(140deg, #ff9dbe, var(--pink-500)); }
.switch input:checked + span::after { transform: translateX(18px); }

/* 设置面板 */
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-lg);
}
.settings-card .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.settings-card .btn-primary { align-self: flex-start; }
.settings-card .danger-zone {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 200, 218, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-3);
}

/* 微信推送自检卡片 */
.push-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.78), rgba(255, 238, 246, 0.62));
  border: 1px solid var(--stroke-soft);
  box-shadow: var(--inset-hi), var(--shadow-sm);
}
.push-info { flex: 1 1 auto; min-width: 180px; }
.push-info b { font-size: 13.5px; font-weight: 800; }
.push-info p { margin-top: 3px; font-size: 11.5px; line-height: 1.55; color: var(--ink-3); }
.push-info p.ok { color: #2f8a5b; font-weight: 600; }
.push-info p.fail { color: #c0455f; font-weight: 600; }

/* 订单卡里的推送状态条 */
.push-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 9px 0 2px;
  padding: 7px 11px;
  border-radius: 11px;
  font-size: 11.5px;
  font-weight: 600;
  animation: popIn 0.45s var(--spring) both;
}
.push-line.ok { color: #2f7f57; background: rgba(231, 247, 238, 0.9); }
.push-line.fail { color: #b3485f; background: rgba(255, 231, 238, 0.92); }
.push-line .mini-btn { padding: 4px 11px; font-size: 11.5px; background: #fff; }

/* 老板端菜品编辑弹窗 */
.modal.form { text-align: left; max-width: 420px; gap: 13px; }
.modal.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal.form .emoji-pick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.modal.form .emoji-pick button {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  font-size: 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--stroke-soft);
  transition: transform 0.35s var(--spring), border-color 0.2s, background 0.2s;
}
.modal.form .emoji-pick button:active { transform: scale(0.88); }
.modal.form .emoji-pick button.sel {
  border-color: var(--pink-400);
  background: var(--pink-100);
  transform: scale(1.06);
}
.modal.form .modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.modal.form .modal-actions .btn-primary { flex: 1 1 auto; }

/* ==========================================================================
   9.5 趣味互动（盲盒入口 / 老虎机弹窗 / 彩蛋 / 撒花）
   ========================================================================== */
/* —— 导航里的盲盒入口：和普通 tab 区分开，带一点粉色高光 —— */
.nav-item.nav-lucky { color: var(--pink-600); }
.nav-item.nav-lucky .nav-ico {
  background: linear-gradient(150deg, rgba(255, 182, 209, 0.95), rgba(255, 233, 168, 0.95));
  box-shadow: 0 6px 14px -8px rgba(232, 65, 122, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.nav-item.nav-lucky:active { transform: scale(0.92); }

/* —— 头像被戳的反馈 —— */
.avatar.is-tap { animation: avatarTap 0.45s var(--spring); }

/* —— 盲盒弹窗 —— */
.lucky-modal { gap: 10px; padding: 18px; max-width: 360px; }
.lucky-head { display: flex; align-items: center; justify-content: space-between; }
.lucky-tag { font-size: 15px; font-weight: 800; color: var(--pink-600); letter-spacing: 0.3px; }
.lucky-sub { margin: -4px 0 2px; font-size: 12px; color: var(--ink-3); }

.lucky-stage {
  position: relative;
  height: 96px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #fff7fa 0%, #ffeef6 100%);
  box-shadow: var(--inset-hi), 0 12px 26px -20px rgba(198, 108, 146, 0.9);
}
.lucky-reel { will-change: transform; }
.lucky-item {
  height: 96px;
  flex: 0 0 96px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
}
.lucky-thumb {
  width: 62px; height: 62px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 18px;
  overflow: hidden;
  font-size: 28px;
  background: linear-gradient(150deg, #ffe6ef 0%, #fff7f2 100%);
  box-shadow: var(--inset-hi), 0 8px 16px -12px rgba(198, 108, 146, 0.75);
}
.lucky-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lucky-meta { min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.lucky-meta b { font-size: 15px; font-weight: 800; }
.lucky-meta span { font-size: 11.5px; color: var(--ink-3); }

/* 上下渐隐 + 内描边，做出「滚筒窗口」的厚度 */
.lucky-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 20px 20px -20px rgba(160, 80, 110, 0.55),
    inset 0 -20px 20px -20px rgba(160, 80, 110, 0.55);
}
.lucky-modal.is-rolling .lucky-reel { filter: blur(0.6px); }
.lucky-modal.is-won .lucky-stage { animation: luckyWin 0.6s var(--spring); }

.lucky-verdict {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  animation: popIn 0.4s var(--spring-soft);
}
.lucky-verdict b { color: var(--ink); }
.lucky-again { align-self: center; }

/* —— 特效层（爱心雨 / 爱心炸开 / 撒花画布）—— */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: none;
  overflow: hidden;
}
.fx-heart {
  position: absolute;
  top: -8vh;
  will-change: transform, opacity;
  animation-name: heartFall;
  /* 下落用对称缓动（近似匀速、轻微加速），不用 --smooth-out：
     后者 80% 的位移挤在前 30% 时间，雨滴会「一闪到底」 */
  animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  animation-fill-mode: forwards;
}
.fx-puff {
  position: fixed;
  transform: translate(-50%, -50%);
  animation: puffOut 0.95s var(--smooth-out) forwards;
}
.fx-confetti {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}

/* ==========================================================================
   9.6 玻璃材质 2.0（内容层专用，绝不挂 WebGL）
   ----------------------------------------------------------------------------
   内容区有几十张卡片，每张都挂 WebGL 会直接卡死；这里用纯 CSS 模拟质感：
   极淡粉渐变 + 30px 背景模糊 + 1px 白色内高光 + 底部一道粉色内阴影做厚度。
   菜品图是卡片的子元素，只会被画在玻璃层之上，不会被模糊。
   ========================================================================== */
.liquid-glass-css {
  /* 千万不要在这里写 position: relative —— 会覆盖 .cart-bar 的 fixed
     和 .topbar 的 sticky，导致购物车条跟着页面滚走（真机踩过） */
  background:
    linear-gradient(152deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 244, 249, 0.26) 45%,
      rgba(255, 228, 240, 0.18) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -12px 20px -16px rgba(255, 120, 175, 0.38),
    0 12px 30px -22px rgba(190, 90, 132, 0.55);
}

/* 交互光效：手指按在玻璃上，边缘泛白 + 外圈柔光 */
.liquid-glass-css:hover {
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -12px 20px -16px rgba(255, 120, 175, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 6px 26px -10px rgba(255, 143, 180, 0.55),
    0 12px 30px -22px rgba(190, 90, 132, 0.5);
}
.liquid-glass-css:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 24px -6px rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.32),
    0 4px 18px -8px rgba(255, 143, 180, 0.6);
}
.play-card.liquid-glass-css {
  transition: box-shadow 0.35s var(--smooth-out), border-color 0.35s var(--smooth-out);
}

/* WebGL 接管后的三个固定层：CSS 只留形状，质感全部由 canvas 画 */
.topbar[data-liquid-glass="webgl"],
#cartBar[data-liquid-glass="webgl"],
#cartOverlay .sheet[data-liquid-glass="webgl"] {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
  overflow: visible;          /* 库的 canvas 比元素略大，用于采样玻璃边缘 */
}

/* ==========================================================================
   10. 关键帧动画（全部带过冲，不使用 linear）
   ========================================================================== */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.9); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes modalPop {
  0%   { opacity: 0; transform: scale(0.82) translateY(18px); }
  55%  { opacity: 1; transform: scale(1.03) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cardIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rowIn {
  0%   { opacity: 0; transform: translateX(-10px) scale(0.96); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes pageIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cartUp {
  0%   { opacity: 0; transform: translateY(70px) scale(0.9); }
  70%  { opacity: 1; transform: translateY(-6px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cartDown {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(40px) scale(0.94); }
}
@keyframes popBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28) rotate(-8deg); }
  70%  { transform: scale(0.94) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  18%  { transform: translateX(-9px) rotate(-1.4deg); }
  36%  { transform: translateX(8px) rotate(1.2deg); }
  54%  { transform: translateX(-6px); }
  72%  { transform: translateX(4px); }
  88%  { transform: translateX(-2px); }
}
@keyframes revealCard {
  0%   { opacity: 0; transform: scale(0.86) translateY(10px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes hubPulse {
  0%, 100% { box-shadow: 0 10px 22px -8px rgba(255, 95, 146, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.75); }
  50% { box-shadow: 0 14px 30px -8px rgba(255, 95, 146, 1), inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 0 0 10px rgba(255, 255, 255, 0.55); }
}
@keyframes pointerTick {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-4deg); }
}
/* —— 转盘：外圈呼吸光 / 指针浮动 / 中心光环 —— */
@keyframes wheelGlow {
  0%, 100% { opacity: 0.34; transform: scale(0.985); }
  50% { opacity: 0.62; transform: scale(1.02); }
}
@keyframes pinFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-4px) rotate(1.5deg); }
}
@keyframes hubRing {
  0% { transform: scale(0.96); opacity: 0.7; }
  70% { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1.2); opacity: 0; }
}
/* 底部导航图标 Q 弹反馈：1 → 0.8 → 1.1 → 1 */
@keyframes navPop {
  0% { transform: scale(1); }
  35% { transform: scale(0.8); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.nav-item .nav-ico.is-pop { animation: navPop 0.42s var(--spring); }
@keyframes kittyFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}
@keyframes floatBlob {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(58px, -42px, 0) scale(1.12); }
  100% { transform: translate3d(-44px, 52px, 0) scale(0.94); }
}
@keyframes newOrder {
  0%, 100% { box-shadow: var(--inset-hi), 0 0 0 3px rgba(255, 143, 180, 0.2), var(--shadow-md); }
  50% { box-shadow: var(--inset-hi), 0 0 0 7px rgba(255, 143, 180, 0.28), var(--shadow-md); }
}
/* 猫爪等待动画 */
@keyframes pawStep {
  0%, 100% { opacity: 0.25; transform: translateY(0) scale(0.9); }
  40% { opacity: 1; transform: translateY(-4px) scale(1.05); }
}

/* —— 趣味互动 —— */
@keyframes avatarTap {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(0.86) rotate(-5deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes luckyWin {
  0% { transform: scale(1); }
  45% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes heartFall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg) scale(0.7); opacity: 0; }
  12% { opacity: 0.95; }
  80% { opacity: 0.9; }
  100% { transform: translate3d(var(--dx, 0px), 112vh, 0) rotate(var(--rot, 200deg)) scale(1.05); opacity: 0; }
}
@keyframes puffOut {
  0% { transform: translate(-50%, -50%) scale(0.35); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -40px))) scale(1.1);
    opacity: 0;
  }
}

/* ==========================================================================
   11. 响应式 & 兼容降级
   ========================================================================== */
/* 桌面端：顾客端像一支竖屏手机，居中悬浮 */
@media (min-width: 720px) {
  .app {
    max-width: 460px;
    padding-top: 26px;
    padding-bottom: 240px;
  }
  .app::before {
    content: "";
    position: fixed;
    top: 50%; left: 50%;
    width: 520px; height: 92vh;
    transform: translate(-50%, -50%);
    border-radius: 44px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 40px 100px -50px rgba(190, 90, 132, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: -1;
    pointer-events: none;
  }
  .bottom-nav, .cart-bar { max-width: 420px; }
}

/* iPad 竖屏：双列；搜索提示与空状态横跨整行 */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .dish-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dish-list > .search-meta,
  .dish-list > .search-empty {
    grid-column: 1 / -1;
  }
}

/* iPad 横屏：扩展内容区并用三列，避免双列卡片被拉得过长 */
@media (min-width: 1024px) and (max-width: 1199px) and (orientation: landscape) {
  .app {
    max-width: 960px;
  }
  .app::before {
    width: calc(100vw - 48px);
    max-width: 1020px;
  }
  .dish-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dish-list > .search-meta,
  .dish-list > .search-empty {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   电脑桌面端（顾客端专属）：顶部玻璃导航 + 中央三列 + 右侧常驻购物车
   ========================================================================== */
@media (min-width: 1200px) {
  /* —— 外壳：去掉手机壳与 480/960 限制，右侧给购物车留 400px —— */
  body[data-page="customer"] .app {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 112px 400px 56px 28px;
  }
  body[data-page="customer"] .app::before {
    content: none;
    display: none;
  }

  /* —— 顶栏：品牌居左、横向导航居右，保留毛玻璃 —— */
  body[data-page="customer"] .topbar {
    position: fixed;
    top: calc(20px + env(safe-area-inset-top, 0px));
    left: 28px;
    right: 400px;
    z-index: 70;
    margin: 0;
    padding: 12px 18px;
    border-radius: 30px;
  }
  body[data-page="customer"] .titles h1 { font-size: 18px; }
  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .desktop-nav .nav-item {
    position: relative;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 16px;
    font-size: 12.5px;
    color: var(--ink-2);
    background: transparent;
    white-space: nowrap;
    transition: color 0.25s, background 0.3s var(--smooth-out),
                box-shadow 0.3s, transform 0.45s var(--spring);
  }
  .desktop-nav .nav-ico {
    width: 24px;
    height: 24px;
    font-size: 16px;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    transition: transform 0.45s var(--spring), background 0.3s var(--smooth-out);
  }
  .desktop-nav .nav-item.is-active {
    color: #fff;
    background: linear-gradient(140deg, #ff9dbd, var(--pink-500));
    box-shadow: 0 10px 20px -12px rgba(255, 95, 146, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
  .desktop-nav .nav-item.is-active .nav-ico {
    transform: none;
    background: transparent;
    box-shadow: none;
  }
  .desktop-nav .nav-item.is-active::after {
    bottom: 3px;
    width: 4px;
    height: 4px;
    background: #fff;
  }

  /* 手机底部导航与结算条在桌面隐藏，事件逻辑仍保留给移动端 */
  body[data-page="customer"] #nav,
  body[data-page="customer"] #cartBar { display: none !important; }

  /* —— 菜单：三列纵向卡，充分利用剩余宽度 —— */
  body[data-page="customer"] .dish-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  body[data-page="customer"] .dish-list > .search-meta,
  body[data-page="customer"] .dish-list > .search-empty {
    grid-column: 1 / -1;
  }
  body[data-page="customer"] .dish {
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border-radius: 28px;
    animation-fill-mode: backwards;
    transition: transform 0.5s var(--spring), box-shadow 0.35s var(--smooth-out);
  }
  body[data-page="customer"] .dish-thumb {
    width: 100%;
    height: 128px;
    font-size: 50px;
    border-radius: 20px;
  }
  body[data-page="customer"] .dish-main {
    width: 100%;
    min-height: 118px;
  }
  body[data-page="customer"] .dish-main h3 {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  body[data-page="customer"] .dish-desc { min-height: 36px; }
  body[data-page="customer"] .dish-foot { margin-top: auto; }

  /* —— 右侧常驻购物车：复用原 sheet DOM，不再遮挡主内容 —— */
  #cartOverlay {
    position: fixed;
    top: 24px;
    right: 24px;
    bottom: 24px;
    left: auto;
    z-index: 80;
    width: 360px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    transition: none;
    pointer-events: auto;
  }
  #cartOverlay .sheet {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--stroke);
    border-bottom: 1px solid var(--stroke);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: var(--inset-hi), var(--shadow-lg);
    transform: none;
    transition: box-shadow 0.35s var(--smooth-out);
    overflow: hidden;
  }
  #cartOverlay .grab,
  #cartOverlay #sheetClose { display: none; }
  #cartOverlay .sheet-head { min-height: 38px; }
  #cartOverlay .sheet-head h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 18px;
  }
  #desktopCartBasket {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-radius: 50%;
    background: linear-gradient(140deg, #fff, #ffe6ef);
    box-shadow: inset 0 1px 0 #fff, 0 4px 10px -6px rgba(200, 110, 150, 0.7);
  }
  #desktopCartBasket.bump { animation: bump 0.5s var(--spring); }
  #cartOverlay .cart-items {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding-right: 4px;
  }
  #cartOverlay .cart-row { padding: 9px 10px; }
  #cartOverlay .ci-top { flex-wrap: wrap; }
  #cartOverlay .stepper { flex: 0 0 auto; }
  #cartOverlay .sheet-sum {
    border-top: 1px solid var(--stroke-soft);
    padding: 12px 2px 0;
  }

  /* 侧栏两段式：清单态 → 点击“去结算” → 原位展开备注与提交 */
  #desktopCheckout { display: inline-flex; }
  #cartOverlay.is-checkout #desktopCheckout { display: none; }
  #cartOverlay:not(.is-checkout) .checkout-details { display: none; }
  #cartOverlay.is-checkout .checkout-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 auto;
    animation: pageIn 0.45s var(--spring-soft) both;
  }
  #cartOverlay.is-checkout .cart-items { min-height: 80px; }
  #checkoutBack {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-3);
    background: rgba(240, 230, 235, 0.55);
    transition: color 0.2s, background 0.25s, transform 0.35s var(--spring);
  }
  #checkoutBack:active { transform: scale(0.94); }
}

/* 桌面鼠标：卡片轻微上浮，导航与返回按钮也保持弹簧反馈 */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  body[data-page="customer"] .dish:not(.is-out):hover {
    transform: translateY(-6px);
    box-shadow: var(--inset-hi), 0 24px 38px -22px rgba(198, 108, 146, 0.58), var(--shadow-lg);
  }
  .desktop-nav .nav-item:not(.is-active):hover {
    color: var(--pink-600);
    background: rgba(255, 255, 255, 0.52);
    transform: translateY(-1px);
  }
  .desktop-nav .nav-item.is-active:hover { transform: translateY(-1px); }
  #checkoutBack:hover {
    color: var(--pink-600);
    background: var(--pink-100);
  }
}

@media (min-width: 760px) {
  .order-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
}

@media (max-width: 380px) {
  .dish-thumb { width: 72px; height: 72px; font-size: 32px; }
  .titles h1 { font-size: 15.5px; }
  /* 转盘尺寸交给 .wheel-wrap 的 clamp() 统一处理，这里不再硬编码，
     否则盘面与 --wheel-r 会算不到一起，标签会飘到中间 */
  .stat b { font-size: 19px; }
}

/* 节日彩蛋倒计时：副标题下方一行极小字，普通日显示距离下一个特殊日子还有几天 */
.sub-countdown {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--ink-3);
  opacity: 0.85;
}

/* 不支持 backdrop-filter 的浏览器：用更高不透明度的纯色兜底，保证可读性 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .bottom-nav, .cart-bar, .topbar, .sheet, .modal, .toast {
    background: rgba(255, 255, 255, 0.94);
  }
  .overlay { background: rgba(60, 42, 51, 0.5); }
}

/* 尊重「减少动态效果」系统偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05ms !important;
  }
}