:root{--primary: #002147;--secondary: #004a8d;--accent: #ff6b00;--light: #f8f9fa;--dark: #212529;--gray: #6c757d;--light-gray: #e9ecef;--success: #28a745;--shadow: 0 4px 20px rgba(0, 0, 0, .08);--shadow-hover: 0 8px 30px rgba(0, 0, 0, .12);--transition: all .3s ease}.rankings-container{padding:0;text-align:left;background-color:#fff;min-height:100vh}.rankings-hero{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;padding:4rem 2rem;text-align:center;position:relative;overflow:hidden}.rankings-hero:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,70 C30,100 70,0 100,70 L100,100 L0,100 Z" fill="rgba(255,255,255,0.05)"/></svg>');background-size:cover}.hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto 2rem}.title{font-size:2.8rem;font-weight:800;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.title-icon{font-size:2.2rem;color:var(--accent)}.subtitle{font-size:1.2rem;opacity:.9;max-width:600px;margin:0 auto;line-height:1.6}.hero-stats{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap}.stat{display:flex;flex-direction:column;align-items:center}.stat-number{font-size:2.2rem;font-weight:700;color:var(--accent);margin-bottom:.5rem}.stat-label{font-size:.9rem;text-transform:uppercase;letter-spacing:1px;opacity:.8}.rankings-controls{padding:2rem;background:var(--light);display:flex;flex-direction:column;gap:1.5rem;align-items:center}.search-box{position:relative;width:100%;max-width:500px}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--gray);z-index:2}.search-input{width:100%;padding:.8rem 1rem .8rem 3rem;border:1px solid var(--light-gray);border-radius:50px;font-size:1rem;transition:var(--transition);box-shadow:var(--shadow)}.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #0021471a}.filter-buttons{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}.filter-btn{padding:.6rem 1.2rem;background:#fff;border:1px solid var(--light-gray);border-radius:50px;font-size:.9rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.4rem}.filter-btn:hover{background:var(--light-gray)}.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.results-info{padding:1.5rem 2rem;background:#fff;border-bottom:1px solid var(--light-gray)}.results-info p{margin:0;color:var(--gray)}.rankings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;padding:2rem}.ranking-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);animation:fadeInUp .6s ease forwards;opacity:0;position:relative;display:flex;flex-direction:column}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.ranking-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}.featured-badge{position:absolute;top:1rem;right:1rem;background:var(--accent);color:#fff;padding:.4rem .8rem;border-radius:50px;font-size:.8rem;font-weight:600;z-index:3;display:flex;align-items:center;gap:.4rem}.image-wrapper{width:100%;height:180px;overflow:hidden;position:relative}.ranking-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s ease}.ranking-card:hover .ranking-image{transform:scale(1.05)}.image-overlay{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);padding:1rem;color:#fff;opacity:0;transition:var(--transition)}.ranking-card:hover .image-overlay{opacity:1}.ranking-meta{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem}.meta-item{display:flex;align-items:center;gap:.4rem}.ranking-info{padding:1.5rem;display:flex;flex-direction:column;flex-grow:1}.ranking-name{font-size:1.2rem;font-weight:700;margin:0 0 .8rem;color:var(--primary)}.ranking-description{color:var(--gray);margin:0 0 1rem;line-height:1.5;flex-grow:1}.ranking-regions{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--secondary);margin-bottom:1.5rem}.region-icon{font-size:.8rem}.ranking-actions{margin-top:auto}.ranking-link{display:inline-flex;align-items:center;gap:.5rem;background:var(--primary);color:#fff;padding:.6rem 1.2rem;border-radius:50px;text-decoration:none;font-weight:600;font-size:.9rem;transition:var(--transition)}.ranking-link:hover{background:var(--secondary);transform:translate(5px)}.link-icon{font-size:.8rem;transition:var(--transition)}.ranking-link:hover .link-icon{transform:translate(3px)}.loading-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;padding:2rem}.ranking-card-skeleton{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);height:350px}.skeleton-image{height:180px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite}.skeleton-content{padding:1.5rem}.skeleton-line{height:1rem;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite;margin-bottom:.8rem;border-radius:4px}.skeleton-line.short{width:60%}.skeleton-button{height:2.2rem;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:50px;margin-top:1rem}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.no-results{padding:4rem 2rem;text-align:center;color:var(--gray)}.no-results-icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.no-results h3{margin:0 0 .5rem;color:var(--dark)}@media (max-width: 768px){.title{font-size:2.2rem}.hero-stats{gap:2rem}.stat-number{font-size:1.8rem}.rankings-controls{padding:1.5rem}.filter-buttons{gap:.5rem}.filter-btn{padding:.5rem 1rem;font-size:.8rem}.rankings-grid{grid-template-columns:1fr;padding:1.5rem}}@media (max-width: 480px){.rankings-hero{padding:3rem 1.5rem}.title{font-size:1.8rem}.subtitle{font-size:1rem}.hero-stats{gap:1.5rem}.stat{flex:1;min-width:100px}.stat-number{font-size:1.5rem}.ranking-card{max-width:100%}}