:root {
  /* Dark cyberpunk theme matching target design */
  --background: hsl(220, 20%, 5%);
  --foreground: hsl(210, 50%, 90%);
  --card: hsl(220, 18%, 8%);
  --card-foreground: hsl(210, 50%, 90%);
  --primary: hsl(195, 100%, 70%);
  --primary-foreground: hsl(220, 20%, 5%);
  --secondary: hsl(160, 60%, 60%);
  --secondary-foreground: hsl(220, 20%, 5%);
  --muted: hsl(220, 15%, 12%);
  --muted-foreground: hsl(210, 25%, 60%);
  --accent: hsl(280, 80%, 70%);
  --accent-foreground: hsl(220, 20%, 5%);
  --destructive: hsl(0, 70%, 60%);
  --destructive-foreground: hsl(220, 20%, 5%);
  --border: hsl(220, 20%, 15%);
  --input: hsl(220, 18%, 10%);
  --ring: hsl(195, 100%, 70%);
  --radius: 0.75rem;
  
  /* Enhanced dashboard colors */
  --header-bg: hsl(220, 22%, 6%);
  --card-hover: hsl(220, 20%, 12%);
  --success: hsl(142, 80%, 50%);
  --info: hsl(199, 90%, 60%);
  --warning: hsl(38, 95%, 60%);
  
  /* Alpha colors for overlays and shadows */
  --primary-05: hsl(195, 100%, 70%, 0.05);
  --primary-20: hsl(195, 100%, 70%, 0.20);
  --primary-60: hsl(195, 100%, 70%, 0.60);
  --accent-08: hsl(280, 80%, 70%, 0.08);
  --accent-15: hsl(280, 80%, 70%, 0.15);
  --accent-60: hsl(280, 80%, 70%, 0.60);
  --nightmare-30: hsl(300, 70%, 25%, 0.30);
}

/* Simple CSS-only Toggle for Demo Modal */
.demo-toggle-checkbox {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

/* Default state (Naive mode) - show naive content, hide guarded content */
.naive-content {
  display: block;
}

.guarded-content {
  display: none;
}

/* When checkbox is checked (Guarded mode) - hide naive content, show guarded content */
.demo-toggle-checkbox:checked ~ * .naive-content,
.demo-toggle-checkbox:checked ~ .main-content .naive-content {
  display: none;
}

.demo-toggle-checkbox:checked ~ * .guarded-content,
.demo-toggle-checkbox:checked ~ .main-content .guarded-content {
  display: block;
}

/* Toggle track styling */
.toggle-track {
  width: 48px;
  height: 24px;
  background-color: rgb(252 165 165); /* red-200 */
  border: 2px solid rgb(248 113 113); /* red-300 */
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.demo-toggle-checkbox:checked ~ * .toggle-track,
.demo-toggle-checkbox:checked ~ .main-content .toggle-track {
  background-color: rgb(187 247 208); /* green-200 */
  border-color: rgb(134 239 172); /* green-300 */
}

/* Toggle thumb styling */
.toggle-thumb {
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transform: translateX(0);
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.demo-toggle-checkbox:checked ~ * .toggle-thumb,
.demo-toggle-checkbox:checked ~ .main-content .toggle-thumb {
  transform: translateX(20px);
}

/* Label styling */
.toggle-label-naive {
  color: rgb(185 28 28); /* red-700 */
  opacity: 1;
  transition: opacity 0.2s;
}

.toggle-label-guarded {
  color: rgb(21 128 61); /* green-700 */
  opacity: 0.5;
  transition: opacity 0.2s;
}

.demo-toggle-checkbox:checked ~ * .toggle-label-naive,
.demo-toggle-checkbox:checked ~ .main-content .toggle-label-naive {
  opacity: 0.5;
}

.demo-toggle-checkbox:checked ~ * .toggle-label-guarded,
.demo-toggle-checkbox:checked ~ .main-content .toggle-label-guarded {
  opacity: 1;
}

/* Step 4 container styling changes */
.output-container {
  background-color: rgb(254 242 242); /* red-50 */
  border-color: rgb(254 202 202); /* red-200 */
}

.demo-toggle-checkbox:checked ~ * .output-container,
.demo-toggle-checkbox:checked ~ .main-content .output-container {
  background-color: rgb(240 253 244); /* green-50 */
  border-color: rgb(187 247 208); /* green-200 */
}

.output-step-number {
  background-color: rgb(220 38 38); /* red-600 */
}

.demo-toggle-checkbox:checked ~ * .output-step-number,
.demo-toggle-checkbox:checked ~ .main-content .output-step-number {
  background-color: rgb(22 163 74); /* green-600 */
}

.output-title {
  color: rgb(127 29 29); /* red-900 */
}

.demo-toggle-checkbox:checked ~ * .output-title,
.demo-toggle-checkbox:checked ~ .main-content .output-title {
  color: rgb(20 83 45); /* green-900 */
}

.output-avatar {
  background-color: rgb(254 226 226); /* red-100 */
}

.demo-toggle-checkbox:checked ~ * .output-avatar,
.demo-toggle-checkbox:checked ~ .main-content .output-avatar {
  background-color: rgb(220 252 231); /* green-100 */
}

.output-avatar i {
  color: rgb(220 38 38); /* red-600 */
}

.demo-toggle-checkbox:checked ~ * .output-avatar i,
.demo-toggle-checkbox:checked ~ .main-content .output-avatar i {
  color: rgb(22 163 74); /* green-600 */
}

@keyframes glow {
  from { 
    box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 15px var(--primary); 
  }
  to { 
    box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary); 
  }
}

@keyframes matrix {
  0% { 
    transform: translateY(-100%); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(100vh); 
    opacity: 0; 
  }
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.terminal-cursor::after {
  content: '▋';
  animation: blink 1s infinite;
  color: var(--primary);
}

.matrix-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.matrix-char {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--primary);
  opacity: 0.1;
  animation: matrix 20s linear infinite;
}

/* Dashboard Header */
.dashboard-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.dashboard-brand {
  color: var(--foreground);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.025em;
}

.dashboard-version {
  color: var(--muted-foreground);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Feature Cards */
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(8px);
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-08) 0%, transparent 50%);
  pointer-events: none;
}

