/* ===== QU MARKET 前台 =====
 * 建在 tokens.css 之上，圆角只用 --r-4 / --r-8（正圆与开关轨道除外，见那份文件头）。
 * 断点只有一个：900px。宽屏「左分区栏 + 右内容」，窄屏收成单列、分区变横滑。
 *
 * 版式上的一条总原则：**列表是一个带描边的整块，条目之间用分隔线**，
 * 不是一堆各自带投影、悬停还会往上浮的卡片 —— 后者是商品页的手感，
 * 论坛要的是能一眼从上扫到下。见 PROMPT/51_独立论坛站.md §3。 */

/* ===== 顶栏 ===== */
.head {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--head-h);
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.head-in {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: none;
}
.brand-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
}
.brand-en {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-hint);
}

.head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 头像：**正圆保持不变** */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: hsl(var(--av-h, 0), 16%, 86%);
  color: #3a3a3a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}
:root[data-theme="dark"] .avatar {
  background: hsl(var(--av-h, 0), 12%, 36%);
  color: #ececec;
}
.avatar-sm { width: 26px; height: 26px; font-size: 11px; }
.avatar-lg { width: 40px; height: 40px; font-size: 16px; }
/* 主页顶上那颗。**尺寸不写在这儿** —— 它由 .profile 的 --pf-avatar 加那圈边算出来
   （见 .profile-head .avatar），两处各写一个数的话，改了一处头像就不圆了 */
.avatar-xl { font-size: 34px; }

/* 传了真头像的那些：图铺满整个正圆，首字那一版被 innerHTML 换掉了 */
.avatar.has-img { background: var(--c-surface-2); overflow: hidden; }
.avatar.has-img img { width: 100%; height: 100%; object-fit: cover; }

/* 作者名 / 作者头像点得进主页。悬停才出下划线：
   帖子详情那一行里已经有「关注」按钮了，名字再常驻一条线，一行里就有两个东西在喊「点我」 */
.by-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.by-link:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }

.menu-wrap { position: relative; }
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  /* 30：压过正文里的一切，又压在顶栏（40）底下。
     没有这一行的时候，窄屏分区条上那颗＋弹出的菜单会被下面帖子的封面盖掉半截 ——
     封面那几块自己是 position: relative（要托住锁标和精华角标），
     而两个都没写层级的定位元素，画在后面的那个赢，帖子永远排在弹层后面。
     顶栏里那个账号菜单从来没这毛病，是因为它整个住在 .head（z-index: 40）里面，
     所以这条毛病只在分区条那一颗上看得见，两处却是同一个 .menu */
  z-index: 30;
  min-width: 180px;
  padding: 4px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.menu.show { opacity: 1; transform: none; pointer-events: auto; }
.menu-name {
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 4px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-4);
  font-size: var(--row-value-size);
  color: var(--c-text);
  text-align: left;
}
.menu-item:hover { background: var(--c-surface-2); }

/* 账号菜单顶上那一张：名字那一栏本身就是「进我的主页」。
   从前它是一块不能点的说明文字，而它长得最像入口，人第一下总是先点它 */
.menu-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--r-4) var(--r-4) 0 0;
}
.menu-card:hover { background: var(--c-surface-2); }
.menu-card-txt { min-width: 0; flex: 1; }
.menu-card-txt b { display: block; font-size: var(--row-name-size); font-weight: 500; }
.menu-card-txt .hint { display: block; font-size: 11px; }
.menu-item.is-on { background: var(--c-surface-2); font-weight: 500; }
.menu-n { margin-left: auto; font-size: 11px; color: var(--c-hint); }

/* ===== 骨架 ===== */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 20px 20px 80px;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* 搜索页没有侧栏，两栏网格得收成一栏，否则左边空出 190px 的洞 */
.shell.is-wide { grid-template-columns: minmax(0, 1fr); }

