@layer base {
  /* Default fallbacks if JS hasn't loaded tokens - matches GDDC design system */
  :root {
    /* Core palette tokens */
    --color-white: #FFFFFF;
    --color-carbon: #121212;
    --color-graphite: #1a1a1a;
    --color-slate: #3a3a3a;

    /* Theme colors */
    --color-bg: #e6e6e6;
    --color-surface: #FFFFFF;
    --color-surface-sec: #FFFFFF;
    --color-primary: #1F4FBF;
    --color-primary-hover: #63C8FF;
    --color-accent: #FFC400;
    --color-accent-soft: #FFE066;
    --color-text: #08162b;
    --color-text-sec: #64748b;
    --color-text-muted: #64748b;
    --color-border: #D5DCE5;
    --color-focus: #1F4FBF;
    --color-success: #22c55e;
    --color-warning: #FFC400;
    --color-error: #e54d2e;
    --font-main: 'ABC Schengen Variable', 'Aeonik', 'Inter', sans-serif;
    --font-mono: 'ABC Schengen Mono Variable', 'Fira Code', monospace;
    --font-width: 100;  /* Variable font width axis (wdth) 50-200, only ABC Schengen supports this */

    /* RGB values for rgba() usage - complete set */
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;
    --color-carbon-rgb: 18, 18, 18;
    --color-graphite-rgb: 26, 26, 26;
    --color-bg-rgb: 230, 230, 230;
    --color-surface-rgb: 255, 255, 255;
    --color-primary-rgb: 31, 79, 191;
    --color-primary-hover-rgb: 99, 200, 255;
    --color-accent-rgb: 255, 196, 0;
    --color-accent-soft-rgb: 255, 224, 102;
    --color-text-rgb: 8, 22, 43;
    --color-success-rgb: 34, 197, 94;
    --color-error-rgb: 229, 77, 46;

    /* Sizing & Spacing Tokens */
    --font-xs: 0.625rem;
    --font-sm: 0.75rem;
    --font-base: 0.875rem;
    --font-lg: 1rem;
    --font-xl: 1.125rem;
    --font-2xl: 1.5rem;
    --font-3xl: 2rem;
    --font-4xl: 2.5rem;
    --font-5xl: 3rem;
    --sidebar-width: 80px;
    --section-gap: 160px;
    --card-padding: 64px;
    --card-radius: 0px;
    --card-gap: 52px;
    --btn-size: 48px;
    --btn-xl: 80px;
    /* Button System Tokens */
    --btn-height-sm: 32px;
    --btn-height-md: 48px;
    --btn-height-lg: 64px;
    --btn-height-xl: 80px;
    --btn-font-sm: 0.75rem;
    --btn-font-md: 0.875rem;
    --btn-font-lg: 1rem;
    --btn-font-weight: 600;
    --btn-radius: 6px;
    --btn-neon-glow: 10px;
    --icon-size: 24px;
    --icon-stroke: 2;
    --drone-duration: 500ms;
    --drone-launch-dist: 200px;
    --drone-hover-float: 8px;
    --drone-shadow-intensity: 0.3;
    --glass-blur: 16px;
    --glass-opacity: 0.7;
    --logo-stroke-width: 25px;
    --scrollbar-width: 8px;
    --tooltip-padding: 4px;
    --tooltip-radius: 6px;
  }
  .dark {
    --color-bg-rgb: 18, 18, 18;
    --color-surface-rgb: 26, 26, 26;
    --color-primary-rgb: 99, 200, 255;
    --color-primary-hover-rgb: 255, 255, 255;
    --color-text-rgb: 255, 255, 255;
  }
  .mono {
    --color-bg-rgb: 255, 255, 255;
    --color-surface-rgb: 255, 255, 255;
    --color-primary-rgb: 0, 0, 0;
    --color-primary-hover-rgb: 0, 0, 0;
    --color-text-rgb: 0, 0, 0;
  }
}

