.payroll-page{--payroll-navy:#102a43;--payroll-orange:#ed6b2d;--payroll-teal:#147d76;--payroll-line:var(--border);padding-bottom:24px}.payroll-hero{border-bottom:1px solid var(--border);background:linear-gradient(145deg,var(--surface-muted),var(--background) 68%);padding:clamp(38px,6vw,72px) 0 35px;position:relative;overflow:hidden}.payroll-hero:after{content:"RM";color:color-mix(in srgb,var(--primary) 4%,transparent);font-family:var(--font-display);letter-spacing:-.12em;pointer-events:none;font-size:clamp(13rem,28vw,27rem);font-weight:900;line-height:1;position:absolute;bottom:-.35em;right:-.03em}.payroll-hero .shell{z-index:1;grid-template-columns:minmax(0,1.25fr) minmax(280px,.65fr);align-items:end;gap:clamp(28px,5vw,76px);display:grid;position:relative}.payroll-hero h1{max-width:820px;font-family:var(--font-display);letter-spacing:-.06em;margin:0;font-size:clamp(2.6rem,5.8vw,5rem);font-weight:850;line-height:1}.payroll-hero h1+p{max-width:720px;color:var(--text-secondary);margin:22px 0 0;font-size:1.05rem}.payroll-hero aside{border:1px solid var(--border);background:var(--surface-elevated);box-shadow:var(--shadow-soft);border-radius:16px;padding:21px}.payroll-hero aside strong{font-size:.95rem}.payroll-hero aside p{color:var(--text-secondary);margin:7px 0 0;font-size:.82rem}.payroll-trust{flex-wrap:wrap;gap:9px;margin-top:24px;display:flex}.payroll-trust span{border:1px solid var(--border);background:var(--surface-elevated);color:var(--text-secondary);border-radius:99px;padding:6px 10px;font-size:.72rem;font-weight:800}.payroll-workspace{grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);align-items:start;gap:22px;padding-top:28px;display:grid}.payroll-editor{gap:15px;min-width:0;display:grid}.payroll-month-bar{border:1px solid var(--border);background:var(--surface-elevated);box-shadow:var(--shadow-soft);border-radius:14px;justify-content:space-between;align-items:end;gap:14px;padding:16px 18px;display:flex}.payroll-month-bar label{gap:4px;display:grid}.payroll-month-bar label span{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;font-weight:850}.payroll-month-bar input,.payroll-month-bar button{border:1px solid var(--border);background:var(--surface-interactive);min-height:40px;color:var(--text-primary);border-radius:9px}.payroll-month-bar input{padding:7px 10px}.payroll-month-bar button{cursor:pointer;padding:7px 12px;font-size:.78rem;font-weight:800}.payroll-editor-section{border:1px solid var(--border);background:var(--surface-elevated);box-shadow:var(--shadow-soft);border-radius:17px;padding:20px}.payroll-editor-section>header{grid-template-columns:34px 1fr;align-items:start;gap:12px;margin-bottom:18px;display:grid}.payroll-editor-section>header>span{background:var(--payroll-navy);color:#fff;border-radius:8px 8px 8px 2px;place-items:center;width:30px;height:30px;font-size:.68rem;font-weight:900;display:grid}.payroll-editor-section h2{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:1.2rem}.payroll-editor-section header p{color:var(--text-secondary);margin:2px 0 0;font-size:.78rem}.payroll-field-grid,.payroll-money-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;display:grid}.payroll-field.wide{grid-column:1/-1}.payroll-field{align-content:start;gap:5px;min-width:0;display:grid}.payroll-field>span{color:var(--text-secondary);font-size:.72rem;font-weight:800}.payroll-field input,.payroll-field textarea{border:1px solid var(--border);background:var(--surface-interactive);width:100%;min-width:0;color:var(--text-primary);font:inherit;border-radius:9px}.payroll-field input{height:42px;padding:8px 10px}.payroll-field textarea{resize:vertical;min-height:74px;padding:9px 10px}.payroll-field em{color:var(--danger);font-size:.68rem;font-style:normal}.payroll-field input:focus,.payroll-field textarea:focus,.payroll-month-bar input:focus{border-color:var(--primary);box-shadow:var(--focus);outline:none}.payroll-file{align-items:center;gap:7px;display:flex}.payroll-file input{height:42px;padding:7px}.payroll-file button,.payroll-text-action,.remove-employee{color:var(--primary);cursor:pointer;background:0 0;border:0;font-size:.73rem;font-weight:850}.payroll-text-action{color:var(--payroll-teal);margin-top:12px;padding:4px 0}.remove-employee{color:var(--danger);margin-top:12px;padding:4px 0}.employee-toolbar{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.employee-tabs{flex-wrap:wrap;gap:7px;display:flex}.employee-tabs button,.add-employee{border:1px solid var(--border);background:var(--surface-interactive);min-height:36px;color:var(--text-primary);cursor:pointer;border-radius:8px;padding:7px 10px;font-size:.74rem;font-weight:800}.employee-tabs button.active{border-color:var(--payroll-teal);background:var(--teal-soft);color:var(--payroll-teal)}.add-employee{border-color:var(--payroll-orange);color:var(--payroll-orange);flex:none}.employee-toolbar+.payroll-field-grid{margin-top:16px}.payroll-empty{border:1px dashed var(--border-strong);text-align:center;border-radius:12px;margin-top:15px;padding:20px}.payroll-empty p{color:var(--text-secondary);margin:4px 0 0;font-size:.8rem}.payroll-check{color:var(--text-secondary);align-items:flex-start;gap:8px;margin-top:12px;font-size:.76rem;display:flex}.payroll-check input{margin-top:4px}.money-input{border:1px solid var(--border);background:var(--surface-interactive);border-radius:9px;grid-template-columns:39px 1fr;display:grid;overflow:hidden}.money-input>span{border-right:1px solid var(--border);color:var(--text-secondary);place-items:center;font-size:.7rem;font-weight:900;display:grid}.money-input input{font-variant-numeric:tabular-nums;background:0 0;border:0;border-radius:0}.money-input.invalid{border-color:var(--danger)}.statutory-notice{border-left:4px solid var(--payroll-orange);background:var(--accent-soft);border-radius:8px;margin:-3px 0 17px;padding:13px 14px}.statutory-notice b{font-size:.8rem}.statutory-notice p{color:var(--text-secondary);margin:3px 0 0;font-size:.74rem}.statutory-notice.compact{border-left-color:var(--payroll-teal)}.employee-mini-summary{border:1px solid var(--border);background:var(--border);border-radius:10px;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:17px;display:grid;overflow:hidden}.employee-mini-summary>div{background:var(--surface-interactive);min-width:0;padding:9px}.employee-mini-summary span{min-height:2.4em;color:var(--text-secondary);font-size:.61rem;line-height:1.2;display:block}.employee-mini-summary b{font-variant-numeric:tabular-nums;font-size:.76rem}.employee-mini-summary .strong{background:var(--payroll-navy);color:#fff}.employee-mini-summary .strong span{color:#c9d7e5}.payroll-side{gap:15px;min-width:0;display:grid;position:sticky;top:92px}.payroll-summary-card{color:#fff;background:#102a43;border-radius:16px;padding:19px;box-shadow:0 16px 35px #102a432e}.summary-heading{border-bottom:1px solid #ffffff2e;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:11px;padding-bottom:12px;display:flex}.summary-heading span{color:#b8cad9;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}.summary-heading strong{font-size:1rem}.payroll-summary-card>div:not(.summary-heading){color:#d3dee7;justify-content:space-between;gap:16px;padding:6px 0;font-size:.74rem;display:flex}.payroll-summary-card>div b{color:#fff;font-variant-numeric:tabular-nums;font-size:.8rem}.payroll-summary-card>div.strong{background:#ffffff17;border-radius:8px;margin:5px -8px;padding:9px 8px}.payroll-preview-wrap{border:1px solid var(--border);background:var(--surface-muted);box-shadow:var(--shadow-soft);border-radius:16px;padding:15px}.preview-label{color:var(--text-secondary);justify-content:space-between;gap:10px;margin:0 1px 11px;font-size:.72rem;font-weight:800;display:flex}.preview-label small{font-weight:500}.payslip-paper{aspect-ratio:210/297;color:#102a43;background:#fff;width:100%;padding:5.6%;font-family:Aptos,Microsoft YaHei UI,sans-serif;overflow:hidden;box-shadow:0 11px 30px #102a4324}.payslip-head{border-bottom:2px solid #102a43;justify-content:space-between;gap:18px;padding-bottom:3.3%;display:flex}.payslip-head>div:last-child{text-align:right}.payslip-head h2{letter-spacing:.03em;margin:0;font-size:clamp(1rem,2.25vw,1.65rem)}.payslip-head>div:last-child span{color:#ed6b2d;letter-spacing:.07em;font-size:clamp(.35rem,.8vw,.55rem);font-weight:850;display:block}.payslip-brand{gap:9px;min-width:0;display:flex}.payslip-brand img{object-fit:contain;width:42px;height:34px}.payslip-brand div{align-content:start;min-width:0;display:grid}.payslip-brand strong{overflow-wrap:anywhere;font-size:clamp(.48rem,1.1vw,.78rem)}.payslip-brand small{color:#66788a;max-width:210px;font-size:clamp(.3rem,.62vw,.44rem);line-height:1.25}.payslip-meta{grid-template-columns:repeat(2,1fr);gap:3% 8%;margin:3.7% 0;display:grid}.payslip-meta div{min-width:0}.payslip-meta dt{color:#66788a;font-size:clamp(.28rem,.62vw,.42rem)}.payslip-meta dd{overflow-wrap:anywhere;margin:0;font-size:clamp(.38rem,.82vw,.56rem);font-weight:750}.payslip-section{margin-top:2.5%}.payslip-section h3{color:#fff;letter-spacing:.07em;background:#102a43;margin:0;padding:1.3% 2%;font-size:clamp(.3rem,.65vw,.43rem)}.payslip-section>div{border-bottom:1px solid #e3e8ec;justify-content:space-between;gap:10px;padding:1.15% 2%;font-size:clamp(.3rem,.64vw,.44rem);display:flex}.payslip-section b,.payslip-totals b{font-variant-numeric:tabular-nums}.payslip-totals{grid-template-columns:repeat(3,1fr);gap:1.4%;margin-top:3%;display:grid}.payslip-totals>div{background:#f0f3f6;gap:1px;padding:4%;display:grid}.payslip-totals span{color:#66788a;font-size:clamp(.26rem,.56vw,.38rem)}.payslip-totals b{font-size:clamp(.36rem,.75vw,.52rem)}.payslip-totals .net{color:#fff;background:#102a43}.payslip-totals .net span{color:#c9d7e5}.payslip-footnote{color:#66788a;margin:3% 0 0;font-size:clamp(.25rem,.5vw,.34rem)}.payroll-download{border:1px solid var(--payroll-orange);background:var(--payroll-orange);color:#fff;cursor:pointer;border-radius:9px;width:100%;min-height:44px;margin-top:12px;font-weight:850}.payroll-download:disabled{opacity:.6;cursor:wait}.payroll-notice{color:var(--text-secondary);margin:10px 1px 0;font-size:.75rem}.preview-placeholder{border:1px dashed var(--border-strong);min-height:220px;color:var(--text-secondary);text-align:center;border-radius:10px;place-items:center;padding:30px;font-size:.8rem;display:grid}.payroll-reference,.payroll-upgrade,.payroll-boundary{border:1px solid var(--border);background:var(--surface-elevated);box-shadow:var(--shadow-soft);border-radius:20px;margin-top:28px}.payroll-reference{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:26px;padding:25px;display:grid}.payroll-reference h2,.payroll-upgrade h2,.payroll-boundary h2{font-family:var(--font-display);letter-spacing:-.035em;margin:0;font-size:clamp(1.4rem,2.7vw,2.1rem)}.payroll-reference p:not(.eyebrow),.payroll-upgrade p:not(.eyebrow),.payroll-boundary p{color:var(--text-secondary);margin:7px 0 0;font-size:.84rem}.payroll-reference>div:last-child{gap:8px;display:grid}.payroll-reference a{border:1px solid var(--border);background:var(--surface-interactive);border-radius:10px;padding:12px 38px 12px 14px;display:grid;position:relative}.payroll-reference a:hover{border-color:var(--primary)}.payroll-reference a strong{font-size:.8rem}.payroll-reference a small{color:var(--text-secondary);font-size:.7rem}.payroll-reference a span{position:absolute;top:50%;right:14px;transform:translateY(-50%)}.payroll-upgrade{background:linear-gradient(140deg,var(--surface-elevated),var(--accent-soft));grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:28px;display:grid}.upgrade-tags{flex-wrap:wrap;gap:6px;margin-top:16px;display:flex}.upgrade-tags span{border:1px solid var(--border);background:var(--surface-elevated);border-radius:99px;padding:5px 8px;font-size:.65rem;font-weight:750}.upgrade-actions{gap:9px;min-width:210px;display:grid}.payroll-boundary{padding:24px}.payroll-boundary p{max-width:900px}.payroll-mobile-tabs{display:none}html[data-theme=dark] .payroll-page{--payroll-navy:#172a42}.payroll-page button:hover{border-color:var(--primary)}html[data-theme=dark] .payslip-paper{color:#102a43;background:#fff}html[data-theme=dark] .employee-tabs button.active{color:#79d8ca;background:#173b3a}html[data-theme=dark] .payroll-upgrade{background:linear-gradient(140deg,var(--surface-elevated),var(--accent-soft))}@media (max-width:980px){.payroll-workspace{grid-template-columns:minmax(0,1fr) minmax(340px,.82fr)}.employee-mini-summary{grid-template-columns:repeat(3,1fr)}}@media (max-width:760px){.payroll-hero .shell{grid-template-columns:1fr}.payroll-hero aside{max-width:560px}.payroll-mobile-tabs{z-index:20;border-bottom:1px solid var(--border);background:var(--overlay-surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);grid-template-columns:repeat(3,1fr);padding:7px 13px;display:grid;position:sticky;top:66px}.payroll-mobile-tabs button{min-height:37px;color:var(--text-secondary);background:0 0;border:0;border-radius:7px;font-weight:800}.payroll-mobile-tabs button.active{background:var(--primary);color:var(--primary-foreground)}.payroll-workspace{padding-top:14px;display:block}.payroll-side{position:static}.view-editor .payroll-side,.view-summary .payroll-editor,.view-preview .payroll-editor,.view-summary .payroll-preview-wrap,.view-preview .payroll-summary-card{display:none}.view-summary .payroll-side,.view-preview .payroll-side{display:block}.payroll-field-grid,.payroll-money-grid{grid-template-columns:1fr}.payroll-field.wide{grid-column:auto}.payroll-month-bar,.employee-toolbar{flex-direction:column;align-items:stretch}.add-employee{width:100%}.employee-mini-summary{grid-template-columns:repeat(2,1fr)}.payroll-reference,.payroll-upgrade{grid-template-columns:1fr}.upgrade-actions{min-width:0}.payroll-reference,.payroll-upgrade,.payroll-boundary{border-radius:16px}.payroll-reference{padding:20px}.payroll-upgrade{padding:22px}.payroll-preview-wrap{padding:10px}.payslip-paper{min-height:auto}.preview-label{padding:3px 3px 0}.payroll-hero h1{font-size:clamp(2.5rem,12vw,4rem)}}@media (max-width:390px){.payroll-workspace.shell{width:calc(100% - 20px)}.payroll-editor-section{padding:15px}.employee-mini-summary{grid-template-columns:1fr}.payroll-reference,.payroll-upgrade,.payroll-boundary{width:calc(100% - 20px)}.payroll-trust span{font-size:.66rem}}@media (prefers-reduced-motion:reduce){.payroll-page *{scroll-behavior:auto!important;transition:none!important}}