/*
 * Mandelbulb Explorer - Premium UI
 * Modern, sophisticated styling with perfect visual harmony
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
   /* Dark Theme Colors (Default) */
   --bg-black: #0A0A12;
   --bg-dark: #12121A;
   --bg-medium: #1A1A22;
   --bg-light: #22222A;
   
   /* Gray Scale */
   --gray-100: #F8F9FC;
   --gray-200: #E2E4ED;
   --gray-300: #C3C5D2;
   --gray-400: #9294A8;
   --gray-500: #63657A;
   --gray-600: #40424F;
   
   /* Accent Colors */
   --accent-primary: #4A6FA5;
   --accent-secondary: #334E75;
   --accent-dark: #243752;
   
   /* Supporting Colors */
   --success: #22C55E;
   --error: #EF4444;
   --warning: #F59E0B;
   
   /* Legacy mappings for compatibility */
   --background-primary: var(--bg-black);
   --surface-primary: var(--bg-dark);
   --surface-secondary: var(--bg-medium);
   --surface-tertiary: var(--bg-light);
   --text-primary: var(--gray-100);
   --text-secondary: var(--gray-300);
   --text-tertiary: var(--gray-400);

   /* Gradients */
   --gradient-accent: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
   --gradient-background: radial-gradient(circle at 30% 40%, #12121A, var(--bg-black));
   --gradient-panel: linear-gradient(135deg, rgba(26, 26, 36, 0.8), rgba(18, 18, 24, 0.8));
   --gradient-button-primary: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary));

   /* Opacity Levels */
   --opacity-subtle: 0.08;
   --opacity-light: 0.15;
   --opacity-medium: 0.3;
   --opacity-high: 0.5;
   --opacity-solid: 0.95;

   /* Typography */
   --font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
   --font-family-mono: "JetBrains Mono", monospace;

   --font-size-xs: 0.75rem;  /* 12px */
   --font-size-sm: 0.875rem; /* 14px */
   --font-size-base: 1rem;   /* 16px */
   --font-size-lg: 1.125rem; /* 18px */
   --font-size-xl: 1.25rem;  /* 20px */
   --font-size-2xl: 1.5rem;  /* 24px */
   --font-size-3xl: 1.875rem; /* 30px */

   --font-weight-light: 300;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   --line-height-tight: 1.2;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.7;

   --letter-spacing-tight: -0.02em;
   --letter-spacing-normal: 0;
   --letter-spacing-wide: 0.02em;
   --letter-spacing-wider: 0.05em;

   /* Spacing System */
   --space-2: 2px;
   --space-4: 4px;
   --space-8: 8px;
   --space-12: 12px;
   --space-16: 16px;
   --space-20: 20px;
   --space-24: 24px;
   --space-32: 32px;
   --space-40: 40px;
   --space-48: 48px;

   /* Shadows with opacity for theme compatibility */
   --shadow-color: rgba(0, 0, 0, 0.2);
   --glow-color: rgba(74, 111, 165, 0.15);
   
   /* Shadow Definitions */
   --shadow-subtle: 0 2px 6px var(--shadow-color), 0 1px 2px rgba(0, 0, 0, 0.24);
   --shadow-medium: 0 4px 12px var(--shadow-color), 0 2px 4px rgba(0, 0, 0, 0.15);
   --shadow-large: 0 8px 24px var(--shadow-color), 0 0 0 1px var(--glow-color);
   --shadow-xl: 0 14px 28px var(--shadow-color), 0 10px 10px rgba(0, 0, 0, 0.22);
   --shadow-glow: 0 0 0 1px var(--glow-color);

   /* Border Radius */
   --radius-xs: 4px;
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-full: 9999px;

   /* Transitions */
   --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light Theme Variables */
.light-theme {
   /* Light Theme Colors - Tesla inspired */
   --bg-black: #FFFFFF;
   --bg-dark: #F4F4F4;
   --bg-medium: #EEEEEE;
   --bg-light: #E7E7E7;
   
   /* Gray Scale (Tesla-like) */
   --gray-100: #171A20;
   --gray-200: #393C41;
   --gray-300: #5C5E62;
   --gray-400: #8E8E8E;
   --gray-500: #BBBCBE;
   --gray-600: #DCDDDF;
   
   /* Accent Colors (Tesla blue inspired) */
   --accent-primary: #3E6AE1;
   --accent-secondary: #3457B1;
   --accent-dark: #2B469D;
   
   /* Gradients for Light Theme */
   --gradient-background: radial-gradient(circle at 30% 40%, #FAFAFA, #FFFFFF);
   --gradient-panel: none;
   --gradient-accent: none;
   --gradient-button-primary: none;
   
   /* Shadow Adjustments for Light Theme */
   --shadow-color: rgba(0, 0, 0, 0.08);
   --glow-color: rgba(62, 106, 225, 0.08);
}

/* Light Theme Specific Modifications */
.light-theme #app-header {
   background: rgba(255, 255, 255, 0.9);
   box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(160, 174, 192, 0.3);
}

