.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100vw;background:#1a1a1a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:20px;box-sizing:border-box;--theme-accent: #e27e32;--theme-accent-hover: #d16d28;--theme-accent-dark: #b85a1f}.login-card{background:#2a2a2a;border-radius:8px;box-shadow:0 16px 32px #0009;padding:40px;width:100%;max-width:420px;position:relative;overflow:hidden;border:1px solid #404040}.login-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--theme-accent)}.login-header{text-align:center;margin-bottom:32px}.login-header h1{color:var(--theme-accent);font-size:20px;font-weight:500;margin:0;letter-spacing:.5px;text-transform:uppercase}.login-header p{color:#b8b8b8;font-size:13px;margin:8px 0 0;font-weight:400}.error-message{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#ef4444;padding:10px 14px;border-radius:3px;margin-bottom:20px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:8px}.error-message:before{content:"⚠️";font-size:16px}.form-group{margin-bottom:24px}.form-group label{display:block;margin-bottom:8px;font-size:12px;font-weight:500;color:#b8b8b8;letter-spacing:.5px;text-transform:uppercase}.form-group input{width:100%;padding:12px 16px;border:1px solid #606060;border-radius:3px;font-size:14px;color:#1a1a1a;background:#f5f5f5;transition:all .2s ease;box-sizing:border-box;font-family:inherit}.form-group input:focus{outline:none;border-color:var(--theme-accent);background:#fff;box-shadow:0 0 0 2px #e27e3233}.form-group input:hover{border-color:var(--theme-accent);background:#fff}.form-group input::placeholder{color:#999;font-weight:400}.login-button{width:100%;padding:12px 24px;background:var(--theme-accent);color:#fff;border:1px solid var(--theme-accent-dark);border-radius:3px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden;letter-spacing:.5px;text-transform:uppercase}.login-button:hover{background:var(--theme-accent-hover);border-color:var(--theme-accent-dark)}.login-button:active{background:var(--theme-accent-dark)}.login-button:disabled{background:#505050;border-color:#404040;cursor:not-allowed;opacity:.7}.login-button:disabled:hover{transform:none;box-shadow:none}.login-button:disabled:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid #ffffff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@media (max-width: 480px){.login-container{padding:15px}.login-card{padding:30px 24px;max-width:100%}.login-header h1{font-size:20px}.form-group input{padding:12px 14px;font-size:16px}.login-button{padding:12px 20px;font-size:16px}}@media (max-width: 360px){.login-card{padding:24px 20px}.login-header h1{font-size:18px}}.login-card{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.form-group input:invalid{border-color:#ef4444}.form-group input:invalid:focus{border-color:#ef4444}@media (prefers-contrast: high){.login-card{border:2px solid #1e293b}.form-group input{border-width:2px}.login-button{border:2px solid transparent}}.image-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}.image-modal{background:#2a2a2a;border-radius:8px;width:90vw;height:90vh;max-width:1200px;max-height:800px;display:flex;flex-direction:column;box-shadow:0 16px 32px #0009;border:1px solid #404040;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:scale(.9) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.image-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #404040;flex-shrink:0;position:relative;background:#383838}.header-actions{display:flex;align-items:center;gap:12px}.retry-all-btn{background:linear-gradient(135deg,#4caf50,#388e3c);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #4caf504d;display:flex;align-items:center;gap:6px}.retry-all-btn:hover:not(:disabled){background:linear-gradient(135deg,#388e3c,#2e7d32);transform:translateY(-1px);box-shadow:0 4px 12px #4caf5066}.retry-all-btn:disabled{background:#666;cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}.failed-count{color:#ff7043;font-weight:500}.back-to-grid-btn{background:#404040;color:#fff;border:1px solid #606060;padding:6px 12px;border-radius:3px;font-size:12px;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000004d}.back-to-grid-btn:hover{background:#d16d28;border-color:#b85a1f}.image-modal-title{font-size:16px;font-weight:500;color:#fff;margin:0;text-align:center;flex:1;text-transform:uppercase;letter-spacing:.5px}.close-btn{background:#404040;color:#fff;border:1px solid #606060;width:32px;height:32px;border-radius:3px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;right:20px;transform:translateY(-50%);z-index:10;padding:0;overflow:hidden;box-shadow:0 1px 3px #0006}.close-btn:before,.close-btn:after{content:"";position:absolute;width:2px;height:18px;background:#fff;border-radius:1px}.close-btn:before{transform:rotate(45deg)}.close-btn:after{transform:rotate(-45deg)}.close-btn:hover{background:#d16d28;border-color:#b85a1f;transform:translateY(-50%)}.image-modal-content{flex:1;padding:20px;overflow:hidden;position:relative}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px;height:100%;overflow-y:auto;padding-right:8px}.virtual-grid{position:relative;height:100%;overflow-y:auto;display:block!important;padding:12px}.virtual-grid-content{position:relative;width:100%}.virtual-item{position:absolute;box-sizing:border-box}.image-loading-placeholder,.image-error-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a1a;border-radius:8px;color:#a0a0a0}.image-error-placeholder{background:#2a1a1a;border:1px solid #4a2a2a;gap:6px;padding:8px}.error-detail{font-size:10px;color:#a0aec0;margin:8px 0;padding:4px 8px;background-color:#0000004d;border-radius:4px;max-width:160px;word-break:break-word;line-height:1.2;text-align:center}.carousel-error-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#2a1a1a;border:1px solid #4a2a2a;border-radius:8px;color:#a0a0a0;gap:12px;padding:20px}.carousel-error-placeholder .error-detail{max-width:300px;font-size:12px}.carousel-loading-placeholder,.carousel-retrying-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a1a;border:1px solid #3a3a3a;border-radius:8px;color:#a0a0a0;gap:12px;padding:20px}.loading-spinner{width:24px;height:24px;border:2px solid #404040;border-top:2px solid #e27e32;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:8px}.loading-text,.error-text{font-size:12px;text-align:center}.error-icon{font-size:20px}.image-grid-item.loading{opacity:.7;cursor:default}.retry-single-btn{background:linear-gradient(135deg,#ff7043,#f4511e);color:#fff;border:none;border-radius:6px;padding:6px 10px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #f4511e4d}.retry-single-btn:hover{background:linear-gradient(135deg,#f4511e,#e64a19);transform:translateY(-1px);box-shadow:0 4px 8px #f4511e66}.retry-single-btn:active{transform:translateY(0)}.image-retrying-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#4caf501a;border:1px solid #4caf50;border-radius:8px;color:#4caf50}.retrying-text{font-size:12px;font-weight:500;margin-top:8px;text-align:center}.image-grid-item.retrying{opacity:.8;animation:pulse-green 1.5s ease-in-out infinite}@keyframes pulse-green{0%,to{box-shadow:0 0 #4caf5066}50%{box-shadow:0 0 0 8px #4caf5000}}.image-grid-item.error{opacity:.6;cursor:default}.image-status{color:#e27e32;font-size:11px;font-weight:500}.image-status.error{color:#f56565}.image-status.retrying{color:#4caf50}.image-grid::-webkit-scrollbar{width:8px}.image-grid::-webkit-scrollbar-track{background:#1a1a1a;border-radius:2px}.image-grid::-webkit-scrollbar-thumb{background:#505050;border-radius:2px}.image-grid::-webkit-scrollbar-thumb:hover{background:#606060}.image-grid-item{position:relative;aspect-ratio:1;border-radius:0;overflow:hidden;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0000001a}.image-grid-item:hover{transform:scale(1.05);box-shadow:0 8px 24px #0003}.grid-image{width:100%;height:100%;object-fit:cover;transition:all .2s ease}.image-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000000d9);padding:20px 12px 8px;opacity:0;transition:opacity .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.image-grid-item:hover .image-overlay{opacity:1}.image-info{display:flex;flex-direction:column;gap:2px}.image-number{color:#fff;font-size:14px;font-weight:600;margin-bottom:2px}.image-camera{color:#e27e32;font-size:12px;font-weight:500}.image-event{color:#10b981;font-size:11px;font-weight:500}.image-date{color:#e5e7eb;font-size:10px;font-weight:400}.image-carousel{display:flex;align-items:center;justify-content:center;height:100%;position:relative}.nav-btn{background:#00000080;color:#fff;border:none;width:50px;height:50px;border-radius:50%;font-size:24px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;position:absolute;z-index:10}.nav-btn:hover:not(:disabled){background:#000c;transform:scale(1.1)}.nav-btn:disabled{opacity:.3;cursor:not-allowed}.nav-btn-prev{left:20px}.nav-btn-next{right:20px}.carousel-viewport{flex:1;max-width:calc(100% - 140px);max-height:100%;overflow:hidden;position:relative;width:100%;height:100%}.carousel-content{display:flex;height:100%;transition:transform .3s cubic-bezier(.25,.46,.45,.94);will-change:transform}.carousel-slide{width:calc(100% / var(--total-slides, 1));min-width:calc(100% / var(--total-slides, 1));flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;padding:20px 0;overflow-y:auto;box-sizing:border-box}.carousel-image-container{width:100%;max-width:100%;flex:1;display:flex;align-items:center;justify-content:center;min-height:200px;max-height:calc(100% - 120px);position:relative;overflow:hidden}.carousel-image{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 8px 32px #0003;display:block;transition:none}.carousel-metadata{background:#323232;border:1px solid #404040;border-radius:4px;padding:12px 16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 8px #0006;min-width:280px;max-width:480px;width:100%;flex-shrink:0;min-height:70px}.metadata-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.metadata-row:last-child{margin-bottom:0}.metadata-label{color:#b8b8b8;font-size:12px;font-weight:500;min-width:80px}.metadata-value{color:#e8e8e8;font-size:12px;font-weight:600;text-align:right}.carousel-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 8px 32px #0003}.image-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #404040;background:#383838;flex-shrink:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#606060 transparent}.dots-container{display:flex;gap:8px;align-items:center;flex:1;padding:4px 0}.dots-container::-webkit-scrollbar{height:4px}.dots-container::-webkit-scrollbar-track{background:transparent}.dots-container::-webkit-scrollbar-thumb{background:#606060;border-radius:2px}.dots-container::-webkit-scrollbar-thumb:hover{background:gray}.dot{width:8px!important;height:8px!important;border-radius:50%;background:#606060;border:none;cursor:pointer;transition:all .2s ease;flex-shrink:0;flex-grow:0;min-width:8px;max-width:8px;min-height:8px;max-height:8px;box-sizing:border-box;aspect-ratio:1 / 1;padding:0;margin:0}.dot.active{background:#e27e32;transform:scale(1.2);box-shadow:0 0 6px #e27e3299}.dot:hover:not(.active){background:gray}.modal-controls{display:flex;gap:12px}.control-btn{background:#e27e32;color:#fff;border:1px solid #b85a1f;padding:6px 12px;border-radius:3px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.control-btn:hover{background:#d16d28;border-color:#b85a1f}@media (max-width: 768px){.image-modal{width:95vw;height:95vh;margin:2.5vh auto}.image-modal-header{padding:16px 20px}.image-modal-title{font-size:18px}.image-modal-content{padding:16px}.image-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px}.virtual-grid{padding:8px}.nav-btn{width:40px;height:40px;font-size:20px}.nav-btn-prev{left:10px}.nav-btn-next{right:10px}.carousel-viewport{max-width:calc(100% - 100px)}.carousel-image-container{max-width:100%}.image-modal-footer{padding:12px 20px}.back-to-grid-btn{padding:6px 12px;font-size:12px}}@media (max-width: 480px){.image-grid{grid-template-columns:repeat(2,1fr)}.nav-btn{width:36px;height:36px;font-size:18px}.carousel-viewport{max-width:calc(100% - 80px)}.carousel-image-container{max-width:100%}.image-modal-title{font-size:16px}.carousel-metadata{min-width:250px;padding:12px 16px}.metadata-label{font-size:12px;min-width:70px}.metadata-value{font-size:12px}.image-info{gap:1px}.image-camera{font-size:11px}.image-event{font-size:10px}.image-date{font-size:9px}}.notification-toast{position:fixed;top:55px;right:20px;z-index:3000;animation:notificationSlideIn .3s ease-out}@keyframes notificationSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.notification-content{background:#2a2a2a;border:1px solid #404040;border-radius:4px;padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 16px #0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);min-width:280px;max-width:380px;border-left:3px solid #e27e32}.notification-icon{font-size:16px;flex-shrink:0;color:#e27e32}.notification-text{color:#e8e8e8;font-size:13px;font-weight:500;flex:1;word-break:break-word;line-height:1.4}.notification-close{background:none;border:none;color:#888;font-size:14px;cursor:pointer;padding:3px;border-radius:3px;transition:all .2s ease;flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.notification-close:hover{color:#fff;background:#ef44444d}@media (max-width: 768px){.notification-toast{top:10px;right:10px;left:10px}.notification-content{min-width:auto;max-width:none}}.user-menu-container{position:relative;display:inline-block}.user-menu-button{display:flex;align-items:center;gap:6px;padding:8px 12px;border:none;background:#ffffff1a;border-radius:8px;cursor:pointer;transition:all .2s ease;min-height:36px}.user-menu-button:hover{background:#ffffff26;transform:translateY(-1px)}.user-menu-button:active{transform:translateY(0)}.user-avatar{width:24px;height:24px;border-radius:50%;background:#a0aec033;display:flex;align-items:center;justify-content:center;flex-shrink:0}.user-avatar.large{width:36px;height:36px}.chevron{transition:transform .2s ease;flex-shrink:0}.chevron.open{transform:rotate(180deg)}.user-dropdown-menu{min-width:200px;background:#1a202c;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;z-index:1000;animation:dropdownSlideIn .2s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-header{padding:16px}.user-info{display:flex;align-items:center;gap:12px}.user-details{flex:1;min-width:0}.user-name{font-size:14px;font-weight:600;color:#e2e8f0;line-height:1.2}.user-email{font-size:12px;color:#a0aec0;line-height:1.2;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-divider{height:1px;background:#ffffff1a;margin:0 8px}.dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:none;background:transparent;color:#e2e8f0;font-size:14px;text-align:left;cursor:pointer;transition:all .2s ease;border-radius:0}.dropdown-item:hover{background:#ffffff0d}.dropdown-item:first-of-type{border-radius:0}.dropdown-item:last-of-type{border-radius:0 0 12px 12px}.logout-item{color:#f56565}.logout-item:hover{background:#f565651a}.confirm-dialog-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out;backdrop-filter:blur(8px);pointer-events:all;-webkit-backdrop-filter:blur(8px);touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.confirm-dialog{background:#1a202c;border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 25px 50px -12px #00000040;max-width:400px;width:90%;animation:dialogSlideIn .2s ease-out;position:relative;pointer-events:auto;z-index:1}@keyframes dialogSlideIn{0%{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.dialog-header{padding:24px 24px 16px}.dialog-header h3{margin:0;font-size:18px;font-weight:600;color:#e2e8f0;line-height:1.2}.dialog-body{padding:0 24px 24px}.dialog-body p{margin:0;font-size:14px;color:#a0aec0;line-height:1.5}.dialog-actions{display:flex;gap:12px;padding:0 24px 24px;justify-content:flex-end}.dialog-button{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:100px;position:relative;pointer-events:auto;z-index:1;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.dialog-button.cancel{background:#ffffff1a;color:#e2e8f0}.dialog-button.cancel:hover{background:#ffffff26}.dialog-button.confirm{background:#f56565;color:#fff}.dialog-button.confirm:hover{background:#e53e3e}.dialog-button:active{transform:translateY(1px)}@media (max-width: 768px){.user-dropdown-menu{min-width:180px;right:-8px}.confirm-dialog{margin:16px}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{width:100%;height:100%;overflow:hidden;margin:0;padding:0}body,#root{width:100%;height:100%;overflow:hidden;margin:0;padding:0;position:fixed;top:0;left:0}.dashboard-container{display:flex;height:100vh;width:100vw;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a1a!important;position:fixed;top:0;left:0;--sidebar-offset: 0px;--theme-accent: #e27e32;--theme-accent-hover: #d16d28;--theme-accent-dark: #b85a1f;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px;transform:translateZ(0);-webkit-transform:translate3d(0,0,0)}.dashboard-container.sidebar-collapsed{--sidebar-offset: -320px}.sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;transition:opacity .3s ease}.sidebar-overlay.show{display:block;opacity:1}.sidebar{width:320px;min-width:320px;max-width:320px;background:#2a2a2a;color:#e8e8e8;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:2px 0 8px #0006;position:relative;z-index:1000;overflow:hidden;flex-shrink:0;border-right:1px solid #1a1a1a}.sidebar.collapsed{transform:translate(var(--sidebar-offset, -320px))}.sidebar-notification{position:absolute;top:10px;right:10px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:1001;opacity:0;transform:scale(0);transition:all .2s ease}.sidebar.collapsed .sidebar-notification.show{opacity:1;transform:scale(1)}.sidebar-header{padding:8px 16px;background:#383838;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;min-height:50px;position:relative;flex-shrink:0;box-sizing:border-box;box-shadow:0 1px 3px #0006;z-index:10}.sidebar-title{font-size:16px;font-weight:500;margin:0;opacity:1;transition:opacity .2s ease,transform .2s ease;white-space:nowrap;overflow:hidden;color:#ccc;text-transform:uppercase;letter-spacing:.5px}.sidebar.collapsed .sidebar-title{display:none}.sidebar-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sidebar-content::-webkit-scrollbar{width:4px}.sidebar-content::-webkit-scrollbar-track{background:#1a1a1a}.sidebar-content::-webkit-scrollbar-thumb{background:#505050;border-radius:2px}.sidebar-content::-webkit-scrollbar-thumb:hover{background:#606060}.sidebar.collapsed .sidebar-content{overflow:hidden}.controls-section{padding:0;background:#323232;border-bottom:1px solid #1a1a1a;margin-bottom:1px}.sidebar.collapsed .controls-section{display:none}.control-group{background:#323232;border:1px solid #404040;border-radius:4px;margin:8px;overflow:hidden}.control-group:last-child{margin-bottom:8px}.control-label{display:block;margin:0;padding:8px 12px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#404040;color:#b8b8b8;border-bottom:1px solid #353535;white-space:nowrap;overflow:hidden}.sidebar.collapsed .control-label,.sidebar.collapsed .control-input{display:none}.control-input{width:100%;padding:12px 16px 12px 40px;border:none;border-radius:8px;background:linear-gradient(135deg,#2d2d2d,#242424);color:#f0f0f0;font-size:14px;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:1px solid #404040;box-shadow:inset 0 1px 3px #0000004d,0 1px #ffffff0d;position:relative}.control-input:focus{outline:none;background:linear-gradient(135deg,#363636,#2a2a2a);border-color:#4a9eff;box-shadow:inset 0 1px 3px #0000004d,0 0 0 2px #4a9eff33,0 4px 12px #4a9eff26;transform:translateY(-1px)}.control-input:disabled{background:linear-gradient(135deg,#1f1f1f,#1a1a1a);color:#666;cursor:not-allowed;border-color:#303030;box-shadow:inset 0 1px 3px #0003}.control-input.premium-select{padding:14px 40px 14px 16px;background:linear-gradient(135deg,#343434,#2a2a2a);border:1px solid #4a4a4a;border-radius:10px;color:#f5f5f5;font-size:14px;font-weight:500;letter-spacing:.3px;box-shadow:inset 0 1px 3px #0006,0 2px 8px #00000026,0 1px #ffffff14;transition:all .3s cubic-bezier(.25,.46,.45,.94);cursor:pointer;background-image:linear-gradient(135deg,#343434,#2a2a2a),url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23a0a0a0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"></polyline></svg>');background-repeat:no-repeat,no-repeat;background-position:0 0,right 14px center;background-size:100% 100%,18px 18px}.control-input.premium-select:hover{border-color:#5a5a5a;background:linear-gradient(135deg,#3a3a3a,#2f2f2f);background-image:linear-gradient(135deg,#3a3a3a,#2f2f2f),url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23c0c0c0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"></polyline></svg>');background-repeat:no-repeat,no-repeat;background-position:0 0,right 14px center;background-size:100% 100%,18px 18px;box-shadow:inset 0 1px 3px #0006,0 4px 12px #0003,0 1px #ffffff1a;transform:translateY(-1px)}.control-input.premium-select:focus{outline:none;border-color:#6fa8ff;background:linear-gradient(135deg,#3d3d3d,#323232);background-image:linear-gradient(135deg,#3d3d3d,#323232),url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236fa8ff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"></polyline></svg>');background-repeat:no-repeat,no-repeat;background-position:0 0,right 14px center;background-size:100% 100%,18px 18px;box-shadow:inset 0 1px 3px #0006,0 0 0 3px #6fa8ff26,0 6px 20px #6fa8ff1a,0 1px #ffffff1f;transform:translateY(-2px)}.control-input.premium-select:disabled{background:linear-gradient(135deg,#222,#1a1a1a);border-color:#333;color:#777;cursor:not-allowed;background-image:linear-gradient(135deg,#222,#1a1a1a),url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23555555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"></polyline></svg>');background-repeat:no-repeat,no-repeat;background-position:0 0,right 14px center;background-size:100% 100%,16px 16px;box-shadow:inset 0 1px 3px #0000004d;transform:none}.control-buttons{display:flex;gap:1px;flex-wrap:nowrap;width:100%}.sidebar.collapsed .control-buttons{display:none}.connection-panel{padding:0;margin:0;background:#323232;border-bottom:1px solid #1a1a1a;flex:none;width:100%;box-sizing:border-box}.connection-status-section{background:#2a2a2a;width:100%;margin:0;padding:0;box-sizing:border-box}.connection-details{background:#2a2a2a;border-top:1px solid #353535;padding:12px 0;width:100%;margin:0;box-sizing:border-box}.data-usage{background:#2a2a2a;border-top:1px solid #353535;padding:8px 12px;width:100%;margin:0;box-sizing:border-box}.data-stat{display:flex;align-items:center;justify-content:space-between;padding:4px 0;font-size:13px}.data-stat-value{font-size:14px;font-weight:600;color:#fff}.data-stat-label{font-size:10px;color:#b8b8b8;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.connection-panel h3{margin:0;padding:6px 12px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#404040;color:#b8b8b8;border-bottom:1px solid #353535;opacity:1;transition:opacity .2s ease}.sidebar.collapsed .connection-panel{padding:15px 10px}.sidebar.collapsed .connection-panel h3{display:none}.sidebar.collapsed .status-section{padding:15px 10px}.status-section h3{margin:0;padding:6px 12px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#404040;color:#b8b8b8;border-bottom:1px solid #353535;opacity:1;transition:opacity .2s ease}.sidebar.collapsed .status-section h3{display:none}.connection-panel .status-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:13px;transition:all .2s ease;background:#2a2a2a;border-bottom:1px solid #353535;width:100%;box-sizing:border-box;margin-bottom:0}.connection-panel .status-item:last-child{border-bottom:none}.sidebar.collapsed .connection-panel .status-item{justify-content:center;margin-bottom:6px}.sidebar.collapsed .connection-panel .status-item span:not(.status-indicator){display:none}.sidebar.collapsed .status-indicator{width:12px;height:12px;margin:0}.status-indicator{width:8px;height:8px;border-radius:50%;margin-right:8px;flex-shrink:0}.status-indicator.connected{background:#39ff14;box-shadow:0 0 8px #39ff1499;border:1px solid #22cc11}.status-indicator.connecting{background:#a3e635;box-shadow:0 0 8px #a3e63599;border:1px solid #65a30d;animation:pulse 2s infinite}.status-indicator.disconnected{background:#ef4444;box-shadow:0 0 8px #ef444499;border:1px solid #dc2626}.status-indicator.waiting-for-offer{background:#ef4444;box-shadow:0 0 8px #ef444499;border:1px solid #dc2626;animation:blink-red 1.5s infinite}.status-indicator.reconnecting-countdown{background:#f97316;box-shadow:0 0 8px #f9731699;border:1px solid #ea580c;animation:blink-orange 1s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes blink-red{0%{opacity:1;box-shadow:0 0 8px #ef444499}50%{opacity:.3;box-shadow:0 0 4px #ef44444d}to{opacity:1;box-shadow:0 0 8px #ef444499}}@keyframes blink-orange{0%{opacity:1;box-shadow:0 0 8px #f9731699}50%{opacity:.3;box-shadow:0 0 4px #f973164d}to{opacity:1;box-shadow:0 0 8px #f9731699}}.ice-panel{padding:0;background:#323232;border-bottom:1px solid #1a1a1a;margin-bottom:1px;flex-shrink:0}.sidebar.collapsed .ice-panel{padding:15px 10px}.ice-panel h3{margin:0;padding:6px 12px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#404040;color:#b8b8b8;border-bottom:1px solid #353535;opacity:1;transition:opacity .2s ease}.sidebar.collapsed .ice-panel h3{display:none}.ice-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#353535}.sidebar.collapsed .ice-stats{grid-template-columns:1fr;gap:4px;margin-bottom:0}.ice-stat{background:#2a2a2a;padding:12px 8px;text-align:center;transition:all .2s ease;font-size:11px;display:flex;flex-direction:column;justify-content:center;align-items:center}.sidebar.collapsed .ice-stat{padding:6px 4px;display:flex;align-items:center;justify-content:center}.ice-stat-value{font-size:15px;font-weight:600;display:block;margin-bottom:3px;color:#fff;line-height:1.1}.sidebar.collapsed .ice-stat-value{font-size:12px;margin-bottom:0}.ice-stat-label{font-size:10px;opacity:.8;color:#b8b8b8;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.sidebar.collapsed .ice-stat-label{display:none}.traffic-panel{padding:0;background:#323232;border-bottom:1px solid #1a1a1a;margin-bottom:1px;flex-shrink:0}.sidebar.collapsed .traffic-panel{padding:15px 10px}.traffic-panel h3{margin:0;padding:6px 12px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#404040;color:#b8b8b8;border-bottom:1px solid #353535;opacity:1;transition:opacity .2s ease}.sidebar.collapsed .traffic-panel h3{display:none}.traffic-stats{display:grid;grid-template-columns:1fr;gap:1px;background:#353535}.sidebar.collapsed .traffic-stats{gap:4px;margin-bottom:0}.traffic-stats .ice-stat{background:#2a2a2a;padding:8px;text-align:center;transition:all .2s ease;font-size:13px}.sidebar.collapsed .traffic-stats .ice-stat{padding:6px 4px;display:flex;align-items:center;justify-content:center}.log-section{flex:1;display:flex;flex-direction:column;min-height:200px;background:#323232;border-bottom:1px solid #1a1a1a}.log-header{padding:6px 12px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#404040;color:#b8b8b8;border-bottom:1px solid #353535;display:flex;justify-content:space-between;align-items:center}.copy-log-btn{height:20px;min-height:20px;width:20px;padding:0;background:#404040;color:#fff;border:1px solid #606060;border-radius:3px;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 1px 3px #0000004d;flex-shrink:0}@media (hover: hover) and (pointer: fine){.copy-log-btn:hover{background:var(--theme-accent);border-color:var(--theme-accent-dark);color:#fff;transform:scale(1.05)}}@media (hover: none) and (pointer: coarse){.copy-log-btn:active{background:var(--theme-accent);border-color:var(--theme-accent-dark);color:#fff}}.copy-log-btn:active{transform:scale(.95)}.copy-log-btn:disabled{opacity:.6;cursor:not-allowed;background:#2a2a2a!important;border-color:#404040!important;color:#666!important;transform:none!important}.copy-log-btn.success{background:#22c55e!important;border-color:#16a34a!important;color:#fff!important;cursor:default}.copy-log-btn.success:hover{background:#22c55e!important;border-color:#16a34a!important;transform:none!important}.copy-log-btn svg{transition:all .3s ease}.copy-log-btn.success svg{animation:successBounce .5s ease}@keyframes successBounce{0%{transform:scale(.5)}50%{transform:scale(1.2)}to{transform:scale(1)}}.sidebar.collapsed .log-header{display:none}.log-container{flex:1;margin:0;background:#2a2a2a;overflow:hidden;display:flex;flex-direction:column;min-height:200px}.sidebar.collapsed .log-container{display:none}.log-content{flex:1;padding:8px 12px;overflow-y:auto;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.4;white-space:pre-wrap;word-break:break-word;color:#ccc;background:#1e1e1e}.sidebar.collapsed .log-content{padding:10px;font-size:15px}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;height:100vh;box-sizing:border-box;margin-left:0;background:#1e1e1e;transition:margin-left .3s cubic-bezier(.4,0,.2,1)}.content-header{background:#2a2a2a;padding:6px 16px;box-shadow:0 1px 3px #0006;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:10;box-sizing:border-box;flex-shrink:0;min-height:42px;border-bottom:1px solid #1a1a1a}.header-left{width:auto;min-width:80px;display:flex;align-items:center;justify-content:flex-start;gap:8px}.video-section{flex:1;padding:0;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.video-section:has(.video-grid.horizontal-layout){align-items:flex-start;justify-content:flex-start;overflow-x:auto;overflow-y:hidden}.video-section::-webkit-scrollbar{width:8px}.video-section::-webkit-scrollbar-track{background:#0000001a}.video-section::-webkit-scrollbar-thumb{background:#8b9dc380;border-radius:4px}.video-section::-webkit-scrollbar-thumb:hover{background:#8b9dc3b3}.video-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:0;width:100%;height:100%;box-sizing:border-box;background:#1a1a1a;border-radius:0;padding:0}.video-grid:not(.horizontal-layout){gap:0;padding:0;border-radius:0}.video-grid:not(.horizontal-layout) .video-container:nth-child(1){grid-column:span 2;grid-row:span 1}.video-container{background:#2a2a2a;border-radius:0;overflow:hidden;position:relative;display:flex;flex-direction:column;width:100%;height:100%;cursor:grab;transition:transform .3s ease,box-shadow .3s ease;box-shadow:none}.video-container:not(.connected){border:1px solid rgba(255,255,255,.3);box-sizing:border-box}.video-grid:not(.horizontal-layout) .video-container{border-radius:0;box-shadow:none}.video-grid:not(.horizontal-layout) .video-container:not(.connected){box-shadow:1px 0 #fff9,0 1px #fff9}.video-container:active{cursor:grabbing}.video-container.dragging{transform:scale(1.02);box-shadow:0 8px 20px #0000004d;z-index:1000;opacity:.9;border:2px solid var(--theme-accent, #e27e32)}.video-container[draggable=true]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.video-grid.horizontal-layout{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr auto;gap:0;width:100%;height:100%;background:#1a1a1a;border-radius:0;padding:0}.video-grid.horizontal-layout .video-container:nth-child(1){grid-column:1 / 5;grid-row:1}.video-grid.horizontal-layout .video-container:nth-child(2){grid-column:1;grid-row:2;aspect-ratio:4 / 3}.video-grid.horizontal-layout .video-container:nth-child(3){grid-column:2;grid-row:2;aspect-ratio:4 / 3}.video-grid.horizontal-layout .video-container:nth-child(4){grid-column:3;grid-row:2;aspect-ratio:4 / 3}.video-grid.horizontal-layout .video-container:nth-child(5){grid-column:4;grid-row:2;aspect-ratio:4 / 3}.video-grid.horizontal-layout .video-container{border-radius:0;box-shadow:none}.video-grid.horizontal-layout .video-container:not(.connected){border:1px solid rgba(255,255,255,.3);box-sizing:border-box}.video-grid.horizontal-layout .video-header{opacity:0;transform:translateY(-100%);transition:opacity .3s ease,transform .3s ease}@media (hover: hover) and (pointer: fine){.video-grid.horizontal-layout .video-container:hover .video-header{opacity:1;transform:translateY(0)}}@media (hover: none) and (pointer: coarse){.video-grid.horizontal-layout .video-container.controls-visible .video-header{opacity:1;transform:translateY(0)}}.video-grid.horizontal-layout .video-element{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.video-grid.horizontal-layout .video-container:nth-child(2) .video-element,.video-grid.horizontal-layout .video-container:nth-child(3) .video-element,.video-grid.horizontal-layout .video-container:nth-child(4) .video-element,.video-grid.horizontal-layout .video-container:nth-child(5) .video-element{object-fit:contain}.video-grid.horizontal-layout .video-container:nth-child(1) .video-element{object-fit:contain}@media (min-width: 1200px){.video-section{padding:0}.video-grid{gap:1px;--video-width: calc((100% - 1px)/2) ;--video-height: max(calc(var(--video-width) / 1.23), 280px)}}@media (min-width: 1600px){.video-section{padding:0}.video-grid{gap:1px;--video-width: calc((100% - 1px)/2) ;--video-height: max(calc(var(--video-width) / 1.23), 320px)}}@media (min-width: 1920px){.video-section{padding:0}.video-grid{gap:1px;--video-width: calc((100% - 1px)/2) ;--video-height: max(calc(var(--video-width) / 1.23), 360px)}}.video-container.error-state{background:#ef4444;animation:error-pulse 2s infinite}@keyframes error-pulse{0%,to{opacity:1}50%{opacity:.7}}.video-header{background:#1a1a1ae6;color:var(--theme-accent);padding:6px 10px;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;left:0;right:0;z-index:10;opacity:0;transition:opacity .3s ease;border-bottom:1px solid rgba(226,126,50,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(148,163,184,.2)}@media (hover: hover) and (pointer: fine){.video-container:hover .video-header{opacity:1}}@media (hover: none) and (pointer: coarse){.video-container.controls-visible .video-header{opacity:1}}.video-controls{position:absolute;bottom:8px;right:8px;display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .3s ease;z-index:10}@media (hover: hover) and (pointer: fine){.video-container:hover .video-controls{opacity:1}}@media (hover: none) and (pointer: coarse){.video-container.controls-visible .video-controls{opacity:1}}.fps-indicator{background:#000000b3;color:#fff;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);white-space:nowrap}video:fullscreen{width:100vw!important;height:100vh!important;object-fit:contain!important;background:#000!important}video:-webkit-full-screen{width:100vw!important;height:100vh!important;object-fit:contain!important;background:#000!important}video:-moz-full-screen{width:100vw!important;height:100vh!important;object-fit:contain!important;background:#000!important}.simulated-fullscreen-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000;z-index:9999;display:flex;align-items:center;justify-content:center}.simulated-fullscreen-video{width:100vw!important;height:100vh!important;object-fit:contain!important;background:#000!important}.simulated-fullscreen-controls{position:absolute;top:20px;right:20px;z-index:10000}.video-status-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}.video-status-icon.enabled{color:#48bb78}.video-status-icon.disabled{color:#f56565}.video-status-icon svg{width:100%;height:100%}.video-element{width:100%;height:100%;object-fit:contain;background:#000;flex:1;min-height:0}.video-grid:not(.horizontal-layout) .video-element{border-radius:0}@media (min-width: 1400px){.device-name{font-size:20px}.device-status{font-size:14px}.logout-btn{font-size:14px;padding:6px 12px}.video-header{padding:8px 12px;font-size:14px}}.video-element.error-state{filter:grayscale(100%) brightness(.5)}.sidebar-toggle-btn .icon-expanded{display:block}.sidebar-toggle-btn .icon-collapsed,.sidebar-toggle-btn.collapsed .icon-expanded{display:none}.sidebar-toggle-btn.collapsed .icon-collapsed{display:block}@media (min-width: 1301px){.dashboard-container.sidebar-collapsed .main-content{margin-left:var(--sidebar-offset, -320px)}}@media (max-width: 1300px){.sidebar-toggle-btn .icon-expanded{display:none}.sidebar-toggle-btn .icon-collapsed,.sidebar-toggle-btn.open .icon-expanded{display:block}.sidebar-toggle-btn.open .icon-collapsed{display:none}.sidebar{position:fixed;top:0;left:0;width:320px;height:100vh;transform:translate(-100%);z-index:1000}.sidebar.open{transform:translate(0)}.sidebar.collapsed{width:320px;transform:translate(-100%)}.sidebar.collapsed.open{transform:translate(0)}.sidebar-toggle{display:none}.main-content{width:100%;margin-left:0!important}.content-header{padding:6px 8px;gap:8px}.video-section{padding:0}.device-name{font-size:18px}.video-section .video-grid:not(.horizontal-layout){grid-template-columns:repeat(3,1fr)!important;grid-template-rows:1fr 1fr!important;gap:1px!important}.video-section .video-grid:not(.horizontal-layout) .video-container:nth-child(1){grid-column:span 2!important;grid-row:span 1!important}}@media (max-width: 1000px){.dashboard-container,.main-content{height:100vh;height:100dvh}.video-section{max-height:calc(100dvh - 50px)}.video-section .video-grid:not(.horizontal-layout){grid-template-columns:repeat(2,1fr)!important;grid-template-rows:repeat(2,auto) auto!important;gap:1px!important}.video-section .video-grid:not(.horizontal-layout) .video-container:nth-child(1){grid-column:span 2!important;grid-row:span 1!important}}@media (max-width: 1000px) and (orientation: landscape){.video-section{overflow:hidden}.video-section .video-grid{height:100%}.video-container{max-height:calc((100dvh - 60px) / 3)!important;height:auto}.video-section .video-grid .video-container:nth-child(1),.video-section .video-grid .video-container:nth-child(2),.video-section .video-grid .video-container:nth-child(3),.video-section .video-grid .video-container:nth-child(4),.video-section .video-grid .video-container:nth-child(5){max-height:calc((100dvh - 60px) / 3)!important}}@media (max-width: 768px){.dashboard-container{flex-direction:row}.video-section{padding:0}.video-grid:not(.horizontal-layout){grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,auto) auto;gap:1px}.video-grid:not(.horizontal-layout) .video-container:nth-child(1){grid-column:span 2;grid-row:span 1}}@media (max-width: 700px){.dashboard-container{flex-direction:column;overflow:hidden;height:100vh;height:100dvh}.sidebar{position:fixed;top:0;left:0;width:320px;height:100vh;height:100dvh;transform:translate(-100%);z-index:1000}.sidebar.open{transform:translate(0)}.main-content{width:100%;height:100vh;height:100dvh;margin-left:0!important;display:flex;flex-direction:column;overflow:hidden}.content-header{flex-shrink:0;padding:8px 12px;height:auto;min-height:42px}.video-section{flex:1;padding:4px;overflow-y:auto;overflow-x:hidden;align-items:flex-start;justify-content:flex-start;min-height:0;max-height:calc(100dvh - 50px)}.video-section .video-grid{display:flex!important;flex-direction:column!important;gap:4px;width:100%;height:auto;background:none;border-radius:0;padding:0;min-height:0}.video-container{aspect-ratio:16 / 9;width:calc(100% - 8px);height:auto;flex-shrink:0;min-height:calc((100dvh - 70px) / 6);max-height:calc((100dvh - 70px)/4)}.video-section .video-grid .video-container:nth-child(1),.video-section .video-grid .video-container:nth-child(2),.video-section .video-grid .video-container:nth-child(3),.video-section .video-grid .video-container:nth-child(4),.video-section .video-grid .video-container:nth-child(5){aspect-ratio:16 / 9;width:calc(100% - 8px);height:auto;grid-column:unset;grid-row:unset;min-height:calc((100dvh - 70px) / 6);max-height:calc((100dvh - 70px)/4)}.device-info{flex-direction:column;align-items:flex-start;gap:5px}.device-name{font-size:16px}.video-section .video-grid .video-container.dragging{border:none}.video-section .video-grid .video-container:not(.connected){box-shadow:0 1px #fff9}.video-section .video-grid .video-container:nth-child(5):not(.connected){box-shadow:none}}@media (max-width: 600px){.controls-section{padding:15px}.control-buttons{flex-direction:column}.control-btn{min-width:auto}.layout-toggle-btn{display:none}.video-section{padding:8px;overflow-y:auto;overflow-x:hidden;align-items:flex-start;max-height:calc(100vh - 60px)}.video-section .video-grid{display:grid;grid-template-columns:1fr!important;grid-template-rows:repeat(5,auto)!important;gap:8px;width:100%;height:auto;background:none;border-radius:0;padding:0}.video-container{aspect-ratio:4 / 3;width:100%;height:auto;grid-column:span 1;grid-row:span 1}.video-section .video-grid .video-container:nth-child(1){aspect-ratio:16 / 9;width:100%;height:auto;grid-column:span 1!important;grid-row:span 1!important}.video-container:nth-child(5){grid-column:span 1;aspect-ratio:4 / 3;width:100%;height:auto}.content-header{padding:6px 12px}.device-info{flex-direction:column;align-items:flex-start;gap:5px}.device-name{font-size:18px}}.log-content::-webkit-scrollbar{width:6px}.log-content::-webkit-scrollbar-track{background:#ffffff1a}.log-content::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.log-content::-webkit-scrollbar-thumb:hover{background:#ffffff80}.loading{position:relative;overflow:hidden}.loading:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:loading 1.5s infinite}@keyframes loading{0%{left:-100%}to{left:100%}}.video-element.error-state{position:relative;animation:errorPulse 1s infinite}@keyframes errorPulse{0%{box-shadow:0 0 #f00c;filter:contrast(1.2) brightness(1.1) sepia(.5) hue-rotate(-50deg) saturate(2)}50%{box-shadow:0 0 20px 5px red;filter:contrast(1.5) brightness(1.3) sepia(1) hue-rotate(-50deg) saturate(3)}to{box-shadow:0 0 #f00c;filter:contrast(1.2) brightness(1.1) sepia(.5) hue-rotate(-50deg) saturate(2)}}.video-container.error-state{border:3px solid #ff4444;box-shadow:0 0 15px #f449;background:#ff44441a;animation:containerFlash 1s infinite}@keyframes containerFlash{0%,to{background:#ff44441a;border-color:#f44}50%{background:#f443;border-color:#f66}}.video-container.error-state .video-header{color:#f44;animation:textBlink 1s infinite}@keyframes textBlink{0%,50%{opacity:1;text-shadow:0 0 5px rgba(255,68,68,.8)}51%,to{opacity:.6;text-shadow:none}}@keyframes errorBadge{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}button{height:36px;min-height:36px;display:flex;align-items:center;justify-content:center;background:#404040;color:#fff;border:1px solid #606060;border-radius:3px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000004d;flex-shrink:0}@media (hover: hover) and (pointer: fine){button:hover{background:var(--theme-accent);border-color:var(--theme-accent-dark);color:#fff}}@media (hover: none) and (pointer: coarse){button:active{background:var(--theme-accent);border-color:var(--theme-accent-dark);color:#fff}}button:disabled{opacity:.6;cursor:not-allowed;background:#2a2a2a!important;border-color:#404040!important;color:#666!important;transform:none!important}.icon-container{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:4px;transition:all .2s ease-in-out}@media (hover: hover) and (pointer: fine){button:hover .icon-container{background-color:#e27e321a;transform:scale(1.05)}}button:active .icon-container{background-color:#e27e3233;transform:scale(.95)}button:disabled .icon-container{opacity:.5;transform:none;background-color:transparent}.icon-refresh,.icon-loading,.icon-image,.icon-chevron-left,.icon-chevron-right,.icon-menu,.icon-maximize,.icon-minimize,.icon-link,.icon-play,.icon-copy,.icon-check{transition:all .2s ease-in-out}.icon-loading{animation:spin 1s linear infinite}@media (hover: hover) and (pointer: fine){button:hover .icon-refresh,button:hover .icon-loading:not(.icon-loading),button:hover .icon-image,button:hover .icon-chevron-left,button:hover .icon-chevron-right,button:hover .icon-menu,button:hover .icon-maximize,button:hover .icon-minimize,button:hover .icon-link,button:hover .icon-play,button:hover .icon-copy,button:hover .icon-check{transform:scale(1.1)}}button:active .icon-refresh,button:active .icon-loading:not(.icon-loading),button:active .icon-image,button:active .icon-chevron-left,button:active .icon-chevron-right,button:active .icon-menu,button:active .icon-maximize,button:active .icon-minimize,button:active .icon-link,button:active .icon-play,button:active .icon-copy,button:active .icon-check{transform:scale(.95)}@media (hover: hover) and (pointer: fine){button:hover .icon-refresh{transform:scale(1.1) rotate(15deg)}button:hover .icon-image,button:hover .icon-copy{filter:drop-shadow(0 0 4px rgba(226,126,50,.3))}}button:active .icon-refresh{transform:scale(.95) rotate(-15deg)}button:disabled .icon-refresh,button:disabled .icon-loading,button:disabled .icon-image{opacity:.5;transform:none}button:focus .icon-refresh,button:focus .icon-loading,button:focus .icon-image{outline-offset:2px;border-radius:2px}.content-header button{margin-right:6px}.content-header button:last-child{margin-right:0}.control-btn{flex:1 1 auto;min-width:fit-content;padding:0 8px;text-transform:uppercase;letter-spacing:.2px;overflow:visible;position:relative;white-space:nowrap;margin-right:0}.control-btn.primary{background:var(--theme-accent);border-color:var(--theme-accent-dark)}@media (hover: hover) and (pointer: fine){.control-btn.primary:hover{background:var(--theme-accent-hover);border-color:var(--theme-accent-dark)}}.control-btn.danger{background:var(--theme-accent);border-color:var(--theme-accent-dark)}@media (hover: hover) and (pointer: fine){.control-btn.danger:hover{background:var(--theme-accent-hover);border-color:var(--theme-accent-dark)}}.control-btn.secondary{background:#ffffffe6;color:#1e293b;border-color:#ffffffb3}@media (hover: hover) and (pointer: fine){.control-btn.secondary:hover{background:#fff;border-color:#fff;transform:translateY(-1px);box-shadow:0 4px 8px #ffffff4d}}.control-btn:last-child{margin-right:0}.btn-small{height:24px;min-height:24px;width:24px;padding:0;font-size:10px}.sidebar-toggle{width:28px;height:28px;font-size:12px;min-height:28px;background:#404040;color:#fff}@media (hover: hover) and (pointer: fine){.sidebar-toggle:hover{background:var(--theme-accent);border-color:var(--theme-accent-dark);color:#fff}}.sidebar-toggle:active{transform:translateY(0)}.sidebar-toggle-btn{width:36px;padding:0}.fullscreen-btn{width:28px;height:28px;min-height:28px;font-size:12px;transition:all .3s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:relative}@media (hover: hover) and (pointer: fine){.fullscreen-btn:hover{transform:scale(1.05)}}.logout-btn{padding:0 12px}.layout-toggle-btn{width:36px;padding:0}.image-btn{padding:0 8px;gap:6px}.volume-btn{width:36px;padding:0;transition:all .2s ease}@media (hover: hover) and (pointer: fine){.volume-btn:hover{transform:scale(1.05)}}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:20px;background:#1a1a1a!important;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0);-webkit-transform:translateZ(0);will-change:auto}.container{max-width:90vw;margin:0 auto;background:#fff;border-radius:15px;box-shadow:0 10px 30px #0003;overflow:visible}@media (min-width: 1200px){.container{max-width:85vw}}@media (min-width: 1600px){.container{max-width:80vw}}.header{background:linear-gradient(45deg,#285f9e,#333);color:#fff;padding:20px;text-align:center}.content{padding:30px}.legacy-video-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(640px,1fr));gap:20px;margin-bottom:30px}.legacy-video-wrapper{background:#f8f9fa;border-radius:10px;padding:15px;box-shadow:0 4px 6px #0000001a}.legacy-video-wrapper h3{margin:0 0 10px;color:#333;font-size:18px}.legacy-video{width:640px;height:500px;border-radius:8px;background:#000;object-fit:cover}.controls{background:#f8f9fa;padding:20px;border-radius:10px;margin-bottom:20px}.status{background:#e9ecef;padding:15px;border-radius:8px;margin-bottom:20px}.status-item{display:flex;align-items:center;margin-bottom:8px}.log{background:#2d3748;color:#e2e8f0;padding:15px;border-radius:8px;font-family:Courier New,monospace;font-size:14px;max-height:300px;overflow-y:auto;white-space:pre-wrap}.connection-status{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;background:#ccc}.connected{background:#48bb78}.disconnected{background:#f56565}.connecting{background:#ed8936}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}.login-card{background:#fff;padding:40px;border-radius:15px;box-shadow:0 10px 30px #0003;width:100%;max-width:400px}.login-header{text-align:center;margin-bottom:30px;color:#333}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:5px;color:#555;font-weight:500}.form-group input{width:100%;padding:12px;border:2px solid #e2e8f0;border-radius:6px;font-size:16px;transition:border-color .2s}.form-group input:focus{outline:none;border-color:#285f9e}.login-button{width:100%;margin:20px 0}.error-message{background:#fed7d7;color:#c53030;padding:12px;border-radius:6px;margin-bottom:20px;text-align:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}