feat: drive checkbox/radio input colors from theme CSS variables

The custom-styled checkbox/radio inputs hardcoded their colors
(#3498db, #eee, etc.) in the @supports block, so themes could not
restyle them. Introduce --colorInput* variables in the base :root
(deriving active/border from the existing accent vars) and have the
input block consume them. Add dark-theme overrides that darken the
unchecked and disabled surfaces so the controls no longer render as
light-grey boxes on the dark background.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: connortechnology

web/skins/classic/css/base/skin.css

@@ -30,6 +30,17 @@
   --colorLink: #3498db;
   --colorBackgroundButtons: #3498db;
   --colorBorder: #3498db;
+
+  /* Custom-styled checkbox/radio inputs. Themes override these in their own
+     :root so the controls restyle automatically. */
+  --colorInputActive: var(--colorBackgroundButtons);
+  --colorInputActiveInner: #eee;
+  --colorInputBorder: var(--colorBorder);
+  --colorInputBorderHover: var(--colorBorder);
+  --colorInputBackground: #eee;
+  --colorInputFocus: rgba(39, 94, 254, 0.3);
+  --colorInputDisabled: #f6f8ff;
+  --colorInputDisabledInner: #e1e6f9;
 }
 
 html,
@@ -1346,14 +1357,14 @@ button.btn.btn-view-watch:hover {
 /* +++ Style for <input> +++ */
 @supports (-webkit-appearance: none) or (-moz-appearance: none) {
   input[type='checkbox'], input[type='radio'] {
-    --active: #3498db;
-    --active-inner: #eee;
-    --focus: 2px rgba(39, 94, 254, 0.3);
-    --border: #3498db;
-    --border-hover: #3498db;
-    --background: #eee;
-    --disabled: #F6F8FF;
-    --disabled-inner: #E1E6F9;
+    --active: var(--colorInputActive);
+    --active-inner: var(--colorInputActiveInner);
+    --focus: 2px var(--colorInputFocus);
+    --border: var(--colorInputBorder);
+    --border-hover: var(--colorInputBorderHover);
+    --background: var(--colorInputBackground);
+    --disabled: var(--colorInputDisabled);
+    --disabled-inner: var(--colorInputDisabledInner);
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;

web/skins/classic/css/dark/skin.css

@@ -26,6 +26,15 @@
   --sliderBG: #95AFC0;
   --alarmBG: #352424;
   --backgroundMediumDark: #485460;
+
+  /* Custom-styled checkbox/radio inputs tuned for the dark background. The
+     active fill keeps the accent colour (--colorBackgroundButtons) and the
+     checkmark/dot stays light (--colorInputActiveInner) for contrast against
+     it; only the unchecked/disabled surfaces need darkening so they don't
+     glow on the dark page. */
+  --colorInputBackground: #2c2c2c;
+  --colorInputDisabled: #333333;
+  --colorInputDisabledInner: #555555;
 }
 
 body {