From 7d704ed0c2c5fb777aac39dca831853e2fe2d450 Mon Sep 17 00:00:00 2001
From: eddmanoo <eddmanoo@gmail.com>
Date: Fri, 19 Sep 2025 10:57:55 +0300
Subject: [PATCH] Update edd.css

---
 edd.css | 1460 +++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 1258 insertions(+), 202 deletions(-)

diff --git a/edd.css b/edd.css
index 8632ab6..12015d7 100644
--- a/edd.css
+++ b/edd.css
@@ -20,304 +20,997 @@
  */
 
 /* ========================================
- * VARIABILE CSS GLOBALE
+ * VARIABILE CSS GLOBALE - DESIGN MODERN PROFESIONAL
  * ======================================== */
 :root {
-    /* Paleta de culori principală */
-    --primary-color: #00a4dc;          /* Albastru Jellyfin */
-    --secondary-color: #1e1e1e;        /* Gri închis */
-    --accent-color: #ff6b35;           /* Portocaliu accent */
-    --background-dark: #0f0f0f;        /* Fundal foarte închis */
-    --background-medium: #1a1a1a;      /* Fundal mediu */
-    --background-light: #2a2a2a;       /* Fundal deschis */
-    --text-primary: #ffffff;           /* Text principal */
-    --text-secondary: #b3b3b3;         /* Text secundar */
-    --border-color: #333333;           /* Culoare borduri */
-    --success-color: #28a745;          /* Verde pentru succes */
-    --warning-color: #ffc107;          /* Galben pentru avertismente */
-    --error-color: #dc3545;            /* Roșu pentru erori */
+    /* Paleta de culori ultra-modernă */
+    --primary-color: #0ea5e9;          /* Sky Blue modern */
+    --primary-hover: #0284c7;          /* Sky Blue hover */
+    --secondary-color: #64748b;        /* Slate modern */
+    --accent-color: #f59e0b;           /* Amber accent */
+    --accent-hover: #d97706;           /* Amber hover */
 
-    /* Dimensiuni și spațiere */
-    --border-radius: 8px;
-    --border-radius-small: 4px;
-    --border-radius-large: 12px;
-    --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
-    --shadow-medium: 0 4px 8px rgba(0,0,0,0.2);
-    --shadow-heavy: 0 8px 16px rgba(0,0,0,0.3);
+    /* Fundal cu gradient și blur profesional */
+    --background-primary: #0f172a;     /* Slate 900 - foarte închis */
+    --background-secondary: #1e293b;   /* Slate 800 - mediu închis */
+    --background-tertiary: #334155;    /* Slate 700 - mediu */
+    --background-surface: #475569;     /* Slate 600 - deschis */
+    --background-overlay: rgba(15, 23, 42, 0.95);  /* Overlay cu transparență */
 
-    /* Tranziții */
-    --transition-fast: 0.2s ease;
-    --transition-medium: 0.3s ease;
-    --transition-slow: 0.5s ease;
+    /* Text ierarhic modern */
+    --text-primary: #f8fafc;           /* Slate 50 - text principal */
+    --text-secondary: #cbd5e1;         /* Slate 300 - text secundar */
+    --text-muted: #94a3b8;             /* Slate 400 - text estompat */
+    --text-disabled: #64748b;          /* Slate 500 - text dezactivat */
+
+    /* Borduri și separatori */
+    --border-primary: #334155;         /* Slate 700 */
+    --border-secondary: #475569;       /* Slate 600 */
+    --border-accent: var(--primary-color);
+
+    /* Culori de stare */
+    --success-color: #10b981;          /* Emerald 500 */
+    --success-bg: rgba(16, 185, 129, 0.1);
+    --warning-color: #f59e0b;          /* Amber 500 */
+    --warning-bg: rgba(245, 158, 11, 0.1);
+    --error-color: #ef4444;            /* Red 500 */
+    --error-bg: rgba(239, 68, 68, 0.1);
+    --info-color: #3b82f6;             /* Blue 500 */
+    --info-bg: rgba(59, 130, 246, 0.1);
+
+    /* Dimensiuni moderne și spațiere */
+    --border-radius-xs: 2px;
+    --border-radius-sm: 4px;
+    --border-radius-md: 6px;
+    --border-radius-lg: 8px;
+    --border-radius-xl: 12px;
+    --border-radius-2xl: 16px;
+    --border-radius-3xl: 24px;
+    --border-radius-full: 9999px;
+
+    /* Umbre profesionale cu blur */
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+    --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.3);
+
+    /* Tranziții și animații fluide */
+    --transition-all: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-fast: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-normal: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+    /* Blur effects profesionale */
+    --blur-xs: blur(2px);
+    --blur-sm: blur(4px);
+    --blur-md: blur(8px);
+    --blur-lg: blur(12px);
+    --blur-xl: blur(16px);
+    --blur-2xl: blur(24px);
+    --blur-3xl: blur(40px);
+
+    /* Spacing system consistent */
+    --space-1: 0.25rem;   /* 4px */
+    --space-2: 0.5rem;    /* 8px */
+    --space-3: 0.75rem;   /* 12px */
+    --space-4: 1rem;      /* 16px */
+    --space-5: 1.25rem;   /* 20px */
+    --space-6: 1.5rem;    /* 24px */
+    --space-8: 2rem;      /* 32px */
+    --space-10: 2.5rem;   /* 40px */
+    --space-12: 3rem;     /* 48px */
+    --space-16: 4rem;     /* 64px */
+    --space-20: 5rem;     /* 80px */
 }
 
 /* ========================================
- * STILURI GENERALE PENTRU FUNDAL ȘI LAYOUT
+ * FUNDAL MODERN CU BLUR ȘI GRADIENT PROFESIONAL
  * ======================================== */
 
