/* Dark Glass Theme - Enhanced Glassmorphism Design */
/* Inspired by uprock.ru glassmorphism guide */

/* Dark Theme Variables - Enhanced Glassmorphism */
[data-theme='dark'] {
  /* Enhanced Dark Background Colors */
  --bg-primary: #0e0e10;
  /* Deep dark background */
  --bg-secondary: #1a1a1d;
  /* Secondary dark layer */
  --bg-tertiary: #2a2a2e;
  /* Tertiary dark layer */
  --bg-overlay: rgba(14, 14, 16, 0.95);

  /* Enhanced Text Colors - High contrast but not pure white */
  --text-primary: #ededed;
  /* Soft white for primary text */
  --text-secondary: #cccccc;
  /* Light gray for secondary text */
  --text-tertiary: #999999;
  /* Medium gray for tertiary text */
  --text-inverse: #0e0e10;
  /* Inverted text color */

  /* Neon/Pastel Accent Colors */
  --primary-color: #8ab4f8;
  /* Soft blue neon */
  --secondary-color: #a48aff;
  /* Soft purple neon */
  --accent-color: #64d2ff;
  /* Bright cyan accent */
  --success-color: #81c995;
  /* Soft green */
  --warning-color: #ffb366;
  /* Soft orange */
  --error-color: #ff8a80;
  /* Soft red */

  /* Enhanced Border Colors */
  --border-primary: rgba(255, 255, 255, 0.15);
  /* Subtle white border */
  --border-secondary: rgba(255, 255, 255, 0.1);
  /* Very subtle border */
  --border-focus: var(--primary-color);

  /* Enhanced Shadow Colors with Glow Effects */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Enhanced Glass Morphism */
  --glass-bg: rgba(255, 255, 255, 0.05);
  /* Very subtle white */
  --glass-border: rgba(255, 255, 255, 0.1);
  /* Subtle white border */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 150, 255, 0.1);
  --backdrop-blur: blur(14px);

  /* Enhanced Gradients */
  --gradient-primary: radial-gradient(circle at 30% 30%, #1a1a1d, #0e0e10 80%);
  --gradient-secondary: linear-gradient(135deg, rgba(138, 180, 248, 0.1), rgba(164, 138, 255, 0.05));
  --gradient-accent: linear-gradient(135deg, rgba(100, 210, 255, 0.15), rgba(138, 180, 248, 0.1));

  /* Enhanced Highlight Colors */
  --highlight-color: rgba(138, 180, 248, 0.15);
  /* Soft blue highlight */
  --shadow-soft: rgba(0, 0, 0, 0.4);
  --shadow-tooltip: rgba(255, 255, 255, 0.1);

  /* Glow Effects */
  --glow-primary: 0 0 20px rgba(138, 180, 248, 0.3);
  --glow-secondary: 0 0 20px rgba(164, 138, 255, 0.2);
  --glow-accent: 0 0 20px rgba(100, 210, 255, 0.25);
}

/* Enhanced Body Background with Multi-layered Gradients */
[data-theme='dark'] body {
  background: radial-gradient(circle at 20% 20%, rgba(138, 180, 248, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(164, 138, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(100, 210, 255, 0.05) 0%, transparent 50%), linear-gradient(135deg, #0e0e10 0%, #1a1a1d 50%, #0e0e10 100%);
  background-attachment: fixed;
  min-height: 100vh;
  transition: all var(--transition-normal);
}

/* Enhanced Glass Containers */
[data-theme='dark'] .glass,
[data-theme='dark'] .glass-pastel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all var(--transition-normal);
}

[data-theme='dark'] .glass:hover,
[data-theme='dark'] .glass-pastel:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 30px rgba(138, 180, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Enhanced Demo Cards */
[data-theme='dark'] .demo-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.1);
  transition: all var(--transition-normal);
}

[data-theme='dark'] .demo-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 30px rgba(138, 180, 248, 0.2);
  transform: translateY(-4px);
}

/* Enhanced Buttons */
[data-theme='dark'] .btn {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(138, 180, 248, 0.1);
  transition: all var(--transition-normal);
}

[data-theme='dark'] .btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.2);
  transform: translateY(-2px);
}

[data-theme='dark'] .btn-primary {
  background: linear-gradient(135deg, rgba(138, 180, 248, 0.2), rgba(100, 210, 255, 0.15));
  border: 1px solid rgba(138, 180, 248, 0.3);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(138, 180, 248, 0.3);
}

