/* ============================================================
   云能官网 - 全站高级体验升级包
   包含：滚动渐入 / Hero 动态背景 / 截图轮播（桌面 3D + 移动端单图铺满）/ 全站暗色模式
   本文件在 style.css / responsive.css 之后加载，覆盖规则优先级更高
   ============================================================ */

/* ---------- 通用：降低动效偏好时禁用新动画 ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal-init { opacity: 1 !important; transform: none !important; }
    .hero-canvas { display: none; }
}

/* ============================================================
   1. 滚动渐入（Scroll Reveal）
   ============================================================ */
.reveal-init {
    opacity: 0;
    transform: translateY(32px);
    will-change: opacity, transform;
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   2. Hero 动态背景（Canvas 粒子层）
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

/* ============================================================
   3. 截图轮播 3D 封面流（仅桌面端 ≥769px 生效；
      移动端 ≤768px 不做任何覆盖，沿用 responsive.css 原有单图轮播）
   ============================================================ */
@media (min-width: 769px) {
.screenshot-slider {
    display: block;
    perspective: 1400px;
    /* 高度 = 图片最大高度 + 说明文字，保证内容放得下且不溢出 */
    min-height: calc(min(600px, 70vh) + 46px);
    /* 关键修复：原 overflow-x:hidden 会让 overflow-y 变成 auto 产生滚动条；
       改为整体 hidden，3D 侧卡溢出被裁剪，不产生任何滚动条 */
    overflow: hidden;
}

.screenshot-tab {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    display: block !important;
    padding: 0 15px;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.78) rotateY(0deg);
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    will-change: opacity, transform;
}

.screenshot-tab.is-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotateY(0deg);
    z-index: 3;
}

.screenshot-tab.is-prev {
    opacity: 0.42;
    transform: translate(calc(-50% - 55%), -50%) scale(0.8) rotateY(22deg);
    z-index: 2;
}

.screenshot-tab.is-next {
    opacity: 0.42;
    transform: translate(calc(-50% + 55%), -50%) scale(0.8) rotateY(-22deg);
    z-index: 2;
}

.screenshot-tab.is-hidden {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    z-index: 1;
    pointer-events: none;
}
}
/* 移动端（≤768px）不覆盖：完全沿用 responsive.css 原有的单图轮播方式 */

/* ============================================================
   4. 全站暗色模式
   ============================================================ */
[data-theme="dark"] {
    --primary-color: #5cb3ff;
    --secondary-color: #ffb27a;
    --accent-color: #35d07f;
    --text-color: #f2f2f2;
    --text-light: #c4c4ce;
    --bg-color: #0f0f13;
    --card-bg: #1a1a21;
    --border-color: #3d3d48;
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* 兜底：个别页面内联写死的白色背景（如 time-capsule），暗色下强制接管；
   同时强制基础文字颜色，未显式设色的元素统一继承浅色 */
[data-theme="dark"] body {
    background-color: #0f0f13 !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] header {
    background-color: #15151a;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #0b1728 0%, #12283f 100%);
}

[data-theme="dark"] .hero-content h1 {
    color: #6cb4ff;
}

[data-theme="dark"] .screenshots {
    background-color: #0d1724;
}

[data-theme="dark"] .features,
[data-theme="dark"] .download,
[data-theme="dark"] .about {
    background-color: var(--bg-color);
}

/* 卡片：深色底 + 清晰边框，增强边界辨识度 */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .download-card,
[data-theme="dark"] .welcome-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px var(--shadow-color);
}

[data-theme="dark"] .feature-icon {
    background: linear-gradient(135deg, #1d2c4a 0%, #182441 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .welcome-card {
    background: linear-gradient(135deg, #1c2431 0%, #212b3c 100%);
}

[data-theme="dark"] .welcome-text h3 {
    color: #6cb4ff;
}

[data-theme="dark"] .welcome-text p {
    color: #c4c4ce;
}

/* 次级文字统一提亮，保证对比度 */
[data-theme="dark"] .feature-card p,
[data-theme="dark"] .download-card p,
[data-theme="dark"] .about-text p,
[data-theme="dark"] .section-header p,
[data-theme="dark"] .contact-info p,
[data-theme="dark"] .screenshot p {
    color: #c4c4ce;
}

[data-theme="dark"] .screenshot img {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .slider-btn {
    background: #232330;
    border-color: #3d3d48;
    color: #dddddd;
}

[data-theme="dark"] .slider-btn:hover {
    background: #2d2d3a;
}

[data-theme="dark"] .dot {
    background: rgba(255, 255, 255, 0.28);
}

[data-theme="dark"] .dot.active {
    background: var(--primary-color);
}

[data-theme="dark"] footer {
    background-color: #0a0a0d;
    color: #b8b8c0;
}

[data-theme="dark"] footer a {
    color: #cfcfd6;
}

[data-theme="dark"] footer a:hover {
    color: #6cb4ff;
}

[data-theme="dark"] .download-icon {
    background: rgba(92, 179, 255, 0.14);
}

/* 按钮：暗色下更协调 */
[data-theme="dark"] .btn-secondary {
    background-color: #232330;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: #2c2c3a;
}

[data-theme="dark"] .btn-login,
[data-theme="dark"] .btn-register {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .btn-login:hover,
[data-theme="dark"] .btn-register:hover {
    background: var(--primary-color);
    color: #0d0d0d;
}

/* ============================================================
   4.1 AI 助手页：CSS 变量联动（跟随手动切换按钮）
       ai-assistant.css 用 @media (prefers-color-scheme) 触发暗色，
       这里在 [data-theme="dark"] 下设置同款变量，两端切换统一
   ============================================================ */
[data-theme="dark"] {
    --ai-bg: #1c1c1e;
    --ai-card-bg: #2c2c2e;
    --ai-text: #f5f5f7;
    --ai-text-secondary: #98989d;
    --ai-text-tertiary: #6e6e73;
    --ai-border: #38383a;
    --ai-header-bg: rgba(28, 28, 30, 0.92);
    --ai-ai-msg-bg: #2c2c2e;
    --ai-ai-msg-border: #3a3a3c;
}

[data-theme="dark"] .guest-banner {
    color: #e0b95c;
}

/* ============================================================
   4.2 音乐页（music-style.css 硬编码）
   ============================================================ */
[data-theme="dark"] .music-features {
    background: #15151a;
}

[data-theme="dark"] .song-card {
    background: #1d1d24;
    border: 1px solid #2e2e36;
}

[data-theme="dark"] .song-title {
    color: #f2f2f2;
}

[data-theme="dark"] .song-artist {
    color: #a8a8b2;
}

[data-theme="dark"] .song-meta {
    color: #8a8a94;
}

[data-theme="dark"] .disc-center {
    background: #2c2c34;
}

/* ============================================================
   4.3 登录 / 注册页（auth.css 硬编码）
   ============================================================ */
[data-theme="dark"] .auth-tabs {
    background-color: #1a1a22;
}

[data-theme="dark"] .tab-btn.active {
    background-color: #232330;
}

[data-theme="dark"] .input-group {
    background-color: #1a1a22;
}

[data-theme="dark"] .input-group:focus-within {
    background-color: #232330;
}

[data-theme="dark"] .input-group.error {
    background-color: #2a1a1a;
}

[data-theme="dark"] .input-group .icon {
    color: #a8a8b2;
}

[data-theme="dark"] .input-group input {
    color: #f2f2f2;
}

[data-theme="dark"] .input-group input::placeholder {
    color: #8a8a94;
}

[data-theme="dark"] .loading-spinner {
    background-color: #232330;
}

/* ============================================================
   4.4 内联样式页：白色/浅色容器统一转深色
       （time-capsule / annual-2025 / terms / community-rules /
         privacy-policy / faq / help / about / baidu-submit）
   ============================================================ */
[data-theme="dark"] .app-container,
[data-theme="dark"] .tab-container,
[data-theme="dark"] .capsule-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .recipient-info,
[data-theme="dark"] .summary-item,
[data-theme="dark"] .viewer-item,
[data-theme="dark"] .user-search-results,
[data-theme="dark"] .selected-user,
[data-theme="dark"] .achievement-card,
[data-theme="dark"] .timeline-section,
[data-theme="dark"] .timeline-content,
[data-theme="dark"] .feature-highlight,
[data-theme="dark"] .terms-header,
[data-theme="dark"] .terms-content,
[data-theme="dark"] .rules-container,
[data-theme="dark"] .contact-item,
[data-theme="dark"] .rules-nav,
[data-theme="dark"] .policy-page,
[data-theme="dark"] .category-btn,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .btn-contact,
[data-theme="dark"] .help-card,
[data-theme="dark"] .help-section,
[data-theme="dark"] .about-section,
[data-theme="dark"] .submit-container {
    background: #1a1a21 !important;
    border-color: #33333d !important;
}

[data-theme="dark"] .detail-viewers-summary {
    background: #2a2410 !important;
}

[data-theme="dark"] .detail-viewers {
    background: #121a26 !important;
}

[data-theme="dark"] .user-search-item:hover {
    background: #24242c;
}

/* 4.5 内联样式页：深色文字统一提亮 */
[data-theme="dark"] .tab-item,
[data-theme="dark"] .capsule-username,
[data-theme="dark"] .capsule-message,
[data-theme="dark"] .capsule-unlock-time,
[data-theme="dark"] .capsule-btn.view,
[data-theme="dark"] .empty-state h3,
[data-theme="dark"] .modal-title,
[data-theme="dark"] .modal-close:hover,
[data-theme="dark"] .form-label,
[data-theme="dark"] .modal-btn.cancel,
[data-theme="dark"] .detail-user-info h4,
[data-theme="dark"] .detail-message,
[data-theme="dark"] .recipient-name,
[data-theme="dark"] .summary-label,
[data-theme="dark"] .viewer-name,
[data-theme="dark"] .detail-meta-item,
[data-theme="dark"] .user-search-item-name,
[data-theme="dark"] .user-search-loading,
[data-theme="dark"] .selected-user-name,
[data-theme="dark"] .section-header-small h3,
[data-theme="dark"] .section-header-small p,
[data-theme="dark"] .achievement-title,
[data-theme="dark"] .achievement-desc,
[data-theme="dark"] .thank-you h2,
[data-theme="dark"] .terms-header p,
[data-theme="dark"] .terms-section h3,
[data-theme="dark"] .terms-section p,
[data-theme="dark"] .terms-section ul li,
[data-theme="dark"] .terms-section ol li,
[data-theme="dark"] .rules-header p,
[data-theme="dark"] .rules-section h3,
[data-theme="dark"] .update-time,
[data-theme="dark"] .rules-nav a,
[data-theme="dark"] .policy-section p,
[data-theme="dark"] .policy-section ol li,
[data-theme="dark"] .data-table tbody td,
[data-theme="dark"] .data-table-wrapper,
[data-theme="dark"] .page-header p,
[data-theme="dark"] .category-btn,
[data-theme="dark"] .faq-question h3,
[data-theme="dark"] .faq-answer p,
[data-theme="dark"] .help-card h3,
[data-theme="dark"] .help-card p,
[data-theme="dark"] .help-content,
[data-theme="dark"] .help-content h3,
[data-theme="dark"] .about-content,
[data-theme="dark"] .value-card h3,
[data-theme="dark"] .value-card p,
[data-theme="dark"] .team-member h3,
[data-theme="dark"] .team-member p,
[data-theme="dark"] .license-content h1,
[data-theme="dark"] .license-content h2,
[data-theme="dark"] .license-content p,
[data-theme="dark"] .license-date,
[data-theme="dark"] .error-title,
[data-theme="dark"] .error-message,
[data-theme="dark"] .helpful-links h3,
[data-theme="dark"] .submit-header p,
[data-theme="dark"] .form-group label,
[data-theme="dark"] .preset-urls h3,
[data-theme="dark"] .info-section h3 {
    color: #e8e8ec !important;
}

/* ============================================================
   4.6 style.css 遗留：排行榜 / 用户区 / 页脚图标 / 标签
   ============================================================ */
[data-theme="dark"] .games-leaderboard {
    background: var(--card-bg);
}

[data-theme="dark"] .leaderboard-header .btn {
    background-color: #232330;
    color: #e8e8ec;
}

[data-theme="dark"] .avatar {
    background-color: #1d2c4a;
}

[data-theme="dark"] .user-welcome,
[data-theme="dark"] .download-user-info .user-welcome {
    background: var(--card-bg);
}

[data-theme="dark"] .social-links a {
    color: #cfcfd6;
}

[data-theme="dark"] .user-tags .tag {
    color: #c4c4ce;
}

[data-theme="dark"] .user-tags .tag.status-tag.deactivated {
    color: #8a8a94;
}

[data-theme="dark"] .welcome-card-details-item span {
    color: #c4c4ce;
}

/* ---------- 主题切换按钮 ---------- */
.theme-toggle-btn {
    position: fixed;
    right: 24px;
    bottom: 100px;
    z-index: 9998;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    color: #0066cc;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.theme-toggle-btn:hover {
    transform: scale(1.12) rotate(20deg);
    box-shadow: 0 10px 30px rgba(0, 102, 204, 0.3);
}

[data-theme="dark"] .theme-toggle-btn {
    background: #232330;
    border-color: #3a3a45;
    color: #ffd76a;
}

@media (max-width: 768px) {
    .theme-toggle-btn {
        right: 16px;
        bottom: 88px;
        width: 42px;
        height: 42px;
    }
}

/* ============================================================
   5. 功能卡片：hover 磁吸光效 + 示例标签展开
   ============================================================ */
.feature-card {
    --mx: 50%;
    --my: 50%;
}

/* 磁吸光斑：跟随鼠标位置的柔和光晕（明暗双模式适配） */
.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--mx) var(--my), rgba(0, 102, 204, 0.18), transparent 62%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.feature-card:hover::after {
    opacity: 1;
}

[data-theme="dark"] .feature-card::after {
    background: radial-gradient(260px circle at var(--mx) var(--my), rgba(92, 179, 255, 0.32), transparent 62%);
}

/* 卡片内容置于光斑之上 */
.feature-card > * {
    position: relative;
    z-index: 1;
}

/* hover 时图标轻微放大旋转，更有呼吸感 */
.feature-card:hover .feature-icon i {
    transform: scale(1.15) rotate(-6deg);
}

.feature-card:hover .feature-icon {
    box-shadow: 0 10px 30px rgba(0, 102, 204, 0.35);
}

/* ============================================================
   5.1 功能卡片：粒子磁吸（鼠标靠近时粒子被吸过来）
   ============================================================ */
.feature-particles {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.feature-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary-color);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.feature-particle.on {
    opacity: 0.6;
    box-shadow: 0 0 10px 2px var(--primary-color);
}

[data-theme="dark"] .feature-particle.on {
    opacity: 0.75;
    box-shadow: 0 0 12px 3px rgba(92, 179, 255, 0.8);
}

/* 示例标签：默认收起，hover 时平滑展开 */
.feature-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition:
        max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease 0.05s,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        margin-top 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-card:hover .feature-examples {
    margin-top: 14px;
    max-height: 120px;
    opacity: 1;
    transform: translateY(0);
}

.feature-example {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--primary-color);
    background: rgba(0, 102, 204, 0.07);
    border: 1px solid rgba(0, 102, 204, 0.16);
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.feature-example:hover {
    transform: translateY(-2px) scale(1.05);
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.3);
}

[data-theme="dark"] .feature-example {
    background: rgba(92, 179, 255, 0.12);
    border-color: rgba(92, 179, 255, 0.28);
    color: #6cb4ff;
}

[data-theme="dark"] .feature-example:hover {
    background: var(--primary-color);
    color: #0d0d0d;
}

/* 触屏设备（无 hover）：示例标签始终可见，避免内容被隐藏 */
@media (hover: none) {
    .feature-examples {
        max-height: 120px;
        opacity: 1;
        transform: none;
        margin-top: 14px;
    }
}

/* ============================================================
   4.7 SDK 清单页（sdk-sharing-list 内联样式）
   ============================================================ */
[data-theme="dark"] .sdk-card,
[data-theme="dark"] .sdk-nav-list,
[data-theme="dark"] .sdk-important-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .sdk-nav-list a,
[data-theme="dark"] .sdk-card-body,
[data-theme="dark"] .sdk-card-header-info {
    color: #c4c4ce;
}

[data-theme="dark"] .sdk-card-title {
    color: #f2f2f2;
}

[data-theme="dark"] .sdk-section-title h3 {
    color: #e8e8ec;
}

/* ============================================================
   4.8 隐私政策页（privacy-policy 内联样式）
   ============================================================ */
[data-theme="dark"] .policy-page,
[data-theme="dark"] .info-box,
[data-theme="dark"] .warning-box {
    background: var(--card-bg);
}

[data-theme="dark"] .info-box,
[data-theme="dark"] .warning-box {
    background: #1a1a21;
    color: #c4c4ce;
    border-color: var(--border-color);
}

[data-theme="dark"] .policy-tab {
    color: #a2a2aa;
}

/* ============================================================
   6. 首页透明导航：页面顶部透明，滚动到功能区变实底
   ============================================================ */
header.nav-transparent {
    background: transparent;
    box-shadow: none;
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

/* 透明态：文字颜色随主题（浅色深字、深色浅字），在 hero 背景上可读 */
header.nav-transparent .nav-links ul li a {
    color: var(--text-color);
}

header.nav-transparent .nav-links ul li a::after {
    background-color: var(--primary-color);
}

header.nav-transparent .logo h1,
header.nav-transparent .logo h2 {
    color: var(--primary-color);
}

header.nav-transparent .fa-bars,
header.nav-transparent .fa-times {
    color: var(--primary-color);
}

/* 实底态：滚动到功能区后恢复白底/深底 + 阴影 */
header.nav-transparent.nav-solid {
    background: #ffffff;
    box-shadow: 0 2px 10px var(--shadow-color);
}

[data-theme="dark"] header.nav-transparent.nav-solid {
    background: #161616;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   7. 导航栏「登录/注册」按钮深色适配
      （style.css 用 .nav-links ul li .btn-login 高特异性定义白底，
        这里用同样特异性覆盖，避免深色下按钮变白底只剩图标）
   ============================================================ */
[data-theme="dark"] .nav-links ul li .btn-login,
[data-theme="dark"] .nav-links ul li .btn-register {
    background: linear-gradient(135deg, #232330 0%, #1c1c24 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .nav-links ul li .btn-login {
    color: #6cb4ff;
}

[data-theme="dark"] .nav-links ul li .btn-register {
    color: #35d07f;
}

[data-theme="dark"] .nav-links ul li .btn-login:hover,
[data-theme="dark"] .nav-links ul li .btn-register:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   8. 全页粒子背景（首页）
   ============================================================ */
.body-particles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* 内容区块背景透明，透出粒子网络；卡片内部保持不透明保证可读 */
.features,
.screenshots,
.download,
.about {
    background: transparent !important;
}

/* 特殊区域保留（不透明，保证图片/内容清晰）：截图轮播主卡片、hero 本身 */
@media (prefers-reduced-motion: reduce) {
    .body-particles { display: none; }
}

/* ============================================================
   9. 下载区深色适配
   ============================================================ */
[data-theme="dark"] .download-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px var(--shadow-color);
}

[data-theme="dark"] .download-card h3 {
    color: #f2f2f2;
}

[data-theme="dark"] .download-card p {
    color: #c4c4ce;
}

[data-theme="dark"] .download-icon {
    background: #1d2c4a;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .download-icon i {
    color: #6cb4ff;
}

[data-theme="dark"] .home-version-tag {
    background: rgba(92, 179, 255, 0.14);
    color: #6cb4ff;
    border: 1px solid rgba(92, 179, 255, 0.32);
}

[data-theme="dark"] .btn-download {
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .download-user-info .user-welcome,
[data-theme="dark"] .download-user-info {
    background: var(--card-bg);
    color: var(--text-color);
}

[data-theme="dark"] .download-user-info .user-details h3 {
    color: #f2f2f2;
}

[data-theme="dark"] .download-user-info .user-details p {
    color: #c4c4ce;
}

/* ============================================================
   10. 移动端导航菜单深色适配
       （菜单滑出面板原为白底，深色下白底配浅字看不清）
   ============================================================ */
@media (max-width: 992px) {
    [data-theme="dark"] .nav-links {
        background-color: rgba(22, 22, 28, 0.98);
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
    }

    [data-theme="dark"] .nav-links ul li a {
        color: #e8e8ec;
    }

    [data-theme="dark"] .nav-links ul li a:hover,
    [data-theme="dark"] .nav-links ul li a:active {
        background-color: rgba(92, 179, 255, 0.12);
        color: #f2f2f2;
    }

    [data-theme="dark"] .nav-links ul li a.active {
        background-color: rgba(92, 179, 255, 0.18);
        color: #6cb4ff;
    }
}

/* ============================================================
   11. 导航容器（.navbar）深色 / 透明适配
       responsive.css 移动端给 .navbar 设了白色背景，
       需在深色模式与首页透明导航下接管，否则导航始终白底
   ============================================================ */
[data-theme="dark"] .navbar {
    background-color: transparent;
}

header.nav-transparent .navbar {
    background-color: transparent;
    backdrop-filter: none;
}

/* ============================================================
   12. 登录 / 注册页深色适配（auth.css 变量 + 硬编码渐变）
   ============================================================ */
[data-theme="dark"] {
    --auth-primary: #5cb3ff;
    --auth-primary-dark: #4da6ff;
    --auth-bg: #0f0f13;
    --auth-card-bg: #1a1a21;
    --auth-text: #f2f2f2;
    --auth-text-light: #c4c4ce;
    --auth-border: #3d3d48;
}

[data-theme="dark"] .auth-container {
    background: linear-gradient(135deg, #0f0f13 0%, #1a1a26 100%);
}

[data-theme="dark"] .tab-btn.active {
    background-color: #2a2a35;
    color: #6cb4ff;
}

[data-theme="dark"] .checkbox-label {
    color: #c4c4ce;
}

[data-theme="dark"] .checkbox-label a {
    color: #6cb4ff;
}

[data-theme="dark"] .auth-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   13. SDK 信息页深色适配（覆盖页面自定义变量体系）
   ============================================================ */
[data-theme="dark"] {
    --primary: #6cb4ff;
    --primary-light: #7bc1ff;
    --primary-dark: #4da6ff;
    --accent: #6cb4ff;
    --accent-light: #9ccaff;
    --bg-light: #0f0f13;
    --bg-card: #1a1a21;
    --text-primary: #f2f2f2;
    --text-secondary: #c4c4ce;
    --text-muted: #8a8a94;
    --border: #3d3d48;
    --border-light: #33333d;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.55);
}

/* 图标底色（浅色硬编码）深色下调暗 */
[data-theme="dark"] .sdk-important-icon--security { background: #173420; color: #4ade80; }
[data-theme="dark"] .sdk-important-icon--privacy   { background: #16263f; color: #60a5fa; }
[data-theme="dark"] .sdk-important-icon--update    { background: #33260f; color: #fbbf24; }
[data-theme="dark"] .sdk-important-icon--law       { background: #331420; color: #f87171; }

[data-theme="dark"] .sdk-nav-item a:hover {
    background: #1d2c4a;
    color: #6cb4ff;
}

/* ============================================================
   14. SDK 页硬编码浅色块深色覆盖（说明/使用场景/数据类型）
   ============================================================ */
[data-theme="dark"] .sdk-notice,
[data-theme="dark"] .sdk-scope {
    background: #1a1a21 !important;
    border-color: #33333d !important;
}

[data-theme="dark"] .sdk-notice-content h3,
[data-theme="dark"] .sdk-scope h4 {
    color: #f2f2f2 !important;
}

[data-theme="dark"] .sdk-notice-content p,
[data-theme="dark"] .sdk-scope ul li {
    color: #c4c4ce !important;
}

[data-theme="dark"] .sdk-scope ul li {
    background: #24242c !important;
    border-color: #33333d !important;
}

[data-theme="dark"] .sdk-data-shared {
    background: rgba(92, 179, 255, 0.08) !important;
    border-color: rgba(92, 179, 255, 0.2) !important;
    color: #c4c4ce !important;
}

[data-theme="dark"] .sdk-data-shared h4 {
    color: #f2f2f2 !important;
}