/* ============================================================
   旅行雷达 · 纸墨雷达设计系统
   浅色=纸墨（漫游志血统），暗色=暗金（环游志反相）
   ============================================================ */

:root {
  /* 色板 */
  --paper: #F6F1E9;
  --surface: #FCFAF5;
  --surface-2: #F1EAE0;
  --ink: #211C16;
  --ink-2: #5B5147;
  --ink-3: #77695A;                /* a11y：由 #8C8073(3.43) 压深至 4.73:1，过 WCAG AA 正文 */
  --terra: #C75C3D;
  --terra-deep: #B34A2C;           /* a11y：CTA 底色，配 #FFF6EF 文字 5.0:1（品牌 terra 仅作装饰保持不变） */
  --terra-soft: #F3E0D7;
  --pine: #2F4A3F;
  --pine-soft: #DFE9E2;
  --brass: #B08A4F;
  --brass-ink: #866631;            /* a11y：金字承载文案时用（eyebrow/标签/计数），4.72:1；装饰金线仍用 --brass */
  --brass-line: rgba(176, 138, 79, .38);
  --cyan: #8AA6A8;
  --cyan-soft: #E3EBEB;
  --danger: #A8402A;
  --danger-soft: #F6E2DC;
  --line: rgba(33, 28, 22, .1);
  --line-soft: rgba(33, 28, 22, .06);
  --glass-bg: rgba(246, 241, 233, .78);
  --shadow-sm: 0 1px 2px rgba(33, 28, 22, .06);
  --shadow-md: 0 4px 16px rgba(33, 28, 22, .08);
  --shadow-lift: 0 12px 32px rgba(33, 28, 22, .13);
  /* 特效取色 */
  --fx-ink: #2F4A3F;
  --fx-hot: #C75C3D;
  /* 字体 */
  --serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* 几何 */
  --r-card: 14px;
  --r-img: 8px;
  --r-pill: 999px;
  /* 动效 */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --t-micro: .15s;
  --t-card: .28s;
  --t-enter: .5s;
  --t-sweep: .56s;
  --tabbar-h: 62px;
}

[data-theme="dark"] {
  --paper: #17130E;
  --surface: #221C15;
  --surface-2: #2B241B;
  --ink: #ECE3D4;
  --ink-2: #A99A85;
  --ink-3: #8F8271;                /* a11y：4.93:1 on dark paper */
  --terra: #E0714E;
  --terra-soft: #3A2A22;
  --pine: #6E8F7E;
  --pine-soft: #24312A;
  --brass: #D4AF63;
  --brass-ink: #D4AF63;            /* 暗色金字 8.9:1，本就达标，与 --brass 同值 */
  --brass-line: rgba(212, 175, 99, .34);
  --cyan: #8FB0B0;
  --cyan-soft: #263230;
  --danger: #E08A70;
  --danger-soft: #3B2620;
  --line: rgba(236, 227, 212, .12);
  --line-soft: rgba(236, 227, 212, .06);
  --glass-bg: rgba(23, 19, 14, .78);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .4);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, .5);
  --fx-ink: #6E8F7E;
  --fx-hot: #D4AF63;
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
[data-font="big"] body, body[data-font="big"] { font-size: 18px; }
[data-font="xl"] body, body[data-font="xl"] { font-size: 20px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 700; letter-spacing: .01em; }
::selection { background: var(--terra); color: #fff; }

/* 纸纹 */
.paper-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .paper-grain { opacity: .35; }

/* 等高线暗纹（hero 用） */
.contour {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23B08A4F' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M60 480c80-120 40-200 120-260s180-20 220-100 100-60 160-40'/%3E%3Cpath d='M40 520c90-130 50-220 130-280s190-30 230-110 110-70 170-50'/%3E%3Cpath d='M20 560c100-140 60-240 140-300s200-40 240-120 120-80 180-60'/%3E%3Cpath d='M90 430c70-110 30-180 110-240s170-10 210-90 90-50 150-30'/%3E%3Ccircle cx='430' cy='120' r='60'/%3E%3Ccircle cx='430' cy='120' r='40'/%3E%3Ccircle cx='430' cy='120' r='20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 560px;
}

/* ---------- 顶栏 ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 10px clamp(16px, 4vw, 40px);
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--brass-line);
  box-shadow: 0 1px 0 var(--line-soft);
}
.brand { display: flex; align-items: baseline; gap: 9px; flex: none; }
.brand-mark { align-self: center; color: var(--ink); }
.brand-name { font-family: var(--serif); font-weight: 900; font-size: 20px; letter-spacing: .06em; }
.brand-sub { font-size: 11px; color: var(--ink-3); letter-spacing: .14em; }
.topnav { display: none; gap: 26px; margin-left: 12px; font-size: 15px; color: var(--ink-2); }
.topnav a { position: relative; padding: 4px 0; transition: color var(--t-micro); }
.topnav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: var(--terra); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-card) var(--ease-out);
}
.topnav a:hover { color: var(--ink); }
.topnav a.on { color: var(--ink); font-weight: 600; }
.topnav a.on::after { transform: scaleX(1); }
.theme-btn { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform var(--t-micro); }
.theme-btn:active { transform: scale(.92); }
.theme-ico { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); position: relative; overflow: hidden; transition: transform .35s var(--ease-out); }
.theme-ico::after { content: ""; position: absolute; left: 50%; top: 0; width: 50%; height: 100%; background: var(--paper); }
[data-theme="dark"] .theme-ico { transform: rotate(180deg); }   /* 拨动开关：月相翻面 */

/* 关灯/开灯：圆形擦除由 JS 用 clip-path 驱动，这里只关掉默认交叉淡化并压好层序 */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
[data-theme="dark"]::view-transition-old(root) { z-index: 1; }   /* 关灯：亮截图置顶收缩 */

/* ---------- 底部 tab（移动） ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--brass-line);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; letter-spacing: .08em; color: var(--ink-3);
  transition: color var(--t-micro);
}
.tabbar a i { font-style: normal; font-size: 19px; filter: grayscale(1) opacity(.55); transition: filter var(--t-micro), transform var(--t-micro); }
.tabbar a.on { color: var(--terra); font-weight: 600; }
.tabbar a.on i { filter: none; transform: translateY(-1px); }

/* ---------- 视图容器 ---------- */
.view { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 clamp(14px, 3.6vw, 36px) 40px; }
.view-enter { animation: viewIn var(--t-enter) var(--ease-out); }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 滚动揭示 */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }

