/* RESET & BODY */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
}
body { 
  background: #222;
  color: #fff;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
   min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow-x: hidden;
}
/* HEADER */
.header.workspace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  width: 100%;
  max-width: 1320px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.preview-mode .header.workspace-topbar,
body.finalized .header.workspace-topbar,
body[data-exported="true"] .header.workspace-topbar,
body[data-render="artifact"] .header.workspace-topbar {
  border-bottom: none;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#logo {
  height: 26px;
  width: auto;
}
.tagline {
  font-size: 0.92rem;
}
#logo,
.tagline {
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* TOGGLE CONTROLS */
.toggle-controls.topbar-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 auto;
}
.topbar-controls label {
  font-size: 12px;
  opacity: 0.8;
  color: #fff;
}
.topbar-help {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  opacity: 0.75;
}
.topbar-help a {
  color: inherit;
  text-decoration: none;
}
.topbar-help a:hover {
  text-decoration: underline;
}
.hero-opacity-fixed-control {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 20;
  width: min(240px, 80vw);
}
.hero-opacity-fixed-control label {
  font-size: 0.85rem;
  font-weight: 600;
}
#heroOpacityRangeFixed {
  width: 100%;
  accent-color: #1ed760;
}
.preview-mode .hero-opacity-fixed-control,
.finalized .hero-opacity-fixed-control,
body[data-exported="true"] .hero-opacity-fixed-control {
  display: none !important;
}
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: #555;
  border-radius: 999px;
  transition: background-color 0.3s ease;
}
.slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.switch input:checked + .slider {
  background-color: #1ed760;
}
.switch input:checked + .slider::before {
  transform: translateX(22px);
}
/* CONTAINER */
.container {
  display: grid;
  grid-template-columns: minmax(320px, 30%) minmax(0, 70%);
  align-items: stretch;
  gap: 28px;
  padding: 20px;
  width: 100%;
  max-width: 1584px;
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .container {
  grid-template-columns: minmax(420px, 40%) minmax(0, 60%);
  gap: 32px;
  max-width: 1760px;
}

:root {
  --workspace-shell-height-base: calc(100vh - 120px);
  --workspace-shell-height-expanded: calc(var(--workspace-shell-height-base) * 1.3);
}

.authoring-rail {
  height: var(--workspace-shell-height-expanded);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 16px;
  overflow-y: auto;
  overflow-x: visible;
  padding-right: 6px;
  scroll-behavior: smooth;
  align-self: start;
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .authoring-rail {
  height: auto;
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
}

.workspace-shell {
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 1032px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  min-height: var(--workspace-shell-height-expanded);
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  padding: 14px;
  overflow: visible;
}

.artifact-stage {
  min-width: 0;
  min-height: 0;
  width: 100%;

  overflow: visible;
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.interface-rail {
  min-width: 0;
  min-height: 0;
  width: 100%;

  position: static;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
}

@media (min-width: 601px) {
  .authoring-rail {
    width: auto;
  }

  .workspace-shell,
  .artifact-stage,
  .interface-rail {
    width: 100%;
  }
}

body.preview-mode .container,
body.finalized .container {
  display: block;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

body.preview-mode .artifact-stage,
body.finalized .artifact-stage {
  margin-left: auto;
  margin-right: auto;
}

body.preview-mode .authoring-rail,
body.finalized .authoring-rail {
  display: none;
}

.region-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
}

.artifact-surface-panel,
.interface-layer-panel {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  padding: 14px;
  box-sizing: border-box;
  box-shadow: none;
}

.interface-layer-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.stage-composition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.artifact-intro {
  width: min(100%, 36rem);
  margin: 0 auto 16px;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0.9;
}

/* Visualization checkpoint: explicit stacked rail panels */
.authoring-rail .hero-reference,
.authoring-rail #mp3-upload-section {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  padding: 14px;
  box-sizing: border-box;
  box-shadow: none;
}

.editor-section {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: visible;
}

.panel-frame {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(8, 10, 16, 0.28);
  padding: 0;
  box-sizing: border-box;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.panel-frame.is-active {
  border-color: rgba(30, 215, 96, 0.3);
  background: rgba(8, 10, 16, 0.42);
  transform: translateY(-1px);
}

.panel-frame.is-hidden {
  display: none;
}

.editor-section.panel-normalized {
  margin-bottom: 0;
  height: 100%;
}

.authoring-rail[data-axis="y"] .panel-frame {
  display: block;
}

.authoring-rail[data-axis="x"] {
  display: block;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 14px;
  padding-right: 0;
  white-space: nowrap;
  scrollbar-gutter: stable;
  scroll-snap-type: x proximity;
}

.authoring-rail[data-axis="x"] .region-label {
  display: block;
  width: fit-content;
  margin-bottom: 14px;
  white-space: normal;
}

.authoring-rail[data-axis="x"] #inputForm {
  display: contents;
}

.authoring-rail[data-axis="x"] .panel-frame {
  display: inline-flex;
  vertical-align: top;
  white-space: normal;
  width: calc(100% - 8px);
  max-width: 36rem;
  min-height: 100%;
  margin-right: 16px;
  scroll-snap-align: start;
}

.authoring-rail[data-axis="x"] .panel-frame:last-child {
  margin-right: 0;
}

.section-header {
  position: relative;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  color: inherit;
}

.section-body {
  display: none;
  padding: 10px;
  overflow: visible;
}

.editor-section.active .section-body {
  display: block;
}

.section-preview {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(12, 14, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  margin-left: 10px;
  z-index: 4;
}

.section-header:hover .section-preview {
  opacity: 1;
}

.authoring-rail > #inputForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.authoring-rail #inputForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.authoring-rail .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.authoring-rail input,
.authoring-rail textarea,
.authoring-rail select {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 6px 8px;
  height: 30px;
}

.authoring-rail textarea {
  height: auto;
  min-height: 55px;
}

.authoring-rail label {
  font-size: 12px;
  margin-bottom: 3px;
  opacity: 0.85;
}

.authoring-rail .form-group {
  margin-bottom: 8px;
}

.authoring-rail .media-uploads,
.authoring-rail .vinyl-controls,
.authoring-rail .ambient-audio-pref,
.authoring-rail .link-form-fields,
.authoring-rail .nft-form-fields,
.authoring-rail .document-uploads-box {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
}
/* SPINNING VINYL */
.vinyl-record {
  position: relative;
}

.vinyl-spin-shell {
  position: relative;
}

.vinyl-spin-shell::before {
  content: none;
}

.vinyl-spin-shell::after {
  content: none;
}

.frame {
  position: relative; width: 300px; height: 300px;
  z-index: 1;
  border-radius: 50%; overflow: hidden; margin-bottom: 20px;
  --label-size: 50.9%;
}
.ring { 
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; 
  animation: spin var(--spin-duration, 1.818s) linear infinite;
  z-index: 1;
}
.vinyl-css-surface {
  animation: none !important;
}
.ring video {
  width: 100%; height: 100%; object-fit: cover;
  animation: none;
}
.ring .vinyl-css-surface {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, #101216 0%, #090a0d 40%, #060608 72%, #0b0c11 100%);
}
.ring .vinyl-css-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 11.2%, rgba(0,0,0,0.24) 11.2% 11.55%, transparent 11.55% 14.4%),
    repeating-radial-gradient(circle, rgba(255,255,255,0.08) 0 0.45px, rgba(0,0,0,0.18) 0.45px 1.1px, transparent 1.1px 2.2px),
    repeating-radial-gradient(circle, rgba(255,255,255,0.03) 0 0.25px, transparent 0.25px 0.9px);
  mix-blend-mode: screen;
  opacity: 0.95;
}
.ring .vinyl-css-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 146deg, rgba(255,255,255,0.34) 0deg, rgba(255,255,255,0.08) 20deg, transparent 62deg, transparent 220deg, rgba(255,255,255,0.14) 278deg, transparent 324deg, rgba(255,255,255,0.24) 360deg),
    radial-gradient(circle at 33% 33%, rgba(150,180,255,0.14), transparent 34%),
    radial-gradient(circle at 70% 72%, rgba(0,0,0,0.22), transparent 42%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

.frame > .vinyl-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  animation: spin var(--spin-duration, 1.818s) linear infinite;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* CUT OUT CENTER (label hole) */
  -webkit-mask-image: radial-gradient(
    circle at center,
    transparent 0 calc(var(--label-size) / 2),
    #000 calc((var(--label-size) / 2) + 0.5%)
  );
  mask-image: radial-gradient(
    circle at center,
    transparent 0 calc(var(--label-size) / 2),
    #000 calc((var(--label-size) / 2) + 0.5%)
  );
}

/* Optional: subtle lighting layer */
.frame > .vinyl-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: var(--label-size); height: var(--label-size); border-radius: 50%; overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--label-opacity, 1);
}

.disc-label {
  opacity: var(--label-opacity, 1);
}

.label-bg {
  opacity: var(--label-bg-opacity, 1);
}

.label-content {
  opacity: 1;
}

/* === LABEL DIAGNOSTIC MODE (SAFE) === */
.text-bg {
  position: absolute; inset: 0; background: #000; border-radius: 50%;
  opacity: var(--label-bg-opacity, 1);
  z-index: 0;
  pointer-events: none;
}

.label.has-label-image .text-bg {
  opacity: 0;
}

/* Center label container */
#centerLabel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  pointer-events: none;
  opacity: var(--label-text-opacity, 1);
  z-index: 1;
}

/* Shared line behavior */
.label-line {
  max-width: 78%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f0f0f0;
}

/* TITLE — primary */
.title-line {
  font-size: clamp(14px, 2.2vw, 22px);
  font-weight: 600;
  line-height: 1.1;
}

/* ARTIST — secondary */
.artist-line {
  font-size: clamp(12px, 1.8vw, 18px);
  font-weight: 400;
  opacity: 0.85;
  line-height: 1.1;
}

/* YEAR — MICRO TYPE (LOCKED) */
.year-line {
  font-size: 10px;       /* 🔒 never scales */
  letter-spacing: 0.08em;
  opacity: 0.55;
  margin-top: 2px;
  color: #f0f0f0;
}

/* Prevent any accidental placeholder interaction inside record */
.label * {
  pointer-events: none;
  user-select: none;
}

.vinyl-controls {
  margin: 20px 0 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  width: 100%;
}
.vinyl-controls h3 {
  margin-bottom: 10px;
  font-size: 1rem;
}
.range-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
}
.range-control {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.range-control input[type="range"] {
  flex: 1;
  accent-color: #1ed760;
}
.range-value {
  min-width: 56px;
  text-align: right;
  font-weight: bold;
}
.range-row label {
  margin: 0;
}

/* AMBIENT AUDIO PREFERENCE */
.ambient-audio-pref {
  margin: 20px 0 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  width: 100%;
}
.ambient-audio-intent {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
}
.ambient-audio-intent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #1ed760;
}
/* Hide in preview mode only - keep visible in edit and finalized modes */
.preview-mode .ambient-audio-pref {
  display: none !important;
}

/* In finalized/minted mode, show the ambient audio toggle in a fixed position */
.finalized .ambient-audio-pref,
body[data-exported="true"] .ambient-audio-pref {
  display: block !important;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  width: auto;
  margin: 0;
}

/* Ensure it remains clickable and interactive */
.finalized .ambient-audio-intent,
body[data-exported="true"] .ambient-audio-intent {
  pointer-events: auto;
  cursor: pointer;
}

/* Minted ambient runtime button (secondary visual hierarchy) */
.ambient-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  opacity: 0.35;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ambient-btn:hover {
  opacity: 0.7;
}

.ambient-btn.needs-interaction {
  opacity: 0.6;
  background: rgba(255, 220, 230, 0.15);
  animation: softPulse 2.4s ease-in-out infinite;
}

@keyframes softPulse {
  0% {
    box-shadow: 0 0 0 rgba(255, 180, 200, 0);
  }
  50% {
    box-shadow: 0 0 8px rgba(255, 180, 200, 0.35);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 180, 200, 0);
  }
}

/* MEDIA UPLOADS */
.media-uploads {
  margin: 20px 0 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  width: 100%;
}
.media-uploads h3 {
  margin-bottom: 10px;
  font-size: 1rem;
}
.upload-field {
  margin-bottom: 12px;
}
.upload-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.upload-field input[type="file"] {
  width: 100%;
  padding: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
  cursor: pointer;
}
.upload-field .file-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Media Uploads box-specific spacing */
.media-uploads-box {
  padding: 20px;
  overflow: visible;
}

.media-uploads-box .upload-field {
  margin-bottom: 18px;
}

.media-uploads-box label {
  margin-bottom: 8px;
}

.media-uploads-box input[type="file"] {
  display: block;
  min-height: 44px;
  height: auto;
  box-sizing: border-box;
}

.media-uploads-box .file-hint {
  margin-top: 0;
}

/* QR + BARCODE */
.codes-container {
  width: 300px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.code { width: 80px; display: none; }
/* INPUT FORM */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  width: 100%;
}
input[type="text"], input[type="file"], input[type="url"], input[type="date"], select, textarea {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  background: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

/* Genre dropdown specific styling */
.genre-select {
  cursor: pointer;
}

.genre-select option {
  background: #333;
  color: #fff;
  padding: 8px;
}

select {
  color: #fff;
  background-color: #111;
}

select option {
  color: #000;
  background: #fff;
}

select:has(option[value=""]:checked) {
  color: rgba(255,255,255,0.45);
}

select:not(:has(option[value=""]:checked)) {
  color: #fff;
}

/* Genre "Other" text input - hidden by default */
#genreInput {
  display: none;
  margin-top: 8px;
}

#genreInput.visible {
  display: block;
}
label {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  margin: 10px 0 5px;
}
/* TOGGLE BUTTON */
#toggleModeBtn {
  font-size: 1.2rem;
  padding: 12px 20px;
  background: #555;
  color: #fff;
  border: 1px solid #444;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* FINALIZE BUTTON */
#finalizeMainBtn {
  font-size: 1.2rem;
  padding: 12px 20px;
  background: radial-gradient(circle at top left, #c8ffdf 0%, #37d67a 38%, #16b35c 70%, #0e7a40 100%);
  color: #fff;
  border: 1px solid #0f8a49;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(29, 185, 84, 0.35), inset 0 2px 6px rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-weight: 700;
  letter-spacing: 0.5px;
  /* Uppercase styling - content remains normal case for accessibility */
  font-variant: small-caps;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#finalizeMainBtn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.35);
  opacity: 0.6;
}
#finalizeMainBtn::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -40%;
  width: 50%;
  height: 220%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 45%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-120%) rotate(10deg);
  transition: transform 0.6s ease;
}
#finalizeMainBtn.is-pressing {
  transform: scale(0.98);
  background: radial-gradient(circle at top left, #9cf2c4 0%, #28c66d 42%, #0f944d 80%, #0b6a38 100%);
}
#finalizeMainBtn:hover::after {
  transform: translateX(260%) rotate(10deg);
}
#finalizeMainBtn:hover {
  box-shadow: 0 16px 32px rgba(29, 185, 84, 0.45), inset 0 2px 6px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px) scale(1.02);
}

