/* ══════════════════════════════════════════════════════════════════
   设计令牌（2026-10-04 整体改造：站长定调的视觉语言）
   方向：简洁浅灰底 · 白卡片 · 大留白 · 大黑字配小灰字 · 字重分明 ·
        全局微圆角 · 弱化边框与阴影 · 悬停有反馈 · 靠层级与秩序支撑现代高级感。
   改法：前一次是「蓝灰底 + 深灰描边」（--c-bg #e8ecf0 / --c-border #d0d0d0），
        底色偏蓝、边框偏重，靠描边区分层级，看起来旧。
        这次把层级交给「留白 + 字重 + 极浅边框」：
          · 底色改成中性浅灰，与白卡拉开稳定的面差（不靠边框也能分层）
          · 边框压到几乎不可见（#ecedef），只在需要分隔时出现
          · 文字拉开三档：近黑标题 / 中灰正文 / 浅灰小字
          · 圆角统一到「微圆角」一档（6/8/12），不再混用 4~16
          · 阴影改为极弱令牌，弹层才用重一档
   ⚠️ 改这里的值等于全站换肤（组件都吃令牌），改完必须实测对比，不要凭感觉。
   ══════════════════════════════════════════════════════════════════ */
:root {
    /* 2026-10-04 站长定调：全站只留黑白灰，其他颜色都不要。
       实测口径：所有颜色 r=g=b 完全相等，是纯中性灰，不带任何色相（原来的中性灰偏冷，
       #3f434b 这种蓝通道比红通道高 12，严格说仍是「有色」）。
       动作色（链接、主按钮、选中态）＝近黑：层级靠明度与字重，不靠色相。 */
    --c-primary: #111111;
    --c-primary-hover: #000000;
    --c-primary-soft: #ececec;    /* 选中/悬停的浅色填充：中性灰 */
    --c-text-1: #111111;      /* 大黑字：页面标题、卡片主标题、主要数字 */
    --c-text-2: #424242;      /* 正文 */
    --c-text-3: #6e6e6e;      /* 小灰字：说明、元信息 */
    --c-text-4: #9e9e9e;      /* 更弱：占位、时间戳等辅助信息 */
    --c-bg: #f2f2f2;          /* 简洁浅灰底 */
    --c-surface: #ffffff;     /* 白卡片 */
    --c-surface-1: #fafafa;
    --c-surface-2: #f4f4f4;   /* 悬停浅色填充 / 次级面 */
    --c-border: #ececec;      /* 弱化边框：只做分隔，不做轮廓 */
    --c-border-strong: #dfdfdf;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-full: 9999px;
    /* 阴影令牌（2026-10-04 新增）：弱阴影是这套风格的底线，层级优先靠留白与字重。
       用量：--sh-1 吸顶/内嵌、--sh-2 卡片、--sh-3 浮层、--sh-4 模态。
       颜色同样去色：原来带一点蓝（16,18,22），现改纯黑。 */
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sh-2: 0 2px 8px rgba(0, 0, 0, 0.05);
    --sh-3: 0 8px 24px rgba(0, 0, 0, 0.10);
    --sh-4: 0 16px 44px rgba(0, 0, 0, 0.16);
    /* 间距体系（2026-10-02 建立）：此前 padding/margin 是散落的魔数
       （8/12/14/16/20/24/28/32 混用），现统一为一套语义令牌，按用途选档。 */
    --sp-2xs: 4px;
    --sp-xs: 6px;
    --sp-sm: 8px;
    --sp-md: 12px;
    --sp-lg: 16px;
    --sp-xl: 20px;
    --sp-2xl: 24px;
    --sp-3xl: 32px;
    --sp-4xl: 48px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* UI 2 主题：结构语言（底色/文字/边框/圆角/阴影）与默认主题完全对齐，
   只有动作色不同 —— 主题只换色，不换秩序，避免出现两套版式。 */
html.theme-ui2 {
    --c-primary: #111111;
    --c-primary-hover: #000000;
    --c-primary-soft: #ececec;
    --c-text-1: #111111;
    --c-text-2: #424242;
    --c-text-3: #6e6e6e;
    --c-text-4: #9e9e9e;
    --c-bg: #f2f2f2;
    --c-surface: #ffffff;
    --c-surface-1: #fafafa;
    --c-surface-2: #f4f4f4;
    --c-border: #ececec;
    --c-border-strong: #dfdfdf;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-full: 9999px;
}

/* ── 樱花主题（2026-10-02 新增）──────────────────────────────────
   配色按 WCAG 2.1 实算过对比度（设计守则铁律：装饰不得牺牲文字对比度）：
     主色 #C2185B：白底 5.87:1、主题底色 5.52:1 —— 达正文级 4.5:1
     正文文字沿用默认主题的中性深灰，不染粉；主题底色比默认更浅，
     实测正文对比度反而从 13.4 / 8.2 / 4.8 提升到 14.9 / 9.1 / 5.4
   原先想要的浅粉 #E0507F 只有 3.51:1，不达标，因此只用于粒子等纯装饰。
   形状语言：圆角更圆润（10/14），与雪花的利落形成区分。 */
html.theme-sakura {
    --c-primary: #c2185b;
    --c-primary-hover: #a3154c;
    --c-primary-soft: #fde9f1;
    --c-bg: #fdf6f9;
    --c-surface: #ffffff;
    --c-surface-1: #fcf7f9;
    --c-surface-2: #f9eff4;
    --c-border: #eedce4;
    --c-border-strong: #ddc4cf;
    /* 圆角与默认主题统一（2026-10-04）：主题只换色，不换结构语言 */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-full: 9999px;
    /* 装饰色（仅粒子使用，不承担文字） */
    --fx-a: #f2a0be;
    --fx-b: #f8c8d9;
}

/* ── 雪花主题（2026-10-02 新增）──────────────────────────────────
   对比度实算：主色 #2C6BC4 白底 5.24:1、主题底色 4.91:1 —— 达正文级
   背景取冷白，形状语言比樱花利落（6/8），配冷蓝粒子。 */
html.theme-snow {
    --c-primary: #2c6bc4;
    --c-primary-hover: #2359a6;
    --c-primary-soft: #e8f1fd;
    --c-bg: #f4f8fd;
    --c-surface: #ffffff;
    --c-surface-1: #f7fafe;
    --c-surface-2: #edf3fa;
    --c-border: #dce6f2;
    --c-border-strong: #c3d2e4;
    /* 圆角与默认主题统一（2026-10-04）：主题只换色，不换结构语言 */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-full: 9999px;
    --fx-a: #eaf3ff;
    --fx-b: #cfe3fb;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--c-text-1);
    background: var(--c-bg);
    min-height: 100vh;
    min-height: 100dvh; /* 手机浏览器地址栏展开/收起时，使用动态视口高度，保证 footer 贴底 */
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}
/* 去除浏览器默认 focus 蓝色轮廓（保留键盘 :focus-visible） */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}
a { color: var(--c-primary); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--c-primary-hover); }
img { max-width: 100%; }

/* 控件字号统一（2026-10-04 观感评审）：浏览器对 button/input/select/textarea 默认给 13.333px，
   页面里因此长期混着一档无意义的碎片字号（同一屏出现 12 / 12.5 / 13 / 13.3333 / 14）。
   这里让控件继承所在容器的字号；已显式指定字号的控件不受影响（类选择器优先级更高）。 */
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 32px;
}

.page-wrapper {
    min-height: 100vh;
    min-height: 100dvh; /* 手机浏览器动态视口：地址栏可见时也能让 footer 贴住可视区底部 */
    display: flex;
    flex-direction: column;
}

/* Header */
/* Header：吸顶只靠一条极浅分隔 + 最弱阴影，不再用重投影压住内容 */
.site-header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--sh-1);
    position: sticky;
    top: 0;
    z-index: 100;
}
html.theme-ui2 .site-header {
    box-shadow: var(--sh-1);
}
.site-header .container {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 64px;
}
.brand {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text-1);
    letter-spacing: -0.01em;
    white-space: nowrap;
    flex-shrink: 0;
}
.brand:hover { color: var(--c-text-1); }

.site-nav {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.nav-link {
    padding: 8px 16px;
    color: var(--c-text-2);
    font-size: 15px;
    border-radius: var(--r-md);
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
    white-space: nowrap;
}
.nav-link:hover {
    background: var(--c-surface-2);
    color: var(--c-text-1);
}
.nav-link.active {
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: 500;
}
/* 标签栏图标（2026-10-02）：桌面端不显示，保持原有纯文字导航外观；
   移动端由文件末尾的「移动端底部标签栏」块接管显示。 */
.nav-ico { display: none; }

/* Search */
.search-box {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
    padding: 0 14px;
    height: 40px;
    border: 1px solid transparent;
    transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
    flex: 0 1 300px;
    min-width: 0;
}
.search-box:focus-within {
    background: var(--c-surface);
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);   /* 2026-10-04 去色：原为品牌蓝的聚焦环 */
}
.search-icon {
    color: var(--c-text-4);
    flex-shrink: 0;
    transition: color 0.15s;
}
.search-box:focus-within .search-icon { color: var(--c-primary); }
.search-box input {
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    font-size: 15px;
    color: var(--c-text-1);
    width: 100%;
    min-width: 0;
    font-family: inherit;
    line-height: 1;
}
.search-box input::placeholder { color: var(--c-text-4); }

/* Main Content：大留白——上留白拉开与吸顶栏的距离，底部留足，避免页面显得挤 */
.main-content {
    flex: 1;               /* 撑开剩余空间，把 footer 顶到底部 */
    /* 2026-10-01 修：原写法 padding: 32px 0 64px 的左右 0 覆盖掉了 .container 的 24px 内边距，
       导致全站内容（尤其移动端）紧贴屏幕左右边缘。这里保留左右边距。 */
    padding: 40px 32px 88px;
    width: 100% !important; /* 强制容器占满，避免个别页面（如网站分类）被压缩成单列 */
}

/* 大黑字：页面标题再大一档、字重 700、字距收紧，与下方小灰字形成明确落差 */
.page-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--c-text-1);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--c-text-1);
    margin: 40px 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 小灰字：正文之下的说明统一压到 14px + 中灰，避免与标题抢视线 */
.page-desc {
    color: var(--c-text-3);
    font-size: 14px;
    margin-bottom: 28px;
}

/* Filter Bar */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--c-border);
}
/* 分类筛选：去掉描边改浅灰填充（2026-10-04 观感评审 —— 这是首屏唯一成排的线，
   蓝边灰边混在一起最抢眼）。选中态仍用实心主色，靠底色而不是线条区分。 */
