/* Publishing catalog. Portal shell, smaller type, Publishing reel ink. */
.music-body {
    color: #E5D4C1;
    --portal-fg: #E5D4C1;
    --c1: #E5D4C1;
    --fg: #E5D4C1;
    --text: #E5D4C1;
    --line: #E5D4C1;
    --now-playing-fg: #E5D4C1;
    --now-playing-bg: #ffffff;
    --portal-heading-size: 13px;
    font-size: 13px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-anchor: none;
}

.music-body .portal-hero .brand.is-dead {
    cursor: default;
    pointer-events: none;
}

/* Wine .offer-new-btn: 31px badges in a row, immediately right of the login initial. */
.music-brand-tools {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: calc(var(--portal-gutter) + 40px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.music-brand-star,
.music-mode-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #E5D4C1;
    cursor: pointer;
    pointer-events: auto;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
}

.music-mode-btn {
    background: #E5D4C1;
    color: #fff;
}

.music-mode-btn svg {
    display: block;
    width: 18px;
    height: 18px;
}

.music-mode-btn[hidden] {
    display: none !important;
}

.music-brand-star-icon {
    display: block;
    width: 31px;
    height: 31px;
}

.music-brand-star.is-filter::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c1, #E5D4C1);
    box-shadow: 0 0 0 2px var(--c0, #fff);
}

.music-brand-star[hidden] {
    display: none !important;
}

.music-body .portal-hero .brand-logo {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 360 / 195;
    background-color: #E5D4C1;
    -webkit-mask-image: url("../img/brand/logo-luckyornot.svg?v=0.2.433");
    mask-image: url("../img/brand/logo-luckyornot.svg?v=0.2.433");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-mode: alpha;
}

.music-page {
    max-width: var(--portal-col-max);
    width: 100%;
    margin: 0 auto;
    padding: 8px var(--portal-gutter) 48px;
    box-sizing: border-box;
}

.music-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
}

.music-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.music-search-wrap[hidden] {
    display: none !important;
}

.music-search {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--portal-fg);
    border-radius: 0;
    background: transparent;
    color: var(--portal-fg);
    caret-color: var(--portal-fg);
    font: inherit;
    font-size: 13px;
    padding: 8px 28px 8px 0;
    box-sizing: border-box;
}

.music-search-clear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--portal-fg);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.music-search-clear[hidden] {
    display: none !important;
}

.music-search:focus,
.music-search:focus-visible {
    outline: none;
    box-shadow: none;
}

.music-search::-webkit-search-decoration,
.music-search::-webkit-search-cancel-button,
.music-search::-webkit-search-results-button,
.music-search::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

.music-toolbar .share-dl-btn,
.music-toolbar .auth-btn,
.music-form .share-dl-btn,
.music-form .auth-btn,
.music-row-actions .share-dl-btn,
.music-row-actions .auth-btn,
.music-columns-menu .auth-btn {
    min-width: 0;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 0;
    background: var(--portal-fg);
    color: var(--portal-bg);
    text-decoration: none;
    border: none;
}

.music-columns-shade {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--portal-bg) 72%, transparent);
}

.music-columns-shade[hidden],
.music-form-shade[hidden] {
    display: none !important;
}

.music-form-shade {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: color-mix(in srgb, var(--portal-bg) 72%, transparent);
}

body.is-form-open,
body.is-columns-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.is-columns-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

body.is-columns-open .music-stickbar {
    z-index: 21;
}

body.is-columns-open .portal-hero,
body.is-columns-open .music-form,
body.is-columns-open #nowPlayingBar,
body.is-columns-open .music-toolbar,
body.is-columns-open .music-stickbar .music-table th:not(.music-pin),
body.is-columns-open .music-table-wrap {
    pointer-events: none;
}

body.is-columns-open .music-table-wrap {
    opacity: 0.35;
}

body.is-columns-open .music-stickbar .music-table th {
    background: var(--portal-bg);
}

