/* Native first-paint structure for Green/Red Media selection. */

.uploads-card.uploads.otl-combined-media-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.otl-combined-media-card {
  --otl-pair-rgb: 148, 163, 184;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "media soundtrack"
    "settings settings";
  column-gap: 0 !important;
  row-gap: 10px !important;
  align-items: stretch;
  min-width: 0;
}

.otl-combined-media-card.green {
  --otl-pair-rgb: 74, 222, 128;
}

.otl-combined-media-card.red {
  --otl-pair-rgb: 248, 113, 113;
}

.otl-combined-media-card.yellow {
  --otl-pair-rgb: 251, 191, 36;
}

.otl-upload-subzone {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 9px;
  min-width: 0;
  min-height: 0;
}

.otl-upload-subzone > h2 {
  margin: 0 0 2px;
  font-size: 1.02rem;
}

.otl-media-subzone {
  grid-area: media;
  padding-right: 16px;
}

.otl-soundtrack-subzone {
  grid-area: soundtrack;
  padding-left: 16px;
  border-left: 1px solid rgba(var(--otl-pair-rgb), .38);
}

.otl-soundtrack-subzone > h2 {
  color: rgba(248, 250, 252, .94);
}

.otl-combined-media-card > .otl-media-options {
  grid-area: settings;
  width: 100%;
  margin-top: 0;
}

/* Media settings */
.otl-media-options {
  margin-top: 2px;
  border-top: 1px solid rgba(100, 116, 139, .25);
}

.otl-media-options > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0 2px;
  color: #cbd5e1;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 800;
  list-style: none;
}

.otl-media-options > summary::-webkit-details-marker {
  display: none;
}

.otl-media-options > summary::after {
  content: "⌄";
  color: #94a3b8;
  transition: transform .18s ease;
}

.otl-media-options[open] > summary::after {
  transform: rotate(180deg);
}

.otl-media-options-body {
  display: grid;
  gap: 9px;
  padding-top: 9px;
}

.otl-media-setting {
  display: grid;
  gap: 5px;
  color: #94a3b8;
  font-size: .72rem;
  font-weight: 700;
}

.otl-media-setting select,
.otl-media-setting input[type="number"] {
  min-width: 0;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #334155;
  border-radius: 9px;
  color: #e5e7eb;
  background: rgba(2, 6, 23, .65);
}

.otl-photo-chance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px auto;
  align-items: center;
  gap: 7px;
}

.otl-photo-duration {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.otl-photo-duration label {
  display: grid;
  gap: 4px;
}

.otl-media-row[hidden] {
  display: none !important;
}

/* Drag-and-drop shell is visible from first paint. */
.otl-drop-zone {
  position: relative;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.otl-drop-hint {
  margin-top: 7px;
  color: #64748b;
  font-size: .73rem;
  font-weight: 650;
  line-height: 1.4;
  transition: color 160ms ease, opacity 160ms ease;
}

.otl-drop-zone::after {
  content: attr(data-otl-drop-label);
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 2px dashed rgba(var(--otl-drop-rgb, 96, 165, 250), .68);
  border-radius: 12px;
  color: rgb(var(--otl-drop-rgb, 96, 165, 250));
  background: rgba(2, 6, 23, .90);
  box-shadow:
    inset 0 0 28px rgba(var(--otl-drop-rgb, 96, 165, 250), .07),
    0 0 28px rgba(var(--otl-drop-rgb, 96, 165, 250), .08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-align: center;
  font-size: .92rem;
  font-weight: 850;
  letter-spacing: .02em;
  transform: scale(.992);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.otl-drop-zone.otl-drop-active {
  background: rgba(var(--otl-drop-rgb, 96, 165, 250), .025);
  box-shadow: 0 0 24px rgba(var(--otl-drop-rgb, 96, 165, 250), .055);
}

.otl-drop-zone.otl-drop-active::after {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.otl-media-subzone.green,
.otl-soundtrack-subzone.green {
  --otl-drop-rgb: 34, 197, 94;
}

.otl-media-subzone.red,
.otl-soundtrack-subzone.red {
  --otl-drop-rgb: 239, 68, 68;
}

@media (max-width: 900px) {
  .otl-combined-media-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "soundtrack"
      "settings";
    row-gap: 12px !important;
  }

  .otl-upload-subzone {
    min-height: 0;
  }

  .otl-media-subzone {
    padding-right: 0;
  }

  .otl-soundtrack-subzone {
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(var(--otl-pair-rgb), .34);
  }
}

@media (max-width: 720px) {
  .uploads-card.uploads.otl-combined-media-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .otl-photo-chance {
    grid-template-columns: minmax(0, 1fr) 72px auto;
  }
}


/* ---------- Local / Online Media source selector ---------- */

.otl-media-source-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin: 0 0 2px;
}

.otl-media-source-header > h2 {
  min-width: 0;
  margin: 0;
  font-size: 1.02rem;
}


.otl-media-source-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(var(--otl-pair-rgb), .17);
  border-radius: 9px;
  background: rgba(2, 6, 23, .34);
}


.otl-media-source-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  min-height: 29px;
  padding: 5px 9px;

  border: 1px solid transparent;
  border-radius: 7px;

  color: #7f8da3;
  background: transparent;

  cursor: pointer;

  font: inherit;
  font-size: .69rem;
  font-weight: 780;
  line-height: 1;

  transition:
    color 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}


.otl-media-source-option[aria-pressed="true"] {
  border-color: rgba(var(--otl-pair-rgb), .28);
  color: #e8eef7;
  background: rgba(var(--otl-pair-rgb), .095);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}


@media (hover: hover) {
  .otl-media-source-option:hover {
    color: #dce5f1;
    background: rgba(var(--otl-pair-rgb), .065);
  }
}


.otl-media-source-soon {
  color: rgb(var(--otl-pair-rgb));
  font-size: .52rem;
  font-weight: 850;
  letter-spacing: .055em;
  opacity: .72;
  text-transform: uppercase;
}


.otl-media-source-local {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
}


.otl-media-source-local[hidden],
.otl-online-media-placeholder[hidden],
.otl-online-media-options-body[hidden] {
  display: none !important;
}


/*
  This roughly occupies the useful space of the normal chooser,
  hint, and count without creating a large empty placeholder.
*/
.otl-online-media-placeholder {
  display: grid;
  align-content: center;
  gap: 7px;

  box-sizing: border-box;
  min-width: 0;
  min-height: 105px;

  padding: 12px 13px;

  border:
    1px solid rgba(var(--otl-pair-rgb), .17);

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(var(--otl-pair-rgb), .045),
      rgba(2,6,23,.20)
    );
}


.otl-online-media-placeholder-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}


.otl-online-media-placeholder-heading strong {
  color: #e2e8f0;
  font-size: .80rem;
  font-weight: 820;
}


.otl-online-media-placeholder-heading > span {
  color: rgb(var(--otl-pair-rgb));
  font-size: .57rem;
  font-weight: 850;
  letter-spacing: .06em;
  opacity: .75;
  text-transform: uppercase;
}




