/* roulang page: index */
:root {
      --canvas-dark: #070A10;
      --canvas-deep: #0B0F19;
      --primary-blue: #0066FF;
      --neon-cyan: #00D2FF;
      --accent-violet: #7928CA;
      --accent-mint: #00F5D4;
      --glass-bg: rgba(16, 24, 48, 0.65);
      --glass-border: rgba(255, 255, 255, 0.08);
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
      --text-dim: #64748B;
    }

    body {
      background-color: var(--canvas-dark);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      overflow-x: hidden;
    }

    .glass-card {
      background: var(--glass-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--glass-border);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px -15px rgba(0, 0, 0, 0.5);
    }

    .glass-card-hover {
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .glass-card-hover:hover {
      transform: translateY(-4px);
      border-color: rgba(0, 210, 255, 0.35);
      box-shadow: 0 12px 30px -10px rgba(0, 102, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .btn-glow {
      background: linear-gradient(135deg, #0066FF 0%, #00D2FF 100%);
      box-shadow: 0 0 20px rgba(0, 102, 255, 0.45);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(0, 210, 255, 0.7);
      transform: scale(1.03);
    }
    .btn-glow:active {
      transform: scale(0.97);
    }

    .btn-ghost {
      background: rgba(16, 24, 48, 0.6);
      border: 1px solid rgba(0, 210, 255, 0.3);
      transition: all 0.3s ease;
    }
    .btn-ghost:hover {
      background: rgba(0, 210, 255, 0.1);
      border-color: var(--neon-cyan);
      color: #FFF;
    }

    .text-gradient {
      background: linear-gradient(135deg, #FFFFFF 20%, #00D2FF 70%, #0066FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .media-cover-mask {
      background: linear-gradient(to top, rgba(7, 10, 16, 0.95) 0%, rgba(7, 10, 16, 0.4) 50%, transparent 100%);
    }

    details > summary::-webkit-details-marker {
      display: none;
    }

/* roulang page: category1 */
:root {
      --canvas-dark: #070A10;
      --canvas-deep: #0B0F19;
      --primary-blue: #0066FF;
      --neon-cyan: #00D2FF;
      --accent-violet: #7928CA;
      --accent-mint: #00F5D4;
      --glass-bg: rgba(16, 24, 48, 0.65);
      --glass-border: rgba(255, 255, 255, 0.08);
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
      --text-dim: #64748B;
    }
    body {
      background-color: var(--canvas-dark);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      overflow-x: hidden;
    }
    .glass-card {
      background: var(--glass-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--glass-border);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px -15px rgba(0, 0, 0, 0.5);
    }
    .glass-card-hover {
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .glass-card-hover:hover {
      transform: translateY(-4px);
      border-color: rgba(0, 210, 255, 0.35);
      box-shadow: 0 12px 30px -10px rgba(0, 102, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    .btn-glow {
      background: linear-gradient(135deg, #0066FF 0%, #00D2FF 100%);
      box-shadow: 0 0 20px rgba(0, 102, 255, 0.45);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(0, 210, 255, 0.7);
      transform: scale(1.03);
    }
    .btn-glow:active {
      transform: scale(0.97);
    }
    .btn-ghost {
      background: rgba(16, 24, 48, 0.6);
      border: 1px solid rgba(0, 210, 255, 0.3);
      transition: all 0.3s ease;
    }
    .btn-ghost:hover {
      background: rgba(0, 210, 255, 0.1);
      border-color: var(--neon-cyan);
      color: #FFF;
    }
    .text-gradient {
      background: linear-gradient(135deg, #FFFFFF 20%, #00D2FF 70%, #0066FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .media-cover-mask {
      background: linear-gradient(to top, rgba(7, 10, 16, 0.95) 0%, rgba(7, 10, 16, 0.4) 50%, transparent 100%);
    }

/* roulang page: category4 */
:root {
      --canvas-dark: #070A10;
      --canvas-deep: #0B0F19;
      --primary-blue: #0066FF;
      --neon-cyan: #00D2FF;
      --accent-violet: #7928CA;
      --accent-mint: #00F5D4;
      --glass-bg: rgba(16, 24, 48, 0.65);
      --glass-border: rgba(255, 255, 255, 0.08);
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
      --text-dim: #64748B;
    }
    body {
      background-color: var(--canvas-dark);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      overflow-x: hidden;
    }
    .glass-card {
      background: var(--glass-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--glass-border);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px -15px rgba(0, 0, 0, 0.5);
    }
    .glass-card-hover {
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .glass-card-hover:hover {
      transform: translateY(-4px);
      border-color: rgba(0, 210, 255, 0.35);
      box-shadow: 0 12px 30px -10px rgba(0, 102, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    .btn-glow {
      background: linear-gradient(135deg, #0066FF 0%, #00D2FF 100%);
      box-shadow: 0 0 20px rgba(0, 102, 255, 0.45);
      transition: all 0.3s ease;
    }
    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(0, 210, 255, 0.7);
      transform: scale(1.03);
    }
    .btn-glow:active {
      transform: scale(0.97);
    }
    .btn-ghost {
      background: rgba(16, 24, 48, 0.6);
      border: 1px solid rgba(0, 210, 255, 0.3);
      transition: all 0.3s ease;
    }
    .btn-ghost:hover {
      background: rgba(0, 210, 255, 0.1);
      border-color: var(--neon-cyan);
      color: #FFF;
    }
    .text-gradient {
      background: linear-gradient(135deg, #FFFFFF 20%, #00D2FF 70%, #0066FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .media-cover-mask {
      background: linear-gradient(to top, rgba(7, 10, 16, 0.95) 0%, rgba(7, 10, 16, 0.4) 50%, transparent 100%);
    }
    .filter-chip {
      transition: all 0.2s ease;
    }
    .filter-chip.active {
      background: rgba(0, 210, 255, 0.18);
      color: #00D2FF;
      border-color: rgba(0, 210, 255, 0.6);
      box-shadow: 0 0 12px rgba(0, 210, 255, 0.2);
    }

/* roulang page: category5 */
:root {
            --canvas-dark: #070A10;
            --canvas-deep: #0B0F19;
            --primary-blue: #0066FF;
            --neon-cyan: #00D2FF;
            --accent-violet: #7928CA;
            --accent-mint: #00F5D4;
            --glass-bg: rgba(16, 24, 48, 0.65);
            --glass-border: rgba(255, 255, 255, 0.08);
            --text-main: #F8FAFC;
            --text-muted: #94A3B8;
            --text-dim: #64748B;
        }
        body {
            background-color: var(--canvas-dark);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            overflow-x: hidden;
        }
        .glass-card {
            background: var(--glass-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--glass-border);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px -15px rgba(0, 0, 0, 0.5);
        }
        .glass-card-hover {
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .glass-card-hover:hover {
            transform: translateY(-4px);
            border-color: rgba(0, 210, 255, 0.35);
            box-shadow: 0 12px 30px -10px rgba(0, 102, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }
        .btn-glow {
            background: linear-gradient(135deg, #0066FF 0%, #00D2FF 100%);
            box-shadow: 0 0 20px rgba(0, 102, 255, 0.45);
            transition: all 0.3s ease;
        }
        .btn-glow:hover {
            box-shadow: 0 0 30px rgba(0, 210, 255, 0.7);
            transform: scale(1.03);
        }
        .btn-glow:active {
            transform: scale(0.97);
        }
        .btn-ghost {
            background: rgba(16, 24, 48, 0.6);
            border: 1px solid rgba(0, 210, 255, 0.3);
            transition: all 0.3s ease;
        }
        .btn-ghost:hover {
            background: rgba(0, 210, 255, 0.1);
            border-color: var(--neon-cyan);
            color: #FFF;
        }
        .text-gradient {
            background: linear-gradient(135deg, #FFFFFF 20%, #00D2FF 70%, #0066FF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .media-cover-mask {
            background: linear-gradient(to top, rgba(7, 10, 16, 0.95) 0%, rgba(7, 10, 16, 0.4) 50%, transparent 100%);
        }
        .param-badge {
            background: rgba(0, 102, 255, 0.15);
            border: 1px solid rgba(0, 210, 255, 0.25);
            color: #00D2FF;
        }
        details > summary {
            list-style: none;
        }
        details > summary::-webkit-details-marker {
            display: none;
        }
        details[open] summary svg {
            transform: rotate(180deg);
        }