/* auth-ui.css - UI leve para login no canto superior direito (mantém estilo discreto) */

.auth-area{ position: relative; display:flex; align-items:center; gap:10px; margin-left:auto; }
.auth-btn{
  border:1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.15);
  color:#fff;
  padding:8px 12px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}
.auth-btn:hover{ background: rgba(255,255,255,.25); }

.auth-menu{
  position:absolute;
  top:44px;
  right:0;
  min-width: 210px;
  background:#0f1a2b;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  border-radius:14px;
  padding:10px;
  z-index: 9999;
}
.auth-email{ color:#dce8ff; font-size:12px; opacity:.9; margin-bottom:10px; word-break:break-all; }
.auth-logout{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding:9px 10px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}
.auth-logout:hover{ background: rgba(255,255,255,.10); }

/* modal */
.auth-modal{ position:fixed; inset:0; z-index:10000; }
.auth-modal[hidden]{ display:none; }
.auth-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); }
.auth-modal-card{
  position:relative;
  width:min(420px, calc(100vw - 28px));
  margin: 12vh auto 0;
  background: rgba(9, 16, 32, .95);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  border-radius:16px;
  overflow:hidden;
}
.auth-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.auth-modal-title{ color:#fff; font-weight:800; letter-spacing:.2px; }
.auth-modal-close{
  border:0;
  background: transparent;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  opacity:.85;
}
.auth-modal-close:hover{ opacity:1; }
.auth-modal-body{ padding:14px 16px 16px; }
.auth-label{ display:block; color:#cbd7f2; font-size:12px; margin:10px 0 6px; }
.auth-input{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding:10px 11px;
  border-radius:12px;
  outline:none;
}
.auth-input:focus{ border-color: rgba(120,180,255,.65); }
.auth-actions{ display:flex; gap:10px; margin-top:14px; }
.auth-primary{
  flex: 1;
  border:0;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  color:#fff;
  font-weight:800;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
.auth-secondary{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight:700;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
.auth-error{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,80,80,.35);
  background: rgba(255,80,80,.10);
  color:#ffd6d6;
  font-size:13px;
}