@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --pine-950: #0E1C19;
  --pine-900: #12241F;
  --pine-800: #1B332C;
  --pine-700: #274438;
  --sage-300: #A8C9A0;
  --sage-500: #7FA778;
  --coral-500: #FF6B4A;
  --coral-400: #FF8266;
  --cream-100: #F5F0E6;
  --cream-300: #D9D2C4;
  --muted: #85978F;
  --danger: #E0563A;
  --ok: #7FA778;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

body{
  background: var(--pine-950);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(255,107,74,0.08), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(168,201,160,0.06), transparent 45%);
  color: var(--cream-100);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
}

button, input, select{ font-family: inherit; color: inherit; }

/* ---------- Layout ---------- */
.app{ max-width: 1320px; margin: 0 auto; padding: 28px 28px 80px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pine-700);
}

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

.brand-pulse{
  width: 40px; height:40px; border-radius: 50%;
  background: var(--coral-500);
  box-shadow: 0 0 0 0 rgba(255,107,74,0.55);
  animation: pulseRing 2s ease-out infinite;
  flex-shrink:0;
}
@keyframes pulseRing{
  0%{ box-shadow: 0 0 0 0 rgba(255,107,74,0.55); transform: scale(0.9); }
  60%{ box-shadow: 0 0 0 16px rgba(255,107,74,0); transform: scale(1); }
  100%{ box-shadow: 0 0 0 0 rgba(255,107,74,0); transform: scale(0.9); }
}

.brand-text h1{
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; margin: 0; letter-spacing: 0.5px;
}
.brand-text p{ margin: 2px 0 0; font-size: 13px; color: var(--sage-300); }

.topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; }

