html.levels-list-loading .playlists-page .box-inner.single-column { padding-bottom: 14px; }
html.levels-list-loading .playlists-page #playlist-directory-grid { width: calc(100% - 4px) !important; max-width: 1240px; margin: 8px auto 0; }
.playlist-cards.loading-box { display: block; text-align: center; }
.playlist-cards { align-items: stretch; }
.playlist-created-date { color: var(--theme-muted-text); font-size: 13px; font-weight: 400; line-height: 1.35; text-decoration: none; }
.playlist-detail-page .playlist-overview > .playlist-author { align-items: center; flex-direction: column; gap: 2px; }
.playlist-author-date { display: inline-flex; justify-content: center; }
.playlist-author-date .playlist-created-date { color: var(--theme-plain-text, #000); font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.45; }
.levels-card-grid .playlist-card { grid-template-rows: 28px 52px 56px; row-gap: 6px; }
.levels-card-grid .playlist-card .playlist-card-title { height: 52px; line-height: 1.5; padding: 2px 4px; }
.levels-card-grid .playlist-card-title > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.playlist-card-meta { display: grid; grid-template-columns: 24px auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.playlist-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; }
.playlist-icon > img, .playlist-icon > svg { width: 100%; height: 100%; object-fit: contain; }
.playlist-card-count { color: var(--theme-body-text); font-size: 16px; font-weight: 400; line-height: 1.35; white-space: nowrap; text-align: left; }
.playlist-card-meta > .playlist-icon { width: 24px; height: 24px; flex-basis: 24px; }
.playlist-card-statuses { justify-self: end; display: flex; align-items: center; gap: 6px; }
.levels-card-grid .playlist-card-meta .level-status-card-badge { position: relative; inset: auto; width: 24px; height: 24px; }
.levels-card-grid .playlist-card-meta .level-status-card-badge img { width: 22px; height: 22px; object-fit: contain; transform: none; }
.playlist-icon-field { max-width: 820px; }
.playlist-icon-setting-preview { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.playlist-icon-setting-preview .level-field-help { margin: 0; line-height: 1.35; }
.playlist-folder { width: 38px; height: 38px; flex-shrink: 0; color: var(--theme-link-text); }
:root[data-theme] .level-portal-page .playlist-portal-directory .level-source-row .playlist-folder { color: var(--theme-link-text) !important; }
.playlist-detail-indicators { display: flex; align-items: center; justify-content: center; gap: 8px; }
.playlist-type-icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; }
.levels-card-grid .playlist-card-type img, .levels-card-grid .playlist-created-icon img, .playlist-type-icon img { width: 20px; height: 20px; object-fit: contain; filter: var(--theme-icon-filter); opacity: 0.7; }
.playlist-creator { color: var(--role-color) !important; text-decoration: none; overflow-wrap: anywhere; }
.playlist-creator:not(.level-card-author) { font-weight: 700; }
.playlist-creator:not(.level-card-author):hover:where(:root:not([data-touch-input]) *) { text-decoration: underline; }
.playlist-creator.level-card-author:is(:hover:where(:root:not([data-touch-input]) *), :focus-visible) { text-decoration: none !important; }
.playlist-creator.level-card-author:is(:hover:where(:root:not([data-touch-input]) *), :focus-visible) .level-card-username { text-decoration: underline; }
.playlists-page #playlist-directory-panel { display: flex; flex-direction: column; width: 100%; margin: 0; }
.playlists-page #playlist-directory-panel > .levels-toolbar { margin: 8px auto 6px; }
.playlist-directory-filter-form { display: contents; }
.playlists-page #playlist-directory-panel > .levels-result-summary { margin: 10px auto 4px; }
.playlists-page #playlist-directory-panel > .levels-result-summary:not([hidden]) + #playlist-directory-grid:not(.loading-box) { margin-top: 6px; }
.playlists-page #playlist-directory-grid { width: calc(100% - 4px); max-width: 1320px; margin: 8px auto 0; }
.playlist-type { display: inline-block; border: 1px solid var(--theme-surface-border); border-radius: 20px; padding: 3px 10px; font-size: 13px; margin: 5px 3px; }
.playlist-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0; }
.playlist-search-actions { display: flex; justify-content: flex-start; }
.playlist-picker-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--theme-surface-border); border-radius: 8px; background: var(--theme-surface-bg); margin: 8px 0; text-align: left; }
.playlist-picker-row img { width: 70px; height: 50px; object-fit: cover; }
.playlist-row-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.playlist-picker-row small { display: block; margin-top: 4px; }
.playlist-order-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.playlist-unavailable { padding: 12px; border: 1px dashed var(--theme-surface-border); border-radius: 8px; margin: 10px 0; }
.level-playlist-banner .playlist-context-name { white-space: normal; overflow-wrap: anywhere; font-size: inherit; }
.level-playlist-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: none; margin-top: 4px; }
.level-playlist-banner > .playlist-context-details { grid-area: 1 / 2; text-align: center; }
.level-playlist-banner strong { display: block; }
.level-playlist-banner .playlist-icon { display: inline-flex; vertical-align: middle; margin: 0 7px 0 0; width: 24px; height: 24px; flex-basis: 24px; }
.level-playlist-banner .playlist-icon > img, .level-playlist-banner .playlist-icon > svg { display: block; width: 24px; height: 24px; filter: none; }
.playlist-context-navigation { display: contents; }
.level-playlist-banner .playlist-context-previous { grid-area: 1 / 1; justify-self: start; }
.level-playlist-banner .playlist-context-next { grid-area: 1 / 3; justify-self: end; }

