@charset "UTF-8";
/* ==========================================================================
   成都亲子游 · 行程小助手  —  app.css
   设计令牌 + 重置 + 布局骨架 + 通用组件（按钮 / 浮层 / Toast / 骨架屏 / 星标 / 标签）
   目标用户：5 岁小朋友 + 爸爸妈妈 → 大字、大按钮、大圆角、贴纸感
   移动优先：375-430px 起，600px / 820px 两个断点适配 iPad
   禁止：@import、网络字体、图片资源、!important（仅 [hidden] 兜底那条除外）
   ========================================================================== */

/* ===== 1. 设计令牌 ===== */
:root {
  /* ---- 1.1 品牌色 ---- */
  --c-primary: #ff8a3d;          /* 暖橙：主行动色 */
  --c-primary-deep: #f2701c;     /* 主色加深：按下 / 描边 */
  --c-primary-soft: #fff0e2;     /* 主色淡化：底色 */
  --c-secondary: #34c3a4;        /* 薄荷绿：辅色 */
  --c-secondary-deep: #23a186;
  --c-secondary-soft: #e3f8f2;
  --c-accent: #ffd166;           /* 太阳黄：强调 */
  --c-accent-deep: #e8b53f;
  --c-accent-soft: #fff6dc;
  --c-pink: #ff9ec4;             /* 点缀粉 */
  --c-pink-soft: #ffe9f2;
  --c-blue: #5b8ff9;             /* 点缀蓝：聚焦环 / 外圈区域 */
  --c-blue-soft: #e8efff;

  /* ---- 1.2 文字与底色 ---- */
  --c-ink: #35302c;              /* 正文 */
  --c-ink-soft: #7a6f68;         /* 次要文字 */
  --c-ink-faint: #a89e97;        /* 更弱的提示文字 */
  --c-surface: #fffdf8;          /* 卡片底 */
  --c-surface-2: #fff8ee;        /* 次级卡片底 */
  --c-bg: #fff6e9;               /* 页面底 */
  --c-line: rgba(0, 0, 0, .06);  /* 卡片描边 */
  --c-line-strong: rgba(0, 0, 0, .12);

  /* ---- 1.3 区域色（市区 / 近郊 / 远郊） ---- */
  --c-area-city: #ff7f50;
  --c-area-near: #3fb98f;
  --c-area-outer: #5b8ff9;

  /* ---- 1.4 圆角 ---- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---- 1.5 阴影：纸质贴纸感（底部实心投影 + 柔和扩散） ---- */
  --shadow-card: 0 4px 0 rgba(0, 0, 0, .08), 0 8px 20px rgba(120, 90, 60, .10);
  --shadow-card-hover: 0 6px 0 rgba(0, 0, 0, .08), 0 14px 26px rgba(120, 90, 60, .14);
  --shadow-press: 0 1px 0 rgba(0, 0, 0, .10), 0 2px 6px rgba(120, 90, 60, .12);
  --shadow-float: 0 -2px 0 rgba(0, 0, 0, .04), 0 -10px 30px rgba(120, 90, 60, .16);
  --shadow-btn: 0 4px 0 var(--btn-edge, rgba(0, 0, 0, .16));
  --shadow-focus: 0 0 0 3px var(--c-blue);
  --shadow-ring: 0 0 0 3px rgba(91, 143, 249, .30);

  /* ---- 1.6 字号阶梯（全部用 rem，随 --font-scale 联动） ---- */
  --font-scale: 1;
  --fs-xs: calc(.82rem * var(--font-scale));
  --fs-sm: calc(.92rem * var(--font-scale));
  --fs-base: calc(1rem * var(--font-scale));      /* 正文下限 1rem */
  --fs-md: calc(1.12rem * var(--font-scale));
  --fs-lg: calc(1.3rem * var(--font-scale));      /* 卡片标题下限 1.3rem */
  --fs-xl: calc(clamp(1.5rem, 1.15rem + 1.7vw, 1.9rem) * var(--font-scale));
  --fs-2xl: calc(clamp(1.9rem, 1.3rem + 3vw, 2.6rem) * var(--font-scale)); /* 页面大标题 2-2.6rem */
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-body: 1.7;                 /* 正文行高 ≥1.65 */

  /* ---- 1.7 间距与尺寸 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --tap-min: 48px;               /* 可点元素最小 48×48 */
  --tap-btn: 56px;               /* 主要按钮最小高度 */
  --header-h: 56px;
  --tabbar-h: 62px;
  --main-max: 430px;             /* 手机内容最大宽度 */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* ---- 1.8 动效 ---- */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;

  --z-bg: 0;
  --z-main: 1;
  --z-header: 30;
  --z-tabbar: 40;
  --z-fab: 45;
  --z-backdrop: 60;
  --z-sheet: 70;
  --z-toast: 90;
}

