:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-tertiary: #0f3460;--accent: #e94560;--accent-secondary: #533483;--text-primary: #eee;--text-secondary: #aaa;--success: #27ae60;--warning: #f39c12;--error: #e74c3c}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg-primary);color:var(--text-primary)}.app-container{display:flex;width:100%;height:100%}.canvas-container{flex:1;height:100%;position:relative}.control-panel{width:320px;height:100%;background:var(--bg-secondary);border-left:1px solid var(--bg-tertiary);overflow-y:auto;padding:16px}.panel-section{margin-bottom:24px}.panel-section h3{font-size:14px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.slider-row{display:flex;align-items:center;margin-bottom:12px}.slider-label{width:80px;font-size:13px;color:var(--text-secondary)}.slider-input{flex:1;margin:0 12px;-webkit-appearance:none;appearance:none;height:4px;background:var(--bg-tertiary);border-radius:2px;outline:none}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer}.slider-value{width:60px;font-size:13px;text-align:right;font-family:monospace}.button{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.button-primary{background:var(--accent);color:#fff}.button-primary:hover{background:#d13550}.button-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.button-secondary:hover{background:#1a4a7a}.button-group{display:flex;gap:8px}.info-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px solid var(--bg-tertiary)}.info-label{color:var(--text-secondary)}.info-value{font-family:monospace;color:var(--text-primary)}.status-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.status-reachable{background:var(--success)}.status-unreachable{background:var(--error)}.loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-primary);z-index:1000}.loading-spinner{width:48px;height:48px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:16px;color:var(--text-secondary)}.playback-controls{display:flex;align-items:center;gap:8px;padding:12px 0}.playback-timeline{flex:1;height:4px;background:var(--bg-tertiary);border-radius:2px;position:relative;cursor:pointer}.playback-progress{height:100%;background:var(--accent);border-radius:2px}.playback-time{font-size:12px;font-family:monospace;color:var(--text-secondary);min-width:50px}.path-mode-toggle{display:flex;border-radius:4px;overflow:hidden;border:1px solid var(--bg-tertiary)}.path-mode-toggle button{flex:1;padding:8px 12px;border:none;background:var(--bg-primary);color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .2s}.path-mode-toggle button.active{background:var(--accent);color:#fff}.path-mode-toggle button:hover:not(.active){background:var(--bg-tertiary)}