/* roulang page: index */
:root {
            --bg-main: #0b0d10;
            --bg-card: #14171f;
            --primary-red: #e50914;
            --border-hairline: rgba(255, 255, 255, 0.08);
        }
        body {
            background-color: var(--bg-main);
            color: #94a3b8;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }
        .hairline-border {
            border: 1px solid var(--border-hairline);
        }
        .cinema-ticket-edge {
            background-image: radial-gradient(circle at left, transparent 8px, #14171f 8.5px),
                              radial-gradient(circle at right, transparent 8px, #14171f 8.5px);
            background-size: 100% 100%;
        }
        .perforated-line {
            background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 0%);
            background-position: right;
            background-size: 1px 10px;
            background-repeat: repeat-y;
        }
        .custom-scroll::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        .custom-scroll::-webkit-scrollbar-thumb {
            background: #e50914;
            border-radius: 2px;
        }

/* roulang page: category2 */
:root {
      --bg-main: #0b0d10;
      --bg-card: #14171f;
      --primary-red: #e50914;
      --border-hairline: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: #94a3b8;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .hairline-border {
      border: 1px solid var(--border-hairline);
    }
    .cinema-ticket-edge {
      background-image: radial-gradient(circle at left, transparent 8px, #14171f 8.5px),
                        radial-gradient(circle at right, transparent 8px, #14171f 8.5px);
      background-size: 100% 100%;
    }
    .glow-red {
      box-shadow: 0 0 25px rgba(229, 9, 20, 0.25);
    }
    .glow-red-hover:hover {
      box-shadow: 0 0 30px rgba(229, 9, 20, 0.35);
      border-color: rgba(229, 9, 20, 0.5);
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #07080a;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 2px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #e50914;
    }

/* roulang page: category1 */
:root {
        --bg-main: #0b0d10;
        --bg-card: #14171f;
        --primary-red: #e50914;
        --border-hairline: rgba(255, 255, 255, 0.08);
      }
      body {
        background-color: var(--bg-main);
        color: #94a3b8;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        overflow-x: hidden;
      }
      .hairline-border {
        border: 1px solid var(--border-hairline);
      }
      .cinema-ticket-edge {
        background-image: radial-gradient(circle at left, transparent 8px, #14171f 8.5px),
                          radial-gradient(circle at right, transparent 8px, #14171f 8.5px);
        background-size: 100% 100%;
      }
      .glow-red {
        box-shadow: 0 0 25px rgba(229, 9, 20, 0.25);
      }
      .glow-border-hover:hover {
        border-color: rgba(229, 9, 20, 0.5);
        box-shadow: 0 0 20px rgba(229, 9, 20, 0.2);
      }
      .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
      }
      .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(229, 9, 20, 0.4);
        border-radius: 2px;
      }