Update CSS cod

edd.css

@@ -131,6 +131,18 @@
     --nexus-space-16: 4rem;     /* 64px - 4XL */
     --nexus-space-20: 5rem;     /* 80px - 5XL */
     --nexus-space-24: 6rem;     /* 96px - 6XL */
+
+    /* 🎯 SISTEM ACCENT DINAMIC (inspirat din Ultrachromic) */
+    --nexus-accent-rgb: 0, 212, 255;  /* RGB pentru transparențe */
+    --nexus-accent-alpha-10: rgba(var(--nexus-accent-rgb), 0.1);
+    --nexus-accent-alpha-25: rgba(var(--nexus-accent-rgb), 0.25);
+    --nexus-accent-alpha-50: rgba(var(--nexus-accent-rgb), 0.5);
+    --nexus-accent-alpha-75: rgba(var(--nexus-accent-rgb), 0.75);
+    --nexus-accent-alpha-90: rgba(var(--nexus-accent-rgb), 0.9);
+
+    /* 🔧 OPTIMIZĂRI PERFORMANȚĂ */
+    --nexus-rounding: 8px;  /* Rounding global */
+    --nexus-backdrop-filter: blur(60px) saturate(200%) contrast(160%) brightness(25%);
 }
 
 /* ========================================
@@ -267,18 +279,19 @@ body::after {
     box-shadow: var(--nexus-glow-primary) !important;
 }
 
-/* Backdrop image cu efect holografic */
+/* 🎬 BACKDROP IMAGE NEXUS (inspirat din Ultrachromic) */
 .backdropImage {
-    opacity: 0.08 !important;
+    opacity: 0.15 !important;
-    filter: blur(3px) saturate(1.5) hue-rotate(15deg) !important;
+    filter: var(--nexus-backdrop-filter) !important;
     transition: var(--nexus-transition-dramatic) !important;
     mix-blend-mode: screen !important;
+    transform: scale(1.1) !important;
 }
 
-/* 🌈 SCROLLBAR HOLOGRAFIC NEXUS */
+/* 🌈 SCROLLBAR HOLOGRAFIC NEXUS (îmbunătățit cu Ultrachromic) */
 * {
     scrollbar-width: thin;
-    scrollbar-color: var(--nexus-primary) transparent;
+    scrollbar-color: var(--nexus-accent-alpha-75) transparent !important;
 }
 
 *::-webkit-scrollbar {
@@ -293,7 +306,7 @@ body::after {
 }
 
 *::-webkit-scrollbar-thumb {
-    background: var(--nexus-border-energy);
+    background: var(--nexus-accent-alpha-75) !important;
     border-radius: var(--nexus-radius-infinite);
     transition: var(--nexus-transition-smooth);
     border: 1px solid var(--nexus-primary);
@@ -301,12 +314,7 @@ body::after {
 }
 
 *::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(
+    background: var(--nexus-border-energy) !important;
-        45deg,
-        var(--nexus-primary) 0%,
-        var(--nexus-secondary) 50%,
-        var(--nexus-accent) 100%
-    );
     box-shadow: var(--nexus-glow-rainbow);
     transform: scale(1.1);
 }
@@ -337,6 +345,102 @@ body::after {
     box-shadow: var(--nexus-glow-primary) !important;
 }
 
+/* ========================================
+ * 🚀 OPTIMIZĂRI PERFORMANȚĂ NEXUS (inspirat din Monochromic)
+ * ======================================== */
+
+/* Eliminarea mask-image pentru performanță mai bună */
+#dashboardPage,
+#dashboardGeneralPage,
+#userProfilesPage,
+#devicesPage,
+#serverActivityPage,
+#liveTvStatusPage,
+#liveTvSettingsPage,
+#networkingPage,
+#apiKeysPage,
+#logPage,
+#notificationSettingsPage,
+#scheduledTasksPage,
+#itemDetailPage,
+#userImagePage,
+#displayPreferencesPage,
+#homeScreenPreferencesPage,
+#languagePreferencesPage,
+#quickConnectPreferencesPage,
+#indexPage,
+#moviesPage,
+#tvRecommendedPage,
+#encodingSettingsPage,
+#mediaLibraryPage,
+#dlnaSettingsPage,
+#pluginsPage,
+#musicRecommendedPage {
+    mask-image: none !important;
+    -webkit-mask-image: none !important;
+    will-change: transform, opacity !important;
+    contain: layout style paint !important;
+}
+
+/* Optimizări pentru pagini mari */
+@media all and (min-width: 100em) {
+    #indexPage,
+    #moviesPage,
+    #tvRecommendedPage,
+    #musicRecommendedPage {
+        margin-top: 70px !important;
+        padding-top: 0px !important;
+        overflow: auto !important;
+        scroll-behavior: smooth !important;
+    }
+
+    #encodingSettingsPage,
+    #mediaLibraryPage,
+    #dlnaSettingsPage,
+    #pluginsPage {
+        margin-top: 60px !important;
+        padding-top: 0px !important;
+        overflow: auto !important;
+    }
+}
+
+/* Optimizări pentru ecrane mici */
+@media all and (max-width: 100em) {
+    #indexPage,
+    #moviesPage,
+    #tvRecommendedPage,
+    #encodingSettingsPage,
+    #mediaLibraryPage,
+    #dlnaSettingsPage,
+    #pluginsPage,
+    #musicRecommendedPage {
+        margin-top: 130px !important;
+        padding-top: 0px !important;
+        overflow: auto !important;
+        scroll-behavior: smooth !important;
+    }
+}
+
+/* Optimizări generale pentru toate paginile */
+#dashboardPage,
+#dashboardGeneralPage,
+#userProfilesPage,
+#devicesPage,
+#serverActivityPage,
+#liveTvStatusPage,
+#liveTvSettingsPage,
+#networkingPage,
+#apiKeysPage,
+#logPage,
+#notificationSettingsPage,
+#scheduledTasksPage,
+#itemDetailPage {
+    margin-top: 60px !important;
+    padding-top: 0px !important;
+    overflow: auto !important;
+    scroll-behavior: smooth !important;
+}
+
 /* ========================================
  * 🚀 HEADER NEXUS CU EFECTE HOLOGRAFICE
  * ======================================== */
@@ -631,6 +735,60 @@ body::after {
     border-radius: var(--border-radius-full);
 }
 
+/* ========================================
+ * 🎨 SISTEM ACCENT DINAMIC NEXUS (inspirat din Ultrachromic)
+ * ======================================== */
+
+/* Butoane cu hover accent dinamic */
+.raised:hover,
+.fab:hover,
+a[data-role="button"]:hover {
+    background: var(--nexus-accent-alpha-50) !important;
+    box-shadow: var(--nexus-glow-primary) !important;
+    transform: translateY(-2px) scale(1.02) !important;
+}
+
+/* Elemente de navigare cu accent */
+.navMenuOption-selected {
+    color: var(--nexus-primary) !important;
+    background: var(--nexus-accent-alpha-25) !important;
+    box-shadow: var(--nexus-glow-primary) !important;
+}
+
+.navMenuOption:hover,
+.actionSheetMenuItem:hover {
+    background-color: var(--nexus-accent-alpha-50) !important;
+    transform: translateX(var(--nexus-space-2)) !important;
+}
+
+/* Progres bars cu accent */
+.mdl-slider-background-lower,
+.playbackProgress > div,
+.taskProgressInner,
+.iconOsdProgressInner {
+    background: var(--nexus-border-energy) !important;
+    box-shadow: var(--nexus-glow-primary) !important;
+}
+
+progress::-moz-progress-bar,
+progress::-webkit-progress-value {
+    background: var(--nexus-border-energy) !important;
+}
+
+.transcodingProgress > div,
+.itemProgressBarForeground {
+    background: var(--nexus-accent-alpha-50) !important;
+}
+
+/* Slider controls cu accent */
+.mdl-slider::-moz-range-thumb,
+.mdl-slider::-ms-thumb,
+.mdl-slider::-webkit-slider-thumb {
+    background: var(--nexus-primary) !important;
+    box-shadow: var(--nexus-glow-primary) !important;
+    border: 2px solid var(--nexus-text-primary) !important;
+}
+
 /* 💎 BUTOANE PRINCIPALE NEXUS PREMIUM */
 .button-submit,
 .raised.emby-button {
@@ -710,6 +868,81 @@ body::after {
     box-shadow: var(--nexus-shadow-medium) !important;
 }
 
+/* ========================================
+ * 🎯 ELEMENTE INTERACTIVE CU ACCENT DINAMIC
+ * ======================================== */
+
+/* Butoane și linkuri interactive */
+.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: var(--nexus-primary) !important;
+    text-shadow: 0 0 10px var(--nexus-primary) !important;
+    transition: var(--nexus-transition-smooth) !important;
+}
+
+/* Excepție pentru pagina de detalii */
+#itemDetailPage .button-link {
+    color: inherit !important;
+    text-shadow: none !important;
+}
+
+/* Checkbox și input focus */
+.emby-checkbox:checked + span + .checkboxOutline,
+.emby-textarea:focus,
+.emby-select-withcolor:focus,
+.emby-input:focus,
+.itemSelectionPanel {
+    border: 2px solid var(--nexus-accent-alpha-75) !important;
+    box-shadow: var(--nexus-glow-primary) !important;
+}
+
+/* Text countdown și loading */
+.upNextDialog-countdownText {
+    color: var(--nexus-primary) !important;
+    text-shadow: 0 0 15px var(--nexus-primary) !important;
+}
+
+.mdl-spinner__layer-1 {
+    border-color: var(--nexus-primary) !important;
+}
+
+/* Switch controls */
+.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
+    background: var(--nexus-accent-alpha-50) !important;
+}
+
+.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
+    background: var(--nexus-primary) !important;
+    box-shadow: var(--nexus-glow-primary) !important;
+}
+
+/* Syncplay theming */
+.syncPlayIconCircle {
+    color: var(--nexus-primary) !important;
+    text-shadow: 0 0 20px var(--nexus-primary) !important;
+    background: var(--nexus-accent-alpha-25) !important;
+    border-radius: var(--nexus-radius-infinite) !important;
+    padding: var(--nexus-space-2) !important;
+}
+
+/* Subtitle preview cu gradient */
+.subtitleappearance-preview {
+    background: linear-gradient(140deg, var(--nexus-primary), var(--nexus-dark)) !important;
+    border: 1px solid var(--nexus-border-glow) !important;
+    border-radius: var(--nexus-radius-large) !important;
+    box-shadow: var(--nexus-glow-primary) !important;
+}
+
 /* Butoane secundare */
 .cancel.emby-button {
     background: var(--background-tertiary) !important;
@@ -872,21 +1105,39 @@ body::after {
     font-size: 0.9rem !important;
 }
 
+/* ========================================
+ * 🎭 CARDURI CAST ÎMBUNĂTĂȚITE (inspirat din Ultrachromic)
+ * ======================================== */
+
 /* Carduri pentru cast cu design circular modern */
 .personCard {
-    background: var(--background-overlay) !important;
+    background: var(--nexus-overlay) !important;
-    backdrop-filter: var(--blur-xs) !important;
+    backdrop-filter: var(--nexus-blur-soft) !important;
-    border: 1px solid var(--border-primary) !important;
+    border: 1px solid var(--nexus-border-primary) !important;
-    border-radius: var(--border-radius-2xl) !important;
+    border-radius: var(--nexus-rounding) !important;
-    transition: var(--transition-normal) !important;
+    transition: var(--nexus-transition-smooth) !important;
-    padding: var(--space-3) !important;
+    padding: var(--nexus-space-3) !important;
+    will-change: transform, box-shadow !important;
 }
 
 .personCard:hover {
-    transform: translateY(-4px) !important;
+    transform: translateY(-6px) scale(1.03) !important;
-    box-shadow: var(--shadow-lg) !important;
+    box-shadow: var(--nexus-shadow-xl), var(--nexus-glow-primary) !important;
-    border-color: var(--primary-color) !important;
+    border-color: var(--nexus-primary) !important;
-    background: var(--background-secondary) !important;
+    background: var(--nexus-accent-alpha-10) !important;
+}
+
+/* Cast thumbnails mai mici și rotunde (inspirat din Ultrachromic) */
+#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata,
+#castContent .card.overflowPortraitCard.personCard.card-withuserdata {
+    width: 110px !important;
+    font-size: 85% !important;
+    transition: var(--nexus-transition-smooth) !important;
+}
+
+#castContent .card.overflowPortraitCard.personCard:hover {
+    transform: translateY(-6px) scale(1.08) !important;
+    box-shadow: var(--nexus-shadow-xl), var(--nexus-glow-primary) !important;
 }
 
 /* ========================================
@@ -1978,8 +2229,11 @@ html {
  * - Transform și scale pentru efecte 3D
  * - Mix-blend-mode pentru efecte vizuale
  * - CSS Grid și Flexbox pentru layout fluid
+ * - Sistem accent dinamic inspirat din Ultrachromic
+ * - Optimizări performanță din Monochromic
+ * - Rounding system și backdrop filters avansate
  *
- * 🎯 DIFERENȚE FAȚĂ DE TEMA DE BAZĂ:
+ * 🎯 DIFERENȚE FAȚĂ DE TEMA DE BAZĂ + INTEGRĂRI:
  * ✓ Paleta de culori complet diferită (Nexus vs Standard)
  * ✓ Fundal cosmic animat vs gradient static
  * ✓ Efecte holografice vs efecte simple
@@ -1987,6 +2241,12 @@ html {
  * ✓ Design futuristic vs design modern clasic
  * ✓ Glow effects vs shadow effects
  * ✓ Particule animate vs fundal static
+ * ✓ Sistem accent dinamic (inspirat din Ultrachromic)
+ * ✓ Optimizări performanță (inspirat din Monochromic)
+ * ✓ Cast thumbnails mai mici și rotunde
+ * ✓ Backdrop filters avansate pentru imagini
+ * ✓ Scrollbar cu accent dinamic
+ * ✓ Progres bars cu efecte energetice
  *
  * 💡 PERSONALIZARE NEXUS:
  * Modifică variabilele --nexus-* din secțiunea :root