/* ===== User chip & dropdown ===== */
.nav-user { position: relative; }

/* fixed fallback (when no #navUser in DOM) */
.nav-user.fixed {
  position: fixed; top: 14px; right: 14px; z-index: 9999;
}

.userChip{
  display:inline-flex; align-items:center; gap:.55rem;
  background: linear-gradient(135deg,#6a11cb,#2575fc);
  color:#fff; padding:10px 14px; border-radius:999px;
  font-weight:700; cursor:pointer;
  box-shadow:0 10px 26px rgba(37,117,252,.35);
  transition: transform .18s ease;
}
.userChip:hover{ transform: translateY(-2px); }
.userChip span{
  max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.userMenu hr { border:0; height:1px; background:#e8eef7; margin:6px 0; }

.userMenu{
  position:absolute; right:0; margin-top:10px; min-width:210px;
  background:#ffffff; color:#102a43;
  border:1px solid #e7ecf6; border-radius:14px;
  box-shadow:0 18px 46px rgba(13,42,82,.18);
  padding:6px; display:none; z-index:10000;
}
.userMenu a{
  display:flex; align-items:center; gap:.55rem;
  padding:10px 12px; border-radius:10px;
  text-decoration:none; color:#0b3d91; font-weight:600;
}
.userMenu a:hover{ background:#f5f9ff; }

/* ===== Welcome badge (hero replace) — purple tier + glass glow ===== */
.welcome-badge{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:12px 18px; border-radius:999px;
  color:#fff; font-weight:800; letter-spacing:.3px;
  background: linear-gradient(135deg,#8a2be2 0%,#6a11cb 45%,#2575fc 100%);
  position:relative; isolation:isolate; user-select:none;
  animation: popIn .6s ease-out, gentleFloat 3.5s ease-in-out infinite;
  border: 0;
}
.welcome-badge::before{
  content:""; position:absolute; inset:2px; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.06));
  filter: blur(0.5px); z-index:-1;
}
.welcome-badge::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  background: radial-gradient(60% 80% at 50% 50%, rgba(138,43,226,.35), rgba(37,117,252,.0) 70%);
  filter: blur(8px); z-index:-2;
}
@keyframes popIn { from{ transform: scale(.82); opacity:0 } to{ transform:scale(1); opacity:1 } }
@keyframes gentleFloat { 0%{ transform: translateY(0) } 50%{ transform: translateY(-2px) } 100%{ transform: translateY(0) } }

/* ===== Confetti + sparkles ===== */
.confetti{
  position:fixed; top:10px; width:10px; height:14px; opacity:.95;
  transform: translateY(0) rotate(0deg);
  animation: fall var(--t,1600ms) linear forwards;
  will-change: transform, opacity;
  border-radius: 2px;
}
@keyframes fall{
  to{ transform: translateY(calc(100vh - 20px)) rotate(var(--rot,150deg)); opacity:.1; }
}
.sparkle{
  position:fixed; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #fff 0,#fff 35%, rgba(255,255,255,.0) 70%);
  box-shadow: 0 0 18px rgba(255,255,255,.65);
  animation: sparkleFade var(--st,1200ms) ease-out forwards;
  pointer-events:none;
}
@keyframes sparkleFade{ from{ opacity:.95; transform:scale(.8) } to{ opacity:0; transform:scale(1.6) } }

/* small screens tune */
@media (max-width:420px){
  .userChip span{ max-width:110px; }
  .userMenu{ min-width:180px; }
}