/* roulang page: index */
@layer components {
        .btn-primary {
            @apply bg-gradient-to-r from-brand-500 to-violet-500 text-white rounded-full px-6 py-3 font-medium shadow-card transition-all duration-300 inline-flex items-center justify-center gap-2;
        }
        .btn-primary:hover {
            @apply shadow-lift scale-[1.02] brightness-105;
        }
        .btn-primary:active {
            @apply scale-95;
        }
        .btn-secondary {
            @apply bg-white text-ink-800 border border-stone-200 rounded-full px-6 py-3 font-medium transition-all duration-300 inline-flex items-center justify-center gap-2;
        }
        .btn-secondary:hover {
            @apply border-brand-500 text-brand-500 shadow-card;
        }
        .btn-secondary:active {
            @apply scale-95;
        }
        .brand-gradient-bg {
            background-image: linear-gradient(135deg, #FF6B4A 0%, #F472B6 50%, #8B5CF6 100%);
        }
        .brand-gradient-text {
            background-image: linear-gradient(135deg, #FF6B4A 0%, #F472B6 50%, #8B5CF6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .card-hover {
            @apply transition-all duration-300 hover:shadow-lift hover:-translate-y-1;
        }
        .faq-item.active .faq-chevron {
            transform: rotate(180deg);
        }
        .faq-item.active {
            border-color: #FFD1C2;
        }
        .faq-item.active .faq-question {
            background-color: #FFF7F3;
        }
    }

html {
        scroll-behavior: smooth;
    }
    body {
        font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
    }
    @keyframes fadeInDown {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes floatY {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
    }
    .animate-fade-in-down {
        animation: fadeInDown 0.5s ease;
    }
    .animate-float {
        animation: floatY 3s ease-in-out infinite alternate;
    }
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    ::selection {
        background-color: #FFD1C2;
        color: #1C1917;
    }

/* roulang page: article */
@layer utilities {
            .brand-gradient-text {
                background: linear-gradient(135deg, #FF6B4A 0%, #F472B6 50%, #8B5CF6 100%);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
            }
            .brand-gradient-bg {
                background: linear-gradient(135deg, #FF6B4A 0%, #F472B6 50%, #8B5CF6 100%);
            }
            .btn-primary {
                @apply inline-flex items-center justify-center gap-2 bg-gradient-to-r from-brand-500 to-violet-500 text-white rounded-full px-6 py-3 font-medium shadow-card transition-all duration-300 hover:shadow-lift hover:scale-[1.02] hover:brightness-105 active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500;
            }
            .btn-secondary {
                @apply inline-flex items-center justify-center gap-2 bg-white text-ink-800 border border-stone-200 rounded-full px-6 py-3 font-medium transition-all duration-300 hover:border-brand-500 hover:text-brand-500 hover:shadow-card active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500;
            }
        }
        @keyframes dockEnter {
            from {
                opacity: 0;
                transform: translate(-50%, -16px);
            }
            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }
        .animate-dock-enter {
            animation: dockEnter 0.5s ease both;
        }
        .article-body p {
            @apply text-base md:text-lg leading-8 text-ink-800 mb-6;
        }
        .article-body h2 {
            @apply text-xl md:text-2xl font-bold tracking-tight text-ink-800 mt-10 mb-4;
        }
        .article-body h3 {
            @apply text-lg md:text-xl font-semibold text-ink-800 mt-8 mb-3;
        }
        .article-body ul {
            @apply mb-6 space-y-2;
        }
        .article-body ul>li {
            @apply pl-5 relative text-ink-800;
        }
        .article-body ul>li::before {
            content: '';
            @apply absolute left-0 top-2.5 w-1.5 h-1.5 rounded-full bg-brand-500;
        }
        .article-body ol {
            @apply list-decimal list-inside mb-6 space-y-2 text-ink-800;
        }
        .article-body img {
            @apply rounded-2xl my-8 w-full h-auto;
        }
        .article-body blockquote {
            @apply border-l-4 border-brand-500 bg-brand-50 rounded-r-2xl px-5 py-4 my-6 text-ink-600 italic;
        }
        .article-body a {
            @apply text-brand-600 font-medium hover:text-brand-500 hover:underline underline-offset-4;
        }
        .article-body table {
            @apply w-full text-sm md:text-base border border-stone-200 rounded-2xl my-6 overflow-hidden;
        }
        .article-body th {
            @apply bg-brand-50 text-ink-800 font-semibold px-4 py-3 text-left border-b border-stone-200;
        }
        .article-body td {
            @apply px-4 py-3 border-b border-stone-100 text-ink-600;
        }

/* roulang page: category1 */
.btn-primary {
            @apply inline-flex items-center justify-center bg-gradient-to-r from-brand-500 to-violet-500 text-white rounded-full px-6 py-3 font-medium shadow-card transition-all duration-300 hover:shadow-lift hover:scale-[1.02] hover:brightness-105 active:scale-95;
        }
        .btn-secondary {
            @apply inline-flex items-center justify-center bg-white text-ink-800 border border-stone-200 rounded-full px-6 py-3 font-medium transition-all duration-300 hover:border-brand-500 hover:text-brand-500 hover:shadow-card active:scale-95;
        }

:root {
            --brand-500: #FF6B4A;
            --brand-600: #F04E2C;
            --violet-500: #8B5CF6;
            --ink-800: #1C1917;
            --ink-600: #57534E;
            --paper: #FAF7F5;
        }
        body {
            font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
            background-color: var(--paper);
            color: var(--ink-800);
            line-height: 1.5;
        }
        .brand-gradient-text {
            background: linear-gradient(135deg, #FF6B4A 0%, #F472B6 50%, #8B5CF6 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }
        .brand-gradient-bg {
            background: linear-gradient(135deg, #FF6B4A 0%, #F472B6 50%, #8B5CF6 100%);
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-16px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes floatBadge {
            0% { transform: translateY(0); }
            100% { transform: translateY(-6px); }
        }
        .float-badge {
            animation: floatBadge 3s ease-in-out infinite alternate;
        }
        .faq-answer { display: none; }
        .faq-item.open .faq-answer { display: block; }
        .faq-item.open .faq-chevron { transform: rotate(180deg); }
        .faq-chevron { transition: transform 0.3s ease; }
        a:focus-visible, button:focus-visible {
            outline: 2px solid var(--brand-500);
            outline-offset: 2px;
            border-radius: 8px;
        }

/* roulang page: category2 */
.brand-gradient-text {
            background: linear-gradient(135deg, #FF6B4A 0%, #F472B6 50%, #8B5CF6 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .brand-gradient-bg {
            background: linear-gradient(135deg, #FF6B4A 0%, #F472B6 50%, #8B5CF6 100%);
        }
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            color: #fff;
            box-shadow: 0 2px 20px rgba(0,0,0,0.04);
            transition: all 0.3s;
            background: linear-gradient(135deg, #FF6B4A 0%, #F472B6 50%, #8B5CF6 100%);
        }
        .btn-primary:hover {
            box-shadow: 0 8px 30px rgba(0,0,0,0.08);
            transform: scale(1.02);
            filter: brightness(1.05);
        }
        .btn-primary:active {
            transform: scale(0.95);
        }
        .card-hover {
            transition: all 0.3s;
        }
        .card-hover:hover {
            box-shadow: 0 8px 30px rgba(0,0,0,0.08);
            transform: translateY(-4px);
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes floatBadge {
            0% { transform: translateY(0); }
            100% { transform: translateY(-6px); }
        }
        .animate-fade-in-down {
            animation: fadeInDown 0.5s ease;
        }
        .animate-float {
            animation: floatBadge 3s infinite alternate;
        }

/* roulang page: category3 */
@layer components {
            .brand-gradient-bg {
                background: linear-gradient(135deg, #FF6B4A 0%, #F472B6 50%, #8B5CF6 100%);
            }
            .btn-primary {
                @apply bg-gradient-to-r from-brand-500 to-violet-500 text-white rounded-full px-6 py-3 font-medium shadow-card transition-all duration-300;
            }
            .btn-primary:hover {
                @apply shadow-lift scale-[1.02] brightness-105;
            }
            .btn-primary:active {
                @apply scale-95;
            }
            .btn-secondary {
                @apply bg-white text-ink-800 border border-stone-200 rounded-full px-6 py-3 font-medium transition-all duration-300;
            }
            .btn-secondary:hover {
                @apply border-brand-500 text-brand-500 shadow-card;
            }
            .badge-pill {
                @apply inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-medium bg-brand-100 text-brand-600;
            }
        }
        .brand-gradient-text {
            background-image: linear-gradient(135deg, #FF6B4A, #8B5CF6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #F04E2C;
        }
        .section-label::before {
            content: '';
            width: 2rem;
            height: 2px;
            background: linear-gradient(90deg, #FF6B4A, #8B5CF6);
            border-radius: 9999px;
            display: inline-block;
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-16px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes floatBadge {
            0% { transform: translateY(0); }
            100% { transform: translateY(-6px); }
        }
        .animate-fade-in-down {
            animation: fadeInDown 0.5s ease both;
        }
        .animate-float-badge {
            animation: floatBadge 3s ease-in-out infinite alternate;
        }
        .faq-answer {
            transition: opacity 0.25s ease;
        }