.light-theme .panel {
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(245, 247, 250, 0.8));
   border: 1px solid rgba(59, 130, 246, 0.1);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.light-theme .panel-header {
   background: rgba(237, 242, 247, 0.7);
   border-bottom: 1px solid rgba(160, 174, 192, 0.2);
}

.light-theme .button {
   background: var(--bg-medium);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   color: var(--gray-300);
}

.light-theme .button:hover {
   background: var(--bg-light);
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
   color: var(--gray-100);
}

.light-theme .header-actions .button {
   background: rgba(237, 242, 247, 0.7);
   border: 1px solid rgba(160, 174, 192, 0.3);
   color: var(--gray-300);
}

.light-theme .header-actions .button:hover {
   background: rgba(237, 242, 247, 0.9);
   border-color: rgba(59, 130, 246, 0.3);
   color: var(--gray-100);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.light-theme #theme-toggle {
   background: rgba(237, 242, 247, 0.7);
   border: 1px solid rgba(160, 174, 192, 0.3);
}

.light-theme #theme-toggle:hover {
   background: rgba(237, 242, 247, 0.9);
   border-color: rgba(59, 130, 246, 0.3);
}

.light-theme .button.primary {
   background: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary));
   color: white;
   box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.light-theme .button.primary:hover {
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
   transform: translateY(-2px);
}

.light-theme .slider {
   background: rgba(226, 232, 240, 0.8);
}

.light-theme .slider-track {
   background: linear-gradient(
      90deg,
      var(--accent-primary),
      var(--accent-secondary) var(--value-percent, 0%),
      rgba(226, 232, 240, 0.6) var(--value-percent, 0%)
   );
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.light-theme .slider::-webkit-slider-thumb {
   background: linear-gradient(135deg, #fff, #f8f9fa);
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.light-theme .tooltip {
   background: rgba(59, 130, 246, 0.15);
   color: var(--accent-primary);
}

.light-theme .tooltip .tooltiptext {
   background: var(--bg-dark);
   border: 1px solid var(--gray-500);
   color: var(--gray-100);
}

.light-theme .color-swatch {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
                inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.light-theme #camera-controls .control-button {
   background: rgba(255, 255, 255, 0.9);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(59, 130, 246, 0.2);
   border: 1px solid rgba(59, 130, 246, 0.1);
   color: var(--gray-400);
}

.light-theme #camera-controls .control-button:hover {
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15), 
              0 0 15px rgba(59, 130, 246, 0.2);
   color: var(--gray-100);
}

.light-theme #performance-tag {
   background: rgba(245, 247, 250, 0.85);
   border: 1px solid rgba(59, 130, 246, 0.2);
   color: var(--gray-400);
}

.light-theme #status-bar {
   background: rgba(245, 247, 250, 0.9);
   border-top: 1px solid rgba(160, 174, 192, 0.3);
   color: var(--gray-400);
}

.light-theme .panel-title {
   color: var(--gray-100);
}

.light-theme .panel-icon {
   color: var(--accent-primary);
}

.light-theme .collapse-icon {
   color: var(--gray-400);
}

.light-theme .slider-label {
   color: var(--gray-300);
}

.light-theme .slider-value {
   color: var(--accent-primary);
   background: rgba(59, 130, 246, 0.1);
}

.light-theme .checkbox-label {
   color: var(--gray-300);
}

.light-theme .custom-checkbox {
   border: 2px solid var(--gray-400);
}

.light-theme .dropdown {
   background-color: var(--bg-medium);
   border: 1px solid var(--gray-500);
   color: var(--gray-300);
}

.light-theme .dropdown:hover {
   border-color: var(--accent-primary);
   background-color: var(--bg-light);
   color: var(--gray-100);
}

.light-theme #stats {
   background: rgba(245, 247, 250, 0.85);
   color: var(--gray-400);
   border: 1px solid rgba(160, 174, 192, 0.3);
}

.light-theme .notification {
   background: rgba(255, 255, 255, 0.9);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
   border-left: 3px solid var(--accent-primary);
   z-index: 9999;
   min-width: 260px;
   max-width: 320px;
   opacity: 0;
   transform: translateX(30px);
   transition: all 0.3s ease;
   pointer-events: none;
}

.light-theme .notification.show {
   opacity: 1;
   transform: translateX(0);
   pointer-events: auto;
}

.light-theme .notification-title {
   font-weight: var(--font-weight-semibold);
   color: var(--gray-100);
   margin-bottom: var(--space-4);
   font-size: var(--font-size-sm);
   display: flex;
   align-items: center;
   gap: var(--space-8);
}

.light-theme .notification-message {
   color: var(--gray-300);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-relaxed);
}