/* MODE CONTROLS LAYOUT (NON-FINAL) */
body:not(.finalized) .mode-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(100%, 540px);
  margin: 16px auto 12px;
}
.preview-action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}
body.preview-mode .preview-action-buttons {
  margin-top: 32px;
}
@media (max-width: 768px) {
  .preview-action-buttons {
    flex-direction: column;
    gap: 12px;
  }
  .preview-action-buttons .spinstream-tooltip {
    width: 100%;
    max-width: 320px;
  }
  .preview-action-buttons button {
    width: 100%;
  }
  body.preview-mode .preview-action-buttons {
    margin-top: 24px;
  }
}
/* ----------------------------------------------------
   PREVIEW MODE: Preview action button stack
---------------------------------------------------- */
body.preview-mode .mode-controls {
  width: 100%;
  max-width: none;
  margin: 10px auto 18px;
}

/* Help/Tour button: Hidden - now in bottom links */
body.preview-mode #helpTourButton {
  display: none !important;
}

.preview-indicator {
  display: none;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 6px;
}

body.preview-mode .preview-indicator {
  display: block;
  opacity: 0.75;
  font-size: 0.75rem;
}

@media (max-width: 700px) {
  body.preview-mode #finalizeMainBtn {
    font-size: 1.1rem;
    padding: 12px 24px;
  }
  body.preview-mode #toggleModeBtn {
    font-size: 0.85rem;
    padding: 8px 12px;
  }
}
body:not(.finalized) #finalizeMainBtn {
  font-size: 1.3rem;
  padding: 14px 30px;
}
body:not(.finalized) #toggleModeBtn {
  font-size: 0.95rem;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}
body:not(.finalized) #helpTourButton {
  display: none !important;
}
/* ----------------------------------------------------
   SPINSTREAM TOOLTIP SYSTEM (Additive, Non‑Breaking)
---------------------------------------------------- */
.spinstream-tooltip {
  position: relative;
}
.spinstream-tooltip-text {
  position: absolute;
  bottom: 150%;
  left: 50%;
  background-color: #000;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: normal;
  max-width: 320px;
  z-index: 2000;
  opacity: 0;
  transform-origin: center;
  transform: translate(-50%, 6px);
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: none;
}
.spinstream-tooltip:hover .spinstream-tooltip-text,
.spinstream-tooltip:focus-within .spinstream-tooltip-text {
  opacity: 1;
  transform: translate(-50%, 0);
}
.spinstream-tooltip.is-revealed .spinstream-tooltip-text {
  opacity: 1;
  transform: translate(-50%, 0);
}
.spinstream-tooltip-text .tooltip-title {
  font-weight: 600;
  margin-bottom: 6px;
}
.spinstream-tooltip-text .tooltip-footer {
  margin-top: 6px;
  opacity: 0.9;
}
.spinstream-tooltip-text .mint-tooltip-list {
  margin: 0 0 0 18px;
  padding: 0;
}
/* ----------------------------------------------------
   REVEALABLE CONTENT (Hover / Focus / Tap)
---------------------------------------------------- */
.revealable {
  position: relative;
}
.revealable-content {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: none;
}
.revealable.is-revealed .revealable-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .revealable-content {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .spinstream-tooltip-text {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}
.promo-perm-preview {
  display: none;
  margin-top: 18px;
  gap: 10px;
  flex-direction: column;
  align-items: flex-start;
  color: #f5f5f5;
}
body.preview-mode .promo-perm-preview {
  display: none;
}
.promo-perm-trigger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 14px 42px 14px 16px;
  color: inherit;
  cursor: pointer;
  backdrop-filter: blur(6px);
  position: relative;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}
.promo-perm-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}
.promo-perm-preview.is-revealed .promo-perm-trigger,
.promo-perm-trigger:hover {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.3);
}
.promo-perm-trigger::after {
  content: "↗";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 0.9rem;
  opacity: 0.6;
}
.promo-perm-line {
  font-size: 0.98rem;
  letter-spacing: 0.015em;
  font-weight: 600;
  color: rgba(180, 255, 220, 0.92);
}
.promo-perm-line--muted {
  opacity: 0.78;
}
.promo-perm-line[data-reveal-line="intro"] {
  font-weight: 650;
  color: rgba(214, 255, 240, 0.92);
}
.promo-perm-line[data-reveal-line="q1"],
.promo-perm-line[data-reveal-line="q2"],
.promo-perm-line[data-reveal-line="q3"] {
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
}
.promo-perm-preview.is-revealed .promo-perm-line[data-reveal-line="q1"],
.promo-perm-preview.is-revealed .promo-perm-line[data-reveal-line="q2"],
.promo-perm-preview.is-revealed .promo-perm-line[data-reveal-line="q3"],
.promo-perm-trigger:hover .promo-perm-line[data-reveal-line="q1"],
.promo-perm-trigger:hover .promo-perm-line[data-reveal-line="q2"],
.promo-perm-trigger:hover .promo-perm-line[data-reveal-line="q3"],
.promo-perm-trigger:focus-visible .promo-perm-line[data-reveal-line="q1"],
.promo-perm-trigger:focus-visible .promo-perm-line[data-reveal-line="q2"],
.promo-perm-trigger:focus-visible .promo-perm-line[data-reveal-line="q3"] {
  color: rgba(210, 255, 255, 0.98);
  text-shadow: 0 0 12px rgba(145, 255, 245, 0.35);
  text-decoration: underline;
  text-decoration-color: rgba(145, 255, 245, 0.4);
  text-underline-offset: 3px;
}
.promo-perm-answer {
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  padding-left: 6px;
}
.promo-perm-preview.is-revealed .promo-perm-answer {
  max-height: 200px;
  margin-top: 8px;
}
.promo-perm-line--answer {
  font-size: 1.06rem;
  font-weight: 700;
  color: #fff7d6;
}
.promo-perm-emphasis {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 247, 214, 0.35);
}
/* CTA BUTTON */
.action-btn {
  margin-top: 20px;
  padding: 12px 30px;
  font-size: 1rem;
  border: none;
  background: #ff5722;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}
.action-btn:hover {
  background: #ff7043;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}
/* NFT BUTTON */
.nft-btn {
  font-size: 1.1rem;
  padding: 12px 20px;
  background: #9147ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.nft-btn:hover { background: #a970ff; }
.nft-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}
.preview-mode .nft-form-fields { display: none !important;
}
/* ----------------------------------------------------
   SPINSTREAM FIRST‑TIME WALKTHROUGH OVERLAY
   (Additive, Non‑Breaking)
---------------------------------------------------- */
.walkthrough-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9998;
}


.hero-helper-text {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.hero-helper-text:hover,
.hero-helper-text:focus {
  opacity: 1;
}

.hero-input {
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.walkthrough-card {
  position: fixed;
  top: 80px;
  right: 40px;
  transform: none;
  background: #ffffff;
  color: #111;
  padding: 20px 24px;
  border-radius: 12px;
  width: 320px;
  max-width: 90%;
  z-index: 9999;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  animation: walkthrough-fade-in 0.3s ease;
}
.walkthrough-card h2 {
  margin-bottom: 8px;
  font-size: 1.25rem;
  font-weight: 700;
}
.walkthrough-card p {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 16px;
}
.walkthrough-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.walkthrough-actions button {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
#walkthrough-next {
  background: #1DB954;
  color: white;
}
#walkthrough-skip {
  background: #ddd;
  color: #333;
}
@keyframes walkthrough-fade-in {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ================================
   HERO — FINAL LOOK (USED EVERYWHERE)
================================ */

.hero-preview {
  background: linear-gradient(to bottom right, #111, #333);
  color: #fff;
  text-align: center;
  padding: 4rem 2rem;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  font-family: 'Poppins', sans-serif;
  position: relative;
  width: 100%;
  max-width: 700px;
  animation: fade-in 0.6s ease both;
}
.hero-preview h1 {
  font-family: 'Bebas Neue', cursive;
  font-size: 3rem;
  letter-spacing: 1.5px;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}
.hero-preview p {
  font-size: 1.25rem;
  margin: 1rem 0 2rem;
  font-weight: 300;
}
.hero-preview .btn-primary {
  background: #1DB954;
  color: white;
  padding: 0.9rem 2rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-preview .btn-primary:hover {
  background: #1ed760;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.hero-preview button {
  margin-top: 1.5rem;
  background: transparent;
  color: white;
  border: 1px solid white;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
}

/* LIGHT MODE */
.light-mode {
  background: #f4f4f4;
  color: #111;
}
.light-mode input,
.light-mode label,
.light-mode .action-btn,
.light-mode .nft-btn,
.light-mode .drop-zone {
  background: #fff;
  color: #111;
  border-color: #aaa;
}

/* DROP ZONE */
.drop-zone {
  border: 2px dashed #1DB954;
  padding: 20px;
  text-align: center;
  color: #ccc;
  cursor: pointer;
  margin: 20px auto;
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  transition: background 0.3s ease;
}
.drop-zone:hover {
  background: rgba(29, 185, 84, 0.1);
}
.drop-zone.dragover {
  background: rgba(29, 185, 84, 0.2);
  border-color: #1ed760;
  color: #fff;
}

/* 🔒 MP3 DROP ZONE */
#mp3DropZone {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 5;
}

/* 🔒 MP3 INPUT CONTRACT: must NOT be display:none */
#mp3-upload {
  position: absolute;
  left: -9999px;
}

/* PREVIEW MODE VISIBILITY */
.preview-mode .hero-editor,
.preview-mode .form-grid,
.preview-mode .nft-form-fields,
.preview-mode #inputForm,
.preview-mode .media-uploads,
.preview-mode #mp3-upload-section {
  display: none !important;
}
.preview-mode .hero-preview,
.preview-mode #mp3-player-section {
}
.preview-mode .toggle-controls {
  display: none !important;
} 

/* ✅ FORCE MP3 PLAYER VISIBLE IN PREVIEW */
.preview-mode #mp3-player-section {
  display: flex !important;
}

/* FINAL MODE VISIBILITY — ADD THIS */
.finalized #actionButtonSection {
  display: block !important;
}

.finalized #nftButtonSection,
body[data-exported="true"] #nftButtonSection {
  display: block !important;
  opacity: 1 !important;
}

.finalized #bottomLinksSection,
body[data-exported="true"] #bottomLinksSection {
  display: block !important;
}

/* Hide edit-only helper labels outside edit mode */
body.preview-mode .form-label,
body.finalized .form-label,
body[data-exported="true"] .form-label,
body.preview-mode .field-label,
body.finalized .field-label,
body[data-exported="true"] .field-label {
  display: none !important;
}

/* Fallback helpers (use only if present in DOM) */
.upload-helper,
.input-tag,
.asset-label {
  display: none !important;
}


/* UTILITIES */
.hidden { display: none !important; }

.soft-gate-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  pointer-events: auto;
}

.soft-gate-card {
  background: rgba(17, 17, 17, 0.8);
  color: #fff;
  max-width: 520px;
  width: 100%;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  position: relative;
  text-align: left;
  pointer-events: auto;
}

.soft-gate-card h2 {
  margin: 0 0 12px;
}

.soft-gate-card p {
  margin: 0 0 20px;
  line-height: 1.5;
}

.soft-gate-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.soft-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.soft-gate-primary,
.soft-gate-secondary {
  border-radius: 999px;
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.soft-gate-primary {
  background: #ff6b00;
  color: #fff;
}
#softGateUpgradeBtn {
  background: #a64500;
  opacity: 0.65;
  box-shadow: none;
}

.soft-gate-secondary {
  background: #2b2b2b;
  color: #fff;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fade-in {
  from { transform: translateY(10px); }
  to { transform: translateY(0); }
}

/* FINALIZED MODE */
.finalized .toggle-controls,
.finalized .hero-editor,
.finalized .form-grid,
.finalized .nft-form-fields,
.finalized #inputForm,
.finalized .media-uploads,
.finalized #mp3-upload-section,
.finalized #toggleModeBtn,
.finalized #finalizeMainBtn {
  display: none !important;
}

/* EXCEPTION: Show ambient audio toggle even when parent form is hidden */
.finalized #inputForm .ambient-audio-pref,
body[data-exported="true"] #inputForm .ambient-audio-pref {
  display: block !important;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  width: auto;
  margin: 0;
}

/* ✅ FORCE MP3 PLAYER VISIBLE IN FINAL / MINTED */
.finalized #mp3-player-section {
  display: flex !important;
}
.finalized #heroPreview,
.finalized #actionButtonSection,
.finalized #nftButtonSection,
.finalized #mp3-player-section {
}
/* Section ordering in preview and final modes */
/* Preview mode: Action (1), BottomLinks (2), MP3 (3), NFT/Gallery (4) */
.preview-mode #actionButtonSection {
  order: 1;
}
.preview-mode #bottomLinksSection {
  order: 2;
}
.preview-mode #mp3-player-section {
  order: 3;
  margin-top: 30px;
  margin-bottom: 20px;
}
.preview-mode #nftButtonSection {
  order: 4;
}

/* Finalized mode specific ordering: Action (2), MP3 (3), Gallery/NFT (4), BottomLinks (5) */
.finalized #actionButtonSection {
  order: 2;
}
.finalized #mp3-player-section {
  order: 3;
  margin-top: 30px;
  margin-bottom: 20px;
}
.finalized #nftButtonSection {
  order: 4;
}
.finalized #bottomLinksSection {
  order: 5;
}

/* Exported/Minted mode: Same as finalized - Action (2), MP3 (3), Gallery/NFT (4), BottomLinks (5) */
body[data-exported="true"] #actionButtonSection {
  order: 2;
}
body[data-exported="true"] #mp3-player-section {
  order: 3;
  margin-top: 30px;
  margin-bottom: 20px;
}
body[data-exported="true"] #nftButtonSection {
  order: 4;
}
body[data-exported="true"] #bottomLinksSection {
  order: 5;
}

/* Hide verified checkmark in preview and final modes */
.preview-mode .verified-mint,
.finalized .verified-mint {
  display: none !important;
}

/* Make buttons translucent with opaque/glass-like design in preview and final modes */
.finalized #actionButton,
.finalized #nftButton,
.preview-mode #actionButton,
.preview-mode #nftButton {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.2);
}
.finalized #logo,
.finalized .tagline {
  opacity: 0.06;
  filter: grayscale(100%);
}

.finalized footer {
  font-size: 0.75rem;
opacity: 0.35;
}

#toggleModeBtn:disabled,
#finalizeBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* ✅ Finalize button becomes a status indicator */
.finalized #finalizeBtn {
  display: inline-flex !important;
  pointer-events: none;
  opacity: 0.85;
  cursor: default;
}


body:not(.preview-mode):not(.finalized) #actionButtonSection,
body:not(.preview-mode):not(.finalized) #nftButtonSection {
  display: none !important;
}
#bottomLinksSection {
  display: none;
  margin-top: 14px;
  text-align: center;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.link-pill {
  background: none;
  border: none;
  border-radius: 0;
  padding: 4px 8px;
  color: #fff;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.link-pill:hover {
  color: #1ed760;
}

#copyLinkButton {
  cursor: pointer;
  font: inherit;
}
#heroPreview {
  background-color: rgba(0, 0, 0, 0.3); /* 30% opaque black overlay */
}

#heroPreview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: 0;
}
#heroPreview .hero-content {
  position: relative;
  z-index: 1;
}

#heroPreview {
  position: relative;
  overflow: hidden;
}

#heroPreview::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: black; /* fallback opaque background */
  opacity: 0.5;
  z-index: 0;
}

#heroPreview .hero-content {
  position: relative;
  z-index: 1;
}

#heroPreview {
  background: none !important;
}

#heroPreview {
  background: #111 !important; /* dark flat background */
}

#heroPreview {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