.cat-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-2);
    background: var(--c-surface-2);
    border: 1px solid transparent;
    border-radius: var(--r-full);
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
    text-decoration: none;
    display: inline-block;
}
.cat-btn:hover {
    color: var(--c-text-1);
    background: var(--c-border-strong);
    text-decoration: none;
}
.cat-btn.active {
    color: #fff;
    background: var(--c-primary);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   首页 / 列表：卡片网格（2026-10-04 从「索引式列表」改回卡片）
   站长原话：「你怎么把首页的那个方框展示改成了那种一条一条展示的？改回来呀，大哥！
             我都没叫你动首页，我一直叫你动的都是客户端的界面」
   —— 索引列表版式是我越界改的（当时误判成「整体重写」的一部分），现按原样恢复成卡片网格。
   卡片规格＝改动前的最后一版（已做过一轮减法）：白面 + 微阴影、无外描边、简介一行、
   无「暂无简介」占位、无重复标签、元信息贴底对齐。
   ⚠️ 卡片标记在两处生成：index.php 与 api.php?action=resources（AJAX 渲染），改一处必须改另一处。
   ══════════════════════════════════════════════════════════════════ */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--sp-2xl);
}
.category-section { margin-bottom: 24px; }

.resource-card {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sh-2);
}
html.theme-ui2 .resource-card {
    box-shadow: var(--sh-2);
}
.resource-card:hover {
    box-shadow: var(--sh-3);
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}
/* 电脑端选中动画：hover / 键盘聚焦时浮出一圈极细描边（spring 弹入） */
@media (hover: hover) and (pointer: fine) {
    .resource-card {
        position: relative;
    }
    .resource-card::after {
        content: '';
        position: absolute;
        inset: -3px;
        border: 1px solid var(--c-primary);
        border-radius: calc(var(--r-lg) + 3px);
        opacity: 0;
        transform: scale(0.98);
        transition: opacity 0.18s var(--ease-out), transform 0.3s var(--ease-spring);
        pointer-events: none;
    }
    .resource-card:hover::after,
    .resource-card:focus-visible::after {
        opacity: 1;
        transform: scale(1);
        animation: card-frame-pop 0.42s var(--ease-out);
    }
}
@keyframes card-frame-pop {
    0%   { opacity: 0; transform: scale(0.95); }
    55%  { transform: scale(1.012); }
    100% { opacity: 1; transform: scale(1); }
}
.card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    flex-shrink: 0;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.04);
}
.card-top-text { min-width: 0; }
.card-top-text h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--c-text-1);
    margin-bottom: 6px;
    line-height: 1.4;
}
.card-top-text p {
    font-size: 13px;
    color: var(--c-text-3);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}
/* 元信息贴底对齐：卡片高度不一时，分类徽章仍在同一水平线上（靠对齐而非线条分层） */
.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    margin-top: auto;
    gap: 8px;
    overflow: hidden;
}
.file-count { color: var(--c-text-4); font-size: 12.5px; }
/* 分类徽章：统一成中性胶囊（2026-10-04 观感评审）
   原来四类各配一种彩色底（浅紫/浅绿/浅蓝/浅橙），与全站主色不同色系 ——
   页面上一眼能看到两种互不相干的主色，是「不简洁」的来源之一。
   分类名本身已经写清楚，不需要靠颜色再区分一遍；深浅主题下都跟着 --c-surface-2 走。 */
.cat-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 12.5px;
    font-weight: 600;
    background: var(--c-surface-2);
    color: var(--c-text-3);
    white-space: nowrap;
}

/* Detail */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--c-text-3);
    margin-bottom: 20px;
}
.breadcrumb a {
    color: var(--c-text-3);
    text-decoration: none;
}
.breadcrumb a:hover { color: var(--c-text-1); }
.breadcrumb span:not(:last-child) { color: var(--c-text-4); }
.breadcrumb > span:last-child { color: var(--c-text-1); }

.resource-detail { max-width: 760px; margin: 0 auto; }
.detail-head { margin-bottom: 32px; }
.detail-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0 16px;
}
.detail-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    flex-shrink: 0;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.04);
}
.detail-head h1 {
    font-size: 30px;
    font-weight: 700;
    color: var(--c-text-1);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.detail-desc {
    color: var(--c-text-2);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 16px;
}
.detail-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--c-text-3);
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}
.btn-primary-sm {
    padding: 7px 16px;
    background: var(--c-primary);
    color: #fff;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}
.btn-primary-sm:hover { background: var(--c-primary-hover); color: #fff; }

/* File List */
.file-list {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.file-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border);
    transition: background 0.15s;
}
.file-item:last-child { border-bottom: none; }
.file-item:hover { background: var(--c-surface-2); }
.file-info { flex: 1; min-width: 0; }
.file-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-size {
    font-size: 13px;
    color: var(--c-text-4);
    margin-top: 2px;
}
/* Button actions group - ensures download + share stay side by side */
.file-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.file-actions .btn-download,
.file-actions .btn-share {
    flex-shrink: 0;
}
/* Table view button actions */
.table-actions {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    justify-content: center;
}
.table-actions .btn-down,
.table-actions .btn-share {
    flex-shrink: 0;
}
/* Download */
.btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 38px;
    padding: 0;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.1s;
}
.btn-download:hover {
    background: var(--c-primary-hover);
    color: #fff;
}
.btn-download:active {
    transform: scale(0.97);
}

.btn-download:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 3px;
}

/* Visit button variant */
.btn-download.btn-visit { width: auto; padding: 0 16px; }
@media (prefers-reduced-motion: reduce) {
    .btn-download {
        transition: background 0.15s ease !important;
    }
    .btn-download:active { transform: none !important; }
}

/* Official link */
.official-link {
    margin: 16px 0;
}
.official-link-a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--c-text-2);
    text-decoration: none;
    transition: background 0.15s;
}
.official-link-a:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}
.official-link-text {
    font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: var(--c-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}
.official-link-hint {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 3px;
    flex-shrink: 0;
}
@media (max-width: 520px) {
    .official-link-text { max-width: 200px; }
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--c-text-3);
}
.empty-state h3 {
    font-size: 18px;
    color: var(--c-text-2);
    font-weight: 600;
    margin-bottom: 8px;
}
.empty-state p {
    font-size: 15px;
    color: var(--c-text-3);
}
.btn-back {
    display: inline-block;
    padding: 9px 20px;
    background: var(--c-surface);
    color: var(--c-text-2);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.btn-back:hover {
    color: var(--c-primary);
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
    text-decoration: none;
}

/* Footer */
/* Footer：改成「页面底色 + 一条极浅分隔线」，不再是一整条白带（弱化块面、更干净） */
.site-footer {
    margin-top: auto;      /* 内容不足一屏时，footer 仍固定在最底部 */
    text-align: center;
    padding: 40px 32px 32px;
    font-size: 13px;
    color: var(--c-text-4);
    border-top: 1px solid var(--c-border);
    background: transparent;
}

/* Copy button */
.btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: var(--c-surface-2);
    color: var(--c-text-4);
    cursor: pointer;
    border: none;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
    padding: 0;
}
.btn-copy:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}
.btn-copy:active { transform: scale(0.94); }
.btn-copy-inline {
    width: 26px;
    height: 26px;
    vertical-align: middle;
    margin-left: 6px;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.file-name:hover .btn-copy-inline { opacity: 1; }

/* Copy toast */
.copy-toast {
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: #1d1d1f;
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--r-full);
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s var(--ease-spring);
    box-shadow: var(--sh-3);
}
.copy-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 回到顶部 */
.btn-scroll-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    color: var(--c-text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s var(--ease-spring), box-shadow 0.2s ease;
    box-shadow: var(--sh-2);
    padding: 0;
}
.btn-scroll-top--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.btn-scroll-top:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary);
    border-color: var(--c-primary);
    /* 2026-10-04：去掉了原来的品牌色发光（0 4px 16px rgba(0,113,227,.15)）——
       发光属于「装饰性彩色 + 重阴影」，与这次的弱化方向相冲，悬停反馈交给底色与描边。 */
    box-shadow: var(--sh-3);
}
.btn-scroll-top:active { transform: scale(0.92); }

/* Page progress */
.page-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--c-primary);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    transform-origin: left;
    animation: none;
}
.page-progress.active {
    opacity: 1;
    animation: progressScan 1.2s ease-in-out infinite;
}
@keyframes progressScan {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

/* Header settings button */
.btn-settings-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: var(--c-surface-2);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--c-text-3);
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    flex-shrink: 0;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
    white-space: nowrap;
}
.btn-settings-header:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary);
    border-color: transparent;
    text-decoration: none;
}
.btn-settings-header.active {
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: 600;
}
.btn-settings-header span {
    line-height: 1;
}

/* Settings page */
.settings-page {
    max-width: 640px;
    margin: 0 auto;
}
.settings-page .page-title {
    margin-bottom: 4px;
}
.settings-page .page-desc {
    margin-bottom: 20px;
}

/* 标签页 */
.settings-page .settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--c-border);
    margin-bottom: 20px;
}
.settings-page .settings-tab {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text-3);
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s;
}
.settings-page .settings-tab:hover { color: var(--c-text-1); }
.settings-page .settings-tab.active {
    color: var(--c-text-1);
    border-bottom-color: var(--c-text-1);
}
.settings-page .settings-tab-content { display: none; }
.settings-page .settings-tab-content.active {
    display: block;
    animation: tabEnter 0.35s cubic-bezier(.4,0,.2,1) both;
}
.settings-page .settings-tab-content.exit {
    display: block;
    animation: tabExit 0.18s cubic-bezier(.4,0,.2,1) both;
}

@keyframes tabEnter {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes tabExit {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-12px); }
}

/* Settings panel：与下载列表同一套白卡语言（微圆角 + 弱描边 + 微阴影） */
.settings-panel {
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 24px;
    background: var(--c-surface);
    box-shadow: var(--sh-2);
}
.settings-panel-head {
    padding: 12px 20px;
    background: var(--c-surface-1);
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-2);
}
.settings-panel-body { }
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--c-border);
    gap: 14px;
    transition: background 0.12s;
}
.settings-row:last-child { border-bottom: none; }
/* 悬停反馈：原来写死的 #fafbfc 几乎看不见（比纸还白），改为统一的浅灰填充令牌 */
.settings-row:hover { background: var(--c-surface-2); }
.settings-row-label { flex: 1; min-width: 0; }
.settings-row-label .sr-title { font-size: 14px; font-weight: 600; color: var(--c-text-1); }
.settings-row-label .sr-desc { font-size: 12px; color: var(--c-text-4); margin-top: 2px; }