/* ===== 2. 重置与基础排版 ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 17px;                       /* 手机基准，稍大于 16px 方便小朋友 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (min-width: 600px) {
  html { font-size: 18px; }              /* iPad 再大一号 */
}
/* 只放大文字、不整体缩放：避免布局被 1.15 倍撑破 */
body.is-big-text {
  --font-scale: 1.15;
  font-size: 1.15rem;                    /* 1rem = 根字号，手机 17px / iPad 18px 都跟着放大 */
}

body {
  margin: 0;
  min-height: 100dvh;                    /* 用 dvh，兼容手机地址栏收起 */
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  overflow-x: hidden;                    /* 禁止横向滚动（滚动容器不裁 sticky 头部） */
  overflow-wrap: anywhere;               /* 长文本必须能换行 */
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, p, figure, ul, ol {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }

a {
  color: var(--c-primary-deep);
  text-decoration: none;
}
a:active { opacity: .8; }

button {
  font: inherit;
  color: inherit;
  line-height: inherit;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

input, select, textarea { font: inherit; color: inherit; }

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .92em;
  padding: .1em .4em;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
}

/* 所有 emoji 图标：统一字号与行高，避免撑高行盒 */
[aria-hidden="true"] { line-height: 1; }
.home-card__emoji, .card__emoji, .tab-bar__emoji, .header-title__emoji,
.empty-state__emoji, .home-hero__panda, .home-card__arrow, .tl-item__dot {
  line-height: 1;
  display: inline-block;
}

/* ===== 3. 无障碍与状态兜底 ===== */
[hidden] { display: none !important; }   /* 唯一的 !important：视图切换兜底 */

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* 用 box-shadow 再补一圈，防止被 overflow 裁掉 */
.btn:focus-visible,
.tab-bar__item:focus-visible,
.pace-chip:focus-visible,
.chip:focus-visible,
.home-card:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
  box-shadow: var(--shadow-ring);
}

/* 跳到主要内容：平时移出屏幕，聚焦时滑入 */
.skip-link {
  position: fixed;
  top: calc(var(--sp-3) + var(--safe-t));
  left: 50%;
  transform: translate(-50%, -220%);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--sp-3) var(--sp-5);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 700;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease-pop);
}
.skip-link:focus {
  transform: translate(-50%, 0);
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
}

/* 未选中不要灰暗；隐藏用 .is-hidden / [hidden] */
.is-hidden { display: none; }

/* ===== 4. 背景装饰色块 ===== */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;                  /* 绝不影响滚动与点击 */
  overflow: hidden;
  contain: strict;
}
.bg-blob {
  position: fixed;
  display: block;
  border-radius: 50%;
  opacity: .5;
  filter: blur(46px);
  will-change: transform;
}
.bg-blob--1 {
  width: 300px;
  height: 300px;
  top: -90px;
  left: -90px;
  background: var(--c-accent);
  animation: blob-float-a 16s var(--ease-out) infinite alternate;
}
.bg-blob--2 {
  width: 260px;
  height: 260px;
  top: 34%;
  right: -110px;
  background: var(--c-secondary);
  opacity: .34;
  animation: blob-float-b 20s var(--ease-out) infinite alternate;
}
.bg-blob--3 {
  width: 320px;
  height: 320px;
  bottom: -120px;
  left: -110px;
  background: var(--c-pink);
  opacity: .32;
  animation: blob-float-a 24s var(--ease-out) infinite alternate-reverse;
}
@keyframes blob-float-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(24px, 30px, 0) scale(1.12); }
}
@keyframes blob-float-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-30px, -24px, 0) scale(.94); }
}

/* ===== 5. 布局外壳：头部 / 主体 / 底部导航 / 悬浮车 ===== */
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--header-h);
  padding: calc(var(--sp-2) + var(--safe-t)) calc(var(--sp-3) + var(--safe-r))
           var(--sp-2) calc(var(--sp-3) + var(--safe-l));
  background: rgba(255, 246, 233, .88);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}

