@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{font-family:DM Sans,sans-serif;color:#18211f;background:#f4f6f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;font-weight:400}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}.login-shell{display:grid;min-height:100vh;place-items:center;padding:24px}.login-card{width:min(100%,400px);padding:36px;border:1px solid #e5e9e7;border-radius:14px;background:#fff;box-shadow:0 8px 28px #1b312a12;text-align:center}.login-logo{width:64px;height:64px;margin-bottom:20px;object-fit:contain}.login-card h1{margin:0;font-family:Manrope,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.7px}.login-copy{margin:8px 0 24px;color:#7b8581;font-size:13px;line-height:1.5}.login-form{display:grid;gap:16px;text-align:left}.login-form .field input{height:44px;font-size:14px}.login-button{min-height:46px;border:0;border-radius:8px;background:#184e3e;color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:background .16s ease}.login-button:hover{background:#103e31}.login-error{margin:-6px 0 0;color:#b42318;font-size:12px}.app-shell{width:min(1500px,100%);margin:0 auto;padding:42px 48px 64px}.app-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 32px}.eyebrow{margin:0 0 8px;color:#73817d;font-size:10px;font-weight:700;letter-spacing:1.45px}.app-heading h1,.section-heading h2,.preview-heading h2{margin:0;font-family:Manrope,sans-serif;letter-spacing:-.7px}.app-heading h1{font-size:30px;font-weight:800}.heading-copy{margin:7px 0 0;color:#7b8581;font-size:13px}.download-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 19px;border:0;border-radius:8px;background:#184e3e;color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:background .16s ease,transform .16s ease}.download-button:hover:not(:disabled){transform:translateY(-1px);background:#103e31}.download-button:disabled{cursor:wait;opacity:.7}.download-button span{font-size:18px;line-height:1}.workspace{display:grid;grid-template-columns:minmax(310px,390px) minmax(0,1fr);align-items:start;gap:28px}.editor,.preview-section{min-width:0;border:1px solid #e5e9e7;border-radius:12px;background:#fff;box-shadow:0 5px 18px #1b312a0a}.editor{padding:24px}.section-heading,.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-heading h2,.preview-heading h2{font-size:17px;font-weight:800}.section-heading .eyebrow,.preview-heading .eyebrow{margin-bottom:5px;font-size:9px}.secure-note{display:inline-flex;align-items:center;gap:6px;color:#85908c;font-size:10px;white-space:nowrap}.secure-note span{color:#43a47c;font-size:8px}.details-form{margin-top:25px}.form-section-title{margin:0 0 14px;color:#54615c;font-size:11px;font-weight:700}.earnings-title{margin-top:24px;padding-top:21px;border-top:1px solid #edf0ee}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}.field{display:flex;min-width:0;flex-direction:column;gap:7px;color:#404c47;font-size:11px;font-weight:600}.field>span{display:flex;align-items:center;justify-content:space-between;gap:5px}.field small{color:#99a29e;font-size:9px;font-weight:500}.field input{width:100%;height:38px;min-width:0;padding:0 10px;border:1px solid #dfe5e2;border-radius:6px;outline:none;background:#fff;color:#24332d;font-size:12px;font-weight:500;transition:border-color .14s ease,box-shadow .14s ease}.field input::placeholder{color:#abb4b0}.input-with-prefix{display:flex;align-items:center;height:38px;border:1px solid #dfe5e2;border-radius:6px;color:#7f8a85;font-size:12px}.input-with-prefix:focus-within{border-color:#5a9e83;box-shadow:0 0 0 3px #42926f1c}.input-with-prefix>span{padding-left:10px}.input-with-prefix input{height:36px;padding-left:5px;border:0;box-shadow:none}.hra-direct-option{display:flex;align-items:center;gap:7px;color:#45534d;cursor:pointer;font-size:10px;font-weight:600}.hra-direct-option input{width:14px;height:14px;flex:0 0 14px;margin:0;padding:0;accent-color:#184e3e;cursor:pointer}.hra-help{margin-top:-4px;color:#89938f;font-size:9px;font-weight:400}.delivery-note{margin:15px 0 0;color:#89938f;font-size:10px;line-height:1.5}.preview-section{padding:22px 24px 24px}.preview-badge{padding:6px 9px;border:1px solid #e6ebe8;border-radius:20px;color:#74817b;font-size:10px;font-weight:600}.paper-wrap{overflow:auto;margin-top:18px;padding:20px;border:1px solid #edf0ee;border-radius:8px;background:#f5f7f6}.payslip{position:relative;width:210mm;min-height:297mm;margin:0 auto;padding:11mm 10mm;background:#fff;box-shadow:0 3px 14px #1f2f281a;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:9pt}.slip-month{height:7mm;padding-right:16mm;text-align:right;font-size:9pt;font-weight:700;text-transform:uppercase}.slip-header{display:flex;align-items:center;justify-content:space-between;min-height:15mm;gap:7mm}.logo-header{display:flex;align-items:center;gap:7mm}.slip-logo{width:17mm;height:17mm;object-fit:contain}.company h2{margin:0 0 1mm;font-size:12pt;font-weight:700;letter-spacing:.1px}.company p{margin:0;color:#647080;font-size:7.2pt}.slip-rule{height:1px;margin-top:4mm;background:#cbd2dc}.employee-summary{margin:5.5mm 2.5mm 9mm}.employee-summary h3{margin:0 0 2mm;color:#455466;font-size:7.4pt;font-weight:700}.employee-summary dl{display:grid;grid-template-columns:38mm 1fr;row-gap:1.4mm;margin:0;font-size:8pt}.employee-summary dl>div{display:contents}.employee-summary dt{color:#637084}.employee-summary dd{position:relative;margin:0;padding-left:4mm;font-weight:600}.employee-summary dd:before{position:absolute;left:0;color:#657184;content:":"}.amounts-card{overflow:hidden;border:1px solid #d8dee8;border-radius:3mm}.amounts-columns{display:grid;grid-template-columns:1fr 1fr;gap:8mm;min-height:44mm;padding:3.5mm 4mm 2mm}.amount-column{min-width:0}.amounts-head,.amount-row{display:grid;grid-template-columns:minmax(0,1fr) 25mm;align-items:center;min-height:7.4mm;column-gap:2mm}.amounts-head{min-height:7mm;margin-bottom:1mm;border-bottom:1px dashed #bcc7d5;color:#111827;font-size:7.5pt}.amounts-head strong:last-child,.amount-row strong{white-space:nowrap}.amount-row{font-size:8pt}.amount-row strong{font-weight:700}.delivery-row{font-size:7pt}.deductions-column .amount-row{min-height:8mm}.amounts-total{display:grid;grid-template-columns:1fr 25mm 1fr 25mm;align-items:center;min-height:9mm;padding:1mm 4mm;background:#f5f6f9;column-gap:2mm}.amounts-total strong:nth-child(1),.amounts-total strong:nth-child(2){font-size:10pt}.amounts-total strong:nth-child(3),.amounts-total strong:nth-child(4){font-size:7.4pt}.amounts-total strong:nth-child(2),.amounts-total strong:nth-child(4){white-space:nowrap}.amounts-total small{font-size:6pt}.net-pay{display:flex;align-items:stretch;justify-content:space-between;min-height:14mm;margin-top:12.5mm;overflow:hidden;border:1px solid #d8dee8;border-radius:3mm}.net-pay>div{display:flex;flex-direction:column;justify-content:center;gap:1mm;padding:2mm 4mm}.net-pay>div strong{font-size:8pt}.net-pay>div span{color:#637084;font-size:7pt}.net-pay>strong{display:flex;min-width:29mm;align-items:center;justify-content:center;padding:2mm 4mm;background:#eaf9ef;font-size:10pt;white-space:nowrap}.amount-words{display:flex;justify-content:flex-end;gap:2mm;margin:7mm 2mm 0;font-size:7pt}.amount-words span{color:#687589}.amount-words strong{font-weight:600}.footer-rule{margin-top:4mm}.download-error{margin:12px 0 0;color:#b42318;font-size:12px}@media (max-width: 1250px){.app-shell{padding:32px 24px 48px}.workspace{grid-template-columns:minmax(0,1fr);gap:18px}.editor{padding:20px}.preview-section{padding:18px}}@media (max-width: 760px){.app-shell{padding:25px 16px 40px}.app-heading{align-items:flex-start}.app-heading h1{font-size:25px}.download-button{min-width:46px;padding:0 12px;font-size:0}.download-button span{font-size:19px}.workspace{grid-template-columns:minmax(0,1fr)}.preview-section{overflow:hidden}.paper-wrap{padding:12px}}@media (max-width: 420px){.login-card{padding:28px 22px}.field-grid{grid-template-columns:minmax(0,1fr)}.editor{padding:18px}}@media print{body{background:#fff}.payslip{box-shadow:none}}