-/* Fundal principal al aplicației */
-.backgroundContainer,
-.dialog,
+/* Reset și fundal principal ultra-modern */
+* {
+    box-sizing: border-box;
+}
+
 html {
-    background-color: var(--background-dark) !important;
-    color: var(--text-primary);
+    background: var(--background-primary) !important;
+    color: var(--text-primary) !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
 }
 
-/* Container principal pentru conținut */
+body {
+    background: var(--background-primary) !important;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+}
+
+/* Container principal cu gradient și blur profesional */
+.backgroundContainer,
+.dialog {
+    background: linear-gradient(
+        135deg,
+        var(--background-primary) 0%,
+        var(--background-secondary) 25%,
+        var(--background-tertiary) 75%,
+        var(--background-secondary) 100%
+    ) !important;
+    position: relative;
+    min-height: 100vh;
+}
+
+/* Overlay cu blur pentru fundal */
+.backgroundContainer::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+        radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
+    backdrop-filter: var(--blur-xs);
+    z-index: -1;
+    pointer-events: none;
+}
+
+/* Container pentru backdrop cu blur avansat */
 .backgroundContainer.withBackdrop,
-.backdropContainer,
-.backgroundContainer {
-    background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%) !important;
+.backdropContainer {
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-md) !important;
+    -webkit-backdrop-filter: var(--blur-md) !important;
 }
 
-/* Îmbunătățiri pentru scrolling */
+/* Backdrop image cu overlay modern */
+.backdropImage {
+    opacity: 0.15 !important;
+    filter: blur(2px) saturate(1.2) !important;
+    transition: var(--transition-slow) !important;
+}
+
+/* Scrollbar ultra-modern și subtil */
 * {
     scrollbar-width: thin;
-    scrollbar-color: var(--primary-color) var(--background-medium);
+    scrollbar-color: var(--primary-color) transparent;
 }
 
 *::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
 }
 
 *::-webkit-scrollbar-track {
-    background: var(--background-medium);
-    border-radius: var(--border-radius-small);
+    background: transparent;
+    border-radius: var(--border-radius-full);
 }
 
 *::-webkit-scrollbar-thumb {
-    background: var(--primary-color);
-    border-radius: var(--border-radius-small);
-    transition: background var(--transition-fast);
+    background: linear-gradient(
+        180deg,
+        var(--primary-color) 0%,
+        var(--primary-hover) 100%
+    );
+    border-radius: var(--border-radius-full);
+    transition: var(--transition-normal);
+    border: 1px solid var(--background-secondary);
 }
 
 *::-webkit-scrollbar-thumb:hover {
-    background: var(--accent-color);
+    background: linear-gradient(
+        180deg,
+        var(--accent-color) 0%,
+        var(--accent-hover) 100%
+    );
+    box-shadow: var(--shadow-glow);
+}
+
+*::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+/* Îmbunătățiri pentru selecția textului */
+::selection {
+    background: rgba(14, 165, 233, 0.3);
+    color: var(--text-primary);
+}
+
+::-moz-selection {
+    background: rgba(14, 165, 233, 0.3);
+    color: var(--text-primary);
 }
 
 /* ========================================
- * HEADER ȘI NAVIGARE
+ * HEADER MODERN CU GLASSMORPHISM
  * ======================================== */
 
-/* Header principal - design transparent modern */
-.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
-    background: rgba(15, 15, 15, 0.95) !important;
-    backdrop-filter: blur(10px);
-    border-bottom: 1px solid var(--border-color);
-    box-shadow: var(--shadow-medium);
-    transition: all var(--transition-medium);
-}
-
+/* Header principal cu efect glassmorphism */
+.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred,
 .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
-    background: rgba(15, 15, 15, 0.95) !important;
-    backdrop-filter: blur(10px);
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-lg) !important;
+    -webkit-backdrop-filter: var(--blur-lg) !important;
+    border-bottom: 1px solid var(--border-primary) !important;
+    box-shadow: var(--shadow-lg) !important;
+    transition: var(--transition-normal) !important;
+    position: relative;
+    z-index: 1000;
 }
 
-/* Butoane din header */
+/* Efect glow subtil pentru header */
+.skinHeader::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--primary-color) 50%,
+        transparent 100%
+    );
+    opacity: 0.6;
+}
+
+/* Butoane header cu design modern */
 .headerButton {
-    color: var(--text-primary) !important;
-    transition: all var(--transition-fast);
-    border-radius: var(--border-radius-small);
-    margin: 0 4px;
+    color: var(--text-secondary) !important;
+    background: transparent !important;
+    border: 1px solid transparent !important;
+    border-radius: var(--border-radius-lg) !important;
+    padding: var(--space-2) var(--space-3) !important;
+    margin: 0 var(--space-1) !important;
+    transition: var(--transition-normal) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.headerButton::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(14, 165, 233, 0.1) 50%,
+        transparent 100%
+    );
+    transition: var(--transition-normal);
 }
 
 .headerButton:hover {
-    background-color: var(--primary-color) !important;
-    color: white !important;
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-light);
+    color: var(--text-primary) !important;
+    background: var(--background-tertiary) !important;
+    border-color: var(--border-accent) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: var(--shadow-md) !important;
 }
 
-/* Meniu lateral (drawer) */
+.headerButton:hover::before {
+    left: 100%;
+}
+
+.headerButton:active {
+    transform: translateY(0) !important;
+    box-shadow: var(--shadow-sm) !important;
+}
+
+/* Meniu lateral cu glassmorphism */
 .mainDrawer {
-    background: var(--background-medium) !important;
-    border-right: 1px solid var(--border-color);
-    box-shadow: var(--shadow-heavy);
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-lg) !important;
+    -webkit-backdrop-filter: var(--blur-lg) !important;
+    border-right: 1px solid var(--border-primary) !important;
+    box-shadow: var(--shadow-2xl) !important;
+    transition: var(--transition-normal) !important;
 }
 
 .mainDrawer-scrollContainer {
     color: var(--text-primary) !important;
+    padding: var(--space-4) !important;
 }
 