/* Theme Toggle Styles */
#theme-toggle {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 8px; /* Add spacing between buttons */
   width: 40px;
   height: 40px;
   border-radius: var(--radius-md);
   background: rgba(35, 35, 50, 0.4);
   border: 1px solid rgba(74, 111, 165, 0.2);
   cursor: pointer;
   transition: all 0.3s ease;
   color: var(--gray-200);
   position: relative;
   overflow: hidden;
}

#theme-toggle:hover {
   background: rgba(35, 35, 50, 0.6);
   border-color: rgba(74, 111, 165, 0.4);
   color: var(--gray-100);
   transform: translateY(-2px);
}

/* Dark Theme Overrides for Body (automatically handled by CSS variables for other elements) */
body {
   background-color: var(--bg-black);
   background-image: var(--gradient-background);
}

/* Subtle Noise Texture Adjustment for Light Theme */
.light-theme body::before {
   opacity: 0.03;
}

/* Base Styles */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: var(--font-family-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   margin: 0;
   overflow: hidden;
   background-color: var(--bg-black);
   background-image: var(--gradient-background);
   color: var(--gray-100);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height-normal);
}

/* Selection styling */
::selection {
   background: rgba(126, 131, 253, 0.25);
   color: var(--gray-100);
}

canvas {
   width: 100%;
   height: 100%;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
}

/* Header */
#app-header {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 64px;
   background: rgba(10, 10, 16, 0.9);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(35, 35, 50, 0.5);
   z-index: 100;
   display: flex;
   align-items: center;
   padding: 0 var(--space-24);
   box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
}

#app-title {
   font-size: 18px;
   font-weight: var(--font-weight-medium);
   letter-spacing: -0.01em;
   color: var(--gray-100);
   margin-right: auto;
   font-family: var(--font-family-primary);
   position: relative;
   padding-left: var(--space-16);
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   overflow: hidden;
}

#app-title::before {
   content: "";
   position: absolute;
   left: 0;
   top: 25%;
   height: 50%;
   width: 2px;
   background: var(--gradient-accent);
   border-radius: var(--radius-full);
}

#app-title span {
   color: var(--gray-300);
   font-weight: var(--font-weight-light);
}

#app-title::after {
   content: none;
   display: none;
}

@keyframes shine {
   0% { left: -100%; }
   20% { left: 100%; }
   100% { left: 100%; }
}

/* UI Container Layout */
#ui-container {
   position: absolute;
   top: 72px;
   right: var(--space-16);
   width: 320px;
   max-height: calc(100vh - 100px);
   z-index: 100;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   pointer-events: none;
   padding-bottom: var(--space-24);
   overflow-y: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
   -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
}

#ui-container::-webkit-scrollbar {
   display: none;
}

/* Panel Component */
.panel {
   background: rgba(26, 26, 34, 0.8);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   pointer-events: auto;
   transition: transform 0.3s ease,
               box-shadow 0.3s ease,
               opacity 0.3s ease;
   border: 1px solid rgba(74, 111, 165, 0.08);
   position: relative;
   overflow: hidden;
   animation: fadeInUp 0.5s ease backwards;
   animation-delay: calc(var(--panel-index, 0) * 0.08s);
}

.panel:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(74, 111, 165, 0.2);
}

.panel-header {
   display: flex;
   align-items: center;
   padding: 12px 16px;
   background: rgba(18, 18, 26, 0.6);
   border-bottom: 1px solid rgba(70, 70, 85, 0.1);
   cursor: pointer;
   transition: var(--transition-fast);
}

.panel-header:hover {
   background: rgba(25, 25, 40, 0.6);
}

.panel-title {
   font-size: 13px;
   font-weight: var(--font-weight-semibold);
   letter-spacing: 0.03em;
   color: var(--gray-100);
}

.panel-icon {
   font-size: 18px;
   margin-right: 10px;
   color: var(--accent-primary);
   transition: var(--transition-normal);
}

.panel:hover .panel-icon {
   transform: scale(1.1);
}

.collapse-icon {
   font-size: 20px;
   margin-left: auto;
   transition: transform var(--transition-normal);
   color: var(--gray-400);
}

.panel.expanded .collapse-icon {
   transform: rotate(180deg);
}

.panel-content {
   height: 0;
   overflow: hidden;
   padding: 0 var(--space-16);
   transition: height var(--transition-normal);
}

.panel.expanded .panel-content {
   height: auto;
   padding: var(--space-16);
   overflow: visible;
   animation: expandPanel 0.4s cubic-bezier(0.21, 1.02, 0.73, 1);
}

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

/* Buttons */
.button {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--space-8) var(--space-16);
   border-radius: var(--radius-md);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   transition: all 0.2s ease;
   border: 1px solid transparent;
   gap: var(--space-8);
   -webkit-user-select: none;
   user-select: none;
   color: var(--gray-200);
   background: var(--bg-medium);
   box-shadow: var(--shadow-subtle);
   position: relative;
}

.button:hover {
   transform: translateY(-1px);
   background: var(--bg-light);
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
   color: var(--gray-100);
}

