/* Base Styles */
body {
  font-family: 'Inter', sans-serif;
  background-color: #09090b;
  color: #e4e4e7;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

code, pre, .font-mono {
  font-family: 'JetBrains Mono', monospace;
}

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

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

::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

/* Utilities */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

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

/* Method Badge Colors */
.method-badge {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  border-radius: 9999px;
  display: inline-block;
}

.method-badge.xs {
  font-size: 10px;
  padding: 2px 8px;
}

.method-badge.sm {
  font-size: 12px;
  padding: 4px 10px;
}

.method-get {
  color: #34d399;
  background-color: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.method-post {
  color: #fbbf24;
  background-color: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.method-put {
  color: #60a5fa;
  background-color: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
}

.method-delete {
  color: #fb7185;
  background-color: rgba(251, 113, 133, 0.1);
  border: 1px solid rgba(251, 113, 133, 0.2);
}

.method-patch {
  color: #a78bfa;
  background-color: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
}

/* JSON Syntax Highlighting */
.json-key {
  color: #a5b4fc;
}

.json-string {
  color: #6ee7b7;
}

.json-number {
  color: #fdba74;
}

.json-boolean {
  color: #93c5fd;
}

.json-null {
  color: #fda4af;
}

/* Status Colors */
.status-success {
  color: #34d399;
}

.status-redirect {
  color: #fbbf24;
}

.status-error {
  color: #fb7185;
}

.status-unknown {
  color: #a1a1aa;
}

/* Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Toggle Button States */
.toggle-on {
  background-color: #4f46e5;
}

.toggle-off {
  background-color: #3f3f46;
}

.toggle-on .toggle-dot {
  left: 20px;
}

.toggle-off .toggle-dot {
  left: 4px;
}