/* 开关 */
.toggle-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { display: none; }
.toggle-switch label {
    display: block; width: 100%; height: 100%; border-radius: 24px;
    background: #ccc; cursor: pointer;
    transition: background 0.2s ease;
}
.toggle-switch label::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}
.toggle-switch input:checked + label { background: var(--c-primary); }
.toggle-switch input:checked + label::after { transform: translateX(18px); }

/* Disable 3D flip */
.no-3d-flip .btn-download {
    transition: background 0.15s ease !important;
}
.footer-words {
    max-width: 480px;
    margin: 0 auto 16px;
    padding: 0 16px;
}
.footer-words .fw-line {
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text-2);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.footer-words .fw-sub {
    font-size: 13px;
    color: var(--c-text-4);
    line-height: 1.7;
}
.footer-copy {
    font-size: 13px;
    color: var(--c-text-4);
    opacity: 0.85;
}
@media (max-width: 520px) {
    .footer-words .fw-line { font-size: 14px; }
    .footer-words .fw-sub { font-size: 12.5px; line-height: 1.65; }
}

/* Tablet */
@media (max-width: 1024px) {
    .site-header .container { gap: 12px; }
    .search-box { flex-basis: 200px; }
    .resource-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
    .container { padding: 0 var(--sp-xl); }
    .site-header .container {
        gap: var(--sp-sm);
        height: auto;
        padding: var(--sp-md) var(--sp-xl);
        flex-wrap: wrap;
    }
    .brand { font-size: 15px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* 导航在移动端已改为贴底的标签栏，样式集中在文件末尾的「移动端底部标签栏」块里，
       这里不再重复声明 —— 避免两处规则互相覆盖（这正是之前样式难维护的根源）。 */
    .search-box {
        flex: 1 1 auto;
        margin-left: 0;
        height: 42px;   /* 38→42：与 40px 触控目标一致，更好点 */
        width: auto;
    }
    .btn-settings-header {
        flex-shrink: 0;
        padding: 0 14px;
        height: 42px;
    }
    .main-content { padding: var(--sp-xl) var(--sp-xl) var(--sp-4xl); }
    .page-title { font-size: 20px; }
    .section-title { font-size: 16px; margin: 24px 0 12px; }
    .detail-head h1 { font-size: 22px; }
    .detail-title-row { gap: 12px; }
    .detail-icon { width: 48px; height: 48px; border-radius: 12px; }
    /* 卡片间距 ≥ 卡片内边距，卡片之间才"分得开"；内边距 20px 让内容不贴边 */
    .resource-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); }
    .resource-card { padding: var(--sp-xl); }
    .card-top { gap: var(--sp-md); }
    .card-top-text h3 { font-size: 16px; }
    .card-top-text p { font-size: 14px; line-height: 1.6; }
    .card-meta { font-size: 13px; flex-wrap: wrap; }
    .file-item { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
    .file-name { font-size: 14px; max-width: 100%; }
    .btn-download { width: 88px; height: 36px; font-size: 14px; }
    .cat-btn { padding: 7px 14px; font-size: 14px; }
    .cat-badge { font-size: 12px; }
    .breadcrumb { font-size: 13px; flex-wrap: wrap; }
    .detail-desc { font-size: 14px; }
    .detail-meta { font-size: 13px; gap: 10px; }
}

/* 超窄屏（2026-10-02 由 399px 下调到 359px）
   原因：375px（iPhone SE/mini）、390px（iPhone 12-14）、393px（Pixel）、360px（Galaxy）
   全是主流机型，原先都被这块小屏降级命中，字号与留白被压小，手机上看就是狭窄拥挤。
   现在只有 320-358px 的老设备走这套紧凑值。 */
@media (max-width: 359px) {
    .container { padding: 0 var(--sp-lg); }
    .site-header .container { padding: var(--sp-sm) var(--sp-lg); gap: var(--sp-xs); }
    .brand { font-size: 14px; }
    .nav-link { padding: 6px 10px; font-size: 13px; }
    .page-title { font-size: 18px; }
    .resource-card { padding: var(--sp-lg); }
    .card-top-text h3 { font-size: 15px; }
    .card-top-text p { font-size: 13px; }
    .file-item { padding: 10px 12px; }
    .btn-download { width: 84px; height: 34px; font-size: 13px; }
    .btn-scroll-top { bottom: 16px; right: 16px; width: 40px; height: 40px; }
}

/* Mobile: always show copy button */
@media (hover: none) and (pointer: coarse) {
    .btn-copy-inline {
        opacity: 0.45;
    }
    .btn-copy-inline:active {
        opacity: 1;
    }
}

/* 主题卡片 */
.theme-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--c-surface);
    box-shadow: var(--sh-1);
}
.theme-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border);
    cursor: pointer;
    transition: background 0.12s;
    background: var(--c-surface);
    text-align: left;
}
.theme-card:last-child { border-bottom: none; }
.theme-card:hover { background: var(--c-surface-2); }
.theme-card.selected {
    background: var(--c-primary-soft);   /* 2026-10-04：原为写死的 #f0f7ff，改吃令牌，换主题时跟着变 */
}
.theme-card-icon {
    width: 32px; height: 32px; border-radius: var(--r-md);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.theme-card-icon.default-theme {
    background: #111111; color: #fff;
}
.theme-card-icon.ui2-theme {
    background: #424242; color: #fff;
}
.theme-card-info {
    flex: 1;
    min-width: 0;
}
.theme-card-name {
    font-size: 14px; font-weight: 600; color: var(--c-text-1);
    margin-bottom: 2px;
}
.theme-card-desc {
    font-size: 12px; color: var(--c-text-4); line-height: 1.4;
}
.theme-card-check {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: var(--c-primary);
    opacity: 0;
    transition: opacity 0.15s;
}
.theme-card.selected .theme-card-check { opacity: 1; }

@media (max-width: 480px) {
    .theme-card { padding: 10px 12px; gap: 10px; }
    .theme-card-icon { width: 28px; height: 28px; }
    .theme-card-name { font-size: 13px; }
    .theme-card-desc { font-size: 11px; }
}

/* MC百科 detail layout */
.detail-ui2 { display: none; }
html.theme-ui2 .detail-ui2 { display: block; }
html.theme-ui2 .detail-mc { display: none; }

.detail-mc {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* MC百科面包屑 - 适中大小 */
.detail-mc .breadcrumb {
    font-size: 16px;
    color: var(--c-text-3);
    padding: 8px 0;
    background: none;
    display: flex;
    align-items: center;
    gap: 0;
}
.detail-mc .breadcrumb a {
    color: var(--c-primary);
    text-decoration: none;
    font-weight: 600;
    padding: 8px 0;
    display: inline-block;
}
.detail-mc .breadcrumb a:hover { text-decoration: underline; }
.detail-mc .breadcrumb .sep {
    margin: 0 10px;
    color: var(--c-text-4);
    font-weight: 700;
    font-size: 16px;
}
.detail-mc .breadcrumb .current {
    color: var(--c-text-2);
    font-weight: 700;
    font-size: 16px;
}
/* 首页图标（⌂）—— 点击区域稍大，图标本身不放大 */
.detail-mc .mc-back-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 6px 10px;
    margin: -6px -4px;
    border-radius: var(--r-sm);
    min-width: 36px;
    min-height: 36px;
    transition: background 0.15s;
}
.detail-mc .mc-back-home:hover {
    background: var(--c-primary-soft);
    text-decoration: none;
}

/* 手机端面包屑 - 适中 + 大点击区域 */
@media (max-width: 767px) {
    .detail-mc .breadcrumb {
        font-size: 16px;
        padding: 10px 0;
    }
    .detail-mc .breadcrumb a {
        padding: 14px 0;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
    }
    .detail-mc .breadcrumb .sep {
        margin: 0 12px;
        font-size: 16px;
    }
    .detail-mc .breadcrumb .current {
        font-size: 16px;
    }
    .detail-mc .mc-back-home {
        font-size: 14px;
        padding: 10px 14px;
        margin: -10px -6px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* MC百科白色卡片 */
.detail-mc .card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 20px;
    box-shadow: var(--sh-1);
}

/* MC百科标签列表 */
.detail-mc .mc-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.detail-mc .mc-tags .tag-pill {
    display: inline-block;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-primary);
    background: var(--c-primary-soft);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s;
}
.detail-mc .mc-tags .tag-pill:hover {
    background: var(--c-primary);
    color: #fff;
    text-decoration: none;
}

/* MC百科下载表格 */
.detail-mc .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.detail-mc .download-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.detail-mc .download-table colgroup .col-fname { width: auto; }
.detail-mc .download-table colgroup .col-size { width: 90px; }
.detail-mc .download-table colgroup .col-dl { width: 70px; }
.detail-mc .download-table colgroup .col-time { width: 100px; }
.detail-mc .download-table colgroup .col-op { width: 70px; }

.detail-mc .download-table thead th {
    background: var(--c-surface-2);
    border-bottom: 2px solid var(--c-border);
    padding: 10px 12px;
    font-weight: 700;
    font-size: 12px;
    color: var(--c-text-2);
    text-align: left;
    white-space: nowrap;
}
.detail-mc .download-table thead th.th-center {
    text-align: center;
}
.detail-mc .download-table tbody tr {
    transition: background 0.15s;
}
.detail-mc .download-table tbody tr:hover {
    background: var(--c-surface-2);
}
.detail-mc .download-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-2);
    vertical-align: middle;
}
.detail-mc .download-table tbody td.fname {
    color: var(--c-text-1);
    font-weight: 600;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.detail-mc .download-table tbody td.td-center {
    text-align: center;
}
.detail-mc .download-table tbody td.fsize {
    font-variant-numeric: tabular-nums;
}

/* MC百科下载按钮 */
.detail-mc .btn-down {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 48px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background: var(--c-primary);
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.detail-mc .btn-down:hover {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
}
.detail-mc .btn-share {
    height: 28px;
    width: 28px;
    border-radius: 4px;
}
.detail-mc .btn-share svg {
    width: 12px;
    height: 12px;
}
.detail-mc .btn-down:active {
    transform: scale(0.97);
}

/* MC百科下载标题行图标 */
.detail-mc .detail-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    object-fit: contain;
    background: rgba(0,0,0,0.02);
    flex-shrink: 0;
}

/* 移动端适配 */
@media (max-width: 767px) {
    .detail-mc .download-table tbody td.fname {
        max-width: 160px;
    }
    .detail-mc .download-table colgroup .col-time { width: 80px; }
}
@media (max-width: 480px) {
    .detail-mc .download-table colgroup .col-size { width: 70px; }
    .detail-mc .download-table colgroup .col-dl { width: 50px; }
    .detail-mc .download-table colgroup .col-time { width: 70px; }
    .detail-mc .download-table colgroup .col-op { width: 56px; }
    .detail-mc .download-table tbody td { padding: 8px 8px; font-size: 12px; }
    .detail-mc .download-table thead th { padding: 8px 8px; font-size: 11px; }
}

/* 分类浏览页面 - 网格卡片浏览 */
.browse-section {
    margin-bottom: 36px;
}
.browse-section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-border);
}
.browse-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-text-1);
    margin: 0;
}
.browse-section-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--c-text-3);
    background: var(--c-surface-2);
    padding: 0 8px;
    border-radius: var(--r-full);
    line-height: 20px;
}
.browse-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.browse-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s var(--ease-out);
}
.browse-card:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--sh-2);
    transform: translateY(-1px);
}
.browse-card-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    object-fit: contain;
    background: rgba(0,0,0,0.04);
    flex-shrink: 0;
    margin-top: 2px;
}
.browse-card-body {
    flex: 1;
    min-width: 0;
}
.browse-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.browse-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browse-card-desc {
    font-size: 12px;
    color: var(--c-text-4);
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 彩色标签 */
.browse-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 18px;
}
/* 标签：2026-10-04 去色（站长：只留黑白灰）—— 四类原来各配一种色底，现在统一中性 */
.tag-software,
.tag-mobile,
.tag-sites,
.tag-other { background: var(--c-surface-2); color: var(--c-text-3); }