/* ABC Schengen Variable Font - Primary Default */
/* Note: Width axis (wdth) only works if font file contains it */
@font-face {
  font-family: 'ABC Schengen Variable';
  src: url('fonts/ABCSchengenVariable-Trial.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-style: normal;
  font-display: swap;
}

/* ABC Schengen Mono Variable Font - Default Mono */
@font-face {
  font-family: 'ABC Schengen Mono Variable';
  src: url('fonts/ABCSchengenMonoVariable-Trial.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-style: normal;
  font-display: swap;
}

/* Aeonik Bold Font - Fallback */
@font-face {
  font-family: 'Aeonik';
  src: local('Aeonik Bold'), local('Aeonik-Bold');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Sidebar nav icon states */
.nav-item i {
  color: rgba(var(--color-text-rgb), 0.28);
  transition: color 0.2s;
}
.nav-item:hover i {
  color: var(--color-primary);
}
.nav-item.nav-active i {
  color: rgba(var(--color-text-rgb), 0.65);
}

/* Base Body Styles */
body {
  font-family: var(--font-main);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--font-width);
  --glass-opacity: 0.7;
}

.font-mono {
  font-family: var(--font-mono);
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(var(--color-surface-rgb, 255, 255, 255), var(--glass-opacity));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--card-radius, 8px);
}

.dark .glass-panel {
  background: rgba(var(--color-surface-rgb, 15, 23, 42), var(--glass-opacity));
}

.glass-card {
  background: linear-gradient(135deg, rgba(var(--color-surface-rgb, 255, 255, 255), 0.8) 0%, rgba(var(--color-surface-rgb, 255, 255, 255), 0.4) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--card-radius, 8px);
}

.dark .glass-card {
  background: linear-gradient(135deg, rgba(var(--color-surface-rgb, 15, 23, 42), 0.8) 0%, rgba(var(--color-surface-rgb, 15, 23, 42), 0.4) 100%);
}



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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Utility Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.active-nav-item {
  background-color: var(--color-surface);
  border-right: 3px solid var(--color-primary);
}

/* Circular nav item active state */
.nav-item.active {
  background-color: rgba(var(--color-primary-rgb), 0.15) !important;
}
.nav-item.active i {
  color: var(--color-primary) !important;
}

/* ===========================
   DRONE BUTTON SYSTEM
   =========================== */

:root {
  --drone-duration: 500ms;
  --drone-launch-dist: 200px;
  --drone-hover-float: 8px;
  --drone-shadow-intensity: 0.3;
  --drone-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Base Drone Button */
.drone-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--btn-radius);
  color: var(--color-text);
  font-size: var(--btn-font-md);
  font-weight: var(--btn-font-weight);
  cursor: pointer;
  transition:
    transform var(--drone-duration) var(--drone-easing),
    box-shadow var(--drone-duration) var(--drone-easing),
    opacity var(--drone-duration) var(--drone-easing);
  box-shadow: 0 2px 8px rgba(var(--color-black-rgb), calc(var(--drone-shadow-intensity) * 0.5));
  z-index: 1;
}

/* Circle Button */
.drone-btn-circle {
  width: var(--btn-height-md);
  height: var(--btn-height-md);
  border-radius: 50%;
  padding: 0;
}

.drone-btn-circle.drone-btn-xl {
  width: var(--btn-height-xl);
  height: var(--btn-height-xl);
}

/* Size Variants - Small */
.drone-btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--btn-font-sm);
  min-height: var(--btn-height-sm);
  gap: 0.375rem;
}

.drone-btn-circle.drone-btn-sm {
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
}

/* Size Variants - Large */
.drone-btn-lg {
  padding: 1rem 2rem;
  font-size: var(--btn-font-lg);
  min-height: var(--btn-height-lg);
  gap: 0.625rem;
}

.drone-btn-circle.drone-btn-lg {
  width: var(--btn-height-lg);
  height: var(--btn-height-lg);
}

/* Pill Button */
.drone-btn-pill {
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: var(--btn-font-md);
  font-weight: var(--btn-font-weight);
}

/* Primary Variant */
.drone-btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
  box-shadow:
    0 2px 8px rgba(var(--color-primary-rgb), calc(var(--drone-shadow-intensity) * 0.8)),
    0 0 0 0 rgba(var(--color-primary-rgb), 0);
}

