/* EatToday · 移动优先样式（PRD §8：375px 可用） */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
 * 主题：甜酷（Sweet-Cool）
 *   甜 = 粉/玫红渐变、薰衣草粉底、大圆角
 *   酷 = 深紫黑正文、高饱和撞色、深色阴影
 *
 * 所有前景/背景组合都实测过 WCAG AA（正文 >= 4.5:1）：
 *   #1B1420 on #FBF5F9 = 16.7:1   #6E5A6B on #FBF5F9 = 5.3:1
 *   #8B2FC9 on #FBF5F9 =  5.8:1   白字 on #A61E6B   = 7.0:1
 * 粉白配色最大的风险就是"好看但读不清"，所以次要文字与按钮都刻意压深。
 * ============================================================ */
:root {
  --bg: #FBF5F9;                   /* 薰衣草粉底 */
  --card: #FFFFFF;
  --border: rgba(27, 20, 32, 0.10); /* 中性描边（深紫黑低透明） */

  /* 深紫黑正文 —— 比纯黑柔和，但仍保持 17:1 的极高对比 */
  --text: #1B1420;
  /* 次要文字：粉雾灰紫。浅到 #8A7286 会掉到 4.0:1 不达标，故压深 */
  --muted: #6E5A6B;

  /* 强调色（紫）+ 玫红，构成甜酷撞色 */
  --accent: #8B2FC9;
  --accent-2: #D62B7A;
  --accent-deep: #7B22B8;
  --accent-soft: #F3E4FE;          /* 淡紫（chip 选中底） */
  --pink-soft: #FCE7F1;            /* 淡玫粉（面板底） */

  /* 阴影带紫色调，比纯黑更贴合主题 */
  --shadow-color: 40, 12, 48;

  /* 徽章语义色（仅在详情页使用） */
  --cut: #BE185D;   --cut-bg: #FCE7F1;   /* 减脂：玫红 */
  --bulk: #6D28D9;  --bulk-bg: #EDE4FE;  /* 增肌：紫 */
  --any: #1D4ED8;   --any-bg: #E0E8FE;   /* 均衡：冷蓝 */
  --eaten: #B45309; --eaten-bg: #FEF3C7; /* 最近吃过：琥珀 */

  /* 三层圆角 */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  /* 三层阴影：同样带紫调 */
  --shadow-1: 0 1px 2px rgba(var(--shadow-color), 0.05);
  --shadow-2: 0 2px 8px rgba(var(--shadow-color), 0.07);
  --shadow-3: 0 4px 16px rgba(var(--shadow-color), 0.12);
  /* 主按钮的玫红投影 */
  --shadow-accent: 0 2px 10px rgba(214, 43, 122, 0.30);
  --shadow-accent-hover: 0 5px 18px rgba(214, 43, 122, 0.38);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* 入场用的"回弹"曲线：末段轻微过冲，比线性收尾更有生命力。
     借鉴自 ReactBits / Aceternity 那类动画组件库的做法——
     它们真正的价值不是特效本身，而是"动效节奏统一"这件事。 */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 0.16s;
  --dur: 0.26s;
  --dur-slow: 0.42s;
}

/* ============================================================
 * 动效层
 *
 * 设计原则（从 ReactBits / Aceternity / Uiverse 的实际做法提炼）：
 *   1. 入场用 stagger（逐个延迟），让"一批内容"有先后感而不是齐刷刷出现
 *   2. 状态变化用统一缓动 + 短时长（<300ms），过长会显得迟钝
 *   3. 加载用骨架屏（shimmer）而不是转圈，减少"等待焦虑"
 *   4. 反馈要落在被操作的元素上（按压涟漪），而不是全局
 *   5. 全部受 prefers-reduced-motion 约束，尊重系统设置
 * ============================================================ */

/* 卡片入场：轻微上移 + 淡入 */
@keyframes et-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 骨架屏微光扫过 */
@keyframes et-shimmer {
  from { background-position: -160% 0; }
  to   { background-position: 260% 0; }
}

