/* ======================================================================
   小青柠 · 手机端（App）样式  ——  视觉口径：闲鱼式「图片优先 · 高密度市集」
   ----------------------------------------------------------------------
   三条纪律：
   1) 这里的 :root 令牌**必须与 static/css/app.css 的值逐字一致**。
      为什么是复制而不是 @import：手机端不想背上 app.css 那一千多行 PC 布局
      （固定顶栏、宽网格之类会互相打架）。为了不出现「改了一处忘了另一处」，
      有 scripts/audit_mobile_tokens.py 做机械比对，不一致就直接报错。
   2) **零外网依赖**：不引任何字体 CDN。字体走系统自带，图片全部本地素材
      （static/img/seed/），断网、弱网、内网都能秒开。
   3) **卡片是「图片优先」的**：一张需求卡 = 大图 + 标题 + 价格 + 发需求的人。
      这一条是从闲鱼学来的核心：没有图的列表看起来像后台表格，
      有图的列表才像「有人在过日子」。
   ====================================================================== */

:root {
  /* 底色：暖白（带一丝温度的白，不是办公室冷白） */
  --paper: #faf9f7;
  --paper-2: #f2f0ec;
  --surface: #ffffff;
  --surface-2: #f7f6f3;

  /* 墨色 */
  --ink: #1a1a1d;
  --ink-2: #5f6268;
  --ink-3: #9b9ea5;
  --ink-4: #c3c5ca;

  /* 品牌：得物青绿（行动 / 圆梦 / 选中 / 信任） */
  --brand: #00bda6;
  --brand-deep: #009c8a;
  --brand-soft: #ddf7f2;
  --brand-tint: #f0fbf9;

  /* 温度：蜜橘（价格 / 急单 / 加价 / 人气）——「温暖」的主要来源 */
  --coral: #ff6a45;
  --coral-deep: #e2522f;
  --coral-soft: #ffece5;

  /* 潮流高亮：嫩芽绿（限时 / 新 / 推荐 这类小面积贴纸） */
  --lime: #d4f14a;
  --lime-soft: #f0fbc8;

  /* 信任：深墨青（担保 / 资金监管的深色块） */
  --jade: #103c37;
  --jade-deep: #062521;
  --jade-soft: #e3f3f0;

  /* 荣誉：金（信用分 / 积分） */
  --gold: #c8952c;
  --gold-soft: #fcf2d8;

  /* 状态色 */
  --line: #efede9;
  --line-2: #e4e1db;
  --danger: #e5402f;
  --danger-soft: #ffeae6;
  --warn: #d98211;
  --warn-soft: #fff3dd;
  --ok: #12a37a;
  --ok-soft: #e0f6ee;

  /* 层次：柔和多层阴影，取代边框做分隔 */
  --sh-1: 0 1px 2px rgba(26, 26, 29, .04), 0 6px 16px -10px rgba(26, 26, 29, .16);
  --sh-2: 0 2px 6px rgba(26, 26, 29, .05), 0 22px 44px -24px rgba(26, 26, 29, .26);
  --sh-brand: 0 10px 24px -12px rgba(0, 189, 166, .55);
  --sh-coral: 0 10px 24px -12px rgba(255, 106, 69, .55);

  /* 圆角：大会显得贵、显得轻松 */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* 字体：全无衬线。标题粗黑收紧，是「潮流」而不是「启事」 */
  --f-display: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

  /* 节奏 */
  --gut: clamp(16px, 3.2vw, 40px);
  --maxw: 1240px;
  --ease: cubic-bezier(.22, 1, .36, 1);      /* ease-out-quart */
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* ease-out-expo  */

  /* 手机端自己的节奏 */
  --top-h: 52px;
  --tab-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 900; letter-spacing: -.02em; line-height: 1.3; }
p { margin: 0; }
/* dl 浏览器默认带 1em 下边距 —— 不清掉会在详情页「需求参数」下面留一条空带，
   看起来像布局没对齐（verify_layout 量不出来，只有看截图才发现）。 */
dl, dd { margin: 0; }
.ic { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 26px; height: 26px; }

/* ----------------------------------------------------------------------
   骨架：顶栏（含搜索）/ 内容 / 底部 tab
   ---------------------------------------------------------------------- */
.m-top {
  position: sticky; top: 0; z-index: 40;
  padding-top: var(--safe-t);
  background: rgba(250, 249, 247, .92);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.m-top.is-stuck { border-bottom-color: var(--line); }
.m-top-in {
  height: var(--top-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  max-width: 720px; margin: 0 auto;
}
.m-title { font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
/* 品牌标志（2026-09-23）：与网页端同一个文件 `xqn-mark-ui.svg`（抽稀版），
   只是尺寸压到 22px（顶栏）/ 20px（首页，要把宽度让给搜索框）。
   `flex-shrink:0` 不能省 —— 顶栏是 flex，标题一长标志会被压扁。 */
.m-mark {
  width: 22px; height: 22px;
  display: inline-block;
  vertical-align: -5px;
  margin-right: 6px;
  flex-shrink: 0;
}
.m-title-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 500; letter-spacing: 0; }
/* —— 顶栏分段 tab（派总 2026-09-30 定稿）——
   顶栏原有的「小圈子 / 小青柠」两个入口按钮 = 一组 tab：
   站在哪个板块哪个白底浮起（+青绿底线+图标恢复彩色），点另一个切板块。
   右侧定位、搜索照旧；极窄屏的退化见文件尾部的媒体查询。 */
.m-topswitch {
  display: flex; gap: 2px; padding: 3px; flex-shrink: 0;
  background: #efede7; border-radius: 11px;
  /* 搜索伸展用（见下方 .m-top-in.is-searching）：向左收起时靠 max-width 过渡 */
  transition: max-width .28s var(--ease), opacity .18s ease, margin .28s var(--ease);
  max-width: 240px; overflow: hidden;
}
.m-ttab {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 10px; border-radius: 8px;
  color: var(--ink-3); font-size: 13px; font-weight: 800; letter-spacing: -.01em;
  white-space: nowrap; flex-shrink: 0; cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.m-ttab .m-mark { width: 15px; height: 15px; margin: 0; vertical-align: 0;
                  filter: grayscale(1); opacity: .55; transition: filter .15s, opacity .15s; }
.m-ttab .ic { width: 15px; height: 15px; }
.m-ttab.on {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.m-ttab.on::after {          /* 青绿底线 = 全站「brand=选中」的口径 */
  content: ''; position: absolute; left: 9px; right: 9px; bottom: 2px; height: 2.5px;
  border-radius: 2px; background: var(--brand);
}
.m-ttab.on .m-mark { filter: none; opacity: 1; }
.m-ttab:active { transform: scale(.97); }
/* —— 搜索伸展（派总 2026-09-30）：点搜索框 → tab 组与定位向左收起，
   搜索框（flex:1，见 .m-topsearch）顺势占满整行 —— 输入区直接翻倍。
   状态类由 base.html 的 focusin/focusout 挂到 .m-top-in 上；无 JS 时不生效，功能无损。 */
.m-top-in.is-searching .m-topswitch { max-width: 0; opacity: 0; margin-left: -8px; padding-left: 0; padding-right: 0; }
/* （原「.m-top-in.is-searching .m-loc」已删：定位胶囊 2026-09-30 搬进快捷排行行尾，
    不再住顶栏，搜索伸展时没有它可收。） */
.m-top-in.is-searching .m-topsearch { box-shadow: 0 2px 12px rgba(16, 60, 55, .14); }
/* 首页品牌名右侧的定位胶囊：一屏内一眼看到「现在按哪个城市在看」，点它去定位页换城市。
   做成 pill 而不是纯文字，是因为它**可点** —— 得让人看出来这是个能按的控件。 */
.m-loc {
  display: inline-flex; align-items: center; gap: 3px;
  height: 26px; padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: 12.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
  /* 搜索伸展（见 .m-top-in.is-searching）：向左收起时的过渡 */
  transition: max-width .28s var(--ease), opacity .18s ease, padding .28s var(--ease);
  max-width: 90px; overflow: hidden;
}
.m-loc .ic { width: 12px; height: 12px; }
.m-loc:active { transform: scale(.95); }
/* 行内版（2026-09-30 派总第 2 条）：胶囊不住顶栏了，住「附近/最新/热门」快捷行的
   最右端（小青柠/小圈子两页共用 m/_loc_row.html）—— margin-left:auto 推到行尾。 */
.m-loc-row { margin-left: auto; }
.m-back {
  width: 32px; height: 32px; margin-left: -6px;
  display: grid; place-items: center;
  border: 0; background: transparent; border-radius: var(--r-pill);
  color: var(--ink); cursor: pointer;
}
.m-back:active { background: var(--paper-2); }
.m-back .ic { transform: rotate(180deg); }
.m-top-spacer { flex: 1; }
.m-iconbtn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: var(--r-pill);
  color: var(--ink-2); cursor: pointer;
}
.m-iconbtn:active { background: var(--paper-2); }

/* 顶栏里的搜索框 —— 让首屏少掉一整行（原来搜索框独占一行 + 品类条再一行） */
.m-topsearch {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.m-topsearch .ic { color: var(--ink-3); }
.m-topsearch input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font-size: 14px;
}
.m-topsearch input:focus { outline: none; }
.m-topsearch input::placeholder { color: var(--ink-3); }
/* 搜索框内的「撤销输入」小 ✕（派总 2026-09-30 第 1 条）：平时藏着，聚焦才出现 ——
   点击清空输入并退出搜索态；在搜索结果页上还会顺手剥掉 ?q=（逻辑在 base.html）。
   两个出现条件都给：is-searching 是 JS 挂的搜索态；:focus-within 兜住「autofocus
   先于脚本挂监听」的搜索页（那种时候类还没挂上但焦点确实在里面）。 */
.m-search-x {
  display: none; place-items: center;
  width: 22px; height: 22px; margin-right: -2px;
  border: 0; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink-2); cursor: pointer; flex-shrink: 0;
}
.m-search-x .ic { width: 12px; height: 12px; }
.m-search-x:active { background: var(--ink-3); color: #fff; }
.m-topsearch:focus-within .m-search-x,
.m-top-in.is-searching .m-search-x { display: grid; }

.m-main {
  max-width: 720px; margin: 0 auto;
  padding: 10px 12px calc(var(--tab-h) + var(--safe-b) + 22px);
}
.m-main.is-plain { padding-bottom: calc(var(--safe-b) + 22px); }
/* 聊天页要自己占满整屏（内部再独立滚动），所以把外层内边距全归零 */
.m-main.is-flush { padding: 0; }

/* 底部五格 tab：发现 / 消息 / 发布 / 定位 / 我的 */
.m-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: stretch;
  padding-bottom: var(--safe-b);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-top: 1px solid var(--line);
}
.m-tab {
  flex: 1; height: var(--tab-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3); font-size: 10.5px; font-weight: 700;
  position: relative;
}
.m-tab.on { color: var(--brand-deep); }
.m-tab .ic { width: 22px; height: 22px; }
.m-tab .badge {
  position: absolute; top: 7px; left: 50%; margin-left: 4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--coral); color: #fff; font-size: 10px; font-weight: 900;
  display: grid; place-items: center; line-height: 1;
}
/* 「只有通知未读」那一态：同一枚角标缩成红点、不写数字。
   口径见 static/js/live.js 的 paintOne —— 数字只留给真人对话，其余只点红点。 */
.m-tab .badge.is-dot {
  min-width: 0; width: 9px; height: 9px; padding: 0; font-size: 0; top: 10px;
}
.m-tab-pub { flex: 0 0 66px; }
.m-tab-pub .bubble {
  width: 44px; height: 44px; margin-top: -14px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff; display: grid; place-items: center;
  box-shadow: var(--sh-brand);
}
.m-tab-pub .bubble .ic { stroke-width: 2.6; width: 24px; height: 24px; }
.m-tab-pub .lbl { margin-top: 1px; }

/* ----------------------------------------------------------------------
   通用积木：卡 / 按钮 / 标签 / 价格 / 表单 / 空态
   ---------------------------------------------------------------------- */
.m-card {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--sh-1); padding: 14px;
}
.m-card + .m-card { margin-top: 10px; }
.m-card-flat { background: var(--surface-2); box-shadow: none; }

.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  cursor: pointer; transition: transform .12s var(--ease);
}
.m-btn:active { transform: scale(.97); }
.m-btn[disabled] { opacity: .45; pointer-events: none; }
.m-btn-block { width: 100%; }
.m-btn-lg { height: 50px; font-size: 16px; }
.m-btn-ghost { background: var(--surface-2); color: var(--ink); }
.m-btn-line { background: transparent; color: var(--brand-deep); box-shadow: inset 0 0 0 1.5px var(--brand); }
.m-btn-coral { background: var(--coral); box-shadow: var(--sh-coral); }
.m-btn-slim { height: 34px; padding: 0 13px; font-size: 13px; }

.m-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.m-tag-brand { background: var(--brand-soft); color: var(--brand-deep); }
.m-tag-coral { background: var(--coral-soft); color: var(--coral-deep); }
.m-tag-lime { background: var(--lime-soft); color: #5e7412; }
.m-tag-gold { background: var(--gold-soft); color: #8a6414; }
.m-tag-jade { background: var(--jade-soft); color: var(--jade); }
.m-tag-ok { background: var(--ok-soft); color: var(--ok); }
.m-tag-warn { background: var(--warn-soft); color: var(--warn); }
.m-tag-danger { background: var(--danger-soft); color: var(--danger); }

.m-price { color: var(--coral); font-weight: 900; letter-spacing: -.02em; }
.m-price em { font-style: normal; font-size: .66em; margin-right: 1px; font-weight: 800; }
.m-price-lg { font-size: 26px; }
.m-price-md { font-size: 19px; }
.m-muted { color: var(--ink-3); }
.m-sub { color: var(--ink-2); font-size: 13px; }
.m-row { display: flex; align-items: center; gap: 8px; }
.m-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m-wrap { flex-wrap: wrap; }
.m-grow { flex: 1; min-width: 0; }
.m-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-divider { height: 1px; background: var(--line); margin: 12px 0; }
.m-sec-title { font-size: 15px; font-weight: 900; margin: 16px 2px 8px; letter-spacing: -.02em; }
.m-sec-title:first-child { margin-top: 4px; }

/* 表单 */
.m-field { margin-bottom: 12px; }
.m-label { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin: 0 0 6px 2px; }
.m-input, .m-textarea, .m-select {
  width: 100%; padding: 12px 13px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
  appearance: none; -webkit-appearance: none;
}
.m-textarea { min-height: 108px; resize: vertical; line-height: 1.65; }
.m-input:focus, .m-textarea:focus, .m-select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint);
}
.m-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.m-hint { font-size: 11.5px; color: var(--ink-3); margin: 6px 2px 0; line-height: 1.6; }
.m-err {
  background: var(--danger-soft); color: var(--danger);
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; margin-bottom: 12px;
}
/* --- 发布草稿（「填到一半走人，下次接着填」）---
   提示条只在真的存着草稿时出现，且默认**只提示不铺开** ——
   点「继续填写」才把内容铺进表单并翻到上次那一步。
   用青绿不用警告色：这不是出错，是「我们替你留着了」这句好消息。 */
