/* ============================================================
   CP滴滴情报局 · 共用基础层
   杂志编辑风的底色：没有卡片盒子、没有圆角柔光，靠细线、字号层级和留白做结构。
   PC 版（pc.css）和手机版（mb.css）都在这一层之上覆写。
   ============================================================ */

:root{
  --ink:#17140F;
  --ink-2:#6B645E;
  --ink-3:#8F8781;          /* 只用于大号装饰文字（≥24px 才够对比度） */
  --rule:#E3DFDA;
  --rule-strong:#C9C3BC;
  --paper:#FCFAF8;
  --paper-2:#F4F1ED;
  --accent:#C24E27;         /* 白字压在上面 4.76:1，达 WCAG AA */
  --accent-deep:#8F3A1C;
  --accent-wash:#F6E7DF;
  --ph-bg:#EFE5DF;
  --ph-ink:#8F3A1C;
  /* 表单的两种提示色。都按纸上底色（#FCFAF8）算过对比度，>4.5:1 */
  --ok:#3E6B3C;
  --warn:#8A5A16;
  --font-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 数字和拉丁字母走衬线体，这是"杂志感"最便宜的来源：系统自带、零下载 */
  --font-num:ui-serif, Georgia, "Times New Roman", "Songti SC", serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:15.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------------- 排版原子 ---------------- */

/* 眉标：小号、宽字距、全站统一，是杂志版式的骨架之一 */
.kicker{
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  color:var(--accent);
  margin:0;
}
.kicker-mute{color:var(--ink-2)}

/* 大号数字走衬线 + 等宽数字，避免跳动 */
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;line-height:1}

.lede{color:var(--ink-2);margin:0}

.rule{border:0;border-top:1px solid var(--rule);margin:0}
.rule-strong{border-top-color:var(--rule-strong)}
.rule-double{border:0;border-top:3px solid var(--ink);margin:0}

/* ---------------- 按钮：直角、无阴影、字距拉开 ---------------- */
.btn{
  appearance:none;border:0;cursor:pointer;
  font-size:13px;font-weight:600;letter-spacing:.1em;
  padding:13px 26px;border-radius:0;
  transition:background .18s, color .18s, border-color .18s;
}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-deep)}
.btn-solid:disabled{background:#E4DCD6;color:#8D847E;cursor:not-allowed}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--rule-strong)}
.btn-line:hover{border-color:var(--ink);background:#fff}
.btn-text{
  background:transparent;border:0;cursor:pointer;
  font-size:13px;font-weight:600;letter-spacing:.1em;
  padding:4px 0;border-bottom:1px solid var(--accent);color:var(--accent);
}
.btn-text:hover{color:var(--accent-deep);border-bottom-color:var(--accent-deep)}

/* ---------------- 图片块：带降级兜底 ----------------
   .ph 负责占位与宽高比，真实图片加载失败就淡出，露出下面的首字，
   所以任何一个图源挂掉，页面都只是变成"文字占位"，不会出现破图。 */
.ph{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--ph-bg);
}
.ph::after{
  content:attr(data-initial);
  position:absolute;inset:0;z-index:0;
  display:grid;place-items:center;
  color:var(--ph-ink);
  font-size:clamp(18px, 32%, 46px);
  font-weight:600;
  letter-spacing:.05em;
}
.ph-img{
  position:relative;z-index:1;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .25s;
}
.ph-img.is-failed{opacity:0}
/* 真头像（QQ 头像）是方的，塞进 4:3 / 16:9 会被裁上下。
   人脸在方图里偏上，所以这里把取景位置往上提一点，别把头顶切掉。 */
.ph.is-face .ph-img{object-position:center 30%}
.r-16x9{aspect-ratio:16/9}
.r-3x2 {aspect-ratio:3/2}
.r-4x3 {aspect-ratio:4/3}
.r-1x1 {aspect-ratio:1/1}

/* ---------------- 封面大图 ----------------
   结构：.cover > .cover-img（随机 ACG 图）+ ::after（遮罩）+ .cover-inner（文字）
   随机图可能很亮，所以遮罩是必需的，不是装饰。--scrim 由 js 按配置写进来。
   图没到或挂掉时露出纸底，文字照样能读，不会出现破图。 */
.cover{
  position:relative;
  overflow:hidden;
  background:#2A2622;   /* 深底：图没到或挂掉时，白字依旧读得清（实测 15:1），也不会闪白 */
}
.cover-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;
  transition:opacity .55s ease;
}
.cover.is-ready .cover-img{opacity:1}
.cover::after{
  content:"";
  position:absolute;inset:0;z-index:1;
}
.cover-inner{position:relative;z-index:2}

/* ---------------- 配对成功弹窗 ---------------- */
.match-modal{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;padding:20px;
  background:rgba(23,20,15,.5);
  opacity:0;visibility:hidden;
  transition:opacity .2s, visibility .2s;
}
.match-modal.is-open{opacity:1;visibility:visible}
.match-modal-box{
  width:100%;max-width:380px;
  background:var(--paper);
  border-top:4px solid var(--accent);
  padding:30px 26px 26px;
  text-align:center;
  transform:translateY(10px);
  transition:transform .26s cubic-bezier(.2,.85,.3,1.1);
}
.match-modal.is-open .match-modal-box{transform:none}
.match-kicker{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--accent);
}
.match-modal-box h2{
  margin:14px 0 0;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.45;
}
.match-pair{
  display:flex;align-items:center;justify-content:center;gap:16px;margin:22px 0;
}
.match-pair .ph{width:58px;height:58px;aspect-ratio:auto;border-radius:50%;flex:0 0 auto}
.match-pair .match-me{flex:0 0 auto;display:block;width:58px}
.match-line{width:36px;height:1px;background:var(--rule-strong);display:block}
.match-note{margin:0 0 22px;font-size:13px;color:var(--ink-2);line-height:1.7}