/* 返回按钮：默认隐藏，JS 在子页面加类显示（点击区 ≥48×48） */
.header-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-ink);
}
.header-back:active { transform: translateY(2px) scale(.97); }
.header-back__text {
  font-size: var(--fs-sm);
  line-height: 1;
}

.header-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.header-title__emoji {
  font-size: calc(1.5rem * var(--font-scale));
}
.header-title__text {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--lh-tight);
}

.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.header-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap-min);
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-secondary-soft);
  color: var(--c-secondary-deep);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.header-compare {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  font-size: calc(1.4rem * var(--font-scale));
}
.header-compare:active { transform: translateY(2px) scale(.97); }
.header-compare__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}

.app-main {
  position: relative;
  z-index: var(--z-main);
  width: 100%;
  max-width: var(--main-max);
  margin: 0 auto;
  padding: var(--sp-4) calc(var(--sp-4) + var(--safe-r)) var(--sp-7)
           calc(var(--sp-4) + var(--safe-l));
  /* 给底部导航 + 刘海屏留位置 */
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-6));
  overflow-x: clip;
}

/* 视图：默认隐藏由 [hidden] 负责，这里只做进场动画 */
.view { display: block; }
.view.is-active { animation: view-in var(--t-slow) var(--ease-out) both; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.view--home, .view--list, .view--plan, .view--trips, .view--settings {
  display: block;
}

/* 底部导航 */
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-tabbar);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  gap: var(--sp-1);
  padding: var(--sp-2) calc(var(--sp-2) + var(--safe-r))
           calc(var(--sp-2) + var(--safe-b)) calc(var(--sp-2) + var(--safe-l));
  background: rgba(255, 253, 248, .96);
  backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--c-line);
  box-shadow: var(--shadow-float);
}
.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap-min);
  padding: var(--sp-1);
  border-radius: var(--r-md);
  color: var(--c-ink-soft);
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-pop);
}
.tab-bar__item:active { transform: scale(.94); }
.tab-bar__emoji {
  font-size: calc(1.45rem * var(--font-scale));
  transition: transform var(--t-base) var(--ease-pop);
}
.tab-bar__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.1;
}
.tab-bar__item.is-active {
  color: var(--c-primary-deep);
  background: var(--c-primary-soft);
}
.tab-bar__item.is-active .tab-bar__emoji {
  transform: translateY(-2px) scale(1.14);
}
.tab-bar__item[aria-selected="true"] { color: var(--c-primary-deep); }

/* 悬浮购物袋：始终浮在底部导航之上 */
.fab-cart {
  position: fixed;
  right: calc(var(--sp-4) + var(--safe-r));
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-4));
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: var(--tap-btn);
  min-height: var(--tap-btn);
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: calc(1.4rem * var(--font-scale));
  box-shadow: 0 5px 0 var(--c-primary-deep), 0 12px 22px rgba(120, 90, 60, .22);
  animation: fab-in var(--t-slow) var(--ease-pop) both;
}
.fab-cart:active {
  transform: translateY(3px) scale(.97);
  box-shadow: 0 2px 0 var(--c-primary-deep), 0 6px 12px rgba(120, 90, 60, .2);
}
.fab-cart__count {
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@keyframes fab-in {
  from { opacity: 0; transform: translateY(16px) scale(.8); }
  to   { opacity: 1; transform: none; }
}

/* ===== 6. 首页 ===== */
.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-5);
  background: linear-gradient(180deg, var(--c-accent-soft), var(--c-surface));
  border: 2px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.home-hero__panda {
  font-size: calc(4.6rem * var(--font-scale));
  line-height: 1;
  animation: panda-bob 2.6s var(--ease-out) infinite alternate;
}
@keyframes panda-bob {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(-10px) rotate(4deg); }
}
.home-hero__title {
  font-size: var(--fs-2xl);
  font-weight: 900;
  line-height: var(--lh-tight);
  color: var(--c-ink);
  letter-spacing: 1px;
}
.home-hero__city {
  display: inline-block;
  color: var(--c-primary-deep);
  padding: 0 .18em;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, transparent 58%, var(--c-accent) 58%);
}
.home-hero__sub {
  max-width: 30ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}
.home-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.home-hero__stats:empty { display: none; }

