.auth-page { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(420px, 0.86fr); background: var(--surface); }
.auth-page__context { position: relative; isolation: isolate; padding: clamp(var(--space-6), 5vw, var(--space-9)); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: var(--surface); background-color: var(--brand-dark); background-position: center; background-size: cover; }
.auth-page__context::before { content: ''; position: absolute; inset: 0; z-index: -2; background: inherit; filter: saturate(.72) contrast(1.08); transform: scale(1.04); }
.auth-page__context::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(5, 43, 42, .82), rgba(7, 103, 94, .7) 54%, rgba(9, 33, 42, .68)); }
.auth-page--staff .auth-page__context::after { background: linear-gradient(135deg, rgba(9, 21, 34, .9), rgba(19, 47, 67, .76) 58%, rgba(11, 25, 42, .84)); }
.auth-page__brand, .auth-page__statement, .auth-page__legal { position: relative; z-index: 1; }
.auth-page__brand { display: flex; align-items: center; gap: var(--space-3); }
.auth-page__mark { width: 42px; height: 42px; border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, .16); }
.auth-page__brand-name { font-size: var(--fs-title); letter-spacing: .01em; }
.auth-page__statement { max-width: 820px; }
.auth-page__eyebrow { margin: 0 0 var(--space-3); color: rgba(255,255,255,.68); font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; }
.auth-page__statement h1 { margin: 0; max-width: 820px; font-size: clamp(30px, 3vw, 40px); font-weight: 720; line-height: 1.18; letter-spacing: 0; white-space: nowrap; }
.auth-page__statement > p:not(.auth-page__eyebrow) { margin: var(--space-4) 0 0; max-width: 720px; color: rgba(255,255,255,.78); line-height: 1.75; white-space: nowrap; }
.auth-page__signals { margin-top: var(--space-7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; border-top: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); }
.auth-page__signals span { min-height: 76px; padding: var(--space-4) var(--space-4) var(--space-4) 0; display: grid; align-content: center; gap: var(--space-1); border-right: 1px solid rgba(255,255,255,.18); }
.auth-page__signals span + span { padding-left: var(--space-4); }
.auth-page__signals span:last-child { border-right: 0; }
.auth-page__signals strong { font-size: var(--fs-body); font-weight: 700; }
.auth-page__signals small { color: rgba(255,255,255,.58); font-size: var(--fs-small); }
.auth-page__legal { color: rgba(255,255,255,.6); font-size: var(--fs-small); line-height: 1.7; }
.auth-page__form-area { position: relative; padding: clamp(var(--space-6), 6vw, var(--space-9)); display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 22% 16%, rgba(0, 138, 122, .08), transparent 34%), var(--canvas); }
.auth-page__form-area::before { content: ''; position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(23,33,43,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23,33,43,.035) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.login-panel { position: relative; width: min(100%, 440px); padding: clamp(var(--space-5), 4vw, var(--space-7)); background: rgba(255,255,255,.92); border: 1px solid rgba(185,199,207,.78); border-radius: 14px; box-shadow: 0 24px 70px rgba(23,33,43,.12); backdrop-filter: blur(18px); }
.login-panel::before { content: ''; position: absolute; inset: 0 18% auto 18%; height: 3px; background: linear-gradient(90deg, var(--brand), rgba(0,138,122,.18)); border-radius: 0 0 4px 4px; }
.login-panel__header { margin-bottom: var(--space-6); }
.login-panel__header h2 { margin: 0; font-size: clamp(24px, 2.3vw, 32px); font-weight: 720; line-height: 1.2; }
.login-panel__header p { margin: var(--space-2) 0 0; color: var(--muted); line-height: 1.7; }
.login-panel__form { display: grid; gap: var(--space-4); }
.login-panel__submit { width: 100%; }
.login-panel__footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-small); line-height: 1.7; }
.login-panel__footer a { color: var(--brand-dark); }
@media (max-width: 1100px) { .auth-page { grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr); } .auth-page__statement h1, .auth-page__statement > p:not(.auth-page__eyebrow) { white-space: normal; } }
@media (max-width: 900px) { .auth-page { grid-template-columns: 1fr; } .auth-page__context { min-height: 440px; padding: var(--space-6); } .auth-page__statement { margin-top: var(--space-8); } .auth-page__legal { margin-top: var(--space-5); } .auth-page__form-area { min-height: 520px; padding: var(--space-6); } }
@media (max-width: 620px) { .auth-page__context, .auth-page__form-area { padding: var(--space-5) var(--space-4); } .auth-page__context { min-height: 420px; } .auth-page__statement { margin-top: var(--space-7); } .auth-page__statement h1, .auth-page__statement > p:not(.auth-page__eyebrow) { white-space: normal; } .auth-page__signals { margin-top: var(--space-5); } .auth-page__signals span { min-height: 68px; padding-top: var(--space-3); padding-bottom: var(--space-3); } .auth-page__signals span + span { padding-left: var(--space-3); } .login-panel { padding: var(--space-5); } }