@media (max-width: 767px) {
    .browse-grid { grid-template-columns: minmax(0, 1fr); }
    .browse-card { padding: 10px 12px; }
    .browse-section { margin-bottom: 24px; }
}

/* 下载中心页面 - 表格面板 */
/* 下载列表：整块做成一张白卡（无边框也行，靠面差与阴影分层），圆角走统一的微圆角 */
.dl-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    overflow: hidden;
}
.dl-panel-head {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: var(--c-surface-1);
    border-bottom: 1px solid var(--c-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-3);
}
.dl-col-name { flex: 1; min-width: 0; display: inline-flex; align-items: center; }
.dl-col-info { width: 140px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.dl-col-action { width: 80px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: flex-end; }
.dl-panel-row {
    display: flex;
    align-items: center;
    padding: 16px 20px;      /* 2026-10-04：行高放宽（大留白），列表不再像表格一样挤 */
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    transition: background 0.12s;
    text-decoration: none;
}
.dl-panel-row:last-child { border-bottom: none; }
.dl-panel-row:hover { background: var(--c-surface-2); }
.dl-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    background: rgba(0,0,0,0.04);
    flex-shrink: 0;
    margin-right: 10px;
    vertical-align: middle;
}
.dl-row-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.dl-row-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dl-row-label {
    font-size: 11px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--c-surface-2);
    color: var(--c-text-3);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 16px;
}
.dl-row-meta {
    font-size: 12px;
    color: var(--c-text-4);
}
.dl-row-meta.sep { margin: 0 4px; }
.dl-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--c-primary);
    border: none;
    border-radius: var(--r-sm);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s, transform 0.15s;
}
.dl-row-btn:hover {
    background: var(--c-primary-hover);
}

@media (max-width: 767px) {
    .dl-panel-head { display: none; }
    .dl-col-info { display: none; }
    .dl-col-action { width: auto; }
    .dl-panel-row {
        padding: 12px 12px;
        gap: 10px;
        flex-wrap: wrap;
    }
    .dl-col-name { flex: 1 1 100%; }
    .dl-row-name { font-size: 13px; }
    .dl-col-action { width: 100%; margin-top: 4px; }
    .dl-row-btn { width: 100%; justify-content: center; }
}

/* 下载详情 - 文件卡片 */
.dl-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dl-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: var(--r-md);
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    transition: border-color 0.15s;
}
.dl-file-item:hover { border-color: var(--c-border-strong); }
.dl-file-info { min-width: 0; flex: 1; }
.dl-file-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.dl-file-meta {
    font-size: 12px;
    color: var(--c-text-4);
}
.dl-sep { margin: 0 6px; }
.dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--c-primary);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: filter 0.15s, transform 0.15s;
    flex-shrink: 0;
    margin-left: 16px;
}
.dl-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.btn-back {
    font-size: 14px;
    color: var(--c-primary);
    text-decoration: none;
    font-weight: 600;
}
.btn-back:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .dl-file-item { padding: 12px 14px; flex-wrap: wrap; gap: 10px; }
    .dl-file-info { flex: 1 1 100%; }
    .dl-btn { margin-left: 0; }
}

/* Mobile: smaller card icons */
@media (max-width: 767px) {
    .card-icon { width: 28px; height: 28px; border-radius: 6px; }
}

/* Download confirm modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.modal-overlay.modal-open {
    opacity: 1;
    pointer-events: auto;
}
.modal-box {
    background: var(--c-surface);
    border-radius: 14px 14px 0 0;
    padding: 24px 20px 20px;
    max-width: 440px;
    width: 100%;
    text-align: left;
    box-shadow: var(--sh-3);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.modal-open .modal-box {
    transform: translateY(0);
}
.modal-icon {
    display: none;
}
.modal-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--c-text-1);
    margin-bottom: 6px;
}
.modal-desc {
    font-size: 14px;
    color: var(--c-text-3);
    margin-bottom: 18px;
    line-height: 1.5;
}
.modal-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-text-3);
    cursor: pointer;
    margin-bottom: 16px;
    user-select: none;
}
.modal-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--c-primary);
    cursor: pointer;
}
.modal-actions {
    display: flex;
    gap: 10px;
}
.modal-btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}
.modal-btn-cancel {
    background: var(--c-surface-2);
    color: var(--c-text-2);
}
.modal-btn-cancel:hover {
    background: var(--c-border);
}
.modal-btn-confirm {
    background: var(--c-primary);
    color: #fff;
}
.modal-btn-confirm:hover {
    background: var(--c-primary-hover);
}
.modal-btn:active {
    transform: scale(0.97);
}

/* UI2 theme modal */
html.theme-ui2 .modal-overlay {
    background: rgba(0, 0, 0, 0.4);
}
html.theme-ui2 .modal-box {
    background: #ffffff;
    box-shadow: var(--sh-3);
}

/* UI2 file list */
html.theme-ui2 .file-item {
    padding: 14px 18px;
    gap: 14px;
}
html.theme-ui2 .file-name {
    font-size: 14px;
    font-weight: 500;
}
html.theme-ui2 .file-size {
    font-size: 12px;
    color: var(--c-text-4);
}
html.theme-ui2 .btn-download {
    width: 72px;
    height: 34px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
}
html.theme-ui2 .btn-share {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}
html.theme-ui2 .btn-share svg {
    width: 14px;
    height: 14px;
}

/* UI2 detail head */
html.theme-ui2 .detail-head {
    margin-bottom: 24px;
}
html.theme-ui2 .detail-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
}
html.theme-ui2 .detail-title-row {
    gap: 14px;
}
html.theme-ui2 .detail-head h1 {
    font-size: 26px;
    font-weight: 600;
}
html.theme-ui2 .detail-desc {
    font-size: 14px;
    color: var(--c-text-3);
    line-height: 1.6;
}
html.theme-ui2 .detail-meta {
    font-size: 13px;
    padding-top: 14px;
    border-top: 1px solid var(--c-border);
}

/* UI2 breadcrumb */
html.theme-ui2 .breadcrumb {
    font-size: 13px;
    gap: 4px;
    margin-bottom: 16px;
}

/* UI2 section title */
html.theme-ui2 .section-title {
    font-size: 16px;
    font-weight: 500;
    margin: 24px 0 12px;
}

/* UI2 resource detail container */
html.theme-ui2 .resource-detail {
    max-width: 680px;
    margin: 0 auto;
}

/* Mobile modal */
@media (max-width: 480px) {
    .modal-box { padding: 20px 16px 16px; border-radius: 12px 12px 0 0; }
    .modal-title { font-size: 16px; }
    .modal-btn { height: 42px; font-size: 14px; }
}

/* Modal file list */
.modal-files {
    text-align: left;
    margin-bottom: 16px;
}
.modal-file-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-decoration: none;
    color: inherit;
    gap: 12px;
}
.modal-file-link:hover {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}
.modal-file-link:last-child { margin-bottom: 0; }
.modal-file-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.modal-file-size {
    font-size: 12px;
    color: var(--c-text-4);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Context menu */
.ctx-menu {
    position: fixed;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    z-index: 9999;
    padding: 6px 0;
    min-width: 160px;
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.ctx-menu.show {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
.ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--c-text-1);
    cursor: pointer;
    transition: background 0.1s;
}
.ctx-menu-item:hover {
    background: var(--c-surface-2);
}
.ctx-menu-item svg {
    width: 16px;
    height: 16px;
    color: var(--c-text-3);
}
.ctx-menu-sep {
    height: 1px;
    background: var(--c-border);
    margin: 6px 0;
}

/* Share button in file list */
.btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--c-text-3);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.btn-share:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary);
    border-color: var(--c-primary);
}
.btn-share svg {
    width: 15px;
    height: 15px;
}

/* Share popup menu */
.share-popup {
    position: absolute;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    z-index: 1000;
    padding: 6px 0;
    min-width: 120px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.share-popup.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.share-popup-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--c-text-1);
    cursor: pointer;
    white-space: nowrap;
}
.share-popup-item:hover {
    background: var(--c-surface-2);
}
.share-popup-item svg {
    width: 14px;
    height: 14px;
    color: var(--c-text-3);
}

