body { margin: 0; background: #333; font-family: sans-serif; height: 100vh; overflow: hidden; }

.main-app { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.open-3d-btn { margin-top: 20px; padding: 15px 30px; background: #00d2ff; border: none; font-size: 18px; font-weight: bold; cursor: pointer; border-radius: 5px; }

/* Modal */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 100; display: flex; justify-content: center; align-items: center; }
.hidden { display: none !important; }

.studio-window { width: 900px; height: 600px; background: #111; display: flex; border: 1px solid #444; box-shadow: 0 0 50px rgba(0,0,0,0.8); }

/* Left Side: The 3D Render */
#viewport-3d { flex: 2; background: radial-gradient(#222, #000); overflow: hidden; cursor: grab; }

/* Right Side: Controls */
.controls-3d { flex: 1; background: #1a1a1a; padding: 20px; display: flex; flex-direction: column; border-left: 1px solid #333; }
.controls-3d h3 { color: #fff; margin-top: 0; border-bottom: 2px solid #00d2ff; padding-bottom: 10px; display: inline-block; }

.control-group { margin-bottom: 15px; }
.control-group label { display: block; color: #aaa; font-size: 12px; margin-bottom: 5px; }
input[type="text"], input[type="range"] { width: 100%; padding: 5px; background: #333; border: 1px solid #555; color: white; }

.actions { margin-top: auto; display: flex; gap: 10px; }
.actions button { flex: 1; padding: 10px; border: none; cursor: pointer; font-weight: bold; }
.apply-btn { background: #00d2ff; color: #000; }
.cancel-btn { background: #444; color: #fff; }