/* Sonora Manager — plugin UI theme (purple + neon green) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --sm-bg: #0a0a0f;
  --sm-bg-deep: #07070c;
  --sm-panel: #121218;
  --sm-panel-2: #18181f;
  --sm-border: rgba(255, 255, 255, 0.1);
  --sm-text: #f5f5f7;
  --sm-muted: #9a9aab;
  --sm-accent: #6a46e5;
  --sm-accent-bright: #7c4dff;
  --sm-accent-hover: #8b6bff;
  --sm-accent-soft: rgba(106, 70, 229, 0.22);
  --sm-waveform: #00ff88;
  --sm-waveform-soft: rgba(0, 255, 136, 0.18);
  --sm-glow: 0 8px 28px rgba(106, 70, 229, 0.35);
}

body.font-sans {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  background: var(--sm-bg);
  color: var(--sm-text);
}

/* Page + section backgrounds (cyan-era navy → charcoal) */
main.min-h-screen.bg-\[\#070b14\],
.bg-\[\#070b14\],
.bg-\[\#070b14\]\/80,
.bg-\[\#070b14\]\/60,
.from-\[\#070b14\]\/40,
.from-\[\#070b14\]\/60,
.from-\[\#070b14\]\/80,
.to-\[\#070b14\]\/60,
.to-\[\#070b14\]\/80,
.to-\[\#070b14\],
.via-\[\#0a1018\],
.via-\[\#080c14\],
.bg-\[\#0b1220\]\/90,
.bg-\[\#0c1322\]\/80,
.bg-\[\#080d18\],
.bg-\[\#050810\],
.to-\[\#050810\] {
  --tw-gradient-from: rgba(10, 10, 15, 0.6) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(10, 10, 15, 0.85) var(--tw-gradient-to-position) !important;
}

main.min-h-screen {
  background: var(--sm-bg) !important;
}

nav.fixed {
  background: rgba(10, 10, 15, 0.82) !important;
  border-bottom: 1px solid var(--sm-border);
}

/* Tailwind violet utilities (not in purged Next CSS — needed after bundle remap) */
.text-violet-400,
.text-violet-300 { color: #a78bfa !important; }
.bg-violet-500\/20 { background-color: rgba(106, 70, 229, 0.22) !important; }
.border-violet-400\/40 { border-color: rgba(167, 139, 250, 0.4) !important; }
.from-violet-500 {
  --tw-gradient-from: #6a46e5 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(106, 70, 229, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-violet-400 {
  --tw-gradient-to: #a78bfa var(--tw-gradient-to-position) !important;
}
.bg-violet-600 { background-color: #6a46e5 !important; color: #fff !important; box-shadow: var(--sm-glow); }
.hover\:bg-violet-500:hover { background-color: #8b6bff !important; }
.focus\:ring-violet-500\/40:focus { --tw-ring-color: rgba(106, 70, 229, 0.4) !important; }
.bg-\[\#0a0a0f\] { background-color: #0a0a0f !important; }
.bg-\[\#121218\]\/90 { background-color: rgba(18, 18, 24, 0.9) !important; }
.bg-\[\#18181f\]\/80 { background-color: rgba(24, 24, 31, 0.8) !important; }
.bg-\[\#0c0c12\] { background-color: #0c0c12 !important; }
.bg-\[\#07070c\] { background-color: #07070c !important; }

/* Accent remap: cyan / sky → purple (SSR fallback before hydrate) */
.text-cyan-400,
.text-sky-300,
.text-sky-400 {
  color: var(--sm-accent-bright) !important;
}

.bg-cyan-500\/20,
.bg-cyan-400\/20 {
  background-color: var(--sm-accent-soft) !important;
}

.border-cyan-400\/40,
.border-cyan-400\/50 {
  border-color: rgba(124, 77, 255, 0.45) !important;
}

.from-cyan-500,
.from-cyan-400 {
  --tw-gradient-from: #6a46e5 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(106, 70, 229, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-blue-500,
.to-blue-400 {
  --tw-gradient-to: #8b6bff var(--tw-gradient-to-position) !important;
}

.bg-cyan-500\/20.text-cyan-400,
button.bg-cyan-500\/20 {
  color: var(--sm-accent-bright) !important;
  background-color: var(--sm-accent-soft) !important;
  border-color: rgba(124, 77, 255, 0.45) !important;
}

/* Primary CTAs: emerald → purple soft-glow */
button.bg-emerald-600,
a.bg-emerald-600,
#buy-now-stripe,
.bg-emerald-600 {
  background-color: var(--sm-accent) !important;
  box-shadow: var(--sm-glow);
  color: #fff !important;
}
button.bg-emerald-600:hover,
a.bg-emerald-600:hover,
.hover\:bg-emerald-700:hover {
  background-color: var(--sm-accent-hover) !important;
}

/* Feature list dots stay neon green (active signal) */
li .bg-emerald-500,
.rounded-full.bg-emerald-500 {
  background-color: var(--sm-waveform) !important;
  box-shadow: none !important;
}

/* Sky focus rings → purple */
.focus\:ring-sky-500\/40:focus {
  --tw-ring-color: rgba(106, 70, 229, 0.4) !important;
}

/* Soft ambient blobs */
.bg-blue-900\/8 {
  background-color: rgba(106, 70, 229, 0.12) !important;
}

/* Panels closer to plugin chrome */
.rounded-xl.border.border-white\/10,
.rounded-2xl.border.border-slate-700\/60 {
  background: linear-gradient(180deg, #14141c 0%, #101018 100%) !important;
  border-color: var(--sm-border) !important;
}

/* Hero atmosphere */
section.relative.min-h-screen.pt-20 .absolute.inset-0.bg-cover {
  filter: saturate(0.85) brightness(0.55);
}
section.relative.min-h-screen.pt-20::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(106, 70, 229, 0.28), transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 40%, rgba(0, 255, 136, 0.06), transparent 50%);
  z-index: 1;
}
section.relative.min-h-screen.pt-20 > .relative.container {
  position: relative;
  z-index: 2;
}

/* ========== Drum Rack showcase (compact + interactive) ========== */
.sm-drumrack-wrap {
  display: flex;
  justify-content: center;
  margin: 0.5rem auto 1.25rem;
  padding: 0 1rem;
}
.sm-drumrack {
  width: 100%;
  max-width: 320px;
  border-radius: 0.75rem;
  border: 1px solid var(--sm-border);
  background: linear-gradient(180deg, #14141c, #0e0e14);
  padding: 0.75rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  outline: none;
}
.sm-drumrack:focus-within {
  border-color: rgba(124, 77, 255, 0.45);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(106, 70, 229, 0.25);
}
.sm-drumrack__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.sm-drumrack__head h3 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sm-text);
}
.sm-drumrack__hint {
  margin: 0;
  font-size: 0.62rem;
  color: var(--sm-muted);
}
.sm-drumrack__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.55rem;
}
.sm-drumrack__actions select,
.sm-drumrack__actions button {
  height: 1.55rem;
  border-radius: 0.4rem;
  border: 1px solid var(--sm-border);
  background: #0c0c12;
  color: #d4d4de;
  font-size: 0.65rem;
  padding: 0 0.5rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.sm-drumrack__actions select:hover,
.sm-drumrack__actions button:hover {
  border-color: rgba(124, 77, 255, 0.4);
  background: #16161f;
}
.sm-drumrack__actions button:active {
  transform: scale(0.96);
}
.sm-drumrack__actions button.sm-btn-primary {
  background: var(--sm-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(106, 70, 229, 0.35);
}
.sm-drumrack__actions button.sm-btn-primary:hover {
  background: var(--sm-accent-hover);
}
.sm-drumrack__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  max-width: 280px;
  margin: 0 auto;
}
.sm-pad {
  aspect-ratio: 1;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg, #1a1a26, #101018);
  padding: 0.28rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s, transform 0.08s, background 0.12s, box-shadow 0.12s;
}
.sm-pad:hover {
  border-color: rgba(124, 77, 255, 0.55);
}
.sm-pad:active,
.sm-pad.is-hit {
  transform: scale(0.92);
  border-color: var(--sm-waveform);
  background: linear-gradient(160deg, rgba(0, 255, 136, 0.18), #12121a);
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.35);
}
.sm-pad.is-empty {
  opacity: 0.45;
}
.sm-pad.is-empty .sm-pad__wave,
.sm-pad.is-empty .sm-pad__name {
  visibility: hidden;
}
.sm-pad__note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: var(--sm-accent-bright);
  font-weight: 500;
  line-height: 1;
}
.sm-pad__wave {
  height: 14px;
  width: 100%;
  color: var(--sm-waveform);
  opacity: 0.9;
  pointer-events: none;
}
.sm-pad.is-hit .sm-pad__wave {
  animation: sm-wave-pulse 0.28s ease-out;
}
@keyframes sm-wave-pulse {
  0% { opacity: 1; transform: scaleY(1.35); }
  100% { opacity: 0.9; transform: scaleY(1); }
}
.sm-pad__name {
  font-size: 0.48rem;
  color: #8e8e9e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.sm-drumrack__foot {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--sm-muted);
  min-height: 1.1rem;
}
.sm-drumrack__status {
  color: #c4c4d4;
  font-variant-numeric: tabular-nums;
}
.sm-drumrack__status.is-flash {
  color: var(--sm-waveform);
}
.sm-drumrack__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--sm-waveform-soft);
  color: var(--sm-waveform);
  font-weight: 600;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sm-drumrack__toast {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  transform: translateX(-50%) translateY(6px);
  background: rgba(106, 70, 229, 0.95);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 0.4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
  z-index: 2;
}
.sm-drumrack__toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sm-drumrack {
  position: relative;
}

/* Extra feature cards */
.sm-feature-extra {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  .sm-feature-extra {
    grid-template-columns: 1fr 1fr;
  }
}
.sm-feature-card {
  background: rgba(18, 18, 24, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--sm-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}
.sm-feature-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sm-accent-soft);
  color: var(--sm-accent-bright);
  margin-bottom: 0;
}
.sm-feature-card h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
}
.sm-feature-card ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.sm-feature-card li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #9ca3af;
  font-size: 0.875rem;
}
.sm-feature-card li::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--sm-waveform);
  flex-shrink: 0;
}

/* Plugin pill under hero */
.sm-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 1.25rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(124, 77, 255, 0.4);
  background: rgba(106, 70, 229, 0.12);
  color: #d6ccff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sm-hero-pill span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--sm-waveform);
  box-shadow: 0 0 10px var(--sm-waveform);
}

/* Product availability */
.sm-sale-notice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0 auto 1.25rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(167, 139, 250, 0.32);
  border-radius: 0.75rem;
  background: rgba(106, 70, 229, 0.14);
  color: #e9e4ff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 8px 28px rgba(106, 70, 229, 0.16);
}
.sm-sale-notice__dot {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--sm-waveform);
  box-shadow: 0 0 12px var(--sm-waveform);
}
.sm-pricing-notice {
  margin: 0 0 0.75rem;
  color: #c4b5fd;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}
#buy-now-stripe[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}
#buy-now-stripe[aria-disabled='true']:hover {
  background-color: var(--sm-accent) !important;
}

/* Product media captions */
.sm-media-caption-note {
  color: var(--sm-muted);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .sm-drumrack {
    max-width: 300px;
  }
  .sm-drumrack__grid {
    gap: 0.3rem;
    max-width: 260px;
  }
}