-/* Opțiuni din meniul lateral */
+/* Opțiuni meniu lateral moderne */
 .navMenuOption {
     color: var(--text-secondary) !important;
-    transition: all var(--transition-fast);
-    border-radius: var(--border-radius-small);
-    margin: 2px 8px;
+    background: transparent !important;
+    border: 1px solid transparent !important;
+    border-radius: var(--border-radius-lg) !important;
+    padding: var(--space-3) var(--space-4) !important;
+    margin: var(--space-1) 0 !important;
+    transition: var(--transition-normal) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.navMenuOption::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(14, 165, 233, 0.05) 50%,
+        transparent 100%
+    );
+    transition: var(--transition-normal);
 }
 
 .navMenuOption:hover {
-    background-color: var(--background-light) !important;
     color: var(--text-primary) !important;
-    transform: translateX(4px);
+    background: var(--background-tertiary) !important;
+    border-color: var(--border-secondary) !important;
+    transform: translateX(var(--space-1)) !important;
+    box-shadow: var(--shadow-sm) !important;
+}
+
+.navMenuOption:hover::before {
+    left: 100%;
 }
 
 .navMenuOption-selected {
-    background: var(--primary-color) !important;
-    color: white !important;
-    box-shadow: var(--shadow-light);
+    color: var(--text-primary) !important;
+    background: linear-gradient(
+        135deg,
+        var(--primary-color) 0%,
+        var(--primary-hover) 100%
+    ) !important;
+    border-color: var(--primary-color) !important;
+    box-shadow: var(--shadow-glow) !important;
+    font-weight: 600 !important;
+}
+
+.navMenuOption-selected::before {
+    display: none;
 }
 
 /* ========================================
- * TABURI ȘI BUTOANE
+ * TABURI ȘI BUTOANE ULTRA-MODERNE
  * ======================================== */
 
-/* Taburi principale - design îmbunătățit */
+/* Container taburi cu design modern */
 .headerTabs.sectionTabs {
-    text-size-adjust: 110%;
-    font-size: 110%;
-    border-bottom: 1px solid var(--border-color);
+    background: var(--background-secondary) !important;
+    border-bottom: 1px solid var(--border-primary) !important;
+    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0 !important;
+    padding: var(--space-2) var(--space-4) !important;
+    margin: 0 !important;
+    position: relative;
+    overflow: hidden;
 }
 
+.headerTabs.sectionTabs::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--primary-color) 50%,
+        transparent 100%
+    );
+    opacity: 0.5;
+}
+
+/* Taburi individuale cu efect glassmorphism */
 .emby-tab-button {
-    padding: 1.75em 1.7em;
-    color: var(--text-secondary) !important;
-    transition: all var(--transition-fast);
-    border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
-    margin: 0 2px;
+    background: transparent !important;
+    color: var(--text-muted) !important;
+    border: 1px solid transparent !important;
+    border-radius: var(--border-radius-xl) !important;
+    padding: var(--space-4) var(--space-6) !important;
+    margin: 0 var(--space-1) !important;
+    font-weight: 500 !important;
+    font-size: 0.95rem !important;
+    transition: var(--transition-normal) !important;
     position: relative;
+    overflow: hidden;
+    backdrop-filter: var(--blur-xs) !important;
+}
+
+.emby-tab-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(14, 165, 233, 0.1) 50%,
+        transparent 100%
+    );
+    transition: var(--transition-normal);
 }
 
 .emby-tab-button:hover {
-    color: var(--text-primary) !important;
-    background-color: var(--background-light);
-    transform: translateY(-2px);
+    color: var(--text-secondary) !important;
+    background: var(--background-tertiary) !important;
+    border-color: var(--border-secondary) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: var(--shadow-md) !important;
+}
+
+.emby-tab-button:hover::before {
+    left: 100%;
 }
 
 .emby-tab-button.emby-tab-button-active {
-    color: var(--primary-color) !important;
-    background-color: var(--background-medium);
-    border-bottom: 3px solid var(--primary-color);
+    color: var(--text-primary) !important;
+    background: linear-gradient(
+        135deg,
+        var(--primary-color) 0%,
+        var(--primary-hover) 100%
+    ) !important;
+    border-color: var(--primary-color) !important;
+    box-shadow: var(--shadow-glow) !important;
+    font-weight: 600 !important;
+    transform: translateY(-1px) !important;
 }
 
-/* Butoane generale */
+.emby-tab-button.emby-tab-button-active::before {
+    display: none;
+}
+
+.emby-tab-button.emby-tab-button-active::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60%;
+    height: 2px;
+    background: var(--accent-color);
+    border-radius: var(--border-radius-full);
+}
+
+/* Butoane principale cu design premium */
 .button-submit,
 .raised.emby-button {
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: var(--border-radius) !important;
-    padding: 12px 24px !important;
+    background: linear-gradient(
+        135deg,
+        var(--primary-color) 0%,
+        var(--primary-hover) 50%,
+        var(--accent-color) 100%
+    ) !important;
+    color: var(--text-primary) !important;
+    border: 1px solid var(--primary-color) !important;
+    border-radius: var(--border-radius-xl) !important;
+    padding: var(--space-3) var(--space-6) !important;
     font-weight: 600 !important;
-    transition: all var(--transition-fast) !important;
-    box-shadow: var(--shadow-light) !important;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+    font-size: 0.9rem !important;
+    text-transform: none !important;
+    letter-spacing: 0.025em !important;
+    transition: var(--transition-normal) !important;
+    box-shadow: var(--shadow-md) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.button-submit::before,
+.raised.emby-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.2) 50%,
+        transparent 100%
+    );
+    transition: var(--transition-normal);
 }
 
 .button-submit:hover,
 .raised.emby-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: var(--shadow-medium) !important;
