/* 珠海星图 · quiet atlas
   A single presentation layer for the existing map, collection and review flows. */
:root, :root[data-theme="light"] {
  --label-1: #20242c; --label-2: #4e5663; --label-3: #646d7a;
  --label-4: #c4cbd5; --bg-page: #eef0f4; --bg-raised: #ffffff;
  --surface: #ffffff; --surface-soft: #f2f4f7; --surface-hover: #fff0e8;
  --separator: #dfe3e9; --accent: #c74620; --go: #d34b25;
  --wish: #2464bd; --gray: #737e8b; --sw-green: #d34b25;
  --glass-tint: 255,255,255; --glass-a: 1; --glass-a-panel: 1;
  --glass-a-strong: 1; --blur: none; --glass-shadow: 0 8px 28px #1e293b12;
  --rim: none; --rim-dark: none; --glass-edge: none; --bevel: none;
  --scrim: linear-gradient(transparent,transparent); --su-head-bg: var(--surface);
  --sb-thumb: #bec6d0; --sb-thumb-hi: #8c98a8; --atlas-shadow: 0 12px 40px #18223418;
  /* 这里原来偷写过三条排版令牌 --fs-display:24px --lh-display:32px --fw-semi:550,
     把 style.css:141/156 声明的 20px/24px/600 悄悄改掉了。排版令牌在第二个文件
     里各写一份,等于 style.css 那套排版系统名存实亡(它注释里写的值全是假的)。
     已删除,全站排版令牌一律由 style.css 决定;本文件只管配色与质感。 */
}
:root[data-theme="dark"] {
  --label-1: #f3f5f9; --label-2: #c3cbd6; --label-3: #a1adbd;
  --label-4: #606d80; --bg-page: #131922; --bg-raised: #202834;
  --surface: #202834; --surface-soft: #2b3543; --surface-hover: #40312d;
  --separator: #414e60; --accent: #ff9c73; --go: #ff8b61;
  --wish: #85b7ff; --gray: #a0aab6; --sw-green: #e67b53;
  --glass-tint: 32,40,52; --glass-a: 1; --glass-a-panel: 1; --glass-a-strong: 1;
  --su-head-bg: var(--surface); --sb-thumb: #526174; --sb-thumb-hi: #738298;
  --atlas-shadow: 0 12px 40px #050a123d;
}
button, input, textarea, select { font-family: var(--font); }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.atlas-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.atlas-header svg, .atlas-fit svg, .store-glyph svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.atlas-header {
  position: fixed; inset: 0 0 auto; height: 88px; z-index: 29;
  background: var(--surface); border-bottom: 1px solid var(--separator);
  display: flex; align-items: center; padding: 0 32px;
}
.atlas-brand { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--label-1); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 46px; border-radius: 15px 15px 15px 3px; background: #c74620; color: #ffffff; }
.atlas-brand strong { display: block; font-size: 21px; font-weight: 600; letter-spacing: 2px; line-height: 28px; }
.atlas-brand small { display: block; font-size: 8px; letter-spacing: 1.6px; color: var(--label-3); margin-top: 3px; }
.header-note { display: none; }
.topbar {
  position: fixed; inset: 22px 32px auto 390px; padding: 0; gap: 24px;
  display: flex; flex-direction: row; align-items: center; pointer-events: none;
}
.topbar .search-wrap { flex: 1; max-width: 620px; min-width: 180px; }
.topbar .search-slot { width: 100%; }
.topbar .search {
  height: 44px; min-height: 44px; padding: 0 15px; gap: 10px;
  border-radius: 10px; background: var(--surface-soft); border: 1px solid transparent;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.search:focus-within { border-color: var(--accent); }
.search input { font-size: 13px; font-weight: 400; }
.search .ico { width: 17px; height: 17px; fill: var(--label-3); }
.tools { margin-left: auto; display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.glass, .pill, .fmc-trigger, .fmc-panel, .fmc-now-panel {
  background: var(--surface); border: 1px solid var(--separator);
  box-shadow: var(--atlas-shadow); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.glass::before, .glass::after, .fmc-panel::after { display: none; }
.tools .pill, .fmc-trigger { height: 44px; border-radius: 9px; padding: 0 16px; box-shadow: none; font-size: 13px; font-weight: 500; }
.tools .pill:not(#btnDrop), .fmc-trigger { border-color: transparent; background: transparent; }
.tools .pill:hover, .fmc-trigger:hover { background: var(--surface-soft); filter: none; }
#btnDrop { background: #c74620; color: #ffffff; border: 1px solid #c74620; order: 3; gap: 6px; }
#btnDrop:hover { background: #a63516; }
#btnDrop > span { font-size: 19px; font-weight: 400; }
#btnTheme { width: 40px; height: 40px; order: 2; padding: 0; }
#btnTheme .theme-ico { width: 16px; height: 16px; }
#btnSetup { padding: 0 12px; }
.map-caption { position: fixed; top: 124px; left: 406px; z-index: 3; pointer-events: none; }
.map-caption > span { font-size: 9px; letter-spacing: 2px; color: #657b6c; }
.map-caption h1 { margin: 9px 0 8px; font-size: 28px; line-height: 1.4; font-weight: 500; letter-spacing: 2px; color: var(--label-1); }
.map-caption p { font-size: 12px; margin: 0; color: var(--label-2); }
.atlas-fit { position: fixed; top: 118px; right: 32px; display: flex; align-items: center; gap: 8px; z-index: 10; background: var(--surface); border: 1px solid var(--separator); border-radius: 9px; padding: 11px 15px; color: var(--label-1); box-shadow: 0 4px 20px #23352808; cursor: pointer; font-size: 12px; }
.atlas-fit svg { width: 18px; height: 18px; }
.atlas-fit:hover { background: var(--surface-soft); }
#veil { display: none; }
#map { background: #ceddd8; }
.atlas-legend { display: flex; align-items: center; gap: 24px; position: fixed; bottom: 34px; left: calc(50% + 150px); transform: translateX(-50%); z-index: 5; background: var(--surface); border: 1px solid var(--separator); padding: 13px 22px; border-radius: 30px; font-size: 11px; color: var(--label-2); white-space: nowrap; box-shadow: 0 4px 20px #23352808; }
.atlas-legend > span { display: flex; align-items: center; gap: 7px; }
.dot.go { background: var(--go); box-shadow: none; border: none; }
.dot.gray { background: var(--gray); box-shadow: none; border: none; }
.dot.wish { background: transparent; border: 2px solid var(--wish); box-shadow: none; }
.atlas-legend .dot { width: 8px; height: 8px; flex: none; }
#side {
  top: 112px; bottom: 24px; left: 24px; right: auto; width: 346px;
  max-width: none; max-height: none; border-radius: 16px; padding: 0;
  display: flex; flex-direction: column; overflow: hidden; transform: none;
  background: var(--surface); border: 1px solid var(--separator); box-shadow: var(--atlas-shadow);
}
.side-head { padding: 27px 24px 21px; border: none; flex: none; cursor: default; }
.side-head::before { display: none; }
.side-eyebrow { color: var(--label-3); font-size: 9px; letter-spacing: 2px; margin-bottom: 8px; line-height: 16px; }
.title-dot { color: #a77f48; padding-left: 3px; }
.sh-btns { align-self: center; }
.sh-btns .icon-btn { width: 32px; height: 36px; color: var(--label-3); }
.side-intro { margin: 8px 0 23px; color: var(--label-3); font-size: 12px; line-height: 20px; }
.side-head .sh-s { display: flex; gap: 0; margin: 0; padding: 0; color: var(--label-3); }
.sh-s > span { flex: 1; font-size: 10px; display: flex; flex-direction: column; gap: 3px; }
.sh-s > span + span { padding-left: 20px; border-left: 1px solid var(--separator); }
.sh-s b { font-size: 25px; line-height: 32px; font-weight: 400; color: var(--label-1); font-variant-numeric: tabular-nums; }
.atlas-tabs { margin: 0 24px; display: flex; gap: 4px; padding: 4px; background: var(--surface-soft); border-radius: 8px; flex: none; }
.atlas-tabs button { flex: 1; min-height: 34px; padding: 0 6px; background: transparent; border: 0; border-radius: 6px; color: var(--label-2); cursor: pointer; font-size: 11px; white-space: nowrap; }
.atlas-tabs button[aria-pressed="true"] { color: var(--accent); background: var(--surface); box-shadow: 0 2px 5px #2031230b; font-weight: 600; }
.list-caption { display: flex; justify-content: space-between; margin: 23px 24px 10px; font-size: 10px; color: var(--label-3); flex: none; }
.side-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px; margin: 0; overscroll-behavior: contain; }
.side-list li { border-radius: 10px; }
.side-list .it { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 100px; padding: 18px 12px; border-radius: 10px; border: 1px solid transparent; position: relative; background: transparent; }
.side-list li + li .it { border-top-color: var(--separator); }
.side-list .it::before { display: none; }
.side-list .it:hover { background: var(--surface-soft); }
.side-list .it.sel { background: var(--surface-hover); border-color: var(--separator); }
.store-glyph { display: grid; place-items: center; width: 38px; height: 42px; flex: none; border-radius: 10px; color: #ac411f; background: var(--surface-soft); }
.store-glyph svg { width: 23px; height: 23px; stroke-width: 1.25; }
.store-copy { flex: 1; min-width: 0; display: block; text-align: left; }
.side-list .nm { display: block; font-size: 14px; line-height: 22px; font-weight: 550; white-space: normal; color: var(--label-1); overflow: visible; }
.side-list .ar { display: block; margin-top: 4px; font-size: 11px; line-height: 18px; font-weight: 400; color: var(--label-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
.store-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; color: var(--label-3); font-size: 11px; line-height: 17px; }
.store-state { display: flex; align-items: center; gap: 5px; }
.store-state .dot { width: 6px; height: 6px; margin: 0; flex: none; }
.store-state .dot.wish { border-width: 1.5px; }
.store-score { color: var(--wish); font-variant-numeric: tabular-nums; }
.row-arrow { font-size: 15px; color: var(--label-3); position: absolute; right: 12px; top: 21px; opacity: 0; }
.it:hover .row-arrow, .it.sel .row-arrow { opacity: 1; }
.side-footer { display: flex; align-items: center; gap: 5px; flex: none; border-top: 1px solid var(--separator); padding: 15px 24px; font-size: 9px; color: var(--label-3); }
.side-footer > span:last-child { margin-left: auto; }
.local-dot { width: 5px; height: 5px; background: var(--go); border-radius: 50%; }
#side.strip { top: 112px; width: 346px; min-width: 0; max-width: none; bottom: auto; }
#side.strip .side-eyebrow, #side.strip .side-intro, #side.strip .sh-s, #side.strip .atlas-tabs, #side.strip .list-caption, #side.strip .side-footer { display: none; }
#side.strip .sh-s::after { content: none; }
#results { margin-top: 10px; border-radius: 12px; max-height: min(65dvh, 540px); padding: 8px; }
#results .r { padding: 13px 10px; border-radius: 8px; }
#results .nm { font-size: 13px; font-weight: 500; }
#results .r-sep { border-radius: 6px; background: var(--surface-soft); color: var(--label-3); font-size: 10px; }
#setup { width: 380px; border-radius: 14px; max-height: calc(100dvh - 110px); padding: 0 24px 24px; z-index: 35; }
/* 这里原来还有一整套设置面板的字号(标题 19 / 分区 14 / 行 13 / 说明 11 /
   行内副标题 10),加载顺序在本文件之后,把 style.css 那套 15/13 全盖掉了 ——
   于是一个分区里同时跑 14 / 13 / 11 / 10 四档,每档只差 1px,层级看不出来。
   和下面那段是同一个毛病:同一批元素被两个文件各定义一次,谁也没定义全。
   字号一律交回 style.css 的排版系统,本文件只留布局和颜色。

   标题栏的纵向内边距要【自己算】,不能只看 padding:
   负的上边距是给面板的 14px 圆角留的(吸顶时头栏要盖住圆角,
   内容滚过去才不会从两个上角钻出来),它同时把整条往上提了 14px。
   所以「看起来离面板上边缘多远」= padding-top − 14。
     padding-top  8px → 视觉 −6px  ← 顶格,标题被上边缘切掉(用户截图)
     padding-top 20px → 视觉  6px  ← 不够,和下面 24px 的左右内边距不对称
     padding-top 32px → 视觉 18px  ← 现在这个值
   左右留 24px,和面板自身的 padding 对齐;上下 18px,和左右同一量级,
   光学上才是方的(上下比左右小一点点,视觉重量才对)。
   ⚠ 这里必须用 padding-left / padding-right 【分开写】,
     不能图省事写 `padding: 0 24px` —— 简写会把上下一起清零,
     style.css 给的 padding-top/bottom 被抹掉。 */
#setup .lg-head {
  margin-top: -14px;
  margin-left: -24px; margin-right: -24px; margin-bottom: 0;
  padding: 32px 0 14px;
  padding-left: 24px; padding-right: 24px;
}
#setup .lg-sw-t em { color: var(--label-3); }   /* 只调色,字号仍归 style.css */
#setup .lg-sec, #setup .sec { margin-top: 22px; }
.btn-sm, #setup .btn-sm { border-radius: 7px; box-shadow: none; backdrop-filter: none; background: var(--surface-soft); border: 1px solid var(--separator); }
.btn-sm.primary, #setup .btn-sm.primary { background: #c74620; border-color: #c74620; color: #ffffff; box-shadow: none; }
#card { top: 112px; right: 24px; bottom: auto; width: 370px; border-radius: 16px; max-height: calc(100dvh - 136px); background: var(--surface); box-shadow: var(--atlas-shadow); }
.c-top { padding: 24px 24px 0; }
.c-nm { font-size: 22px; line-height: 31px; font-weight: 550; }
.c-sub { color: var(--label-3); margin-top: 9px; font-size: 12px; line-height: 21px; }
.c-pills { margin-top: 18px; gap: 7px; }
.c-pill { font-size: 10px; border: 0; border-radius: 5px; background: var(--surface-soft); padding: 4px 7px; }
.c-stats { margin: 24px 0 0; padding: 18px 0; border-top: 1px solid var(--separator); border-bottom: 1px solid var(--separator); background: none; border-radius: 0; gap: 12px; }
.c-stat .v { font-size: 23px; line-height: 30px; font-weight: 400; }
.c-stat .k { font-size: 10px; margin-top: 5px; color: var(--label-3); }
.c-stat.date .v { font-size: 11px; line-height: 30px; }
.c-sec { padding: 0 24px; margin-top: 24px; }
.c-sec h4 { font-size: 14px; font-weight: 550; }
.vis { border-top: 0; border-left: 2px solid var(--separator); padding: 0 0 0 14px; margin: 22px 0; }
.vd { font-size: 11px; color: var(--accent); }
.vm { font-size: 10px; line-height: 18px; }
.vn { font-size: 12px; line-height: 23px; color: var(--label-2); margin: 10px 0; }
.dh-row { background: var(--surface-soft); border-radius: 8px; padding: 12px; margin: 6px 0; }
.dh-star.on { color: var(--wish); }
.dh-form { background: var(--surface-soft); border: 1px solid var(--separator); border-radius: 10px; }
.dh-name-label { display: block; font-size: 12px; color: var(--label-2); margin: 16px 0 12px; }
.dh-name { display: block; width: 100%; padding: 11px; margin-top: 7px; border-radius: 7px; border: 1px solid var(--separator); background: var(--surface); color: var(--label-1); font-size: 16px; }
.dh-btn, .dh-file { box-shadow: none; backdrop-filter: none; border-radius: 7px; }
.dh-ta, .dh-select { border-color: var(--separator); background: var(--surface); border-radius: 7px; }
.c-act { padding: 20px 24px; border-top: 1px solid var(--separator); background: var(--surface); }
.c-act .pill[data-act="edit"] { background: #c74620; color: #ffffff; border: 0; border-radius: 8px; min-height: 42px; box-shadow: none; }
.fmc-panel { padding: 20px; border-radius: 14px; width: 370px; max-height: min(70dvh, 580px); }
.fmc-chip, .fmc-cap, .fmc-now, .fmc-tog { background: var(--surface-soft); border: 1px solid transparent; box-shadow: none; backdrop-filter: none; border-radius: 6px; }
.fmc-chip[aria-pressed="true"], :root[data-theme="dark"] .fmc-chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--surface-hover); }
.fmc-panel .fmc-row { gap: 5px; }
.fmc-qitem { border-radius: 7px; }
.fmc-arc { background: var(--surface-soft); border-radius: 10px; }
#modal { border-radius: 16px; padding: 26px; max-width: min(440px, calc(100vw - 24px)); background: var(--surface); }
.md-t { font-size: 22px; }
.md-head { margin-bottom: 24px; }
.fld { margin: 18px 0; }
.fld > span { font-size: 12px; color: var(--label-2); }
.fld input, .fld textarea, .lg-key-row input { background: var(--surface-soft); border: 1px solid var(--separator); border-radius: 8px; padding: 12px; }
.seg { background: var(--surface-soft); border: 1px solid var(--separator); border-radius: 8px; padding: 4px; }
.seg button.on { background: var(--surface); color: var(--accent); border-radius: 5px; box-shadow: 0 2px 6px #2335280a; }
.pill.solid, #mdSave { background: #c74620; color: #ffffff; border-color: #c74620; border-radius: 8px; box-shadow: none; }
.md-fine { font-size: 11px; line-height: 20px; color: var(--label-3); }
#drophint { top: 110px; bottom: auto; border-radius: 10px; font-size: 13px; }
body:has(#drophint:not([hidden])) .map-caption { visibility: hidden; }
#toast { border-radius: 10px; background: #20242c; color: #ffffff; font-size: 12px; padding: 13px 20px; }
.maplibregl-ctrl-bottom-left { display: block; left: 388px; right: auto; bottom: 8px; }
.maplibregl-ctrl-bottom-right { right: 22px; bottom: 52px; }
.maplibregl-ctrl-group { background: var(--surface) !important; border: 1px solid var(--separator) !important; box-shadow: 0 4px 20px #23352808 !important; border-radius: 9px !important; backdrop-filter: none; }
.maplibregl-ctrl-group button { width: 40px; height: 40px; }
/* ⚠ 这里原来写的是 `background: transparent !important` —— 本文件加载在
   style.css 之后,两边都带 !important,所以按加载顺序决胜,这一条赢。
   后果是把 style.css:689 的玻璃底和 style.css:2633 的暗色蒙版一起抹掉了,
   署名直接裸在地图上。

   实测(2026-10-05,探针页加载真实四层 CSS,按 WCAG 相对亮度公式算):
     亮色 链接 #4e5663 vs 浅色陆地 6.64 ✓ / 深色陆地 1.44 ✗ / 中灰水面 3.53 ✗ / 近黑建筑 2.34 ✗
     暗色 链接 #c3cbd6 vs 浅色陆地 1.47 ✗ / 深色陆地 6.50 ✓ / 中灰水面 1.28 ✗ / 近黑建筑 10.60 ✓
   八种组合里四种低于 4.5:1。而 OpenFreeMap 底图同时有深色建筑轮廓、
   蓝水面和米白陆地,用户一拖地图署名就会扫过这三种底色 ——
   也就是说"看得清"只是碰巧,不是设计。这同时是 ODbL 的署名可见性问题。

   改成跟主题反向的半透明底:亮色给浅底配深字,暗色给深底配浅字。
   .72 的不透明度保证底下无论是什么颜色,合成后的底色都稳定在
   6:1 以上,署名在任何地图内容上都读得清。 */
.maplibregl-ctrl-attrib { background: rgba(252, 252, 254, .78) !important; color: var(--label-3) !important; backdrop-filter: none; font-size: 10px; }
:root[data-theme="dark"] .maplibregl-ctrl-attrib { background: rgba(18, 22, 30, .78) !important; }
/* 署名是法务要求的文字,9px/8px 在手机上等于不可读。10px 是本项目正文下档的
   同级尺寸,不再往下压。原来 900–1150px 断点和移动端各有一处 8px/10px,
   见本文件后面的 @media 段。 */
.maplibregl-ctrl-attrib a { color: var(--label-2) !important; }
#scale { background: transparent; border: 0; box-shadow: none; font-size: 10px; color: var(--label-2); }
@media (min-width: 1500px) {
  .topbar { left: 430px; }
  #side, #side.strip { width: 360px; left: 32px; }
  .map-caption { left: 432px; }
}
@media (min-width: 900px) and (max-width: 1150px) {
  .topbar { left: 320px; right: 22px; gap: 14px; }
  .tools { gap: 1px; }
  .tools .pill, .fmc-trigger { padding: 0 10px; }
  #side, #side.strip { width: 310px; left: 18px; }
  .map-caption { left: 355px; }
  #card { width: 335px; right: 18px; }
}
@media (max-width: 899px) {
  .atlas-header { height: 72px; padding: calc(env(safe-area-inset-top) + 10px) 18px 10px; align-items: center; }
  .brand-mark { width: 32px; height: 36px; border-radius: 11px 11px 11px 3px; }
  .brand-mark svg { width: 21px; height: 21px; }
  .atlas-brand { gap: 9px; }
  .atlas-brand strong { font-size: 17px; line-height: 22px; letter-spacing: 1px; }
  .atlas-brand small { font-size: 6px; letter-spacing: 1px; }
  .topbar { left: 16px; right: 16px; top: 84px; gap: 0; display: block; }
  .topbar .search-wrap { max-width: none; width: 100%; }
  .topbar .search { height: 46px; background: var(--surface); border: 1px solid var(--separator); box-shadow: 0 4px 16px #23352808; }
  .search input { font-size: 16px; }
  .tools { position: fixed; right: 12px; top: 16px; gap: 2px; }
  .tools .pill, .fmc-trigger { height: 36px; padding: 0 10px; font-size: 12px; }
  #btnDrop { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 128px); height: 44px; border-radius: 10px; padding: 0 15px; box-shadow: 0 4px 16px #23352822; }
  #btnSetup { padding: 0 8px; }
  #btnTheme { width: 32px; height: 36px; }
  .map-caption { left: 22px; top: 158px; }
  .map-caption > span { font-size: 7px; letter-spacing: 1.5px; }
  .map-caption h1 { font-size: 21px; margin: 7px 0; }
  .map-caption p { font-size: 10px; }
  .atlas-fit { top: 151px; right: 16px; padding: 10px; }
  .atlas-fit span { display: none; }
  .atlas-legend { left: 20px; bottom: calc(env(safe-area-inset-bottom) + 134px); transform: none; padding: 10px 12px; gap: 12px; font-size: 9px; border-radius: 8px; }
  .atlas-legend .dot { width: 6px; height: 6px; }
  .atlas-legend > span { gap: 4px; }
  #side, #side.strip {
    top: auto; left: 12px; right: 12px; width: auto; min-width: 0; max-width: none;
    bottom: calc(env(safe-area-inset-bottom) + 12px); max-height: 57dvh; border-radius: 16px;
  }
  #side.open { height: 57dvh; }
  #side .side-head { padding: 15px 20px 13px; }
  #side .side-eyebrow { display: none; }
  #side .sh-t { font-size: 19px; line-height: 26px; }
  #side .side-intro { display: none; }
  #side .sh-s, #side.strip .sh-s { margin-top: 9px; display: flex; }
  #side .sh-s > span { display: inline-flex; flex-direction: row; align-items: baseline; gap: 4px; font-size: 10px; flex: none; padding: 0; border: 0; margin-right: 18px; }
  #side .sh-s b { font-size: 14px; line-height: 18px; }
  #side.strip .sh-s::after { content: none; }
  .atlas-tabs { margin: 0 20px; }
  .atlas-tabs button { min-height: 36px; }
  .list-caption { margin: 16px 22px 6px; }
  .side-list .it { min-height: 90px; padding-top: 14px; padding-bottom: 14px; }
  .side-footer { display: none; }
  body:has(#side.open) .atlas-legend, body:has(#side.open) #btnDrop { visibility: hidden; }
  body:has(#card:not([hidden])) .map-caption,
  body:has(#card:not([hidden])) .atlas-legend,
  body:has(#card:not([hidden])) #btnDrop { visibility: hidden; }
  #card { top: auto; bottom: 0; right: 0; left: 0; width: 100%; border-radius: 20px 20px 0 0; max-height: calc(100dvh - 142px); z-index: 32; padding-bottom: env(safe-area-inset-bottom); }
  .c-top { padding: 16px 24px 0; }
  .c-nm { font-size: 21px; }
  .c-stats { margin-top: 18px; padding: 14px 0; }
  .c-sec { margin-top: 20px; }
  #setup { width: calc(100vw - 24px); max-height: calc(100dvh - 90px); }
  .fmc-panel { position: fixed; top: 76px; left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 100px); }
  .maplibregl-ctrl-bottom-right { right: 6px; bottom: calc(env(safe-area-inset-bottom) + 202px); }
  .maplibregl-ctrl-bottom-left { left: 12px; bottom: calc(env(safe-area-inset-bottom) + 114px); }
  html:has(#card.open) .maplibregl-ctrl-bottom-left { bottom: calc(var(--card-h-live, 58dvh) + 4px); }
  html:has(#card.open) .maplibregl-ctrl-attrib { bottom: 0; }
  html:has(#side.open) .maplibregl-ctrl-bottom-left { bottom: calc(57dvh + env(safe-area-inset-bottom) + 14px); }
  /* 原来是 8px。署名是 ODbL 法务要求的文字,8px 在手机上不构成"可读的署名",
     窄屏空间又比桌面紧,更不该在这里继续压。10px 是全站正文下档的同级尺寸。 */
  .maplibregl-ctrl-attrib { font-size: 10px; }
  #drophint { top: 145px; left: 16px; right: 16px; transform: none; width: auto; font-size: 12px; padding: 12px; }
  #modal { padding: 22px; max-height: calc(100dvh - 32px); overflow-y: auto; }
}
@media (max-width: 370px) {
  .atlas-header { padding-left: 12px; }
  .atlas-brand small { display: none; }
  .atlas-brand strong { font-size: 15px; }
  .brand-mark { width: 28px; height: 32px; }
  .tools { right: 8px; }
  .tools .pill, .fmc-trigger { padding: 0 7px; }
  .atlas-legend { gap: 7px; left: 13px; padding: 10px 8px; }
  #btnDrop { right: 13px; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Second edition: higher contrast, useful controls, compact navigation. */
/* ⚠ 上面 1-306 行是初版,这一段起是第二版,两者改的是同一批选择器。
   改上面那段之前先来这里搜一遍同名选择器 —— 初版的声明多数会被这一段盖掉,
   你在初版里看到"改了没反应"不是错觉,是它根本没在生效。

   已删掉的 7 条纯死代码(每一条都被本段同选择器同属性完全覆盖,一行都不剩):
     .sh-t / .store-glyph.wish / .store-glyph.gray
     #side.strip .side-head / #side.strip .sh-t / .dh-nm / .dh-note
   初版剩下的 39 个规则块是"部分被盖"—— 里面的布局属性(position/display/flex 等)
   仍然在生效,只有被这一段重新声明过的属性是死的。所以初版不是整段死代码,
   别整段删。

   原来紧跟这里还有个独立的 :root 块,又写了一遍
   --fs-body-t:16px --lh-body-t:24px --fs-secondary:14px --lh-secondary:22px,
   同样覆盖 style.css:143-144 的 15px/21px/14px/20px。两个 :root 分处文件头尾,
   谁都不提示对方,于是这批令牌有 3 个真值来源。已删除,排版只认 style.css。 */
.atlas-header { height: 76px; padding: 0 24px; }
.atlas-brand strong { font-size: 22px; line-height: 29px; letter-spacing: .5px; font-weight: 650; }
.atlas-brand small { font-size: 12px; letter-spacing: .2px; margin-top: 2px; color: var(--label-2); }
.brand-mark { width: 40px; height: 44px; border-radius: 12px; }
.topbar { top: 16px; left: 390px; right: 24px; gap: 24px; }
.topbar .search-wrap { max-width: 680px; }
.topbar .search { border-color: var(--separator); }
.search input { font-size: 15px; }
.tools .pill, .fmc-trigger { font-size: 14px; }
.map-categories { position: fixed; top: 98px; left: 390px; right: 160px; z-index: 12; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.map-categories button { pointer-events: auto; min-height: 44px; padding: 0 16px; border-radius: 9px; border: 1px solid #cbd2dd; background: var(--surface); color: var(--label-1); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 7px; box-shadow: 0 3px 10px #1725360b; cursor: pointer; white-space: nowrap; }
.map-categories svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.map-categories button[aria-pressed="true"] { color: #fff; background: #242b36; border-color: #242b36; }
.map-categories button:hover { border-color: var(--accent); }
:root[data-theme="dark"] .map-categories button { border-color: var(--separator); }
:root[data-theme="dark"] .map-categories button[aria-pressed="true"] { background: #e9edf5; color: #20242c; border-color: #e9edf5; }
.atlas-fit { top: 98px; right: 24px; min-height: 44px; font-size: 13px; border-color: #cbd2dd; }
#side, #side.strip { top: 76px; left: 0; bottom: 0; width: 362px; border: 0; border-right: 1px solid var(--separator); border-radius: 0; box-shadow: 5px 0 20px #18253609; }
.side-head { padding: 26px 24px 20px; }
.sh-t { font-size: 24px; line-height: 32px; font-weight: 650; letter-spacing: 0; }
.side-head .sh-s { margin-top: 18px; }
.sh-s > span { gap: 3px; font-size: 12px; color: var(--label-2); }
.sh-s b { font-size: 24px; line-height: 29px; font-weight: 550; }
.atlas-tabs { margin: 0 24px; padding: 0; gap: 0; background: transparent; border-radius: 0; border-bottom: 1px solid var(--separator); }
.atlas-tabs button { font-size: 14px; font-weight: 500; min-height: 46px; border-radius: 0; border-bottom: 3px solid transparent; }
.atlas-tabs button[aria-pressed="true"] { background: transparent; box-shadow: none; border-bottom-color: var(--accent); color: var(--accent); }
.choose-store { display: flex; align-items: center; gap: 12px; margin: 20px 24px 0; padding: 14px; border: 1px solid #efc6b7; border-radius: 11px; background: #fff1e9; color: #96371b; text-align: left; cursor: pointer; flex: none; }
.choose-icon { font-size: 33px; line-height: 36px; width: 36px; height: 36px; text-align: center; }
.choose-store strong { display: block; font-size: 15px; font-weight: 650; }
.choose-store small { display: block; font-size: 11px; line-height: 19px; margin-top: 2px; color: #924d35; }
.choose-store > span:last-child { margin-left: auto; font-size: 21px; }
.choose-store:hover { background: #ffe5d7; }
.choose-store:disabled { opacity: .55; cursor: not-allowed; }
:root[data-theme="dark"] .choose-store { background: #3f302a; border-color: #775344; color: #ffb38e; }
:root[data-theme="dark"] .choose-store small { color: #e5b29c; }
.list-caption { margin: 20px 24px 8px; align-items: center; color: var(--label-2); font-size: 12px; min-height: 32px; }
#storeSort { max-width: 116px; border: none; border-radius: 6px; background: var(--surface); color: var(--label-1); font-size: 12px; padding: 7px 4px; cursor: pointer; }
.side-list { padding: 0 12px 12px; }
.side-list .it { padding: 17px 12px; gap: 12px; min-height: 112px; }
.side-list .it.sel { border-color: #e5b8a7; }
.store-glyph { width: 42px; height: 45px; background: #fff0e8; color: #b64523; border-radius: 10px; }
.store-glyph.wish { background: #eaf1ff; color: #245eb4; }
.store-glyph.gray { background: var(--surface-soft); color: var(--label-2); }
:root[data-theme="dark"] .store-glyph { background: #42312d; color: #ffa983; }
:root[data-theme="dark"] .store-glyph.wish { background: #263e5d; color: #a3c9ff; }
.side-list .nm { font-size: 15px; line-height: 23px; font-weight: 600; }
.side-list .ar { font-size: 12px; line-height: 19px; color: var(--label-2); margin-top: 5px; }
.store-meta { font-size: 12px; line-height: 19px; margin-top: 8px; color: var(--label-2); }
.store-score { font-weight: 600; color: var(--accent); }
.row-arrow { display: none; }
.side-list .empty { padding: 36px 12px; font-size: 14px; line-height: 24px; color: var(--label-2); }
.side-list .empty strong { color: var(--label-1); }
.side-list .empty p { margin-top: 8px; }
.side-footer { padding: 12px 24px; font-size: 11px; color: var(--label-2); }
#clearFilters { margin-left: auto; padding: 7px 0 7px 10px; border: 0; background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; }
#side.strip { bottom: auto; border-bottom: 1px solid var(--separator); }
#side.strip .side-head { padding: 20px 24px; }
#side.strip .choose-store { display: none; }
#side.strip .sh-t { font-size: 21px; }
.atlas-legend { bottom: 28px; left: calc(50% + 170px); font-size: 12px; gap: 22px; padding: 12px 20px; }
.atlas-legend .dot { width: 9px; height: 9px; }
#card { top: 158px; right: 24px; width: 380px; max-height: calc(100dvh - 182px); }
.c-sub { font-size: 14px; line-height: 23px; color: var(--label-2); }
.c-pill { font-size: 12px; padding: 5px 8px; }
.c-stat .k { font-size: 12px; }
.c-sec h4 { font-size: 16px; }
.vd { font-size: 13px; }
.vm { font-size: 12px; }
.vn { font-size: 14px; line-height: 25px; }
.dh-nm { font-size: 14px; }
.dh-note { font-size: 13px; }
.detail-actions { display: flex; gap: 10px; padding: 18px 24px; margin-top: 24px; background: var(--surface); border-top: 1px solid var(--separator); }
.detail-actions button { flex: 1; min-height: 44px; border: 1px solid var(--separator); border-radius: 8px; background: var(--surface-soft); color: var(--label-1); font-size: 14px; cursor: pointer; }
.detail-actions button:first-child { background: #c74620; color: #fff; border-color: #c74620; }
#card.mini .detail-actions { display: none; }
/* 设置面板的字号原来在这里被改成了 14 / 12,而 style.css 那一套
   已经把同一批元素定义成 15 / 13 了,`.lg-sw-t em` 也没跟着改 ——
   结果一个分区里同时跑 15 / 14 / 13 / 12 四档,每档只差 1px,
   层级看不出来,看着就像有几处没对齐。

   这里【不再重复设字号】,统一交给 style.css 的排版系统管,
   本文件只管这个面板自己的布局。这样字号只有一处真值。 */
#results .nm { font-size: 15px; }
.maplibregl-ctrl-bottom-left { left: 378px; }
.maplibregl-ctrl-attrib { font-size: 10px; }
@media (min-width: 900px) and (max-width: 1150px) {
  .topbar { left: 340px; gap: 12px; }
  #side, #side.strip { width: 316px; left: 0; }
  .map-categories { left: 340px; gap: 6px; right: 145px; }
  .map-categories button { font-size: 14px; padding: 0 10px; }
  .map-categories svg { display: none; }
  .atlas-fit { right: 18px; }
  #card { width: 340px; right: 18px; }
  .maplibregl-ctrl-bottom-left { left: 330px; }
}
@media (max-width: 899px) {
  .atlas-header { height: 72px; padding: 10px 16px; }
  .brand-mark { width: 32px; height: 36px; border-radius: 9px; }
  .atlas-brand strong { font-size: 18px; line-height: 23px; }
  .atlas-brand small { font-size: 10px; line-height: 15px; }
  .topbar { top: 84px; left: 16px; right: 16px; }
  .search input { font-size: 16px; }
  .tools .pill, .fmc-trigger { font-size: 13px; }
  .tools { top: 18px; right: 10px; }
  .map-categories { top: 142px; left: 0; right: 0; gap: 8px; padding: 0 16px 6px; overflow-x: auto; scrollbar-width: none; pointer-events: auto; }
  .map-categories::-webkit-scrollbar { display: none; }
  .map-categories button { min-height: 40px; font-size: 13px; padding: 0 13px; flex: none; }
  .map-categories svg { width: 17px; height: 17px; }
  .atlas-fit { top: 204px; right: 16px; min-height: 40px; }
  #side, #side.strip { top: auto; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px); width: auto; border: 1px solid var(--separator); border-radius: 16px; box-shadow: var(--atlas-shadow); }
  #side.open { height: 58dvh; max-height: 58dvh; }
  #side .sh-t { font-size: 21px; line-height: 28px; }
  #side .side-head, #side.strip .side-head { padding: 16px 20px; }
  #side .sh-s > span { font-size: 12px; }
  #side .sh-s b { font-size: 15px; }
  .atlas-tabs button { font-size: 14px; min-height: 42px; }
  .choose-store { margin: 12px 20px 0; padding: 9px 12px; gap: 10px; }
  .choose-store small { display: none; }
  .choose-icon { font-size: 26px; height: 30px; width: 30px; line-height: 30px; }
  .choose-store strong { font-size: 14px; }
  .list-caption { margin: 10px 22px 5px; font-size: 12px; }
  .side-list .it { min-height: 104px; padding-top: 14px; padding-bottom: 14px; }
  .side-footer { display: flex; padding: 6px 20px; font-size: 10px; }
  .atlas-legend { left: 16px; bottom: calc(env(safe-area-inset-bottom) + 137px); padding: 10px 12px; gap: 12px; font-size: 11px; }
  .atlas-legend .dot { width: 7px; height: 7px; }
  #btnDrop { bottom: calc(env(safe-area-inset-bottom) + 132px); }
  #card { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-height: calc(100dvh - 192px); border-radius: 18px 18px 0 0; }
  .c-nm { font-size: 22px; }
  .maplibregl-ctrl-bottom-left { left: 12px; }
  html:has(#side.open) .maplibregl-ctrl-bottom-left { bottom: calc(58dvh + env(safe-area-inset-bottom) + 12px); }
  #setup { max-height: calc(100dvh - 85px); }
}
@media (max-width: 370px) {
  .atlas-brand small { display: none; }
  .atlas-brand strong { font-size: 16px; }
  .atlas-legend { left: 12px; gap: 9px; padding: 10px 9px; }
  #btnDrop { right: 12px; }
}