/* ==========================================================================
   NAMES 全球名人录 — 站点样式
   主题通过 data-theme 切换，所有颜色走变量，避免深色下出现白块
   ========================================================================== */
:root{
  --bg:#f8f6f2; --bg2:#f2eee7; --card:#ffffff; --card2:#fbf9f5;
  --ink:#14161a; --ink2:#3a3f47; --muted:#6f747d;
  --line:#e5dfd3; --line2:#f0ece3;
  --gold:#b0803c; --gold2:#8f6428; --goldbg:#f4ecdd;
  --danger:#a8443c; --ok:#2f7d6a; --adult:#6b7079;
  --r:16px; --r-sm:10px;
  --shadow:0 1px 2px rgba(20,22,26,.04),0 8px 24px rgba(20,22,26,.05);
  --shadow-lg:0 20px 60px rgba(20,22,26,.14);
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --wrap:1360px;
}
[data-theme="ink"]{
  --bg:#0f1114; --bg2:#15181c; --card:#191d22; --card2:#1e2228;
  --ink:#f3f1ed; --ink2:#d9d6d0; --muted:#8e949d;
  --line:#2a2f36; --line2:#23282e;
  --gold:#c99a55; --gold2:#dbae66; --goldbg:#241f16;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);
  --shadow-lg:0 24px 70px rgba(0,0,0,.55);
}
[data-theme="stone"]{
  --bg:#f4f6f8; --bg2:#e9edf1; --card:#ffffff; --card2:#f8fafb;
  --ink:#12161b; --ink2:#39404a; --muted:#68717d;
  --line:#dde3e9; --line2:#ebf0f4;
  --gold:#5b7893; --gold2:#47627a; --goldbg:#e8eef4;
}
/* 魅紫 Plum —— 紫调暖光，适合写真 / 美女类内容：图片偏肤色暖调时，
   冷灰会把肤色压灰，米白又太素，紫底能把肤色衬得更透。 */
[data-theme="plum"]{
  --bg:#f9f4fe; --bg2:#f2eafa; --card:#ffffff; --card2:#fcf9ff;
  --ink:#1e1526; --ink2:#443a52; --muted:#786d86;
  --line:#e7dcf0; --line2:#f2ebf7;
  --gold:#8a4bbd; --gold2:#6f36a6; --goldbg:#f4eafd;
  --shadow:0 1px 2px rgba(46,24,66,.05),0 8px 24px rgba(60,30,90,.07);
  --shadow-lg:0 20px 60px rgba(60,30,90,.16);
}
/* 魅紫的「当前页 / 已选中」用主色而不是墨黑：墨黑近黑，整套看着仍像米白加了点紫，
   换成紫色 pill 才一眼能认出这是另一套样式。白字对 #8a4bbd 是 5.2:1。 */
html[data-theme="plum"] .nav a.on,
html[data-theme="plum"] .prow a.on{background:var(--gold);border-color:var(--gold);color:#fff}
/* 极光 Aurora —— 唯一带渐变的样式：整页背景是粉→紫→蓝的极浅渐变，
   强调色用 --grad（亮）/ --grad-ink（深，压白字用，亮渐变上压白字对比度不够）。
   渐变只在这套里定义，别的主题没有这两个变量，所以下面所有用法都必须带兜底值。 */
[data-theme="aurora"]{
  --bg:#fbf7fb; --bg2:#f5eff8; --card:#ffffff; --card2:#fdf9fe;
  --ink:#1b1522; --ink2:#423a4c; --muted:#766b80;   /* muted 对淡紫底 4.7:1，别再调浅 */
  --line:#ecdfec; --line2:#f7eef7;
  --gold:#b2418f; --gold2:#8d2f70; --goldbg:#fdeaf6;
  --bg-grad:linear-gradient(165deg,#fdecf6 0%,#f8ecfb 30%,#edf0fd 66%,#f2f8fb 100%);
  --grad:linear-gradient(118deg,#e46aa6 0%,#a86ae8 52%,#6d8bf5 100%);
  --grad-ink:linear-gradient(118deg,#b93b8b 0%,#7b3fe0 54%,#3a51c8 100%);
  --shadow:0 1px 2px rgba(66,34,80,.05),0 8px 24px rgba(70,40,90,.07);
  --shadow-lg:0 20px 60px rgba(70,40,90,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);background-image:var(--bg-grad,none);
  color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* 渐变底要固定住，否则长页面滚到底时渐变被拉成一条一条的色带 */
[data-theme="aurora"] body{background-attachment:fixed;background-repeat:no-repeat}
/* 极光把「实心强调块」换成渐变：只覆盖主按钮、当前导航、被选中的偏好项，
   以及两处衬线点缀字（做成渐变字）。其余组件继续吃 --gold，
   某处漏掉也不会变成无色，最多退回紫红单色。
   前缀用 html[...] 是为了在特异性上稳压后面所有单类规则（同分的 .nav a.on 才不会被顺序坑）。 */
html[data-theme="aurora"] .btn.gold,
html[data-theme="aurora"] .gallfoot .btn.gold{background:var(--grad-ink);border-color:transparent;color:#fff}
html[data-theme="aurora"] .nav a.on,
html[data-theme="aurora"] .prow a.on{background:var(--grad-ink);border-color:transparent;color:#fff}
html[data-theme="aurora"] .hero h1 em,
html[data-theme="aurora"] .shead h2 em{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.3}
p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}
.tiny{font-size:12px;color:var(--muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;background:var(--card);padding:8px 14px;border-radius:8px;z-index:99}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);
}
.tb{display:flex;align-items:center;gap:12px;height:66px}
.logo{display:flex;align-items:baseline;gap:9px;flex:0 0 auto}
.logo b{font-family:var(--serif);font-size:21px;letter-spacing:.16em}
.logo span{font-size:11px;color:var(--muted);letter-spacing:.12em;white-space:nowrap}
.nav{display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0;
  margin-left:14px;overflow:hidden}
.nav a{
  padding:8px 15px;border-radius:8px;font-size:13px;color:var(--ink2);
  white-space:nowrap;transition:.16s;
}
.nav a:hover{background:var(--bg2);color:var(--ink)}
.nav a.on{background:var(--ink);color:var(--bg)}
.hsearch{display:flex;align-items:center;flex:0 0 auto;position:relative}
.hsearch input{
  width:190px;border:1px solid var(--line);background:var(--card);
  border-radius:999px;padding:7px 34px 7px 14px;font-size:13px;color:var(--ink);
  outline:none;transition:.2s;
}
.hsearch input:focus{border-color:var(--gold);width:230px}
.hsearch input::placeholder{color:var(--muted)}
.hsearch button{
  position:absolute;right:4px;width:26px;height:26px;border:0;border-radius:50%;
  background:var(--ink);color:var(--bg);font-size:14px;line-height:1;
}
.prefs{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px}
.pbtn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink2);font-size:14px;
}
.pbtn:hover{border-color:var(--gold);color:var(--gold)}
.ppanel{
  position:absolute;right:0;top:44px;width:300px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);
  padding:16px;display:none;z-index:70;
}
.ppanel.on{display:block}
.pg{margin-bottom:14px}
.pg:last-child{margin-bottom:0}
.pg>label{display:block;font-size:11px;letter-spacing:.14em;color:var(--muted);margin-bottom:8px}
.prow{display:flex;gap:6px}
/* 需要换行的一组（样式 / 国家地区）：只换行 + 左对齐。
   别借全站容器类 .wrap 来换行——它带 padding:0 32px，整组按钮会被推右 32px，
   看起来像「没有左对齐」，而且 max-width:1360px 还会让这行撑出面板。 */
.prow.pwrap{flex-wrap:wrap;justify-content:flex-start}
.prow a{
  padding:5px 10px;border-radius:8px;font-size:13px;border:1px solid var(--line);
  color:var(--ink2);display:inline-flex;align-items:center;gap:6px;
}
.prow a:hover{border-color:var(--gold)}
.prow a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sw{width:11px;height:11px;border-radius:3px;border:1px solid var(--line);display:inline-block;flex:0 0 auto}
.sw-cream{background:#f8f6f2}.sw-ink{background:#14161a}.sw-stone{background:#e9edf1}
.sw-plum{background:#8a4bbd}
.sw-aurora{background:linear-gradient(118deg,#e46aa6,#a86ae8 52%,#6d8bf5)}

/* ---------------- 首页首屏 ---------------- */
.hero{display:grid;grid-template-columns:1fr 604px;gap:56px;align-items:center;padding:64px 0 48px}
.kick{font-size:11px;letter-spacing:.28em;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
.hero h1{font-size:52px;line-height:1.16;letter-spacing:-.025em;max-width:12em}
.hero h1 em{font-family:var(--serif);font-style:normal;color:var(--gold)}
.lead{margin-top:18px;font-size:16px;color:var(--muted);max-width:32em;line-height:1.85}
.bigsearch{display:flex;gap:8px;margin-top:26px;max-width:460px}
.bigsearch input{
  flex:1;border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:12px 20px;font-size:14px;color:var(--ink);outline:none;
}
.bigsearch input:focus{border-color:var(--gold)}
.bigsearch button{
  border:0;border-radius:999px;padding:0 22px;background:var(--ink);color:var(--bg);font-size:14px;
}
.hotline{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;align-items:center}
.hotline i{font-size:11px;color:var(--muted);letter-spacing:.1em;margin-right:2px}
.hotline a{font-size:12px;color:var(--muted);padding:3px 8px;border-radius:999px;border:1px solid var(--line2)}
.hotline a:hover{color:var(--gold);border-color:var(--gold)}
.hv{position:relative;height:430px;border-radius:22px;overflow:hidden;background:var(--bg2);box-shadow:var(--shadow)}
.hv-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hv-slide.on{opacity:1}
.hv-slide img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;transform:scale(1.02);transition:transform 6s linear}
.hv-slide.on img{transform:scale(1.08)}
.hv:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,15,.72),rgba(10,12,15,.06) 52%,transparent)}
.hv-caps{position:absolute;left:26px;right:80px;bottom:24px;z-index:2;color:#fff}
.hv-cap{display:none}
.hv-cap.on{display:block;animation:fadeUp .5s ease}
.hv-cap i{font-size:11px;letter-spacing:.2em;opacity:.86}
.hv-cap b{display:block;font-size:21px;margin-top:6px;letter-spacing:-.01em}
.hv-cap span{display:block;font-size:13px;opacity:.78;margin-top:4px}
.hv-dots{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:8px}
.hv-dots b{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.hv-dots b.on{background:#fff;height:18px;border-radius:3px}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:20px 8px;text-align:center;border-right:1px solid var(--line2)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:var(--serif);font-size:26px;letter-spacing:.02em}
.stats span{font-size:12px;color:var(--muted);letter-spacing:.08em}

/* ---------------- 区块 ---------------- */
.sec{padding:54px 0}
.sec.alt{background:var(--bg2)}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.shead h2{font-size:26px;letter-spacing:-.02em}
.shead h2 em{font-style:normal;font-family:var(--serif);color:var(--gold);margin-left:10px;font-size:15px;letter-spacing:.06em}
.shead .more{font-size:13px;color:var(--muted)}
.shead .more:hover{color:var(--gold)}

/* ---------------- 人物卡 ---------------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pgrid.g6{grid-template-columns:repeat(6,1fr);gap:18px}
.pcard{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.22s;box-shadow:0 1px 2px rgba(20,22,26,.03);
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--gold) 35%,var(--line))}
.ph{position:relative;aspect-ratio:4/5;background:var(--bg2);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 28%);transition:transform .5s}
.pcard:hover .ph img{transform:scale(1.04)}
.phini{
  position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);
  font-size:52px;color:var(--bg);background:hsl(var(--h,30) 22% 42%);
}
.pill{
  position:absolute;left:10px;top:10px;z-index:2;font-style:normal;font-size:11px;
  padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:#14161a;
  letter-spacing:.04em;backdrop-filter:blur(6px);
}
.pill.adult{background:rgba(20,22,26,.78);color:#e9e6df}
.gr{
  position:absolute;right:10px;top:10px;z-index:2;font-style:normal;font-size:11px;
  padding:3px 7px;border-radius:6px;background:rgba(20,22,26,.6);color:#fff;
}
.gr.up{color:#ffd9c9}
.gr.dn{color:#c8e8d8}
.pmeta{padding:13px 14px 15px}
.pmeta h3{font-size:16px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pmeta h3 em{font-style:normal;font-family:var(--serif);font-size:11px;color:var(--muted);letter-spacing:.04em}
.pmeta .sub{font-size:12px;color:var(--muted);margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.chips span,.chips a{
  font-size:11px;padding:2px 7px;border-radius:5px;background:var(--bg2);
  color:var(--ink2);border:1px solid transparent;
}
.chips a:hover{border-color:var(--gold);color:var(--gold)}

/* ---------------- 榜单 ---------------- */
.rank{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.rankrow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line2)}
.rankrow .n{font-family:var(--serif);font-size:13px;color:var(--muted);width:22px}
.rankrow .av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--bg2);flex:0 0 auto}
.rankrow .av img{width:100%;height:100%;object-fit:cover}
.rankrow .nm{flex:1;min-width:0}
.rankrow .nm b{display:block;font-size:14px;font-weight:600}
.rankrow .nm span{font-size:11px;color:var(--muted)}
.bar{height:4px;border-radius:2px;background:var(--line2);overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.rankrow .hv2{font-family:var(--serif);font-size:13px;color:var(--gold);width:52px;text-align:right}

/* ---------------- 分类 / 标签 ---------------- */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cattile{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);
  transition:.2s;
}
.cattile:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)}
.cattile b{font-size:16px}
.cattile span{font-size:12px;color:var(--muted)}
.cattile i{font-style:normal;font-family:var(--serif);font-size:13px;color:var(--gold)}

/* 标签云 */
.tagcloud{display:flex;flex-wrap:wrap;gap:8px}
.tagcloud a{
  padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-size:13px;color:var(--ink2);transition:.18s;
}
.tagcloud a:hover{border-color:var(--gold);color:var(--gold)}
.tagcloud a b{font-family:var(--serif);font-size:11px;color:var(--muted);margin-left:5px;font-weight:400}
.tagcloud.lg a{font-size:14px;padding:8px 16px}

/* ---------------- 美人 / 影像 ---------------- */
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bcard{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:zoom-in}
.bcard .im{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg2)}
.bcard .im img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;transition:transform .5s}
.bcard:hover .im img{transform:scale(1.04)}
.bcard .ai{
  position:absolute;left:8px;bottom:8px;font-style:normal;font-size:10px;letter-spacing:.1em;
  background:rgba(20,22,26,.72);color:#fff;padding:2px 7px;border-radius:4px;
}
.bcard figcaption{padding:11px 13px 13px}
.bcard figcaption b{display:block;font-size:14px;font-weight:600}
.bcard figcaption b a{color:inherit}
.bcard figcaption b a:hover{color:var(--gold)}
.bcard .who{font-size:11px;color:var(--muted)}
.bcard .who:hover{color:var(--gold)}
/* 卡片右下角的「详情」入口：图本身点击仍是灯箱（看图是主要动作），
   但要给「这张图有自己的页面」一个看得见的去处，否则详情页只有标题能点进去。 */