.side {
  position: sticky;
  top: calc(var(--head-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.side-sec-label { margin: 0 0 6px 10px; }

.navlink {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-4);
  font-size: var(--row-value-size);
  color: var(--c-sub);
  text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navlink:hover { background: var(--c-surface-2); color: var(--c-text); }
.navlink.is-on {
  background: var(--c-accent-dark);
  color: var(--c-bg);
  font-weight: 500;
}
.navlink-n { margin-left: auto; font-size: 11px; opacity: 0.75; }

/* 常用三格与资源区之间那道线。从前这儿是个 10px 的空隙，
   空隙只说得出「这两批不一样」，说不出「上面那批才是常看的」 */
.nav-sep {
  height: 1px;
  margin: 10px 10px;
  background: var(--c-border);
}

.side-note {
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  background: var(--c-bg);
  font-size: 11px;
  line-height: 1.65;
  color: var(--c-sub);
}
.side-note a { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }

/* 搜索页里那条输入行。宽度跟着正文走，不再是顶栏上的浮层 */
.search-row {
  width: 100%;
  max-width: 520px;
  margin: 16px 0 20px;
}

/* 正停在搜索页时，顶栏那颗放大镜按住不放，好让人看出它是个开关 */
.icon-btn.is-on {
  background: var(--c-surface-2);
  color: var(--c-text);
}

/* 窄屏才出现的分区条：左边横滑三格，右边一颗常驻的＋ */
.zonebar {
  display: none;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
/* 只让滑动区往左溢出到屏幕边（.shell 的 20px），右边要给＋留位，不能一起溢 */
.zonebar-scroll {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 6px;
  margin-left: -20px;
  padding-left: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.zonebar-scroll::-webkit-scrollbar { display: none; }
.zonebar .navlink {
  width: auto;
  flex: none;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
}
.zonebar .navlink.is-on { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }

.zone-more { flex: none; }
.zone-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-4);
  background: var(--c-bg);
  color: var(--c-sub);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.zone-more-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
/* 已经在某个资源区里时＋要跟着亮：那一格虽然插在了它左边，
   但滑动区一滑就看不见了，＋是这条上唯一不会走开的位置 */
.zone-more-btn.is-on {
  background: var(--c-surface-3);
  border-color: var(--c-border-m);
  color: var(--c-text);
}

/* ===== 页头 ===== */
.page-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
}
.page-title {
  margin-top: 4px;
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: 1.2;
  color: var(--c-text);
}
.page-desc {
  margin-top: 6px;
  max-width: 68ch;
  color: var(--c-sub);
  font-size: var(--row-value-size);
  line-height: 1.6;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 16px;
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }

.chip {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-4);
  background: var(--c-bg);
  font-size: var(--row-value-size);
  color: var(--c-sub);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { background: var(--c-surface-2); color: var(--c-text); }
.chip.is-on {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: var(--c-bg);
}

/* ===== 资源区：卡片网格 ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 14px;
}

.rcard {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  background: var(--c-bg);
  text-align: left;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rcard:hover { border-color: var(--c-border-m); background: var(--c-surface-l); }

.rcard-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 240 / 315;      /* 与 QuPhone 导出的竖版角色卡同一个比例 */
  border-radius: var(--r-4);
  background: var(--c-surface-2);
  overflow: hidden;
}
.rcard-cover img { width: 100%; height: 100%; object-fit: cover; }

.cover-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-align: center;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: 0.18em;
  color: var(--c-hint);
}

/* 锁标是**正圆**，不受圆角约束 */
.rcard-lock {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-accent-dark);
}

/* 精华角标钉在封面左上：右上角归「需赞」的锁，两个挤在一起谁也读不清 */
.rcard-best {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 0 6px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-4);
  background: var(--c-accent-dark);
  font-size: 10px;
  font-weight: 500;
  color: var(--c-bg);
}

.rcard-title {
  margin-top: 8px;
  min-height: 2.8em;            /* 锁两行：不锁的话单行标题的卡会比邻居矮半行，整片网格看着是歪的 */
  font-size: var(--row-name-size);
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-text);
}

