/* 行迹 · 旅游攻略地图 — Apple 设计规范版
 * 数据来源:apple.com 线上真实 CSS 实测 + apple-design skill
 * 黄金公式:毛玻璃 saturate(180%) blur(20px);双层阴影;按压 scale(.97)/100ms
 */
/* ═══ 设计令牌(Apple 实测) ═══ */
:root {
  /* 色阶 */
  --color-bg: #f5f5f7;            /* 页面背景(Apple 灰) */
  --color-bg-2: #fafafc;          /* 导航玻璃底(浅) */
  --color-card: #ffffff;
  --color-text: #1d1d1f;          /* 主文字 */
  --color-text-2: #6e6e73;        /* 次级 */
  --color-text-3: #86868b;        /* 弱化 */
  --color-text-disabled: rgba(0,0,0,.24);
  --color-line: rgba(0,0,0,.16);  /* 分割线 */
  --color-fill: rgba(0,0,0,.08);  /* hover/按压底 */
  --color-fill-2: rgba(0,0,0,.16);/* 按压更深底 */
  --accent: #0071e3;
  --accent-hover: #0076DF;        /* 按钮 hover(Apple 实测) */
  --accent-active: #006EDB;       /* 按钮按下(Apple 实测) */
  --link: #06c;
  --accent-bg: rgba(0,113,227,.1);
  --accent-bg-strong: rgba(0,113,227,.16);

  /* 毛玻璃(Apple 黄金公式) */
  --glass-blur: saturate(180%) blur(20px);
  --glass-bg: rgba(250,250,252,.8);
  --glass-bg-stuck: rgba(250,250,252,.92);
  --glass-border: rgba(255,255,255,.4);      /* 顶部高光 */
  --glass-card-bg: rgba(255,255,255,.6);
  --glass-panel-blur: saturate(180%) blur(30px);

  /* 双层阴影(Stripe/Apple 实测配方) */
  --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --shadow-pop: 0 2px 5px rgba(0,0,0,.1), 0 27px 40px -27px rgba(50,50,93,.25);
  --shadow-glass: 0 6px 6px rgba(0,0,0,.08), 0 20px 40px rgba(0,0,0,.12);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);

  /* 圆角(Apple:卡片 8px,pill 980px) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 980px;

  /* 排版阶梯(字号→行高→字距成套) */
  --font-display: clamp(2.2rem, 5vw, 4rem);      /* 发现态大标题 */
  --font-title-lg: clamp(1.4rem, 3vw, 1.8rem);   /* 页面/弹层标题 */
  --font-title: 1.25rem;                          /* 卡片标题 */
  --font-body: 0.875rem;                          /* 正文 14px */
  --font-caption: 0.75rem;                        /* 说明 12px */
  --leading-display: 1.05;
  --leading-title: 1.15;
  --leading-body: 1.5;
  --tracking-display: -0.015em;   /* 大标题负字距(Apple 56px 实测 -0.005em,中文略收紧) */
  --tracking-title: -0.02em;
  --tracking-body: 0;

  /* 动效(Linear/Apple 实测) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 100ms;
  --dur-base: 300ms;
  --scale-press: .97;

  /* 布局 */
  --panel-w: 360px;
  --topbar-h: 56px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000000;
    --color-bg-2: rgba(22,22,23,.8);   /* 深色导航底 */
    --color-card: #1c1c1e;
    --color-text: #f5f5f7;
    --color-text-2: #a1a1a6;
    --color-text-3: #98989d;
    --color-text-disabled: rgba(255,255,255,.24);
    --color-line: rgba(255,255,255,.24);  /* 深色分割线(Apple 实测 .24) */
    --color-fill: rgba(255,255,255,.08);
    --color-fill-2: rgba(255,255,255,.16);
    --accent: #2997ff;
    --accent-hover: #4da3ff;
    --accent-active: #1f8bff;
    --accent-bg: rgba(41,151,255,.15);
    --accent-bg-strong: rgba(41,151,255,.22);
    --glass-bg: rgba(22,22,23,.8);       /* 暖黑 #161617,非纯黑(Apple 实测) */
    --glass-bg-stuck: rgba(22,22,23,.88);/* 深色吸顶(Apple 实测 .88) */
    --glass-border: rgba(255,255,255,.08);
    --glass-card-bg: rgba(28,28,30,.72); /* iOS 深色卡片玻璃底 */
    /* 深色阴影减弱 30-50%,靠边框分层 */
    --shadow-card: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --shadow-pop: 0 2px 5px rgba(0,0,0,.4), 0 27px 40px -27px rgba(0,0,0,.6);
    --shadow-glass: 0 6px 6px rgba(0,0,0,.4), 0 20px 40px rgba(0,0,0,.4);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: var(--font-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  background: var(--color-bg); color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .panel, .topbar, .search-results, .guide-modal { background: var(--color-card) !important; backdrop-filter: none !important; }
}
.muted { color: var(--color-text-2); font-size: var(--font-caption); }
a { color: var(--accent); text-decoration: none; }

