Spaces:

Jishnupg
/

FileToLink

Running

Hermes Agent
feat: modern streaming upgrades - 16:9 landscape continue watching rails, hide my media row, frosted glass catalog toolbar
23463b4 7 days ago
Raw History Blame Contribute Delete
166 kB
/* Robust AlphaPicker complete suppression to eliminate React DOM reconciliation crashes */
.alphaPicker,
.alphaPicker-fixed,
.alphaPicker-fixed-right,
.alphanumeric-scrollbar,
#alpha-scrubber-hud,
div[class*="alphaPicker"],
div[class*="alphanumeric"],
div[class*="alpha-picker"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    overflow: hidden !important;
}

/* 1. IMPORTS & FONTS
   - Override this to customise font of abyss for your setup. */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(https://cdn.jsdelivr.net/npm/material-icons@1.13.12/iconfont/material-icons-round.woff2) format('woff2');
}

/* Force rendering on icon elements across the theme */
.material-icons-round,
.material-symbols-rounded,
[class*="material-icons"] {
    font-family: 'Material Icons Round' !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;

    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 2. THEME VARIABLES
   — Override these to customise abyss for your setup. */

:root {
    /* Primary accent colour — used for highlights, active states, progress bars.
       Format: R, G, B (no rgb() wrapper) so opacity variants work cleanly. */
    --abyss-accent: 245, 245, 247;
    /* Space-separated twin used by Jellyfin 12's MUI channel variables. */
    --abyss-accent-channel: 245 245 247;

    /* Corner rounding applied globally */
    --abyss-radius: 12px;

    /* Fixed defaults */

    /* Backgorund for drawers and dialogs */
    --abyss-glass-tint: 42, 42, 42;

    /* Custom cubic-bezier */
    --abyss-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --abyss-ease-snappy: cubic-bezier(0.4, 0.0, 0.2, 1);

    /* Rendering controls used by the optional Lite override */
    --abyss-backdrop-blur: 23px;
    --abyss-glass-blur: 15px;
}

/* Jellyfin 12 exposes the built-in theme palette as CSS variables. Keep the
   MUI and legacy surfaces on the same Abyss palette without relying on
   generated Emotion class names. */
html[data-theme="dark"] {
    --jf-palette-primary-main: rgb(var(--abyss-accent));
    --jf-palette-primary-mainChannel: var(--abyss-accent-channel);
    --jf-palette-primary-contrastText: #121212;
    --jf-palette-secondary-main: rgb(var(--abyss-accent));
    --jf-palette-secondary-mainChannel: var(--abyss-accent-channel);
    --jf-palette-secondary-contrastText: #121212;
    --jf-palette-AppBar-defaultBg: rgba(var(--abyss-glass-tint), 0.92);
    --jf-palette-AppBar-transparentBg: rgba(var(--abyss-glass-tint), 0.72);
    --jf-card-borderRadius: var(--abyss-radius);
    --jf-palette-error-main: #f92672;
    --jf-palette-error-light: rgb(249, 38, 114);
    --jf-palette-error-dark: rgb(172, 26, 78);
}


/* 3. BASE / GLOBAL */

#reactRoot {
    scrollbar-gutter: stable;
}

body {
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "GRAD" 0;
    overscroll-behavior: none;
}

.material-icons {
    font-family: 'Material Icons Round' !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;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

:root {
    scrollbar-color: rgba(var(--abyss-accent), 0.8) #0000 !important;
}

::-webkit-scrollbar-track-piece {
    background-color: #0000;
}

::-webkit-scrollbar-corner {
    background-color: #0000;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--abyss-accent), 0.8) !important;
    border-radius: var(--abyss-radius);
}

fieldset {
    border: 1px solid rgba(40, 40, 40, 0.8);
    border-radius: 0.4em;
}

progress {
    border-radius: var(--abyss-radius);
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(var(--abyss-accent), 0.22);
}

progress::-webkit-progress-bar {
    border-radius: var(--abyss-radius);
    background: rgba(0, 0, 0, 0.5) !important;
    border: 0px solid rgba(var(--abyss-accent), 0.22);
}

progress::-moz-progress-bar {
    border-radius: var(--abyss-radius);
    background-color: rgba(var(--abyss-accent), 0.75);
}

progress::-webkit-progress-value {
    border-radius: var(--abyss-radius);
    background-color: rgba(var(--abyss-accent), 0.75);
}

.taskProgressOuter,
.taskProgressInner {
    border-radius: var(--abyss-radius) !important;
}

.taskProgressOuter {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(var(--abyss-accent), 0.22);
}

.taskProgressInner,
#videoOsdPage .sliderMarker.watched {
    background: rgba(var(--abyss-accent), 1) !important;
}

#videoOsdPage .sliderMarker.unwatched {
    background: hsl(0deg 0% 30%) !important;
}

.mdl-slider-background-flex {
    background: hsl(0deg 0% 30%) !important;
}

#divRunningTasks span {
    color: rgba(var(--abyss-accent), 0.75) !important;
}

#scheduledTasksPage span {
    color: rgba(var(--abyss-accent), 0.75) !important;
}

/* Override browser default blue focus/selection colour */
::selection {
    background: rgba(var(--abyss-accent), 0.25);
    color: rgb(var(--abyss-accent));
}

::-moz-selection {
    background: rgba(var(--abyss-accent), 0.25);
    color: rgb(var(--abyss-accent));
}

:focus-visible {
    outline-color: rgba(var(--abyss-accent), 0.6) !important;
}

input:focus,
textarea:focus,
select:focus,
.emby-input:focus,
.emby-textarea:focus,
.emby-select:focus,
.emby-select-withcolor:focus,
.checkboxOutline:focus {
    border-color: rgba(var(--abyss-accent), 0.4) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: rgb(var(--abyss-accent));
}

/* Override Chromium/Electron blue accent globally */
:root {
    accent-color: rgb(var(--abyss-accent));
}

/* 4. TYPOGRAPHY - Native Header Tabs Fully Suppressed in Favor of Apex TV Topbar */

.headerTabs,
.headerTabs.sectionTabs,
.emby-tabs,
.emby-tabs-slider,
.sectionTabs {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pageTitle {
    margin-top: auto;
    margin-bottom: auto;
    font-size: x-large;
    opacity: 0.8;
    font-weight: 500;
    border-radius: 12px;
}

.pageTitle:not(:empty) {
    padding: 0 12px;
}

.pageTitle.pageTitleWithLogo.pageTitleWithDefaultLogo {
    display: none !important;
}


#tvRecommendedPage .pageTitle,
#moviesPage .pageTitle,
#musicRecommendedPage .pageTitle,
#itemDetailPage .pageTitle {
    display: none !important;
}

#videoOsdPage .pageTitle {
    display: flex !important;
}

.settingsContainer .MuiTypography-h2,
.sectionTitle {
    font-weight: 600;
}

.settingsContainer .MuiTypography-h2,
.homeScreenSettingsContainer .sectionTitle,
#quickConnectPreferencesPage .sectionTitle,
.settingsContainer .sectionTitle {
    font-size: xx-large;
}

.settingsContainer .MuiTypography-h2 {
    margin-block-start: 0.83em;
}

.settingsContainer .MuiInputBase-root.MuiFilledInput-underline::after,
.settingsContainer .MuiInputBase-root.MuiFilledInput-underline::before {
    border-bottom: none !important;
}

#favoritesTab .sectionTitle,
.homeSectionsContainer .sectionTitle {
    margin-left: .4em !important;
    margin-top: .2em !important;
    margin-bottom: .2em !important;
}

.sectionTitleTextButton>.material-icons {
    margin: 0;
}

.sectionTitleTextButton:not(.padded-left) {
    padding: 4px 12px 6px 6px !important;
    margin-left: -6px !important;
    border-radius: var(--abyss-radius);
}

.sectionTitleTextButton>.sectionTitle {
    margin-right: 16px;
}

.inputLabel,
.selectLabel,
.checkboxLabel {
    font-weight: 500;
}

.cardText {
    padding: .06em .5em 0 .06em;
    font-weight: 200;
    font-size: medium;
    opacity: 0.8;
}

.cardText-first {
    margin-top: 4px !important;
    font-weight: 600;
    font-size: larger !important;
    opacity: 1 !important;
}

.cardTextCentered,
.cardTextCentered>.textActionButton {
    text-align: left !important;
}

.itemName {
    margin: .5em 0 !important;
}

.starIcon {
    color: rgba(var(--abyss-accent), .8);
}

.dialog {
    font-weight: 500;
}

.formDialogHeaderTitle {
    font-weight: bold !important;
    margin-left: 0 !important;
}

#dialogToc {
    overflow: clip;
    display: flex;
    flex-direction: column;
}

#dialogToc .toc {
    overflow-y: scroll;
}

#dialogToc .toc li {
    margin-bottom: 12px;
}


/* 5. LAYOUT & STRUCTURE */

/* Header */
.headerTop {
    padding: 2em 0 !important;
}

.skinHeader {
    background-color: transparent;
    display: flex !important;
    justify-items: center !important;
    align-self: center !important;
    justify-content: center !important;
}

.skinHeader.semiTransparent {
    background-color: transparent;
}

.skinHeader-withBackground::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
    pointer-events: none;
    background: none;
    z-index: 1;
}

.headerLeft,
.headerRight {
    padding: 0 31px;
    align-items: center;
}

.headerUserButtonRound {
    border-radius: 50px !important;
}

/* Jellyfin 12 modern app shell (React / MUI) [BETA] */

/* Completely remove alphabet-based search and quick scroller */
.alphaPicker,
.alphaPicker-fixed,
.alphaPicker-fixed-right,
.alphanumeric-scrollbar,
.alphaPickerInner,
.alphaPickerButton,
.alphaPickerRow,
div[class*="alphaPicker"],
div[class*="alphanumeric"],
div[class*="alpha-picker"],
#alpha-scrubber-hud {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.alphaPicker .alphaPickerInner,
.alphaPicker-fixed-right .alphaPickerInner,
.alphaPicker-fixed-right .MuiPaper-root,
div[class*="alphaPicker"] .MuiPaper-root,
div[class*="alphaPickerInner"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Exclude # symbol completely - alphabets only */
.alphaPickerButton[data-value="#"],
.alphaPickerButton[data-letter="#"],
.alphaPickerButton[data-item="#"],
.alphaPickerRow[data-prefix="#"],
.alphaPickerRow[data-item="#"],
.hide-hash {
    display: none !important;
}

.alphaPickerButton,
.alphaPickerRow,
.alphaPicker-fixed-right .MuiButtonBase-root,
.alphaPicker-fixed-right .MuiPaper-root .MuiButtonBase-root,
div[class*="alphaPicker"] button,
div[class*="alphaPickerButton"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: rgba(255, 255, 255, 0.42) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 18px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    transform: none !important;
    transition: color 0.12s ease !important;
    touch-action: none !important;
    cursor: pointer !important;
}

/* Scrolling/Hover: NO shapes, NO box, NO scaling - change letter color only */
.alphaPickerButton:hover,
.alphaPickerButton:focus,
.alphaPickerButton:active,
.alphaPickerButton.active-scrub,
.alphaPickerButton.selectedItem,
.alphaPickerButton-selected,
.alphaPicker-fixed-right .MuiButtonBase-root:hover,
.alphaPicker-fixed-right .MuiButtonBase-root.Mui-selected {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 1px 2px #000000 !important;
}

#alpha-scrubber-hud {
    display: none !important;
}

.MuiTouchRipple-root {
    color: rgb(var(--abyss-accent));
}

header.MuiAppBar-root>.MuiToolbar-root {
    position: relative;
}

/* Disabled conflicting absolute toolbar centering */
/* header.MuiAppBar-root > .MuiToolbar-root > .MuiStack-root:first-of-type neutralized */

html[data-theme="dark"] header.MuiAppBar-root>.MuiToolbar-root:nth-of-type(2) .MuiButtonBase-root {
    -webkit-backdrop-filter: blur(var(--abyss-glass-blur));
    backdrop-filter: blur(var(--abyss-glass-blur));
}

header.MuiAppBar-root>.MuiToolbar-root>.MuiBox-root:last-child {
    order: initial;
    margin-right: initial;
}

header.MuiAppBar-root>.MuiToolbar-root>.MuiStack-root:last-child {
    overflow: scroll;
    scrollbar-width: none;
}


/*Filter button Group buttons*/
header.MuiAppBar-root>.MuiToolbar-root>.MuiStack-root:last-child .MuiButtonGroup-root:nth-last-child(2) .MuiButtonBase-root {
    border-radius: 12px !important;
    padding: 0.56rem !important;
}

/*Counter Chip*/
header.MuiAppBar-root>.MuiToolbar-root:nth-child(2)>.MuiBox-root>.MuiChip-root {
    font-family: "Google Sans", sans-serif !important;
    font-size: medium;
    font-weight: 500;
    padding: 0.75rem 0;
    height: auto;
    background-color: transparent !important;
    color: rgba(var(--abyss-accent), 0.78);
    border-radius: var(--abyss-radius) !important;
    margin: 0;
    transition: background-color 0.25s var(--abyss-ease), color 0.25s var(--abyss-ease), transform 0.25s var(--abyss-ease);
    -webkit-backdrop-filter: blur(var(--abyss-glass-blur));
    backdrop-filter: blur(var(--abyss-glass-blur));
}


/* Disabled conflicting order -1 rule on header right */
/* header.MuiAppBar-root > .MuiToolbar-root > .MuiBox-root:last-child neutralized */

body:has(#videoOsdPage:not(.hide)) header.MuiAppBar-root>.MuiToolbar-root>.MuiBox-root:last-child {
    order: initial;
    margin-right: initial;
}

html[data-theme="dark"] .MuiBox-root .tabContent.pageTabContent.is-active.abyss-spotlight-active .featurediframe.focusable {
    margin-top: 0 !important;
}

html[data-theme="dark"] header.MuiAppBar-root {
    color: rgb(var(--abyss-accent));
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    --Paper-shadow: none;
    --Paper-overlay: none;
}

html[data-theme="dark"] header.MuiAppBar-root {
    background: transparent !important;
    overflow: visible;
}

html[data-theme="dark"] .MuiButton-icon img[src*="icon-transparent"] {
    max-height: 0.85em !important;
    max-width: 0.85em !important;
    opacity: 0.85;
    filter: brightness(0) invert(1);
}


html[data-theme="dark"] header.MuiAppBar-root:has(> .MuiToolbar-root + .MuiToolbar-root)::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 10rem;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0) 100%);
    -webkit-backdrop-filter: blur(var(--abyss-glass-blur));
    backdrop-filter: blur(var(--abyss-glass-blur));
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
}

html[data-theme="dark"] header.MuiAppBar-root.MuiAppBar-positionFixed {
    border: none;
    --Paper-shadow: none !important;
}

html[data-theme="dark"] header.MuiAppBar-root .MuiStack-root:first-of-type {
    border-radius: 50px;
    padding: 4px;
    overflow: auto;
    scrollbar-width: none;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(87, 87, 87, 0);
    -webkit-backdrop-filter: blur(var(--abyss-glass-blur)) !important;
    backdrop-filter: blur(var(--abyss-glass-blur)) !important;
    background-color: transparent;
    transition: all 0.45s var(--abyss-ease)
}

html[data-theme="dark"] header.MuiAppBar-root.MuiPaper-elevation1 .MuiStack-root:first-of-type {
    border: 1px solid rgba(87, 87, 87, 0.18);
    background-color: rgba(var(--abyss-glass-tint), 0.69) !important;
    transition: all 0.45s var(--abyss-ease)
}

html[data-theme="dark"] header.MuiAppBar-root .MuiToolbar-root:first-of-type .MuiButtonBase-root {
    border-radius: 50px;
}

html[data-theme="dark"] header.MuiAppBar-root .MuiButtonBase-root.MuiIconButton-root {
    border-radius: var(--abyss-radius) !important;
    background: transparent !important;
    -webkit-backdrop-filter: blur(var(--abyss-glass-blur)) !important;
    backdrop-filter: blur(var(--abyss-glass-blur)) !important;
}

html[data-theme="dark"] header.MuiAppBar-root .MuiButtonBase-root.MuiIconButton-root:has(.MuiAvatar-root) {
    border-radius: 50px !important;
    padding: 0 !important;
    margin-left: 0.48rem
}

html[data-theme="dark"] header.MuiAppBar-root>.MuiToolbar-root:not(:has(> .MuiStack-root:first-of-type))>.MuiButtonBase-root:first-child {
    margin: 0 8px !important;
}

html[data-theme="dark"] header.MuiAppBar-root .MuiBox-root {
    gap: 0.48rem;
}


html[data-theme="dark"] .MuiToolbar-root {
    min-height: 64px;
}

html[data-theme="dark"] .MuiTypography-root {
    font-family: "Google Sans", sans-serif !important;
}