.field-inline{ display:flex; flex-direction:column; gap:2px; font-size:11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.field-inline input, .field-inline select{
  background: var(--pine-800); border:1px solid var(--pine-700); border-radius: var(--radius-sm);
  padding: 8px 10px; color: var(--cream-100); font-size: 14px; min-width: 100px;
}

.layout{ display:grid; grid-template-columns: 1fr 320px; gap: 24px; align-items:start; }
@media (max-width: 980px){ .layout{ grid-template-columns: 1fr; } .col-debug{ order:-1; } }

.col-main{ display:flex; flex-direction:column; gap:20px; }

/* ---------- Cards ---------- */
.card{
  background: var(--pine-900);
  border: 1px solid var(--pine-700);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.card-title{
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; margin: 0 0 14px;
  display:flex; align-items:center; gap:10px;
}
.card-sub{ font-size: 13px; color: var(--muted); margin: -6px 0 14px; }

.step{
  width: 22px; height:22px; border-radius:50%;
  background: var(--pine-700); color: var(--sage-300);
  font-family: var(--font-mono); font-size: 12px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---------- Buttons ---------- */
.btn{
  border: none; border-radius: 999px; padding: 10px 18px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--coral-500); color: var(--pine-950); }
.btn-primary:hover{ background: var(--coral-400); }
.btn-secondary{ background: var(--sage-300); color: var(--pine-950); }
.btn-ghost{ background: transparent; border: 1px solid var(--pine-700); color: var(--cream-100); }
.btn-ghost:hover{ border-color: var(--sage-300); }
.btn-danger-ghost{ background: transparent; border: 1px solid var(--danger); color: var(--coral-400); }
.btn-tiny{ padding: 5px 10px; font-size: 12px; border-radius: 999px; }
.btn:disabled{ opacity: .4; cursor:not-allowed; transform:none; }

/* ---------- Mode grid ---------- */
.mode-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
@media (max-width:700px){ .mode-grid{ grid-template-columns:1fr; } }
.mode-option input{ position:absolute; opacity:0; pointer-events:none; }
.mode-card{
  display:block; padding: 14px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--pine-700); background: var(--pine-800);
  cursor:pointer; transition: border-color .15s, background .15s;
}
.mode-card strong{ display:block; font-size:14px; margin-bottom:3px; }
.mode-card small{ color: var(--muted); font-size:12px; }
.mode-option input:checked + .mode-card{
  border-color: var(--coral-500); background: rgba(255,107,74,0.08);
}

/* ---------- Source ---------- */
.source-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.source-tab{
  background: var(--pine-800); border:1px solid var(--pine-700); color: var(--muted);
  padding: 8px 16px; border-radius: 999px; cursor:pointer; font-size:13px; font-weight:600;
}
.source-tab.active{ background: var(--coral-500); color: var(--pine-950); border-color: var(--coral-500); }
.source-panel.hidden{ display:none; }

.dropzone{
  border: 1.5px dashed var(--pine-700); border-radius: var(--radius-md);
  padding: 24px; text-align:center; cursor:pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.dragover{ border-color: var(--sage-300); background: rgba(168,201,160,0.05); }
.dropzone p{ margin:0 0 4px; font-size:14px; }
.dropzone small{ color: var(--muted); font-size:12px; }

.field-row{ display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; margin-top:16px; }
.field{ display:flex; flex-direction:column; gap:6px; font-size:12px; color: var(--muted); text-transform:uppercase; letter-spacing:.05em; flex:1; min-width: 160px; }
.field input, .field select{
  background: var(--pine-800); border:1px solid var(--pine-700); border-radius: var(--radius-sm);
  padding: 9px 12px; color: var(--cream-100); font-size:14px; text-transform:none; letter-spacing:normal;
}
.hint{ color: var(--muted); font-size:12px; max-width: 260px; }
.hidden{ display:none !important; }

.template-section{
  border-top: 1px solid var(--pine-700); border-bottom: 1px solid var(--pine-700);
  margin: 18px 0; padding: 16px 0;
}
.template-section h3{ font-family: var(--font-display); font-size:16px; margin:0 0 4px; }

.midi-mixer-section{
  border-top: 1px solid var(--pine-700); margin-top: 18px; padding-top: 16px;
}
.midi-mixer-section h3{ font-family: var(--font-display); font-size:16px; margin:0 0 4px; }
.midi-mixer-list{ display:flex; flex-direction:column; gap:8px; }
.midi-mixer-row{
  display:flex; align-items:center; gap:10px; background: var(--pine-800);
  border:1px solid var(--pine-700); border-radius: var(--radius-md); padding: 8px 12px; flex-wrap:wrap;
}
.midi-mixer-row.muted{ opacity: 0.5; }
.midi-mixer-row .mr-label{ font-family: var(--font-mono); font-size:13px; min-width: 150px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.midi-mixer-row input[type=range]{ flex:1; min-width:100px; }
.midi-mixer-row output{ font-family: var(--font-mono); font-size:12px; color: var(--sage-300); min-width:38px; text-align:right; }
.mr-meter{
  width: 60px; height: 8px; border-radius:99px; background: var(--pine-950);
  border: 1px solid var(--pine-700); overflow:hidden; flex-shrink:0;
}
.mr-meter-fill{
  height:100%; width:0%; border-radius:99px;
  background: linear-gradient(90deg, var(--sage-500), var(--coral-500));
  transition: width .05s linear;
}

.tempo-scale{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:11px; color: var(--muted); padding: 0 2px; }
input[type=range]{ accent-color: var(--coral-500); width:100%; }

/* ---------- Voice grid ---------- */
.voice-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(148px,1fr)); gap:10px; margin-bottom: 22px;
}
.voice-slot{
  background: var(--pine-800); border: 1px solid var(--pine-700); border-radius: var(--radius-md);
  padding: 10px; display:flex; flex-direction:column; gap:6px; align-items:center;
}
.voice-slot.ready{ border-color: var(--ok); }
.voice-slot.muted{ opacity: 0.45; }
.voice-slot.muted .vs-mute{ background: var(--danger); color: var(--cream-100); border-color: var(--danger); }
.voice-slot .vs-label{ font-weight:700; font-family: var(--font-mono); font-size:13px; }
.voice-slot .vs-status{ font-size:10px; color: var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.voice-slot.ready .vs-status{ color: var(--ok); }
.vs-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.vs-icon-btn{
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  display:flex; align-items:center; justify-content:center; font-size: 13px; flex-shrink:0;
  background: var(--pine-700); color: var(--cream-100);
}
.vs-icon-btn:hover{ background: var(--pine-700); outline: 1px solid var(--sage-300); }

.coach-section{ border-top: 1px solid var(--pine-700); padding-top:16px; }
.coach-section h3{ font-family: var(--font-display); font-size:16px; margin: 0 0 4px; }
.coach-toolbar{ margin: 10px 0; }
.coach-list{ display:flex; flex-direction:column; gap:8px; }
.coach-item{
  display:flex; align-items:center; gap:10px; background: var(--pine-800);
  border:1px solid var(--pine-700); border-radius: var(--radius-md); padding: 10px 12px; flex-wrap:wrap;
}
.coach-item input[type=text]{
  background: var(--pine-900); border:1px solid var(--pine-700); border-radius: var(--radius-sm);
  padding:6px 10px; color: var(--cream-100); font-size:13px; flex: 1; min-width:120px;
}
.coach-item input[type=number]{
  background: var(--pine-900); border:1px solid var(--pine-700); border-radius: var(--radius-sm);
  padding:6px 8px; color: var(--cream-100); font-size:13px; width: 90px;
}
.coach-item .cs-status{ font-size:11px; color: var(--muted); min-width: 70px; }
.coach-item.ready .cs-status{ color: var(--ok); }
.cc-position-hint{ font-size:10px; color: var(--muted); }

/* ---------- Mixage ---------- */
.mix-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.mix-slot{ display:flex; flex-direction:column; gap:8px; }
.mix-slot > span{ font-size:13px; color: var(--cream-100); }
.mix-slot output{
  font-family: var(--font-mono); font-size:13px; color: var(--sage-300); align-self:flex-end;
}

/* ---------- Generate ---------- */
.generate-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.progress-wrap{ display:flex; align-items:center; gap:10px; flex:1; min-width:200px; }
.progress-bar{ flex:1; height:8px; background: var(--pine-800); border-radius:99px; overflow:hidden; }
.progress-fill{ height:100%; width:0%; background: var(--coral-500); transition: width .15s linear; }
#progressLabel{ font-size:12px; color: var(--muted); white-space:nowrap; }

.export-result{ margin-top:16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.export-result audio{ flex:1; min-width:240px; }
.checkbox-inline{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--cream-100); margin-top:12px; cursor:pointer; }
.checkbox-inline input{ accent-color: var(--coral-500); }
.stem-links{ display:flex; gap:8px; flex-wrap:wrap; width:100%; }

/* ---------- Debug panel ---------- */
.debug-panel{
  position: sticky; top: 20px;
  background: var(--pine-900); border:1px solid var(--pine-700); border-radius: var(--radius-lg);
  padding: 20px; font-family: var(--font-mono);
}
.debug-title{
  font-family: var(--font-display); font-size:16px; letter-spacing:.04em;
  text-transform: uppercase; margin:0 0 16px; color: var(--sage-300);
}
.debug-pulse-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:18px; }
.debug-pulse{
  width:64px; height:64px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--coral-400), var(--coral-500));
  transform: scale(0.85);
  transition: transform .08s ease-out;
}
.debug-pulse.beat{ transform: scale(1.1); }
#debugBeatLabel{ font-size: 22px; font-weight:600; color: var(--cream-100); }