.rcard-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
  font-size: 11px;
  color: var(--c-hint);
}
.rcard-foot .who { color: var(--c-sub); }
.rcard-foot .n { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; }

/* ===== 讨论区：一整块，条目之间用分隔线 ===== */
.rows {
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  background: var(--c-bg);
  overflow: hidden;
}

.trow {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.trow:last-child { border-bottom: none; }
.trow:hover { background: var(--c-surface-l); }

.trow-main { flex: 1; min-width: 0; }
.trow-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-text);
}
.trow-excerpt {
  margin-top: 4px;
  font-size: var(--row-value-size);
  line-height: 1.55;
  color: var(--c-sub);
}
.trow-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--c-hint);
}
.trow-meta .n { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; }

/* 右侧那一列：点赞数是这里最该一眼看到的数，回帖数退到 meta 行。
   负 margin 把行的右 padding 吃回来，让这一列从分割线一直铺到卡片右边缘 ——
   否则数字是在 56px 里居中，右边还挂着 14px padding，整块看着往左歪。 */
.trow-side {
  flex: none;
  width: 70px;
  margin-right: -14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-left: 1px solid var(--c-border);
  color: var(--c-sub);
}
.trow-side b { font-size: 16px; font-weight: 600; color: var(--c-text); }
.trow-side span { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ===== 帖子详情 ===== */
.post {
  max-width: 780px;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  background: var(--c-bg);
}

.post-back { margin-bottom: 14px; }

.post-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text);
}

.post-by {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--row-value-size);
  color: var(--c-sub);
}
.post-by .dot { color: var(--c-hint); }
/* 关注按钮贴着作者名，不跟点赞、举报一起排到底下那行 ——
   关注的对象是人不是帖，放在帖子的操作行里会被读成「关注这条帖子」 */
.follow-btn {
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-4);
  background: var(--c-bg);
  font-size: 11px;
  color: var(--c-sub);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.follow-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.follow-btn.is-on {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: var(--c-bg);
}

.post-body {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-text);
  word-break: break-word;
}
.post-body p + p { margin-top: 1em; }

.post-hero {
  width: 176px;
  aspect-ratio: 240 / 315;
  margin-top: 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  overflow: hidden;
  background: var(--c-surface-2);
}
.post-hero img { width: 100%; height: 100%; object-fit: cover; }

/* 附件条：资源帖的主角 */
.attach {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  background: var(--c-surface-l);
}
.attach-icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-4);
  background: var(--c-surface-2);
  color: var(--c-accent-dark);
}
.attach-main { flex: 1; min-width: 0; }
.attach-name { font-weight: 500; color: var(--c-text); }
.attach-sub { margin-top: 1px; font-size: 11px; color: var(--c-hint); }

.post-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
}

.like-btn[aria-pressed="true"] {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: var(--c-bg);
}

/* ===== 回帖 ===== */
.replies { max-width: 780px; margin-top: 24px; }
.replies-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.replies-head h2 { font-size: 14px; font-weight: 600; }

.reply-list {
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  background: var(--c-bg);
  overflow: hidden;
}
.reply-list:empty { display: none; }

.reply {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
}
.reply:last-child { border-bottom: none; }
/* 自己发的那几条留一道左边线，翻长帖时一眼认得出哪几句是自己说的 */
.reply.is-mine { box-shadow: inset 2px 0 0 var(--c-accent-dark); }

/* 头像外面那层链接得**贴着头像**。不管的话它会被 flex 拉到整行高，
   于是头像底下那片空白也成了可点区域，鼠标飘过去就跳走了 */
.reply > a { flex: none; align-self: flex-start; display: flex; border-radius: 50%; }

.reply-main { flex: 1; min-width: 0; }
.reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--c-sub);
}
.reply-time { margin-left: auto; color: var(--c-hint); }
.reply-text {
  margin-top: 4px;
  line-height: 1.7;
  color: var(--c-text);
  word-break: break-word;
  white-space: pre-wrap;
}

