/* roulang page: index */
:root {
            --bg-main: #0A0D14;
            --bg-card: #161B26;
            --border-card: rgba(255, 255, 255, 0.08);
            --amber-primary: #F59E0B;
            --amber-glow: rgba(245, 158, 11, 0.25);
            --text-main: #FFFFFF;
            --text-muted: #94A3B8;
        }

        body {
            background-color: var(--bg-main);
            color: #E2E8F0;
            overflow-x: hidden;
            font-feature-settings: "cv02", "cv03", "cv04", "cv11";
        }

        /* 沉浸式流媒体滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0A0D14;
        }
        ::-webkit-scrollbar-thumb {
            background: #252D3D;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #F59E0B;
        }

        .hero-mesh {
            background: radial-gradient(circle at 50% 20%, rgba(245, 158, 11, 0.12) 0%, transparent 60%),
                        radial-gradient(circle at 80% 40%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
                        #0A0D14;
        }

        .glass-panel {
            background: rgba(22, 27, 38, 0.75);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .stream-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .stream-card:hover {
            transform: translateY(-6px);
            border-color: rgba(245, 158, 11, 0.45);
            box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px 0 rgba(245, 158, 11, 0.15);
        }

        .badge-4k {
            background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
            color: #000;
            font-weight: 800;
        }
        .badge-hdr {
            background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
            color: #FFF;
        }
        .badge-sound {
            background: linear-gradient(135deg, #06B6D4 0%, #0284C7 100%);
            color: #FFF;
        }

        /* 隐藏原生折叠三角 */
        details summary::-webkit-details-marker {
            display: none;
        }
        details summary {
            list-style: none;
        }

/* roulang page: category1 */
:root {
      --bg-main: #0A0D14;
      --bg-card: #161B26;
      --border-card: rgba(255, 255, 255, 0.08);
      --amber-primary: #F59E0B;
      --amber-glow: rgba(245, 158, 11, 0.25);
      --text-main: #FFFFFF;
      --text-muted: #94A3B8;
    }
    body {
      background-color: var(--bg-main);
      color: #E2E8F0;
      overflow-x: hidden;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    .glass-panel {
      background-color: rgba(10, 13, 20, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .hero-mesh {
      background: radial-gradient(circle at 50% 20%, rgba(245, 158, 11, 0.12) 0%, transparent 60%),
                  radial-gradient(circle at 80% 40%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
                  #0A0D14;
    }
    .stream-card {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .stream-card:hover {
      transform: translateY(-6px);
      border-color: rgba(245, 158, 11, 0.45);
      box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px 0 rgba(245, 158, 11, 0.15);
    }
    .badge-4k {
      background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
      color: #000;
      font-weight: 800;
    }
    .badge-hdr {
      background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
      color: #FFF;
    }
    .badge-sound {
      background: linear-gradient(135deg, #06B6D4 0%, #0284C7 100%);
      color: #FFF;
    }
    .filter-chip {
      transition: all 0.2s ease;
    }
    .filter-chip.active {
      background-color: #F59E0B;
      color: #000000;
      font-weight: 700;
      box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
    }
    .filter-chip:not(.active):hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #FFFFFF;
    }
    /* 自定义滚动条 */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #0A0D14;
    }
    ::-webkit-scrollbar-thumb {
      background: #272F3E;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #F59E0B;
    }

/* roulang page: category2 */
:root {
      --bg-main: #0A0D14;
      --bg-card: #161B26;
      --border-card: rgba(255, 255, 255, 0.08);
      --amber-primary: #F59E0B;
      --amber-glow: rgba(245, 158, 11, 0.25);
      --text-main: #FFFFFF;
      --text-muted: #94A3B8;
    }
    body {
      background-color: var(--bg-main);
      color: #E2E8F0;
      overflow-x: hidden;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    }
    .glass-panel {
      background: rgba(16, 22, 34, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .stream-card {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .stream-card:hover {
      transform: translateY(-6px);
      border-color: rgba(245, 158, 11, 0.45);
      box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px 0 rgba(245, 158, 11, 0.15);
    }
    .badge-4k {
      background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
      color: #000;
      font-weight: 800;
    }
    .badge-hdr {
      background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
      color: #FFF;
    }
    .badge-sound {
      background: linear-gradient(135deg, #06B6D4 0%, #0284C7 100%);
      color: #FFF;
    }
    .custom-scroll::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 9999px;
    }

/* roulang page: category4 */
:root {
      --bg-main: #0A0D14;
      --bg-card: #161B26;
      --border-card: rgba(255, 255, 255, 0.08);
      --amber-primary: #F59E0B;
      --amber-glow: rgba(245, 158, 11, 0.25);
      --text-main: #FFFFFF;
      --text-muted: #94A3B8;
    }
    body {
      background-color: var(--bg-main);
      color: #E2E8F0;
      overflow-x: hidden;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    }
    .glass-panel {
      background: rgba(10, 13, 20, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .stream-card {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .stream-card:hover {
      transform: translateY(-6px);
      border-color: rgba(245, 158, 11, 0.45);
      box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px 0 rgba(245, 158, 11, 0.15);
    }
    .badge-4k {
      background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
      color: #000;
      font-weight: 800;
    }
    .badge-hdr {
      background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
      color: #FFF;
    }
    .badge-sound {
      background: linear-gradient(135deg, #06B6D4 0%, #0284C7 100%);
      color: #FFF;
    }
    .badge-remux {
      background: linear-gradient(135deg, #10B981 0%, #047857 100%);
      color: #FFF;
    }
    .search-chip {
      transition: all 0.2s ease;
    }
    .search-chip:hover {
      border-color: #F59E0B;
      color: #F59E0B;
      background-color: rgba(245, 158, 11, 0.05);
    }

/* roulang page: category3 */
:root {
      --bg-main: #0A0D14;
      --bg-card: #161B26;
      --border-card: rgba(255, 255, 255, 0.08);
      --amber-primary: #F59E0B;
      --amber-glow: rgba(245, 158, 11, 0.25);
      --text-main: #FFFFFF;
      --text-muted: #94A3B8;
    }
    body {
      background-color: var(--bg-main);
      color: #E2E8F0;
      overflow-x: hidden;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    .glass-panel {
      background: rgba(10, 13, 20, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .hero-mesh {
      background: radial-gradient(circle at 50% 15%, rgba(139, 92, 246, 0.14) 0%, transparent 60%),
                  radial-gradient(circle at 80% 40%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
                  #0A0D14;
    }
    .stream-card {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .stream-card:hover {
      transform: translateY(-6px);
      border-color: rgba(245, 158, 11, 0.45);
      box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px 0 rgba(245, 158, 11, 0.15);
    }
    .badge-4k {
      background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
      color: #000;
      font-weight: 800;
    }
    .badge-hdr {
      background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
      color: #FFF;
    }
    .badge-sound {
      background: linear-gradient(135deg, #06B6D4 0%, #0284C7 100%);
      color: #FFF;
    }
    .badge-fps {
      background: linear-gradient(135deg, #10B981 0%, #059669 100%);
      color: #FFF;
    }
    .filter-tab-active {
      background-color: rgba(245, 158, 11, 0.15);
      color: #F59E0B;
      border-color: rgba(245, 158, 11, 0.5);
    }
    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }