*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#064e3b;color:#fff;overflow:hidden}#app{width:100vw;height:100vh;display:flex;flex-direction:column}.app-header{background:#00000080;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #10b981;flex-shrink:0}.brand{display:flex;align-items:baseline;gap:12px}.brand-title{font-size:20px;font-weight:700;color:#10b981;letter-spacing:-.5px;font-family:Courier New,monospace}.brand-subtitle{font-size:14px;color:#6ee7b7;font-weight:500;padding-left:12px;border-left:2px solid rgba(16,185,129,.3)}.brand-tagline{font-size:12px;color:#a7f3d0;font-style:italic}.stats-bar{background:#0000004d;padding:12px 20px;display:flex;align-items:center;gap:30px;border-bottom:1px solid rgba(16,185,129,.3);flex-shrink:0;justify-content:space-between}.stats-item{display:flex;align-items:center;gap:8px}.stats-label{font-size:12px;color:#a7f3d0;text-transform:uppercase;letter-spacing:.5px}.stats-value{font-size:14px;font-weight:600;color:#10b981}.status-connected{color:#10b981}.status-disconnected{color:#ef4444}.status-reconnecting{color:#f59e0b}.broker-name{font-size:12px;color:#6ee7b7}.stats-left{display:flex;align-items:center;gap:30px;flex:1}.main-container{flex:1;display:grid;grid-template-columns:280px 1fr 320px;gap:0;overflow:hidden}.panel{background:#0003;border-right:1px solid rgba(16,185,129,.2);display:flex;flex-direction:column;overflow:hidden}.panel h3{padding:16px;font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:#10b981;border-bottom:1px solid rgba(16,185,129,.2);flex-shrink:0}.right-panel{border-right:none;border-left:1px solid rgba(16,185,129,.2)}.graph-container{position:relative;background:#064e3b;overflow:hidden;display:flex;flex-direction:column}#graph{width:100%;height:100%}.controls{display:flex;gap:8px;margin-left:auto}button{padding:8px 16px;border:none;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:#10b981;color:#fff}.btn-primary:hover{background:#059669}.btn-secondary{background:#10b98133;color:#10b981;border:1px solid #10b981}.btn-secondary:hover{background:#10b9814d}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626}.empty-state{padding:20px;text-align:center;color:#6ee7b7;font-size:13px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#10b9814d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#10b98180}.graph-tooltip{position:absolute;background:#000000e6;color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;pointer-events:none;z-index:1000;border:1px solid #10b981}.message-detail-overlay,.config-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000}.message-detail,.config-dialog{background:#064e3b;border:1px solid #10b981;border-radius:8px;max-width:600px;max-height:80vh;width:90%;display:flex;flex-direction:column}.message-detail-header,.config-dialog-header{padding:16px;border-bottom:1px solid rgba(16,185,129,.3);display:flex;align-items:center;justify-content:space-between}.message-detail-header h3,.config-dialog-header h3{font-size:16px;color:#10b981}.close-btn{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#10b981}.message-detail-content,.config-dialog-content{padding:16px;overflow-y:auto}.detail-row{margin-bottom:12px}.detail-row strong{color:#10b981;display:block;margin-bottom:4px}.detail-row pre{background:#0000004d;padding:12px;border-radius:4px;overflow-x:auto;font-size:12px;color:#a7f3d0}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;color:#10b981;font-size:13px;font-weight:600}.form-group input{width:100%;padding:8px 12px;background:#0000004d;border:1px solid rgba(16,185,129,.3);border-radius:4px;color:#fff;font-size:14px}.form-group input:focus{outline:none;border-color:#10b981}.config-dialog-footer{padding:16px;border-top:1px solid rgba(16,185,129,.3);display:flex;gap:8px;justify-content:flex-end}.app-footer{background:#00000080;padding:8px 20px;display:flex;align-items:center;justify-content:center;gap:12px;border-top:1px solid rgba(16,185,129,.2);flex-shrink:0;font-size:11px;color:#6ee7b7}.footer-text{font-family:Courier New,monospace}.footer-separator{color:#10b98180}:root,[data-theme=emerald]{--primary: #10b981;--primary-dark: #059669;--primary-light: #34d399;--secondary: #6ee7b7;--tertiary: #a7f3d0;--bg-primary: #064e3b;--bg-secondary: rgba(0, 0, 0, .3);--bg-tertiary: rgba(0, 0, 0, .5);--status-success: #10b981;--status-warning: #f59e0b;--status-error: #ef4444;--text-primary: #ffffff}[data-theme=ocean]{--primary: #3b82f6;--primary-dark: #2563eb;--primary-light: #60a5fa;--secondary: #93c5fd;--tertiary: #bfdbfe;--bg-primary: #1e3a8a;--bg-secondary: rgba(0, 0, 0, .3);--bg-tertiary: rgba(0, 0, 0, .5);--status-success: #3b82f6;--status-warning: #f59e0b;--status-error: #ef4444;--text-primary: #ffffff}[data-theme=sunset]{--primary: #f59e0b;--primary-dark: #d97706;--primary-light: #fbbf24;--secondary: #fcd34d;--tertiary: #fde68a;--bg-primary: #78350f;--bg-secondary: rgba(0, 0, 0, .3);--bg-tertiary: rgba(0, 0, 0, .5);--status-success: #f59e0b;--status-warning: #fbbf24;--status-error: #ef4444;--text-primary: #ffffff}[data-theme=slate]{--primary: #64748b;--primary-dark: #475569;--primary-light: #94a3b8;--secondary: #cbd5e1;--tertiary: #e2e8f0;--bg-primary: #1e293b;--bg-secondary: rgba(0, 0, 0, .3);--bg-tertiary: rgba(0, 0, 0, .5);--status-success: #64748b;--status-warning: #f59e0b;--status-error: #ef4444;--text-primary: #ffffff}[data-theme=midnight]{--primary: #60a5fa;--primary-dark: #3b82f6;--primary-light: #93c5fd;--secondary: #94a3b8;--tertiary: #cbd5e1;--bg-primary: #0f172a;--bg-secondary: rgba(0, 0, 0, .5);--bg-tertiary: rgba(0, 0, 0, .7);--status-success: #60a5fa;--status-warning: #f59e0b;--status-error: #ef4444;--text-primary: #f1f5f9}[data-theme=carbon]{--primary: #71717a;--primary-dark: #52525b;--primary-light: #a1a1aa;--secondary: #d4d4d8;--tertiary: #e4e4e7;--bg-primary: #09090b;--bg-secondary: rgba(0, 0, 0, .6);--bg-tertiary: rgba(0, 0, 0, .8);--status-success: #71717a;--status-warning: #f59e0b;--status-error: #ef4444;--text-primary: #fafafa}body{background:var(--bg-primary);color:var(--text-primary)}.stats-bar{border-bottom-color:var(--primary)}.stats-label{color:var(--tertiary)}.stats-value{color:var(--primary)}.status-connected{color:var(--status-success)}.status-disconnected{color:var(--status-error)}.status-reconnecting{color:var(--status-warning)}.broker-name{color:var(--secondary)}.panel{border-color:var(--primary)}.panel h3{color:var(--primary);border-bottom-color:var(--primary)}.graph-container{background:var(--bg-primary)}.btn-primary{background:var(--primary)}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--bg-secondary);color:var(--primary);border-color:var(--primary)}.btn-secondary:hover{background:var(--bg-tertiary)}.graph-tooltip{border-color:var(--primary)}.message-detail,.config-dialog{background:var(--bg-primary);border-color:var(--primary)}.message-detail-header h3,.config-dialog-header h3,.close-btn:hover,.detail-row strong{color:var(--primary)}.detail-row pre{color:var(--tertiary)}.form-group label{color:var(--primary)}.form-group input{border-color:var(--primary)}.form-group input:focus{border-color:var(--primary-light)}.brand-title{color:var(--primary)}.brand-subtitle{color:var(--secondary);border-left-color:var(--primary)}.brand-tagline{color:var(--tertiary)}.app-header{border-bottom-color:var(--primary)}.app-footer{border-top-color:var(--primary);color:var(--secondary)}.empty-state{color:var(--secondary)}::-webkit-scrollbar-thumb{background:var(--primary)}::-webkit-scrollbar-thumb:hover{background:var(--primary-light)}.theme-switcher{position:relative}.theme-btn{background:var(--bg-secondary);border:1px solid var(--primary);color:var(--primary);padding:8px 16px;border-radius:4px;cursor:pointer;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;transition:all .2s}.theme-btn:hover{background:var(--bg-tertiary)}.theme-icon{font-size:16px}.theme-picker{position:absolute;top:100%;right:0;margin-top:8px;background:var(--bg-primary);border:1px solid var(--primary);border-radius:4px;padding:4px;min-width:220px;max-width:250px;box-shadow:0 10px 30px #00000080;display:none;max-height:400px;overflow-y:auto;z-index:200}.theme-picker.active{display:block}.theme-category-header{padding:8px 12px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tertiary);margin-top:4px}.theme-category-header:first-child{margin-top:0}.theme-option{padding:10px 12px;cursor:pointer;border-radius:4px;display:flex;align-items:center;gap:10px;transition:all .2s;font-size:13px;margin:2px 4px}.theme-option:hover{background:var(--bg-secondary)}.theme-option.active{background:var(--primary);color:var(--bg-primary);font-weight:600}.theme-option.active .theme-color-preview{border-color:var(--bg-primary)}.theme-color-preview{width:20px;height:20px;border-radius:50%;border:2px solid var(--text-primary);flex-shrink:0}.messages-list{flex:1;overflow-y:auto;padding:8px;scroll-behavior:smooth}.message-item{background:#0003;border:1px solid rgba(16,185,129,.2);border-radius:4px;padding:10px;margin-bottom:8px;cursor:pointer;transition:all .2s ease-out;will-change:transform,opacity;transform:translateZ(0);backface-visibility:hidden}.message-item:hover{background:#10b9811a;border-color:#10b981}.message-topic{font-size:11px;color:#10b981;font-weight:600;margin-bottom:4px;word-break:break-all}.message-payload{font-size:12px;color:#a7f3d0;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-time{font-size:10px;color:#6ee7b7}.connections-count{padding:12px 16px;font-size:12px;color:#10b981;border-bottom:1px solid rgba(16,185,129,.2);font-weight:600}.connections-list{flex:1;overflow-y:auto;padding:8px;scroll-behavior:smooth}.connection-item{background:#0003;border:1px solid rgba(16,185,129,.2);border-radius:4px;padding:10px;margin-bottom:8px;transition:all .2s ease-out;will-change:transform,opacity;transform:translateZ(0);backface-visibility:hidden}.connection-item:hover{background:#10b9811a;border-color:#10b981}.connection-id{font-size:11px;color:#10b981;font-weight:600;margin-bottom:6px;word-break:break-all}.connection-meta{display:flex;justify-content:space-between;align-items:center}.connection-type{font-size:10px;color:#6ee7b7;background:#10b98133;padding:2px 6px;border-radius:3px;text-transform:uppercase}.connection-count{font-size:10px;color:#a7f3d0}.errors-panel{position:fixed;bottom:0;right:340px;width:400px;max-height:300px;background:#000000e6;border:1px solid rgba(239,68,68,.5);border-bottom:none;border-radius:8px 8px 0 0;display:none;flex-direction:column;z-index:100}.errors-panel h4{padding:12px 16px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:#ef4444;border-bottom:1px solid rgba(239,68,68,.3);flex-shrink:0}.errors-count{padding:8px 16px;font-size:11px;color:#fca5a5;border-bottom:1px solid rgba(239,68,68,.2);font-weight:600}.errors-list{flex:1;overflow-y:auto;padding:8px}.error-item{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:4px;padding:10px;margin-bottom:8px}.error-item.error-warning{background:#f59e0b1a;border-color:#f59e0b4d}.error-item.error-info{background:#3b82f61a;border-color:#3b82f64d}.error-message{font-size:12px;color:#fca5a5;margin-bottom:4px}.error-item.error-warning .error-message{color:#fcd34d}.error-item.error-info .error-message{color:#93c5fd}.error-time{font-size:10px;color:#ef4444}.error-item.error-warning .error-time{color:#f59e0b}.error-item.error-info .error-time{color:#3b82f6}#graph{cursor:grab}#graph:active{cursor:grabbing}.links line{stroke:#10b981;stroke-opacity:.6;stroke-linecap:round;stroke-width:2}.links line.active{stroke-opacity:.8;filter:drop-shadow(0 0 4px #10b981)}.nodes .node{cursor:pointer}.nodes .node circle{stroke:#fff;stroke-width:2;transition:all .2s}.nodes .node:hover circle{stroke-width:3;filter:drop-shadow(0 0 8px currentColor)}.nodes .node text{font-size:12px;font-weight:600;pointer-events:none;-webkit-user-select:none;user-select:none;text-shadow:0 0 4px rgba(0,0,0,.8)}.particles circle.particle{pointer-events:none;filter:drop-shadow(0 0 4px currentColor)}.graph-container svg{display:block}.node-topic circle{fill:#10b981}.node-client circle{fill:#34d399}.node-device circle{fill:#6ee7b7}.zoom-controls{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px;z-index:10}.zoom-btn{width:32px;height:32px;background:#00000080;border:1px solid #10b981;border-radius:4px;color:#10b981;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.zoom-btn:hover{background:#10b98133}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}@keyframes glow{0%,to{filter:drop-shadow(0 0 4px currentColor)}50%{filter:drop-shadow(0 0 12px currentColor)}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInSlideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.message-item,.connection-item,.error-item{animation:fadeInSlideUp .3s ease-out}.errors-panel{animation:slideUp .3s ease-out}.links line.active{animation:glow 2s ease-in-out infinite}.node.active circle{animation:pulse .4s ease-out}.particles circle.particle{animation:fadeIn .2s ease-out}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner{animation:spin 1s linear infinite}*{transition-timing-function:cubic-bezier(.4,0,.2,1)}button{transition:all .2s ease}.panel{transition:all .3s ease}.message-item:hover,.connection-item:hover{transform:translate(4px)}.status-connected{animation:pulse 2s ease-in-out infinite}.connection-manager-dialog{background:var(--bg-primary);border:1px solid var(--primary);border-radius:8px;max-width:700px;max-height:80vh;width:90%;display:flex;flex-direction:column}.connection-manager-content{padding:16px;overflow-y:auto;flex:1}.connection-section{margin-bottom:24px}.connection-section:last-child{margin-bottom:0}.section-title{font-size:13px;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--primary)}.connection-list{display:flex;flex-direction:column;gap:8px}.connection-item{background:var(--bg-secondary);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:all .2s}.connection-item:hover{background:var(--bg-tertiary);border-color:var(--primary)}.connection-info{flex:1;min-width:0}.connection-name{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.connection-details{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--tertiary)}.connection-url{font-family:Courier New,monospace}.connection-username,.connection-last-used{display:flex;align-items:center;gap:4px}.connection-actions{display:flex;gap:4px;flex-shrink:0}.btn-icon{background:var(--bg-secondary);border:1px solid var(--primary);color:var(--primary);width:32px;height:32px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s;padding:0}.btn-icon:hover{background:var(--primary);color:var(--bg-primary);transform:translateY(-1px)}.btn-icon span{pointer-events:none}.connection-manager-content .empty-state{text-align:center;padding:40px 20px;color:var(--tertiary)}.connection-manager-content .empty-state p{margin:8px 0}.connection-manager-content .empty-state p:first-child{font-size:16px;font-weight:600;color:var(--secondary)}input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary)}@media (max-width: 768px){.connection-manager-dialog{max-width:95%}.connection-item{flex-direction:column;align-items:flex-start}.connection-actions{width:100%;justify-content:flex-end}.connection-details{flex-direction:column;gap:4px}}.viz-config-dialog{max-width:600px;width:90%}.config-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1)}.config-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.config-section-title{font-size:15px;font-weight:600;color:var(--primary);margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px}.config-option{margin-bottom:16px}.config-checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text-primary)}.config-checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary)}.config-checkbox-label span{flex:1}.config-description{font-size:12px;color:var(--tertiary);margin-top:4px;margin-left:28px;line-height:1.4}.config-slider-group{margin-top:12px}.config-label{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:8px}.config-value{font-size:12px;color:var(--primary);font-weight:600;background:var(--bg-secondary);padding:2px 8px;border-radius:3px}.config-slider-row{display:flex;align-items:center;gap:12px}.slider-label{font-size:11px;color:var(--tertiary);text-transform:uppercase;letter-spacing:.5px;min-width:30px}input[type=range]{flex:1;height:6px;border-radius:3px;background:var(--bg-secondary);outline:none;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;transition:all .2s}input[type=range]::-webkit-slider-thumb:hover{background:var(--primary-light);transform:scale(1.1)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;transition:all .2s}input[type=range]::-moz-range-thumb:hover{background:var(--primary-light);transform:scale(1.1)}@media (max-width: 768px){.viz-config-dialog{max-width:95%}.config-slider-row{flex-direction:column;gap:8px}input[type=range]{width:100%}}