:root {
            --bg: #f6f9fc;
            --surface: #ffffff;
            --surface-alt: #f0f5f9;
            --text: #1a2e3f;
            --text2: #4b6a88;
            --text3: #6a8296;
            --accent: #1a7f8c;
            --accent2: #0f5560;
            --accent-light: #e6f2f5;
            --border: #e1e8f0;
            --border-light: #eef3f8;
            --green: #2ecc71;
            --amber: #f0a030;
            --red-soft: #e74c5e;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.03);
            --shadow: 0 8px 28px rgba(0,0,0,0.06);
            --shadow-lg: 0 16px 40px rgba(0,0,0,0.08);
            --radius-sm: 12px;
            --radius: 18px;
            --radius-lg: 24px;
            --radius-xl: 32px;
            --font: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            --font-mono: 'SF Mono', 'JetBrains Mono', 'Consolas', monospace;
            --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: var(--font);
            background: var(--bg);
            color: var(--text);
            line-height: 1.55;
            -webkit-font-smoothing: antialiased;
            letter-spacing: -0.01em;
        }
        .container { max-width:1260px; margin:0 auto; padding:0 20px; }

        /* 导航栏 - 与首页修改版一致 */
        .navbar {
            background: rgba(255,255,255,0.94);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom:1px solid var(--border);
            position:sticky; top:0; z-index:100;
        }
        .nav-inner {
            display:flex; align-items:center; justify-content:space-between;
            flex-wrap:wrap; gap:15px; padding:14px 0;
        }
        .logo {
            font-size:1.6rem; font-weight:750; letter-spacing:-0.5px;
            background:linear-gradient(135deg, #1a7f8c, #0f5560);
            -webkit-background-clip:text; background-clip:text;
            color:transparent;
            display:flex; align-items:center; gap:6px;
        }
        .logo::before { content:'⚡'; font-size:1.3rem; color:#1a7f8c; background:none; -webkit-background-clip:unset; background-clip:unset; }
        .nav-links { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
        .nav-links a {
            text-decoration:none; font-weight:550; color:var(--text2);
            padding:8px 15px; border-radius:22px; font-size:0.9rem;
            transition:var(--transition); white-space:nowrap;
        }
        .nav-links a:hover, .nav-links a.active { background:var(--accent-light); color:var(--accent); }
        .nav-cta {
            background:var(--accent)!important; color:#fff!important;
            font-weight:620!important; padding:9px 20px!important;
            box-shadow:0 4px 14px rgba(26,127,140,0.28);
        }
        .nav-cta:hover { background:var(--accent2)!important; transform:translateY(-1px); }

        /* 页面头部 */
        .page-hero {
            background: linear-gradient(150deg, #eef5fc 0%, #ffffff 60%, #f8fafc 100%);
            padding: 52px 0 36px;
            text-align: center;
            border-bottom:1px solid var(--border-light);
        }
        .page-hero .eyebrow {
            display:inline-flex; align-items:center; gap:7px;
            background:var(--accent-light); color:var(--accent);
            padding:5px 14px; border-radius:20px; font-size:0.78rem;
            font-weight:600; letter-spacing:0.03em; margin-bottom:16px;
        }
        .page-hero h1 { font-size:2.6rem; font-weight:800; letter-spacing:-0.8px; color:#0c1f2b; margin-bottom:10px; }
        .page-hero p { font-size:1.05rem; color:var(--text2); max-width:620px; margin:0 auto; }

        /* 关卡进度条 */
        .quest-progress {
            background: var(--surface);
            border-radius: var(--radius-lg);
            padding: 24px 28px;
            margin: 36px 0 20px;
            border:1px solid var(--border);
            box-shadow: var(--shadow-sm);
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
        }
        .progress-bar {
            flex:1; height:8px; background:#e9eef4; border-radius:10px;
            overflow:hidden; min-width:150px;
        }
        .progress-fill {
            width:0%; height:100%; background:var(--accent);
            border-radius:10px; transition: width 0.4s ease;
        }
        .progress-stats {
            font-weight:650; font-size:0.95rem; white-space:nowrap;
        }
        .progress-stats span { color:var(--accent); }

        /* 任务选择卡 */
        .quest-selector {
            display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px;
        }
        .quest-tab {
            background:var(--surface); border:1px solid var(--border);
            padding:12px 22px; border-radius:28px; font-weight:600;
            font-size:0.9rem; cursor:pointer; transition:var(--transition);
            display:flex; align-items:center; gap:8px;
            box-shadow: var(--shadow-sm);
        }
        .quest-tab.active {
            background:var(--accent); color:#fff; border-color:var(--accent);
            box-shadow:0 8px 18px rgba(26,127,140,0.25);
        }
        .quest-tab:hover:not(.active) { background:var(--accent-light); border-color:var(--accent); }

        /* 关卡面板 */
        .quest-panel { display:none; }
        .quest-panel.active-panel { display:block; animation: fadeUp 0.35s ease; }
        @keyframes fadeUp { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

        /* 步骤卡片 */
        .step-card {
            background:var(--surface); border-radius:var(--radius-lg);
            padding:28px 26px; border:1px solid var(--border);
            box-shadow:var(--shadow-sm); margin-bottom:22px;
            transition:var(--transition); position:relative;
            display:flex; gap:20px; align-items:flex-start;
        }
        .step-card:hover { box-shadow:var(--shadow); }
        .step-marker {
            font-size:1.6rem; font-weight:750; color:var(--accent);
            background:var(--accent-light); width:48px; height:48px;
            border-radius:50%; display:flex; align-items:center;
            justify-content:center; flex-shrink:0;
        }
        .step-body { flex:1; }
        .step-body h3 { font-size:1.2rem; font-weight:700; margin-bottom:6px; }
        .step-body p { color:var(--text2); font-size:0.9rem; margin-bottom:12px; }
        .code-snippet {
            background:#1e2a36; color:#cbdde9; padding:12px 16px;
            border-radius:14px; font-family:var(--font-mono); font-size:0.8rem;
            margin:12px 0; overflow-x:auto;
        }
        .tip-inline {
            background:var(--accent-light); border-left:4px solid var(--accent);
            padding:10px 16px; border-radius:12px; font-size:0.85rem;
            color:var(--text2); margin:12px 0;
        }
        .img-mock {
            background: #f0f5f9; border-radius:16px; padding:16px;
            text-align:center; color:var(--text3); font-size:0.85rem;
            border:1px dashed #ccdbe6; margin:10px 0;
        }

        /* 错误警示区 */
        .mistakes-section {
            background: var(--surface); border-radius: var(--radius-lg);
            padding: 32px 28px; border:1px solid var(--border);
            box-shadow: var(--shadow-sm); margin:40px 0;
        }
        .mistake-card {
            display:flex; gap:14px; align-items:flex-start;
            background:#fff; border:1px solid #ffe0e0; border-radius:18px;
            padding:18px; margin-bottom:14px;
        }
        .mistake-icon { font-size:1.5rem; flex-shrink:0; }
        .mistake-text h4 { font-weight:700; margin-bottom:4px; }
        .mistake-text p { color:var(--text2); font-size:0.85rem; }

        /* 一键配置区 */
        .oneclick-config {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
            gap:16px; margin:40px 0;
        }
        .config-card {
            background:var(--surface); border-radius:var(--radius);
            padding:22px 20px; text-align:center; border:1px solid var(--border);
            box-shadow:var(--shadow-sm); transition:var(--transition);
            text-decoration:none; color:var(--text);
        }
        .config-card:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-2px); }
        .config-card .cc-icon { font-size:2rem; margin-bottom:10px; }
        .config-card h4 { font-weight:650; margin-bottom:4px; }

        /* CTA */
        .cta-download {
            text-align:center; padding:38px 20px;
            background:linear-gradient(135deg, #0c2530, #0f2f3b);
            border-radius:var(--radius-xl); color:#fff; margin:40px 0 30px;
        }
        .cta-download h2 { font-size:1.7rem; font-weight:750; margin-bottom:10px; }
        .cta-download p { color:#bcd0df; margin-bottom:20px; }
        .btn-download-cta {
            display:inline-flex; align-items:center; gap:8px;
            background:#fff; color:#0c2530; padding:14px 30px;
            border-radius:28px; font-weight:650; text-decoration:none;
            transition:var(--transition); box-shadow:0 8px 20px rgba(0,0,0,0.3);
        }
        .btn-download-cta:hover { background:#e6f0f4; transform:translateY(-2px); }

        /* 页脚 */
        .footer {
            background:#0c1a22; color:#8aa0b4; padding:30px 0 20px;
            text-align:center; border-radius:28px 28px 0 0; margin-top:20px;
        }
        .footer-links { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-bottom:14px; }
        .footer-links a { color:#bcd0df; text-decoration:none; font-size:0.85rem; transition:var(--transition); }
        .footer-links a:hover { color:#fff; }
        .copyright { font-size:0.72rem; color:#6a8296; }

        @media(max-width:768px) {
            .step-card { flex-direction:column; }
            .progress-bar { min-width:100px; }
            .page-hero h1 { font-size:2rem; }
            .nav-inner { flex-direction:column; }
        }