/* Desktop music catalogue. Keep the generator on the left and expose the
   inspiration browser in the right workspace column, like image/video. */
.audio-right-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.desktop-music-catalogue {
    min-width: 0;
    margin: 0;
    padding: 22px;
    border: 1px solid var(--creation-line);
    border-radius: 14px;
    background: var(--creation-panel, #fff);
}
.desktop-music-catalogue-head,
.desktop-music-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.desktop-music-catalogue-head h2,
.desktop-music-section-head h3 { margin: 0; color: var(--creation-ink); }
.desktop-music-catalogue-head h2 { font-size: 24px; }
.desktop-music-catalogue-head p { margin: 7px 0 0; color: var(--creation-muted); font-size: 14px; }
.desktop-music-catalogue-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.desktop-music-tabs { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--creation-line); border-radius: 9px; background: var(--creation-soft); }
.desktop-music-tabs button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--creation-muted); font: inherit; font-size: 13px; cursor: pointer; }
.desktop-music-tabs button.active { background: #fff; color: var(--creation-blue); box-shadow: 0 1px 4px rgba(28,49,78,.1); font-weight: 700; }
.desktop-music-search { width: 220px; min-height: 38px; padding: 0 12px; border: 1px solid var(--creation-line); border-radius: 8px; background: var(--creation-panel, #fff); color: var(--creation-ink); font: inherit; font-size: 13px; }
.desktop-music-search:focus { outline: 2px solid rgba(11,111,242,.16); border-color: var(--creation-blue); }
.desktop-music-section { margin-top: 28px; }
.desktop-music-section[hidden] { display: none; }
.desktop-music-section-head { align-items: center; margin-bottom: 14px; }
.desktop-music-section-head h3 { font-size: 18px; }
.desktop-music-count { color: var(--creation-muted); font-size: 12px; }
.desktop-music-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.desktop-music-card { min-width: 0; overflow: hidden; border: 1px solid var(--creation-line); border-radius: 10px; background: var(--creation-panel, #fff); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.desktop-music-card:hover { border-color: #a8c8f2; box-shadow: 0 10px 24px rgba(22,70,124,.08); transform: translateY(-1px); }
.desktop-music-card-art { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--creation-soft); }
.desktop-music-card-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.desktop-music-play { position: absolute; left: 12px; bottom: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: #0b6ff2; cursor: pointer; box-shadow: 0 5px 15px rgba(12,40,75,.18); }
.desktop-music-play:hover { background: #fff; transform: scale(1.04); }
.desktop-music-play span { font-size: 13px; line-height: 1; }
.desktop-music-play.is-playing { background: #0b6ff2; color: #fff; }
.desktop-music-duration { position: absolute; right: 9px; bottom: 9px; padding: 4px 7px; border-radius: 5px; background: rgba(15,23,42,.68); color: #fff; font-size: 11px; line-height: 1; }
.desktop-music-card-copy { min-width: 0; padding: 12px 12px 13px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.desktop-music-card-copy > div { min-width: 0; display: grid; gap: 4px; }
.desktop-music-card-copy strong { overflow: hidden; color: var(--creation-ink); font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.desktop-music-card-copy small { overflow: hidden; color: var(--creation-muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.desktop-music-use { flex: 0 0 auto; min-height: 28px; padding: 0 8px; border: 1px solid #bdd4f2; border-radius: 6px; background: transparent; color: var(--creation-blue); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.desktop-music-use:hover { background: var(--creation-soft); border-color: var(--creation-blue); }
.desktop-music-empty { grid-column: 1 / -1; margin: 0; padding: 30px; color: var(--creation-muted); text-align: center; }
.desktop-music-notice { margin: 16px 0 0; padding: 10px 13px; border-radius: 8px; background: var(--creation-soft); color: var(--creation-blue); font-size: 13px; }
.desktop-music-notice[hidden] { display: none; }
body[data-ui-theme="dark"] .desktop-music-tabs button.active { background: var(--fuuvo-dark-input); box-shadow: none; }
body[data-ui-theme="dark"] .desktop-music-search,
body[data-ui-theme="dark"] .desktop-music-card { background: var(--fuuvo-dark-input, #172437); }
body[data-ui-theme="dark"] .desktop-music-play { background: rgba(237,245,255,.94); }
body[data-ui-theme="dark"] .desktop-music-play.is-playing { background: #3b82f6; }
body[data-ui-theme="dark"] .desktop-music-use { border-color: #5276a5; }

/* The studio shell keeps a light fallback for its legacy dark variables.
   Resolve the catalogue surfaces explicitly so dark mode does not produce a
   white panel with low-contrast copy. */
html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-catalogue,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-catalogue {
    border-color: #344357 !important;
    background: #1a222e !important;
    color: #eef2f7;
    box-shadow: none;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-catalogue-head h2,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-catalogue-head h2,
html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-section-head h3,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-section-head h3 {
    color: #f5f8fc !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-catalogue-head p,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-catalogue-head p,
html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-count,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-count,
html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-empty,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-empty {
    color: #b9c8dc !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-tabs,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-tabs {
    border-color: #344357;
    background: #182332;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-tabs button,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-tabs button {
    color: #b9c8dc;
    -webkit-text-fill-color: currentColor;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-tabs button.active,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-tabs button.active {
    background: #203c62;
    color: #d7e8ff;
    -webkit-text-fill-color: currentColor;
    box-shadow: none;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-tabs button:hover,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-tabs button:hover {
    background: #223650;
    color: #c5ddff;
    -webkit-text-fill-color: currentColor;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-search,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-search {
    border-color: #344357 !important;
    background: #161e29 !important;
    color: #eef2f7 !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-search::placeholder,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-search::placeholder {
    color: #b9c8dc !important;
    opacity: 1;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-card,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-card {
    border-color: #344357 !important;
    background: #161e29 !important;
    box-shadow: none;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-card:hover,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-card:hover {
    border-color: #6ba8ff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-card-copy strong,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-card-copy strong {
    color: #eef2f7 !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-card-copy small,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-card-copy small {
    color: #9eacc0 !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-use,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-use {
    border-color: #5276a5 !important;
    color: #9dccff !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-use:hover,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-use:hover {
    border-color: #79b3ff !important;
    background: #223650;
}

html[data-ui-theme="dark"] body #creation-app[data-creation-page="music"] .desktop-music-notice,
body[data-ui-theme="dark"] #creation-app[data-creation-page="music"] .desktop-music-notice {
    background: #182e4a;
    color: #b8d4ff !important;
    -webkit-text-fill-color: currentColor !important;
}
@media (min-width: 921px) {
    /* The shared studio shell is a fixed-height workspace. Let this page
       retain that generator while making the catalogue a normal scroll step. */
    html body #creation-app[data-creation-page="music"].studio-workspace .creation-main {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    html body #creation-app[data-creation-page="music"].studio-workspace .audio-detail-layout {
        flex: 0 0 auto;
        height: var(--studio-control-height, calc(100dvh - 64px));
        min-height: 0;
    }
    html body #creation-app[data-creation-page="music"].studio-workspace .audio-right-column {
        height: var(--studio-control-height, calc(100dvh - 64px));
        min-height: 0;
        max-height: var(--studio-control-height, calc(100dvh - 64px));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
    html body #creation-app[data-creation-page="music"].studio-workspace .desktop-music-catalogue {
        flex: 0 0 auto;
    }
}
@media (min-width: 921px) and (max-width: 1180px) {
    .desktop-music-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .desktop-music-catalogue-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 920px) {
    .audio-right-column { display: contents; }
    .desktop-music-catalogue { display: none; }
}