.viewport{border:1px solid #444;border-radius:8px;overflow:hidden;cursor:pointer;position:relative;background:#0a0a0a}.viewport.active{border:2px solid #007acc}.viewport-label{position:absolute;top:8px;left:8px;background:#000000b3;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;z-index:10}.viewport-canvas{width:100%;height:100%}.viewport-small{width:200px;height:150px}.viewport-medium{width:300px;height:225px}.viewport-large{width:100%;height:100%}.viewport-manager{height:100vh;background:#1a1a1a;display:flex;flex-direction:column}.viewport-controls{padding:10px;background:#2d2d2d;border-bottom:1px solid #444;display:flex;gap:10px;align-items:center}.control-label{color:#fff;margin-right:10px}.layout-button{padding:8px 16px;background:#3d3d3d;border:none;border-radius:4px;color:#fff;cursor:pointer;transition:background .2s}.layout-button.active{background:#007acc}.layout-button:hover{background:#4d4d4d}.layout-button.active:hover{background:#08d}.active-indicator{margin-left:auto;color:#fff;font-size:14px}.viewports-grid{flex:1;overflow:hidden}.viewports-grid-single{display:grid;grid-template-columns:1fr;gap:10px;padding:10px;height:100%}.viewports-grid-quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;padding:10px;height:100vh}.viewports-grid-default{display:flex;flex-direction:column;gap:10px;padding:10px}.warning-message{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:#ff9800e6;color:#fff;padding:8px 16px;border-radius:4px;font-size:12px}.object-loader-file-input{display:none}.object-loader-button{width:100%;padding:10px;margin-bottom:10px;border:none;border-radius:5px;cursor:pointer;color:#fff}.object-loader-button-primary{background:#007acc}.object-loader-button-secondary{background:#555}.object-loader-button:hover{opacity:.9}.object-loader-info{font-size:12px;color:#888;margin-top:10px;text-align:center}.camera-manager{color:#fff}.section{margin-bottom:20px}.section-title{margin-bottom:10px;color:#ccc;font-size:14px}.grid-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grid-button{padding:8px;background:#3d3d3d;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:12px;transition:background .2s}.grid-button:hover:not(.disabled){background:#4d4d4d}.grid-button.disabled{opacity:.5;cursor:not-allowed}.input-group{display:flex;gap:8px}.text-input{flex:1;padding:8px;background:#3d3d3d;border:1px solid #555;border-radius:4px;color:#fff;font-size:12px}.text-input:focus{outline:none;border-color:#007acc}.add-button{padding:8px 12px;background:#007acc;border:none;border-radius:4px;color:#fff;cursor:pointer;transition:background .2s}.add-button:hover:not(.disabled){background:#08d}.add-button.disabled{background:#555;cursor:not-allowed}.empty-state{color:#888;font-size:12px;text-align:center}.camera-list{display:flex;flex-direction:column;gap:8px}.camera-item{display:flex;justify-content:space-between;align-items:center;padding:8px;background:#3d3d3d;border-radius:4px;font-size:12px}.camera-name{flex:1}.camera-actions{display:flex;gap:5px}.view-button{padding:4px 8px;background:#007acc;border:none;border-radius:3px;color:#fff;cursor:pointer;font-size:11px}.view-button:hover{background:#08d}.remove-button{padding:4px 8px;background:#d32f2f;border:none;border-radius:3px;color:#fff;cursor:pointer;font-size:11px}.remove-button:hover{background:#e53935}.advanced-camera-controls{background:#2d2d2d;border-radius:8px;margin-bottom:15px;overflow:hidden}.controls-header{padding:12px 15px;background:#3d3d3d;cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;outline:none}.controls-header:focus{outline:2px solid #007acc}.controls-header h4{margin:0;color:#fff;font-size:14px}.expand-icon{transition:transform .2s;color:#ccc}.expand-icon.expanded{transform:rotate(180deg)}.controls-content{padding:15px}.control-group{margin-bottom:20px}.control-group:last-child{margin-bottom:0}.group-label{display:block;color:#ccc;font-size:12px;margin-bottom:10px;font-weight:600}.vector-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.vector-control{display:flex;flex-direction:column;gap:4px}.vector-control label{color:#aaa;font-size:11px;text-align:center}.vector-control input{padding:6px;background:#3d3d3d;border:1px solid #555;border-radius:4px;color:#fff;text-align:center}.setting-control{display:flex;align-items:center;gap:10px;margin-bottom:8px}.setting-control label{color:#aaa;font-size:12px;min-width:80px}.setting-control input[type=range]{flex:1}.setting-control input[type=number]{width:60px;padding:4px;background:#3d3d3d;border:1px solid #555;border-radius:4px;color:#fff}.setting-control input[type=color]{width:40px;height:30px;border:none;border-radius:4px;cursor:pointer}.toggle-control label{display:flex;align-items:center;gap:8px;color:#aaa;font-size:12px;cursor:pointer}.preset-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset-button{padding:8px;background:#007acc;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:11px;transition:background .2s}.preset-button:hover{background:#08d}.camera-animator{background:#2d2d2d;border-radius:8px;margin-bottom:15px;overflow:hidden}.animator-header{padding:12px 15px;background:#3d3d3d;cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;outline:none}.animator-header:focus{outline:2px solid #007acc}.animator-header h4{margin:0;color:#fff;font-size:14px}.animator-content{padding:15px}.camera-selection{display:flex;flex-direction:column;gap:8px;max-height:150px;overflow-y:auto}.camera-checkbox{display:flex;align-items:center;gap:8px;color:#aaa;font-size:12px;cursor:pointer;padding:4px;border-radius:4px;transition:background .2s}.camera-checkbox:hover{background:#3d3d3d}.start-animation-button{width:100%;padding:12px;background:#007acc;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;transition:background .2s}.start-animation-button:disabled{background:#555;cursor:not-allowed}.start-animation-button:hover:not(:disabled){background:#08d}.animation-controls{text-align:center}.animation-status{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:15px;color:#4caf50}.status-indicator{width:8px;height:8px;background:#4caf50;border-radius:50%;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.stop-animation-button{padding:10px 20px;background:#d32f2f;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px}.stop-animation-button:hover{background:#e53935}.controls-panel{color:#fff;height:100%;display:flex;flex-direction:column}.controls-panel-title{margin-bottom:20px;text-align:center}.controls-panel-tabs{display:flex;margin-bottom:20px;background:#3d3d3d;border-radius:8px;padding:4px}.controls-panel-tab{flex:1;padding:8px;background:transparent;border:none;border-radius:6px;color:#fff;cursor:pointer;transition:background .2s}.controls-panel-tab.active{background:#007acc}.controls-panel-tab:hover{background:#4d4d4d}.controls-panel-tab.active:hover{background:#08d}.controls-panel-content{flex:1;overflow:auto}.controls-panel-section-title{margin-bottom:15px}.controls-panel-animation-guide{padding:15px;background:#2d2d2d;border-radius:8px;margin-top:15px}.controls-panel-animation-guide h4{margin-bottom:10px}.controls-panel-animation-guide p{font-size:12px;color:#aaa;line-height:1.4}.controls-panel-stats{padding:15px;background:#2d2d2d;border-radius:8px;font-size:12px;margin-top:20px}.controls-panel-stat-row{display:flex;justify-content:space-between}.controls-panel-stat-row+.controls-panel-stat-row{margin-top:5px}.app-container{display:flex;height:100vh;background-color:#1a1a1a}.app-main-viewport{flex:1}.app-controls-panel{width:300px;background:#2d2d2d;padding:20px;border-left:1px solid #444;overflow:auto}