diff --git a/README.md b/README.md
index f033939..72b7f2f 100644
--- a/README.md
+++ b/README.md
@@ -9,13 +9,13 @@ Modern CSS theme for Jellyfin media server with custom fonts, smooth animations
 1. Go to Jellyfin Dashboard → General → Custom CSS
 2. Paste this code:
    ```css
-   @import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/tolfin.css");
+   @import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/complete.css");
    ```
 3. Click Save
 
 ### Manual Installation
 
-1. Download `theme/tolfin.css` from this repository
+1. Download `theme/complete.css` from this repository
 2. Go to Jellyfin Dashboard → General → Custom CSS
 3. Paste the contents of the file
 4. Click Save
diff --git a/example/base.css b/example/base.css
new file mode 100644
index 0000000..1d6bab6
--- /dev/null
+++ b/example/base.css
@@ -0,0 +1,792 @@
+/*
+    Jamfin - Another Jellyfin Theme aimed to please the masses.
+    Please note that this theme is still in development and may not be fully functional.
+    This theme is based on the Jellyfin default theme.
+    This theme is licensed under the MIT License.
+*/
+
+:root {
+    /* Colours */
+    --theme-background-colour: #101010;
+    --theme-sidebar-background-colour: #222222;
+    --theme-menu-background-colour: #3a3a3a80;
+    --theme-menu-shadow-colour: #fff3;
+    --theme-base-colour: #696969;
+    --theme-text-colour: #dbdbdb;
+    --theme-restart-colour: #da87287e;
+    --theme-shutdown-colour: #c21c1c9d;
+    --theme-progress-bar-colour: #cfcfcf;
+    --theme-progress-bar-background-colour: #2c2c2c;
+    --theme-progress-bar-transcoding-colour: #eb7e25;
+    --theme-chapter-marker-colour: #dbdbdb;
+    --theme-chapter-marker-watched-colour: #4a4a4a;
+
+    /* General Appearance */
+    --theme-roundness: .75rem;
+    --theme-blur: 16px;
+}
+
+/* Remove the Default Focus Outline */
+*:focus-visible {
+    outline: none;
+}
+
+/* Change Background Colours */
+.backgroundContainer,
+.mainDrawer,
+.drawer-open,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
+html {
+    background-color: var(--theme-background-colour);
+}
+
+/* Re-design the Header */
+
+.layout-desktop [dir="ltr"] .pageTitle {
+    margin-left: 1.2em;
+}
+
+[dir="ltr"] .sidebarHeader {
+    padding-left: 2em;
+    font-weight: bold;
+}
+
+[dir="ltr"] .navMenuOption {
+    padding: .9em 1.2em !important;
+}
+
+.pageTitleWithLogo {
+    height: 50px;
+}
+
+.skinHeader {
+    background-color: transparent;
+}
+
+.layout-desktop .headerLeft,
+.layout-desktop .headerRight {
+    margin-top: 1rem;
+}
+
+.layout-mobile .headerRight {
+    margin: 0 .29em;
+}
+
+.layout-mobile .libraryPage:not(.noSecondaryNavPage) {
+    padding-top: 8.5em !important;
+}
+
+.paper-icon-button-light > div {
+    width: 25px;
+    height: 25px;
+    transform: unset;
+}
+
+.skinHeader.semiTransparent {
+    background-color: unset;
+}
+
+.headerTabs,
+.headerRight,
+.dialog,
+.raised,
+.fab,
+.paper-icon-button-light:not(
+    .headerRight,
+    .headerRight .paper-icon-button-light
+),
+.osdHeader .headerLeft .paper-icon-button-light,
+.detailButton,
+.sliderBubble,
+.MuiDataGrid-root,
+.MuiMenu-list,
+.MuiButton-root,
+.toast.toastVisible,
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus,
+.MuiTabs-centered .MuiTab-root,
+#skipIntro .emby-button,
+.chapterThumbContainer,
+.chapterThumbTextContainer {
+    color: var(--theme-text-colour);
+    border-radius: var(--theme-roundness);
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    background-color: var(--theme-menu-background-colour);
+    backdrop-filter: blur(var(--theme-blur)) !important;
+    -webkit-backdrop-filter: blur(var(--theme-blur)) !important;
+    -moz-backdrop-filter: blur(var(--theme-blur)) !important;
+    -o-backdrop-filter: blur(var(--theme-blur)) !important;
+    -ms-backdrop-filter: blur(var(--theme-blur)) !important;
+}
+
+.dialogBackdrop {
+    background-color: #111;
+}
+
+.headerTabs .emby-tabs-slider {
+    display: flex;
+    align-items: center;
+}
+
+.headerTabs .emby-tab-button,
+.headerRight .paper-icon-button-light,
+.detailButton,
+.sessionCardButton,
+.guideOptions,
+.MuiTabs-centered .MuiTab-root {
+    padding: .556em !important;
+    margin: 0 .29em !important;
+    border-radius: var(--theme-roundness);
+}
+
+.layout-desktop .headerTabs,
+.layout-desktop .headerLeft,
+.layout-desktop .headerRight,
+.layout-desktop .emby-tabs-slider,
+.layout-desktop .raised {
+    height: 50px;
+}
+
+.layout-mobile .headerTabs,
+.layout-mobile .headerRight,
+.layout-mobile .emby-tabs-slider,
+.layout-mobile .raised {
+    height: 40px;
+}
+
+.layout-desktop .headerTabs {
+    margin-left: 250px;
+}
+
+@media (max-width: 1599px) {
+    .layout-desktop .sectionTabs {
+        width: auto;
+        align-self: center;
+        margin-top: -58px;
+    }
+
+    .layout-desktop .headerRight {
+        margin-right: .8em;
+    }
+
+    .layout-mobile .headerTabs {
+        margin: 20px auto;
+        width: auto;
+    }
+
+    .layout-mobile .pageTitleWithLogo {
+        height: 40px;
+    }
+}
+
+.layout-tv .sectionTabs {
+    width: unset;
+}
+
+@media (min-width: 100em) {
+    .layout-tv .headerTabs {
+        margin-top: unset;
+    }
+
+    .layout-mobile .headerTabs {
+        margin-top: -1.3em;
+    }
+}
+
+@media (max-width: 100em) {
+    .layout-tv .sectionTabs {
+        width: fit-content;
+        align-self: center;
+        font-size: 125%;
+    }
+}
+
+@media (max-width: 50em) {
+    .homeLibraryButton {
+    width: 100% !important;
+    }
+}
+
+/* Main Drawer */
+
+.layout-desktop,
+.touch-menu-la.transition {
+    transition: none;
+}
+
+.layout-mobile .mainDrawer {
+    padding-top: 1.2em;
+}
+
+.layout-desktop .mainDrawer-scrollContainer {
+    margin-top: 100px;
+}
+
+.navMenuOption,
+.navMenuOption-selected,
+.navMenuOption:hover,
+.MuiListItem-root,
+.MuiDrawer-paperAnchorLeft .MuiButtonBase-root {
+    border-radius: var(--theme-roundness) !important;
+    width: 80%;
+    margin: auto !important;
+}
+
+.navMenuOption:hover,
+.listItem:hover,
+.MuiButton-root:hover {
+    background-color: var(--theme-menu-shadow-colour);
+}
+
+.navMenuOption-selected,
+.Mui-selected {
+    background: var(--theme-menu-shadow-colour) !important;
+}
+
+/* Main Cards */
+
+.section0 .sectionTitle {
+    padding-top: 1em !important;
+}
+
+.layout-desktop .section0 .emby-scrollbuttons,
+.layout-desktop .section1 .emby-scrollbuttons {
+    padding-top: unset;
+}
+
+.cardContent:not(.dashboardSection .cardContent),
+.cardPadder:not(.dashboardSection .cardPadder),
+.blurhash-canvas,
+.dialog,
+.itemSelectionPanel {
+    border-radius: var(--theme-roundness) !important;
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour) !important;
+    transition: 0.2s;
+}
+
+.cardOverlayContainer {
+    border-radius: var(--theme-roundness) !important;
+    box-shadow: inset 0 2px var(--theme-menu-shadow-colour) !important;
+    transition: unset;
+}
+
+.layout-mobile .cardOverlayButton {
+    padding: unset;
+    margin: 5px;
+}
+
+.layout-mobile .cardOverlayButtonIcon {
+    background: unset !important;
+}
+
+.layout-desktop .cardOverlayContainer > .cardOverlayButton-br .cardOverlayButton {
+    padding: unset;
+    margin: 5px;
+}
+
+.defaultCardBackground1,
+.defaultCardBackground2,
+.defaultCardBackground3,
+.defaultCardBackground4,
+.defaultCardBackground5,
+.cardOverlayContainer > .cardOverlayFab-primary {
+    background-color: var(--theme-menu-background-colour);
+    font-size: 110%;
+}
+
+.button-submit:focus,
+.paper-icon-button-light:hover:not(:disabled, .btnDelete),
+.raised:hover,
+.emby-tab-button:hover,
+.detailButton:hover,
+.emby-tab-button.show-focus:focus,
+.paper-icon-button-light.show-focus:focus,
+.emby-button.show-focus:focus,
+.alphaPickerButton-tv:focus,
+#skipIntro .emby-button:hover,
+.multiSelectCheckboxOutline {
+    border-radius: var(--theme-roundness) !important;
+    transform: unset !important;
+    -webkit-transform: unset !important;
+    -moz-transform: unset !important;
+    -o-transform: unset !important;
+    -ms-transform: unset !important;
+    color: var(--theme-text-colour);
+    background-color: var(--theme-menu-shadow-colour) !important;
+}
+
+.layout-tv .itemDetailsGroup .emby-button.show-focus:focus {
+    padding: 5px 10px;
+}
+
+/* User Settings */
+
+.readOnlyContent h2,
+.sectionTitle,
+.dashboardSection h3,
+.MuiListSubheader-root {
+    font-weight: bold;
+}
+
+.listItem-border,
+.itemSelectionPanel {
+    border: unset;
+}
+
+.listItem {
+    padding-left: 1.2em !important;
+}
+
+.listItem:hover,
+.MuiButtonBase-root,
+.MuiButtonBase-root:hover,
+.emby-tab-button,
+progress {
+    border-radius: var(--theme-roundness);
+}
+
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox,
+.emby-select-withcolor,
+.emby-input,
+.emby-textarea {
+    background-color: var(--theme-menu-background-colour);
+    border-radius: var(--theme-roundness);
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    border: unset;
+    padding: 10px;
+}
+
+.emby-select[disabled] {
+    box-shadow: unset;
+}
+
+.trackSelections .selectContainer .detailTrackSelect {
+    padding: 0 10px;
+}
+
+/* Content Details */
+
+.layout-desktop .detailImageContainer .card {
+    width: 250px;
+    max-width: unset;
+    top: 1.5em;
+    left: 0;
+}
+
+/* Backwards Compatibility for versions before 10.11.0 */
+.layout-desktop .infoWrapper .detailImageContainer .card {
+    padding-top: 8.5em;
+}
+
+.layout-desktop .detailPagePrimaryContent {
+    padding-top: 135px;
+    padding-left: 300px;
+    min-height: 325px;
+}
+
+.layout-desktop .mainDetailButtons {
+    margin-top: 350px;
+    margin-left: 292px;
+    position: absolute;
+}
+
+.layout-mobile .mainDetailButtons {
+    display: flex;
+    flex-flow: wrap;
+    gap: 10px;
+}
+
+.mainDetailButtons .detailButton {
+    display: inline-flex;
+    align-items: center;
+    padding-left: 50px;
+    position: relative;
+}
+
+.btnPlay .detailButton-content:before {
+    content: "Play";
+}
+
+.btnReplay .detailButton-content:before {
+    content: "Replay";
+}
+
+.btnDownload .detailButton-content:before {
+    content: "Download";
+}
+
+.btnPlayTrailer .detailButton-content:before {
+    content: "Trailer";
+}
+
+.btnInstantMix .detailButton-content:before {
+    content: "Instant Mix";
+}
+
+.btnShuffle .detailButton-content:before {
+    content: "Shuffle";
+}
+
+.btnCancelSeriesTimer .detailButton-content:before {
+    content: "Cancel Programme";
+}
+
+.btnCancelTimer .detailButton-content:before {
+    content: "Stop Recording";
+}
+
+.btnPlaystate .detailButton-content:before {
+    content: "Watched";
+}
+
+.btnUserRating .detailButton-content:before {
+    content: "Favourite";
+}
+
+.btnSplitVersions .detailButton-content:before {
+    content: "Split Versions";
+}
+
+.btnMoreCommands .detailButton-content:before {
+    content: "Options";
+}
+
+.detailButton-content:before {
+    position: relative;
+    margin-left: 30px;
+}
+
+.detailButton-icon:before {
+    position: absolute;
+    top: 7px;
+    left: 7px;
+}
+
+.mainDetailButtons .material-icons {
+    height: unset;
+}
+
+.layout-desktop .detailPagePrimaryContainer,
+.layout-desktop .detailPageContent {
+    padding-left: 3.3% !important;
+}
+
+.detailRibbon {
+    background: unset;
+    padding-left: 0 !important;
+}
+
+.layout-desktop .infoWrapper {
+    padding-top: 226px;
+    padding-left: 300px;
+}
+
+.itemBackdrop::before {
+    content: '';
+    position: absolute;
+    top: 0;        /* cover the full element */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(180deg, transparent 5%, var(--theme-background-colour));
+    pointer-events: none; /* ensures it's non-interactive */
+    z-index: 1; /* sits on top of the image */
+}
+
+.layout-mobile .itemBackdrop {
+    margin-top: unset;
+    -webkit-animation: backdrop-fadein .8s ease-in normal both;
+    animation: backdrop-fadein .8s ease-in normal both;
+}
+
+.layout-mobile .detailImageContainer .card {
+    filter: unset;
+    -webkit-filter: unset;
+    -moz-filter: unset;
+    -o-filter: unset;
+    -ms-filter: unset;
+    padding-left: 2em;
+}
+
+.layout-desktop .detailLogo {
+    left: 3%;
+    right: unset;
+    z-index: 1;
+}
+
+.layout-desktop .backgroundContainer.withBackdrop,
+.MuiPaper-root,
+.MuiTabs-indicator {
+    background-color: unset;
+    background-image: unset;
+    box-shadow: unset;
+}
+
+.layout-desktop .backdropImage {
+    filter: blur(5px);
+    -webkit-filter: blur(5px);
+    -moz-filter: blur(5px);
+    -o-filter: blur(5px);
+    -ms-filter: blur(5px);
+}
+
+.darkenContent {
+    backdrop-filter: blur(5px) brightness(0.75);
+    -webkit-backdrop-filter: blur(5px) brightness(0.75);
+    -moz-backdrop-filter: blur(5px) brightness(0.75);
+    -o-backdrop-filter: blur(5px) brightness(0.75);
+    -ms-backdrop-filter: blur(5px) brightness(0.75);
+    background: -webkit-linear-gradient(180deg, transparent, var(--theme-background-colour));
+    background: -moz-linear-gradient(180deg, transparent, var(--theme-background-colour));
+    background: -o-linear-gradient(180deg, transparent, var(--theme-background-colour));
+    background: -ms-linear-gradient(180deg, transparent, var(--theme-background-colour));
+    background: linear-gradient(180deg, transparent, var(--theme-background-colour));
+}
+
+.itemsContainer-tv {
+    margin-left: 10px;
+}
+
+/* Admin Settings */
+
+#btnRestartServer {
+    box-shadow: inset 0 1px var(--theme-restart-colour) !important;
+}
+
+#btnRestartServer:hover,
+.notifications,
+.MuiChip-filledInfo {
+    color: var(--theme-text-colour) !important;
+    background-color: var(--theme-restart-colour) !important;
+}
+
+#btnShutdown,
+.btnDelete {
+    box-shadow: inset 0 1px var(--theme-shutdown-colour) !important;
+}
+
+#btnShutdown:hover,
+.btnDelete:hover,
+.notification_important,
+.MuiChip-filledError {
+    color: var(--theme-text-colour) !important;
+    background-color: var(--theme-shutdown-colour) !important;
+}
+
+.listItemIcon:not(.listItemIcon-transparent) {
+    border-radius: var(--theme-roundness);
+}
+
+.sessionCardButtons {
+    margin: .29em 0;
+}
+
+.dashboardSection .cardContent {
+    border-top-left-radius: var(--theme-roundness);
+    border-top-right-radius: var(--theme-roundness);
+}
+
+div[data-role="controlgroup"] a[data-role="button"]:first-child {
+    border-bottom-left-radius: var(--theme-roundness);
+    border-top-left-radius: var(--theme-roundness);
+}
+
+div[data-role="controlgroup"] a[data-role="button"]:last-child {
+    border-bottom-right-radius: var(--theme-roundness);
+    border-top-right-radius: var(--theme-roundness);
+}
+
+.dashboardColumn {
+    flex-shrink: inherit;
+}
+
+/* Base Colours */
+
+.selectLabelFocused,
+.textareaLabelFocused,
+.inputLabelFocused,
+.mdl-slider,
+.metadataSidebarIcon,
+.button-link,
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus,
+#divRunningTasks span,
+.MuiAlert-icon,
+.listItemBodyText span {
+    color: var(--theme-text-colour) !important;
+}
+
+.emby-checkbox:checked + span + .checkboxOutline,
+.listItemIcon:not(
+    .listItemIcon-transparent,
+    .notification_important,
+    .notifications
+),
+.guide-channelHeaderCell:focus,
+.programCell:focus,
+.emby-button.show-focus:focus,
+::selection,
+div[data-role="controlgroup"] a.ui-btn-active,
+.MuiAvatar-root,
+.selectionCommandsPanel {
+    background-color: var(--theme-base-colour) !important;
+}
+
+.emby-checkbox + span + .checkboxOutline,
+.emby-checkbox:checked + span + .checkboxOutline,
+.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
+.mdl-spinner__layer-1,
+.mdl-spinner__layer-2,
+.mdl-spinner__layer-3,
+.mdl-spinner__layer-4 {
+    border-color: var(--theme-base-colour) !important;
+}
+
+.mdl-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    background: transparent;
+}
+
+.mdl-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 0;
+    height: 0;
+    background: transparent;
+    cursor: pointer;
+}
+
+.mdl-slider::-moz-range-thumb {
+    width: 0;
+    height: 0;
+    background: transparent;
+    cursor: pointer;
+}
+
+.mdl-slider::-ms-thumb {
+    width: 0;
+    height: 0;
+    background: transparent;
+    cursor: pointer;
+}
+
+.mdl-slider-background-flex,
+.mdl-slider-background-lower,
+.mdl-slider-background-upper {
+    border-radius: var(--theme-roundness);
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    height: 10px;
+}
+
+/* Chapter Markers */
+.sliderMarkerContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 10px;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.sliderMarker {
+    position: absolute;
+    top: 0;
+    width: 2px;
+    height: 10px;
+    background-color: var(--theme-chapter-marker-colour);
+    opacity: 0.6;
+    border-radius: 1px;
+    pointer-events: auto;
+    cursor: pointer;
+    transition: opacity 0.2s ease, width 0.2s ease, background-color 0.2s ease;
+}
+
+.sliderMarker.unwatched {
+    background-color: var(--theme-chapter-marker-colour);
+}
+
+.sliderMarker.watched {
+    background-color: var(--theme-chapter-marker-watched-colour);
+}
+
+.mdl-slider-background-upper {
+    margin-left:  -3px;
+}
+
+.mdl-slider-background-flex-container {
+    top: 5px;
+}
+
+.innerCardFooter .itemProgressBarForeground,
+.playbackProgress > div,
+.mdl-slider-background-lower,
+.iconOsdProgressInner,
+.taskProgressInner,
+progress {
+    background-color: var(--theme-progress-bar-colour) !important;
+}
+
+/* These need to remain separate for browser compatibility */
+progress::-moz-progress-bar {
+    background-color: var(--theme-progress-bar-colour);
+}
+progress::-webkit-progress-bar {
+    background-color: var(--theme-progress-bar-colour);
+}
+progress::-ms-thumb {
+    background-color: var(--theme-progress-bar-colour);
+}
+
+.transcodingProgress > div {
+    background-color: var(--theme-progress-bar-transcoding-colour) !important;
+}
+
+.innerCardFooter .itemProgressBar,
+.backgroundProgress > div,
+.mdl-slider-background-flex,
+.taskProgressOuter,
+progress {
+    background-color: var(--theme-progress-bar-background-colour) !important;
+}
+
+.layout-desktop .dashboardDocument .content-primary:not(.layout-desktop #dashboardPage .content-primary) {
+    padding-left: 2.5em;
+    padding-right: 2.5em;
+}
+
+[dir="ltr"] .formDialogHeaderTitle:first-child {
+    margin-left: unset;
+}
+
+/* Login Form */
+
+#loginPage {
+    background-color: var(--theme-menu-background-colour);
+    border-radius: var(--theme-roundness);
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    padding: unset !important;
+    max-width: 750px;
+    max-height: 500px;
+    margin: 150px auto 0;
+}
+
+.manualLoginForm .raised.button-submit.block.emby-button {
+    margin-bottom: -3px;
+}
+
+.chapterThumbTextContainer {
+    width: fit-content;
+    margin: auto;
+}
+
+.chapterThumbText {
+    width: fit-content;
+}
diff --git a/example/complete.css b/example/complete.css
new file mode 100644
index 0000000..63a2841
--- /dev/null
+++ b/example/complete.css
@@ -0,0 +1,16 @@
+/*
+    The complete pack of the Jamfin theme. This file includes all the modules and the main theme.
+    If you wish to use only some of the modules, you can import them individually.
+    You can grab the base theme by changing jamfin.css to base.css in the first line.
+*/
+
+@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/base.css");
+@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/static-sidebar.css");
+@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/central-libraries-small.css");
+@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/change-logo.css");
+@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/count-indicators.css");
+@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/forgot-password.css");
+@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/hide-my-media.css");
+@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/moving-cards.css");
+@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/smaller-cast.css");
+@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/floating-progress.css");
diff --git a/example/modules/README.md b/example/modules/README.md
new file mode 100644
index 0000000..2acaafa
--- /dev/null
+++ b/example/modules/README.md
@@ -0,0 +1,34 @@
+<div align="center">
+<img src="https://github.com/JamsRepos/Jamfin/blob/main/assets/logo.png?raw=true" alt="Logo" width="125"/>
+
+## 🧩 Modules
+
+Here you can find our assortment of modules. These are included within the complete pack of the theme however can be used in conjunction with the base theme or any other theme of your choosing.
+
+## 🔌 Installation
+
+The general format to install a module is as followed, you will need to replace the `<name>` with the file name of the module you wish to install.
+
+<div align="left">
+
+```css
+@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/<name>.css");
+```
+
+</div>
+
+#### ❓Where do I install it?
+
+Locate the `Custom CSS code` option under your General settings in the admin panel and simply paste one of the lines above within the box.
+
+If you wish to just install this for yourself only, you can do so by going to your users Display settings and copy the following settings.
+
+- [x] Disable server-provided custom CSS code
+
+Then enter the theme into the `Custom CSS code` option and save your settings.
+
+## 🖌️ Customisation
+
+Each module has it's own individual customisation parameters. Please read the respective README by going into each modules folder.
+
+</div>
\ No newline at end of file
diff --git a/example/modules/central-libraries-small.css b/example/modules/central-libraries-small.css
new file mode 100644
index 0000000..6bf1878
--- /dev/null
+++ b/example/modules/central-libraries-small.css
@@ -0,0 +1,10 @@
+/*
+    This module will change "My Media (small)" to be centered on the homepage.
+    This is useful to make the homepage look more balanced.
+    This can be used as a standalone module.
+*/
+
+#indexPage .section0 .itemsContainer.padded-left.padded-right {
+    justify-content: center !important;
+    padding-top: 15px !important;
+}
diff --git a/example/modules/change-logo.css b/example/modules/change-logo.css
new file mode 100644
index 0000000..3bdda66
--- /dev/null
+++ b/example/modules/change-logo.css
@@ -0,0 +1,14 @@
+/*
+    This module will change the Jellyfin logo to a custom one.
+    This allows you to white-label your Jellyfin instance slightly.
+    This can be used as a standalone module.
+*/
+
+:root {
+    --logo-url: url('https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/assets/banner.png');
+}
+
+.pageTitleWithDefaultLogo,
+.spashLogo {
+    background-image: var(--logo-url) !important;
+}
diff --git a/example/modules/count-indicators.css b/example/modules/count-indicators.css
new file mode 100644
index 0000000..910338a
--- /dev/null
+++ b/example/modules/count-indicators.css
@@ -0,0 +1,26 @@
+/*
+    This module change the color of the count indicators.
+    This is a simple and effective way to make your Jellyfin instance look more modern.
+    This can be used as a standalone module.
+*/
+
+:root {
+    --show-count-indicators: flex; /* none to hide */
+    --count-indicator-colour: rgba(200, 200, 200, 0.75);
+    --played-indicator-colour: rgba(32, 139, 36, 0.75);
+}
+
+.countIndicator {
+    display: var(--show-count-indicators);
+}
+
+.countIndicator,
+.fullSyncIndicator,
+.mediaSourceIndicator,
+.playedIndicator {
+    background: var(--count-indicator-colour);
+}
+
+.playedIndicator {
+    background: var(--played-indicator-colour);
+}
\ No newline at end of file
diff --git a/example/modules/floating-progress.css b/example/modules/floating-progress.css
new file mode 100644
index 0000000..2bd45b5
--- /dev/null
+++ b/example/modules/floating-progress.css
@@ -0,0 +1,45 @@
+/*
+    This module will make progress bars float from the bottom of the card.
+    This is useful if you wish to make the progress bar more visible.
+    This can be used as a standalone module.
+*/
+
+:root {
+    --floating-progress-roundness: .75rem;
+    --floating-progress-height: 10px;
+}
+
+.sessionNowPlayingDetails {
+    padding-bottom: 10px;
+}
+
+.fullInnerCardFooter,
+.activeSession .backgroundProgress,
+.activeSession .playbackProgress,
+.activeSession .transcodingProgress {
+    width: 95%;
+    bottom: 10px;
+    margin: 0 auto;
+    height: var(--floating-progress-height);
+    border-radius: var(--floating-progress-roundness) !important;
+    -webkit-border-radius: var(--floating-progress-roundness) !important;
+    -moz-border-radius: var(--floating-progress-roundness) !important;
+}
+
+.itemProgressBar {
+    height: var(--floating-progress-height);
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    -webkit-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    -moz-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+}
+
+.playbackProgress > div,
+.backgroundProgress > div,
+.transcodingProgress > div {
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    -webkit-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    -moz-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    border-radius: var(--floating-progress-roundness);
+    -webkit-border-radius: var(--floating-progress-roundness);
+    -moz-border-radius: var(--floating-progress-roundness);
+}
\ No newline at end of file
diff --git a/example/modules/forgot-password.css b/example/modules/forgot-password.css
new file mode 100644
index 0000000..6a4fe24
--- /dev/null
+++ b/example/modules/forgot-password.css
@@ -0,0 +1,14 @@
+/*
+    This module will remove the "Forgot Password" button from the login page.
+    This is useful if you have a third-party user management system.
+    This can be used as a standalone module.
+*/
+
+#btnResetPassword,
+.btnForgotPassword {
+    display: none !important;
+}
+
+#loginPage {
+    max-height: 450px;
+}
\ No newline at end of file
diff --git a/example/modules/hide-my-media.css b/example/modules/hide-my-media.css
new file mode 100644
index 0000000..d468783
--- /dev/null
+++ b/example/modules/hide-my-media.css
@@ -0,0 +1,17 @@
+/*
+    This module will hide the "My Media" section from the Jellyfin homepage.
+    This is useful if you want an even more minimalistic homepage.
+    This can be used as a standalone module.
+*/
+
+#indexPage .section0 .sectionTitle {
+    display: none;
+}
+
+#indexPage .section0 {
+    padding-top: 1em;
+}
+
+#indexPage .verticalSection.section0 {
+    padding-top: 3em;
+}
\ No newline at end of file
diff --git a/example/modules/moving-cards.css b/example/modules/moving-cards.css
new file mode 100644
index 0000000..1548911
--- /dev/null
+++ b/example/modules/moving-cards.css
@@ -0,0 +1,13 @@
+/*
+    This module will make your Jellyfin cards lift up slightly when hovered over.
+    This is a simple and effective way to make your Jellyfin instance look more modern.
+    This can be used as a standalone module.
+*/
+
+.cardBox:hover {
+    transform: translateY(-2.5px);
+    -webkit-transform: translateY(-2.5px);
+    -moz-transform: translateY(-2.5px);
+    -ms-transform: translateY(-2.5px);
+    -o-transform: translateY(-2.5px);
+}
\ No newline at end of file
diff --git a/example/modules/smaller-cast.css b/example/modules/smaller-cast.css
new file mode 100644
index 0000000..44d7189
--- /dev/null
+++ b/example/modules/smaller-cast.css
@@ -0,0 +1,82 @@
+/*
+    This module will make the cast cards smaller when viewing content details.
+    This is useful if you want a more compact view of the cast.
+    This can be used as a standalone module.
+    Original Code: https://jellyfin.org/docs/general/clients/css-customization/#stylized-and-smaller-cast--crew-info
+*/
+
+#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata {
+    width: 4.2cm;
+    font-size: 90%;
+}
+
+#castContent .card.overflowPortraitCard.personCard.card-withuserdata {
+    width: 4.2cm;
+    font-size: 90%;
+}
+
+#castContent .cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy {
+    background-size: cover;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+}
+
+#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.cardContent-shadow.itemAction {
+    background-size: cover;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+}
+
+#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardContent-shadow.itemAction {
+    background-size: cover;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+}
+
+#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itemAction {
+    background-size: cover;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+}
+
+#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground4.cardContent.cardContent-shadow.itemAction {
+    background-size: cover;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+}
+
+#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground5.cardContent.cardContent-shadow.itemAction {
+    background-size: cover;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+}
+
+#castContent .cardScalable {
+    width: 3.8cm;
+    height: 3.8cm;
+}
+
+#castContent .cardOverlayButton-br {
+    bottom: 4%;
+    right: 15%;
+    width: 70%;
+}
+
+#castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {
+    margin: auto;
+}
+
+#castContent .cardBox:not(.visualCardBox) .cardPadder {
+    background-color: unset;
+}
+
+#castContent .cardBox:not(.visualCardBox) .cardPadder,
+#castContent .cardContent-shadow {
+    box-shadow: unset;
+}
\ No newline at end of file
diff --git a/example/modules/static-sidebar.css b/example/modules/static-sidebar.css
new file mode 100644
index 0000000..3cbcd38
--- /dev/null
+++ b/example/modules/static-sidebar.css
@@ -0,0 +1,34 @@
+/*
+    This module will allow you to make the sidebar static, meaning it will not scroll with the rest of the page.
+    This is a simple and effective way to make your Jellyfin instance look more modern.
+    This can be used as a standalone module.
+*/
+
+.layout-desktop .mainDrawer,
+.MuiDrawer-paperAnchorLeft {
+    left: 0 !important;
+    top: 0;
+    width: 250px !important;
+    background-color: var(--theme-sidebar-background-colour) !important;
+    z-index: 100;
+}
+
+.layout-desktop .mainDrawerButton,
+.layout-desktop .headerHomeButton {
+    display: none;
+}
+
+.layout-desktop .libraryPage:not(#editItemMetadataPage) {
+    margin-left: 250px;
+    width: calc(100% - 250px);
+}
+
+.layout-desktop #slides-container {
+    margin-left: 320px;
+    width: calc(100% - 385px);
+}
+
+.layout-desktop .hide-scroll .mainDrawer,
+.layout-desktop .hideMainDrawer .mainDrawer {
+    display: none;
+}
diff --git a/manifest.json b/manifest.json
index 166a027..a1689e8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -3,7 +3,7 @@
   "description": "Modern CSS theme for Jellyfin with custom fonts, smooth animations and responsive design",
   "author": "Oleg",
   "repository": "https://git.tolchin.pro/Oleg/Tolfin",
