* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; background: #0b0e14; color: #c8ccd4; }
.login-bg { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 30%, #1a1f2e 0%, #0b0e14 70%); }
.login-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 400px; max-width: 92vw; padding: 40px 36px 32px;
  background: rgba(22, 26, 35, 0.92); border: 1px solid #2a2f3d; border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.45); backdrop-filter: blur(10px);
}
.login-logo { font-size: 22px; font-weight: 600; text-align: center; color: #e0e4ec; letter-spacing: 1px; margin-bottom: 4px; }
.login-version { font-size: 13px; font-weight: 400; color: #6b7385; }
.login-message { text-align: center; font-size: 14px; min-height: 22px; margin: 10px 0 4px; }
.login-error { color: #e05555; }
.login-ok { color: #55a055; }
.login-form { margin-top: 18px; }
.login-field { display: block; margin-bottom: 16px; }
.login-field span { display: block; font-size: 13px; color: #8890a0; margin-bottom: 6px; }
.login-field input {
  width: 100%; padding: 10px 12px; border: 1px solid #363b4a; border-radius: 6px;
  background: #141822; color: #d0d4dc; font-size: 15px; outline: none; transition: border-color .2s;
}
.login-field input:focus { border-color: #5a7fcf; }
.login-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.login-actions button {
  padding: 11px 0; border: none; border-radius: 6px; font-size: 15px; cursor: pointer; transition: opacity .2s;
}
.login-actions button:disabled { opacity: .5; cursor: default; }
#loginButton { background: #3a5fcd; color: #fff; font-weight: 600; }
#loginButton:hover:not(:disabled) { background: #4a6fdd; }
#registerButton { background: transparent; color: #8890a0; border: 1px solid #363b4a; }
#registerButton:hover:not(:disabled) { color: #b0b8c4; border-color: #5a7fcf; }