#heroPreview::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 50% black overlay */
  z-index: 0;
}

#heroPreview .hero-content {
  position: relative;
  z-index: 1;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 20% 30%, rgba(160, 80, 255, 0.35), transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(120, 40, 255, 0.25), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(70, 20, 180, 0.25), transparent 50%),
    radial-gradient(circle at 60% 40%, rgba(100, 30, 220, 0.2), transparent 50%);
  animation: nebulaDrift 120s linear infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(white 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: 0.08;
}

@keyframes nebulaDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-5%, 3%, 0) scale(1.05);
  }

  100% {
    transform: translate3d(5%, -4%, 0) scale(1);
  }
}

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

/* HERO OVERLAY GRADIENT */
#heroPreview::before {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2));
}

#copyLinkFeedback {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: #cbe7ff;
  min-height: 1rem;
}

/* BOTTOM LINKS */
.bottom-links {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 16px 0;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(30, 136, 229, 0.2);
  color: #f5f7ff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.link-form-fields {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.finalized .bottom-links {
  display: flex;
}

.finalized #copyLinkSection {
  margin: 0;
}

.finalized #copyLinkButton {
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: 999px;
}

/* MP3 PLAYER */
#mp3-player-section {
  margin-top: 30px;
  text-align: center;
}
body:not(.finalized) #mp3-player-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  opacity: 1;
  transition: opacity 0.25s ease;
}
body:not(.finalized) #mp3-player-section:hover,
body:not(.finalized) #mp3-player-section:focus-within {
  opacity: 1;
}
body:not(.finalized) #mp3-player {
  height: 26px;
  width: min(100%, 320px);
  min-width: 300px; /* Ensure player is always visible */
}
body:not(.finalized) #muteToggle {
  font-size: 0.75rem;
  padding: 4px 10px;
}

/* MP3 Player - Glossy Museum Glass Effect in Preview and Final Modes */
.preview-mode #mp3-player,
.finalized #mp3-player {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1),
    0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0.85;
  transition: all 0.3s ease;
}

.preview-mode #mp3-player:hover,
.finalized #mp3-player:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12) !important;
  transform: scale(1.02);
}


/* DEVICE PREVIEW */
body.portrait-mode .container {
  max-width: 420px;
}

/* Phone View should enforce non-colliding stacked layout even on desktop viewport widths */
body.portrait-mode .container {
  grid-template-columns: 1fr;
  gap: 14px;
}

body.portrait-mode .authoring-rail {
  position: static;
  height: auto;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

body.portrait-mode .workspace-shell,
body.portrait-mode .artifact-stage,
body.portrait-mode .interface-rail {
  width: 100%;
  max-height: none;
  overflow: visible;
}

body.portrait-mode .mode-controls {
  width: 100%;
}

body.portrait-mode .hero-preview {
  max-width: 420px;
}
body.portrait-mode .frame {
  width: 220px;
  height: 220px;
}
body.portrait-mode .codes-container {
  width: 100%;
  justify-content: center;
  gap: 14px;
}

/* SMOOTH FINALIZED MODE */
.toggle-controls,
.hero-editor,
.form-grid,
.nft-form-fields,
#inputForm,
#mp3-upload-section,
#toggleModeBtn {
  transition: opacity 0.3s ease;
}

.link-form-fields {
  margin-top: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.link-form-fields h3 {
  margin-bottom: 8px;
  font-size: 1rem;
}

/* BUTTON HOVER LIFT */
#toggleModeBtn:hover,
#finalizeMainBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

/* FOOTER */
.footer-tagline {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 6px;
}

/* MOBILE POLISH */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    max-width: 700px;
  }

  .authoring-rail,
  .workspace-shell,
  .artifact-stage,
  .interface-rail {
    width: 100%;
  }

  .authoring-rail {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .workspace-shell,
  .artifact-stage {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .interface-rail {
    position: static;
    max-height: none;
    overflow: visible;
  }

  body.preview-mode .container,
  body.finalized .container {
    max-width: 700px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .hero-preview {
    padding: 3rem 1.5rem;
  }

  .hero-preview h1 {
    font-size: 2.2rem;
  }

  .hero-preview p {
    font-size: 1rem;
  }

  #heroPreview {
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem;
    margin: 0 12px;
  }

  #heroPreview .hero-content {
    padding: 1.25rem;
  }

  .codes-container {
    width: 100%;
    justify-content: center;
    gap: 16px;
  }

  .mode-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  #actionButtonSection,
  #nftButtonSection {
    width: 100%;
  }

  .action-btn,
  .nft-btn {
    width: 100%;
  }

  .soft-gate-card {
    padding: 22px;
  }

  .walkthrough-card {
    top: 20px !important;
    right: 20px !important;
    left: 20px !important;
    width: auto !important;
    max-width: calc(100% - 40px) !important;
  }

  /* Mobile-specific button sizing in edit mode */
  body:not(.preview-mode):not(.finalized) #toggleModeBtn {
    font-size: 0.85rem;
    padding: 8px 14px;
    max-width: 100%;
  }

  body:not(.preview-mode):not(.finalized) #finalizeMainBtn {
    font-size: 1rem;
    padding: 10px 18px;
    max-width: 100%;
  }

  /* Ensure buttons don't overflow on mobile */
  .mode-controls button {
    white-space: normal;
    overflow-wrap: break-word;
    min-height: 40px;
  }

  /* Mobile button sizing for action buttons */
  .action-btn {
    font-size: 0.9rem;
    padding: 10px 16px;
  }

  .nft-btn {
    font-size: 0.9rem;
    padding: 10px 16px;
  }

  /* Mobile link pills */
  .link-pill {
    font-size: 0.8rem;
    padding: 6px 10px;
  }

  /* Mobile mute button - smaller to allow easier play button access */
  body:not(.finalized) #muteToggle {
    font-size: 0.65rem;
    padding: 3px 8px;
    min-height: 24px; /* Ensures touch target remains accessible */
  }

  /* Ensure mp3 player section has proper spacing on mobile */
  body:not(.finalized) #mp3-player-section {
    gap: 8px;
    padding: 4px 8px;
  }

  /* Ensure mp3 player stays visible on mobile */
  body:not(.finalized) #mp3-player {
    min-width: 240px;
    width: min(100%, 280px);
  }
}

@media (max-width: 420px) {
  .mode-indicator {
    flex-wrap: wrap;
    gap: 6px;
    text-align: center;
  }

  .mode-indicator .mode-separator {
    display: none;
  }
}

#heroPreview {
  background-color: rgba(0, 0, 0, 0.35); /* 35% transparent black background */
  padding: 2rem;
  border-radius: 12px;
}
#heroPreview .hero-content {
  position: relative;
  z-index: 1;
  color: white;
}

#heroPreview {
  background: none !important;
  padding: 2rem;
}
#heroPreview .hero-content {
  background: none;
  color: white;
  text-align: center;
}

#heroPreview .hero-content {
  background: rgba(0, 0, 0, 0.2); /* semi-transparent for contrast */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 1.5rem;
  color: white;
}

#heroPreview {
  background-color: rgba(0, 0, 0, 0.35);  /* 35% opaque black background */
  padding: 2rem;
  border-radius: 12px;
  color: white;
}
#heroPreview .hero-content {
  background: none;
  position: relative;
  z-index: 1;
}

#heroPreview .btn-primary {
  background-color: #00c853 !important;  /* Bright green CTA */
  color: white !important;
  font-weight: bold;
  z-index: 2;
  position: relative;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  border-radius: 8px;
  opacity: 1 !important;
}

/* Artifact-safe Hero CTA stabilization */
/* 🚫 DO NOT MOVE, REFACTOR, OR TOUCH HERO LOGIC */
body[data-render="artifact"] #previewCTA,
body.finalized #previewCTA,
body[data-exported="true"] #previewCTA {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 1.25rem auto 0 auto;
  text-align: center;
  white-space: normal;
  touch-action: manipulation;
}

/* Editor/Preview: CTA wrapping hardening (do not affect finalized/artifact states) */
body:not([data-render="artifact"]):not(.finalized):not([data-exported="true"]) #previewCTA {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 0.6rem 1.3rem;
  box-sizing: border-box;
}

/* Editor/Preview hero text resilience */
body:not([data-render="artifact"]):not(.finalized):not([data-exported="true"]) #heroPreview .hero-content {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

body:not([data-render="artifact"]):not(.finalized):not([data-exported="true"]) #previewName {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body:not([data-render="artifact"]):not(.finalized):not([data-exported="true"]) #previewTagline {
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  line-height: 1.3;
  margin-top: 0.4rem;
  overflow-wrap: anywhere;
}

/* Mobile hardening */
@media (max-width: 600px) {
  body[data-render="artifact"] #previewCTA,
  body.finalized #previewCTA,
  body[data-exported="true"] #previewCTA {
    font-size: 1rem;
    padding: 14px 18px;
  }
}

/* Restrict opaque background only to the heroPreview container */
#heroPreview {
  background-color: rgba(0, 0, 0, 0.35);
  padding: 2rem;
  border-radius: 12px;
}

/* Restrict any styling effects (like z-index or opacity) to hero text/button only */
#heroPreview .hero-content {
  background: none;
  color: white;
  position: relative;
  z-index: 1;
}
#heroPreview .hero-content {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
}
/* Style CTA button in hero only */
#heroPreview .btn-primary {
  background-color: #00c853 !important;
  color: white !important;
  font-weight: bold;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  border-radius: 8px;
  opacity: 1 !important;
  position: relative;
  z-index: 2;
}

/* Everywhere else: leave all .btn-primary alone */
body .btn-primary:not(#heroPreview .btn-primary) {
  opacity: 1 !important;
  filter: none !important;
}

/* Hero area still gets slight opacity */
#heroPreview {
  background-color: rgba(0, 0, 0, 0.35);
  padding: 2rem;
  border-radius: 12px;
}

/* Hero text remains clean */
#heroPreview .hero-content {
  background: rgba(0, 0, 0, 0.1);
  color: white;
  position: relative;
  z-index: 1;
}

/* GLOBAL CTA button protection — no blur, no fade */
.btn-primary {
  background-color: #00c853 !important;
  color: white !important;
  font-weight: bold;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  border-radius: 8px;
  opacity: 1 !important;
  filter: none !important;
  z-index: 2;
  position: relative;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
}
}

/* Fix finalize-mode CTA (assumes it's inside #finalScreen or similar) */
#finalScreen .btn-primary,
.finalize-section .btn-primary,
body.finalized .btn-primary {
  opacity: 1 !important;
  filter: none !important;
  background-color: #00c853 !important;
  color: white !important;
  font-weight: bold;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  border-radius: 8px;
  position: relative;
  z-index: 3;
}

/* Match any final screen button */
#finalScreen .btn-primary,
.final-cta,
body.finalized .btn-primary,
footer .btn-primary {
  background-color: #00c853 !important;
  color: white !important;
  font-weight: bold;
  opacity: 1 !important;
  filter: none !important;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  border-radius: 8px;
  position: relative;
  z-index: 10;
}

/* 🔒 Lock styling for the real Final screen CTA button */
#actionButton,
.action-btn {
  background-color: #00c853 !important;
  color: white !important;
  font-weight: bold;
  opacity: 1 !important;
  filter: none !important;
} 
/* your existing CSS … ends around line 1055 */



/* ----------------------------------------------------
   Walkthrough Card — Option C (Compact + Raised)
---------------------------------------------------- */
.walkthrough-card {
  transform: scale(0.85) !important;
  top: 60px !important;
}

/* ----------------------------------------------------
   Walkthrough Card Arrow Pointer (Additive)
---------------------------------------------------- */
.walkthrough-card::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 18px solid #ffffff;
  z-index: 9999;
}

/* Force smaller Copy Link button in Final + Minted pages */
body.finalized #copyLinkButton {
  font-size: 0.85rem !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
}

/* ----------------------------------------------------
   Digital Gallery Button Enhancements
---------------------------------------------------- */
.gallery-icon {
  margin-right: 6px;
  font-size: 1.15rem;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide icon in finalized/minted modes for cleaner button */
.finalized .gallery-icon,
body[data-exported="true"] .gallery-icon {
  display: none;
}

#nftButtonSection {
  animation: fadeInGallery 0.4s ease forwards;
  opacity: 0;
}

@keyframes fadeInGallery {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hover glow */
#nftButton:hover {
  box-shadow: 0 0 14px rgba(145, 71, 255, 0.55);
  transform: translateY(-2px);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Gentle pulse (optional) */
#nftButton {
  animation: galleryPulse 3s ease-in-out infinite;
}

@keyframes galleryPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ----------------------------------------------------
   Digital Gallery Modal
---------------------------------------------------- */
.gallery-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.gallery-modal.hidden {
  display: none !important;
}

.gallery-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.gallery-modal-card {
  position: relative;
  background: #1a1a1a;
  color: white;
  padding: 24px;
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  animation: fadeInModal 0.35s ease;
}

.gallery-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
}

@keyframes fadeInModal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------
   Final Mode — Shrink NFT + Copy Link Buttons
---------------------------------------------------- */
.finalized #nftButton {
  font-size: 0.9rem !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
}

.finalized #copyLinkButton {
  font-size: 0.85rem !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
}

/* --- Upload helper hint (hover/focus reveal above file field) --- */
.file-input-wrap {
  position: relative;
}

.media-uploads-box .upload-field {
  position: relative;
}

.media-uploads-box .upload-field .file-hint {
  display: block;
  margin: 0 0 6px;
  font-size: 0.75rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.58);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.media-uploads-box .upload-field:hover .file-hint,
.media-uploads-box .upload-field:focus-within .file-hint {
  opacity: 1;
  transform: translateY(0);
}

/* Light background support */
body.light .media-uploads-box .upload-field .file-hint {
  color: rgba(0, 0, 0, 0.48);
}

/* Default hidden state for gallery section */
#nftButtonSection {
  display: none;
}

/* Mint Overlay */
.mint-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.minted-overlay.hidden {
  display: none !important;
}

.mint-status-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  max-width: min(90vw, 680px);
  white-space: normal;
}

.mint-status-banner.hidden {
  display: none !important;
}

.mint-status-banner.minted {
  background: #2563eb;
}

.mint-status-banner.slow {
  background: #f59e0b;
}

.mint-status-banner.success {
  background: #10b981;
}

.mint-status-banner.failed {
  background: #ef4444;
}

.minted-text {
  margin-top: 14px;
  font-size: 1.2rem;
  color: white;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.minting-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: mintSpin 0.9s linear infinite;
}

@keyframes mintSpin {
  to { transform: rotate(360deg); }
}

/* Minted Badge (Bottom Right) */
.minted-badge {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.minted-badge.hidden {
  display: none !important;
}

#mintedBadge.flicker {
  animation: mintFlicker 0.9s infinite;
}

@keyframes mintFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

