/* style-weather.css · 天气面板（阶段五拆分） */
/* ===== 阶段六 · 天气面板（右侧可折叠·body 级单实例·全局） ===== */
#weather-sidebar {
  position: fixed; right: 0; top: 56px; bottom: 0; width: 260px;
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 40;
  transition: width .25s; overflow: hidden;
  box-shadow: -2px 0 8px rgba(0,0,0,.05);
}
body:not(.weather-open) #weather-sidebar { width: 30px; }
#weather-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#weather-toggle {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-size: 12px; padding: 3px 9px; border-radius: 6px; cursor: pointer; line-height: 1.4;
  transition: all .15s;
}
#weather-toggle:hover { background: var(--surface-hover); color: var(--text-1); border-color: var(--border-strong); }
#weather-tab { display: none; }
body:not(.weather-open) #weather-header { display: none; }
body:not(.weather-open) #weather-inner { display: none; }
body:not(.weather-open) #weather-tab {
  display: flex; align-items: center; justify-content: center; flex: 1;
  writing-mode: vertical-rl; font-size: 13px; letter-spacing: 3px;
  color: var(--text-2); cursor: pointer; user-select: none;
}
body:not(.weather-open) #weather-tab:hover { color: var(--accent); background: var(--surface-hover); }
#weather-inner { padding: 8px; overflow-y: auto; flex: 1; }
.ws-clock { font-size: 13px; font-weight: 600; color: var(--accent); font-family: Consolas, monospace; }
.ws-header { font-size: 13px; color: var(--text-2); margin-bottom: 8px; letter-spacing: .3px; font-weight: 600; }
.ws-zones { display: flex; flex-direction: column; gap: 4px; }
.ws-empty { font-size: 13px; color: var(--text-3); padding: 8px 4px; }
.tz-card { padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: all .12s; background: var(--surface-2); display: flex; align-items: center; gap: 8px; }
.tz-card > * { pointer-events: none; }
.tz-card:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.tz-card.tz-msk { background: var(--down-soft); border-color: var(--down); }
.tz-left { flex: 1; min-width: 0; }
.tz-name { font-size: 13px; color: var(--text-2); }
.tz-time { font-size: 17px; font-weight: 600; color: var(--text-1); font-family: Consolas, monospace; }
.tz-right { text-align: right; flex: 0 0 auto; }
.tz-weather { font-size: 14px; color: var(--text-1); }

/* 天气弹窗（双主题） */
.weather-popup {
  position: fixed; z-index: 150; display: none;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  min-width: 540px; max-width: 700px; color: var(--text-1); font-size: 14px;
}
.weather-popup:not(.hidden) { display: flex; }
.wp-left { padding: 12px 14px; min-width: 200px; }
.wp-left-title { color: var(--text-2); font-weight: 500; font-size: 13px; margin-bottom: 8px; }
.wp-city-item { padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1.6; transition: background .1s; }
.wp-city-item:hover { background: var(--surface-hover); }
.wp-city-item.wp-city-active { background: var(--accent-soft); }
.wp-divider { width: 1px; background: var(--border); margin: 10px 0; }
.wp-right { padding: 12px 14px; flex: 1; min-width: 280px; }
.wp-right-title { color: var(--text-2); font-weight: 500; font-size: 13px; margin-bottom: 6px; }
.wp-table-header { display: flex; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 11px; color: var(--text-3); }
.wp-col-date { width: 48px; }
.wp-col-now { flex: 1; }
.wp-col-hist { flex: 1; color: var(--text-3); }
.wp-forecast-grid { font-family: Consolas, monospace; font-size: 13px; }
.wp-row { display: flex; gap: 4px; padding: 3px 0; align-items: center; }
.wp-row:nth-child(even) { background: var(--surface-2); }
.wp-row-date { width: 48px; color: var(--text-3); font-size: 12px; }
.wp-row-now { flex: 1; color: var(--text-1); }
.wp-row-hist { flex: 1; color: var(--text-2); font-size: 12px; }
.wp-row.wp-today .wp-row-now { color: var(--text-1); font-weight: 600; }
.wp-row.wp-today .wp-row-date { color: var(--accent); font-weight: 600; }
.wp-delta-warm { color: var(--up); font-size: 10px; margin-left: 2px; }
.wp-delta-cold { color: var(--down); font-size: 10px; margin-left: 2px; }

/* body 联动：展开时主内容右移留出侧栏（折叠 = 去 padding） */
body.weather-open { padding-right: 260px; transition: padding-right .25s; }
body:not(.weather-open) { padding-right: 0; transition: padding-right .25s; }

/* 移动端/窄屏（≤1280px）：默认折叠成竖排tab（JS 启动时去 weather-open），用户可点开 */
@media (max-width: 1280px) {
  body.weather-open { padding-right: 260px; }
  body:not(.weather-open) { padding-right: 30px; }
}