.bcard .det{
  position:absolute;right:8px;bottom:8px;font-size:11px;letter-spacing:.04em;
  padding:3px 10px;border-radius:999px;background:rgba(20,22,26,.62);color:#fff;
  opacity:0;transition:opacity .2s,background .2s;
}
.bcard:hover .det,.bcard .det:focus-visible{opacity:1}
.bcard .det:hover{background:var(--gold)}

/* ---------------- 单图详情页 ----------------
   左图钉住、右文随滚，图片站最省力的读法。列宽给 560 是因为素材多是 4:5 竖图，
   再宽一屏塞不下，再窄就看不清妆面与服装细节。 */
.bdgrid{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);
  gap:48px;align-items:start;margin:4px 0 0}
.bdfig{position:sticky;top:84px;margin:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bdfig .im{position:relative;background:var(--bg2);cursor:zoom-in}
.bdfig .im img{display:block;width:100%;height:auto}
.bdfig .ai{position:absolute;left:10px;bottom:10px;font-style:normal;font-size:10px;
  letter-spacing:.1em;background:rgba(20,22,26,.72);color:#fff;padding:2px 7px;border-radius:4px}
.bdfig figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 13px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line2)}
.bdfig figcaption a{color:var(--gold)}
.bdside{min-width:0;padding-top:2px}
.bdside h1{font-size:31px;line-height:1.3;letter-spacing:-.02em}
.bdside .pvmeta{margin-top:12px}
.bdlead{margin-top:16px;font-size:14px;line-height:1.85;color:var(--ink2)}
.bdfacts{grid-template-columns:minmax(0,1fr);margin-top:22px}
.bdfacts dd a{border-bottom:1px solid var(--line)}
.bdfacts .bdtags{display:flex;flex-wrap:wrap;gap:6px}
.bdfacts .bdtags a{font-size:12px;padding:2px 9px;border:1px solid var(--line);
  border-radius:999px;color:var(--ink2);border-bottom:1px solid var(--line)}
.bdfacts .bdtags a:hover{color:var(--gold);border-color:var(--gold)}
.bdacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.bdside .tiny{margin-top:20px;line-height:1.7}
.bdmore{margin-top:44px}
.bdmore h2{font-size:11px;letter-spacing:.2em;color:var(--muted);margin-bottom:14px}
@media (max-width:900px){
  .bdgrid{grid-template-columns:1fr;gap:26px}
  .bdfig{position:static}
  .bdside h1{font-size:24px}
  /* 触屏没有 hover：卡片上的「详情」必须常显，否则详情页在手机上根本没有入口 */
  .bcard .det{opacity:1}
}
.colbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.colbar a{
  padding:8px 15px;border-radius:999px;border:1px solid var(--line);font-size:13px;
  background:var(--card);color:var(--ink2);
}
.colbar a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.colbar a i{font-style:normal;font-family:var(--serif);font-size:11px;opacity:.6;margin-left:5px}
.note{
  margin-top:28px;padding:16px 18px;border:1px dashed var(--line);border-radius:12px;
  font-size:12.5px;color:var(--muted);line-height:1.85;
}
.note b{color:var(--ink2)}

