:root {
  --bg: #030810;
  --panel: rgba(10, 22, 34, .92);
  --line: rgba(139, 162, 190, .28);
  --text: #f3f6fb;
  --muted: #9eacbe;
  --green: #41e0a8;
  --red: #ff7979;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--text); font-family: var(--font); background: radial-gradient(circle at 20% 85%, rgba(42, 214, 160, .12), transparent 28%), radial-gradient(circle at 82% 10%, rgba(78, 115, 190, .13), transparent 30%), linear-gradient(145deg, #03070d, #07131f 55%, #02060b); }
button, input { font: inherit; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(470px, 100%); padding: 38px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(15, 29, 43, .94), rgba(6, 15, 24, .94)); box-shadow: 0 30px 90px rgba(0,0,0,.48); }
.login-logo { width: 92px; height: 68px; margin: 0 auto 18px; display: grid; place-items: center; }
.login-logo img { width: 100%; height: 100%; object-fit: contain; }
.login-kicker { margin: 0 0 8px; color: var(--green); text-align: center; font-size: 11px; font-weight: 750; letter-spacing: .13em; }
h1 { margin: 0; text-align: center; font-size: clamp(30px, 6vw, 42px); font-weight: 600; letter-spacing: -.04em; }
.login-lead { margin: 14px auto 26px; color: var(--muted); text-align: center; line-height: 1.55; }
form { display: grid; gap: 10px; }
label { margin-top: 7px; color: #d5deea; font-size: 13px; font-weight: 650; }
input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; outline: none; color: var(--text); background: rgba(2, 9, 15, .58); }
input:focus { border-color: rgba(65, 224, 168, .62); box-shadow: 0 0 0 3px rgba(65, 224, 168, .08); }
.password-field { position: relative; }
.password-field input { padding-right: 64px; }
.password-field button { position: absolute; top: 6px; right: 6px; min-width: 48px; height: 36px; border: 1px solid var(--line); border-radius: 7px; color: #c7d1de; background: rgba(255,255,255,.035); cursor: pointer; }
.login-button { min-height: 50px; margin-top: 14px; border: 0; border-radius: 9px; color: #03100c; background: linear-gradient(90deg, #29cfa1, #48e4b1); font-weight: 750; cursor: pointer; box-shadow: 0 12px 26px rgba(34, 218, 164, .15); }
.login-button:hover { filter: brightness(1.07); }
.login-error { margin: 4px 0 0; color: var(--red); font-size: 12px; }
.login-note { margin: 18px 0 8px; color: #7f8ea2; text-align: center; font-size: 11px; line-height: 1.5; }
.back-link { display: block; color: #aeb9c8; text-align: center; text-decoration: none; font-size: 13px; }
.back-link:hover { color: var(--green); }
@media (max-width: 520px) { .login-page { padding: 12px; } .login-card { padding: 28px 20px; border-radius: 14px; } }