/* ═══ Cosmic Auth Theme ═══ */
:root{
  --deep:#03050d; --space:#070b18; --card:rgba(10,16,35,0.82);
  --border:rgba(56,189,248,0.18); --border-bright:rgba(56,189,248,0.45);
  --text:#e8eef7; --text-dim:#7c89a8; --accent:#38bdf8; --accent2:#818cf8;
  --accent3:#c084fc; --glow:rgba(56,189,248,0.5); --err:#f87171; --ok:#34d399;
  --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(ellipse at 50% 30%,#0a1124 0%,#04060f 70%,#02030a 100%);
  overflow-x:hidden;
  overflow-y:auto;
  color:var(--text);
  min-height:100vh;
}

/* ── Background canvases ── */
#nebula,#starfield{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#starfield{z-index:1}

/* ── Planets (CSS) ── */
.planet{position:fixed;border-radius:50%;pointer-events:none;z-index:0}
.planet-1{
  width:180px;height:180px;top:-40px;right:-60px;
  background:radial-gradient(circle at 30% 30%,rgba(99,102,241,0.12),rgba(99,102,241,0.03) 60%,transparent 80%);
  filter:blur(2px);
}
.planet-2{
  width:240px;height:240px;bottom:-80px;left:-100px;
  background:radial-gradient(circle at 70% 70%,rgba(56,189,248,0.08),rgba(14,165,233,0.02) 60%,transparent 80%);
  filter:blur(3px);
}
.planet-far{
  width:60px;height:60px;top:15%;left:8%;
  background:radial-gradient(circle,rgba(192,132,252,0.15),transparent 70%);
  filter:blur(1px);animation:drift 30s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-15px)}}

/* ── Centered wrapper ── */
.cosmic-wrapper{
  position:relative;z-index:2;
  width:100%;height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}

/* ── Glass card ── */
.cosmic-card{
  width:100%;
  max-width:400px;
  margin:0 auto;
  background:var(--card);
  backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:40px 34px 32px;
  text-align:center;
  box-shadow:0 0 80px rgba(56,189,248,0.06),0 24px 70px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.04);
  position:relative;
  box-sizing:border-box;
}
.cosmic-card::before{
  content:"";position:absolute;inset:-1px;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(56,189,248,0.15),transparent 40%,transparent 60%,rgba(192,132,252,0.1));
  z-index:-1;
  opacity:0.6;
}

/* ── Hero: penguin + orbit ── */
.hero-section{display:flex;justify-content:center;margin-bottom:28px}
.orbit-system{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center}
.orbit-ring{position:absolute;border-radius:50%;border:1px solid rgba(56,189,248,0.1)}
.orbit-1{width:180px;height:180px;border-color:rgba(56,189,248,0.06)}
.orbit-2{width:140px;height:140px;border-color:rgba(99,102,241,0.08);animation:spin 15s linear infinite}
.orbit-3{width:105px;height:105px;border-style:dashed;border-color:rgba(192,132,252,0.06);animation:spin 10s linear infinite reverse}

.orbit-dot{position:absolute;width:6px;height:6px;border-radius:50%;z-index:3}
.dot-1{background:var(--accent);box-shadow:0 0 10px var(--glow);animation:orbit1 15s linear infinite}
.dot-2{background:var(--accent2);box-shadow:0 0 8px rgba(129,140,248,0.6);animation:orbit2 10s linear infinite reverse}
.dot-3{background:var(--accent3);box-shadow:0 0 8px rgba(192,132,252,0.5);animation:orbit3 7s linear infinite}

@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes orbit1{
  0%{transform:rotate(0deg) translateX(90px) rotate(0deg)}
  100%{transform:rotate(360deg) translateX(90px) rotate(-360deg)}
}
@keyframes orbit2{
  0%{transform:rotate(0deg) translateX(70px) rotate(0deg)}
  100%{transform:rotate(360deg) translateX(70px) rotate(-360deg)}
}
@keyframes orbit3{
  0%{transform:rotate(0deg) translateX(52px) rotate(0deg)}
  100%{transform:rotate(360deg) translateX(52px) rotate(-360deg)}
}

.penguin-container{position:relative;z-index:4;animation:floatP 5s ease-in-out infinite}
#penguin-img{
  width:96px;height:96px;object-fit:contain;
  filter:drop-shadow(0 0 16px rgba(56,189,248,0.35)) drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

.thrust-glow{
  position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:40px;height:30px;
  background:radial-gradient(ellipse at top,rgba(56,189,248,0.5) 0%,rgba(99,102,241,0.2) 40%,transparent 70%);
  animation:thrust 0.25s ease-in-out infinite alternate;
  border-radius:50%;
}
.thrust-particles{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);width:40px;height:20px;pointer-events:none}
.thrust-particles span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(56,189,248,0.6);
  left:50%;top:0;
  animation:particle 0.6s ease-out infinite;
}
.thrust-particles span:nth-child(1){animation-delay:0s;--tx:-8px}
.thrust-particles span:nth-child(2){animation-delay:0.1s;--tx:-4px}
.thrust-particles span:nth-child(3){animation-delay:0.2s;--tx:0px}
.thrust-particles span:nth-child(4){animation-delay:0.15s;--tx:4px}
.thrust-particles span:nth-child(5){animation-delay:0.05s;--tx:8px}

