*{margin:0;padding:0;box-sizing:border-box}html{height:100%}#app{height:100vh;width:100vw}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);height:100vh;margin:0;padding:0;color:#333;overflow:hidden}.container{display:flex;height:100vh;width:100vw;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;position:fixed;top:0;left:0;flex-direction:row;align-items:stretch}.controls{width:350px;padding:30px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-right:1px solid #e0e0e0;overflow-y:auto;height:100%;display:flex;flex-direction:column}.controls h1{font-size:24px;margin-bottom:30px;color:#2c3e50;text-align:center;font-weight:600}.control-group{margin-bottom:25px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000000d;transition:transform .2s ease}.control-group:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0000001a}.control-group label{display:block;margin-bottom:10px;font-weight:600;color:#34495e;font-size:14px}.control-group input[type=range]{width:100%;height:8px;border-radius:4px;background:#e0e0e0;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;box-shadow:0 2px 4px #0003;transition:transform .2s ease}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.control-group input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.info{margin-top:30px;padding:20px;background:#3498db1a;border-radius:12px;border-left:4px solid #3498db}.info p{margin-bottom:8px;font-size:13px;color:#2c3e50;line-height:1.4}.scene-container{flex:1;position:relative;background:#f8f9fa;height:100%;min-height:0}#scene{width:100%;height:100%;display:block;position:absolute;top:0;left:0}@media (max-width: 768px){.container{flex-direction:column;height:auto}.controls{width:100%;max-height:300px}.scene-container{height:400px}.right-panel{width:100%;max-height:300px;overflow-y:auto}}.right-panel{width:300px;padding:30px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-left:1px solid #e0e0e0;overflow-y:auto;height:100%;display:flex;flex-direction:column}.panel-section{margin-bottom:30px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000000d}.panel-section h3{font-size:16px;margin-bottom:15px;color:#2c3e50;font-weight:600}.material-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.material-btn{padding:10px 15px;border:2px solid #e0e0e0;border-radius:8px;background:#fff;color:#333;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.material-btn:hover{border-color:#667eea;transform:translateY(-1px)}.material-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.specs{display:flex;flex-direction:column;gap:12px}.spec-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0}.spec-item:last-child{border-bottom:none}.spec-label{font-size:13px;color:#666;font-weight:500}.spec-value{font-size:14px;color:#2c3e50;font-weight:600}.view-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.view-btn{padding:8px 12px;border:2px solid #e0e0e0;border-radius:6px;background:#fff;color:#333;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease}.view-btn:hover{border-color:#667eea;transform:translateY(-1px)}.view-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.export-options{display:flex;flex-direction:column;gap:10px}.export-btn{padding:12px 16px;border:none;border-radius:8px;background:linear-gradient(135deg,#28a745,#20c997);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.export-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #28a7454d}.export-btn:last-child{background:linear-gradient(135deg,#6c757d,#495057)}.export-btn:last-child:hover{box-shadow:0 4px 8px #6c757d4d}.module-control{margin-bottom:15px;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}.module-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:10px 15px;font-size:12px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s ease}.module-header:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}.module-header .module-title{display:flex;align-items:center;gap:8px}.module-header .module-number{background:#fff3;padding:2px 6px;border-radius:4px;font-size:10px}.module-content{padding:15px;background:#fff;display:none}.module-content.active{display:block}.module-dimensions{display:flex;flex-direction:column;gap:10px}.module-dimension{display:flex;flex-direction:column;gap:5px}.module-dimension label{font-size:11px;color:#666;font-weight:600}.module-dimension input[type=range]{width:100%;height:6px;border-radius:3px;background:#e0e0e0;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.module-dimension input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;box-shadow:0 2px 4px #0003}.module-dimension input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;color:#666}.module-counter{position:absolute;top:20px;right:20px;background:#000000b3;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:600}