/* ───────────── Import page ───────────── */

.import-page {
  min-height: clamp(420px, 60vh, 704px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 6vw, 78px) clamp(14px, 3vw, 24px) clamp(18px, 3vw, 24px);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 22%, rgba(216, 168, 74, 0.1), transparent 23rem),
    radial-gradient(circle at 8% 45%, rgba(216, 168, 74, 0.06), transparent 22rem),
    radial-gradient(circle at 92% 45%, rgba(216, 168, 74, 0.06), transparent 22rem),
    linear-gradient(180deg, rgba(16, 26, 34, 0.78), rgba(8, 15, 22, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.import-copy {
  text-align: center;
  position: relative;
  z-index: 2;
}

.import-copy h2 {
  margin: 0;
  color: #f1f3f5;
  font-size: clamp(24px, 3.4vw + 8px, 39px);
  line-height: 1.12;
  font-weight: 700;
}

.import-copy h2 span {
  color: var(--gold-bright);
  white-space: nowrap;
}

.import-copy p {
  margin: 16px 0 0;
  color: #a9b0bb;
  font-size: clamp(14px, 1vw + 8px, 18px);
}

.import-card {
  width: min(100%, 1088px);
  margin-top: clamp(20px, 4vw, 58px);
  padding: clamp(14px, 2vw, 19px) clamp(16px, 3vw, 36px) clamp(18px, 2.5vw, 28px);
  border-radius: 13px;
  position: relative;
  z-index: 2;
}

.import-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--glass-line);
}

.stem-choice-row {
  display: grid;
  grid-template-columns: 138px repeat(6, minmax(86px, 1fr));
  gap: 14px;
  align-items: center;
  padding-top: 22px;
}

.stem-choice-row > span {
  color: #d9dde4;
  font-weight: 600;
  white-space: nowrap;
}

.stem-choice {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    rgba(8, 15, 22, 0.34);
  color: currentColor;
  font: inherit;
  font-weight: 700;
  transition:
    border-color var(--t-base) var(--easing),
    background-color var(--t-base) var(--easing),
    box-shadow var(--t-base) var(--easing),
    transform var(--t-fast) var(--easing);
}

.stem-choice:hover {
  transform: translateY(-1px);
  background-color: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 22px color-mix(in srgb, currentColor 10%, transparent);
}

/* Deselected state -- the user has unchecked this stem from the
   "stems to extract" set, so it's greyed out and won't appear in the
   studio dashboard after processing. Maintains layout (still occupies
   its grid slot) so the row doesn't reflow on toggle. */
.stem-choice[aria-pressed="false"] {
  opacity: 0.32;
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: rgba(8, 15, 22, 0.2);
}

.stem-choice[aria-pressed="false"]:hover {
  opacity: 0.55;
}

.stem-choice svg {
  flex: 0 0 auto;
}

