:root{
    --panel:#fff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb;
    --shadow:0 6px 24px rgba(15,23,32,.18);
    --novice:#69db7c; --easy:#2f9e44; --intermediate:#1971c2;
    --advanced:#e03131; --expert:#212529; --freeride:#f59f00; --other:#868e96;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink)}
  #map{position:absolute;inset:0}
  .panel{background:var(--panel);border-radius:10px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06)}
  select{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#f9fafb;width:100%}

  #info{position:absolute;top:14px;left:14px;width:330px;padding:12px 14px;z-index:5;max-height:calc(100% - 250px);display:flex;flex-direction:column}
  #info .crumb{font-size:11px;color:var(--muted);margin:8px 0 4px}
  #info h1{margin:0;font-size:18px;line-height:1.25}
  #info .meta{font-size:11px;color:var(--muted);margin-top:3px}
  #chips{display:flex;gap:6px;align-items:center;margin:8px 0}
  .chip{font-size:11px;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#3730a3}
  .chip.diff{background:#111827;color:#fff}
  #stats{font-size:12.5px;color:#374151;display:flex;flex-wrap:wrap;gap:3px 12px}
  #stats b{color:#111827}
  hr{border:0;border-top:1px solid var(--line);margin:9px 0}
  #listHd{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:4px}
  #list{overflow:auto;flex:1;min-height:90px}
  .row{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:6px;font-size:12px;cursor:pointer}
  .row:hover{background:#f3f6fa}
  .row.on{background:#111827;color:#fff}
  .row.on .sub{color:#cbd5e1}
  .dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
  .row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .row .sub{color:var(--muted);font-size:11px;flex:0 0 auto}

  #profile{position:absolute;left:14px;bottom:14px;width:470px;padding:10px 12px 6px;z-index:5}
  #profile .hd{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px}
  #profile .hd b{color:#111827;font-size:13px}
  #chartWrap{position:relative}
  #chart{display:block;width:100%;height:150px}
  #tip{position:absolute;pointer-events:none;background:rgba(17,24,39,.92);color:#fff;font-size:12px;line-height:1.4;
       padding:5px 8px;border-radius:6px;white-space:nowrap;transform:translate(-50%,-120%);display:none;z-index:6}
  .bandLegend{display:flex;gap:9px;font-size:11px;color:var(--muted);margin-top:3px;flex-wrap:wrap}
  .bandLegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}

  #controls{position:absolute;top:14px;right:14px;z-index:5;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
  .btns{display:flex;gap:6px;background:var(--panel);border-radius:10px;padding:6px;box-shadow:var(--shadow);flex-wrap:wrap;justify-content:flex-end;max-width:330px}
  button{font:inherit;font-size:12px;border:1px solid var(--line);background:#f9fafb;color:#111827;padding:6px 10px;border-radius:7px;cursor:pointer}
  button:hover{background:#eef2f7}
  button.on{background:#111827;color:#fff;border-color:#111827}
  #legend{width:190px;padding:9px 12px;font-size:11.5px;line-height:1.8}
  #legend .k{display:inline-block;width:16px;height:4px;border-radius:2px;margin-right:7px;vertical-align:2px}

  #note{position:absolute;right:70px;bottom:44px;z-index:4;font-size:11px;color:#e5e7eb;max-width:calc(100% - 620px);
        background:rgba(15,23,32,.72);padding:5px 10px;border-radius:999px;line-height:1.5}
  #hint{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:4;font-size:12px;background:rgba(15,23,32,.75);
        color:#fff;padding:6px 12px;border-radius:999px;display:none}
  #err{position:absolute;inset:0;display:none;place-items:center;background:#0f1720;color:#fff;z-index:20;font-size:14px;text-align:center;padding:40px;line-height:1.8}
  #banner{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:9;display:none;max-width:70%;
          background:#7f1d1d;color:#fff;font-size:12px;padding:7px 12px;border-radius:8px;line-height:1.5}
  #diag{position:absolute;right:14px;top:14px;z-index:30;display:none;width:430px;max-height:80%;overflow:auto;
        background:#0f1720;color:#e5e7eb;font-size:11.5px;padding:12px 14px;border-radius:10px;line-height:1.65;
        box-shadow:0 10px 40px rgba(0,0,0,.45)}
  #diag pre{white-space:pre-wrap;word-break:break-all;margin:6px 0 0;font-size:11px}
  #diag b{color:#fff}
  #diag .ok{color:#69db7c} #diag .bad{color:#ff8787}
  .maplibregl-popup-content{font-family:inherit;font-size:12px;line-height:1.4;padding:6px 9px;border-radius:8px;
        box-shadow:0 4px 16px rgba(15,23,32,.22)}
  .maplibregl-popup-content b{font-size:12.5px}

/* ===== 生产站补充样式 ===== */
/* 左侧雪道列表不要被底部剖面面板压住：给底部面板留够高度（剖面面板实测高 ~245px） */
#info{max-height:calc(100% - 300px)}
#backLink{position:absolute;top:14px;left:14px;z-index:30;display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:9px;background:rgba(15,23,32,.86);color:#e6edf3;text-decoration:none;
  font-size:13px;line-height:1;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(4px)}
#backLink:hover{background:rgba(15,23,32,.96)}
#info{margin-top:42px}
#pageErr{position:absolute;inset:0;display:none;place-items:center;background:#0f1720;color:#e6edf3;
  z-index:25;font-size:14px;text-align:center;padding:40px;line-height:1.9}

/* ===== 站点皮肤：对齐公众站设计规范（layouts.web + app.css）=====
   主色 #1677FF；卡片 白底 + #E5E6EB 边框 + 12px 圆角 + 0 4px 20px rgba(29,33,41,.08)
   难度色沿用站点 trail-badge 体系：绿 #00B42A / 蓝 #1677FF / 黑 #1D2129，另加站点红 #F53F3F、橙 #FF7D00
   ------------------------------------------------------------------ */
:root{
  --c-bg:#F4F5F8; --c-card:#FFFFFF; --c-border:#E5E6EB; --c-primary:#1677FF;
  --c-text-1:#1D2129; --c-text-2:#4E5969; --c-text-3:#86909C;
  --c-green:#00B42A; --c-red:#F53F3F; --c-orange:#FF7D00; --c-black:#1D2129;
  /* 页面内部令牌改指站点色 */
  --panel:#fff; --ink:#1D2129; --muted:#86909C; --line:#E5E6EB;
  --shadow:0 4px 20px rgba(29,33,41,.08);
  --novice:#7BE0A0; --easy:#00B42A; --intermediate:#1677FF;
  --advanced:#F53F3F; --expert:#1D2129; --freeride:#FF7D00; --other:#86909C;
}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC","Inter",sans-serif;
     color:var(--c-text-1)}
/* 地图舞台：占满「站点顶栏」以下的可视区；浮层以它为定位父级（顶栏 60px 见 components/web/header） */
.stv-stage{position:relative;height:calc(100vh - 60px);min-height:560px;overflow:hidden;background:var(--c-bg)}
/* 沉浸式地图页不要站点页脚（整页正好一屏） */
body>footer{display:none}
.panel{border-radius:12px;border:1px solid var(--c-border);box-shadow:0 4px 20px rgba(29,33,41,.08)}
#info{max-height:calc(100% - 300px);margin-top:42px}
#info h1{font-size:19px;font-weight:700;color:var(--c-text-1)}
#info .crumb,#info .meta,#listHd,.bandLegend,#profile .hd,#legend{color:var(--c-text-3)}
#stats{color:var(--c-text-2)} #stats b{color:var(--c-text-1)}
hr{border-top-color:var(--c-border)}
.chip{background:#EDF2FF;color:var(--c-primary);font-weight:500}
.chip.diff{background:var(--c-primary);color:#fff}
.btns{border-radius:12px;border:1px solid var(--c-border);padding:6px}
button{font-weight:500;background:#fff;border:1px solid var(--c-border);color:var(--c-text-2);border-radius:8px}
button:hover{background:#EFF2F7;color:var(--c-text-1)}
button.on{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
button.on:hover{background:#0958D9}
select{background:#fff;border:1px solid var(--c-border);border-radius:8px;color:var(--c-text-1)}
select:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(22,119,255,.15)}
.row{border-radius:8px;color:var(--c-text-1)}
.row:hover{background:#EFF2F7}
.row.on{background:var(--c-primary);color:#fff}
.row.on .sub{color:rgba(255,255,255,.86)}
#profile .hd b{color:var(--c-text-1)}
#tip{background:rgba(29,33,41,.92);color:#fff}
#backLink{background:#fff;color:var(--c-text-2);border:1px solid var(--c-border);border-radius:10px;
  font-weight:600;box-shadow:0 4px 14px rgba(29,33,41,.10);backdrop-filter:none}
#backLink:hover{background:#fff;color:var(--c-primary);border-color:var(--c-primary)}
#note{background:rgba(255,255,255,.94);color:var(--c-text-3);border:1px solid var(--c-border);
  box-shadow:0 2px 10px rgba(29,33,41,.08)}
#hint{background:rgba(29,33,41,.86);color:#fff}
#err,#pageErr{background:#fff;color:var(--c-text-2)}
#pageErr a{color:var(--c-primary)}
#diag{background:#fff;color:var(--c-text-2);border:1px solid var(--c-border);
  box-shadow:0 10px 40px rgba(29,33,41,.18)}
#diag b{color:var(--c-text-1)}
#diag .ok{color:var(--c-green)} #diag .bad{color:var(--c-red)}
#banner{background:#FFF1F0;color:#CF1322;border:1px solid #FFCCC7;box-shadow:0 4px 14px rgba(207,19,34,.12)}

/* ---- 面板高度：一直填到剖面面板上方 15px（JS 会用剖面实测高度精修这个值）---- */
#info{max-height:calc(100% - 345px);margin-top:42px}
#chart{height:185px}                             /* 剖面加大，整体更靠近上面 */
.row .nm.unnamed{color:var(--c-text-3)}
/* ---- 雪场名（原下拉框的位置）放大一级 ---- */
#info .crumb{font-size:14px;font-weight:600;color:var(--c-text-2);margin:0 0 3px}
/* ---- 参数块：改两列卡片，不再平铺成一行 ---- */
#stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
#stats .kv{background:#F7F9FC;border:1px solid #EFF2F7;border-radius:8px;padding:5px 8px;
  display:flex;align-items:baseline;justify-content:space-between;gap:6px}
#stats .kv>span{font-size:11px;color:var(--c-text-3)}
#stats .kv>b{font-size:12.5px;color:var(--c-text-1);font-weight:600}
#stats .kv>b i{font-style:normal;font-size:10.5px;color:var(--c-text-3);margin-left:3px}
#stats .kv.kv-wide{grid-column:1 / -1}
/* ---- 版权署名：保留可见（ODbL 署名要求）但压低存在感，且贴近底边 ---- */
#note{right:70px;bottom:10px;font-size:10px;color:#C9CDD4;background:rgba(255,255,255,.72);
  border-color:transparent;padding:4px 9px}
/* ---- 技术性字段（段数 / 采样间隔）：淡化，不跟关键数据抢视线 ---- */
.chip.meta{background:#F7F8FA;color:#C9CDD4;font-weight:400}
/* ---- 返回按钮：醒目主色、加大 ---- */
#backLink{background:var(--c-primary);color:#fff;border:1px solid var(--c-primary);border-radius:10px;
  font-weight:600;font-size:15px;padding:10px 16px;box-shadow:0 6px 18px rgba(22,119,255,.28);backdrop-filter:none}
#backLink:hover{background:#0958D9;color:#fff;border-color:#0958D9}
/* ---- 小程序 web-view 内：微信导航栏已在最上面，不要站点顶栏，地图整屏 ---- */
body.stv-in-mp>header{display:none}
body.stv-in-mp .stv-stage{height:100vh;min-height:100vh}
body.stv-in-mp #note{bottom:6px}
body.stv-in-mp #backLink{font-size:14px;padding:8px 14px}
/* ---- 窄屏（手机）叠放 ---- */
@media (max-width:560px){
  #info{width:calc(100% - 28px);max-height:44vh}
  #profile{width:calc(100% - 28px)}
  .btns{max-width:calc(100% - 28px)}
  #note{right:14px;bottom:8px;max-width:calc(100% - 28px);white-space:normal}
}