body.is-columns-open .music-columns-menu {
    pointer-events: auto;
}

.music-columns-menu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: min(70vh, 420px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    margin: 0;
    padding: 10px 12px 12px;
    background: var(--portal-bg);
    border-bottom: 1px solid var(--portal-fg);
}

.music-columns-menu[hidden] {
    display: none !important;
}

.music-col-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.music-col-row label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.music-col-row .auth-btn {
    padding: 2px 8px;
}

.music-status {
    min-height: 1.2em;
    margin: 0 0 8px;
    font-size: 12px;
}

/* Wine/portal .topbar: logo scrolls away; this strip sticks. Must be hero sibling. */
.music-stickbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--c0, var(--portal-bg, #fff));
    width: 100%;
    max-width: none;
}

.music-stickbar[hidden] {
    display: none !important;
}

.music-stickbar-inner {
    max-width: var(--portal-col-max);
    width: 100%;
    margin: 0 auto;
    padding: 8px var(--portal-gutter) 0;
    box-sizing: border-box;
}

.music-table-wrap {
    position: relative;
    margin: 0 0 16px;
}

.music-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    font-size: 12px;
}

.music-table-head {
    margin: 0;
}

.music-table th,
.music-table td {
    position: relative;
    padding: 7px 8px;
    border-bottom: 1px solid var(--portal-fg);
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.music-table th {
    overflow: visible;
    font-weight: 600;
    user-select: none;
    background: var(--portal-bg, #fff);
}

.music-th-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    padding-right: 10px;
}

.music-sort {
    margin-left: 4px;
}

.music-table tbody tr.is-open td {
    border-bottom: none;
}

.music-table tbody tr:not(.music-detail) {
    cursor: pointer;
}

.music-resizer {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 14px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.music-resizer.is-fixed {
    cursor: default;
    pointer-events: none;
}

.music-text-btn {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.music-resizer::after {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    right: 4px;
    width: 1px;
    background: var(--portal-fg);
}

.music-table th.is-fill,
.music-table td.is-fill {
    width: auto;
    max-width: none;
}

.music-pin {
    position: sticky;
    right: 0;
    z-index: 2;
    width: 36px;
    max-width: 36px;
    padding: 0;
    background: var(--portal-bg);
    text-align: right;
    overflow: visible;
}

.music-table thead th.music-pin {
    z-index: 4;
}

.music-pin .music-icon-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    text-decoration: none;
    color: var(--portal-fg);
}

.music-pin .music-row-actions {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding-left: 8px;
    background: var(--portal-bg);
}

.music-table td.music-title,
.music-table td:has(.music-title-cell),
html.is-music-phone .music-table td.music-title,
html.is-music-phone .music-table td:has(.music-title-cell),
html.is-music-phone .music-table th.is-fill {
    padding-left: 0;
}

.music-title-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.music-title-stack {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.music-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-play-btn.is-new {
    color: #f6eb0f;
    font-size: 15px;
    line-height: 1;
}

.music-table tr.is-brief-hit .music-play-btn {
    color: #f6eb0f;
}

.music-why {
    font-size: 11px;
    line-height: 1.3;
    color: #f6eb0f;
    opacity: 1;
    white-space: normal;
}

.music-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    vertical-align: middle;
}

.music-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: music-dot 1.1s ease-in-out infinite;
}

.music-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.music-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes music-dot {
    0%,
    80%,
    100% {
        opacity: 0.25;
    }
    40% {
        opacity: 1;
    }
}

.music-genre-hint {
    margin: 0 0 8px;
    font-size: 12px;
}

.music-genre-use {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.music-body:has(#nowPlayingBar:not([hidden])) {
    --chatarina-fab-bottom: calc(108px + var(--chatarina-safe-bottom));
    --chatarina-chat-bottom: calc(108px + var(--chatarina-safe-bottom));
}

.music-play-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 10px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--portal-fg);
    cursor: pointer;
}

