:root{--bg-void: #06060f;--bg-surface: #0d0d1f;--bg-card: #12122a;--bg-card-hover: #181838;--accent-red: #ff3c3c;--accent-blue: #00cfff;--accent-green: #39ff88;--accent-gold: #ffd234;--accent-purple: #b36bff;--text-primary: #f0f0ff;--text-secondary: #8888aa;--text-muted: #444466;--border-subtle: rgba(255,255,255,.06);--border-glow: rgba(0, 207, 255, .3);--font-display: "Orbitron", sans-serif;--font-body: "Inter", sans-serif;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 32px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--bg-void);color:var(--text-primary);font-family:var(--font-body);line-height:1.6;overflow-x:hidden;min-height:100vh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-void)}::-webkit-scrollbar-thumb{background:var(--accent-blue);border-radius:3px}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(0,207,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,207,255,.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}#root{position:relative;z-index:1}.glow-blue{text-shadow:0 0 20px var(--accent-blue),0 0 40px rgba(0,207,255,.4)}.glow-red{text-shadow:0 0 20px var(--accent-red),0 0 40px rgba(255,60,60,.4)}.glow-green{text-shadow:0 0 20px var(--accent-green),0 0 40px rgba(57,255,136,.4)}.glow-gold{text-shadow:0 0 20px var(--accent-gold),0 0 40px rgba(255,210,52,.4)}.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;transition:border-color .2s,background .2s,transform .2s}.card:hover{background:var(--bg-card-hover);border-color:var(--border-glow);transform:translateY(-2px)}.badge-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;font-family:var(--font-body);letter-spacing:.04em;text-transform:uppercase}.section-label{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-blue);margin-bottom:8px}.friends-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.friends-grid a:hover{border-color:var(--border-glow);transform:translateY(-2px)}@media (max-width: 900px){.friends-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width: 600px){.friends-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 400px){.friends-grid{grid-template-columns:repeat(2,1fr)}}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes scanline{0%{top:-10%}to{top:110%}}.animate-float{animation:float 3s ease-in-out infinite}.animate-pulse-glow{animation:pulse-glow 2s ease-in-out infinite}@keyframes online-pulse{0%,to{box-shadow:0 0 6px var(--accent-green);transform:scale(1)}50%{box-shadow:0 0 14px var(--accent-green),0 0 24px #39ff8866;transform:scale(1.15)}}.online-status-pulse{animation:online-pulse 2s ease-in-out infinite}@keyframes avatar-glow-pulse{0%,to{filter:drop-shadow(0 0 18px rgba(255,60,60,.25)) drop-shadow(0 0 36px rgba(0,207,255,.15))}50%{filter:drop-shadow(0 0 32px rgba(255,60,60,.5)) drop-shadow(0 0 56px rgba(0,207,255,.35))}}@keyframes hero-particle-drift{0%,to{transform:translate(0) scale(1);opacity:.35}25%{transform:translate(8px,-12px) scale(1.25);opacity:1}50%{transform:translate(-6px,-20px) scale(.85);opacity:.5}75%{transform:translate(-10px,-8px) scale(1.1);opacity:.75}}.hero-avatar-float{animation:float 3s ease-in-out infinite}.hero-avatar-glow{animation:avatar-glow-pulse 4s ease-in-out infinite}.hero-avatar-spin-border{position:relative;isolation:isolate;overflow:hidden}.hero-avatar-spin-border:before{content:"";position:absolute;top:-120%;right:-120%;bottom:-120%;left:-120%;background:conic-gradient(from 0deg,var(--accent-red),var(--accent-blue),var(--accent-purple),var(--accent-green),var(--accent-red));animation:spin-slow 4s linear infinite;z-index:0}.hero-avatar-particle{position:absolute;border-radius:50%;pointer-events:none;animation:hero-particle-drift ease-in-out infinite}.hero-avatar-star{position:absolute;pointer-events:none;line-height:1;animation:hero-particle-drift ease-in-out infinite;text-shadow:0 0 6px currentColor}