:root {
      --bg: #f4f7fb;
      --surface: #ffffff;
      --surface-2: #f8fafc;
      --text: #172033;
      --muted: #697386;
      --line: #d9e1ec;
      --primary: #126f86;
      --primary-dark: #0d5668;
      --primary-soft: #e8f5f7;
      --success: #16825d;
      --success-soft: #e9f7f1;
      --warning: #a96608;
      --warning-soft: #fff6df;
      --danger: #c0392b;
      --danger-soft: #fff0ee;
      --shadow: 0 10px 30px rgba(30, 55, 90, .08);
      --radius: 14px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background: var(--bg);
      font-size: 14px;
    }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    .app { min-height: 100vh; }

    .topbar {
      min-height: 68px;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 12px 22px;
      background: linear-gradient(120deg, #0f647b, #16859b);
      color: #fff;
      box-shadow: 0 5px 18px rgba(18, 111, 134, .22);
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .brand { display: flex; align-items: center; gap: 12px; min-width: 235px; }
    .brand-mark {
      width: 42px; height: 42px; border-radius: 12px;
      display: grid; place-items: center;
      font-size: 22px; font-weight: 800;
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.26);
    }
    .brand h1 { margin: 0; font-size: 18px; letter-spacing: .5px; }
    .brand p { margin: 3px 0 0; opacity: .78; font-size: 12px; }
    .topbar-spacer { flex: 1; }
    .topbar .status {
      font-size: 12px; opacity: .9; display: flex; align-items: center; gap: 7px;
      white-space: nowrap;
    }
    .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #90f2ca; box-shadow: 0 0 0 4px rgba(144,242,202,.15); }

    .layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
    .sidebar {
      position: sticky;
      top: 68px;
      height: calc(100vh - 68px);
      padding: 20px 14px;
      background: #fff;
      border-right: 1px solid var(--line);
      overflow-y: auto;
    }
    .nav-title { margin: 4px 10px 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .8px; }
    .nav-btn {
      width: 100%; border: 0; background: transparent; color: #40506a;
      display: flex; align-items: center; gap: 10px;
      padding: 11px 12px; margin: 4px 0; border-radius: 10px; text-align: left;
      transition: .15s ease;
    }
    .nav-btn:hover { background: #f1f7f9; color: var(--primary); }
    .nav-btn.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
    .nav-icon { width: 23px; text-align: center; font-size: 16px; }
    .sidebar-note {
      margin: 24px 6px 0; padding: 13px; border-radius: 12px;
      background: #f7fafc; border: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.65;
    }

    .main { min-width: 0; padding: 22px; }
    .view { display: none; }
    .view.active { display: block; }
    .page-heading { display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; margin-bottom: 18px; }
    .page-heading h2 { margin: 0; font-size: 23px; }
    .page-heading p { margin: 6px 0 0; color: var(--muted); line-height: 1.6; }

    .toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
    .field-inline { display: flex; align-items: center; gap: 7px; color: #526078; }
    .field-inline label { white-space: nowrap; font-size: 13px; }
    input, select, textarea {
      border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
      color: var(--text); background: #fff; outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    input:focus, select:focus, textarea:focus { border-color: #56a7b9; box-shadow: 0 0 0 3px rgba(18,111,134,.11); }
    input[type="month"] { min-width: 145px; }
    input[type="number"] { min-width: 76px; }
    .btn {
      border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px;
      background: #fff; color: #3b4860; font-weight: 650;
      display: inline-flex; align-items: center; gap: 7px;
      box-shadow: 0 1px 2px rgba(20, 35, 55, .03);
    }
    .btn:hover { border-color: #aec1d2; background: #fbfdff; }
    .btn.primary { color: #fff; border-color: var(--primary); background: var(--primary); }
    .btn.primary:hover { background: var(--primary-dark); }
    .btn.success { color: #fff; border-color: var(--success); background: var(--success); }
    .btn.danger { color: var(--danger); border-color: #ecc4bf; background: var(--danger-soft); }
    .btn.ghost { background: transparent; }
    .btn.small { padding: 6px 9px; border-radius: 7px; font-size: 12px; }

    .cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
    .card {
      background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
      box-shadow: var(--shadow); padding: 17px 18px;
    }
    .metric-label { color: var(--muted); font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
    .metric-value { font-size: 25px; font-weight: 800; margin-top: 9px; font-variant-numeric: tabular-nums; }
    .metric-note { margin-top: 6px; color: var(--muted); font-size: 12px; }
    .metric-card.net { border-color: #addfcf; background: linear-gradient(140deg,#fff,#f0fbf7); }
    .metric-card.gross { border-color: #b8dbe4; }
    .metric-card.deduction { border-color: #f0d6a8; }

    .panel {
      background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
      box-shadow: var(--shadow); margin-bottom: 18px;
    }
    .panel-header { padding: 15px 17px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; justify-content: space-between; }
    .panel-title { margin: 0; font-size: 16px; }
    .panel-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
    .panel-body { padding: 17px; }

    .table-wrap { width: 100%; overflow: auto; max-height: calc(100vh - 305px); }
    table { width: 100%; border-collapse: separate; border-spacing: 0; }
    .payroll-table { min-width: 2680px; }
    .payroll-table.compact-mode { min-width: 1180px; }
    .payroll-table.compact-mode .advanced-col { display: none !important; }
    .salary-table { min-width: 1080px; }
    .salary-table th { position: sticky; top: 0; }
    .salary-table td { padding: 10px; }
    .salary-input { width: 130px; text-align: right; font-weight: 700; }
    .salary-total { font-weight: 800; color: #087f8c; white-space: nowrap; }
    .salary-formula { display:block; margin-top:3px; color:var(--muted); font-size:11px; font-weight:500; }
    .quick-tip { padding: 12px 14px; border: 1px solid #cde2e7; border-radius: 10px; background: #f3fafb; color: #315b67; line-height: 1.65; font-size: 12px; }
    .mode-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:12px; font-weight:700; }
    th, td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 7px 7px; text-align: center; white-space: nowrap; }
    th:first-child, td:first-child { border-left: 1px solid var(--line); }
    thead tr:first-child th { border-top: 1px solid var(--line); }
    th { background: #e5f1f4; color: #194f5c; font-size: 12px; font-weight: 800; position: sticky; top: 0; z-index: 5; }
    th.group-attendance { background: #edf4ff; color: #315b8a; }
    th.group-income { background: #e9f7f1; color: #1a6750; }
    th.group-deduction { background: #fff5e5; color: #8b5c14; }
    th.group-result { background: #eff0ff; color: #4d4f91; }
    td { background: #fff; font-size: 12px; }
    tbody tr:hover td { background: #fbfdff; }
    tfoot td { background: #eef6f7; font-weight: 800; position: sticky; bottom: 0; z-index: 4; }
    .sticky-name { position: sticky; left: 0; z-index: 7; min-width: 94px; max-width: 94px; background: #fff; }
    th.sticky-name { background: #d8edf1; z-index: 10; }
    tfoot .sticky-name { background: #e3f1f3; }
    td.computed { background: #f6fafb; font-weight: 700; font-variant-numeric: tabular-nums; }
    td.money-positive { color: var(--success); }
    td.money-result { color: #34378a; font-size: 13px; font-weight: 800; }
    td.warning-cell { background: #fffaf0; }
    .cell-input { width: 78px; min-width: 0 !important; padding: 6px 6px; text-align: right; border-radius: 6px; }
    .cell-input.wide { width: 118px; text-align: left; }
    .cell-input.note { width: 125px; text-align: left; }
    .cell-select { width: 90px; min-width: 0; padding: 6px; }
    .row-actions { display: flex; gap: 5px; justify-content: center; }
    .icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 28px; height: 28px; padding: 0; }
    .icon-btn:hover { background: var(--primary-soft); border-color: #b7d9e0; }

    .legend { display: flex; flex-wrap: wrap; gap: 13px; color: var(--muted); font-size: 12px; }
    .legend span { display: inline-flex; align-items: center; gap: 6px; }
    .swatch { width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(0,0,0,.08); }

    .social-table { min-width: 1960px; }
    .social-table th { position: sticky; top: 0; }
    .social-table td { font-variant-numeric: tabular-nums; }
    .social-table .personal { background: #f4faf7; }
    .social-table .employer { background: #f5f7ff; }
    .social-table tfoot td { position: sticky; bottom: 0; }
    .tax-table { min-width: 2360px; }
    .tax-table th { position: sticky; top: 0; }
    .tax-table td { font-variant-numeric: tabular-nums; }
    .tax-table .deduct { background: #fffaf0; }
    .tax-table .cumulative { background: #f5f7ff; }
    .tax-table .result { background: #f0faf6; font-weight: 750; }
    .tax-rate-grid { display:grid; grid-template-columns:repeat(7,minmax(110px,1fr)); gap:8px; margin-top:12px; }
    .tax-rate-item { border:1px solid var(--line); border-radius:9px; padding:9px; background:#fff; }
    .tax-rate-item strong { display:block; margin-bottom:4px; color:#315b67; }
    .rate-note { padding: 11px 14px; background: #fffaf0; border: 1px solid #f1dfbd; border-radius: 10px; color: #76551d; font-size: 12px; line-height: 1.65; }
    .setting-block.span-2 { grid-column: 1 / -1; }
    .section-divider { grid-column: 1 / -1; border-top: 1px solid var(--line); margin: 4px 0; padding-top: 10px; font-size: 13px; font-weight: 800; color: #315b67; }

    .employee-table { min-width: 1180px; }
    .employee-table th { position: static; }
    .employee-table td { padding: 9px; }
    .badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
    .badge.active { background: var(--success-soft); color: var(--success); }
    .badge.inactive { background: #edf0f4; color: #7b8596; }
    .status-toggle-btn{border:0;cursor:pointer;font:inherit;transition:transform .12s ease,box-shadow .12s ease}.status-toggle-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(15,23,42,.12)}
    .bank { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #526078; }

    .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
    .setting-block { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #fbfdff; }
    .setting-block h3 { margin: 0 0 4px; font-size: 15px; }
    .setting-block p { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    .form-row { display: flex; flex-direction: column; gap: 6px; }
    .form-row label { font-size: 12px; color: #526078; font-weight: 700; }
    .form-row.full { grid-column: 1 / -1; }
    .help { color: var(--muted); font-size: 11px; line-height: 1.5; }

    .empty { padding: 35px 20px; text-align: center; color: var(--muted); }
    .toast {
      position: fixed; right: 22px; bottom: 22px; z-index: 100;
      min-width: 220px; max-width: 380px; padding: 12px 15px;
      border-radius: 10px; background: #162235; color: #fff; box-shadow: 0 12px 35px rgba(0,0,0,.25);
      opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease;
    }
    .toast.show { opacity: 1; transform: translateY(0); }

    .modal-backdrop { position: fixed; inset: 0; background: rgba(16, 28, 43, .46); display: none; align-items: center; justify-content: center; z-index: 80; padding: 20px; }
    .modal-backdrop.show { display: flex; }
    .modal { width: min(760px, 100%); max-height: 92vh; overflow: auto; background: #fff; border-radius: 15px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
    .modal-header { padding: 17px 19px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
    .modal-header h3 { margin: 0; }
    .modal-body { padding: 19px; }
    .modal-footer { padding: 14px 19px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); }
    .close-btn { border: 0; background: transparent; font-size: 24px; color: var(--muted); }

    .slip { padding: 8px; }
    .slip-title { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 5px; }
    .slip-month { text-align: center; color: var(--muted); margin-bottom: 18px; }
    .slip-head { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 13px; }
    .slip-head div { padding: 8px 10px; background: #f6f9fc; border-radius: 7px; }
    .slip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
    .slip-box { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
    .slip-box h4 { margin: 0; padding: 9px 11px; background: #eef5f7; }
    .slip-row { display: flex; justify-content: space-between; gap: 15px; padding: 7px 11px; border-top: 1px dashed #e4e9f0; }
    .slip-net { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: var(--success-soft); display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; color: var(--success); }

    @media (max-width: 1050px) {
      .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .settings-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
      .topbar { padding: 10px 13px; }
      .brand { min-width: 0; }
      .brand p, .topbar .status { display: none; }
      .layout { grid-template-columns: 1fr; }
      .sidebar { position: sticky; top: 62px; height: auto; z-index: 40; padding: 7px; display: flex; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
      .nav-title, .sidebar-note { display: none; }
      .nav-btn { min-width: max-content; margin: 0 3px; padding: 8px 10px; }
      .main { padding: 14px; }
      .page-heading { flex-direction: column; }
      .cards { grid-template-columns: 1fr 1fr; gap: 9px; }
      .card { padding: 13px; }
      .metric-value { font-size: 20px; }
      .form-grid { grid-template-columns: 1fr; }
      .form-row.full { grid-column: auto; }
      .slip-head, .slip-grid { grid-template-columns: 1fr; }
    }

    @media print {
      body { background: #fff; }
      .topbar, .sidebar, .page-heading, .cards, .panel-header, .settings-grid, .no-print, .toast, .modal-backdrop { display: none !important; }
      .layout { display: block; }
      .main { padding: 0; }
      .view { display: none !important; }
      #payrollView { display: block !important; }
      .panel { box-shadow: none; border: 0; margin: 0; }
      .panel-body { padding: 0; }
      .table-wrap { overflow: visible; max-height: none; }
      .payroll-table { min-width: 0; font-size: 8px; }
      th, td { padding: 3px 2px; font-size: 8px; }
      input, select { border: 0; padding: 0; width: 100% !important; text-align: center !important; background: transparent; }
      .row-actions, .action-col, .extra-attendance { display: none !important; }
    }

.archive-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 18px;padding:12px 16px;background:#fff;border:1px solid #dbe4ea;border-radius:12px}.archive-controls [hidden]{display:none!important}.archive-status{display:inline-flex;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:800;margin-left:8px;white-space:nowrap}.archive-status.draft{color:#8a5b00;background:#fff3cd}.archive-status.pending{color:#9a4d00;background:#ffe2c2}.archive-status.archived{color:#07633d;background:#d9f4e7}.archive-status.paid{color:#fff;background:#08734a}.archive-locked-row{background:#f1f5f4!important}.archive-locked-row input,.archive-locked-row select,.archive-locked-row textarea{background:#e8eeec!important;color:#667!important;cursor:not-allowed}.archive-locked-row td:first-child strong:after{content:' 已归档';font-size:10px;color:#08734a;background:#d9f4e7;border-radius:8px;padding:2px 5px;margin-left:5px}.archive-locked-row.paid-row td:first-child strong:after{content:' 已发放';color:#fff;background:#08734a}.archive-record{border:1px solid #dce5e9;border-radius:10px;margin-bottom:16px;overflow:hidden}.archive-record-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 16px;background:#f7fafb}.payment-record{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:12px 16px;color:#075d3c;background:#e7f7ef;border-top:1px solid #c9ead9;border-bottom:1px solid #c9ead9}.archive-table{min-width:850px}.archive-table tfoot{font-weight:800}.correction-list{padding:14px 16px;border-top:1px solid #e5ecef}.correction-list h4{margin:0 0 10px}.correction-item{display:grid;grid-template-columns:1fr 1fr 1fr 2fr auto;gap:12px;padding:9px 0;border-top:1px dashed #d9e2e6}.correction-modal{max-width:680px}.correction-modal textarea{width:100%}
.auto-backup-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.auto-backup-heading h3{margin-bottom:6px}.auto-backup-heading p{margin:0}.auto-backup-list{margin-top:14px;max-height:360px;overflow:auto}.auto-backup-list table{min-width:720px}.auto-backup-tip{margin-top:12px}