:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px;
  color: #fff7fd;
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: 16px; font-weight: 400; line-height: 1.7; letter-spacing: 0; font-synthesis: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(0, 232, 246, .2), transparent 32%),
    radial-gradient(circle at 88% 0%, rgba(178, 50, 159, .38), transparent 36%),
    #160818;
}
.auth-card {
  width: min(440px, 100%); padding: 28px; border-radius: 24px;
  border: 1px solid rgba(240, 16, 224, .32);
  background: rgba(46, 16, 52, .88);
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 16px; padding: 6px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; }
.brand small { margin-top: 4px; color: #f3d7f6; font-size: 12px; font-weight: 400; letter-spacing: 0.06em; }
h1 { margin: 22px 0 8px; font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
#auth-lead { margin: 0 0 18px; color: #e7d0ea; font-size: 15px; line-height: 1.75; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: #f3d7f6; font-size: 14px; font-weight: 400; line-height: 1.45; }
input, button { font-family: inherit; letter-spacing: 0; }
input {
  min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(178, 50, 159, .4);
  background: rgba(22, 8, 24, .72); color: white; font-size: 16px; font-weight: 400;
}
button.primary {
  min-height: 46px; border: 0; border-radius: 999px; color: white; font-size: 16px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, #d13cb8, #8d1c8a);
}
.switch { font-size: 14px; }
#auth-error { margin: 0; color: #ffb4c8; }
.switch { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 0; }
.switch a { color: #00e8f6; }
body.mode-login #name-field,
body.mode-login #phone-field,
body.mode-login #email-field,
body.mode-register #account-field,
body.mode-recover #name-field,
body.mode-recover #account-field { display: none; }