body{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.main-container{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 25px 50px #0000001a}.step-card{background:#fff;border-radius:16px;box-shadow:0 10px 25px #00000014;transition:all .3s ease;border:1px solid rgba(0,0,0,.05)}.brand-card{transition:all .4s cubic-bezier(.175,.885,.32,1.275);background:#fff;border-radius:12px;border:2px solid #e5e7eb;padding:1.5rem;cursor:pointer;position:relative;overflow:hidden;min-height:160px}.brand-card img{transition:transform .4s ease;filter:grayscale(.2)}.brand-card:hover img{transform:scale(1.1);filter:grayscale(0)}.brand-card img:not(.grayscale){filter:grayscale(0)}.brand-card img.grayscale{filter:grayscale(.6)!important}.brand-card img{background:#fffc;border-radius:8px}.brand-card img[src*=storage]{background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6);background-size:200% 100%;animation:loading 1.5s infinite}.brand-card img:not(.grayscale){box-shadow:0 4px 12px #0000001a;border:2px solid rgba(255,255,255,.9)}.brand-card:hover img:not(.grayscale){box-shadow:0 8px 25px #10b98133;border-color:#10b981}.brand-card.selected img:not(.grayscale){box-shadow:0 8px 25px #10b9814d;border-color:#10b981}.brand-card img[src*=storage]:not([src*=default]){animation:none;background:#fffc}.action-notification{background:linear-gradient(135deg,#fef3c7,#fed7aa);border:2px solid #f59e0b;border-radius:12px;padding:1rem;margin-bottom:1rem;position:relative;overflow:hidden}.action-notification:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(251,191,36,.1) 50%,transparent 70%);animation:shimmer 4s infinite}.action-notification .action-icon{width:2rem;height:2rem;background:#fbbf24;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;margin-right:.75rem;flex-shrink:0}.action-notification h5{color:#92400e;font-weight:700;margin-bottom:.25rem}.action-notification .action-bonus{color:#dc2626;font-weight:700;font-size:1.1rem}.brand-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#10b981,#3b82f6);opacity:0;transition:opacity .3s ease}.brand-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px #10b98133;border-color:#10b981}.brand-card.selected{border-color:#10b981;background:linear-gradient(135deg,#ecfdf5,#d1fae5);transform:translateY(-4px);box-shadow:0 15px 30px #10b98140}.brand-card.selected img{filter:grayscale(0)!important;transform:scale(1.05)}.brand-card.selected:before{opacity:.05}.category-card{transition:all .4s cubic-bezier(.175,.885,.32,1.275);background:#fff;border-radius:12px;border:2px solid #e5e7eb;padding:1.5rem;cursor:pointer;position:relative;overflow:hidden;min-height:140px}.category-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 15px 30px #3b82f633;border-color:#3b82f6}.category-card.selected{border-color:#10b981;background:linear-gradient(135deg,#ecfdf5,#d1fae5);transform:translateY(-2px);box-shadow:0 12px 25px #10b98140}.model-option{transition:all .3s ease;background:#fff;border-radius:12px;border:2px solid #e5e7eb;padding:1rem;margin-bottom:.75rem;cursor:pointer;position:relative}.model-option:hover{border-color:#10b981;background:linear-gradient(135deg,#ecfdf5,#d1fae5);transform:translate(4px);box-shadow:linear-gradient(135deg,#10b981,#059669)}.model-option.selected{border-color:#10b981;background:linear-gradient(135deg,#ecfdf5,#d1fae5);box-shadow:0 8px 20px #10b98133}.storage-option,.color-option{transition:all .3s ease;background:#fff;border-radius:10px;border:2px solid #e5e7eb;padding:1rem;cursor:pointer;text-align:center;position:relative}.storage-option:hover,.color-option:hover{border-color:#3b82f6;background:#f8fafc;transform:scale(1.05);box-shadow:0 8px 20px #3b82f626}.storage-option.selected,.color-option.selected{border-color:#10b981;background:linear-gradient(135deg,#ecfdf5,#d1fae5);box-shadow:0 8px 20px #10b98133}.step-indicator{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem;transition:all .4s ease;background:#e5e7eb;color:#6b7280;position:relative}.step-indicator.active{background:linear-gradient(135deg,#10b981,#059669);color:#fff;transform:scale(1.1);box-shadow:0 8px 20px #10b98166}.step-indicator.completed{background:linear-gradient(135deg,#059669,#047857);color:#fff}.progress-line{height:3px;background:#e5e7eb;border-radius:2px;position:relative;overflow:hidden}.progress-line.completed:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#10b981,#059669);animation:progressFill .6s ease}@keyframes progressFill{0%{width:0}to{width:100%}}.grade-option{transition:all .3s ease;background:#fff;border-radius:12px;border:2px solid #e5e7eb;padding:1.5rem;margin-bottom:1rem;cursor:pointer;position:relative}.grade-option:hover{border-color:#3b82f6;background:#f8fafc;transform:translateY(-2px);box-shadow:0 10px 25px #3b82f626}.grade-option.selected{border-color:#10b981;background:linear-gradient(135deg,#ecfdf5,#d1fae5);box-shadow:0 10px 25px #10b98133}.btn-primary{background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:12px;padding:.75rem 2rem;color:#fff;font-weight:600;transition:all .3s ease;box-shadow:0 6px 15px #10b9814d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px #10b98166}.btn-secondary{background:#fff;border:2px solid #e5e7eb;border-radius:12px;padding:.75rem 2rem;color:#6b7280;font-weight:600;transition:all .3s ease}.btn-secondary:hover:not(:disabled){border-color:#3b82f6;color:#3b82f6;transform:translateY(-2px);box-shadow:0 6px 15px #3b82f633}.summary-panel{background:#fff;border-radius:16px;box-shadow:0 15px 35px #0000001a;position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto}@media (max-width: 1024px){.summary-panel{position:static;margin-top:2rem}.main-container .grid{grid-template-columns:1fr}}@media (max-width: 768px){.main-container{margin:1rem;padding:1rem!important}.step-card,.summary-panel{padding:1rem!important}.brand-card{padding:1rem}#brands-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media (max-width: 768px){.mobile-compact-brands{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;max-height:none;overflow:visible}.mobile-compact-brands .brand-card{padding:.75rem;min-height:110px}}.loading-skeleton{background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6);background-size:200% 100%;animation:loading 1.5s infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.selector-switch{transition:all .3s ease;border-radius:8px;padding:.75rem 1.5rem;font-weight:600}.selector-switch.active{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 12px #10b9814d}.grade-parameter{transition:all .3s ease}.grade-parameter.selected>div{border-color:#10b981!important;background:linear-gradient(135deg,#ecfdf5,#d1fae5);box-shadow:0 8px 20px #10b98133}.grade-parameter:hover>div{border-color:#3b82f6!important;background:#f8fafc;transform:translateY(-2px);box-shadow:0 8px 20px #3b82f626}#summary-grade{background:linear-gradient(135deg,#4f46e5,#7c3aed,#2563eb);position:relative;overflow:hidden}#summary-grade:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);animation:shimmer 3s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes actionPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.action-notification .action-icon{animation:actionPulse 2s ease-in-out infinite}#summary-grade-badge{box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff80;transition:all .3s ease}#summary-grade-badge:hover{transform:scale(1.05) rotate(5deg)}.pixo-index-container{background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:all .3s ease}.pixo-index-container:hover{background:#ffffff40;transform:translateY(-2px)}.grade-a-plus #summary-grade-badge span{background:linear-gradient(135deg,#059669,#10b981)!important;-webkit-background-clip:text!important;background-clip:text!important}.grade-a #summary-grade-badge span{background:linear-gradient(135deg,#0891b2,#06b6d4)!important;-webkit-background-clip:text!important;background-clip:text!important}.grade-b #summary-grade-badge span{background:linear-gradient(135deg,#ea580c,#f97316)!important;-webkit-background-clip:text!important;background-clip:text!important}.grade-c #summary-grade-badge span{background:linear-gradient(135deg,#dc2626,#ef4444)!important;-webkit-background-clip:text!important;background-clip:text!important}#model-search-container{animation:fadeInDown .4s ease}.model-search-box{display:flex;align-items:center;gap:10px;max-width:320px;padding:12px 18px;background:#f9fafb;border:2px solid #e5e7eb;border-radius:12px;transition:all .2s ease}.model-search-box:focus-within{border-color:#10b981;background:#fff;box-shadow:0 0 0 3px #10b9811a}.model-search-icon{font-size:16px;flex-shrink:0}#model-search-input{flex:1;border:none;background:transparent;font-size:15px;color:#374151;outline:none;min-width:0}#model-search-input::-moz-placeholder{color:#9ca3af}#model-search-input::placeholder{color:#9ca3af}.model-search-clear{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#e5e7eb;border:none;border-radius:50%;color:#6b7280;font-size:12px;cursor:pointer;transition:all .15s ease}.model-search-clear:hover{background:#d1d5db;color:#374151}.model-search-count{margin-top:8px;font-size:12px;color:#10b981;font-weight:500}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes countUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.pixo-score-animate{animation:countUp .8s ease-out}@media (max-width: 768px){:root{--m-padding: 12px;--m-card-h: 70px;--m-tap-target: 44px;--m-radius: 16px;--m-green: #10b981;--m-green-light: #ecfdf5;--m-transition: .25s ease-out}.main-container{margin:0!important;padding:var(--m-padding)!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;min-height:100vh}body{background:#fff!important}.mb-12.bg-white{margin-bottom:8px!important;padding:8px 12px!important;box-shadow:none!important;border:none!important;background:transparent!important}.lg\\:hidden .flex-1.h-2{height:4px!important}.lg\\:hidden .h-2.bg-green-500{height:4px!important}.lg\\:hidden .step-indicator{width:28px;height:28px;font-size:13px}#step-label-mobile{font-size:13px!important}.step-card{padding:var(--m-padding)!important;box-shadow:none!important;border:none!important;border-radius:0!important}.step-card h2{font-size:18px!important;margin-bottom:8px!important}.step-card h3{font-size:15px!important;margin-bottom:10px!important}.step-content{transition:opacity var(--m-transition),transform var(--m-transition)}.step-content.slide-left{animation:mSlideLeft var(--m-transition) forwards}.step-content.slide-right{animation:mSlideRight var(--m-transition) forwards}@keyframes mSlideLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-30px)}}@keyframes mSlideRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes mSlideInFromLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}#brands-grid,.mobile-compact-brands{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;max-height:none!important;overflow:visible!important}.brand-card{min-height:auto!important;padding:10px 6px!important;border-radius:10px!important;border-width:1.5px!important}.brand-card img{width:32px!important;height:32px!important;-o-object-fit:contain;object-fit:contain}.brand-card span,.brand-card .text-sm{font-size:11px!important;margin-top:4px!important;line-height:1.2!important}.brand-card:hover{transform:none!important;box-shadow:none!important}.brand-card.selected{transform:none!important;box-shadow:0 2px 8px #10b98133!important}#categories-grid{display:flex!important;flex-wrap:wrap!important;gap:8px!important}.category-card{min-height:auto!important;padding:10px 16px!important;border-radius:22px!important;border-width:1.5px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important}.category-card .text-3xl,.category-card .text-4xl{font-size:20px!important}.category-card .font-semibold,.category-card .text-lg{font-size:14px!important}.category-card:hover{transform:none!important;box-shadow:none!important}.category-card.selected{transform:none!important}#models-list{max-height:55vh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}#model-search-container{position:sticky!important;top:0!important;z-index:5!important;background:#fff!important;padding-bottom:8px!important}.model-search-box{max-width:100%!important;padding:10px 14px!important;border-radius:10px!important}#model-search-input{font-size:14px!important}.model-option{padding:10px 12px!important;margin-bottom:4px!important;border-radius:8px!important;border-width:1.5px!important}.model-option .font-semibold,.model-option .text-base{font-size:14px!important;line-height:1.3!important}.model-option .text-xs,.model-option .text-sm{font-size:11px!important;line-height:1.2!important}.model-option:hover{transform:none!important}#storage-grid,#colors-grid{display:flex!important;flex-wrap:wrap!important;gap:8px!important}.storage-option{flex:0 0 auto!important;min-width:70px!important;padding:10px 16px!important;border-radius:22px!important;border-width:1.5px!important;font-size:14px!important;font-weight:600!important}.storage-option:hover{transform:none!important}.storage-option.selected{transform:scale(1.03)!important}.color-option{flex:0 0 auto!important;padding:8px 14px!important;border-radius:22px!important;border-width:1.5px!important;min-width:auto!important}.color-option .text-sm,.color-option .font-medium{font-size:13px!important}.color-option:hover{transform:none!important}.color-option.selected{transform:scale(1.03)!important}.grade-option{padding:10px 14px!important;margin-bottom:6px!important;border-radius:10px!important;border-width:1.5px!important}.grade-option:hover{transform:none!important;box-shadow:none!important}.grade-option.selected{border-left:3px solid var(--m-green)!important;background:var(--m-green-light)!important;box-shadow:none!important}.grade-parameter{margin-bottom:16px!important}.grade-parameter h4{font-size:14px!important;margin-bottom:4px!important}.grade-parameter p{font-size:12px!important;margin-bottom:6px!important;color:#6b7280!important}.grade-parameter>div{padding:8px 12px!important;margin-bottom:4px!important;border-radius:8px!important}.grade-parameter>div:hover{transform:none!important}.grade-parameter.selected>div{transform:none!important}.mobile-nav-sticky{position:sticky!important;bottom:0!important;left:0!important;right:0!important;background:#fff!important;padding:10px var(--m-padding)!important;border-top:1px solid #e5e7eb!important;z-index:10!important;display:flex!important;gap:10px!important}.mobile-nav-sticky .btn-primary,.mobile-nav-sticky .btn-secondary{flex:1!important;padding:12px 0!important;font-size:15px!important;border-radius:10px!important}#step-9 .text-4xl,#step-9 .text-5xl{font-size:36px!important}#step-9 .text-3xl{font-size:28px!important}#summary-grade{border-radius:16px!important;padding:20px!important}#summary-grade-badge{width:80px!important;height:80px!important}.customer-form-modal{padding:12px!important}.customer-form-modal input,.customer-form-modal textarea,.customer-form-modal select{font-size:16px!important;padding:10px 12px!important;border-radius:8px!important}.photo-upload-grid{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}@keyframes mSwipeHint{0%,to{transform:translate(0);opacity:.5}50%{transform:translate(-10px);opacity:1}}.swipe-hint{animation:mSwipeHint 2s ease-in-out 2}}