:root{
  --ink:#1a1a1a; --ink-2:#333; --ink-3:#666; --ink-4:#999;
  --line:#e5e0d5; --line-strong:#c8c0ad; --paper:#faf6ec; --card:#fffdf7;
  --row-alt:#fdf9ee; --accent:#c0392b; --accent-light:#fbe9e3;
  --gold:#b8860b; --jade:#2d5a3d; --blue:#1a4a7a;
  --ok-bg:#e9f4ef; --ok-bd:#4caf7d; --ok-c:#14532d;
  --warn-bg:#fef7e6; --warn-c:#8a6d0b;
  --miss-bg:#fdeaea; --miss-bd:#e57373; --miss-c:#8b1a1a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Noto Serif SC',ui-serif,serif;background:var(--paper);color:var(--ink);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
input,select,textarea,button{font-family:inherit}
a{color:var(--accent);text-decoration:none}
.mono{font-family:'Inter',ui-monospace,monospace}

/* ---------- 登录 ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line-strong);border-radius:6px;padding:40px 34px;box-shadow:0 20px 50px rgba(0,0,0,.06)}
.login-card h1{font-size:23px;letter-spacing:.14em;text-align:center;margin-bottom:4px}
.login-card .sub{text-align:center;color:var(--ink-3);font-size:12px;letter-spacing:.1em;margin-bottom:28px}
.field-group{margin-bottom:16px}
.field-group label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px}
.inp{width:100%;background:#fff;border:1px solid var(--line-strong);border-radius:3px;padding:10px 12px;font-size:15px;color:var(--ink);outline:none}
.inp:focus{border-color:var(--accent)}
textarea.inp{resize:vertical;min-height:64px;font-size:14px}
.err{color:var(--accent);font-size:12.5px;margin-top:8px;min-height:18px}

/* ---------- 结构 ---------- */
.topbar{background:var(--card);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:20}
.topbar-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:0 20px;height:58px}
.brand{font-size:17px;font-weight:700;letter-spacing:.12em;white-space:nowrap}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav button{background:none;border:none;padding:8px 14px;font-size:14px;color:var(--ink-3);cursor:pointer;border-radius:3px;letter-spacing:.04em}
.nav button:hover{background:var(--row-alt);color:var(--ink)}
.nav button.active{color:var(--accent);font-weight:600;background:var(--accent-light)}
.userbox{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-3);white-space:nowrap}
.userbox .uname{color:var(--ink);font-weight:600}
.role-tag{font-size:11px;border:1px solid var(--line-strong);border-radius:2px;padding:1px 7px;color:var(--ink-3)}
.container{max-width:1080px;margin:0 auto;padding:26px 20px 80px}

/* ---------- 按钮 ---------- */
.btn{font-size:14px;letter-spacing:.04em;padding:9px 20px;border-radius:3px;cursor:pointer;border:1px solid var(--line-strong);background:#fff;color:var(--ink-2);transition:opacity .15s}
.btn:hover{opacity:.85}
.btn.solid{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.jade{background:var(--jade);color:#fff;border-color:var(--jade)}
.btn.sm{padding:5px 12px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:default}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ---------- 卡片/版块 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:22px 24px;margin-bottom:20px}
.page-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.page-head h2{font-size:20px;letter-spacing:.04em}
.page-head .desc{color:var(--ink-3);font-size:13px}
.spacer{flex:1}
.section-head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:14px}
.section-head h3{font-size:15px}
.section-head .part{font-size:11px;color:var(--accent);letter-spacing:.1em;font-weight:600}

/* ---------- 表格 ---------- */
table.grid{width:100%;border-collapse:collapse}
table.grid th,table.grid td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:middle}
table.grid th{background:var(--row-alt);font-weight:600;font-size:13px;color:var(--ink-2)}
table.grid tbody tr:nth-child(even){background:var(--row-alt)}
table.grid td.num,table.grid th.num{text-align:right;font-family:'Inter',monospace}
.muted{color:var(--ink-4)}