/* ---------- 通用组件 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px;
  border: 1px solid transparent;
  transition: transform var(--t-micro) var(--ease-ui), box-shadow var(--t-micro), opacity var(--t-micro);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: scale(.97); }
.btn.terra { background: var(--terra-deep); color: #FFF6EF; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--brass); color: var(--ink); }
.btn.sm { padding: 7px 14px; font-size: 13px; }
.btn:disabled { opacity: .4; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none;
  transition: all var(--t-micro) var(--ease-ui);
}
.chip:hover { border-color: var(--brass); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.on-terra { background: var(--terra-deep); color: #FFF6EF; border-color: var(--terra-deep); }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; letter-spacing: .02em;
}
.tag.pine { background: var(--pine-soft); color: var(--pine); }
.tag.terra { background: var(--terra-soft); color: var(--terra); }
.tag.brass { background: transparent; border: 1px solid var(--brass-line); color: var(--brass-ink); }
.tag.cyan { background: var(--cyan-soft); color: var(--cyan); }

.meta { font-size: 13px; letter-spacing: .08em; color: var(--ink-3); font-family: var(--sans); }
.meta.up { text-transform: uppercase; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-sm);
  transition: transform var(--t-card) var(--ease-out), box-shadow var(--t-card), border-color var(--t-card);
}
.card.hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--brass-line); }

.hairline { border: none; border-top: 1px solid var(--brass-line); margin: 8px 0; }

input.field, select.field, textarea.field {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color var(--t-micro);
}
input.field:focus, select.field:focus, textarea.field:focus { outline: none; border-color: var(--brass); }

.empty {
  text-align: center; padding: 48px 20px; color: var(--ink-3);
  border: 1px dashed var(--brass-line); border-radius: var(--r-card);
}
.empty b { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink-2); margin-bottom: 8px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);
  transform: translateX(-50%) translateY(20px); z-index: 90;
  background: var(--ink); color: var(--paper);
  padding: 10px 20px; border-radius: var(--r-pill); font-size: 14px;
  opacity: 0; pointer-events: none; transition: all var(--t-card) var(--ease-out);
  max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* modal */
.modal-mask {
  position: fixed; inset: 0; z-index: 80; background: rgba(23, 19, 14, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .25s var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  width: 100%; max-width: 640px; max-height: 88dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--brass-line);
  animation: sheetUp .32s var(--ease-out);
}
@keyframes sheetUp { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h3 { font-size: 20px; }
.modal-x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 15px; }

/* section 标题 */
.sec-head { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 16px; }
.sec-head .idx { font-family: Georgia, serif; font-style: italic; color: var(--brass); font-size: 15px; }
.sec-head h2 { font-size: clamp(20px, 3.4vw, 26px); }
.sec-head .hint { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }

/* ============================================================
   雷达视图
   ============================================================ */
.hero { position: relative; margin: 0 calc(-1 * clamp(14px, 3.6vw, 36px)); padding: 30px clamp(14px, 3.6vw, 36px) 26px; overflow: hidden; }
.hero-canvas { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: min(72vw, 460px); aspect-ratio: 1; opacity: .5; pointer-events: none; }
.hero-inner { position: relative; }
.hero .eyebrow { font-size: 12px; letter-spacing: .22em; color: var(--brass-ink); font-weight: 600; margin-bottom: 10px; }
.hero h1 { font-size: clamp(30px, 6.4vw, 54px); line-height: 1.14; font-weight: 900; max-width: 15em; }
.hero h1 em { font-style: normal; color: var(--terra); }
.hero .sub { margin-top: 12px; font-size: 15px; color: var(--ink-2); max-width: 34em; }
.hero .pledge { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.hero .pledge span { font-size: 12px; color: var(--ink-3); letter-spacing: .05em; display: inline-flex; align-items: center; gap: 5px; }
.hero .pledge b { color: var(--pine); font-weight: 700; }

.radar-panel { margin-top: 8px; padding: 20px clamp(16px, 3vw, 26px); }
.rp-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-bottom: 16px; }
.rp-label { font-size: 12.5px; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; min-width: 52px; }
.rp-group { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.from-input { width: 130px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); font-weight: 600; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: var(--paper); }
.stepper button { width: 36px; height: 36px; font-size: 17px; color: var(--ink-2); }
.stepper button:hover { background: var(--surface-2); }
.stepper b { min-width: 58px; text-align: center; font-family: Georgia, serif; font-size: 16px; }

.scope-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.scope-switch button { padding: 8px 18px; font-size: 13.5px; color: var(--ink-2); }
.scope-switch button.on { background: var(--pine); color: #F2F7F3; font-weight: 600; }

/* 推荐结果 */
.top-grid { display: grid; gap: 16px; margin-top: 6px; }
.top-card { position: relative; padding: 22px 22px 18px; overflow: hidden; cursor: pointer; }
.top-card .rank {
  position: absolute; top: 14px; right: 18px;
  font-family: Georgia, serif; font-style: italic; font-size: 15px; color: var(--brass);
}
.top-card .edge { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--terra), var(--brass)); border-radius: 4px 0 0 4px; }
.top-card h3 { font-size: clamp(26px, 5vw, 34px); font-weight: 900; line-height: 1.1; }
.top-card .prov { font-size: 12.5px; letter-spacing: .12em; color: var(--ink-3); margin: 2px 0 8px; }
.top-card .tagline { font-size: 14.5px; color: var(--ink-2); margin-bottom: 12px; }
.reasons { display: grid; gap: 7px; margin: 10px 0 4px; }
.reasons li { list-style: none; display: flex; gap: 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.reasons li::before { content: "◆"; color: var(--terra); font-size: 9px; padding-top: 4px; flex: none; }
.warns { display: grid; gap: 5px; margin-top: 8px; }
.warns li { list-style: none; font-size: 12.5px; color: var(--brass); display: flex; gap: 7px; }
.warns li::before { content: "△"; flex: none; }
.top-card .acts { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }

.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 14px; }
.mini-card { padding: 15px 16px; cursor: pointer; }
.mini-card h4 { font-family: var(--serif); font-size: 19px; }
.mini-card .prov { font-size: 11.5px; color: var(--ink-3); letter-spacing: .1em; margin: 1px 0 6px; }
.mini-card .why { font-size: 12px; color: var(--ink-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   城市视图（探索）
   ============================================================ */
.explore-head { margin-top: 22px; }
.search-row { display: flex; gap: 10px; margin: 14px 0 6px; }
.search-row input { flex: 1; }
.const-wrap { position: relative; margin-top: 14px; }
.const-canvas { width: 100%; height: clamp(240px, 42vw, 420px); display: block; border-radius: var(--r-card); border: 1px solid var(--brass-line); background: linear-gradient(160deg, var(--surface), var(--surface-2)); }
.const-cap { position: absolute; left: 14px; bottom: 12px; font-size: 11.5px; color: var(--ink-3); letter-spacing: .08em; }
.region-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.region-tabs::-webkit-scrollbar { display: none; }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 12px; margin-top: 14px; }
.city-card { position: relative; padding: 16px; cursor: pointer; overflow: hidden; }
.city-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--terra), var(--brass)); transform: scaleX(0); transform-origin: left; transition: transform var(--t-card) var(--ease-out); }
.city-card:hover::before { transform: scaleX(1); }
.city-card h4 { font-family: var(--serif); font-size: 20px; display: flex; align-items: center; gap: 7px; }
.city-card .deep-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terra); flex: none; }
.city-card .prov { font-size: 11.5px; color: var(--ink-3); letter-spacing: .1em; margin: 1px 0 7px; }
.city-card .tl { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.city-card .foot { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ============================================================
   城市档案（sheet 深读）
   ============================================================ */
.profile { animation: viewIn var(--t-enter) var(--ease-out); }
.profile-top { display: flex; align-items: center; gap: 10px; padding: 14px 0 0; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); padding: 7px 14px 7px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); }
.back-btn:hover { border-color: var(--brass); }
.profile-hero { position: relative; padding: 26px 0 6px; overflow: hidden; }
.profile-hero .cityname { font-size: clamp(44px, 11vw, 92px); font-weight: 900; line-height: 1.02; letter-spacing: .02em; }
.profile-hero .cityname small { display: block; font-family: var(--sans); font-weight: 400; font-size: 12.5px; letter-spacing: .26em; color: var(--ink-3); margin-top: 8px; }
.profile-hero .tagline { font-size: clamp(15px, 2.4vw, 18px); color: var(--ink-2); margin-top: 12px; max-width: 36em; font-family: var(--serif); }
.profile-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.profile-acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

.bento { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 18px; }
.block { padding: 20px 20px 18px; }
.block > h3 { display: flex; align-items: center; gap: 9px; font-size: 18.5px; margin-bottom: 13px; }
.block > h3 .b-ico { font-size: 17px; }
.block > h3 .b-count { font-family: Georgia, serif; font-style: italic; font-size: 13px; color: var(--brass-ink); font-weight: 400; }
.block .desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }

.chips-flow { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-flow .item {
  font-size: 13px; padding: 6px 12px; border-radius: 9px;
  background: var(--paper); border: 1px solid var(--line-soft); color: var(--ink-2);
}
.chips-flow .item.link { cursor: pointer; }
.chips-flow .item.link:hover { border-color: var(--brass); color: var(--ink); }

.list-rows { display: grid; gap: 9px; }
.list-rows .row { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.62; color: var(--ink-2); }
.list-rows .row::before { content: "—"; color: var(--brass); flex: none; }
.list-rows .row .nav-a { color: var(--pine); font-size: 12px; white-space: nowrap; border-bottom: 1px dashed var(--brass-line); margin-left: 4px; }

.block.avoid { background: linear-gradient(160deg, var(--danger-soft), var(--surface)); }
.block.avoid > h3 { color: var(--danger); }
.block.avoid .list-rows .row::before { content: "✕"; color: var(--danger); font-size: 11px; padding-top: 3px; }
.block.etiq .list-rows .row::before { content: "○"; color: var(--pine); font-size: 11px; padding-top: 3px; }

/* 十二月历 */
.months-strip { display: flex; gap: 9px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; }
.months-strip::-webkit-scrollbar { display: none; }
.m-cell { flex: none; width: 128px; scroll-snap-align: start; padding: 12px 12px 11px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line-soft); }
.m-cell.now { border-color: var(--terra); background: var(--terra-soft); }
.m-cell.best { box-shadow: inset 0 0 0 1px var(--brass-line); }
.m-cell .m-n { font-family: Georgia, serif; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.m-cell .m-n .ic { font-size: 15px; }
.m-cell .m-t { font-size: 11px; color: var(--ink-3); margin: 3px 0 6px; font-family: Georgia, serif; }
.m-cell .m-what { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; }

/* 物候/野生卡 */
.pheno-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pheno { padding: 12px 13px; border-radius: 11px; background: var(--paper); border: 1px solid var(--line-soft); }
.pheno .p-name { font-weight: 600; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.pheno .p-when { font-size: 11.5px; color: var(--terra); margin: 4px 0 2px; }
.pheno .p-where { font-size: 12px; color: var(--ink-2); line-height: 1.5; }

/* 住宿区 */
.stay-grid { display: grid; gap: 9px; }
.stay { display: flex; gap: 12px; align-items: baseline; padding: 10px 13px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line-soft); }
.stay b { font-size: 14px; flex: none; font-family: var(--serif); }
.stay span { font-size: 12.5px; color: var(--ink-2); }

/* 一人食 */
.solo-cols { display: grid; gap: 12px; }
.solo-cols h4 { font-size: 13px; letter-spacing: .06em; color: var(--pine); margin-bottom: 8px; }
.solo-cols .hardline h4 { color: var(--ink-3); }
.solo-tip { margin-top: 12px; font-size: 12.5px; color: var(--brass); background: var(--paper); border: 1px dashed var(--brass-line); border-radius: 10px; padding: 9px 12px; }

/* 档案内收藏态 */
.fav-btn.on { background: var(--terra); color: #FFF6EF; border-color: var(--terra); }
.visited-btn.on { background: var(--pine); color: #F2F7F3; border-color: var(--pine); }

/* ============================================================
   行囊视图
   ============================================================ */
.plan-new { padding: 20px; margin-top: 20px; }
.plan-new .rp-row { margin-bottom: 12px; }
.trip-list { display: grid; gap: 12px; margin-top: 16px; }
.trip-card { padding: 18px 20px; cursor: pointer; display: flex; align-items: center; gap: 16px; }
.trip-card .t-city { font-family: var(--serif); font-size: 24px; font-weight: 900; }
.trip-card .t-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.trip-card .t-go { margin-left: auto; color: var(--brass); font-size: 18px; }

.itin { margin-top: 6px; }
.itin-day { padding: 16px 0 4px; }
.itin-day .d-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.itin-day .d-num { font-family: Georgia, serif; font-style: italic; font-size: 26px; color: var(--terra); font-weight: 700; }
.itin-day .d-tip { font-size: 12px; color: var(--brass); }
.slots { display: grid; gap: 0; border-left: 1px solid var(--brass-line); margin-left: 7px; }
.slot { position: relative; padding: 7px 0 7px 22px; display: flex; gap: 10px; align-items: baseline; }
.slot::before { content: ""; position: absolute; left: -4px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.slot .s-t { font-size: 11px; letter-spacing: .1em; color: var(--ink-3); min-width: 34px; flex: none; }
.slot .s-txt { font-size: 14px; color: var(--ink); line-height: 1.55; }
.slot .s-swap { font-size: 11px; color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 9px; flex: none; opacity: .75; }
.slot .s-swap:hover { color: var(--terra); border-color: var(--terra); opacity: 1; }
.slot .s-nav { font-size: 11px; color: var(--pine); border-bottom: 1px dashed var(--brass-line); flex: none; }

.pace-warn { margin: 10px 0; padding: 10px 14px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 13px; }

/* 预算 */
.budget-box { padding: 18px 20px; }
.budget-total { font-family: Georgia, serif; font-size: clamp(34px, 7vw, 46px); font-weight: 700; }
.budget-total small { font-size: 14px; color: var(--ink-3); font-family: var(--sans); margin-left: 6px; }
.b-bars { display: grid; gap: 9px; margin-top: 14px; }
.b-bar { display: grid; grid-template-columns: 92px 1fr 74px; align-items: center; gap: 10px; font-size: 13px; }
.b-bar .k { color: var(--ink-2); }
.b-bar .track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.b-bar .fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--pine), var(--brass)); transition: width .8s var(--ease-out); transform-origin: left center; }
.b-bar .v { text-align: right; font-family: Georgia, serif; color: var(--ink-2); }

/* 装备 */
.pack-group { margin-top: 14px; }
.pack-group h4 { font-size: 14.5px; margin-bottom: 9px; display: flex; gap: 7px; }
.pack-items { display: grid; gap: 6px; }
.pack-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); padding: 7px 10px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line-soft); cursor: pointer; }
.pack-item .box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--brass-line); display: grid; place-items: center; font-size: 11px; color: transparent; flex: none; transition: all var(--t-micro); }
.pack-item.done { color: var(--ink-3); text-decoration: line-through; }
.pack-item.done .box { background: var(--pine); border-color: var(--pine); color: #fff; }

/* 安全卡 */
.safety-card { border: 2px solid var(--ink); border-radius: 16px; padding: 20px; background: var(--surface); }
.safety-card h3 { display: flex; align-items: center; gap: 8px; font-size: 19px; margin-bottom: 4px; }
.safety-card .s-sub { font-size: 12px; color: var(--ink-3); letter-spacing: .1em; margin-bottom: 14px; }
.safety-card dl { display: grid; gap: 10px; }
.safety-card dt { font-size: 11.5px; letter-spacing: .12em; color: var(--brass); font-weight: 600; }
.safety-card dd { font-size: 14px; color: var(--ink); margin: 2px 0 0; line-height: 1.6; }

/* ============================================================
   我的视图
   ============================================================ */
.me-sec { margin-top: 20px; padding: 18px 20px; }
.me-sec h3 { font-size: 17px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.set-row:last-child { border-bottom: none; }
.set-row .k { font-size: 14px; color: var(--ink-2); min-width: 72px; }
.set-row .ctl { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.note-area { width: 100%; min-height: 74px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); padding: 10px 12px; font-size: 13.5px; resize: vertical; }
.manifesto { font-family: var(--serif); font-size: 15px; line-height: 2; color: var(--ink-2); }
.manifesto b { color: var(--terra); }
.install-steps { display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.install-steps li { margin-left: 18px; }

/* ============================================================
   响应式：桌面升维
   ============================================================ */
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .topnav { display: flex; }
  .toast { bottom: 30px; }
  .modal-mask { align-items: center; padding: 20px; }
  .modal-box { border-radius: 20px; max-height: 84vh; }
  .top-grid { grid-template-columns: repeat(3, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .block.wide { grid-column: span 2; }
  .solo-cols { grid-template-columns: 1.4fr 1fr; }
  .stay-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding-top: 46px; padding-bottom: 40px; }
}
@media (min-width: 1080px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .block.wide { grid-column: span 2; }
  .block.full { grid-column: 1 / -1; }
  .profile-grid { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }
  .profile-side { position: sticky; top: 84px; }
}
@media (max-width: 759px) {
  .brand-sub { display: none; }
  .top-grid { grid-template-columns: 1fr; }
  .hero-canvas { opacity: .3; right: -26%; }
}

/* 打印安全卡 */
@media print {
  .topbar, .tabbar, .toast, .paper-grain { display: none !important; }
}

/* 无动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}

/* ============================================================
   V2 · 道德经改版：先见精选一点展开 / 锚点 / 本月看点 / 小抽屉
   ============================================================ */
button.item.act { cursor: pointer; transition: all var(--t-micro); }
button.item.act:hover { border-color: var(--brass); transform: translateY(-1px); }
button.item.act:active { transform: scale(.96); }
.chips-flow .item.top { background: var(--terra-soft); color: var(--terra); border-color: transparent; font-weight: 600; }
.tap-hint { margin-top: 10px; font-size: 11.5px; color: var(--ink-3); }

.fold { overflow: hidden; transition: max-height .45s var(--ease-out); }
.fold.folded { -webkit-mask-image: linear-gradient(#000 58%, transparent); mask-image: linear-gradient(#000 58%, transparent); }
.fold.folded.f-chips { max-height: 122px; }
.fold.folded.f-rows { max-height: 200px; }
.fold.folded.f-grid { max-height: 240px; }
.fold-btn { display: flex; align-items: center; gap: 6px; margin: 8px auto 0; padding: 7px 16px; border-radius: var(--r-pill); border: 1px dashed var(--brass-line); color: var(--brass); font-size: 12.5px; transition: all var(--t-micro); }
.fold-btn:hover { border-style: solid; color: var(--terra); }
.fold-btn i { font-style: normal; transition: transform .3s; }
.fold-btn:hover i { transform: translateY(2px); }

.anchor-nav { position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 30; display: flex; gap: 6px; overflow-x: auto; padding: 9px 10px; margin-top: 16px; border-radius: var(--r-pill); border: 1px solid var(--brass-line); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.anchor-nav::-webkit-scrollbar { display: none; }
.anchor-nav .chip { flex: none; border-color: transparent; background: transparent; }
.anchor-nav .chip.on { background: var(--ink); color: var(--paper); }
.block { scroll-margin-top: calc(124px + env(safe-area-inset-top)); }

.now-card { background: linear-gradient(150deg, var(--terra-soft), var(--surface) 72%); border-color: rgba(199, 92, 61, .4); margin-top: 16px; }
.now-card h3 { color: var(--terra); display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 8px; }
.now-what { font-family: var(--serif); font-size: 16.5px; line-height: 1.75; }
.ping { width: 10px; height: 10px; border-radius: 50%; background: var(--terra); position: relative; flex: none; }
.ping::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--terra); animation: ping 1.8s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

.b-ico { display: inline-block; }
.block.in .b-ico { animation: icoPop .55s var(--ease-out) .12s both; }
@keyframes icoPop { 0% { transform: scale(.4) rotate(-12deg); } 60% { transform: scale(1.22) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }

.p-ico { font-style: normal; display: inline-block; }
.pheno:hover .p-ico { animation: bob .7s ease-in-out infinite alternate; }
.item.bob { animation: bobSoft 3.4s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-3px) rotate(8deg); } }
@keyframes bobSoft { to { transform: translateY(-2px); } }

.m-cell.now { position: relative; }
.m-cell.now::before { content: ""; position: absolute; inset: -1px; border-radius: 12px; border: 1px solid var(--terra); animation: breathe 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes breathe { 50% { opacity: .2; } }

.sheet-acts { display: grid; gap: 10px; }
.sheet-acts .btn { width: 100%; }
.go-links { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.go { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: var(--r-pill); background: var(--pine); color: #F2F7F3; font-size: 13px; font-weight: 600; transition: transform var(--t-micro), box-shadow var(--t-micro); }
.go:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ── 雷达候补：轻推语 + 再扫描 ── */
.radar-nudge { margin: 4px 2px 0; font-size: 13px; color: var(--ink-3); font-style: italic; }
.more-foot { display: grid; place-items: center; margin: 18px 0 6px; }

/* ── 城市选择器抽屉 ── */
.picker-input { cursor: pointer; }
.city-picker { max-height: 84vh; display: flex; flex-direction: column; }
.city-picker .search-row { margin: 12px 0 0; }
.picker-body { overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; padding-right: 2px; }
.pick-group { margin-bottom: 14px; }
.pick-group h5 { font-size: 12.5px; color: var(--ink-3); margin: 0 0 8px; font-weight: 600; letter-spacing: .04em; }
.pick-group h5 span { color: var(--brass); font-style: italic; margin-left: 2px; }
.pick-flow { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-chip { padding: 8px 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; transition: border-color var(--t-micro), background var(--t-micro); }
.pick-chip:hover { border-color: var(--brass-line); }
.pick-chip.on { background: var(--terra); color: #fff; border-color: var(--terra); }
.pick-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); display: inline-block; }
.pick-chip.on .dot { background: rgba(255, 255, 255, .82); }

/* ── 微交互：底栏图标弹跳 / 胶囊落墨 / 笔记已存 / 出发倒计时 ── */
.tabbar a.on i { animation: tabPop .34s var(--ease-out); }
@keyframes tabPop { 0% { transform: translateY(-1px) scale(1); } 45% { transform: translateY(-4px) scale(1.16); } 100% { transform: translateY(-1px) scale(1); } }
.chip.on, .chip.on-terra { animation: chipPop .28s var(--ease-out); }
@keyframes chipPop { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } }
.note-saved { display: block; text-align: right; font-size: 12px; color: var(--pine); opacity: 0; transition: opacity var(--t-card); margin-top: 5px; pointer-events: none; }
.note-saved.show { opacity: 1; }
.trip-card .t-cd { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--terra); background: var(--terra-soft); padding: 2px 8px; border-radius: var(--r-pill); vertical-align: middle; }
.rp-hint { font-size: 11.5px; color: var(--ink-3); }

/* 城市之声：一城一歌 · 黑胶唱片旋转 + 深链正版播放 */
.city-sound { background: linear-gradient(155deg, var(--terra-soft), var(--surface) 76%); border-color: var(--brass-line); }
.city-sound > h3 { display: flex; align-items: center; gap: 8px; }
.cs-body { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.cs-disc { flex: none; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--brass) 0 11%, #241d18 12% 15%, #2c241d 16% 46%, #1d1712 47% 100%);
  position: relative; box-shadow: 0 3px 12px rgba(0, 0, 0, .28); animation: spin 6s linear infinite; }
.cs-disc::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .07); }
.cs-needle { position: absolute; top: -4px; right: 3px; width: 3px; height: 30px; background: var(--terra); border-radius: 3px; transform-origin: top center; transform: rotate(20deg); }
.cs-info { flex: 1; min-width: 0; }
.cs-song { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.3; }
.cs-artist { font-size: 12.5px; color: var(--brass); margin-left: 8px; font-weight: 400; }
.cs-why { font-size: 13px; color: var(--ink-2); line-height: 1.62; margin: 5px 0 10px; }
.cs-acts { display: flex; align-items: center; gap: 14px; }
.cs-alt { font-size: 12.5px; color: var(--brass); text-decoration: none; border-bottom: 1px dotted var(--brass-line); }
.cs-alt:hover { color: var(--terra); }
.cs-foot { margin-top: 10px; font-size: 11.5px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 攻略卡：选天数即出逐日游玩指南 */
.guide-card .guide-ctrl { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 2px; }
.g-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g-k { font-size: 12.5px; color: var(--ink-3); flex: none; width: 44px; }
.g-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.g-chips .chip { padding: 5px 12px; font-size: 13px; }
.g-day { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--brass-line); }
.g-day:first-child { border-top: none; padding-top: 4px; }
.g-dhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.g-dn { font-family: Georgia, serif; font-style: italic; font-size: 15px; color: var(--terra); font-weight: 600; }
.g-slots { display: flex; flex-direction: column; gap: 1px; }
.g-slot { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 13.5px; }
.g-t { flex: none; width: 34px; font-size: 11.5px; color: var(--brass); text-align: right; }
.g-txt { flex: 1; line-height: 1.52; }
.g-slot .s-nav { flex: none; }
.guide-foot { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* 「我的」= 旅行手账：红页边 + 装订线，卡片像一页页翻落定案 */
.me-sec { position: relative; padding-left: 40px; }
.me-sec::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 26px; width: 1px; background: rgba(199, 92, 61, .26); }
.me-sec::after { content: ""; position: absolute; top: 16px; bottom: 16px; left: 14px; width: 3px; border-radius: 3px; background: repeating-linear-gradient(var(--brass) 0 2px, transparent 2px 11px); opacity: .42; }
.theme-song { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--brass-line); font-size: 13px; color: var(--brass); }
.theme-song a { color: var(--terra); border-bottom: 1px dashed var(--terra); text-decoration: none; }
.dice-btn { margin-top: 22px; border-style: dashed; letter-spacing: .02em; }
.dice-btn:hover { border-color: var(--terra); color: var(--terra); }

/* ══ 惊喜层（Fable 菜单）══ */
/* A1 城市朱印：hero 右上角一枚朱文印，进页"啪"地盖下 */
.profile-hero { position: relative; }
.hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }  /* F1 物候粒子层 */
.profile-hero > *:not(.hero-particles):not(.seal):not(.diorama) { position: relative; z-index: 1; }
.seal { position: absolute; top: 18px; right: 2px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--serif); font-size: 23px; font-weight: 700; color: var(--terra); background: transparent;
  border: 2px solid var(--terra); border-radius: 9px; box-shadow: inset 0 0 0 1px var(--terra); transform: rotate(-6deg); opacity: .88; pointer-events: none; }