.button:active {
   transform: translateY(1px);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.button .icon {
   font-size: 18px;
   transition: transform 0.2s ease;
}

.button:hover .icon {
   transform: translateY(-1px);
}

.button::after {
   content: none;
   display: none;
}

.button.primary {
   background: var(--accent-primary);
   color: var(--gray-100);
   border: none;
   box-shadow: none;
}

.button.primary:hover {
   background: var(--accent-secondary);
   transform: translateY(-1px);
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.button.primary:active {
   transform: translateY(1px);
   box-shadow: none;
}

.button.secondary {
   background: rgba(18, 18, 26, 0.4);
   border: 1.5px solid var(--gray-500);
}

.button.secondary:hover {
   border-color: var(--accent-primary);
   background: rgba(74, 111, 165, 0.1);
}

.button-row {
   display: flex;
   gap: var(--space-8);
   margin-top: var(--space-12);
   width: 100%;
}

/* Sliders */
.slider-container {
   margin-bottom: var(--space-16);
   position: relative;
}

.slider-container:last-child {
   margin-bottom: 0;
}

.slider-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--space-8);
}

.slider-label {
   color: var(--gray-200);
   font-size: 13px;
   font-weight: var(--font-weight-normal);
   display: flex;
   align-items: center;
   gap: var(--space-4);
   position: relative;
}

.slider-value {
   font-size: 13px;
   color: var(--accent-primary);
   font-family: var(--font-family-mono);
   background: rgba(74, 111, 165, 0.15);
   padding: 2px 8px;
   border-radius: 4px;
   font-weight: var(--font-weight-medium);
   min-width: 40px;
   text-align: center;
}

.slider {
   -webkit-appearance: none;
   width: 100%;
   height: 5px;
   border-radius: var(--radius-full);
   background: rgba(18, 18, 26, 0.6);
   outline: none;
   position: relative;
   z-index: 2;
   cursor: pointer;
}

.slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: linear-gradient(135deg, #fff, #e2e4ed);
   box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3);
   cursor: pointer;
   transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
               box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   position: relative;
   z-index: 3;
}

.slider::-webkit-slider-thumb:hover {
   transform: scale(1.15);
}

.slider:active::-webkit-slider-thumb {
   transform: scale(1.2);
}

.slider:focus {
   outline: none;
}

.slider:focus::-webkit-slider-thumb {
   box-shadow: 0 0 0 6px rgba(74, 111, 165, 0.5);
}

.slider-track {
   position: absolute;
   height: 5px;
   border-radius: var(--radius-full);
   background: linear-gradient(
      90deg,
      var(--accent-primary),
      var(--accent-secondary) var(--value-percent, 0%),
      rgba(10, 10, 18, 0.3) var(--value-percent, 0%)
   );
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   width: 100%;
   pointer-events: none;
   z-index: 1;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Dropdown */
.dropdown {
   width: 100%;
   padding: var(--space-8) var(--space-12);
   background: var(--bg-medium);
   border: 1px solid var(--gray-600);
   border-radius: var(--radius-md);
   color: var(--gray-200);
   font-size: var(--font-size-sm);
   font-family: var(--font-family-primary);
   cursor: pointer;
   transition: all 0.2s ease;
   outline: none;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239294A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center;
   background-size: 16px;
   padding-right: 36px;
}

.dropdown:hover {
   border-color: var(--accent-primary);
   background-color: var(--bg-light);
   color: var(--gray-100);
   box-shadow: var(--shadow-glow);
}

.dropdown:focus {
   border-color: var(--accent-primary);
   box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.3);
   color: var(--gray-100);
}

/* Tooltip */
.tooltip {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: rgba(74, 111, 165, 0.15);
   color: var(--accent-primary);
   font-size: 10px;
   font-weight: var(--font-weight-semibold);
   cursor: help;
   position: relative;
   transition: all 0.2s ease;
   margin-left: 4px;
}

.tooltip:hover {
   background: rgba(74, 111, 165, 0.3);
   transform: scale(1.1);
}

.tooltip .tooltiptext {
   visibility: hidden;
   width: 220px;
   background: var(--bg-dark);
   color: var(--gray-200);
   text-align: center;
   padding: var(--space-8) var(--space-12);
   border-radius: var(--radius-md);
   position: absolute;
   z-index: 10;
   bottom: 125%;
   left: 50%;
   transform: translateX(-50%);
   opacity: 0;
   transition: opacity 0.3s, transform 0.3s;
   box-shadow: var(--shadow-large);
   font-weight: var(--font-weight-normal);
   font-size: 11px;
   line-height: 1.5;
   pointer-events: none;
   text-transform: none;
   letter-spacing: normal;
   border: 1px solid var(--gray-600);
}

.tooltip .tooltiptext::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: var(--bg-dark) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
   transform: translateX(-50%) translateY(-5px);
   pointer-events: auto;
}

/* Color Swatches */
.color-swatches {
   display: flex;
   gap: var(--space-8);
   margin-bottom: var(--space-16);
   flex-wrap: wrap;
}