/* ---------------- 一条轻提示 ----------------
   保存成功、复制成功这类不需要用户回应的反馈。用 role="status" 播报，
   所以视觉上可以低调，但它是唯一的确认渠道，不能省。 */
.toast{
  position:fixed;left:50%;bottom:30px;z-index:90;
  transform:translate(-50%,14px);
  max-width:min(88vw,440px);
  background:var(--ink);color:#fff;
  padding:12px 22px;
  font-size:13.5px;line-height:1.6;letter-spacing:.02em;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s, transform .22s, visibility .22s;
}
.toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ============================================================
   表单
   全站是直角细线，表单也不例外：无圆角、无阴影、无浮动标签，
   靠字距拉开的小号标签 + 1px 细线输入框和整站保持同一种声音。
   ============================================================ */
.f-rows{margin:0}
.f-row{margin-bottom:24px}
.f-half{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.f-label{
  display:flex;align-items:baseline;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--ink-2);
  margin-bottom:9px;
}
.f-req,.f-opt{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.14em;white-space:nowrap}
.f-req{color:var(--accent)}
.f-opt{color:var(--ink-3)}

.f-input,.f-select,.f-area{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--rule-strong);border-radius:0;
  padding:11px 13px;
}
.f-input::placeholder,.f-area::placeholder{color:var(--ink-3)}
.f-input:focus,.f-select:focus,.f-area:focus{border-color:var(--accent)}
.f-input[aria-invalid="true"],.f-area[aria-invalid="true"]{
  border-color:var(--accent);background:#FDF4F0;
}
.f-select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236B645E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.f-area{min-height:104px;resize:vertical;line-height:1.75}
.f-hint{margin:8px 0 0;font-size:12px;line-height:1.7;color:var(--ink-2)}
.f-hint.is-ok{color:var(--ok)}
.f-hint.is-warn{color:var(--warn)}

/* QQ 那一行：左边一个方形头像预览，右边输入框。
   头像按输入的 QQ 号即时出现，所以不需要额外的「识别」按钮。 */
.f-qq{display:flex;align-items:stretch;gap:12px}
.f-qq-face{flex:0 0 66px;width:66px}
.f-qq-face .ph{width:66px;height:66px;aspect-ratio:auto;border:1px solid var(--rule)}
.f-qq-face:empty::before{
  content:"QQ";display:grid;place-items:center;height:66px;
  border:1px dashed var(--rule-strong);color:var(--ink-3);
  font-size:11px;letter-spacing:.14em;
}
.f-qq .f-input{flex:1;min-width:0}

.f-actions{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:30px;padding-top:24px;border-top:1px solid var(--rule);
}
.f-saved{font-size:12.5px;letter-spacing:.06em;color:var(--ok)}

/* 多选芯片 */
.pick-row{display:flex;flex-wrap:wrap;gap:8px}
.pick{
  appearance:none;cursor:pointer;background:#fff;
  border:1px solid var(--rule-strong);border-radius:0;
  font-size:13px;letter-spacing:.04em;color:var(--ink-2);
  padding:9px 15px;min-height:38px;
  transition:background .16s,border-color .16s,color .16s;
}
.pick:hover{border-color:var(--ink);color:var(--ink)}
.pick[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.pick[aria-pressed="true"]:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}

/* 卡片右下角那一组动作：看名片 / 心动 */
.acts{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}

/* 次要动作做成文字链接式按钮，别和实心按钮抢注意力 */
.link-btn{
  appearance:none;background:transparent;border:0;cursor:pointer;padding:0;
  font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.1em;
  color:var(--ink-2);border-bottom:1px solid var(--rule-strong);
  transition:color .16s,border-color .16s;
}
.link-btn:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* 整张卡片可点进详情 —— 这是给鼠标的便利，
   键盘和无障碍走卡片里那个真实的"看名片"按钮。 */
.is-clickable{cursor:pointer}

/* ============================================================
   名片详情
   默认单栏（手机直接用），电脑版在 pc.css 里改成左右分栏。
   ============================================================ */
.detail-back{margin-bottom:26px}
.detail-grid{display:grid;gap:32px}
.detail-media .ph{width:100%}
.detail-name{margin:14px 0 0;font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-.035em;line-height:1.1}
.detail-meta{margin:12px 0 0;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--accent)}
.detail-rows{
  margin:26px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 22px;
  font-size:14px;padding-top:22px;border-top:1px solid var(--rule);
}
.detail-rows dt{color:var(--ink-2);letter-spacing:.08em}
.detail-rows dd{margin:0}
.detail-bio{margin:24px 0 0;font-size:15.5px;line-height:1.85;color:var(--ink)}
.detail-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.detail-hearts{font-size:12.5px;letter-spacing:.06em;color:var(--ink-2)}
.detail-hearts b{font-size:17px;color:var(--ink)}
.heart-lg{padding:14px 34px;font-size:13px}

