html, body { height: 100%; margin: 0; }
body { font-family: var(--font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", system-ui, sans-serif); color: var(--text);
  background: radial-gradient(1200px 700px at 15% 0%, #C9D8FF 0%, transparent 60%), radial-gradient(900px 600px at 100% 100%, #FFD9C2 0%, transparent 55%),
  radial-gradient(800px 600px at 90% 10%, #E7D6FF 0%, transparent 60%), var(--bg, #EEF1F7); }
.lg { min-height: 100%; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.lg__card { width: min(360px, 100%); display: grid; justify-items: center; gap: 12px; padding: 34px 26px 22px; border-radius: 30px; box-sizing: border-box;
  background-color: var(--mat-thick, rgba(255,255,255,.72)); -webkit-backdrop-filter: var(--mat-blur-thick, blur(30px) saturate(1.8)); backdrop-filter: var(--mat-blur-thick, blur(30px) saturate(1.8));
  box-shadow: var(--shadow-float, 0 30px 60px -20px rgba(20,30,70,.3)), var(--inner-hi, inset 0 1px 0 rgba(255,255,255,.7)), 0 0 0 .5px var(--line, rgba(0,0,0,.08)); }
.lg__mark { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 12px 26px -10px rgba(35,83,224,.6); }
.lg__title { margin: 6px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.lg__sub { margin: 0 0 6px; font-size: 13.5px; color: var(--text-2); text-align: center; line-height: 1.5; }
.lg__field { width: 100%; }
.lg__field input { width: 100%; box-sizing: border-box; height: 50px; border-radius: 16px; border: 0; padding: 0 16px; font: inherit; font-size: 17px; color: var(--text);
  background: color-mix(in srgb, var(--surface, #fff) 85%, transparent); box-shadow: inset 0 0 0 .5px var(--line-strong, rgba(0,0,0,.14)); outline: none; text-align: center; letter-spacing: .1em; }
.lg__field input:focus { box-shadow: inset 0 0 0 .5px var(--accent, #2F6BFF), 0 0 0 4px color-mix(in srgb, var(--accent, #2F6BFF) 20%, transparent); }
.lg__btn { width: 100%; height: 50px; border: 0; border-radius: 16px; font: inherit; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer;
  background: var(--accent-grad, linear-gradient(180deg, #4F86FF, #2556E6)); box-shadow: 0 10px 22px -10px rgba(37,86,230,.7), inset 0 1px 0 rgba(255,255,255,.3); }
.lg__btn:disabled { opacity: .7; }
.lg__err { margin: 0; font-size: 13.5px; color: var(--danger, #D92D20); }
.lg__foot { margin: 8px 0 0; font-size: 11.5px; color: var(--text-3); text-align: center; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@media (prefers-color-scheme: dark) { body { background: radial-gradient(1000px 700px at 15% 0%, #1B2B5C 0%, transparent 60%), #0C0E15; } }
/* Account form shares the existing login surface and keeps native hidden semantics. */
[hidden] { display: none !important; }
#account-tabs { display:flex; justify-content:center; gap:12px; margin:18px 0; }
#account-tabs button, #send-code { border:0; border-radius:12px; padding:10px 14px; font:inherit; color:inherit; background:rgba(120,135,170,.12); cursor:pointer; }
#account-tabs button[aria-pressed="true"] { background:#2465e8; color:white; }
#send-code { margin:0 0 16px; width:100%; }
#send-code:disabled { opacity:.55; cursor:default; }