/* demo 预览增量样式（叠加在素材 ui.css 之后，不改动原文件）
   新增：顶栏三入口导航 / 指标卡阈值区 / 迷你趋势柱 / 纸质日报表仿真 / 时间线 / 示意横幅 */

/* —— 顶栏导航 —— */
.nav{display:flex;align-items:center;gap:6px;margin-left:4px}
.navi{font-size:var(--fs-1);color:var(--c-dark-ink2);border:1px solid var(--c-primary-d);border-radius:var(--r-ctl);padding:4px 10px;white-space:nowrap}
.navi.on{background:var(--c-dark-ink);border-color:var(--c-dark-ink);color:var(--c-primary);font-weight:600}

/* —— 指标卡 —— */
.thr{font-size:var(--fs-1);color:var(--sub);line-height:1.75;text-align:right;white-space:nowrap}
.thr b{font-weight:600;color:var(--ink)}
.trend{display:flex;align-items:flex-end;gap:7px;height:80px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line2)}
.tb{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.tb i{display:block;width:100%;border-radius:var(--r-ctl)}
.tb span{font-size:var(--fs-1);color:var(--weak);line-height:1;font-variant-numeric:tabular-nums}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-1);color:var(--sub);margin-top:7px}
.legend em{display:inline-block;width:8px;height:8px;border-radius:var(--r-ctl);margin-right:4px;font-style:normal;vertical-align:middle}

/* —— 五段骨架 —— */
.sec{display:flex;align-items:center;gap:7px}
.seq{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:var(--r-ctl);background:var(--c-line2);color:var(--sub);font-size:var(--fs-1);font-weight:700;flex:0 0 auto}
.li{font-size:var(--fs-1);line-height:1.62;color:var(--sub);margin-top:6px}
.li b{color:var(--ink);font-weight:600}
.bigtag{display:inline-block;font-size:var(--fs-1);font-weight:600;padding:2px 7px;border-radius:var(--r-ctl);margin-right:6px}

/* —— 示意横幅 —— */
.banner{grid-column:span 12;display:flex;align-items:center;gap:10px;background:var(--amber-l);border:1px solid var(--c-line);border-radius:var(--r-ctl);padding:8px 12px;font-size:var(--fs-1);color:var(--c-amber-ink)}
.banner .tag{background:var(--c-amber-ink);color:var(--c-ink-on-dark);border-radius:var(--r-ctl);padding:2px 8px;font-size:var(--fs-1);font-weight:600;flex:0 0 auto}
.banner b{font-weight:700}

/* —— 纸质日报表仿真 —— */
.paperwrap{padding:10px 4px 2px}
.paper{position:relative;background:var(--doc-paper);border:1px solid var(--doc-line);border-radius:var(--r-ctl);padding:13px 13px 76px;transform:rotate(-1.1deg);box-shadow:none}
.phead{font-family:"KaiTi","STKaiti",serif;font-size:var(--fs-3);font-weight:700;text-align:center;letter-spacing:4px;color:var(--doc-ink)}
.pmeta{font-family:"KaiTi",serif;font-size:var(--fs-1);color:var(--doc-ink2);text-align:center;margin-top:4px}
table.ptab{width:100%;border-collapse:collapse;margin-top:9px}
table.ptab th{font-size:var(--fs-1);color:var(--doc-ink2);text-align:center;border:1px solid var(--doc-line);background:var(--doc-head);padding:3px 4px;font-weight:600}
table.ptab td{font-size:var(--fs-1);text-align:center;border:1px solid var(--doc-line);padding:4px 3px;color:var(--doc-ink)}
.hw{font-family:"KaiTi","STKaiti",serif;color:var(--c-primary);font-size:var(--fs-2)}
.psign{font-family:"KaiTi",serif;font-size:var(--fs-1);color:var(--doc-ink2);margin-top:10px;max-width:56%}
.stamp{position:absolute;right:18px;bottom:7px;width:62px;height:62px;border:2px solid rgba(192,57,43,.58);border-radius:var(--r-pill);color:rgba(192,57,43,.72);font-family:"KaiTi",serif;font-size:var(--fs-1);font-weight:700;line-height:1.15;text-align:center;display:flex;align-items:center;justify-content:center;transform:rotate(-13deg)}

/* —— 时间线 —— */
.tl{padding-left:14px}
.tl .e{position:relative;font-size:var(--fs-1);color:var(--sub);line-height:1.55;padding:6px 0;border-top:1px solid var(--line2)}
.tl .e:first-child{border-top:0}
.tl .e:before{content:"";position:absolute;left:-14px;top:12px;width:7px;height:7px;border-radius:var(--r-pill);background:var(--c-line)}
.tl .e.ok:before{background:var(--green)}
.tl .e.warn:before{background:var(--amber)}
.tl .e.bad:before{background:var(--red);box-shadow:none}
.tl .tm{display:inline-block;min-width:46px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* —— 任务清单表 —— */
table.lst th,table.lst td{text-align:left}
table.lst th:nth-child(4),table.lst td:nth-child(4),table.lst th:nth-child(5),table.lst td:nth-child(5){text-align:center}
table.lst td{padding:6px 6px}
table.lst tr.sel td{background:var(--c-red-l)}
.cat{display:inline-block;font-size:var(--fs-1);font-weight:600;padding:2px 6px;border-radius:var(--r-ctl);background:var(--c-line2);color:var(--sub);white-space:nowrap}

/* —— 图表（纯内联 SVG · 不装库 · 不联网） —— */
.kpi .spk{display:block;margin-top:7px}
.kpi .spk .spkc{display:block;width:100%}
.kpi .spk .spkc path{vector-effect:non-scaling-stroke}
.advc{display:block;margin-top:9px}
.advc .stripc{display:block;width:100%}
.advc .cnote{font-size:var(--fs-1);color:var(--weak);margin-top:3px;line-height:1.4}
.trend.linemode{display:block;height:auto;padding-top:6px}
.trend.linemode .linec{display:block;width:100%}
.cbox{display:block}
.cbox .linec,.cbox .stackc{display:block;width:100%}
.chart2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2px}
.chart2 .cwl{font-size:var(--fs-1);color:var(--weak);margin-bottom:2px}
.dring{display:inline-flex;align-items:center;margin-left:auto}
.dring svg{display:block}
.dring+.blk{margin-left:6px}
.dcell{display:inline-flex;align-items:center;gap:6px}
.dcell em{font-style:normal;font-weight:600;font-size:var(--fs-1);font-variant-numeric:tabular-nums}
.dna{color:var(--weak)}
.banner.ok{background:var(--c-green-l);border-color:var(--c-line);color:var(--c-green)}
.banner.ok .tag{background:var(--c-green)}