* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: #2b3440;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 140, 66, 0.18), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(78, 161, 255, 0.16), transparent 36%),
    linear-gradient(140deg, #202c40 0%, #26364f 52%, #1c2738 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-shell { width: 100%; max-width: 392px; }

.login-card {
  background: #ffffff;
  border: 1px solid #e1e6ef;
  border-radius: 20px;
  padding: 36px 32px 26px;
  box-shadow: 0 28px 70px rgba(8, 14, 24, 0.35);
}

.login-brand { text-align: center; margin-bottom: 26px; }

.login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #fff7ef;
  border: 1px solid #ffd9b8;
  font-size: 30px;
  margin-bottom: 12px;
}

.login-brand h1 { margin: 0; font-size: 22px; letter-spacing: 0.5px; }
.login-brand p { margin: 6px 0 0; font-size: 13px; color: #8a93a3; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.field label { font-size: 12px; color: #8a93a3; }

.field input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid #e1e6ef;
  background: #fafbfe;
  color: #2b3440;
  font: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus {
  border-color: #ff8c42;
  box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.16);
}

button {
  width: 100%;
  margin-top: 6px;
  padding: 12px 16px;
  border: none;
  border-radius: 11px;
  background: #ff8c42;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

button:hover:not(:disabled) { background: #e0731f; }
button:disabled { opacity: 0.65; cursor: wait; }

.error {
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  background: #fdecec;
  border: 1px solid #f3c9c9;
  color: #c94b4b;
  font-size: 12px;
  line-height: 1.5;
}

.login-foot {
  margin: 22px 0 0;
  text-align: center;
  font-size: 11px;
  color: #a8b0bd;
  letter-spacing: 0.5px;
}

.login-beian {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
}

.login-beian a { color: rgba(255, 255, 255, 0.55); }
.login-beian a:hover { color: rgba(255, 255, 255, 0.9); text-decoration: underline; }

@media (max-width: 420px) {
  .login-card { padding: 28px 22px 22px; }
}