*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color:#2563eb;--primary-dark:#1e40af;--secondary-color:#10b981;--accent-color:#f59e0b;--bg-color:#f8fafc;--card-bg:#ffffff;--text-primary:#1e293b;--text-secondary:#64748b;--border-color:#e2e8f0;--shadow:0 1px 3px 0 rgb(0 0 0 / 0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1)}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background-color:var(--bg-color);color:var(--text-primary);line-height:1.6}.container{max-width:1400px;margin:0 auto;padding:20px}header{text-align:center;padding:40px 20px;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:white;border-radius:12px;margin-bottom:30px;box-shadow:var(--shadow-lg)}header h1{font-size:2.5rem;margin-bottom:10px;font-weight:700}header .tagline{font-size:1.1rem;opacity:0.95}.os-filter-section{background:var(--card-bg);padding:20px;border-radius:8px;margin-bottom:20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:15px}.os-filter-section label{font-weight:600;color:var(--text-primary)}#os-filter{padding:10px 15px;border:2px solid var(--border-color);border-radius:6px;font-size:1rem;background:white;cursor:pointer;transition:border-color 0.3s}#os-filter:hover{border-color:var(--primary-color)}.param-selection{background:var(--card-bg);padding:30px;border-radius:12px;box-shadow:var(--shadow);margin-bottom:30px}.instruction h2{color:var(--primary-color);margin-bottom:10px}.instruction p{color:var(--text-secondary);margin-bottom:20px}.param-pool,.param-selected-area{margin:20px 0}.param-pool h3,.param-selected-area h3{font-size:1.1rem;margin-bottom:15px;color:var(--text-primary)}.param-container{display:flex;flex-wrap:wrap;gap:18px;min-height:100px;padding:20px;background:var(--bg-color);border-radius:8px;border:2px dashed var(--border-color)}.selected-container{min-height:120px;background:#fef3c7;border-color:var(--accent-color);gap:24px;padding:24px}.dropzone-hint{width:100%;text-align:center;color:var(--text-secondary);font-style:italic;padding:30px 0}.param-box{padding:12px 20px;background:white;border:2px solid var(--primary-color);border-radius:8px;cursor:move;user-select:none;transition:all 0.3s;box-shadow:var(--shadow);position:relative;margin:4px}.param-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--primary-dark)}.param-box.dragging{opacity:0.5;transform:rotate(5deg)}.param-box.in-selection{background:var(--primary-color);color:white;font-weight:600}.param-box.in-selection::before{content:attr(data-priority);position:absolute;top:-8px;left:-8px;background:var(--accent-color);color:white;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:700;border:3px solid white}.param-box.priority-1{transform:scale(1.15)}.param-box.priority-2{transform:scale(1.1)}.param-box.priority-3{transform:scale(1.05)}.param-box.priority-4{transform:scale(1.0)}.param-box.priority-5{transform:scale(0.95)}.param-name{display:block;font-size:0.95rem}.btn-primary{display:block;width:100%;padding:15px 30px;background:linear-gradient(135deg,var(--secondary-color),#059669);color:white;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;margin-top:20px;transition:all 0.3s;box-shadow:var(--shadow)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-primary:disabled{background:var(--border-color);cursor:not-allowed;opacity:0.6}.validation-msg{margin-top:10px;padding:10px;border-radius:6px;text-align:center;font-size:0.9rem}.validation-msg.error{background:#fee2e2;color:#991b1b}.validation-msg.success{background:#d1fae5;color:#065f46}.visualization-section{background:var(--card-bg);padding:30px;border-radius:12px;box-shadow:var(--shadow)}.visualization-section h2{color:var(--primary-color);margin-bottom:10px}.viz-description{color:var(--text-secondary);margin-bottom:20px}#visualization-container{position:relative;width:100%;height:600px;min-height:600px;background:#fafafa;border-radius:8px;border:1px solid var(--border-color);overflow:hidden}#scatter-plot{width:100%;height:100%;cursor:crosshair}.tooltip{position:absolute;background:linear-gradient(135deg,rgba(37,99,235,0.95),rgba(30,64,175,0.95));color:white;padding:12px 18px;border-radius:10px;font-size:0.9rem;pointer-events:none;opacity:0;transition:all 0.3s ease;z-index:1000;max-width:280px;box-shadow:0 8px 20px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.1);backdrop-filter:blur(10px);transform:translateY(-5px)}.tooltip.show{opacity:1;transform:translateY(0)}.tooltip::after{content:'';position:absolute;top:-5px;left:10px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid rgba(37,99,235,0.95)}#loading-spinner{position:relative;z-index:100}.spinner{text-align:center;padding:40px;animation:fadeIn 0.3s ease-in}.spinner-icon{width:60px;height:60px;border:5px solid var(--border-color);border-top-color:var(--primary-color);border-right-color:var(--primary-color);border-radius:50%;animation:spin 0.8s linear infinite,pulse 1.5s ease-in-out infinite;margin:0 auto 15px;box-shadow:0 4px 10px rgba(37,99,235,0.3)}.spinner p{color:var(--primary-color);font-weight:600;animation:fade 1.5s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes fade{0%,100%{opacity:1}50%{opacity:0.6}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6)}.modal.show{display:flex;align-items:center;justify-content:center}.modal-content{background-color:white;padding:30px;border-radius:12px;width:90%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1)}.close{float:right;font-size:28px;font-weight:bold;color:var(--text-secondary);cursor:pointer;line-height:1}.close:hover{color:var(--text-primary)}#laptop-list{margin-top:20px}.laptop-item{padding:18px;margin:12px 0;background:var(--bg-color);border-radius:10px;border:2px solid var(--border-color);cursor:pointer;transition:all 0.3s}.laptop-item:hover{background:white;border-color:var(--primary-color);transform:translateX(8px);box-shadow:0 4px 12px rgba(37,99,235,0.15)}.laptop-item h4{color:var(--primary-color);margin-bottom:5px}#modal-title{color:var(--primary-color);margin-bottom:5px}#modal-subtitle{font-size:0.95rem;line-height:1.5}footer{text-align:center;padding:30px 20px;color:var(--text-secondary);font-size:0.9rem;margin-top:40px}#tour-guide-btn{position:fixed;bottom:30px;right:30px;width:60px;height:60px;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:white;border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 12px rgba(37,99,235,0.4);z-index:1500;transition:all 0.3s;display:flex;align-items:center;justify-content:center;animation:bounce 2s ease-in-out infinite}#tour-guide-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(37,99,235,0.6)}#tour-guide-btn .help-icon{font-size:2rem;font-weight:bold}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.tour-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:2500;display:none;justify-content:center;align-items:center;animation:fadeIn 0.3s}.tour-modal.active{display:flex}.tour-content{background:white;padding:35px;border-radius:16px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:slideUp 0.4s}@keyframes slideUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.tour-content h2{color:var(--primary-color);margin-bottom:20px;font-size:1.8rem}.tour-content h3{color:var(--primary-dark);margin-top:25px;margin-bottom:12px;font-size:1.3rem}.tour-content p{margin-bottom:12px;line-height:1.8;color:var(--text-primary)}.tour-content ul{margin-left:20px;margin-bottom:15px}.tour-content li{margin-bottom:8px;line-height:1.6}.tour-content strong{color:var(--primary-color)}.tour-close{position:absolute;top:15px;right:15px;font-size:2rem;color:var(--text-secondary);background:none;border:none;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.3s}.tour-close:hover{background:var(--bg-color);color:var(--primary-color);transform:rotate(90deg)}.tour-step-badge{display:inline-block;background:var(--primary-color);color:white;padding:3px 10px;border-radius:20px;font-size:0.85rem;font-weight:600;margin-right:10px}@media (max-width:1024px){.container{padding:15px}header{padding:30px 20px}header h1{font-size:2rem}.param-selection{padding:25px 20px}.visualization-section{padding:25px 20px}#visualization-container{height:500px}.modal-content{width:95%;max-width:600px;padding:25px}}@media (max-width:640px){.container{padding:10px}header{padding:20px 15px;margin-bottom:15px}header h1{font-size:1.5rem;line-height:1.2}header .tagline{font-size:0.9rem}.os-filter-section{flex-direction:column;align-items:stretch;gap:10px;padding:15px}#os-filter{width:100%;padding:12px 15px;font-size:1rem}.param-selection{padding:20px 15px}.instruction h2{font-size:1.3rem}.instruction p{font-size:0.9rem;margin-bottom:15px}.param-container{gap:10px;padding:15px;min-height:80px}.selected-container{gap:12px;padding:15px;min-height:100px}.param-box{font-size:0.85rem;padding:12px 16px;margin:2px;min-height:44px;display:flex;align-items:center;justify-content:center}.param-box.in-selection{padding:10px 14px}.param-box.in-selection::before{width:24px;height:24px;font-size:0.75rem;top:-6px;left:-6px;border:2px solid white}.param-box.priority-1{transform:scale(1.05)}.param-box.priority-2{transform:scale(1.03)}.param-box.priority-3{transform:scale(1.0)}.param-box.priority-4{transform:scale(0.98)}.param-box.priority-5{transform:scale(0.96)}.btn-primary{padding:16px 30px;font-size:1.05rem;margin-top:15px;min-height:50px}.validation-msg{font-size:0.85rem;padding:8px}.visualization-section{padding:20px 15px}.visualization-section h2{font-size:1.3rem}.viz-description{font-size:0.85rem}#visualization-container{height:350px;min-height:350px}#scatter-plot{touch-action:pan-y}.tooltip{font-size:0.85rem;padding:8px 12px;max-width:200px}.modal-content{width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0;padding:20px 15px;overflow-y:auto}.close{font-size:32px;line-height:0.8;padding:10px}#modal-title{font-size:1.3rem;line-height:1.3}#modal-subtitle{font-size:0.85rem;margin-top:8px;margin-bottom:15px}.laptop-item{padding:15px;margin:10px 0}.laptop-item:hover{transform:translateX(0)}.laptop-item>div[style*="display:flex"]{flex-direction:column !important;gap:12px !important}.laptop-item h4{font-size:0.95rem}.laptop-item [style*="text-align:right"]{text-align:left !important;border-top:1px solid var(--border-color);padding-top:10px}.laptop-item [style*="font-size:1.3rem"]{font-size:1.1rem !important}footer{padding:20px 15px;font-size:0.8rem;margin-top:30px}footer p{line-height:1.5}}@media (max-width:375px){header h1{font-size:1.3rem}.param-box{font-size:0.8rem;padding:10px 14px}.btn-primary{font-size:1rem;padding:14px 25px}#visualization-container{height:300px;min-height:300px}.laptop-item{padding:12px}.laptop-item h4{font-size:0.9rem}}@media (max-height:500px) and (orientation:landscape){header{padding:15px;margin-bottom:10px}header h1{font-size:1.3rem}.param-selection{padding:15px}#visualization-container{height:250px;min-height:250px}.modal-content{height:100vh;overflow-y:auto}}@media (min-width:1400px){.container{max-width:1600px}#visualization-container{height:700px}}.hover-panel{background-color:#f8f9fa;padding:12px;border-radius:12px;margin-bottom:1rem}.mobile-simplified-hover{display:flex;flex-direction:column;gap:8px}.mobile-simplified-hover h6{font-size:16px;margin-bottom:4px;font-weight:600}.mobile-simplified-hover p{font-size:14px;line-height:1.4;color:#6c757d}.mobile-simplified-hover .btn{font-size:16px;padding:12px;font-weight:600}.graph-instructions{text-align:center;font-size:14px;color:#666;margin-top:8px;font-style:italic}@media (max-width:991px){.filter-column{order:0 !important;overflow-x:hidden !important;overflow-y:visible !important}.filter-column *{max-width:100%;box-sizing:border-box}.graph-column{order:1 !important}.hover-column-mobile{order:2 !important}.row{display:flex;flex-wrap:wrap}.hover-panel-mobile{position:relative !important;top:0 !important;min-height:auto !important;padding:10px !important;margin-bottom:1rem;display:none !important}.hover-panel-mobile.active{display:block !important}.hover-panel-mobile.mobile-condensed{padding:10px !important;font-size:13px !important}.hover-panel-mobile.mobile-condensed h6{font-size:15px !important;margin-bottom:8px !important}.hover-panel-mobile.mobile-condensed p{margin-bottom:4px !important;font-size:12px !important;line-height:1.3 !important}.hover-panel-mobile.mobile-condensed .amazon-buy-link{padding:10px !important;font-size:15px !important;margin-top:8px !important}.hover-panel-desktop{display:none !important}.filter-collapse-content{border:2px solid #0d6efd;border-radius:8px;padding:10px;margin-top:8px;overflow-x:hidden !important;overflow-y:visible !important}#scatter-plot{height:350px !important;max-width:100% !important;width:100% !important}.graph-column{max-width:100% !important;overflow-x:hidden !important;padding-left:12px !important;padding-right:12px !important}.js-plotly-plot{max-width:100% !important;overflow:hidden !important}.plotly{max-width:100% !important}#filter-collapse{overflow-x:hidden !important;overflow-y:visible !important}#feature-list{max-height:none !important;overflow-y:visible !important;overflow-x:hidden !important}#feature-list>*{max-width:100% !important;overflow-x:hidden !important;box-sizing:border-box !important}#feature-list .d-flex{max-width:100% !important;overflow-x:hidden !important}#feature-list .rc-slider{max-width:100% !important;overflow-x:visible !important}#feature-list .rc-slider-step{max-width:100% !important}#feature-list .rc-slider-mark{max-width:100% !important;overflow-x:visible !important}#filter-collapse-button{font-size:16px;font-weight:600;padding:12px}button[id*="up-btn"],button[id*="down-btn"]{min-width:44px !important;min-height:44px !important;font-size:18px !important;padding:8px !important}.price-slider-with-histogram .rc-slider-handle{width:24px;height:24px;margin-top:-10px}#top10-table table{width:100%;border:none}#top10-table thead{display:none}#top10-table tbody{display:block}#top10-table tr{display:block;border:1px solid #dee2e6;border-radius:8px;padding:12px;margin-bottom:12px;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.1)}#top10-table td{display:block;text-align:left !important;padding:6px 0;border:none}#top10-table td[data-label="Graphics"],#top10-table td[data-label="Resolution"],#top10-table td[data-label="Operating System"],#top10-table td[data-label="Screen (in)"]{display:none !important}#top10-table td::before{content:attr(data-label) ":";font-weight:600;color:#495057;display:inline-block;min-width:90px}#top10-table td[data-label="Model"]{font-size:14px;font-weight:600;color:#0056b3;border-bottom:1px solid #e9ecef;padding-bottom:8px;margin-bottom:8px}#top10-table td[data-label="Model"]::before{display:none}#top10-table td[data-label="Buy"]{margin-top:10px;padding-top:10px;border-top:1px solid #e9ecef}#top10-table td[data-label="Buy"]::before{display:none}.amazon-buy-link{width:100% !important;display:block !important;text-align:center;margin-top:8px;padding:12px !important;font-size:16px !important}.checklist-item{display:block;margin-bottom:8px}.graph-instructions::after{content:"Tap a laptop to see details"}#cookie-consent-banner{position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;width:100% !important;max-width:100% !important;margin:0 !important;border-radius:0 !important;padding:15px !important}#cookie-consent-banner .cookie-consent-buttons{display:flex;flex-direction:column;gap:8px;margin-top:10px}#cookie-consent-banner button{width:100% !important;margin:0 !important;padding:12px !important;font-size:14px !important}.container-fluid{padding-left:12px !important;padding-right:12px !important;overflow-x:hidden !important}*{max-width:100%}}@media (min-width:768px) and (max-width:991px){#scatter-plot{height:400px !important}.hover-panel{padding:15px !important}}@media (min-width:992px){.hover-panel-mobile{display:none !important}.hover-panel-desktop{display:block !important;position:sticky !important;top:20px;min-height:480px;padding:15px !important}#scatter-plot{height:480px !important}.filter-column{overflow-x:hidden !important;overflow-y:visible !important}.filter-column *{max-width:100%;box-sizing:border-box}#filter-collapse{overflow-x:hidden !important;overflow-y:visible !important}#feature-list{overflow-x:hidden !important}#feature-list>*{max-width:100% !important;overflow-x:hidden !important;box-sizing:border-box !important}#feature-list .d-flex{max-width:100% !important;overflow-x:hidden !important}#feature-list .rc-slider{max-width:100% !important;overflow-x:visible !important}#feature-list .rc-slider-step{max-width:100% !important}#feature-list .rc-slider-mark{max-width:100% !important;overflow-x:visible !important}.filter-collapse-content{border:none;padding:0;margin-top:0;overflow-x:hidden !important;overflow-y:visible !important}button[id*="up-btn"],button[id*="down-btn"]{min-width:auto;min-height:22px;font-size:14px}.graph-instructions::after{content:"Hover over a laptop to see details"}}.no-scrollbar-enforce,.no-scrollbar-enforce.filter-column,div.no-scrollbar-enforce.filter-column{overflow-y:visible !important;overflow-x:hidden !important;max-height:none !important}.no-scrollbar-enforce #filter-collapse,.no-scrollbar-enforce .filter-collapse-content,.no-scrollbar-enforce #feature-list{overflow-y:visible !important;overflow-x:hidden !important;max-height:none !important}@media (hover:none) and (pointer:coarse){button,a.btn,.btn{min-height:44px;min-width:44px;padding:10px 16px}.plotly .point{pointer-events:all;cursor:pointer}.param-box:hover,.laptop-item:hover{transform:none}.hover-panel{font-size:14px}}@media (min-width:1400px){.hover-panel{padding:20px !important;min-height:500px}#scatter-plot{height:500px !important}#feature-list{max-height:500px}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.hover-panel,#scatter-plot{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}#reset-filters-btn{border-color:#ff6b6b !important;color:#ff6b6b !important;font-weight:500 !important;transition:all 0.3s ease}#reset-filters-btn:hover{background-color:#ff6b6b !important;color:white !important;border-color:#ff6b6b !important;box-shadow:0 2px 8px rgba(255,107,107,0.3);transform:translateY(-1px)}#reset-filters-btn:active{transform:translateY(0);box-shadow:0 1px 3px rgba(255,107,107,0.3)}#reset-filters-btn .bi{transition:transform 0.3s ease}#reset-filters-btn:hover .bi{transform:rotate(-180deg)}.navbar .nav-link{transition:color 0.3s ease;font-weight:500}.navbar .nav-link:hover{color:var(--primary-color) !important}.navbar{min-height:50px !important}