ui: move login and logs state styles to css

apps/ui/css/login.css

@@ -173,6 +173,10 @@
   margin-bottom: 16px;
 }
 
+.login-error.is-visible {
+  display: block;
+}
+
 .login-footer {
   text-align: center;
   margin-top: 20px;

apps/ui/css/logs.css

@@ -14,6 +14,12 @@
   background: var(--green);
   animation: pulse 1.8s ease-in-out infinite;
   flex-shrink: 0;
+  cursor: pointer;
+}
+
+.live-dot.is-paused {
+  animation-play-state: paused;
+  opacity: 0.35;
 }
 
 @keyframes pulse {
@@ -26,6 +32,11 @@
   font-weight: 600;
   color: var(--green);
   letter-spacing: 0.2px;
+  cursor: pointer;
+}
+
+.live-label.is-paused {
+  color: var(--text-muted);
 }
 
 .toolbar-sep { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }

apps/ui/js/login.js

@@ -5,13 +5,13 @@
 
   function showError(message) {
     var errorElement = document.getElementById('login-error');
-    errorElement.style.display = 'block';
+    errorElement.classList.add('is-visible');
     errorElement.textContent = message;
   }
 
   function hideError() {
     var errorElement = document.getElementById('login-error');
-    errorElement.style.display = 'none';
+    errorElement.classList.remove('is-visible');
   }
 
   function initLoginPage() {

apps/ui/js/logs.js

@@ -323,14 +323,11 @@ document.addEventListener('DOMContentLoaded', function () {
 
   function setLiveState() {
     if (liveDot) {
-      liveDot.style.animationPlayState = state.liveMode ? 'running' : 'paused';
+      liveDot.classList.toggle('is-paused', !state.liveMode);
-      liveDot.style.opacity = state.liveMode ? '' : '0.35';
-      liveDot.style.cursor = 'pointer';
     }
     if (liveLabel) {
       liveLabel.textContent = state.liveMode ? tKey('logs.live') : tKey('logs.paused');
-      liveLabel.style.color = state.liveMode ? '' : 'var(--text-muted)';
+      liveLabel.classList.toggle('is-paused', !state.liveMode);
-      liveLabel.style.cursor = 'pointer';
     }
   }