adjustable card/font size

frontend/css/style.css

@@ -559,6 +559,38 @@ body.theme-light .input-row input:focus {
     background: var(--bg-tertiary);
 }
 
+.setting-item input[type="range"] {
+    width: 100%;
+    appearance: none;
+    -webkit-appearance: none;
+    height: 6px;
+    border-radius: 999px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    cursor: pointer;
+    margin: 6px 0;
+}
+
+.setting-item input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--text-primary);
+    border: none;
+    cursor: pointer;
+}
+
+.setting-item input[type="range"]::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--text-primary);
+    border: none;
+    cursor: pointer;
+}
+
 .setting-item select {
     width: 100%;
     padding: 9px 12px;
@@ -872,11 +904,11 @@ body.theme-light .setting-item select option {
     }
 
     .video-card h4 {
-        font-size: 16px;
+        font-size: calc(16px * var(--card-font-scale, 1));
     }
 
     .video-card p {
-        font-size: 13px;
+        font-size: calc(13px * var(--card-font-scale, 1));
     }
 }
 
@@ -989,7 +1021,7 @@ body.theme-light .setting-item select option {
 }
 
 .video-card h4 {
-    font-size: 15px;
+    font-size: calc(15px * var(--card-font-scale, 1));
     font-weight: 500;
     padding: 12px 12px 10px;
     line-height: 1.3;
@@ -1022,7 +1054,7 @@ body.theme-light .setting-item select option {
 }
 
 .video-card p {
-    font-size: 12px;
+    font-size: calc(12px * var(--card-font-scale, 1));
     color: var(--text-secondary);
     padding: 0 12px 12px 12px;
     margin: 0;
@@ -1040,7 +1072,7 @@ body.theme-light .setting-item select option {
 }
 
 .video-tag {
-    font-size: 11px;
+    font-size: calc(11px * var(--card-font-scale, 1));
     color: var(--text-secondary);
     background: var(--bg-tertiary);
     border: 1px solid var(--border);