/* Outline Variant */
.drone-btn-outline {
  background: transparent;
  border: 2px solid var(--color-border);
  color: var(--color-text-sec);
}

.drone-btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Hover State - Float Effect */
.drone-btn:hover {
  transform: translateY(calc(var(--drone-hover-float) * -1));
  box-shadow:
    0 calc(8px + var(--drone-hover-float)) calc(24px + var(--drone-hover-float)) rgba(var(--color-black-rgb), var(--drone-shadow-intensity)),
    0 calc(4px + var(--drone-hover-float) / 2) calc(12px + var(--drone-hover-float) / 2) rgba(var(--color-black-rgb), calc(var(--drone-shadow-intensity) * 0.5));
}

.drone-btn-primary:hover {
  box-shadow:
    0 calc(8px + var(--drone-hover-float)) calc(24px + var(--drone-hover-float)) rgba(var(--color-primary-rgb), var(--drone-shadow-intensity)),
    0 calc(4px + var(--drone-hover-float) / 2) calc(12px + var(--drone-hover-float) / 2) rgba(var(--color-primary-rgb), calc(var(--drone-shadow-intensity) * 0.5)),
    0 0 20px rgba(var(--color-primary-rgb), 0.2);
}

/* Launch Animation - Ghost Effect
   ================================
   Die Animation verbindet Dynamik mit Sicherheit:
   1. Beim Klick kehrt der Button zur Ausgangsposition zurueck
   2. Ein transparenter "Geist" steigt gleichzeitig auf
   3. Der Button landet sanft und langsam von unten zurueck
*/

