/*! ElegantFin Theme v26.06.06 for Jellyfin by lscambo13 */
/*  Recolored to Sekiratte Dark by Sekiflix                */

/* Add-ons: Uncomment to enable */
/* @import url(./assets/add-ons/media-bar-plugin-support-nightly.css); */
/* @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); */

/* Inter Font Family */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
    --elegantFinFooterText: "ElegantFin v26.06.06 · Sekiflix";

    /* ── Sekiratte Dark palette ───────────────────────────────────────────── */
    color-scheme: dark;

    /* Backgrounds */
    --darkerGradientPoint:      #1a1614;
    --darkerGradientPointAlpha: rgba(26, 22, 20, 0.85);
    --lighterGradientPoint:     #2a231e;
    --lighterGradientPointAlpha: rgba(42, 35, 30, 0.85);
    --gradientPointAlpha:       rgba(42, 35, 30, 0.3);

    /* Header / Drawer — solid, no transparency */
    --headerColor:  #1a1614;
    --drawerColor:  #1a1614;

    /* Borders */
    --borderColor:       #3a3530;
    --darkerBorderColor: #231e1c;
    --lighterBorderColor: rgba(212, 135, 93, 0.25);

    /* Selector backgrounds */
    --selectorBackgroundColor:      #352c26;
    --selectorBackgroundColorAlpha: rgba(53, 44, 38, 0.5);

    /* Accent / interactive */
    --activeColorAlpha: rgba(212, 135, 93, 0.9);
    --activeColor:      #d4875d;

    /* OSD seek bar */
    --osdSeekBarPlayedColor:         #e3d8c9;
    --osdSeekBarBufferedColorAlpha:  rgba(160, 149, 133, 0.5);
    --osdSeekBarThumbColor:          #e3d8c9;

    /* Table / misc */
    --tableBodyColor:      #231e1c;
    --uiAccentColor:       #d4875d;
    --btnMiniPlayColor:    #5c7c46;
    --btnMiniPlayBorderColor: #6b8f55;

    /* Component colors */
    --btnDeleteColor:       #9a2a2a;
    --btnDeleteBorderColor: #c96d6d;
    --btnSubmitColor:       #402f28;
    --btnSubmitBorderColor: #d4875d;
    --checkboxCheckedBgColor: #d4875d;
    --highlightOutlineColor:  #d4875d;

    --defaultBorder:        var(--borderWidth) solid var(--borderColor);
    --defaultLighterBorder: var(--borderWidth) solid var(--lighterBorderColor);

    /* Text */
    --textColor:    #e3d8c9;
    --dimTextColor: #c5b7a3;

    /* Textures — solid colors, no gradients */
    --backgroundGradient:      #1a1614;
    --cardBackgroundGradient:  #231e1c;
    --backgroundAlphaOverlay:  rgba(26, 22, 20, 0.92);
    --headerColorGradient:     #1a1614;
    --headerColorGradientAlt:  #1a1614;
    --headerBlurMask:          none;

    --cardFooterGradient: linear-gradient(0deg, rgb(0 0 0 / 90%), 40%, transparent);
    --topOSDGradient:     linear-gradient(180deg, hsla(0, 0%, 0%, 0.8), 45%, hsla(0, 0%, 0%, 0));
    --bottomOSDGradient:  linear-gradient(0deg, hsla(0, 0%, 0%, 0.8), 45%, hsla(0, 0%, 0%, 0));

    --hoverGradientV: rgba(212, 135, 93, 0.08);
    --hoverGradientH: rgba(212, 135, 93, 0.08);

    --itemBackdropMask: none;

    /* Sizes — unchanged */
    --largerRadius:   1.25em;
    --largeRadius:    1em;
    --smallRadius:    0.5em;
    --smallerRadius:  0.375em;
    --borderWidth:        0.06em;
    --borderWidthDouble:  0.12em;

    --sidePadding:    3.3%;
    --itemColumnGap:  1em;

    --minEpisodeCardWidth: 26em;

    /* ── Blur disabled ──────────────────────────────────────────────────── */
    --blurSmallest: blur(0px);
    --blurDefault:  blur(0px);
    --blurLarge:    blur(0px);
    --blurLargest:  blur(0px);

    --shadow: 0.1em 0.1em 0.15em hsla(0, 0%, 0%, 0.3);

    /* Solid header instead of blurred/faded */
    --headerBlurLayerVisibility: none;
    --headerBackground:          var(--headerColorGradientAlt);

    --loginPageBgUrl:  url("");
    --loginPageText:   "Sign in to Sekiflix";

    --overlayPlayButtonPosition: 2.8em;

    --iconPack: "Material Symbols Rounded";

    --extraCardButtonsVisibility:   none;
    --menuButtonVisibility:         block;
    --itemOriginalTitleVisibility:  block;
    --libraryLabelVisibility:       none;
    --clearLogoVisibility:          block;
    --itemTitleVisibility:          none;
    --artistClearLogoVisibility:    block;
    --artistTitleVisibility:        none;
    --artistPageBackground:         unset;
    --miniOverlayButtonVisibility:  block;
    --cardHoverEffect:              "";

    --appBarHeight:       5em;
    --backdropTrimFromTop: 10%;
    --resumeCardScale:    1;
}

html {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 425;
    font-style: normal;
    -webkit-tap-highlight-color: transparent !important;
}

body {
    --primaryItemPageNegativeSpace: 14vh;
    --secondaryItemPageNegativeSpace: 60vh;
    --clearLogoBottomSpace: 11em;
}

select {
    text-overflow: ellipsis;
}

.layout-desktop > body:has(> audio[src]) {
    --primaryItemPageNegativeSpace: calc(14vh + 5em);
    --secondaryItemPageNegativeSpace: calc(60vh + 5em);
}

.layout-mobile {
    --headerColorGradient: var(--headerColorGradientAlt);
    --blurLargest: blur(0px);
    --headerBlurMask: none;
    --itemColumnGap: 0.5em;
}

.layout-mobile > body {
    --secondaryItemPageNegativeSpace: 45vh;
}

/* Material Symbols Rounded - Minimal */
@font-face {
    font-family: "Material Symbols Rounded Minimal";
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v346)
        format("woff2");
}

/* Material Symbols Rounded - Full */
@font-face {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v346/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2)
        format("woff2");
}

.material-icons {
    font-family:
        var(--iconPack),
        Material Icons !important;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    text-rendering: geometricPrecision;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 0,
        "opsz" 48;
}

.material-icons.info_outline:before {
    content: "\e88e";
    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 48;
}

.dashboardFooter {
    font-family: "Noto Sans", serif;
    transition: transform 50ms;
}

#myPreferencesMenuPage > div:after,
.dashboardFooter::after {
    content: var(--elegantFinFooterText);
    font-size: 0.8em;
    color: var(--borderColor);
    display: inline-grid;
    width: 100%;
    width: -webkit-fill-available;
    justify-content: center;
    font-weight: 600;
}

::selection {
    background: var(--activeColorAlpha);
}

.cardImageIcon {
    color: var(--borderColor);
}

.cardPadder .cardImageIcon {
    color: var(--selectorBackgroundColorAlpha);
}

.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
    border-color: #d4875d !important;
}

.mdl-radio__focus-circle,
.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle,
.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle {
    background: var(--uiAccentColor);
    color: var(--uiAccentColor);
}

.emby-button {
    gap: 1ch;
}

.emby-button.show-focus:focus,
.paper-icon-button-light.show-focus:focus,
.emby-tabs .emby-button.show-focus:focus {
    background-color: var(--highlightOutlineColor) !important;
    color: #231e1c !important;
}

.emby-tabs .emby-button.show-focus:focus {
    outline: none !important;
}

[dir="ltr"] .itemsContainer > .card > .cardBox {
    margin-left: auto;
    margin-right: auto;
}

.cardBox-bottompadded {
    margin-bottom: 0.5em !important;
}

@media (max-width: 50em) {
    .cardBox-bottompadded {
        margin-bottom: 0.25em !important;
    }
}

.vertical-wrap:not(.centered),
.vertical-wrap.padded-right-withalphapicker,
.padded-right-withalphapicker > .vertical-wrap {
    justify-content: flex-start !important;
}

#episodesTab > .vertical-wrap,
#studiosTab > .vertical-wrap,
#channelsTab > .vertical-wrap,
#recordingsTab > .vertical-wrap,
#genresTab > .vertical-wrap {
    justify-content: center !important;
}

.countIndicator,
.fullSyncIndicator,
.mediaSourceIndicator {
    background: #402f28;
    border: var(--defaultLighterBorder);
}

.layout-mobile .indicator {
    font-size: 70%;
}

.cardScalable {
    border-radius: var(--largeRadius);
    border: var(--darkerBorderColor) solid var(--borderWidthDouble) !important;
    overflow: hidden !important;
    box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.4);
    transition: transform 125ms;
}

@supports (aspect-ratio: 1 / 1) {
    #castCollapsible .cardScalable,
    #guestCastContent .cardScalable {
        aspect-ratio: 1 / 1;
        border-radius: 50%;
    }
}

#castCollapsible .cardContent.cardImageContainer,
#guestCastContent .cardContent.cardImageContainer {
    background-position-y: 33%;
}

.layout-mobile .cardScalable {
    border: var(--defaultBorder) !important;
}

.visualCardBox,
.paperList {
    background-color: var(--headerColor) !important;
    border-radius: var(--largeRadius) !important;
    border: var(--defaultBorder) !important;
    box-shadow: unset !important;
    overflow: hidden;
}

.layout-desktop .visualCardBox {
    border-width: var(--borderWidthDouble) !important;
}

.visualCardBox .cardScalable {
    border-width: 0 0 var(--borderWidth) 0 !important;
    border-radius: 0 !important;
    border-color: var(--darkerBorderColor) !important;
}

.cardImageContainer {
    transition: transform 0.375s;
}

.card.squareCard[data-type="TvChannel"] .cardImageContainer.cardContent {
    background-color: rgba(255, 255, 255, 0.1);
}

.cardImageContainer > .cardDefaultText {
    font-size: 2em;
    padding-top: 1.5em;
    color: transparent;
    white-space: pre;
}

.cardImageContainer > .cardDefaultText::before {
    content: "?\A";
    color: var(--borderColor);
}

.card-hoverable:hover .cardScalable,
.card-hoverable:hover .visualCardBox {
    border-color: #d4875d !important;
}

.card-hoverable:hover .visualCardBox .cardScalable {
    border-color: var(--darkerBorderColor) !important;
}

.card-hoverable:hover .cardImageContainer {
    transform: scale(1.025);
}

.card-hoverable .itemSelectionPanel {
    transition: transform 0.125s;
}

.card-hoverable:hover .cardScalable,
.card-hoverable:hover .itemSelectionPanel {
    transform: scale(1.02);
}

.card-hoverable .cardScalable:active {
    transition: transform 0.075s;
    transform: scale(1);
}

.cardScalable:has(.cardOverlayButton-hover:hover) > .cardImageContainer {
    transform: scale(1);
}

.cardOverlayContainer {
    transition: 0.5s;
    background: rgba(212, 135, 93, 0.04);
}

.cardOverlayContainer:after {
    content: var(--cardHoverEffect);
    transition: 0.65s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%) translateX(0);
    background: var(--hoverGradientV);
}

.card-hoverable:hover .cardOverlayContainer:after {
    transform: translateY(100%) translateX(0);
}

