/* roulang page: index */
:root {
            --bg-main: #090D14;
            --bg-surface: #0F172A;
            --bg-elevated: #131B2E;
            --brand-green: #00F298;
            --brand-orange: #FF5B22;
            --text-primary: #F8FAFC;
            --text-secondary: #94A3B8;
            --text-muted: #64748B;
            --border-dim: rgba(255, 255, 255, 0.08);
            --border-highlight: rgba(0, 242, 152, 0.3);
            --radius-md: 12px;
            --radius-lg: 16px;
        }

        html {
            scroll-behavior: smooth;
            background-color: var(--bg-main);
            color: var(--text-primary);
        }

        body {
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* 极客网格微弱光栅底纹 */
        .tech-grid-bg {
            background-size: 40px 40px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        }

        /* 荧光渐变微光边框 */
        .neon-border-card {
            border: 1px solid var(--border-dim);
            background: linear-gradient(180deg, rgba(19, 27, 46, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .neon-border-card:hover {
            border-color: var(--border-highlight);
            transform: translateY(-3px);
            box-shadow: 0 20px 35px -10px rgba(0, 242, 152, 0.12);
        }

        /* 呼吸状态灯 */
        .live-dot {
            width: 8px;
            height: 8px;
            background-color: var(--brand-green);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--brand-green);
            animation: pulse-glow 2s infinite ease-in-out;
        }

        @keyframes pulse-glow {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.35); opacity: 0.55; }
        }

        /* 券面锯齿边缘仿真效果 */
        .coupon-notch-l, .coupon-notch-r {
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            background-color: var(--bg-main);
            border-radius: 50%;
            transform: translateY(-50%);
        }
        .coupon-notch-l { left: -10px; }
        .coupon-notch-r { right: -10px; }

        /* 手风琴动效优化 */
        details summary::-webkit-details-marker {
            display: none;
        }
        details summary {
            list-style: none;
        }
        details[open] summary svg {
            transform: rotate(180deg);
        }

        /* 响应式断点修正 */
        @media (max-width: 768px) {
            .mobile-hide { display: none; }
        }