/* roulang page: index */
:root {
            --bg-obsidian: #0a0b0e;
            --bg-charcoal: #12141a;
            --bg-card: #181a22;
            --primary-amber: #d4af37;
            --lava: #e65c00;
            --text-main: #f8fafc;
            --text-body: #cbd5e1;
            --text-muted: #94a3b8;
            --border-dark: rgba(212, 175, 55, 0.18);
        }
        body {
            background-color: var(--bg-obsidian);
            color: var(--text-body);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.8;
        }
        .text-gradient-amber {
            background: linear-gradient(135deg, #fce881 0%, #d4af37 50%, #9e7913 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .text-gradient-lava {
            background: linear-gradient(135deg, #ff8a00 0%, #e65c00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .dark-card {
            background-color: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.07);
            transition: all 0.25s ease-in-out;
        }
        .dark-card:hover {
            border-color: rgba(212, 175, 55, 0.35);
            transform: translateY(-3px);
            box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.7), 0 0 15px rgba(212, 175, 55, 0.1);
        }
        .glow-amber-btn {
            background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
            color: #0a0b0e;
            box-shadow: 0 4px 18px rgba(212, 175, 55, 0.25);
            transition: all 0.2s ease;
        }
        .glow-amber-btn:hover {
            box-shadow: 0 6px 24px rgba(212, 175, 55, 0.45);
            filter: brightness(1.08);
        }
        .glow-lava-btn {
            background: linear-gradient(135deg, #ff5722 0%, #d84315 100%);
            color: #ffffff;
            box-shadow: 0 4px 18px rgba(230, 92, 0, 0.3);
            transition: all 0.2s ease;
        }
        .glow-lava-btn:hover {
            box-shadow: 0 6px 24px rgba(230, 92, 0, 0.5);
            filter: brightness(1.1);
        }

/* roulang page: article */
:root {
            --bg-obsidian: #0a0b0e;
            --bg-charcoal: #12141a;
            --bg-card: #181a22;
            --primary-amber: #d4af37;
            --lava: #e65c00;
            --text-main: #f8fafc;
            --text-body: #cbd5e1;
            --text-muted: #94a3b8;
            --border-dark: rgba(212, 175, 55, 0.18);
        }
        body {
            background-color: var(--bg-obsidian);
            color: var(--text-body);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.85;
        }
        .text-gradient-amber {
            background: linear-gradient(135deg, #fce881 0%, #d4af37 50%, #9e7913 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .text-gradient-lava {
            background: linear-gradient(135deg, #ff8a00 0%, #e65c00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .dark-card {
            background-color: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.07);
            transition: all 0.25s ease-in-out;
        }
        .dark-card:hover {
            border-color: rgba(212, 175, 55, 0.35);
            transform: translateY(-3px);
            box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.7), 0 0 15px rgba(212, 175, 55, 0.1);
        }
        .glow-amber-btn {
            background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
            color: #0a0b0e;
            box-shadow: 0 4px 18px rgba(212, 175, 55, 0.25);
            transition: all 0.2s ease;
        }
        .glow-amber-btn:hover {
            box-shadow: 0 6px 24px rgba(212, 175, 55, 0.45);
            filter: brightness(1.08);
        }
        .glow-lava-btn {
            background: linear-gradient(135deg, #ff5722 0%, #d84315 100%);
            color: #ffffff;
            box-shadow: 0 4px 18px rgba(230, 92, 0, 0.3);
            transition: all 0.2s ease;
        }
        .glow-lava-btn:hover {
            box-shadow: 0 6px 24px rgba(230, 92, 0, 0.5);
            filter: brightness(1.1);
        }
        .article-content {
            font-size: 1.05rem;
            color: #cbd5e1;
            line-height: 1.85;
        }
        .article-content p {
            margin-bottom: 1.5rem;
        }
        .article-content h2 {
            font-size: 1.65rem;
            font-weight: 800;
            color: #f8fafc;
            margin-top: 2.5rem;
            margin-bottom: 1.2rem;
            padding-left: 0.85rem;
            border-left: 4px solid var(--primary-amber);
        }
        .article-content h3 {
            font-size: 1.3rem;
            font-weight: 700;
            color: #e2e8f0;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
        .article-content ul, .article-content ol {
            margin-bottom: 1.5rem;
            padding-left: 1.5rem;
        }
        .article-content ul {
            list-style-type: square;
        }
        .article-content ol {
            list-style-type: decimal;
        }
        .article-content li {
            margin-bottom: 0.5rem;
        }
        .article-content blockquote {
            margin: 1.8rem 0;
            padding: 1.25rem 1.5rem;
            background: #12141a;
            border-left: 4px solid #e65c00;
            color: #94a3b8;
            border-radius: 0 0.5rem 0.5rem 0;
            font-style: italic;
        }
        .article-content img {
            border-radius: 0.75rem;
            margin: 2rem auto;
            border: 1px solid rgba(212, 175, 55, 0.2);
            box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.7);
            max-width: 100%;
            height: auto;
        }