-    background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%) !important;
+    transform: translateY(-2px) scale(1.02) !important;
+    box-shadow: var(--shadow-xl) !important;
+    border-color: var(--accent-color) !important;
+}
+
+.button-submit:hover::before,
+.raised.emby-button:hover::before {
+    left: 100%;
+}
+
+.button-submit:active,
+.raised.emby-button:active {
+    transform: translateY(0) scale(1) !important;
+    box-shadow: var(--shadow-md) !important;
+}
+
+/* Butoane secundare */
+.cancel.emby-button {
+    background: var(--background-tertiary) !important;
+    color: var(--text-secondary) !important;
+    border: 1px solid var(--border-secondary) !important;
+    border-radius: var(--border-radius-xl) !important;
+    transition: var(--transition-normal) !important;
+}
+
+.cancel.emby-button:hover {
+    background: var(--background-surface) !important;
+    color: var(--text-primary) !important;
+    border-color: var(--border-accent) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: var(--shadow-sm) !important;
 }
 
 /* ========================================
- * CARDURI ȘI ELEMENTE MEDIA
+ * CARDURI MEDIA CU GLASSMORPHISM AVANSAT
  * ======================================== */
 
-/* Carduri pentru filme, seriale, etc. */
+/* Container pentru carduri cu layout modern */
+.itemsContainer {
+    gap: var(--space-4) !important;
+    padding: var(--space-4) !important;
+}
+
+/* Carduri principale cu efect glassmorphism */
 .cardBox {
-    background: var(--background-medium) !important;
-    border: 1px solid var(--border-color) !important;
-    border-radius: var(--border-radius) !important;
-    transition: all var(--transition-medium) !important;
-    box-shadow: var(--shadow-light) !important;
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-sm) !important;
+    -webkit-backdrop-filter: var(--blur-sm) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--border-radius-2xl) !important;
+    transition: var(--transition-normal) !important;
+    box-shadow: var(--shadow-md) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.cardBox::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(248, 250, 252, 0.1) 50%,
+        transparent 100%
+    );
 }
 
 .cardBox:hover {
-    transform: translateY(-4px) scale(1.02) !important;
-    box-shadow: var(--shadow-heavy) !important;
+    transform: translateY(-8px) scale(1.03) !important;
+    box-shadow: var(--shadow-2xl) !important;
     border-color: var(--primary-color) !important;
+    background: var(--background-secondary) !important;
 }
 
-/* Imagini din carduri - colțuri rotunjite */
+.cardBox:hover::before {
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--primary-color) 50%,
+        transparent 100%
+    );
+    opacity: 0.8;
+}
+
+/* Imagini din carduri cu efecte moderne */
 .cardContent-button,
 .itemDetailImage,
 .cardImageContainer {
-    border-radius: var(--border-radius) !important;
+    border-radius: var(--border-radius-xl) !important;
     overflow: hidden !important;
-    transition: all var(--transition-medium) !important;
+    transition: var(--transition-normal) !important;
+    position: relative;
+}
+
+.cardContent-button::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+        180deg,
+        transparent 0%,
+        transparent 60%,
+        rgba(15, 23, 42, 0.8) 100%
+    );
+    opacity: 0;
+    transition: var(--transition-normal);
 }
 
 .cardContent-button:hover {
     transform: scale(1.05) !important;
+    box-shadow: var(--shadow-lg) !important;
 }
 
-/* Text din carduri */
+.cardContent-button:hover::after {
+    opacity: 1;
+}
+
+/* Text din carduri cu tipografie modernă */
 .cardText {
     color: var(--text-primary) !important;
-    font-weight: 500 !important;
+    font-weight: 600 !important;
+    font-size: 0.95rem !important;
+    line-height: 1.4 !important;
+    margin: var(--space-3) 0 var(--space-1) 0 !important;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
 }
 
 .cardText-secondary {
-    color: var(--text-secondary) !important;
+    color: var(--text-muted) !important;
+    font-weight: 400 !important;
+    font-size: 0.85rem !important;
+    line-height: 1.3 !important;
+    margin: 0 0 var(--space-2) 0 !important;
+}
+
+/* Carduri pentru episoade cu design special */
+.listItemImage.listItemImage-large.itemAction.lazy {
+    height: 120px !important;
+    border-radius: var(--border-radius-xl) !important;
+    transition: var(--transition-normal) !important;
+    box-shadow: var(--shadow-sm) !important;
+}
+
+.listItemImage.listItemImage-large.itemAction.lazy:hover {
+    transform: scale(1.05) !important;
+    box-shadow: var(--shadow-lg) !important;
+}
+
+.listItem-content {
+    height: auto !important;
+    padding: var(--space-4) !important;
+    background: var(--background-secondary) !important;
+    border-radius: var(--border-radius-xl) !important;
+    margin: var(--space-2) 0 !important;
+    border: 1px solid var(--border-primary) !important;
+    transition: var(--transition-normal) !important;
+}
+
+.listItem-content:hover {
+    background: var(--background-tertiary) !important;
+    border-color: var(--border-secondary) !important;
+    transform: translateX(var(--space-2)) !important;
+}
+
+.secondary.listItem-overview.listItemBodyText {
+    color: var(--text-muted) !important;
+    line-height: 1.5 !important;
+    margin: var(--space-2) 0 0 0 !important;
+    font-size: 0.9rem !important;
+}
+
+/* Carduri pentru cast cu design circular modern */
+.personCard {
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-xs) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--border-radius-2xl) !important;
+    transition: var(--transition-normal) !important;
+    padding: var(--space-3) !important;
+}
+
+.personCard:hover {
+    transform: translateY(-4px) !important;
+    box-shadow: var(--shadow-lg) !important;
+    border-color: var(--primary-color) !important;
+    background: var(--background-secondary) !important;
 }
 
 /* ========================================
- * INDICATORI ȘI BADGE-URI
+ * INDICATORI ȘI BADGE-URI MODERNE
  * ======================================== */
 
