/* ==========================================================================
   X22. 个人中心（/profile）· 方案 E：内容先行阅读流
   --------------------------------------------------------------------------
   结构：居中大标题 → 身份卡 → 功能行卡流（铺满）→ 右侧抽屉。
   与固件页 .dk-panel / .dk-row 同源：白卡、24px 圆角、柔和阴影、悬停浮起。
   取消原「左导航 + 右内容」分栏（archive.css 的 .profile-* 系列不再使用）。
   ========================================================================== */

/* ---------- 居中大标题（对齐 .dk-hero / .ag-hero） ---------- */
.pf-hero { text-align: center; margin-bottom: 30px; }
.pf-hero-ico {
  display: grid; place-items: center; width: 56px; height: 56px;
  margin: 0 auto 18px; border-radius: var(--r-panel); color: #fff;
  background: var(--grad-deep); box-shadow: var(--shadow-float);
}
.pf-hero-ico svg { width: 28px; height: 28px; }
.pf-hero h1 {
  font-size: 34px; font-weight: 800; letter-spacing: -.5px;
  color: var(--ink); margin: 0 0 12px;
}
.pf-hero p { font-size: 15.5px; color: var(--ink-2); margin: 0; line-height: 1.75; }

/* ---------- 身份卡 ---------- */
.pf-idcard {
  background: #fff; border: 0; border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: 26px 28px;
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.pf-idcard-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pf-idcard-avatar {
  width: 72px; height: 72px; flex: 0 0 72px;
  border-radius: 50%; overflow: hidden;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rule-2), var(--shadow-card);
}
.pf-idcard-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-idcard-txt { min-width: 0; }
.pf-idcard-txt h2 {
  font-size: 21px; font-weight: 800; color: var(--ink);
  margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-idcard-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.pf-idcard-join { font-size: 12.5px; color: var(--ink-3); }
.pf-idcard-caps { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }

/* 胶囊徽标 */
.pf-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; padding: 3px 11px;
  border-radius: var(--radius-pill); color: var(--ink-2); background: var(--paper-2);
}
.pf-chip.tone-blue { background: var(--brand-wash); color: var(--brand); }
.pf-chip.tone-teal { background: rgba(17, 17, 17, .08); color: var(--ink-2); }

/* 身份卡右侧数据格 */
.pf-idcard-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-stat {
  min-width: 96px; text-align: center;
  background: var(--paper-2); border-radius: var(--radius); padding: 12px 16px;
}
.pf-stat b { display: block; font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.pf-stat span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* ---------- 功能行卡流 ---------- */
.pf-rows { display: flex; flex-direction: column; gap: 9px; }
.pf-row {
  display: flex; align-items: center; gap: 15px; width: 100%; text-align: left;
  background: #fff; border: 0; border-radius: var(--r-card);
  padding: 17px 20px; cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pf-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: rgba(17, 17, 17, .18);
}
.pf-row-ico {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r-card);
  display: grid; place-items: center; color: #fff;
}
.pf-row-ico svg { width: 21px; height: 21px; }
.tone-blue   { background: var(--grad-blue); }
.tone-violet { background: var(--grad-violet); }
.tone-teal   { background: var(--grad-teal); }
.tone-gold   { background: var(--grad-gold); }
.tone-pink   { background: var(--grad-pink); }
.tone-gray   { background: linear-gradient(135deg, #9aa4b8, #6b7688); }

.pf-row-main { flex: 1 1 auto; min-width: 0; }
.pf-row-main b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.pf-row-main small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* 行卡右侧状态胶囊：车辆数 / 未读数 / 设备数 / 反馈数 */
.pf-row-badge {
  flex: none; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--paper-2); border-radius: var(--radius-pill); padding: 4px 13px;
  font-variant-numeric: tabular-nums;
}
.pf-row-badge.hot { background: #fdecec; color: #c62828; }
.pf-row-go { flex: none; font-size: 22px; color: var(--ink-3); line-height: 1; }
.pf-row:hover .pf-row-go { color: var(--brand); }
.pf-row-danger .pf-row-main b { color: var(--red); }

/* ---------- 功能整页（2026-10-06 替换原右侧抽屉） ----------
   改造原因：抽屉是 position:fixed + z-index:120 的浮层，会盖住顶栏与底部
   TAB，并给 body 加 overflow:hidden 锁滚动 —— 用户反馈"影响顶栏、底栏、TAB"。
   现在改为 <article class="pf-page"> 参与文档流，视觉沿用 /login 的 .authpage
   卡片语言（图标 + 标题 + 副标题 + 卡片正文），顶栏/底栏/TAB 始终可见可点。
   ──────────────────────────────────────────────────────────────── */
.pf-page {
  margin: 22px 0 8px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-panel);
  box-shadow: 0 10px 34px rgba(15, 23, 42, .06);
  overflow: hidden;
  animation: pfPageIn .26s cubic-bezier(.22, .8, .3, 1);
}
@keyframes pfPageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.pf-page__hd {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--brand-wash, #f6f8fc), transparent);
}
.pf-page__ico {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--r-card);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
}
.pf-page__ico svg { width: 22px; height: 22px; }
.pf-page__htxt { flex: 1 1 auto; min-width: 0; }
.pf-page__idx {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .16em;
  color: var(--ink-3); margin-bottom: 3px;
}
.pf-page__htxt h2 {
  font-size: 19px; font-weight: 800; color: var(--ink); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-page__desc {
  margin: 4px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5;
}
/* 返回按钮：取代原抽屉右上角的 × */
.pf-page__back {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 14px 0 11px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-2);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s;
}
.pf-page__back:hover { background: var(--rule-2); color: var(--ink); }