html[data-theme="dark"] .MuiToolbar-root .MuiButton-root,
html[data-theme="dark"] .MuiToolbar-root .MuiIconButton-root {
    color: rgba(var(--abyss-accent), 0.78);
    border-radius: var(--abyss-radius);
    transition: background-color 0.25s var(--abyss-ease),
        color 0.25s var(--abyss-ease),
        transform 0.25s var(--abyss-ease);
}

html[data-theme="dark"] .MuiToolbar-root .MuiButton-root {
    min-width: auto;
    padding: 0.56rem 1rem;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
}

html[data-theme="dark"] .MuiToolbar-root .MuiIconButton-root {
    padding: 0.6rem;
}

html[data-theme="dark"] .MuiToolbar-root .MuiButtonGroup-root {
    border-radius: 50px;
    gap: 0.1rem;
    box-shadow: none;
}

.MuiToolbar-root .MuiButtonGroup-root .MuiButtonBase-root {
    border: none;
}

.MuiButtonGroup-root .MuiButtonGroup-firstButton {
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
}

.MuiButtonGroup-root .MuiButtonGroup-lastButton {
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
}

html[data-theme="dark"] .MuiToolbar-root .MuiButton-root:hover,
html[data-theme="dark"] .MuiToolbar-root .MuiIconButton-root:hover {
    color: rgb(var(--abyss-accent));
    background-color: rgba(var(--abyss-accent), 0.12);
}

html[data-theme="dark"] .MuiToolbar-root .MuiButton-root.MuiButton-colorPrimary {
    color: #121212;
    background-color: rgb(var(--abyss-accent));
}

html[data-theme="dark"] .MuiToolbar-root .MuiButton-root.MuiButton-colorPrimary:hover {
    color: #121212;
    background-color: rgba(var(--abyss-accent), 0.88);
}

html[data-theme="dark"] .MuiDrawer-paper,
html[data-theme="dark"] .MuiMenu-paper,
html[data-theme="dark"] .MuiDialog-paper {
    color: rgb(var(--abyss-accent));
    background-color: rgba(var(--abyss-glass-tint), 0.72);
    background-image: none;
    border: 1px solid rgba(var(--abyss-accent), 0.16);
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.32);
    -webkit-backdrop-filter: blur(var(--abyss-glass-blur));
    backdrop-filter: blur(var(--abyss-glass-blur));
}



html[data-theme="dark"] .MuiDrawer-paper .MuiDivider-root {
    display: none;
}

html[data-theme="dark"] .MuiDrawer-paper .MuiListItemIcon-root {
    background: #cccccf69;
    border-radius: 50px;
    padding: 10px;
    min-width: auto;
    margin-right: 0.75em;
}

html[data-theme="dark"] .MuiDrawer-paper .MuiListItemIcon-root img[src*="icon-transparent"] {
    max-height: 24px !important;
    max-width: 24px !important;
    opacity: 0.85;
    filter: brightness(0) invert(1);
}

html[data-theme="dark"] .MuiDrawer-paper .MuiListItemButton-root:hover .MuiListItemIcon-root img[src*="icon-transparent"],
html[data-theme="dark"] .MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemIcon-root img[src*="icon-transparent"] {
    filter: brightness(0) invert(0);
}

html[data-theme="dark"] .MuiDrawer-paper .MuiListItemText-root .MuiTypography-root {
    font-weight: 500;
    font-size: large;
}

html[data-theme="dark"] .MuiListItemButton-root:hover .MuiListItemText-root .MuiTypography-root,
html[data-theme="dark"] .MuiListItemButton-root.Mui-selected .MuiListItemText-root .MuiTypography-root {
    font-weight: 700;
    color: #121212;
}

html[data-theme="dark"] .MuiDrawer-paper .MuiListSubheader-root {
    margin: 0.9em 0 0.2em;
    letter-spacing: 0.02em;
    opacity: 0.5;
    font-weight: 600;
    font-size: medium;
}

html[data-theme="dark"] .MuiMenu-paper {
    border-radius: 24px;
    padding: 0 8px;
}

html[data-theme="dark"] .MuiMenu-paper .MuiButtonBase-root {
    border-radius: 16px;
    padding: 12px 16px;
}

html[data-theme="dark"] .MuiDialog-paper {
    border-radius: var(--abyss-radius);
}

html[data-theme="dark"] .MuiListItemButton-root {
    margin: 2px 8px;
    padding: 0.5em 0.9em !important;
    margin-bottom: 2px !important;
    border-radius: 12px !important;
    transition: background-color 0.25s var(--abyss-ease),
        color 0.25s var(--abyss-ease);
}

html[data-theme="dark"] .MuiListItemButton-root:hover,
html[data-theme="dark"] .MuiMenu-paper .MuiButtonBase-root:hover {
    background: rgb(var(--abyss-accent)) !important;
    color: #121212;
}

html[data-theme="dark"] .MuiListItemButton-root:hover .MuiSvgIcon-root,
html[data-theme="dark"] .MuiListItemButton-root.Mui-selected .MuiSvgIcon-root,
html[data-theme="dark"] .MuiMenu-paper .MuiButtonBase-root:hover .MuiSvgIcon-root,
html[data-theme="dark"] .MuiMenu-paper .MuiButtonBase-root:hover .MuiSvgIcon-root {
    color: #121212 !important;
}

html[data-theme="dark"] .MuiListItemButton-root.Mui-selected,
html[data-theme="dark"] .MuiListItemButton-root.Mui-selected:hover {
    color: #121212;
    background-color: rgb(var(--abyss-accent));
}

html[data-theme="dark"] .MuiFilledInput-root,
html[data-theme="dark"] .MuiOutlinedInput-root {
    border-radius: var(--abyss-radius);
    background-color: rgba(255, 255, 255, 0.08);
}

/* Let the Modern app bar float over Spotlight instead of reserving an opaque
   strip above it. The loader owns this state so other routes keep their
   normal app-bar spacing. */
html.abyss-spotlight-visible[data-theme="dark"] .MuiAppBar-root.MuiAppBar-colorTransparent:has(+div[aria-hidden="true"]) {
    background-color: transparent !important;
    background-image: none !important;
    border-bottom-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.abyss-spotlight-visible[data-theme="dark"] .MuiAppBar-root+div[aria-hidden="true"] {
    height: 0 !important;
}

/* Main content */
.backdropImage {
    -webkit-filter: blur(var(--abyss-backdrop-blur)) saturate(120%) contrast(120%) brightness(25%);
    filter: blur(var(--abyss-backdrop-blur)) saturate(120%) contrast(120%) brightness(25%);
}

.hideMainDrawer .backdropImage {
    -webkit-filter: none;
    filter: none;
}

.backdropContainer {
    width: 100vw;
    height: 100vh;
    overflow: visible;
}

.backgroundContainer.withBackdrop {
    background-color: rgba(0, 0, 0, 0);
}





.sidebarHeader {
    margin: 0.9em 0 0.2em;
    letter-spacing: 0.02em;
    opacity: 0.5;
    font-weight: 600;
}

[dir=ltr] .sidebarHeader {
    padding-left: 0.8em;
}

.emby-tabs {
    border-radius: 50px;
}

.emby-tabs-slider {
    border-radius: 50px;
    padding: 5px 2.5px;
    overflow: auto;
    scrollbar-width: none;
    background-color: rgba(var(--abyss-glass-tint), 0.9);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(87, 87, 87, 0.18);
}

/* Engines without scrollbar-width support (Chromium <121, e.g. JMP) */
.emby-tabs-slider::-webkit-scrollbar {
    display: none;
}

.navMenuOptionText {
    margin-top: 0;
    font-weight: 500;
    font-size: large;
}

.navMenuOptionIcon,
.listItemIcon {
    background: #cccccf69;
    border-radius: 50px;
    padding: 10px;
}

[dir=ltr] .navMenuOptionIcon {
    margin-right: 0.75em;
}

[dir=ltr] .listItemIcon {
    background: #cccccf69 !important;
    border-radius: 50px !important;
    padding: 10px !important;
}

[dir=ltr] .navMenuOption {
    padding: 0.5em 0.9em !important;
    margin-bottom: 2px !important;
    border-radius: 12px !important;
}

.scrollContainer {
    padding: 36px 12px 0 12px;
}

/* Footer */
.appfooter {
    background: rgba(0, 0, 0, 0.9);
    margin: 24px;
    border-radius: 24px;
}

/* Backdrop / detail ribbon */
.layout-tv .itemBackdrop,
.layout-desktop .itemBackdrop {
    height: 20vh !important;
    display: inherit;
}

.layout-tv .detailRibbon,
.layout-desktop .detailRibbon {
    background: rgba(0, 0, 0, .2) !important;
    margin-top: 0;
    padding-top: .5em;
    padding-bottom: .5em;
}

.itemBackdrop::after {
    background: rgba(0, 0, 0, .5) !important;
}

#itemDetailPage .detailLogo {
    position: static;
    margin-left: 32.5%;
    display: block;
    filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75));
    -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75));
    flex-shrink: 0;
    background-position: 0 50%;
    margin-bottom: 2vh;
}

/* Infobanner */
.infoBanner {
    background: #101010;
}

/* Blurhash canvas */
.blurhash-canvas {
    -webkit-filter: blur(var(--abyss-backdrop-blur)) saturate(120%) contrast(120%) brightness(25%);
    filter: opacity(60%) saturate(60%);
}

/* Default card backgrounds */
.defaultCardBackground1 {
    background-color: #0a0a0a;
}

.defaultCardBackground2 {
    background-color: #141414;
}

.defaultCardBackground1,
.defaultCardBackground2,
.defaultCardBackground3,
.defaultCardBackground4,
.defaultCardBackground5 {
    background: linear-gradient(135deg, #161622 0%, #0d0d16 60%, #08080d 100%) !important;
    background-color: #0d0d16 !important;
}

/* My Media / Library Channel Cards: Strict Uniform 2:3 Cards on Portrait & Landscape */
.card[data-type="CollectionFolder"],
.card[data-type="UserView"],
[data-category="views"] .card,
.section0 .card,
.apex-library-card {
    width: 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
    flex: 0 0 140px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #181824 0%, #0d0d14 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.card[data-type="CollectionFolder"] .cardPadder,
.card[data-type="UserView"] .cardPadder,
[data-category="views"] .cardPadder,
.section0 .cardPadder,
.apex-library-card .cardPadder {
    padding-bottom: 150% !important;
    aspect-ratio: 2 / 3 !important;
    height: 0 !important;
}

.card[data-type="CollectionFolder"] .cardScalable,
.card[data-type="UserView"] .cardScalable,
[data-category="views"] .cardScalable,
.section0 .cardScalable,
.apex-library-card .cardScalable {
    aspect-ratio: 2 / 3 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

@media (orientation: landscape) {
    .card[data-type="CollectionFolder"],
    .card[data-type="UserView"],
    [data-category="views"] .card,
    .section0 .card,
    .apex-library-card {
        width: 130px !important;
        max-width: 130px !important;
        min-width: 130px !important;
        flex: 0 0 130px !important;
    }
}

.card[data-type="CollectionFolder"] .cardScalable::after,
.apex-library-card .cardScalable::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.1) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.homeSectionsContainer .verticalSection:has([data-type="CollectionFolder"]) .cardText,
.card[data-type="CollectionFolder"] .cardText,
.card[data-type="CollectionFolder"] .cardText-first,
.apex-library-card .cardText,
.apex-library-card .cardText-first {
    display: block !important;
    color: #F5F5F5 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
    position: relative !important;
    z-index: 3 !important;
}

.homeSectionsContainer {
    padding: 0 7px !important;
}

#indexPage:has(.featurediframe) #favoritesTab {
    margin-top: 7.5rem !important;
}



/* Disable theme selectors - managed by Abyss */

.selectContainer:has(#selectTheme),
.selectDashboardThemeContainer {
    cursor: not-allowed !important;
}

/* Lock theme selectors only when dark theme is active */
.selectContainer:has(#selectTheme option[value="dark"]:checked),
.selectContainer:has(#selectDashboardTheme option[value="dark"]:checked) {
    cursor: not-allowed !important;
}

.selectContainer:has(#selectTheme option[value="dark"]:checked) #selectTheme,
.selectContainer:has(#selectDashboardTheme option[value="dark"]:checked) #selectDashboardTheme {
    pointer-events: none !important;
    opacity: 0.4 !important;
}

.selectContainer:has(#selectTheme option[value="dark"]:checked) #selectTheme+.selectArrow,
.selectContainer:has(#selectDashboardTheme option[value="dark"]:checked) #selectDashboardTheme+.selectArrow {
    opacity: 0.4 !important;
}

html[data-theme="dark"] #displayPreferencesPage .MuiFormControl-root:has(input[name="theme"]),
html[data-theme="dark"] #displayPreferencesPage .MuiFormControl-root:has(input[name="dashboardTheme"]) {
    cursor: not-allowed !important;
}

html[data-theme="dark"] #displayPreferencesPage .MuiFormControl-root:has(input[name="theme"]) .MuiInputLabel-root,
html[data-theme="dark"] #displayPreferencesPage .MuiFormControl-root:has(input[name="theme"]) .MuiInputBase-root,
html[data-theme="dark"] #displayPreferencesPage .MuiFormControl-root:has(input[name="dashboardTheme"]) .MuiInputLabel-root,
html[data-theme="dark"] #displayPreferencesPage .MuiFormControl-root:has(input[name="dashboardTheme"]) .MuiInputBase-root {
    opacity: 0.4 !important;
}

html[data-theme="dark"] #displayPreferencesPage .MuiFormControl-root:has(input[name="theme"]) .MuiInputBase-root,
html[data-theme="dark"] #displayPreferencesPage .MuiFormControl-root:has(input[name="dashboardTheme"]) .MuiInputBase-root {
    pointer-events: none !important;
}


/* 6. COMPONENTS */

/* Buttons & Interactive */

.raised,
.fab,
a[data-role="button"] {
    background: rgba(40, 40, 40, 0.8) !important;
    transition: background 0.37s var(--abyss-ease),
        color 0.37s var(--abyss-ease),
        border-color 0.37s var(--abyss-ease),
        box-shadow 0.37s var(--abyss-ease) !important;
}

.raised:hover,
.fab:hover,
a[data-role="button"]:hover {
    background: rgba(var(--abyss-accent), 0.5) !important;
}

.raised:hover,
.fab:hover,
.navMenuOption:hover,
.listItem:hover,
.actionSheetMenuItem:hover {
    background: rgb(var(--abyss-accent)) !important;
    color: #121212;
    font-weight: 700;
}

.listItem-content:hover {
    color: #121212;
}

.actionSheetMenuItem {
    border-radius: var(--abyss-radius) !important;
}

.actionSheetContent {
    padding: .7em .6em !important;
}

.cardContent.cardImageContainer {
    box-shadow: 0 0 3px rgba(200, 200, 200, 0.35) inset;
}

.paper-icon-button-light:hover,
.paper-icon-button-light:hover:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

.paper-icon-button-light {
    border-radius: var(--abyss-radius);
}

.emby-tab-button {
    padding: 0.5em 1.5em;
    margin: 0 2.5px;
    border-radius: 50px;
    border: 3px solid transparent;
}

.emby-tab-button-active {
    background: rgb(var(--abyss-accent)) !important;
    color: #121212 !important;
    border-radius: 50px;
}

.emby-tab-button-active:hover {
    color: #121212 !important;
}

.button-flat:hover {
    background: rgba(0, 0, 0, 0.4);
    color: rgb(var(--abyss-accent)) !important;
}

.detailButton {
    border-radius: var(--abyss-radius);
    max-width: 15vw !important;
}

.button-submit {
    position: sticky;
    bottom: 24px;
    margin-top: 48px !important;
    box-shadow: 0 0 24px 2px rgba(var(--abyss-accent), 0.2);
    z-index: 2;
    color: rgba(245, 245, 247);
}

html[data-theme="dark"] #displayPreferencesPage form button[type="submit"].MuiButton-root {
    position: sticky;
    bottom: 48px;
    width: 97%;
    align-self: center;
    margin-top: 48px !important;
    box-shadow: 0 0 24px 2px rgba(var(--abyss-accent), 0.2);
    z-index: 2;
    min-height: 3.25rem;
    border-radius: var(--abyss-radius);
    color: rgb(var(--abyss-accent)) !important;
    font-weight: 500;
    font-family: "Google Sans", sans-serif;
    border: solid 1px rgba(245, 245, 247, 0.2) !important;
}

html[data-theme="dark"] #displayPreferencesPage form button[type="submit"].MuiButton-root:hover {
    font-weight: 700;
    color: #121212 !important;
    background-color: rgba(var(--abyss-accent), 0.88) !important;
}

/* Active / played / link states */
.paper-icon-button-light:hover,
.raised.homeLibraryButton:hover,
.button-flat:hover,
.playstatebutton-icon-played,
.ratingbutton-icon-withrating,
.paper-icon-button-light:hover:not(:disabled),
.emby-tab-button:hover,
.selectLabelFocused,
.inputLabelFocused,
.textareaLabelFocused,
.buttonActive,
.button-link {
    color: rgb(var(--abyss-accent));
}