/* ---------- 状态标签 ---------- */
.badge{display:inline-block;font-size:12px;padding:2px 10px;border-radius:10px;border:1px solid;white-space:nowrap}
.badge.draft{background:#f2f1ec;border-color:var(--line-strong);color:var(--ink-3)}
.badge.submitted{background:var(--warn-bg);border-color:#e6cf8a;color:var(--warn-c)}
.badge.approved{background:#eaf1fb;border-color:#a9c4ea;color:var(--blue)}
.badge.rejected{background:var(--miss-bg);border-color:var(--miss-bd);color:var(--miss-c)}
.badge.paid{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-c)}
.badge.none{background:#f2f1ec;border-color:var(--line-strong);color:var(--ink-4)}

/* ---------- 表单网格 ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px 20px}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:12.5px;color:var(--ink-2)}
.fg .hint{font-size:11px;color:var(--ink-4)}
.fg input{background:#fff;border:1px solid var(--line-strong);border-radius:3px;padding:8px 10px;font-size:15px;outline:none;font-family:'Inter',monospace}
.fg input:focus{border-color:var(--accent)}

/* ---------- 工资条 ---------- */
.payslip{border:2px solid var(--ink);background:#fff;border-radius:4px;padding:22px 26px}
.payslip h3{font-size:14px;letter-spacing:.12em;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pay-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;gap:14px}
.pay-row+.pay-row{border-top:1px dashed var(--line)}
.pay-row .k{color:var(--ink-2)}
.pay-row .k .d{display:block;font-size:11px;color:var(--ink-4);margin-top:2px}
.pay-row .v{font-family:'Inter',monospace;font-size:16px;font-weight:600;white-space:nowrap}
.pay-row .v.neg{color:var(--accent)}
.pay-total{margin-top:12px;padding-top:14px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline}
.pay-total .k{font-size:15px;letter-spacing:.08em;font-weight:600}
.pay-total .v{font-family:'Inter',monospace;font-size:28px;font-weight:700;color:var(--accent)}

/* ---------- 附件 ---------- */
.att-group{margin-top:14px}
.att-group .att-title{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.att-group .hint{font-size:11px;color:var(--ink-4);margin-bottom:8px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px}
.thumb{position:relative;width:96px;height:96px;border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;background:#fff}
.thumb img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.thumb .rm{position:absolute;top:0;right:0;width:20px;height:20px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:20px;text-align:center;cursor:pointer;border-bottom-left-radius:4px}
.thumb.add{display:flex;align-items:center;justify-content:center;border-style:dashed;color:var(--ink-4);cursor:pointer;font-size:12px;text-align:center;flex-direction:column;gap:2px}
.thumb.add:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- 其它 ---------- */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.toolbar select,.toolbar input{background:#fff;border:1px solid var(--line-strong);border-radius:3px;padding:8px 10px;font-size:14px;outline:none}
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.stat{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px 18px}
.stat .n{font-family:'Inter',monospace;font-size:24px;font-weight:700}
.stat .l{font-size:12px;color:var(--ink-3);margin-top:2px}
.empty{text-align:center;color:var(--ink-4);padding:44px;border:1px dashed var(--line-strong);border-radius:6px;background:var(--row-alt)}
.list-clickable{cursor:pointer}
.list-clickable:hover td{background:var(--accent-light)!important}

/* ---------- 我的绩效：大按钮 + 历史行 ---------- */
.big-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:16px;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:24px;cursor:pointer;margin-bottom:8px;box-shadow:0 10px 26px rgba(192,57,43,.18);transition:opacity .15s,transform .1s}
.big-cta:hover{opacity:.93}
.big-cta:active{transform:scale(.995)}
.big-cta .ct-t{font-size:20px;font-weight:700;letter-spacing:.08em}
.big-cta .ct-s{font-size:14px;opacity:.9;border-left:1px solid rgba(255,255,255,.45);padding-left:16px}
.sec-other{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:2px 0 22px;font-size:12.5px;color:var(--ink-3)}
.sec-other select{background:#fff;border:1px solid var(--line-strong);border-radius:3px;padding:6px 8px;font-size:13px;outline:none}
.year-group{margin-top:22px}
.year-label{font-size:13px;color:var(--ink-3);font-weight:600;letter-spacing:.12em;margin:0 2px 10px;padding-bottom:7px;border-bottom:1px solid var(--ink)}
.hist-row{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:15px 20px;margin-bottom:9px;cursor:pointer;transition:border-color .15s,background .15s}
.hist-row:hover{border-color:var(--line-strong);background:var(--row-alt)}
.hist-row .hr-month{font-size:17px;font-weight:700;min-width:56px}
.hist-row .hr-mid{flex:1;min-width:0}
.hist-row .hr-tmpl{font-size:13px;color:var(--ink-2)}
.hist-row .hr-note{font-size:11.5px;color:var(--ink-4);margin-top:2px}
.hist-row .hr-amt{font-family:'Inter',monospace;font-size:19px;font-weight:700;color:var(--accent);white-space:nowrap}
.hist-row .hr-arrow{color:var(--ink-4);font-size:18px;line-height:1}
@media(max-width:560px){.hist-row{gap:12px;padding:13px 14px}.hist-row .hr-month{min-width:44px;font-size:15px}.hist-row .hr-amt{font-size:16px}}

/* ---------- 弹窗 ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow:auto}
.modal{background:var(--card);border-radius:6px;max-width:560px;width:100%;padding:26px 28px;box-shadow:0 30px 70px rgba(0,0,0,.2)}
.modal h3{font-size:17px;margin-bottom:16px;letter-spacing:.04em}
.modal .close-x{float:right;cursor:pointer;color:var(--ink-4);font-size:20px;line-height:1}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:99;cursor:zoom-out;padding:24px}
.lightbox img{max-width:100%;max-height:100%}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:11px 22px;border-radius:4px;font-size:13.5px;z-index:120;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transition:opacity .2s}
.toast.show{opacity:1}
.notice{background:var(--warn-bg);border:1px solid #e6cf8a;color:var(--warn-c);border-radius:4px;padding:10px 14px;font-size:13px;margin-bottom:16px}
.notice.reject{background:var(--miss-bg);border-color:var(--miss-bd);color:var(--miss-c)}

/* ---------- 结构化填报组件（统一报纸风） ---------- */
.formula-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:18px;font-size:13px;color:var(--ink-3)}
.chip{border-radius:4px;padding:3px 12px;font-weight:600;border:1px solid;font-size:12.5px}
.chip.base{background:#eef4fb;color:var(--blue);border-color:#b6ccf0}
.chip.perf{background:var(--ok-bg);color:var(--jade);border-color:var(--ok-bd)}

.fmod{background:var(--card);border:1px solid var(--line);border-radius:8px;margin-bottom:16px;overflow:hidden}
.fmod-head{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line);background:var(--row-alt)}
.fmod-num{font-family:'Inter',monospace;font-size:11px;font-weight:600;letter-spacing:1px;color:#fff;background:var(--ink-3);border-radius:5px;padding:3px 9px;flex-shrink:0}
.fmod.perf .fmod-num{background:var(--jade)}
.fmod.base .fmod-num{background:var(--blue)}
.fmod-title{font-size:15px;font-weight:700}
.fmod-tag{margin-left:auto;font-size:12px;color:var(--ink-3)}
.fmod-body{display:grid;grid-template-columns:1fr 300px;gap:0}
.fmod-rules{padding:16px 20px;background:#fdfbf5;border-right:1px solid var(--line);font-size:12.5px;color:var(--ink-2);line-height:1.8}
.fmod-rules ul{list-style:none;margin:0}
.fmod-rules li{position:relative;padding-left:14px;margin-bottom:4px}
.fmod-rules li::before{content:'·';position:absolute;left:2px;color:var(--accent);font-weight:700}
.fmod-rules b{color:var(--ink)}
.fmod-fill{padding:16px 20px;display:flex;flex-direction:column;gap:11px}
.fill-label{font-size:12px;font-weight:600;color:var(--ink-2)}
.fill-num{background:#fff;border:1px solid var(--line-strong);border-radius:5px;font-family:'Inter',monospace;font-size:22px;font-weight:600;padding:10px 14px;width:100%;outline:none;color:var(--ink)}
.fill-num:focus{border-color:var(--accent)}
.fill-num:disabled{background:var(--row-alt);color:var(--ink-2)}
.jchip{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;border-radius:6px;padding:8px 13px;border:1px solid}
.jchip .jm{font-family:'Inter',monospace;font-size:14px}
.jchip .jmoney{margin-left:auto;font-family:'Inter',monospace;font-weight:500;font-size:12.5px}
.jchip.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-c)}
.jchip.miss{background:var(--miss-bg);border-color:var(--miss-bd);color:var(--miss-c)}
.jchip.pending{background:#f2f1ec;border-color:var(--line-strong);color:var(--ink-3)}

.fladder{display:flex;height:32px;border-radius:6px;overflow:hidden;border:1px solid var(--line-strong);position:relative;margin-top:2px}
.fladder-seg{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;color:var(--ink-2)}
.fladder-seg.dim{opacity:.4}
.fladder-marker{position:absolute;top:-4px;bottom:-4px;width:3px;background:var(--ink);border-radius:2px;transition:left .3s}
.ttbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px}
.ttbl td{padding:5px 8px;border-bottom:1px solid var(--line);font-family:'Inter',monospace}
.ttbl td:first-child{font-family:inherit;font-weight:600}
.ttbl tr.cur td{background:var(--accent-light);outline:1px solid var(--accent);outline-offset:-1px}

.final-dark{background:var(--ink);color:var(--paper);border-radius:10px;padding:22px 26px;margin:8px 0 4px}
.final-dark .fd-title{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px}
.fd-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:rgba(255,255,255,.75);padding:5px 0}
.fd-row .fv{font-family:'Inter',monospace;font-size:15px;color:#fff}
.fd-row .fv.neg{color:#ff9a9a}
.fd-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(255,255,255,.16);margin-top:10px;padding-top:14px}
.fd-total .fl{font-size:14px;font-weight:700}
.fd-total .fvv{font-family:'Inter',monospace;font-size:30px;font-weight:700;color:#7fe0b2}

/* 评分表（市场岗等） */
.stbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line-strong);font-size:13px}
.stbl th{background:var(--accent-light);padding:9px 10px;border:1px solid var(--line-strong);font-size:12px;font-weight:600;text-align:center}
.stbl td{padding:8px 10px;border:1px solid var(--line);text-align:center;vertical-align:middle}
.stbl tr:nth-child(even) td{background:var(--row-alt)}
.stbl .cell-in{width:86px;border:1px solid var(--line-strong);border-radius:3px;padding:5px;text-align:center;font-family:'Inter',monospace;font-size:14px;outline:none}
.stbl .cell-in:focus{border-color:var(--accent)}
.stbl .sv{font-family:'Inter',monospace;font-weight:600;color:var(--accent)}
.subtotal{background:var(--ink);color:var(--paper);padding:9px 16px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.subtotal .st-v{font-family:'Inter',monospace;font-weight:600}
.rate-btns{display:flex;gap:5px;justify-content:center}
.rate-btn{border:1px solid var(--line-strong);background:#fff;border-radius:3px;padding:4px 8px;font-size:11px;cursor:pointer;line-height:1.3;text-align:center}
.rate-btn b{font-family:'Inter',monospace;font-size:13px}
.rate-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.inc-card{background:var(--card);border:1px solid var(--line-strong);border-radius:8px;padding:18px 22px;margin-top:16px}
.inc-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.inc-row:last-child{border-bottom:none}
.inc-row .iv{font-family:'Inter',monospace;font-size:15px;font-weight:600}
.inc-row.total{border-top:2px solid var(--ink);border-bottom:none;margin-top:4px;padding-top:12px}
.inc-row.total .iv{font-size:22px;color:var(--accent)}

@media(max-width:680px){
  .topbar-inner{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px}
  .container{padding:18px 14px 60px}
  .pay-total .v{font-size:24px}
  .fmod-body{grid-template-columns:1fr}
  .fmod-rules{border-right:none;border-bottom:1px solid var(--line)}
  .stbl{font-size:11.5px}.stbl th,.stbl td{padding:6px 4px}.stbl .cell-in{width:60px}
}