html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #e8edf5 0%, #f0f4fa 50%, #e6ecf4 100%);
  color: #1f2937;
}

:root {
  --neu-bg: #eef2f7;
  --neu-bg-light: #f5f8fc;
  --neu-bg-dark: #dce3ed;
  --neu-shadow-light: #ffffff;
  --neu-shadow-dark: #c5cdd8;
  --neu-primary: #0088CC;
  --neu-primary-light: #00AEEF;
  --neu-primary-dark: #006699;
  --neu-success: #16a34a;
  --neu-success-light: #4ade80;
  --neu-success-dark: #15803d;
  --neu-warning: #ea580c;
  --neu-warning-light: #fbbf24;
  --neu-warning-dark: #c2410c;
  --neu-danger: #dc2626;
  --neu-info: #2563eb;
  --neu-info-light: #60a5fa;

  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #4b5563;
  --text-muted: #6b7280;
  --text-on-primary: #ffffff;
  --text-on-success: #ffffff;
  --text-on-warning: #ffffff;
  --text-on-light: #1f2937;
}

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }

.neu-card {
  background: var(--neu-bg);
  border-radius: 20px;
  box-shadow: 
    8px 8px 16px var(--neu-shadow-dark),
    -8px -8px 16px var(--neu-shadow-light);
}

.neu-card-inset {
  background: var(--neu-bg);
  border-radius: 20px;
  box-shadow: 
    inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light);
}

.neu-button {
  background: var(--neu-bg);
  border-radius: 50px;
  box-shadow: 
    5px 5px 10px var(--neu-shadow-dark),
    -5px -5px 10px var(--neu-shadow-light);
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.neu-button:hover {
  box-shadow: 
    3px 3px 6px var(--neu-shadow-dark),
    -3px -3px 6px var(--neu-shadow-light);
}

.neu-button:active {
  box-shadow: 
    inset 3px 3px 6px var(--neu-shadow-dark),
    inset -3px -3px 6px var(--neu-shadow-light);
}

.neu-button-primary {
  background: linear-gradient(145deg, #4dc9f6, #0088CC);
  border-radius: 50px;
  box-shadow: 
    5px 5px 10px var(--neu-shadow-dark),
    -5px -5px 10px var(--neu-shadow-light);
  transition: all 0.2s ease;
  color: white;
}

.neu-button-primary:hover {
  box-shadow: 
    3px 3px 6px var(--neu-shadow-dark),
    -3px -3px 6px var(--neu-shadow-light),
    0 0 20px rgba(0, 174, 239, 0.3);
}

.neu-button-primary:active {
  box-shadow: 
    inset 3px 3px 6px rgba(0, 136, 204, 0.3),
    inset -3px -3px 6px rgba(77, 201, 246, 0.3);
}

.neu-button-success {
  background: linear-gradient(145deg, #4ade80, #16a34a);
  border-radius: 50px;
  box-shadow: 
    5px 5px 10px var(--neu-shadow-dark),
    -5px -5px 10px var(--neu-shadow-light);
  transition: all 0.2s ease;
  color: white;
}

.neu-button-success:hover {
  box-shadow: 
    3px 3px 6px var(--neu-shadow-dark),
    -3px -3px 6px var(--neu-shadow-light),
    0 0 20px rgba(34, 197, 94, 0.3);
}

.neu-button-warning {
  background: linear-gradient(145deg, #fbbf24, #ea580c);
  border-radius: 50px;
  box-shadow: 
    5px 5px 10px var(--neu-shadow-dark),
    -5px -5px 10px var(--neu-shadow-light);
  transition: all 0.2s ease;
  color: white;
}

.neu-button-warning:hover {
  box-shadow: 
    3px 3px 6px var(--neu-shadow-dark),
    -3px -3px 6px var(--neu-shadow-light),
    0 0 20px rgba(249, 115, 22, 0.3);
}

.neu-input {
  background: var(--neu-bg);
  border-radius: 12px;
  box-shadow: 
    inset 3px 3px 6px var(--neu-shadow-dark),
    inset -3px -3px 6px var(--neu-shadow-light);
  border: none;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.neu-input:focus {
  outline: none;
  box-shadow: 
    inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light),
    0 0 0 3px rgba(0, 174, 239, 0.2);
}

.neu-circle {
  background: var(--neu-bg);
  border-radius: 50%;
  box-shadow: 
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);
}

.neu-circle-inset {
  background: var(--neu-bg);
  border-radius: 50%;
  box-shadow: 
    inset 3px 3px 6px var(--neu-shadow-dark),
    inset -3px -3px 6px var(--neu-shadow-light);
}

.neu-badge {
  background: var(--neu-bg);
  border-radius: 9999px;
  box-shadow: 
    3px 3px 6px var(--neu-shadow-dark),
    -3px -3px 6px var(--neu-shadow-light);
  padding: 6px 14px;
  font-size: 0.875rem;
}

.neu-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neu-shadow-dark), transparent);
  margin: 20px 0;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  50% {
    transform: translate(-50%, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.animate-bounce-in {
  animation: bounce-in 0.4s ease-out;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.rotate-180 {
  transform: rotate(180deg);
}

.writing-mode-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

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

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

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 
      5px 5px 10px var(--neu-shadow-dark),
      -5px -5px 10px var(--neu-shadow-light),
      0 0 0 rgba(0, 174, 239, 0);
  }
  50% {
    box-shadow: 
      5px 5px 10px var(--neu-shadow-dark),
      -5px -5px 10px var(--neu-shadow-light),
      0 0 20px rgba(0, 174, 239, 0.4);
  }
}

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

.operator-header-bg {
  background: linear-gradient(145deg, #d4e5f0 0%, #b8d4e6 100%);
  position: relative;
  overflow: hidden;
}

.operator-header-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  pointer-events: none;
}

#activities-content {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

#rules-activities-content {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

#header-activities-content {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-card {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}