@keyframes valueUpdate{0%{opacity:1}50%{opacity:.7}to{opacity:1}}@keyframes flashUp{0%{background-color:#22c55e33}to{background-color:transparent}}@keyframes flashDown{0%{background-color:#ef444433}to{background-color:transparent}}@keyframes statusPulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes warningPulse{0%,to{border-color:#ef444480}50%{border-color:#ef4444}}.value-updated{animation:valueUpdate .3s ease-out}.up{animation:flashUp .4s ease-out}.down{animation:flashDown .4s ease-out}.jitter{animation:valueUpdate .3s ease-out}.status-pulse{animation:statusPulse 2s ease-in-out infinite}.warning-pulse{animation:warningPulse 1s ease-in-out infinite}:root{--bg-primary: #0D0D0D;--bg-secondary: #141414;--bg-tertiary: #1A1A1A;--bg-hover: #222222;--bg-active: #2A2A2A;--text-primary: #FFFFFF;--text-secondary: #A3A3A3;--text-tertiary: #6B6B6B;--text-disabled: #404040;--border-primary: #2A2A2A;--border-secondary: #1F1F1F;--border-focus: #525252;--positive: #22C55E;--positive-muted: rgba(34, 197, 94, .12);--positive-border: rgba(34, 197, 94, .3);--negative: #EF4444;--negative-muted: rgba(239, 68, 68, .12);--negative-border: rgba(239, 68, 68, .3);--warning: #F59E0B;--warning-muted: rgba(245, 158, 11, .12);--warning-border: rgba(245, 158, 11, .3);--info: #3B82F6;--info-muted: rgba(59, 130, 246, .12);--info-border: rgba(59, 130, 246, .3);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--transition-fast: .15s ease;--transition-normal: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary);min-height:100vh}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;color:var(--text-primary)}p{color:var(--text-secondary)}a{color:var(--info);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:#60a5fa}button{font-family:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-focus)}::selection{background:#3b82f64d;color:var(--text-primary)}:focus-visible{outline:2px solid var(--info);outline-offset:2px}.text-positive{color:var(--positive)}.text-negative{color:var(--negative)}.text-warning{color:var(--warning)}.text-info{color:var(--info)}.text-muted{color:var(--text-tertiary)}.bg-positive{background-color:var(--positive-muted)}.bg-negative{background-color:var(--negative-muted)}.bg-warning{background-color:var(--warning-muted)}.bg-info{background-color:var(--info-muted)}.font-mono{font-family:var(--font-mono)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes flashPositive{0%{background-color:var(--positive-muted)}to{background-color:transparent}}@keyframes flashNegative{0%{background-color:var(--negative-muted)}to{background-color:transparent}}.flash-positive{animation:flashPositive .4s ease-out}.flash-negative{animation:flashNegative .4s ease-out}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-fadeIn{animation:fadeIn .2s ease-out}.animate-slideUp{animation:slideUp .2s ease-out}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.connected{background-color:var(--positive)}.status-dot.connecting{background-color:var(--warning);animation:pulse 1.5s ease-in-out infinite}.status-dot.disconnected{background-color:var(--negative)}.data-table{width:100%;border-collapse:collapse}.data-table th{text-align:left;padding:var(--space-3) var(--space-4);font-size:11px;font-weight:500;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-primary)}.data-table td{padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:12px;border-bottom:1px solid var(--border-secondary)}.data-table tr:hover td{background-color:var(--bg-hover)}.card{background-color:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-4)}.card-header{font-size:11px;font-weight:500;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);font-size:11px;font-weight:500;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.02em}.badge-positive{background-color:var(--positive-muted);color:var(--positive)}.badge-negative{background-color:var(--negative-muted);color:var(--negative)}.badge-warning{background-color:var(--warning-muted);color:var(--warning)}.badge-neutral{background-color:var(--bg-active);color:var(--text-secondary)}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:var(--space-2) var(--space-3);background-color:var(--bg-active);color:var(--text-primary);font-size:11px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);z-index:1000}.tooltip:hover:after{opacity:1;visibility:visible}.progress-bar{height:4px;background-color:var(--bg-active);border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;background-color:var(--info);transition:width var(--transition-normal)}.divider{height:1px;background-color:var(--border-primary);margin:var(--space-4) 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