.music-play-btn svg {
    display: block;
    width: 10px;
    height: 10px;
}

.music-table tr.music-detail td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    vertical-align: top;
    padding-top: 2px;
    padding-bottom: 10px;
}

.music-detail-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0 0 0 18px;
}

.music-detail-list p {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: pre-wrap;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.music-detail-list span {
    font-weight: 500;
}

.music-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.music-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    color: var(--portal-fg);
    cursor: pointer;
    font: inherit;
    font-size: 20px;
    line-height: 1;
}

.music-icon-btn svg {
    display: block;
    width: 16px;
    height: 16px;
}

.music-table th.music-playlist-action,
.music-table td.music-playlist-action {
    text-align: right;
    padding-left: 2px;
    padding-right: 4px;
}

.music-playlist-action-btn {
    width: 28px;
    height: 28px;
    margin-left: auto;
}

.music-playlist-action-btn svg {
    width: 15px;
    height: 15px;
}

.music-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 14px 8px;
    background: var(--portal-bg);
    border-bottom: 1px solid var(--portal-fg);
}

.music-form-head h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-form-scroll {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 10px 14px 12px;
}

.music-field {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.music-drop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--portal-bg) 82%, transparent);
    color: var(--portal-fg);
    font-size: 15px;
    font-weight: 600;
    pointer-events: none;
}

.music-drop[hidden] {
    display: none !important;
}

.music-form {
    position: fixed;
    z-index: 91;
    top: max(12px, env(safe-area-inset-top, 0px));
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
    margin: 0;
    background: var(--portal-bg);
    overflow: hidden;
    box-sizing: border-box;
}

.music-form[hidden] {
    display: none !important;
}

.music-form h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--portal-fg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.music-body .music-form .auth-label {
    margin: 0;
    color: var(--portal-fg);
    font-size: 12px;
    font-weight: 500;
    opacity: 0.8;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.music-field-static {
    margin: 0;
    padding: 1px 0 5px;
    border-bottom: 1px solid var(--portal-fg);
    color: var(--portal-fg);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    min-height: 1.3em;
}

.music-form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.music-form input[type="number"]::-webkit-outer-spin-button,
.music-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.music-form .auth-input,
.music-form select.auth-input,
.music-form textarea.auth-input {
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--portal-fg);
    border-radius: 0;
    background: transparent;
    color: var(--portal-fg);
    caret-color: var(--portal-fg);
    font: inherit;
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
    padding: 1px 0 5px;
}

.music-form .auth-input:focus,
.music-form .auth-input:focus-visible,
.music-form select.auth-input:focus,
.music-form select.auth-input:focus-visible,
.music-form textarea.auth-input:focus,
.music-form textarea.auth-input:focus-visible {
    outline: none;
    box-shadow: none;
}

.music-form .auth-input:-webkit-autofill,
.music-form .auth-input:-webkit-autofill:hover,
.music-form .auth-input:-webkit-autofill:focus,
.music-form .auth-input:-webkit-autofill:active,
.music-form textarea.auth-input:-webkit-autofill,
.music-form textarea.auth-input:-webkit-autofill:hover,
.music-form textarea.auth-input:-webkit-autofill:focus,
.music-form textarea.auth-input:-webkit-autofill:active,
.music-form select.auth-input:-webkit-autofill,
.music-form select.auth-input:-webkit-autofill:hover,
.music-form select.auth-input:-webkit-autofill:focus,
.music-form select.auth-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--portal-fg);
    caret-color: var(--portal-fg);
    border: none;
    border-bottom: 1px solid var(--portal-fg);
    border-radius: 0;
    box-shadow: 0 0 0 1000px var(--portal-bg) inset;
    transition: background-color 99999s ease-out 0s;
}

.music-form select.auth-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8' fill='none' stroke='%23E5D4C1' stroke-width='1.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px 12px;
    padding-right: 18px;
}

