/* 追星档案 · 样式（/people/）
 * =========================================================
 * ⚠️ 本文件由 _tools/_split-people.cjs 从预览单文件自动抽出 ——
 *    直接改这里也行，但下次跑拆分脚本会被覆盖；改预览页再重跑更稳。
 * 目录：
 *   1. 主题变量（深浅色两套，全站跟随博客主题）
 *   2. 首屏（品牌行 / 大图轮播 / 随机滚动窗）
 *   3. 列表（筛选 / 卡片网格）
 *   4. 详情页（hero / 资料 / 记录双区 / 写真双区）
 *   5. 弹窗（解锁 / 编辑 / 上传）
 *   6. 通用件（toast / 波浪 / 兜底字形）
 * 改样式后记得 bump index.html 里的 ?v=
 * ========================================================= */

/* ===================================================================
   方向 B v2：日系写真集（参照日向坂46官网手法重构）
   v1 的问题：满幅模糊大图铺屏 = 单调；纯色底 = 死板；零装饰 = AI 味
   v2 的修法：
     ① 背景 = 径向渐变光斑 + 极淡圆点底纹（不再纯色）
     ② 首屏 = 拍立得拼贴阵列（不再满屏大图）
     ③ 全站「框」系统 = 圆角 24px + 淡蓝调阴影 + 1px 描边
     ④ 图形装饰 = 花朵 / 星星 / 圆点 / 波浪（可爱感的真正来源）
     ⑤ 参差化 = 卡片微角度 + 位移差异（击碎同质化）
   =================================================================== */
:root{
  --bg:#f4fafc; --card:#ffffff;
  --primary:#5bbee4; --primary-deep:#3aa3cc;
  --ink:#104c64; --ink-soft:#6b8c9c; --faint:#a8bfca;
  --accent-y:#ffd873; --accent-p:#f2a7b8;
  --line:rgba(16,76,100,.08);
  --fb-bg:linear-gradient(160deg,#eef6f9 0%,#e3eff5 52%,#dfeef6 100%);
  --shadow:0 4px 20px rgba(16,76,100,.07);
  --shadow-lg:0 10px 34px rgba(16,76,100,.11);
  --r:24px;
  --kai:"LXGW WenKai","霞鹜文楷","Kaiti SC","STKaiti",KaiTi,serif;
  --hei:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  /* 顶栏配色：跟随主题（原来写死 rgba(0,0,0,.82)，浅色主题下一条黑杠很突兀） */
  --bar-bg:rgba(255,255,255,.9); --bar-fg:var(--ink); --bar-bd:rgba(16,76,100,.12);
  --bar-btn:rgba(16,76,100,.07);
}
html[data-theme="dark"]{
  --bg:#0e1a20; --card:#16262e;
  --primary:#7fd0f0; --primary-deep:#5bbee4;
  --ink:#e8f4f8; --ink-soft:#8fb0be; --faint:#5a7580;
  --accent-y:#ffe29a; --accent-p:#e88ba3;
  --line:rgba(255,255,255,.09);
  --fb-bg:linear-gradient(160deg,#1b2c35 0%,#16262e 62%,#142129 100%);
  --shadow:0 4px 20px rgba(0,0,0,.3);
  --shadow-lg:0 10px 34px rgba(0,0,0,.45);
  --bar-bg:rgba(12,19,24,.88); --bar-fg:#dceaf0; --bar-bd:rgba(255,255,255,.13);
  --bar-btn:rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{color:var(--ink);font-family:var(--hei);position:relative;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 6%, rgba(91,190,228,.20), transparent 42%),
    radial-gradient(circle at 90% 3%, rgba(255,216,115,.16), transparent 40%),
    radial-gradient(circle at 50% 96%, rgba(91,190,228,.11), transparent 55%),
    var(--bg);
  background-attachment:fixed}
/* 极淡圆点底纹 —— 把"纯色"变成"有质感" */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:radial-gradient(var(--ink) 1px,transparent 1px);
  background-size:24px 24px}
body>*{position:relative;z-index:1}

/* ---------- 顶部工具条（预览用，不属于设计本身） ---------- */
.devbar{position:sticky;top:0;z-index:200;display:flex;gap:8px;align-items:center;
  padding:8px 14px;background:var(--bar-bg);color:var(--bar-fg);font-size:12px;
  border-bottom:1px solid var(--bar-bd);backdrop-filter:blur(12px);
  transition:background .25s,color .25s,border-color .25s}
.devbar b{font-family:var(--kai);font-size:14px;color:var(--primary)}
.devbar a{color:var(--bar-fg);opacity:.75;text-decoration:none;padding:4px 10px;border-radius:99px;
  border:1px solid var(--bar-bd);transition:opacity .16s,border-color .16s}
.devbar a:hover{opacity:1;border-color:var(--primary)}
.devbar a.on{background:var(--primary);color:#0d2b36;border-color:transparent;font-weight:600;opacity:1}
/* 返回博客（与 map/media/res 一致：独立页在工具栏最左放返回入口） */
.devbar .db-back{padding:2px 9px;font-size:15px;line-height:1.25}
.devbar .sp{flex:1}
.devbar button{background:var(--bar-btn);border:1px solid var(--bar-bd);color:var(--bar-fg);
  border-radius:99px;padding:4px 10px;cursor:pointer;font-size:12px;font-family:inherit;
  transition:background .16s,border-color .16s}
.devbar button:hover{border-color:var(--primary);color:var(--primary-deep)}
/* 已解锁态：做成「可按的实心按钮」，暗示点它就能锁定（以前这里是死按钮，点了没反应） */
.devbar button.on{background:var(--primary);color:#0d2b36;border-color:transparent;font-weight:600}
.devbar button.on:hover{background:var(--primary);color:#0d2b36;opacity:.86}

/* =========================================================
   设计本体
   ========================================================= */
.page{max-width:1220px;margin:0 auto;padding:26px 20px 80px}

/* ---------- 品牌行 ---------- */
.brand{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow);border:1px solid var(--line);position:relative;overflow:hidden}
@media(max-width:640px){
  .brand{padding:12px 15px;gap:10px}
  .brand h1{font-size:18px}
  .brand .en{font-size:8.5px;letter-spacing:.16em}
  .brand .mark{width:32px;height:32px}
  .brand .r{font-size:10px}
  .brand .r b{font-size:14px}
}
.brand .l{display:flex;align-items:center;gap:12px}
.brand .mark{width:38px;height:38px;flex:none}
.brand h1{margin:0;font-family:var(--kai);font-size:21px;letter-spacing:.05em;
  font-weight:600;line-height:1.2}
.brand .en{font-size:10px;letter-spacing:.24em;color:var(--ink-soft);margin-top:3px}
.brand .r{text-align:right;font-size:11px;color:var(--ink-soft);line-height:1.9;
  white-space:nowrap;flex:none}
.brand .r b{font-family:var(--kai);font-size:17px;color:var(--primary-deep);font-weight:600}
.brand .deco{position:absolute;right:-10px;top:-14px;width:78px;height:78px;opacity:.5}

/* ---------- 首屏 ①：大图轮播（高关注度优先） ---------- */
.stage{margin-top:22px;background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow);border:1px solid var(--line);padding:20px 20px 18px;
  position:relative;overflow:hidden}
.stage .hd{display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;margin:6px 4px 16px;position:relative}
.stage .hd .k{font-size:10.5px;letter-spacing:.3em;color:var(--primary-deep);
  text-transform:uppercase;font-weight:700}
.stage .hd h2{font-family:var(--kai);font-size:clamp(20px,3.6vw,28px);margin:8px 0 0;
  letter-spacing:.05em;font-weight:600;line-height:1.2}
.stage .hd .sub{font-size:12px;color:var(--ink-soft);margin-top:7px}
.stage .hd .r{text-align:right;font-size:11px;color:var(--ink-soft);flex:none;
  white-space:nowrap;padding-bottom:3px}
.stage .hd .r b{font-family:var(--kai);font-size:16px;color:var(--primary-deep)}

/* 轮播主体：左侧大图 + 右侧滑动缩略图轨 */
.hero{display:grid;gap:14px}
@media(min-width:760px){.hero{grid-template-columns:1fr 132px;align-items:start}}
.hmain{position:relative;border-radius:18px;overflow:hidden;background:#0d1a20;
  cursor:pointer;width:100%;height:clamp(260px,38vw,420px)}
@media(max-width:760px){.hmain{height:clamp(220px,56vw,340px)}}
/* ⚠️ 未激活的 slide 只靠 opacity:0 隐藏，**依然可被点击**，而 8 张又都绝对定位叠在一起，
   于是 DOM 里最后一张永远压在最上层、把主图区的所有点击都吃掉
   —— 症状：「点大图永远进同一个人」（实测恒定进最后一张 桥本爱 p22）。
   必须显式 pointer-events:none，只给 .on 放行。 */
.hmain .sl{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.hmain .sl.on{opacity:1;pointer-events:auto}
.hmain .sl img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
  display:block}
/* 横图（多为杂志内页/剧照，人物常偏中心或偏右）—— 取中更稳，避免切到排版文字 */
.hmain .sl.wide img{object-position:center 34%}
/* 文字直接压在图上 —— 关键：不再用白色信息条 */
.hmain .gv{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,28,38,.86) 0%,rgba(6,28,38,.42) 34%,
    rgba(6,28,38,.06) 60%,transparent 100%)}
