:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#162033;background:#f5f7fb;font-synthesis:none;text-rendering:optimizeLegibility;--brand: #155eef;--brand-dark: #1049ba;--navy: #0f172a;--green: #0c9b6b;--green-dark: #087a54;--border: #dce3ef;--muted: #65728a;--surface: #ffffff;--warning: #fff7df;--warning-border: #f0cf72}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:#f5f7fb}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.topbar{background:linear-gradient(130deg,#0c3eae,#155eef 56%,#5a46e8);color:#fff}.topbar__inner,.notice__inner,.page,.footer__inner{width:min(1240px,calc(100% - 32px));margin:0 auto}.topbar__inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:13px}.brand__mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#ffffff29;border:1px solid rgba(255,255,255,.22);font-weight:900;letter-spacing:-.05em}.brand h1{margin:0;font-size:clamp(1.2rem,2vw,1.65rem);letter-spacing:-.03em}.brand p{margin:3px 0 0;color:#dce8ff;font-size:.86rem}.privacy-pill{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.23);background:#ffffff1a;font-size:.8rem;font-weight:750;white-space:nowrap}.notice{background:var(--warning);border-bottom:1px solid var(--warning-border)}.notice__inner{padding:12px 0;font-size:.88rem;line-height:1.5;color:#684d09}.page{padding:30px 0 52px}.app-grid{display:grid;grid-template-columns:minmax(360px,465px) minmax(0,1fr);gap:24px;align-items:start}.panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 18px 55px #1c2b4d14;overflow:hidden}.panel__header{padding:20px 22px;border-bottom:1px solid var(--border);background:#fbfcff;display:flex;justify-content:space-between;gap:18px;align-items:center}.eyebrow{margin:0 0 4px;color:var(--brand);text-transform:uppercase;font-size:.72rem;font-weight:900;letter-spacing:.13em}.panel__header h2{margin:0;font-size:1.2rem;letter-spacing:-.02em}.ghost-button{border:1px solid var(--border);background:#fff;padding:9px 12px;border-radius:10px;font-weight:750;color:#33405a}.ghost-button:hover{background:#f4f7fc}.form{padding:20px 22px 22px}.fieldset{border:0;padding:0;margin:0 0 24px}.fieldset:last-of-type{margin-bottom:18px}.legend{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:12px;font-weight:900}.legend small{color:var(--muted);font-weight:600;font-size:.72rem}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field--full{grid-column:1 / -1}.field label{display:block;font-size:.78rem;font-weight:800;color:#39465e;margin-bottom:6px}.field input,.field select{width:100%;min-height:43px;border:1px solid #cdd6e5;border-radius:10px;background:#fff;padding:9px 11px;color:#162033}.field input:focus,.field select:focus{outline:3px solid rgba(21,94,239,.16);border-color:var(--brand)}.field__hint{margin:5px 0 0;color:var(--muted);font-size:.7rem;line-height:1.4}.certification{display:flex;align-items:flex-start;gap:10px;padding:13px;border-radius:12px;background:#fffaf0;border:1px solid #f0d18a;font-size:.79rem;line-height:1.45}.certification input{margin-top:3px;width:17px;height:17px;flex:0 0 auto}.actions{padding:18px 22px 22px;border-top:1px solid var(--border);background:#fbfcff;display:grid;gap:10px}.button{width:100%;border:0;border-radius:12px;padding:13px 16px;font-weight:900;transition:.2s ease}.button--secondary{border:1px solid #cfd8e7;background:#fff;color:#26344d}.button--secondary:hover{background:#f4f7fb}.button--primary{background:var(--green);color:#fff;box-shadow:0 10px 24px #0c9b6b38}.button--primary:hover{background:var(--green-dark);transform:translateY(-1px)}.button small{display:block;font-weight:600;opacity:.83;margin-top:3px}.preview-wrap{position:sticky;top:16px}.preview-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:0 0 10px}.preview-heading h2{margin:0;font-size:1.25rem}.preview-heading p{margin:0;color:var(--muted);font-size:.76rem}.stub{position:relative;overflow:hidden;background:#fff;border:1px solid #cfd7e4;border-radius:16px;padding:30px;box-shadow:0 18px 58px #1e2d4d17}.watermark{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;pointer-events:none}.watermark span{transform:rotate(-36deg);font-size:clamp(3rem,8vw,6.7rem);line-height:1;font-weight:1000;letter-spacing:.12em;color:#6f7e972b;border:8px solid rgba(111,126,151,.14);padding:12px 18px}.stub__content{position:relative;z-index:2}.stub__header{display:flex;justify-content:space-between;gap:24px;border-bottom:3px solid #172033;padding-bottom:15px}.stub__company h3{margin:0;font-size:1.35rem;letter-spacing:-.03em;text-transform:uppercase}.stub__company p{margin:4px 0 0;color:#58667e;font-size:.75rem}.stub__meta{text-align:right;font-size:.75rem;line-height:1.75}.stub__meta strong{color:#1c2940}.employee-row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid #d9e0eb}.label{color:#738097;text-transform:uppercase;font-size:.64rem;font-weight:900;letter-spacing:.09em}.value{margin-top:4px;font-weight:850;font-size:.9rem}.tables{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin-top:17px}.table-title{margin:0 0 7px;font-size:.83rem;font-weight:950}table{width:100%;border-collapse:collapse;border:1px solid #d7deea;font-size:.68rem}th{background:#f1f4f9;color:#3c4960;text-align:left;font-size:.61rem;text-transform:uppercase;letter-spacing:.04em}th,td{padding:7px;border-bottom:1px solid #e1e6ef}th:not(:first-child),td:not(:first-child){text-align:right}tfoot td{font-weight:950;background:#f8faff;border-top:2px solid #c5cfdd}.money{font-variant-numeric:tabular-nums}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.summary__card{padding:11px;border:1px solid #dbe2ed;border-radius:10px;background:#f8faff}.summary__card--net{border:2px solid #0c9b6b;background:#ecfbf5}.summary__amount{margin-top:4px;font-size:1.05rem;font-weight:1000;letter-spacing:-.02em}.summary__card--net .summary__amount,.summary__card--net .label{color:#087a54}.ytd{margin-top:16px;border-top:2px solid #1b2638;padding-top:12px}.ytd h4{margin:0 0 8px;font-size:.8rem}.ytd__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ytd__item{background:#f2f5f9;border-radius:8px;padding:9px}.ytd__item .money{display:block;font-weight:950;margin-top:3px;font-size:.78rem}.stub__footer{margin-top:17px;padding-top:10px;border-top:1px solid #d8dfea;color:#6c7890;font-size:.57rem;line-height:1.5}.local-only{margin-top:14px;background:#ecf6ff;border:1px solid #badcff;border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;color:#21476c;font-size:.78rem;line-height:1.5}.local-only__icon{width:29px;height:29px;border-radius:9px;background:#d4ebff;display:grid;place-items:center;flex:0 0 auto;font-weight:950}.local-only strong{display:block;color:#163a5c;margin-bottom:2px}.footer{background:#fff;border-top:1px solid var(--border)}.footer__inner{padding:24px 0;display:flex;justify-content:space-between;gap:18px;color:#69768c;font-size:.75rem}.toast{position:fixed;right:18px;bottom:18px;z-index:20;max-width:360px;padding:13px 15px;border-radius:12px;background:#142238;color:#fff;box-shadow:0 18px 45px #00000038;opacity:0;transform:translateY(10px);pointer-events:none;transition:.22s ease;font-size:.82rem}.toast.is-visible{opacity:1;transform:translateY(0)}@media(max-width:980px){.app-grid{grid-template-columns:1fr}.preview-wrap{position:static}}@media(max-width:680px){.topbar__inner{min-height:100px;align-items:flex-start;padding:18px 0}.privacy-pill{display:none}.page{padding-top:18px}.panel__header,.form,.actions{padding-left:16px;padding-right:16px}.fields{grid-template-columns:1fr}.field--full{grid-column:auto}.stub{padding:18px;border-radius:12px}.stub__header,.employee-row{flex-direction:column}.stub__meta{text-align:left}.tables,.summary,.ytd__grid{grid-template-columns:1fr}.footer__inner{flex-direction:column}.watermark span{font-size:2.6rem;border-width:5px}}@media print{body *{visibility:hidden!important}#paystub-preview,#paystub-preview *{visibility:visible!important}#paystub-preview{position:absolute;inset:0;width:100%;box-shadow:none;border:0}}