/* 联系方式块。锁着的时候故意做得比周围"平"：虚线框 + 灰号，
   让人一眼看出这是"还没到你能看的时候"，而不是设计失误。 */
.contact-box{margin-top:30px;padding:20px 22px;border:1px solid var(--rule-strong)}
.contact-box.is-locked{border-style:dashed;background:var(--paper-2)}
.contact-box.is-open{border-left:3px solid var(--accent);background:#fff}
.contact-wx{
  margin:12px 0 0;font-family:var(--font-num);
  font-size:26px;font-weight:700;line-height:1.25;
  word-break:break-all;
}
.contact-box.is-locked .contact-wx{color:var(--ink-2);letter-spacing:.16em}
.contact-note{margin:12px 0 0;font-size:13px;line-height:1.75;color:var(--ink-2)}
.contact-copy{margin-top:16px}

/* ============================================================
   群规 / 入群
   ============================================================ */
.about-grid{display:grid;gap:44px}
.about-h{
  margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.2em;
  padding-bottom:12px;border-bottom:3px solid var(--ink);
}
.about-rules{list-style:none;margin:0;padding:0;counter-reset:r}
.about-rules li{
  position:relative;counter-increment:r;
  padding:14px 0 14px 42px;border-bottom:1px solid var(--rule);
  font-size:14px;line-height:1.8;color:var(--ink-2);
}
.about-rules li::before{
  content:counter(r,decimal-leading-zero);
  position:absolute;left:0;top:14px;
  font-family:var(--font-num);font-size:13px;font-weight:700;
  letter-spacing:.06em;color:var(--accent);
}
.about-steps{list-style:none;margin:0;padding:0}
.about-steps li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.about-steps .no{
  font-family:var(--font-num);font-size:22px;font-weight:700;
  line-height:1.2;color:var(--rule-strong);flex:0 0 auto;
}
.about-steps b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.about-steps p{margin:6px 0 0;font-size:13.5px;line-height:1.75;color:var(--ink-2)}

.about-qr{margin-top:26px;padding-top:24px;border-top:1px solid var(--rule)}
/* 群卡片二维码是竖版（1082×1628），所以只锁宽度、高度自动，
   同时在 HTML 上写了 width/height 属性预留比例，避免加载时页面跳动。 */
.about-qr-img{display:block;width:240px;max-width:100%;height:auto;border:1px solid var(--rule)}
.about-qr-ph{
  width:200px;height:200px;display:grid;place-items:center;
  border:1px dashed var(--rule-strong);background:var(--paper-2);
  font-size:12px;letter-spacing:.16em;color:var(--ink-3);
}
.about-qr-name{margin:16px 0 0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.about-qr-note{margin:4px 0 0;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-2)}
.about-qr-note b{font-size:17px;color:var(--ink);letter-spacing:.02em}
.about-qr-tip{margin:8px 0 0;font-size:12.5px;line-height:1.75;color:var(--ink-2);max-width:26em}

.about-faq{margin-top:56px}
.faq{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:18px 34px 18px 0;
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  transition:color .16s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font-family:var(--font-num);font-size:21px;line-height:1;color:var(--ink-2);
}
.faq[open] summary::after{content:"\2212"}
.faq[open] summary{color:var(--ink)}
.faq p{margin:0 0 22px;font-size:14px;line-height:1.85;color:var(--ink-2);max-width:52em}

/* ============================================================
   日常墙：帖子详情 + 评论
   卡片和详情用的是同一批类名（.post / .post-head / .post-body / .post-foot），
   详情多一层 .post-detail 包住，下面挂评论。两套版式只有字号差别。
   ============================================================ */

/* 整张卡可点时必须给出"能点"的反馈，否则用户根本不知道帖子能点开。
   只改作者名颜色，不加阴影不加圆角 —— 这个站的视觉语言里没有这两样。 */
.post.is-clickable,.mrow.is-clickable,.m-mrow.is-clickable{cursor:pointer}
.post.is-clickable:hover .who,
.post.is-clickable:focus-within .who{color:var(--accent)}
.mrow.is-clickable:hover .who,
.m-mrow.is-clickable:hover .who{color:var(--accent)}

.post-detail{padding-bottom:0}
.post-open{padding:0 0 26px;border-bottom:1px solid var(--rule)}
.post-body-lg{font-size:17px;line-height:1.9}
/* 详情页的作者后面跟一个「看名片」；列表里没有这个按钮 */
.post-head-act{margin-left:2px}

/* ---- 评论 ---- */
.cmt{margin-top:36px}
.cmt-h{
  margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.2em;
  padding-bottom:13px;border-bottom:3px solid var(--ink);
  display:flex;align-items:baseline;gap:10px;
}
.cmt-h .num{font-size:19px;color:var(--accent)}
.cmt-row{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--rule)}
.cmt-face{flex:0 0 auto}
.cmt-face .ph{width:38px;height:38px;aspect-ratio:auto;border-radius:50%}
.cmt-main{flex:1;min-width:0}
.cmt-meta{margin:0;display:flex;align-items:baseline;gap:12px}
.cmt-who{
  appearance:none;background:transparent;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.005em;
  color:var(--ink);text-align:left;transition:color .16s;
}
button.cmt-who:hover{color:var(--accent)}
.cmt-time{margin-left:auto;font-size:11px;letter-spacing:.1em;color:var(--ink-2);white-space:nowrap}
.cmt-text{margin:7px 0 0;font-size:14.5px;line-height:1.8;word-break:break-word}
.cmt-empty{margin:0;padding:22px 0;font-size:13.5px;color:var(--ink-2)}

