/* Nuclear UI Components */
.nuclear-progress {
  margin: 20px auto;
  max-width: 500px;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 15px;
}

.nuclear-progress .progress-bar {
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

.nuclear-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.nuclear-progress .progress-text {
  text-align: center;
  font-size: 14px;
  color: #666;
  font-weight: bold;
}

.nuclear-status {
  padding: 15px;
  margin: 15px 0;
  background: #e3f2fd;
  border-radius: 8px;
  border-left: 4px solid #2196F3;
  color: #0d47a1;
  font-size: 14px;
}

.nuclear-download-btn {
  display: inline-block !important;
  padding: 12px 24px !important;
  margin: 15px 0 !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.nuclear-download-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

/* Theme styles */
.dark-theme {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

.dark-theme .tool-container {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}

.dark-theme .nuclear-progress {
  background-color: #2d2d2d !important;
}

.dark-theme .nuclear-status {
  background-color: #0d47a1 !important;
  color: #ffffff !important;
}

/* Exempt areas - allow any styling */
[data-nuclear-exempt="true"] {
  /* These can be styled freely */
}

.theme-switcher,
[data-theme-switch] {
  transition: transform 0.3s ease;
}

.theme-switcher:active,
[data-theme-switch]:active {
  transform: translateX(5px);
}

.nuclear-tool-host {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 400px;
  position: relative;
}

[data-nuclear-host] {
  display: block !important;
}

.tool-card__body.nuclear-hidden {
  display: none !important;
}

.tool-card__body.nuclear-visible {
  display: block !important;
}

.nuclear-status,
[data-nuclear-status="true"] {
  background: none !important;
  color: inherit !important;
  border-left: none !important;
}

.nuclear-progress,
[data-nuclear-progress="true"] {
  margin: 20px 0;
}

.nuclear-progress .progress-bar,
[data-nuclear-progress="true"] .progress-bar {
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.nuclear-progress .progress-fill,
[data-nuclear-progress="true"] .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.nuclear-progress .progress-text,
[data-nuclear-progress="true"] .progress-text {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: #666;
  font-weight: bold;
}

.nuclear-download-btn,
[data-nuclear-download="true"] {
  display: inline-block;
  text-decoration: none;
}

.nuclear-download-btn:hover,
[data-nuclear-download="true"]:hover {
  transform: translateY(-2px);
}

.nuclear-processing {
  position: relative;
}

.nuclear-processing::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid #4CAF50;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: nuclear-spin 1s linear infinite;
  transform: translateY(-50%);
}

[data-nuclear-status].nuclear-updated {
  animation: nuclear-pulse 2s infinite;
}

.nuclear-system [data-nuclear-tool] .nuclear-status,
[data-nuclear-tool] .nuclear-status,
.tool-card .nuclear-status {
  padding: 10px !important;
  margin: 10px 0 !important;
  background: #e3f2fd !important;
  border: 1px solid #bbdefb !important;
  border-radius: 5px !important;
  color: #1565c0 !important;
  font-size: 14px !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.nuclear-system [data-nuclear-tool] .nuclear-status.processing,
[data-nuclear-tool] .nuclear-status.processing {
  background: #fff3e0 !important;
  border-color: #ffe0b2 !important;
  color: #ef6c00 !important;
}

.nuclear-system [data-nuclear-tool] .nuclear-download,
[data-nuclear-tool] .nuclear-download,
.nuclear-download-btn {
  display: inline-block !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, #4CAF50, #2E7D32) !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  font-weight: bold !important;
  border: none !important;
  cursor: pointer !important;
  margin: 15px 0 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes nuclear-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

.nuclear-download-btn {
  animation: nuclear-fadein 0.5s ease;
}

@keyframes nuclear-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nuclear-spin {
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}

/* ===== Img-any opt-out: stop pulse/spin/hover animations ===== */
#tool-img-any .nuclear-status,
#tool-img-any [data-nuclear-status],
#tool-img-any [data-nuclear-status].nuclear-updated,
#tool-img-any .nuclear-download-btn,
#tool-img-any [data-nuclear-download="true"] {
  animation: none !important;
}

#tool-img-any .nuclear-processing::after,
#tool-img-any [data-nuclear-status].nuclear-updated::after {
  content: none !important;
  animation: none !important;
}

.nuclear-error {
  padding: 15px;
  margin: 15px 0;
  background: #ffebee;
  border-radius: 8px;
  border-left: 5px solid #f44336;
  color: #c62828;
  font-weight: bold;
}