@keyframes sealStamp { 0% { transform: rotate(-6deg) scale(1.7); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotate(-6deg) scale(1); opacity: .88; } }

/* A2 区块标题墨线：卡进视口时从左"拉"出（骑现有 reveal 的 .in） */
.block > h3 { position: relative; }
.block > h3::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0; background: var(--brass-line); transition: width .6s var(--ease-out) .12s; }
.block.in > h3::after { width: 100%; }

/* A3 条目墨晕：按下从底部渗墨又收干 */
button.item.act { position: relative; overflow: hidden; }
button.item.act::after { content: ""; position: absolute; left: 50%; bottom: -32%; width: 150%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%) scale(.3); opacity: 0; pointer-events: none;
  background: radial-gradient(circle, var(--terra-soft), transparent 66%); }
button.item.act:active::after { opacity: .9; transform: translateX(-50%) scale(1); transition: opacity .04s, transform .38s var(--ease-out); }

/* B1 阅读航迹线：锚点导航底边随阅读进度伸长（scroll-driven，无 JS；不支持则不出现） */
@supports (animation-timeline: scroll()) {
  .anchor-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left; transform: scaleX(0);
    background: repeating-linear-gradient(90deg, var(--terra) 0 5px, transparent 5px 9px); animation: trackScroll linear both; animation-timeline: scroll(root block); }
}
@keyframes trackScroll { to { transform: scaleX(1); } }