/* 楼里那颗「回复」。压到最右、颜色只到 --c-hint：一屏十几条回帖就是十几颗，
   按正常按钮画的话，整列全是键，回帖本身反倒看不见了 */
.reply-act {
  flex: none;
  padding: 0;
  border: none;
  background: none;
  font-size: 11px;
  color: var(--c-hint);
  cursor: pointer;
}
.reply-act:hover { color: var(--c-text); }

/* 引用行：回的哪一条摆在正文上头，一行装不下就截断（clamp-1 在 tokens.css） */
.reply-quote {
  margin-top: 4px;
  padding: 3px 8px;
  border-left: 2px solid var(--c-border-m);
  border-radius: 0 var(--r-4) var(--r-4) 0;
  background: var(--c-surface);
  font-size: 12px;
  color: var(--c-sub);
}
.reply-quote b { color: var(--c-title); font-weight: 600; }
.reply-quote.is-gone { color: var(--c-hint); }

/* 回帖框顶上的「回复 @某某」。贴着框上沿，与框一起算作一件 */
.reply-to {
  margin-top: 12px;
  margin-bottom: -6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--c-sub);
}
.reply-to b { color: var(--c-title); font-weight: 600; }
.reply-to .btn { margin-left: auto; flex: none; color: var(--c-hint); }

.reply-form { margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; }
.reply-form .field { flex: 1; }

/* ===== 表单页（发帖 / 登录）===== */
.form {
  max-width: 680px;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  background: var(--c-bg);
}
.form-row + .form-row { margin-top: 18px; }

.switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  background: var(--c-surface-l);
}
.switch-row .txt { flex: 1; min-width: 0; }
.switch-row .txt b { display: block; font-weight: 500; }
.switch-row .txt span { font-size: 11px; color: var(--c-sub); }

.picker {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--c-border-m);
  border-radius: var(--r-8);
  background: var(--c-bg);
  text-align: left;
  color: var(--c-accent-dark);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.picker:hover { background: var(--c-surface-l); border-color: var(--c-accent); }
.picker-name { flex: 1; min-width: 0; color: var(--c-text); font-size: var(--row-value-size); }

.form-acts {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
}

/* ===== 个人主页 ===== */
/* 顶上这块照 Qu Phone 聊天设置页（css/chat/chat-set.css 的 .cs-cover + .cs-id）那一套：
 * 一条满幅色带，头像**骑在色带的下沿**上，头像自己带一圈页面底色的边，
 * 压上去才切得出形 —— 没有那圈边的话，头像和色带糊成一团，看不出谁在前面。
 *
 * 与手机端那一版的两处差别：
 *   一、那边头像居中、压掉一半（margin-top 是 -avatar/2），
 *       这边头像**靠左**、只压掉四分之一（-avatar/4）；
 *   二、露在色带外的那四分之三旁边要放名字和 id，所以这一行是 flex 而不是居中的一列。
 * 压一半 + 靠左试过：头像的一半啃进色带之后，名字只能跟着往下掉半个头像的高度，
 * 那时候名字旁边是头像的下半张脸，读起来像两件不相干的东西并排。
 *
 * 只有这一块有底色，下面的标签页与列表照旧白底描边：整页都上背景的话，
 * 帖子列表跟着变了底色，同一份 .rows 在别处是白的、在这儿是灰的，看着像两个站。 */
.profile {
  --pf-avatar: 88px;
  --pf-ring: 4px;            /* 头像那圈底色边，压在色带下沿才切得干净 */

  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  background: var(--c-bg);
  overflow: hidden;
}

/* 色带的色相取自这个人的名字，和他的头像同一族色 ——
   翻了几页之后还认得出「这是谁的主页」。放一张真图要么得让人再传一张、
   要么全站长一个样，这条色带零成本就把人区分开了 */
