.notification-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999}.notification-dropdown{position:absolute;top:100%;right:0;margin-top:8px;width:360px;max-height:400px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 8px 24px #0000004d;z-index:1000;overflow:hidden}.notification-dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border-color)}.notification-dropdown-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-primary)}.clear-all-btn{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--text-secondary);font-size:13px;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .2s,color .2s}.clear-all-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.notification-dropdown-content{max-height:320px;overflow-y:auto}.notification-empty{padding:40px 20px;text-align:center;color:var(--text-secondary)}.notification-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-color);transition:background .2s}.notification-item:last-child{border-bottom:none}.notification-item:hover{background:var(--bg-tertiary)}.notification-item-icon{display:flex;align-items:center;font-size:16px;margin-top:2px}.notification-item-success .notification-item-icon{color:#22c55e}.notification-item-error .notification-item-icon{color:#ef4444}.notification-item-warning .notification-item-icon{color:#eab308}.notification-item-info .notification-item-icon{color:#3b82f6}.notification-item-content{flex:1;min-width:0}.notification-item-message{margin:0 0 4px;font-size:14px;color:var(--text-primary);line-height:1.4}.notification-item-time{font-size:12px;color:var(--text-secondary)}.notification-item-remove{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;display:flex;align-items:center;opacity:0;transition:opacity .2s,color .2s}.notification-item:hover .notification-item-remove{opacity:1}.notification-item-remove:hover{color:var(--text-primary)}.header{background:var(--bg-primary);border-bottom:1px solid var(--border-color);position:fixed;top:0;left:240px;right:0;z-index:99;box-shadow:var(--shadow-sm)}.header-content{max-width:100%;margin:0;padding:.75rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}.logo{display:flex;align-items:center;gap:.1rem}.logo-icon-img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:center;flex-shrink:0;display:block}.logo-text{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.logo-net{color:var(--text-primary)}.logo-vibe{color:#9b7bf7}.header-controls{display:flex;align-items:center;gap:1rem;flex:1;justify-content:center}.dropdown{position:relative}.dropdown-trigger{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.5rem;background:var(--bg-secondary);border:1px solid var(--accent-primary);border-radius:9999px;color:var(--text-primary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:140px}.dropdown-trigger:hover{background:var(--bg-tertiary);border-color:var(--accent-secondary)}.dropdown-icon{color:var(--accent-primary);width:18px;height:18px}.chevron{width:14px;height:14px;margin-left:auto;transition:transform .2s ease;color:var(--text-secondary)}.chevron.open{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:180px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;box-shadow:var(--shadow-lg);z-index:100;overflow:hidden;animation:dropdownSlide .15s ease-out;padding:.5rem}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.625rem 1.25rem;background:none;border:none;border-radius:12px;color:var(--text-primary);font-size:.875rem;text-align:left;cursor:pointer;transition:background .15s ease}.dropdown-item:hover{background:var(--bg-tertiary)}.dropdown-item.selected{background:var(--accent-primary);color:#fff}.dropdown-item .check{font-size:.75rem;margin-right:.25rem}.status-badge{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;font-size:.875rem;font-weight:600;transition:all .3s ease}.status-badge.status-active{background:#10b98126;border:1px solid rgba(16,185,129,.3);color:#10b981}.status-badge.status-faulty{background:#ef444426;border:1px solid rgba(239,68,68,.3);color:#ef4444}.status-badge.status-connecting{background:#f59e0b26;border:1px solid rgba(245,158,11,.3);color:#f59e0b}.status-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s ease-in-out infinite}.status-dot-active{background:#10b981}.status-dot-faulty{background:#ef4444}.status-dot-connecting{background:#f59e0b}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.header-actions{display:flex;gap:.5rem}.notification-wrapper{position:relative}.notification-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;background:#ef4444;color:#fff;font-size:11px;font-weight:600;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}.icon-button{width:36px;height:36px;border:none;background:var(--bg-secondary);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .2s ease;color:var(--text-primary)}.icon-button svg{width:18px;height:18px;stroke-width:2}.icon-button:hover{background:var(--bg-tertiary);transform:translateY(-1px);color:var(--accent-primary)}@media (max-width: 1024px){.header-controls{gap:.5rem}.dropdown-trigger{min-width:120px;padding:.5rem 1.25rem;font-size:.8125rem}.status-badge{padding:.4rem .75rem;font-size:.8125rem}}@media (max-width: 768px){.header{left:200px}.header-content{padding:.75rem 1rem}.logo-text{font-size:1.25rem}.header-controls{display:none}}.sidebar{width:240px;background:var(--bg-primary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;position:fixed;left:0;top:0;height:100vh;z-index:100;box-shadow:var(--shadow-sm)}.sidebar-nav{display:flex;flex-direction:column;padding:1rem;gap:.5rem;margin-top:80px}.sidebar-nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:none;background:transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;color:var(--text-secondary);font-size:.9375rem;font-weight:500;text-align:left;width:100%;font-family:inherit;position:relative;overflow:hidden}.sidebar-nav-item:not(.coming-soon):hover{background:var(--bg-secondary);color:var(--text-primary)}.sidebar-nav-item.active{background:#6366f11a;color:var(--accent-primary)}.sidebar-nav-item.active .sidebar-icon{color:var(--accent-primary)}.sidebar-nav-item.disabled{cursor:not-allowed;opacity:.5}.sidebar-nav-item.disabled:hover{background:transparent;color:var(--text-secondary)}.coming-soon-badge{font-size:.65rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:.15rem .4rem;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-left:auto}.coming-soon-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-weight:600;font-size:.85rem;opacity:0;transition:all .3s ease;transform:translateY(100%)}.sidebar-nav-item.coming-soon:hover .coming-soon-overlay{opacity:1;transform:translateY(0)}.sidebar-nav-item.coming-soon:hover .sidebar-icon,.sidebar-nav-item.coming-soon:hover .sidebar-label{filter:blur(2px);opacity:.5}.sidebar-icon{width:20px;height:20px;stroke-width:2;flex-shrink:0;transition:all .2s ease}.sidebar-label{flex:1;transition:all .2s ease}@media (max-width: 768px){.sidebar{width:200px}.sidebar-nav{padding:.75rem}.sidebar-nav-item{padding:.625rem .75rem;font-size:.875rem}}.orb-container{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.orb-header{text-align:center;width:100%}.orb-section-title{font-size:1rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}.orb-device-name{font-size:1.125rem;font-weight:500;color:var(--text-primary)}.orb-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:400px}.orb-icons{position:absolute;width:280px;height:280px;top:0;left:50%;transform:translate(-50%);pointer-events:none;z-index:1}.orb-icon{position:absolute;font-size:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;border:1px solid rgba(255,255,255,.2);transform:translate(-50%,-50%);transition:all .3s ease;animation:float 3s ease-in-out infinite;color:#fff}.orb-icon svg{width:18px;height:18px;stroke-width:2.5}.orb-icon:nth-child(1){animation-delay:0s}.orb-icon:nth-child(2){animation-delay:.5s}.orb-icon:nth-child(3){animation-delay:1s}.orb-icon:nth-child(4){animation-delay:1.5s}@keyframes float{0%,to{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-10px)}}.orb{position:relative;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),var(--orb-color));box-shadow:0 0 60px var(--orb-glow),0 0 100px var(--orb-glow),inset -20px -20px 50px #0000004d,inset 20px 20px 50px #fff3;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d;z-index:2}.orb:hover{transform:scale(1.05) rotateY(5deg);box-shadow:0 0 80px var(--orb-glow),0 0 120px var(--orb-glow),0 0 160px var(--orb-glow),inset -20px -20px 50px #0000004d,inset 20px 20px 50px #ffffff4d}.orb.hovered{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 60px var(--orb-glow),0 0 100px var(--orb-glow),inset -20px -20px 50px #0000004d,inset 20px 20px 50px #fff3}50%{box-shadow:0 0 80px var(--orb-glow),0 0 120px var(--orb-glow),0 0 160px var(--orb-glow),inset -20px -20px 50px #0000004d,inset 20px 20px 50px #ffffff4d}}.orb.offline{background:radial-gradient(circle at 30% 30%,#ffffff1a,#6b7280);box-shadow:0 0 40px #6b72804d,inset -20px -20px 50px #0006,inset 20px 20px 50px #ffffff1a}.orb.no-results{background:radial-gradient(circle at 30% 30%,#ffffff1a,#9ca3af);box-shadow:0 0 40px #9ca3af33,inset -20px -20px 50px #0000004d,inset 20px 20px 50px #ffffff1a}.orb-inner{text-align:center;z-index:3}.orb-score-label{font-size:.875rem;font-weight:500;color:#ffffffe6;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}.orb-score-value{font-size:4rem;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3);line-height:1}.orb-status{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-secondary)}.orb-status-indicator{width:8px;height:8px;border-radius:50%;animation:blink 2s infinite;background:var(--status-color, var(--text-tertiary));box-shadow:0 0 8px var(--status-color, transparent)}.orb-status-indicator.excellent{background:#8b5cf6;box-shadow:0 0 8px #8b5cf6}.orb-status-indicator.good{background:#10b981;box-shadow:0 0 8px #10b981}.orb-status-indicator.fair{background:#f59e0b;box-shadow:0 0 8px #f59e0b}.orb-status-indicator.poor{background:#f97316;box-shadow:0 0 8px #f97316}.orb-status-indicator.very-poor{background:#ef4444;box-shadow:0 0 8px #ef4444}.orb-status-indicator.no-data{background:var(--text-tertiary);box-shadow:none}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.orb-status-text{font-weight:500}.orb-details{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:300px}.orb-detail-item{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--bg-tertiary);border-radius:12px;font-size:.9375rem;border:1px solid var(--border-color)}.orb-detail-icon{font-size:1.125rem;display:flex;align-items:center;justify-content:center;color:var(--accent-primary);width:20px;height:20px;flex-shrink:0}.orb-detail-icon svg{width:18px;height:18px;stroke-width:2}.orb-detail-text{color:var(--text-primary);font-weight:500}.orb-metrics-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;max-width:550px;margin:0 auto}.orb-metric-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem 1.25rem;background:var(--bg-tertiary);border-radius:12px;text-align:center;border:1px solid var(--border-color)}.orb-metric-label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.orb-metric-value{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.orb-metric-unit{font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-top:-.25rem}@media (max-width: 768px){.orb{width:240px;height:240px}.orb-score-value{font-size:3rem}.orb-icon{font-size:1.25rem;width:32px;height:32px}.orb-metrics-preview{flex-direction:column;align-items:stretch}.metric-preview{width:100%}}.score-cards{display:flex;flex-direction:column;gap:1rem}.score-card{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:16px;padding:1.25rem;transition:all .2s ease}.score-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.score-card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.score-card-icon{width:32px;height:32px;border-radius:8px;border:1.5px solid;display:flex;align-items:center;justify-content:center;background:transparent}.score-card-icon svg{width:16px;height:16px}.score-card-label{font-size:.875rem;font-weight:500;color:var(--text-secondary)}.score-card-value{display:flex;align-items:baseline;gap:.25rem}.score-number{font-size:2rem;font-weight:700;line-height:1}.score-unit{font-size:.875rem;color:var(--text-muted);font-weight:500}@media (max-width: 1200px){.score-cards{display:grid;grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.score-cards{grid-template-columns:1fr}}.disruption-chart-container{background:var(--bg-secondary);border-radius:16px;padding:1.5rem;border:2px solid var(--accent-primary);box-shadow:0 0 20px #8b5cf61a}.disruption-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.disruption-title{display:flex;align-items:center;gap:.75rem}.disruption-icon{color:#f87171;width:24px;height:24px}.disruption-title h3{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin:0}.disruption-score-label{font-size:.875rem;font-weight:500;color:#fbbf24}.disruption-chart-wrapper{position:relative;margin-bottom:1.5rem;padding-left:20px}.no-data-overlay{position:absolute;top:0;left:20px;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#0000004d;border-radius:8px;z-index:10}.y-axis-label{position:absolute;left:-20px;top:50%;transform:translateY(-50%) rotate(-90deg);font-size:.6875rem;color:var(--text-muted);white-space:nowrap;letter-spacing:.02em}.disruption-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.disruption-stat{display:flex;flex-direction:column;gap:.25rem;padding:1rem;background:var(--bg-primary);border-radius:var(--radius-md)}.stat-label{font-size:.6875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.stat-subtext{font-size:.75rem;color:var(--text-secondary)}@media (max-width: 768px){.disruption-stats{grid-template-columns:1fr}.disruption-chart-header{flex-direction:column;align-items:flex-start;gap:.5rem}}.dashboard{margin-bottom:2rem;width:100%}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.dashboard-header-right{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.dashboard-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.stop-button{padding:.625rem 1.25rem;background:var(--error);border:none;border-radius:8px;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;box-shadow:0 2px 4px #0000001a}.stop-button:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.stop-button:active{transform:translateY(0)}.dashboard-layout{display:grid;grid-template-columns:1fr 240px;gap:1.5rem;margin-bottom:2rem}.dashboard-main{display:flex;flex-direction:column;gap:1.5rem}.orb-card{background:var(--bg-secondary);border-radius:16px;padding:2rem;border:2px solid var(--accent-primary);box-shadow:0 0 20px #8b5cf61a}.dashboard-sidebar{position:sticky;top:100px;height:fit-content}.disruption-section{margin-bottom:2rem}.charts-section{margin-top:1rem}.section-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem}.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:1.5rem}@media (max-width: 1200px){.dashboard-layout{grid-template-columns:1fr}.dashboard-sidebar{position:static}}@media (max-width: 1024px){.charts-grid{grid-template-columns:1fr}}@media (max-width: 640px){.dashboard-header{flex-direction:column;align-items:flex-start;gap:1rem}.orb-card{padding:1.5rem}}.analytics{width:100%;padding-bottom:2rem}.analytics-header{margin-bottom:2rem}.analytics-title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin:0 0 .25rem}.analytics-subtitle{font-size:.9375rem;color:var(--text-muted);margin:0}.app-type-section{margin-bottom:2rem}.app-type-label{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}.app-type-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}.app-type-column{display:flex;flex-direction:column;gap:.75rem}.app-type-card{position:relative;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:16px;padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:all .2s ease}.app-type-card:hover{border-color:var(--accent-primary)}.app-type-card.selected{border-color:var(--accent-primary);background:linear-gradient(135deg,#8b5cf626,#8b5cf60d)}.app-type-check{position:absolute;top:-8px;right:-8px;width:24px;height:24px;background:var(--accent-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:700}.app-type-icon{color:var(--accent-primary);margin-bottom:.75rem;display:flex;justify-content:center;padding:.75rem;background:#8b5cf626;border-radius:12px;width:fit-content;margin-left:auto;margin-right:auto}.app-type-card:not(.selected) .app-type-icon{color:var(--text-muted);background:var(--bg-tertiary)}.app-type-card:not(.selected){opacity:.6}.app-type-name{font-size:.875rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.app-type-card:not(.selected) .app-type-name{color:var(--text-muted)}.app-type-score{font-size:.8125rem;color:var(--accent-primary);font-weight:500}.app-type-card:not(.selected) .app-type-score{color:var(--text-muted)}.app-dropdown{padding:.625rem 1rem;border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:8px;font-size:.875rem;color:var(--text-muted);cursor:pointer;transition:all .2s ease;width:100%}.app-dropdown.active{border-color:var(--accent-primary);color:var(--text-primary);background:var(--bg-tertiary)}.app-dropdown:hover{border-color:var(--accent-primary)}.analytics-main{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}.performance-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem}.performance-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.performance-icon{width:48px;height:48px;background:linear-gradient(135deg,#8b5cf633,#8b5cf61a);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--accent-primary)}.performance-title h3{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-primary)}.performance-title span{font-size:.8125rem;color:var(--text-muted)}.vibe-orb-container{display:flex;justify-content:center;margin-bottom:1.5rem}.vibe-orb-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}.vibe-orb-floating-icons{position:absolute;width:280px;height:280px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.floating-icon{position:absolute;width:36px;height:36px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent-primary);font-size:1rem;box-shadow:0 4px 12px #00000026}.floating-icon.top{top:0;left:50%;transform:translate(-50%)}.floating-icon.right{top:50%;right:0;transform:translateY(-50%)}.floating-icon.bottom{bottom:0;left:50%;transform:translate(-50%)}.floating-icon.left{top:50%;left:0;transform:translateY(-50%)}.vibe-orb{position:relative;width:200px;height:200px;border-radius:50%;background:linear-gradient(145deg,#a855f726,#8b5cf614,#6366f10d);border:2px solid rgba(168,85,247,.3);box-shadow:0 0 60px #a855f733,inset 0 0 40px #a855f71a;display:flex;align-items:center;justify-content:center;margin:40px}.vibe-orb:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;border:1px solid rgba(168,85,247,.1)}.vibe-orb-inner{text-align:center}.vibe-orb-label{font-size:.75rem;font-weight:600;color:var(--text-muted);letter-spacing:.05em;margin-bottom:.25rem}.vibe-orb-score{font-size:4.5rem;font-weight:300;color:var(--text-primary);line-height:1;letter-spacing:-.02em}.vibe-orb-status{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.vibe-status-dot{width:8px;height:8px;background:#a855f7;border-radius:50%;animation:pulse 2s ease-in-out infinite}.vibe-status-text{font-size:.875rem;color:var(--text-muted)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}.info-box{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px}.info-box svg{color:var(--text-muted);flex-shrink:0;margin-top:.125rem}.info-box span{font-size:.875rem;color:var(--text-secondary);line-height:1.5}.metrics-section{display:flex;flex-direction:column;gap:1rem}.metric-card{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#10b9811a,#10b98105);border:1px solid rgba(16,185,129,.3);border-radius:16px;padding:1.25rem 1.5rem}.metric-card-left{display:flex;align-items:center;gap:1rem}.metric-indicator{width:40px;height:40px;border-radius:10px;flex-shrink:0}.metric-info{display:flex;flex-direction:column;gap:.25rem}.metric-label{font-size:.875rem;color:var(--text-secondary)}.metric-value{font-size:1.5rem;font-weight:700}.metric-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}.metric-badge{font-size:.6875rem;font-weight:700;padding:.25rem .75rem;border:1px solid;border-radius:9999px;letter-spacing:.05em}.metric-bars{display:flex;gap:4px}.metric-bar{width:6px;height:24px;border-radius:3px}.analytics-charts{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:1.5rem}.analytics-chart-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem}.analytics-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.analytics-chart-header h4{margin:0;font-size:1rem;font-weight:600;color:var(--text-primary)}.chart-value-badge{font-size:1.125rem;font-weight:700;color:var(--accent-primary)}.leaderboard-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem}.leaderboard-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.leaderboard-title-area{display:flex;align-items:center;gap:1rem}.leaderboard-icon{width:48px;height:48px;background:linear-gradient(135deg,#8b5cf633,#8b5cf61a);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--accent-primary)}.leaderboard-title-area h3{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-primary)}.leaderboard-title-area span{font-size:.8125rem;color:var(--text-muted)}.leaderboard-stats{display:flex;gap:1rem}.leaderboard-stat{display:flex;flex-direction:column;align-items:center;padding:.75rem 1.25rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;min-width:100px}.leaderboard-stat:first-child{border-color:var(--accent-primary)}.leaderboard-stat:not(:first-child) .stat-label-small{color:var(--text-muted)}.stat-sublabel{font-size:.6875rem;color:var(--text-muted)}.leaderboard-list{display:flex;flex-direction:column;gap:.75rem}.leaderboard-entry{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px}.leaderboard-entry.user-entry{border-color:var(--accent-primary);background:linear-gradient(135deg,#8b5cf61a,#8b5cf605)}.entry-rank{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}.entry-info{flex:1;min-width:0}.entry-name{display:block;font-size:.9375rem;font-weight:600;color:var(--text-primary);margin-bottom:.125rem}.entry-app{display:block;font-size:.75rem;color:#10b981;margin-bottom:.5rem}.entry-progress{height:4px;background:var(--bg-secondary);border-radius:2px;overflow:hidden}.entry-progress-bar{height:100%;border-radius:2px;transition:width .3s ease}.entry-score-area{display:flex;align-items:center;gap:.75rem}.entry-score{font-size:1.125rem;font-weight:700;color:var(--text-primary)}.top-badge{font-size:.6875rem;font-weight:600;padding:.25rem .5rem;background:#10b981;color:#fff;border-radius:6px}.view-leaderboard-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:1.5rem;padding:.875rem;background:transparent;border:none;color:var(--accent-primary);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s ease}.view-leaderboard-btn:hover{opacity:.8}@media (max-width: 1200px){.app-type-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 900px){.analytics-main,.analytics-charts{grid-template-columns:1fr}.leaderboard-stats{flex-wrap:wrap}}@media (max-width: 768px){.app-type-grid{grid-template-columns:repeat(2,1fr)}.leaderboard-header{flex-direction:column}}@media (max-width: 480px){.app-type-grid{grid-template-columns:1fr}}.delay-chart-container{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow-sm);height:100%;display:flex;flex-direction:column}.delay-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.75rem}.delay-chart-header-left{display:flex;align-items:center;gap:1rem}.delay-metric-value{font-size:1rem;font-weight:600;color:var(--accent-primary);padding:.25rem .75rem;background:#6366f11a;border-radius:var(--radius-sm)}.delay-chart-title{font-size:1rem;font-weight:600;color:var(--text-primary)}.delay-chart-legend{display:flex;gap:1rem;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-secondary)}.legend-color{width:10px;height:10px;border-radius:2px}.delay-chart-wrapper{width:100%;flex:1;min-height:200px;position:relative}.delay-chart-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text-secondary);font-size:.875rem;pointer-events:none}.metric-badge-wrapper{position:relative;display:inline-block}.metric-badge-trigger{border-radius:8px;transition:all .2s ease}.metric-badge-trigger:hover{transform:scale(1.02)}.metric-badge-tooltip{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);padding:10px 14px;border-radius:8px;white-space:nowrap;z-index:100;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none}.metric-badge-wrapper:hover .metric-badge-tooltip{opacity:1;visibility:visible}.tooltip-status-icon{width:8px;height:8px;border-radius:50%;flex-shrink:0}@media (max-width: 768px){.delay-chart-container{padding:1rem}.delay-chart-header{flex-direction:column;align-items:flex-start}.metric-badge-tooltip{left:0;transform:translate(0)}}.diagnostics{width:100%;padding-bottom:2rem}.diagnostics-header{margin-bottom:1.5rem}.diagnostics-title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin:0}.network-selector-section{margin-bottom:1.5rem}.network-selector-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}.network-selector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.network-loading,.network-empty{grid-column:1 / -1;text-align:center;padding:2rem;color:var(--text-secondary);font-size:.95rem}.network-loading{display:flex;align-items:center;justify-content:center;gap:.5rem}.network-card{position:relative;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:16px;padding:1.25rem;cursor:pointer;transition:all .2s ease;opacity:.5}.network-card:hover{border-color:var(--accent-primary);opacity:.8}.network-card.selected{border-color:var(--accent-primary);background:linear-gradient(135deg,#8b5cf626,#8b5cf60d);opacity:1}.network-check{position:absolute;top:-8px;right:-8px;width:24px;height:24px;background:var(--accent-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:700}.network-active-badge{position:absolute;top:12px;right:12px;font-size:.625rem;font-weight:700;color:#10b981;background:#10b98126;padding:.25rem .5rem;border-radius:6px;letter-spacing:.05em}.network-icon{width:48px;height:48px;background:#8b5cf626;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--accent-primary);margin-bottom:.75rem}.network-card:not(.selected) .network-icon{background:var(--bg-tertiary);color:var(--text-muted)}.network-name{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.network-subname{font-size:.8125rem;color:var(--text-muted);margin-bottom:.75rem}.network-badge{display:inline-block;font-size:.6875rem;font-weight:600;padding:.25rem .5rem;border-radius:6px}.network-badge.wifi{color:var(--accent-primary);background:#8b5cf626}.network-badge.cellular{color:#10b981;background:#10b98126}.network-badge.ethernet{color:#9ca3af;background:#9ca3af26}.network-badge.network{color:#6366f1;background:#6366f126}.network-card:not(.selected) .network-badge{color:var(--text-muted);background:var(--bg-tertiary)}.trends-header{display:flex;align-items:center;justify-content:space-between;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1rem 1.5rem;margin-bottom:1.5rem}.trends-left{display:flex;align-items:center;gap:1rem}.trends-icon{width:40px;height:40px;background:#8b5cf626;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent-primary)}.trends-info{display:flex;flex-direction:column}.trends-label{font-size:.8125rem;color:var(--text-muted)}.trends-network{font-size:1rem;font-weight:600;color:#10b981}.trends-right{text-align:right}.trends-score-label{display:block;font-size:.75rem;color:var(--text-muted);margin-bottom:.25rem}.trends-score-value{font-size:2rem;font-weight:700;color:var(--text-primary)}.network-session-selector{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(139,92,246,.15);display:flex;align-items:center;width:100%}.session-select-inline{width:100%;background:linear-gradient(135deg,#8b5cf61f,#6366f114);border:1px solid rgba(139,92,246,.25);border-radius:12px;padding:.6rem 2.25rem .6rem 1rem;font-size:.8rem;font-weight:500;color:#c4b5fd;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;flex-shrink:0;transition:all .2s ease}.session-select-inline:hover{background:linear-gradient(135deg,#8b5cf633,#6366f126);border-color:#8b5cf666;transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf626}.session-select-inline:focus{outline:none;border-color:#a78bfa;box-shadow:0 0 0 3px #8b5cf626,0 4px 12px #8b5cf61a}.session-select-inline option{background:#1a1625;color:#e9d5ff;padding:.75rem 1rem;font-size:.85rem;border-bottom:1px solid rgba(139,92,246,.1)}.session-select-inline option:checked{background:linear-gradient(135deg,#8b5cf64d,#6366f133);color:#fff}.session-select-inline option:hover{background:#8b5cf633}.session-time-inline{font-size:.7rem;color:#a78bfab3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}.stat-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1.25rem;display:flex;align-items:flex-start;gap:1rem}.stat-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-icon.green{background:#10b98126;color:#10b981}.stat-icon.purple{background:#8b5cf626;color:#8b5cf6}.stat-icon.red{background:#ef444426;color:#ef4444}.stat-icon.yellow{background:#f59e0b26;color:#f59e0b}.stat-icon.blue{background:#3b82f626;color:#3b82f6}.stat-info{display:flex;flex-direction:column}.stat-label{font-size:.75rem;color:var(--text-muted);margin-bottom:.25rem}.stat-value{font-size:1.5rem;font-weight:700;color:var(--text-primary);line-height:1.2}.stat-change{font-size:.75rem;font-weight:500}.stat-change.positive,.stat-change.negative{color:#10b981}.stat-sublabel{font-size:.75rem;color:var(--text-muted)}.chart-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem}.chart-section.full-width{width:100%}.charts-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:1.5rem}.charts-row .chart-section{margin-bottom:0;min-width:0;height:fit-content}.charts-row .chart-section .recharts-responsive-container{min-height:200px}.chart-section.chart-coming-soon{position:relative}.chart-section.chart-coming-soon:after{content:"COMING SOON";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--accent-primary);color:#fff;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 4px 20px #8b5cf699;z-index:10}.chart-section.chart-coming-soon:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#11182780;border-radius:16px;z-index:5}.chart-section.chart-coming-soon .chart-header,.chart-section.chart-coming-soon .recharts-responsive-container,.chart-section.chart-coming-soon .isp-stats{filter:blur(3px) grayscale(60%);opacity:.5;pointer-events:none}.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.chart-header h3{margin:0;font-size:1rem;font-weight:600;color:var(--text-primary)}.chart-title-with-icon{display:flex;align-items:center;gap:.5rem}.chart-period{font-size:.875rem;font-weight:500;color:var(--accent-primary)}.chart-period.disruption{color:#ef4444}.chart-stats{display:flex;justify-content:space-around;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}.chart-stats span{font-size:.9rem;color:var(--text-secondary)}.chart-stats span strong{color:var(--text-primary);font-weight:600}.chart-info-box{display:flex;align-items:flex-start;gap:.75rem;margin-top:1rem;padding:1rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px}.chart-info-box svg{color:var(--accent-primary);flex-shrink:0;margin-top:2px}.chart-info-box strong{display:block;font-size:.875rem;color:var(--text-primary);margin-bottom:.25rem}.chart-info-box p{margin:0;font-size:.8125rem;color:var(--text-muted);line-height:1.4}.isp-stats{display:flex;gap:1rem;margin-top:1rem}.isp-stat{flex:1;background:var(--bg-tertiary);border-radius:10px;padding:1rem;text-align:center}.isp-stat-label{display:block;font-size:.75rem;color:var(--text-muted);margin-bottom:.25rem}.isp-stat-value{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.disruption-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}.disruption-stat{background:var(--bg-tertiary);border-radius:10px;padding:1rem}.disruption-stat-label{display:block;font-size:.6875rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.disruption-stat-value{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.disruption-stat-sub{display:block;font-size:.75rem;color:var(--text-muted);margin-top:.25rem}.neighborhood-section{padding:1.5rem}.neighborhood-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.neighborhood-title-area{display:flex;align-items:center;gap:1rem}.neighborhood-icon{width:48px;height:48px;background:linear-gradient(135deg,#8b5cf633,#8b5cf61a);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--accent-primary)}.neighborhood-title-area h3{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-primary)}.neighborhood-title-area span{font-size:.8125rem;color:var(--text-muted)}.neighborhood-stats{display:flex;gap:1rem}.neighborhood-stat{display:flex;flex-direction:column;align-items:center;padding:.75rem 1.25rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;min-width:100px}.neighborhood-stat.highlight{border-color:var(--accent-primary)}.stat-label-small{font-size:.625rem;font-weight:600;color:var(--accent-primary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.neighborhood-stat:not(.highlight) .stat-label-small{color:var(--text-muted)}.stat-value-large{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.distribution-legend{display:flex;justify-content:center;gap:2rem;margin-top:1rem;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--text-secondary)}.legend-dot{width:10px;height:10px;border-radius:50%}.legend-dot.purple{background:#8b5cf6}.legend-dot.gray{background:#9ca3af}.legend-dot.green{background:#10b981}.legend-dot.orange{background:#f59e0b}.legend-dot.cyan{background:#06b6d4}.device-comparison-section{padding:1.5rem}.device-comparison-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.device-comparison-title-area{display:flex;align-items:center;gap:1rem}.device-comparison-icon{width:48px;height:48px;background:linear-gradient(135deg,#06b6d433,#06b6d41a);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#06b6d4}.device-comparison-title-area h3{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-primary)}.device-comparison-title-area span{font-size:.8125rem;color:var(--text-muted)}.device-comparison-stats{display:flex;gap:1rem}.device-comparison-stat{display:flex;flex-direction:column;align-items:center;padding:.75rem 1.25rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;min-width:100px}.device-comparison-stat.highlight{border-color:#06b6d4}.device-comparison-stat.highlight .stat-label-small{color:#06b6d4}.device-comparison-stat:not(.highlight) .stat-label-small{color:var(--text-muted)}.device-legend{margin-top:1.5rem}.asymmetry-stats{display:flex;gap:1rem;margin-top:1rem}.asymmetry-stat{flex:1;background:var(--bg-tertiary);border-radius:10px;padding:1rem;text-align:center}.asymmetry-stat-label{display:block;font-size:.75rem;color:var(--text-muted);margin-bottom:.25rem}.asymmetry-stat-value{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.diagnostics-charts{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.diagnostics-charts.single-chart{grid-template-columns:1fr;max-width:100%}.diagnostics-charts .delay-chart-container,.diagnostics-charts .asymmetry-chart-container{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:1rem}@media (max-width: 1200px){.network-selector-grid{grid-template-columns:repeat(2,1fr)}.stats-row{grid-template-columns:repeat(3,1fr)}}@media (max-width: 1000px){.stats-row{grid-template-columns:repeat(2,1fr)}}@media (max-width: 900px){.charts-row{grid-template-columns:1fr}.neighborhood-stats{flex-wrap:wrap}}@media (max-width: 768px){.network-selector-grid,.stats-row{grid-template-columns:1fr}.trends-header{flex-direction:column;gap:1rem;text-align:center}.trends-right{text-align:center}.disruption-stats{grid-template-columns:1fr}}.chart-wrapper-relative{position:relative}.no-data-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#0000004d;border-radius:8px;z-index:10}.no-data-overlay span{color:var(--text-secondary);font-size:.875rem;font-weight:500}.devices{padding:2rem;max-width:1200px;margin:0 auto}.devices-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem}.devices-title{font-size:1.75rem;font-weight:600;color:var(--text-primary);margin:0 0 .5rem}.devices-subtitle{font-size:.95rem;color:var(--text-secondary);margin:0}.btn-add-device{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #6366f14d}.btn-add-device:hover{transform:translateY(-2px);box-shadow:0 6px 16px #6366f166}.devices-content{min-height:400px}.devices-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:var(--text-secondary)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:#6366f1;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.devices-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.empty-icon{font-size:4rem;color:var(--text-secondary);opacity:.5;margin-bottom:1.5rem}.devices-empty h3{font-size:1.25rem;color:var(--text-primary);margin:0 0 .5rem}.devices-empty p{color:var(--text-secondary);margin:0 0 1.5rem}.btn-add-device-large{display:flex;align-items:center;gap:.5rem;padding:1rem 2rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #6366f14d}.btn-add-device-large:hover{transform:translateY(-2px);box-shadow:0 6px 16px #6366f166}.devices-error{padding:1rem 1.5rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:10px;color:#ef4444;margin-bottom:1.5rem}.devices-auth-required{display:flex;justify-content:center;padding:4rem 2rem}.auth-message{text-align:center;max-width:400px}.auth-icon{font-size:3rem;color:var(--text-secondary);opacity:.5;margin-bottom:1rem}.auth-message h3{font-size:1.25rem;color:var(--text-primary);margin:0 0 .5rem}.auth-message p{color:var(--text-secondary);margin:0}.devices-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem}.device-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;transition:all .2s ease}.device-card:hover{border-color:#6366f14d;box-shadow:0 8px 24px #0000001a}.device-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}.device-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:linear-gradient(135deg,#6366f126,#8b5cf626);border-radius:12px;color:#6366f1;font-size:1.25rem}.device-info{flex:1}.btn-delete-device{display:flex;align-items:center;justify-content:center;padding:.5rem;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;opacity:0}.device-card:hover .btn-delete-device{opacity:1}.btn-delete-device:hover{background:#ef44441a;border-color:#ef44444d;color:#ef4444}.device-name{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin:0 0 .25rem}.device-date{font-size:.8rem;color:var(--text-secondary)}.device-details{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem;padding:1rem;background:var(--bg-secondary);border-radius:10px}.detail-row{display:flex;justify-content:space-between;align-items:center}.detail-label{font-size:.85rem;color:var(--text-secondary)}.detail-value-copy{display:flex;align-items:center;gap:.5rem}.detail-value{font-family:SF Mono,Monaco,Consolas,monospace;font-size:.8rem;color:var(--text-primary);background:var(--bg-tertiary);padding:.25rem .5rem;border-radius:4px}.btn-copy{display:flex;align-items:center;justify-content:center;padding:.35rem;background:transparent;border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.btn-copy:hover{background:var(--bg-secondary);color:#6366f1;border-color:#6366f1}.device-status{display:flex;align-items:center;gap:.5rem;padding-top:.75rem;border-top:1px solid var(--border-color)}.status-indicator{width:8px;height:8px;border-radius:50%}.status-active{background:#10b981;box-shadow:0 0 8px #10b98180}.status-text{font-size:.85rem;color:var(--text-secondary)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-content{background:var(--card-bg);border-radius:16px;width:100%;max-width:480px;box-shadow:0 20px 50px #0000004d;overflow:hidden}.modal-header{padding:1.5rem 1.5rem 0}.modal-header h3{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0 0 .25rem}.modal-header p{font-size:.9rem;color:var(--text-secondary);margin:0}.modal-body{padding:1.5rem}.modal-footer{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--border-color);background:var(--bg-secondary)}.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.9rem;font-weight:500;color:var(--text-primary);margin-bottom:.5rem}.form-group input{width:100%;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;font-size:1rem;color:var(--text-primary);transition:all .2s ease}.form-group input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.form-group input::placeholder{color:var(--text-secondary);opacity:.6}.btn-primary{padding:.75rem 1.5rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{padding:.75rem 1.5rem;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:10px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-secondary:hover:not(:disabled){background:var(--bg-tertiary)}.btn-secondary:disabled{opacity:.6;cursor:not-allowed}.success-message{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:1.5rem}.success-icon{font-size:3rem;color:#10b981;margin-bottom:1rem}.success-message p{color:var(--text-secondary);margin:0}.credential-box{margin-bottom:1rem}.credential-box label{display:block;font-size:.85rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem}.credential-value{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px}.credential-value code{flex:1;font-family:SF Mono,Monaco,Consolas,monospace;font-size:.85rem;color:var(--text-primary);word-break:break-all}.credential-warning{padding:.75rem 1rem;background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:8px;color:#f59e0b;font-size:.85rem;margin:0}.modal-delete{max-width:420px}.modal-header-danger{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem 1.5rem 1rem}.modal-header-danger h3{margin-top:.5rem}.danger-icon{font-size:2.5rem;color:#ef4444;margin-bottom:.5rem}.delete-warning{text-align:center;font-size:1rem;color:var(--text-primary);margin:0 0 .75rem}.delete-warning strong{color:#ef4444}.delete-description{text-align:center;font-size:.9rem;color:var(--text-secondary);margin:0}.btn-danger{padding:.75rem 1.5rem;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-danger:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}.btn-danger:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px){.devices{padding:1rem}.devices-header{flex-direction:column;gap:1rem}.btn-add-device{width:100%;justify-content:center}.devices-grid{grid-template-columns:1fr}}.settings{width:100%;max-width:800px}.settings-header{margin-bottom:2rem}.settings-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em;margin-bottom:.5rem}.settings-subtitle{font-size:1rem;color:var(--text-secondary)}.settings-content{display:flex;flex-direction:column;gap:2rem}.settings-section{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.5rem}.section-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-color)}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1.5rem}.setting-item:not(:last-child){border-bottom:1px solid var(--border-color)}.setting-info{flex:1;display:flex;flex-direction:column;gap:.25rem}.setting-label{font-size:.9375rem;font-weight:500;color:var(--text-primary)}.setting-description{font-size:.875rem;color:var(--text-secondary)}.setting-input{padding:.5rem .75rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:.9375rem;min-width:150px;cursor:pointer;transition:all .2s ease}.setting-input:hover{border-color:var(--accent-primary)}.setting-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #6366f11a}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--bg-tertiary);transition:.3s;border-radius:24px}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:var(--accent-primary)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.settings-actions{display:flex;gap:1rem;margin-top:1rem}.btn-primary{padding:.75rem 1.5rem;background:var(--accent-primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-primary:hover{background:#4f46e5;transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{padding:.75rem 1.5rem;background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-secondary:hover{background:var(--bg-secondary);border-color:var(--accent-primary);color:var(--accent-primary)}@media (max-width: 768px){.setting-item{flex-direction:column;align-items:flex-start;gap:1rem}.setting-input{width:100%}.settings-actions{flex-direction:column}.btn-primary,.btn-secondary{width:100%}}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:var(--bg-primary)}.login-card{background-color:var(--bg-secondary);border-radius:16px;padding:48px 40px;box-shadow:var(--shadow-lg);max-width:420px;width:100%;text-align:center}.login-logo{width:128px;height:128px;margin-bottom:16px;border-radius:50%;object-fit:cover;object-position:center;display:block;margin-left:auto;margin-right:auto}.login-title{font-size:32px;font-weight:700;margin:0 0 16px}.login-title-net{color:#f3f4f6}.login-title-vibe{color:#9b7bf7}.login-subtitle{font-size:16px;color:var(--text-secondary);margin:0 0 32px;line-height:1.5}.login-error{background-color:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#ef4444;padding:12px 16px;border-radius:8px;margin-bottom:24px;font-size:14px;text-align:left}.login-button-wrapper{display:flex;justify-content:center}.google-login-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:12px 24px;background-color:#fff;color:#3c4043;border:1px solid #dadce0;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:inherit}.google-login-button:hover{background-color:#f8f9fa;box-shadow:0 1px 3px #0000001a}.google-login-button:active{background-color:#f1f3f4}.google-icon{width:20px;height:20px;flex-shrink:0}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:2rem;margin-left:240px;margin-top:80px;width:calc(100% - 240px);max-width:none}.charts-section{margin-top:2rem}@media (max-width: 768px){.main-content{padding:1rem;margin-left:200px;width:calc(100% - 200px)}}.toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:400px}.toast{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:8px;background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:0 4px 12px #0000004d;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast-icon{display:flex;align-items:center;font-size:18px}.toast-message{flex:1;font-size:14px;color:var(--text-primary)}.toast-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .2s}.toast-close:hover{color:var(--text-primary)}.toast-success{border-left:4px solid #22c55e}.toast-success .toast-icon{color:#22c55e}.toast-error{border-left:4px solid #ef4444}.toast-error .toast-icon{color:#ef4444}.toast-warning{border-left:4px solid #eab308}.toast-warning .toast-icon{color:#eab308}.toast-info{border-left:4px solid #3b82f6}.toast-info .toast-icon{color:#3b82f6}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #ffffff;--bg-secondary: #f9fafb;--bg-tertiary: #f3f4f6;--text-primary: #111827;--text-secondary: #6b7280;--text-tertiary: #9ca3af;--border-color: #e5e7eb;--accent-primary: #6366f1;--accent-secondary: #8b5cf6;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--radius: 12px;--radius-sm: 8px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.6;transition:background-color .3s ease,color .3s ease}#root{min-height:100vh}*:not(.orb):not(.orb-icon):not(.status-dot):not(.orb-status-indicator){transition:background-color .3s ease,color .3s ease,border-color .3s ease}