CSS improvements and fixes

- Add missing CSS variables (--terminal-green-dim, --terminal-red)
- Add global box-sizing: border-box for consistent layouts
- Fix duplicate keyframe animations (blink-cursor, pulse-glow)
- Replace hardcoded hex colors with CSS variables
- Fix textarea width calculations (remove calc workarounds)
- Add responsive thread depth for mobile
- Add accessibility improvements:
  - Visible focus outlines for keyboard navigation
  - prefers-reduced-motion support
- Fix duplicate transition property in .tab-btn
- Update slider checked color to use terminal-green

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/css/dashboard.css

@@ -7,8 +7,10 @@
 
     /* Terminal Colors */
     --terminal-green: #00ff41;
+    --terminal-green-dim: #00aa2a;
     --terminal-amber: #ffb000;
     --terminal-cyan: #00ffff;
+    --terminal-red: #ff4444;
     --text-primary: #00ff41;
     --text-secondary: #00cc33;
     --text-muted: #008822;
@@ -71,6 +73,12 @@
 }
 
 /* ===== BASE ELEMENTS - TERMINAL STYLE ===== */
+
+/* Global box-sizing for consistent layouts */
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
 body {
     font-family: var(--font-mono);
     margin: 0;
@@ -177,6 +185,8 @@ textarea:focus::placeholder {
 input:focus,
 textarea:focus,
 select:focus {
+    outline: 2px solid var(--terminal-amber);
+    outline-offset: 2px;
     animation: focus-pulse 2s ease-in-out infinite;
 }
 
@@ -185,6 +195,27 @@ select:focus {
     50% { box-shadow: var(--glow-amber-intense), inset 0 0 10px rgba(0, 0, 0, 0.5); }
 }
 
+/* Focus visible for keyboard navigation */
+:focus-visible {
+    outline: 2px solid var(--terminal-amber);
+    outline-offset: 2px;
+}
+
+/* Reduced motion for accessibility */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+
+    body::before {
+        animation: none;
+    }
+}
+
 /* Boot-up fade in effect */
 @keyframes boot-up {
     0% {
@@ -1195,7 +1226,7 @@ button:hover {
     text-shadow: var(--glow-amber-intense);
     box-shadow: var(--glow-amber-intense);
     transform: translateY(-2px);
-    animation: pulse-glow 1.5s ease-in-out infinite;
+    animation: pulse-glow-box 1.5s ease-in-out infinite;
 }
 
 .btn:active,
@@ -1205,7 +1236,7 @@ button:active {
     box-shadow: var(--glow-green-intense);
 }
 
-@keyframes pulse-glow {
+@keyframes pulse-glow-box {
     0%, 100% { box-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }
     50% { box-shadow: 0 0 12px currentColor, 0 0 24px currentColor, 0 0 32px currentColor; }
 }