/* ============================================================
   胖宝同学 · 下载页新增样式
   约束：
   - 只引用 style.css :root 已声明的变量，不自造任何色值
   - 不引用 --text-head / --text-body（这两个变量在 :root 未声明，
     引用后会静默回退继承，是 style.css 遗留问题，新代码不踩）
   - 新增类全部 dl- 前缀，避免与 style.css 撞名
   ============================================================ */

/* ---------------------------------------------------------------------------
   hidden 属性兜底
   【为什么需要这一条】HTML 的 hidden 属性是靠浏览器 UA 样式表里的
   [hidden]{display:none} 生效的，而层叠顺序里**作者样式优先于 UA 样式**——
   本文件只要给同一个元素写了任何一条 display，hidden 就被静默盖掉。
   本页 .dl-hero-meta 设了 display:flex，于是 fetch 失败的降级态下：
   元信息内容是空的没错，但三个分隔符「·」照样渲染，首屏下载按钮底下会多出
   三个孤零零的点。这个失效不报错、正常态下也看不见，只有在降级路径上才现形。
   所以这里加一条全局兜底，而不是逐个类去打补丁——下次谁再新增一个带 display
   的可隐藏元素，不必再想起这件事。
   --------------------------------------------------------------------------- */
[hidden] {
    display: none !important;
}

/* ============================================================
   Hero（下载主屏）
   亮底 + 顶部淡蓝光晕：借鉴 .hero 的蓝色渐变思路但改浅色，
   下载页要的是快和聚焦，不搬首页的视频 hero
   ============================================================ */

.dl-hero {
    position: relative;
    /* 顶部额外留出 fixed 导航栏的高度（约 60px），保证主按钮首屏免滚动可见 */
    padding: calc(var(--section-py) + 40px) 0 var(--section-py);
    text-align: center;
    overflow: hidden;
}

.dl-hero-glow {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 720px;
    height: 480px;
    /* transparent 是关键字不是色值；光晕颜色完全来自 --accent-dim */
    background: radial-gradient(closest-side, var(--accent-dim), transparent);
    pointer-events: none;
}

.dl-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 【为什么要覆盖 align-self】复用 style.css 的 .model-tag 时踩到的坑：那个类自带
   align-self: flex-start，是为首页里左对齐的卡片布局写的。放进本页这个居中的
   flex 容器后，子元素自己的 align-self 优先于容器的 align-items，徽章就被顶到了最左边，
   而标题、副标题、按钮都居中——只有它一个歪着。
   style.css 服务着线上首页不能改，所以在这里定点覆盖。 */
.dl-hero-inner .model-tag {
    align-self: center;
}

.dl-hero-title {
    font-size: var(--fs-hero);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.dl-hero-sub {
    font-size: var(--fs-lead);
    color: var(--text-mute);
    max-width: 560px;
    margin-bottom: 12px;
}

/* 版本元信息行：初始 hidden，由 JS 拉到 latest.json 后才显示 */
.dl-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    font-size: var(--fs-small);
    color: var(--text-mute);
}

.dl-meta-sep {
    color: var(--text-dim);
}

/* 非 Windows 提示条：提示但不拦截，用户可能替别的电脑下载 */
.dl-os-note {
    max-width: 520px;
    padding: 10px 16px;
    background: var(--accent-dim);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    color: var(--text);
}

/* ============================================================
   安装包校验（sha256 + 一键复制）
   没拉到 latest.json 时整块不渲染（HTML 初始 hidden）
   ============================================================ */

.dl-hash {
    max-width: 560px;
    width: 100%;
    font-size: var(--fs-small);
    text-align: left;
}

.dl-hash summary {
    cursor: pointer;
    color: var(--text-mute);
    font-weight: 500;
    /* 视觉上居中于容器，与 hero 居中排版对齐 */
    text-align: center;
    list-style-position: inside;
}

.dl-hash summary:hover {
    color: var(--accent);
}

.dl-hash-body {
    margin-top: 12px;
    padding: 16px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.dl-hash-value {
    flex: 1 1 100%;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: var(--fs-micro);
    color: var(--text);
    /* 64 位哈希无空格，小屏必须允许断行，否则会撑破布局 */
    word-break: break-all;
}

.dl-copy-btn {
    padding: 6px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-small);
    font-family: inherit;
    cursor: pointer;
    transition: all .2s var(--ease);
}

.dl-copy-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

.dl-hash-tip {
    flex: 1 1 100%;
    margin: 0;
    color: var(--text-dim);
    font-size: var(--fs-micro);
}

.dl-hash-tip code {
    font-family: 'Geist Mono', ui-monospace, monospace;
}

/* 「了解硬件产品」次链接：承认两条产品线并存，避免访客迷路 */
.dl-footer-link {
    font-size: var(--fs-small);
    color: var(--text-mute);
    text-decoration: none;
    transition: color .2s var(--ease);
}

.dl-footer-link:hover {
    color: var(--accent);
}

/* ============================================================
   行业工作窗（第 3 屏）
   没有真实客户端截图，用纯 CSS 示意三栏布局，不留空图位
   ============================================================ */

.dl-scene-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: center;
    max-width: var(--max-w);
    margin: 0 auto;
}

