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; }
 }

assets/css/ticket.css

@@ -295,14 +295,7 @@ textarea[data-field="description"]:not(:disabled)::after {
     margin-left: 2px;
 }
 
-@keyframes blink-cursor {
-    0%, 50% {
-        opacity: 1;
-    }
-    51%, 100% {
-        opacity: 0;
-    }
-}
+/* blink-cursor keyframes defined in dashboard.css */
 
 /* Mobile: Stack metadata fields */
 @media (max-width: 768px) {
@@ -458,7 +451,7 @@ textarea[data-field="description"]:not(:disabled)::after {
 }
 
 .title-input[contenteditable="true"]:hover {
-    border-color: #3b82f6;
+    border-color: var(--terminal-amber);
 }
 
 .title-input[contenteditable="false"] {
@@ -518,17 +511,15 @@ textarea[data-field="description"]:not(:disabled)::after {
 }
 
 input.editable {
-    width: calc(100% - 20px);
-    box-sizing: border-box;
+    width: 100%;
 }
 
 textarea.editable {
-    width: calc(100% - 20px);
+    width: 100%;
     min-height: 800px !important;
     height: auto !important;
-    box-sizing: border-box;
     white-space: pre;
-    font-family: monospace;
+    font-family: var(--font-mono);
     line-height: 1.2;
 }
 
@@ -557,13 +548,15 @@ textarea.editable {
 }
 
 .btn.primary {
-    background: #3b82f6;
-    color: white;
+    background: var(--terminal-amber);
+    color: var(--bg-primary);
+    border-color: var(--terminal-amber);
 }
 
 .btn.active {
-    background: #3b82f6;
-    color: white;
+    background: var(--terminal-green);
+    color: var(--bg-primary);
+    border-color: var(--terminal-green);
 }
 
 .btn:hover {
@@ -608,7 +601,7 @@ textarea.editable {
 }
 
 .comment-form textarea {
-    width: calc(100% - 20px);
+    width: 100%;
     min-height: 100px;
     margin-bottom: 10px;
     padding: 10px;
@@ -617,6 +610,7 @@ textarea.editable {
     background: var(--bg-primary);
     color: var(--terminal-green);
     font-family: var(--font-mono);
+    box-sizing: border-box;
 }
 
 .comment-form textarea::placeholder {
@@ -807,6 +801,7 @@ textarea.editable {
     font-family: var(--font-mono);
     font-size: 0.9rem;
     resize: vertical;
+    box-sizing: border-box;
 }
 
 .comment-edit-textarea:focus {
@@ -864,6 +859,21 @@ textarea.editable {
     margin-left: 6rem;
 }
 
+/* Reduce thread indentation on mobile */
+@media (max-width: 768px) {
+    .comment.thread-depth-1 {
+        margin-left: 1rem;
+    }
+
+    .comment.thread-depth-2 {
+        margin-left: 1.5rem;
+    }
+
+    .comment.thread-depth-3 {
+        margin-left: 2rem;
+    }
+}
+
 /* Reply styling */
 .comment.comment-reply {
     position: relative;
@@ -967,6 +977,7 @@ textarea.editable {
     font-size: 0.9rem;
     resize: vertical;
     margin-bottom: 0.75rem;
+    box-sizing: border-box;
 }
 
 .reply-form-container textarea:focus {
@@ -1047,7 +1058,6 @@ textarea.editable {
     transition: all 0.3s ease;
     position: relative;
     margin-right: -2px;
-    transition: all 0.3s ease;
 }
 
 .tab-btn::before {
@@ -1168,7 +1178,7 @@ textarea.editable {
 }
 
 input:checked + .slider {
-    background-color: #3b82f6;
+    background-color: var(--terminal-green);
 }
 
 input:checked + .slider:before {