/* ==========================================================================
   1. 全局设计系统 (Design System)
   ========================================================================== */
:root {
    /* 颜色画布：顶级的暗黑科技风 */
    --bg-main: #000000;
    --bg-card: #1c1c1e;
    --border-color: #2c2c2e;

    /* 文字层级 */
    --text-main: #ffffff;
    --text-muted: #8e8e93;
    --text-link: #0a84ff;

    /* 字体与间距 */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --max-width: 1100px;
}

/* ==========================================================================
   2. 基础重置 (Base Reset)
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   3. 公共骨架组件：通用的导航栏 (Global Header)
   ========================================================================== */
/* 找到 .global-nav，给它一个固定的预设高度 */
.global-nav {
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(20px);
    position: sticky; top: 0; z-index: 100;

    /* 🌟 新加：在本地组件还没渲染出来前，先把 64px 的高度占死，防止页面抖动 */
    height: 64px;
}
.nav-container {
    display: flex; justify-content: space-between; align-items: center; height: 64px;
}
/* 1. 让父级 a 标签变成弹性盒子 */
.nav-logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* 2. 规范内部图片（SVG/PNG）的尺寸 */
.nav-logo img {
    width: 36px;           /* 设定一个适合导航栏的精致尺寸 */
    height: 36px;
    object-fit: contain;   /* 确保图片缩放不失真 */
    display: block;        /* 消除图片底部的默认微小空白间隙 */
}
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
    text-decoration: none; color: var(--text-muted); font-size: 14px; font-weight: 500; transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-main); }

/* ==========================================================================
   4. 公共骨架组件：通用的页脚 (Global Footer)
   ========================================================================== */
/* 找到 .global-footer，同样把高度和内边距占死 */
.global-footer {
    border-top: 1px solid var(--border-color);
    margin-top: 120px;
    text-align: center; color: var(--text-muted); font-size: 14px;

    /* 🌟 新加：提前预留大约 120px 的物理高度占位 */
    min-height: 120px;
    padding: 40px 0;
}
.footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; list-style: none; }
.footer-links a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--text-main); text-decoration: underline; }

/* 扩展全局导航样式 */
.nav-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* 极简原生态语言选择器 */
/* 极简原生态语言选择器 */
.lang-selector {
    background-color: #1c1c1e; /* 显式声明：强制使用深色底，防止部分浏览器穿透 */
    color: var(--text-main);   /* 强制使用白色文字 */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 28px 6px 12px; /* 右边留出空间给原生的小箭头 */
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    outline: none;
    transition: all 0.2s;

    /* 抹平不同系统间默认样式的差异 */
    appearance: none;
    -webkit-appearance: none;
    /* 引入一个优雅的小向下箭头 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

/* 关键修复：强制控制弹出列表（Option）的样式 */
.lang-selector option {
    background-color: #1c1c1e; /* 弹窗列表背景为深灰 */
    color: #ffffff;            /* 弹窗列表文字为纯白 */
    padding: 8px;
}

.lang-selector:hover {
    border-color: #444;
}

/* ==========================================================================
   5. Markdown / 条款类文本专属排版样式 (Article Typography)
   ========================================================================== */
.legal-content {
    max-width: 680px; /* 国际标准的最佳阅读舒适宽度 */
    margin: 40px auto;
    padding: 0 20px;
}

/* 精准微调 Markdown 转出的 HTML 标签，使其完美融入暗黑环境 */
.legal-content h1 {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.legal-content h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    margin-top: 40px;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.legal-content p, .legal-content li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-muted); /* 条款正文使用优雅的淡灰色，降低视觉疲劳 */
    margin-bottom: 14px;
}

.legal-content p strong {
    color: var(--text-main); /* 让加粗的字亮起来 */
}

.legal-content ul {
    padding-left: 24px;
    margin-bottom: 20px;
}

.legal-content li {
    margin-bottom: 8px;
    list-style-type: disc;
}