/* 评论表单。和站长表单同一套控件，所以只补"提交按钮跑右边"这一处差异。 */
.cmt-form{margin-top:28px;padding-top:26px;border-top:1px solid var(--rule)}
.cmt-area{min-height:84px}
.cmt-form-foot{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  justify-content:space-between;margin-top:14px;
}
.cmt-form-foot .f-hint{margin:0;flex:1;min-width:0}

/* ---- 回复某条评论 ----
   在这之前整条评论是只读的：点哪儿都没反应，用户的原话就是"无法回复评论"。 */
.cmt-reply{
  appearance:none;background:transparent;border:0;cursor:pointer;font:inherit;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-2);
  /* 手指点得到（实测 44px），但视觉上还贴着时间那一行：
     靠 padding 撑开、再用负 margin 收回去，行高一点没变。 */
  padding:14px 10px;margin:-14px -10px -14px 0;
  transition:color .16s;
}
.cmt-reply:hover{color:var(--accent)}
.cmt-reply:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 「回复 @谁」那句话。点它能跳回原评论，所以本身就是个按钮。 */
.cmt-quote{margin:9px 0 0}
.cmt-quote-btn{
  appearance:none;cursor:pointer;font:inherit;
  display:inline-flex;align-items:center;
  min-height:44px;padding:8px 12px;
  background:var(--paper-2);border:0;border-left:3px solid var(--rule-strong);
  font-size:11.5px;letter-spacing:.04em;color:var(--ink-2);text-align:left;
  transition:border-color .16s,color .16s;
}
.cmt-quote-btn:hover{border-left-color:var(--accent);color:var(--accent)}
/* 跳过去的时候闪一下，不然用户不知道跳到哪儿了 */
.cmt-row.is-hit{
  background:var(--accent-wash);
  box-shadow:-14px 0 0 var(--accent-wash), 14px 0 0 var(--accent-wash);
}

/* 「正在回复 @谁」的状态条。不回复时不占地方。 */
.cmt-chip{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  padding:6px 12px;background:var(--accent-wash);border-left:3px solid var(--accent);
  font-size:12.5px;color:var(--ink);
}
.cmt-chip-name{font-weight:700}
.cmt-chip-x{
  margin-left:auto;appearance:none;cursor:pointer;font:inherit;
  min-height:44px;padding:0 12px;
  background:transparent;border:0;border-bottom:1px solid var(--rule-strong);
  font-size:11.5px;letter-spacing:.06em;color:var(--ink-2);
  transition:color .16s,border-color .16s;
}
.cmt-chip-x:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ============================================================
   开黑约战
   房间卡片在两个版式里用的是同一套类名，只有栅格列数不同（见 pc.css / mb.css）。
   ============================================================ */
.room{background:var(--paper);padding:24px;display:flex;flex-direction:column}
.room-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.room h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.room-by{margin:12px 0 0;font-size:13px;color:var(--ink-2);letter-spacing:.04em;line-height:1.7}
.room-by-name{
  appearance:none;background:transparent;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--rule-strong);transition:color .16s,border-color .16s;
}
.room-by-name:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* 状态徽标：五种状态各自一个颜色。颜色比读文字快，
   所以"能不能上车"这件事应该靠颜色先被看到，文字只是确认。 */
.slot{font-size:11.5px;font-weight:600;letter-spacing:.16em;white-space:nowrap;flex:0 0 auto}
.slot-go{color:var(--accent)}
.slot-warn{color:var(--warn)}
.slot-full{color:var(--ink)}
.slot-live{color:var(--ok)}
.slot-done{color:var(--ink-2)}

/* 三个时间点。这是"组局什么时候结束"的正面回答，不能省任何一个。 */
.room-times{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;
  font-size:12.5px;line-height:1.6;
}
.room-times dt{color:var(--ink-2);letter-spacing:.06em;white-space:nowrap}
.room-times dd{margin:0;font-variant-numeric:tabular-nums}
.room-times dd.is-past{color:var(--ink-2);text-decoration:line-through}
.room-dur{margin-left:8px;font-size:11.5px;color:var(--ink-2)}

.room-note-line{
  margin:14px 0 0;padding-left:11px;border-left:2px solid var(--rule);
  font-size:13px;line-height:1.8;color:var(--ink-2);
}
.room-count{margin:16px 0 0;font-size:13px;color:var(--ink-2);letter-spacing:.04em}
.room-count .num{font-size:18px;font-weight:700;color:var(--ink)}