.drone-btn {
  --ghost-duration: 600ms;
  --landing-duration: 1400ms;
  --landing-delay: 200ms;
  --landing-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

.drone-btn.launching {
  pointer-events: none;
  animation: droneSettle 800ms var(--landing-easing) both;
}

@keyframes droneSettle {
  /* Phase 1: Return from hover position */
  0% {
    transform: translateY(calc(var(--drone-hover-float, 8px) * -1));
  }
  /* Phase 2: Slight overshoot down */
  40% {
    transform: translateY(4px);
  }
  /* Phase 3: Settle back to rest */
  70% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Ghost Element - the transparent spirit that rises */
.drone-btn-ghost {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  animation: ghostRise var(--ghost-duration, 600ms) var(--drone-easing) forwards !important;
}

@keyframes ghostRise {
  0% {
    transform: translateY(0);
    opacity: 0.5;
    filter: blur(0px);
  }
  40% {
    opacity: 0.35;
    filter: blur(1px);
  }
  100% {
    transform: translateY(calc(var(--drone-launch-dist, 200px) * -1));
    opacity: 0;
    filter: blur(3px);
  }
}

/* Signal/Warning Variant */
.drone-btn-signal {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-graphite);
  box-shadow:
    0 2px 8px rgba(var(--color-accent-rgb), calc(var(--drone-shadow-intensity) * 0.8)),
    0 0 0 0 rgba(var(--color-accent-rgb), 0);
}

.drone-btn-signal:hover {
  box-shadow:
    0 calc(8px + var(--drone-hover-float)) calc(24px + var(--drone-hover-float)) rgba(var(--color-accent-rgb), var(--drone-shadow-intensity)),
    0 calc(4px + var(--drone-hover-float) / 2) calc(12px + var(--drone-hover-float) / 2) rgba(var(--color-accent-rgb), calc(var(--drone-shadow-intensity) * 0.5)),
    0 0 20px rgba(var(--color-accent-rgb), 0.3);
}

/* Offshore Wind Backdrop */
.launch-zone-backdrop {
  position: absolute;
  inset: 0;
  background-image: url('./68225c820282f6eea09daca2_6267c743dc146d0279ed639b_FZK_5131-Bearbeitet.webp');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease, filter 0.5s ease;
  pointer-events: none;
  border-radius: inherit;
}

.dark .launch-zone-backdrop {
  background-image: url('./istockphoto-1172807596-2048x2048.jpg');
}

.launch-zone-backdrop.active {
  opacity: 1;
}

.launch-zone-backdrop.desaturated {
  filter: grayscale(100%) contrast(0.9);
}

/* ===========================
   APPLE DOCK EFFECT
   =========================== */

.dock-container {
  perspective: 1000px;
}

.dock-item {
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease;
}

/* Dock magnification effect handled via JS for smooth neighbor scaling */
.dock-item.dock-hovered {
  transform: scale(1.3) translateY(-8px);
  z-index: 10;
}

.dock-item.dock-neighbor-1 {
  transform: scale(1.15) translateY(-4px);
  z-index: 5;
}

.dock-item.dock-neighbor-2 {
  transform: scale(1.05) translateY(-2px);
  z-index: 2;
}

/* Tooltip for dock items */
.dock-item[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 4px 12px rgba(var(--color-black-rgb), 0.15);
}

.dock-item:hover[data-tooltip]::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ===========================
   STYLE VARIANTS
   =========================== */

/* Glass Style - tinted with primary color */
.drone-btn-style-glass {
  background: rgba(var(--color-primary-rgb), 0.08);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
  color: var(--color-primary);
  box-shadow:
    0 4px 16px rgba(var(--color-primary-rgb), 0.1),
    inset 0 1px 0 rgba(var(--color-white-rgb), 0.15);
}

.drone-btn-style-glass:hover {
  background: rgba(var(--color-primary-rgb), 0.15);
  border-color: rgba(var(--color-primary-rgb), 0.35);
  box-shadow:
    0 8px 32px rgba(var(--color-primary-rgb), 0.15),
    inset 0 1px 0 rgba(var(--color-white-rgb), 0.2);
}

.dark .drone-btn-style-glass {
  background: rgba(var(--color-primary-rgb), 0.1);
  border: 1px solid rgba(var(--color-primary-rgb), 0.25);
  color: var(--color-primary);
  box-shadow:
    0 4px 16px rgba(var(--color-black-rgb), 0.3),
    inset 0 1px 0 rgba(var(--color-primary-rgb), 0.1);
}

.dark .drone-btn-style-glass:hover {
  background: rgba(var(--color-primary-rgb), 0.18);
  border-color: rgba(var(--color-primary-rgb), 0.4);
  box-shadow:
    0 8px 32px rgba(var(--color-black-rgb), 0.4),
    inset 0 1px 0 rgba(var(--color-primary-rgb), 0.15);
}

.drone-btn-style-glass.drone-btn-primary {
  background: rgba(var(--color-primary-rgb), 0.25);
  border-color: rgba(var(--color-primary-rgb), 0.5);
  color: var(--color-primary);
  box-shadow:
    0 4px 20px rgba(var(--color-primary-rgb), 0.2),
    inset 0 1px 0 rgba(var(--color-white-rgb), 0.2);
}

.drone-btn-style-glass.drone-btn-primary:hover {
  background: rgba(var(--color-primary-rgb), 0.35);
  border-color: rgba(var(--color-primary-rgb), 0.7);
  box-shadow:
    0 8px 32px rgba(var(--color-primary-rgb), 0.3),
    0 0 20px rgba(var(--color-primary-rgb), 0.2),
    inset 0 1px 0 rgba(var(--color-white-rgb), 0.3);
}

.drone-btn-style-glass.drone-btn-signal {
  background: rgba(var(--color-accent-rgb), 0.25);
  border-color: rgba(var(--color-accent-rgb), 0.6);
  color: var(--color-graphite);
  box-shadow:
    0 4px 20px rgba(var(--color-accent-rgb), 0.2),
    inset 0 1px 0 rgba(var(--color-white-rgb), 0.3);
}

.drone-btn-style-glass.drone-btn-signal:hover {
  background: rgba(var(--color-accent-rgb), 0.4);
  border-color: rgba(var(--color-accent-rgb), 0.8);
  box-shadow:
    0 8px 32px rgba(var(--color-accent-rgb), 0.3),
    0 0 20px rgba(var(--color-accent-rgb), 0.2),
    inset 0 1px 0 rgba(var(--color-white-rgb), 0.4);
}

.dark .drone-btn-style-glass.drone-btn-signal {
  color: var(--color-accent);
  text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.6);
}

