body {
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 229, 195, .045), transparent 43%), #070b0d;
}
.login-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 60px 24px; }
.login { width: 100%; max-width: 360px; text-align: center; }
.brand { display: inline-flex; align-items: center; gap: 5px; color: var(--text); text-decoration: none; }
.brand img { object-fit: contain; mix-blend-mode: screen; }
.brand span { font-size: 32px; font-weight: 800; letter-spacing: -1.3px; }
.eyebrow { margin: 23px 0 18px; color: var(--teal); font-size: 9px; font-weight: 600; letter-spacing: 3.2px; text-transform: uppercase; }
h1 { margin: 0; font-size: 25px; line-height: 1.3; font-weight: 650; letter-spacing: -.8px; }
.intro { color: var(--muted); font-size: 13px; margin: 12px 0 34px; line-height: 1.6; }
.auth-actions { display: grid; gap: 12px; }
.auth-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 30px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; font-weight: 650; text-decoration: none; transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
.auth-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.primary { color: #041110; background: linear-gradient(115deg, var(--teal), #22ecd0); box-shadow: 0 4px 24px rgba(0, 229, 195, .08); }
.primary:hover { box-shadow: 0 4px 26px rgba(0, 229, 195, .18); background: var(--aqua); }
.secondary { color: #dce9e7; background: rgba(12, 21, 23, .65); border-color: rgba(120, 145, 142, .2); }
.secondary:hover { background: #101e20; border-color: rgba(53,255,225,.35); }
.auth-button:active { transform: translateY(1px); }
.auth-button:disabled { opacity: .45; cursor: not-allowed; }
.arrow { position: absolute; right: 16px; font-size: 17px; font-weight: 400; opacity: .65; }
.soon { position: absolute; right: 14px; color: var(--muted); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; }
.helper { margin: 20px 0 0; font-size: 11px; line-height: 1.8; color: var(--muted); }
.status { margin: 12px 0 0; min-height: 18px; font-size: 11px; color: var(--teal); }
.login-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 21px; border-top: 1px solid var(--line); }
.footer-brand { font-size: 9px; letter-spacing: 2.2px; color: #68817e; font-weight: 600; }
.demo-badge { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
.demo-badge > span { height: 5px; width: 5px; background: var(--teal); border-radius: 50%; }
.account-card { align-items: center; gap: 12px; margin-top: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(12, 21, 23, .72); text-align: left; }
.account-card:not([hidden]) { display: flex; }
.account-card img { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: #101b1d; }
.account-card div { display: grid; min-width: 0; flex: 1; }
.account-card span, .account-card small { color: var(--muted); font-size: 10px; }
.account-card strong { overflow: hidden; margin: 2px 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-card button { padding: 7px 9px; color: var(--muted); border: 1px solid rgba(120,145,142,.2); border-radius: 5px; background: transparent; font-size: 10px; }
dialog { width: min(400px, calc(100% - 40px)); padding: 32px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; text-align: center; box-shadow: 0 24px 80px #0008; }
dialog::backdrop { background: #020608d9; backdrop-filter: blur(6px); }
dialog h2 { margin: 0; font-size: 26px; }
dialog p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 16px 0 24px; }
.success-mark { display: grid; place-items: center; margin: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #00e5c30d; color: var(--teal); font-size: 23px; }
@media (max-width: 420px) { .login-page { padding: 40px 24px; } .brand span { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .auth-button { transition: none; } }