.m-draftbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--brand-tint); border-radius: var(--r);
  padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--sh-1);
  color: var(--brand-deep);
}
.m-draftbar.is-resuming { background: var(--brand-soft); }
.m-draftbar .ic { flex-shrink: 0; }
.m-draftbar b { display: block; color: var(--ink); font-size: 14px; }
.m-draftbar .m-sub { display: block; margin-top: 2px; }
.m-draftbar form { margin: 0; flex-shrink: 0; }
.m-draftbar .m-btn { flex-shrink: 0; }
/* 「草稿已自动保存 · 12:03:44」—— 没内容时整行不占位（会有个空行把页面撑高） */
.m-draftnote { color: var(--ink-3); font-size: 12px; margin: 0 0 10px; }
.m-draftnote:empty { display: none; }
.m-radio-row { display: flex; gap: 8px; }
.m-radio-row label { flex: 1; }
.m-radio-row input { position: absolute; opacity: 0; pointer-events: none; }
.m-radio-row span {
  display: block; text-align: center; padding: 10px 6px;
  border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  border: 1.5px solid transparent;
}
.m-radio-row input:checked + span {
  background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand);
}
.m-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }

/* 定位条：告诉用户「现在按哪儿在找」，以及给他一次改的机会。
   为什么必须显式写出来：定位是从手机偷来的信息，用户不知道你在按什么找，
   结果看着就像「为什么都是上海的单」—— 说清楚来源，质疑就没了。 */
.m-locate {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: var(--r);
  background: var(--brand-tint); box-shadow: var(--sh-1);
}
.m-locate .ic { width: 20px; height: 20px; color: var(--brand-deep); flex-shrink: 0; }
.m-locate-txt { min-width: 0; flex: 1; }
.m-locate-txt b { display: block; font-size: 14px; font-weight: 900; color: var(--jade); letter-spacing: -.01em; }
.m-locate-txt span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }
.m-locate.is-off { background: var(--surface-2); box-shadow: none; }
.m-locate.is-off .ic { color: var(--ink-3); }
.m-locate.is-off .m-locate-txt b { color: var(--ink-2); }

/* 空态 */
.m-empty { text-align: center; padding: 46px 20px; color: var(--ink-3); }
.m-empty .ic { margin: 0 auto 12px; color: var(--ink-4); width: 40px; height: 40px; stroke-width: 1.6; }
.m-empty b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }
.m-empty .m-btn { margin-top: 16px; }

/* 提示条 */
/* ⚠️ `top` 必须把顶栏高度算进去（+ var(--top-h)）：
   原来只加 safe-t，浮层就整体盖在 .m-top（z-index 40）上面 ——
   于是「发布成功」那条提示正好压住右上角的 ×，用户点 × 点到的却是提示，
   所有顶栏有按钮的页面在提示消失前都点不动。而且它**不报任何错**，
   只表现为「按钮看得见、按不下去」（2026-09-22 被验收脚本撞出来）。 */
.flash-stack { position: fixed; left: 0; right: 0; top: calc(var(--safe-t) + var(--top-h) + 6px); z-index: 90; padding: 0 12px; display: grid; gap: 6px; max-width: 720px; margin: 0 auto; }
.flash {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--sh-2);
  font-size: 13.5px; font-weight: 600; animation: mDrop .28s var(--ease-out);
}
.flash .x { margin-left: auto; border: 0; background: transparent; color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.flash.success { color: var(--ok); }
.flash.error { color: var(--danger); }
.flash.info, .flash.warning { color: var(--warn); }
@keyframes mDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------------
   瀑布流 + 需求卡片（图片优先，闲鱼口径）
   ---------------------------------------------------------------------- */
/* 错落瀑布流用「两个纵向栏」实现（分配由 ymw_ui.masonry 完成）。
   为什么不用 CSS column-count：它按「先填满第一栏再填第二栏」排，
   于是左栏是第一页、右栏是第二页，浏览顺序完全错乱。 */
.m-feed { display: flex; gap: 8px; align-items: flex-start; }
.m-feed-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.m-feed-1 { display: grid; grid-template-columns: 1fr; }

.m-dc {
  position: relative;
  background: var(--surface); border-radius: var(--r-sm);
  box-shadow: var(--sh-1); overflow: hidden;
}
/* 整张卡可点的那一层铺在最底下，收藏按钮浮在它上面（z-index 更高）。
   不把 <button> 塞进 <a> 里 —— 那是无效 HTML，各家浏览器的点击行为不一致。 */
.m-dc-link { position: absolute; inset: 0; z-index: 1; }
.m-dc-fav-form { position: absolute; top: 6px; right: 6px; z-index: 2; margin: 0; }
.m-dc:active { transform: scale(.988); }

/* 图片区：**按画幅预留高度**。不留的话图片一张张加载完会把下面内容不断往下顶，
   滑列表时页面一直在跳 —— 这是「毛坯感」最典型的来源之一。
   画幅标记写在文件名里（-p 竖图 / -s 方图），由 ymw_ui.cover_ratio 读出来。 */
.m-dc-media {
  position: relative; display: block;
  background: var(--surface-2);
  aspect-ratio: 800 / 1116;              /* -p 竖图 */
  overflow: hidden;
}
.m-dc-media.r-s { aspect-ratio: 800 / 744; }   /* -s 方图 */
.m-dc-media img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; background: var(--surface-2);
}

/* 没图的品类：用「分类插画牌」兜底，而不是甩一张裂图。
   插画牌也按同样比例占位，所以有图没图的卡片能混在一条瀑布流里。 */
.m-dc-cover {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 800 / 1116;
  background: linear-gradient(150deg, var(--brand-tint), var(--brand-soft));
  color: var(--brand-deep);
}
.m-dc-cover.r-s { aspect-ratio: 800 / 744; }
.m-dc:nth-child(3n+2) .m-dc-cover { background: linear-gradient(150deg, var(--coral-soft), #ffe0d5); color: var(--coral-deep); }
.m-dc:nth-child(3n+3) .m-dc-cover { background: linear-gradient(150deg, var(--lime-soft), #f6fdd8); color: #5e7412; }
.m-dc-cover b { font-size: 12.5px; font-weight: 800; margin-top: 4px; }
.m-dc-cover .stack { display: grid; justify-items: center; }
.m-dc-cover .ic { width: 30px; height: 30px; stroke-width: 1.7; }

/* 压在图片上的角标：照片底色不可控，所以角标要自带底色才读得清 */
.m-dc-badge { position: absolute; top: 6px; left: 6px; z-index: 2; }
.m-badge-float {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 800; color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.m-badge-hot { background: rgba(255, 106, 69, .95); }
.m-badge-promo { background: rgba(16, 60, 55, .88); }
.m-badge-soft { background: rgba(0, 0, 0, .42); }
/* 「我发布的」—— 用品牌青绿，和推广（深墨绿）/ 急着要（珊瑚）区分开。 */
.m-badge-own { background: rgba(0, 189, 166, .95); }

.m-dc-fav {
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--ink-3);
  display: grid; place-items: center; border: 0; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.m-dc-fav .ic { width: 15px; height: 15px; }
.m-dc-fav.on { color: var(--coral); }
.m-dc-fav.on .ic { fill: currentColor; }

.m-dc-body { padding: 8px 9px 10px; }
.m-dc-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.42;
  letter-spacing: -.01em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-dc-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.m-dc-why .m-tag { font-size: 10px; padding: 1px 6px; }
.m-dc-foot {
  display: flex; align-items: baseline; gap: 5px;
  margin-top: 6px;
}
.m-dc-price { font-size: 18px; color: var(--coral); font-weight: 900; letter-spacing: -.03em; }
.m-dc-price em { font-style: normal; font-size: .62em; margin-right: 1px; }
.m-dc-price .neg { font-size: 11px; font-weight: 700; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; }
.m-dc-meta { font-size: 10.5px; color: var(--ink-3); margin-left: auto; text-align: right; line-height: 1.4; }
/* 「离我多远」—— 只有定位页会挂上这个数，别的列表页不显示（没有就没有，不编） */
.m-dc-dist {
  font-size: 10px; font-weight: 800; color: var(--brand-deep);
  background: var(--brand-soft); border-radius: var(--r-pill);
  padding: 1px 6px; white-space: nowrap;
}

/* 卡片底部的「谁在求」—— 有头像、有昵称，名单才有「人」的感觉 */
.m-dc-by {
  display: flex; align-items: center; gap: 5px;
  margin-top: 7px;
  font-size: 10.5px; color: var(--ink-3);
}
.m-dc-by .av {
  width: 17px; height: 17px; border-radius: var(--r-pill);
  object-fit: cover; flex-shrink: 0;
  background: var(--brand-soft); color: var(--brand-deep);
  /* 同时服务两种形态：有头像时是 <img>，没有时是装首字的 <span>。
     写在一起是为了两者永远一样大、一样圆 —— 混排时不会一高一低。 */
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 900; line-height: 1;
  overflow: hidden;
}
.m-dc-by .nm { color: var(--ink-2); font-weight: 600; max-width: 5.5em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-dc-by .live { margin-left: auto; color: var(--coral); font-weight: 700; }

/* ----------------------------------------------------------------------
   头像（真图 / 首字兜底）
   ---------------------------------------------------------------------- */
.m-avatar {
  width: 42px; height: 42px; border-radius: var(--r-pill); flex-shrink: 0;
  display: grid; place-items: center; font-weight: 900; font-size: 15px;
  background: var(--brand-soft); color: var(--brand-deep);
  overflow: hidden;
}
.m-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------------
   分类横滑条
   ---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
   需求详情
   ---------------------------------------------------------------------- */
/* 详情页头图：一张真图顶十行字。没有它的详情页一眼就是「表单」。
   统一按 1:1 展示（跟闲鱼的图片区一致）：这批素材是 800×1116 的竖图，
   直接铺满会把首屏撑成两三屏，裁成方形反而更像商品主图。 */
.m-detail-media {
  position: relative; margin-bottom: 10px;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 1 / 1;
}
.m-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.m-detail-media.r-p { aspect-ratio: 5 / 6; }   /* 竖图来源稍微给高一点，少裁一些 */
.m-detail-media .m-dc-badge { top: 10px; left: 10px; }
.m-detail-media .shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, .34), transparent);
  pointer-events: none;
}
.m-detail-media .on-shot {
  position: absolute; left: 12px; bottom: 11px; right: 12px;
  color: #fff; font-size: 12px; font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
.m-detail-media .on-shot .ic { width: 13px; height: 13px; vertical-align: -2px; }

/* 「谁在求」上图片（派总 2026-09-24 第 7 条）：头图右上角一颗发布者胶囊，
   半透明玻璃底压在图上不抢主体，点头像/名字进 TA 的 App 主页。
   放右上：左上留给「推广中/急着要」角标，底部留给品类·城市一行。 */
.m-media-owner {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  max-width: 70%; padding: 3px 10px 3px 4px;
  border-radius: 999px;
  background: rgba(15, 20, 24, .46);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 12px; font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.m-media-owner .mo-ava {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 800;
}
.m-media-owner .mo-ava img { width: 100%; height: 100%; object-fit: cover; }
.m-media-owner b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-media-owner i { font-style: normal; font-weight: 500; opacity: .8; flex: none; }

.m-hero {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 15px 15px 14px;
}
.m-hero-price { display: flex; align-items: baseline; gap: 8px; margin: 9px 0 11px; }
.m-params { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r-sm); overflow: hidden; margin-top: 12px; }
.m-params div { background: var(--surface); padding: 10px 12px; }
.m-params dt { font-size: 11px; color: var(--ink-3); font-weight: 700; margin-bottom: 2px; }
.m-params dd { margin: 0; font-size: 13.5px; font-weight: 700; }
.m-secures { display: grid; gap: 8px; }
.m-secure {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--r-sm); background: var(--surface-2);
}
.m-secure .ic { color: var(--jade); margin-top: 1px; }
.m-secure b { display: block; font-size: 13px; font-weight: 800; }
.m-secure span { font-size: 11.5px; color: var(--ink-2); line-height: 1.6; }

/* 需求方名片（详情页） */
.m-user-card {
  display: flex; gap: 11px; align-items: center;
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--sh-1); padding: 12px 14px;
}
.m-user-card .nm { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }

/* 底部固定操作条 */
.m-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + var(--safe-b));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.m-actions > .m-btn { flex: 1; }

/* 底栏里的「轻动作」图标（留言 / 分享）：竖排图标 + 小字，比按钮矮一截、
   不抢面积 —— 一眼能看出它俩和右边「编辑 / 下架」不是同一类操作。 */
.m-act-icon {
  position: relative; flex-shrink: 0;
  display: grid; gap: 2px; justify-items: center;
  min-width: 44px; padding: 4px 2px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-2); font-size: 11px; font-weight: 700;
}
.m-act-icon:active { background: var(--paper-2); border-radius: var(--r-sm); }
.m-act-icon .ic { width: 21px; height: 21px; }
.m-act-dot {
  position: absolute; top: 0; right: 2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--coral); color: #fff;
  font-size: 10px; font-weight: 800; font-style: normal;
}

/* ----------------------------------------------------------------------
   聊天
   ---------------------------------------------------------------------- */
