:root { font-family: Inter, "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #10233c; background: #f4f7fb; font-synthesis: none; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #f4f7fb; }
button, input { font: inherit; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, .88fr) minmax(480px, 1.12fr); }
.auth-brand-panel { min-height: 100vh; padding: 48px clamp(38px, 6vw, 90px); display: flex; flex-direction: column; color: #fff; background: radial-gradient(circle at 82% 18%, rgba(22,139,238,.44), transparent 25rem), linear-gradient(145deg,#051724 0%,#082b43 64%,#0b3854 100%); }
.auth-brand { display: flex; align-items: center; gap: 14px; }
.auth-brand img { width: 48px; height: 48px; object-fit: contain; }
.auth-brand strong { font-size: 25px; line-height: 1; letter-spacing: -.04em; }
.auth-brand strong span { color: #62b9ff; }
.auth-brand-copy { max-width: 580px; margin: auto 0; }
.auth-brand-copy small,.auth-card-heading > span { display: block; color: #75c4ff; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.auth-brand-copy h1 { max-width: 540px; margin: 18px 0; font-size: clamp(36px,4.2vw,62px); line-height: 1.07; letter-spacing: -.055em; }
.auth-brand-copy p { max-width: 500px; margin: 0; color: #b7ccdc; font-size: 16px; line-height: 1.7; }
.auth-trust { display: flex; align-items: center; gap: 9px; color: #9bb4c7; font-size: 12px; }
.auth-trust span { width: 8px; height: 8px; border-radius: 50%; background: #39d49d; box-shadow: 0 0 0 4px rgba(57,212,157,.12); }
.auth-form-panel { min-height: 100vh; padding: 36px; display: grid; place-items: center; align-content: center; }
.auth-card { width: min(100%,460px); padding: 42px; border: 1px solid #e0e7ef; border-radius: 20px; background: #fff; box-shadow: 0 24px 65px rgba(16,35,60,.1); }
.auth-card-heading h2 { margin: 10px 0 7px; font-size: 31px; letter-spacing: -.045em; }
.auth-card-heading p { margin: 0 0 27px; color: #718096; font-size: 14px; line-height: 1.55; }
.auth-alert { margin: 0 0 18px; padding: 11px 13px; border-radius: 9px; color: #785718; background: #fff5da; font-size: 12px; line-height: 1.45; }
.auth-alert.error { color: #a13b45; background: #fff0f1; }
.auth-alert.success { color: #11724e; background: #e8f8f1; }
.auth-form { display: grid; gap: 17px; }
.auth-form label > span { display: block; margin-bottom: 7px; color: #36475e; font-size: 12px; font-weight: 700; }
.auth-form input { width: 100%; height: 48px; padding: 0 14px; color: #10233c; border: 1px solid #d7e0e9; border-radius: 10px; outline: none; background: #fbfcfe; }
.auth-form input:focus { border-color: #168bee; box-shadow: 0 0 0 4px rgba(22,139,238,.11); background: #fff; }
.auth-form-meta { margin-top: -5px; text-align: right; }
.auth-form a { color: #0d76c8; font-size: 12px; font-weight: 700; text-decoration: none; }
.auth-form button { height: 49px; margin-top: 2px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#168bee,#0d76c8); box-shadow: 0 10px 22px rgba(22,139,238,.24); font-weight: 800; cursor: pointer; }
.auth-form button:hover { filter: brightness(.97); transform: translateY(-1px); }
.auth-back { text-align: center; }
.auth-footer { margin: 22px 0 0; color: #8a97a8; font-size: 11px; }
@media (max-width: 820px) { .auth-shell { grid-template-columns: 1fr; } .auth-brand-panel { min-height: auto; padding: 24px; } .auth-brand-copy,.auth-trust { display: none; } .auth-form-panel { min-height: calc(100vh - 96px); padding: 24px; } }
@media (max-width: 480px) { .auth-card { padding: 30px 22px; border-radius: 15px; } .auth-card-heading h2 { font-size: 27px; } }