@keyframes floatP{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes thrust{from{opacity:0.3;height:20px;width:35px}to{opacity:0.7;height:32px;width:45px}}
@keyframes particle{
  0%{transform:translate(-50%,0) scale(1);opacity:0.8}
  100%{transform:translate(calc(-50% + var(--tx,0px)),25px) scale(0.2);opacity:0}
}

/* ── Tagline ── */
.tagline{margin-bottom:32px}
.tagline-main{
  display:block;font-size:21px;font-weight:700;
  background:linear-gradient(135deg,#38bdf8,#818cf8 40%,#c084fc 80%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1.3;letter-spacing:-0.02em;
}
.tagline-sub{display:block;font-size:13px;color:var(--text-dim);margin-top:6px}

/* ── Code input ── */
.code-area{display:flex;flex-direction:column;gap:18px}
.code-grid{display:flex;gap:9px;justify-content:center}
.code-grid.complete .code-cell{border-color:var(--accent);box-shadow:0 0 16px var(--glow)}
.code-grid.success .code-cell{border-color:var(--ok);box-shadow:0 0 16px rgba(52,211,153,0.4)}
.code-grid.shake{animation:shake 0.4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}

.code-cell{
  width:50px;height:60px;font-size:28px;font-weight:600;text-align:center;
  background:rgba(6,10,24,0.7);border:2px solid var(--border);border-radius:12px;
  outline:none;color:var(--text);caret-color:var(--accent);
  transition:all 0.2s ease;
}
.code-cell:focus{border-color:var(--border-bright);box-shadow:0 0 0 3px rgba(56,189,248,0.08);transform:translateY(-2px)}
.code-cell.filled{border-color:rgba(56,189,248,0.35);background:rgba(56,189,248,0.04)}

/* ── Button ── */
.btn-cosmic{
  display:block;
  width:auto;
  max-width:280px;
  margin:0 auto;
  padding:15px 48px;
  font-size:16px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 50%,#8b5cf6 100%);
  background-size:200% 100%;border:none;border-radius:12px;cursor:pointer;
  position:relative;overflow:hidden;transition:all 0.3s;
  box-shadow:0 4px 24px rgba(14,165,233,0.35);
  text-align:center;
}
.btn-cosmic:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 8px 36px rgba(14,165,233,0.5)}
.btn-cosmic:disabled,.btn-cosmic.loading{opacity:0.6;cursor:wait;transform:none}
.btn-cosmic::after{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
  transition:left 0.6s ease;
}
.btn-cosmic:hover::after{left:100%}

/* ── Message ── */
.msg{font-size:14px;min-height:20px;color:var(--text-dim)}
.msg.success{color:var(--ok)}
.msg.error{color:var(--err)}

/* ── Resend ── */
.resend-area{display:flex;flex-direction:column;gap:6px;align-items:center}
.timer-text{font-size:12px;color:var(--text-dim)}
.link-btn{background:none;border:none;color:var(--accent);font-size:13px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background 0.2s}
.link-btn:hover:not(:disabled){background:rgba(56,189,248,0.1)}
.link-btn:disabled{color:var(--text-dim);cursor:not-allowed}

.back-link{display:inline-block;margin-top:18px;font-size:13px;color:var(--text-dim);text-decoration:none;transition:color 0.2s}
.back-link:hover{color:var(--accent)}

/* ── Login form (cosmic email input) ── */
.login-form{display:flex;flex-direction:column;gap:14px;align-items:center}
.cosmic-input{
  width:100%;padding:15px 18px;font-size:16px;
  border:2px solid var(--border);border-radius:12px;outline:none;
  background:rgba(6,10,24,0.7);color:var(--text);transition:all 0.25s;
  box-sizing:border-box;
}
.cosmic-input:focus{
  border-color:var(--border-bright);
  box-shadow:0 0 0 3px rgba(56,189,248,0.1),0 0 24px rgba(56,189,248,0.08);
  transform:translateY(-1px);
}
.cosmic-input::placeholder{color:#3b4560}

.login-footer{margin-top:22px;display:flex;flex-direction:column;gap:6px;align-items:center}
.footer-hint{font-size:12px;color:var(--text-dim);letter-spacing:0.01em}

/* ── Verify footer (two links) ── */
.verify-footer{margin-top:24px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.verify-footer .support-link{color:var(--accent2)}

/* ── Legacy login screen classes (compat) ── */
.auth-mascot{margin-bottom:16px}
.auth-mascot img{width:96px;height:96px;object-fit:contain}
.auth-title{font-size:24px;font-weight:700;color:var(--text);margin-bottom:12px}
.auth-subtitle{font-size:14px;color:var(--text-dim);line-height:1.6;margin-bottom:24px}
.auth-input{
  width:100%;padding:14px 16px;font-size:16px;
  border:2px solid var(--border);border-radius:10px;outline:none;
  background:rgba(6,10,24,0.7);color:var(--text);transition:all 0.2s;
}
.auth-input:focus{border-color:var(--border-bright);box-shadow:0 0 0 3px rgba(56,189,248,0.08)}
.auth-input::placeholder{color:#3b4560}
.auth-btn{
  width:100%;padding:14px;font-size:16px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#0ea5e9,#6366f1);border:none;border-radius:10px;
  cursor:pointer;transition:all 0.2s;box-shadow:0 4px 20px rgba(14,165,233,0.3);
}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(14,165,233,0.5)}
.auth-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.auth-message{margin-top:16px;font-size:14px;min-height:20px;color:var(--text-dim)}
.auth-message.success{color:var(--ok)}
.auth-message.error{color:var(--err)}
.auth-hint{margin-top:20px;font-size:12px;color:var(--text-dim)}
.auth-support{display:inline-block;margin-top:8px;font-size:13px;color:var(--accent);text-decoration:none}
.auth-support:hover{text-decoration:underline}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

/* ── Mobile ── */
@media(max-width:480px){
  .cosmic-card{padding:32px 22px 26px}
  .tagline-main{font-size:18px}
  .code-cell{width:44px;height:54px;font-size:24px}
  .code-grid{gap:6px}
  .orbit-system{width:150px;height:150px}
}