/* ==========================================================================
   滦平文旅 · 微信小程序高保真原型
   设计系统：轻量 / 克制 / 山野气息（松绿 + 陶土 + 米纸底）
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---------- tokens ---------- */
:root {
  --paper: #F6F5F0;
  --paper-2: #EFEDE5;
  --card: #FFFFFF;
  --ink: #16211C;
  --ink-2: #4C574F;
  --ink-3: #8A928B;
  --ink-4: #B3B8B0;
  --line: #E7E4DA;
  --line-2: #F1EFE7;
  --brand: #2B6A56;
  --brand-2: #1E5142;
  --brand-soft: #E8F0EA;
  --clay: #BE6B3C;
  --clay-soft: #FAEEE6;
  --gold: #A9843F;
  --stage: #0F1411;

  --r-xs: 6px;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;

  --sh-s: 0 1px 2px rgba(22, 33, 28, .05);
  --sh-m: 0 8px 28px -16px rgba(22, 33, 28, .35);
  --sh-l: 0 24px 60px -28px rgba(22, 33, 28, .45);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "HarmonyOS Sans SC", "Noto Sans SC", "Source Han Sans SC",
          "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif;
}

/* ---------- stage / device ---------- */
body.stage {
  min-height: 100dvh;
  background:
    radial-gradient(120% 80% at 50% 0%, #1B241E 0%, var(--stage) 62%),
    var(--stage);
  font-family: var(--font);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  -webkit-font-smoothing: antialiased;
}
body.stage::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .5;
}
.frame { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.device {
  position: relative;
  width: 390px;
  height: min(844px, calc(100dvh - 96px));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 46px;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px #2A332D,
    0 0 0 11px #171D19,
    0 0 0 12px #2E3831,
    0 44px 90px -34px rgba(0,0,0,.85);
}

.frame__meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: .04em; color: #7E8C82;
}
.frame__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #47554C; }
.frame__meta a { color: #B9C9BE; border-bottom: 1px solid rgba(185,201,190,.35); padding-bottom: 1px; }
.frame__meta a:hover { color: #EAF1EC; }

/* 灵动岛 */
.island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 25px; border-radius: 14px; background: #0B0F0C;
  z-index: 60;
}

/* ---------- 微信外壳 ---------- */
.chrome { flex: none; background: var(--card); position: relative; z-index: 30; }

.sbar {
  height: 46px; padding: 0 20px 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.sbar__time { letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sbar__icons { color: var(--ink); opacity: .85; display: flex; align-items: center; }

.mbar {
  height: 44px; padding: 0 12px 0 8px;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid transparent;
}
.mbar__back {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink);
}
.mbar__back .ic { width: 20px; height: 20px; }
.mbar__back:active { background: var(--paper-2); }
.mbar__back.is-ghost { visibility: hidden; }
.mbar__title {
  flex: 1; font-size: 15px; font-weight: 600; letter-spacing: .02em;
  text-align: center; margin-left: 34px; /* 与右侧胶囊对称 */
}
.capsule {
  flex: none; width: 76px; height: 28px; border-radius: 14px;
  border: 1px solid rgba(22,33,28,.12);
  display: flex; align-items: center; background: rgba(255,255,255,.6);
}
.capsule b { flex: 1; text-align: center; font-size: 12px; color: #3B453E; line-height: 1; }
.capsule b + b { border-left: 1px solid rgba(22,33,28,.1); }
.capsule .c-dot { font-size: 13px; }

/* ---------- 屏幕 ---------- */
.screen {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  background: var(--paper);
  scrollbar-width: none;
  overscroll-behavior: contain;
  position: relative;
}
.screen::-webkit-scrollbar { display: none; }
.screen.is-flush { background: #E9E5D9; }

/* 安全区 */
.tabbar {
  flex: none; height: 62px; padding: 6px 8px 10px;
  display: flex; background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  position: relative; z-index: 40;
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-3); font-size: 10px; letter-spacing: .02em;
  padding-top: 4px;
}
.tab .ic { width: 23px; height: 23px; }
.tab.is-on { color: var(--brand); }
.tab.is-on .ic { opacity: 1; }
.tab .ic { opacity: .78; }

/* ---------- 排版 ---------- */
.pad { padding-left: 16px; padding-right: 16px; }
.sec { margin-top: 26px; }
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 0 16px; margin-bottom: 12px;
}
.sec-head h2 { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.sec-head .sub { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.sec-head .more { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 2px; }
.sec-head .more .ic { width: 14px; height: 14px; }

.kicker {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.page-title { font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.page-lead { font-size: 13px; color: var(--ink-2); line-height: 1.75; text-wrap: pretty; }
.muted { color: var(--ink-3); }
.tiny { font-size: 11px; }
.sm { font-size: 12px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px; border-radius: 20px;
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  background: var(--brand); color: #fff;
  transition: transform .16s ease, opacity .16s ease;
}
.btn:active { transform: scale(.97); opacity: .92; }
.btn .ic { width: 17px; height: 17px; }
.btn--ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn--soft { background: var(--brand-soft); color: var(--brand-2); }
.btn--clay { background: var(--clay); }
.btn--sm { height: 30px; padding: 0 13px; font-size: 12px; border-radius: 15px; }
.btn--block { display: flex; width: 100%; }
.btn--lg { height: 48px; border-radius: 24px; font-size: 15px; }

/* ---------- 标签 / 筛选 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 3px;
  height: 20px; padding: 0 7px; border-radius: 4px;
  font-size: 10px; letter-spacing: .03em;
  background: var(--paper-2); color: var(--ink-2);
}
.tag--brand { background: var(--brand-soft); color: var(--brand-2); }
.tag--clay { background: var(--clay-soft); color: #97522A; }
.tag--line { background: transparent; border: 1px solid var(--line); color: var(--ink-3); }

.chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 2px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 30px; padding: 0 14px; border-radius: 15px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- 卡片 / 列表 ---------- */
.card {
  background: var(--card); border-radius: var(--r-m);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-s);
}
.list { background: var(--card); border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line-2); }
.list__item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-2);
}
.list__item:last-child { border-bottom: 0; }
.list__item .ic-arrow { width: 15px; height: 15px; color: var(--ink-4); margin-left: auto; }

.hr { height: 1px; background: var(--line-2); margin: 0 16px; }

/* ---------- 风景占位（CSS 拟景） ---------- */
.scene {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(178deg, var(--sky1, #EAEDE4) 0%, var(--sky2, #D9E0D5) 62%, var(--sky2, #D9E0D5) 100%);
}
.scene::before, .scene::after { content: ""; position: absolute; inset: 0; }
.scene::before { background: var(--far, #B7C7B6); }
.scene::after { background: var(--near, #8CA491); }

.scene.a::before { clip-path: polygon(0 100%, 0 62%, 13% 46%, 25% 60%, 39% 27%, 53% 57%, 67% 37%, 81% 57%, 100% 43%, 100% 100%); }
.scene.a::after  { clip-path: polygon(0 100%, 0 78%, 18% 63%, 34% 75%, 50% 57%, 66% 75%, 84% 63%, 100% 73%, 100% 100%); }
.scene.b::before { clip-path: polygon(0 100%, 0 68%, 21% 53%, 39% 63%, 57% 45%, 75% 59%, 100% 47%, 100% 100%); }
.scene.b::after  { clip-path: polygon(0 100%, 0 84%, 25% 71%, 45% 79%, 63% 67%, 83% 79%, 100% 71%, 100% 100%); }
.scene.c::before { clip-path: polygon(0 100%, 0 55%, 23% 49%, 47% 55%, 71% 47%, 100% 53%, 100% 100%); }
.scene.c::after  { clip-path: polygon(0 74%, 100% 71%, 100% 100%, 0 100%); opacity: .92; }
.scene.d::before { clip-path: polygon(0 100%, 0 66%, 9% 66%, 9% 56%, 21% 56%, 21% 66%, 33% 66%, 33% 52%, 45% 52%, 45% 66%, 58% 66%, 58% 58%, 70% 58%, 70% 66%, 82% 66%, 82% 54%, 94% 54%, 94% 66%, 100% 66%, 100% 100%); }
.scene.d::after  { clip-path: polygon(0 100%, 0 88%, 100% 84%, 100% 100%); }

.pal-green { --sky1: #EDF0E6; --sky2: #D6E0D3; --far: #B4C7B3; --near: #7F9B85; }
.pal-sand  { --sky1: #F2EDE1; --sky2: #E4DAC5; --far: #CDBB9A; --near: #A98F65; }
.pal-blue  { --sky1: #EAF0F1; --sky2: #D5E2E4; --far: #AFC5C9; --near: #7C9CA3; }
.pal-dusk  { --sky1: #ECEDF1; --sky2: #D3D4DE; --far: #ADB0C2; --near: #7A7E95; }
.pal-clay  { --sky1: #F5EDE4; --sky2: #EBDCCD; --far: #D6B79C; --near: #B08160; }
.pal-stone { --sky1: #EFEFEC; --sky2: #DEDED8; --far: #C2C2B9; --near: #94948B; }

/* 图标水印缩略图（无照片时的克制替代） */
.thumb {
  position: relative; flex: none; overflow: hidden;
  width: 96px; height: 96px; border-radius: var(--r-s);
  background: var(--brand-soft);
}
.thumb .ic {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 42%; height: 42%; color: var(--brand); opacity: .55;
}
.thumb--clay { background: var(--clay-soft); }
.thumb--clay .ic { color: var(--clay); }
.thumb--paper { background: var(--paper-2); }
.thumb--paper .ic { color: var(--ink-3); }
.thumb--72 { width: 72px; height: 72px; }
.thumb--56 { width: 56px; height: 56px; border-radius: var(--r-xs); }
.thumb--wide { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
.thumb--4x3 { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }

/* ---------- 价格 / 元信息 ---------- */
.price { color: var(--clay); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.price small { font-size: .68em; font-weight: 500; margin-right: 1px; }
.price--ink { color: var(--ink); }
.price .unit { font-size: 11px; font-weight: 400; color: var(--ink-3); margin-left: 2px; }
.meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.meta .sep { width: 1px; height: 9px; background: var(--line); }
.meta .ic { width: 12px; height: 12px; }
.rate { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--gold); font-weight: 600; }
.rate .ic { width: 12px; height: 12px; }

/* ---------- 首页 ---------- */
.home-top {
  padding: 6px 16px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--ink-2);
}
.home-top .loc { display: flex; align-items: center; gap: 4px; }
.home-top .loc .ic { width: 13px; height: 13px; color: var(--brand); }
.home-top .wx { display: flex; align-items: center; gap: 5px; color: var(--ink-3); }
.home-top .wx .ic { width: 14px; height: 14px; }

.searchbar {
  margin: 12px 16px 0; height: 40px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  font-size: 13px; color: var(--ink-3);
}
.searchbar .ic { width: 16px; height: 16px; }
.searchbar .sp { margin-left: auto; font-size: 10px; color: var(--ink-4); letter-spacing: .1em; }

.hero {
  margin: 14px 16px 0; border-radius: var(--r-l); overflow: hidden;
  position: relative; min-height: 208px; display: flex; align-items: flex-end;
  box-shadow: var(--sh-m);
}
.hero .scene { position: absolute; inset: 0; }
.hero__body {
  position: relative; z-index: 2; padding: 18px 18px 16px; width: 100%;
  background: linear-gradient(180deg, rgba(18,28,22,0) 0%, rgba(18,28,22,.58) 58%, rgba(16,26,20,.82) 100%);
  color: #fff;
}
.hero__kicker { font-size: 10px; letter-spacing: .22em; opacity: .9; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.hero__title { font-family: var(--serif); font-size: 27px; letter-spacing: .06em; margin: 6px 0 8px; line-height: 1.2; }
.hero__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero__meta { font-size: 11.5px; opacity: .82; display: flex; align-items: center; gap: 6px; }
.hero__btn {
  height: 32px; padding: 0 15px; border-radius: 16px; background: #fff; color: var(--brand-2);
  font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
}
.hero__btn .ic { width: 14px; height: 14px; }

/* 金刚区 */
.nav-grid {
  margin: 18px 8px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 0;
}
.nav-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 11px; color: var(--ink-2); letter-spacing: .01em;
}
.nav-grid .nb {
  width: 42px; height: 42px; border-radius: 13px;
  background: var(--card); border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--brand);
  box-shadow: var(--sh-s);
}
.nav-grid .nb .ic { width: 22px; height: 22px; }
.nav-grid a:nth-child(4n) .nb { color: var(--clay); }

/* 三键服务条 */
.quickbar {
  margin: 18px 16px 0; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-m);
  overflow: hidden;
}
.quickbar a {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 0; font-size: 12.5px; color: var(--ink-2);
  border-right: 1px solid var(--line-2);
}
.quickbar a:last-child { border-right: 0; }
.quickbar .ic { width: 16px; height: 16px; }
.quickbar a:nth-child(1) .ic { color: var(--clay); }
.quickbar a:nth-child(2) .ic { color: #B0453C; }
.quickbar a:nth-child(3) .ic { color: var(--brand); }

/* 活动横滑 */
.hscroll {
  display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 6px;
  scrollbar-width: none; scroll-snap-type: x mandatory;
}
.hscroll::-webkit-scrollbar { display: none; }
.act-card {
  flex: none; width: 186px; scroll-snap-align: start;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-m);
  overflow: hidden;
}
.act-card .scene { height: 92px; }
.act-card__b { padding: 11px 12px 13px; }
.act-card__d { font-size: 10px; letter-spacing: .1em; color: var(--clay); font-weight: 600; }
.act-card__t { font-size: 14px; font-weight: 600; margin: 5px 0 6px; line-height: 1.35; }

/* 门票小卡 */
.tk-card {
  flex: none; width: 232px; scroll-snap-align: start;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-m);
  overflow: hidden; display: flex; flex-direction: column;
}
.tk-card .scene { height: 118px; }
.tk-card__b { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 6px; }
.tk-card__t { font-size: 14.5px; font-weight: 600; letter-spacing: .01em; }

/* 民宿横排卡 */
.stay-row {
  display: flex; gap: 12px; padding: 12px; background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--r-m);
}
.stay-row + .stay-row { margin-top: 10px; }
.stay-row .scene { width: 104px; height: 104px; border-radius: var(--r-s); flex: none; }
.stay-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stay-row__b .t { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.stay-row__b .ft { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }

/* 商品三列 */
.goods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.goods__c { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; }
.goods__c .scene, .goods__c .thumb { height: 82px; width: 100%; border-radius: 0; }
.goods__c .b { padding: 8px 9px 10px; }
.goods__c .n { font-size: 12px; line-height: 1.4; margin-bottom: 6px; }

/* 资讯行 */
.news-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.news-row .scene { width: 84px; height: 62px; border-radius: var(--r-xs); flex: none; }
.news-row .t { font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.news-row .m { margin-top: 6px; font-size: 11px; color: var(--ink-4); display: flex; gap: 8px; }

/* ---------- 通用列表页 ---------- */
.page-lead-wrap { padding: 20px 16px 14px; }
.page-lead-wrap .kicker { margin-bottom: 8px; }

.filterbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246,245,240,.94); backdrop-filter: blur(10px);
  padding: 10px 0 10px; border-bottom: 1px solid var(--line-2);
}

.ticket-item {
  display: flex; gap: 13px; padding: 13px; background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--r-m);
}
.ticket-item + .ticket-item { margin-top: 10px; }
.ticket-item .scene { width: 108px; height: 108px; border-radius: var(--r-s); flex: none; }
.ticket-item__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ticket-item__t { font-size: 15px; font-weight: 600; letter-spacing: .01em; display: flex; align-items: center; gap: 6px; }
.ticket-item__ft { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }

/* 详情页 */
.detail-hero { position: relative; }
.detail-hero .scene { height: 208px; }
.detail-hero__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 40%); }
.detail-body { position: relative; margin-top: -22px; background: var(--paper); border-radius: 22px 22px 0 0; padding: 20px 16px 0; }
.detail-title { font-family: var(--serif); font-size: 24px; letter-spacing: .03em; line-height: 1.3; }
.detail-sub { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }

.info-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line-2); border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line-2);
}
.info-grid > div { background: var(--card); padding: 13px 12px; }
.info-grid .k { font-size: 10px; color: var(--ink-3); letter-spacing: .06em; }
.info-grid .v { font-size: 13px; margin-top: 4px; font-weight: 500; }

.tier {
  display: flex; align-items: center; gap: 12px; padding: 15px 14px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-m);
}
.tier + .tier { margin-top: 9px; }
.tier__b { flex: 1; }
.tier__n { font-size: 14px; font-weight: 600; }
.tier__d { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.tier.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }

.qty { display: flex; align-items: center; gap: 2px; }
.qty button {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-2); font-size: 15px; line-height: 1;
  background: var(--card);
}
.qty button:active { background: var(--paper-2); }
.qty__v { min-width: 26px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }

.actionbar {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 12px; background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  position: relative; z-index: 40;
}
.actionbar__price { flex: 1; }
.actionbar__price .n { font-size: 21px; }

/* ---------- 日历 ---------- */
.cal {
  margin: 0 16px; background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-m); padding: 14px 12px 10px;
}
.cal__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; }
.cal__m { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.cal__nav { display: flex; gap: 6px; }
.cal__nav button { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.cal__nav .ic { width: 15px; height: 15px; }
.cal__wk, .cal__days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__wk span { text-align: center; font-size: 10px; color: var(--ink-4); padding-bottom: 8px; letter-spacing: .06em; }
.cal__days button {
  position: relative; height: 40px; display: grid; place-items: center;
  font-size: 13px; color: var(--ink); border-radius: 10px; font-variant-numeric: tabular-nums;
}
.cal__days button.is-mute { color: var(--ink-4); }
.cal__days button.is-on { background: var(--brand); color: #fff; font-weight: 600; }
.cal__days button.is-today::after {
  content: ""; position: absolute; bottom: 5px; width: 3px; height: 3px; border-radius: 50%; background: var(--clay);
}
.cal__days button.is-on.is-today::after { background: #fff; }
.cal__days button .dot {
  position: absolute; top: 6px; right: 7px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--clay);
}
.cal__days button.is-on .dot { background: #F6C9A8; }

/* 活动行 */
.ev-row {
  display: flex; gap: 12px; padding: 14px 16px; background: var(--card);
  border-bottom: 1px solid var(--line-2);
}
.ev-row:last-child { border-bottom: 0; }
.ev-date {
  flex: none; width: 50px; text-align: center; padding-top: 2px;
}
.ev-date .d { font-size: 21px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.ev-date .m { font-size: 10px; color: var(--ink-3); margin-top: 4px; letter-spacing: .06em; }
.ev-row__b { flex: 1; min-width: 0; }
.ev-row__t { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.ev-row__i { font-size: 11.5px; color: var(--ink-3); line-height: 1.7; display: flex; align-items: center; gap: 5px; }
.ev-row__i .ic { width: 12px; height: 12px; }

/* ---------- 地图 ---------- */
.map-wrap { position: absolute; inset: 0; overflow: hidden; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.map-top { position: absolute; top: 10px; left: 0; right: 0; padding: 0 14px; pointer-events: auto; }
.map-search {
  height: 40px; border-radius: 20px; background: #fff; box-shadow: var(--sh-m);
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  font-size: 12.5px; color: var(--ink-3);
}
.map-search .ic { width: 15px; height: 15px; }
.map-cats {
  display: flex; gap: 7px; overflow-x: auto; margin-top: 10px; padding-bottom: 2px;
  scrollbar-width: none; pointer-events: auto;
}
.map-cats::-webkit-scrollbar { display: none; }
.map-cats .chip { height: 28px; padding: 0 11px; font-size: 12px; box-shadow: var(--sh-s); background: rgba(255,255,255,.96); }
.map-cats .chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.map-cats .chip.is-on .ic { color: #fff; }
.map-cats .chip .ic { width: 13px; height: 13px; }

.marker {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  pointer-events: auto; cursor: pointer;
}
.marker__pin {
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 15px;
  background: #fff; box-shadow: 0 4px 12px -4px rgba(22,33,28,.45);
  border: 1px solid rgba(22,33,28,.06);
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.marker__pin .ic { width: 14px; height: 14px; color: var(--brand); }
.marker--clay .marker__pin .ic { color: var(--clay); }
.marker.is-on .marker__pin { background: var(--brand); color: #fff; border-color: var(--brand); }
.marker.is-on .marker__pin .ic { color: #fff; }
.marker__stem { width: 1px; height: 7px; background: rgba(22,33,28,.25); }
.marker.is-on .marker__stem { background: var(--brand); }
.marker--dot .marker__pin { min-width: 0; width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 50%; }
.marker--dot .marker__pin span { display: none; }

.map-panel {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 20;
  background: #fff; border-radius: 18px; padding: 14px;
  box-shadow: 0 -8px 40px -20px rgba(0,0,0,.5);
  display: flex; gap: 12px; align-items: center;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.map-panel .scene, .map-panel .thumb { width: 68px; height: 68px; border-radius: 10px; flex: none; }
.map-panel__b { flex: 1; min-width: 0; }
.map-panel__t { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.map-panel__d { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.6; }

.map-fabs { position: absolute; right: 12px; bottom: 118px; display: flex; flex-direction: column; gap: 8px; z-index: 15; }
.map-fabs button {
  width: 36px; height: 36px; border-radius: 50%; background: #fff;
  box-shadow: var(--sh-m); display: grid; place-items: center; color: var(--ink-2);
}
.map-fabs .ic { width: 17px; height: 17px; }

.legend {
  position: absolute; left: 12px; bottom: 118px; z-index: 15;
  background: rgba(255,255,255,.94); border-radius: 10px; padding: 8px 10px;
  font-size: 10px; color: var(--ink-3); line-height: 1.9; box-shadow: var(--sh-s);
}
.legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; }

/* ---------- 服务 / 表单 ---------- */
.svc-hero { padding: 22px 16px 18px; }
.svc-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.svc-3 a {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-m);
  padding: 15px 12px 14px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--sh-s); position: relative; overflow: hidden;
}
.svc-3 .ic { width: 22px; height: 22px; }
.svc-3 .t { font-size: 13.5px; font-weight: 600; }
.svc-3 .d { font-size: 10.5px; color: var(--ink-3); line-height: 1.5; }
.svc-3 a:nth-child(1) .ic { color: var(--clay); }
.svc-3 a:nth-child(2) .ic { color: #B0453C; }
.svc-3 a:nth-child(3) .ic { color: var(--brand); }

.form { padding: 4px 16px 0; }
.field { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.field:last-child { border-bottom: 0; }
.field__label { font-size: 13px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.field__label .req { color: var(--clay); font-size: 12px; }
.field__hint { font-size: 11px; color: var(--ink-4); margin-top: 8px; line-height: 1.7; }
.textarea {
  width: 100%; min-height: 96px; border-radius: var(--r-s); background: var(--paper);
  border: 1px solid var(--line); padding: 12px; font-family: inherit; font-size: 13px;
  line-height: 1.7; color: var(--ink); resize: none;
}
.textarea::placeholder { color: var(--ink-4); }
.input {
  width: 100%; height: 44px; border-radius: var(--r-s); background: var(--paper);
  border: 1px solid var(--line); padding: 0 12px; font-family: inherit; font-size: 13px;
  color: var(--ink);
}
.input::placeholder { color: var(--ink-4); }
.uploader { display: flex; gap: 8px; }
.uploader .up {
  width: 74px; height: 74px; border-radius: 10px; background: var(--paper);
  border: 1px dashed var(--line); display: grid; place-items: center;
  color: var(--ink-4); gap: 2px; font-size: 10px;
}
.uploader .up .ic { width: 20px; height: 20px; }

.sos-card {
  margin: 0 16px; border-radius: var(--r-l); padding: 22px 18px;
  background: linear-gradient(160deg, #3A1E1B 0%, #23120F 100%);
  color: #fff; position: relative; overflow: hidden;
}
.sos-card::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(190,80,60,.35), transparent 68%);
}
.sos-card .k { font-size: 10px; letter-spacing: .2em; opacity: .6; }
.sos-card .t { font-family: var(--serif); font-size: 22px; letter-spacing: .04em; margin: 8px 0 4px; }
.sos-card .d { font-size: 11.5px; opacity: .68; line-height: 1.7; }
.sos-btn {
  margin-top: 16px; width: 100%; height: 52px; border-radius: 26px;
  background: #C4493B; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .08em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 24px -12px rgba(196,73,59,.9);
}
.sos-btn .ic { width: 20px; height: 20px; }

/* ---------- 订单 / 我的 ---------- */
.seg { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: none; padding: 11px 0 12px; font-size: 13.5px; color: var(--ink-3); position: relative;
}
.seg button.is-on { color: var(--ink); font-weight: 600; }
.seg button.is-on::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 5px;
  width: 18px; height: 2px; border-radius: 1px; background: var(--brand);
}

.order {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-m);
  overflow: hidden;
}
.order + .order { margin-top: 10px; }
.order__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.order__head .k { font-size: 11.5px; color: var(--ink-3); }
.order__head .s { font-size: 12px; font-weight: 600; color: var(--brand); }
.order__head .s.is-done { color: var(--ink-3); }
.order__head .s.is-clay { color: var(--clay); }
.order__body { display: flex; gap: 12px; padding: 13px 14px; }
.order__body .scene, .order__body .thumb { width: 66px; height: 66px; border-radius: 8px; flex: none; }
.order__t { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.order__d { font-size: 11px; color: var(--ink-3); margin-top: 5px; line-height: 1.6; }
.order__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 14px 13px; }

.profile-head {
  padding: 8px 16px 20px; background: var(--card);
  border-bottom: 1px solid var(--line-2);
}
.profile-user { display: flex; align-items: center; gap: 13px; }
.avatar {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: var(--brand-soft); color: var(--brand-2);
  display: grid; place-items: center; font-family: var(--serif); font-size: 20px;
  border: 1px solid rgba(43,106,86,.14);
}
.profile-name { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.profile-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.order-nav {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  margin-top: 18px;
}
.order-nav a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ink-2); }
.order-nav .ic { width: 22px; height: 22px; color: var(--ink-2); }
.order-nav .b { position: relative; display: grid; place-items: center; }

/* ---------- 文章 ---------- */
.article-hero { padding: 22px 20px 16px; background: var(--card); }
.article-kicker { font-size: 10.5px; letter-spacing: .16em; color: var(--brand); font-weight: 600; }
.article-title {
  font-family: var(--serif); font-size: 25px; line-height: 1.42; letter-spacing: .01em;
  margin: 10px 0 14px;
}
.article-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-3); }
.article-body { padding: 20px; font-size: 14.5px; line-height: 1.95; color: #2C352F; }
.article-body p + p { margin-top: 16px; }
.article-body h3 {
  font-family: var(--serif); font-size: 17px; font-weight: 600; margin: 26px 0 12px;
  letter-spacing: .02em; color: var(--ink);
}
.article-body .quote {
  border-left: 2px solid var(--brand); padding: 4px 0 4px 14px; color: var(--ink-2);
  font-size: 13.5px; line-height: 1.9; margin: 18px 0;
}
.article-body .fig { margin: 18px 0; border-radius: var(--r-s); overflow: hidden; }
.article-body .fig .scene { height: 148px; }
.article-body .fig figcaption { font-size: 11px; color: var(--ink-4); padding: 8px 2px 0; }

/* ---------- 底部弹层 ---------- */
.sheet-mask {
  position: absolute; inset: 0; z-index: 80; background: rgba(14,20,16,.4);
  opacity: 0; pointer-events: none; transition: opacity .24s ease;
  backdrop-filter: blur(2px);
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--card); border-radius: 20px 20px 0 0; padding: 8px 18px 22px;
  transform: translateY(101%); transition: transform .3s cubic-bezier(.2,.85,.25,1);
  max-height: 82%; overflow-y: auto; scrollbar-width: none;
}
.sheet::-webkit-scrollbar { display: none; }
.sheet__grab { width: 34px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 14px; }
.sheet__title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.sheet__sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.sheet__close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink-3); border-radius: 50%; background: var(--paper); }
.sheet__close .ic { width: 14px; height: 14px; }
body.sheet-open .sheet-mask { opacity: 1; pointer-events: auto; }
body.sheet-open .sheet { transform: translateY(0); }

.toast {
  position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 8px);
  z-index: 120; background: rgba(22,33,28,.9); color: #fff;
  padding: 10px 18px; border-radius: 18px; font-size: 12.5px;
  opacity: 0; pointer-events: none; transition: all .26s ease; white-space: nowrap;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 开关 / 步骤 ---------- */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch-row label { font-size: 13px; }
.switch-row .sub { font-size: 11px; color: var(--ink-4); margin-top: 4px; line-height: 1.6; }
.switch { display: inline-block; position: relative; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span {
  display: block; width: 44px; height: 26px; border-radius: 13px;
  background: var(--line); transition: background .2s ease; position: relative;
}
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .2s ease;
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(18px); }

.steps { display: flex; gap: 0; padding: 0 16px; }
.steps > div { flex: 1; position: relative; padding-top: 26px; }
.steps > div::before {
  content: attr(data-n); position: absolute; top: 0; left: 0;
  width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft);
  color: var(--brand-2); font-size: 10px; font-weight: 600;
  display: grid; place-items: center;
}
.steps > div::after {
  content: ""; position: absolute; top: 10px; left: 26px; right: 8px; height: 1px;
  background: var(--line);
}
.steps > div:last-child::after { display: none; }
.steps .t { font-size: 12.5px; font-weight: 600; }
.steps .d { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }

/* ---------- 工具类 ---------- */.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 0 16px; }
.grid2 .card { overflow: hidden; }
.pcard__b { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 5px; }
.pcard__t { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.stack-10 > * + * { margin-top: 10px; }
.stack-12 > * + * { margin-top: 12px; }
.pb { padding-bottom: 26px; }

/* ---------- 杂项 ---------- */
.notice {
  margin: 0 16px; padding: 11px 13px; border-radius: var(--r-s);
  background: var(--clay-soft); color: #8C4B26; font-size: 11.5px; line-height: 1.7;
  display: flex; gap: 7px;
}
.notice .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.notice--brand { background: var(--brand-soft); color: var(--brand-2); }

.empty { text-align: center; padding: 48px 0; color: var(--ink-4); font-size: 12px; }

.icon-btn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }

/* 图标（mask） */
.ic {
  display: inline-block; width: 20px; height: 20px; flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.ic-home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-6 8 6v8a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.ic-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20c0-3.4 3.6-5.2 7.5-5.2s7.5 1.8 7.5 5.2'/%3E%3C/svg%3E"); }
.ic-back { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.ic-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.ic-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.4'/%3E%3Cpath d='M16 16l4.4 4.4'/%3E%3C/svg%3E"); }
.ic-ticket { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9V7.6A1.6 1.6 0 0 1 4.6 6h14.8A1.6 1.6 0 0 1 21 7.6V9a3 3 0 0 0 0 6v1.4a1.6 1.6 0 0 1-1.6 1.6H4.6A1.6 1.6 0 0 1 3 16.4V15a3 3 0 0 0 0-6z'/%3E%3Cpath d='M9.5 8.5v7' stroke-dasharray='1.5 2.2'/%3E%3C/svg%3E"); }
.ic-bed { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19v-8h13a4 4 0 0 1 4 4v4M3 19h18M3 11V7M7 11V8.6h5.6V11'/%3E%3C/svg%3E"); }
.ic-fork { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v6.2a2 2 0 0 0 4 0V3M10 11.5V21M17.5 3c-1.4 1.1-2 2.6-2 4.2s.6 3 2 4V21'/%3E%3C/svg%3E"); }
.ic-bowl { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18a9 9 0 0 1-9 9 9 9 0 0 1-9-9zM8.5 3.5c0 1.8 1 1.8 1 3.6M12 2.5c0 1.8 1 1.8 1 3.6'/%3E%3C/svg%3E"); }
.ic-gift { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h16v10H4zM4 10l2.2-4.2h4.4L12 10M20 10l-2.2-4.2H13.4L12 10M12 10v10'/%3E%3C/svg%3E"); }
.ic-cal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5.6' width='16.8' height='14.8' rx='2'/%3E%3Cpath d='M3.6 10h16.8M8.4 3.2v4.4M15.6 3.2v4.4'/%3E%3C/svg%3E"); }
.ic-book { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h8.5a3 3 0 0 1 3 3V21H8a3 3 0 0 1-3-3zM8.5 4.5V21'/%3E%3C/svg%3E"); }
.ic-hall { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.2L12 4l9 5.2M5.4 9.4V18M18.6 9.4V18M9.4 9.8V18M14.6 9.8V18M3 19.4h18M2.4 21.6h19.2'/%3E%3C/svg%3E"); }
.ic-news { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h12v14H4zM16 9h4v8.2A1.8 1.8 0 0 1 18.2 19H16M7 8.6h6M7 12h6M7 15.4h3.6'/%3E%3C/svg%3E"); }
.ic-invest { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 19.4V4.6M3.6 19.4h16.8M7.4 15.6l3.4-4.4 3 2.8 4.6-6'/%3E%3C/svg%3E"); }
.ic-map { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4L3 6.2v13.6l6-2.2 6 2.2 6-2.2V3.8l-6 2.2zM9 4v13.6M15 6.2V20'/%3E%3C/svg%3E"); }
.ic-service { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 13.6a7.8 7.8 0 0 1 15.6 0M4.2 13.6v2.6a1.8 1.8 0 0 0 1.8 1.8h1.2v-5.4H4.2zM19.8 13.6v2.6a1.8 1.8 0 0 1-1.8 1.8h-1.2v-5.4h3zM18 18v1a2 2 0 0 1-2 2h-2.6'/%3E%3C/svg%3E"); }
.ic-pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.4 7-11.2A7 7 0 0 0 5 9.8C5 14.6 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.8' r='2.4'/%3E%3C/svg%3E"); }
.ic-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.6h3l1.5 4-2 1.4a12.4 12.4 0 0 0 5.5 5.5l1.4-2 4 1.5v3a2 2 0 0 1-2.2 2A16.4 16.4 0 0 1 5 5.8 2 2 0 0 1 7 3.6z'/%3E%3C/svg%3E"); }
.ic-alert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2l8.6 15.6H3.4zM12 10v4M12 17v.4'/%3E%3C/svg%3E"); }
.ic-sos { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l8 3v5.6c0 4.8-3.4 7.8-8 9-4.6-1.2-8-4.2-8-9V6.2zM12 8v4.6M12 15.8v.4'/%3E%3C/svg%3E"); }
.ic-cart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.4 10h9.2L19 7H6M9.5 19.6a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2zM17 19.6a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2z'/%3E%3C/svg%3E"); }
.ic-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3.6l2.5 5.2 5.7.8-4.1 4 1 5.7-5.1-2.9-5.1 2.9 1-5.7-4.1-4 5.7-.8z'/%3E%3C/svg%3E"); }
.ic-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 7.4V12l3.2 2'/%3E%3C/svg%3E"); }
.ic-camera { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4h3.2L8.4 6h7.2l1.6 2.4h3.2v11H3.6z'/%3E%3Ccircle cx='12' cy='13.4' r='3.4'/%3E%3C/svg%3E"); }
.ic-close { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ic-wechat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 11.6c0 3.5-3.4 6.3-7.7 6.3a9 9 0 0 1-2.4-.3L6 20l.9-3.2A6 6 0 0 1 5 11.6C5 8.1 8.4 5.3 12.7 5.3s7.7 2.8 7.7 6.3z'/%3E%3Ccircle cx='10.2' cy='10.8' r='.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='10.8' r='.9' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ic-filter { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5h16M7 12h10M10 17.5h4'/%3E%3C/svg%3E"); }
.ic-share { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.4V3.8M8.2 7.6L12 3.8l3.8 3.8M5 14v5.4h14V14'/%3E%3C/svg%3E"); }
.ic-heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.4-4.6-7.4-9.4A4.2 4.2 0 0 1 12 7.6a4.2 4.2 0 0 1 7.4 3c0 4.8-7.4 9.4-7.4 9.4z'/%3E%3C/svg%3E"); }
.ic-plane { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.4 20.6l1.4-5.6-6.6-2.6v-1.9l7.6 1.6 2.6-6.4h1.9l-.9 6.4 4.6 1.8v1.9l-5.6.7-1.2 4.1z'/%3E%3C/svg%3E"); }
.ic-train { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.4' width='14' height='12.6' rx='2.6'/%3E%3Cpath d='M5 8.6h14M8.4 20l1.8-4M15.6 20l-1.8-4M9.2 12.6h.1M14.8 12.6h.1'/%3E%3C/svg%3E"); }
.ic-bus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.4' y='3.6' width='15.2' height='12.4' rx='2'/%3E%3Cpath d='M4.4 10.2h15.2M8 16l-1.6 4M16 16l1.6 4M8.4 13h.1M15.6 13h.1'/%3E%3C/svg%3E"); }
.ic-car { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 16.4v-4.2l2.2-5h12l2.2 5v4.2M3.8 16.4h16.4M6.6 16.4V19M17.4 16.4V19M5.8 12.2h12.4'/%3E%3C/svg%3E"); }
.ic-taxi { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 3.4h5.2v2.6H9.4zM3.8 17.4v-4.6l2.2-4.6h12l2.2 4.6v4.6M3.8 17.4h16.4M6.6 17.4V20M17.4 17.4V20M5.8 13h12.4'/%3E%3C/svg%3E"); }
.ic-doc { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.4h8l4 4V20.6H6zM14 3.4v4h4M9 12h6M9 15.4h6'/%3E%3C/svg%3E"); }
.ic-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.6'/%3E%3C/svg%3E"); }
.ic-scan { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V5.6A1.6 1.6 0 0 1 5.6 4H9M15 4h3.4A1.6 1.6 0 0 1 20 5.6V9M20 15v3.4a1.6 1.6 0 0 1-1.6 1.6H15M9 20H5.6A1.6 1.6 0 0 1 4 18.4V15M4 12h16'/%3E%3C/svg%3E"); }
.ic-refresh { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.6 5.6M20 5v6h-6'/%3E%3C/svg%3E"); }

/* ---------- 响应式 ---------- */
@media (max-height: 900px) {
  .frame__meta { display: none; }
}
@media (max-width: 520px) {
  body.stage { padding: 0; display: block; overflow: hidden; }
  .frame { display: block; }
  .device {
    width: 100%; height: 100dvh; border-radius: 0; box-shadow: none; border: 0;
  }
  .island { display: none; }
  .frame__meta { display: none; }
  .toast { bottom: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}