/* roulang page: index */
:root {
            --bg-base: #f8fafc;
            --card-shadow: 0 4px 20px -2px rgba(30, 64, 175, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
            --card-hover-shadow: 0 20px 25px -5px rgba(30, 64, 175, 0.12), 0 10px 10px -5px rgba(30, 64, 175, 0.04);
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-color: var(--bg-base);
            color: #1e293b;
            scroll-behavior: smooth;
        }
        .custom-card {
            box-shadow: var(--card-shadow);
            transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .custom-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--card-hover-shadow);
        }
        .progress-line-active {
            background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%);
        }
        .tabular-num {
            font-variant-numeric: tabular-nums;
        }
        details > summary {
            list-style: none;
        }
        details > summary::-webkit-details-marker {
            display: none;
        }

/* roulang page: category2 */
:root {
      --bg-base: #f8fafc;
      --card-shadow: 0 4px 20px -2px rgba(30, 64, 175, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
      --card-hover-shadow: 0 20px 25px -5px rgba(30, 64, 175, 0.12), 0 10px 10px -5px rgba(30, 64, 175, 0.04);
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-base);
      color: #1e293b;
      scroll-behavior: smooth;
    }
    .custom-card {
      box-shadow: var(--card-shadow);
      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .custom-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--card-hover-shadow);
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

/* roulang page: category1 */
:root {
      --bg-base: #f8fafc;
      --card-shadow: 0 4px 20px -2px rgba(30, 64, 175, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
      --card-hover-shadow: 0 20px 25px -5px rgba(30, 64, 175, 0.12), 0 10px 10px -5px rgba(30, 64, 175, 0.04);
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-base);
      color: #1e293b;
      scroll-behavior: smooth;
    }
    .custom-card {
      box-shadow: var(--card-shadow);
      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .custom-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--card-hover-shadow);
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .badge-rank-1 {
      background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
      color: #ffffff;
    }
    .badge-rank-2 {
      background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
      color: #ffffff;
    }
    .badge-rank-3 {
      background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
      color: #ffffff;
    }