:root { --ink:#172033; --muted:#667085; --line:#e2e8f0; --brand:#1767d1; --navy:#173f70; --bg:#f4f6f9; --success:#087a55; --danger:#b5473c; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--ink); background:var(--bg); font-family:Inter,"Microsoft YaHei","PingFang SC",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 0,#e9f3ff 0,transparent 40%),#f4f6f9; }
.auth-card { width:min(390px,100%); padding:30px 36px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 55px rgba(18,40,70,.09); }
.logo { width:max-content; height:auto; margin:0 auto 14px; color:#173f70; background:none; border-radius:0; font-size:19px; font-weight:900; letter-spacing:.8px; }
.company { margin:0; color:#7a8494; font-size:11px; }
.auth-card h1 { margin:5px 0 7px; font-size:25px; }
.auth-copy { margin:0 0 19px; color:var(--muted); font-size:12px; }
.auth-card > small { display:block; margin-top:14px; color:#9aa1ad; font-size:9px; }
.form-stack { display:grid; gap:14px; text-align:left; }
label span { display:block; margin-bottom:6px; color:#4f5b6c; font-size:11px; font-weight:700; }
input,select { width:100%; padding:10px 11px; color:#273448; background:#fbfcfd; border:1px solid #dce2e9; border-radius:8px; outline:none; }
input:focus,select:focus { border-color:#5c95dc; box-shadow:0 0 0 3px #e8f2ff; }
.primary,.small-primary { color:#fff; background:var(--brand); border:0; border-radius:8px; font-weight:800; }
.primary { padding:11px 15px; }
.small-primary { align-self:end; padding:10px 14px; font-size:11px; white-space:nowrap; }
.notice { position:fixed; top:18px; left:50%; z-index:100; transform:translateX(-50%); padding:10px 15px; color:#126243; background:#e5f7ed; border:1px solid #bfe7d2; border-radius:9px; box-shadow:0 10px 30px rgba(20,40,60,.12); font-size:12px; font-weight:700; }
.notice.error { color:#a23d34; background:#fff0ee; border-color:#f0c7c2; }
.topbar { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:#fff; border-bottom:1px solid var(--line); }
.brand,.account { display:flex; align-items:center; gap:11px; }
.brand > span { width:auto; height:auto; color:#173f70; background:none; border-radius:0; font-size:14px; font-weight:900; letter-spacing:.5px; }
.brand small,.brand strong,.account small,.account strong { display:block; }
.brand small,.account small { color:#7c8595; font-size:9px; }
.brand strong { margin-top:2px; font-size:16px; }
.account { text-align:right; }
.account button { padding:7px 10px; color:#5d6878; background:#f5f7f9; border:1px solid #e1e5ea; border-radius:7px; font-size:10px; }
.layout { min-height:calc(100vh - 70px); display:grid; grid-template-columns:180px minmax(0,1fr); }
.sidebar { display:flex; flex-direction:column; gap:7px; padding:24px 14px; background:#fff; border-right:1px solid var(--line); }
.sidebar button { padding:11px 13px; color:#687386; background:transparent; border:0; border-radius:8px; text-align:left; font-size:13px; font-weight:700; }
.sidebar button.active { color:#145bb7; background:#edf5ff; }
.secure-note { margin-top:auto; padding:12px; background:#f4f8fc; border-radius:9px; }
.secure-note strong,.secure-note span { display:block; }
.secure-note strong { font-size:10px; }
.secure-note span { margin-top:3px; color:#7d8796; font-size:8px; }
.content { min-width:0; padding:28px 30px 40px; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.page-head p,.page-head h1,.page-head span { margin:0; }
.page-head p { color:var(--brand); font-size:11px; font-weight:800; }
.page-head h1 { margin:4px 0; font-size:26px; letter-spacing:-.02em; }
.page-head span { color:var(--muted); font-size:13px; }
.outline,.danger-outline { padding:9px 13px; background:#fff; border-radius:8px; font-size:11px; font-weight:700; }
.outline { color:#285f9f; border:1px solid #cfe0f2; }
.danger-outline { color:#a54b3f; border:1px solid #e8c9c4; }
.page-actions,.dialog-actions { display:flex; align-items:center; gap:8px; }
.page-actions { flex-wrap:wrap; justify-content:flex-end; }
.dialog-actions { justify-content:space-between; }
.settings-bar { display:grid; grid-template-columns:1.3fr 1fr 1.2fr .6fr auto; gap:10px; align-items:end; margin-bottom:15px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:11px; }
.settings-bar label span { font-size:9px; }
.settings-bar input,.settings-bar select { padding:8px 9px; font-size:10px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:15px; }
.metrics article { min-height:105px; padding:18px 19px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 8px rgba(16,36,62,.025); }
.metrics span,.metrics strong,.metrics small { display:block; }
.metrics span { color:var(--muted); font-size:12px; font-weight:650; }
.metrics strong { margin:7px 0 4px; font-size:23px; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.metrics small { color:#8a94a3; font-size:10px; }
.metrics .highlight { color:#fff; background:linear-gradient(135deg,#173f70,#1e65ae); border-color:transparent; }
.metrics .highlight span,.metrics .highlight small { color:#c9dcf0; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 14px rgba(20,35,55,.035); }
.table-card { overflow:hidden; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 17px; border-bottom:1px solid #edf0f4; }
.card-head h2,.card-head p { margin:0; }
.card-head h2 { font-size:16px; }
.card-head p { margin-top:4px; color:#7f8998; font-size:11px; }
.card-head input { width:240px; padding:9px 11px; font-size:12px; }
.table-scroll { max-width:100%; overflow-x:auto; overflow-y:visible; overscroll-behavior-x:contain; }
table { width:100%; min-width:780px; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; }
th,td { padding:12px 10px; border-bottom:1px solid #edf0f3; text-align:right; white-space:nowrap; }
th { color:#667085; background:#f8fafc; font-size:11px; font-weight:750; letter-spacing:.02em; }
th:first-child,td:first-child { padding-left:17px; text-align:left; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:#f1f7ff; }
.year-group td,.month-group td { padding:0; text-align:left; }
.year-group td { background:#eaf2fc; }
.month-group td { background:#f5f8fc; }
.group-toggle { width:100%; display:flex; align-items:center; gap:8px; padding:10px 14px; color:#2d5688; background:transparent; border:0; text-align:left; }
.year-group .group-toggle { padding:11px 14px; color:#174f93; }
.group-toggle strong { font-size:13px; }
.group-toggle small { margin-left:auto; color:#7389a2; font-size:10px; font-weight:700; }
.group-arrow { width:12px; color:#4e78a8; text-align:center; }
td.identity { white-space:pre-line; font-weight:800; line-height:1.5; }
td.identity::first-line { color:#1c2a3e; }
.status { color:#596579; font-size:11px; font-weight:700; }
.status-issued { color:var(--success); }
.status-review { color:#9a6700; }
.money-primary,.money-net { color:#172b4d; font-weight:800; }
.money-net { color:var(--success); font-size:13px; }
.money-deduction { color:var(--danger); }
.row-action { min-width:48px; padding:6px 10px; color:#285f9f; background:#edf5ff; border:1px solid #d9e9fb; border-radius:7px; font-size:11px; font-weight:750; }
.row-action.primary-action { color:#fff; background:var(--brand); border-color:var(--brand); }
.salary-detail-row:hover { background:#fff; }
.salary-detail-row > td { padding:0 14px 14px; background:#fff; white-space:normal; }
.payslip-detail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px; background:#f7f9fc; border:1px solid #e4eaf1; border-radius:10px; text-align:left; }
.detail-group { min-width:0; padding:12px; background:#fff; border:1px solid #e6ebf1; border-radius:9px; }
.detail-group.highlight { background:#f0f7ff; border-color:#d5e7fb; }
.detail-group h3 { margin:0 0 9px; color:#344054; font-size:12px; }
.detail-group dl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 10px; margin:0; }
.detail-group dt { overflow:hidden; color:#7a8595; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.detail-group dd { margin:0; color:#26354a; font-size:11px; font-weight:750; text-align:right; font-variant-numeric:tabular-nums; }
.detail-group.highlight dd:last-child { color:var(--success); font-size:13px; }
#appView[data-role="employee"] #salaryView table { min-width:620px; }
#appView[data-role="employee"] #salaryView thead th:first-child,
#appView[data-role="employee"] #salaryRows > tr:not(.year-group):not(.salary-detail-row) > td:first-child { display:none; }
.user-create { margin-bottom:15px; padding:17px; }
.user-create h2 { margin:0 0 13px; font-size:14px; }
.user-create form { display:grid; grid-template-columns:1fr 1fr .7fr 1.2fr auto; gap:10px; align-items:end; }
.user-create input,.user-create select { padding:9px; font-size:10px; }
.table-action { margin-left:5px; padding:5px 7px; color:#275e9d; background:#eef5fd; border:0; border-radius:6px; font-size:9px; }
dialog { width:min(620px,calc(100% - 28px)); padding:0; border:0; border-radius:14px; box-shadow:0 25px 80px rgba(10,25,45,.28); }
dialog::backdrop { background:rgba(14,27,45,.48); backdrop-filter:blur(3px); }
#salaryForm { padding:20px; }
#taxProfileForm { padding:20px; }
.dialog-note { margin:-5px 0 16px; padding:10px 11px; color:#6f7a8a; background:#f4f7fa; border-radius:8px; font-size:9px; line-height:1.55; }
.dialog-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.dialog-head p,.dialog-head h2 { margin:0; }
.dialog-head p { color:var(--brand); font-size:9px; font-weight:800; }
.dialog-head h2 { margin-top:3px; font-size:20px; }
.dialog-head button { width:30px; height:30px; color:#657184; background:#f1f3f6; border:0; border-radius:8px; font-size:19px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:16px; }
.field-grid input { padding:9px; font-size:11px; text-align:right; }
.check-label { display:flex; align-items:center; gap:8px; grid-column:1/-1; padding:9px 10px; background:#f6f8fa; border-radius:8px; }
.check-label input { width:auto; }
.check-label span { margin:0; font-size:9px; }
@media(max-width:1100px){.payslip-detail{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{flex-direction:row;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line)}.secure-note{display:none}.content{padding:20px 13px}.settings-bar,.user-create form{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:1fr 1fr;gap:8px}.metrics article{min-height:92px;padding:14px}.metrics strong{font-size:19px}}
@media(max-width:560px){.auth-page{padding:12px}.auth-card{padding:24px 22px}.topbar{padding:0 14px}.brand small{display:none}.content{padding:18px 10px}.page-head{align-items:flex-start;flex-direction:column}.page-actions{justify-content:flex-start}.metrics{gap:8px}.metrics article{padding:13px}.metrics strong{font-size:15px}.settings-bar,.user-create form,.field-grid{grid-template-columns:1fr}.card-head{align-items:flex-start;flex-direction:column}.card-head input{width:100%}}
@media(max-width:560px){.payslip-detail{grid-template-columns:1fr}.metrics small{display:none}}