.color-swatch {
   width: 36px;
   height: 36px;
   border-radius: var(--radius-sm);
   cursor: pointer;
   position: relative;
   transition: all 0.2s var(--transition-bounce);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);
   border: 2px solid transparent;
}

.color-swatch::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: calc(var(--radius-sm) - 2px);
   background: inherit;
   z-index: -1;
   transition: transform 0.2s ease;
   transform: scale(0.9);
   opacity: 0.6;
   filter: blur(8px);
}

.color-swatch:nth-child(1) {
   background: #f0f0f0;
}

.color-swatch:nth-child(2) {
   background: #94a3b8;
}

.color-swatch:nth-child(3) {
   background: #3b82f6;
}

.color-swatch:nth-child(4) {
   background: #4A6FA5;
}

.color-swatch:nth-child(5) {
   background: #0f172a;
}

.color-swatch:nth-child(6) {
   background: linear-gradient(45deg, #334E75, #4A6FA5);
}

.color-swatch:hover {
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3),
                inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.color-swatch.active {
   border-color: var(--accent-primary);
   transform: scale(1.05);
}

.color-swatch.active::after {
   content: "✓";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: rgba(255, 255, 255, 0.9);
   font-size: 16px;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Checkbox */
.checkbox-container {
   display: flex;
   align-items: center;
   margin-bottom: var(--space-12);
   cursor: pointer;
   transition: all 0.2s ease;
}

.checkbox-container:last-child {
   margin-bottom: 0;
}

.custom-checkbox {
   width: 18px;
   height: 18px;
   border-radius: var(--radius-xs);
   border: 2px solid var(--gray-500);
   background: transparent;
   margin-right: var(--space-8);
   position: relative;
   transition: all 0.2s var(--transition-bounce);
   flex-shrink: 0;
}

.checkbox-container input {
   display: none;
}

.checkbox-container input:checked + .custom-checkbox {
   background: var(--accent-primary);
   border-color: var(--accent-primary);
}

.checkbox-container input:checked + .custom-checkbox::after {
   content: "";
   position: absolute;
   top: 2px;
   left: 5px;
   width: 4px;
   height: 8px;
   border: solid white;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

.checkbox-label {
   font-size: var(--font-size-sm);
   color: var(--gray-300);
   -webkit-user-select: none;
   user-select: none;
}

.checkbox-container:hover .checkbox-label {
   color: var(--gray-100);
}

.checkbox-container:hover .custom-checkbox {
   border-color: var(--accent-primary);
   box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.15);
}

.checkbox-container input:checked:hover + .custom-checkbox {
   background: var(--accent-secondary);
   box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.3);
}

/* Camera Controls */
#camera-controls {
   position: absolute;
   left: var(--space-16);
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   z-index: 100;
   animation: fadeIn 0.8s ease 0.3s backwards;
}

.control-button {
   width: 44px;
   height: 44px;
   background: rgba(18, 18, 24, 0.8);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-radius: var(--radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(74, 111, 165, 0.2);
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   border: 1px solid rgba(74, 111, 165, 0.2);
   overflow: hidden;
}

.control-button:hover {
   transform: scale(1.1);
   background: rgba(26, 26, 36, 0.8);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 
              0 0 15px rgba(74, 111, 165, 0.3);
   border-color: rgba(74, 111, 165, 0.3);
}

.control-button:active {
   transform: scale(0.95);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.control-icon {
   font-size: 24px;
   color: var(--gray-200);
   transition: all 0.2s ease;
}

.control-button:hover .control-icon {
   color: var(--gray-100);
   transform: scale(1.1);
}

/* Stats Display */
#stats {
   position: absolute;
   bottom: var(--space-16);
   right: var(--space-16);
   background: rgba(10, 10, 16, 0.75);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-radius: var(--radius-sm);
   padding: var(--space-8) var(--space-12);
   font-family: var(--font-family-mono);
   font-size: var(--font-size-xs);
   color: var(--gray-300);
   display: flex;
   align-items: center;
   z-index: 100;
   border: 1px solid rgba(99, 101, 122, 0.1);
   box-shadow: var(--shadow-subtle);
   transition: opacity 0.3s ease;
}

/* Status Bar */
#status-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 32px;
   background: rgba(10, 10, 16, 0.85);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   display: flex;
   align-items: center;
   padding: 0 var(--space-16);
   z-index: 90;
   font-size: var(--font-size-xs);
   color: var(--gray-300);
   border-top: 1px solid rgba(74, 111, 165, 0.1);
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.status-item {
   display: flex;
   align-items: center;
   margin-right: var(--space-20);
   opacity: 0.8;
   transition: opacity 0.2s ease;
}

.status-item:hover {
   opacity: 1;
}

.status-item-icon {
   font-size: 16px;
   margin-right: var(--space-4);
   color: var(--accent-primary);
   animation: pulse 2s infinite;
}

/* Loading Overlay */
#loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(10, 10, 18, 0.98), rgba(6, 6, 12, 0.98));
   z-index: 9999;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: opacity 0.6s ease-out;
}