.dark .drone-btn-style-glass.drone-btn-signal:hover {
  text-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.8);
}

/* Glass Highlighted - Extra prominent version, tinted with primary */
.drone-btn-style-glass-highlight {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.12) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 2px solid rgba(var(--color-primary-rgb), 0.25);
  color: var(--color-primary);
  box-shadow:
    0 8px 32px rgba(var(--color-primary-rgb), 0.1),
    0 0 0 1px rgba(var(--color-white-rgb), 0.1) inset,
    inset 0 2px 0 rgba(var(--color-white-rgb), 0.2);
}

.drone-btn-style-glass-highlight:hover {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.2) 0%, rgba(var(--color-primary-rgb), 0.1) 100%);
  border-color: rgba(var(--color-primary-rgb), 0.45);
  box-shadow:
    0 12px 48px rgba(var(--color-primary-rgb), 0.15),
    0 0 0 1px rgba(var(--color-white-rgb), 0.15) inset,
    inset 0 2px 0 rgba(var(--color-white-rgb), 0.25);
}

.dark .drone-btn-style-glass-highlight {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.15) 0%, rgba(var(--color-primary-rgb), 0.06) 100%);
  border: 2px solid rgba(var(--color-primary-rgb), 0.3);
  box-shadow:
    0 8px 32px rgba(var(--color-black-rgb), 0.4),
    0 0 0 1px rgba(var(--color-primary-rgb), 0.1) inset,
    inset 0 2px 0 rgba(var(--color-white-rgb), 0.15);
}

.dark .drone-btn-style-glass-highlight:hover {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.25) 0%, rgba(var(--color-primary-rgb), 0.1) 100%);
  border-color: rgba(var(--color-primary-rgb), 0.5);
  box-shadow:
    0 12px 48px rgba(var(--color-black-rgb), 0.5),
    0 0 0 1px rgba(var(--color-primary-rgb), 0.15) inset,
    inset 0 2px 0 rgba(var(--color-white-rgb), 0.15);
}

.drone-btn-style-glass-highlight.drone-btn-primary {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.35) 0%, rgba(var(--color-primary-rgb), 0.15) 100%);
  border-color: rgba(var(--color-primary-rgb), 0.6);
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(var(--color-black-rgb), 0.2);
  box-shadow:
    0 8px 32px rgba(var(--color-primary-rgb), 0.25),
    0 0 20px rgba(var(--color-primary-rgb), 0.15),
    inset 0 2px 0 rgba(var(--color-white-rgb), 0.3);
}

.drone-btn-style-glass-highlight.drone-btn-primary:hover {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.5) 0%, rgba(var(--color-primary-rgb), 0.25) 100%);
  border-color: rgba(var(--color-primary-rgb), 0.8);
  box-shadow:
    0 12px 48px rgba(var(--color-primary-rgb), 0.35),
    0 0 30px rgba(var(--color-primary-rgb), 0.25),
    inset 0 2px 0 rgba(var(--color-white-rgb), 0.4);
}

.drone-btn-style-glass-highlight.drone-btn-signal {
  background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.4) 0%, rgba(var(--color-accent-rgb), 0.2) 100%);
  border-color: rgba(var(--color-accent-rgb), 0.7);
  color: var(--color-graphite);
  text-shadow: none;
  box-shadow:
    0 8px 32px rgba(var(--color-accent-rgb), 0.25),
    0 0 20px rgba(var(--color-accent-rgb), 0.15),
    inset 0 2px 0 rgba(var(--color-white-rgb), 0.4);
}

.drone-btn-style-glass-highlight.drone-btn-signal:hover {
  background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.55) 0%, rgba(var(--color-accent-rgb), 0.3) 100%);
  border-color: rgba(var(--color-accent-rgb), 0.9);
  box-shadow:
    0 12px 48px rgba(var(--color-accent-rgb), 0.35),
    0 0 30px rgba(var(--color-accent-rgb), 0.25),
    inset 0 2px 0 rgba(var(--color-white-rgb), 0.5);
}