.pf-page__body { padding: 22px 24px 26px; }

/* 底部操作条：与内容脱钩，滚到底也能看到按钮 */
.pf-drawer-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* ---------- 抽屉内构件 ---------- */
/* 头像选择器：app.css 的 .avatar-opt.active 依赖 --brand-50，
   该变量在小艺主题中不存在（导致选中项无高亮），在此按 --brand-wash 覆盖。 */
.avatar-opt { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; background: var(--paper-2); padding: 0; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.avatar-opt img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.avatar-opt:hover { transform: translateY(-2px); }
.avatar-opt.active {
  border-color: var(--brand); background: var(--brand-wash);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.avatar-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* 说明文字 */
.pf-drawer-lead { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; margin: 0 0 16px; }
/* 小节标题（替代原 .sect-head 的巨型标题，节省抽屉纵向空间） */
.pf-sec-title {
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.pf-sec-title::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px;
  background: var(--grad-blue); flex: none;
}

/* 键值表（替代 .kv，横向紧凑） */
.pf-kv {
  background: var(--paper-2); border-radius: var(--radius); padding: 4px 16px;
  margin-bottom: 24px;
}
.pf-kv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--rule-2);
}
.pf-kv-row:last-child { border-bottom: 0; }
.pf-kv-row > span { font-size: 13px; color: var(--ink-3); flex: none; }
.pf-kv-row > b {
  font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 车辆行卡 */
.pf-car {
  display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 13px 15px; margin-bottom: 9px;
}
.pf-car-ico {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--r-card);
  display: grid; place-items: center; color: #fff; background: var(--grad-violet);
}
.pf-car-ico svg { width: 19px; height: 19px; }
.pf-car-txt { flex: 1 1 auto; min-width: 0; }
.pf-car-txt b {
  display: block; font-size: 14px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-car-txt small {
  display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px;
  font-family: var(--font-mono);
}
.pf-car-txt small.ok { color: #157f3d; }
.pf-car-txt small.warn { color: #b45309; }
.pf-car-acts { flex: none; display: flex; gap: 6px; }

/* 消息行卡 */
.pf-msg {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line-soft);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius); padding: 14px 16px;
  transition: background .15s, opacity .15s;
}
.pf-msg:hover { background: var(--brand-wash); }
.pf-msg.is-read { border-left-color: var(--rule-2); opacity: .72; }
.pf-msg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-msg-top b { font-size: 14px; font-weight: 700; color: var(--ink); min-width: 0; }
.pf-msg-tag {
  flex: none; font-size: 11.5px; font-weight: 600; padding: 2px 9px;
  border-radius: var(--radius-pill); background: var(--paper-2); color: var(--ink-3);
}
.pf-msg-tag.hot { background: #fdecec; color: #c62828; }
.pf-msg-time { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; font-family: var(--font-mono); }
.pf-msg-body { font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.7; white-space: pre-wrap; }

/* 反馈记录卡 */
.pf-fb {
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 15px 16px; margin-bottom: 10px;
}
.pf-fb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-fb-top b { font-size: 14px; font-weight: 700; color: var(--ink); min-width: 0; }
.pf-fb-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; font-family: var(--font-mono); }
.pf-fb-body { font-size: 13px; color: var(--ink-2); margin-top: 9px; line-height: 1.7; white-space: pre-wrap; }
.pf-fb-reply {
  margin-top: 12px; padding: 11px 13px; font-size: 13px; line-height: 1.7;
  background: #e9f7ee; border: 1px solid #c8e6d4; border-radius: var(--r-ctl); color: #0f5132;
}

/* ---------- 深色模式 ---------- */
[data-theme="dark"] .pf-idcard,
[data-theme="dark"] .pf-row,
[data-theme="dark"] .pf-page,
[data-theme="dark"] .pf-car,
[data-theme="dark"] .pf-msg,
[data-theme="dark"] .pf-fb {
  background: var(--panel, #1a1d21); border-color: var(--rule-2);
}
[data-theme="dark"] .pf-row:hover { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .pf-chip.tone-blue { background: rgba(245, 245, 245, .12); color: var(--ink-2); }
[data-theme="dark"] .pf-chip.tone-teal { background: rgba(245, 245, 245, .12); color: #cfcfcf; }
[data-theme="dark"] .pf-row-badge.hot { background: rgba(198, 40, 40, .2); color: #ff8a80; }
[data-theme="dark"] .pf-fb-reply {
  background: rgba(21, 127, 61, .16); border-color: rgba(21, 127, 61, .4); color: #9be3ba;
}
[data-theme="dark"] .pf-msg:hover { background: var(--hover-on-card); }
[data-theme="dark"] .pf-hero-ico { box-shadow: none; }

/* ---------- 响应式 ---------- */
/* 平板：整页卡片收窄内边距 */
@media (max-width: 1024px) {
  .pf-page__hd { padding: 20px 20px 16px; }
  .pf-page__body { padding: 20px 20px 24px; }
}

/* 手机：抽屉全宽；身份卡纵向堆叠；标题缩小 */
@media (max-width: 640px) {
  .pf-hero { margin-bottom: 24px; }
  .pf-hero-ico { width: 48px; height: 48px; border-radius: var(--r-panel); margin-bottom: 14px; }
  .pf-hero-ico svg { width: 24px; height: 24px; }
  .pf-hero h1 { font-size: 26px; }
  .pf-hero p { font-size: 14px; }

  .pf-idcard { padding: 20px 18px; gap: 18px; }
  .pf-idcard-avatar { width: 58px; height: 58px; flex: 0 0 58px; }
  .pf-idcard-txt h2 { font-size: 18px; }
  /* 4 个数据格排成 2×2，避免横向溢出 */
  .pf-idcard-stats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pf-stat { min-width: 0; padding: 10px 12px; }
  .pf-stat b { font-size: 20px; }

  .pf-row { padding: 14px 15px; gap: 12px; }
  .pf-row-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--r-card); }
  .pf-row-ico svg { width: 19px; height: 19px; }
  .pf-row-main b { font-size: 15px; }
  .pf-row-badge { padding: 3px 10px; font-size: 12px; }
  .pf-row-go { font-size: 20px; }

  /* 功能整页：窄屏收起副标题、返回按钮只留箭头 */
  .pf-page { margin: 16px 0 6px; border-radius: var(--r-panel); }
  .pf-page__hd { padding: 16px 15px 13px; gap: 11px; }
  .pf-page__ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--r-card); }
  .pf-page__ico svg { width: 19px; height: 19px; }
  .pf-page__htxt h2 { font-size: 17px; }
  .pf-page__desc { display: none; }
  .pf-page__back { width: 34px; padding: 0; justify-content: center; }
  .pf-page__back span { display: none; }
  .pf-page__body { padding: 15px 15px 20px; }

  /* 车辆行卡在窄屏改为「图标 + 文本」两行，按钮另起一行 */
  .pf-car { flex-wrap: wrap; }
  .pf-car-acts { width: 100%; justify-content: flex-end; }
}

/* ==========================================================================
   协议与政策链接行（独立区块）
   --------------------------------------------------------------------------
   位于功能行卡流下方，但**刻意与 .pf-row 分开**：
     · 行卡流是「打开抽屉」的功能入口 → 白卡 + 图标 + 描述，42px 图标块
     · 协议链接是「跳转到独立页面」→ 浅灰底容器 + 胶囊按钮，无图标无描述
   同一行内并排三枚（移动端也保持一行，不折行）。
   移动端页脚已隐藏（theme-xiaoyi.css X22 段），这里成为协议入口的唯一出口。
   ⚠️ **只在移动端（≤900px，即底部有 TAB 时）显示**：
     PC 端页脚 `.foot-links` 已经承载这三枚协议入口，重复一遍是冗余。
     断点必须与 app.js 的 BREAKPOINT=900 / #tabbar 的显示条件严格一致，
     否则会出现「PC 有底部 TAB 但协议区被藏」或反之的空档。
   ========================================================================== */
.pf-legal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
}
/* PC 端隐藏（页脚 .foot-links 已有这三枚入口）。
   用 `body` 提权到 0,1,1，确保压过上面的 0,1,0 —— 否则同权重下
   规则写在前面会被后面的覆盖（CSS 是「后写胜出」，不是「先写胜出」）。 */
