:root{
  --bg:#f4f7fb; --card:#ffffff; --line:#e3eaf2; --ink:#16232e; --ink2:#4a5b6b; --ink3:#7b8b9a;
  --accent:#0f7ea8; --accent2:#0ea5e9; --good:#ff4d3d; --warn:#ff8c1a; --blue:#3fa7e0;
  --shadow:0 2px 10px rgba(16,42,66,.08), 0 12px 34px rgba(16,42,66,.06);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); overflow:hidden;
}
#app{height:100%;display:flex;flex-direction:column}

/* ---------- topbar ---------- */
.topbar{
  height:66px;flex:0 0 66px;display:flex;align-items:center;gap:18px;
  padding:0 20px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 6px rgba(16,42,66,.05);
  z-index:30;
}
.brand{display:flex;align-items:center;gap:12px;min-width:330px}
.logo{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,#0ea5e9,#0b4f6c);color:#fff;font-size:20px;font-weight:700;
  box-shadow:0 4px 12px rgba(14,165,233,.35);
}
.titles h1{margin:0;font-size:17px;letter-spacing:.3px}
.titles p{margin:2px 0 0;font-size:12px;color:var(--ink3)}
.status{margin-left:auto;text-align:right}
.st-row{display:flex;align-items:center;gap:7px;justify-content:flex-end;font-size:13px;font-weight:600}
.dot{width:9px;height:9px;border-radius:50%;background:#c3ced9;display:inline-block}
.dot.ok{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.dot.warn{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.dot.err{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.st-sub{font-size:11px;color:var(--ink3);margin-top:2px}
.actions{display:flex;gap:8px}
.btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;
  padding:8px 14px;font-size:13px;cursor:pointer;transition:.15s;font-family:inherit;
}
.btn:hover{border-color:var(--accent2);color:var(--accent);background:#f0faff}
.btn.ghost{background:#f7fafc;color:var(--ink2)}
.btn.primary{background:linear-gradient(135deg,#0ea5e9,#0b4f6c);color:#fff;border-color:transparent}
.btn.primary:hover{color:#fff;background:linear-gradient(135deg,#0d94d3,#0a4160)}

/* ---------- layout ---------- */
.layout{flex:1;display:flex;min-height:0}
.stage{flex:1;position:relative;min-width:0;background:linear-gradient(180deg,#0b2c46 0%,#0e3b5c 45%,#12527a 100%)}
#viewport{position:absolute;inset:0}
#viewport canvas{display:block}
/* 叠加面板定位；加上 iOS 安全区偏移，避免被刘海/灵动岛/圆角挡住（桌面端 env() 为 0，无副作用） */
.stage-overlay{position:absolute;z-index:5}
.top-left{top:calc(14px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left))}
.bottom-left{bottom:calc(14px + env(safe-area-inset-bottom));left:calc(14px + env(safe-area-inset-left))}
.top-right{top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right))}
.bottom-right{bottom:calc(14px + env(safe-area-inset-bottom));right:calc(14px + env(safe-area-inset-right))}
.panel-mini{
  background:rgba(9,26,42,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:10px 12px;color:#e8f4fb;
}
/* 纵向堆叠容器：右上角（图层）与右下角（地形图例 + 推荐指数）共用 */
.vr-stack{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* 右下角堆叠：从底边往上排，缩放时以右下角为锚点 */
.br-stack{transform-origin:bottom right}
.vr-stack>*{margin-top:0}
.vr-stack>*+*{margin-top:10px}          /* 兜底：不支持 flex gap 的旧版 Safari */
@supports (gap:10px){ .vr-stack>*+*{margin-top:0} }
.sea-legend{
  background:rgba(9,26,42,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:10px 12px;color:#e8f4fb;
}
.pm-title{font-size:11px;letter-spacing:1px;color:#8fc4de;margin-bottom:8px}
.chips{display:flex;gap:6px}
.chip{
  border:1px solid rgba(255,255,255,.2);background:transparent;color:#dbeef8;
  border-radius:14px;padding:5px 11px;font-size:12px;cursor:pointer;font-family:inherit;
}
.chip.active,.chip:hover{background:#0ea5e9;border-color:#0ea5e9;color:#fff}
.sw{display:flex;align-items:center;gap:7px;font-size:12px;margin:5px 0;cursor:pointer}
.sw input{accent-color:#0ea5e9}
/* 图层面板：5 个开关横排一行 —— 竖排时面板很高，右上角往下伸会压到右下的地形图例。
   限定 .sw-row 作用域，避免影响筛选区里同名的 .sw */
.panel-layers .sw-row{display:flex;flex-direction:row;align-items:center;gap:10px}
.panel-layers .sw-row .sw{margin:0;white-space:nowrap}
/* 图层压成一条单行横带：标题与 5 个开关同一行，进一步缩小体积并贴近右上角 */
.panel-layers{display:flex;align-items:center;gap:10px;padding:6px 10px}
.panel-layers .pm-title{margin:0;font-size:10.5px;letter-spacing:.5px;white-space:nowrap;color:#fff}
.panel-layers .sw-row .sw{font-size:11px;gap:5px;color:#fff}
/* 开关文字写在 <span> 里，需单独覆盖全局 .sw span 的深色规则，保持纯白（字号不变） */
.panel-layers .sw-row .sw span{color:#fff}
/* 图层的原生勾选框 → 发光圆点（每个图层一种颜色；关=暗灰空心，开=本色发光）。
   只作用于 .sw-row 内，筛选区的勾选框保持原生样式 */
.panel-layers .sw-row .sw input[type=checkbox]{
  -webkit-appearance:none;appearance:none;margin:0;
  width:11px;height:11px;flex:0 0 11px;border-radius:50%;
  background:rgba(255,255,255,.16);border:none;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:background .15s,box-shadow .15s;
}
.panel-layers .sw-row .sw input:checked{
  background:#8b95a5;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 7px rgba(255,255,255,.5);
}
.panel-layers .sw-row .sw:nth-child(1) input:checked{   /* 洋流：橙 */
  background:#ff8c4a;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 8px rgba(255,140,74,.9);
}
.panel-layers .sw-row .sw:nth-child(2) input:checked{   /* 地形网格：青绿 */
  background:#6ee7a0;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 8px rgba(110,231,160,.9);
}
.panel-layers .sw-row .sw:nth-child(3) input:checked{   /* 水面：蓝 */
  background:#38bdf8;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 8px rgba(56,189,248,.9);
}
.panel-layers .sw-row .sw:nth-child(4) input:checked{   /* 鱼群：紫 */
  background:#c084fc;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 8px rgba(192,132,252,.9);
}
.panel-layers .sw-row .sw:nth-child(5) input:checked{   /* 标签：黄 */
  background:#facc15;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 8px rgba(250,204,21,.9);
}
.legend{min-width:172px}
.lg-row{display:flex;align-items:center;gap:8px;font-size:12px;margin:4px 0;color:#e8f4fb}
.lg-row i{width:13px;height:13px;border-radius:3px;display:inline-block}
.lg-note{font-size:10.5px;color:#8fc4de;margin-top:8px;line-height:1.5}
.lg-sub{font-size:10px;color:#8fc4de;margin-bottom:3px}
/* 陆地海拔色带：与 scene.js / scene2d.js 的 LSTOPS 一一对应（0-4300m 线性映射） */
.land-bar{width:190px;height:10px;border-radius:5px;background:linear-gradient(90deg,#578047 0%,#6b8f4f 2.3%,#8f9959 9.3%,#b3a166 18.6%,#ad8559 34.9%,#916e52 58.1%,#a18f80 81.4%,#ebf0f7 100%)}
/* 海深色带：与 DSTOPS 对应（0-4000m） */
.depth-bar{width:190px;height:10px;border-radius:5px;background:linear-gradient(90deg,#c7f0fc 0%,#73d1f0 1.3%,#38ade0 3.8%,#1a80c7 10%,#0f57a1 25%,#0d3675 50%,#0a1f4f 75%,#080f30 100%)}
.depth-scale{display:flex;justify-content:space-between;width:190px;font-size:10px;color:#8fc4de;margin-top:3px}
.sm{width:9px;height:9px;border-radius:2px;display:inline-block;vertical-align:middle}
/* 抖音号联系卡片：位于右下角 br-stack 内（地形图例 + 推荐指数之下），与堆叠右对齐 */
.tip-author{
  background:rgba(9,26,42,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:7px 10px;color:#e8f4fb;
  font-size:11.5px;line-height:1.55;max-width:230px;text-align:right;
}
.tip-author b{display:block;color:#ffd166;font-size:12px;letter-spacing:.3px}
.tip-author span{color:#a9cde3;font-size:10.5px}
.stage-hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:5;
  font-size:11.5px;color:rgba(232,244,251,.6);background:rgba(9,26,42,.45);
  padding:5px 12px;border-radius:14px;
}

/* ---------- sidebar ---------- */
.sidebar{
  width:404px;flex:0 0 404px;background:#fff;border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.filters{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.f-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.f-row select{
  flex:1;padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;
  background:#fbfdff;color:var(--ink);font-family:inherit;
}
.count{margin-left:auto;font-size:12px;color:var(--ink3)}
.sw span{color:var(--ink2)}

.today-best{padding:12px 16px 4px}
.tb-title{font-size:12px;color:var(--ink3);font-weight:600;letter-spacing:.5px;margin-bottom:8px}
/* 筛选浏览的紧凑摘要块（标题 + 档位图例合一） */
.tb-summary{
  font-size:11.5px;color:var(--ink3);line-height:1.6;margin:0 0 8px;padding:8px 11px;
  background:#f8fbfe;border:1px solid var(--line);border-radius:9px;
}
.tb-summary .tb-l1{font-size:12px;font-weight:700;color:var(--ink2);letter-spacing:.3px}
.tb-summary .tb-l1 b{color:var(--ink)}
.tb-summary .tb-lg{margin-top:2px}
.tb-summary .tb-hint{margin-top:3px;opacity:.85}
.tb-summary .doti{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 3px 0 8px;vertical-align:middle}
.tb-card{
  display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:11px;
  background:linear-gradient(120deg,#fff6f4,#fff);border:1px solid #ffd9d2;margin-bottom:8px;cursor:pointer;
}
.tb-card:hover{box-shadow:var(--shadow)}
.tb-name{font-size:14px;font-weight:700}
.tb-meta{font-size:11.5px;color:var(--ink3);margin-top:3px}

.list{flex:1;overflow-y:auto;padding:8px 12px 24px}
.spot-card{
  display:flex;gap:12px;padding:12px;margin-bottom:9px;border:1px solid var(--line);
  border-radius:12px;background:#fff;cursor:pointer;transition:.15s;
}
.spot-card:hover{border-color:var(--accent2);box-shadow:var(--shadow);transform:translateY(-1px)}
.spot-card.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(14,165,233,.14)}
.ring{width:56px;height:56px;flex:0 0 56px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .val{
  position:absolute;inset:0;display:grid;place-items:center;font-size:16px;font-weight:800;
}
.sc-body{flex:1;min-width:0}
.sc-head{display:flex;align-items:baseline;gap:8px}
.sc-name{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-area{font-size:11.5px;color:var(--ink3);white-space:nowrap}
.sc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tag{font-size:11px;padding:2px 7px;border-radius:5px;background:#f1f6fa;color:var(--ink2)}
.tag.cost{background:#fff4e6;color:#b45309}
.tag.day{background:#eef7ff;color:#0369a1}
.verdict{font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px}
.v-excellent{background:#ffe8e5;color:#c0261a}
.v-good{background:#fff2e0;color:#b45309}
.v-fair{background:#fffae0;color:#a16207}
.v-poor{background:#eaf6ff;color:#0369a1}
.v-bad{background:#f1f5f9;color:#64748b}
.sc-mini{display:flex;gap:12px;margin-top:7px;font-size:11.5px;color:var(--ink2)}
.sc-mini b{color:var(--ink)}

/* 卡片名次徽章 */
.sc-no{
  flex:0 0 auto;display:inline-grid;place-items:center;min-width:21px;height:20px;padding:0 5px;
  border-radius:6px;background:#f1f6fa;color:var(--ink2);font-size:11.5px;font-weight:800;
}
.sc-no.top1{background:#ff4d3d;color:#fff}
.sc-no.top2{background:#ff8c1a;color:#fff}
.sc-no.top3{background:#ffc61a;color:#fff}

/* 档位分组标题 */
.grp-title{
  display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink);
  margin:12px 2px 7px;
}
.grp-title:first-child{margin-top:2px}
.grp-title i{width:11px;height:11px;border-radius:3px;display:inline-block}
.grp-title b{color:var(--accent)}
.grp-line{flex:1;height:1px;background:var(--line);margin-left:4px}

/* ---------- detail ---------- */
.detail{
  position:fixed;top:66px;right:0;bottom:0;width:660px;background:#fff;z-index:60;
  border-left:1px solid var(--line);box-shadow:-14px 0 40px rgba(16,42,66,.12);
  overflow-y:auto;padding:20px 22px 40px;
}
.detail::-webkit-scrollbar,.list::-webkit-scrollbar{width:8px}
.detail::-webkit-scrollbar-thumb,.list::-webkit-scrollbar-thumb{background:#cfdae5;border-radius:4px}
.dt-close{
  position:absolute;top:16px;right:18px;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--line);background:#fff;cursor:pointer;font-size:17px;color:var(--ink2);
}
.dt-title{font-size:21px;font-weight:800;margin:0}
.dt-sub{font-size:12.5px;color:var(--ink3);margin-top:5px}
.dt-hero{display:flex;gap:18px;align-items:center;margin:16px 0;padding:16px;border-radius:14px;background:#f8fbfe;border:1px solid var(--line)}
.dt-score{text-align:center;min-width:118px}
.dt-score .n{font-size:44px;font-weight:900;line-height:1}
.dt-score .l{font-size:12px;font-weight:700;margin-top:6px}
.dt-hero-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hg{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.hg .k{font-size:11px;color:var(--ink3)}
.hg .v{font-size:14px;font-weight:700;margin-top:2px}
h3.sec{font-size:14px;margin:22px 0 10px;padding-left:9px;border-left:3px solid var(--accent2)}
.factors{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.fct{display:flex;align-items:center;gap:8px;font-size:12px}
.fct .nm{width:66px;color:var(--ink2)}
.fct .bar{flex:1;height:7px;background:#eef3f8;border-radius:4px;overflow:hidden}
.fct .bar i{display:block;height:100%;border-radius:4px}
.fct .vv{width:30px;text-align:right;font-weight:700;color:var(--ink)}
table.fc{width:100%;border-collapse:collapse;font-size:12px}
table.fc th,table.fc td{padding:7px 6px;text-align:center;border-bottom:1px solid var(--line)}
table.fc th{background:#f5f9fc;color:var(--ink2);font-weight:600;font-size:11.5px}
table.fc td.dim{color:var(--ink3)}
.pill{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:700}
.chart{width:100%;height:200px;background:#fbfdff;border:1px solid var(--line);border-radius:12px;margin-top:10px}
.method{border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:9px;background:#fff}
.method h4{margin:0 0 5px;font-size:13.5px}
.method .gear{font-size:11.5px;color:var(--accent);background:#eef8fd;display:inline-block;padding:3px 8px;border-radius:5px;margin-bottom:6px}
.method p{margin:0;font-size:12.5px;color:var(--ink2);line-height:1.65}
.sp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sp{border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.sp .n{font-size:13px;font-weight:700}
.sp .d{font-size:11.5px;color:var(--ink3);margin-top:3px}
.hit{font-size:11.5px;padding:2px 6px;border-radius:4px;margin-left:6px}
.hit.on{background:#e6fff2;color:#157347}
.hit.off{background:#f5f7f9;color:#8896a5}
.cost-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cost-table td{padding:7px 4px;border-bottom:1px dashed var(--line)}
.cost-table td:last-child{text-align:right;font-weight:600}
.cost-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:12px 14px;border-radius:11px;background:linear-gradient(120deg,#fff7ed,#fff);border:1px solid #fbd9a8}
.cost-total .t{font-size:12.5px;color:#9a5b09}
.cost-total .m{font-size:22px;font-weight:800;color:#b45309}
.note{font-size:12px;color:var(--ink2);line-height:1.7;background:#f8fbfe;border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-top:10px}
.flags{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.flag{font-size:11.5px;padding:4px 9px;border-radius:6px}
.flag.danger{background:#fdeaea;color:#c0261a;border:1px solid #f8c9c4}
.flag.warn{background:#fff6e6;color:#b45309;border:1px solid #f7dcae}

/* ---------- modal ---------- */
[hidden]{display:none !important}
.modal{position:fixed;inset:0;background:rgba(12,26,40,.5);z-index:100;display:grid;place-items:center;padding:24px}
.modal-box{
  background:#fff;border-radius:16px;max-width:720px;width:100%;max-height:86vh;overflow-y:auto;
  padding:26px 28px;position:relative;box-shadow:0 30px 70px rgba(0,0,0,.28)
}
.modal-box h2{margin:0 0 14px;font-size:19px}
.modal-box h3{font-size:14px;margin:18px 0 8px;color:var(--accent)}
.modal-box ul{margin:0;padding-left:19px;font-size:12.8px;line-height:1.85;color:var(--ink2)}
.modal-box p{font-size:12.8px;line-height:1.75;color:var(--ink2)}
.close{position:absolute;top:16px;right:18px;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-size:17px;color:var(--ink2)}
table.wt{width:100%;border-collapse:collapse;font-size:12.5px}
table.wt td{padding:6px 4px;border-bottom:1px solid var(--line);color:var(--ink2)}
table.wt td:nth-child(1){font-weight:700;color:var(--ink);width:88px}
table.wt td:nth-child(2){width:52px;color:var(--accent);font-weight:700}
.modal-box ol{margin:0;padding-left:20px;font-size:12.8px;line-height:1.85;color:var(--ink2)}
.modal-box ol li{margin-bottom:5px}
.modal-box code{background:#eef4fa;border:1px solid #dbe6f0;border-radius:4px;padding:1px 5px;font-size:11.8px;color:#12507a;word-break:break-all}
.warn{background:#fff8ec;border:1px solid #f7dcae;border-radius:9px;padding:10px 12px;color:#8a5200 !important;font-size:12.3px !important}

/* 小屏：提示条收紧，避免遮住左上角面板 */
@media (max-width:900px){
  /* 右对齐并给左上「视图模式」面板让位：原来居中会压住 3D/2D 切换按钮，
     手机上一旦落进 2D 就点不回 3D（banner 的 z-index 比 overlay 高）。 */
  .mode-banner{left:auto;right:8px;top:6px;transform:none;
    max-width:calc(100% - 118px);padding:5px 8px 5px 10px;gap:6px}
  .mode-banner .mb-t{font-size:11px}
  .mode-banner button{font-size:11px;padding:4px 8px}
  .mode-banner #btnGlHelp{display:none}   /* 手机上帮助入口意义不大，腾出宽度 */
}

/* ---------- 2D 备用地图 ---------- */
.map2d{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}
.mode-banner{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:14;
  display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);
  background:rgba(10,32,50,.82);border:1px solid rgba(120,190,235,.35);
  border-radius:20px;padding:6px 8px 6px 12px;backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.mode-banner .mb-dot{width:8px;height:8px;border-radius:50%;background:#ffc61a;box-shadow:0 0 0 3px rgba(255,198,26,.22);flex:0 0 auto}
.mode-banner .mb-t{font-size:12px;color:#dbeefb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mode-banner button{
  flex:0 0 auto;border:0;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;
  padding:5px 10px;border-radius:14px;cursor:pointer;
}
.mode-banner button:hover{background:#0b93cf}

@media (max-width:1180px){
  .sidebar{width:340px;flex-basis:340px}
  .detail{width:min(660px,92vw)}
}

/* ================= 手机端（微信内置浏览器 / 竖屏） ================= */
@media (max-width:900px){
  body{overflow:hidden;-webkit-text-size-adjust:100%}
  .topbar{height:auto;flex:0 0 auto;padding:8px 12px;gap:8px;flex-wrap:wrap}
  .brand{flex:1 1 auto;min-width:0;gap:9px}
  .logo{width:34px;height:34px;border-radius:9px;font-size:17px}
  .titles h1{font-size:15px}
  .titles p{display:none}
  .status{margin-left:auto}
  .st-row{font-size:11.5px}
  .st-sub{display:none}
  .actions{gap:6px}
  .btn{padding:6px 10px;font-size:12px}

  .layout{flex-direction:column}
  /* 3D 区略收一点，把高度让给下方列表 */
  .stage{flex:0 0 42vh;height:42vh;height:42dvh}
  /* 手机端不再给地图面板做任何「特化」：样式、内容完全与电脑端一致，
     只用 transform 整体等比缩小以便塞进小屏（先写的 margin 兜底供不支持 flex gap 的旧 Safari 使用） */
  .stage-overlay{transform:scale(.70);transform-origin:top left}
  .bottom-left{transform-origin:bottom left}
  .bottom-right{transform-origin:bottom right}
  .top-right{transform-origin:top right}

  /* 左侧 plaque「视图模式」：限制宽度让 6 个按钮换行排布（用户明确要求把它调小），
     面板由原先横占半屏（约 250px 宽）收到 130px 内；字号同步压一档，整体仍等比缩放 */
  .stage-overlay.top-left{transform:scale(.82);transform-origin:top left}
  .stage-overlay.top-left .panel-mini{max-width:130px;padding:8px 9px}
  .stage-overlay.top-left .pm-title{font-size:10px;letter-spacing:.5px;margin-bottom:5px}
  .stage-overlay.top-left .chips{flex-wrap:wrap;gap:4px}
  .stage-overlay.top-left .chip{padding:3px 7px;font-size:10.5px;border-radius:9px;line-height:1.4}
  .stage-overlay.top-left .mode-chips .chip{padding:3px 7px;font-size:10.5px}
  /* 图层变成单行横带后整体偏宽，手机上仍限定宽度；极窄屏允许折行，避免溢出屏幕 */
  .panel-layers{padding:5px 8px;gap:8px}
  .panel-layers .sw-row{flex-wrap:wrap;gap:3px 8px;max-width:330px}
  /* 右下角叠了地形图例 + 推荐指数两块，比单块高一倍多，
     手机上单独再缩一档（0.60 vs 全局 0.70），保证不会顶到右上角的图层面板 */
  .stage-overlay.bottom-right.br-stack{transform:scale(.60);transform-origin:bottom right}
  /* 左下角已空出（抖音卡片移到右上角图层下方），操作提示回到左下贴底 */
  .stage-hint{
    left:calc(14px + env(safe-area-inset-left));right:auto;transform:none;
    bottom:calc(14px + env(safe-area-inset-bottom));
    max-width:170px;font-size:10.5px;padding:4px 9px;line-height:1.35;
  }

  .sidebar{
    width:auto;flex:1 1 auto;border-left:none;border-top:1px solid var(--line);min-height:0;
  }
  /* 手机端：把筛选区与摘要块压扁，把更多高度让给列表 */
  .filters{padding:7px 10px 6px}
  .f-row{margin-bottom:5px;gap:6px}
  .f-row select{padding:5px 7px;font-size:11.5px;min-width:0}
  .sw span{font-size:11.5px}
  .count{font-size:11px}
  .today-best{padding:7px 10px 0}
  .tb-summary{padding:6px 9px;font-size:10.5px;line-height:1.45;margin-bottom:6px}
  .tb-summary .tb-l1{font-size:11px}
  .tb-summary .tb-hint{display:none}      /* 提示语在手机上不占位 */
  .rank-summary{font-size:10.5px;line-height:1.45;padding:6px 9px;margin:0 0 7px}
  .rank-summary .sum-hint{display:none}
  .rank{padding:6px 10px 18px}
  .rk{padding:7px 8px;margin-bottom:5px;gap:7px}
  .grp-title{margin:8px 2px 5px;font-size:11.5px}
  .grp-title i{width:9px;height:9px}
  .tabs{padding:7px 10px 0}
  .tabs .tab{padding:6px 4px;font-size:12px;flex:1}
  .map-btn{display:block}
  .list{padding:6px 10px 16px;-webkit-overflow-scrolling:touch}
  .spot-card{padding:9px 10px;margin-bottom:7px}
  .ring{width:48px;height:48px;flex-basis:48px}
  .ring .val{font-size:14px}

  .detail{
    top:0;left:0;right:0;bottom:0;width:auto;max-width:none;border-left:none;
    padding:16px 14px 48px;z-index:200;
  }
  .dt-title{font-size:18px;padding-right:40px}
  .dt-hero{flex-direction:column;gap:12px;padding:13px}
  .dt-hero-grid{width:100%;grid-template-columns:repeat(3,1fr)}
  .dt-score .n{font-size:38px}
  .factors{grid-template-columns:1fr}
  .sp-grid{grid-template-columns:1fr}
  .chart{height:170px}
  .modal{padding:12px}
  .modal-box{padding:20px 16px;max-height:90vh}
}

@media (max-width:420px){
  .rk-score{width:46px;flex-basis:46px}
  .rk-score .n{font-size:18px}
  .rk-score .u{font-size:9px}
  .rk-cost{min-width:52px}
  .rk-metrics{font-size:10.5px;gap:6px}
  .dt-hero-grid{grid-template-columns:repeat(2,1fr)}
  .stage{flex-basis:40vh;height:40vh;height:40dvh}
  /* 极窄屏同样保持与电脑一致的地图面板内容，不再隐藏推荐指数图例 */
  .stage-overlay{transform:scale(.62);transform-origin:top left}
  /* 左上「视图模式」在极窄屏再收一档（优先级：两个类的选择器才能覆盖上面那条） */
  .stage-overlay.top-left{transform:scale(.74);transform-origin:top left}
  /* 右下图例堆叠在极窄屏再收一档，避免占满整个地图右侧 */
  .stage-overlay.bottom-right.br-stack{transform:scale(.52);transform-origin:bottom right}
  /* 底部提示：左下贴底（右下让给图例堆叠，抖音卡片已在右上角） */
  .stage-hint{bottom:calc(14px + env(safe-area-inset-bottom));font-size:10px;padding:3px 8px}
}

/* 小屏手机：header 压成一行，数据状态折到第二行小字 */
@media (max-width:560px){
  .topbar{padding:7px 10px 6px;gap:6px;flex-wrap:wrap}
  .titles h1{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .status{order:5;flex:1 0 100%;text-align:left;margin:1px 0 0}
  .st-row{justify-content:flex-start;font-size:10.5px;font-weight:600;color:var(--ink2)}
  .st-sub{display:block;font-size:9.5px;margin-top:0;margin-left:16px}
  .dot{width:7px;height:7px}
  .actions{margin-left:auto;flex:0 0 auto}
  .btn{padding:6px 8px;font-size:11.5px}
  .logo{width:30px;height:30px;font-size:15px;border-radius:8px}
}

/* ---------- 分享面板 ---------- */
.share-mask{position:fixed;inset:0;background:rgba(12,26,40,.55);z-index:300;display:grid;place-items:end center}
.share-sheet{
  width:100%;max-width:520px;background:#fff;border-radius:18px 18px 0 0;padding:20px 18px 26px;
  box-shadow:0 -18px 50px rgba(12,26,40,.28);animation:sheetUp .22s ease;
}
@keyframes sheetUp{from{transform:translateY(60px);opacity:.4}to{transform:translateY(0);opacity:1}}
.share-sheet h3{margin:0 0 6px;font-size:16px}
.share-sheet .sub{font-size:12.5px;color:var(--ink3);margin-bottom:14px;line-height:1.7}
.share-link{
  display:flex;gap:8px;align-items:center;background:#f6fafd;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin-bottom:12px;
}
.share-link input{
  flex:1;min-width:0;border:none;background:transparent;font-size:12.5px;color:var(--ink2);
  font-family:inherit;outline:none;
}
.share-link button{
  border:none;background:var(--accent);color:#fff;border-radius:8px;padding:7px 12px;
  font-size:12.5px;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.share-tip{font-size:12.5px;color:var(--ink2);line-height:1.8;background:#f8fbfe;border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.share-tip b{color:var(--accent)}
.share-close{width:100%;margin-top:14px;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:10px;padding:11px;font-size:14px;cursor:pointer;font-family:inherit}

/* ---------- 侧栏视图切换 ---------- */
.tabs{display:flex;gap:6px;padding:10px 12px 0}
.tabs .tab{
  flex:1;text-align:center;font-size:12.5px;padding:7px 4px;border:1px solid var(--line);
  border-radius:8px;background:#fbfdff;color:var(--ink2);cursor:pointer;font-family:inherit;transition:.15s;
}
.tabs .tab:hover{border-color:var(--accent2);color:var(--accent)}
.tabs .tab.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
/* 收起/展开 3D 地图（仅手机端显示） */
.map-btn{
  display:none;margin-left:auto;flex:0 0 auto;white-space:nowrap;
  font-size:11.5px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink2);cursor:pointer;font-family:inherit;
}
.map-btn:active{background:#eef6fc;color:var(--accent)}
/* 收起态：地图只留窄条，列表占满剩余高度 */
body.map-min .stage{flex:0 0 11vh!important;height:11vh!important}
body.map-min .stage-hint,
body.map-min .stage-overlay{display:none!important}

/* ---------- 今日全国排行榜 ---------- */
.rank{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 12px 22px;-webkit-overflow-scrolling:touch}
.rank::-webkit-scrollbar{width:8px}
.rank::-webkit-scrollbar-thumb{background:#cfdae5;border-radius:4px}
.rank-summary{
  font-size:11.5px;color:var(--ink3);line-height:1.75;margin:0 0 9px;padding:9px 11px;
  background:#f8fbfe;border:1px solid var(--line);border-radius:9px;
}
.rank-summary b{color:var(--ink)}
.rank-summary .doti{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 3px 0 8px;vertical-align:middle}
.rk{
  display:flex;gap:9px;align-items:center;padding:9px 10px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:6px;background:#fff;cursor:pointer;transition:.15s;
}
.rk:hover{border-color:var(--accent2);box-shadow:var(--shadow);transform:translateY(-1px)}
.rk.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(14,165,233,.14)}
.rk-no{
  width:27px;height:27px;flex:0 0 27px;border-radius:8px;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;background:#f1f6fa;color:var(--ink2);
}
.rk-no.top1{background:#ff4d3d;color:#fff}
.rk-no.top2{background:#ff8c1a;color:#fff}
.rk-no.top3{background:#ffc61a;color:#fff}
.rk-score{width:54px;flex:0 0 54px;text-align:center}
.rk-score .n{font-size:20px;font-weight:900;line-height:1}
.rk-score .u{font-size:9.5px;color:var(--ink3);margin-top:2px}
.rk-body{flex:1;min-width:0}
.rk-hd{display:flex;align-items:baseline;gap:6px;min-width:0}
.rk-nm{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-ar{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.rk-metrics{display:flex;flex-wrap:wrap;gap:7px;font-size:11px;color:var(--ink2);margin-top:4px}
.rk-metrics b{color:var(--ink)}
.rk-cost{flex:0 0 auto;min-width:64px;text-align:right}
.rk-cost .m{font-size:12.5px;font-weight:700;color:#b45309}
.rk-cost .d{font-size:10.5px;color:var(--ink3);margin-top:2px}
.rk-best{font-size:10.5px;color:var(--accent);margin-top:3px}

/* ---------- 3D 悬停浮层 ---------- */
.scene-tip{
  position:absolute;z-index:8;pointer-events:none;display:none;max-width:236px;
  background:rgba(9,26,42,.93);color:#e8f4fb;border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:9px 11px;font-size:11.5px;line-height:1.65;
  box-shadow:0 10px 26px rgba(0,0,0,.38);
}
.scene-tip .t-name{font-size:13.5px;font-weight:800;color:#fff}
.scene-tip .t-sub{font-size:10.5px;color:#8fc4de;margin-top:1px}
.scene-tip .t-row{margin-top:5px;display:flex;gap:9px;flex-wrap:wrap}
.scene-tip .t-sc{font-weight:800;font-size:13px}
.scene-tip .t-hint{font-size:10.5px;color:#8fc4de;margin-top:6px;border-top:1px solid rgba(255,255,255,.12);padding-top:5px}

/* ---------- 3D 降级 ---------- */
.stage-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;color:#cfe8f7;padding:24px;
}
.stage-fallback b{font-size:15px}
.stage-fallback span{font-size:12.5px;line-height:1.8;color:#8fc4de}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:400;
  background:rgba(18,38,56,.94);color:#fff;font-size:13px;padding:10px 18px;border-radius:22px;
  box-shadow:0 8px 22px rgba(12,26,40,.3);
}

/* ---------- 视图模式切换（3D 立体 / 2D 平面） ---------- */
.mode-chips .chip{padding:4px 10px;font-size:11.5px}
.mode-chips{margin-bottom:2px}
.mode-banner button[hidden]{display:none}

/* ---------- 背景音乐控制（右下角 br-stack 内，3D=晴天 / 2D=花海，各自静音键） ---------- */
.music-ctrl{
  background:rgba(9,26,42,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:7px 10px;color:#e8f4fb;
  display:flex;flex-direction:column;gap:6px;max-width:230px;
}
.music-ctrl .mc-title{font-size:10.5px;color:#8fc4de;letter-spacing:.3px}
.music-ctrl .mc-btn{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#e8f4fb;border-radius:8px;padding:5px 9px;cursor:pointer;
  font-size:12px;line-height:1.2;text-align:left;transition:background .15s,border-color .15s;
}
.music-ctrl .mc-btn:hover{background:rgba(255,255,255,.15)}
.music-ctrl .mc-btn:active{transform:scale(.97)}
.music-ctrl .mc-btn .mc-ic{font-size:14px;line-height:1}
.music-ctrl .mc-btn.mc-muted{opacity:.6}
.music-ctrl .mc-btn.mc-missing{opacity:.45;cursor:not-allowed;border-style:dashed}
.music-ctrl .mc-btn.mc-missing .mc-ic{filter:grayscale(1)}
.music-ctrl .mc-hint{font-size:10.5px;color:#ffd98a;background:rgba(255,180,60,.12);border:1px solid rgba(255,200,100,.32);border-radius:7px;padding:4px 7px;line-height:1.25}

/* 4K 高清：画质区按钮（复用 .chip 通用样式，仅做视觉区分） */
.hq-chips{gap:6px;flex-wrap:wrap}
#btnExport{border-style:dashed;color:#bfe9ff}
#btnExport:hover{background:#1d6fa5;border-color:#1d6fa5;color:#fff}
#btnExport:active{transform:scale(.97)}
.hq-chips .chip.active{background:#22c55e;border-color:#22c55e;color:#06231a}