body.finalized .minted-badge.hidden,
body[data-exported="true"] .minted-badge.hidden,
body.finalized .minted-badge,
body[data-exported="true"] .minted-badge {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.minted-badge-circle {
  background: radial-gradient(circle at 30% 30%, #f7e9b5, #d4b76a, #b89a4a);
  color: #3a2f0b;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 12px 16px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 215, 100, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  user-select: none;
  text-align: center;
}

/* Minted Badge Tooltip — Terminal / Code Style */
.minted-badge-tooltip {
  background: rgba(0,0,0,0.78);
  color: #b5b5b5;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.55rem;
  font-family: "Courier New", monospace;
  letter-spacing: 0.3px;
  white-space: pre;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);

  position: absolute;
  bottom: 140%; /* moves tooltip above the badge */
  right: 0;
}

.minted-badge:hover .minted-badge-tooltip,
.minted-badge:focus-within .minted-badge-tooltip {
  opacity: 1;
}

.mint-status-report {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10000;
  background: #f7e9b5;
  color: #3a2f0b;
  border: 2px solid #b89a4a;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.mint-status-report.hidden {
  display: none !important;
}

/* Reposition helper tooltips to avoid overlapping buttons */
.spinstream-tooltip {
  position: relative;
}

.spinstream-tooltip-text {
  position: absolute;
  bottom: 180%; /* move far above parent */
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Show on hover (desktop) */
.spinstream-tooltip:hover .spinstream-tooltip-text {
  opacity: 1;
}

/* Hide all helper tooltips in Final mode */
body.finalized .spinstream-tooltip-text {
  display: none !important;
}

/* ----------------------------------------------------
   Minted Overlay (blocks UI during mint)
---------------------------------------------------- */
.minted-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.minted-overlay.hidden {
  display: none !important;
}

.minted-text {
  margin-top: 14px;
  font-size: 1.2rem;
  color: white;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.minting-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: mintSpin 0.9s linear infinite;
}

@keyframes mintSpin {
  to { transform: rotate(360deg); }
}

/* ----------------------------------------------------
   Minted Badge (Bottom Right)
---------------------------------------------------- */
.minted-badge {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.minted-badge.hidden {
  display: none !important;
}

.minted-badge-circle {
  background: radial-gradient(circle at 30% 30%, #f7e9b5, #d4b76a, #b89a4a);
  color: #3a2f0b;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 12px 16px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 215, 100, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  user-select: none;
  text-align: center;
}

/* ----------------------------------------------------
   Minted Badge Tooltip — Terminal / Code Style
   (UPDATED: moved FAR away from Mint/Edit buttons)
---------------------------------------------------- */
.minted-badge-tooltip {
  margin-top: 10px;
  background: rgba(0,0,0,0.78);
  color: #b5b5b5;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.55rem;
  font-family: "Courier New", monospace;
  letter-spacing: 0.3px;
  white-space: pre;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);

  /* NEW: move tooltip UP and AWAY from Mint/Edit buttons */
  position: absolute;
  bottom: 140%;   /* was 6px margin — now MUCH higher */
  right: 0;
}

/* Show tooltip on hover */
.minted-badge:hover .minted-badge-tooltip,
.minted-badge:focus-within .minted-badge-tooltip {
  opacity: 1;
}

/* ----------------------------------------------------
   Walkthrough Card — Compact + Raised
---------------------------------------------------- */
.walkthrough-card {
  transform: scale(0.85) !important;
  top: 60px !important;
}

/* Arrow Pointer */
.walkthrough-card::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 18px solid #ffffff;
  z-index: 9999;
}

/* ----------------------------------------------------
   Tooltip Positioning Fix — Avoid Overlap
---------------------------------------------------- */
.spinstream-tooltip {
  position: relative;
}

.spinstream-tooltip-text {
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.spinstream-tooltip:hover .spinstream-tooltip-text {
  opacity: 1;
}

/* Hide tooltips in Final mode */
body.finalized .spinstream-tooltip-text {
  display: none !important;
}

/* ----------------------------------------------------
   Final Mode — Shrink NFT + Copy Link Buttons
---------------------------------------------------- */
.finalized #nftButton {
  font-size: 0.9rem !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
}

.finalized #copyLinkButton {
  font-size: 0.85rem !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
}
/* ----------------------------------------------------
   Final / Minted Mode — De-emphasize Buttons
---------------------------------------------------- */

/* Shrink Gallery (NFT) button */
.finalized #nftButton,
body[data-exported="true"] #nftButton {
  font-size: 0.9rem !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
}

/* Shrink Copy Link button */
.finalized #copyLinkButton,
body[data-exported="true"] #copyLinkButton {
  font-size: 0.85rem !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
}

/* ----------------------------------------------------
   🎧 MP3 PLAYER — Minted / Final Low-Profile Mode
---------------------------------------------------- */

.finalized #mp3-player,
body[data-exported="true"] #mp3-player {
  width: 220px;
  height: 28px;

  /* REMOVE opacity: 0.35; */
  /* REMOVE filter: grayscale(35%); */

  background: rgba(255, 255, 255, 0.04); /* even more transparent */

  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);

  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;

  padding: 4px 6px;

  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.06),
    0 4px 18px rgba(0, 0, 0, 0.25);

  transition: background 0.25s ease, transform 0.25s ease;
}

/* Wake up on interaction */
.finalized #mp3-player:hover,
.finalized #mp3-player:focus,
.finalized #mp3-player:active,
body[data-exported="true"] #mp3-player:hover,
body[data-exported="true"] #mp3-player:focus,
body[data-exported="true"] #mp3-player:active {
  background: rgba(255, 255, 255, 0.10); /* brighten on hover */
  transform: scale(1.02);
}
/* ----------------------------------------------------
   🎧 MP3 PLAYER — Museum‑Glass (Ultra‑Transparent Except Text)
---------------------------------------------------- */

.finalized #mp3-player,
body[data-exported="true"] #mp3-player {
   ...museum glass styles...
}

#mp3-player-label {
   ...opaque label styles...
}

#mp3-player-label::after {
   ...label line...
}

.finalized #mp3-player:hover,
body[data-exported="true"] #mp3-player:hover {
   ...hover brighten...
}

/* ----------------------------------------------------
   EDIT MODE ONLY LAYOUT TWEAKS
---------------------------------------------------- */

/* Two-column layout for button/edit inputs in Edit mode only */
body[data-mode="edit"] .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

body[data-mode="edit"] .button-row > div {
  flex: 1 1 48%;
  min-width: 160px;
}

/* Keep MP3 upload block aligned to the authoring rail in Edit mode */
body[data-mode="edit"] #mp3-upload-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px;
  background: rgba(12, 14, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
}

body[data-mode="edit"] #mp3-upload-section label {
  font-size: 13px;
}

body[data-mode="edit"] #mp3-upload-section input[type="file"] {
  font-size: 12px;
  padding: 6px;
}

body[data-mode="edit"] #mp3-upload-section .file-hint {
  font-size: 11px;
}

body[data-mode="edit"] #mp3DropZone {
  padding: 12px;
  font-size: 13px;
}

/* Shrink audio player in Edit mode */
body[data-mode="edit"] #mp3-player {
  transform: scale(0.85);
  opacity: 0.6;
}
/* ─────────────────────────────────────────────
   LEGAL FOOTER — SINGLE LINE · BOTTOM · HOVER ONLY
   ───────────────────────────────────────────── */

/* Bottom pin across entire viewport */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: none; /* passive container */
  z-index: 10;
}

/* ─────────────────────────────────────────────
   LEGAL FOOTER — SINGLE LINE · BOTTOM · HOVER ONLY
   ───────────────────────────────────────────── */

/* Bottom pin across entire viewport */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: none; /* passive container */
  z-index: 10;
}

/* ─────────────────────────────────────────────
   LEGAL FOOTER — SINGLE LINE · BOTTOM · HOVER ONLY
   HIDDEN EVERYWHERE UNLESS INTENTIONALLY HOVERED
   ───────────────────────────────────────────── */

/* Bottom pin across entire viewport */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: none; /* passive container */
  z-index: 10;
}

/* Legal line itself (hidden by default) */
.legal-footer {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 0.55rem;
  line-height: 1;
  letter-spacing: 0.02em;

  padding: 6px 12px;
  text-align: center;

  color: rgba(255, 255, 255, 0.45);

  opacity: 0;                 /* 🔒 hidden everywhere */
  user-select: none;
  pointer-events: auto;       /* needed for hover */
  transition: opacity 0.35s ease;
}

/* Reveal ONLY on intentional hover at bottom */
footer:hover .legal-footer {
  opacity: 0.45;
}

/* Quiet support email */
.legal-footer .support-email {
  opacity: 0.9;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Build label — unobtrusive, right-aligned, hidden on exported artifacts */
.build-label {
  float: right;
  font-size: 0.5rem;
  opacity: 0.5;
  font-family: monospace;
  letter-spacing: 0.04em;
}

/* Optional: hide completely on very small screens */
@media (max-width: 480px) {
  footer {
    display: none;
  }
}

/* ============================================================
   QR CODE MODAL & THUMBNAIL STYLING
   ============================================================ */

/* QR Thumbnail Container */
.qr-thumbnail-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.qr-thumbnail-container:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.qr-thumbnail {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.qr-thumbnail-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  text-align: center;
}

/* QR Modal */
.qr-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.qr-modal.hidden {
  display: none !important;
}

.qr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
}

.qr-modal-card {
  position: relative;
  background: #1a1a1a;
  color: white;
  padding: 32px;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: fadeInModal 0.35s ease;
  text-align: center;
}

.qr-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: white;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  transition: color 0.2s ease;
}

.qr-modal-close:hover {
  color: #1ed760;
}

.qr-modal-card h2 {
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.qr-modal-canvas {
  display: block;
  margin: 0 auto 16px;
  background: white;
  padding: 16px;
  border-radius: 8px;
}

.qr-modal-hint {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Hide QR thumbnail in edit mode, show in preview/final */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .qr-thumbnail-container {
  display: none !important;
}

/* ============================================================
   FORM FIELD MANDATORY/OPTIONAL STYLING
   ============================================================ */

.field-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.field-span {
  grid-column: 1 / -1;
}

.field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.field-instruction {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  line-height: 1.4;
  /* Hidden by default */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Reveal helper text on hover or focus */
.field-group:hover .field-instruction,
.field-group:focus-within .field-instruction {
  opacity: 1;
  max-height: 100px; /* Enough for 2-3 lines */
}

.required-mark {
  color: #ff5555;
  font-weight: bold;
  transition: color 0.3s ease;
}

/* Change required mark to green when field is successfully filled */
.field-mandatory input.valid-input ~ .field-label .required-mark,
.field-mandatory textarea.valid-input ~ .field-label .required-mark,
.field-mandatory select.valid-input ~ .field-label .required-mark,
.field-mandatory input:valid:not(:placeholder-shown) + .field-label .required-mark,
.field-mandatory textarea:valid:not(:placeholder-shown) + .field-label .required-mark,
.field-mandatory select:valid:not([value=""]) + .field-label .required-mark {
  color: #5fa672;
}

/* Also change the entire label color when field is valid */
.field-mandatory input.valid-input ~ .field-label,
.field-mandatory textarea.valid-input ~ .field-label,
.field-mandatory select.valid-input ~ .field-label,
.field-mandatory input:valid:not(:placeholder-shown) + .field-label,
.field-mandatory textarea:valid:not(:placeholder-shown) + .field-label,
.field-mandatory select:valid:not([value=""]) + .field-label {
  color: rgba(95, 166, 114, 0.9);
}

.optional-mark {
  color: rgba(255, 255, 255, 0.5);
  font-weight: normal;
  font-size: 0.8rem;
}

/* Mandatory field styling - subtle pink/red tint */
.field-mandatory input,
.field-mandatory textarea,
.field-mandatory select {
  background: rgba(255, 240, 240, 0.08) !important;
  border: 1px solid rgba(255, 100, 100, 0.3);
  transition: all 0.2s ease;
}

.field-mandatory input:focus,
.field-mandatory textarea:focus,
.field-mandatory select:focus {
  background: rgba(255, 240, 240, 0.15) !important;
  border-color: rgba(255, 120, 120, 0.6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 100, 100, 0.2), 0 2px 8px rgba(255, 100, 100, 0.15);
}

/* Optional field styling - greyish/off-white fill */
.field-optional input,
.field-optional textarea,
.field-optional select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
}

.field-optional input:focus,
.field-optional textarea:focus,
.field-optional select:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(102, 179, 255, 0.6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 179, 255, 0.2), 0 2px 8px rgba(102, 179, 255, 0.15);
}

/* Ensure proper grid layout with field groups */
.form-grid .field-group {
  margin: 0;
}

/* Light mode adjustments */
.light-mode .field-mandatory input,
.light-mode .field-mandatory textarea,
.light-mode .field-mandatory select {
  background: rgba(255, 230, 230, 0.4) !important;
  border: 1px solid rgba(200, 50, 50, 0.3);
  color: #111;
}

.light-mode .field-optional input,
.light-mode .field-optional textarea,
.light-mode .field-optional select {
  background: rgba(240, 240, 240, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #111;
}

.light-mode .field-instruction {
  color: rgba(0, 0, 0, 0.65);
}

.light-mode select option {
  background: #f0f0f0;
  color: #111;
  padding: 8px;
}

/* ============================================================
   🔒 SPINSTREAM — GUARDED VISUAL LAYER
   Safe polish + containment
   (Late-binding, additive only)

   RULES:
   - This block MUST appear exactly once
   - This block MUST be the final CSS in the file
   - DO NOT apply filter/transform/perspective to <body>
   - DO NOT move or reorder CSS above this block
   - DO NOT modify hero layout or positioning
   - DO NOT allow automation to duplicate this section

   STATES:
   - Edit: body:not(.preview-mode):not(.finalized)
   - Preview: body.preview-mode:not(.finalized)
   - Final / Artifact Minted state body.finalized OR body[data-exported="true"]
   ============================================================ */


/* ------------------------------------------------------------
   🔒 HERO CAPSULE — HARD CONTAINMENT
------------------------------------------------------------ */
#heroPreview,
#heroPreview * {
  box-sizing: border-box;
}

#heroPreview {
  position: relative;
  overflow: hidden;
}


/* ------------------------------------------------------------
   🎛️ BUTTON SURFACE — SAFE STATE SCOPING ONLY
------------------------------------------------------------ */

/* Base surface (all modes) */
#finalizeMainBtn,
#toggleModeBtn,
#actionButton,
#nftButton {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

/* EDIT — clarity forward */
body:not(.preview-mode):not(.finalized) #finalizeMainBtn {
  box-shadow:
    0 12px 26px rgba(29, 185, 84, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

/* PREVIEW — complete, calm */
body.preview-mode:not(.finalized) #finalizeMainBtn {
  box-shadow:
    0 10px 22px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

/* FINAL / MINTED — museum quiet */
body.finalized #finalizeMainBtn,
body[data-exported="true"] #finalizeMainBtn,
body.finalized #actionButton,
body[data-exported="true"] #actionButton,
body.finalized #nftButton,
body[data-exported="true"] #nftButton {
  background: linear-gradient(135deg, rgba(147, 112, 219, 0.25), rgba(138, 43, 226, 0.20)) !important;
  border: 1px solid rgba(147, 112, 219, 0.5);
  box-shadow:
    0 4px 12px rgba(147, 112, 219, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.1);
  opacity: 1;
  color: rgba(230, 220, 255, 0.95);
}

/* Preview should mirror minted button surface for aBoxOfMints */
body.preview-mode:not(.finalized) #nftButton {
  background: linear-gradient(135deg, rgba(147, 112, 219, 0.25), rgba(138, 43, 226, 0.20)) !important;
  border: 1px solid rgba(147, 112, 219, 0.5);
  box-shadow:
    0 4px 12px rgba(147, 112, 219, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.1);
  color: rgba(230, 220, 255, 0.95);
  opacity: 1;
  background-clip: padding-box;
}


