visual upgrades and bugfixes

frontend/style.css

@@ -9,6 +9,7 @@
     --accent: #6366f1;
     --accent-hover: #818cf8;
     --border: #2a2f4a;
+    --shadow: rgba(0, 0, 0, 0.4);
 }
 
 html, body { height: 100%; }
@@ -22,6 +23,22 @@ body {
     font-size: 14px;
 }
 
+body.drawer-open {
+    overflow: hidden;
+}
+
+body.theme-light {
+    --bg-primary: #f6f7fb;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #eef1f7;
+    --text-primary: #0f172a;
+    --text-secondary: #475569;
+    --accent: #2563eb;
+    --accent-hover: #1d4ed8;
+    --border: #e2e8f0;
+    --shadow: rgba(15, 23, 42, 0.12);
+}
+
 /* Top Bar */
 .top-bar {
     height: 64px;
@@ -110,6 +127,14 @@ body {
     filter: none;
 }
 
+body.theme-light .icon-svg {
+    filter: invert(20%) saturate(0%);
+}
+
+body.theme-light .icon-btn:hover .icon-svg {
+    filter: none;
+}
+
 /* Hamburger Menu */
 .hamburger {
     display: flex;
@@ -192,6 +217,24 @@ body {
     overflow-y: auto;
 }
 
+.sidebar-section {
+    padding: 8px 0 4px 0;
+    border-bottom: 1px solid var(--border);
+}
+
+.sidebar-section:last-child {
+    border-bottom: none;
+}
+
+.sidebar-subtitle {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+    padding: 8px 24px 4px 24px;
+}
+
 .sidebar-item {
     display: block;
     padding: 12px 24px;
@@ -212,6 +255,17 @@ body {
     border-bottom: 1px solid var(--border);
 }
 
+.filters-container .setting-item {
+    padding-top: 12px;
+    padding-bottom: 12px;
+}
+
+.filters-empty {
+    padding: 12px 24px 20px 24px;
+    color: var(--text-secondary);
+    font-size: 13px;
+}
+
 .setting-item label {
     display: block;
     font-size: 13px;
@@ -277,7 +331,7 @@ body {
 
 .video-card:hover {
     transform: translateY(-4px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 8px 16px var(--shadow);
 }
 
 .video-card img {
@@ -317,6 +371,10 @@ body {
     z-index: 2000;
 }
 
+body.theme-light .modal {
+    background: #0b0b0b;
+}
+
 .modal.open {
     display: flex;
 }
@@ -380,4 +438,4 @@ video {
 
 ::-webkit-scrollbar-thumb:hover {
     background: var(--text-secondary);
-}
+}