/* qq234 前台 site.css v7 — 极光氛围 + 搜索首屏 + 精修卡片 + 列表页 v2，亮暗双主题 */
:root {
  --bg: #f5f6f8; --bg-card: #ffffff; --bg-soft: #eef0f3;
  --line: #e5e7eb; --line-strong: #d1d5db;
  --t1: #111827; --t2: #4b5563; --t3: #9ca3af;
  --accent: #2563eb; --accent-2: #7c3aed; --accent-soft: #eef4ff;
  --rose: #f43f5e; --gold: #f59e0b;
  --radius: 18px; --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(17,24,39,.05);
  --shadow: 0 1px 3px rgba(17,24,39,.05), 0 8px 24px rgba(17,24,39,.06);
  --shadow-lg: 0 4px 8px rgba(17,24,39,.06), 0 20px 44px rgba(17,24,39,.13);
  --nav-bg: rgba(255,255,255,.72);
}
[data-theme="dark"] {
  --bg: #0b0d12; --bg-card: #14161c; --bg-soft: #1c1f27;
  --line: #23262f; --line-strong: #363a46;
  --t1: #f3f4f6; --t2: #9ca3af; --t3: #6b7280;
  --accent: #60a5fa; --accent-2: #a78bfa; --accent-soft: #17233d;
  --rose: #fb7185;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.55);
  --nav-bg: rgba(11,13,18,.66);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:var(--bg); color:var(--t1); line-height:1.6;
  -webkit-font-smoothing:antialiased; position:relative; min-height:100vh;
}
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(560px 300px at 12% -4%, rgba(37,99,235,.14), transparent 65%),
    radial-gradient(620px 320px at 88% -6%, rgba(124,58,237,.10), transparent 65%),
    radial-gradient(500px 260px at 50% 118%, rgba(37,99,235,.06), transparent 60%);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(560px 300px at 12% -4%, rgba(96,165,250,.10), transparent 65%),
    radial-gradient(620px 320px at 88% -6%, rgba(167,139,250,.08), transparent 65%),
    radial-gradient(500px 260px at 50% 118%, rgba(96,165,250,.05), transparent 60%);
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ============ 玻璃导航 ============ */
.nav { position:sticky; top:0; z-index:100; background:var(--nav-bg); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; gap:20px; height:66px; }
.logo { display:flex; align-items:center; flex-shrink:0; }
.logo img { height:36px; }
.nav-links { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.nav-links::-webkit-scrollbar { display:none; }
.nav-links a { padding:7px 14px; border-radius:999px; font-size:14px; font-weight:500; color:var(--t2); white-space:nowrap; transition:.18s; }
.nav-links a:hover { color:var(--t1); background:var(--bg-soft); }
.nav-links a.on { color:var(--accent); background:var(--accent-soft); font-weight:650; }
.nav-search { flex:1; max-width:320px; margin-left:auto; position:relative; }
.nav-search input { width:100%; height:40px; border:1px solid var(--line); border-radius:999px; background:var(--bg-card); color:var(--t1); padding:0 16px 0 40px; font-size:13.5px; outline:none; transition:.2s; }
.nav-search input:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.nav-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--t3); }
.theme-btn { width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:var(--bg-card); cursor:pointer; color:var(--t2); font-size:16px; flex-shrink:0; transition:.2s; }
.theme-btn:hover { border-color:var(--accent); color:var(--accent); transform:rotate(20deg); }