/* D1 纸飞机 + E1 季节角标 */
.plane-fly { position: fixed; z-index: 60; font-size: 26px; pointer-events: none; will-change: transform; }
.season-badge { font-size: 10px; vertical-align: super; margin-left: 1px; opacity: .9; }
.empty-ico { display: block; font-size: 30px; margin: 0 auto 8px; width: max-content; }
.empty-ico.bob { animation: bobSoft 3s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: no-preference) {
  .seal { animation: sealStamp .4s cubic-bezier(.3, 1.5, .5, 1) both; }
}
@keyframes contourDrift { to { background-position: 48px 34px; } }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .contour { animation: contourDrift 72s ease-in-out infinite alternate; }        /* 等高线极慢漂移，底图像活的 */
  .me-sec.rv { transform: perspective(1200px) rotateX(8deg) translateY(20px); transform-origin: 50% 0; }
  .me-sec.rv.in { transform: none; }                                              /* 翻页落定 */
  .b-bar .fill { animation: barGrow .7s var(--ease-out) both; }                    /* 预算条从左生长 */
}

@media (prefers-reduced-motion: reduce) {
  .ping::after, .item.bob, .m-cell.now::before, .block.in .b-ico, .pheno:hover .p-ico,
  .tabbar a.on i, .chip.on, .chip.on-terra, .cs-disc, .empty-ico.bob, .seal { animation: none !important; }
}

