body.auth-page { padding-bottom: 0; background: #edf1f3; }
.auth-page .offline-banner { position: fixed; z-index: 1600; right: 0; left: 0; }
.auth-shell { position: relative; display: grid; width: 100%; min-height: 100vh; min-height: 100dvh; place-items: center; overflow: hidden; padding: clamp(1rem, 3vw, 2rem); isolation: isolate; }
.auth-shell::before, .auth-shell::after { position: absolute; z-index: -1; width: min(35rem, 54vw); aspect-ratio: 1; border-radius: 50%; content: ""; filter: blur(2px); }
.auth-shell::before { top: -24%; right: -13%; background: rgba(40, 101, 138, .11); }
.auth-shell::after { bottom: -35%; left: -16%; background: rgba(43, 69, 87, .08); }
.auth-layout { display: grid; width: min(100%, 70rem); min-height: min(42rem, calc(100dvh - 2rem)); grid-template-columns: minmax(22rem, .95fr) minmax(24rem, 1.05fr); overflow: hidden; border: 1px solid rgba(62, 76, 87, .12); border-radius: 1.5rem; background: white; box-shadow: 0 28px 75px rgba(31, 41, 51, .18); }
.auth-brand-panel { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; padding: clamp(1.6rem, 3.5vw, 3.25rem); color: white; background: radial-gradient(circle at 15% 15%, rgba(255,255,255,.16), transparent 28%), linear-gradient(145deg, #4384aa 0%, #28658a 52%, #17445f 100%); }
.auth-brand-lockup { position: relative; z-index: 2; display: flex; align-items: center; gap: .85rem; }
.auth-brand-lockup img { width: 3.15rem; height: 3.15rem; border: 2px solid rgba(255,255,255,.68); border-radius: .9rem; box-shadow: 0 7px 20px rgba(7, 46, 70, .25); }
.auth-product-name { display: flex; flex-direction: column; line-height: 1.05; }
.auth-product-name strong { font-size: 1.38rem; letter-spacing: -.02em; }
.auth-product-name span { margin-top: .18rem; color: rgba(255,255,255,.78); font-size: .78rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.auth-brand-copy { position: relative; z-index: 2; max-width: 28rem; margin: auto 0; padding-bottom: 6.5rem; }
.auth-brand-copy .eyebrow { color: #d7edf8; }
.auth-brand-copy h1 { max-width: 25rem; margin: .65rem 0 .9rem; color: white; font-size: clamp(2.2rem, 3.2vw, 3.35rem); line-height: 1.02; letter-spacing: -.045em; }
.auth-brand-copy h1 span { display: block; }
.auth-brand-copy p { max-width: 25rem; margin: 0; color: rgba(255,255,255,.83); line-height: 1.55; }
.auth-brand-visual { position: absolute; right: -5%; bottom: .4rem; width: 108%; color: rgba(255,255,255,.24); opacity: .9; pointer-events: none; }
.auth-brand-pulse { position: absolute; z-index: 2; top: calc(clamp(1.6rem, 3.5vw, 3.25rem) + .75rem); right: clamp(1.6rem, 3.5vw, 3.25rem); display: block; width: min(36%, 10rem); height: auto; overflow: visible; color: #eef9ff; opacity: .82; pointer-events: none; }
.auth-brand-pulse path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.auth-form-panel { display: grid; min-width: 0; place-items: center; padding: clamp(2rem, 5vw, 4.5rem); background: linear-gradient(rgba(255,255,255,.96), rgba(255,255,255,.96)), repeating-linear-gradient(135deg, #edf1f3 0 1px, transparent 1px 14px); }
.auth-form-inner { width: min(100%, 25rem); }
.auth-form-heading { margin-bottom: 1.65rem; }
.auth-form-heading h2 { margin: .45rem 0 .55rem; font-size: clamp(2rem, 2.8vw, 2.65rem); line-height: 1.05; letter-spacing: -.035em; }
.auth-form-heading p { margin: 0; color: var(--muted); line-height: 1.45; }
.auth-form { gap: .95rem; }
.auth-form .field { gap: .42rem; }
.auth-form .field label { margin: 0; color: #3a4751; font-size: .82rem; }
.auth-form input { min-height: 3.15rem; border-color: #aeb9c1; border-radius: .75rem; background: #f9fafb; padding: .72rem .8rem; }
.auth-form input:focus { outline: 0; border-color: var(--accent); background: white; box-shadow: 0 0 0 4px rgba(40, 101, 138, .14); }
.password-field { position: relative; }
.password-field input { padding-right: 5.4rem; }
.password-toggle { position: absolute; top: 50%; right: .3rem; min-width: 4.7rem; min-height: var(--touch-target); transform: translateY(-50%); border: 0; border-radius: .55rem; background: transparent; color: var(--accent-dark); font-size: .76rem; font-weight: 850; cursor: pointer; }
.password-toggle:hover, .password-toggle:focus-visible { outline: 0; background: var(--accent-soft); }
.auth-submit { min-height: 3.15rem; margin-top: .35rem; border-radius: .75rem; box-shadow: 0 8px 18px rgba(23, 68, 95, .2); }
.auth-help { margin: 1.35rem 0 0; border-top: 1px solid var(--border); padding-top: 1rem; color: var(--muted); font-size: .78rem; line-height: 1.45; text-align: center; }
.auth-install-button { display: block; min-height: var(--touch-target); margin: .5rem auto 0; border: 0; background: transparent; color: var(--accent-dark); font-size: .78rem; font-weight: 850; text-decoration: underline; cursor: pointer; }
.auth-install-button[hidden] { display: none; }
.auth-install-help { margin: .25rem auto 0; color: var(--muted); font-size: .68rem; text-align: center; }