.otl-online-media-placeholder-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding-top: 2px;

  color: #64748b;

  font-size: .64rem;
  font-weight: 720;
}


.otl-online-media-placeholder-meta strong {
  color: #aab6c8;
  font-size: .66rem;
  font-weight: 790;
}


.otl-online-media-options-body {
  display: grid;
  gap: 9px;
  padding-top: 9px;
}


.otl-online-media-setting-preview {
  display: grid;
  gap: 6px;

  padding: 10px 11px;

  border: 1px solid rgba(var(--otl-pair-rgb), .12);
  border-radius: 9px;

  background: rgba(2,6,23,.20);
}


.otl-online-media-setting-preview > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}


.otl-online-media-setting-preview span {
  color: #94a3b8;
  font-size: .70rem;
  font-weight: 740;
}


.otl-online-media-setting-preview strong {
  color: #cbd5e1;
  font-size: .70rem;
  font-weight: 810;
}


.otl-online-media-setting-preview p {
  margin: 0;
  color: #64748b;
  font-size: .67rem;
  font-weight: 620;
  line-height: 1.45;
}


@media (max-width: 1180px) {
  .otl-media-source-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}


@media (max-width: 900px) {
  .otl-media-source-header {
    align-items: center;
    flex-direction: row;
  }
}


@media (max-width: 520px) {
  .otl-media-source-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .otl-media-source-switch {
    width: 100%;
  }

  .otl-media-source-option {
    flex: 1 1 0;
  }
}

/* ---------- End Local / Online Media source selector ---------- */

/* ---------- Online Media Tag selector ---------- */

.otl-online-media-placeholder {
  align-content: start;
}

.otl-online-tag-picker {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin-top: 2px;
}

.otl-online-selected-wrap {
  display: grid;
  gap: 6px;
}

.otl-online-selected-wrap[hidden] {
  display: none !important;
}

.otl-online-selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  color: #718096;
  font-size: .61rem;
  font-weight: 760;
}

.otl-online-selected-header button {
  min-height: 0;
  height: auto;
  padding: 0;

  line-height: 1.1;

  border: 0;

  color: #7f8da3;
  background: transparent;

  cursor: pointer;

  font: inherit;
  font-size: .61rem;
  font-weight: 760;
}

@media (hover: hover) {
  .otl-online-selected-header button:hover {
    color: #cbd5e1;
  }
}

.otl-online-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.otl-online-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-height: 27px;
  padding: 5px 8px 5px 9px;

  border:
    1px solid
    rgba(var(--otl-pair-rgb), .34);

  border-radius: 999px;

  color: #edf2f7;

  background:
    rgba(var(--otl-pair-rgb), .10);

  cursor: pointer;

  font: inherit;
  font-size: .64rem;
  font-weight: 760;
  line-height: 1;
}

.otl-online-tag-chip-remove {
  color: #8190a5;
  font-size: .83rem;
  font-weight: 600;
  line-height: .8;
}

@media (hover: hover) {
  .otl-online-tag-chip:hover {
    border-color:
      rgba(var(--otl-pair-rgb), .52);

    background:
      rgba(var(--otl-pair-rgb), .15);
  }

  .otl-online-tag-chip:hover
  .otl-online-tag-chip-remove {
    color: #e2e8f0;
  }
}

.otl-online-tag-search-shell {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.otl-online-tag-search {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;

  padding: 8px 10px;

  border:
    1px solid
    rgba(var(--otl-pair-rgb), .22);

  border-radius: 8px;

  outline: none;

  color: #e5e7eb;
  background: rgba(2, 6, 23, .48);

  font: inherit;
  font-size: .69rem;
  font-weight: 650;

  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.otl-online-tag-search::placeholder {
  color: #66758b;
}

.otl-online-tag-search:focus {
  border-color:
    rgba(var(--otl-pair-rgb), .48);

  background:
    rgba(2, 6, 23, .64);

  box-shadow:
    0 0 0 2px
    rgba(var(--otl-pair-rgb), .055);
}

.otl-online-tag-results {
  display: grid;
  overflow-y: auto;

  max-height: 218px;

  border:
    1px solid
    rgba(var(--otl-pair-rgb), .17);

  border-radius: 8px;

  background: rgba(2, 6, 23, .63);
}

.otl-online-tag-results[hidden] {
  display: none !important;
}

.otl-online-tag-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  width: 100%;
  min-width: 0;

  padding: 7px 9px;

  border: 0;
  border-bottom:
    1px solid
    rgba(100, 116, 139, .12);

  color: #cbd5e1;
  background: transparent;

  cursor: pointer;

  font: inherit;
  text-align: left;
}

.otl-online-tag-result:last-child {
  border-bottom: 0;
}

.otl-online-tag-result-label {
  overflow: hidden;

  font-size: .67rem;
  font-weight: 760;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.otl-online-tag-result-group {
  flex: 0 0 auto;

  color: #65748a;

  font-size: .57rem;
  font-weight: 720;
}

.otl-online-tag-result:disabled {
  cursor: default;
  opacity: .54;
}

@media (hover: hover) {
  .otl-online-tag-result:not(:disabled):hover {
    color: #f1f5f9;

    background:
      rgba(var(--otl-pair-rgb), .075);
  }
}

.otl-online-tag-empty {
  padding: 9px 10px;

  color: #6f7d91;

  font-size: .64rem;
  font-weight: 650;
  text-align: center;
}

.otl-online-media-placeholder-meta
> span {
  min-width: 0;
}

.otl-online-media-placeholder-meta
> span
> strong {
  margin-left: 3px;
  color: #aab6c8;
}

@media (max-width: 520px) {
  .otl-online-tag-result {
    padding-block: 8px;
  }
}

/* ---------- End Online Media Tag selector ---------- */

/* ---------- Native Soundtrack Library first-paint ---------- */

.yellow-config .uploads.otl-combined-media-grid {
  grid-template-columns: minmax(0, 1fr);
}

.otl-soundtrack-source-local {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
}

.otl-soundtrack-source-local[hidden],
.otl-online-soundtrack-panel[hidden] {
  display: none !important;
}

.otl-online-soundtrack-panel {
  display: grid;
  align-content: start;
  gap: 9px;

  box-sizing: border-box;
  min-width: 0;

  padding: 11px 12px;

  border:
    1px solid rgba(var(--otl-pair-rgb), .17);

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(var(--otl-pair-rgb), .045),
      rgba(2, 6, 23, .20)
    );
}

.otl-online-soundtrack-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.otl-online-soundtrack-heading strong {
  color: #e2e8f0;
  font-size: .80rem;
  font-weight: 820;
}

.otl-online-soundtrack-panel select {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: 38px;

  padding: 8px 9px;

  border:
    1px solid rgba(100, 116, 139, .44);

  border-radius: 9px;

  color: #e5e7eb;
  background: rgba(2, 6, 23, .66);

  font: inherit;
  font-size: .76rem;
}

.otl-online-soundtrack-actions {
  display: flex;
  align-items: center;  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}

.otl-online-soundtrack-meta {
  min-width: 0;
  overflow: hidden;

  color: #718096;

  font-size: .65rem;
  font-weight: 650;
  line-height: 1.35;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.otl-online-soundtrack-preview {
  flex: 0 0 auto;

  min-height: 31px;
  padding: 6px 9px;

  border:
    1px solid rgba(var(--otl-pair-rgb), .24);

  border-radius: 8px;

  color: #dbe7f5;
  background:
    rgba(var(--otl-pair-rgb), .075);

  cursor: pointer;

  font: inherit;
  font-size: .68rem;
  font-weight: 800;
}

.otl-online-soundtrack-preview:disabled {
  opacity: .45;
  cursor: default;
}

.otl-online-soundtrack-empty {
  color: #718096;

  font-size: .70rem;
  font-weight: 650;
  line-height: 1.45;
}

/* ---------- End Native Soundtrack Library first-paint ---------- */



/* ---------- Library card identity ---------- */

.otl-online-media-placeholder,
.otl-online-soundtrack-panel {
  align-content: stretch;
  height: 100%;
}

.otl-online-media-placeholder {
  grid-template-rows: auto auto minmax(31px, 1fr);
}

.otl-online-soundtrack-panel {
  grid-template-rows: auto auto minmax(31px, 1fr);
}

.otl-online-media-placeholder-heading,
.otl-online-soundtrack-heading {
  min-height: 22px;
}

.otl-library-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.otl-library-title-icon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  color: rgb(var(--otl-pair-rgb));
  opacity: .88;
}

.otl-library-title > span {
  min-width: 0;
}

.otl-online-media-placeholder-meta,
.otl-online-soundtrack-actions {
  align-self: end;
  min-height: 31px;
}

/* ---------- End Library card identity ---------- */

/* ---------- Library visual polish v1 ---------- */

/*
  Overall pair:
  slightly more compact, with less empty vertical space.
*/
@media (min-width: 901px) {
  .otl-upload-subzone {
    min-height: 150px;
    gap: 8px;
  }
}


/*
  Section headers + source switch.

  The heading remains primary; Library / Local becomes a quieter
  mode control instead of competing with the heading.
*/
.otl-media-source-header {
  gap: 12px;
  margin-bottom: 3px;
}

.otl-media-source-switch {
  gap: 1px;
  padding: 2px;

  border-color:
    rgba(var(--otl-pair-rgb), .13);

  border-radius: 8px;

  background:
    rgba(2, 6, 23, .27);
}

.otl-media-source-option {
  min-height: 27px;
  padding: 4px 8px;

  border-radius: 6px;

  font-size: .66rem;
  font-weight: 750;
}

.otl-media-source-option[aria-pressed="true"] {
  border-color:
    rgba(var(--otl-pair-rgb), .24);

  background:
    rgba(var(--otl-pair-rgb), .08);

  box-shadow: none;
}


/*
  Inner Library cards:
  retain the grouping, but reduce the box-inside-a-box effect.
*/
.otl-online-media-placeholder,
.otl-online-soundtrack-panel {
  gap: 9px;

  min-height: 0;
  height: 100%;

  padding: 11px 12px;

  border-color:
    rgba(var(--otl-pair-rgb), .12);

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(var(--otl-pair-rgb), .028),
      rgba(2, 6, 23, .14)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.012);
}


