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:#3b82f6;background:#f8fafc;transform:translate(4px);box-shadow:0 8px 20px #3b82f626}.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}@keyframes countUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.pixo-score-animate{animation:countUp .8s ease-out}