:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #05070d;
  color: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #05070d; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.page { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; overflow: hidden; }
.glow { position: absolute; width: 460px; height: 460px; border-radius: 50%; filter: blur(100px); opacity: .22; }
.glow-one { top: -160px; right: -120px; background: #315dff; }
.glow-two { bottom: -220px; left: -160px; background: #00b8ff; }
.card { position: relative; z-index: 1; width: min(100%, 440px); padding: 32px 24px 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(14,20,34,.92); box-shadow: 0 20px 70px rgba(0,0,0,.35); }
.brand-logo { display: block; width: 100%; height: 120px; margin: 0 auto; object-fit: cover; object-position: center; filter: brightness(0) invert(1); }
h1 { margin: 4px 0 0; text-align: center; font-size: 25px; }
#subtitle { margin: 8px 0 20px; color: #9ba6bb; text-align: center; }
.legacy-guide { display: grid; gap: 6px; margin: 18px 0; padding: 12px 14px; border: 1px solid rgba(111,169,255,.3); border-radius: 10px; background: rgba(49,93,255,.12); color: #aebbd0; font-size: 13px; line-height: 1.5; }
.legacy-guide strong { color: #cfe4ff; }
.text-button { padding: 0; border: 0; color: #82c7ff; background: transparent; text-align: left; font-size: 13px; }
.mode-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.mode-tabs button { flex: 1; border: 0; border-radius: 8px; padding: 10px 4px; color: #aeb1c5; background: #222437; }
.mode-tabs button.active { color: #141414; background: #ffd50d; }
.field-group { display: grid; gap: 7px; margin-bottom: 14px; }
label { color: #cbd5e7; font-size: 13px; }
input, select { width: 100%; border: 1px solid #373a52; border-radius: 9px; outline: 0; padding: 12px 13px; color: #fff; background: #1b1e30; }
input:focus, select:focus { border-color: #ffd50d; }
input::placeholder { color: #7d8198; }
.code-row { display: grid; grid-template-columns: 1fr 112px; gap: 8px; }
.secondary { border: 1px solid #4d516b; border-radius: 9px; color: #ffd50d; background: #24283e; }
.profile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.submit-button { width: 100%; margin-top: 4px; border: 0; border-radius: 9px; padding: 13px; color: #fff; background: linear-gradient(90deg,#6ccfff,#315dff); font-weight: 700; }
.message { min-height: 20px; margin: 12px 0 0; color: #ffb4b4; text-align: center; font-size: 13px; }
.message.success { color: #9ee6b1; }
[hidden] { display: none !important; }
@media (max-width: 380px) { .page { padding: 12px; } .card { padding: 24px 16px 18px; } }