@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-main:#f8fafc;--bg-card:#fff;--bg-dark-panel:#0f172a;--color-primary-bg:#eff9ff;--color-primary-border:#bae6fd;--color-primary-text:#0369a1;--color-primary-hover:#e0f2fe;--accent-cyan:#06b6d4;--accent-sky:#0284c7;--accent-emerald:#10b981;--accent-purple:#a855f7;--text-main:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--text-inverse:#f8fafc;--border-subtle:#e2e8f0;--border-medium:#cbd5e1;--border-focus:#38bdf8;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-card:0 4px 6px -1px #0000000d, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 25px -5px #0000001a, 0 8px 10px -6px #0000000a;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px}*{box-sizing:border-box;border-color:var(--border-subtle);-webkit-font-smoothing:antialiased;margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{background-color:var(--bg-main);color:var(--text-main);min-height:100vh}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border-radius:var(--radius-md);background-color:#cbd5e1}::-webkit-scrollbar-thumb:hover{background-color:#94a3b8}.container{max-width:1280px;margin:0 auto;padding:24px 16px}.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:20px;transition:all .2s ease-in-out}.card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-lg)}.btn{border-radius:var(--radius-md);cursor:pointer;border:1px solid var(--border-medium);background:var(--bg-card);color:var(--text-main);justify-content:center;align-items:center;gap:8px;padding:8px 16px;font-size:.875rem;font-weight:500;transition:all .15s ease-in-out;display:inline-flex}.btn:hover:not(:disabled){background-color:#f1f5f9}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--color-primary-bg);color:var(--color-primary-text);border-color:var(--color-primary-border)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--accent-sky)}.btn-secondary{background-color:var(--bg-card);color:var(--text-main);border-color:var(--border-medium)}.btn-secondary:hover:not(:disabled){border-color:var(--border-medium);background-color:#f1f5f9}.btn-danger{color:#dc2626;background-color:#fef2f2;border-color:#fecaca}.btn-danger:hover:not(:disabled){background-color:#fee2e2}.btn-ghost{color:var(--text-main);background-color:#0000;border-color:#0000}.btn-ghost:hover:not(:disabled){background-color:#f1f5f9b3}.btn-sky{background-color:var(--accent-sky);color:#fff;border-color:var(--accent-sky)}.btn-sky:hover:not(:disabled){background-color:#0369a1;border-color:#0369a1}.input-field{border-radius:var(--radius-md);border:1px solid var(--border-subtle);background-color:var(--bg-card);width:100%;color:var(--text-main);outline:none;padding:8px 12px;font-size:.875rem;transition:border-color .15s}.input-field:focus{border-color:var(--border-focus);box-shadow:0 0 0 2px #38bdf826}.status-badge{border-radius:var(--radius-md);color:var(--text-secondary);border:1px solid var(--border-subtle);background-color:#f1f5f9;align-items:center;gap:4px;padding:2px 8px;font-size:.75rem;font-weight:600;display:inline-flex}.status-badge.connected{color:#047857;background-color:#ecfdf5;border-color:#a7f3d0}.status-badge.warning{color:#b45309;background-color:#fffbeb;border-color:#fde68a}.status-badge.error{color:#b91c1c;background-color:#fef2f2;border-color:#fecaca}.status-badge.info{background-color:var(--color-primary-bg);color:var(--color-primary-text);border-color:var(--color-primary-border)}.alert-box{border-radius:var(--radius-md);align-items:flex-start;gap:10px;width:100%;padding:10px 14px;font-size:.875rem;font-weight:400;line-height:1.4;display:flex}.alert-box-icon{flex-shrink:0;margin-top:2px}.alert-box-content{flex:1;min-width:0}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}.animate-shake{animation:.4s ease-in-out shake}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:1s linear infinite spin}.table-responsive{-webkit-overflow-scrolling:touch;width:100%;margin-bottom:12px;overflow-x:auto}@media (width<=768px){.container{padding:12px 10px!important}.card{border-radius:var(--radius-lg);padding:14px 12px!important}.btn{min-height:42px;padding:10px 14px;font-size:.9rem}.input-field{min-height:44px;font-size:.95rem}.hide-on-mobile{display:none!important}.flex-mobile-col{flex-direction:column!important;align-items:stretch!important;gap:12px!important}.grid-mobile-1col{grid-template-columns:1fr!important}}.metric-card{flex-direction:column;gap:12px;display:flex}.metric-card-header{justify-content:space-between;align-items:center;display:flex}.metric-card-label{color:var(--text-muted);align-items:center;gap:6px;font-size:.85rem;font-weight:500;display:inline-flex}.metric-card-icon{color:var(--color-primary,#38bdf8);flex-shrink:0}.metric-card-body{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;display:flex}.metric-card-value-container{align-items:baseline;gap:4px;display:flex}.metric-card-value{color:var(--text-primary);font-size:1.75rem;font-weight:700;line-height:1.2}.metric-card-unit{color:var(--text-muted);font-size:.9rem;font-weight:500}.metric-card-badge-container{align-items:center;display:flex}.empty-state{text-align:center;border-radius:var(--radius-md);background:var(--bg-card);border:1px dashed var(--border-subtle);color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;padding:32px 16px;display:flex}.empty-state-icon-wrapper{color:var(--text-muted);justify-content:center;align-items:center;margin-bottom:12px;display:flex}.empty-state-title{color:var(--text-primary);margin:0 0 6px;font-size:1.1rem;font-weight:600}.empty-state-hint{color:var(--text-muted);max-width:400px;margin:0 0 16px;font-size:.875rem}.empty-state-action{margin-top:4px}