.container{background:white;border-radius:12px;box-shadow:0 20px 60px #0000004d;padding:40px;max-width:1600px;width:100%;margin-top:20px}h1{color:#333;margin-bottom:30px;text-align:center;font-size:2.5em}.upload-section{display:flex;align-items:center;gap:20px;margin-bottom:30px;padding:20px;background:#f8f9fa;border-radius:8px;border:2px dashed #667eea;flex-wrap:wrap}.upload-section label{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:500;color:#333}.upload-section input[type=file]{cursor:pointer;padding:8px}.file-name{color:#667eea;font-weight:600;font-size:.95em}.demo-button{padding:10px 20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:opacity .2s}.demo-button:hover{opacity:.9}.search-section{margin-bottom:20px}.search-input{width:100%;padding:12px 16px;font-size:1em;border:2px solid #e0e0e0;border-radius:8px;transition:border-color .2s}.search-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.search-input::placeholder{color:#999}.controls-section{margin-bottom:30px;display:grid;gap:20px}.filtering-section{padding:20px;background:#f8f9fa;border-radius:8px}.section-label{display:block;font-weight:600;color:#333;margin-bottom:12px;font-size:.95em}.pill-buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.pill{padding:8px 16px;border:2px solid #e0e0e0;background:white;border-radius:20px;cursor:pointer;font-weight:500;color:#555;transition:all .2s;white-space:nowrap;font-size:.9em}.pill:hover{border-color:#667eea;color:#667eea}.pill.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-color:#667eea}.items-per-page-section{padding:20px;background:#f8f9fa;border-radius:8px;display:flex;align-items:center;gap:15px}.items-per-page-section label{display:flex;align-items:center;gap:10px;font-weight:500;color:#333;margin:0}.items-dropdown{padding:8px 12px;border:2px solid #e0e0e0;border-radius:6px;font-size:.95em;cursor:pointer;background:white;transition:border-color .2s}.items-dropdown:hover{border-color:#667eea}.items-dropdown:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.info{text-align:center;color:#666;font-size:.95em;padding:10px;background:#e8eaf6;border-radius:6px}.results-section{margin-top:30px}.products-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:20px;margin-top:20px}.product-card{background:white;border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px #0000001a;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}.product-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px #667eea26}.product-image-container{width:100%;height:300px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid #e0e0e0}.product-image{width:100%;height:100%;object-fit:contain;padding:10px;background:white}.no-image{color:#999;font-size:14px}.product-details{padding:15px;flex-grow:1;display:flex;flex-direction:column}.product-title{font-size:.95em;color:#333;margin-bottom:10px;line-height:1.4;font-weight:600;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-brand,.product-price,.product-bsr,.product-date,.product-rating{font-size:.85em;color:#555;margin:4px 0;padding:3px 0}.product-brand strong,.product-price strong,.product-bsr strong,.product-date strong,.product-rating strong{color:#333;font-weight:600}.product-price{color:#2ecc71;font-weight:600;font-size:1em}.product-bsr{color:#f39c12}.product-rating{color:#e74c3c}.product-buttons{display:flex;flex-direction:column;gap:8px;margin-top:auto}.product-link{padding:10px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;text-decoration:none;border-radius:6px;text-align:center;font-weight:500;transition:opacity .2s;flex:1;display:flex;align-items:center;justify-content:center}.product-link:hover{opacity:.9}.product-download{padding:10px;background:linear-gradient(135deg,#27ae60 0%,#229954 100%);color:#fff;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:opacity .2s;font-size:.95em;flex:1}.product-download:hover{opacity:.9}.product-download:active{transform:scale(.98)}.no-results{text-align:center;padding:40px;color:#999;font-size:1.1em}.empty-state{text-align:center;padding:60px 20px;color:#999;font-size:1.2em}.pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:30px;padding:20px;background:#f8f9fa;border-radius:8px}.pagination button{padding:10px 20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:opacity .2s}.pagination button:hover:not(:disabled){opacity:.9}.pagination button:disabled{opacity:.5;cursor:not-allowed}.page-info{color:#666;font-weight:600}@media (max-width: 1600px){.products-grid{grid-template-columns:repeat(6,1fr)}}@media (max-width: 1400px){.products-grid{grid-template-columns:repeat(5,1fr)}}@media (max-width: 1200px){.products-grid{grid-template-columns:repeat(4,1fr)}.pill-buttons{gap:8px}.pill{padding:6px 12px;font-size:.85em}}@media (max-width: 992px){.products-grid{grid-template-columns:repeat(3,1fr);gap:15px}.product-image-container{height:250px}}@media (max-width: 768px){.container{padding:20px}h1{font-size:1.8em}.upload-section{flex-direction:column;align-items:flex-start}.controls-section{grid-template-columns:1fr}.products-grid{grid-template-columns:repeat(2,1fr);gap:15px}.product-image-container{height:200px}.product-title{font-size:.9em}.pill-buttons{flex-wrap:wrap}.pill{padding:6px 10px;font-size:.8em}}@media (max-width: 480px){.products-grid{grid-template-columns:1fr}}.home-page{min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:20px}.hero-section{background:white;border-radius:20px;padding:80px 40px;text-align:center;margin-bottom:60px;box-shadow:0 20px 60px #0000004d}.hero-content h1{font-size:3.5em;color:#333;margin:0 0 20px;font-weight:700}.hero-subtitle{font-size:1.3em;color:#666;margin-bottom:40px;max-width:700px;margin-left:auto;margin-right:auto}.cta-button{padding:15px 40px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:50px;font-size:1.1em;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 30px #667eea66}.cta-button:hover{transform:translateY(-2px);box-shadow:0 15px 40px #667eea99}.cta-button:active{transform:translateY(0)}.section-container{max-width:1200px;margin:0 auto 40px;background:white;padding:60px 40px;border-radius:15px;box-shadow:0 10px 40px #0000001a}.section-container h2{color:#333;font-size:2.2em;margin-top:0;margin-bottom:40px;text-align:center}.section-container>p{font-size:1.1em;color:#555;line-height:1.8;text-align:center;max-width:900px;margin:0 auto}.info-section,.features-section{padding:0 20px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:40px}.feature-card{background:linear-gradient(135deg,#f5f7fa 0%,#e9ecef 100%);padding:40px 30px;border-radius:15px;text-align:center;transition:transform .3s,box-shadow .3s;border:2px solid transparent}.feature-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px #667eea33;border-color:#667eea}.feature-icon{font-size:3em;margin-bottom:15px}.feature-card h3{color:#333;font-size:1.3em;margin:15px 0}.feature-card p{color:#666;font-size:.95em;line-height:1.6}.how-to-use-section{padding:0 20px}.steps-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-top:40px}.step{background:linear-gradient(135deg,#e3f2fd 0%,#f3e5f5 100%);border-radius:12px;position:relative;padding:30px 30px 30px 100px}.step-number{position:absolute;left:20px;top:20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5em;font-weight:700}.step h3{color:#333;margin-top:0;margin-bottom:10px}.step p{color:#666;margin:0;line-height:1.6}.filters-section{padding:0 20px}.filter-detail{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-left:5px solid #667eea;margin-bottom:30px;border-radius:8px;overflow:hidden}.filter-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:20px 30px}.filter-header h3{color:#fff;margin:0;font-size:1.3em}.filter-content{padding:25px 30px}.filter-content p{margin:12px 0;color:#555;line-height:1.7;font-size:.95em}.filter-content strong{color:#333;font-weight:600}.filter-note{background:#fff3cd;border:2px solid #ffc107;border-radius:8px;padding:20px;margin-top:30px;text-align:center}.filter-note p{margin:0;color:#856404;font-size:1em}.card-info-section{padding:0 20px}.card-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:40px}.breakdown-item{background:linear-gradient(135deg,#e8eaf6 0%,#f3e5f5 100%);padding:25px;border-radius:10px;display:flex;flex-direction:column;gap:8px;border-left:4px solid #667eea}.item-label{font-weight:600;color:#333;font-size:.95em}.item-desc{color:#666;font-size:.9em;line-height:1.5}.faq-section{padding:0 20px}.faq-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:25px;margin-top:40px}.faq-item{background:linear-gradient(135deg,#f5f7fa 0%,#e9ecef 100%);padding:25px;border-radius:10px;border-top:3px solid #667eea}.faq-item h4{color:#333;margin:0 0 12px;font-size:1.05em}.faq-item p{color:#666;margin:0;font-size:.9em;line-height:1.6}.cta-section{background:white;border-radius:15px;padding:60px 40px;text-align:center;box-shadow:0 10px 40px #0000001a;max-width:900px;margin:40px auto}.cta-container h2{color:#333;font-size:2em;margin:0 0 30px}.cta-button-large{padding:18px 50px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:50px;font-size:1.2em;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 15px 40px #667eea66;margin:0 10px}.cta-button-large:hover{transform:translateY(-3px);box-shadow:0 20px 50px #667eea99}.cta-subtext{color:#999;margin-top:20px;font-size:.95em}.home-footer{text-align:center;color:#fff;padding:40px 20px;font-size:.9em}.home-footer p{margin:8px 0;opacity:.9}@media (max-width: 1200px){.hero-content h1{font-size:2.5em}.section-container{padding:40px 30px}.features-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media (max-width: 768px){.hero-section{padding:50px 25px}.hero-content h1{font-size:1.8em}.hero-subtitle{font-size:1em}.section-container{padding:30px 20px;margin-bottom:30px}.section-container h2{font-size:1.6em;margin-bottom:25px}.features-grid,.steps-container{grid-template-columns:1fr}.step{padding-left:30px}.card-breakdown,.faq-container{grid-template-columns:1fr}.cta-section{padding:40px 20px;margin:30px 10px}.cta-container h2{font-size:1.4em}.cta-button-large{padding:15px 30px;font-size:1em}}@media (max-width: 480px){.hero-section{padding:40px 15px}.hero-content h1{font-size:1.5em}.hero-subtitle{font-size:.9em}.cta-button{padding:12px 25px;font-size:.95em}.section-container{padding:20px 15px;border-radius:10px}.section-container h2{font-size:1.3em}.features-grid{gap:15px}.feature-card{padding:25px 15px}.feature-icon{font-size:2.5em}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh}#root{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px}