/* ---------------- 页头 ---------------- */
.pagehead{padding:44px 0 30px;border-bottom:1px solid var(--line);margin-bottom:34px}
.pagehead h1{font-size:38px;letter-spacing:-.025em}
.pagehead p{margin-top:10px;color:var(--muted);font-size:15px;max-width:44em}
/* 面包屑是页面第一行，必须和顶栏拉开距离 —— 以前只有 margin-bottom，
   文字直接贴着 header 的下边框（实测只差 2px），看起来像被裁掉的导航残片。 */
.crumbs{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--muted);
  margin:20px 0 16px;flex-wrap:wrap}
.crumbs a:hover{color:var(--gold)}
.crumbs i{font-style:normal;opacity:.4;font-size:11px}
.crumbs span{color:var(--ink2)}

/* ---------------- 名人库筛选 ---------------- */
.shelf{display:grid;grid-template-columns:236px 1fr;gap:36px;align-items:start}
.filters{position:sticky;top:88px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.fgroup{margin-bottom:18px}
.fgroup:last-child{margin-bottom:0}
.fgroup h4{font-size:11px;letter-spacing:.16em;color:var(--muted);margin-bottom:9px}
.fgroup a{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2);padding:4px 5px;border-radius:6px}
.fgroup a:hover{background:var(--bg2);color:var(--ink)}
.fgroup a.on{background:var(--ink);color:var(--bg)}
.fgroup a i{font-style:normal;font-size:11px;opacity:.6;font-family:var(--serif)}
.filterbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.sortbar{display:flex;gap:6px}
.sortbar a{padding:6px 12px;border-radius:8px;font-size:12.5px;border:1px solid var(--line);color:var(--ink2);background:var(--card)}
.sortbar a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.countline{font-size:13px;color:var(--muted)}
.countline b{color:var(--ink);font-family:var(--serif);font-size:15px}

/* ---------------- 分页 ---------------- */
.pager{display:flex;align-items:center;gap:6px;justify-content:center;margin:44px 0 10px}
.pager a,.pager span{
  min-width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--line);font-size:13px;background:var(--card);padding:0 10px;
}
.pager a:hover{border-color:var(--gold);color:var(--gold)}
.pager a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pager .dis{opacity:.35}
.pager i{font-style:normal;font-size:12px;color:var(--muted);margin-left:10px}

/* ---------------- 详情页 ---------------- */
/* 人物页两列：左边资料卡（粘住），右边正文。
   第三列原本是 128px 的「本页目录」，太窄 —— 标题折行、点击目标小，还白占正文空间。
   目录已横过来吸在内容区顶部（.ptabs），整列让给正文。 */
.dgrid{display:grid;grid-template-columns:262px minmax(0,1fr);column-gap:36px;align-items:start}
/* 番号页：没有参与者时左栏是空的，单栏撑满，不然正文被压在右侧 262px 之外 */
.dgrid.onecol{grid-template-columns:minmax(0,1fr)}
.dcover{
  position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--bg2);
  box-shadow:var(--shadow);
}
.dcover img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 22%)}
.dcover .phini{font-size:96px}

/* ---------------- 人物页左栏：头像 + 资料卡 ---------------- */
/* 注意：类名不能取 .pcard —— 那是全站通用人物卡（列表页 / 相关人物），
   在这里重定义会把所有列表卡一起改成粘性 + 描边，看起来像"页面错乱" */
.pcol{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px;
  max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin}
.pside{padding:15px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
/* 头像用 4:5 而不是 3:4 —— 3:4 会把整列顶到 950px，超出粘性区被裁 */
.pavatar{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--bg2)}
.pavatar img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 26%)}
.pavatar .phini{font-size:64px}
.pcname{display:block;margin-top:14px;text-align:center;font-size:19px;letter-spacing:-.01em;line-height:1.35}
/* 问答页 / 番号页的卡片姓名链回人物档案：链接不能带下划线，也不该变成蓝色 */
.pcname a,.pcname a:hover{color:var(--ink);border:0}
.pcname a:hover{color:var(--gold)}
.pcen{display:block;margin-top:3px;text-align:center;font-family:var(--serif);
  font-size:11.5px;color:var(--muted);letter-spacing:.05em}
.pkv{margin:15px 0 0;border-top:1px solid var(--line)}
.pkv>div{display:flex;gap:12px;align-items:baseline;padding:9px 0;
  border-bottom:1px solid var(--line2);font-size:13px;line-height:1.55}
.pkv>div:last-child{border-bottom:0}
.pkv dt{flex:0 0 3.9em;margin:0;font-size:11.5px;color:var(--muted)}
.pkv dd{margin:0;min-width:0;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.pkv dd em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted);margin-left:4px}
.pkv dd a{color:var(--ink);border-bottom:1px solid var(--line)}
.pkv dd a:hover{color:var(--gold);border-color:var(--gold)}

/* 顶部那排「概览 / 图片 / 问答」已按反馈删除，切模板的入口移到右侧目录里 */
.dinfo h1{font-size:44px;letter-spacing:-.03em;line-height:1.15}
.dinfo .en{font-family:var(--serif);font-size:15px;color:var(--muted);letter-spacing:.06em;margin-top:6px}
.dbadges{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.dbadges a,.dbadges span{
  font-size:12px;padding:4px 11px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink2);background:var(--card);
}
.dbadges a:hover{border-color:var(--gold);color:var(--gold)}
.dbadges .cat{border-color:transparent;color:#fff}
.dstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:22px 0}
.dstats div{background:var(--card);padding:14px 10px;text-align:center}
.dstats b{display:block;font-family:var(--serif);font-size:21px}
.dstats span{font-size:11px;color:var(--muted);letter-spacing:.06em}
.dtabs{display:flex;gap:6px;margin:0 0 22px}
.dtabs a{padding:7px 14px;border-radius:8px;font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--ink2)}
.dtabs a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* 内容落在 1fr 窄栏里，网格要比全宽时少一列，否则缩略图太小 */
.dinfo .gallgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.dinfo .relgrid{grid-template-columns:repeat(4,1fr)}
.dinfo .wgrid{grid-template-columns:repeat(3,1fr)}