#itemDetailPage .button-link {
    text-align: left;
}

.ratingbutton-icon-withrating {
    color: rgb(249, 38, 114) !important;
}

/* Theme user setting tab buttons */
div[data-role="controlgroup"] a.ui-btn-active {
    background: rgba(0, 0, 0, 0.5) !important;
    color: white !important;
}

div[data-role="controlgroup"] a[data-role="button"] {
    display: table-cell !important;
    margin: 0 !important;
}

/* Home Library Buttons */

.homeLibraryButton {
    min-width: 12em;
    margin: 0.4em;
    width: auto !important;
}

.raised.homeLibraryButton {
    background: rgba(0, 0, 0, 0.3) !important;
    transition: background 0.37s var(--abyss-ease),
        border-color 0.37s var(--abyss-ease),
        box-shadow 0.37s var(--abyss-ease);
    border: solid 1px rgba(var(--abyss-accent), 0) !important;
}

.raised.homeLibraryButton:hover {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Dialogs & Overlays */

.playerStats-stats,
.upNextContainer,
.dialog,
.toast {
    border-radius: 24px !important;
}

.iconOsd {
    right: 24px;
    top: 8.5%;
    border-radius: 18px !important;
}

.iconOsdIcon {
    margin: .5em .63em 0 .63em;
}

.iconOsdProgressOuter {
    margin: 1.5em .25em 0.35em;
}

.formDialogHeader {
    border-top-left-radius: var(--abyss-radius);
    border-top-right-radius: var(--abyss-radius);
}

.formDialogFooter {
    border-bottom-left-radius: var(--abyss-radius);
    border-bottom-right-radius: var(--abyss-radius);
}

.formDialogFooter-clear,
.formDialogHeader-clear,
.innerCardFooterClear {
    background-color: transparent !important;
}

.formDialogContent {
    margin-bottom: 6.2em;
}

.dialogContentInner {
    padding: .5em 1em 1em;
    padding-right: 1em;
    padding-left: 1em;
}

/* Cards */

.visualCardBox,
.cardImageContainer {
    box-shadow: none;
}

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

.cardOverlayContainer {
    border-radius: var(--abyss-radius) !important;
    border: solid 1px rgba(var(--abyss-accent), 0.0) !important;
    transition: border-color 0.15s var(--abyss-ease) !important;
}


.button-submit,
.cardOverlayContainer:hover,
.dialog,
.toast,
.upNextContainer,
.playerStats-stats,
.raised.homeLibraryButton:hover {
    border: solid 1px rgba(245, 245, 247, 0.2) !important;
}

.cardPadder {
    background-color: #0000 !important;
    box-shadow: none !important;
    border-radius: var(--abyss-radius) !important;
}

.card.show-animation:focus>.cardBox {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition: transform 0.37s var(--abyss-ease) !important;
}



/* Card Indicators */
.indicator {
    border: 0.5px solid rgba(0, 0, 0, 0.1);
}

.cardIndicators,
.listItemIndicators {
    right: .225em;
    top: .225em;
    padding: 2px;
}

.mediaSourceIndicator {
    left: 0.5em;
    top: 0.5em;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: none;
    border-radius: var(--abyss-radius);
}

.innerCardFooter {
    margin: .5em;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: none;
}

.countIndicator {
    background: rgba(var(--abyss-accent), 0.8);
    box-shadow: none;
    border-radius: 10px !important;
    padding: 4px;
    font-weight: bolder;
}

.playedIndicator {
    background: rgb(var(--abyss-accent));
    box-shadow: none;
    border-radius: 10px !important;
    padding: 4px;
    font-weight: bolder;
}

.cardOverlayButton-br button[title="Watched"] .MuiSvgIcon-root[data-testid="CheckIcon"] {
    border-radius: 8px;
    background: rgb(var(--abyss-accent));
    color: black;
}

.cardOverlayButton-br.cardIndicators {
    bottom: 0;
    position: absolute;
}

/* Indicators & Progress */

.missingIndicator,
.unairedIndicator {
    background: #ae3030eb;
    padding: .3em .6em;
    color: #fff;
}

.transcodingProgress>div,
.itemProgressBarForeground {
    background: #E50914 !important;
    height: 100% !important;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.7) !important;
}

.playbackProgress>div {
    background-color: rgba(var(--abyss-accent), 0.75);
}

.backgroundProgress>div {
    background: rgba(0, 0, 0, 0);
    background-color: #0000;
}

.itemProgressBar {
    background: rgba(0, 0, 0, 0.25);
}

/* Sliders */

.mdl-slider-background-lower {
    background-color: rgb(var(--abyss-accent));
}

.mdl-slider::-moz-range-thumb {
    border-radius: 50%;
    background: rgb(var(--abyss-accent));
}

.mdl-slider::-ms-thumb {
    border-radius: 50%;
    background: rgb(var(--abyss-accent));
}

.mdl-slider::-webkit-slider-thumb {
    border-radius: 50%;
    background: rgb(var(--abyss-accent));
}

.sliderMarker {
    width: 3px;
    border-radius: 2px;
}

/* Toggle Switches */

.mdl-switch__input:checked+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__track {
    background: rgba(var(--abyss-accent), 0.5);
}

.mdl-switch__input:checked+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__thumb {
    background: rgb(var(--abyss-accent));
}

/* Spinner */

.mdl-spinner__layer-1 {
    border-color: rgb(var(--abyss-accent));
}

.mdl-spinner__layer-2 {
    border-color: rgba(128, 128, 128, 1);
}

.mdl-spinner__layer-3 {
    border-color: rgba(40, 40, 40, 1);
}

.mdl-spinner__layer-4 {
    border-color: rgba(0, 0, 0, 1);
}

/* Progress Ring */

.progressring-spiner {
    border-color: rgb(var(--abyss-accent)) !important;
    border-width: .35em;
}

.progressring {
    margin: .4em;
}

.progressring-bg {
    display: none;
}

/* Lists */

.listItem {
    padding-left: 1em;
    margin-bottom: 2px !important;
}

.listItem bdi:first-of-type {
    font-weight: 500;
    font-variation-settings: "wght" 500;
    transition: color 0.3s ease;
}

.listItem bdi p {
    font-weight: 400 !important;
    font-variation-settings: "wght" 400 !important;
}

.listItem:hover bdi:first-of-type {
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.listItem:hover bdi p,
.listItem:hover bdi p::before {
    font-weight: 400 !important;
    font-variation-settings: "wght" 400 !important;
}

.listItem-border {
    border-color: rgba(var(--abyss-accent), 0) !important;
}

.listItemIcon {
    background: #0000 !important;
    border-radius: var(--abyss-radius) !important;
}

.listItem-indexnumberleft {
    margin: 1em;
}

.listItemImageButton {
    margin: auto;
    font-size: 1.6em !important;
    border-radius: var(--abyss-radius) !important;
}

.listItemImageButton-icon {
    padding: 0;
}

.listItemImageButton:hover {
    color: rgb(var(--abyss-accent));
}

.secondary.listItem-overview.listItemBodyText {
    height: unset !important;
    margin: 0;
}

.listItem:hover,
.listItem:hover .secondary,
.listItem:hover .listItem-secondaryText,
.listItem:hover p,
.listItem:hover span,
.listItem:hover div,
.listItem:hover .runtime,
.listItem:hover .starIcon::before,
.listItem:hover .starRatingContainer,
.listItem:hover .listItem-overview {
    color: #121212b7 !important;
}

.listItem:hover,
.listItem:hover .listItemBodyText {
    color: #121212 !important;
}

.listItem:hover .material-icons,
.listItem:hover .listItemImageButton {
    color: #121212 !important;
}

.listItem:hover .countIndicator,
.listItem:hover .playedIndicator {
    background: rgba(0, 0, 0, 0.15);
    color: #121212 !important;
}

.listItem:hover .itemProgressBarForeground {
    background: #E50914 !important;
    height: 100% !important;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.7) !important;
}

.listItem:hover .itemProgressBar {
    background: rgba(18, 18, 18, 0.2) !important;
}

.listItem:hover .ratingbutton-icon-withrating {
    color: rgb(249, 38, 114) !important;
}

.listItem:hover .listItemImageButton-icon {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Form Inputs */
#homeScreenPreferencesPage,
#languagePreferencesPage {
    & form {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    & .button-submit {
        width: 97%;
        align-self: center !important;
    }
}

#quickConnectPreferencesPage .inputContainer {
    text-align: center;
}

.emby-input,
.emby-textarea {
    padding: .4em .55em;
}

.emby-textarea {
    font-family: monospace;
    font-size: 10pt;
}

.emby-select {
    padding: .35em 1.9em .35em .35em;
}

.selectArrow {
    margin-top: 1.05em;
}

.itemSelectionPanel,
.checkboxOutline,
.emby-input,
.emby-textarea,
.emby-select-withcolor,
.checkboxOutline:focus,
.emby-input:focus,
.emby-textarea:focus,
.emby-select-withcolor:focus {
    border: 1px solid rgba(40, 40, 40, 0.8);
}

.checkboxOutline {
    border-color: rgba(var(--abyss-accent), 0.3) !important;
    transition: background 0.2s var(--abyss-ease),
        border-color 0.2s var(--abyss-ease);
}

input[type="checkbox"]:checked~.checkboxOutline,
input[type="checkbox"]:checked+.checkboxOutline {
    background: rgb(var(--abyss-accent)) !important;
    border-color: rgb(var(--abyss-accent)) !important;
}

.checkboxIcon {
    color: #121212 !important;
}

input[type="checkbox"]:focus~.checkboxOutline,
input[type="checkbox"]:focus+.checkboxOutline {
    outline: 2px solid rgba(var(--abyss-accent), 0.4) !important;
    outline-offset: 2px;
}

#txtQuickConnectCode {
    font-size: xxx-large;
    font-weight: 900;
    letter-spacing: 12px;
    text-align: center;
    margin-top: 12px;
}

/* Paper / Table */

.sessionCardFooter {
    border: none;
}

#user_usage_report_table,
.detailTable {
    background: rgba(0, 0, 0, .5);
}

.detailTableBodyRow-shaded {
    background: #0000 !important;
}

/* Sync Play */

.syncPlayIconCircle {
    color: rgb(var(--abyss-accent)) !important;
    text-shadow: none !important;
}

/* Subtitle Preview */

.subtitleappearance-preview {
    background: linear-gradient(140deg, rgb(var(--abyss-accent)), #111) !important;
}

.subtitleappearance-preview #sliderVertical {
    margin: 24px !important;
}

.subtitle {
    padding-left: 0 !important;
}

/* Others */
#userProfilePage .readOnlyContent,
.readOnlyContent .verticalSection,
#languagePreferencesPage .settingsContainer .verticalSection,
.subtitleAppearanceSection,
.homeScreenSettingsContainer .perLibrarySettings,
.homeScreenSettingsContainer .verticalSection-extrabottompadding,
.settingsContainer .MuiStack-root .MuiStack-root {
    padding: 16px;
    background-color: rgba(var(--abyss-glass-tint), 0.69);
    border-radius: 32px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: solid 1px rgba(245, 245, 247, 0.2) !important;
}

.settingsContainer .MuiStack-root .MuiStack-root .MuiStack-root {
    border-radius: 12px !important;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 8px !important;
}

.homeScreenSettingsContainer .verticalSection-extrabottompadding .verticalSection {
    padding: 0 !important;
    border-radius: 0;
    background: none !important;
    box-shadow: none;
    border: none !important;
}

.homeScreenSettingsContainer .perLibrarySettings {
    margin-bottom: 36px !important;
}

.homeScreenSettingsContainer .paperList {
    padding: 12px;
    background-color: rgba(var(--abyss-glass-tint), 0.69);
    border-radius: 24px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    margin: 0 !important;
}

.readOnlyContent .adminSection {
    border-radius: 32px 32px 6px 6px !important;
    margin-bottom: 12px !important;
}

.readOnlyContent .userSection {
    border-radius: 6px 6px 32px 32px !important;
}

.readOnlyContent .userSection .sectionTitle {
    padding-top: 0 !important;
}

#userProfilePage .readOnlyContent {
    padding: 0 !important;
}

#userProfilePage .readOnlyContent div {
    align-items: baseline !important;
    margin-right: 12px !important;
}

#image,
#uploadImage {
    border-radius: 24px !important;
    margin: 12px !important;
}

#quickConnectPreferencesPage {
    justify-items: center;
}

.itemSelectionPanel {
    padding: 12px !important;
}

.selectionCommandsPanel {
    padding: 1.5em 24px !important;
}

.selectionCommandsPanel * {
    color: rgb(var(--abyss-accent));
}

[dir=ltr] .playerStats-stats {
    padding: 1em 3em 2em 2em;
}


.playerStats-stat {
    align-items: baseline;
}

.playerStats-stat-header {
    font-size: medium !important;
}

.playerStats-stat-label {
    opacity: 0.5;
    padding-bottom: 2px;
}

.playerStats-stat-value {
    font-family: monospace;
    font-size: medium;
}

.playerStats-closeButton {
    margin: 10px;
}

[dir="ltr"] .upNextContainer {
    margin: 0px 2em 10.4em 0px;
}

#castCollapsible,
#scenesCollapsible,
#similarCollapsible,
.moreFromSeasonSection {
    overflow: hidden;
}

.playstatebutton-icon-played::before {
    background-color: rgba(var(--abyss-accent), 0.8);
    border-radius: 8px;
    color: #000;
}

.listItem-content:hover .playstatebutton-icon-played::before {
    background-color: #000;
    color: rgba(var(--abyss-accent), 0.8);
}

.listItem-content:hover .playedIndicator {
    background: rgba(var(--abyss-accent));
    color: #121212 !important;
}


/* 7. ROUNDED CORNERS */

.missingIndicator,
.unairedIndicator,
.detailTable,
.primaryImageWrapper>img,
.toast,
.paperList,
.cardContent,
.sessionNowPlayingInnerContent,
.subtitleappearance-preview,
.listItemImage,
.listItemImageButton,
.listItemButton,
.listItem,
.cardImage,
.fab,
.raised,
.multiSelectCheckboxOutline,
.itemSelectionPanel,
.cardContent-button,
.cardContent-shadow,
.itemDetailImage,
.cardImageContainer,
.listItemIcon,
.blurhash-canvas,
.countIndicator,
.playedIndicator,
.listItem-border,
.visualCardBox,
.chapterThumbTextContainer,
.chapterThumbContainer,
.chapterThumb,
.emby-input,
.emby-textarea,
.nowPlayingPageImage,
.upNextDialog-poster-img,
.cardOverlayButtonIcon,
.innerCardFooter {
    border-radius: var(--abyss-radius) !important;
}

.osdPoster img {
    border-radius: var(--abyss-radius);
    border: none;
}

div[data-role="controlgroup"] a[data-role="button"]:first-child {
    border-bottom-left-radius: var(--abyss-radius);
    border-top-left-radius: var(--abyss-radius);
}

div[data-role="controlgroup"] a[data-role="button"]:last-child {
    border-bottom-right-radius: var(--abyss-radius);
    border-top-right-radius: var(--abyss-radius);
}

#dashboardPage .cardContent,
#dashboardPage .sessionNowPlayingInnerContent {
    border-radius: var(--abyss-radius) var(--abyss-radius) 0 0 !important;
}

#divVirtualFolders .cardImageContainer,
#divVirtualFolders .cardContent {
    border-radius: var(--abyss-radius) var(--abyss-radius) 0 0 !important;
}

#userProfilesPage .cardImage,
#userProfilesPage .cardContent {
    border-radius: var(--abyss-radius) var(--abyss-radius) 0 0 !important;
}

[dir=ltr] .emby-select,
#inputTextColor,
.checkboxOutline {
    border-radius: 8px !important;
}

.dialog-fullscreen {
    border-radius: 8px !important;
}

.upNextContainer,
.playerStats,
.playerStats-stats {
    border-radius: 24px !important;
}

.detailImageContainer .cardImageContainer,
.detailImageContainer .card {
    border-radius: 24px !important;
}

/* 8. MEDIA PLAYER */

.nowPlayingPageImage {
    border: none;
}

.osdPoster img {
    border-radius: var(--abyss-radius);
    border: none;
}

.startTimeText,
.endTimeText {
    width: 3.4em;
    display: block;
    text-align: center;
}

.osdTitle {
    margin-left: 0.5em;
}

.skinHeader.osdHeader {
    height: 5em;
}

.osdTextContainer {
    margin: 0 !important;
    margin-top: 0.2em !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
}

.nowPlayingBarCurrentTime {
    width: 6em;
}

.upNextDialog-countdownText {
    color: rgb(var(--abyss-accent));
}

.iconOsdProgressInner {
    background: rgb(var(--abyss-accent));
}

/* Chapter thumb */
.chapterThumb {
    height: 14vh;
    min-width: 14vh;
    box-shadow: 0 0 1.9vh #000;
}

.chapterThumbText {
    font-size: 1em;
}

.chapterThumbTextContainer {
    right: auto;
    bottom: 4px;
    padding: .25em 0.7em;
}