/* ------------------------------------------------------------
   🎧 MP3 PLAYER — PROTECTED BEHAVIOR
------------------------------------------------------------ */

#mp3-player {
  border-radius: 999px;
  transition:
    opacity 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

/* Preview */
body.preview-mode #mp3-player {
  opacity: 0.85;
}

/* Final / Minted */
body.finalized #mp3-player,
body[data-exported="true"] #mp3-player {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.05),
    0 4px 18px rgba(0,0,0,0.25);
  opacity: 0.65;
}

/* Intentional wake-up only */
body.finalized #mp3-player:hover,
body[data-exported="true"] #mp3-player:hover {
  opacity: 0.9;
  background: rgba(255,255,255,0.10);
}
/* ============================================================
   Minted Badge — Authority Glow + Certificate Shimmer (ADD ONLY)
   Targets ONLY the yellow Minted badge.
   ============================================================ */

/* Keep size the same; add stronger "seal" presence */
.minted-badge-circle {
  position: relative; /* needed for pseudo-elements */
  overflow: hidden;   /* shimmer stays inside the circle */
  isolation: isolate; /* keeps glow layers behaving */

  /* Authority glow (stronger, layered, still tasteful) */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),          /* crisp rim */
    0 0 18px rgba(255, 214, 120, 0.42),           /* warm aura */
    0 0 34px rgba(255, 200, 80, 0.22),            /* wider halo */
    0 10px 26px rgba(0, 0, 0, 0.45);              /* lift off bg */

  /* Slightly more "certificate ink" contrast */
  text-shadow:
    0 1px 0 rgba(255,255,255,0.25),
    0 -1px 0 rgba(0,0,0,0.18);
}

/* Outer halo ring (does NOT change size; it glows outward) */
.minted-badge-circle::before {
  content: "";
  position: absolute;
  inset: -10px;              /* extends outward for halo */
  border-radius: 999px;
  background: radial-gradient(circle,
    rgba(255, 235, 160, 0.35) 0%,
    rgba(255, 210, 110, 0.22) 35%,
    rgba(255, 180, 70, 0.10) 60%,
    rgba(255, 180, 70, 0.00) 75%
  );
  filter: blur(6px);
  z-index: -1;               /* behind the badge */
  pointer-events: none;
  opacity: 0.95;
}

/* Shimmer sweep (only visual; no size change) */
.minted-badge-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;

  /* diagonal reflective band */
  background: linear-gradient(120deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 38%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.00) 62%,
    rgba(255,255,255,0.00) 100%
  );
  transform: translateX(-130%);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: mintedShimmerSweep 2.8s ease-in-out infinite;
}

/* Pause shimmer unless hovered (optional: comment this block out if you want constant shimmer) */
.minted-badge:not(:hover) .minted-badge-circle::after {
  animation-play-state: paused;
  opacity: 0.20; /* faint sheen when idle */
  transform: translateX(-110%);
}

/* On hover: a touch more pop, still not bigger */
.minted-badge:hover .minted-badge-circle {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 22px rgba(255, 225, 140, 0.60),
    0 0 44px rgba(255, 190, 80, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.48);
}

/* Motion keyframes */
@keyframes mintedShimmerSweep {
  0%   { transform: translateX(-140%); opacity: 0.20; }
  35%  { opacity: 0.55; }
  55%  { opacity: 0.45; }
  100% { transform: translateX(140%);  opacity: 0.18; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .minted-badge-circle::after {
    animation: none !important;
    opacity: 0.18;
    transform: translateX(-110%);
  }
}

/* ------------------------------------------------------------
   🔐 MINTED ARTIFACT LOCK
------------------------------------------------------------ */

body.minted-immutable *,
body[data-exported="true"] * {
  animation-play-state: paused !important;
}

/* Allow spinning vinyl to continue in minted mode */
body.minted-immutable .ring,
body.minted-immutable .ring video,
body.minted-immutable .ring .vinyl-css-surface,
body.minted-immutable .vinyl-overlay,
body[data-exported="true"] .ring,
body[data-exported="true"] .ring video,
body[data-exported="true"] .ring .vinyl-css-surface,
body[data-exported="true"] .vinyl-overlay {
  animation-play-state: running !important;
}


/* ------------------------------------------------------------
   🧠 HERO STATE DECORATORS (INTENTIONALLY EMPTY)
------------------------------------------------------------ */

body.preview-mode #heroPreview {
  /* preview-only visuals may be added HERE only */
}

body.finalized #heroPreview,
body[data-exported="true"] #heroPreview {
  /* minted-only visuals may be added HERE only */
}


/* ============================================================
   END SPINSTREAM — GUARDED VISUAL LAYER
   ============================================================ */

/* MOBILE SAFETY PATCH — ADD ONLY */
@supports (height: 100svh) {
  body.finalized,
  body[data-exported="true"] {
    min-height: 100svh;
    height: auto;
  }
}

/* ============================================================
   SPINSTREAM FINAL / MINTED CLARITY PATCH — ADD ONLY
   ============================================================ */

/* Note: Section ordering is defined earlier in the CSS (lines ~989-1040)
   to avoid duplication and ensure single source of truth for order values. */

#actionButtonSection:empty,
#mp3-player-section:empty,
#bottomLinksSection:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.finalized:not([data-exported="true"]) #actionButton {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1),
    0 6px 18px rgba(0, 0, 0, 0.25);
}

body[data-exported="true"] #actionButton {
  background: rgba(37, 99, 235, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body[data-exported="true"] #actionButton:hover {
  background: rgba(29, 78, 216, 0.88) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

body[data-exported="true"] #actionButton:active {
  background: rgba(30, 64, 175, 0.92) !important;
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

body[data-exported="true"] #actionButton:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

#helperStateWhisper {
  position: fixed;
  left: 24px;
  bottom: 120px;
  max-width: 360px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0.2px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 900;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  display: none;
  animation: stateWhisperDrift 7s ease-in-out infinite;
  white-space: pre-line;
}

body.finalized #helperStateWhisper,
body[data-exported="true"] #helperStateWhisper {
  display: block;
}

body.finalized #helperStateWhisper::before {
  content: "Final state.\A" \
           "Mint to create a one-of-one SPINSTREAMS PROMOPERM.\A" \
           "This page becomes a permanent public reference.";
}

body[data-exported="true"] #helperStateWhisper::before {
  content: "Minting SpinStream PromoPerm.\A" \
           "Immutable and shareable.\A" \
           "Verified by the gold seal with timestamped metadata.";
}

@keyframes stateWhisperDrift {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@media (max-width: 600px) {
  #helperStateWhisper {
    left: 16px;
    right: 16px;
    bottom: 110px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #helperStateWhisper {
    animation: none;
  }
}

/* ============================================================
   SPINSTREAM FINAL / MINTED — HIDE AUTHORING UPLOAD UI (ADD ONLY)
   ============================================================ */

body.finalized .media-uploads,
body[data-exported="true"] .media-uploads {
  display: none !important;
}

body.finalized .media-uploads .upload-field,
body.finalized .media-uploads label,
body.finalized .media-uploads input[type="file"],
body.finalized .media-uploads .file-hint,
body[data-exported="true"] .media-uploads .upload-field,
body[data-exported="true"] .media-uploads label,
body[data-exported="true"] .media-uploads input[type="file"],
body[data-exported="true"] .media-uploads .file-hint {
  display: none !important;
}  
/* ============================================================
   SPINSTREAM FINAL / MINTED CLARITY PATCH — ADD ONLY
   ============================================================ */

/* Note: Section ordering is defined earlier in the CSS (lines ~989-1040)
   to avoid duplication and ensure single source of truth for order values. */

/* Collapse empty sections */
#actionButtonSection:empty,
#mp3-player-section:empty,
#bottomLinksSection:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* CTA states */
body.finalized:not([data-exported="true"]) #actionButton {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1),
    0 6px 18px rgba(0, 0, 0, 0.25);
}

body[data-exported="true"] #actionButton {
  background: rgba(37, 99, 235, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body[data-exported="true"] #actionButton:hover {
  background: rgba(29, 78, 216, 0.88) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

body[data-exported="true"] #actionButton:active {
  background: rgba(30, 64, 175, 0.92) !important;
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

body[data-exported="true"] #actionButton:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

/* ============================================================
   STATE WHISPER — FINAL / MINTED
   ============================================================ */

#helperStateWhisper {
  position: fixed;
  left: 24px;
  bottom: 120px;
  max-width: 360px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0.2px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 900;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  display: none;
  white-space: pre-line;
  animation: stateWhisperDrift 7s ease-in-out infinite;
}

body.finalized #helperStateWhisper,
body[data-exported="true"] #helperStateWhisper {
  display: block;
}

body.finalized #helperStateWhisper::before {
  content:
    "Final state.\A"
    "Mint to create a one-of-one SPINSTREAMS PROMOPERM.\A"
    "This page becomes a permanent public reference.";
}

body[data-exported="true"] #helperStateWhisper::before {
  content:
    "Minting SpinStream PromoPerm.\A"
    "Immutable and shareable.\A"
    "Verified by the gold seal with timestamped metadata.";
}

@keyframes stateWhisperDrift {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@media (max-width: 600px) {
  #helperStateWhisper {
    left: 16px;
    right: 16px;
    bottom: 110px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #helperStateWhisper {
    animation: none;
  }
}

/* ============================================================
   FINAL / MINTED — HIDE AUTHORING UPLOAD UI (ADD ONLY)
   ============================================================ */

body.finalized .media-uploads,
body[data-exported="true"] .media-uploads {
  display: none !important;
}

body.finalized .media-uploads .upload-field,
body.finalized .media-uploads label,
body.finalized .media-uploads input[type="file"],
body.finalized .media-uploads .file-hint,
body[data-exported="true"] .media-uploads .upload-field,
body[data-exported="true"] .media-uploads label,
body[data-exported="true"] .media-uploads input[type="file"],
body[data-exported="true"] .media-uploads .file-hint {
  display: none !important;
}

/* ============================================================
   EDIT MODE ERGONOMICS — FINAL, CLEAN, SAFE
   (EDIT MODE ONLY · ADD ONLY)
   ============================================================ */

/* ============================================================
   1) QUIET LABELS (EDIT MODE ONLY)
   ============================================================ */

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) label,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-label,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .range-row label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.2px;
  opacity: 0.6;
  transition: opacity 160ms ease, color 160ms ease;
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.field-group:hover label,
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.field-group:focus-within label,
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.range-row:hover label,
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.range-row:focus-within label {
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
}

/* ============================================================
   2) VINYL + LABEL OPACITY CONTROLS — SIDE DOCK (LEFT)
   ============================================================ */

body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls {
  position: fixed;
  top: 120px;
  left: 20px;
  width: 240px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  z-index: 1200;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls h3 {
  font-size: 0.75rem;
  margin-bottom: 8px;
  opacity: 0.7;
}

/* ============================================================
   2a) SHRINK VINYL CONTROLS — PREVENT HERO OVERLAP
   ============================================================ */

/* Tighter row spacing */
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls .range-row {
  gap: 4px;
  padding: 6px 0;
}

/* Smaller label font */
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls .range-row label {
  font-size: 0.8rem;
}

/* Tighter control spacing */
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls .range-control {
  gap: 8px;
}

/* Smaller range input */
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls .range-control input[type="range"] {
  height: 4px;
  cursor: pointer;
}

/* Smaller value display */
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls .range-value {
  min-width: 44px;
  font-size: 0.85rem;
}

/* Smaller WebKit slider thumb */
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls .range-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1ed760;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Smaller WebKit slider track */
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls .range-control input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

/* Smaller Firefox slider thumb */
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls .range-control input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1ed760;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Smaller Firefox slider track */
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls .range-control input[type="range"]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

/* ============================================================
   3) HERO OPACITY CONTROL — DO NOT MOVE (RESTORE ORIGINAL ROLE)
   ============================================================ */

body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.hero-opacity-fixed-control {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: auto;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: none;
  pointer-events: auto;
}

/* ============================================================
   4) RESPONSIVE SAFETY
   ============================================================ */

@media (max-width: 900px) {
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls {
    left: 12px;
    width: 200px;
    max-height: 45vh;
    padding: 8px 10px;
  }
  
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls h3 {
    font-size: 0.7rem;
    margin-bottom: 6px;
  }
  
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls .range-row label {
    font-size: 0.75rem;
  }
  
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls .range-value {
    font-size: 0.75rem;
    min-width: 40px;
  }
}

@media (max-width: 600px) {
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls {
    left: 10px;
    width: 180px;
    top: auto;
    bottom: 80px;
    padding: 6px 8px;
  }
  
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls h3 {
    font-size: 0.65rem;
    margin-bottom: 4px;
  }
  
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls .range-row {
    gap: 3px;
    padding: 4px 0;
  }
  
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls .range-row label {
    font-size: 0.7rem;
  }
  
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls .range-control {
    gap: 6px;
  }
  
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls .range-value {
    font-size: 0.7rem;
    min-width: 38px;
  }
  
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls .range-control input[type="range"]::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
  }
  
  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .vinyl-controls .range-control input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
  }

  body:not(.preview-mode):not(.finalized):not([data-exported="true"])
  .hero-opacity-fixed-control {
    bottom: 20px;
    right: 10px;
  }
}
/* ============================================================
   EDIT MODE — HERO OPACITY CONTROL SCROLL ATTACHED
   (Override only this control)
   ============================================================ */

