:root{--bg:#f5f6fa;--ink:#24263a;--muted:#9295a7;--line:#e5e6ed;--purple:#6e63e8;--purple-soft:#efedff;--green:#2aa48f}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;margin:0}.payslip-topbar{align-items:center;background:#fff;border-bottom:1px solid var(--line);display:flex;height:70px;justify-content:space-between;padding:0 6%}.payslip-topbar>a{color:#777b90;font-size:15px;font-weight:600;text-decoration:none}.payslip-topbar>div{align-items:center;display:flex;gap:8px}.payslip-topbar label{align-items:center;display:flex;gap:6px}.payslip-topbar label span{color:#9a9dad;font-size:13px}.payslip-topbar select,.payslip-topbar button{background:#fff;border:1px solid var(--line);border-radius:6px;color:#666a7e;font:700 13px 'DM Sans';padding:9px}.payslip-topbar button{cursor:pointer}.payslip-topbar .download-button{background:var(--purple);border-color:var(--purple);color:#fff}.document-wrap{display:grid;gap:18px;grid-template-columns:minmax(650px,820px) 230px;margin:30px auto;max-width:1070px;padding:0 18px}.payslip-document{background:#fff;border:1px solid #ebecf1;border-radius:4px;box-shadow:0 12px 35px #25273b0d;padding:34px}.document-header{align-items:center;border-bottom:2px solid #6560d9;display:flex;padding-bottom:21px}.company-mark{background:var(--purple);border-radius:10px;color:#fff;font-family:'Plus Jakarta Sans';font-size:27px;font-weight:800;height:48px;line-height:48px;margin-right:12px;text-align:center;width:48px}.document-header h1{font-family:'Plus Jakarta Sans';font-size:19px;margin:0}.document-header p{color:#979aaa;font-size:12px;margin:5px 0 0}.document-title{margin-left:auto;text-align:right}.document-title span,.document-title strong,.document-title small{display:block}.document-title span{color:var(--purple);font-size:13px;font-weight:800;letter-spacing:1.4px}.document-title strong{font-family:'Plus Jakarta Sans';font-size:20px;margin-top:4px}.document-title small{color:#9ea0af;font-size:12px;margin-top:3px}.employee-info{align-items:center;border-bottom:1px solid var(--line);display:flex;padding:20px 0}.employee-info>div span,.payment-info span{color:#9a9dac;font-size:12px;font-weight:700;letter-spacing:.7px}.employee-info>div strong,.employee-info>div small{display:block}.employee-info>div strong{font-size:17px;margin-top:5px}.employee-info>div small{color:#9295a6;font-size:13px;margin-top:3px}.employee-info dl{display:grid;gap:24px;grid-template-columns:repeat(3,auto);margin:0 0 0 auto}.employee-info dl div{text-align:right}.employee-info dt{color:#a0a3b1;font-size:12px}.employee-info dd{font-size:13px;font-weight:700;margin:4px 0 0}.attendance-strip{background:#fafaff;border:1px solid #eeeef6;border-radius:7px;display:grid;grid-template-columns:repeat(5,1fr);margin:17px 0;padding:12px}.attendance-strip div{text-align:center}.attendance-strip div+div{border-left:1px solid #e6e6ee}.attendance-strip span,.attendance-strip strong{display:block}.attendance-strip span{color:#9a9dad;font-size:12px}.attendance-strip strong{font-size:14px;margin-top:4px}.salary-grid{display:grid;gap:28px;grid-template-columns:1fr 1fr}.salary-grid h2{font-family:'Plus Jakarta Sans';font-size:15px;margin:0 0 11px}.salary-line{display:flex;font-size:13px;justify-content:space-between;padding:8px 0}.salary-line+.salary-line{border-top:1px solid #f1f1f5}.salary-line span{color:#797d90}.salary-line strong{font-size:13px}.salary-line.subtotal{border-top:1px solid #dcdde7;font-weight:700;margin-top:4px;padding-top:11px}.salary-line.subtotal span{color:#4f5367}.salary-line.subtotal strong{color:var(--purple)}.take-home{align-items:center;background:linear-gradient(120deg,#665ce0,#7a70ec);border-radius:8px;color:#fff;display:flex;justify-content:space-between;margin:20px 0;padding:16px}.take-home span,.take-home small{display:block}.take-home span{font-size:13px;font-weight:800;letter-spacing:1px}.take-home small{font-size:12px;margin-top:4px;opacity:.72}.take-home>strong{font-family:'Plus Jakarta Sans';font-size:22px}.payment-info{border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr;padding:0 0 20px}.payment-info>div+div{border-left:1px solid var(--line);padding-left:18px}.payment-info strong,.payment-info small{display:block}.payment-info strong{font-size:13px;margin-top:5px}.payment-info small{color:#999cac;font-size:12px;margin-top:3px}.signature-block{text-align:right}.payslip-document>footer{align-items:center;color:#a3a5b2;display:flex;font-size:11px;justify-content:space-between;padding-top:15px}.payslip-document>footer p{margin:0}.payslip-side{display:flex;flex-direction:column;gap:12px}.payslip-side section{background:#fff;border:1px solid #e9eaf0;border-radius:9px;padding:16px}.payslip-side .side-icon{background:#e5f8f4;border-radius:50%;color:var(--green);display:block;height:28px;line-height:28px;text-align:center;width:28px}.payslip-side h2{font-family:'Plus Jakarta Sans';font-size:15px;margin:9px 0 0}.payslip-side p{color:#9699a9;font-size:13px;line-height:1.6;margin:6px 0 0}.payslip-side button{background:none;border:0;border-bottom:1px solid #f0f0f4;color:#696d81;cursor:pointer;display:flex;font:600 13px 'DM Sans';justify-content:space-between;padding:9px 0;width:100%}.payslip-side button span{color:var(--purple)}.privacy-note{background:#fff9f2!important}.payslip-toast{background:#25273c;border-radius:7px;bottom:22px;color:#fff;display:none;font-size:14px;padding:11px 15px;position:fixed;right:22px}.payslip-toast.show{display:block}@media(max-width:900px){.document-wrap{grid-template-columns:1fr}.payslip-side{display:grid;grid-template-columns:repeat(3,1fr)}}@media(max-width:680px){.payslip-topbar{padding:0 14px}.payslip-topbar label{display:none}.payslip-topbar>a span{display:none}.document-wrap{display:block;margin:16px auto;padding:0 10px}.payslip-document{overflow:auto;padding:20px}.document-header,.employee-info,.payment-info{min-width:580px}.attendance-strip,.salary-grid,.take-home{min-width:580px}.payslip-side{display:none}}@media print{body{background:#fff}.payslip-topbar,.payslip-side,.payslip-toast{display:none!important}.document-wrap{display:block;margin:0;max-width:none;padding:0}.payslip-document{border:0;box-shadow:none;margin:0;padding:15mm}}
.payslip-side button.active{color:var(--purple);font-weight:800}