.hmain .cpt{position:absolute;left:0;right:0;bottom:0;padding:22px 24px 20px;color:#fff;
  pointer-events:none}
.hmain .cpt .k{display:inline-flex;align-items:center;gap:7px;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;opacity:.92;
  background:rgba(91,190,228,.92);color:#06303f;padding:3px 10px;border-radius:99px;
  font-weight:700}
.hmain .cpt h3{margin:11px 0 0;font-family:var(--kai);
  font-size:clamp(24px,4.6vw,38px);font-weight:600;letter-spacing:.05em;
  line-height:1.14;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.hmain .cpt .en{font-size:11.5px;opacity:.88;margin-top:8px;letter-spacing:.04em}
.hmain .cpt .tg{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.hmain .cpt .tg span{font-size:10.5px;padding:3px 10px;border-radius:99px;
  background:rgba(255,255,255,.19);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22)}
.hmain .cpt .go{margin-top:13px;font-size:11.5px;opacity:.9;display:flex;
  align-items:center;gap:6px}

/* 轮播控制：左右箭头 + 圆点 */
.hnav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;
  border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:#104c64;box-shadow:0 3px 12px rgba(0,0,0,.22);
  transition:all .2s;opacity:0}
.hmain:hover .hnav{opacity:1}
.hnav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.hnav.pv{left:14px}
.hnav.nx{right:14px}
.hdots{position:absolute;right:22px;bottom:22px;display:flex;gap:6px;z-index:3}
.hdots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.45);
  cursor:pointer;transition:all .3s}
.hdots i.on{background:#fff;width:22px}
@media(max-width:640px){.hnav{display:none}.hdots{right:16px;bottom:16px}
  .hmain .cpt{padding:16px 16px 14px}}

/* 轮播右侧：竖向缩略图轨（桌面）—— 每张高度由 JS 等分容器，恰好铺满不出半截 */
.hrail{display:flex;flex-direction:column;gap:8px;overflow:hidden;
  scrollbar-width:none;padding-right:2px;min-height:0}
.hrail::-webkit-scrollbar{display:none}
.hrail .rt{width:100%;border-radius:12px;overflow:hidden;cursor:pointer;position:relative;
  border:2px solid transparent;opacity:.62;transition:all .25s;background:var(--fb-bg);
  flex:1 1 0;min-height:0}
.hrail .rt.on{opacity:1;border-color:var(--primary);
  box-shadow:0 6px 18px rgba(91,190,228,.34)}
.hrail .rt img{width:100%;height:100%;object-fit:cover;display:block}
.hrail .rt .rfb{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--kai);font-size:30px;font-weight:600;color:rgba(16,76,100,.2)}
html[data-theme="dark"] .hrail .rt .rfb{color:rgba(232,244,248,.2)}
.hrail .rt .rnm{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;
  font-family:var(--kai);font-size:10.5px;color:#fff;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(to top,rgba(6,28,38,.82),transparent);opacity:.92}
.hrail .rt.on .rnm{opacity:1}
@media(max-width:759px){.hrail{flex-direction:row;overflow-x:hidden;overflow-y:hidden;
  max-height:none;gap:8px}
  .hrail .rt{width:auto;flex:1 1 0;height:56px!important;border-radius:9px}
  .hrail .rt .rnm{font-size:9px;padding:8px 4px 3px}
  .hrail .rt .rfb{font-size:18px}}

/* ---------- 首屏 ②：随机人物滚动窗 ---------- */
.roll{margin-top:16px;background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow);border:1px solid var(--line);padding:17px 20px 15px;
  position:relative;overflow:hidden}