.home-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.home-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 84px;
  padding: var(--sp-4);
  text-align: left;
  background: var(--c-surface);
  border: 2px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-fast) var(--ease-pop),
              box-shadow var(--t-fast) var(--ease-out);
}
.home-card:active {
  transform: translateY(2px) scale(.985);
  box-shadow: var(--shadow-press);
}
.home-card__emoji {
  font-size: calc(2.4rem * var(--font-scale));
  line-height: 1;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  flex: 0 0 auto;
}
.home-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-card__title {
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: var(--lh-tight);
}
.home-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: var(--lh-normal);
}
.home-card__count {
  flex: 0 0 auto;
  min-width: 46px;
  min-height: 46px;
  padding: 0 var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
  font-size: var(--fs-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.home-card__arrow {
  flex: 0 0 auto;
  font-size: calc(1.2rem * var(--font-scale));
  color: var(--c-ink-faint);
  line-height: 1;
}
/* 四张菜单卡各自的色系 */
.home-card--attraction .home-card__emoji { background: var(--c-primary-soft); }
.home-card--attraction .home-card__count { background: var(--c-primary-soft); color: var(--c-primary-deep); }
.home-card--food .home-card__emoji { background: var(--c-secondary-soft); }
.home-card--food .home-card__count { background: var(--c-secondary-soft); color: var(--c-secondary-deep); }
.home-card--plan .home-card__emoji { background: var(--c-accent-soft); }
.home-card--plan .home-card__count { background: var(--c-accent-soft); color: #a97d14; }
.home-card--trips .home-card__emoji { background: var(--c-blue-soft); }

.home-foot {
  margin-top: var(--sp-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-ink-faint);
  line-height: var(--lh-body);
}
.home-foot:empty { display: none; }

/* ===== 7. 列表页外壳 ===== */
.list-head {
  margin-bottom: var(--sp-4);
}
.list-head__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: .5px;
}
.list-head__title [aria-hidden="true"] { font-size: calc(1.5rem * var(--font-scale)); }
.list-head__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}

/* 卡片列表：手机单列 */
.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: start;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  background: var(--c-surface);
  border: 2px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
}
.empty-state__emoji {
  font-size: calc(3.4rem * var(--font-scale));
  line-height: 1;
  animation: panda-bob 3s var(--ease-out) infinite alternate;
}
.empty-state__text {
  font-size: var(--fs-md);
  color: var(--c-ink-soft);
  line-height: var(--lh-body);
}

/* ===== 8. 面板 / 表单（行程设置） ===== */
.panel {
  padding: var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--c-surface);
  border: 2px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.panel--days { background: linear-gradient(180deg, var(--c-primary-soft), var(--c-surface) 60%); }
.panel--selection { background: linear-gradient(180deg, var(--c-secondary-soft), var(--c-surface) 60%); }
.panel--ai { background: linear-gradient(180deg, var(--c-blue-soft), var(--c-surface) 60%); }
.panel__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-3);
}
.panel__optional {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink-faint);
}
.panel__hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: var(--lh-body);
}
.panel__hint:empty { display: none; }
.panel__text {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}

/* 天数选择 .day-picker / .day-chip 在 components.css（JS 生成按钮） */

/* 节奏选择 */
.pace-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.pace-chip {
  min-height: var(--tap-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-2);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 2px solid var(--c-line);
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-weight: 800;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-pop),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.pace-chip:active { transform: translateY(2px) scale(.97); }
.pace-chip [aria-hidden="true"] { font-size: calc(1.2rem * var(--font-scale)); }
.pace-chip.is-active {
  background: var(--c-secondary);
  border-color: var(--c-secondary-deep);
  color: #fff;
  box-shadow: 0 4px 0 var(--c-secondary-deep);
}

/* 日期输入 */
.input-date {
  display: block;
  width: 100%;
  min-height: var(--tap-btn);
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  border: 2px solid var(--c-line-strong);
  background: var(--c-surface-2);
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-weight: 700;
}
.input-date:focus-visible {
  border-color: var(--c-blue);
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
}

/* 开关行：整行可点（label 包裹） */
.switch-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap-btn);
  padding: var(--sp-2) 0;
  cursor: pointer;
}
.switch-row + .switch-row { border-top: 1px dashed var(--c-line-strong); }
.switch-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.switch-row__title {
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: var(--lh-normal);
}
.switch-row__desc {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: var(--lh-normal);
}
.switch-row__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.switch-row__track {
  position: relative;
  flex: 0 0 auto;
  width: 68px;
  height: 40px;
  border-radius: var(--r-pill);
  background: #e6ded4;
  border: 2px solid var(--c-line-strong);
  transition: background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  pointer-events: none;
}
.switch-row__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .22);
  transition: transform var(--t-base) var(--ease-pop);
}
.switch-row__input:checked ~ .switch-row__track {
  background: var(--c-secondary);
  border-color: var(--c-secondary-deep);
}
.switch-row__input:checked ~ .switch-row__track .switch-row__thumb {
  transform: translateX(28px);
}
.switch-row__input:focus-visible ~ .switch-row__track {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
}