.music-form textarea.auth-input {
    min-height: 72px;
    resize: vertical;
}

.music-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 4px 0;
}

.music-replace {
    display: flex;
    align-items: center;
    gap: 10px;
}

.music-replace .share-dl-btn {
    cursor: pointer;
}

.music-replace-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.music-form-foot {
    flex: 0 0 auto;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--portal-bg);
    border-top: 1px solid var(--portal-fg);
}

.music-form-foot .music-status {
    min-height: 0;
    margin: 0 0 8px;
}

.music-form-foot .music-status:empty {
    display: none;
    margin: 0;
}

.music-form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.music-form-actions .music-delete {
    margin-right: auto;
}

.music-meta-note {
    margin: 0;
    font-size: 12px;
    opacity: 0.8;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

#musicFormContext {
    white-space: pre-line;
    color: #f6eb0f;
    opacity: 1;
}

#musicFormContext .music-listen-again {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--portal-fg);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

html.is-music-phone,
html.is-music-phone body.music-body {
    overflow-x: hidden;
    max-width: 100%;
}

html.is-music-phone .music-page,
html.is-music-phone .music-stickbar-inner {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

html.is-music-phone .music-table,
html.is-music-phone .music-table-head {
    width: 100% !important;
    max-width: 100%;
}

html.is-music-phone .music-table th,
html.is-music-phone .music-table td {
    padding-left: 6px;
    padding-right: 6px;
}

html.is-music-phone .music-table th.is-fill,
html.is-music-phone .music-table td.is-fill {
    min-width: 0;
}

html.is-music-phone .music-table .music-playlist-title {
    min-width: 0;
}

html.is-music-phone .music-form {
    left: max(var(--portal-gutter), env(safe-area-inset-left, 0px)) !important;
    right: max(var(--portal-gutter), env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
}

.music-gate {
    margin: 24px 0;
    font-size: 13px;
}

.music-gate a {
    color: inherit;
}

.music-select-head {
    z-index: 4;
}

.music-select {
    text-align: center;
}

.music-select-head,
.music-select {
    padding-left: 4px;
    padding-right: 4px;
}

.music-select-label {
    display: block;
    cursor: default;
    font-weight: 600;
}

button.music-select-label.is-clear {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.music-select-box {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #E5D4C1;
    cursor: pointer;
}

.music-select-box svg {
    display: block;
    width: 12px;
    height: 12px;
    opacity: 0;
}

.music-select-box.is-on svg {
    opacity: 1;
}

.music-select-box:not(.is-on).is-shimmer svg {
    opacity: 1;
    transition: none;
    /* 50/50: halv synlig bock, halv shimmer-glimt */
    -webkit-mask-image: linear-gradient(
        105deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 24%,
        #000 40%,
        #000 60%,
        rgba(0, 0, 0, 0.5) 76%,
        rgba(0, 0, 0, 0.5) 100%
    );
    mask-image: linear-gradient(
        105deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 24%,
        #000 40%,
        #000 60%,
        rgba(0, 0, 0, 0.5) 76%,
        rgba(0, 0, 0, 0.5) 100%
    );
    -webkit-mask-size: 220% 100%;
    mask-size: 220% 100%;
    animation: music-check-shimmer 2.4s ease-in-out infinite;
}

.music-select-box:not(.is-on).is-shimmer.is-shimmer-out svg {
    opacity: 0;
    transition: opacity 0.5s ease;
}

@keyframes music-check-shimmer {
    0% { -webkit-mask-position: 130% 0; mask-position: 130% 0; }
    100% { -webkit-mask-position: -30% 0; mask-position: -30% 0; }
}

.music-body.is-scrolling .music-select-box:not(.is-on) svg {
    opacity: 0;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
    .music-select-box:not(.is-on).is-shimmer svg {
        opacity: 0.5;
        animation: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.music-import-panel {
    max-width: min(440px, calc(100vw - 32px));
}

.music-import-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.music-import-progress {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--portal-fg, #E5D4C1) 18%, transparent);
    overflow: hidden;
}

.music-import-progress-bar {
    height: 100%;
    width: 0%;
    background: #E5D4C1;
    transition: width 0.25s ease;
}

.music-import-summary {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #E5D4C1;
}

.music-import-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(42vh, 320px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.music-import-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
    color: #E5D4C1;
}

.music-import-list .music-import-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-import-list .music-import-step {
    font-weight: 600;
    max-width: 58%;
    text-align: right;
    white-space: normal;
    opacity: 0.85;
}

.music-import-list li.is-done .music-import-step {
    opacity: 1;
}

.music-import-list li.is-fail .music-import-step {
    color: #c45c5c;
    opacity: 1;
}

.music-copy-bubble {
    position: absolute;
    left: 4px;
    top: 100%;
    bottom: auto;
    z-index: 5;
    transform: none;
    margin: 0;
    padding: 6px 10px;
    border: none;
    background: #E5D4C1;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.music-copy-bubble::before {
    content: "";
    position: absolute;
    left: 10px;
    right: auto;
    top: auto;
    bottom: -6px;
    transform: none;
    border-width: 6px 5px 0 5px;
    border-style: solid;
    border-color: #E5D4C1 transparent transparent transparent;
}

.music-body .cal-modal-panel {
    background: #fff;
    color: #E5D4C1;
}

.music-body .cal-modal-title,
.music-body .cal-modal-body,
.music-body .cal-modal-panel .auth-label,
.music-body .music-playlist-stream {
    color: #E5D4C1;
}

.music-body .cal-modal-panel .auth-panel-close {
    background: transparent;
    color: #E5D4C1;
}

.music-body .cal-modal-panel .auth-btn,
.music-body .cal-modal-panel .share-dl-btn,
.music-body .cal-modal-panel .admin-project-delete-btn {
    background: #E5D4C1 !important;
    color: #fff !important;
    border: none;
}

.music-body .cal-modal-panel .auth-input {
    background: #fff;
    color: #E5D4C1;
    border: 1px solid #E5D4C1;
    caret-color: #E5D4C1;
}

.music-body .music-playlist-stream input {
    accent-color: #E5D4C1;
}

.music-body #musicPlaylistDays {
    -moz-appearance: textfield;
    appearance: textfield;
}

.music-body #musicPlaylistDays::-webkit-outer-spin-button,
.music-body #musicPlaylistDays::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.music-playlist-fields .music-field {
    margin-bottom: 12px;
}

.music-playlist-stream {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    font-size: 13px;
}

.pitch-page {
    max-width: var(--portal-col-max);
    width: 100%;
    margin: 0 auto;
    padding: 8px var(--portal-gutter) 48px;
    box-sizing: border-box;
}

.pitch-body .account-projects-mp3-scroll {
    max-height: none;
    background: #fff;
    color: #E5D4C1;
}

.pitch-body .account-projects-mp3 > .auth-label {
    color: #E5D4C1;
}

.pitch-body .account-projects-mp3-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom-color: #E5D4C1;
    color: #E5D4C1;
}

.pitch-body .account-projects-mp3-name {
    flex: 1 1 auto;
    min-width: 0;
}

.pitch-body .account-projects-mp3-row.has-dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pitch-body .account-projects-mp3-row.is-playing,
.pitch-body .account-projects-mp3-row.is-playing .account-projects-mp3-name,
.pitch-body .account-projects-mp3-row.is-playing .pitch-dl {
    background: #E5D4C1;
    color: #fff;
}

.pitch-body .account-projects-mp3-row.is-playing .music-play-btn {
    background: transparent;
    color: #fff;
}

.pitch-body .now-playing-seek {
    accent-color: #E5D4C1;
}

.pitch-dl {
    flex: 0 0 auto;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}