.finance-page { --finance:#166a73; --finance-deep:#10545b; --finance-soft:#eaf5f4; --finance-line:#dce8e6; min-height:100%; color:#263b3c; }
.finance-head { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:14px; padding:17px 20px; border:1px solid var(--finance-line); border-radius:14px; background:linear-gradient(135deg,#f9fcfb,#eef7f5); box-shadow:0 6px 20px rgba(24,82,85,.05); }
.finance-eyebrow { color:#5b979a; font-size:10px; font-weight:700; letter-spacing:2px; }
.finance-head h1 { margin:4px 0 3px; color:#163d40; font-size:23px; line-height:1.2; }
.finance-head p { margin:0; color:#789092; font-size:12px; }
.finance-head-actions,.finance-toolbar-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.finance-page .el-button--primary { --el-button-bg-color:var(--finance); --el-button-border-color:var(--finance); --el-button-hover-bg-color:#237d85; --el-button-hover-border-color:#237d85; }
.finance-workbench { display:grid; grid-template-columns:190px minmax(0,1fr); align-items:start; gap:18px; }
.finance-sidebar { position:sticky; top:18px; min-height:calc(100vh - 96px); padding:17px 12px 14px; border:1px solid var(--finance-line); border-radius:14px; background:#fbfdfc; box-shadow:0 6px 20px rgba(24,82,85,.045); box-sizing:border-box; }
.finance-sidebar-head { padding:5px 10px 16px; border-bottom:1px solid rgba(81,130,130,.14); }
.finance-sidebar-head span,.finance-sidebar-head strong,.finance-sidebar-head small { display:block; }
.finance-sidebar-head span { color:#75a0a1; font-size:9px; font-weight:700; letter-spacing:1.8px; }
.finance-sidebar-head strong { margin-top:7px; color:#274b4d; font-size:17px; }
.finance-sidebar-head small { margin-top:5px; color:#8aa0a1; font-size:10px; }
.finance-side-menu { display:flex; flex-direction:column; gap:7px; padding:14px 0; }
.finance-side-menu button { position:relative; display:block; width:100%; min-height:50px; padding:0 14px; border:1px solid transparent; border-radius:10px; background:transparent; color:#617778; text-align:left; cursor:pointer; transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.finance-side-menu button:hover { border-color:#d8e8e5; background:rgba(255,255,255,.72); transform:translateX(2px); }
.finance-side-menu button.active { border-color:#c7dfdc; background:#fff; color:var(--finance); box-shadow:0 6px 16px rgba(21,96,102,.10); }
.finance-side-menu button.active:before { position:absolute; left:-13px; top:10px; width:3px; height:30px; border-radius:0 4px 4px 0; background:var(--finance); content:""; }
.finance-side-copy,.finance-side-copy strong { display:block; min-width:0; }
.finance-side-copy strong { overflow:hidden; color:inherit; font-size:13px; line-height:48px; text-overflow:ellipsis; white-space:nowrap; }
.finance-content { min-width:0; }
.finance-section-nav { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:52px; margin-bottom:14px; padding:6px 10px 6px 6px; box-sizing:border-box; }
.finance-section-links { display:flex; align-items:center; gap:5px; min-width:0; overflow-x:auto; }
.finance-section-links button { flex:0 0 auto; min-width:118px; height:38px; padding:0 16px; border:0; border-radius:8px; background:transparent; color:#718486; font-size:12px; cursor:pointer; }
.finance-section-links button:hover { background:#f1f7f6; color:var(--finance); }
.finance-section-links button.active { background:var(--finance); color:#fff; font-weight:600; box-shadow:0 4px 12px rgba(22,106,115,.18); }
.finance-section-actions { flex:0 0 auto; }
.finance-panel { border:1px solid var(--finance-line); border-radius:14px; background:#fff; box-shadow:0 6px 22px rgba(25,67,70,.045); }
.finance-toolbar { display:flex; align-items:center; gap:28px; min-height:72px; margin-bottom:14px; padding:12px 18px; box-sizing:border-box; }
.finance-toolbar > div:first-child { display:flex; align-items:center; gap:10px; }
.finance-toolbar label,.finance-current-status > span { color:#718486; font-size:12px; }
.finance-current-status { display:flex; align-items:center; gap:9px; }
.finance-current-status small { color:#a1b0b1; font-size:10px; }
.finance-toolbar-actions { flex:1; margin-left:auto; }
.finance-metrics { display:grid; grid-template-columns:repeat(6,minmax(130px,1fr)); gap:12px; margin-bottom:14px; }
.finance-metrics > div { min-height:108px; padding:16px 17px; border:1px solid var(--finance-line); border-top:3px solid #80aeb0; border-radius:12px; background:#fff; box-sizing:border-box; }
.finance-metrics > div.money { border-top-color:var(--finance); background:linear-gradient(160deg,#fff,#f0f8f7); }
.finance-metrics > div.alert { border-top-color:#e6a23c; background:#fffaf1; }
.finance-metrics > div.danger { border-top-color:#e2675f; background:#fff6f5; }
.finance-metrics span,.finance-metrics small { display:block; color:#849596; font-size:11px; }
.finance-metrics strong { display:block; margin:10px 0 7px; color:#274b4d; font-size:24px; line-height:1; }
.finance-metrics .money strong { color:var(--finance); }
.finance-workflow { margin-bottom:14px; padding:12px; overflow-x:auto; }
.finance-workflow .el-steps--simple { min-width:940px; padding:12px 16px; border-radius:9px; background:#f5f9f8; }
.finance-workflow .el-step.is-simple .el-step__title { font-size:11px; }
.finance-params { display:grid; grid-template-columns:repeat(6,1fr); margin-bottom:14px; overflow:hidden; }
.finance-params > div { min-height:76px; padding:14px 16px; border-right:1px solid #edf2f1; box-sizing:border-box; }
.finance-params > div:last-child { border-right:0; }
.finance-params span,.finance-params b { display:block; }
.finance-params span { margin-bottom:8px; color:#8b9b9c; font-size:10px; }
.finance-params b { color:#315456; font-size:14px; }
.finance-table-panel { overflow:hidden; }
.finance-section-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 20px; border-bottom:1px solid #edf2f1; }
.finance-section-head h2 { margin:0; color:#234648; font-size:16px; }
.finance-section-head p { margin:5px 0 0; color:#8c9b9c; font-size:11px; }
.finance-section-head > span { padding:5px 10px; border-radius:14px; background:var(--finance-soft); color:var(--finance); font-size:11px; }
.finance-table-panel .el-table { --el-table-header-bg-color:#f5f9f8; --el-table-row-hover-bg-color:#f2f8f7; }
.finance-table-panel .el-table th.el-table__cell { color:#647b7d; font-size:11px; }
.finance-table-panel .el-table td.el-table__cell { color:#415b5d; font-size:12px; }
.finance-table-panel .el-table__footer-wrapper td { background:#eef7f5!important; color:var(--finance)!important; font-weight:700; }
.finance-final-money { color:var(--finance); font-size:13px; }
.finance-deduction { color:#c85e56; }
.finance-rules { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.finance-rule-card { position:relative; min-height:230px; padding:24px; border:1px solid var(--finance-line); border-radius:14px; background:#fff; overflow:hidden; box-sizing:border-box; box-shadow:0 6px 22px rgba(25,67,70,.045); }
.finance-rule-card > b { position:absolute; right:17px; top:8px; color:#e6f0ef; font-size:54px; line-height:1; }
.finance-rule-card h3 { position:relative; margin:0 0 24px; color:#234b4d; font-size:18px; }
.finance-rule-card h3:after { content:""; display:block; width:32px; height:3px; margin-top:9px; border-radius:3px; background:var(--finance); }
.finance-rule-card p { position:relative; margin:0 0 12px; color:#536d6f; font-size:13px; line-height:1.7; }
.finance-rule-card small { position:relative; display:block; margin-top:20px; padding-top:14px; border-top:1px dashed #dbe7e5; color:#8d9d9e; line-height:1.7; }
.finance-employee-form .el-form-item { margin-bottom:18px; }
.finance-employee-form { max-height:68vh; padding-right:8px; overflow-y:auto; }
.finance-employee-form h3 { margin:5px 0 17px; padding:9px 12px; border-left:3px solid var(--finance); background:#f3f8f7; color:#365b5d; font-size:13px; }
.finance-employee-form h3:not(:first-child) { margin-top:8px; }
.finance-sensitive-fields { margin-top:16px; }
.finance-employee-actions { display:flex; gap:8px; }
.finance-employee-summary { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:10px; padding:14px 18px 0; }
.finance-employee-summary > div { padding:12px 15px; border:1px solid #e4edec; border-radius:10px; background:#f8fbfa; }
.finance-employee-summary span,.finance-employee-summary b { display:block; }
.finance-employee-summary span { color:#879798; font-size:10px; }
.finance-employee-summary b { margin-top:7px; color:#315658; font-size:20px; }
.finance-employee-summary > div.warn { border-color:#f0d39b; background:#fff9ef; }
.finance-employee-summary > div.warn b { color:#b87922; }
.finance-employee-filters { display:flex; align-items:center; gap:10px; padding:14px 18px; }
.finance-employee-filters > span { margin-left:auto; color:#8a9a9b; font-size:11px; }
.finance-archive-upload { min-height:340px; display:grid; place-items:center; }
.finance-archive-upload .el-upload { width:100%; }
.finance-archive-upload .el-upload-dragger { width:100%; padding:70px 20px; border-color:#a9ceca; background:#f5faf9; }
.finance-row-ok { color:#57916a; font-size:11px; }
.finance-import-steps { margin-bottom:22px; }
.finance-upload-box { min-height:330px; display:grid; place-items:center; }
.finance-upload-box .el-upload { width:100%; }
.finance-upload-box .el-upload-dragger { width:100%; padding:70px 20px; border-color:#a9ceca; background:#f5faf9; }
.finance-upload-icon { width:54px; height:54px; margin:0 auto 15px; border-radius:50%; background:var(--finance); color:#fff; font-size:29px; line-height:54px; }
.finance-header-row { display:flex; align-items:center; gap:12px; margin:14px 0; color:#637b7d; font-size:12px; }
.finance-import-summary { display:flex; gap:10px; margin-bottom:12px; }
.finance-import-summary span { padding:7px 12px; border-radius:16px; background:#edf2f1; color:#63787a; font-size:11px; }
.finance-import-summary span.ok { background:#edf7f0; color:#4e875d; }
.finance-import-summary span.bad { background:#fff0ef; color:#c65e57; }
.finance-import-summary span.warn { background:#fff6e8; color:#bb7b25; }
.finance-row-error,.finance-row-warning { margin:2px 0; font-size:11px; }
.finance-row-error { color:#d55d55; }
.finance-row-warning { color:#bd7d24; }
.finance-anomaly-confirm { margin-top:14px; color:#9a6928; }
.finance-entry-detail { padding:0 4px 30px; }
.finance-entry-person { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; padding:18px; border-radius:12px; background:linear-gradient(135deg,#edf7f5,#f8fbfa); }
.finance-entry-person h2 { margin:0; color:#21484a; font-size:21px; }
.finance-entry-person p { margin:6px 0 0; color:#809294; font-size:11px; }
.finance-entry-person > strong { color:var(--finance); font-size:26px; }
.finance-entry-detail section { margin-bottom:16px; padding:17px; border:1px solid var(--finance-line); border-radius:12px; }
.finance-entry-detail section h3 { margin:0 0 14px; color:#35585a; font-size:14px; }
.finance-explanation { margin:0; padding-left:20px; color:#607779; font-size:12px; line-height:2; }
.finance-item { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #edf2f1; }
.finance-item:last-child { border-bottom:0; }
.finance-item b,.finance-item span,.finance-item small { display:block; }
.finance-item b { color:#405e60; font-size:12px; }
.finance-item span,.finance-item small { margin-top:3px; color:#96a5a6; font-size:10px; }
.finance-item > strong { color:#4d865e; font-size:13px; }
.finance-item > strong.minus { color:#c45b55; }
.finance-item.voided { opacity:.48; text-decoration:line-through; }
.finance-adjust-box { display:flex; flex-direction:column; gap:10px; background:#f7faf9; }
.finance-adjust-box h3 { margin-bottom:2px!important; }
.finance-adjust-input { margin-top:2px; }
@media (max-width:1400px) { .finance-workbench { grid-template-columns:180px minmax(0,1fr); gap:14px; } .finance-metrics { grid-template-columns:repeat(3,1fr); } .finance-params { grid-template-columns:repeat(3,1fr); } .finance-params > div { border-bottom:1px solid #edf2f1; } }
@media (max-width:900px) { .finance-head,.finance-toolbar { align-items:flex-start; flex-direction:column; } .finance-toolbar-actions { justify-content:flex-start; margin-left:0; } .finance-workbench { grid-template-columns:160px minmax(0,1fr); gap:12px; } .finance-sidebar { padding-right:8px; padding-left:8px; } .finance-side-menu button { padding-right:9px; padding-left:9px; } .finance-metrics,.finance-rules,.finance-employee-summary { grid-template-columns:1fr; } .finance-params { grid-template-columns:repeat(2,1fr); } .finance-employee-filters { align-items:stretch; flex-direction:column; } .finance-employee-filters .el-input,.finance-employee-filters .el-select { width:100%!important; } .finance-employee-filters > span { margin-left:0; } }
@media (max-width:700px) { .finance-workbench { display:block; } .finance-sidebar { position:static; min-height:0; margin-bottom:14px; padding:10px; } .finance-sidebar-head { display:none; } .finance-side-menu { flex-direction:row; padding:0; overflow-x:auto; } .finance-side-menu button { flex:0 0 154px; min-height:50px; } .finance-side-menu button.active:before { left:14px; top:auto; bottom:-11px; width:calc(100% - 28px); height:3px; border-radius:4px 4px 0 0; } .finance-section-nav { align-items:stretch; flex-direction:column; } .finance-section-links { width:100%; } .finance-section-links button { min-width:110px; } .finance-section-actions { align-self:flex-end; } }