.preview-panel{flex:1 1 30%;display:flex;flex-direction:column;background-color:#1e1e1e;min-width:200px;overflow:hidden}.preview-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background-color:#252526;border-bottom:1px solid #3c3c3c}.preview-header h3{font-size:13px;font-weight:500;color:#ccc;margin:0}.add-client-btn{padding:4px 8px;font-size:11px;background-color:#0e639c;color:#fff;border:none;border-radius:3px;cursor:pointer;transition:background-color .2s}.add-client-btn:hover:not(:disabled){background-color:#17b}.add-client-btn:disabled{background-color:#3c3c3c;color:gray;cursor:not-allowed}.preview-content{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden;background-color:#111}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:100;color:#fff;font-size:14px}.loading-spinner{width:32px;height:32px;border:3px solid #333;border-top-color:#4ec9b0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sandbox-grid-container{width:100%;height:100%;background-color:#111;box-sizing:border-box;margin:0;padding:0;overflow:hidden}.console-panel{height:150px;min-height:100px;max-height:300px;background-color:#1e1e1e;border-top:1px solid #3c3c3c;overflow-y:auto;font-family:Consolas,Monaco,monospace;font-size:12px;padding:8px}.console-panel .log-entry{padding:2px 0;white-space:pre-wrap;word-break:break-all}.console-panel .log-entry.info{color:#4ec9b0}.console-panel .log-entry.warn{color:#dcdcaa}.console-panel .log-entry.error{color:#f14c4c}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#1e1e1e;color:#d4d4d4}#app{width:100%;height:100%;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;background-color:#252526;border-bottom:1px solid #3c3c3c;height:48px;flex-shrink:0}.header h1{font-size:18px;font-weight:500;color:#569cd6}.toolbar-actions{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:2px}.toolbar-item{display:flex;align-items:center}.toolbar-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background:transparent;border:none;border-radius:4px;color:#d4d4d4;cursor:pointer;font-size:13px;transition:background-color .15s,color .15s}.toolbar-btn:hover{background-color:#3c3c3c;color:#fff}.toolbar-btn:active{background-color:#4c4c4c}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.toolbar-btn svg{flex-shrink:0}#run-btn{background-color:#0e639c;color:#fff}#run-btn:hover{background-color:#17b}.toolbar-btn-danger:hover{background-color:#5a1d1d;color:#f48771}.toolbar-divider{width:1px;height:24px;background-color:#3c3c3c;margin:0 8px}.header-actions{display:flex;gap:8px;align-items:center}.btn{padding:8px 16px;font-size:13px;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}.btn-primary{background-color:#0e639c;color:#fff}.btn-primary:hover{background-color:#17b}.btn-secondary{background-color:#3c3c3c;color:#d4d4d4}.btn-secondary:hover{background-color:#4c4c4c}.export-dropdown-container{position:relative}.export-dropdown{position:absolute;top:100%;right:0;margin-top:4px;background-color:#252526;border:1px solid #3c3c3c;border-radius:6px;box-shadow:0 4px 12px #0006;z-index:1000;min-width:240px;overflow:hidden}.export-dropdown-item{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 16px;background:none;border:none;cursor:pointer;text-align:left;color:#d4d4d4;transition:background-color .15s}.export-dropdown-item:hover{background-color:#094771}.export-dropdown-item:not(:last-child){border-bottom:1px solid #3c3c3c}.export-icon{font-size:20px;line-height:1}.export-label{display:flex;flex-direction:column;gap:2px}.export-label strong{font-size:13px;font-weight:500;color:#fff}.export-label small{font-size:11px;color:#9d9d9d}.main-container{display:flex;flex:1;overflow:hidden}.editor-panel{flex:1 1 70%;display:flex;flex-direction:column;overflow:hidden;min-width:300px}.gutter{width:4px;background-color:#3c3c3c;cursor:col-resize;flex-shrink:0;transition:background-color .15s}.gutter:hover,.gutter.active{background-color:#0e639c}.status-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;background-color:#007acc;color:#fff;font-size:12px;height:22px;flex-shrink:0}.status-item{display:flex;align-items:center;gap:4px}