/* ============================================================
 * 澳洲电网与能源动态地图（au.html）—— 样式
 * 与 styles.css 同一套暗色「指挥中心」设计令牌；三栏布局：筛选 | 地图 | 看板
 * ============================================================ */
:root {
  --bg: #060b18;
  --bg-2: #0a1224;
  --panel: rgba(16, 26, 48, 0.72);
  --panel-solid: #101a30;
  --border: rgba(120, 160, 220, 0.16);
  --border-strong: rgba(120, 160, 220, 0.34);
  --txt: #e8eefb;
  --txt-dim: #93a4c4;
  --txt-faint: #7b8ca6; /* 辅助文字：对 --bg / #101a30 卡底对比度 ≥5:1（WCAG AA），勿调暗 */
  --accent: #21c7ff;
  --good: #2ee6a6;
  --warn: #ffb02e;
  --hot: #ff5c7a;
  --plan: #5f718f;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--txt);
  background: radial-gradient(1200px 700px at 72% -10%, rgba(33, 199, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 8% 110%, rgba(46, 230, 166, 0.08), transparent 60%), var(--bg);
  font-family: "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC", "Segoe UI", system-ui, sans-serif; font-size: 14px; }
button { font-family: inherit; }

/* ---------- 骨架 ---------- */
/* 网格列用 minmax(0,1fr)：顶栏里一堆 nowrap 内容的「最小内容宽度」不能把整页撑得比视口宽
   （否则 html,body 的 overflow:hidden 会悄悄裁掉右栏与浮钮——1440px 桌面曾被裁 93px、手机裁掉整个 📊 看板钮） */
.app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); }
.topbar { display: flex; align-items: center; gap: 18px; padding: 10px 18px; min-width: 0; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(10, 18, 36, 0.95), rgba(10, 18, 36, 0.6)); backdrop-filter: blur(8px); z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand .brand-text { min-width: 0; }
.brand .logo { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(135deg, rgba(33,199,255,0.25), rgba(46,230,166,0.18)); border: 1px solid var(--border-strong); }
.brand h1 { font-size: 16px; margin: 0; font-weight: 800; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .sub { font-size: 11px; color: var(--txt-dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpis { display: flex; gap: 18px; margin-left: auto; min-width: 0; }
.kpi .num { white-space: nowrap; }
.kpi-toggle { display: none; }   /* 窄屏才显示的「📊 数据」开关（见 @media） */
.kpi { text-align: right; }
.kpi .num { font-size: 19px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .lab { font-size: 10.5px; color: var(--txt-dim); margin-top: 4px; white-space: nowrap; }
.kpi .num.accent { color: var(--accent); } .kpi .num.good { color: var(--good); } .kpi .num.warn { color: var(--warn); } .kpi .num.hot { color: var(--hot); } .kpi .num.pipe { color: #c9a7ff; }
.top-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.tbtn { padding: 7px 11px; font-size: 12px; font-weight: 600; color: var(--txt-dim); text-decoration: none; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; white-space: nowrap; transition: all .15s; }
.tbtn:hover { color: var(--txt); border-color: var(--border-strong); }

.body { display: grid; grid-template-columns: 300px 1fr 350px; min-height: 0; }
.panel { overflow-y: auto; padding: 16px 14px 28px; background: var(--panel); backdrop-filter: blur(10px); scrollbar-width: thin; min-width: 0; }
.panel.left { border-right: 1px solid var(--border); }
.panel.right { border-left: 1px solid var(--border); }
/* 窄屏抽屉的把手 + 关闭钮（桌面隐藏）；遮罩只在抽屉打开时出现 */
.drawer-head { display: none; }
.drawer-backdrop { display: none; }
.block { margin-bottom: 20px; }
.block-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--txt-dim); margin-bottom: 10px; }
.block-title::before { content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--accent); }
.block-title .count { margin-left: auto; color: var(--txt-faint); font-size: 11px; letter-spacing: 0; font-weight: 500; }
.credit { font-size: 10.5px; color: var(--txt-faint); line-height: 1.5; margin-top: 10px; }

/* ---------- 芯片 / 按钮 ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 9px; font-size: 12px; color: var(--txt-dim); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: all .15s; }
.chip:hover { color: var(--txt); border-color: var(--border-strong); }
.chip.on { color: var(--txt); background: rgba(33,199,255,0.12); border-color: rgba(33,199,255,0.45); }
.chip .ct { margin-left: 5px; color: var(--txt-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.chip.epc-open.on { background: rgba(255,176,46,0.16); border-color: rgba(255,176,46,0.6); color: #ffd48a; }
.kv-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kv-row .chip { padding: 3px 8px; font-size: 11px; }
.kv-row .chip i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; background: var(--c); }
.kv-row .chip.off { opacity: .4; }
.tgl { width: 100%; margin-top: 8px; padding: 8px 10px; font-size: 12.5px; font-weight: 700; color: var(--txt-dim); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all .15s; }
.tgl:hover { color: var(--txt); border-color: var(--border-strong); }
.tgl.on { color: #ffd48a; background: rgba(255,176,46,0.16); border-color: rgba(255,176,46,0.6); }
.btn-reset { width: 100%; margin-top: 10px; padding: 8px; font-size: 12px; color: var(--txt-dim); background: transparent; border: 1px dashed var(--border-strong); border-radius: 10px; cursor: pointer; }
.btn-reset:hover { color: var(--txt); }
.search { position: relative; }
.search input { width: 100%; padding: 9px 12px 9px 32px; font-size: 13px; color: var(--txt); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; outline: none; font-family: inherit; }
.search input:focus { border-color: var(--accent); }
.search input::placeholder { color: var(--txt-faint); }
.search .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--txt-faint); font-size: 13px; }

/* 州 / 领地列表 */
.state-list { display: flex; flex-direction: column; gap: 4px; }
.state-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; transition: all .15s; }
.state-row:hover { background: rgba(255,255,255,0.05); }
.state-row.on { background: rgba(255,255,255,0.07); border-color: var(--border-strong); }
.state-row .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 8px var(--c); }
.state-row .nm { flex: 1; font-size: 13px; }
.state-row .nm small { color: var(--txt-faint); margin-left: 5px; font-size: 11px; }
.state-row .ct { font-size: 12px; color: var(--txt-faint); font-variant-numeric: tabular-nums; }
.state-row .doc { font-size: 11px; color: var(--accent); background: rgba(33,199,255,0.10); border: 1px solid rgba(33,199,255,0.35); border-radius: 7px; padding: 2px 7px; cursor: pointer; }
.state-row .doc:hover { background: rgba(33,199,255,0.22); }
.state-row.dim { opacity: .45; }