[data-theme='dark'] .btn-primary:hover {
  background: linear-gradient(135deg, rgba(138, 180, 248, 0.3), rgba(100, 210, 255, 0.25));
  border-color: rgba(138, 180, 248, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 25px rgba(138, 180, 248, 0.4);
}

/* Enhanced Form Elements */
[data-theme='dark'] .form-input,
[data-theme='dark'] .form-textarea,
[data-theme='dark'] .form-select {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(138, 180, 248, 0.1);
  transition: all var(--transition-normal);
}

[data-theme='dark'] .form-input:focus,
[data-theme='dark'] .form-textarea:focus,
[data-theme='dark'] .form-select:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.3), 0 0 0 3px rgba(138, 180, 248, 0.1);
}

/* Enhanced Header */
[data-theme='dark'] .template-header {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.1);
}

/* Enhanced Theme Toggle */
[data-theme='dark'] .theme-toggle {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(138, 180, 248, 0.1);
  transition: all var(--transition-normal);
}

[data-theme='dark'] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.2);
  transform: translateY(-2px) rotate(180deg);
}

[data-theme='dark'] .theme-icon {
  filter: drop-shadow(0 0 4px rgba(138, 180, 248, 0.3));
}

/* Enhanced Language Select */
[data-theme='dark'] .language-select {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(138, 180, 248, 0.1);
}

[data-theme='dark'] .language-select:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.2);
}

[data-theme='dark'] .language-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

[data-theme='dark'] .language-select option:hover {
  background: var(--highlight-color);
  color: var(--text-primary);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

[data-theme='dark'] .language-select option:checked {
  background: var(--primary-color);
  color: var(--text-inverse);
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(138, 180, 248, 0.4);
}

/* Enhanced Skip Link */
[data-theme='dark'] .skip-link {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(138, 180, 248, 0.1);
}

/* Enhanced Links */
[data-theme='dark'] .link {
  color: var(--primary-color);
  text-shadow: 0 0 10px rgba(138, 180, 248, 0.3);
  transition: all var(--transition-normal);
}

[data-theme='dark'] .link:hover {
  color: var(--accent-color);
  text-shadow: 0 0 15px rgba(100, 210, 255, 0.5);
}

/* Enhanced Focus States */
[data-theme='dark'] .focus-ring:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(138, 180, 248, 0.1), 0 0 20px rgba(138, 180, 248, 0.3);
}

/* Enhanced Card Styles */
[data-theme='dark'] .card-pastel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.1);
  transition: all var(--transition-normal);
}

[data-theme='dark'] .card-pastel:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 30px rgba(138, 180, 248, 0.2);
  transform: translateY(-4px);
}

/* Enhanced Input Styles */
[data-theme='dark'] .input-pastel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(138, 180, 248, 0.1);
  transition: all var(--transition-normal);
}

[data-theme='dark'] .input-pastel:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.3), 0 0 0 3px rgba(138, 180, 248, 0.1);
}

/* Enhanced Button Variants */
[data-theme='dark'] .btn-pastel {
  background: linear-gradient(135deg, rgba(138, 180, 248, 0.2), rgba(100, 210, 255, 0.15));
  border: 1px solid rgba(138, 180, 248, 0.3);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(138, 180, 248, 0.3);
}

[data-theme='dark'] .btn-pastel:hover {
  background: linear-gradient(135deg, rgba(138, 180, 248, 0.3), rgba(100, 210, 255, 0.25));
  border-color: rgba(138, 180, 248, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 25px rgba(138, 180, 248, 0.4);
  transform: translateY(-1px);
}

/* Enhanced Theme Toggle Variant */
[data-theme='dark'] .theme-toggle-pastel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(138, 180, 248, 0.1);
  transition: all var(--transition-normal);
}

[data-theme='dark'] .theme-toggle-pastel:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.2);
  transform: scale(1.1);
}

/* Enhanced Navigation */
[data-theme='dark'] .nav-pastel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.1);
}