.backdropCard.card-hoverable .cardOverlayContainer:after,
.overflowBackdropCard.card-hoverable .cardOverlayContainer:after {
    transform: translateY(0) translateX(-100%);
    background: var(--hoverGradientH);
}

.backdropCard.card-hoverable:hover .cardOverlayContainer:after,
.overflowBackdropCard.card-hoverable:hover .cardOverlayContainer:after {
    transform: translateY(0) translateX(100%);
}

.cardBox:not(.visualCardBox) .cardPadder {
    background-color: var(--lighterGradientPoint);
}

.cardOverlayContainer > .cardOverlayFab-primary {
    left: unset;
    margin-left: unset;
    margin-top: unset;
    top: unset;
    left: calc(var(--overlayPlayButtonPosition) - 1.5em);
    bottom: calc(var(--overlayPlayButtonPosition) - 1.5em);
}

.cardOverlayContainer > .cardOverlayFab-primary,
.listItemImageButton,
.layout-mobile .cardOverlayButton-br:not([data-action="menu"]) > .cardOverlayButtonIcon {
    background-color: var(--btnMiniPlayColor) !important;
    color: white;
    border: var(--defaultLighterBorder);
    border-color: var(--btnMiniPlayBorderColor);
    font-size: 75%;
    box-shadow: var(--shadow);
    z-index: 2;
}

.cardOverlayContainer > .cardOverlayFab-primary:hover,
.listItemImageButton:hover {
    color: white;
}

.layout-desktop .cardOverlayButton-br,
[dir="ltr"].layout-desktop .cardOverlayButton-br {
    bottom: 1.2em;
    right: 0.7em;
    z-index: 1;
    font-size: 0.8em;
}

.layout-desktop .cardOverlayButton-br > button {
    color: white;
    display: var(--extraCardButtonsVisibility);
    text-shadow: var(--shadow);
}
.cardOverlayButton-br .cardOverlayButton-hover[data-action="menu"],
.layout-desktop .listItemButton[data-action="menu"] {
    display: var(--menuButtonVisibility);
}

.layout-mobile .cardOverlayButton {
    padding: 1em;
    font-size: 60%;
}

.layout-mobile .cardOverlayButton-br,
[dir="ltr"] .layout-mobile .cardOverlayButton-br {
    display: var(--miniOverlayButtonVisibility);
}

.layout-mobile .portraitCard .cardOverlayButton-br:not([data-action="menu"]),
.layout-mobile .backdropCard .cardOverlayButton-br:not([data-action="menu"]) {
    display: none;
}

.layout-mobile .cardOverlayButton-br[data-action="menu"] > .cardOverlayButtonIcon {
    background-color: transparent !important;
    color: white;
    border: none;
    text-shadow: 1px 1px 0.1em black;
    color: white;
}

/* No blur on hover */
.cardOverlayContainer:has(> button:hover) {
    backdrop-filter: none;
}

.listViewUserDataButtons {
    font-size: small;
}

.layout-mobile .listViewUserDataButtons {
    flex-direction: column;
    font-size: x-small;
}

/* episode grid start */
@supports (display: revert) {
    .layout-desktop .vertical-list:has(.listItem-largeImage) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(var(--minEpisodeCardWidth), 100%), 1fr));
        gap: var(--itemColumnGap);
    }
    .layout-desktop .listItem-largeImage {
        display: grid;
        margin-bottom: 0 !important;
    }
    .layout-desktop .listItem-largeImage > .listItem-content {
        display: grid;
        grid-template-columns: 1fr 1fr 2em;
        order: 1;
        height: 100%;
        align-items: start;
    }
    .layout-desktop .listItem-largeImage > .listItem-bottomoverview {
        order: 2;
    }
    .layout-desktop .listItem-largeImage .listItemImage-large {
        order: 1;
        grid-column: 1 / -1;
        height: max-content;
        min-height: 15em;
        width: 100%;
        aspect-ratio: 16 / 9;
        box-sizing: border-box;
    }
    .layout-desktop .listItem-largeImage .listItemBody {
        order: 2;
        grid-column: 1 / 3;
        padding: 1em 0.125em;
    }
    .layout-desktop .listItem-largeImage .listViewUserDataButtons {
        flex-direction: column;
        font-size: small;
        order: 2;
        grid-column: 3;
        align-self: center;
    }
}
/* episode grid end */

.portraitCard { min-width: 5em; }
.bannerCard   { --cardCount: 2; }

@media (min-width: 300em) {
    .portraitCard, .squareCard                        { --cardCount: 16; }
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 15; }
    .squareCard:has(.cardFooter)                      { --cardCount: 12; }
    .backdropCard                                     { --cardCount: 12; }
    .overflowBackdropCard                             { --cardCount: 11; }
}
@media (max-width: 300em) {
    .portraitCard, .squareCard                        { --cardCount: 15; }
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 14; }
    .squareCard:has(.cardFooter)                      { --cardCount: 11; }
    .backdropCard, .overflowBackdropCard              { --cardCount: 11; }
}
@media (max-width: 270em) {
    .portraitCard, .squareCard                        { --cardCount: 14; }
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 13; }
    .squareCard:has(.cardFooter)                      { --cardCount: 10; }
    .backdropCard, .overflowBackdropCard              { --cardCount: 10; }
}
@media (max-width: 240em) {
    .portraitCard, .squareCard                        { --cardCount: 13; }
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 12; }
    .squareCard:has(.cardFooter)                      { --cardCount: 10; }
    .backdropCard, .overflowBackdropCard              { --cardCount: 10; }
}
@media (max-width: 220em) {
    .portraitCard, .squareCard                        { --cardCount: 12; }
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 11; }
    .squareCard:has(.cardFooter)                      { --cardCount: 9;  }
    .backdropCard, .overflowBackdropCard              { --cardCount: 7;  }
}
@media (max-width: 200em) {
    .portraitCard, .squareCard                        { --cardCount: 11; }
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 10; }
    .squareCard:has(.cardFooter)                      { --cardCount: 9;  }
}
@media (max-width: 170em) {
    .portraitCard, .squareCard                        { --cardCount: 10; }
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 9;  }
    .squareCard:has(.cardFooter)                      { --cardCount: 9;  }
    .backdropCard, .overflowBackdropCard              { --cardCount: 6;  }
}
@media (max-width: 140em) {
    .portraitCard, .squareCard                        { --cardCount: 9;  }
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 8;  }
    .squareCard:has(.cardFooter)                      { --cardCount: 7;  }
    .backdropCard, .overflowBackdropCard              { --cardCount: 5;  }
}
@media (max-width: 120em) {
    .portraitCard, .squareCard                        { --cardCount: 8;  }
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 7;  }
    .squareCard:has(.cardFooter)                      { --cardCount: 6;  }
    .backdropCard,
    .layout-tv .portraitCard, .layout-tv .squareCard,
    .layout-tv .overflowPortraitCard, .layout-tv .overflowSquareCard,
    .overflowBackdropCard                             { --cardCount: 5;  }
    .layout-tv .backdropCard, .layout-tv .overflowBackdropCard { --cardCount: 3; }
}
@media (max-width: 100em) {
    .portraitCard, .squareCard,
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 7;  }
    .squareCard:has(.cardFooter)                      { --cardCount: 6;  }
    .backdropCard, .overflowBackdropCard              { --cardCount: 4;  }
}
@media (max-width: 80em) {
    .portraitCard, .squareCard,
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 6;  }
    .squareCard:has(.cardFooter)                      { --cardCount: 5;  }
    .overflowBackdropCard, .backdropCard              { --cardCount: 4;  }
}
@media (max-width: 62em) {
    .portraitCard, .squareCard,
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 5;  }
    .squareCard:has(.cardFooter)                      { --cardCount: 4;  }
    .backdropCard, .overflowBackdropCard              { --cardCount: 4;  }
}
@media (max-width: 48.125em) {
    .portraitCard, .squareCard,
    .overflowPortraitCard, .overflowSquareCard        { --cardCount: 4;  }
    .squareCard:has(.cardFooter)                      { --cardCount: 3;  }
    .backdropCard, .overflowBackdropCard              { --cardCount: 3;  }
}
@media (max-width: 30em) {
    .portraitCard, .squareCard,
    .overflowPortraitCard, .overflowSquareCard,
    .layout-mobile .portraitCard, .layout-mobile .squareCard,
    .layout-mobile .overflowPortraitCard, .layout-mobile .overflowSquareCard { --cardCount: 3; }
    .squareCard:has(.cardFooter)                      { --cardCount: 2;  }
    .backdropCard, .overflowBackdropCard              { --cardCount: 2;  }
}

.cardBox { margin-top: 0; }

.card {
    --padding: 0.375em;
    --effectiveWidth: calc(((100vw - (var(--padding) * 2)) - (var(--sidePadding) * 2)));
    --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap));
    width: var(--cardWidth) !important;
    padding: var(--padding);
    transition: width 0.5s;
    box-sizing: content-box;
}

@supports (aspect-ratio: 1 / 1) {
    .card { box-sizing: border-box; }
}

.layout-mobile .card { --padding: 1px; }

@media (orientation: landscape) and (max-height: 40em) {
    .layout-mobile .card {
        --effectiveWidth: calc((65vw - (var(--sidePadding) * 2)));
    }
}

#homeTab .overflowBackdropCard[data-positionticks],
.nextUpItems > .card,
#resumableItems > .card {
    width: calc(var(--cardWidth) * var(--resumeCardScale)) !important;
}

.card .cardTextCentered {
    text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.8);
}

.detailPageWrapperContainer {
    padding-top: unset;
    margin-top: unset;
}

.layout-desktop .detailPageWrapperContainer {
    background: transparent;
    min-height: 46vh;
    background: #1a1614;
}

.layout-tv .detailPageWrapperContainer {
    padding-left: 30vw;
    background: transparent;
    min-height: 46vh;
    background: #1a1614;
}

.detailPagePrimaryContainer {
    align-content: space-between;
    align-items: stretch;
    justify-content: end;
    flex-direction: column;
    align-items: center;
    text-align: left;
}

.layout-mobile .detailPagePrimaryContainer.detailRibbon,
.layout-mobile .detailPagePrimaryContainer>.detailRibbon {
    padding: 0 var(--sidePadding);
}

.layout-desktop .detailPagePrimaryContainer { background: transparent; }
.layout-desktop .detailPageSecondaryContainer { background-color: transparent; }

.detailPagePrimaryContainer>.detailPagePrimaryContent,
[dir=ltr] .detailPagePrimaryContainer>.detailRibbon,
[dir=ltr] .detailPagePrimaryContainer.detailRibbon {
    padding-left: var(--sidePadding);
}

.layout-mobile .detailPagePrimaryContent {
    padding-left: var(--sidePadding) !important;
    padding-right: var(--sidePadding) !important;
}

.layout-desktop [dir="ltr"] .detailRibbon,
.layout-tv [dir="ltr"] .detailRibbon {
    flex-direction: column;
}

.detailPagePrimaryContainer > .detailPagePrimaryContent { padding-top: 0; }
.detailPageSecondaryContainer { padding-top: 0 !important; }