.m-chat { display: flex; flex-direction: column; height: calc(100vh - var(--top-h) - var(--safe-t)); height: calc(100dvh - var(--top-h) - var(--safe-t)); }
.m-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; -webkit-overflow-scrolling: touch; }
.m-chat-compose {
  flex-shrink: 0; display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px calc(8px + var(--safe-b));
  background: var(--surface); border-top: 1px solid var(--line);
}
.m-chat-input {
  flex: 1; min-height: 40px; max-height: 110px; resize: none;
  padding: 10px 13px; border-radius: var(--r); border: 1.5px solid var(--line-2);
  background: var(--surface-2); font-size: 15px; line-height: 1.5;
}
.m-chat-input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.m-chat-send { width: 40px; height: 40px; border-radius: var(--r-pill); border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; }
.m-chat-send[disabled] { opacity: .4; }
.m-bubbles { display: grid; gap: 10px; }
.m-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.m-msg .who {
  width: 32px; height: 32px; border-radius: var(--r-pill); flex-shrink: 0;
  display: grid; place-items: center; font-size: 12px; font-weight: 900;
  background: var(--brand-soft); color: var(--brand-deep);
  overflow: hidden;
}
.m-msg .who img { width: 100%; height: 100%; object-fit: cover; }
.m-msg .bubble {
  max-width: 74%; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--sh-1);
  font-size: 14.5px; line-height: 1.6; word-break: break-word; white-space: pre-wrap;
}
.m-msg .t { font-size: 10.5px; color: var(--ink-3); align-self: flex-end; }
.m-msg.me { flex-direction: row-reverse; }
.m-msg.me .bubble { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.m-msg.me .who { background: var(--brand); color: #fff; }
.m-msg.is-pending .bubble { opacity: .6; }
.m-msg-state { font-size: 10px; color: var(--ink-3); align-self: flex-end; }
.m-daysep { text-align: center; font-size: 10.5px; color: var(--ink-3); margin: 6px 0; }
.m-quick { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 4px; flex-shrink: 0; }
.m-quick button {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  padding: 6px 11px; border-radius: var(--r-pill); font-size: 12.5px; white-space: nowrap; cursor: pointer;
}
.m-jump {
  position: sticky; bottom: 8px; margin: 0 auto;
  width: fit-content; padding: 6px 14px; border-radius: var(--r-pill); border: 0;
  background: var(--jade); color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: var(--sh-2); cursor: pointer;
}

/* 会话列表 */
.m-conv { display: flex; gap: 11px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.m-conv:last-child { border-bottom: 0; }
.m-conv .av {
  width: 46px; height: 46px; border-radius: var(--r-pill); flex-shrink: 0;
  display: grid; place-items: center; font-weight: 900; font-size: 16px;
  background: var(--brand-soft); color: var(--brand-deep); overflow: hidden;
}
.m-conv .av img { width: 100%; height: 100%; object-fit: cover; }
/* 会话行未读角标（2026-09-24 派总反馈「只是黑字数字」）：
   消息列表的行是 .m-li（不是早年假设的 .m-conv —— 那个选择器已死、无模板引用），
   角标等于裸奔。这里给成和底栏角标同一颗红底圆角数字。 */
.m-li .badge {
  flex: none; align-self: flex-start; margin-top: 4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--coral); color: #fff; font-size: 10.5px; font-weight: 900;
  display: grid; place-items: center; line-height: 1;
}
.m-conv .nm { font-size: 14.5px; font-weight: 700; }
.m-conv .last { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* ----------------------------------------------------------------------
   我的 / 列表行 / 订单
   ---------------------------------------------------------------------- */
.m-mehead {
  position: relative;
  background: linear-gradient(135deg, var(--jade) 0%, #1c5550 62%, #24645d 100%);
  color: #fff; border-radius: var(--r-lg);
  padding: 16px 16px 18px; margin-bottom: 10px;
  overflow: hidden;
}
.m-mehead::after {           /* 右上角一圈柔光，避免整块死平 */
  content: ''; position: absolute; right: -34px; top: -46px;
  width: 148px; height: 148px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 189, 166, .42), transparent 68%);
  pointer-events: none;
}
.m-mehead .nick { font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.m-mehead .sub { font-size: 12px; opacity: .72; margin-top: 2px; }
.m-mehead .m-avatar { width: 54px; height: 54px; font-size: 20px; }
.m-wallet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.m-wallet div { background: rgba(255, 255, 255, .1); border-radius: var(--r-sm); padding: 10px; text-align: center; }
.m-wallet b { display: block; font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.m-wallet span { font-size: 10.5px; opacity: .72; }
.m-wallet b.coral { color: #ffb59f; }
.m-wallet b.gold { color: #f0d089; }

.m-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.m-grid4 a { text-align: center; padding: 12px 2px; border-radius: var(--r-sm); }
.m-grid4 a:active { background: var(--surface-2); }
.m-grid4 .ic { margin: 0 auto 6px; color: var(--brand-deep); }
.m-grid4 span { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.m-grid4 b { display: block; font-size: 10px; color: var(--coral); font-weight: 800; }

.m-list { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.m-li {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-bottom: 1px solid var(--line);
}
.m-li:last-child { border-bottom: 0; }
.m-li:active { background: var(--surface-2); }
.m-li .ic { color: var(--ink-3); }
.m-li .lb { font-size: 14.5px; font-weight: 600; }
.m-li .val { margin-left: auto; color: var(--ink-3); font-size: 13px; }
/* 「这件事是谁做的」徽标（本人 / 对方 / 平台）—— 订单「时间」列表每行前面那颗。
   口径与网页版 `.who-tag` 完全一致，手机端把字号再压一点以省横向空间。 */
.who-tag {
  flex-shrink: 0; font-style: normal; font-weight: 800;
  font-size: 10px; line-height: 1.7; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-3);
}
.who-tag.is-me { background: var(--brand-soft); color: var(--brand-deep); }
.who-tag.is-other { background: var(--coral-soft); color: var(--coral); }
.who-tag.is-both { background: var(--jade-soft); color: var(--jade); }

/* 「交易记录 · 确定信息」折叠块（App 订单页用）。口径与网页版 `.rec` 完全一致。
   ⚠️ 同 .m-fold 那条铁律：关着时必须**显式**藏掉 body —— <details> 只是
      「跳过渲染」内容，里面若有 absolute 定位的元素仍会参与排版。 */
.rec + .rec { border-top: 1px solid var(--line); }
.rec > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 13px 0; font-size: 13.5px; font-weight: 700; list-style: none;
}
.rec > summary::-webkit-details-marker { display: none; }
.rec > summary .ic { width: 16px; height: 16px; color: var(--brand-deep); flex: none; }
.rec-when { margin-left: auto; font-size: 11px; color: var(--ink-3); font-weight: 500; }
.rec-caret { color: var(--ink-4); flex: none; transition: transform .18s; }
.rec[open] .rec-caret { transform: rotate(90deg); }
.rec:not([open]) > .rec-body { display: none; }
.rec-body { padding: 0 0 14px; font-size: 13px; color: var(--ink-2); line-height: 1.75; }
.rec-body .rl { display: flex; gap: 10px; padding: 3px 0; }
.rec-body .rl .k { flex: none; width: 72px; color: var(--ink-3); font-size: 12.5px; }
.rec-body .rl .v { min-width: 0; word-break: break-word; }
.rec-body .rl .v b { color: var(--coral); }
.m-li .chev { color: var(--ink-4); }

.m-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; -webkit-overflow-scrolling: touch; }
.m-tabs::-webkit-scrollbar { display: none; }
.m-tabs a {
  flex-shrink: 0; padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 700;
  box-shadow: var(--sh-1);
}
.m-tabs a.on { background: var(--jade); color: #fff; box-shadow: none; }

/* 列表里的需求行：左边一张小图，右边文字 —— 有图才不像 Excel */
.m-demand-row { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.m-demand-row:last-child { border-bottom: 0; }
/* 缩略图：两个选择器共用一条规则 ——
   `.thumb` 是「在列表行里」的位置类（既有模板在用），
   `.m-thumb` 是通用版（订单详情那种不在列表行里的场合）。
   不写两份：两份一旦有人只改一处，同一个缩略图在两个页面上大小就不一样了。 */
.m-thumb, .m-demand-row .thumb {
  width: 72px; height: 72px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, var(--brand-tint), var(--brand-soft));
  color: var(--brand-deep);
}
.m-thumb img, .m-demand-row .thumb img { width: 100%; height: 100%; object-fit: cover; }

.m-status { padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; white-space: nowrap; }
.st-published { background: var(--brand-soft); color: var(--brand-deep); }
.st-taken, .st-delivering { background: var(--warn-soft); color: var(--warn); }
.st-completed, .st-paid, .st-verified { background: var(--ok-soft); color: var(--ok); }
.st-closed, .st-failed, .st-cancelled, .st-breached { background: var(--surface-2); color: var(--ink-3); }
.st-reviewing, .st-delivered, .st-settling { background: var(--gold-soft); color: #8a6414; }
.st-disputed { background: var(--danger-soft); color: var(--danger); }
.st-accepted { background: var(--warn-soft); color: var(--warn); }
/* 「行动中」＝正在干活，用品牌青绿，和「等待中」的黄区分开 */
.st-working { background: var(--brand-soft); color: var(--brand-deep); }
/* 「验收未通过」＝钱还冻着、有争议，用警示红 */
.st-rejected { background: var(--danger-soft); color: var(--danger); }

.m-steps { display: flex; align-items: center; gap: 4px; margin: 14px 0 4px; }
.m-step { flex: 1; text-align: center; }
.m-step i {
  display: block; height: 4px; border-radius: 999px; background: var(--line-2); margin-bottom: 6px;
}
.m-step.on i { background: var(--brand); }
.m-step span { font-size: 10px; color: var(--ink-3); font-weight: 700; }
.m-step.on span { color: var(--brand-deep); }

.m-note { background: var(--surface-2); border-radius: var(--r-sm); padding: 11px 12px; font-size: 13px; line-height: 1.7; }

/* 搜索框（搜索页整行用；首页走顶栏里的 .m-topsearch） */
.m-searchbar { display: flex; gap: 8px; align-items: center; padding-bottom: 10px; }
.m-searchbar .box {
  flex: 1; display: flex; align-items: center; gap: 7px;
  background: var(--surface); border-radius: var(--r-pill);
  padding: 9px 14px; box-shadow: var(--sh-1);
}
.m-searchbar input { flex: 1; border: 0; background: transparent; font-size: 14.5px; min-width: 0; }
.m-searchbar input:focus { outline: none; }
.m-searchbar .ic { color: var(--ink-3); }

.m-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chips a {
  flex-shrink: 0; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font-size: 12.5px; font-weight: 700; box-shadow: var(--sh-1);
}
.m-chips a.on { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }

/* ----------------------------------------------------------------------
   闲鱼式筛选条（发现页 / 搜索页） —— 2026-09-22 把「横滑条」换掉的版本
   ----------------------------------------------------------------------
   上一版是 `m-chips + m-catbar` 两条横滑条，毛病是：
   **屏幕只有这么宽，十几个品类里有大半要靠拖才看得到 —— 用户不知道它们存在。**
   现在：横条上只留 3 档类型（屏内等分，绝不横滑），其余全部收进「筛选」面板分组。

   面板是**纯 CSS 抽屉**（隐藏的 checkbox + 两个 label），没有 JS 也能用：
   点「筛选」打开（勾选）、点遮罩关闭（再点一次 checkbox 就是取消勾选）。
   ⚠️ `#feedFilter:checked ~ ...` 要求三者**同一父级且互为兄弟**，
   所以 m-fcheck / m-fbtn / m-fmask / m-fpanel 必须都在 .m-fbar 下面。
   ---------------------------------------------------------------------- */
.m-fbar {
  position: relative;
  display: flex; align-items: center; gap: 8px;
}
/* 三个类型标签**等分**剩下的宽度：宽就一定不变吗？不一定 —— 所以还要 nowrap + 省略号兜底，
   保证再窄的屏（320px）也不会把「求物品」压成两行或挤出屏外。 */
.m-ftabs { flex: 1; min-width: 0; display: flex; gap: 6px; }
/* ⚠️ 小圈子页的分类胶囊（.pc-cat）与需求池的三档胶囊（.m-ftab）共用**同一套盒模型**：
   同一行里高矮胖瘦不一致，看起来就像两个产品。尺寸/圆角/投影统一在这里定死，
   **颜色各留各的**（见下面 .on）—— 派总原话：「大小样式改为一致，颜色保持当前不变」。
   以后要调胶囊大小，只改这一处。 */
.m-ftab {
  flex: 1; min-width: 0;
  min-height: 32px; padding: 7px 12px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-weight: 700; text-align: center;
  box-shadow: var(--sh-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-ftab.on { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }

.m-fcheck { display: none; }          /* 状态开关，不需要出现在界面上 */
/* 「筛选」按钮跟同一行的三档胶囊**齐高**（32px），否则这一排看着像高低肩 */
.m-fbtn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 32px; padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-weight: 700; box-shadow: var(--sh-1);
  cursor: pointer; user-select: none;
}
.m-fbtn.has { background: var(--brand-soft); color: var(--brand-deep); box-shadow: none; }
.m-fbtn-chev { transition: transform .18s ease; }
/* 面板开着时箭头翻上来，一眼看出「还能再点一次收回去」 */
#feedFilter:checked ~ .m-fbtn .m-fbtn-chev { transform: rotate(180deg); }
.m-fbadge {
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--coral); color: #fff;
  font-size: 10.5px; font-weight: 900; font-style: normal; line-height: 16px; text-align: center;
}

.m-fmask {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(16, 60, 55, .38);
  opacity: 0; visibility: hidden; transition: opacity .18s ease;
}
.m-fpanel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}
#feedFilter:checked ~ .m-fmask { opacity: 1; visibility: visible; }
#feedFilter:checked ~ .m-fpanel { opacity: 1; visibility: visible; transform: none; }

/* 面板内容太高就自己滚 —— 十几个品类 + 5 组条件不可能一屏放下。
   底部操作条用 sticky，滚到哪儿都能点「查看结果」。 */
.m-fpanel-in {
  max-height: 68vh; overflow-y: auto; padding: 14px 12px 0;
  -webkit-overflow-scrolling: touch;
}
.m-fgroup { margin-bottom: 16px; }
.m-fg-t {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 900; color: var(--ink-3);
  margin-bottom: 8px; letter-spacing: -.01em;
}
.m-fg-t .ic { width: 14px; height: 14px; }
.m-fopts { display: flex; flex-wrap: wrap; gap: 7px; }

/* 胶囊选项：input 铺满整个 label 当点击区，span 只管长相。
   ⚠️ 不能用 `visibility:hidden` / `display:none` 藏 input —— 那样表单就提交不出参数了，
   键盘也 tab 不到。这里用「透明铺满」，点哪儿都是点在 radio 上。 */
.m-fopt { position: relative; display: inline-flex; cursor: pointer; }
.m-fopt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.m-fopt span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.m-fopt span em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.m-fopt input:checked + span { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.m-fopt input:checked + span em { color: rgba(255, 255, 255, .78); }
.m-fopt input:focus-visible + span { outline: 2px solid var(--brand-deep); outline-offset: 2px; }

.m-ffoot {
  position: sticky; bottom: 0;
  display: flex; gap: 8px; padding: 10px 0 12px;
  background: var(--surface); border-top: 1px solid var(--line);
}
.m-ffoot .m-btn { flex: 1; }

/* 「已选」小胶囊：面板一关，得一眼看出现在是按什么在筛 —— 否则用户会以为站里就这点东西 */
.m-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0 2px; }
.m-actchip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: 12px; font-weight: 700;
}
.m-actchip .ic { width: 12px; height: 12px; }
.m-actclear { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-3); }

.m-pager { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 18px 0 6px; }
.m-pager a, .m-pager span {
  padding: 9px 18px; border-radius: var(--r-pill); background: var(--surface);
  box-shadow: var(--sh-1); font-size: 13.5px; font-weight: 700; color: var(--ink-2);
}
.m-pager span { background: transparent; box-shadow: none; color: var(--ink-3); font-weight: 600; }

/* ----------------------------------------------------------------------
   发布页：选封面（把「没有图」这件事从源头解掉）
   ---------------------------------------------------------------------- */
.m-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.m-pick label { position: relative; display: block; cursor: pointer; }
.m-pick input { position: absolute; opacity: 0; pointer-events: none; }
.m-pick .ph {
  position: relative; overflow: hidden;
  border-radius: var(--r-sm); aspect-ratio: 1;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow .15s;
}
.m-pick .ph img { width: 100%; height: 100%; object-fit: cover; }
.m-pick .ph .nm {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 6px 4px;
  background: linear-gradient(to top, rgba(0, 0, 0, .58), transparent);
  color: #fff; font-size: 10.5px; font-weight: 700; text-align: center;
}
.m-pick input:checked + .ph { box-shadow: inset 0 0 0 2.5px var(--brand); }
.m-pick input:checked + .ph::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 0; height: 0; border-left: 22px solid transparent;
  border-top: 22px solid var(--brand);
}
.m-pick-none .ph {
  display: grid; place-items: center;
  color: var(--ink-3); font-size: 11px; text-align: center;
}

/* ---------- 通知中心 ----------
   未读给一层青绿底：一屏扫下来能立刻看见「哪几条还没看」。
   跳转一律走视图里翻译过的 app_url，翻不出来的通知根本没有「去看看」，
   所以这里不存在「点了跳到网页版」的可能。 */
.m-notice { display: flex; gap: 10px; align-items: flex-start; }
.m-notice.unread { background: var(--brand-tint); }
.m-notice-ic {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2);
}
.m-notice-ic.k-order { background: var(--brand-soft); color: var(--brand-deep); }
.m-notice-ic.k-court { background: var(--danger-soft); color: var(--danger); }
.m-notice-ic.k-credit { background: var(--gold-soft); color: #8a6414; }
.m-notice-ic.k-message { background: var(--jade-soft); color: var(--jade); }
/* 2026-09-23 新增的两个分区：上新 = 青绿（"有新东西"）；活动 = 金（"运营/公告"）。 */
.m-notice-ic.k-new { background: var(--brand-soft); color: var(--brand-deep); }
.m-notice-ic.k-activity { background: var(--gold-soft); color: #8a6414; }
.m-notice-ic.k-system { background: var(--gold-soft); color: #8a6414; }
.m-notice-link {
  display: inline-flex; align-items: center; gap: 1px;
  margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--brand-deep);
}

/* ---------- 规则页（可折叠） ----------
   8 大章全铺开在手机上太长，所以默认只展开「资金与担保」。
   ⚠️ 关着的 <details> 里**不要放 position:absolute 的子元素**：
   浏览器仍会给它排版（这是老坑，见 MEMORY 铁律 11）。这里全是普通文档流元素。 */
.m-rule {
  margin-bottom: 8px; background: var(--surface);
  border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden;
}
.m-rule > summary {
  display: flex; align-items: center; list-style: none; cursor: pointer;
  padding: 13px 14px; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em;
}
.m-rule > summary::-webkit-details-marker { display: none; }
.m-rule > summary::after {
  content: ''; margin-left: auto; width: 7px; height: 7px; margin-right: 3px;
  border-right: 2px solid var(--ink-4); border-bottom: 2px solid var(--ink-4);
  transform: rotate(45deg); transition: transform .18s ease;
}
.m-rule[open] > summary::after { transform: rotate(-135deg); }
.m-rule-body {
  padding: 0 14px 15px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2);
}
.m-rule-body ol, .m-rule-body ul { margin: 0; padding-left: 18px; }
.m-rule-body p { margin: 0 0 9px; }
.m-rule-body strong { color: var(--ink); }
.m-rule-body.danger { color: #7d1b16; }

/* 规则页顶上的「核心数字」：先给人结论，再让人决定要不要展开看细则 */
.m-rule-key {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 12px 6px; margin-bottom: 12px; text-align: center;
}
.m-rule-key b { display: block; font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.m-rule-key b.coral { color: var(--coral); }
.m-rule-key b.gold { color: #8a6414; }
.m-rule-key span { font-size: 10.5px; color: var(--ink-3); }

/* 规则页的「资金四步」：必须**竖向**排。
   一开始顺手用了发布页的 .m-steps，那是个横向进度条（flex:1 + 居中），
   四段文字挤在一行里直接成了乱码 —— 横向的进度条只装得下两个字。 */
.m-flow { display: grid; gap: 7px; margin-bottom: 12px; }
.m-flow > div {
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: 10px 12px; border-left: 3px solid var(--brand);
}
.m-flow b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.m-flow span { font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }

/* 规则页里的信用分表：两列就够，手机上三列一定挤 */
.m-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.m-tbl td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.m-tbl td:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.m-tbl td.ok { color: var(--ok); }
.m-tbl td.warn { color: var(--warn); }
.m-tbl td.bad { color: var(--danger); }

/* ======================================================================
   发布向导（13 步）—— App 端
   ----------------------------------------------------------------------
   为什么是「一张表单 + JS 分步显示」而不是 13 个页面：
   App 的发布本来就不该有 13 次页面跳转（每次都要重新请求、还要担心草稿丢），
   而且服务端只需要一个 POST 入口。JS 一挂，13 步平铺成一张长表单，照样能发。

   ⚠️ 步骤的收起**必须**写成 `.wiz-js .wz-step:not(.is-on){display:none}`。
   写成 `.wz-step{display:none}` 的话，JS 一旦加载失败整页就是空白 ——
   而「页面空白」是最难被归因的故障（用户只会说「打不开」）。
   ====================================================================== */
.wz-head {
  position: sticky; top: calc(var(--safe-t) + var(--top-h)); z-index: 30;
  margin: -10px -12px 10px; padding: 10px 12px 8px;
  background: rgba(250, 249, 247, .94);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
}
.wz-bar { display: flex; gap: 3px; margin-bottom: 7px; }
.wz-seg {
  flex: 1; height: 4px; border-radius: var(--r-pill);
  background: var(--line-2); transition: background .2s;
}
.wz-seg.is-done { background: var(--brand-soft); }
.wz-seg.is-on { background: var(--coral); }
.wz-meta { display: flex; align-items: baseline; gap: 8px; }
.wz-meta b { font-size: 13px; font-weight: 900; color: var(--ink); }
.wz-name { font-size: 12px; color: var(--ink-3); }

.wz-step {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--sh-1); padding: 16px 14px;
}
.wiz-js .wz-step:not(.is-on) { display: none; }
/* 被拦下的那一步描一圈红 —— 用户点「下一步」被拒时，得看得出是哪一屏的问题 */
.wz-step.is-bad { box-shadow: 0 0 0 3px var(--danger-soft), var(--sh-1); }

.wz-t { font-size: 20px; font-weight: 900; letter-spacing: -.025em; margin: 0 0 8px; }
.wz-sub { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin: 0 0 16px; }
.wz-sub b { color: var(--ink); }
.wz-sechead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 16px 2px 8px;
}
.wz-sechead b { font-size: 13.5px; font-weight: 900; }

/* 第 1 步：两张大的二选一卡片。单选要「一眼看得出这是在做选择」，
   所以给它卡片尺寸，而不是两个小圆点。 */
.wz-two { display: grid; gap: 10px; }
.wz-two label { display: block; }
.wz-two input { position: absolute; opacity: 0; pointer-events: none; }
.wz-two-in {
  display: block; padding: 14px; border-radius: var(--r);
  background: var(--surface-2); border: 1.5px solid transparent;
  transition: border-color .15s, background .15s;
}
.wz-two-in .ic { width: 26px; height: 26px; color: var(--brand-deep); margin-bottom: 8px; }
.wz-two-in b { display: block; font-size: 16px; font-weight: 900; margin-bottom: 3px; }
.wz-two-in em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.wz-two input:checked + .wz-two-in {
  background: var(--brand-tint); border-color: var(--brand);
}

/* 第 7 / 12 步：一排单选（可横可纵） */
.wz-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-opts-col { flex-direction: column; }
.wz-opts label { flex: 1 1 46%; }
.wz-opts label { position: relative; }
.wz-opts input { position: absolute; opacity: 0; pointer-events: none; }
.wz-opts span {
  display: block; text-align: center; padding: 11px 6px;
  border-radius: var(--r-sm); background: var(--surface-2);
  border: 1.5px solid transparent;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
}
.wz-opts input:checked + span {
  background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand);
}

/* 第 3 步：素材多选（在 m-pick 基础上加一个「已选上限」与命中角标） */
.m-pick-multi { grid-template-columns: repeat(3, 1fr); }
.m-pick-multi input[disabled] + .ph { opacity: .34; }
.m-pick label.is-top .ph { box-shadow: inset 0 0 0 2.5px var(--coral); }
.wz-hit {
  position: absolute; top: 5px; left: 5px;
  padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--lime); color: #3f4d0a;
  font-size: 9.5px; font-weight: 900;
}
.wz-preview { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.wz-preview img {
  width: 62px; height: 62px; object-fit: cover;
  border-radius: var(--r-xs); box-shadow: var(--sh-1);
}

/* 第 4 / 8 / 10 步：横向可滑的胶囊 */
.wz-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wz-chips-row { align-items: center; }
.wz-chip {
  display: inline-flex; align-items: center;
  padding: 7px 13px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.wz-chip:active { transform: scale(.96); }
.wz-chip.is-on { background: var(--brand-soft); color: var(--brand-deep); }
/* 可勾选的胶囊：checkbox 藏在 label 里，点整颗胶囊即可 */
.wz-chk { position: relative; }
.wz-chk input { position: absolute; opacity: 0; pointer-events: none; }
.wz-chk span {
  display: inline-flex; padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 12.5px; font-weight: 700;
}
.wz-chk input:checked + span { background: var(--brand-soft); color: var(--brand-deep); }
.wz-chk input[disabled] + span { opacity: .4; }

/* 第 5 步：填词模板卡片 */
.wz-tpls { display: grid; gap: 8px; }
.wz-tpl {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 11px 12px; border: 0; border-radius: var(--r-sm);
  background: var(--surface-2); font-family: inherit; cursor: pointer;
}
.wz-tpl .ic { width: 20px; height: 20px; color: var(--brand-deep); flex: none; margin-top: 1px; }
.wz-tpl b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.wz-tpl em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* 第 6 步：建议出价 */
.wz-sug-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.wz-sug-head .ic { width: 17px; height: 17px; color: var(--brand); }
.wz-sug-head b { font-size: 13.5px; }
.wz-sug-price { display: flex; align-items: baseline; gap: 7px; }
.wz-sug-price b {
  font-size: 26px; font-weight: 900; color: var(--coral);
  font-variant-numeric: tabular-nums;
}
.wz-sug-price em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.wz-basis { margin: 8px 0 0; padding-left: 16px; }
.wz-basis li { font-size: 11.5px; color: var(--ink-2); line-height: 1.75; }
.wz-sug-btns { display: flex; gap: 8px; margin-top: 10px; }

/* 第 6 / 12 / 13 步：算钱的键值行 */
.wz-kv {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 13px; color: var(--ink-2);
}
.wz-kv + .wz-kv { border-top: 1px dashed var(--line); }
.wz-kv b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.wz-kv.is-soft { color: var(--ink-3); }
.wz-kv.is-soft b { color: var(--ink-2); }
.wz-kv.is-total { border-top: 1.5px solid var(--line-2); margin-top: 4px; padding-top: 9px; }
.wz-kv.is-total b { font-size: 20px; color: var(--coral); }
.wz-pay {
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: 10px 12px; margin-bottom: 12px;
}
.wz-short {
  margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-xs);
  background: var(--danger-soft); color: var(--danger);
  font-size: 12px; font-weight: 700; line-height: 1.6;
}

/* 第 8 步：滑动条 */
.wz-range { width: 100%; margin: 10px 0 0; accent-color: var(--brand); height: 28px; }

/* 第 9 步：常用地址 + 两列栅格 */
.wz-addrs { display: grid; gap: 8px; }
.wz-addr { display: block; position: relative; }
.wz-addr input { position: absolute; opacity: 0; pointer-events: none; }
.wz-addr-in {
  display: block; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1.5px solid transparent;
}
.wz-addr input:checked + .wz-addr-in { background: var(--brand-tint); border-color: var(--brand); }
.wz-addr-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.wz-addr-top b { font-size: 13.5px; }
.wz-mono { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wz-addr-in em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.wz-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wz-grid2 .m-field { margin-bottom: 12px; }

/* 第 10 步：已选来源地 */
.wz-picked {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 9px 10px; border-radius: var(--r-sm); background: var(--surface-2);
  margin-bottom: 4px; min-height: 40px;
}

/* 第 11 步：加急开关 */
.wz-urgent { display: block; position: relative; }
.wz-urgent input { position: absolute; opacity: 0; pointer-events: none; }
.wz-urgent-in {
  display: block; padding: 13px; border-radius: var(--r);
  background: var(--coral-soft); border: 1.5px solid transparent;
}
.wz-urgent input:checked + .wz-urgent-in { border-color: var(--coral); background: #ffe2d8; }
.wz-urgent-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wz-urgent-top b { font-size: 14.5px; font-weight: 900; }
.wz-urgent-in em {
  display: block; font-style: normal; font-size: 12px; color: var(--ink-2);
  line-height: 1.7; margin-top: 6px;
}
.wz-urgent-calc {
  display: block; margin-top: 8px; font-size: 12.5px; font-weight: 800; color: var(--coral-deep);
  font-variant-numeric: tabular-nums;
}

/* 第 13 步：不可退提醒 + 确认 */
.wz-warn {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--r-sm);
  background: var(--warn-soft); color: #7a4c07;
  font-size: 12.5px; line-height: 1.7;
}
.wz-warn .ic { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.wz-agree {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.6;
}

/* 吸底导航：必须坐在五格 tabbar **上面**，否则两者会叠在一起，
   而「下一步」被 tabbar 盖住是致命的（用户以为按钮坏了）。 */
.wz-nav {
  position: fixed; left: 0; right: 0; z-index: 45;
  bottom: calc(var(--tab-h) + var(--safe-b));
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 -6px 18px -12px rgba(26, 26, 29, .5);
}
.wz-dots { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; }
.wz-dot {
  width: 5px; height: 5px; border-radius: var(--r-pill);
  background: var(--line-2); transition: transform .18s, background .18s;
}
.wz-dot.is-done { background: var(--brand-soft); }
.wz-dot.is-on { background: var(--coral); transform: scale(1.7); }
/* 表单底部要给吸底导航留位置，否则最后一行会被压在导航下面点不到 */
.m-main.is-wiz { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 96px); }

/* ==================================================================
   圆梦全览：商榷 / 行动 / 交付 / 验收 四个区块（2026-09-21 C 项）
   ================================================================== */
/* 聊天区做成「有界的」「能滚的」一块，而不是把整页撑长 ——
   订单页里消息只是其中一段，撑长了会把验收按钮顶到一屏之外。 */
.m-talk { background: var(--surface-2); border-radius: var(--r); padding: 12px; margin-top: 10px; }
.m-talk-scroll { max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; }
.m-talk-empty { text-align: center; font-size: 12.5px; color: var(--ink-3); padding: 20px 8px; line-height: 1.7; }
.m-talk .m-bubbles { gap: 9px; }
.m-talk .m-msg .bubble { background: var(--surface); }

/* 发消息 / 发文件的一行工具条 */
.m-compose { margin-top: 10px; display: grid; gap: 7px; }
.m-compose-row { display: flex; gap: 7px; align-items: center; }
.m-compose-row .m-textarea { flex: 1; min-height: 40px; }
.m-attach-btn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--brand-deep); display: grid; place-items: center;
  cursor: pointer; box-shadow: var(--sh-1);
}
.m-attach-btn .ic { width: 19px; height: 19px; }
.m-attach-name { font-size: 11.5px; color: var(--brand-deep); font-weight: 700; word-break: break-all; }
.m-send-sm {
  flex-shrink: 0; height: 40px; padding: 0 15px; border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.m-send-sm[disabled] { opacity: .4; }

/* 消息里的附件：文件卡片 / 图片 / 视频 / 链接 */
/* `.m-mediabox` 是「图片/视频/文件 + 下面一行说明」这个竖排小盒子。
   它**刻意不套 .bubble**：绿色气泡底上放一张图会显得脏，而且图片宽度会被气泡 padding 挤小。 */
.m-mediabox { display: grid; gap: 5px; max-width: 210px; }
.m-mediabox .cap { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); word-break: break-word; }
.m-msg.me .m-mediabox .cap { text-align: right; }
.m-filecard {
  display: flex; gap: 8px; align-items: center; padding: 8px 10px;
  background: var(--surface); border-radius: var(--r-sm);
}
.m-mediabox .m-filecard { background: var(--surface); box-shadow: var(--sh-1); }
.m-filecard .ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand-deep); }
.m-filecard .meta { min-width: 0; }
.m-filecard .meta b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); word-break: break-all; }
.m-filecard .meta span { font-size: 10.5px; color: var(--ink-3); }
.m-mediabox img.shot, .m-mediabox video.shot {
  max-width: 100%; border-radius: var(--r-sm); display: block;
}
.m-linkcard {
  display: flex; gap: 5px; align-items: flex-start;
  font-size: 12.5px; word-break: break-all; text-decoration: underline;
}
.m-linkcard .ic { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

/* 区块小标题（带图标和一句说明） */
.m-sec-head { display: flex; align-items: center; gap: 6px; margin: 16px 0 2px; }
.m-sec-head .ic { width: 15px; height: 15px; color: var(--brand); }
.m-sec-head b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.m-sec-tip { font-size: 12px; color: var(--ink-3); line-height: 1.7; margin: 2px 0 6px; }

/* ----------------------------------------------------------------------
   消息页：可折叠的通知分区（活动 / 交易 / 上新）—— 2026-09-23 新增
   ----------------------------------------------------------------------
   为什么用 <details> 而不是自己写 JS 开合：它天生就是「无 JS 也能开合」的控件，
   键盘 Tab / 回车、读屏软件全都认。自己写的那种一旦 JS 挂了或没加载完，
   分区就彻底打不开 —— 用户连里面有什么都看不到。
   默认收起的原因见 chat_list.html 顶部那段注释（一句话：别把要紧的聊天挤出屏幕）。
   ⚠️ 收起 ≠ 假装没有：未读时标题行上有点亮的 .m-dot。
   ---------------------------------------------------------------------- */
.m-fold {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--sh-1); margin-bottom: 9px; overflow: hidden;
}
.m-fold-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 800; color: var(--ink);
  /* 点击热区够大（≈46px 高），拇指点得中；也让「点标题行就展开」这件事符合直觉 */
  min-height: 46px;
}
/* 去掉 Safari / Chrome 自带的那个三角 —— 我们自己有会转的箭头 */
.m-fold-head::-webkit-details-marker { display: none; }
.m-fold-head .ic { width: 17px; height: 17px; color: var(--brand); flex-shrink: 0; }
.m-fold-n { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.m-fold-caret { color: var(--ink-4); transition: transform .18s var(--ease); }
.m-fold[open] .m-fold-caret { transform: rotate(180deg); }
.m-fold-body { padding: 0 14px 13px; }
.m-fold-more {
  display: block; margin-top: 10px; font-size: 12.5px; font-weight: 700;
  color: var(--brand-deep); text-decoration: none;
}

/* 未读红点：**只表示「那边有东西」，不带数字**。
   数字留给真人对话（会话行上的 .badge）—— 把「3 条公告没看」和
   「有人找你说话」显示成同一个数字，用户就分不出哪件该先办。 */
.m-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--coral); flex-shrink: 0;
}

