/* Dark Theme Styles */
.dark-theme {
  color-scheme: dark;
  --bg: #0f0f12;
  --card: #18181f;
  --border: #2d2d37;
  --text: #f5f5f7;
  --text2: #9a9ab0;
  --accent: #9b87f5;
  --accent-hover: #7e69f3;
  --success: #00b894;
  --danger: #ff7675;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
}

/* Ensure smooth transitions during theme changes */
.theme-transition,
.theme-transition *,
.theme-transition body {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.dark-theme .toggle .slider {
  background: #3a3a46;
}

.dark-theme .payload-box {
  background: #0b0b0d;
  color: #81e6c9;
}

.dark-theme .info-method.get {
  background: #1e3a8a;
  color: #93c5fd;
}

.dark-theme .info-method.post {
  background: #064e3b;
  color: #6ee7b7;
}

.dark-theme .log-area .log-entry {
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* Mobile optimizations for dark theme */
@media (max-width: 480px) {
  .dark-theme .card {
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
  }
  
  .dark-theme .header {
    border-bottom-color: #252530;
  }
}

/* Altcha dark mode: remap CSS variables directly */
.dark-theme altcha-widget {
  color-scheme: dark;
  --altcha-color-base: var(--card);
  --altcha-color-text: var(--text);
  --altcha-color-border: rgba(255,255,255,0.2);
  --altcha-color-border-focus: var(--accent);
  --altcha-color-active: var(--accent);
  --altcha-color-error-text: #f87171;
  --altcha-color-footer-bg: transparent;
}