.skinHeader-withBackground:not(.semiTransparent) .headerHomeButton { display: none; }
.layout-mobile:has(#itemDetailPage:not(.hide)) .headerHomeButton { display: block; }

.pageTitle { height: 1.5em; }
.headerLeft .pageTitle {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.paper-icon-button-light > .material-icons { font-size: 1.25em; }

#itemDetailPage .emby-scroller-container,
#itemDetailPage .emby-scroller,
#itemDetailPage .scrollX {
    margin: 0 calc(-1 * var(--sidePadding));
    padding-left: calc(var(--sidePadding));
}

.layout-desktop .emby-scroller-container,
.layout-desktop .emby-scroller,
.layout-desktop .scrollX {
    --itemColumnGap: 0.5em;
}

.emby-scroller, .scrollX { padding-left: calc(var(--sidePadding)); }
.sectionTabs .scrollX    { padding-left: 0; }

.itemsContainer:not(.editorsChoiceItemsContainer, .vertical-list) {
    column-gap: var(--itemColumnGap);
    row-gap: 1em;
}

.layout-mobile .itemsContainer:not(.editorsChoiceItemsContainer, .vertical-wrap, .vertical-list)::after {
    content: "13";
    color: transparent;
}

.layout-desktop .sectionTitle,
.layout-tv .sectionTitle { font-size: 1.5rem !important; }

.emby-scrollbuttons,
[dir="ltr"] .emby-scrollbuttons { padding-top: 0; }

.emby-scrollbuttons-button.paper-icon-button-light > .material-icons {
    font-size: 1.5em;
    place-content: center;
}

.detailRibbon { background-color: transparent; }

.mediaInfoItem {
    border-radius: var(--smallRadius);
    font-weight: 500;
    padding-top: 0;
    padding-bottom: 0;
}

.itemMiscInfo-primary { column-gap: 0.5em; }

.mediaInfoOfficialRating {
    background: transparent !important;
    font-size: 0.75em;
    font-family: "Noto Sans", sans-serif;
    line-height: 1.5em;
    transform: translateY(-0.15em);
    font-weight: 600;
    border: var(--defaultBorder);
    color: var(--textColor);
}

/* Star rating — Sekiratte yellow */
.starIcon {
    color: #d4af37;
    margin-left: -0.125em;
    transform: translateY(-0.02em);
}

[dir="ltr"] .mediaInfoCriticRating {
    background-size: 30%;
    padding-left: 1.5em;
}
[dir="ltr"] .mediaInfoCriticRating::after { content: "%"; }

.detailRibbon:has(.portraitCard .folder) {
    min-height: 32vh;
    align-content: flex-end;
}
.layout-desktop .detailRibbon:has(.person) {
    min-height: 15vh;
    align-content: flex-end;
}
.layout-desktop .detailRibbon {
    height: 100%;
    min-height: 25vh;
    margin-top: unset;
}

@keyframes animMoveDown {
    from { transform: translateY(-2em); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes animMoveDownSecondaryPage {
    from { transform: translateY(-2em); opacity: 0;   }
    to   { transform: translateY(0);    opacity: 0.3; }
}

@keyframes animMoveUp {
    from { transform: translateY(-90%);  opacity: 0; }
    to   { transform: translateY(-100%); opacity: 1; }
}

.itemBackdrop { display: block !important; }

.layout-desktop .itemBackdrop {
    height: calc(100vh - 27vh - var(--primaryItemPageNegativeSpace));
}

.layout-mobile .itemBackdrop {
    margin-top: 0;
    position: sticky;
    top: -30%;
    -webkit-mask: var(--itemBackdropMask);
    mask: var(--itemBackdropMask);
    animation: animMoveDown 0.5s ease-out forwards;
    height: 45vh;
}

.layout-tv .itemBackdrop { height: 33vh; }

#itemDetailPage:has(.subtitle) .itemBackdrop,
#itemDetailPage:has(.musicParentName) .itemBackdrop,
#itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
#itemDetailPage:has(.detailImageContainer .squareCard) .itemBackdrop,
#itemDetailPage:has(.detailImageContainer .person) .itemBackdrop,
#itemDetailPage:has(.detailImageContainer .queue) .itemBackdrop,
#itemDetailPage:has(.detailImageContainer .book) .itemBackdrop,
#itemDetailPage:has(.detailImageContainer .live_tv) .itemBackdrop {
    height: calc(100vh - 27vh - var(--secondaryItemPageNegativeSpace));
}

#itemDetailPage:has(.detailImageContainer .cardPadder-square > .person) .itemBackdrop {
    height: calc(100vh - 8vh - var(--secondaryItemPageNegativeSpace));
}

.detailLogo {
    display: var(--clearLogoVisibility);
    top: calc(100vh - var(--clearLogoBottomSpace) - var(--primaryItemPageNegativeSpace));
    left: 0;
    width: 40%;
    transform: translateY(-100%);
    margin: auto 30%;
    height: 25vh;
    background-position: bottom;
}

.layout-mobile .detailLogo {
    display: var(--clearLogoVisibility);
    z-index: 1;
    position: absolute;
    left: 1em;
    top: 45vh;
    margin: auto 0%;
    width: calc(100vw - 2em);
    max-height: 17vh;
    animation: animMoveUp 1s ease-out forwards;
}

.layout-tv .detailLogo {
    display: var(--clearLogoVisibility);
    height: 20vh;
    top: 39vh;
    left: 30vw;
    width: 60vw;
    margin: auto 5vw;
}

#itemDetailPage:has(.subtitle) .detailLogo {
    top: calc(100vh - 6em - var(--secondaryItemPageNegativeSpace));
}

.layout-desktop #itemDetailPage:has(.detailImageContainer .person) .detailLogo {
    top: calc(100vh - var(--secondaryItemPageNegativeSpace));
}

.layout-mobile #itemDetailPage:has(.subtitle) .detailLogo {
    top: calc(100vh - 11em - var(--secondaryItemPageNegativeSpace));
}

.layout-desktop .detailImageContainer .card {
    position: relative !important;
    width: 22vh !important;
    float: none;
    left: 0 !important;
    top: 0;
    right: 0;
    margin: auto;
    margin-bottom: 0;
    place-self: center;
}

.detailImageContainer .card.backdropCard {
    width: 40vh !important;
    max-width: 50vw;
}

.detailImageContainer .card { display: none; }

.layout-tv .detailImageContainer .card {
    width: 25vw !important;
    display: block !important;
    position: fixed !important;
    top: 0;
    bottom: 0;
    margin: auto;
    left: var(--sidePadding);
    align-content: center;
    transform: none;
}

.layout-mobile .detailImageContainer .card {
    -webkit-filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.25));
}

.layout-mobile [dir="ltr"] .infoWrapper,
.layout-mobile .infoWrapper { padding-left: 0; }

.infoWrapper {
    align-content: end;
    place-items: center;
    display: grid;
    text-align: center;
}

.layout-mobile .detailImageContainer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-left: 0 !important;
}

.layout-mobile .detailImageContainer:has(.card:not(.portraitCard)) { height: 0; }

.layout-mobile .detailImageContainer .card {
    position: inherit !important;
    margin-top: -150%;
    max-width: 60vw;
}

.layout-mobile .detailPageWrapperContainer {
    padding-top: 0;
    margin-top: 0.5em;
}

#itemDetailPage:has(.detailImageContainer .backdropCard) .detailLogo,
#itemDetailPage:has(.detailImageContainer .album) .detailLogo {
    z-index: 2;
    display: none;
}

#itemDetailPage:has(.detailImageContainer .person) .detailLogo {
    z-index: 2;
    display: var(--artistClearLogoVisibility);
}

.detailLogo:not(.hide) ~ .detailPageWrapperContainer .nameContainer h1 {
    z-index: 2;
    display: var(--itemTitleVisibility);
}

.detailImageContainer:has(.squareCard .person) ~ .nameContainer h1 {
    display: var(--artistTitleVisibility);
}

.detailLogo.hide ~ .detailPageWrapperContainer .nameContainer h1 { display: block !important; }

.detailImageContainer:has(.backdropCard) ~ .nameContainer h1,
.detailImageContainer:has(.album) ~ .nameContainer h1 { display: block !important; }

.detailImageContainer .card.backdropCard:has(.cardImageIcon.album) { max-width: 20vh; }
.detailImageContainer .card.backdropCard:has(.cardImageIcon.album) .cardScalable { aspect-ratio: 1 / 1; }

#childrenContent:has(.listItem[data-type="Audio"]),
.programGuideSection {
    border: var(--defaultBorder);
    border-radius: var(--largeRadius);
    padding: 0.5em;
    background-color: var(--lighterGradientPointAlpha);
}

.detailImageContainer > .backdropCard,
.detailImageContainer > .squareCard,
.detailImageContainer > .card:has(.book),
.detailImageContainer > .card:has(.person),
.detailImageContainer > .card:has(.album),
.detailImageContainer > .card:has(.queue),
.detailImageContainer > .card:has(.live_tv) { display: block; }

.detailImageContainer .squareCard:has(.person) { display: none; }

#itemDetailPage:has(.subtitle),
#itemDetailPage:has(.musicParentName) { background: var(--backgroundAlphaOverlay); }

#itemDetailPage:has(.detailImageContainer .cardPadder-square > .person) {
    background: var(--artistPageBackground, var(--backgroundAlphaOverlay));
}

.layout-mobile #itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
.layout-mobile #itemDetailPage:has(.subtitle) .itemBackdrop,
.layout-mobile #itemDetailPage:has(.musicParentName) .itemBackdrop {
    animation: animMoveDownSecondaryPage 0.5s ease-out forwards;
}

.layout-mobile .cardImageIcon { font-size: 3.5em; }

.homeLibraryButton {
    width: min(45%, 12rem);
    min-width: 15%;
    margin: 0 !important;
}

@media (max-width: 50em) {
    .homeLibraryButton { width: 47.6% !important; }
}

@media (orientation: portrait) and (max-width: 40em) {
    [data-type="Movie"] .listItemImage,
    [data-type="Series"] .listItemImage { display: unset; }
    .dashboardActionsContainer { font-size: min(3.6vw, 98%); }
}

@media (orientation: portrait) {
    .layout-mobile .skinHeader.noHomeButtonHeader .headerSyncButton { display: none; }
    .layout-mobile .btnPlay.detailButton:not(.play-button) {
        flex: 0 0 100%;
        margin-right: 0 !important;
    }
}

h2 { font-size: 1.25em; }
h1, h2 { font-weight: 600; }

.tagline {
    font-size: 1.3em;
    font-weight: 400;
    margin: 0;
    font-style: italic;
    color: var(--textColor);
}

html,
.nowPlayingPlaylist,
.nowPlayingContextMenu,
.backgroundContainer:not(.withBackdrop),
.backgroundContainer:not(.backgroundContainer-transparent),
.backdropContainer {
    background-color: #1a1614;
    background: #1a1614;
}

.backdropImage {
    background-position-y: clamp(0%, calc(var(--backdropTrimFromTop) * 5), 100%);
}

.backdropImage:after,
.backdropImage:before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background: inherit;
}

.backdropImage:after {
    z-index: 0;
    height: 80vh;
    -webkit-mask: none;
    mask: none;
}

.layout-desktop .backdropImage:after { transition: opacity 0.25s; }

/* No blur on backdrop */
.backdropImage:before {
    transform: none;
    filter: none;
}

.backgroundContainer.withBackdrop {
    opacity: 0.9;
    background: #1a1614;
}

.layout-tv .backgroundContainer.withBackdrop {
    background: #1a1614;
}

.layout-mobile .withSectionTabs .backgroundContainer.withBackdrop { opacity: 0.9; }

.layout-mobile .backgroundContainer.withBackdrop {
    opacity: 1;
    background: var(--darkerGradientPoint);
}

.withSectionTabs .backgroundContainer.withBackdrop { background: var(--darkerGradientPoint); }