.loader {
   width: 48px;
   height: 48px;
   border: 3px solid rgba(74, 111, 165, 0.3);
   border-radius: 50%;
   border-top-color: var(--accent-primary);
   animation: rotation 1.5s infinite cubic-bezier(0.65, 0, 0.35, 1);
   margin-bottom: var(--space-24);
   box-shadow: 0 0 20px rgba(74, 111, 165, 0.2);
}

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

.loading-text {
   font-size: var(--font-size-lg);
   color: var(--gray-200);
   margin-bottom: var(--space-24);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--letter-spacing-wide);
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-container {
   width: 300px;
   height: 6px;
   background: rgba(126, 131, 253, 0.1);
   border-radius: var(--radius-full);
   overflow: hidden;
   position: relative;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
   border-radius: var(--radius-full);
   transition: width 0.3s ease-out;
}

.progress-bar::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
   );
   animation: progress-shine 1.5s infinite;
}

@keyframes progress-shine {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
}

/* Render progress styling */
#render-progress {
   position: fixed;
   bottom: 40px;
   left: 50%;
   transform: translateX(-50%);
   width: 200px;
   height: 4px;
   background: rgba(10, 10, 18, 0.5);
   border-radius: var(--radius-full);
   z-index: 100;
   overflow: hidden;
   opacity: 0;
   transition: opacity 0.3s ease;
}

#render-progress.active {
   opacity: 1;
}

.render-progress-inner {
   height: 100%;
   width: 0;
   background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
   border-radius: var(--radius-full);
   transition: width 0.3s ease-out;
}

/* Help Panel */
#help-panel {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.95);
   width: 80%;
   max-width: 600px;
   background: var(--gradient-panel);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-xl), 0 0 0 1px rgba(126, 131, 253, 0.15);
   z-index: 1000;
   opacity: 0;
   pointer-events: none;
   transition: all 0.3s cubic-bezier(0.21, 1.02, 0.73, 1);
   overflow: hidden;
   border: 1px solid rgba(99, 101, 122, 0.2);
   max-height: 85vh;
   display: flex;
   flex-direction: column;
}

#help-panel.visible {
   opacity: 1;
   pointer-events: auto;
   transform: translate(-50%, -50%) scale(1);
}

.help-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-16) var(--space-20);
   border-bottom: 1px solid rgba(99, 101, 122, 0.15);
   background: rgba(18, 18, 24, 0.6);
}

.help-title {
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-semibold);
   color: var(--gray-100);
   letter-spacing: var(--letter-spacing-tight);
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.help-content {
   padding: var(--space-20);
   overflow-y: auto;
   flex: 1;
}

.help-content::-webkit-scrollbar {
   width: 8px;
}

.help-content::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.1);
   border-radius: var(--radius-full);
}

.help-content::-webkit-scrollbar-thumb {
   background: rgba(126, 131, 253, 0.3);
   border-radius: var(--radius-full);
}

.help-content::-webkit-scrollbar-thumb:hover {
   background: rgba(126, 131, 253, 0.5);
}

.help-section {
   margin-bottom: var(--space-24);
}

.help-section:last-child {
   margin-bottom: 0;
}

.help-section-title {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--gray-100);
   margin-bottom: var(--space-12);
   position: relative;
   padding-bottom: var(--space-8);
   letter-spacing: var(--letter-spacing-tight);
   display: flex;
   align-items: center;
}

.help-section-title::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 40px;
   height: 2px;
   background: var(--gradient-accent);
   border-radius: var(--radius-full);
}

.help-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: var(--space-12);
}

.help-item:last-child {
   margin-bottom: 0;
}

.help-key {
   padding: var(--space-4) var(--space-8);
   background: rgba(126, 131, 253, 0.1);
   border: 1px solid rgba(126, 131, 253, 0.2);
   border-radius: var(--radius-sm);
   color: var(--gray-200);
   font-family: var(--font-family-mono);
   font-size: var(--font-size-xs);
   margin-right: var(--space-12);
   min-width: 60px;
   text-align: center;
   font-weight: var(--font-weight-medium);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   -webkit-user-select: none;
   user-select: none;
}

.help-description {
   color: var(--gray-300);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-relaxed);
   padding-top: var(--space-2);
   flex: 1;
}

.help-tips,
.help-text {
   margin-bottom: var(--space-16);
   color: var(--gray-300);
}

.help-tips {
   padding-left: var(--space-16);
}

.help-text {
   line-height: var(--line-height-relaxed);
}

.help-tips li {
   margin-bottom: var(--space-8);
   position: relative;
}

.help-tips li::before {
   content: "•";
   color: var(--accent-primary);
   position: absolute;
   left: -16px;
   font-weight: var(--font-weight-bold);
}

.close-button {
   width: 32px;
   height: 32px;
   border-radius: var(--radius-full);
   background: rgba(126, 131, 253, 0.1);
   color: var(--gray-300);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 20px;
   transition: all 0.2s ease;
   border: 1px solid transparent;
}

