/* ═══ Agranergy 工资条系统 — 视觉规范取自雅观 VI ═══ */
:root{
  --p:#00A5AD; --p-dk:#00818A; --p-lt:#E6F5F6; --p-mid:#7FD2D6;
  --blue:#0069B4; --sky:#00AAEB; --orange:#F08C00; --green:#6EB92D;
  --ink:#17262B; --ink-2:#3B4C52; --mute:#6E8085; --faint:#9AACB1;
  --line:#E3EBEC; --line-2:#EEF3F4; --bg:#F4F7F8; --card:#FFFFFF;
  --danger:#D9453D; --danger-bg:#FDF0EF; --warn-bg:#FFF6E6; --ok-bg:#E9F7EF; --ok:#1E8E4E;
  --r:10px; --r-sm:7px;
  --sh:0 1px 2px rgba(23,38,43,.05),0 6px 20px -8px rgba(23,38,43,.10);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:14px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--p-dk);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.35;color:var(--ink)}
input,select,textarea,button{font-family:inherit;font-size:inherit}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── 布局 ── */
.app{display:flex;min-height:100vh}
.side{width:232px;flex:0 0 232px;background:#0E2B2E;color:#CFE3E4;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.side-brand img{width:164px;max-width:100%;height:auto;display:block}
.side-brand .sub{font-size:11px;letter-spacing:.16em;color:#6E9497;margin-top:10px}
.side-nav{padding:12px 10px;flex:1;overflow-y:auto}
.side-nav .grp{font-size:10px;letter-spacing:.14em;color:#5E8286;padding:14px 12px 6px;font-weight:600}
.side-nav a{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:var(--r-sm);color:#B7D2D4;font-size:13.5px;margin-bottom:1px}
.side-nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.side-nav a.is-active{background:var(--p);color:#fff;font-weight:600}
.side-nav svg{width:16px;height:16px;flex:0 0 16px;opacity:.85}
.side-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#7FA0A3}
.side-foot a{color:#9EC4C6}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{background:#fff;border-bottom:1px solid var(--line);padding:0 28px;height:58px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:30}
.top h1{font-size:16px;font-weight:700}
.top .spacer{flex:1}
.top .who{font-size:13px;color:var(--mute)}
.content{padding:24px 28px 56px;max-width:1360px;width:100%}

/* ── 测试模式横幅 ── */
.testbar{background:linear-gradient(90deg,#FFF3DC,#FFF9EE);border-bottom:1px solid #F2D9A8;color:#8A5A00;padding:9px 28px;font-size:13px;display:flex;align-items:center;gap:10px}
.testbar strong{color:#7A4E00}
.testbar .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:0 0 7px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.livebar{background:#FDF0EF;border-bottom:1px solid #F3C9C6;color:#9E2B25;padding:9px 28px;font-size:13px;display:flex;align-items:center;gap:10px}
.livebar .dot{width:7px;height:7px;border-radius:50%;background:var(--danger);flex:0 0 7px}

/* ── 卡片 ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:20px}
.card-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-h h2{font-size:15px}
.card-h .spacer{flex:1}
.card-h .hint{font-size:12.5px;color:var(--mute);font-weight:400}
.card-b{padding:20px}
.card-b.flush{padding:0}

/* ── 统计 ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh)}
.stat .k{font-size:11.5px;letter-spacing:.06em;color:var(--mute)}
.stat .v{font-size:26px;font-weight:700;line-height:1.25;margin-top:4px;color:var(--ink)}
.stat .v small{font-size:14px;font-weight:600;color:var(--mute)}
.stat.accent .v{color:var(--p-dk)}

/* ── 表格 ── */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;font-weight:600;font-size:12px;letter-spacing:.03em;color:var(--mute);background:#FAFCFC;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tbody tr:hover{background:#FBFDFD}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl tfoot td{padding:12px 14px;background:#F7FAFA;font-weight:700;border-top:2px solid var(--line)}
.tbl .nm{font-weight:600;color:var(--ink)}
.tbl .sub{font-size:12px;color:var(--mute)}
.empty{padding:44px 20px;text-align:center;color:var(--mute)}
.empty .big{font-size:15px;color:var(--ink-2);font-weight:600;margin-bottom:6px}

/* ── 按钮 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 15px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:13.5px;font-weight:600;cursor:pointer;transition:.14s;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:#C9D8DA;background:#FAFCFC;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--p);border-color:var(--p);color:#fff}
.btn-p:hover{background:var(--p-dk);border-color:var(--p-dk);color:#fff}
.btn-d{background:#fff;border-color:#EDC7C4;color:var(--danger)}
.btn-d:hover{background:var(--danger-bg);border-color:#E3AEAA}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-lg{padding:11px 22px;font-size:15px}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.inline-form{display:inline}

/* ── 徽标 ── */
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;line-height:1.7;white-space:nowrap}
.tag-ok{background:var(--ok-bg);color:var(--ok)}
.tag-wait{background:#F1F5F6;color:var(--mute)}
.tag-err{background:var(--danger-bg);color:var(--danger)}
.tag-lock{background:#EEF3FB;color:var(--blue)}
.tag-p{background:var(--p-lt);color:var(--p-dk)}
.tag-warn{background:var(--warn-bg);color:#8A5A00}

/* ── 表单 ── */
.field{margin-bottom:15px}
.field > label,.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field .help{font-size:12px;color:var(--mute);margin-top:5px;line-height:1.6}
.inp,select.inp,textarea.inp{width:100%;padding:8px 11px;border:1px solid #D6E1E3;border-radius:var(--r-sm);background:#fff;color:var(--ink);transition:.14s}
.inp:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(0,165,173,.14)}
.inp:disabled,.inp[readonly]{background:#F5F8F8;color:var(--ink-2)}
textarea.inp{min-height:76px;resize:vertical;line-height:1.65}
.inp.num{text-align:right;font-variant-numeric:tabular-nums}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer;user-select:none}
.chk input{width:15px;height:15px;accent-color:var(--p);cursor:pointer}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filters .field{margin:0}
.filters .inp{min-width:150px;width:auto}

/* ── 提示 ── */
.msg{padding:11px 15px;border-radius:var(--r-sm);margin-bottom:12px;font-size:13.5px;line-height:1.65;display:flex;gap:9px;align-items:flex-start}
.msg-ok{background:var(--ok-bg);color:#146638;border:1px solid #BFE6CE}
.msg-err{background:var(--danger-bg);color:#98221C;border:1px solid #F0C8C5}
.msg-warn{background:var(--warn-bg);color:#8A5A00;border:1px solid #F2DCB0}
.msg-info{background:var(--p-lt);color:var(--p-dk);border:1px solid #BEE6E8}
.msg b{font-weight:700}

/* ── 工资录入表单 ── */
.pay-sec{border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.pay-sec > header{background:#F8FBFB;padding:11px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.pay-sec > header .bar{width:3px;height:15px;border-radius:2px;background:var(--p)}
.pay-sec > header h3{font-size:13.5px}
.pay-sec > header .d{font-size:12px;color:var(--mute);font-weight:400}
.pay-sec .body{padding:16px}
.pay-sec[data-accent="orange"] > header .bar{background:var(--orange)}
.pay-sec[data-accent="blue"] > header .bar{background:var(--blue)}

.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:13px}
.fld{position:relative}
.fld label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:4px;min-height:18px}
.fld .inp{padding-right:11px}
.fld.calc .inp{background:#F3F9F9;border-color:#CFE4E5;font-weight:700;color:var(--p-dk)}
.fld.calc.unlocked .inp{background:#FFF9EC;border-color:#EBCE97;color:#8A5A00}
.lockbtn{border:none;background:none;padding:2px;cursor:pointer;line-height:0;border-radius:4px;color:var(--faint)}
.lockbtn:hover{background:var(--line-2);color:var(--ink-2)}
.lockbtn svg{width:13px;height:13px}
.fld.calc.unlocked .lockbtn{color:var(--orange)}
.fml{font-size:11px;color:var(--faint);margin-top:3px;line-height:1.5}
.sticky-save{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:13px 20px;display:flex;gap:10px;align-items:center;z-index:20;margin:0 -20px -20px;border-radius:0 0 var(--r) var(--r)}
.sticky-save .net{margin-left:auto;text-align:right}
.sticky-save .net .k{font-size:11px;color:var(--mute)}
.sticky-save .net .v{font-size:21px;font-weight:700;color:var(--p-dk);font-variant-numeric:tabular-nums;line-height:1.2}

/* ── 预览 ── */
.pv-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.seg{display:inline-flex;background:#EDF2F3;border-radius:var(--r-sm);padding:3px}
.seg button{border:none;background:none;padding:6px 15px;border-radius:5px;font-size:13px;font-weight:600;color:var(--mute);cursor:pointer}
.seg button.on{background:#fff;color:var(--p-dk);box-shadow:0 1px 3px rgba(0,0,0,.09)}
.pv-stage{background:#E7EEEF;border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;justify-content:center}
.pv-frame{background:#fff;border-radius:var(--r-sm);box-shadow:0 6px 26px -8px rgba(23,38,43,.26);width:100%;max-width:680px;transition:max-width .25s}
.pv-frame.mobile{max-width:390px}
.pv-frame iframe{width:100%;height:1180px;border:none;border-radius:var(--r-sm);display:block}

/* ── 登录 ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1000px 600px at 12% -10%,#DCF0F1 0%,transparent 55%),radial-gradient(900px 520px at 105% 108%,#E4F1FA 0%,transparent 55%),var(--bg)}
.login{width:100%;max-width:420px}
.login .brand{text-align:center;margin-bottom:30px}
.login .brand img{width:268px;max-width:76%;height:auto;margin:0 auto;display:block}
.login .brand .t{font-size:13px;color:var(--mute);margin-top:16px;letter-spacing:.18em}
.login .box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 10px 40px -14px rgba(23,38,43,.20)}
.login h1{font-size:18px;margin-bottom:4px}
.login .sub{font-size:13px;color:var(--mute);margin-bottom:20px}
.login .btn{width:100%;margin-top:6px}
.login-foot{text-align:center;font-size:12px;color:var(--faint);margin-top:20px;line-height:1.8}

/* ── 杂项 ── */
.pager{display:flex;gap:6px;padding:14px 20px;align-items:center;font-size:13px;color:var(--mute);flex-wrap:wrap}
.pager a,.pager span.cur{padding:5px 11px;border-radius:6px;border:1px solid var(--line);background:#fff}
.pager span.cur{background:var(--p);border-color:var(--p);color:#fff;font-weight:600}
.mono{font-family:var(--mono);font-size:12px}
pre.trace{background:#0E2B2E;color:#B7D2D4;padding:15px;border-radius:var(--r-sm);overflow:auto;font-size:11.5px;line-height:1.65;max-height:440px;margin:0}
.dl{display:grid;grid-template-columns:130px 1fr;gap:9px 18px;font-size:13.5px}
.dl dt{color:var(--mute);font-size:12.5px}
.dl dd{margin:0;word-break:break-all}
.sep{height:1px;background:var(--line);margin:18px 0}
.muted{color:var(--mute)}
.small{font-size:12.5px}
.right{text-align:right}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
.warnbox{background:var(--warn-bg);border:1px solid #F2DCB0;border-radius:var(--r-sm);padding:11px 14px;font-size:12.5px;color:#8A5A00;line-height:1.7;margin-top:12px}
.warnbox ul{margin:5px 0 0;padding-left:18px}

@media(max-width:860px){
  .app{flex-direction:column}
  .side{width:100%;flex:none;height:auto;position:static;flex-direction:column}
  .side-nav{display:flex;flex-wrap:wrap;gap:4px;padding:10px}
  .side-nav .grp{display:none}
  .side-nav a{padding:7px 11px;font-size:13px}
  .content,.top,.testbar,.livebar{padding-left:16px;padding-right:16px}
}
@media print{
  .side,.top,.testbar,.livebar,.btn-row,.sticky-save,.pv-bar{display:none !important}
  .content{padding:0}
  .card{box-shadow:none;border:none}
}

/* ── 登录验证码 ── */
.cap-row{display:flex;gap:10px;align-items:stretch}
.cap-row .inp{flex:1;min-width:0;letter-spacing:.32em;font-family:var(--mono);text-transform:uppercase}
.cap-img{flex:0 0 auto;padding:0;border:1px solid #D6E1E3;border-radius:var(--r-sm);background:#F5FAFA;cursor:pointer;line-height:0;overflow:hidden;transition:.14s}
.cap-img:hover{border-color:var(--p)}
.cap-img img{display:block;width:132px;height:44px}
.cap-math{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:132px;height:44px;border:1px solid #D6E1E3;border-radius:var(--r-sm);background:#F5FAFA;font-family:var(--mono);font-size:17px;font-weight:700;color:var(--p-dk);letter-spacing:.06em}

/* ── 批量发送进度 ── */
.prog{height:9px;border-radius:99px;background:#E6EEEF;overflow:hidden;margin:6px 0 10px}
.prog-bar{height:100%;background:linear-gradient(90deg,var(--p),var(--sky));border-radius:99px;transition:width .4s ease}
.prog-txt{font-size:13.5px;color:var(--ink-2)}