/* 底部动作区 */
.plan-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}

/* 行内提示条 */
.inline-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  border: 2px solid var(--c-accent);
  color: #8a6212;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.inline-alert:empty { display: none; }

/* 已选摘要 / 键值列表的内部结构在 components.css（JS 生成 DOM） */

/* ===== 9. 按钮 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 2px solid var(--c-line-strong);
  color: var(--c-ink);
  font-size: calc(1.05rem * var(--font-scale));   /* 按钮文字 1.05-1.2rem */
  font-weight: 800;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-fast) var(--ease-pop),
              box-shadow var(--t-fast) var(--ease-out);
}
.btn [aria-hidden="true"] { font-size: calc(1.2rem * var(--font-scale)); }
.btn:active {
  transform: translateY(2px) scale(.985);
  box-shadow: var(--shadow-press);
}
.btn--primary {
  --btn-edge: var(--c-primary-deep);
  background: var(--c-primary);
  border-color: var(--c-primary-deep);
  color: #fff;
  box-shadow: 0 4px 0 var(--c-primary-deep), 0 8px 18px rgba(120, 90, 60, .16);
}
.btn--ghost {
  background: var(--c-surface);
  border-color: var(--c-line-strong);
  color: var(--c-ink-soft);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .06);
}
.btn--big {
  min-height: var(--tap-btn);
  padding: var(--sp-4) var(--sp-6);
  font-size: calc(1.2rem * var(--font-scale));
  border-radius: var(--r-lg);
}

/* ===== 10. 星级评分 .stars =====
   🔴 星星是 **SVG**，不是 ⭐ emoji。
   emoji 是内建彩色字形，CSS 的 `color` 对它无效 ——
   于是空心星和实心星长得一模一样（这个 bug 真上线过，用户反馈「都是实心的五星」）。
   SVG 的 fill 完全可控，空心/实心一眼可辨。 */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  font-size: calc(1.05rem * var(--font-scale));
}

/* 尺寸跟着 font-size 走（svg 宽高设成 1em），所以放大字体时星星一起变大 */
.stars .star {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: block;
}

/* 实心：填充暖黄 + 深一点的描边，醒目但柔和 */
.stars .star--on path {
  fill: #ffc531;
  stroke: #e08a00;
  stroke-width: 1.1;
  stroke-linejoin: round;
}

/* 空心：完全不填充、只用浅灰描边 —— 远看就是几个"空框"，
   和实心黄的对比在任何屏幕上都能分辨 */
.stars .star--off path {
  fill: none;
  stroke: #cfc4b8;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* 数字：和星星并排，给一个能读的准确值 */
.stars__num {
  margin-left: 5px;
  font-size: .82em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-soft);
}

.stars--lg { font-size: calc(1.5rem * var(--font-scale)); gap: 3px; }
.stars--small { font-size: calc(.85rem * var(--font-scale)); gap: 1px; }

