:root {
            --font-ui:      'Plus Jakarta Sans', system-ui, sans-serif;
            --font-mono:    'DM Mono', 'Courier New', monospace;
            --slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;
            --slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;
            --slate-800:#1e293b;--slate-900:#0f172a;
            --blue-50:#eff6ff;--blue-100:#dbeafe;--blue-400:#60a5fa;--blue-500:#3b82f6;
            --blue-600:#2563eb;--blue-700:#1d4ed8;
            --red-50:#fef2f2;--red-100:#fee2e2;--red-400:#f87171;--red-500:#ef4444;--red-600:#dc2626;
            --emerald-50:#ecfdf5;--emerald-100:#d1fae5;--emerald-400:#34d399;--emerald-500:#10b981;--emerald-600:#059669;
            --amber-50:#fffbeb;--amber-400:#fbbf24;--amber-500:#f59e0b;
            --gross-accent:var(--blue-600);--deduct-accent:var(--red-600);--net-accent:var(--emerald-600);
            --surface-base:#ffffff;--surface-raised:#ffffff;--surface-inset:var(--slate-50);
            --border-subtle:var(--slate-200);--border-medium:var(--slate-300);
            --text-primary:var(--slate-900);--text-secondary:var(--slate-500);--text-muted:var(--slate-400);
            --shadow-xs:0 1px 2px 0 rgb(0 0 0/.05);--shadow-sm:0 1px 3px 0 rgb(0 0 0/.08),0 1px 2px -1px rgb(0 0 0/.08);
            --shadow-md:0 4px 6px -1px rgb(0 0 0/.08),0 2px 4px -2px rgb(0 0 0/.08);
            --shadow-lg:0 10px 24px -3px rgb(0 0 0/.1),0 4px 8px -4px rgb(0 0 0/.1);
            --shadow-xl:0 20px 40px -5px rgb(0 0 0/.12),0 8px 16px -6px rgb(0 0 0/.08);
            --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-2xl:24px;
            --ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-out:cubic-bezier(.16,1,.3,1);
            --dur-fast:120ms;--dur-base:200ms;--dur-slow:350ms;
        }
        body.dark-mode {
            --surface-base:#0f172a;--surface-raised:#1e293b;--surface-inset:#0f172a;
            --border-subtle:#1e293b;--border-medium:#334155;
            --text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;
            --blue-50:rgba(59,130,246,.08);--blue-100:rgba(59,130,246,.14);
            --red-50:rgba(239,68,68,.08);--red-100:rgba(239,68,68,.14);
            --emerald-50:rgba(16,185,129,.08);--emerald-100:rgba(16,185,129,.14);
            --amber-50:rgba(245,158,11,.08);
            --shadow-sm:0 1px 3px 0 rgb(0 0 0/.3);--shadow-md:0 4px 6px -1px rgb(0 0 0/.35);--shadow-lg:0 10px 24px -3px rgb(0 0 0/.4);
        }
        .content-wrapper * { font-family: var(--font-ui); }
        input[type="number"],input[type="text"].text-end,.editable-field,.gross-input,.deduction-input,.netpay-input,
        .auto-amt,.total-val,#laborInsurance,#healthInsurance,#hiNone,#hiSubsidy25,#hiSubsidy50,
        #hiLocalResident,#hiFullSubsidy,#laborPension,#incomeTax,#companyLoan,#voluntaryPension,
        #deductionSubtotal,#grossPay,#netPay,#deduct_leave_subtotal,.salary-subtotal-box input {
            font-family:var(--font-mono)!important;letter-spacing:-.01em;
        }
    
        /* ── Outer card ── */
        .content-wrapper .card{border:1px solid var(--border-subtle);border-radius:var(--r-2xl);box-shadow:var(--shadow-xl);background:var(--surface-raised);overflow:visible;}
        .card-body.bg-light{background:var(--surface-inset)!important;border-radius:0 0 var(--r-2xl) var(--r-2xl);padding:28px 28px 0;}
        .card>.card-footer.text-muted{background:transparent;border-top:1px solid var(--border-subtle);padding:12px 24px;border-radius:0 0 var(--r-2xl) var(--r-2xl);}
        /* ── Employee info ── */
        .card-body.bg-light .row.mb-3 label,.card-body.bg-light .row.mb-4 label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-secondary);margin-bottom:5px;display:block;}
        .card-body.bg-light .form-control{background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--r-md);color:var(--text-primary);font-size:13px;font-weight:500;padding:9px 12px;transition:border-color var(--dur-base) ease,box-shadow var(--dur-base) ease;box-shadow:var(--shadow-xs);}
        .card-body.bg-light .form-control:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.15);outline:none;}
        .card-body.bg-light .form-control:disabled,.card-body.bg-light .form-control[readonly]{background:var(--surface-inset);border-color:var(--border-subtle);color:var(--text-secondary);opacity:1;cursor:default;}
        .editable-field{border-left:3px solid var(--blue-500)!important;background:var(--surface-base)!important;}
        .editable-field:focus{border-left-color:var(--blue-700)!important;}
        input[type="number"],input[type="text"].text-end{text-align:right!important;}
        /* ── Section cards ── */
        .fixed-salary.card,.nonfixed-salary.card,.overtime-salary.card{border:1px solid var(--border-subtle)!important;border-radius:var(--r-xl)!important;box-shadow:var(--shadow-md)!important;background:var(--surface-raised)!important;overflow:hidden;}
        .fixed-salary.card:hover,.nonfixed-salary.card:hover,.overtime-salary.card:hover{box-shadow:var(--shadow-lg)!important;transform:translateY(-2px);}
        .fixed-salary .card-header,.nonfixed-salary .card-header,.overtime-salary .card-header{background:linear-gradient(135deg,var(--blue-600) 0%,var(--blue-700) 100%)!important;border:none!important;padding:13px 18px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#fff!important;display:flex;align-items:center;gap:8px;}
        .fixed-salary .card-header::before{content:'💰';}
        .nonfixed-salary .card-header::before{content:'🎯';}
        .overtime-salary .card-header::before{content:'⏱';}
        .fixed-salary .card-body,.nonfixed-salary .card-body,.overtime-salary .card-body{padding:18px 20px!important;background:var(--surface-raised)!important;}
        .fixed-salary .d-flex.align-items-center,.nonfixed-salary .d-flex.align-items-center{padding:7px 10px;border-radius:var(--r-md);margin-bottom:4px!important;transition:background var(--dur-fast);}
        .fixed-salary .d-flex.align-items-center:hover,.nonfixed-salary .d-flex.align-items-center:hover{background:var(--surface-inset);}
        .fixed-salary label,.nonfixed-salary label{font-size:13px;font-weight:500;color:var(--text-secondary);}
        .fixed-salary .form-control,.nonfixed-salary .form-control{max-width:140px;font-size:14px;font-weight:600;text-align:right;padding:7px 10px;border-radius:var(--r-md);border:1px solid var(--border-medium);background:var(--surface-inset);color:var(--text-primary);}
        .fixed-salary .form-control:focus,.nonfixed-salary .form-control:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.15);background:var(--surface-base);}
        .overtime-salary .col-md-6.border-end{border-right:1px solid var(--border-subtle)!important;}
        .overtime-salary .fw-semibold.text-primary{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--blue-600)!important;padding:4px 0;border-bottom:2px solid var(--blue-100);margin-bottom:10px!important;display:flex;align-items:center;gap:6px;}
        .overtime-salary .d-flex.align-items-center{padding:5px 6px;border-radius:var(--r-sm);margin-bottom:3px!important;}
        .overtime-salary .d-flex.align-items-center:hover{background:var(--surface-inset);}
        .overtime-salary label{font-size:12px;color:var(--text-secondary);font-weight:500;}
        .overtime-salary .form-control{max-width:80px;font-size:13px;font-weight:600;text-align:right;padding:6px 8px;border-radius:var(--r-sm);border:1px solid var(--border-medium);background:var(--surface-inset);color:var(--text-primary);}
        .overtime-salary .form-control:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.15);background:var(--surface-base);}
        /* ── Subtotal boxes ── */
        .salary-subtotal-box{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--blue-50),var(--blue-100));border:1px solid rgba(59,130,246,.2);border-radius:var(--r-lg);padding:10px 16px;box-shadow:var(--shadow-xs);}
        .subtotal-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--blue-700);}
        .subtotal-value{display:flex;align-items:center;gap:8px;}
        .salary-subtotal-box input{width:130px;text-align:right;font-family:var(--font-mono)!important;font-size:15px;font-weight:700;color:var(--blue-700);background:var(--surface-base);border:1px solid rgba(59,130,246,.25);border-radius:var(--r-md);padding:6px 10px;box-shadow:var(--shadow-xs);}
        .salary-subtotal-box input:disabled{opacity:1;}
        .currency-tag{font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.3px;}
        .salary-subtotal-box.deduction-box{background:linear-gradient(135deg,var(--red-50),var(--red-100));border-color:rgba(239,68,68,.2);}
        .salary-subtotal-box.deduction-box .subtotal-label,.salary-subtotal-box.deduction-box .deduction-label{color:var(--red-600)!important;}
        .salary-subtotal-box.deduction-box input{border-color:rgba(239,68,68,.25);color:var(--red-600);}
        /* ── Gross pay footer ── */
        .gross-pay-footer{background:linear-gradient(135deg,var(--blue-600) 0%,var(--blue-700) 50%,#1e40af 100%);border-top:none;border-radius:var(--r-xl);box-shadow:0 8px 32px rgba(37,99,235,.35),0 2px 8px rgba(37,99,235,.2);padding:18px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;position:relative;overflow:hidden;margin:16px 0 4px;}
        .gross-pay-footer::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);pointer-events:none;}
        .gross-label{font-size:11px;font-weight:800;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:8px;}
        .gross-label i{font-size:18px;color:rgba(255,255,255,.8);}
        .gross-input-wrapper{display:flex;align-items:center;gap:8px;margin-left:auto;}
        .gross-input{width:200px;max-width:100%;font-family:var(--font-mono)!important;font-size:28px;font-weight:500;text-align:right;color:#fff;border:none;background:rgba(255,255,255,.12);border-radius:var(--r-md);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 3px rgba(0,0,0,.2);padding:8px 14px;letter-spacing:-.02em;}
        .gross-input:disabled{opacity:1;}
        .gross-currency{font-size:12px;font-weight:700;color:rgba(255,255,255,.65);letter-spacing:.4px;}
        /* ── Deduction card ── */
        .col-lg-6>.card.border-0.shadow-lg{border:1px solid var(--border-subtle)!important;border-radius:var(--r-xl)!important;box-shadow:var(--shadow-md)!important;background:var(--surface-raised)!important;}
        .col-lg-6>.card.border-0.shadow-lg:hover{box-shadow:var(--shadow-lg)!important;transform:translateY(-2px);}
        .col-lg-6>.card.border-0.shadow-lg .card-body{padding:20px!important;background:var(--surface-raised)!important;}
        .btn.btn-info.btn-sm{background:linear-gradient(135deg,#0ea5e9,#0284c7);border:none;color:#fff;border-radius:var(--r-md);font-size:11px;font-weight:700;letter-spacing:.3px;padding:6px 12px;box-shadow:0 2px 8px rgba(14,165,233,.3);}
        .btn.btn-success.btn-sm{background:linear-gradient(135deg,var(--emerald-500),var(--emerald-600));border:none;color:#fff;border-radius:var(--r-md);font-size:11px;font-weight:700;padding:6px 12px;box-shadow:0 2px 8px rgba(16,185,129,.3);}
        #deductionTable{border-collapse:separate;border-spacing:0;width:100%;}
        #deductionTable thead tr{background:var(--surface-inset);}
        #deductionTable thead th{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);padding:10px 14px;border-bottom:2px solid var(--border-subtle);}
        #deductionTable thead th.text-start.text-danger{color:var(--red-600)!important;}
        #deductionTable tbody tr{transition:background var(--dur-fast);border-bottom:1px solid var(--border-subtle);}
        #deductionTable tbody tr:last-child{border-bottom:none;}
        #deductionTable tbody tr:hover{background:var(--red-50);}
        #deductionTable tbody td{padding:9px 14px;vertical-align:middle;font-size:13px;color:var(--text-primary);}
        #deductionTable input.form-control{font-family:var(--font-mono)!important;font-size:13px;font-weight:600;text-align:right;padding:5px 10px;border-radius:var(--r-md);border:1px solid var(--border-subtle);background:var(--surface-inset);color:var(--text-primary);max-width:110px;}
        #deductionTable input[readonly]{background:var(--surface-inset);color:var(--red-600);border-color:rgba(239,68,68,.2);font-weight:700;}
        #deductionTable input.editable-field{background:var(--surface-base)!important;color:var(--text-primary);border-left:3px solid var(--blue-500)!important;}
        /* ── Deduction footer ── */
        .deduction-footer{background:linear-gradient(135deg,var(--red-600) 0%,#b91c1c 100%);border-radius:var(--r-xl);box-shadow:0 8px 28px rgba(220,38,38,.3),0 2px 8px rgba(220,38,38,.18);padding:16px 22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;position:relative;overflow:hidden;margin-top:16px;}
        .deduction-label{font-size:11px!important;font-weight:800!important;color:rgba(255,255,255,.9)!important;text-transform:uppercase;letter-spacing:.7px;display:flex;align-items:center;gap:8px;}
        .deduction-input-wrapper{display:flex;align-items:center;gap:8px;margin-left:auto;}
        .deduction-input{width:180px;font-family:var(--font-mono)!important;font-size:26px;font-weight:500;text-align:right;color:#fff;border:none;background:rgba(255,255,255,.12);border-radius:var(--r-md);padding:7px 12px;}
        .deduction-input:disabled{opacity:1;}
        .deduction-currency{font-size:12px;font-weight:700;color:rgba(255,255,255,.65);}
        /* ── Leave card ── */
        .card-header.text-danger{background:linear-gradient(135deg,var(--red-50),var(--red-100))!important;color:var(--red-600)!important;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:12px 18px;border-bottom:1px solid rgba(239,68,68,.15)!important;}
        .deduct-section{display:flex;flex-direction:column;gap:10px;}
        .deduct-item{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:var(--r-lg);background:var(--surface-inset);border:1px solid var(--border-subtle);box-shadow:var(--shadow-xs);transition:transform var(--dur-fast),box-shadow var(--dur-fast);}
        .deduct-item:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:rgba(239,68,68,.2);}
        .deduct-label{font-size:12px;font-weight:700;color:var(--text-primary);line-height:1.3;}
        .deduct-label .sub{font-size:11px;font-weight:400;color:var(--text-muted);}
        .input-wrapper{display:flex;flex-direction:row;gap:8px;width:100%;}
        .deduct-input-group,.amount-wrapper{flex:1;display:flex;}
        .deduct-input-group input{width:100%;font-family:var(--font-mono)!important;font-size:13px;font-weight:600;border-radius:var(--r-sm) 0 0 var(--r-sm);padding:6px 10px;border:1px solid var(--border-medium);text-align:right;background:var(--surface-base);color:var(--text-primary);}
        .unit-tag{background:var(--slate-100);border:1px solid var(--border-medium);border-left:none;padding:0 9px;font-size:11px;font-weight:600;color:var(--text-muted);display:flex;align-items:center;border-radius:0 var(--r-sm) var(--r-sm) 0;letter-spacing:.2px;}
        .auto-amt{font-family:var(--font-mono)!important;font-size:12px;font-weight:500;text-align:right;background:var(--slate-100);color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--r-sm);padding:6px 8px;}
        .total-val{font-family:var(--font-mono)!important;font-size:13px;font-weight:700;text-align:right;background:var(--red-50);color:var(--red-600);border:1px solid rgba(239,68,68,.2);border-radius:var(--r-sm);padding:6px 8px;}
        .amount-wrapper{gap:6px;}
        /* ── Net pay footer ── */
        .netpay-footer{background:linear-gradient(135deg,var(--emerald-600) 0%,#047857 100%);border-radius:var(--r-xl);box-shadow:0 8px 32px rgba(5,150,105,.35),0 2px 8px rgba(5,150,105,.2);padding:20px 26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;position:relative;overflow:hidden;margin:16px 0 20px;}
        .netpay-label{font-size:12px;font-weight:800;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:8px;}
        .netpay-label i{font-size:20px;color:rgba(255,255,255,.8);}
        .netpay-input-wrapper{display:flex;align-items:center;gap:8px;margin-left:auto;}
        .netpay-input{width:220px;font-family:var(--font-mono)!important;font-size:32px;font-weight:500;text-align:right;color:#fff;border:none;background:rgba(255,255,255,.13);border-radius:var(--r-md);padding:10px 16px;letter-spacing:-.03em;}
        .netpay-input:disabled{opacity:1;}
        .netpay-currency{font-size:13px;font-weight:700;color:rgba(255,255,255,.65);}
        /* ── Modals (unchanged) ── */
        .modal-content.border-0.shadow-lg.rounded-4{border-radius:var(--r-xl)!important;box-shadow:0 24px 64px rgba(0,0,0,.22)!important;background:var(--surface-raised);}
        .modal-header.bg-success{background:linear-gradient(135deg,var(--emerald-600),#047857)!important;border-radius:var(--r-xl) var(--r-xl) 0 0;border:none;padding:16px 20px;}
        .modal-header.bg-primary{background:linear-gradient(135deg,var(--blue-600),var(--blue-700))!important;border-radius:var(--r-xl) var(--r-xl) 0 0;border:none;padding:16px 20px;}
        .modal-body{padding:20px 24px!important;}
        .modal-footer.bg-light{background:var(--surface-inset)!important;border-top:1px solid var(--border-subtle);border-radius:0 0 var(--r-xl) var(--r-xl);padding:12px 20px;}
        /* ── NEW: Dependent inputs inline ── */
        .dep-row{display:flex;align-items:center;gap:6px;padding:4px 0;}
        .dep-row label{font-size:12px;color:var(--text-secondary);flex:1;}
        .dep-count{width:60px!important;text-align:right!important;padding:4px 7px!important;font-size:13px!important;}
        .dep-amt{width:90px!important;text-align:right!important;font-family:var(--font-mono)!important;font-size:12px!important;background:var(--surface-inset)!important;color:var(--red-600)!important;border-color:rgba(239,68,68,.2)!important;}
        /* ── NEW: Severance & Leave payout badge ── */
        .special-item-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--amber-50);color:var(--amber-500);border:1px solid rgba(245,158,11,.3);letter-spacing:.3px;}
        /* ── Misc ── */
        #deductionLoader{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(248,250,252,.85);display:flex;justify-content:center;align-items:center;border-radius:var(--r-xl);z-index:5;opacity:0;visibility:hidden;transition:opacity var(--dur-base),visibility var(--dur-base);backdrop-filter:blur(3px);}
        #deductionLoader.active{opacity:1;visibility:visible;}
        .modern-dropzone{border:2px dashed var(--border-medium)!important;border-radius:var(--r-xl)!important;background:var(--surface-inset)!important;}
        #yearSelect,#viewYearSelect{border-radius:var(--r-md);border:1px solid var(--border-medium);font-size:13px;font-weight:600;padding:6px 12px;}
        @keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
        .content-wrapper .card{animation:fadeUp .4s var(--ease-out) both;}
        @media(max-width:768px){.gross-pay-footer,.deduction-footer,.netpay-footer{flex-direction:column;align-items:stretch;}.gross-input,.deduction-input,.netpay-input{width:100%;}.input-wrapper{flex-direction:column;}}