/*
  Give both cards the same vertical rhythm:
    title
    primary control
    footer
*/
.otl-online-media-placeholder {
  grid-template-rows:
    auto
    auto
    minmax(28px, 1fr);
}

.otl-online-soundtrack-panel {
  grid-template-rows:
    auto
    auto
    minmax(28px, 1fr);
}


/*
  Library identity:
  slightly larger title + a compact accent-backed icon.
*/
.otl-online-media-placeholder-heading,
.otl-online-soundtrack-heading {
  min-height: 26px;
}

.otl-online-media-placeholder-heading .otl-library-title,
.otl-online-soundtrack-heading .otl-library-title {
  gap: 8px;

  color: #e7edf6;

  font-size: .82rem;
  font-weight: 820;
}

.otl-library-title-icon {
  box-sizing: border-box;

  flex: 0 0 24px;

  width: 24px;
  height: 24px;

  padding: 4px;

  border:
    1px solid
    rgba(var(--otl-pair-rgb), .17);

  border-radius: 7px;

  color:
    rgb(var(--otl-pair-rgb));

  background:
    rgba(var(--otl-pair-rgb), .075);

  opacity: .96;
}


/*
  Primary controls:
  search and soundtrack select should look like parallel controls.
*/
.otl-online-tag-search,
.otl-online-soundtrack-panel select {
  box-sizing: border-box;

  width: 100%;
  min-height: 38px;

  padding: 8px 10px;

  border-radius: 8px;

  color: #e5eaf1;

  background:
    rgba(2, 6, 23, .54);

  font-size: .70rem;
}

.otl-online-tag-search {
  border-color:
    rgba(var(--otl-pair-rgb), .18);
}

.otl-online-soundtrack-panel select {
  border-color:
    rgba(100, 116, 139, .34);
}

.otl-online-tag-search:focus {
  border-color:
    rgba(var(--otl-pair-rgb), .42);

  background:
    rgba(2, 6, 23, .62);

  box-shadow:
    0 0 0 2px
    rgba(var(--otl-pair-rgb), .045);
}


/*
  Footer rows:
  align both to the bottom without leaving a large visual void.
*/
.otl-online-media-placeholder-meta,
.otl-online-soundtrack-actions {
  align-self: end;

  min-height: 28px;
}

.otl-online-media-placeholder-meta {
  padding-top: 0;

  color: #627086;

  font-size: .60rem;
  font-weight: 680;
}

.otl-online-media-placeholder-meta
> span
> strong {
  margin-left: 3px;

  color: #9aa8ba;

  font-size: .63rem;
  font-weight: 760;
}


/*
  Preview remains a secondary action.
*/
.otl-online-soundtrack-preview {
  min-height: 29px;
  padding: 5px 9px;

  border-radius: 7px;

  font-size: .65rem;
  font-weight: 770;
}

.otl-online-soundtrack-preview:not(:disabled) {
  border-color:
    rgba(var(--otl-pair-rgb), .28);

  background:
    rgba(var(--otl-pair-rgb), .085);
}

.otl-online-soundtrack-preview:disabled {
  opacity: .38;
}


/*
  Center divider:
  replace the full-height border with a shorter, quieter keyline.
*/
@media (min-width: 901px) {
  .otl-soundtrack-subzone {
    border-left: 0;
  }

  .otl-soundtrack-subzone::before {
    content: "";

    position: absolute;

    top: 8px;
    bottom: 8px;
    left: 0;

    width: 1px;

    background:
      rgba(var(--otl-pair-rgb), .20);

    pointer-events: none;
  }
}


/*
  Keep the existing stacked/mobile treatment.
*/
@media (max-width: 900px) {
  .otl-soundtrack-subzone::before {
    display: none;
  }

  .otl-online-media-placeholder,
  .otl-online-soundtrack-panel {
    height: auto;
  }
}

