/* Hub auth — SENTINEL full-screen dark hero + Spline (RTL, Hub branding) */
/* Homepage hero CTA (.hero .button): #f0f5eb / #102719 — exact from site-home.css */
/* Accent links use brand lime #bded91 (--hub-lime) for contrast on dark */
:root{
  --background:0 0% 10%;
  --foreground:0 0% 96%;
  --card:0 0% 12%;
  --card-foreground:0 0% 96%;
  --cta:#f0f5eb;
  --cta-ink:#102719;
  --primary:91 72% 75%;
  --primary-foreground:143 42% 11%;
  --secondary:0 0% 16%;
  --secondary-foreground:0 0% 96%;
  --muted:0 0% 16%;
  --muted-foreground:0 0% 60%;
  --accent:91 72% 75%;
  --accent-foreground:143 42% 11%;
  --destructive:0 72% 51%;
  --destructive-foreground:0 0% 98%;
  --border:0 0% 20%;
  --input:0 0% 20%;
  --ring:91 72% 75%;
  --hero-bg:0 0% 8%;
  --nav-button:0 0% 18%;
  --radius:0.5rem;
  --auth-font:"Sora",Vazirmatn,Tahoma,sans-serif;
}

@font-face{
  font-family:Vazirmatn;
  src:url('assets/fonts/vazirmatn.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.auth-page{
  min-height:100vh;
  min-height:100dvh;
  background:hsl(var(--hero-bg));
  color:hsl(var(--foreground));
  font-family:var(--auth-font);
  font-weight:400;
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

/* Full-viewport Spline scene */
.auth-hero{
  position:fixed;
  inset:0;
  z-index:0;
  background:hsl(var(--hero-bg));
  pointer-events:auto;
}
.auth-spline{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.auth-hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.30);
  pointer-events:none;
  z-index:1;
}
.auth-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,hsla(var(--primary)/.12),transparent 55%),
    linear-gradient(180deg,hsla(var(--hero-bg)/.15) 0%,hsla(var(--hero-bg)/.55) 55%,hsla(var(--hero-bg)/.88) 100%);
}
.auth-hero.is-fallback{
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%,hsla(var(--primary)/.16),transparent 58%),
    radial-gradient(ellipse 45% 40% at 90% 90%,hsla(0 0% 100%/.04),transparent 50%),
    hsl(var(--hero-bg));
}
.auth-hero.is-fallback .auth-spline{display:none}
.auth-hero.is-ready .auth-spline{opacity:1}

/* Floating minimal nav */
.auth-nav{
  position:fixed;
  top:0;
  inset-inline:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  pointer-events:none;
}
.auth-nav a{
  pointer-events:auto;
  text-decoration:none;
  color:hsl(var(--foreground));
  font-family:var(--auth-font);
}
.auth-nav-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.02em;
  padding:8px 12px;
  border-radius:calc(var(--radius) + 4px);
  background:hsla(var(--nav-button)/.55);
  border:1px solid hsla(var(--border)/.7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .15s ease,border-color .15s ease;
}
.auth-nav-brand:hover{
  background:hsla(var(--nav-button)/.8);
  border-color:hsla(0 0% 100%/.22);
}
.auth-nav-brand img{
  width:28px;
  height:28px;
  object-fit:contain;
  border-radius:6px;
}
.auth-nav-brand img.auth-logo-full,
.auth-brand img.auth-logo-full{
  width:auto;
  height:40px;
  max-width:min(220px,72vw);
  border-radius:0;
}
.auth-nav-brand img.auth-logo-full{
  height:26px;
  max-width:150px;
}
.auth-nav-back{
  font-size:.8125rem;
  font-weight:500;
  color:hsl(var(--muted-foreground));
  padding:8px 12px;
  border-radius:var(--radius);
  background:hsla(var(--nav-button)/.45);
  border:1px solid transparent;
  backdrop-filter:blur(10px);
  transition:color .15s ease,border-color .15s ease;
}
.auth-nav-back:hover{
  color:hsl(var(--foreground));
  border-color:hsl(var(--border));
}

.auth-shell{
  position:relative;
  z-index:10;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:88px 20px 48px;
  pointer-events:none;
}

.auth-card{
  pointer-events:auto;
  position:relative;
  z-index:11;
  width:min(100%,420px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:28px 24px 24px;
  border-radius:calc(var(--radius) + 6px);
  background:hsla(var(--card)/.72);
  border:1px solid hsla(var(--border)/.85);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    0 0 0 1px hsla(0 0% 100%/.04) inset;
}

@keyframes auth-fade-up{
  from{opacity:0;transform:translateY(18px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes auth-fade-in{
  from{opacity:0}
  to{opacity:1}
}

.auth-anim{
  opacity:0;
  animation:auth-fade-up .7s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--d,0s);
}
.auth-anim-in{
  opacity:0;
  animation:auth-fade-in .55s ease forwards;
  animation-delay:var(--d,0s);
}

.auth-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  align-self:center;
  text-decoration:none;
  color:hsl(var(--foreground));
  font-weight:700;
  font-size:clamp(1.35rem,3vw,1.65rem);
  letter-spacing:-.02em;
  margin:0 0 22px;
  transition:opacity .15s ease;
}
.auth-brand:hover{opacity:.9}
.auth-brand img{
  width:36px;
  height:36px;
  object-fit:contain;
  border-radius:calc(var(--radius) + 2px);
}
.auth-brand img.auth-logo-full{
  width:auto;
  height:44px;
  max-width:min(240px,78vw);
  border-radius:0;
}

.auth-card h1{
  margin:0 0 10px;
  font-size:clamp(1.45rem,4.2vw,1.85rem);
  font-weight:700;
  letter-spacing:-.03em;
  color:hsl(var(--foreground));
  text-align:center;
  line-height:1.35;
}

.auth-lead{
  margin:0 0 24px;
  color:hsl(var(--muted-foreground));
  font-size:.875rem;
  font-weight:300;
  line-height:1.85;
  text-align:center;
}

.auth-seg{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:4px;
  margin:0 0 22px;
  border-radius:calc(var(--radius) + 4px);
  background:hsla(var(--nav-button)/.9);
  border:1px solid hsl(var(--border));
}
.auth-seg-btn{
  min-height:46px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:transparent;
  color:hsl(var(--muted-foreground));
  font-size:.8125rem;
  font-weight:600;
  font-family:inherit;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.auth-seg-btn:hover:not(.is-active){color:hsl(var(--foreground))}
.auth-seg-btn.is-active{
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  border-color:hsl(var(--border));
  box-shadow:0 0 0 1px hsla(var(--primary)/.15);
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.auth-form[hidden]{display:none!important}

.auth-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.01em;
  color:hsl(var(--muted-foreground));
  text-align:right;
}
.auth-field input{
  min-height:48px;
  border-radius:var(--radius);
  border:1px solid hsl(var(--input));
  background:hsla(var(--secondary)/.85);
  color:hsl(var(--foreground));
  padding:12px 14px;
  font-size:.95rem;
  font-weight:400;
  font-family:inherit;
  letter-spacing:normal;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-field input::placeholder{color:hsla(var(--muted-foreground)/.7)}
.auth-field input:focus{
  outline:none;
  border-color:hsla(var(--primary)/.75);
  box-shadow:0 0 0 3px hsla(var(--primary)/.2);
  background:hsl(var(--nav-button));
}
.auth-field input[dir="ltr"]{text-align:left}

.auth-help{
  margin:-6px 0 0;
  font-size:.75rem;
  font-weight:300;
  color:hsla(var(--muted-foreground)/.85);
  line-height:1.7;
  text-align:right;
}

.auth-primary{
  min-height:52px;
  margin-top:6px;
  border:0;
  border-radius:var(--radius);
  background:var(--cta);
  color:var(--cta-ink);
  font-weight:700;
  font-size:.95rem;
  font-family:inherit;
  letter-spacing:-.01em;
  cursor:pointer;
  box-shadow:
    0 0 0 7px #c9f48b0a,
    0 10px 28px #00000040,
    0 0 40px #f0f5eb22;
  transition:transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.auth-primary:hover:not(:disabled){
  filter:brightness(1.04);
  box-shadow:
    0 0 0 7px #c9f48b14,
    0 12px 32px #0000004d,
    0 0 48px #f0f5eb33;
}
.auth-primary:active:not(:disabled){transform:scale(.97)}
.auth-primary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;filter:none}

.auth-social-block{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:22px;
}
.auth-social-block[hidden]{display:none!important}

.auth-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  color:hsl(var(--muted-foreground));
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.12em;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:hsl(var(--border));
}

.auth-google{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  border-radius:var(--radius);
  border:1px solid hsl(var(--border));
  background:hsla(var(--nav-button)/.9);
  color:hsl(var(--foreground));
  font-size:.875rem;
  font-weight:600;
  font-family:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, filter .15s ease, transform .15s ease;
}
.auth-google:hover:not(:disabled):not(.is-soon){
  filter:brightness(1.08);
  border-color:hsla(0 0% 100%/.22);
}
.auth-google:active:not(:disabled):not(.is-soon){transform:scale(.97)}
.auth-google.is-soon,
.auth-google:disabled{
  opacity:.85;
  cursor:not-allowed;
}
.auth-google svg{width:20px;height:20px;flex-shrink:0}
.auth-google-soon{
  font-size:.7rem;
  color:hsl(var(--primary));
  font-weight:700;
  margin-inline-start:2px;
}

.auth-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-top:22px;
  font-size:.875rem;
  line-height:1.8;
  text-align:center;
}
.auth-links[hidden]{display:none!important}
.auth-links a{
  color:hsl(var(--primary));
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:600;
}
.auth-links .muted{color:hsl(var(--muted-foreground));margin:0;font-weight:300}
.auth-links .muted a{margin-inline-start:4px}

.auth-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.auth-text-btn{
  border:0;
  background:transparent;
  color:hsl(var(--primary));
  cursor:pointer;
  min-height:40px;
  padding:6px 2px;
  font-size:.8125rem;
  font-family:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.auth-text-btn:disabled{opacity:.45;cursor:not-allowed}

.auth-target{
  margin:0;
  font-size:.875rem;
  font-weight:300;
  color:hsl(var(--muted-foreground));
  text-align:center;
  line-height:1.8;
}
.auth-target strong{color:hsl(var(--foreground));font-weight:600}

.auth-timer{
  margin:0;
  text-align:center;
  font-size:.75rem;
  color:hsla(var(--muted-foreground)/.9);
}

.auth-status{
  margin:14px 0 0;
  min-height:1.4em;
  text-align:center;
  font-size:.8125rem;
  color:hsl(var(--muted-foreground));
}
.auth-status.is-error{color:hsl(var(--destructive-foreground));filter:saturate(1.2) brightness(1.15)}
.auth-status.is-ok{color:hsl(var(--primary))}

.auth-dev{
  margin:8px 0 0;
  font-size:.7rem;
  word-break:break-all;
  color:hsla(var(--muted-foreground)/.8);
  text-align:center;
}
.auth-dev a{color:hsl(var(--primary))}

/* legacy back link hidden when nav present */
.auth-back{display:none}

@media (max-width:768px){
  .auth-hero{pointer-events:none}
  .auth-spline{pointer-events:none}
  .auth-card{padding:24px 18px 20px;width:100%}
  .auth-shell{padding:80px 16px 36px;justify-content:flex-start}
  .auth-seg-btn{font-size:.75rem}
}

@media (prefers-reduced-motion:reduce){
  .auth-anim,.auth-anim-in{animation:none;opacity:1;filter:none;transform:none}
}