/* HR-SMSIR-SECURE-PAYSLIP-V1 */
:root { color-scheme: light; --blue:#2f6cf4; --navy:#12213a; --muted:#78869c; --line:#e2e8f1; --green:#169d6c; }
* { box-sizing:border-box; }
html { min-height:100%; background:#f1f5fb; }
body { min-height:100vh; margin:0; display:flex; flex-direction:column; background:radial-gradient(circle at 10% 0,rgba(47,108,244,.11),transparent 30%),linear-gradient(180deg,#f7faff,#eef3f9); color:var(--navy); font-family:Tahoma,"Segoe UI",sans-serif; }
.site-header { width:min(1180px,calc(100% - 32px)); min-height:76px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }.brand-mark { width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#3478f1,#214da7);color:#fff;box-shadow:0 10px 22px rgba(47,108,244,.23); }.brand-mark svg { width:31px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }.brand>span:last-child { display:flex;flex-direction:column;gap:1px; }.brand strong { font-family:"Segoe UI",Tahoma,sans-serif;font-size:18px;font-weight:800;letter-spacing:.2px; }.brand small { color:var(--muted);font-size:9px; }
.secure-chip { display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #ccebdc;border-radius:10px;background:#effbf6;color:#147651;font-size:10px;font-weight:700; }.secure-chip i { width:7px;height:7px;border-radius:50%;background:#20ad7b;box-shadow:0 0 0 4px rgba(32,173,123,.1); }
main { width:100%; flex:1; }
.site-footer { width:min(1180px,calc(100% - 32px)); min-height:65px; margin:0 auto; display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8996a8;font-size:9px; }

.access-shell { min-height:calc(100vh - 141px); display:grid;place-items:center;padding:30px 16px 55px; }
.access-card { width:min(455px,100%); padding:34px; border:1px solid rgba(255,255,255,.85);border-radius:26px;background:rgba(255,255,255,.92);box-shadow:0 26px 80px rgba(23,43,76,.14);text-align:center;backdrop-filter:blur(12px); }
.access-visual { width:88px;height:88px;display:grid;place-items:center;margin:0 auto 15px;border-radius:28px;background:linear-gradient(145deg,#edf4ff,#dbe9ff);color:#2f6ce0;transform:rotate(-3deg); }.access-visual span { width:55px;height:55px;display:grid;place-items:center;border-radius:18px;background:#fff;box-shadow:0 10px 23px rgba(47,108,244,.13);transform:rotate(3deg); }.access-visual svg { width:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.access-kicker { color:#3971d8;font-size:10px;font-weight:800;letter-spacing:.15px; }.access-card h1 { margin:7px 0 8px;font-size:24px;font-weight:900; }.access-card>p { margin:0 auto 20px;max-width:350px;color:var(--muted);font-size:11px;line-height:2; }
.form-error { margin:0 0 13px;padding:10px 12px;border:1px solid #f0bdc2;border-radius:11px;background:#fff1f2;color:#9e3540;font-size:10px;line-height:1.8; }
.access-form { display:grid;gap:11px;text-align:right; }.access-form label { display:grid;gap:6px; }.access-form label span { color:#65748a;font-size:10px;font-weight:700; }.access-form input { width:100%;height:50px;padding:0 14px;border:1px solid #d9e1ec;border-radius:13px;outline:0;background:#fbfcfe;color:#25344a;font:700 18px Tahoma,"Segoe UI",sans-serif;text-align:center;letter-spacing:8px;direction:ltr;transition:.2s; }.access-form input:focus { border-color:#82aafa;box-shadow:0 0 0 4px rgba(47,108,244,.09);background:#fff; }.access-form button { height:49px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:13px;background:linear-gradient(135deg,#397bf4,#2458c4);color:#fff;font:800 11px Tahoma,"Segoe UI",sans-serif;box-shadow:0 12px 24px rgba(47,108,244,.23);cursor:pointer; }.access-form button svg { width:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.privacy-note { display:flex;align-items:center;justify-content:center;gap:7px;margin-top:17px;color:#8592a5;font-size:9px; }.privacy-note svg { width:18px;fill:none;stroke:#499274;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }

.payslip-shell { width:min(1120px,calc(100% - 32px));margin:16px auto 45px; }
.payslip-tools { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;padding:10px 13px;border:1px solid #d9e7df;border-radius:14px;background:#f3fbf7; }.payslip-tools>div { display:flex;flex-direction:column;gap:2px; }.payslip-tools strong { color:#19724f;font-size:10.5px; }.payslip-tools span { color:#718b7e;font-size:9px; }.payslip-tools button { min-height:38px;display:flex;align-items:center;gap:7px;padding:0 13px;border:0;border-radius:10px;background:#fff;color:#3d4d63;font:700 10px Tahoma,"Segoe UI",sans-serif;box-shadow:0 4px 13px rgba(35,53,80,.09);cursor:pointer; }.payslip-tools button svg { width:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.payslip-card { overflow:hidden;border:1px solid #dce3ed;border-radius:24px;background:#fff;box-shadow:0 25px 70px rgba(21,39,68,.13); }
.payslip-head { min-height:114px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:22px 26px;background:linear-gradient(130deg,#132742,#18365b);color:#fff; }
.company-block { display:flex;align-items:center;gap:12px; }.company-logo { width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.08); }.company-logo svg { width:34px;fill:none;stroke:#75c8a9;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }.company-block>div { display:flex;flex-direction:column;gap:4px; }.company-block strong { font-size:15px; }.company-block span { color:#9eafc6;font-size:9px; }
.payslip-title { min-width:180px;text-align:center; }.payslip-title span { display:block;color:#9db0c8;font-size:10px; }.payslip-title strong { display:block;margin-top:4px;font-size:20px;font-weight:900; }
.secure-stamp { justify-self:end;display:flex;align-items:center;gap:8px;color:#a9bad0;font-size:8.5px;line-height:1.8;text-align:left; }.secure-stamp svg { width:29px;fill:none;stroke:#63c6a0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.employee-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:1px;background:#e4e9f0; }.employee-grid>div { min-height:72px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:13px 17px;background:#fff; }.employee-grid span { color:#8b96a6;font-size:9px; }.employee-grid strong { color:#2b394e;font-size:11.5px; }
.financial-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px;background:#f7f9fc; }
.financial-column { overflow:hidden;border:1px solid #e0e6ee;border-radius:16px;background:#fff; }.financial-column header,.financial-column>div,.financial-column footer { display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:0 14px; }.financial-column header { min-height:42px;color:#fff;font-size:9.5px;font-weight:800; }.financial-column.earnings header { background:linear-gradient(90deg,#167d5a,#20a477); }.financial-column.deductions header { background:linear-gradient(90deg,#ad4851,#d0646d); }.financial-column>div { min-height:35px;border-bottom:1px dashed #e5e9ef;color:#58667a;font-size:9.5px; }.financial-column>div strong { color:#2d3b50;font-family:"Segoe UI",Tahoma,sans-serif;font-size:10px;direction:ltr; }.financial-column footer { min-height:44px;background:#f1f4f8;color:#2c3b51;font-size:10px;font-weight:900; }.financial-column footer strong { font-family:"Segoe UI",Tahoma,sans-serif;font-size:12px;direction:ltr; }
.payment-summary { display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:10px;padding:0 18px 18px;background:#f7f9fc; }.payment-summary>div { min-height:82px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;border:1px solid #dfe5ed;border-radius:15px;background:#fff; }.payment-summary span { color:#7f8b9d;font-size:9px; }.payment-summary strong { color:#314057;font-family:"Segoe UI",Tahoma,sans-serif;font-size:18px;direction:ltr; }.payment-summary small { color:#9ba5b3;font-size:8px; }.payment-summary .net { border-color:#9fddc5;background:linear-gradient(145deg,#effbf6,#e5f8f0); }.payment-summary .net span,.payment-summary .net strong { color:#0e7450; }.payment-summary .net strong { font-size:23px; }
.payslip-foot { min-height:47px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;border-top:1px solid #e3e8ef;color:#8a96a7;font-size:8.5px; }

@media (max-width:760px) { .site-header,.site-footer { width:calc(100% - 24px); }.site-footer { align-items:flex-start;flex-direction:column;justify-content:center; }.access-card { padding:27px 20px; }.payslip-shell { width:calc(100% - 20px); }.payslip-head { grid-template-columns:1fr auto;padding:18px; }.payslip-title { grid-column:1 / 3;grid-row:2; }.secure-stamp { align-self:start; }.employee-grid { grid-template-columns:1fr 1fr; }.financial-grid { grid-template-columns:1fr;padding:10px; }.payment-summary { grid-template-columns:1fr;padding:0 10px 10px; }.payslip-tools { align-items:stretch;flex-direction:column; }.payslip-tools button { justify-content:center; }.payslip-foot { align-items:flex-start;flex-direction:column;justify-content:center;padding:12px 15px; } }
@media print { html,body { background:#fff; }.site-header,.site-footer,.no-print { display:none!important; }.payslip-shell { width:100%;margin:0; }.payslip-card { border:0;border-radius:0;box-shadow:none; }.payslip-head { -webkit-print-color-adjust:exact;print-color-adjust:exact; }.financial-grid,.payment-summary { -webkit-print-color-adjust:exact;print-color-adjust:exact; } }