/* 车上的人。名字直接写在头像下面：一眼看得出队友是谁、点得开。 */
.room-roster{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 16px;margin-top:16px}
.rface{
  appearance:none;background:transparent;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  width:58px;text-align:center;
}
.rface .ph{width:40px;height:40px;aspect-ratio:auto;border-radius:50%}
.rface:hover .ph,.rface:focus-visible .ph{box-shadow:0 0 0 2px var(--accent)}
.rface-nm{
  width:100%;font-size:10.5px;line-height:1.35;letter-spacing:.01em;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rface:hover .rface-nm{color:var(--accent)}
.rface-tag{
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.04em;line-height:1.5;
  min-height:15px;padding:0 5px;background:var(--ink);color:#fff;white-space:nowrap;
}
.rface-tag.is-pigeon{background:var(--warn)}
/* 没有标记的位置放一个隐形的同高块，这样整排头像的基线是对齐的 */
.rface-tag.is-blank{visibility:hidden;min-width:1px;padding:0}
.rface-empty{cursor:default}
.rface-av-empty{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px dashed var(--rule-strong);color:var(--ink-2);
  font-size:11px;letter-spacing:.06em;
}
.rface-empty .rface-nm{color:var(--ink-2)}

/* 满员后会怎样 / 打完的出勤结果 —— 两块都做成"贴在卡片里的说明条" */
.room-note{
  margin-top:18px;padding:15px 17px;
  background:var(--paper-2);border-left:3px solid var(--rule-strong);
}
.room-note.is-full{border-left-color:var(--accent);background:var(--accent-wash)}
.room-note.is-attend{border-left-color:var(--ink)}
.room-note-h{
  margin:0;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.room-note-warn{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--warn)}
.room-note-b{margin:8px 0 0;font-size:12.5px;line-height:1.8;color:var(--ink-2)}
.room-note-list{margin:10px 0 0;padding-left:19px;font-size:12.5px;line-height:1.8;color:var(--ink-2)}
.room-note-list li{margin-bottom:5px}
.room-attend{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:8px}
.room-attend li{display:flex;align-items:baseline;gap:11px;font-size:13px}
.atk{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;line-height:1.6;
  padding:1px 7px;background:var(--ink-2);color:#fff;white-space:nowrap;flex:0 0 auto;
}
.atk.is-ok{background:var(--ok)}
.atk.is-late{background:var(--warn)}
.atk.is-miss{background:var(--accent)}
.atk-name{
  appearance:none;background:transparent;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:13px;color:var(--ink);
  border-bottom:1px solid var(--rule-strong);transition:color .16s,border-color .16s;
}
.atk-name:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---- 房主标记出勤（打完那一步） ----
   三种状态各自一色，和只读结果的 .atk 保持同一套配色，
   这样"我标记时看到的颜色"和"结算后大家看到的颜色"是一致的。 */
.room-note.is-mark{border-left-color:var(--accent);background:var(--accent-wash)}
.room-note-ok{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ok)}

.mark-list{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:9px}
.mark-list li{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mark-list .atk-name{flex:1 1 auto;min-width:0;text-align:left;padding:6px 0}
.mark-opts{display:flex;gap:6px;flex:0 0 auto}
.mark-opt{
  appearance:none;cursor:pointer;font:inherit;
  min-height:44px;padding:0 13px;
  background:var(--paper);border:1px solid var(--rule-strong);color:var(--ink-2);
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  transition:background .16s,border-color .16s,color .16s;
}
.mark-opt:hover{border-color:var(--ink);color:var(--ink)}
.mark-opt:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* 选中的那一项按状态上色：已到=绿、迟到=黄褐、缺席=主题色 */
.mark-opt.is-on{color:#fff}
.mark-opt.is-on[data-mark-val="on-time"]{background:var(--ok);border-color:var(--ok)}
.mark-opt.is-on[data-mark-val="late"]{background:var(--warn);border-color:var(--warn)}
.mark-opt.is-on[data-mark-val="no-show"]{background:var(--accent);border-color:var(--accent)}

.mark-foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  justify-content:space-between;margin-top:16px;
}
.mark-foot .f-hint{margin:0;flex:1;min-width:0}
.mark-btns{display:flex;gap:10px;flex-wrap:wrap}
.attend-by{margin-top:12px}
.attend-redo{margin-top:14px}

/* 动作区钉在卡片底部：不同状态的卡片高度不一，按钮不钉住就会上下跳 */
.room-actions{
  margin-top:auto;padding-top:20px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.room-owner-tag{font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--ink-2)}

/* ---- 顶部的「怎么玩」：四步 + 三个时间点 + 满员后 + 没来的后果 ---- */
.room-guide{margin-bottom:38px}
.room-steps{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.room-steps li{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--rule)}
.room-steps .no{
  font-family:var(--font-num);font-size:24px;font-weight:700;line-height:1.1;
  color:var(--rule-strong);flex:0 0 auto;
}
.room-steps b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.room-steps p{margin:7px 0 0;font-size:13px;line-height:1.8;color:var(--ink-2);max-width:56em}

.room-spec{display:grid;gap:30px;margin-top:28px}
.room-spec-col h4{
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--rule);
  font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--accent);
}
.spec-times,.spec-penalty{
  margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;
  font-size:12.5px;line-height:1.75;
}
.spec-times dt,.spec-penalty dt{font-weight:700;white-space:nowrap;color:var(--ink)}
.spec-times dd,.spec-penalty dd{margin:0;color:var(--ink-2)}
.spec-list{margin:0;padding-left:19px;font-size:12.5px;line-height:1.8;color:var(--ink-2)}
.spec-list li{margin-bottom:6px}

