: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);--accent-rgb:255,204,0}html.light{--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}@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 0.2s ease;position:relative;text-align:left}.progress-tab:disabled{cursor:not-allowed;opacity:0.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(0.65rem,2vw,0.75rem);font-weight:600;color:var(--text-muted)}.tab-label{font-size:clamp(0.75rem,2.5vw,0.875rem);font-weight:600;color:var(--text-primary);line-height:1.2}.tab-value{font-size:clamp(0.7rem,2vw,0.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 0.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 0.3s ease}@keyframes fadeIn{from{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(0.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 0.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 0.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),0.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(0.8rem,2vw,0.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 0.2s ease;border:none}.btn:disabled{opacity:0.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 0.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(0.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(0.85rem,2vw,0.9375rem);font-weight:500;color:var(--text-secondary)}.list-value{font-size:clamp(0.85rem,2vw,0.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 0.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(0.625rem,1.5vw,0.6875rem);font-weight:600;color:var(--text-muted);text-align:center;text-transform:uppercase;letter-spacing:0.05em}.thumbnail-caption{margin-top:var(--space-md);font-size:clamp(0.8rem,2vw,0.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:0.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:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.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{page-break-inside:avoid}.result-columns{page-break-inside:avoid}}