.layout-desktop .withSectionTabs .backdropImage:after { opacity: 0; }
.layout-mobile .withSectionTabs .backdropImage:after  { display: none; }

@keyframes animScaleUp {
    from { transform: translateY(-2.5%); opacity: 0; }
    to   { transform: translateY(0%);    opacity: 1; }
}

.backdropImageFadeIn {
    transform-origin: bottom center;
    animation: animScaleUp 0.5s ease-out forwards;
}

/* Solid footer — no blur */
.appfooter {
    background-color: var(--headerColor) !important;
    backdrop-filter: none !important;
}

.lyricPage { padding: 0 var(--sidePadding); }

.lyricsLine {
    font-size: 2em;
    color: var(--textColor);
    text-align: center;
    align-self: center;
    font-weight: 600;
    transition: transform 0.125s;
}

.pastLyric, .futureLyric {
    transform: scale(0.85);
    font-weight: 400;
    text-align: center;
}

.pastLyric { opacity: 0.45; }

.buttonActive { color: var(--uiAccentColor) !important; }

#divRunningTasks progress { width: calc(100% - 7em); }

.listItemImage .itemProgressBar { position: absolute; margin: 8%; }

.layout-mobile .listItemImage .itemProgressBar {
    position: absolute;
    justify-self: center;
    margin-bottom: 5%;
}

.itemProgressBar:not(.backgroundProgress):not(.playbackProgress):not(.transcodingProgress) {
    backdrop-filter: none;
    background-color: var(--osdSeekBarBufferedColorAlpha) !important;
    height: 0.35em;
    overflow: hidden;
    border-radius: var(--largeRadius);
}

.layout-mobile .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
    width: calc(100% - 2em);
}

.layout-mobile .backdropCard .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress),
.layout-mobile .portraitCard .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
    width: 100%;
    width: -webkit-fill-available;
}

.itemProgressBarForeground {
    border-radius: 0 var(--largeRadius) var(--largeRadius) 0;
    background-color: #d4875d;
}

.backgroundProgress > div,
.backgroundProgress { background-color: var(--darkerGradientPoint); }

.playbackProgress > div { background-color: var(--uiAccentColor); }

::-moz-progress-bar {
    background: var(--uiAccentColor) !important;
    border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
}

::-webkit-progress-value {
    background: var(--uiAccentColor) !important;
    border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
}

progress, ::-webkit-progress-bar {
    background: var(--darkerGradientPoint) !important;
    border: var(--defaultBorder) !important;
    border-radius: var(--smallRadius);
    overflow: hidden;
}

progress + span { color: var(--uiAccentColor) !important; }

.mdl-spinner__circle {
    border-color: var(--textColor);
    border-style: inset;
    border-width: 0.25em;
}

.mdl-slider-container { height: 1em; }
.mdl-slider { height: unset; }
.mdl-slider-background-flex-container { padding: 0; }

.mdl-slider-background-flex {
    border-radius: var(--smallRadius);
    height: 0.4em;
    margin-top: -0.2em;
    background: var(--osdSeekBarBufferedColorAlpha);
    transition: 0.2s linear;
}

.sliderContainer:active .mdl-slider-background-flex {
    height: 0.6em;
    margin-top: -0.3em;
}

.mdl-slider-background-lower { background-color: var(--osdSeekBarPlayedColor); }
.mdl-slider-background-upper { background-color: var(--osdSeekBarBufferedColorAlpha); }

.mdl-slider::-webkit-slider-thumb {
    background: var(--osdSeekBarThumbColor);
    width: 0.4em !important; height: 0.4em !important;
    border-radius: 0.4em;
}

.sliderContainer:hover .mdl-slider::-webkit-slider-thumb {
    width: 0.2em !important; height: 0.8em !important;
    border-radius: 0.2em; transform: scale(1);
}

.sliderContainer:active .mdl-slider::-webkit-slider-thumb,
.mdl-slider.show-focus:focus::-webkit-slider-thumb {
    width: 0.2em !important; height: 0.8em !important;
    border-radius: 0.2em; transform: scale(1) scaleY(1.25);
}

.mdl-slider::-moz-range-thumb {
    background: var(--osdSeekBarThumbColor);
    width: 0.4em !important; height: 0.4em !important;
    border-radius: 0.4em;
}

.sliderContainer:hover .mdl-slider::-moz-range-thumb {
    width: 0.2em !important; height: 0.8em !important;
    border-radius: 0.2em; transform: scale(1);
}

.sliderContainer:active .mdl-slider::-moz-range-thumb,
.mdl-slider.show-focus:focus::-moz-range-thumb {
    width: 0.2em !important; height: 0.8em !important;
    border-radius: 0.2em; transform: scale(1) scaleY(1.25);
}

.sliderMarkerContainer { margin: 0 0.1em; }
.sliderMarker.watched  { background-color: var(--osdSeekBarPlayedColor); }
.sliderMarker { height: 4px; border-radius: 2px; }

.iconOsdProgressInner { background: var(--osdSeekBarPlayedColor); }

.selectLabel { max-height: 2em; }

