@import url("tokens.css");
/* 自托管拉丁展示字体 Space Grotesk（数字 .num 用），替代原谷歌字体链接，消除首屏阻塞 */
@import url("fonts/space-grotesk/500.css");
@import url("fonts/space-grotesk/700.css");
/* ---------- 自托管缅甸文字体（多语言：中文/缅文/英文） ---------- */
/* 规避大陆网络访问谷歌字体卡顿；font-display:swap 保证首屏不阻塞、缺字也不白屏 */
@font-face {
  font-family: "Noto Sans Myanmar";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/NotoSansMyanmar-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans Myanmar";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/NotoSansMyanmar-Bold.woff2") format("woff2");
}
/* 仅当界面语言为缅文时启用缅甸字体栈：中文/英文走原字体，缅文走自托管字体 */
body.lang-my { font-family: var(--font-my); }
body.lang-my .num { font-family: var(--font-my); font-variant-numeric: tabular-nums; }

/* 个人中心：语言设置面板 */
.lang-panel { padding: 14px 16px; }
.lang-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lang-name { font-weight: 700; font-size: var(--fs-md); }
.lang-hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.lang-sel {
  font-size: var(--fs-md); padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  max-width: 52%; cursor: pointer;
}


/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,179,71,0.30), transparent 55%),
    radial-gradient(95% 55% at 90% 110%, rgba(22,199,154,0.16), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  font-size: var(--fs-md);
  line-height: 1.5;
}
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: var(--fs-md); color: var(--ink); }
a { color: inherit; text-decoration: none; }

/* ---------- 布局壳（手机视口） ---------- */
.shell { max-width: 460px; margin: 0 auto; min-height: 100vh; position: relative;
  background: linear-gradient(180deg, rgba(255,253,246,0.6), rgba(251,244,228,0.2));
  padding-bottom: 78px; }
#app.no-tabbar { padding-bottom: 0; } /* 社区页隐藏底栏时，去掉为固定底栏预留的空白 */
.appbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bar-grad); color: var(--on-brand);
  padding: max(env(safe-area-inset-top), 30px) var(--s4) var(--s3); backdrop-filter: blur(6px);
}
.appbar .row { display: flex; align-items: center; gap: var(--s3); }
.appbar .city { font-weight: 700; font-size: var(--fs-md); display: flex; align-items: center; gap: 4px; }
.appbar .search {
  flex: 1; height: 38px; border-radius: var(--r-pill);
  background: var(--search-bg); color: var(--search-ink);
  display: flex; align-items: center; gap: 8px; padding: 0 5px 0 14px; font-size: var(--fs-sm);
  box-shadow: var(--sh-1);
}
/* 搜索框右端「搜索」按钮（嵌在框内，主题橙渐变） */
.appbar .search .s-btn {
  margin-left: auto; flex: 0 0 auto;
  height: 29px; padding: 0 15px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, #FF9A3D, #FF6A00); color: #fff;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(255,106,0,0.35);
  user-select: none;
}
.appbar .search:active .s-btn { filter: brightness(.94); }
.appbar .ico {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.22); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.appbar .brand { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-2xl);
  color: #fff; letter-spacing: 1px; margin: 0 0 var(--s1); text-shadow: 0 2px 8px rgba(180,90,0,0.25); }
.appbar .sub { color: rgba(255,255,255,0.92); font-size: var(--fs-sm); margin-bottom: var(--s3); }
/* 首页顶栏：标题 + 副标题合并成一行（底部对齐，窄屏副标题省略号） */
.brand-row { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: nowrap; }
.brand-row .brand { margin: 0; }
.brand-row .sub { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 分类专属顶栏：更矮、隐藏大标题/副标题 */
.cat-appbar { padding: max(env(safe-area-inset-top), 14px) var(--s4) 12px; }
.cat-appbar .row { gap: var(--s2); }
.cat-appbar .back-ico {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.22); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; font-weight: 700; text-decoration: none; flex: 0 0 auto;
}
.cat-appbar .cat-name { flex: 1; color: #fff; font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.5px; }
.cat-appbar .search { margin-top: 10px; }

/* ---------- 分区 ---------- */
.section { padding: var(--s4); }
.h-title { display: flex; align-items: center; justify-content: space-between; margin: var(--s4) var(--s4) var(--s2); }
.h-title h2 { font-size: var(--fs-lg); font-weight: 700; }
.h-title .more { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- 分类宫格 ---------- */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); padding: 0 var(--s4); }
.cat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s3) 0; }
.cat .ic {
  width: 48px; height: 48px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: var(--sh-1); position: relative; overflow: hidden;
}
.cat .ic::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 30% 10%, rgba(255,179,71,0.5), transparent 60%); opacity: .9; }
.cat .ic span { position: relative; }
.cat .lb { font-size: var(--fs-xs); color: var(--ink-2); }

/* ---------- 卡片 ---------- */
.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r);
  box-shadow: var(--sh-1); overflow: hidden; }
/* ---------- 帖子瀑布流卡片（仿 58 同城：两列网格 + 顶部大图 + 红色价格 ---------- */
#feed { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); padding: 0 var(--s3) var(--s4); align-items: start; }
.post { margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.post .thumb { width: 100%; height: 116px; flex: none; position: relative;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); display: flex;
  align-items: center; justify-content: center; font-size: 30px; color: var(--brand); overflow: hidden; }
