body,html{background-color:#000}main{background:#000}.recommend-hero{text-align:center;padding:40px 0;background:linear-gradient(135deg,#ff4f39 0,coral 100%);color:#fff;border-radius:8px;margin-bottom:30px}.recommend-hero .hero-title{font-size:2.5rem;margin-bottom:10px}.recommend-hero .hero-desc{font-size:1.1rem;opacity:.9}.tag-cloud-section{margin:0 auto}.tag-cloud-section .tag-cloud-wrapper{position:relative;padding:40px 20px;border-radius:20px;overflow:hidden}.tag-cloud-section .tag-cloud-wrapper::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.2) 50%,transparent 100%)}.tag-cloud-section .section-header{position:relative;z-index:3;text-align:center;margin-bottom:30px}.tag-cloud-section .section-header h2{font-size:2.2rem;color:#fff;margin-bottom:10px;text-shadow:0 2px 10px rgba(255,79,57,.3);background:linear-gradient(135deg,#fff 0,#ff4f39 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.tag-cloud-section .section-header p{color:rgba(255,255,255,.7);font-size:1.1rem}.tag-cloud-section .tag-cloud-container{width:600px;height:500px;margin:0 auto;position:relative}.tag-cloud-section .tag-cloud-container canvas{cursor:pointer;position:relative;z-index:2;filter:drop-shadow(0 0 8px rgba(255, 79, 57, .2))}.tag-cloud-section .tag-cloud-container #tagList{display:none}.tag-cloud-section .tag-cloud-container .tech-bg{position:absolute;top:-50px;left:-50px;right:-50px;bottom:-50px;z-index:1;overflow:hidden}.tag-cloud-section .tag-cloud-container .tech-bg .circle-group{position:absolute;width:100%;height:100%}.tag-cloud-section .tag-cloud-container .tech-bg .circle-group .circle{position:absolute;border-radius:50%;background:radial-gradient(circle at center,rgba(255,79,57,.15) 0,rgba(255,79,57,.05) 50%,transparent 100%);animation:pulse 8s infinite}.tag-cloud-section .tag-cloud-container .tech-bg .circle-group .circle:nth-child(1){width:400px;height:400px;top:10%;left:10%}.tag-cloud-section .tag-cloud-container .tech-bg .circle-group .circle:nth-child(2){width:300px;height:300px;bottom:20%;right:15%;animation-delay:-3s}.tag-cloud-section .tag-cloud-container .tech-bg .circle-group .circle:nth-child(3){width:200px;height:200px;top:30%;right:25%;animation-delay:-5s}.tag-cloud-section .tag-cloud-container .tech-bg .grid{position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:30px 30px;transform:perspective(1000px) rotateX(60deg) scale(2);transform-origin:50% 100%;animation:grid-move 30s linear infinite;opacity:.5}.tag-cloud-section .tag-cloud-container .tech-bg .glow{position:absolute;top:50%;left:50%;width:500px;height:500px;transform:translate(-50%,-50%);background:radial-gradient(circle at center,rgba(255,79,57,.1) 0,transparent 70%);animation:glow 4s ease-in-out infinite alternate}@keyframes pulse{0%,100%{transform:scale(1) translate(0,0);opacity:.3}50%{transform:scale(1.1) translate(-10px,10px);opacity:.5}}@keyframes grid-move{from{background-position:0 0}to{background-position:30px 30px}}@keyframes glow{from{opacity:.4;transform:translate(-50%,-50%) scale(.9)}to{opacity:.6;transform:translate(-50%,-50%) scale(1.1)}}.ranking-section{margin:40px 0}.ranking-section .ranking-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media (max-width:992px){.ranking-section .ranking-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.ranking-section .ranking-grid{grid-template-columns:1fr}}.ranking-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);overflow:hidden}.ranking-card .ranking-header{display:flex;justify-content:center;align-items:center;padding:15px;border-bottom:1px solid #eee}.ranking-card .ranking-header h3{margin:0;font-size:16px;font-weight:500}.ranking-card .ranking-header .more-link{color:#666;font-size:14px;text-decoration:none}.ranking-card .ranking-header .more-link:hover{color:#ff4f39}.ranking-card .ranking-list .ranking-item{display:flex;align-items:center;padding:12px 15px;text-decoration:none;color:inherit;transition:background-color .3s}.ranking-card .ranking-list .ranking-item:hover{background:#f5f5f5}.ranking-card .ranking-list .ranking-item .rank{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;margin-right:12px;font-weight:500;font-size:14px}.ranking-card .ranking-list .ranking-item .rank.rank-1{background:gold;color:#fff}.ranking-card .ranking-list .ranking-item .rank.rank-2{background:silver;color:#fff}.ranking-card .ranking-list .ranking-item .rank.rank-3{background:#cd7f32;color:#fff}.ranking-card .ranking-list .ranking-item .item-info{flex:1;min-width:0}.ranking-card .ranking-list .ranking-item .item-info h4{margin:0 0 4px;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ranking-card .ranking-list .ranking-item .item-info .item-meta{display:flex;gap:10px;font-size:12px;color:#999}.ranking-card .ranking-list .ranking-item .item-info .item-meta .category{color:#ff4f39}@media (max-width:768px){.recommend-hero{padding:30px 15px;border-radius:0}.recommend-hero .hero-title{font-size:1.8rem}.recommend-hero .hero-desc{font-size:1rem}.tag-cloud-section{margin:30px 0}.tag-cloud-section .tag-cloud-wrapper{padding:30px 15px;border-radius:15px}.tag-cloud-section .section-header h2{font-size:1.8rem}.tag-cloud-section .section-header p{font-size:1rem}.tag-cloud-section .tag-cloud-container{width:100%;height:350px}.tag-cloud-section .tag-cloud-container canvas{width:100%!important;height:350px!important}.tag-cloud-section .tag-cloud-container .tech-bg .circle-group .circle:nth-child(1){width:200px;height:200px}.tag-cloud-section .tag-cloud-container .tech-bg .circle-group .circle:nth-child(2){width:150px;height:150px}.tag-cloud-section .tag-cloud-container .tech-bg .circle-group .circle:nth-child(3){width:100px;height:100px}.tag-cloud-section .tag-cloud-container .tech-bg .grid{background-size:20px 20px}.ranking-card .ranking-header{padding:12px}.ranking-card .ranking-list .ranking-item{padding:10px 12px}}