-/* Indicator pentru conținut vizionat */
+/* Indicator pentru conținut vizionat cu design modern */
 .playedIndicator {
-    background: var(--success-color) !important;
-    border-radius: 50% !important;
-    box-shadow: var(--shadow-light) !important;
+    background: linear-gradient(
+        135deg,
+        var(--success-color) 0%,
+        #059669 100%
+    ) !important;
+    border: 2px solid var(--background-primary) !important;
+    border-radius: var(--border-radius-full) !important;
+    box-shadow: var(--shadow-md), 0 0 0 2px rgba(16, 185, 129, 0.3) !important;
+    width: 24px !important;
+    height: 24px !important;
+    position: relative;
 }
 
-/* Indicatori transparenți și eleganți */
+.playedIndicator::before {
+    content: '✓';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+/* Indicatori cu glassmorphism */
 .indicator {
-    background: rgba(0, 0, 0, 0.7) !important;
-    color: white !important;
-    border-radius: var(--border-radius-small) !important;
-    backdrop-filter: blur(5px) !important;
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-md) !important;
+    -webkit-backdrop-filter: var(--blur-md) !important;
+    color: var(--text-primary) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--border-radius-lg) !important;
+    box-shadow: var(--shadow-sm) !important;
+    font-weight: 500 !important;
+    padding: var(--space-1) var(--space-2) !important;
+    font-size: 0.8rem !important;
 }
 
 /* Indicatori pentru numărul de episoade */
 .countIndicator {
-    background: var(--primary-color) !important;
-    color: white !important;
-    border-radius: var(--border-radius-large) !important;
-    font-weight: 600 !important;
-    box-shadow: var(--shadow-light) !important;
+    background: linear-gradient(
+        135deg,
+        var(--primary-color) 0%,
+        var(--primary-hover) 100%
+    ) !important;
+    color: var(--text-primary) !important;
+    border: 1px solid var(--primary-color) !important;
+    border-radius: var(--border-radius-full) !important;
+    font-weight: 700 !important;
+    font-size: 0.75rem !important;
+    padding: var(--space-1) var(--space-2) !important;
+    box-shadow: var(--shadow-md), var(--shadow-glow) !important;
+    min-width: 24px !important;
+    height: 24px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
 }
 
-/* Rating cu stele */
+/* Badge pentru progres */
+.progressIndicator {
+    background: linear-gradient(
+        90deg,
+        var(--accent-color) 0%,
+        var(--accent-hover) 100%
+    ) !important;
+    border-radius: var(--border-radius-full) !important;
+    height: 4px !important;
+    box-shadow: var(--shadow-sm) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.progressIndicator::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.3) 50%,
+        transparent 100%
+    );
+    animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+/* Rating cu stele îmbunătățit */
 .starRatingContainer {
-    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
+    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
+    padding: var(--space-1) !important;
+}
+
+.starRatingContainer .material-icons {
+    color: var(--accent-color) !important;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
+    transition: var(--transition-fast) !important;
+}
+
+.starRatingContainer .material-icons:hover {
+    color: var(--accent-hover) !important;
+    transform: scale(1.1) !important;
+}
+
+/* Badge-uri pentru genuri */
+.genreChip {
+    background: var(--background-tertiary) !important;
+    color: var(--text-secondary) !important;
+    border: 1px solid var(--border-secondary) !important;
+    border-radius: var(--border-radius-full) !important;
+    padding: var(--space-1) var(--space-3) !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    transition: var(--transition-normal) !important;
+    margin: var(--space-1) !important;
+}
+
+.genreChip:hover {
+    background: var(--primary-color) !important;
+    color: var(--text-primary) !important;
+    border-color: var(--primary-color) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: var(--shadow-sm) !important;
+}
+
+/* Indicator pentru calitate video */
+.mediaInfoBadge {
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-sm) !important;
+    color: var(--text-primary) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--border-radius-md) !important;
+    padding: var(--space-1) var(--space-2) !important;
+    font-size: 0.7rem !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
 }
 
 /* ========================================
- * FORMULARE ȘI INPUTURI
+ * FORMULARE ȘI INPUTURI MODERNE
  * ======================================== */
 
-/* Câmpuri de input */
+/* Câmpuri de input cu glassmorphism */
 .emby-input,
 .emby-textarea,
 .emby-select {
-    background-color: var(--background-light) !important;
-    border: 2px solid var(--border-color) !important;
-    border-radius: var(--border-radius) !important;
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-sm) !important;
+    -webkit-backdrop-filter: var(--blur-sm) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--border-radius-xl) !important;
     color: var(--text-primary) !important;