body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.hero-opacity-fixed-control {
  position: relative;      /* move WITH page flow */
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;

  margin: 24px auto 32px;  /* space it naturally */
  width: calc(100% - 40px);
  max-width: 370px;        /* reduced from 520px (~29% smaller) */

  z-index: 1;              /* no overlay behavior */
  
  /* Reduce internal spacing for smaller footprint */
  padding: 8px 10px;       /* reduced from 12px 14px */
  gap: 6px;                /* reduced from 8px */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.hero-opacity-fixed-control label {
  font-size: 0.75rem;      /* reduced from 0.85rem */
}

/* ============================================================
   EDIT MODE ONLY — ALIGN OPACITY PANELS TO SPINNING RECORD
   SAFE · CSS-ONLY · NO HERO / NO JS TOUCH
   ============================================================ */

/* Anchor to spinning record */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .record-wrapper {
  position: relative;
}

/* LEFT PANEL — Vinyl + Label Opacity */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .vinyl-opacity-panel {
  position: absolute !important;
  left: -220px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

/* RIGHT PANEL — Hero Opacity */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-panel {
  position: absolute !important;
  right: -220px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

/* ============================================================
   EDIT MODE ONLY — PANELS SCROLL WITH PAGE (IN-FLOW)
   ============================================================ */

/* Ensure record area participates in normal flow */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .record-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LEFT PANEL — Vinyl + Label Opacity (SCROLLS WITH PAGE) */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .vinyl-opacity-panel {
  position: relative !important;
  margin-right: 24px;
  top: auto;
  left: auto;
  transform: none;
  z-index: 2;
}

/* RIGHT PANEL — Hero Opacity (SCROLLS WITH PAGE) */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-panel {
  position: relative !important;
  margin-left: 24px;
  top: auto;
  right: auto;
  transform: none;
  z-index: 2;
}

/* HARD OVERRIDE — disable any fixed/sticky behavior in edit mode */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) 
.vinyl-opacity-panel,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) 
.hero-opacity-panel {
  position: relative !important;
}

/* ============================================================
   END PATCH
   ============================================================ */

/* ============================================================
   EDIT MODE ONLY — PANELS SCROLL WITH PAGE (IN-FLOW)
   ============================================================ */

/* Ensure record area participates in normal flow */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .frame {
  position: relative;
}

/* LEFT PANEL — Vinyl + Label Opacity (SCROLLS WITH PAGE) */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .vinyl-controls {
  position: relative !important;
  margin-right: 24px;
  top: auto;
  left: auto;
  transform: none;
  z-index: 2;
}

/* RIGHT PANEL — Hero Opacity (SCROLLS WITH PAGE) */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control {
  position: relative !important;
  margin-left: 24px;
  top: auto;
  right: auto;
  bottom: auto;
  transform: none;
  z-index: 2;
}

/* HARD OVERRIDE — disable any fixed/sticky behavior in edit mode */
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.vinyl-controls,
body:not(.preview-mode):not(.finalized):not([data-exported="true"])
.hero-opacity-fixed-control {
  position: relative !important;
}

/* ============================================================
   UI PATCH: FIX OPACITY LEVERS OVERLAPPING HERO IN EDIT MODE
   Date: 2026-01-13
   Protocol: ADD-ONLY, CSS-ONLY, EDIT MODE ONLY
   Target: Prevent left/right opacity panels from overlaying hero editor
   Scope: Edit mode only; Preview/Final/Minted unchanged
   ============================================================ */

/* Reset fixed positioning for vinyl controls (left panel) in Edit mode */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .vinyl-controls {
  position: static !important;
  top: unset !important;
  left: unset !important;
  right: unset !important;
  bottom: unset !important;
  transform: none !important;
  margin: 20px auto !important;
  max-width: 600px !important;
  width: calc(100% - 40px) !important;
  max-height: none !important;
  overflow-y: visible !important;
  z-index: 1 !important;
}

/* Reset fixed positioning for hero opacity control (right panel) in Edit mode */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control {
  position: static !important;
  top: unset !important;
  left: unset !important;
  right: unset !important;
  bottom: unset !important;
  transform: none !important;
  margin: 20px auto 32px !important;
  max-width: 600px !important;
  width: calc(100% - 40px) !important;
  z-index: 1 !important;
}

/* Ensure hero-reference container allows natural flow in Edit mode */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-reference {
  position: relative !important;
  z-index: auto !important;
}

/* Ensure hero editor is not obscured in Edit mode */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-editor {
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================================
   END UI PATCH: OPACITY LEVERS FIX
   ============================================================ */

/* ============================================================
   VALIDATION TOAST — MISSING REQUIRED FIELDS
   ============================================================ */

.validation-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  background: rgba(20, 20, 20, 0.98);
  border: 2px solid rgba(255, 85, 85, 0.6);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(255, 85, 85, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 10000;
  animation: toastSlideIn 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.validation-toast.hidden {
  display: none !important;
}

.validation-toast-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255, 85, 85, 0.3);
}

.validation-toast-icon {
  font-size: 1.5rem;
  color: #ff5555;
  flex-shrink: 0;
}

.validation-toast-header h3 {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.validation-toast-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.validation-toast-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.validation-toast-body {
  padding: 16px 20px;
}

.validation-toast-body p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.validation-toast-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.validation-toast-body li {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: rgba(255, 85, 85, 0.15);
  border: 1px solid rgba(255, 85, 85, 0.3);
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.validation-toast-body li:hover {
  background: rgba(255, 85, 85, 0.25);
  border-color: rgba(255, 85, 85, 0.5);
  transform: translateX(4px);
}

.validation-toast-body li:last-child {
  margin-bottom: 0;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobile responsive */
@media (max-width: 600px) {
  .validation-toast {
    top: 60px;
    width: 95%;
    max-width: none;
  }
  
  .validation-toast-header {
    padding: 12px 16px 10px;
  }
  
  .validation-toast-body {
    padding: 12px 16px;
  }
  
  .validation-toast-header h3 {
    font-size: 1rem;
  }
  
  .validation-toast-body p,
  .validation-toast-body li {
    font-size: 0.85rem;
  }
}

/* ============================================================
   FORM-LEVEL HELP TEXT
   ============================================================ */

.form-help-container {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(30, 136, 229, 0.1);
  border: 1px solid rgba(30, 136, 229, 0.3);
  border-radius: 8px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Show on form hover or focus within */
#inputForm:hover .form-help-container,
#inputForm:focus-within .form-help-container {
  opacity: 1;
  max-height: 200px;
}

.form-help-text {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.form-help-text .required-mark {
  display: inline;
  font-size: inherit;
}

/* Hide in preview and finalized modes */
.preview-mode .form-help-container,
.finalized .form-help-container,
body[data-exported="true"] .form-help-container {
  display: none !important;
}

/* ============================================================
   EDIT MODE — DARKER INPUT BOXES FOR BETTER READABILITY
   ============================================================ */

/* Darken all inputs in Edit mode for better visibility against dynamic backgrounds */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) input[type="text"],
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) input[type="url"],
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) input[type="date"],
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) input[type="file"],
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) select,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) textarea {
  background: rgba(0, 0, 0, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Mandatory fields - slightly darker with red tint */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-mandatory input,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-mandatory textarea,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-mandatory select {
  background: rgba(10, 0, 0, 0.85) !important;
  border: 1px solid rgba(255, 100, 100, 0.35);
}

/* Optional fields - slightly lighter with blue tint */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-optional input,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-optional textarea,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-optional select {
  background: rgba(0, 5, 15, 0.75) !important;
  border: 1px solid rgba(100, 150, 255, 0.25);
}

/* Focus states with better visibility */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) input:focus,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) textarea:focus,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) select:focus {
  background: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(30, 215, 96, 0.6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 215, 96, 0.2), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Placeholder text visibility */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) input::placeholder,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Select dropdown options */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) select option {
  background: #1a1a1a;
  color: #fff;
}

/* File input styling for better visibility */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) input[type="file"] {
  padding: 10px;
  cursor: pointer;
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) input[type="file"]::file-selector-button {
  background: rgba(30, 215, 96, 0.2);
  border: 1px solid rgba(30, 215, 96, 0.4);
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
  transition: all 0.2s ease;
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) input[type="file"]::file-selector-button:hover {
  background: rgba(30, 215, 96, 0.3);
  border-color: rgba(30, 215, 96, 0.6);
}

/* ============================================================
   HIDE BRANDING TOGGLE FEATURE
   ============================================================ */
/* Hide SpinStream logo and branding text in Preview/Final/Minted states when toggle is enabled */

/* Hide the logo (in header) when branding toggle is on */
body[data-hide-branding="true"].preview-mode #logo,
body[data-hide-branding="true"].finalized #logo,
body[data-hide-branding="true"][data-exported="true"] #logo {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease;
}

/* Hide the tagline (in header) when branding toggle is on */
body[data-hide-branding="true"].preview-mode .tagline,
body[data-hide-branding="true"].finalized .tagline,
body[data-hide-branding="true"][data-exported="true"] .tagline {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease;
}

/* Hide the "Minting SpinStream PromoPerm" overlay text (#helperStateWhisper) when branding toggle is on */
body[data-hide-branding="true"].preview-mode #helperStateWhisper,
body[data-hide-branding="true"].finalized #helperStateWhisper,
body[data-hide-branding="true"][data-exported="true"] #helperStateWhisper {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease;
}

/* ============================================================
   END HIDE BRANDING TOGGLE FEATURE
   ============================================================ */

/* ========================================
   PHASE 1: MODERN HELPER UI FOR FORM FIELDS
   Edit-only visibility badges, character counters, and helper text
   HOVER-ONLY to reduce visual clutter
   INVITATIONAL and subtle styling
   ======================================== */

/* Visibility badge styling - softer, smaller, more subtle */
.field-visibility-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.field-group:hover .field-visibility-badge,
.field-group:focus-within .field-visibility-badge {
  opacity: 0.8;
}

/* Hide visibility badges when field is successfully filled */
.field-mandatory input.valid-input ~ .field-label .field-visibility-badge,
.field-mandatory textarea.valid-input ~ .field-label .field-visibility-badge,
.field-mandatory select.valid-input ~ .field-label .field-visibility-badge,
.field-mandatory input:valid:not(:placeholder-shown) ~ .field-label .field-visibility-badge,
.field-mandatory textarea:valid:not(:placeholder-shown) ~ .field-label .field-visibility-badge,
.field-mandatory select:valid:not([value=""]) ~ .field-label .field-visibility-badge,
.field-group input:valid:not(:placeholder-shown) ~ .field-label .field-visibility-badge,
.field-group textarea:valid:not(:placeholder-shown) ~ .field-label .field-visibility-badge,
.field-group select:valid:not([value=""]) ~ .field-label .field-visibility-badge,
input:valid:not(:placeholder-shown) + .field-visibility-badge,
textarea:valid:not(:placeholder-shown) + .field-visibility-badge,
select:valid:not([value=""]) + .field-visibility-badge {
  opacity: 0;
  pointer-events: none;
}

/* Invitational badge colors - soft, muted tones */
.badge-required {
  background: rgba(255, 193, 7, 0.08);
  color: #c89000;
  border: 1px solid rgba(255, 193, 7, 0.15);
}

.badge-preview {
  background: rgba(52, 199, 89, 0.08);
  color: #2a9d5f;
  border: 1px solid rgba(52, 199, 89, 0.15);
}

.badge-metadata {
  background: rgba(142, 142, 147, 0.08);
  color: #7a7a7f;
  border: 1px solid rgba(142, 142, 147, 0.15);
}

.badge-shows-after-mint {
  background: rgba(255, 204, 0, 0.08);
  color: #ccaa00;
  border: 1px solid rgba(255, 204, 0, 0.15);
}

/* Character counter styling - smaller, more subtle */
.field-char-counter {
  font-size: 0.65rem;
  color: #9e9e9e;
  margin-top: 2px;
  text-align: right;
  opacity: 0.4;
  transition: opacity 0.2s ease;
  font-weight: 400;
}

.field-group:hover .field-char-counter,
.field-group:focus-within .field-char-counter {
  opacity: 0.7;
}

.field-char-counter.approaching-limit {
  color: #d0a000;
  font-weight: 500;
  opacity: 0.8;
}

.field-char-counter.at-limit {
  color: #e0a000;
  font-weight: 500;
  opacity: 0.9;
}

/* Enhanced field instruction styling - HOVER ONLY, smaller, invitational */
.field-instruction {
  font-size: 0.7rem;
  color: #9e9e9e;
  margin-top: 3px;
  line-height: 1.3;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  font-weight: 400;
}

.field-group:hover .field-instruction,
.field-group:focus-within .field-instruction {
  opacity: 0.8;
  max-height: 200px;
}

.field-instruction-constraint {
  display: block;
  font-size: 0.65rem;
  color: #a0a0a5;
  margin-top: 1px;
  font-style: italic;
  font-weight: 300;
}

/* Reassurance text styling - HOVER ONLY, smaller, softer */
.field-reassurance {
  display: block;
  font-size: 0.65rem;
  color: #5fa672;
  margin-top: 3px;
  padding: 4px 8px;
  background: rgba(52, 199, 89, 0.05);
  border-radius: 3px;
  border-left: 2px solid rgba(52, 199, 89, 0.3);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  font-weight: 400;
}

.field-group:hover .field-reassurance,
.field-group:focus-within .field-reassurance {
  opacity: 0.75;
  max-height: 100px;
}

/* Hide helper UI in non-edit modes */
body.preview-mode .field-visibility-badge,
body.finalized .field-visibility-badge,
body[data-exported="true"] .field-visibility-badge,
body.preview-mode .field-char-counter,
body.finalized .field-char-counter,
body[data-exported="true"] .field-char-counter,
body.preview-mode .field-reassurance,
body.finalized .field-reassurance,
body[data-exported="true"] .field-reassurance {
  display: none !important;
}

/* Template text styling (prefill) */
.template-text {
  color: #8e8e93;
  font-style: italic;
  opacity: 0.6;
}

/* Mint ID validation feedback - invitational, softer colors and sizing */
.mint-id-validation {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 400;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.mint-id-validation.valid {
  background: rgba(52, 199, 89, 0.06);
  color: #5fa672;
  border: 1px solid rgba(52, 199, 89, 0.2);
}

.mint-id-validation.invalid {
  background: rgba(255, 152, 0, 0.06);
  color: #d0a000;
  border: 1px solid rgba(255, 152, 0, 0.2);
}

.mint-id-validation-icon {
  font-size: 0.9rem;
}

/* Hide validation feedback in non-edit modes */
body.preview-mode .mint-id-validation,
body.finalized .mint-id-validation,
body[data-exported="true"] .mint-id-validation {
  display: none !important;
}

/* ============================================
   EDIT MODE: Reduce helper UI visual weight by 20-50%
   ============================================ */
/* Apply only in Edit mode (when NOT in preview-mode, finalized, or exported) */
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .mint-id-validation {
  font-size: 0.65rem; /* Was 0.75rem - reduced by ~13% */
  padding: 4px 8px; /* Was 6px 10px - reduced by ~33% */
  margin-top: 3px; /* Was 4px - reduced by 25% */
  opacity: 0.85; /* Slightly reduced opacity for less visual weight */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .mint-id-validation-icon {
  font-size: 0.75rem; /* Was 0.9rem - reduced by ~17% */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-visibility-badge {
  font-size: 0.55rem; /* Was 0.6rem - reduced by ~8% */
  padding: 1px 5px; /* Was 1px 6px - slight reduction */
  opacity: 0.35; /* Was 0.5 - reduced by 30% */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-group:hover .field-visibility-badge,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-group:focus-within .field-visibility-badge {
  opacity: 0.6; /* Was 0.8 - reduced by 25% */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .required-mark {
  font-size: 0.9em; /* Slight reduction in relative size */
  opacity: 0.85; /* Reduced intensity */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-char-counter {
  font-size: 0.6rem; /* Was 0.65rem - reduced by ~8% */
  opacity: 0.3; /* Was 0.4 - reduced by 25% */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-group:hover .field-char-counter,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-group:focus-within .field-char-counter {
  opacity: 0.5; /* Was 0.7 - reduced by ~29% */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-instruction {
  font-size: 0.65rem; /* Was 0.7rem - reduced by ~7% */
  margin-top: 2px; /* Was 3px - reduced by 33% */
  line-height: 1.25; /* Was 1.3 - slightly tighter */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-group:hover .field-instruction,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-group:focus-within .field-instruction {
  opacity: 0.65; /* Was 0.8 - reduced by ~19% */
  max-height: 150px; /* Was 200px - reduced by 25% */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-instruction-constraint {
  font-size: 0.6rem; /* Was 0.65rem - reduced by ~8% */
  margin-top: 0px; /* Was 1px - reduced */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-reassurance {
  font-size: 0.6rem; /* Was 0.65rem - reduced by ~8% */
  margin-top: 2px; /* Was 3px - reduced by 33% */
  padding: 3px 6px; /* Was 4px 8px - reduced by 25% */
}

body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-group:hover .field-reassurance,
body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .field-group:focus-within .field-reassurance {
  opacity: 0.6; /* Was 0.75 - reduced by 20% */
  max-height: 80px; /* Was 100px - reduced by 20% */
}

/* Live feedback input styling - subtle, invitational */
input.valid-input {
  border-color: rgba(52, 199, 89, 0.4) !important;
  box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.1) !important;
  background: rgba(52, 199, 89, 0.03) !important;
}

input.invalid-input {
  border-color: rgba(255, 152, 0, 0.4) !important;
  box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.1) !important;
}

/* Override field-mandatory styling when field is successfully filled */
.field-mandatory input.valid-input,
.field-mandatory textarea.valid-input,
.field-mandatory select.valid-input {
  border-color: rgba(52, 199, 89, 0.4) !important;
  background: rgba(52, 199, 89, 0.03) !important;
}

.field-mandatory input:valid:not(:placeholder-shown),
.field-mandatory textarea:valid:not(:placeholder-shown),
.field-mandatory select:valid:not([value=""]) {
  border-color: rgba(100, 200, 100, 0.3) !important;
  background: rgba(10, 25, 10, 0.3) !important;
}

/* Export Verification Panel */
.export-verification-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.export-verification-panel h3 {
  margin: 0 0 16px 0;
  font-size: 1.2rem;
  color: #fff;
}

.export-verification-log {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #d0d0d0;
}

.export-verification-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.export-verification-item:last-child {
  border-bottom: none;
}

.export-verification-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.export-verification-icon.success {
  color: #34c759;
}

.export-verification-icon.failure {
  color: #ff3b30;
}

.export-verification-label {
  flex: 1;
}

.export-verification-summary {
  margin-top: 20px;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
}

.export-verification-summary.success {
  background: rgba(52, 199, 89, 0.15);
  color: #34c759;
  border: 1px solid rgba(52, 199, 89, 0.3);
}

.export-verification-summary.failure {
  background: rgba(255, 59, 48, 0.15);
  color: #ff3b30;
  border: 1px solid rgba(255, 59, 48, 0.3);
}

.export-verification-close {
  margin-top: 16px;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

.export-verification-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Hide verification panel overlay */
.export-verification-panel.hidden {
  display: none;
}

@media (max-width: 600px) {
  /* Preview CTA (artifact/finalized/exported preview) */
  body[data-render="artifact"] #previewCTA,
  body.finalized #previewCTA,
  body[data-exported="true"] #previewCTA {
    width: 100%;
    max-width: min(420px, calc(100vw - 32px));
    box-sizing: border-box;

    /* allow wrapping + prevent "stacking" */
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.25 !important;

    /* auto-size within safe bounds */
    font-size: clamp(0.92rem, 4vw, 1.05rem);

    /* ensure it can grow taller if it becomes 2 lines */
    height: auto !important;
    min-height: 44px;

    padding: 12px 16px;
    text-align: center;
  }
}

/* Test Mode Banner */
#test-mode-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100001;
  background: #f59e0b;
  color: #1a1a1a;
  text-align: center;
  padding: 8px 40px 8px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

#test-mode-banner.hidden {
  display: none !important;
}

#test-mode-banner-dismiss {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: #1a1a1a;
  line-height: 1;
  padding: 2px 6px;
}

/* ============================================================
   MOBILE TOOLTIP DE-CLUTTER — 390 px MINT CTA PROTECTION
   Append-only. Scoped to narrow viewports only.
   Contracts acknowledged:
     - HERO_3+1_CONTRACT.md
     - SPINSTREAM_EXPORT_MINT_RULE_OF_LAW.md
   No JS / HTML / hero IDs / mint-flow / Stripe / OnlyUno touched.
   ============================================================ */

@media (max-width: 430px) {

  /* 1. General tooltip bubbles — constrain width so they
        cannot overflow the viewport or intercept touch targets. */
  .spinstream-tooltip-text {
    max-width: min(80vw, 260px);
    white-space: normal;
    pointer-events: none;
  }

  /* 2. Mode-toggle instruction bubble ("Switch between Edit Mode
        and Preview Mode.") — hidden on narrow viewports.
        At 390 px this bubble floats into the Mint CTA region;
        the toggle button itself is self-explanatory at this size. */
  #toggleModeBtn ~ .spinstream-tooltip-text {
    display: none !important;
  }

  /* 3. Mint CTA tooltip (#mintTooltip) — anchor above the button
        so it can never drop over or below the Mint control. */
  #mintTooltip {
    bottom: calc(100% + 8px);
    top: auto;
    left: 50%;
    transform: translate(-50%, 0);
    max-width: min(88vw, 280px);
    white-space: normal;
    font-size: 0.82rem;
    pointer-events: none;
  }
}

/* ----------------------------------------------------
   Slim/Mobile Fix: move specific helper tooltips to the side
   (Toggle Mode + Main CTA only)
---------------------------------------------------- */
@media (max-width: 900px) {
  .tooltip-mobile-side {
    position: relative;
  }

  .tooltip-mobile-side .mobile-side-tooltip-text {
    top: 50%;
    bottom: auto;
    left: calc(100% + 10px);
    right: auto;
    transform: translateY(-50%);
    max-width: min(44vw, 260px);
    white-space: normal;
    background-color: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(2px);
  }

  .tooltip-mobile-side:hover .mobile-side-tooltip-text,
  .tooltip-mobile-side:focus-within .mobile-side-tooltip-text,
  .tooltip-mobile-side.is-revealed .mobile-side-tooltip-text {
    transform: translateY(-50%);
  }
}

@media (max-width: 430px) {
  .tooltip-mobile-side .mobile-side-tooltip-text {
    display: block !important;
    left: auto;
    right: calc(100% + 10px);
    transform: translateY(-50%);
    max-width: min(72vw, 240px);
  }
}

/* Disable helper tooltips globally to keep controls clear on mobile */
.spinstream-tooltip-text {
  display: none !important;
}

/* Mint action container */
.mint-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

/* Primary mint button */
#finalizeMainBtn.mint-primary {
  background: #2fd566;
  color: #0a0a0a;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  box-shadow: none;
  letter-spacing: normal;
  font-variant: normal;
  text-shadow: none;
}

#finalizeMainBtn.mint-primary::after {
  display: none;
}

/* Subtle premium edge lighting for Finalize button */
#finalizeMainBtn.mint-primary {
  position: relative;
  overflow: hidden;
}

/* soft top lighting edge */
#finalizeMainBtn.mint-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05) 35%,
    rgba(0,0,0,0.05)
  );
  pointer-events: none;
  opacity: 0.6;
}

/* hover interaction */
#finalizeMainBtn.mint-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* Subtle glow to guide user toward final step */
#finalizeMainBtn.mint-primary.preview-ready {
  box-shadow: 0 0 10px rgba(47, 213, 102, 0.45);
  animation: finalizeGlow 2.4s ease-in-out infinite;
}

@keyframes finalizeGlow {
  0% {
    box-shadow: 0 0 6px rgba(47, 213, 102, 0.25);
  }
  50% {
    box-shadow: 0 0 14px rgba(47, 213, 102, 0.55);
  }
  100% {
    box-shadow: 0 0 6px rgba(47, 213, 102, 0.25);
  }
}

/* subtle helper text */
.mint-helper {
  font-size: 0.65rem;
  opacity: 0.6;
  text-align: center;
}

@media (max-width: 768px) {
  .mint-action {
    margin-top: 14px;
  }
}


/* Subtle highlight when Preview Mode is active */
body.preview-mode #finalizeMainBtn.mint-primary {
  box-shadow: 0 0 10px rgba(47, 213, 102, 0.35);
  transition: box-shadow 0.25s ease;
}

/* Soft glow animation */
body.preview-mode #finalizeMainBtn.mint-primary {
  animation: previewMintGlow 2.5s ease-in-out infinite;
}

@keyframes previewMintGlow {
  0% { box-shadow: 0 0 6px rgba(47, 213, 102, 0.25); }
  50% { box-shadow: 0 0 14px rgba(47, 213, 102, 0.45); }
  100% { box-shadow: 0 0 6px rgba(47, 213, 102, 0.25); }
}

/* Modern mint spinner */
.minting-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: #2fd566;
  animation: mintSpinModern 0.9s linear infinite;
}

@keyframes mintSpinModern {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {

  .mode-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .preview-action-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .preview-action-buttons button {
    width: 100%;
    max-width: 240px;
  }

}


@media (max-width: 768px) {
  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .workspace-shell {
    display: none !important;
  }
}

/* Clear Preview Mode indicator */
body.preview-mode .preview-mode-indicator {
  background: rgba(47,213,102,0.12);
  border: 1px solid rgba(47,213,102,0.35);
  box-shadow: 0 0 12px rgba(47,213,102,0.18);
  transition: all 0.25s ease;
}



/* Inline field hint system */
.field-hint {
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(220, 235, 255, 0.7);
  opacity: 0;
  max-height: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.2s ease;
  pointer-events: none;
}

.field-group:focus-within .field-hint,
#heroForm input:focus + .field-hint {
  opacity: 1;
  max-height: 48px;
  transform: translateY(0);
}

#heroForm .field-hint {
  margin: -2px 0 4px;
}

body.preview-mode .field-hint,
body.finalized .field-hint,
body[data-render="artifact"] .field-hint,
body[data-exported="true"] .field-hint {
  display: none !important;
}
/* --- SpinStream Stage Stabilization --- */

.workspace-shell {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  height: var(--workspace-shell-height-expanded);
  min-height: var(--workspace-shell-height-expanded);
}

.artifact-stage {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  flex-shrink: 0;
}

#heroPreview {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transition: opacity 0.2s ease;
}

/* Hero/Vinyl layering fix: keep hero visible above decorative overlays */
.hero,
.hero-container,
.hero-section {
  position: relative;
  z-index: 5;
}

.vinyl-record {
  position: relative;
  z-index: 2;
}

.vinyl-spin-shell::before,
.vinyl-spin-shell::after {
  pointer-events: none;
}

.artifact-stage {
  overflow: visible;
}

/* ============================================================
   HERO SIZE NORMALIZATION (CSS-ONLY, ALL MODES)
   Goal: keep hero consistently smaller across Edit/Preview/Final/Exported
   without touching runtime logic.
   ============================================================ */

#heroPreview.hero-preview {
  width: min(100%, 490px) !important;
  max-width: 490px !important;
  margin-left: auto;
  margin-right: auto;
  padding: 2.8rem 1.4rem !important;
}

#heroPreview .hero-content {
  max-width: 420px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  #heroPreview.hero-preview {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    padding: 2.2rem 1.1rem !important;
  }
}


.document-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

#documentUploadsInput {
  display: none;
}

.document-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 88px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  cursor: pointer;
}

.document-upload-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.document-upload-empty {
  opacity: 0.7;
  font-size: 12px;
}