/* ----------------------------------------------------------------------
   顶部「新消息」提示条 —— 2026-09-23 新增
   ----------------------------------------------------------------------
   派总要求：「任何界面都能收到消息，并且 APP 顶部有新信息提示」。
   线上是 http://IP:8080（非安全上下文）⇒ Service Worker / Web Push 用不了，
   只能自己轮询 + 弹这条看得懂、点得动的提示（详见 static/js/live.js）。
   ⚠️ `top` 必须含 `--top-h`（顶栏高度）。漏了的话提示条会被压在固定顶栏底下，
      表现是「看得见但点不动」，而且零报错 —— 2026-09-23 flash-stack 踩过同一个坑。
   ---------------------------------------------------------------------- */
.live-banner {
  position: fixed; top: calc(var(--safe-t) + var(--top-h) + 6px);
  left: 12px; right: 12px; z-index: 95;
  max-width: 696px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--r);
  background: var(--jade); color: #fff; text-decoration: none;
  box-shadow: var(--sh-2);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.live-banner.is-in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.live-banner-av {
  width: 30px; height: 30px; border-radius: var(--r-pill); flex-shrink: 0;
  display: grid; place-items: center; font-weight: 900; font-size: 13px;
  background: rgba(255, 255, 255, .16);
}
.live-banner-tx { display: grid; gap: 1px; min-width: 0; flex: 1; }
.live-banner-tx b { font-size: 13.5px; font-weight: 800; }
.live-banner-tx span {
  font-size: 12px; color: rgba(255, 255, 255, .8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-banner-go { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--lime); white-space: nowrap; }

/* 交付内容 / 验收依据这类「一栏一栏」的信息 */
.m-kv { display: grid; gap: 1px; background: var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.m-kv > div { display: flex; gap: 10px; background: var(--surface); padding: 9px 11px; font-size: 13px; }
.m-kv .k { color: var(--ink-3); flex-shrink: 0; width: 76px; }
.m-kv .v { color: var(--ink); font-weight: 700; word-break: break-all; flex: 1; }
.m-kv .v.copyable { color: var(--brand-deep); }

/* 验收不过：一块红的，把依据和诉求都摆出来 */
.m-reject {
  background: var(--danger-soft); border-radius: var(--r-sm); padding: 11px 12px;
  font-size: 12.5px; line-height: 1.75; color: var(--ink); margin-top: 8px;
}
.m-reject b { display: block; font-size: 12px; color: var(--danger); margin-bottom: 3px; }
.m-reject + .m-reject { margin-top: 6px; }

/* 单选项做成卡片（服务费承担方 / 评价星级都用它） */
.m-radio-row { display: flex; gap: 7px; flex-wrap: wrap; }
.m-radio-row label {
  flex: 1 1 30%; text-align: center; padding: 9px 6px; border-radius: var(--r-sm);
  background: var(--surface-2); font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.m-radio-row input { position: absolute; opacity: 0; pointer-events: none; }
.m-radio-row input:checked + span { color: var(--brand-deep); }
.m-radio-row label:has(input:checked) { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); }

/* 「进度条上这一步在干什么」的一句话说明 */
.m-stagenote {
  display: flex; gap: 7px; align-items: flex-start;
  background: var(--brand-soft); color: var(--brand-deep);
  border-radius: var(--r-sm); padding: 9px 11px; font-size: 12.5px; line-height: 1.7; margin-top: 10px;
}
.m-stagenote .ic { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }

/* 平板 / 桌面预览（手机端站点被电脑打开时别拉得太宽） */
@media (min-width: 720px) {
  .m-tabbar, .m-actions, .m-main, .m-top-in, .flash-stack, .wz-nav { max-width: 720px; margin-left: auto; margin-right: auto; }
  .m-tabbar, .m-actions { box-shadow: var(--sh-2); border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ======================================================================
   图片轮播（翻页看图）  ——  2026-09-22 新增
   ----------------------------------------------------------------------
   为什么自己写而不引轮播库：一个库 = 一个外网依赖 + 几十 KB，
   而这里要的只是「横着划能翻页」。浏览器自带的 scroll-snap 就能做到：
   手指一划滚一屏、松手自动吸住 —— **而且没有 JS 也能划**。

   手机上**故意不显示左右箭头**：手指直接划就是翻页，箭头只会挡图、还容易误触。
   这跟闲鱼 / 淘宝的详情页是一个口径 —— 只留底部圆点和右下角「2/5」。
   圆点 / 页码同样只在 JS 初始化成功后才显示（容器加 .is-ready），
   所以 JS 挂了也不会露出「点得动但没反应」的死按钮。
   ====================================================================== */
.carousel { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); }
.carousel-track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; aspect-ratio: 4 / 3; background: var(--surface-2); }
.carousel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 详情页头图：轮播把 m-detail-media 整块填满（1:1 / 竖图 5:6 由外层决定） */
.m-detail-media .carousel { position: absolute; inset: 0; border-radius: 0; }
.m-detail-media .carousel-slide { aspect-ratio: auto; height: 100%; }

.carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .93); color: var(--ink);
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--sh-1); cursor: pointer;
}
.carousel-nav.prev { left: 10px; }
.carousel-nav.next { right: 10px; }
.carousel-nav.prev .ic { transform: scaleX(-1); }
.carousel-nav[disabled] { opacity: .3; cursor: default; }