/* ══════════════════════════════════════════════════════
   大惊喜层 · 面上的 3D / 昼夜 / 盖章（Fable 设计菜单 v1）
   守则：零依赖 · 离线可跑 · 只碰 transform/opacity/clip-path · reduce-motion 全降级
   ══════════════════════════════════════════════════════ */

/* P0-1 点灯仪式：日落月升 + 星子扎眼（fx.lightCeremony 注入的一次性天体层，叠在 switchTheme 圆形擦除之上） */
.sky-ceremony { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.sky-ceremony .cel { position: absolute; left: 0; top: 0; width: 68px; height: 68px; border-radius: 50%; will-change: transform, opacity; }
.sky-ceremony .cel.sun { background: radial-gradient(circle at 38% 38%, #FFEDB0, #F5A623 66%, #E07B2C); box-shadow: 0 0 64px 14px rgba(245, 166, 35, .45); }
.sky-ceremony .cel.moon { background: radial-gradient(circle at 40% 36%, #FBF7EC, #DADEEA 64%, #AFB6C9); box-shadow: 0 0 46px 10px rgba(200, 212, 236, .38); }
.sky-ceremony .stars { position: absolute; left: 0; top: 0; width: 2.5px; height: 2.5px; border-radius: 50%; background: #FDF7E3; }

/* P0-3 过关盖章：屏幕中央砸下的朱印 + 墨渍迸溅 */
.stamp-stage { position: fixed; inset: 0; z-index: 75; pointer-events: none; }
.stamp { position: absolute; left: 50%; top: 43%; width: min(44vmin, 250px); aspect-ratio: 1;
  display: grid; place-items: center; align-content: center; gap: 4px; color: var(--terra);
  border: 4px solid var(--terra); border-radius: 20px; box-shadow: inset 0 0 0 2px var(--terra);
  background: radial-gradient(circle, rgba(199, 92, 61, .07), transparent 70%); will-change: transform, opacity; }
.stamp .s-main { font-family: var(--serif); font-weight: 900; font-size: min(11vmin, 56px); line-height: 1.05; letter-spacing: .04em; max-width: 88%; text-align: center; word-break: keep-all; }
.stamp .s-sub { font-family: var(--serif); font-size: min(3.6vmin, 18px); letter-spacing: .26em; opacity: .92; }
.stamp.still { transform: translate(-50%, -50%); }
.stamp-stage .splat { position: absolute; left: 50%; top: 43%; width: 15px; height: 15px; border-radius: 50%; background: var(--terra); opacity: 0; will-change: transform, opacity; }
.tabbar a.badge-pop i { animation: badgePop .5s var(--ease-out); }
.topnav a.badge-pop { animation: badgePop .5s var(--ease-out); }
@keyframes badgePop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-5px) scale(1.3); } 100% { transform: translateY(-1px) scale(1); } }

/* P0-2 立体书城池：档案页 hero 的无图视觉主角（程序化纸雕地平线，翻立 + 指针视差） */
.profile-hero { perspective: 1000px; }
/* 不在 .diorama 上设 overflow——非 visible 的 overflow 会强制 transform-style 退回 flat、杀死 translateZ 景深；裁剪交给 .profile-hero 自身的 overflow:hidden */
.diorama { position: absolute; inset: 0; z-index: 0; transform-style: preserve-3d; pointer-events: none; --px: 0; }
.diorama::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, transparent 30%, var(--dio-sky, var(--brass)) 112%); opacity: .46; }
.diorama .dio-l { position: absolute; inset: 0; color: var(--ink); transform-origin: 50% 100%; transform: translateZ(var(--z, 0px)) translateX(calc(var(--px) * var(--par, 0px))); will-change: transform; }
.diorama .dio-l svg { position: absolute; bottom: 0; left: -8%; width: 116%; height: 100%; display: block; }
.diorama .dio-l.l0 { --z: -95px; --par: 10px; opacity: .42; color: var(--dio-sky, var(--brass)); }   /* 远山用城市签名色，拉开与近山的色差 */
.diorama .dio-l.l1 { --z: -38px; --par: 22px; opacity: .5; }
.diorama .dio-l.l2 { --z: 12px; --par: 40px; opacity: .72; }   /* 近山收一档，浅色主题下不压成实心黑、给 hero 下半留空气 */
.diorama .dio-sun { position: absolute; width: 58px; height: 58px; border-radius: 50%; right: 15%; top: 15%; opacity: .72;
  background: radial-gradient(circle at 40% 40%, #FFE7A0, var(--dio-sky, #E8862E)); box-shadow: 0 0 34px 6px rgba(232, 134, 46, .22); transform: translateX(calc(var(--px) * 6px)); }
[data-theme="dark"] .diorama .dio-sun { background: radial-gradient(circle at 42% 38%, #FBF7EC, #C7CEE0); opacity: .78; box-shadow: 0 0 30px 5px rgba(220, 226, 240, .2); }
/* 层级：城池(0) < 物候粒子(1) < 文字(2) < 朱印(3) */
.profile-hero > .hero-particles { z-index: 1; }
.profile-hero > *:not(.hero-particles):not(.seal):not(.diorama) { position: relative; z-index: 2; }
.profile-hero > .seal { z-index: 3; }
/* 副标/省份在深色城池前的可读性微护（主题自适应：浅色用亮 halo、暗色用暗 halo） */
.profile-hero .cityname small, .profile-hero .tagline { text-shadow: 0 1px 9px var(--surface), 0 0 2px var(--surface); }

/* P0-4 登机牌：城市卡 3D 翻转到纯 CSS 登机牌背面 */
.city-grid .city-flip { perspective: 1100px; }
.city-flip .card3d { position: relative; transform-style: preserve-3d; transition: transform .62s var(--ease-out); min-height: 158px; }
.city-flip .card3d.flipped { transform: rotateY(180deg); }
.city-flip .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; min-height: 158px; }
.city-flip .f-front { position: relative; height: 100%; }
.city-flip .f-back { position: absolute; inset: 0; transform: rotateY(180deg); }
.flip-tab { position: absolute; top: 8px; right: 8px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; color: var(--brass); border: 1px solid var(--brass-line); background: var(--surface); opacity: .66; transition: all var(--t-micro); }
.flip-tab:hover { opacity: 1; color: var(--terra); border-color: var(--terra); transform: rotate(-16deg); }
.bpass { padding: 0; overflow: hidden; }
.bp { display: flex; flex-direction: column; height: 100%; padding: 12px 14px; gap: 7px; }
.bp-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: .1em; color: var(--brass); border-bottom: 1px dashed var(--brass-line); padding-bottom: 6px; }
.bp-flip { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--brass-line); color: var(--brass); font-size: 11px; display: grid; place-items: center; flex: none; transition: all var(--t-micro); }
.bp-flip:hover { color: var(--terra); border-color: var(--terra); transform: rotate(-16deg); }
.bp-route { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.bp-pt { text-align: center; }
.bp-pt b { font-family: Georgia, serif; font-size: 21px; display: block; line-height: 1; letter-spacing: .06em; color: var(--ink); }
.bp-pt span { font-size: 11px; color: var(--ink-3); }
.bp-arrow { color: var(--terra); font-size: 13px; }
.bp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bp-grid label { display: block; font-size: 8px; letter-spacing: .1em; color: var(--ink-3); }
.bp-grid b { font-family: Georgia, serif; font-size: 12.5px; color: var(--ink-2); }
.bp-bar { height: 20px; margin-top: auto; opacity: .78; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px); }
.bp-go { width: 100%; }

/* ============ 信息页（关于/隐私/帮助）+ 首访引导 ============ */
.sec-head .crumb { font-size: 13px; color: var(--brass); border-bottom: 1px dashed var(--brass-line); padding-bottom: 1px; }
.sec-head .crumb:hover { color: var(--terra); }
.doc-link { color: var(--terra); border-bottom: 1px dashed var(--brass-line); padding-bottom: 1px; white-space: nowrap; }
.doc-link:hover { border-bottom-style: solid; }
.doc-row { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
.me-sec .desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }
.me-sec .desc b { color: var(--ink); }

/* FAQ 折叠项：复用卡片语言 */
.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 2px 16px; margin: 10px 0; box-shadow: var(--shadow-sm); }
.faq > summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 14.5px;
  color: var(--ink); padding: 13px 24px 13px 0; position: relative; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: "＋"; position: absolute; right: 2px; top: 12px; color: var(--brass);
  font-size: 16px; transition: transform var(--t-micro) var(--ease-ui); }
.faq[open] > summary::after { transform: rotate(45deg); }
.faq-a { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; padding: 0 0 14px; }
.faq-a b { color: var(--ink); }
.faq-a a { color: var(--terra); border-bottom: 1px dashed var(--brass-line); }

/* 首访引导 */
.modal-box.onboard { max-width: 480px; text-align: center; border-radius: 20px;
  padding: 26px 22px calc(24px + env(safe-area-inset-bottom)); }
.ob-mark { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.onboard h3 { font-size: 21px; margin-bottom: 8px; }
.ob-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; margin-bottom: 16px; }
.ob-sub b { color: var(--terra); }
.ob-tabs { text-align: left; display: grid; gap: 9px; margin: 0 auto 16px; max-width: 340px; }
.ob-tabs li { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ob-tabs b { color: var(--ink); font-weight: 600; }
.ob-from { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px;
  font-size: 13.5px; color: var(--ink-2); }
.ob-from .picker-input { width: auto; min-width: 120px; text-align: center; cursor: pointer; }
.ob-acts { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ob-acts .btn.terra { min-width: 180px; }
@media (min-width: 560px) { .modal-mask:has(.onboard) { align-items: center; padding: 20px; } }

/* ============ a11y：键盘焦点可见 + 触控热区 ============ */
:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 3px; }
.field:focus-visible, .picker-input:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; }
/* 鼠标点击不弹环，仅键盘导航时出现（现代浏览器 :focus-visible 已内建此语义） */
.modal-x { min-width: 40px; min-height: 40px; }

/* 跳到主内容：默认藏在屏幕外，键盘聚焦时滑入（WCAG 2.4.1） */
.skip-link { position: fixed; top: -60px; left: 12px; z-index: 200;
  background: var(--terra-deep); color: #FFF6EF; padding: 10px 16px;
  border-radius: 8px; font-size: 14px; box-shadow: var(--shadow-md);
  transition: top .18s var(--ease-out); }
.skip-link:focus { top: calc(12px + env(safe-area-inset-top)); }
#view:focus { outline: none; }  /* 落焦为跳转目标，不给整块主区画环 */