/* ---- 发布组局：折叠起来，不占地方，但入口一眼看得到 ---- */
.room-pub{border:1px solid var(--rule-strong);background:#fff;margin-bottom:36px}
.room-pub>summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 22px;font-size:13.5px;font-weight:700;letter-spacing:.06em;
  transition:color .16s;
}
.room-pub>summary::-webkit-details-marker{display:none}
.room-pub>summary::after{
  content:"\FF0B";font-family:var(--font-num);font-size:17px;line-height:1;
  color:var(--accent);flex:0 0 auto;
}
.room-pub[open]>summary::after{content:"\2212"}
.room-pub>summary:hover{color:var(--accent)}
.room-pub form{padding:20px 22px 22px;border-top:1px solid var(--rule)}
.room-pub .f-actions{margin-top:24px;padding-top:20px}
.room-pub .f-area-sm{min-height:68px}
/* 没填名片就不能发布 —— 提前写在表单下面，别等提交了才拦 */
.room-pub-gate{
  margin:0;padding:14px 22px 16px;
  border-top:1px solid var(--rule);background:var(--paper-2);
}

/* 名片上的「鸽子」标记和出勤记录。放鸽子的代价就是别人点开你名片能看见。 */
.pg-badge{
  display:inline-block;vertical-align:middle;margin-left:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;
  padding:2px 7px;background:var(--warn);color:#fff;
}
.credit-row{font-variant-numeric:tabular-nums}

/* ---- 玩法说明：入口一行 + 侧边抽屉 ----
   以前整块铺在页面上，1440×810 下一屏全被它占掉，列表被压到折叠线以下。
   现在入口只占一行，全文从侧边滑出。 */
.guide-open{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  background:transparent;border:0;border-bottom:1px solid var(--rule-strong);
  padding:6px 0;cursor:pointer;text-align:left;
  font-size:11.5px;letter-spacing:.14em;color:var(--ink-2);
  transition:color .16s, border-color .16s;
}
.guide-open b{color:var(--accent);font-weight:700;letter-spacing:.14em}
.guide-open span{white-space:nowrap}
.guide-open i{font-style:normal;color:var(--accent);font-family:var(--font-num);font-size:13px;line-height:1}
.guide-open:hover{color:var(--ink);border-bottom-color:var(--accent)}
.guide-open:hover b{color:var(--accent-deep)}

.guide-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(23,20,15,.44);
  opacity:0;visibility:hidden;
  transition:opacity .2s, visibility .2s;
}
.guide-scrim.is-open{opacity:1;visibility:visible}

/* 抽屉几何默认按"从右边滑进来"写（pc.css 直接用）。
   mb.css 会把它改成底部上滑的表单式面板。

   visibility 的过渡是分方向的，两个方向的目的不一样，别合并成一条：
   · 关（默认，延迟 .26s）：先滑出去，等动画走完再真隐藏。hidden 之后里面的按钮
     不可聚焦、读屏也读不到 —— 这是让"关着"这件事对键盘用户也成立的关键。
   · 开（.is-open 里，0s 0s）：立刻生效。离散属性在过渡的 t=0 取的是【起始值】，
     如果这条也延迟/参与过渡，刚打开那一刻 computed visibility 还是 hidden，
     紧接着的 focus() 会无声失败 —— 焦点就留在后面那层页面上了。 */
.guide-drawer{
  position:fixed;z-index:91;top:0;right:0;bottom:0;
  width:min(560px,94vw);
  display:flex;flex-direction:column;
  background:var(--paper);
  border-left:3px solid var(--ink);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .26s cubic-bezier(.2,.85,.3,1), visibility 0s .26s;
}
.guide-drawer.is-open{
  transform:none;visibility:visible;
  transition:transform .26s cubic-bezier(.2,.85,.3,1), visibility 0s 0s;
}

.guide-drawer-head{
  flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 24px 18px;border-bottom:1px solid var(--rule);
}
.guide-kicker{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.22em;color:var(--accent)}
.guide-drawer-head h3{margin:9px 0 0;font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.35}
.guide-x{
  flex:0 0 auto;appearance:none;cursor:pointer;
  width:44px;height:44px;margin:-4px -8px 0 0;
  display:grid;place-items:center;
  background:transparent;border:1px solid var(--rule-strong);border-radius:0;
  font-size:15px;line-height:1;color:var(--ink);
  transition:border-color .16s, color .16s;
}
.guide-x:hover{border-color:var(--ink);color:var(--accent)}

.guide-drawer-body{flex:1 1 auto;overflow-y:auto;padding:22px 24px 26px}
.guide-drawer-foot{
  flex:0 0 auto;padding:16px 24px;
  border-top:1px solid var(--rule);background:var(--paper-2);
}
.guide-drawer-foot .btn{width:100%}

/* 抽屉里只有 560px 宽，三列说明会挤成条状 —— 一律改成单列。
   这几条的权重(0,2,0)高于 pc.css 的 .room-spec(0,1,0)，所以能盖住它。 */
.guide-drawer .room-guide{padding:0;margin-bottom:0}
.guide-drawer .room-spec{grid-template-columns:1fr;gap:26px;margin-top:24px}
.guide-drawer .room-steps{border-top:0}
.guide-drawer .room-steps li{padding:15px 0}
.guide-drawer .room-steps .no{font-size:21px}
.guide-drawer .room-steps p{font-size:12.5px}
.guide-drawer .room-spec-col h4{font-size:11px}

