:root{
  --bg:#07040f;
  --panel:#0c061a;
  --panel2:#0f0721;
  --text:#e9e2ff;
  --muted:#b8a8ffb3;
  --line:rgba(160, 120, 255, .18);
  --purple:#a855f7;
  --purple2:#6d28d9;
  --pink:#ff2bd6;
  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius:22px;
  --radius2:28px;
  --speed: 260ms;
  --font: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: radial-gradient(1200px 900px at 30% 10%, rgba(168,85,247,.18), transparent 55%),
              radial-gradient(900px 700px at 80% 40%, rgba(255,43,214,.10), transparent 60%),
              radial-gradient(1100px 700px at 50% 100%, rgba(109,40,217,.18), transparent 60%),
              var(--bg);
  overflow-x:hidden;
}

#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 20px;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(7,4,15,.85), rgba(7,4,15,.28));
  border-bottom: 1px solid rgba(160,120,255,.10);
}
.brand{display:flex;align-items:center;gap:10px}
.brand .dot{
  width:10px;height:10px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--purple));
  box-shadow:0 0 18px rgba(168,85,247,.75);
  animation:pulse 2.2s ease-in-out infinite;
}
.brand .name{letter-spacing:.8px;font-weight:800}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding: 28px 18px 54px;
}

.onlyProfiles{
  min-height: calc(100vh - 72px);
  display:grid;
  place-items:center;
}

.grid{
  width:100%;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}
@media (max-width: 920px){
  .grid{grid-template-columns: repeat(6, 1fr);}
}
@media (max-width: 560px){
  .grid{grid-template-columns: repeat(1, 1fr);}
}

.card{
  grid-column: span 6;
  position:relative;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,7,33,.78), rgba(10,6,24,.76));
  border: 1px solid rgba(160,120,255,.16);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: translateY(4px);
  opacity:0;
  animation: popIn 700ms cubic-bezier(.2,.9,.2,1) forwards;
}
.card:nth-child(2){animation-delay: 120ms}

.cardGlow{
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 250px at 20% 15%, rgba(168,85,247,.26), transparent 60%),
              radial-gradient(540px 240px at 90% 45%, rgba(255,43,214,.12), transparent 62%);
  filter: blur(18px);
  opacity:.9;
  animation: floatGlow 10s ease-in-out infinite;
}
.cardInner{position:relative;padding: 18px}

.cardTop{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 12px;
}
.avatar{
  width:54px;height:54px;border-radius: 16px;
  border: 1px solid rgba(160,120,255,.20);
  box-shadow: 0 0 0 4px rgba(168,85,247,.08);
  object-fit:cover;
  background: rgba(168,85,247,.12);
}
.who{min-width:0;flex:1}
.username{
  font-weight: 800;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.displayName{
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 28ch;
}
.handle{color:var(--muted);font-size:13px;margin-top:2px}

.badges{
  display:flex;gap:6px;flex-wrap:wrap;margin-top: 8px
}
.badgeIcon{
  width:28px;height:28px;
  border-radius: 999px;
  border:1px solid rgba(160,120,255,.14);
  background: rgba(12,6,26,.55);
  display:grid;
  place-items:center;
  font-size: 15px;
  box-shadow: 0 10px 22px rgba(0,0,0,.30);
  position:relative;
}
.badgeIcon::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(168,85,247,.35), transparent 55%);
  filter: blur(10px);
  opacity:.55;
  z-index:-1;
}

.statusPill{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(160,120,255,.16);
  background: rgba(12,6,26,.55);
  color: rgba(233,226,255,.85);
}
.sdot{
  width:9px;height:9px;border-radius: 50%;
  box-shadow: 0 0 18px rgba(168,85,247,.55);
}
.sdot.online{background: var(--good)}
.sdot.idle{background: var(--warn)}
.sdot.dnd{background: var(--bad)}
.sdot.offline{background: rgba(233,226,255,.28)}

.spotify{
  position:relative;
  border-radius: 18px;
  padding: 12px;
  border: 1px solid rgba(34,197,94,.18);
  background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(12,6,26,.55));
  overflow:hidden;
}
.spotify::before{
  content:"";
  position:absolute;inset:-2px;
  background: radial-gradient(380px 140px at 15% 20%, rgba(34,197,94,.22), transparent 60%),
              radial-gradient(380px 140px at 85% 60%, rgba(168,85,247,.14), transparent 62%);
  filter: blur(14px);
  opacity:.95;
  animation: floatGlow 9s ease-in-out infinite;
}
.spotifyInner{position:relative;display:flex;gap:12px;align-items:center}
.album{
  width:54px;height:54px;border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  object-fit:cover;
  background: rgba(255,255,255,.06);
}
.track{min-width:0}
.trackTitle{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 40ch;
}
.trackArtist{
  color: rgba(233,226,255,.74);
  font-size: 13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.eq{
  margin-left:auto;
  display:flex;
  gap:3px;
  height: 22px;
  align-items:flex-end;
}
.eq i{
  display:block;
  width:3px;
  border-radius: 999px;
  background: rgba(233,226,255,.85);
  animation: eq 900ms ease-in-out infinite;
  opacity:.9;
}
.eq i:nth-child(2){animation-delay: 120ms}
.eq i:nth-child(3){animation-delay: 240ms}
.eq i:nth-child(4){animation-delay: 360ms}
.eq i:nth-child(5){animation-delay: 480ms}

.smallNote{
  font-size: 12px;
  color: rgba(233,226,255,.68);
  margin-top: 8px;
}
.smallNote a{color: rgba(168,85,247,.95); text-decoration:none}
.smallNote a:hover{text-decoration:underline}

@keyframes pulse{
  0%,100%{transform: scale(1); opacity:1}
  50%{transform: scale(1.18); opacity:.85}
}
@keyframes floatGlow{
  0%,100%{transform: translate3d(0,0,0)}
  50%{transform: translate3d(0,-8px,0)}
}
@keyframes popIn{
  0%{opacity:0; transform: translateY(12px) scale(.985)}
  100%{opacity:1; transform: translateY(0) scale(1)}
}
@keyframes eq{
  0%,100%{height: 5px}
  50%{height: 22px}
}