/* ═══ 通用交互反馈(Apple:pointer-down 即时响应) ═══ */
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.btn-press {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background 150ms ease, border-color 150ms ease;
}
.btn-press:active { transform: scale(var(--scale-press)); }

/* ═══ 地图全屏 ═══ */
#map { position: fixed; inset: 0; z-index: 0; }
/* 深色模式:只反转瓦片层(leaflet-tile-pane),不动标记/控件/弹窗 */
.dark #map .leaflet-tile-pane,
.dark #guide-map .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9);
}
.dark #map .leaflet-control-zoom a { background: var(--color-card); color: var(--color-text); border-color: var(--color-line); }
.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow-soft) !important; border-radius: var(--radius-md) !important; overflow: hidden; }
.leaflet-control-zoom a { width: 32px !important; height: 32px !important; line-height: 32px !important; font-size: 16px !important; }

/* ═══ 顶栏(毛玻璃 + 边缘淡出而非硬分割线) ═══ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1500;
  display: flex; align-items: center; gap: 12px;
  height: var(--topbar-h); padding: 0 16px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: background .3s ease;
}
.topbar.stuck { background: var(--glass-bg-stuck); }
/* 边缘淡出遮罩(替代 border-bottom) */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 40%, transparent), transparent);
  pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.topbar.stuck::after { opacity: 1; }