/* ============================================================
   危险动作的统一色：退车 / 删除 / 注销
   刻意不用单纯的红色，而是沿强调色往下压到 --accent-deep，
   既和整站同一套色系，也不会因为"只有它是红的"而显得像报错。
   ============================================================ */
.btn-text.is-danger{color:var(--accent-deep);border-bottom-color:var(--accent-deep)}
.btn-text.is-danger:hover{color:var(--accent);border-bottom-color:var(--accent)}
.btn-line.is-danger{color:var(--accent-deep);border-color:var(--accent-deep)}
.btn-line.is-danger:hover{background:var(--accent-wash);border-color:var(--accent-deep)}

/* ============================================================
   顶栏 / 头部那条登录状态
   两版共用同一份结构（固定在右上角 / 头部右侧），只由各自的 css 调几何。
   ============================================================ */
.user-chip{
  display:inline-flex;align-items:center;gap:10px;
  min-height:32px;
}
.user-face{display:block;flex:0 0 auto}
.user-face .ph{width:26px;height:26px;aspect-ratio:auto;border:1px solid var(--rule-strong)}
.user-btn{
  appearance:none;background:transparent;border:0;cursor:pointer;padding:0;
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--ink);
  border-bottom:1px solid var(--rule-strong);min-height:32px;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .16s,border-color .16s;
}
.user-btn:hover{color:var(--accent);border-bottom-color:var(--accent)}
.user-btn-quiet{font-weight:400;color:var(--ink-2);border-bottom-color:transparent}
.user-btn-quiet:hover{color:var(--accent-deep);border-bottom-color:var(--accent-deep)}

/* ============================================================
   登录 / 注册页
   左说明、右表单的双栏；手机上由 mb.css 改成上下堆叠。
   没有验证码 —— 纯前端 Demo，验证码只有在真的服务端才有意义。
   ============================================================ */
.auth{
  display:grid;gap:44px;align-items:start;
  padding:34px 0 50px;
}
.auth-intro h1{
  margin:12px 0 0;font-size:clamp(28px,3.2vw,40px);
  font-weight:700;letter-spacing:-.035em;line-height:1.16;
}
.auth-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.auth-points li{
  padding-left:20px;position:relative;font-size:14.5px;line-height:1.8;color:var(--ink-2);
}
.auth-points li::before{
  content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;
  background:var(--accent);
}
.auth-points b{color:var(--ink);font-weight:700}
.auth-note{
  margin:24px 0 0;padding:16px 18px;
  border:1px dashed var(--rule-strong);background:var(--paper-2);
  font-size:12.5px;line-height:1.85;color:var(--ink-2);
}
.auth-note b{color:var(--accent-deep)}

.auth-card{
  border-top:3px solid var(--ink);background:#fff;
  padding:26px 26px 30px;
}
.auth-switch{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-bottom:26px}
.auth-switch button{
  appearance:none;background:transparent;border:0;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--ink-3);
  padding:12px 16px;min-height:44px;position:relative;
  transition:color .16s;
}
.auth-switch button:hover{color:var(--ink)}
.auth-switch button[aria-selected="true"]{color:var(--ink)}
.auth-switch button[aria-selected="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent);
}
.auth-card .f-row{margin-bottom:20px}
.auth-actions{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.auth-actions .btn{width:100%}
.auth-demo{
  margin-top:22px;padding:14px 16px;background:var(--paper-2);
  border:1px solid var(--rule);
  font-size:12.5px;line-height:1.8;color:var(--ink-2);
}
.auth-demo b{color:var(--ink)}
.auth-demo code{
  font-family:var(--font-num);font-size:14px;font-weight:700;color:var(--ink);
  padding:1px 6px;background:#fff;border:1px solid var(--rule-strong);
}
.auth-demo .link-btn{margin-left:8px}

/* ============================================================
   个人资料（「我的」）
   ============================================================ */

/* 头上那张身份卡：回答"我现在是以谁的身份在看这个站" */
.me-head{padding:34px 0 0}
.me-idcard{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:22px 24px;border:1px solid var(--rule-strong);background:#fff;
}
.me-face{flex:0 0 auto}
.me-face .ph{width:66px;height:66px;aspect-ratio:auto;border:1px solid var(--rule)}
.me-idmain{flex:1 1 240px;min-width:0}
.me-idmain h2{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.2}
.me-idmeta{
  display:flex;gap:8px;flex-wrap:wrap;
  margin:6px 0 0;font-size:12px;letter-spacing:.1em;color:var(--ink-2);
}
.me-stats{
  list-style:none;display:flex;gap:26px;flex-wrap:wrap;
  margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);
}
.me-stats li{display:flex;flex-direction:column;gap:5px}
.me-stats b{font-size:23px;color:var(--ink)}
.me-stats span{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--ink-2)}

/* 五个分块：横排标签条。手机上可横向滚动，不挤成一团。 */
.me-tabs{
  display:flex;gap:0;overflow-x:auto;
  margin-top:30px;border-bottom:3px solid var(--ink);
  scrollbar-width:none;
}
.me-tabs::-webkit-scrollbar{display:none}
.me-tabs button{
  appearance:none;background:transparent;border:0;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--ink-2);
  padding:12px 20px;min-height:44px;white-space:nowrap;flex:0 0 auto;
  border-bottom:3px solid transparent;margin-bottom:-3px;
  transition:color .16s,border-color .16s;
}
.me-tabs button:hover{color:var(--ink)}
.me-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

