/* qq234 详情页样式 v2 — 网名卡亮色重设计 + 头像图集，亮暗双主题（共用块在 site.css） */
.art { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:30px 34px 32px; box-shadow:var(--shadow-sm); }
.art-h1 { font-size:28px; font-weight:800; letter-spacing:-.8px; line-height:1.3; }
.art-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; color:var(--t3); }
.art-meta .chip { color:var(--accent); background:var(--accent-soft); padding:3px 11px; border-radius:999px; font-weight:600; }

/* ============ 网名卡片 v2（亮色卡 + 渐变序号，替代旧紫色渐变墙） ============ */
.n-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.n-card {
  display:flex; gap:15px; align-items:flex-start;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; position:relative; 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(14px);
}
.n-card.in { animation:rise .5s cubic-bezier(.16,1,.3,1) forwards; }
.n-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 32%, var(--line)); box-shadow:var(--shadow); }
.n-idx {
  flex-shrink:0; min-width:32px; text-align:center; padding-top:2px;
  font-size:26px; font-weight:800; font-style:italic; line-height:1.15;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:.85;
}
.n-body { flex:1; min-width:0; }
.n-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.n-name { font-size:21px; font-weight:800; color:var(--t1); letter-spacing:-.2px; word-break:break-all; transition:color .15s; }
.n-card:hover .n-name { color:var(--accent); }
.n-stars { color:var(--gold); font-size:12px; letter-spacing:2px; white-space:nowrap; }
.n-info { list-style:none; display:flex; flex-direction:column; gap:5px; margin-top:9px; }
.n-info li { font-size:13.5px; color:var(--t2); line-height:1.6; word-break:break-all; display:flex; gap:8px; align-items:baseline; }
.n-info li i { font-style:normal; flex-shrink:0; color:var(--accent); background:var(--accent-soft);
  padding:1px 8px; border-radius:6px; font-size:11.5px; font-weight:600; }
.n-ops { display:flex; gap:9px; margin-top:14px; }
.copy-btn {
  border:none; background:linear-gradient(120deg, var(--accent), var(--accent-2)); color:#fff;
  padding:6px 16px; border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; transition:.18s;
  box-shadow:0 2px 10px color-mix(in srgb, var(--accent) 28%, transparent);
}
.copy-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.copy-btn.done { background:linear-gradient(120deg, #10b981, #059669); box-shadow:0 2px 10px rgba(16,185,129,.35); }
.like-btn {
  border:1px solid var(--line-strong); background:transparent; color:var(--t2);
  padding:6px 14px; border-radius:999px; font-size:12.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; transition:.18s;
}
.like-btn:hover { border-color:var(--rose); color:var(--rose); }
.like-btn.liked { color:var(--rose); border-color:var(--rose); background:color-mix(in srgb, var(--rose) 8%, transparent); }

/* ============ 相关推荐（图文大卡：上图位 16:9 + 标题，预留缩略图位） ============ */
.rel-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; padding-bottom:6px; }
.rel-item {
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s cubic-bezier(.16,1,.3,1);
}
.rel-pic { position:relative; width:100%; aspect-ratio:16/9; background:var(--bg-soft); overflow:hidden; }
.rel-pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.rel-item:hover .rel-pic img { transform:scale(1.06); }
.rel-pic .ph {
  position:absolute; inset:10px; display:flex; align-items:center; justify-content:center;
  border:1.5px dashed var(--line-strong); border-radius:10px;
  font-size:13px; color:var(--t3);
}
.rel-t {
  padding:13px 15px 15px; font-size:14.5px; font-weight:600; line-height:1.55; letter-spacing:-.2px; color:var(--t1);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:.15s;
}
.rel-item:hover { border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow:var(--shadow); transform:translateY(-3px); }
.rel-item:hover .rel-t { color:var(--accent); }

/* ============ 标签 / 上下篇 ============ */
.art-tags { margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); font-size:13px; color:var(--t3); display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.art-tags a { background:var(--bg-soft); color:var(--t2); padding:4px 12px; border-radius:999px; transition:.15s; }
.art-tags a:hover { background:var(--accent); color:#fff; }
.pn { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0; }
.pn-item { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; display:flex; flex-direction:column; gap:4px; transition:.2s; min-width:0; }
.pn-item.next { text-align:right; }
.pn-item span { font-size:12px; color:var(--t3); }
.pn-item b { font-size:14.5px; color:var(--t2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pn-item:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.pn-item:hover b { color:var(--accent); }

/* ============ tx 图集网格 ============ */
.tx-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px; margin-top:20px; }
.tx-item { position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg-soft); cursor:zoom-in; padding:0; aspect-ratio:1; transition:.25s; }
.tx-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.tx-item:hover img { transform:scale(1.05); }
.tx-item .tx-title { position:absolute; left:0; right:0; bottom:0; padding:18px 12px 9px; font-size:12px; color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,.65)); opacity:0; transition:.25s; text-align:left; }
.tx-item:hover .tx-title { opacity:1; }
.tx-item .tx-ph { display:flex; align-items:center; justify-content:center; height:100%; color:var(--t3); font-size:12px; padding:10px; }
.tx-content { margin-top:18px; font-size:14.5px; color:var(--t2); line-height:1.8; }

