@import url("/assets/css/mk-track-upload.css");

body.mk-universal-upload-body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(183,121,255,0.22), transparent 34%),
    radial-gradient(circle at top right, rgba(100,255,218,0.14), transparent 30%),
    linear-gradient(135deg, #090f25, #11163d 48%, #091226);
  color: var(--mk-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mk-dynamic-panel {
  border: 1px solid var(--mk-border);
  border-radius: 24px;
  padding: 20px;
  background: rgba(255,255,255,0.05);
  display: grid;
  gap: 16px;
}

.mk-dynamic-panel h2 {
  margin: 0;
  font-size: 1.35rem;
}

.mk-dynamic-panel p {
  color: var(--mk-muted);
  margin: 0;
  line-height: 1.7;
}

.mk-preview-art {
  width: 100%;
  aspect-ratio: 1 / 0.85;
  border-radius: 26px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  background:
    radial-gradient(circle at top left, rgba(255,141,243,0.35), transparent 35%),
    linear-gradient(135deg, var(--mk-purple), var(--mk-accent));
  color: white;
  font-size: 4rem;
  font-weight: 1000;
  overflow: hidden;
}

.mk-preview-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-workflow-preview {
  border: 1px solid var(--mk-border);
  border-radius: 22px;
  padding: 18px;
  background: rgba(255,255,255,0.06);
}

.mk-workflow-preview h3 {
  margin: 0 0 10px;
}

.mk-workflow-preview p {
  color: var(--mk-muted);
  line-height: 1.7;
}

.mk-field-note {
  font-size: 0.88rem;
  color: var(--mk-muted);
}

.mk-upload-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mk-upload-chip {
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  padding: 0.6rem 0.85rem;
  color: var(--mk-accent);
  background: rgba(100,255,218,0.08);
  font-weight: 900;
}