.chapterThumbContainer {
    box-shadow: 0 0 1.9vh #000;
}

.sliderBubble {
    background: #0000;
    -webkit-transform: translate3d(-50%, -108%, 0);
    transform: translate3d(-50%, -108%, 0);
}

/* Playing Bar */
.nowPlayingBarTop {
    margin-top: 24px;
}

.videoOsdBottom .osdControls,
.nowPlayingBar {
    border-radius: 24px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 12px;
}

.nowPlayingBar .nowPlayingImage {
    width: 2.91em;
    border-radius: 8px;
}

.nowPlayingBarPositionContainer {
    top: -1.5em;
    padding: 0 8px;
}

.nowPlayingBarInfoContainer {
    margin-left: 8px;
}

body:has(#videoOsdPage) .skinHeader .MuiTypography-root.MuiTypography-body1 {
    font-size: large;
    font-weight: 500;
    -webkit-backdrop-filter: blur(var(--abyss-glass-blur));
    backdrop-filter: blur(var(--abyss-glass-blur));
    padding: 4px 12px;
    border-radius: 12px;
}

.videoOsdBottom {
    padding: 0 !important;
    margin: 24px !important;
    border-radius: 24px;
    background: none !important;
}

.osdTimeText {
    margin-left: 0 !important;
    opacity: 0.5;
}

/* Track selector */
.trackSelections .selectContainer .detailTrackSelect {
    padding: .5em 1.9em .5em .5em;
}

.trackSelections .selectContainer .selectArrowContainer .selectArrow {
    margin-top: .2em;
}

.trackSelections .selectContainer {
    align-items: center;
}

/* Slider track rounding */
.mdl-slider-background-flex,
.mdl-slider-background-flex-inner,
.mdl-slider-background-upper,
.mdl-slider-background-lower {
    border-radius: 2px;
}





/* 10. ITEM DETAIL PAGE */

.mainDetailButtons {
    font-size: 120%;
}

.hide+.detailPageWrapperContainer .itemName {
    display: block !important;
}

.sectionTitleTextButton:hover {
    color: transparent;
}

/* Progress bars on item pages */
#indexPage .innerCardFooterClear,
.libraryPage .innerCardFooterClear,
#itemDetailPage .innerCardFooterClear {
    background-color: transparent !important;
    box-shadow: none;
}

#indexPage .itemProgressBarForeground,
.libraryPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground,
#indexPage .itemProgressBar,
.libraryPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
    border-radius: var(--abyss-radius);
}

#indexPage .itemProgressBarForeground,
.libraryPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground {
    background: #E50914 !important;
    height: 100% !important;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.7) !important;
}

#indexPage .itemProgressBar,
.libraryPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
    height: 7px;
    background: rgba(0, 0, 0, 0.4);
    margin: .5em .8em;
}

#itemDetailPage .detailButton {
    padding: 8px !important;
    margin-right: 8px !important;
}

#itemDetailPage .btnPlay {
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    max-width: none !important;
}

#itemDetailPage .btnPlay:hover {
    background: #fff;
    color: #111 !important;
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

#itemDetailPage .btnPlay .detailButton-content {
    flex-direction: row !important;
}

#itemDetailPage .btnReplay {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9);
}

#itemDetailPage .btnReplay:hover {
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.9) !important;
    transform: scale(1.05);
}

#itemDetailPage:has(.btnReplay.hide) .btnPlayTrailer {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9);
}

#itemDetailPage:has(.btnReplay.hide) #itemDetailPage .btnPlayTrailer:hover {
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.9) !important;
    transform: scale(1.05);
}

/* 11. LOGIN PAGE */

#loginPage {
    background-size: cover !important;
}

#loginPage .readOnlyContent,
#loginPage form {
    max-width: 22em;
}

#loginPage h1 {
    display: none;
}

#loginPage .padded-left.padded-right.padded-bottom-page {
    margin-top: 8em;
}

#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
    margin-top: 0.8em;
    background: rgba(var(--abyss-accent), 0.0) !important;
}

#loginPage .raised.cancel.block.btnForgotPassword.emby-button:hover {
    color: rgb(var(--abyss-accent)) !important;
}

.manualLoginForm {
    border-radius: 24px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: solid 1px rgba(245, 245, 247, 0.2) !important;
    padding: 24px 12px 7px;
    margin-bottom: 24px;
}


/* 12. CAST THUMBNAILS (responsive sizing) */

.layout-desktop #castContent .card.overflowPortraitCard,
.layout-desktop #guestCastContent .card.overflowPortraitCard {
    width: 10vw !important;
    font-size: 90% !important;
}

.layout-desktop #castContent .cardScalable,
.layout-desktop #guestCastContent .cardScalable {
    width: calc(10vw - 0.6em) !important;
    height: calc(14vw - 0.6em) !important;
}

.layout-tablet #castContent .card.overflowPortraitCard,
.layout-tablet #guestCastContent .card.overflowPortraitCard {
    width: 17vw !important;
    font-size: 90% !important;
}

.layout-tablet #castContent .cardScalable,
.layout-tablet #guestCastContent .cardScalable {
    width: calc(17vw - 0.6em) !important;
    height: calc(12vw - 0.6em) !important;
}

.layout-mobile #castContent .card,
.layout-mobile #guestCastContent .card {
    width: 95px !important;
    min-width: 95px !important;
    max-width: 95px !important;
    flex: 0 0 95px !important;
    font-size: 85% !important;
}

.layout-mobile #castContent .cardScalable,
.layout-mobile #guestCastContent .cardScalable {
    width: 95px !important;
    height: 130px !important;
    aspect-ratio: 3 / 4 !important;
}

.layout-mobile .innerCardFooterClear {
    padding-right: 24px !important;
}

.layout-mobile .noItemsMessage.centerMessage {
    font-size: 28px;
}

.layout-mobile .centerMessage {
    width: 90% !important;
}

@media (orientation: landscape) and (max-height: 500px) {

    .layout-mobile #castContent .card,
    .layout-mobile #guestCastContent .card {
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        flex: 0 0 90px !important;
        font-size: 85% !important;
    }

    .layout-mobile #castContent .cardScalable,
    .layout-mobile #guestCastContent .cardScalable {
        width: 90px !important;
        height: 120px !important;
        aspect-ratio: 3 / 4 !important;
    }

    .layout-mobile .innerCardFooterClear {
        padding-right: 24px !important;
    }
}

/* 13. RESPONSIVE / MEDIA QUERIES */

/* Mobile layout tweaks */

.layout-mobile .detailPagePrimaryContainer {
    background: transparent;
}

.layout-mobile .adminDrawerLogo {
    border-bottom: none;
}

.layout-mobile #itemDetailPage .parentName,
.layout-mobile #itemDetailPage .parentNameLast,
.layout-mobile #itemDetailPage .itemName.subtitle {
    text-align: left;
    justify-content: left;
}

.layout-mobile #itemDetailPage .mainDetailButtons,
.layout-mobile #itemDetailPage .itemMiscInfo {
    justify-content: left;
}

.layout-mobile .itemBackdrop {
    position: relative;
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    margin-top: 0;
    z-index: 0;
    -webkit-mask-image:
        linear-gradient(to bottom, black 40%, transparent 100%),
        linear-gradient(to right, transparent 0%, black 25%, black 70%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 8%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, black 40%, transparent 100%),
        linear-gradient(to right, transparent 0%, black 25%, black 70%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 8%);
    mask-composite: intersect;
}

.layout-mobile .detailLogo {
    margin-top: -15vh;
    margin-bottom: 4vh !important;
    margin-left: 40vw !important;
    width: 50vw !important;
}

.layout-mobile .sectionTitleTextButton>.material-icons {
    padding-top: .2em;
}

.layout-mobile .listItemImageButton {
    background: rgba(0, 0, 0, 0);
}

.layout-mobile .sectionTitle {
    padding-top: 0em;
}

.layout-mobile #itemDetailPage .itemName.infoText.parentNameLast {
    display: block;
}

.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
    padding-top: 0em;
}

/* TV Layout */

.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
    border-radius: 24px !important;
    border: 0.3em solid rgb(var(--abyss-accent)) !important;
    transition: all 0.5s !important;
}

.layout-tv .pageTitle,
.layout-tv .cardText {
    font-size: revert;
}

.layout-tv .emby-tab-button {
    padding: 0.3em 1.2em;
    margin: 4px;
}

.layout-tv .sliderMarker {
    height: 24px !important;
}

.layout-tv .chapterThumbContainer {
    transform: scale(1.5) !important;
    top: -72px !important;
}

.emby-button.show-focus:focus,
.headerButton.show-focus:focus,
.actionSheetMenuItem.show-focus:focus {
    background: rgb(var(--abyss-accent)) !important;
    color: #121212 !important;
}

.headerButton.show-focus:focus,
.raised.button-submit.emby-button.show-focus:focus {
    transform: scale(1.02) !important;
    transition: transform 0.3s !important;
    margin-top: .4em !important;
    margin-bottom: .4em !important;
}

.headerUserButton.show-focus:focus {
    transform: none !important;
}

#itemDetailPage .emby-button.show-focus:focus {
    transform: scale(1.1) !important;
    padding: 0 .4em;
    margin: .4em;
    border-radius: 10px;
    background: rgb(var(--abyss-accent)) !important;
    color: #121212 !important;
}

.emby-tab-button.show-focus {
    background: transparent;
    transform: none !important;
    color: #999;
}

.emby-button.emby-tab-button.show-focus:focus {
    background: transparent !important;
    transform: none !important;
    border-color: rgb(var(--abyss-accent));
    color: rgb(var(--abyss-accent)) !important;
}

.emby-tab-button.show-focus:focus .emby-button-foreground {
    transform: scale(1.1) !important;
    font-weight: 500;
    transition: 0.3s;
}

.emby-tab-button.show-focus:focus.emby-tab-button-active {
    background: rgb(var(--abyss-accent)) !important;
    color: #121212 !important;
    border-color: transparent !important;
    border-radius: 50px;
}

.emby-select-withcolor {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.libraryPage .paper-icon-button-light.show-focus:focus,
#videoOsdPage .paper-icon-button-light.show-focus:focus {
    background: rgb(var(--abyss-accent)) !important;
    color: #121212 !important;
    padding: 4px !important;
}

/* Desktop layout & TV*/
.layout-desktop #itemDetailPage .btnPlay,
.layout-tv #itemDetailPage .btnPlay {
    margin-right: 12px !important;
    padding: .4em 1.4em .4em 1em !important;
}

.layout-desktop #itemDetailPage .btnPlay .detailButton-content::after,
.layout-tv #itemDetailPage .btnPlay .detailButton-content::after {
    content: "Play";
    margin-left: 0.45em;
    font-weight: 700;
    font-size: 0.9em;
}

.layout-desktop #itemDetailPage:has(.btnReplay:not(.hide)) .btnPlay .detailButton-content::after,
.layout-tv #itemDetailPage:has(.btnReplay:not(.hide)) .btnPlay .detailButton-content::after {
    content: "Resume";
}

.layout-tv .detailImageContainer .card,
.layout-desktop .detailImageContainer .card {
    position: fixed !important;
    top: 15% !important;
}

.layout-tv .detailPageSecondaryContainer.padded-left,
.layout-desktop .detailPageSecondaryContainer.padded-left {
    padding-left: max(env(safe-area-inset-left), 32.45vw);
}



.withSectionTabs .headerTop {
    width: 100% !important;
    align-self: center !important;
}

@media (max-width: 100em) {
    .withSectionTabs .headerTop {
        padding-bottom: 0;
    }
}

@media all and (min-width: 75em) {
    .cardOverlayFab-primary {
        background-color: #00000000;
    }

    .cardOverlayButtonIcon {
        background-color: #00000000 !important;
    }

    .cardOverlayContainer {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .headerTabs.sectionTabs {
        display: none !important;
    }
}

@media all and (max-width: 75em) {
    .cardOverlayFab-primary {
        background-color: #00000000;
    }

    .cardOverlayButtonIcon {
        background-color: #00000000 !important;
    }

    .cardOverlayContainer {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .cardOverlayButton {
        padding: 0.25em;
    }
}

/* ipad minish */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .layout-mobile .detailRibbon {
        padding-left: 12% !important;
    }
}

@media all and (max-width: 26em) {
    .homeLibraryButton {
        min-width: 45%;
        width: auto !important;
    }

    .pageTitle {
        font-size: medium !important;
        font-weight: 500;
        padding: 0 6px !important;
    }

    .sectionTitle {
        font-size: 1.2em;
        font-weight: 500;
    }

    .headerLeft,
    .headerRight {
        padding: 0 12px;
    }

    .detailImageContainer .cardImageContainer,
    .detailImageContainer .card {
        border-radius: 12px !important;
    }

    .emby-tab-button {
        padding: 0.4em 1.2em;
    }

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

    .paper-icon-button-light {
        padding: 8px;
    }

    /* btnPause fixed neutralized */


}

@media screen and (max-height: 26em) and (orientation: landscape) {
    .pageTitle {
        font-size: large !important;
    }

    /* btnPause fixed landscape neutralized */

    body:has(#indexPage.homePage:not(.hide)) .headerTabs.sectionTabs {
        display: none !important;
    }
}

@media all and (min-width: 100em) {
    .button-flat {
        margin: .2em !important;
        padding: .85em !important;
    }

    .listItemImage.listItemImage-large.itemAction.lazy {
        height: 160px !important;
    }

    .listItem-content {
        height: unset !important;
    }
}

@media all and (max-width: 100em) {
    .mainDetailButtons {
        font-size: 155%;
    }

    .listItemImage.listItemImage-large.itemAction.lazy {
        height: 160px !important;
    }

    .listItem-content {
        height: unset !important;
    }

    .secondary.listItem-overview.listItemBodyText {
        height: unset !important;
        margin: 0;
    }

    #indexPage .itemProgressBar,
    .libraryPage .itemProgressBar,
    #itemDetailPage .itemProgressBar {
        margin-right: .8em;
    }
}

@media (min-aspect-ratio: 1.98/1) {
    .detailImageContainer .card {
        width: 150px !important;
        max-width: 150px !important;
    }

    .detailRibbon {
        padding-left: 20px !important;
    }

    .detailPagePrimaryContent,
    .layout-tv .detailPageSecondaryContainer.padded-left,
    .layout-desktop .detailPageSecondaryContainer.padded-left {
        padding-left: 0 !important;
    }

    .detailPageContent {
        padding-left: 0 !important;
    }
}

@media (min-aspect-ratio: 2.7/1) {
    .detailImageContainer .card {
        width: 150px !important;
        max-width: 150px !important;
    }

    .detailRibbon {
        padding-left: 20px !important;
    }

    .detailPagePrimaryContent,
    .layout-tv .detailPageSecondaryContainer.padded-left,
    .layout-desktop .detailPageSecondaryContainer.padded-left {
        padding-left: 0 !important;
    }

    .detailPageContent {
        padding-left: 0 !important;
    }
}

/* Backdrop filter support */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    html[data-theme="dark"] .MuiDialog-paper,
    .manualLoginForm,
    .dialog,
    .iconOsd,
    .mainDrawer,
    .toast,
    .emby-tabs-slider,
    .videoOsdBottom .osdControls,
    .readOnlyContent .verticalSection,
    .button-submit,
    .upNextContainer,
    .selectionCommandsPanel,
    .playerStats-stats,
    .appfooter,
    html[data-theme="dark"] #displayPreferencesPage form button[type="submit"].MuiButton-root {
        -webkit-backdrop-filter: blur(var(--abyss-glass-blur)) !important;
        backdrop-filter: blur(var(--abyss-glass-blur)) !important;
        background-color: rgba(var(--abyss-glass-tint), 0.69) !important;
    }

    .raised.cancel.block.btnForgotPassword.emby-button,
    .btnQuick,
    .pageTitle,
    .videoOsdBottom,
    .headerButton {
        -webkit-backdrop-filter: blur(var(--abyss-glass-blur)) !important;
        backdrop-filter: blur(var(--abyss-glass-blur)) !important;
    }

    .paper-icon-button-light:hover,
    #itemDetailPage .itemProgressBar,
    #dashboardPage .backgroundProgress>div {
        backdrop-filter: blur(4px);
    }

    .indicator {
        backdrop-filter: blur(2px);
    }

    @media all and (max-width: 75em) {
        .cardOverlayButtonIcon {
            background-color: rgba(0, 0, 0, 0.35) !important;
            backdrop-filter: blur(4px);
        }
    }

    #indexPage .itemProgressBar,
    .libraryPage .itemProgressBar,
    #itemDetailPage .itemProgressBar {
        backdrop-filter: blur(4px);
        background: rgba(0, 0, 0, 0.35) !important;
    }

    body:has(.nowPlayingBar:not(.hide)) .backgroundContainer.withBackdrop {
        -webkit-backdrop-filter: blur(var(--abyss-glass-blur));
        backdrop-filter: blur(var(--abyss-glass-blur));
    }
}