/* ===== 11. 标签与徽章 ===== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  color: var(--c-ink-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.tag--area {
  background: var(--c-blue-soft);
  border-color: rgba(91, 143, 249, .35);
  color: #3466c9;
}
.tag--area[data-area="city"] {
  background: rgba(255, 127, 80, .14);
  border-color: rgba(255, 127, 80, .38);
  color: #d1582b;
}
.tag--area[data-area="near"] {
  background: rgba(63, 185, 143, .14);
  border-color: rgba(63, 185, 143, .38);
  color: #1f8a66;
}
.tag--area[data-area="outer"] {
  background: rgba(91, 143, 249, .14);
  border-color: rgba(91, 143, 249, .38);
  color: #3466c9;
}
.tag--kid {
  background: var(--c-secondary-soft);
  border-color: rgba(52, 195, 164, .38);
  color: var(--c-secondary-deep);
}
.tag--spice {
  background: #ffece6;
  border-color: rgba(242, 112, 28, .35);
  color: #d1582b;
}
.tag--spice[data-spice="0"] {
  background: var(--c-secondary-soft);
  border-color: rgba(52, 195, 164, .38);
  color: var(--c-secondary-deep);
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* 通用小胶囊 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.divider {
  height: 0;
  margin: var(--sp-4) 0;
  border: 0;
  border-top: 2px dashed var(--c-line-strong);
}

/* ===== 13. 浮层：底部抽屉 sheet（开合状态见 components.css） ===== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(53, 48, 44, .45);
  backdrop-filter: blur(2px);
}

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: var(--z-sheet);
  width: min(100%, 560px);
  max-height: min(88dvh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-float);
  padding-bottom: var(--safe-b);
  transform: translateX(-50%);              /* 水平居中；开合位移在 components.css */
  overflow: hidden;
}
.sheet__grabber {
  flex: 0 0 auto;
  width: 52px;
  height: 6px;
  margin: var(--sp-3) auto var(--sp-1);
  border-radius: var(--r-pill);
  background: #e0d6cb;
  cursor: grab;
}
.sheet__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  border-bottom: 2px dashed var(--c-line-strong);
}
.sheet__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: 900;
  line-height: var(--lh-tight);
}
.sheet__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: 50%;
  background: var(--c-surface-2);
  font-size: calc(1.2rem * var(--font-scale));
  line-height: 1;
}
.sheet__close:active { transform: scale(.92); }
.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
.sheet__foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 2px dashed var(--c-line-strong);
  background: var(--c-surface-2);
}
.sheet__foot > * { flex: 1 1 auto; }