-    padding: 12px 16px !important;
-    transition: all var(--transition-fast) !important;
+    padding: var(--space-4) var(--space-5) !important;
+    font-size: 0.95rem !important;
+    font-weight: 400 !important;
+    transition: var(--transition-normal) !important;
+    box-shadow: var(--shadow-sm) !important;
+    position: relative;
 }
 
 .emby-input:focus,
 .emby-textarea:focus,
 .emby-select-withcolor {
     border-color: var(--primary-color) !important;
-    box-shadow: 0 0 0 3px rgba(0, 164, 220, 0.2) !important;
-    background-color: var(--background-medium) !important;
+    box-shadow:
+        var(--shadow-md),
+        0 0 0 3px rgba(14, 165, 233, 0.1) !important;
+    background: var(--background-secondary) !important;
+    transform: translateY(-1px) !important;
 }
 
-/* Placeholder text */
+.emby-input:hover,
+.emby-textarea:hover,
+.emby-select:hover {
+    border-color: var(--border-secondary) !important;
+    background: var(--background-secondary) !important;
+}
+
+/* Placeholder text modern */
 .emby-input::placeholder,
 .emby-textarea::placeholder {
+    color: var(--text-muted) !important;
+    opacity: 0.8 !important;
+    font-weight: 400 !important;
+}
+
+/* Labels pentru formulare */
+.inputLabel,
+.fieldDescription {
     color: var(--text-secondary) !important;
-    opacity: 0.7;
+    font-weight: 500 !important;
+    font-size: 0.9rem !important;
+    margin-bottom: var(--space-2) !important;
+}
+
+/* Checkbox și radio buttons moderne */
+.emby-checkbox,
+.emby-radio {
+    appearance: none !important;
+    width: 20px !important;
+    height: 20px !important;
+    border: 2px solid var(--border-primary) !important;
+    border-radius: var(--border-radius-sm) !important;
+    background: var(--background-tertiary) !important;
+    transition: var(--transition-normal) !important;
+    position: relative !important;
+    cursor: pointer !important;
+}
+
+.emby-radio {
+    border-radius: var(--border-radius-full) !important;
+}
+
+.emby-checkbox:checked,
+.emby-radio:checked {
+    background: var(--primary-color) !important;
+    border-color: var(--primary-color) !important;
+    box-shadow: var(--shadow-glow) !important;
+}
+
+.emby-checkbox:checked::after {
+    content: '✓';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.emby-radio:checked::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 8px;
+    height: 8px;
+    background: white;
+    border-radius: var(--border-radius-full);
+}
+
+/* Select dropdown modern */
+.emby-select {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
+    background-position: right var(--space-3) center !important;
+    background-repeat: no-repeat !important;
+    background-size: 16px 16px !important;
+    padding-right: var(--space-10) !important;
+}
+
+/* Slider modern */
+.mdl-slider {
+    background: var(--border-primary) !important;
+    height: 6px !important;
+    border-radius: var(--border-radius-full) !important;
+}
+
+.mdl-slider::-webkit-slider-thumb {
+    background: var(--primary-color) !important;
+    border: 2px solid white !important;
+    border-radius: var(--border-radius-full) !important;
+    box-shadow: var(--shadow-md) !important;
+    width: 20px !important;
+    height: 20px !important;
+    transition: var(--transition-normal) !important;
+}
+
+.mdl-slider::-webkit-slider-thumb:hover {
+    background: var(--primary-hover) !important;
+    transform: scale(1.1) !important;
+    box-shadow: var(--shadow-lg) !important;
 }
 
 /* ========================================
@@ -356,17 +1049,21 @@ html {
 }
 
 /* ========================================
- * PAGINA DE LOGIN
+ * PAGINA DE LOGIN ULTRA-MODERNĂ
  * ======================================== */
 
-/* Container pentru pagina de login */
+/* Container principal pentru login cu fundal animat */
 #loginPage {
-    background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%);
-    background-size: cover;
+    background: var(--background-primary) !important;
     position: relative;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
 }
 
-/* Overlay pentru pagina de login */
+/* Fundal animat cu particule */
 #loginPage::before {
     content: '';
     position: absolute;
@@ -374,41 +1071,178 @@ html {
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(15, 15, 15, 0.8);
-    backdrop-filter: blur(5px);
+    background:
+        radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
+    animation: float 20s ease-in-out infinite;
 }
 
-/* Formular de login - design minimalist */
-#loginPage .readOnlyContent,
-#loginPage form {
-    max-width: 400px !important;
-    background: rgba(26, 26, 26, 0.95) !important;
-    border-radius: var(--border-radius-large) !important;
-    padding: 40px !important;
-    box-shadow: var(--shadow-heavy) !important;
-    border: 1px solid var(--border-color) !important;
-    position: relative;
+@keyframes float {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    33% { transform: translateY(-20px) rotate(1deg); }
+    66% { transform: translateY(10px) rotate(-1deg); }
+}
+
+/* Overlay cu blur pentru login */
+#loginPage::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    backdrop-filter: var(--blur-sm);
+    -webkit-backdrop-filter: var(--blur-sm);
     z-index: 1;
 }
 
-/* Titlu login */
+/* Formular de login cu glassmorphism premium */
+#loginPage .readOnlyContent,
+#loginPage form {
+    max-width: 420px !important;
+    width: 90% !important;
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-lg) !important;
+    -webkit-backdrop-filter: var(--blur-lg) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--border-radius-3xl) !important;
+    padding: var(--space-12) var(--space-8) !important;
+    box-shadow: var(--shadow-2xl) !important;
+    position: relative;
+    z-index: 2;
+    margin: var(--space-8);
+}
+
+/* Efect glow pentru formular */
+#loginPage .readOnlyContent::before,
+#loginPage form::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--primary-color) 50%,
+        transparent 100%
+    );
+    opacity: 0.6;
+}
+
+/* Logo și titlu login */
 #loginPage h1 {
-    color: var(--primary-color) !important;
+    color: var(--text-primary) !important;
     text-align: center !important;
-    margin-bottom: 30px !important;
+    margin-bottom: var(--space-8) !important;
     font-weight: 300 !important;
