/* roulang page: index */
:root {
            --canvas-bg: #F8F9FA;
            --surface-card: #FFFFFF;
            --text-main: #121417;
            --text-muted: #60646C;
            --accent-amber: #D4A373;
            --accent-warm: #C67D5A;
            --dark-slate: #121417;
            --dark-surface: #1A1D21;
            --card-border: rgba(0, 0, 0, 0.08);
            --border-dark: rgba(255, 255, 255, 0.1);
        }
        
        body {
            font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-color: var(--canvas-bg);
            color: var(--text-main);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        .border-subtle {
            border-color: var(--card-border);
        }

        .amber-gradient-text {
            background: linear-gradient(135deg, #121417 0%, #C67D5A 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .dark-amber-gradient {
            background: linear-gradient(135deg, #D4A373 0%, #FAEDCD 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .card-elevated {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
        }
        .card-elevated:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 32px -8px rgba(18, 20, 23, 0.08);
            border-color: rgba(212, 163, 115, 0.4);
        }

        /* 状态微光呼吸动效 */
        @keyframes pulse-subtle {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(0.96); }
        }
        .status-dot-active {
            animation: pulse-subtle 2.5s infinite ease-in-out;
        }

        /* 标签页与折叠手风琴过渡 */
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: grid;
        }
        
        details summary::-webkit-details-marker {
            display: none;
        }
        details[open] summary .faq-icon {
            transform: rotate(180deg);
        }