/* ============================================================
   SLOTLY · CLAY AUTH — login / sign-in screen
   relies on clay.css + onboarding-clay.css (connectbtn styles)
   ============================================================ */
body.authbody{margin:0;background:var(--bg);font-family:var(--font);color:var(--ink);
  min-height:100vh;display:grid;place-items:center;padding:28px;position:relative;overflow:hidden}
.auth-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.auth-bg span{position:absolute;border-radius:50%;filter:blur(70px)}
.auth-bg .a{width:520px;height:520px;background:color-mix(in srgb,var(--accent-soft) 34%,transparent);top:-180px;right:-100px;animation:authDrift1 18s ease-in-out infinite}
.auth-bg .b{width:460px;height:460px;background:color-mix(in srgb,var(--teal) 26%,transparent);bottom:-200px;left:-120px;animation:authDrift2 22s ease-in-out infinite}
@keyframes authDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,50px) scale(1.1)}}
@keyframes authDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.08)}}

.authtop{position:fixed;top:22px;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.authtop .theme-toggle{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:16px;color:var(--ink);
  background:var(--surface);border:1px solid var(--border-2);box-shadow:var(--shadow-soft)}

.authcard{position:relative;z-index:1;width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);
  border-radius:28px;padding:38px 34px;box-shadow:18px 22px 60px rgba(184,77,34,.16),var(--inset-hi);
  animation:authIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes authIn{from{transform:translateY(16px)}to{transform:none}}
.authcard__logo{display:flex;justify-content:center;margin-bottom:20px}
.authcard__logo .logo3d{width:60px;height:60px}
.authcard h1{font-family:var(--display);font-weight:800;font-size:27px;text-align:center;letter-spacing:-.02em;margin-bottom:8px}
.authcard .sub{text-align:center;color:var(--ink-2);font-size:15px;font-weight:500;margin-bottom:26px;line-height:1.5}

.authtabs{display:flex;gap:5px;padding:5px;border-radius:14px;background:var(--bg-2);border:1px solid var(--border);margin-bottom:24px}
.authtabs button{flex:1;padding:11px;border-radius:10px;font-weight:700;font-size:14px;color:var(--ink-2);transition:color .2s}
.authtabs button.on{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-deep)}

.authcard .onb__connect{max-width:100%}
.authcard .onb__or{margin:14px 0}

/* email form (hidden until chosen) */
.authform{display:none;flex-direction:column;gap:13px;animation:authIn .35s ease}
.authform.on{display:flex}
.authform .onb__field{margin-bottom:0}
.authcard .cbtn{width:100%;justify-content:center}
.authback{align-self:flex-start;font-weight:700;font-size:13.5px;color:var(--ink-3);display:inline-flex;align-items:center;gap:7px}

.authfoot{text-align:center;margin-top:22px;font-size:13.5px;color:var(--ink-3);font-weight:600}
.authfoot a{color:var(--accent);font-weight:700}
.authlegal{text-align:center;margin-top:18px;font-size:12px;color:var(--ink-3);line-height:1.5;max-width:340px;margin-left:auto;margin-right:auto}
.authlegal a{color:var(--ink-2)}

@media(max-width:480px){.authcard{padding:30px 22px}}