.login-page { min-height: 100vh; margin: 0; }
body.login-page { 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.login-page { 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; }

#account-form { width: min(420px, 100%); }
.lg__card { width: 100%; gap: 15px; padding: 30px 30px 24px; }
.lg__field > span { display:block; font-size:12px; color:var(--text-2); margin:0 0 6px 4px; }
.lg__field input { text-align:left; letter-spacing:normal; font-size:16px; }
.lg__verification { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; width:100%; }
.lg__send { height:50px; border:0; border-radius:16px; padding:0 12px; font:inherit; font-size:13px; color:var(--accent); background:rgba(120,135,170,.12); cursor:pointer; }
.lg__send:disabled { opacity:.6; cursor:default; }
.lg__links { display:flex; justify-content:center; gap:26px; flex-wrap:wrap; }
.lg__links button { border:0; background:none; font:inherit; font-size:13px; color:var(--accent); cursor:pointer; padding:5px; }
.lg__links button:disabled { opacity:.55; }
.lg__status { margin:0; font-size:13px; line-height:1.5; text-align:center; color:var(--text-2); }
.lg__status:empty { display:none; }
.auth-dialog { border:1px solid rgba(255,255,255,.45); padding:0; width:min(420px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto;
  border-radius:30px; color:var(--text); background:rgba(246,248,255,.76); -webkit-backdrop-filter:blur(36px) saturate(1.7); backdrop-filter:blur(36px) saturate(1.7);
  box-shadow:0 28px 90px rgba(15,22,55,.3),inset 0 1px 0 rgba(255,255,255,.8); }
.auth-dialog::backdrop { background:rgba(18,24,44,.2); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.auth-dialog .lg__card { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; padding-top:40px; }
.auth-close { position:absolute; top:12px; right:12px; z-index:1; width:32px; height:32px; border:0; border-radius:50%; background:rgba(128,139,166,.14); color:var(--text-2); font-size:24px; line-height:28px; cursor:pointer; }
.auth-dialog[data-required="1"] .auth-close { display:none; }
html[data-entry="checking"] .app { visibility:hidden; }
html[data-entry="login"] .app, html[data-entry="mic"] .app { filter:blur(8px); pointer-events:none; user-select:none; }
.mic-entry { padding:36px 30px 28px; text-align:center; }
.mic-entry h2 { margin:0 0 10px; font-size:22px; }
.mic-entry__lead, .mic-entry__hint, .mic-entry__note { margin:0; font-size:14px; line-height:1.6; color:var(--text-2); }
.mic-entry__hint { margin-top:10px; }
.mic-entry__note { margin-top:12px; color:var(--danger, #b42318); }
.mic-entry .lg__btn { margin-top:18px; width:100%; }
.auth-profile { padding:40px 30px 30px; text-align:center; }
.auth-profile p { overflow-wrap:anywhere; }
html[data-theme="dark"] .auth-dialog { background:rgba(28,31,45,.78); border-color:rgba(255,255,255,.15); }
@media(prefers-color-scheme:dark) { html:not([data-theme="light"]) .auth-dialog { background:rgba(28,31,45,.78); border-color:rgba(255,255,255,.15); } }
@media(prefers-reduced-transparency:reduce) { .auth-dialog { background:var(--bg); backdrop-filter:none; } }
@media(max-width:420px) { .lg__card { padding-left:22px; padding-right:22px; } }