/* ==========================================================================
   Download Section
   ========================================================================== */
.download-section {
    padding: 100px 0;
    background: #000000;
}

.download-section h2 {
    text-align: center;      /* 🎯 核心：让文字居中 */
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin-top: 0;           /* 清理顶部可能存在的默认间距 */
    margin-bottom: 40px;     /* 保持标题和下方卡片之间有 40px 的呼吸感 */
}

.download-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.download-channel {
    background: #0a0a0c;
    border: 1px solid var(--border-color, #161618);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* 确保底部小字两边水平对齐 */
}

.platform-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.platform-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 32px;
    letter-spacing: -0.01em;
}

.channel-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.channel-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8e8e93;
    margin-bottom: 16px;
    font-weight: 600;
}

/* 🎯 极其纯净的统一对齐黑科技 */
.badge-wrapper {
    height: 44px; /* 锁死容器高度 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🎯 统一控制两张图片的渲染规范 */
.store-badge {
    height: 40px; /* 约束高度在 40px，两张图片在暗黑背景下将呈现完美的物理等高 */
    width: auto;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    object-fit: contain;
}

/* 🎯 悬浮动效完美同时作用于 macOS 和 Windows 徽章 */
.store-badge:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

.channel-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 24px;
}

/* 响应式保持你原有的完美栅格 */
@media (max-width: 768px) {
    .download-box {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }
    .download-channel {
        padding: 30px 20px;
        justify-content: flex-start;
    }
    .channel-hint {
        margin-top: 16px;
    }
}

/* ==========================================================================
   Privacy Notice Box
   ========================================================================== */
.privacy-notice-box {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 540px;
    margin: 40px auto 0 auto; /* 微微微调间距 */
    padding: 20px;
    background: #050507;
    border: 1px solid #161618;
    border-radius: 12px;
    text-align: left;
}

.privacy-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #0d0d0f;
    border: 1px solid #222224;
    border-radius: 8px;
    color: #30d158; /* 你的硬件安全绿极其漂亮，保留 */
    flex-shrink: 0;
}

.privacy-icon svg {
    width: 18px;
    height: 18px;
}

.privacy-text strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.privacy-text p {
    font-size: 14px;
    line-height: 1.65;
    color: #d1d1d6;
    margin: 0;
}

@media (max-width: 768px) {
    .privacy-notice-box {
        margin: 40px 16px 0 16px;
        padding: 16px;
    }
}

/* ==========================================================================
   高级原生轮播图 (Carousel Slider) 样式
   ========================================================================== */
.slider-container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 60px auto 0 auto;
}

/* 可视区域：隐藏超出视口宽度的其他 7 张图 */
.slider-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 50px rgba(255, 255, 255, 0.05);
}

/* 滚动轨道：让 8 张图横向一字排开 */
.slider-track {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* 苹果经典的缓动曲线，极度丝滑 */
}

/* 单张截图：完美自适应容器宽度 */
.slider-track img {
    width: 100%;
    flex-shrink: 0;
    height: auto;
    display: block;
}

/* 左右悬浮控制按钮 */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0; /* 默认隐藏，鼠标滑入容器时才显示 */
}

.slider-container:hover .slider-btn {
    opacity: 1;
}

.slider-btn:hover {
    background: var(--text-main);
    color: var(--bg-main);
    border-color: var(--text-main);
}

.prev-btn { left: -22px; }
.next-btn { right: -22px; }

/* 底部指示小圆点 */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--text-main);
    width: 24px; /* 亮起时拉长成胶囊状，非常现代高端的设计细节 */
    border-radius: 4px;
}

@media (max-width: 768px) {
    .slider-btn { display: none; } /* 移动端靠手指滑动或圆点即可，隐藏箭头 */
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
}