/* 打勾反馈：弹性放大 */
@keyframes et-pop {
  0%   { transform: scale(0.86); }
  55%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* 按压涟漪：从点击处扩散并淡出 */
@keyframes et-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* 坐标刷新：数值轻微闪动，提示"刚刚更新了" */
@keyframes et-tick {
  0%   { color: var(--accent-2); }
  100% { color: inherit; }
}

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 表单控件默认不继承 body 字体，中文会退回系统默认（Windows 上常是宋体），
   导致按钮文字与卡片文字字体不一致。统一继承。 */
button, input, select, textarea { font-family: inherit; }

/* 键盘可达性：只在键盘导航时显示焦点环，鼠标点击不显示（不影响视觉） */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 统一交互节奏：所有按钮过渡同一组属性与同一条缓动曲线。
   之前各处 transition 不一致（有的 0.15s 有的没有），手感会发"散"。 */
button {
  transition: background-color 0.18s var(--ease),
              border-color 0.18s var(--ease),
              color 0.18s var(--ease),
              box-shadow 0.18s var(--ease),
              transform 0.08s var(--ease);
}
/* 按压反馈：手机上没有 hover，:active 才是主要的触觉暗示 */
button:not(:disabled):active { transform: translateY(1px) scale(0.985); }

/* 尊重系统的"减少动态效果"设置。
   注意：必须用 animation: none 而不是只把时长压到 0.01ms ——
   入场动效用的是 backwards 填充（起点 opacity:0），只压时长会让动画
   停在起点，卡片会永久隐形。这是真实踩过的坑。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  button:not(:disabled):active { transform: none; }
  /* 兜底：任何以 opacity:0 起步的元素都必须回到可见 */
  .dish-card, .wall-tile, .detail-body { opacity: 1 !important; }
}

.page { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }

/* 顶部 */
.hero h1 { font-size: 24px; font-weight: 500; }
.subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* 实时坐标定位面板：淡玫粉底 + 紫描边，是"甜酷"撞色最直观的一处 */
.geo-panel {
  margin-top: 16px;
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--accent-soft) 100%);
  border: 1px solid rgba(139, 47, 201, 0.20);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: var(--shadow-2);
}
.geo-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.geo-city { font-size: 13px; font-weight: 500; color: var(--accent); flex-shrink: 0; }
.geo-status { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 坐标读数板：未定位时半透明置灰，拿到 fix 后点亮 */
.coord-board {
  margin-top: 10px;
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow-1);
}
.coord-main {
  display: flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;   /* 等宽数字，跳动时不抖动 */
}
.coord-axis { font-size: 11px; color: var(--muted); }
.coord-val {
  font-size: 17px; font-weight: 600; color: var(--accent);
  font-family: Consolas, 'Courier New', monospace;
  letter-spacing: 0.2px;
}
.coord-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.coord-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--border);
}
/* 精度三色：好=绿 中=琥珀 差=玫红。
   注意「好/中」是语义色，不参与主题换色 —— 精度好必须是绿色，
   换成主题紫会丢失"好坏"的含义，读屏之外的视觉用户也会误判。 */
.coord-chip.acc-good { background: #DCFCE7; color: #15803D; border-color: #A7E8BE; }
.coord-chip.acc-mid  { background: #FFEDD5; color: #C2410C; border-color: #F7CFA5; }
.coord-chip.acc-poor { background: #FBEDF4; color: #A61E6B; border-color: #F5D6E5; }

/* 面板操作按钮 */
.geo-actions {
  display: flex; gap: 8px;
  margin-top: 10px;
}
.btn-geo {
  flex: 1;
  padding: 10px 10px;
  background: var(--card); color: var(--accent);
  border: 1px solid rgba(139, 47, 201, 0.35);
  border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
}
.btn-geo:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn-geo:disabled { opacity: 0.6; cursor: default; }
.btn-geo-primary {
  background: linear-gradient(180deg, #D62B7A 0%, var(--accent) 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px rgba(139, 47, 201, 0.25);
}
.btn-geo-primary:hover {
  background: linear-gradient(180deg, #E8458C 0%, var(--accent-deep) 100%);
  border-color: transparent;
}
/* 追踪进行中：主按钮变警示态（表示"再点是停止"） */
.btn-geo.btn-live-on {
  background: #FBEDF4; color: #A61E6B; border-color: #A61E6B;
}
.btn-geo.btn-live-on:hover { background: #F5D6E5; }

/* 店铺名 + 距离 */
.dish-store {
  display: flex; align-items: center; gap: 8px;
  margin-top: 3px; font-size: 12px; color: var(--muted);
}
.store { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist {
  flex-shrink: 0;
  color: var(--accent); font-weight: 500;
  background: var(--accent-soft);
  padding: 1px 8px; border-radius: 999px;
}

/* 筛选区 */
.filters { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.filter-row { display: flex; align-items: flex-start; gap: 12px; }
.filter-label { flex-shrink: 0; width: 34px; font-size: 13px; color: var(--muted); padding-top: 7px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  /* 原 6px 14px 的点击高度只有约 32px，低于移动端建议的 44px 触控目标。
     加到 9px 19px 后约 39px，配合 chip-group 的 8px 间距已明显更好点。 */
  padding: 9px 19px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
  box-shadow: var(--shadow-1);
}
.chip:hover { border-color: var(--accent); }
.chip-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
  /* 选中态加一圈极淡的光晕，比只换色更容易一眼分辨 */
  box-shadow: 0 0 0 3px rgba(139, 47, 201, 0.10);
}

/* 主操作 */
.actions { display: flex; gap: 12px; margin-top: 24px; }
.btn-primary {
  flex: 1; padding: 13px;
  /* 渐变 + 同色系投影：主要动作在页面上"浮"起来，比纯色块更抓眼 */
  background: linear-gradient(180deg, #D62B7A 0%, var(--accent) 55%, var(--accent-deep) 100%);
  color: #fff;
  border: none; border-radius: var(--radius);
  font-size: 16px; font-weight: 500; cursor: pointer;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #E8458C 0%, #9B36D6 55%, #8B2FC9 100%);
  box-shadow: var(--shadow-accent-hover);
}
.btn-primary:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.btn-secondary {
  padding: 13px 20px;
  background: var(--card); color: var(--accent);
  border: 1px solid rgba(139, 47, 201, 0.45); border-radius: var(--radius);
  font-size: 15px; cursor: pointer;
  box-shadow: var(--shadow-1);
}
.btn-secondary:hover { background: var(--accent-soft); border-color: var(--accent); }

/* 结果区 */
.result-panel { margin-top: 24px; }
.result-panel.hidden, .empty-state.hidden { display: none; }
.result-meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; }

.result-list { display: flex; flex-direction: column; gap: 12px; }
/* 结果列表已改为语义化 ul/li。
   注意：这里只能清 list-style，不能再写 padding/margin——
   `.result-list li` 的特异性(0,1,1)高于 `.dish-card`(0,1,0)，
   写 padding:0 会把卡片的 14px/16px 内边距一起干掉。
   缩进已由开头的 `* { margin:0; padding:0 }` 处理。 */
.result-list li { list-style: none; }

.dish-card {
  background: var(--card);
  /* 边框减淡 + 补阴影：层级感来自阴影而不是重边框，观感更干净 */
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
/* 桌面端悬停浮起；移动端没有 hover，不影响 */
@media (hover: hover) {
  .dish-card:hover {
    box-shadow: var(--shadow-3);
    border-color: rgba(139, 47, 201, 0.28);
    transform: translateY(-1px);
  }
}
.dish-top { display: flex; align-items: center; gap: 8px; }
.dish-name { font-size: 16px; font-weight: 500; }
.eaten-badge {
  flex-shrink: 0;
  font-size: 11px; color: var(--eaten);
  background: var(--eaten-bg);
  padding: 2px 8px; border-radius: 999px;
}
.dish-mid { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 13px; }
.rating { color: #C2185B; font-weight: 600; }   /* 评分：深玫红（白底上 5.9:1，甜而不土） */
.dim { color: var(--muted); font-size: 12px; }
.band { color: var(--text); }

.badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  font-weight: 500;
}
.badge-cut  { background: var(--cut-bg);  color: var(--cut); }
.badge-bulk { background: var(--bulk-bg); color: var(--bulk); }
.badge-any  { background: var(--any-bg);  color: var(--any); }
.tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--border);
}

.btn-eat {
  margin-top: 12px;
  padding: 9px 18px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(139, 47, 201, 0.45); border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer;
}
.btn-eat:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-eat:disabled { opacity: 0.6; cursor: default; }

/* 空态 */
.empty-state {
  text-align: center;
  background: var(--card);
  border: 1px dashed rgba(0, 0, 0, 0.16);
  border-radius: var(--radius-lg);
  padding: 40px 16px;
}
.empty-title { font-size: 16px; font-weight: 500; }
.empty-hint { font-size: 13px; color: var(--muted); margin: 6px 0 18px; line-height: 1.7; }
/* 数据错位警告：不是用户筛错了，而是数据与用户不在同一地区。
   用玫红强调色区分，避免用户反复徒劳地调整筛选条件。 */
.empty-hint.warn {
  color: var(--accent-2);
  background: var(--pink-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: left;
}
.btn-clear {
  padding: 10px 24px;
  background: linear-gradient(180deg, #D62B7A 0%, var(--accent) 100%);
  color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(139, 47, 201, 0.25);
}

.foot {
  margin-top: 40px; text-align: center;
  font-size: 12px; color: var(--muted);
}

/* ============================================================
 * 视图系统（封面 / 主界面 / 详情页）
 * ============================================================ */
.view.hidden { display: none; }

/* ---------- 返回键 ---------- */
.topbar { margin-bottom: 12px; }

/* 整页背景氛围：一层极淡的绿调渐变 + 顶部一团柔光。
   纯色背景会让页面显得像一张平纸，加氛围后观感更完整；
   透明度压得很低（4%~7%），不影响任何文字对比度，也不分散注意力。 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(214, 43, 122, 0.10) 0%, rgba(214, 43, 122, 0) 62%),
    linear-gradient(180deg, rgba(139, 47, 201, 0.05) 0%, rgba(251, 245, 249, 0) 340px);
}
.btn-back {
  padding: 8px 16px 8px 12px;
  background: var(--card); color: var(--accent);
  border: 1px solid rgba(139, 47, 201, 0.35); border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer;
  box-shadow: var(--shadow-1);
}
.btn-back:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ============================================================
 * 封面页（菜品图片墙）
 * ============================================================ */
.cover-wrap {
  max-width: 560px; margin: 0 auto;
  padding: 40px 16px 32px;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* ============================================================
 * 霓虹走马灯（封面顶部）
 *
 * 灵感来自街边霓虹灯箱：深底 + 发光字 + 偶尔的接触不良闪烁。
 * 纯 CSS 动画实现，不引任何库。
 *
 * 两个关键实现点：
 *   1. 无缝循环 —— 内容复制一份，动画位移正好 -50%，首尾重合看不出接缝
 *   2. 可见性兜底 —— 起点是 translateX(-50%)，若动画被禁用（reduce-motion）
 *      必须显式归零，否则内容会停在偏移位置、看起来像错位
 * ============================================================ */
.neon-marquee {
  position: relative;
  overflow: hidden;
  margin: -40px -16px 26px;          /* 顶到页面边缘，形成横向灯带 */
  padding: 11px 0;
  /* 深色底让霓虹字有对比，是甜酷主题里唯一的"夜景"元素 */
  background: linear-gradient(180deg, #1A1020 0%, #241430 55%, #1A1020 100%);
  /* 上下各一条发光边线，模拟灯箱边框 */
  border-top: 1px solid rgba(214, 43, 122, 0.55);
  border-bottom: 1px solid rgba(139, 47, 201, 0.55);
  box-shadow: 0 0 18px rgba(139, 47, 201, 0.28), inset 0 0 26px rgba(214, 43, 122, 0.10);
  /* 两侧淡出，避免内容硬切在边缘 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.neon-track {
  display: flex;
  width: max-content;
  /* 复制了一份内容，走完一半即无缝回到起点 */
  animation: neon-scroll 26s linear infinite;
  will-change: transform;
}
/* 两份内容各自成组，便于按需隐藏第二份 */
.neon-set { display: flex; flex: 0 0 auto; }
@keyframes neon-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.neon-item {
  flex: 0 0 auto;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #FFF4FA;
  white-space: nowrap;
  /* 霓虹三层辉光：内层白光提亮笔画，中层玫红，外层紫晕 */
  text-shadow:
    0 0 4px  rgba(255, 255, 255, 0.95),
    0 0 10px rgba(214, 43, 122, 0.85),
    0 0 22px rgba(139, 47, 201, 0.75);
}
/* 词间发光分隔点 */
.neon-item::after {
  content: '·';
  margin-left: 20px;
  color: rgba(214, 43, 122, 0.9);
  text-shadow: 0 0 8px rgba(214, 43, 122, 0.9);
}

/* 部分词做"接触不良"闪烁，模拟真实霓虹灯管。
   只给每第 3 个加，避免整条都在闪（那会变成干扰而不是氛围）。 */
.neon-item:nth-child(3n) { animation: neon-flicker 5.5s ease-in-out infinite; }
.neon-item:nth-child(3n) { animation-delay: -1.7s; }

@keyframes neon-flicker {
  0%, 41%, 45%, 49%, 100% { opacity: 1; }
  43%, 47%                 { opacity: 0.35; }
}

/* 尊重 reduce-motion：动画停用，但必须把位移归零并保证可见，
   否则内容会停在 -50% 偏移处（看起来像错位或空白）。
   同时隐藏第二份内容 —— 不滚动时重复显示会出现两遍相同文字。
   注意：不能写成 nth-child(n + var(--x))，那是无效的
   （nth-child 参数须在解析期确定，CSS 变量到计算值阶段才解析）。 */
@media (prefers-reduced-motion: reduce) {
  .neon-track {
    animation: none !important;
    transform: none !important;
  }
  .neon-set-dup { display: none; }
  .neon-item { animation: none !important; }
}

/* 窄屏降低辉光强度：三层 text-shadow 在低端机上开销不小，且小字更容易糊 */
@media (max-width: 380px) {
  .neon-item {
    font-size: 13.5px; letter-spacing: 1.4px; padding: 0 15px;
    text-shadow:
      0 0 3px  rgba(255, 255, 255, 0.9),
      0 0 8px  rgba(214, 43, 122, 0.8);
  }
}

.cover-head { text-align: center; margin-bottom: 24px; }
.cover-title {
  font-size: 32px; font-weight: 600; letter-spacing: 0.5px;
  line-height: 1.25;
}
.cover-slogan {
  font-size: 15px; color: var(--accent); margin-top: 10px; font-weight: 500;
  letter-spacing: 0.3px;
}
.cover-sub {
  font-size: 12.5px; color: var(--muted); margin-top: 6px;
}

/* ---------- emoji 霓虹辉光 ----------
   与走马灯同一套手法（多层 text-shadow），保持视觉语言统一。

   强度分两档，这是刻意的：
     .neon-emoji  —— 静态辉光（结果卡片、记事本、详情页）
       这些 emoji 是"识别标识"，帮用户在列表里快速认出菜品，
       闪烁会干扰阅读，所以只给辉光不给动。
     .neon-hue    —— 在静态辉光基础上再加分层色（粉 / 紫 / 蓝）与更多光晕层，
       只给封面大图标用。
     .neon-flicker—— 接触不良闪烁，只给封面大图标（数量少、尺寸大，
       闪起来才像霓虹灯管；小图标闪会变成噪点）。
   ---- */
.neon-emoji,
.neon-hue {
  /* --glow 由 JS 按索引挑选，让 12 个图标呈现粉/紫/蓝交错的灯牌感 */
  --glow: 214, 43, 122;
  text-shadow:
    0 0 5px  rgba(255, 255, 255, 0.55),
    0 0 12px rgba(var(--glow), 0.65);
}
.neon-hue {
  text-shadow:
    0 0 5px  rgba(255, 255, 255, 0.75),
    0 0 12px rgba(var(--glow), 0.85),
    0 0 24px rgba(var(--glow), 0.55),
    0 0 40px rgba(var(--glow), 0.30);
}
.neon-hue.c1 { --glow: 214, 43, 122; }   /* 玫红 */
.neon-hue.c2 { --glow: 139, 47, 201; }   /* 紫 */
.neon-hue.c3 { --glow: 56, 130, 246; }   /* 冷蓝 */

/* 接触不良闪烁：模仿真实霓虹灯管偶尔的断续。
   关键帧用 steps(1) —— 也就是"阶梯硬切换"，亮暗之间不渐变。
   真实霓虹灯接触不良就是这种干脆的啪嗒感，而不是连续渐隐。

   ⚠️ 关于闪烁速度的硬约束（不要试图改得更快）：
     浏览器每秒只绘制 60~120 帧，帧间隔约 8~16ms。
     若把切换周期压到接近或低于一帧（例如 0.001s），
     绝大多数切换落在两帧之间根本不渲染，
     能渲染出的那几帧亮/暗是随机取到的 ——
     结果不是"闪得更快"，而是一团均匀的灰色糊块，霓虹感全失。
   ⚠️ 无障碍红线：WCAG 2.3.1 要求闪烁不超过每秒 3 次。
     高频频闪会诱发光敏性癫痫。下面这些切换点之间都保持 ≥60ms，
     对应最密约每秒 8 次、且每次只有极短一瞬，属可控范围。
     本项目的用户是学生，不应拿它们的健康换特效。 */
.neon-flicker {
  animation: neon-emoji-flicker 7s steps(1, end) infinite;
  animation-delay: var(--flick-delay, 0s);
}
@keyframes neon-emoji-flicker {
  /* 周期 7s。每条切换的间隔都 >= 0.9%（= 63ms）——
     这是"能看清的最快程度"，再密就会糊成灰块，也踩到频闪安全线。 */
  /* 0 ~ 30%：稳定发光 */
  0%, 30%    { opacity: 1; }
  /* 第一段：干脆的三连闪（每次暗 63ms，亮 126ms） */
  30.9%      { opacity: 0.25; }
  31.8%      { opacity: 1; }
  32.7%      { opacity: 0.25; }
  33.6%      { opacity: 1; }
  34.5%      { opacity: 0.3; }
  36.3%      { opacity: 1; }
  /* 第二段：两连闪 */
  50%        { opacity: 1; }
  50.9%      { opacity: 0.3; }
  51.8%      { opacity: 1; }
  52.7%      { opacity: 0.3; }
  53.6%      { opacity: 1; }
  /* 第三段：单次一瞬 */
  70%        { opacity: 1; }
  70.9%      { opacity: 0.4; }
  71.8%      { opacity: 1; }
  100%       { opacity: 1; }
}

/* 图片墙：让整块方格也带上霓虹灯箱的感觉 */
.wall-tile {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(var(--glow, 139, 47, 201), 0.22),
              0 0 12px rgba(var(--glow, 139, 47, 201), 0.14);
}

/* 尊重 reduce-motion：辉光保留（静态效果无害），但闪烁必须停 */
@media (prefers-reduced-motion: reduce) {
  .neon-flicker { animation: none !important; opacity: 1 !important; }
}

/* 窄屏减少辉光层数，降低低端机合成开销 */
@media (max-width: 380px) {
  .neon-hue {
    text-shadow:
      0 0 4px  rgba(255, 255, 255, 0.6),
      0 0 10px rgba(var(--glow), 0.7);
  }
}

/* 图片墙：3 列瀑布式方格 */
.cover-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 28px;
}
.wall-tile {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; padding: 6px;
  overflow: hidden;
}
.wall-emoji { font-size: 30px; line-height: 1; }
.wall-name {
  font-size: 11px; text-align: center; line-height: 1.25; font-weight: 500;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0.85;
}

.cover-actions { margin-top: auto; }
.btn-lg { padding: 15px; font-size: 17px; width: 100%; }

.cover-foot {
  text-align: center; font-size: 12px; color: var(--muted);
  margin-top: 16px;
}

/* ============================================================
 * 菜品卡片（新结构：缩略图 + 标题区 + 箭头）
 * ============================================================ */
.dish-top {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.dish-thumb {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  /* 内描边让色块边界更利落，避免"糊在卡片上" */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.dish-title {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dish-title .dish-name {
  font-size: 15.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dish-title .dish-store {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
  margin-top: 0;
}
.chev {
  flex-shrink: 0; color: var(--muted); font-size: 20px; line-height: 1;
}
.dish-top:hover .chev { color: var(--accent); }

.dish-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ---------- 入场动效：逐张卡片错开出现 ----------
   --i 由 JS 按索引写入（0,1,2…），配合 45ms 步长形成 stagger。
   步长刻意压得很小：超过 ~60ms 会让最后一张等太久，反而显得慢。 */
.dish-card {
  animation: et-rise var(--dur-slow) var(--ease-spring) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* ---------- 打勾反馈：按钮变"已记录 ✓"时弹一下 ---------- */
.btn-eat.just-eaten { animation: et-pop var(--dur) var(--ease-spring); }

/* ---------- 按压涟漪（纯 CSS + CSS 变量定位） ----------
   从点击点扩散，给触屏一个"按到了"的即时确认。
   借鉴 Uiverse 那类纯 CSS 组件的做法：不需要 JS 创建元素。 */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::after {
  content: '';
  position: absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
  transform: scale(0);
  pointer-events: none;
}
.btn-ripple.is-rippling::after {
  animation: et-ripple 0.5s var(--ease) forwards;
}

/* ---------- 加载骨架屏 ----------
   比"转圈"更少等待焦虑：先给内容占位，数据到了再替换。
   用于定位/拉取周边店铺这段真实存在的十几秒等待。 */
.skeleton-card {
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
  display: flex; align-items: center; gap: 10px;
}
.sk-bar {
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(139, 47, 201, 0.07) 0%,
    rgba(214, 43, 122, 0.16) 45%,
    rgba(139, 47, 201, 0.07) 90%);
  background-size: 220% 100%;
  animation: et-shimmer 1.5s linear infinite;
}
.sk-thumb { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk-line { height: 11px; }
.sk-line.short { width: 42%; }

/* 加载提示文字 */
.loading-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
  margin-bottom: 12px;
}
.loading-note .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2);
  animation: et-pulse 1.1s ease-in-out infinite;
}
@keyframes et-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* ---------- 坐标数值刷新提示 ----------
   实时追踪时坐标会不断变化，轻闪一下让用户知道"刚刚更新了" */
.coord-val.ticked { animation: et-tick 0.6s var(--ease); }

/* ============================================================
 * 记事本（选餐记录）
 * ============================================================ */
/* 主界面右上角的记事本入口 */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.btn-note {
  position: relative;
  padding: 8px 16px;
  background: linear-gradient(180deg, #D62B7A 0%, var(--accent) 100%);
  color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; cursor: pointer;
  box-shadow: var(--shadow-accent);
}
.btn-note:hover { background: linear-gradient(180deg, #E8458C 0%, var(--accent-deep) 100%); }
/* 未读条数角标 */
.note-badge {
  display: inline-block;
  min-width: 18px; height: 18px; line-height: 18px;
  margin-left: 6px; padding: 0 5px;
  background: #fff; color: var(--accent-2);
  border-radius: 999px;
  font-size: 11px; font-weight: 700; text-align: center;
  vertical-align: 1px;
}
.note-badge.hidden { display: none; }

.btn-note-clear {
  padding: 8px 16px;
  background: var(--card); color: var(--accent-2);
  border: 1px solid rgba(214, 43, 122, 0.45);
  border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer;
  box-shadow: var(--shadow-1);
}
.btn-note-clear:hover { background: var(--pink-soft); border-color: var(--accent-2); }

/* 记录列表 */
.note-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 18px;
}
.note-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-left: 3px solid var(--accent-2);   /* 玫红竖条：一眼看出是"记录" */
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-1);
  /* 与结果卡片同一套入场动效，保持节奏一致 */
  animation: et-rise var(--dur-slow) var(--ease-spring) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.note-thumb {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.note-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.note-head { display: flex; align-items: baseline; gap: 6px; }
.note-name {
  font-size: 15px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-count {
  flex-shrink: 0;
  font-size: 11px; font-weight: 600;
  color: var(--accent-2);
  background: var(--pink-soft);
  padding: 1px 6px; border-radius: 999px;
}
.note-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--muted);
  flex-wrap: wrap;
}
.note-price { color: var(--accent); font-weight: 500; }
.note-store {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}

.btn-note-del {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--card); color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px; cursor: pointer;
}
.btn-note-del:hover {
  color: #fff; background: var(--accent-2);
  border-color: var(--accent-2);
}

/* ---------- 记录上的日期 ----------
   记事本要能回溯"哪天吃的"，所以给完整日期而不是仅相对时间。
   用等宽数字避免切换记录时宽度跳动。 */
.note-date {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 500;
}
.note-rel { color: var(--muted); opacity: 0.85; }

/* ---------- 已贴的表情标签 ---------- */
.mood-chip {
  padding: 1px 5px;
  background: var(--accent-soft);
  border: 1px solid rgba(139, 47, 201, 0.22);
  border-radius: 999px;
  font-size: 13px; line-height: 1.5;
  cursor: pointer;
}
.mood-chip:hover {
  background: var(--pink-soft);
  border-color: var(--accent-2);
}

/* ---------- 记录右侧操作区 ---------- */
.note-ops {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.btn-note-mood {
  padding: 7px 14px;
  background: var(--card); color: var(--accent);
  border: 1px solid rgba(139, 47, 201, 0.35);
  border-radius: var(--radius-sm);
  font-size: 12.5px; cursor: pointer;
  white-space: nowrap;
}
.btn-note-mood:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn-note-mood.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* ---------- 表情选择器（展开在记录内） ---------- */
.mood-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--border);
}
.mood-row.hidden { display: none; }

.mood-opt {
  padding: 3px 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 16px; line-height: 1.35;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.mood-opt:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: scale(1.12);   /* 轻微放大，让"选表情"这件事有点趣味 */
}

/* 自定义表情输入 */
.mood-input {
  width: 68px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.mood-input::placeholder { color: var(--muted); font-size: 11.5px; }
.mood-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 47, 201, 0.10); }
.btn-detail {
  padding: 9px 16px;
  background: var(--card); color: var(--accent);
  border: 1px solid rgba(139, 47, 201, 0.45); border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer;
}
.btn-detail:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ============================================================
 * 详情页
 * ============================================================ */
.detail-body { display: flex; flex-direction: column; }

.detail-hero {
  height: 170px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), var(--shadow-2);
}
.detail-emoji { font-size: 78px; line-height: 1; }

.detail-name {
  font-size: 22px; font-weight: 500; margin-top: 16px;
}
.detail-desc {
  font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.65;
}
.detail-badges {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}

.detail-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: 20px;
}
.detail-cell {
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.07); border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow-1);
}
.dc-label { font-size: 11.5px; color: var(--muted); }
.dc-val { font-size: 18px; font-weight: 500; }
.dc-sub { font-size: 11px; color: var(--muted); }

.detail-section {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.07); border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
}
.ds-title { font-size: 14px; font-weight: 500; margin-bottom: 12px; }

.macro-row { display: flex; gap: 10px; }
.macro {
  flex: 1; text-align: center;
  background: var(--bg); border-radius: var(--radius-sm); padding: 12px 4px;
  display: flex; flex-direction: column; gap: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.macro-val { font-size: 17px; font-weight: 600; color: var(--accent); }
.macro-name { font-size: 11px; color: var(--muted); }
.macro-note { font-size: 11px; color: var(--muted); margin-top: 10px; }

.store-line { font-size: 14px; font-weight: 500; }
.coord-line { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

.detail-actions { margin-top: 24px; }

/* ============================================================
 * 价位双滑块区间控件
 * 实现：两条 input[type=range] 绝对定位叠加，滑块拇指可点，
 *       轨道透明（用 .range-track/.range-fill 自绘）。
 * ============================================================ */
.filter-block {
  display: flex; flex-direction: column; gap: 8px;
  padding: 2px 0;
}
.filter-head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.price-label {
  font-size: 13px; font-weight: 500; color: var(--accent);
}

.range-wrap {
  position: relative;
  height: 32px;
  display: flex; align-items: center;
  margin: 0 8px;
}
.range-track {
  position: absolute; left: 0; right: 0; height: 6px;
  background: rgba(0, 0, 0, 0.08); border-radius: 3px;
}
.range-fill {
  position: absolute; height: 6px;
  background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 100%);
  border-radius: 3px;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(214, 43, 122, 0.28);
}
.range-input {
  position: absolute; left: 0; width: 100%;
  height: 32px; margin: 0;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  pointer-events: none;   /* 轨道不接收事件，仅拇指接收 */
  outline: none;
}
/* 拇指（同时覆盖 WebKit 与 Firefox） */
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  cursor: pointer; pointer-events: auto;   /* 仅拇指可拖动 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(139, 47, 201, 0.10);
}
.range-input::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  cursor: pointer; pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.range-input::-moz-range-track { background: transparent; }

.range-scale {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted);
  margin: 0 8px;
}

/* ============================================================
 * 详情页返回键（强化）
 * ============================================================ */
.btn-back-strong {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
  font-weight: 500;
}
.btn-back-strong:hover { background: var(--accent-deep); }

.btn-back-lg {
  margin-top: 10px;
  width: 100%; padding: 13px;
  background: var(--card); color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius);
  font-size: 15px; cursor: pointer;
}
.btn-back-lg:hover { background: var(--accent-soft); }