:root { color-scheme: dark; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% -18%, #18343c 0%, #0d1823 38%, #080d16 78%); color: #eaf4f7; }
.login-shell { width: min(100% - 32px, 430px); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 30px 4px; }
.brand-mark { width: 34px; height: 34px; border: 1px solid #33866e; border-radius: 9px; display: flex; align-items: end; gap: 3px; padding: 7px; background: #142e2c; }
.brand-mark span { flex: 1; border-radius: 2px 2px 0 0; background: #79e5b1; }
.brand-mark span:nth-child(1) { height: 40%; }.brand-mark span:nth-child(2) { height: 75%; }.brand-mark span:nth-child(3) { height: 55%; }.brand-mark span:nth-child(4) { height: 90%; }
.brand-name { display: block; font-size: 14px; font-weight: 850; letter-spacing: .09em; }.brand-name span { color: #79e5b1; }
.brand-subtitle { display: block; margin-top: 3px; color: #718a9d; font-size: 10px; letter-spacing: .08em; }
.login-card { padding: 34px; border: 1px solid #294052; border-radius: 16px; background: #101d2a; box-shadow: 0 28px 90px #0008; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #82dcb5; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #78dea9; box-shadow: 0 0 12px #78dea9; }
h1 { margin: 18px 0 7px; font-size: 28px; letter-spacing: -.035em; }
.intro { margin: 0 0 28px; color: #91a6b4; font-size: 13px; line-height: 1.6; }
form { display: flex; flex-direction: column; }
label { margin: 0 0 8px; font-size: 12px; font-weight: 650; color: #d7e5e9; }
input { width: 100%; height: 46px; margin: 0 0 20px; padding: 0 14px; border: 1px solid #31485b; border-radius: 8px; outline: 0; background: #0a1420; color: #f3f9fb; font: inherit; font-size: 14px; }
input:focus { border-color: #71dbac; box-shadow: 0 0 0 3px #71dbac24; }
input::placeholder { color: #647b8d; }
button { width: 100%; height: 47px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 8px; background: #83e4b4; color: #092019; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
button:hover { background: #a2f0c9; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.help { margin: 22px 0 0; color: #7890a0; font-size: 11px; line-height: 1.6; }
.error { margin: -8px 0 20px; padding: 11px 13px; border: 1px solid #984b56; border-radius: 7px; background: #3c1b27; color: #ffb5bb; font-size: 12px; line-height: 1.5; }
.foot { margin: 25px 0 0; color: #516a79; font-size: 11px; text-align: center; }
@media (max-width: 480px) { .login-card { padding: 26px 21px; } .brand { margin-bottom: 22px; } }