.dl-scene-text h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    margin-bottom: 8px;
}

.dl-scene-text p {
    color: var(--text-mute);
    margin-bottom: 28px;
}

.dl-scene-text p:last-child {
    margin-bottom: 0;
}

/* CSS 示意窗口：骨架条全部走变量色，不用任何十六进制色值 */
.dl-scene-mock {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.dl-scene-titlebar {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
}

.dl-scene-titlebar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-elev);
}

.dl-scene-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px;
}

.dl-scene-col {
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.dl-scene-col-head {
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--text-mute);
    margin-bottom: 10px;
}

/* 骨架条：纯示意用，宽度错开模拟真实文本行 */
.dl-bar {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--bg-elev);
    margin-bottom: 8px;
}

.dl-bar:last-child {
    margin-bottom: 0;
}

.dl-scene-col .dl-bar:nth-child(3) { width: 82%; }
.dl-scene-col .dl-bar:nth-child(4) { width: 64%; }
.dl-scene-col .dl-bar:nth-child(5) { width: 90%; }
.dl-scene-col .dl-bar:nth-child(6) { width: 48%; }

/* ============================================================
   安全与信任（第 4 屏）
   桌面软件下载前的最后顾虑，短列表临门一脚
   ============================================================ */

.dl-trust-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.dl-trust-list li {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    text-align: center;
}

.dl-trust-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 16px;
}

.dl-trust-list h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    margin-bottom: 8px;
}

.dl-trust-list p {
    font-size: var(--fs-small);
    color: var(--text-mute);
}

/* ============================================================
   内测申请（末屏）
   表单卡片白底浮在 section-alt 的浅灰底上；
   错误提示不用红色——本文件约束零自造色值，而 :root 没有 error 色变量，
   故用「⚠ 图标 + 正文色加粗 + aria-invalid/role=alert」传达错误语义，
   视觉层级交给结构与无障碍属性，不向设计体系外借颜色
   ============================================================ */

.dl-beta-form {
    max-width: 560px;
    margin: 0 auto;
    padding: 32px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
}

.dl-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dl-field label {
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--text);
}

/* 必填星号：用 --accent 而非红色（约束同上），位置紧跟标签已足够表意 */
.dl-req {
    color: var(--accent);
}

.dl-field input,
.dl-field select,
.dl-field textarea {
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.dl-field input:focus,
.dl-field select:focus,
.dl-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    /* 聚焦光圈复用 --accent-glow，与 .btn-primary:hover 的阴影同源 */
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.dl-field textarea {
    resize: vertical;
    min-height: 96px;
}

.dl-field input::placeholder,
.dl-field textarea::placeholder {
    color: var(--text-dim);
}

/* 行业选项拉取失败 / 加载中时 select 与提交按钮置灰 */
.dl-field select:disabled {
    color: var(--text-dim);
    cursor: not-allowed;
}

/* 字段级错误文案：⚠ 图标 + 加粗传达错误，不靠颜色 */
.dl-field-err {
    margin: 0;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--text);
}

.dl-field-err::before {
    content: "⚠ ";
}

/* 表单级消息条：后端 msg（参数不合法 / 40228 限流）与网络错误统一落这里 */
.dl-form-msg {
    margin: 0;
    padding: 10px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    color: var(--text);
}

/* pending 态：提交中禁用，压掉 .btn-primary:hover 的位移与阴影，
   否则禁用态下悬停还会「浮起来」，看起来像还能点 */
.dl-beta-form .btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.dl-beta-form .btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.dl-beta-note {
    margin: 0;
    font-size: var(--fs-micro);
    color: var(--text-dim);
    text-align: center;
}

/* 成功态卡片：与表单同宽同底，替换后不引起布局跳动 */
.dl-beta-success {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 32px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.dl-beta-success-title {
    font-size: var(--fs-h3);
    font-weight: 600;
    margin-bottom: 8px;
}

.dl-beta-success-sub {
    font-size: var(--fs-small);
    color: var(--text-mute);
    margin-bottom: 24px;
}

/* ============================================================
   滚动揭示
   dl-reveal 类由 JS 添加（不污染 HTML），JS 不跑则内容天然可见
   ============================================================ */

.dl-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.dl-reveal.dl-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   响应式：只补 900px / 560px 两个断点，对齐 style.css 现有断点值
   ============================================================ */

@media (max-width: 900px) {
    .dl-scene-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .dl-trust-list {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}

@media (max-width: 560px) {
    .dl-hero {
        /* 小屏压缩顶部留白，保证主按钮仍免滚动可见 */
        padding-top: calc(var(--section-py) + 16px);
    }
    .dl-hero .btn-lg {
        /* 主按钮防溢出（white-space:nowrap 在 .btn 已有） */
        max-width: 100%;
    }
    .dl-scene-cols {
        /* 三栏示意窗在小屏保持三栏会过窄，维持比例缩放即可，
           不改成单栏——它是示意图不是真实内容 */
        gap: 8px;
        padding: 12px;
    }
    .dl-beta-form,
    .dl-beta-success {
        /* 小屏收窄卡片内边距，给输入框留足可点宽度 */
        padding-left: 20px;
        padding-right: 20px;
    }
}