.feature-card:hover {
  border-color: var(--accent-60);
  background: var(--card-hover);
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 25px var(--accent-15);
}

/* Level Cards */
.level-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(8px);
}

.level-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-05) 0%, transparent 50%);
  pointer-events: none;
}

.level-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-60);
  background: var(--card-hover);
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.4),
    0 0 20px var(--primary-20);
}

/* Completed Level Cards */
.level-card-completed {
  border-color: var(--success) !important;
  box-shadow: 0 0 20px var(--success-20);
}

.level-card-completed::before {
  background: linear-gradient(135deg, var(--success-05) 0%, transparent 50%);
}

.level-card-completed:hover {
  border-color: var(--success-60) !important;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.4),
    0 0 25px var(--success-30);
}

/* Completion Badge - Diagonal Ribbon */
.completion-badge {
  position: absolute;
  top: 12px;
  right: -28px;
  width: 100px;
  height: 20px;
  background: linear-gradient(135deg, var(--success) 0%, hsl(120, 60%, 45%) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 10px var(--success-20);
  transform: rotate(45deg);
  z-index: 10;
  overflow: hidden;
}

.completion-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
}

/* Difficulty Badges */
.badge-intro {
  background: hsl(240, 80%, 25%);
  color: hsl(240, 100%, 85%);
  border: 1px solid hsl(240, 80%, 35%);
  font-weight: 500;
  letter-spacing: 0.025em;
}

.badge-novice {
  background: hsl(120, 50%, 20%);
  color: hsl(120, 80%, 80%);
  border: 1px solid hsl(120, 50%, 30%);
  font-weight: 500;
  letter-spacing: 0.025em;
}

.badge-intermediate {
  background: hsl(45, 80%, 25%);
  color: hsl(45, 100%, 85%);
  border: 1px solid hsl(45, 80%, 35%);
  font-weight: 500;
  letter-spacing: 0.025em;
}

.badge-advanced {
  background: hsl(30, 80%, 25%);
  color: hsl(30, 100%, 85%);
  border: 1px solid hsl(30, 80%, 35%);
  font-weight: 500;
  letter-spacing: 0.025em;
}

.badge-expert {
  background: hsl(0, 70%, 25%);
  color: hsl(0, 100%, 85%);
  border: 1px solid hsl(0, 70%, 35%);
  font-weight: 500;
  letter-spacing: 0.025em;
}