.document-upload-item {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.document-upload-item-header,
.document-upload-item-controls,
.document-upload-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.document-upload-item-header {
  justify-content: space-between;
}

.document-upload-item-controls input[type="text"] {
  height: 28px;
}

.document-upload-item-controls select {
  max-width: 95px;
  height: 28px;
}

.document-upload-item-controls .document-upload-page-break {
  font-size: 11px;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.document-upload-row-actions button {
  height: 26px;
  font-size: 12px;
}

.document-upload-filename {
  font-size: 12px;
  font-weight: 600;
  word-break: break-all;
}

.document-upload-include {
  font-size: 11px;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.document-preview-zone {
  width: min(100%, 760px);
  margin: 8px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.document-preview-zone.is-empty {
  display: none;
}

.document-preview-page {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  padding: 16px;
}

.document-preview-title {
  margin: 0 0 4px;
  font-size: 18px;
}

.document-preview-meta {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 10px;
}

.document-preview-content p,
.document-preview-content li {
  margin: 0 0 8px;
  line-height: 1.5;
}

.document-preview-content h1,
.document-preview-content h2,
.document-preview-content h3,
.document-preview-content h4,
.document-preview-content h5,
.document-preview-content h6 {
  margin: 0 0 10px;
}

.document-preview-content ul {
  margin: 0 0 10px 18px;
  padding: 0;
}

.document-preview-page-break {
  break-after: page;
}

/* ============================================================
   UI/UX CLEANUP — Top Display, Left Rail, Workspace Shell
   ============================================================ */

/* A. Top Display — section intro text */
.hero-section-intro {
  font-size: 0.8rem;
  color: rgba(220, 235, 255, 0.6);
  margin: 0 0 12px;
  line-height: 1.4;
}

/* A. Top Display — field groups with labels */
.hero-fields .field-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
}

.hero-fields .field-group:last-of-type {
  margin-bottom: 0;
}

/* B. Media upload hints — no layout space when hidden, appear above input on hover/focus */
.media-uploads-box .upload-field .file-hint {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.2s ease, margin 0.2s ease;
}

.media-uploads-box .upload-field:hover .file-hint,
.media-uploads-box .upload-field:focus-within .file-hint {
  max-height: 48px;
  overflow: visible;
  margin: 0 0 6px;
}

/* C. Left rail — prevent horizontal overflow */
.authoring-rail {
  overflow-x: hidden;
}

/* C. Left rail — section header: smaller, with chevron state indicator */
.section-header {
  font-size: 14px;
  padding: 14px 40px 14px 16px;
  cursor: pointer;
}

.section-header::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 400;
  opacity: 0.55;
  line-height: 1;
  pointer-events: none;
}

.editor-section.active > .section-header::after {
  content: "−";
  opacity: 0.75;
}

.editor-section.active,
.editor-section.open {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* C. Left rail — more breathing room inside expanded blocks */
.section-body {
  padding: 14px 12px;
}

/* C. Left rail — soften the section border boxing */
.editor-section {
  border-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}

/* C. Left rail — slightly more space between form fields */
.authoring-rail .form-group {
  margin-bottom: 12px;
}

/* C. Left rail — slightly taller inputs for easier use */
.authoring-rail input,
.authoring-rail select {
  padding: 7px 9px;
  height: 32px;
}

.authoring-rail .media-uploads {
  border: 1px solid rgba(0, 255, 150, 0.2);
  box-shadow: 0 0 8px rgba(0, 255, 150, 0.1);
}

.authoring-rail input[type="file"] {
  padding: 10px;
  border-radius: 8px;
}

/* D. Workspace shell — taller desktop shell using responsive variable override.
   Mobile/tablet layout is handled by existing ≤600px and ≤768px overrides. */
@media (min-width: 769px) {
  :root {
    --workspace-shell-height-base: calc(100vh - 90px);
  }
}

/* ============================================================
   HERO OPACITY CONTROL — HOVER/FOCUS COLLAPSE (EDIT MODE ONLY)
   Date: 2026-03-23
   Scope: UI-only; hero IDs/JS/mode flow untouched
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control {
    position: relative;
    overflow: hidden;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }

  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control::after {
    content: "Hover to change";
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.76);
    pointer-events: none;
  }

  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control label,
  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control #heroOpacityRangeFixed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-3px);
    transition: max-height 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
  }

  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control:hover,
  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control:focus-within {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control:hover::after,
  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control:focus-within::after {
    content: "";
    display: none;
  }

  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control:hover label,
  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control:hover #heroOpacityRangeFixed,
  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control:focus-within label,
  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control:focus-within #heroOpacityRangeFixed {
    max-height: 60px;
    opacity: 1;
    transform: translateY(0);
  }
}

/* Touch/mobile fallback: keep slider directly usable and compact. */
@media (hover: none), (pointer: coarse) {
  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control {
    position: static !important;
    margin: 14px auto 22px !important;
    width: calc(100% - 24px) !important;
    max-width: 420px !important;
    padding: 8px 10px !important;
    border-radius: 10px;
  }

  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control::after {
    content: none;
  }

  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control label,
  body:not(.preview-mode):not(.finalized):not([data-exported="true"]) .hero-opacity-fixed-control #heroOpacityRangeFixed {
    max-height: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   RETRO-FUTURE 1950s COCKPIT SKIN (VISUAL-ONLY)
   Scope: button + control styling only. No layout/container geometry changes.
   ============================================================ */
:root {
  --retro-panel: rgba(65, 47, 35, 0.68);
  --retro-panel-edge: rgba(198, 162, 121, 0.42);
  --retro-brass: #caa169;
  --retro-brass-deep: #8f6338;
  --retro-cream: #f8e8cc;
  --retro-glow: rgba(255, 186, 95, 0.32);
  --retro-warning: #db7944;
}

body {
  background-image:
    radial-gradient(circle at 20% 18%, rgba(255, 164, 86, 0.12), transparent 35%),
    radial-gradient(circle at 82% 12%, rgba(112, 174, 222, 0.08), transparent 28%),
    linear-gradient(160deg, #15110f 0%, #241a15 52%, #0f1218 100%);
}

/* Panel surfaces get a worn dashboard tone, but no size/position changes. */
.editor-section,
.authoring-rail .hero-reference,
.authoring-rail #mp3-upload-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
    var(--retro-panel);
  border-color: var(--retro-panel-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 206, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.22);
}

.section-header,
button,
.hero-preview .btn-primary,
#finalizeMainBtn.mint-primary,
body .btn-primary,
input[type="file"]::file-selector-button {
  background:
    linear-gradient(180deg, #d9b57f 0%, var(--retro-brass) 34%, var(--retro-brass-deep) 100%);
  color: #25170f;
  border: 1px solid rgba(255, 220, 172, 0.55);
  text-shadow: 0 1px 0 rgba(255, 241, 214, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.45),
    inset 0 -2px 3px rgba(52, 31, 18, 0.42),
    0 0 0 1px rgba(41, 25, 16, 0.45),
    0 6px 14px rgba(0, 0, 0, 0.28);
  letter-spacing: 0.03em;
}

.section-header .section-preview {
  color: rgba(44, 26, 17, 0.75);
}

.section-header:hover,
button:hover,
.hero-preview .btn-primary:hover,
#finalizeMainBtn.mint-primary:hover,
body .btn-primary:hover,
input[type="file"]::file-selector-button:hover {
  filter: saturate(1.05) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.55),
    inset 0 -2px 3px rgba(52, 31, 18, 0.48),
    0 0 0 1px rgba(41, 25, 16, 0.48),
    0 0 16px var(--retro-glow),
    0 9px 18px rgba(0, 0, 0, 0.32);
}

button:active,
.hero-preview .btn-primary:active,
#finalizeMainBtn.mint-primary:active,
body .btn-primary:active,
input[type="file"]::file-selector-button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.32),
    inset 0 2px 4px rgba(53, 28, 15, 0.48),
    0 0 0 1px rgba(41, 25, 16, 0.4);
}

/* Toggle controls become old-instrument style with a warm indicator. */
.slider {
  background:
    linear-gradient(180deg, rgba(53, 38, 28, 0.95), rgba(23, 17, 12, 0.95));
  border: 1px solid rgba(210, 167, 118, 0.52);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.slider::before {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 243, 212, 0.92), rgba(183, 133, 78, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 4px rgba(0, 0, 0, 0.45);
}

.switch input:checked + .slider {
  background:
    linear-gradient(180deg, rgba(67, 30, 18, 0.95), rgba(109, 43, 21, 0.95));
  box-shadow:
    inset 0 0 0 1px rgba(246, 176, 112, 0.38),
    0 0 10px rgba(255, 145, 74, 0.32);
}

.switch input:checked + .slider::before {
  background:
    radial-gradient(circle at 38% 28%, #ffe6b7, var(--retro-warning));
}

.topbar-controls label,
.tagline,
.region-label {
  color: var(--retro-cream);
}

/* ============================================================
   🚀 IMMERSIVE PANEL SYSTEM (PHASE 1)
   SAFE · ADD ONLY · NO LOGIC TOUCH
   ============================================================ */

/* PANEL = GLASS WINDOW */
.authoring-rail {
  background: rgba(10, 14, 22, 0.55);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 20px 50px rgba(0,0,0,0.45);
}

/* REMOVE “FORM STACK” FEEL */
.editor-section {
  background: transparent;
  border: none;
  margin-bottom: 10px;
  position: relative;
  transition: all 0.35s ease;
}

/* CONNECTED FLOW LINE */
.editor-section::before {
  content: "";
  position: absolute;
  left: 10px;
  top: -10px;
  bottom: -10px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(120,180,255,0.25),
    transparent
  );
  opacity: 0.4;
}

/* HEADER = INTERACTIVE NODE */
.section-header {
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.25s ease;
}

/* HOVER = “CALL TO ACTION” */
.section-header:hover {
  background: rgba(255,255,255,0.08);
  transform: translateX(4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* ACTIVE SECTION = FOCUSED PANEL */
.editor-section.active {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(120,180,255,0.15),
    0 12px 30px rgba(0,0,0,0.4);
  transform: scale(1.02);
}

/* BODY = SOFT REVEAL */
.section-body {
  transition: all 0.3s ease;
  transform-origin: top;
}

/* FADE NON-ACTIVE SECTIONS */
.editor-section:not(.active) {
  opacity: 0.55;
  transform: scale(0.98);
}

/* NEXT SECTION “PULL” EFFECT */
.editor-section:not(.active):hover {
  opacity: 0.85;
}

/* REMOVE SCROLL BAR VISUAL (still scrolls) */
.authoring-rail::-webkit-scrollbar {
  width: 0px;
}
.authoring-rail {
  scrollbar-width: none;
}

/* SLIGHT DEPTH SHIFT */
.authoring-rail {
  perspective: 1200px;
}

.editor-section {
  transform-style: preserve-3d;
}

/* SOFT FLOAT EFFECT */
.editor-section.active {
  transform: scale(1.02) translateZ(20px);
}

/* SUBTLE GLOW CONNECTION */
.editor-section.active::before {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(100,200,255,0.5),
    transparent
  );
  opacity: 0.7;
}

/* ============================================================
   PANEL FRAME SYSTEM — NORMALIZATION + AXIS LAYOUT
   Supports data-axis="y" (default) and data-axis="x"
   ============================================================ */

.panel-frame {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-frame.is-active {
  z-index: 2;
}

.panel-frame:not(.is-active) {
  opacity: 0.55;
}

.panel-frame:not(.is-active):hover {
  opacity: 0.85;
}

.editor-section.panel-normalized {
  width: 100%;
  box-sizing: border-box;
}

/* Y-AXIS (vertical stack) — default */
.authoring-rail[data-axis="y"] .panel-frame {
  margin-bottom: 10px;
}

.authoring-rail[data-axis="y"] .panel-frame.is-active {
  transform: scale(1.01);
}

/* X-AXIS (horizontal scroll) */
.authoring-rail[data-axis="x"] {
  flex-direction: row;
  overflow-x: auto;
  overflow-y: visible;
  gap: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.authoring-rail[data-axis="x"] .panel-frame {
  flex: 0 0 85%;
  scroll-snap-align: center;
  min-width: 200px;
}

.authoring-rail[data-axis="x"] .panel-frame.is-active {
  flex: 0 0 92%;
  transform: scale(1.01);
}

/* =====================================================
   ORBIT PRESENTATION LAYER
   Transforms .editor-section blocks into orbit cards.
   Appended only — no existing rules modified.
   ===================================================== */

.orbit-viewport {
  position: relative;
  width: 100%;
}

.orbit-track {
  position: relative;
  width: 100%;
}

/* Base: neutralise any pre-existing 3D scale so sections stay within rail bounds */
.authoring-rail .editor-section,
.authoring-rail .editor-section.active {
  transform: none;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}

/* Active panel: fully expanded */
.authoring-rail .editor-section.is-active {
  display: block;
  opacity: 1;
  max-height: none;
}

/* Left adjacent panel: small header peek above active */
.authoring-rail .editor-section.is-left {
  max-height: 62px;
  overflow: hidden;
  opacity: 0.55;
  cursor: pointer;
}

/* Right adjacent panel: small header peek below active */
.authoring-rail .editor-section.is-right {
  max-height: 62px;
  overflow: hidden;
  opacity: 0.55;
  cursor: pointer;
}

/* All other panels: hidden */
.authoring-rail .editor-section.is-hidden {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   SPACE PANEL — Region 2 · Orbiting Card Carousel
   All rules scoped under #space-panel-region2 to prevent collisions
   with the existing authoring-rail and form field styles.
══════════════════════════════════════════════════════════════════════ */

#space-panel-region2 {
  --sp-accent:       #00d4ff;
  --sp-accent2:      #ff00cc;
  --sp-glow:         0 0 12px #00d4ff88, 0 0 30px #00d4ff44;
  --sp-glow-hot:     0 0 18px #ff00ccaa, 0 0 50px #ff00cc55, 0 0 90px #ff00cc22;
  --sp-card-w:       260px;
  --sp-card-h:       190px;
  --sp-card-gap:     10px;
  --sp-panel-bg:     rgba(8, 10, 22, 0.96);
  --sp-card-bg:      rgba(14, 18, 38, 0.92);
  --sp-border-dim:   rgba(0, 212, 255, 0.18);
  --sp-border-hot:   rgba(255, 0, 204, 0.85);
  --sp-text:         #cde6ff;
  --sp-label:        #7aaec8;
  --sp-input-bg:     rgba(0, 212, 255, 0.06);
  --sp-input-border: rgba(0, 212, 255, 0.28);
  --sp-radius:       14px;
  --sp-transition:   0.55s cubic-bezier(0.42, 0, 0.18, 1);

  position: sticky;
  top: 0;
  z-index: 99;
  width: 100%;
  max-height: 30vh;
  background: var(--sp-panel-bg);
  border-bottom: 1px solid var(--sp-border-dim);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  overflow: hidden;
  box-shadow: 0 4px 40px #00d4ff18;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: var(--sp-text);
}

/* Hide in preview / finalized / exported modes */
body.preview-mode #space-panel-region2,
body.finalized #space-panel-region2,
body[data-exported="true"] #space-panel-region2,
body[data-render="artifact"] #space-panel-region2 {
  display: none;
}

/* Panel header bar */
#space-panel-region2 #sp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1100px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

#space-panel-region2 #sp-panel-title {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-accent);
  text-shadow: var(--sp-glow);
  opacity: 0.85;
}

#space-panel-region2 #sp-panel-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

#space-panel-region2 .sp-nav-btn {
  background: none;
  border: 1px solid var(--sp-border-dim);
  color: var(--sp-accent);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#space-panel-region2 .sp-nav-btn:hover {
  border-color: var(--sp-accent);
  box-shadow: var(--sp-glow);
}

#space-panel-region2 #sp-card-counter {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--sp-label);
  min-width: 42px;
  text-align: center;
}

#space-panel-region2 #sp-autoplay-btn {
  background: none;
  border: 1px solid var(--sp-border-dim);
  color: var(--sp-label);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

#space-panel-region2 #sp-autoplay-btn.active {
  border-color: var(--sp-accent2);
  color: var(--sp-accent2);
  box-shadow: 0 0 8px #ff00cc66;
}

/* Carousel stage */
#space-panel-region2 #sp-carousel-viewport {
  width: 100%;
  max-width: 1100px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 900px;
  perspective-origin: 50% 50%;
}

#space-panel-region2 #sp-carousel-ring {
  position: relative;
  width: var(--sp-card-w);
  height: var(--sp-card-h);
  transform-style: preserve-3d;
  transition: transform var(--sp-transition);
}

/* Individual cards */
#space-panel-region2 .sp-orbit-card {
  position: absolute;
  width: var(--sp-card-w);
  height: var(--sp-card-h);
  top: 0;
  left: 0;
  background: var(--sp-card-bg);
  border: 1px solid var(--sp-border-dim);
  border-radius: var(--sp-radius);
  padding: 12px 14px;
  cursor: pointer;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition),
              opacity var(--sp-transition);
  overflow: hidden;
  user-select: none;
}

#space-panel-region2 .sp-orbit-card.back-facing {
  opacity: 0.4;
  pointer-events: none;
}

#space-panel-region2 .sp-orbit-card.is-active {
  border-color: var(--sp-border-hot);
  box-shadow: var(--sp-glow-hot);
  cursor: default;
  opacity: 1;
  pointer-events: all;
}

#space-panel-region2 .sp-orbit-card:not(.is-active):not(.back-facing) {
  opacity: 0.65;
}

#space-panel-region2 .sp-orbit-card:not(.is-active):not(.back-facing):hover {
  opacity: 0.88;
  border-color: rgba(0, 212, 255, 0.5);
}

/* Card header */
#space-panel-region2 .sp-card-label {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-accent2);
  margin-bottom: 6px;
  text-shadow: 0 0 8px #ff00cc88;
}

#space-panel-region2 .sp-orbit-card.is-active .sp-card-label {
  color: var(--sp-accent);
  text-shadow: var(--sp-glow);
}

#space-panel-region2 .sp-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sp-text);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Form elements inside cards */
#space-panel-region2 .sp-card-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#space-panel-region2 .sp-field-row {
  display: flex;
  gap: 6px;
}

#space-panel-region2 .sp-field-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}

#space-panel-region2 .sp-field-group label {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sp-label);
}

#space-panel-region2 .sp-field-group input,
#space-panel-region2 .sp-field-group select,
#space-panel-region2 .sp-field-group textarea {
  background: var(--sp-input-bg);
  border: 1px solid var(--sp-input-border);
  border-radius: 6px;
  color: var(--sp-text);
  font-size: 0.74rem;
  padding: 4px 7px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  font-family: inherit;
}

#space-panel-region2 .sp-field-group textarea {
  resize: none;
  height: 36px;
}

#space-panel-region2 .sp-field-group input:focus,
#space-panel-region2 .sp-field-group select:focus,
#space-panel-region2 .sp-field-group textarea:focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 6px #00d4ff55;
}

#space-panel-region2 .sp-orbit-card:not(.is-active) .sp-field-group input,
#space-panel-region2 .sp-orbit-card:not(.is-active) .sp-field-group select,
#space-panel-region2 .sp-orbit-card:not(.is-active) .sp-field-group textarea {
  pointer-events: none;
  opacity: 0.55;
}

/* Dot indicators */
#space-panel-region2 #sp-dot-track {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  flex-shrink: 0;
}

#space-panel-region2 .sp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sp-border-dim);
  border: 1px solid rgba(0, 212, 255, 0.3);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
  padding: 0;
}

#space-panel-region2 .sp-dot.active {
  background: var(--sp-accent);
  box-shadow: 0 0 6px var(--sp-accent);
  transform: scale(1.5);
}

/* Connector arc animated border on active card */
#space-panel-region2 .sp-connector-arc {
  position: absolute;
  inset: -2px;
  border-radius: var(--sp-radius);
  pointer-events: none;
  background: transparent;
}

#space-panel-region2 .sp-orbit-card.is-active .sp-connector-arc {
  background: none;
  box-shadow: inset 0 0 0 1px var(--sp-border-hot), var(--sp-glow-hot);
  animation: sp-pulse-border 2.4s ease-in-out infinite;
}

@keyframes sp-pulse-border {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,0,204,0.75), 0 0 16px #ff00cc66; }
  50%       { box-shadow: inset 0 0 0 1px rgba(255,0,204,0.25), 0 0 40px #ff00cc22; }
}