.close-button:hover {
   background: rgba(126, 131, 253, 0.2);
   color: var(--gray-100);
   transform: rotate(90deg);
   border-color: rgba(126, 131, 253, 0.3);
}

/* Welcome Modal */
#welcome-modal {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(10, 10, 18, 0.85);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   z-index: 1000;
   display: none;
   align-items: center;
   justify-content: center;
   padding: var(--space-16);
}

.modal-content {
   background: linear-gradient(135deg, rgba(26, 26, 34, 0.95), rgba(18, 18, 26, 0.95));
   border-radius: var(--radius-lg);
   width: 100%;
   max-width: 700px;
   max-height: 85vh;
   overflow-y: auto;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(74, 111, 165, 0.2);
   display: flex;
   flex-direction: column;
   border: 1px solid rgba(74, 111, 165, 0.15);
   animation: modalFadeIn 0.5s cubic-bezier(0.21, 1.02, 0.73, 1);
}

@keyframes modalFadeIn {
   from {
      opacity: 0;
      transform: scale(0.95);
   }
   to {
      opacity: 1;
      transform: scale(1);
   }
}

.modal-header {
   padding: var(--space-20);
   border-bottom: 1px solid rgba(99, 101, 122, 0.15);
   background: rgba(18, 18, 24, 0.6);
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.modal-title {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-semibold);
   color: var(--gray-100);
   letter-spacing: var(--letter-spacing-tight);
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.modal-body {
   padding: var(--space-20);
   overflow-y: auto;
   flex: 1;
}

.modal-body p {
   color: var(--gray-300);
   font-size: var(--font-size-base);
   line-height: var(--line-height-relaxed);
   margin-bottom: var(--space-16);
}

.modal-footer {
   padding: var(--space-16) var(--space-20);
   display: flex;
   justify-content: flex-end;
   gap: var(--space-12);
   border-top: 1px solid rgba(99, 101, 122, 0.15);
}

.feature-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--space-16);
   margin: var(--space-24) 0;
}

.feature-item {
   background: rgba(18, 18, 26, 0.6);
   border-radius: var(--radius-md);
   padding: var(--space-16);
   border: 1px solid rgba(74, 111, 165, 0.15);
   transition: all 0.3s cubic-bezier(0.21, 1.02, 0.73, 1);
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   box-shadow: var(--shadow-subtle);
}

.feature-item:hover {
   transform: translateY(-5px);
   background: rgba(26, 26, 36, 0.5);
   box-shadow: var(--shadow-medium), 0 0 15px rgba(126, 131, 253, 0.2);
   border-color: rgba(126, 131, 253, 0.2);
}

.feature-icon {
   font-size: 32px;
   width: 64px;
   height: 64px;
   background: rgba(74, 111, 165, 0.1);
   border-radius: var(--radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: var(--space-12);
   color: var(--accent-primary);
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   box-shadow: 0 0 0 1px rgba(74, 111, 165, 0.2);
}

.feature-item:hover .feature-icon {
   background: rgba(74, 111, 165, 0.15);
   transform: scale(1.1);
   box-shadow: 0 0 20px rgba(74, 111, 165, 0.3);
}

.feature-title {
   font-weight: var(--font-weight-semibold);
   color: var(--gray-100);
   margin-bottom: var(--space-8);
   font-size: var(--font-size-base);
}

.feature-description {
   color: var(--gray-400);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-relaxed);
}

/* Notification */
.notification {
   position: fixed;
   top: var(--space-20);
   right: var(--space-20);
   background: rgba(26, 26, 34, 0.9);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   padding: var(--space-12) var(--space-16);
   border-radius: var(--radius-md);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
   border-left: 3px solid var(--accent-primary);
   z-index: 9999;
   min-width: 260px;
   max-width: 320px;
   opacity: 0;
   transform: translateX(30px);
   transition: all 0.3s ease;
   pointer-events: none;
}

.notification.show {
   opacity: 1;
   transform: translateX(0);
   pointer-events: auto;
}

.notification-title {
   font-weight: var(--font-weight-semibold);
   color: var(--gray-100);
   margin-bottom: var(--space-4);
   font-size: var(--font-size-sm);
   display: flex;
   align-items: center;
   gap: var(--space-8);
}

.notification-message {
   color: var(--gray-300);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-relaxed);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
   #ui-container {
      top: auto;
      bottom: 0;
      right: 0;
      left: 0;
      width: 100%;
      height: 300px;
      max-height: 50vh;
      padding: var(--space-16);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      background: rgba(10, 10, 16, 0.7);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.2);
   }

   #help-panel {
      width: 90%;
   }

   .panel {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
   }

   .feature-grid {
      grid-template-columns: 1fr;
   }

   #camera-controls {
      left: auto;
      right: var(--space-16);
      top: var(--space-16);
      transform: none;
      flex-direction: row;
   }

   #stats {
      right: auto;
      left: var(--space-16);
      font-size: 10px;
   }
}

