/* roulang page: index */
:root {
            --sm-bg-main: #0c0d14;
            --sm-bg-card: #141622;
            --sm-bg-surface: #1c1f30;
            --sm-border: #2a2e45;
            --sm-primary: #e50914;
            --sm-primary-hover: #ff3366;
            --sm-gold: #ffb703;
            --sm-cyan: #00f2fe;
            --sm-text: #f8fafc;
            --sm-text-muted: #94a3b8;
            --sm-text-dim: #64748b;
        }
        body {
            background-color: var(--sm-bg-main);
            color: var(--sm-text);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.75;
            overflow-x: hidden;
        }
        .text-glow-red {
            text-shadow: 0 0 16px rgba(229, 9, 20, 0.45);
        }
        .box-glow-red:hover {
            box-shadow: 0 8px 30px rgba(229, 9, 20, 0.25);
            border-color: rgba(229, 9, 20, 0.4);
        }
        .card-stream {
            background: linear-gradient(180deg, rgba(28, 31, 48, 0.95) 0%, rgba(20, 22, 34, 0.98) 100%);
            border: 1px solid var(--sm-border);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-stream:hover {
            transform: translateY(-5px);
            border-color: var(--sm-primary);
        }
        .menu-dropdown {
            visibility: hidden;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.25s ease-out;
        }
        .group-menu:hover .menu-dropdown {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }
        .scroll-smooth {
            scroll-behavior: smooth;
        }
        .gradient-banner {
            background: linear-gradient(180deg, rgba(12, 13, 20, 0.1) 0%, rgba(12, 13, 20, 0.9) 80%, #0c0d14 100%);
        }

/* roulang page: category2 */
:root {
      --sm-bg-main: #0c0d14;
      --sm-bg-card: #141622;
      --sm-bg-surface: #1c1f30;
      --sm-border: #2a2e45;
      --sm-primary: #e50914;
      --sm-primary-hover: #ff3366;
      --sm-gold: #ffb703;
      --sm-cyan: #00f2fe;
      --sm-text: #f8fafc;
      --sm-text-muted: #94a3b8;
      --sm-text-dim: #64748b;
    }
    body {
      background-color: var(--sm-bg-main);
      color: var(--sm-text);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    .text-glow-red {
      text-shadow: 0 0 16px rgba(229, 9, 20, 0.45);
    }
    .card-stream {
      background: linear-gradient(180deg, rgba(28, 31, 48, 0.95) 0%, rgba(20, 22, 34, 0.98) 100%);
      border: 1px solid var(--sm-border);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-stream:hover {
      transform: translateY(-5px);
      border-color: var(--sm-primary);
      box-shadow: 0 8px 30px rgba(229, 9, 20, 0.25);
    }
    .dropdown-panel {
      visibility: hidden;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.25s ease-out;
    }
    .group-menu:hover .dropdown-panel {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }

/* roulang page: category1 */
:root {
      --sm-bg-main: #0c0d14;
      --sm-bg-card: #141622;
      --sm-bg-surface: #1c1f30;
      --sm-border: #2a2e45;
      --sm-primary: #e50914;
      --sm-primary-hover: #ff3366;
      --sm-gold: #ffb703;
      --sm-cyan: #00f2fe;
      --sm-text: #f8fafc;
      --sm-text-muted: #94a3b8;
      --sm-text-dim: #64748b;
    }
    body {
      background-color: var(--sm-bg-main);
      color: var(--sm-text);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    .text-glow-red {
      text-shadow: 0 0 16px rgba(229, 9, 20, 0.45);
    }
    .card-stream {
      background: linear-gradient(180deg, rgba(28, 31, 48, 0.95) 0%, rgba(20, 22, 34, 0.98) 100%);
      border: 1px solid var(--sm-border);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-stream:hover {
      transform: translateY(-5px);
      border-color: var(--sm-primary);
      box-shadow: 0 12px 30px rgba(229, 9, 20, 0.22);
    }
    .group-menu:hover .dropdown-panel {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
    .dropdown-panel {
      visibility: hidden;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.25s ease-out;
    }
    .filter-item-active {
      background-color: var(--sm-primary);
      color: #ffffff;
      border-color: var(--sm-primary);
    }

/* roulang page: category4 */
:root {
      --sm-bg-main: #0c0d14;
      --sm-bg-card: #141622;
      --sm-bg-surface: #1c1f30;
      --sm-border: #2a2e45;
      --sm-primary: #e50914;
      --sm-primary-hover: #ff3366;
      --sm-gold: #ffb703;
      --sm-cyan: #00f2fe;
      --sm-text: #f8fafc;
      --sm-text-muted: #94a3b8;
      --sm-text-dim: #64748b;
    }
    body {
      background-color: var(--sm-bg-main);
      color: var(--sm-text);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    .text-glow-red {
      text-shadow: 0 0 16px rgba(229, 9, 20, 0.45);
    }
    .card-stream {
      background: linear-gradient(180deg, rgba(28, 31, 48, 0.95) 0%, rgba(20, 22, 34, 0.98) 100%);
      border: 1px solid var(--sm-border);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-stream:hover {
      transform: translateY(-5px);
      border-color: var(--sm-primary);
      box-shadow: 0 10px 25px -5px rgba(229, 9, 20, 0.3);
    }
    .group-menu .dropdown-panel {
      visibility: hidden;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.25s ease-out;
    }
    .group-menu:hover .dropdown-panel {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
    .filter-btn-active {
      background-color: #e50914;
      color: #ffffff;
      box-shadow: 0 2px 10px rgba(229, 9, 20, 0.4);
    }
    .filter-btn {
      transition: all 0.2s ease;
    }
    .filter-btn:hover:not(.filter-btn-active) {
      background-color: rgba(255, 255, 255, 0.08);
      color: #ffffff;
    }

/* roulang page: category3 */
:root {
      --sm-bg-main: #0c0d14;
      --sm-bg-card: #141622;
      --sm-bg-surface: #1c1f30;
      --sm-border: #2a2e45;
      --sm-primary: #e50914;
      --sm-primary-hover: #ff3366;
      --sm-gold: #ffb703;
      --sm-cyan: #00f2fe;
      --sm-text: #f8fafc;
      --sm-text-muted: #94a3b8;
      --sm-text-dim: #64748b;
    }
    body {
      background-color: var(--sm-bg-main);
      color: var(--sm-text);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    .text-glow-red {
      text-shadow: 0 0 16px rgba(229, 9, 20, 0.45);
    }
    .card-stream {
      background: linear-gradient(180deg, rgba(28, 31, 48, 0.95) 0%, rgba(20, 22, 34, 0.98) 100%);
      border: 1px solid var(--sm-border);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-stream:hover {
      transform: translateY(-5px);
      border-color: var(--sm-primary);
      box-shadow: 0 10px 30px -10px rgba(229, 9, 20, 0.35);
    }
    .dropdown-menu {
      visibility: hidden;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.25s ease-out;
    }
    .group-menu:hover .dropdown-menu {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }

/* roulang page: category5 */
:root {
      --sm-bg-main: #0c0d14;
      --sm-bg-card: #141622;
      --sm-bg-surface: #1c1f30;
      --sm-border: #2a2e45;
      --sm-primary: #e50914;
      --sm-primary-hover: #ff3366;
      --sm-gold: #ffb703;
      --sm-cyan: #00f2fe;
      --sm-text: #f8fafc;
      --sm-text-muted: #94a3b8;
      --sm-text-dim: #64748b;
    }
    body {
      background-color: var(--sm-bg-main);
      color: var(--sm-text);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    .text-glow-red {
      text-shadow: 0 0 16px rgba(229, 9, 20, 0.45);
    }
    .card-stream {
      background: linear-gradient(180deg, rgba(28, 31, 48, 0.95) 0%, rgba(20, 22, 34, 0.98) 100%);
      border: 1px solid var(--sm-border);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-stream:hover {
      transform: translateY(-5px);
      border-color: var(--sm-primary);
      box-shadow: 0 8px 30px rgba(229, 9, 20, 0.25);
    }
    .dropdown-panel {
      visibility: hidden;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.25s ease-out;
    }
    .group-menu:hover .dropdown-panel {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
    .filter-btn-active {
      background-color: var(--sm-primary);
      color: #ffffff;
      box-shadow: 0 0 12px rgba(229, 9, 20, 0.4);
    }
    .gold-badge {
      background: linear-gradient(135deg, #ffb703 0%, #fb8500 100%);
      color: #0c0d14;
    }