/* components.css —— 通用构件：页面头/卡片/KPI/图表容器/表格/标签/进度条/行内按钮/卡片集/表单/按钮/时间线/提示/链接/Tab/看板/弹窗
   拆自 legacy/index.single.html.bak <style> 段，规则原样保留，零行为改动 */
/* ============ 页面构件 ============ */
.pg-head{margin-bottom:16px}
.pg-head h2{font-size:19px;color:#111}
.pg-head p{font-size:12.5px;color:#666;margin-top:4px}
.l3tags{margin-top:8px;font-size:12px;color:#666;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.l3tags .l3d{color:#999}
.pg{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.blk{flex:1 1 100%;min-width:0}
.blk.half{flex:1 1 460px}
.blk.s3{flex:1 1 300px}
.card{background:#fff;border:1px solid #E5E9E7;border-radius:12px;box-shadow:0 1px 4px rgba(17,17,17,.04);padding:16px;height:100%}
.card>h3,.ch-t{font-size:14px;color:#111;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ch-t .sw{margin-left:auto;display:flex;gap:4px}
.ch-t .sw button{border:1px solid #D9E2DE;background:#fff;color:#666;font-size:11px;padding:2px 9px;border-radius:10px;cursor:pointer}
.ch-t .sw button.on{background:#0B8A55;border-color:#0B8A55;color:#fff}
.kpis{flex:1 1 100%;display:flex;gap:14px;flex-wrap:wrap}
.kpi{flex:1 1 190px;background:#fff;border:1px solid #E5E9E7;border-radius:12px;box-shadow:0 1px 4px rgba(17,17,17,.04);padding:14px 16px;position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#0B8A55;border-radius:3px 0 0 3px}
.kpi .kl{font-size:12.5px;color:#666}
.kpi .kv{font-size:24px;font-weight:800;color:#111;margin:6px 0 2px}
.kpi .kv small{font-size:13px;font-weight:500;color:#666;margin-left:3px}
.kpi .ks{font-size:11.5px;color:#0B8A55}
.kpi .ks.down{color:#E05A5A}
.chart{width:100%;height:300px}
.chart.g{height:230px}
.chart.tall{height:360px}
.tb-wrap{overflow-x:auto}
table.tb{width:100%;border-collapse:collapse}
.tb th{background:#F2FAF6;color:#333;font-weight:600;font-size:12.5px}
.tb th,.tb td{padding:8px 10px;border-bottom:1px solid #EEF2F0;text-align:left;font-size:13px;white-space:nowrap;color:#333}
.tb tr:hover td{background:#F7FBF9}
.tag{display:inline-block;padding:1px 9px;border-radius:10px;font-size:12px;line-height:1.7}
.tag.g{background:#E6F7F0;color:#0B8A55}
.tag.b{background:#E8F1FD;color:#2B6CB0}
.tag.o{background:#FDF3E3;color:#C07A12}
.tag.r{background:#FDEAEA;color:#C93A3A}
.tag.gr{background:#F0F2F1;color:#666}
.pbar{width:110px;height:8px;background:#EEF2F0;border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle}
.pbar i{display:block;height:100%;background:#0B8A55;border-radius:4px}
.pbar+i{font-size:12px;color:#666;margin-left:6px}
.tact{border:1px solid #D9E2DE;background:#fff;color:#0B8A55;font-size:11.5px;padding:2px 10px;border-radius:8px;cursor:pointer;margin:1px 4px 1px 0}
.tact:hover{background:#E6F7F0;border-color:#0B8A55}
.cds{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cd{border:1px solid #E5E9E7;border-radius:10px;padding:12px 14px;background:#FBFCFC}
.cd .cd-h{font-weight:700;color:#111;font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cd .cd-h .tag{margin-left:auto}
.cd .cd-l{font-size:12.5px;color:#666;line-height:1.8}
.cd.lk:hover{border-color:#0B8A55;background:#F2FAF6}
.fm-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.fm-f{display:flex;flex-direction:column;gap:6px;min-width:170px;flex:1}
.fm-f label{font-size:12.5px;color:#333;font-weight:600}
.fm-f input,.fm-f select{height:36px;border:1px solid #D9E2DE;border-radius:8px;padding:0 10px;font-size:13px;color:#111;background:#FBFCFC;outline:none}
.fm-f input:focus,.fm-f select:focus{border-color:#0B8A55}
.fm-f input[type=range]{padding:0}
.fm-btns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn{height:36px;padding:0 18px;border:none;border-radius:8px;background:#0B8A55;color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.btn:hover{background:#0A7A4B}
.btn.ghost{background:#fff;color:#0B8A55;border:1px solid #0B8A55}
.btn.ghost:hover{background:#E6F7F0}
.tl{position:relative;padding-left:18px}
.tl:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:#DCE7E2}
.tl-i{position:relative;padding:0 0 16px 14px}
.tl-i:before{content:"";position:absolute;left:-17px;top:5px;width:8px;height:8px;border-radius:50%;background:#0B8A55;box-shadow:0 0 0 3px #E6F7F0}
.tl-i .tt{font-size:12px;color:#999}
.tl-i .tx{font-size:13px;color:#333;margin-top:2px;line-height:1.6}
.nt{background:#F2FAF6;border:1px solid #CBE7DA;border-radius:10px;padding:12px 14px;font-size:12.5px;color:#0B5C3B;line-height:1.9}
.nt b{color:#0B8A55}
.lks{display:flex;flex-direction:column;gap:8px}
.lks a{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.tabs-h{display:flex;gap:4px;border-bottom:1px solid #E5E9E7;margin-bottom:14px;flex-wrap:wrap}
.tabs-h button{border:none;background:none;padding:8px 16px;font-size:13px;color:#666;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs-h button.on{color:#0B8A55;font-weight:700;border-bottom-color:#0B8A55}
.kb{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kb-col{background:#F7F9F8;border:1px solid #E5E9E7;border-radius:10px;padding:10px}
.kb-col .kb-h{font-size:13px;font-weight:700;color:#111;padding:2px 4px 8px;display:flex;align-items:center;gap:6px}
.kb-col .kb-h .cnt{margin-left:auto;font-size:11px;background:#fff;border:1px solid #E5E9E7;border-radius:9px;padding:0 7px;color:#666}
.kb-i{background:#fff;border:1px solid #E5E9E7;border-radius:8px;padding:8px 10px;font-size:12.5px;color:#333;margin-bottom:8px;line-height:1.6}
.kb-i small{display:block;color:#999;margin:3px 0 5px}
/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(17,24,20,.28);display:flex;align-items:center;justify-content:center;z-index:200}
.modal{background:#fff;border-radius:14px;width:560px;max-width:92vw;max-height:82vh;overflow-y:auto;padding:24px 26px;border:1px solid #E5E9E7;box-shadow:0 18px 50px rgba(17,17,17,.2)}
.modal h3{color:#111;font-size:16px;margin-bottom:12px}
.modal p,.modal li{font-size:13px;color:#333;line-height:1.9}
.modal ul{padding-left:18px;margin:8px 0}
.modal .m-close{margin-top:16px;text-align:right}