/* Authentication is a normal page, never an oversized sticky service header. */
html body:not(.state-staff) { min-width:0; min-height:100dvh; background:var(--bg,#f4f2eb); }
html body:not(.state-staff) .topbar { position:static!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; min-height:0!important; height:auto!important; gap:8px!important; padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))!important; box-shadow:none; }
html body:not(.state-staff) .brand-block { min-width:0!important; grid-column:1; grid-row:1; }
html body:not(.state-staff) .brand-lockup { min-width:0!important; width:auto!important; gap:0; }
html body:not(.state-staff) .brand-lockup>div,html body:not(.state-staff) .mobile-service-context { display:none!important; }
html body:not(.state-staff) .brand-logo-tint { width:140px!important; max-width:100%; min-width:0; height:40px!important; border-radius:10px; }
html body:not(.state-staff) .brand-logo { width:140px!important; max-width:100%; height:40px!important; padding:2px; }
html body:not(.state-staff) .header-actions { display:contents!important; }
html body:not(.state-staff) .header-actions>* { display:none!important; }
html body.state-account:not(.state-staff) #employeeLanguageSwitcher { display:block!important; grid-column:2; grid-row:1; width:min(145px,40vw); min-width:0; }
html body.state-account:not(.state-staff) #employeeLanguageSwitcher .language-select-label { display:block; margin:0; }
html body.state-account:not(.state-staff) #employeeLanguageSwitcher .language-select-label>span { display:none; }
html body.state-account:not(.state-staff) #employeeLanguageSwitcher select { width:100%; min-width:0; height:40px; min-height:40px; padding:6px 24px 6px 10px; font-size:16px; border-radius:10px; color:#17382e; background:#f7fbf9; }
html body.state-account:not(.state-staff) #accountSessionPanel { display:grid!important; grid-column:1/-1; grid-row:2; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; width:100%; max-width:none; min-width:0; padding:0; margin:0; background:none; border:0; box-shadow:none; border-radius:0; }
html body.state-account:not(.state-staff) #accountSessionPanel .session-badge,html body.state-account:not(.state-staff) #accountMeta { display:none; }
html body.state-account:not(.state-staff) #accountSessionPanel>span { min-width:0; }
html body.state-account:not(.state-staff) #accountName { display:block; color:#f4faf6; font-size:1rem; overflow-wrap:anywhere; }
html body.state-account:not(.state-staff) #accountLogoutButton { min-height:40px; padding:7px 12px; margin:0; width:auto; font-size:.85rem; border-radius:10px; }
html body:not(.state-staff) .app-shell { display:block; width:100%; max-width:none; min-width:0; min-height:0; padding:16px 12px!important; }
html body:not(.state-staff) :is(.locked-panel,.login-panel) { box-sizing:border-box; width:100%!important; max-width:600px!important; min-width:0; min-height:0; margin:0 auto!important; padding:20px!important; gap:14px!important; border-radius:16px; }
html body:not(.state-staff) :is(.locked-panel,.login-panel) * { box-sizing:border-box; min-width:0; }
html body:not(.state-staff) :is(.locked-panel,.login-panel) [hidden] { display:none!important; }
html body:not(.state-staff) .auth-progress { margin:0; gap:8px; font-size:.78rem; flex-wrap:wrap; }
html body:not(.state-staff) .auth-progress li { gap:6px; }
html body:not(.state-staff) .auth-progress li>span { width:24px; height:24px; font-size:.75rem; }
html body:not(.state-staff) .auth-progress li+li::before { width:18px; }
html body:not(.state-staff) .staff-login-heading { gap:4px; }
html body:not(.state-staff) .staff-login-heading .eyebrow { display:none; }
html body:not(.state-staff) .login-panel h2 { margin:0; font-size:1.45rem; line-height:1.2; }
html body:not(.state-staff) .staff-login-heading .meta { font-size:.85rem; line-height:1.4; }
html body:not(.state-staff) .staff-start-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
html body:not(.state-staff) .staff-card { display:flex; align-items:center; gap:8px; min-height:68px; padding:10px; box-shadow:none; text-align:start; }
html body:not(.state-staff) .staff-card strong { font-size:.95rem; white-space:normal; overflow-wrap:anywhere; }
html body:not(.state-staff) .staff-card .staff-avatar { width:34px; height:34px; flex:0 0 34px; font-size:.8rem; }
html body:not(.state-staff) .staff-role { font-size:.75rem; }
html body:not(.state-staff) #loginPanel[data-step="profile"] .staff-login-actions,
html body:not(.state-staff) #loginPanel[data-step="pin"] :is(.staff-start-grid,.staff-login-heading .meta) { display:none!important; }
html body:not(.state-staff) .staff-selected-note { display:flex; align-items:center; gap:8px; padding:8px 10px; margin:0; }
html body:not(.state-staff) .staff-selected-note strong { flex:1; overflow-wrap:anywhere; }
html body:not(.state-staff) [data-staff-login-back] { min-height:40px; padding:6px 10px; font:inherit; font-size:.82rem; color:var(--text,#17382e); background:var(--surface,#fff); border:1px solid var(--line,#c5d5cc); border-radius:9px; }
html body:not(.state-staff) .staff-login-actions { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:10px!important; width:100%; max-width:360px; justify-self:center; }
html body:not(.state-staff) .staff-login-actions>* { grid-column:1!important; grid-row:auto!important; }
html body:not(.state-staff) .pin-label { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 8px; font-size:.82rem; }
html body:not(.state-staff) #pinInput { grid-column:1/-1; grid-row:2; width:100%; min-height:46px; height:46px; padding:6px 12px; font-size:24px; text-align:center; letter-spacing:.35em; cursor:default; }
html body:not(.state-staff) #pinHelp { grid-column:2; grid-row:1; font-size:.75rem; letter-spacing:normal; color:var(--muted,#53665d); }
html body:not(.state-staff) .pin-keypad { gap:7px; }
html body:not(.state-staff) .pin-keypad button { min-height:46px; height:46px; padding:4px; font-size:1.15rem; touch-action:manipulation; }
html body:not(.state-staff) #activateButton { min-height:46px; height:auto; margin:0; width:100%; font-size:1rem; }
html body:not(.state-staff) #activateButton:disabled { opacity:.55; cursor:not-allowed; }
html body:not(.state-staff) #loginStatus { margin:0; padding:0; min-height:0; text-align:center; font-size:.85rem; line-height:1.35; overflow-wrap:anywhere; }
html body:not(.state-staff) #loginStatus:empty { display:none; }
html body:not(.state-staff) .header-login-fields { grid-template-columns:minmax(0,1fr)!important; }
html body:not(.state-staff) .header-login-fields input { width:100%; min-width:0; font-size:16px; }
@media(max-width:600px){html body:not(.state-staff) .app-shell{padding:10px!important}html body:not(.state-staff) :is(.locked-panel,.login-panel){padding:14px!important;gap:10px!important}}
@media(min-width:800px){html body.state-account:not(.state-staff) .topbar{grid-template-columns:minmax(0,1fr) auto auto!important}html body.state-account:not(.state-staff) #accountSessionPanel{grid-column:2;grid-row:1;width:auto;gap:18px}html body.state-account:not(.state-staff) #employeeLanguageSwitcher{grid-column:3}}
html[data-display-mode="dark"] body:not(.state-staff) :is(.locked-panel,.login-panel,.staff-card,.staff-selected-note){background:#192d26;color:#f1f8f4;border-color:#4a685b}
html[data-display-mode="dark"] body:not(.state-staff) :is(.login-panel h2,.staff-login-heading .meta,.staff-role,.pin-label,#pinHelp,#loginStatus){color:#e3eee7}
html[data-display-mode="dark"] body:not(.state-staff) :is(#pinInput,.pin-keypad button){background:#243c32;color:#f1f8f4;border-color:#4a685b}

/* Preserve the original logo geometry and remove the color overlay. */
html body:not(.state-staff) .topbar .brand-logo-tint { display:block; width:min(184px,42vw) !important; height:auto !important; max-width:100%; padding:0 !important; border:0 !important; border-radius:5px; background:none !important; overflow:visible; box-shadow:none !important; }
html body:not(.state-staff) .topbar .brand-logo-tint::before,html body:not(.state-staff) .topbar .brand-logo-tint::after { display:none !important; content:none !important; }
html body:not(.state-staff) .topbar .brand-logo { display:block; width:100% !important; height:auto !important; aspect-ratio:458/101; object-fit:contain !important; padding:0 !important; border-radius:5px !important; filter:none !important; mix-blend-mode:normal !important; opacity:1; }

@media(min-width:700px) { html body:not(.state-staff) #loginPanel[data-step="profile"] { max-width:800px !important; } }
@media(max-width:400px) { html body:not(.state-staff) #loginPanel[data-step="profile"] .staff-card { flex-direction:column; justify-content:center; text-align:center; gap:6px; min-height:104px; } html body:not(.state-staff) #loginPanel[data-step="profile"] .staff-card > span:last-child { width:100%; min-width:0; } }