/* === Page Layout === */
    .rank-list-page {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 20px;
    }

    /* === List Header === */
    .rank-list-header {
      background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
      padding: 40px 0 32px;
      position: relative;
      overflow: hidden;
    }

    .rank-list-header::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,20 Q180,10 360,30 Q540,50 720,15 Q900,0 1080,30 Q1260,50 1440,10 L1440,60 Z' fill='%2322c55e' fill-opacity='0.05'/%3E%3C/svg%3E") no-repeat bottom/cover;
      pointer-events: none;
    }

    .rank-list-header-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 20px;
      position: relative;
      z-index: 1;
    }

    .rank-title-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }

    .rank-title-row h1 {
      font-size: 28px;
      font-weight: 700;
    }

    .rank-desc {
      font-size: 14px;
      color: var(--text-secondary);
      max-width: 500px;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    /* === Time Tabs === */
    .time-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 24px;
    }

    .time-tab {
      padding: 8px 22px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      background: var(--white);
      color: var(--text-secondary);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
    }

    .time-tab:hover {
      border-color: var(--primary-light);
      color: var(--primary);
    }

    .time-tab.active {
      background: var(--primary);
      color: var(--white);
      border-color: var(--primary);
      font-weight: 600;
    }

    /* === Stats Row === */
    .stats-row {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
    }

    .stats-row .stat-card {
      flex: 1;
    }

    /* === Main Content === */
    .rank-list-main {
      display: flex;
      gap: 24px;
      padding-bottom: 60px;
    }

    /* === List Column === */
    .rank-list-col {
      flex: 1;
      min-width: 0;
    }

    /* === Top 3 Cards === */
    .top3-hero {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
    }

    .top3-hero-card {
      flex: 1;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px 16px;
      text-align: center;
      position: relative;
      transition: all 0.3s;
      cursor: pointer;
      overflow: hidden;
    }

    .top3-hero-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }

    .top3-hero-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
    }

    .top3-hero-card.rank-1st::before {
      background: linear-gradient(90deg, #fbbf24, #f59e0b);
    }

    .top3-hero-card.rank-2nd::before {
      background: linear-gradient(90deg, #cbd5e1, #94a3b8);
    }

    .top3-hero-card.rank-3rd::before {
      background: linear-gradient(90deg, #fcd34d, #d97706);
    }

    .top3-crown {
      position: absolute;
      top: 8px;
      right: 12px;
      font-size: 20px;
    }

    .top3-hero-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
    }

    .top3-hero-card.rank-1st .top3-hero-avatar {
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      color: #92400e;
      box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
    }

    .top3-hero-card.rank-2nd .top3-hero-avatar {
      background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
      color: #475569;
    }

    .top3-hero-card.rank-3rd .top3-hero-avatar {
      background: linear-gradient(135deg, #ffedd5, #fed7aa);
      color: #9a3412;
    }

    .top3-hero-rank {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    .top3-hero-name {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .top3-hero-score {
      font-size: 22px;
      font-weight: 700;
      color: var(--primary);
    }

    .top3-hero-meta {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* === List Table Header === */
    .list-table-header {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      background: var(--bg-gray);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    .list-col-rank { width: 50px; text-align: center; }
    .list-col-content { flex: 1; }
    .list-col-author { width: 120px; text-align: center; }
    .list-col-score { width: 100px; text-align: center; }
    .list-col-reads { width: 90px; text-align: center; }
    .list-col-comments { width: 80px; text-align: center; }

    /* === List Items === */
    .list-item {
      display: flex;
      align-items: center;
      padding: 14px 16px;
      background: var(--white);
      border-radius: 8px;
      margin-bottom: 4px;
      border: 1px solid transparent;
      transition: all 0.2s;
      cursor: pointer;
    }

    .list-item:hover {
      border-color: var(--primary-light);
      box-shadow: var(--shadow-sm);
      background: #fafafa;
    }

    .list-item .rank-cell {
      width: 50px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .list-item .content-cell {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .content-thumb {
      width: 56px;
      height: 56px;
      border-radius: 8px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      position: relative;
      overflow: hidden;
    }

    .content-thumb.bg-1 { background: linear-gradient(135deg, #fef3c7, #fde68a); }
    .content-thumb.bg-2 { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }
    .content-thumb.bg-3 { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
    .content-thumb.bg-4 { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); }
    .content-thumb.bg-5 { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); }
    .content-thumb.bg-6 { background: linear-gradient(135deg, #fef2f2, #fecaca); }

    .content-info {
      min-width: 0;
    }

    .content-title {
      font-size: 15px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 4px;
    }

    .content-tags {
      display: flex;
      gap: 6px;
    }

    .content-tag {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 4px;
      background: var(--bg-gray);
      color: var(--text-muted);
    }

    .list-item .author-cell {
      width: 120px;
      text-align: center;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .list-item .score-cell {
      width: 100px;
      text-align: center;
      font-size: 15px;
      font-weight: 600;
      color: var(--primary);
    }

    .score-trend {
      font-size: 11px;
      font-weight: 400;
    }

    .score-trend.up { color: var(--red); }
    .score-trend.down { color: #22c55e; }
    .score-trend.same { color: var(--text-muted); }

    .list-item .reads-cell {
      width: 90px;
      text-align: center;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .list-item .comments-cell {
      width: 80px;
      text-align: center;
      font-size: 13px;
      color: var(--text-secondary);
    }

    /* === Sidebar === */
    .rank-sidebar {
      width: 300px;
      flex-shrink: 0;
    }

    .sidebar-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 20px;
    }

    .sidebar-card h3 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f3f4f6;
    }

    .sidebar-desc p {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-bottom: 12px;
    }

    .sidebar-desc .desc-stats {
      display: flex;
      gap: 16px;
      font-size: 13px;
      color: var(--text-muted);
    }

    .sidebar-desc .desc-stats span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .sidebar-share {
      display: flex;
      gap: 8px;
    }

    .share-btn {
      flex: 1;
      padding: 10px 8px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--white);
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-family: inherit;
    }

    .share-btn:hover {
      background: var(--bg-gray);
      border-color: #d1d5db;
    }

    .related-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid #f9fafb;
      cursor: pointer;
      transition: color 0.2s;
    }

    .related-item:last-child {
      border-bottom: none;
    }

    .related-item:hover {
      color: var(--primary);
    }

    .related-item .ri-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .related-item .ri-info {
      flex: 1;
      min-width: 0;
    }

    .related-item .ri-title {
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .related-item .ri-count {
      font-size: 12px;
      color: var(--text-muted);
    }

    /* === Responsive === */
    @media (max-width: 1024px) {
      .rank-list-main {
        flex-direction: column;
      }

      .rank-sidebar {
        width: 100%;
      }

      .list-col-author,
      .list-col-comments {
        display: none;
      }

      .list-item .author-cell,
      .list-item .comments-cell {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .top3-hero {
        flex-direction: column;
      }

      .stats-row {
        flex-wrap: wrap;
      }

      .stats-row .stat-card {
        min-width: calc(50% - 8px);
      }

      .time-tabs {
        flex-wrap: wrap;
      }

      .rank-title-row h1 {
        font-size: 22px;
      }

      .list-col-reads {
        display: none;
      }

      .list-item .reads-cell {
        display: none;
      }
    }