/* Custom styles and themes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --discord-blurple: #5865F2;
  --discord-green: #57F287;
  --discord-yellow: #FEE75C;
  --discord-red: #ED4245;
  --discord-bg: #313338;
  --discord-embed-bg: #2b2d31;
  --mine-dark: #0d0f17;
  --mine-card: #151824;
  --mine-border: #232738;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--mine-dark);
  color: #f3f4f6;
}

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

.glass-panel {
  background: rgba(21, 24, 36, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--mine-border);
}

.glass-card {
  background: rgba(26, 30, 46, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease-in-out;
}

.glass-card:hover {
  border-color: rgba(88, 101, 242, 0.4);
}

.glow-blurple {
  box-shadow: 0 0 25px rgba(88, 101, 242, 0.25);
}

.glow-green {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #0d0f17;
}
::-webkit-scrollbar-thumb {
  background: #232738;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #363c54;
}

/* Tab active state */
.tab-btn.active {
  background-color: #5865F2;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

/* Discord Embed Simulator Styling */
.discord-message-box {
  background-color: var(--discord-bg);
  border-radius: 8px;
  padding: 16px;
  font-family: 'Inter', sans-serif;
}

.discord-embed-card {
  background-color: var(--discord-embed-bg);
  border-radius: 4px;
  border-left: 4px solid #5865F2;
  padding: 12px 16px;
  max-width: 520px;
}

.discord-mention {
  background-color: rgba(88, 101, 242, 0.3);
  color: #c9cdfb;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 500;
}

/* Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast {
  animation: slideIn 0.3s ease-out forwards;
}

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