.roll .rh{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.roll .rh .t{font-family:var(--kai);font-size:15px;font-weight:600;letter-spacing:.04em}
.roll .rh .n{font-size:11px;color:var(--faint)}
.roll .rh .ln{flex:1;height:1px;background:var(--line)}
.roll .rh .sw{display:flex;align-items:center;gap:6px;font-size:10.5px;
  color:var(--faint);white-space:nowrap}
.roll .rh .sw b{font-family:var(--kai);color:var(--primary-deep);font-size:12px}
/* 两层轨道交替：滑出层 + 待入层，任何时刻都有一层在位，无空窗。
   🔴 位移必须用 100% —— 曾经写 46px，而轨道实际宽 800px+，等于两层**原地交叉淡入淡出**，
      看起来就是「上一组没走、下一组就来了，一群头像糊在一起」（用户实测反馈）。 */
.rvp{overflow:hidden;position:relative;margin:0 -4px;padding:4px}
.rtrack{display:flex;gap:14px;
  transition:transform .62s cubic-bezier(.4,0,.2,1)}
/* 非活动层：瞬时隐形 + 复位 + 不截获指针。
   ⚠️ 必须带 transition:none —— 否则它会从 translateX(-100%) 「滑回」原位，虽然不可见但会干扰下一轮起点。
   ⚠️ opacity:0 不阻止点击（踩过），要显式关 pointer-events。 */
.rtrack.off{opacity:0;pointer-events:none;transform:none;transition:none}
.rtrack.out{transform:translateX(-100%)}   /* 正在滑出（向左） */
.rtrack.in {transform:translateX(100%)}    /* 待入场：先瞬移到右侧再滑入 */
/* 两层叠放：B 层绝对定位盖在 A 层上，交替显隐 */
#rtrackB{position:absolute;left:4px;top:4px;right:4px;flex-wrap:nowrap}
.rcell{flex:0 0 auto;width:88px;text-align:center;cursor:pointer;
  transition:transform .25s}
.rcell:hover{transform:translateY(-5px)}
.rcell .av{width:88px;height:88px;border-radius:50%;overflow:hidden;
  border:3px solid var(--card);box-shadow:0 4px 14px rgba(16,76,100,.18);
  background:var(--fb-bg);position:relative;transition:box-shadow .25s}
.rcell .avwrap{position:relative;display:inline-block}
.rcell:hover .av{box-shadow:0 10px 24px rgba(91,190,228,.42)}
.rcell .av img{width:100%;height:100%;object-fit:cover;display:block}
/* 圆形头像的兜底字形：与列表一致走低调路线（浅底淡字），不用饱和色块 */
.rcell .av .fb{width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--kai);font-size:24px;font-weight:600;color:rgba(16,76,100,.24)}
html[data-theme="dark"] .rcell .av .fb{color:rgba(232,244,248,.22)}
/* 张数角标挂在圆之外（.av 会裁圆，放里面会被切）—— 贴右上角悬出 */
.rcell .avwrap .rv{position:absolute;right:-4px;top:2px;
  font-size:9.5px;padding:1.5px 7px;border-radius:99px;background:rgba(16,76,100,.9);
  color:#fff;white-space:nowrap;z-index:3;pointer-events:none;
  box-shadow:0 2px 6px rgba(0,0,0,.22)}
.rcell .rn{font-size:11.5px;margin-top:8px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-family:var(--kai)}
@media(max-width:640px){
  .rcell,.rcell .av{width:66px}
  .rcell .av{height:66px}
  .rcell .rn{font-size:10.5px;margin-top:6px}
  .roll{padding:14px 14px 12px}
  .rtrack{gap:11px}
}

.stage .foot{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:11.5px;color:var(--ink-soft)}
.stage .foot span{display:flex;align-items:center;gap:6px}

/* ---------- 装饰元素 ---------- */
.deco{position:absolute;pointer-events:none}
.deco.flower{width:30px;height:30px}
.deco.spark{width:17px;height:17px}
.deco.ring{width:44px;height:44px}
/* 漂浮小球 */
.ball{position:absolute;border-radius:50%;pointer-events:none;
  animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.ball{animation:none}}

/* ---------- 筛选条 ---------- */
.bar{margin-top:20px;background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow);border:1px solid var(--line);padding:15px 20px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative}
.bar .lab{font-size:11px;letter-spacing:.14em;color:var(--faint);font-weight:700}
/* 宽窄视图切换按钮（筛选条最右） */
.viewbtn{flex:none;font-family:inherit;font-size:12px;padding:6px 13px;border-radius:99px;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;
  white-space:nowrap;transition:border-color .16s,color .16s,background .16s}
.viewbtn:hover{border-color:var(--primary);color:var(--primary-deep);background:rgba(91,190,228,.07)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{font-size:12.5px;padding:6px 14px;border-radius:99px;cursor:pointer;
  color:var(--ink-soft);border:1px solid var(--line);background:transparent;
  transition:all .18s;white-space:nowrap}
.chip:hover{border-color:var(--primary);color:var(--primary-deep)}
.chip.on{background:var(--primary);color:#fff;border-color:transparent;font-weight:600;
  box-shadow:0 4px 12px rgba(91,190,228,.35)}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:99px;
  padding:7px 16px;min-width:190px}
.search input{border:0;background:transparent;outline:0;color:var(--ink);
  font-size:13px;width:100%;font-family:var(--hei)}
.search input::placeholder{color:var(--faint)}

/* ---------- 卡片网格 ---------- */
.sechead{display:flex;align-items:center;gap:11px;margin:30px 0 16px}
.sechead .t{font-family:var(--kai);font-size:20px;font-weight:600;letter-spacing:.04em}
.sechead .n{font-size:11.5px;color:var(--ink-soft)}
.sechead .ln{flex:1;height:1px;background:var(--line)}
/* 卡片网格：用 flex + 百分比宽度，而不是 grid 固定列数 ——
   因为要「宽窄视图」**平滑切换**：grid-template-columns 的轨道数变化是离散的、无法过渡，
   而 flex-wrap 下改 width 是连续动画。
   窄 = 一排 6 个（3:4 竖框，适合竖图）；宽 = 一排 3 个（4:3 横框，适合横图）。gap 20px。 */
.grid{display:flex;flex-wrap:wrap;gap:20px;--cw:calc((100% - 100px) / 6)}
.grid.is-wide{--cw:calc((100% - 40px) / 3)}
@media(max-width:640px){
  .grid{gap:12px;--cw:calc((100% - 12px) / 2)}          /* 手机窄视图：2 人一排 */
  .grid.is-wide{--cw:100%}                               /* 手机宽视图：1 人一排 */
  .card .nm{font-size:15px}
  .card .tagline{font-size:10.5px}
}
/* 卡片：整张图铺满，文字压在图上（不再有白色信息条） */
.card{flex:0 0 auto;width:var(--cw);
  background:var(--card);border-radius:var(--r);overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow);border:1px solid var(--line);
  /* 默认只过渡 hover 效果；**宽度过渡由 JS 按需挂 .anim**（只挂视口内的卡片）——
     「宽窄切换」要同时动 74 个卡片，全量做 width 过渡会把帧率从 145 打到 28（实测）。 */
  transition:transform .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s;
  position:relative;
  /* 限制布局/绘制的影响范围，减少重排传播。
     ⚠️ 刻意**不用** content-visibility:auto —— 它会让视口外卡片的内容**跳过渲染**，
        连带里面的 <img> 对 IntersectionObserver 不可见 → **懒加载整个失效**（实测只剩 3 张图会加载）。 */
  contain:layout paint;
}
.card.anim{transition:width .22s cubic-bezier(.3,.8,.3,1),transform .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card .ph{position:relative;overflow:hidden;background:var(--fb-bg);aspect-ratio:3/4}
.grid.is-wide .card .ph{aspect-ratio:4/3}
.card.anim .ph{transition:aspect-ratio .22s cubic-bezier(.3,.8,.3,1)}
/* 🔴 比例过渡放在**容器**上、图片用 object-fit 填满。
     曾经把 aspect-ratio 设在 <img> 上 —— 那等于让浏览器每帧**重新缩放重绘整张图**
     （卡片图 768×1024 这个量级，25 张同屏直接把切换帧率压到 40）；
     设在容器上只是改**裁切视口**，图片本身尺寸不变，成本低得多。 */
.card .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .ph img{transform:scale(1.07)}
/* 底部渐变压暗，保证压在图上的文字可读 */
.card .gv{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,28,38,.88) 0%,rgba(6,28,38,.46) 32%,
    rgba(6,28,38,.08) 54%,transparent 74%)}