-  "url": "https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/tolfin.css",
+  "url": "https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/complete.css",
   "target": "jellyfin",
   "categories": ["theme", "css"]
 }
diff --git a/theme/base.css b/theme/base.css
new file mode 100644
index 0000000..b7024f8
--- /dev/null
+++ b/theme/base.css
@@ -0,0 +1,796 @@
+/*
+    ========================================
+    TOLFIN - Базовая тема для Jellyfin
+    ========================================
+    Модернизированная тема с кастомными шрифтами,
+    плавными анимациями и адаптивным дизайном.
+*/
+
+/* ========================================
+   ПЕРЕМЕННЫЕ ТЕМЫ
+   ======================================== */
+:root {
+    /* Цветовая палитра */
+    --theme-background-colour: #101010;
+    --theme-sidebar-background-colour: #222222;
+    --theme-menu-background-colour: #3a3a3a80;
+    --theme-menu-shadow-colour: #fff3;
+    --theme-base-colour: #696969;
+    --theme-text-colour: #dbdbdb;
+    --theme-restart-colour: #da87287e;
+    --theme-shutdown-colour: #c21c1c9d;
+    --theme-progress-bar-colour: #cfcfcf;
+    --theme-progress-bar-background-colour: #2c2c2c;
+    --theme-progress-bar-transcoding-colour: #eb7e25;
+    --theme-chapter-marker-colour: #dbdbdb;
+    --theme-chapter-marker-watched-colour: #4a4a4a;
+
+    /* Общие параметры внешнего вида */
+    --theme-roundness: .75rem;
+    --theme-blur: 16px;
+}
+
+/* Remove the Default Focus Outline */
+*:focus-visible {
+    outline: none;
+}
+
+/* Change Background Colours */
+.backgroundContainer,
+.mainDrawer,
+.drawer-open,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
+html {
+    background-color: var(--theme-background-colour);
+}
+
+/* Re-design the Header */
+
+.layout-desktop [dir="ltr"] .pageTitle {
+    margin-left: 1.2em;
+}
+
+[dir="ltr"] .sidebarHeader {
+    padding-left: 2em;
+    font-weight: bold;
+}
+
+[dir="ltr"] .navMenuOption {
+    padding: .9em 1.2em !important;
+}
+
+.pageTitleWithLogo {
+    height: 50px;
+}
+
+.skinHeader {
+    background-color: transparent;
+}
+
+.layout-desktop .headerLeft,
+.layout-desktop .headerRight {
+    margin-top: 1rem;
+}
+
+.layout-mobile .headerRight {
+    margin: 0 .29em;
+}
+
+.layout-mobile .libraryPage:not(.noSecondaryNavPage) {
+    padding-top: 8.5em !important;
+}
+
+.paper-icon-button-light > div {
+    width: 25px;
+    height: 25px;
+    transform: unset;
+}
+
+.skinHeader.semiTransparent {
+    background-color: unset;
+}
+
+.headerTabs,
+.headerRight,
+.dialog,
+.raised,
+.fab,
+.paper-icon-button-light:not(
+    .headerRight,
+    .headerRight .paper-icon-button-light
+),
+.osdHeader .headerLeft .paper-icon-button-light,
+.detailButton,
+.sliderBubble,
+.MuiDataGrid-root,
+.MuiMenu-list,
+.MuiButton-root,
+.toast.toastVisible,
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus,
+.MuiTabs-centered .MuiTab-root,
+#skipIntro .emby-button,
+.chapterThumbContainer,
+.chapterThumbTextContainer {
+    color: var(--theme-text-colour);
+    border-radius: var(--theme-roundness);
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    background-color: var(--theme-menu-background-colour);
+    backdrop-filter: blur(var(--theme-blur)) !important;
+    -webkit-backdrop-filter: blur(var(--theme-blur)) !important;
+    -moz-backdrop-filter: blur(var(--theme-blur)) !important;
+    -o-backdrop-filter: blur(var(--theme-blur)) !important;
+    -ms-backdrop-filter: blur(var(--theme-blur)) !important;
+}
+
+.dialogBackdrop {
+    background-color: #111;
+}
+
+.headerTabs .emby-tabs-slider {
+    display: flex;
+    align-items: center;
+}
+
+.headerTabs .emby-tab-button,
+.headerRight .paper-icon-button-light,
+.detailButton,
+.sessionCardButton,
+.guideOptions,
+.MuiTabs-centered .MuiTab-root {
+    padding: .556em !important;
+    margin: 0 .29em !important;
+    border-radius: var(--theme-roundness);
+}
+
+.layout-desktop .headerTabs,
+.layout-desktop .headerLeft,
+.layout-desktop .headerRight,
+.layout-desktop .emby-tabs-slider,
+.layout-desktop .raised {
+    height: 50px;
+}
+
+.layout-mobile .headerTabs,
+.layout-mobile .headerRight,
+.layout-mobile .emby-tabs-slider,
+.layout-mobile .raised {
+    height: 40px;
+}
+
+.layout-desktop .headerTabs {
+    margin-left: 250px;
+}
+
+@media (max-width: 1599px) {
+    .layout-desktop .sectionTabs {
+        width: auto;
+        align-self: center;
+        margin-top: -58px;
+    }
+
+    .layout-desktop .headerRight {
+        margin-right: .8em;
+    }
+
+    .layout-mobile .headerTabs {
+        margin: 20px auto;
+        width: auto;
+    }
+
+    .layout-mobile .pageTitleWithLogo {
+        height: 40px;
+    }
+}
+
+.layout-tv .sectionTabs {
+    width: unset;
+}
+
+@media (min-width: 100em) {
+    .layout-tv .headerTabs {
+        margin-top: unset;
+    }
+
+    .layout-mobile .headerTabs {
+        margin-top: -1.3em;
+    }
+}
+
+@media (max-width: 100em) {
+    .layout-tv .sectionTabs {
+        width: fit-content;
+        align-self: center;
+        font-size: 125%;
+    }
+}
+
+@media (max-width: 50em) {
+    .homeLibraryButton {
+    width: 100% !important;
+    }
+}
+
+/* Main Drawer */
+
+.layout-desktop,
+.touch-menu-la.transition {
+    transition: none;
+}
+
+.layout-mobile .mainDrawer {
+    padding-top: 1.2em;
+}
+
+.layout-desktop .mainDrawer-scrollContainer {
+    margin-top: 100px;
+}
+
+.navMenuOption,
+.navMenuOption-selected,
+.navMenuOption:hover,
+.MuiListItem-root,
+.MuiDrawer-paperAnchorLeft .MuiButtonBase-root {
+    border-radius: var(--theme-roundness) !important;
+    width: 80%;
+    margin: auto !important;
+}
+
+.navMenuOption:hover,
+.listItem:hover,
+.MuiButton-root:hover {
+    background-color: var(--theme-menu-shadow-colour);
+}
+
+.navMenuOption-selected,
+.Mui-selected {
+    background: var(--theme-menu-shadow-colour) !important;
+}
+
+/* Main Cards */
+
+.section0 .sectionTitle {
+    padding-top: 1em !important;
+}
+
+.layout-desktop .section0 .emby-scrollbuttons,
+.layout-desktop .section1 .emby-scrollbuttons {
+    padding-top: unset;
+}
+
+.cardContent:not(.dashboardSection .cardContent),
+.cardPadder:not(.dashboardSection .cardPadder),
+.blurhash-canvas,
+.dialog,
+.itemSelectionPanel {
+    border-radius: var(--theme-roundness) !important;
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour) !important;
+    transition: 0.2s;
+}
+
+.cardOverlayContainer {
+    border-radius: var(--theme-roundness) !important;
+    box-shadow: inset 0 2px var(--theme-menu-shadow-colour) !important;
+    transition: unset;
+}
+
+.layout-mobile .cardOverlayButton {
+    padding: unset;
+    margin: 5px;
+}
+
+.layout-mobile .cardOverlayButtonIcon {
+    background: unset !important;
+}
+
+.layout-desktop .cardOverlayContainer > .cardOverlayButton-br .cardOverlayButton {
+    padding: unset;
+    margin: 5px;
+}
+
+.defaultCardBackground1,
+.defaultCardBackground2,
+.defaultCardBackground3,
+.defaultCardBackground4,
+.defaultCardBackground5,
+.cardOverlayContainer > .cardOverlayFab-primary {
+    background-color: var(--theme-menu-background-colour);
+    font-size: 110%;
+}
+
+.button-submit:focus,
+.paper-icon-button-light:hover:not(:disabled, .btnDelete),
+.raised:hover,
+.emby-tab-button:hover,
+.detailButton:hover,
+.emby-tab-button.show-focus:focus,
+.paper-icon-button-light.show-focus:focus,
+.emby-button.show-focus:focus,
+.alphaPickerButton-tv:focus,
+#skipIntro .emby-button:hover,
+.multiSelectCheckboxOutline {
+    border-radius: var(--theme-roundness) !important;
+    transform: unset !important;
+    -webkit-transform: unset !important;
+    -moz-transform: unset !important;
+    -o-transform: unset !important;
+    -ms-transform: unset !important;
+    color: var(--theme-text-colour);
+    background-color: var(--theme-menu-shadow-colour) !important;
+}
+
+.layout-tv .itemDetailsGroup .emby-button.show-focus:focus {
+    padding: 5px 10px;
+}
+
+/* User Settings */
+
+.readOnlyContent h2,
+.sectionTitle,
+.dashboardSection h3,
+.MuiListSubheader-root {
+    font-weight: bold;
+}
+
+.listItem-border,
+.itemSelectionPanel {
+    border: unset;
+}
+
+.listItem {
+    padding-left: 1.2em !important;
+}
+
+.listItem:hover,
+.MuiButtonBase-root,
+.MuiButtonBase-root:hover,
+.emby-tab-button,
+progress {
+    border-radius: var(--theme-roundness);
+}
+
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox,
+.emby-select-withcolor,
+.emby-input,
+.emby-textarea {
+    background-color: var(--theme-menu-background-colour);
+    border-radius: var(--theme-roundness);
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    border: unset;
+    padding: 10px;
+}
+
+.emby-select[disabled] {
+    box-shadow: unset;
+}
+
+.trackSelections .selectContainer .detailTrackSelect {
+    padding: 0 10px;
+}
+
+/* Content Details */
+
+.layout-desktop .detailImageContainer .card {
+    width: 250px;
+    max-width: unset;
+    top: 1.5em;
+    left: 0;
+}
+
+/* Backwards Compatibility for versions before 10.11.0 */
+.layout-desktop .infoWrapper .detailImageContainer .card {
+    padding-top: 8.5em;
+}
+
+.layout-desktop .detailPagePrimaryContent {
+    padding-top: 135px;
+    padding-left: 300px;
+    min-height: 325px;
+}
+
+.layout-desktop .mainDetailButtons {
+    margin-top: 350px;
+    margin-left: 292px;
+    position: absolute;
+}
+
+.layout-mobile .mainDetailButtons {
+    display: flex;
+    flex-flow: wrap;
+    gap: 10px;
+}
+
+.mainDetailButtons .detailButton {
+    display: inline-flex;
+    align-items: center;
+    padding-left: 50px;
+    position: relative;
+}
+
+.btnPlay .detailButton-content:before {
+    content: "Play";
+}
+
+.btnReplay .detailButton-content:before {
+    content: "Replay";
+}
+
+.btnDownload .detailButton-content:before {
+    content: "Download";
+}
+
+.btnPlayTrailer .detailButton-content:before {
+    content: "Trailer";
+}
+
+.btnInstantMix .detailButton-content:before {
+    content: "Instant Mix";
+}
+
+.btnShuffle .detailButton-content:before {
+    content: "Shuffle";
+}
+
+.btnCancelSeriesTimer .detailButton-content:before {
+    content: "Cancel Programme";
+}
+
+.btnCancelTimer .detailButton-content:before {
+    content: "Stop Recording";
+}
+
+.btnPlaystate .detailButton-content:before {
+    content: "Watched";
+}
+
+.btnUserRating .detailButton-content:before {
+    content: "Favourite";
+}
+
+.btnSplitVersions .detailButton-content:before {
+    content: "Split Versions";
+}
+
+.btnMoreCommands .detailButton-content:before {
+    content: "Options";
+}
+
+.detailButton-content:before {
+    position: relative;
+    margin-left: 30px;
+}
+
+.detailButton-icon:before {
+    position: absolute;
+    top: 7px;
+    left: 7px;
+}
+
+.mainDetailButtons .material-icons {
+    height: unset;
+}
+
+.layout-desktop .detailPagePrimaryContainer,
+.layout-desktop .detailPageContent {
+    padding-left: 3.3% !important;
+}
+
+.detailRibbon {
+    background: unset;
+    padding-left: 0 !important;
+}
+
+.layout-desktop .infoWrapper {
+    padding-top: 226px;
+    padding-left: 300px;
+}
+
+.itemBackdrop::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(180deg, transparent 5%, var(--theme-background-colour));
+    pointer-events: none;
+    z-index: 1;
+}
+
+.layout-mobile .itemBackdrop {
+    margin-top: unset;
+    -webkit-animation: backdrop-fadein .8s ease-in normal both;
+    animation: backdrop-fadein .8s ease-in normal both;
+}
+
+.layout-mobile .detailImageContainer .card {
+    filter: unset;
+    -webkit-filter: unset;
+    -moz-filter: unset;
+    -o-filter: unset;
+    -ms-filter: unset;
+    padding-left: 2em;
+}
+
+.layout-desktop .detailLogo {
+    left: 3%;
+    right: unset;
+    z-index: 1;
+}
+
+.layout-desktop .backgroundContainer.withBackdrop,
+.MuiPaper-root,
+.MuiTabs-indicator {
+    background-color: unset;
+    background-image: unset;
+    box-shadow: unset;
+}
+
+.layout-desktop .backdropImage {
+    filter: blur(5px);
+    -webkit-filter: blur(5px);
+    -moz-filter: blur(5px);
+    -o-filter: blur(5px);
+    -ms-filter: blur(5px);
+}
+
+.darkenContent {
+    backdrop-filter: blur(5px) brightness(0.75);
+    -webkit-backdrop-filter: blur(5px) brightness(0.75);
+    -moz-backdrop-filter: blur(5px) brightness(0.75);
+    -o-backdrop-filter: blur(5px) brightness(0.75);
+    -ms-backdrop-filter: blur(5px) brightness(0.75);
+    background: -webkit-linear-gradient(180deg, transparent, var(--theme-background-colour));
+    background: -moz-linear-gradient(180deg, transparent, var(--theme-background-colour));
+    background: -o-linear-gradient(180deg, transparent, var(--theme-background-colour));
+    background: -ms-linear-gradient(180deg, transparent, var(--theme-background-colour));
+    background: linear-gradient(180deg, transparent, var(--theme-background-colour));
+}
+
+.itemsContainer-tv {
+    margin-left: 10px;
+}
+
+/* Admin Settings */
+
+#btnRestartServer {
+    box-shadow: inset 0 1px var(--theme-restart-colour) !important;
+}
+
+#btnRestartServer:hover,
+.notifications,
+.MuiChip-filledInfo {
+    color: var(--theme-text-colour) !important;
+    background-color: var(--theme-restart-colour) !important;
+}
+
+#btnShutdown,
+.btnDelete {
+    box-shadow: inset 0 1px var(--theme-shutdown-colour) !important;
+}
+
+#btnShutdown:hover,
+.btnDelete:hover,
+.notification_important,
+.MuiChip-filledError {
+    color: var(--theme-text-colour) !important;
+    background-color: var(--theme-shutdown-colour) !important;
+}
+
+.listItemIcon:not(.listItemIcon-transparent) {
+    border-radius: var(--theme-roundness);
+}
+
+.sessionCardButtons {
+    margin: .29em 0;
+}
+
+.dashboardSection .cardContent {
+    border-top-left-radius: var(--theme-roundness);
+    border-top-right-radius: var(--theme-roundness);
+}
+
+div[data-role="controlgroup"] a[data-role="button"]:first-child {
+    border-bottom-left-radius: var(--theme-roundness);
+    border-top-left-radius: var(--theme-roundness);
+}
+
+div[data-role="controlgroup"] a[data-role="button"]:last-child {
+    border-bottom-right-radius: var(--theme-roundness);
+    border-top-right-radius: var(--theme-roundness);
+}
+
+.dashboardColumn {
+    flex-shrink: inherit;
+}
+
+/* Base Colours */
+
+.selectLabelFocused,
+.textareaLabelFocused,
+.inputLabelFocused,
+.mdl-slider,
+.metadataSidebarIcon,
+.button-link,
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus,
+#divRunningTasks span,
+.MuiAlert-icon,
+.listItemBodyText span {
+    color: var(--theme-text-colour) !important;
+}
+
+.emby-checkbox:checked + span + .checkboxOutline,
+.listItemIcon:not(
+    .listItemIcon-transparent,
+    .notification_important,
+    .notifications
+),
+.guide-channelHeaderCell:focus,
+.programCell:focus,
+.emby-button.show-focus:focus,
+::selection,
+div[data-role="controlgroup"] a.ui-btn-active,
+.MuiAvatar-root,
+.selectionCommandsPanel {
+    background-color: var(--theme-base-colour) !important;
+}
+
+.emby-checkbox + span + .checkboxOutline,
+.emby-checkbox:checked + span + .checkboxOutline,
+.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
+.mdl-spinner__layer-1,
+.mdl-spinner__layer-2,
+.mdl-spinner__layer-3,
+.mdl-spinner__layer-4 {
+    border-color: var(--theme-base-colour) !important;
+}
+
+.mdl-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    background: transparent;
+}
+
+.mdl-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 0;
+    height: 0;
+    background: transparent;
+    cursor: pointer;
+}
+
+.mdl-slider::-moz-range-thumb {
+    width: 0;
+    height: 0;
+    background: transparent;
+    cursor: pointer;
+}
+
+.mdl-slider::-ms-thumb {
+    width: 0;
+    height: 0;
+    background: transparent;
+    cursor: pointer;
+}
+
+.mdl-slider-background-flex,
+.mdl-slider-background-lower,
+.mdl-slider-background-upper {
+    border-radius: var(--theme-roundness);
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    height: 10px;
+}
+
+/* Chapter Markers */
+.sliderMarkerContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 10px;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.sliderMarker {
+    position: absolute;
+    top: 0;
+    width: 2px;
+    height: 10px;
+    background-color: var(--theme-chapter-marker-colour);
+    opacity: 0.6;
+    border-radius: 1px;
+    pointer-events: auto;
+    cursor: pointer;
+    transition: opacity 0.2s ease, width 0.2s ease, background-color 0.2s ease;
+}
+
+.sliderMarker.unwatched {
+    background-color: var(--theme-chapter-marker-colour);
+}
+
+.sliderMarker.watched {
+    background-color: var(--theme-chapter-marker-watched-colour);
+}
+
+.mdl-slider-background-upper {
+    margin-left:  -3px;
+}
+
+.mdl-slider-background-flex-container {
+    top: 5px;
+}
+
+.innerCardFooter .itemProgressBarForeground,
+.playbackProgress > div,
+.mdl-slider-background-lower,
+.iconOsdProgressInner,
+.taskProgressInner,
+progress {
+    background-color: var(--theme-progress-bar-colour) !important;
+}
+
+/* These need to remain separate for browser compatibility */
+progress::-moz-progress-bar {
+    background-color: var(--theme-progress-bar-colour);
+}
+progress::-webkit-progress-bar {
+    background-color: var(--theme-progress-bar-colour);
+}
+progress::-ms-thumb {
+    background-color: var(--theme-progress-bar-colour);
+}
+
+.transcodingProgress > div {
+    background-color: var(--theme-progress-bar-transcoding-colour) !important;
+}
+
+.innerCardFooter .itemProgressBar,
+.backgroundProgress > div,
+.mdl-slider-background-flex,
+.taskProgressOuter,
+progress {
+    background-color: var(--theme-progress-bar-background-colour) !important;
+}
+
+.layout-desktop .dashboardDocument .content-primary:not(.layout-desktop #dashboardPage .content-primary) {
+    padding-left: 2.5em;
+    padding-right: 2.5em;
+}
+
+[dir="ltr"] .formDialogHeaderTitle:first-child {
+    margin-left: unset;
+}
+
+/* Login Form */
+
+#loginPage {
+    background-color: var(--theme-menu-background-colour);
+    border-radius: var(--theme-roundness);
+    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
+    padding: unset !important;
+    max-width: 750px;
+    max-height: 500px;
+    margin: 150px auto 0;
+}
+
+.manualLoginForm .raised.button-submit.block.emby-button {
+    margin-bottom: -3px;
+}
+
+.chapterThumbTextContainer {
+    width: fit-content;
+    margin: auto;
+}
+
+.chapterThumbText {
+    width: fit-content;
+}
diff --git a/theme/complete.css b/theme/complete.css
new file mode 100644
index 0000000..a8b3d43
--- /dev/null
+++ b/theme/complete.css
@@ -0,0 +1,21 @@
+/*
+    ========================================
+    TOLFIN - Полная тема для Jellyfin
+    ========================================
+    Полная тема включающая все модули.
+    Импортирует базовую тему и все модули.
+*/
+
+/* Import base theme */
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/base.css");
+
+/* Import modules */
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/static-sidebar.css");
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/central-libraries-small.css");
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/change-banner.css");
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/count-indicators.css");
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/forgot-password.css");
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/hide-my-media.css");
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/moving-cards.css");
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/smaller-cast.css");
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/floating-progress.css");
diff --git a/theme/modules/README.md b/theme/modules/README.md
index 95383d2..2547f41 100644
--- a/theme/modules/README.md
+++ b/theme/modules/README.md
@@ -24,6 +24,16 @@
 
 ---
 
