.theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: color 0.2s ease;
}

.theme-icon svg {
  width: 100%;
  height: 100%;
}

[class*="-svg"]:not(.theme-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  min-height: 16px;
  color: inherit;
}

.empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: inherit;
  opacity: 0.7;
}

.empty-icon.theme-icon {
  width: 48px;
  height: 48px;
}

.theme-icon.icon-sm { width: 14px; height: 14px; }
.theme-icon.icon-md { width: 18px; height: 18px; }
.theme-icon.icon-lg { width: 32px; height: 32px; }
.theme-icon.icon-xl { width: 48px; height: 48px; }

.menu-icon.theme-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 0.5rem;
}

.theme-icon.icon-primary { color: var(--accent-primary, #4169E1); }
.theme-icon.icon-secondary { color: var(--accent-secondary, #667eea); }
.theme-icon.icon-success { color: #28a745; }
.theme-icon.icon-warning { color: #ffc107; }
.theme-icon.icon-danger { color: #dc3545; }
.theme-icon.icon-muted { color: var(--text-secondary, #999); }
.theme-icon.icon-text { color: var(--text-primary, #333); }

.theme-icon.icon-glow {
  filter: drop-shadow(0 0 4px currentColor);
}

.theme-icon.icon-animate {
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* Blueprint Unlocked Star - Special golden styling */
.star-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Golden star icon - has built-in colors, just needs glow animation */
.star-container .starGolden-svg,
.starGolden-svg.icon-inline {
  filter: drop-shadow(0 0 4px #FFD700) drop-shadow(0 0 8px #FFA500);
  animation: starGlow 2s ease-in-out infinite, starSpin 8s linear infinite;
  position: relative;
}

/* Legacy star-svg support */
.star-container .star-svg,
.star-svg.unlocked-star,
.theme-option .star-svg.unlocked-star {
  color: #FFD700 !important;
  filter: drop-shadow(0 0 4px #FFD700) drop-shadow(0 0 8px #FFA500) !important;
  animation: starGlow 2s ease-in-out infinite, starSpin 8s linear infinite !important;
  position: relative;
}

.star-container .star-svg svg,
.star-svg.unlocked-star svg {
  fill: #FFD700 !important;
  color: #FFD700 !important;
}

.star-container::before {
  content: '';
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  animation: starAura 3s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes starGlow {
  0%, 100% {
    filter: drop-shadow(0 0 4px #FFD700) drop-shadow(0 0 8px #FFA500);
  }
  50% {
    filter: drop-shadow(0 0 8px #FFD700) drop-shadow(0 0 16px #FFA500) drop-shadow(0 0 24px #FF8C00);
  }
}

@keyframes starSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes starAura {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 0.8; }
}

/* Stardust particles container */
.star-particles {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  overflow: visible;
}

.star-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #FFD700;
  box-shadow: 0 0 4px #FFD700, 0 0 8px #FFA500;
  animation: particleFloat 3s ease-in-out infinite;
}

.star-particle:nth-child(1) { top: 0; left: 50%; animation-delay: 0s; }
.star-particle:nth-child(2) { top: 20%; right: 0; animation-delay: 0.5s; }
.star-particle:nth-child(3) { bottom: 20%; right: 10%; animation-delay: 1s; }
.star-particle:nth-child(4) { bottom: 0; left: 50%; animation-delay: 1.5s; }
.star-particle:nth-child(5) { top: 20%; left: 0; animation-delay: 2s; }
.star-particle:nth-child(6) { bottom: 20%; left: 10%; animation-delay: 2.5s; }

@keyframes particleFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(var(--tx, 5px), var(--ty, -10px)) scale(0.8);
    opacity: 0.8;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translate(var(--tx2, 10px), var(--ty2, -20px)) scale(0.3);
    opacity: 0;
  }
}

.star-particle:nth-child(1) { --tx: 0; --ty: -15px; --tx2: 0; --ty2: -25px; }
.star-particle:nth-child(2) { --tx: 10px; --ty: -5px; --tx2: 18px; --ty2: -10px; }
.star-particle:nth-child(3) { --tx: 8px; --ty: 8px; --tx2: 15px; --ty2: 15px; }
.star-particle:nth-child(4) { --tx: 0; --ty: 12px; --tx2: 0; --ty2: 22px; }
.star-particle:nth-child(5) { --tx: -10px; --ty: -5px; --tx2: -18px; --ty2: -10px; }
.star-particle:nth-child(6) { --tx: -8px; --ty: 8px; --tx2: -15px; --ty2: 15px; }