/* Auth pages template — matches homepage look (dark topbar + centered card) */

/* Force dark background even if global CSS defines light vars */
html,
body.page-auth{
  min-height:100vh;
  background:#0b0f16 !important;
  color:rgba(255,255,255,.92);
}

/* If the class is missing for any reason, keep auth pages dark when this CSS is loaded */
body{
  background:#0b0f16;
}

/* Soft vignette + subtle blue glow like the homepage screenshots */
body.page-auth::before{
  content:"";
  position:fixed;
  inset:-40vh -40vw;
  background:
    radial-gradient(70vh 70vh at 18% 12%, rgba(13,110,253,.22), transparent 62%),
    radial-gradient(65vh 65vh at 78% 18%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(90vh 90vh at 50% 90%, rgba(0,0,0,.55), transparent 70%);
  pointer-events:none;
  z-index:-1;
}

body.page-auth .brand-name{
  color:#fff;
}
body.page-auth .topbar-btn{
  color:rgba(255,255,255,.92);
}

/* Main layout */
.auth-main{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 16px;
}

.auth-card{
  width:100%;
  max-width:460px;
  margin:0 auto;
  background:rgba(15,18,24,.72);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 28px 90px rgba(0,0,0,.55);
  padding:26px 26px 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.auth-brand{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.auth-brand img{
  width:44px;
  height:44px;
}

.auth-brand__name{
  margin:10px 0 0;
  font-size:64px;
  line-height:1;
  letter-spacing:-.02em;
  font-weight:600;
  text-transform:lowercase;
}

.auth-title{
  margin:18px 0 4px;
  font-size:26px;
  font-weight:600;
  letter-spacing:.2px;
}

.auth-subtitle{
  margin:0 0 18px;
  color:rgba(255,255,255,.72);
  font-size:14px;
}

.auth-alert{
  border-radius:12px;
  padding:12px 12px;
  font-size:13px;
  font-weight:500;
  margin:0 0 14px;
  border:1px solid rgba(255,255,255,.10);
}
.auth-alert--error{ background:rgba(220,53,69,.14); color:#ffd7dd; }
.auth-alert--ok{ background:rgba(25,135,84,.18); color:#d9ffe8; }

.auth-oauth{
  display:grid;
  gap:10px;
  margin-bottom:14px;
}

.auth-oauth a,
.auth-oauth .oauth-disabled{
  height:44px;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
}

.auth-oauth a:hover{ background:rgba(255,255,255,.10); }

.auth-oauth .oauth-disabled{
  opacity:.5;
  cursor:not-allowed;
}

.auth-divider{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.65);
  font-size:12px;
  font-weight:800;
  margin:14px 0;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:rgba(255,255,255,.14);
}

.auth-form{
  display:grid;
  gap:12px;
}

.auth-label{
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,.92);
}

.auth-input{
  height:44px;
  width:100%;
  display:block;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,10,14,.35);
  color:#fff;
  padding:0 12px;
  outline:none;
  font-size:14px;
}

.auth-input::placeholder{ color:rgba(255,255,255,.40); }

.auth-input:focus{
  border-color:rgba(13,110,253,.72);
  box-shadow:0 0 0 3px rgba(13,110,253,.22);
}

.auth-submit{
  width:100%;
  height:46px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
}

.auth-links{
  margin-top:2px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.auth-links a{
  color:rgba(138,180,255,.95);
  font-weight:500;
  text-decoration:none;
  font-size:13px;
}
.auth-links a:hover{ text-decoration:underline; }

.auth-terms{
  margin-top:12px;
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.35;
}
.auth-terms a{ color:rgba(138,180,255,.95); text-decoration:none; font-weight:500; }
.auth-terms a:hover{ text-decoration:underline; }


/* OAuth buttons full-width + centered content */
.auth-oauth a,
.auth-oauth button{
  width:100%;
  display:flex;

  gap:10px;
  text-align:center;
}

@media (max-width: 520px){
  .auth-card{ padding:20px 16px 18px; border-radius:16px; }
  .auth-brand__name{ font-size:46px; }
}


/* Mobile: reduce top gap so the card sits higher (Safari/Chrome) */
@media (max-width: 520px){
  .auth-main{
    padding:20px 14px;
    align-items:flex-start;
  }
  .auth-card{
    margin-top:10px;
  }
}