.breadcrumb { display: flex; align-items: center; gap: 4px; font-size: var(--font-caption); min-width: 0; overflow: hidden; white-space: nowrap; color: var(--color-text-3); }
.breadcrumb .sep { margin: 0 2px; }
.breadcrumb button {
  border: none; background: none; color: var(--color-text-2); font-size: var(--font-caption);
  cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); transition: color 150ms, background 150ms;
}
.breadcrumb button:hover { color: var(--color-text); background: var(--color-fill); }
.breadcrumb button:active { transform: scale(.97); }
.breadcrumb button:last-child { color: var(--color-text); font-weight: 600; cursor: default; }
.search-box { position: relative; flex: 1; max-width: 420px; margin-left: auto; }
.search-box input {
  width: 100%; border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 7px 16px; font-size: var(--font-body); background: var(--color-fill); color: var(--color-text);
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.search-box input:focus { border-color: var(--accent); background: var(--color-card); box-shadow: 0 0 0 3px var(--accent-bg); }
.search-box input::placeholder { color: var(--color-text-3); }
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 60vh; overflow-y: auto;
  background: var(--color-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: 6px; border: 1px solid var(--color-line);
}
.sr-group { font-size: 11px; color: var(--color-text-3); padding: 8px 10px 4px; letter-spacing: .05em; font-weight: 600; }
.sr-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background 150ms; }
.sr-item:hover { background: var(--accent-bg); }
.sr-item:active { background: var(--accent-bg-strong); }
.sr-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sr-item .name { font-size: 13.5px; font-weight: 500; }
.sr-item .sub { font-size: 12px; color: var(--color-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-empty { padding: 16px; text-align: center; color: var(--color-text-3); font-size: var(--font-body); }

/* ═══ 发现态 ═══ */
.discover { position: fixed; inset: 0; z-index: 1400; overflow-y: auto; background: var(--color-bg); padding: 64px 20px 48px; }
.discover-head { text-align: center; margin-bottom: 40px; }
.discover-head h1 {
  font-size: var(--font-display); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); font-weight: 700;
}
.discover-head .muted { margin-top: 10px; }
.dest-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; }
.dest-card {
  background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: 26px; cursor: pointer; text-align: left;
  box-shadow: var(--shadow-card);
  transition: transform 100ms ease-out, box-shadow .3s ease, border-color .3s ease;
}
.dest-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-glass); border-color: var(--accent); }
.dest-card:active { transform: scale(.97); }
.dest-card h3 { font-size: var(--font-title); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.dest-card .dest-path { font-size: var(--font-caption); color: var(--color-text-3); margin-top: 4px; }
.dest-card .dest-desc { font-size: var(--font-body); margin-top: 12px; opacity: .85; }
.dest-card .dest-meta { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.chip-mini {
  font-size: 11.5px; padding: 3px 12px; border-radius: var(--radius-pill);
  background: var(--accent-bg); color: var(--accent); font-weight: 500;
}

/* ═══ 悬浮面板共用(毛玻璃材质) ═══ */
.panel {
  position: fixed; z-index: 1000;
  background: var(--color-card);
  box-shadow: var(--shadow-glass);
  border-radius: var(--radius-lg);
}

/* ═══ 左侧栏 ═══ */
#sidebar {
  top: calc(var(--topbar-h) + 16px); left: 16px; bottom: 16px; width: var(--panel-w);
  display: flex; flex-direction: column;
  padding: 20px; overflow: hidden;
}
.side-head h1 { font-size: var(--font-title-lg); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.side-head .muted { margin-top: 2px; }
.back-btn {
  margin-top: 12px; border: 1px solid var(--color-line); background: transparent; color: var(--color-text-2);
  border-radius: var(--radius-pill); padding: 5px 14px; font-size: var(--font-caption); cursor: pointer;
  transition: all 150ms;
}
.back-btn:hover { color: var(--color-text); border-color: var(--color-text-2); }
.back-btn:active { transform: scale(.97); }

.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 14px; }
.filter-chip {
  border: 1px solid var(--color-line); background: transparent; color: var(--color-text-2);
  border-radius: var(--radius-pill); padding: 4px 12px; font-size: var(--font-caption); cursor: pointer;
  transition: all 150ms;
}
.filter-chip:hover { color: var(--color-text); border-color: var(--color-text-2); }
.filter-chip:active { transform: scale(.97); }
.filter-chip.active { color: var(--color-text); border-color: var(--color-text); background: var(--color-fill); }

/* 列表分组 */
.group-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-3); margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--color-line);
}
.group-title .gdot { width: 8px; height: 8px; border-radius: 50%; }
.place-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.place-item {
  border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 10px 12px;
  cursor: pointer; transition: border-color 150ms, background 150ms, transform 100ms ease-out; background: transparent;
}
.place-item:hover { border-color: var(--accent); background: var(--accent-bg); }
.place-item:active { transform: scale(.97); }
.place-item.active { border-color: var(--accent); background: var(--accent-bg); }
.place-item .row1 { display: flex; align-items: center; gap: 8px; font-size: var(--font-body); font-weight: 600; }
.place-item .row1 .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: transform 150ms; }
.place-item:hover .row1 .dot { transform: scale(1.4); }
.place-item .row1 .day-badge { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pill); color: #fff; margin-left: auto; }
.place-item .row2 { margin-top: 3px; font-size: 12px; color: var(--color-text-3); }
.place-item .tags { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 11px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--accent-bg); color: var(--accent); }
.list-hint { text-align: center; padding: 14px 0 4px; }
.side-foot { padding-top: 10px; border-top: 1px solid var(--color-line); display: flex; justify-content: space-between; align-items: center; }
#view-count { font-size: var(--font-caption); }

