button,.btn,input[type=submit],input[type=button]{transition:all .2s cubic-bezier(.4,0,.2,1)}button:not(:disabled):hover,.btn:not(:disabled):hover,input[type=submit]:not(:disabled):hover,input[type=button]:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}button:not(:disabled):active,.btn:not(:disabled):active,input[type=submit]:not(:disabled):active,input[type=button]:not(:disabled):active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.btn-primary:not(:disabled):hover{background:linear-gradient(135deg,var(--primary-green-dark) 0%,var(--primary-green-mid) 100%);box-shadow:0 6px 20px #00a86b4d}.btn-danger:not(:disabled):hover,.delete-btn:not(:disabled):hover{box-shadow:0 6px 20px #ef44444d}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.dashboard-card,.video-card,.camera-card,.stat-card{transition:all .3s cubic-bezier(.4,0,.2,1)}.dashboard-card:hover,.video-card:hover,.camera-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001f}.video-thumbnail{transition:transform .3s ease-out;overflow:hidden}.video-thumbnail:hover img{transform:scale(1.05)}.video-thumbnail img{transition:transform .4s cubic-bezier(.4,0,.2,1)}a{transition:color .2s ease,opacity .2s ease}.nav-links a{position:relative;transition:color .2s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}.modal.show .modal-content{animation:modalSlideIn .3s cubic-bezier(.4,0,.2,1)}.modal.show{animation:backdropFadeIn .2s ease-out}input,textarea,select{transition:all .2s cubic-bezier(.4,0,.2,1)}input:focus,textarea:focus,select:focus{transform:scale(1.01);box-shadow:0 0 0 3px #00a86b1a}input[type=checkbox],input[type=radio]{transition:all .2s ease}input[type=checkbox]:checked,input[type=radio]:checked{transform:scale(1.1)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner,.loading-spinner{animation:spin 1s linear infinite}@keyframes skeletonPulse{0%,to{opacity:1}50%{opacity:.5}}.skeleton{animation:skeletonPulse 1.5s cubic-bezier(.4,0,.6,1) infinite}@keyframes progressSlide{0%{transform:translate(-100%)}to{transform:translate(400%)}}.progress-bar-animated{position:relative;overflow:hidden}.progress-bar-animated:after{content:"";position:absolute;top:0;left:0;width:25%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progressSlide 1.5s ease-in-out infinite}@keyframes statusPulse{0%,to{box-shadow:0 0 #10b981b3}50%{box-shadow:0 0 0 6px #10b98100}}.status-dot.status-online{animation:statusPulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.status-dot.status-offline{animation:blink 1.5s ease-in-out infinite}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-menu.show,.context-menu.show{animation:dropdownSlide .2s ease-out}@keyframes badgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.notification-badge,.badge-new{animation:badgePulse 1s ease-in-out 3}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideUp .4s cubic-bezier(.4,0,.2,1)}.stagger-children>*{animation:slideUp .4s cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.stagger-children>*:nth-child(1){animation-delay:.05s}.stagger-children>*:nth-child(2){animation-delay:.1s}.stagger-children>*:nth-child(3){animation-delay:.15s}.stagger-children>*:nth-child(4){animation-delay:.2s}.stagger-children>*:nth-child(5){animation-delay:.25s}.stagger-children>*:nth-child(6){animation-delay:.3s}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%,-5px)}to{opacity:1;transform:translate(-50%)}}[data-tooltip]:hover:after{animation:tooltipFadeIn .2s ease-out}.icon-button,.action-icon{transition:all .2s cubic-bezier(.4,0,.2,1)}.icon-button:hover,.action-icon:hover{transform:scale(1.15);color:var(--primary-green, #00a86b)}.icon-button:active,.action-icon:active{transform:scale(.95)}@keyframes downloadBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.download-icon:hover{animation:downloadBounce .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.delete-icon:hover{animation:shake .3s ease-in-out;color:var(--danger-red, #ef4444)}html{scroll-behavior:smooth}@keyframes scrollReveal{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.scroll-reveal{animation:scrollReveal .6s cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}@keyframes optimisticFlash{0%,to{background-color:transparent}50%{background-color:#00a86b26}}.optimistic-updating{animation:optimisticFlash .3s ease-out}@keyframes rollbackFlash{0%,to{background-color:transparent}50%{background-color:#ef444426}}.optimistic-rollback{animation:rollbackFlash .4s ease-out}.deleting{pointer-events:none;opacity:.6}.optimistic-saving:after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--primary-green, #00a86b);animation:savingPulse 1s ease-in-out infinite}@keyframes savingPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}@media (prefers-reduced-motion: reduce){.optimistic-updating,.optimistic-rollback{animation:none}.optimistic-saving:after{animation:none}}.session-toggle{display:flex;align-items:center;gap:8px}#sessionGroupingToggle{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;background:var(--card-bg, #2a2a2a);border:2px solid var(--border-color, #404040);color:var(--text-secondary, #a0a0a0);cursor:pointer;transition:all .2s ease;font-size:.9rem;font-weight:500}#sessionGroupingToggle:hover{border-color:var(--primary-color, #00ff88);color:var(--text-primary, #ffffff);transform:translateY(-1px)}#sessionGroupingToggle[data-enabled=true]{background:var(--primary-color, #00ff88);border-color:var(--primary-color, #00ff88);color:var(--dark-bg)}#sessionGroupingToggle .toggle-icon{font-size:1.1rem;line-height:1}.session-group{background:var(--card-bg, #2a2a2a);border-radius:12px;padding:20px;margin-bottom:24px;border:1px solid var(--border-color, #404040);transition:all .3s ease}.session-group:hover{border-color:var(--primary-color, #00ff88);box-shadow:0 4px 12px #00ff881a}.session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-color, #404040)}.session-header-left{flex:1}.session-header h3{margin:0 0 6px;font-size:1.1rem;font-weight:600;color:var(--text-primary, #ffffff);display:flex;align-items:center;gap:8px}.session-camera-icon{color:var(--primary-color, #00ff88);font-size:1.2rem}.session-meta{display:flex;align-items:center;gap:16px;font-size:.85rem;color:var(--text-secondary, #a0a0a0);flex-wrap:wrap}.session-meta-item{display:flex;align-items:center;gap:4px}.session-meta-item .icon{font-size:1rem}.session-stats{display:flex;gap:12px;align-items:center}.session-stat{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-tertiary, #1a1a1a);border-radius:8px;font-size:.85rem;color:var(--text-secondary, #a0a0a0)}.session-stat .stat-value{color:var(--primary-color, #00ff88);font-weight:600}.session-actions{display:flex;gap:8px;align-items:center}.session-action-btn{padding:8px 12px;border-radius:8px;border:1px solid var(--border-color, #404040);background:var(--bg-tertiary, #1a1a1a);color:var(--text-secondary, #a0a0a0);cursor:pointer;transition:all .2s ease;font-size:.85rem;display:flex;align-items:center;gap:6px}.session-action-btn:hover{border-color:var(--primary-color, #00ff88);color:var(--primary-color, #00ff88);transform:translateY(-1px)}.session-action-btn.danger:hover{border-color:var(--danger-red-vivid);color:var(--danger-red-vivid)}.session-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}@media (max-width: 768px){.session-videos{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}.expand-session-btn{margin-top:16px;width:100%;padding:12px;background:var(--bg-tertiary, #1a1a1a);border:1px solid var(--border-color, #404040);border-radius:8px;color:var(--primary-color, #00ff88);cursor:pointer;transition:all .2s ease;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px}.expand-session-btn:hover{background:var(--border-color, #404040);border-color:var(--primary-color, #00ff88);transform:translateY(-1px)}.expand-session-btn:before{content:"▼";transition:transform .2s ease}.expand-session-btn.expanded:before{transform:rotate(180deg)}.session-timeline{margin-top:12px;padding:12px 0;border-top:1px solid var(--border-color, #404040)}.session-timeline-label{font-size:.75rem;color:var(--text-secondary, #a0a0a0);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.session-timeline-bar{height:24px;background:var(--bg-tertiary, #1a1a1a);border-radius:4px;position:relative;overflow:hidden}.session-timeline-segments{display:flex;height:100%;gap:2px}.timeline-segment{flex:1;background:var(--bg-tertiary, #1a1a1a);position:relative;transition:all .2s ease}.timeline-segment.active{background:var(--primary-color, #00ff88);opacity:.6}.timeline-segment.active:hover{opacity:1;transform:scaleY(1.2)}.timeline-segment-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:var(--card-bg, #2a2a2a);padding:4px 8px;border-radius:4px;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;margin-bottom:4px;border:1px solid var(--border-color, #404040)}.timeline-segment:hover .timeline-segment-tooltip{opacity:1}.session-duration-bar{margin-top:8px;height:4px;background:var(--bg-tertiary, #1a1a1a);border-radius:2px;position:relative;overflow:hidden}.session-duration-fill{height:100%;background:linear-gradient(90deg,var(--primary-color, #00ff88),var(--primary-green-hover));border-radius:2px;transition:width .3s ease}.session-gap{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;background:#ffa5001a;border:1px solid rgba(255,165,0,.3);border-radius:4px;font-size:.75rem;color:var(--warning-amber)}.video-card.in-session{position:relative}.video-card.in-session:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border:2px solid var(--primary-color, #00ff88);border-radius:inherit;opacity:.3;pointer-events:none}.video-card.in-session .session-indicator{position:absolute;top:8px;right:8px;background:var(--primary-color, #00ff88);color:var(--dark-bg);padding:2px 6px;border-radius:4px;font-size:.7rem;font-weight:600;z-index:2}.session-empty{text-align:center;padding:40px 20px;color:var(--text-secondary, #a0a0a0)}.session-empty-icon{font-size:3rem;margin-bottom:12px;opacity:.5}.session-empty h4{margin:0 0 8px;color:var(--text-primary, #ffffff)}.session-empty p{margin:0;font-size:.9rem}.session-loading{display:flex;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--text-secondary, #a0a0a0)}.session-loading-spinner{width:20px;height:20px;border:2px solid var(--border-color, #404040);border-top-color:var(--primary-color, #00ff88);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.session-header{flex-direction:column;align-items:flex-start;gap:12px}.session-actions,.session-stats{width:100%;justify-content:space-between}.session-meta{font-size:.8rem}}.event-badge{position:absolute;top:8px;right:8px;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:500;color:var(--primary-color, #00ff88);border:1px solid rgba(0,255,136,.3);z-index:10;display:flex;align-items:center;gap:4px;pointer-events:none;transition:all .2s ease}.event-badge-icon{font-size:.9rem;line-height:1}.video-card:hover .event-badge{background:#00ff8826;border-color:var(--primary-color, #00ff88);transform:scale(1.05)}.event-separator{grid-column:1 / -1;height:1px;background:linear-gradient(to right,transparent,var(--border-color, #404040) 20%,var(--border-color, #404040) 80%,transparent);margin:24px 0;position:relative;display:flex;align-items:center;justify-content:center}.event-separator-label{position:absolute;background:var(--bg-primary, #0a0b0f);padding:4px 12px;border-radius:12px;font-size:.7rem;color:var(--text-secondary, #a0a0a0);text-transform:uppercase;letter-spacing:.5px;border:1px solid var(--border-color, #404040)}@media (max-width: 768px){.event-badge{font-size:.7rem;padding:3px 8px;top:6px;right:6px}.event-badge-icon{font-size:.8rem}.event-separator{margin:16px 0}.event-separator-label{font-size:.65rem;padding:3px 10px}}.event-card{background:var(--card-bg, #2a2a2a);border:1px solid var(--border-color, #404040);border-radius:12px;margin-bottom:16px;overflow:hidden;transition:all .3s ease;box-shadow:0 1px 3px #0000001a}.event-card:hover{box-shadow:0 4px 12px #00ff8826;border-color:var(--primary-color, #00ff88)}.event-card.expanded{box-shadow:0 8px 24px #0f83}.event-card-header{padding:16px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color .2s}.event-card-header:hover{background-color:#00ff880d}.event-info{flex:1}.event-title{margin:0 0 8px;font-size:18px;font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.event-camera{color:var(--primary-color, #00ff88)}.event-date{color:var(--text-secondary, #a0a0a0);font-size:14px;font-weight:400}.event-meta{display:flex;gap:16px;font-size:14px;color:var(--text-secondary, #a0a0a0);flex-wrap:wrap}.event-meta i{margin-right:4px;color:var(--primary-color, #00ff88)}.event-expand-btn{background:none;border:none;font-size:20px;color:var(--text-secondary, #a0a0a0);cursor:pointer;padding:8px;transition:all .3s ease;border-radius:50%}.event-expand-btn:hover{background:#00ff881a;color:var(--primary-color, #00ff88)}.event-expand-btn .fa-chevron-down{transition:transform .3s ease}.event-expand-btn .fa-chevron-down.rotate-180{transform:rotate(180deg)}.event-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.event-tag{padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500;background-color:#a0a0a033;color:var(--text-secondary, #a0a0a0);border:1px solid var(--border-color, #404040)}.event-tag.tag-person{background-color:#3b82f633;color:var(--tag-person-blue);border-color:#3b82f666}.event-tag.tag-car,.event-tag.tag-vehicle{background-color:#f59e0b33;color:var(--tag-vehicle-amber);border-color:#f59e0b66}.event-tag.tag-dog,.event-tag.tag-cat,.event-tag.tag-animal{background-color:#ec489933;color:var(--tag-animal-pink);border-color:#ec489966}.event-tag.tag-more{background-color:#00ff881a;color:var(--primary-color, #00ff88);border-color:#00ff884d;cursor:pointer}.event-tag.tag-more:hover{background-color:#0f83;transform:scale(1.05)}.event-tags-more-wrapper{position:relative;display:inline-flex}.event-tags-popup{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--card-bg, #2a2a2a);border:1px solid var(--border-color, #404040);border-radius:8px;padding:12px;min-width:200px;max-width:400px;max-height:300px;overflow-y:auto;box-shadow:0 8px 24px #0006;z-index:1000;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.event-tags-popup:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:8px solid transparent;border-bottom-color:var(--card-bg, #2a2a2a)}.event-tags-more-wrapper.active .event-tags-popup{opacity:1;visibility:visible}.event-tags-popup-title{font-size:12px;font-weight:600;color:var(--text-secondary, #a0a0a0);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-color, #404040)}.event-tags-popup-list{display:flex;flex-wrap:wrap;gap:6px}.event-tags-popup-list .popup-tag{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:500;background-color:var(--bg-tertiary, #1a1a1a);color:var(--text-primary, #ffffff);border:1px solid var(--border-color, #404040)}.event-card-body{padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.event-card-body:not(.collapsed){max-height:5000px;padding:16px 20px 20px}.event-loading,.event-error{text-align:center;padding:40px 20px;color:var(--text-secondary, #a0a0a0)}.event-error{color:var(--error-color)}.event-error i{font-size:2rem;margin-bottom:12px;display:block}.event-video-grid,.event-videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-rows:auto;gap:16px;align-items:start;overflow:visible}.event-video-grid .video-card{position:relative;z-index:1;overflow:visible}.event-video-grid .detection-hover-wrapper{position:relative;z-index:1}.event-video-grid .detection-hover-wrapper:hover{z-index:100}.event-video-grid .detections-popover{z-index:1000}.event-detection-wrapper{display:inline-flex;position:relative;height:auto;padding:0;margin-left:0;flex-shrink:0;z-index:10}.event-detection-wrapper .detections-badge{padding:4px 10px;font-size:.75rem}.event-detection-wrapper .detections-popover{bottom:auto;top:calc(100% + 8px);left:0;transform:translateY(-8px);min-width:180px;max-width:350px;z-index:1100}.event-detection-wrapper:hover .detections-popover{transform:translateY(0)}.event-detection-wrapper .detections-popover:after{top:auto;bottom:100%;left:16px;border-top-color:transparent;border-bottom-color:var(--dark-surface-elevated, #2a2a2a)}.event-detection-wrapper .detections-popover:before{top:auto;bottom:100%;left:16px;border-top-color:transparent;border-bottom-color:var(--border-default, #444);margin-top:0;margin-bottom:1px}.timeline-detection-wrapper{display:block;position:relative;height:auto;padding:4px 0 0;margin:0;width:auto;z-index:10}.timeline-detection-wrapper .detections-badge{padding:3px 8px;font-size:.7rem}.timeline-detection-wrapper .detections-popover{bottom:auto;top:calc(100% + 8px);left:0;transform:translateY(-8px);min-width:160px;max-width:280px;z-index:1100}.timeline-detection-wrapper:hover .detections-popover{transform:translateY(0)}.timeline-video-card:hover{z-index:100}.timeline-detection-wrapper .detections-popover:after{top:auto;bottom:100%;left:16px;border-top-color:transparent;border-bottom-color:var(--dark-surface-elevated, #2a2a2a)}.timeline-detection-wrapper .detections-popover:before{top:auto;bottom:100%;left:16px;border-top-color:transparent;border-bottom-color:var(--border-default, #444);margin-top:0;margin-bottom:1px}@media (max-width: 768px){.event-card-header{padding:12px 16px}.event-title{font-size:16px;gap:8px}.event-meta{flex-direction:column;gap:4px;font-size:13px}.event-video-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.event-tags{gap:6px}.event-tag{padding:3px 10px;font-size:11px}.event-detection-wrapper,.timeline-detection-wrapper{margin-left:0;margin-top:.5rem}.event-group{padding:.5rem!important;margin-bottom:.75rem!important}.event-videos-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:.5rem!important}.event-videos-grid .video-card{width:100%}.event-videos-grid .video-card{display:block!important}.event-videos-grid .video-card .video-top-actions{position:absolute!important;top:4px!important;right:4px!important;padding:0!important;z-index:5}.event-videos-grid .video-card .top-action-btn{width:26px!important;height:26px!important;font-size:11px!important}.event-videos-grid .video-card .video-header{padding:4px 8px}.event-videos-grid .video-card .video-header .camera-name{font-size:.7rem}.event-videos-grid .video-card .video-footer{padding:4px 8px}.event-videos-grid .video-card .video-footer .video-time,.event-videos-grid .video-card .video-footer .video-duration{font-size:.7rem}.event-videos-grid .video-card .video-preview{grid-column:unset}.event-videos-grid .video-card .video-detection-wrapper{display:none}.event-videos-grid .video-card .video-title,.event-videos-grid .video-card .camera-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.event-header{flex-direction:column!important;align-items:flex-start!important;gap:.25rem!important;margin-bottom:.5rem!important;padding-bottom:.25rem!important}.event-header h3{font-size:.85rem!important;line-height:1.3!important}}