/* 专属过渡带样式 */
.hero-transition-bar {
    width: 100%;
    max-width: 960px;
    margin: 45px auto 25px auto;
    padding: 16px 0;

    /* 上下保持若隐若现的深灰实线 */
    border-top: 1px solid #1c1c1e;
    border-bottom: 1px solid #1c1c1e;

    display: flex;
    /* 🌟 核心修改：4个项目整体完美居中对齐 */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px; /* 标签之间的黄金呼吸间距 */
}

.transition-item {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #a1a1a6; /* 保持最舒适的冷灰色 */

    background: rgba(255, 255, 255, 0.02);
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid #2c2c2e;
    white-space: nowrap;
}

.hero p {
    text-align: left;           /* 🌟 核心修改：彻底告别居中，回归标准的段落左对齐 */
    font-size: 16px;
    line-height: 1.7;
    color: #e5e5ea;             /* 🌟 核心修改：大幅提升文字亮度，使用高亮冷白 */

    max-width: 800px;           /* 🌟 核心修改：放大宽度限制，让文字自然地舒展开来，成为一个开阔的段落 */
    margin: 24px 0 0 0;         /* 🌟 核心修改：移除 auto，让段落自然靠左定居 */
    letter-spacing: -0.01em;
}


.features {
    padding: 40px 0; /* 收紧原本过大的上下间距 */
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 完美的 2x2 网格 */
    gap: 20px; /* 紧凑的格子间距 */
    margin-top: 20px;
}

/* 此时不再需要额外的 grid-wide 类，4 张卡片刚好塞满 */

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr; /* 移动端自动单列堆叠 */
    }
    .hero-transition-bar {
        display: none; /* 移动端隐藏过渡带保持紧凑 */
    }
}

/* ==========================================================================
   Changelog List Indentation
   ========================================================================== */
/* 1. 初始化 CSS 计数器 */
.log-details ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    counter-reset: changelog-counter; /* 创建一个自增计数器 */
}

/* 2. 列表项基本样式 */
.log-details ol li {
    font-size: 14px;
    /* 1. 稍微加大行高，长文本折行时更易读 */
    line-height: 1.7;
    /* 2. 降低正文文本颜色（用次级文本色），让整体不刺眼 */
    color: var(--text-muted);
    /* 3. 加大每项之间的间距，让功能点分明 */
    margin-bottom: 16px;

    position: relative;
    padding-left: 28px; /* 稍微加大左边距，给数字留出呼吸空间 */
}

.log-details ol li strong {
    color: var(--text-main);
    font-weight: 600;
}

/* 3. 彻底干掉原本可能残留的圆点伪元素 */
.log-details ol li::before {
    display: none !important;
    content: "" !important;
    font-weight: bold;
}

/* 4. 核心魔术：通过全新的伪元素强制递增并显示数字 */
.log-details ol li::after {
    counter-increment: changelog-counter; /* 计数器自增 1 */
    content: counter(changelog-counter) "."; /* 显示格式为 "1." "2." */

    /* 绝对定位在左侧留出的 24px 空间内 */
    position: absolute;
    left: 0;
    top: 0;

    color: var(--text-main); /* 让数字颜色稍微亮一点 */
    font-weight: 500;
}

/* 5. 清除最后一项的底部间距 */
.log-details ol li:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Footer & Main Connector (干掉多余断层)
   ========================================================================== */
main {
    /* 确保 main 的最后一个子元素不会把外边距顶出来 */
    display: flex;
    flex-direction: column;
}

main > :last-child {
    margin-bottom: 0 !important;
    padding-bottom: 60px; /* 锁死一个舒适的物理留白，不要依赖块级的 margin */
}

.global-footer {
    margin-top: 0 !important; /* 强制消除 footer 顶部的外边距顶撞 */
    padding-top: 40px;        /* 用精准的 padding 代替 margin */
    border-top: 1px solid #1c1c1e; /* 顺便加一条极淡的分割线，让 main 到 footer 的过渡更清晰 */
}