/* roulang page: index */
:root {
            --bg-main: #0B0B0E;
            --bg-secondary: #14141A;
            --bg-card: #181822;
            --border-primary: #22222D;
            --color-primary: #FF2E63;
            --color-secondary: #9D4EDD;
            --color-accent: #00F5D4;
            --text-heading: #F8F9FA;
            --text-body: #B4B4C4;
            --text-muted: #6C6C80;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--bg-main);
            color: var(--text-body);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0B0B0E;
        }
        ::-webkit-scrollbar-thumb {
            background: #252533;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #FF2E63;
        }

        .hero-mask {
            background: linear-gradient(180deg, rgba(11, 11, 14, 0.45) 0%, rgba(11, 11, 14, 0.85) 60%, #0B0B0E 100%),
                        radial-gradient(circle at 80% 20%, rgba(157, 78, 221, 0.25) 0%, transparent 60%);
        }

        .card-glow {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .card-glow:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 46, 99, 0.45);
            box-shadow: 0 12px 30px -10px rgba(255, 46, 99, 0.25);
        }

        .badge-amber {
            background: rgba(0, 245, 212, 0.12);
            color: #00F5D4;
            border: 1px solid rgba(0, 245, 212, 0.3);
        }

        .badge-crimson {
            background: rgba(255, 46, 99, 0.12);
            color: #FF2E63;
            border: 1px solid rgba(255, 46, 99, 0.3);
        }

        .nav-glass {
            background: rgba(11, 11, 14, 0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .media-ratio-16-9 {
            aspect-ratio: 16 / 9;
        }

        .media-ratio-3-4 {
            aspect-ratio: 3 / 4;
        }

        .bg-grid-pattern {
            background-image: radial-gradient(rgba(255, 46, 99, 0.08) 1px, transparent 1px);
            background-size: 28px 28px;
        }

/* roulang page: category1 */
:root {
      --bg-main: #0B0B0E;
      --bg-secondary: #14141A;
      --bg-card: #181822;
      --border-primary: #22222D;
      --color-primary: #FF2E63;
      --color-secondary: #9D4EDD;
      --color-accent: #00F5D4;
      --text-heading: #F8F9FA;
      --text-body: #B4B4C4;
      --text-muted: #6C6C80;
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-body);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.65;
      overflow-x: hidden;
    }
    .card-glow {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .card-glow:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 46, 99, 0.45);
      box-shadow: 0 12px 30px -10px rgba(255, 46, 99, 0.25);
    }
    .badge-amber {
      background: rgba(0, 245, 212, 0.12);
      color: #00F5D4;
      border: 1px solid rgba(0, 245, 212, 0.3);
    }
    .badge-crimson {
      background: rgba(255, 46, 99, 0.12);
      color: #FF2E63;
      border: 1px solid rgba(255, 46, 99, 0.3);
    }
    .nav-glass {
      background: rgba(11, 11, 14, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .media-ratio-16-9 {
      aspect-ratio: 16 / 9;
    }
    .media-ratio-3-4 {
      aspect-ratio: 3 / 4;
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

/* roulang page: category2 */
:root {
      --bg-main: #0B0B0E;
      --bg-secondary: #14141A;
      --bg-card: #181822;
      --border-primary: #22222D;
      --color-primary: #FF2E63;
      --color-secondary: #9D4EDD;
      --color-accent: #00F5D4;
      --text-heading: #F8F9FA;
      --text-body: #B4B4C4;
      --text-muted: #6C6C80;
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-body);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.65;
      overflow-x: hidden;
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(11, 11, 14, 0.45) 0%, rgba(11, 11, 14, 0.85) 60%, #0B0B0E 100%),
                  radial-gradient(circle at 80% 20%, rgba(157, 78, 221, 0.25) 0%, transparent 60%);
    }
    .card-glow {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .card-glow:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 46, 99, 0.45);
      box-shadow: 0 12px 30px -10px rgba(255, 46, 99, 0.25);
    }
    .badge-amber {
      background: rgba(0, 245, 212, 0.12);
      color: #00F5D4;
      border: 1px solid rgba(0, 245, 212, 0.3);
    }
    .badge-crimson {
      background: rgba(255, 46, 99, 0.12);
      color: #FF2E63;
      border: 1px solid rgba(255, 46, 99, 0.3);
    }
    .nav-glass {
      background: rgba(11, 11, 14, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .media-ratio-16-9 {
      aspect-ratio: 16 / 9;
    }
    .media-ratio-3-4 {
      aspect-ratio: 3 / 4;
    }
    .bg-grid-pattern {
      background-image: radial-gradient(rgba(255, 46, 99, 0.08) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

/* roulang page: category4 */
:root {
            --bg-main: #0B0B0E;
            --bg-secondary: #14141A;
            --bg-card: #181822;
            --border-primary: #22222D;
            --color-primary: #FF2E63;
            --color-secondary: #9D4EDD;
            --color-accent: #00F5D4;
            --text-heading: #F8F9FA;
            --text-body: #B4B4C4;
            --text-muted: #6C6C80;
        }
        body {
            background-color: var(--bg-main);
            color: var(--text-body);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
        }
        .card-glow {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .card-glow:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 46, 99, 0.45);
            box-shadow: 0 12px 30px -10px rgba(255, 46, 99, 0.25);
        }
        .badge-amber {
            background: rgba(0, 245, 212, 0.12);
            color: #00F5D4;
            border: 1px solid rgba(0, 245, 212, 0.3);
        }
        .badge-crimson {
            background: rgba(255, 46, 99, 0.12);
            color: #FF2E63;
            border: 1px solid rgba(255, 46, 99, 0.3);
        }
        .nav-glass {
            background: rgba(11, 11, 14, 0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        .media-ratio-16-9 {
            aspect-ratio: 16 / 9;
        }
        .media-ratio-3-4 {
            aspect-ratio: 3 / 4;
        }
        .bg-grid-pattern {
            background-image: radial-gradient(rgba(255, 46, 99, 0.08) 1px, transparent 1px);
            background-size: 28px 28px;
        }
        .custom-scrollbar::-webkit-scrollbar {
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #14141A;
            border-radius: 9999px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #2A2A38;
            border-radius: 9999px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #FF2E63;
        }