/* z-index 给到 3：详情页头图底部有一层 .shade 渐变遮罩，不能让它盖住圆点和页码 */
.carousel-count {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; display: none;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(6, 37, 33, .6); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 11px; z-index: 3;
  display: none; justify-content: center; gap: 6px;
}
.carousel-dot {
  flex: none; width: 6px; height: 6px; padding: 0; border: 0;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .78); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(6, 37, 33, .2);   /* 浅色图上白点会隐身，描一圈细边 */
  transition: width .18s ease, background .18s ease;
}
.carousel-dot.is-on { width: 16px; background: var(--brand); }

.carousel.is-ready .carousel-count { display: block; }
.carousel.is-ready .carousel-dots { display: flex; }
.carousel.is-single .carousel-count,
.carousel.is-single .carousel-dots { display: none !important; }

/* ======================================================================
   发布向导「附图」抽屉  ——  2026-09-22 改版
   ----------------------------------------------------------------------
   改之前：第 3 步一进来就把备选素材一张张全平铺，一屏全是图，
   还没填正文就先被图片淹了（派总原话：「备选图片不用一股脑全部展示」）。
   改之后：默认只露一个「附图」按钮，点开才是两个动作 —— 推荐图片 / 上传图片。
   用 <details> 而不是 JS 弹窗：**没有 JS 也能开合**，
   不会出现「按钮在那儿、点了没反应」这种半死状态。
   ====================================================================== */
.att {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.att > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 15px; font-size: 15.5px; font-weight: 700;
  min-height: 52px;                       /* 手机上低于 44px 就很难点中 */
}
.att > summary::-webkit-details-marker { display: none; }
.att > summary .ic { width: 20px; height: 20px; color: var(--brand-deep); flex: none; }
.att-count { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.att-count.is-on { color: var(--brand-deep); }

/* ⚠️ 铁律：<details> 关着的时候，里面 position:absolute 的浮层**仍然参与排版**，
   会把页面撑高、还可能挡住别的东西 ⇒ 关着时必须整块 display:none。 */
.att:not([open]) > .att-body,
.att:not([open]) > .att-panel { display: none; }
.att-body { padding: 0 15px 15px; display: grid; gap: 10px; }
.att-panel { padding: 12px 0 2px; }

/* 两个动作：一个是 details 的 summary（推荐图片，会展开），一个是 label（上传图片，直接选文件）。
   两者长得必须一样 —— 用户不该看出「这两个是不同的东西」，只看到两个并排的入口。 */
.att-act {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 52px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); cursor: pointer; text-align: left;
}
.att-act:active { background: var(--brand-tint); }
.att-act > .ic { width: 20px; height: 20px; color: var(--brand-deep); flex: none; }
.att-act .tx { flex: 1; min-width: 0; }
.att-act .tx b { display: block; font-size: 15px; font-weight: 700; }
.att-act .tx span { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.att-act .chev { width: 17px; height: 17px; color: var(--ink-4); flex: none; }
.att-sub[open] > .att-act .chev { transform: rotate(180deg); }

/* ==================================================================
   圆梦单六步：方案 / 交付 / 验收（2026-09-24）
   ------------------------------------------------------------------
   起因：以前「行动」和「交付」挤在同一张卡里（同一个区块里既有聊天、
   又有交付表单），需求方看不出圆梦者到底做完没有。现在六步各自成卡，
   每一步有自己的时间戳；而**沟通记录只留一个窗口**，用分隔条分段。
   ================================================================== */

/* 聊天窗里的阶段分隔条：- 以下为交付环节 - */
.talk-sep { display: flex; align-items: center; gap: 9px; margin: 6px 0 2px; }
.talk-sep::before, .talk-sep::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.talk-sep span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--brand-deep); background: var(--brand-tint);
  padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap;
}

