.main-content{padding:2rem 0;background-color:#f8fafc;min-height:100vh;box-sizing:border-box;}.ranking-intro{background:white;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.06);text-align:center;}.ranking-intro h2{font-size:1.5rem;font-weight:600;color:#2d3748;margin:0 0 0.75rem 0;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.ranking-intro p{color:#718096;font-size:0.95rem;line-height:1.5;margin:0 auto;max-width:600px;}.rank-filter{background:white;border-radius:8px;padding:1rem 1.5rem;margin-bottom:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.06);}.rank-filter-wrapper{display:flex;gap:1.5rem;align-items:center;}.rank-filter-left,.rank-filter-right{display:flex;align-items:center;}.rank-filter-item{display:flex;align-items:center;gap:0.75rem;}.rank-filter-label{font-weight:500;color:#2d3748;white-space:nowrap;font-size:0.9rem;}.rank-filter-options{display:flex;gap:0.5rem;}.rank-filter-option{padding:0.4rem 0.8rem;border:1px solid #e2e8f0;border-radius:16px;cursor:pointer;transition:all 0.2s ease;font-weight:400;font-size:0.85rem;color:#4a5568;background:white;user-select:none;}.rank-filter-option:hover{border-color:#667eea;color:#667eea;transform:translateY(-1px);}.rank-filter-option.active{border-color:#667eea;background:#667eea;color:white;box-shadow:0 2px 6px rgba(102,126,234,0.25);}.ranking-main{background:white;border-radius:8px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.06);}.rank-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid #f1f5f9;}.rank-title-left h2{font-size:1.25rem;font-weight:600;color:#2d3748;margin:0;}.rank-title-info{color:#718096;font-size:0.8rem;}.rank-list{list-style:none;padding:0;margin:0;}.rank-item{display:flex;align-items:flex-start;padding:1rem 0;border-bottom:1px solid #f1f5f9;transition:all 0.2s ease;gap:0.75rem;}.rank-item:hover{background:#f8fafc;transform:translateX(2px);border-radius:6px;margin:0 -0.75rem;padding-left:0.75rem;padding-right:0.75rem;}.rank-item:last-child{border-bottom:none;}.rank-number{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem;border-radius:6px;flex-shrink:0;}.rank-number.top1{background:linear-gradient(135deg,#ffd700,#ffed4e);color:#b45309;box-shadow:0 4px 12px rgba(255,215,0,0.3);}.rank-number.top2{background:linear-gradient(135deg,#c0c0c0,#e2e8f0);color:#4a5568;box-shadow:0 4px 12px rgba(192,192,192,0.3);}.rank-number.top3{background:linear-gradient(135deg,#cd7f32,#d69e2e);color:#744210;box-shadow:0 4px 12px rgba(205,127,50,0.3);}.rank-item:nth-child(n+4) .rank-number{background:#f7fafc;color:#718096;border:2px solid #e2e8f0;}.rank-content{flex:1;min-width:0;}.rank-book-title{font-size:1rem;font-weight:500;color:#2d3748;margin:0 0 0.3rem 0;line-height:1.3;cursor:pointer;transition:color 0.2s ease;}.rank-book-title:hover{color:#667eea;}.rank-book-author{color:#718096;font-size:0.8rem;margin:0 0 0.3rem 0;font-weight:400;}.rank-book-tags{color:#a0aec0;font-size:0.75rem;line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.rank-info{display:flex;flex-direction:column;gap:0.2rem;min-width:160px;text-align:right;flex-shrink:0;}.rank-update-info{color:#718096;font-size:0.75rem;font-weight:400;}.rank-time{color:#a0aec0;font-size:0.7rem;}.book-info{flex:1;min-width:0;}.book-title{font-size:1.1rem;font-weight:600;color:#2d3748;margin:0 0 0.5rem 0;line-height:1.4;}.book-author{color:#718096;font-size:0.9rem;margin:0 0 0.5rem 0;}.book-desc{color:#a0aec0;font-size:0.85rem;line-height:1.4;margin:0 0 0.5rem 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.book-stats{display:flex;gap:1rem;font-size:0.85rem;color:#718096;}.book-stats span{display:flex;align-items:center;gap:0.25rem;}.book-actions{display:flex;flex-direction:column;gap:0.5rem;}.read-btn{padding:0.5rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;border-radius:6px;font-size:0.85rem;font-weight:500;cursor:pointer;transition:all 0.3s ease;}.read-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.3);}.collect-btn{padding:0.5rem;background:#f7fafc;color:#718096;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:all 0.3s ease;}.collect-btn:hover{color:#e53e3e;border-color:#e53e3e;}.empty-state{text-align:center;padding:4rem 2rem;color:#a0aec0;}.empty-state i{font-size:4rem;margin-bottom:1rem;color:#e2e8f0;}.empty-state p{font-size:1.1rem;margin:0;}@media (max-width:768px){.main-content{padding:1rem 0;}.ranking-intro{margin-bottom:1rem;padding:1rem;}.ranking-intro h2{font-size:1.25rem;}.ranking-intro p{font-size:0.85rem;}.rank-filter{margin-bottom:1rem;padding:0.75rem 1rem;}.rank-filter-wrapper{flex-direction:column;gap:1rem;align-items:flex-start;}.rank-filter-options{flex-wrap:wrap;}.ranking-main{padding:1rem;}.rank-title{flex-direction:column;align-items:flex-start;gap:0.25rem;margin-bottom:1rem;padding-bottom:0.5rem;}.rank-title-left h2{font-size:1.1rem;}.rank-title-info{font-size:0.75rem;}.rank-item{flex-direction:column;align-items:flex-start;gap:0.75rem;position:relative;padding:0.75rem 0;}.rank-item:hover{margin:0;padding:0.75rem;transform:none;}.rank-number{position:absolute;top:0.75rem;right:0;width:28px;height:28px;font-size:0.9rem;}.rank-content{width:100%;padding-right:40px;}.rank-info{text-align:left;min-width:auto;width:100%;}}