/* Stem Studio cinematic interface layer — presentation only. */
:root {
  --bg: #070806;
  --panel: rgba(11, 13, 10, .88);
  --panel-border: rgba(217, 174, 91, .26);
  --panel-border-hover: rgba(242, 204, 128, .62);
  --text: #f7f2e8;
  --muted: #c5c4bc;
  --accent-rose: #efcf93;
  --btn-rose: #d7a74d;
  --btn-rose-hover: #ecc675;
  --btn-blue: #80775a;
  --btn-blue-hover: #a49972;
  --danger-bg: rgba(83, 39, 20, .9);
  --danger-text: #ffe0a4;
}

html { background: #070806; }
body {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(3, 5, 3, .76) 0%, rgba(3, 5, 3, .43) 38%, rgba(3, 5, 3, .32) 100%),
    linear-gradient(180deg, rgba(3, 5, 3, .35), rgba(3, 5, 3, .76)),
    url("stem-studio-cinematic-20261004.jpg") center 43% / cover fixed no-repeat;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at 54% 8%, rgba(230, 177, 70, .10), transparent 44%);
}

.beta-banner {
  background: rgba(9, 10, 8, .72);
  border-bottom-color: rgba(217, 174, 91, .24);
  color: #d9d4c9;
  backdrop-filter: blur(12px);
}
.beta-banner a, footer a { color: #f0c56f; }

main { max-width: 1120px; padding: 2.2rem 1.5rem 4.5rem; }
.back-link { color: #ded1b8; margin-bottom: 2.5rem; }
.back-link:hover { color: #f4d388; }

.hero {
  max-width: 760px;
  margin: 0 auto 2.1rem;
  text-align: left;
  padding: 1rem 0 1.15rem;
}
.badge {
  border-color: rgba(231, 184, 89, .48);
  background: rgba(68, 48, 15, .42);
  color: #f0ca79;
  margin-bottom: 1rem;
}
.hero h1 {
  font-size: clamp(3rem, 7vw, 5.65rem);
  line-height: .95;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0,0,0,.5);
}
.hero .subtitle { max-width: 630px; color: #dedbd2; font-size: 1.17rem; line-height: 1.55; }

.studio-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin: 0 auto 1.5rem;
  max-width: 900px;
}
.studio-flow span {
  color: #d8d2c4;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .8rem .9rem;
  border: 1px solid rgba(217,174,91,.22);
  border-radius: 10px;
  background: rgba(10, 12, 10, .66);
  text-align: center;
  backdrop-filter: blur(8px);
}
.studio-flow span:first-child { color: #251a08; background: linear-gradient(135deg, #f0cd82, #c58d36); border-color: #edc66f; }

.panel {
  background: linear-gradient(135deg, rgba(15, 17, 13, .94), rgba(8, 10, 8, .89));
  border-color: rgba(217, 174, 91, .29);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
  padding: 1.55rem;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(8px);
}
.panel-header { border-bottom: 1px solid rgba(217,174,91,.17); padding-bottom: 1rem; margin-bottom: 1.2rem; }
.panel h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.03em; }
.panel-sub, #track-info, .keyboard-hint, .privacy-note, .render-status { color: #c6c4ba; }
.badge-live { border-color: rgba(240, 190, 91, .50); color: #f2cc7b; background: rgba(91, 61, 13, .34); }
.badge-private { border-color: rgba(167, 192, 151, .48); background: rgba(72, 91, 57, .3); color: #cce0bd; }

.dropzone {
  min-height: 210px;
  border-color: rgba(228, 185, 99, .45);
  border-radius: 13px;
  background: rgba(6, 8, 7, .48);
}
.dropzone:hover, .dropzone.dragover { border-color: #f1ca78; background: rgba(137, 90, 18, .19); }
.dropzone::before { content: "⇧"; color: #f0c56f; font-size: 1.75rem; font-weight: 700; line-height: 1; }
.dropzone-title { color: #f3eee4; font-size: 1.13rem; }
.dropzone-sub { color: #cfc8bb; }

button, .btn { border-radius: 9px; min-height: 44px; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.btn-primary { color: #201607; background: linear-gradient(135deg, #f1cf84, #bd802e); box-shadow: inset 0 1px rgba(255,255,255,.36); }
.btn-primary:hover:not(:disabled) { color: #1c1307; background: linear-gradient(135deg, #ffe0a0, #dca44c); transform: translateY(-1px); }
.btn-secondary { color: #fffaf0; background: #716849; }
.btn-secondary:hover:not(:disabled) { background: #94875f; }
.btn-ghost { color: #ded8cd; border-color: rgba(217,174,91,.36); background: rgba(0,0,0,.12); }
.btn-ghost:hover:not(:disabled) { color: #f7f2e8; border-color: #e7bb63; background: rgba(89,61,15,.21); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #f3c86e; outline-offset: 3px; }

#upload-status { color: #e5dece; }
.progress-track { background: rgba(243, 220, 167, .17); }
.progress-fill { background: linear-gradient(90deg, #a7752e, #f0cf87); }
.privacy-note { border-top-color: rgba(217,174,91,.20); }

#master-controls { background: rgba(86, 63, 23, .28); border-color: rgba(217,174,91,.35); border-radius: 12px; color: #ded8ca; }
.master-label { color: #f2c879; }
.stem-row, .backing-card { background: rgba(4, 6, 5, .48); border-color: rgba(217,174,91,.23); border-radius: 12px; }
.stem-row:hover { border-color: rgba(238,198,112,.48); }
.stem-row.is-selected { border-color: rgba(239, 197, 105, .64); background: rgba(112, 75, 16, .20); }
.stem-row .waveform { background: rgba(0,0,0,.38); }
.stem-row .advanced-controls { border-top-color: rgba(217,174,91,.16); }
.metadata-grid input, .metadata-grid textarea { background: rgba(4,6,5,.65); border-color: rgba(217,174,91,.27); }
.metadata-grid input:focus, .metadata-grid textarea:focus { outline: 2px solid #e4b75e; outline-offset: 2px; }

@media (max-width: 600px) {
  body { background-image: linear-gradient(180deg, rgba(3,5,3,.52), rgba(3,5,3,.78)), url("stem-studio-cinematic-mobile-20261004.jpg"); background-position: 82% 24%; background-attachment: scroll; }
  main { padding: 1.35rem 1rem 3rem; }
  .back-link { margin-bottom: 1.55rem; }
  .hero { padding: .35rem 0 .75rem; margin-bottom: 1.25rem; }
  .hero h1 { font-size: clamp(3rem, 17vw, 4.3rem); }
  .hero .subtitle { font-size: 1.05rem; }
  .studio-flow { grid-template-columns: 1fr; gap: .42rem; }
  .studio-flow span { text-align: left; padding: .7rem .85rem; }
  .panel { padding: 1.1rem; border-radius: 14px; }
  .dropzone { min-height: 190px; padding: 2rem 1rem; }
  #upload-form .btn { width: 100%; }
  #transport .btn, #export-section .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}