/* 品类列表 */
.cat-list { display: flex; flex-direction: column; gap: 3px; }
.cat-chip { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 9px; cursor: pointer; transition: background .15s; }
.cat-chip:hover { background: rgba(255,255,255,0.05); }
.cat-chip .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.cat-chip .nm { flex: 1; font-size: 13px; }
.cat-chip .ct { font-size: 12px; color: var(--txt-faint); font-variant-numeric: tabular-nums; }
.cat-chip.off { opacity: 0.38; }
.cat-chip.off .dot { box-shadow: none; }

/* ---------- 地图 ---------- */
.map-wrap { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; }
.leaflet-container { background: #0a1020; font-family: inherit; outline: none; }
.leaflet-container a { color: var(--accent); }
.leaflet-bar a, .leaflet-bar a:hover { background: #101a30; color: var(--txt); border-bottom-color: var(--border); }
.leaflet-bar a:hover { background: #16233f; }
.leaflet-bar { border: 1px solid var(--border); box-shadow: var(--shadow); }
.leaflet-control-attribution { background: rgba(10, 18, 36, 0.7) !important; color: var(--txt-faint) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--txt-dim) !important; }
/* 悬浮提示：Leaflet 的 tooltip 面板没有宽度，white-space:normal 时绝对定位的提示框会按 0 宽容器「收缩到最小内容」——
   一个字一行、竖成一条（州面 / REZ 面提示曾 46px 宽 × 261px 高）。width:max-content 按内容撑开、再用 max-width 换行。 */
.leaflet-tooltip.au-tip { background: rgba(12, 20, 40, 0.94); color: var(--txt); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow); font-size: 12px; line-height: 1.45; padding: 8px 10px; width: max-content; max-width: 300px; white-space: normal; }
.leaflet-tooltip.au-tip::before { display: none; }
.leaflet-interactive.au-line { cursor: pointer; }
.au-building { animation: auflow 1.2s linear infinite; }
@keyframes auflow { to { stroke-dashoffset: -18; } }

/* 项目标记（与 index.html 同款圆点） */
.mk { background: transparent; border: none; }
.mk .dot { display: block; border-radius: 50%; background: var(--c); border: 1.5px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 9px var(--c), 0 0 3px rgba(0, 0, 0, 0.7); position: relative; cursor: pointer; }
.mk .dot.is-open::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--warn); animation: mkpulse 2.4s ease-out infinite; }
@keyframes mkpulse { 0% { transform: scale(0.85); opacity: 0.85; } 100% { transform: scale(2.4); opacity: 0; } }
.mk .dot.is-new::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, 0.8); }
.mk-cluster { background: transparent; border: none; }
.mkc { display: grid; place-items: center; border-radius: 50%; background: rgba(10, 18, 36, 0.88); border: 2px solid var(--c);
  box-shadow: 0 0 16px var(--c), 0 2px 10px rgba(0, 0, 0, 0.5); color: #eaf2ff; cursor: pointer; transition: transform 0.12s; }
.mkc:hover { transform: scale(1.08); }
.mkc b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.leaflet-cluster-spider-leg { stroke: rgba(120, 160, 220, 0.5); stroke-width: 1.2; }

/* 枢纽站 / 燃煤电厂 */
.node-mk { background: transparent; border: none; }
.node-mk i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); border: 1.5px solid #fff; box-shadow: 0 0 6px var(--c); }
.coal-mk { background: transparent; border: none; }
.coal-mk .cm { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 9px; background: rgba(10,18,36,0.92);
  border: 2px solid var(--c); box-shadow: 0 0 14px var(--c); cursor: pointer; font-size: 15px; line-height: 1; }