.button-link { color: #c5b7a3; }
.button-link:hover  { color: unset !important; text-decoration: none; }
.button-link:active { color: #e3d8c9 !important; text-decoration: none; }

/* Solid drawer — no blur */
.mainDrawer, .drawer-open {
    background-color: var(--drawerColor);
    border-right: var(--defaultBorder);
    backdrop-filter: none;
}

.mainDrawer-scrollContainer { padding-bottom: 5vh; }
.mainDrawer-scrollContainer > div:first-child { margin-bottom: 1em; }

.btnHeaderSave.button-flat {
    color: var(--uiAccentColor) !important;
    gap: 0.3em;
    border-radius: var(--smallRadius);
}

.button-flat:hover  { color: unset; }
.button-flat:active { color: unset; background-color: rgba(212, 135, 93, 0.15); }

.playstatebutton-icon-played { color: #5c7c46; }

.videoOsdBottom.videoOsdBottom-maincontrols .btnPause { font-size: 2em; }

.osdControls { display: flex; flex-direction: column-reverse; }

.itemExternalLinks { color: var(--textColor); }
.itemExternalLinks.focuscontainer-x { color: transparent; }

.itemExternalLinks.focuscontainer-x > .button-link {
    color: var(--textColor);
    background-color: var(--selectorBackgroundColor);
    padding: 0.125em 0.5em;
    border-radius: var(--smallerRadius);
    margin-bottom: 0.5em;
}

.layout-mobile .itemExternalLinks.focuscontainer-x > .button-link:hover:not(:active) {
    color: var(--textColor) !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x > a:hover,
.itemExternalLinks.focuscontainer-x > a:active {
    background-color: var(--activeColor) !important;
    color: #231e1c !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="themoviedb.org"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="themoviedb.org"]:active {
    background-color: rgb(26, 183, 216) !important; color: black !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="imdb.com"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="imdb.com"]:active {
    background-color: rgb(226, 182, 22) !important; color: black !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="thetvdb.com"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="thetvdb.com"]:active {
    background-color: rgb(108, 213, 145) !important; color: black !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="trakt.tv"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="trakt.tv"]:active {
    background-color: rgb(171, 58, 173) !important; color: var(--textColor) !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="theaudiodb.com"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="theaudiodb.com"]:active {
    background-color: rgb(99, 153, 204) !important; color: rgb(15, 22, 28) !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="musicbrainz.org"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="musicbrainz.org"]:active {
    background-color: rgb(186, 71, 143) !important; color: var(--textColor) !important;
}

.itemTags, .itemTags > a { display: none; font-size: unset !important; font-weight: 200; }

.detail-clamp-text {
    text-align: start;
    color: var(--dimTextColor);
    margin-top: 0; margin-bottom: 0;
}

.detail-clamp-text p { margin-top: 0.25em; margin-bottom: 0.25em; }
.layout-desktop .detail-clamp-text { -webkit-line-clamp: 2; }
.layout-mobile  .detail-clamp-text { -webkit-line-clamp: 4; }
.layout-tv      .detail-clamp-text { -webkit-line-clamp: 10; transition: none; }

.overview-expand.emby-button {
    padding: 0;
    margin-top: 1.4em; margin-bottom: 1.4em;
    color: transparent;
}

.overview-expand.emby-button:after {
    content: "keyboard_arrow_down";
    font-family: var(--iconPack), Material Icons;
    font-feature-settings: "liga";
    background: var(--selectorBackgroundColor);
    border-radius: 50%;
    width: 1.5em; height: 1.5em;
    align-content: center;
    line-height: 1.6ch;
    transition: transform 0.5s;
    color: var(--textColor);
}

.overview.detail-clamp-text ~ .overview-controls .overview-expand:after  { transform: rotateZ(0deg); }
.overview:not(.detail-clamp-text) ~ .overview-controls .overview-expand:after { transform: rotateZ(180deg); }

.overview-controls { height: 0; }
.detailSectionContent:has(.itemExternalLinks.hide) .overview-controls { height: 1em; }

#seriesAirTime { margin-top: 0.5em; }

.itemMiscInfo { align-items: flex-end !important; justify-content: center; }

.innerCardFooter, .chapterCardImageContainer { width: 100%; box-sizing: border-box; }

.innerCardFooter, .chapterThumbTextContainer {
    background: var(--cardFooterGradient);
    text-shadow: 0.1em 0.1em 0px black;
    padding: 0em 2em 2em 2em;
    align-content: end; display: grid; height: 100%;
}

.chapterCardImageContainer { background-size: 135%; }

.chapterCardImageContainer + .innerCardFooter {
    padding: 0em 1em 1em 1em;
    height: auto;
}

.layout-mobile .innerCardFooter { padding: 5em 1em 1.25em 1em; }
.layout-mobile .chapterCardImageContainer + .innerCardFooter { padding: 0em 0.5em 0.5em 0.5em; }

.centerMessage { width: unset; }
.noItemsMessage { width: 90%; }

/* Solid dialog — no blur */
.dialog {
    backdrop-filter: none;
    background-color: var(--drawerColor);
    min-width: 11em;
}

[dir="ltr"] .emby-collapsible-button { padding-left: 1em; }

.dialog:not(.dialog-fullscreen) {
    border-radius: var(--largeRadius) !important;
    border: var(--defaultBorder);
}

@media (max-width: 80em), (max-height: 45em) {
    .dialog.dialog-fixedSize,
    .dialog.dialog-fullscreen-lowres {
        border-radius: unset !important;
        border: unset;
    }
}

.dialogBackdropOpened { opacity: 0.66; }

.subtitleEditor-dropZone,
.imageEditor-dropZone,
.lyricsEditor-dropZone { border-radius: var(--largeRadius); }

.formDialogHeaderTitle {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    text-align: center;
    padding: 0 0.5em !important;
}

.formDialogFooter:not(.formDialogFooter-clear.formDialogFooter-flex) > .formDialogFooterItem {
    -webkit-flex-basis: 6em;
    flex-basis: 6em;
}

.collapseContent { background-color: unset !important; backdrop-filter: none !important; }

.selectionCommandsPanel {
    background: var(--lighterGradientPoint);
    border-bottom: var(--defaultBorder);
    backdrop-filter: none;
    height: 3.5em;
    padding-top: max(env(safe-area-inset-top), var(--safe-area-inset-top));
}

.selectionCommandsPanel > h1 { font-size: large; }
.itemSelectionPanel { border: unset; background-color: transparent; }

.emby-checkbox:checked + span + .checkboxOutline {
    border-radius: var(--smallerRadius) !important;
    box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, 0.8);
    background: transparent;
    border-color: #d4875d;
    border-style: solid;
    border-width: var(--borderWidthDouble);
    outline: none;
}

@supports (display: revert) {
    .emby-checkbox:checked + span + .checkboxOutline {
        outline: solid var(--borderWidth) #d4875d;
    }
}

.checkboxOutline {
    top: unset; height: 1.3em; width: 1.3em;
    border-radius: var(--smallerRadius);
}

.itemSelectionPanel .material-icons.check:before {
    font-size: 4em; color: #ffffff; padding: 0.25em;
}

.cardText-first + .itemSelectionPanel > .checkboxContainer {
    height: calc(100% - 1.75em);
}

.overflowBackdropCard .cardText-first + .itemSelectionPanel > .checkboxContainer { height: 100%; }

.checkboxContainer .emby-checkbox:checked + span + .checkboxOutline.multiSelectCheckboxOutline {
    border-radius: var(--largeRadius) !important;
}

#castCollapsible .checkboxContainer .emby-checkbox:checked + span + .checkboxOutline.multiSelectCheckboxOutline,
#guestCastContent .checkboxContainer .emby-checkbox:checked + span + .checkboxOutline.multiSelectCheckboxOutline {
    border-radius: 50% !important;
}

.cardPadder { text-align: center; }

#castCollapsible .cardPadder .cardImageIcon,
#guestCastContent .cardPadder .cardImageIcon { display: none; }

.cardText-secondary + .itemSelectionPanel > .checkboxContainer,
.cardText.cardTextCentered:not(.cardText-secondary, .cardText-first) + .itemSelectionPanel > .checkboxContainer {
    height: calc(100% - 3em);
}

.cardFooter + .itemSelectionPanel > .checkboxContainer,
.cardScalable + .itemSelectionPanel > .checkboxContainer { height: 100%; }

.checkboxOutline.multiSelectCheckboxOutline {
    border-radius: var(--largeRadius);
    border-width: 0; width: 100%; height: 100%;
}

.checkboxOutline:not(.multiSelectCheckboxOutline) .checkboxIcon { font-size: 0.9em; font-weight: 900; }

.checkboxOutline:not(.multiSelectCheckboxOutline) {
    border: solid #7a6e64 var(--borderWidth);
    background-color: #2a231e;
    transition: all 0.125s;
}

.emby-checkbox:checked + span + .checkboxOutline:not(.multiSelectCheckboxOutline) {
    box-shadow: none;
    background: var(--checkboxCheckedBgColor);
    border: var(--defaultLighterBorder);
}

.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
.emby-checkbox:focus + span + .checkboxOutline {
    border-color: var(--highlightOutlineColor) !important;
    outline: none;
}

@supports (display: revert) {
    .emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
        outline: var(--borderWidth) solid #7a6e64;
        outline-offset: calc(-2.5 * var(--borderWidth));
    }
    .emby-checkbox:focus + span + .checkboxOutline {
        border-color: #d4875d !important;
        outline: var(--borderWidth) solid var(--highlightOutlineColor);
    }
}

.cardIndicators { -webkit-align-items: center; align-items: center; top: 0.5em; }
[dir="ltr"] .cardIndicators { right: 0.5em; }
.layout-mobile .cardIndicators { top: 0.45em; right: 0.5em; }

.indicator { border: solid rgba(160,149,133,0.4) var(--borderWidth); border-radius: 100em; }

.playedIndicator { background: #5c7c46; border: var(--defaultLighterBorder); }

.videoIndicator {
    background: #2a231e;
    padding: 0.5em; transform: scale(0.85);
    border: var(--defaultLighterBorder);
    font-size: 0.75em;
}

.videoIndicator:has(.photo_album),
.videoIndicator:has(.folder) { background: #d4875d; }
.videoIndicator:has(.photo)  { background: #4a8a8a; }
.videoIndicator:has(.videocam) { background: #9a2a2a; }

.defaultCardBackground, .cardScalable { background: var(--cardBackgroundGradient); }

div[data-type="Book"] .play_arrow:before     { content: "book"; font-size: 85%; }
div[data-type="Photo"] .play_arrow:before    { content: "photo"; }
div[data-type="PhotoAlbum"] .play_arrow:before { content: "photo_album"; }

.emby-button.block,
.button-alt,
.raised,
#btnDeleteImage,
.manageRecordingButton,
.dashboardActionsContainer > .emby-button {
    color: var(--textColor);
    border-radius: var(--smallRadius);
    background: var(--lighterGradientPoint);
    border: var(--defaultBorder);
    transition: all 0.125s;
}

.editItemMetadataForm > .metadataFormFields div:has(.formDialogFooterItem) {
    display: flex; justify-content: center;
}

.btnBrowse > .folder { margin-inline-end: 0.5em; }

.fab {
    color: var(--textColor);
    background: var(--lighterGradientPoint);
    border: var(--defaultBorder);
}

.fab:focus    { background: var(--lighterGradientPoint) !important; filter: brightness(1.2); }
.raised:focus { background: inherit; filter: brightness(1.2); }
.raised:active, .fab:active, .emby-button:active { filter: brightness(1.2) !important; transform: scale(0.98); }

.detailButton { border: var(--defaultLighterBorder); padding: 0.5em 0.5em !important; }

.detailButton-icon {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

.cardScalable .material-icons.check:before {
    font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 20;
    transform: scale(1.25);
}

.emby-button[title="Favorite"] .material-icons.favorite:before {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

.detailButton:not(.btnPlay) {
    color: var(--textColor);
    backdrop-filter: none;
    border-color: transparent;
    margin: 0.5em !important;
    border-radius: 50%;
    padding: 0.6em !important;
    background: transparent;
}

.layout-desktop .detailButton:not(.btnPlay):hover { color: #231e1c; background: var(--dimTextColor); }
.detailButton:active { color: #231e1c; background: var(--textColor); }

.btnPlay.detailButton {
    background-color: var(--textColor);
    color: #231e1c;
    border-radius: 3em;
    border-color: var(--borderColor);
    height: 3em; min-width: 10em;
    margin-right: 0.5em !important;
    flex-direction: row;
}

.mainDetailButtons > .btnPlay:after { content: attr(title); padding-right: 1ch; }

.btnPlay > .detailButton-content::after { padding: 0 1ch; place-content: center; }
.btnPlay > .detailButton-content {
    -webkit-align-items: unset; align-items: unset;
    display: -webkit-flex; display: flex;
    -webkit-flex-direction: unset; flex-direction: unset;
    justify-content: flex-start;
}

.mainDetailButtons:has(.detailButton[data-type="Book"]) .btnPlay[title="Play"]:after { content: "Read"; }
.mainDetailButtons:has(.detailButton[data-type="Book"]) .btnPlay .material-icons.play_arrow:before {
    content: "book"; padding-inline-end: 1ch;
}

.mainDetailButtons { justify-content: center; margin: 0; }

.layout-mobile [dir="ltr"] .mainDetailButtons { flex-wrap: wrap; padding: 0 1.25em; }

@media (min-width: 100em) {
    .mainDetailButtons { font-size: unset; margin: 0; }
}

.localnav > .emby-button {
    background: var(--lighterGradientPoint) !important;
    color: var(--textColor);
    padding: 0.8em 0.8em;
}

div[data-role="controlgroup"] a.ui-btn-active {
    background: var(--selectorBackgroundColor) !important;
    color: var(--textColor) !important;
}

.guide-date-tab-button.emby-tab-button-active,
.guide-date-tab-button:focus { color: var(--textColor); }

#btnDeleteImage, .button-delete, .btnRevoke, #btnShutdown {
    background: var(--btnDeleteColor);
    border: solid var(--btnDeleteBorderColor) var(--borderWidth);
}

.button-submit {
    background: var(--btnSubmitColor) !important;
    border: solid var(--btnSubmitBorderColor) var(--borderWidth) !important;
}

/* Solid form header/footer — no blur */
.collapseContent,
.formDialogFooter:not(.formDialogFooter-clear),
.formDialogHeader:not(.formDialogHeader-clear) {
    background-color: var(--headerColor);
    backdrop-filter: none;
}

.paperList { padding: 0.4em; }

.serverInfo { padding: 1em; }
.serverInfo > :nth-child(1n) { -webkit-flex: 1 0 30%; flex: 1 0 30%; }
.serverInfo > :nth-child(2n) { -webkit-flex: 1 0 50%; flex: 1 0 50%; text-align: end; }

.listItemIcon:not(.listItemIcon-transparent) { background-color: var(--lighterGradientPoint) !important; }

.listItemIcon.notification_important {
    background-color: var(--btnDeleteColor) !important;
    border: solid var(--btnDeleteBorderColor) var(--borderWidth);
}

.listItemIcon.notifications:not(.listItemIcon-transparent),
.listItemIcon.schedule:not(.listItemIcon-transparent),
.listItemIcon.person:not(.listItemIcon-transparent),
.listItemIcon.live_tv:not(.listItemIcon-transparent) {
    background-color: #352c26 !important;
    border: var(--defaultBorder);
}

.readOnlyContent { flex-direction: column !important; }

/* MUI — solid, no blur */
.MuiAppBar-root {
    background: var(--headerColor);
    backdrop-filter: none;
    border-bottom: var(--defaultBorder);
}

.MuiDrawer-paper {
    background: var(--drawerColor);
    backdrop-filter: none;
    border-right: var(--defaultBorder);
    padding: 0.25em;
}

.listItemImage {
    border-radius: var(--smallRadius);
    margin-right: 0.75em !important;
    border: var(--defaultBorder);
}

[dir="ltr"] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem) {
    padding: 0.375em !important;
}

[dir="ltr"] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem):not(:last-child) {
    margin-bottom: 0.5em;
}

[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] {
    padding: 0.375em;
    margin-bottom: 0.5em;
}

.layout-mobile #songsTab .listItem[data-type="Audio"],
.layout-mobile #playlist .listItem[data-type="Audio"] { margin: auto 1em; }

.listItem[data-type="Audio"]:has(.playlistIndexIndicatorImage) .listItemBodyText {
    color: var(--textColor); font-weight: 600;
}

.listItem[data-type="Audio"]:has(.playlistIndexIndicatorImage):not(:hover) {
    background-color: rgba(212, 135, 93, 0.07);
}

.listItem-largeImage .listItemBodyText:not(.secondary) {
    font-size: 1.17em; font-weight: 600; color: var(--textColor);
}

.listItemBodyText.secondary { color: var(--dimTextColor); }

.listItemBody > .listItemBodyText:not(.secondary) {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--textColor);
}

.listItem-overview {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listItem-bottomoverview,
[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItem-overview p {
    margin-top: 0.75em; margin-bottom: 0em;
}

.listItem, .navMenuOption { border-radius: 0.7em; }
.listItem:hover, .navMenuOption:hover { background: unset; border-radius: 0.7em; }
.listItem:focus  { background: var(--highlightOutlineColor); }
.listItem:active, .navMenuOption:active { background: rgba(212, 135, 93, 0.1); }

.listItem-border { border-color: transparent !important; }
.listItem-border.emby-button.show-focus:focus { border-radius: var(--smallRadius); }

.MuiListItem-root > a,
.MuiList-root > a,
.MuiListItem-root > div {
    border: solid transparent var(--borderWidth);
    border-radius: 0.7em;
}

.Mui-selected { background-color: var(--activeColor) !important; }

.actionsheetDivider { height: 2px; background: rgba(212, 135, 93, 0.08); }
.actionsheet-xlargeFont { line-height: normal; }
.actionSheetContent { padding: 0.4em !important; }
.actionSheetContent > h1 { font-size: unset; }

[dir="ltr"] .actionsheetMenuItemIcon { margin: 0 0.2em 0 0.45em !important; }

.actionSheetMenuItem:has(.listItemIcon.check) { background-color: var(--activeColor); }
.actionSheetMenuItem:has(.listItemIcon.check) .listItemBodyText { color: #231e1c; }
.actionSheetMenuItem:has(.listItemIcon.check) .listItemIcon.check { display: none; }

.actionSheetMenuItem:has(.listItemIcon.check[style*="hidden"]) { background-color: transparent; }
.actionSheetMenuItem:has(.listItemIcon.check[style*="hidden"]):active { background-color: rgba(212,135,93,0.1); }

.navMenuOption {
    border-radius: var(--smallRadius) !important;
    margin: 0em 1em !important;
}

[dir="ltr"] .navMenuOption { padding: 0.75em 1em !important; margin-bottom: unset; }

#myPreferencesMenuPage .listItemIcon { margin-left: 0.5em; margin-right: 0.25em; }

.navMenuOption-selected { background-color: var(--activeColor) !important; }

#itemDetailPage .detailSection {
    display: grid;
    row-gap: 1em;
    column-gap: 3em;
    max-width: unset !important;
    grid-template-columns: 1.3fr 0.7fr 1fr 1fr;
    margin-bottom: 1.5em;
}

.detailPageContent { gap: 1em; }

.trackSelections {
    order: 3;
    max-width: unset !important;
    margin-top: 1em;
    border: var(--defaultBorder);
    border-radius: var(--smallRadius);
    padding: 1em;
    grid-column: 3 / 5;
    background-color: var(--lighterGradientPointAlpha);
}

.layout-mobile .trackSelections { margin-top: 0; }
.layout-tv .trackSelections { order: 2; }
.recordingFields { order: 4; }
.recordingButton { gap: 1ch; }

.detailsGroupItem,
.trackSelections .selectContainer {
    max-width: unset !important;
    align-items: baseline;
}

.selectArrowContainer { top: 0em; opacity: 0.5; }
.trackSelectionFieldContainer > .selectArrowContainer { top: 0.5em; }

.trackSelectionFieldContainer > label {
    max-width: 2.75em;
    background-repeat: no-repeat;
    color: transparent;
    transform: scale(0.9);
}

.selectVideoContainer.trackSelectionFieldContainer > label {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23e3d8c9" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M2 12c0-4.7 0-7 1.5-8.5C4.9 2 7.3 2 12 2s7 0 8.5 1.5C22 4.9 22 7.3 22 12s0 7-1.5 8.5C19.1 22 16.7 22 12 22s-7 0-8.5-1.5C2 19.1 2 16.7 2 12Z"/><path stroke-linecap="round" d="M17 2.5v19M7 2.5v19M2.5 7H7m14.5 0H17M2.5 17H7m14.5 0H17M2 12h20"/></g></svg>');
}

.selectAudioContainer.trackSelectionFieldContainer > label {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23e3d8c9" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M9 19a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM21 17a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9 19V8M21 17V6"/><path stroke-linecap="round" d="m15.7 3.8-4 1.3c-1.3.4-2 .6-2.3 1.2C9 6.8 9 7.5 9 8.9V12l12-4v-.5c0-2.5 0-3.7-.8-4.3-.9-.6-2-.2-4.5.6Z"/></g></svg>');
}

.selectSubtitlesContainer.trackSelectionFieldContainer > label {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23e3d8c9" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M2 12c0-3.8 0-5.7 1.2-6.8C4.3 4 6.2 4 10 4h4c3.8 0 5.7 0 6.8 1.2C22 6.3 22 8.2 22 12s0 5.7-1.2 6.8C19.7 20 17.8 20 14 20h-4c-3.8 0-5.7 0-6.8-1.2C2 17.7 2 15.8 2 12Z"/><path stroke-linecap="round" d="M10 16H6M14 13h4M14 16h-1.5M9.5 13h2M18 16h-1.5M6 13h1"/></g></svg>');
}

.selectSourceContainer.trackSelectionFieldContainer > label {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23e3d8c9" d="m15.4 4.05-.5.56.5-.56Zm3.95 3.57-.5.55.5-.55Zm2.3 2.53-.68.3.68-.3ZM3.17 20.83l.53-.53-.53.53Zm17.66 0-.53-.53.53.53Zm-6.83.42h-4v1.5h4v-1.5ZM2.75 14v-4h-1.5v4h1.5Zm18.5-.44V14h1.5v-.44h-1.5Zm-6.36-8.95 3.96 3.56 1-1.11L15.9 3.5l-1 1.11Zm7.86 8.95c0-1.69.02-2.75-.41-3.71l-1.37.6c.26.6.28 1.3.28 3.11h1.5Zm-3.9-5.39c1.35 1.22 1.85 1.7 2.12 2.29l1.37-.61c-.43-.96-1.23-1.66-2.49-2.8l-1 1.12Zm-8.82-5.42c1.58 0 2.18.01 2.71.22l.54-1.4c-.85-.33-1.78-.32-3.25-.32v1.5Zm5.86.75c-1.08-.98-1.76-1.6-2.61-1.93l-.54 1.4c.53.2.98.59 2.15 1.64l1-1.11ZM10 21.25c-1.9 0-3.26 0-4.29-.14-1-.13-1.58-.39-2-.81l-1.07 1.06c.75.75 1.7 1.08 2.87 1.24 1.15.15 2.63.15 4.49.15v-1.5ZM1.25 14c0 1.86 0 3.34.15 4.49a4.71 4.71 0 0 0 1.24 2.87L3.7 20.3c-.42-.43-.67-1-.81-2.01A36 36 0 0 1 2.75 14h-1.5ZM14 22.75c1.86 0 3.34 0 4.49-.15a4.71 4.71 0 0 0 2.87-1.24L20.3 20.3c-.43.42-1 .68-2.01.81-1.03.14-2.38.14-4.29.14v1.5ZM21.25 14c0 1.9 0 3.26-.14 4.29-.13 1-.39 1.58-.81 2l1.06 1.07a4.71 4.71 0 0 0 1.24-2.87c.15-1.15.15-2.63.15-4.49h-1.5Zm-18.5-4c0-1.9 0-3.26.14-4.29.14-1 .39-1.58.81-2L2.64 2.63A4.71 4.71 0 0 0 1.4 5.51c-.15 1.15-.15 2.63-.15 4.49h1.5Zm7.28-8.75c-1.87 0-3.36 0-4.51.15a4.72 4.72 0 0 0-2.88 1.24L3.7 3.7c.42-.42 1-.67 2.02-.81 1.03-.14 2.4-.14 4.31-.14v-1.5Z"/><path stroke="%23e3d8c9" stroke-width="1.5" d="M13 2.5V5c0 2.36 0 3.54.73 4.27.73.73 1.91.73 4.27.73h4"/></svg>');
}

.detailSectionContent a:not(.overview-expand) { text-align: start; }

.layout-desktop .detailSectionContent { display: grid; align-content: end; min-height: 16vh; }
.detailSectionContent:has(.tagline.hide + .overview.hide) { min-height: unset; }

.itemDetailsGroup {
    outline: none;
    overflow: hidden;
    margin-top: 1em;
    border-radius: var(--smallRadius);
    background-color: var(--lighterGradientPointAlpha);
    border: none;
    box-shadow: inset 0 0 0 0.06em var(--borderColor) !important;
    order: 2;
    grid-column: 1 / 3;
}

.layout-mobile .itemDetailsGroup { margin-top: 0; }

.detailsGroupItem {
    margin: 0 !important;
    justify-content: space-between;
    padding: 0.5em 0.9em;
    align-items: baseline;
}

.detailsGroupItem:not(:last-child) { border-bottom: var(--defaultBorder); }
.detailsGroupItem > .label         { font-weight: 600; flex-basis: 6em; }
.detailsGroupItem > .content > a   { font-weight: 400; text-align: end; }
.detailsGroupItem > .content       { text-align: end; color: var(--dimTextColor); }
.detailsGroupItem > .label         { color: var(--textColor); }

.layout-tv .itemDetailsGroup { order: 2; }

.detailSection > .nextUpSection         { order: 5; grid-column: 1; }
.detailSection > #listChildrenCollapsible { order: 6; grid-column: 2 / -1; }
.detailSectionContent                   { order: 1; grid-column: 1 / -1; }

.nextUpSection.hide ~ #listChildrenCollapsible,
.trackSelections.hide ~ .recordingFields.hide ~ .itemDetailsGroup { grid-column: 1 / -1; }

.layout-mobile .trackSelections,
.layout-mobile .detailSectionContent,
.layout-mobile .itemDetailsGroup,
.layout-mobile .nextUpSection,
.layout-mobile .detailSection > #listChildrenCollapsible,
.layout-tv .trackSelections,
.layout-tv .detailSectionContent,
.layout-tv .itemDetailsGroup,
.layout-tv .nextUpSection,
.layout-tv .detailSection > #listChildrenCollapsible,
.collectionItems,
.programGuideSection { grid-column: 1 / -1; }

.collectionItems { order: 2; }
.programGuideSection:not(.hide) { order: -1; margin-top: 2em; }

.layout-desktop .programGuide { padding-right: var(--sidePadding); }

.collectionItems .sectionTitleContainer.padded-left { padding-left: 0.375em; }
.collectionItemsContainer.padded-left { padding-left: 0; }

.sliderBubble { border-radius: var(--largeRadius); border: var(--defaultBorder); overflow: hidden; z-index: 3; }

.alphaPickerButton { font-family: monospace; margin: 0.15em; color: rgba(227, 216, 201, 0.25); }
.alphaPickerButton-selected { color: #e3d8c9; }
.alphaPicker-vertical { height: 70%; }
.layout-mobile .alphaPicker-vertical { right: 0 !important; }
.alphaPicker { justify-content: center; }
.alphaPickerButton-tv { transition: transform 0.2s; }
.alphaPickerButton-tv:focus { background-color: var(--highlightOutlineColor); transform: scale(1.75); }

.padded-right { padding-right: var(--sidePadding) !important; }

[dir="ltr"] .detailPageContent,
.content-primary {
    padding-left: var(--sidePadding) !important;
    padding-right: var(--sidePadding) !important;
}

[dir="ltr"] .detailPageContent > .detailPagePrimaryContent {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#itemDetailPage .verticalSection .itemsContainer.padded-right { padding-right: 0 !important; }
.vertical-list > .listGroupHeader { padding-left: 0.5ch; }
.listPaging > span { padding: 0 0.5em; }
.layout-mobile #myPreferencesMenuPage { padding-top: var(--appBarHeight) !important; }

.headerUserButton { width: 2em; height: 2em; margin-inline-end: 1em; border: var(--defaultBorder); }
.MuiAvatar-circular { width: 1.5em; height: 1.5em; border: var(--defaultBorder); }
.dashboardDocument .content-primary { padding-top: 4.25rem; }
.editorNode { display: flex; align-items: center; }
.metadataSidebarIcon { color: #7a6a9a; }
.jstree-default .jstree-wholerow-clicked { background: var(--selectorBackgroundColor) !important; }
.verticalSection { margin-top: 0.5em; margin-bottom: 1em; }

.sectionTitleTextButton { padding: 0 0.5em; }
.sectionTitleTextButton:hover  { background: transparent !important; }
.sectionTitleTextButton:active { color: #e3d8c9 !important; }
.sectionTitleContainer-cards   { padding-top: 0; padding-bottom: 0.2em; }

.sectionTitleTextButton > * {
    text-align: left;
    padding: 0.3em 0 !important;
    margin: 0 0 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 88vw;
}

.dashboardSection .sectionTitleTextButton > .material-icons,
.sectionTitleTextButton > .material-icons,
.dashboardSection .sectionTitleTextButton > .material-icons.material-icons { font-size: unset; }

.sectionTitleTextButton > .material-icons::before { display: none; }

.sectionTitleTextButton > .material-icons.chevron_right {
    height: 1.5rem; width: 1.5rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23e3d8c9' aria-hidden='true'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E")
        no-repeat center center;
    background-size: contain;
}

.toast { border-radius: var(--smallRadius); }

.upNextContainer { border-radius: var(--largeRadius); color: var(--textColor); }
[dir="ltr"] .upNextContainer { margin: 2em; box-sizing: border-box; max-width: 80vw; }
.upNextContainer .btnStartNow { background-color: var(--btnSubmitColor); border-color: var(--btnSubmitBorderColor); }
.upNextDialog-title { white-space: pre-wrap; width: unset; }
.upNextDialog-buttons { width: unset; flex-wrap: wrap; }
.upNextContainer .upNextDialog-countdownText { color: var(--textColor); }

.skip-button-container { bottom: 9rem; }

.skip-button {
    background-color: var(--textColor);
    box-shadow: var(--shadow);
    margin-right: var(--sidePadding);
    border-radius: 3em;
    color: #231e1c;
}

.layout-tv .skip-button { margin-right: auto; margin-left: var(--sidePadding); }
.skip-button:hover  { background-color: #e3d8c9; }
.skip-button:active { background-color: rgba(227, 216, 201, 0.7); box-shadow: none; }

/* Solid toast/upNext — no blur */
.toast,
.upNextContainer {
    background: var(--headerColor) !important;
    border: var(--defaultBorder) !important;
    backdrop-filter: none;
}

.activeSession { width: 98% !important; }
.emby-tab-button:hover { color: #e3d8c9; }

@media (hover: hover) and (pointer: fine) {
    .paper-icon-button-light:hover:not(:disabled) {
        color: var(--textColor);
        background-color: rgba(212, 135, 93, 0.08);
    }

    .actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]):hover {
        background-color: rgba(212, 135, 93, 0.1);
    }

    .emby-select-withcolor:hover:not(.emby-select[disabled], :focus),
    .emby-input:hover:not(:focus),
    .emby-textarea:hover:not(:focus) {
        border-color: var(--dimTextColor) !important;
    }

    .checkboxContainer:hover .checkboxOutline:not(.multiSelectCheckboxOutline) {
        border-color: var(--checkboxCheckedBgColor);
        border-width: var(--borderWidthDouble);
    }

    .button-flat:hover { background-color: rgba(212, 135, 93, 0.15); color: var(--textColor); }
    .btnPlay.detailButton:hover { background-color: var(--textColor); color: #231e1c; }
    .alphaPickerButton:hover { color: #e3d8c9; }

    /* No blur on list item hover */
    .listItem:hover {
        background: rgba(212, 135, 93, 0.08);
        backdrop-filter: none;
    }

    .navMenuOption:hover { background: rgba(212, 135, 93, 0.08); }

    .searchfields-icon:hover,
    .inputContainer .emby-input-iconbutton:hover { color: rgba(227, 216, 201, 0.8); }

    #scenesContent .cardScalable:hover { border-color: var(--dimTextColor) !important; }
    .sectionTitleTextButton:hover { background: transparent !important; color: var(--textColor) !important; }
    .button-link:hover { color: #e3d8c9 !important; text-decoration: none; }
}

.paper-icon-button-light:active:not(:disabled) {
    color: var(--textColor);
    background-color: rgba(212, 135, 93, 0.08);
}

.emby-textarea { font-family: consolas, monaco, monospace; }
.customCssContainer textarea { max-height: 40vh; overflow-y: auto !important; }

.emby-select-withcolor,
.emby-select,
.emby-input,
.emby-textarea {
    background-color: var(--selectorBackgroundColor);
    border: var(--defaultLighterBorder);
    border-radius: var(--smallRadius);
    padding: 0.5em !important;
}

.inputLabelFocused, .selectLabelFocused, .textareaLabelFocused { color: var(--textColor); }

.emby-select-withcolor:focus,
.emby-input:focus,
.emby-textarea:focus {
    border-color: var(--highlightOutlineColor) !important;
    outline: none !important;
}

@supports (display: revert) {
    .emby-select-withcolor:focus,
    .emby-input:focus,
    .emby-textarea:focus {
        border-color: var(--highlightOutlineColor) !important;
        outline: thin solid var(--highlightOutlineColor) !important;
    }
}

.emby-select-withcolor > option { color: inherit; background-color: var(--selectorBackgroundColor); }

.inputContainer .emby-input-iconbutton {
    color: rgba(197, 183, 163, 0.5);
    margin-left: -2.5em;
    background-color: transparent !important;
}

.searchfields-txtSearch { padding: 0.75em 1.5em !important; border-radius: 4em; }

.searchfields-icon {
    padding: 0.25em;
    margin-left: -1.75em;
    margin-bottom: 0;
    border-radius: var(--largeRadius);
    color: rgba(197, 183, 163, 0.5);
}

.searchfields-icon:active,
.inputContainer .emby-input-iconbutton:active { color: rgba(227, 216, 201, 0.8); }

.searchFields > .searchFieldsInner { flex-direction: row-reverse; }

.nameContainer > h3, .nameContainer > h1 { word-break: break-word; overflow: hidden; }

.nameContainer > h1.itemName,
.nameContainer > h1.parentName {
    font-size: 4em;
    white-space: pre-wrap;
    padding-bottom: 0.5ch;
    color: var(--textColor);
}

.nameContainer > h1.itemName,
.nameContainer > h1.parentName,
.nameContainer > h1.itemName a,
.nameContainer > h1.parentName a { font-weight: 200; }

.nameContainer > h1.itemName bdi,
.nameContainer > h1.parentName bdi,
.nameContainer > h1.itemName a,
.nameContainer > h1.parentName a {
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.layout-mobile .nameContainer > h1.itemName,
.layout-mobile .nameContainer > h1.parentName,
.layout-mobile .nameContainer > h1.parentNameLast {
    font-size: 2em; word-wrap: break-word; padding-bottom: 0ch;
}

.subtitle { font-size: 2em; padding-bottom: 1em; }
.layout-mobile .subtitle { font-size: 1.5em; padding-bottom: 0.5em; }

.itemName.originalTitle {
    padding-top: 0.25em; padding-bottom: 0.25em;
    color: var(--dimTextColor);
    display: var(--itemOriginalTitleVisibility);
}

.channelPrograms,
.programCell {
    border-color: transparent;
    background-color: transparent !important;
    border-radius: var(--smallRadius);
    height: 4.42em;
}

.guideProgramName {
    background-color: rgba(212, 135, 93, 0.05);
    height: calc(100% - 0.7em);
    margin: 0.35em 0 0.35em 0.7em;
    border-radius: var(--smallerRadius);
}

.guide-programNameCaret { display: none; }
.programCell-active .guideProgramName { background-color: rgba(212, 135, 93, 0.12); }
.guideVerticalScroller { padding: 0; }

.layout-mobile .guideChannelImage {
    background-position: center;
    width: calc(100% - var(--sidePadding));
    right: 0;
}

.guide-channelHeaderCell {
    background-color: rgba(212, 135, 93, 0.1);
    margin: 0.35em 0.7em 0.7em 0.7em;
    width: auto;
    height: calc(4.42em - 0.7em);
    border-radius: var(--smallRadius);
}

.guideChannelNumber { font-size: 1em; }
#guideTab { padding-top: 3em !important; }
.guide-channelHeaderCell:focus { background-color: var(--highlightOutlineColor) !important; }
.programCell:focus { background-color: transparent !important; }
.programCell:focus > .guideProgramName { background-color: var(--highlightOutlineColor); }

.emby-select-iconbutton {
    background-color: var(--selectorBackgroundColor);
    border: var(--defaultLighterBorder);
    border-radius: var(--smallRadius);
    margin-inline-start: 1em;
}

.subtitleappearance-preview { border-radius: var(--smallRadius); }

.infoBanner {
    display: flex; place-content: center;
    background-color: var(--headerColor) !important;
    border-radius: var(--largeRadius) !important;
    border: var(--defaultBorder) !important;
}

.sliderBubbleText { font-size: 1.5em; }
fieldset { border-radius: var(--smallRadius); border: var(--defaultBorder); }

table:not(.MuiTable-root.MuiTable-stickyHeader) {
    border-color: var(--borderColor) !important;
    border-radius: var(--smallRadius);
    border-spacing: 1px;
    border: var(--defaultBorder);
    background: var(--tableBodyColor);
    border-collapse: separate;
    overflow: hidden;
}

.detailTableHeaderCell { vertical-align: middle; }

#serverActivityPage .MuiPaper-elevation2 { border: var(--defaultBorder) !important; box-shadow: unset !important; }

#serverActivityPage .MuiPaper-elevation2,
#serverActivityPage .MuiPaper-elevation2 > .MuiBox-root,
#serverActivityPage .MuiTableRow-root.MuiTableRow-head { background-color: var(--tableBodyColor); }

.detailTableBodyRow-shaded:nth-child(odd),
#serverActivityPage .MuiTableBody-root .MuiTableRow-root:nth-child(odd) {
    background: var(--darkerGradientPointAlpha) !important;
}

.detailTableBodyRow-shaded:nth-child(even),
#serverActivityPage .MuiTableBody-root .MuiTableRow-root:nth-child(even) {
    background: var(--lighterGradientPointAlpha) !important;
}

.MuiList-root.MuiMenu-list { background-color: var(--drawerColor); }

ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child { gap: 0.5rem; }

/* Solid player stats — no blur */
.playerStats, .iconOsd {
    border-radius: var(--largeRadius);
    background-color: rgba(26, 22, 20, 0.92);
    backdrop-filter: none;
}

.playerStats-stats { max-height: 50vh; flex-wrap: wrap; overflow-x: auto; padding: 1em !important; }

#scenesContent .cardScalable:active { border-color: var(--dimTextColor) !important; }
.progressring-spiner { border-color: var(--uiAccentColor); }

.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.semiTransparent.noHeaderRight {
    display: none;
}

/* Login page — solid card, no blur */
#loginPage {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; padding: 1em; overflow-y: auto;
    background: #1a1614 var(--loginPageBgUrl);
    background-size: cover; background-position: center;
    background-repeat: no-repeat; box-sizing: border-box;
}

#loginPage .padded-left.padded-right.padded-bottom-page {
    width: 28em;
    background: #1a1614;
    padding: 2em 2em 1em 2em !important;
    border-radius: var(--largerRadius);
    backdrop-filter: none;
    box-sizing: border-box;
    transform: translateY(3em);
    border: var(--defaultBorder);
}

.manualLoginForm .sectionTitle,
.visualLoginForm > h1 { display: none; }

#loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm:not(.hide)) { width: 40em; }

#divUsers .squareCard { width: 30% !important; }
.layout-mobile #divUsers .squareCard { width: 45% !important; }

.manualLoginForm::before,
.visualLoginForm::before {
    content: var(--loginPageText);
    position: relative; display: block;
    top: -3.5em; margin-bottom: -1em;
    font-size: 1.875em; font-weight: 800;
    color: #d4875d; text-align: center;
}

.manualLoginForm, .visualLoginForm { position: relative; }

#quickConnectPreferencesPage .padded-left.padded-right.padded-bottom-page {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

#txtLoginDisclaimer { resize: none; }

.startTimeText, .endTimeText, .positionTime, .runtime { width: 4.5em; box-sizing: border-box; }
.startTimeText { margin: 0 !important; }
.endTimeText { justify-content: right; padding-inline-end: 0.8em; margin: 0 0 0 0.75em !important; }
.startTimeText, .endTimeText { padding-top: 0.25em; }
.startTimeText, .positionTime { text-align: start; justify-content: left; }
.endTimeText, .runtime { text-align: end; justify-content: right; }

.filterIndicator { background: var(--activeColor); }

.overflowBackdropCard[data-type="CollectionFolder"] .cardPadder-overflowBackdrop,
.overflowBackdropCard[data-type="UserView"] .cardPadder-overflowBackdrop { padding-bottom: 50%; }

.overflowBackdropCard[data-type="CollectionFolder"] .cardText-first,
.overflowBackdropCard[data-type="UserView"] .cardText-first { display: var(--libraryLabelVisibility); }

.nowPlayingButtonsContainer { margin-top: 1em; }

.nowPlayingPageImageContainerNoAlbum {
    border: var(--defaultBorder);
    border-radius: var(--smallRadius);
    overflow: hidden;
}

.nowPlayingPageImageContainerNoAlbum .defaultCardBackground {
    background: #0f0d0c;
}

.nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon { color: var(--borderColor); }

/* Solid playlist — no blur */
.layout-mobile .playlistSection .playlist {
    padding: 4.3em 0; top: 0; bottom: 4.3em;
    background: var(--headerColor);
    backdrop-filter: none;
    z-index: 0;
}

.layout-mobile .playlistSectionButton {
    background: var(--drawerColor);
    border-top: var(--defaultBorder);
    backdrop-filter: none;
    z-index: 1;
}

.layout-mobile .playlistSectionButton.playlistSectionButtonTransparent {
    background: transparent;
    border-top: var(--defaultBorder);
    border-color: transparent;
}

/* Solid now playing info — no blur */
.layout-desktop .nowPlayingInfoContainer {
    position: -webkit-sticky; position: sticky;
    top: 5em; padding: 1em; margin-bottom: 2em;
    backdrop-filter: none;
    border: var(--defaultLighterBorder);
    z-index: 2;
    background-color: var(--headerColor);
    box-shadow: var(--shadow);
    border-radius: var(--largerRadius);
    box-sizing: border-box;
}

.layout-desktop .nowPlayingInfoControls { margin: 0em 2em; }

.nowPlayingPageImage {
    box-shadow: var(--shadow);
    border-radius: var(--smallRadius);
    object-fit: cover; aspect-ratio: 1 / 1;
}

.nowPlayingBar .playPauseButton { font-size: 2em; }
.nowPlayingInfoContainer .btnPlayPause { font-size: 3em; }

.nowPlayingBar .nowPlayingImage {
    background-size: cover;
    border-radius: var(--smallerRadius);
    height: 3.5em; margin: 0.25em; width: 3.5em;
}

.nowPlayingBarPositionContainer { top: -0.7em; }

@media (orientation: portrait) and (max-width: 43em) {
    .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon { font-size: 8em !important; }
    .nowPlayingInfoContainer { height: calc(95% - 4.2em); }
}

.nowPlayingSongName.nowPlayingEpisode { margin-bottom: 1em; font-size: 1.25em; color: var(--textColor); }
.nowPlayingAlbum.nowPlayingSeason { color: var(--dimTextColor); margin-bottom: 0.5em; }
.nowPlayingArtist.nowPlayingSerie { margin-bottom: 0.5em; }

.playlistIndexIndicatorImage {
    background-blend-mode: difference;
    background-color: var(--textColor);
    background-size: contain !important;
}

.playlistIndexIndicatorImage.defaultCardBackground .audiotrack { display: none; }

#dialogToc { background-color: rgba(26, 22, 20, 0.9); max-height: unset; max-width: unset; }

#dialogToc .toc li {
    font-size: unset; font-weight: 600;
    list-style-type: circle; margin-bottom: 0.5em;
    font-family: "Math", serif;
}

.MuiTabs-indicator { display: none; }
.MuiTabs-root > .MuiTabs-scroller { align-content: center; }

.MuiTabs-flexContainer > .MuiButtonBase-root {
    border-radius: var(--largeRadius);
    min-height: 40px; min-width: 72px;
}

.MuiTabs-flexContainer > .MuiButtonBase-root.Mui-selected {
    color: var(--textColor);
    background-color: transparent !important;
}

.MuiToggleButtonGroup-grouped.Mui-selected { color: var(--textColor); }

.MuiButtonBase-root.MuiIconButton-root:hover {
    color: var(--textColor);
    background-color: transparent;
}

#viewPanel .ui-panel-inner { margin-top: 4em; }

.videoOsdBottom.videoOsdBottom-maincontrols { background: var(--bottomOSDGradient); }
.skinHeader-withBackground.osdHeader { background: var(--topOSDGradient); }
.headroom { transition: transform 0.5s; }

/* Solid header — no blur */
.skinHeader-blurred:not(.osdHeader):not(.semiTransparent) {
    backdrop-filter: none;
    background: var(--headerColor);
    border: var(--defaultBorder);
    border-width: 0 0 var(--borderWidth) 0;
}

.layout-mobile .skinHeader-blurred:not(.osdHeader),
.layout-mobile .withSectionTabs .headerTop { padding: 0; }

.sectionTabs { display: inline-grid; height: var(--appBarHeight); }
.layout-mobile .sectionTabs { align-content: center; }

.skinHeader-withBackground.semiTransparent {
    --headerBackground: none;
    backdrop-filter: none;
    background-color: transparent;
    border: none;
}

.skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty)::after,
.skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) {
    --headerBackground: none;
    backdrop-filter: none;
    background-color: transparent;
    border: none;
}

.skinHeader-withBackground.semiTransparent .headerButton,
.skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) .headerButton {
    text-shadow: 1px 1px 0 #00000080;
}

.headerTop {
    -webkit-align-items: center; align-items: center;
    padding: 0; height: var(--appBarHeight);
}

.osdHeader .headerTop { max-height: var(--appBarHeight); }
.layout-desktop .headerTop { padding: 0 1em; }
.layout-tv .headerTop { padding: 0 0.5em; }

.headroom--unpinned {
    -webkit-transform: translateY(calc(-1 * var(--appBarHeight) - var(--borderWidth)));
    transform: translateY(calc(-1 * var(--appBarHeight) - var(--borderWidth)));
}

.noHomeButtonHeader .emby-tab-button[data-index="1"]:before { content: "favorite"; }
.noHomeButtonHeader .emby-tab-button[data-index="0"]:before { content: "home"; }

.noHomeButtonHeader .emby-tab-button:before {
    font-family: var(--iconPack), Material Icons;
    font-feature-settings: "liga";
    font-size: 1.2em;
    font-variation-settings: "FILL" 0;
}

.layout-tv .sectionTabs .emby-tabs.smoothScrollX { overflow: visible !important; }

.sectionTabs .emby-tab-button {
    display: inline-flex;
    margin: 0.25em 0.5em; padding: 0 1.25em; height: 2.5em;
    color: var(--textColor); font-weight: 400;
    border-radius: var(--largeRadius);
    background-color: var(--darkerGradientPointAlpha);
}

.sectionTabs .emby-tab-button-active {
    margin: 0.25em 0.5em;
    color: #231e1c;
    background-color: var(--textColor);
}

.libraryPage:not(.noSecondaryNavPage) {
    padding-top: calc(var(--appBarHeight) * 2 + 0.5em) !important;
}

@media (min-width: 75em) {
    .sectionTabs {
        -webkit-align-items: center; align-items: center;
        -webkit-align-self: center; align-self: center;
        -webkit-justify-content: center; justify-content: center;
        margin-top: calc(-1 * var(--appBarHeight));
        position: relative; width: auto;
    }
    .libraryPage:not(.noSecondaryNavPage) {
        padding-top: calc(var(--appBarHeight) + 0.5em) !important;
    }
    .headroom--unpinned { -webkit-transform: translateY(0); transform: translateY(0); }
}

@media (min-width: 100em) {
    .layout-tv .libraryPage:not(.noSecondaryNavPage) {
        padding-top: calc(var(--appBarHeight) + 0.5em) !important;
    }
}

@media (max-width: 100em) {
    .sectionTabs { font-size: 100%; }
    .layout-tv .sectionTabs { margin-top: unset; }
    .layout-tv .libraryPage:not(.noSecondaryNavPage) {
        padding-top: calc(var(--appBarHeight) * 2 + 0.5em) !important;
    }
}

@media (max-width: 75em) {
    .layout-mobile .sectionTabs .emby-tab-button:first-child { margin-left: var(--sidePadding); }
    .layout-mobile .sectionTabs .emby-tab-button:last-child  { margin-right: var(--sidePadding); }
}

.layout-tv .headerLeft { overflow: unset; margin: 0em 0.6em; }

#reactRoot > div:nth-child(3) {
    container-name: skinHeader;
    container-type: size;
    height: var(--appBarHeight);
    max-height: var(--appBarHeight);
}

@container skinHeader (min-height: 4.9em) {
    .skinHeader-blurred:not(.osdHeader):not(.semiTransparent) {
        backdrop-filter: none;
        background-color: transparent;
        border: none;
        background: var(--headerBackground);
        padding: 0;
    }

    /* Blur layer disabled — headerBlurLayerVisibility is set to none */
    .skinHeader-blurred:not(.osdHeader):not(.semiTransparent)::after {
        content: var(--headerBlurLayerVisibility);
        position: absolute; top: 0; bottom: 0; left: 0; right: 0;
        backdrop-filter: none;
        -webkit-mask: var(--headerBlurMask);
        mask: var(--headerBlurMask);
        z-index: -1;
    }

    .sectionTabs { padding-bottom: 1.5em; }
    .layout-mobile .sectionTabs { align-content: center; }
}

.skinHeader {
    padding-top: max(env(safe-area-inset-top), var(--safe-area-inset-top)) !important;
}

.nowPlayingPage {
    background: #1a1614;
}

.remoteControlContent {
    padding: 0 var(--sidePadding) !important;
    background: #1a1614;
}

/* TV performance tweaks */
.layout-tv .show-focus:focus,
.layout-tv .show-animation:focus,
.emby-select-focusscale:focus { transform: none !important; }

.layout-tv .focuscontainer,
.layout-tv .backdropImage { animation-duration: 0s !important; backdrop-filter: none; }

.card.show-animation .cardBox {
    transition: transform 0.05s ease-out, -webkit-transform 0.05s ease-out;
}

/* Media Bar Plugin - basic styling */
#slides-container { top: calc(-0.5 * var(--appBarHeight)); }

.backdrop-overlay {
    background: rgba(26, 22, 20, 0.75);
}

.plot {
    color: var(--textColor);
    text-shadow: 1px 1px var(--lighterGradientPointAlpha);
}

.button-container { align-items: center; }

.favorite-button { background: none; color: var(--textColor); }

.detail-button:hover,
.favorite-button:hover { background: var(--dimTextColor); color: #231e1c; }