/* Share page */
.share-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.share-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    max-width: 400px;
    width: 100%;
    padding: 24px;
}
.share-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}
.share-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    flex-shrink: 0;
    object-fit: contain;
    background: rgba(0,0,0,0.04);
}
.share-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface-2);
}
.share-info {
    flex: 1;
    min-width: 0;
}
.share-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--c-text-1);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.share-filename {
    font-size: 13px;
    color: var(--c-text-3);
    margin-bottom: 2px;
    word-break: break-all;
}
.share-meta {
    font-size: 12px;
    color: var(--c-text-4);
}
.share-desc {
    font-size: 14px;
    color: var(--c-text-2);
    line-height: 1.6;
    padding: 12px 0;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 18px;
}
.share-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    background: var(--c-primary);
    color: #fff;
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
}
.share-download-btn:hover {
    background: var(--c-primary-hover);
    color: #fff;
}
.share-download-btn svg {
    width: 17px;
    height: 17px;
}
.share-footer {
    margin-top: 14px;
    font-size: 12px;
    color: var(--c-text-4);
}
.share-footer a {
    color: var(--c-text-3);
    text-decoration: none;
}
.share-footer a:hover {
    color: var(--c-primary);
}

/* ── 分页导航（2026-10-01 新增）────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 26px 0 10px;
}
.page-btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 18px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    color: var(--c-text-1);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.page-btn:hover {
    background: var(--c-surface-2);
    border-color: var(--c-border-strong);
}
.page-btn-disabled {
    opacity: 0.45;
    pointer-events: none;
}
.page-info {
    font-size: 13px;
    color: var(--c-text-3);
}

/* ── 投稿页表单（2026-10-01 新增）──────────────────────────── */
.contribute-form .fg { margin-bottom: 18px; }
.contribute-form label {
    display: block;
    font-size: 13px;
    color: var(--c-text-3);
    margin-bottom: 6px;
}
.contribute-form .req { color: #d64545; }
.contribute-form input[type="text"],
.contribute-form input[type="url"],
.contribute-form select,
.contribute-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    color: var(--c-text-1);
    font-size: 14px;
    font-family: var(--font-sans);
    transition: border-color 150ms var(--ease-out);
}
.contribute-form input:focus,
.contribute-form select:focus,
.contribute-form textarea:focus {
    outline: none;
    border-color: var(--c-primary);
}
.contribute-form textarea { resize: vertical; min-height: 96px; }
.contribute-form small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--c-text-4);
}
.contribute-actions { display: flex; justify-content: flex-end; }
.btn-submit {
    height: 40px;
    padding: 0 26px;
    border: none;
    border-radius: var(--r-lg);
    background: var(--c-primary);
    color: #fff;
    font-size: 14px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 150ms var(--ease-out);
}
.btn-submit:hover { background: var(--c-primary-hover); }

.contribute-msg { padding: 22px 24px; }
.contribute-msg h2 { margin: 0 0 10px; font-size: 17px; color: var(--c-text-1); }
.contribute-msg p { margin: 0 0 8px; font-size: 14px; color: var(--c-text-2); line-height: 1.6; }
.contribute-msg-err p { color: #d64545; }
.contribute-msg-actions { margin-top: 16px !important; display: flex; gap: 14px; }
/* 投稿页卡片容器（2026-10-01）：前台样式表里没有基础 .card 规则（只有 .detail-mc .card），
   投稿页不套用 .card，改用这个专属类，避免给全局加规则影响到详情页与后台 */
.contribute-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-bottom: 16px;
}
/* 投稿页人机验证（2026-10-01 新增） */
.contribute-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
}
.contribute-captcha-q {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text-1);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    white-space: nowrap;
}
.contribute-captcha input {
    flex: 1;
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════
   移动端体验增强（2026-10-02）
   目标：移动优先——手机上分类入口好找、点得准、表格不用横向拖、按钮够大。
   参考：iOS HIG 与 Material 的最小触控目标 44×44；
        移动端正文不小于 14px（本站移动端正文已是 14px 档）。
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* 1) 分类筛选条：改成横向滑动 + 加大按钮
       原来 wrap 换行后按钮会掉到第二行、把内容往下顶，且 34px 高偏小不好点。
       现在固定一行、可左右滑动，每个按钮都是完整的 40px 高触控目标。 */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        /* 左右留出与容器一致的呼吸位，滑到头时首尾按钮不贴边 */
        margin: 14px calc(var(--sp-xl) * -1) var(--sp-2xl);
        padding: 0 var(--sp-xl) var(--sp-lg);
        border-bottom: 1px solid var(--c-border);
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-bar .cat-btn {
        flex-shrink: 0;
        min-height: 40px;
        padding: 9px 18px;
        font-size: 14.5px;
        display: inline-flex;
        align-items: center;
    }
    /* 选中态加强：填主色，一眼看出当前在哪个分类 */
    .filter-bar .cat-btn.active {
        background: var(--c-primary);
        color: #fff;
        border-color: var(--c-primary);
        font-weight: 600;
    }

    /* 2) 顶部按钮：触控目标抬到 40-44px
       （.nav-link 的移动端样式已统一交给文件末尾的「移动端底部标签栏」块，这里不再声明） */
    .btn-download { width: 96px; height: 44px; font-size: 14.5px; }
    .btn-down { min-height: 40px; display: inline-flex; align-items: center; }
    .btn-share { width: 40px; height: 40px; }

    /* 3) 详情页文件表：手机上改成卡片式
       原表格 5 列（文件名/大小/下载数/时间/操作）在 375px 下必须横向拖动才能点到「下载」，
       这是移动端最影响可用性的地方。改为每行一张卡，标签用 ::before 补上。 */
    .download-table thead { display: none; }
    .download-table colgroup { display: none; }
    .download-table,
    .download-table tbody,
    .download-table tr,
    .download-table td { display: block; width: auto; }
    .download-table tr {
        padding: 12px 14px;
        margin-bottom: 10px;
        border: 1px solid var(--c-border);
        border-radius: var(--r-lg);
        background: var(--c-surface-1);
    }
    .download-table td {
        border: none;
        padding: 2px 0;
        text-align: left;
    }
    .download-table td.fname { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
    .download-table td.fsize { color: var(--c-text-3); }
    .download-table td.fsize::before { content: "大小 "; color: var(--c-text-4); }
    .download-table td.dl-count { color: var(--c-text-3); }
    .download-table td.dl-count::before { content: "下载 "; color: var(--c-text-4); }
    .download-table td.dl-count::after { content: " 次"; color: var(--c-text-3); }
    .download-table td.up-time { color: var(--c-text-3); }
    .download-table td.up-time::before { content: "上传 "; color: var(--c-text-4); }
    .download-table td.td-center { text-align: left; }
    .download-table .table-actions {
        justify-content: flex-start;
        margin-top: 10px;
        gap: 8px;
    }
    /* 卡片模式下不再需要横向滚动容器 */
    .table-wrap { overflow-x: visible; }

    /* 4) 表格类内容（后台/分享页）在窄屏统一改为可横向滚动，避免撑破页面 */
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 极窄屏（≤399px）进一步收紧，保证 320px 宽的老设备也不溢出 */
@media (max-width: 359px) {
    .filter-bar { margin: 12px calc(var(--sp-lg) * -1) var(--sp-xl); padding: 0 var(--sp-lg) var(--sp-md); }
    .filter-bar .cat-btn { padding: 8px 14px; font-size: 14px; }
    .btn-download { width: 88px; height: 42px; font-size: 14px; }
    .download-table tr { padding: 10px 12px; }
}

/* ── 移动端点击响应（2026-10-02）────────────────────────────────
   消除移动端点击链接/按钮时的 300ms 延迟。
   注意：只禁「双击缩放」，双指缩放仍然可用，因此不影响无障碍
   （viewport 里原先的 user-scalable=no 已在 2026-10-01 移除）。 */
a, button, .cat-btn, .nav-link, .btn-download, .btn-down, .btn-share, .settings-tab {
    touch-action: manipulation;
}

/* ══════════════════════════════════════════════════════════════════
   移动端输入控件字号（2026-10-02）
   iOS Safari 的硬性行为：聚焦时若输入控件 font-size < 16px，会自动把整页放大。
   站内搜索框原本 15px、投稿表单原本 14px，都在这条线以下 ——
   用户点一下输入框页面就被放大、看起来"布局错乱"，这才是缩放问题的根因，
   把控件字号抬到 16px 即可根除（这也比单纯禁用缩放更正确：
   禁用缩放只在 Android 生效，iOS 从 10 起就忽略 user-scalable=no）。
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   移动端底部标签栏（2026-10-02 第一阶段：结构重构）
   为什么做：原来 4 个导航项挤在页头第二行、还要横向滑动才能看全，单手够不到也不好点。
   现在同一份 <nav> 在手机上变成贴底的标签栏，拇指可直接触达，页头也因此矮了一行。
   （2026-10-04：导航增至 5 项「首页/分类/下载/客户端/投稿」，标签栏等分自适应，无需额外改动。）
   实现取舍：复用同一份标记 + 媒体查询改变呈现，而不是再写一份底部导航 ——
   避免两套导航带来的选中态同步与无障碍重复朗读问题。
   动效：过渡 150-180ms、easeOutCubic、按压用底色 + 轻微缩放（无水波纹，符合项目设计守则）。
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    :root {
        /* 标签栏总高（不含 iPhone 底部安全区）。实测校准：内容 38px（图标 22 + 间隙 3 + 文字 13）
           + 链接内边距 10px + 栏内边距 8px = 56px，这里留 1px 余量避免亚像素误差造成遮挡。
           改这个值时必须同步核对：.site-nav 的 padding 与 .nav-link 的 min-height/padding 之和。 */
        --tabbar-h: 57px;
    }

    .site-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;                 /* 与页头同属「界面层」；低于分享弹层(1000)与弹窗(9999) */
        display: flex;
        gap: 0;
        width: auto;
        margin: 0;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
        overflow: visible;
        background: var(--c-surface);
        border-top: 1px solid var(--c-border);
        box-shadow: var(--sh-1);
    }
    html.theme-ui2 .site-nav {
        box-shadow: var(--sh-1);
    }

    .nav-link {
        flex: 1 1 0;
        min-width: 0;
        min-height: 48px;             /* 48 + 栏内边距 8 = 56，与 --tabbar-h 对齐 */
        padding: 5px 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-size: 12px;
        line-height: 1.1;
        border-radius: var(--r-md);
        color: var(--c-text-3);
        background: transparent;
        transition: color 0.18s var(--ease-out), background 0.18s var(--ease-out), transform 0.12s var(--ease-out);
    }
    .nav-link:hover { background: transparent; color: var(--c-text-1); }
    .nav-link:active {
        background: var(--c-surface-2);
        transform: scale(0.96);       /* 按压反馈：轻微缩放，替代水波纹 */
    }
    .nav-link.active {
        background: transparent;
        color: var(--c-primary);
        font-weight: 600;
    }
    .nav-ico {
        display: block;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    /* 正文给标签栏让位：否则页面最后的内容（分页导航、最后一个文件行、页脚）会被遮住 */
    .page-wrapper {
        padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    }
    /* 标签栏已经承担了底部留白，正文自身再收一点，避免底部出现双倍空白 */
    .main-content {
        padding-bottom: var(--sp-2xl);
    }
    /* 回到顶部按钮抬高到标签栏之上，避免两者叠在一起 */
    .btn-scroll-top {
        bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px);
        right: 16px;
    }
    /* 复制提示同理抬高 */
    .copy-toast {
        bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 18px);
    }
}

