/* ============================================================
   独步游戏网 · 前台设计系统 v3（现代编辑风 · UTF-8）
   纸白底 + 墨黑 + 品牌橙；强排版 / 图形封面 / 无图也成立
   ============================================================ */
:root {
  /* 新色板 */
  --paper: #fbfaf7;
  --paper-2: #f3f1ec;
  --ink: #15181d;
  --ink-2: #5b6270;
  --ink-3: #8b93a1;
  --line-warm: #e4e0d8;
  --line-warm-2: #efece5;
  /* 品牌 */
  --c-primary: #ff5c1a;
  --c-primary-dark: #c93f06;
  --c-primary-soft: #fff1ea;
  /* 兼容旧组件 */
  --c-dark: #15181d;
  --c-dark-2: #232a36;
  --c-text: #2c3138;
  --c-text-2: #6a7280;
  --c-line: #e8e5df;
  --c-bg: #fbfaf7;
  --c-card: #ffffff;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(21, 24, 29, .05), 0 6px 20px rgba(21, 24, 29, .05);
  --shadow-hover: 0 10px 30px rgba(21, 24, 29, .11);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--c-text);
  font: 15px/1.7 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-primary); }
img { max-width: 100%; display: block; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ══════════ 顶栏 ══════════ */
.site-header { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 30; }
.site-header .bar { display: flex; align-items: center; gap: 24px; height: 58px; }
.logo { font-size: 20px; font-weight: 800; letter-spacing: .5px; color: #fff; }
.logo b { color: var(--c-primary); }
.main-nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a { color: #b9c0cd; padding: 6px 12px; border-radius: 6px; white-space: nowrap; font-size: 14px; transition: .18s; }
.main-nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.main-nav a.on { color: #fff; border-radius: 0; box-shadow: inset 0 -2px 0 var(--c-primary); }
.nav-more { position: relative; flex: none; }
.nav-more > span { display: block; color: #b9c0cd; padding: 6px 12px; border-radius: 6px; white-space: nowrap; font-size: 14px; cursor: pointer; transition: .18s; }
.nav-more:hover > span,
.nav-more:focus-within > span { color: #fff; background: rgba(255, 255, 255, .1); }

/* 悬停热区桥：触发器与面板之间有 8px 空隙，鼠标经过时 hover 会丢失导致菜单瞬间收起、点不中条目 */
.nav-more::after { content: ""; position: absolute; left: -4px; right: -4px; top: 100%; height: 12px; }

.nav-drop {
  position: absolute; top: calc(100% + 8px); right: 0; background: #fff;
  border: 1px solid var(--line-warm); border-radius: 9px; box-shadow: var(--shadow-hover);
  padding: 6px; min-width: 156px; z-index: 40;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* visibility 过渡会让面板在鼠标短暂离开时多保留 160ms，配合上面的热区桥彻底消除“移入即消失” */
.nav-more:hover .nav-drop,
.nav-more:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-drop a { display: block; color: var(--c-text); padding: 8px 12px; border-radius: 6px; font-size: 13.5px; white-space: nowrap; }
.nav-drop a:hover, .nav-drop a:focus-visible { background: var(--c-primary-soft); color: var(--c-primary-dark); outline: 0; }

.search-box { display: flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .1); border-radius: 18px; padding: 4px 5px 4px 13px; }
.search-box input { background: transparent; border: 0; outline: 0; color: #fff; width: 128px; font-size: 13px; }
.search-box input::placeholder { color: #8d95a4; }
.search-box button { background: var(--c-primary); color: #fff; border: 0; border-radius: 14px; padding: 4px 12px; font-size: 12px; cursor: pointer; }

/* ══════════ 面包屑 ══════════ */
.crumb { padding: 16px 0 2px; font-size: 13px; color: var(--ink-3); }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--c-primary); }

/* ══════════ 布局 ══════════ */
.layout { display: grid; grid-template-columns: 1fr 336px; gap: 34px; padding: 10px 0 30px; }
.layout.single { grid-template-columns: 1fr; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; gap: 24px; } }

/* ══════════ 卡片（列表页/文档页通用） ══════════ */
.card { background: var(--c-card); border: 1px solid var(--line-warm-2); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card + .card { margin-top: 22px; }
.card-hd { padding: 16px 22px 0; display: flex; align-items: baseline; justify-content: space-between; }
.card-hd h2, .card-hd h1 { margin: 0; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 9px; letter-spacing: -.2px; }
.card-hd h2::before, .card-hd h1::before { content: ""; width: 3px; height: 17px; background: var(--c-primary); border-radius: 2px; }
.card-hd .more { font-size: 13px; color: var(--ink-2); }
.card-hd .more:hover { color: var(--c-primary); }
.card-bd { padding: 14px 22px 20px; }

/* ══════════ 文档列表（列表页/搜索结果通用） ══════════ */
.doc-list { display: flex; flex-direction: column; }
.doc-item { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line-warm-2); }
.doc-item:last-child { border-bottom: 0; }
.doc-item .thumb { flex: none; width: 128px; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; background: var(--paper-2); }
.doc-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-item .thumb.noimg { background: linear-gradient(135deg, #ece8e0, #f6f3ec); }
.doc-item h3 { margin: 0 0 5px; font-size: 16.5px; line-height: 1.5; font-weight: 650; letter-spacing: -.1px; }
.doc-item h3 a:hover { color: var(--c-primary-dark); }
.doc-item .desc { margin: 0 0 7px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-item .meta { font-size: 12px; color: var(--ink-3); display: flex; gap: 14px; align-items: center; }
.doc-item .meta .cat { color: var(--c-primary); font-weight: 600; }

/* ══════════ 首页：Hero（轮播） ══════════ */
.home .hero { display: grid; grid-template-columns: 1.62fr 1fr; gap: 26px; padding: 22px 0 30px; }

/* 轮播项内的文字层（原 .lead 选择器已随结构改名失效，统一到 .slide） */
.slide .wm {
  position: absolute; right: 22px; top: 26px; writing-mode: vertical-rl;
  font-size: 62px; font-weight: 900; line-height: 1; letter-spacing: 6px;
  color: rgba(255, 255, 255, .085); pointer-events: none; user-select: none;
}
.lead-body {
  /* 底部多留白：轮播指示条贴在图片下沿，避免与摘要挤在一起 */
  position: relative; padding: 34px 36px 46px; width: 100%;
  background: linear-gradient(to top, rgba(8, 10, 14, .86) 0%, rgba(8, 10, 14, .45) 46%, transparent 100%);
}
/* 轮播项：图片常自带宣传大字，文字区需更强遮罩 */
.slide.has-pic .lead-body {
  background: linear-gradient(to top,
    rgba(6, 8, 12, .96) 0%, rgba(6, 8, 12, .92) 26%, rgba(6, 8, 12, .62) 48%,
    rgba(6, 8, 12, .18) 74%, transparent 100%);
}

.slide h1 {
  font-size: clamp(24px, 2.7vw, 36px); line-height: 1.26; margin: 0;
  font-weight: 800; letter-spacing: -.5px; text-wrap: balance;
}

/* 摘要：固定两行，超出省略（原来选择器失效导致不限行） */
.slide .excerpt {
  font-size: 14px; line-height: 1.7; color: #d9dee7; max-width: 90%; margin: 12px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.side-leads { display: flex; flex-direction: column; justify-content: space-between; height: 100%; border-top: 1px solid var(--line-warm); }
.side-leads .item { display: block; padding: 15px 0; border-bottom: 1px solid var(--line-warm); transition: .2s; }
.side-leads .item:hover { padding-left: 7px; }
.side-leads .ch { font-size: 11.5px; font-weight: 700; letter-spacing: .8px; color: var(--c-primary); }
.side-leads h3 { font-size: 15.5px; line-height: 1.5; margin: 5px 0 0; font-weight: 650; transition: .2s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-leads .item:hover h3 { color: var(--c-primary-dark); }
.side-leads time { font-size: 12px; color: var(--ink-3); margin-top: 6px; display: block; font-variant-numeric: tabular-nums; }

/* ── 焦点图轮播（Hero） ── */
.lead-slider { position: relative; min-height: 452px; border-radius: var(--radius); overflow: hidden; }
.slides { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0; display: flex; align-items: flex-end; color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s;
  isolation: isolate;
  background: linear-gradient(135deg, #1c2331 0%, #2b3243 44%, #7a3a1a 118%);
}
.slide.on { opacity: 1; visibility: visible; z-index: 1; }
.slide:not(.has-pic)::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 84% 6%, rgba(255, 255, 255, .26), transparent 56%),
    radial-gradient(80% 70% at 12% 96%, rgba(255, 92, 26, .34), transparent 64%);
}
.slide:not(.has-pic)::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .055) 0 2px, transparent 2px 13px);
}
.slide-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px;
  padding: 0 36px 15px; z-index: 3; }
.slide-nav button {
  width: 26px; height: 4px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(255, 255, 255, .32); color: transparent; font-size: 0;
  transition: width .22s, background .22s;
}
.slide-nav button:hover { background: rgba(255, 255, 255, .6); }
.slide-nav button.on { width: 36px; background: var(--c-primary); }

/* ── 游戏图库（封面卡网格） ── */
.gallery { margin-bottom: 38px; }
.g-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-top: 18px; }
.g-card { display: block; }
.g-cover {
  display: block; aspect-ratio: 16/10; border-radius: 9px; overflow: hidden; position: relative;
  background-size: cover; background-position: center; background-color: var(--paper-2);
  transition: transform .25s, box-shadow .25s;
}
.g-card:hover .g-cover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.g-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 8, 12, .80) 0%, rgba(6, 8, 12, .30) 38%, rgba(6, 8, 12, .02) 66%);
}
.g-cat {
  position: absolute; left: 8px; bottom: 8px; z-index: 1; font-style: normal;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 3px;
  background: rgba(255, 255, 255, .92); color: var(--ink);
}
.g-card h3 {
  font-size: 13.5px; line-height: 1.5; margin: 9px 0 0; font-weight: 650; transition: .2s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.g-card:hover h3 { color: var(--c-primary-dark); }

/* ══════════ 首页：编辑精选三卡 ══════════ */
.home .picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 34px; }
.pick {
  position: relative; height: 172px; border-radius: var(--radius); overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 18px;
  isolation: isolate; transition: transform .25s, box-shadow .25s;
}
.pick:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
/* 无图：栏目色渐变 + 斜纹 */
.pick.p1 { background: linear-gradient(135deg, #2b1510, #ff5c1a 118%); }
.pick.p2 { background: linear-gradient(135deg, #101a2e, #3b82f6 122%); }
.pick.p3 { background: linear-gradient(135deg, #1a1230, #8b5cf6 122%); }
.pick:not(.has-pic)::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(6, 8, 12, .80), transparent 72%),
              repeating-linear-gradient(-35deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 11px);
}
.pick.has-pic::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(6, 8, 12, .88), rgba(6, 8, 12, .10));
}
.pick .num {
  position: absolute; right: 12px; top: 2px; font-size: 58px; font-weight: 900; line-height: 1;
  color: rgba(255, 255, 255, .14); font-variant-numeric: tabular-nums; letter-spacing: -2px;
}
/* 有真实图片时不显示编号（图内常有自带的文字信息，叠加会打架） */
.pick.has-pic .num { display: none; }
.pick .ch {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  padding: 2px 8px; border-radius: 3px; background: rgba(255, 255, 255, .92); color: var(--ink);
}
.pick h3 { font-size: 15.5px; line-height: 1.45; margin: 6px 0 0; font-weight: 700; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ══════════ 首页：区块标题 ══════════ */
.sec-hd { display: flex; align-items: baseline; gap: 12px; padding-bottom: 11px; border-bottom: 2px solid var(--ink); margin-bottom: 2px; }
.sec-hd h2 { font-size: 19px; font-weight: 800; letter-spacing: -.2px; margin: 0; }
.sec-hd .count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sec-hd .more { margin-left: auto; font-size: 12.5px; color: var(--ink-2); }
.sec-hd .more:hover { color: var(--c-primary); }

/* ══════════ 首页：资讯流 ══════════ */
.feed { margin-bottom: 38px; }
.feed-list { margin: 0; padding: 0; list-style: none; }
.feed-list .row {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: start;
  padding: 15px 0; border-bottom: 1px solid var(--line-warm-2); transition: .2s;
}
.feed-list .row:hover { background: linear-gradient(90deg, rgba(255, 92, 26, .045), transparent 62%); }
.feed-list .stamp { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 3px; }
.feed-list .stamp b { display: block; font-size: 15px; color: var(--ink); font-weight: 700; }
.feed-list h3 { font-size: 16.5px; line-height: 1.55; margin: 0 0 5px; font-weight: 650; transition: .2s; letter-spacing: -.1px; }
.feed-list .row:hover h3 { color: var(--c-primary-dark); }
.feed-list p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-list .tagline { display: flex; gap: 10px; font-size: 12px; color: var(--ink-3); align-items: center; flex-wrap: wrap; }
.feed-list .thumb { flex: none; width: 124px; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; background: var(--paper-2); }
.feed-list .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.feed-list .row:hover .thumb img { transform: scale(1.04); }
.feed-list .thumb.noimg { background: linear-gradient(135deg, #ece8e0, #f7f4ee); }

/* 徽章 */
.chip { display: inline-block; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 3px; background: var(--paper-2); color: var(--ink-2); }
.chip.hot { background: var(--c-primary-soft); color: var(--c-primary-dark); }

/* ══════════ 首页：栏目区块 ══════════ */
.channel { margin-bottom: 38px; }
/* 左图固定较窄宽度，右侧列表可容纳更多单行条目 */
.ch-panel { display: grid; grid-template-columns: 340px 1fr; gap: 24px; padding-top: 16px; }
.ch-main {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 236px;
  display: flex; align-items: flex-end; color: #fff; isolation: isolate; padding: 20px;
  background: linear-gradient(140deg, #211915, #ff5c1a 126%);
}
.ch-main:not(.has-pic)::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(6, 8, 12, .82), transparent 74%),
              repeating-linear-gradient(28deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 12px);
}
.ch-main.has-pic::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(6, 8, 12, .93) 0%, rgba(6, 8, 12, .62) 42%, rgba(6, 8, 12, .18) 100%);
}
.ch-main h3, .ch-main .ex { text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.ch-main h3 { font-size: 17px; line-height: 1.45; margin: 0 0 7px; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ch-main .ex { font-size: 12.5px; line-height: 1.7; color: #d6dce6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-list { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.ch-list .li { padding: 8px 0; border-bottom: 1px dashed var(--line-warm); display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.ch-list .li:last-child { border-bottom: 0; }
.ch-list .li .b { width: 4px; height: 4px; border-radius: 50%; background: var(--c-primary); flex: none; margin-top: 9px; }
/* 标题单行显示，超长省略，日期始终贴右不被挤走 */
.ch-list .li a {
  flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.55; transition: .2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-list .li a:hover { color: var(--c-primary-dark); }
.ch-list .li time { margin-left: auto; font-size: 11.5px; color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }

/* ══════════ 首页：侧栏最新图文 ══════════ */
.pic-list { background: #fff; border: 1px solid var(--line-warm); border-radius: var(--radius); padding: 14px 16px 12px; }
.pic-list h3 {
  display: flex; align-items: center; gap: 7px; margin: 0 0 11px;
  font-size: 14px; font-weight: 750;
}
.pic-list h3 .sq { width: 3px; height: 13px; border-radius: 2px; background: var(--c-primary); }
.pic-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pic-list a { display: flex; gap: 10px; align-items: flex-start; }
.pic-list .thumb {
  flex: none; width: 76px; height: 53px; border-radius: 6px;
  background-size: cover; background-position: center; background-color: var(--paper-2);
  transition: opacity .2s;
}
.pic-list a:hover .thumb { opacity: .88; }
.pic-list .txt { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pic-list b {
  font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--c-text); transition: .2s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pic-list a:hover b { color: var(--c-primary-dark); }
.pic-list time { font-size: 11.5px; color: var(--ink-3); }

/* ══════════ 首页：友情链接 ══════════ */
.friend-links {
  display: flex; align-items: flex-start; gap: 18px;
  margin: 30px 0 4px; padding: 18px 22px;
  background: #fff; border: 1px solid var(--line-warm); border-radius: var(--radius);
}
.friend-links .fl-hd {
  flex: none; display: flex; align-items: center; gap: 8px; padding-top: 4px;
  font-size: 13px; font-weight: 750; color: var(--ink); letter-spacing: .5px; white-space: nowrap;
}
.friend-links .fl-hd::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--c-primary);
}
.friend-links .fl-list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.friend-links .fl-list a {
  font-size: 13px; line-height: 1.5; color: var(--c-text-2); white-space: nowrap;
  padding: 4px 12px; border: 1px solid var(--line-warm-2); border-radius: 14px;
  background: var(--paper); transition: color .18s, border-color .18s, background .18s;
}
.friend-links .fl-list a:hover {
  color: var(--c-primary-dark); border-color: var(--c-primary); background: var(--c-primary-soft);
}

/* ══════════ 首页：侧栏 ══════════ */
.side { display: flex; flex-direction: column; gap: 26px; }

/* 投票卡 */
.vote-card { background: #fff; border: 1px solid var(--line-warm); border-radius: var(--radius); overflow: hidden; }
.vote-hd { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line-warm-2); }
.vote-hd .ic { width: 22px; height: 22px; border-radius: 6px; background: var(--c-primary); display: grid; place-items: center; flex: none; }
.vote-hd .ic svg { width: 13px; height: 13px; fill: #fff; }
.vote-hd b { font-size: 14px; font-weight: 750; }
.vote-hd .tot { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vote-bd { padding: 14px 16px 16px; }
.vote-q { font-size: 14.5px; font-weight: 650; line-height: 1.5; margin: 0 0 13px; }
.opt { margin-bottom: 11px; cursor: pointer; display: block; }
.opt .lab { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; margin-bottom: 5px; }
.opt input[type="radio"] { appearance: none; -webkit-appearance: none; width: 13px; height: 13px; margin: 0;
  border: 1.5px solid #c9ccd4; border-radius: 50%; flex: none; cursor: pointer; transition: .18s; position: relative; top: 1px; }
.opt:hover input[type="radio"] { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(255, 92, 26, .12); }
.opt input[type="radio"]:checked { border-color: var(--c-primary); background: var(--c-primary); box-shadow: inset 0 0 0 2px #fff; }
.opt .lab .txt { flex: 1; }
.opt .lab .pct { margin-left: auto; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.opt .bar { display: block; height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.opt .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff8a4c, var(--c-primary)); }
.opt.lead-opt .bar i { background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark)); }
.opt.lead-opt .lab .pct { color: var(--c-primary-dark); }
/* 投票结果态：静态页提交后就地更新，禁用重复操作 */
.vote-msg { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: #2e7d32; }
.vote-msg.err { color: #c62828; }
.vote-bd.voted .opt { cursor: default; }
.vote-bd.voted .opt input[type="radio"]:disabled { opacity: .55; }
.vote-bd.voted .opt:hover input[type="radio"]:not(:checked) { border-color: #c9ccd4; box-shadow: none; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary:disabled:hover { background: var(--ink); }
.vote-ft { display: flex; gap: 8px; margin-top: 14px; }
.btn { flex: 1; border: 0; border-radius: 6px; padding: 9px 0; font-size: 13.5px; font-weight: 700;
  cursor: pointer; font-family: var(--font); text-align: center; display: block; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--c-primary); color: #fff; }
.btn-ghost { background: var(--paper-2); color: var(--ink-2); }
.btn-ghost:hover { color: var(--c-primary-dark); }

/* 广告位 */
.ad-slot { border: 1px dashed #cfcabd; border-radius: var(--radius); display: grid; place-items: center;
  text-align: center; padding: 26px 16px; color: #8d8677;
  background: repeating-linear-gradient(45deg, #f6f4ef 0 9px, #f1eee7 9px 18px); }
.ad-slot .t { font-size: 12.5px; font-weight: 800; letter-spacing: 2.5px; }
.ad-slot .s { font-size: 11px; margin-top: 5px; opacity: .8; font-variant-numeric: tabular-nums; }
.ad-tall { height: 250px; }
.ad-wide { height: 96px; margin: 0 0 34px; }

/* 热榜 */
.rank { background: #fff; border: 1px solid var(--line-warm); border-radius: var(--radius); padding: 14px 16px 8px; }
.rank-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.rank-hd h3 { font-size: 14px; margin: 0; font-weight: 750; display: flex; align-items: center; gap: 7px; }
.rank-hd h3 .fire { color: var(--c-primary); font-size: 11px; }
/* 本周 / 总榜 切换 */
.rank-tabs { margin-left: auto; display: flex; gap: 2px; padding: 2px; border-radius: 14px; background: var(--paper-2); }
.rank-tabs button {
  border: 0; background: transparent; font: inherit; font-size: 12px; line-height: 1.5;
  color: var(--ink-3); padding: 3px 10px; border-radius: 12px; cursor: pointer; transition: .18s;
}
.rank-tabs button:hover { color: var(--ink-2); }
.rank-tabs button.on { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(21, 24, 29, .09); }

.rank-list { display: none; }
.rank-list.on { display: block; }
.rank ol { margin: 0; padding: 0; list-style: none; counter-reset: rk; }
.rank li { counter-increment: rk; display: flex; gap: 11px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line-warm-2); }
.rank li:last-child { border-bottom: 0; }
.rank li::before { content: counter(rk); flex: none; width: 18px; font-size: 12.5px; font-weight: 800;
  color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rank li:nth-child(-n+3)::before { color: var(--c-primary); }
.rank li a { font-size: 13.5px; line-height: 1.55; transition: .2s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rank li a:hover { color: var(--c-primary-dark); }

/* ══════════ 文档详情页 ══════════ */
.doc-page { padding: 26px 32px 34px; }
@media (max-width: 600px) { .doc-page { padding: 20px 18px; } }
.doc-page h1.title { margin: 0 0 14px; font-size: 27px; line-height: 1.45; font-weight: 800; letter-spacing: -.4px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-2);
  padding-bottom: 16px; border-bottom: 1px solid var(--line-warm-2); margin-bottom: 22px; }
.doc-body { font-size: 16.5px; line-height: 1.95; word-break: break-word; }
.doc-body img { border-radius: 8px; margin: 12px 0; }
.doc-body p { margin: 0 0 1.2em; }
.doc-body h2, .doc-body h3 { margin: 1.5em 0 .6em; font-weight: 750; }
.doc-pager { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
.doc-pager a, .doc-pager span {
  min-width: 38px; text-align: center; padding: 6px 14px; border: 1px solid var(--line-warm);
  border-radius: 7px; font-size: 13px; line-height: 1.4;
}
.doc-pager a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.doc-pager span.cur { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700; }
.pn-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.pn-nav a { border: 1px solid var(--line-warm); border-radius: 9px; padding: 12px 16px; font-size: 13.5px; line-height: 1.6; transition: .2s; }
.pn-nav a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pn-nav .lab { display: block; color: var(--ink-3); font-size: 12px; margin-bottom: 4px; }

/* ══════════ 分页 ══════════ */
.pager { display: flex; gap: 6px; flex-wrap: wrap; padding: 18px 22px; }
.pager a, .pager span { padding: 5px 13px; border-radius: 7px; font-size: 13px; border: 1px solid var(--line-warm); color: var(--c-text); }
.pager span.cur { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pager a:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ══════════ 相关推荐 ══════════ */
/* 相关推荐：默认单列（它挂在 336px 侧栏里，两列会把标题挤断） */
.rel-grid { display: grid; grid-template-columns: 1fr; gap: 0; padding: 6px 0 4px; }
.rel-grid a { display: flex; gap: 8px; align-items: baseline; padding: 8px 0; font-size: 13.5px; line-height: 1.55;
  border-bottom: 1px dashed var(--line-warm-2); }
.rel-grid a:last-child { border-bottom: 0; }
.rel-grid a::before { content: "▪"; color: var(--c-primary); font-size: 11px; flex: none; }
.rel-grid a span.t { flex: 1; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rel-grid a time { flex: none; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* 放在正文下方的宽容器时恢复两列 */
.rel-grid.wide { grid-template-columns: 1fr 1fr; gap: 0 24px; }
.rel-empty { font-size: 13px; color: var(--ink-3); padding: 10px 0; }

/* ══════════ 站点地图 ══════════ */
/* ══════════ 网站地图（data/sitemap.html） ══════════ */
.map-page { padding: 28px 0 18px; }
.map-hd { padding-bottom: 15px; border-bottom: 2px solid var(--ink); }
.map-hd h1 {
  display: flex; align-items: center; gap: 10px;
  font-size: 25px; line-height: 1.2; margin: 0; font-weight: 800; letter-spacing: .4px; color: var(--ink);
}
.map-hd h1::before {
  content: ""; flex: none; width: 4px; height: 21px; border-radius: 2px; background: var(--c-primary);
}
.map-sub { margin: 9px 0 0; font-size: 13px; color: var(--ink-3); }
.map-sub b { color: var(--c-primary-dark); font-variant-numeric: tabular-nums; font-weight: 750; }

/* 栏目芯片索引 */
.map-index {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 0 12px; margin-bottom: 4px;
  position: sticky; top: 58px; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line-warm-2);
}
.map-index a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; font-size: 13px; color: var(--c-text-2);
  background: #fff; border: 1px solid var(--line-warm); border-radius: 20px;
  transition: color .18s, border-color .18s, background .18s;
}
.map-index a:hover { color: var(--c-primary-dark); border-color: var(--c-primary); background: var(--c-primary-soft); }

/* 栏目区块 */
.map-channel { padding: 22px 0 10px; border-bottom: 1px dashed var(--line-warm-2); scroll-margin-top: 142px; }
.map-channel:last-child { border-bottom: 0; }
.map-channel h2 {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 8px; font-size: 16.5px; font-weight: 750; line-height: 1.4;
}
.map-channel h2 > a:first-child { color: var(--ink); }
.map-channel h2 > a:first-child:hover { color: var(--c-primary); }
.map-channel .all { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.map-channel .all:hover { color: var(--c-primary); }

/* 两列：中间虚线分隔，让"标题 + 日期"成组可读 */
.map-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.map-list li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: 13.5px; line-height: 1.55; }
.map-list li:nth-child(odd) { padding-right: 30px; }
.map-list li:nth-child(even) { padding-left: 30px; border-left: 1px solid var(--line-warm); }
.map-list li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
.map-list li a:hover { color: var(--c-primary); }
.map-list li time { flex: none; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ══════════ 页脚 ══════════ */
.site-footer { background: var(--ink); color: #8f97a5; padding: 30px 0; margin-top: 24px; font-size: 13px; }
.site-footer a { color: #b8c0cd; }
.site-footer a:hover { color: #fff; }
.site-footer .links { margin-bottom: 9px; display: flex; flex-wrap: wrap; gap: 14px; }
.site-footer .foot-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  color: #7c8492; font-size: 12.5px; line-height: 1.8;
}
.site-footer .foot-line .beian { color: #8f97a5; }
.site-footer .foot-line .beian:hover { color: #fff; }
.site-footer .foot-line .powerby { color: #7c8492; }
.site-footer .foot-line .powerby a { color: #98a0ae; }
.site-footer .foot-line .powerby a:hover { color: var(--c-primary); }

/* ══════════ 杂项 ══════════ */
.badge-cat { display: inline-block; font-size: 12px; color: var(--c-primary); background: var(--c-primary-soft); border-radius: 5px; padding: 1px 8px; }
.simple-list { list-style: none; margin: 0; padding: 0; }
.simple-list li { padding: 7px 0; border-bottom: 1px dashed var(--line-warm-2); display: flex; gap: 8px; align-items: baseline; }
.simple-list li:last-child { border-bottom: 0; }
.simple-list li::before { content: "▪"; color: var(--c-primary); font-size: 11px; }
.simple-list li a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.simple-list li time { font-size: 12px; color: var(--ink-3); }

/* ══════════ 响应式 ══════════ */
@media (max-width: 1024px) {
  .home .hero { grid-template-columns: 1fr; }
  .g-grid { grid-template-columns: repeat(3, 1fr); }
  .home .picks { grid-template-columns: 1fr 1fr; }
  .ch-panel { grid-template-columns: 1fr; }
  .lead { min-height: 380px; }
}
@media (max-width: 720px) {
  .container { padding: 0 16px; }
  .site-header .bar { gap: 12px; height: auto; padding: 10px 0; flex-wrap: wrap; }
  .main-nav { order: 3; width: 100%; }
  .search-box { margin-left: auto; }
  .home .picks { grid-template-columns: 1fr; }
  .feed-list .row { grid-template-columns: 66px 1fr; }
  .feed-list .thumb { display: none; }
  .friend-links { flex-direction: column; gap: 10px; padding: 16px 18px; }
  .g-grid { grid-template-columns: repeat(2, 1fr); }
  .lead h1 { font-size: 22px; }
  .lead .wm { display: none; }
  .map-list { grid-template-columns: 1fr; }
  .map-list li:nth-child(odd) { padding-right: 0; }
  .map-list li:nth-child(even) { padding-left: 0; border-left: 0; }
  .rel-grid { grid-template-columns: 1fr; }
}