/* Monthly payroll — approved mobile surface, backed by the live payroll state. */
body.payhub-view{background:#e2ecef;background-image:none;overflow-x:hidden}
body.payhub-view>.top,body.payhub-view>#dock,body.payhub-view>.sidetab{display:none!important}
body.payhub-view .wrap{padding:0;max-width:none}
.pm-dashboard{--pm-accent:#5fddee;position:relative;width:100%;max-width:720px;min-height:100dvh;margin:0 auto;padding:calc(22px + env(safe-area-inset-top,0px)) 18px calc(104px + env(safe-area-inset-bottom,0px));overflow:hidden;background:linear-gradient(160deg,#e4e6ea 0%,#e2ecf0 55%,#bdeff7 100%);color:#1e1e1e}
.pm-topbar{direction:ltr;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:66px;padding:9px 10px 9px 18px;border:1px solid #e2e4e8;border-radius:999px;background:#fff;box-shadow:0 8px 20px #1e1e1e0d}
.pm-logo{display:block;width:auto;height:36px;max-width:124px;object-fit:contain}
.pm-desktop-nav{display:none}
.pm-clock{font-size:12px;font-weight:500;white-space:nowrap;color:#1e1e1e;font-variant-numeric:tabular-nums}
.pm-clock i{font-style:normal;color:#c9ccd2;margin:0 5px}
.pm-top-actions{display:flex;gap:7px;flex:none}.pm-icon-button{width:42px;height:42px;padding:0;border:1px solid #e2e4e8;border-radius:14px;background:#fff;color:#1e1e1e;display:grid;place-items:center;text-decoration:none}.pm-icon-button svg{width:19px;height:19px}
.pm-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:30px 0 22px}.pm-heading h2{margin:0;font-size:30px;font-weight:400;line-height:1.2}.pm-title-copy{display:grid;gap:5px}.pm-welcome{display:flex;align-items:center;gap:7px;margin:0;color:#626a70;font-size:11px}.pm-welcome>div{display:flex;flex-wrap:wrap;gap:7px}.pm-workspace-content>.pm-welcome{margin:0 0 14px}.pm-welcome strong{color:inherit;font-weight:700}.pm-welcome span:before{content:'·';margin-inline-end:7px}.pm-notes-pill{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 17px;border:1px solid #e7e9eb;border-radius:999px;background:#fffffff2;color:#25282b;box-shadow:0 4px 14px #3340470a;font-size:12px;font-weight:600;white-space:nowrap}.pm-notes-pill:active{transform:translateY(1px)}.pm-month{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:38px;padding:7px 12px;border-radius:999px;background:#ffffffd9;font-size:13px;color:#1e1e1e;white-space:nowrap}.pm-month svg{width:14px;height:14px}
.pm-kpis{display:grid;grid-template-columns:1.7fr 1fr .8fr;align-items:end;gap:10px;margin-bottom:22px}.pm-kpi{text-align:center}.pm-kpi:first-child{text-align:start}.pm-kpi strong{display:block;font-size:clamp(31px,10vw,44px);font-weight:300;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}.pm-kpi span{display:block;margin-top:7px;font-size:12px;font-weight:500}
.pm-status{display:grid;grid-template-columns:74px 66px minmax(150px,1fr) minmax(134px,auto);gap:8px;align-items:end;margin-bottom:20px}.pm-status-item{display:flex;min-width:0;flex-direction:column;align-items:stretch;gap:7px}.pm-status-item label{display:block;width:100%;font-size:11px;font-weight:500;text-align:center}.pm-status-item b{display:grid;place-items:center;width:100%;min-height:46px;padding:8px 10px;border-radius:999px;font-size:13px;font-weight:400;text-align:center;white-space:nowrap}.pm-status-item.held b{background:#35373D;color:#fff}.pm-status-item.bank b{background:var(--pm-accent);color:#0b3b44}.pm-status-item.cash b{border:2px solid #fff;background:repeating-linear-gradient(-55deg,#ffffffe6 0 2px,transparent 2px 11px)}.pm-status-item.month .pm-month{width:100%;min-height:46px;box-shadow:0 2px 10px #3340470b}
.pm-pay-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}.pm-pay-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:156px;overflow:hidden;padding:16px;border-radius:28px;text-align:start;text-decoration:none}.pm-pay-card.bank{background:#35373D;color:#fff}.pm-pay-card.cash{background:#ffffff99;color:#1e1e1e}.pm-pay-watermark{position:absolute;inset-inline-start:-4px;top:46px;font:600 58px/1 Arial,sans-serif;direction:ltr;color:#2e2e2e}.pm-pay-card.cash .pm-pay-watermark{color:#1e1e1e0f}.pm-pay-meta,.pm-pay-total{position:relative;z-index:1}.pm-pay-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}.pm-pay-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#1e1e1e}.pm-pay-card.cash .pm-pay-count{padding:4px 10px;border-radius:999px;background:var(--pm-accent);color:#0b3b44}.pm-pay-total strong{display:block;font-size:21px;font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums}.pm-pay-total span{display:block;font-size:10.5px;opacity:.72}
.pm-insights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pm-panel{min-height:218px;padding:14px;border-radius:28px;background:#ffffff99}.pm-distribution{display:flex;flex-direction:column}.pm-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:500}.pm-open{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#1e1e1e}.pm-donut{--bank-pct:50;position:relative;width:148px;height:148px;margin:auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--pm-accent) calc(var(--bank-pct)*1%),#8b9297 calc(var(--bank-pct)*1%));box-shadow:inset 0 0 0 13px #edf4f5}.pm-donut:after{content:"";position:absolute;inset:24px;border-radius:50%;background:#eef4f5}.pm-donut div{position:relative;z-index:1;text-align:center}.pm-donut strong{display:block;font-size:32px;font-weight:300;line-height:1}.pm-donut span,.pm-donut small{display:block;font-size:11px}.pm-donut small{color:#596167;margin-top:2px}
.pm-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;padding:12px}.pm-tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:20px;background:#fff;color:#1e1e1e;text-decoration:none;font-size:11px}.pm-tool.primary{background:#35373D;color:#fff}.pm-tool svg{width:22px;height:22px}.pm-badge{position:absolute;top:8px;inset-inline-end:8px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--pm-accent);color:#0b3b44;display:grid;place-items:center;font-size:10px}
.pm-sync{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 14px 8px 8px;border-radius:999px;background:#ffffff99;font-size:11px;line-height:1.6}.pm-sync-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--pm-accent);color:#0b3b44}.pm-sync b{font-weight:600}
.pm-bottom{position:fixed;z-index:30;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(calc(100% - 28px),692px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;direction:rtl}.pm-nav{flex:1;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;align-items:center;padding:5px;border-radius:999px;background:#ffffffe6;box-shadow:0 9px 26px #33404718}.pm-nav a,.pm-nav button{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#1e1e1e;text-decoration:none;font-size:10px}.pm-nav .active{flex-direction:row;gap:6px;border-radius:999px;background:#35373D;color:#fff;font-size:12px}.pm-nav svg{width:18px;height:18px}.pm-add{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:none;background:#35373D;color:var(--pm-accent);box-shadow:0 9px 26px #33404722}.pm-add svg{width:24px;height:24px}
.pm-bottom.shortcuts-only{gap:0}.pm-nav.payroll-shortcuts{grid-template-columns:repeat(5,minmax(0,1fr));padding:7px;border:1px solid #ffffffb8}.pm-nav.payroll-shortcuts a,.pm-nav.payroll-shortcuts button{min-width:0;min-height:52px;padding:4px 2px;border-radius:17px;font-size:9px;line-height:1.25;text-align:center}.pm-nav.payroll-shortcuts a:first-child,.pm-nav.payroll-shortcuts button:first-child{background:#35373D;color:#fff}.pm-nav.payroll-shortcuts svg{width:20px;height:20px}.pm-nav.payroll-shortcuts span{display:block;max-width:100%;white-space:normal}
.pay-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0}.pay-more-grid a{min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:20px;background:var(--soft);color:var(--ink);font-size:13px;text-decoration:none}.pay-more-grid svg{width:25px;height:25px}.pay-more-note{margin:0;color:var(--muted);font-size:12px;text-align:center}
:root[data-theme="dark"] body.payhub-view{background:#35373D}.payhub-view[data-theme="dark"]{background:#35373D}:root[data-theme="dark"] .pm-dashboard{background:linear-gradient(160deg,#1f2328 0%,#17252a 58%,#163f46 100%);color:#f1f3f4}:root[data-theme="dark"] .pm-topbar,:root[data-theme="dark"] .pm-icon-button,:root[data-theme="dark"] .pm-pay-card.cash,:root[data-theme="dark"] .pm-panel,:root[data-theme="dark"] .pm-sync,:root[data-theme="dark"] .pm-nav,:root[data-theme="dark"] .pm-notes-pill{background:#22272ce8;border-color:#ffffff18;color:#f1f3f4}:root[data-theme="dark"] .pm-month,:root[data-theme="dark"] .pm-open,:root[data-theme="dark"] .pm-tool{background:#35373D;color:#f1f3f4}:root[data-theme="dark"] .pm-donut{box-shadow:inset 0 0 0 13px #243136}:root[data-theme="dark"] .pm-donut:after{background:#243136}:root[data-theme="dark"] .pm-pay-card.bank,:root[data-theme="dark"] .pm-tool.primary,:root[data-theme="dark"] .pm-nav .active,:root[data-theme="dark"] .pm-add{background:#f1f3f4;color:#171a1d}
@media(max-width:520px){body.payhub-view{width:100%;max-width:100%;overflow-x:clip}.pm-dashboard{box-sizing:border-box;width:100%;max-width:100%;min-height:100svh;padding:12px 12px calc(88px + env(safe-area-inset-bottom,0px));overflow-x:clip}.pm-topbar{min-height:56px;padding:7px 8px}.pm-clock{font-size:8.5px}.pm-logo{height:28px;max-width:92px}.pm-top-actions{gap:5px}.pm-icon-button{width:35px;height:35px;border-radius:11px}.pm-heading{margin:18px 0 14px}.pm-heading h2{font-size:25px}.pm-kpis{gap:5px;margin-bottom:16px}.pm-kpi strong{font-size:clamp(27px,8.5vw,37px)}.pm-kpi span{margin-top:5px;font-size:11px}.pm-status{grid-template-columns:55px 50px minmax(98px,1fr) minmax(105px,118px);gap:5px;margin-bottom:14px}.pm-status-item{gap:5px}.pm-status-item label{font-size:10px}.pm-status-item b,.pm-status-item.month .pm-month{min-height:42px;padding-inline:5px;font-size:11px}.pm-pay-card{height:138px;padding:13px;border-radius:25px}.pm-pay-watermark{top:43px;font-size:47px}.pm-pay-total strong{font-size:19px}.pm-insights{gap:8px}.pm-panel{min-height:188px;padding:11px;border-radius:25px}.pm-donut{width:126px;height:126px}.pm-donut strong{font-size:29px}.pm-tools{gap:7px;padding:10px}.pm-tool{font-size:10px;border-radius:17px}.pm-sync{margin-top:8px;padding-block:6px}.pm-bottom{bottom:calc(10px + env(safe-area-inset-bottom,0px));width:calc(100% - 16px);gap:7px}.pm-nav.payroll-shortcuts{padding:5px}.pm-nav.payroll-shortcuts a,.pm-nav.payroll-shortcuts button{min-height:48px}}
@media(max-width:375px){.pm-clock{display:none}.pm-topbar{padding-inline:8px}.pm-kpis{grid-template-columns:1.55fr .9fr .7fr}.pm-status{grid-template-columns:repeat(2,minmax(0,1fr))}.pm-pay-cards,.pm-insights{grid-template-columns:1fr}.pm-pay-card{height:138px}.pm-panel{min-height:190px}.pm-bottom{width:calc(100% - 14px)}.pm-nav:not(.payroll-shortcuts){grid-template-columns:1.25fr repeat(3,.9fr)}.pm-nav.payroll-shortcuts a,.pm-nav.payroll-shortcuts button{font-size:8px}}
@media(min-width:721px){
 body.payhub-view{min-height:100dvh;padding:16px;background:#f4f3f1}
 .pm-dashboard{width:100%;max-width:none;min-height:calc(100dvh - 32px);margin:0;padding:24px 28px 30px;border:1px solid #dfe4e6;border-radius:30px;box-shadow:0 18px 50px #36454f12;display:grid;grid-template-columns:1fr;grid-template-areas:"top" "heading" "kpis" "status" "pay" "insights" "sync";column-gap:18px;align-content:start}
 .pm-topbar{grid-area:top;direction:rtl;display:grid;grid-template-columns:auto minmax(0,1fr) auto;min-height:64px;padding:8px 12px;gap:12px}
 .pm-logo{height:38px;max-width:138px}
 .pm-desktop-nav{display:flex;min-width:0;align-items:center;justify-content:center;gap:3px;overflow-x:auto;scrollbar-width:none}.pm-desktop-nav::-webkit-scrollbar{display:none}.pm-desktop-nav a,.pm-desktop-nav button{flex:none;min-height:40px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:#545c61;font:600 12px/1 inherit;text-decoration:none;white-space:nowrap}.pm-desktop-nav .active{background:#35373D;color:#fff}
 .pm-clock{display:none}
 .pm-top-actions{direction:ltr}
 .pm-heading{grid-area:heading;justify-content:flex-start;margin:34px 0 18px}.pm-heading h2{font-size:40px;font-weight:400}
 .pm-kpis{grid-area:kpis;grid-template-columns:2fr repeat(2,1fr);gap:28px;margin-bottom:24px}.pm-kpi:first-child{text-align:center}.pm-kpi strong{font-size:clamp(42px,5vw,68px)}.pm-kpi span{font-size:14px}
 .pm-status{grid-area:status;grid-template-columns:110px 95px minmax(240px,1fr) minmax(190px,auto);gap:14px;margin-bottom:22px}.pm-status-item label{font-size:13px}.pm-status-item b,.pm-status-item.month .pm-month{min-height:52px;font-size:15px}
 .pm-pay-cards{grid-area:pay;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}.pm-pay-card{height:178px;padding:19px;border-radius:30px}.pm-pay-watermark{top:52px;font-size:68px}.pm-pay-total strong{font-size:25px}.pm-pay-total span{font-size:12px}
 .pm-insights{grid-area:insights;gap:14px}.pm-panel{min-height:300px;padding:20px;border-radius:30px}.pm-panel-head{font-size:16px}.pm-donut{width:220px;height:220px}.pm-donut strong{font-size:46px}.pm-donut span,.pm-donut small{font-size:13px}.pm-tools{padding:18px}.pm-tool{font-size:13px;border-radius:24px}.pm-tool svg{width:28px;height:28px}
 .pm-sync{grid-area:sync;margin-top:18px;min-height:58px;padding-inline:18px;font-size:13px}
 .pm-bottom{display:none}
}
@media(min-width:960px){
 .pm-dashboard{grid-template-columns:minmax(300px,.9fr) minmax(0,1.45fr);grid-template-areas:"top top" "heading heading" "kpis kpis" "status status" "pay insights" "sync sync"}
 .pm-pay-cards{grid-template-columns:1fr;margin:0}.pm-panel{min-height:370px}
}
@media(min-width:1080px){
 body.payhub-view{padding:20px}
 .pm-dashboard{min-height:calc(100dvh - 40px);padding:28px 34px 34px;column-gap:22px}
 .pm-topbar{grid-template-columns:auto minmax(500px,1fr) auto auto}.pm-clock{display:inline;font-size:11px}.pm-desktop-nav a,.pm-desktop-nav button{padding-inline:17px}
 .pm-heading{margin-top:38px}.pm-heading h2{font-size:46px}
 .pm-kpis{margin-bottom:28px}.pm-status{margin-bottom:26px}.pm-pay-cards,.pm-insights{gap:18px}
}
@media(min-width:1440px){
 body.payhub-view{padding:22px}
 .pm-dashboard{min-height:calc(100dvh - 44px);padding:30px 40px 36px;grid-template-columns:minmax(460px,.85fr) minmax(760px,1.5fr);column-gap:28px}
 .pm-topbar{min-height:70px;padding-inline:18px}.pm-desktop-nav{gap:8px}.pm-desktop-nav a,.pm-desktop-nav button{padding-inline:22px;font-size:13px}
 .pm-heading{margin-top:42px}.pm-kpis{gap:42px}.pm-status{gap:18px}.pm-pay-cards,.pm-insights{gap:20px}.pm-pay-card{height:190px}.pm-panel{min-height:400px}
}