:root{
  --ips-gap: 14px;
  --ips-radius: 999px;
  --ips-blue: #2f6bff;
  --ips-blue2: #2158f2;
  --ips-glow: 0 10px 24px rgba(47,107,255,.22);
}
.ips-top-wrap{width:100%; display:flex; justify-content:center; margin:clamp(10px,2vw,22px) 0 14px}
/* admin bar: mantém respiro quando visível */
body.admin-bar .ips-top-wrap{ margin-top: calc(clamp(10px,2vw,22px) + 32px); }
@media (max-width:782px){
  body.admin-bar .ips-top-wrap{ margin-top: calc(clamp(10px,2vw,22px) + 46px); }
}
.ips-top-menu{
  display:flex; gap:var(--ips-gap); flex-wrap:wrap;
  justify-content:center; align-items:center; padding:2px 6px;
}
.ips-top-sep{
  width: clamp(12px, 4vw, 28px); height: 10px; background: #e8e8ee; opacity:.8;
  border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
  display:inline-block; margin: 0 4px;
}
.ips-top-btn{
  display:inline-block; padding:12px 18px; border-radius:var(--ips-radius);
  background: linear-gradient(180deg, var(--ips-blue), var(--ips-blue2));
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.2px;
  box-shadow: var(--ips-glow); transform: translateZ(0);
  transition: transform .08s ease, filter .15s ease, opacity .15s ease;
}
.ips-top-btn:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.ips-auth{ background: linear-gradient(180deg, #0ea5e9, #0284c7); }
.ips-auth.ips-register{ background: linear-gradient(180deg, #22c55e, #16a34a); }
@media(max-width:900px){
  .ips-top-btn{ padding:11px 16px; font-weight:700; }
}
@media(max-width:640px){
  .ips-top-menu{ gap:10px; }
  .ips-top-btn{ padding:10px 14px; }
}