/* Item container margins */
.itemsContainer>.card>.cardBox {
    margin-left: 0.6em !important;
    margin-right: 0.8em;
}

/* Episode list image sizing */
.listItemImage.listItemImage-large.itemAction.lazy {
    transition: filter 0.15s var(--abyss-ease);
    margin-top: 3px;
    margin-bottom: 3px;
}

/* 14. SEARCH PAGE */

.searchSuggestionsList .emby-button {
    color: rgba(var(--abyss-accent), 0.6);
    font-weight: 100;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: left;
}

#searchTextInput {
    font-weight: bold;
    font-size: 24px;
    padding: 12px 18px;
    letter-spacing: 1.1px;
}

.searchFieldsInner .inputLabel {
    display: none;
}

.searchfields-icon {
    align-self: center !important;
}

.verticalSection.searchSuggestions .sectionTitle {
    display: none;
}

.verticalSection.searchSuggestions {
    text-align: left !important;
    padding: 12px 0 0 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: calc(100vh - 190px);
    overflow: hidden;
}

.searchSuggestionsList {
    width: fit-content;
    min-width: min(908px, calc(100vw - 70px));
    padding-left: 50px;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--abyss-accent), 0.5) transparent;
}

.searchSuggestionsList::-webkit-scrollbar {
    width: 4px;
}

.searchSuggestionsList::-webkit-scrollbar-thumb {
    background: rgba(var(--abyss-accent), 0.5);
    border-radius: var(--abyss-radius);
}

.searchSuggestionsList::-webkit-scrollbar-track {
    background: transparent;
}

.noItemsMessage.centerMessage {
    font-weight: 100 !important;
    font-size: 36px;
    letter-spacing: 1.2px;
    opacity: 0.8;
}

.centerMessage {
    padding: 2em 0 !important;
}

@media all and (max-width: 50em) {
    .searchSuggestionsList {
        min-width: calc(100vw - 80px);
        padding-left: 44px;
    }
}

/* 15. ANIMATIONS & KEYFRAMES */

html[data-theme="dark"] .MuiDrawer-root *,
.playstatebutton-icon-played::before,
.cardOverlayContainer,
.cardOverlayButtonIcon,
.cardOverlayButton,
.paper-icon-button-light,
.emby-tab-button,
.emby-tab-button-active,
.button-flat,
.navMenuOption,
.listItem,
.actionSheetMenuItem {
    transition: background 0.37s var(--abyss-ease),
        color 0.37s var(--abyss-ease),
        border-color 0.37s var(--abyss-ease),
        opacity 0.37s var(--abyss-ease),
        transform 0.37s var(--abyss-ease) !important;
}

.mainDrawer {
    transition: transform 0.18s var(--abyss-ease-snappy) !important;
}

/* Favourite button heart animation — all contexts */
@keyframes abyss-heart-pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes abyss-heart-glow {
    0% {
        filter: drop-shadow(0 0 0px rgba(249, 38, 114, 0));
    }

    40% {
        filter: drop-shadow(0 0 10px rgba(249, 38, 114, 0.9));
    }

    100% {
        filter: drop-shadow(0 0 0px rgba(249, 38, 114, 0));
    }
}

.ratingbutton-withrating .material-icons.favorite {
    animation: abyss-heart-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) normal none,
        abyss-heart-glow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) normal none;
}

/* Section entrance animations, all pages */
@keyframes abyss-section-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settingsContainer .MuiStack-root .MuiStack-root,
.verticalSection:nth-child(1) {
    animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.05s;
}

.verticalSection:nth-child(2) {
    animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.1s;
}

.verticalSection:nth-child(3) {
    animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.15s;
}

.verticalSection:nth-child(4) {
    animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.2s;
}

.verticalSection:nth-child(5) {
    animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.25s;
}

.verticalSection:nth-child(6) {
    animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.3s;
}

.verticalSection:nth-child(7) {
    animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.35s;
}

.verticalSection:nth-child(8) {
    animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.4s;
}

