:root{--space-2xs: 4px;--space-xs: 8px;--space-sm: 12px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--border-primary: var(--border, #333333)}.pkc-wizard-page,.build-wizard-section{--accent-rgb: 255, 204, 0}html.light .pkc-wizard-page,html.light .build-wizard-section{--accent-rgb: 212, 160, 0}.pkc-wizard-page{min-height:calc(100vh - 200px);padding:24px 0 80px;background:var(--bg-primary)}@media(max-width:768px){.pkc-wizard-page{padding:16px 0 60px}}.wizard-container{max-width:1200px;margin:0 auto;padding:0 24px}.wizard-page-title{margin:0 0 var(--space-md);padding-top:var(--space-lg);font-size:var(--font-size-xl, 1.5rem);line-height:1.25;color:var(--text-primary)}@media(max-width:768px){.wizard-container{padding:0 16px}}.wizard-progress-tabs{display:flex;gap:var(--space-xs);margin-bottom:var(--space-2xl);padding:var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-lg);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--text-muted) transparent}.wizard-progress-tabs::-webkit-scrollbar{height:6px}.wizard-progress-tabs::-webkit-scrollbar-track{background:transparent}.wizard-progress-tabs::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}.wizard-progress-tabs::-webkit-scrollbar-thumb:hover{background:var(--accent)}.progress-tab{display:flex;flex-direction:column;align-items:flex-start;min-width:140px;flex:1 1 0;padding:var(--space-sm);background:transparent;border:none;cursor:pointer;transition:all .2s ease;position:relative;text-align:left}.progress-tab:disabled{cursor:not-allowed;opacity:.5}.progress-tab:not(:disabled):hover{background:var(--bg-tertiary);border-radius:var(--radius-sm)}.progress-tab:not(:disabled):focus{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}.tab-header{display:flex;flex-direction:column;gap:var(--space-2xs);margin-bottom:var(--space-xs)}.tab-number{font-size:clamp(.65rem,2vw,.75rem);font-weight:600;color:var(--text-muted)}.tab-label{font-size:clamp(.75rem,2.5vw,.875rem);font-weight:600;color:var(--text-primary);line-height:1.2}.tab-value{font-size:clamp(.7rem,2vw,.8125rem);font-weight:500;color:var(--accent);margin-bottom:var(--space-xs);min-height:1.2em}.tab-progress{width:100%;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden;margin-top:auto}.tab-progress-fill{height:100%;width:0;background:var(--text-muted);transition:all .3s ease}.tab-progress-fill.filled{width:100%;background:var(--accent)}.progress-tab.active .tab-number,.progress-tab.active .tab-label{color:var(--accent)}.progress-tab.completed .tab-progress-fill{width:100%;background:var(--success)}.wizard-content{min-height:500px}.wizard-step{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.step-card{max-width:600px;margin:0 auto;padding:var(--space-2xl) var(--space-lg);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);text-align:center}.step-icon{font-size:3rem;margin-bottom:var(--space-md)}.step-title{font-size:clamp(1.5rem,5vw,1.75rem);font-weight:600;color:var(--text-primary);margin:0 0 var(--space-sm)}.step-description{font-size:clamp(.875rem,2vw,1rem);color:var(--text-secondary);margin:0 0 var(--space-xl);line-height:1.6}.budget-selector{display:flex;align-items:center;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-xl)}.budget-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--bg-tertiary);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:1.5rem;font-weight:600;color:var(--text-primary);cursor:pointer;transition:all .2s ease}.budget-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--bg-primary)}.budget-btn:focus{outline:2px solid var(--accent);outline-offset:2px}.budget-display{min-width:150px;padding:var(--space-md) var(--space-lg);background:var(--bg-primary);border:2px solid var(--accent);border-radius:var(--radius-md)}.budget-amount{font-size:1.5rem;font-weight:700;color:var(--accent)}.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-bottom:var(--space-xl)}.option-grid-3{grid-template-columns:repeat(3,1fr)}@media(max-width:768px){.option-grid-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.option-grid,.option-grid-3{grid-template-columns:1fr}}.option-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-lg);background:var(--bg-primary);border:2px solid var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s ease;text-align:center;min-height:140px}.option-card:hover{border-color:var(--accent);background:var(--bg-tertiary);transform:translateY(-2px)}.option-card:focus{outline:2px solid var(--accent);outline-offset:2px}.option-card.selected{border-color:var(--accent);background:var(--bg-tertiary);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)}.option-icon{width:48px;height:48px;margin-bottom:var(--space-sm);color:var(--accent)}.option-icon svg{width:100%;height:100%}.option-label{font-size:clamp(1rem,3vw,1.125rem);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}.option-desc{font-size:clamp(.8rem,2vw,.875rem);color:var(--text-secondary)}.wizard-nav{display:flex;justify-content:space-between;margin-top:var(--space-xl);padding-top:var(--space-lg)}.nav-spacer{flex:1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);font-size:1rem;font-weight:500;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;border:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--accent);color:var(--bg-primary)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-primary)}.btn-secondary:hover:not(:disabled){background:var(--bg-secondary);border-color:var(--text-muted)}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:1.125rem}.btn-arrow{font-size:1.25rem}.wizard-results{max-width:1000px;margin:0 auto}.generating-state{padding:var(--space-2xl) 0;text-align:center}.generating-state h2{font-size:1.5rem;color:var(--text-primary);margin:var(--space-lg) 0 var(--space-sm)}.generating-state p{color:var(--text-secondary);margin:0}.spinner{width:48px;height:48px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}.build-result{text-align:center}.result-header{margin-bottom:var(--space-2xl)}.result-icon{font-size:3rem;margin-bottom:var(--space-md)}.result-title{font-size:clamp(1.5rem,6vw,2rem);font-weight:700;color:var(--text-primary);margin:0 0 var(--space-md)}.result-description{font-size:clamp(.875rem,2vw,1rem);color:var(--text-secondary);line-height:1.6;margin:0}.result-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);margin-bottom:var(--space-2xl);text-align:left}@media(max-width:768px){.result-columns{grid-template-columns:1fr;gap:var(--space-lg)}}.component-list{padding:var(--space-lg);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg)}.list-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) 0;border-bottom:1px solid var(--border-primary)}.list-item:last-child{border-bottom:none}.list-label{font-size:clamp(.85rem,2vw,.9375rem);font-weight:500;color:var(--text-secondary)}.list-value{font-size:clamp(.85rem,2vw,.9375rem);font-weight:600;color:var(--text-primary);text-align:right}.list-total{margin-top:var(--space-md);padding-top:var(--space-md);border-top:2px solid var(--border-primary);border-bottom:none}.list-total .list-label{font-size:clamp(1rem,3vw,1.125rem);font-weight:600;color:var(--text-primary)}.list-total .list-value{font-size:clamp(1.1rem,3.5vw,1.25rem);font-weight:700;color:var(--accent)}.component-thumbnails{padding:var(--space-lg);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg)}.thumbnail-card{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top;width:calc(25% - var(--space-sm));margin:calc(var(--space-xs) / 2);padding:var(--space-sm);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);transition:all .2s ease}.thumbnail-card:hover{border-color:var(--accent);transform:translateY(-2px)}.thumbnail-image{width:60px;height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-xs);background:var(--bg-tertiary);border-radius:var(--radius-sm)}.thumbnail-image img{max-width:100%;max-height:100%;object-fit:contain}.thumbnail-label{font-size:clamp(.625rem,1.5vw,.6875rem);font-weight:600;color:var(--text-muted);text-align:center;text-transform:uppercase;letter-spacing:.05em}.thumbnail-caption{margin-top:var(--space-md);font-size:clamp(.8rem,2vw,.875rem);color:var(--text-muted);text-align:center}@media(max-width:768px){.thumbnail-card{width:calc(33.333% - var(--space-sm))}}@media(max-width:600px){.thumbnail-card{width:calc(50% - var(--space-sm))}}@media(max-width:400px){.thumbnail-card{width:calc(100% - var(--space-xs))}}.result-actions{display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap}.btn-buy{flex-direction:column;gap:var(--space-2xs)}.btn-price{font-size:.875rem;font-weight:600}.error-state{padding:var(--space-2xl) 0;text-align:center}.error-state h2{font-size:1.5rem;color:var(--error);margin:0 0 var(--space-sm)}.error-state p{color:var(--text-secondary);margin:0 0 var(--space-lg)}html.light .step-card,html.light .component-list,html.light .component-thumbnails{box-shadow:var(--shadow-sm)}html.light .option-card:hover,html.light .thumbnail-card:hover{box-shadow:var(--shadow-md)}html.light .wizard-progress-tabs{box-shadow:var(--shadow-sm)}html.light .budget-btn{background:var(--bg-secondary)}html.light .budget-btn:hover{background:var(--accent);color:var(--bg-primary)}html.light .btn-primary{color:var(--bg-primary)}html.light .btn-secondary{background:var(--bg-primary)}@media(max-width:640px){.step-card{padding:var(--space-xl) var(--space-md)}.option-card{padding:var(--space-md);min-height:120px}.wizard-nav{flex-direction:column;gap:var(--space-md)}.wizard-nav .btn{width:100%}.result-actions{flex-direction:column}.result-actions .btn{width:100%}}@media(max-width:480px){.budget-selector{gap:var(--space-sm)}.budget-btn{width:40px;height:40px;font-size:clamp(1.125rem,3vw,1.5rem)}.budget-display{min-width:120px;padding:var(--space-sm) var(--space-md)}.budget-amount{font-size:clamp(1.125rem,3vw,1.5rem)}}.option-card:focus-visible,.budget-btn:focus-visible,.progress-tab:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(prefers-contrast:high){.option-card,.step-card,.component-list,.component-thumbnails{border-width:2px}.option-card.selected{border-width:3px}}@media print{.wizard-progress-tabs,.wizard-nav,.result-actions{display:none!important}.wizard-results,.result-columns{page-break-inside:avoid}}.wizard-uitleg{max-width:760px;margin:48px auto 0;padding:0 16px;color:var(--text-secondary);line-height:1.65}.wizard-uitleg__blok+.wizard-uitleg__blok{margin-top:28px}.wizard-uitleg h2{margin:0 0 8px;font-size:1.25rem;color:var(--text-primary)}.wizard-uitleg ul{margin:0;padding-left:1.2em}.wizard-uitleg a{color:var(--brand)}