/* ============ 趋势词带 ============ */
.trend { position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg-card); }
.trend::before, .trend::after { content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; }
.trend::before { left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.trend::after { right:0; background:linear-gradient(-90deg, var(--bg), transparent); }
.trend-track { display:flex; gap:10px; width:max-content; padding:9px 0; animation:marquee 55s linear infinite; }
.trend:hover .trend-track { animation-play-state:paused; }
.trend-track .chip { display:inline-flex; align-items:center; gap:7px; padding:6px 18px; background:var(--bg-soft); border:1px solid transparent; border-radius:999px; font-size:13.5px; color:var(--t2); white-space:nowrap; transition:.18s; }
.trend-track .chip:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.trend-track .chip i { font-style:normal; color:var(--rose); font-size:12px; }
@keyframes marquee { to { transform:translateX(calc(-50% - 5px)); } }

/* ============ 搜索首屏 ============ */
.hero { padding:52px 0 30px; text-align:center; position:relative; }
/* hero 与下方列表的过渡: 渐隐分隔线 */
.hero::after {
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(620px, 76%); height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.hero .kicker { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); padding:5px 14px; border-radius:999px; margin-bottom:18px; }
.hero .kicker .dot { width:6px; height:6px; border-radius:99px; background:var(--accent); animation:blink 2.4s ease infinite; }
@keyframes blink { 50% { opacity:.35; } }
.hero h1 { font-size:clamp(30px, 4.6vw, 46px); font-weight:900; letter-spacing:-1.5px; line-height:1.18; }
.hero h1 em { font-style:normal; background:linear-gradient(110deg, var(--accent) 10%, var(--accent-2) 90%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub { margin-top:12px; font-size:15px; color:var(--t3); }
.hero-sub b { color:var(--t2); font-weight:700; font-variant-numeric:tabular-nums; }
.hero-search { max-width:620px; margin:26px auto 0; position:relative; }
.hero-search input { width:100%; height:58px; border:1.5px solid var(--line-strong); border-radius:18px; background:var(--bg-card); color:var(--t1); padding:0 122px 0 24px; font-size:15.5px; outline:none; transition:.25s; box-shadow:var(--shadow); }
.hero-search input::placeholder { color:var(--t3); }
.hero-search input:focus { border-color:var(--accent); box-shadow:0 0 0 5px var(--accent-soft), var(--shadow); }
.hero-search button { position:absolute; right:7px; top:7px; height:44px; padding:0 26px; border:none; border-radius:13px; background:linear-gradient(120deg, var(--accent), var(--accent-2)); color:#fff; font-size:14.5px; font-weight:700; cursor:pointer; transition:.18s; box-shadow:0 4px 14px rgba(37,99,235,.35); }
.hero-search button:hover { filter:brightness(1.07); transform:translateY(-1px); }
.hero-search button:active { transform:scale(.97); }
.hero-tags { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.hero-tags a { padding:7px 16px; border-radius:999px; background:var(--bg-card); border:1px solid var(--line); font-size:13px; color:var(--t2); transition:.18s; box-shadow:var(--shadow-sm); }
.hero-tags a:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }

/* ============ 区块头 ============ */
.sec-head { display:flex; align-items:center; justify-content:space-between; margin:30px 0 15px; }
.sec-head h2 { font-size:23px; font-weight:800; letter-spacing:-.6px; display:flex; align-items:center; gap:12px; }
.sec-head h2 .bar { width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent); }
.sec-head h2 .bar::before { content:"✦"; font-size:13px; color:#fff; }
.sec-head .cnt { font-size:12.5px; color:var(--t3); font-weight:500; }
.sec-more { font-size:13.5px; color:var(--t3); font-weight:500; transition:.15s; }
.sec-more:hover { color:var(--accent); }

/* ============ 主布局 ============ */
.layout { display:grid; grid-template-columns:minmax(0,1fr) 308px; gap:26px; align-items:start; padding-bottom:10px; }
main, .hscroll, .a-card { min-width:0; }
aside.side { position:sticky; top:86px; display:flex; flex-direction:column; gap:16px; }

/* ============ 文章卡 ============ */
.card-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.a-card { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s; opacity:0; transform:translateY(18px); }
.a-card.in { animation:rise .55s cubic-bezier(.16,1,.3,1) forwards; }
.a-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }
.a-card .pic { aspect-ratio:16/9.6; background:linear-gradient(130deg, var(--bg-soft), var(--accent-soft)); position:relative; overflow:hidden; }
.a-card .pic img { width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.a-card:hover .pic img { transform:scale(1.05); }
.a-card .body { padding:12px 15px 13px; }
.a-card h3 { font-size:14.5px; font-weight:650; line-height:1.45; letter-spacing:-.2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:42px; }
.a-card h3 a { transition:.15s; }
.a-card h3 a:hover { color:var(--accent); }
.a-card .meta { display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12px; color:var(--t3); }
.a-card .meta .cat { color:var(--accent); background:var(--accent-soft); padding:3px 10px; border-radius:999px; font-weight:500; }
.a-card .meta .views { margin-left:auto; }
@keyframes rise { to { opacity:1; transform:translateY(0); } }

/* ============ 文字主体文章卡（展示位：左图位 + 网名视觉，预留缩略图位） ============ */
.a-card .showcase {
  position:relative; display:flex; align-items:center; justify-content:flex-start; gap:16px;
  height:118px; overflow:hidden; padding:0 20px;
  background:
    radial-gradient(150px 100px at 88% -12%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(180px 120px at -8% 115%, rgba(109,40,217,.50), transparent 72%),
    linear-gradient(120deg, #2563eb 0%, #7c3aed 100%);
}
.a-card .sc-pic { position:relative; z-index:1; flex-shrink:0; width:86px; height:86px; border-radius:12px; overflow:hidden; }
.a-card .sc-pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.a-card:hover .sc-pic img { transform:scale(1.06); }
.a-card .sc-pic .ph {
  display:flex; align-items:center; justify-content:center; height:100%;
  border:1.5px dashed rgba(255,255,255,.45); border-radius:12px;
  font-size:12px; color:rgba(255,255,255,.75); background:rgba(255,255,255,.10);
}
.a-card .sc-txt { position:relative; z-index:1; flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; }
.a-card .sc-name {
  max-width:100%;
  font-size:clamp(17px, 1.5vw, 21px); font-weight:800; letter-spacing:-.2px;
  color:#fff; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 2px 12px rgba(30,58,138,.35);
  transition:transform .32s cubic-bezier(.16,1,.3,1), text-shadow .32s;
}
.a-card:hover .sc-name { transform:scale(1.07); text-shadow:0 4px 18px rgba(30,58,138,.5); }
.a-card .sc-star {
  position:relative; z-index:1; flex-shrink:0;
  color:#fde68a; font-size:13px; letter-spacing:1px;
  text-shadow:0 1px 6px rgba(30,58,138,.4);
}
.a-card .sc-fire {
  position:absolute; z-index:2; top:10px; right:11px;
  font-size:10px; font-weight:800; letter-spacing:1.5px; color:#fff;
  background:linear-gradient(120deg, var(--rose), #f97316);
  padding:3px 9px; border-radius:999px;
  box-shadow:0 3px 12px rgba(244,63,94,.5);
  animation:firePulse 2.6s ease-in-out infinite;
}
@keyframes firePulse { 50% { transform:scale(1.07); box-shadow:0 4px 18px rgba(244,63,94,.7); } }

/* ============ 列表页图文卡（白底横排大卡：左虚线图位 + 标题/网名/信息） ============ */
.w-grid { display:grid; grid-template-columns:1fr; gap:14px; padding-top:14px; }
.w-card { display:flex; gap:18px; padding:18px; }
.w-card .w-pic { position:relative; flex-shrink:0; width:186px; height:128px; border-radius:14px; overflow:hidden; background:var(--bg-soft); align-self:center; }
.w-card .w-pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.w-card:hover .w-pic img { transform:scale(1.06); }
.w-card .w-pic .ph { display:flex; align-items:center; justify-content:center; height:100%; border:1.5px dashed var(--line-strong); border-radius:14px; font-size:13px; color:var(--t3); }
.w-card .w-body { flex:1; min-width:0; display:flex; flex-direction:column; padding:2px 0; }
.w-card h3 { min-height:0; font-size:17.5px; line-height:1.5; letter-spacing:-.3px; }
.w-card h3 a { transition:.15s; }
.w-card .w-names { display:flex; flex-wrap:nowrap; gap:8px; margin-top:0; padding-top:12px; overflow:hidden; }
.w-card .w-names .w-name { display:inline-flex; align-items:center; max-width:100%; padding:5px 13px;
  background:var(--bg-soft); border-radius:999px; font-size:13px; font-weight:600; color:var(--t2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.15s; }
.w-card .w-names .w-name.main { background:var(--accent-soft); color:var(--accent); }
.w-card .w-names .w-name { cursor:pointer; }
.w-card .w-names .w-name:hover { color:var(--accent); }
.w-card .w-names .w-name.main:hover { background:var(--accent); color:#fff; }
.w-card .w-names .w-name i { font-style:normal; color:var(--gold); margin-right:6px; font-size:12px; }

/* "已复制"角标:fixed 定位,由 JS 按词组位置摆放 */
.copy-tip { position:fixed; z-index:300; pointer-events:none; white-space:nowrap;
  background:#10b981; color:#fff; font-size:11.5px; font-weight:600; line-height:1;
  padding:5px 9px; border-radius:999px; box-shadow:0 3px 10px rgba(16,185,129,.45);
  opacity:0; transform:translateY(5px) scale(.9); transition:.18s cubic-bezier(.16,1,.3,1); }
.copy-tip.show { opacity:1; transform:translateY(0) scale(1); }
.w-card .w-names .w-name.copied { background:#10b981; color:#fff; }
.w-card .w-names .w-name.copied i { color:#fff; }

.w-card .w-desc { margin-top:8px; font-size:13.5px; color:var(--t2); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.w-card .meta { margin-top:auto; padding-top:12px; font-size:12.5px; }

/* ============ 头像图集卡（主图 + 四联小图条 + 张数角标,3 列网格） ============ */
.g-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; padding:14px 0 6px; }
.g-card {
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
  opacity:0; transform:translateY(16px);
}
.g-card.in { animation:rise .5s cubic-bezier(.16,1,.3,1) forwards; }
.g-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow:var(--shadow-lg); }
.g-card .g-cover { position:relative; display:block; aspect-ratio:4/3; background:var(--bg-soft); overflow:hidden; }
.g-card .g-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.g-card:hover .g-cover img { transform:scale(1.06); }
.g-card .g-cover .ph { position:absolute; inset:12px; display:flex; align-items:center; justify-content:center;
  border:1.5px dashed var(--line-strong); border-radius:10px; font-size:13px; color:var(--t3); }
.g-card .g-cover .g-cnt { position:absolute; right:10px; bottom:10px; z-index:2;
  background:rgba(9,9,11,.6); color:#fff; font-size:11.5px; font-weight:600;
  padding:3px 10px; border-radius:999px; backdrop-filter:blur(4px); }
.g-card .g-thumbs { display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; padding:2px 0 0; }
.g-card .g-thumbs .g-t { aspect-ratio:1; overflow:hidden; background:var(--bg-soft); }
.g-card .g-thumbs .g-t img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.g-card:hover .g-thumbs .g-t img { transform:scale(1.08); }
.g-card .g-body { padding:12px 15px 14px; }
.g-card .g-body h3 { font-size:15px; font-weight:650; line-height:1.5; letter-spacing:-.2px; color:var(--t1);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.g-card:hover .g-body h3 { color:var(--accent); }
.g-card .g-body .meta { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12px; color:var(--t3); }
.g-card .g-body .meta .cat { color:var(--accent); background:var(--accent-soft); padding:2px 9px; border-radius:999px; font-weight:500; }
.g-card .g-body .meta .views { margin-left:auto; }
@media (max-width: 640px) {
  .w-card { gap:13px; padding:14px; }
  .w-card .w-pic { width:112px; height:84px; border-radius:10px; }
  .w-card .w-pic .ph { border-radius:10px; font-size:11px; }
  .w-card h3 { font-size:15.5px; }
  .w-card .w-name { font-size:13.5px; margin-top:7px; }
}

/* ============ 侧栏 ============ */
.widget { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); }
.widget h4 { font-size:15px; font-weight:750; letter-spacing:-.2px; margin-bottom:16px; display:flex; align-items:center; gap:9px; }
.widget h4::before { content:"✦"; width:20px; height:20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cat-list { display:flex; flex-direction:column; gap:3px; }
.cat-list a { display:flex; justify-content:space-between; align-items:center; padding:8.5px 12px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; color:var(--t2); transition:.15s; }
.cat-list a:hover, .cat-list a.on { background:var(--accent-soft); color:var(--accent); transform:translateX(3px); }
.cat-list a i { font-style:normal; font-size:11.5px; color:var(--t3); font-variant-numeric:tabular-nums; background:var(--bg-soft); padding:2px 8px; border-radius:999px; }
.rank { display:flex; flex-direction:column; gap:4px; }
.rank a { display:flex; gap:12px; align-items:center; padding:7px 8px; border-radius:var(--radius-sm); transition:.15s; }
.rank a:hover { background:var(--bg-soft); }
.rank .no { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; font-style:italic; color:var(--t3); background:var(--bg-soft); flex-shrink:0; font-variant-numeric:tabular-nums; }
.rank a:nth-child(1) .no { background:linear-gradient(135deg,#f59e0b,#f97316); color:#fff; }
.rank a:nth-child(2) .no { background:linear-gradient(135deg,#94a3b8,#64748b); color:#fff; }
.rank a:nth-child(3) .no { background:linear-gradient(135deg,#d97706,#b45309); color:#fff; }
.rank .t { font-size:13.5px; color:var(--t2); font-weight:500; line-height:1.4; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.rank a:hover .t { color:var(--accent); }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag-cloud a { font-size:12.5px; font-weight:500; padding:5px 13px; border-radius:999px; background:var(--bg-soft); color:var(--t2); transition:.15s; }
.tag-cloud a:hover { background:linear-gradient(120deg, var(--accent), var(--accent-2)); color:#fff; transform:translateY(-2px); }

/* ============ 侧栏头像小列表 ============ */
.av-rank a { padding:6px; gap:10px; align-items:center; }
.av-rank .athumb { width:52px; height:52px; border-radius:10px; overflow:hidden; flex-shrink:0; background:var(--bg-soft); }
.av-rank .athumb img { width:100%; height:100%; object-fit:cover; }
.av-rank .athumb .ph { display:flex; align-items:center; justify-content:center; height:100%; font-size:10px; color:var(--t3); }
.av-rank .t { display:flex; flex-direction:column; gap:3px; min-width:0; }
.av-rank .tt { font-size:13px; color:var(--t2); font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.av-rank a:hover .tt { color:var(--accent); }
.av-rank .meta-line { font-size:11px; color:var(--t3); font-variant-numeric:tabular-nums; }

/* ============ 头像横向卡带 ============ */
.hscroll { display:flex; gap:15px; overflow-x:auto; padding:6px 2px 16px; scroll-snap-type:x mandatory; }
.hscroll::-webkit-scrollbar { height:7px; }
.hscroll::-webkit-scrollbar-track { background:var(--bg-soft); border-radius:4px; }
.hscroll::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:4px; }
.hscroll::-webkit-scrollbar-thumb:hover { background:var(--accent); }
.v-card { flex:0 0 176px; scroll-snap-align:start; background:var(--bg-card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.v-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.v-card .pic { aspect-ratio:1; background:linear-gradient(130deg, var(--bg-soft), var(--accent-soft)); }
.v-card .pic img { width:100%; height:100%; object-fit:cover; }
.v-card .pic .ph { display:flex; align-items:center; justify-content:center; height:100%; color:var(--t3); font-size:12px; }
.v-card .t { padding:10px 12px 0; font-size:13px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-card:hover .t { color:var(--accent); }
.v-card .vm { display:block; padding:2px 12px 12px; font-size:11.5px; color:var(--t3); }

/* ============ 标签墙(整齐网格 + 右上角总数角标) ============ */
.tagwall { display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:14px 10px; padding-bottom:6px; }
.tagwall a { position:relative; display:flex; align-items:center; min-height:46px; padding:9px 13px;
  border-radius:12px; border:1px solid var(--line); background:var(--bg-card); color:var(--t2);
  font-size:13.5px; font-weight:500; transition:.18s; box-shadow:var(--shadow-sm); }
.tagwall a b { font-weight:600; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s; }
.tagwall a span {
  position:absolute; top:-8px; right:-5px;
  min-width:18px; padding:1px 6px; border-radius:999px;
  background:var(--bg-soft); color:var(--t3); border:1px solid var(--line);
  font-size:10px; font-weight:600; line-height:1.5; text-align:center;
  font-variant-numeric:tabular-nums;
}
.tagwall a:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); transform:translateY(-2px); box-shadow:var(--shadow); }
.tagwall a:hover b { color:var(--accent); }
.tagwall a:hover span { background:var(--accent-soft); color:var(--accent); border-color:transparent; }

/* ============ 面包屑 / 回答块 / 空态（全站共用，自 detail.css 上移） ============ */
.crumb { padding:16px 0 14px; font-size:13px; color:var(--t3); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.crumb a:hover { color:var(--accent); }
.crumb i { font-style:normal; color:var(--t3); }
.crumb span { color:var(--t2); }
.answer {
  margin:14px 0 4px; padding:14px 18px;
  background:linear-gradient(120deg, var(--accent-soft), transparent 70%);
  border-left:4px solid; border-image:linear-gradient(180deg, var(--accent), var(--accent-2)) 1;
  border-radius:0 12px 12px 0;
  font-size:14.5px; color:var(--t2); line-height:1.8;
}
.n-empty { text-align:center; color:var(--t3); padding:40px 0; }
.toast { position:fixed; left:50%; bottom:42px; transform:translateX(-50%) translateY(16px); background:var(--t1); color:var(--bg-card);
  font-size:13.5px; padding:10px 22px; border-radius:999px; opacity:0; transition:.3s; z-index:200; pointer-events:none; box-shadow:var(--shadow-lg); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ============ 前台分页（全站共用，自 detail.css 上移） ============ */
.pagebar { background:transparent; padding:16px 0 6px; }
.pagination { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; list-style:none; padding:0; margin:0; font-size:0; }
.pagination li { display:inline-block; font-size:13px; }
.pagination li > a, .pagination li > span {
  display:inline-block; min-width:34px; height:32px; line-height:32px; padding:0 10px;
  text-align:center; background:var(--bg-card); border:1px solid var(--line); border-radius:8px;
  color:var(--t2); text-decoration:none; transition:all .15s; font-variant-numeric:tabular-nums;
}
.pagination li > a:hover { border-color:var(--accent); color:var(--accent); }
.pagination li.active > span { background:var(--accent); border-color:var(--accent); color:#fff; }
.pagination li.disabled > span { background:var(--bg-soft); border-color:var(--line); color:var(--t3); cursor:not-allowed; }

/* ============ 列表页 v2（网名/搜索结果卡片：轻量高密度，与终端页深卡区分） ============ */
.page-head { padding:10px 0 4px; }
.page-head h1 { font-size:clamp(24px, 3vw, 32px); font-weight:900; letter-spacing:-.8px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.page-head h1 .ph-count { font-size:13px; font-weight:600; color:var(--t3); letter-spacing:0; }
.page-desc { margin-top:8px; font-size:14px; color:var(--t2); line-height:1.8; max-width:860px; }

.l-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px; padding:18px 0 6px; }
.l-card {
  position:relative; display:flex; flex-direction:column; gap:12px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px 14px; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
  opacity:0; transform:translateY(16px);
}
.l-card.in { animation:rise .5s cubic-bezier(.16,1,.3,1) forwards; }
.l-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); opacity:0; transition:opacity .25s; }
.l-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow:var(--shadow); }
.l-card:hover::before { opacity:1; }
.l-title { font-size:15.5px; font-weight:700; line-height:1.5; letter-spacing:-.2px; color:var(--t1);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.l-card:hover .l-title { color:var(--accent); }
.l-names { display:flex; flex-wrap:wrap; gap:8px; }
.l-name { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:6px 13px;
  background:var(--bg-soft); border-radius:999px; font-size:13px; font-weight:600; color:var(--t2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.15s; }
.l-name.main { background:var(--accent-soft); color:var(--accent); }
.l-name i { font-style:normal; color:var(--gold); font-size:11px; flex-shrink:0; }
.l-card:hover .l-name.main { background:var(--accent); color:#fff; }
.l-meta { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:10px;
  border-top:1px dashed var(--line); font-size:12px; color:var(--t3); font-variant-numeric:tabular-nums; }
.l-meta .l-cat { color:var(--accent); background:var(--accent-soft); padding:2px 9px; border-radius:999px; font-weight:500; }
.l-go { margin-left:auto; color:var(--accent); font-weight:600; white-space:nowrap;
  opacity:0; transform:translateX(-6px); transition:.25s; }
.l-card:hover .l-go { opacity:1; transform:none; }

/* ============ 列表页无限加载 ============ */
.load-more { text-align:center; padding:24px 0 10px; }
.load-more .lm-btn {
  min-width:180px; height:44px; padding:0 30px;
  border:1px solid var(--line); border-radius:999px; background:var(--bg-card); color:var(--t2);
  font-size:14px; font-weight:600; cursor:pointer; transition:.2s; box-shadow:var(--shadow-sm);
}
.load-more .lm-btn:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow); }
.load-more.loading .lm-btn { opacity:.55; pointer-events:none; }
.load-more.loading .lm-btn::after {
  content:""; display:inline-block; width:12px; height:12px; margin-left:9px; vertical-align:-1px;
  border:2px solid var(--accent); border-top-color:transparent; border-radius:99px;
  animation:lmSpin .7s linear infinite;
}
@keyframes lmSpin { to { transform:rotate(360deg); } }
.load-more .lm-end { font-size:13px; color:var(--t3); }
.load-more.error .lm-btn { border-color:var(--rose); color:var(--rose); }

/* ============ 页脚 ============ */
.footer { border-top:1px solid var(--line); background:var(--bg-card); padding:32px 0 36px; margin-top:28px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.footer .flinks { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--t3); font-weight:500; }
.footer .flinks a:hover { color:var(--accent); }
.footer .copy { font-size:12px; color:var(--t3); }

/* ============ 回到顶部 ============ */
.backtop { position:fixed; right:24px; bottom:28px; width:46px; height:46px; border-radius:999px; border:1px solid var(--line); background:var(--nav-bg); backdrop-filter:blur(14px); color:var(--t2); font-size:17px; cursor:pointer; opacity:0; transform:translateY(8px); pointer-events:none; transition:.28s; z-index:90; box-shadow:var(--shadow); }
.backtop.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.backtop:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ============ 响应式 ============ */
@media (max-width: 1000px) {
  .layout { grid-template-columns:1fr; }
  aside.side { position:static; }
}
@media (max-width: 640px) {
  .card-grid { grid-template-columns:1fr; }
  .hero { padding:40px 0 26px; }
  .l-grid { grid-template-columns:1fr; }
  .l-go { display:none; }
  .g-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .g-card .g-body h3 { font-size:13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .trend-track { animation:none; }
  .a-card { animation:none; opacity:1; transform:none; }
  * { scroll-behavior:auto; transition:none !important; }
}

/* ===== 底部分类导航(头像列表页) ===== */
.cat-nav { margin-top:24px; padding:16px 0; border-top:1px solid #eef1f4; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cat-nav .cn-label { color:#8a94a0; font-size:13px; }
.cat-nav a { display:inline-block; padding:4px 12px; border-radius:14px; background:#f2f5f8; color:#3d4a56; font-size:13px; text-decoration:none; transition:all .15s; }
.cat-nav a em { font-style:normal; color:#9aa5b1; font-size:11px; margin-left:3px; }
.cat-nav a:hover { background:#e8edf2; }
.cat-nav a.on { background:#2c7be5; color:#fff; }
.cat-nav a.on em { color:rgba(255,255,255,.7); }

/* ===== 顶部导航"更多"下拉 ===== */
.nav-links { display:flex; align-items:center; gap:2px; flex-wrap:nowrap; overflow:visible; }
.nav-more { position:relative; display:inline-flex; align-items:center; }
.nav-more-btn { display:inline-flex; align-items:center; gap:3px; padding:6px 10px; font-size:14px; color:var(--nav-link,#5a6572); cursor:pointer; border-radius:4px; white-space:nowrap; transition:color .15s; }
.nav-more-btn svg { transition:transform .15s; }
.nav-more:hover .nav-more-btn { color:var(--nav-link-h,#1e6fd9); }
.nav-more:hover .nav-more-btn svg { transform:rotate(180deg); }
.nav-more-drop { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); background:var(--nav-bg,#fff); border:1px solid #e4e9ef; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:8px; min-width:280px; z-index:100; }
.nav-more-drop::before { content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%) rotate(45deg); width:8px; height:8px; background:var(--nav-bg,#fff); border-left:1px solid #e4e9ef; border-top:1px solid #e4e9ef; }
.nav-more:hover .nav-more-drop { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.nav-more-drop a { display:block; padding:7px 12px; font-size:13px; color:var(--nav-link,#5a6572); text-decoration:none; border-radius:5px; white-space:nowrap; transition:all .12s; }
.nav-more-drop a:hover { background:#f0f5fa; color:var(--nav-link-h,#1e6fd9); }
.nav-more-drop a.on { color:var(--nav-link-h,#1e6fd9); font-weight:600; background:#eaf2fc; }

/* ===== 新版页脚 ===== */
.footer { border-top:1px solid var(--line); background:var(--bg-card); padding:0; margin-top:auto; }
.footer .container { max-width:1200px; margin:0 auto; padding:0 20px; }
.footer-grid { display:grid; grid-template-columns:200px 1fr 1fr 1fr 120px; gap:32px; padding:40px 0 28px; }
@media(max-width:900px){ .footer-grid { grid-template-columns:1fr 1fr; gap:20px; padding:28px 0 20px; } }
@media(max-width:560px){ .footer-grid { grid-template-columns:1fr; } }

.fg-brand { display:flex; flex-direction:column; gap:8px; }
.fg-logo img { display:block; }
.fg-desc { font-size:13px; color:var(--t3); line-height:1.6; margin:0; }
.fg-slogan { font-size:12px; color:var(--t3); opacity:.7; margin:0; }

.fg-col h5 { font-size:13px; font-weight:600; color:var(--t2); margin:0 0 10px; letter-spacing:.5px; }
.fg-links { display:flex; flex-wrap:wrap; gap:4px 14px; }
.fg-links a { font-size:13px; color:var(--t3); text-decoration:none; transition:color .15s; }
.fg-links a:hover { color:var(--accent); }

.footer-bar { border-top:1px solid var(--line); padding:14px 0; display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--t3); }
.footer-bar a { color:var(--t3); text-decoration:none; }
.footer-bar a:hover { color:var(--accent); }
/* 友情链接行(后台「友情链接」维护) */
.flinks-row { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:16px 0 0; font-size:13px; }
.flinks-row .flabel { font-weight:600; color:var(--t2); flex-shrink:0; }
.flinks-row .flinks { display:flex; gap:4px 18px; flex-wrap:wrap; }
.flinks-row .flinks a { color:var(--t3); text-decoration:none; transition:color .15s; }
.flinks-row .flinks a:hover { color:var(--accent); }
.fg-disc { opacity:.6; }

/* 暗色模式 */
[data-theme="dark"] .footer { background:var(--bg-card); }
[data-theme="dark"] .footer-bar { border-color:var(--line); }

/* ===== 首页侧栏栏目: 紧凑两列 ===== */
.cat-compact { display:grid; grid-template-columns:1fr 1fr; gap:3px 6px; }
.cat-compact a { display:flex; justify-content:space-between; align-items:center; padding:4px 8px; font-size:12px; color:var(--t3); text-decoration:none; border-radius:4px; background:var(--bg-main,#f6f8fa); transition:all .12s; }
.cat-compact a:hover { background:var(--bg-hover,#edf1f5); color:var(--accent); }
.cat-compact a i { font-style:normal; font-size:10px; color:var(--t3); opacity:.6; }
.cat-compact a.cat-all { grid-column:1/-1; text-align:center; justify-content:center; background:transparent; border:1px dashed var(--line); color:var(--t3); }

/* ===== 列表页左栏内滚动(不动footer和侧栏) ===== */
main.scroll-main {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c8d0da transparent;
  overscroll-behavior: contain;
  padding-right: 6px;
}
main.scroll-main::-webkit-scrollbar { width: 5px; }
main.scroll-main::-webkit-scrollbar-track { background: transparent; }
main.scroll-main::-webkit-scrollbar-thumb { background: #c8d0da; border-radius: 3px; }
main.scroll-main::-webkit-scrollbar-thumb:hover { background: #a0aab6; }

/* 滚动容器内的加载按钮 */
main.scroll-main .load-more { margin-bottom: 8px; }


/* ===== Footer 始终贴底(窗口大小变化时无空隙) ===== */
body { min-height: 100vh; display: flex; flex-direction: column; }
.nav, .trend { flex-shrink: 0; }
.container { flex: 1; }
.footer { margin-top: auto; flex-shrink: 0; }
.backtop { position: fixed; }

/* ===== 列表页整页视口布局(桌面端):
   header/footer 钉死在视口内, 左列表与右侧栏各自内滚,
   高度由 flex/grid 实时分配, 不再用 calc(100vh-固定值) 魔法数 ===== */
@media (min-width: 1001px) {
  body:has(main.scroll-main) { height: 100vh; overflow: hidden; }
  body:has(main.scroll-main) > .container {
    display: flex; flex-direction: column;
    min-height: 0;
  }
  body:has(main.scroll-main) > .container > .crumb { flex-shrink: 0; }
  body:has(main.scroll-main) > .container > .layout {
    flex: 1; min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  body:has(main.scroll-main) main.scroll-main { max-height: none; min-height: 0; }
  body:has(main.scroll-main) aside.side {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c8d0da transparent;
  }
  body:has(main.scroll-main) aside.side::-webkit-scrollbar { width: 5px; }
  body:has(main.scroll-main) aside.side::-webkit-scrollbar-track { background: transparent; }
  body:has(main.scroll-main) aside.side::-webkit-scrollbar-thumb { background: #c8d0da; border-radius: 3px; }
}

/* ===== 头像图集卡: 桌面端固定 3 列 ===== */
@media (min-width: 1001px) {
  .g-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== 移动端适配(≤1000px 单栏页面):
   1) 左列表不再作为滚动容器(否则 overscroll-behavior:contain 在不可滚时也吞掉滚轮/触摸, 整页滚不动)
   2) 顶部导航换成汉堡菜单: 右上角三条杠, 点击展开全站分类地图(含站内搜索) ===== */
@media (max-width: 1000px) {
  main.scroll-main { overflow: visible; overscroll-behavior: auto; padding-right: 0; }

  .nav .nav-links, .nav .nav-search { display: none; }
  .nav .nav-inner { height: 56px; gap: 10px; }
  .nav .logo img { height: 30px; }
  .nav .theme-btn { margin-left: auto; width: 36px; height: 36px; font-size: 14px; }

  .m-bars {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 36px; height: 36px; padding: 0 8px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--bg-card); cursor: pointer; flex-shrink: 0;
    transition: border-color .15s;
  }
  .m-bars:hover { border-color: var(--accent); }
  .m-bars span { display: block; height: 2px; border-radius: 2px; background: var(--t2); transition: transform .25s, opacity .2s; }
  .m-bars.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .m-bars.open span:nth-child(2) { opacity: 0; }
  .m-bars.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .m-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 99;
  }
  .m-menu.open { display: block; animation: mDrop .22s ease; }
  .m-menu .container { padding-top: 14px; padding-bottom: 16px; }
  .m-menu .m-search { position: relative; }
  .m-menu .m-search input {
    width: 100%; height: 42px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg-soft); color: var(--t1);
    padding: 0 14px 0 38px; font-size: 14px; outline: none; transition: .2s;
  }
  .m-menu .m-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--bg-card); }
  .m-menu .m-search svg { position: absolute; left: 13px; top: 21px; transform: translateY(-50%); color: var(--t3); }

  .m-group { padding: 12px 0 2px; margin-top: 12px; border-top: 1px dashed var(--line); }
  .m-group h5 { font-size: 12.5px; font-weight: 700; color: var(--t3); letter-spacing: 1px; margin: 0 0 10px; }
  .m-links { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
  .m-links a { padding: 7px 14px; border-radius: 999px; background: var(--bg-soft); color: var(--t2); font-size: 13.5px; font-weight: 500; transition: .15s; }
  .m-links a:hover { color: var(--accent); background: var(--accent-soft); }
  .m-links a.on { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; }
}
@keyframes mDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* 桌面端隐藏汉堡入口 */
@media (min-width: 1001px) {
  .m-bars, .m-menu { display: none !important; }
}

/* ===== 手机端(≤640px)细节 ===== */
@media (max-width: 640px) {
  /* 首页搜索框下方的快捷分类入口在手机端隐藏 */
  .hero-tags { display: none; }

  /* 列表卡: 窄屏改为上图下文, 不再左右挤; 网名词组可横滑看全 */
  .w-card { flex-direction: column; gap: 12px; padding: 12px 12px 14px; }
  .w-card .w-pic { width: 100%; height: auto; aspect-ratio: 16 / 9.6; align-self: stretch; border-radius: 10px; }
  .w-card .w-pic .ph { border-radius: 10px; }
  .w-card h3 { font-size: 16.5px; }
  .w-card .w-names {
    margin-top: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overscroll-behavior-x: contain;
    padding-bottom: 2px;
  }
  .w-card .w-names::-webkit-scrollbar { display: none; }
  .w-card .w-desc { margin-top: 10px; -webkit-line-clamp: 3; }

  /* 卡片 meta 太窄时换行更自然 */
  .a-card .meta, .w-card .meta, .g-card .g-body .meta { flex-wrap: wrap; row-gap: 6px; }

  /* 头像列表页底部分类导航: 跟随主题(原为硬编码浅色) */
  .cat-nav .cn-label { color: var(--t3); }
  .cat-nav a { background: var(--bg-soft); color: var(--t2); }
  .cat-nav a:hover { background: var(--accent-soft); color: var(--accent); }
  .cat-nav a.on { background: var(--accent); color: #fff; }
  .cat-nav a.on em { color: rgba(255,255,255,.7); }
  /* 超小屏分类导航横向滑动, 不占纵向空间 */
  .cat-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cat-nav::-webkit-scrollbar { display: none; }
  .cat-nav a { flex-shrink: 0; }

  /* 回到顶部按钮避让 iOS 底部手势区 */
  .backtop { right: 14px; bottom: 20px; width: 42px; height: 42px; }
}

/* ===== 点缀与微交互(品牌色系内) ===== */
/* 配图占位: 图片小图标 + 文字, 让无图状态看起来是刻意的 */
.w-pic .ph, .g-cover .ph, .a-card .pic .ph, .sc-pic .ph, .v-card .pic .ph, .rel-pic .ph {
  flex-direction: column; gap: 7px; font-size: 12px;
}
.w-pic .ph::before, .g-cover .ph::before, .a-card .pic .ph::before,
.sc-pic .ph::before, .v-card .pic .ph::before, .rel-pic .ph::before {
  content: ""; width: 26px; height: 26px; opacity: .75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-4.5-4.5L7 20'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 今日上新角标(复用站内火焰色系统) */
.new-chip {
  position: absolute; z-index: 3; top: 10px; left: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #fff;
  background: linear-gradient(120deg, var(--rose), #f97316);
  padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 3px 12px rgba(244,63,94,.45);
  animation: firePulse 2.6s ease-in-out infinite;
}

/* 区块"查看全部 →"悬停轻移 */
.sec-more { display: inline-flex; align-items: center; transition: transform .2s, color .15s; }
.sec-more:hover { transform: translateX(3px); }

/* 加载更多按钮加下滑箭头 */
.load-more .lm-btn::before { content: "↓"; margin-right: 8px; display: inline-block; transition: transform .2s; }
.load-more .lm-btn:hover::before { transform: translateY(3px); }
.load-more.loading .lm-btn::before { display: none; }

/* 点赞弹跳 */
.like-btn.liked { animation: popLike .35s cubic-bezier(.16,1,.3,1); }
@keyframes popLike { 40% { transform: scale(1.18); } }

/* 榜单序号悬停微放大 */
.rank .no { transition: transform .2s; }
.rank a:hover .no { transform: scale(1.12); }

/* 面包屑首页小房子图标 */
.crumb a:first-of-type { display: inline-flex; align-items: center; gap: 4px; }
.crumb a:first-of-type::before {
  content: ""; width: 12px; height: 12px; background: currentColor; opacity: .65;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 键盘可达性 + 选中文本主题色 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* ===== 精简页脚(列表页/终端页): 一行式, 去掉分类列 ===== */
.footer-mini { display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; padding:12px 0; font-size:12px; color:var(--t3); }
.footer-mini .fg-logo { display:flex; align-items:center; }
.footer-mini .fg-logo img { height:22px; }
.footer-mini > a { color:var(--t3); transition:color .15s; white-space:nowrap; }
.footer-mini > a:hover { color:var(--accent); }
.footer-mini .fm-slogan, .footer-mini .fm-fl, .footer-mini .fm-copy, .footer-mini .fg-disc { white-space:nowrap; }
.footer-mini .fm-fl { opacity:.75; }
.footer-mini .fm-sep { width:1px; height:12px; background:var(--line-strong); flex-shrink:0; }

/* 标签墙「继续加载」按钮行(标签大全页两块共用) */
.wall-more { text-align: center; padding: 2px 0 6px; }
.sec-head + .tagwall + .wall-more { margin-bottom: 6px; }