* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; color: #e8f1ff; background: radial-gradient(ellipse at 50% 35%, #0b2150, #050d22 70%); font: 14px/1.6 "Microsoft YaHei", sans-serif; }
main { width: min(420px, 100%); padding: 38px 34px; background: rgba(12,30,66,.55); border: 1px solid rgba(80,160,255,.25); border-radius: 12px; box-shadow: 0 20px 80px rgba(0,0,0,.25); }
.brand { color: #38c6f4; font-size: 10px; letter-spacing: 4px; text-align: center; }
h1 { margin: 14px 0 4px; font-size: 28px; letter-spacing: 3px; text-align: center; } h1 span { color: #8fd8ff; }
p { margin: 0 0 30px; color: #9fb3d1; text-align: center; }
label { display: block; margin: 16px 0 8px; color: #9fb3d1; }
input { width: 100%; border: 1px solid rgba(80,160,255,.3); background: rgba(5,13,34,.7); border-radius: 6px; padding: 12px; color: #e8f1ff; font: inherit; }
input:focus { outline: 1px solid #38c6f4; border-color: #38c6f4; }
button { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid rgba(56,198,244,.5); background: linear-gradient(110deg, #155a86, #444199); color: #fff; font: inherit; cursor: pointer; }
button:hover { filter: brightness(1.15); } button:disabled { opacity: .6; cursor: wait; }
#error { min-height: 42px; padding: 8px 0; color: #ff7b87; font-size: 12px; }
footer { margin-top: 24px; text-align: center; color: #647a9c; font-size: 12px; }