.coal-mk .cm span { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 800; color: #0a1020; background: var(--c); padding: 1px 5px; border-radius: 6px; white-space: nowrap; }
.coal-mk .cm.closed { opacity: .55; filter: grayscale(.6); }
.coal-mk .cm.sm { font-size: 11px; border-radius: 6px; box-shadow: 0 0 8px var(--c); }   /* 全国 / 州视角的小号燃煤标记 */
.coal-mk .cm.sm span { font-size: 8px; bottom: -7px; padding: 0 4px; }
/* 顶栏「数据截至」胶囊 + BD 快捷筛选芯片 */
.tbtn.fresh { cursor: default; font-weight: 600; font-variant-numeric: tabular-nums; }
.tbtn.fresh.stale { color: #ffd48a; border-color: rgba(255,176,46,0.55); background: rgba(255,176,46,0.10); }
.chip.pq-win.on { background: rgba(255,176,46,0.14); border-color: rgba(255,176,46,0.55); color: #ffd48a; }
.chip.pq-hot.on { background: rgba(255,92,122,0.14); border-color: rgba(255,92,122,0.5); color: #ffb3c1; }
.chip.pq-up.on { background: rgba(46,230,166,0.14); border-color: rgba(46,230,166,0.55); color: #bfe9d8; }
.chip.pq-mine.on { background: rgba(201,167,255,0.16); border-color: rgba(201,167,255,0.6); color: #e2d2ff; }
/* 📋 线索跟进（本地 CRM）：卡片里的记录条 + 状态标签 + 右栏汇总 */
.card .d-track { margin: 10px 14px 0; padding: 9px 11px; border-radius: 10px; background: rgba(201,167,255,0.08); border: 1px solid rgba(201,167,255,0.32); font-size: 12.5px; }
.card .d-track .dt-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.card .d-track .dt-h .dp-tag { color: #e2d2ff; } .card .d-track .dt-h small { color: var(--txt-faint); font-size: 11px; }
.card .d-track .dt-row { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr; gap: 6px; margin-bottom: 6px; }
.card .d-track select, .card .d-track input, .card .d-track textarea { width: 100%; min-width: 0; padding: 7px 8px; font-size: 12.5px; color: var(--txt); background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px; font-family: inherit; color-scheme: dark; outline: none; }
.card .d-track select:focus, .card .d-track input:focus, .card .d-track textarea:focus { border-color: #c9a7ff; }
.card .d-track textarea { resize: vertical; min-height: 44px; display: block; }
.card .d-track .dt-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.card .d-track .dt-act button { padding: 7px 11px; font-size: 12px; font-weight: 700; color: var(--txt); background: rgba(201,167,255,0.16); border: 1px solid rgba(201,167,255,0.5); border-radius: 9px; cursor: pointer; }
.card .d-track .dt-act button:hover { background: rgba(201,167,255,0.28); }
.card .d-track .dt-act small { color: var(--txt-faint); font-size: 10.5px; flex: 1 1 100%; }
.tag.tr-todo { color: #e2d2ff; border-color: rgba(201,167,255,0.5); background: rgba(201,167,255,0.12); }
.tag.tr-contacted { color: #9fe3ff; border-color: rgba(33,199,255,0.5); background: rgba(33,199,255,0.12); }
.tag.tr-quoted { color: #ffd48a; border-color: rgba(255,176,46,0.5); background: rgba(255,176,46,0.12); }
.tag.tr-won { color: #bfe9d8; border-color: rgba(46,230,166,0.5); background: rgba(46,230,166,0.12); }
.tag.tr-lost, .tag.tr-skip { color: var(--txt-dim); }
.track-sum { margin-top: 6px; font-size: 12px; color: #e2d2ff; } .track-sum .d-link { color: #e2d2ff; cursor: pointer; text-decoration: underline dotted; }
/* 底图切换行 */
.bm-row .bm-lab { font-size: 11px; color: var(--txt-faint); align-self: center; margin-right: 2px; }
/* 州档案长文要点列表（clampList）：默认只展开前几条 */
.card .d-bul { margin: 0; padding-left: 16px; }
.card .d-bul li { font-size: 12.5px; line-height: 1.6; color: #d6e0f5; margin: 0 0 5px; }
.card .d-bul li.hid { display: none; } .card .d-bul.open li.hid { display: list-item; }
.card .d-more { margin-top: 2px; padding: 5px 10px; font-size: 11.5px; font-weight: 700; color: var(--accent); background: rgba(33,199,255,0.08); border: 1px solid rgba(33,199,255,0.3); border-radius: 8px; cursor: pointer; }
.card .d-more:hover { background: rgba(33,199,255,0.18); }

/* 图例 */
.map-legend { position: absolute; left: 12px; bottom: 34px; z-index: 500; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 9px 11px; font-size: 11px; color: var(--txt-dim); backdrop-filter: blur(8px); box-shadow: var(--shadow); max-width: 240px; }
/* 标题是按钮：点击折叠成一枚「图例 ▸」胶囊（au.js 记在 localStorage au.legend.v1）——16 行图例在 1366×768 笔记本上盖住西南角的聚合点 */
.map-legend .lg-h { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 5px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--txt); letter-spacing: .5px; text-align: left; cursor: pointer; }
.map-legend .lg-h .lg-caret { margin-left: auto; font-size: 10px; color: var(--txt-faint); transition: transform .15s; }
.map-legend.collapsed .lg-h { margin-bottom: 0; } .map-legend.collapsed .lg-h .lg-caret { transform: rotate(-90deg); }
.map-legend.collapsed .lg-body { display: none; }
.map-legend.inline .lg-h { cursor: default; } .map-legend.inline .lg-h .lg-caret { display: none; }
.map-legend .lg-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }   /* 电压等级两列：图例矮 5 行 */
.map-legend .lg-row { display: flex; align-items: center; gap: 7px; margin: 3px 0; }
.map-legend .lg-row i { width: 22px; height: 0; border-top: 3px solid var(--c); flex: none; }
.map-legend .lg-row i.dash { border-top-style: dashed; }
.map-legend .lg-row i.dot { width: 9px; height: 9px; border: 1.5px solid #fff; border-radius: 50%; background: var(--c); }
.map-legend .lg-row i.coal { width: 14px; height: 14px; border: 2px solid var(--c); border-radius: 4px; background: rgba(10,18,36,0.92); }
.map-legend .lg-note { color: var(--txt-faint); margin-top: 5px; font-size: 10px; line-height: 1.4; }
/* 同一份图例在窄屏改画进左栏「图层」块（地图上的浮动图例在窄屏隐藏，但菱形 / 虚线 / 脉冲圈得有地方解释） */
.map-legend.inline { display: none; position: static; max-width: none; box-shadow: none; margin-top: 8px; }
.home { position: absolute; right: 12px; bottom: 34px; z-index: 500; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel); color: var(--txt-dim); cursor: pointer; font-size: 15px; box-shadow: var(--shadow); }
.home:hover { color: var(--txt); border-color: var(--border-strong); }
.fab { display: none; position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 600; padding: 11px 14px; min-height: 44px; font-size: 13px; font-weight: 700; color: var(--txt); background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: var(--shadow); cursor: pointer; }
.fab-l { left: max(12px, env(safe-area-inset-left, 0px)); } .fab-r { right: max(12px, env(safe-area-inset-right, 0px)); }

/* ---------- 详情卡（项目 / 燃煤电厂 / 州档案 / 线路 共用一个槽位）---------- */
.card { position: absolute; right: 12px; top: 12px; z-index: 1010;   /* > Leaflet 控件层 1000：窄屏底部卡片不再被版权条 / 缩放钮压住 */ width: 380px; max-width: calc(100% - 24px); max-height: calc(100% - 84px); overflow-y: auto;   /* 底边留 84px：桌面 ⤢ 复位钮 / ≤1180 的 📊 浮钮不被卡片压住 */
  background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s, transform .18s; scrollbar-width: thin; }
.card.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.card .d-top { padding: 14px 16px 10px; position: relative; }
.card .d-close { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--txt-dim); cursor: pointer; font-size: 16px; line-height: 1; }
.card .d-close:hover { color: #fff; border-color: var(--border-strong); }
.card .d-share { position: absolute; right: 44px; top: 10px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--txt-dim); cursor: pointer; font-size: 13px; }
.card .d-share:hover { color: var(--accent); border-color: var(--border-strong); }
.card .d-cat { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.card .d-name { font-size: 16px; font-weight: 800; line-height: 1.3; padding-right: 70px; }
.card .d-en { font-size: 11px; color: var(--txt-faint); margin-top: 3px; }
.card .d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.card .d-cell { background: var(--panel-solid); padding: 9px 14px; }
.card .d-cell .k { font-size: 10px; color: var(--txt-faint); letter-spacing: .5px; }
.card .d-cell .v { font-size: 13px; font-weight: 600; margin-top: 3px; line-height: 1.35; }
.card .d-strip { margin: 10px 14px 0; padding: 9px 11px; border-radius: 10px; background: rgba(33,199,255,0.08); border: 1px solid rgba(33,199,255,0.22); font-size: 12.5px; line-height: 1.5; }
.card .d-strip .dp-tag { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--accent); margin-right: 6px; }
.card .d-strip.epc { background: rgba(255,255,255,0.03); border-color: var(--border); }
.card .d-strip.epc.open { background: rgba(255,176,46,0.10); border-color: rgba(255,176,46,0.45); }
.card .d-strip.epc .dp-tag { color: var(--txt-dim); } .card .d-strip.epc.open .dp-tag { color: #ffd48a; }
.card .d-desc { padding: 12px 16px 16px; font-size: 13px; line-height: 1.7; color: #d6e0f5; }
.card .d-desc p { margin: 0 0 8px; }
.card .d-sec { padding: 0 16px 10px; }
.card .d-sec h4 { margin: 8px 0 5px; font-size: 11.5px; color: var(--txt-dim); letter-spacing: .6px; font-weight: 700; }
.card .d-sec p, .card .d-sec li { font-size: 12.5px; line-height: 1.6; color: #d6e0f5; margin: 0; }
.card .d-sec ul { margin: 0; padding-left: 16px; }
.card .d-sec .src a { color: var(--txt-faint); font-size: 11px; word-break: break-all; }
.card .d-link { color: var(--accent); cursor: pointer; text-decoration: underline dotted; }
.card .tag { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.06); border: 1px solid var(--border); margin: 2px 4px 2px 0; }
.card .tag.hot { color: #ffb3c1; border-color: rgba(255,92,122,0.5); background: rgba(255,92,122,0.12); }
.card .tag.warm { color: #ffd48a; border-color: rgba(255,176,46,0.5); background: rgba(255,176,46,0.12); }
.card .tag.cool { color: #bfe9d8; border-color: rgba(46,230,166,0.4); background: rgba(46,230,166,0.10); }
.card .tag.closed, .card .tag.tbd { color: var(--txt-dim); }
.card .d-actions { display: flex; gap: 8px; padding: 0 16px 14px; flex-wrap: wrap; }
.card .d-actions button, .card .d-actions a { padding: 7px 11px; font-size: 12px; font-weight: 700; color: var(--txt); background: rgba(33,199,255,0.12); border: 1px solid rgba(33,199,255,0.4); border-radius: 9px; cursor: pointer; text-decoration: none; }
.card .d-actions button:hover, .card .d-actions a:hover { background: rgba(33,199,255,0.22); }
.card .kv-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; }
.card .kv-pills div { flex: 1 1 30%; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 9px; padding: 7px 9px; }
.card .kv-pills b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.card .kv-pills span { font-size: 10.5px; color: var(--txt-faint); }
.card .co-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.card .co-row:last-child { border-bottom: none; }
.card .co-row b { font-weight: 700; } .card .co-row small { color: var(--txt-faint); display: block; font-size: 11px; margin-top: 2px; line-height: 1.4; }
.st-规划 { color: var(--plan); } .st-在建 { color: var(--warn); } .st-投运 { color: var(--good); }

/* ---------- 右侧看板 ---------- */
.coal-bands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 10px; }
.coal-bands div { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 9px; padding: 7px 6px; text-align: center; }
.coal-bands b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.coal-bands span { font-size: 10px; color: var(--txt-faint); }
.coal-bands .b1 b { color: var(--hot); } .coal-bands .b2 b { color: var(--warn); } .coal-bands .b3 b { color: #ffd93b; } .coal-bands .b4 b { color: var(--txt-dim); }
.coal-list, .opp-list, .line-list { display: flex; flex-direction: column; gap: 4px; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 9px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; transition: all .15s; }
.row:hover { background: rgba(255,255,255,0.05); border-color: var(--border); }
.row .nm { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.row .meta { font-size: 11px; color: var(--txt-faint); grid-column: 1 / -1; line-height: 1.4; }
.row .cd { font-size: 11px; font-weight: 800; white-space: nowrap; align-self: start; padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.row .cd.hot { color: #ffb3c1; background: rgba(255,92,122,0.14); } .row .cd.warm { color: #ffd48a; background: rgba(255,176,46,0.14); }
.row .cd.cool { color: #bfe9d8; background: rgba(46,230,166,0.12); } .row .cd.closed, .row .cd.tbd, .row .cd.due { color: var(--txt-dim); background: rgba(255,255,255,0.05); }
.row .bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 2px; }
.row .bar i { display: block; height: 100%; background: var(--c); width: var(--w); }
.row .amt { font-size: 12px; font-weight: 700; color: var(--good); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row.closed { opacity: .5; }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; align-items: center; font-size: 12px; cursor: pointer; }
.bar-row .nm { color: var(--txt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .track { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.bar-row .track i { display: block; height: 100%; width: var(--w); background: var(--c); box-shadow: 0 0 8px var(--c); }
.bar-row .val { font-size: 11px; color: var(--txt-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { font-size: 12px; color: var(--txt-faint); padding: 8px; text-align: center; }

/* ---------- 首屏加载 / toast ---------- */
.app-loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; gap: 0; background: var(--bg); transition: opacity .35s; }
.app-loader.hidden { opacity: 0; pointer-events: none; }
.app-loader .al-logo { font-size: 46px; filter: drop-shadow(0 0 18px rgba(33, 199, 255, 0.4)); }
.app-loader .al-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--accent); animation: alspin .9s linear infinite; margin-top: -40px; }
@keyframes alspin { to { transform: rotate(360deg); } }
.app-loader .al-text { text-align: center; font-size: 16px; font-weight: 700; color: var(--txt); margin-top: -60px; }
.app-loader .al-text span { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; color: var(--txt-dim); letter-spacing: 1px; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px); z-index: 3000; width: max-content; max-width: calc(100% - 32px); padding: 9px 14px; font-size: 13px; color: var(--txt); background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow); opacity: 0; transition: all .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 响应式 ----------
   顶栏「副标 → 去副标 → KPI 换到第二行」三档不按视口断点，而由 au.js fitTopbar() 按内容实测切换（.topbar.no-sub / .topbar.kpi-wrap）：
   中英文标签、按钮数、系统字体都会改变顶栏内容宽度，媒体查询断点总有某种组合让最后一个 KPI 滑到 📅 AEMO 胶囊底下
   （旧断点 ≤1500 去副标 / ≤1400 换行：中文 1501–1680px、英文 1401–1920px 都中招，因为 .kpis 的 min-width:0 让 nowrap 的 KPI 溢出到操作条底下）；
   ≤1180 两侧栏收窄；≤900 手机：顶栏两行（标题 + 📊 数据开关 / 横向可滑的操作条）、KPI 默认收起、两侧栏改底部抽屉、卡片改底部半屏。 */
@media (min-width: 901px) {
  .topbar.no-sub .brand .sub { display: none; }
  .topbar.no-sub .brand { flex-shrink: 0; }   /* 去副标后标题不再参与收缩：空间不够时只有 .kpis 溢出，fitTopbar 才量得准 */
  .topbar.no-sub .kpis { gap: 12px; } .topbar.no-sub .kpi .num { font-size: 17px; }
  .topbar.kpi-wrap { flex-wrap: wrap; gap: 8px 14px; }
  .topbar.kpi-wrap .brand { flex-shrink: 1; }
  .topbar.kpi-wrap .kpis { order: 3; width: 100%; justify-content: space-between; margin-left: 0; }
  .topbar.kpi-wrap .kpi { text-align: left; }
  .topbar.kpi-wrap .top-actions { margin-left: auto; }
}
/* ≤1180（iPad 横屏等）：三栏只剩 444px 地图、图例盖住半张图 → 右侧看板改成右侧抽屉（📊 看板浮钮），左栏保留 */
@media (max-width: 1180px) {
  .body { grid-template-columns: 270px 1fr; }
  .drawer-head { display: flex; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 2; margin: 0 -14px 10px; padding: 8px 14px 6px; background: rgba(12, 20, 40, 0.97); border-bottom: 1px solid var(--border); }
  .drawer-head .drawer-handle { position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--border-strong); }
  .drawer-head .drawer-title { flex: 1; font-size: 13px; font-weight: 700; color: var(--txt-dim); padding-top: 8px; }
  .drawer-head .drawer-close { margin-top: 8px; padding: 8px 12px; min-height: 36px; font-size: 12.5px; font-weight: 700; color: var(--txt); background: rgba(255,255,255,0.06); border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; }
  .drawer-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(4, 8, 18, 0.45); }
  .drawer-backdrop.show { display: block; }
  /* 抽屉 z 高于 Leaflet 控件层（1000）：横屏抽屉顶到地图顶部时不再被缩放钮压住 */
  .panel.right { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 86%); z-index: 1100; border: none; border-left: 1px solid var(--border-strong); box-shadow: var(--shadow);
    transform: translateX(104%); transition: transform .22s; background: rgba(12, 20, 40, 0.97); padding: 0 14px calc(28px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
  .panel.right.open { transform: none; }
  .fab-r { display: block; }
  .app.drawer-open .fab { display: none; }
  /* ⤢ 复位钮让开右下角的 📊 浮钮：挪到缩放控件下方 */
  .home { right: auto; bottom: auto; left: 10px; top: 84px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .panel.left .drawer-head { display: none; }
  .panel.right .drawer-head .drawer-handle { display: none; }
  .panel.right .drawer-head .drawer-title, .panel.right .drawer-head .drawer-close { padding-top: 0; margin-top: 0; }
}
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top, 0px)); }   /* 两行：标题 + 📊 数据 / 操作条（以前靠 ≤1400 的 flex-wrap，那条规则已改成 .kpi-wrap 类） */
  .brand { flex: 1 1 auto; gap: 9px; } .brand .logo { width: 30px; height: 30px; font-size: 16px; } .brand h1 { font-size: 15px; }
  .kpi-toggle { display: inline-flex; align-items: center; gap: 4px; flex: none; }
  .kpi-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
  .kpis { display: none; order: 3; width: 100%; flex-wrap: wrap; gap: 6px 10px; justify-content: flex-start; }
  .topbar.kpis-open .kpis { display: flex; }
  .kpi { flex: 1 0 30%; text-align: left; } .kpi .num { font-size: 16px; }
  .top-actions { order: 2; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: 0; padding-bottom: 1px; }
  .top-actions::-webkit-scrollbar { display: none; }
  /* 右缘渐隐提示「还能往右滑」（EN / 🔗 / 🗺️ 全球地图 藏在屏外）；末尾加一个空位，滑到底时最后一个按钮不被渐隐吃掉 */
  .top-actions { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .top-actions::after { content: ''; flex: none; width: 22px; }
  .brand .sub { display: none; }
  .tbtn { flex: none; padding: 9px 11px; min-height: 36px; }
  .body { grid-template-columns: 1fr; }
  /* 底部抽屉：固定定位、带把手与关闭钮、遮罩点击即关；z 高于浮钮（浮钮在抽屉打开时隐藏） */
  /* 两侧栏都改成底部抽屉（选择器写成 .panel.left/.panel.right 以压过 ≤1180 的右侧抽屉规则）；把手 / 关闭钮 / 遮罩样式见 ≤1180 区块 */
  .panel.left, .panel.right { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 72vh; max-height: 72dvh; z-index: 1100; border: none; border-top: 1px solid var(--border-strong); border-radius: 16px 16px 0 0;
    transform: translateY(105%); transition: transform .22s; background: rgba(12, 20, 40, 0.97); padding: 0 14px calc(28px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
  .panel.left.open, .panel.right.open { transform: translateY(0); }
  .fab { display: block; }
  .app.drawer-open .fab, .app.card-open .fab { display: none; }
  .home { width: 34px; height: 34px; }
  /* 详情卡改成底部半屏：不再压住缩放控件，也不会被抽屉盖住（开卡时抽屉自动收起） */
  .card { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; max-height: 62vh; max-height: 62dvh; border-radius: 16px 16px 0 0; border-bottom: none;
    transform: translateY(12px); padding-bottom: env(safe-area-inset-bottom, 0px); overscroll-behavior: contain; }
  .card.show { transform: translateY(0); }
  .card .d-close, .card .d-share { width: 36px; height: 36px; }
  .card .d-track .dt-row { grid-template-columns: 1fr 1fr; } .card .d-track .dt-row select { grid-column: 1 / -1; }
  .card .d-track select, .card .d-track input, .card .d-track textarea { font-size: 15px; padding: 10px 10px; }
  .map-legend:not(.inline) { display: none; }
  .map-legend.inline { display: block; }
  .cod-ticker { top: 10px; font-size: 34px; }
  /* toast 上移到 🔍/📊 浮钮之上（顶部让给 COD 年份大字与两行顶栏） */
  .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 32px); }
}
/* 手机横屏（高 ≤500）：底部半屏卡片只剩 240px 高、还压住缩放钮 → 改成右侧竖卡，用足高度（开卡时浮钮已隐藏） */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .card { left: auto; right: 12px; top: 12px; bottom: auto; width: min(380px, 58%); max-height: calc(100% - 24px); border-radius: var(--radius); border-bottom: 1px solid var(--border-strong); padding-bottom: 0; }
  .card { transform: translateY(-8px); }
  .card.show { transform: translateY(0); }
}
/* 触控目标 ≥36–44px：窄屏，或任何粗指针（触屏）设备——iPad 横屏 901–1180 走桌面三栏时芯片也要够大 */
@media (max-width: 900px), (pointer: coarse) {
  .chip { padding: 10px 13px; font-size: 13px; min-height: 40px; }
  .kv-row .chip { padding: 8px 11px; font-size: 12px; min-height: 36px; }
  .state-row { padding: 10px 8px; } .state-row .doc { padding: 8px 11px; font-size: 12px; min-height: 36px; }
  .cat-chip { padding: 11px 9px; }
  .tgl, .btn-reset, .btn-more { padding: 12px 10px; min-height: 44px; }
  .search input { padding: 12px 12px 12px 34px; font-size: 15px; }   /* ≥16px 才不触发 iOS 自动放大，15px + viewport 已够 */
  .row { padding: 10px 9px; }
  .bar-row { min-height: 36px; }
  .cod-row input[type=range] { height: 44px; }
  .card .d-close, .card .d-share { width: 36px; height: 36px; }
  /* 项目圆点最小 8px：触屏加一圈透明命中区（伪元素参与命中测试，不改视觉） */
  .mk::before, .pl-mk::before, .node-mk::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
}
@media (min-width: 1181px) { .drawer-backdrop { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .au-building, .mk .dot.is-open::after, .pl-mk i.is-up::after, .pl-mk i.is-year::before { animation: none; } .card, .panel { transition: none; } }

/* ---------- 🧭 AEMO 管线标记（菱形；承诺实心 / 预期虚线边 / 拟建空心）---------- */
.pl-mk { background: transparent; border: none; }
.pl-mk i { display: block; position: relative; width: 100%; height: 100%; transform: rotate(45deg); background: var(--c); border: 1.5px solid rgba(255,255,255,0.85); box-shadow: 0 0 8px var(--c), 0 0 3px rgba(0,0,0,0.7); cursor: pointer; border-radius: 2px; }
/* 📰 本季变化高亮：升级为承诺 = 绿色脉冲框，新增 = 青色虚线框；▶ 播放时当年投运 = 闪白框 */
.pl-mk i.is-up::after { content: ''; position: absolute; inset: -5px; border: 2px solid #2ee6a6; border-radius: 3px; animation: mkpulse 2.4s ease-out infinite; }
.pl-mk i.is-added::after { content: ''; position: absolute; inset: -4px; border: 1.5px dashed #21c7ff; border-radius: 3px; }
.pl-mk i.is-year::before { content: ''; position: absolute; inset: -6px; border: 2px solid #fff; border-radius: 3px; animation: mkpulse 1.1s ease-out infinite; }
.map-legend .lg-row i.dia.up { box-shadow: 0 0 0 2px #2ee6a6; } .map-legend .lg-row i.dia.added { box-shadow: 0 0 0 2px #21c7ff; border-style: dashed; }
/* 🗓️ COD 时间轴 */
.cod-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cod-row .cod-play { flex: none; padding: 5px 10px; min-width: 34px; }
.cod-row .cod-play.on { color: #ffd48a; background: rgba(255,176,46,0.16); border-color: rgba(255,176,46,0.6); }
.cod-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); height: 24px; margin: 0; }
.cod-row .cod-lab { font-size: 11px; color: var(--txt-faint); white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cod-ticker { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 650; padding: 4px 18px; font-size: 46px; font-weight: 900; letter-spacing: 2px; color: #fff; text-align: center; text-shadow: 0 0 18px rgba(33,199,255,0.8), 0 2px 8px rgba(0,0,0,0.7); pointer-events: none; font-variant-numeric: tabular-nums; line-height: 1; }
.cod-ticker[hidden] { display: none; }
.cod-ticker small { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--txt-dim); letter-spacing: 1px; text-shadow: none; }
.pl-mk i.anticipated { border-style: dashed; opacity: .92; }
.pl-mk i.proposed { background: rgba(10,18,36,0.75); box-shadow: 0 0 6px var(--c); border-color: var(--c); }
.pl-mk i.approx { outline: 1px dotted rgba(255,255,255,0.5); outline-offset: 2px; }
.mkc.pl { border-radius: 6px; transform: rotate(45deg); }
.mkc.pl b { transform: rotate(-45deg); }
.mkc.pl:hover { transform: rotate(45deg) scale(1.08); }
.mkc.pl.up { box-shadow: 0 0 0 3px #2ee6a6, 0 0 16px var(--c); }
.mkc.pl.added { box-shadow: 0 0 0 2px #21c7ff, 0 0 16px var(--c); outline: 2px dashed #21c7ff; outline-offset: 3px; }
.mkc.pl.yr { box-shadow: 0 0 0 3px #fff, 0 0 20px #fff; }
.chip .fi { display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); background: var(--c); margin-right: 5px; vertical-align: middle; border-radius: 1px; }
.chip.pls-committed.on { background: rgba(46,230,166,0.14); border-color: rgba(46,230,166,0.55); }
.chip.pls-anticipated.on { background: rgba(255,176,46,0.14); border-color: rgba(255,176,46,0.55); }
.chip.pls-proposed.on { background: rgba(138,164,194,0.16); border-color: rgba(138,164,194,0.55); }
.coal-bands.pipe .b1 b { color: var(--good); } .coal-bands.pipe .b2 b { color: var(--warn); } .coal-bands.pipe .b3 b { color: #8aa4c2; } .coal-bands.pipe .b4 b { color: #c9a7ff; }
/* 🌞 REZ 区划 */
.rez-lab { background: transparent; border: none; pointer-events: none; }
.rez-lab span { display: inline-block; padding: 2px 7px; border-radius: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: #0a1020; background: var(--c); box-shadow: 0 1px 6px rgba(0,0,0,0.5); white-space: nowrap; transform: translate(-50%, -50%); }
.leaflet-interactive.au-rez { cursor: pointer; }
.row .cd.declared { color: #bfe9d8; background: rgba(46,230,166,0.12); } .row .cd.planned { color: #ffd48a; background: rgba(255,176,46,0.14); } .row .cd.candidate { color: var(--txt-dim); background: rgba(138,164,194,0.14); }
.card .tag.declared { color: #bfe9d8; border-color: rgba(46,230,166,0.4); background: rgba(46,230,166,0.10); } .card .tag.planned { color: #ffd48a; border-color: rgba(255,176,46,0.5); background: rgba(255,176,46,0.12); } .card .tag.candidate { color: var(--txt-dim); }
.card .tag.committed { color: #bfe9d8; border-color: rgba(46,230,166,0.4); background: rgba(46,230,166,0.10); } .card .tag.anticipated { color: #ffd48a; border-color: rgba(255,176,46,0.5); background: rgba(255,176,46,0.12); } .card .tag.proposed { color: var(--txt-dim); }
.map-legend .lg-row i.dia { width: 9px; height: 9px; border: 1.5px solid #fff; transform: rotate(45deg); background: var(--c); border-radius: 1px; }
.map-legend .lg-row i.dia.hollow { background: transparent; border-color: var(--c); }
.map-legend .lg-row i.zone { width: 16px; height: 10px; border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); border-radius: 2px; }

/* ---------- 🎯 线索榜 / 🏢 账户 / 📰 本季变化：右栏块 + 宽面板 ---------- */
.btn-more { margin-top: 6px; width: 100%; padding: 6px; font-size: 12px; font-weight: 700; color: var(--accent); background: rgba(33,199,255,0.08); border: 1px solid rgba(33,199,255,0.3); border-radius: 9px; cursor: pointer; }
.btn-more:hover { background: rgba(33,199,255,0.18); }
.row .cd.cool { color: #bfe9d8; background: rgba(46,230,166,0.14); } .row .cd.tbd { color: var(--txt-dim); background: rgba(255,255,255,0.06); }
.chip.owner-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.coal-bands.ch .b1 b { color: var(--accent); } .coal-bands.ch .b2 b { color: var(--good); } .coal-bands.ch .b3 b { color: var(--warn); } .coal-bands.ch .b4 b { color: var(--txt-dim); }
.modal { position: fixed; inset: 0; z-index: 2500; background: rgba(4, 8, 18, 0.72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-box { width: min(1200px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); scrollbar-width: thin; }
.modal .m-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px 10px; background: var(--panel-solid); border-bottom: 1px solid var(--border); }
.modal .m-head h2 { margin: 0; font-size: 16px; font-weight: 800; }
.modal .m-head .m-sub { width: 100%; font-size: 11.5px; color: var(--txt-dim); line-height: 1.5; }
.modal .m-close { margin-left: auto; width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--txt-dim); cursor: pointer; font-size: 17px; line-height: 1; }
.modal .m-close:hover { color: #fff; border-color: var(--border-strong); }
.modal .m-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.modal .m-actions button, .modal .m-actions a { padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--txt); background: rgba(33,199,255,0.12); border: 1px solid rgba(33,199,255,0.4); border-radius: 9px; cursor: pointer; text-decoration: none; }
.modal .m-actions button:hover, .modal .m-actions a:hover { background: rgba(33,199,255,0.22); }
.modal .m-body { padding: 10px 18px 20px; }
.modal .m-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.modal .m-kpis div { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.modal .m-kpis b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.modal .m-kpis span { font-size: 10.5px; color: var(--txt-faint); line-height: 1.3; }
.modal .tabs { display: flex; gap: 6px; margin: 2px 0 10px; flex-wrap: wrap; }
.modal .tabs button { padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--txt-dim); background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.modal .tabs button.on { color: var(--txt); background: rgba(255,255,255,0.08); border-color: var(--border-strong); }
.modal .m-note { font-size: 11.5px; color: var(--txt-faint); line-height: 1.6; margin: 10px 0 0; }
.modal .m-sec h3 { margin: 16px 0 6px; font-size: 13.5px; font-weight: 800; }
.modal .m-sec h3 .count { font-weight: 500; color: var(--txt-faint); font-size: 11.5px; margin-left: 6px; }
.modal .tag { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.06); border: 1px solid var(--border); white-space: nowrap; }
.modal .tag.committed { color: #bfe9d8; border-color: rgba(46,230,166,0.4); background: rgba(46,230,166,0.10); } .modal .tag.anticipated { color: #ffd48a; border-color: rgba(255,176,46,0.5); background: rgba(255,176,46,0.12); } .modal .tag.proposed, .modal .tag.existing { color: var(--txt-dim); }
.modal .tag.open { color: #ffd48a; border-color: rgba(255,176,46,0.5); }
.tbl-wrap { overflow-x: auto; }
.mtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mtable th { text-align: left; font-size: 10.5px; color: var(--txt-faint); font-weight: 700; letter-spacing: .4px; padding: 6px 8px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.mtable td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.4; }
.mtable tr.clk { cursor: pointer; } .mtable tr.clk:hover td { background: rgba(255,255,255,0.04); }
.mtable td.num, .mtable th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtable .nm { font-weight: 700; } .mtable .nm small { display: block; color: var(--txt-faint); font-weight: 500; font-size: 11px; }
.mtable .sc { display: inline-block; min-width: 38px; text-align: center; padding: 3px 6px; border-radius: 7px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mtable .sc.s3 { color: #bfe9d8; background: rgba(46,230,166,0.16); } .mtable .sc.s2 { color: #ffd48a; background: rgba(255,176,46,0.16); } .mtable .sc.s1 { color: var(--txt-dim); background: rgba(255,255,255,0.06); }
.mtable .act { white-space: nowrap; }
.mtable .act button, .mtable .act a { padding: 3px 7px; font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(33,199,255,0.10); border: 1px solid rgba(33,199,255,0.35); border-radius: 7px; cursor: pointer; text-decoration: none; margin-right: 4px; }
.mtable .act button:hover, .mtable .act a:hover { background: rgba(33,199,255,0.22); }
.mtable .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mtable .chips .d-link { font-size: 11px; color: var(--accent); cursor: pointer; text-decoration: underline dotted; }
.mtable .bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--c); vertical-align: middle; margin-right: 6px; }
.mtable .mini { font-size: 11px; color: var(--txt-faint); white-space: nowrap; }
.mtable .nw { white-space: nowrap; }
.mtable .rk-in { display: none; }   /* 排名只在窄屏卡片里内联到名称前 */
/* 窄屏：宽面板改成全高底部页、操作条横向可滑；12 列表格改成「一行一张卡」——
   每个 td 用 data-l 伪元素显示列名（au.js 的 td() 帮助函数写入），不再需要横向滑 3 屏 */
@media (max-width: 900px) {
  .modal { padding: 0; place-items: end center; }
  .modal-box { max-height: 100vh; max-height: 100dvh; border-radius: 16px 16px 0 0; border-left: none; border-right: none; border-bottom: none; }
  .modal .m-head { padding: 10px 12px 8px; gap: 8px; }
  .modal .m-head h2 { font-size: 15px; flex: 1 1 auto; min-width: 0; }
  .modal .m-head .m-actions { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .modal .m-head .m-actions::-webkit-scrollbar { display: none; }
  .modal .m-head .m-actions button, .modal .m-head .m-actions a { flex: none; min-height: 36px; }
  .modal .m-close { width: 36px; height: 36px; }
  .modal .m-head .m-sub { order: 4; }
  .modal .m-body { padding: 8px 10px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .modal .m-kpis { grid-template-columns: repeat(2, 1fr); }
  .modal .tabs button { min-height: 40px; }
  .mtable { font-size: 12.5px; }
  .mtable thead { display: none; }
  .mtable, .mtable tbody, .mtable tr { display: block; width: 100%; }
  .mtable tr { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: rgba(255,255,255,0.02); content-visibility: auto; contain-intrinsic-size: 0 200px; }
  .mtable tr.clk:hover td { background: transparent; }
  .mtable td { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; border: none; }
  .mtable td.num, .mtable th.num { text-align: right; }
  .mtable td::before { content: attr(data-l); color: var(--txt-faint); font-size: 11px; flex: none; min-width: 60px; text-align: left; }   /* .num 的 text-align:right 别传给列名 */
  .mtable td:not([data-l])::before, .mtable td[data-l=""]::before { display: none; }
  .mtable td.full { display: block; } .mtable td.full::before { display: none; }
  .mtable td.act { justify-content: flex-start; padding-top: 6px; }
  .mtable td.rk { display: none; } .mtable .rk-in { display: inline; color: var(--txt-faint); }
  .mtable .act button, .mtable .act a { min-height: 36px; padding: 6px 10px; display: inline-flex; align-items: center; }
  .mtable .chips { justify-content: flex-end; }
  .mtable .nm { text-align: left; }
}

/* ---------- 🔧 配网公司 DNSP：面 / 地图标签 / 列表色块 / 图例 ----------
 * 面默认关（全国铺满会压住州面点击），打开后显式区在上、兜底区在下；标签带边框胶囊（深底 + 配网色字，与 REZ 的实心标签区分）；
 * 右栏 / 州档案 / 卡片里的 .dn-sw 色块对应面色；图例用三色渐变条表示「多色面」。 */
.au-dnsp { cursor: pointer; }
.dn-lab { background: transparent; border: none; pointer-events: none; }
.dn-lab span { display: inline-block; padding: 2px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: var(--c); background: rgba(8,14,30,0.84); border: 1px solid var(--c); box-shadow: 0 1px 6px rgba(0,0,0,0.5); white-space: nowrap; transform: translate(-50%, -50%); }
.dn-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); vertical-align: -1px; margin-right: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.28); flex: none; }
.row.dn.on { background: rgba(33,199,255,0.10); border-color: rgba(33,199,255,0.45); }
.map-legend .lg-row i.dnsp { width: 22px; height: 10px; border: none; border-radius: 3px; background: linear-gradient(90deg, #5fb3ff 0 34%, #ff8c5a 34% 67%, #6fe3a5 67%); opacity: .85; }