.badge-nightmare {
  background: hsl(300, 70%, 25%);
  color: hsl(300, 100%, 85%);
  border: 1px solid hsl(300, 70%, 35%);
  font-weight: 500;
  letter-spacing: 0.025em;
  animation: pulse-slow 3s infinite;
  box-shadow: 0 0 15px var(--nightmare-30);
}

/* Mission Status */
.mission-status {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.mission-status::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  box-shadow: 0 0 10px var(--primary)/30%;
}

/* Progress Circle */
.progress-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) var(--progress, 0%), var(--muted) 0%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.progress-circle::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--card);
}

.progress-text {
  position: relative;
  z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--foreground);
}

.neon-border {
  border: 1px solid var(--primary);
  box-shadow: 0 0 5px var(--primary);
}

.completed-badge {
  background: linear-gradient(45deg, var(--secondary), var(--accent));
  animation: pulse-slow 2s infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

.animate-pulse-slow {
  animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-matrix {
  animation: matrix 20s linear infinite;
}

/* Screen reader only class for accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--muted);
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Focus styles for better accessibility */
button:focus,
input:focus,
a:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Custom button hover effects */
.hover\:bg-primary\/90:hover {
  background-color: rgba(0, 255, 255, 0.9);
}

.hover\:bg-primary\/30:hover {
  background-color: rgba(0, 255, 255, 0.3);
}

/* Text gradient for hero title */
.bg-clip-text {
  background-clip: text;
  -webkit-background-clip: text;
}

.text-transparent {
  color: transparent;
}

/* Custom backdrop blur */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Container max width adjustments */
.container {
  max-width: 1200px;
}

/* Custom border colors for different difficulty levels */
.border-destructive\/50 {
  border-color: rgba(255, 59, 48, 0.5);
}

.border-destructive\/30 {
  border-color: rgba(255, 59, 48, 0.3);
}

.border-secondary\/30 {
  border-color: rgba(50, 215, 75, 0.3);
}

.border-accent\/30 {
  border-color: rgba(255, 45, 85, 0.3);
}

/* Background color variations */
.bg-destructive\/10 {
  background-color: rgba(255, 59, 48, 0.1);
}

.bg-destructive\/20 {
  background-color: rgba(255, 59, 48, 0.2);
}

.bg-destructive\/30 {
  background-color: rgba(255, 59, 48, 0.3);
}

.bg-destructive\/50 {
  background-color: rgba(255, 59, 48, 0.5);
}

.bg-secondary\/10 {
  background-color: rgba(50, 215, 75, 0.1);
}

.bg-secondary\/20 {
  background-color: rgba(50, 215, 75, 0.2);
}

.bg-primary\/20 {
  background-color: rgba(0, 255, 255, 0.2);
}

.bg-accent\/10 {
  background-color: rgba(255, 45, 85, 0.1);
}

/* Form styling improvements */
input[type="text"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.1);
}

/* Progress bar styling */
.progress-bar {
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  transition: width 0.5s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .text-4xl {
    font-size: 2rem;
  }
  
  .text-6xl {
    font-size: 3rem;
  }
  
  .grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Horizontal Language Selector - Balanced Active State */
.lang-option-vertical {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  text-align: center;
  border-radius: 0.75rem;
  white-space: nowrap;
  min-width: 4rem;
}

/* Inactive state - muted */
.lang-option-vertical.lang-option-inactive {
  color: hsl(210, 20%, 45%);
  background: transparent;
  border: 1px solid transparent;
}

.lang-option-vertical.lang-option-inactive:hover {
  color: var(--primary);
  background: rgba(0, 180, 255, 0.05);
  transform: translateY(-1px);
}

/* Active state - OUTLINE ONLY (clean hierarchy) */
.lang-option-vertical.lang-option-active {
  color: var(--primary) !important;
  background: transparent !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  border: 2px solid var(--primary) !important;
  box-shadow: 0 0 4px rgba(0, 180, 255, 0.2) !important;
  text-shadow: none !important;
}

.lang-option-vertical.lang-option-active:hover {
  box-shadow: 0 0 6px rgba(0, 180, 255, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Focus states for accessibility */
.lang-option-vertical:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .lang-option-vertical {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    min-width: 3.5rem;
  }
  
  .lang-option-vertical.lang-option-active {
    font-size: 0.75rem !important;
  }
}