:root{--bg:#020b14;--panel:#071a2b;--panel2:#0b2438;--line:rgba(55,172,240,.28);--cyan:#17c4ff;--cyan2:#78dcff;--text:#f4fbff;--muted:#88a6ba;--green:#25e59b;--red:#ff657c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#010810}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(rgba(1,9,17,.78),rgba(1,9,17,.88)),url('/assets/payroll-background.jpg') center/cover fixed;color:var(--text)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer;color:white;background:linear-gradient(90deg,#078fe1,#13b9fa);border:1px solid #36c8ff;border-radius:8px;padding:10px 14px;font-weight:800}.shell aside{position:fixed;left:0;top:0;bottom:0;width:260px;background:linear-gradient(180deg,rgba(1,14,27,.98),rgba(1,9,18,.96));border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:13px;padding:8px 10px 24px}.brand-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#0b2a48,#0a83cd);border:1px solid #39c7ff;box-shadow:0 0 25px rgba(0,177,255,.16);font-size:25px;font-weight:1000}.brand b,.brand span{display:block}.brand b{font-size:24px;letter-spacing:.05em}.brand span{color:var(--cyan);font-weight:900;letter-spacing:.34em;font-size:10px;margin-top:2px}.shell nav{display:flex;flex-direction:column;gap:5px}.shell nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid transparent;border-radius:8px;color:#b2c8d7;font-size:13px}.shell nav a span{width:22px;text-align:center;font-size:18px}.shell nav a:hover,.shell nav a.active{color:#fff;background:linear-gradient(90deg,rgba(0,169,255,.22),rgba(0,83,145,.08));border-color:rgba(39,190,255,.32);box-shadow:inset 3px 0 0 var(--cyan)}.side-note{margin-top:auto;border:1px solid var(--line);border-radius:10px;background:rgba(8,30,48,.68);padding:12px}.side-note small,.side-note b,.side-note span{display:block}.side-note small{font-size:8px;letter-spacing:.14em;color:#7194aa}.side-note b{font-size:12px;margin-top:5px;color:#c9f4ff}.side-note span{font-size:9px;color:#6d8a9f;line-height:1.4;margin-top:3px}.logout{width:100%;margin-top:9px;background:rgba(8,28,44,.9);border-color:rgba(66,168,228,.24)}header{position:fixed;top:0;left:260px;right:0;height:68px;background:rgba(1,12,23,.88);border-bottom:1px solid rgba(54,163,228,.18);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:10}header small,header b{display:block}header>div:first-child small{font-size:8px;letter-spacing:.14em;color:#6c8ba0}header>div:first-child b{font-size:14px;margin-top:3px}.header-right{display:flex;align-items:center;gap:18px}.live-clock{border-left:1px solid rgba(77,166,220,.2);padding-left:16px}.live-clock small{font-size:9px;color:#71cfff}.live-clock b{font-size:17px;margin-top:2px}.admin-chip{display:flex;gap:9px;align-items:center}.admin-chip>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#0c4f7a;border:1px solid #43caff;font-weight:900}.admin-chip b{font-size:11px}.admin-chip small{font-size:8px;color:#7390a5;margin-top:2px}.shell main{margin-left:260px;padding:92px 24px 38px;min-height:100vh}.hero{border:1px solid var(--line);border-radius:14px;padding:25px 28px;background:linear-gradient(110deg,rgba(5,30,49,.92),rgba(2,14,25,.7));position:relative;overflow:hidden}.hero:after{content:"";position:absolute;right:-110px;top:-170px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(0,183,255,.24),transparent 60%)}.eyebrow{font-size:9px;letter-spacing:.2em;color:var(--cyan2);font-weight:900}.hero h1,.title-row h1,.employee-head h1{margin:6px 0;font-size:38px;letter-spacing:-.04em}.hero p,.title-row p,.employee-head p{margin:0;color:#91aabd;line-height:1.5}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:13px 0}.metrics article{min-height:84px;border:1px solid rgba(32,187,255,.35);background:linear-gradient(180deg,rgba(10,35,55,.9),rgba(6,24,39,.9));border-radius:10px;padding:14px 18px;display:flex;align-items:center;gap:16px}.metrics article>span{font-size:33px;color:var(--cyan)}.metrics b,.metrics small{display:block}.metrics b{font-size:25px}.metrics small{font-size:10px;color:#8ca6b8;margin-top:4px}.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:13px;margin-bottom:13px}.panel{border:1px solid rgba(56,161,225,.28);border-radius:11px;background:linear-gradient(180deg,rgba(7,26,43,.91),rgba(4,18,31,.9));overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.16)}.panel-head{min-height:46px;padding:0 14px;display:flex;align-items:center;border-bottom:1px solid rgba(65,164,225,.16);background:rgba(11,37,57,.54)}.panel-head b{font-size:13px}.panel-head a{margin-left:auto;color:#4ed2ff;font-size:10px;border:1px solid rgba(41,192,255,.26);padding:6px 9px;border-radius:6px}.clocked-list{padding:8px}.clocked-list>div{display:grid;grid-template-columns:13px 1fr auto;gap:10px;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,.04)}.clocked-list b,.clocked-list small{display:block}.clocked-list b{font-size:11px}.clocked-list small{font-size:9px;color:#7897ab;margin-top:2px}.clocked-list time{font-size:9px;color:#76d6ff}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(37,229,155,.45)}.connection{padding:12px}.connection>div{padding:10px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;gap:8px;align-items:center}.connection>div:first-child{display:grid;grid-template-columns:14px 1fr;grid-template-areas:"dot name" "dot text"}.connection>div:first-child .status-dot{grid-area:dot}.connection>div:first-child b{grid-area:name}.connection>div:first-child small{grid-area:text}.connection>div:not(:first-child){justify-content:space-between}.connection span,.connection small{font-size:9px;color:#7693a8}.connection b{font-size:11px}.table-panel{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.05);font-size:10px}th{font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:#7696aa;background:rgba(8,29,46,.72)}td b,td small{display:block}td small{color:#6d899d;margin-top:2px}.live{color:#34e5a2;font-weight:800}.empty{color:#718da1;font-size:10px;padding:14px}.flash{padding:10px 13px;margin-bottom:12px;border-radius:8px;font-size:11px}.flash.ok{background:rgba(27,180,117,.14);border:1px solid rgba(36,229,154,.26);color:#8ff2c6}.flash.error{background:rgba(203,54,79,.14);border:1px solid rgba(255,98,121,.26);color:#ffafbb}.title-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:13px}.title-row h1{font-size:32px}.employee{display:flex;align-items:center;gap:9px}.employee>span,.employee-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#0b5b8e,#09263d);border:1px solid #40c8ff;font-weight:900}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;border:1px solid rgba(74,157,208,.24);background:rgba(54,106,137,.14);color:#a2bacb;font-size:8px;font-weight:900}.badge.green{color:#83f0bd;border-color:rgba(39,226,150,.28);background:rgba(29,179,116,.12)}.badge.warn{color:#ffd384;border-color:rgba(255,190,57,.25);background:rgba(178,120,19,.12)}.mini{display:inline-block;padding:6px 9px;border:1px solid rgba(44,190,255,.3);border-radius:6px;color:#54d3ff;font-size:9px}.back{display:inline-block;margin-bottom:13px;color:#77d8ff;font-size:10px}.employee-head{display:grid;grid-template-columns:60px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);background:rgba(6,27,44,.88);padding:18px;border-radius:12px;margin-bottom:13px}.employee-avatar{width:60px;height:60px;font-size:20px}.employee-head h1{font-size:28px}.form-panel{padding-bottom:14px}.form-panel>label,.settings-form>label{display:block;margin:12px 14px 0;font-size:9px;color:#96b2c4;font-weight:800}.form-panel input,.form-panel select,.settings-form input,.settings-form select{width:100%;margin-top:5px;padding:10px 11px;border-radius:7px;border:1px solid rgba(72,163,220,.28);background:#051522;color:white}.form-panel>button,.settings-form>button{margin:14px}.big-time{display:grid;grid-template-columns:1fr 1fr;padding:15px;gap:8px}.big-time small{font-size:8px;color:#718fa4;text-transform:uppercase}.big-time b{font-size:26px}.admin-clock{padding:0 15px 15px}.admin-clock button{width:100%}.admin-clock small{display:block;color:#6e899d;font-size:8px;line-height:1.45;margin-top:7px}.danger{background:linear-gradient(90deg,#a52e44,#db4961);border-color:#ef6a7f}.settings-form{max-width:700px;padding-bottom:4px}.readonly{margin:12px 14px;padding:11px;border:1px solid rgba(64,161,222,.17);border-radius:8px;background:rgba(5,22,36,.5)}.readonly span,.readonly b,.readonly small{display:block}.readonly span{font-size:8px;color:#7694a8}.readonly b{font-size:12px;margin-top:3px}.readonly small{font-size:8px;color:#617f93;margin-top:3px}.legal-note{font-size:9px;color:#68869a;line-height:1.5;border-left:2px solid #2abfff;padding-left:10px}.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.2fr 1fr;background:linear-gradient(90deg,rgba(1,13,24,.7),rgba(1,8,15,.96)),url('/assets/payroll-background.jpg') center/cover}.login-brand{padding:9vh 7vw;display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(53,166,231,.2)}.brand-big{display:flex;align-items:center;gap:15px;margin-bottom:58px}.brand-big .brand-mark{width:74px;height:74px;font-size:38px}.brand-big b,.brand-big span{display:block}.brand-big b{font-size:34px;letter-spacing:.06em}.brand-big span{font-size:12px;letter-spacing:.37em;color:var(--cyan);font-weight:900}.login-brand h1{font-size:56px;line-height:1.02;letter-spacing:-.05em;margin:14px 0}.login-brand p{max-width:720px;color:#a2b7c6;line-height:1.65}.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:35px}.pills span{padding:6px 9px;border-radius:999px;border:1px solid rgba(48,188,255,.28);font-size:8px;color:#8addff;font-weight:900}.login-side{display:grid;place-items:center;padding:30px}.login-card{width:min(430px,100%);border:1px solid rgba(55,168,232,.32);border-radius:15px;background:rgba(7,27,44,.92);padding:28px;box-shadow:0 25px 70px rgba(0,0,0,.32)}.login-card h2{font-size:27px;margin:8px 0}.login-card p{font-size:11px;color:#8da7b9;line-height:1.5}.login-card label{display:block;margin-top:14px;font-size:9px;font-weight:800}.login-card input{width:100%;margin-top:6px;padding:11px;border-radius:8px;border:1px solid rgba(67,162,222,.32);background:#041421;color:white}.login-card button{width:100%;margin-top:17px}.secure-note{margin-top:15px;padding:10px;border:1px solid rgba(50,168,234,.17);border-radius:8px;background:rgba(4,19,31,.55);font-size:8px;color:#7392a6}.error-page{min-height:100vh;display:grid;place-items:center;text-align:center}.error-page a{color:#54d3ff}@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.login-wrap{grid-template-columns:1fr}.login-brand{display:none}}@media(max-width:760px){.shell aside{position:relative;width:100%;height:auto}.shell nav{display:grid;grid-template-columns:repeat(2,1fr)}.side-note,.logout{display:none}header{left:0;position:sticky}.shell main{margin-left:0;padding:24px 12px}.metrics{grid-template-columns:1fr}.header-right .admin-chip{display:none}.hero h1{font-size:31px}.employee-head{grid-template-columns:52px 1fr}.employee-head>.badge{grid-column:1/-1}.login-brand h1{font-size:40px}}

/* v1.1 StaffZone SSO / access control */
.access-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:12px;background:linear-gradient(135deg,#21b8ff,#0c73e8);color:#fff;text-decoration:none;font-weight:900;box-shadow:0 12px 34px rgba(0,132,255,.22)}
.payroll-access-page{min-height:100vh;display:grid;place-items:center;padding:32px;background:radial-gradient(circle at 50% 0%,rgba(15,126,210,.17),transparent 35%),#020b13}
.payroll-access-card{width:min(650px,100%);padding:42px;border-radius:24px;background:linear-gradient(145deg,#061827,#091f31);border:1px solid rgba(43,177,255,.3);box-shadow:0 30px 90px rgba(0,0,0,.5);text-align:center}
.payroll-access-card .brand-big{justify-content:center;margin-bottom:28px}
.payroll-access-card h1{font-size:clamp(2rem,5vw,3.7rem);line-height:1.02;margin:.4rem 0 1rem}
.payroll-access-card p{color:#abc2d5;line-height:1.65;margin:0 auto 1.4rem;max-width:520px}
.payroll-access-card small{display:block;color:#71889b;margin-top:18px}
.local-admin{margin-top:22px;text-align:left;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
.local-admin summary{cursor:pointer;color:#7f96aa;font-size:12px}
.local-admin form{margin-top:15px}

/* StaffZone pull sync + branded paystubs */
.sync-button{white-space:nowrap;min-height:42px;background:linear-gradient(135deg,#0b89dc,#7434e8);border-color:rgba(89,203,255,.55)}
.email-link{color:#61d9ff;text-decoration:none}.email-link:hover{text-decoration:underline}
.employee-head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:9px}.primary-mini{background:linear-gradient(135deg,rgba(19,168,239,.2),rgba(128,54,236,.18));color:#bceeff;border-color:rgba(70,201,255,.48)}
.stub-form{padding:18px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.stub-form label,.notes-label{font-size:9px;color:#9ab4c5;font-weight:800}.stub-form input,.stub-form textarea{width:100%;margin-top:6px;padding:11px;border-radius:8px;border:1px solid rgba(72,163,220,.28);background:#051522;color:white}.stub-form textarea{resize:vertical}.stub-form-section{margin-top:20px;padding-top:18px;border-top:1px solid rgba(72,163,220,.16)}.stub-form-section h3{margin:0 0 12px;font-size:13px}.notes-label{display:block;margin-top:18px}.check-row{display:flex!important;align-items:center;gap:9px;margin:18px 0!important}.check-row input{width:auto!important;margin:0!important}.create-stub-button{min-height:46px;padding-left:22px;padding-right:22px}.stub-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.stub-toolbar>div{display:flex;gap:8px;align-items:center}.stub-toolbar form{margin:0}.stub-toolbar button.mini{background:rgba(6,35,55,.9);padding:7px 10px}
.paystub-paper{max-width:1050px;margin:0 auto;background:#fff;color:#0a1520;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.3);border:1px solid rgba(77,188,255,.24)}.stub-head{position:static;height:auto;background:linear-gradient(115deg,#06131f,#0a2337 62%,#201145);padding:24px 28px;display:flex;align-items:center;gap:20px;border:0}.stub-head img{width:92px;height:64px;object-fit:contain}.stub-head span,.stub-head h1,.stub-head small{display:block}.stub-head span{font-size:10px;letter-spacing:.22em;color:#55d5ff;font-weight:900}.stub-head h1{font-size:27px;margin:3px 0;color:#fff}.stub-head small{color:#b7c9d8}.stub-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px 28px;border-bottom:1px solid #dfe8ef;background:#f7fbfe}.stub-meta small,.stub-meta b,.stub-meta span{display:block}.stub-meta small{font-size:9px;letter-spacing:.11em;color:#71889a;font-weight:900}.stub-meta b{font-size:16px;margin-top:5px}.stub-meta span{font-size:10px;color:#718190;margin-top:4px}.stub-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:22px;padding:25px 28px}.stub-grid h3{font-size:11px;letter-spacing:.14em;color:#1a759f;margin:0 0 9px}.stub-grid table{min-width:0;color:#101c26}.stub-grid th{background:#edf7fd;color:#46677a}.stub-grid td,.stub-grid th{border-color:#e7eef3;font-size:9px}.stub-grid section:nth-child(2) th{background:#f5efff;color:#684c89}.stub-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 28px 25px}.stub-summary>div{border:1px solid #dce9f1;border-radius:10px;padding:14px;background:#f7fbfd}.stub-summary small,.stub-summary b,.stub-summary span{display:block}.stub-summary small{font-size:8px;color:#6d8291;text-transform:uppercase;font-weight:900}.stub-summary b{font-size:23px;margin-top:4px}.stub-summary span{font-size:9px;color:#7d8f9c;margin-top:4px}.stub-summary .net{background:linear-gradient(135deg,#071928,#0d2c43);border-color:#1e9edc;color:white}.stub-summary .net small{color:#6fdcff}.stub-summary .net span{color:#91b9cf}.stub-notes{margin:0 28px 25px;padding:12px 14px;border-left:3px solid #843cf0;background:#f7f3ff}.stub-notes small{font-size:8px;color:#775197;font-weight:900}.stub-notes p{margin:5px 0 0;font-size:10px;color:#3f4b55}.paystub-paper>footer{padding:13px 28px;background:#f1f6f9;color:#788b99;font-size:8px;text-align:center}.logo-mark{padding:4px}.logo-mark img{width:100%;height:100%;object-fit:contain}
@media(max-width:900px){.form-grid{grid-template-columns:1fr 1fr}.stub-grid{grid-template-columns:1fr}.stub-summary{grid-template-columns:1fr}.stub-toolbar{align-items:flex-start;gap:12px;flex-direction:column}}@media(max-width:600px){.form-grid,.stub-meta{grid-template-columns:1fr}}
.stub-head .employer-line{margin-top:3px;color:#8ba7ba;font-size:8px}
/* v1.3 payroll statement layout */
.form-panel textarea{width:100%;margin-top:5px;padding:10px 11px;border-radius:7px;border:1px solid rgba(72,163,220,.28);background:#051522;color:white;resize:vertical}.form-help{display:block;margin:10px 14px 0;color:#6e8ca0;font-size:8px;line-height:1.5}.stub-form-section.first{margin-top:0;padding-top:0;border-top:0}
.paystub-dayforce{max-width:1120px;border-radius:4px;padding:26px 28px 20px;background:#fff}.paystub-dayforce .stub-company{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px;position:relative;padding-bottom:18px}.stub-branding{display:flex;gap:12px;align-items:flex-start}.stub-branding img{width:115px;height:75px;object-fit:contain}.stub-branding b,.stub-branding span{display:block}.stub-branding b{font-size:22px;color:#0b2e58;letter-spacing:.04em;margin-top:7px}.stub-branding span{font-size:9px;color:#0875c1;letter-spacing:.22em;font-weight:900;margin-top:4px}.stub-info-block{display:grid;grid-template-columns:105px 1fr;align-content:start;gap:5px 8px;font-size:10px;line-height:1.35}.stub-info-block b{color:#17375f}.stub-info-block span{color:#263f59}.stub-employer{grid-column:1/2;font-size:9px;line-height:1.55;color:#304b64;margin-top:-25px}.statement-table,.deposit-table{min-width:0;width:100%;border-collapse:collapse;color:#122b49}.statement-table th,.statement-table td,.deposit-table th,.deposit-table td{border:1px solid #aac5da;padding:6px 8px;font-size:9px}.statement-table thead tr:first-child th{background:#1767a4;color:white;font-size:10px}.statement-table thead tr:nth-child(2) th{background:#d9eafb;color:#13345a}.statement-table thead small{font-size:8px}.statement-table th:not(:first-child),.statement-table td:not(:first-child){text-align:right}.statement-table .stub-section td{background:#e1eff9;color:#12385f;font-weight:900;text-align:left!important;letter-spacing:.04em}.statement-table .stub-total-row td{background:#eef7fd;font-weight:900}.statement-table .stub-net-row td{background:#1767a4;color:white;font-weight:900;font-size:10px}.deposit-table{margin-top:8px}.deposit-table th{background:#e1eff9;color:#12385f;font-weight:900}.deposit-table td:last-child,.deposit-table th:last-child{text-align:right}.stub-lieu{margin-top:9px;border-left:3px solid #1767a4;padding:7px 10px;background:#f0f7fc;color:#38536d;font-size:9px}.paystub-dayforce .stub-notes{margin:9px 0 0}.paystub-dayforce>footer{display:flex;justify-content:space-between;align-items:end;margin-top:22px;padding:11px 2px 0;border-top:2px solid #1681d3;background:transparent;color:#4e6b83;text-align:left}.paystub-dayforce>footer b{font-size:15px;color:#12385f;letter-spacing:.06em}.paystub-dayforce>footer span{font-size:8px}
@media(max-width:900px){.paystub-dayforce .stub-company{grid-template-columns:1fr}.stub-employer{grid-column:auto;margin-top:0}.stub-info-block{grid-template-columns:120px 1fr}.statement-table{min-width:780px}.paystub-dayforce{overflow:auto}}

.staffzone-return{display:flex;align-items:center;justify-content:center;margin:12px 12px 4px;padding:10px 12px;border:1px solid rgba(73,196,255,.35);border-radius:10px;background:rgba(0,174,255,.08);color:#8edcff;text-decoration:none;font-weight:800;font-size:12px;letter-spacing:.03em}.staffzone-return:hover{background:rgba(0,174,255,.18);border-color:#00aeff;color:#fff}