+### change-banner.css
+Заменяет баннер Jellyfin на кастомный.
+
+**Использование:**
+```css
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/change-banner.css");
+```
+
+---
+
 ### count-indicators.css
 Изменяет цвет индикаторов счётчиков (количество эпизодов, и т.д.).
 
@@ -88,12 +98,13 @@
 
 ### Полная тема (все модули):
 ```css
-@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/tolfin.css");
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/complete.css");
 ```
 
 ### Индивидуальные модули:
 ```css
 @import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/static-sidebar.css");
 @import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/central-libraries-small.css");
+@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/change-banner.css");
 /* Добавляйте нужные модули */
 ```
diff --git a/theme/modules/change-banner.css b/theme/modules/change-banner.css
new file mode 100644
index 0000000..d046981
--- /dev/null
+++ b/theme/modules/change-banner.css
@@ -0,0 +1,30 @@
+/*
+    This module will change the Jellyfin banner to a custom one.
+    This allows you to customise the background on the homepage.
+    This can be used as a standalone module.
+*/
+
+:root {
+    --banner-url: url('https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/assets/banner.png');
+}
+
+/* Custom banner for background */
+.homeBackdropContainer,
+.backgroundContainer.withBackdrop,
+.itemBackdrop,
+.backdropImage {
+    background-image: var(--banner-url) !important;
+    background-size: cover !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+}
+
+/* Remove gradient overlay on homepage */
+#indexPage .itemBackdrop::before {
+    display: none !important;
+}
+
+#indexPage .darkenContent {
+    background: none !important;
+    backdrop-filter: none !important;
+}
diff --git a/theme/tolfin.css b/theme/tolfin.css
deleted file mode 100644
index c02de55..0000000
--- a/theme/tolfin.css
+++ /dev/null
@@ -1,1163 +0,0 @@
-/*
-    ========================================
-    TOLFIN - Полная тема для Jellyfin
-    ========================================
-    Модернизированная тема с кастомными шрифтами,
-    плавными анимациями и адаптивным дизайном.
-    Включает все модули.
-*/
-
-/* ========================================
-   ПЕРЕМЕННЫЕ ТЕМЫ
-   ======================================== */
-:root {
-    /* Цветовая палитра */
-    --theme-background-colour: #101010;                    /* Основной цвет фона */
-    --theme-sidebar-background-colour: #222222;            /* Цвет фона боковой панели */
-    --theme-menu-background-colour: #3a3a3a80;             /* Полупрозрачный цвет фона меню */
-    --theme-menu-shadow-colour: #fff3;                     /* Цвет тени/подсветки элементов меню */
-    --theme-base-colour: #696969;                          /* Базовый акцентный цвет */
-    --theme-text-colour: #dbdbdb;                          /* Цвет текста */
-    --theme-restart-colour: #da87287e;                     /* Цвет кнопки перезапуска (оранжевый) */
-    --theme-shutdown-colour: #c21c1c9d;                    /* Цвет кнопки выключения (красный) */
-    --theme-progress-bar-colour: #cfcfcf;                  /* Цвет прогресс-бара */
-    --theme-progress-bar-background-colour: #2c2c2c;       /* Фоновый цвет прогресс-бара */
-    --theme-progress-bar-transcoding-colour: #eb7e25;      /* Цвет прогресса транскодирования */
-    --theme-chapter-marker-colour: #dbdbdb;                /* Цвет маркера главы */
-    --theme-chapter-marker-watched-colour: #4a4a4a;        /* Цвет просмотренного маркера главы */
-
-    /* Общие параметры внешнего вида */
-    --theme-roundness: .75rem;                               /* Скругление углов */
-    --theme-blur: 16px;                                      /* Сила размытия фона */
-
-    /* URL изображений */
-    --banner-url: url('https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/assets/banner.png');
-
-    /* Переменные модулей */
-    --show-count-indicators: flex;                          /* none для скрытия индикаторов */
-    --count-indicator-colour: rgba(200, 200, 200, 0.75);  /* Цвет индикаторов счётчиков */
-    --played-indicator-colour: rgba(32, 139, 36, 0.75);   /* Цвет индикатора просмотренного */
-    --floating-progress-roundness: .75rem;                  /* Скругление плавающего прогресса */
-    --floating-progress-height: 10px;                       /* Высота плавающего прогресса */
-}
-
-/* ========================================
-   ОБЩИЕ СТИЛИ
-   ======================================== */
-
-/* Удаление стандартного контура при фокусе */
-*:focus-visible {
-    outline: none;
-}
-
-/* Изменение цвета фона основных элементов */
-.backgroundContainer,
-.mainDrawer,
-.drawer-open,
-.nowPlayingPlaylist,
-.nowPlayingContextMenu,
-html {
-    background-color: var(--theme-background-colour);
-}
-
-/* ========================================
-   ХЕДЕР (ВЕРХНЯЯ ПАНЕЛЬ)
-   ======================================== */
-
-/* Стилизация заголовка страницы */
-.layout-desktop [dir="ltr"] .pageTitle {
-    margin-left: 1.2em;
-}
-
-/* Стилизация заголовка боковой панели */
-[dir="ltr"] .sidebarHeader {
-    padding-left: 2em;
-    font-weight: bold;
-}
-
-/* Пункты навигационного меню */
-[dir="ltr"] .navMenuOption {
-    padding: .9em 1.2em !important;
-}
-
-/* Высота заголовка с логотипом */
-.pageTitleWithLogo {
-    height: 50px;
-}
-
-/* Прозрачный хедер */
-.skinHeader {
-    background-color: transparent;
-}
-
-/* Отступы элементов хедера на десктопе */
-.layout-desktop .headerLeft,
-.layout-desktop .headerRight {
-    margin-top: 1rem;
-}
-
-/* Отступы элементов хедера на мобильных устройствах */
-.layout-mobile .headerRight {
-    margin: 0 .29em;
-}
-
-/* Отступы на странице библиотеки для мобильных */
-.layout-mobile .libraryPage:not(.noSecondaryNavPage) {
-    padding-top: 8.5em !important;
-}
-
-/* Иконки в кнопках */
-.paper-icon-button-light > div {
-    width: 25px;
-    height: 25px;
-    transform: unset;
-}
-
-/* Полупрозрачный хедер */
-.skinHeader.semiTransparent {
-    background-color: unset;
-}
-
-/* Стилизация вкладок, кнопок и диалоговых окон с размытием фона */
-.headerTabs,
-.headerRight,
-.dialog,
-.raised,
-.fab,
-.paper-icon-button-light:not(
-    .headerRight,
-    .headerRight .paper-icon-button-light
-),
-.osdHeader .headerLeft .paper-icon-button-light,
-.detailButton,
-.sliderBubble,
-.MuiDataGrid-root,
-.MuiMenu-list,
-.MuiButton-root,
-.toast.toastVisible,
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus,
-.MuiTabs-centered .MuiTab-root,
-#skipIntro .emby-button,
-.chapterThumbContainer,
-.chapterThumbTextContainer {
-    color: var(--theme-text-colour);
-    border-radius: var(--theme-roundness);
-    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-    background-color: var(--theme-menu-background-colour);
-    backdrop-filter: blur(var(--theme-blur)) !important;
-    -webkit-backdrop-filter: blur(var(--theme-blur)) !important;
-    -moz-backdrop-filter: blur(var(--theme-blur)) !important;
-    -o-backdrop-filter: blur(var(--theme-blur)) !important;
-    -ms-backdrop-filter: blur(var(--theme-blur)) !important;
-}
-
-/* Фон диалогового окна */
-.dialogBackdrop {
-    background-color: #111;
-}
-
-/* Слайдер вкладок */
-.headerTabs .emby-tabs-slider {
-    display: flex;
-    align-items: center;
-}
-
-/* Кнопки и элементы в хедере */
-.headerTabs .emby-tab-button,
-.headerRight .paper-icon-button-light,
-.detailButton,
-.sessionCardButton,
-.guideOptions,
-.MuiTabs-centered .MuiTab-root {
-    padding: .556em !important;
-    margin: 0 .29em !important;
-    border-radius: var(--theme-roundness);
-}
-
-/* Высота хедера на десктопе */
-.layout-desktop .headerTabs,
-.layout-desktop .headerLeft,
-.layout-desktop .headerRight,
-.layout-desktop .emby-tabs-slider,
-.layout-desktop .raised {
-    height: 50px;
-}
-
-/* Высота хедера на мобильных */
-.layout-mobile .headerTabs,
-.layout-mobile .headerRight,
-.layout-mobile .emby-tabs-slider,
-.layout-mobile .raised {
-    height: 40px;
-}
-
-/* Отступ вкладок на десктопе */
-.layout-desktop .headerTabs {
-    margin-left: 250px;
-}
-
-/* Медиа-запросы для адаптивности хедера */
-@media (max-width: 1599px) {
-    .layout-desktop .sectionTabs {
-        width: auto;
-        align-self: center;
-        margin-top: -58px;
-    }
-
-    .layout-desktop .headerRight {
-        margin-right: .8em;
-    }
-
-    .layout-mobile .headerTabs {
-        margin: 20px auto;
-        width: auto;
-    }
-
-    .layout-mobile .pageTitleWithLogo {
-        height: 40px;
-    }
-}
-
-/* Секция вкладок для TV */
-.layout-tv .sectionTabs {
-    width: unset;
-}
-
-@media (min-width: 100em) {
-    .layout-tv .headerTabs {
-        margin-top: unset;
-    }
-
-    .layout-mobile .headerTabs {
-        margin-top: -1.3em;
-    }
-}
-
-@media (max-width: 100em) {
-    .layout-tv .sectionTabs {
-        width: fit-content;
-        align-self: center;
-        font-size: 125%;
-    }
-}
-
-@media (max-width: 50em) {
-    .homeLibraryButton {
-    width: 100% !important;
-    }
-}
-
-/* ========================================
-   БОКОВАЯ ПАНЕЛЬ (SIDEBAR)
-   ======================================== */
-
-/* Отключение анимации перехода на десктопе */
-.layout-desktop,
-.touch-menu-la.transition {
-    transition: none;
-}
-
-/* Отступ боковой панели на мобильных */
-.layout-mobile .mainDrawer {
-    padding-top: 1.2em;
-}
-
-/* Отступ контента боковой панели на десктопе */
-.layout-desktop .mainDrawer-scrollContainer {
-    margin-top: 100px;
-}
-
-/* Пункты меню навигации - скругление и ширина */
-.navMenuOption,
-.navMenuOption-selected,
-.navMenuOption:hover,
-.MuiListItem-root,
-.MuiDrawer-paperAnchorLeft .MuiButtonBase-root {
-    border-radius: var(--theme-roundness) !important;
-    width: 80%;
-    margin: auto !important;
-}
-
-/* Подсветка при наведении на пункты меню */
-.navMenuOption:hover,
-.listItem:hover,
-.MuiButton-root:hover {
-    background-color: var(--theme-menu-shadow-colour);
-}
-
-/* Выбранный пункт меню */
-.navMenuOption-selected,
-.Mui-selected {
-    background: var(--theme-menu-shadow-colour) !important;
-}
-
-/* ========================================
-   КАРТОЧКИ КОНТЕНТА
-   ======================================== */
-
-/* Отступ заголовка секции */
-.section0 .sectionTitle {
-    padding-top: 1em !important;
-}
-
-/* Кнопки прокрутки в секциях */
-.layout-desktop .section0 .emby-scrollbuttons,
-.layout-desktop .section1 .emby-scrollbuttons {
-    padding-top: unset;
-}
-
-/* Карточки контента - скругление, тень, анимация */
-.cardContent:not(.dashboardSection .cardContent),
-.cardPadder:not(.dashboardSection .cardPadder),
-.blurhash-canvas,
-.dialog,
-.itemSelectionPanel {
-    border-radius: var(--theme-roundness) !important;
-    box-shadow: inset 0 1px var(--theme-menu-shadow-colour) !important;
-    transition: 0.2s;
-}
-
-/* Оверлей на карточках */
-.cardOverlayContainer {
-    border-radius: var(--theme-roundness) !important;
-    box-shadow: inset 0 2px var(--theme-menu-shadow-colour) !important;
-    transition: unset;
-}
-
-/* Кнопки оверлея на мобильных */
-.layout-mobile .cardOverlayButton {
-    padding: unset;
-    margin: 5px;
-}
-
-.layout-mobile .cardOverlayButtonIcon {
-    background: unset !important;
-}
-
-/* Кнопки оверлея на десктопе */
-.layout-desktop .cardOverlayContainer > .cardOverlayButton-br .cardOverlayButton {
-    padding: unset;
-    margin: 5px;
-}
-
-/* Фон карточек по умолчанию */
-.defaultCardBackground1,
-.defaultCardBackground2,
-.defaultCardBackground3,
-.defaultCardBackground4,
-.defaultCardBackground5,
-.cardOverlayContainer > .cardOverlayFab-primary {
-    background-color: var(--theme-menu-background-colour);
-    font-size: 110%;
-}
-
-/* Стилизация кнопок при наведении и фокусе */
-.button-submit:focus,
-.paper-icon-button-light:hover:not(:disabled, .btnDelete),
-.raised:hover,
-.emby-tab-button:hover,
-.detailButton:hover,
-.emby-tab-button.show-focus:focus,
-.paper-icon-button-light.show-focus:focus,
-.emby-button.show-focus:focus,
-.alphaPickerButton-tv:focus,
-#skipIntro .emby-button:hover,
-.multiSelectCheckboxOutline {
-    border-radius: var(--theme-roundness) !important;
-    transform: unset !important;
-    -webkit-transform: unset !important;
-    -moz-transform: unset !important;
-    -o-transform: unset !important;
-    -ms-transform: unset !important;
-    color: var(--theme-text-colour);
-    background-color: var(--theme-menu-shadow-colour) !important;
-}
-
-/* Кнопки на TV при фокусе */
-.layout-tv .itemDetailsGroup .emby-button.show-focus:focus {
-    padding: 5px 10px;
-}
-
-/* ========================================
-   НАСТРОЙКИ ПОЛЬЗОВАТЕЛЯ
-   ======================================== */
-
-/* Жирные заголовки */
-.readOnlyContent h2,
-.sectionTitle,
-.dashboardSection h3,
-.MuiListSubheader-root {
-    font-weight: bold;
-}
-
-/* Убрать границы */
-.listItem-border,
-.itemSelectionPanel {
-    border: unset;
-}
-
-/* Отступы элементов списка */
-.listItem {
-    padding-left: 1.2em !important;
-}
-
-/* Скругление элементов при наведении */
-.listItem:hover,
-.MuiButtonBase-root,
-.MuiButtonBase-root:hover,
-.emby-tab-button,
-progress {
-    border-radius: var(--theme-roundness);
-}
-
-/* Формы и поля ввода */
-.collapseContent,
-.formDialogFooter:not(.formDialogFooter-clear),
-.formDialogHeader:not(.formDialogHeader-clear),
-.paperList,
-.visualCardBox,
-.emby-select-withcolor,
-.emby-input,
-.emby-textarea {
-    background-color: var(--theme-menu-background-colour);
-    border-radius: var(--theme-roundness);
-    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-    border: unset;
-    padding: 10px;
-}
-
-/* Отключенный селект */
-.emby-select[disabled] {
-    box-shadow: unset;
-}
-
-/* Выбор дорожек */
-.trackSelections .selectContainer .detailTrackSelect {
-    padding: 0 10px;
-}
-
-/* ========================================
-   СТРАНИЦА ДЕТАЛЕЙ КОНТЕНТА
-   ======================================== */
-
-/* Изображение контента на десктопе */
-.layout-desktop .detailImageContainer .card {
-    width: 250px;
-    max-width: unset;
-    top: 1.5em;
-    left: 0;
-}
-
-/* Обратная совместимость с версиями до 10.11.0 */
-.layout-desktop .infoWrapper .detailImageContainer .card {
-    padding-top: 8.5em;
-}
-
-/* Основной контент страницы деталей */
-.layout-desktop .detailPagePrimaryContent {
-    padding-top: 135px;
-    padding-left: 300px;
-    min-height: 325px;
-}
-
-/* Кнопки действий на странице деталей (десктоп) */
-.layout-desktop .mainDetailButtons {
-    margin-top: 350px;
-    margin-left: 292px;
-    position: absolute;
-}
-
-/* Кнопки действий на странице деталей (мобильные) */
-.layout-mobile .mainDetailButtons {
-    display: flex;
-    flex-flow: wrap;
-    gap: 10px;
-}
-
-/* Стилизация кнопок действий */
-.mainDetailButtons .detailButton {
-    display: inline-flex;
-    align-items: center;
-    padding-left: 50px;
-    position: relative;
-}
-
-/* Текстовые метки для кнопок */
-.btnPlay .detailButton-content:before {
-    content: "Play";
-}
-
-.btnReplay .detailButton-content:before {
-    content: "Replay";
-}
-
-.btnDownload .detailButton-content:before {
-    content: "Download";
-}
-
-.btnPlayTrailer .detailButton-content:before {
-    content: "Trailer";
-}
-
-.btnInstantMix .detailButton-content:before {
-    content: "Instant Mix";
-}
-
-.btnShuffle .detailButton-content:before {
-    content: "Shuffle";
-}
-
-.btnCancelSeriesTimer .detailButton-content:before {
-    content: "Cancel Programme";
-}
-
-.btnCancelTimer .detailButton-content:before {
-    content: "Stop Recording";
-}
-
-.btnPlaystate .detailButton-content:before {
-    content: "Watched";
-}
-
-.btnUserRating .detailButton-content:before {
-    content: "Favourite";
-}
-
-.btnSplitVersions .detailButton-content:before {
-    content: "Split Versions";
-}
-
-.btnMoreCommands .detailButton-content:before {
-    content: "Options";
-}
-
-/* Позиционирование текста кнопок */
-.detailButton-content:before {
-    position: relative;
-    margin-left: 30px;
-}
-
-/* Позиционирование иконок кнопок */
-.detailButton-icon:before {
-    position: absolute;
-    top: 7px;
-    left: 7px;
-}
-
-/* Иконки Material Icons */
-.mainDetailButtons .material-icons {
-    height: unset;
-}
-
-/* Отступы контента страницы деталей */
-.layout-desktop .detailPagePrimaryContainer,
-.layout-desktop .detailPageContent {
-    padding-left: 3.3% !important;
-}
-
-/* Лента деталей */
-.detailRibbon {
-    background: unset;
-    padding-left: 0 !important;
-}
-
-/* Обёртка информации о контенте */
-.layout-desktop .infoWrapper {
-    padding-top: 226px;
-    padding-left: 300px;
-}
-
-/* Градиентный оверлей на фоне контента */
-.itemBackdrop::before {
-    content: '';
-    position: absolute;
-    top: 0;        /* Покрывает весь элемент */
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(180deg, transparent 5%, var(--theme-background-colour));
-    pointer-events: none; /* Не интерактивный элемент */
-    z-index: 1; /* Поверх изображения */
-}
-
-/* Фон контента на мобильных с анимацией */
-.layout-mobile .itemBackdrop {
-    margin-top: unset;
-    -webkit-animation: backdrop-fadein .8s ease-in normal both;
-    animation: backdrop-fadein .8s ease-in normal both;
-}
-
-/* Изображение контента на мобильных */
-.layout-mobile .detailImageContainer .card {
-    filter: unset;
-    -webkit-filter: unset;
-    -moz-filter: unset;
-    -o-filter: unset;
-    -ms-filter: unset;
-    padding-left: 2em;
-}
-
-/* Логотип контента на десктопе */
-.layout-desktop .detailLogo {
-    left: 3%;
-    right: unset;
-    z-index: 1;
-}
-
-/* Убрать фон у элементов Material UI */
-.layout-desktop .backgroundContainer.withBackdrop,
-.MuiPaper-root,
-.MuiTabs-indicator {
-    background-color: unset;
-    background-image: unset;
-    box-shadow: unset;
-}
-
-/* Кастомный баннер для фона */
-.homeBackdropContainer,
-.backgroundContainer.withBackdrop,
-.itemBackdrop,
-.backdropImage,
-#indexPage .backgroundContainer,
-#indexPage .backdropImage {
-    background-image: var(--banner-url) !important;  /* ← banner.png везде! */
-}
-
-/* Убрать градиентный оверлей на главной странице */
-#indexPage .itemBackdrop::before {
-    display: none !important;
-}
-
-#indexPage .darkenContent {
-    background: none !important;
-    backdrop-filter: none !important;
-}
-
-/* Размытие фонового изображения */
-.layout-desktop .backdropImage {
-    filter: blur(5px);
-    -webkit-filter: blur(5px);
-    -moz-filter: blur(5px);
-    -o-filter: blur(5px);
-    -ms-filter: blur(5px);
-}
-
-/* Затемнение контента */
-.darkenContent {
-    backdrop-filter: blur(5px) brightness(0.75);
-    -webkit-backdrop-filter: blur(5px) brightness(0.75);
-    -moz-backdrop-filter: blur(5px) brightness(0.75);
-    -o-backdrop-filter: blur(5px) brightness(0.75);
-    -ms-backdrop-filter: blur(5px) brightness(0.75);
-    background: -webkit-linear-gradient(180deg, transparent, var(--theme-background-colour));
-    background: -moz-linear-gradient(180deg, transparent, var(--theme-background-colour));
-    background: -o-linear-gradient(180deg, transparent, var(--theme-background-colour));
-    background: -ms-linear-gradient(180deg, transparent, var(--theme-background-colour));
-    background: linear-gradient(180deg, transparent, var(--theme-background-colour));
-}
-
-/* Контейнер элементов для TV */
-.itemsContainer-tv {
-    margin-left: 10px;
-}
-
-/* ========================================
-   НАСТРОЙКИ АДМИНИСТРАТОРА
-   ======================================== */
-
-/* Кнопка перезапуска сервера */
-#btnRestartServer {
-    box-shadow: inset 0 1px var(--theme-restart-colour) !important;
-}
-
-/* Кнопка перезапуска при наведении и уведомления */
-#btnRestartServer:hover,
-.notifications,
-.MuiChip-filledInfo {
-    color: var(--theme-text-colour) !important;
-    background-color: var(--theme-restart-colour) !important;
-}
-
-/* Кнопка выключения и удаления */
-#btnShutdown,
-.btnDelete {
-    box-shadow: inset 0 1px var(--theme-shutdown-colour) !important;
-}
-
-/* Кнопка выключения при наведении и важные уведомления */
-#btnShutdown:hover,
-.btnDelete:hover,
-.notification_important,
-.MuiChip-filledError {
-    color: var(--theme-text-colour) !important;
-    background-color: var(--theme-shutdown-colour) !important;
-}
-
-/* Иконки элементов списка */
-.listItemIcon:not(.listItemIcon-transparent) {
-    border-radius: var(--theme-roundness);
-}
-
-/* Кнопки карточки сессии */
-.sessionCardButtons {
-    margin: .29em 0;
-}
-
-/* Карточки на дашборде */
-.dashboardSection .cardContent {
-    border-top-left-radius: var(--theme-roundness);
-    border-top-right-radius: var(--theme-roundness);
-}
-
-/* Группа кнопок - первая кнопка */
-div[data-role="controlgroup"] a[data-role="button"]:first-child {
-    border-bottom-left-radius: var(--theme-roundness);
-    border-top-left-radius: var(--theme-roundness);
-}
-
-/* Группа кнопок - последняя кнопка */
-div[data-role="controlgroup"] a[data-role="button"]:last-child {
-    border-bottom-right-radius: var(--theme-roundness);
-    border-top-right-radius: var(--theme-roundness);
-}
-
-/* Колонка дашборда */
-.dashboardColumn {
-    flex-shrink: inherit;
-}
-
-/* ========================================
-   БАЗОВЫЕ ЦВЕТА И СЛАЙДЕРЫ
-   ======================================== */
-
-/* Цвет текста для фокусированных элементов и иконок */
-.selectLabelFocused,
-.textareaLabelFocused,
-.inputLabelFocused,
-.mdl-slider,
-.metadataSidebarIcon,
-.button-link,
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus,
-#divRunningTasks span,
-.MuiAlert-icon,
-.listItemBodyText span {
-    color: var(--theme-text-colour) !important;
-}
-
-/* Фон для активных элементов */
-.emby-checkbox:checked + span + .checkboxOutline,
-.listItemIcon:not(
-    .listItemIcon-transparent,
-    .notification_important,
-    .notifications
-),
-.guide-channelHeaderCell:focus,
-.programCell:focus,
-.emby-button.show-focus:focus,
-::selection,
-div[data-role="controlgroup"] a.ui-btn-active,
-.MuiAvatar-root,
-.selectionCommandsPanel {
-    background-color: var(--theme-base-colour) !important;
-}
-
-/* Цвет границ для чекбоксов и спиннеров */
-.emby-checkbox + span + .checkboxOutline,
-.emby-checkbox:checked + span + .checkboxOutline,
-.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
-.mdl-spinner__layer-1,
-.mdl-spinner__layer-2,
-.mdl-spinner__layer-3,
-.mdl-spinner__layer-4 {
-    border-color: var(--theme-base-colour) !important;
-}
-
-/* Слайдер - базовые стили */
-.mdl-slider {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 100%;
-    background: transparent;
-}
-
-/* Ползунок слайдера - WebKit */
-.mdl-slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 0;
-    height: 0;
-    background: transparent;
-    cursor: pointer;
-}
-
-/* Ползунок слайдера - Firefox */
-.mdl-slider::-moz-range-thumb {
-    width: 0;
-    height: 0;
-    background: transparent;
-    cursor: pointer;
-}
-
-/* Ползунок слайдера - IE/Edge */
-.mdl-slider::-ms-thumb {
-    width: 0;
-    height: 0;
-    background: transparent;
-    cursor: pointer;
-}
-
-/* Фон слайдера */
-.mdl-slider-background-flex,
-.mdl-slider-background-lower,
-.mdl-slider-background-upper {
-    border-radius: var(--theme-roundness);
-    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-    height: 10px;
-}
-
-/* ========================================
-   МАРКЕРЫ ГЛАВ
-   ======================================== */
-
-/* Контейнер маркеров глав */
-.sliderMarkerContainer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 10px;
-    pointer-events: none;
-    z-index: 1;
-}
-
-/* Отдельный маркер главы */
-.sliderMarker {
-    position: absolute;
-    top: 0;
-    width: 2px;
-    height: 10px;
-    background-color: var(--theme-chapter-marker-colour);
-    opacity: 0.6;
-    border-radius: 1px;
-    pointer-events: auto;
-    cursor: pointer;
-    transition: opacity 0.2s ease, width 0.2s ease, background-color 0.2s ease;
-}
-
-/* Непросмотренный маркер */
-.sliderMarker.unwatched {
-    background-color: var(--theme-chapter-marker-colour);
-}
-
-/* Просмотренный маркер */
-.sliderMarker.watched {
-    background-color: var(--theme-chapter-marker-watched-colour);
-}
-
-/* Верхний фон слайдера */
-.mdl-slider-background-upper {
-    margin-left:  -3px;
-}
-
-/* Контейнер фона слайдера */
-.mdl-slider-background-flex-container {
-    top: 5px;
-}
-
-/* ========================================
-   ПРОГРЕСС-БАРЫ
-   ======================================== */
-
-/* Заполненная часть прогресс-бара */
-.innerCardFooter .itemProgressBarForeground,
-.playbackProgress > div,
-.mdl-slider-background-lower,
-.iconOsdProgressInner,
-.taskProgressInner,
-progress {
-    background-color: var(--theme-progress-bar-colour) !important;
-}
-
-/* Совместимость с разными браузерами для progress */
-progress::-moz-progress-bar {
-    background-color: var(--theme-progress-bar-colour);
-}
-progress::-webkit-progress-bar {
-    background-color: var(--theme-progress-bar-colour);
-}
-progress::-ms-thumb {
-    background-color: var(--theme-progress-bar-colour);
-}
-
-/* Прогресс транскодирования */
-.transcodingProgress > div {
-    background-color: var(--theme-progress-bar-transcoding-colour) !important;
-}
-
-/* Фон прогресс-бара */
-.innerCardFooter .itemProgressBar,
-.backgroundProgress > div,
-.mdl-slider-background-flex,
-.taskProgressOuter,
-progress {
-    background-color: var(--theme-progress-bar-background-colour) !important;
-}
-
-/* Отступы контента дашборда */
-.layout-desktop .dashboardDocument .content-primary:not(.layout-desktop #dashboardPage .content-primary) {
-    padding-left: 2.5em;
-    padding-right: 2.5em;
-}
-
-/* Заголовок диалогового окна */
-[dir="ltr"] .formDialogHeaderTitle:first-child {
-    margin-left: unset;
-}
-
-/* ========================================
-   ФОРМА ВХОДА
-   ======================================== */
-
-/* Страница входа в систему */
-#loginPage {
-    background-color: var(--theme-menu-background-colour);
-    border-radius: var(--theme-roundness);
-    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-    padding: unset !important;
-    max-width: 750px;
-    max-height: 500px;
-    margin: 150px auto 0;
-}
-
-/* Кнопка входа в ручной форме */
-.manualLoginForm .raised.button-submit.block.emby-button {
-    margin-bottom: -3px;
-}
-
-/* Убрать кнопку "Забыли пароль" */
-#btnResetPassword,
-.btnForgotPassword {
-    display: none !important;
-}
-
-/* ========================================
-   МАРКЕРЫ ГЛАВ ВИДЕО
-   ======================================== */
-
-/* Контейнер текста миниатюры главы */
-.chapterThumbTextContainer {
-    width: fit-content;
-    margin: auto;
-}
-
-/* Текст миниатюры главы */
-.chapterThumbText {
-    width: fit-content;
-}
-
-/* ========================================
-   МОДУЛЬ: СТАТИЧНАЯ БОКОВАЯ ПАНЕЛЬ
-   ======================================== */
-
-.layout-desktop .mainDrawer,
-.MuiDrawer-paperAnchorLeft {
-    left: 0 !important;
-    top: 0;
-    width: 250px !important;
-    background-color: var(--theme-sidebar-background-colour) !important;
-    z-index: 100;
-}
-
-.layout-desktop .mainDrawerButton,
-.layout-desktop .headerHomeButton {
-    display: none;
-}
-
-.layout-desktop .libraryPage:not(#editItemMetadataPage) {
-    margin-left: 250px;
-    width: calc(100% - 250px);
-}
-
-.layout-desktop #slides-container {
-    margin-left: 320px;
-    width: calc(100% - 385px);
-}
-
-.layout-desktop .hide-scroll .mainDrawer,
-.layout-desktop .hideMainDrawer .mainDrawer {
-    display: none;
-}
-
-/* ========================================
-   МОДУЛЬ: ЦЕНТРИРОВАННЫЕ БИБЛИОТЕКИ
-   ======================================== */
-
-#indexPage .section0 .itemsContainer.padded-left.padded-right {
-    justify-content: center !important;
-    padding-top: 15px !important;
-}
-
-
-/* ========================================
-   МОДУЛЬ: ИНДИКАТОРЫ СЧЁТЧИКОВ
-   ======================================== */
-
-.countIndicator {
-    display: var(--show-count-indicators);
-}
-
-.countIndicator,
-.fullSyncIndicator,
-.mediaSourceIndicator,
-.playedIndicator {
-    background: var(--count-indicator-colour);
-}
-
-.playedIndicator {
-    background: var(--played-indicator-colour);
-}
-
-/* ========================================
-   МОДУЛЬ: СКРЫТЬ "МОИ МЕДИА"
-   ======================================== */
-
-#indexPage .section0 .sectionTitle {
-    display: none;
-}
-
-#indexPage .section0 {
-    padding-top: 1em;
-}
-
-#indexPage .verticalSection.section0 {
-    padding-top: 3em;
-}
-
-/* ========================================
-   МОДУЛЬ: АНИМАЦИЯ КАРТОЧЕК
-   ======================================== */
-
-.cardBox:hover {
-    transform: translateY(-2.5px);
-    -webkit-transform: translateY(-2.5px);
-    -moz-transform: translateY(-2.5px);
-    -ms-transform: translateY(-2.5px);
-    -o-transform: translateY(-2.5px);
-}
-
-/* ========================================
-   МОДУЛЬ: МЕНЬШИЕ КАРТОЧКИ АКТЁРОВ
-   ======================================== */
-
-#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata {
-    width: 4.2cm;
-    font-size: 90%;
-}
-
-#castContent .cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy {
-    background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-}
-
-#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.cardContent-shadow.itemAction {
-    background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-}
-
-#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardContent-shadow.itemAction {
-    background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-}
-
-#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itemAction {
-    background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-}
-
-#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground4.cardContent.cardContent-shadow.itemAction {
-    background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-}
-
-#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground5.cardContent.cardContent-shadow.itemAction {
-    background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-}
-
-#castContent .cardScalable {
-    width: 3.8cm;
-    height: 3.8cm;
-}
-
-#castContent .cardOverlayButton-br {
-    bottom: 4%;
-    right: 15%;
-    width: 70%;
-}
-
-#castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {
-    margin: auto;
-}
-
-#castContent .cardBox:not(.visualCardBox) .cardPadder {
-    background-color: unset;
-}
-
-#castContent .cardBox:not(.visualCardBox) .cardPadder,
-#castContent .cardContent-shadow {
-    box-shadow: unset;
-}
-
-/* ========================================
-   МОДУЛЬ: ПЛАВАЮЩИЕ ПРОГРЕСС-БАРЫ
-   ======================================== */
-
-.sessionNowPlayingDetails {
-    padding-bottom: 10px;
-}
-
-.fullInnerCardFooter,
-.activeSession .backgroundProgress,
-.activeSession .playbackProgress,
-.activeSession .transcodingProgress {
-    width: 95%;
-    bottom: 10px;
-    margin: 0 auto;
-    height: var(--floating-progress-height);
-    border-radius: var(--floating-progress-roundness) !important;
-    -webkit-border-radius: var(--floating-progress-roundness) !important;
-    -moz-border-radius: var(--floating-progress-roundness) !important;
-}
-
-.itemProgressBar {
-    height: var(--floating-progress-height);
-    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-    -webkit-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-    -moz-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-}
-
-.playbackProgress > div,
-.backgroundProgress > div,
-.transcodingProgress > div {
-    box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-    -webkit-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-    -moz-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-    border-radius: var(--floating-progress-roundness);
-    -webkit-border-radius: var(--floating-progress-roundness);
-    -moz-border-radius: var(--floating-progress-roundness);
-}
-