.block{margin-bottom:38px}
/* 简介默认 3 行，超出才显示「查看原文」（按钮由 site.js 按实际是否溢出决定显示） */
.biowrap{position:relative}
.biowrap .bio{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.biowrap.open .bio{display:block;overflow:visible;-webkit-line-clamp:unset}
/* .cut 由 JS 在"确实被截断"时挂上：不过滤就会给两行的短简介也盖一层白雾 */
.biowrap.cut:not(.open):after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;
  background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.biomore{margin-top:8px;padding:0;background:none;border:0;cursor:pointer;
  font-size:12.5px;color:var(--gold);border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.biomore:hover{color:var(--ink)}
.biomore .t-less{display:none}
.biowrap.open+.biomore .t-more{display:none}
.biowrap.open+.biomore .t-less{display:inline}
/* 顶栏是 sticky 的，锚点跳转要把目标压在它下面，否则标题会被挡住 */
.block[id]{scroll-margin-top:84px}
/* 人物页比别处多一条吸顶标签（约 56px），84px 只够躲开顶栏 —— 从顶部标签点「基本资料」
   会滚到标题被标签条盖住的位置。这里补足：topbar 66 + 标签条 ~58 + 呼吸 12 */
.dgrid .block[id],.dgrid #top{scroll-margin-top:138px}
.block h3{font-size:13px;letter-spacing:.18em;color:var(--muted);margin-bottom:14px;font-weight:600}
/* 区块标题本身就是通往长尾页的入口，右上角只留一个小箭头。
   原来这里是一句「单独页面 ↗」，每个区块都挂一条，读起来像模板没擦干净 */
.block h3.h3g a{display:inline-flex;align-items:baseline;gap:7px;color:inherit}
.block h3.h3g a i{font-style:normal;font-size:11px;letter-spacing:0;color:var(--muted);
  opacity:.5;transition:.16s}
.block h3.h3g a:hover{color:var(--gold)}
.block h3.h3g a:hover i{opacity:1;color:var(--gold);transform:translate(1px,-1px)}
/* 模块标题右侧的计数（如「1 套 · 4 张 · 2 张免费」），与 morelink 一样压掉字距 */
.block h3 .h3note{margin-left:12px;font-size:11px;letter-spacing:0;text-transform:none;
  color:var(--muted);font-weight:400}
.prose{font-size:15.5px;line-height:1.95;color:var(--ink2)}
/* 正文自动内链（标签文字链）：要「看得出能点」，但不能像广告链接那样满屏蓝字。
   用文字本色 + 底部细虚线，悬停才变金色实线。 */
.tlink{color:inherit;border-bottom:1px dashed var(--line);text-decoration:none;transition:color .15s,border-color .15s}
.tlink:hover{color:var(--gold);border-bottom:1px solid var(--gold)}
.prose p+p{margin-top:14px}
.worklist{border-top:1px solid var(--line)}
.workrow{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:14px}
.workrow b{font-weight:600}
.workrow span{color:var(--muted);font-size:12px}
.workrow i{margin-left:auto;font-style:normal;font-family:var(--serif);color:var(--gold)}
/* 番号：一行一个编号。编号用衬线体、日期右对齐，扫读时像一张目录 */
.codelist{border-top:1px solid var(--line)}
.coderow{display:flex;align-items:baseline;gap:16px;padding:11px 6px;
  border-bottom:1px solid var(--line2);font-size:14px;color:var(--ink)}
.coderow:hover{background:var(--bg2)}
.coderow b{flex:0 0 auto;font-family:var(--serif);font-size:14.5px;letter-spacing:.05em}
.coderow span{min-width:0;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coderow em{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:auto;
  flex:0 0 auto;white-space:nowrap}
.coderow i{flex:0 0 auto;min-width:86px;text-align:right;
  font-style:normal;font-family:var(--serif);font-size:12px;color:var(--muted)}
.timeline{border-left:1px solid var(--line);padding-left:20px}
.tl{position:relative;padding-bottom:18px}
.tl:before{content:"";position:absolute;left:-25px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--bg)}
.tl b{font-family:var(--serif);font-size:13px;color:var(--gold)}
.tl p{font-size:14px;color:var(--ink2);margin-top:2px}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials div{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--card)}
.socials b{display:block;font-family:var(--serif);font-size:16px}
.socials span{font-size:11px;color:var(--muted)}

/* 详情页：别名与译名 / 基本资料 / 常见问题 / 相关搜索 */
.dalias{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 0;font-size:13.5px;color:var(--ink2)}
.dalias>span{font-size:10.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.dalias b{font-weight:600}
.dalias em{font-style:normal;font-size:10.5px;color:var(--muted);margin:0 12px 0 4px}
.facttable{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin:0;
  border-top:1px solid var(--line)}
.facttable>div{display:flex;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line2);font-size:14px}
.facttable dt{flex:0 0 5em;margin:0;color:var(--muted);font-size:12.5px}
.facttable dd{margin:0;color:var(--ink);font-weight:500}
.facttable dd em{font-style:normal;color:var(--muted);font-size:12px;margin-left:6px}
.facttable dd a{color:var(--ink);border-bottom:1px solid var(--line)}
.facttable dd a:hover{color:var(--gold);border-color:var(--gold)}
/* 列表铺满 block 宽度：否则标题右侧的「单独页面」和列表右边缘对不齐 */
.faqlist{border-top:1px solid var(--line);counter-reset:faq}
.faqlist details{border-bottom:1px solid var(--line2)}
.faqlist summary{list-style:none;cursor:pointer;padding:14px 30px 14px 0;position:relative;
  font-size:15px;font-weight:600;line-height:1.5;color:var(--ink);transition:color .15s}
.faqlist summary:before{counter-increment:faq;content:counter(faq,decimal-leading-zero);
  font-family:var(--serif);font-size:10.5px;font-weight:400;color:var(--muted);
  margin-right:13px;vertical-align:1px;letter-spacing:.06em}
.faqlist details[open] summary{color:var(--ink)}
.faqlist details[open] summary:before{color:var(--gold)}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary:after{content:"+";position:absolute;right:8px;top:11px;
  font-family:var(--serif);font-size:19px;font-weight:400;color:var(--gold);transition:transform .18s}
.faqlist details[open] summary:after{content:"–"}
.faqlist summary:hover{color:var(--gold)}
/* 答案与问题文字左对齐（让过序号那一列），否则会顶到容器最左边 */
/* 不要加 max-width / 右边距：两者叠加会让答案在容器一半处就折行（用户反馈的「提前换行」） */
.faqlist details .prose{padding:0 0 16px 31px;font-size:14.5px;line-height:1.9;max-width:none}
/* 问答总页每条答案尾的 permalink：只留一个箭头，不再写「这条问答的单独页面」 */
.qaperma{display:inline-block;margin-left:8px;font-size:12px;color:var(--muted);
  opacity:.55;white-space:nowrap}
.qaperma:hover{opacity:1}
.qaperma:hover{color:var(--gold);border-color:var(--gold)}
.searchterms{display:flex;flex-wrap:wrap;gap:8px}
.searchterms a{font-size:12.5px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink2)}
.searchterms a:hover{border-color:var(--gold);color:var(--gold)}

/* 网盘下载：地址只在解锁后由服务端下发，未解锁的行走 .locked 态 */
.netbox{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)}
.nethead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--line2);background:var(--card2)}
.nethead b{font-size:14px}
.nethead span{font-size:11.5px;color:var(--muted)}
.netrow{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line2)}
.netrow:last-child{border-bottom:0}
.netrow form{margin:0}
.netbadge{flex:0 0 auto;display:grid;place-items:center;width:46px;height:26px;border-radius:7px;
  background:var(--c);color:#fff;font-size:11px;font-weight:600}
.netmeta{min-width:0;flex:1}
.netmeta b{display:block;font-size:13.5px}
.netmeta em{font-style:normal;font-size:11.5px;color:var(--muted);margin-right:12px}
.netrow.locked .netbadge{opacity:.55}
.netrow.locked .netmeta b{color:var(--ink2);font-weight:500}
.netlock{flex:0 0 auto;font-size:11.5px;color:var(--muted);letter-spacing:.06em;
  border:1px dashed var(--line);border-radius:7px;padding:5px 10px}
/* 解锁是「按图集」的动作，所以解锁按钮只出现一次，落在网盘卡底部 */
.netfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;background:var(--card2)}
.netfoot p{flex:1;min-width:200px;font-size:12px;color:var(--muted);line-height:1.7}
.netfoot form{margin:0}

/* 长尾页：人物的分页（资料 / 作品 / 经历 / 问答）与图片详情页 */
.parthead{margin:18px 0 0;border-bottom:1px solid var(--line);padding-bottom:24px}
.parthead .pk{display:flex;gap:22px;align-items:flex-start}
.parthead .pk>a{flex:0 0 110px;width:110px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--bg2)}
.parthead .pk>a img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 22%)}
.pkinfo{min-width:0;flex:1}
.pkinfo h1{font-size:30px;letter-spacing:-.02em;line-height:1.2}
.pkinfo .en{font-family:var(--serif);font-size:13px;color:var(--muted);letter-spacing:.06em;margin-top:5px}
.partlead{font-size:14.5px;line-height:1.85;color:var(--ink2);margin:14px 0 0;max-width:52em}
.partnav{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.partnav a{font-size:12.5px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink2)}
.partnav a:hover{border-color:var(--gold);color:var(--gold)}
.partnav a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pvhead{margin:16px 0 18px}
.pvhead h1{font-size:26px;letter-spacing:-.02em;line-height:1.3}
.pvmeta{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:12.5px;color:var(--muted)}
.pvmeta a{color:var(--ink2);border-bottom:1px solid var(--line)}
.pvfig{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px;display:grid;place-items:center}
.pvfig img{max-width:100%;max-height:74vh;width:auto;height:auto;border-radius:8px;object-fit:contain}
.pvfig figcaption{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}
.pvnav{display:flex;gap:8px;justify-content:center;margin-top:18px}

/* 资讯里的「文中机构」与「相关图集」 */
.orglist{display:flex;gap:10px;flex-wrap:wrap}
.orglist a{border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  background:var(--card);min-width:190px}
.orglist a:hover{border-color:var(--gold)}
.orglist b{display:block;font-size:13.5px}
.orglist span{font-size:11.5px;color:var(--muted)}
.albrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.albrow .im{aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--bg2)}
.albrow .im img{width:100%;height:100%;object-fit:cover}
.albrow b{display:block;font-size:13px;margin-top:7px}
.albrow span{font-size:11.5px;color:var(--muted)}
@media (max-width:900px){.albrow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .parthead .pk{flex-direction:column;gap:14px}
  .parthead .pk>a{width:96px;flex-basis:auto}
  .pkinfo h1{font-size:24px}
  /* 番号行收成两行：日期是固定宽（86px）、厂牌不能压，单行 flex 会把标题挤到
     40px 左右 —— 一个半字，「幕后记录 · 拍摄花絮」看起来就像乱码。
     改成「番号 + 厂牌 + 日期」一行、标题独占下一行并允许折行。 */
  .coderow{flex-wrap:wrap;gap:3px 10px}
  .coderow span{flex:1 1 100%;order:9;white-space:normal;overflow:visible;text-overflow:clip}
}

/* ---------------- 详情页头部：面包屑与模板切换同一行 ---------------- */
.dhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:20px 0 18px}
/* 装在 .dhead / .nhead 里的面包屑不能再吃那 20px：外层已经给过间距了 */
.dhead .crumbs,.nhead .crumbs{margin-top:0}
.dhead .crumbs{margin-bottom:0}
.viewswitch{display:inline-flex;gap:2px;padding:3px;border-radius:11px;
  border:1px solid var(--line);background:var(--card)}
.viewswitch a{padding:6px 14px;border-radius:8px;font-size:12.5px;color:var(--ink2);white-space:nowrap}
.viewswitch a:hover{color:var(--gold)}
.viewswitch a.on,.viewswitch a.on:hover{background:var(--ink);color:var(--bg)}
.viewswitch i{font-style:normal;font-family:var(--serif);font-size:11px;opacity:.62;margin-left:5px}

/* 右栏：影像档案摘要条。原来放在左栏封面下方，导致右栏简介以下空出一大片，
   而且左右两栏高度差 200 多像素；改成横向条塞在简介下面，两边就齐了。 */
