:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#1e293b;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;font-weight:400;line-height:1.5}#root{min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-tertiary:#f8fafc;--text-primary:#1e293b;--text-secondary:#64748b;--text-muted:#94a3b8;--border-color:#e2e8f0;--shadow:0 1px 3px #0000000d;--input-bg:#fff;--input-border:#d1d5db}.dark{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#1e293b;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--border-color:#334155;--shadow:0 1px 3px #0000004d;--input-bg:#1e293b;--input-border:#475569}body{background:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.5;transition:background .3s,color .3s}.app{flex-direction:column;min-height:100vh;display:flex}.header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);z-index:100;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;transition:background .3s,border-color .3s;display:flex;position:sticky;top:0}.header-logo{align-items:center;display:flex}.header-logo-img{object-fit:contain;width:auto;height:80px}.header-actions{align-items:center;gap:1rem;display:flex}.connection-status{border-radius:9999px;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:.75rem;font-weight:500;display:flex}.connection-status.connected{color:#166534;background:#dcfce7}.connection-status.disconnected{color:#991b1b;background:#fee2e2}.connection-status.connecting{color:#92400e;background:#fef3c7}.status-dot{background:currentColor;border-radius:50%;width:8px;height:8px}.main{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:1.5rem}.section{background:var(--bg-secondary);box-shadow:var(--shadow);border-radius:.75rem;margin-bottom:1.5rem;padding:1.5rem;transition:background .3s,box-shadow .3s}.section-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.section h2{color:var(--text-primary);font-size:1rem;font-weight:600}.alert{border-radius:.5rem;margin-bottom:1rem;padding:.75rem 1rem;font-size:.875rem}.alert-error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.dark .alert-error{color:#fca5a5;background:#ef444433;border-color:#ef444466}.btn{cursor:pointer;border:none;border-radius:.375rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:all .15s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{color:#fff;background:#3b82f6}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-secondary{background:var(--border-color);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background:var(--text-muted)}.theme-toggle{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;border-radius:.5rem;padding:.5rem .75rem;font-size:1.25rem;transition:all .3s}.theme-toggle:hover{background:var(--border-color)}.system-info-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;display:grid}.info-card{background:var(--bg-tertiary);border-radius:.5rem;padding:1rem}.info-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.75rem;font-weight:500}.info-value{color:var(--text-primary);font-size:1.125rem;font-weight:600}.info-detail{color:var(--text-secondary);margin-top:.25rem;font-size:.75rem;font-weight:400}.uptime{font-family:SF Mono,Fira Code,monospace}.version{font-family:SF Mono,Fira Code,monospace;font-size:.875rem}.progress-bar-container{align-items:center;gap:.5rem;height:8px;display:flex}.progress-bar{background:var(--border-color);border-radius:9999px;flex:1;height:100%;transition:width .3s}.progress-text{color:var(--text-secondary);text-align:right;min-width:50px;font-size:.75rem;font-weight:600}.chart-container{background:var(--bg-tertiary);border-radius:.5rem;padding:1rem}.chart-controls{justify-content:flex-end;margin-bottom:1rem;display:flex}.interface-select,.interface-filter{border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);cursor:pointer;border-radius:.375rem;padding:.375rem .75rem;font-size:.875rem}.chart-placeholder,.table-placeholder,.loading{text-align:center;color:var(--text-secondary);padding:3rem}.table-container{overflow-x:auto}.interface-table{border-collapse:collapse;width:100%;font-size:.875rem}.interface-table th,.interface-table td{text-align:left;border-bottom:1px solid var(--border-color);padding:.75rem 1rem}.interface-table th{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;background:var(--bg-tertiary);font-size:.75rem;font-weight:600}.interface-table tr.running td{color:var(--text-primary)}.interface-table tr.disabled td{color:var(--text-muted)}.interface-table td.name{color:var(--text-primary);font-family:SF Mono,Fira Code,monospace;font-weight:500}.status-badge{text-transform:uppercase;border-radius:9999px;padding:.125rem .5rem;font-size:.7rem;font-weight:500;display:inline-flex}.status-badge.up{color:#166534;background:#dcfce7}.status-badge.down{color:#991b1b;background:#fee2e2}.dark .status-badge.up{color:#4ade80;background:#22c55e33}.dark .status-badge.down{color:#f87171;background:#ef444433}.modal-overlay{z-index:1000;background:#0f172a80;justify-content:center;align-items:center;padding:1rem;animation:.15s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-secondary);border-radius:.75rem;width:100%;max-width:400px;padding:1.5rem;animation:.2s slideUp;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.modal-header h3{font-size:1.125rem;font-weight:600}.modal-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:1.5rem;line-height:1}.modal-close:hover{color:var(--text-primary)}.connection-form{flex-direction:column;gap:1rem;display:flex}.form-group{flex-direction:column;gap:.375rem;display:flex}.form-group label{color:var(--text-primary);font-size:.875rem;font-weight:500}.form-group input{border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);border-radius:.375rem;padding:.5rem .75rem;font-size:.875rem;transition:border-color .15s,box-shadow .15s}.form-group input:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.form-actions{justify-content:flex-end;gap:.75rem;margin-top:.5rem;display:flex}@media (width<=768px){.header{text-align:center;flex-direction:column;gap:1rem}.main,.section{padding:1rem}.system-info-grid{grid-template-columns:1fr}}.hotspot-summary{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.hotspot-count{text-align:center;color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb)}.hotspot-count .info-label{color:#ffffffe6}.hotspot-count .info-value.count{color:#fff;font-size:3rem;font-weight:700}.hotspot-table-container{overflow-x:auto}.hotspot-table{border-collapse:collapse;width:100%;font-size:.875rem}.hotspot-table th,.hotspot-table td{text-align:left;border-bottom:1px solid var(--border-color);padding:.75rem 1rem}.hotspot-table th{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;background:var(--bg-tertiary);font-size:.75rem;font-weight:600}.hotspot-table td.user{color:var(--text-primary);font-family:SF Mono,Fira Code,monospace;font-weight:500}.hotspot-table tr:hover td{background:#ffffff0d}.hotspot-traffic{text-align:center}.hotspot-traffic.down{color:#fff;background:linear-gradient(135deg,#0ea5e9,#0284c7)}.hotspot-traffic.up{color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a)}.hotspot-traffic .info-label{color:#ffffffe6}.hotspot-traffic .info-value{color:#fff;font-size:1.75rem}.hotspot-traffic .info-value.traffic.down,.hotspot-traffic .info-value.traffic.up{color:#fff}.hotspot-traffic .unit{color:#fffc;margin-left:.25rem;font-size:.75rem;font-weight:400}.hotspot-table td.traffic-down{color:#2563eb;font-family:SF Mono,Fira Code,monospace;font-weight:500}.hotspot-table td.traffic-up{color:#16a34a;font-family:SF Mono,Fira Code,monospace;font-weight:500}.dark .hotspot-traffic.down{background:linear-gradient(135deg,#0ea5e9,#0284c7)}.dark .hotspot-traffic.up{background:linear-gradient(135deg,#22c55e,#16a34a)}.dark .hotspot-table th{background:var(--bg-tertiary);color:var(--text-secondary)}.dark .hotspot-table td{border-bottom-color:var(--border-color);color:var(--text-primary)}.dark .hotspot-table tr:hover td{background:#ffffff0d}.dark .hotspot-table td.traffic-down{color:#38bdf8}.dark .hotspot-table td.traffic-up{color:#4ade80}.dark .connection-status.connected{color:#4ade80;background:#22c55e33}.dark .connection-status.disconnected{color:#f87171;background:#ef444433}.dark .connection-status.connecting{color:#fbbf24;background:#eab30833}.dark .modal-overlay{background:#000000b3}.dark .modal{border:1px solid var(--border-color)}.dark .form-group input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f64d}.dark .btn-primary{color:#fff;background:#3b82f6}.dark .btn-primary:hover:not(:disabled){background:#2563eb}.dark .chart-container{border:1px solid var(--border-color)}.dark .progress-text{color:var(--text-secondary)}.dark .info-card{border:1px solid var(--border-color)}