@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@500;600&display=swap');

:root {
  --bg: #03050d;
  --panel: #0a0d18;
  --panel-edge: #0f1624;
  --text: #e6f1ff;
  --muted: #7f8ca6;
  --accent: #7fffd4;
  --accent2: #82a0ff;
  --accent3: #ff88e4;
  --warning: #fbbf24;
  --shadow: 0 20px 60px rgba(0,0,0,0.4);
  --radius: 10px;
  --grid-gap: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(90, 255, 214, 0.08), transparent 20%),
    radial-gradient(circle at 80% 8%, rgba(255, 136, 228, 0.12), transparent 28%),
    radial-gradient(circle at 40% 70%, rgba(130, 160, 255, 0.08), transparent 34%),
    linear-gradient(125deg, #040612 0%, #050818 40%, #03050d 100%);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  min-height: 100vh;
  padding: 20px;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(127, 255, 212, 0.06), transparent 32%),
    linear-gradient(0deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 100% 100%, 120px 120px, 120px 120px;
  opacity: 0.5;
  pointer-events: none;
}

#app {
  max-width: 1400px;
  margin: 0 auto 40px;
}

.top-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  background: linear-gradient(110deg, rgba(18, 25, 42, 0.8), rgba(10, 13, 24, 0.95));
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: 8px 12px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.top-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(127,255,212,0.12), rgba(130,160,255,0.08), rgba(255,136,228,0.12));
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
}

.awaken-wrap {
  display: flex;
  justify-content: center;
}

.awaken {
  padding: 12px 26px;
  font-size: 16px;
  letter-spacing: 1px;
  box-shadow: 0 0 24px rgba(127,255,212,0.35);
  text-transform: uppercase;
}
.synth-off .awaken {
  animation: awakenPulse 1.8s ease-in-out infinite;
}

@keyframes awakenPulse {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(127,255,212,0.28); }
  50% { transform: scale(1.05); box-shadow: 0 0 32px rgba(127,255,212,0.45); }
  100% { transform: scale(1); box-shadow: 0 0 20px rgba(127,255,212,0.28); }
}

.logo {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 6px;
}

.logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(127,255,212,0.3));
}

.title { font-family: 'Space Grotesk', 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.subtitle { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

.global-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.global-controls .control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
.global-controls .control span { white-space: nowrap; }
.global-controls .control input[type="range"] { width: 180px; }

button {
  background: linear-gradient(145deg, #1b2233, #0c1020);
  color: var(--text);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

button:hover { border-color: var(--accent); color: var(--accent); }
button.primary { background: linear-gradient(145deg, #12322b, #0c1621); border-color: rgba(127,255,212,0.4); }
button.ghost { background: transparent; }
button.danger {
  background: linear-gradient(145deg, #2a0c0c, #120606);
  border-color: rgba(255, 99, 99, 0.5);
  color: #ffd7d7;
  box-shadow: 0 0 18px rgba(255, 99, 99, 0.25);
}
button.danger:hover { border-color: #ff9c9c; color: #fff; box-shadow: 0 0 18px rgba(255, 99, 99, 0.35); }
button:active { transform: translateY(1px); }

main.layout {
  margin-top: 18px;
  display: grid;
  gap: 18px;
  grid-template-columns: 2fr 1fr;
  align-items: start;
  transition: opacity 0.5s ease, filter 0.5s ease;
  position: relative;
  overflow: hidden;
}

.layout > * {
  position: relative;
  z-index: 1;
}

.layout::before {
  content: '';
  position: absolute;
  inset: -40px;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(127,255,212,0.16), transparent 55%),
    url('lunewarelogo.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: 26% 58%, 26% 58%;
  background-size: clamp(300px, 45vw, 600px), clamp(280px, 42vw, 560px);
  background-blend-mode: screen;
  opacity: 0.2;
  filter: drop-shadow(0 0 24px rgba(127,255,212,0.35)) blur(2px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s ease;
}

.synth-off .layout::before {
  opacity: 0.12;
  filter: drop-shadow(0 0 24px rgba(127,255,212,0.35)) blur(2px);
}

@media (max-width: 900px) {
  .layout::before {
    background-position: 50% 58%, 50% 58%;
    background-size: clamp(260px, 80vw, 520px), clamp(240px, 72vw, 500px);
  }
}

.module {
  background: linear-gradient(175deg, rgba(10,14,24,0.72), rgba(6,8,14,0.9));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding: 12px 12px 16px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.22);
  position: relative;
  overflow: hidden;
}

.module::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0) 32%),
    linear-gradient(130deg, rgba(127,255,212,0.02), rgba(130,160,255,0.03), rgba(255,136,228,0.02));
  opacity: 0.55;
  pointer-events: none;
}

.module::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(130,160,255,0.18), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
}

.module header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

.cluster {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}

.cluster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(127,255,212,0.05), rgba(255,136,228,0.05));
  opacity: 0.6;
  pointer-events: none;
}

.cluster h4 {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  color: var(--muted);
}

.control {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 6px;
}

.control.small { grid-template-columns: 90px 120px; }
.control.tiny { grid-template-columns: 60px 100px; }
.control.small { grid-template-columns: 90px 120px; }

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

select, input[type="number"] {
  width: 100%;
  background: #0f111a;
  color: var(--text);
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  padding: 6px;
}

.inline {
  display: flex;
  gap: 8px;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.synth-off main.layout {
  opacity: 0.35;
  filter: saturate(0.5);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.synth-off .voice-shell,
.synth-off .rack .module {
  box-shadow: none;
}

.tag {
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--muted);
}

.voice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.voice-id {
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--accent2);
  text-transform: uppercase;
}

.badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(127,255,212,0.12);
  color: var(--accent);
  font-size: 11px;
}

.badge.off { background: rgba(255,255,255,0.05); color: var(--muted); }

.rack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gap);
}

