/* roulang page: index */
:root {
            --primary: #6366F1;
            --secondary: #EC4899;
            --accent: #06B6D4;
            --bg-base: #0F172A;
        }
        html { scroll-behavior: smooth; }
        body { font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; background-color: #F8FAFC; color: #1E293B; }
        .text-gradient { background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .bg-gradient-brand { background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%); }
        .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 30px -10px rgba(99, 102, 241, 0.18); }
        .glass-header { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* roulang page: article */
:root {
            --primary: #6366F1;
            --secondary: #EC4899;
            --accent: #06B6D4;
            --bg-base: #0F172A;
        }
        html { scroll-behavior: smooth; }
        body {
            font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
            background-color: #F8FAFC;
            color: #1E293B;
            line-height: 1.7;
        }
        .text-gradient {
            background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .bg-gradient-brand {
            background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
        }
        .card-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-hover:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 30px -10px rgba(99, 102, 241, 0.18);
        }
        .glass-header {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
        }
        .slanted-hero {
            clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
        }
        @media (max-width: 768px) {
            .slanted-hero {
                clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
            }
        }
        /* 正文富文本样式增强 */
        .article-body h2 {
            font-size: 1.5rem;
            font-weight: 800;
            color: #0F172A;
            margin-top: 2.25rem;
            margin-bottom: 1rem;
            padding-left: 0.85rem;
            border-left: 4px solid #6366F1;
            line-height: 1.4;
        }
        .article-body h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1E293B;
            margin-top: 1.75rem;
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }
        .article-body p {
            margin-bottom: 1.25rem;
            color: #334155;
            font-size: 1.05rem;
            line-height: 1.85;
            text-align: justify;
        }
        .article-body blockquote {
            margin: 1.75rem 0;
            padding: 1.25rem 1.5rem;
            background-color: #EEF2FF;
            border-left: 4px solid #8B5CF6;
            border-radius: 0 1rem 1rem 0;
            color: #4338CA;
            font-size: 1rem;
            font-style: normal;
        }
        .article-body img {
            border-radius: 1.25rem;
            margin: 2rem auto;
            max-width: 100%;
            height: auto;
            box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.12);
        }
        .article-body ul, .article-body ol {
            margin: 1.25rem 0 1.5rem 1.5rem;
            color: #334155;
            font-size: 1rem;
        }
        .article-body ul { list-style-type: disc; }
        .article-body ol { list-style-type: decimal; }
        .article-body li { margin-bottom: 0.5rem; }

/* roulang page: category1 */
:root {
            --primary: #6366F1;
            --secondary: #EC4899;
            --accent: #06B6D4;
            --bg-base: #0F172A;
        }
        html { scroll-behavior: smooth; }
        body { font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; background-color: #F8FAFC; color: #1E293B; }
        .text-gradient { background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .bg-gradient-brand { background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%); }
        .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 30px -10px rgba(99, 102, 241, 0.18); }
        .glass-header { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); }
        .active-filter { background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%); color: #FFFFFF; font-weight: 600; }