/* ===== 14. Toast 提示栈 ===== */
.toast-stack {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-5));
  z-index: var(--z-toast);
  width: min(100% - 2 * var(--sp-4), 460px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  pointer-events: none;                  /* 不挡住下面的按钮 */
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 2px solid var(--c-line-strong);
  border-left-width: 8px;
  color: var(--c-ink);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-normal);
  box-shadow: var(--shadow-card);
  animation: toast-in var(--t-slow) var(--ease-pop) both;
}
.toast.is-hiding { animation: toast-out var(--t-base) var(--ease-out) both; }
/* 真实 JS 用的是 is-leaving，见 components.css */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px) scale(.96); }
}
.toast--info { border-left-color: var(--c-blue); background: var(--c-blue-soft); }
.toast--ok { border-left-color: var(--c-secondary); background: var(--c-secondary-soft); }
.toast--warn { border-left-color: var(--c-accent-deep); background: var(--c-accent-soft); }
.toast--error { border-left-color: #e8552f; background: #ffece6; }

/* ===== 15. 骨架屏 ===== */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: linear-gradient(100deg, #efe7dc 30%, #f8f3ea 50%, #efe7dc 70%);
  background-size: 220% 100%;
  color: transparent;
  animation: skeleton-shimmer 1.4s linear infinite;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%);
  animation: skeleton-sheen 1.6s var(--ease-out) infinite;
}
@keyframes skeleton-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
@keyframes skeleton-sheen {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.skeleton--text { height: 1em; border-radius: var(--r-sm); }
.skeleton--card { height: 108px; border-radius: var(--r-lg); }

/* ===== 16. 「只看图模式」 ===== */
body.is-emoji-only .card__desc,
body.is-emoji-only .card__meta,
body.is-emoji-only .card__highlights,
body.is-emoji-only .card__sub,
body.is-emoji-only .card__actions,
body.is-emoji-only .home-card__desc,
body.is-emoji-only .home-foot,
body.is-emoji-only .list-head__sub,
body.is-emoji-only .panel__hint,
body.is-emoji-only .panel__optional {
  display: none;
}
body.is-emoji-only .card__emoji,
body.is-emoji-only .home-card__emoji {
  font-size: 3rem;                       /* emoji 放大到 3rem */
  width: auto;
  height: auto;
  background: none;
}
body.is-emoji-only .home-card__title {
  font-size: var(--fs-xl);
}
body.is-emoji-only .home-card {
  grid-template-columns: auto 1fr auto;
}

/* ===== 17. 动效降级 ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
  }
  .home-hero__panda,
  .empty-state__emoji,
  .bg-blob { animation: none; }
}

/* ===== 18. 响应式：小手机 / iPad 竖屏 / iPad 横屏 ===== */
/* 很窄的手机（iPhone SE 320-374px） */
@media (max-width: 374px) {
  .header-title__text { font-size: var(--fs-md); }
  .header-progress { display: none; }
  .home-card__emoji { width: 54px; height: 54px; font-size: calc(2rem * var(--font-scale)); }
  .pace-chip { font-size: var(--fs-sm); padding: 0 var(--sp-1); }
  .tab-bar__label { font-size: .74rem; }
}

/* iPad 竖屏：更宽的内容与多列 */
@media (min-width: 600px) {
  :root {
    --main-max: 620px;
    --header-h: 62px;
    --tabbar-h: 68px;
  }
  .app-header { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .app-main { padding-left: calc(var(--sp-5) + var(--safe-l)); padding-right: calc(var(--sp-5) + var(--safe-r)); }
  .home-menu { grid-template-columns: repeat(2, 1fr); }
  .plan-actions { grid-template-columns: 2fr 1fr; align-items: center; }
  .day-picker { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
  .tab-bar__label { font-size: var(--fs-sm); }
  .toast-stack { bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-6)); }
}

/* iPad 横屏：内容 860px 居中，卡片两列 */
@media (min-width: 820px) {
  :root {
    --main-max: 860px;                   /* 横屏内容最大宽度 860px */
    --header-h: 66px;
    --tabbar-h: 72px;
  }
  .app-main {
    max-width: var(--main-max);          /* 居中由 margin:auto 负责 */
    padding-top: var(--sp-6);
  }
  /* 列表两列 grid */
  .card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  .home-menu { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  /* 双列时英雄区文字不要太宽 */
  .home-hero { padding: var(--sp-6) var(--sp-6) var(--sp-7); }
  .home-hero__sub { max-width: 46ch; }
  .plan-extras:not(:empty) { columns: 2; column-gap: var(--sp-5); }
  .timeline-list { gap: var(--sp-6); }
  .fab-cart { right: calc(50% - var(--main-max) / 2 + var(--sp-5)); }
}

/* 悬停设备上的轻微反馈（触屏不会触发） */
@media (hover: hover) and (pointer: fine) {
  .home-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
  .chip:hover { border-color: var(--c-primary); color: var(--c-primary-deep); }
  .chip.is-active:hover { color: #fff; }
  .pace-chip:hover { border-color: var(--c-secondary); }
  .pace-chip.is-active:hover { color: #fff; }
  .tab-bar__item:hover { background: var(--c-primary-soft); }
  .btn--primary:hover { background: var(--c-primary-deep); }
  .btn--ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }
  .sheet__close:hover { background: #f1e8dd; }
}

/* ===== 19. 打印：给「打印 / 存图」用 ===== */
@media print {
  .app-bg,
  .app-header,
  .tab-bar,
  .fab-cart,
  .toast-stack,
  .skip-link,
  .plan-tabs,
  .plan-footer-actions,
  .sheet,
  .sheet-backdrop { display: none; }
  .app-main { max-width: none; padding: 0; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .card, .panel, .home-hero, .plan-day { box-shadow: none; break-inside: avoid; }
}

/* ===== 20. 工具类 ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.text-soft { color: var(--c-ink-soft); }
.nowrap { white-space: nowrap; }

/* ===== 21. 关键节点的 id 钩子（供 JS 切换的容器做布局兜底） ===== */
#main { scroll-margin-top: calc(var(--header-h) + var(--sp-3)); }  /* skip-link 跳转不被头部挡住 */
#homeStats { width: 100%; }
#tripsContent { display: block; }
#planDays { display: block; }
#attractionList,
#foodList { width: 100%; }
#settingsKv { width: 100%; }
#planBanner:empty,
#planExtras:empty,
#planAlert:empty,
#homeFoot:empty,
#homeStats:empty { display: none; }
#fabCart:active { transform: translateY(3px) scale(.97); }
#toastStack:empty { display: none; }

/* 备案信息（京ICP备…号-1）：页面底部居中、链接给足点击热区、窄屏不溢出 */
.beian-foot {
  margin: 22px auto 6px;
  padding-top: 14px;
  max-width: 560px;
  border-top: 1px solid var(--c-line);
  text-align: center;
}
.beian-foot__line { margin: 0; font-size: .76rem; line-height: 1.7; }
.beian-foot__line a {
  display: inline-block;
  padding: 4px 2px;
  color: var(--c-ink-faint);
  text-decoration: none;
  word-break: break-word;
}
.beian-foot__line a:hover { color: var(--primary, #c0500f); text-decoration: underline; }