:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #20202a; background: #f4f3f8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 15% 20%, #ece8ff, transparent 35%), #f6f5f9; }
.auth-shell { width: min(940px, calc(100vw - 40px)); min-height: 560px; display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; border-radius: 20px; background: white; box-shadow: 0 24px 70px rgba(38, 34, 68, .14); }
.auth-brand { padding: 58px; color: white; background: linear-gradient(145deg, #1d1c29, #35304f); }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #7564ef; font-weight: 800; font-size: 19px; }
.auth-brand > p { margin: 78px 0 12px; color: #c4bfdc; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.auth-brand h1 { max-width: 430px; margin: 0 0 32px; font-size: 34px; line-height: 1.16; }
.auth-brand ul { margin: 0; padding: 0; list-style: none; color: #d6d2e7; }
.auth-brand li { margin: 12px 0; }
.auth-brand li::before { content: '✓'; margin-right: 10px; color: #7de1bb; }
.auth-card { align-self: center; padding: 55px; }
.auth-card small { color: #7564ef; font-weight: 750; letter-spacing: .1em; }
.auth-card h2 { margin: 12px 0 6px; font-size: 29px; }
.auth-card > div p { margin: 0 0 34px; color: #777482; }
label { display: block; margin: 17px 0; color: #55525f; font-size: 12px; font-weight: 650; }
input { width: 100%; margin-top: 7px; padding: 12px; border: 1px solid #dddbe5; border-radius: 9px; outline: none; font: inherit; }
input:focus { border-color: #8b7cf0; box-shadow: 0 0 0 3px #efecff; }
form button { width: 100%; margin-top: 8px; padding: 12px; border: 0; border-radius: 9px; background: #6757e8; color: white; font-weight: 700; cursor: pointer; }
.error { min-height: 18px; margin: 0; color: #bd3f4d; font-size: 11px; }
.local-hint { margin-top: 25px; color: #8b8994; font-size: 10px; text-align: center; }
code { padding: 2px 4px; border-radius: 4px; background: #f1f0f5; }
@media (max-width: 720px) { .auth-shell { grid-template-columns: 1fr; } .auth-brand { display: none; } .auth-card { padding: 40px; } }