:root{--bg-primary: #0e0e10;--bg-secondary: #151518;--bg-tertiary: #1c1c20;--text-primary: #f0f0f0;--text-secondary: #888899;--accent: #1a6aff;--accent-glow: rgba(26, 106, 255, .3);--border: #222228;--border-light: #2a2a32;--font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;--radius: 6px;--ease-spring: cubic-bezier(.16, 1, .3, 1)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid var(--border);background:var(--bg-primary);z-index:10;flex-shrink:0;height:52px}.header-logo{display:flex;align-items:center;gap:8px;-webkit-user-select:none;user-select:none}.logo-icon{font-size:18px;color:var(--accent)}.logo-text{font-size:14px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-primary)}.header-build{display:flex;align-items:center}.header-build-name{font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}.main-layout{display:flex;flex:1;overflow:hidden}.canvas-wrapper{flex:1;position:relative;overflow:hidden;border-right:1px solid var(--border)}.canvas-wrapper canvas{display:block}.config-wrapper{width:380px;flex-shrink:0;overflow:hidden;background:var(--bg-secondary);position:relative}.config-scroll{height:calc(100vh - 124px);overflow-y:auto;padding:20px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.config-scroll::-webkit-scrollbar{width:4px}.config-scroll::-webkit-scrollbar-track{background:transparent}.config-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.config-panel{display:flex;flex-direction:column;gap:4px}.config-section{padding:12px 0;border-top:1px solid var(--border)}.config-section:first-child{border-top:none}.config-label{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:10px}.segmented-control{display:flex;gap:0;background:var(--bg-tertiary);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-light)}.seg-btn{flex:1;background:transparent;border:none;color:var(--text-secondary);padding:8px 12px;font-family:var(--font-family);font-size:11px;font-weight:500;letter-spacing:.05em;cursor:pointer;transition:all .2s ease;position:relative;white-space:nowrap}.seg-btn.active{background:var(--accent);color:#fff;font-weight:600}.seg-btn:not(:last-child){border-right:1px solid var(--border-light)}.seg-btn:hover:not(.active){background:#ffffff0d}.color-grid{display:flex;gap:8px;flex-wrap:wrap}.color-swatch{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;outline:none;transition:all .2s ease}.color-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow),0 0 12px var(--accent-glow)}.gradient-swatch{width:32px;height:32px}.option-row{display:flex;gap:6px;flex-wrap:wrap}.option-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--radius);color:var(--text-secondary);padding:8px 14px;font-family:var(--font-family);font-size:11px;font-weight:500;cursor:pointer;transition:all .2s ease}.option-btn.active{border-color:var(--accent);color:var(--text-primary);background:#1a6aff1a}.option-btn:hover:not(.active){border-color:var(--text-secondary)}.option-label{font-size:11px;font-weight:500}.option-price{font-size:9px;color:var(--accent);font-weight:600;opacity:.8}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;cursor:pointer;transition:all .15s ease;border-bottom:1px solid var(--border)}.toggle-row:last-child{border-bottom:none}.toggle-left{display:flex;align-items:center;gap:10px}.toggle-switch{width:32px;height:18px;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:9px;position:relative;transition:all .2s ease}.toggle-switch.on{background:var(--accent);border-color:var(--accent)}.toggle-knob{width:14px;height:14px;background:var(--text-primary);border-radius:50%;position:absolute;top:1px;left:1px;transition:all .2s ease}.toggle-switch.on .toggle-knob{left:15px}.toggle-label{font-size:12px;font-weight:500;color:var(--text-primary)}.toggle-price{font-size:11px;color:var(--accent);font-weight:600}.slider-row{display:flex;align-items:center;gap:10px}.slider-icon{font-size:16px}.time-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:var(--bg-tertiary);border-radius:2px;outline:none;border:1px solid var(--border-light)}.time-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-primary);box-shadow:0 0 0 1px var(--accent-glow)}.time-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-primary)}.build-name-input{width:100%;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--radius);padding:10px 14px;color:var(--text-primary);font-family:var(--font-family);font-size:13px;font-weight:500;outline:none;transition:border-color .2s ease}.build-name-input:focus{border-color:var(--accent)}.build-name-input::placeholder{color:var(--text-secondary);opacity:.5}.summary-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--border);background:var(--bg-primary);flex-shrink:0;height:72px;z-index:10;gap:20px}.summary-left{flex:1;min-width:0}.summary-name-input{background:transparent;border:none;color:var(--text-primary);font-family:var(--font-family);font-size:14px;font-weight:600;letter-spacing:.02em;outline:none;width:100%;padding:4px 0}.summary-name-input::placeholder{color:var(--text-secondary);opacity:.5}.summary-center{display:flex;align-items:baseline;gap:6px}.summary-price-label{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-secondary)}.summary-price{font-size:24px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}.summary-right{display:flex;gap:8px}.btn{padding:10px 20px;border-radius:var(--radius);font-family:var(--font-family);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:none;transition:all .2s ease}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#1555d0;box-shadow:0 0 12px var(--accent-glow)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-light)}.btn-secondary:hover{border-color:var(--text-secondary)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:12px;padding:32px;max-width:400px;width:90%}.modal-title{font-size:20px;font-weight:700;letter-spacing:.05em;margin-bottom:20px;color:var(--text-primary)}.modal-specs{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.spec-line{font-size:13px;color:var(--text-secondary);display:flex;align-items:center}.spec-line:before{content:"";display:inline-block;width:4px;height:4px;background:var(--accent);border-radius:50%;margin-right:10px;flex-shrink:0}.modal-actions{display:flex;gap:10px;justify-content:flex-end}@media (max-width: 768px){.app-header{padding:10px 16px;height:44px}.main-layout{flex-direction:column}.canvas-wrapper{height:55vh;border-right:none;border-bottom:1px solid var(--border);flex:none}.config-wrapper{width:100%;flex:1}.config-scroll{height:auto;max-height:calc(45vh - 72px);padding:16px}.summary-bar{padding:12px 16px;height:auto;flex-wrap:wrap;gap:10px}.summary-name-input{font-size:12px}.summary-price{font-size:18px}.summary-right{width:100%;justify-content:flex-end}}