.dark .drone-btn-style-glass-highlight.drone-btn-signal {
  color: var(--color-accent);
  text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.6);
}

.dark .drone-btn-style-glass-highlight.drone-btn-signal:hover {
  text-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.8);
}

/* Neon Style */
.drone-btn-style-neon {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow:
    0 0 var(--btn-neon-glow) rgba(var(--color-primary-rgb), 0.3),
    inset 0 0 var(--btn-neon-glow) rgba(var(--color-primary-rgb), 0.1);
}

.drone-btn-style-neon:hover {
  box-shadow:
    0 0 calc(var(--btn-neon-glow) * 2) rgba(var(--color-primary-rgb), 0.5),
    0 0 calc(var(--btn-neon-glow) * 4) rgba(var(--color-primary-rgb), 0.3),
    inset 0 0 calc(var(--btn-neon-glow) * 2) rgba(var(--color-primary-rgb), 0.2);
  text-shadow: 0 0 var(--btn-neon-glow) rgba(var(--color-primary-rgb), 0.8);
}

.drone-btn-style-neon.drone-btn-primary {
  background: var(--color-primary);
  color: var(--color-bg);
  box-shadow:
    0 0 calc(var(--btn-neon-glow) * 1.5) rgba(var(--color-primary-rgb), 0.6),
    0 0 calc(var(--btn-neon-glow) * 3) rgba(var(--color-primary-rgb), 0.4),
    inset 0 0 calc(var(--btn-neon-glow) * 1.5) rgba(var(--color-white-rgb), 0.1);
}

.drone-btn-style-neon.drone-btn-primary:hover {
  box-shadow:
    0 0 calc(var(--btn-neon-glow) * 2.5) rgba(var(--color-primary-rgb), 0.8),
    0 0 calc(var(--btn-neon-glow) * 5) rgba(var(--color-primary-rgb), 0.5),
    0 0 calc(var(--btn-neon-glow) * 8) rgba(var(--color-primary-rgb), 0.3),
    inset 0 0 calc(var(--btn-neon-glow) * 2.5) rgba(var(--color-white-rgb), 0.15);
}

.drone-btn-style-neon.drone-btn-signal {
  background: rgba(var(--color-accent-rgb), 0.15);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  box-shadow:
    0 0 calc(var(--btn-neon-glow) * 1.5) rgba(var(--color-accent-rgb), 0.5),
    0 0 calc(var(--btn-neon-glow) * 3) rgba(var(--color-accent-rgb), 0.25),
    inset 0 0 calc(var(--btn-neon-glow) * 1.5) rgba(var(--color-accent-rgb), 0.15);
}

.drone-btn-style-neon.drone-btn-signal:hover {
  background: rgba(var(--color-accent-rgb), 0.25);
  box-shadow:
    0 0 calc(var(--btn-neon-glow) * 2.5) rgba(var(--color-accent-rgb), 0.8),
    0 0 calc(var(--btn-neon-glow) * 5) rgba(var(--color-accent-rgb), 0.5),
    0 0 calc(var(--btn-neon-glow) * 8) rgba(var(--color-accent-rgb), 0.3),
    inset 0 0 calc(var(--btn-neon-glow) * 2.5) rgba(var(--color-accent-rgb), 0.2);
  text-shadow: 0 0 var(--btn-neon-glow) rgba(var(--color-accent-rgb), 0.8);
}

/* ===========================
   SETTINGS PANEL BUTTONS
   =========================== */

.drone-style-btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  color: var(--color-text-sec);
  cursor: pointer;
  transition: all 0.15s ease;
}

.drone-style-btn:hover {
  background: var(--color-surface-sec);
  color: var(--color-text);
}

.drone-style-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}

/* ===========================
   LIGHT MODE - Dark icons/fonts
   =========================== */

:root:not(.dark) .drone-btn:not(.drone-btn-primary):not(.drone-btn-signal) {
  color: var(--color-text);
}