.post .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 图片加载失败/无图：用子类目图标兜底，避免出现空白块 */
.post .thumb.imgfail { background: linear-gradient(135deg, #FFE9CC, #FFD9A6); font-size: 32px; }
.post .thumb.imgfail::after { content: attr(data-fallback); }
/* 图片左上角类目角标 */
.post .pc-corner { position: absolute; left: 0; bottom: 6px; max-width: 88%; padding: 2px 8px;
  background: rgba(0,0,0,.55); color: #fff; font-size: var(--fs-xs); font-weight: 600;
  border-radius: 0 var(--r-pill) var(--r-pill) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post .body { padding: 10px 10px 12px; width: 100%; min-width: 0; }
.post .ttl { font-weight: 700; font-size: var(--fs-md); line-height: 1.35; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
/* 醒目红色价格 */
.post .pc-price { color: var(--danger); font-weight: 800; font-size: var(--fs-lg); line-height: 1.25; margin-bottom: 4px;
  word-break: break-all; }
.post .ct { color: var(--ink-2); font-size: var(--fs-xs); margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-xs); }
/* 帖子卡片右下角浏览数（👁 + 次数），margin-left:auto 推到行最右 */
.pc-views { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.tag { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: #B5610A; font-weight: 600; }

/* ===== 外卖模块（复用现有紫色主题变量，不新增配色）===== */
/* 外卖商家列表：通栏横向列表，每行一商家 */
.tk-list { display: block; }
.tk-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 10px; margin-bottom: 10px; box-shadow: var(--sh-1); cursor: pointer; transition: background .15s; }
.tk-row:active { background: var(--surface-2); }
.tk-thumb { width: 72px; height: 72px; flex: none; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--brand); }
.tk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tk-row-info { flex: 1; min-width: 0; }
.tk-row-name { font-weight: 800; font-size: var(--fs-md); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-row-line { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 3px; }
.tk-row-line > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.tk-callbtn { display: inline-flex; align-items: center; gap: 4px; background: var(--brand); color: #fff; border-radius: 999px; padding: 5px 12px; font-size: var(--fs-xs); font-weight: 600; text-decoration: none; flex: none; white-space: nowrap; }
.tk-shop-head { display: block; margin-bottom: 12px; }
.tk-shop-cover-lg { width: 100%; height: 150px; border-radius: var(--r); overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); display: flex; align-items: center; justify-content: center; font-size: 48px; color: var(--brand); margin-bottom: 10px; }
.tk-shop-cover-lg img { width: 100%; height: 100%; object-fit: cover; }
.tk-shop-name { font-weight: 800; font-size: var(--fs-lg); margin-bottom: 4px; }
.tk-shop-intro { color: var(--ink-2); font-size: var(--fs-sm); margin: 2px 0 6px; }
.tk-shop-row { color: var(--ink-2); font-size: var(--fs-sm); margin: 3px 0; }
.tk-shop-line { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.tk-shop-line > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.tk-dish { display: flex; flex-wrap: wrap; gap: 10px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 10px; margin-bottom: 10px; box-shadow: var(--sh-1); }
.tk-dish-img { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--brand); flex: none; }
.tk-dish-img img { width: 100%; height: 100%; object-fit: cover; }
.tk-dish-body { flex: 1; min-width: 0; }
.tk-dish-name { font-weight: 700; overflow-wrap: anywhere; word-break: break-word; line-height: 1.4; }
.tk-dish-desc { color: var(--muted); font-size: var(--fs-xs); margin: 2px 0 6px; }
.tk-dish-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-price { color: var(--danger); font-weight: 800; }
.tk-qty { display: flex; align-items: center; gap: 10px; }
.tk-qty button { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 16px; font-weight: 700; }
.tk-q { min-width: 18px; text-align: center; font-weight: 700; }
/* 外卖菜品库存：售罄变灰 + 库存文本 + 已售罄徽标 */
.tk-stock { font-size: var(--fs-xs); color: var(--muted); flex: none; }
.tk-dish.soldout { opacity: .55; filter: grayscale(1); }
.tk-dish.soldout .tk-dish-img { background: var(--surface-2); color: var(--muted); }
.tk-soldout-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--muted); color: #fff; font-size: var(--fs-xs); font-weight: 700; vertical-align: middle; }
/* 百货商家：售罄态（信息流卡片 / 详情页 / 公开店铺页 / 商家中心列表） */
.card.post.soldout { opacity: .6; filter: grayscale(1); }
.card.post.soldout .thumb { position: relative; }
.pc-soldout { position: absolute; left: 8px; bottom: 8px; background: #e23b3b; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; z-index: 2; }
.sv-soldout-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #e23b3b; color: #fff; font-size: 13px; font-weight: 700; }
.sv-pill.sv-buy.disabled { background: var(--muted); opacity: .7; cursor: not-allowed; }
.ms-p.soldout { opacity: .6; filter: grayscale(1); }
.ms-p-media { position: relative; }
.ms-soldout-badge { position: absolute; left: 6px; top: 6px; background: #e23b3b; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; z-index: 2; }
.tk-stock-line { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.tk-qty button:disabled { background: var(--line-soft); color: var(--muted); cursor: not-allowed; opacity: .6; }
.tk-cartbar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -2px 8px rgba(0, 0, 0, .06); }
.tk-cb-info { font-weight: 700; }
.tk-total { text-align: right; font-weight: 700; margin: 10px 0; }
.tk-order { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 12px; margin-bottom: 10px; box-shadow: var(--sh-1); }
.tk-o-top { display: flex; justify-content: space-between; font-weight: 700; }
.tk-o-status { color: var(--brand); }
.tk-o-items { color: var(--ink-2); font-size: var(--fs-sm); margin: 6px 0; }
.tk-o-meta { color: var(--muted); font-size: var(--fs-xs); margin-bottom: 6px; }
.tk-o-recv { margin: 6px 0 2px; padding: 8px 10px; background: rgba(84,74,183,0.07); border-radius: var(--r, 8px); }
.tk-o-recv-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.tk-o-recv-h > span:first-child { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.tk-o-recv-copy { margin-left: 8px; padding: 2px 12px; font-size: 12px; line-height: 1.5; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface); color: var(--brand); cursor: pointer; transition: background .15s; }
.tk-o-recv-copy:active { background: rgba(84,74,183,0.12); }
.tk-o-recv-b { display: flex; flex-direction: column; gap: 3px; }
.tk-o-recv-i { display: flex; align-items: baseline; font-size: var(--fs-xs); line-height: 1.55; }
.tk-o-recv-l { flex: 0 0 64px; color: var(--muted); }
.tk-o-recv-v { flex: 1 1 auto; color: var(--ink-2); word-break: break-all; }
.tk-o-ops { display: flex; gap: 8px; }
.tk-st.on { color: var(--mint); font-weight: 700; } .tk-st.off { color: var(--muted); }
.tk-add { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 12px; margin-bottom: 12px; }
.sf-title { font-weight: 700; margin-bottom: 8px; }
/* v75 商家商品/菜品卡自适应：按钮组整体换行到第二行（flex-basis:100%），文字区永远占满整行不再被挤成竖排；窄屏时按钮自身可换行 */
.tk-d-ops { flex: 1 1 100%; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; padding-top: 8px; border-top: 1px dashed var(--line-soft); margin-top: 2px; }
.tk-d-ops .btn { flex: none; white-space: nowrap; }
/* 商家中心：新订单提醒开关 */
.mch-set { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 10px 12px; margin-bottom: 12px; box-shadow: var(--sh-1); }
.mch-set .sw { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.mch-set .sw input { width: 18px; height: 18px; accent-color: var(--brand); }
.mch-set-tip { color: var(--muted); font-size: var(--fs-xs); margin-left: auto; }
/* 底栏「消息」红点 */
.tab-badge { position: absolute; top: 2px; right: 14px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.tabbar a { position: relative; }
/* 消息中心：外卖订单通知卡片 */
.notif-card { background: linear-gradient(135deg, rgba(124,77,255,.10), rgba(124,77,255,.04)); border: 1px solid var(--brand); }
.notif-card .nm { font-weight: 800; }
.tag.vip { background: linear-gradient(135deg,#FFE2B0,#FFC266); color: #9A4E00; }
.tag.official { background: var(--mint); color: #fff; }
/* 入驻商家城市标签（跟随「商家」分类标签右侧显示，浅米黄底+橙图标） */
.tag.loc { background: #FAEEDA; color: #633806; font-weight: 500; }
/* 交易类型统一 badge（与类目联动，受控枚举） */
.tt { display:inline-block; font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); color:#fff; font-weight:700; margin-right:6px; white-space:nowrap; }
.tt-sale { background:#1fb46c; } .tt-rent { background:#2f8ce0; } .tt-urgent { background:#e8403a; }
.tt-want { background:#f0972a; } .tt-swap { background:#9b59b6; } .tt-recruit { background:#2f8ce0; }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 var(--s5); border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-md);
  background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-2); transition: transform .12s; }
.btn:active { transform: scale(.97); }
.btn.block { width: 100%; }
.btn.ghost { background: var(--surface); color: var(--brand); border: 1.5px solid var(--brand); box-shadow: none; }
.btn.mint { background: var(--mint); box-shadow: 0 6px 18px rgba(22,199,154,0.25); }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------- 底部导航 ---------- */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 460px; z-index: 30; display: flex;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--muted); font-size: 10px; padding: 6px 0; }
.tabbar a .ic { font-size: 20px; }
.tabbar a.on { color: var(--brand); }
/* 中间「发布」大橙钮（参考58风格）：圆形凸出底栏 */
.tabbar a.pub { flex: 1; }
.tabbar .pub-btn { display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-top: -24px; border-radius: 50%;
  background: var(--bar-grad); color: #fff; font-size: 15px; font-weight: 700;
  letter-spacing: 1px; border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(255,140,0,0.45); }

/* ---------- 通用块 ---------- */
.panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--sh-1);
  padding: var(--s4); margin: 0 var(--s4) var(--s4); }
.field { margin-bottom: var(--s4); }
.field label { display: block; font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 6px; font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%; height: 46px; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  padding: 0 14px; background: var(--bg-1); outline: none; transition: border-color .15s; }
.field textarea { height: 110px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); }
/* 位置坐标模块（需求 D：发布带坐标 + 详情唤起谷歌导航；坐标为单整串输入框，样式继承 .field input） */
.loc-field #locCoord { margin-top: 8px; }
.loc-field .loc-hint { font-size: 12px; color: var(--ink-3, #98a); margin-top: 6px; line-height: 1.5; }
.loc-field #locGet { margin-top: 2px; }
/* 详情页位置块（沉浸详情为深色背景，沿用 sv-* 配色） */
.sv-loc { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.sv-loc-coords { font-size: var(--fs-sm); color: #C9CCD2; background: rgba(255,255,255,.06); padding: 8px 12px; border-radius: var(--r-sm); }
.sv-loc .btn { width: 100%; }
.loc-get-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.loc-get-btn .loc-get-hint { font-weight: 700; }
.loc-edit { margin: 12px 0; }
.loc-edit .loc-edit-acts { display: flex; gap: 10px; margin-top: 8px; }
.loc-edit .loc-edit-acts .btn { flex: 1; }
/* 定位失败引导弹窗（权限被拒/系统定位未开启：分平台图文引导 + 尽力跳系统设置 + 一键重试） */
.loc-guide-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.loc-guide { position: relative; background: #fff; border-radius: 14px; padding: 18px 16px 16px; max-width: 340px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.loc-guide-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: #222; padding-right: 22px; }
.loc-guide-steps { font-size: 13px; line-height: 1.7; color: #555; white-space: pre-line; }
.loc-guide-acts { display: flex; gap: 10px; margin-top: 14px; }
.loc-guide-acts .btn { flex: 1; }
.loc-guide-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 15px; color: #98a; padding: 4px 6px; cursor: pointer; }
.seg { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sub-seg { margin-bottom: var(--s2); }
.sub-seg button { padding: 7px 12px; }
/* 子分类默认只显示第一行，点「全部」展开 */
.sub-seg.collapsed { max-height: 40px; overflow: hidden; }
.seg button { padding: 9px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--bg-1); font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.seg button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.seg button { position: relative; }
.seg-badge { position: absolute; top: -7px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; background: #e53935; color: #fff; border: 1.5px solid #fff; border-radius: 9px; font-size: 11px; line-height: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: none; z-index: 2; }
.seg-badge[hidden] { display: none; }
/* 子分类平铺网格：带图标、全部展开不折叠（≥900px 桌面端一行可放更多） */
.sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 var(--s4) var(--s3); }
.sub-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 13px 4px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; }
.sub-cell .si { font-size: 26px; line-height: 1; }
.sub-cell .sn { font-size: var(--fs-xs); color: var(--ink-2); text-align: center; }
.sub-cell.on { border-color: var(--brand); background: #fff5f0; }
.sub-cell.on .sn { color: var(--brand); font-weight: 600; }
/* 默认最多 3 行：超出的格子折叠，「更多」按钮展开 */
.sub-cell.extra { display: none; }
.sub-grid.expanded .sub-cell.extra { display: flex; }
.sub-more { display: block; width: calc(100% - 2 * var(--s4)); margin: 0 var(--s4) var(--s3); padding: 10px 0;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; font-size: var(--fs-sm); color: var(--ink-2); text-align: center; }
.sub-more:active { background: var(--surface-2); }

/* 商家页：拼多多式横向滑动子分类导航 */
.hnav { display: flex; gap: 8px; overflow-x: auto; padding: 6px var(--s4) 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hnav::-webkit-scrollbar { display: none; }
.hnav-item { flex: 0 0 auto; padding: 8px 16px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.hnav-item.on { border-color: var(--brand); background: #fff5f0; color: var(--brand); font-weight: 600; }
.hnav-item:active { transform: scale(.96); }

/* 本地服务主类目（二级）chips 行 */
.sub-groups { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px var(--s4) 10px; }
.sub-groups .grp { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); color: var(--ink-2); }
.sub-groups .grp .si { font-size: 16px; line-height: 1; }
.sub-groups .grp.on { border-color: var(--brand); background: #fff5f0; color: var(--brand); font-weight: 600; }
/* 发帖表单里的主类目分段（横向可换行） */
.grp-seg { flex-wrap: wrap; }
.uploader { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.up-grid { display:flex; flex-wrap:wrap; gap:8px; }
.up-item { position:relative; width:82px; height:82px; border-radius:12px; overflow:hidden; background:var(--surface-3); box-shadow:var(--sh-1); flex:none; }
.up-item img { width:100%; height:100%; object-fit:cover; display:block; }
.up-item.video { outline:2px solid #FF6A00; }
.up-vic { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none; }
.up-prev { width:100%; height:100%; object-fit:cover; background:#000; display:block; }
.up-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:rgba(0,0,0,.5); color:#fff; font-size:11px; }
.up-prog { width:78%; height:6px; background:rgba(255,255,255,.3); border-radius:4px; overflow:hidden; }
.up-prog > i { display:block; height:100%; width:0; background:#fff; border-radius:4px; transition:width .15s; }
.up-pct { font-variant-numeric:tabular-nums; }
/* 社区发布上传/转码进度条 */
.cm-upprog { height:6px; background:var(--line, #eee); border-radius:4px; overflow:hidden; margin:10px 0 0; }
.cm-upprog > i { display:block; height:100%; width:0; background:var(--brand, #FF6A00); border-radius:4px; transition:width .15s; }
.up-del { position:absolute; top:3px; right:3px; width:20px; height:20px; border:none; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:14px; line-height:18px; cursor:pointer; padding:0; }
.uploader .up-add, .va-form .up-add { width:82px; height:82px; margin-bottom:0; border:1.5px dashed #FF8A3D; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#FF6A00; cursor:pointer; background:var(--surface); font-size:12px; gap:3px; flex:none; }
.up-add .up-plus { font-size:24px; line-height:1; }
.up-add .up-tip { text-align:center; }
/* 图片上传区固定违规提醒 */
.upload-warn { font-size:12px; line-height:1.4; color:#c0392b; background:#fff5f3; border:1px solid #f3c2bb; border-radius:8px; padding:6px 9px; margin:6px 0 2px; }
/* 后台敏感词管理 */
.sens-add { display:flex; gap:8px; margin:4px 0 6px; flex-wrap:wrap; }
.sens-add input { flex:1 1 160px; min-width:120px; padding:8px 10px; border:1px solid var(--line,#e3e3e8); border-radius:8px; font-size:14px; }
.sens-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line,#eee); border-radius:8px; margin-bottom:6px; background:var(--surface); }
.sens-word { font-weight:600; }
.sens-cat { font-size:12px; color:#fff; background:#FF6A00; border-radius:6px; padding:2px 8px; }
.sens-item .sens-del { margin-left:auto; }

/* 店铺基础信息 */
.mch-tip { font-size:12px; color:var(--muted); padding:8px 2px 0; line-height:1.5; }
.field .req { color:var(--danger); }

/* 封面正方形裁剪弹窗 */
.crop-mask { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:2000; padding:16px; }
.crop-mask.show { display:flex; }
.crop-box { background:var(--surface); border-radius:16px; padding:16px; width:min(340px,92vw); box-shadow:var(--sh-2); }
.crop-title { font-weight:700; font-size:15px; margin-bottom:12px; text-align:center; }
.crop-view { position:relative; width:280px; height:280px; max-width:80vw; max-height:80vw; margin:0 auto; overflow:hidden; background:#111; border-radius:12px; touch-action:none; cursor:grab; }
.crop-view:active { cursor:grabbing; }
.crop-view img { position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.crop-zoom { width:100%; margin:14px 0 6px; accent-color:var(--brand); }
.crop-tip { font-size:12px; color:var(--muted); text-align:center; margin-bottom:12px; }
.crop-ops { display:flex; gap:10px; justify-content:center; }
.crop-ops .btn { min-width:96px; }


/* 本地服务专页：左侧竖排主类目 + 右侧子类目（仿58同城） */
.cat-split { display: flex; gap: 10px; align-items: flex-start; padding: 4px var(--s4) 0; }
.cat-split .side { width: 92px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 8px; max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: none; }
.cat-split .side::-webkit-scrollbar { display: none; }
.cat-split .side .grp { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; font-size: 12px; color: var(--ink-2); }
.cat-split .side .grp .si { font-size: 19px; line-height: 1; }
.cat-split .side .grp.on { border-color: var(--brand); background: #fff5f0; color: var(--brand); font-weight: 600; }
.cat-split .main { flex: 1; min-width: 0; }
.cat-split .main .sub-grid { padding: 0; }
.cat-split .main .sub-more { width: 100%; margin: 0 0 var(--s3); }

/* ---------- 提示条 ---------- */
.banner { margin: var(--s4); padding: 12px 14px; border-radius: var(--r); font-size: var(--fs-sm);
  background: linear-gradient(135deg, var(--surface-3), #FFE9CC); color: #9A4E00;
  border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.banner.mint { background: linear-gradient(135deg, #DFFFF5, #C5F4E8); color: var(--mint-ink); }

/* ---------- 余额卡 ---------- */
.bal { background: var(--bar-grad); color: #fff; border-radius: var(--r-lg); padding: var(--s5);
  box-shadow: var(--sh-3); margin: var(--s4); position: relative; overflow: hidden; }
.bal::after { content:""; position:absolute; right:-30px; top:-30px; width:140px; height:140px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%); }
.bal .k { opacity: .9; font-size: var(--fs-sm); }
.bal .v { font-family: var(--font-num); font-size: var(--fs-3xl); font-weight: 700; margin: 2px 0; }
.bal .v small { font-size: var(--fs-md); font-weight: 500; opacity: .85; margin-left: 6px; }
.bal .row2 { display: flex; gap: var(--s5); margin-top: 8px; }
.bal .row2 div .k { font-size: var(--fs-xs); opacity: .85; }
.bal .row2 div .v { font-family: var(--font-num); font-size: var(--fs-lg); font-weight: 700; }

/* ---------- 详情 ---------- */
.detail { padding: var(--s4); }
.detail h1 { font-size: var(--fs-xl); font-weight: 800; margin-bottom: var(--s2); }
.detail .cc { display: flex; gap: var(--s2); align-items: center; color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s4); }
.detail .content { white-space: pre-wrap; color: var(--ink-2); line-height: 1.7; }
.detail .media { margin: var(--s4) 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.detail .media img, .detail .media video { width: 100%; border-radius: 12px; }
.detail .seller { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); background: var(--surface); border-radius: var(--r); border: 1px solid var(--line-soft); margin: var(--s4) 0; }
.detail .seller .av { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.detail .seller .nm { font-weight: 700; }
.detail .seller .meta { color: var(--muted); font-size: var(--fs-xs); }
.detail .acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
/* 主操作「联系卖家/删除帖子」独占整行，避免与次级按钮争抢宽度导致文字竖排 */
.detail .acts #contact, .detail .acts #del { flex: 0 0 100%; }
/* 次级按钮：等分整行、单行不折行（按钮数 2 或 3 都能自适应均分） */
.detail .acts #order, .detail .acts #fav, .detail .acts #follow { flex: 1 1 0; min-width: 0; white-space: nowrap; padding: 0 var(--s2); font-size: var(--fs-sm); }

/* ---------- 聊天 ---------- */
.conv { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--surface);
  border-bottom: 1px solid var(--line-soft); }
.conv .av { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.conv .nm { font-weight: 700; }
.conv .last { color: var(--muted); font-size: var(--fs-xs); }
.chatbox { height: calc(100vh - 220px); overflow-y: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.msg { max-width: 76%; padding: 10px 13px; border-radius: 16px; font-size: var(--fs-md); line-height: 1.5; }
.msg.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.msg.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; }
.composer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 460px;
  display: flex; gap: var(--s2); padding: 10px var(--s4) calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-top: 1px solid var(--line-soft); }
.composer input { flex: 1; height: 44px; border-radius: var(--r-pill); border: 1.5px solid var(--line); padding: 0 16px; background: var(--bg-1); }
.composer .send { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 18px; }

/* ---------- 杂项 ---------- */
.empty { text-align: center; color: var(--muted); padding: 40px var(--s4); }
.center-screen { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: var(--s5); }
/* ---------- 登录/注册页 · 星河旗舰夜色背景（动态火星粒子 + 极光，2026-10-19） ---------- */
.center-screen.night {
  position: relative; overflow: hidden; color: #F5ECF9;
  background: linear-gradient(165deg, #150726 0%, #341058 42%, #4A148C 68%, #12051F 100%);
}
.center-screen.night .fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.center-screen.night .fx-aurora {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  filter: blur(60px); opacity: .4; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 15%, rgba(123,31,162,.5) 35%, rgba(248,68,245,.28) 50%, rgba(255,183,77,.22) 62%, transparent 85%);
  animation: fxAurora 14s ease-in-out infinite alternate;
}
.center-screen.night .fx-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .32; z-index: 0; pointer-events: none; }
.center-screen.night .fx-orb.o1 { width: 340px; height: 340px; left: -100px; top: 10%; background: #7B1FA2; animation: fxD1 10s ease-in-out infinite alternate; }
.center-screen.night .fx-orb.o2 { width: 300px; height: 300px; right: -80px; bottom: 14%; background: #F844F5; animation: fxD2 12s ease-in-out infinite alternate; }
.center-screen.night > *:not(.fx-canvas):not(.fx-aurora):not(.fx-orb) { position: relative; z-index: 2; }
.center-screen.night .logo { color: #FFE9A8; text-shadow: 0 0 26px rgba(255,213,79,.45), 0 2px 12px rgba(0,0,0,.55); }
.center-screen.night .logo-sub { color: #CDA9E8; }
.center-screen.night .seg button { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #F5ECF9; backdrop-filter: blur(8px); }
.center-screen.night .seg button.on {
  background: linear-gradient(135deg, #f844f5, #af0eac); color: #fff; border-color: transparent;
  box-shadow: 0 6px 20px rgba(175,14,172,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.center-screen.night .panel {
  position: relative; background: rgba(255,255,255,.10); border: 1px solid transparent; border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background-clip: padding-box;
}
/* 用户选定 V3：登录/注册合并进卡片 · 霓虹流光胶囊（2026-10-19，仅动该控件） */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.center-screen.night .neon-wrap {
  position: relative; border-radius: 999px; padding: 2px; margin-bottom: 18px;
  background: conic-gradient(from var(--ang, 0deg), #F844F5, #FFD54F, #7B1FA2, #F844F5);
  box-shadow: 0 6px 22px rgba(216,64,240,.30);
  animation: fxNeon 4s linear infinite;
}
@keyframes fxNeon { to { --ang: 360deg; } }
.center-screen.night .neon-pill { display: flex; background: rgba(18,6,36,.85); border-radius: 999px; padding: 4px; }
.center-screen.night .neon-pill button {
  flex: 1; height: 42px; border: none; border-radius: 999px; background: transparent;
  color: rgba(255,255,255,.72); font-size: 15px; font-weight: 700; letter-spacing: 2px; cursor: pointer; transition: .25s;
}
.center-screen.night .neon-pill button.on {
  background: linear-gradient(90deg, rgba(194,24,216,.95), rgba(248,68,245,.95));
  color: #fff; box-shadow: 0 4px 16px rgba(216,64,240,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.center-screen.night .neon-pill button:not(.on):hover { color: #fff; }
/* 卡片金紫发光描边 */
.center-screen.night .panel::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 21px; z-index: -1;
  background: linear-gradient(135deg, rgba(255,213,79,.55), transparent 40%, transparent 60%, rgba(248,68,245,.45));
}
/* 用户反馈：输入区文字加深（白底粗标签 + 高亮占位） */
.center-screen.night .field label { color: #FFFFFF; font-weight: 700; }
.center-screen.night .field input { border-color: rgba(255,255,255,.38); background: rgba(18,6,36,.55); color: #FFFFFF; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.center-screen.night .field input::placeholder { color: rgba(255,255,255,.95); font-weight: 600; -webkit-text-stroke: .2px rgba(255,255,255,.35); }
.center-screen.night .field input:focus { border-color: #f844f5; box-shadow: 0 0 0 3px rgba(248,68,245,.22); }
.center-screen.night .btn.block {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #f844f5, #af0eac);
  box-shadow: 0 10px 28px rgba(175,14,172,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.center-screen.night .btn.block::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: fxSweep 3.2s ease-in-out infinite;
}
.center-screen.night .muted { color: #D9C6EA; }
@keyframes fxAurora { 0% { transform: rotate(-6deg) translateY(-2%); } 100% { transform: rotate(5deg) translateY(3%); } }
@keyframes fxD1 { to { transform: translate(50px, 66px) scale(1.15); } }
@keyframes fxD2 { to { transform: translate(-56px, -48px) scale(.9); } }
@keyframes fxSweep { 0%, 55% { left: -80%; } 85%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .center-screen.night .fx-aurora, .center-screen.night .fx-orb { animation: none; }
  .center-screen.night .btn.block::after { animation: none; display: none; }
  .center-screen.night .neon-wrap { animation: none; }
  .center-screen.night .app-badge { animation: none; }
}
/* 登录/注册底部：同意条款勾选行（复用原 .muted 字号，深紫夜下提亮） */
.center-screen.night .agree-row { margin-top: 12px; display: flex; justify-content: center; }
.center-screen.night .agree-box { display: flex; justify-content: center; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: var(--fs-xs); line-height: 1.55; color: rgba(255,255,255,.72); user-select: none; -webkit-tap-highlight-color: transparent; }
.center-screen.night .agree-box input { position: absolute; opacity: 0; width: 0; height: 0; }
.center-screen.night .agree-check { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 5px; background: rgba(255,255,255,.06); position: relative; transition: all .18s; }
.center-screen.night .agree-box input:checked + .agree-check { background: linear-gradient(135deg,#F844F5,#FF6A3D); border-color: transparent; }
.center-screen.night .agree-box input:checked + .agree-check::after { content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.center-screen.night .agree-link { color: #FFD54F; text-decoration: none; font-weight: 600; }
.center-screen.night .agree-link:hover { text-decoration: underline; }
/* 登录页顶部 App 图标（方案 B 玻璃浮牌，比「同城街」三字略大） */
.center-screen.night .app-badge { width: 144px; height: 144px; margin: 0 auto 16px; border-radius: 39px;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 40px rgba(0,0,0,.4); animation: flY 3.6s ease-in-out infinite; }
.center-screen.night .app-badge img { width: 108px; height: 108px; border-radius: 27px; display: block;
  box-shadow: 0 3px 14px rgba(0,0,0,.35); }
@keyframes flY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* 登录页右上角语言下拉（🌐 语言 ▾，点击展开，立即切换，锚定 460px 壳右上角）
   注意：.lang-dd 是 .center-screen 直接子元素，必须用 #app 前缀（1,3,0）压过 433 行 > *:not()x3（0,5,0）的 position:relative；
   其孙元素 .dd-menu 不在 > * 直接子范围，无需 #app 前缀 */
#app .center-screen.night .lang-dd { position: absolute; top: max(env(safe-area-inset-top), 14px); right: 14px; z-index: 6; }
.center-screen.night .lang-dd-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: rgba(255,255,255,.82);
  font-size: 13px; font-weight: 700; line-height: 1.2; padding: 7px 12px; border-radius: 999px;
  transition: .2s; white-space: nowrap; }
.center-screen.night .lang-dd-toggle:hover { background: rgba(18,6,36,.55); border-color: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; }
.center-screen.night .lang-dd-toggle .globe { font-size: 14px; }
.center-screen.night .lang-dd-toggle .car { font-size: 10px; opacity: .8; transition: transform .2s; }
.center-screen.night .lang-dd-toggle[aria-expanded="true"] .car { transform: rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 158px;
  background: #180b2b; transform: translateZ(0); border-radius: 14px; padding: 6px;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 30px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-8px) scale(.98); visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 50; }
.dd-menu.open { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
.dd-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  border: none; background: transparent; color: rgba(255,255,255,.82); cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 9px; transition: .15s; }
.dd-menu button:hover { background: rgba(255,255,255,.08); color: #fff; }
.dd-menu button.on { background: linear-gradient(90deg, rgba(194,24,216,.95), rgba(248,68,245,.95));
  color: #fff; box-shadow: 0 2px 10px rgba(216,64,240,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.dd-menu button .ck { font-size: 12px; }
/* 注册页图形验证码（V3 大图块：深紫玻璃卡 + 刷新钮 + 顶部高光） */
.center-screen.night .cap-field { display: none; }     /* 仅注册模式显示，由 JS 切 display */
.center-screen.night .cap-big { border: 1.5px solid rgba(255,255,255,.38); border-radius: 12px; overflow: hidden;
  cursor: pointer; background: rgba(18,6,36,.55); margin-bottom: 14px; position: relative; }
.center-screen.night .cap-big img { width: 100%; height: 64px; object-fit: cover; display: block; }
.center-screen.night .cap-big .refresh { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.center-screen.night .cap-big .mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%); pointer-events: none; }
/* 未勾选时提交按钮视觉禁用（仍可点击以触发提示） */
.center-screen.night .btn.block.disabled-look { opacity: .42; filter: grayscale(.35); }
.logo { font-family: var(--font-serif); font-size: 34px; font-weight: 800; color: var(--brand); text-align: center; margin-bottom: 4px; }
.logo-sub { text-align: center; color: var(--muted); margin-bottom: var(--s6); font-size: var(--fs-sm); }
.toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 10000; /* 高于全部弹窗遮罩(crop-mask 2000/各 mask 999~9999)，弹窗内操作提示不被遮挡 */
  background: rgba(42,36,16,0.92); color: #fff; padding: 10px 16px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); box-shadow: var(--sh-3); max-width: 90%; text-align: center; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-weight: 600; margin-bottom: var(--s2); }
.muted { color: var(--muted); }
.divider { height: 1px; background: var(--line-soft); margin: var(--s3) 0; }

/* ---------- 会员中心 / VIP ---------- */
.vip-hero { display: flex; align-items: center; gap: var(--s3); margin: var(--s4);
  background: var(--bar-grad); color: #fff; border-radius: var(--r-lg); padding: var(--s5);
  box-shadow: var(--sh-3); position: relative; overflow: hidden; }
.vip-hero::after { content: ""; position: absolute; right: -28px; top: -28px; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 70%); }
.vip-badge { width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,0.22); border: 2px solid rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-num);
  font-weight: 700; font-size: var(--fs-xl); }
.vip-now { font-weight: 700; font-size: var(--fs-md); }
.vip-gold { font-family: var(--font-num); font-weight: 700; font-size: var(--fs-xl); text-align: right; flex: none; }
.vip-gold small { font-size: var(--fs-xs); font-weight: 500; opacity: .85; display: block; }
.vip-cycle { margin: 0 var(--s4) var(--s3); }
.tier { position: relative; background: var(--surface); border: 1.5px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: var(--s5); margin: 0 var(--s4) var(--s4); overflow: hidden; }
.tier.on { border-color: var(--mint); background: var(--surface-2); box-shadow: 0 6px 18px rgba(22,199,154,0.18); }
.tier.hot { border-color: var(--brand); box-shadow: var(--sh-2); }
.tier .ribbon { position: absolute; top: 12px; right: -34px; transform: rotate(45deg); width: 130px; text-align: center;
  background: var(--brand); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 4px 0; letter-spacing: 1px; }
.tier .t-name { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.tier .t-price { font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 700; color: var(--brand); margin: 6px 0 var(--s3); }
.tier.hot .t-price { color: #E2740C; }
.tier .benefits { list-style: none; margin: 0 0 var(--s4); display: flex; flex-direction: column; gap: 8px; }
.tier .benefits li { position: relative; padding-left: 22px; font-size: var(--fs-sm); color: var(--ink-2); }
.tier .benefits li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--mint); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* ---------- 我的页功能宫格 ---------- */
.my-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 var(--s4) var(--s4); }
.my-grid .mg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--sh-1); text-decoration: none; transition: transform .12s; }
.my-grid .mg:active { transform: scale(.96); }
.my-grid .ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; }
.my-grid .mg:nth-child(1) .ico { background: linear-gradient(135deg,#FF9A3D,#FF6A00); }
.my-grid .mg:nth-child(2) .ico { background: linear-gradient(135deg,#3DCBFF,#1E9CFF); }
.my-grid .mg:nth-child(3) .ico { background: linear-gradient(135deg,#FFD23D,#FFA600); }
.my-grid .mg:nth-child(4) .ico { background: linear-gradient(135deg,#FF6B6B,#E23B3B); }
.my-grid .lb { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }
.btn.sm { height: 32px; padding: 0 12px; font-size: var(--fs-xs); border-radius: var(--r-pill); }


/* VIP 徽章：与会员中心页一致——圆形「V{tier}」（52px 圆、白底半透明、白描边），三档配色区分 */
.lv-badge { position: absolute; top: 14px; right: 14px; z-index: 2; width: 52px; height: 52px; flex: none;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; font-size: var(--fs-xl);
  border: 2px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.22); color: #fff; }
/* 等级配色：V1 青铜(免费) / V2 白银 / V3 黄金 ——「我的」页与会员中心统一 */
.lv-badge.lv1, .vip-badge.lv1 { background: linear-gradient(135deg,#b9c0c8,#7e8893); color:#2f3742; border-color:rgba(255,255,255,0.7); }
.lv-badge.lv2, .vip-badge.lv2 { background: linear-gradient(135deg,#fbfdff,#cfd8e3); color:#3a4654; border-color:rgba(255,255,255,0.85); box-shadow:0 3px 12px rgba(150,170,200,0.45); }
.lv-badge.lv3, .vip-badge.lv3 { background: linear-gradient(135deg,#ffe9a8,#f6b42e 60%,#e2930c); color:#6b3d00; border-color:rgba(255,255,255,0.78); box-shadow:0 3px 12px rgba(220,160,20,0.45); }

/* ---------- 超管后台 ---------- */
.admin-tabs { margin: 0 var(--s4); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-tabs button { white-space: nowrap; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 var(--s4); }
.stat-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--sh-1);
  padding: var(--s3); text-align: center; }
.stat-card .sv { font-size: var(--fs-2xl); font-weight: 800; color: var(--brand); }
.stat-card .sl { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; }
.admin-user { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--sh-1);
  padding: var(--s3); margin: 0 var(--s4) 10px; }
.admin-user .au-top { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 4px; }
.admin-user .au-bal { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 6px; line-height: 1.5; }
.admin-user .au-bal.muted { color: var(--muted); }
.admin-user .au-ops { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.admin-user .au-ops input { height: 32px; border-radius: var(--r-sm); border: 1.5px solid var(--line); padding: 0 10px; background: var(--bg-1); }
.admin-user .au-ops .btn.sm { height: 32px; }
/* 操作按钮行：单行不折行，宽度不足时横向滚动（保持整齐不换行） */
.admin-user .au-ops-btns { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.admin-user .au-ops-btns > * { flex: none; }
.admin-user .au-ops-btns .btn.sm { padding: 0 10px; }
.admin-user .au-ops-btns select { flex: none; }
.au-ok { color: var(--ok); font-weight: 700; }
.au-bad { color: var(--danger); font-weight: 700; }

/* 后台内容区（手机默认：上下堆叠） */
.admin-body { margin-top: 12px; }

/* ---------- 超管后台 · 桌面宽屏适配（≥900px，仅后台页生效，其余页面不受影响） ---------- */
@media (min-width: 900px) {
  #app.admin-desktop { max-width: 1800px; padding-bottom: 32px; } /* #app 本身就是 .shell */
  #app.admin-desktop .tabbar { display: none; } /* 桌面端后台隐藏手机底栏 */
  #app.admin-desktop .appbar { padding: 22px 32px 14px; position: sticky; top: 0; z-index: 20; }
  .admin-page .banner { margin: 22px 32px 0; }
  .admin-layout { display: flex; align-items: flex-start; gap: 18px; padding: 18px 32px 32px; }
  .admin-layout .admin-tabs {
    /* 单列竖排：菜单文档流真实起点约 210px（上方 banner+商家提醒栏），
       单列 18 项高约 556px，常规视口(720)放不下 → max-height 按真实起点扣：
       100vh-210px，内容超限时滚动条必出现；滚动条改可见细条，直接拖/滚轮即可见「招聘管理」。
       （之前 100vh-92px 预算偏大，容器未超阈值导致滚动条不出现、末项划不到） */
    flex-direction: column; flex-wrap: nowrap;
    width: 172px; flex: none; gap: 2px; margin: 0;
    position: sticky; top: 84px;
    align-self: start;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.3) transparent;
  }
  .admin-layout .admin-tabs::-webkit-scrollbar { width: 6px; }
  .admin-layout .admin-tabs::-webkit-scrollbar-track { background: rgba(0,0,0,.05); border-radius: 4px; }
  .admin-layout .admin-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); border-radius: 4px; }
  .admin-layout .admin-tabs:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.45); }
  .admin-layout .admin-tabs button {
    width: 100%; text-align: left; padding: 5px 14px;
    border-radius: 10px; font-size: var(--fs-sm);
  }
  .admin-layout .admin-body { flex: 1; min-width: 0; margin-top: 0; }
  .admin-layout .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0 0 12px; }
  .admin-layout .stat-card { text-align: left; padding: 14px 16px; min-width: 0; overflow: hidden; }
  /* 数值随屏宽自动缩放，超长数字（如 36,350,000）不再撑破卡片 */
  .admin-layout .stat-card .sv { font-size: clamp(15px, 0.5vw + 11px, 22px); overflow-wrap: anywhere; }
  .admin-layout .admin-user { margin: 0 0 10px; padding: 12px 14px; }
  .admin-layout .panel { margin: 0 0 12px; }
}

/* ---------- 社交：关注 / 粉丝 / 点赞 / 评论 ---------- */
.post-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pf-au { font-size: var(--fs-xs); color: var(--muted); cursor: pointer; }
.pf-au:hover { color: var(--brand); }
.pf-btn { margin-left: auto; background: none; border: 1px solid var(--surface-3); border-radius: 999px; padding: 4px 10px; font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; }
.pf-btn.on { color: var(--danger); border-color: var(--danger); }
.pf-btn + .pf-btn { margin-left: 0; }
.cmt-box { margin-top: 18px; border-top: 1px solid var(--surface-3); padding-top: 14px; }
.cmt-h { font-size: var(--fs-md); margin: 0 0 10px; }
.cmt-input { display: flex; gap: 8px; margin-bottom: 12px; }
.cmt-input input { flex: 1; padding: 9px 12px; border: 1px solid var(--surface-3); border-radius: 10px; background: var(--surface); color: var(--ink); }
.cmt { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--surface-3); }
.cmt-av { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.cmt-main { flex: 1; min-width: 0; }
.cmt-nm { font-size: var(--fs-sm); font-weight: 600; }
.cmt-txt { font-size: var(--fs-sm); color: var(--ink-2); margin: 2px 0 4px; word-break: break-word; }
.cmt-ops { display: flex; gap: 12px; }
.cmt-mini { background: none; border: none; color: var(--muted); font-size: var(--fs-xs); cursor: pointer; padding: 2px 0; }
.cmt-mini.on { color: var(--danger); }
.cmt-mini.danger { color: var(--danger); }
.cmt-replies { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--surface-3); }
.up-head { display: flex; align-items: center; gap: 14px; }
.up-av { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.up-nm { font-size: var(--fs-lg); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.up-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.up-stats { display: flex; margin: 16px 0; background: var(--surface); border-radius: 12px; overflow: hidden; }
.up-stats .ust { flex: 1; text-align: center; padding: 12px 4px; }
.up-stats .ust + .ust { border-left: 1px solid var(--surface-3); }
.up-stats .ust b { display: block; font-size: var(--fs-lg); }
.up-stats .ust span { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 帖子详情：抖音式沉浸页（图片左右滑 + 帖子上下滑 + 顶部下拉刷新） ---------- */
.sv-root { position: fixed; inset: 0; overflow: hidden; background: #0E0F12; touch-action: pan-y; }
.sv-slide { position: absolute; left: 0; right: 0; height: 100%; top: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; background: linear-gradient(180deg,#17181C 0%, #0E0F12 100%); }
.sv-blank { visibility: hidden; }
/* 三屏纵向堆叠：slot0 在上一屏之上(需上滑)，slot1 居中，slot2 在下一屏之下 */
.sv-slide[data-slot="0"] { transform: translateY(-100%); }
.sv-slide[data-slot="1"] { transform: translateY(0); }
.sv-slide[data-slot="2"] { transform: translateY(100%); }
/* 顶部悬浮操作条（返回/搜索/消息），仿截图 */
/* 悬浮顶栏：返回/搜索/消息（沉浸页自带） */
.sv-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 48px;
  display: flex; align-items: center; gap: 14px; padding: 0 14px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.sv-topbar > * { pointer-events: auto; }
.sv-back { color: #fff; font-size: 30px; line-height: 1; text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.sv-tb-ico { color: #fff; font-size: 19px; position: relative; cursor: pointer; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.sv-tb-msg { margin-left: auto; }
.sv-tb-msg .dot { position: absolute; top: -3px; right: -4px; min-width: 15px; height: 15px; padding: 0 4px;
  background: #F5513C; color: #fff; font-size: 10px; font-style: normal; line-height: 15px;
  border-radius: 999px; text-align: center; }
/* 媒体区：多图叠放，一次显示一张，左右滑动切换 */
.sv-media { position: relative; width: 100%; height: 62vh; overflow: hidden; background: #0E0F12; padding-top: 48px; box-sizing: border-box; }
.sv-item { width: 100%; height: 100%; display: block; }
.sv-item img, .v-item video, .sv-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-item.imgfail, .sv-nopic { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#2A2C33,#1C1E24); font-size: 60px; }
/* 图片右下角 1/N 计数 */
.sv-idx { position: absolute; right: 12px; bottom: 12px; z-index: 5; padding: 3px 10px;
  background: rgba(0,0,0,.55); color: #fff; font-size: var(--fs-xs); border-radius: 999px; }
.sv-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5; display: flex; justify-content: center; gap: 5px; }
.sv-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.4); }
.sv-dots i.on { background: #fff; }
/* 信息区（深色卡片） */
.sv-info { background: #17181C; padding: var(--s4) var(--s4) var(--s5); }
.sv-title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.4; color: #F2F3F5; margin-bottom: 10px; }
.sv-params { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.sv-price { color: #FF5A4E; font-weight: 800; font-size: var(--fs-lg); }
.sv-kv { color: #9A9EA6; font-size: var(--fs-sm); }
.sv-kv b { color: #6E727A; font-weight: 500; margin-right: 6px; }
.sv-desc { color: #C9CCD2; font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 12px;
  white-space: pre-wrap; word-break: break-word; }
.sv-seller { display: flex; align-items: center; gap: 10px; padding: 10px; background: #1F2127;
  border-radius: 12px; cursor: pointer; margin-bottom: 14px; }
.sv-seller .av { width: 38px; height: 38px; border-radius: 50%; background: #2C2F36; display: flex;
  align-items: center; justify-content: center; font-size: 18px; }
.sv-seller .nm { font-weight: 700; color: #F2F3F5; font-size: var(--fs-md); }
.sv-seller .meta { color: #8A8E96; font-size: var(--fs-xs); }
/* 底部操作条（方案 A 两层结构）：上层数量/合计/库存行，下层操作栏 */
.sv-acts { display: flex; flex-direction: column; gap: 10px; }
.sv-bar { display: flex; align-items: center; gap: 8px; }
.sv-bar .sv-icon { flex: none; }
.sv-icon { background: none; border: none; display: flex; flex-direction: column; align-items: center;
  gap: 2px; color: #C9CCD2; font-size: var(--fs-xs); cursor: pointer; padding: 4px; }
.sv-icon .ico { font-size: 20px; line-height: 1; }
.sv-pill { flex: 1; min-width: 0; height: 42px; border: none; border-radius: 999px; font-size: var(--fs-sm);
  font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; padding: 0 8px; }
.sv-bar .sv-buy { flex: 1.5; }
.sv-chat { background: linear-gradient(135deg,#FFC24B,#FF9A3D); }
.sv-tel { background: linear-gradient(135deg,#FF7A5C,#F5513C); }
/* 数量/合计/库存独立行：浅底圆角条与操作栏分层 */
.sv-qtyrow { display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--surface-2); border: 0.5px solid var(--line-soft); border-radius: 12px; padding: 8px 12px; }
.sv-qty { display: flex; align-items: center; gap: 10px; }
.sv-total { font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
.sv-total b { color: #E24B4A; font-weight: 700; }
.sv-qty-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-soft);
  background: var(--surface-2); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; flex: none; }
.sv-qty-btn:active { background: var(--surface-3); }
.sv-qty-num { min-width: 28px; text-align: center; font-weight: 700; font-size: var(--fs-md); color: var(--text); }
.sv-qty-stock { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
/* 立即下单：与在线聊/打电话同款胶囊实底，绿色区分「支付/下单」语义 */
.sv-buy { background: linear-gradient(135deg,#3ED07E,#1FAE62); }
.sv-pill[disabled] { background: #3A3D44; color: #8A8E96; cursor: not-allowed; }
/* 详情页联系电话（脱敏显示，点击「打电话」时服务端才返回真实号码） */
.sv-phone { margin-top: 10px; color: #8A8E96; font-size: var(--fs-sm); letter-spacing: .3px; }

/* ---------- 用户头像与昵称（自定义资料） ---------- */
/* 头像统一圆形裁切：图片与 emoji 占位都走同一尺寸 */
.av-img, .av-fb { border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; }
.up-av .av-img, .up-av .av-fb { width: 60px; height: 60px; }
.up-av { display: flex; }
.sv-seller .av .av-img, .sv-seller .av .av-fb, .sv-seller .av-img, .sv-seller .av-fb { width: 38px; height: 38px; }
.cmt-av .av-img, .cmt-av .av-fb, .cmt-av .av-img, .cmt-av .av-fb { width: 32px; height: 32px; }
.cmt-av { display: flex; }
.conv .av .av-img, .conv .av .av-fb, .conv .av-img, .conv .av .av-fb { width: 42px; height: 42px; }
.conv .av { display: flex; }
.av-fb { background: linear-gradient(135deg, #FFE9CC, #FFD9A6); font-size: 20px; line-height: 1; }
.up-av .av-fb { font-size: 28px; }

/* 编辑资料页 */
.pf-top { display: flex; align-items: center; gap: 14px; padding: var(--s4); background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r); margin-bottom: var(--s4); }
.pf-av { width: 60px; height: 60px; font-size: 28px; }
.pf-cur { font-weight: 700; font-size: var(--fs-md); margin-bottom: 2px; }
.pf-up { border: 1.5px dashed var(--brand); border-radius: var(--r); padding: var(--s5) var(--s4);
  text-align: center; background: var(--bg-1); cursor: pointer; }
.pf-up-ico { font-size: 30px; }
.pf-up-tip { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; min-height: 16px; }

/* ---------- 子分类独立页 ---------- */
.subpage .h-title { margin: var(--s3) var(--s4) var(--s2); }
.subpage .h-title .sp-name { font-size: var(--fs-lg); font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subpage .h-title .more { flex: none; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- 车辆频道页 ---------- */
.carchan { background: #fff; }
.cc-crow { display: flex; align-items: center; gap: 10px; padding: 10px var(--s4) 4px; background: #fff; }
.cc-city { font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
.cc-entries { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 10px 8px 2px; }
.cc-entries .ce { text-align: center; cursor: pointer; }
.cc-entries .ce .ic { width: 40px; height: 40px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.cc-entries .ce .lb { font-size: var(--fs-xs); margin-top: 5px; color: var(--ink-2); }
.cc-entries .ce:active .ic { transform: scale(.92); }
.cc-brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 10px 8px 4px; }
.cc-brands .cb { text-align: center; cursor: pointer; }
.cc-brands .cb .ic { width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; background: var(--surface-3);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); font-weight: 700; color: var(--ink-2); }
.cc-brands .cb .lb { font-size: var(--fs-xs); margin-top: 3px; color: var(--ink-2); }
.cc-brands .cb.on .ic { background: linear-gradient(135deg,#FF9A3D,#FF6A00); color: #fff; }
.cc-brands .cb.on .lb { color: var(--brand); font-weight: 700; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px var(--s4) 10px; }
.cc-chips .cc { padding: 7px 13px; background: var(--surface-3); border-radius: 8px;
  font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.cc-chips .cc.on { background: linear-gradient(135deg,#FF9A3D,#FF6A00); color: #fff; font-weight: 700; }
.cc-sorts { display: flex; gap: 16px; padding: 10px var(--s4); color: var(--muted);
  font-size: var(--fs-sm); border-top: 8px solid var(--bg-2); }
.cc-sorts .cs { cursor: pointer; }
.cc-sorts .cs.on { color: var(--brand); font-weight: 700; }
.crow { display: flex; gap: 10px; padding: 12px var(--s4); border-top: 1px solid var(--line-soft); cursor: pointer; }
.crow .cimg { width: 118px; height: 84px; border-radius: 10px; flex: none; position: relative;
  background: linear-gradient(135deg,#FFE9CC,#FFD9A6); display: flex; align-items: center;
  justify-content: center; font-size: 30px; overflow: hidden; }
.crow .cimg img { width: 100%; height: 100%; object-fit: cover; }
.crow .cimg .ph { font-size: 30px; }
.crow .cimg .ctag { position: absolute; left: 0; top: 0; padding: 2px 7px; font-size: 10px;
  background: var(--danger); color: #fff; font-weight: 700; border-radius: 8px 0 8px 0; }
.crow .cimg .ctag.src { top: 22px; background: linear-gradient(135deg,#FF9A3D,#FF6A00); }
.crow .cinfo { flex: 1; min-width: 0; }
.crow .cttl { font-size: var(--fs-md); font-weight: 700; line-height: 1.4; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .cmeta { font-size: var(--fs-xs); color: var(--muted); margin: 4px 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .ctags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
.crow .ctags .ct { font-size: 10.5px; padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); }
.crow .ctags .ct.hl { background: #FFE9CC; color: #B45309; font-weight: 700; }
.crow .cprice .now { color: var(--danger); font-size: var(--fs-lg); font-weight: 800; }

/* ---------- 发布页：车辆专属表单 ---------- */
.car-form { border: 1.5px solid #FFE0B2; background: #FFFCF7; border-radius: var(--r);
  padding: var(--s3) var(--s3) 4px; margin-bottom: var(--s3); }
.car-form .cf-title { font-size: var(--fs-md); font-weight: 800; color: #B45309; margin-bottom: 10px; }
.car-form .field label .req { color: var(--danger); }
.car-form select { width: 100%; height: 40px; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 0 10px; background: #fff; font-size: var(--fs-md); color: var(--ink); }
.car-form .seg button.on { background: linear-gradient(135deg,#FF9A3D,#FF6A00); color: #fff; }

/* ---------- 车辆频道页：品牌「更多」面板 ---------- */
.bp { margin: 6px var(--s4) 10px; border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--surface); overflow: hidden; animation: bpIn .16s ease-out; }
@keyframes bpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bp-head { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.bp-t { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.bp-x { width: 28px; height: 28px; border: none; background: var(--surface-3); color: var(--ink-2);
  border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; }
.bp-always { padding: 10px 12px 4px; }
.bp-always .cb-always { display: inline-block; padding: 7px 18px; border-radius: 999px;
  background: var(--surface-3); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.bp-always .cb-always.on { background: linear-gradient(135deg,#FF9A3D,#FF6A00); color: #fff; font-weight: 700; }
.bp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px 12px 14px; }
.bp-grid .bp-i { text-align: center; padding: 9px 4px; border-radius: 8px; background: var(--surface-3);
  font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bp-grid .bp-i.on { background: linear-gradient(135deg,#FF9A3D,#FF6A00); color: #fff; font-weight: 700; }

/* ---------- 店铺模式：美容装饰 / 维修保养 ---------- */
.shopchan { background: var(--bg-2); min-height: 100vh; }
.sc-top { background: linear-gradient(135deg,#FF9A3D,#FF6A00); color: #fff;
  padding: 12px var(--s4); font-size: var(--fs-lg); font-weight: 800; }
.sc-tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--surface); padding: 12px 8px; }
.sc-tags .stg { text-align: center; padding: 8px 2px; border-radius: 10px; cursor: pointer; }
.sc-tags .stg .ic { width: 38px; height: 38px; margin: 0 auto; border-radius: 50%;
  background: var(--surface-3); display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; transition: background .15s; }
.sc-tags .stg.on .ic { background: #FFE9CC; }
.sc-tags .stg .lb { font-size: var(--fs-xs); margin-top: 3px; color: var(--ink-2); }
.sc-tags .stg.on { background: #FFF1E6; box-shadow: inset 0 0 0 1.5px var(--brand); }
.sc-tags .stg.on .lb { color: var(--brand); font-weight: 700; }
.sc-list { margin-top: 8px; }
.shoprow { display: flex; gap: 11px; background: var(--surface); padding: 13px var(--s4);
  border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.simg { width: 88px; height: 88px; border-radius: 10px; flex: none; position: relative; overflow: hidden;
  background: linear-gradient(135deg,#FFE9CC,#FFD9A6); display: flex; align-items: center;
  justify-content: center; font-size: 34px; }
.simg img { width: 100%; height: 100%; object-fit: cover; }
.simg .svip { position: absolute; left: 0; bottom: 0; background: linear-gradient(135deg,#FF9A3D,#FF6A00);
  color: #fff; font-size: 9.5px; padding: 2px 6px; border-radius: 0 8px 8px 0; font-weight: 700; }
.sbody { flex: 1; min-width: 0; }
.sbody .sname { font-size: var(--fs-md); font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: 5px; }
.sbody .sbdg { font-size: 9.5px; padding: 1px 6px; border-radius: 999px;
  background: #FFE9CC; color: #B45309; font-weight: 700; flex: none; }
.sbody .sintro { font-size: var(--fs-xs); color: var(--muted); margin: 3px 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.stags .stg-i { font-size: 10.5px; padding: 2px 7px; border-radius: 4px;
  background: var(--surface-3); color: var(--ink-2); }
.smeta { display: flex; gap: 10px; font-size: var(--fs-xs); color: var(--muted); flex-wrap: wrap; }

/* 店铺详情 */
.shopdetail { background: var(--bg-2); min-height: 100vh; }
.sd-hero { position: relative; height: 190px; background: linear-gradient(135deg,#FFE9CC,#FFD9A6); }
.sd-hero img { width: 100%; height: 100%; object-fit: cover; }
.sd-hero .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 60px; }
.sd-mask { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px var(--s4) 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.74)); }
.sd-name { font-size: var(--fs-xl); font-weight: 800; color: #fff; display: flex; align-items: center; gap: 6px; }
.sd-intro { font-size: var(--fs-sm); color: rgba(255,255,255,.92); margin-top: 4px; }
.sd-stats { display: flex; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.sd-st { flex: 1; text-align: center; padding: 12px 2px; }
.sd-st b { display: block; font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.sd-st span { font-size: var(--fs-xs); color: var(--muted); }
.sd-sec { background: var(--surface); padding: 13px var(--s4); margin-top: 8px; }
.sd-t { font-size: var(--fs-md); font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.sd-t .sd-more { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.sd-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.sd-item:last-child { border: none; }
.sd-ic { width: 62px; height: 62px; border-radius: 8px; flex: none; background: var(--surface-3);
  display: flex; align-items: center; justify-content: center; font-size: 26px; }
.sd-ib { flex: 1; min-width: 0; }
.sd-in { font-size: var(--fs-md); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.sd-id { font-size: var(--fs-xs); color: var(--muted); margin: 3px 0 4px; line-height: 1.5; overflow-wrap: anywhere; }
.sd-ip { color: var(--danger); font-weight: 800; font-size: var(--fs-md); }
.sd-ip small { color: var(--muted); font-weight: 400; font-size: var(--fs-xs); }
.sd-book { flex: none; height: 30px; padding: 0 16px; border-radius: 999px; border: none;
  background: linear-gradient(135deg,#FF9A3D,#FF6A00); color: #fff; font-size: var(--fs-sm); font-weight: 700; }
.sd-desc { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.8; white-space: pre-wrap; }
.sd-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; font-size: var(--fs-xs); color: var(--muted); }
.sd-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 9px;
  padding: 9px var(--s4); background: var(--surface); border-top: 1px solid var(--line-soft); }
.sd-fav { flex: none; height: 42px; padding: 0 18px; border-radius: 999px; font-size: var(--fs-md);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; }
.sd-contact { flex: 1; height: 42px; border-radius: 999px; border: none; color: #fff;
  background: linear-gradient(135deg,#FF9A3D,#FF6A00); font-size: var(--fs-md); font-weight: 800; }

/* ---------- 发布页：店铺表单 ---------- */
.shop-form { border: 1.5px solid #FFE0B2; background: #FFFCF7; border-radius: var(--r);
  padding: var(--s3) var(--s3) 4px; margin-bottom: var(--s3); }
.shop-form .sf-title { font-size: var(--fs-md); font-weight: 800; color: #B45309; margin-bottom: 10px; }
.shop-form .field label .req { color: var(--danger); }
.sf-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.sf-tags .sft { padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.sf-tags .sft.on { background: linear-gradient(135deg,#FF9A3D,#FF6A00); border-color: transparent;
  color: #fff; font-weight: 700; }
.sf-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  margin-bottom: 9px; background: #fff; }
.sf-ih { display: flex; align-items: center; margin-bottom: 7px; }
.sf-ih b { font-size: var(--fs-xs); color: #B45309; }
.sf-ih button { margin-left: auto; border: none; background: none; color: var(--danger);
  font-size: var(--fs-xs); cursor: pointer; }
.sf-item .mini { width: 100%; height: 36px; border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 0 10px; font-size: var(--fs-sm); margin-bottom: 6px; background: var(--bg-1); }
.sf-item .mini:last-child { margin-bottom: 0; }
.sf-add { width: 100%; height: 38px; border: 1.5px dashed var(--brand); border-radius: 10px;
  background: #FFF9F2; color: var(--brand); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }

/* ---------- 车辆详情：参数表 + 车况报告（档次1） ---------- */
.cv-sec { margin: 12px 0 0; padding: 13px; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r); }
.cv-t { font-size: var(--fs-md); font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.cv-tag { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--surface-3);
  color: var(--muted); font-weight: 400; }
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-soft); border-radius: 8px; overflow: hidden; }
.cv-grid .cv-c { background: var(--surface); padding: 8px 10px; }
.cv-grid .cv-c .k { font-size: var(--fs-xs); color: var(--muted); }
.cv-grid .cv-c .v { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-top: 2px; }
.cv-rhd { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.cv-ring { width: 50px; height: 50px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; }
.cv-ring span { width: 38px; height: 38px; border-radius: 50%; background: var(--surface);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); font-weight: 800; }
.cv-lv { font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.cv-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.cv-ris { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; }
.cv-ris .cv-ri { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--ink-2); }
.cv-ris .cv-ri .ok { color: #22C55E; font-weight: 700; }
.cv-ris .cv-ri .warn { color: #F59E0B; font-weight: 700; }

/* ---------- 发布页：车辆详细参数（档次1） ---------- */
.car-form .cf-sub { font-size: var(--fs-xs); color: #B45309; font-weight: 700;
  margin: 14px 0 9px; padding-top: 10px; border-top: 1px dashed #FFE0B2; }
.cv2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.cv2-grid select { width: 100%; height: 40px; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 0 8px; background: #fff; font-size: var(--fs-sm); color: var(--ink); }
.car-form .seg button.on { background: linear-gradient(135deg,#FF9A3D,#FF6A00); color: #fff; }
.cv2-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.cv2-checks .cvc { padding: 6px 10px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; }
.cv2-checks .cvc.on { background: #E8F5E9; border-color: #22C55E; color: #15803D; font-weight: 700; }

/* ============================================================
   质感升级层 · 2026-10-09
   原则：只提升质感（描边/阴影/圆角/层次），不动任何颜色。
   主色、文字色、语义色全部沿用 tokens.css 原值。
   ============================================================ */

/* ---- 1. 阴影升级：从单层硬阴影 → 多层柔和阴影（更有空气感）---- */
:root {
  --sh-1: 0 1px 2px rgba(36,26,46,.05), 0 2px 8px rgba(36,26,46,.06);
  --sh-2: 0 2px 4px rgba(36,26,46,.05), 0 8px 20px rgba(175,14,172,.15);
  --sh-3: 0 4px 8px rgba(36,26,46,.06), 0 16px 36px rgba(175,14,172,.22);
}

/* ---- 2. 圆角微调：卡片类统一 +2px，视觉更圆润 ---- */
.card, .post, .panel, .bal, .sd-sec, .cv-sec, .shop-form, .car-form {
  border-radius: calc(var(--r) + 2px);
}
.cat-appbar, .appbar { will-change: backdrop-filter; }

/* ---- 3. 卡片质感：描边更清晰 + 悬停微微上浮 ---- */
.card, .panel {
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover, .panel:hover {
  box-shadow: var(--sh-2);
}

/* 帖子卡（瀑布流两列）*/
.post {
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.post:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: rgba(175,14,172,.26);
}

/* ---- 4. 分类图标：圆形 → 圆角方形（更现代的"App 图标"观感）---- */
.cat .ic, .cb .ic {
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(42,36,16,.07), inset 0 -1px 0 rgba(255,255,255,.5);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cat:active .ic, .cb:active .ic { transform: scale(.93); }
.cat.on .ic, .cat.hl .ic { box-shadow: 0 4px 12px rgba(175,14,172,.26), inset 0 -1px 0 rgba(255,255,255,.5); }

/* ---- 5. 顶栏：渐变加一层高光，立体感更强（不改色值）---- */
.appbar, .cat-appbar {
  box-shadow: 0 2px 12px rgba(175,14,172,.22), 0 1px 2px rgba(36,26,46,.07);
  position: relative;
}
.appbar::after, .cat-appbar::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  pointer-events: none;
}

/* ---- 6. 搜索框：内凹感 + 更清晰的边界 ---- */
.search, .cc-sbox, .sb {
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 2px rgba(36,26,46,.05), 0 1px 0 rgba(255,255,255,.7);
}

/* ---- 7. 按钮：按下有轻微下沉反馈（拟物但不夸张）---- */
.btn {
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:active { transform: translateY(1px) scale(.985); filter: brightness(.97); }

/* ---- 8. 标签/徽章：加极细内描边，颜色不变但更"精致" ---- */
.tag, .ctag, .stg-i, .ct, .cvc {
  border: 1px solid transparent;
  transition: transform .15s ease;
}
.tag { box-shadow: inset 0 0 0 1px rgba(175,14,172,.15); }
.ctag, .ct, .stg-i { box-shadow: inset 0 0 0 1px rgba(36,26,46,.06); }

/* ---- 9. 列表行（车源/店铺）：悬停左侧橙色指示条 ---- */
.crow, .shoprow {
  transition: background .16s ease, box-shadow .16s ease;
  position: relative;
}
.crow:hover, .shoprow:hover { background: var(--surface-2); }
.crow:hover::before, .shoprow:hover::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
}

/* ---- 10. 分区标题：加重字重与间距，层级更清楚 ---- */
.h-title h2, .sd-t, .cv-t, .spec-t {
  font-weight: 800;
  letter-spacing: .2px;
}
.h-title { margin-top: calc(var(--s4) + 2px); }

/* ---- 11. 底栏：顶部细分隔线 + 轻微上浮投影 ---- */
.tabbar {
  box-shadow: 0 -1px 0 var(--line-soft), 0 -4px 16px rgba(36,26,46,.05);
}
.tabbar .tab { transition: color .16s ease; }
.tabbar .tab.on { font-weight: 700; }

/* ---- 12. 输入框：聚焦时更明显的品牌光环 ---- */
input, textarea, select {
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(175,14,172,.17);
  outline: none;
}

/* ---- 13. 空状态：加一个柔和的圆形底，视觉更完整 ---- */
.empty {
  padding: var(--s6) var(--s4);
  color: var(--muted);
  position: relative;
}

/* ---- 14. 图片占位：渐变更柔和（避免大色块脏）---- */
.imgfail, .cimg, .ph {
  background: linear-gradient(140deg, #FFF3E0, #FFE6C4) !important;
}

/* ---- 15. 价格：加极轻的文字阴影，增强视觉重量（不改色）---- */
.price, .cprice .now, .sd-ip {
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* ---- 16. 减少动效偏好：尊重系统设置 ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 搜索页（独立页·后端搜索） ---------- */
.spage { background: var(--bg-2); min-height: 100vh; }
.sp-bar { display: flex; gap: 8px; padding: 10px var(--s4); background: var(--surface);
  position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line-soft); }
.sp-input { flex: 1; min-width: 0; height: 38px; border: 1.5px solid var(--line-soft); border-radius: 999px;
  padding: 0 14px; font-size: var(--fs-md); background: var(--bg-1); color: var(--ink); }
.sp-go { height: 38px; padding: 0 20px; border: none; border-radius: 999px; flex: none;
  background: linear-gradient(135deg,#FF9A3D,#FF6A00); color: #fff; font-size: var(--fs-md); font-weight: 700; }
.sp-loading, .sp-end, .sp-more { text-align: center; padding: var(--s5) 0; font-size: var(--fs-sm); color: var(--muted); }
.sp-more { cursor: pointer; color: var(--brand); font-weight: 600; }
.sp-meta { padding: 9px var(--s4); font-size: var(--fs-xs); color: var(--muted);
  display: flex; align-items: center; background: var(--bg-2); }
.sp-meta b { color: var(--brand); font-weight: 800; }
.sp-sub { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.sp-sorts { display: flex; gap: 6px; padding: 8px var(--s4); background: var(--surface);
  border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; }
.sp-sorts::-webkit-scrollbar { display: none; }
.sp-sort { padding: 6px 13px; border-radius: 8px; background: var(--surface-3); font-size: var(--fs-sm);
  color: var(--ink-2); cursor: pointer; white-space: nowrap; flex: none; }
.sp-sort.on { background: linear-gradient(135deg,#FF9A3D,#FF6A00); color: #fff; font-weight: 700; }
.sp-sect { background: var(--surface); padding: 12px var(--s4); border-bottom: 8px solid var(--bg-2); }
.sp-h { font-size: var(--fs-sm); font-weight: 800; margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.sp-clear { margin-left: auto; border: none; background: none; color: var(--muted); font-size: var(--fs-xs); cursor: pointer; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.sp-tag { padding: 6px 12px; border-radius: 999px; background: var(--surface-3); font-size: var(--fs-sm);
  color: var(--ink-2); cursor: pointer; }
.sp-tag.cat { background: #FFF1E6; color: #B45309; }
.sp-tip { font-size: var(--fs-xs); color: var(--muted); padding: var(--s4); line-height: 1.7; }
.sp-tip b { color: var(--brand); }
/* 店铺结果 */
.sp-shop { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.sp-shop:last-child { border: none; }
.sp-simg { width: 56px; height: 56px; border-radius: 10px; flex: none; overflow: hidden;
  background: linear-gradient(135deg,#FFE9CC,#FFD9A6); display: flex; align-items: center;
  justify-content: center; font-size: 22px; color: #B45309; }
.sp-simg img { width: 100%; height: 100%; object-fit: cover; }
.sp-sbody { flex: 1; min-width: 0; }
.sp-sname { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.sp-sintro { font-size: var(--fs-xs); color: var(--muted); margin: 3px 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-stags { display: flex; gap: 4px; flex-wrap: wrap; }
.sp-st { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); }
/* 帖子结果 */
.sp-post { background: var(--surface); padding: 12px var(--s4); border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.sp-pttl { font-size: var(--fs-md); font-weight: 700; color: var(--ink); line-height: 1.45; }
.sp-pttl mark, .sp-psnip mark { background: #FFF3B0; color: var(--ink); border-radius: 2px; padding: 0 2px; }
.sp-pmeta { display: flex; gap: 8px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); margin: 5px 0; }
.sp-pc { background: var(--surface-3); padding: 1px 6px; border-radius: 4px; color: var(--ink-2); }
.sp-psnip { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-pbot { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.sp-price { color: var(--danger); font-weight: 800; font-size: var(--fs-md); }
.sp-why { font-size: 10.5px; padding: 2px 6px; border-radius: 4px; background: #FFF7EC; color: #B45309; }
.sp-stats { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 评价体系 ---------- */
.rv-stars { color: var(--brand, #af0eac); letter-spacing: 1px; font-size: var(--fs-sm); }
.rv-stars .dim { color: #E5E5EA; }
.rv-sec { margin-top: 8px; }
/* 聚合评分头部 */
.rv-head { display: flex; gap: var(--s4); padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line-soft); }
.rv-score { flex: none; text-align: center; min-width: 96px; }
.rv-avg { font-size: 34px; font-weight: 800; color: #FF6A00; line-height: 1.1; }
.rv-cnt { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.rv-praise { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 5px; }
.rv-praise b { color: #16A34A; }
.rv-dims { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.rv-dim { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--ink-2); }
.rv-dim-l { flex: none; width: 68px; }
.rv-dim-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.rv-dim-bar i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg,#FFB84D,#FF6A00); }
.rv-dim-v { flex: none; width: 24px; text-align: right; color: var(--muted); }
/* 写评价按钮 */
.rv-write { width: 100%; height: 40px; margin: var(--s3) 0; border: none; border-radius: 999px;
  background: linear-gradient(135deg,#FF9A3D,#FF6A00); color: #fff; font-size: var(--fs-md);
  font-weight: 700; cursor: pointer; }
.rv-write.alt { background: var(--surface-3); color: var(--ink-2); }
.rv-filters { margin: 0 calc(var(--s4) * -1) var(--s2); padding-left: var(--s4); padding-right: var(--s4); }
.rv-more { text-align: center; padding: var(--s4) 0; font-size: var(--fs-sm); color: var(--brand);
  font-weight: 600; cursor: pointer; }
/* 评价卡 */
.rv-item { padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); }
.rv-item:last-child { border: none; }
.rv-item.static { cursor: default; }
.rv-u { display: flex; gap: 9px; align-items: flex-start; }
.rv-av { width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden;
  background: linear-gradient(135deg,#FFE9CC,#FFD9A6); display: flex; align-items: center;
  justify-content: center; font-size: 17px; }
.rv-av img { width: 100%; height: 100%; object-fit: cover; }
.rv-ub { flex: 1; min-width: 0; }
.rv-nm { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.rv-mine { font-size: 9px; padding: 1px 5px; border-radius: 999px; background: #FFF1E6;
  color: #B45309; margin-left: 5px; font-weight: 600; }
.rv-t { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.rv-r { flex: none; text-align: right; }
.rv-g { font-size: 10px; margin-top: 2px; padding: 1px 6px; border-radius: 999px; display: inline-block; }
.rv-g.great { background: #E8F5E9; color: #15803D; }
.rv-g.good { background: #FFF7EC; color: #B45309; }
.rv-g.mid { background: var(--surface-3); color: var(--ink-2); }
.rv-g.bad { background: #FEE2E2; color: #B91C1C; }
.rv-c { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; margin-top: 7px; }
.rv-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rv-imgs img { width: 76px; height: 76px; border-radius: 8px; object-fit: cover; background: var(--surface-3); }
/* 追评 */
.rv-append { margin-top: 9px; padding: 9px 11px; background: var(--bg-1); border-radius: 10px;
  border-left: 3px solid var(--brand); }
.rv-ap-t { font-size: var(--fs-xs); color: var(--brand); font-weight: 700; }
.rv-ap-c { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 4px; line-height: 1.65; }
/* 商家回复 */
.rv-reply { margin-top: 9px; padding: 9px 11px; background: #F3F8FF; border-radius: 10px;
  border-left: 3px solid #3B82F6; }
.rv-reply-t { font-size: var(--fs-xs); color: #1D4ED8; font-weight: 700; }
.rv-reply-c { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 4px; line-height: 1.65; }
/* 底部操作 */
.rv-foot { display: flex; gap: var(--s4); margin-top: 9px; font-size: var(--fs-xs); color: var(--muted); }
.rv-like, .rv-append-btn, .rv-reply-btn { cursor: pointer; }
.rv-like.on { color: var(--brand); font-weight: 700; }
.rv-append-btn, .rv-reply-btn { color: var(--ink-2); }
/* 写评价页 */
.rv-write-dim { display: flex; align-items: center; justify-content: space-between; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); }
.rv-write-l { font-size: var(--fs-md); color: var(--ink); }
.rv-star-pick { display: flex; gap: 3px; }
.rv-star-pick .sp { font-size: 26px; color: #E5E5EA; cursor: pointer; line-height: 1; }
.rv-star-pick .sp.on { color: var(--brand, #af0eac); }
/* 信誉分卡 */
.rv-stat-card { display: flex; align-items: center; gap: var(--s4); background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r); padding: var(--s4); }
.rv-stat-main { text-align: center; flex: none; }
.rv-credit { font-size: 36px; font-weight: 800; line-height: 1.1; }
.rv-credit-l { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.rv-stat-side { flex: 1; display: flex; text-align: center; }
.rv-stat-i { flex: 1; }
.rv-stat-i b { display: block; font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.rv-stat-i span { font-size: var(--fs-xs); color: var(--muted); }
.rv-tip { font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; margin-top: 10px; padding: 0 2px; }

/* ---------- 商品变体（规格 / SKU / 库存） ---------- */
/* 详情页规格选择器 */
.vt-pick { margin: 10px 0 2px; padding: 11px 12px; background: var(--bg-1);
  border: 1px solid var(--line-soft); border-radius: var(--r); }
.vt-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; }
.vt-label { flex: none; width: 52px; font-size: var(--fs-sm); color: var(--muted); padding-top: 5px; }
.vt-opts { flex: 1; display: flex; flex-wrap: wrap; gap: 7px; }
.vt-opt { padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--line);
  background: var(--surface); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.vt-opt.on { border-color: var(--brand); background: #FFF1E6; color: var(--brand); font-weight: 700; }
.vt-opt.off { opacity: .42; cursor: not-allowed; text-decoration: line-through; }
.vt-info { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px dashed var(--line-soft); }
.vt-price { display: flex; align-items: baseline; gap: 5px; }
.vt-cur { color: var(--danger); font-size: var(--fs-lg); font-weight: 800; }
.vt-tip { font-size: var(--fs-xs); color: var(--muted); }
.vt-stock { font-size: var(--fs-xs); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vt-ok { color: #16A34A; }
.vt-low { color: #D97706; font-weight: 700; }
.vt-out { color: #9CA3AF; }
.vt-sku { color: var(--muted); }
/* 发布页编辑器 */
.vt-edit { border: 1.5px dashed #FFE0B2; background: #FFFCF7; border-radius: var(--r);
  padding: var(--s3); margin-bottom: var(--s3); }
.vt-e-head { display: flex; align-items: flex-start; gap: 10px; }
.vt-e-t { font-size: var(--fs-md); font-weight: 800; color: #B45309; }
.vt-e-s { font-size: var(--fs-xs); color: #B45309; opacity: .8; margin-top: 3px; line-height: 1.6; }
.vt-e-add { margin-left: auto; flex: none; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid var(--brand); background: #fff; color: var(--brand);
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.vt-e-none { font-size: var(--fs-xs); color: #B45309; opacity: .75; padding: 10px 0 2px; }
.vt-e-spec { margin-top: 11px; padding: 10px; background: #fff; border-radius: 10px;
  border: 1px solid var(--line-soft); }
.vt-e-row { display: flex; align-items: center; gap: 8px; }
.vt-e-name { flex: 1; height: 34px; border: 1.5px solid var(--line); border-radius: 8px;
  padding: 0 10px; font-size: var(--fs-sm); background: var(--bg-1); }
.vt-e-del { border: none; background: none; color: var(--danger); font-size: var(--fs-xs); cursor: pointer; }
.vt-e-vals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; align-items: center; }
.vt-e-val { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px;
  background: var(--surface-3); font-size: var(--fs-xs); color: var(--ink-2); }
.vt-e-val i { font-style: normal; cursor: pointer; color: var(--muted); font-size: 13px; }
.vt-e-val i:hover { color: var(--danger); }
.vt-e-addval { height: 30px; flex: 1; min-width: 110px; border: 1.5px dashed var(--line);
  border-radius: 999px; padding: 0 11px; font-size: var(--fs-xs); background: #fff; }
.vt-e-mt { font-size: var(--fs-xs); color: #B45309; margin: 13px 0 7px; font-weight: 700; }
.vt-e-mrow { display: grid; grid-template-columns: 1.4fr 1fr 74px 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.vt-e-mhead { font-size: var(--fs-xs); color: var(--muted); padding-bottom: 2px; }
.vt-e-mrow input { height: 34px; border: 1.5px solid var(--line); border-radius: 8px;
  padding: 0 9px; font-size: var(--fs-sm); background: var(--bg-1); min-width: 0; }
.vt-e-c1 { font-size: var(--fs-sm); color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.vt-e-warn { font-size: var(--fs-xs); color: var(--danger); background: #FEE2E2;
  border-radius: 8px; padding: 8px 10px; margin-top: 10px; }

/* ============================================================
   推荐排序 + 推广（第34轮新增）
   —— 纯追加层，不改动既有规则，便于回滚与对比
   ============================================================ */

/* 推广标签：必须明示，不能把付费内容伪装成自然内容 */
.tag.promo {
  background: #f7dcf6;
  color: #af0eac;
  border: 1px solid #e8b9e5;
  font-weight: 500;
}

/* 打赏标签：紫色底白字，右上角赏标（按浏览付费打赏） */
.tag.reward {
  background: #7c3aed;
  color: #fff;
  border: 1px solid #6d28d9;
  font-weight: 600;
}

/* 首页「换一批」工具条 */
.feed-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px 8px;
}
.feed-tools .ft-tip {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  opacity: 0.8;
}

/* 推广中心：推广位卡片 */
.promo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(40, 36, 16, .07);
}
.promo-item:last-child { border-bottom: none; }
.promo-item .pi-l { flex: 1; min-width: 0; }
.promo-item .pi-n {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  line-height: 1.4;
}
.promo-item .pi-d {
  font-size: var(--fs-xs);
  color: var(--fg-2);
  margin-top: 3px;
  line-height: 1.5;
}
.promo-item .pi-s {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 3px;
  opacity: .85;
}
.promo-item .pi-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.promo-item .pi-c {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}
.promo-item .pi-c small {
  font-size: 11px;
  font-weight: 400;
  margin-left: 2px;
  opacity: .8;
}

/* 已选中的推广帖（待选推广位） */
.conv .btn.on,
.conv button.on {
  border-color: var(--brand);
  background: rgba(175, 14, 172, .12);
  color: var(--brand);
}

/* 推广记录里的状态标签 */
.tag:not(.promo) { opacity: .6; }

/* ============================================================
   排序权重配置（第35轮新增，后台「🎯 排序」标签）
   —— 纯追加层
   ============================================================ */

.rw-formula {
  font-size: 12px;
  color: var(--fg-2);
  background: rgba(40, 36, 16, .04);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.6;
  word-break: break-all;
}
.rw-tips {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.8;
}
.rw-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--fg-3);
  line-height: 1.6;
}

/* 单个类目的权重行 */
.rw-row {
  background: #fff;
  border: 1px solid rgba(40, 36, 16, .07);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
/* 已自定义的类目给个标记，让人一眼看出哪些被改过 */
.rw-row.from-db {
  border-color: rgba(175, 14, 172, .50);
  background: rgba(175, 14, 172, .06);
}
.rw-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rw-cat {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.rw-src {
  font-size: 11px;
  color: var(--fg-3);
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(40, 36, 16, .05);
  white-space: nowrap;
}
.rw-row.from-db .rw-src {
  color: var(--brand);
  background: rgba(175, 14, 172, .12);
}

.rw-grid {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.rw-f {
  flex: 1;
  min-width: 68px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rw-fl {
  font-size: 11px;
  color: var(--fg-3);
}
.rw-f input {
  height: 34px;
  border: 1px solid rgba(40, 36, 16, .14);
  border-radius: 8px;
  padding: 0 8px;
  font-size: 14px;
  background: #fff;
  color: var(--fg-1);
  width: 100%;
}
/* 去掉数字输入框的上下箭头，手机上更好按 */
.rw-f input::-webkit-outer-spin-button,
.rw-f input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rw-f input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.btn.xs {
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
  border-radius: 6px;
}

/* 推广加成只读标记 */
.rw-boost {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(175, 14, 172, .12);
  color: var(--brand);
  border: 1px solid rgba(175, 14, 172, .26);
  white-space: nowrap;
}

/* ============================================================
   PWA 私信提醒悬浮铃铛（替代原长条提示条）
   —— 纯追加层
   ============================================================ */

/* 紫色圆形悬浮铃铛：结构对齐底部「发布」大钮（圆形/白描边/投影/凸起），颜色走紫色 */
.push-fab {
  position: fixed;
  right: calc(50% - 208px);            /* 对齐底部栏第 5 个【我的】按钮中心 */
  bottom: 76px;                        /* 悬浮于底栏上方，留 12px+ 间距 */
  z-index: 40;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, #b316b0 0%, #8a0c9e 100%);
  color: #fff;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(175, 14, 172, .45);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.push-fab .pf-ic { line-height: 1; pointer-events: none; }
/* 右上角小 × 关闭叉 */
.push-fab .pf-x {
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  color: #8a0c9e;
  border: 1px solid rgba(138, 12, 158, .35);
  font-size: 11px; line-height: 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  cursor: pointer;
}
.push-fab:disabled { opacity: .7; cursor: default; }

/* 电脑后台（admin-desktop）隐藏手机底栏，悬浮铃铛一并隐藏 */
#app.admin-desktop .push-fab { display: none; }

@media (max-width: 460px) {
  /* 窄屏下底部栏满宽，铃铛贴近右侧第 5 项中心 */
  .push-fab { right: 18px; }
}

/* ============================================================
   会员体系重构（第36轮新增）
   —— 纯追加层：我的页头像/认证 + 会员中心卡片/Tabs/开关
   ============================================================ */

/* 我的页顶部头像 + 官方认证 */
.me-top { flex-direction: column; gap: 10px; text-align: center; }
.me-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.me-avatar-wrap.center { margin: 0 auto; }
.me-av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  display: flex; align-items: center; justify-content: center; font-size: 28px; }
.me-av.big { width: 80px; height: 80px; font-size: 36px; }
.me-identity { font-size: var(--fs-sm); color: rgba(255,255,255,0.9); }

.verified-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 700; color: #2563EB;
  background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 999px;
  padding: 2px 8px;
}
.verified-badge .v-shield { font-size: 12px; }
.verified-badge.large { font-size: var(--fs-sm); padding: 3px 10px; }

/* 会员中心页 */
.vip-page { padding-bottom: 90px; }
.vip-hero.new {
  background: var(--bar-grad); color: var(--on-brand);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: var(--s4) var(--s4) var(--s5);
  margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4);
  text-align: center;
}
.vip-hero.new .me-av { border: 3px solid rgba(255,255,255,0.35); }
.vip-info { margin-top: 8px; }
.vip-name { font-size: var(--fs-xl); font-weight: 700; }
.vip-now { font-size: var(--fs-sm); opacity: 0.9; margin-top: 2px; }
.vip-balance { font-size: var(--fs-2xl); font-weight: 800; margin-top: 8px; }
.vip-balance small { font-size: var(--fs-sm); font-weight: 500; opacity: 0.85; margin-left: 4px; }

/* 官方认证申请区 */
.verify-section { margin: var(--s4) 0; }
.verify-title { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.verify-desc { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 6px; }
.verify-desc b { color: var(--brand); }
.verify-status { margin-top: 8px; font-size: var(--fs-xs); padding: 6px 10px; border-radius: 8px; }
.verify-status.pending { background: #FFF7ED; color: #B45309; }
.verify-status.approved { background: #ECFDF5; color: #15803D; }
.verify-status.rejected { background: #FEE2E2; color: #B91C1C; }

/* ===== 官方认证独立申请页 ===== */
.verify-apply { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.va-receive { padding: 14px; text-align: center; background: linear-gradient(180deg, #FFF8EF, #FFFFFF); }
.va-rec-title { font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.va-rec-qr { display: flex; justify-content: center; min-height: 48px; margin-bottom: 8px; }
.va-rec-qr img { width: 160px; height: 160px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.va-rec-info { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.va-copy-btn {
  padding: 2px 10px;
  font-size: var(--fs-xs);
  color: var(--brand);
  background: #FFF4E8;
  border: 1px solid #FFD9B0;
  border-radius: 999px;
  cursor: pointer;
}
.va-copy-btn:active { opacity: .7; }
.va-rec-tip { font-size: var(--fs-xs); color: var(--ink-3); }
.va-rec-tip b { color: var(--brand); }
.va-refund-tip {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #047857;
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-align: center;
}
.va-form { padding: 14px; }
.va-field { margin-bottom: 14px; }
.va-field > label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.va-field .req { color: #DC2626; margin-left: 2px; }
.va-field input, .va-field textarea {
  width: 100%; padding: 10px 12px; font-size: var(--fs-sm); border: 1px solid var(--line);
  border-radius: 10px; background: var(--input-bg, #fff); color: var(--ink); box-sizing: border-box; resize: vertical;
}
.va-field input:focus, .va-field textarea:focus { outline: none; border-color: var(--brand); }
.va-cover, .va-proofs { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; vertical-align: top; }
/* 已上传缩略图与「＋上传」按钮排成一行（按钮是 .va-cover/.va-proofs 的相邻兄弟） */
.va-cover + .up-add, .va-proofs + .up-add { display: inline-flex; vertical-align: top; margin-left: 2px; }
.va-cover > img, .va-proof { position: relative; width: 84px; height: 84px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); background: #f4f4f5; overflow: hidden; }
/* 表单里 .va-proof 是 div 包裹，内层 img 需显式约束尺寸，否则原图撑破卡片 */
.va-proof img { width: 84px; height: 84px; object-fit: cover; display: block; border-radius: 10px; }
.va-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; line-height: 18px; text-align: center;
  border-radius: 50%; background: #DC2626; color: #fff; border: none; font-size: 12px; cursor: pointer; padding: 0;
}
.va-proofs .kbz-empty, .va-cover .kbz-empty { color: var(--ink-3); font-size: var(--fs-xs); align-self: center; }

/* 后台：结构化资质展示 */
.va-mat { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; padding: 8px; background: #FAFAFB; border-radius: 8px; }
.va-mat-cover { width: 72px; height: 72px; flex: none; }
.va-mat-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; }
.va-mat-info { flex: 1; min-width: 160px; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.7; }
.va-mat-info b { color: var(--ink); }
.va-note { color: var(--ink-3); }
.va-proof.tk-proof-img, .va-proof { cursor: zoom-in; }
.verify-status-box { padding: 16px; }

/* 会员档位卡片 */
.vip-section { margin-top: var(--s4); }
.vip-sec-title { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.vip-cards { display: flex; flex-direction: column; gap: var(--s4); }
.vip-card {
  background: var(--surface); border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg); padding: var(--s4);
  box-shadow: var(--sh-1);
}
.vip-card.current { border-color: var(--brand); background: linear-gradient(180deg, var(--surface), #fdf4fd); }
.vip-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.vip-card-name { font-size: var(--fs-xl); font-weight: 800; color: var(--ink); }
.vip-card-slogan { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.vip-switch { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.vip-switch.disabled { cursor: not-allowed; opacity: .5; }
.vip-switch input { appearance: none; width: 46px; height: 26px; border-radius: 999px;
  background: var(--line-soft); outline: none; transition: .2s; position: relative; }
.vip-switch input::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: .2s;
}
.vip-switch input:checked { background: var(--brand); }
.vip-switch input:checked::before { left: 23px; }
.vip-switch input:disabled { opacity: .5; }
.vip-switch input:disabled + .vip-slider { color: var(--muted); }
.vip-slider { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); white-space: nowrap; }

/* 周期 Tabs */
.vip-card-tabs { display: flex; gap: 6px; margin-top: 14px; }
.vip-tab {
  flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid var(--line-soft);
  background: var(--bg-1); font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.vip-tab.on { border-color: var(--brand); background: rgba(175, 14, 172, .10); color: var(--brand); font-weight: 700; }
.vip-tab .tag { font-size: 9px; color: var(--brand); background: rgba(175,14,172,.12); padding: 1px 4px; border-radius: 4px; }

/* 价格 */
.vip-card-price { font-size: var(--fs-2xl); font-weight: 800; color: var(--brand); margin-top: 12px; }

/* 权益列表 */
.vip-benefits { margin-top: 12px; padding-left: 16px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.9; }
.vip-benefits li::marker { color: var(--brand); }
.vip-card-status { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: #F3E8F3; color: var(--brand-deep); font-size: var(--fs-xs); font-weight: 600; }

/* ============================================================
   第37轮追加：我的页头像编辑角标（点击头像/账号名进编辑资料）
   ============================================================ */
.me-avatar-wrap { position: relative; }
.me-av-edit {
  position: absolute; top: -2px; left: 50%; transform: translateX(14px);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: #333;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  pointer-events: none;
}

/* ============================================================
   第38轮追加：我的页「账户名称」独立行 + 编辑资料页只读账户名
   ============================================================ */
.me-account {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 10px 0 2px; padding: 8px 10px;
  background: rgba(255,255,255,0.10); border-radius: 10px;
  font-size: 13px; color: #fff;
}
.me-account .ma-label { opacity: 0.8; }
.me-account .ma-num { font-size: 15px; letter-spacing: 0.5px; }
.me-account .ma-tip { width: 100%; font-size: 11px; opacity: 0.7; margin-top: 2px; }
.me-account .btn.xs {
  height: 24px; padding: 0 10px; font-size: 12px;
  border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.14); color: #fff;
}
.mn-label { opacity: 0.8; }
.pf-account {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 12px;
  background: var(--bg-2, #f4f5f7); border-radius: 10px;
  font-size: 13px; color: var(--fg-2, #666);
}
.pf-account b { color: var(--fg, #222); font-size: 15px; letter-spacing: 0.5px; }

/* ============================================================
   第39轮追加：「我的」页头部信息行横向重排（头像左 + 昵称/账户/身份右）
   仅改版式，功能与余额/充值区不变
   ============================================================ */
.me-top { text-align: left; }
.me-head { display: flex; gap: 14px; align-items: center; }
.me-head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.me-nick { font-size: 18px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 6px; line-height: 1.2; }
.me-acc { font-size: 13px; color: rgba(255,255,255,0.9); display: flex; align-items: center; gap: 8px; }
.me-acc .num { font-weight: 600; }

/* ---------- 全局下拉刷新指示器 ---------- */
#ptr { position: fixed; top: 12px; left: 50%; transform: translate(-50%, -70px); z-index: 60;
  display: flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px;
  background: var(--bar-grad); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease; }
#ptr.show { opacity: 1; transform: translate(-50%, 0); }
#ptr .ptr-ic { display: inline-block; }
#ptr.spin .ptr-ic { animation: ptrSpin .8s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ---------- 外卖 KBZ 收款 ---------- */
.tk-o-paytag { margin: 6px 0 2px; padding: 4px 10px; align-self: flex-start; border-radius: 999px;
  background: rgba(255,106,0,.12); color: #FF6A00; font-size: 12px; font-weight: 700; }
.kbz-box { width: 320px; max-width: 92vw; background: var(--surface); border-radius: 14px; padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 10px; }
.kbz-qr { min-height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; padding: 10px; }
.kbz-qr img { width: 200px; height: 200px; object-fit: contain; }
.kbz-empty { color: var(--muted); font-size: 13px; }
.kbz-phone { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.kbz-phone b { font-family: var(--font-num); letter-spacing: .5px; }
.kbz-copy { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--bar-grad); color: #fff; font-size: 12px; font-weight: 700; }
.kbz-tip { font-size: 12px; color: var(--muted); line-height: 1.5; }
.kbz-total { font-size: 16px; font-weight: 700; color: #3ED07E; text-align: center; margin: 4px 0 8px; }

/* ---------- v58 KBZ 人工充值模态框 + 记录 ---------- */
.recharge-qr { min-height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; padding: 10px; }
.recharge-qr img { width: 200px; height: 200px; object-fit: contain; }
.recharge-rec-title { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.recharge-rec { display: flex; flex-direction: column; gap: 8px; }
.recharge-rec-item { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px; }
.rri-top { display: flex; align-items: center; justify-content: space-between; }
.rri-status { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.rri-status.rri-pending { background: rgba(255,170,0,.15); color: #FF6A00; }
.rri-status.rri-approved { background: rgba(0,200,120,.15); color: #00b86b; }
.rri-status.rri-rejected { background: rgba(255,77,79,.15); color: var(--danger); }
.rri-time { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- 买家转账凭证缩略图 + 放大查看 ---------- */
.tk-o-proof { margin: 6px 0 8px; }
.tk-o-proof-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tk-o-proof-img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-soft); cursor: pointer; background: #fff; transition: transform .12s ease; }
.tk-o-proof-img:active { transform: scale(.96); }
.img-zoom-box { background: var(--surface); border-radius: 14px; overflow: hidden; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.img-zoom-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-weight: 700; }
.img-zoom-close { background: none; border: none; font-size: 18px; color: var(--muted); cursor: pointer; line-height: 1; }
.img-zoom-body { padding: 12px; background: #000; display: flex; align-items: center; justify-content: center; overflow: auto; }
.img-zoom-body img { max-width: 100%; max-height: 72vh; object-fit: contain; }

/* ---------- 外卖商家自助申请 ---------- */
.tk-admin-sub { margin-bottom: 10px; }
.tk-apply-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.tk-af-row { display: flex; flex-direction: column; gap: 4px; }
.tk-af-row > label { font-size: 13px; color: var(--muted); font-weight: 600; }
.tk-af-row input, .tk-af-row select { padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; }
.tk-af-row .req { color: var(--danger); }
.tk-af-tip { font-size: 12px; color: var(--muted); line-height: 1.5; }
.dep-tip { margin: 0 0 10px; }
.dep-tip b { color: var(--orange); font-size: 14px; }
.dep-refund { font-size: 12px; color: #16a34a; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; line-height: 1.5; }
.dep-bar { display: flex; align-items: center; gap: 8px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; padding: 8px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 13px; }
.dep-bar b { font-size: 16px; color: #ea580c; }
.dep-bar .btn { margin-left: auto; }
.tk-af-reject { background: rgba(255,77,79,.1); color: var(--danger); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
#applyBox .btn.block[disabled] { opacity: .55; cursor: not-allowed; }

/* ===== v60 店铺位置（经纬度）模块 ===== */
.tk-loc-row .tk-loc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tk-loc-btn { align-self: flex-start; border: 1px solid var(--mint); background: var(--surface); color: var(--mint-ink); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tk-loc-btn:active { background: var(--mint); color: #fff; }
.tk-loc-btn:disabled { opacity: .6; cursor: default; }
.tk-loc-tip { font-size: 12px; color: var(--muted); }
.tk-loc-row input { padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; letter-spacing: .3px; }
.tk-loc-preview { margin-top: 6px; }
.tk-loc-field .tk-loc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

/* 零 key 小地图预览（SVG） */
.loc-minimap { display: block; border-radius: 8px; background: #e8eef3; }
.loc-minimap rect { fill: #e8eef3; }
.loc-land { fill: #cfe8d4; }
.loc-road { fill: none; stroke: #ffffff; stroke-width: 2.5; stroke-linecap: round; }
.loc-pin path { fill: var(--danger); }
.loc-pin circle { fill: #fff; }
.loc-coord-t { fill: #475569; font-size: 9px; font-weight: 600; }
.loc-empty { background: #f1f5f9; }
.loc-empty rect { fill: #f1f5f9; }
.loc-empty-t { fill: #94a3b8; font-size: 11px; }

/* 商家主页「店铺位置」卡片 */
.loc-card { display: flex; gap: 12px; align-items: center; margin: 10px 0 2px; padding: 10px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 12px; }
.tk-shop-head .loc-card { margin: 10px 0 0; }
.loc-card-map { flex: none; }
.loc-card-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.loc-card-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.loc-card-coord { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; word-break: break-all; }
.loc-card-nav { align-self: flex-start; margin-top: 2px; font-size: 13px; font-weight: 700; color: #fff; background: var(--mint); border-radius: 8px; padding: 6px 12px; text-decoration: none; }
.loc-card-nav:active { opacity: .9; }
.apply-warmtip {
  margin: 4px 0;
  padding: 10px 12px;
  background: #ecf8f0;
  border: 1px solid #b7e3c6;
  border-radius: 8px;
  color: #1f7a44;
  font-size: 13px;
  line-height: 1.65;
  width: 100%;
  box-sizing: border-box;
}
.tk-apply-state { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.tk-as-badge { padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.tk-as-badge.pending { background: rgba(255,170,0,.15); color: #FF6A00; }
.tk-as-badge.ok { background: rgba(0,200,120,.15); color: #00b86b; }
.tk-as-info { width: 100%; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.tk-apply-imgs { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.tk-ai { display: flex; flex-direction: column; gap: 4px; }
.proof-imgs { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-ai-l { font-size: 12px; color: var(--muted); }
.tk-ai img, .tk-proof-img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-soft); background: #fff; cursor: pointer; }
.tk-ai img:active, .tk-proof-img:active { transform: scale(.96); }
.muted { color: var(--muted); font-size: 13px; }
.ok { color: #00b86b; font-weight: 700; }
.bad { color: var(--danger); font-weight: 700; }

/* 平台收款方式（申请页展示 + 超管设置弹窗） */
.dep-receive { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 12px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.dep-receive .dr-qr { align-self: center; background: #fff; border-radius: 10px; padding: 10px; }
.dep-receive .dr-qr img { width: 180px; height: 180px; object-fit: contain; cursor: pointer; }
.dep-receive .dr-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 12px; }
.dep-receive .dr-account { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.dep-receive .dr-account b { font-family: var(--font-num); letter-spacing: .5px; }
.dep-receive .dr-tip { font-size: 12px; color: var(--muted); line-height: 1.5; }
.kbz-box .crop-title { font-weight: 700; font-size: 15px; }
.kbz-box .crop-ops { display: flex; gap: 8px; justify-content: flex-end; }
.kbz-box input { padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; width: 100%; box-sizing: border-box; margin-top: 2px; }
/* v53 百货收货信息三输入（姓名/手机号/地址） */
#kbzRecvBox { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; }
#kbzRecvBox[hidden] { display: none; }
.kbz-recv-row { display: flex; align-items: stretch; border: 0.5px solid var(--line-soft); border-radius: var(--r, 8px); overflow: hidden; background: #fff; }
.kbz-recv-row label { flex: 0 0 76px; padding: 9px 8px; font-size: 13px; color: var(--muted); border-right: 0.5px solid var(--line-soft); background: rgba(54,22,54,0.04); display: flex; align-items: center; }
.kbz-recv-row input { flex: 1 1 auto; min-width: 0; padding: 9px 10px; border: 0; background: transparent; color: var(--ink, #222); font-size: 14px; box-sizing: border-box; }
.kbz-recv-row input:focus { outline: none; }
.kbz-recv-row:focus-within { border-color: var(--brand, #7F77DD); }

/* 首页全屏宽轮播广告位：2.5:1 横幅，圆角卡片，间距对齐现有模块 */
.ad-carousel {
  position: relative; width: 100%; margin: 12px 0; border-radius: 14px; overflow: hidden;
  background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.06); user-select: none;
}
.ad-track { display: flex; transition: transform .4s ease; will-change: transform; }
.ad-carousel.dragging .ad-track { transition: none; }
.ad-slide { flex: 0 0 100%; aspect-ratio: 5 / 2; background: #eee; }
.ad-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-slide.ad-clickable { cursor: pointer; }
.ad-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; gap: 6px; justify-content: center; pointer-events: none; }
.ad-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); display: block; transition: all .2s; pointer-events: auto; cursor: pointer; }
.ad-dots i.on { width: 18px; border-radius: 4px; background: #fff; }

/* 首页广告骨架占位：尺寸与真实轮播完全一致（宽100%、margin 12px、圆角14px、5:2），
   首屏随精选分类/为你推荐同步渲染；图片后台加载完成后由 JS 替换为真实轮播，无跳动 */
.ad-skeleton {
  position: relative; width: 100%; margin: 12px 0; border-radius: 14px; overflow: hidden;
  aspect-ratio: 5 / 2; background: #ededed;
}
.ad-skeleton-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #e9e9e9 25%, #f5f5f5 45%, #e9e9e9 65%);
  background-size: 220% 100%;
  animation: ad-skeleton-shimmer 1.3s linear infinite;
}
@keyframes ad-skeleton-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }

/* 超管后台：广告位管理 */
.adm-ads { display: flex; flex-direction: column; gap: 10px; }
.adm-ad { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px; }
.adm-ad img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.adm-ad .adm-ad-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.adm-ad .adm-ad-link { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ad .adm-ad-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-ad .adm-ad-ops button { font-size: 12px; padding: 4px 8px; }
.adm-ad-add { background: var(--surface); border: 1px dashed var(--line-soft); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.adm-ad-add .adm-ad-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adm-ad-add img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; background: #eee; }
.adm-ad-add input[type=text] { flex: 1; min-width: 160px; padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; box-sizing: border-box; }
.adm-ad-add select { padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; }
/* 广告链接选择器：下拉商家 + 搜用户 + 手动输入 */
.ad-user-wrap { position: relative; }
.ad-user-hits { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; max-height: 248px; overflow: auto; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.16); display: none; }
.ad-user-hits.show { display: block; }
.ad-hit { padding: 8px 10px; cursor: pointer; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-hit:last-child { border-bottom: none; }
.ad-hit:hover { background: rgba(255,179,71,.16); }
.ad-hit.empty { color: var(--muted, #999); cursor: default; }
.ad-hit.empty:hover { background: transparent; }
.adm-ad-empty { color: var(--muted); font-size: 13px; padding: 8px 0; }

/* ---------- 社区（图文/短视频，双列瀑布流） ---------- */
.cm-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px; }
.cm-head-tip { font-size: 12px; color: var(--fg-2); }
.cm-grid { columns: 2; column-gap: 10px; padding: 10px 12px 20px; }
.cm-card { display: block; break-inside: avoid; margin: 0 0 10px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); position: relative; color: inherit; text-decoration: none; }
.cm-cover { display: block; width: 100%; min-height: 120px; max-height: 260px; object-fit: cover; background: #f3f0f7; }
video.cm-cover { height: 180px; }
.cm-play { position: absolute; left: 50%; top: 32%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; pointer-events: none; }
.cm-body { padding: 8px 10px 10px; }
.cm-text { font-size: 13px; line-height: 1.45; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-foot { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--fg-2); }
.cm-author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.cm-av.av-img, .cm-av.av-fb, .cm-av .av-img, .cm-av .av-fb { width: 18px; height: 18px; font-size: 11px; flex: none; }
.cm-like { flex-shrink: 0; cursor: pointer; }
.cm-pin { position: absolute; left: 8px; top: 8px; background: var(--brand); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 8px; }
.cm-cmcbadge { font-size: 12px; color: var(--fg-2); }

/* 社区发布窗 */
.cm-pub { margin: 8px 12px; background: #fff; border: 1px solid var(--brand-lite); border-radius: 12px; padding: 10px; display: grid; gap: 8px; }
.cm-pub-tabs { display: flex; gap: 8px; }
.cm-pub-tabs button { flex: 1; height: 32px; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; font-size: 13px; }
.cm-pub-tabs button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.cm-pub textarea { width: 100%; min-height: 90px; border: 1px solid #ddd; border-radius: 8px; padding: 8px; font-size: 14px; resize: vertical; box-sizing: border-box; }
.cm-pub-foot { display: flex; justify-content: space-between; align-items: center; }
.cm-pub-tip { font-size: 12px; color: var(--fg-2); }
.cm-thumbs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cm-thumb { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; }
.cm-thumb img, .cm-thumb video { width: 100%; height: 100%; object-fit: cover; }
.cm-thumb i { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-style: normal; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cm-add { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border: 1px dashed #bbb; border-radius: 8px; color: var(--fg-2); font-size: 13px; cursor: pointer; }
.cm-add.sm { width: auto; height: 28px; padding: 0 10px; border-style: solid; }

/* 社区详情页 */
.cm-detail-media { display: grid; gap: 8px; padding: 10px 12px 0; }
.cm-full-img, .cm-full-video { width: 100%; max-height: 60vh; object-fit: contain; background: #000; border-radius: 10px; display: block; }

/* ===== 社区详情：小红书式沉浸式 ===== */
.cm-immersive { position: fixed; inset: 0; background: #000; overflow: hidden; z-index: 50; }
.cm-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cm-full-media { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.cm-back { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; z-index: 12;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1;
  text-decoration: none; backdrop-filter: blur(4px); }
.cm-caption { position: absolute; left: 0; right: 68px; bottom: 0; z-index: 8; padding: 44px 14px 18px;
  background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; pointer-events: none; }
.cm-caption b { font-size: 14px; }
.cm-caption p { margin: 4px 0 2px; font-size: 13px; line-height: 1.5; max-height: 4.6em; overflow: hidden; }
.cm-caption .cm-cap-time { font-size: 11px; opacity: .7; }
/* 作者行：头像 + 用户名 + 关注按钮（caption 本身 pointer-events:none 供手势穿透，作者行恢复可点） */
.cm-cap-au { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.cm-cap-au .cm-cap-av.av-img, .cm-cap-au .cm-cap-av.av-fb { width: 34px; height: 34px; font-size: 17px; flex: none; }
.cm-cap-au .cm-cap-name { cursor: pointer; }
.cm-cap-au .cm-follow-btn { padding: 5px 14px; font-size: 12px; }
.cm-actions { position: absolute; right: 10px; bottom: 84px; z-index: 9; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.cm-act { background: none; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; padding: 0; }
.cm-act-ic { font-size: 28px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.cm-act-ct { font-size: 12px; }
.cm-act.on .cm-act-ic { filter: drop-shadow(0 0 4px rgba(255,210,0,.9)); }
.cm-swipe-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 11;
  background: rgba(0,0,0,.6); color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 13px;
  opacity: 0; transition: opacity .2s; pointer-events: none; }
.cm-swipe-hint.show { opacity: 1; }
/* 底部半屏评论弹层（含作者信息） */
.cm-sheet-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; display: flex; align-items: flex-end; }
.cm-sheet-mask[hidden] { display: none; }
.cm-sheet { width: 100%; max-height: 72vh; background: #fff; border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column; animation: cmSheetUp .25s ease; }
@keyframes cmSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cm-sheet-author { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #eee; }
.cm-sheet-av.av-img, .cm-sheet-av.av-fb { width: 40px; height: 40px; font-size: 20px; flex: none; }
.cm-sheet-au-info { flex: 1; min-width: 0; }
.cm-sheet-au-info b { font-size: 14px; }
.cm-sheet-au-info span { display: block; font-size: 12px; color: var(--fg-2); }
.cm-sheet-head { padding: 10px 16px; font-weight: 600; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
.cm-sheet-close { cursor: pointer; color: var(--fg-2); font-size: 16px; padding: 0 4px; }
.cm-sheet-list { flex: 1; overflow-y: auto; padding: 8px 16px; min-height: 80px; }
.cm-detail-content { padding: 12px; font-size: 15px; line-height: 1.6; word-break: break-word; }
.cm-detail-meta { padding: 0 12px; font-size: 12px; color: var(--fg-2); }
/* 详情页作者条（大头像+昵称+关注按钮，对齐直播/短视频样式） */
.cm-author-bar { display: flex; align-items: center; gap: 10px; padding: 4px 12px 0; }
.cm-author-l { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.cm-av-lg.av-img, .cm-av-lg.av-fb { width: 42px; height: 42px; font-size: 22px; flex: none; }
.cm-author-info { display: flex; flex-direction: column; min-width: 0; }
.cm-author-info b { font-size: 15px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-author-info span { font-size: 11px; color: var(--fg-2); }
.cm-follow-btn { flex: none; border: none; border-radius: 999px; padding: 7px 20px; background: #e64340; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.cm-follow-btn.on { background: #f0f0f0; color: #999; font-weight: 400; }
/* 作者卡片弹层 */
.cm-acard-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 999; }
.cm-acard { background: #fff; border-radius: 16px; padding: 26px 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 264px; }
.cm-acard-av.av-img, .cm-acard-av.av-fb { width: 68px; height: 68px; font-size: 34px; }
.cm-acard-name { font-size: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-acard-stats { display: flex; gap: 22px; font-size: 13px; color: var(--fg-2); }
.cm-acard-stats b { color: var(--fg); font-size: 15px; margin-right: 3px; }
.cm-acard .cm-follow-btn { width: 100%; padding: 9px 0; }
.cm-acard-close { border: none; background: #f2f2f2; color: #666; border-radius: 999px; padding: 8px 0; width: 100%; font-size: 13px; cursor: pointer; }
.cm-ops { display: flex; gap: 12px; align-items: center; padding: 10px 12px; }
.cm-comments { border-top: 1px solid #eee; padding: 8px 12px 90px; display: grid; gap: 10px; }
.cm-comment b { font-size: 12px; color: var(--brand); }
.cm-comment p { margin: 2px 0; font-size: 14px; word-break: break-word; }
.cm-comment span { font-size: 11px; color: var(--fg-2); }
.cm-cmt-bar { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 8px 10px 12px; background: var(--surface, #fff); border-top: 1px solid #eee; }
.cm-cmt-bar input { flex: 1; height: 34px; border: 1px solid #ddd; border-radius: 17px; padding: 0 12px; }

/* 后台社区管理 */
.ca-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #f3f0f7; }
.cm-adm-text { font-size: 13px; margin: 4px 0; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== 媒体渐进式 / 懒加载 / 视频生命周期（图片+视频性能优化） ===== */
/* 详情图：模糊占位铺满 → 高清淡入（progressive 预加载，杜绝从上到下扫描刷出） */
.m-media { position: relative; display: block; width: 100%; background: #f0f2f5; overflow: hidden; }
.m-media > .m-blur, .m-media > .m-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.m-media > .m-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity .4s ease; }
.m-media > .m-real.m-loaded { opacity: 1; }
/* 列表/卡片图：固定宽高比占位防布局跳动 + 懒加载（不强制淡入，避免卡片列表抖动） */
.m-lazy { display: block; width: 100%; background: #f0f2f5; }

/* 帖子卡片缩略图 / 车辆频道图：沿用既有容器高度与裁切 */
.post .thumb .m-lazy, .crow .cimg .m-lazy { width: 100%; height: 100%; object-fit: cover; }
/* 评价晒图：沿用既有 76px 网格 */
.rv-imgs .m-lazy { width: 76px; height: 76px; border-radius: 8px; object-fit: cover; background: var(--surface-3); }

/* 社区卡片封面：对齐原 .cm-cover 观感 */
.cm-card .m-lazy, .cm-card .m-media { display: block; width: 100%; min-height: 120px; max-height: 260px; object-fit: cover; background: #f3f0f7; }
.cm-card .m-media { height: 180px; }
.cm-card .m-media > .m-real { object-fit: cover; }

/* 沉浸式详情：媒体铺满舞台（模糊占位先铺满，原图淡入） */
.cm-stage .m-media { position: absolute; inset: 0; height: 100%; }
.cm-stage .m-media > .m-real { object-fit: contain; background: #000; }

/* 帖子详情大图：填满 .sv-item（沿用 .sv-item video 的同款裁切） */
.sv-item .m-media { position: absolute; inset: 0; height: 100%; }
.sv-item .m-media > .m-real { object-fit: cover; }

/* 后台社区管理缩略图：对齐原 .ca-thumb */
.admin-user .m-media, .admin-user .m-lazy { width: 56px; height: 56px; flex: 0 0 56px; object-fit: cover; border-radius: 8px; background: #f3f0f7; overflow: hidden; }

/* ============================================================
   超管后台桌面版登录页（仅 admin.* 域名渲染，见 app.js adminLoginView）
   宽屏左右分栏：左品牌区（bar-grad 渐变）+ 右登录表单；窄屏自动隐藏品牌区
   ============================================================ */
.alogin-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(248,68,245,0.14), transparent 55%),
    radial-gradient(95% 55% at 90% 110%, rgba(145,8,142,0.12), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed; }
.alogin-card { display: flex; width: min(880px, 100%); min-height: 520px;
  border-radius: 20px; overflow: hidden; background: var(--surface, #fff);
  box-shadow: 0 24px 60px rgba(145, 8, 142, 0.16); }
.alogin-brand { flex: 1 1 50%; background: var(--bar-grad); color: #fff;
  padding: 56px 44px; display: flex; flex-direction: column; justify-content: center; }
.alogin-logo { font-family: var(--font-serif); font-size: 42px; font-weight: 800; letter-spacing: 2px; }
.alogin-sub { margin-top: 10px; font-size: 18px; opacity: .92; }
.alogin-feats { margin: 36px 0 0; padding: 0; list-style: none; font-size: 14px; opacity: .88; line-height: 2; }
.alogin-feats li::before { content: '✓ '; font-weight: 700; }
.alogin-form { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; padding: 56px 48px; }
.alogin-title { font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 26px; }
.alogin-form .field { margin-bottom: 16px; }
.alogin-form .btn { height: 48px; font-size: 16px; margin-top: 8px; }
.alogin-tip { margin-top: 18px; font-size: 12px; color: var(--ink-2); text-align: center; }
@media (max-width: 760px) { .alogin-brand { display: none; } .alogin-card { min-height: 0; } }
/* 桌面登录页时摘掉 #app 的手机壳（index.html 里 #app 自带 .shell max-width:460px） */
#app.wide-shell { max-width: 100%; padding-bottom: 0; }

/* ============================================================
   后台商家消息提醒弹窗（新增功能，零后端改动，原有功能不变）
   居中卡片 + 半透明遮罩，支持点遮罩/关闭按钮手动关闭
   ============================================================ */
.mn-mask { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 8, 20, 0.38); z-index: 9999; animation: mnFade .18s ease; }
@keyframes mnFade { from { opacity: 0 } to { opacity: 1 } }
.mn-card { width: min(420px, 92vw); background: var(--surface, #fff); border-radius: 16px;
  padding: 26px 24px 20px; box-shadow: 0 20px 50px rgba(145, 8, 142, 0.25); text-align: center; }
.mn-title { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.mn-text { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 20px; }
.mn-ops { display: flex; gap: 12px; justify-content: center; }

/* 后台常驻「商家消息提醒」开关条（banner 下方，可随时开/关，不再依赖一次性引导） */
.admin-toolbar { display: flex; align-items: center; gap: 10px; box-sizing: border-box; max-width: 100%;
  padding: 10px 12px; margin: 0 0 12px; background: var(--surface, #fff);
  border: 1px solid var(--line, #eee); border-radius: var(--r-card, 14px); }
.mn-tip { flex: 1; font-size: 13px; color: var(--ink-2); }
.mn-state { font-size: 12px; color: var(--ink-3, #98a); min-width: 42px; text-align: right; }
.mn-switch { position: relative; width: 44px; height: 24px; flex: 0 0 auto; padding: 0;
  border: none; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: background .2s; }
.mn-switch.on { background: var(--brand, #ff6a00); }
.mn-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; }
.mn-switch.on .mn-knob { left: 22px; }
.mn-ops .btn { min-width: 110px; }

/* ============ 招聘专区（独立模块） ============ */
.fab {
  position: fixed; right: 16px; bottom: 20px; width: 54px; height: 54px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 28px; line-height: 54px; text-align: center;
  text-decoration: none; box-shadow: 0 6px 18px rgba(255,106,0,.4); z-index: 50;
}
.fab:active { transform: scale(.94); }

.job-view { padding: 10px 10px 80px; }
/* 招聘分类区：纯文字、单行横向滑动（拼多多风格），不换行、无图标 */
.job-subs {
  display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.job-subs::-webkit-scrollbar { display: none; }
.jsub {
  flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
  padding: 7px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink-2); font-size: 13px; cursor: pointer;
}
.jsub.on { background: var(--brand); color: #fff; border-color: var(--brand); }
/* 招聘列表：快手风格双列瀑布流（仅作用于招聘页 .job-list，不影响其他页 .feed/.card） */
.job-list { column-count: 2; column-gap: 8px; }
.job-list .card.job {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  width: 100%; display: inline-block; margin: 0 0 8px;
}
.job-list .empty { column-span: all; }

.job-detail { padding: 12px 12px 90px; }
.job-detail .jd-head { margin-bottom: 10px; }
.job-detail .jd-head .ttl { font-size: 19px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.jd-salary { color: var(--danger); font-weight: 800; font-size: 22px; margin: 6px 0; }
.jd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.job-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.job-gallery .m-media { width: 100%; border-radius: 10px; overflow: hidden; background: #eee; }
.job-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jd-info { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.jd-row { display: flex; gap: 12px; padding: 6px 0; font-size: 14px; border-bottom: 1px dashed var(--line-soft); }
.jd-row:last-child { border-bottom: none; }
.jd-row .k { color: var(--muted); width: 64px; flex: none; }
.jd-phone { font-weight: 700; letter-spacing: .5px; }
.jd-content { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px; font-size: 14px; line-height: 1.7; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; margin-bottom: 12px; }
.jd-actions { display: flex; flex-direction: column; gap: 10px; }
.jd-top-item { text-align: left; }

/* 百货商家专属店铺页（#/mall/shop/:uid 公开买家页） */
.mall-shop { padding-bottom: 24px; }
.ms-cover { width: 100%; height: 160px; background: #2C2F36; overflow: hidden; }
.ms-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-cover-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; background: #2C2F36; }
.ms-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 4px; }
.ms-name { font-size: 18px; font-weight: 700; color: var(--text); }
.ms-badge { font-size: 12px; color: #FF9A3D; background: rgba(255,154,61,.12); padding: 2px 8px; border-radius: 999px; }
.ms-intro { padding: 0 16px 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ms-addr { padding: 0 16px 8px; font-size: 13px; color: var(--muted); }
.ms-call { margin: 4px 16px 12px; width: calc(100% - 32px); height: 42px; border: none; border-radius: 999px; background: linear-gradient(135deg,#FFC24B,#FF9A3D); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.ms-sec { padding: 10px 16px; font-size: 14px; font-weight: 700; color: var(--text); border-top: 1px solid var(--line-soft); }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.ms-p { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; cursor: pointer; }
.ms-p-media { width: 100%; height: 120px; background: #2C2F36; overflow: hidden; }
.ms-p-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-p-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.ms-p-title { padding: 8px 10px 2px; font-size: 13px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-p-price { padding: 0 10px 10px; font-size: 14px; font-weight: 700; color: #F5513C; }
.ms-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* ============================================================
   一级代理分销（邀请）：后台代理管理 + 客户端我的邀请
   ============================================================ */
/* 后台：分红明细行 */
.inv-divs { border-top: 1px dashed var(--line-soft); padding-top: 8px; }
.inv-div-row { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.inv-div-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink); }
.inv-div-time { font-size: 11px; color: var(--muted); }
.inv-div-bal { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.inv-div-amt { color: var(--brand); font-weight: 700; }
.inv-div-meta { font-size: 11px; margin-top: 2px; word-break: break-all; }

/* 客户端：我的邀请卡片 */
.invite-code-box { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--sh-1); padding: 14px 16px; }
.invite-code-label { font-size: 12px; color: var(--muted); }
.invite-code-val { font-size: 26px; font-weight: 800; letter-spacing: 3px; color: var(--brand); }
.invite-code-box .btn { align-self: flex-start; margin-top: 4px; }
.invite-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.invite-stat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--sh-1); padding: 12px 14px; text-align: center; }
.invite-stat .sv { font-size: 20px; font-weight: 800; color: var(--brand); }
.invite-stat .sl { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.invite-tip { font-size: 12px; color: var(--muted); margin: 10px 2px 4px; line-height: 1.5; }
.invite-detail-title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 6px 2px; }

/* ===== 同城街 APK 套壳：下载 CTA + APK 内自动隐藏（洋红配色） ===== */
.apk-cta {
  position: fixed; right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 40; display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 999px;
  background: linear-gradient(135deg, #f844f5 0%, #af0eac 45%, #91088e 100%);
  color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 18px rgba(175,14,172,.35);
}
.apk-cta::before { content: "↓"; font-size: 16px; }
/* 在 APK（Html5Plus）运行时内，隐藏所有下载/添加到桌面类入口 */
.in-apk .apk-cta { display: none !important; }
.in-apk [data-apk-hide] { display: none !important; }

/* ---------- 客服内嵌页（#/support）：appbar + iframe 纵向 flex ----------
   iframe 自动填满 appbar 之下全部空间，不再用 JS 测高定位，
   根治测高时机误差造成的顶部白色断口；wrap 底色用品红渐变兜底，
   YundaDesk 加载间隙也与顶栏连成一体，视觉无断缝。 */
#app.kf-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
#app.kf-page #view { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#app.kf-page .kf-wrap { flex: 1 1 auto; width: 100%; min-height: 0; background: var(--bar-grad); }
#app.kf-page .kf-frame { width: 100%; height: 100%; border: 0; display: block; background: transparent; }

/* ---------- v57 私信顶部「来源帖子卡片」----------
   详情页「在线聊」进入会话时，由后端把来源帖绑定到会话（conversations.post_id），
   会话页在 appbar 与聊天区之间固定展示该卡片：首图 + 标题，点击跳回帖子详情。
   买卖双方共用会话页，两端都显示。无来源帖（post_id 为 NULL）时 HTML 不渲染，样式不涉及。 */
.src-post { display: flex; align-items: center; gap: 10px; margin: 10px var(--s4) 0; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r, 8px); }
.src-post:active { background: rgba(0, 0, 0, 0.03); }
.src-post-img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; }
.src-post-ph { width: 44px; height: 44px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(84, 74, 183, 0.07); font-size: 18px; }
.src-post-info { flex: 1; min-width: 0; }
.src-post-lb { color: var(--muted); font-size: var(--fs-xs); }
.src-post-ttl { color: var(--ink-2); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-post-go { color: var(--muted); flex: none; font-size: 18px; line-height: 1; }