:root {
  color-scheme: dark;
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  background: #0b0d10;
  color: #f5f7fa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(80, 108, 255, 0.20), transparent 34rem),
    radial-gradient(circle at 90% 90%, rgba(34, 211, 160, 0.12), transparent 30rem),
    #0b0d10;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(100%, 420px);
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  background: rgba(22, 25, 31, 0.92);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #8da2ff, #5269ef);
  color: white;
  font-size: 23px;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(82, 105, 239, 0.32);
}

.eyebrow {
  margin: 24px 0 7px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

h1 { margin: 0; font-size: 28px; letter-spacing: -0.03em; }
.subtitle { margin: 10px 0 28px; color: #9aa4b2; }

form { display: grid; gap: 18px; }
label { display: grid; gap: 8px; color: #d7dce3; font-size: 14px; }

input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #343a46;
  border-radius: 11px;
  outline: none;
  background: #101319;
  color: #fff;
  font: inherit;
  transition: border-color 150ms, box-shadow 150ms;
}

input:focus {
  border-color: #7186f5;
  box-shadow: 0 0 0 3px rgba(113, 134, 245, 0.16);
}

button {
  margin-top: 4px;
  padding: 14px 18px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #7186f5, #5269ef);
  color: white;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(82, 105, 239, 0.24);
}

button:hover { filter: brightness(1.08); }

.message {
  margin: 0 0 18px;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 14px;
}

.error { background: rgba(248, 113, 113, 0.12); color: #fca5a5; }
.success { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; }

@media (max-width: 520px) {
  .login-card { padding: 30px 24px; }
}