/* ============================================================
   微软软件资源库 · 前台样式（全新设计，区别于 itellyou）
   ============================================================ */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --bg: #f5f7fb;
    --card: #ffffff;
    --text: #1f2937;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
    /* 吸顶头部实测高度（logo 行 66px + 导航行 44px）。
       页面内锚点跳转必须留出这段距离，否则标题会被头部盖住。 */
    --header-h: 114px;   /* 实测吸顶头部高度（字号整体放大后是 113px，留 1px 余量）；锚点偏移 = 这个值 + 12px */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    /* system-ui 走各系统 UI 字体；中文字体按平台逐级回退，避免个别 Windows 配置落到宋体 */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
                 "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    /* 注意：这项只在 macOS 上生效，Windows 的 Chrome 会忽略它 */
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- 头部 ---------- */
.site-header { background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 24px; padding: 14px 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand-logo {
    width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px;
}
.brand-name { font-size: 19px; font-weight: 700; }
.search-box { flex: 1; display: flex; max-width: 460px; margin-left: auto; }
.search-box input {
    flex: 1; padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px 0 0 8px; font-size: 15px; outline: none;
}
.search-box input:focus { border-color: var(--primary); }
.search-box button {
    padding: 9px 18px; background: var(--primary); color: #fff; border: none; border-radius: 0 8px 8px 0; cursor: pointer; font-size: 15px;
}
.search-box button:hover { background: var(--primary-dark); }

.main-nav { background: #fff; border-top: 1px solid var(--border); }
.nav-inner { display: flex; gap: 4px; overflow-x: auto; padding: 0 20px; }
.nav-link { padding: 10px 14px; color: var(--text); font-size: 15px; white-space: nowrap; }
.nav-link:hover { color: var(--primary); }
.caret { font-size: 14px; margin-left: 2px; color: var(--text-muted); }

/* 手机上品牌名竖着挤成四行，把搜索框压到只剩一半。
   只留 logo（MS 已经够识别），搜索框拿回整行；
   导航本身是横向滚动的，窄屏放不下靠滑动看，不做换行。 */
@media (max-width: 560px) {
    .header-inner { gap: 10px; }
    .brand-name { display: none; }
    .search-box input { font-size: 14px; }
    .nav-inner { padding: 0 12px; }
    .site-main { padding: 18px 12px; }
}

.site-main { padding: 24px 20px; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 34px 20px 22px; }
.hero h1 { font-size: 28px; font-weight: 700; }
.hero p { color: var(--text-muted); margin-top: 8px; font-size: 16px; }

/* ---------- 布局 ---------- */
.home-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; margin-top: 8px; }
@media (max-width: 860px) { .home-layout { grid-template-columns: 1fr; } }

.block { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 20px; }
.block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.block-head h2 { font-size: 18px; }
.more { font-size: 14px; color: var(--text-muted); }
/* 区块空状态 */
.block-empty {
    text-align: center; padding: 26px 12px; color: var(--text-muted); font-size: 14px; line-height: 1.7;
}
.block-empty-icon { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.block-empty p { margin: 0; }

/* ---------- 软件卡片 ---------- */
.soft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

/* 搜索结果：结果多，卡片要更紧凑，一屏尽量多放几条 */
.soft-grid-compact { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.soft-grid-compact .soft-cover { height: 92px; }
.soft-grid-compact .soft-cover-name { font-size: 16px; padding: 0 10px; }
.soft-grid-compact .soft-body { padding: 10px 12px 12px; }

/* ---------- 搜索工具条（排序 / 分类筛选） ---------- */
.search-tools {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px; padding: 10px 14px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.tool-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tool-label { font-size: 14px; color: var(--text-muted); margin-right: 2px; }
.tool-tab {
    display: inline-block; padding: 5px 13px; border-radius: 999px;
    font-size: 14px; color: #334155; background: #f1f5f9;
    transition: background .15s, color .15s;
}
.tool-tab:hover { background: #e2e8f0; color: var(--primary); }
.tool-tab.active { background: var(--primary); color: #fff; font-weight: 600; }
.tool-filter select {
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 14px; color: var(--text); background: #fff; outline: none; cursor: pointer;
}
.tool-filter select:focus { border-color: var(--primary); }
.tool-clear { font-size: 14px; color: var(--text-muted); margin-left: 4px; }
.tool-clear:hover { color: var(--primary); }
.soft-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .15s, box-shadow .15s; color: var(--text); }
.soft-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.soft-cover { height: 132px; background: #eef2ff; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.soft-cover img { width: 100%; height: 100%; object-fit: cover; }

/* 无封面：按「大类目」配色 —— 同一类目下所有产品同色，不同类目不同色。
   9 套均为深色渐变，与白色文字对比度 ≥ 4.5:1（WCAG AA），确保文字清晰可读
   （第 9 套 .pal-8 是后加的「其他系统」，见下面那行） */
/* 大类目配色：定义 --tile-bg，供大磁贴(.soft-cover-empty)与产品线卡片(.pline-tile)共用 */
.pal-0 { --tile-bg: linear-gradient(135deg, #4338ca, #312e81); } /* 企业解决方案 · 靛蓝 */
.pal-1 { --tile-bg: linear-gradient(135deg, #0f766e, #134e4a); } /* MSDN 技术资源库 · 深青 */
.pal-2 { --tile-bg: linear-gradient(135deg, #475569, #1e293b); } /* 工具和资源 · 石板灰 */
.pal-3 { --tile-bg: linear-gradient(135deg, #c2410c, #7c2d12); } /* 应用程序 · 深橙 */
.pal-4 { --tile-bg: linear-gradient(135deg, #6d28d9, #4c1d95); } /* 开发人员工具 · 深紫 */
.pal-5 { --tile-bg: linear-gradient(135deg, #1d4ed8, #1e3a8a); } /* 操作系统 · 深蓝 */
.pal-6 { --tile-bg: linear-gradient(135deg, #15803d, #14532d); } /* 服务器 · 深绿 */
.pal-7 { --tile-bg: linear-gradient(135deg, #be185d, #831843); } /* 设计人员工具 · 深玫红 */
/* 第 9 套：非微软系统（Ubuntu / macOS / BSD…）。前 8 套已被微软各分类占满，
   新增分类若走哈希兜底会和「应用软件」撞成同一个橙色，所以单开一套深橄榄。 */
.pal-8 { --tile-bg: linear-gradient(135deg, #4d7c0f, #3f6212); } /* 其他系统 · 深橄榄 */

.soft-cover-empty { background: var(--tile-bg, linear-gradient(135deg, #475569, #1e293b)); }
.soft-cover-empty::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.22), transparent 62%);
}
.soft-cover-name {
    position: relative; z-index: 1;
    font-size: 18px; font-weight: 700; line-height: 1.42;
    color: #fff; text-align: center; padding: 0 14px;
    text-shadow: 0 1px 4px rgba(0,0,0,.45);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.soft-body { padding: 12px 14px; }
.soft-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }.soft-summary { font-size: 14px; color: #4b5563; line-height: 1.5; }
.soft-date { font-size: 14px; color: var(--text-muted); margin-top: 5px; }
/* 匹配文件：只是「为什么这条命中了」的辅助说明，绝不能喧宾夺主。
   限定 1 行 + 灰底灰字，完整文件名靠 hover 的 title 提示。 */
.soft-match {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px; line-height: 1.6;
    color: #64748b; background: #f1f5f9;
    padding: 3px 8px; border-radius: 5px; margin-top: 6px;
    word-break: break-all;
}
.soft-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--text-muted); }
.soft-files { color: #0f766e; font-weight: 600; }

/* ---------- 产品线入口卡片（分类页） ----------
   分类页不再铺开每一个版本，只列产品线（Windows 10 / Office / SQL Server…），
   点进去才是「建议使用 + 所有版本」。一屏看完，路径是 分类 → 产品 → 版本。 */
.pline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px; }
.pline {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: var(--card);
    border: 1px solid var(--border); border-radius: 12px;
    color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pline:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }
/* 磁贴配色沿用大类目色（--tile-bg 由 .pal-N 提供），
   右侧高光与首页大磁贴同一手法，避免每张卡片看起来像纯色方块 */
.pline-tile {
    position: relative; overflow: hidden; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tile-bg, linear-gradient(135deg, #475569, #1e293b));
    color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.3px;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.pline-tile::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.22), transparent 62%);
}
.pline-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* 产品名允许折到两行：服务器软件里「System Center Data Protection Manager」
   这种名字一行放不下，截断成「System Center Data Protec…」用户根本认不出是哪个。
   两行不再截断（网格行高会跟着最高的一张走，同一行仍然齐平）。 */
.pline-name {
    font-size: 15px; font-weight: 600; line-height: 1.32;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.pline-meta { font-size: 14px; color: var(--text-muted); line-height: 1.3; }
.pline-go { flex-shrink: 0; font-size: 19px; line-height: 1; color: #cbd5e1; transition: color .15s, transform .15s; }
.pline:hover .pline-go { color: var(--primary); transform: translateX(2px); }

/* ---------- 「展开其余 N 个历史更新版本」 ---------- */
/* 同一版本下常有 7~10 条只差「Updated 哪个月」的条目（如 Version 1809），
   默认只展示最新的几条，其余收进这里 */
.more-fold { margin-top: 2px; }
.more-summary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px; cursor: pointer;
    font-size: 14px; color: var(--primary); background: #eff6ff;
    list-style: none; user-select: none;
    transition: background .15s;
}
.more-summary:hover { background: #dbeafe; }
.more-summary::-webkit-details-marker { display: none; }
.more-summary::before {
    content: '▸'; font-size: 14px; line-height: 1;
    transition: transform .18s ease;
}
.more-fold[open] > .more-summary::before { transform: rotate(90deg); }
.more-fold[open] > .more-summary { margin-bottom: 8px; }

/* ---------- 列表（热门软件 / 软件分类 / 最新收录 共用一套视觉） ---------- */
/* 侧栏可用宽度只有 ~244px，所以：名称最多两行截断，右侧的元信息一律不许折行 */

.soft-list { list-style: none; padding-left: 0; }
.soft-list li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    border-radius: 8px;
    transition: background .15s;
}
.soft-list li:last-child { border-bottom: none; }
.soft-list li:hover { background: #f8fafc; }

/* 名称：平时深灰、不加下划线，hover 才变蓝 —— 让标题保持视觉主导 */
.list-name {
    flex: 1 1 auto; min-width: 0;
    font-size: 15px; font-weight: 600; line-height: 1.5;
    color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.soft-list li:hover .list-name { color: var(--primary); }

/* 热门榜名次徽标：有了它，右侧就不必再显示「1 人下载」这种还没长起来的数字
   （四个并列的 1 既没有区分度，又暴露了站点没流量） */
.hot-list .list-name { font-size: 16px; }
.hot-rank {
    flex: 0 0 auto;
    width: 20px; height: 20px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; line-height: 1;
    color: var(--text-muted); background: #f1f5f9;
}
.hot-rank-top { color: #1d4ed8; background: #dbeafe; }

/* 元信息（下载人数 / 发布日期）：绝不折行，数字等宽保证多行上下对齐 */
.list-meta {
    flex: 0 0 auto;
    padding-top: 2px;
    font-size: 14px; line-height: 1.5;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 最新收录：日期有 10 个字符，和长产品名抢一行必然折断，所以改成上下两行 */
.soft-list-stack li { flex-direction: column; gap: 3px; }
.soft-list-stack .list-meta { padding-top: 0; }

/* 软件分类：内边距与 hover 和上面保持一致 */
.cat-list { list-style: none; padding-left: 0; }
.cat-list li a {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
    padding: 10px 8px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    border-radius: 8px;
    transition: background .15s;
}
.cat-list li:last-child a { border-bottom: none; }
.cat-list li a:hover { background: #f8fafc; color: var(--primary); }
.cat-name { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.5; }
.cat-count {
    flex: 0 0 auto;
    color: var(--text-muted); font-size: 14px; line-height: 1.5; padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ---------- 面包屑 ---------- */
.breadcrumb { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.breadcrumb .sep { margin: 0 6px; color: #cbd5e1; }
.breadcrumb .cur { color: var(--text); }

.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 26px; font-weight: 700; }
.page-desc { color: var(--text-muted); margin-top: 6px; font-size: 15px; }

.soft-head-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-muted); font-size: 14px; margin-top: 6px; }
/* 条目之间加分隔点，避免几项信息连成一句话 */
.soft-head-meta > span + span::before { content: '·'; margin-right: 10px; color: #cbd5e1; }
.meta-strong { color: #0f766e; font-weight: 600; }

/* ---------- 版本资源 ---------- */
.edition { margin-bottom: 26px; scroll-margin-top: calc(var(--header-h) + 12px); }
/* 锚点跳转后标题闪一下，让用户确认「我跳到的是这一段」 */
.edition:target > .edition-title { animation: anchor-flash 1.8s ease-out; }
@keyframes anchor-flash {
    0%   { background: #bfdbfe; box-shadow: 0 0 0 8px #bfdbfe; border-radius: 6px; }
    60%  { background: #e0f2fe; box-shadow: 0 0 0 8px #e0f2fe; border-radius: 6px; }
    100% { background: transparent; box-shadow: 0 0 0 8px transparent; border-radius: 6px; }
}
.edition-title { font-size: 18px; margin-bottom: 12px; padding-left: 10px; border-left: 3px solid var(--primary); }
.edition-date { font-size: 14px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
/* minmax(0, 1fr) 而不是 1fr：1fr 相当于 minmax(auto, 1fr)，
   轨道不能窄于内容的 min-content 宽度。资源卡里有文件名和 SHA1 这种长串，
   min-content 能到 800px 以上，手机上会把整页撑出横向滚动条。 */
.resource-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) {
    .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.resource-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow);
    min-width: 0;   /* 网格项默认 min-width:auto，同样会被长串顶宽 */
    scroll-margin-top: calc(var(--header-h) + 12px);   /* 吸顶头部会盖住标题 */
}
/* 从搜索结果点进来的那一条：滚进视野后高亮。
   留一圈常驻的蓝边（不是只闪一下就没了）——用户要能一眼确认「我找的就是这个」。 */
.resource-card:target {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18), var(--shadow);
    animation: card-flash 1.8s ease-out;
}
@keyframes card-flash {
    0%   { background: #dbeafe; }
    60%  { background: #eff6ff; }
    100% { background: var(--card); }
}
.resource-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.resource-name { font-weight: 600; font-size: 15px; line-height: 1.45; color: var(--text); margin: 0; }

/* ---------- 版本快捷跳转（版本多时页面很长） ---------- */
.version-nav {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 12px 14px; margin-bottom: 18px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.version-nav-label { font-size: 14px; color: var(--text-muted); margin-right: 2px; }
.version-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px; font-size: 14px;
    background: #f1f5f9; color: #334155; font-weight: 600;
    transition: background .15s, color .15s;
}
.version-chip:hover { background: var(--primary); color: #fff; }
.version-chip-n {
    font-size: 14px; font-weight: 700; color: var(--text-muted);
    background: #fff; border-radius: 999px; padding: 0 6px; line-height: 16px;
}
.version-chip:hover .version-chip-n { color: var(--primary); background: #fff; }

/* ---------- 资源卡：标签组做主标题，完整原名降级 ---------- */
.resource-tagline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.rtag-strong {
    display: inline-block; padding: 3px 10px; border-radius: 6px;
    font-size: 14px; font-weight: 700; line-height: 1.5;
    color: #1e3a8a; background: #dbeafe;
    white-space: nowrap;
}
/* 完整原始条目名：保留（校验 / 搜索用），但只作为次要信息一行截断 */
.resource-origin {
    font-size: 14px; color: #94a3b8; line-height: 1.5; margin-bottom: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resource-note {
    font-size: 14px; color: #0f766e; background: #f0fdfa;
    border-left: 3px solid #5eead4; border-radius: 0 6px 6px 0;
    padding: 5px 10px; margin-bottom: 10px; line-height: 1.6;
}
/* 「下载」是全站唯一的转化动作，视觉必须压过旁边的次要按钮 */
.btn-download {
    display: inline-block; padding: 9px 26px; border-radius: 8px;
    font-size: 15px; font-weight: 700; line-height: 1.4;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff; border: 0;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .35);
    transition: box-shadow .15s, transform .15s;
}
.btn-download:hover {
    color: #fff; transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .45);
}
.size-badge {
    flex-shrink: 0; font-size: 14px; font-weight: 600;
    color: #475569; background: #f1f5f9;
    padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}

/* ---------- 文件名解读 ---------- */
.resource-intro {
    background: linear-gradient(90deg, #eff6ff 0%, #f8fafc 100%);
    border-left: 3px solid #60a5fa;
    border-radius: 0 8px 8px 0;
    padding: 9px 12px; margin-bottom: 10px;
    font-size: 14px; line-height: 1.7; color: #334155;
}
.intro-label {
    display: inline-block;
    font-size: 14px; font-weight: 700; letter-spacing: .5px;
    color: #1d4ed8; background: #dbeafe;
    padding: 1px 6px; border-radius: 4px;
    margin-right: 7px; vertical-align: 1px;
}
.resource-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rtag {
    font-size: 14px; color: #475569; background: #f1f5f9;
    padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
/* 文件名是技术信息，占一行就够；完整名称靠 hover 的 title 提示，
   否则 ".iso" 会被挤到第二行，很不整齐 */
.resource-file {
    font-size: 14px; color: #64748b;
    margin-bottom: 10px; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-label {
    font-size: 14px; color: #94a3b8; font-weight: 700;
    letter-spacing: .5px; margin-right: 2px; white-space: nowrap;
}
.file-name { font-family: Consolas, Monaco, monospace; }
.resource-foot {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap;
}
.resource-sha1 {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0;
}
.rlbl { font-size: 14px; color: #94a3b8; font-weight: 700; letter-spacing: .5px; }
.sha1-text {
    font-family: Consolas, Monaco, monospace; font-size: 14px; color: #475569;
    word-break: break-all;
}
/* 版本页资源卡里的发布时间（跟 SHA1 同一行，紧跟其后） */
/* 版本页资源卡里的发布时间：单独占一行，放在 SHA1 下面（和产品页文件表一致）。
   ⚠ 必须 flex: 1 0 100% —— .resource-foot 是 flex-wrap 的，不然它会跟 SHA1 挤在同一行，
      或者被 justify-content: space-between 顶到最右边（原来的样子）。 */
.resource-pub { display: flex; align-items: center; gap: 6px; flex: 1 0 100%; }
.pub-text { font-size: 14px; color: #475569; font-variant-numeric: tabular-nums; }
.resource-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }

/* ---------- 空数据提示 ---------- */
.edition-empty {
    background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius);
    padding: 18px; text-align: center; color: var(--text-muted); font-size: 14px;
}
.no-data {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 44px 24px; text-align: center; box-shadow: var(--shadow);
}
.no-data-icon { font-size: 48px; line-height: 1; margin-bottom: 14px; }
.no-data-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.no-data-desc { color: var(--text-muted); font-size: 15px; margin-bottom: 20px; line-height: 1.7; }
.no-data-btn {
    display: inline-block; padding: 9px 20px; background: var(--primary); color: #fff;
    border-radius: 8px; font-size: 15px;
}
.no-data-btn:hover { background: var(--primary-dark); color: #fff; }

/* ---------- 错误页（404/403/500） ---------- */
.error-page {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 56px 24px 48px; text-align: center; box-shadow: var(--shadow);
}
.error-code {
    font-size: 78px; font-weight: 800; line-height: 1; letter-spacing: -2px;
    background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: 16px;
}
.error-title { font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.error-desc { color: var(--text-muted); font-size: 15px; line-height: 1.8; margin: 0 auto 26px; max-width: 520px; }

.error-search { display: flex; gap: 8px; max-width: 440px; margin: 0 auto 28px; }
.error-search input {
    flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 15px; outline: none;
}
.error-search input:focus { border-color: var(--primary); }
.error-search button {
    padding: 10px 20px; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--primary); color: #fff; font-size: 15px; white-space: nowrap;
}
.error-search button:hover { background: var(--primary-dark); }

.error-cats { margin-bottom: 28px; }
.error-cats-label { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }
.error-cats-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.error-cat {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    background: #f1f5f9; color: #334155; font-size: 14px;
}
.error-cat:hover { background: #e2e8f0; color: var(--primary); }

.error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-home {
    display: inline-block; padding: 10px 22px; background: var(--primary); color: #fff;
    border-radius: 8px; font-size: 15px;
}
.btn-home:hover { background: var(--primary-dark); color: #fff; }
.btn-home-plain { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn-home-plain:hover { background: #f8fafc; color: var(--primary); border-color: var(--primary); }

.btn-copy {
    /* 固定最小宽度 + 不换行：让「复制」「BT」这些按钮宽度一致，排排坐不参差 */
    display: inline-block; box-sizing: border-box; position: relative;
    min-width: 56px; text-align: center; white-space: nowrap;
    padding: 3px 8px; font-size: 14px; border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer; color: var(--text);
}
.btn-copy-lg { min-width: 74px; }   /* 「复制链接」按钮，预留更宽 */
.btn-copy:hover { border-color: var(--primary); color: var(--primary); }
.btn-copy.copied { background: #ecfdf5; border-color: #10b981; color: #10b981; }
/* 复制反馈：浮在按钮上方的小气泡 + 按钮变绿，**不改按钮文案**。
   ⚠ 原来是 btn.textContent = '已复制'：文案一变按钮就变宽，而操作列宽度是固定的，
   表格会重新分配列宽，把左边「大小」那列和整排按钮一起挤动 —— 实测
   「复制 → 复制失败，请手动复制」能挤动 102px，点一下整行跳一下（业主反馈过）。
   气泡是绝对定位、不参与布局，文案多长都不会让页面跳。 */
.btn-copy.copied::after {
    content: attr(data-tip);
    position: absolute; right: 0; bottom: calc(100% + 6px);
    padding: 2px 8px; border-radius: 6px;
    font-size: 12px; font-weight: 600; line-height: 1.7;
    background: #0f172a; color: #fff; white-space: nowrap;
    pointer-events: none; z-index: 30;
}
.btn-bt { border-color: #a5b4fc; color: #4f46e5; }
.btn-bt:hover { border-color: #4f46e5; color: #4f46e5; background: #eef2ff; }
.btn-download {
    display: inline-block; padding: 5px 14px; background: var(--primary); color: #fff; border-radius: 6px; font-size: 14px; margin-right: 4px;
}
.btn-download:hover { background: var(--primary-dark); color: #fff; }
.muted { color: #cbd5e1; }

/* ---------- 分页 / 空态 ---------- */
.pagination { margin: 20px 0; display: flex; justify-content: center; }
.pagination .pagination { margin: 0; }
.pagination ul { list-style: none; display: flex; gap: 6px; }
.pagination li { display: inline; }
.pagination li a, .pagination li span { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 14px; }
.pagination li.active span { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination li.disabled span { color: #cbd5e1; }
.empty { text-align: center; color: var(--text-muted); padding: 40px 0; }

/* ---------- 静态内容 / 网站地图 ---------- */
.static-content { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; font-size: 15px; }
.static-content p { margin-bottom: 12px; }
.sitemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sitemap-group { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.sitemap-group h2 { font-size: 17px; margin-bottom: 8px; }
.sitemap-group ul { list-style: none; }
.sitemap-group li { padding: 5px 0; font-size: 15px; }
/* 网站地图：产品线按小圆片排，和「全部 N 个版本」的长列表区分开 */
.sitemap-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sitemap-lines li { padding: 0; }
.sitemap-lines a {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 14px; padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--border); color: #475569; white-space: nowrap;
}
.sitemap-lines a:hover { border-color: var(--primary); color: var(--primary); background: #eff6ff; }
.sitemap-lines em { font-style: normal; font-size: 14px; color: #94a3b8; }
.sitemap-more > summary {
    font-size: 14px; color: var(--primary); cursor: pointer;
    list-style: none; user-select: none; padding: 2px 0;
}
.sitemap-more > summary::-webkit-details-marker { display: none; }
.sitemap-more > summary::before { content: '▸ '; font-size: 14px; }
.sitemap-more[open] > summary::before { content: '▾ '; }
.sitemap-more[open] > summary { margin-bottom: 4px; }

/* ---------- 页脚 ---------- */
.site-footer { background: #111827; color: #d1d5db; margin-top: 30px; }
.footer-inner { padding: 26px 20px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.footer-links a { color: #d1d5db; font-size: 14px; }
.footer-links a:hover { color: #fff; }
.footer-copy { font-size: 14px; color: #9ca3af; }
.footer-icp { font-size: 14px; margin-top: 4px; }
.footer-icp a { color: #9ca3af; }

/* ---------- 下载提示弹窗 ---------- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal-box {
    background: #fff; border-radius: 14px; max-width: 430px; width: 100%;
    padding: 24px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.modal-close {
    position: absolute; top: 10px; right: 14px; border: none; background: none;
    font-size: 30px; line-height: 1; color: #9ca3af; cursor: pointer; padding: 0;
}
.modal-close:hover { color: #374151; }
.modal-title { font-size: 19px; font-weight: 700; margin-bottom: 10px; padding-right: 24px; }
.modal-text { color: #4b5563; font-size: 15px; margin-bottom: 12px; }
.modal-file {
    background: #f3f4f6; border-radius: 8px; padding: 8px 12px;
    font-family: Consolas, Monaco, monospace; font-size: 14px; color: #374151;
    word-break: break-all; margin-bottom: 16px;
}
.modal-actions { display: flex; flex-direction: column; gap: 8px; }
.modal-btn {
    display: block; text-align: center; padding: 10px 14px; border-radius: 8px;
    border: 1px solid #d1d5db; background: #fff; color: #1f2937;
    font-size: 15px; cursor: pointer; text-decoration: none;
}
.modal-btn:hover { border-color: #2563eb; color: #2563eb; }
.modal-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.modal-btn-primary:hover { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.modal-btn-thunder { background: #f97316; border-color: #f97316; color: #fff; }
.modal-btn-thunder:hover { background: #ea580c; color: #fff; border-color: #ea580c; }
.modal-btn.copied { background: #ecfdf5; border-color: #10b981; color: #10b981; }
/* 弹窗里的复制反馈同上：气泡浮在按钮上方，不改文案（见 .btn-copy.copied 那段说明） */
.modal-btn { position: relative; }
.modal-btn.copied::after {
    content: attr(data-tip);
    position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 6px);
    padding: 3px 10px; border-radius: 6px;
    font-size: 12px; font-weight: 600; line-height: 1.7;
    background: #0f172a; color: #fff; white-space: nowrap;
    pointer-events: none; z-index: 30;
}

/* ============================================================
   产品页：概要 + 建议使用 + 所有版本（chip 切换）
   ============================================================ */

/* ---------- 文件表格 ---------- */
.file-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.file-table th {
    text-align: left; font-size: 14px; font-weight: 600; color: var(--text-muted);
    padding: 0 10px 8px; border-bottom: 1px solid var(--border);
}
.file-table td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.file-table tr:last-child td { border-bottom: none; }
.file-table tbody tr:hover { background: #f8fafc; }

.ft-name { min-width: 0; }
.ft-file {
    display: block; font-family: Consolas, Monaco, monospace; font-size: 14px;
    color: var(--text); line-height: 1.5;
    overflow-wrap: anywhere;
}
.ft-tags { display: block; font-size: 14px; color: #94a3b8; margin-top: 3px; }
/* SHA1 校验值：能下载却不能核对是说不过去的。占一行、等宽字体，
   开成独立一列的话 40 位字符会把窄屏的表格撑出横向滚动条。 */
.ft-sha1 {
    margin-top: 3px; font-size: 14px; line-height: 1.5; color: #94a3b8;
}
.ft-sha1 b { font-weight: 700; letter-spacing: .5px; margin-right: 5px; }
.ft-sha1 code {
    font-family: Consolas, Monaco, monospace; font-size: 14px;
    color: #475569; overflow-wrap: anywhere;
    /* 不配复制按钮：点一下就把整串选中（user-select: all），省掉按钮又不影响「一次拿全」。
       SHA512 有 128 位、会折成好几行，更需要这种「一次选全」 */
    user-select: all;
}
/* 在线安装器标记：Visual Studio 的引导器只有 5.42 MB，用户容易以为下载错了，
   所以列表里要给个显眼的提示（配色跟后台的 .tag-warn 一致） */
.ft-web {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    background: #fffbeb; color: #b45309; border: 1px solid #fde68a;
}
.resource-pack {
    margin-top: 5px; padding: 7px 10px; border-radius: 6px;
    font-size: 13px; line-height: 1.7;
    background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
}
/* 发布时间：放在 SHA1 下面单独占一行。
   ⚠ 必须是 display: block —— SHA1 那一行是 inline 的，不加这句会跟它挤在同一行。 */
.ft-date { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: #94a3b8; }
.ft-date b { font-weight: 700; letter-spacing: .5px; margin-right: 5px; }
.ft-date span { color: #475569; font-variant-numeric: tabular-nums; }
.ft-size { width: 82px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }.ft-act-col { width: 170px; }
.ft-act { width: 170px; white-space: nowrap; }

/* 窄屏下的文件表：改成「一行一条」的卡片式排版。
   ⚠ 不加这段，固定宽度的按钮列(170px) + 大小列(82px) 会把文件名挤到只剩约 100px，
   390px 宽的手机上文件名被折成一字一行（实测过），整张表没法看。
   用 :not(.compare-table) 排除「版本对比」表 —— 它也带 .file-table 这个类，
   但有一套自己的窄屏规则，这里不要连带影响它。 */
@media (max-width: 560px) {
    .file-table:not(.compare-table) thead { display: none; }
    .file-table:not(.compare-table) tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
        padding: 10px 10px 12px; border-bottom: 1px solid #f1f5f9;
    }
    .file-table:not(.compare-table) tbody tr:last-child { border-bottom: none; }
    .file-table:not(.compare-table) td { display: block; width: auto; padding: 0; border-bottom: none; }
    /* 文件名整块占一行，大小和按钮自然落到第二行；按钮靠右 */
    .file-table:not(.compare-table) .ft-name { flex: 1 0 100%; }
    .file-table:not(.compare-table) .ft-act { margin-left: auto; }
}

.btn-download-sm {
    display: inline-block; padding: 5px 16px; border-radius: 6px; margin-right: 4px;
    font-size: 14px; font-weight: 600; background: var(--primary); color: #fff;
}
.btn-download-sm:hover { background: var(--primary-dark); color: #fff; }

/* ---------- 「如何选择」 ----------
   支持状态结论是自动生成的（数据来自微软官方生命周期），
   选择提示由当前页面的文件标签触发 —— 所以这里的每条文字都对这一页成立。 */
.picker { border-left: 3px solid var(--primary); }
.picker-lead {
    font-size: 15px; line-height: 1.75; color: #334155;
    background: #f8fafc; border-radius: 8px; padding: 11px 14px;
}
.picker-tips { list-style: none; margin-top: 10px; }
.picker-tips li {
    position: relative; padding: 5px 0 5px 18px;
    font-size: 14px; line-height: 1.7; color: #475569;
}
.picker-tips li::before {
    content: ''; position: absolute; left: 4px; top: 14px;
    width: 5px; height: 5px; border-radius: 50%; background: #94a3b8;
}

/* ---------- 版本对比表 ----------
   把一条产品线的所有版本一次列全，带微软官方生命周期的支持状态。
   与文件表格共用 .file-table 的底子，只是列宽和状态徽标是自己的一套。 */
.compare-table th { padding-bottom: 8px; }
.compare-table td { vertical-align: top; }
.ct-name { font-weight: 600; white-space: nowrap; }
/* 版本对比表里的版本号：点了会激活下面「所有版本」里对应的分组并滚过去。
   做成链接的样子（主色 + hover 下划线），别让用户以为它只是文字。 */
.ct-jump { color: var(--primary); text-decoration: none; }
.ct-jump::after { content: ' ↓'; font-weight: 400; opacity: .55; }
.ct-jump:hover { text-decoration: underline; }
.ct-date { width: 110px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-files { width: 78px; color: var(--text-muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-status { width: 300px; }

.lc {
    display: inline-block; padding: 1px 9px; border-radius: 999px;
    font-size: 14px; font-weight: 600; white-space: nowrap;
}
/* 支持中 / 部分支持 / 已停止：绿-琥珀-灰，和「能不能用」的判断直接对应 */
.lc-active  { color: #065f46; background: #d1fae5; }
.lc-partial { color: #92400e; background: #fef3c7; }
.lc-ended   { color: #475569; background: #f1f5f9; }
/* 每个渠道一行：Windows 10 的家庭/专业版和企业/教育版支持期不一样，都要列出来。
   日期链到微软官方生命周期页面，用户可以自己核对。 */
.lc-date { display: block; margin-top: 3px; font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.lc-date a { color: var(--text-muted); border-bottom: 1px dotted #cbd5e1; }
.lc-date a:hover { color: var(--primary); border-bottom-color: var(--primary); }

@media (max-width: 560px) {
    /* 窄屏必须允许换行：版本号、状态徽标、日期链都是 nowrap 的话，
       表格会被内容顶宽，整页出现横向滚动条（实测溢出 15px）。 */
    .compare-table { table-layout: auto; }
    .compare-table .ct-name { white-space: normal; word-break: break-word; }
    .compare-table .ct-status { width: auto; }
    .compare-table .ct-date { width: 76px; }
    .compare-table .ct-files { width: 52px; }
    .compare-table .lc { white-space: normal; }
    .compare-table .lc-date { font-size: 14px; }
}

/* ---------- 版本 chip 切换 ---------- */
.ver-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ver-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
    background: #fff; color: #334155; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.ver-chip:hover { border-color: var(--primary); color: var(--primary); }
.ver-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-n {
    font-size: 14px; font-weight: 700; color: var(--text-muted);
    background: #f1f5f9; border-radius: 999px; padding: 1px 7px; line-height: 15px;
}
.ver-chip.is-active .chip-n { background: rgba(255,255,255,.25); color: #fff; }

/* 只有 JS 生效时才隐藏未选中的版本；爬虫不加 .js-switch，所有版本保持展开 */
.js-switch .ver-panel { display: none; }
.js-switch .ver-panel.is-active { display: block; }

.ver-panel { padding-top: 4px; scroll-margin-top: calc(var(--header-h) + 12px); }
.ver-meta {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 14px; color: var(--text-muted); margin-bottom: 10px;
}
.ver-meta b { font-size: 16px; color: var(--text); }
/* 向下/向上钻取的链接：淡蓝文字 + 小箭头，和灰色元信息区分开，
   但不能做成按钮 —— 它是导航，不是这一行的主要动作（主要动作是右边「下载」） */
.ver-detail, .head-link {
    color: var(--primary); font-weight: 600;
}
.ver-detail::after, .head-link::after { content: ' ›'; }
.ver-detail:hover, .head-link:hover { text-decoration: underline; }
.head-link { font-size: 14px; }
.older-block { margin-top: 10px; }
.older-head {
    font-size: 14px; font-weight: 600; color: #475569;
    padding: 6px 10px; background: #f8fafc; border-radius: 6px; margin-bottom: 2px;
}