:root{--card-bg:#2d2d2d;--border-color:#444;--accent-color:#00ff9d;--text-color:#fff;--background-color:#1a1a1a}[data-theme=light]{--card-bg:#f5f5f5;--border-color:#ccc;--text-color:#333;--background-color:#fff}.builder-container{max-width:1200px;margin:0 auto;padding:40px 20px;background-color:var(--background-color);color:var(--text-color)}.build-steps{display:flex;justify-content:space-between;margin-bottom:30px}.step{width:18%;padding:15px;text-align:center;background:#2d2d2d;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;opacity:.3;transition:all .3s ease;cursor:pointer}.step.active{opacity:1;transform:scale(1.05);border:2px solid var(--accent-color)}.component-category{display:none;animation:slideIn .5s ease-out}.component-category.active{display:block}.component-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:30px}.component-card{background-color:var(--card-bg);border:1px solid var(--border-color);padding:20px;border-radius:8px;cursor:pointer;transition:all .3s ease;position:relative}.component-card:focus{outline:2px solid var(--accent-color);outline-offset:2px}.component-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,255,157,.1)}.component-card.selected{border:2px solid var(--accent-color);background:var(--background-color);color:var(--accent-color)}.component-image{width:100%;height:200px;object-fit:contain;margin-bottom:15px}.navigation-buttons{margin-top:30px;display:flex;justify-content:space-between;gap:15px}.summary-container{display:none;animation:fadeIn .5s ease-out}#build-summary{margin-top:20px}.summary-component{display:flex;align-items:center;margin-bottom:20px;padding:15px;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:8px}.summary-image{width:100px;height:100px;object-fit:contain;margin-right:20px;contain:lazy}.summary-details{flex:1;margin-left:20px}.summary-details h3{margin:0 0 5px;font-size:1.2em}.summary-details p{margin:0 0 5px;color:#ccc}.summary-actions{margin-top:30px;display:flex;gap:15px;flex-wrap:wrap;justify-content:center}.button{padding:15px 30px;border:none;border-radius:8px;background-color:#3d3d3d;color:var(--text-color);cursor:pointer;transition:background-color .3s ease;display:inline-flex;align-items:center;gap:8px}.button:hover{background-color:#4d4d4d}.button:focus{outline:2px solid var(--accent-color);outline-offset:2px}.checkout-btn{background-color:var(--accent-color);color:#1a1a1a}.checkout-btn:hover{background-color:#00e68a}.btn-secondary{background-color:#3d3d3d;border:1px solid var(--accent-color)}.btn-secondary:hover{background-color:#4d4d4d}.next-btn,.prev-btn{padding:15px 30px;border:none;border-radius:8px;background-color:#3d3d3d;color:var(--text-color);cursor:pointer;transition:background-color .3s ease;display:inline-flex;align-items:center;gap:8px}.next-btn:hover,.prev-btn:hover{background-color:#4d4d4d}.next-btn:focus,.prev-btn:focus{outline:2px solid var(--accent-color);outline-offset:2px}.next-btn:disabled,.prev-btn:disabled{opacity:.5;cursor:not-allowed}#compatibility-messages{margin:20px 0;padding:15px;background:rgba(255,85,85,.15);border:1px solid #f55;border-radius:8px;color:#f55;font-weight:700}.compatibility-message.warning{margin-bottom:8px}.price-tag{color:var(--accent-color);font-weight:700;margin-top:10px}.total-price{font-size:1.5em;text-align:right;margin-top:30px}.quantity-controls{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:5px;background:rgba(0,255,157,.1);border-radius:4px}.qty-btn{background:#3d3d3d;color:var(--text-color);border:none;padding:5px 10px;cursor:pointer;font-size:1.2em}.qty-btn:hover{background:#4d4d4d}.qty-value{font-weight:700;min-width:20px;text-align:center}@media (max-width:768px){.builder-container{padding:20px 10px}.component-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.component-image{height:150px}.summary-image{width:80px;height:80px}.summary-details h3{font-size:1em}.summary-details p{font-size:.9em}.summary-actions{flex-direction:column}.summary-actions .button{width:100%}.total-price{font-size:1.2em}.navigation-buttons{flex-direction:column;gap:10px}.next-btn,.prev-btn{width:100%}}@media (max-width:600px){.build-steps{flex-direction:column}.step{width:100%;margin-bottom:10px;padding:12px}.component-grid{grid-template-columns:1fr}.component-image{height:120px}.summary-image{width:60px;height:60px}.summary-details h3{font-size:.9em}.summary-details p{font-size:.8em}.total-price{font-size:1em}}@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}