:root:not(.dark) .drone-btn:not(.drone-btn-primary):not(.drone-btn-signal) i {
  color: var(--color-text);
}

/* ===========================
   ERROR/WARNING TEXT - Accessible colors
   =========================== */

.text-error,
.text-warning-accessible {
  color: var(--color-error);
}

.border-error {
  border-color: var(--color-error);
}

/* ===========================
   ICON LIBRARY TABS
   =========================== */

.icon-tab-btn {
  background: transparent;
  color: var(--color-text-sec);
  border: 1px solid transparent;
}

.icon-tab-btn:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.icon-tab-btn.active {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-border);
  box-shadow: 0 2px 8px rgba(var(--color-black-rgb), 0.1);
}

.icon-tab-content {
  animation: tabFadeIn 0.3s ease-out;
}

.icon-tab-content.hidden {
  display: none;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Lucide icons inherit color */
[data-lucide] {
  stroke: currentColor;
}

/* ===========================
   ICON SETTINGS SLIDERS
   =========================== */

/* Custom range slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  border-radius: 50%;
  margin-top: -5px;
  box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(var(--color-primary-rgb), 0.5);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  border-radius: 50%;
  border: none;
  box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.4);
}

/* Global icon size variable support */
:root {
  --icon-size: 24px;
  --icon-stroke: 2;
  --icon-optical: 48;
  --icon-weight: 400;
  --icon-fill: 0;
}

/* ===========================
   COURSE NAVIGATOR (VSCode-style)
   =========================== */

/* Collapsible panel toggle icons */
.typo-toggle-icon,
.icon-toggle-icon {
  transition: transform 0.3s ease;
}

.folder-caret {
  transition: transform 0.2s ease;
}

.folder-caret.rotate-90 {
  transform: rotate(90deg);
}

.folder-icon {
  transition: color 0.15s ease;
}

.course-item {
  transition: background-color 0.15s ease;
}

.course-item.active-course {
  background-color: rgba(var(--color-primary-rgb), 0.08) !important;
}

.course-folder .folder-content {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#courseNavigator::-webkit-scrollbar {
  width: 6px;
}

#courseNavigator::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

#courseNavigator::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ===========================
   MONO THEME — plain, no fills, no glass
   =========================== */

.mono .glass-panel,
.mono .glass-card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #000000;
  box-shadow: none;
}

.mono .glass-panel:hover,
.mono .glass-card:hover {
  background: transparent;
  border-color: #000000;
}

/* Strip all gradients and blurs in mono */
.mono [class*="glass"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Mono: all surface cards → transparent + black border, no shadow */
.mono .rounded-2xl,
.mono .rounded-xl,
.mono .rounded-lg {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Keep borders visible and black */
.mono [class*="border-brand"] {
  border-color: #000000 !important;
}

/* Strip colored background utility fills */
.mono [class*="bg-brand-surface"],
.mono [class*="bg-brand-bg"],
.mono [class*="bg-brand-primary"],
.mono [class*="bg-brand-accent"] {
  background: transparent !important;
}

/* ===========================
   THEME SLIDER (single sliding icon)
   =========================== */

#themeSlider:hover {
  border-color: rgba(var(--color-primary-rgb), 0.5) !important;
}

/* ===========================
   LOGO 2026 CARDS
   =========================== */

.logo2026-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.logo2026-card:hover {
  border-color: rgba(var(--color-primary-rgb), 0.5);
}

.logo2026-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  flex: 1;
}

.logo2026-swatch img {
  max-height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ===========================
   STYLE LABELS (Typography)
   =========================== */

.style-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 4px;
}

/* ===========================
   MISSION DIRECTORY PILL NAME
   =========================== */

/* pill viewBox 1920×700.91 → at 50px wide: height ≈ 18px; padding 5px each side */
.gddc-mission-name.pill-mode {
  font-family: 'ABC Schengen Variable', sans-serif;
  font-variation-settings: 'wght' 500, 'wdth' 100;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
}

/* ===========================
   CMYK PREVIEW
   =========================== */

.cmyk-row {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(var(--color-border), 0.3);
}