/* ============================================================

/* ===== 补贴监控面板（阶段三21期·MIMO设计：排序高→低·最高档高亮·低价概率tag·卡片式） ===== */
.sm-block {
  margin-bottom: 12px; padding: 12px 12px 10px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--surface);
}
.sm-title { font-size: 15px; font-weight: 700; color: var(--text-1); letter-spacing: .3px; }
.sm-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sm-updated {
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border-radius: 4px; padding: 3px 7px; white-space: nowrap;
}
.sm-updated.stale { color: var(--up); background: var(--up-soft, #fdecea); }
.sm-note { font-size: 11px; color: var(--text-3); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 主面板·档位卡片（高→低·最高档accent高亮） */
.sm-tier {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); margin-bottom: 8px;
  font-family: Consolas, monospace; font-variant-numeric: tabular-nums; line-height: 1;
}
.sm-tier.sm-top { border: 1.5px solid var(--accent); background: var(--accent-soft); }
.sm-rate { font-size: 26px; font-weight: 800; color: var(--text-1); letter-spacing: -.5px; }
.sm-tier.sm-top .sm-rate { font-size: 30px; color: var(--accent); }
.sm-th { font-size: 14px; font-weight: 600; color: var(--text-2); }
.sm-tier.sm-top .sm-th { color: var(--accent); }
.sm-drift { font-size: 14px; color: var(--down); font-weight: 700; font-style: normal; margin-left: 4px; }
.sm-empty { font-size: 14px; color: var(--text-3); padding: 4px 0; }
/* 低价轮换区·概率三tag */
.sm-cheapzone {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2);
}
.sm-cheaplabel { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.sm-cheapband + .sm-cheapband { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.sm-cheaptags { display: flex; gap: 6px; }
.sm-cheaptag {
  flex: 1; text-align: center; padding: 6px 2px; border-radius: 6px;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.sm-cheaptag b { display: block; font-size: 14px; font-weight: 700; }
.sm-cheaptag i { display: block; font-size: 11px; font-weight: 500; font-style: normal; opacity: .8; margin-top: 2px; }
.sm-ct-a { background: var(--accent-soft); }
.sm-ct-a b { color: var(--accent); }
.sm-ct-b { background: var(--down-soft); }
.sm-ct-b b { color: var(--down); }
.sm-ct-c { background: var(--surface); border: 1px solid var(--border); }
.sm-ct-c b { color: var(--text-3); }
/* 详情按钮 */
.sm-toggle {
  font-size: 14px; font-weight: 700; color: var(--accent); cursor: pointer;
  margin-top: 10px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--accent-soft); display: block; text-align: center; user-select: none; transition: all .12s;
}
.sm-toggle:hover { background: var(--accent); color: #fff; }
/* 详情·两TAB */
.sm-detail { margin-top: 8px; }
.sm-dtabs { display: flex; gap: 8px; margin: 2px 0 10px; }
.sm-dtab {
  font-size: 14px; font-weight: 600; color: var(--text-2);
  padding: 5px 16px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2); cursor: pointer; user-select: none; transition: all .12s;
}
.sm-dtab.active { color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 700; }
/* 详情·每店/类目一张卡片 */
.sm-group {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); padding: 10px 14px; margin-bottom: 8px;
}
.sm-shop {
  font-size: 15px; font-weight: 700; color: var(--text-1);
  margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.sm-drow {
  display: flex; align-items: baseline; padding: 4px 0;
  font-family: Consolas, monospace; font-variant-numeric: tabular-nums; line-height: 1.3;
}
.sm-drate { min-width: 56px; flex-shrink: 0; font-size: 16px; font-weight: 700; color: var(--text-1); }
.sm-dth { font-size: 13px; font-weight: 600; color: var(--text-2); flex-shrink: 0; }
.sm-drange { font-size: 11px; font-weight: 400; color: var(--text-3); margin-left: auto; flex-shrink: 0; }
.sm-dcheap { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.sm-dcheaplabel { font-size: 11px; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }

/* ============ 阶段八手机排版层（≤767.98px·只追加零删除·桌面≥768px 一像素不动） ============ */
/* 阶段八修3：全屏层打开时 iOS 防穿透——body.layer-open 由 core.js 阶段八 IIFE 在 ≤767.98px 动态维护·
   position:fixed 钉住背景视口（配合 JS 开层记 scrollY·关层 scrollTo 恢复）；桌面永不触发（class 只手机加） */
body.layer-open { position: fixed; width: 100%; top: 0; left: 0; }
/* 阶段八修6：天气弹窗手机端退出控件（X 钮 + 蒙层）。DOM 由 core.js 手机门内注入，
   桌面永不创建（零影响）；基础规则仅兜底隐藏 + 给下方媒体层选择器提供 A4 锚点 */
#wb-wp-close, #wb-wp-mask { display: none; }
@media (max-width: 767.98px) {
  /* 天气栏全屏覆盖：展开 100vw + safe-area；折叠成 ☀ tab（短边≥40px 拇指可点） */
  #weather-sidebar { top: 0; height: 100vh; }
  body:not(.weather-open) #weather-sidebar { width: 44px; }
  body.weather-open #weather-sidebar { width: 100vw; max-width: 100vw; border-left: none; box-shadow: none; }
  body.weather-open { padding-right: 0; overflow: hidden; }
  body:not(.weather-open) { padding-right: 0; }
  body:not(.weather-open) #weather-tab { font-size: 14px; min-width: 44px; }
  /* 展开态头部 + 折叠钮拇指可达（≥44px 触控） */
  #weather-header { padding: calc(env(safe-area-inset-top) + 10px) 10px 10px; }
  #weather-toggle { min-height: 44px; font-size: 14px; padding: 10px 14px; }
  #weather-inner { padding: 10px 12px calc(env(safe-area-inset-bottom) + 12px); }
  /* 补贴面板 sm-*：栏内单列大字 */
  .sm-block { padding: 12px 10px 10px; }
  .sm-tier { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
  .sm-cheaptags { flex-wrap: wrap; }
  .sm-cheaptag { flex: 1 1 100%; }
  .sm-dtabs { flex-wrap: wrap; }
  .sm-dtab { flex: 1; text-align: center; padding: 8px 6px; }
  .sm-drow { flex-wrap: wrap; }
  .sm-toggle { padding: 10px 12px; }
  /* 修3（阶段八亮哥真机反馈）：天气栏展开态全屏全覆盖（压过 sticky header z50 等一切主内容·z≥1000）；
     折叠 tab 同高 z 保可点；天气详情弹窗（在侧栏内点开）须高于侧栏不被打住 */
  body.weather-open #weather-sidebar { inset: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; background: var(--bg); overflow-y: auto; z-index: 1000; }
  body:not(.weather-open) #weather-sidebar { right: 0; top: 0; bottom: 0; width: 44px; z-index: 1000; }
  /* 折叠天气 tab 改右侧悬浮小条（全高条会盖住顶部第三个模块tab·亮哥真机发现） */
  body:not(.weather-open) #weather-sidebar { top: 50%; bottom: auto; transform: translateY(-50%); height: 132px; border-radius: 12px 0 0 12px; border: 1px solid var(--border); border-right: none; }
  body:not(.weather-open) #weather-tab { z-index: 1000; }
  .weather-popup { z-index: 1100; }
  /* F2 修4（亮哥真机第二轮：点城市天气温度被挡住/无法关）：
     弹窗全屏 sheet——覆盖桌面 min-width:540px 与 JS 内联 left/top 定位，两栏改单列堆叠·字号不缩 */
  .weather-popup { position: fixed; inset: 8px; width: auto; max-width: calc(100vw - 16px); min-width: 0; max-height: calc(100dvh - 16px); overflow-y: auto; flex-direction: column; left: 8px !important; top: 8px !important; }
  .wp-left, .wp-right { min-width: 0; }
  .wp-divider { width: auto; height: 1px; margin: 4px 0; flex: none; }

  /* ===== 阶段八第二期 iOS 风（L2d weather 模块 · 只追加零删除 · 覆盖硬编码点清册 §5 逐条） ===== */

  /* ① 补贴临界点面板 iOS 化（对照 Codex-2 .tier-grid 三档大卡：.sm-rate 写死 26/30px → var(--fs-hero)·主档蓝高亮） */
  .sm-block {
    padding: 14px 12px 12px; border-radius: var(--radius);
    background: linear-gradient(160deg, var(--surface) 55%, var(--accent-soft));
    border: 1px solid var(--border); box-shadow: var(--shadow-sm, 0 1px 1px rgba(28, 33, 43, .04));
  }
  .sm-title { font-size: 16px; }
  .sm-updated { border-radius: 999px; padding: 4px 10px; font-size: 11px; background: var(--accent-soft); color: var(--accent); }
  .sm-updated.stale { background: var(--up-soft, #fff0f2); color: var(--up); }
  #sm-crit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #sm-crit .sm-empty { grid-column: 1 / -1; text-align: center; padding: 16px 4px; }
  .sm-tier {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 5px; min-width: 0; margin-bottom: 0; padding: 14px 10px;
    border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border);
  }
  .sm-tier.sm-top {
    border-color: var(--accent);
    background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface) 75%);
    box-shadow: 0 6px 16px rgba(20, 121, 255, .14);
  }
  .sm-rate { font-size: var(--fs-hero); font-weight: 800; line-height: 1; letter-spacing: -2px; white-space: nowrap; }
  .sm-tier.sm-top .sm-rate { font-size: var(--fs-hero); color: var(--accent); }
  .sm-th { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); white-space: nowrap; }
  .sm-tier.sm-top .sm-th { color: var(--accent); }
  .sm-drift { font-size: 12px; margin-left: 3px; }
  /* 低价轮换概率 tag：三列紧凑 iOS 网格（概率高→低·补贴率/概率两行） */
  .sm-cheapzone { padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
  .sm-cheaplabel { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
  .sm-cheaptags { display: flex; flex-wrap: wrap; gap: 6px; }
  .sm-cheaptag { flex: 1 1 30%; min-width: 0; padding: 8px 4px; border-radius: 10px; }
  .sm-cheaptag b { font-size: 15px; }
  .sm-cheaptag i { font-size: 12px; margin-top: 3px; }
  /* 详情按钮 iOS 化（全宽·蓝字·44px 触控） */
  .sm-toggle {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    margin-top: 10px; padding: 0 16px; border: 0; border-radius: 13px;
    background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 700;
  }
  /* 按店铺/类目 TAB iOS 段选（.seg 风：灰底胶囊·选中白卡阴影） */
  .sm-dtabs { display: flex; gap: 0; margin: 0 0 12px; padding: 3px; background: #edf0f4; border-radius: 12px; }
  .sm-dtab {
    flex: 1; display: flex; align-items: center; justify-content: center; min-height: 38px;
    padding: 0; border: 0; border-radius: 10px; background: transparent;
    color: var(--text-2); font-size: var(--fs-sm); font-weight: 600;
  }
  .sm-dtab.active { background: var(--surface); color: var(--text-1); box-shadow: 0 1px 4px rgba(23, 29, 40, .09); font-weight: 700; }
  /* 详情·每店/类目一张卡 */
  .sm-group { padding: 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
  .sm-shop { font-size: 15px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .sm-drow { padding: 7px 0; }
  .sm-drate { min-width: 0; font-size: 17px; font-weight: 800; }
  .sm-dth { font-size: 14px; font-weight: 600; }
  .sm-drange { font-size: 12px; }
  .sm-dcheaplabel { font-size: var(--fs-xs); }
  .sm-note { font-size: var(--fs-xs); }

  /* ② 天气栏时区卡 iOS 化（莫斯科高亮 = Codex-2 .tz-card.featured 绿渐变白字·11 时区列表） */
  .ws-header { font-size: 15px; font-weight: 700; letter-spacing: 0; }
  .ws-clock { font-size: 14px; }
  .ws-zones { gap: 8px; }
  .ws-empty { text-align: center; padding: 20px 4px; }
  .tz-card { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); gap: 10px; }
  .tz-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
  .tz-time { font-size: 19px; }
  .tz-card.tz-msk {
    background: linear-gradient(145deg, var(--down), #0f8a56);
    border-color: transparent; box-shadow: 0 8px 18px rgba(24, 165, 106, .22);
  }
  .tz-card.tz-msk .tz-name { color: rgba(255, 255, 255, .92); }
  .tz-card.tz-msk .tz-time { color: #fff; }
  .tz-card.tz-msk .tz-weather { color: rgba(255, 255, 255, .85); }

  /* ② 天气弹窗 iOS 化（F2 全屏 sheet 细节打磨·清册 #7 radius 16px·#9 日期列 44px·#10 温差 12px） */
  .weather-popup { border: 0; border-radius: var(--radius); background: var(--bg); box-shadow: 0 22px 70px rgba(20, 28, 45, .18); }
  .wp-left, .wp-right { padding: 14px 16px; }
  .wp-left-title, .wp-right-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
  .wp-city-item { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.4; }
  .wp-city-item.wp-city-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .wp-col-date, .wp-row-date { width: 44px; }
  .wp-row { padding: 7px 4px; }
  .wp-row-date { font-size: 13px; }
  .wp-row-now { font-size: 15px; }
  .wp-row-hist { font-size: 13px; }
  .wp-delta-warm, .wp-delta-cold { font-size: 12px; }

  /* ③ 天气悬浮钮改位（痛点#7）：右侧中腰 132px 竖条会遮挡图表右缘 →
     右下角紧凑胶囊（48px 高·safe-area 偏移·同特异性后定义压过），不再遮挡主图右轴 */
  body:not(.weather-open) #weather-sidebar {
    top: auto; bottom: calc(env(safe-area-inset-bottom) + 14px); transform: none;
    right: 14px; width: auto; height: 48px; min-width: 0;
    border-radius: 24px; border: 1px solid var(--border); border-right: 1px solid var(--border);
    background: var(--surface); box-shadow: 0 8px 24px rgba(20, 28, 45, .14);
    display: flex; align-items: center; overflow: hidden;
  }
  body:not(.weather-open) #weather-tab {
    writing-mode: horizontal-tb; letter-spacing: 0; flex: none; height: 100%; min-width: 0;
    padding: 0 16px; border-radius: 24px; background: var(--surface);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: var(--accent);
  }

  /* ===== 阶段八修6（亮哥真机：天气弹窗手机端打开后无法退出）· X 关闭钮 + 半透明蒙层 =====
     仅手机门内（DOM 由 core.js 注入，弹窗显示时挂 .show）；桌面永不创建 → 桌面零影响 */
  #wb-wp-mask.show {
    display: block; position: fixed; inset: 0; z-index: 1050;
    background: rgba(10, 14, 20, .42);
  }
  #wb-wp-close.show {
    position: fixed; top: calc(env(safe-area-inset-top) + 12px); right: 12px;
    z-index: 1150; width: 44px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: rgba(28, 33, 43, .85); color: #fff;
    font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  }
}

/*
 * WB-BI 看板 · 手机版整体重新排版追加层
 * 使用方式：在现有 style-*.css 全部加载完成后加载本文件。
 * 边界：本文件的每一条视觉规则均位于 <= 767.98px 媒体门内，桌面不受影响。
 */
@media (max-width: 767.98px) {
  /* ========== 0. 手机画布、安全区与横向溢出护栏 ========== */
  #view-market,
  #view-shop,
  #view-front {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  #view-market.layout,
  #view-shop.layout,
  #view-front .fm4-wrap {
    width: 100%;
    max-width: 100%;
    padding: 10px 10px calc(76px + env(safe-area-inset-bottom));
  }

  #view-market button,
  #view-shop button,
  #view-front button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  #view-market button:focus-visible,
  #view-shop button:focus-visible,
  #view-front button:focus-visible {
    outline: 3px solid rgba(20, 121, 255, .18);
    outline-offset: 2px;
  }

  /* ========== 1. WB-行情：首页只呈现 Hero + 8 个入口 ========== */
  #view-market.layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #view-market .panels-wrap {
    width: 100%;
    min-width: 0;
  }

  #view-market .m-market-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    min-width: 0;
    animation: m-market-rise .22s ease both;
  }

  #view-market.m-market-detail .m-market-home {
    display: none !important;
  }

  /* 入口态不再渲染旧的八卡瀑布流；JS 失败时不会创建首页容器，仍可移除本追加层降级。 */
  #view-market:not(.m-market-detail):has(.m-market-home) .panels-grid,
  #view-market:not(.m-market-detail) > .m-detail-head,
  #view-market:not(.m-market-detail) .panels-wrap > .m-detail-head {
    display: none !important;
  }

  /* 首页聚焦内容，完整类目筛选放到具体面板详情里，避免入口页再堆一块树。 */
  #view-market:not(.m-market-detail):has(.m-market-home) .sidebar {
    display: none !important;
  }

  #view-market .m-market-hero {
    position: relative;
    isolation: isolate;
    min-height: 184px;
    padding: 18px 17px 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background: linear-gradient(145deg, var(--accent-soft) 0%, var(--surface) 68%);
    box-shadow: var(--shadow-sm);
  }

  #view-market .m-market-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -72px;
    right: -58px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 121, 255, .18), rgba(20, 121, 255, 0) 69%);
    pointer-events: none;
  }

  #view-market .m-market-hero:not(:has(.m-market-hero-label))::before {
    content: 'MARKET PULSE';
    display: block;
    margin-bottom: 8px;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .9px;
  }

  #view-market .m-market-hero-label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
  }

  #view-market .m-market-hero-value {
    max-width: 100%;
    color: var(--text-1);
    font-size: clamp(36px, 11vw, 48px);
    font-weight: 790;
    line-height: .98;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  #view-market .m-market-hero-value small,
  #view-market .m-market-hero-value span {
    color: var(--accent);
    font-size: .42em;
    font-weight: 750;
    letter-spacing: -.2px;
  }

  #view-market .m-market-hero-note {
    max-width: 82%;
    margin-top: 9px;
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.5;
  }

  #view-market .m-market-hero-note b,
  #view-market .m-market-hero-note strong {
    color: var(--text-1);
    font-weight: 750;
  }

  #view-market .m-market-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 15px;
  }

  #view-market .m-market-kpis > * {
    min-width: 0;
    padding: 10px 9px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }

  #view-market .m-market-kpis strong,
  #view-market .m-market-kpis b {
    display: block;
    overflow: hidden;
    color: var(--text-1);
    font-size: clamp(14px, 4.6vw, 18px);
    font-weight: 780;
    line-height: 1.1;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-market .m-market-kpis span,
  #view-market .m-market-kpis small {
    display: block;
    margin: 0 0 5px;
    overflow: hidden;
    color: var(--text-3);
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 2 列 × 4 行入口小插件：图标、名称、说明、当前值均有固定层级。 */
  #view-market .m-entry-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 0 3px;
    color: var(--text-1);
    font-size: 16px;
    font-weight: 780;
    line-height: 1.2;
    letter-spacing: -.25px;
  }

  #view-market .m-entry-section-head small,
  #view-market .m-entry-section-head span {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
  }

  #view-market .m-market-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
    min-width: 0;
  }

  #view-market .m-panel-entry[data-panel],
  #view-market .m-panel-entry[data-target-panel] {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    grid-template-areas:
      'entry-icon entry-gap entry-arrow'
      'entry-copy entry-copy entry-copy'
      'entry-value entry-value entry-value';
    grid-template-rows: 38px minmax(34px, auto) auto;
    align-items: start;
    gap: 7px 6px;
    width: 100%;
    min-width: 0;
    min-height: 132px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text-1);
    text-align: left;
    cursor: pointer;
  }

  #view-market .m-panel-entry[data-panel]::after,
  #view-market .m-panel-entry[data-target-panel]::after {
    content: '';
    position: absolute;
    right: -28px;
    bottom: -36px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft), transparent 68%);
    opacity: .72;
    pointer-events: none;
  }

  #view-market .m-panel-entry[data-panel]:active,
  #view-market .m-panel-entry[data-target-panel]:active {
    transform: scale(.985);
    background: var(--surface-2);
  }

  #view-market .m-entry-icon {
    grid-area: entry-icon;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 18px;
    font-weight: 750;
    line-height: 1;
  }

  #view-market .m-entry-copy {
    grid-area: entry-copy;
    min-width: 0;
  }

  #view-market .m-entry-copy strong,
  #view-market .m-entry-copy b {
    display: block;
    color: var(--text-1);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -.15px;
  }

  #view-market .m-entry-copy p,
  #view-market .m-entry-copy small,
  #view-market .m-entry-copy span {
    display: -webkit-box;
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--text-3);
    font-size: 10px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #view-market .m-entry-value {
    grid-area: entry-value;
    z-index: 1;
    align-self: end;
    min-width: 0;
    overflow: hidden;
    color: var(--text-1);
    font-size: 16px;
    font-weight: 780;
    line-height: 1.15;
    letter-spacing: -.45px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-market .m-entry-value small,
  #view-market .m-entry-value span {
    margin-left: 3px;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0;
  }

  #view-market .m-entry-arrow {
    grid-area: entry-arrow;
    z-index: 1;
    color: var(--text-3);
    font-size: 22px;
    font-weight: 400;
    line-height: 38px;
    text-align: right;
  }

  /* ========== 2. WB-行情：详情态只显示当前面板，可返回 ========== */
  #view-market.layout.m-market-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  /* panels-wrap 透传子项，使动态返回头可排在筛选披露条之前。 */
  #view-market.m-market-detail .panels-wrap {
    display: contents;
  }

  #view-market.m-market-detail .sidebar {
    order: 2;
  }

  #view-market.m-market-detail .panels-grid {
    order: 3;
  }

  #view-market .m-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 2px 1px 4px;
  }

  #view-market .m-detail-back {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--accent);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  #view-market .m-detail-head > div,
  #view-market .m-detail-head > span {
    min-width: 0;
  }

  #view-market .m-detail-head h1,
  #view-market .m-detail-head h2,
  #view-market .m-detail-head strong {
    display: block;
    margin: 0;
    overflow: hidden;
    color: var(--text-1);
    font-size: 22px;
    font-weight: 780;
    line-height: 1.15;
    letter-spacing: -.65px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-market .m-detail-head p,
  #view-market .m-detail-head small {
    display: block;
    margin: 3px 0 0;
    color: var(--text-3);
    font-size: 11px;
    line-height: 1.35;
  }

  #view-market.m-market-detail .panels-grid {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #view-market.m-market-detail .panels-grid > .panel:not(.m-active) {
    display: none !important;
  }

  #view-market.m-market-detail .panels-grid > .panel.m-active:not(#panel-1) {
    display: flex !important;
  }

  #view-market.m-market-detail .panels-grid > #panel-1.m-active {
    display: grid !important;
    grid-template-areas:
      'p1-detail'
      'p1-head'
      'p1-filter'
      'p1-hero'
      'p1-insight'
      'p1-chart';
  }

  #view-market.m-market-detail #panel-1.m-active > .m-detail-head {
    grid-area: p1-detail;
  }

  #view-market.m-market-detail .panel.m-active {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: m-market-rise .2s ease both;
  }

  /* 动态返回头已承担详情标题；旧标题不再重复，日期/来源等原控件继续保留。 */
  #view-market.m-market-detail .panel.m-active > .m-detail-head + .panel-head h2 {
    display: none !important;
  }

  /* panel-1 延续既有示范；这里只做详情态外层兼容，不覆盖其五段网格。 */
  #view-market.m-market-detail #panel-1.m-active > #p1-chart {
    min-height: 320px;
  }

  /* panel-2~8 共性：标题自然流、筛选成独立卡、KPI 变成大数字卡。 */
  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .panel-head {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    width: 100%;
    height: auto;
    padding: 4px 2px 0;
    border: 0;
    background: transparent;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .panel-head h2 {
    min-width: 0;
    color: var(--text-1);
    font-size: clamp(21px, 6vw, 25px);
    line-height: 1.16;
    letter-spacing: -.65px;
    overflow-wrap: anywhere;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .panel-head h2::before {
    width: 4px;
    height: 20px;
    border-radius: 2px;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .panel-head .src {
    color: var(--text-3);
    font-size: 11px;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .panel-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 11px 0 0;
    padding: 11px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) .panel-toolbar .tb-spacer {
    display: none;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) .panel-toolbar .tb-label {
    color: var(--text-3);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .35px;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) .panel-toolbar .seg {
    display: flex;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) .panel-toolbar .seg::-webkit-scrollbar {
    display: none;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) .panel-toolbar .seg-btn,
  #view-market.m-market-detail .panel.m-active:not(#panel-1) .panel-toolbar .dim-btn,
  #view-market.m-market-detail .panel.m-active:not(#panel-1) .panel-toolbar .btn,
  #view-market.m-market-detail .panel.m-active:not(#panel-1) .panel-toolbar .btn-ghost {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) .panel-toolbar input,
  #view-market.m-market-detail .panel.m-active:not(#panel-1) .panel-toolbar select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  /* 面板2 的控件数量最多，显式解除同行挤压。 */
  #view-market.m-market-detail #panel-2.m-active > .panel-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-market.m-market-detail #panel-2.m-active .panel-toolbar > * {
    max-width: 100%;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .kpi-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 10px 0 0;
    padding: 0;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .kpi-row .kpi {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    gap: 6px;
    min-width: 0;
    min-height: 116px;
    padding: 13px 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .kpi-row .kpi:first-child {
    background: linear-gradient(145deg, var(--accent-soft), var(--surface) 78%);
    border-color: var(--accent);
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .kpi-row .k-label {
    color: var(--text-2);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .kpi-row .k-val {
    align-self: center;
    max-width: 100%;
    overflow: hidden;
    color: var(--text-1);
    font-size: clamp(27px, 8.3vw, 36px);
    font-weight: 790;
    line-height: 1;
    letter-spacing: -1.3px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .kpi-row .k-val small {
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 0;
  }

  #view-market.m-market-detail .panel.m-active:not(#panel-1) > .kpi-row .k-sub {
    display: block;
    color: var(--text-3);
    font-size: 10px;
    line-height: 1.3;
  }

  /* 图表是详情主视觉，保持 ECharts 容器本身，不触碰其内部 canvas/div。 */
  #view-market.m-market-detail #p2-chart,
  #view-market.m-market-detail #p5-chart,
  #view-market.m-market-detail #p6-chart,
  #view-market.m-market-detail #p7-chart {
    flex: 0 0 auto;
    width: 100%;
    height: 320px !important;
    min-height: 300px !important;
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  /* panel-3/4/5 宽表只在卡内横滚，页面本身不横溢。 */
  #view-market.m-market-detail #bd-table,
  #view-market.m-market-detail #p4-table,
  #view-market.m-market-detail #p5-table {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: clamp(340px, 58dvh, 520px) !important;
    min-height: 320px !important;
    margin-top: 10px;
    padding: 0 10px 10px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #view-market.m-market-detail #bd-table table,
  #view-market.m-market-detail #p4-table table,
  #view-market.m-market-detail #p5-table table {
    min-width: 680px;
  }

  #view-market.m-market-detail #bd-mkt,
  #view-market.m-market-detail #p4-summary,
  #view-market.m-market-detail #p5-wind,
  #view-market.m-market-detail #p6-summary,
  #view-market.m-market-detail #p7-summary {
    margin: 10px 0 0;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.5;
    box-shadow: var(--shadow-sm);
  }

  /* panel-8 当日风向：总览数字在上，小时表在独立滚动卡中。 */
  #view-market.m-market-detail #panel-8.m-active .wind-body {
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  #view-market.m-market-detail #panel-8.m-active #p8-kpi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 0;
  }

  #view-market.m-market-detail #panel-8.m-active #p8-kpi .kpi {
    display: grid;
    gap: 6px;
    min-width: 0;
    min-height: 112px;
    padding: 13px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
  }

  #view-market.m-market-detail #panel-8.m-active #p8-kpi .k-val {
    align-self: center;
    overflow: hidden;
    font-size: clamp(27px, 8.3vw, 36px);
    font-weight: 790;
    line-height: 1;
    letter-spacing: -1.3px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-market.m-market-detail #panel-8.m-active .wind-hourly-wrap {
    width: 100%;
    max-width: 100%;
    min-height: 320px !important;
    max-height: 58dvh;
    overflow: auto;
    border-radius: var(--radius-sm);
    -webkit-overflow-scrolling: touch;
  }

  #view-market.m-market-detail #panel-8.m-active .wind-hourly {
    min-width: 560px;
  }

  /* ========== 3. 类目 / 筛选：高频胶囊常显，完整树按需披露 ========== */
  #view-market .sidebar,
  #shop-sidebar,
  #view-front .fm4-side {
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    padding: 10px;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  #view-market .sidebar.m-collapsed,
  #shop-sidebar.m-collapsed,
  #view-front .fm4-side.m-collapsed {
    max-height: none;
    overflow: visible;
  }

  #view-market .sidebar.m-collapsed .side-title::after,
  #shop-sidebar.m-collapsed .side-title::after,
  #view-front .fm4-side.m-collapsed h4:first-child::after {
    content: none;
  }

  #view-market .m-filter-pills,
  #shop-sidebar .m-filter-pills,
  #view-front .m-filter-pills {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0 0 8px;
    background: transparent;
    scroll-padding-inline: 4px;
  }

  #view-market .m-filter-pills .m-pill,
  #shop-sidebar .m-filter-pills .m-pill,
  #view-front .m-filter-pills .m-pill {
    min-height: 44px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 650;
  }

  .m-filter-disclosure {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .m-filter-disclosure::after {
    content: '⌄';
    flex: none;
    color: var(--text-3);
    font-size: 16px;
    transition: transform .18s ease;
  }

  .m-filter-disclosure[aria-expanded='true']::after,
  .m-tree-open > .m-filter-disclosure[data-disclosure='tree']::after,
  .m-tools-open > .m-filter-disclosure[data-disclosure='tools']::after,
  .m-filters-open > .m-filter-disclosure[data-disclosure='filters']::after {
    transform: rotate(180deg);
  }

  /* 行情完整树默认不参与平铺。m-tree-open 可挂在 view 或 sidebar。 */
  #view-market #tree,
  #view-market .sidebar .side-current {
    display: none;
  }

  #view-market.m-tree-open #tree,
  #view-market .sidebar.m-tree-open #tree {
    display: block;
    max-height: 52dvh;
    margin-top: 9px;
    padding-top: 8px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    overscroll-behavior: contain;
  }

  #view-market.m-tree-open .sidebar .side-current,
  #view-market .sidebar.m-tree-open .side-current {
    display: block;
  }

  /* 店铺完整树同理；高频店铺胶囊替代顶层树。 */
  #shop-sidebar #shop-tree,
  #shop-sidebar .side-current {
    display: none;
  }

  #view-shop.m-tree-open #shop-sidebar #shop-tree,
  #shop-sidebar.m-tree-open #shop-tree {
    display: block;
    max-height: 52dvh;
    margin-top: 9px;
    padding-top: 8px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    overscroll-behavior: contain;
  }

  #view-shop.m-tree-open #shop-sidebar .side-current,
  #shop-sidebar.m-tree-open .side-current {
    display: block;
  }

  /* 店铺侧栏的低频操作独立由“高级工具”披露，避免与树、胶囊三套入口同时平铺。 */
  #shop-sidebar > :not(.side-title):not(.m-filter-pills):not(.m-filter-disclosure):not(#shop-view-tabs):not(#shop-tree):not(.side-current) {
    display: none;
  }

  #shop-sidebar.m-tools-open > :not(.side-title):not(.m-filter-pills):not(.m-filter-disclosure):not(#shop-view-tabs):not(#shop-tree):not(.side-current) {
    display: revert;
  }

  /* 监控侧栏只留高频胶囊；类目层级、品牌搜索与品牌清单由 disclosure 展开。 */
  #view-front .fm4-side h4,
  #view-front .fm4-side .fm4-facet,
  #view-front .fm4-side .fm4-priceseg,
  #view-front .fm4-side .fm4-bsearch,
  #view-front .fm4-side .fm4-brands {
    display: none;
  }

  #view-front .fm4-side:has(.m-filter-pills) .fm4-fbtns {
    display: none;
  }

  #view-front .fm4-side.m-filters-open .fm4-fbtns {
    display: flex;
  }

  #view-front.m-filters-open .fm4-side h4,
  #view-front .fm4-side.m-filters-open h4,
  #view-front.m-filters-open .fm4-side .fm4-bsearch,
  #view-front .fm4-side.m-filters-open .fm4-bsearch {
    display: block;
  }

  #view-front.m-filters-open .fm4-side .fm4-facet,
  #view-front.m-filters-open .fm4-side .fm4-priceseg,
  #view-front.m-filters-open .fm4-side .fm4-brands,
  #view-front .fm4-side.m-filters-open .fm4-facet,
  #view-front .fm4-side.m-filters-open .fm4-priceseg,
  #view-front .fm4-side.m-filters-open .fm4-brands {
    display: flex;
  }

  #view-front.m-filters-open .fm4-side,
  #view-front .fm4-side.m-filters-open {
    max-height: 62dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* ========== 4. 店铺-SKU：卡片墙恢复第一期响应式（不单独重排·电脑版改手机端自动适配） ========== */
  #view-shop.layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #view-shop .panels-wrap,
  #view-shop .shop-cards-panel {
    width: 100%;
    min-width: 0;
  }

  #view-shop .shop-cards-panel {
    min-height: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  /* 阶段八第二期·回撤（亮哥 08-15）：撤销店铺 SKU 卡片墙"图片+货号+三大数字"重排与
     "5 项统计横滑指标轨"，恢复第一期响应式（单列 grid + flex 卡片 + 2 列统计）。
     电脑版迭代卡片墙/加数据时手机端自动适配，不再单独维护一套卡片排版。 */

  /* 店铺操作/销售计划里的高级区维持原生 details 收起，并支持 JS 外层状态。 */
  #view-shop .sp-sec-adv:not([open]):not(.m-tools-open) .sp-adv-body,
  #view-shop:not(.m-tools-open) .sp-sec-adv:not([open]) .sp-adv-body {
    display: none;
  }

  #view-shop .sp-sec-adv summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 11px;
    border-radius: 11px;
    background: var(--surface-2);
    font-size: 13px;
  }

  #view-shop .sp-sec input,
  #view-shop .sp-sec select,
  #view-shop .sp-sec button {
    min-height: 44px;
  }

  /* ========== 5. 前端监控：筛选、统计、TAB、事件卡 ========== */
  #view-front .fm4-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #view-front .fm4-main {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }

  #view-front .fm4-tabs {
    display: flex;
    gap: 5px;
    width: 100%;
    min-width: 0;
    padding: 7px 9px 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    scroll-padding-inline: 9px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #view-front .fm4-tabs::-webkit-scrollbar {
    display: none;
  }

  #view-front .fm4-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 9px 13px;
    border-radius: 11px 11px 0 0;
    white-space: nowrap;
  }

  #view-front .fm4-tab.on {
    background: var(--accent-soft);
  }

  /* 高频过滤器在主卡内横滑/折行，所有输入均达到 44px。 */
  #view-front .fm4-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 10px;
    overflow-x: auto;
    scroll-padding-inline: 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #view-front .fm4-filters::-webkit-scrollbar {
    display: none;
  }

  #view-front .fm4-filters > * {
    flex: 0 0 auto;
  }

  #view-front .fm4-filters .fm4-search {
    flex-basis: min(72vw, 280px);
    min-width: 200px;
  }

  #view-front .fm4-sel,
  #view-front .fm4-search,
  #view-front .fm4-pct,
  #view-front .fm4-chk,
  #view-front .fm4-pct-row {
    min-height: 44px;
  }

  #view-front .fm4-statrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
  }

  #view-front .fm4-statrow .fm4-sumline {
    width: 100%;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1.7;
  }

  #view-front .fm4-ticker {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(90deg, var(--accent-soft), var(--surface));
  }

  #view-front .fm4-events,
  #view-front .fm4-skus {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-height: none;
    padding: 10px;
    overflow: visible;
  }

  /* 事件卡：左色条 + 商品 + 大价格；spark 下移到信息列，窄屏不互挤。 */
  #view-front .fm4-ev {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    min-width: 0;
    min-height: 102px;
    padding: 11px 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left: 4px solid var(--up);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  #view-front .fm4-ev.up {
    border-left-color: var(--down);
  }

  #view-front .fm4-ev.other {
    border-left-color: var(--text-3);
  }

  #view-front .fm4-ev-thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 12px;
  }

  #view-front .fm4-ev-thumb img {
    width: 56px;
    height: 56px;
  }

  #view-front .fm4-ev-info {
    grid-column: 2;
    min-width: 0;
    gap: 2px;
  }

  #view-front .fm4-ev-brand {
    font-size: 13px;
    line-height: 1.25;
  }

  #view-front .fm4-ev-price {
    margin-top: 3px;
    font-size: clamp(19px, 6vw, 24px);
    font-weight: 790;
    line-height: 1.05;
    letter-spacing: -.8px;
    font-variant-numeric: tabular-nums;
  }

  #view-front .fm4-ev-time {
    margin-top: 3px;
    font-size: 10px;
  }

  #view-front .fm4-spark {
    grid-column: 2;
    justify-content: flex-start;
    width: 100%;
    max-width: 150px;
    height: 30px;
  }

  #view-front .fm4-spark-svg {
    width: 100%;
    max-width: 150px;
    height: 30px;
  }

  /* 监控 SKU 卡沿用三数字聚焦语义，但保持 fm4 前缀隔离。 */
  #view-front .fm4-sku {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 11px 12px;
    border-left-width: 4px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }

  #view-front .fm4-sku-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 14px;
  }

  #view-front .fm4-sku-stats > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ========== 6. 天气 / 补贴：保留既有大数字，仅避免悬浮入口遮最后一屏 ========== */
  #view-market .m-market-home,
  #view-market.m-market-detail .panels-grid,
  #view-shop .shop-cards,
  #view-front .fm4-main {
    scroll-margin-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  body:not(.weather-open) #weather-sidebar {
    bottom: calc(env(safe-area-inset-bottom) + 12px);
    max-width: calc(100vw - 28px);
  }

  /* ========== 7. 底部模块 tab bar（数据驱动·JS 读 #module-tabs 现有按钮生成） ========== */
  /* 顶部三模块 TAB 隐藏（移到底部）· 恢复标题占位（否则 52px header 空置） */
  header #module-tabs {
    display: none;
  }
  header h1 {
    display: block !important;
  }

  /* 天气悬浮钮上移避让底部 tab bar（否则被遮挡） */
  body:not(.weather-open) #weather-sidebar {
    bottom: calc(env(safe-area-inset-bottom) + 70px);
  }

  .m-bottom-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    align-items: stretch;
    padding: 0 6px;
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
  }

  .m-bottom-tab {
    flex: 1;
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .m-bottom-tab-icon {
    font-size: 19px;
    line-height: 1;
    color: var(--text-3);
  }

  .m-bottom-tab.active {
    color: var(--accent);
    font-weight: 750;
  }

  .m-bottom-tab.active .m-bottom-tab-icon {
    color: var(--accent);
  }

  /* 动画轻而短；只表达首页/详情状态切换，不碰图表动画。 */
  @keyframes m-market-rise {
    from {
      opacity: .55;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* 阶段八第二期完善 · 补贴低价轮换横排 + 天气悬浮钮可拖动。
   所有覆盖都收在同一手机门内；桌面样式零影响。 */
@media (max-width: 767.98px) {
  /* 每个价格带仍保留原标签；三档改为“一档一行”，补贴率与概率在同一横行读完。 */
  .sm-cheapzone {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .sm-cheapband,
  .sm-cheaptags {
    min-width: 0;
  }

  .sm-cheapband + .sm-cheapband {
    margin-top: 0;
    padding-top: 10px;
  }

  .sm-cheaplabel {
    margin: 0 0 6px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sm-cheapband.wb-cheap-rows > .sm-cheaplabel {
    display: none;
  }

  .sm-cheaptags {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .sm-cheaptag {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 10px;
    line-height: 1.2;
    text-align: left;
  }

  .sm-cheaptag b,
  .sm-cheaptag i {
    display: inline;
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }

  .sm-cheaptag[data-wb-cheap-band]::before {
    content: attr(data-wb-cheap-band);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sm-cheaptag b {
    font-size: 14px;
  }

  .sm-cheaptag i {
    font-size: 13px;
  }

  .sm-cheaptag i::before {
    content: '· ';
  }

  /* 默认仍在右下角；发生 touch 拖动后才切换为记忆坐标。展开天气时该规则不命中。 */
  body:not(.weather-open) #weather-sidebar.wb-weather-tab-positioned {
    left: var(--wb-weather-tab-x);
    top: var(--wb-weather-tab-y);
    right: auto;
    bottom: auto;
    transform: none;
    will-change: left, top;
  }

  body:not(.weather-open) #weather-tab {
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  body:not(.weather-open) #weather-sidebar.wb-weather-tab-dragging #weather-tab {
    cursor: grabbing;
  }
}
/* WB-BI看板 · 手机补贴低价轮换区满宽修复
   按铁律作为 style-weather.css 末尾追加块；桌面端不命中。 */
@media (max-width: 767.98px) {
  /* #sm-crit 是三列网格；轮换区必须跨满整行，不能落进单个 1fr 窄列。 */
  #sm-crit > .sm-cheapzone {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* 每个价格带保留一行标题，下面每个轮换档独占一行。 */
  #sm-crit > .sm-cheapzone .sm-cheapband,
  #sm-crit > .sm-cheapzone .sm-cheaptags,
  #sm-crit > .sm-cheapzone .sm-cheaptag {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #sm-crit > .sm-cheapzone .sm-cheaplabel,
  #sm-crit > .sm-cheapzone .sm-cheapband.wb-cheap-rows > .sm-cheaplabel {
    display: block;
    margin: 0 0 6px;
    overflow: visible;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
  }

  #sm-crit > .sm-cheapzone .sm-cheaptags {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  #sm-crit > .sm-cheapzone .sm-cheaptag {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-height: 38px;
    padding: 8px 10px;
    overflow: visible;
    line-height: 1.2;
    text-align: left;
  }

  /* 价格带已在标题行说明；档内只横排“补贴% · 概率%”。 */
  #sm-crit > .sm-cheapzone .sm-cheaptag[data-wb-cheap-band]::before {
    content: none;
  }

  #sm-crit > .sm-cheapzone .sm-cheaptag b,
  #sm-crit > .sm-cheapzone .sm-cheaptag i {
    display: inline;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
  }

  #sm-crit > .sm-cheapzone .sm-cheaptag b {
    font-size: 14px;
  }

  #sm-crit > .sm-cheapzone .sm-cheaptag i {
    font-size: 13px;
  }
}