.gallstrip{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:24px;
  padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.gsnum{display:flex;gap:22px;flex:0 0 auto}
.gsnum b{display:block;font-family:var(--serif);font-size:22px;line-height:1.25;font-weight:400}
.gsnum span{font-size:11px;color:var(--muted);letter-spacing:.06em}
.gsprog{flex:1 1 220px;min-width:0}
.gsbar{height:4px;border-radius:3px;background:var(--line);margin-bottom:9px;overflow:hidden}
.gsbar i{display:block;height:100%;border-radius:3px;background:var(--gold)}
.gsnote{font-size:12px;line-height:1.7;color:var(--muted)}
.gscta{flex:0 0 auto}

/* ---------------- 图集（影像版）：一套图 = 一张卡片 ---------------- */
.gallcard{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  overflow:hidden;margin-bottom:22px;box-shadow:var(--shadow)}
.gallhead{display:flex;align-items:flex-start;gap:16px;padding:18px 20px;
  border-bottom:1px solid var(--line2)}
.gallhead .gh{min-width:0;flex:1}
.gallhead h4{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.4}
.gallhead p{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.7}
.gchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.gchips span{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--bg2);color:var(--ink2)}
.gchips span.free{background:var(--goldbg);color:var(--gold2)}
.gprice{flex:0 0 auto;text-align:right}
.gprice b{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--gold2)}
.gprice span{display:block;font-size:11px;color:var(--muted);margin-top:3px}

.gallgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px 20px}
/* 4:5 竖幅：人像用 1:1 会裁掉头顶或下巴，竖幅才像写真 */
.gcell{position:relative;aspect-ratio:4/5;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg2);cursor:zoom-in}
.gcell img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 50%);transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.gcell:hover img{transform:scale(1.035)}
.gcell .no{position:absolute;left:8px;top:8px;z-index:3;font-size:10px;font-family:var(--serif);
  letter-spacing:.08em;color:#fff;background:rgba(16,18,22,.42);padding:2px 6px;border-radius:5px}
.gcell .no.free{background:rgba(176,128,60,.86)}
.gcell.locked{cursor:pointer}
.gcell.locked img{filter:blur(6px) saturate(.72)}
.gcell.locked:after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(16,18,22,.1),rgba(16,18,22,.56))}
.gcell .lk{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;color:#fff;text-align:center}
.gcell .lk svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.gcell .lk em{font-style:normal;font-size:11.5px;letter-spacing:.04em;opacity:.9}

.gallfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--line2);background:var(--card2)}
.gallfoot p{flex:1;min-width:210px;font-size:12.5px;color:var(--muted);line-height:1.75}
.gallfoot .acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gallfoot .acts .sub{font-size:12px;color:var(--ink2);border-bottom:1px solid var(--line)}
.gallfoot .acts .sub:hover{color:var(--gold);border-color:var(--gold)}
.gallfoot .btn.gold{box-shadow:0 2px 12px rgba(176,128,60,.26)}
.btn{
  display:inline-flex;align-items:center;gap:7px;border-radius:9px;padding:9px 16px;
  font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--ink);
}
.btn.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn:hover{opacity:.9}

/* 相关 */
.relgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.relcard a{display:block}
.relcard .im{aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--bg2);margin-bottom:7px}
.relcard .im img{width:100%;height:100%;object-fit:cover}
.relcard b{font-size:13px;display:block}
.relcard span{font-size:11px;color:var(--muted)}

