/* roulang page: index */
:root {
      --bg-dark: #0a0b0e;
      --bg-card: #12141a;
      --pink-neon: #ff2a6d;
      --green-neon: #05ffa1;
      --border-line: rgba(255, 42, 109, 0.18);
    }
    body {
      background-color: var(--bg-dark);
      color: #e2e8f0;
      overflow-x: hidden;
    }
    .pixel-corners {
      clip-path: polygon(
        0 4px, 4px 4px, 4px 0,
        calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
        100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
        4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
      );
    }
    .pixel-btn-pink {
      background-color: var(--pink-neon);
      color: #ffffff;
      box-shadow: 0 0 14px rgba(255, 42, 109, 0.45);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .pixel-btn-pink:hover {
      transform: translate(2px, 2px);
      box-shadow: 0 0 20px rgba(255, 42, 109, 0.7);
    }
    .pixel-btn-outline {
      border: 1px solid var(--green-neon);
      color: var(--green-neon);
      transition: all 0.15s ease;
    }
    .pixel-btn-outline:hover {
      background: rgba(5, 255, 161, 0.12);
      transform: translate(2px, 2px);
    }
    .scanline-grid {
      background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 32px 32px;
    }
    .nav-scrolled {
      background: rgba(10, 11, 14, 0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-line);
    }

/* roulang page: category1 */
:root {
            --bg-dark: #0a0b0e;
            --bg-card: #12141a;
            --pink-neon: #ff2a6d;
            --green-neon: #05ffa1;
            --border-line: rgba(255, 42, 109, 0.18);
        }
        body {
            background-color: var(--bg-dark);
            color: #e2e8f0;
            overflow-x: hidden;
            font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }
        .pixel-btn-pink {
            background-color: var(--pink-neon);
            color: #ffffff;
            box-shadow: 0 0 14px rgba(255, 42, 109, 0.45);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .pixel-btn-pink:hover {
            transform: translate(2px, 2px);
            box-shadow: 0 0 20px rgba(255, 42, 109, 0.7);
        }
        .pixel-btn-outline {
            border: 1px solid var(--green-neon);
            color: var(--green-neon);
            transition: all 0.15s ease;
        }
        .pixel-btn-outline:hover {
            background: rgba(5, 255, 161, 0.12);
            transform: translate(2px, 2px);
        }
        .scanline-grid {
            background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 32px 32px;
        }
        .pixel-corners {
            clip-path: polygon(
                0 4px, 4px 4px, 4px 0,
                calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
                100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
                4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
            );
        }
        .pixel-box-border {
            border: 1px solid rgba(255, 42, 109, 0.25);
            position: relative;
        }
        .pixel-box-border::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            width: 6px;
            height: 6px;
            background-color: var(--pink-neon);
        }
        .pixel-box-border::after {
            content: '';
            position: absolute;
            bottom: -2px;
            right: -2px;
            width: 6px;
            height: 6px;
            background-color: var(--green-neon);
        }
        .tag-active {
            background: rgba(255, 42, 109, 0.15);
            border-color: var(--pink-neon);
            color: #ffffff;
            box-shadow: 0 0 10px rgba(255, 42, 109, 0.3);
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #232733;
            border-radius: 2px;
        }