-    font-size: 2.5em !important;
+    font-size: 2.5rem !important;
+    background: linear-gradient(
+        135deg,
+        var(--text-primary) 0%,
+        var(--primary-color) 100%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Subtitle pentru login */
+#loginPage .readOnlyContent p,
+#loginPage form p {
+    color: var(--text-muted) !important;
+    text-align: center !important;
+    margin-bottom: var(--space-6) !important;
+    font-size: 0.95rem !important;
+}
+
+/* Inputuri în formular login */
+#loginPage .emby-input {
+    background: var(--background-secondary) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--border-radius-xl) !important;
+    padding: var(--space-4) var(--space-5) !important;
+    margin-bottom: var(--space-4) !important;
+    font-size: 1rem !important;
+    transition: var(--transition-normal) !important;
+}
+
+#loginPage .emby-input:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow:
+        var(--shadow-md),
+        0 0 0 3px rgba(14, 165, 233, 0.1) !important;
+    background: var(--background-tertiary) !important;
+}
+
+/* Buton login premium */
+#loginPage .raised.emby-button {
+    width: 100% !important;
+    background: linear-gradient(
+        135deg,
+        var(--primary-color) 0%,
+        var(--primary-hover) 50%,
+        var(--accent-color) 100%
+    ) !important;
+    border: none !important;
+    border-radius: var(--border-radius-xl) !important;
+    padding: var(--space-4) !important;
+    font-size: 1.1rem !important;
+    font-weight: 600 !important;
+    margin-top: var(--space-6) !important;
+    transition: var(--transition-normal) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+#loginPage .raised.emby-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.2) 50%,
+        transparent 100%
+    );
+    transition: var(--transition-normal);
+}
+
+#loginPage .raised.emby-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: var(--shadow-xl) !important;
+}
+
+#loginPage .raised.emby-button:hover::before {
+    left: 100%;
 }
 
 /* Spațiere pentru formular */
 #loginPage .padded-left.padded-right.padded-bottom-page {
-    margin-top: 50px;
+    margin-top: 0 !important;
+    padding: 0 !important;
 }
 
-/* Ascunde butoanele manual și forgot password */
+/* Ascunde butoanele nedorite */
 #loginPage .raised.cancel.block.btnManual.emby-button,
 #loginPage .raised.cancel.block.btnForgotPassword.emby-button {
-    display: none;
+    display: none !important;
+}
+
+/* Link-uri în footer login */
+#loginPage a {
+    color: var(--text-muted) !important;
+    text-decoration: none !important;
+    transition: var(--transition-fast) !important;
+}
+
+#loginPage a:hover {
+    color: var(--primary-color) !important;
 }
 
 /* ========================================
@@ -719,48 +1553,270 @@ div.nextUpSection {
 }
 
 /* ========================================
- * FINALIZARE ȘI OPTIMIZĂRI
+ * DIALOGURI ȘI MODALE MODERNE
  * ======================================== */
 
-/* Optimizări pentru performanță */
-* {
-    will-change: auto !important;
+/* Backdrop pentru dialoguri cu blur */
+.dialogBackdrop {
+    background: rgba(15, 23, 42, 0.8) !important;
+    backdrop-filter: var(--blur-md) !important;
+    -webkit-backdrop-filter: var(--blur-md) !important;
+    transition: var(--transition-normal) !important;
 }
 
+/* Dialoguri cu glassmorphism */
+.dialog {
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-lg) !important;
+    -webkit-backdrop-filter: var(--blur-lg) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--border-radius-3xl) !important;
+    box-shadow: var(--shadow-2xl) !important;
+    max-width: 90vw !important;
+    max-height: 90vh !important;
+    overflow: hidden !important;
+}
+
+/* Header dialoguri */
+.dialog h2,
+.dialog h3 {
+    color: var(--text-primary) !important;
+    font-weight: 600 !important;
+    margin-bottom: var(--space-4) !important;
+    padding-bottom: var(--space-2) !important;
+    border-bottom: 1px solid var(--border-primary) !important;
+}
+
+/* Conținut dialoguri */
+.dialog .dialogContent {
+    padding: var(--space-6) !important;
+    color: var(--text-secondary) !important;
+    line-height: 1.6 !important;
+}
+
+/* ========================================
+ * PLAYER VIDEO MODERN
+ * ======================================== */
+
+/* Controale video cu glassmorphism */
+.videoOsdBottom {
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-lg) !important;
+    -webkit-backdrop-filter: var(--blur-lg) !important;
+    border-top: 1px solid var(--border-primary) !important;
+    padding: var(--space-4) !important;
+}
+
+/* Bara de progres video modernă */
+.osdProgressBar {
+    background: var(--border-primary) !important;
+    height: 6px !important;
+    border-radius: var(--border-radius-full) !important;
+    overflow: hidden !important;
+}
+
+.osdProgressBarForeground {
+    background: linear-gradient(
+        90deg,
+        var(--primary-color) 0%,
+        var(--accent-color) 100%
+    ) !important;
+    border-radius: var(--border-radius-full) !important;
+    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5) !important;
+}
+
+/* Butoane player moderne */
+.videoOsdBottom .material-icons {
+    color: var(--text-primary) !important;
+    background: var(--background-tertiary) !important;
+    border-radius: var(--border-radius-full) !important;
+    padding: var(--space-2) !important;
+    margin: 0 var(--space-1) !important;
+    transition: var(--transition-normal) !important;
+}
+
+.videoOsdBottom .material-icons:hover {
+    color: var(--primary-color) !important;
+    background: var(--background-surface) !important;
+    transform: scale(1.1) !important;
+    box-shadow: var(--shadow-md) !important;
+}
+
+/* ========================================
+ * RESPONSIVE DESIGN AVANSAT
+ * ======================================== */
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+    :root {
+        --space-4: 0.75rem;
+        --space-6: 1rem;
+        --space-8: 1.5rem;
+    }
+
+    .emby-tab-button {
+        padding: var(--space-4) var(--space-3) !important;
+        font-size: 0.9rem !important;
+    }
+
+    .cardBox {
+        margin: var(--space-2) !important;
+        border-radius: var(--border-radius-xl) !important;
+    }
+
+    #loginPage .readOnlyContent,
+    #loginPage form {
+        padding: var(--space-8) var(--space-6) !important;
+        margin: var(--space-4) !important;
+    }
+
+    .headerButton {
+        padding: var(--space-2) !important;
+        margin: 0 var(--space-1) !important;
+    }
+}
+
+/* Tablet optimizations */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .itemsContainer {
+        gap: var(--space-3) !important;
+    }
+
+    .cardBox {
+        margin: var(--space-2) !important;
+    }
+}
+
+/* Desktop large screens */
+@media (min-width: 1440px) {
+    .itemsContainer {
+        gap: var(--space-6) !important;
+        padding: var(--space-6) !important;
+    }
+
+    .cardBox {
+        margin: var(--space-3) !important;
+    }
+}
+
+/* ========================================
+ * ANIMAȚII ȘI MICRO-INTERACȚIUNI
+ * ======================================== */
+
+/* Animație pentru încărcare */
+@keyframes pulse-glow {
+    0%, 100% {
+        opacity: 1;
+        box-shadow: 0 0 5px rgba(14, 165, 233, 0.5);
+    }
+    50% {
+        opacity: 0.8;
+        box-shadow: 0 0 20px rgba(14, 165, 233, 0.8);
+    }
+}
+
+.loading {
+    animation: pulse-glow 2s ease-in-out infinite !important;
+}
+
+/* Animație pentru carduri noi */
+@keyframes slideInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.cardBox {
+    animation: slideInUp 0.6s ease-out !important;
+}
+
+/* Animație pentru butoane active */
+@keyframes buttonPress {
+    0% { transform: scale(1); }
+    50% { transform: scale(0.95); }
+    100% { transform: scale(1); }
+}
+
+.button-submit:active,
+.raised.emby-button:active {
+    animation: buttonPress 0.1s ease-out !important;
+}
+
+/* ========================================
+ * OPTIMIZĂRI FINALE ȘI PERFORMANȚĂ
+ * ======================================== */
+
+/* Optimizări GPU pentru animații */
 .cardBox,
 .emby-tab-button,
 .headerButton,