/* 极窄屏（≤359px）：标签栏再收一点，保证 5 个标签并排不挤
   （2026-10-04 加入「客户端」后由 4 个变 5 个，此项按 5 个校准） */
@media (max-width: 359px) {
    .nav-link { font-size: 11px; padding: 5px 2px; }
    .nav-ico { width: 20px; height: 20px; }
}

/* ── 主题卡片的配色预览（2026-10-02）────────────────────────────── */
.theme-card-icon.sakura-theme {
    background: linear-gradient(135deg, #f7b8ce, #c2185b);
    color: #fff;
}
.theme-card-icon.snow-theme {
    background: linear-gradient(135deg, #eaf3ff, #2c6bc4);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   主题装饰粒子层（樱花花瓣 / 雪花，2026-10-02）
   四条硬约束 —— 移动端最容易被做得又卡又费电，必须守住：
     1. 纯 CSS 动画，不用 canvas + requestAnimationFrame（后者持续占主线程、
        手机发烫掉电，这类飘落装饰根本不值得）
     2. 粒子数封顶 20（手机 12），只动 transform / opacity，
        绝不碰 top / left（那两个属性会触发重排）
     3. pointer-events:none + aria-hidden —— 不拦点击、不被读屏朗读
     4. 三种情况不渲染或暂停：用户关掉开关、系统开启「减少动态效果」、页面切到后台
   关于 linear：下落用匀速是有意的 —— 有空气阻力时花瓣与雪花本就近似匀速；
   设计守则里「禁止 linear」针对界面状态过渡，不适用于这类环境动效。
   ══════════════════════════════════════════════════════════════════ */

.fx-layer {
    position: fixed;
    inset: 0;
    z-index: 1;                 /* 压在内容之下：只在背景层飘，不干扰阅读 */
    pointer-events: none;
    overflow: hidden;
    contain: strict;            /* 把重绘限制在这一层内 */
}

.fx-p {
    position: absolute;
    top: -14vh;
    left: var(--x, 50%);
    width: var(--s, 10px);
    height: var(--s, 10px);
    opacity: 0;
    will-change: transform, opacity;
    /* 这里刻意用「长写属性」而不是 animation 简写：
       简写里一旦带 var()，浏览器在计算值阶段解析失败会让整条声明作废，
       而且简写会把时长/延迟写死，导致 JS 注入的 --dur / --delay 失效
       （2026-10-02 实测踩过：所有花瓣都按 12s 同速下落、且同时从上边出发）。 */
    animation-name: fx-fall;
    animation-duration: var(--dur, 12s);
    animation-timing-function: linear;
    animation-delay: var(--delay, 0s);
    animation-iteration-count: infinite;
}

/* 樱花：花瓣形（对角圆角）+ 旋转 */
.fx-sakura .fx-p {
    background: linear-gradient(135deg, var(--fx-b), var(--fx-a));
    border-radius: 50% 0 50% 0;
    animation-name: fx-fall-petal;
}

/* 雪花：圆点 + 冷白微光 + 轻微闪烁 */
.fx-snow .fx-p {
    background: radial-gradient(circle at 35% 35%, #ffffff, var(--fx-b));
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
    animation-name: fx-fall-snow;
}

@keyframes fx-fall-petal {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    8%   { opacity: var(--o, 0.6); }
    50%  { transform: translate3d(var(--dx, 24px), 62vh, 0) rotate(200deg); }
    88%  { opacity: var(--o, 0.6); }
    100% { transform: translate3d(calc(var(--dx, 24px) * -0.5), 124vh, 0) rotate(390deg); opacity: 0; }
}

@keyframes fx-fall-snow {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    10%  { opacity: var(--o, 0.7); }
    35%  { transform: translate3d(var(--dx, 14px), 44vh, 0); opacity: calc(var(--o, 0.7) * 0.55); }
    60%  { transform: translate3d(calc(var(--dx, 14px) * -0.4), 74vh, 0); opacity: var(--o, 0.7); }
    85%  { opacity: calc(var(--o, 0.7) * 0.6); }
    100% { transform: translate3d(var(--dx, 14px), 124vh, 0); opacity: 0; }
}

/* 页面切到后台就暂停，回来继续 —— 省电的关键一条 */
.fx-layer.fx-paused .fx-p { animation-play-state: paused; }

/* 系统开启「减少动态效果」时，整个装饰层不出现 */
@media (prefers-reduced-motion: reduce) {
    .fx-layer { display: none !important; }
}

/* 手机上少放几个（只保留前 12 个），进一步降低功耗 */
@media (max-width: 767px) {
    .fx-p:nth-child(n + 13) { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   移动端第二阶段动效（2026-10-02）
   列表错峰入场 / 顶部加载条 / 底部抽屉 / 下载完成态 / 数字滚动
   统一遵守设计守则：微反馈 100-150ms、标准过渡 180-250ms、easeOutCubic、
   时长 ≤300ms、只对用户触发的变化做动画、不用水波纹、不做假进度。
   ══════════════════════════════════════════════════════════════════ */

/* 1) 列表错峰入场：每项按 --i 依次上浮淡入（一次播完，不是循环动画）。
      延迟封顶 240ms —— 再多就不是"灵动"而是"页面在慢慢挤出来"了。 */
@keyframes hm-rise {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.resource-card,
.browse-card,
.dl-panel-row {
    animation: hm-rise 0.32s var(--ease-out) both;
}
/* 错峰延迟用 :nth-child 而不是 --i 内联变量：
   本站 CSP 的 style-src 没有 unsafe-inline，内联 style 属性会被浏览器丢弃，
   而 nonce 对内联样式属性不生效，所以变量方案在这里根本跑不起来（2026-10-02 实测确认）。 */
.resource-card:nth-child(1), .browse-card:nth-child(1), .dl-panel-row:nth-child(1) { animation-delay: 0ms; }
.resource-card:nth-child(2), .browse-card:nth-child(2), .dl-panel-row:nth-child(2) { animation-delay: 40ms; }
.resource-card:nth-child(3), .browse-card:nth-child(3), .dl-panel-row:nth-child(3) { animation-delay: 80ms; }
.resource-card:nth-child(4), .browse-card:nth-child(4), .dl-panel-row:nth-child(4) { animation-delay: 120ms; }
.resource-card:nth-child(5), .browse-card:nth-child(5), .dl-panel-row:nth-child(5) { animation-delay: 160ms; }
.resource-card:nth-child(6), .browse-card:nth-child(6), .dl-panel-row:nth-child(6) { animation-delay: 200ms; }
.resource-card:nth-child(n+7), .browse-card:nth-child(n+7), .dl-panel-row:nth-child(n+7) { animation-delay: 240ms; }

/* 分页的隐藏态（替代原来的内联 style="display:none"） */
.pagination.is-hidden { display: none; }

/* 2) 顶部加载条 + 列表刷新态（2026-10-02）：替代骨架屏 ——
      切换分类时旧内容保留（挂灰半透明），加载反馈由顶部细进度条承担。
      骨架屏在这里是负体验：内容固定、与真实列表无关，每次切换都闪一秒还盖住旧内容。 */
.loadbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--c-primary);
    opacity: 0;
    z-index: 1100;              /* 高于页头(100)与底部抽屉(1001)，低于弹窗(9999) */
    transition: width 0.12s linear, opacity 0.26s ease;
    pointer-events: none;
}
#resourceContainer { transition: opacity 0.18s var(--ease-out); }
#resourceContainer.is-refreshing { opacity: 0.5; }

/* 3) 底部抽屉（仅手机）：分享菜单从屏幕底部滑出，替代原来贴在按钮旁的小浮层，
      更接近原生 App 的手感，也不再受"按钮在屏幕底部时菜单被挤"的困扰。 */
.sheet-scrim {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 19, 0.32);
    opacity: 0;
    transition: opacity 0.24s var(--ease-out);
    z-index: 1000;              /* 抽屉 1001 盖在它上面；标签栏 100 在它下面 */
}
.sheet-scrim.is-open { opacity: 1; }
.sheet-scrim[hidden] { display: none; }

@media (max-width: 767px) {
    .share-popup {
        /* JS 会按按钮位置写 inline 的 left/top（桌面端用），手机端必须压掉 */
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: auto;
        min-width: 0;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: var(--sh-3);
        transform: translateY(110%);
        transition: transform 0.28s var(--ease-out), opacity 0.24s var(--ease-out);
        z-index: 1001;
    }
    .share-popup.show { transform: translateY(0); }
    /* 顶部一条小拖拽提示条，暗示这是可下滑关闭的面板 */
    .share-popup::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        margin: 0 auto 8px;
        border-radius: 2px;
        background: var(--c-border-strong);
    }
    /* 抽屉里的操作项加大到 48px 高，符合触控目标 */
    .share-popup-item {
        padding: 13px 20px;
        font-size: 15px;
    }
}

/* 4) 下载完成态：点下载后按钮回弹一下，给一个「已经开始了」的确认。
      说明：浏览器不会把 attachment 下载的进度暴露给网页，
      画一个进度环只能靠假数据 —— 那等于骗人，所以这里只做诚实的完成反馈。 */
@keyframes hm-done-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}
.btn-down.is-done,
.btn-download.is-done,
.dl-trigger.is-done {
    animation: hm-done-pulse 0.28s var(--ease-out);
}

/* 数字滚动时避免宽度跳动 */
.page-info [data-countup] { font-variant-numeric: tabular-nums; }

/* 5) 减少动态效果：以上动效全部关掉，但内容必须可见（不能停在 opacity:0） */
@media (prefers-reduced-motion: reduce) {
    .resource-card,
    .browse-card,
    .dl-panel-row { animation: none; }
    .share-popup { transition: none; }
    .sheet-scrim { transition: none; }
    .btn-down.is-done,
    .btn-download.is-done,
    .dl-trigger.is-done { animation: none; }
}

/* 详情页「网址列表」的 file-item 是个链接（2026-10-02）：
   原来靠内联 style 去下划线与改颜色，但内联 style 被 CSP 拦掉，所以改为类。 */
.file-item-link { text-decoration: none; color: inherit; }
.file-item-link:hover { background: var(--c-surface-2); }

/* ══════════════════════════════════════════════════════════════════
   一、客户端页 /client（2026-10-04 建立；同日按站长要求「重写界面布局」改为居中竖排）
   站长原话：「我让你改界面的布局和摆放位置，就是那个客户端的界面重写，
             但它始终没有变化，始终都是这个样子的界面布局、空间 UI」。
   旧版式：图标左 / 文字中 / 按钮右 的横排卡片 + 卡外一句话 + 一张手机版卡 ——
           与站内其它卡片同形态，所以之前只改颜色字号时「看着没变」。
   新版式：整页收成一列并居中（产品下载页形态）——
           大图标 → 名称 → 版本（30px 大号）→ 大按钮（52px）→ 一行说明 → 安卓版一行。
   为什么这样摆：这页只做「下载」一件事，视线自上而下一条线走完，不需要左右分栏。
   ══════════════════════════════════════════════════════════════════ */
/* 版式取自 Start Bootstrap 的「Landing Page」主题（MIT）的 masthead：
   整幅色带（通栏、贴住页头、左右出血）+ 居中窄列 + 大留白 + 反白按钮。
   与旧版的区别：原来是一张内缩的白卡片，现在是整幅色带 —— 这是真正的布局改动，不只是换色。 */
.client-page { }

.client-hero {
    /* 通栏出血：从 .container 内部撑到视口两侧 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: -40px;              /* 抵掉 .main-content 的上内边距，让色带贴住页头 */
    padding: 88px 24px 96px;
    background: var(--c-text-1);    /* 近黑整幅色带（黑白灰口径内的最深一档） */
    color: #fff;
    text-align: center;
}
/* 窄列：内容照模板的 col-xl-6 收在中轴，视线一条线走完 */
.client-hero-inner {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 真图标（2026-10-04 换）：客户端自己的 256×256 PNG，直接立在大留白里，
   加一层投影压在深色带上（图标本身带透明通道，不要再套圆角方框，否则两层形状打架） */
.client-hero-app {
    width: 96px;
    height: 96px;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
}
.client-hero-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}
.client-hero-tag {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}
/* .client-hero-sub 已随版式重写移除（居中竖排后不再需要副标题那行） */
/* 版本块：居中竖排，版本号顶上大号（深色带上一律反白，靠不透明度分层次） */
.client-ver {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
}
.client-ver-label {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
}
.client-ver-num {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.client-ver-rest {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}
/* 深色带上的主按钮用反白（黑底白字 → 白底黑字），黑白灰口径内的最强对比 */
.client-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 54px;
    padding: 0 40px;
    margin-top: 30px;
    border-radius: var(--r-lg);
    background: #fff;
    color: var(--c-text-1);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s var(--ease-out);
}
/* 悬停：深色带上的白按钮不能变深，否则消失在底色里 —— 只压一点点灰 */
.client-hero-btn:hover { background: #e4e4e4; }
.client-hero-btn:active { transform: scale(0.97); }

/* 按钮下面的一行说明：深色带上反白弱化，居中限宽 */
.client-note {
    max-width: 400px;
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
}

/* 目录说明（价值主张）：深色带上的第二层信息 —— 比名称弱、比版本说明强，
   用来在 5 秒内回答「这是什么 / 给谁用 / 为什么在意」 */
.client-hero-sub {
    max-width: 460px;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}

/* 收尾块：白面、居中、低强调。重复主行动 + 消除「未签名敢不敢装」这个最大异议。
   与 hero 的关系是「一深一浅」：深色带上主按钮反白，这里白面上按钮回黑底白字。 */
.client-close {
    max-width: 560px;
    margin: 24px auto 0;
    padding: 28px 24px;
    text-align: center;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
}
.client-close-q {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text-1);
}
.client-close-a {
    margin: 0 auto 18px;
    max-width: 420px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--c-text-3);
}
.client-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 32px;
    border-radius: var(--r-lg);
    background: var(--c-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s var(--ease-out);
}
.client-close-btn:hover { background: var(--c-primary-hover); color: #fff; }
.client-close-btn:active { transform: scale(0.97); }

/* 2026-10-04 清理：以下样式随内容一起移除，已确认页面不再使用（勿留死代码）
   .client-sec / .client-sec-title —— 原来的分区标题，页面已无分区
   .client-sec-note —— 原分区脚注
   .client-lead —— 原「关于这个客户端」正文段
   .client-steps / .client-step / .client-step-n / .client-step-txt / .client-step-t / .client-step-d
   —— 原三步安装说明卡片，现已压成上面那一句 .client-note
   .client-feats / .client-feat* —— 原功能介绍卡片网格（上一轮已删） */

/* 安卓版：压成一行居中（不再是一张左对齐的卡片） */
.client-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding: 16px;
    background: var(--c-surface-1);
    border: 1px dashed var(--c-border);
    border-radius: var(--r-lg);
}
.client-soon-ico {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-4);
}
.client-soon-t {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-2);
}
.client-soon-d {
    font-size: 12.5px;
    color: var(--c-text-4);
}

