/* roulang page: index */
@layer base {
            :root {
                --color-primary: #8B1F5C;
                --color-accent: #EC4899;
                --color-warning: #F59E0B;
                --color-success: #10B981;
                --color-danger: #EF4444;
                --color-bg-dark: #1a0a2e;
                --color-bg-card: #2d1b3d;
                --color-bg-deeper: #0a0514;
                --radius-card: 12px;
                --radius-button: 8px;
                --radius-small: 6px;
            }
            * {
                box-sizing: border-box;
            }
            body {
                @apply bg-[#1a0a2e] text-gray-200 font-sans antialiased;
                font-family: -apple-system, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
                line-height: 1.75;
            }
            a {
                @apply transition-colors;
            }
            img {
                @apply max-w-full h-auto;
            }
            button, input, select, textarea {
                font-family: inherit;
            }
        }
        @layer components {
            .btn-primary {
                @apply bg-gradient-to-br from-pink-500 to-pink-700 text-white font-semibold py-3.5 px-8 rounded-lg hover:brightness-110 hover:scale-[1.02] transition-all shadow-lg;
            }
            .btn-secondary {
                @apply border-2 border-pink-500 text-pink-400 font-semibold py-3 px-8 rounded-lg hover:bg-pink-500/10 transition-all;
            }
            .card-tier {
                @apply bg-[#2d1b3d] border border-pink-500/20 rounded-xl p-8 hover:-translate-y-1 hover:shadow-xl hover:shadow-pink-500/30 transition-all duration-300;
            }
            .badge-status {
                @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium backdrop-blur-sm;
            }
            .nav-link {
                @apply text-gray-300 hover:text-white transition-colors relative;
            }
            .nav-link.active {
                @apply text-white;
            }
            .nav-link.active::after {
                content: '';
                @apply absolute bottom-0 left-0 right-0 h-0.5 bg-pink-500;
            }
        }
        @keyframes pulse-glow {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .animate-pulse-glow {
            animation: pulse-glow 2s ease-in-out infinite;
        }
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }
        .gradient-radial-hero {
            background: radial-gradient(ellipse at center top, rgba(139,31,92,0.3) 0%, transparent 70%),
                        radial-gradient(circle at 80% 20%, rgba(245,158,11,0.15), transparent 50%);
        }
        .search-box {
            @apply w-60 bg-white/6 rounded-md px-4 py-2 text-sm text-gray-300 border border-white/10 focus:outline-none focus:border-pink-500/50 transition-all;
        }
        .search-box::placeholder {
            @apply text-gray-500;
        }
        .mobile-menu {
            @apply fixed inset-0 bg-[#0a0514] z-50 transform translate-x-full transition-transform duration-300;
        }
        .mobile-menu.open {
            @apply translate-x-0;
        }

/* roulang page: category1 */
@layer base {
            :root {
                --color-primary: #8B1F5C;
                --color-accent: #EC4899;
                --color-warning: #F59E0B;
                --color-success: #10B981;
                --color-bg-dark: #1a0a2e;
                --color-bg-card: #2d1b3d;
                --color-bg-footer: #0a0514;
                --radius-card: 12px;
                --radius-button: 8px;
                --radius-badge: 9999px;
            }
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            body {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
                background: #1a0a2e;
                color: #E5E7EB;
                line-height: 1.75;
                font-size: 16px;
            }
            img {
                max-width: 100%;
                display: block;
            }
            a {
                text-decoration: none;
                color: inherit;
            }
            button, input {
                font-family: inherit;
            }
        }
        @layer components {
            .btn-primary {
                background: linear-gradient(135deg, #EC4899, #C2185B);
                color: white;
                font-weight: 600;
                padding: 0.875rem 2rem;
                border-radius: 8px;
                border: none;
                cursor: pointer;
                transition: all 0.3s ease;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            .btn-primary:hover {
                filter: brightness(1.1);
                transform: scale(1.02);
            }
            .btn-secondary {
                background: transparent;
                color: #EC4899;
                font-weight: 600;
                padding: 0.875rem 2rem;
                border-radius: 8px;
                border: 1.5px solid #EC4899;
                cursor: pointer;
                transition: all 0.3s ease;
            }
            .btn-secondary:hover {
                background: rgba(236, 72, 153, 0.1);
            }
            .card-tier {
                background: #2d1b3d;
                border: 1px solid rgba(236, 72, 153, 0.2);
                border-radius: 12px;
                padding: 2rem;
                transition: all 0.3s ease;
            }
            .card-tier:hover {
                transform: translateY(-4px);
                box-shadow: 0 20px 40px rgba(236, 72, 153, 0.3);
            }
            .card-content {
                background: #2d1b3d;
                border-radius: 8px;
                overflow: hidden;
                transition: all 0.3s ease;
            }
            .card-content:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            }
            .badge {
                display: inline-flex;
                align-items: center;
                padding: 0.25rem 0.75rem;
                border-radius: 9999px;
                font-size: 0.75rem;
                font-weight: 500;
                backdrop-filter: blur(8px);
            }
            .badge-new {
                background: rgba(16, 185, 129, 0.2);
                color: #10B981;
            }
            .badge-hot {
                background: rgba(245, 158, 11, 0.2);
                color: #F59E0B;
            }
            .badge-featured {
                background: rgba(236, 72, 153, 0.2);
                color: #EC4899;
            }
            .nav-link {
                color: #D1D5DB;
                transition: color 0.2s ease;
                position: relative;
            }
            .nav-link:hover {
                color: #F9FAFB;
            }
            .nav-link.active {
                color: #F9FAFB;
            }
            .nav-link.active::after {
                content: '';
                position: absolute;
                bottom: -8px;
                left: 0;
                right: 0;
                height: 2px;
                background: #EC4899;
            }
            .search-box {
                width: 240px;
                padding: 0.625rem 1rem;
                border-radius: 6px;
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: white;
                font-size: 0.9375rem;
                outline: none;
                transition: all 0.2s ease;
            }
            .search-box:focus {
                background: rgba(255, 255, 255, 0.08);
                border-color: #EC4899;
            }
            .search-box::placeholder {
                color: #9CA3AF;
            }
            .tag-cloud a {
                display: inline-block;
                padding: 0.5rem 1rem;
                margin: 0.25rem;
                background: rgba(236, 72, 153, 0.15);
                border-radius: 6px;
                font-size: 0.875rem;
                color: #EC4899;
                transition: all 0.2s ease;
            }
            .tag-cloud a:hover {
                background: rgba(236, 72, 153, 0.3);
                transform: translateY(-1px);
            }
            @keyframes pulse-glow {
                0%, 100% {
                    box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
                }
                50% {
                    box-shadow: 0 0 35px rgba(236, 72, 153, 0.6);
                }
            }
            .cta-pulse {
                animation: pulse-glow 2s ease-in-out infinite;
            }
        }

/* roulang page: category2 */
@layer base {
            :root {
                --color-primary: #8B1F5C;
                --color-accent: #EC4899;
                --color-warning: #F59E0B;
                --color-success: #10B981;
                --color-bg-dark: #1a0a2e;
                --color-bg-card: #2d1b3d;
                --color-bg-deep: #0a0514;
                --radius-card: 12px;
                --radius-button: 8px;
                --spacing-section: 6rem;
            }
            * { box-sizing: border-box; margin: 0; padding: 0; }
            body {
                font-family: -apple-system, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
                background: var(--color-bg-dark);
                color: #E5E7EB;
                line-height: 1.75;
                font-size: 16px;
            }
            a { text-decoration: none; color: inherit; }
            img { max-width: 100%; display: block; }
            button, input { font-family: inherit; }
        }
        @layer components {
            .container-custom {
                max-width: 1280px;
                margin: 0 auto;
                padding: 0 2rem;
            }
            .nav-link {
                color: #D1D5DB;
                transition: color 0.2s;
            }
            .nav-link:hover {
                color: #F9FAFB;
            }
            .nav-link.active {
                color: #F9FAFB;
                border-bottom: 2px solid #EC4899;
                padding-bottom: 1.5rem;
            }
            .search-box {
                width: 240px;
                padding: 0.5rem 1rem;
                padding-right: 3rem;
                background: rgba(255,255,255,0.06);
                border: 1px solid rgba(236,72,153,0.2);
                border-radius: 6px;
                color: #E5E7EB;
                font-size: 0.875rem;
                transition: all 0.2s;
            }
            .search-box:focus {
                outline: none;
                border-color: #EC4899;
                box-shadow: 0 0 0 3px rgba(236,72,153,0.1);
            }
            .search-box::placeholder {
                color: #9CA3AF;
            }
            .btn-primary {
                background: linear-gradient(135deg, #EC4899, #C2185B);
                color: white;
                font-weight: 600;
                padding: 0.875rem 2rem;
                border-radius: var(--radius-button);
                border: none;
                cursor: pointer;
                transition: all 0.3s;
                display: inline-block;
            }
            .btn-primary:hover {
                filter: brightness(1.1);
                transform: scale(1.02);
            }
            .btn-secondary {
                background: transparent;
                color: #EC4899;
                font-weight: 600;
                padding: 0.875rem 2rem;
                border-radius: var(--radius-button);
                border: 1.5px solid #EC4899;
                cursor: pointer;
                transition: all 0.3s;
                display: inline-block;
            }
            .btn-secondary:hover {
                background: rgba(236,72,153,0.1);
            }
            .filter-btn {
                padding: 0.5rem 1.25rem;
                background: rgba(255,255,255,0.06);
                border: 1px solid rgba(236,72,153,0.2);
                border-radius: 6px;
                color: #D1D5DB;
                font-size: 0.875rem;
                cursor: pointer;
                transition: all 0.2s;
            }
            .filter-btn:hover,
            .filter-btn.active {
                background: #EC4899;
                color: white;
                border-color: #EC4899;
            }
            .content-card {
                background: var(--color-bg-card);
                border: 1px solid rgba(236,72,153,0.2);
                border-radius: var(--radius-button);
                overflow: hidden;
                transition: all 0.3s;
                cursor: pointer;
            }
            .content-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 24px rgba(236,72,153,0.2);
            }
            .content-card img {
                width: 100%;
                aspect-ratio: 16/9;
                object-fit: cover;
                transition: transform 0.3s;
            }
            .content-card:hover img {
                transform: scale(1.05);
            }
            .badge {
                display: inline-flex;
                align-items: center;
                padding: 0.25rem 0.75rem;
                border-radius: 9999px;
                font-size: 0.75rem;
                font-weight: 500;
                backdrop-filter: blur(8px);
            }
            .badge-hot {
                background: rgba(245,158,11,0.2);
                color: #F59E0B;
            }
            .badge-new {
                background: rgba(16,185,129,0.2);
                color: #10B981;
            }
            .badge-hd {
                background: rgba(91,140,255,0.2);
                color: #5B8CFF;
            }
            .tag {
                display: inline-block;
                padding: 0.25rem 0.625rem;
                background: rgba(236,72,153,0.2);
                color: #EC4899;
                border-radius: 4px;
                font-size: 0.75rem;
                margin-right: 0.375rem;
                margin-bottom: 0.375rem;
            }
            .section-title {
                font-size: 1.875rem;
                font-weight: 600;
                color: #F9FAFB;
                margin-bottom: 1rem;
            }
            .section-subtitle {
                font-size: 1.125rem;
                color: #9CA3AF;
                margin-bottom: 3rem;
            }
        }
        @keyframes pulse-border {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }
        .hero-gradient {
            background: radial-gradient(ellipse at center top, rgba(139,31,92,0.3) 0%, transparent 70%),
                        radial-gradient(circle at 80% 20%, rgba(245,158,11,0.15), transparent 50%);
        }
        @media (max-width: 1023px) {
            .container-custom {
                padding: 0 1rem;
            }
            .nav-link.active {
                border-bottom: none;
                padding-bottom: 0;
            }
        }