:root{--hud-bg: #000000;--hud-panel-bg: rgba(24, 24, 27, .6);--hud-border: #27272a;--hud-text: #ffffff;--hud-text-muted: #a1a1aa;--hud-accent: #3b82f6}body{background-color:var(--hud-bg);color:var(--hud-text);overflow:hidden}.visualizer-container{display:grid;grid-template-columns:320px 1fr 340px;height:100vh;width:100vw}.hud-panel{background:var(--hud-panel-bg);border-right:1px solid var(--hud-border);border-left:1px solid var(--hud-border);display:flex;flex-direction:column;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10}.hud-panel-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--hud-border);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-sm);display:flex;justify-content:space-between;align-items:center}.hud-panel-content{padding:var(--space-lg);overflow-y:auto;flex:1}.hud-panel-footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--hud-border);background:#0003}.hud-left{border-left:none}.control-group{margin-bottom:var(--space-xl)}.control-label{display:block;color:var(--hud-text-muted);font-size:var(--text-xs);text-transform:uppercase;margin-bottom:var(--space-sm);font-weight:600}.vehicle-select{width:100%;background:var(--bg-card);border:1px solid var(--hud-border);color:#fff;padding:var(--space-sm);border-radius:var(--radius-md);outline:none;margin-bottom:var(--space-md)}.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.color-swatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s;position:relative}.color-swatch.active{border-color:#fff;transform:scale(1.1)}.color-swatch[data-tier=pro]:after{content:"PRO";font-size:8px;position:absolute;bottom:-15px;left:50%;transform:translate(-50%);color:var(--hud-accent)}.wheels-grid{display:flex;flex-direction:column;gap:8px}.wheel-option-item{background:#ffffff0d;border:1px solid var(--hud-border);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);cursor:pointer;transition:all .2s;font-size:var(--text-sm);display:flex;justify-content:space-between;align-items:center}.wheel-option-item:hover{background:#ffffff1a}.wheel-option-item.active{border-color:var(--hud-accent);background:#3b82f61a;color:#fff}.config-tabs{display:flex;border-bottom:1px solid var(--hud-border);margin:calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-lg)}.config-tab{flex:1;padding:var(--space-md);text-align:center;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;cursor:pointer;color:var(--hud-text-muted);transition:all .2s}.config-tab.active{color:#fff;background:#ffffff0d;border-bottom:2px solid var(--hud-accent)}.tab-content{display:none}.tab-content.active{display:block}.hud-center{position:relative;border:none;background:radial-gradient(circle at center,#1a1a1a,#000);display:flex;flex-direction:column;justify-content:center;align-items:center}.viewer-canvas{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.vehicle-image{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;transition:opacity .1s ease-in-out}.angle-nav{position:absolute;bottom:var(--space-xl);left:50%;transform:translate(-50%);display:flex;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:#000c;border-radius:99px;border:1px solid var(--hud-border)}.angle-dot{width:8px;height:8px;background:var(--hud-text-muted);border-radius:50%;cursor:pointer;transition:all .2s}.angle-dot.active{background:#fff;transform:scale(1.5)}.hud-right{border-right:none}.build-summary-card{background:#ffffff08;border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-lg)}.summary-row{display:flex;justify-content:space-between;margin-bottom:var(--space-xs);font-size:var(--text-sm)}.summary-total{border-top:1px solid var(--hud-border);padding-top:var(--space-sm);margin-top:var(--space-sm);font-weight:700;font-size:var(--text-lg);color:var(--hud-accent)}.action-buttons{display:flex;flex-direction:column;gap:var(--space-md)}.btn-viz{width:100%;padding:var(--space-md);border-radius:var(--radius-md);font-weight:600;cursor:pointer;border:none;transition:all .2s}.btn-viz-primary{background:var(--hud-accent);color:#fff}.btn-viz-primary:hover{background:#2563eb}.btn-viz-secondary{background:transparent;border:1px solid var(--hud-border);color:#fff}.btn-viz-secondary:hover{background:#ffffff1a}@media (max-width: 1024px){.visualizer-container{grid-template-columns:1fr;grid-template-rows:auto 400px auto;height:auto;overflow-y:auto}.hud-panel{border-right:none;border-left:none;border-bottom:1px solid var(--hud-border);min-height:auto}.hud-center{order:-1;height:50vh}}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);background:#00000080;color:#fff;border:1px solid rgba(255,255,255,.2);width:48px;height:48px;border-radius:50%;font-size:24px;cursor:pointer;z-index:20;transition:all .2s;display:flex;align-items:center;justify-content:center;padding-bottom:4px}.nav-arrow:hover{background:#ffffff1a;transform:translateY(-50%) scale(1.1)}.nav-prev{left:20px}.nav-next{right:20px}