/* ═══════════════════════════════════════════════════════════════
   COSMOS HUB — Login / Cadastro (compartilhado em todas as páginas)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --auth-void: #030712; --auth-dark: #0a1628;
  --auth-violet: #a78bfa; --auth-violet-dim: #7c3aed;
  --auth-ice: #7dd3fc; --auth-gold: #c8a96e;
  --auth-green: #34d399; --auth-red: #f87171;
  --auth-white: #f0f4ff; --auth-muted: #8899bb;
  --auth-border: rgba(167,139,250,.18);
}

/* NAV AREA (botão de login / usuário logado) */
#cosmosAuthArea { display:flex; align-items:center; gap:.7rem; font-family:'Inter',sans-serif; }
.auth-nav-btn {
  font-family:'Orbitron',monospace; font-size:.65rem; letter-spacing:.08em;
  padding:.5rem 1.1rem; border-radius:2px; cursor:pointer; text-transform:uppercase;
  border:1px solid rgba(167,139,250,.4); background:rgba(167,139,250,.12); color:var(--auth-violet);
  transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
}
.auth-nav-btn:hover { background:rgba(167,139,250,.22); }
.auth-nav-user { display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:var(--auth-muted); }
.auth-nav-user img.auth-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; }
.auth-role-badge {
  font-family:'Orbitron',monospace; font-size:.5rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.15rem .5rem; border-radius:2px;
  background:rgba(200,169,110,.15); border:1px solid rgba(200,169,110,.4); color:var(--auth-gold);
}
.auth-role-badge.editor { background:rgba(125,211,252,.12); border-color:rgba(125,211,252,.35); color:var(--auth-ice); }
.auth-nav-link {
  font-family:'Orbitron',monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--auth-muted); text-decoration:none; background:none; border:none; cursor:pointer;
}
.auth-nav-link:hover { color:var(--auth-violet); }
.auth-nav-link.admin-link { color:var(--auth-gold); }

/* OVERLAY / MODAL */
.cosmos-auth-overlay {
  position:fixed; inset:0; z-index:2000; background:rgba(3,7,18,.85); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:1.5rem;
}
.cosmos-auth-overlay.open { display:flex; }
.cosmos-auth-box {
  width:100%; max-width:400px; background:var(--auth-dark); border:1px solid var(--auth-border);
  border-radius:6px; padding:2rem; box-shadow:0 20px 60px rgba(0,0,0,.6); color:var(--auth-white);
  font-family:'Inter',sans-serif; max-height:90vh; overflow-y:auto;
}
.cosmos-auth-close { float:right; background:none; border:none; color:var(--auth-muted); font-size:1.2rem; cursor:pointer; line-height:1; }
.cosmos-auth-logo { font-family:'Orbitron',monospace; font-size:.95rem; font-weight:700; letter-spacing:.1em; text-align:center; margin-bottom:1.4rem; clear:both; }

.cosmos-auth-tabs { display:flex; gap:.4rem; margin-bottom:1.4rem; border-bottom:1px solid var(--auth-border); }
.cosmos-auth-tab {
  flex:1; background:none; border:none; color:var(--auth-muted); padding:.6rem; cursor:pointer;
  font-family:'Orbitron',monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.cosmos-auth-tab.active { color:var(--auth-violet); border-bottom-color:var(--auth-violet); }

.cosmos-auth-field { margin-bottom:.9rem; display:flex; flex-direction:column; gap:.35rem; }
.cosmos-auth-field label { font-family:'Orbitron',monospace; font-size:.55rem; letter-spacing:.12em; color:var(--auth-muted); text-transform:uppercase; }
.cosmos-auth-field input {
  background:rgba(14,26,52,.8); border:1px solid rgba(167,139,250,.2); border-radius:2px;
  color:var(--auth-white); font-family:'Inter',sans-serif; font-size:.85rem; padding:.65rem .8rem; outline:none;
}
.cosmos-auth-field input:focus { border-color:rgba(167,139,250,.5); }

.cosmos-auth-submit {
  width:100%; justify-content:center; font-family:'Orbitron',monospace; font-size:.68rem; letter-spacing:.1em;
  padding:.75rem; border-radius:2px; cursor:pointer; text-transform:uppercase; border:none;
  background:rgba(52,211,153,.15); border:1px solid rgba(52,211,153,.4); color:var(--auth-green);
  margin-top:.4rem; transition:all .2s;
}
.cosmos-auth-submit:hover { background:rgba(52,211,153,.25); }
.cosmos-auth-submit:disabled { opacity:.5; cursor:not-allowed; }

.cosmos-auth-divider { display:flex; align-items:center; gap:.8rem; margin:1.2rem 0; color:var(--auth-muted); font-size:.68rem; }
.cosmos-auth-divider::before, .cosmos-auth-divider::after { content:''; flex:1; height:1px; background:var(--auth-border); }

.cosmos-auth-google {
  width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:#fff; color:#1f1f1f; border:none; border-radius:2px; padding:.7rem; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:.82rem; font-weight:500; transition:opacity .2s;
}
.cosmos-auth-google:hover { opacity:.9; }
.cosmos-auth-google:disabled { opacity:.45; cursor:not-allowed; }
.cosmos-auth-google svg { width:18px; height:18px; }

.cosmos-auth-msg { font-size:.75rem; text-align:center; margin-top:1rem; line-height:1.6; min-height:1rem; }
.cosmos-auth-msg.error { color:var(--auth-red); }
.cosmos-auth-msg.success { color:var(--auth-green); }
.cosmos-auth-msg.info { color:var(--auth-ice); }

.cosmos-auth-switch { text-align:center; font-size:.72rem; color:var(--auth-muted); margin-top:1rem; }
.cosmos-auth-switch button { background:none; border:none; color:var(--auth-ice); cursor:pointer; text-decoration:underline; font-size:.72rem; }

.cosmos-auth-hint { font-size:.65rem; color:var(--auth-muted); text-align:center; margin-top:1.2rem; line-height:1.6; }

.cosmos-toast {
  position:fixed; top:80px; right:1.5rem; z-index:2100;
  padding:.8rem 1.4rem; border-radius:3px; font-size:.78rem;
  font-family:'Orbitron',monospace; letter-spacing:.05em; max-width:320px;
  transform:translateX(140%); transition:transform .3s; background:rgba(10,22,40,.97);
  border:1px solid rgba(52,211,153,.4); color:var(--auth-green);
}
.cosmos-toast.show { transform:translateX(0); }
.cosmos-toast.error { border-color:rgba(248,113,113,.4); color:var(--auth-red); }

@media (max-width:480px) {
  .cosmos-auth-box { padding:1.4rem; }
}