:root { --ink:#17212b; --muted:#687782; --blue:#176b87; --blue2:#219ebc; --line:#dce5e8; --bg:#f3f7f8; --white:#fff; --warn:#a65f00; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
.topbar { height:64px; padding:0 max(24px,calc((100vw - 1440px)/2)); display:flex; align-items:center; justify-content:space-between; background:#103d4d; color:white; }
.brand { color:white; text-decoration:none; font-size:20px; font-weight:750; }
nav { display:flex; gap:24px; } nav a { color:#d8edf3; text-decoration:none; }
.container { max-width:1440px; margin:0 auto; padding:30px 24px 60px; }
h1 { margin:0 0 6px; font-size:30px; } h2 { margin:0 0 18px; font-size:19px; }
.muted,.hint { color:var(--muted); }.hint { font-size:13px; margin-bottom:0; }
.ignored-note { display:inline-block; margin:8px 0 0; padding:6px 10px; border-radius:6px; color:#7a4b00; background:#fff3d9; font-size:13px; }
.page-head,.section-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.card { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px; margin-bottom:20px; box-shadow:0 3px 14px rgba(16,61,77,.04); }
.login-card { max-width:420px; margin:90px auto; padding:36px; }
label { display:flex; flex-direction:column; gap:8px; font-weight:650; font-size:14px; }
input,select { min-height:42px; padding:9px 12px; border:1px solid #b9c9ce; border-radius:8px; background:white; font-size:15px; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 16px; border:0; border-radius:8px; background:var(--blue); color:white; font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; }
.secondary { color:var(--blue); background:#e8f4f7; }
.login-card button { width:100%; margin-top:20px; }
.upload-form { display:flex; align-items:end; flex-wrap:wrap; gap:16px; }.upload-form label { min-width:220px; }
.employee-form { display:grid; grid-template-columns:repeat(4,minmax(180px,1fr)); gap:16px; align-items:end; }.employee-form button { min-height:42px; }.form-card { max-width:1100px; }
.inline-edit-hint { margin-top:-8px; margin-bottom:14px; }.employee-table input,.employee-table select { min-width:120px; width:100%; min-height:34px; padding:6px 8px; }.employee-table .card-input { min-width:190px; }.small-button { min-height:34px; padding:0 12px; }
.alert { padding:12px 16px; border-radius:8px; margin-bottom:18px; background:#eaf7ee; color:#236336; }.alert.error { background:#fff0ee; color:var(--danger); }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; }
table { width:100%; border-collapse:collapse; background:white; font-size:14px; }
th,td { padding:11px 13px; text-align:left; white-space:nowrap; border-bottom:1px solid #e8eef0; } th { position:sticky; top:0; z-index:1; background:#edf4f6; color:#38505a; font-size:13px; }
tr:last-child td { border-bottom:0; }.empty { padding:32px; text-align:center; color:var(--muted); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.metric { background:white; border:1px solid var(--line); border-radius:12px; padding:18px; }.metric span { display:block; color:var(--muted); font-size:13px; }.metric strong { display:block; margin-top:8px; font-size:24px; }.metric small { display:block; margin-top:7px; color:var(--muted); }.metric.danger strong { color:var(--danger); }
.downloads { display:flex; flex-wrap:wrap; gap:8px; }
.bars { display:grid; gap:12px; }.bar-row { display:grid; grid-template-columns:110px minmax(180px,1fr) 110px 45px; gap:12px; align-items:center; font-size:13px; }.bar-track { height:12px; background:#edf1f2; border-radius:999px; overflow:hidden; }.bar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--blue),var(--blue2)); }.bar-row strong { text-align:right; }.bar-row small { color:var(--muted); }
.tag { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; }.tag.ok { color:#267143; background:#e8f6ed; }.tag.warn { color:var(--warn); background:#fff3d9; }.issue-row { background:#fffdf7; }
.payroll-table { max-height:650px; }
@media (max-width:800px) { .metrics { grid-template-columns:repeat(2,1fr); }.employee-form { grid-template-columns:1fr; }.page-head,.section-head { align-items:flex-start; flex-direction:column; }.bar-row { grid-template-columns:90px 1fr 90px; }.bar-row small { display:none; }.topbar { padding:0 16px; }.container { padding:22px 12px; } nav { gap:12px; } }