/* ============================================================
   EVE Tracker — Avatar Frame Animations
   Applies to:
     .discord-avatar-img.frame-XXX  → VipProfile card avatar
     .pilot-avatar-mini.frame-XXX   → Header mini avatar
     .frame-XXX-decor               → SVG decorator overlays
   ============================================================ */

/* ── BASE AVATAR STYLES ─────────────────────────────────────── */
.discord-avatar-img,
.pilot-avatar-mini {
  transition: box-shadow 0.4s ease, filter 0.4s ease, outline 0.4s ease;
}

/* ── SHARED KEYFRAMES ───────────────────────────────────────── */
@keyframes af-spin        { from{transform:rotate(0deg)}   to{transform:rotate(360deg)} }
@keyframes af-spinRev     { from{transform:rotate(0deg)}   to{transform:rotate(-360deg)} }
@keyframes af-hueShift    { from{filter:hue-rotate(0deg)}  to{filter:hue-rotate(360deg)} }
@keyframes af-pulse       { 0%,100%{opacity:1} 50%{opacity:0.55} }
@keyframes af-scalePulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes af-glitch {
  0%,88%,100% { transform:translate(0,0); filter:none; }
  90%  { transform:translate(-2px,1px);  filter:hue-rotate(90deg) saturate(3); }
  92%  { transform:translate(2px,-1px);  filter:hue-rotate(200deg) saturate(3); }
  94%  { transform:translate(-1px,2px);  filter:hue-rotate(310deg) saturate(3); }
  96%  { transform:translate(1px,-2px);  filter:hue-rotate(50deg) saturate(3); }
}
@keyframes af-sonarPing {
  0%   { box-shadow: 0 0 0 0   rgba(56,189,248,0.7),  0 0 8px #38bdf8; }
  70%  { box-shadow: 0 0 0 14px rgba(56,189,248,0),   0 0 8px #38bdf8; }
  100% { box-shadow: 0 0 0 0   rgba(56,189,248,0),    0 0 8px #38bdf8; }
}
@keyframes af-doublePulse {
  0%,100% { box-shadow: 0 0 0 2px #00ffff, 0 0 0 5px transparent, 0 0 10px #00ffff; }
  50%     { box-shadow: 0 0 0 2px #ff00ff, 0 0 0 5px #ff00ff33,   0 0 18px #ff00ff; }
}
@keyframes af-rgbBorder {
  0%   { outline-color:#ff0000; box-shadow:0 0 12px #ff0000,0 0 24px #ff000066; }
  16%  { outline-color:#ffaa00; box-shadow:0 0 12px #ffaa00,0 0 24px #ffaa0066; }
  33%  { outline-color:#00ff00; box-shadow:0 0 12px #00ff00,0 0 24px #00ff0066; }
  50%  { outline-color:#00ffff; box-shadow:0 0 12px #00ffff,0 0 24px #00ffff66; }
  66%  { outline-color:#0088ff; box-shadow:0 0 12px #0088ff,0 0 24px #0088ff66; }
  83%  { outline-color:#ff00ff; box-shadow:0 0 12px #ff00ff,0 0 24px #ff00ff66; }
  100% { outline-color:#ff0000; box-shadow:0 0 12px #ff0000,0 0 24px #ff000066; }
}

/* ── 1. ANGRY ANIME ─────────────────────────────────────────── */
.discord-avatar-img.frame-angry_anime,
.pilot-avatar-mini.frame-angry_anime {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
  box-shadow: 0 0 12px #ef4444, 0 0 28px rgba(239,68,68,0.4);
  animation: af-pulse 1.2s ease-in-out infinite;
}
.frame-angry_anime-decor {
  animation: af-spin 8s linear infinite;
}

/* ── 2. GOLD WREATH ─────────────────────────────────────────── */
.discord-avatar-img.frame-gold_wreath,
.pilot-avatar-mini.frame-gold_wreath {
  outline: 2px solid #ffd32a;
  outline-offset: 2px;
  box-shadow: 0 0 14px #ffd32a, 0 0 30px rgba(255,211,42,0.5);
  animation: af-pulse 2s ease-in-out infinite;
}
.frame-gold_wreath-decor {
  animation: af-pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #ffd32a);
}

/* ── 3. CYBER NEON ──────────────────────────────────────────── */
.discord-avatar-img.frame-cyber_neon,
.pilot-avatar-mini.frame-cyber_neon {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  box-shadow: 0 0 12px #38bdf8, 0 0 28px rgba(56,189,248,0.4);
  animation: af-pulse 1.5s ease-in-out infinite;
}
.frame-cyber_neon-decor {
  animation: af-spin 6s linear infinite;
  filter: drop-shadow(0 0 5px #38bdf8);
}

/* ── 4. FLAME ───────────────────────────────────────────────── */
.discord-avatar-img.frame-flame,
.pilot-avatar-mini.frame-flame {
  outline: 2px solid #e08114;
  outline-offset: 2px;
  animation: af-flamePulse 1.2s ease-in-out infinite;
}
@keyframes af-flamePulse {
  0%,100% { box-shadow:0 0 10px #e08114,0 0 26px rgba(224,129,20,0.5); }
  33%     { box-shadow:0 0 18px #ff4500,0 0 38px rgba(255,69,0,0.6); }
  66%     { box-shadow:0 0 14px #ff8c00,0 0 30px rgba(255,140,0,0.5); }
}

/* ── 5. VOID PORTAL ─────────────────────────────────────────── */
.discord-avatar-img.frame-void_portal,
.pilot-avatar-mini.frame-void_portal {
  outline: 2px solid #a855f7;
  outline-offset: 2px;
  box-shadow: 0 0 14px #a855f7, 0 0 32px rgba(168,85,247,0.5);
  animation: af-hueShift 4s linear infinite;
}

/* ── 6. MATRIX GLOW ─────────────────────────────────────────── */
.discord-avatar-img.frame-matrix_glow,
.pilot-avatar-mini.frame-matrix_glow {
  outline: 2px solid #00e676;
  outline-offset: 2px;
  box-shadow: 0 0 12px #00e676, 0 0 28px rgba(0,230,118,0.4);
  animation: af-pulse 1.5s ease-in-out infinite;
}
.frame-matrix_glow-decor {
  animation: af-scalePulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #00e676);
}

/* ── 7. TACTICAL RETICLE ────────────────────────────────────── */
.discord-avatar-img.frame-tactical_reticle,
.pilot-avatar-mini.frame-tactical_reticle {
  outline: 2px dashed #e08114;
  outline-offset: 3px;
  box-shadow: 0 0 10px rgba(224,129,20,0.6);
  animation: af-spin 8s linear infinite;
}
.frame-tactical_reticle-decor {
  animation: af-spin 10s linear infinite;
  filter: drop-shadow(0 0 4px #e08114);
}

/* ── 8. LIGHTNING STORM ─────────────────────────────────────── */
.discord-avatar-img.frame-lightning_storm,
.pilot-avatar-mini.frame-lightning_storm {
  outline: 2px solid #00d2ff;
  outline-offset: 2px;
  animation: af-lightningPulse 0.8s ease-in-out infinite;
}
@keyframes af-lightningPulse {
  0%,90%,100% { box-shadow:0 0 10px #00d2ff,0 0 24px rgba(0,210,255,0.4); }
  95%         { box-shadow:0 0 22px #ffffff,0 0 50px #00d2ff; }
}
.frame-lightning_storm-decor {
  animation: af-pulse 0.8s ease-in-out infinite;
  filter: drop-shadow(0 0 8px #00d2ff);
}

/* ── 9. SAKURA BLOSSOM ──────────────────────────────────────── */
.discord-avatar-img.frame-sakura_blossom,
.pilot-avatar-mini.frame-sakura_blossom {
  outline: 2px solid #ff758c;
  outline-offset: 2px;
  box-shadow: 0 0 12px #ff758c, 0 0 26px rgba(255,117,140,0.4);
  animation: af-scalePulse 2.5s ease-in-out infinite;
}
.frame-sakura_blossom-decor {
  animation: af-spin 12s linear infinite;
  filter: drop-shadow(0 0 4px #ff758c);
}

/* ── 10. ANGEL HALO ─────────────────────────────────────────── */
.discord-avatar-img.frame-angel_halo,
.pilot-avatar-mini.frame-angel_halo {
  outline: 2px solid #fff3b0;
  outline-offset: 2px;
  box-shadow: 0 0 14px rgba(255,243,176,0.8), 0 0 30px rgba(255,211,42,0.5);
  animation: af-pulse 2s ease-in-out infinite;
}
.frame-angel_halo-decor {
  animation: af-scalePulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px #ffd32a);
}

/* ── 11. DEMON HORNS ────────────────────────────────────────── */
.discord-avatar-img.frame-demon_horns,
.pilot-avatar-mini.frame-demon_horns {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
  box-shadow: 0 0 14px #dc2626, 0 0 32px rgba(220,38,38,0.5);
  animation: af-pulse 1s ease-in-out infinite;
}
.frame-demon_horns-decor {
  filter: drop-shadow(0 0 8px #dc2626);
  animation: af-pulse 1s ease-in-out infinite;
}

/* ── 12. CAT EARS ───────────────────────────────────────────── */
.discord-avatar-img.frame-cat_ears,
.pilot-avatar-mini.frame-cat_ears {
  outline: 2px solid #ff69b4;
  outline-offset: 2px;
  box-shadow: 0 0 12px #ff69b4, 0 0 26px rgba(255,105,180,0.4);
  animation: af-pulse 1.8s ease-in-out infinite;
}
.frame-cat_ears-decor {
  animation: af-pulse 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #ff69b4);
}

/* ── 13. ICE CRYSTAL ────────────────────────────────────────── */
.discord-avatar-img.frame-ice_crystal,
.pilot-avatar-mini.frame-ice_crystal {
  outline: 2px solid #a8e6f0;
  outline-offset: 2px;
  box-shadow: 0 0 12px #a8e6f0, 0 0 28px rgba(168,230,240,0.5), inset 0 0 6px rgba(91,200,224,0.2);
  animation: af-icePulse 2.5s ease-in-out infinite;
}
@keyframes af-icePulse {
  0%,100% { box-shadow:0 0 12px #a8e6f0,0 0 28px rgba(168,230,240,0.5),inset 0 0 6px rgba(91,200,224,0.2); }
  50%     { box-shadow:0 0 20px #fff,0 0 45px rgba(168,230,240,0.7),inset 0 0 10px rgba(91,200,224,0.4); }
}
.frame-ice_crystal-decor {
  animation: af-spin 4s linear infinite;
  filter: drop-shadow(0 0 5px #a8e6f0);
}

/* ── 14. COSMIC GALAXY ──────────────────────────────────────── */
.discord-avatar-img.frame-cosmic_galaxy,
.pilot-avatar-mini.frame-cosmic_galaxy {
  outline: 2px solid #6c63ff;
  outline-offset: 2px;
  animation: af-galaxyPulse 3s ease-in-out infinite;
}
@keyframes af-galaxyPulse {
  0%,100% { box-shadow:0 0 12px #6c63ff,0 0 28px rgba(108,99,255,0.5); filter:hue-rotate(0deg); }
  33%     { box-shadow:0 0 16px #ff6584,0 0 36px rgba(255,101,132,0.5); filter:hue-rotate(60deg); }
  66%     { box-shadow:0 0 14px #43e97b,0 0 30px rgba(67,233,123,0.5); filter:hue-rotate(120deg); }
}

/* ── 15. RAINBOW CHROMA ─────────────────────────────────────── */
.discord-avatar-img.frame-rainbow_chroma,
.pilot-avatar-mini.frame-rainbow_chroma {
  outline: 3px solid #ff0000;
  outline-offset: 2px;
  animation: af-rgbBorder 1.5s linear infinite;
}

/* ── 16. GLITCH CYBER ───────────────────────────────────────── */
.discord-avatar-img.frame-glitch_cyber,
.pilot-avatar-mini.frame-glitch_cyber {
  outline: 2px solid #00ffff;
  outline-offset: 2px;
  box-shadow: 0 0 12px #00ffff, 0 0 28px rgba(0,255,255,0.4);
  animation: af-glitch 3s infinite;
}

/* ── 17. TOXIC RADIATION ────────────────────────────────────── */
.discord-avatar-img.frame-toxic_radiation,
.pilot-avatar-mini.frame-toxic_radiation {
  outline: 2px solid #39d353;
  outline-offset: 2px;
  box-shadow: 0 0 12px #39d353, 0 0 28px rgba(57,211,83,0.5);
  animation: af-pulse 1s ease-in-out infinite;
}
.frame-toxic_radiation-decor {
  animation: af-spinRev 4s linear infinite;
  filter: drop-shadow(0 0 6px #39d353);
}

/* ── 18. PULSE HEART ────────────────────────────────────────── */
.discord-avatar-img.frame-pulse_heart,
.pilot-avatar-mini.frame-pulse_heart {
  outline: 2px solid #ff1493;
  outline-offset: 2px;
  animation: af-heartBeat 0.7s ease-in-out infinite;
}
@keyframes af-heartBeat {
  0%,100%  { box-shadow:0 0 10px #ff69b4,0 0 24px rgba(255,20,147,0.5); transform:scale(1); }
  14%      { box-shadow:0 0 20px #ff1493,0 0 50px rgba(255,20,147,0.8); transform:scale(1.05); }
  28%      { box-shadow:0 0 10px #ff69b4,0 0 24px rgba(255,20,147,0.5); transform:scale(1); }
  42%      { box-shadow:0 0 16px #ff1493,0 0 40px rgba(255,20,147,0.7); transform:scale(1.03); }
}

/* ── 19. STEALTH HEX ────────────────────────────────────────── */
.discord-avatar-img.frame-stealth_hex,
.pilot-avatar-mini.frame-stealth_hex {
  outline: 2px dashed #38bdf8;
  outline-offset: 3px;
  box-shadow: 0 0 10px rgba(56,189,248,0.6);
  animation: af-spin 5s linear infinite;
}
.frame-stealth_hex-decor {
  animation: af-pulse 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px #38bdf8);
}

/* ── 20. PIRATE CROSSBONES ──────────────────────────────────── */
.discord-avatar-img.frame-pirate_crossbones,
.pilot-avatar-mini.frame-pirate_crossbones {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(220,38,38,0.7);
  animation: af-pulse 2.5s ease-in-out infinite;
}
.frame-pirate_crossbones-decor {
  animation: af-spin 20s linear infinite;
}

/* ── 21. BLOOD MOON ─────────────────────────────────────────── */
.discord-avatar-img.frame-blood_moon,
.pilot-avatar-mini.frame-blood_moon {
  outline: 2px solid #8b0000;
  outline-offset: 2px;
  animation: af-bloodPulse 2s ease-in-out infinite;
}
@keyframes af-bloodPulse {
  0%,100% { box-shadow:0 0 10px #8b0000,0 0 26px rgba(139,0,0,0.6); }
  50%     { box-shadow:0 0 22px #cc0000,0 0 50px rgba(204,0,0,0.5),0 0 75px rgba(139,0,0,0.2); }
}
.frame-blood_moon-decor {
  animation: af-pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px #dc2626);
}

/* ── 22. DIAMOND SPARKLE ────────────────────────────────────── */
.discord-avatar-img.frame-diamond_sparkle,
.pilot-avatar-mini.frame-diamond_sparkle {
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
  animation: af-diamondPulse 1.5s ease-in-out infinite;
}
@keyframes af-diamondPulse {
  0%,100% { box-shadow:0 0 10px rgba(255,255,255,0.5),0 0 22px rgba(200,240,255,0.3); }
  50%     { box-shadow:0 0 20px #fff,0 0 45px rgba(200,240,255,0.7),0 0 65px rgba(168,216,240,0.3); }
}
.frame-diamond_sparkle-decor {
  animation: af-spin 3s linear infinite;
  filter: drop-shadow(0 0 6px #fff) brightness(1.3);
}

/* ── 23. AMARR IMPERIAL ─────────────────────────────────────── */
.discord-avatar-img.frame-amarr_imperial,
.pilot-avatar-mini.frame-amarr_imperial {
  outline: 2px solid #ffd32a;
  outline-offset: 2px;
  box-shadow: 0 0 14px #ffd32a, 0 0 30px rgba(255,211,42,0.6);
  animation: af-pulse 2s ease-in-out infinite;
}
.frame-amarr_imperial-decor {
  animation: af-pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #ffd32a);
}

/* ── 24. QUANTUM SHIELD ─────────────────────────────────────── */
.discord-avatar-img.frame-quantum_shield,
.pilot-avatar-mini.frame-quantum_shield {
  outline: 2px solid #38bdf8;
  outline-offset: 3px;
  animation: af-sonarPing 2s ease-out infinite;
}
.frame-quantum_shield-decor {
  animation: af-spin 3s linear infinite;
  filter: drop-shadow(0 0 5px #38bdf8);
}

/* ── 25. STAR WINGS ─────────────────────────────────────────── */
.discord-avatar-img.frame-star_wings,
.pilot-avatar-mini.frame-star_wings {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  box-shadow: 0 0 14px #38bdf8, 0 0 32px rgba(0,229,255,0.5);
  animation: af-pulse 2s ease-in-out infinite;
}
.frame-star_wings-decor {
  animation: af-pulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px #00e5ff);
}

/* ── 26. FIRE DRAGON ────────────────────────────────────────── */
.discord-avatar-img.frame-fire_dragon,
.pilot-avatar-mini.frame-fire_dragon {
  outline: 2px solid #ea580c;
  outline-offset: 2px;
  animation: af-dragonFlare 1.5s ease-in-out infinite;
}
@keyframes af-dragonFlare {
  0%,100% { box-shadow:0 0 10px #ff4500,0 0 24px rgba(255,69,0,0.5); }
  33%     { box-shadow:0 0 20px #ff8c00,0 0 44px rgba(255,140,0,0.6); }
  66%     { box-shadow:0 0 14px #ff0000,0 0 34px rgba(255,0,0,0.4); }
}
.frame-fire_dragon-decor {
  animation: af-pulse 1s ease-in-out infinite;
  filter: drop-shadow(0 0 8px #ff4500);
}

/* ── 27. SYNTHWAVE SUNSET ───────────────────────────────────── */
.discord-avatar-img.frame-synthwave_sunset,
.pilot-avatar-mini.frame-synthwave_sunset {
  outline: 2px solid #ff00ff;
  outline-offset: 2px;
  animation: af-synthPulse 1.5s ease-in-out infinite;
}
@keyframes af-synthPulse {
  0%,100% { box-shadow:0 0 12px #ff00ff,0 0 26px rgba(255,0,255,0.4); }
  50%     { box-shadow:0 0 20px #a000ff,0 0 46px rgba(160,0,255,0.6); }
}
.frame-synthwave_sunset-decor {
  animation: af-pulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #ff00ff);
}

/* ── 28. BUBBLE DREAM ───────────────────────────────────────── */
.discord-avatar-img.frame-bubble_dream,
.pilot-avatar-mini.frame-bubble_dream {
  outline: 2px solid #a5f3fc;
  outline-offset: 2px;
  box-shadow: 0 0 12px #a5f3fc, 0 0 26px rgba(165,243,252,0.4);
  animation: af-bubblePulse 2s ease-in-out infinite;
}
@keyframes af-bubblePulse {
  0%,100% { box-shadow:0 0 12px #a5f3fc,0 0 26px rgba(165,243,252,0.4); }
  50%     { box-shadow:0 0 16px #f472b6,0 0 36px rgba(244,114,182,0.5); }
}
.frame-bubble_dream-decor {
  animation: af-spin 8s linear infinite;
  filter: drop-shadow(0 0 4px #a5f3fc);
}

/* ── 29. DOUBLE PULSE ───────────────────────────────────────── */
.discord-avatar-img.frame-double_pulse,
.pilot-avatar-mini.frame-double_pulse {
  animation: af-doublePulse 1.2s ease-in-out infinite;
}

/* ── 30. DASHED SONAR ───────────────────────────────────────── */
.discord-avatar-img.frame-dashed_sonar,
.pilot-avatar-mini.frame-dashed_sonar {
  outline: 2px dashed #38bdf8;
  outline-offset: 3px;
  animation: af-sonarPing 2s ease-out infinite;
}

/* ── 31. MINIMAL THIN ───────────────────────────────────────── */
.discord-avatar-img.frame-minimal_thin,
.pilot-avatar-mini.frame-minimal_thin {
  outline: 1.5px solid rgba(255,255,255,0.4);
  outline-offset: 2px;
  animation: af-minimalPulse 3s ease-in-out infinite;
}
@keyframes af-minimalPulse {
  0%,100% { outline-color:rgba(255,255,255,0.3); box-shadow:none; }
  50%     { outline-color:rgba(255,255,255,0.7); box-shadow:0 0 6px rgba(255,255,255,0.15); }
}

/* ── 32. NONE ───────────────────────────────────────────────── */
.discord-avatar-img.frame-none,
.pilot-avatar-mini.frame-none {
  outline: none;
  box-shadow: none;
  animation: none;
}

/* ── AVATAR FRAME PICKER MODAL ──────────────────────────────── */
#avatar-frame-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: af-modalIn 0.2s ease;
}
@keyframes af-modalIn {
  from { opacity:0; }
  to   { opacity:1; }
}

#avatar-frame-modal {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  width: 600px;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(224,129,20,0.2);
  animation: af-modalSlide 0.25s cubic-bezier(0.34,1.2,0.64,1);
}
@keyframes af-modalSlide {
  from { transform:translateY(20px) scale(0.97); opacity:0; }
  to   { transform:translateY(0) scale(1); opacity:1; }
}

#avatar-frame-modal .afm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

#avatar-frame-modal .afm-title {
  font-size: 13px;
  font-weight: 800;
  color: #e08114;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

#avatar-frame-modal .afm-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #8892a4;
  font-size: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
#avatar-frame-modal .afm-close:hover { background:rgba(239,68,68,0.15); color:#f87171; }

#avatar-frame-modal .afm-body {
  overflow-y: auto;
  padding: 14px 16px 16px;
  flex: 1;
}
#avatar-frame-modal .afm-body::-webkit-scrollbar { width: 4px; }
#avatar-frame-modal .afm-body::-webkit-scrollbar-thumb { background:#e08114; border-radius:2px; }
#avatar-frame-modal .afm-body::-webkit-scrollbar-track { background:transparent; }

#avatar-frame-modal .afm-grid,
.vip-afm-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

@media (max-width: 900px) {
  #avatar-frame-modal .afm-grid,
  .vip-afm-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  #avatar-frame-modal .afm-grid,
  .vip-afm-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

#avatar-frame-modal .afm-card,
.vip-afm-grid .afm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  border-radius: 8px;
  background: #121620;
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
#avatar-frame-modal .afm-card:hover,
.vip-afm-grid .afm-card:hover { border-color: rgba(255,255,255,0.18); }
#avatar-frame-modal .afm-card.afm-selected,
.vip-afm-grid .afm-card.afm-selected {
  border-color: #e08114;
  background: rgba(224,129,20,0.08);
}

#avatar-frame-modal .afm-card span,
.vip-afm-grid .afm-card span {
  font-size: 8px;
  color: #8892a4;
  text-align: center;
  line-height: 1.2;
}
#avatar-frame-modal .afm-card.afm-selected span,
.vip-afm-grid .afm-card.afm-selected span { color: #e08114; }

/* Preview frame structure inside the modal picker cards */
#avatar-frame-modal .afm-preview,
.vip-afm-grid .afm-preview {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
#avatar-frame-modal .afm-ring,
.vip-afm-grid .afm-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
#avatar-frame-modal .afm-inner-ring,
.vip-afm-grid .afm-inner-ring {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
}
#avatar-frame-modal .afm-clip,
.vip-afm-grid .afm-clip {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  background: #080b11;
}
#avatar-frame-modal .afm-clip img,
.vip-afm-grid .afm-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
}

/* Spinning ring variants for picker preview */
.afm-ring-spin-1  { background:conic-gradient(#a8e6f0,#fff,#5bc8e0,#b2f0ff,#fff,#a8e6f0);       animation:af-spin 3s linear infinite; }
.afm-ring-spin-2  { background:conic-gradient(#6c63ff,#ff6584,#43e97b,#a855f7,#6c63ff);          animation:af-spin 4s linear infinite; }
.afm-ring-spin-3  { background:conic-gradient(red,#ff7700,yellow,lime,cyan,blue,magenta,red);     animation:af-spin 1.5s linear infinite; }
.afm-ring-spin-4  { background:conic-gradient(#00ffff,#080b11,#00ffff,#ff00ff,#080b11,#ff00ff);  animation:af-spin 2s linear infinite; }
.afm-ring-spin-5  { background:conic-gradient(#e08114,#ff4500,#8b0000,#e08114,#ff4500,#e08114);  animation:af-spin 2s linear infinite; }
.afm-ring-spin-6  { background:conic-gradient(#ff69b4,#ff1493,#fff,#ff69b4,#c71585,#ff69b4);     animation:af-spin 4s linear infinite; }
.afm-ring-spin-7  { background:conic-gradient(#ef4444,#ff0000,#ff4500,#ef4444);                  animation:af-spin 3s linear infinite; }
.afm-ring-spin-8  { background:conic-gradient(#ffd32a,#e08114,#f1c40f,#ffd32a,#c8a000,#ffd32a);  animation:af-spin 3s linear infinite; }
.afm-ring-spin-9  { background:conic-gradient(#ff69b4,#ff00aa,#fff,#ff69b4);                     animation:af-spin 5s linear infinite; }
.afm-ring-spin-10 { background:conic-gradient(#00ff88,#00e676,#00ff88,#39d353,#00ff88);          animation:af-spin 2.5s linear infinite; }
.afm-ring-spin-11 { background:conic-gradient(#8b0000,#ff0000,#cc0000,#8b0000);                  animation:af-spin 6s linear infinite; }
.afm-ring-spin-12 { background:conic-gradient(#fff,#c0e8ff,#fff,#a8d8f0,#fff,#c0e8ff,#fff);     animation:af-spin 2s linear infinite; }
.afm-ring-spin-13 { background:conic-gradient(#ff4500,#ff8c00,#ffd700,#ff4500,#8b0000,#ff4500); animation:af-spin 2s linear infinite; }
.afm-ring-spin-14 { background:conic-gradient(#ff00ff,#a000ff,#00ffff,#ff00ff,#7700ff,#ff00ff); animation:af-spin 2.5s linear infinite; }
.afm-ring-spin-15 { background:conic-gradient(#a5f3fc,#f472b6,#a5f3fc,#818cf8,#a5f3fc);         animation:af-spin 3s linear infinite; }
.afm-ring-spin-16 { background:conic-gradient(#00ffff,transparent 50%,#ff00ff,transparent);     animation:af-spin 2s linear infinite; }
.afm-inner-ring-16{ background:conic-gradient(transparent 50%,#00ffff,transparent 75%,#ff00ff); animation:af-spinRev 2s linear infinite; }
.afm-ring-spin-17 { background:conic-gradient(#38bdf8 0%,#38bdf8 5%,transparent 5%,transparent 95%,#38bdf8 95%); animation:af-spin 4s linear infinite; }
.afm-ring-spin-18 { background:rgba(255,255,255,0.12); }
.afm-ring-spin-19 { background:conic-gradient(#6c63ff,#ff6584,#43e97b,#a855f7,#38bdf8,#6c63ff); animation:af-spin 5s linear infinite; }
.afm-ring-spin-20 { background:conic-gradient(#dc2626,#ff0000,#dc2626); animation:af-spin 3s linear infinite; }
.afm-ring-spin-21 { background:conic-gradient(#00d2ff,#0088ff,#00d2ff); animation:af-spin 2s linear infinite; }
.afm-ring-spin-22 { background:conic-gradient(#39d353,#00ff88,#39d353); animation:af-spinRev 3s linear infinite; }
.afm-ring-spin-23 { background:conic-gradient(#a855f7,#7c3aed,#a855f7); animation:af-spin 4s linear infinite; }
.afm-ring-spin-24 { background:conic-gradient(#ff758c,#ff8c94,#ffccd5,#ff758c); animation:af-spin 5s linear infinite; }
.afm-ring-spin-25 { background:conic-gradient(#fff3b0,#ffd32a,#fff3b0); animation:af-pulse 2s ease-in-out infinite; }
.afm-ring-spin-26 { background:conic-gradient(#dc2626,#ff0000,#fff,#dc2626); animation:af-spinRev 5s linear infinite; }
.afm-ring-spin-27 { background:conic-gradient(#38bdf8 0%,#38bdf8 18%,transparent 18%,transparent 22%,#38bdf8 22%,#38bdf8 40%,transparent 40%,transparent 44%,#38bdf8 44%,#38bdf8 62%,transparent 62%,transparent 66%,#38bdf8 66%,#38bdf8 84%,transparent 84%,transparent 88%,#38bdf8 88%); animation:af-spin 2s linear infinite; }
.afm-ring-spin-28 { background:conic-gradient(#38bdf8,#00cec9,#a855f7,#38bdf8); animation:af-spin 3s linear infinite; }
.afm-ring-spin-29 { background:conic-gradient(#e08114,#ff4500,#e08114); animation:af-spin 2s linear infinite; }
.afm-ring-spin-30 { background:conic-gradient(#00ff88 0%,transparent 5%,#ff00ff 10%,transparent 15%,#00ffff 20%,transparent 25%,#ff00ff 30%,transparent 35%,#00ff88 40%,transparent 45%,#00ffff 50%,transparent 55%,#ff00ff 60%,transparent 65%,#00ff88 70%,transparent 75%,#00ffff 80%,transparent 85%,#ff00ff 90%,transparent 95%,#00ff88 100%); animation:af-spin 2s linear infinite; }

#avatar-frame-modal .afm-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#avatar-frame-modal .afm-footer .afm-selected-label {
  font-size: 11px;
  color: #8892a4;
}
#avatar-frame-modal .afm-footer .afm-selected-label strong {
  color: #e08114;
}

#avatar-frame-modal .afm-save-btn {
  background: linear-gradient(135deg,#e08114,#d97706);
  border: none;
  border-radius: 8px;
  color: #000;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 20px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
#avatar-frame-modal .afm-save-btn:hover { opacity: 0.88; transform: translateY(-1px); }
#avatar-frame-modal .afm-save-btn:active { transform: translateY(0); }
#avatar-frame-modal .afm-save-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }