/* HR 智能工作台 · 传统页面浅色系
样式与 prototype3.html 同源，保证原型与实现视觉一致。 */
*{margin:0;padding:0;box-sizing:border-box}
:root{
--pg:#f0f2f5; --bx:#ffffff;
--bd:#ccd4dc; --bd2:#e4e9ee;
--hd:#eef3f8; --hd2:#f7f9fb;
--pri:#1a5fb4; --pri-h:#15508f; --pri-l:#e9f1fa; --pri-b:#aac8e8;
--ok:#1a7f37; --ok-l:#eaf6ed; --ok-b:#a9d6b6;
--er:#c4262e; --er-l:#fdeceb; --er-b:#efb5b2;
--wn:#8a6100; --wn-l:#fff8e2; --wn-b:#e6cd8c;
--t1:#23292f; --t2:#55606b; --t3:#8b949e;
}
body{font-family:"Microsoft YaHei","Segoe UI",-apple-system,sans-serif;
background:var(--pg);color:var(--t1);font-size:13px;line-height:1.6}
a{color:var(--pri);text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}
a.dis{color:var(--t3);cursor:default}
a.dis:hover{text-decoration:none}
.hide{display:none!important}
.mono{font-family:Consolas,"Courier New",monospace}
.mut{color:var(--t3)}
.sec{color:var(--t2)}
.rt{text-align:right}.ct{text-align:center}
.b{font-weight:600}
.f11{font-size:11px}.f12{font-size:12px}.f15{font-size:15px}.f17{font-size:17px}
.fx{display:flex;align-items:center}
.fxb{display:flex;align-items:center;justify-content:space-between}
.fw{flex-wrap:wrap}
.g6{gap:6px}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}
.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}.mt20{margin-top:20px}
.mb6{margin-bottom:6px}.mb10{margin-bottom:10px}.mb14{margin-bottom:14px}
.ovx{overflow-x:auto}
.gr{flex:1;min-width:0}
/* ---------- 传统方形按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:28px;
padding:0 13px;border:1px solid var(--bd);border-radius:2px;
background:linear-gradient(180deg,#fff 0%,#f2f5f8 100%);
color:var(--t1);font-size:13px;font-family:inherit;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--pri);color:var(--pri);background:linear-gradient(180deg,#fff,#eaf1f9)}
.btn:active{background:#e4ecf5}
.btn-p{background:linear-gradient(180deg,#2a72c8 0%,var(--pri) 100%);
border-color:#154e94;color:#fff}
.btn-p:hover{background:linear-gradient(180deg,#3480d6,var(--pri-h));
border-color:#123f77;color:#fff}
.btn-lg{height:34px;padding:0 22px;font-size:14px}
.btn-sm{height:23px;padding:0 8px;font-size:12px}
.btn:disabled{background:#f2f3f5;border-color:var(--bd2);color:#adb5bd;cursor:not-allowed}
.btn:disabled:hover{color:#adb5bd;border-color:var(--bd2);background:#f2f3f5}
/* ---------- 标签 ---------- */
.tg{display:inline-block;padding:0 6px;border:1px solid;border-radius:2px;
font-size:11px;line-height:17px;white-space:nowrap}
.tg-ok{background:var(--ok-l);color:var(--ok);border-color:var(--ok-b)}
.tg-er{background:var(--er-l);color:var(--er);border-color:var(--er-b)}
.tg-wn{background:var(--wn-l);color:var(--wn);border-color:var(--wn-b)}
.tg-p{background:var(--pri-l);color:var(--pri);border-color:var(--pri-b)}
.tg-g{background:#f2f4f6;color:var(--t2);border-color:var(--bd)}
/* ---------- 面板 ---------- */
.pnl{background:var(--bx);border:1px solid var(--bd);margin-bottom:14px}
.pnl-h{padding:8px 14px;background:linear-gradient(180deg,var(--hd) 0%,#e4ebf3 100%);
border-bottom:1px solid var(--bd);display:flex;align-items:center;
justify-content:space-between;gap:12px}
.pnl-h h3{font-size:13px;font-weight:600;color:#1b3a5c}
.pnl-b{padding:14px}
.pnl-b.tt{padding:0}
.pnl-f{padding:10px 14px;background:var(--hd2);border-top:1px solid var(--bd2);
display:flex;justify-content:flex-end;gap:8px}
fieldset{border:1px solid var(--bd2);padding:12px 14px;margin-bottom:12px}
legend{padding:0 6px;font-size:12px;font-weight:600;color:var(--t2)}
/* ---------- 提示条 ---------- */
.al{display:flex;gap:8px;padding:8px 12px;border:1px solid;font-size:12px;
margin-bottom:10px;align-items:flex-start;line-height:1.65}
.al i{font-style:normal;flex-shrink:0}
.al-p{background:var(--pri-l);border-color:var(--pri-b);color:#123f77}
.al-ok{background:var(--ok-l);border-color:var(--ok-b);color:#12591f}
.al-wn{background:var(--wn-l);border-color:var(--wn-b);color:#6b4c00}
.al-er{background:var(--er-l);border-color:var(--er-b);color:#8f1d24}
.al .at{font-weight:600}
.al-bd{flex:1;min-width:0}
/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:12px}
th{background:linear-gradient(180deg,var(--hd) 0%,#e6edf4 100%);
padding:7px 10px;text-align:left;font-weight:600;color:#1b3a5c;
border:1px solid var(--bd);white-space:nowrap}
td{padding:6px 10px;border:1px solid var(--bd2)}
tbody tr:nth-child(even){background:#fafbfc}
tbody tr:hover{background:var(--pri-l)}
tr.r-er{background:var(--er-l)!important}
tr.r-er:hover{background:#fbdedc!important}
tr.r-wn{background:var(--wn-l)!important}
tr.r-wn:hover{background:#fdf2d4!important}
tr.r-ok{background:var(--ok-l)!important}
/* ---------- 键值表 ---------- */
.kv{border:1px solid var(--bd2);border-collapse:collapse;width:100%;font-size:12px}
.kv td{border:1px solid var(--bd2);padding:6px 10px}
.kv td:first-child{background:var(--hd2);color:var(--t2);width:140px;white-space:nowrap}
/* ---------- 横向柱状图（部门成本占比） ---------- */
.chart{padding:6px 0}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.bar-lb{width:120px;text-align:right;font-size:12px;color:var(--t2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.bar-track{flex:1;background:#eef1f4;border:1px solid var(--bd2);border-radius:2px;
height:18px;overflow:hidden;min-width:80px}
.bar-fill{height:100%;background:linear-gradient(180deg,#4a90d9 0%,var(--pri) 100%);
display:flex;align-items:center;justify-content:flex-end;padding-right:6px;
color:#fff;font-size:11px;white-space:nowrap;line-height:1}
.bar-val{width:120px;font-size:12px;color:var(--t1);white-space:nowrap;flex-shrink:0}