/* Canvas com gradiente e grão */
.auth-canvas {
  min-height: 100dvh;
  overflow: hidden;
  background: #0b1220;
  position: relative;
  color: #e5e7eb;
}

/* orbes coloridos */
.bg-orb, .bg-orb::after {
  position: absolute; inset: -20% -10% auto auto;
  width: 80vw; height: 80vw; max-width: 1100px; filter: blur(60px);
  background: radial-gradient(40% 40% at 30% 30%, #ff7a18 0%, transparent 60%),
              radial-gradient(40% 40% at 60% 60%, #ffb800 0%, transparent 60%),
              radial-gradient(35% 35% at 80% 20%, #ff3d81 0%, transparent 60%);
  opacity: .55; pointer-events: none;
}
.orb-2 { inset: auto auto -30% -20%; transform: rotate(25deg);
  background: radial-gradient(40% 40% at 40% 40%, #00c6ff 0%, transparent 60%),
              radial-gradient(40% 40% at 70% 60%, #0072ff 0%, transparent 60%),
              radial-gradient(35% 35% at 20% 70%, #34d399 0%, transparent 60%);
  opacity:.45;
}
.orb-3 { inset: -10% auto auto -10%; transform: rotate(-15deg);
  background: radial-gradient(40% 40% at 50% 30%, #ff8a00 0%, transparent 60%),
              radial-gradient(40% 40% at 20% 80%, #ec4899 0%, transparent 60%),
              radial-gradient(35% 35% at 80% 70%, #22d3ee 0%, transparent 60%);
  opacity:.35;
}

/* grão sutil */
.grain {
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' opacity='0.07'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px; mix-blend-mode: soft-light; pointer-events:none;
}

/* container central */
.glass-wrap {
  position: relative; z-index: 1;
  min-height: 100dvh; display: grid; place-items: center;
  padding: 32px 16px;
}

.glass-card {
  width: min(520px, 92vw);
  border-radius: 22px;
  padding: 22px 22px 18px;
  background: rgba(17, 24, 39, .55);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow:
    0 20px 60px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(18px) saturate(140%);
}

/* topo */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:12px;
  border:1px solid rgba(148,163,184,.2); color:#e5e7eb; opacity:.85;
  background: rgba(2,6,23,.4);
}
.icon-btn:hover { opacity:1; }

/* segmented control */
.segmented {
  background: rgba(2,6,23,.5);
  border:1px solid rgba(148,163,184,.18);
  border-radius:999px; padding:4px; display:inline-flex; gap:4px;
}
.segmented .seg {
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 104px; padding:8px 14px; border-radius:999px; font-weight:600;
  color:#cbd5e1; text-decoration:none;
}
.segmented .seg.active {
  color:#0b1220; background: linear-gradient(180deg,#fff,#f3f4f6);
  box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.7);
}

/* título */
.title { font-size:28px; line-height:1.2; margin:16px 6px 6px; }

/* formulário */
.form { display:grid; gap:12px; margin-top:10px; }
.field { position:relative; display:grid; gap:6px; }
.label { font-size:12px; color:#a7b0c0; }
.input {
  height:52px; border-radius:14px; padding:0 14px;
  background: rgba(2,6,23,.55);
  border:1px solid rgba(148,163,184,.22);
  color:#e5e7eb; width:100%;
}
.input:focus { outline:none; border-color:#60a5fa; }
.field-glow {
  pointer-events:none; position:absolute; inset:auto 0 -1px 0; height:1px;
  background: radial-gradient(60% 6px at 50% 50%, rgba(96,165,250,.7), transparent 70%);
  opacity:0; transition:.2s opacity;
}
.input:focus + .field-glow { opacity:1; }

.pw { position:relative; }
.pw-toggle {
  position:absolute; right:12px; bottom:14px; border:0; background:transparent; color:#94a3b8; cursor:pointer;
}

/* CTA */
.cta {
  height:54px; border-radius:14px; font-weight:700; width:100%;
  background: linear-gradient(180deg,#ffffff,#f3f4f6);
  color:#0b1220; border:1px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.75);
}
.cta:hover { filter: brightness(0.98); }

/* separador */
.or {
  display:flex; align-items:center; gap:10px; margin:16px 6px 10px;
  color:#94a3b8; font-size:12px;
}
.or::before, .or::after { content:""; flex:1; height:1px; background:rgba(148,163,184,.25); }

/* sociais */
.social-row { display:flex; gap:12px; }
.social {
  flex:1; height:52px; border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.55); color:#e5e7eb;
  display:flex; align-items:center; justify-content:center; gap:10px;
  cursor:not-allowed; opacity:.75;
}

/* rodapé */
.terms { color:#9aa5b1; font-size:12px; margin:12px 6px 6px; }
.credit { color:#6b7280; font-size:11px; margin:6px; text-align:center; }

/* erro inline (fallback – seus toasts cobrem isso normalmente) */
.inline-err {
  background:#3f1d2b; border:1px solid #7f1d1d; color:#fecaca;
  padding:8px 10px; border-radius:10px; margin: 6px;
}
/* some: remove "X" close icon on auth screens */
.glass-card .topbar .icon-btn { 
  display: none !important; 
}

/* opcional: encosta o “Entrar / Criar conta” na esquerda */
.glass-card .topbar { 
  justify-content: flex-start; 
}
/* === HOVERS / INTERAÇÕES SUAVES === */

/* CTA principal (botão "Entrar" / "Criar conta") */
.cta{
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
  box-shadow: 0 8px 24px rgba(92,59,255,.35); /* roxinho suave */
}
.cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(92,59,255,.45);
  filter: brightness(1.06);
}
.cta:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(92,59,255,.35);
}
.cta:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(124,92,255,.35), 0 12px 28px rgba(92,59,255,.4);
}

/* Botões sociais (Google/Apple – mesmo que estejam desabilitados) */
.social{
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
.social:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  filter: brightness(1.04);
}
.social:active{ transform: translateY(0); }

/* Abinhas “Entrar / Criar conta” */
.segmented .seg{
  transition: color .2s ease, background .2s ease, transform .12s ease, box-shadow .2s ease;
}
.segmented .seg:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* quando está ativa, mantém o branco mas deixa um feedback sutil */
.segmented .seg.active:hover{
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* Botão de “olhinho” da senha */
.pw-toggle{
  transition: transform .12s ease, background .2s ease, color .2s ease;
}
.pw-toggle:hover{
  transform: scale(1.05);
  background: rgba(255,255,255,.06);
}

/* (opcional) um carinho a mais nos inputs ao focar */
.field .input{
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field .input:hover{
  background: rgba(255,255,255,.03);
}
.field .input:focus{
  border-color: #7c5cff;
  box-shadow: 0 0 0 3px rgba(124,92,255,.18);
}

/* (se o X ainda existir em algum lugar) */
.icon-btn{
  transition: background .2s ease, transform .1s ease, color .2s ease;
}
.icon-btn:hover{
  background: rgba(255,255,255,.08);
  transform: scale(1.02);
}
/* remover a “faixa”/box escuro atrás das abas */
.glass-card .topbar{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;          /* opcional: encosta mais nas bordas */
}

/* dá um respiro pro pill das abas, já que tiramos o padding da topbar */
.glass-card .segmented{
  margin: 6px 0 2px;               /* ajuste fino; pode mudar à vontade */
}
.segmented .seg {
  transition: transform .08s ease, box-shadow .2s ease;
}
.segmented .seg:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}