/* Animations */
@keyframes pulse-glow {
   0% {
      box-shadow: 0 0 5px rgba(74, 111, 165, 0.3),
                  0 0 10px rgba(74, 111, 165, 0.2);
   }
   50% {
      box-shadow: 0 0 10px rgba(74, 111, 165, 0.5),
                  0 0 20px rgba(74, 111, 165, 0.3);
   }
   100% {
      box-shadow: 0 0 5px rgba(74, 111, 165, 0.3),
                  0 0 10px rgba(74, 111, 165, 0.2);
   }
}

.pulse {
   animation: pulse-glow 2s infinite;
}

@keyframes float {
   0% {
      transform: translateY(0px);
   }
   50% {
      transform: translateY(-5px);
   }
   100% {
      transform: translateY(0px);
   }
}

.float {
   animation: float 3s ease-in-out infinite;
}

@keyframes ripple {
   0% {
      transform: scale(0);
      opacity: 0.6;
   }
   100% {
      transform: scale(2);
      opacity: 0;
   }
}

.ripple-effect {
   position: absolute;
   border-radius: 50%;
   background: rgba(74, 111, 165, 0.3);
   transform: scale(0);
   pointer-events: none;
   animation: ripple 0.6s linear;
   z-index: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}

::-webkit-scrollbar-track {
   background: rgba(10, 10, 16, 0.1);
   border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
   background: rgba(74, 111, 165, 0.2);
   border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
   background: rgba(74, 111, 165, 0.4);
}

:focus {
   outline: none;
}

button:focus,
input:focus,
select:focus {
   box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.3);
}

/* Shimmer Effect */
.shimmer {
   position: relative;
   overflow: hidden;
}

.shimmer::after {
   content: none;
   display: none;
}

@keyframes shimmer {
   100% {
      transform: translateX(100%);
   }
}

.value-updated {
   animation: valueChange 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes valueChange {
   0% { transform: scale(1); }
   50% { transform: scale(1.2); }
   100% { transform: scale(1); }
}

/* Interaction Feedback */
.interaction-feedback {
   position: absolute;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: rgba(74, 111, 165, 0.2);
   transform: translate(-50%, -50%) scale(0);
   pointer-events: none;
   z-index: 9999;
   animation: ripple-out 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ripple-out {
   0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0.5;
   }
   100% {
      transform: translate(-50%, -50%) scale(1.5);
      opacity: 0;
   }
}

/* Background Grain Texture */
body::before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
   pointer-events: none;
   opacity: 0.06;
   z-index: 0;
}

/* Marketing Enhancement - Add version tag for professional touch */
#version-tag {
   position: absolute;
   bottom: 36px;
   right: 16px;
   font-size: 10px;
   color: var(--gray-500);
   font-family: var(--font-family-mono);
   letter-spacing: 0.05em;
}

/* Marketing Enhancement - "Made with" badge */
#made-with-badge {
   position: absolute;
   bottom: 10px;
   left: 16px;
   font-size: 11px;
   color: var(--gray-400);
   display: flex;
   align-items: center;
   gap: 6px;
}

#made-with-badge .heart {
   color: #ef4444;
   font-size: 14px;
   animation: beat 1.5s infinite alternate;
   display: inline-block;
}

@keyframes beat {
   to { transform: scale(1.3); }
}

/* Marketing Enhancement - Add website performance tag */
#performance-tag {
   position: absolute;
   top: 80px;
   left: 16px;
   font-size: 12px;
   background: rgba(18, 18, 26, 0.7);
   color: var(--gray-200);
   padding: 5px 10px;
   border-radius: 6px;
   opacity: 0.8;
   transition: opacity 0.3s;
   z-index: 100;
}

#performance-tag:hover {
   opacity: 1;
}

/* Marketing Enhancement - Improve focus states for accessibility */
:focus-visible {
   outline: 2px solid var(--accent-primary);
   outline-offset: 2px;
}

.header-actions {
   display: flex;
   gap: var(--space-8);
}

.panel::before {
   content: none;
   display: none;
}

.button::after {
   content: none;
   display: none;
}

.slider-value.updated {
   transform: scale(1.1);
   background: rgba(74, 111, 165, 0.3);
}

.control-button::before {
   content: none;
   display: none;
}

/* Add subtle gradient to logo */
.logo svg path {
   filter: none;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

.header-actions .button {
   background: rgba(35, 35, 50, 0.4);
   border: 1px solid rgba(74, 111, 165, 0.2);
   color: var(--gray-200);
   padding: 6px 14px;
   border-radius: 8px;
   font-size: 13px;
   box-shadow: none;
}

.header-actions .button:hover {
   background: rgba(35, 35, 50, 0.6);
   border-color: rgba(74, 111, 165, 0.4);
   color: var(--gray-100);
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.header-actions .button .icon {
   font-size: 16px;
}