:root{
  --auth-bg-fallback: radial-gradient(1000px 600px at 70% 20%, rgba(110,70,255,.35), transparent 55%),
                      radial-gradient(900px 700px at 20% 60%, rgba(0,200,255,.22), transparent 60%),
                      linear-gradient(180deg, #0b0b12 0%, #07070c 100%);
  --auth-card-bg: rgba(255,255,255,.92);
  --auth-card-border: rgba(255,255,255,.35);
  --auth-text: #0f1020;
  /* Texto secundário no card (labels/auxiliares). Mantém contraste adequado */
  --auth-muted: rgba(10,10,20,.78);
  --auth-primary: #2f7dff;
  --auth-primary-hover: #2567d6;
  --auth-input-bg: rgba(255,255,255,.95);
  --auth-input-border: rgba(10,10,20,.15);
  --auth-shadow: 0 12px 45px rgba(0,0,0,.35);
  --auth-radius: 20px;
  --auth-font: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
}

*{ box-sizing:border-box; }

body.auth-page{
  margin:0;
  font-family:var(--auth-font);
  color:var(--auth-text);
  min-height:100vh;
  overflow-x:hidden;
  /* Dark soft global (alinha com o tema principal do site) */
  background:#171717;
}

.auth-topbar{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
}

.auth-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.auth-brand img{ height:30px; width:auto; display:block; }
.auth-brand-text{ color:#fff; font-weight:800; letter-spacing:.2px; font-size:18px; }

.auth-top-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  text-decoration:none;
  background:rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}

.auth-top-cta:hover{ border-color:rgba(255,255,255,.45); background:rgba(0,0,0,.28); }

.auth-shell{
  position:relative;
  z-index:1;
  min-height:calc(100vh - 56px - 52px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.auth-bg{
  position:absolute;
  inset:0;
  background: var(--auth-bg-fallback);
  background-size:cover;
  background-position:center;
}

body.auth-page[style*="--auth-bg-url"] .auth-bg{
  background-image: var(--auth-bg-url), var(--auth-bg-fallback);
}

.auth-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}

.auth-card{
  position:relative;
  z-index:2;
  width:min(520px, 100%);
  border-radius:var(--auth-radius);
  background:var(--auth-card-bg);
  border:1px solid var(--auth-card-border);
  box-shadow:var(--auth-shadow);
  padding:26px 26px 18px;
}

/* Cabeçalho interno do card */
.auth-head{ margin-bottom: 10px; }
.auth-kicker{
  font-size:13px;
  color: rgba(10,10,20,.70);
  letter-spacing:.2px;
  margin:0 0 6px;
}

.auth-title{
  margin:0 0 14px;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.4px;
}

.auth-subtitle{
  margin:-6px 0 18px;
  color:var(--auth-muted);
  font-size:14px;
}

.auth-alert{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
}

/* Compatibilidade com classes usadas nas views */
.auth-alert-success,
.auth-alert.success{ background:rgba(18,120,60,.12); border:1px solid rgba(18,120,60,.25); color:#0b3b1f; }

.auth-alert-error,
.auth-alert.error{ background:rgba(160,20,20,.10); border:1px solid rgba(160,20,20,.25); color:#5c0b0b; }

.auth-form{ display:flex; flex-direction:column; gap:12px; }

.auth-field label{
  display:block;
  font-size:13px;
  color:var(--auth-muted);
  margin-bottom:6px;
}

.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field input[type="search"]{
  width:100%;
  height:44px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--auth-input-border);
  background:var(--auth-input-bg);
  outline:none;
  font-size:14px;
}

.auth-field input:focus{ border-color: rgba(47,125,255,.55); box-shadow:0 0 0 4px rgba(47,125,255,.12); }

.auth-hint{
  margin-top:6px;
  font-size:12px;
  color:rgba(255,255,255,.70);
}

.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:2px;
}

.auth-row-between{ justify-content:space-between; }

.auth-checkbox,
.auth-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--auth-muted);
}

.auth-checkbox input[type="checkbox"],
.auth-check input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color: var(--auth-primary);
}

.auth-terms{ align-items:flex-start; line-height:1.25; }
.auth-terms span{ display:inline; }

.auth-link{ color:rgba(0,0,0,.78); text-decoration:none; font-size:13px; }
.auth-link:hover{ text-decoration:underline; }

.auth-btn{
  height:44px;
  width:100%;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* Compatibilidade com classes usadas nas views */
.auth-btn-primary,
.auth-btn.primary{ background:var(--auth-primary); color:#fff; }

.auth-btn-primary:hover,
.auth-btn.primary:hover{ background:var(--auth-primary-hover); }

.auth-btn-google,
.auth-btn.google{
  background:#fff;
  border:1px solid rgba(10,10,20,.18);
  color:#111;
}

.auth-btn-google:hover,
.auth-btn.google:hover{ background:rgba(255,255,255,.92); }

/* Ícone do Google (puro CSS, sem dependências externas) */
.auth-google-ico{
  width:18px;
  height:18px;
  display:inline-block;
  margin-right:10px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.611 20.083H42V20H24v8h11.303C33.825 32.659 29.354 36 24 36c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.844 1.154 7.961 3.039l5.657-5.657C34.454 6.053 29.477 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.651-.389-3.917z'/%3E%3Cpath fill='%23FF3D00' d='M6.306 14.691l6.571 4.819C14.655 16.108 19.007 12 24 12c3.059 0 5.844 1.154 7.961 3.039l5.657-5.657C34.454 6.053 29.477 4 24 4c-7.682 0-14.354 4.327-17.694 10.691z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.272 0 10.155-2.023 13.809-5.314l-6.374-5.392C29.407 34.697 26.827 36 24 36c-5.332 0-9.792-3.317-11.281-7.946l-6.524 5.025C9.505 39.556 16.227 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.611 20.083H42V20H24v8h11.303a12.06 12.06 0 0 1-3.868 5.294l.003-.002 6.374 5.392C36.971 39.408 44 34 44 24c0-1.341-.138-2.651-.389-3.917z'/%3E%3C/svg%3E");
}

.auth-recaptcha{ margin-top: 4px; }

.auth-sep{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0 0;
  color:rgba(0,0,0,.45);
  font-size:12px;
}

.auth-sep:before,
.auth-sep:after{
  content:"";
  height:1px;
  flex:1;
  background:rgba(0,0,0,.10);
}

.auth-bottom{
  margin-top:14px;
  text-align:center;
  font-size:14px;
  color:rgba(0,0,0,.70);
}

.auth-footer{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  height:52px;
  padding:0 16px;
  color:rgba(255,255,255,.75);
  font-size:13px;
}

.auth-footer a{ color:rgba(255,255,255,.80); text-decoration:none; }
.auth-footer a:hover{ text-decoration:underline; }

.auth-footer-sep{ opacity:.7; }

/* Mobile */
@media (max-width: 520px){
  .auth-card{ padding:20px 16px 14px; border-radius:16px; }
  .auth-title{ font-size:30px; }
  .auth-topbar{ padding:14px 14px; }
  .auth-top-cta{ height:34px; padding:0 12px; }
}