:root{--bg:#f4f6f8;--panel:#fff;--text:#17202a;--muted:#6b7280;--line:#e5e7eb;--brand:#1d4ed8;--brand2:#2563eb;--ok:#15803d;--warn:#b45309;--danger:#b91c1c;--shadow:0 14px 40px rgba(15,23,42,.08)}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}a{color:var(--brand);text-decoration:none}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:#0f172a;color:white;padding:28px 18px;display:flex;flex-direction:column;gap:38px}.brand{display:flex;align-items:center;gap:12px;color:white;padding:0 10px}.brandmark,.auth-logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#60a5fa,#1d4ed8);display:grid;place-items:center;font-weight:800;color:white;font-size:22px}.brand span:last-child{display:flex;flex-direction:column}.brand small{color:#94a3b8;margin-top:2px}.sidebar nav{display:grid;gap:8px}.sidebar nav a{color:#cbd5e1;padding:12px 14px;border-radius:10px}.sidebar nav a:hover{background:#1e293b;color:white}.main{margin-left:250px;padding:32px;max-width:1500px}.auth-main{margin-left:0;min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,#dbeafe,transparent 40%),#f8fafc}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.topbar small{color:var(--muted)}h1,h2,h3,p{margin-top:0}.topbar h1{margin:4px 0 0;font-size:30px}.admin-chip{background:white;border:1px solid var(--line);border-radius:999px;padding:10px 14px;color:var(--muted)}.panel,.stat,.employee-card,.sendbar,.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.stat{padding:20px}.stat span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}.stat strong{font-size:22px}.batch-head{padding:24px;display:grid;grid-template-columns:1fr auto;gap:20px;position:relative;overflow:hidden}.batch-head h2{margin-bottom:8px}.batch-head p{color:var(--muted);margin-bottom:0;max-width:760px}.period-form label{font-size:13px;color:var(--muted)}input,select{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:12px 13px;font:inherit;background:white;color:var(--text);outline:none}input:focus,select:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(37,99,235,.12)}.period-form input{margin-top:6px}.progress{grid-column:1/-1;background:#e5e7eb;height:7px;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#1d4ed8)}.employee-list{display:grid;gap:14px;margin:18px 0 100px}.employee-card{padding:18px;display:grid;grid-template-columns:minmax(280px,1fr) minmax(360px,1.5fr);align-items:center;gap:20px}.employee-card.is-ready{border-color:#bfdbfe}.employee-card.is-sent{border-color:#bbf7d0}.employee-info{display:flex;align-items:center;gap:14px}.employee-info h3{margin-bottom:4px}.employee-info p{margin-bottom:4px;color:var(--muted)}.employee-info a{font-size:13px}.avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid white;box-shadow:0 0 0 1px #dbe3eb}.avatar.placeholder{display:grid;place-items:center;background:#dbeafe;color:#1d4ed8;font-weight:800;font-size:20px}.dropzone{position:relative;border:2px dashed #cbd5e1;border-radius:14px;padding:20px;cursor:pointer;text-align:center;transition:.2s}.dropzone:hover,.dropzone.dragging{border-color:#2563eb;background:#eff6ff}.file-input{position:absolute;opacity:0;pointer-events:none}.drop-content{display:flex;flex-direction:column;gap:4px}.drop-content span{color:var(--muted);font-size:13px}.file-state{display:flex;align-items:center;gap:12px;background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:14px}.file-icon{width:44px;height:44px;border-radius:10px;background:#fee2e2;color:#b91c1c;display:grid;place-items:center;font-weight:800;font-size:12px}.file-state>div:nth-child(2){min-width:0;flex:1}.file-state b,.file-state span,.file-state small{display:block;overflow:hidden;text-overflow:ellipsis}.file-state span{color:var(--muted);font-size:13px;margin-top:3px}.error-text{color:var(--danger);margin-top:4px}.icon-btn{border:0;background:transparent;color:var(--brand);cursor:pointer;font:inherit;padding:8px}.icon-btn.danger{color:var(--danger)}.sendbar{position:fixed;left:282px;right:32px;bottom:22px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;z-index:10}.sendbar span{display:block;color:var(--muted);font-size:13px;margin-top:3px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:11px;padding:12px 17px;font-weight:700;cursor:pointer;font:inherit}.btn.primary{background:linear-gradient(135deg,var(--brand2),var(--brand));color:white}.btn.secondary{background:#eef2f7;color:#334155}.btn.danger{background:#fee2e2;color:#991b1b}.btn:disabled{opacity:.45;cursor:not-allowed}.form-panel,.info-panel{padding:26px;max-width:980px}.section-head{margin-bottom:22px}.section-head p,.info-panel p{color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid label,.auth-card label{display:grid;gap:7px;font-size:14px;font-weight:650}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.photo-picker{display:flex;align-items:center;gap:16px;margin-bottom:22px}.photo-picker img,.photo-picker>div{width:86px;height:86px;border-radius:50%;object-fit:cover;background:#e2e8f0;display:grid;place-items:center;color:#64748b}.danger-zone{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.danger-zone span{display:block;color:var(--muted);font-size:13px;margin-top:4px}.toggle{display:flex;align-items:flex-start;gap:12px;margin-top:22px}.toggle input[type=checkbox]{display:none}.toggle>span{width:46px;height:26px;border-radius:999px;background:#cbd5e1;position:relative;flex:0 0 auto}.toggle>span:after{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s}.toggle input:checked+span{background:#2563eb}.toggle input:checked+span:after{transform:translateX(20px)}.toggle small{display:block;color:var(--muted);margin-top:3px}.info-panel{margin-top:18px}.info-panel pre{white-space:pre-wrap;background:#f8fafc;border:1px solid var(--line);padding:18px;border-radius:12px;font:inherit;line-height:1.6}.auth-card{width:min(440px,100%);padding:34px}.auth-logo{margin-bottom:20px}.auth-card p{color:var(--muted);margin-bottom:24px}.auth-card form{display:grid;gap:16px}.auth-card .btn{width:100%;margin-top:4px}.alert{padding:13px 16px;border-radius:11px;margin-bottom:18px}.alert.success{background:#dcfce7;color:#166534}.alert.error{background:#fee2e2;color:#991b1b}.empty{text-align:center;padding:48px;margin-top:18px}.empty-icon{width:56px;height:56px;border-radius:50%;background:#dbeafe;color:#1d4ed8;display:grid;place-items:center;margin:0 auto 16px;font-size:26px}.empty p{color:var(--muted)}@media(max-width:900px){.sidebar{position:static;width:auto;padding:18px}.sidebar nav{grid-template-columns:repeat(4,auto);overflow:auto}.main{margin-left:0;padding:18px}.stats{grid-template-columns:1fr 1fr}.employee-card{grid-template-columns:1fr}.sendbar{left:18px;right:18px}.form-grid{grid-template-columns:1fr}}@media(max-width:560px){.topbar{align-items:flex-start;gap:12px}.admin-chip{display:none}.stats{grid-template-columns:1fr 1fr;gap:10px}.batch-head{grid-template-columns:1fr}.employee-card{padding:14px}.file-state{align-items:flex-start;flex-wrap:wrap}.form-panel{padding:18px}.sendbar{flex-direction:column;align-items:stretch;gap:12px}.sidebar nav{grid-template-columns:1fr 1fr}.brand{padding:0}.main{padding-bottom:140px}}
.employee-name-link{color:var(--text)}.employee-name-link:hover{color:var(--brand)}.employee-links{display:flex;align-items:center;gap:12px}.employee-links form{margin:0}.text-btn{border:0;background:transparent;color:var(--brand);font:inherit;font-size:13px;padding:0;cursor:pointer}.employee-card.is-skipped{filter:grayscale(.75);opacity:.58;background:#f1f5f9}.skip-state{border:1px dashed #94a3b8;border-radius:14px;padding:18px;background:#e2e8f0}.skip-state b,.skip-state span{display:block}.skip-state span{color:#64748b;font-size:13px;margin-top:4px}.archive-head{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.archive-head h2,.archive-head p{margin-bottom:3px}.archive-avatar{width:70px;height:70px}.archive-upload{padding:24px;margin-bottom:18px}.archive-upload p{color:var(--muted)}.archive-upload-form{display:grid;grid-template-columns:180px 1fr auto;gap:14px;align-items:end}.archive-upload-form label{display:grid;gap:7px;font-size:13px;font-weight:650}.payslip-archive{display:grid;gap:14px}.payslip-row{padding:18px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}.payslip-meta h3{margin-bottom:5px}.payslip-meta b,.payslip-meta span,.payslip-meta small{display:block}.payslip-meta span{color:var(--muted);font-size:13px;margin-top:3px}.payslip-actions{display:flex;gap:9px;align-items:center}.payslip-actions form{margin:0}.archive-empty-icon{margin:0 auto 16px}@media(max-width:900px){.archive-upload-form{grid-template-columns:1fr}.payslip-row{grid-template-columns:auto 1fr}.payslip-actions{grid-column:1/-1;flex-wrap:wrap}}@media(max-width:560px){.archive-head{align-items:flex-start;gap:16px;flex-direction:column}.payslip-row{grid-template-columns:1fr}.payslip-actions{grid-column:auto;align-items:stretch;flex-direction:column}.payslip-actions .btn{width:100%}}
.send-progress-modal{position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:1000;display:grid;place-items:center;padding:20px}.send-progress-modal[hidden]{display:none}.send-progress-card{width:min(520px,100%);background:#fff;border-radius:20px;padding:30px;box-shadow:0 24px 80px rgba(15,23,42,.28);text-align:center}.send-progress-card h2{margin:8px 0}.send-progress-card p{color:var(--muted);margin-bottom:22px}.send-spinner{width:44px;height:44px;margin:0 auto 14px;border:4px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;animation:paydrop-spin .85s linear infinite}.send-spinner.is-done{animation:none;border-color:#bbf7d0;position:relative}.send-spinner.is-done:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#15803d;font-weight:800}.send-spinner.is-error{animation:none;border-color:#fecaca;position:relative}.send-spinner.is-error:after{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:#b91c1c;font-weight:800}.send-progress-track{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}.send-progress-track span{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#1d4ed8);transition:width .25s ease}.send-progress-numbers{display:flex;justify-content:space-between;margin-top:9px;color:var(--muted);font-size:13px}.send-progress-result{margin:18px 0 0;font-size:14px}.send-progress-result.success{color:var(--ok)}.send-progress-result.error{color:var(--danger)}.send-progress-card .btn{margin-top:18px}@keyframes paydrop-spin{to{transform:rotate(360deg)}}

.month-stepper{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:7px;align-items:center}.month-stepper input{min-width:0}.month-step-btn{height:44px;border:1px solid #d1d5db;border-radius:10px;background:#fff;color:var(--brand);font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}.month-step-btn:hover{border-color:#60a5fa;background:#eff6ff}.month-step-btn:focus-visible{outline:0;border-color:#60a5fa;box-shadow:0 0 0 3px rgba(37,99,235,.12)}