@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fafafa;--surface:#fff;--surface-alt:#f7f7f8;--text-strong:#0a0a0a;--text-muted:#8a8f98;--line:#0f172a14;--line-strong:#0f172a24;--primary:#0065af;--primary-strong:#274488;--primary-tint:#0065af14;--teal:#059669;--warn:#b45309;--danger:#dc2626;--shadow-sm:0 1px 2px #0f172a0a;--shadow:0 8px 24px -8px #0f172a1a, 0 2px 6px -2px #0f172a0d;--radius-lg:22px;--radius-md:12px;--radius-sm:9px;--top-control-height:76px}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--text-strong);margin:0;font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.site-header{border-bottom:1px solid var(--line);background:var(--surface)}.site-header-inner{justify-content:space-between;align-items:center;gap:16px;max-width:1320px;margin:0 auto;padding:16px 32px;display:flex}.site-logo{flex-shrink:0;align-items:center;gap:10px;display:flex}.site-logo img{width:auto;height:32px;display:block}.site-logo-divider{background:var(--line);width:1px;height:22px}.site-logo-label{color:var(--text-muted);letter-spacing:.01em;font-size:14px;font-weight:700}.site-nav{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.site-nav-link{color:var(--text-muted);background:0 0;border:none;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;transition:color .15s,background .15s}.site-nav-link:hover{color:var(--text-strong);background:var(--surface-alt)}.site-nav-link-active{color:var(--primary-strong);background:var(--primary-tint)}.mobile-nav-trigger{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-sm);color:var(--text-strong);flex-shrink:0;justify-content:center;align-items:center;padding:8px;display:none}.mobile-nav-trigger:hover{background:var(--surface-alt)}@media (max-width:720px){.site-header-inner{flex-wrap:wrap;padding:12px 16px}.mobile-nav-trigger{display:flex}.site-nav{border-top:1px solid var(--line);flex-direction:column;order:3;align-items:stretch;gap:2px;width:100%;margin-top:4px;padding-top:10px;display:none}.site-nav-open{display:flex}.site-nav-link{text-align:left;border-radius:var(--radius-sm);padding:12px 14px}}.app-shell{max-width:1320px;margin:0 auto;padding:40px 32px}.context-strip{flex-wrap:wrap;gap:10px;margin-bottom:28px;display:flex}.context-pill{border:1px solid var(--line);background:var(--surface);color:var(--text-muted);letter-spacing:.01em;border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:500}.save-status-pill{color:var(--text-muted);padding:8px 4px;font-size:12px;font-weight:500}@media (max-width:640px){.save-status-pill{display:none}}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:4px;display:flex}h1,h2,h3{color:var(--text-strong);margin:0;font-family:Inter,Segoe UI,sans-serif}h1{letter-spacing:-.03em;font-size:30px;font-weight:700}h2{letter-spacing:-.01em;margin-bottom:18px;font-size:15px;font-weight:700}h3{letter-spacing:-.01em;margin-bottom:10px;font-size:14px;font-weight:700}.hero-card,.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.hero-card,.panel{padding:36px 40px}.workspace-grid{grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:32px;display:grid}@media (max-width:900px){.workspace-grid{grid-template-columns:1fr}}@media (max-width:640px){.app-shell{padding:20px 16px}.hero-card,.panel{padding:20px 18px}}.nav-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}@media (max-width:980px){.nav-grid{grid-template-columns:1fr}}.action-row{flex-wrap:wrap;gap:10px;display:flex}.period-toolbar{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-alt);flex-shrink:0;align-self:center;align-items:center;gap:4px;padding:5px;display:flex}.period-toolbar-select{color:var(--text-strong);border-radius:var(--radius-sm);background:0 0;border:none;outline:none;min-height:38px;padding:8px 10px;font-size:13.5px;font-weight:600;transition:background .15s}.period-toolbar-select:hover{background:var(--surface)}.period-toolbar-select:focus-visible{background:var(--surface);box-shadow:0 0 0 2px var(--primary-tint)}.period-toolbar-btn{color:var(--text-muted);border-radius:var(--radius-sm);background:0 0;border:none;min-height:38px;padding:8px 12px;font-size:13px;font-weight:600;transition:background .15s,color .15s}.period-toolbar-btn:hover{background:var(--surface);color:var(--text-strong)}.period-toolbar-divider{background:var(--line-strong);width:1px;height:22px;margin:0 2px}@media (max-width:720px){.period-toolbar{flex-wrap:wrap;justify-content:center;width:100%}}.input-group{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.input-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;font-size:11.5px;font-weight:600}.input-group input,.input-group select{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;outline:none;padding:11px 14px;transition:border-color .15s,box-shadow .15s}.input-group input:focus,.input-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}.btn{border-radius:var(--radius-sm);color:#fff;background:var(--primary);letter-spacing:-.005em;border:none;padding:12px 20px;font-size:14px;font-weight:600;transition:transform .15s,background .15s,box-shadow .15s}.btn:hover{background:var(--primary-strong)}.btn-secondary{color:var(--text-strong);border:1px solid var(--line);background:#fff;font-weight:600}.btn-secondary:hover{background:var(--surface-alt);border-color:var(--line-strong)}.summary-grid,.report-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}@media (max-width:780px){.summary-grid,.report-grid{grid-template-columns:1fr}}.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:480px){.compact-grid{gap:8px}.compact-grid .summary-card{padding:12px 10px}}.payroll-snapshot-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (max-width:1100px){.payroll-snapshot-grid{grid-template-columns:1fr}}.payslip-preview{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-alt);padding:20px}.payslip-line{border-bottom:1px dashed var(--line-strong);font-variant-numeric:tabular-nums;justify-content:space-between;gap:10px;padding:10px 0;display:flex}.payslip-line-action{align-items:center}.line-action-cell{align-items:center;gap:8px;display:flex}.payslip-delete-btn{padding:6px 10px;font-size:12px}.payslip-line:last-child{border-bottom:0}.payslip-total{color:var(--text-strong);font-weight:700}.summary-card{border-radius:var(--radius-md);border:1px solid var(--line);border-top:2px solid var(--primary);background:#fff;padding:18px 20px}.stat-card{text-align:center;min-width:0}.stat-card strong{letter-spacing:-.01em;font-variant-numeric:tabular-nums;font-size:clamp(15px,4.5vw,20px);font-weight:700;display:block}.report-card{border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;padding:20px 22px}.table-wrapper{border:1px solid var(--line);border-radius:var(--radius-md);overflow-x:auto}@media (max-width:640px){.hero-add-employer{width:100%}}.client-list-mobile{display:none}@media (max-width:640px){.desktop-client-table{display:none}.client-list-mobile{border:1px solid var(--line);border-radius:var(--radius-md);display:block;overflow:hidden}.client-row-mobile{text-align:left;background:var(--surface);border:none;border-bottom:1px solid var(--line);width:100%;padding:14px 16px;display:block}.client-row-mobile:last-child{border-bottom:none}.client-row-mobile:hover{background:var(--surface-alt)}.client-row-mobile-main{justify-content:space-between;align-items:center;gap:10px;display:flex}.client-row-mobile-name{color:var(--text-strong);font-size:15px;font-weight:700}.client-row-mobile-chevron{color:var(--text-muted);flex-shrink:0}.client-row-mobile-meta{color:var(--text-muted);align-items:center;gap:8px;margin-top:6px;font-size:12px;display:flex}.client-row-mobile-taxref{white-space:nowrap;text-overflow:ellipsis;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden}.client-row-mobile-postcode{white-space:nowrap;flex-shrink:0}.client-row-mobile-count{background:var(--surface-alt);color:var(--text-muted);border-radius:999px;margin-top:8px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-block}}.table{border-collapse:collapse;width:100%}.table th,.table td{border-bottom:1px solid var(--line);text-align:left;padding:14px 16px}@media (max-width:640px){.table-cards-on-mobile thead{display:none}.table-cards-on-mobile,.table-cards-on-mobile tbody,.table-cards-on-mobile tr{width:100%;display:block}.table-cards-on-mobile tr{border-bottom:1px solid var(--line);padding:12px 4px}.table-cards-on-mobile tr:last-child{border-bottom:none}.table-cards-on-mobile td{text-align:right;border-bottom:none;justify-content:space-between;align-items:center;gap:12px;padding:6px 8px;display:flex}.table-cards-on-mobile td[data-label]:before{content:attr(data-label);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:left;font-size:11px;font-weight:700}}.table th{background:var(--surface-alt);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;z-index:1;font-size:10.5px;font-weight:700;position:sticky;top:0}.table-row-selected{background:var(--primary-tint)}.small-note{color:var(--text-muted);font-size:13px}.hero-subtitle{margin:6px 0 0}.employee-panel{max-height:720px;overflow:auto}.employee-list{flex-direction:column;gap:8px;display:flex}.employee-item{border:1px solid var(--line);border-radius:var(--radius-md);width:100%;color:var(--text-strong);text-align:left;background:#fff;justify-content:space-between;align-items:center;gap:8px;padding:13px 14px;transition:border-color .15s,background .15s;display:flex}@media (max-width:640px){.employee-list{gap:6px}.employee-item{padding:10px 12px}.employee-item .small-note{font-size:12px}}.chip-row{flex-wrap:wrap;gap:8px;margin-bottom:18px;display:flex}.chip{border:1px solid var(--line);color:var(--text-muted);background:#fff;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;transition:border-color .15s,background .15s,color .15s}.chip-active{background:var(--primary-tint);color:var(--primary-strong);border-color:#0065af38}.status{text-transform:uppercase;letter-spacing:.06em;border-radius:999px;align-self:center;padding:5px 10px;font-size:10.5px;font-weight:700}.status-active{color:var(--teal);background:#ecfdf5;border:1px solid #0596692e}.status-leaver{color:var(--warn);background:#fffbeb;border:1px solid #b453092e}.status-exception{color:var(--danger);background:#fef2f2;border:1px solid #dc26262e}.variance-positive{color:var(--teal);font-weight:700}.variance-negative{color:var(--danger);font-weight:700}.employee-item-chevron{color:var(--text-muted);flex-shrink:0}.swipeable-row{border-radius:var(--radius-md);position:relative;overflow:hidden}.swipeable-row-action{background:var(--primary);color:#fff;border:none;width:96px;font-size:13px;font-weight:600;position:absolute;top:0;bottom:0;right:0}.swipeable-row-content{touch-action:pan-y;background:var(--surface,#fff);position:relative}.swipeable-row-content .employee-item{border-radius:var(--radius-md)}.bottom-sheet-overlay{z-index:50;background:#0f172a66;position:fixed;inset:0}.bottom-sheet-content{z-index:51;background:var(--surface,#fff);border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);max-height:85vh;box-shadow:var(--shadow);flex-direction:column;padding:10px 20px 24px;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-sheet-handle{background:var(--line-strong);border-radius:999px;flex-shrink:0;width:40px;height:4px;margin:0 auto 14px}.bottom-sheet-title{color:var(--text-strong);margin:0 0 12px;font-size:17px;font-weight:700}.bottom-sheet-body{overflow-y:auto}.panel-heading-toggle{color:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;padding:0;display:flex}.section-collapse-wrapper{grid-template-rows:0fr;transition:grid-template-rows .2s ease-in-out;display:grid}.section-collapse-open{grid-template-rows:1fr}.section-collapse-inner{overflow:hidden}