/* ═══ 滚动条(细、融入) ═══ */
.place-list::-webkit-scrollbar, .search-results::-webkit-scrollbar, .guide-body::-webkit-scrollbar, .detail::-webkit-scrollbar { width: 6px; }
.place-list::-webkit-scrollbar-thumb, .search-results::-webkit-scrollbar-thumb, .guide-body::-webkit-scrollbar-thumb, .detail::-webkit-scrollbar-thumb { background: var(--color-fill-2); border-radius: 3px; }
.place-list::-webkit-scrollbar-track, .search-results::-webkit-scrollbar-track, .guide-body::-webkit-scrollbar-track, .detail::-webkit-scrollbar-track { background: transparent; }

/* ═══ 点位详情卡(毛玻璃) ═══ */
.detail {
  right: 16px; bottom: 16px; width: min(400px, calc(100vw - 32px));
  max-height: min(62vh, 560px); overflow-y: auto; padding: 22px;
  background: var(--glass-card-bg);
  backdrop-filter: var(--glass-panel-blur);
  -webkit-backdrop-filter: var(--glass-panel-blur);
  border: 1px solid var(--glass-border);
  animation: sheetIn .35s cubic-bezier(.2, .8, .3, 1);
}
@keyframes sheetIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.icon-btn {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-fill); color: var(--color-text); font-size: 13px; line-height: 1;
  transition: background 150ms, transform 100ms ease-out;
}
.icon-btn:hover { background: var(--color-fill-2); }
.icon-btn:active { transform: scale(.9); }
.detail h2 { font-size: var(--font-title); line-height: var(--leading-title); letter-spacing: var(--tracking-title); padding-right: 28px; }
.detail .cat-row { display: flex; align-items: center; gap: 6px; margin: 6px 0 12px; font-size: var(--font-caption); color: var(--color-text-2); flex-wrap: wrap; }
.detail .cat-row .dot { width: 10px; height: 10px; border-radius: 50%; }
.detail .meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0; font-size: var(--font-body); }
.detail .meta-grid dt { color: var(--color-text-2); }
.detail .content { font-size: var(--font-body); }
.detail .content h3 { font-size: 15px; margin: 14px 0 6px; }
.detail .content ul, .detail .content ol { padding-left: 20px; margin: 6px 0; }
.detail .content li { margin: 3px 0; }
.detail .content strong { font-weight: 600; }
.detail .content code { background: var(--color-fill); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.detail .content hr { border: none; border-top: 1px solid var(--color-line); margin: 12px 0; }
.detail .roles { margin-top: 14px; }
.detail .role-line { display: flex; gap: 8px; font-size: 12px; color: var(--color-text-2); padding: 3px 0; border-top: 1px dashed var(--color-line); }
.detail .role-line b { color: var(--color-text); font-weight: 500; flex-shrink: 0; }
.detail .guide-links { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.detail .guide-link-item {
  font-size: var(--font-body); padding: 9px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-md);
  cursor: pointer; transition: all 150ms; display: flex; align-items: center; gap: 8px;
}
.detail .guide-link-item:hover { border-color: var(--accent); background: var(--accent-bg); }
.detail .guide-link-item:active { transform: scale(.97); }
.lat-src-note { font-size: 11px; color: var(--color-text-3); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-line); }
.img-placeholder {
  width: 100%; height: 150px; border-radius: var(--radius-md); margin-bottom: 14px;
  background: linear-gradient(135deg, var(--accent-bg), transparent 70%);
  display: flex; align-items: center; justify-content: center; font-size: 42px; opacity: .7;
}
.detail img { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 14px; }