.me-body{padding:30px 0 0}
.me-sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.me-sec-head h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.me-sec-head .note{font-size:11.5px;letter-spacing:.12em;color:var(--ink-3)}
.me-panel{padding:24px 0 0}
.me-card-cols{display:grid;gap:34px;align-items:start}

/* ---- 列表块（我的内容 / 心动 / 开黑记录通用） ---- */
.p-sec{margin-top:34px;padding-top:30px;border-top:1px solid var(--rule)}
.p-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.p-sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:18px;
}
.p-sec-head h3{margin:0;font-size:14px;font-weight:700;letter-spacing:.12em}
.p-sec-head .note{font-size:11.5px;letter-spacing:.1em;color:var(--ink-3)}
.p-sec.is-danger .p-sec-head h3{color:var(--accent-deep)}

.p-list{list-style:none;margin:0;padding:0}
.p-item{
  display:flex;align-items:center;gap:18px;
  padding:16px 0;border-top:1px solid var(--rule);
}
.p-item:first-child{border-top:0}
.p-item.is-reply{background:var(--accent-wash);padding-left:14px;padding-right:14px}
.p-face{flex:0 0 auto}
.p-face .ph{width:42px;height:42px;aspect-ratio:auto;border:1px solid var(--rule-strong)}
.p-main{flex:1 1 auto;min-width:0}
.p-title{
  appearance:none;background:transparent;border:0;cursor:pointer;padding:0;
  font:inherit;font-size:15px;font-weight:600;color:var(--ink);text-align:left;
  display:block;width:100%;
  transition:color .16s;
}
.p-title:hover{color:var(--accent)}
.p-text{margin:6px 0 0;font-size:14px;line-height:1.75;color:var(--ink)}
.p-meta{
  display:flex;gap:14px;flex-wrap:wrap;
  margin:6px 0 0;font-size:11.5px;letter-spacing:.08em;color:var(--ink-2);
}
.p-meta b{font-size:13px;color:var(--ink)}
.p-quote{color:var(--ink-3)}
.p-who{color:var(--ink);font-weight:600}
.p-tag{
  align-self:flex-start;margin-top:1px;flex:0 0 auto;
  font-size:10px;font-weight:700;letter-spacing:.1em;line-height:1.6;
  padding:2px 8px;background:var(--ink-2);color:#fff;white-space:nowrap;
}
.p-tag.is-on{background:var(--accent)}
.p-acts{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex:0 0 auto;
}
.p-acts .btn-text{min-height:30px}
.p-empty{
  margin:0;padding:26px 0;font-size:13.5px;line-height:1.85;color:var(--ink-2);
}
.p-empty a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)}
.p-note{margin:14px 0 0;font-size:12.5px;line-height:1.8;color:var(--ink-2)}

/* 匿名的心动：一个打码的圈。刻意不用图库随机图 ——
   那会像一张真人的脸，"匿名"就成了暗示。 */
.heart-masks{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.heart-mask{
  display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;background:var(--ph-bg);color:var(--ph-ink);
  border:1px solid var(--rule-strong);
  font-family:var(--font-num);font-size:21px;font-weight:700;
}
.heart-mask-note{flex:1 1 240px;margin:0;font-size:13px;line-height:1.8;color:var(--ink-2)}
.heart-mask-note b{font-size:17px;color:var(--ink)}

/* 账号信息表 */
.p-rows{
  display:grid;grid-template-columns:auto 1fr;gap:10px 22px;
  margin:0;font-size:14px;
}
.p-rows dt{color:var(--ink-2);letter-spacing:.08em}
.p-rows dd{margin:0;word-break:break-all}
.p-rows code{font-size:12px;color:var(--ink-2)}
.p-form{margin-top:6px}
.p-form .f-row{margin-bottom:18px}
.p-acts-bar{display:flex;gap:14px;flex-wrap:wrap}

/* 出勤概览：一个大数字 + 四个小数字 */
.p-credit{
  display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  padding:20px 22px;border:1px solid var(--rule-strong);background:var(--paper-2);
}
.p-credit-big{display:flex;flex-direction:column;gap:4px}
.p-credit-big b{font-size:40px;color:var(--ink)}
.p-credit-big span{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--ink-2)}
.p-credit-rows{list-style:none;display:flex;gap:26px;flex-wrap:wrap;margin:0;padding:0}
.p-credit-rows li{display:flex;flex-direction:column;gap:3px}
.p-credit-rows span{font-size:11px;letter-spacing:.12em;color:var(--ink-2)}
.p-credit-rows b{font-size:20px;color:var(--ink)}
.p-credit .p-note{flex:1 1 240px;margin:0}

/* 发帖配图预览：一排小缩略图，每张右上角一个叉删掉 */
.ph-preview{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ph-preview .ph-thumb{
  position:relative;width:72px;height:72px;border:1px solid var(--rule-strong);
  overflow:hidden;background:var(--ph-bg);
}
.ph-preview .ph-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph-preview .ph-x{
  position:absolute;top:2px;right:2px;width:22px;height:22px;line-height:20px;
  border:0;border-radius:50%;background:rgba(23,20,15,.72);color:#fff;
  font-size:13px;cursor:pointer;padding:0;
}
.ph-preview .ph-x:hover{background:var(--accent)}

/* 尊重系统的"减少动效"设置 */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}