/* ===== 河北车险行业数据大屏 · 浅蓝商业风 / 白色玻璃卡片 ===== */
:root {
    --blue-1: #3b82f6; --blue-2: #1d4ed8; --blue-3: #60a5fa; --cyan: #22d3ee;
    --up: #e02020; --down: #12b76a;
    --text: #0f2544; --muted: #6b7f9e;
    --card: rgba(255, 255, 255, .8);
    --line: rgba(255, 255, 255, .9);
    --shadow: 0 10px 30px rgba(23, 74, 158, .10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    width: 100vw; height: 100vh; overflow: hidden;
    font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
    color: var(--text);
    background: radial-gradient(1200px 700px at 15% -10%, #e6f2ff 0%, transparent 60%),
                radial-gradient(900px 600px at 100% 0%, #dbeafe 0%, transparent 55%),
                linear-gradient(160deg, #f2f8ff 0%, #e8f1ff 45%, #f7fbff 100%);
}
.screen { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
    transform-origin: 0 0; padding: 12px 22px 10px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- 名称条 ---------- */
/* 顶行三段式：左基准日(flex:1) / 中标题(文档流居中) / 右时钟+按钮(flex:1 右对齐) */
.top { display: flex; align-items: center; height: 76px; gap: 16px; }
.tb-left { flex: 1; font-size: 12px; color: var(--muted); line-height: 1.7; }
.tb-left b { color: var(--blue-2); font-size: 14px; }
.tb-left span { color: #9bb1cf; }
.title-center { flex: none; display: flex; flex-direction: column;
    align-items: center; gap: 2px; }
.title-center h1 { white-space: nowrap; font-size: 34px; font-weight: 800; letter-spacing: 9px; text-indent: 9px;
    background: linear-gradient(90deg, #08306e 0%, #1d4ed8 40%, #2f7ff0 60%, #22d3ee 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 10px rgba(37, 99, 235, .18)); }
.title-center .deco { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.title-center .deco s { text-decoration: none; font-size: 8px; color: var(--blue-1); }
.title-center .line { flex: none; width: 110px; height: 1px; background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .65)); }
.title-center .line.right { background: linear-gradient(90deg, rgba(37, 99, 235, .65), transparent); }

/* ---------- 控制条：独立一行的玻璃条 ---------- */
.controlbar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px;
    border-radius: 13px; background: rgba(255, 255, 255, .72); border: 1px solid var(--line);
    box-shadow: var(--shadow); backdrop-filter: blur(14px);
    position: relative; z-index: 40; }   /* 提高层级：筛选弹层不被下方图表盖住 */
.ctl-group { display: flex; align-items: center; gap: 8px; position: relative; }
.ctl-group label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ctl-group select.wide { min-width: 170px; font-weight: 600; color: var(--blue-2); }
.ctl-divider { width: 1px; height: 22px; background: rgba(59, 130, 246, .22); }
.ctl-chips { margin-left: auto; display: flex; gap: 6px; overflow: hidden; }
.filters { display: flex; align-items: center; gap: 8px; position: relative; }
select, .moto, .btn { height: 34px; border-radius: 9px; font-size: 13px; cursor: pointer; outline: none; }
select, .moto { border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(10px);
    padding: 0 10px; color: var(--text); }
.moto { display: flex; align-items: center; gap: 5px; }
.moto input { accent-color: var(--blue-2); cursor: pointer; }
.btn { border: 0; padding: 0 14px; color: #fff; transition: .2s; }
.btn.primary { background: linear-gradient(135deg, var(--blue-1), var(--blue-2)); box-shadow: 0 6px 14px rgba(37, 99, 235, .28); }
.btn.line { background: var(--card); color: var(--blue-2); border: 1px solid rgba(37, 99, 235, .25); backdrop-filter: blur(10px); }
.btn:hover { transform: translateY(-1px); }
.seg { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 2px; backdrop-filter: blur(10px); }
.seg button { border: 0; background: transparent; cursor: pointer; padding: 6px 12px; border-radius: 7px;
    font-size: 13px; color: var(--muted); transition: .2s; }
.seg button.active { background: linear-gradient(135deg, var(--blue-1), var(--blue-2)); color: #fff; }
.seg.mini { padding: 2px; margin-left: auto; }
.seg.mini button { padding: 3px 10px; font-size: 12px; }

/* 筛选弹层 */
.pop { position: absolute; top: 40px; left: 0; z-index: 50; display: none; gap: 10px; flex-wrap: wrap;
    padding: 14px 16px; width: 420px; border-radius: 12px; background: #fff;
    box-shadow: 0 18px 40px rgba(23, 74, 158, .22); border: 1px solid rgba(59, 130, 246, .18); }
.pop.show { display: flex; }
.pop label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); width: 46%; }
.pop select { width: 100%; }

/* 已选条件 chip */
.chips { display: flex; gap: 6px; flex: 1; overflow: hidden; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 14px; background: rgba(59, 130, 246, .12);
    color: var(--blue-2); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.chip b { cursor: pointer; font-weight: 400; opacity: .6; }

.top-right { flex: 1; display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.clock { text-align: right; line-height: 1.15; }
.clock b { font-size: 16px; font-variant-numeric: tabular-nums; }
.clock small { display: block; font-size: 11px; color: var(--muted); }
.icon-btn { border: 0; cursor: pointer; border-radius: 10px; transition: .2s; font-size: 15px; }
/* 顶部两个功能入口：带文字的胶囊按钮，足够显眼让人点 */
.btn.pill { height: 36px; padding: 0 16px; border-radius: 18px; font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: var(--blue-2); border: 1px solid rgba(37, 99, 235, .35);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .16); }
.btn.pill.primary { color: #fff; border: 0; background: linear-gradient(135deg, var(--blue-1), var(--blue-2));
    box-shadow: 0 6px 16px rgba(37, 99, 235, .34); }
.btn.pill.glow { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow {
    0%, 100% { box-shadow: 0 6px 16px rgba(37, 99, 235, .34); }
    50% { box-shadow: 0 6px 22px rgba(37, 99, 235, .6), 0 0 0 5px rgba(59, 130, 246, .18); }
}
.btn.pill:hover { transform: translateY(-2px); }

.icon-btn.ghost { width: 36px; height: 36px; background: var(--card); border: 1px solid rgba(37, 99, 235, .25); }
.icon-btn.primary { width: 36px; height: 36px; color: #fff; background: linear-gradient(135deg, var(--blue-1), var(--blue-2));
    box-shadow: 0 6px 14px rgba(37, 99, 235, .3); }
.icon-btn:hover { transform: translateY(-2px); }

/* ---------- KPI ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi { position: relative; overflow: hidden; height: 108px; padding: 12px 16px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(233, 243, 255, .85));
    border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(14px);
    display: flex; align-items: center; gap: 12px; transition: transform .3s; }
.kpi:hover { transform: translateY(-3px); }
.kpi::after { content: ""; position: absolute; right: -30px; top: -50px; width: 130px; height: 130px; border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, .25), transparent 70%); }
.kpi-icon { position: relative; width: 50px; height: 50px; flex: none; border-radius: 14px;
    background: linear-gradient(135deg, var(--blue-1), var(--cyan)); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 16px rgba(37, 99, 235, .28); }
.kpi-icon span { position: absolute; font-size: 24px; transition: opacity .5s, transform .5s; opacity: 0; transform: scale(.6) rotate(-25deg); }
.kpi-icon span.on { opacity: 1; transform: scale(1) rotate(0); }
.kpi-main { flex: 1; z-index: 1; }
.kpi-main .label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi-main .win { font-size: 11px; color: #9bb1cf; }
.kpi-main .value { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15;
    background: linear-gradient(135deg, #0b3a91, #2f7ff0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi-delta { display: flex; gap: 12px; margin-top: 2px; font-size: 12px; }
.kpi-delta i { font-style: normal; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); }

/* ---------- 两屏容器 ---------- */
.pages { position: relative; flex: 1; min-height: 0; }
.page { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s; }
.page.active { opacity: 1; pointer-events: auto; }
.grid { height: 100%; display: grid; gap: 14px; min-height: 0; }
.grid.g3 { grid-template-columns: 24% 50% 26%; }
/* 第二屏左栏是 7 列明细表，需要更宽，三栏比例单独调 */
#page2 .grid.g3 { grid-template-columns: 34% 40% 26%; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
    backdrop-filter: blur(14px); padding: 12px 14px; display: flex; flex-direction: column; min-height: 0; }
.panel h2 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.panel h2::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, var(--blue-1), var(--cyan)); }
.panel h2.mt { margin-top: 8px; }
.tag { font-size: 11px; font-weight: 400; padding: 2px 8px; border-radius: 12px; background: rgba(59, 130, 246, .12); color: var(--blue-2); }
.chart { flex: 1; min-height: 0; }
.chart.map { height: 52%; flex: none; }
.chart.trend { height: 42%; flex: none; }

/* 主体规模 */
.subj-main { padding: 10px 12px; border-radius: 11px; margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(219, 234, 254, .85), rgba(255, 255, 255, .9)); border: 1px solid rgba(59, 130, 246, .18); }
.subj-main .sm-label { font-size: 12px; color: var(--muted); }
.subj-main .sm-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: #0b3a91; line-height: 1.2; }
.subj-main .sm-row { display: flex; gap: 12px; margin-top: 2px; font-size: 12px; flex-wrap: wrap; }
.subj-main .sm-row i { font-style: normal; } .subj-main .sm-row b { font-size: 14px; }
.subj-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.subj-list .sl { padding: 7px 9px; border-radius: 9px; background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(59, 130, 246, .14); cursor: pointer; transition: .2s; }
.subj-list .sl:hover { border-color: var(--blue-3); }
.subj-list .sl.on { background: linear-gradient(135deg, #2563eb, #1d4ed8); border-color: transparent; }
.subj-list .sl.on * { color: #fff !important; }
.subj-list .sl .g { font-size: 11px; color: var(--muted); }
.subj-list .sl .v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.subj-list .sl .s { font-size: 10px; color: var(--muted); }
.subj-extra { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.9;
    border-top: 1px dashed rgba(59, 130, 246, .25); padding-top: 6px; }
.subj-extra b { color: var(--blue-2); font-size: 13px; }
.subj-trend { flex: 1; min-height: 150px; margin-top: 8px; }

/* 全主体明细表 */
.table-wrap { flex: 1; overflow: auto; }
.tbl { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 11.5px; }
.tbl th { position: sticky; top: 0; background: rgba(245, 249, 255, .96); color: var(--muted); font-weight: 500;
    text-align: right; padding: 7px 6px; border-bottom: 1px solid rgba(59, 130, 246, .18); }
.tbl th:first-child, .tbl th:nth-child(2) { text-align: left; }
.tbl td { padding: 5px 4px; border-bottom: 1px solid #f0f4fa; text-align: right; font-variant-numeric: tabular-nums; }
.tbl td:first-child, .tbl td:nth-child(2) { text-align: left; }
/* 主体名称列不换行（日/月多了环比列，空间更紧） */
.tbl th:nth-child(2), .tbl td:nth-child(2) { white-space: nowrap; }
/* 所有单元格一律不折行：空间不足时表格横向滚动（.table-wrap 已有 overflow:auto），绝不出两行 */
.tbl th, .tbl td { white-space: nowrap; }
.tbl th, .tbl td { padding-left: 4px; padding-right: 4px; }
.tbl tr:hover td { background: rgba(59, 130, 246, .06); cursor: pointer; }
/* 只高亮左上角选中的那家主体，前三名不再默认变色 */
.tbl tr.me td { background: rgba(59, 130, 246, .16); font-weight: 600; color: #0b3a91; }
.tbl tr.me td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.tbl tr.me .rk { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.tbl .rk { width: 24px; height: 20px; border-radius: 5px; color: #fff; font-size: 11px; display: inline-flex;
    align-items: center; justify-content: center; background: linear-gradient(135deg, #93c5fd, #60a5fa); }

/* 结构小图宫格：minmax(0,1fr) 让行高可收缩，防止画布把解读文字顶出去 */
.mini-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-height: 0; }
.mini-chart { background: rgba(255, 255, 255, .6); border: 1px solid rgba(59, 130, 246, .12); border-radius: 10px; overflow: hidden; }
.struct-note { margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.struct-note b { color: var(--blue-2); }

/* 日/周/月/年 份额卡片（选定分板块时替代四宫格） */
.gran-cards { flex: 1; display: none; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; }
.gran-cards .gcard {
    background: linear-gradient(160deg, #ffffff 0%, #f2f7ff 100%);
    border: 1px solid rgba(59, 130, 246, .16); border-radius: 12px;
    box-shadow: 0 6px 16px rgba(29, 78, 216, .07) inset, 0 2px 8px rgba(29, 78, 216, .06);
    padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.gran-cards .g-h { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.gran-cards .g-v {
    font-size: 26px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums;
    background: linear-gradient(90deg, #1d4ed8, #3b82f6);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gran-cards .g-s { font-size: 11.5px; color: var(--muted); }
.gran-cards .g-s b { color: #0f2544; font-variant-numeric: tabular-nums; }
.gran-cards .g-s b.up { color: #e02020; }
.gran-cards .g-s b.down { color: #12b76a; }
.gran-cards .g-s b.flat { color: var(--muted); }

/* ---------- 第三屏：对标分析 ---------- */
/* 日周月年控制整屏，故单独提出来放在三栏之上（与第四屏自律区间同一套样式） */
#page3 { display: flex; flex-direction: column; }
#page3 .grid.g3 { flex: 1; min-height: 0; grid-template-columns: 32% 34% 34%; }
/* 对标行业四卡：2×2 网格（四列并排时数字太挤） */
.bench-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.bench-main .bm-col { flex: 1; background: rgba(255, 255, 255, .7); border: 1px solid rgba(59, 130, 246, .14);
    border-radius: 10px; padding: 8px 10px; text-align: center; }
.bench-main .bm-diff { flex: 1.15; background: linear-gradient(160deg, #1d4ed8, #2f7ff0);
    border-radius: 10px; padding: 8px 10px; text-align: center; box-shadow: 0 6px 16px rgba(29, 78, 216, .22); }
.bench-main .bm-k { font-size: 11.5px; color: var(--muted); }
.bench-main .bm-diff .bm-k { color: rgba(255, 255, 255, .85); }
.bench-main .bm-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: #0f2544; }
.bench-main .bm-diff .bm-v { color: #fff; font-size: 24px; }
.bench-main .bm-diff .bm-v.big { font-size: 26px; }
.bench-main .bm-diff .bm-s { color: rgba(255, 255, 255, .8); }
.bench-main .bm-s { font-size: 11px; color: var(--muted); }
.bench-main .bm-v.up { color: #e02020; }
.bench-main .bm-v.down { color: #12b76a; }
.bench-main .bm-diff .bm-v.up { color: #ffd7d7; }
.bench-main .bm-diff .bm-v.down { color: #b9f6d3; }
.bench-note { margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.6; flex: 0 0 auto; }
.bench-note b { color: var(--text); font-weight: 600; }
.bench-note .dim { font-size: 10.5px; opacity: .75; }
/* 对标上市同业四卡：单排四列的小卡（主体增速 / 同业增速 / 对标增速 / 对标增量） */
.bench-peer-main { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.bench-peer-main .bp-col, .bench-peer-main .bp-diff { border-radius: 8px; padding: 5px 6px; text-align: center; }
.bench-peer-main .bp-col { background: rgba(255, 255, 255, .7); border: 1px solid rgba(59, 130, 246, .14); }
.bench-peer-main .bp-diff { background: linear-gradient(160deg, #1d4ed8, #2f7ff0); box-shadow: 0 4px 12px rgba(29, 78, 216, .18); }
.bench-peer-main .bp-k { font-size: 11px; color: var(--muted); white-space: nowrap; }
.bench-peer-main .bp-diff .bp-k { color: rgba(255, 255, 255, .85); }
.bench-peer-main .bp-v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: #0f2544; }
.bench-peer-main .bp-diff .bp-v { color: #fff; }
.bench-peer-main .bp-v.up { color: #e02020; }
.bench-peer-main .bp-v.down { color: #12b76a; }
.bench-peer-main .bp-diff .bp-v.up { color: #ffd7d7; }
.bench-peer-main .bp-diff .bp-v.down { color: #b9f6d3; }
.bench-peer-main .bp-s { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bench-peer-main .bp-diff .bp-s { color: rgba(255, 255, 255, .8); }
/* 趋势线多选 */
.bench-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    margin-bottom: 4px; font-size: 11.5px; color: var(--muted); }
.bench-checks label { display: flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.bench-checks input { accent-color: #1d4ed8; }
/* 手机端三卡改为横向紧凑排布（竖排会占掉近 260px） */
body.view-m .bench-main { gap: 6px; }
body.view-m .bench-main .bm-v { font-size: 17px; }
body.view-m .bench-main .bm-diff .bm-v.big { font-size: 20px; }
body.view-m .bench-main .bm-k,
body.view-m .bench-main .bm-s { font-size: 10.5px; }
body.view-m .bench-peer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 手机端第三屏同样单列（ID 选择器权重要用同级别规则覆盖） */
body.view-m #page3 .grid.g3 { grid-template-columns: minmax(0, 1fr); height: auto; }
body.view-m #page3 { display: block; }

/* ---------- 第四屏：自律分析 ---------- */
#page4 .grid.g3.sd-grid { grid-template-columns: 44% 32% 24%; }
/* 第四屏顶部控制条：自律区间控制整屏，故单独提出来放在三栏之上 */
#page4 { display: flex; flex-direction: column; }
#page4 .sd-grid { flex: 1; min-height: 0; }
.sd-top { flex: none; display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    padding: 8px 14px; background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(59, 130, 246, .18); border-radius: 10px;
    box-shadow: 0 2px 10px rgba(31, 73, 125, .06); }
.sd-top-t { font-size: 13px; font-weight: 600; color: #0f2544; }
/* 方案A：趋势图下方独立的差异小图（与主图分开坐标轴），固定矮高度，主图自动让出空间 */
#page4 .chart.mini { flex: 0 0 104px; min-height: 104px; margin-top: 2px; }
body.view-m #page4 .chart.mini { flex: 0 0 130px; min-height: 130px; }
#page4 h2 .dim { font-size: 10.5px; font-weight: 400; color: var(--muted); }
.sd-top-sep { font-size: 12px; color: var(--muted); }
.sd-top input[type="date"] { font-size: 12px; color: #0f2544; background: #fff;
    border: 1px solid rgba(59, 130, 246, .28); border-radius: 6px; padding: 4px 8px; }
.sd-top .tag { margin-left: auto; }
/* 冻结列：分析对象 + 组，横向滚动时不动。
   底色必须不透明（不能 inherit / 半透明），否则滚动时下层单元格文字会透出来形成"乱码" */
#tbl-sd tbody tr { background: #fff; }
#tbl-sd td.fix, #tbl-sd th.fix { position: sticky; left: 0; z-index: 2; }
#tbl-sd th.fix { z-index: 3; background-color: rgba(245, 249, 255, .98); }
#tbl-sd td.fix { background-color: #fff; }
/* 高亮行 / 行业行的冻结列用对应的「不透明」等价色（原 rgba 叠在白底上的视觉效果） */
#tbl-sd tr.hl td.fix { background-color: #dbe3f9; }
#tbl-sd tr.mkt td.fix { background-color: #f1f4fd; }
#tbl-sd td.fix::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
    background: linear-gradient(90deg, rgba(59, 130, 246, .10), transparent); }
/* 冻结列定宽：分组列的 left 偏移（78px）必须与第一列宽度一致 */
#tbl-sd th:nth-child(1), #tbl-sd td:nth-child(1) { width: 78px; min-width: 78px; }
#tbl-sd th:nth-child(2), #tbl-sd td:nth-child(2) { width: 56px; min-width: 56px; }
body.view-m .sd-top { flex-wrap: wrap; }
#tbl-sd { font-size: 10.5px; min-width: 900px; }   /* 12 列，窄了会挤，留横向滚动 */
#tbl-sd th, #tbl-sd td { padding: 3px 5px; white-space: nowrap; }
#tbl-sd td.nm { text-align: left; font-weight: 600; color: #0f2544; }
#tbl-sd tr.mkt td { background: rgba(29, 78, 216, .06); font-weight: 600; }
#tbl-sd tr.hl td { background: rgba(29, 78, 216, .16); }
.sd-ai { flex: 1; min-height: 0; font-size: 12px; line-height: 1.85; color: #24405f;
    white-space: pre-wrap; overflow-y: auto; padding-right: 4px; }
.sd-ai .ai-loading { color: var(--muted); }
body.view-m #page4 .grid.g3.sd-grid { grid-template-columns: minmax(0, 1fr); height: auto; }
body.view-m .sd-ai { max-height: none; }

/* ---------- 底部与轮播点 ---------- */
.foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); padding: 0 4px; }
.dots { display: flex; align-items: center; gap: 8px; }
.dots i { width: 22px; height: 4px; border-radius: 3px; background: rgba(59, 130, 246, .25); cursor: pointer; transition: .3s; }
.dots i.on { background: linear-gradient(90deg, var(--blue-1), var(--blue-2)); width: 34px; }
.refresh b { color: var(--blue-2); font-variant-numeric: tabular-nums; }

/* ---------- 数据管理 ---------- */
.modal { position: fixed; inset: 0; background: rgba(15, 37, 68, .35); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center; z-index: 50; }
.modal.show { display: flex; }
.modal-card { width: 700px; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 37, 68, .3); overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
    background: linear-gradient(135deg, var(--blue-1), var(--blue-2)); color: #fff; }
.modal-head h3 { font-size: 17px; }
.close { border: 0; background: transparent; color: #fff; font-size: 24px; cursor: pointer; }
.modal-body { padding: 16px 18px; font-size: 13px; max-height: 340px; overflow: auto; }
.modal-body table { width: 100%; border-collapse: collapse; }
.modal-body td, .modal-body th { padding: 8px; border-bottom: 1px solid #eef2f7; text-align: left; }
.modal-body th { color: var(--muted); font-weight: 500; }
.modal-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #f7faff; }
.hint { font-size: 11px; color: var(--muted); }
.ok { color: var(--down); font-weight: 600; } .bad { color: var(--up); font-weight: 600; }
.import-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.import-box .sd-pick { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.import-box .sd-pick input[type=date] { font-size: 12px; padding: 4px 6px; color: var(--text);
    border: 1px solid rgba(37, 99, 235, .3); border-radius: 8px; background: #fff; }
input[type=file] { font-size: 11px; color: var(--muted); width: 190px; }
input[type=file]::file-selector-button { border: 1px solid rgba(37, 99, 235, .3); background: #fff; color: var(--blue-2);
    border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; }

/* ---------- 小保 ---------- */
.agent { position: fixed; right: 24px; bottom: 24px; width: 440px; height: 580px;
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(16px); border: 1px solid var(--line);
    border-radius: 16px; box-shadow: 0 20px 50px rgba(23, 74, 158, .25); display: none; flex-direction: column; z-index: 60; overflow: hidden; }
.agent.show { display: flex; }
.agent-head { display: flex; align-items: center; padding: 12px 14px;
    background: linear-gradient(135deg, var(--blue-1), var(--blue-2)); color: #fff; }
.agent-head div { flex: 1; line-height: 1.3; }
.agent-head b { font-size: 14px; } .agent-head small { display: block; font-size: 11px; opacity: .85; }
.agent-tools { display: flex; align-items: center; gap: 6px; }
.agent-tools .icon-btn { width: 32px; height: 32px; background: rgba(255, 255, 255, .18); color: #fff; }
.agent-tools .icon-btn:hover { background: rgba(255, 255, 255, .32); }
#btn-voice { width: 40px; height: 40px; border-radius: 50%; font-size: 19px; background: rgba(255, 255, 255, .26); }
#btn-voice.rec { background: #fff; color: var(--up); animation: pulse 1s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
/* 朗读设置条：音色 + 语速，音色列表由浏览器提供的发音人自动填充 */
.agent-voice-bar { display: flex; gap: 8px; padding: 7px 12px; background: #fbfdff; border-bottom: 1px solid #eef2f7; }
.agent-voice-bar select { flex: 1; min-width: 0; height: 30px; font-size: 12px; color: #24405f;
    background: #fff; border: 1px solid #dce7f7; border-radius: 8px; padding: 0 8px; outline: none; }
.agent-voice-bar select:focus { border-color: var(--blue-3); }
.agent-body { flex: 1; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.msg { max-width: 88%; padding: 9px 13px; border-radius: 13px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.msg.bot { align-self: flex-start; background: #eef4ff; border: 1px solid rgba(59, 130, 246, .18); }
.msg.me { align-self: flex-end; background: linear-gradient(135deg, var(--blue-1), var(--blue-2)); color: #fff; }
.agent-tip { display: none; padding: 6px 14px; font-size: 12px; color: #92400e; background: #fff8e6; border-top: 1px solid #fde68a; }
.agent-tip.show { display: block; }
.agent-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #eef2f7; background: #fbfdff; }
.agent-input input { flex: 1; height: 38px; border: 1px solid #dce7f7; border-radius: 9px; padding: 0 12px; font-size: 13px; outline: none; }
.agent-input input:focus { border-color: var(--blue-3); }

/* ---------- 手机端：单列长页 ---------- */
body.view-m { height: auto; overflow: auto; }
body.view-m .screen { position: relative; width: 100%; height: auto; min-height: 100vh;
    transform: none !important; left: 0 !important; padding: 12px; gap: 12px; }
body.view-m .top { flex-direction: column; align-items: stretch; height: auto; gap: 6px; }
body.view-m .title-center { align-items: flex-start; }
body.view-m .title-center .deco { display: none; }
body.view-m .title-center h1 { font-size: 20px; letter-spacing: 2px; text-indent: 0; }
body.view-m .tb-left { font-size: 11px; }
body.view-m .controlbar { flex-wrap: wrap; height: auto; padding: 10px; gap: 8px; }
body.view-m .ctl-divider { display: none; }
body.view-m .ctl-chips { margin-left: 0; flex-wrap: wrap; }
body.view-m .ctl-group select.wide { min-width: 130px; }
body.view-m .top-right { justify-content: flex-end; }
body.view-m .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
body.view-m .kpi { height: auto; padding: 10px 12px; flex-direction: column; align-items: flex-start; }
body.view-m .kpi-main .value { font-size: 22px; }
body.view-m .pages { display: flex; flex-direction: column; gap: 12px; }
body.view-m .page { position: relative; inset: auto; opacity: 1 !important; pointer-events: auto !important; }
/* 手机端强制单列：需覆盖 #page2 .grid.g3 的 ID 级规则，故提高选择器权重 */
body.view-m .grid, body.view-m #page2 .grid.g3, body.view-m #page3 .grid.g3 {
    grid-template-columns: minmax(0, 1fr); height: auto; }
body.view-m .panel { min-width: 0; }
body.view-m .table-wrap { max-width: 100%; overflow-x: auto; }
body.view-m .panel h2 { flex-wrap: wrap; }
body.view-m .panel { height: auto; margin-bottom: 12px; }
body.view-m .chart, body.view-m .chart.map, body.view-m .chart.trend { flex: none; height: 280px; }
body.view-m .chart.map { height: 320px; }
/* 手机端面板高度 auto，flex:1 会被压成 0，故这两个格子容器改用固定高度 */
body.view-m .mini-grid { flex: none; height: 520px; }
body.view-m .gran-cards { flex: none; height: 420px; }
body.view-m .tbl { font-size: 11.5px; }
body.view-m .tbl th, body.view-m .tbl td { padding: 5px 4px; }
/* 明细表列多，手机上提示可横向滑动 */
.tbl-hint { display: none; }
body.view-m .tbl-hint { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
body.view-m .table-wrap { max-height: 460px; }

/* 手机端：底部页码区改为纵向，隐藏轮播倒计时（手机不自动轮播） */
body.view-m .foot { flex-direction: column; align-items: flex-start; gap: 6px; }
body.view-m .dots .refresh { display: none; }

/* 手机端：数据管理弹窗改为近满屏卡片 */
body.view-m .modal-card { width: 94vw; max-height: 84vh; overflow: auto; }
body.view-m .modal-body table { font-size: 11px; }
body.view-m .modal-foot { flex-wrap: wrap; gap: 8px; }

/* 手机端：小保面板改为底部抽屉，铺满宽度 */
body.view-m .agent { left: 0; right: 0; bottom: 0; width: 100%; height: 80vh;
    border-radius: 18px 18px 0 0; z-index: 70; }
body.view-m .agent-body { padding: 12px; }
body.view-m .agent-input { padding-bottom: 16px; }
body.view-m .table-wrap { max-height: 520px; }
body.view-m .dots { display: none; }
body.view-m .agent { right: 0; bottom: 0; width: 100%; height: 80vh; border-radius: 18px 18px 0 0; }
body.view-m .modal-card { width: calc(100% - 20px); }

/* 云端容器休眠唤醒提示条：默认隐藏，唤醒/失败时从顶部滑出 */
.wake-hint { position: fixed; top: 12px; left: 50%; transform: translate(-50%, -160%);
    z-index: 999; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: #1d4ed8; color: #fff; box-shadow: 0 6px 20px rgba(15, 37, 68, .22);
    opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; }
.wake-hint.show { transform: translate(-50%, 0); opacity: 1; }
.wake-hint.err { background: #b91c1c; }