/* ─── MyVoice Design System — Glassmorphism + Gradients ─── */

/* Monospace */
code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* ─── Background ─── */
body {
  background: #07070f;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(120, 60, 220, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(60, 100, 240, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(80, 40, 180, 0.06) 0%, transparent 60%);
  background-attachment: fixed;
}

/* ─── Glass Utilities ─── */
.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-elevated {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.1);
}

.glass-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1), 0 0 20px rgba(139, 92, 246, 0.05);
  outline: none;
}

/* ─── Gradient Border Card ─── */
.border-glow {
  position: relative;
}

.border-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.15), rgba(6, 182, 212, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ─── Gradient Text ─── */
.gradient-text {
  background: linear-gradient(135deg, #f8fafc 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-accent {
  background: linear-gradient(135deg, #c084fc 0%, #818cf8 50%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Gradient Buttons ─── */
.btn-gradient {
  background: linear-gradient(135deg, #7c3aed, #6366f1, #4f46e5);
  color: white;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.25);
}

.btn-gradient:hover {
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
  filter: brightness(1.1);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  transition: all 0.2s ease;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: white;
}

/* ─── Glass Nav ─── */
.glass-nav {
  background: rgba(7, 7, 15, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ─── Card Hover ─── */
.card-hover {
  transition: all 0.25s ease;
}

.card-hover:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* ─── Status Glow ─── */
.glow-emerald { box-shadow: 0 0 12px rgba(52, 211, 153, 0.15); }
.glow-amber { box-shadow: 0 0 12px rgba(251, 191, 36, 0.15); }
.glow-rose { box-shadow: 0 0 12px rgba(251, 113, 133, 0.15); }
.glow-violet { box-shadow: 0 0 12px rgba(139, 92, 246, 0.15); }

/* ─── Decorative Blur Blobs ─── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.blob-violet {
  background: rgba(139, 92, 246, 0.15);
}

.blob-indigo {
  background: rgba(99, 102, 241, 0.1);
}

.blob-cyan {
  background: rgba(6, 182, 212, 0.08);
}

/* ─── Toggle Switch ─── */
.toggle-track {
  transition: background-color 0.2s ease;
}

.toggle-track.active {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ─── Smooth Transitions ─── */
a, button, input, textarea, select {
  transition: all 0.2s ease;
}

/* ─── Selection ─── */
::selection {
  background: rgba(139, 92, 246, 0.3);
  color: white;
}