.profile-banner {
  height: 176px;
  background: hsl(var(--av-h, 0), 18%, 91%);
}
:root[data-theme="dark"] .profile-banner {
  background: hsl(var(--av-h, 0), 12%, 23%);
}

.profile-body { padding: 0 24px 18px; }

/* 负值只有这一处，而且它有具体的活儿干：把头像抬上去压住色带下沿四分之一。
   名字、id、按钮不吃这个负值 —— 它们靠 align-items: flex-end 贴着头像的底边排，
   落在露出来的那四分之三旁边 */
.profile-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: calc(var(--pf-avatar) / -4);
}

.profile-head .avatar {
  border: var(--pf-ring) solid var(--c-bg);
  width: calc(var(--pf-avatar) + var(--pf-ring) * 2);
  height: calc(var(--pf-avatar) + var(--pf-ring) * 2);
}

/* 名字与 id 这一叠贴着头像底边。往上留 6px：
   头像那圈边是实心的，字顶着边线排会显得挤 */
.profile-id { flex: 1; min-width: 0; padding-bottom: 6px; }
.profile-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
}

/* id 那一行做成一颗能点的按钮：它是这个站里唯一能拿去分享的东西，
   而「看得见但复制不走」的 id 等于没有 */
.profile-uid {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 3px 0 0 -5px;      /* 负 5px 抵掉自己的左内边距，让 @ 与上面的名字左对齐 */
  padding: 2px 7px 2px 5px;
  border-radius: var(--r-4);
  font-size: 11px;
  color: var(--c-sub);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.profile-uid:hover { background: var(--c-surface-2); color: var(--c-text); }

.profile-acts { flex: none; padding-bottom: 6px; }

.profile-bio {
  margin-top: 16px;
  max-width: 60ch;
  font-size: var(--row-value-size);
  line-height: 1.7;
  color: var(--c-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.profile-bio.is-empty { color: var(--c-hint); }

/* 「加入 / 获赞 / 粉丝 / 精华」这一行。
   获赞和粉丝住在这儿而不是标签行里：标签行那四个都是「他做了什么」，
   这两个是「别人对他做了什么」，混成一排会被读成第五、第六种他自己的行为。
   这一行整行都只是数，四格一律点不动 —— 从前粉丝那一格能点进列表，
   一行里三个死的一个活的，得挨个试过才知道哪个能点 */
.profile-meta {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 11px;
  color: var(--c-hint);
}
.profile-meta span { display: inline-flex; align-items: center; gap: 4px; }
.profile-meta .warn { color: var(--c-sub); }

/* 标签页那一排。每颗自己带着数 —— 这四个数从前另有一条统计条在画，
   两处画同一件事，改一处就会忘另一处 */
.ptabs { margin-top: 16px; }
.ptabs .chip { display: inline-flex; align-items: center; gap: 5px; }
.chip-n {
  margin-left: 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}
.chip.is-on .chip-n { opacity: 0.75; }

/* ===== 资料编辑 ===== */
.peditor {
  margin: 0 24px 20px;
  padding: 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  background: var(--c-surface-l);
}
.peditor .form-acts { margin-top: 18px; padding-top: 14px; }

/* 这两个框跟正文同一个字号（14px），不再是全站默认的 16px。
 * 16px 那条规矩本来是为了躲开 iOS「聚焦就把整页放大」，现在两个 html 的 viewport
 * 已经照 Qu Phone 锁死了缩放（maximum-scale=1），那条规矩在这儿不再需要 ——
 * 一个 14px 的站里，输入框里的字比正文还大一圈，一打字整页就跟着「胖」了一下。
 * ⚠️ 拆掉 viewport 那道锁的话，这两条要跟着回到 16px。 */
.peditor .field input,
.peditor .area { font-size: var(--font-size-body); }
.peditor-av {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.area-sm { min-height: 76px; }

/* ===== 「回帖」那一页 ===== */
/* 这一页列的是**我说过的话**，不是帖子，所以它不能长得跟 .trow 一样：
   标题退成一行灰色的出处，我的原话才是主体 */
.trow-quote .qhead {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--c-hint);
}
.trow-quote .qhead b {
  min-width: 0;
  font-weight: 500;
  color: var(--c-sub);
}
.qtext {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--c-border-m);
  font-size: var(--row-value-size);
  line-height: 1.6;
  color: var(--c-text);
}

/* ===== 「关注」那一页 ===== */
.urow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
  transition: background var(--dur) var(--ease);
}
.urow:last-child { border-bottom: none; }
.urow:hover { background: var(--c-surface-l); }
.urow-main { flex: 1; min-width: 0; }
.urow-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--row-name-size);
  font-weight: 500;
  color: var(--c-text);
}
.urow-bio { margin-top: 2px; font-size: 11px; color: var(--c-hint); }
.urow-n {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--c-sub);
}
.urow-n b { font-size: 15px; font-weight: 600; color: var(--c-text); }
.urow-n span { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ===== 配图 ===== */
/* 正文与回帖里的图。不是附件 —— 它们只给人看，下载列表里没有它们的位置。
   一帖不限张数，所以这里是能换行的网格而不是一行横排：
   横排到第四张就得靠横滑，而横滑区里的图，人不划一下根本不知道后面还有 */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.shot {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  overflow: hidden;
  background: var(--c-surface-2);
  cursor: zoom-in;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot:hover { border-color: var(--c-border-m); }
/* 回帖那一排小半档：回帖是别人说的一句话，配图不该比正文里的还抢眼 */
.shots-sm {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
  margin-top: 8px;
  max-width: 360px;
}

/* 只有图、没有正文的帖子（答疑区贴一张报错截图就发问，是常事），
   列表那一行的摘要位改说「几张图」。留空的话那一行只剩标题，
   看着像是这条帖子没写完 */
.trow-excerpt re-icon, .qtext re-icon { vertical-align: -2px; margin-right: 3px; }

/* 多个附件时的那行小标题 */
.attach-head { margin-top: 20px; }
.attach-head + .attach { margin-top: 8px; }
.attach + .attach { margin-top: 8px; }

/* 回帖框里那颗图片键。宽度收成方的：它旁边就是「发送」，
   两颗一样宽的话，图标那颗看着也像一个能把话发出去的按钮 */
.reply-pic { flex: none; padding: 0 10px; }

/* ===== 发帖页：已选的文件与图 ===== */
.picked:not(:empty) { margin-bottom: 8px; }
.picked-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  background: var(--c-surface-l);
  font-size: var(--row-value-size);
}
.picked-row + .picked-row { margin-top: 6px; }
.picked-ico { flex: none; display: flex; color: var(--c-accent-dark); }
.picked-name { flex: 1; min-width: 0; color: var(--c-text); }
.picked-size { flex: none; font-size: 11px; color: var(--c-hint); }
.picked-x, .thumb-x {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-hint);
  transition: color var(--dur) var(--ease);
}
.picked-x:hover, .thumb-x:hover { color: var(--c-text); }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs:not(:empty) { margin-bottom: 8px; }
.thumb {
  position: relative;
  width: 76px;
  height: 76px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-8);
  overflow: hidden;
  background: var(--c-surface-2);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 撤销键钉在缩略图右上角，自己带一块底 —— 压在图上的话，
   碰上一张浅色截图它就整个消失了 */