/* Enhanced Loading States */
[data-theme='dark'] .loading-pastel {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(138, 180, 248, 0.15) 50%, rgba(255, 255, 255, 0.05) 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

/* Enhanced Success/Error States */
[data-theme='dark'] .success-pastel {
  background: rgba(129, 201, 149, 0.1);
  border-color: var(--success-color);
  color: var(--success-color);
  box-shadow: 0 0 20px rgba(129, 201, 149, 0.2);
}

[data-theme='dark'] .error-pastel {
  background: rgba(255, 138, 128, 0.1);
  border-color: var(--error-color);
  color: var(--error-color);
  box-shadow: 0 0 20px rgba(255, 138, 128, 0.2);
}

[data-theme='dark'] .warning-pastel {
  background: rgba(255, 179, 102, 0.1);
  border-color: var(--warning-color);
  color: var(--warning-color);
  box-shadow: 0 0 20px rgba(255, 179, 102, 0.2);
}

[data-theme='dark'] .info-pastel {
  background: rgba(100, 210, 255, 0.1);
  border-color: var(--accent-color);
  color: var(--accent-color);
  box-shadow: 0 0 20px rgba(100, 210, 255, 0.2);
}

/* Enhanced Shadows */
[data-theme='dark'] .shadow-pastel {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 20px rgba(138, 180, 248, 0.1);
}

/* Enhanced Focus States */
[data-theme='dark'] .focus-pastel:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(138, 180, 248, 0.1), 0 0 20px rgba(138, 180, 248, 0.3), var(--shadow-md);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(14px)) {
  [data-theme='dark'] .glass,
  [data-theme='dark'] .glass-pastel,
  [data-theme='dark'] .demo-card,
  [data-theme='dark'] .btn,
  [data-theme='dark'] .form-input,
  [data-theme='dark'] .form-textarea,
  [data-theme='dark'] .form-select,
  [data-theme='dark'] .theme-toggle,
  [data-theme='dark'] .language-select,
  [data-theme='dark'] .skip-link,
  [data-theme='dark'] .card-pastel,
  [data-theme='dark'] .input-pastel,
  [data-theme='dark'] .btn-pastel,
  [data-theme='dark'] .theme-toggle-pastel,
  [data-theme='dark'] .nav-pastel {
    background: rgba(26, 26, 29, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* Enhanced Animations */
@keyframes glass-glow {
  0%,
  100% {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 180, 248, 0.1);
  }

  50% {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 30px rgba(138, 180, 248, 0.2);
  }
}

[data-theme='dark'] .glass:hover,
[data-theme='dark'] .glass-pastel:hover {
  animation: glass-glow 2s ease-in-out infinite;
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
  [data-theme='dark'] .glass,
  [data-theme='dark'] .glass-pastel,
  [data-theme='dark'] .demo-card,
  [data-theme='dark'] .card-pastel {
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Enhanced High Contrast Mode */
@media (prefers-contrast: high) {
  [data-theme='dark'] .glass,
  [data-theme='dark'] .glass-pastel,
  [data-theme='dark'] .demo-card,
  [data-theme='dark'] .card-pastel,
  [data-theme='dark'] .btn,
  [data-theme='dark'] .btn-pastel,
  [data-theme='dark'] .form-input,
  [data-theme='dark'] .form-textarea,
  [data-theme='dark'] .form-select,
  [data-theme='dark'] .input-pastel {
    border-width: 2px;
    border-color: var(--text-primary);
  }

  [data-theme='dark'] .focus-pastel:focus,
  [data-theme='dark'] .focus-ring:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
}

/* Enhanced Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  [data-theme='dark'] .glass:hover,
  [data-theme='dark'] .glass-pastel:hover,
  [data-theme='dark'] .demo-card:hover,
  [data-theme='dark'] .card-pastel:hover,
  [data-theme='dark'] .btn:hover,
  [data-theme='dark'] .btn-pastel:hover,
  [data-theme='dark'] .theme-toggle:hover,
  [data-theme='dark'] .theme-toggle-pastel:hover {
    transform: none;
    animation: none;
  }
}

/* d9911 dark UI baseline: local, dependency-free, and motion-aware. */
html {
  background-color: #080b12;
  color-scheme: dark;
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  background-color: #080b12;
  accent-color: #90caf9;
}

::selection {
  background: rgba(144, 202, 249, 0.28);
  color: #ffffff;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid #90caf9;
  outline-offset: 3px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #90caf9 #111722;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: #111722;
}

*::-webkit-scrollbar-thumb {
  min-width: 36px;
  min-height: 36px;
  border: 2px solid #111722;
  border-radius: 999px;
  background: linear-gradient(180deg, #90caf9, #ce93d8);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #73e8f2, #c6a0ff);
  background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}