-.navMenuOption {
-    will-change: transform, box-shadow !important;
+.navMenuOption,
+.button-submit,
+.raised.emby-button {
+    will-change: transform, opacity, box-shadow !important;
+    transform: translateZ(0) !important;
 }
 
-/* Asigură compatibilitatea cu toate temele */
-.skinHeader,
-.mainDrawer,
-.emby-input,
-.emby-textarea,
-.emby-select,
-.navMenuOption-selected,
-.cardBox,
-.paperList {
-    transition: all var(--transition-medium) !important;
+/* Smooth scrolling pentru întreaga pagină */
+html {
+    scroll-behavior: smooth !important;
 }
 
-/* Mesaj final în CSS */
+/* Optimizări pentru focus și accesibilitate */
+*:focus {
+    outline: 2px solid var(--primary-color) !important;
+    outline-offset: 2px !important;
+    border-radius: var(--border-radius-sm) !important;
+}
+
+/* Reduce motion pentru utilizatorii sensibili */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* ========================================
+ * MESAJ FINAL - TEMĂ ULTRA-MODERNĂ COMPLETĂ
+ * ======================================== */
+
 /*
  * ========================================
- * SFÂRȘITUL TEMEI PERSONALIZATE JELLYFIN
+ * JELLYFIN ULTRA-MODERN THEME v2.0
  * ========================================
  *
- * Această temă oferă:
- * ✓ Design modern și elegant
- * ✓ Animații fluide și responsive
- * ✓ Compatibilitate cu toate dispozitivele
- * ✓ Îmbunătățiri pentru accesibilitate
- * ✓ Optimizări pentru performanță
+ * 🎨 CARACTERISTICI PREMIUM:
+ * ✓ Glassmorphism și blur effects avansate
+ * ✓ Gradient-uri și animații fluide
+ * ✓ Design system consistent cu variabile CSS
+ * ✓ Responsive design pentru toate dispozitivele
+ * ✓ Optimizări pentru performanță și accesibilitate
+ * ✓ Micro-interacțiuni și feedback vizual
+ * ✓ Tema întunecată profesională
+ * ✓ Compatibilitate completă cu Jellyfin WebUI
  *
- * Pentru suport sau personalizări suplimentare,
- * modifică variabilele CSS din secțiunea :root
+ * 🚀 TEHNOLOGII FOLOSITE:
+ * - CSS Custom Properties (variabile)
+ * - Backdrop-filter pentru glassmorphism
+ * - CSS Grid și Flexbox pentru layout
+ * - CSS Animations și Transitions
+ * - Media queries pentru responsive design
+ * - CSS Gradients pentru efecte vizuale
  *
- * Bucură-te de experiența îmbunătățită Jellyfin!
+ * 💡 PERSONALIZARE:
+ * Modifică variabilele din secțiunea :root pentru
+ * a adapta tema la preferințele tale.
+ *
+ * Autor: EDD
+ * Versiune: 2.0 Ultra-Modern
+ * Data: 2025
+ *
+ * Bucură-te de experiența Jellyfin de nivel premium! 🎬✨
  */
\ No newline at end of file