:root[data-theme^="midnight"] .level-detail-page .level-playlist-banner {
  background: var(--theme-surface-bg);
  border-color: var(--theme-surface-border);
  color: var(--theme-body-text);
}

:root[data-theme^="midnight"] .level-detail-page .playlist-context-details > span {
  color: var(--theme-body-text);
}

:root[data-theme^="midnight"] .level-detail-page .level-playlist-banner a {
  color: var(--theme-link-text);
}

:root[data-theme^="midnight"] .level-detail-page .level-playlist-banner a:is(:hover, :focus-visible) {
  color: var(--theme-link-hover-text);
}

@media(max-width: 640px) {
  .level-playlist-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: none; margin-top: 4px; }
  .level-playlist-banner > .playlist-context-details { grid-area: 1 / 1 / 2 / 3; }
  .level-playlist-banner .playlist-context-previous { grid-area: 2 / 1; }
  .level-playlist-banner .playlist-context-next { grid-area: 2 / 2; }
}
#playlist-editor[hidden], #playlist-editor-status[hidden], .playlist-links a[hidden], .pagination[hidden] { display: none !important; }
.playlist-detail-page .level-card-author, .playlist-detail-page .level-card-username, .playlist-detail-page .level-row-author { color: var(--role-color) !important; }
:root[data-theme] .level-portal-page .playlist-portal-directory.level-source-list[hidden] { display: none !important; }
:root[data-theme] .level-portal-page .playlist-portal-directory.level-source-list:not([hidden]) { display: block !important; margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
:root[data-theme] .level-portal-page #source-grid:has(+ .playlist-portal-directory:not([hidden])) { margin-bottom: 0 !important; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.level-portal-page .playlist-portal-directory .level-source-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "icon name meta" "icon description meta"; gap: 6px 18px; align-items: center; align-content: center; min-height: 0; padding: 18px 24px; }
.level-portal-page .playlist-portal-directory .level-source-icon { grid-area: icon; width: 56px; height: 56px; margin: 0; }
.level-portal-page .playlist-portal-directory .level-source-name { grid-area: name; justify-content: flex-start; text-align: left; }
.level-portal-page .playlist-portal-directory h2 { margin: 0; text-align: left; font-size: 22px; }
.level-portal-page .playlist-portal-directory .level-source-meta { grid-area: meta; margin: 0; }
.level-portal-page .playlist-portal-directory .level-source-description { grid-area: description; margin: 0; max-width: none; }
#playlist-form-message:empty { display: none; }
.playlist-levels-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--theme-surface-border, #b5c9d8); }
.level-form-page .playlist-levels-section { gap: 8px; }
.playlist-levels-section > h2 { margin: 0; }
.playlist-selected-panel { padding: 12px; border: 1px solid var(--theme-surface-border, #b5c9d8); border-radius: 8px; background: var(--theme-surface-bg, #edf4f8); }
.playlist-levels-header #playlist-selected-count { display: inline-flex; align-items: baseline; gap: 5px; color: var(--theme-plain-text, #000); font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.45; text-align: right; margin-left: auto; }
.playlist-levels-header #playlist-selected-count strong { color: var(--theme-heading-text, #2f5d78); font-size: inherit; font-weight: 700; }
.playlist-levels-header #playlist-selected-count > span { color: inherit; font-size: inherit; font-weight: 400; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .level-form-page .playlist-levels-header { flex-direction: column; align-items: center; }
  .level-form-page .playlist-levels-header #playlist-selected-count { margin-left: 0; justify-content: center; text-align: center; }
}
#playlist-deleted-option[hidden] { display: none !important; }
.playlist-selected-panel > .playlist-editor-list { margin-top: 12px; }
.playlist-selected-panel .playlist-editor-entry:first-child { margin-top: 0; }
.playlist-selected-panel .playlist-editor-entry:last-child { margin-bottom: 0; }

.level-form-page .playlist-search-modal-content { box-sizing: border-box; width: min(var(--playlist-search-width, 1100px), calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); display: flex; flex-direction: column; }
.level-form-page .playlist-search-modal-content .help-body { display: flex; flex-direction: column; padding: 22px 28px 8px; overflow: hidden; min-height: 0; }
.playlist-modal-search-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 12px; }
#playlist-level-search-form { flex-shrink: 0; padding: 0; border: 0; gap: 14px; margin-bottom: 16px; }
.playlist-search-panel { display: flex; flex-direction: column; min-height: 0; }
.playlist-search-panel > .playlist-editor-list { flex: 1 1 auto; min-height: 0; margin-top: 0; }
.playlist-search-panel > .pagination { flex-shrink: 0; }
.playlist-modal-search-fields input, .playlist-modal-search-fields select { box-sizing: border-box; height: 46px; }
.playlist-modal-search-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.playlist-editor-entry > [data-add-key] { box-sizing: border-box; min-width: 80px; height: 36px; min-height: 0; padding: 7px 15px; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; }
.level-form-page .playlist-modal-search-actions { padding: 6px 28px 14px; border-top: 0; }
.level-form-page .playlist-modal-search-actions > button { box-sizing: border-box; height: 35px; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; padding: 7px 15px; }
.playlist-modal-search-actions #playlist-search-button { width: 79px; }
.playlist-modal-search-actions #clear-playlist-search { width: 67px; }
.playlist-modal-search-actions #done-playlist-search { width: 67px; }
.level-form-page .playlist-own-levels-field { margin: 2px 0 0; font-size: 15px; font-weight: 500; }
.level-form-page .playlist-own-levels-field input { width: 18px; height: 18px; padding: 0; }
@media(max-width: 420px) { .level-form-page .playlist-modal-search-fields { grid-template-columns: minmax(0, 1fr); } }
.level-form-page .playlist-editor-entry { box-sizing: border-box; width: auto; min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) 164px; align-items: center; gap: 12px; padding: 10px 12px; box-shadow: none !important; }
.level-form-page .playlist-editor-entry > [data-add-key] { justify-self: end; }
@media(min-width: 601px) { #playlist-search-results .playlist-editor-entry { grid-template-columns: 58px minmax(0, 1fr) 80px; } }
.level-form-page .playlist-order-actions { justify-content: end; flex-wrap: nowrap; }
.level-form-page .playlist-order-actions > [data-remove] { box-sizing: border-box; width: 80px; }
.level-form-page .playlist-editor-entry .playlist-row-info { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 12px; }
.level-form-page .playlist-level-details { min-width: 0; }
.level-form-page .playlist-editor-entry .rate-entry-number { color: var(--theme-plain-text, #617589); font-size: 18px; font-weight: 800; white-space: nowrap; text-align: center; justify-self: center; }
.level-form-page .playlist-editor-entry .playlist-level-name { display: block; min-width: 0; color: var(--theme-link-text, var(--primary-dark)) !important; font-size: 16px; font-weight: 800; text-align: left; text-decoration: none; overflow-wrap: anywhere; }
.level-form-page .playlist-level-title { display: flex; align-items: center; gap: 8px; }
.level-form-page .playlist-editor-source { display: inline-flex; flex: 0 0 18px; }
.level-form-page .playlist-editor-source img { width: 18px; height: 18px; object-fit: contain; }
.level-form-page .playlist-level-credit { min-width: 0; }
.level-form-page .playlist-editor-entry .comment-username { display: block; font-size: 16px; font-weight: 800; color: var(--role-color) !important; text-decoration: none; overflow-wrap: anywhere; word-break: break-word; white-space: normal; overflow: visible; text-overflow: clip; }
.level-form-page .playlist-editor-entry .playlist-level-name:hover, .level-form-page .playlist-editor-entry .comment-username:hover { text-decoration: underline; }
.level-form-page .playlist-editor-entry .playlist-level-name:is(:hover, :focus-visible) { color: var(--theme-link-hover-text, #b00000) !important; text-decoration: underline; }
.level-form-page .playlist-reorder { width: 36px; height: 36px; padding: 8px; }
.level-form-page .playlist-reorder-icon { display: block; width: 18px; height: 18px; background-color: currentColor; mask: url('/icons/arrow-up.svg') center / contain no-repeat; }
.level-form-page .playlist-reorder-down .playlist-reorder-icon { transform: rotate(180deg); }
.level-form-page .playlist-reorder:disabled .playlist-reorder-icon { opacity: .4; }
.level-form-page .playlist-editor-list { max-height: 360px; padding: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: auto; background: transparent; }
.level-form-page .playlist-editor-list.loading-box { color: var(--theme-muted-text); }
/* Scroll the filters and results together when the viewport cannot fit both.
   Keep the modal header/footer visible and give the result cards their full height. */
@media (max-width: 600px), (max-height: 700px) {
  .level-form-page .playlist-search-modal-content > .help-header { flex-shrink: 0; }
  .level-form-page .playlist-search-modal-content .help-body { overflow-y: auto; padding: 16px 14px 8px; }
  .level-form-page .playlist-search-panel { flex: 0 0 auto; }
  .level-form-page .playlist-search-panel > .playlist-editor-list:not(.loading-box) { flex: none; max-height: none; overflow: visible; scrollbar-gutter: auto; }
  .level-form-page .playlist-modal-search-actions { padding: 10px 14px 14px; flex-shrink: 0; }
}
#playlist-selected-count[hidden] { display: none !important; }
@media(max-width: 600px) { .level-form-page .playlist-editor-entry .playlist-row-info { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
@media(max-width: 600px) { .playlist-modal-search-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; } .playlist-modal-search-fields label { font-size: 14px; } .playlist-modal-search-fields input, .playlist-modal-search-fields select, .playlist-modal-search-fields > button { font-size: 14px; padding: 8px; } .level-form-page .playlist-editor-list { max-height: 280px; } .level-form-page .playlist-editor-entry { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; } .level-form-page .playlist-editor-entry > .playlist-order-actions, .level-form-page .playlist-editor-entry > [data-add-key] { grid-column: 2; justify-self: end; } }
@media(max-width: 600px) { .playlist-cards { grid-template-columns: 1fr; } .playlist-picker-row { flex-wrap: wrap; } .playlist-order-actions { width: 100%; justify-content: end; } .level-portal-page .playlist-portal-directory .level-source-row { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon name" "description description" "meta meta"; padding: 16px; } .level-portal-page .playlist-portal-directory .level-source-icon { width: 40px; height: 40px; } }

@media(max-width: 600px) { .playlist-modal-search-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .playlist-modal-search-fields > button { width: 80px; justify-self: end; } }
@media (max-width: 600px) {
  .level-form-page .playlist-editor-entry { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px; }
  .level-form-page .playlist-editor-entry .rate-entry-number { justify-self: start; text-align: left; }
  .level-form-page .playlist-editor-entry > .playlist-order-actions,
  .level-form-page .playlist-editor-entry > [data-add-key] { grid-column: 1; justify-self: start; }
  .level-form-page .playlist-editor-entry > .playlist-order-actions { justify-content: flex-start; }
}

/* The title, control row and content panel follow the level detail structure. */
.playlist-detail-page .playlist-overview { width: 100%; text-align: left; }
.playlist-detail-page .playlist-overview .level-precore-row { grid-template-columns: minmax(0, 1fr) auto; }
.playlist-detail-page .playlist-details-core { grid-template-columns: minmax(0, 1fr); }
.playlist-detail-page .playlist-overview .level-description-panel { margin: 0; align-content: start; }
.playlist-detail-page .playlist-overview .level-description { overflow-wrap: anywhere; text-align: left; }
.playlist-detail-page #playlist-actions .playlist-icon, .playlist-detail-page #playlist-actions .playlist-type-icon { width: 22px; height: 22px; flex: 0 0 22px; align-items: center; justify-content: center; }
.playlist-detail-page #playlist-unavailable:empty { display: none; }
.playlist-detail-page .single-column .text > .playlist-overview { margin: 0; }
.playlist-detail-page .single-column .text > .levels-toolbar { margin: 14px auto 6px; }
@media(max-width: 600px) { .playlist-detail-page .playlist-overview .level-precore-row { grid-template-columns: 1fr; gap: 10px; } }


.playlist-detail-page #playlist-actions .playlist-icon > :is(svg, img), .playlist-detail-page #playlist-actions .playlist-type-icon img { width: 26px; height: 26px; max-width: none; flex-shrink: 0; object-fit: contain; }




.playlist-detail-page .playlist-author .comment-avatar { flex-shrink: 0; }
.playlist-detail-page .playlist-author .comment-username { color: var(--role-color) !important; overflow-wrap: anywhere; }
.playlist-detail-page .playlist-author .playlist-creator:is(:hover:where(:root:not([data-touch-input]) *), :focus-visible) { text-decoration: none !important; }
.playlist-detail-page .playlist-author .playlist-creator:is(:hover:where(:root:not([data-touch-input]) *), :focus-visible) .comment-username { text-decoration: underline; }
.playlist-detail-page #playlist-actions .playlist-type-icon img { width: 22px; height: 22px; }
@media (max-width: 600px) { .playlist-detail-page .playlist-details-core { grid-template-columns: minmax(0, 1fr); } }

.playlist-detail-page .playlist-overview > .playlist-author { display: flex; justify-content: center; margin: 8px 0 16px; }
.playlist-detail-page .playlist-overview > .playlist-author[hidden] { display: none; }
.playlist-detail-page .playlist-author .comment-user { min-width: 0; max-width: 100%; text-align: left; }

@media (max-width: 640px) {
  .playlist-detail-page .playlist-author .comment-user {
    order: 0;
    align-self: center;
    justify-content: center;
    text-align: center;
  }
}

.playlist-detail-page .playlist-title-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.playlist-detail-page .playlist-title-row .level-detail-title { width: auto; min-width: 0; flex: 0 1 auto; }
.playlist-detail-page .playlist-title-row .playlist-title-icon { width: 36px; height: 36px; flex: 0 0 36px; }
.playlist-detail-page .playlist-title-icon[hidden] { display: none; }

/* Action spacing and control dimensions come from the shared level toolbar. */
:root[data-theme="classic"] .playlist-detail-page #playlist-actions :is(#edit-level-link, .playlist-type-icon) img { filter: brightness(0); opacity: 0.7; transition: filter 0.15s ease, opacity 0.15s ease; }
:root[data-theme="classic"] .playlist-detail-page #playlist-actions :is(#edit-level-link, .playlist-type-icon):hover img { filter: brightness(0); opacity: 1; }
:root[data-theme^="midnight"] .playlist-detail-page #playlist-actions .playlist-type-icon img { filter: var(--theme-icon-filter); opacity: var(--theme-icon-opacity); }
:root[data-theme^="midnight"] .playlist-detail-page #playlist-actions .playlist-type-icon:hover img { filter: brightness(0) invert(1); opacity: 1; }

/* Keep visibility colors identical to level and playlist listing badges. */
:root[data-theme] .playlist-detail-page #playlist-actions .playlist-status-icon img {
  opacity: 1 !important;
  transition: none !important;
  transform: none !important;
}
:root[data-theme] .playlist-detail-page #playlist-actions .playlist-status-icon.level-status-private img {
  filter: var(--theme-private-icon-filter) !important;
  opacity: 1;
}
:root[data-theme] .playlist-detail-page #playlist-actions .playlist-status-icon.level-status-deleted img {
  filter: var(--theme-deleted-icon-filter) !important;
  opacity: 1;
}

/* Match the level page's informational feature marker, without an action cursor. */
.playlist-detail-page #playlist-actions .playlist-feature-indicator { cursor: default; }
.playlist-detail-page #playlist-actions .playlist-feature-indicator img { pointer-events: none; }
:root[data-theme="classic"] .level-detail-page .level-title-actions .comment-btn.add-to-playlist:not(:disabled):hover:where(:root:not([data-touch-input]) *) img { filter: brightness(0) !important; opacity: 1; }
.level-detail-page #add-playlist-modal .playlist-add-modal-content { width: min(610px, calc(100vw - 32px)); max-width: none; box-sizing: border-box; }
.level-detail-page #add-playlist-status a:is(:hover, :focus-visible) { color: var(--theme-link-hover-text); text-decoration: underline; text-decoration-color: currentColor; }
.level-detail-page .playlist-add-form { display: grid; gap: 10px; margin: 0; }
.playlist-add-field { display: grid; gap: 8px; min-width: 0; }
.playlist-add-field > label { font-size: 16px; font-weight: 700; color: var(--theme-heading-text, var(--primary-dark)); }
.playlist-add-field > select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--theme-input-border); border-radius: 8px; background: var(--theme-input-bg); color: var(--theme-input-text); font: inherit; padding: 10px 12px; text-overflow: ellipsis; }
.playlist-add-field > select:focus { outline: 2px solid var(--theme-link-text); outline-offset: 2px; }
.playlist-add-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.level-detail-page .playlist-add-actions > .control-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 40px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; }


#add-playlist-status[hidden], .level-detail-page .playlist-add-form[hidden] { display: none; }

:root[data-theme] .levels-card-grid .playlist-card .playlist-feature-history img { filter: var(--theme-icon-filter) !important; opacity: 0.7 !important; }

.playlist-favorite-summary {
  order: 2;
  gap: 4px;
  color: var(--theme-plain-text, #000);
  font-size: 15px;
  line-height: 1.45;
}

/* Match the level list gap below the final content box. */
@media (max-width: 1050px) {
  :root[data-theme] .level-portal-page #source-grid:has(+ .playlist-portal-directory:not([hidden])) {
    margin-bottom: 14px !important;
  }

  :root[data-theme] .level-portal-page .playlist-portal-directory.level-source-list:not([hidden]) {
    display: grid !important;
  }

  .level-portal-page .playlist-portal-directory .level-source-row {
    grid-template-columns: 1fr;
    grid-template-areas: "name" "icon" "meta" "description";
    align-content: start;
    gap: 16px 0;
    padding: 18px;
  }

  .level-portal-page .playlist-portal-directory .level-source-icon {
    width: 122px;
    height: auto;
    aspect-ratio: 20 / 18;
  }

  .level-portal-page .playlist-portal-directory .level-source-name {
    justify-content: center;
    text-align: center;
  }

  .level-portal-page .playlist-portal-directory h2 {
    font-size: 23px;
    text-align: center;
  }
}

@media (max-width: 620px) {
  .level-portal-page .playlist-portal-directory .level-source-row {
    gap: 14px;
    padding: 17px 14px;
  }

  .level-portal-page .playlist-portal-directory .level-source-icon {
    width: 112px;
  }

  .level-portal-page .playlist-portal-directory h2 {
    font-size: clamp(16px, 4.75vw, 22px);
  }
}

.playlist-form-page .box-inner.single-column .text > .level-form-shell { margin-bottom: 0; }
.playlist-form-page .box-inner.single-column { padding-bottom: 14px; }

/* The loaded portal is one connected panel on phones and tablets. */
@media (max-width: 1050px) {
  .level-portal-directories:has(#source-grid:not(.level-portal-loading-list):not(.level-portal-unavailable-list)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    box-sizing: border-box;
    width: calc(100% - 56px);
    max-width: 760px;
    margin: 0 auto 16px;
    border: 1px solid var(--theme-surface-border, #b7c4cf);
    border-radius: 6px;
    overflow: hidden;
  }

  :root[data-theme] .level-portal-directories:has(#source-grid:not(.level-portal-loading-list):not(.level-portal-unavailable-list)) > :is(#source-grid, .playlist-portal-directory:not([hidden])) {
    display: contents !important;
  }

  :root[data-theme] .level-portal-directories .level-source-row {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
    min-width: 0;
    border: 0;
    border-right: 1px solid var(--theme-surface-border, #b7c4cf);
    border-bottom: 1px solid var(--theme-surface-border, #b7c4cf);
    border-radius: 0;
  }

  :root[data-theme] .level-portal-directories #source-grid .level-source-row:nth-child(2),
  :root[data-theme] .level-portal-directories .playlist-portal-directory .level-source-row {
    border-right: 0;
  }

  :root[data-theme] .level-portal-directories #source-grid .level-source-row:last-child,
  :root[data-theme] .level-portal-directories .playlist-portal-directory .level-source-row {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  .level-portal-directories:has(#source-grid:not(.level-portal-loading-list):not(.level-portal-unavailable-list)) {
    grid-template-columns: 1fr;
    width: calc(100% - 28px);
    max-width: 360px;
  }

  :root[data-theme] .level-portal-directories #source-grid .level-source-row,
  :root[data-theme] .level-portal-directories #source-grid .level-source-row:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--theme-surface-border, #b7c4cf);
  }
}