/* ---------- End Library visual polish v1 ---------- */

/* ---------- Canonical compact Library layout ---------- */

/*
  The Media/Soundtrack subzones should size from their content.
  Do not allocate a flexible 1fr row or an artificial minimum
  height to the Library panel.
*/
.otl-upload-subzone {
  grid-template-rows: auto auto;
  align-content: start;
  min-height: 0;
}


/*
  Media Library is a straightforward vertical content stack.
*/
.otl-online-media-placeholder {
  display: flex;
  flex-direction: column;

  align-self: start;
  justify-self: stretch;

  width: 100%;
  height: max-content;
  min-height: 0;

  justify-content: flex-start;
  align-items: stretch;

  gap: 9px;
}


/*
  Nothing inside the Media Library is allowed to consume
  leftover vertical space.
*/
.otl-online-media-placeholder-heading,
.otl-online-tag-picker,
.otl-online-selected-wrap,
.otl-online-selected-header,
.otl-online-selected-tags,
.otl-online-tag-search-shell {
  flex: 0 0 auto;
  min-height: 0;
}

.otl-online-media-placeholder-heading {
  height: auto;
  margin: 0;
}

.otl-online-tag-picker {
  display: flex;
  flex-direction: column;

  height: auto;
  margin: 0;

  justify-content: flex-start;

  gap: 8px;
}

.otl-online-selected-wrap {
  display: flex;
  flex-direction: column;

  height: auto;
  margin: 0;

  justify-content: flex-start;

  gap: 5px;
}

.otl-online-selected-header {
  height: auto;
  margin: 0;
  padding: 0;

  line-height: 1.2;
}

.otl-online-selected-tags,
.otl-online-tag-search-shell {
  margin: 0;
  padding-block: 0;
}


/*
  Soundtrack gets the same natural-height behavior without
  changing its internal control layout.
*/
.otl-online-soundtrack-panel {
  align-self: start;
  justify-self: stretch;

  width: 100%;
  height: max-content;
  min-height: 0;
}


/*
  The obsolete Media metadata/footer never reserves space.
*/
.otl-online-media-placeholder-meta {
  display: none !important;
}

/* ---------- End Canonical compact Library layout ---------- */

/* ---------- Media Library final compact spacing ---------- */

/*
  Force the Media Library to size strictly from its visible
  contents. No flexible vertical distribution.
*/
.otl-online-media-placeholder {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  height: fit-content !important;
  min-height: 0 !important;

  align-self: start !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;

  gap: 0 !important;

  padding: 10px 11px !important;
}