/* ============ 头像终端页视图工具条（大图/小图 + 方图/圆图,搬自老模板） ============ */
.tx-tools { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:20px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 14px; }
.tx-tool-group { display:flex; align-items:center; gap:9px; }
.tx-tool-label { font-size:12px; font-weight:600; color:var(--t3); }
.tx-seg { display:inline-flex; gap:2px; padding:2px; background:var(--bg-card); border:1px solid var(--line);
  border-radius:10px; }
.tx-seg button { border:none; background:transparent; padding:6px 15px; font-size:12.5px; font-weight:600;
  color:var(--t2); cursor:pointer; border-radius:8px; transition:.15s; }
.tx-seg button:hover { color:var(--accent); }
.tx-seg button.on { background:var(--accent); color:#fff; box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.tx-tip { font-size:12px; color:var(--t3); margin-left:auto; }
.tx-grid { transition:none; }
.tx-grid.sz-big { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.tx-grid.sz-small { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.tx-grid.sh-square .tx-item img { border-radius:8px; }
.tx-grid.sh-round .tx-item img { border-radius:50%; }
.tx-grid.sh-round .tx-item { border-color:transparent; background:transparent; padding:0; }
.tx-item { padding:6px; }

/* ============ 灯箱 ============ */
dialog#tx-lightbox { border:none; border-radius:16px; padding:12px; background:var(--bg-card); max-width:88vw; }
dialog#tx-lightbox::backdrop { background:rgba(9,9,11,.75); backdrop-filter:blur(6px); }
dialog#tx-lightbox img { max-width:78vw; max-height:76vh; border-radius:10px; }
.lb-dl { position:absolute; right:16px; top:16px; background:var(--accent); color:#fff; font-size:13px; padding:7px 16px; border-radius:999px; }
.lb-close { position:absolute; left:16px; top:16px; background:rgba(0,0,0,.5); color:#fff; border:none; border-radius:999px; padding:7px 14px; font-size:12.5px; cursor:pointer; }

@media (max-width: 768px) {
  .art { padding:20px 18px 22px; }
  .art-h1 { font-size:22px; }
  .n-grid { grid-template-columns:1fr; }
  .tx-grid.sz-big, .tx-grid.sz-small { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
  .tx-tip { display:none; }
  .n-idx { min-width:24px; font-size:22px; }
  .n-name { font-size:18px; }
}

/* ============ 网名详情中部·配套头像图集卡(与文章配图同源, 网名↔头像互链) ============ */
.n-avcard {
  grid-column:1 / -1;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px 14px; box-shadow:var(--shadow-sm);
  transition:border-color .25s, box-shadow .25s;
}
.n-avcard:hover { border-color:color-mix(in srgb, var(--accent) 32%, var(--line)); box-shadow:var(--shadow); }
.n-avcard .avc-hd { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; font-size:13px; }
.n-avcard .avc-hd b { color:var(--accent); font-weight:700; flex:none; }
.n-avcard .avc-hd a { color:var(--t1); font-weight:600; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.n-avcard .avc-hd a:hover { color:var(--accent); }
.n-avcard .avc-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.n-avcard .avc-grid img {
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:8px;
  background:var(--line); transition:transform .25s;
}
.n-avcard .avc-grid img:hover { transform:scale(1.04); }
.n-avcard .avc-ft { display:inline-block; margin-top:11px; font-size:12.5px; color:var(--t3); text-decoration:none; }
.n-avcard .avc-ft:hover { color:var(--accent); }
@media (max-width:640px) {
  .n-avcard { padding:12px 14px 10px; }
  .n-avcard .avc-grid { grid-template-columns:repeat(3,1fr); gap:6px; }
}