/* Custom Styles for MediaRelay Web Application */
:root {
  --bg-main: #0b0f15;
  --surface-card: #131a22;
  --surface-elevated: #1c2633;
  --border-subtle: #233142;
  --primary-blue: #38bdf8;
  --verified-green: #10b981;
  --pending-amber: #f59e0b;
  --error-rose: #f43f5e;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0b0f15;
}
::-webkit-scrollbar-thumb {
  background: #233142;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Glassmorphism */
.glass-panel {
  background: rgba(19, 26, 34, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.12);
}

.glass-panel-subtle {
  background: rgba(19, 26, 34, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.glass-nav {
  background: rgba(11, 15, 21, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Gradients & Glows */
.text-gradient-cyan {
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-green {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glow-cyan {
  box-shadow: 0 0 50px -10px rgba(56, 189, 248, 0.25);
}

.glow-emerald {
  box-shadow: 0 0 50px -10px rgba(16, 185, 129, 0.25);
}

/* Grid Background */
.bg-grid-pattern {
  background-image: radial-gradient(rgba(56, 189, 248, 0.1) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Interactive Mockup animations */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.98); }
}

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

/* Code block highlight */
.code-box {
  background: #0d131c;
  border: 1px solid #1e293b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}