.thumb-x {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-sub);
}
/* 回帖框底下那一排。缩略图与上面的输入框留一道 8px，
   贴着的话它看起来像是从输入框里长出来的 */
#reply-thumbs:not(:empty) { margin: 8px 0 0; }

/* ===== 窄屏 ===== */
/* ===== 登录页 ===== */
/* 卡本身在 tokens.css（前后台共用那一张），这儿只放前台那条三分支路上多出来的部件。
 * 后台登录页引不到这一段，也用不上它 —— 那边只有一个密码框 */

/* 顶上那一行「← 12345678 换一个」。做成整行可点，而不是一个小箭头：
 * 它同时是「你正在用哪个号」的显示位，两件事挤在一个箭头上，两件都看不清 */
.auth-back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-4);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--row-value-size);
  cursor: pointer;
}
.auth-back:hover { background: var(--c-surface-2); }
.auth-back .hint { margin-left: auto; }

/* 一道题一块。块与块之间靠间距分开，不画分割线 ——
 * 选项本身已经是一排小方块了，再加横线就成了网格 */
.quiz-q { margin-top: 18px; }
.quiz-ask { line-height: 1.6; margin-bottom: 8px; }

/* 选项整行可点（label 包着 radio），点小圆点那 12px 是这一页最容易点空的地方 */
.quiz-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  margin-top: 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-4);
  line-height: 1.5;
  cursor: pointer;
}
.quiz-opt:hover { background: var(--c-surface); }
.quiz-opt input { margin-top: 3px; accent-color: var(--c-accent); }
.quiz-opt:has(input:checked) { border-color: var(--c-accent); background: var(--c-surface); }

