/* --- global.css --- */
/* =========================================
           1. 基础变量
           ========================================= */
        :root {
            --bg-color: #0f172a;
            --text-main: #f8fafc;
            --text-secondary: #94a3b8;
            --accent-primary: #38bdf8;
            --accent-secondary: #818cf8;
            --card-bg: rgba(30, 41, 59, 0.7);
            --gradient-text: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
            --code-bg: #0b1120;
            --code-success: #34d399;
            --code-fail: #f87171;
            --code-border: rgba(255, 255, 255, 0.1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            line-height: 1.6;
            padding-top: 5.5rem;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* =========================================
           2. 导航栏
           ========================================= */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 4%;
            height: 5.5rem;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            background-color: rgba(15, 23, 42, 0.85);
        }

        .logo a { text-decoration: none; display: flex; align-items: center; gap: 12px; }
        .logo-text { font-size: 1.5rem; font-weight: 800; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.05em; line-height: 1; }
        .logo-icon { width: 32px; height: 32px; filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.5)); transition: transform 0.3s ease; }
        .logo a:hover .logo-icon { transform: scale(1.1) rotate(-5deg); }

        .nav-links a { color: var(--text-secondary); text-decoration: none; margin-left: 2rem; transition: color 0.3s ease; font-size: 0.95rem; }
        .nav-links a:hover, .nav-links a.active { color: var(--accent-primary); }

        .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1001; }
        .menu-toggle .bar { width: 25px; height: 3px; background-color: var(--accent-primary); margin: 5px 0; transition: 0.3s; border-radius: 2px; }

                /* 移动端适配 */
        @media (max-width: 960px) {
                    .nav-links { display: flex; flex-direction: column; position: fixed; top: 5.5rem; left: 0; width: 100%; max-height: 0; overflow: hidden; background-color: var(--bg-color); transition: max-height 0.4s ease-in-out; z-index: 999; border-bottom: 1px solid var(--code-border); padding: 0 5%; }
            .nav-links.open { max-height: 350px; }
            .nav-links a { margin: 0; padding: 1rem 0; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); width: 100%; }
            .menu-toggle { display: block; }
        }

                /* =========================================
           5. 页脚 & 移动端适配
           ========================================= */
        footer { padding: 3rem 5%; text-align: center; border-top: 1px solid var(--code-border); color: var(--text-secondary); font-size: 0.95rem; background-color: #0b1120; margin-top: auto; }
        .footer-links a { color: var(--accent-primary); text-decoration: none; transition: color 0.2s; }
        .footer-links a:hover { color: #fff; }
        .status-badge { position: fixed; bottom: 20px; right: 20px; background: rgba(15, 23, 42, 0.95); border: 1px solid var(--accent-primary); padding: 8px 16px; border-radius: 20px; display: flex; align-items: center; font-size: 0.8rem; z-index: 2000; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
        .dot { width: 8px; height: 8px; background-color: #22c55e; border-radius: 50%; margin-right: 8px; animation: pulse 2s infinite; }
        @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }