:root{--bg-deep:#060a14;--bg-base:#0a0e1a;--bg-surface:#111827;--bg-card:#1118278c;--bg-card-hover:#111827d9;--bg-sidebar:#0a0e1aeb;--border:#ffffff0f;--border-hover:#ffffff24;--border-active:#10b98166;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#475569;--text-dim:#334155;--accent-green:#10b981;--accent-green-soft:#10b9811f;--accent-green-glow:#10b98140;--accent-cyan:#06b6d4;--accent-cyan-soft:#06b6d41f;--accent-cyan-glow:#06b6d433;--accent-red:#ef4444;--accent-red-soft:#ef44441f;--accent-red-glow:#ef444440;--accent-amber:#f59e0b;--accent-amber-soft:#f59e0b1f;--accent-purple:#8b5cf6;--accent-purple-soft:#8b5cf61f;--gradient-primary:linear-gradient(135deg, var(--accent-green), var(--accent-cyan));--gradient-online:linear-gradient(135deg, #10b981, #34d399);--gradient-offline:linear-gradient(135deg, #ef4444, #f87171);--gradient-card-border:linear-gradient(135deg, #10b98133, #06b6d41a);--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--ease-out:cubic-bezier(.16, 1, .3, 1);--transition-fast:.15s var(--ease-out);--transition-normal:.25s var(--ease-out);--transition-slow:.4s var(--ease-out);--sidebar-width:260px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-sans);background:var(--bg-deep);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}.login-screen{background:var(--bg-deep);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.login-screen:before{content:"";background:radial-gradient(ellipse, var(--accent-green-glow) 0%, transparent 70%);pointer-events:none;width:700px;height:500px;animation:6s ease-in-out infinite alternate loginGlow;position:absolute;top:-150px;left:50%;transform:translate(-50%)}.login-screen:after{content:"";background:radial-gradient(ellipse, var(--accent-cyan-glow) 0%, transparent 70%);pointer-events:none;width:500px;height:400px;animation:8s ease-in-out infinite alternate-reverse loginGlow;position:absolute;bottom:-200px;right:-100px}@keyframes loginGlow{0%{opacity:.4;transform:translate(-50%)scale(1)}to{opacity:.7;transform:translate(-50%)scale(1.1)}}.login-card{z-index:2;width:100%;max-width:420px;padding:var(--space-2xl) var(--space-xl);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);animation:fadeInUp .7s var(--ease-out) both;position:relative}.login-logo{text-align:center;margin-bottom:var(--space-xl)}.login-logo-icon{margin-bottom:var(--space-md);filter:drop-shadow(0 0 20px var(--accent-cyan-glow));font-size:3rem;display:block}.login-title{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.75rem;font-weight:800}.login-subtitle{color:var(--text-muted);margin-top:var(--space-xs);font-size:.85rem}.login-form{gap:var(--space-lg);flex-direction:column;display:flex}.input-group{gap:var(--space-sm);flex-direction:column;display:flex}.input-label{color:var(--text-secondary);font-size:.8rem;font-weight:600}.input-field{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-family:var(--font-sans);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:12px 16px;font-size:.95rem}.input-field:focus{border-color:var(--accent-green);box-shadow:0 0 0 3px var(--accent-green-soft)}.input-field::placeholder{color:var(--text-dim)}.btn-primary{justify-content:center;align-items:center;gap:var(--space-sm);background:var(--gradient-primary);border-radius:var(--radius-md);color:#fff;width:100%;font-size:.95rem;font-weight:700;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-normal);border:none;padding:14px;display:flex;position:relative;overflow:hidden}.btn-primary:hover{box-shadow:0 8px 30px var(--accent-green-glow);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.login-error{text-align:center;color:var(--accent-red);font-size:.85rem;font-weight:500;animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.dashboard{flex-direction:column;min-height:100vh;display:flex}.dashboard:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(#10b98114 0%,#0000 70%);width:800px;height:600px;position:fixed;top:-200px;left:50%;transform:translate(-50%)}.header{z-index:100;padding:var(--space-md) var(--space-lg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);background:#060a14d9;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.header-left,.header-right{align-items:center;gap:var(--space-md);display:flex}.header-center,.logo{align-items:center;gap:var(--space-sm);display:flex}.logo-icon{filter:drop-shadow(0 0 12px var(--accent-cyan-glow));font-size:1.5rem}.logo-title{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.15rem;font-weight:800}.logo-subtitle{color:var(--text-muted);letter-spacing:.5px;font-size:.65rem;font-weight:400}.filter-label{color:var(--text-muted);font-size:.7rem;font-weight:500}.date-input{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.8rem;font-family:var(--font-mono);transition:border-color var(--transition-fast);outline:none;padding:6px 12px}.date-input:focus{border-color:var(--accent-cyan)}.date-input::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer}.date-range-group{align-items:center;gap:var(--space-sm);display:flex}.connection-badge{border-radius:var(--radius-full);background:var(--accent-green-soft);color:var(--accent-green);transition:all var(--transition-normal);border:1px solid #10b98133;align-items:center;gap:6px;padding:5px 12px;font-size:.7rem;font-weight:500;display:flex}.connection-badge.disconnected{background:var(--accent-red-soft);color:var(--accent-red);border-color:#ef444433}.connection-dot{background:currentColor;border-radius:50%;width:7px;height:7px;animation:2s infinite pulse}.btn-ghost{border:1px solid var(--border);border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;display:flex}.btn-ghost:hover{background:var(--accent-red-soft);color:var(--accent-red);border-color:#ef444433}.dashboard-body{z-index:1;flex:1;display:flex;position:relative}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-direction:column;height:calc(100vh - 57px);display:flex;position:sticky;top:57px;overflow-y:auto}.sidebar-header{padding:var(--space-lg) var(--space-md);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.sidebar-title{text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);font-size:.8rem;font-weight:700}.badge{border-radius:var(--radius-full);background:var(--accent-green-soft);color:var(--accent-green);font-size:.65rem;font-weight:700;font-family:var(--font-mono);padding:2px 8px}.user-list{padding:var(--space-sm);flex:1;overflow-y:auto}.user-list::-webkit-scrollbar{width:4px}.user-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.user-card{align-items:center;gap:var(--space-md);padding:var(--space-md);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);margin-bottom:var(--space-xs);border:1px solid #0000;display:flex}.user-card:hover{background:#ffffff08}.user-card.active{background:var(--accent-green-soft);border-color:var(--border-active)}.user-avatar{background:var(--accent-purple-soft);width:40px;height:40px;color:var(--accent-purple);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;display:flex;position:relative}.user-avatar .status-indicator{border:2px solid var(--bg-sidebar);background:var(--text-dim);width:12px;height:12px;transition:all var(--transition-normal);border-radius:50%;position:absolute;bottom:0;right:0}.user-avatar .status-indicator.online{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green-glow);animation:1.5s infinite pulse}.user-avatar .status-indicator.privacy{background:#f59e0b;box-shadow:0 0 8px #f59e0b66}.user-info{flex:1;min-width:0}.user-name{white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:600;overflow:hidden}.user-last-seen{color:var(--text-muted);font-size:.7rem}.empty-sidebar{padding:var(--space-xl) var(--space-md);text-align:center;color:var(--text-muted)}.empty-sidebar p{margin-bottom:var(--space-xs);font-size:.85rem;font-weight:600}.empty-sidebar span{font-size:.75rem}.main-content{padding:var(--space-lg);flex:1;max-width:100%;overflow:hidden}.stats-grid{gap:var(--space-md);margin-bottom:var(--space-lg);grid-template-columns:repeat(4,1fr);display:grid}.stat-card{align-items:center;gap:var(--space-md);padding:var(--space-lg);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:all var(--transition-normal);animation:fadeInUp .5s var(--ease-out) both;display:flex}.stat-card:first-child{animation-delay:0s}.stat-card:nth-child(2){animation-delay:60ms}.stat-card:nth-child(3){animation-delay:.12s}.stat-card:nth-child(4){animation-delay:.18s}.stat-card:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-2px)}.stat-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.stat-icon.online-icon{background:var(--accent-green-soft);color:var(--accent-green)}.stat-icon.sessions-icon{background:var(--accent-cyan-soft);color:var(--accent-cyan)}.stat-icon.avg-icon{background:var(--accent-purple-soft);color:var(--accent-purple)}.stat-icon.longest-icon{background:var(--accent-amber-soft);color:var(--accent-amber)}.stat-value{font-size:1.5rem;font-weight:700;font-family:var(--font-mono);line-height:1.2;display:block}.stat-label{color:var(--text-secondary);font-size:.75rem;font-weight:500}.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);margin-bottom:var(--space-lg);animation:fadeInUp .6s var(--ease-out) both;animation-delay:.2s;overflow:hidden}.panel-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.panel-title{align-items:center;gap:var(--space-sm);color:var(--text-secondary);font-size:.9rem;font-weight:700;display:flex}.panel-title svg{color:var(--accent-cyan)}.panel-controls{align-items:center;gap:var(--space-md);display:flex}.chart-container{padding:var(--space-md) var(--space-lg) var(--space-lg);height:260px;position:relative}.timeline-container{padding:var(--space-md) var(--space-lg) var(--space-lg)}#timeline-canvas{border-radius:var(--radius-sm);width:100%}.timeline-hours{padding-top:var(--space-sm);color:var(--text-muted);font-size:.65rem;font-family:var(--font-mono);justify-content:space-between;display:flex}.timeline-legend{gap:var(--space-md);color:var(--text-secondary);font-size:.7rem;display:flex}.legend-item{align-items:center;gap:5px;display:flex}.legend-dot{border-radius:3px;width:8px;height:8px}.legend-dot.online{background:var(--accent-green)}.legend-dot.offline{background:#ef444459}.heatmap-container{padding:var(--space-md) var(--space-lg) var(--space-lg);grid-template-columns:repeat(24,1fr);gap:4px;display:grid}.heatmap-cell{aspect-ratio:1;transition:all var(--transition-normal);cursor:pointer;background:#ffffff08;border-radius:6px;justify-content:center;align-items:flex-end;min-height:32px;display:flex;position:relative}.heatmap-cell:hover{z-index:2;transform:scale(1.15)}.heatmap-cell .heatmap-tooltip{background:var(--bg-surface);border:1px solid var(--border-hover);border-radius:var(--radius-sm);white-space:nowrap;color:var(--text-primary);pointer-events:none;z-index:10;padding:6px 10px;font-size:.7rem;display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0006}.heatmap-cell:hover .heatmap-tooltip{display:block}.heatmap-label{color:var(--text-muted);text-align:center;font-size:.6rem;font-family:var(--font-mono);padding-bottom:4px}.history-table-wrapper{max-height:480px;overflow-y:auto}.history-table-wrapper::-webkit-scrollbar{width:5px}.history-table-wrapper::-webkit-scrollbar-track{background:0 0}.history-table-wrapper::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.history-table{border-collapse:collapse;width:100%}.history-table thead{z-index:2;position:sticky;top:0}.history-table th{text-align:left;padding:10px var(--space-lg);text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);background:var(--bg-surface);border-bottom:1px solid var(--border);font-size:.65rem;font-weight:600}.history-table td{padding:10px var(--space-lg);border-bottom:1px solid var(--border);transition:background var(--transition-fast);font-size:.8rem}.history-table tbody tr:hover td{background:#ffffff05}.event-count{color:var(--text-muted);font-size:.7rem;font-family:var(--font-mono)}.status-badge{border-radius:var(--radius-full);align-items:center;gap:5px;padding:3px 10px;font-size:.7rem;font-weight:600;display:inline-flex}.status-badge.online{background:var(--accent-green-soft);color:var(--accent-green)}.status-badge.offline{background:var(--accent-red-soft);color:var(--accent-red)}.status-badge.privacy{color:#f59e0b;background:#f59e0b1a}.status-badge-dot{background:currentColor;border-radius:50%;width:5px;height:5px}.user-cell{align-items:center;gap:var(--space-sm);display:flex}.user-cell-avatar{background:var(--accent-purple-soft);width:24px;height:24px;color:var(--accent-purple);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.6rem;font-weight:700;display:flex}.user-cell-name{font-size:.8rem;font-weight:500}.duration-text{font-family:var(--font-mono);color:var(--text-secondary);font-size:.75rem}.time-text{font-family:var(--font-mono);font-size:.75rem}.last-seen-text{color:var(--text-muted);font-size:.75rem}.empty-state{text-align:center;padding:var(--space-2xl);color:var(--text-muted)}.empty-state p{margin-bottom:var(--space-xs);font-weight:600}.empty-state span{font-size:.8rem}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.event-flash{animation:1s ease-out flashRow}@keyframes flashRow{0%{background:#10b98126}to{background:0 0}}@media (width<=1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}.header-center{display:none}}@media (width<=768px){.sidebar{width:100%;min-width:unset;border-right:none;border-bottom:1px solid var(--border);height:auto;max-height:200px;position:static}.dashboard-body{flex-direction:column}.main-content{padding:var(--space-md)}.header{padding:var(--space-sm) var(--space-md)}.stats-grid{grid-template-columns:repeat(2,1fr)}.heatmap-container{grid-template-columns:repeat(12,1fr)}.stat-value{font-size:1.2rem}.chart-container{height:200px}.user-list{gap:var(--space-sm);padding:var(--space-sm);display:flex;overflow-x:auto}.user-card{flex-shrink:0;min-width:160px}}@media (width<=480px){.stats-grid{gap:var(--space-sm);grid-template-columns:1fr 1fr}.stat-card{padding:var(--space-md)}.stat-value{font-size:1rem}.heatmap-container{grid-template-columns:repeat(8,1fr)}}.toggle-group{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-full);gap:2px;padding:2px;display:flex}.toggle-btn{border-radius:var(--radius-full);color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;padding:5px 14px;font-size:.7rem;font-weight:600}.toggle-btn:hover{color:var(--text-secondary)}.toggle-btn.active{background:var(--accent-green-soft);color:var(--accent-green)}.sidebar-section{border-top:1px solid var(--border);margin-top:auto}.targets-list{padding:var(--space-sm);max-height:200px;overflow-y:auto}.target-item{padding:8px var(--space-sm);border-radius:var(--radius-sm);transition:background var(--transition-fast);justify-content:space-between;align-items:center;font-size:.8rem;display:flex}.target-item:hover{background:#ffffff08}.target-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.target-phone{font-family:var(--font-mono);color:var(--text-secondary);font-size:.75rem}.target-label{white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:500;overflow:hidden}.target-inactive{opacity:.4}.target-actions{flex-shrink:0;gap:4px;display:flex}.btn-icon{border:1px solid var(--border);border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;display:flex}.btn-icon:hover{color:var(--text-primary);background:#ffffff0d}.btn-icon.danger:hover{color:var(--accent-red);background:var(--accent-red-soft);border-color:#ef444433}.add-target-form{gap:var(--space-sm);padding:var(--space-sm) var(--space-md) var(--space-md);flex-direction:column;display:flex}.input-field-sm{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font-sans);transition:border-color var(--transition-fast);outline:none;padding:8px 12px;font-size:.8rem}.input-field-sm:focus{border-color:var(--accent-green)}.input-field-sm::placeholder{color:var(--text-dim)}.btn-add{border-radius:var(--radius-sm);background:var(--accent-green-soft);color:var(--accent-green);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:6px;padding:8px;font-size:.8rem;font-weight:600;display:flex}.btn-add:hover{background:#10b98133}.manage-page{padding:var(--space-xl);max-width:900px;min-height:100vh;margin:0 auto}.manage-container{gap:var(--space-lg);flex-direction:column;display:flex}.manage-header{padding:var(--space-lg) 0;border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.manage-header-left{align-items:center;gap:var(--space-md);display:flex}.manage-title{margin:0;font-size:1.5rem;font-weight:700}.manage-subtitle{color:var(--text-muted);margin:4px 0 0;font-size:.8rem}.manage-badge{padding:4px 14px;font-size:.9rem}.btn-back{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.btn-back:hover{color:var(--text-primary);background:#ffffff0d}.btn-sidebar-nav{width:100%;padding:12px var(--space-md);border:none;border-top:1px solid var(--border);color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);background:0 0;align-items:center;gap:8px;font-size:.8rem;display:flex}.btn-sidebar-nav:hover{color:var(--accent-green);background:#10b9810d}.sidebar-footer{margin-top:auto}.manage-add-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg)}.manage-add-title{margin:0 0 var(--space-md);color:var(--text-primary);align-items:center;gap:8px;font-size:.95rem;font-weight:600;display:flex}.manage-add-form{gap:var(--space-sm);flex-direction:column;display:flex}.manage-add-fields{gap:var(--space-sm);align-items:flex-end;display:flex}.manage-field{flex-direction:column;flex:1;gap:4px;display:flex}.manage-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.7rem;font-weight:600}.manage-input{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);transition:border-color var(--transition-fast);outline:none;padding:10px 14px;font-size:.85rem}.manage-input:focus{border-color:var(--accent-green)}.manage-input::placeholder{color:var(--text-dim)}.btn-manage-add{border-radius:var(--radius-sm);background:var(--accent-green);color:#fff;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:none;align-items:center;gap:6px;padding:10px 20px;font-size:.85rem;font-weight:600;display:flex}.btn-manage-add:hover{background:#059669}.manage-hint{color:var(--text-dim);margin:8px 0 0;font-size:.72rem}.manage-table-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.manage-table-wrapper{overflow-x:auto}.manage-table{border-collapse:collapse;width:100%}.manage-table thead th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border);background:var(--bg-elevated);padding:14px 18px;font-size:.7rem;font-weight:600}.manage-table tbody td{vertical-align:middle;border-bottom:1px solid #ffffff08;padding:14px 18px;font-size:.85rem}.manage-table tbody tr:hover{background:#ffffff05}.manage-table .phone-mono{font-family:var(--font-mono);color:var(--text-secondary);font-size:.8rem}.manage-table .status-active{color:var(--accent-green);font-size:.75rem;font-weight:600}.manage-table .status-paused{color:var(--text-dim);font-size:.75rem;font-weight:600}.manage-table .date-text{color:var(--text-muted);font-size:.75rem}.manage-actions{gap:6px;display:flex}.manage-actions .btn-icon{width:32px;height:32px}@media (width<=640px){.manage-add-fields{flex-direction:column}.manage-page{padding:var(--space-md)}}.chart-container{width:100%;position:relative}