/* ═══ 攻略态:左地图+时间线 / 右点位详情 ═══ */
.guide-modal { position: fixed; inset: 0; z-index: 2000; background: var(--color-bg); color: var(--color-text); animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.guide-modal > .icon-btn { top: 18px; right: 18px; width: 34px; height: 34px; font-size: 15px; z-index: 2100; }
.guide-layout { display: flex; height: 100%; }
/* 左列:头部 + 地图 + 时间线 */
.guide-left { display: flex; flex-direction: column; flex: 1 1 58%; min-width: 0; border-right: 1px solid var(--color-line); }
.guide-head { padding: 18px 22px 10px; position: relative; }
.guide-head h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: var(--leading-title); letter-spacing: var(--tracking-title); padding-right: 60px; }
.guide-head .sub { margin: 4px 0 0; font-size: var(--font-body); color: var(--color-text-2); }
.share-btn {
  position: absolute; top: 18px; right: 18px; padding: 5px 12px; border: 1px solid var(--color-line);
  background: var(--color-card); color: var(--color-text); border-radius: var(--radius-pill);
  font-size: 12.5px; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), border-color 150ms;
}
.share-btn:hover { border-color: var(--accent); color: var(--accent); }
.share-btn:active { transform: scale(.95); }
/* 地图区(55% 高,剩余给时间线) */
.guide-map { flex: 1 1 55%; min-height: 220px; width: 100%; }
.guide-map .leaflet-container { height: 100%; width: 100%; }
/* 时间线区 */
.guide-timeline { flex: 1 1 45%; overflow-y: auto; padding: 6px 14px 20px; min-height: 160px; }
.guide-timeline h3 { font-size: 13px; margin: 14px 0 6px; display: flex; align-items: center; gap: 8px; letter-spacing: var(--tracking-title); text-transform: uppercase; color: var(--color-text-2); }
.guide-timeline h3 .day-dot { width: 10px; height: 10px; border-radius: 50%; }
.guide-places { margin: 4px 0 8px; display: flex; flex-direction: column; }
.tl-day { position: relative; }
.tl-day::before {
  content: ""; position: absolute; left: 5px; top: 18px; bottom: 8px; width: 2px;
  background: var(--color-line);
}
.gp-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border-radius: var(--radius-md); cursor: pointer; transition: background 150ms, transform var(--dur-fast) var(--ease-out);
  position: relative;
}
.gp-item:hover { background: var(--color-fill); }
.gp-item.active { background: var(--accent-bg); }
.gp-item.active .gname { color: var(--accent); }
.gp-item:active { transform: scale(.98); }
.gp-item .gdot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--color-bg); }
.gp-item .gname { font-size: var(--font-body); font-weight: 500; }
.gp-item .gmeta { font-size: 12px; color: var(--color-text-3); margin-left: auto; text-align: right; flex-shrink: 0; }
.gp-item .role-badge { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--accent-bg); color: var(--accent); margin-right: 6px; }
/* 右列:点位详情 */
.guide-right { flex: 1 1 42%; min-width: 300px; overflow-y: auto; padding: 20px 22px 32px; }
.guide-place .placeholder { margin-top: 24px; text-align: center; color: var(--color-text-3); font-size: 13px; }
.guide-place h3 { font-size: 1.35rem; letter-spacing: var(--tracking-title); margin-bottom: 2px; }
.guide-place .gplace-sub { font-size: 12.5px; color: var(--color-text-2); margin-bottom: 12px; }
.gplace-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gplace-meta .gm { font-size: 12px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-fill); color: var(--color-text-2); }
.gplace-meta .gm b { color: var(--color-text); font-weight: 600; }
.gplace-content { font-size: 14.5px; line-height: 1.7; }
.gplace-content ul, .gplace-content ol { padding-left: 20px; margin: 6px 0; }
.gplace-content li { margin: 3px 0; }
.gplace-content strong { font-weight: 600; }
.gplace-role { margin-top: 12px; font-size: 13px; }
.gplace-role b { color: var(--accent); }
.guide-meta { margin-top: 22px; border-top: 1px solid var(--color-line); padding-top: 16px; }
.guide-meta .meta-box { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-card); border: 1px solid var(--color-line); }
.guide-meta .meta-box h4 { font-size: 13px; margin-bottom: 6px; opacity: .75; }
.guide-meta .meta-box p, .guide-meta .meta-box li { font-size: 13px; }
.guide-meta .meta-box ul { padding-left: 16px; }

/* ═══ 地图标记(分类彩色圆点 + 白描边 + 状态) ═══ */
.custom-div-icon { background: none; border: none; }
.custom-div-icon .pin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: transform 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
}
.custom-div-icon .pin:hover { transform: scale(1.25); }
.custom-div-icon .pin.big { transform: scale(1.6); box-shadow: 0 0 0 6px var(--accent-bg); }
.custom-div-icon .pin.selected { transform: scale(1.35); box-shadow: 0 0 0 3px var(--color-card), 0 0 0 5px var(--accent); }
.custom-div-icon .pin.seen { filter: saturate(.35) opacity(.75); }
.custom-div-icon .pin.day { border-width: 2.5px; }