/* 机构 */
.orggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.orgcard{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;transition:.2s}
.orgcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.orgcard .top{height:96px;display:grid;place-items:center;position:relative}
.orgcard .top b{font-family:var(--serif);font-size:26px;color:#fff;letter-spacing:.08em}
.orgcard .body{padding:14px 16px 16px}
.orgcard h3{font-size:15px}
.orgcard p{font-size:12px;color:var(--muted);margin-top:4px}
.orgcard .type{position:absolute;left:12px;top:12px;font-size:10px;color:rgba(255,255,255,.85);letter-spacing:.1em}
.orghero{display:flex;gap:26px;align-items:center}
.orgmark{width:104px;height:104px;border-radius:22px;display:grid;place-items:center;flex:0 0 auto}
.orgmark b{font-family:var(--serif);font-size:30px;color:#fff}

/* 标签索引 */
.tgroup{margin-bottom:36px}
.tgroup h3{font-size:15px;margin-bottom:4px}
.tgroup h3 span{font-size:12px;color:var(--muted);font-weight:400;margin-left:8px}
.tgroup p{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.tlist{display:flex;flex-wrap:wrap;gap:7px}
.tlist a{
  display:inline-flex;align-items:baseline;gap:6px;padding:5px 11px;border-radius:8px;
  border:1px solid var(--line);font-size:13px;background:var(--card);color:var(--ink2);
}
.tlist a:hover{border-color:var(--gold);color:var(--gold)}
.tlist a i{font-style:normal;font-family:var(--serif);font-size:11px;color:var(--muted)}

/* 资讯 */
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ncard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);transition:.2s;display:flex;flex-direction:column}
.ncard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ncard .im{aspect-ratio:16/10;overflow:hidden;background:var(--bg2)}
.ncard .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ncard:hover .im img{transform:scale(1.04)}
.ncard .body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
.ncard .kind{font-size:11px;color:var(--gold);letter-spacing:.12em}
.ncard h3{font-size:17px;line-height:1.45;margin:8px 0 6px}
.ncard p{font-size:13px;color:var(--muted);line-height:1.75}
.ncard .meta{margin-top:auto;padding-top:12px;font-size:11.5px;color:var(--muted);display:flex;gap:8px}
.nlead{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);margin-bottom:34px}
.nlead .im{aspect-ratio:4/3;overflow:hidden}
.nlead .im img{width:100%;height:100%;object-fit:cover}
.nlead .body{padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.nlead h2{font-size:30px;line-height:1.35;margin:12px 0 12px;letter-spacing:-.02em}
.nlead p{color:var(--muted);font-size:14px;line-height:1.85}
.nlead .meta{margin-top:20px;font-size:12px;color:var(--muted)}

/* ---------------- 资讯详情页：正文 + 右栏 ---------------- */
/* 原来整页只有一条 780px 的正文，宽屏两侧各空 ~290px；现在正文吃到 1fr（900+），
   右侧补 318px 的栏：文中人物 / 延伸阅读 / 更正入口 */
.nwrap{display:grid;grid-template-columns:minmax(0,1fr) 318px;column-gap:58px;
  align-items:start;padding-top:26px}
.nmain{min-width:0}
.nhead h1{font-size:38px;line-height:1.34;letter-spacing:-.03em;margin:0}
.nkick{display:inline-block;font-size:11px;letter-spacing:.14em;color:var(--gold);margin-top:16px}
.nhead .dek{font-size:17.5px;color:var(--muted);line-height:1.85;margin-top:14px}
.ncover{margin:28px 0 34px}
.ncover .artcap{margin-bottom:0}
.nbody{font-size:17px;line-height:1.98}
.nsec{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.nsec-t{font-size:11px;letter-spacing:.16em;color:var(--muted);font-weight:600;margin-bottom:16px}
.nrail{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px;
  max-height:calc(100vh - 104px);overflow-y:auto;scrollbar-width:thin;padding-bottom:4px}
.railtxt{font-size:12.5px;line-height:1.8;color:var(--muted)}
/* .railbox>a 是列表行样式（flex + 下边框），这条 CTA 要独立压回去 */
.railbox>a.railcta{display:inline-block;padding:0;border-bottom:0;margin-top:9px;
  font-size:12.5px;color:var(--gold)}
.railbox>a.railcta:hover{color:var(--ink)}
.byline{display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--muted);margin:22px 0 26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.byline b{color:var(--ink2)}
.artcover{border-radius:16px;overflow:hidden;margin-bottom:8px}
.artcover img{width:100%;max-height:520px;object-fit:cover}
.artcap{font-size:12px;color:var(--muted);margin-top:8px;margin-bottom:30px}
.body{font-size:16.5px;line-height:2.05;color:var(--ink2)}
.body p{margin:0 0 20px}
.body h2{font-size:22px;margin:36px 0 14px;color:var(--ink)}
.body blockquote{
  margin:28px 0;padding:6px 0 6px 22px;border-left:3px solid var(--gold);
  font-family:var(--serif);font-size:19px;line-height:1.85;color:var(--ink);
}
.body figure{margin:30px 0}
.body figure img{width:100%;max-height:560px;object-fit:cover;border-radius:12px}
.body figcaption{font-size:12px;color:var(--muted);margin-top:8px}
/* 列表 / 分隔线 / 链接是编辑器带来的块与行内格式，以前只能靠浏览器默认样式，
   和正文的 2.05 行高、金色强调放在一起不协调 */
.body ul,.body ol{margin:0 0 20px;padding-left:26px}
.body li{margin:6px 0}
.body li::marker{color:var(--gold)}
.body hr{margin:34px 0;border:0;border-top:1px solid var(--line)}
.body a{color:var(--gold);border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.body a:hover{border-bottom-color:var(--gold)}
.body b,.body strong{font-weight:700;color:var(--ink)}
.body i,.body em{font-style:italic}
.body u{text-decoration:underline;text-underline-offset:3px}
.tagrow{display:flex;gap:7px;flex-wrap:wrap;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.tagrow a{font-size:12px;padding:4px 11px;border-radius:999px;background:var(--bg2);color:var(--ink2)}
.tagrow a:hover{color:var(--gold)}
.people-inline{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wcell{border-radius:10px;overflow:hidden;background:var(--bg2);aspect-ratio:1/1;position:relative}
.wcell img{width:100%;height:100%;object-fit:cover}
.rellist a{display:block;padding:14px 0;border-bottom:1px solid var(--line2)}
.rellist a:hover b{color:var(--gold)}
.rellist b{font-size:15px;font-weight:600;line-height:1.5}
.rellist span{display:block;font-size:12px;color:var(--muted);margin-top:4px}

/* 闸门页 */
.gate{max-width:600px;margin:80px auto;text-align:center;border:1px solid var(--line);border-radius:20px;padding:46px 40px;background:var(--card);box-shadow:var(--shadow)}
.gate h1{font-size:26px}
.gate p{color:var(--muted);font-size:14px;line-height:1.9;margin:16px 0 26px}
.gate .btn{margin:0 5px}

/* 空状态 */
.empty{border:1px dashed var(--line);border-radius:16px;padding:56px 20px;text-align:center;color:var(--muted);font-size:14px}

/* 灯箱 */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,9,11,.94);display:grid;place-items:center;
  padding:40px 70px 108px}
.lb[hidden]{display:none}
.lbstage{display:grid;place-items:center;min-width:0}
.lb img{max-width:100%;max-height:calc(100vh - 190px);object-fit:contain;border-radius:6px}
.lbx{position:absolute;right:20px;top:16px;background:none;border:0;color:#fff;font-size:34px;line-height:1;opacity:.7}
.lbx:hover{opacity:1}
.lbn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;border-radius:10px;background:rgba(255,255,255,.09);color:#fff;font-size:28px;line-height:1;z-index:2}
.lbn:hover{background:rgba(255,255,255,.18)}
.lbn:disabled{opacity:.2;cursor:not-allowed}
.lbleft{left:14px}.lbright{right:14px}
.lbbar{text-align:center;color:#fff}
.lbbar span{font-size:12px;opacity:.6;font-family:var(--serif);display:block}
.lbbar b{font-size:13px;font-weight:400}

/* 底部信息区：缩略图条 + 计数 + 图注 统一放进一个贴底的容器。
   以前三者各自 absolute 定位（bottom:18px / 64px），窗口一矮就互相压，
   缩略图条被切掉一截、图注贴着屏幕边 —— 现在改成流式排列，
   高度由内容决定，图片区按 .hasthumbs 预留出这块地方。 */
.lbfoot{position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px 20px 16px;pointer-events:none;
  background:linear-gradient(to top,rgba(6,7,9,.72),rgba(6,7,9,0))}
.lbfoot>*{pointer-events:auto}

/* 灯箱底部缩略图条：图多时横向滚动，当前那张描金边。
   只在「能看 ≥2 张」时出现（单图页面没有可切换的东西）。 */
.lbthumbs{display:flex;gap:8px;max-width:min(92vw,880px);overflow-x:auto;padding:7px 8px;
  background:rgba(255,255,255,.06);border-radius:10px;scrollbar-width:thin;scroll-behavior:smooth}
.lbthumbs[hidden]{display:none}
.lbt{flex:0 0 auto;width:56px;height:56px;padding:0;border:0;border-radius:6px;
  overflow:hidden;background:none;opacity:.5;cursor:pointer;transition:opacity .15s}
.lbt img{width:100%;height:100%;object-fit:cover;border-radius:6px;
  max-width:none;max-height:none}            /* 覆盖 .lb img 的展示尺寸限制 */
.lbt:hover{opacity:.85}
.lbt.on{opacity:1;outline:2px solid var(--gold);outline-offset:1px}
/* 有缩略图时主图要让出底部空间，否则最下面一截被压住。
   只作用于主图 —— 写成 .lb img 会连缩略图一起改。 */
.lb.hasthumbs{padding-bottom:188px}
.lb.hasthumbs #lbimg{max-height:calc(100vh - 268px)}

/* 半屏双图（后台「图片查看器样式」选 peek）：左右各一张，翻页时整条滚半屏。
   这里是另一套舞台，单图模式那块 (#lbstage / 缩略图条) 直接隐藏。 */
.lb.peek{display:block;padding:0}
.lb.peek .lbstage,.lb.peek .lbthumbs{display:none}
.lbstrip{display:none;height:100vh;width:100%;will-change:transform;
  transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.lb.peek .lbstrip{display:flex}
/* display:flex 会盖掉 [hidden] 的默认样式，单图时条子是 hidden 的，必须显式关掉 */
.lb.peek .lbstrip[hidden]{display:none}
.lbside{flex:0 0 50vw;width:50vw;height:100vh;display:grid;place-items:center;
  padding:56px 16px 104px}
.lbside img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}

/* 页脚 */
.foot{border-top:1px solid var(--line);margin-top:60px;padding:48px 0 30px;background:var(--bg2)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.fbrand b{font-family:var(--serif);font-size:20px;letter-spacing:.16em}
.fbrand p{font-size:13px;color:var(--muted);margin-top:8px;max-width:24em}
.fgrid h4{font-size:11px;letter-spacing:.16em;color:var(--muted);margin-bottom:12px}
.fgrid a{display:block;font-size:13px;color:var(--ink2);padding:3px 0}
.fgrid a:hover{color:var(--gold)}
.fbot{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fbot a{color:var(--muted)}
.fbot a:hover{color:var(--gold)}

/* tabs */
.tabbar{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:26px;overflow-x:auto}
.tabbar a{padding:10px 2px;margin-right:18px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabbar a.on{color:var(--ink);border-color:var(--gold)}

/* 响应式 */
@media (max-width:1200px){
  .hero{grid-template-columns:1fr 440px;gap:32px}
  .hero h1{font-size:42px}
  .hv{height:370px}
  .pgrid,.bgrid,.orggrid{grid-template-columns:repeat(3,1fr)}
  .pgrid.g6,.relgrid{grid-template-columns:repeat(4,1fr)}
  .dgrid{grid-template-columns:230px minmax(0,1fr);column-gap:26px}
  .shelf{grid-template-columns:210px 1fr;gap:24px}
  .catgrid{grid-template-columns:repeat(2,1fr)}
  .newsgrid{grid-template-columns:repeat(2,1fr)}
  .nlead{grid-template-columns:1fr}
}
@media (max-width:900px){
  .wrap{padding:0 18px}
  .nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:34px}
  .hero h1{font-size:34px}
  .hv{height:300px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .pgrid,.bgrid,.orggrid,.newsgrid,.catgrid{grid-template-columns:repeat(2,1fr)}
  .pgrid.g6,.relgrid{grid-template-columns:repeat(3,1fr)}
  /* 必须 minmax(0,1fr)：裸 1fr 的轨道下限是内容的 min-content，
     右栏里有 white-space:nowrap 的行（番号 / 网盘），会把整页撑出横向滚动 */
  .dgrid{grid-template-columns:minmax(0,1fr)}
  /* 单列后资料卡不再是侧栏：解除吸附，头像收窄居中，别让一张图占满首屏 */
  .pcol{position:static;max-height:none;overflow:visible;align-items:center}
  /* 单列后整张卡竖排会霸占首屏（用户此前就是嫌这个），改横版：头像在左、资料在右 */
  .pside{max-width:560px;margin:0 auto;width:100%;display:grid;
    grid-template-columns:140px minmax(0,1fr);column-gap:18px;align-items:start}
  /* 网格项默认 min-width:auto，会按 min-content 撑破视口（390 下实测撑到 413），必须显式归零 */
  .pside>*{min-width:0}
  .pavatar{grid-row:1 / span 3}
  .pcname{text-align:left;margin-top:0}
  .pcen{text-align:left}
  .pkv{grid-column:2;margin-top:6px;border-top:0}
  .pkv>div{padding:6px 0}
  .pkv>div:last-child{border-bottom:0}
  .dinfo .gallgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dinfo .relgrid{grid-template-columns:repeat(3,1fr)}
  /* 单列后封面会撑满整屏宽，3:4 在平板上高得离谱，压矮一档 */
  .dcover{aspect-ratio:4/3;max-height:440px}
  .shelf{grid-template-columns:1fr}
  .filters{position:static}
  .rank{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .gallgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .people-inline,.wgrid{grid-template-columns:repeat(3,1fr)}
  .hsearch input{width:130px}
}
@media (max-width:600px){
  .pgrid,.bgrid,.newsgrid,.catgrid,.orggrid{grid-template-columns:1fr 1fr}
  .pgrid.g6,.relgrid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .lb{padding:20px 10px}
  .lbn{display:none}
  .dcover{aspect-ratio:4/5;max-height:none}
  /* 390px 下 140px 头像 + 资料只剩 166px，字会挤成一列；头像再收一档 */
  .pside{grid-template-columns:104px minmax(0,1fr);column-gap:14px;padding:13px}
  .pkv{margin-top:4px}
  .pkv>div{padding:5px 0}
  /* 4 格并排在 390px 下会把「2860 万」挤成两行，手机改 2×2 */
  .dstats{grid-template-columns:repeat(2,1fr)}
  .gallstrip{flex-direction:column;align-items:stretch;gap:14px;padding:15px 16px}
  .gsnum{justify-content:space-between}
  .gscta .btn{width:100%;justify-content:center}
  .gallgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
  .gallhead{flex-direction:column;gap:9px;padding:14px 16px}
  .gallfoot{padding:14px 16px}
  .gprice{text-align:left}
  .gsnum{gap:20px}
  .viewswitch a{padding:6px 11px;font-size:12px}
  .netrow{flex-wrap:wrap;gap:10px}
  .netmeta{flex-basis:calc(100% - 60px)}
  .netfoot{flex-direction:column;align-items:stretch}
  .netfoot .btn{width:100%;justify-content:center}
  .gallfoot .acts{width:100%;justify-content:space-between}
}

/* ---------------- 工具与补充组件 ---------------- */
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:54px;align-items:start}
.bar{display:block}
.hv-caps{pointer-events:none}
.chgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.chcard{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);transition:.2s}
.chcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.chcard .im{aspect-ratio:1/1;position:relative;display:grid;place-items:center;overflow:hidden}
.chcard .im b{font-family:var(--serif);font-size:54px;color:rgba(255,255,255,.94);font-weight:400}
.chcard .im i{position:absolute;right:10px;top:9px;font-style:normal;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.66)}
.chcard .cm{padding:12px 14px 14px}
.chcard .cm b{font-size:15px;font-weight:600}
.chcard .cm>span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.relcard .im{position:relative;display:grid;place-items:center;background:var(--bg2)}
.relcard .im .phini{font-size:36px}
.tlist a.on{border-color:var(--gold);color:var(--gold)}
.shelf .pgrid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1200px){.chgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:28px}.chgrid{grid-template-columns:repeat(2,1fr)}
  .facttable{grid-template-columns:1fr;gap:0}}
@media (max-width:600px){
  .facttable>div{gap:12px}
  .facttable dt{flex-basis:4.8em}
  .faqlist details .prose{padding-right:0;padding-left:31px}
}

.tlist a i{margin-left:6px;font-style:normal;font-family:var(--serif);font-size:11px;color:var(--muted)}
.cell img{object-position:var(--pos,50% 50%)}

/* ---------------- 单条问答详情页：左右结构 ---------------- */
/* 一条问答往往只有两三句话，单栏排下来整页是空的；左问题右答案才撑得住版式 */
/* ---------------- 单条问答详情页：沿用人物页的左右结构 ---------------- */
/* 左栏直接是人物卡（.dgrid + .pside，与 /person/<slug> 同一张），右栏才是问答。
   这里只补右栏自己的排版：问题标题不能套 .dinfo h1 的 44px —— 问句普遍长，
   44px 会撑成三行；索引号也不再单独占一行，跟分类徽章并排。 */
.qdetail .qindex{display:inline-block;font-family:var(--serif);font-size:12px;
  color:var(--gold);letter-spacing:.1em;margin-left:10px;vertical-align:2px}
.qdetail .qindex em{font-style:normal;color:var(--muted);margin-left:5px}
.dinfo .qtitle{font-size:31px;line-height:1.32;letter-spacing:-.02em;margin:16px 0 0}
.qdetail .pvmeta{margin-top:12px}
.qlist{margin-top:38px;padding-top:18px;border-top:1px solid var(--line)}
.qlist b{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--muted);
  font-weight:600;margin-bottom:6px}
.qlist a,.qlist span{display:flex;gap:10px;padding:8px 0;font-size:13.5px;line-height:1.55;
  color:var(--ink2);border-bottom:1px solid var(--line2)}
.qlist i{flex:0 0 auto;font-style:normal;font-family:var(--serif);font-size:11px;
  color:var(--muted);padding-top:2px}
.qlist a:hover{color:var(--gold)}
.qlist .on{color:var(--ink);font-weight:600}
.qlist .on i{color:var(--gold)}
.qblabel{font-size:11px;letter-spacing:.18em;color:var(--muted);font-weight:600;margin-bottom:14px}
.qanswer{font-size:16.5px;line-height:2;color:var(--ink)}
.qanswer p+p{margin-top:14px}
.qfacts{margin-top:30px;grid-template-columns:repeat(2,minmax(0,1fr))}
.qacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
@media (max-width:900px){
  .qfacts{grid-template-columns:minmax(0,1fr)}
  .dinfo .qtitle{font-size:23px}
}

/* ---------------- 人物分页：顶部标签 + 与首页同款左右结构 ---------------- */
/* 分页原来走「横排头像头 + 正文/右栏」，跟首页的三栏完全两种长相。
   现在复用首页骨架（.dgrid + .pside），首页右栏那份目录搬到顶部吸在顶栏下面。 */
.ptabs{position:sticky;top:66px;z-index:50;display:flex;gap:6px;margin:0 0 22px;
  padding:11px 0;background:var(--bg);border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs a{padding:7px 14px;border-radius:8px;font-size:13px;border:1px solid var(--line);
  background:var(--card);color:var(--ink2);white-space:nowrap;transition:.16s}
.ptabs a:hover{border-color:var(--gold);color:var(--gold)}
.ptabs a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* 分页的经历页独占整个内容列：原来的竖线 + 短文本会在右边留一大片空白。
   宽屏改成「年份 | 事件」的全宽行，与代表作品页同一套语法（都是按年份排的列表） */
@media (min-width:1100px){
  .timeline.rows{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .timeline.rows .tl{display:grid;grid-template-columns:86px minmax(0,1fr);gap:18px;
    align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line2)}
  .timeline.rows .tl:before{display:none}
  .timeline.rows .tl p{margin:0;font-size:14.5px;line-height:1.7}
}
/* 分页名跟在姓名后面做后缀：另起一行 h2 会跟首页的长相分叉 */
.dinfo h1 .h1sub{font-size:15px;font-weight:500;letter-spacing:.14em;
  color:var(--muted);margin-left:14px}
/* 5 个分页标签在 390px 下放不下，最后一个会被截成「常见问」。
   压字号与内边距让它整排露出来；仍保留横向滚动兜底（将来加分页不会撑破）。
   注意必须写在 .ptabs 基础规则之后 —— 媒体查询不加权重，写前面会被盖掉 */
@media (max-width:600px){
  .ptabs{gap:5px;padding:9px 0}
  .ptabs a{padding:6px 10px;font-size:12px}
  .dinfo h1 .h1sub{font-size:12.5px;letter-spacing:.1em;margin-left:9px}
}
.railbox{padding:13px 15px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.railbox b.t{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--muted);
  font-weight:600;margin-bottom:6px}
.railbox>a,.railbox>span.on{display:flex;align-items:baseline;gap:8px;padding:6px 0;
  font-size:13px;color:var(--ink2);border-bottom:1px solid var(--line2)}
.railbox>a:last-child,.railbox>span.on:last-child{border-bottom:0}
.railbox>a:hover{color:var(--gold)}
.railbox>span.on{color:var(--ink);font-weight:600}
.railbox>span.on:after{content:"当前";margin-left:auto;font-size:10.5px;color:var(--muted);font-weight:400}
/* 相关人物：竖排小行，比 6 列大图更适合窄栏 */
.railbox a.rperson{align-items:center;gap:10px;padding:7px 0}
.rperson .av{position:relative;flex:0 0 34px;width:34px;height:34px;border-radius:8px;
  overflow:hidden;background:var(--bg2)}
.rperson .av img{width:100%;height:100%;object-fit:cover}
.rperson .av .phini{font-size:15px}
.rperson .nm{min-width:0;display:block}
.rperson .nm b{display:block;font-size:13px;font-weight:500;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rperson .nm em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:1px}
/* 资讯详情页断点：右栏收窄 → 单列时挪到正文下方 */
@media (max-width:1200px){
  .nwrap{grid-template-columns:minmax(0,1fr) 272px;column-gap:34px}
  .nhead h1{font-size:33px}
}
@media (max-width:900px){
  .nwrap{grid-template-columns:minmax(0,1fr);padding-top:18px}
  .nhead h1{font-size:27px}
  .nhead .dek{font-size:16px}
  .nrail{position:static;max-height:none;overflow:visible;margin-top:36px;
    display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .nsec{margin-top:34px;padding-top:20px}
}
@media (max-width:600px){
  .nhead h1{font-size:23px}
  .nrail{grid-template-columns:minmax(0,1fr)}
  .nbody{font-size:16.5px;line-height:1.95}
}
/* 900–1120 之间顶栏塞不下 8 个导航项：原来只能靠 .nav{overflow:hidden} 硬裁，
   结果「标签」整个消失还看不出是裁的。这一档收掉标语、缩内边距与搜索框宽度 */
@media (max-width:1120px){
  .logo span{display:none}
  .nav{gap:2px;margin-left:10px}
  .nav a{padding:8px 11px}
  .hsearch input{width:150px}
}

/* ---------------- 前台会员：登录 / 金币 / 解锁 ---------------- */
/* 顶栏的会员入口：登录后显示「昵称 + 金币」，未登录只有一个「登录」 */
.mebtn{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink2);
  font-size:12.5px;transition:.16s;white-space:nowrap}
.mebtn b{font-weight:600;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mebtn i{font-style:normal;color:var(--gold);font-size:11.5px}
.mebtn:hover{border-color:var(--gold);color:var(--gold)}
.mebtn.guest{color:var(--ink)}

/* 登录 / 注册 */
.mwrap{display:grid;grid-template-columns:420px minmax(0,1fr);gap:44px;align-items:start;
  padding-bottom:60px}
.mcard{padding:26px 26px 22px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow)}
.mf{display:block;margin-bottom:16px}
.mf span{display:block;font-size:12px;color:var(--muted);letter-spacing:.04em;margin-bottom:7px}
.mf input{width:100%;padding:11px 13px;font-size:14px;font-family:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;outline:none}
.mf input:focus{border-color:var(--gold);background:var(--card)}
.merr{margin:0 0 14px;padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.6;
  color:#a33;background:rgba(170,51,51,.07);border:1px solid rgba(170,51,51,.18)}
.msubmit{width:100%;justify-content:center;margin-top:4px}
.mswitch{margin-top:14px;text-align:center}
.mswitch a{color:var(--gold);border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}

/* ---------------- 登录 / 注册浮层 ----------------
   全站唯一的登录入口。它不是「更好看的弹窗」，而是替代跳页：整页跳到 /login 会丢掉
   当前看到第几张图、翻到第几页这类状态，回来还得重新找位置。
   颜色一律走变量 —— 深色主题下这块最容易出现白底白字。 */
.adlg{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:24px 18px;overflow-y:auto}
.adlg[hidden]{display:none}
.adlg-mask{position:fixed;inset:0;background:rgba(14,16,19,.52);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.adlg-box{position:relative;width:100%;max-width:412px;margin:auto;padding:26px 26px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);animation:adlgIn .18s ease-out}
@keyframes adlgIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.adlg-box{animation:none}}
.adlg-x{position:absolute;right:12px;top:10px;width:30px;height:30px;line-height:1;
  display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--muted);
  background:none;border:0;border-radius:50%}
.adlg-x:hover{background:var(--bg2);color:var(--ink)}

.adlg-head{padding-right:28px}
.adlg-k{margin:0 0 6px;font-size:10px;letter-spacing:.18em;color:var(--gold);font-weight:700}
.adlg-head h2{font-size:21px;letter-spacing:-.02em}
.adlg-sub{margin-top:7px;font-size:12.5px;line-height:1.65;color:var(--muted)}

.adlg-tabs{display:flex;gap:4px;margin:18px 0 16px;border-bottom:1px solid var(--line)}
.adlg-tabs button{position:relative;flex:1;padding:9px 0 11px;background:none;border:0;
  font-size:13.5px;font-weight:600;color:var(--muted);transition:.16s}
.adlg-tabs button.on{color:var(--ink)}
.adlg-tabs button.on::after{content:"";position:absolute;left:22%;right:22%;bottom:-1px;height:2px;
  border-radius:2px;background:var(--gold)}
.adlg-tabs button:hover{color:var(--ink2)}

.adlg-form .mf{margin-bottom:13px}
.adlg-form .mf input{background:var(--bg)}
.adlg-form .mf input:focus{background:var(--card)}
.adlg-send{width:100%;justify-content:center;margin-top:6px;height:42px}
.adlg-send[disabled]{opacity:.55;cursor:progress}
.adlg-err{margin:0 0 13px;padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.6;
  color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 22%,transparent)}
/* 服务端把错误放在这个位置（整页提交回来时），浮层里 JS 用同一个视觉 */
.adlg-err[hidden]{display:none}
.adlg-foot{margin-top:15px;padding-top:13px;border-top:1px solid var(--line2);
  font-size:11px;line-height:1.7;color:var(--muted)}
.adlg-foot a{color:var(--gold)}

/* 未登录点锁定格：它是个 div，不是链接，所以要给出「能点」的提示 */
[data-auth]{cursor:pointer}
[data-auth]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (max-width:520px){
  /* 小屏改成底部抽屉：手机上一屏装得下键盘和弹窗，居中卡片会被键盘顶掉一半。
     margin 必须归零 —— 桌面用的 margin:auto 会覆盖 align-items:flex-end，
     结果还是居中（而且看起来像「弹窗没贴底、背景透出来」）。 */
  .adlg{padding:0;align-items:flex-end}
  .adlg-box{max-width:none;margin:0;border-radius:18px 18px 0 0;
    padding:22px 20px calc(18px + env(safe-area-inset-bottom, 0px))}
}

/* 顶栏在 360 左右的窄机上会挤爆：logo + 搜索框 + 登录 + 主题按钮加起来超过
   可用宽度，.prefs 被推到屏幕外 26px —— 结果是整页横向滚动条。
   三处一起收紧才够，只把搜索框改窄省下的 20px 补不上这个缺口。 */
@media (max-width:560px){
  .tb{gap:8px}
  .hsearch input{width:96px;padding:7px 26px 7px 11px;font-size:12.5px}
  .hsearch input:focus{width:118px}
  .prefs{gap:5px}
  .mebtn{padding:0 9px;height:32px}
  .pbtn{width:32px;height:32px}
}

/* 我的账号 */
.mgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;
  padding-bottom:70px}
/* 余额卡只放余额与说明；充值包独立一行三张 —— 挤在一行里时三块只有 60px 宽，
   看起来像标签而不是按钮，点哪儿都不确定 */
.coinbar{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:20px 24px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.cnum{flex:0 0 auto}
.cnum b{display:block;font-family:var(--serif);font-size:34px;line-height:1.1}
.cnum span{font-size:10.5px;letter-spacing:.14em;color:var(--muted)}
.cnote{margin:0;font-size:12.5px;color:var(--muted);line-height:1.7;max-width:44ch}
.crule{margin-left:auto;font-size:12px;color:var(--gold);white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.coinpacks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.coinpacks form{margin:0}
.pack{display:flex;flex-direction:row;align-items:baseline;gap:7px;width:100%;
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  cursor:pointer;transition:.16s;color:var(--ink);text-align:left}
.pack b{font-family:var(--serif);font-size:21px;line-height:1}
.pack span{font-size:10.5px;color:var(--muted);letter-spacing:.06em}
.pack em{font-style:normal;font-size:12px;color:var(--ink2);margin-left:6px}
.pack i{margin-left:auto;font-style:normal;font-size:11px;color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:999px;padding:3px 10px}
.pack:hover{border-color:var(--gold);background:var(--card-soft);transform:translateY(-1px)}
.mempty{padding:34px 20px}
.mok{margin-top:12px;padding:10px 14px;border-radius:10px;font-size:13px;color:#1f6f5c;
  background:rgba(31,111,92,.08);border:1px solid rgba(31,111,92,.2)}
.mh3{font-size:11px;letter-spacing:.14em;color:var(--muted);font-weight:600;
  margin:34px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.minegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.minecard{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--card);transition:.16s}
.minecard:hover{border-color:var(--gold);transform:translateY(-2px)}
.minecard .im{position:relative;aspect-ratio:4/5;background:var(--bg2);overflow:hidden}
.minecard .im img{width:100%;height:100%;object-fit:cover}
.minecard .phini{font-size:34px}
.minecard b,.minecard span,.minecard em{display:block;padding:0 11px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.minecard b{margin-top:10px;font-size:13.5px}
.minecard span{font-size:11.5px;color:var(--muted);margin-top:2px}
.minecard em{font-style:normal;font-size:10.5px;color:var(--muted);padding-bottom:11px;margin-top:4px}
.mledger{padding:18px 18px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);position:sticky;top:88px}
.mledger h3{font-size:10.5px;letter-spacing:.14em;color:var(--muted);font-weight:600;
  margin-bottom:12px}
.lrow{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line2)}
.lrow:last-of-type{border-bottom:0}
.lrow b{flex:0 0 54px;text-align:right;font-family:var(--serif);font-size:14px}
.lrow b.up{color:var(--gold)}
.lrow b.dn{color:var(--ink2)}
.lrow div{min-width:0;flex:1}
.lrow span{display:block;font-size:12.5px;color:var(--ink2)}
.lrow em{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:2px}
.lout{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted)}
.lout:hover{color:var(--gold)}

/* 图集卡付款区：已解锁 / 余额 */
.gallfoot .paid{font-size:12.5px;color:#1f6f5c;font-weight:600}
.gallfoot .bal{font-size:12px;color:var(--muted)}
.gallfoot .bal.need{color:#a33}
.gallfoot form{margin:0}
.mflash{margin:0 0 16px;padding:11px 14px;border-radius:10px;font-size:13px;line-height:1.65}
.mflash.ok{color:#1f6f5c;background:rgba(31,111,92,.08);border:1px solid rgba(31,111,92,.2)}
.mflash.warn{color:#8a5a1a;background:rgba(176,128,60,.1);border:1px solid rgba(176,128,60,.26)}

@media (max-width:1000px){
  .mwrap,.mgrid{grid-template-columns:minmax(0,1fr);gap:28px}
  .minegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mledger{position:static}
}
@media (max-width:600px){
  .mebtn b{max-width:4.5em}
  .mebtn i{display:none}
  .minegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .coinbar{gap:16px;padding:16px 18px}
  .coinbar b{font-size:28px}
  .coinpacks{grid-template-columns:minmax(0,1fr)}
}