/* -- 方案卡（商榷阶段：圆梦者交、需求方认可）-- */
.m-plan { background: var(--brand-tint); border-radius: var(--r); padding: 13px; margin-top: 10px; }
.m-plan-h { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 900; color: var(--brand-deep); }
.m-plan-h .ic { width: 15px; height: 15px; }
.m-plan-h time { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.m-plan-body { margin-top: 8px; font-size: 13.5px; line-height: 1.75; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.m-plan-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.m-plan-imgs a { width: 78px; height: 78px; }
.m-plan-imgs img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }
.m-plan-agreed { margin-top: 9px; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--ok); }
.m-plan-agreed .ic { width: 14px; height: 14px; }
.m-plan-pending { margin-top: 9px; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.m-plan-pending .ic { width: 14px; height: 14px; }

/* -- 快递三选一：去发货 / 扫码 / 无需快递 -- */
.m-ship-modes { display: flex; gap: 7px; }
.m-ship-modes label { flex: 1; position: relative; }
.m-ship-modes input { position: absolute; opacity: 0; pointer-events: none; }
.m-ship-modes span {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 10px 4px; border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 12.5px; font-weight: 800; color: var(--ink-2); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.m-ship-modes .ic { width: 15px; height: 15px; }
.m-ship-modes input:checked + span { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.m-ship-panel { margin-top: 10px; }
/* ⚠️ 只有 JS 接管之后才折叠面板。没 JS 时三块全铺开 —— 功能一个不少，只是不紧凑。
   反着做（默认折叠、靠 JS 展开）就成了「没 JS 就不能填」，那是不能接受的。 */
.m-ship.is-js .m-ship-panel { display: none; }
.m-ship.is-js .m-ship-panel.on { display: block; }
.m-ship-tip { font-size: 11.5px; line-height: 1.65; color: var(--ink-3); margin: 7px 0 0 2px; }
.m-ship-tip b { color: var(--ink-2); }
.m-gen-row { display: flex; gap: 7px; align-items: flex-end; }
.m-gen-row .m-field { flex: 1; margin-bottom: 0; }

/* -- 如实说明块（例：这个单号是平台生成的参考号）-- */
.m-warn {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--warn-soft); border-radius: var(--r-sm);
  padding: 10px 11px; margin-top: 8px;
  font-size: 12px; line-height: 1.7; color: var(--ink-2);
}
.m-warn .ic { width: 15px; height: 15px; color: var(--warn); flex-shrink: 0; margin-top: 2px; }
.m-warn b { color: var(--ink); }

/* -- 收发件人 -- */
.m-parties { display: grid; gap: 7px; margin-top: 9px; }
.m-parties .p { background: var(--surface-2); border-radius: var(--r-sm); padding: 9px 11px; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.m-parties .p b { display: block; font-size: 11px; font-weight: 800; color: var(--ink-3); margin-bottom: 2px; }
.m-parties .p span { display: block; color: var(--ink-3); font-size: 11.5px; }

/* -- 附件清单 -- */
.m-files { display: grid; gap: 7px; }
.m-files .m-filecard { background: var(--surface-2); }

/* -- 验收佐证 -- */
.m-ev { background: var(--surface-2); border-radius: var(--r-sm); padding: 11px 12px; margin-top: 8px; }
.m-ev .hd { font-size: 11.5px; font-weight: 800; color: var(--ink-3); margin-bottom: 6px; }
.m-ev .tx { font-size: 13px; line-height: 1.7; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }

/* 扫码取景框 */
.m-scan { margin-top: 9px; }
.m-scan video { width: 100%; border-radius: var(--r-sm); background: #000; display: block; }
.m-scan canvas { display: none; }

/* ======================================================================
   圈子（社区）· 手机端
   ----------------------------------------------------------------------
   形态照得物社区：双列瀑布流（图片封面 + 标题，高度随图自适应）
   + 顶部一排圈子 + 最新/热门 + 右下角点赞。
   ---------------------------------------------------------------------- */
.pc-head { display: flex; align-items: flex-end; gap: 10px; margin: 2px 0 10px; }
.pc-head h1 { margin: 0; font-size: 21px; letter-spacing: .5px; }
.pc-head p { margin: 3px 0 0; font-size: 12px; color: var(--ink-3); }
.pc-head > div { flex: 1; min-width: 0; }
.pc-new {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 800;
  flex-shrink: 0;
}

/* 一排圈子（横滑；得物的「垂直细分圈子」那一层）
   2026-09-30（派总 W3）：吸顶 —— 刷瀑布流时随时能换圈子（小红书同款）。
   ⚠️ top 必须含 --top-h（铁律 19 同源）；左右负 margin 把底色铺满整行，
   不然滚动时卡片会从两侧 12px 的缝隙里穿出来。 */
.pc-cats {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 12px 8px;
  margin: 0 -12px; background: var(--paper);
  position: sticky; top: calc(var(--safe-t) + var(--top-h)); z-index: 25;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pc-cats::-webkit-scrollbar { display: none; }
/* 与上面的 .m-ftab **同尺寸同手感**（派总 2026-09-24 第 H 波）——
   只换掉颜色相关的部分：选中态仍是深青 jade（原样保留）。 */
.pc-cat {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 32px; padding: 7px 12px; border-radius: var(--r-pill); flex-shrink: 0;
  background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-weight: 700;
  box-shadow: var(--sh-1);
}
.pc-cat.on { background: var(--jade); border-color: var(--jade); color: #fff; }

/* 最新 / 热门 */
.pc-tabs { display: flex; gap: 14px; margin: 0 2px 10px; align-items: center; }
/* 需求池（小青柠）页的「最新/热门」快捷排：筛选条是贴着 m-main 顶的，
   上面不给 10px 会和类型胶囊挤成一坨；下面 10px 呼应小圈子页 tabs 与瀑布流的间距。 */
.feed-sort-tabs { margin: 10px 2px; }
.pc-tab { font-size: 13.5px; font-weight: 800; color: var(--ink-3); padding: 3px 0; }
.pc-tab.on { color: var(--ink); }
.pc-tab.on::after { content: ''; display: block; height: 3px; margin-top: 2px; border-radius: 2px; background: var(--brand); }

/* 双列瀑布流：两列各自往下堆（列优先），列内卡片高度互不影响 */
.pc-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-items: start; }
.pc-col { display: grid; gap: 9px; align-content: start; }

/* —— 一张动态卡 —— */
.pc-card {
  position: relative; background: var(--surface);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.pc-card-link { position: absolute; inset: 0; z-index: 1; }
.pc-card-media { position: relative; background: var(--surface-2); }
.pc-card-media img { width: 100%; display: block; }
/* 视频帖封面（2026-09-24 派总：圈子主页视频卡撑得超高）：video 元素会按
   原始分辨率自然铺高，瀑布流里能顶出好几屏 —— 统一压成 3:4 封面裁切。 */
.pc-card-media video {
  width: 100%; display: block;
  aspect-ratio: 3 / 4; object-fit: cover; background: #101418;
}
.pc-card-kind {
  position: absolute; left: 6px; top: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 10px; font-weight: 800;
}
.pc-card-cover {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand-tint), var(--brand-soft));
  color: var(--brand-deep);
}
.pc-card-cover .stack { display: grid; gap: 4px; justify-items: center; font-size: 12px; }
.pc-card-body { padding: 8px 9px 9px; }
.pc-card-title {
  margin: 0; font-size: 13px; line-height: 1.45; font-weight: 700; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-card-circle {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 5px;
  font-size: 10.5px; color: var(--brand-deep); background: var(--brand-tint);
  padding: 2px 7px; border-radius: var(--r-pill); font-weight: 700;
}
.pc-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 6px; }
/* 评论数（2026-09-30 W3）：列表上就能看出「这条有没有人在聊」——轻灰小字，不可点
   （整卡都是可点层，点了就是进详情看评论）。 */
.pc-card-cm { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; color: var(--ink-3); flex-shrink: 0; }
.pc-card-cm .ic { width: 11px; height: 11px; }
.pc-card-by { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 10.5px; color: var(--ink-3); }
.pc-card-by b { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-card-by .av, .pcp-head .av {
  width: 18px; height: 18px; border-radius: var(--r-pill); object-fit: cover; flex-shrink: 0;
  background: var(--brand-soft); color: var(--brand-deep);
  display: grid; place-items: center; font-size: 9.5px; font-weight: 900; overflow: hidden;
}
.av-lg { width: 38px !important; height: 38px !important; font-size: 15px !important; }
/* 点赞：浮在整卡可点层之上（z-index 高于 .pc-card-link） */
.pc-like { position: relative; z-index: 2; margin: 0; }
.pc-like button {
  display: inline-flex; align-items: center; gap: 3px;
  border: 0; background: none; padding: 3px 4px; color: var(--ink-3);
  font-size: 11px; font-weight: 800;
}
.pc-like button i { font-style: normal; }
.pc-like.on button { color: var(--coral); }

/* —— 文字海报（6 套模板；详情页大图与卡片封面共用这些类） —— */
.pc-poster {
  position: relative; display: grid; align-content: center; gap: 8px;
  aspect-ratio: 4 / 5; padding: 18px 16px;
}
.pc-poster b { font-size: 19px; line-height: 1.35; }
.pc-poster span { font-size: 12.5px; line-height: 1.7; opacity: .82; }
.pc-poster i {
  position: absolute; left: 16px; right: 16px; bottom: 12px;
  font-style: normal; font-size: 10.5px; opacity: .65;
}
.pc-poster-mini { aspect-ratio: 16 / 10; padding: 12px; }
.pc-poster-mini b { font-size: 14px; }
.pc-poster-mini span { font-size: 10.5px; }
.pc-poster-full { aspect-ratio: auto; min-height: 300px; margin: 12px 0; border-radius: var(--r-lg); }
.pc-poster-full b { font-size: 24px; }
.pc-poster-full span { font-size: 14.5px; }
/* 模板配色（key 存库，定了别改 —— 见 settings.CIRCLE_POSTER_TEMPLATES 注释） */
.pc-lime { background: linear-gradient(160deg, #d4f14a, #a8e063); color: #123b0e; text-align: center; }
.pc-ink { background: linear-gradient(160deg, #23262b, #0f1114); color: #f4f2ec; }
.pc-paper { background: #f7f3ea; color: #2c2a26; text-align: center; box-shadow: inset 0 0 0 1px #e2dccb; }
.pc-sunset { background: linear-gradient(160deg, #ff8a5c, #ff5470); color: #fff; text-align: center; }
.pc-ocean { background: linear-gradient(160deg, #0e7490, #164e63); color: #eafcff; }
.pc-night { background: linear-gradient(160deg, #1e1b4b, #312e81); color: #e0e7ff; text-align: center; }

/* —— 发帖表单 —— */
.pcn { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.pcn-head h1 { margin: 0; font-size: 21px; }
.pcn-head p { margin: 3px 0 0; font-size: 12px; color: var(--ink-3); }
.pcn-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcn-kind {
  display: grid; justify-items: center; gap: 2px; padding: 12px 8px;
  border: 1.5px solid var(--ink-4); border-radius: var(--r-md, 12px);
  font-size: 13px; cursor: pointer; background: var(--surface);
}
.pcn-kind input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pcn-kind span { font-size: 10.5px; color: var(--ink-3); }
.pcn-kind.on { border-color: var(--brand); background: var(--brand-tint); }
.pcn-kind.on b { color: var(--brand-deep); }
.pcn-field { display: grid; gap: 5px; }
.pcn-field > b, .pcn-label { font-size: 12.5px; color: var(--ink-2); }
.pcn-field input[type="text"], .pcn-field input:not([type]), .pcn-field textarea,
.pcn-field input[type="file"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ink-4);
  border-radius: var(--r-md, 12px); background: var(--surface);
  font: inherit; font-size: 13.5px;
}
.pcn-field textarea { min-height: 96px; resize: vertical; }
.pcn-hint { font-size: 11px; color: var(--ink-3); }
.pcn-block.is-hide { display: none; }
.pcn-tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pcn-tpl { display: grid; gap: 4px; cursor: pointer; position: relative; min-width: 0; }
.pcn-tpl input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pcn-tpl > i { font-style: normal; font-size: 11px; color: var(--ink-3); text-align: center; }
.pcn-tpl.on .pc-poster { outline: 2.5px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.pcn-tpl.on > i { color: var(--brand-deep); font-weight: 800; }
.pcn-circles { display: flex; flex-wrap: wrap; gap: 7px; }
.pcn-circles label { position: relative; cursor: pointer; }
.pcn-circles input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pcn-circles span {
  display: inline-block; padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--ink-4); background: var(--surface);
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}
.pcn-circles input:checked + span { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); }

/* —— 流水账（8 页） —— */
.cc-nav {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px;
  scrollbar-width: none; position: sticky; top: 0; z-index: 3;
  background: var(--paper);
}
.cc-nav::-webkit-scrollbar { display: none; }
.cc-nav a {
  flex-shrink: 0; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 800; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid transparent;
}
.cc-nav a.on { color: var(--brand-deep); background: var(--brand-soft); }
.cc-pages { display: grid; gap: 10px; }
.cc-page {
  background: var(--surface); border-radius: var(--r-lg); padding: 13px 13px 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.cc-page-head { display: flex; gap: 9px; align-items: center; }
.cc-no {
  width: 26px; height: 26px; border-radius: var(--r-pill); flex-shrink: 0;
  display: grid; place-items: center; background: var(--brand); color: #fff;
  font-size: 12.5px; font-weight: 900;
}
.cc-no.is-empty { background: var(--ink-4); }
.cc-page-head b { font-size: 14.5px; }
.cc-when { display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.cc-text { margin: 9px 0 2px; font-size: 13px; line-height: 1.75; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }

/* 流水账确认页（发之前先给看一眼会生成什么） */
.ccv { background: var(--surface); border-radius: var(--r-lg); padding: 13px; box-shadow: 0 1px 4px rgba(0, 0, 0, .05); }
.ccv-order b { font-size: 14.5px; }
.ccv-order span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.ccv-pages { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 8px; }
.ccv-pages li { display: flex; gap: 9px; align-items: center; }
.ccv-pages b { font-size: 12.5px; }
.ccv-pages span { display: block; font-size: 11px; color: var(--ink-3); }
.ccv-pages li.is-empty b { color: var(--ink-3); }
.ccv-note { margin: 11px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }

/* —— 图片上的气泡 —— */
.pb-fig { margin: 10px 0 0; }
.pb-stage {
  position: relative; border-radius: var(--r-md, 12px); overflow: hidden;
  background: var(--surface-2);
}
.pb-stage img { width: 100%; display: block; }
.pb-dot {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff; border: 2px solid #fff;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 900;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3); z-index: 2;
  /* 让它浮在整卡可点层之上（详情页有 <a> 铺底时也不被吃掉） */
  text-decoration: none;
}
.pb-ghost {
  position: absolute; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: var(--r-pill);
  border: 2px dashed #fff; background: rgba(0, 0, 0, .35); z-index: 2; pointer-events: none;
}
.pb-list { display: grid; gap: 6px; margin-top: 8px; }
.pb-item {
  background: var(--surface-2); border-radius: var(--r-md, 12px);
  padding: 8px 10px; font-size: 12.5px;
}
.pb-item b { font-size: 11.5px; color: var(--ink-2); }
.pb-item p { margin: 3px 0 0; line-height: 1.6; word-break: break-word; }
.pb-item.is-reply { margin-left: 18px; display: flex; gap: 6px; background: var(--paper-2); }
.pb-item.is-reply p { margin: 1px 0 0; }
.pb-reply-form summary { font-size: 11.5px; color: var(--brand-deep); cursor: pointer; margin-top: 5px; }
.pb-reply-form form { display: flex; gap: 6px; margin-top: 6px; }
.pb-reply-form input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--ink-4); border-radius: var(--r-sm); font: inherit; font-size: 12.5px; }
.pb-add summary { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--brand-deep); cursor: pointer; padding: 6px 0; }
.pb-add form { display: grid; gap: 7px; margin-top: 6px; }
.pb-add input[name="text"] { width: 100%; padding: 9px 11px; border: 1px solid var(--ink-4); border-radius: var(--r-sm); font: inherit; font-size: 13px; }

/* —— 详情页 —— */
/* 2026-09-30：详情页顶栏已统一走 base 的 .m-top（⬅ + 圈子名·形态 + 分享），
   自造的 .pcp-nav 文字链那套删了。删除键挪进下方互动行（.pcp-stats）：
   **只有删除单独居右**（margin-left:auto，派总 2026-09-30 二次修正：分享不跟着居右），
   **只有作者本人/运营看得见**（模板 can_delete + 服务层双闸门）。
   安静化设计（避免吃 UA 默认按钮样式长出丑边框盒）：按钮本体无边框无底色，
   常态=与左侧计数同档的轻灰，按下才显珊瑚警示色 —— 危险但低频的动作不该抢戏。 */
.pcp-del { display: inline-flex; margin-left: auto; }
.pcp-del button {
  display: inline-flex; align-items: center; gap: 3px;
  border: 0; background: none; padding: 5px 2px;
  color: var(--ink-3); font-size: 12px; font-weight: 700; cursor: pointer;
}
.pcp-del button:active { color: var(--coral-deep); }
.pcp-head { display: flex; gap: 10px; align-items: center; }
.pcp-head-in b { font-size: 14px; }
.pcp-meta { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.pcp-meta a { color: var(--brand-deep); font-weight: 700; }
.pcp-title { margin: 10px 0 4px; font-size: 19px; line-height: 1.4; }
.pcp-content { font-size: 13.5px; line-height: 1.8; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.pcp-imgs { display: grid; gap: 4px; margin-top: 6px; }
.pcp-stats { display: flex; gap: 14px; align-items: center; margin: 14px 0 4px; padding: 10px 0; border-top: 1px solid var(--paper-2); border-bottom: 1px solid var(--paper-2); }
.pcp-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.pcp-stats .pc-like { position: static; }
.pcp-comments { margin-top: 10px; }
.pcp-comments h2 { margin: 0 0 10px; font-size: 15px; }
.pc-cm { padding: 9px 0; border-bottom: 1px solid var(--paper-2); font-size: 13px; }
.pc-cm > b { font-size: 12px; color: var(--ink-2); }
.pc-cm p { margin: 3px 0; line-height: 1.65; word-break: break-word; }
.pc-cm-when { font-size: 10.5px; color: var(--ink-3); }
.pc-cm.is-reply { margin-left: 18px; padding: 7px 0 0; border-bottom: 0; }
.pc-cm details { margin-top: 4px; }
.pc-cm details summary { font-size: 11.5px; color: var(--brand-deep); cursor: pointer; }
.pc-cm details form { display: flex; gap: 6px; margin-top: 6px; }
.pc-cm details input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--ink-4); border-radius: var(--r-sm); font: inherit; font-size: 12.5px; }
.pc-cm-form { display: grid; gap: 8px; margin-top: 12px; }
.pc-cm-form textarea { width: 100%; min-height: 74px; padding: 10px 12px; border: 1px solid var(--ink-4); border-radius: var(--r-md, 12px); font: inherit; font-size: 13.5px; resize: vertical; }
.pc-cm-empty { font-size: 12.5px; color: var(--ink-3); }
.pc-cm-login { font-size: 12.5px; color: var(--ink-2); }
.pc-cm-login a { color: var(--brand-deep); font-weight: 800; }

/* ── 圈子补丁（2026-09-24 门禁补齐）────────────────────── */
.av-txt { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; letter-spacing: .5px; }
.pcp { position: relative; }
.pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 999px; background: var(--brand, #00bda6); color: #fff; font-weight: 700; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.pb-btn:active { transform: scale(.97); }
.pb-btn-slim { padding: 3px 10px; font-size: 12px; }

/* ── 圈子第二轮（2026-09-24）：小红书式海报 / 胶囊标注 / 评论赞 / 分享 ────── */
/* 海报朝向：竖版 3:4（主形态）/ 横版 4:3；选择器小样固定 16:10 不受朝向影响 */
.pc-poster.po-v { aspect-ratio: 3 / 4; }
.pc-poster.po-h { aspect-ratio: 4 / 3; }
.pc-poster.pc-poster-mini { aspect-ratio: 16 / 10 !important; }

/* 六款小红书式模板（纯 CSS：底色 + 角标装饰，不生成图片） */
.pc-poster.pc-cream { background: linear-gradient(160deg,#fdf9ef,#f6ecd6); color:#4a4034; border:1.5px dashed #d9c9a3; }
.pc-poster.pc-mint { background: linear-gradient(160deg,#e9f7f0,#d2eee0); color:#1f5c46; }
.pc-poster.pc-mint::before { content:''; position:absolute; top:0; left:0; right:0; height:6px; background:#00bda6; }
.pc-poster.pc-peach { background: radial-gradient(circle at 86% 12%, #ffd9c9 0 24%, transparent 25%), linear-gradient(160deg,#fff0e8,#ffe2d3); color:#7c3a2b; }
.pc-poster.pc-sky { background: linear-gradient(180deg,#e8f2fd 62%, #cfe6fa); color:#23527c; }
.pc-poster.pc-sky::after { content:''; position:absolute; left:0; right:0; bottom:0; height:9px; background:linear-gradient(90deg,#8fc1f2,#00bda6); }
.pc-poster.pc-inkred { background:#fffdfb; color:#26221e; border:3px solid #d3452e; }
.pc-poster.pc-inkred b { border-bottom: 3px solid #d3452e; padding-bottom: 6px; }
.pc-poster.pc-forest { background: linear-gradient(160deg,#14453a,#0c312a); color:#f2efe6; }
.pc-poster.pc-forest b { color:#ffd166; }
.pc-poster.pc-forest::after { content:''; position:absolute; right:12px; bottom:34px; width:32px; height:32px; border-radius:50%; border:2px solid rgba(255,209,102,.65); }

/* 实时预览：跟着朝向变画幅，内容区居中 */
.pcn-preview { margin: 4px 0 12px; }
.pc-poster.pc-poster-live { width: 100%; }
.pc-poster.pc-poster-live.po-v { max-width: 340px; aspect-ratio: 3 / 4; margin: 0 auto; }
.pc-poster.pc-poster-live.po-h { max-width: 460px; aspect-ratio: 4 / 3; margin: 0 auto; }

/* 横竖版切换胶囊 */
.pcn-orients { display: flex; gap: 8px; margin: 6px 0 4px; }
.pcn-orient { cursor: pointer; position: relative; }
.pcn-orient input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pcn-orient span { display: inline-block; padding: 6px 16px; border-radius: 999px; border: 1.5px solid var(--line,#e5e7eb); font-size: 13px; font-weight: 700; color: var(--ink-2,#5f6268); }
.pcn-orient.on span { background: var(--brand,#00bda6); border-color: var(--brand,#00bda6); color: #fff; }

/* 得物式「胶囊标注」：圆点 + 短文字标在图上（百分比定位） */
.pb-pill { position: absolute; transform: translate(-6px,-50%); display: inline-flex; align-items: center; gap: 5px; max-width: 62%; background: rgba(255,255,255,.96); color: #26221e; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.22); padding: 3px 10px 3px 4px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.pb-pill i { font-style: normal; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--brand,#00bda6); color: #fff; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pb-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 评论：行布局 + 单条点赞 */
.pc-cm-row { display: flex; gap: 8px; align-items: flex-start; }
.pc-cm-main { flex: 1; min-width: 0; }
.pc-clike { flex: none; }
.pc-clike button { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; color: var(--ink-3,#9a9da3); cursor: pointer; padding: 2px; }
.pc-clike i { font-style: normal; font-size: 11.5px; }
.pc-clike.on button { color: var(--brand,#00bda6); }
.pc-cm-pact { display: flex; align-items: center; gap: 6px; background: var(--paper-2,#f6f7f8); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--ink-3,#9a9da3); margin-bottom: 12px; }
.pc-cm-pact span { font-weight: 800; color: var(--ink-2,#5f6268); }
.pc-cm-pact i { font-style: normal; }

/* 分享按钮（详情页底栏） */
.pc-share { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--ink-2,#5f6268); font-weight: 700; cursor: pointer; font-size: 13.5px; padding: 4px; }

/* 流水账的需求单卡（得物式「商品卡」位） */
.pc-order-card { display: flex; align-items: center; gap: 9px; background: var(--paper-2,#f6f7f8); border-radius: 12px; padding: 10px 12px; margin: 12px 0; color: var(--ink,#26221e); text-decoration: none; }
.pc-order-badge { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--jade,#103c37); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pc-order-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13.5px; }
.pc-order-p { flex: none; color: var(--coral,#ff6a45); font-weight: 800; }

/* 正文里的 #话题# 绿链 */
.pc-tag { color: var(--brand-deep,#009c8a); font-weight: 800; }

/* 圈子搜索框（#话题# 链接的落点） */
.pc-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line,#e5e7eb); border-radius: 999px; padding: 8px 14px; margin: 10px 0 4px; }
.pc-search input[type="search"] { flex: 1; min-width: 0; border: 0; outline: none; font-size: 14px; background: none; color: inherit; }
.pc-search .ic { color: var(--ink-3,#9a9da3); }
.pc-search-x { font-size: 12.5px; color: var(--ink-3,#9a9da3); flex: none; }

.ic-xs { width: 12px; height: 12px; }

/* ======================================================================
 * 圈子改版（2026-09-24 派总 4 条）—— 两端共用块（app.css 有一份同样的拷贝，
 * 改这里必须同步那边，两端一致性的病只有成对维护能防）。
 * ---------------------------------------------------------------------- */

/* ---- 图集：得物式轮播（一次只亮一张图）+ 每张图的备注讨论串 ---- */
.pc-gallery { margin: 12px 0 0; }
.pc-gal-car { border-radius: 14px; }
.pc-gal-slide { aspect-ratio: auto; flex: 0 0 100%; }
.pc-gal-slide .pb-stage img { height: auto; object-fit: contain; }
.pc-gal-notes { margin-top: 10px; padding: 10px 12px; background: var(--surface); border-radius: 12px; }
.pc-gal-notes-t { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }
.pc-gal-empty { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3,#9a9da3); }
/* 胶囊标注要浮在海报框叠层之上 */
.pb-pill { z-index: 2; }

/* ---- 得物式「图片海报框」：纯 CSS 叠在封面图上，pointer-events:none 不挡气泡 ---- */
.pc-frame { position: absolute; inset: 0; display: block; pointer-events: none; font-style: normal; z-index: 1; }
.pc-frame b { font-style: normal; }
.pc-frame-mag::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 7px #fff, inset 0 -40px 44px rgba(0,0,0,.3); }
.pc-frame-mag b { position: absolute; top: 14px; left: 16px; right: 16px; color: #fff; font-family: Georgia,'Times New Roman',serif; font-weight: 800; font-size: 24px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.pc-frame-film::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 12px #fff, inset 0 -52px 0 #fff; }
.pc-frame-film b { position: absolute; left: 16px; right: 16px; bottom: 0; height: 52px; display: flex; align-items: center; background: #fff; color: #26221e; font-weight: 800; font-size: 14px; }
.pc-frame-band::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(transparent, rgba(10,12,14,.78)); }
.pc-frame-band b { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; font-weight: 900; font-size: 17px; line-height: 1.4; text-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* 发布页里的框样式小样（选中哪个框就套哪个效果） */
.pc-frame-demo { position: relative; display: block; width: 100%; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg,#cdeee8,#9adcd2); }
.pc-frame-demo.pc-frame-mag::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px #fff, inset 0 -14px 16px rgba(0,0,0,.25); }
.pc-frame-demo.pc-frame-mag b { position: absolute; top: 6px; left: 8px; right: 6px; color: #fff; font-family: Georgia,'Times New Roman',serif; font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.pc-frame-demo.pc-frame-film::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px #fff, inset 0 -18px 0 #fff; }
.pc-frame-demo.pc-frame-film b { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: #fff; color: #26221e; font-size: 9px; font-weight: 800; line-height: 18px; padding: 0 6px; }
.pc-frame-demo.pc-frame-band::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.pc-frame-demo.pc-frame-band b { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; color: #fff; font-size: 10px; font-weight: 900; }

/* ---- 视频帖 ---- */
.pcp-video { margin: 12px 0 0; }
.pcp-video video { width: 100%; max-height: 70vh; display: block; border-radius: 14px; background: #000; }

/* ---- 小红书式引号装饰（文字海报详情 / 写想法输入卡） ---- */
.pc-poster-full { position: relative; }
.pc-poster-full::before { content: '\201C'; position: absolute; top: 10px; left: 14px; font-family: Georgia, serif; font-weight: 900; font-size: 56px; line-height: 1; opacity: .14; pointer-events: none; }
.pc-poster-full::after { content: '\201D'; position: absolute; bottom: 6px; right: 14px; font-family: Georgia, serif; font-weight: 900; font-size: 56px; line-height: 1; opacity: .14; pointer-events: none; }

/* ======================================================================
 * App 专属（2026-09-24）：发布动作面板 / 详情页底部互动条 / 发帖页新版式
 * ---------------------------------------------------------------------- */

/* ---- 发布动作面板（小红书同款 bottom sheet） ---- */
.m-sheet[hidden] { display: none; }
.m-sheet-mask { position: fixed; inset: 0; z-index: 60; background: rgba(15,20,24,.5); border: 0; padding: 0; cursor: pointer; }
.m-sheet-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--surface); border-radius: 20px 20px 0 0; padding: 14px 14px calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 2px; box-shadow: 0 -10px 40px rgba(0,0,0,.18); }
.m-sheet-title { padding: 2px 4px 8px; font-size: 14px; color: var(--ink-2); }
.m-sheet-item { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 14px; color: var(--ink); font-weight: 700; font-size: 15px; }
.m-sheet-item .ic { color: var(--brand-deep); flex: none; }
.m-sheet-item:active { background: var(--surface-2); }
.m-sheet-item span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m-sheet-item i { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--ink-3); }
/* 发需求 = 四宫格右下角（派总 2026-09-24 晚第 5 条 + 第 6 条）：
   和三张内容卡同构，但**功能不一样**（平台主业务、钱进担保池的入口）——
   用品牌青绿实底 + 白字做强强调，一眼和「发动态」三类区分开。
   ⚠️ 选择器必须带 .m-style 前缀压过它（.m-style 定义在本文件更靠后的
   白底/边框，同特异性会按源顺序把它盖掉 —— 曾经就是这样样式静默失效的）。 */
.m-style.m-sheet-demand {
  border: 0;
  background: linear-gradient(135deg, var(--brand), #00a892);
  box-shadow: var(--sh-brand);
}
.m-style.m-sheet-demand .ic { color: #fff; }
.m-style.m-sheet-demand b { color: #fff; }
.m-style.m-sheet-demand i { color: rgba(255, 255, 255, .85); opacity: 1; }

/* 帘子里点样式卡直接进创作（派总 2026-09-24 晚第 5 条）：
   三张内容卡 + 右下角「发需求」= 2×2，整卡是链接，点哪进哪。 */
.m-sheet-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.m-style {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 12px 10px; border-radius: 16px;
  border: 1.5px solid var(--line-2, #e5e7eb);
  background: var(--surface); cursor: pointer;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.m-style:active { background: var(--surface-2); }
.m-style .ic { color: var(--brand-deep); width: 20px; height: 20px; }
.m-style b { font-size: 14px; font-weight: 800; color: var(--ink); }
.m-style i { font-style: normal; font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.m-sheet-cancel { margin-top: 6px; padding: 12px; border-radius: 999px; border: 0; background: var(--surface-2); color: var(--ink-2); font: inherit; font-weight: 700; cursor: pointer; }

/* ---- 详情页底部常驻互动条（详情页已隐藏底部 tab，见 m/circle_post.html） ---- */
.pcp-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
.pcp-dock .ic { color: var(--ink-3); flex: none; }
.pcp-dock input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 0; background: var(--surface-2); font: inherit; font-size: 13.5px; color: var(--ink); }
.pcp-dock-send { flex: none; border: 0; background: var(--brand); color: #fff; font-weight: 800; font-size: 13px; padding: 9px 16px; border-radius: 999px; cursor: pointer; }
/* 有互动条的页面正文别被压住 */
.pcp { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* ---- 发帖页新版式（小红书「写想法」+ 得物模板格子） ---- */
.pcn-top { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; }
.pcn-x { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.pcn-top-t { flex: 1; min-width: 0; font-size: 16px; text-align: center; padding-right: 38px; }
.pcn-go { flex: none; border: 0; background: var(--brand); color: #fff; font-weight: 900; font-size: 13.5px; padding: 9px 18px; border-radius: 999px; cursor: pointer; box-shadow: var(--sh-brand); }
/* 发布按钮沉到创作页最底部（派总 2026-09-24 晚第 5 条：纯编辑界面） */
.pcn-foot { margin-top: 20px; padding: 4px 0 calc(24px + env(safe-area-inset-bottom)); }
.pcn-go--big { display: block; width: 100%; padding: 14px; font-size: 15.5px; border-radius: 999px; }
.pcn-modes { display: flex; gap: 6px; margin-bottom: 12px; }
.pcn-mode { position: relative; flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 700; box-shadow: var(--sh-1); cursor: pointer; white-space: nowrap; }
.pcn-mode input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pcn-mode.on { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.pcn-shots { display: flex; gap: 8px; margin-bottom: 12px; }
.pcn-shot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0; border-radius: 16px; background: var(--surface); color: var(--brand-deep); box-shadow: var(--sh-1); font: inherit; border: 0; cursor: pointer; }
.pcn-shot b { font-size: 13px; }
.pcn-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pcn-live { display: block; }
.pcn-live-title, .pcn-live-body { display: block; width: 100%; border: 0; background: transparent; font: inherit; color: inherit; padding: 0; margin: 0; outline: none; }
.pcn-live-title { font-weight: 800; font-size: 17px; margin: 8px 0 10px; }
.pcn-live-body { font-size: 14.5px; line-height: 1.7; resize: none; min-height: 120px; }
.pcn-live-author { opacity: .7; }
.pcn-quote { font-style: normal; font-size: 44px; line-height: 1; opacity: .16; font-weight: 900; font-family: Georgia, serif; }
.pcn-frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.pcn-frame { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: center; cursor: pointer; }
.pcn-frame input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pcn-frame i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.pcn-frame .pc-frame-demo { outline: 2px solid transparent; outline-offset: 1px; }
.pcn-frame.on i { color: var(--brand-deep); font-weight: 800; }
.pcn-frame.on .pc-frame-demo { outline-color: var(--brand); }

/* ---- 选完立刻看见（派总 2026-09-24 晚：选图/选视频没反馈 = 以为失败了） ---- */
/* 图片九宫格预览：缩略图 + × 删除 + 每张一个「标注」输入框 */
.pcn-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pcn-prev {
  position: relative; margin: 0; border-radius: 14px; overflow: hidden;
  background: var(--surface); box-shadow: var(--sh-1);
}
.pcn-prev img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-2); }
.pcn-prev-cover {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(15, 20, 24, .55); color: #fff;
  font-style: normal; font-size: 10px; font-weight: 800;
}
.pcn-prev-x {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(15, 20, 24, .55); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}

/* 点图钉备注（2026-09-24 深夜派总：备注要以气泡长在图上，不是图下的输入框） */
.pcn-prev-bubble {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  max-width: 88%; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 5px 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--ink);
  font-size: 11px; font-weight: 700; box-shadow: var(--sh-1);
  white-space: nowrap; pointer-events: auto;
}
.pcn-prev-bubble em { font-style: normal; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.pcn-prev-bubble button {
  flex: none; width: 15px; height: 15px; border: 0; border-radius: 50%;
  background: rgba(15, 20, 24, .16); color: var(--ink-2);
  font-size: 10px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  padding: 0;
}
.pcn-bubble-edit {
  position: absolute; z-index: 3; transform: translate(-50%, -110%);
  display: flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}
.pcn-bubble-edit input {
  width: 118px; border: 0; background: var(--surface-2);
  border-radius: 8px; font: inherit; font-size: 12px; padding: 5px 8px; outline: none;
}
.pcn-bubble-edit button {
  flex: none; border: 0; border-radius: 8px; background: var(--brand); color: #fff;
  font: inherit; font-size: 11px; font-weight: 800; padding: 0 9px; cursor: pointer;
}

/* 视频预览：选完直接内嵌播放，不满意一键重选 */
.pcn-vprev { margin-top: 12px; }
.pcn-vprev video {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain;
  border-radius: 14px; background: #101418;
}
.pcn-vclear {
  margin-top: 8px; border: 1.5px solid var(--line-2, #e5e7eb); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; cursor: pointer;
}

/* 「海报模板」模式：得物式大格子墙 —— 先挑模板，挑完往下面的大卡里填字。
   （上面的 16/10 !important 是给小样的，这里用更高优先级 + !important 覆盖。） */
.pcn-tpls--xl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pcn-tpls--xl .pc-poster.pc-poster-mini { aspect-ratio: 3 / 4 !important; padding: 16px 14px; }
.pcn-tpls--xl .pc-poster-mini b { font-size: 16px; }
.pcn-tpls--xl .pc-poster-mini span { font-size: 11.5px; }
.pcn-tpls--xl .pcn-tpl i { font-size: 12px; }

/* 「写文字」模式：模板收进默认合上的抽屉（小红书的做法 —— 重点写字，模板可选） */
.pcn-adv { margin-top: 14px; border: 1.5px solid var(--line-2, #e5e7eb); border-radius: 16px; background: var(--surface); }
.pcn-adv summary {
  list-style: none; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.pcn-adv summary::-webkit-details-marker { display: none; }
.pcn-adv summary .ic { color: var(--brand-deep); }
.pcn-adv-chev { margin-left: auto; transition: transform .15s ease; color: var(--ink-3); }
.pcn-adv[open] .pcn-adv-chev { transform: rotate(180deg); }
.pcn-adv-in { padding: 2px 14px 14px; border-top: 1px solid var(--line-2, #e5e7eb); }
/* 铁律 18 的保险：个别老 WebView 合上的 details 里内容不会自动藏，手动兜住 */
.pcn-adv:not([open]) .pcn-adv-in { display: none; }

/* ----------------------------------------------------------------------
   「我的」页底部的精简页脚（2026-09-24，方案 B）
   ----------------------------------------------------------------------
   手机端每页底部都固定着五格导航（.m-tabbar 是 position:fixed; bottom:0），
   所以这份页脚**必须**用 sticky 停在导航上方 —— 走普通流的会被底栏压住半截。
   只在这一页出现（templates/m/me.html），别的页面不挂。
   ---------------------------------------------------------------------- */
.m-foot {
  position: sticky; z-index: 30;
  bottom: calc(var(--tab-h) + var(--safe-b));
  margin: 18px -12px 0;
  padding: 14px 16px 4px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.m-foot-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.m-foot-brand:active { opacity: .6; }
.m-foot-brand .brand-mark { display: block; }
.m-foot-name { font-size: 15px; font-weight: 900; color: var(--ink); letter-spacing: .2px; }
.m-foot-slogan { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.m-foot-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.m-foot-links a { font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.m-foot-links a:active { color: var(--brand-deep); }
.m-foot-icp { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); }
.m-foot-icp a { color: var(--ink-3); text-decoration: underline; }
.m-foot-legal {
  margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between;
  font-size: 11px; color: var(--ink-3);
}
/* 窄屏两行挤不下时，第二行换个方向排，别把字压成一团 */
@media (max-width: 380px) {
  .m-foot-legal { flex-direction: column; }
  /* 极窄屏（≤380px）：顶栏塞不下「小青柠」三个字 —— tab 里文字藏起、只留 logo 图标，
     tab 缩回小方块（跟 2026-09-24 纯图标版的尺寸一致）。 */
  .m-top-all-t { display: none; }
  .m-top-all { padding: 0; width: 30px; justify-content: center; }
  .m-top-all .m-mark { margin: 0; }
}

/* ----------------------------------------------------------------------
   底栏第一格的品牌位 + 顶栏「圈子」入口（2026-09-24 晚，派总定的对调）
   ----------------------------------------------------------------------
   底栏：logo 代替「房子」图标 —— 未选中置灰、选中恢复彩色（img 没法换色，
   用 filter 做灰化）；文字仍写「发现」（页面功能名不变）。
   顶栏：原 logo 位换成「圈子」文字入口，图标用 Lucide 的 users。 */
.m-tab .m-tab-mark {
  width: 22px; height: 22px; display: block;
  filter: grayscale(1); opacity: .55;
  transition: filter .15s ease, opacity .15s ease;
}
.m-tab.on .m-tab-mark { filter: none; opacity: 1; }
.m-title .ic, .m-brand .ic {
  width: 18px; height: 18px; vertical-align: -3.5px; margin-right: 3px;
}

/* ======================================================================
 * App「发需求」单页（2026-09-24 晚，派总第 7 条：照闲鱼「发闲置」做减法）
 * 旧 11 步向导的 .wz-* 样式保留（网页版结构不同，别删）——这一段全是 .pub-*。
 * ---------------------------------------------------------------------- */
.pub-x { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.pub-top-t { flex: none; font-size: 16px; font-weight: 900; color: var(--ink); }
.pub-top-sp { flex: 1; }
.pub-draft-btn { flex: none; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 8px; cursor: pointer; }
.pub-top-go {
  flex: none; border: 0; background: var(--brand); color: #fff; font: inherit;
  font-size: 13px; font-weight: 900; padding: 8px 16px; border-radius: 999px;
  cursor: pointer; box-shadow: var(--sh-brand);
}
.pub-draft-tip {
  display: flex; align-items: center; gap: 8px; margin: 0 2px 12px;
  padding: 10px 12px; border-radius: 14px; font-size: 13px; color: var(--ink-2);
  background: rgba(200, 149, 44, .1); border: 1px solid rgba(200, 149, 44, .35);
}
.pub-draft-tip .ic { color: var(--gold); flex: none; width: 18px; height: 18px; }
.pub-draft-tip span { flex: 1; min-width: 0; }
.pub-draft-tip a { font-weight: 800; color: var(--brand-deep); text-decoration: none; }

.pub-card {
  background: var(--surface); border-radius: 18px; box-shadow: var(--sh-1);
  padding: 12px; margin-bottom: 12px;
}
.pub-desc {
  display: block; width: 100%; min-height: 120px; border: 0; resize: vertical;
  background: none; font: inherit; font-size: 15px; line-height: 1.6; color: var(--ink);
}
.pub-desc::placeholder { color: var(--ink-3); }
.pub-title-row {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.pub-title-tag {
  flex: none; font-size: 11.5px; font-weight: 800; color: var(--brand-deep);
  background: rgba(0, 189, 166, .12); border-radius: 6px; padding: 3px 7px;
}
.pub-title-row input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.pub-title-row input::placeholder { color: var(--ink-3); font-weight: 500; }
/* 标题预览（派总 2026-09-24 第 3 条 a）：右边那行灰字会随着描述实时变，
   让人在点发布之前就知道标题长什么样。超出一行就省略号，别把卡片撑高。 */
.pub-title-auto {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pub-title-auto.is-set { color: var(--ink); font-weight: 700; }

/* 图片上传 + 数量和交期，同一行（第 3 条 b）：
   左边的九宫格是固定宽度的四格网格，右边两格自适应；
   窄到 420px 以下就掉成一排，别把输入框压成一条缝。 */
.pub-shots-row { display: flex; align-items: flex-start; gap: 10px; }
.pub-shot-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pub-shot-fields .m-label { font-size: 11.5px; }
.pub-shot-fields .m-input { font-size: 13px; padding: 8px 10px; }
@media (max-width: 420px) { .pub-shot-fields { grid-template-columns: 1fr; } }

/* 「添加收件人 / 需求人信息」胶囊（第 3 条 d）：
   它就是那一折叠段的 summary 行，整行可点。 */
.pub-add-addr {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.pub-add-addr .ic { width: 14px; height: 14px; }
#sec-addr > summary .pub-sec-val { margin-left: 6px; max-width: 42%; }

.pub-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pub-shot {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border-radius: 14px; background: var(--surface-2); color: var(--brand-deep);
  font: inherit; border: 0; cursor: pointer;
}
.pub-shot .ic { width: 20px; height: 20px; }
.pub-shot b { font-size: 11px; }
.pub-prev { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.pub-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-prev-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: rgba(15, 20, 24, .6); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
}

.pub-more { margin-top: 10px; }
.pub-more > summary {
  list-style: none; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--brand-deep);
  padding: 6px 2px 0; user-select: none;
}
.pub-more > summary::-webkit-details-marker { display: none; }
.pub-more[open] > summary { padding-bottom: 8px; }
.pub-stock-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pub-stock-grid label { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.pub-stock-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-stock-grid input { position: absolute; top: 5px; left: 5px; width: 18px; height: 18px; margin: 0; }
.pub-stock-grid input:checked + img { outline: 2.5px solid var(--brand); outline-offset: -2.5px; }

.pub-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.pub-kind { position: relative; }
.pub-kind input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pub-kind span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 0; border-radius: 12px; background: var(--surface-2);
  font-size: 14px; font-weight: 800; color: var(--ink-2); cursor: pointer;
  border: 1.5px solid transparent;
}
.pub-kind input:checked + span {
  background: rgba(0, 189, 166, .12); color: var(--brand-deep);
  border-color: var(--brand);
}
.pub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-chip { position: relative; }
.pub-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pub-chip span {
  display: inline-block; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--ink-2);
  border: 1.5px solid transparent; -webkit-tap-highlight-color: transparent;
}
.pub-chip input:checked + span { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.pub-chip input:focus-visible + span { border-color: var(--brand); }

.pub-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.pub-price-yen { font-size: 24px; font-weight: 900; color: var(--coral); }
.pub-price-row input {
  width: 130px; border: 0; background: none; font: inherit;
  font-size: 26px; font-weight: 900; color: var(--coral);
}
.pub-price-row input::placeholder { color: var(--ink-3); font-weight: 700; }
.pub-price-hint { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }
.pub-calc { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.pub-calc-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); padding: 2px 0; }
.pub-calc-row b { color: var(--ink); font-weight: 800; }
.pub-calc-total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 8px; }
.pub-calc-total span { color: var(--ink); font-weight: 800; }
.pub-calc-total b { color: var(--coral); font-size: 16px; font-weight: 900; }

.pub-adv > summary { font-size: 14.5px; color: var(--ink); padding: 4px 2px; }
.pub-sum-hint { margin-left: 8px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.pub-adv-in { padding-top: 10px; }
.pub-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pub-subhead { margin: 16px 2px 6px; font-size: 13.5px; font-weight: 900; color: var(--ink); }
.pub-subhead-sub { color: var(--ink-2); font-weight: 700; font-size: 12.5px; }
.pub-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 20px; }
.pub-pick-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(0, 189, 166, .12); color: var(--brand-deep); font-size: 12px; font-weight: 800; }
.pub-hidden-chk { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pub-addrs { display: grid; gap: 8px; margin-bottom: 8px; }
.pub-addr { position: relative; display: block; }
.pub-addr input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pub-addr-in {
  display: block; padding: 10px 12px; border-radius: 12px; background: var(--surface-2);
  cursor: pointer; border: 1.5px solid transparent;
}
.pub-addr input:checked + .pub-addr-in { border-color: var(--brand); background: rgba(0, 189, 166, .08); }
.pub-addr-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pub-addr-top b { color: var(--ink); }
.pub-mono { font-size: 12px; color: var(--ink-3); }
.pub-addr-in em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.pub-urgent { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.pub-urgent input { margin-top: 3px; }
.pub-urgent-in { display: block; min-width: 0; }
.pub-urgent-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pub-urgent-top b { font-size: 13.5px; color: var(--ink); }
.pub-urgent-in em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.pub-draft-status { display: block; min-height: 18px; margin: 2px 4px 0; font-size: 11.5px; color: var(--ink-3); }

.pub-foot { padding: 8px 0 calc(16px + env(safe-area-inset-bottom)); }
.pub-go {
  display: block; width: 100%; border: 0; background: var(--brand); color: #fff;
  font: inherit; font-size: 16px; font-weight: 900; padding: 14px;
  border-radius: 999px; cursor: pointer; box-shadow: var(--sh-brand);
}
.pub-go:active { transform: translateY(1px); }
.pub-foot-note { margin: 8px 6px 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.55; text-align: center; }

.pub-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px);
  z-index: 80; max-width: 86vw; padding: 10px 18px; border-radius: 999px;
  background: rgba(15, 20, 24, .86); color: #fff; font-size: 13px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: all .25s;
}
.pub-toast.on { opacity: 1; transform: translate(-50%, 0); }
.pub { display: block; }
/* 来源地多选 chip：勾选态由 input:checked + span 控制（同 .pub-chip） */
.pub-chk span { padding: 6px 12px; font-size: 12.5px; }

/* ---- 发需求单页：折叠段（闲鱼式 —— 没填的地方只是一行字） ---- */
.pub-sec {
  background: var(--surface); border-radius: 18px; box-shadow: var(--sh-1);
  margin-bottom: 10px; overflow: hidden;
}
.pub-sec > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 15px 14px; user-select: none; -webkit-tap-highlight-color: transparent;
}
.pub-sec > summary::-webkit-details-marker { display: none; }
.pub-sec-t { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 900; color: var(--ink); }
.pub-req { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--coral); background: rgba(255, 106, 69, .12); border-radius: 5px; padding: 1px 5px; }
.pub-sec-val { margin-left: auto; font-size: 12.5px; color: var(--ink-3); text-align: right; max-width: 55%; }
.pub-sec-val.is-set { color: var(--brand-deep); font-weight: 800; }
.pub-sec > summary::after {
  content: ''; flex: none; width: 7px; height: 7px; margin-left: 8px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform .2s;
}
.pub-sec[open] > summary::after { transform: rotate(45deg); }
.pub-sec[open] > summary { border-bottom: 1px solid var(--line); }
.pub-sec-in { padding: 12px 14px 14px; }
.pub-sec.is-bad { box-shadow: 0 0 0 2px var(--coral) inset; }

/* ---- 选城市页（闲鱼式，2026-09-30 派总第 3 条） ----
   大字「您的位置」+ 重新定位 + 周边城市/按省分组的胶囊网格。
   点任何城市立即生效（写 session 回来源页），选中定位城市时胶囊/大字前是准星图标。 */
.loc-hero {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 2px 6px; padding: 14px;
  background: var(--surface); border-radius: 14px; box-shadow: var(--sh-1);
}
.loc-hero-city { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); min-width: 0; }
.loc-hero-city .ic { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }
.loc-hero-city b { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.loc-hero-city.is-none { color: var(--ink-3); }
.loc-hero-city.is-none b { font-size: 17px; }
.loc-now { padding: 2px 8px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-deep); font-size: 11px; font-weight: 800; flex-shrink: 0; }
.loc-refresh {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; color: var(--brand-deep);
  font-size: 13px; font-weight: 800; cursor: pointer; padding: 6px 4px; flex-shrink: 0;
}
.loc-refresh:disabled { color: var(--ink-3); }
.loc-refresh:active { transform: scale(.95); }
.loc-hint { margin: 0 2px; font-size: 12px; color: var(--ink-3); }
.loc-prov { display: block; margin: 12px 2px 6px; font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.loc-group { margin-bottom: 4px; }
.loc-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-grid a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--sh-1);
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.loc-grid a:active { background: var(--paper-2); }
.loc-grid a .ic { color: var(--brand); }