:root{--bg-color: #f8fafc;--surface-color: #ffffff;--text-main: #0f172a;--text-muted: #64748b;--brand-color: #3b82f6;--brand-hover: #2563eb;--border-color: #e2e8f0;--radius: 12px;--transition-speed: .3s}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text-main);line-height:1.6;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;background:linear-gradient(-45deg,#ff9a9e,#fecfef,#a1c4fd,#c2e9fb);background-size:400% 400%;animation:gradientBG 15s ease infinite}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.app-container{width:100%;max-width:600px;background:var(--surface-color);border-radius:var(--radius);padding:40px;box-shadow:0 10px 25px #0000000d}.logo-container{text-align:center;margin-bottom:40px}.main-logo{width:100%;max-width:600px;max-height:120px;height:auto;object-fit:contain;display:block;margin:0 auto;transition:transform .3s ease}.main-logo:hover{transform:scale(1.05)}.screen{display:none}.screen.active{display:block;animation:slideInRight .4s cubic-bezier(.25,.46,.45,.94) forwards}.screen.sliding-out{display:block;animation:slideOutLeft .4s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes slideOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-50px)}}.screen h2,.question-title{font-size:1.5rem;margin-bottom:15px;font-weight:600;text-align:center}.screen p{color:var(--text-muted);text-align:center;margin-bottom:30px}.question-counter{text-align:center;font-size:.85rem;color:var(--brand-color);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.progress-bar{width:100%;height:6px;background-color:var(--border-color);border-radius:3px;margin-bottom:30px;overflow:hidden}.progress-fill{height:100%;background-color:var(--brand-color);width:0%;transition:width .4s ease-out}.btn{display:block;width:100%;padding:16px;border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-speed)}.primary-btn{background-color:var(--brand-color);color:#fff}.primary-btn:hover{background-color:var(--brand-hover);transform:translateY(-2px)}.secondary-btn{background-color:var(--bg-color);color:var(--text-main);border:1px solid var(--border-color);margin-top:20px}.secondary-btn:hover{background-color:var(--border-color)}.options-grid{display:flex;flex-direction:column;gap:12px}.option-btn{background-color:var(--surface-color);border:2px solid var(--border-color);color:var(--text-main);padding:18px;border-radius:var(--radius);font-size:1rem;text-align:left;cursor:pointer;transition:all var(--transition-speed);font-family:inherit}.slider-container{padding:20px 0;display:flex;flex-direction:column;align-items:center}.slider-value-label{font-size:1.5rem;font-weight:800;color:var(--brand-color);margin-bottom:20px}.budget-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:12px;border-radius:10px;background:var(--border-color);outline:none;margin-bottom:10px}.budget-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--brand-color);cursor:pointer;box-shadow:0 4px 10px #0000001a;border:3px solid white;transition:transform .1s}.budget-slider::-webkit-slider-thumb:active{transform:scale(1.2)}.budget-slider::-moz-range-thumb{width:28px;height:28px;border:3px solid white;border-radius:50%;background:var(--brand-color);cursor:pointer;box-shadow:0 4px 10px #0000001a}.option-btn:hover{border-color:var(--brand-color);background-color:#f1f5f9}.results-grid{display:flex;flex-direction:column;gap:16px}.phone-card{display:flex;align-items:center;padding:15px;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--surface-color);transition:transform .2s;cursor:pointer}.phone-card:hover{transform:scale(1.02);box-shadow:0 4px 12px #0000000d}.phone-img-placeholder{width:60px;height:80px;background-color:var(--border-color);border-radius:6px;margin-right:15px;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--text-muted)}.phone-info h4{margin:0 0 5px;color:var(--brand-color)}.phone-info p{margin:0;font-size:.85rem;text-align:left;color:var(--text-main)}.phone-score{margin-top:5px!important;font-weight:700;color:var(--text-muted)}.summary-list{list-style:none;padding:0;margin-bottom:30px;background:#f8fafc;border:1px solid var(--border-color);border-radius:var(--radius);overflow:hidden}.summary-list li{padding:12px 18px;border-bottom:1px solid var(--border-color);font-size:.9rem;display:flex;flex-direction:column}.summary-list li:last-child{border-bottom:none}.summary-list li strong{color:var(--brand-color);font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}.loader-container{position:relative;width:120px;height:120px;margin:0 auto 30px}.phone-mock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:85px;background:var(--surface-color);border:4px solid var(--border-color);border-radius:10px}.magnifier{position:absolute;top:20px;left:10px;width:60px;height:60px;border:5px solid var(--brand-color);border-radius:50%;background:#3b82f61a;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:2;animation:searchPhone 1.5s infinite ease-in-out alternate}.magnifier:after{content:"";position:absolute;bottom:-12px;right:-12px;width:20px;height:5px;background:var(--brand-color);transform:rotate(45deg);border-radius:3px}@keyframes searchPhone{0%{transform:translate(-10px,-20px) scale(.9)}to{transform:translate(30px,40px) scale(1.1)}}.detail-price{font-size:1.2rem;font-weight:600;color:var(--brand-color);margin-bottom:25px;text-align:center}.detail-two-cols{display:flex;flex-direction:column;gap:20px;align-items:center;margin-bottom:30px}.detail-img-container{width:100%;max-width:300px;display:flex;justify-content:center;align-items:center;background:#f8fafc;border:1px solid var(--border-color);border-radius:var(--radius);padding:20px}.large-phone-placeholder{width:100%;height:220px;background-color:var(--border-color);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text-muted)}.large-phone-placeholder img{width:100%;height:100%;object-fit:contain}.detail-specs-container{flex:1;background:#f8fafc;border:1px solid var(--border-color);border-radius:var(--radius);padding:20px}.detail-specs-container h3{font-size:1rem;margin-bottom:15px;color:var(--text-main)}.detail-specs-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}.detail-specs-list li{font-size:.9rem;color:var(--text-muted);padding-left:15px;position:relative}.detail-specs-list li:before{content:"•";position:absolute;left:0;color:var(--brand-color)}.highlight-match{color:#16a34a!important;font-weight:600;background:#dcfce7;padding:4px 8px;border-radius:4px;display:inline-block;margin-top:4px}.highlight-match:before{content:"✨";margin-right:5px;position:relative;left:auto;color:inherit}.brands-grid,#brands-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:20px 16px!important;margin-bottom:30px}.brand-item{display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg-color);border:2px solid var(--border-color);border-radius:var(--radius);cursor:pointer;transition:all var(--transition-speed);-webkit-user-select:none;user-select:none}.brand-item:hover{border-color:var(--brand-color);background:#f1f5f9}.brand-item.selected{border-color:var(--brand-color);background:#eff6ff}.brand-item input{width:18px;height:18px;cursor:pointer}.brand-item label{font-size:.9rem;font-weight:600;cursor:pointer;flex-grow:1}.about-link{display:block;margin-top:40px;color:var(--brand-color);font-size:.9rem;text-decoration:underline;text-align:center;transition:opacity .2s}.about-link:hover{opacity:.8}.about-content{text-align:justify;background:#f8fafc;padding:20px;border-radius:var(--radius);margin-bottom:25px;border:1px solid var(--border-color)}.about-content p{text-align:justify;margin-bottom:15px;font-size:.95rem}.about-content p:last-child{margin-bottom:0}