/* 悬浮文字层：姓名 + 一句话 + 标签 + 张数，全部压在图片上 */
.card .ov{position:absolute;left:0;right:0;bottom:0;padding:13px 14px 14px;
  color:#fff;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.card .nm{font-family:var(--kai);font-size:17px;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 10px rgba(0,0,0,.45)}
.card .tagline{font-size:11px;line-height:1.55;color:rgba(255,255,255,.84);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .tg{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.card .tg span{font-size:10px;padding:2px 8px;border-radius:99px;
  background:rgba(255,255,255,.18);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);color:#fff}
.card .tier{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:700;
  padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.94);
  color:var(--primary-deep);letter-spacing:.04em;box-shadow:0 2px 8px rgba(16,76,100,.2)}
.card .tier.s{background:var(--primary);color:#fff}
/* 右上角角标改成竖排堆叠（原来只有一个 .cnt 绝对定位在右上，加了热度角标会重叠） */
.card .rstack{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;
  align-items:flex-end;gap:5px}
.card .rstack>span{font-size:10.5px;padding:3px 9px;border-radius:99px;
  background:rgba(16,76,100,.6);color:#fff;white-space:nowrap;
  backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18)}
/* 热度角标：全站可见（御坂拍板）。访问用中性色、点赞用暖色，扫一眼能区分 */
.card .heat{background:rgba(16,76,100,.72)}
.card .heat.like{background:rgba(200,66,86,.8)}

/* 灯箱工具栏里的「点赞」项。
   ⚠️ viewer.css 有 `.viewer-toolbar>ul>li{width:24px;height:24px;border-radius:50%;overflow:hidden;background-color:rgba(0,0,0,.5)}`
      —— 它自己的图标全靠 `li:before` 的雪碧图，我们这个没有 before，不覆盖就会被压成
      一个 24×24 的空黑圆点。必须显式放开宽高/圆角/截断。
   ⚠️ 本页 <style> 在 viewer.min.css **之前**（正式页里反过来），所以这里一律带 !important，
      否则两个环境里表现会不一致。 */
.viewer-toolbar>ul>li.viewer-like{
  width:auto!important;height:auto!important;min-width:0;
  border-radius:99px!important;overflow:visible!important;
  padding:4px 12px!important;margin-left:6px;
  display:inline-flex;align-items:center;
  font-family:inherit;font-size:13px;line-height:17px;color:#fff;
  cursor:pointer;user-select:none;white-space:nowrap}
.viewer-toolbar>ul>li.viewer-like:hover{background-color:rgba(200,66,86,.9)!important}
.viewer-toolbar>ul>li.viewer-like:focus{box-shadow:0 0 3px #fff}
.hint{text-align:center;padding:48px 0;color:var(--ink-soft);font-size:13px}
/* 兜底卡（无图）的文字层仍需可读：把渐变遮罩换成整片淡深色 */
.card.nopic .gv{background:linear-gradient(to top,rgba(16,76,100,.86) 0%,
  rgba(16,76,100,.34) 40%,rgba(16,76,100,.06) 72%,transparent 100%)}
html[data-theme="dark"] .card.nopic .gv{background:linear-gradient(to top,
  rgba(0,0,0,.72) 0%,rgba(0,0,0,.26) 42%,transparent 74%)}

/* 无图人物的兜底字形卡 —— 刻意做得低调（浅底 + 淡字），
   避免「一屏亮卡」的刺眼感：未加载完/真无图时都不破坏整体观感。
   ⚠️ 比例必须**跟着视图走**：原来写死 3/4，宽视图下它不跟着变，
      就会比同行的有图卡片高一截、露出的浅色底看着像「图片下面的白边」（用户实测反馈）。 */
.fbwrap{width:100%;aspect-ratio:3/4;display:grid;place-items:center;
  font-family:var(--kai);font-size:52px;font-weight:600;color:rgba(16,76,100,.16);
  letter-spacing:.06em;position:relative}
.card.anim .fbwrap{transition:aspect-ratio .22s cubic-bezier(.3,.8,.3,1)}
.grid.is-wide .fbwrap{aspect-ratio:4/3}
html[data-theme="dark"] .fbwrap{color:rgba(232,244,248,.15)}
.fbwrap .fbnote{position:absolute;left:50%;top:50%;transform:translate(-50%,46px);
  font-size:10px;letter-spacing:.14em;color:var(--faint);font-family:var(--hei);font-weight:400}

/* ---------- 波浪分隔 ---------- */
.wave{display:block;width:100%;height:26px;margin:8px 0 0;opacity:.5}

/* ---------- 详情 ---------- */
.detail{display:none}
.detail.show{display:block}
/* 列表页「另有 N 位私密人物」的解锁引导胶囊 */
.unlock-pill{background:rgba(242,167,184,.14);border:1px solid rgba(242,167,184,.5);
  color:#c0768c;border-radius:99px;padding:3px 12px;font-size:11.5px;cursor:pointer;
  font-family:inherit;margin-left:8px;transition:background .16s}
.unlock-pill:hover{background:rgba(242,167,184,.26)}
.unlock-pill[hidden]{display:none}

/* ---------- 详情页「记录」双区：公开 / 私密（见 _tools/_people-interaction-design.md 需求 B）---------- */
.rec-block{margin-top:14px;padding-left:11px;border-left:3px solid var(--primary)}
.rec-block:first-child{margin-top:0}
.rec-block.is-private{border-left-color:var(--accent-p);background:rgba(242,167,184,.07);
  border-radius:0 10px 10px 0;padding:10px 12px 12px 11px}
.rec-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.rec-title{display:inline-flex;align-items:center;gap:6px;font-family:var(--kai);
  font-size:14px;color:var(--ink);font-weight:600}
.rec-title svg{width:14px;height:14px;flex:none}
.rec-tag{font-size:10.5px;padding:1px 8px;border-radius:99px;
  background:rgba(242,167,184,.22);color:#b96a80;white-space:nowrap}
.rec-edit{margin-left:auto;font-size:11.5px;padding:3px 10px}
.rec-block.is-private .rec-edit{border-color:rgba(242,167,184,.6);color:#b96a80}
.rec-body{font-size:13px;line-height:1.85;color:var(--ink)}
.rec-text{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
/* Markdown 渲染后就不能再 pre-wrap 了（否则 <p> 里的源换行会变成多余空行） */
.rec-text.md{white-space:normal}

/* ---------- Markdown 正文样式：记录正文 .rec-text.md 与编辑面板预览 .ed-preview.md 共用 ---------- */
.md>*:first-child{margin-top:0}
.md>*:last-child{margin-bottom:0}
.md h1,.md h2,.md h3,.md h4{margin:.9em 0 .45em;font-family:var(--kai);line-height:1.4;color:var(--ink)}
.md h1{font-size:1.35em;border-bottom:1px solid var(--line);padding-bottom:.25em}
.md h2{font-size:1.2em}
.md h3{font-size:1.08em}
.md h4{font-size:1em}
.md p{margin:.55em 0}
.md ul,.md ol{margin:.55em 0;padding-left:1.5em}
.md li{margin:.22em 0}
.md li>ul,.md li>ol{margin:.2em 0}
.md blockquote{margin:.7em 0;padding:.35em .9em;border-left:3px solid var(--accent-p);
  background:rgba(242,167,184,.07);border-radius:0 8px 8px 0;color:var(--ink-soft)}
.md code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:rgba(16,76,100,.07);padding:.1em .42em;border-radius:5px}
.md pre{margin:.7em 0;padding:11px 14px;border-radius:10px;overflow-x:auto;
  background:rgba(16,76,100,.06)}
.md pre code{background:none;padding:0;font-size:.86em}
.md a{color:var(--primary-deep);text-decoration:underline;text-underline-offset:2px}
.md hr{margin:1.1em 0;border:0;border-top:1px solid var(--line)}
.md img{max-width:100%;height:auto;border-radius:8px;margin:.5em 0}
.md table{width:100%;border-collapse:collapse;margin:.7em 0;font-size:.94em}
.md th,.md td{border:1px solid var(--line);padding:5px 9px;text-align:left}
.md th{background:rgba(16,76,100,.05);font-weight:600}
.md del{opacity:.6}
html[data-theme="dark"] .md code{background:rgba(232,244,248,.1)}
html[data-theme="dark"] .md pre{background:rgba(232,244,248,.07)}
html[data-theme="dark"] .md th{background:rgba(232,244,248,.07)}
.rec-empty{font-size:12.5px;color:var(--faint);font-style:italic}
/* 未解锁时的上锁占位框（记录区与写真区共用一套外观） */
.rec-lock,.pgrid.is-locked{border:1px dashed rgba(242,167,184,.65);background:rgba(242,167,184,.06);
  border-radius:12px;min-height:120px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:18px;
  transition:border-color .16s,background .16s}
.rec-lock:hover,.pgrid.is-locked:hover{border-color:rgba(242,167,184,.95);background:rgba(242,167,184,.11)}
.rec-lock svg,.pgrid.is-locked svg{width:26px;height:26px;color:#d09aaa}
.rec-lock .rl-title,.pgrid.is-locked .rl-title{font-family:var(--kai);font-size:14px;color:var(--ink);font-weight:600}
.rec-lock .rl-sub,.pgrid.is-locked .rl-sub{font-size:11.5px;color:var(--faint)}
/* 写真区的私密分块 */
.stitle.is-private{margin-top:26px}
.stitle.is-private svg{fill:var(--accent-p)}
html[data-theme="dark"] .rec-block.is-private{background:rgba(242,167,184,.1)}
html[data-theme="dark"] .rec-tag{background:rgba(242,167,184,.3);color:#f0bcca}
html[data-theme="dark"] .rec-block.is-private .rec-edit{color:#f0bcca}
html[data-theme="dark"] .rec-lock .rl-title,html[data-theme="dark"] .pgrid.is-locked .rl-title{color:#e8f4f8}
@media (max-width:560px){.rec-lock,.pgrid.is-locked{min-height:104px}}

/* ---------- 长文本编辑面板（需求 C）---------- */
/* ⚠️ z-index 必须低于解锁弹窗（.modal 是 3000）—— 编辑中途若触发解锁，弹窗不能被压在下面 */
.ed-modal{position:fixed;inset:0;z-index:2900;display:flex;align-items:center;justify-content:center;
  background:rgba(8,20,26,.55);backdrop-filter:blur(4px);padding:20px}
.ed-modal[hidden]{display:none}
.ed-card{width:min(760px,92vw);max-height:86vh;display:flex;flex-direction:column;
  background:var(--card);border-radius:20px;padding:22px 22px 16px;box-shadow:var(--shadow-lg)}
.ed-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ed-title{margin:0;font-family:var(--kai);font-size:18px;color:var(--ink)}
.ed-tag{font-size:10.5px;padding:1px 8px;border-radius:99px;
  background:rgba(91,190,228,.16);color:var(--primary-deep);white-space:nowrap}
.ed-tag.is-private{background:rgba(242,167,184,.22);color:#b96a80}
.ed-sub{margin:0 0 12px;font-size:12px;line-height:1.6;color:var(--faint)}
/* Markdown 预览区（编辑面板） */
.ed-preview{max-height:22vh;overflow:auto;margin-top:10px;padding:12px 14px;
  border:1px dashed var(--line);border-radius:12px;background:rgba(16,76,100,.02);
  font-size:13px;line-height:1.8;color:var(--ink)}
.ed-preview[hidden]{display:none}
.ed-pv-empty{color:var(--faint);font-style:italic}
.ed-toggle.on{background:var(--primary);border-color:transparent;color:#0d2b36}
html[data-theme="dark"] .ed-preview{background:rgba(232,244,248,.04)}

/* ---------- 编辑面板：三段式布局（资料 / 记录 / 照片）---------- */
.ed-body{flex:1;overflow:auto;padding-right:4px;margin-top:4px}
.ed-sec+.ed-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ed-sec[hidden]{display:none}
.ed-sechd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:10px}
.ed-num{color:var(--primary-deep)}
.ed-live{font-size:10.5px;font-weight:400;color:#c0768c;background:rgba(242,167,184,.14);
  padding:1px 8px;border-radius:99px}
/* 人物级「隐藏此人 / 恢复显示」 */
.ed-privacy{margin-left:auto;font-size:11px;padding:3px 10px;white-space:nowrap}
.ed-privacy.is-priv{border-color:rgba(242,167,184,.7);color:#b96a80;background:rgba(242,167,184,.1)}
html[data-theme="dark"] .ed-privacy.is-priv{color:#f0bcca;border-color:rgba(242,167,184,.5)}
/* 资料字段栅格 */
.ed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.ed-f{display:flex;align-items:center;gap:8px;margin-top:10px}
.ed-grid .ed-f{margin-top:0}
.ed-f>span{font-size:12px;color:var(--ink-soft);flex:none;width:60px;text-align:right}
.ed-in{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--line);border-radius:9px;
  background:rgba(16,76,100,.03);color:var(--ink);font-family:var(--hei);font-size:13px;outline:none}
.ed-in:focus{border-color:var(--primary)}
select.ed-in{cursor:pointer}
/* 标签胶囊预览 */
.ed-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0 68px}
.ed-chips[hidden]{display:none}
.ed-chip{font-size:11.5px;padding:3px 10px;border-radius:99px;
  background:rgba(91,190,228,.14);color:var(--primary-deep)}
/* 照片区（即时生效） */
.ed-photos{display:flex;flex-wrap:wrap;gap:10px}
.ed-phempty{font-size:12.5px;color:var(--faint);font-style:italic;padding:6px 0}
.ed-ph{position:relative;width:78px;height:78px;border-radius:10px;overflow:hidden;
  background:rgba(16,76,100,.06);cursor:grab;touch-action:none;
  transition:outline-color .16s,box-shadow .16s}
.ed-ph img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none}
/* 拖拽中 / 落点提示 */
.ed-ph.dragging{opacity:.9;z-index:6;cursor:grabbing;box-shadow:0 12px 26px rgba(0,0,0,.3)}
.ed-ph.drop-target{outline:2px dashed var(--primary);outline-offset:2px}
/* 前两张的用途角标（位置约定：1=封面 2=列表图） */
.ed-phb{position:absolute;left:3px;top:3px;font-size:9.5px;padding:1px 6px;border-radius:99px;
  background:var(--primary);color:#0d2b36;font-weight:600;pointer-events:none;line-height:1.6}
.ed-phb.is-list{background:var(--accent-y);color:#5a4410}
.ed-phx{position:absolute;top:3px;right:3px;width:22px;height:22px;padding:0;border:0;
  border-radius:50%;background:rgba(20,30,36,.68);color:#fff;font-size:11px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.ed-phx:hover{background:#d9534f}
.ed-phadd{width:78px;height:78px;border:1.5px dashed var(--line);border-radius:10px;
  background:transparent;color:var(--faint);cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;font-family:inherit;font-size:11.5px;
  transition:.16s}
.ed-phadd:hover{border-color:var(--primary);color:var(--primary-deep);background:rgba(91,190,228,.06)}
.ed-phadd svg{width:17px;height:17px}
html[data-theme="dark"] .ed-in{background:rgba(232,244,248,.05)}
html[data-theme="dark"] .ed-ph{background:rgba(232,244,248,.08)}
html[data-theme="dark"] .ed-chip{background:rgba(91,190,228,.24);color:#9ad8f0}
.ed-ta{width:100%;box-sizing:border-box;resize:vertical;min-height:180px;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:rgba(16,76,100,.03);color:var(--ink);
  font-family:var(--hei);font-size:13.5px;line-height:1.85;outline:none}
.ed-ta:focus{border-color:var(--primary)}
.ed-foot{display:flex;align-items:center;gap:10px;margin-top:12px}
.ed-meta{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.ed-meta.warn{color:#d19a2e}
.ed-meta.over{color:#d9534f;font-weight:600}
.ed-sp{flex:1}
.ed-save{background:var(--primary);border-color:transparent;color:#0d2b36;font-weight:600}
.ed-save:disabled{opacity:.5;cursor:not-allowed}
html[data-theme="dark"] .ed-ta{background:rgba(232,244,248,.05)}
html[data-theme="dark"] .ed-tag{background:rgba(91,190,228,.24);color:#9ad8f0}
html[data-theme="dark"] .ed-tag.is-private{background:rgba(242,167,184,.3);color:#f0bcca}
@media (max-width:560px){
  .ed-modal{padding:0;align-items:flex-end}
  .ed-card{width:100%;max-height:92vh;border-radius:18px 18px 0 0;padding:18px 16px 14px}
  .ed-ta{min-height:150px}
  .ed-grid{grid-template-columns:1fr 1fr}
  .ed-f>span{width:48px}
  .ed-chips{margin-left:72px}
}

/* ---------- 上传面板（需求 D）---------- */
.up-modal{position:fixed;inset:0;z-index:2900;display:flex;align-items:center;justify-content:center;
  background:rgba(8,20,26,.55);backdrop-filter:blur(4px);padding:20px}
.up-modal[hidden]{display:none}
.up-card{width:min(640px,92vw);max-height:88vh;display:flex;flex-direction:column;
  background:var(--card);border-radius:20px;padding:22px 22px 16px;box-shadow:var(--shadow-lg)}
.up-head{display:flex;align-items:baseline;gap:9px}
.up-title{margin:0;font-family:var(--kai);font-size:18px;color:var(--ink)}
.up-who{font-size:12px;color:var(--faint)}
/* 整批「公开 / 私密」分段控件 */
.up-seg{display:flex;align-items:center;gap:8px;margin:14px 0 6px}
.up-tab{font-family:inherit;font-size:12.5px;padding:6px 15px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);transition:.16s}
.up-tab:hover{border-color:var(--accent-p)}
.up-tab.on{background:var(--accent-p);border-color:transparent;color:#5a2b38;font-weight:600}
.up-tab.dis{opacity:.45;cursor:not-allowed}
.up-segnote{font-size:11.5px;color:var(--faint)}
.up-desc{margin:0 0 12px;font-size:12px;line-height:1.6;color:var(--faint)}
/* 拖拽区 */
.up-drop{border:1.5px dashed var(--line);border-radius:14px;padding:20px;text-align:center;
  cursor:pointer;transition:.16s;color:var(--faint)}
.up-drop:hover,.up-drop.over{border-color:var(--primary);background:rgba(91,190,228,.06);color:var(--primary-deep)}
.up-drop svg{width:30px;height:30px;display:block;margin:0 auto 8px}
.up-droptxt{font-size:13px}
.up-pick{font-family:inherit;font-size:13px;background:none;border:0;color:var(--primary-deep);
  text-decoration:underline;cursor:pointer;padding:0}
.up-limit{margin-top:6px;font-size:11px}
/* 待传文件列表 */
.up-list{overflow:auto;margin-top:14px;display:flex;flex-direction:column;gap:8px;max-height:38vh}
.up-list[hidden]{display:none}
.up-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;
  background:rgba(16,76,100,.03);border:1px solid var(--line)}
.up-item img{width:46px;height:46px;object-fit:cover;border-radius:9px;flex:none;background:#e8eef1}
.up-item.is-ok{background:rgba(91,190,228,.08)}
.up-item.is-fail{background:rgba(217,83,79,.07);border-color:rgba(217,83,79,.3)}
.up-item.is-doing{opacity:.75}
.up-meta{flex:1;min-width:0}
.up-name{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-size{font-size:11px;color:var(--faint);margin-top:2px}
.up-err{font-size:11px;color:#d9534f;margin-top:2px}
.up-st{font-size:11.5px;color:var(--ink-soft);flex:none;white-space:nowrap}
.up-item.is-ok .up-st{color:var(--primary-deep);font-weight:600}
.up-item.is-fail .up-st{color:#d9534f;font-weight:600}
.up-acts{display:flex;gap:6px;flex:none}
.up-acts .chip{font-size:11.5px;padding:3px 10px}
.up-foot{display:flex;align-items:center;gap:10px;margin-top:14px}
.up-stat{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.up-sp{flex:1}
.up-go{background:var(--primary);border-color:transparent;color:#0d2b36;font-weight:600}
.up-go:disabled{opacity:.5;cursor:not-allowed}
html[data-theme="dark"] .up-item{background:rgba(232,244,248,.05)}
html[data-theme="dark"] .up-item img{background:#2a3338}
@media (max-width:560px){
  .up-modal{padding:0;align-items:flex-end}
  .up-card{width:100%;max-height:92vh;border-radius:18px 18px 0 0;padding:18px 16px 14px}
  .up-list{max-height:34vh}
}
/* 轻量 toast：右下角浮出，替代 alert（后续阶段会全面替换原生弹窗） */
.toast{position:fixed;right:20px;bottom:22px;z-index:4000;
  max-width:min(420px,86vw);padding:11px 16px;border-radius:12px;
  background:rgba(28,36,42,.95);color:#fff;font-size:13px;line-height:1.6;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
.toast.show{opacity:1;transform:translateY(0)}
@media (max-width:560px){.toast{right:12px;left:12px;bottom:14px;max-width:none}}
/* 解锁弹窗 */
.modal{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;
  background:rgba(8,20,26,.6);backdrop-filter:blur(4px)}
.modal[hidden]{display:none}
.mcard{width:min(360px,88vw);background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:24px 22px;box-shadow:var(--shadow-lg)}
.mcard h3{margin:0 0 8px;font-family:var(--kai);font-size:18px;color:var(--ink)}
.mcard .msub{margin:0 0 16px;font-size:12.5px;line-height:1.6;color:var(--ink);opacity:.65}
.mcard input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:14px}
.mcard .mbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.chip.primary{background:var(--primary);color:#0d2b36;border-color:transparent;font-weight:600}
.merr{min-height:18px;margin-top:10px;font-size:12.5px;color:#e5484d}
/* ⚠️ 详情页打开时 .page 被隐藏，.detail 就是流里第一个块 ——
   必须自带 padding，否则 hero 会直接贴住顶栏（用户反馈「大图和黑框挨在一起」，首页有 26px 空隙） */
.dwrap{max-width:1060px;margin:0 auto;padding:26px 20px 60px}
.dhero{position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
  height:clamp(260px,30vw,380px);background:#0d1a20}
.dhero img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}
.dhero .ov{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,32,42,.78),rgba(8,32,42,.12) 62%,transparent)}
.dhero .cap{position:absolute;left:0;right:0;bottom:0;padding:0 30px 30px;color:#fff}
.dhero .cap .k{font-size:10px;letter-spacing:.3em;opacity:.8;text-transform:uppercase}
.dhero .cap h2{margin:10px 0 0;font-family:var(--kai);
  font-size:clamp(27px,5vw,44px);letter-spacing:.05em;font-weight:600;line-height:1.15}
.dhero .cap .en{font-size:11px;letter-spacing:.24em;opacity:.78;margin-top:9px}
/* 热度读数（详情页恒定显示）：比 .en 更弱一档，不抢名字 */
.dhero .cap .heatline{font-size:11.5px;letter-spacing:.06em;opacity:.72;margin-top:11px;
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;
  background:rgba(6,28,38,.42);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(4px)}

.dcols{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px}
@media(min-width:840px){.dcols{grid-template-columns:296px 1fr;align-items:start}}
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  border:1px solid var(--line);padding:20px 22px;position:relative;overflow:hidden}
.panel h3{margin:0 0 14px;font-family:var(--kai);font-size:15px;font-weight:600;
  letter-spacing:.04em;padding-bottom:11px;border-bottom:1px dashed var(--line);
  display:flex;align-items:center;gap:8px}
.panel h3 svg{width:15px;height:15px}
dl.info{margin:0;display:grid;grid-template-columns:64px 1fr;gap:10px 12px;font-size:13px}
dl.info dt{color:var(--ink-soft);font-size:12px}
dl.info dd{margin:0}
.panel .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px dashed var(--line)}
.panel .tags span{font-size:11.5px;padding:3px 11px;border-radius:99px;
  background:rgba(91,190,228,.13);color:var(--primary-deep)}
.note{font-size:13.5px;line-height:2;color:var(--ink)}
.note p{margin:0 0 13px}
.note p:last-child{margin:0}

.stitle{display:flex;align-items:center;gap:11px;margin:28px 0 16px}
.stitle .t{font-family:var(--kai);font-size:19px;font-weight:600;letter-spacing:.04em}
.stitle .n{font-size:11.5px;color:var(--ink-soft)}
.stitle .ln{flex:1;height:1px;background:var(--line)}
.pgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media(max-width:560px){.pgrid{grid-template-columns:repeat(2,1fr);gap:10px}}
.pgrid .p{border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:var(--fb-bg);
  cursor:pointer;transition:transform .3s,box-shadow .3s;position:relative;
  border:1px solid var(--line)}
.pgrid .p:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-lg)}
.pgrid .p img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
/* 点击放大的视觉提示：hover 时图片轻推 + 右上角浮出放大镜角标。
   沿用本页既有语言（天蓝底、99px 胶囊、backdrop-filter 毛玻璃），不另起一套视觉 */
.pgrid .p:hover img{transform:scale(1.06)}
.pgrid .p .zoom{position:absolute;top:7px;right:7px;width:24px;height:24px;
  border-radius:99px;background:rgba(91,190,228,.92);color:#fff;
  display:grid;place-items:center;opacity:0;transform:scale(.72);
  transition:opacity .28s,transform .28s;box-shadow:0 2px 8px rgba(16,76,100,.28);
  pointer-events:none}
.pgrid .p:hover .zoom,.pgrid .p:focus-visible .zoom{opacity:1;transform:scale(1)}
.pgrid .p .zoom svg{width:13px;height:13px;display:block}
.pgrid .p:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.pgrid .p .tag{position:absolute;left:7px;bottom:7px;font-size:10px;
  padding:2px 8px;border-radius:99px;background:rgba(16,76,100,.6);color:#fff;
  backdrop-filter:blur(4px)}
/* viewer 灯箱抬到详情页之上，避免与本页 .detail 的层叠打架 */
.viewer-container{z-index:2100!important}