/* roulang page: index */
:root {
            --bg-main: #090d0e;
            --bg-card: #131b1d;
            --accent-green: #18a577;
            --accent-cyan: #12b598;
        }
        body {
            background-color: var(--bg-main);
            color: #d1dcde;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            overflow-x: hidden;
        }
        .hero-glow {
            background: radial-gradient(circle at 50% 18%, rgba(24, 165, 119, 0.18) 0%, rgba(9, 13, 14, 0) 65%);
        }
        .card-custom {
            background-color: #131b1d;
            border: 1px solid #1e2c2f;
            transition: all 0.28s ease;
        }
        .card-custom:hover {
            border-color: #2b4549;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45);
        }
        .text-glow {
            text-shadow: 0 0 20px rgba(24, 165, 119, 0.4);
        }
        .tag-pill {
            background-color: #1b272a;
            color: #9cb3b6;
            transition: all 0.2s ease;
        }
        .tag-pill:hover {
            background-color: #243539;
            color: #2dd4bf;
        }
        details > summary {
            list-style: none;
        }
        details > summary::-webkit-details-marker {
            display: none;
        }
        @media (max-width: 768px) {
            .mobile-hide {
                display: none;
            }
        }

/* roulang page: article */
:root {
            --bg-main: #090d0e;
            --bg-card: #131b1d;
            --accent-green: #18a577;
            --accent-cyan: #12b598;
        }
        body {
            background-color: var(--bg-main);
            color: #d1dcde;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            overflow-x: hidden;
        }
        .hero-glow {
            background: radial-gradient(circle at 50% 18%, rgba(24, 165, 119, 0.18) 0%, rgba(9, 13, 14, 0) 65%);
        }
        .card-custom {
            background-color: #131b1d;
            border: 1px solid #1e2c2f;
            transition: all 0.28s ease;
        }
        .card-custom:hover {
            border-color: #2b4549;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45);
        }
        .text-glow {
            text-shadow: 0 0 20px rgba(24, 165, 119, 0.4);
        }
        .tag-pill {
            background-color: #1b272a;
            color: #9cb3b6;
            transition: all 0.2s ease;
        }
        .tag-pill:hover {
            background-color: #243539;
            color: #2dd4bf;
        }
        .article-content {
            color: #b8cbce;
            line-height: 1.85;
            font-size: 1.05rem;
        }
        .article-content p {
            margin-bottom: 1.5rem;
        }
        .article-content h2 {
            color: #ffffff;
            font-size: 1.5rem;
            font-weight: 700;
            margin-top: 2.2rem;
            margin-bottom: 1rem;
            border-left: 4px solid var(--accent-green);
            padding-left: 0.75rem;
        }
        .article-content h3 {
            color: #e2eeef;
            font-size: 1.25rem;
            font-weight: 600;
            margin-top: 1.8rem;
            margin-bottom: 0.85rem;
        }
        .article-content ul, .article-content ol {
            margin-bottom: 1.5rem;
            padding-left: 1.5rem;
        }
        .article-content li {
            margin-bottom: 0.5rem;
        }
        .article-content blockquote {
            background: #111819;
            border-left: 3px solid var(--accent-cyan);
            margin: 1.5rem 0;
            padding: 1rem 1.25rem;
            color: #8fa7aa;
            border-radius: 0 0.5rem 0.5rem 0;
        }
        .article-content a {
            color: var(--accent-cyan);
            text-decoration: underline;
            text-underline-offset: 4px;
        }
        .article-content a:hover {
            color: #5eead4;
        }
        .mobile-hide {
            display: none;
        }
        @media (max-width: 768px) {
            .mobile-hide {
                display: none;
            }
        }

/* roulang page: category1 */
:root {
            --bg-main: #090d0e;
            --bg-card: #131b1d;
            --accent-green: #18a577;
            --accent-cyan: #12b598;
        }
        body {
            background-color: var(--bg-main);
            color: #d1dcde;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            overflow-x: hidden;
        }
        .hero-glow {
            background: radial-gradient(circle at 50% 18%, rgba(24, 165, 119, 0.18) 0%, rgba(9, 13, 14, 0) 65%);
        }
        .card-custom {
            background-color: #131b1d;
            border: 1px solid #1e2c2f;
            transition: all 0.28s ease;
        }
        .card-custom:hover {
            border-color: #2b4549;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45);
        }
        .text-glow {
            text-shadow: 0 0 20px rgba(24, 165, 119, 0.4);
        }
        .tag-pill {
            background-color: #1b272a;
            color: #9cb3b6;
            transition: all 0.2s ease;
        }
        .tag-pill:hover {
            background-color: #243539;
            color: #2dd4bf;
        }
        .category-hero-mesh {
            background-image: radial-gradient(circle at 80% 20%, rgba(18, 181, 152, 0.12) 0%, transparent 50%),
                              radial-gradient(circle at 20% 70%, rgba(24, 165, 119, 0.08) 0%, transparent 60%);
        }
        @media (max-width: 768px) {
            .mobile-hide {
                display: none;
            }
        }