/* ═══ Leaflet popover(锚定标记) ═══ */
.leaflet-popup-content-wrapper { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-pop) !important; }
.leaflet-popup-content { margin: 0 !important; width: 280px !important; font-family: inherit; overflow: hidden; border-radius: var(--radius-lg); }
.pop-hero { width: 100%; height: 110px; background: linear-gradient(135deg, var(--accent-bg), transparent 70%); display: flex; align-items: center; justify-content: center; font-size: 36px; }
.pop-hero img { width: 100%; height: 100%; object-fit: cover; }
.pop-body { padding: 12px 14px 14px; }
.pop-name { font-weight: 600; font-size: 15px; letter-spacing: var(--tracking-title); }
.pop-meta { font-size: 11.5px; color: var(--color-text-2); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pop-sum { font-size: 12.5px; color: var(--color-text-2); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pop-cta {
  margin-top: 10px; width: 100%; padding: 7px 0; border: none; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-size: var(--font-body); font-weight: 500; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background 150ms;
}
.pop-cta:hover { background: var(--accent-hover); }
.pop-cta:active { transform: scale(var(--scale-press)); background: var(--accent-active); }
.leaflet-popup-close-button { top: 8px !important; right: 8px !important; font-size: 16px !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.4) !important; }

/* ═══ 移动端底部抽屉(按钮交互) ═══ */
.sheet[hidden] { display: none !important; }  /* hidden 必须生效,防止桌面误显示 */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--color-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-glass);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sheet-toggle {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 12px 16px; border: none; background: transparent;
  color: var(--color-text); font-size: var(--font-body); font-weight: 600;
  border-bottom: 1px solid var(--color-line);
  cursor: pointer;
}
.sheet-toggle-arrow {
  margin-left: auto; color: var(--color-secondary);
  font-size: 10px; transition: transform 200ms var(--ease-out);
}
.sheet[data-open="1"] .sheet-toggle-arrow { transform: rotate(180deg); }
.sheet-body { flex: 1; overflow-y: auto; padding: 0 14px 14px; -webkit-overflow-scrolling: touch; }

/* ═══ FAB ═══ */
.fab-group { position: fixed; right: 16px; bottom: 16px; z-index: 1100; display: flex; flex-direction: column; gap: 10px; }
.fab {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--color-line);
  background: var(--color-card); color: var(--color-text); font-size: 18px; cursor: pointer;
  box-shadow: var(--shadow-pop); transition: transform 100ms ease-out, box-shadow .2s;
}
.fab:hover { box-shadow: var(--shadow-glass); }
.fab:active { transform: scale(.92); }

/* ═══ toast ═══ */
#toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 3000; background: var(--color-text); color: var(--color-bg);
  padding: 10px 18px; border-radius: var(--radius-pill); font-size: var(--font-body);
  box-shadow: var(--shadow-pop); animation: sheetIn .3s ease;
}

/* ═══ 移动端 ═══ */
@media (max-width: 640px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .breadcrumb { max-width: 42%; }
  .search-box { max-width: none; }
  #sidebar { display: none; }  /* 桌面侧栏让位于底部抽屉 */
  .detail { right: 8px; bottom: 8px; left: 8px; width: auto; max-height: 55vh; }
  .guide-layout { flex-direction: column; }
  .guide-left { flex: none; height: 62%; border-right: none; border-bottom: 1px solid var(--color-line); }
  .guide-head { padding: 14px 16px 8px; }
  .guide-map { flex: 1 1 auto; min-height: 0; }
  .guide-timeline { flex: 1 1 auto; min-height: 0; padding: 4px 10px 14px; }
  .guide-right { flex: none; height: 38%; min-width: 0; padding: 14px 16px 24px; }
  .guide-modal > .icon-btn { top: 12px; right: 12px; }
  .discover { padding: 48px 14px 32px; }
  .dest-cards { grid-template-columns: 1fr; }
  .fab-group { right: 12px; bottom: 12px; }
}