@media (max-width: 767px) {
    .client-page { }
    .client-hero { padding: 56px 20px 64px; margin-top: -20px; }
    .client-hero-app { width: 80px; height: 80px; }
    .client-hero-name { font-size: 22px; margin-top: 18px; }
    .client-ver-num { font-size: 28px; }
    .client-hero-btn { width: 100%; margin-top: 24px; }   /* 手机上按钮整行，拇指好点 */
    .client-close { padding: 22px 18px; margin-top: 20px; }
    .client-close-btn { width: 100%; }
    .client-soon { flex-wrap: wrap; row-gap: 4px; }
}

/* ══════════════════════════════════════════════════════════════════
   客户端页（2026-10-04 重做：去掉大黑大白，去掉所有图标）
   站长原话：「整体页面需要重写，最主要是我不喜欢这种界面，尤其是这种大黑大白的背景，真的好难看。
             而且不要展示任何图标，展示我的名称就行了，不用展示客户端的头像」
   改法：不再用整幅深色带，页面回到站点本来的浅灰底；页面上只有文字 + 一个按钮，
        没有任何图标、没有色块、没有卡片描边与阴影；层次只靠字号与灰度拉开。
   ⚠️ 上方那段「通栏色带 / .client-hero* / .client-close* / .client-soon*」已全部作废（死代码，
      页面已无对应元素），下次清理时整段删除；这里用更靠后的同名规则覆盖它们。
   ══════════════════════════════════════════════════════════════════ */
.client-page {
    max-width: 560px;
    margin: 0 auto;
    padding: 8px 0 0;
    text-align: center;
}
.client-name {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--c-text-1);
    letter-spacing: -0.01em;
}
.client-platform {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--c-text-4);
}
.client-lead {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--c-text-3);
}
.client-ver {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 32px;
}
.client-ver-label { font-size: 12.5px; color: var(--c-text-4); }
.client-ver-num {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--c-text-1);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.client-ver-rest { font-size: 12.5px; color: var(--c-text-4); font-variant-numeric: tabular-nums; }
/* 主按钮：整页唯一的实心深色块。不靠图标也不靠色块，靠留白与字号把它顶成唯一焦点 */
.client-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 44px;
    margin-top: 34px;
    border-radius: var(--r-lg);
    background: var(--c-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s var(--ease-out);
}
.client-btn:hover { background: var(--c-primary-hover); color: #fff; }
.client-btn:active { transform: scale(0.98); }
/* 2026-10-04：备用下载已按站长要求撤掉（下载器自己会取版本、体积小，一个链接够用），
   .client-actions / .client-btn.is-ghost 两条规则随之删除，不留死代码。 */
/* 安装界面截图轮播（2026-10-04）：固定比例容器 + 图片淡入淡出切换。
   图片原始比例 602×552（约 1.09:1），容器用 aspect-ratio 锁定，object-fit: contain
   保证既不裁切也不拉伸；宽度上限 460px，避免在 560px 栏里显得过大。 */
.shots { margin-top: 44px; }
.shots-view {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    aspect-ratio: 602 / 552;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-surface);
    box-shadow: var(--sh-2);
}
.shots-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.35s var(--ease-out);
}
.shots-img.is-active { opacity: 1; }
.shots-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}
.shots-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--c-border-strong);
    background: transparent;
    color: var(--c-text-3);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.shots-btn:hover { background: var(--c-surface-2); color: var(--c-text-1); }
.shots-dots { display: flex; gap: 8px; }
.shots-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--c-border-strong);
    cursor: pointer;
    transition: background 0.15s var(--ease-out);
}
.shots-dot.is-active { background: var(--c-text-2); }
@media (prefers-reduced-motion: reduce) {
    .shots-img { transition: none; }
}
/* 桌面端：左右分栏（2026-10-04 站长反馈「轮播图摆放的位置不怎么样」后重排）
   左栏＝名称/版本/下载按钮/安卓版提示，右栏＝安装界面截图轮播。
   顺带把纵向堆叠的高度从 831px 压到 450px 左右 —— 一屏放得下，垂直居中才真正成立。 */
@media (min-width: 1024px) {
    .client-page {
        max-width: 960px;
        min-height: calc(100vh - 65px - 120px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
        gap: 56px;
        align-items: center;    /* 两栏内容互相垂直居中 */
        align-content: center;  /* 整体在可视区里居中 */
        text-align: left;       /* 左栏改为左对齐，不再是"一长串居中元素" */
    }
    .client-ver { align-items: flex-start; margin-top: 26px; }
    .client-btn { margin-top: 26px; }
    .client-note { margin-top: 16px; }
    .shots { margin-top: 0; }
    .shots-view { max-width: none; }   /* 右栏自身就是定宽，不需要再限宽 */
}
.client-note {
    max-width: none;
    margin: 20px 0 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--c-text-4);
}
/* 底部两行灰字：用一条极浅的分隔线收住，不用卡片、不用底色 */
.client-foot {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.client-foot-line {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--c-text-3);
}

@media (max-width: 767px) {
    .client-page { padding: 0; }
    .client-name { font-size: 21px; }
    .client-ver { margin-top: 26px; }
    .client-ver-num { font-size: 28px; }
    .client-btn { width: 100%; padding: 0; margin-top: 28px; }
    .client-foot { margin-top: 34px; }
}
/* ══════════════════════════════════════════════════════════════════
   2026-10-04 站长提的 4 个问题（按行号顺序对应）
   ══════════════════════════════════════════════════════════════════ */

/* 问题 2：雪花主题看不到雪花 —— 根因是粒子颜色与背景「近白撞近白」：
   粒子是 radial-gradient(#ffffff → var(--fx-b)=#cfe3fb)，而雪花主题底色是 #f4f8fd，
   两者明度差不到 3%，所以完全看不见（白点 + 白色外发光等于隐形）。
   改法：把雪花粒子改成「白芯 + 明显偏蓝的外圈」，外发光从白色改为灰蓝，
   这样在浅底上能看清轮廓；深色底上同样成立。 */
html.theme-snow {
    --fx-a: #a9c7ea;
    --fx-b: #7fa9db;
}
.fx-snow .fx-p {
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ffffff 30%, var(--fx-a) 62%, var(--fx-b) 100%);
    box-shadow: 0 0 3px rgba(110, 145, 195, 0.55);
}

/* 问题 4：内页面包屑（返回那一排）太小、纯文本没形
   改法：整条做成一个浅色药丸条（白底 + 极浅投影 + 圆角全满），字号提到 14px，
   当前页加粗变深 —— 从「一行灰字」变成界面上有形状的一个组件。
   ⚠️ 必须带 .main-content 前缀：旧规则 html.theme-ui2 .breadcrumb 与 .detail-mc .breadcrumb
   的选择器权重都是 (0,2,0)，不加前缀光靠「写在后面」压不住（第一次改就是这样没生效的）。 */
.main-content .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    margin-bottom: 22px;
    background: var(--c-surface);
    border-radius: var(--r-full);
    box-shadow: var(--sh-1);
    font-size: 14px;
    color: var(--c-text-3);
}
.main-content .breadcrumb a { color: var(--c-text-2); font-weight: 500; }
.main-content .breadcrumb a:hover { color: var(--c-text-1); }
.main-content .breadcrumb span:not(:last-child) { color: var(--c-text-4); }
.main-content .breadcrumb > span:last-child { color: var(--c-text-1); font-weight: 600; }

/* 问题 3：经典主题与 UI2 主题的首页长得一模一样（只有内页不同）
   改法：不改任何标记，只用主题作用域把 UI2 的卡片换成**横向长条卡 + 两列**：
   图标在左、文字居中、分类与标签竖排在右 —— 与经典主题的「竖排小卡三列」形成明确区别。
   （之前那版整站列表式被站长否掉了，所以这里只作用于 UI2，不影响经典主题与其它页面。） */
html.theme-ui2 .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.theme-ui2 .resource-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
}
html.theme-ui2 .card-top {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
html.theme-ui2 .card-meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-top: 0;
    flex-shrink: 0;
}

/* 问题 1：设置页在电脑端左右空掉一大片
   根因：.settings-page 恒为 max-width: 640px + 居中，而内容区宽 1120px，两侧各空约 240px。
   改法：≥1024px 时放开限宽，并把各面板按两栏排布（CSS 多列，面板整块不跨栏），
   窄屏仍保持原来的单列窄版心，手机上观感不变。 */
@media (min-width: 1024px) {
    .settings-page { max-width: none; }
    .settings-page .settings-tab-content.active {
        columns: 2;
        column-gap: var(--sp-2xl);
    }
    .settings-page .settings-tab-content.active > * {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }
}
/* ══════════════════════════════════════════════════════════════════
   2026-10-04 第二轮反馈（切标签瞬间拉长 / 雪花仍看不清 / 樱花有 AI 味）
   ══════════════════════════════════════════════════════════════════ */

/* ① 设置页两栏回到多列布局
   上一轮我从多列换成 grid，是为了治「瞬间拉长」——但那是误判：拉长的真因是 JS 切换时序
   （旧隐藏与新显示被拆成两个定时器，中间 180ms 两边都不显示，框先塌再弹），已在 app.js 修掉。
   grid 的副作用才是真问题：grid 的行高取该行最高项，所以「搜索」这种矮面板下面会空一大块
   （站长原话：搜索在左边、下载在右边、界面在下面，中间留着一个大空白）。
   多列是唯一能让高度不一的面板**紧密堆叠**的纯 CSS 方案，所以换回来。 */
@media (min-width: 1024px) {
    .settings-page { max-width: none; }
    .settings-page .settings-tab-content.active {
        display: block;
        columns: 2;
        column-gap: var(--sp-2xl);
    }
    .settings-page .settings-tab-content.active > * {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }
}
/* .exit 已不再由 JS 添加（切换改为同 tick 原子完成），这里恢复原状以防其它地方引用 */
.settings-page .settings-tab-content.exit { display: block; }

/* ② 雪花还是不清楚 —— 上一轮只把颜色改深了一档，但粒子本身太小、太透。
   这次三处一起加：颜色再深一档 + 加一圈描边把轮廓勾出来 + 加大外发光；
   粒子数与透明度在 app.js 里由 --s / --o 控制，这里只调视觉。 */
html.theme-snow {
    --fx-a: #8fb4e3;
    --fx-b: #5f8fc9;
}
.fx-snow .fx-p {
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ffffff 26%, var(--fx-a) 60%, var(--fx-b) 100%);
    border: 1px solid rgba(120, 155, 205, 0.5);
    box-shadow: 0 0 4px rgba(110, 145, 195, 0.6), 0 1px 2px rgba(90, 125, 175, 0.35);
}

/* ③ 樱花有「AI 制作」的感觉 —— 最典型的来源就是那层 135° 粉色渐变：
   渐变 + 双色过渡 + 高饱和，是模板化装饰的通病。改法：
   · 去掉渐变，改实色花瓣（单色更朴素，也更像真花）
   · 形状从「对角两个圆角」改成水滴形（三个圆角 + 一个尖角），并把纵向拉长一点更像花瓣
   · 保留原有的匀速下落与旋转（那部分是物理感，不是 AI 味） */
.fx-sakura .fx-p {
    background: var(--fx-a);
    border-radius: 50% 50% 50% 0;
    width: var(--s, 10px);
    height: calc(var(--s, 10px) * 1.28);
    animation-name: fx-fall-petal;
}
/* ══════════════════════════════════════════════════════════════════
   二、客户端上线公告弹窗（2026-10-04 新增）
   门控：内容区未读到底前 —— 关闭按钮 disabled、ESC 无效、点遮罩无效。
   读完 → 按钮激活 + 出现「不再显示」勾选框。
   ══════════════════════════════════════════════════════════════════ */
.notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-xl);
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
/* 必须显式写：UA 的 [hidden]{display:none} 与 .notice-overlay{display:flex} 同权重，
   作者样式表在后会赢，不写这条弹窗一进页面就裸露在屏幕上（且还没读完也关不掉）。 */
.notice-overlay[hidden] { display: none; }
.notice-overlay.notice-open { opacity: 1; pointer-events: auto; }
.notice-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    /* 上限刻意压到 560px：公告全文比这个高，保证「必须滚动才能读完」这件事
       在任何屏幕上都是真的 —— 若弹窗高到内容一屏放得下，阅读门控就成了摆设。 */
    max-height: min(80vh, 560px);
    overflow: hidden;
    background: var(--c-surface);
    border-radius: var(--r-lg);   /* 2026-10-04：与全站微圆角统一（原 16px 属体系外例外） */
    box-shadow: var(--sh-4);
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    /* 只对 transform 用弹簧（透明度绝不过冲，过冲会触发 Opacity 断言/闪白） */
    transition: transform 0.32s var(--ease-spring), opacity 0.24s ease;
}
.notice-open .notice-box { opacity: 1; transform: none; }
.notice-head {
    flex-shrink: 0;
    padding: 22px 24px 12px;
}
.notice-eyebrow {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--c-primary);
}
.notice-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--c-text-1);
}
.notice-sub {
    margin-top: 5px;
    font-size: 13px;
    color: var(--c-text-3);
}
.notice-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 24px 6px;
    scroll-behavior: smooth;
}
.notice-body:focus-visible { outline: none; }
.notice-p {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-2);
}
.notice-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.notice-item { display: flex; gap: 12px; }
.notice-item-ico {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--c-surface-2);
    color: var(--c-primary);
}
.notice-item-t {
    margin-bottom: 1px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text-1);
}
.notice-item-d {
    font-size: 13px;
    line-height: 1.55;
    color: var(--c-text-3);
}
.notice-foot {
    flex-shrink: 0;
    padding: 14px 24px 20px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}
.notice-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.notice-progress-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--c-surface-2);
}
.notice-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--c-primary);
    transition: width 0.12s linear;
}
.notice-progress-txt {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--c-text-4);
    font-variant-numeric: tabular-nums;
}
.notice-hint {
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--c-text-4);
    text-align: center;
}
.notice-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.notice-remember {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--c-text-3);
    cursor: pointer;
    user-select: none;
}
.notice-remember[hidden] { display: none; }
.notice-remember input {
    width: 15px;
    height: 15px;
    accent-color: var(--c-primary);
    cursor: pointer;
}
.notice-btn {
    margin-left: auto;
    height: 42px;
    padding: 0 24px;
    border: none;
    border-radius: 10px;
    background: var(--c-primary);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s var(--ease-out);
}
.notice-btn:hover:not(:disabled) { background: var(--c-primary-hover); }
.notice-btn:active:not(:disabled) { transform: scale(0.97); }
/* 未读完：按钮是灰的且不可点（这是「无法关闭」的唯一可见承诺） */
.notice-btn:disabled {
    background: var(--c-surface-2);
    color: var(--c-text-4);
    cursor: not-allowed;
}
@media (max-width: 520px) {
    .notice-overlay { padding: 12px; align-items: flex-end; }
    .notice-box { border-radius: var(--r-lg); }   /* 2026-10-04：统一到微圆角一档（原 16/12 混用） */
    .notice-head { padding: 18px 18px 10px; }
    .notice-body { padding: 4px 18px 6px; }
    .notice-foot { padding: 12px 18px 16px; }
    .notice-title { font-size: 18px; }
    .notice-actions { flex-wrap: wrap; }
    .notice-btn { flex: 1; margin-left: 0; }
    .notice-remember { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .notice-box,
    .notice-progress-fill,
    .client-dl-btn { transition: none; }
}