:root {
  --bg: #0d0a08;
  --panel: #171210;
  --ember: #ff6a1a;
  --ember-soft: #ffb347;
  --flame: #ff3d00;
  --ink: #f5ede4;
  --dim: #a89880;
  --line: #2c221b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.hero {
  text-align: center;
  padding: 2.2rem 1rem 1.2rem;
  background: radial-gradient(ellipse at 50% -20%, rgba(255, 106, 26, 0.25), transparent 60%);
}

.flame {
  width: 54px; height: 54px; margin: 0 auto 0.6rem;
  background: radial-gradient(circle at 50% 70%, var(--ember-soft) 0%, var(--ember) 45%, var(--flame) 75%, transparent 78%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  filter: blur(1px);
}

.hero h1 { margin: 0; font-size: 1.7rem; letter-spacing: 0.02em; }
.hero .sub { margin: 0.2rem 0; color: var(--ember-soft); font-weight: 600; }
.hero .tag { margin: 0.4rem auto 0; max-width: 34rem; color: var(--dim); font-size: 0.95rem; }

.tabs {
  display: flex; gap: 0.5rem; justify-content: center;
  padding: 0.6rem; position: sticky; top: 0; z-index: 5;
  background: rgba(13, 10, 8, 0.96);
  border-bottom: 1px solid var(--line);
}

.tabs button {
  flex: 1; max-width: 12rem;
  padding: 0.85rem 0.5rem;
  font-size: 1.05rem; font-weight: 600;
  color: var(--dim); background: var(--panel);
  border: 1px solid var(--line); border-radius: 0.7rem;
}

.tabs button.active {
  color: #1a0e05; background: linear-gradient(180deg, var(--ember-soft), var(--ember));
  border-color: var(--ember);
}

main { max-width: 44rem; margin: 0 auto; padding: 1rem 1rem 3rem; }

.tab { display: none; }
.tab.active { display: block; }

h2 { font-size: 1.3rem; margin: 0.4rem 0 0.2rem; }
.dim { color: var(--dim); font-size: 0.95rem; }

.field { display: block; margin: 0.9rem 0; font-weight: 600; }

.field input[type="text"], .field select, .field textarea {
  display: block; width: 100%; margin-top: 0.35rem;
  padding: 0.8rem; font-size: 1rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 0.6rem;
}

.field input[type="file"] {
  display: block; width: 100%; margin-top: 0.35rem;
  padding: 0.8rem; background: var(--panel);
  border: 1px dashed var(--ember); border-radius: 0.6rem;
}

.btnrow { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0; }

button {
  padding: 0.85rem 1.2rem; font-size: 1.02rem; font-weight: 600;
  color: var(--ink); background: #241b14;
  border: 1px solid var(--line); border-radius: 0.7rem;
  touch-action: manipulation;
}

button.primary {
  color: #1a0e05; background: linear-gradient(180deg, var(--ember-soft), var(--ember));
  border-color: var(--ember);
}

button:disabled { opacity: 0.45; }
button.danger { border-color: #7a2a1a; color: #ff9a7a; }

.status { min-height: 1.6em; font-weight: 600; }
.status.ok { color: #8fe388; }
.status.err { color: #ff9a7a; }

#analysis-result { margin-top: 1rem; }
.arow {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem;
}
.arow span { color: var(--dim); flex-shrink: 0; }
.arow b { font-weight: 600; text-align: right; word-break: break-word; }
.arow.verdict b { color: var(--ember-soft); }

.asset {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.8rem; padding: 0.9rem; margin: 0.8rem 0;
}
.ahead { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.badge {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 2rem; letter-spacing: 0.04em;
}
.badge.voice { background: #3a1c10; color: var(--ember-soft); }
.badge.instrument { background: #10283a; color: #7ac3ff; }
.badge.preset { background: #2a103a; color: #d79aff; }
.adetail { color: var(--dim); font-size: 0.93rem; margin: 0.5rem 0; }
.arowbtns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.arowbtns button { padding: 0.6rem 0.9rem; font-size: 0.92rem; }

.grid3 { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px) { .grid3 { grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; } }

#render-meta { margin: 0.6rem 0; }

footer {
  max-width: 44rem; margin: 0 auto; padding: 1.5rem 1rem 3rem;
  color: var(--dim); font-size: 0.9rem; border-top: 1px solid var(--line);
}
footer a { color: var(--ember-soft); }

/* ---- DAW: transport, timeline, mixer (ember and ice dark studio) ---- */
:root { --ice: #7ac3ff; }

.transport {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.8rem; padding: 0.7rem 0.9rem; margin: 0.8rem 0;
}
.transport button { min-width: 5.2rem; }
#tp-time { font-variant-numeric: tabular-nums; font-weight: 600; }
#tp-bpm { font-weight: 700; color: var(--ember-soft); }

.timeline {
  background: #0a0705;
  border: 1px solid var(--line); border-radius: 0.8rem;
  padding: 0.7rem; margin: 0.8rem 0; overflow: hidden;
}
.tl-grid { display: flex; }
.tl-labels { width: 3.6rem; flex-shrink: 0; display: flex; flex-direction: column; }
.tl-lanes { position: relative; flex: 1; }
.tl-label {
  height: 2.9rem; margin-bottom: 0.45rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--dim);
}
.tl-label:last-child { margin-bottom: 0; }
.tl-label.tl-voice, .mx-name.tl-voice { color: var(--ember-soft); }
.tl-label.tl-inst, .mx-name.tl-inst { color: var(--ice); }
.tl-label.tl-drums, .mx-name.tl-drums { color: #d79aff; }
.tl-lane { position: relative; height: 2.9rem; margin-bottom: 0.45rem; background: #120d09; border-radius: 0.45rem; }
.tl-lane:last-child { margin-bottom: 0; }
.tl-region {
  position: absolute; top: 0.3rem; bottom: 0.3rem; border-radius: 0.4rem;
  display: flex; align-items: center; padding: 0 0.5rem;
  font-size: 0.8rem; font-weight: 700; text-transform: capitalize;
  white-space: nowrap; overflow: hidden; color: var(--ink);
  border-left: 3px solid var(--ember);
}
.tl-region.ember { background: rgba(255, 106, 26, 0.28); }
.tl-region.ice { background: rgba(122, 195, 255, 0.16); border-left-color: var(--ice); }
.tl-playhead {
  position: absolute; top: 0.4rem; bottom: 0.4rem; left: 0; width: 2px;
  background: var(--ember-soft); box-shadow: 0 0 6px var(--ember);
  z-index: 2; pointer-events: none;
}

.mixer {
  display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.8rem 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.8rem; padding: 0.8rem;
}
.mx-strip {
  flex: 1 1 8rem; min-width: 7.5rem; display: flex; flex-direction: column; gap: 0.5rem;
  background: #120d09; border: 1px solid var(--line); border-radius: 0.6rem; padding: 0.6rem;
}
.mx-strip.mx-master { border-color: var(--ember); }
.mx-name { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.mx-strip input[type="range"] { width: 100%; accent-color: var(--ember); min-height: 2rem; }
.mx-btns { display: flex; gap: 0.4rem; }
.mx-btns button { flex: 1; padding: 0.55rem 0; font-size: 0.9rem; }
.mx-btns button.on { background: var(--ember); color: #1a0e05; border-color: var(--ember); }
#mx-voice-solo.on, #mx-instruments-solo.on, #mx-drums-solo.on { background: var(--ice); border-color: var(--ice); color: #08131c; }

details#session-setup {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.8rem; padding: 0.7rem 0.9rem; margin: 0.8rem 0;
}
details#session-setup summary {
  cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: 0.3rem 0;
  touch-action: manipulation;
}
details#session-setup summary::marker { color: var(--ember); }