.fx header div { color: var(--accent2); }

.voice-shell {
  min-height: 520px;
}

.patch-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

textarea {
  width: 100%;
  min-height: 80px;
  background: #0f111a;
  color: var(--text);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  padding: 8px;
  resize: vertical;
}

.meter {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}

.meter span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: block;
  width: 8%;
  background: linear-gradient(90deg, rgba(143,240,164,0.8), rgba(124,183,255,0.8));
  transition: width 0.12s ease;
  filter: drop-shadow(0 0 10px rgba(124,183,255,0.4));
  z-index: 1;
}

.meter .peak {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: block;
  width: 0%;
  background: linear-gradient(90deg, rgba(124,183,255,0.16), rgba(124,183,255,0.0));
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(124,183,255,0.3));
  transition: width 0.28s ease, opacity 0.2s ease;
  opacity: 0.65;
  z-index: 0;
}

.status { margin-top: 6px; color: var(--muted); font-size: 11px; letter-spacing: 1px; }

.led {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127,255,212,0.5), rgba(20,40,64,0.9));
  box-shadow: 0 0 10px rgba(127,255,212,0.45);
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 80ms linear, box-shadow 80ms linear, opacity 80ms linear, background 120ms linear;
}

.led.on { background: radial-gradient(circle, #8ff0a4, #22583a); box-shadow: 0 0 12px rgba(143,240,164,0.6); }
.led.lfo { background: radial-gradient(circle, #7cb7ff, #1b2e4b); box-shadow: 0 0 12px rgba(124,183,255,0.6); }

.lfo-activity {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.lfo-activity .chip {
  background: none;
  padding: 0;
  color: var(--accent2);
  font-size: 16px;
  font-weight: 500;
}

.lfo-meter {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.7);
}

.lfo-meter span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(124,183,255,0.95), rgba(127,255,212,0.9));
  transform-origin: left;
  transform: scaleX(0.3);
  opacity: 0.4;
  transition: transform 80ms linear, opacity 120ms linear, filter 120ms linear;
}

.scope {
  width: 100%;
  height: auto;
  min-height: 240px;
  background: radial-gradient(circle at 50% 50%, rgba(127,255,212,0.08), rgba(7,10,18,0.8));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.6);
  align-self: stretch;
  grid-column: auto / span 2;
}

.grid-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.mod-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  column-gap: 12px;
  row-gap: 6px;
  margin-bottom: 6px;
}

.mod-grid .control {
  grid-template-columns: 90px 1fr;
  margin-bottom: 0;
}
.mod-grid .control span { white-space: nowrap; }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chip {
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1px;
}

.voice-toggle {
  padding: 8px 12px;
  border-color: rgba(127,255,212,0.4);
  color: var(--accent);
  background: linear-gradient(145deg, rgba(18,34,32,0.85), rgba(10,18,26,0.9));
  box-shadow: 0 0 12px rgba(127,255,212,0.25);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.voice-toggle.muted {
  border-color: rgba(255,136,228,0.45);
  color: var(--text);
  background: linear-gradient(145deg, rgba(52,24,36,0.9), rgba(28,12,18,0.95));
  box-shadow: 0 0 14px rgba(255,136,228,0.35);
}

.voice-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.voice-nav button {
  position: relative;
  background: linear-gradient(140deg, rgba(12,18,28,0.8), rgba(7,10,18,0.9));
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.voice-nav button::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
  transition: all 0.18s ease;
}

.voice-nav button.online {
  color: var(--accent);
  border-color: rgba(127,255,212,0.35);
  box-shadow: 0 0 12px rgba(127,255,212,0.16);
  background: linear-gradient(150deg, rgba(16,32,32,0.9), rgba(8,16,24,0.9));
}

.voice-nav button.online::before {
  background: radial-gradient(circle, var(--accent), #1f4f3d);
  box-shadow: 0 0 12px rgba(127,255,212,0.6);
}

.voice-nav button.offline {
  color: var(--muted);
  border-color: rgba(255,255,255,0.06);
  background: linear-gradient(150deg, rgba(12,12,18,0.85), rgba(6,8,14,0.9));
}

.voice-nav button.offline::before {
  background: radial-gradient(circle, var(--warning), #5a4316);
  box-shadow: 0 0 6px rgba(251,191,36,0.35);
}

.voice-nav button:disabled,
.voice-nav button.locked {
  color: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.04);
  background: linear-gradient(140deg, rgba(6,8,14,0.8), rgba(4,6,12,0.92));
  cursor: not-allowed;
  opacity: 0.4;
}

.voice-nav button:disabled::before,
.voice-nav button.locked::before {
  background: rgba(255,255,255,0.06);
  box-shadow: none;
}

.voice-nav button.active {
  border-color: var(--accent3);
  color: var(--text);
  background: linear-gradient(155deg, rgba(24,38,52,0.95), rgba(10,16,28,0.95));
  box-shadow:
    0 0 0 1px rgba(127,255,212,0.35),
    0 12px 24px rgba(127,255,212,0.18),
    0 0 24px rgba(255,136,228,0.18);
  transform: translateY(-1px);
}

.voice-nav button.active::before {
  background: radial-gradient(circle, var(--accent3), #3a2745);
  box-shadow: 0 0 12px rgba(255,136,228,0.45);
  transform: scale(1.2);
}

.solo-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.solo-panel .cluster {
  height: 100%;
}

@media (max-width: 780px) {
  body { padding: 12px; }
  .top-bar { grid-template-columns: 1fr; }
  .brand { width: 100%; }
  .awaken-wrap { width: 100%; }
  .global-controls { width: 100%; }
  main.layout { grid-template-columns: 1fr; }
}