:root{--color-surface:#0f1419;--color-surface-alt:#1a1f2b;--color-text:#e8eaf0;--color-text-secondary:#a0a8c0;--color-accent:#d4af37;--color-accent-light:#e8c547;--color-success:#10b981;--color-error:#ef4444;--color-border:#ffffff1a}.configurator-container{background:var(--color-surface);height:100vh;color:var(--color-text);grid-template-columns:1fr 380px;gap:24px;padding:24px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;display:grid}.configurator-viewport{border:1px solid var(--color-border);background:linear-gradient(135deg,#0f1419 0%,#1a1f2b 100%);border-radius:16px;position:relative;overflow:hidden;box-shadow:0 8px 32px #0006}.configurator-viewport canvas{display:block;width:100%!important;height:100%!important}.configurator-sidebar{flex-direction:column;gap:20px;display:flex;overflow-y:auto}.configurator-sidebar h2{letter-spacing:-.01em;color:var(--color-text);margin:0;font-size:20px;font-weight:600}.component-pickers{flex-direction:column;gap:12px;display:flex}.component-picker{background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:12px;flex-direction:column;gap:10px;padding:16px;transition:all .2s;display:flex}.component-picker:focus-within{border-color:var(--color-accent);background:#1a1f2bcc;box-shadow:0 0 0 3px #d4af371a}.component-picker label{text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-secondary);font-size:12px;font-weight:700;display:block}.component-picker select{background:var(--color-surface);color:var(--color-text);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d4af37' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;border:1px solid #d4af374d;border-radius:8px;padding:12px 32px 12px 14px;font-size:14px;font-weight:500;transition:all .2s}.component-picker select:hover{border-color:var(--color-accent);background-color:#0f1419cc}.component-picker select:focus{border-color:var(--color-accent);outline:none;box-shadow:0 0 0 3px #d4af371a}.component-picker select option{background:var(--color-surface-alt);color:var(--color-text);padding:8px}.component-info{border-top:1px solid var(--color-border);flex-direction:column;gap:6px;padding:12px 0;display:flex}.component-name{color:var(--color-text-secondary);font-size:13px;font-weight:500}.component-price{color:var(--color-accent);letter-spacing:-.01em;font-size:16px;font-weight:700}.in-stock{color:var(--color-success);margin-top:4px;font-size:12px;font-weight:600}.pricing-sidebar{background:var(--color-surface-alt);border:1px solid var(--color-border);border-top:2px solid var(--color-accent);border-radius:12px;flex-direction:column;gap:16px;padding:20px;transition:all .3s;display:flex}.pricing-sidebar.loading{opacity:.6;pointer-events:none}.pricing-sidebar h3{color:var(--color-text);letter-spacing:-.01em;margin:0;font-size:16px;font-weight:700}.pricing-row{color:var(--color-text-secondary);justify-content:space-between;align-items:center;gap:12px;font-size:14px;display:flex}.pricing-row span:first-child{flex:1;font-weight:500}.pricing-row span:last-child{text-align:right;min-width:80px;font-weight:600}.pricing-row.total{border-top:2px solid var(--color-border);color:var(--color-text);margin-top:4px;padding-top:14px;font-size:16px;font-weight:700}.pricing-row.total span:last-child{color:var(--color-accent);letter-spacing:-.02em;font-size:20px}.within-budget{color:var(--color-success)!important}.over-budget{color:var(--color-error)!important}.budget-indicator{flex-direction:column;gap:10px;margin:4px 0;padding:12px 0;display:flex}.budget-bar{background:#ffffff14;border-radius:3px;height:6px;overflow:hidden;box-shadow:inset 0 1px 2px #0006}.budget-used{background:linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%);height:100%;transition:width .4s cubic-bezier(.25,.46,.45,.94);box-shadow:0 0 12px #d4af374d}.budget-text{color:var(--color-text-secondary);letter-spacing:.05em;text-transform:uppercase;font-size:13px;font-weight:700}.cta-button{background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);color:#000;cursor:pointer;letter-spacing:.01em;text-transform:uppercase;border:none;border-radius:8px;margin-top:8px;padding:14px 16px;font-size:15px;font-weight:700;transition:all .3s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden;box-shadow:0 4px 15px #d4af3733}.cta-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #d4af3766}.cta-button:active{transform:translateY(0);box-shadow:0 2px 8px #d4af374d}.cta-button:disabled{opacity:.5;cursor:not-allowed;transform:none}@media (max-width:1280px){.configurator-container{grid-template-columns:1fr;gap:20px;height:auto}.configurator-viewport{height:600px}.configurator-sidebar{max-height:400px}}@media (max-width:768px){.configurator-container{gap:16px;padding:16px}.configurator-viewport{height:500px}.component-picker{gap:8px;padding:12px}.pricing-sidebar{padding:16px}}.configurator-sidebar::-webkit-scrollbar{width:6px}.configurator-sidebar::-webkit-scrollbar-track{background:0 0}.configurator-sidebar::-webkit-scrollbar-thumb{background:#d4af3733;border-radius:3px;transition:background .2s}.configurator-sidebar::-webkit-scrollbar-thumb:hover{background:#d4af3766}
