:root {
            --primary: #6D28D9;
            --primary-dark: #4C1D95;
            --primary-light: #8B5CF6;
            --accent: #F59E0B;
            --accent-dark: #D97706;
            --bg-dark: #0D0A1A;
            --bg-light: #F5F3FF;
            --text-dark: #1E1040;
            --text-medium: #4C3A78;
            --text-light: #8B7AB8;
            --white: #ffffff;
            --card-bg: #FAF8FF;
            --border-light: rgba(109, 40, 217, 0.08);
            --shadow-sm: 0 2px 12px rgba(109, 40, 217, 0.04);
            --shadow-md: 0 8px 28px rgba(109, 40, 217, 0.08);
            --shadow-lg: 0 16px 48px rgba(109, 40, 217, 0.12);
            --gradient-hero: linear-gradient(135deg, #0D0A1A 0%, #1E1040 40%, #2D1B69 70%, #4C1D95 100%);
            --gradient-cta: linear-gradient(135deg, #6D28D9 0%, #4C1D95 100%);
            --gradient-accent: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 28px;
            --radius-xl: 40px;
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: var(--bg-light);
            color: var(--text-dark);
            line-height: 1.65;
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
        }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

        /* ========== NAVBAR ========== */
        .navbar {
            background: rgba(13, 10, 26, 0.92);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(139, 92, 246, 0.12);
            position: sticky; top:0; z-index:100; padding: 10px 0;
        }
        .nav-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
        .logo-area { display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.5rem; color:#fff; text-decoration:none; letter-spacing:-0.5px; }
        .logo-area img { height:42px; width:auto; display:block; filter:drop-shadow(0 0 8px rgba(139,92,246,0.5)); }
        .logo-area span { color:var(--accent); }
        .logo-area .logo-tag { font-size:0.6rem; background:var(--accent); color:#0D0A1A; padding:2px 10px; border-radius:20px; font-weight:700; letter-spacing:1px; margin-left:4px; }
        .nav-links { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
        .nav-links a { text-decoration:none; font-weight:500; color:rgba(255,255,255,0.75); font-size:0.88rem; transition:0.25s; position:relative; letter-spacing:0.3px; }
        .nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:2px; background:var(--accent); transition:width 0.3s; border-radius:2px; }
        .nav-links a:hover::after { width:100%; }
        .nav-links a:hover { color:var(--accent); }
        .nav-links a.active { color:var(--accent); }
        .nav-links a.active::after { width:100%; }
        .btn-nav { background:var(--gradient-accent) !important; color:#0D0A1A !important; padding:8px 22px; border-radius:40px; font-weight:700; font-size:0.82rem; box-shadow:0 4px 20px rgba(245,158,11,0.35); transition:all 0.3s; letter-spacing:0.5px; }
        .btn-nav::after { display:none !important; }
        .btn-nav:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(245,158,11,0.5); color:#0D0A1A !important; }

        /* ========== HERO ========== */
        .hero-terms {
            padding: 70px 0 60px;
            background: var(--gradient-hero);
            position: relative;
            overflow: hidden;
        }
        .hero-terms::before { content:''; position:absolute; top:-30%; right:-15%; width:500px; height:500px; background:radial-gradient(circle, rgba(139,92,246,0.2), transparent 70%); border-radius:50%; }
        .hero-terms::after { content:''; position:absolute; bottom:-20%; left:-10%; width:400px; height:400px; background:radial-gradient(circle, rgba(245,158,11,0.08), transparent 70%); border-radius:50%; }
        .hero-terms-content { position:relative; z-index:1; text-align:center; max-width:800px; margin:0 auto; }
        .hero-terms-badge { display:inline-block; background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.25); border-radius:40px; padding:6px 22px; font-size:0.8rem; font-weight:700; color:var(--accent); margin-bottom:14px; letter-spacing:1px; }
        .hero-terms-badge .dot { width:8px; height:8px; background:#22c55e; border-radius:50%; display:inline-block; margin-right:6px; animation:pulse-dot 1.5s infinite; }
        @keyframes pulse-dot { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.5; transform:scale(1.3);} }
        .hero-terms h1 { font-size:2.8rem; font-weight:800; line-height:1.12; color:#fff; margin-bottom:14px; letter-spacing:-1px; }
        .hero-terms h1 .highlight { background:var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
        .hero-terms-desc { font-size:1.05rem; color:rgba(255,255,255,0.7); margin-bottom:20px; line-height:1.8; }
        .hero-terms-desc strong { color:#fff; }
        .hero-terms-desc .highlight-text { color:var(--accent); font-weight:700; }
        .hero-terms-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; color:rgba(255,255,255,0.5); font-size:0.85rem; }

        /* ========== SECTION HEADERS ========== */
        .section-header { text-align:center; margin-bottom:36px; }
        .section-badge { display:inline-block; background:rgba(109,40,217,0.06); border:1px solid rgba(109,40,217,0.1); border-radius:40px; padding:4px 20px; font-size:0.78rem; font-weight:700; color:var(--primary); margin-bottom:8px; letter-spacing:1px; }
        .section-title { font-size:2rem; font-weight:800; color:var(--text-dark); letter-spacing:-0.5px; }
        .section-title i { color:var(--primary); margin-right:8px; }
        .section-title .gold { color:var(--accent-dark); }
        .section-sub { color:var(--text-medium); font-size:1rem; margin-top:4px; }

        /* ========== 协议要点摘要卡片 ========== */
        .summary-section { padding: 70px 0 80px; background: var(--white); }
        .summary-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
        .summary-card {
            background: var(--card-bg); border-radius: var(--radius-md); padding: 28px 18px 24px; text-align:center; border:1px solid var(--border-light); transition:0.3s; box-shadow:var(--shadow-sm);
        }
        .summary-card:hover { transform: translateY(-5px); border-color:rgba(109,40,217,0.15); box-shadow:var(--shadow-md); }
        .summary-card .summary-icon { font-size:2.4rem; margin-bottom:10px; }
        .summary-card .summary-icon.purple { color:var(--primary); }
        .summary-card .summary-icon.gold { color:var(--accent); }
        .summary-card .summary-icon.green { color:#22c55e; }
        .summary-card .summary-icon.blue { color:#3B82F6; }
        .summary-card h4 { font-size:1.05rem; font-weight:800; color:var(--text-dark); margin-bottom:6px; }
        .summary-card p { font-size:0.85rem; color:var(--text-medium); line-height:1.5; }

        /* ========== 协议正文折叠面板 ========== */
        .terms-content-section { padding: 70px 0 80px; background: var(--bg-light); }
        .terms-accordion { max-width:850px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
        .accordion-item {
            background: var(--white); border-radius:14px; border:1px solid var(--border-light); overflow:hidden; transition:0.3s;
        }
        .accordion-item:hover { border-color:rgba(109,40,217,0.15); box-shadow:var(--shadow-sm); }
        .accordion-header {
            padding:18px 24px; display:flex; align-items:center; gap:12px; cursor:pointer; font-weight:800; color:var(--text-dark); font-size:1rem;
        }
        .accordion-header i { color:var(--primary); font-size:0.85rem; width:22px; transition:transform 0.3s; }
        .accordion-item.open .accordion-header i { transform: rotate(90deg); }
        .accordion-body {
            max-height:0; overflow:hidden; transition:max-height 0.4s ease; padding:0 24px;
        }
        .accordion-item.open .accordion-body { max-height:600px; padding-bottom:20px; }
        .accordion-body p, .accordion-body li { color:var(--text-medium); font-size:0.92rem; line-height:1.8; }
        .accordion-body ul { padding-left:20px; margin-top:6px; }
        .accordion-body strong { color:var(--text-dark); }

        /* ========== 用户权益保障卡片 ========== */
        .rights-section { padding: 70px 0 80px; background: var(--bg-dark); }
        .rights-section .section-title { color:#fff; }
        .rights-section .section-sub { color:rgba(255,255,255,0.5); }
        .rights-section .section-badge { background:rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.2); color:var(--accent); }
        .rights-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
        .right-card {
            background: rgba(255,255,255,0.04); border:1px solid rgba(139,92,246,0.12); border-radius:var(--radius-md); padding:26px 18px 22px; text-align:center; transition:0.3s;
        }
        .right-card:hover { transform: translateY(-4px); border-color:rgba(245,158,11,0.3); }
        .right-card .right-icon { font-size:2.2rem; color:var(--accent); margin-bottom:10px; }
        .right-card h4 { font-size:1rem; font-weight:800; color:#fff; margin-bottom:6px; }
        .right-card p { font-size:0.82rem; color:rgba(255,255,255,0.55); line-height:1.5; }

        /* ========== 协议更新历史时间线 ========== */
        .update-history { padding: 70px 0 80px; background: var(--white); }
        .timeline { position:relative; max-width:650px; margin:0 auto; padding-left:30px; }
        .timeline::before { content:''; position:absolute; left:10px; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--primary), var(--accent)); border-radius:3px; }
        .timeline-item { position:relative; margin-bottom:22px; padding-left:22px; }
        .timeline-item::before { content:''; position:absolute; left:-25px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--primary); border:3px solid var(--white); box-shadow:0 0 0 3px rgba(109,40,217,0.2); }
        .timeline-item:nth-child(even)::before { background:var(--accent); box-shadow:0 0 0 3px rgba(245,158,11,0.2); }
        .timeline-item .timeline-date { font-weight:900; color:var(--primary); font-size:1.05rem; letter-spacing:1px; }
        .timeline-item .timeline-event { color:var(--text-medium); font-size:0.9rem; line-height:1.6; }
        .timeline-item .timeline-event strong { color:var(--text-dark); }

        /* ========== FAQ ========== */
        .faq-section { padding: 60px 0 70px; background: var(--bg-light); }
        .faq-list { display:flex; flex-direction:column; gap:14px; max-width:800px; margin:0 auto; }
        .faq-item {
            background:var(--white); border-radius:14px; padding:20px 24px; border:1px solid var(--border-light); transition:0.3s; cursor:pointer;
        }
        .faq-item:hover { border-color:rgba(109,40,217,0.15); box-shadow:var(--shadow-sm); }
        .faq-item .q { font-weight:800; font-size:1rem; color:var(--text-dark); display:flex; align-items:center; gap:12px; }
        .faq-item .q i { color:var(--primary); font-size:0.8rem; width:20px; transition:transform 0.3s; }
        .faq-item.open .q i { transform: rotate(90deg); }
        .faq-item .a { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
        .faq-item .a-inner { padding-left:30px; margin-top:8px; color:var(--text-medium); font-size:0.92rem; line-height:1.7; }
        .faq-item .a-inner strong { color:var(--text-dark); }
        .faq-item.open .a { max-height:500px; }

        /* ========== 接受协议区域 ========== */
        .accept-section { padding: 60px 0 70px; background: var(--white); }
        .accept-box {
            background: var(--card-bg); border-radius: var(--radius-lg); padding:40px 38px; text-align:center; max-width:650px; margin:0 auto; border:1px solid var(--border-light); box-shadow:var(--shadow-md);
        }
        .accept-box h3 { font-size:1.3rem; font-weight:800; color:var(--text-dark); margin-bottom:8px; }
        .accept-box p { color:var(--text-medium); font-size:0.95rem; margin-bottom:20px; }
        .accept-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
        .btn-accept {
            background:var(--gradient-cta); color:#fff; border:none; padding:12px 28px; border-radius:60px; font-weight:700; font-size:0.95rem; cursor:pointer; text-decoration:none; transition:0.3s; letter-spacing:0.3px;
        }
        .btn-accept:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 8px 28px rgba(109,40,217,0.3); }
        .btn-outline {
            background:transparent; border:1.5px solid var(--primary); color:var(--primary); padding:12px 28px; border-radius:60px; font-weight:700; font-size:0.95rem; cursor:pointer; text-decoration:none; transition:0.3s;
        }
        .btn-outline:hover { background:var(--bg-light); }

        /* ========== FOOTER ========== */
        .footer {
            background: var(--bg-dark); color: rgba(255,255,255,0.65); padding: 50px 0 28px; border-top: 3px solid var(--primary);
        }
        .footer a { color: rgba(255,255,255,0.55); text-decoration: none; transition:0.2s; }
        .footer a:hover { color: var(--accent); }
        .footer .footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:34px; margin-bottom:28px; }
        .footer .brand-col .logo { font-size:1.7rem; font-weight:800; color:#fff; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
        .footer .brand-col .logo i { color: var(--accent); }
        .footer .brand-col .logo span { color: var(--accent); }
        .footer .brand-col p { font-size:0.88rem; line-height:1.7; max-width:340px; }
        .footer .brand-col p strong { color:rgba(255,255,255,0.85); }
        .footer .col h4 { color:#fff; font-size:0.95rem; font-weight:700; margin-bottom:12px; }
        .footer .col ul { list-style:none; }
        .footer .col ul li { margin-bottom:7px; }
        .footer .col ul li a { font-size:0.88rem; color:rgba(255,255,255,0.55); transition:0.2s; }
        .footer .col ul li a:hover { color:var(--accent); }
        .footer .footer-bottom { border-top:1px solid rgba(255,255,255,0.06); padding-top:16px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; font-size:0.78rem; }
        .footer .footer-bottom .icp { color:rgba(255,255,255,0.35); text-align:center; }
        .footer .footer-bottom .icp a { color:rgba(255,255,255,0.35); text-decoration:none; }
        .footer .footer-bottom .icp a:hover { color:var(--accent); }
        .footer .footer-bottom .icp .sep { margin:0 8px; color:rgba(255,255,255,0.12); }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 1024px) {
            .container { padding:0 24px; }
            .hero-terms h1 { font-size:2.3rem; }
            .summary-grid { grid-template-columns: repeat(2, 1fr); }
            .rights-grid { grid-template-columns: repeat(2, 1fr); }
            .footer .footer-grid { grid-template-columns:1fr 1fr; }
        }
        @media (max-width: 768px) {
            .container { padding:0 18px; }
            .nav-inner { flex-direction:column; align-items:center; }
            .nav-links { justify-content:center; gap:10px; }
            .hero-terms h1 { font-size:1.8rem; }
            .summary-grid { grid-template-columns:1fr 1fr; }
            .rights-grid { grid-template-columns:1fr 1fr; }
            .footer .footer-grid { grid-template-columns:1fr 1fr; gap:26px; }
            .accordion-header { padding:16px 18px; }
        }
        @media (max-width: 480px) {
            .container { padding:0 12px; }
            .hero-terms h1 { font-size:1.6rem; }
            .summary-grid { grid-template-columns:1fr; }
            .rights-grid { grid-template-columns:1fr; }
            .accept-box { padding:24px 16px; }
            .footer .footer-grid { grid-template-columns:1fr; text-align:center; }
            .footer .brand-col p { max-width:100%; }
        }