:root {
  --primary: #d93829;
  --primary-hover: #b82b1d;
  --primary-light: #fff3f0;
  --accent: #f59e0b;
  --accent-blue: #2563eb;
  --success: #10b981;
  --bg: #f8fafc;
  --surface: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 置顶数据播报栏 (Sticky Live Pulse Ticker) */
.live-stats-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(12px);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 0.88rem;
}

.ticker-left {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.stat-num {
  color: #fbbf24;
  font-weight: 700;
}

.live-feed-ticker {
  white-space: nowrap;
  color: #94a3b8;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticker-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.guide-portal-link {
  color: #38bdf8;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(56, 189, 248, 0.12);
  transition: var(--transition);
}

.guide-portal-link:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #7dd3fc;
}

.lang-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.lang-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
}

/* 主导航栏 */
.main-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-badge {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #d93829, #ea580c);
  color: #fff;
  font-weight: 900;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(217, 56, 41, 0.3);
}

.logo-text h1 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.logo-text p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.commercial-funnel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  padding: 6px;
  border-radius: 40px;
}

.funnel-step {
  text-decoration: none;
  color: #475569;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  position: relative;
}

.funnel-step.active, .funnel-step:hover {
  background: #fff;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.badge-hot {
  background: #f43f5e;
  color: #fff;
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
  margin-left: 2px;
}

/* Hero 主题区域 */
.hero-section {
  text-align: center;
  padding: 22px 20px 6px;
  background: radial-gradient(circle at 50% 20%, #fff6f3 0%, #f8fafc 70%);
}

.hero-content {
  max-width: 860px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  background: #fee2e2;
  color: var(--primary);
  padding: 5px 14px;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.hero-title {
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 10px;
  color: #0f172a;
  letter-spacing: -0.6px;
}

.hero-title span {
  color: var(--primary);
  background: linear-gradient(135deg, #d93829, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 800px;
  margin: 0 auto 14px;
  line-height: 1.5;
}

.hero-metrics {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #f1e4e1;
  padding: 5px 13px;
  border-radius: 30px;
}

/* 首屏向下引导箭头（呼吸动效） */
.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px 18px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid #fed7aa;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(217, 56, 41, 0.1);
  animation: hintFloat 2.2s ease-in-out infinite;
  transition: var(--transition);
}

.scroll-hint:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.scroll-hint-arrow {
  display: inline-block;
  animation: hintBob 1.4s ease-in-out infinite;
}

@keyframes hintFloat {
  0%, 100% { transform: translateY(0); box-shadow: 0 2px 10px rgba(217, 56, 41, 0.1); }
  50% { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(217, 56, 41, 0.18); }
}

@keyframes hintBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.scroll-hint.hidden {
  display: none;
}

/* 二级分类胶囊栏 (25 Categories Sub-Pills)
   一级组那一行已撤掉（2026-09-19），相关样式（.filter-tabs / .tab-btn）一并删除 */
.sub-categories-bar {
  position: relative;   /* 悬停浮出的组名标签以它为定位基准 */
  max-width: 1280px;
  margin: 10px auto 12px;
  padding: 0 20px;
}

/* --------------------------------------------------------------------------
   分类区：每个一级组一个等宽虚线框，框内竖排该组的二级分类
   （2026-09-19 用户要求「把每组分类竖排，总共就只有 6 组，每组用同样大小的框
     虚线框起来，协调美感」）
   - 6 列等宽 + align-items:stretch → 6 个框**等高**（由最高的那组决定）
   - 框色用所属组的颜色，与里面的分类胶囊同一色系
   - 组名是列标题，所以不再需要"悬停浮出组名"的浮标签
   -------------------------------------------------------------------------- */
/* 视图标签页（2026-09-20 晚）
   用户要求「全部 24 个分类改成按分类浏览，它与按城市浏览应该是两个标签页：
   点了按城市浏览，按分类浏览的 24 个分类就应该消失，反之亦然」。
   形态 = 分段控件（一个圆角外框，内部两块，选中块填主色），
   比两个各自独立的按钮更能表达"二选一"。 */
.cat-all-row {
  margin-bottom: 8px;
}

.view-tabs {
  display: inline-flex;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.view-tab {
  padding: 8px 16px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}

.view-tab + .view-tab { border-left: 1px solid #e2e8f0; }
.view-tab:hover { background: #f8fafc; color: #334155; }
.view-tab.active,
.view-tab.active:hover { background: var(--primary); color: #fff; }

/* ============================================================
   二级分类区：胶囊横排（2026-09-20 第四次改造，当前形态）
   ============================================================
   用户给参考图并指定：「按这样的布局吧 —— 横向胶囊、两行铺开，
   胶囊里带名称和条目数；剩下的项放第三行，平时折叠隐藏，点击后展开；
   分组用颜色区分」。

   与上一版（虚线方框 + 组内竖排）的差别：
     · 形态回到**胶囊**，行内用 flex 平铺、可换行
     · 每个胶囊显示「序号 + 名称 + 条目数」三段
     · 第三行默认折叠（见 .cat-pill-fold），点按钮展开
     · 分组靠**胶囊的边框与文字颜色**区分（--grp 来自所属一级组）

   ⚠️ 分组不再有外框：一级组已不显示组名，若再套一层方框会与胶囊的
      圆角语言冲突，而且两行胶囊本来就靠颜色分得清。 */
.cat-groups {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 6px 0;
}

/* 城市视图下整块隐藏（由 syncViewTabs 给 #categoryPills 设 hidden）
   ⚠️ 必须显式写这条：`.cat-groups { display: flex }` 会把 [hidden] 的 UA 样式
   （display:none）盖掉 —— 少写这一条，设了 hidden 也照样显示。 */
.cat-groups[hidden] {
  display: none;
}

/* 一行胶囊。flex + wrap：宽屏一行铺满，窄屏自动折行，
   不需要为每种屏宽写死列数。 */
.cat-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* 胶囊本体。三段内容：序号 / 名称 / 条目数 */
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px 6px 9px;
  border: 1px solid var(--grp, #cbd5e1);
  border-radius: 999px;
  background: #fff;
  color: var(--grp, #475569);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}

.cat-pill:hover {
  background: var(--grp-soft, #f1f5f9);
}

/* 序号：组色的实心小圆片，白字 */
.cat-pill .pill-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--grp, #64748b);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
}

.cat-pill .cg-label {
  white-space: nowrap;
}

/* 条目数：弱化的灰色小字，与名称拉开层次 */
.cat-pill .pill-count {
  color: var(--grp, #94a3b8);
  opacity: .72;
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 选中态：整颗胶囊填成组色、字反白（与参考图里「历史古迹 150」的实心红一致） */
.cat-pill.active {
  background: var(--grp, #1e293b);
  border-color: var(--grp, #1e293b);
  color: #fff;
}

.cat-pill.active .pill-index {
  background: rgba(255, 255, 255, .26);
  color: #fff;
}

.cat-pill.active .pill-count {
  color: rgba(255, 255, 255, .82);
  opacity: 1;
}

/* ---------- 第三行折叠区 ---------- */
/* 用 max-height 收起而不是 display:none —— 用户选「收起时留空位」，
   display:none 会让下方卡片紧贴上移，与预期不符。
   max-height 的具体值由 JS 按内容 scrollHeight 设置。 */
.cat-pill-fold {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}

.cat-pill-fold-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 1px;   /* 避免首行胶囊的描边被 overflow 裁掉 */
}

/* 展开按钮：居中、低调的文字按钮 */
.cat-pill-more {
  display: flex;
  justify-content: center;
  padding: 2px 0 0;
}

.cat-pill-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.cat-pill-more-btn:hover {
  border-color: #94a3b8;
  color: #334155;
}

.cat-pill-more-btn .cp-more-arrow {
  font-size: 0.7rem;
  line-height: 1;
}

/* 手机：胶囊缩小一档，仍然横排换行。
   参考图在桌面是 8 列，手机上要 8 列会窄到读不下，所以这里不做列数对齐，
   交给 flex-wrap 自然折行。 */
@media (max-width: 768px) {
  .cat-groups {
    gap: 7px;
  }
  .cat-pill-row {
    gap: 6px;
  }
  .cat-pill {
    padding: 5px 11px 5px 8px;
    gap: 5px;
    font-size: 0.76rem;
  }
  .cat-pill .pill-index {
    min-width: 17px;
    height: 17px;
    font-size: 0.64rem;
  }
  .cat-pill .pill-count {
    font-size: 0.7rem;
  }
}


/* 三级城市筛选行
   ⚠️ 曾经是 overflow-x: auto + 隐藏滚动条 —— 桌面端没有横向滚动手势也没有滚动指示，
      25 个二级分类里只有 8 个够得到，后面的既看不到也点不了。
      改为换行 + 折叠：竖向滚动是所有人的本能，手机上尤其自然。 */
.sub-pills {
  position: relative;   /* .is-collapsed::after 的底部渐隐要拿它当定位基准 */
}

.sub-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0;
}

/* 超过设定行数时由 JS 加上 .is-collapsed 并给出像素高度 */
.sub-pills.is-collapsed {
  position: relative;
  overflow: hidden;
}

/* 折叠时的底部渐隐，暗示"下面还有" */
.sub-pills.is-collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0), var(--bg, #f8fafc) 78%);
  pointer-events: none;
}

/* 折叠按钮在容器外面、紧跟其后（不是容器内的一个项），所以要横向对齐容器 */
.pills-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  transition: var(--transition);
}

.pills-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pills-toggle .pt-count {
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
  font-weight: 600;
}

.pills-toggle:hover .pt-count {
  color: var(--primary);
}

.pills-toggle .pt-arrow {
  transition: transform 0.2s ease;
}

.pills-toggle.is-expanded .pt-arrow {
  transform: rotate(180deg);
}

.sub-pill-btn {
  /* 与所属一级组同色：一级组不编号，靠颜色看出"这个分类属于哪个集合" */
  background: var(--grp-soft, #f1f5f9);
  border: 1px solid transparent;
  color: var(--grp, #475569);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.sub-pill-btn:hover {
  border-color: var(--grp, #cbd5e1);
}

.sub-pill-btn.active {
  background: var(--grp, #1e293b);
  color: #fff;
}

/* tier（S/A/B/C）徽章的样式已随分类区改版删除：
   分类区改成 6 个竖排虚线框后，框内宽度被 6 等分，徽章会把名称挤到截断，
   所以从分类胶囊里撤掉了。热度分级改在详情页面包屑里显示（detail.js 的 .detail-chip），
   数据没丢、信息也没丢。 */

/* --------------------------------------------------------------------------
   二级分类序号（1…25）与三级城市序号（1.1…）
   序号放在最左侧、等宽数字、固定胶囊宽度，方便在 25 个分类里竖向扫读定位
   一级组不编号，所以没有 .tab-index
   -------------------------------------------------------------------------- */
.pill-index {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  font-size: 0.66rem;
  padding: 3px 6px;
  min-width: 26px;      /* 1 ~ 25 等宽，避免数字长短导致胶囊抖动 */
  text-align: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
}

/* 选中态：底色换成半透明白，文字转白 */
.sub-pill-btn.active .pill-index {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

/* --------------------------------------------------------------------------
   城市分组带（2026-09-19 新增）
   用户要求：「城市这个分类，也可以不展示胶囊按钮，用虚线框框住该城市的所有项目，
             然后在虚线框左侧或者右侧贴标签"北京"」
            +「一项的就不要虚线框呀」
   → 取消"城市胶囊筛选"，改为在卡片区直接按城市分组：
       · ≥2 项的城市 → 一条虚线带，左侧竖条标签（编号 / 城市名 / 项数）
       · =1 项的城市 → 不套框，平铺（见 .grid-flat）
   带内卡片网格的列宽规则与 .wishlist-grid 完全一致，所以框内框外的卡片长得一样。
   -------------------------------------------------------------------------- */
.city-band {
  display: flex;
  align-items: stretch;
  margin-bottom: 20px;
  border: 1px dashed var(--grp, #cbd5e1);
  border-radius: var(--radius-lg);
  background: var(--grp-soft, #f8fafc);
  /* 深链滚到本条时留出置顶状态栏的高度，否则 scrollIntoView 会把带子顶到 y=0、
     被状态栏盖住整个标签（实测 top=25px，正好压在栏下） */
  scroll-margin-top: 104px;
}

/* 左侧标签竖条。
   sticky 是必须的：北京 11 项 = 4 行卡片，带子接近 1600px 高，
   不 sticky 的话滚到中段就不知道"这是哪个城市"了。 */
.city-band-label {
  /* 88px（原 74px）：美食分类的标签要放「4.1 · 川菜」这种更长的编号行，74px 会被挤断 */
  flex: 0 0 88px;
  align-self: flex-start;
  position: sticky;
  top: 84px;                    /* 让开置顶状态栏 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 18px 6px 14px;
  border-right: 1px dashed var(--grp, #cbd5e1);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: rgba(255, 255, 255, 0.66);
  color: var(--grp, #475569);
  text-align: center;
}

.city-band-label .cb-no {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
  padding: 3px 7px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--grp-soft, #e2e8f0);
  text-align: center;
  max-width: 100%;
  word-break: break-word;
}

/* 「代表城市」四个字：说明这个城市是**该菜系的代表地**，
   不是"只有在这里才能吃到"。用户原话：「并不是非要去那个城市才能吃到，比如北京也能吃川菜」。 */
.city-band-label .cb-rep {
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: #94a3b8;
  letter-spacing: 0.01em;
}

.city-band-label .cb-name {
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.24;
  word-break: break-word;
}

.city-band-label .cb-count {
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.2;
  color: #94a3b8;
}

/* 带内卡片网格：列宽规则与 .wishlist-grid 一致（框内框外卡片同宽） */
.city-band-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* 只有 1 项的城市：不套框，攒在一起平铺，三个一行铺满（见 js 的 buildCityBlocks） */
.grid-flat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

/* 单项城市那一堆上方的极轻说明 + 一条点线。
   没有它的话用户会以为"为什么这两张卡没被框住"是渲染坏了。 */
.city-loose-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #94a3b8;
}

.city-loose-hint::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: repeating-linear-gradient(to right, #cbd5e1 0 5px, transparent 5px 11px);
}

/* ---- 渐进展开（2026-09-19 用户要求「页面太长，可以有多个折叠，用户下拉后逐步展开」）----
   ① 框内折叠：默认只露出前 6 张（约两行），其余用 nth-child 隐藏。
      用 CSS 隐藏而不是"干脆不渲染"，是为了不重算布局、也不会丢掉已绑好的事件。 */
.city-band-body.is-clamped > .wish-card:nth-child(n + 7) {
  display: none;
}

/* 「展开全部」那一行：跨满整个网格宽度 */
.band-more {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 0 2px;
}

.band-toggle {
  appearance: none;
  border: 1px dashed var(--grp, #cbd5e1);
  background: #fff;
  color: var(--grp, #475569);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.band-toggle:hover { background: var(--grp-soft, #f1f5f9); }
.band-toggle:active { transform: translateY(1px); }

.band-more-hint {
  font-size: 0.72rem;
  color: #94a3b8;
}

/* ② 整页分批用的哨兵：进入视口就续下一批，本身不占视觉 */
.grid-sentinel {
  height: 1px;
  margin-top: 8px;
}
.grid-sentinel[hidden] { display: none; }

/* 深链 ?cat=…&city=… 落点的高亮（JS 2.6 秒后移除） */
.city-band.is-focus {
  border-style: solid;
  box-shadow: 0 0 0 3px var(--grp-soft, #e2e8f0), 0 12px 30px rgba(15, 23, 42, 0.10);
}

.wish-card.is-focus {
  box-shadow: 0 0 0 3px #fcd34d, 0 12px 30px rgba(15, 23, 42, 0.12);
}

/* 手机：标签改横排在顶部。
   左侧竖条会吃掉 74px（350px 屏宽的 21%），卡片会被压到 276px ——
   比设计最小列宽 320px 还窄，宁可变位置也不压窄卡片。 */
@media (max-width: 768px) {
  .city-band {
    flex-direction: column;
    margin-bottom: 16px;
  }

  .city-band-label {
    flex: none;
    align-self: stretch;
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px dashed var(--grp, #cbd5e1);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    text-align: left;
  }

  /* 手机上标签是横排，「代表城市」缩到最小并贴紧后面的城市名，
     否则 350px 宽的屏幕上「4.1 · 川菜 代表城市 成都 28 项」会挤成一团 */
  .city-band-label .cb-rep {
    font-size: 0.56rem;
    margin-right: -4px;
  }

  .city-band-label .cb-name {
    flex: 1 1 auto;
    font-size: 0.84rem;
  }

  .city-band-body {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 12px;
  }

  .grid-flat {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 网格上方的序号面包屑（一级组无编号，只显示名称并用它的颜色区分） */
.grid-crumb {
  display: block;
  width: 100%;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.grid-crumb .crumb-part {
  color: var(--grp, var(--primary));
}

.grid-crumb .crumb-sep {
  color: #94a3b8;
  margin: 0 5px;
  font-weight: 400;
}

/* 卡片上的四级景点序号（1.1.1.1） */
.card-no {
  flex: 0 0 auto;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
}

/* ==========================================================================
   景点详情页 (detail.html)
   ========================================================================== */
.detail-body { background: var(--bg, #f8fafc); }

.detail-back {
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
}
.detail-back:hover { color: #fff; text-decoration: underline; }

.detail-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}

/* 面包屑：四层序号路径，前三级可点回列表对应筛选 */
.detail-crumb {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
}
.detail-crumb a { color: var(--grp, var(--primary)); text-decoration: none; }
/* 一级组只是"集合"、不再是可筛选维度，所以只作为上下文文字（不可点） */
.detail-crumb .crumb-plain { color: var(--grp, #94a3b8); cursor: default; }
.detail-crumb a:hover { text-decoration: underline; }
.detail-crumb .crumb-sep { color: #94a3b8; margin: 0 6px; }
.detail-crumb .crumb-here { color: #0f172a; background: #fef08a; padding: 1px 7px; border-radius: 6px; }

.detail-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #e2e8f0;
  aspect-ratio: 16 / 9;
}
.detail-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-hero-empty { width: 100%; height: 100%; }
.detail-hero-tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 20px; text-transform: uppercase;
}
.detail-credit { font-size: 0.7rem; color: #94a3b8; margin: 6px 0 16px; }

.detail-title { font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 800; line-height: 1.35; margin: 0 0 6px; color: #0f172a; }
.detail-subtitle { font-size: 0.9rem; color: #64748b; margin: 0 0 12px; }

.detail-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.detail-chip {
  font-size: 0.75rem; font-weight: 600; color: #475569;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  padding: 3px 10px; border-radius: 20px;
}

.detail-hook {
  font-size: 0.95rem; line-height: 1.75; color: #334155;
  background: #fff; border-left: 3px solid var(--primary);
  padding: 12px 16px; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 0 0 18px;
}

.detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.detail-fact {
  background: #fff; border: 1px solid #e2e8f0; border-radius: var(--radius-md);
  padding: 12px 14px;
}
.detail-fact span { display: block; font-size: 0.72rem; color: #64748b; margin-bottom: 4px; }
.detail-fact b { font-size: 0.95rem; color: #0f172a; }

.detail-add {
  width: 100%;
  padding: 13px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 24px;
}
.detail-add.is-added { background: #16a34a; border-color: #16a34a; }

.detail-section { margin-bottom: 26px; }
.detail-section h2 {
  font-size: 1rem; font-weight: 800; color: #0f172a;
  margin: 0 0 12px; padding-left: 10px;
  border-left: 3px solid var(--primary);
  line-height: 1.4;
}
.detail-prose p { font-size: 0.93rem; line-height: 1.85; color: #334155; margin: 0 0 12px; }
.detail-prose p:last-child { margin-bottom: 0; }
.detail-list { margin: 0; padding-left: 20px; }
.detail-list li { font-size: 0.92rem; line-height: 1.9; color: #334155; }

/* 时效信息块：视觉上明确区别于稳定内容 */
.detail-ref {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.detail-ref h2 { border-left-color: #d97706; margin-bottom: 8px; }
.detail-ref-warn { font-size: 0.78rem; color: #92400e; margin: 0 0 12px; }
.detail-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.detail-ref-grid span { display: block; font-size: 0.72rem; color: #a16207; margin-bottom: 3px; }
.detail-ref-grid b { font-size: 0.9rem; color: #422006; font-weight: 700; }
.detail-ref-date { font-size: 0.72rem; color: #a16207; margin: 12px 0 0; }

.detail-empty { text-align: center; padding: 60px 20px; }
.detail-empty h2 { font-size: 1.2rem; margin: 0 0 8px; }
.detail-empty p { color: #64748b; margin: 0 0 20px; }
.detail-cta { display: inline-block; text-decoration: none; }

/* 同城其他景点 */
.detail-siblings { background: #fff; border-top: 1px solid #e2e8f0; padding: 28px 20px; }
.detail-siblings-inner { max-width: 860px; margin: 0 auto; }
.detail-siblings h2 { font-size: 1rem; font-weight: 800; margin: 0 0 14px; color: #0f172a; }
.detail-sib-count { font-size: 0.76rem; font-weight: 600; color: #94a3b8; margin-left: 6px; }
.detail-sib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.detail-sib-card {
  display: block; text-decoration: none;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--radius-md);
  padding: 12px 14px; transition: var(--transition);
}
.detail-sib-card:hover { border-color: var(--primary); background: #fff; }
.detail-sib-no {
  display: inline-block; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.66rem; font-weight: 700; padding: 1px 6px; border-radius: 5px;
  background: #e2e8f0; color: #475569; margin-bottom: 6px;
}
.detail-sib-title { display: block; font-size: 0.88rem; font-weight: 700; color: #0f172a; line-height: 1.45; margin-bottom: 5px; }
.detail-sib-dest { display: block; font-size: 0.72rem; color: #64748b; }

/* 加载骨架 */
.detail-loading { padding-top: 10px; }
.detail-skeleton { background: #e2e8f0; border-radius: var(--radius-md); animation: skeletonShimmer 1.4s ease-in-out infinite; }
.detail-skeleton-hero { aspect-ratio: 16 / 9; margin-bottom: 20px; }
.detail-skeleton-line { height: 16px; margin-bottom: 10px; }
.detail-skeleton-line.short { width: 55%; }

/* 卡片新增「查看详情」入口 */
.card-more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.76rem; font-weight: 700; color: var(--primary);
  text-decoration: none; padding: 4px 0;
}
.card-more:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .detail-container { padding: 14px 16px 30px; }
  .detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .detail-ref-grid { grid-template-columns: 1fr; }
  .detail-crumb { font-size: 0.76rem; }
  .detail-sib-grid { grid-template-columns: 1fr; }
}

/* 自定义心愿输入横幅 (Custom Wish Input Banner) */
.custom-wish-banner {
  max-width: 1280px;
  margin: 0 auto 14px;
  padding: 0 20px;
}

.custom-wish-inner {
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-md);
  padding: 11px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}

.banner-icon {
  font-size: 1.5rem;
}

.banner-text {
  display: flex;
  flex-direction: column;
}

.banner-text strong {
  font-size: 0.95rem;
  color: #1e293b;
}

.banner-text span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.banner-input-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 520px;
}

.custom-input {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  outline: none;
}

.custom-input:focus {
  border-color: var(--primary);
}

.btn-add-custom {
  background: #1e293b;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.btn-add-custom:hover {
  background: var(--primary);
}

/* 愿望卡片网格 */
.wishlist-container {
  max-width: 1280px;
  margin: 0 auto 80px;
  padding: 0 20px;
}

/* 网格状态条：明确告知卡片数量与可点选 */
.grid-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

/* ---------- 列表工具条控件（2026-09-20 新增）---------- */

/* 排序下拉：分类内细项排序（默认编号 / 名称 / 热度） */
.grid-sort-select {
  font: inherit;
  font-size: 0.78rem;
  padding: 5px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  max-width: 140px;
}
.grid-sort-select:focus { outline: none; border-color: var(--primary, #A32D2D); }

/* 搜索框（2026-09-20 新增）：1000+ 条内容主要靠搜索定位 */
.grid-search-input {
  flex: 1 1 240px;
  min-width: 180px;
  font: inherit;
  font-size: 0.82rem;
  padding: 6px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  background: #fff;
  color: #334155;
}
.grid-search-input:focus { outline: none; border-color: var(--primary, #A32D2D); }

/* 搜索无结果：给明确反馈（同时后台会记下这个词） */
.search-empty { padding: 60px 20px; text-align: center; }
.search-empty p { font-size: 0.95rem; font-weight: 600; color: #334155; margin: 0 0 8px; }
.search-empty small { font-size: 0.8rem; color: #94a3b8; line-height: 1.7; }

/* 「搜索 + 分类」叠加后无结果的两条出路（2026-09-21 方案 A）：
   「在整个网站找」／「清空搜索词」—— 两者都是"帮你退一步"的动作，所以做成等权并列。 */
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.btn-empty-action {
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 9px 18px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm);
  background: #fff;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}

.btn-empty-action:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: var(--primary);
}

/* 隐藏图片开关：把卡片压成纯文字行，方便快速滚到列表底部 */
.img-toggle-btn {
  font: inherit;
  font-size: 0.78rem;
  padding: 5px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.img-toggle-btn:hover { border-color: #94a3b8; color: #334155; }
.img-toggle-btn[aria-pressed="true"] {
  background: #1e293b;
  border-color: #1e293b;
  color: #fff;
}

/* 纯文字版（2026-09-20）：只藏图片区，标题/位置/标签等信息**全部保留** ——
   目的不是"省信息"，而是让卡片变矮、滚动距离缩短，一屏能扫到更多条目。
   配合 <img loading="lazy">，纯文字版下图片基本不会被请求。 */
body.hide-images .card-img-wrap { display: none; }
body.hide-images .wishlist-grid { gap: 7px; }
body.hide-images .wish-card { padding: 10px 12px 11px; }

/* 单城市视图的卡片容器 —— 2026-09-20 修：
   ⚠️ 起初只给了 `class="wishlist-grid city-grid"`，而 `.wishlist-grid` 其实是 display:block
      （主网格的列规则由 .city-band-body / .grid-flat 提供），
      结果卡片被拉成 1240×447 的巨卡。
   ⚠️ 另外单写 `.city-grid` 也不行 —— 它与 `.wishlist-grid` 同优先级，而后者定义在文件更后面，
      会反过来把 display 盖回 block。所以这里用**双类选择器**提高优先级。 */
.wishlist-grid.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* ---------- 「按城市浏览」（2026-09-20 新增）---------- */
.city-browse-wrap { display: block; }

.city-view-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 2px 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.city-view-title { font-size: 1.02rem; font-weight: 700; color: #1e293b; }
.city-view-count { font-size: 0.8rem; color: #64748b; }
.city-back-btn {
  font: inherit;
  font-size: 0.78rem;
  padding: 5px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  background: #fff;
  color: #475569;
  cursor: pointer;
}
.city-back-btn:hover { border-color: #94a3b8; color: #334155; }

/* 城市清单：自适应网格，每个城市一个胶囊卡 + 条目数 */
.city-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}
/* 城市等级图例（2026-09-20 新增）
   颜色必须配上说明才成立 —— 7 档色块摆在那儿，用户得知道红色是超一线、紫色是乡镇。
   只列 7 档；「不分档」的灰（全国通用 / 京沪沿线）不占格子。 */
.city-tier-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: #fbfcfd;
}

/* 图例项 = 筛选按钮（2026-09-21 从"纯说明"升级为"可点筛选"）：
   平时是"色点 + 灰字"的轻量说明，hover 浮出浅底，选中时画该档色的边框与浅底。
   ⚠️ 它现在是真的 <button>，UA 默认值（字体/边框/背景）必须显式复位，
      否则字体会掉回系统默认字体，和整站不一致。 */
.ctl-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.74rem;
  color: #64748b;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}

.ctl-item:hover { background: #f1f5f9; color: #334155; }

.ctl-item.active {
  background: var(--tier-s, #f1f5f9);
  border-color: var(--tier-c, #cbd5e1);
  color: #1e293b;
  font-weight: 700;
}

.ctl-item i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 auto;
}

/* 图例前的小标签（"按等级筛选："） */
.ctl-hint {
  align-self: center;
  font-size: 0.72rem;
  color: #94a3b8;
  white-space: nowrap;
}

.city-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  /* 边框 = 城市等级色（--tier 由 renderCityBrowse 注入）；
     未注入时回退到中性边框，保证任何调用场景都不会出现"透明边框" */
  border: 1px solid var(--tier, var(--border, #e2e8f0));
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.84rem;
  color: #334155;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.city-card:hover {
  border-color: var(--tier, #94a3b8);
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* 圆圈序号（2026-09-20）：CSS 画圆而不是用 ①②③ ——
   Unicode 带圈数字只到 ⑳，而城市有 150+ 个，且部分字体缺字形。
   min-width + padding 让 1-2 位是正圆、3 位自动变胶囊，不会挤成椭圆。 */
/* 圆片里现在是**城市字母码**（BJ / SUZ / XGLL），不再是 1~999 的序号：
   · min-width 保持 21px → 2 位码是正圆，3~4 位自然拉成小胶囊，不会挤成椭圆
   · 换等宽字体 + 收紧字距，让 BJ / SUZ / XGLL 三种长度看起来是一套东西
   · 去掉 tabular-nums（那是给数字对齐用的），字号略降一档补回字母的视觉重量 */
.city-card .cc-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  /* 圆片底 = 等级浅色，字母 = 等级主色（2026-09-20 城市化等级配色） */
  background: var(--tier-soft, #eef2f7);
  color: var(--tier, #64748b);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.city-card:hover .cc-no { background: var(--tier, #e2e8f0); color: #fff; }

.city-card .cc-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.city-card .cc-count {
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-weight: 600;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

/* 单城市视图：按分类分块展示 */
.city-cat-block { margin-bottom: 22px; }
.city-cat-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #334155;
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--primary, #A32D2D);
  display: flex;
  align-items: center;
  gap: 8px;
}
.city-cat-title em {
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 600;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 1px 7px;
  border-radius: 999px;
}

.grid-count-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e293b;
}

.grid-tier-legend {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* 卡片区外层容器。2026-09-19 起它**不再自己排网格**，只是把一串"块"竖着摞起来：
     块 = 一条城市分组带（.city-band）或一堆不套框的卡片（.grid-flat）
   网格职责下放给各块自己（否则每条城市带都会变成 320px 的网格项、三列并排挤在一起）。
   ⚠️ 骨架屏与卡片都必须包在 .grid-flat 里，不能直接放进来。 */
.wishlist-grid {
  display: block;
}

/* 骨架屏占位卡（加载期间显示，杜绝空白误判） */
.card-skeleton {
  height: 380px;
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, #eef2f7 30%, #f8fafc 50%, #eef2f7 70%);
  background-size: 220% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border: 1px solid #eef2f7;
}

@keyframes skeletonShimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}

/* 加载失败 / 空筛选状态（保证任何情况下都有可见反馈） */
.grid-error-state,
.grid-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 48px 24px;
  background: #fff;
  border: 1px dashed #e2e8f0;
  border-radius: var(--radius-lg);
}

.grid-error-text {
  font-size: 0.98rem;
  font-weight: 600;
  color: #ef4444;
}

.grid-empty-state p {
  font-size: 1rem;
  color: var(--text-muted);
}

.wish-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  position: relative;
  cursor: pointer;
}

.wish-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: #fed7aa;
}

.wish-card.selected {
  border-color: var(--primary);
  background: #fffcfb;
  box-shadow: 0 6px 20px rgba(217, 56, 41, 0.15);
}

.card-img-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #e2e8f0;
  /* 无配图占位层的渐变参数，由 tone-* 类与内联 --fb-angle 覆盖 */
  --fb-angle: 135deg;
  --fb-c1: #e8894f;
  --fb-c2: #c74a33;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* 图片加载失败：隐藏 img，露出下方占位层 */
.card-img.img-failed {
  display: none;
}

/* ==========================================================================
   无配图占位层（后台上传图片前的正式观感，不是"缺图报错"）
   设计要点：整屏可能连续出现 60 张占位卡，若同色同图会极度同质化，
   因此由 JS 按 item id 稳定散列出：渐变角度、色相微偏移（内联变量覆盖）、
   水印位置与旋转角，并叠加一层极淡的菱形格纹理制造"设计过的面板"质感。
   .tone-* 仅作为 JS 未注入变量时的兜底默认值。
   ========================================================================== */
.card-img-wrap.tone-warm { --fb-c1: #e8894f; --fb-c2: #c74a33; }
.card-img-wrap.tone-slate { --fb-c1: #8593aa; --fb-c2: #4f5d75; }

.fb-layer {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 菱形格纹理：呼应中式窗棂，给纯色块加质地 */
.fb-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.075) 0 2px, transparent 2px 15px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 15px);
  pointer-events: none;
}

.card-img-wrap.no-img {
  background-image: linear-gradient(var(--fb-angle), var(--fb-c1) 0%, var(--fb-c2) 100%);
}

.card-img-wrap.no-img .fb-layer {
  display: block;
}

/* 超大 emoji 水印：纯白幽灵剪影，给色块制造层次与变化 */
.fb-watermark {
  position: absolute;
  font-size: 9.5rem;
  line-height: 1;
  opacity: 0.13;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.fb-watermark.wm-br { right: -20px; bottom: -36px; }
.fb-watermark.wm-tr { right: -20px; top: -30px; }
.fb-watermark.wm-bl { left: -26px; bottom: -36px; }
.fb-watermark.wm-tl { left: -26px; top: -30px; }

/* 居中主 emoji：该卡的视觉锚点 */
.fb-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-size: 3.5rem;
  line-height: 1;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28));
}

/* 左下角分类名：让占位卡也能读出"这是什么类目" */
.fb-cat {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

/* 内描边：让占位块看起来是"设计好的面板"而非渲染失败 */
.card-img-wrap.no-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: inherit;
  pointer-events: none;
}

.wish-card:hover .card-img {
  transform: scale(1.05);
}

/* 图片署名：CC BY / CC BY-SA 等许可要求标注来源与作者 */
.card-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 10px 6px;
  font-size: 0.62rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* 占位层已有左下角分类名，避免与署名重叠 */
.card-img-wrap.no-img .card-credit {
  display: none;
}

.card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* 住宿甄选内部的档位徽标（2026-09-19 新增）：住宿热度榜 / 奢华酒店 / 性价比酒店。
   放在图片右上角，与左上角的 .card-tag 对称，但用浅底深字做次级层级，
   避免与主标签抢注意力。其它分类没有 band_* 字段 → 前端根本不渲染这个元素。
   ⚠️ 不做 text-transform: uppercase（英文档名 "Top Areas to Stay" 全大写太难读）。 */
.card-band {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.93);
  color: #334155;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}

.card-band.cb-top { color: #0f6e56; }
.card-band.cb-lux { color: #854f0b; }
.card-band.cb-value { color: #534ab7; }

/* 权威等级徽章（2026-09-21 新增）：世界文化遗产 / 5A / 国家重点文保 …
   位置：左上角、card-tag 正下方（tag 是 top:12 + 约 22px 高 → 这里 46px 起），
        这样不和右上角的档位徽标抢位置。
   配色用「深琥珀底 + 浅金字」：它是**外部权威名录**给的资质，视觉上要跟
   我们自己写的 tag（深灰底白字）区分开。
   它也是"按权威度排序"这件事的**可见理由** —— 否则用户只看到顺序变了，不知道为什么。 */
.card-grade {
  position: absolute;
  top: 46px;
  left: 12px;
  background: rgba(120, 53, 15, 0.92);
  backdrop-filter: blur(8px);
  color: #fde68a;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* 窄屏：卡片宽度不足时右上角会与左上角的主标签相撞，改成在主标签下面另起一行 */
@media (max-width: 768px) {
  .card-band {
    top: 38px;
    left: 10px;
    right: auto;
    font-size: 0.62rem;
    padding: 2px 7px;
  }
}

.card-selection-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: transparent;
  transition: var(--transition);
}

.wish-card.selected .card-selection-check {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-location {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

/* 城市名可能较长，序号胶囊固定不压缩，地名按需省略 */
.card-location .card-dest {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-title {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
  margin-bottom: 10px;
  text-decoration: none;
}

/* 标题是详情页链接：hover 时才给下划线，平时保持标题观感 */
.card-title:hover {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.card-hook {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

.card-est-cost {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
}

.btn-toggle-wish {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #334155;
}

.wish-card.selected .btn-toggle-wish {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* 底部悬浮心愿篮 (Floating Action Bar) */
.floating-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-action-bar.visible {
  transform: translateY(0);
}

.bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.selected-summary {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 2026-09-20 晚：从 <span> 改成 <button> —— 点它打开「我的心愿单」面板（查看/删除）。
   button 的 UA 默认值（字体、边框、光标）必须显式复位，否则字体会掉回系统默认。 */
.selected-count-badge {
  background: var(--primary);
  color: #fff;
  padding: 6px 14px;
  border: none;
  border-radius: 20px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}

.selected-count-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 56, 41, 0.32);
}

.selected-count-badge:active { transform: translateY(0); }

.hint-text {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-secondary {
  background: #f1f5f9;
  border: 1px solid var(--border);
  color: #475569;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: #e2e8f0;
}

.btn-primary {
  background: linear-gradient(135deg, #d93829, #ea580c);
  border: none;
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(217, 56, 41, 0.3);
  transition: var(--transition);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(217, 56, 41, 0.4);
}

/* 模态弹窗基础样式 */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background: #fff;
  border-radius: var(--radius-lg);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  width: 100%;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #64748b;
  transition: var(--transition);
}

.modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* AI 规划全景面板 (Plan Modal Card) */
.plan-modal-card {
  max-width: 980px;
  padding: 32px;
}

.plan-badge {
  display: inline-block;
  background: #ecfdf5;
  color: #059669;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.plan-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0f172a;
}

.plan-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 4px;
}

.plan-controls-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8fafc;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin: 24px 0;
  flex-wrap: wrap;
}

.control-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.control-item label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
}

.plan-select {
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  outline: none;
}

.btn-refresh-plan {
  margin-left: auto;
  background: #0f172a;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-refresh-plan:hover {
  background: var(--primary);
}

/* 规划内容展示容器 */
.plan-content-body {
  margin-bottom: 28px;
}

.plan-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e293b;
}

/* 顺路动线流向 */
.route-flow-container {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0;
  margin-bottom: 24px;
}

.route-city-card {
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  min-width: 140px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.route-city-card.active {
  border-color: var(--primary);
  background: #fffcfb;
}

.city-order-badge {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--primary);
}

.city-name-text {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.route-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #94a3b8;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* 双币预算网格 */
.budget-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.budget-metric-card {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.budget-metric-card.highlight {
  background: #fff5f3;
  border-color: #fecdd3;
}

.budget-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.budget-usd {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  margin-top: 4px;
}

.budget-rmb {
  font-size: 0.95rem;
  font-weight: 700;
  color: #475569;
}

/* 决策双通道分流 */
.decision-channels-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  border-top: 2px dashed #e2e8f0;
  padding-top: 24px;
}

.channel-card {
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.channel-card.diy-channel {
  background: #f8fafc;
  border: 1px solid var(--border);
}

.channel-card.guide-channel {
  background: linear-gradient(135deg, #fff7ed, #fff1f2);
  border: 2px solid #fed7aa;
}

.channel-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  align-self: flex-start;
  background: #e2e8f0;
  color: #475569;
}

.channel-badge.highlight {
  background: var(--primary);
  color: #fff;
}

.channel-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.channel-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
}

.btn-channel-secondary {
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-channel-secondary:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.btn-channel-primary {
  background: linear-gradient(135deg, #d93829, #ea580c);
  border: none;
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(217, 56, 41, 0.25);
}

.btn-channel-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(217, 56, 41, 0.35);
}

/* 导游预约表单弹窗 (Booking Modal Card) */
.booking-modal-card {
  max-width: 580px;
  padding: 32px;
}

.booking-lock-badge {
  display: inline-block;
  background: #ecfdf5;
  color: #059669;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.booking-modal-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
}

.booking-modal-header p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.booking-form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

.form-input, .form-select, .form-textarea {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  outline: none;
  font-family: inherit;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(217, 56, 41, 0.1);
}

.deposit-guarantee-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 4px;
}

.deposit-amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 1.05rem;
}

.price-val {
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: 800;
}

.guarantee-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guarantee-points li {
  font-size: 0.82rem;
  color: #475569;
}

.btn-submit-deposit {
  width: 100%;
  justify-content: center;
  padding: 14px;
  font-size: 1rem;
  margin-top: 6px;
}

/* 预订凭证通知 (Receipt Card) */
.receipt-card {
  max-width: 480px;
  padding: 36px 32px;
  text-align: center;
}

.receipt-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.receipt-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
}

.receipt-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 6px;
}

.receipt-code-box {
  background: #fff7ed;
  border: 1px dashed #fdba74;
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 20px 0;
}

.code-label {
  display: block;
  font-size: 0.8rem;
  color: #9a3412;
  font-weight: 700;
}

.code-value {
  font-size: 1.8rem;
  font-weight: 900;
  color: #c2410c;
  letter-spacing: 1px;
}

.receipt-details {
  background: #f8fafc;
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 0.85rem;
  color: #475569;
  text-align: left;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* 页脚 */
.site-footer {
  background: #0f172a;
  color: #94a3b8;
  padding: 40px 20px;
  border-top: 1px solid #1e293b;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition);
}

.footer-links a:hover {
  color: #fff;
}

/* 响应式调整：移动端优先保证"首屏即可看到体验卡片" */
@media (max-width: 768px) {
  .commercial-funnel {
    display: none;
  }
  .hero-section {
    padding: 10px 16px 2px;
  }
  .hero-tag {
    font-size: 0.74rem;
    padding: 4px 12px;
    margin-bottom: 10px;
  }
  .hero-title {
    font-size: 1.55rem;
    margin-bottom: 8px;
  }
  .hero-subtitle {
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 移动端收起品牌副标题，把首屏空间留给体验卡片 */
  .logo-text p {
    display: none;
  }
  /* 三枚信任标签改为单行横向滑动，避免占满三行高度 */
  .hero-metrics {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 6px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .hero-metrics::-webkit-scrollbar {
    display: none;
  }
  .metric-item {
    font-size: 0.75rem;
    padding: 4px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .scroll-hint {
    font-size: 0.78rem;
    padding: 6px 14px;
    margin-top: 8px;
  }
  /* 分类栏与二级胶囊压缩高度 */
  .sub-categories-bar {
    margin-bottom: 10px;
  }
  .sub-pill-btn {
    font-size: 0.76rem;
    padding: 4px 10px;
  }
  .pill-index { font-size: 0.62rem; padding: 2px 5px; min-width: 26px; }
  .card-no { font-size: 0.66rem; padding: 1px 5px; }
  .grid-crumb { font-size: 0.78rem; }

  /* 手机端：胶囊加大触控区（至少 32px 高，接近 44px 的推荐触摸目标），
     并适当收窄内边距，让每行能多放几个 */
  .sub-pills { gap: 6px; padding: 4px 0; }
  .sub-pill-btn { padding: 7px 11px; font-size: 0.78rem; min-height: 32px; }
  .pills-toggle { min-height: 34px; font-size: 0.76rem; }
  /* 自定义心愿横幅：移动端收成单行输入条 */
  .custom-wish-banner {
    margin-bottom: 8px;
  }
  .custom-wish-inner {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    padding: 8px 10px;
  }
  .banner-icon {
    font-size: 1.05rem;
  }
  .banner-text {
    display: none;
  }
  .banner-input-wrap {
    width: auto;
    max-width: none;
    flex: 1;
  }
  .custom-input {
    padding: 8px 10px;
    font-size: 0.84rem;
  }
  .btn-add-custom {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .grid-status-bar {
    padding-bottom: 6px;
    margin-bottom: 8px;
  }
  .grid-count-text {
    font-size: 0.84rem;
  }
  .grid-tier-legend {
    display: none;
  }
  /* 手机单列规则在 .city-band 那一节里统一写了（grid-flat / city-band-body），此处不重复 */
  .card-skeleton {
    height: 330px;
  }
  /* 顶部状态条：窄屏只保留关键计数与语言按钮 */
  .live-stats-bar {
    padding: 8px 12px;
    font-size: 0.8rem;
    gap: 8px;
  }
  .live-feed-ticker {
    display: none;
  }
  .ticker-left {
    gap: 10px;
  }
  .ticker-left .stat-chip:nth-child(2) {
    display: none;
  }
  .stat-chip {
    padding: 3px 8px;
  }
  .guide-portal-link {
    display: none;
  }
  .decision-channels-wrapper {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   我的心愿单面板（2026-09-20 晚新增）
   用户要求「已选的心愿单要允许查看、删除」。
   结构：head（标题 + 清空全部） / body（可滚动清单） / foot（直达 AI 方案）。
   ⚠️ .modal-card 自带 `overflow-y: auto`，这里必须覆盖成 `overflow: hidden`，
      把滚动交给 .wishlist-modal-body —— 否则标题栏和底部按钮会被一起滚走。
   ⚠️ head 右侧留 46px：空出来给 .modal-close 的那个绝对定位圆圈，
      不然「清空全部」会被 × 压住。
   ========================================================================== */
.wishlist-modal-card {
  max-width: 640px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 22px 18px;
}

.wishlist-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 46px 12px 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.wishlist-modal-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  color: #1e293b;
}

.wl-clear-all {
  flex: 0 0 auto;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s;
}

.wl-clear-all:hover { background: #fee2e2; }

.wishlist-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 60px;
  padding: 10px 2px;
}

.wl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 0.86rem;
  transition: background-color .12s;
}

.wl-row + .wl-row { border-top: 1px solid #f1f5f9; }
.wl-row:hover { background: #f8fafc; }

.wl-no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: #eef2f7;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 自定义心愿没有编号，用「✦」占位，配色与内置条目区分开 */
.wl-no-custom {
  background: #e6f1fb;
  color: #185fa5;
}

/* 站内三级编号（如 1.1.1）—— 用户要求「心愿单要把编号写上」，有了它才能和站内位置对上号。
   等宽字体 + 浅底，让它读起来像一个"坐标"而不是装饰。 */
.wl-code {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.wl-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1e293b;
  font-weight: 600;
  text-decoration: none;
}

a.wl-title:hover { color: var(--primary); text-decoration: underline; }

.wl-meta {
  flex: 0 0 auto;
  font-size: 0.76rem;
  color: #94a3b8;
  white-space: nowrap;
}

.wl-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  color: #94a3b8;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}

.wl-remove:hover {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fecaca;
}

.wl-empty {
  padding: 32px 12px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.88rem;
}

.wishlist-modal-foot {
  padding-top: 12px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.wl-plan-btn {
  width: 100%;
  justify-content: center;
}

/* 空清单时把这两个按钮藏掉。必须显式写 —— 任何 display 类样式都会盖掉 [hidden] 的 UA 默认值 */
.wl-clear-all[hidden],
.wl-plan-btn[hidden] { display: none; }

/* 窄屏：收起「目的地 · 分类」那一列，优先保住标题和移除按钮 */
@media (max-width: 560px) {
  .wishlist-modal-card {
    max-width: 100%;
    max-height: 88vh;
    padding: 18px 14px 14px;
  }
  .wl-meta { display: none; }
}