.stem-choice.vocals { color: #ff3f46; border-color: rgba(255, 63, 70, 0.28); }
.stem-choice.drums { color: #ff7a1a; border-color: rgba(255, 122, 26, 0.24); }
.stem-choice.bass { color: #ffd04d; border-color: rgba(255, 208, 77, 0.24); }
.stem-choice.guitar { color: #3fc952; border-color: rgba(63, 201, 82, 0.24); }
.stem-choice.piano { color: #974cff; border-color: rgba(151, 76, 255, 0.24); }
.stem-choice.other { color: #3695ff; border-color: rgba(54, 149, 255, 0.24); }

.privacy-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  color: #a6adb7;
  font-size: 15px;
  position: relative;
  z-index: 2;
}

.feature-strip {
  width: min(100%, 1160px);
  min-height: 136px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  margin-top: clamp(22px, 4vw, 54px);
  padding: clamp(16px, 2.4vw, 24px) clamp(18px, 3vw, 46px);
  border-radius: 13px;
  position: relative;
  z-index: 2;
}

.feature-item {
  display: grid;
  grid-template-columns: clamp(40px, 4vw, 68px) 1fr;
  align-items: center;
  gap: clamp(12px, 1.5vw, 24px);
  color: var(--gold);
}

.feature-item svg {
  width: 100%;
  height: auto;
  max-width: 48px;
}

.feature-item + .feature-item {
  border-left: 1px solid var(--gold-line);
  padding-left: clamp(18px, 2.4vw, 42px);
}

.feature-item strong {
  display: block;
  color: var(--ink);
  font-size: clamp(14px, 1vw + 6px, 16px);
  margin-bottom: 6px;
}

.feature-item span {
  color: #a6adb7;
  font-size: clamp(13px, 0.8vw + 8px, 15px);
}

/* The HTML hard-codes <br> in feature descriptions for desktop layout;
   on narrow viewports those forced breaks produce ragged 2-word lines.
   Collapse them so the text wraps naturally. */
@media (max-width: 720px) {
  .feature-item br { display: none; }
}

.wave-lines {
  position: absolute;
  top: 152px;
  width: 32%;
  height: 120px;
  opacity: 0.46;
  background:
    repeating-linear-gradient(108deg, transparent 0 24px, rgba(216, 168, 74, 0.52) 25px 27px, transparent 28px 50px);
  mask-image: radial-gradient(ellipse, black 0 48%, transparent 72%);
}

.wave-left {
  left: 0;
  transform: skewY(-7deg);
}

.wave-right {
  right: 0;
  transform: skewY(7deg);
}

/* Decorative diagonal lines crowd the headline on narrow viewports
   (they're absolutely positioned at top: 152px; width: 32%) -- hide
   them below the tablet breakpoint to keep the headline area clean. */
@media (max-width: 720px) {
  .wave-lines { display: none; }
}

/* ───────────── Now-playing card ───────────── */

.now-playing {
  display: grid;
  grid-template-columns:
    clamp(110px, 11vw, 160px)
    minmax(0, 1.2fr)
    minmax(0, 0.9fr)
    minmax(0, 0.65fr)
    minmax(0, 0.65fr)
    minmax(0, 0.8fr);
  align-items: center;
  gap: 0;
  min-height: 224px;
  padding: 23px 24px;
  border-radius: 12px;
}

.app:not(.is-import) .now-playing {
  flex: 0 0 auto;
  min-height: clamp(120px, 14vh, 160px);
  padding-top: clamp(7px, 1vh, 12px);
  padding-bottom: clamp(7px, 1vh, 12px);
}

.app:not(.is-import) .np-art {
  width: clamp(92px, 13vh, 132px);
  height: clamp(92px, 14vh, 144px);
}

.np-art {
  position: relative;
  width: 154px;
  height: 168px;
  border-radius: 9px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(14, 22, 30, 0.95), rgba(5, 9, 13, 0.96)),
    var(--panel-2);
  flex-shrink: 0;
}
.np-art-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  background: linear-gradient(135deg, #1a1a1a, #0e0e0e);
}
.np-art-img {
  position: absolute;
  inset: 6px;
  width: 100%;
  height: 100%;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain;
  display: none;
  border-radius: 6px;
}
.np-art-img.loaded {
  display: block;
}
.np-art-play {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(216, 168, 74, 0.2);
  transition: transform var(--t-fast) var(--easing), background-color var(--t-base) var(--easing);
}
.np-art-play:hover {
  background: linear-gradient(180deg, #ecc76e, #c78a30);
}
.np-art-play svg {
  margin-left: 2px;
}

.np-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 0 clamp(14px, 2vw, 28px) 0 clamp(16px, 2.2vw, 30px);
  border-right: 1px solid var(--glass-line);
}
.np-title {
  font-size: clamp(19px, 1.45vw, 24px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.np-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-xs);
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.np-play-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  color: #c6cbd2;
  font-size: 14px;
}

.np-scrub {
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  position: relative;
}

.np-scrub span {
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 4px rgba(216, 168, 74, 0.18);
}

.stem-energy,
.analysis-card {
  min-height: clamp(100px, 14vh, 156px);
  padding: 0 clamp(10px, 1.4vw, 24px);
  border-left: 1px solid var(--glass-line);
}

.stem-energy {
  grid-column: 3;
}

.key-card {
  grid-column: 4;
}

.loudness-card {
  grid-column: 5;
}

.beat-card {
  grid-column: 6;
}

.loudness-card.hidden + .beat-card {
  grid-column: 5 / 7;
}

.stem-energy h3,
.analysis-card h3 {
  margin: 0 0 13px;
  color: #c9ced6;
  font-size: 14px;
  text-transform: uppercase;
}

.stem-energy h3 span,
.analysis-card h3 span,
.panel-title span {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  opacity: 0.72;
}

.energy-row {
  display: grid;
  grid-template-columns: 78px 1fr 40px;
  align-items: center;
  gap: 9px;
  margin: 5px 0;
  color: var(--stem-color);
  font-size: 13px;
}

.energy-row span {
  font-weight: 700;
}

.energy-row b {
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, currentColor 0 var(--v, 0%), rgba(148, 163, 184, 0.13) var(--v, 0%) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: background 80ms linear;
}

.energy-row em {
  color: #c8cdd4;
  font-style: normal;
  font-weight: 700;
}

.vocals { --stem-color: #e54249; color: var(--stem-color); }
.drums { --stem-color: #f06a14; color: var(--stem-color); }
.bass { --stem-color: #eab414; color: var(--stem-color); }
.guitar { --stem-color: #5bbf50; color: var(--stem-color); }
.piano { --stem-color: #7f45d8; color: var(--stem-color); }
.other { --stem-color: #3e8dcf; color: var(--stem-color); }
.original { --stem-color: #a8b0bd; color: var(--stem-color); }

.analysis-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.key-card {
  align-items: center;
  text-align: center;
}

.beat-card {
  align-items: center;
  text-align: center;
}

.analysis-card strong {
  color: var(--gold-bright);
  font-size: clamp(17px, 1.7vw, 26px);
  line-height: 1.1;
  font-weight: 500;
}

.analysis-card small {
  color: #b9bfc7;
  font-size: 12px;
}

.confidence-ring {
  width: 66px;
  height: 66px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(
      var(--gold) calc(var(--confidence-pct, 0) * 1%),
      rgba(216, 168, 74, 0.16) 0
    );
  color: #e9edf2;
  isolation: isolate;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.confidence-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--panel);
}

.confidence-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(216, 168, 74, 0.12),
    0 0 14px rgba(216, 168, 74, 0.1);
  pointer-events: none;
}

.confidence-ring span {
  position: relative;
  z-index: 1;
}

.loudness-card strong {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  color: #f0f2f5;
}

.beat-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.beat-values strong {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  color: var(--gold-bright);
  text-align: left;
}

.beat-values strong small {
  display: block;
  margin-top: 0;
  color: #b9bfc7;
}

.np-transport {
  display: flex;
  align-items: center;
  gap: 26px;
  color: #cfd4db;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.np-transport-row {
  display: flex;
  align-items: center;
  gap: 22px;
}
.btn-transport {
  width: 58px;
  height: 58px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color var(--t-base) var(--easing),
    color var(--t-base) var(--easing),
    border-color var(--t-base) var(--easing),
    transform var(--t-fast) var(--easing);
}
.btn-transport:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--line-strong);
}
.btn-transport:active {
  transform: scale(0.94);
}
.btn-transport .pause-icon {
  display: none;
}
.btn-transport.playing .pause-icon {
  display: block;
}
.btn-transport.playing svg:not(.pause-icon) {
  display: none;
}
.btn-transport.playing {
  background: linear-gradient(180deg, #4ade80, #16a34a);
  color: white;
  border-color: #15803d;
  box-shadow: 0 16px 34px rgba(34, 197, 94, 0.22);
}
.btn-transport.stopped {
  background: linear-gradient(180deg, #f87171, #dc2626);
  color: white;
  border-color: #b91c1c;
  box-shadow: 0 16px 34px rgba(239, 68, 68, 0.22);
}
.btn-transport.loop.active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: white;
  border-color: var(--gold-line);
  box-shadow: 0 16px 34px rgba(216, 168, 74, 0.18);
}
.np-time {
  font-size: 13px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