.verticalSection:nth-child(n+9) {
    animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.45s;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   PURE ABYSS 100%: COMPLETE DASHBOARD & SETTINGS (ALL INTERIOR & REACT PAGES)
   ========================================================================== */

/* 1. Global Backgrounds for ALL Settings, Dashboard, and Interior Pages */
html.jellyfin-settings-page,
.type-interior,
.pageWithSidebar,
.settingsContainer,
#dashboardPage,
body:has(.MuiDrawer-docked),
body:has(#dashboardPage),
body:has(.pageWithSidebar),
div[data-role="page"]:has(.dashboardSection),
div[data-role="page"]:has(.content-primary),
main.MuiBox-root,
.MuiBox-root:has(.MuiDrawer-docked) {
    background-color: #0b0b0e !important;
    color: rgb(var(--abyss-accent)) !important;
    font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Hide backdrops on settings and interior pages */
html.jellyfin-settings-page #abyss-spotlight-backdrop,
body:has(.type-interior) #abyss-spotlight-backdrop,
body:has(#dashboardPage) #abyss-spotlight-backdrop,
body:has(.MuiDrawer-docked) #abyss-spotlight-backdrop,
body:has(.pageWithSidebar) #abyss-spotlight-backdrop,
html.jellyfin-settings-page .backdropContainer,
body:has(.type-interior) .backdropContainer,
body:has(#dashboardPage) .backdropContainer,
body:has(.MuiDrawer-docked) .backdropContainer,
body:has(.pageWithSidebar) .backdropContainer {
    display: none !important;
    opacity: 0 !important;
}

/* 2. Top Navigation Bar on Settings / Dashboard (No overlap, clean alignment) */
html.jellyfin-settings-page header.MuiAppBar-root,
body:has(.MuiDrawer-docked) header.MuiAppBar-root,
body:has(#dashboardPage) header.MuiAppBar-root,
body:has(.pageWithSidebar) header.MuiAppBar-root {
    background: rgba(11, 11, 14, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

html.jellyfin-settings-page header.MuiAppBar-root > .MuiToolbar-root > .MuiStack-root:first-of-type,
body:has(.MuiDrawer-docked) header.MuiAppBar-root > .MuiToolbar-root > .MuiStack-root:first-of-type,
body:has(#dashboardPage) header.MuiAppBar-root > .MuiToolbar-root > .MuiStack-root:first-of-type,
body:has(.pageWithSidebar) header.MuiAppBar-root > .MuiToolbar-root > .MuiStack-root:first-of-type,
header.MuiAppBar-root:has([data-testid*="ArrowBack"]) > .MuiToolbar-root > .MuiStack-root:first-of-type {
    position: static !important;
    left: auto !important;
    transform: none !important;
}

html.jellyfin-settings-page header.MuiAppBar-root > .MuiToolbar-root > .MuiBox-root:last-child,
body:has(.MuiDrawer-docked) header.MuiAppBar-root > .MuiToolbar-root > .MuiBox-root:last-child,
body:has(#dashboardPage) header.MuiAppBar-root > .MuiToolbar-root > .MuiBox-root:last-child,
body:has(.pageWithSidebar) header.MuiAppBar-root > .MuiToolbar-root > .MuiBox-root:last-child,
header.MuiAppBar-root:has([data-testid*="ArrowBack"]) > .MuiToolbar-root > .MuiBox-root:last-child {
    order: initial !important;
    margin-right: initial !important;
}

/* 3. Natural Page & Content Alignment (Zero top blank space, Zero scroll offset) */
.pageWithSidebar {
    display: block !important;
}

.pageWithSidebar .content-primary,
.type-interior .content-primary,
main.MuiBox-root,
div[role="main"] {
    padding-top: 76px !important;
    max-width: 1400px;
    box-sizing: border-box !important;
}

/* 4. Pure Abyss Sidebar / Drawer (MUI & Legacy) */
.mainDrawer,
.mainDrawer-scrollContainer,
.MuiDrawer-docked,
.MuiDrawer-paper {
    background-color: #111114 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    color: rgba(var(--abyss-accent), 0.8) !important;
}

/* Navigation items in sidebar (Frosted glass pills) */
.mainDrawer .navMenuOption,
.MuiDrawer-paper .MuiListItemButton-root {
    border-radius: 50px !important;
    margin: 4px 12px !important;
    padding: 10px 18px !important;
    color: rgba(var(--abyss-accent), 0.75) !important;
    transition: all 0.2s var(--abyss-ease) !important;
    font-family: "Google Sans", sans-serif !important;
    font-weight: 500 !important;
}

.mainDrawer .navMenuOption:hover,
.MuiDrawer-paper .MuiListItemButton-root:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.mainDrawer .navMenuOption-selected,
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.mainDrawer .navMenuOptionIcon,
.MuiDrawer-paper .MuiListItemIcon-root {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    min-width: 36px !important;
    margin-right: 12px !important;
}

.mainDrawer .sidebarHeader,
.MuiDrawer-paper .MuiListSubheader-root {
    background: transparent !important;
    color: rgba(var(--abyss-accent), 0.45) !important;
    font-family: "Google Sans", sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding-left: 24px !important;
    margin: 16px 0 6px !important;
}

/* 5. 100% Pure Abyss Cards & Widgets Across ALL Settings Pages */
.MuiPaper-root:not(header):not(.MuiDrawer-paper):not(.MuiMenu-paper):not(.MuiPopover-paper),
.MuiCard-root,
.type-interior .cardBox,
.type-interior .paperList,
.type-interior .visualCardBox,
.type-interior .readOnlyContent,
.type-interior .dashboardSection,
.type-interior .dashboardColumn,
.type-interior .userCard,
.type-interior .card.squareCard,
.type-interior .card.portraitCard,
.type-interior .card.backdropCard,
.type-interior .cardContent,
.settingsContainer .cardBox,
.settingsContainer .paperList {
    background: rgba(22, 22, 26, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    color: rgb(var(--abyss-accent)) !important;
}

/* Section titles */
.type-interior .sectionTitle,
.settingsContainer .sectionTitle,
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
    font-family: "Google Sans", sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* 6. Device Cards (Override default teal #00607a background) */
.MuiCard-root:has([data-testid*="Computer"]),
.MuiCard-root:has([data-testid*="Phone"]),
.MuiCard-root:has([data-testid*="Tv"]),
.MuiCard-root:has([data-testid*="Cast"]),
.MuiCard-root:has(svg[data-testid]),
[class*="deviceCard"],
[class*="DeviceCard"] {
    background: rgba(25, 25, 32, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* 7. Activity Log List & Bell Icons (Override default cyan #00a4dc circles) */
.MuiListItem-root:has(.MuiAvatar-root),
.type-interior .listItem,
.type-interior .paperList .listItem,
.activityLogList .listItem {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    padding: 12px 16px !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
}

.MuiListItem-root:has(.MuiAvatar-root):hover,
.type-interior .listItem:hover,
.activityLogList .listItem:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.MuiListItemAvatar-root .MuiAvatar-root,
.MuiAvatar-root:has(svg),
.activityLogList .listItemIcon,
.type-interior .listItemIcon {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

/* 8. User Cards (Users page) */
.MuiCard-root:has([data-testid*="MoreVert"]),
.type-interior .card.squareCard.userCard,
.type-interior .card.squareCard,
.userCard {
    background: rgba(22, 22, 26, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.MuiCard-root:has([data-testid*="MoreVert"]):hover,
.type-interior .card.squareCard:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

/* 9. Action Buttons Across ALL Settings & Dashboard */
.MuiButton-contained,
.MuiButton-containedPrimary,
#dashboardPage button.raised:not([class*="delete"]):not([class*="cancel"]):not([class*="warn"]):not([class*="restart"]):not([class*="shutdown"]):not([class*="button-flat"]),
.dashboardPage button.raised:not([class*="delete"]):not([class*="cancel"]):not([class*="warn"]):not([class*="restart"]):not([class*="shutdown"]):not([class*="button-flat"]),
.settingsContainer button.raised,
.formDialog button.raised,
.type-interior .button-submit {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0e0e11 !important;
    border-radius: 50px !important;
    font-family: "Google Sans", sans-serif !important;
    font-weight: 600 !important;
    padding: 0.6em 1.6em !important;
    letter-spacing: 0.02em !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

.MuiButton-contained:hover,
.type-interior button.raised:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2) !important;
}


/* Universal suppression of floating Play All & Shuffle All buttons outside item detail & video */
:is(.view, .page, [data-role="page"], .libraryPage):not(#itemDetailPage):not(#videoOsdPage) :is(
    .btnPlay,
    .btnShuffle,
    .fab,
    button[data-action="playall"],
    button[data-action="shuffleall"],
    button[data-action="play"],
    button[data-action="shuffle"],
    button[title*="Play" i],
    button[title*="Shuffle" i],
    button:has(svg[data-testid="PlayArrowIcon"]),
    button:has(svg[data-testid="ShuffleIcon"])
),
.viewSettings :is(.btnPlay, .btnShuffle, button[data-action="play"], button[data-action="shuffle"], button[title*="Play" i], button[title*="Shuffle" i], .fab),
.pageTitleWithDefaultButton :is(.btnPlay, .btnShuffle, .fab),
.mainTabsContainer :is(.btnPlay, .btnShuffle, .fab),
.headerRight :is(.btnPlay, .btnShuffle) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Hidden duplicate cards */
.card.apex-duplicate-hidden {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Restart button */
.MuiButton-root:has([data-testid*="Restart"]),
button[id*="Restart"],
button:has([data-testid*="Restart"]),
.button-restart {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
}

/* Shutdown button */
.MuiButton-root:has([data-testid*="Power"]),
button[id*="Shutdown"],
button:has([data-testid*="Power"]),
.button-shutdown {
    background: rgba(235, 87, 87, 0.15) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(235, 87, 87, 0.3) !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
}

/* Add / Fab button */
.MuiFab-root,
.MuiButtonBase-root:has([data-testid*="Add"]) {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.MuiFab-root:hover,
.MuiButtonBase-root:has([data-testid*="Add"]):hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05) !important;
}

/* 10. Inputs, Dropdowns, Checkboxes & Forms (Pixel-Perfect Abyss Alignment) */
.MuiFilledInput-root::before,
.MuiFilledInput-root::after,
.MuiFilledInput-underline::before,
.MuiFilledInput-underline::after,
.MuiInput-underline::before,
.MuiInput-underline::after,
.MuiInputBase-root::before,
.MuiInputBase-root::after {
    display: none !important;
    border-bottom: none !important;
    content: none !important;
}

.MuiFormControl-root {
    margin-bottom: 18px !important;
    width: 100% !important;
}

.MuiFilledInput-root,
.MuiOutlinedInput-root,
.emby-select,
.emby-textarea {
    position: relative !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    font-family: "Google Sans", sans-serif !important;
    box-shadow: none !important;
    transition: border-color 0.25s var(--abyss-ease), background-color 0.25s var(--abyss-ease), box-shadow 0.25s var(--abyss-ease) !important;
}

.MuiFilledInput-root {
    padding: 24px 16px 8px 16px !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
}

.MuiFilledInput-root:hover,
.MuiOutlinedInput-root:hover,
.emby-select:hover,
.emby-textarea:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.MuiFilledInput-root.Mui-focused,
.MuiOutlinedInput-root.Mui-focused,
.emby-select:focus,
.emby-textarea:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
    outline: none !important;
}

.MuiFilledInput-input,
.MuiOutlinedInput-input {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-family: "Google Sans", sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    height: auto !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}

.MuiFormLabel-root,
.MuiInputLabel-root {
    font-family: "Google Sans", sans-serif !important;
    color: rgba(var(--abyss-accent), 0.55) !important;
    font-size: 0.9rem !important;
    pointer-events: none !important;
}

.MuiInputLabel-filled {
    transform: translate(16px, 17px) scale(1) !important;
    transform-origin: top left !important;
    transition: color 0.2s cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0.0, 0, 0.2, 1) 0ms !important;
}

.MuiInputLabel-filled.MuiInputLabel-shrink {
    transform: translate(16px, 7px) scale(0.75) !important;
    color: rgba(var(--abyss-accent), 0.75) !important;
    font-weight: 600 !important;
}

.MuiInputLabel-root.Mui-focused {
    color: #ffffff !important;
}

.MuiFormHelperText-root {
    font-family: "Google Sans", sans-serif !important;
    color: rgba(var(--abyss-accent), 0.48) !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
    padding-left: 4px !important;
}

.MuiCheckbox-root {
    color: rgba(var(--abyss-accent), 0.5) !important;
    border-radius: 8px !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.MuiCheckbox-root.Mui-checked {
    color: #ffffff !important;
}

.MuiFormControlLabel-label {
    font-family: "Google Sans", sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: rgb(var(--abyss-accent)) !important;
}

.checkboxOutline {
    border-radius: 6px !important;
}

.emby-toggle-button {
    border-radius: 50px !important;
}

/* 11. Top Navigation Bar: Hide server switch warning pill & raw name */
header.MuiAppBar-root .MuiStack-root:first-of-type > .MuiButtonBase-root:has(svg[data-testid*="Warning"]),
header.MuiAppBar-root .MuiStack-root:first-of-type > .MuiButtonBase-root:has(svg[data-testid*="Dns"]),
header.MuiAppBar-root .MuiStack-root:first-of-type > [class*="MuiChip"]:has(svg[data-testid*="Warning"]),
header.MuiAppBar-root .MuiStack-root:first-of-type > [class*="MuiChip"]:has(svg[data-testid*="Dns"]),
header.MuiAppBar-root [class*="server-name"],
header.MuiAppBar-root [class*="serverName"],
.headerServerButton {
    display: none !important;
}

/* 12. Crisp Card & Image Rendering - True HD Smooth Filtering */
.cardImage,
.cardContent,
.cardImageContainer,
.cardScalable,
.cardPadder,
.cardBox,
.card-withdetails,
.innerCardContainer {
    image-rendering: auto !important;
    image-rendering: high-quality !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.backdropImage {
    image-rendering: auto !important;
    image-rendering: high-quality !important;
}

/* Ensure video player elements always render on top without backdrop interference */
#videoOsdPage,
.videoPlayerContainer,
.htmlvideoplayer {
    z-index: 99999 !important;
}
body:has(#videoOsdPage) #abyss-spotlight-backdrop,
body.videoPlayerContainerVisible #abyss-spotlight-backdrop {
    display: none !important;
}

/* Mobile Touch & Tap Lag Elimination (0ms Click Response) */
html,
body,
button,
a,
.card,
.cardBox,
.cardScalable,
.emby-button,
.paper-icon-button-light,
.listItem,
.navMenuOption,
.headerButton,
.emby-tab-button,
.btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 13. Android & Mobile Perfection */
@media (max-width: 959px) {
    :root {
        --abyss-glass-blur: 4px !important;
        --abyss-backdrop-blur: 6px !important;
    }

    .cardImageContainer .cardImage {
        background-size: cover !important;
        background-position: center top !important;
        image-rendering: -webkit-optimize-contrast !important;
    }

    .card:active .cardScalable,
    .cardBox:active,
    .listItem:active,
    .emby-button:active {
        transform: scale(0.97) !important;
        transition: transform 0.08s ease !important;
    }

    .MuiDrawer-modal .MuiDrawer-paper,
    .mainDrawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 80vw !important;
        background: rgba(17, 17, 21, 0.98) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important;
        z-index: 1300 !important;
    }
}

@media (max-width: 600px) {
    button,
    .button-flat,
    .emby-button,
    .cardOverlayButton,
    .MuiIconButton-root,
    .MuiButton-root {
        min-height: 44px;
        min-width: 44px;
    }

    .skinHeader {
        padding: 8px 12px !important;
    }

    .itemsContainer.padded-left.padded-right {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .content-primary,
    .dashboardContent,
    main.MuiBox-root {
        padding: 16px 12px !important;
    }
}

/* Claude-Style Stepped Hamburger Menu Bar (Top long 20px, Middle medium 13.5px, Bottom short 7.5px) */
svg[data-testid="MenuIcon"],
svg.claude-stepped-menu {
    width: 20px !important;
    height: 15px !important;
    display: block !important;
}

/* Hide default horizontal straight path when not replaced */
svg[data-testid="MenuIcon"]:not(.claude-stepped-menu) path,
.mainDrawerButton:not(.claude-stepped-menu) .material-icons {
    display: none !important;
}

svg[data-testid="MenuIcon"]:not(.claude-stepped-menu),
.mainDrawerButton:not(.claude-stepped-menu) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 20 15' fill='none'%3E%3Crect x='0' y='0.5' width='20' height='2' rx='1' fill='white'/%3E%3Crect x='0' y='6.5' width='13.5' height='2' rx='1' fill='white'/%3E%3Crect x='0' y='12.5' width='7.5' height='2' rx='1' fill='white'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

button:has(svg[data-testid="MenuIcon"]),
button[aria-label="Menu"],
button[aria-label="menu"],
.mainDrawerButton,
.headerButtonMenu {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   Apex Official Delta Logo Branding (Pure OLED Pitch Black + Solid White)
   Target ONLY explicit app logos, NEVER media cards, posters, or user avatars!
   ========================================================================== */
.headerLogo img,
.imgLogoIcon,
.pageTitleWithDefaultLogo,
.pageTitleWithLogo {
    content: url('apex-logo.svg') !important;
    background-image: url('apex-logo.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    object-fit: contain !important;
}

/* Header Start Icon & Title Bar Logo */
.headerLogo img,
.imgLogoIcon {
    max-height: 22px !important;
    max-width: 22px !important;
    object-fit: contain !important;
}

/* Drawer Brand Card Logo - refined, small logo (22px) as requested */
.mainDrawer a[to="/"] img,
.mainDrawer a[href="/"] img,
.mainDrawer .adminDrawerLogo img,
.mainDrawer .adminDrawerLogo .apex-delta-icon,
.mainDrawer .apex-delta-icon,
.mainDrawer img[src*="icon-transparent"],
.mainDrawer img[src*="apex-logo"] {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Hard safeguarding for real media card posters and user avatars */
.card img,
.cardImage,
.cardContent img,
.cardScalable img,
.detailImage img,
.headerButton-user img,
.headerUserImage,
.userImage {
    content: normal !important;
}

/* Splash Screen Logo */
.splashLogo,
#splashScreen .splashLogo {
    background-image: url('apex-logo.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100px !important;
    height: 100px !important;
}

/* Modern Drawer Server Brand Card */
.mainDrawer a[to="/"],
.mainDrawer .navMenuOption.lnkMediaFolder.btnSelectServer,
.mainDrawer .navMenuOption.btnSelectServer,
.mainDrawer .adminDrawerLogo,
.mainDrawer .navMenuHeader {
    background: rgba(22, 22, 32, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    margin: 10px 14px 14px !important;
    padding: 10px 14px !important;
}

/* Never show raw container hostname or server URL anywhere in the UI */
.mainDrawer .serverUrl,
.mainDrawer .serverAddress,
.manualServerAddress,
.serverUrl,
.serverAddress,
[class*="serverUrl"],
[class*="serverAddress"],
[class*="ServerAddress"] {
    display: none !important;
}

/* ==========================================================================
   Android TV & Apple TV+ Professional Streaming UI Engine
   ========================================================================== */

/* 1. Global OLED Palette & Typography Tokens */
:root {
    --tv-bg: #000000;
    --tv-surface: #111111;
    --tv-glass: rgba(17, 17, 17, 0.75);
    --tv-text-primary: #F5F5F5;
    --tv-text-muted: #999999;
    --tv-focus-border: #FFFFFF;
    --tv-radius: 12px;
}

body, html, .backgroundContainer {
    background-color: var(--tv-bg) !important;
    color: var(--tv-text-primary) !important;
}

/* 2. Top Navigation Bar (Unified Glass Header) */
.skinHeader,
.skinHeader.focuscontainer-x,
.skinHeader-withBackground {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Clean up header buttons (remove excessive shadow/background boxes) */
.skinHeader .headerButton,
.skinHeader .paper-icon-button-light {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    color: var(--tv-text-primary) !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.skinHeader .headerButton:hover,
.skinHeader .headerButton:focus-visible {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: scale(1.05) !important;
}

/* 3. Section Titles & Row Headers */
.sectionTitle,
.sectionTitleTextButton {
    color: var(--tv-text-primary) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.01em !important;
    padding-left: 0.15em !important;
    margin-bottom: 0.5em !important;
}

/* 4. Horizontal Carousels & Card Peeking */
.itemsContainer.padded-left.padded-right {
    padding-left: 4.5vw !important;
    padding-right: 4.5vw !important;
    gap: 16px !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
}

.itemsContainer > .card {
    scroll-snap-align: start !important;
    margin-right: 14px !important;
}

/* 5. Differentiated Card Aspect Ratios */
/* Portrait 2:3 ratio for Movies, Shows, and General Media */
.cardScalable,
.portraitCard .cardScalable {
    border-radius: var(--tv-radius) !important;
    overflow: hidden !important;
    background-color: var(--tv-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), outline 0.18s ease, box-shadow 0.18s ease !important;
}

.cardImageContainer {
    background-color: var(--tv-surface) !important;
}

/* 16:9 Landscape Ratio for Continue Watching & Next Up */
.resumeSection .card,
.nextUpSection .card,
div[data-category="resume"] .card,
div[data-category="nextup"] .card,
.thumbCard .cardScalable,
.backdropCard .cardScalable {
    border-radius: var(--tv-radius) !important;
}

/* 6. Continue Watching Progress Bar (Thin 3px Flush Line) */
.itemProgressBar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 0 0 var(--tv-radius) var(--tv-radius) !important;
    margin: 0 !important;
    z-index: 4 !important;
}

.itemProgressBarForeground {
    background: #E50914 !important;
    height: 100% !important;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.7) !important;
}

/* 7. Card Text & Metadata Scrims */
.cardText {
    color: var(--tv-text-muted) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

.cardText-first {
    color: var(--tv-text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
}

/* Bottom gradient behind text on backdrop cards */
.cardOverlayContainer {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 100%) !important;
}

/* 8. TV Spatial Focus Transform & Border Ring */
.card:focus-visible,
.card.focused,
.card:focus {
    outline: none !important;
}

.card:focus-visible .cardScalable,
.card.focused .cardScalable,
.card:focus .cardScalable,
.card:hover .cardScalable {
    transform: scale(1.04) !important;
    outline: 2px solid var(--tv-focus-border) !important;
    outline-offset: 2px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 255, 255, 0.18) !important;
    z-index: 10 !important;
}



/* Top Floating Category Navigation (Android TV / Disney+ Style) */

/* Top Floating Category Navigation (Android TV / Disney+ Style) */

/* 1. COMPLETELY HIDE HAMBURGER MENU, CAST, AND SYNCPLAY */
button[aria-label="Menu"],
button[aria-label="menu"],
button:has(svg[data-testid="MenuIcon"]),
svg[data-testid="MenuIcon"],
.claude-stepped-menu,
.mainDrawerButton,
.headerButtonMenu,
button[title*="menu" i],
.headerSyncplayButton,
.headerButtonSyncPlay,
.btnSyncPlay,
button[data-action="syncplay"],
button[title*="SyncPlay" i],
button[aria-label*="SyncPlay" i],
.headerCastButton,
.headerButtonCast,
.btnCast,
button[data-action="cast"],
button[title*="Cast" i],
button[aria-label*="Cast" i],
button:has(svg[data-testid="CastIcon"]),
button:has(svg[data-testid="GroupIcon"]),
button:has(svg[data-testid="PeopleIcon"]),
.headerLeft,
header.MuiAppBar-root > .MuiToolbar-root > .MuiBox-root:first-of-type:has(button[aria-label="Menu"]),
header.MuiAppBar-root > .MuiToolbar-root > .MuiStack-root:first-of-type:has(button[aria-label="Menu"]) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* 2. HEADER CONTAINER & BAR - Fully transparent, zero blur over spotlight */
.skinHeader,
.skinHeader.focuscontainer-x,
.skinHeader-withBackground,
.skinHeader-withBackground::before,
header.MuiAppBar-root {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    pointer-events: none !important;
}

.skinHeader *,
header.MuiAppBar-root * {
    pointer-events: auto;
}

.headerTop,
header.MuiAppBar-root > .MuiToolbar-root,
header > .MuiToolbar-root {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 56px !important;
    min-height: 56px !important;
    width: 100% !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 3. LEFT: TOP NAVIGATION TABS (Home, Movies, TV Shows) */
.apex-top-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
    order: -1 !important;
}

.apex-nav-item {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 5px 12px !important;
    border-radius: 18px !important;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    outline: none !important;
    white-space: nowrap !important;
    -webkit-tap-highlight-color: transparent !important;
}

.apex-nav-item:hover,
.apex-nav-item:focus-visible {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.apex-nav-item.active {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* 4. RIGHT: SEARCH AND PROFILE ONLY */
.headerRight,
header.MuiAppBar-root > .MuiToolbar-root > .MuiBox-root:last-of-type,
header.MuiAppBar-root > .MuiToolbar-root > .MuiStack-root:last-of-type {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
    order: 10 !important;
}

.headerSearchButton,
button[data-action="search"] {
    background: transparent !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

/* Landscape Mode & Desktop/TV: EXACT MATCH TO IMAGE 4 */
@media (min-width: 601px), (orientation: landscape) {
    .headerTop,
    header.MuiAppBar-root > .MuiToolbar-root,
    header > .MuiToolbar-root {
        padding: 0 24px !important;
    }

    .apex-top-nav {
        gap: 22px !important;
    }

    .apex-nav-item {
        font-size: 15px !important;
        padding: 6px 14px !important;
    }

    /* Image 4 Search Pill Bar */
    .apex-search-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 24px !important;
        padding: 6px 16px !important;
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 13.5px !important;
        font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        margin-right: 8px !important;
        outline: none !important;
    }

    .apex-search-pill:hover,
    .apex-search-pill:focus-visible {
        background: rgba(255, 255, 255, 0.2) !important;
        color: #FFFFFF !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    .headerSearchButton {
        display: none !important;
    }
}

/* Mobile Portrait Mode */
@media (max-width: 600px) and (orientation: portrait) {
    .headerTop,
    header.MuiAppBar-root > .MuiToolbar-root,
    header > .MuiToolbar-root {
        padding: 0 12px !important;
    }

    .apex-top-nav {
        gap: 10px !important;
    }

    .apex-nav-item {
        font-size: 13.5px !important;
        padding: 4px 8px !important;
    }

    .apex-search-pill {
        display: none !important;
    }

    .headerSearchButton {
        display: flex !important;
    }
}

/* STRICT HOMEPAGE HORIZONTAL RAILS - NEVER WRAP */
#indexPage .itemsContainer,
.homeSectionsContainer .itemsContainer,
.section0 .itemsContainer,
.section1 .itemsContainer,
.section2 .itemsContainer,
.section3 .itemsContainer,
.section4 .itemsContainer,
.section5 .itemsContainer,
.emby-scroller .itemsContainer {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 14px !important;
}

#indexPage .itemsContainer > .card,
.homeSectionsContainer .itemsContainer > .card,
.emby-scroller .itemsContainer > .card {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    margin-right: 14px !important;
}

/* 1. Continue Watching & Next Up: True 16:9 Widescreen Landscape Rails (Android TV & Modern Streaming) */
.resumeSection .card,
.nextUpSection .card,
div[data-category="resume"] .card,
div[data-category="nextup"] .card {
    width: 230px !important;
    max-width: 230px !important;
    min-width: 230px !important;
    flex: 0 0 230px !important;
    scroll-snap-align: start !important;
}

@media (min-width: 800px) {
    .resumeSection .card,
    .nextUpSection .card,
    div[data-category="resume"] .card,
    div[data-category="nextup"] .card {
        width: 275px !important;
        max-width: 275px !important;
        min-width: 275px !important;
        flex: 0 0 275px !important;
    }
}

.resumeSection .cardPadder,
.nextUpSection .cardPadder,
div[data-category="resume"] .cardPadder,
div[data-category="nextup"] .cardPadder,
.cardPadder-backdrop,
.cardPadder-overflowBackdrop {
    padding-bottom: 56.25% !important;
    aspect-ratio: 16 / 9 !important;
    height: 0 !important;
}

.resumeSection .cardScalable,
.nextUpSection .cardScalable,
div[data-category="resume"] .cardScalable,
div[data-category="nextup"] .cardScalable {
    aspect-ratio: 16 / 9 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}

.resumeSection .cardImageContainer img,
.nextUpSection .cardImageContainer img,
div[data-category="resume"] .cardImageContainer img,
div[data-category="nextup"] .cardImageContainer img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Streaming Watch Progress Bar (Netflix / Android TV Red Glow) */
.resumeSection .itemProgressBar,
.nextUpSection .itemProgressBar,
div[data-category="resume"] .itemProgressBar,
div[data-category="nextup"] .itemProgressBar,
#indexPage .itemProgressBar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 0 0 12px 12px !important;
    overflow: hidden !important;
    z-index: 5 !important;
}

.resumeSection .itemProgressBarForeground,
.nextUpSection .itemProgressBarForeground,
div[data-category="resume"] .itemProgressBarForeground,
div[data-category="nextup"] .itemProgressBarForeground,
#indexPage .itemProgressBarForeground {
    background: linear-gradient(90deg, #E50914 0%, #FF2E4D 100%) !important;
    border-radius: 0 0 12px 12px !important;
    height: 100% !important;
    box-shadow: 0 0 8px rgba(229, 9, 20, 0.6) !important;
}

@media (max-width: 600px) {
    .resumeSection .card,
    .nextUpSection .card,
    div[data-category="resume"] .card,
    div[data-category="nextup"] .card {
        width: 215px !important;
        max-width: 215px !important;
        min-width: 215px !important;
        flex: 0 0 215px !important;
    }
}

/* 2. Portrait Media Base (2:3 Vertical) */
.portraitCard,
.card[data-type="Movie"],
.card[data-type="Series"] {
    width: 150px !important;
    max-width: 150px !important;
    flex: 0 0 150px !important;
}

.portraitCard .cardScalable,
.card[data-type="Movie"] .cardScalable,
.card[data-type="Series"] .cardScalable {
    aspect-ratio: 2 / 3 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

@media (max-width: 600px) {
    #indexPage .portraitCard,
    #indexPage .card[data-type="Movie"],
    #indexPage .card[data-type="Series"] {
        width: 125px !important;
        max-width: 125px !important;
        flex: 0 0 125px !important;
    }
}

/* 3. Dedicated Library/Catalog views (3-Column Grid ONLY on Non-Home Library Pages) */
@media (max-width: 600px) and (orientation: portrait) {
    .page:not(#indexPage):not(#itemDetailPage) .itemsContainer,
    div[data-role="page"]:not(#indexPage) .itemsContainer,
    .pageTabContent:not(#homeTab) .itemsContainer,
    .itemsContainer.itemsContainer-wrap,
    .itemsContainer.vertical-wrap,
    .vertical-wrap.itemsContainer,
    .itemsContainer:not(.itemsContainer-slider):not(#indexPage .itemsContainer),
    #moviesPage .itemsContainer,
    #tvShowsPage .itemsContainer,
    #showsPage .itemsContainer,
    #libraryPage .itemsContainer,
    #itemsPage .itemsContainer {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        gap: 6px !important;
        padding: 6px 8px !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        width: 100% !important;
        scroll-snap-type: none !important;
    }

    .page:not(#indexPage):not(#itemDetailPage) .itemsContainer > .card,
    div[data-role="page"]:not(#indexPage) .itemsContainer > .card,
    .pageTabContent:not(#homeTab) .itemsContainer > .card,
    .itemsContainer.itemsContainer-wrap > .card,
    .itemsContainer.vertical-wrap > .card,
    .vertical-wrap.itemsContainer > .card,
    .itemsContainer:not(.itemsContainer-slider):not(#indexPage .itemsContainer) > .card,
    #moviesPage .card,
    #tvShowsPage .card,
    #showsPage .card,
    #libraryPage .card,
    #itemsPage .card,
    .card[data-type="Series"]:not(.itemsContainer-slider .card):not(#indexPage .card),
    .card[data-type="Movie"]:not(.itemsContainer-slider .card):not(#indexPage .card) {
        width: calc((100% - 12px) / 3) !important;
        max-width: calc((100% - 12px) / 3) !important;
        min-width: calc((100% - 12px) / 3) !important;
        flex: 0 0 calc((100% - 12px) / 3) !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        scroll-snap-align: none !important;
    }

    .page:not(#indexPage) .itemsContainer > .card > .cardBox,
    div[data-role="page"]:not(#indexPage) .itemsContainer > .card > .cardBox,
    .itemsContainer.vertical-wrap > .card > .cardBox,
    .itemsContainer:not(.itemsContainer-slider):not(#indexPage .itemsContainer) > .card > .cardBox,
    .card[data-type="Series"]:not(.itemsContainer-slider .card):not(#indexPage .card) > .cardBox,
    .card[data-type="Movie"]:not(.itemsContainer-slider .card):not(#indexPage .card) > .cardBox {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .page:not(#indexPage) .itemsContainer > .card .cardScalable,
    div[data-role="page"]:not(#indexPage) .itemsContainer > .card .cardScalable,
    .itemsContainer:not(.itemsContainer-slider):not(#indexPage .itemsContainer) > .card .cardScalable,
    .card[data-type="Series"]:not(.itemsContainer-slider .card):not(#indexPage .card) .cardScalable,
    .card[data-type="Movie"]:not(.itemsContainer-slider .card):not(#indexPage .card) .cardScalable {
        aspect-ratio: 2 / 3 !important;
        border-radius: 8px !important;
        width: 100% !important;
    }

    .page:not(#indexPage) .itemsContainer > .card .cardText,
    div[data-role="page"]:not(#indexPage) .itemsContainer > .card .cardText,
    .itemsContainer:not(.itemsContainer-slider):not(#indexPage .itemsContainer) > .card .cardText,
    .card[data-type="Series"]:not(.itemsContainer-slider .card):not(#indexPage .card) .cardText,
    .card[data-type="Movie"]:not(.itemsContainer-slider .card):not(#indexPage .card) .cardText {
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
        padding: 4px 1px 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
}

/* 4. LANDSCAPE MODE & WIDESCREEN: HIGH DENSITY CARDS (7-8 Cards Per Row) */
@media (orientation: landscape), (min-width: 601px) {
    .page:not(#indexPage):not(#itemDetailPage) .itemsContainer,
    div[data-role="page"]:not(#indexPage) .itemsContainer,
    .pageTabContent:not(#homeTab) .itemsContainer,
    .itemsContainer.itemsContainer-wrap,
    .itemsContainer.vertical-wrap,
    .vertical-wrap.itemsContainer,
    .itemsContainer:not(.itemsContainer-slider):not(#indexPage .itemsContainer),
    #moviesPage .itemsContainer,
    #tvShowsPage .itemsContainer,
    #showsPage .itemsContainer,
    #libraryPage .itemsContainer,
    #itemsPage .itemsContainer {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .page:not(#indexPage):not(#itemDetailPage) .itemsContainer > .card,
    div[data-role="page"]:not(#indexPage) .itemsContainer > .card,
    .pageTabContent:not(#homeTab) .itemsContainer > .card,
    .itemsContainer.itemsContainer-wrap > .card,
    .itemsContainer.vertical-wrap > .card,
    .vertical-wrap.itemsContainer > .card,
    .itemsContainer:not(.itemsContainer-slider):not(#indexPage .itemsContainer) > .card,
    #moviesPage .card,
    #tvShowsPage .card,
    #showsPage .card,
    #libraryPage .card,
    #itemsPage .card,
    .card[data-type="Series"]:not(.itemsContainer-slider .card):not(#indexPage .card),
    .card[data-type="Movie"]:not(.itemsContainer-slider .card):not(#indexPage .card) {
        width: calc((100% - 56px) / 8) !important;
        max-width: calc((100% - 56px) / 8) !important;
        min-width: calc((100% - 56px) / 8) !important;
        flex: 0 0 calc((100% - 56px) / 8) !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .page:not(#indexPage) .itemsContainer > .card > .cardBox,
    div[data-role="page"]:not(#indexPage) .itemsContainer > .card > .cardBox,
    .itemsContainer.vertical-wrap > .card > .cardBox,
    .itemsContainer:not(.itemsContainer-slider):not(#indexPage .itemsContainer) > .card > .cardBox,
    .card[data-type="Series"]:not(.itemsContainer-slider .card):not(#indexPage .card) > .cardBox,
    .card[data-type="Movie"]:not(.itemsContainer-slider .card):not(#indexPage .card) > .cardBox {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .page:not(#indexPage) .itemsContainer > .card .cardText,
    div[data-role="page"]:not(#indexPage) .itemsContainer > .card .cardText,
    .itemsContainer:not(.itemsContainer-slider):not(#indexPage .itemsContainer) > .card .cardText,
    .card[data-type="Series"]:not(.itemsContainer-slider .card):not(#indexPage .card) .cardText,
    .card[data-type="Movie"]:not(.itemsContainer-slider .card):not(#indexPage .card) .cardText {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        padding: 3px 2px 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ZERO STARTUP LAG: INSTANT VISIBILITY OF HOMEPAGE CONTENT */
#homeTab,
.homeSectionsContainer,
#indexPage .sections,
.verticalSection,
.section0,
.section1,
.section2,
.section3 {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ========================================================
   APEX UNIVERSAL TV TOP NAVIGATION BAR (Home, Movies, TV Shows)
   Mounted directly under document.body - immune to React DOM wiping
   ======================================================== */
#apex-tv-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 52px !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    background: rgba(10, 11, 15, 0.92) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

body.show-apex-topbar #apex-tv-topbar,
#apex-tv-topbar.is-visible {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#apex-tv-topbar .apex-tv-tabs {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    pointer-events: auto !important;
    margin: 0 auto !important;
}

.apex-tv-tab,
.apex-nav-item {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    outline: none !important;
    white-space: nowrap !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    line-height: 1 !important;
}

.apex-tv-tab:hover,
.apex-tv-tab:focus-visible,
.apex-nav-item:hover,
.apex-nav-item:focus-visible {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.apex-tv-tab.active,
.apex-nav-item.active {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* Mobile Portrait Mode: Compact tabs to prevent TV Shows & Search collision */
@media (max-width: 600px) and (orientation: portrait) {
    #apex-tv-topbar {
        height: 48px !important;
        padding: 0 8px !important;
        background: rgba(10, 11, 15, 0.92) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    }
    #apex-tv-topbar .apex-tv-tabs {
        gap: 4px !important;
    }
    .apex-tv-tab,
    .apex-nav-item {
        font-size: 12px !important;
        padding: 4px 7px !important;
        letter-spacing: -0.01em !important;
    }
    /* Right side controls: Search & Profile pinned safely to the right */
    .headerRight,
    header.MuiAppBar-root > .MuiToolbar-root > .MuiBox-root:last-of-type,
    header.MuiAppBar-root > .MuiToolbar-root > .MuiStack-root:last-of-type {
        position: absolute !important;
        right: 8px !important;
        top: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .headerSearchButton,
    button[data-action="search"],
    .headerUserButtonRound,
    .headerButton-user {
        margin: 0 1px !important;
        padding: 4px !important;
        min-width: 32px !important;
        width: 32px !important;
        height: 32px !important;
    }
}

/* Never display topbar on splash screen, login screen, server selection, server mismatch, wizard, or video */
#loginPage:not(.hide) ~ #apex-tv-topbar,
#serverMismatchPage:not(.hide) ~ #apex-tv-topbar,
#selectServerPage:not(.hide) ~ #apex-tv-topbar,
body:has(#serverMismatchPage:not(.hide)) #apex-tv-topbar,
body:has(.serverMismatchPage:not(.hide)) #apex-tv-topbar,
body:has(#loginPage:not(.hide)) #apex-tv-topbar,
body:has(.loginPage:not(.hide)) #apex-tv-topbar,
body:has(#selectServerPage:not(.hide)) #apex-tv-topbar,
body:has(.selectServerPage:not(.hide)) #apex-tv-topbar,
body:has(#forgotPasswordPage:not(.hide)) #apex-tv-topbar,
body:has(#itemDetailPage:not(.hide)) #apex-tv-topbar,
body:has(.splashLogo:not(.hide):not(:empty)) #apex-tv-topbar,
body.is-logged-out #apex-tv-topbar,
body.hide-apex-topbar #apex-tv-topbar,
body.videoPlayerContainerVisible #apex-tv-topbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Clean header on login, mismatch, and splash */
#serverMismatchPage .skinHeader,
.serverMismatchPage .skinHeader,
#loginPage .skinHeader,
.loginPage .skinHeader,
#selectServerPage .skinHeader,
.selectServerPage .skinHeader {
    display: none !important;
}

/* Landscape Mode & Desktop/TV */
@media (min-width: 601px), (orientation: landscape) {
    #apex-tv-topbar {
        height: 56px !important;
        padding: 0 24px !important;
    }
    #apex-tv-topbar .apex-tv-tabs {
        gap: 18px !important;
    }
    .apex-tv-tab,
    .apex-nav-item {
        font-size: 15px !important;
        padding: 6px 16px !important;
    }
}

/* Hide topbar only during active fullscreen video playback or settings */
body.videoPlayerContainerVisible #apex-tv-topbar,
body.hide-apex-topbar #apex-tv-topbar {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Suppress redundant header text and brand elements in top header bar to prevent collision */
.headerTop .pageTitle,
.skinHeader .pageTitle,
header.MuiAppBar-root .pageTitle,
header .pageTitle,
.headerLogoText,
.pageTitleWithDefaultLogo,
.pageTitleWithLogo,
.skinHeader .headerLogo {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ========================================================
   DETAIL PAGE: MOBILE PORTRAIT & DEFAULT CLEAN LAYOUT
   Clean single poster card + side-by-side title & metadata
   ======================================================== */
@media (orientation: portrait) {
    #itemDetailPage .detailPageWrapperContainer,
    #itemDetailPage .detailPagePrimaryContainer,
    .layout-mobile #itemDetailPage .detailPagePrimaryContainer {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        padding: 56px 16px 16px 16px !important;
        gap: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* Fixed Single Clean Poster Thumbnail in Portrait */
    #itemDetailPage .detailPagePrimaryContainer > .detailImageContainer,
    .layout-mobile #itemDetailPage .detailPagePrimaryContainer > .detailImageContainer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        height: 165px !important;
        aspect-ratio: 2 / 3 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 110px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    /* STRICTLY ELIMINATE ANY DUPLICATE / GHOST POSTER */
    #itemDetailPage .detailRibbon .detailImageContainer,
    #itemDetailPage .detailImageContainer ~ .detailImageContainer,
    #itemDetailPage .detailImageContainer:nth-of-type(n+2),
    #itemDetailPage .detailLogo,
    .layout-mobile #itemDetailPage .detailLogo {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    #itemDetailPage .detailImageContainer .card,
    .layout-mobile #itemDetailPage .detailImageContainer .card,
    #itemDetailPage .detailImageContainer .cardScalable {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 2 / 3 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin: 0 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
    }

    #itemDetailPage .detailImageContainer .cardPadder {
        display: none !important;
    }

    #itemDetailPage .detailRibbon,
    .layout-mobile #itemDetailPage .detailRibbon {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        flex: 1 1 calc(100% - 136px) !important;
        min-width: 0 !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #itemDetailPage .infoWrapper,
    .layout-mobile #itemDetailPage .infoWrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #itemDetailPage .nameContainer,
    .layout-mobile #itemDetailPage .nameContainer {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 4px 0 !important;
    }

    #itemDetailPage .itemName,
    .layout-mobile #itemDetailPage .itemName,
    #itemDetailPage h1.itemName,
    #itemDetailPage .itemName.hide,
    #itemDetailPage .nameContainer,
    #itemDetailPage .nameContainer.hide {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1.45rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        color: #ffffff !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        letter-spacing: -0.01em !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        position: relative !important;
        z-index: 10 !important;
    }

    #itemDetailPage .originalTitle,
    #itemDetailPage .parentName,
    #itemDetailPage .itemName.originalTitle,
    #itemDetailPage .nameContainer > *:not(h1) {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.72) !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    #itemDetailPage .itemMiscInfo,
    .layout-mobile #itemDetailPage .itemMiscInfo {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 2px 0 6px 0 !important;
        color: rgba(255, 255, 255, 0.72) !important;
        font-size: 0.85rem !important;
    }

        #itemDetailPage .mainDetailButtons,
    .layout-mobile #itemDetailPage .mainDetailButtons {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        margin: 8px 0 12px 0 !important;
        width: 100% !important;
        clear: both !important;
    }

    /* Media info and technical specs placed cleanly below buttons */
    #itemDetailPage .detailSectionContent,
    #itemDetailPage .mediaInfo,
    #itemDetailPage .trackSelections,
    #itemDetailPage .audioVideoInfo,
    #itemDetailPage .mediaInfoStreamContainer {
        position: relative !important;
        display: block !important;
        margin-top: 10px !important;
        margin-bottom: 6px !important;
        clear: both !important;
        width: 100% !important;
    }

    /* Media stream info & technical specs */
    #itemDetailPage .detailSectionContent,
    #itemDetailPage .mediaInfo,
    #itemDetailPage .trackSelections,
    #itemDetailPage .audioVideoInfo {
        position: relative !important;
        display: block !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
        clear: both !important;
        width: 100% !important;
    }
}

/* Universal Abyss Spotlight Hero Banner Iframe */
iframe.featurediframe {
    width: 100% !important;
    display: block !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 520px !important;
    height: 68vh !important;
    max-height: 720px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 768px) and (orientation: portrait) {
    iframe.featurediframe {
        height: 68vh !important;
        min-height: 500px !important;
        max-height: 640px !important;
    }
}

@media (orientation: landscape) {
    iframe.featurediframe {
        height: 75vh !important;
        min-height: 360px !important;
    }
}

/* Suppress Cast, SyncPlay, Menu/Hamburger buttons */
button[aria-label="Menu"],
button[aria-label="menu"],
button:has(svg[data-testid="MenuIcon"]),
.claude-stepped-menu,
.mainDrawerButton,
.headerButtonMenu,
.headerSyncplayButton,
.btnSyncPlay,
.headerCastButton,
.btnCast,
button[data-action="cast"],
button[data-action="syncplay"],
button[title*="SyncPlay" i],
button[aria-label*="SyncPlay" i],
button[title*="Cast" i],
button[aria-label*="Cast" i],
button:has(svg[data-testid="CastIcon"]),
button:has(svg[data-testid="GroupIcon"]),
button:has(svg[data-testid="PeopleIcon"]),
.headerLeft,
.headerTabs.sectionTabs {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* ========================================================
   LANDSCAPE MOVIE DETAIL PAGE: 2-COLUMN NETFLIX/APPLE TV LAYOUT
   ======================================================== */
@media (orientation: landscape) {
    #itemDetailPage {
        background: #0c0d10 !important;
        overflow-y: auto !important;
    }

    /* Completely hide detailLogo in all orientations to eliminate duplicate ghost posters */
#itemDetailPage .detailLogo,
.layout-mobile #itemDetailPage .detailLogo,
.layout-desktop #itemDetailPage .detailLogo,
.layout-tv #itemDetailPage .detailLogo {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

    #itemDetailPage .itemBackdrop,
    .layout-mobile #itemDetailPage .itemBackdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        opacity: 0.28 !important;
        filter: blur(8px) brightness(0.7) !important;
        -webkit-filter: blur(8px) brightness(0.7) !important;
        pointer-events: none !important;
        z-index: 0 !important;
        background-size: cover !important;
        background-position: center !important;
    }

    #itemDetailPage .detailPageWrapperContainer,
    #itemDetailPage .detailPagePrimaryContainer {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #itemDetailPage .detailRibbon,
    .layout-mobile #itemDetailPage .detailRibbon {
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px 24px 16px 185px !important;
        min-height: 228px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        background: transparent !important;
    }

    /* Fixed Left Column Poster (135px width, 2:3 ratio) */
    #itemDetailPage .detailImageContainer,
    .layout-mobile #itemDetailPage .detailImageContainer,
    .layout-desktop #itemDetailPage .detailImageContainer,
    .layout-tv #itemDetailPage .detailImageContainer {
        position: absolute !important;
        left: 28px !important;
        top: 16px !important;
        width: 135px !important;
        max-width: 135px !important;
        height: 202px !important;
        min-width: 135px !important;
        display: block !important;
        visibility: visible !important;
        z-index: 10 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #itemDetailPage .detailImageContainer .card,
    .layout-mobile #itemDetailPage .detailImageContainer .card {
        width: 135px !important;
        height: 202px !important;
        max-width: 135px !important;
        aspect-ratio: 2 / 3 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        margin: 0 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
    }

    #itemDetailPage .detailImageContainer .cardScalable {
        aspect-ratio: 2 / 3 !important;
        border-radius: 12px !important;
        width: 100% !important;
        height: 100% !important;
    }

    #itemDetailPage .detailImageContainer .cardPadder {
        display: none !important;
    }

    /* Right Column: Title, Metadata, Buttons Stacked Naturally */
    #itemDetailPage .infoWrapper,
    .layout-mobile #itemDetailPage .infoWrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 4px !important;
    }

    #itemDetailPage .nameContainer,
    .layout-mobile #itemDetailPage .nameContainer,
    .layout-desktop #itemDetailPage .nameContainer,
    .layout-tv #itemDetailPage .nameContainer {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 2px !important;
        margin: 0 0 4px 0 !important;
    }

    #itemDetailPage .originalTitle,
    #itemDetailPage .parentName,
    #itemDetailPage .itemName.originalTitle,
    #itemDetailPage .nameContainer > *:not(h1) {
        font-size: 1.1rem !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.75) !important;
        margin: 2px 0 0 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    #itemDetailPage .itemName,
    .layout-mobile #itemDetailPage .itemName,
    #itemDetailPage h1.itemName,
    #itemDetailPage .itemName.hide,
    #itemDetailPage .nameContainer,
    #itemDetailPage .nameContainer.hide {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1.65rem !important;
        font-weight: 700 !important;
        line-height: 1.22 !important;
        color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        letter-spacing: -0.01em !important;
        position: relative !important;
        z-index: 10 !important;
    }

    #itemDetailPage .itemMiscInfo,
    .layout-mobile #itemDetailPage .itemMiscInfo {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        color: rgba(255, 255, 255, 0.72) !important;
        font-size: 0.9rem !important;
        margin: 2px 0 6px 0 !important;
    }

    #itemDetailPage .mainDetailButtons,
    .layout-mobile #itemDetailPage .mainDetailButtons {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        margin: 8px 0 0 0 !important;
        width: 100% !important;
    }

    #itemDetailPage .detailPagePrimaryContent {
        position: relative !important;
        z-index: 2 !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
        padding-top: 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
}

/* Unified Button Styling Across Portrait & Landscape */
#itemDetailPage .mainDetailButtons .detailButton,
#itemDetailPage .mainDetailButtons .emby-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

#itemDetailPage .mainDetailButtons .detailButton-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#itemDetailPage .mainDetailButtons .detailButton-text {
    display: none !important;
}

#itemDetailPage .mainDetailButtons .material-icons,
#itemDetailPage .mainDetailButtons .detailButton-icon {
    font-size: 22px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#itemDetailPage .btnPlay,
#itemDetailPage .btnReplay {
    background: #ffffff !important;
    color: #000000 !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    flex-shrink: 0 !important;
}

#itemDetailPage .btnPlay .material-icons,
#itemDetailPage .btnReplay .material-icons {
    color: #000000 !important;
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

#itemDetailPage .btnPlayTrailer,
#itemDetailPage .btnFavorite,
#itemDetailPage .btnPlaystate,
#itemDetailPage .btnUserRating,
#itemDetailPage .btnMoreCommands,
#itemDetailPage .btnDownload {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

/* ========================================================
   VIDEO PLAYER OSD: CLEAN, UNIFIED LANDSCAPE CONTROLS
   Fixes scattered playback buttons and misaligned bottom bar
   ======================================================== */
#videoOsdPage {
    background: #000000 !important;
}

/* 1. Neutralize disruptive fixed positioning on btnPause */
.btnPause,
#videoOsdPage .btnPause {
    position: static !important;
    transform: none !important;
    left: auto !important;
    margin: 0 !important;
}

/* 2. Unified Centered Media Transport Cluster (Play, Pause, Rewind, Fast-Forward, Next, Prev) */
#videoOsdPage .videoOsdBottom .buttons > div[dir="ltr"] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

#videoOsdPage .videoOsdBottom .btnPause {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

#videoOsdPage .videoOsdBottom .btnPause:active {
    transform: scale(0.92) !important;
    background: rgba(255, 255, 255, 0.35) !important;
}

#videoOsdPage .videoOsdBottom .btnPause .material-icons {
    font-size: 38px !important;
    color: #ffffff !important;
}

#videoOsdPage .videoOsdBottom .btnRewind,
#videoOsdPage .videoOsdBottom .btnFastForward,
#videoOsdPage .videoOsdBottom .btnPreviousTrack,
#videoOsdPage .videoOsdBottom .btnNextTrack,
#videoOsdPage .videoOsdBottom .btnPreviousChapter,
#videoOsdPage .videoOsdBottom .btnNextChapter {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

#videoOsdPage .videoOsdBottom .btnRewind .material-icons,
#videoOsdPage .videoOsdBottom .btnFastForward .material-icons,
#videoOsdPage .videoOsdBottom .btnPreviousTrack .material-icons,
#videoOsdPage .videoOsdBottom .btnNextTrack .material-icons {
    font-size: 30px !important;
    color: #ffffff !important;
}

/* 3. Bottom Control Bar: Pinned, Clean, Gradient Backdrop */
#videoOsdPage .videoOsdBottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 12px 28px 16px 28px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 65%, transparent 100%) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    z-index: 50 !important;
}

#videoOsdPage .videoOsdBottom .osdControls {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
}

/* 4. Timeline Slider Row */
#videoOsdPage .flex.flex-direction-row.align-items-center {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    margin-bottom: 6px !important;
}

#videoOsdPage .startTimeText,
#videoOsdPage .endTimeText {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    min-width: 44px !important;
    text-align: center !important;
}

#videoOsdPage .sliderContainer {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Perfect Center Alignment for Spinner and Play Button */
.docspinner,
.mdl-spinner.docspinner,
#videoOsdPage .docspinner {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    pointer-events: none !important;
    z-index: 1000 !important;
}

#videoOsdPage .videoOsdBottom .buttons > div[dir=ltr] .hide {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. Bottom Icons Row (Audio, Subtitles, Settings, Pip, Fullscreen) - Spaced Evenly across Landscape */
#videoOsdPage .videoOsdBottom .buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-top: 4px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

#videoOsdPage .btnFullscreen {
    margin-left: 0 !important;
}

#videoOsdPage .videoOsdBottom .buttons button[is="paper-icon-button-light"] {
    color: rgba(255, 255, 255, 0.88) !important;
    padding: 8px !important;
}

#videoOsdPage .videoOsdBottom .buttons button[is="paper-icon-button-light"] .material-icons {
    font-size: 24px !important;
}


/* Ensure page content never sits underneath the fixed apex topbar */
body:not(.hide-apex-topbar) #indexPage,
body:not(.hide-apex-topbar) .homePage,
body:not(.hide-apex-topbar) .pageTabContent,
body:not(.hide-apex-topbar) #moviesPage,
body:not(.hide-apex-topbar) #tvShowsPage,
body:not(.hide-apex-topbar) #showsPage,
body:not(.hide-apex-topbar) .libraryPage:not(#itemDetailPage) {
    padding-top: 56px !important;
    box-sizing: border-box !important;
}


/* ========================================================
   CAST & CREW / PEOPLE SECTION - PROPER CARD PROPORTIONS
   ======================================================== */
#castContent,
#guestCastContent,
#peopleSection,
.peopleSection,
.peopleSection .itemsContainer,
.castSection .itemsContainer,
.emby-scroller:has(#castContent),
.emby-scroller:has(#guestCastContent),
div[data-category="people"],
div[data-category="cast"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    padding: 8px 14px 16px 14px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    width: 100% !important;
    max-width: 100% !important;
}

#castContent .card,
#guestCastContent .card,
#peopleSection .card,
.peopleSection .card,
.castSection .card,
div[data-category="people"] .card,
div[data-category="cast"] .card,
.card[data-type="Person"],
.personCard {
    width: 95px !important;
    min-width: 95px !important;
    max-width: 95px !important;
    flex: 0 0 95px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

#castContent .cardScalable,
#guestCastContent .cardScalable,
#peopleSection .cardScalable,
.peopleSection .cardScalable,
.castSection .cardScalable,
div[data-category="people"] .cardScalable,
div[data-category="cast"] .cardScalable,
.personCard .cardScalable {
    width: 95px !important;
    height: 130px !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
}

#castContent .cardImage,
#guestCastContent .cardImage,
.personCard .cardImage,
#castContent img,
#guestCastContent img,
.personCard img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

#castContent .cardText,
#guestCastContent .cardText,
.personCard .cardText {
    width: 120px !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    margin-top: 4px !important;
}


/* ========================================================
   CLEAN MEDIA CARDS & SLEEK COUNT BADGES (NO BOX-IN-BOX)
   ======================================================== */
#indexPage .card,
.libraryPage .card,
.itemsContainer .card,
.card[data-type="Movie"],
.card[data-type="Series"],
.card[data-type="Episode"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#indexPage .cardBox,
.libraryPage .cardBox,
.itemsContainer .cardBox,
.itemsContainer .visualCardBox,
.card[data-type="Movie"] .cardBox,
.card[data-type="Series"] .cardBox,
.card[data-type="Episode"] .cardBox {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* TV Series Unplayed Count Badge */
.countIndicator {
    background: rgba(0, 0, 0, 0.82) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}


/* ========================================================
   APEX FALLBACK CARD POSTERS & MOBILE MULTI-COLUMN GRID
   ======================================================== */
.apex-fallback-art {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Multi-column grid for Series & Movies in library and catalog views (no single-column rows) */
@media (max-width: 600px) and (orientation: portrait) {
    .itemsContainer-vertical,
    .itemsContainer-cards,
    .libraryPage .itemsContainer,
    #moviesPage .itemsContainer,
    #tvShowsPage .itemsContainer {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 12px 10px !important;
        padding: 8px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .itemsContainer-vertical > .card,
    .itemsContainer-cards > .card,
    .libraryPage .card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}
@media (orientation: landscape) and (max-height: 500px) {
    .itemsContainer-vertical,
    .itemsContainer-cards,
    .libraryPage .itemsContainer,
    #moviesPage .itemsContainer,
    #tvShowsPage .itemsContainer {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
        gap: 12px 10px !important;
        padding: 8px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ========================================================
   APEX DYNAMIC AMBIENT BACKDROP SYNCHRONIZATION
   Full-screen dynamic blur synced with active Spotlight item
   ======================================================== */
#abyss-spotlight-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    background-color: #050508;
}

html.abyss-spotlight-visible #abyss-spotlight-backdrop {
    opacity: 1;
}

.abyss-spotlight-backdrop-layer {
    position: absolute;
    inset: -50px;
    background-size: cover;
    background-position: center top;
    opacity: 0;
    filter: blur(58px) saturate(165%) contrast(115%) brightness(40%);
    transform: scale(1.15);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.abyss-spotlight-backdrop-layer.is-active {
    opacity: 1;
    transform: scale(1.03);
}

/* Atmospheric contrast gradient: transparent at top, soft vignette downwards, anchoring into true black */
#abyss-spotlight-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(5, 5, 8, 0.15) 0%,
        rgba(5, 5, 8, 0.35) 25%,
        rgba(5, 5, 8, 0.65) 55%,
        rgba(5, 5, 8, 0.88) 80%,
        #050508 100%
    );
    pointer-events: none;
}

/* Ensure background transparency pass-through on the home screen when spotlight is active */
html.abyss-spotlight-visible body,
html.abyss-spotlight-visible .backgroundContainer,
html.abyss-spotlight-visible #indexPage,
html.abyss-spotlight-visible .pageTabContent,
html.abyss-spotlight-visible .homeSectionsContainer,
html.abyss-spotlight-visible .mainAnimatedPages,
html.abyss-spotlight-visible .pageContainer {
    background-color: transparent !important;
    background: transparent !important;
}

html.abyss-spotlight-visible #indexPage,
html.abyss-spotlight-visible .homeSectionsContainer {
    position: relative;
    z-index: 1;
}

/* ========================================================
   MODERN STREAMING UPGRADES: PURE ANDROID TV & STREAMING APP
   ======================================================== */

/* 1. Hide redundant "My Media" library folders row from Home feed */
#indexPage .verticalSection:has([data-type="CollectionFolder"]),
#indexPage .verticalSection:has([data-type="UserView"]),
#indexPage .verticalSection:has(.card[data-type="CollectionFolder"]),
#indexPage .verticalSection:has(.card[data-type="UserView"]),
#indexPage [data-category="views"],
#indexPage .section0 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* 2. Modernized Catalog Action Toolbar (Replaces stark white buttons with frosted glass) */
.viewSettings,
.libraryViewNav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    margin: 0 !important;
}

/* Suppress nonsensical Play All & Shuffle All on Movie and TV series catalog grids */
.libraryPage :is(.btnPlay, .btnShuffle, button[data-action="playall"], button[data-action="shuffleall"], button[data-action="play"], button[data-action="shuffle"]),
#moviesPage :is(.btnPlay, .btnShuffle, button[data-action="playall"], button[data-action="shuffleall"]),
#tvShowsPage :is(.btnPlay, .btnShuffle, button[data-action="playall"], button[data-action="shuffleall"]),
.viewSettings :is(.btnPlay, .btnShuffle, button[data-action="playall"], button[data-action="shuffleall"], button[data-action="play"], button[data-action="shuffle"]) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Frosted glass icon buttons for filters, sort, view toggles, and paging */
.viewSettings button,
.viewSettings .paper-icon-button-light,
.libraryViewNav button,
.listPaging button {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 9999px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.viewSettings button:hover,
.viewSettings button:focus-visible,
.libraryViewNav button:hover,
.libraryViewNav button:focus-visible {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
    transform: scale(1.06) !important;
}

/* 3. Android TV Card Bento Focus & Hover Elevation */
.itemsContainer .card:focus-visible,
.itemsContainer .card:hover,
.itemsContainer-slider .card:focus-visible,
.itemsContainer-slider .card:hover {
    transform: scale(1.04) translateY(-2px) !important;
    z-index: 10 !important;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.itemsContainer .card:focus-visible .cardScalable,
.itemsContainer .card:hover .cardScalable,
.itemsContainer-slider .card:focus-visible .cardScalable,
.itemsContainer-slider .card:hover .cardScalable {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.85), 0 0 0 1.5px rgba(255, 255, 255, 0.35) !important;
}

/* 4. Streaming Typography: Multi-line clean title clamp instead of abrupt cutoffs */
.cardText-first {
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    line-height: 1.25 !important;
    color: #EDEDED !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    max-height: 2.5em !important;
    margin-top: 6px !important;
}

.cardText-secondary {
    font-size: 0.78rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
}

/* Section titles with modern streaming hierarchy */
.sectionTitle {
    font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    font-size: 1.18rem !important;
    color: #FFFFFF !important;
    margin: 18px 0 10px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.sectionTitleTextButton > .material-icons {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 1.15rem !important;
    margin-left: 4px !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.sectionTitleTextButton:hover > .material-icons {
    color: #FFFFFF !important;
    transform: translateX(3px) !important;
}