/* 要抄的那一句。给它一块底色是为了让人一眼看出「这句是照抄的原文」，
 * 而不是把它读成上面那道题的第五个选项 */
.quiz-pledge {
  padding: 10px 12px;
  border-radius: var(--r-4);
  background: var(--c-surface-2);
  line-height: 1.7;
}

/* 答对之后的群号与口令 */
.pass-box {
  margin-top: 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-4);
  overflow: hidden;
}
.pass-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}
.pass-row + .pass-row { border-top: 1px solid var(--c-border); }
.pass-k { color: var(--c-hint); font-size: var(--row-value-size); }
/* 群号和口令是要被抄走的，给它们等宽字与可选中 —— 卡片其余部分不选中没关系，
 * 这两格选不中就只能靠旁边那颗复制键，而复制键在非 https 上是会失败的 */
.pass-v { flex: 1; min-width: 0; word-break: break-all; user-select: text; }
.auth-card .pass-row .btn { width: auto; margin-top: 0; }

@media (max-width: 900px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 16px;
    gap: 0;
  }
  .side { display: none; }
  .zonebar { display: flex; }
  .page-title { font-size: 22px; }
  .post, .form { padding: 16px; border-radius: var(--r-8); }
  .post-title { font-size: 19px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
  .trow { padding: 12px; gap: 10px; }
  /* 375 宽上一行两张：minmax(132px) 在这儿会掉成一列，
     一列的配图跟正文一样宽，读起来像是每张图各占一段 */
  .shots { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
  .shots-sm { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .trow-side { width: 58px; margin-right: -12px; }

  /* 个人主页：色带与头像各收一档，压四分之一那条规矩不变（它是 calc 出来的，跟着变）。
     「头像 + 名字」占一行、按钮自己占一行 —— 三样并排在 375 宽上放不下，
     名字会被压成每行两个字 */
  .profile { --pf-avatar: 68px; }
  .profile-banner { height: 128px; }
  .avatar-xl { font-size: 26px; }
  .profile-head { flex-wrap: wrap; gap: 12px; }
  .profile-name { font-size: 19px; }
  /* 按钮掉到第二行之后就不再是「贴着头像底边」的那一档了，这 6px 会变成多余的空隙 */
  .profile-acts { flex: 1 0 100%; padding-bottom: 0; }
  .profile-acts .btn { width: 100%; }
  .profile-body { padding: 0 16px 16px; }
  .peditor { margin-left: 16px; margin-right: 16px; }
  /* 四颗标签要排成一行。每颗现在多带一个数字，窄屏上光收 padding 不够，
     所以这儿把图标收掉 —— 发帖 / 赞过 / 回帖 / 关注 这四个词本来就说得清自己是什么，
     图标是锦上添花的那一层，换行才是真的难看 */
  .ptabs .chip { padding: 0 10px; gap: 4px; }
  .ptabs .chip re-icon { display: none; }
  .urow { padding: 12px; }
}