@media (min-width: 901px) {
  body .pf-legal { display: none; }
}
.pf-legal-link {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.pf-legal-link:hover {
  color: var(--brand);
  border-color: rgba(17, 17, 17, .22);
  box-shadow: 0 2px 8px rgba(17, 17, 17, .08);
}
.pf-legal-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 超窄屏：缩小内边距与字号，3 枚仍保持一行 */
@media (max-width: 400px) {
  .pf-legal { gap: 6px; padding: 10px; }
  .pf-legal-link { font-size: 12.5px; padding: 9px 4px; }
}

/* ==========================================================================
   协议区 · 移动端三 项调整（2026-10-04 用户反馈）
   --------------------------------------------------------------------------
   ① 整体高度更小：实测容器 63px 偏厚（padding 12px + 链接 padding 10px 叠加）。
      压到约 44px，接近一条工具条的视觉体量。
   ② 位置更低、贴近底部 TAB：原来距 TAB 上沿仅 31px（偏上、悬在内容中间），
      用更大的下外边距把它推到 TAB 上方约 12px 处，形成"贴底"的稳定感。
   ③ 加毛玻璃：与站内 .search-card / .hero-stat 同一配方
      （半透明 + backdrop-filter blur），底下的光晕/渐变能透上来。
      三个链接本身也从纯白改半透明，否则会在玻璃上显得"浮在雾上的白块"。
   ========================================================================== */
@media (max-width: 900px) {
  .pf-legal {
    /* ③ 毛玻璃：半透明底+ 模糊，让背景透上来 */
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, .72);
    box-shadow: 0 4px 16px rgba(17, 17, 17, .06);
    /* ① 更矮：padding 12→5，链接 padding 10→3，总高约 63→40px */
    padding: 5px 7px;
    gap: 6px;
    margin-top: 10px;
    /* ② 更低：贴近底部 TAB。
       距 TAB 的距离由父容器 #app 的 padding-bottom:96px 决定（为 TAB 让位，
       全站通用、不能改）。这里用 transform 把自身**视觉上**下移，
       而不改动布局 —— 避免负 margin 引起的页面高度/滚动异常。 */
    transform: translateY(20px);
    margin-bottom: 0;
    position: relative; z-index: 2;
  }
  .pf-legal-link {
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    border-color: rgba(255, 255, 255, .8);
    padding: 3px 4px;          /* ① 链接内边距同步压缩 */
    font-size: 12.5px;
    box-shadow: none;          /* 玻璃层不需要再叠一层实心阴影 */
  }
  .pf-legal-link:hover {
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 2px 8px rgba(17, 17, 17, .08);
  }
}
/* 暗色模式：毛玻璃在深色下要用深色半透明，否则会变成"发白的灰块" */
@media (max-width: 900px) {
  [data-theme="dark"] .pf-legal { background: rgba(22, 25, 30, .62); border-color: rgba(255,255,255,.1); }
  [data-theme="dark"] .pf-legal-link { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: var(--ink-2); }
}

/* ---------- 必填字段标记（2026-10-06 昵称必填）----------
   原label 用「（最多 20 字，留空即清除）」这类括号说明，既长又不能表达"必填"。
   现在改成：红色星号 + 灰色补充说明，语义一眼可辨。 */
.req-star { color: #d14343; font-weight: 800; margin-left: 2px; }
.req-hint { font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.form-row input:required:invalid { border-color: #e3a0a0; }

/* ---------- 车卡内联编辑态（2026-10-06「改配置」弹窗 → 原地展开）---------- */
.pf-car-item.editing {
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
  margin-bottom: 9px;
  animation: pfPageIn .22s ease;
}
/* 编辑表单与卡片底边的呼吸空间（2026-10-06）*/
.pf-car-item.editing .row-gap { margin-bottom: 2px; }

/* ---------- 弹窗内验证码行（2026-10-06）----------
   修复：发送按钮与输入框贴在一起/被挤到下一行。
   显式声明横排 + 10px 间距，按钮不再继承全局按钮的宽度行为；
   同时内联红绿提示已全部移除（走全局 toast），行间距由本规则兜底。 */
.modal .code-row { display: flex; align-items: stretch; gap: 10px; }
.modal .code-row input { flex: 1 1 auto; min-width: 0; }
.modal .code-row .btn { flex: 0 0 auto; white-space: nowrap; width: auto; }
.modal .form-row + .modal-row { margin-top: 18px; }

/* ---------- 换绑邮箱内联表单（2026-10-06）----------
   原弹窗改造为安全页内原位展开（与车库「改配置」同模式）。
   .pf-inline-edit：内联编辑卡片；.pf-inline-step：步骤指示小字。 */
.pf-inline-edit {
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px;
  animation: pfPageIn .22s ease;
}
.pf-inline-step {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-3, #8a8f99);
}

/* ---------- 内联表单行布局（2026-10-06）----------
   archive.css 已弃用，.row-gap/.auth-half/.code-row 均无定义；
   内联换绑表单不能依赖弹窗作用域的 .modal 前缀规则，这里补齐自包含版本。 */
.pf-inline-edit .code-row { display: flex; align-items: stretch; gap: 10px; }
.pf-inline-edit .code-row input { flex: 1 1 auto; min-width: 0; width: auto; }
.pf-inline-edit .code-row .btn { flex: 0 0 auto; white-space: nowrap; width: auto; }
.pf-inline-edit .row-gap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-inline-edit .row-gap .btn { flex: 1 1 0; justify-content: center; }

/* ==========================================================================
   站内消息 · C 极简收件箱（2026-10-06）
   APP 收件箱语言：左侧图标气泡 + 分割线 + 单行截断，信息密度最高。
   分隔线用 --rule 细线。未读态（2026-10-06 重设计）：品牌蓝实心图标 + 光晕圆点 + 中性灰底，
   已去掉原先的左侧蓝色色条与蓝灰底。
   ========================================================================== */
.pf-inbox { border: 1px solid var(--rule); border-radius: var(--radius, 10px); overflow: hidden; background: var(--panel, #fff); }
.pf-inbox-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background .15s ease;
}
.pf-inbox-row:last-child { border-bottom: 0; }
/* hover：未读行加重一档灰；已读行用更浅的纸灰，保持"已读=纯白"的默认态 */
.pf-inbox-row:hover { background: var(--paper-2); }
.pf-inbox-row.is-unread:hover { background: var(--paper-3); }
/* 未读（2026-10-06 用户反馈重设计）：去掉原先「浅蓝底 + 左侧 3px 色条」的双重叠加
   （4 重提示过多、视觉噪音大，且色条与整行蓝底重复）。
   改为：品牌蓝实心图标（列表里唯一的彩色锚点）+ 8px 光晕圆点 + 中性灰底。
   底色刻意用 --paper-2 灰而非蓝灰，避免与站内其它"蓝色选中态"混淆。 */
.pf-inbox-row.is-unread { background: var(--paper-2); }
.pf-inbox-ico {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-ctl);
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink-3);
}
/* 未读图标：品牌蓝实心块 —— 最醒目的单点标记 */
.pf-inbox-row.is-unread .pf-inbox-ico {
  background: var(--brand); color: #fff;
  box-shadow: 0 1px 3px rgba(17, 17, 17, .28);
}
/* 已读行保持纯白底，让未读的灰底形成"有内容/已处理"的层次 */
.pf-inbox-row.is-read { background: var(--panel, #fff); }
.pf-inbox-row.is-read .pf-inbox-ico { background: var(--paper-2); color: var(--ink-3); }
.pf-inbox-main { flex: 1 1 auto; min-width: 0; }
.pf-inbox-title {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4;
}
/* 未读标题加重加深；已读降权 */
.pf-inbox-row.is-unread .pf-inbox-title { font-weight: 700; color: var(--ink); }
.pf-inbox-row.is-read .pf-inbox-title { font-weight: 500; color: var(--ink-2); }
.pf-inbox-title .t {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 未读圆点：8px 实心 + 3px 浅蓝光晕，密集列表下也清晰 */
.pf-inbox-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); transform: translateY(-3px);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.pf-inbox-sub {
  margin-top: 2px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-inbox-time {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); white-space: nowrap;
}
.pf-inbox-del {
  flex: 0 0 auto; width: 28px; height: 28px; border: 0; background: transparent;
  border-radius: var(--r-ctl); color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center; opacity: 0;
  transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.pf-inbox-row:hover .pf-inbox-del { opacity: 1; }
.pf-inbox-del:hover { color: var(--red); background: var(--red-wash); }
/* 触屏无 hover：始终可见 */
@media (hover: none) { .pf-inbox-del { opacity: .6; } }

/* 工具条：未读计数 + 全部已读 */
.pf-inbox-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.pf-inbox-count { font-size: 12.5px; color: var(--ink-3); }
.pf-inbox-count b { color: var(--brand); font-weight: 600; }
.pf-inbox-bar .btn { padding: 6px 13px; font-size: 12.5px; }
.pf-inbox-bar .btn:disabled { opacity: .45; cursor: not-allowed; }

/* 分页器（沿用站内 s-pager 语言） */
.pf-inbox-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 14px; flex-wrap: wrap;
}
.pf-inbox-pager .info { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.pf-inbox-pager .btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-inbox-pager .btns .dots { color: var(--ink-3); font-size: 12px; padding: 0 2px; }
.pf-inbox-pager button {
  min-width: 30px; height: 30px; padding: 0 10px;
  border: 1px solid var(--rule-2); background: var(--panel, #fff);
  border-radius: var(--r-ctl); font-size: 12px; color: var(--ink-2); cursor: pointer;
}
.pf-inbox-pager button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }
.pf-inbox-pager button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pf-inbox-pager button:disabled { opacity: .45; cursor: not-allowed; }

/* 窄屏：单行截断太窄，改为两行（标题 1 行 + 正文最多 2 行），
   时间下沉到正文之后，保证关键信息完整可读。
   用 grid 精确排位：图标 | 内容 | 删除 ，第二行 时间独占整行。 */
@media (max-width: 640px) {
  .pf-inbox-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas: "ico main del" "ico time time";
    align-items: start;
    column-gap: 10px;
    row-gap: 2px;
    padding: 12px;
  }
  .pf-inbox-ico { grid-area: ico; width: 28px; height: 28px; border-radius: var(--r-ctl); }
  .pf-inbox-main { grid-area: main; }
  .pf-inbox-del { grid-area: del; align-self: center; }
  .pf-inbox-sub {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pf-inbox-time { grid-area: time; margin-top: 3px; font-size: 10.5px; }
  .pf-inbox-pager { flex-direction: column; align-items: stretch; gap: 10px; }
  .pf-inbox-pager .info { text-align: center; }
  .pf-inbox-pager .btns { justify-content: center; }
}

/* ==========================================================================
   意见反馈 · 方案A 常驻表单 + 会话时间线（2026-10-06）
   结构：常驻提交表单 → 反馈卡片流（管理员回复与用户追加按时间排列）→ 分页器。
   .pf-fb-thread：对话时间线；.pf-fb-append：追加补充原位展开区（无弹窗）。
   ========================================================================== */

/* 类别 chips（替代原生 select，交互与站内一致） */
.pf-fb-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-fb-cat {
  padding: 5px 11px; border-radius: var(--r-ctl); font-size: 12px;
  background: var(--paper-2); color: var(--ink-3);
  border: 1px solid transparent; cursor: pointer; transition: .15s;
  font-family: inherit;
}
.pf-fb-cat:hover { border-color: var(--rule-2); }
.pf-fb-cat.on {
  background: var(--brand-wash); color: var(--brand-ink);
  border-color: rgba(17, 17, 17, .25); font-weight: 600;
}

/* 反馈卡片 */
.pf-fb-item {
  background: var(--panel, #fff);
  border: 1px solid var(--rule); border-radius: var(--r-card);
  overflow: hidden; margin-bottom: 10px;
}
.pf-fb-item-head { padding: 12px 14px 0; display: flex; gap: 9px; align-items: flex-start; }
.pf-fb-item-title {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700;
  color: var(--ink); line-height: 1.4;
  display: flex; align-items: baseline; gap: 8px;
}
.pf-fb-item-title .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-fb-item-meta {
  padding: 0 14px; margin-top: 4px;
  font-size: 11px; color: var(--ink-3); font-family: var(--font-mono);
}
/* 状态标签 */
.pf-fb-st { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-micro); flex: 0 0 auto; }
.pf-fb-st.pending { background: var(--amber-wash); color: var(--amber); }
.pf-fb-st.replied { background: var(--green-wash); color: var(--green); }
.pf-fb-st.closed  { background: var(--paper-3); color: var(--ink-3); }
/* 正文：3 行截断 */
.pf-fb-item-body {
  padding: 8px 14px 0; font-size: 13px; color: var(--ink-2); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-fb-item.is-closed { opacity: .72; }

/* 对话时间线：管理员回复 + 用户追加按时间排列 */
.pf-fb-thread { padding: 11px 14px 0; display: flex; flex-direction: column; gap: 8px; }
.pf-fb-thread:empty { display: none; }
.pf-fb-msg { border-left: 2px solid var(--rule-2); padding-left: 10px; }
.pf-fb-msg.admin { border-left-color: var(--green); }
.pf-fb-msg.user  { border-left-color: var(--brand); }
.pf-fb-msg-who { font-size: 10.5px; font-weight: 700; margin-bottom: 4px; color: var(--ink-3); }
.pf-fb-msg.admin .pf-fb-msg-who { color: var(--green); }
.pf-fb-msg.user  .pf-fb-msg-who { color: var(--brand); }
.pf-fb-msg-tx {
  font-size: 12.5px; line-height: 1.68; color: var(--ink-2);
  background: var(--paper-2); border-radius: var(--r-ctl); padding: 8px 11px;
  white-space: pre-wrap; word-break: break-word;
}
.pf-fb-msg.admin .pf-fb-msg-tx { background: var(--green-wash); }

/* 底部操作区 */
.pf-fb-item-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px;
}
.pf-fb-item-foot .sp { margin-left: auto; }

/* 追加补充：原位展开（不用弹窗） */
.pf-fb-append {
  border-top: 1px dashed var(--rule-2);
  background: var(--paper-2); padding: 11px 14px;
}
.pf-fb-append-label {
  font-size: 11px; color: var(--ink-3); margin-bottom: 7px;
  display: flex; align-items: center; gap: 5px;
}
.pf-fb-append textarea {
  width: 100%; min-height: 64px; resize: vertical;
  border: 1px solid var(--rule-2); border-radius: var(--r-ctl);
  padding: 9px 11px; font-size: 12.5px; line-height: 1.6;
  font-family: inherit; color: var(--ink); background: var(--panel, #fff);
}
.pf-fb-append-actions { display: flex; gap: 8px; margin-top: 8px; }

/* 归档提示条 */
.pf-fb-archived-tip {
  background: var(--paper-2); border-radius: var(--r-ctl);
  padding: 11px 13px; font-size: 12px; color: var(--ink-3);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.pf-fb-archived-tip .btn { margin-left: auto; }

/* 空态 */
.pf-fb-empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* ---------- 深色模式 ---------- */
[data-theme="dark"] .pf-fb-cat.on { background: var(--select-solid); color: var(--select-solid-ink); border-color: transparent; }
[data-theme="dark"] .pf-fb-msg.admin .pf-fb-msg-tx { background: rgba(21, 127, 61, .16); color: #9be3ba; }
[data-theme="dark"] .pf-fb-append { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .pf-fb-msg-tx { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .pf-fb-append textarea { background: var(--panel, #1a1d21); border-color: var(--rule-2); }
[data-theme="dark"] .pf-fb-archived-tip { background: rgba(255, 255, 255, .04); }

/* ---------- 方案A 对齐补充（2026-10-06）----------
   与设计稿 test/feedback-layout-preview.html 方案A 严格对齐：
   ① 提交表单包在白底卡片里（.pf-fb-formcard），与下方反馈流形成视觉分组；
   ② 表单内字段间距 7px、提交按钮满宽（.pf-fb-submit .btn { width:100% }）；
   ③ 「我的反馈」小节标题与计数同一行（.pf-fb-secrow）。 */
.pf-fb-formcard {
  background: var(--panel, #fff);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 13px;
}
.pf-fb-formcard .pf-sec-title { margin: 0 0 9px; font-size: 13px; }
.pf-fb-formcard .pf-drawer-lead { margin: 0 0 10px; font-size: 12px; }
/* 字段间距：设计稿为 7px（比站内默认 stack-14 更紧凑） */
.pf-fb-fields { display: flex; flex-direction: column; gap: 7px; }
.pf-fb-fields .form-input { width: 100%; }
.pf-fb-submit { margin-top: 9px; }
.pf-fb-submit .btn { width: 100%; justify-content: center; }

/* 小节标题行：标题在左、计数/操作在右（同一行） */
.pf-fb-secrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin: 16px 0 9px;
}
.pf-fb-secrow .pf-sec-title { margin: 0; }
.pf-fb-secrow .pf-inbox-bar { margin: 0; flex: 1 1 auto; justify-content: flex-end; }
.pf-fb-secrow .pf-inbox-count { font-size: 11px; }

/* 卡片内字段节奏与设计稿一致：正文下方留 11px 再进线程 */
.pf-fb-thread { padding: 11px 14px 0; }

/* 深色模式 */
[data-theme="dark"] .pf-fb-formcard { background: var(--panel, #1a1d21); }