*{box-sizing:border-box}:root{font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;padding:0;min-height:100vh;background:#0d1b2a}#root{min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1b2838}::-webkit-scrollbar-thumb{background:#3d5a73;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4a6d8a}::selection{background:#1da1f2;color:#fff}*{box-sizing:border-box;margin:0;padding:0}.app{display:flex;flex-direction:column;min-height:100vh;transition:all .3s ease}.full-page-loader{position:fixed;inset:0;background:#0a1628f2;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:16px}.loader-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}.loader-text{color:#fff;font-size:16px;font-weight:500}.app-body{display:flex;flex:1;overflow:hidden;position:relative}.app.dark{--bg-primary: #0a1628;--bg-secondary: #0f1d32;--bg-tertiary: #1a2d47;--bg-card: #162236;--text-primary: #ffffff;--text-secondary: #8899a6;--accent: #3b82f6;--border: #1e3a5f;--hover: #1e3a5f}.app.light{--bg-primary: #f5f7fa;--bg-secondary: #ffffff;--bg-tertiary: #e8ecf0;--bg-card: #ffffff;--text-primary: #1a1a2e;--text-secondary: #666;--accent: #3b82f6;--border: #e0e0e0;--hover: #e3f2fd}.sidebar{width:56px;background:var(--bg-secondary);display:flex;flex-direction:column;border-right:1px solid var(--border);transition:width .3s ease;z-index:100;flex-shrink:0}.sidebar-minimal{position:absolute;top:70px;left:0;width:60px;height:calc(100vh - 70px);background:transparent;z-index:100;cursor:pointer}.sidebar-minimal.right{left:auto;right:0}.sidebar-minimal.right .sidebar-toggle{border-radius:8px 0 0 8px}.logo{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px;overflow:hidden}.logo img{width:100%;height:100%;object-fit:contain}.logo svg{width:100%;height:100%}.brand-text{display:none;flex-direction:column;overflow:hidden}.sidebar:not(.collapsed) .brand-text{display:flex}.brand-name{font-size:12px;font-weight:700;color:var(--text-primary);letter-spacing:1px;white-space:nowrap}.brand-sub{font-size:9px;color:var(--accent);letter-spacing:.5px}.sidebar-toggle{display:flex;align-items:center;justify-content:center;padding:14px;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.sidebar-minimal .sidebar-toggle{padding:14px 16px;border:none;border-bottom:none;color:#fff;background:linear-gradient(180deg,#a87b35,#875201);border-radius:0 8px 8px 0}.sidebar-toggle:hover{background:var(--hover);color:var(--text-primary)}.sidebar-minimal .sidebar-toggle:hover{background:linear-gradient(180deg,#a07435,#734601)}.sidebar-toggle svg{width:20px;height:20px}.sidebar-nav{display:flex;flex-direction:column;padding:8px;gap:4px}.nav-item{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:none;border-radius:10px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.nav-item:hover{background:var(--hover);color:var(--text-primary)}.nav-item.active{background:var(--accent);color:#fff}.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.nav-icon svg{width:100%;height:100%}.main-wrapper{flex:1;display:flex;flex-direction:column;background:#171d25;overflow:hidden;min-width:0;transition:all .3s ease}.header{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;background:#171d25;border-bottom:none;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:100%;z-index:200;flex-shrink:0}.header-logo{display:flex;align-items:center;gap:10px}.header-logo .brand-text{display:flex;flex-direction:column}.page-title{font-size:18px;font-weight:500;color:var(--text-primary);position:absolute;left:50%;transform:translate(-50%)}.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.user-menu-container{position:relative}.user-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:#1e2530;border:1px solid rgba(100,130,160,.3);border-radius:8px;min-width:160px;box-shadow:0 10px 40px #0006;z-index:1000;overflow:hidden}.user-dropdown-name{padding:12px 16px;color:#e2e8f0;font-size:14px;font-weight:500;border-bottom:1px solid rgba(100,130,160,.2)}.user-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;background:transparent;border:none;color:#94a3b8;font-size:14px;cursor:pointer;transition:all .2s ease}.user-dropdown-item:hover{background:#f7b0471a;color:#f7b047}.user-dropdown-item svg{width:18px;height:18px}.theme-toggle{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--bg-tertiary);border-radius:20px}.theme-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.theme-icon svg{width:100%;height:100%}.toggle-switch{position:relative;width:44px;height:24px;background:#4b5563;border:1px solid #4b5563;border-radius:12px;cursor:pointer;transition:all .3s ease}.toggle-switch.dark{background:#3b82f6;border:1px solid #3b82f6}.toggle-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:all .3s ease;box-shadow:0 1px 3px #0003}.toggle-switch.dark .toggle-knob{left:22px}.theme-label{font-size:13px;color:var(--text-primary);font-weight:500}.header-icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.header-icon-btn svg{width:20px;height:20px}.header-icon-btn:hover{background:var(--hover);color:var(--text-primary)}.main-content{flex:1;padding:16px 80px;overflow-y:auto;display:flex;flex-direction:column;gap:0;width:100%}.main-content.panel-open{padding-right:30px}.accordion-section{margin-bottom:12px}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:linear-gradient(180deg,#a87b35,#875201);border:none;border-radius:8px;color:var(--text-primary);font-size:15px;font-weight:500;cursor:pointer;transition:all .2s ease}.accordion-header:hover{background:linear-gradient(180deg,#a07435,#734601)}.accordion-title{font-size:15px}.accordion-arrow{width:32px;height:32px;background:linear-gradient(180deg,#a87b35,#875201);border:1px solid rgba(168,123,53,1);border-radius:50%;color:#fff;transition:transform .3s ease;display:flex;align-items:center;justify-content:center}.accordion-arrow svg{width:18px;height:18px}.accordion-arrow.expanded{transform:rotate(180deg)}.accordion-content{padding:16px 20px;background:var(--bg-card);border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;margin-top:-1px}.telemetry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}.telemetry-card{background:var(--bg-tertiary);border-radius:8px;padding:16px;text-align:center;border:1px solid var(--border)}.telemetry-card h3{font-size:11px;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px;font-weight:500}.telemetry-value{font-size:24px;font-weight:600;color:var(--text-primary)}.telemetry-value span{font-size:12px;color:var(--text-secondary);font-weight:400}.right-sidebar-toggle{position:fixed;right:0;top:50%;transform:translateY(-50%);width:28px;height:28px;background:var(--accent);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;margin-right:8px}.right-sidebar-toggle svg{width:18px;height:18px}.right-sidebar-toggle:hover{transform:translateY(-50%) scale(1.1)}.video-sync-container{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.video-panel{background:var(--bg-tertiary);border:2px solid #5a7ca0;border-radius:8px;overflow:hidden}.video-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#5a7ca0;color:#fff;font-size:14px;font-weight:500}.video-info{font-size:12px;opacity:.9;font-weight:400}.video-loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:200px;background:var(--bg-tertiary);color:var(--text-secondary);font-size:14px}.video-settings-btn{background:none;border:none;color:#fff;cursor:pointer;width:20px;height:20px;opacity:.8;transition:opacity .2s}.video-settings-btn:hover{opacity:1}.video-settings-btn svg{width:100%;height:100%}.video-wrapper{background:#1a1a2e;aspect-ratio:16/9}.video-player{width:100%;height:100%;background:#000}.video-hint{padding:10px 16px;font-size:12px;color:#64b5f6;text-align:center;background:var(--bg-card)}.sync-controls-panel{background:var(--bg-tertiary);border:2px solid #5a7ca0;border-radius:8px;min-width:200px;overflow:hidden}.sync-controls-header{display:flex;flex-direction:column;align-items:center;padding:12px 16px;background:#5a7ca0;color:#fff;font-size:14px;font-weight:500;line-height:1.3}.sync-controls-content{padding:16px}.sync-status-section{margin-bottom:16px;text-align:center}.sync-status-section h4{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.sync-status-text{font-size:13px;color:#64b5f6}.sync-buttons{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.sync-buttons-row{display:flex;justify-content:center;gap:16px;margin-top:16px}.sync-btn{padding:12px 20px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.sync-btn.play{background:linear-gradient(180deg,#43a047,#66bb6a);color:#fff}.sync-btn.play:hover{background:linear-gradient(180deg,#388e3c,#4caf50)}.sync-btn.stop{background:linear-gradient(180deg,#e53935,#ef5350);color:#fff}.sync-btn.stop:hover{background:linear-gradient(180deg,#c62828,#e53935)}.sync-btn.beginning{background:#f7b047;color:#000}.sync-btn.beginning:hover{background:#e5a03d}.manual-offset-section{border-top:1px solid var(--border);padding-top:16px}.manual-offset-section h4{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:12px;text-align:center}.offset-controls{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.offset-btn{padding:6px 10px;background:#f7b047;border:1px solid #f7b047;border-radius:4px;color:#000;font-size:12px;cursor:pointer;transition:all .2s}.offset-btn:hover{background:#e5a03d;color:#000;border-color:#e5a03d}.offset-value{padding:6px 12px;background:var(--bg-primary);border-radius:4px;font-size:13px;font-weight:600;color:var(--accent);min-width:50px;text-align:center}.form-group{margin-bottom:16px}.form-group.half,.form-group.flex-1{flex:1}.form-row{display:flex;gap:12px;margin-bottom:16px}.form-row .form-group{margin-bottom:0}.form-input{width:100%;padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:#f7b047;font-size:13px;transition:border-color .2s ease}.form-input:hover{border-color:var(--accent)}.form-input:focus{outline:none;border-color:var(--accent)}.form-input::-webkit-inner-spin-button,.form-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.form-input[type=number]{-moz-appearance:textfield}.form-label{display:block;font-size:13px;color:var(--text-primary);margin-bottom:8px;font-weight:500}.select-wrapper{position:relative}.select-wrapper.flex-1{flex:1}.form-select{width:100%;padding:10px 36px 10px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:#f7b047;font-size:13px;cursor:pointer;appearance:none;transition:border-color .2s ease}.form-select option{background:var(--bg-tertiary);color:#f7b047;padding:4px 8px;font-size:12px}.form-select option:checked{background:#f7b04733}.form-select:hover{border-color:var(--accent)}.form-select:focus{outline:none;border-color:var(--accent)}.form-select:disabled{opacity:.6;cursor:not-allowed}.select-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#f9bf6b;pointer-events:none}.select-arrow svg{width:100%;height:100%}.vehicle-select-row{display:flex;gap:8px}.add-btn{display:flex;align-items:center;gap:4px;padding:8px 14px;background:#f7b047;border:none;border-radius:6px;color:#000;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#e5a03d}.add-btn svg{width:14px;height:14px}.vehicle-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.vehicle-tag{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:4px;font-size:13px;font-weight:500;border:1px solid}.vehicle-tag.blue{background:#3b82f626;color:#60a5fa;border-color:#3b82f6}.vehicle-tag.teal{background:#14b8a626;color:#2dd4bf;border-color:#14b8a6}.vehicle-tag.cyan{background:#06b6d426;color:#22d3ee;border-color:#06b6d4}.tag-remove{background:none;border:none;color:inherit;font-size:14px;cursor:pointer;padding:0 2px;opacity:.7;transition:opacity .2s ease}.tag-remove:hover{opacity:1}.update-plot-container{display:flex;justify-content:flex-end;margin-top:16px}.update-plot-btn{padding:12px 28px;background:#f7b047;border:none;border-radius:6px;color:#000;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:none;box-shadow:0 2px 8px #00000026}.update-plot-btn:hover:not(:disabled){background:#e5a03d;transform:translateY(-1px);box-shadow:0 4px 12px #0003}.update-plot-btn:active:not(:disabled){transform:translateY(0);background:#d4922f}.update-plot-btn:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(180deg,#666,#888)}.telemetry-info{font-size:12px;color:var(--text-secondary);margin-bottom:16px;line-height:1.4}.channel-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.channel-tag{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:4px;font-size:11px;font-weight:500}.channel-tag.red{background:#ef444433;color:#ef4444}.channel-tag.green{background:#22c55e33;color:#22c55e}.channel-tag.yellow{background:#eab30833;color:#eab308}.add-channel-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background:transparent;border:1px dashed #f7b047;border-radius:6px;color:#f7b047;font-size:13px;cursor:pointer;transition:all .2s ease;width:100%;justify-content:center}.add-channel-btn:hover{background:#f7b047;border-color:#f7b047;color:#000}.add-channel-btn svg{width:14px;height:14px}.accordion-panel{margin-bottom:12px;border-radius:8px;overflow:visible;position:relative;z-index:100}.accordion-panel-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:linear-gradient(90deg,#fab144 -49.88%,#ffa80d1a 102.13%);border:none;border-radius:8px 8px 0 0;cursor:pointer;transition:all .2s ease}.accordion-panel-header:hover{background:linear-gradient(90deg,#e9a33d -49.88%,#e6960a26 102.13%)}.accordion-panel-title{font-size:13px;font-weight:600;color:#f9bf6b}.accordion-panel-title.white{color:#fff}.accordion-panel-chevron{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:#000;border:1px solid #ffffff;border-radius:50%;color:#fff;transition:transform .3s ease}.accordion-panel-chevron.expanded{transform:rotate(180deg)}.accordion-panel-chevron svg{width:14px;height:14px}.accordion-panel-actions{display:flex;align-items:center;gap:12px}.accordion-panel-chevron.orange{width:22px;height:22px;background:#000;border:1px solid #ffffff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.accordion-panel-chevron.orange svg{color:#fff;width:14px;height:14px}.accordion-panel-content{background:var(--bg-card);border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;overflow:visible}.update-btn{padding:10px 24px;background:#fff;border:none;border-radius:6px;color:#1a1a2e;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #00000026;white-space:nowrap;flex-shrink:0;margin-left:auto}.update-btn:hover:not(:disabled){background:#f0f0f0;transform:translateY(-1px);box-shadow:0 4px 12px #0003}.update-btn:disabled{opacity:.5;cursor:not-allowed}@media(max-width:900px){.video-sync-container{grid-template-columns:1fr;gap:16px}.sync-buttons-row{flex-wrap:wrap}.sync-btn{flex:1;min-width:120px}}@media(max-width:768px){.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000}.page-title{position:static;transform:none}.header{padding:0 16px}.theme-label{display:none}.main-content{padding:16px 50px}}.right-panel{width:380px;min-width:380px;background:#171d25;display:flex;flex-direction:column;transition:all .3s ease;overflow-y:auto;overflow-x:visible;flex-shrink:0;position:relative;margin-top:16px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.right-panel:not(.open){width:0;min-width:0;opacity:0;overflow:hidden;box-shadow:none}.right-panel-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(90deg,#fab144 -49.88%,#ffa80d1a 102.13%);border-bottom:1px solid var(--border)}.right-panel-header-new{display:flex;align-items:center;padding:6px 12px;background:linear-gradient(90deg,#fab144 -49.88%,#ffa80d1a 102.13%);border-bottom:1px solid var(--border);transition:all .3s ease;position:relative}.right-panel-header-new.collapsed{background:linear-gradient(90deg,#fab1444d -49.88%,#ffa80d08 102.13%)}.right-panel-header-new.collapsed .controls-header-center{opacity:.3}.right-panel-header-new.collapsed .panel-back-btn,.right-panel-header-new.collapsed .controls-chevron-btn{opacity:1;filter:brightness(1.2)}.panel-back-btn{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#fff;cursor:pointer;transition:all .2s ease}.panel-back-btn:hover{opacity:.8}.panel-back-btn svg{width:14px;height:14px}.controls-header-center{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}.controls-chevron-btn{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;background:#000;border:1px solid #ffffff;transition:all .2s ease}.controls-chevron-btn:hover{opacity:.8}.controls-chevron-btn.orange{background:#000;border:1px solid #ffffff}.controls-chevron-btn svg{width:14px;height:14px;color:#fff}.controls-content{padding:16px;display:flex;flex-direction:column;gap:16px}.controls-icon{width:18px;height:18px;color:#fff}.controls-icon svg{width:100%;height:100%}.controls-title{font-size:13px;font-weight:600;color:#fff}.controls-chevron{width:24px;height:24px;color:var(--text-secondary);cursor:pointer;transition:transform .3s ease}.controls-chevron svg{width:100%;height:100%}.controls-chevron.expanded{transform:rotate(180deg)}.panel-divider{height:1px;background:var(--border);margin:0 16px}.panel-collapse-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.panel-collapse-btn:hover{background:#ffffff1a;color:var(--text-primary)}.panel-collapse-btn svg{width:16px;height:16px}.panel-section{border-bottom:1px solid var(--border);margin-bottom:12px;position:relative;z-index:5}.panel-section-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:linear-gradient(180deg,#a87b35,#875201);border:none;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer!important;transition:background .2s ease;position:relative;z-index:10;text-align:left;pointer-events:auto!important;-webkit-user-select:none;user-select:none}.panel-section-header:hover{background:linear-gradient(180deg,#a07435,#734601)}.panel-section-header:active{background:linear-gradient(180deg,#084070,#1256a0)}.section-arrow{width:32px;height:32px;background:linear-gradient(180deg,#a87b35,#875201);border:1px solid rgba(168,123,53,1);border-radius:50%;color:#fff;transition:transform .3s ease;display:flex;align-items:center;justify-content:center}.section-arrow svg{width:18px;height:18px}.section-arrow.expanded{transform:rotate(180deg)}.panel-section-content{padding:0 16px 16px}.vehicle-tags-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.vehicle-tag-new{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:transparent;border:1px solid rgba(128,182,248,1);border-radius:4px;color:#80b6f8;font-size:13px}.vehicle-tag-new.color-0{border-color:#3b82f6;color:#3b82f6}.vehicle-tag-new.color-1{border-color:#f97316;color:#f97316}.vehicle-tag-new.color-2{border-color:#eab308;color:#eab308}.vehicle-tag-new.color-3{border-color:#22c55e;color:#22c55e}.vehicle-tag-new.color-4{border-color:#8b5cf6;color:#8b5cf6}.tag-remove-btn{background:none;border:none;color:inherit;font-size:16px;cursor:pointer;padding:0;line-height:1}.tag-remove-btn:hover{color:#67e8f9}.update-plot-container-right{display:flex;justify-content:space-between}.update-plot-btn-orange{padding:10px 24px;background:#f7b047;border:1px solid #f7b047;border-radius:6px;color:#000;font-size:14px;font-weight:400;cursor:pointer;transition:background .2s ease}.update-plot-btn-orange:hover:not(:disabled){background:#e5a03d}.update-plot-btn-orange:disabled{background:#4b5563;border-color:#4b5563;cursor:not-allowed}.telemetry-analysis-section{margin-top:0;transition:all .3s ease}.telemetry-analysis-section.disabled{opacity:.5;pointer-events:none}.telemetry-analysis-section.disabled .telemetry-analysis-header{pointer-events:auto;cursor:not-allowed}.telemetry-analysis-section.disabled .telemetry-analysis-header *{cursor:not-allowed!important}.telemetry-analysis-section.collapsed .telemetry-header-center{opacity:.3}.telemetry-analysis-section.collapsed .controls-chevron-btn{opacity:1;filter:brightness(1.2)}.telemetry-analysis-header{display:flex;align-items:center;padding:6px 12px;background:linear-gradient(90deg,#fab144 -49.88%,#ffa80d1a 102.13%);border-bottom:1px solid var(--border);transition:all .3s ease}.telemetry-analysis-section.collapsed .telemetry-analysis-header{background:linear-gradient(90deg,#fab1444d -49.88%,#ffa80d08 102.13%)}.telemetry-header-center{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}.telemetry-title{font-size:13px;font-weight:600;color:#fff}.telemetry-content{padding:16px!important}.telemetry-hint{font-size:12px;color:var(--text-secondary);margin-bottom:16px}.telemetry-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;padding:12px;background:var(--bg-tertiary);border-radius:6px;border:1px solid var(--border)}.telemetry-tag{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:500;border:1px solid}.telemetry-tag.color-1{background:#3b82f626;color:#3b82f6;border-color:#3b82f6}.telemetry-tag.color-2{background:#22c55e26;color:#22c55e;border-color:#22c55e}.telemetry-tag.color-3{background:#f9731626;color:#f97316;border-color:#f97316}.telemetry-tag.color-4{background:#eab30826;color:#eab308;border-color:#eab308}.telemetry-tag.color-5{background:#8b5cf626;color:#8b5cf6;border-color:#8b5cf6}.telemetry-tag.color-6{background:#ec489926;color:#ec4899;border-color:#ec4899}.telemetry-tag.color-7{background:#14b8a626;color:#14b8a6;border-color:#14b8a6}.telemetry-tag.color-8{background:#f43f5e26;color:#f43f5e;border-color:#f43f5e}.telemetry-tag.color-9{background:#06b6d426;color:#06b6d4;border-color:#06b6d4}.telemetry-tag.color-10{background:#a855f726;color:#a855f7;border-color:#a855f7}.telemetry-tag .tag-remove{background:none;border:none;color:inherit;font-size:14px;cursor:pointer;padding:0 2px;opacity:.7;transition:opacity .2s ease}.telemetry-tag .tag-remove:hover{opacity:1}.right-panel-toggle{position:fixed;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;background:linear-gradient(180deg,#a87b35,#875201);border:1px solid rgba(168,123,53,1);border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:300;box-shadow:0 2px 8px #0000004d}.right-panel-toggle.panel-open{right:388px}.right-panel-toggle svg{width:18px;height:18px}.right-panel-toggle:hover{background:linear-gradient(180deg,#a07435,#946c2e);transform:translateY(-50%) scale(1.05)}@media(max-width:768px){.right-panel{position:fixed;right:0;top:0;bottom:0;z-index:1000}.right-panel:not(.open){width:0}.right-panel-toggle{right:4px;width:32px;height:32px}.right-panel-toggle.panel-open{right:304px}.right-panel{width:300px}}.custom-select{position:relative;width:100%}.custom-select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:#f7b047;font-size:13px;cursor:pointer;transition:border-color .2s ease}.custom-select-trigger:hover,.custom-select.open .custom-select-trigger{border-color:var(--accent)}.custom-select.disabled .custom-select-trigger{opacity:.6;cursor:not-allowed}.custom-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-select-arrow{width:16px;height:16px;color:#f9bf6b;transition:transform .2s ease;flex-shrink:0;margin-left:8px}.custom-select-arrow svg{width:100%;height:100%}.custom-select.open .custom-select-arrow{transform:rotate(180deg)}.custom-select-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;z-index:9999;box-shadow:0 4px 12px #0000004d;overflow:hidden}.custom-select-dropdown.upward{top:auto;bottom:100%;margin-top:0;margin-bottom:4px;box-shadow:0 -4px 12px #0000004d}.custom-select-options{list-style:none;margin:0;padding:4px 0;max-height:300px;overflow-y:auto}.custom-select-options::-webkit-scrollbar{width:6px}.custom-select-options::-webkit-scrollbar-track{background:var(--bg-tertiary)}.custom-select-options::-webkit-scrollbar-thumb{background:#f7b04766;border-radius:3px}.custom-select-options::-webkit-scrollbar-thumb:hover{background:#f7b04799}.custom-select-option{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:13px;color:#f7b047;cursor:pointer;transition:background .15s ease}.custom-select-option .option-label{flex:1}.custom-select-option .option-checkmark{color:#4caf50;font-weight:700;margin-left:8px}.custom-select-option:hover{background:#f7b04726}.custom-select-option.selected{background:#f7b04733}.custom-select-option.disabled-option{cursor:not-allowed}.custom-select-option.disabled-option:hover{background:transparent;opacity:.5}.custom-select.dark-select .custom-select-trigger{background:var(--bg-tertiary);min-width:120px}.custom-select.dark-select .custom-select-dropdown{background:var(--bg-tertiary)}.control-group .custom-select{min-width:100px}.control-group .custom-select-trigger{padding:8px 30px 8px 10px;font-size:12px}.overlay-field .custom-select{min-width:140px}.select-vehicle-group .custom-select{min-width:120px}.camera-control-group .custom-select{min-width:110px}.camera-control-group .custom-select-trigger,.camera-control-group .custom-select-option{padding:6px 10px;font-size:12px}.channel-laps-controls{display:flex;align-items:center;gap:16px;padding:12px 20px;background:var(--bg-tertiary);flex-wrap:nowrap}.event-info-box{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:10px 14px;min-width:180px;flex-shrink:0}.event-id-label{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:6px}.vehicle-dots{display:flex;flex-wrap:wrap;gap:8px}.vehicle-dot-item{display:flex;align-items:center;gap:6px}.vehicle-dot{width:10px;height:10px;border-radius:50%}.vehicle-dot.color-0{background:#3b82f6;box-shadow:0 0 4px #3b82f6}.vehicle-dot.color-1{background:#f97316;box-shadow:0 0 4px #f97316}.vehicle-dot.color-2{background:#eab308;box-shadow:0 0 4px #eab308}.vehicle-dot.color-3{background:#22c55e;box-shadow:0 0 4px #22c55e}.vehicle-dot.color-4{background:#8b5cf6;box-shadow:0 0 4px #8b5cf6}.vehicle-dot-label{font-size:12px;color:var(--text-secondary)}.control-group{display:flex;flex-direction:column;gap:4px;flex-shrink:0}.control-label{font-size:11px;color:var(--text-secondary);font-weight:500;white-space:nowrap}.control-group .form-select{min-width:100px;padding:8px 30px 8px 10px;font-size:12px}.lap-range-group{min-width:auto;flex-shrink:0}.lap-range-inputs{display:flex;gap:6px}.lap-range-input{width:50px;padding:8px 6px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:12px;text-align:center;-moz-appearance:textfield}.lap-range-input::-webkit-outer-spin-button,.lap-range-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.lap-range-input:focus{outline:none;border-color:var(--accent)}.lap-range-separator{color:var(--text-secondary);font-size:12px;display:flex;align-items:center}.lap-range-note{font-size:9px;color:var(--text-secondary);margin-top:2px;white-space:nowrap}.channel-laps-btn{padding:10px 24px;background:#f7b047;border:1px solid #f7b047;border-radius:6px;color:#000;font-size:13px;font-weight:400;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0;margin-left:auto}.channel-laps-btn:hover:not(:disabled){background:#e5a03d}.channel-laps-btn:disabled{background:#4b5563;border-color:#4b5563;cursor:not-allowed}.lap-metrics-section{padding:8px 16px;flex:1;display:flex;flex-direction:column}.lap-metrics-header{margin-bottom:8px}.lap-metrics-title{font-size:15px;font-weight:600;color:var(--text-primary);margin:0 0 2px}.lap-metrics-subtitle{font-size:12px;color:var(--text-secondary)}.chart-controls{padding:16px;background:var(--bg-tertiary);border-radius:8px;margin-bottom:16px}.chart-control-row{display:flex;gap:16px;margin-bottom:16px}.chart-control-group{flex:1}.chart-control-group .form-label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--text-primary)}.chart-container{background:#162236cc;border-radius:8px;padding:8px;height:250px;border:1px dashed rgba(255,255,255,.1);width:100%}.chart-container .scatterlayer .trace path.js-line{stroke-dasharray:3000;stroke-dashoffset:3000;animation:drawLine 2.5s ease-out forwards}@keyframes drawLine{to{stroke-dashoffset:0}}.chart-loading{display:flex;align-items:center;justify-content:center;height:200px;color:var(--text-secondary);font-size:14px}.chart-error{padding:12px;background:#ff6b6b1a;border:1px solid #ff6b6b;border-radius:6px;color:#ff6b6b;margin-bottom:16px;font-size:14px}.select-vehicle-section{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin-top:8px;overflow:visible}.select-vehicle-row{display:flex;align-items:flex-end;overflow:visible;gap:16px;flex-wrap:wrap}.select-vehicle-title{font-size:14px;font-weight:600;color:var(--text-primary);margin:0;white-space:nowrap;align-self:center}.select-vehicle-group{display:flex;flex-direction:column;gap:6px;overflow:visible;position:relative}.select-vehicle-label{font-size:12px;color:var(--text-primary);font-weight:500}.select-vehicle-group .select-wrapper{min-width:120px}.form-select.dark-select{background:var(--bg-tertiary);min-width:120px}.submit-btn{padding:10px 32px;background:#f7b047;border:1px solid #f7b047;border-radius:6px;color:#000;font-size:14px;font-weight:400;cursor:pointer;transition:all .2s ease;margin-left:auto}.submit-btn:hover{background:#e5a03d}.submit-btn:disabled{background:#4b5563;border-color:#4b5563;cursor:not-allowed}@media(max-width:1200px){.channel-laps-controls{flex-wrap:wrap;gap:12px}.control-group .form-select{min-width:90px}.lap-range-input{width:45px}}@media(max-width:768px){.channel-laps-controls{flex-direction:column;align-items:stretch;flex-wrap:wrap}.event-info-box{width:100%;min-width:auto}.control-group{width:100%}.update-btn{width:100%;margin-left:0}.select-vehicle-controls{flex-direction:column;align-items:stretch}.select-vehicle-group,.select-vehicle-group .select-wrapper{width:100%}.submit-btn{width:100%;margin-left:0}}.channel-laps-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;margin-top:16px;gap:16px}.channel-laps-loader-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#f7b047;border-radius:50%;animation:channelLapsSpinner 1s linear infinite}@keyframes channelLapsSpinner{to{transform:rotate(360deg)}}.channel-laps-loader-text{color:var(--text-secondary);font-size:14px;font-weight:500}.telemetry-metrics-panel{margin-top:0}.telemetry-metrics-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:linear-gradient(90deg,#fab144 -49.88%,#ffa80d1a 102.13%);border-radius:8px 8px 0 0;gap:12px}.telemetry-metrics-title{font-size:13px;font-weight:600;color:#fff}.telemetry-metrics-legend{display:flex;gap:20px;margin-left:16px}.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;color:#fff}.legend-line{width:30px;height:2px;border-radius:1px}.legend-line.cyan{background:#22d3ee}.legend-line.green{background:#4ade80}.legend-line.solid{width:24px;height:3px;border-radius:2px}.legend-line.dashed{width:24px;height:3px;background:repeating-linear-gradient(90deg,currentColor 0px,currentColor 6px,transparent 6px,transparent 10px)}.legend-line.dotted{width:24px;height:3px;background:repeating-linear-gradient(90deg,currentColor 0px,currentColor 3px,transparent 3px,transparent 6px)}.legend-line.solid.cyan{background:#22d3ee}.legend-line.orange{color:#f9bf6b}.legend-line.solid.orange{background:#f9bf6b}.legend-line.dashed.orange{background:repeating-linear-gradient(90deg,rgba(249,191,107,1) 0px,rgba(249,191,107,1) 6px,transparent 6px,transparent 10px)}.legend-line.dotted.orange{background:repeating-linear-gradient(90deg,rgba(249,191,107,1) 0px,rgba(249,191,107,1) 3px,transparent 3px,transparent 6px)}.telemetry-metrics-actions{display:flex;align-items:center;gap:12px}.add-overlay-header-btn{background:#f7b047;color:#000;border:1px solid #f7b047;padding:4px 12px;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.add-overlay-header-btn:hover{background:#e5a03d;border-color:#e5a03d}.overlay-panel-top{display:flex;align-items:center;gap:24px;padding:16px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-wrap:wrap}.telemetry-charts-grid{display:grid;grid-template-columns:1fr;gap:16px;padding:16px;background:var(--bg-card);border-radius:0 0 8px 8px}.telemetry-chart-card{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;overflow:hidden}.telemetry-chart-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}.telemetry-chart-title{font-size:14px;font-weight:600;color:var(--text-primary);margin:0;min-width:120px}.telemetry-chart-legend{display:flex;align-items:center;justify-content:center;gap:24px;flex:1}.telemetry-chart-spacer{min-width:120px}.telemetry-chart-subtitle{font-size:11px;color:var(--text-secondary)}.telemetry-chart-container{padding:0 8px 8px;touch-action:none}.telemetry-chart-container .hoverlayer .hovertext path{fill-opacity:.85!important}.overlay-panel-bottom{display:flex;align-items:center;gap:24px;padding:16px 20px;background:var(--bg-secondary);border-top:1px solid var(--border);flex-wrap:wrap}.overlay-label-text{font-size:14px;font-weight:600;color:var(--text-primary);min-width:60px}.overlay-field{display:flex;align-items:center;gap:12px}.overlay-field-label{font-size:13px;color:var(--text-secondary);font-weight:500;white-space:nowrap}.overlay-field .select-wrapper{min-width:140px}.overlay-field .form-select{background:var(--bg-tertiary);border:1px solid var(--border)}.add-to-overlay-btn{background:#f7b047;color:#000;border:1px solid #f7b047;padding:8px 20px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;margin-left:auto}.add-to-overlay-btn:hover:not(:disabled){background:#e5a03d}.add-to-overlay-btn:disabled{background:#4b5563;border-color:#4b5563;color:#9ca3af;cursor:not-allowed}.overlay-tags{display:flex;flex-direction:column;gap:8px;margin-left:auto}.overlay-tag{display:flex;align-items:center;gap:8px;padding:6px 12px;background:transparent;border:1px solid rgba(249,191,107,1);border-radius:4px;color:#f9bf6b;font-size:12px;white-space:nowrap}.overlay-tag-remove{background:none;border:none;color:#f9bf6b;font-size:16px;cursor:pointer;padding:0;line-height:1}.overlay-tag-remove:hover{color:#f9bf6b}.add-overlay-btn{padding:8px 20px;background:#f7b047;border:1px solid #f7b047;border-radius:6px;color:#000;font-size:14px;font-weight:400;cursor:pointer;transition:all .2s ease}.add-overlay-btn:hover{background:#e5a03d}.cameras-section{padding:16px;background:var(--bg-card);border-bottom:1px solid var(--border);position:relative;z-index:1}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.camera-column{display:flex;flex-direction:column;gap:12px}.camera-controls{display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--bg-tertiary);border-radius:6px;border:1px solid var(--border);position:relative;z-index:10}.camera-control-group{display:flex;align-items:center;gap:8px;flex:0 0 auto}.camera-control-label{font-size:12px;color:var(--text-secondary);font-weight:500;white-space:nowrap}.camera-controls .custom-select{min-width:110px}.camera-controls .custom-select-trigger{padding:6px 10px;font-size:12px}.camera-submit-btn{background:#f7b047;color:#000;border:1px solid #f7b047;padding:6px 14px;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;margin-left:auto}.camera-submit-btn:hover:not(:disabled){background:#e5a03d}.camera-submit-btn:disabled{background:#4b5563;border-color:#4b5563;color:#9ca3af;cursor:not-allowed}.camera-card{background:var(--bg-card);border:2px solid #5a7ca0;position:relative}.camera-card.disabled{opacity:.7;filter:grayscale(30%)}.camera-card.disabled .camera-video-wrapper{pointer-events:none}.camera-card.disabled .camera-card-header{opacity:.7}.camera-card-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-tertiary);color:var(--text-primary);font-size:14px;font-weight:500}.camera-time{color:var(--text-primary);font-size:14px;font-weight:500;margin-left:auto;padding-left:12px}.camera-video-wrapper{position:relative;height:340px;background:#000}.video-loading-overlay{position:absolute;inset:0;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:15;gap:12px;color:#fff}.video-loading-overlay span{color:#fff;font-size:14px;font-weight:500}.video-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}.video-error-overlay{position:absolute;inset:0;background:#000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:15;gap:12px;padding:20px}.video-error-overlay .error-icon{width:48px;height:48px;background:#ef4444;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff}.video-error-overlay .error-message{color:#fca5a5;font-size:14px;text-align:center;max-width:90%;word-break:break-word}.camera-disabled-overlay{position:absolute;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10}.camera-disabled-overlay span{color:#fff;font-size:16px;font-weight:600;padding:10px 20px;background:#0009;border-radius:8px}.camera-video{width:100%;height:340px;object-fit:cover}.camera-video.no-play-button::-webkit-media-controls-play-button{display:none!important}.camera-video.no-play-button::-webkit-media-controls-start-playback-button{display:none!important}.camera-video.no-play-button::-webkit-media-controls-overlay-play-button{display:none!important}.camera-video.no-play-button::-moz-media-controls-play-button{display:none!important}.camera-video.no-play-button:before{display:none!important}.video-controls-overlay{position:absolute;bottom:0;right:4px;height:32px;background:#000;z-index:10;pointer-events:none}.offset-duration-container{display:flex;justify-content:center;align-items:center;margin-top:16px;padding:12px 0}.video-controls-fixed{position:fixed;bottom:0;left:50%;transform:translate(-50%);z-index:1000}@media(pointer:coarse){.video-controls-fixed{bottom:20px}}.video-controls{display:flex;justify-content:center;align-items:center;gap:16px;padding:6px 28px;background:#171d25;border-radius:20px 20px 0 0;border:1px solid rgba(100,130,160,.3);border-bottom:none}.video-control-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:transparent;border:none;cursor:pointer;color:#94a3b8;transition:all .2s ease}.video-control-btn:hover{color:#fff}.video-control-btn svg{width:14px;height:14px}.video-control-btn.play-pause{width:26px;height:26px;color:#e2e8f0}.video-control-btn.play-pause:hover{color:#fff}.video-control-btn.play-pause svg{width:18px;height:18px}.video-control-btn.restart-btn{color:#94a3b8}.video-control-btn.restart-btn:hover{color:#fff}.video-control-btn.restart-btn svg{width:32px;height:32px}.video-controls.disabled{opacity:.5;cursor:not-allowed}.video-controls.disabled .video-control-btn{pointer-events:none}.video-control-btn:disabled{opacity:.4;cursor:not-allowed;color:#64748b}.video-control-btn:disabled:hover{color:#64748b}.overlay-video-ipad-msg{display:none}@media(pointer:coarse){.video-controls-overlay{display:none}}.ios-device .overlay-video-wrapper .overlay-video{display:none}.ios-device .overlay-video-wrapper .overlay-video-ipad-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;inset:0;background:#000000b3;z-index:10;gap:6px;color:#94a3b8;font-size:13px;font-weight:500;text-align:center;padding:16px}.ios-device .overlay-video-ipad-msg .overlay-video-ipad-sub{font-size:11px;color:#64748b;font-weight:400}.ios-device .overlay-controls{pointer-events:none;opacity:.4}.ios-device .video-grid{grid-template-columns:1fr}@media(max-width:900px){.telemetry-charts-grid{grid-template-columns:1fr}.telemetry-metrics-header{flex-wrap:wrap}.telemetry-chart-legend{flex-wrap:wrap;gap:12px}.telemetry-chart-spacer{display:none}.video-grid{grid-template-columns:1fr}.camera-controls{flex-wrap:wrap;gap:10px}.camera-submit-btn{margin-left:0;width:100%;margin-top:4px}}@media(pointer:coarse)and (orientation:portrait){.cameras-section{padding:8px}.video-grid{grid-template-columns:1fr 1fr;gap:8px}.camera-column{gap:6px}.camera-controls{padding:6px 8px;gap:6px;flex-wrap:wrap}.camera-card{border-width:1px}.camera-card-header{padding:4px 8px;font-size:10px}.camera-time{font-size:10px}.camera-video-wrapper{height:300px}.camera-video{height:300px;object-fit:contain}.camera-control-group{gap:4px}.camera-control-label{font-size:10px}.camera-controls .custom-select{min-width:80px}.camera-controls .custom-select-trigger{padding:4px 6px;font-size:10px}.camera-submit-btn{padding:4px 10px;font-size:10px}.offset-duration-container{margin-top:6px;padding:6px 0}.telemetry-charts-grid{padding:8px;gap:8px}}@media(max-height:1050px)and (orientation:landscape){.cameras-section{padding:8px}.video-grid{gap:8px}.camera-column{gap:6px}.camera-controls{padding:6px 10px;gap:8px}.camera-card{border-width:1px}.camera-card-header{padding:4px 10px;font-size:11px}.camera-time{font-size:11px}.camera-video-wrapper{height:320px}.camera-video{height:320px;object-fit:contain}.video-controls-overlay{display:none}.camera-control-label{font-size:11px}.camera-controls .custom-select{min-width:90px}.camera-controls .custom-select-trigger{padding:4px 8px;font-size:11px}.camera-submit-btn{padding:4px 10px;font-size:11px}.offset-duration-container{margin-top:8px;padding:6px 0}.telemetry-charts-grid{padding:8px;gap:8px}.telemetry-chart-header{padding:6px 10px}.telemetry-chart-title{font-size:12px}.telemetry-chart-container{padding:0 4px 4px}}.time-diff-inline{display:flex;align-items:center;gap:12px}.time-diff-title{font-size:12px;font-weight:600;color:#f7b047;white-space:nowrap}.time-diff-inputs{display:flex;align-items:center;gap:2px}.time-input{width:36px;padding:4px 2px;background:#ffffff1a;border:1px solid rgba(100,130,160,.3);border-radius:4px;font-family:Consolas,Monaco,monospace;font-size:14px;font-weight:600;text-align:center;color:#f7b047;outline:none;transition:all .2s ease;-moz-appearance:textfield}.time-input-ms{width:44px}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-input:focus{border-color:#3b82f6;background:#3b82f61a}.time-separator{font-family:Consolas,Monaco,monospace;font-size:14px;font-weight:600;color:#f7b047}.duration-btn{background:#f7b047;border:1px solid #f7b047;border-radius:6px;color:#000;padding:6px 16px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.duration-btn:hover{background:#e5a03d}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f1419,#1a242d,#0f1419);padding:20px}.login-box{width:100%;max-width:400px;background:#171d25;border-radius:16px;padding:40px;border:1px solid rgba(100,130,160,.2);box-shadow:0 20px 60px #00000080}.login-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:32px}.login-logo{width:48px;height:48px}.login-logo svg{width:100%;height:100%}.login-brand{display:flex;flex-direction:column}.login-brand .brand-name{font-size:20px;font-weight:700;color:#fff;letter-spacing:2px}.login-brand .brand-sub{font-size:12px;font-weight:500;color:#f7b047;letter-spacing:3px}.login-title{font-size:24px;font-weight:600;color:#fff;margin:0 0 8px;text-align:center}.login-subtitle{font-size:14px;color:#94a3b8;margin:0 0 32px;text-align:center}.login-form{display:flex;flex-direction:column;gap:20px}.login-error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#f87171;padding:12px 16px;border-radius:8px;font-size:14px;text-align:center}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:500;color:#e2e8f0}.form-group input{padding:12px 16px;background:#ffffff0d;border:1px solid rgba(100,130,160,.3);border-radius:8px;font-size:14px;color:#fff;outline:none;transition:all .2s ease}.form-group input::placeholder{color:#64748b}.form-group input:focus{border-color:#f7b047;background:#f7b0470d}.login-buttons{display:flex;gap:12px;margin-top:8px}.login-btn{flex:1;padding:14px 24px;background:#f7b047;border:none;border-radius:8px;font-size:16px;font-weight:600;color:#000;cursor:pointer;transition:all .2s ease}.login-btn:hover{background:#e5a03d}.login-btn:disabled{background:#4b5563;color:#9ca3af;cursor:not-allowed}.login-btn.sso-btn{background:transparent;border:2px solid #f7b047;color:#f7b047}.login-btn.sso-btn:hover{background:#f7b0471a}.login-btn.sso-btn:disabled{border-color:#4b5563;color:#9ca3af;background:transparent}.login-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px;color:#94a3b8}.login-spinner{width:40px;height:40px;border:3px solid rgba(247,176,71,.2);border-top-color:#f7b047;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}