/*
  A legacy helper paragraph should never reserve space even if
  some compatibility path happens to leave one in the DOM.
*/
.otl-online-media-placeholder > p {
  display: none !important;

  height: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/*
  Every direct section uses only its intrinsic height.
*/
.otl-online-media-placeholder
> .otl-online-media-placeholder-heading,
.otl-online-media-placeholder
> .otl-online-tag-picker {
  flex: 0 0 auto !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding-block: 0 !important;
}


/*
  Title -> picker:
  one deliberate 10px relationship.
*/
.otl-online-media-placeholder-heading {
  margin-bottom: 10px !important;
}


/*
  Selected state and search stay tightly grouped.
*/
.otl-online-tag-picker {
  display: flex !important;
  flex-direction: column !important;

  align-items: stretch !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;

  gap: 7px !important;
}


.otl-online-selected-wrap {
  display: flex !important;
  flex-direction: column !important;

  flex: 0 0 auto !important;

  height: auto !important;
  min-height: 0 !important;

  align-content: flex-start !important;
  justify-content: flex-start !important;

  gap: 5px !important;

  margin: 0 !important;
  padding: 0 !important;
}


.otl-online-selected-wrap[hidden] {
  display: none !important;
}


.otl-online-selected-header {
  flex: 0 0 auto !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1.1 !important;
}


.otl-online-selected-tags {
  flex: 0 0 auto !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


.otl-online-tag-search-shell {
  flex: 0 0 auto !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/*
  No obsolete footer may consume vertical space.
*/
.otl-online-media-placeholder-meta {
  display: none !important;
}


/*
  Make the selected-tag row a bit more compact too.
*/
.otl-online-tag-chip {
  min-height: 25px;
  padding-block: 4px;
}

/* ---------- End Media Library final compact spacing ---------- */


/* Selected row intrinsic height fix */

.otl-online-selected-header {
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.1 !important;
}

.otl-online-selected-header > span {
  min-height: 0;
  height: auto;
  line-height: 1.1;
}

.otl-online-selected-header > button {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* End Selected row intrinsic height fix */

/* ---------- Library shared vertical rhythm ---------- */

/*
  Media Library and Soundtrack Library use the exact same
  title -> primary-control spacing.
*/
.otl-online-media-placeholder,
.otl-online-soundtrack-panel {
  padding: 11px 12px !important;
  gap: 12px !important;
}


/*
  Do not add a separate Media-only heading margin.
  The shared card gap above controls the spacing.
*/
.otl-online-media-placeholder-heading,
.otl-online-soundtrack-heading {
  margin: 0 !important;
}


/*
  Media's tag picker is the primary-control region.
  It should not introduce space before itself.
*/
.otl-online-tag-picker {
  margin: 0 !important;
}


/*
  Once tags are selected, keep that internal stack compact.
*/
.otl-online-selected-wrap {
  gap: 5px !important;
}

.otl-online-tag-picker {
  gap: 7px !important;
}

/* ---------- End Library shared vertical rhythm ---------- */

/* ---------- Soundtrack selector + Preview row ---------- */

/*
  Soundtrack Library:
      title
      [ soundtrack selector ][ Preview ]

  Keep Preview beside the selector instead of creating
  a separate footer row beneath it.
*/
.otl-online-soundtrack-panel {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  grid-template-rows:
    auto
    auto !important;

  column-gap: 9px !important;
  row-gap: 12px !important;

  align-items: stretch !important;
}


/* Heading occupies the full card width. */
.otl-online-soundtrack-heading {
  grid-column: 1 / -1;
  grid-row: 1;

  margin: 0 !important;
}


/* Main soundtrack selector. */
.otl-online-soundtrack-panel
> select {
  grid-column: 1;
  grid-row: 2;

  width: 100%;
  min-width: 0;
  min-height: 38px;
}


/* Preview lives immediately beside the selector. */
.otl-online-soundtrack-actions {
  grid-column: 2;
  grid-row: 2;

  display: flex;
  align-items: stretch;
  justify-content: flex-end;

  min-width: 0;
  min-height: 0;

  margin: 0 !important;
}


/* Match the selector height. */
.otl-online-soundtrack-preview {
  min-height: 38px !important;
  height: 38px;

  padding-inline: 12px;

  margin: 0 !important;

  white-space: nowrap;
}


/*
  Empty-library messaging, when needed, gets its own full-width
  row rather than interfering with selector/Preview alignment.
*/
.otl-online-soundtrack-empty:not([hidden]) {
  grid-column: 1 / -1;
}

/* ---------- End Soundtrack selector + Preview row ---------- */



/* ---------- Library premium visual pass ---------- */

/*
  VISUAL HIERARCHY

  Outer light containers remain the strongest structural frame.
  Inner Library cards become quieter surfaces rather than
  another equally prominent outline.
*/
.otl-online-media-placeholder,
.otl-online-soundtrack-panel {
  border-color:
    rgba(148, 163, 184, .13) !important;

  background:
    radial-gradient(
      120% 110% at 0% 0%,
      rgba(var(--otl-pair-rgb), .055) 0%,
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(15, 23, 42, .56),
      rgba(2, 6, 23, .30)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 24px rgba(var(--otl-pair-rgb), .012);
}


/*
  Outer section headings stay clear but become slightly less
  dominant than the Library titles inside them.
*/
.otl-media-source-header > h2 {
  color: rgba(226, 232, 240, .90);
  font-weight: 770;
}


/*
  Library headings carry the main visual identity.
*/
.otl-online-media-placeholder-heading .otl-library-title,
.otl-online-soundtrack-heading .otl-library-title {
  color: #eef3fa;
  text-shadow:
    0 1px 0 rgba(0,0,0,.18);
}


/*
  Content-type icon:
  subtle dark tile + concentrated light-color accent.
*/
.otl-library-title-icon {
  border-color:
    rgba(var(--otl-pair-rgb), .25) !important;

  color:
    rgb(var(--otl-pair-rgb)) !important;

  background:
    linear-gradient(
      145deg,
      rgba(var(--otl-pair-rgb), .13),
      rgba(var(--otl-pair-rgb), .045)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(2,6,23,.14);
}


/*
  LIBRARY / LOCAL

  Flatten the switch shell so it reads as a mode selector rather
  than another nested card.
*/
.otl-media-source-switch {
  border-color:
    rgba(148, 163, 184, .10) !important;

  background:
    rgba(2, 6, 23, .20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);
}


.otl-media-source-option {
  color: #7d8ba0;

  transition:
    color 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}


.otl-media-source-option[aria-pressed="true"] {
  border-color:
    rgba(var(--otl-pair-rgb), .30) !important;

  color: #edf3fa !important;

  background:
    linear-gradient(
      145deg,
      rgba(var(--otl-pair-rgb), .14),
      rgba(var(--otl-pair-rgb), .075)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 10px rgba(var(--otl-pair-rgb), .025) !important;
}


@media (hover: hover) {
  .otl-media-source-option:not([aria-pressed="true"]):hover {
    color: #c4cfdd;

    background:
      rgba(148, 163, 184, .045) !important;
  }
}


/*
  PRIMARY CONTROLS

  Search and soundtrack selector use mostly neutral borders.
  Accent color is reserved for interaction/focus.
*/
.otl-online-tag-search,
.otl-online-soundtrack-panel > select {
  border-color:
    rgba(148, 163, 184, .24) !important;

  color: #e8edf5 !important;

  background:
    linear-gradient(
      180deg,
      rgba(3, 8, 22, .80),
      rgba(2, 6, 18, .70)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -1px 0 rgba(0,0,0,.12);

  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}


.otl-online-tag-search::placeholder {
  color: #728096;
}


.otl-online-tag-search:focus,
.otl-online-soundtrack-panel > select:focus {
  border-color:
    rgba(var(--otl-pair-rgb), .52) !important;

  outline: none;

  background:
    linear-gradient(
      180deg,
      rgba(3, 8, 22, .88),
      rgba(2, 6, 18, .78)
    ) !important;

  box-shadow:
    0 0 0 3px
      rgba(var(--otl-pair-rgb), .055),
    inset 0 1px 0
      rgba(255,255,255,.03) !important;
}


@media (hover: hover) {
  .otl-online-tag-search:hover:not(:focus),
  .otl-online-soundtrack-panel > select:hover:not(:focus) {
    border-color:
      rgba(148, 163, 184, .34) !important;
  }
}


/*
  SELECTED TAGS

  Let tag chips be one of the stronger accent-colored elements
  because they represent an active user choice.
*/
.otl-online-tag-chip {
  border-color:
    rgba(var(--otl-pair-rgb), .38) !important;

  color: #edf3f8 !important;

  background:
    linear-gradient(
      145deg,
      rgba(var(--otl-pair-rgb), .145),
      rgba(var(--otl-pair-rgb), .065)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);

  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}


.otl-online-tag-chip-remove {
  color: #8c9aae;
}


@media (hover: hover) {
  .otl-online-tag-chip:hover {
    border-color:
      rgba(var(--otl-pair-rgb), .56) !important;

    background:
      linear-gradient(
        145deg,
        rgba(var(--otl-pair-rgb), .19),
        rgba(var(--otl-pair-rgb), .085)
      ) !important;

    transform: translateY(-1px);
  }

  .otl-online-tag-chip:hover
  .otl-online-tag-chip-remove {
    color: #d2dbe6;
  }
}


/*
  "Selected" / "Clear" are supporting metadata rather than
  primary content.
*/
.otl-online-selected-header {
  color: #76859a;
}


.otl-online-selected-header button {
  color: #7d8ba0;
  transition: color 140ms ease;
}


@media (hover: hover) {
  .otl-online-selected-header button:hover {
    color: #cdd6e2;
  }
}


/*
  PREVIEW

  Secondary action: visually quieter than the selector itself.
*/
.otl-online-soundtrack-preview {
  border-color:
    rgba(148, 163, 184, .18) !important;

  color: #aeb9c8 !important;

  background:
    linear-gradient(
      145deg,
      rgba(148, 163, 184, .055),
      rgba(15, 23, 42, .18)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02);

  transition:
    color 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}




.otl-online-soundtrack-preview:disabled {
  color: #536173 !important;
  opacity: .36 !important;

  border-color:
    rgba(148, 163, 184, .07) !important;

  background:
    rgba(2, 6, 23, .28) !important;

  box-shadow: none !important;
  cursor: default !important;
  filter: saturate(.35);
}


@media (hover: hover) {
  .otl-online-soundtrack-preview:not(:disabled):hover {
    color: #eef3f8 !important;

    border-color:
      rgba(var(--otl-pair-rgb), .34) !important;

    background:
      rgba(var(--otl-pair-rgb), .09) !important;

    transform: translateY(-1px);
  }
}


/*
  CENTER DIVIDER

  Fade it at both ends so it separates without looking like
  a hard table/grid line.
*/
@media (min-width: 901px) {
  .otl-soundtrack-subzone::before {
    background:
      linear-gradient(
        to bottom,
        transparent 0%,
        rgba(var(--otl-pair-rgb), .08) 12%,
        rgba(148, 163, 184, .16) 34%,
        rgba(148, 163, 184, .16) 66%,
        rgba(var(--otl-pair-rgb), .08) 88%,
        transparent 100%
      ) !important;
  }
}


/*
  Tag-search result dropdown follows the same restrained surface
  treatment as the primary controls.
*/
.otl-online-tag-results {
  border-color:
    rgba(148, 163, 184, .18) !important;

  background:
    rgba(3, 8, 20, .96) !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.018);
}


.otl-online-tag-result {
  border-bottom-color:
    rgba(148, 163, 184, .075) !important;
}


@media (hover: hover) {
  .otl-online-tag-result:not(:disabled):hover {
    background:
      rgba(var(--otl-pair-rgb), .065) !important;
  }
}



/* ---------- Optical Library title text alignment ---------- */

/*
  Keep the Library icons fixed while nudging only the title text
  upward for optical centering.
*/
.otl-online-media-placeholder-heading
.otl-library-title
> span,
.otl-online-soundtrack-heading
.otl-library-title
> span {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-1px);
}

/* ---------- Optical Library title text alignment end ---------- */

/* ---------- End Library premium visual pass ---------- */



/* ---------- Shared Light heading hierarchy ---------- */

/*
  Green / Red identify the Light once at the outer-card level.

      Green Light
      ├── Media
      └── Soundtrack

  This avoids repeating "Green Light" and "Red Light"
  independently in both column headers.
*/
.otl-light-labeled-card {
  grid-template-areas:
    "light-title light-title"
    "media soundtrack"
    "settings settings";
}


/*
  Compact shared Light label.

  The fading accent rule visually connects the two halves
  without introducing another heavy border.
*/
.otl-light-pair-heading {
  grid-area: light-title;

  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;

  color: #dbe4ef;

  font-size: .76rem;
  font-weight: 820;
  line-height: 1;
  letter-spacing: .015em;
}


.otl-light-pair-heading::before {
  content: "";

  flex: 0 0 7px;

  width: 7px;
  height: 7px;

  border-radius: 999px;

  background:
    rgb(var(--otl-pair-rgb));

  box-shadow:
    0 0 9px
    rgba(var(--otl-pair-rgb), .28);
}


.otl-light-pair-heading::after {
  content: "";

  flex: 1 1 auto;

  height: 1px;

  background:
    linear-gradient(
      to right,
      rgba(var(--otl-pair-rgb), .22),
      rgba(var(--otl-pair-rgb), .06) 55%,
      transparent
    );
}


/*
  Media / Soundtrack are now concise second-level labels.
*/
.otl-media-source-header > h2 {
  white-space: nowrap;
}


/*
  Stacked layout keeps the hierarchy intact on smaller screens.
*/
@media (max-width: 900px) {
  .otl-light-labeled-card {
    grid-template-areas:
      "light-title"
      "media"
      "soundtrack"
      "settings";
  }
}

/* ---------- End Shared Light heading hierarchy ---------- */

/* ---------- Final independent Library geometry ---------- */

/*
  Media and Soundtrack live in the same outer grid row, but
  they must NOT stretch vertically to match one another.
*/
.otl-light-labeled-card
> .otl-media-subzone,
.otl-light-labeled-card
> .otl-soundtrack-subzone {
  align-self: start !important;

  height: fit-content !important;
  min-height: 0 !important;

  grid-template-rows:
    auto
    auto !important;

  align-content: start !important;
}


/*
  Library cards themselves always use intrinsic content height.

  No baseline min-height.
  No 100% height.
  No stretching because the opposite column became taller.
*/
.otl-light-labeled-card
.otl-online-media-placeholder,
.otl-light-labeled-card
.otl-online-soundtrack-panel {
  align-self: start !important;

  height: fit-content !important;
  min-height: 0 !important;
  max-height: none !important;
}


/*
  Outer Green/Red card follows the taller real column and then
  stops. It should not maintain an artificial content row.
*/
.otl-light-labeled-card {
  height: fit-content !important;
  min-height: 0 !important;

  align-items: start !important;
  align-content: start !important;
}


/* ----------------------------------------------------------
   TAG RESULTS
   ---------------------------------------------------------- */

/*
  Search results are an overlay, never normal-flow content.
*/
.otl-online-tag-search-shell {
  position: relative !important;
  z-index: 100;
}


.otl-online-tag-results:not([hidden]) {
  position: absolute !important;

  z-index: 10000 !important;

  top: calc(100% + 6px);
  right: 0;
  left: 0;

  max-height: 218px;

  overflow-x: hidden;
  overflow-y: auto;

  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 0 0 1px rgba(148,163,184,.08);
}


/*
  Do not clip the dropdown anywhere in its ancestor chain.
*/
#mediaSelection,
.uploads-card,
.otl-light-labeled-card,
.otl-media-subzone,
.otl-online-media-placeholder,
.otl-online-tag-picker,
.otl-online-tag-search-shell {
  overflow: visible !important;
}


/*
  Quick Start is a later section and was painting over the
  dropdown because of stacking-context order.

  While anything inside Media Selection has focus, lift the
  whole section above following page sections.
*/
#mediaSelection {
  position: relative;
}


#mediaSelection:focus-within {
  z-index: 1000;
}


/*
  Within each Light pair, Media's dropdown layer remains above
  the Soundtrack half.
*/
.otl-light-labeled-card
> .otl-media-subzone {
  z-index: 20;
}


.otl-light-labeled-card
> .otl-soundtrack-subzone {
  z-index: 10;
}

/* ---------- End Final independent Library geometry ---------- */

/* ---------- Light card border ownership ---------- */

/*
  The new combined Green / Red card owns its entire outer frame.

  Older upload-card styling used decorative pseudo-elements for
  top accents. Those can overlap the real rounded border and
  create the little protruding line visible at the upper-left.
*/
.otl-light-labeled-card::before,
.otl-light-labeled-card::after {
  content: none !important;
  display: none !important;
}


/*
  Draw exactly one continuous rounded frame.
*/
.otl-light-labeled-card {
  border:
    1px solid
    rgba(var(--otl-pair-rgb), .48) !important;

  border-top-color:
    rgba(var(--otl-pair-rgb), .70) !important;

  border-radius: 16px !important;

  background-clip: padding-box;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 0 0 1px rgba(2,6,23,.12) !important;
}


/*
  No child or legacy accent should draw across the card's
  physical top edge.
*/
.otl-light-labeled-card
> .otl-light-pair-heading {
  border-top: 0 !important;
  box-shadow: none;
}

/* ---------- End Light card border ownership ---------- */

/* ---------- Stable Media/Soundtrack divider ---------- */

@media (min-width: 901px) {

  /*
    Disable every legacy ::before divider.

    The divider is now drawn as part of the Soundtrack column's
    own background, so it cannot conflict with pseudo-elements
    from older layout passes.
  */
  .otl-soundtrack-subzone::before {
    content: none !important;
    display: none !important;
  }


  /*
    Draw one neutral faded vertical keyline directly inside the
    Soundtrack column.

    Because this is a background-image rather than another
    positioned layer, Green and Red render identically.
  */
  .otl-soundtrack-subzone {
    border-left: 0 !important;

    background-image:
      linear-gradient(
        to bottom,
        transparent 0%,
        rgba(148, 163, 184, .08) 12%,
        rgba(148, 163, 184, .22) 34%,
        rgba(148, 163, 184, .22) 66%,
        rgba(148, 163, 184, .08) 88%,
        transparent 100%
      ) !important;

    background-repeat: no-repeat !important;

    background-position:
      left 0 top 8px !important;

    background-size:
      1px calc(100% - 16px) !important;
  }


  /*
    Do not permanently stack Media above Soundtrack.

    That was another competing layer at their shared boundary.
    Media only needs to rise while its tag search is active.
  */
  .otl-light-labeled-card
  > .otl-media-subzone,
  .otl-light-labeled-card
  > .otl-soundtrack-subzone {
    z-index: auto !important;
  }


  .otl-light-labeled-card
  > .otl-media-subzone:focus-within {
    z-index: 30 !important;
  }
}


@media (max-width: 900px) {
  .otl-soundtrack-subzone {
    background-image: none !important;
  }
}

/* ---------- End Stable Media/Soundtrack divider ---------- */

/* ---------- Yellow Library dropdown geometry ---------- */

/*
  Yellow uses the same dropdown layering model as Green / Red,
  but it also has later Yellow-control cards beneath the Media
  row. Lift the complete Media row above those siblings while
  Tag search has focus.
*/
.yellow-premium-feature {
  position: relative;
}

.yellow-premium-feature:has(
  .otl-online-tag-results:not([hidden])
) {
  overflow: visible !important;
  z-index: 1000;
}

.yellow-premium-feature:has(
  .otl-online-tag-results:not([hidden])
)
.yellow-config,
.yellow-premium-feature:has(
  .otl-online-tag-results:not([hidden])
)
.otl-combined-media-grid,
.yellow-premium-feature:has(
  .otl-online-tag-results:not([hidden])
)
.otl-combined-media-card,
.yellow-premium-feature:has(
  .otl-online-tag-results:not([hidden])
)
.otl-media-subzone,
.yellow-premium-feature:has(
  .otl-online-tag-results:not([hidden])
)
.otl-online-media-placeholder,
.yellow-premium-feature:has(
  .otl-online-tag-results:not([hidden])
)
.otl-online-tag-picker,
.yellow-premium-feature:has(
  .otl-online-tag-results:not([hidden])
)
.otl-online-tag-search-shell {
  overflow: visible !important;
}

.yellow-premium-feature
.otl-combined-media-grid {
  position: relative;
}

.yellow-premium-feature:has(
  .otl-online-tag-results:not([hidden])
)
.otl-combined-media-grid {
  z-index: 100;
}

.yellow-premium-feature
.otl-combined-media-card {
  position: relative;
}

.yellow-premium-feature:has(
  .otl-online-tag-results:not([hidden])
)
.otl-combined-media-card {
  z-index: 100;
}

.yellow-premium-feature
.otl-combined-media-card
> .otl-media-subzone {
  position: relative;
  z-index: 20;
}

.yellow-premium-feature
.otl-combined-media-card
> .otl-soundtrack-subzone {
  position: relative;
  z-index: 10;
}

/*
  Yellow Frequency and the remaining Yellow controls come later
  in DOM order. Keep them beneath the active Media dropdown.
*/
.yellow-premium-feature
.yellow-controls-grid {
  position: relative;
  z-index: 1;
}

.yellow-premium-feature:has(
  .otl-online-tag-results:not([hidden])
)
.yellow-controls-grid {
  z-index: 1 !important;
}

/*
  Green / Red suppress the old upload-card decorative
  pseudo-elements. Do the same for Yellow so overflow-visible
  does not expose the stray yellow border/accent line.
*/
.yellow-premium-feature
.otl-combined-media-card::before,
.yellow-premium-feature
.otl-combined-media-card::after {
  content: none !important;
  display: none !important;
}

/* ---------- End Yellow Library dropdown geometry ---------- */


/* ---------- Simplified Green / Red media selection ---------- */

/*
  Keep the two Light containers and their colored frames, but let the
  controls live directly on those surfaces. The Light name now belongs
  to each functional heading instead of occupying a separate heading row.
*/
#mediaSelection
.otl-light-labeled-card {
  grid-template-areas:
    "media soundtrack"
    "settings settings" !important;

  row-gap: 0 !important;
}

#mediaSelection
.otl-light-pair-heading {
  display: none !important;
}


/* The functional titles are now the only heading layer inside each card. */
#mediaSelection
.otl-media-source-header {
  margin-bottom: 5px !important;
}

#mediaSelection
.otl-media-source-header
> h2 {
  margin: 0 !important;

  color: #eef2f7;

  font-size: 1rem;
  font-weight: 820;
  line-height: 1.15;
  letter-spacing: -.012em;
}


/*
  Remove the nested Library-card chrome. Search, selector, Preview, and
  Local controls remain unchanged; only the redundant inner container
  treatment is flattened.
*/
#mediaSelection
.otl-online-media-placeholder,
#mediaSelection
.otl-online-soundtrack-panel {
  height: fit-content !important;
  min-height: 0 !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: none !important;
  box-shadow: none !important;

  align-content: start !important;
}

#mediaSelection
.otl-online-media-placeholder {
  grid-template-rows: auto !important;
}

#mediaSelection
.otl-online-tag-picker {
  margin-top: 0 !important;
}


/* With "Selected" removed, Clear remains a quiet right-aligned action. */
#mediaSelection
.otl-online-selected-header {
  justify-content: flex-end !important;
}


/*
  Soundtrack no longer has a Library title row, so selector + Preview
  become the first and only visible row.
*/
#mediaSelection
.otl-online-soundtrack-panel {
  grid-template-rows: auto !important;
  row-gap: 0 !important;
}

#mediaSelection
.otl-online-soundtrack-panel
> select,
#mediaSelection
.otl-online-soundtrack-actions {
  grid-row: 1 !important;
}


@media (max-width: 900px) {
  #mediaSelection
  .otl-light-labeled-card {
    grid-template-areas:
      "media"
      "soundtrack"
      "settings" !important;
  }
}

/* ---------- End simplified Green / Red media selection ---------- */


/* ---------- Media selection visual alignment refinement ---------- */

/*
  Keep the primary Media search aligned with the Soundtrack selector.
  Selected tags are supporting state, so they sit below the primary
  control instead of pushing it downward.
*/
#mediaSelection
.otl-online-tag-search-shell {
  order: 1;
}

#mediaSelection
.otl-online-selected-wrap {
  order: 2;

  display: flex;
  align-items: center;
  gap: 8px !important;

  min-width: 0;
}

#mediaSelection
.otl-online-selected-tags {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}

#mediaSelection
.otl-online-selected-header {
  order: 2;
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: flex-end !important;
}


/*
  When Red has selected tags and Green does not, both outer Light
  containers should still form one balanced pair rather than leaving
  an empty gap beneath the shorter card.
*/
@media (min-width: 721px) {
  #mediaSelection
  > .otl-light-labeled-card {
    align-self: stretch !important;
    height: auto !important;
  }
}

/* ---------- End media selection visual alignment refinement ---------- */


/* ---------- Media title icons + horizontal selected tags ---------- */

/* Reintroduced media/soundtrack glyphs now belong to the functional titles. */
#mediaSelection
.otl-media-functional-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  min-width: 0;
}

#mediaSelection
.otl-media-functional-title-icon {
  flex: 0 0 18px;

  width: 18px;
  height: 18px;

  color: rgb(var(--otl-pair-rgb));
  opacity: .9;
}

#mediaSelection
.otl-media-functional-title-text {
  min-width: 0;
}


/*
  Selected tags read in normal left-to-right order.
  The tag list takes the available row width; Clear remains a quiet,
  fixed-width action immediately to the right of the tags.
*/
#mediaSelection
.otl-online-selected-wrap {
  flex-direction: row !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;

  gap: 8px !important;
}

#mediaSelection
.otl-online-selected-tags {
  order: 1;

  display: flex !important;
  flex: 0 1 auto !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;

  gap: 5px;

  min-width: 0;
}

#mediaSelection
.otl-online-selected-header {
  order: 2;

  flex: 0 0 auto !important;

  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;

  margin-left: 2px !important;
}

#mediaSelection
.otl-online-selected-header
> button {
  white-space: nowrap;
}

/* ---------- End media title icons + horizontal selected tags ---------- */


/* ---------- Responsive Media selection hardening ---------- */

/*
  Desktop / narrow-desktop:
  each Light card still contains two columns, so give the longer
  state-specific titles their own row above the source switch before
  the available column width gets cramped.
*/
@media (min-width: 901px) and (max-width: 1180px) {
  #mediaSelection
  .otl-media-source-header {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  #mediaSelection
  .otl-media-source-switch {
    width: auto !important;
    max-width: 100%;
  }
}


/*
  Tablet:
  Media and Soundtrack already stack inside each Red / Green card at
  this width, so the title and source switch can comfortably share one
  row again. Slightly reduce the title size to protect the longest label.
*/
@media (min-width: 721px) and (max-width: 900px) {
  #mediaSelection
  .otl-media-source-header {
    align-items: center !important;
    flex-direction: row !important;
    gap: 10px !important;
  }

  #mediaSelection
  .otl-media-functional-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .95rem !important;
  }

  #mediaSelection
  .otl-media-functional-title-text {
    white-space: nowrap;
  }

  #mediaSelection
  .otl-media-source-switch {
    flex: 0 0 auto;
  }
}


/*
  Phone / small tablet:
  Red and Green become full-width cards. Keep the compact title row down
  to 521px; below that, stack the source switch at full width so neither
  the title nor the segmented control has to wrap.
*/
@media (max-width: 720px) {
  #mediaSelection
  > .otl-light-labeled-card {
    align-self: start !important;
    height: fit-content !important;
  }

  #mediaSelection
  .otl-media-functional-title {
    min-width: 0;
  }

  #mediaSelection
  .otl-online-selected-tags {
    flex: 1 1 auto !important;
  }
}

@media (max-width: 520px) {
  #mediaSelection
  .otl-media-source-header {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #mediaSelection
  .otl-media-functional-title {
    width: 100%;
    font-size: .96rem !important;
  }

  #mediaSelection
  .otl-media-source-switch {
    width: 100% !important;
  }

  #mediaSelection
  .otl-media-source-option {
    flex: 1 1 0 !important;
  }

  #mediaSelection
  .otl-online-selected-wrap {
    width: 100%;
  }

  #mediaSelection
  .otl-online-selected-tags {
    flex: 1 1 auto !important;
  }

  #mediaSelection
  .otl-online-selected-header {
    flex: 0 0 auto !important;
  }
}

/* ---------- End Responsive Media selection hardening ---------- */


/* ---------- Custom Local upload controls ---------- */

/*
  Local mode should carry the same visual weight as the Library search /
  soundtrack selector. Keep the real file input for browser behavior and
  accessibility, but move its visible chrome into a deliberate OTL control.
*/
#mediaSelection
.otl-native-file-input {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  border: 0 !important;

  opacity: 0;

  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


#mediaSelection
.otl-local-file-control {
  display: flex;
  align-items: center;
  gap: 10px;

  box-sizing: border-box;

  width: 100%;
  min-width: 0;
  min-height: 38px;

  padding: 5px 7px;

  border:
    1px solid
    rgba(148, 163, 184, .24);

  border-radius: 9px;

  color: #e8edf5;

  background:
    linear-gradient(
      180deg,
      rgba(3, 8, 22, .80),
      rgba(2, 6, 18, .70)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -1px 0 rgba(0,0,0,.12);

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}


#mediaSelection
.otl-local-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  min-height: 27px;

  padding: 4px 9px;

  border:
    1px solid
    rgba(var(--otl-pair-rgb), .28);

  border-radius: 7px;

  color: #e8eef7;

  background:
    rgba(var(--otl-pair-rgb), .095);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);

  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}


#mediaSelection
.otl-local-file-status {
  min-width: 0;

  overflow: hidden;

  color: #8d9aaf !important;

  font-size: .72rem !important;
  font-weight: 650;
  line-height: 1.2 !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}


#mediaSelection
.otl-native-file-input:focus-visible
+ .otl-local-file-control {
  border-color:
    rgba(var(--otl-pair-rgb), .52);

  outline: none;

  box-shadow:
    0 0 0 2px rgba(var(--otl-pair-rgb), .055),
    inset 0 1px 0 rgba(255,255,255,.025);
}


@media (hover: hover) {
  #mediaSelection
  .otl-local-file-control:hover {
    border-color:
      rgba(var(--otl-pair-rgb), .40);

    background:
      linear-gradient(
        180deg,
        rgba(5, 12, 28, .88),
        rgba(2, 6, 18, .76)
      );
  }

  #mediaSelection
  .otl-local-file-control:hover
  .otl-local-file-button {
    border-color:
      rgba(var(--otl-pair-rgb), .42);

    background:
      rgba(var(--otl-pair-rgb), .13);
  }
}


/*
  Drag/drop remains available across the full Media/Soundtrack subzone.
  Keep the explanatory text as supporting metadata rather than another
  full control row.
*/
#mediaSelection
.otl-media-source-local,
#mediaSelection
.otl-soundtrack-source-local {
  position: relative;

  gap: 6px !important;
}


#mediaSelection
.otl-media-source-local
> .otl-drop-hint,
#mediaSelection
.otl-soundtrack-source-local
> .otl-drop-hint {
  box-sizing: border-box;

  margin: -2px 0 0 !important;
  padding-left: 8px;

  color: #66758b;

  font-size: .66rem;
  font-weight: 650;
  line-height: 1.35;
}


/* Phone: keep filename/status readable without making the button dominate. */
@media (max-width: 520px) {
  #mediaSelection
  .otl-local-file-control {
    gap: 8px;
  }

  #mediaSelection
  .otl-local-file-button {
    padding-inline: 8px;
  }

  #mediaSelection
  .otl-local-file-status {
    font-size: .69rem !important;
  }
}

/* ---------- End Custom Local upload controls ---------- */