/* roulang page: index */
:root {
            --bg-base: #0D0F12;
            --bg-card: #15181E;
            --live-accent: #FF2A6D;
            --monitor-cyan: #05D9E8;
            --status-green: #00F5D4;
        }
        body {
            background-color: var(--bg-base);
            color: #F1F5F9;
            font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
            overflow-x: hidden;
            padding-bottom: 74px;
        }
        .monitor-reticle {
            position: relative;
        }
        .monitor-reticle::before, .monitor-reticle::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            pointer-events: none;
            border-color: rgba(5, 217, 232, 0.4);
        }
        .monitor-reticle::before {
            top: 4px;
            left: 4px;
            border-top: 1.5px solid var(--monitor-cyan);
            border-left: 1.5px solid var(--monitor-cyan);
        }
        .monitor-reticle::after {
            bottom: 4px;
            right: 4px;
            border-bottom: 1.5px solid var(--monitor-cyan);
            border-right: 1.5px solid var(--monitor-cyan);
        }
        .glow-accent {
            box-shadow: 0 0 15px rgba(255, 42, 109, 0.35);
        }
        .glow-cyan {
            box-shadow: 0 0 15px rgba(5, 217, 232, 0.25);
        }
        .waveform-bar {
            animation: waveMotion 1.2s ease-in-out infinite alternate;
        }
        @keyframes waveMotion {
            0% { height: 15%; }
            100% { height: 95%; }
        }
        .stream-ticker {
            display: flex;
            width: max-content;
            animation: tickerRun 28s linear infinite;
        }
        @keyframes tickerRun {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

/* roulang page: category1 */
:root {
      --bg-base: #0D0F12;
      --bg-card: #15181E;
      --live-accent: #FF2A6D;
      --monitor-cyan: #05D9E8;
      --status-green: #00F5D4;
    }
    body {
      background-color: var(--bg-base);
      color: #F1F5F9;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
      overflow-x: hidden;
      padding-bottom: 74px;
    }
    .waveform-bar {
      animation: waveMotion 1.2s ease-in-out infinite alternate;
    }
    @keyframes waveMotion {
      0% { height: 20%; }
      100% { height: 100%; }
    }
    .scope-target {
      position: relative;
    }
    .scope-target::before {
      content: '';
      position: absolute;
      top: 8px;
      left: 8px;
      width: 10px;
      height: 10px;
      border-top: 2px solid #05D9E8;
      border-left: 2px solid #05D9E8;
      pointer-events: none;
      z-index: 20;
    }
    .scope-target::after {
      content: '';
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #05D9E8;
      border-right: 2px solid #05D9E8;
      pointer-events: none;
      z-index: 20;
    }