/* roulang page: index */
:root {
            --bg-base: #0c0d12;
            --bg-surface: #14161f;
            --bg-elevated: #1a1d28;
            --accent-flame: #ff2a54;
            --accent-flame-hover: #e01d44;
            --hud-cyan: #06b6d4;
            --gold-warning: #eab308;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --text-dim: #64748b;
            --border-hud: rgba(255, 255, 255, 0.08);
            --border-active: rgba(255, 42, 84, 0.4);
        }

        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-image: 
                radial-gradient(circle at 15% 15%, rgba(255, 42, 84, 0.04) 0%, transparent 40%),
                radial-gradient(circle at 85% 75%, rgba(6, 182, 212, 0.03) 0%, transparent 45%);
        }

        .clip-corner {
            clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
        }

        .clip-corner-sm {
            clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
        }

        .clip-notch {
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
        }

        .hud-border {
            border: 1px solid var(--border-hud);
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }

        .hud-border:hover {
            border-color: var(--border-active);
            box-shadow: 0 0 20px rgba(255, 42, 84, 0.12);
        }

        .energy-btn {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #ff2a54 0%, #b91c1c 100%);
            transition: all 0.3s ease;
        }

        .energy-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -120%;
            width: 80%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
            transform: skewX(-25deg);
            transition: left 0.75s ease;
        }

        .energy-btn:hover::before {
            left: 140%;
        }

        .grid-bg {
            background-size: 36px 36px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        }

/* roulang page: article */
:root {
            --bg-base: #0c0d12;
            --bg-surface: #14161f;
            --bg-elevated: #1a1d28;
            --accent-flame: #ff2a54;
            --accent-flame-hover: #e01d44;
            --hud-cyan: #06b6d4;
            --gold-warning: #eab308;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --text-dim: #64748b;
            --border-hud: rgba(255, 255, 255, 0.08);
            --border-active: rgba(255, 42, 84, 0.4);
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-image: 
                radial-gradient(circle at 15% 15%, rgba(255, 42, 84, 0.04) 0%, transparent 40%),
                radial-gradient(circle at 85% 75%, rgba(6, 182, 212, 0.03) 0%, transparent 45%);
        }
        .hud-border {
            border: 1px solid var(--border-hud);
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .hud-border:hover {
            border-color: var(--border-active);
            box-shadow: 0 0 20px rgba(255, 42, 84, 0.12);
        }
        .energy-btn {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #ff2a54 0%, #b91c1c 100%);
            transition: all 0.3s ease;
        }
        .energy-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -120%;
            width: 80%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
            transform: skewX(-25deg);
            transition: left 0.75s ease;
        }
        .energy-btn:hover::before {
            left: 140%;
        }
        .grid-bg {
            background-size: 36px 36px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        }
        .clip-corner-sm {
            clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
        }
        .clip-corner-md {
            clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
        }
        .prose-custom p {
            margin-bottom: 1.5rem;
            line-height: 1.85;
            color: #cbd5e1;
            font-size: 1.05rem;
        }
        .prose-custom h2 {
            font-size: 1.4rem;
            font-weight: 800;
            color: #f8fafc;
            margin-top: 2.25rem;
            margin-bottom: 1rem;
            padding-left: 0.75rem;
            border-left: 3px solid #ff2a54;
            letter-spacing: -0.01em;
        }
        .prose-custom h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: #e2e8f0;
            margin-top: 1.75rem;
            margin-bottom: 0.75rem;
        }
        .prose-custom ul, .prose-custom ol {
            margin-bottom: 1.5rem;
            padding-left: 1.25rem;
            color: #94a3b8;
        }
        .prose-custom li {
            margin-bottom: 0.5rem;
            line-height: 1.7;
        }
        .prose-custom blockquote {
            border-left: 3px solid #06b6d4;
            background: rgba(6, 182, 212, 0.05);
            padding: 1rem 1.25rem;
            margin-bottom: 1.5rem;
            color: #94a3b8;
            font-style: italic;
        }

/* roulang page: category1 */
:root {
            --bg-base: #0c0d12;
            --bg-surface: #14161f;
            --bg-elevated: #1a1d28;
            --accent-flame: #ff2a54;
            --accent-flame-hover: #e01d44;
            --hud-cyan: #06b6d4;
            --gold-warning: #eab308;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --text-dim: #64748b;
            --border-hud: rgba(255, 255, 255, 0.08);
            --border-active: rgba(255, 42, 84, 0.4);
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-image: 
                radial-gradient(circle at 15% 15%, rgba(255, 42, 84, 0.04) 0%, transparent 40%),
                radial-gradient(circle at 85% 75%, rgba(6, 182, 212, 0.03) 0%, transparent 45%);
        }
        .hud-border {
            border: 1px solid var(--border-hud);
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .hud-border:hover {
            border-color: var(--border-active);
            box-shadow: 0 0 20px rgba(255, 42, 84, 0.12);
        }
        .energy-btn {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #ff2a54 0%, #b91c1c 100%);
            transition: all 0.3s ease;
        }
        .energy-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -120%;
            width: 80%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
            transform: skewX(-25deg);
            transition: left 0.75s ease;
        }
        .energy-btn:hover::before {
            left: 140%;
        }
        .grid-bg {
            background-size: 36px 36px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        }
        .clip-corner-sm {
            clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
        }
        .clip-corner {
            clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
        }