/* H5 visual-replica build: use mini-program rpx proportion.
   Base mini-program width is 750rpx. In this preview shell, 1rpx = shellWidth / 750. */
:root {
  --rpx: calc(min(100vw, 430px) / 750);
  --navH: calc(88 * var(--rpx));
  --safeBottom: env(safe-area-inset-bottom);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  min-height: 100%;
  background: #24201c;
  color: #3b251b;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}
button { font: inherit; border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; }
img { display: block; }

.mini-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
  background: linear-gradient(180deg, #f3debd 0%, #fbf3e5 36%, #efe0c6 100%);
}

.wx-nav {
  position: sticky;
  top: 0;
  z-index: 400;
  height: calc(88 * var(--rpx) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: #f3debd;
  border-bottom: calc(1 * var(--rpx)) solid rgba(162, 107, 60, .22);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wx-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #111;
  font-size: calc(32 * var(--rpx));
  font-weight: 500;
  white-space: nowrap;
}
.wx-back {
  width: calc(74 * var(--rpx));
  height: calc(74 * var(--rpx));
  margin-left: calc(12 * var(--rpx));
  font-size: calc(72 * var(--rpx));
  line-height: calc(62 * var(--rpx));
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wx-back.hidden-space { visibility: hidden; }
.wx-menu {
  width: calc(154 * var(--rpx));
  height: calc(58 * var(--rpx));
  margin-right: calc(22 * var(--rpx));
  border-radius: calc(34 * var(--rpx));
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 0 0 calc(2 * var(--rpx)) rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--rpx));
}
.wx-menu span { width: calc(12 * var(--rpx)); height: calc(12 * var(--rpx)); background: #000; border-radius: 50%; }
.wx-menu i {
  width: calc(34 * var(--rpx));
  height: calc(34 * var(--rpx));
  border: calc(7 * var(--rpx)) solid #000;
  border-radius: 50%;
  margin-left: calc(18 * var(--rpx));
}

.page { display: none; min-height: calc(100vh - var(--navH)); }
.page.active { display: block; }

/* Direct copy of mini-program visual lock homepage */
.visual-lock-page {
  position: relative;
  width: 100%;
  min-height: calc(1332 * var(--rpx));
  overflow-x: hidden;
  background: linear-gradient(180deg, #f7ead3 0%, #fbf3e5 72%, #f1dfc0 100%);
  padding-bottom: 0;
}
.visual-lock-bg {
  width: 100%;
  height: auto;
  display: block;
}
.tap-zone {
  position: absolute;
  z-index: 10;
  background: rgba(255,255,255,0);
}
.tap-zone:active { background: rgba(255,255,255,0.06); }
.zone-start { left: 4.6667%; top: 34.159%; width: 30.6667%; height: 25.901%; }
.zone-guide { left: 37.7333%; top: 34.159%; width: 30%; height: 25.901%; }
.zone-pass { left: 70%; top: 34.159%; width: 27.3333%; height: 25.901%; }
.zone-jin { left: 6%; top: 64.565%; width: 13.3333%; height: 11.637%; }
.zone-shi { left: 22%; top: 64.565%; width: 13.3333%; height: 11.637%; }
.zone-yin { left: 38%; top: 64.565%; width: 13.3333%; height: 11.637%; }
.zone-lin { left: 54%; top: 64.565%; width: 13.3333%; height: 11.637%; }
.zone-wen { left: 70%; top: 64.565%; width: 13.3333%; height: 11.637%; }
.zone-cang { left: 85.333%; top: 64.565%; width: 12.267%; height: 11.637%; }
.home-nav-cover {
  position: fixed;
  z-index: 398;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 430px);
  bottom: 0;
  height: calc(214 * var(--rpx) + env(safe-area-inset-bottom));
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(246, 231, 203, 0) 0%,
      rgba(246, 231, 203, .96) 20%,
      #f1dfc0 100%);
}

/* mini-program theme */
.ty-bg {
  min-height: calc(100vh - var(--navH));
  background:
    radial-gradient(circle at 15% 4%, rgba(233,164,83,.25), transparent 28%),
    radial-gradient(circle at 95% 12%, rgba(151,74,42,.16), transparent 30%),
    linear-gradient(180deg, #f3debd 0%, #fbf4e6 35%, #efe0c7 100%);
}
.container {
  min-height: 100vh;
  padding: calc(28 * var(--rpx)) calc(28 * var(--rpx)) calc(156 * var(--rpx));
}
.ty-card, .card {
  position: relative;
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(26 * var(--rpx));
  border-radius: calc(34 * var(--rpx));
  background: rgba(255, 249, 235, .88);
  border: calc(2 * var(--rpx)) solid rgba(188, 134, 75, .35);
  box-shadow: 0 calc(18 * var(--rpx)) calc(46 * var(--rpx)) rgba(88, 51, 25, .10);
  overflow: hidden;
}
.ty-card::after, .card::after {
  content: "";
  position: absolute;
  right: calc(-60 * var(--rpx));
  top: calc(-70 * var(--rpx));
  width: calc(180 * var(--rpx));
  height: calc(180 * var(--rpx));
  border-radius: 50%;
  background: rgba(201, 128, 84, .10);
}
.ty-section-title, .page-title {
  position: relative;
  z-index: 1;
  font-size: calc(36 * var(--rpx));
  font-weight: 900;
  color: #3b251b;
  margin: 0 0 calc(16 * var(--rpx));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--rpx));
}
.ty-section-title::before {
  content: "";
  width: calc(10 * var(--rpx));
  height: calc(34 * var(--rpx));
  border-radius: 999px;
  background: linear-gradient(180deg, #b3261e, #d79b50);
}
.ty-desc, .desc {
  position: relative;
  z-index: 1;
  font-size: calc(27 * var(--rpx));
  color: #6a5544;
  line-height: 1.82;
  margin: 0 0 calc(24 * var(--rpx));
}
.primary-btn, .secondary-btn {
  position: relative;
  z-index: 2;
  height: calc(88 * var(--rpx));
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(18 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  font-weight: 900;
  width: 100%;
}
.primary-btn {
  color: #fff9ef;
  background: linear-gradient(135deg, #8b3a2b, #c27a42);
  box-shadow: 0 calc(14 * var(--rpx)) calc(36 * var(--rpx)) rgba(136, 58, 38, .23);
}
.secondary-btn {
  color: #70412c;
  background: #fff6e6;
  border: calc(2 * var(--rpx)) solid rgba(172, 112, 58, .35);
}
.notice {
  background: rgba(179,38,30,.08);
  color: #7b3728;
  border-radius: calc(24 * var(--rpx));
  padding: calc(20 * var(--rpx)) calc(22 * var(--rpx));
  font-size: calc(25 * var(--rpx));
  line-height: 1.65;
  margin: calc(18 * var(--rpx)) 0;
}

/* Floating bottom nav from mini-program */
.ty-app-nav {
  position: fixed;
  z-index: 399;
  left: calc(50% - min(100vw, 430px) / 2 + 24 * var(--rpx));
  right: calc(50% - min(100vw, 430px) / 2 + 24 * var(--rpx));
  bottom: calc(20 * var(--rpx) + env(safe-area-inset-bottom));
  height: calc(108 * var(--rpx));
  border-radius: calc(42 * var(--rpx));
  background: linear-gradient(180deg, rgba(255,251,242,.96), rgba(245,232,209,.94));
  border: calc(2 * var(--rpx)) solid rgba(171, 118, 69, .30);
  box-shadow: 0 calc(18 * var(--rpx)) calc(54 * var(--rpx)) rgba(73, 42, 22, .20), inset 0 calc(1 * var(--rpx)) 0 rgba(255,255,255,.72);
  display: flex;
  align-items: center;
  justify-content: space-around;
  backdrop-filter: blur(calc(18 * var(--rpx)));
  overflow: hidden;
}
.ty-app-nav::before {
  content: "";
  position: absolute;
  left: calc(42 * var(--rpx));
  right: calc(42 * var(--rpx));
  top: 0;
  height: calc(2 * var(--rpx));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
.ty-app-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  height: calc(96 * var(--rpx));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--rpx));
  color: #6b5b50;
  font-size: calc(22 * var(--rpx));
  font-weight: 700;
}
.ty-app-tab-icon-img {
  display: block;
  width: calc(42 * var(--rpx));
  height: calc(42 * var(--rpx));
  object-fit: contain;
}
.ty-app-tab.active { color: #c6472c; }
.ty-app-tab.active::after {
  content: "";
  position: absolute;
  bottom: calc(7 * var(--rpx));
  width: calc(34 * var(--rpx));
  height: calc(6 * var(--rpx));
  border-radius: 999px;
  background: linear-gradient(90deg, #d9512e, #f0b06b);
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(201, 75, 39, .25);
}

/* Task / mine / progress pages */
.ty-grid-6, .site-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(16 * var(--rpx));
}
.ty-rhythm, .site-tile {
  padding: calc(18 * var(--rpx)) calc(10 * var(--rpx));
  border-radius: calc(26 * var(--rpx));
  background: linear-gradient(180deg, #fff7e8, #eed8b0);
  border: calc(2 * var(--rpx)) solid rgba(181, 126, 73, .32);
  text-align: center;
}
.ty-rhythm.done, .site-tile.done {
  background: linear-gradient(180deg, #fff0d1, #d9a15b);
  border-color: #9e482d;
}
.ty-rhythm-symbol, .site-symbol {
  margin: 0 auto calc(10 * var(--rpx));
  width: calc(68 * var(--rpx));
  height: calc(68 * var(--rpx));
  border-radius: 50%;
  background: #8b3a2b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(34 * var(--rpx));
  font-weight: 900;
}
.ty-rhythm-name, .site-name {
  font-size: calc(25 * var(--rpx));
  font-weight: 800;
  color: #523425;
}
.site-status, .stamp-status {
  margin-top: calc(6 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  color: #80634f;
}
.mine-hero {
  margin: calc(28 * var(--rpx)) 0;
  padding: calc(34 * var(--rpx));
  border-radius: calc(36 * var(--rpx));
  background:
    radial-gradient(circle at 20% 10%, rgba(250, 200, 122, .28), transparent 36%),
    linear-gradient(135deg, rgba(255,248,235,.96), rgba(238,218,184,.92));
  border: calc(2 * var(--rpx)) solid rgba(172,115,61,.26);
  box-shadow: 0 calc(16 * var(--rpx)) calc(42 * var(--rpx)) rgba(86,50,24,.12);
  display: flex;
  align-items: center;
  gap: calc(24 * var(--rpx));
}
.avatar {
  width: calc(112 * var(--rpx));
  height: calc(112 * var(--rpx));
  border-radius: 50%;
  background: linear-gradient(135deg, #9b5834, #d08a4a);
  color: #fff8ea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(52 * var(--rpx));
  font-weight: 900;
  box-shadow: 0 calc(12 * var(--rpx)) calc(28 * var(--rpx)) rgba(120,65,32,.22);
}
.mine-name { color: #3f261c; font-size: calc(38 * var(--rpx)); font-weight: 900; }
.mine-id { margin-top: calc(8 * var(--rpx)); color: #816756; font-size: calc(24 * var(--rpx)); font-weight: 700; }
.mine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(18 * var(--rpx)); }
.mine-action {
  min-height: calc(190 * var(--rpx));
  padding: calc(22 * var(--rpx));
  border-radius: calc(26 * var(--rpx));
  background: rgba(255, 246, 230, .92);
  border: calc(1 * var(--rpx)) solid rgba(168,105,54,.20);
  box-shadow: inset 0 calc(1 * var(--rpx)) 0 rgba(255,255,255,.75);
}
.mine-action-icon {
  width: calc(58 * var(--rpx));
  height: calc(58 * var(--rpx));
  border-radius: 50%;
  background: rgba(198,78,48,.10);
  color: #c64e30;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28 * var(--rpx));
  font-weight: 900;
  margin-bottom: calc(14 * var(--rpx));
}
.mine-action-title { color: #4a2b1f; font-size: calc(28 * var(--rpx)); font-weight: 900; }
.mine-action-desc { margin-top: calc(8 * var(--rpx)); color: #7c6352; font-size: calc(22 * var(--rpx)); line-height: 1.45; }

.progress-num {
  font-size: calc(72 * var(--rpx));
  font-weight: 900;
  color: #8b3a2b;
  margin: calc(18 * var(--rpx)) 0 calc(6 * var(--rpx));
}
.pass-visual-wrap {
  height: calc(360 * var(--rpx));
  border-radius: calc(28 * var(--rpx));
  overflow: hidden;
  margin: calc(12 * var(--rpx)) 0 calc(24 * var(--rpx));
  box-shadow: 0 calc(14 * var(--rpx)) calc(32 * var(--rpx)) rgba(76,45,22,.12);
}
.pass-visual { width: 100%; height: 100%; object-fit: cover; }
.stamp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(16 * var(--rpx)); }
.stamp-item {
  padding: calc(22 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(28 * var(--rpx));
  background: #fff6e6;
  border: calc(2 * var(--rpx)) solid rgba(178,126,70,.22);
  text-align: center;
}
.stamp-item.done { background: linear-gradient(180deg, #fff0d1, #e1b876); border-color: #9e482d; }
.stamp-symbol {
  width: calc(72 * var(--rpx));
  height: calc(72 * var(--rpx));
  border-radius: 50%;
  margin: 0 auto calc(10 * var(--rpx));
  background: #8b3a2b;
  color: #fffaf0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(36 * var(--rpx));
  font-weight: 900;
}
.stamp-name { font-size: calc(28 * var(--rpx)); color: #3b251b; font-weight: 900; }

/* Map page uses r19 visual */
.map-r19-page { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 14% 2%, rgba(249,184,106,.30), transparent 26%), radial-gradient(circle at 85% 8%, rgba(85,115,105,.16), transparent 26%), linear-gradient(180deg, #f4dbb2 0%, #fbf3e7 38%, #efe0c7 100%); }
.map-r19-top { position: relative; z-index: 8; padding: calc(22 * var(--rpx)) calc(28 * var(--rpx)) calc(18 * var(--rpx)); background: linear-gradient(180deg, rgba(244,214,169,.96), rgba(250,238,217,.90)), radial-gradient(circle at right top, rgba(94,119,110,.18), transparent 38%); border-bottom: calc(1 * var(--rpx)) solid rgba(160,103,55,.12); box-shadow: 0 calc(10 * var(--rpx)) calc(30 * var(--rpx)) rgba(90,54,26,.08); }
.map-brand { color: #2a1a13; font-size: calc(30 * var(--rpx)); font-weight: 900; letter-spacing: calc(4 * var(--rpx)); margin-bottom: calc(10 * var(--rpx)); }
.map-title-row { display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--rpx)); }
.map-pin { width: calc(44 * var(--rpx)); height: calc(44 * var(--rpx)); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: calc(5 * var(--rpx)) solid #9b5834; box-sizing: border-box; position: relative; }
.map-pin::after { content: ""; position: absolute; left: calc(10 * var(--rpx)); top: calc(10 * var(--rpx)); width: calc(14 * var(--rpx)); height: calc(14 * var(--rpx)); border-radius: 50%; background: #9b5834; }
.map-title { color: #5b3020; font-size: calc(54 * var(--rpx)); font-weight: 900; letter-spacing: calc(6 * var(--rpx)); }
.map-side-chip { writing-mode: vertical-rl; padding: calc(12 * var(--rpx)) calc(8 * var(--rpx)); border-radius: calc(12 * var(--rpx)); background: #9b3e30; color: #fff4df; font-size: calc(18 * var(--rpx)); letter-spacing: calc(4 * var(--rpx)); }
.map-subtitle { text-align: center; margin-top: calc(6 * var(--rpx)); color: #705748; font-size: calc(23 * var(--rpx)); font-weight: 700; }
.map-tabs { margin-top: calc(20 * var(--rpx)); padding: calc(8 * var(--rpx)); border-radius: calc(28 * var(--rpx)); display: flex; gap: calc(16 * var(--rpx)); background: rgba(255,248,235,.68); border: calc(2 * var(--rpx)) solid rgba(175,117,62,.20); }
.map-tab { flex: 1; height: calc(68 * var(--rpx)); border-radius: calc(22 * var(--rpx)); display: flex; align-items: center; justify-content: center; color: #7a4b36; font-size: calc(28 * var(--rpx)); font-weight: 900; border: calc(2 * var(--rpx)) solid rgba(155,88,52,.22); background: rgba(255,250,239,.92); }
.map-tab.active { color: #fff6e8; background: linear-gradient(135deg, #9b5834, #c17639); }
.map-section { margin: calc(20 * var(--rpx)) calc(24 * var(--rpx)) 0; border-radius: calc(34 * var(--rpx)); padding: calc(18 * var(--rpx)) calc(16 * var(--rpx)); background: rgba(255,249,237,.94); border: calc(3 * var(--rpx)) solid rgba(174,116,62,.26); box-shadow: 0 calc(16 * var(--rpx)) calc(42 * var(--rpx)) rgba(90,54,26,.12); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--rpx)); padding: calc(4 * var(--rpx)) calc(10 * var(--rpx)) calc(16 * var(--rpx)); }
.section-title { color: #4b2b1f; font-size: calc(34 * var(--rpx)); font-weight: 900; }
.section-desc { margin-top: calc(4 * var(--rpx)); color: #806657; font-size: calc(21 * var(--rpx)); line-height: 1.35; font-weight: 700; }
.section-badge { min-width: calc(74 * var(--rpx)); height: calc(46 * var(--rpx)); padding: 0 calc(16 * var(--rpx)); border-radius: 999px; color: #fff5e7; background: linear-gradient(135deg, #a34431, #d08a4a); display: flex; align-items: center; justify-content: center; font-size: calc(23 * var(--rpx)); font-weight: 900; white-space: nowrap; }
.section-badge.route { background: linear-gradient(135deg, #746150, #b48a54); }
.map-x-scroll { width: 100%; min-height: calc(440 * var(--rpx)); border-radius: calc(28 * var(--rpx)); overflow-x: auto; overflow-y: hidden; background: #ead2a7; border: calc(2 * var(--rpx)) solid rgba(129,78,39,.14); white-space: nowrap; display: block; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.map-x-scroll::-webkit-scrollbar { display: none; }
.map-canvas { position: relative; display: inline-block; vertical-align: top; background: #ead2a7; overflow: hidden; width: calc(1100 * var(--rpx)); height: calc(440 * var(--rpx)); }
.section-map-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.map-marker { position: absolute; z-index: 18; transform: translate(-50%, -50%); width: calc(44 * var(--rpx)); height: calc(44 * var(--rpx)); overflow: visible; }
.marker-pin { width: calc(42 * var(--rpx)); height: calc(42 * var(--rpx)); border-radius: 50%; background: rgba(255,249,238,.96); border: calc(5 * var(--rpx)) solid #b44e35; color: #9d3d2e; display: flex; align-items: center; justify-content: center; font-size: calc(24 * var(--rpx)); font-weight: 900; box-shadow: 0 calc(8 * var(--rpx)) calc(16 * var(--rpx)) rgba(95,46,24,.23); }
.marker-pin.route { border-color: #b98236; color: #8e5a22; }
.marker-guide .marker-pin { border-color: #2d7669; color: #23685d; }
.marker-label { position: absolute; top: 50%; left: calc(52 * var(--rpx)); transform: translateY(-50%); max-width: calc(132 * var(--rpx)); min-height: calc(30 * var(--rpx)); padding: calc(3 * var(--rpx)) calc(12 * var(--rpx)); border-radius: 999px; background: rgba(255,248,235,.96); border: calc(2 * var(--rpx)) solid rgba(165,87,56,.55); color: #5b3020; display: flex; align-items: center; justify-content: center; font-size: calc(19 * var(--rpx)); font-weight: 900; white-space: nowrap; }
.label-left .marker-label { left: auto; right: calc(52 * var(--rpx)); }
.marker-route .marker-label { border-color: rgba(185,130,54,.58); color: #765022; }
.map-marker.selected .marker-pin { transform: scale(1.18); background: linear-gradient(135deg, #b7442f, #dc8a47); color: #fff7e8; border-color: #fff1d9; }
.map-tool-row { margin-top: calc(14 * var(--rpx)); padding: calc(12 * var(--rpx)) calc(8 * var(--rpx)) 0; display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--rpx)); }
.zoom-copy { color: #79533b; font-size: calc(22 * var(--rpx)); font-weight: 800; }
.zoom-group { display: flex; align-items: center; gap: calc(10 * var(--rpx)); padding: calc(6 * var(--rpx)); border-radius: 999px; background: rgba(255,249,238,.96); border: calc(1 * var(--rpx)) solid rgba(132,82,41,.12); box-shadow: 0 calc(8 * var(--rpx)) calc(18 * var(--rpx)) rgba(74,42,22,.10); }
.zoom-btn, .zoom-reset { height: calc(52 * var(--rpx)); min-width: calc(62 * var(--rpx)); padding: 0 calc(16 * var(--rpx)); border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #7c3f28; font-weight: 900; background: rgba(155,88,52,.08); }
.zoom-btn { font-size: calc(34 * var(--rpx)); }
.zoom-reset { font-size: calc(22 * var(--rpx)); }
.zoom-btn.disabled { color: rgba(124,63,40,.25); background: rgba(155,88,52,.04); }
.map-legend { margin: calc(18 * var(--rpx)) calc(24 * var(--rpx)) 0; padding: calc(20 * var(--rpx)) calc(22 * var(--rpx)); border-radius: calc(26 * var(--rpx)); background: rgba(255,249,237,.88); border: calc(2 * var(--rpx)) solid rgba(174,116,62,.18); display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--rpx)); }
.legend-item { display: flex; align-items: center; color: #6b5040; font-size: calc(22 * var(--rpx)); font-weight: 800; }
.legend-dot { width: calc(20 * var(--rpx)); height: calc(20 * var(--rpx)); border-radius: 50%; margin-right: calc(8 * var(--rpx)); }
.legend-dot.guide { background: #2d7669; } .legend-dot.explore { background: #b44e35; } .legend-dot.route { background: #b98236; }

/* Bottom sheet and modal copied from mini visual */
.hidden { display: none !important; }
.result-mask { position: fixed; z-index: 500; left: 0; right: 0; top: 0; bottom: 0; background: rgba(28,18,13,.72); display: flex; align-items: center; justify-content: center; padding: calc(40 * var(--rpx));}
.marker-sheet {
  position: fixed;
  left: calc(50% - min(100vw, 430px) / 2 + 24 * var(--rpx));
  right: calc(50% - min(100vw, 430px) / 2 + 24 * var(--rpx));
  bottom: calc(24 * var(--rpx) + env(safe-area-inset-bottom));
  z-index: 520;
  border-radius: calc(34 * var(--rpx));
  padding: calc(18 * var(--rpx)) calc(24 * var(--rpx)) calc(28 * var(--rpx));
  background: rgba(255,250,240,.98);
  box-shadow: 0 calc(24 * var(--rpx)) calc(60 * var(--rpx)) rgba(45,26,14,.28);
  border: calc(2 * var(--rpx)) solid rgba(174,116,62,.18);
}
.marker-sheet-handle { width: calc(72 * var(--rpx)); height: calc(8 * var(--rpx)); border-radius: 999px; margin: 0 auto calc(18 * var(--rpx)); background: rgba(123,82,49,.25); }
.marker-sheet-head { display: flex; align-items: center; gap: calc(18 * var(--rpx)); }
.marker-sheet-symbol { width: calc(70 * var(--rpx)); height: calc(70 * var(--rpx)); border-radius: calc(22 * var(--rpx)); background: linear-gradient(135deg, #b44e35, #d68b4d); color: #fff7e8; display: flex; align-items: center; justify-content: center; font-size: calc(34 * var(--rpx)); font-weight: 900; }
.marker-sheet-symbol.guide { background: linear-gradient(135deg, #2d7669, #4e9b89); }
.marker-sheet-symbol.route { background: linear-gradient(135deg, #8a6537, #c29452); }
.marker-sheet-title-wrap { flex: 1; min-width: 0; }
.marker-sheet-title { color: #4a2b20; font-size: calc(36 * var(--rpx)); font-weight: 900; }
.marker-sheet-subtitle { margin-top: calc(4 * var(--rpx)); color: #9b6e4a; font-size: calc(23 * var(--rpx)); font-weight: 800; }
.marker-sheet-close { width: calc(56 * var(--rpx)); height: calc(56 * var(--rpx)); border-radius: 50%; background: rgba(120,77,47,.10); color: #67412e; display: flex; align-items: center; justify-content: center; font-size: calc(38 * var(--rpx)); font-weight: 700; }
.marker-sheet-desc { margin-top: calc(22 * var(--rpx)); color: #5d4536; font-size: calc(28 * var(--rpx)); line-height: 1.72; font-weight: 700; }
.marker-sheet-tip { margin-top: calc(16 * var(--rpx)); padding: calc(16 * var(--rpx)) calc(18 * var(--rpx)); border-radius: calc(18 * var(--rpx)); color: #815f43; background: rgba(181,119,65,.10); font-size: calc(23 * var(--rpx)); line-height: 1.5; font-weight: 700; }
.marker-sheet-btn { margin-top: calc(22 * var(--rpx)); height: calc(78 * var(--rpx)); border-radius: calc(24 * var(--rpx)); background: linear-gradient(135deg, #9b5834, #d08645); color: #fff6e8; display: flex; align-items: center; justify-content: center; font-size: calc(28 * var(--rpx)); font-weight: 900; width: 100%; }
.result-card {
  width: min(calc(100vw - 80 * var(--rpx)), 390px);
  max-height: 92vh;
  overflow-y: auto;
  border-radius: calc(36 * var(--rpx));
  background: #fff7e8;
  padding: calc(28 * var(--rpx));
}
.modal-panel { position: fixed; z-index: 530; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.result-image { width: 100%; border-radius: calc(26 * var(--rpx)); box-shadow: 0 calc(16 * var(--rpx)) calc(46 * var(--rpx)) rgba(51,31,18,.18); }
.toast { position: fixed; left: 50%; bottom: calc(154 * var(--rpx) + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); z-index: 700; max-width: min(340px, calc(100vw - 40px)); padding: calc(16 * var(--rpx)) calc(22 * var(--rpx)); border-radius: 999px; color: #fff; background: rgba(32,20,14,.86); font-size: calc(24 * var(--rpx)); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }