/* roulang page: index */
:root {
            --brand-yellow: #FACC15;
            --brand-yellow-hover: #EAB308;
            --brand-magenta: #F43F5E;
            --bg-obsidian: #0F1117;
            --bg-deep: #181B26;
            --bg-card: #222736;
            --text-pure: #F8FAFC;
            --text-muted: #94A3B8;
            --border-dim: rgba(255, 255, 255, 0.08);
            --glow-yellow: 0 0 20px rgba(250, 204, 21, 0.25);
        }
        body {
            background-color: var(--bg-obsidian);
            color: var(--text-pure);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }
        .glow-hover:hover {
            box-shadow: var(--glow-yellow);
            border-color: rgba(250, 204, 21, 0.5);
        }
        .stream-dot {
            width: 8px;
            height: 8px;
            background-color: #22c55e;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 8px #22c55e;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.9); }
        }
        .banner-mask {
            background: linear-gradient(180deg, rgba(15, 17, 23, 0.4) 0%, rgba(15, 17, 23, 0.85) 70%, #0F1117 100%);
        }

/* roulang page: article */
:root {
            --brand-yellow: #FACC15;
            --brand-yellow-hover: #EAB308;
            --brand-magenta: #F43F5E;
            --bg-obsidian: #0F1117;
            --bg-deep: #181B26;
            --bg-card: #222736;
            --text-pure: #F8FAFC;
            --text-muted: #94A3B8;
            --border-dim: rgba(255, 255, 255, 0.08);
            --glow-yellow: 0 0 20px rgba(250, 204, 21, 0.25);
        }
        body {
            background-color: var(--bg-obsidian);
            color: var(--text-pure);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
            line-height: 1.75;
        }
        .stream-dot {
            width: 8px;
            height: 8px;
            background-color: #22c55e;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 8px #22c55e;
            animation: pulse-dot 2s infinite;
        }
        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.9); }
        }
        .article-content h2 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #F8FAFC;
            margin-top: 2rem;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
        }
        .article-content h2::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 40px;
            height: 2px;
            background-color: var(--brand-yellow);
        }
        .article-content h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #FDE047;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
        }
        .article-content p {
            color: var(--text-muted);
            margin-bottom: 1.25rem;
            font-size: 1rem;
            line-height: 1.8;
        }
        .article-content ul, .article-content ol {
            margin-bottom: 1.25rem;
            padding-left: 1.5rem;
            color: var(--text-muted);
        }
        .article-content li {
            margin-bottom: 0.5rem;
            list-style-type: square;
        }
        .article-content blockquote {
            border-left: 4px solid var(--brand-yellow);
            padding: 1rem 1.25rem;
            background-color: var(--bg-deep);
            color: #E2E8F0;
            margin: 1.5rem 0;
            border-radius: 0 0.5rem 0.5rem 0;
            font-style: italic;
        }
        .article-content img {
            border-radius: 0.5rem;
            border: 1px solid var(--border-dim);
            margin: 1.5rem auto;
            max-width: 100%;
            height: auto;
        }
        .coupon-cutout {
            position: relative;
            background: linear-gradient(135deg, #1e2230 0%, #131620 100%);
            border: 1px dashed rgba(250, 204, 21, 0.4);
        }
        .coupon-cutout::before, .coupon-cutout::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 16px;
            height: 16px;
            background-color: var(--bg-obsidian);
            border-radius: 50%;
            transform: translateY(-50%);
        }
        .coupon-cutout::before { left: -9px; }
        .coupon-cutout::after { right: -9px; }

/* roulang page: category1 */
:root {
            --brand-yellow: #FACC15;
            --brand-yellow-hover: #EAB308;
            --brand-magenta: #F43F5E;
            --bg-obsidian: #0F1117;
            --bg-deep: #181B26;
            --bg-card: #222736;
            --text-pure: #F8FAFC;
            --text-muted: #94A3B8;
            --border-dim: rgba(255, 255, 255, 0.08);
            --glow-yellow: 0 0 20px rgba(250, 204, 21, 0.25);
        }
        body {
            background-color: var(--bg-obsidian);
            color: var(--text-pure);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }
        .stream-dot {
            width: 8px;
            height: 8px;
            background-color: #22C55E;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 8px #22C55E;
            animation: pulse-stream 2s infinite;
        }
        @keyframes pulse-stream {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
        }
        .filter-btn-active {
            background-color: var(--brand-yellow);
            color: #000;
            font-weight: 700;
        }
        .glow-card:hover {
            box-shadow: var(--glow-yellow);
            border-color: rgba(250, 204, 21, 0.4);
        }