/* roulang page: index */
:root {
            --bg-main: #0F0D13;
            --bg-card: #181520;
            --gradient-brand: linear-gradient(135deg, #FF4B72 0%, #903AFF 100%);
            --gradient-warm: linear-gradient(135deg, #FFA03A 0%, #FF5A36 100%);
        }
        body {
            background-color: var(--bg-main);
            color: #F4F2F7;
            font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }
        .text-gradient {
            background: var(--gradient-brand);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .text-gradient-warm {
            background: var(--gradient-warm);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .btn-gradient {
            background: var(--gradient-brand);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-gradient:hover {
            opacity: 0.92;
            transform: translateY(-2px);
            box-shadow: 0 12px 28px -6px rgba(144, 58, 255, 0.5);
        }
        .card-surface {
            background-color: #181520;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.3s ease;
        }
        .card-surface:hover {
            border-color: rgba(144, 58, 255, 0.4);
            transform: translateY(-4px);
            box-shadow: 0 16px 36px -10px rgba(144, 58, 255, 0.25);
        }
        /* 隐藏滚动条 */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* roulang page: category1 */
:root {
      --bg-main: #0F0D13;
      --bg-card: #181520;
      --gradient-brand: linear-gradient(135deg, #FF4B72 0%, #903AFF 100%);
      --gradient-warm: linear-gradient(135deg, #FFA03A 0%, #FF5A36 100%);
    }
    body {
      background-color: var(--bg-main);
      color: #F4F2F7;
      font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .text-gradient {
      background: var(--gradient-brand);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .text-gradient-warm {
      background: var(--gradient-warm);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .btn-gradient {
      background: var(--gradient-brand);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-gradient:hover {
      opacity: 0.92;
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -6px rgba(144, 58, 255, 0.5);
    }
    .card-surface {
      background-color: #181520;
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.3s ease;
    }
    .card-surface:hover {
      border-color: rgba(144, 58, 255, 0.4);
      transform: translateY(-4px);
      box-shadow: 0 16px 36px -10px rgba(144, 58, 255, 0.25);
    }
    .badge-chip {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.2s ease;
    }
    .badge-chip:hover, .badge-chip.active {
      background: rgba(144, 58, 255, 0.15);
      border-color: #FF4B72;
      color: #FFF;
    }

/* roulang page: category2 */
:root {
      --bg-main: #0F0D13;
      --bg-card: #181520;
      --gradient-brand: linear-gradient(135deg, #FF4B72 0%, #903AFF 100%);
      --gradient-warm: linear-gradient(135deg, #FFA03A 0%, #FF5A36 100%);
    }
    body {
      background-color: var(--bg-main);
      color: #F4F2F7;
      font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .text-gradient {
      background: var(--gradient-brand);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .text-gradient-warm {
      background: var(--gradient-warm);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .btn-gradient {
      background: var(--gradient-brand);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-gradient:hover {
      opacity: 0.92;
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -6px rgba(144, 58, 255, 0.5);
    }
    .btn-warm {
      background: var(--gradient-warm);
      transition: all 0.3s ease;
    }
    .btn-warm:hover {
      opacity: 0.92;
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -6px rgba(255, 90, 54, 0.5);
    }
    .card-surface {
      background-color: #181520;
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.3s ease;
    }
    .card-surface:hover {
      border-color: rgba(144, 58, 255, 0.4);
      transform: translateY(-4px);
      box-shadow: 0 16px 36px -10px rgba(144, 58, 255, 0.25);
    }
    .filter-pill {
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.2s ease;
    }
    .filter-pill:hover, .filter-pill.active {
      background: var(--gradient-brand);
      border-color: transparent;
      color: #FFFFFF;
      box-shadow: 0 4px 16px rgba(144, 58, 255, 0.3);
    }
    .custom-scrollbar::-webkit-scrollbar {
      height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 9999px;
    }