.debug-list{ margin:0 0 18px; display:flex; flex-direction:column; gap:9px; }
.debug-list > div{ display:flex; justify-content:space-between; gap:8px; font-size:12px; }
.debug-list dt{ color: var(--muted); }
.debug-list dd{ margin:0; color: var(--cream-100); text-align:right; }

.debug-log-wrap h3{ font-family: var(--font-body); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color: var(--muted); margin: 0 0 8px; }
.debug-log{
  background: var(--pine-950); border:1px solid var(--pine-700); border-radius: var(--radius-sm);
  padding: 10px; height: 160px; overflow-y:auto; font-size:11px; color: var(--sage-300);
  display:flex; flex-direction:column-reverse; gap:4px;
}

/* ---------- Dialog ---------- */
dialog{
  background: var(--pine-900); color: var(--cream-100); border:1px solid var(--pine-700);
  border-radius: var(--radius-lg); padding: 24px; width: min(480px, 90vw);
}
dialog::backdrop{ background: rgba(14,28,25,0.7); }
dialog h2{ font-family: var(--font-display); margin-top:0; }
.session-list{ display:flex; flex-direction:column; gap:8px; max-height: 320px; overflow-y:auto; }
.session-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--pine-800); border:1px solid var(--pine-700); border-radius: var(--radius-sm); padding: 10px 12px;
}
.dialog-actions{ margin-top:18px; text-align:right; }