of the 2026 auth screens (login, companyLogin, buyerLogin all carry it -- it is the shared auth skin). Shell-level rules (canvas, header, language pill, theme switch) live in 2026/css/shell/public.css and are NOT repeated here. THEME NOTE updatePublicTheme() only adds/removes .public-light-mode client-side, so after a toggle without a reload can carry both theme classes or neither. Dark is therefore keyed off the ABSENCE of .public-light-mode, never off .public-dark-mode. is server-rendered only and goes stale on toggle -- it is not used here. ICON NOTE Font Awesome is pinned at 6.0.0 (headPublic.php). Only glyph names that exist in that release are used: fa-shield-alt (NOT fa-shield-halved), fa-bell-concierge, fa-ticket, fa-calendar-days, fa-credit-card, fa-bullhorn, fa-arrow-right, and \f0c2 (cloud) for the logo tile. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Tokens ---------------------------------------------------------------------- */ .login-2026 { --l26-primary: #F37220; --l26-primary-2: #F5811F; --l26-primary-deep: #E8590C; --l26-primary-soft: rgba(243, 114, 32, .13); --l26-primary-line: rgba(243, 114, 32, .38); --l26-title: #FFFFFF; --l26-text: #A8A29E; --l26-muted: #8A837E; --l26-card: rgba(62, 56, 51, .72); --l26-card-line: rgba(255, 255, 255, .09); --l26-chip: rgba(255, 255, 255, .028); --l26-chip-line: rgba(255, 255, 255, .085); --l26-chip-text: #D6D3D1; --l26-tabs: rgba(255, 255, 255, .06); --l26-tab-on: #FFFFFF; --l26-tab-on-text: #1C1917; --l26-tab-off-text: #A8A29E; --l26-input: #FFFFFF; --l26-input-line: transparent; --l26-input-text: #1C1917; --l26-placeholder: #A8A29E; --l26-rule: rgba(255, 255, 255, .14); --l26-green: #22C55E; --l26-danger: #EF4444; --l26-radius-card: 20px; --l26-radius: 10px; display: block; font-family: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--l26-text); } body.public-light-mode .login-2026 { --l26-primary-soft: rgba(243, 114, 32, .10); --l26-primary-line: rgba(243, 114, 32, .30); --l26-title: #1C1917; --l26-text: #57534E; --l26-muted: #78716C; --l26-card: #FFFDFB; --l26-card-line: rgba(0, 0, 0, .05); --l26-chip: rgba(255, 255, 255, .62); --l26-chip-line: rgba(0, 0, 0, .06); --l26-chip-text: #44403C; --l26-tabs: #F2F0EE; --l26-tab-on: #FFFFFF; --l26-tab-on-text: #1C1917; --l26-tab-off-text: #78716C; --l26-input: #FFFFFF; --l26-input-line: #E7E5E4; --l26-input-text: #1C1917; --l26-placeholder: #A8A29E; --l26-rule: #E7E5E4; } /* ------------------------------------------------------------------------- 3. Layout ---------------------------------------------------------------------- */ .login-2026 .l26 { width: 100%; padding: 8px 0 72px; } .login-2026 .l26-grid { max-width: var(--l26-page); margin: 0 auto; padding-right: var(--l26-rail); padding-left: var(--l26-rail); display: grid; grid-template-columns: minmax(0, 1fr) 448px; gap: 64px; align-items: center; min-height: calc(100vh - 210px); } /* ------------------------------------------------------------------------- 4. Left column ---------------------------------------------------------------------- */ .login-2026 .l26-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 17px; border: 1px solid var(--l26-primary-line); border-radius: 999px; background: var(--l26-primary-soft); color: var(--l26-primary); font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; } .login-2026 .l26-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .login-2026 .l26-dot-green { background: var(--l26-green); color: var(--l26-green); } .login-2026 .l26-title { max-width: 11ch; margin: 26px 0 0; color: var(--l26-title); font-size: clamp(40px, 5.1vw, 66px); font-weight: 800; line-height: 1.02; letter-spacing: -.022em; } .login-2026 .l26-lead { max-width: 430px; margin: 32px 0 0; color: var(--l26-text); font-size: 17px; line-height: 1.62; } .login-2026 .l26-chips { display: flex; flex-wrap: wrap; gap: 11px; margin: 52px 0 0; padding: 0; list-style: none; } .login-2026 .l26-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 92px; padding: 13px 12px; border: 1px solid var(--l26-chip-line); border-radius: 12px; background: var(--l26-chip); color: var(--l26-chip-text); font-size: 12.5px; font-weight: 500; line-height: 1.2; text-align: center; } .login-2026 .l26-chip i { font-size: 16px; color: var(--l26-primary); } /* ------------------------------------------------------------------------- 5. Card ---------------------------------------------------------------------- */ .login-2026 .l26-panel { display: flex; justify-content: flex-end; } .login-2026 .l26-card { width: 100%; max-width: 448px; padding: 40px; border: 1px solid var(--l26-card-line); border-radius: var(--l26-radius-card); background: var(--l26-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 26px 70px rgba(0, 0, 0, .34); } body.public-light-mode .login-2026 .l26-card { box-shadow: 0 24px 64px rgba(140, 90, 40, .12); } /* ------------------------------------------------------------------------- 6. Tabs The