/* roulang page: index */
:root {
            --bg-deep: #080A0E;
            --bg-carbon: #0E121A;
            --bg-slate: #141923;
            --border-carbon: rgba(255, 255, 255, 0.08);
            --border-glow: rgba(0, 255, 163, 0.35);
            --accent-cyan: #00FFA3;
            --accent-cyan-hover: #00E090;
            --accent-amber: #F59E0B;
            --text-pure: #FFFFFF;
            --text-dim: #CBD5E1;
            --text-muted: #64748B;
        }

        body {
            background-color: var(--bg-deep);
            color: var(--text-dim);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Inter", sans-serif;
            overflow-x: hidden;
            letter-spacing: -0.01em;
        }

        .font-numeric {
            font-variant-numeric: tabular-nums;
            font-family: "DIN Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        .cyber-card {
            background-color: var(--bg-slate);
            border: 1px solid var(--border-carbon);
            transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .cyber-card:hover {
            border-color: var(--border-glow);
            box-shadow: 0 0 25px rgba(0, 255, 163, 0.12);
            transform: translateY(-4px);
        }

        .btn-cyan {
            background-color: var(--accent-cyan);
            color: #080A0E;
            font-weight: 700;
            transition: all 0.2s ease;
        }

        .btn-cyan:hover {
            background-color: var(--accent-cyan-hover);
            box-shadow: 0 0 20px rgba(0, 255, 163, 0.4);
        }

        .btn-outline {
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--text-pure);
            transition: all 0.2s ease;
        }

        .btn-outline:hover {
            border-color: var(--accent-cyan);
            color: var(--accent-cyan);
            background-color: rgba(0, 255, 163, 0.05);
        }

        .badge-cyan {
            background: rgba(0, 255, 163, 0.1);
            border: 1px solid rgba(0, 255, 163, 0.25);
            color: var(--accent-cyan);
        }

        .accordion-content {
            transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }

        .accordion-item.active .accordion-content {
            max-height: 500px;
            opacity: 1;
            padding-top: 1rem;
        }

        .accordion-item.active .accordion-icon {
            transform: rotate(45deg);
            color: var(--accent-cyan);
        }

        /* 隐藏滚动条但保留功能 */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }