/* ==========================================================
   便民信息网 · 前台样式
   设计原则：大字号、大按钮、高对比、少层级（适老化）
   ========================================================== */

:root{
  --primary:#e8542f;
  --primary-2:#ff7a45;
  --primary-soft:#fff1ec;
  --ink:#1f2430;
  --ink-2:#3c4351;
  --muted:#6f7789;
  --line:#e8ecf2;
  --bg:#f4f6f9;
  --card:#ffffff;
  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#dc2626;
  --blue:#2563eb;
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 2px 10px rgba(31,36,48,.06);
  --shadow-md:0 8px 28px rgba(31,36,48,.10);
  --shadow-lg:0 18px 50px rgba(31,36,48,.14);
  --max:1200px;
  --fs:16px;
}

/* 字号档位：1 标准 / 2 大 / 3 特大 */
html[data-fs="2"]{ --fs:18px; }
html[data-fs="3"]{ --fs:21px; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:var(--fs);
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; border:0; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
h1,h2,h3,h4,p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 16px; }
.hide{ display:none !important; }
.mt0{margin-top:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.tc{text-align:center}.tr{text-align:right}
.muted{color:var(--muted)}
.small{font-size:.85em}
.strong{font-weight:700}
.price{color:var(--primary); font-weight:800; }
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.flex{display:flex;align-items:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}

/* ---------------- 顶部工具条 ---------------- */
.topbar{
  background:linear-gradient(90deg,#2b3040,#1f2430);
  color:#cfd5e2; font-size:.82em; line-height:38px;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; }
.topbar a{ color:#cfd5e2; }
.topbar a:hover{ color:#fff; }
.topbar .tb-left{ display:flex; gap:18px; align-items:center; }
.topbar .tb-right{ display:flex; gap:14px; align-items:center; }
.topbar .fs-switch{ display:flex; align-items:center; gap:6px; }
.topbar .fs-switch b{ font-weight:500; opacity:.75; }
.topbar .fs-switch button{
  border:1px solid rgba(255,255,255,.25); background:transparent; color:#cfd5e2;
  border-radius:6px; padding:0 8px; line-height:20px; cursor:pointer; font-size:12px;
}
.topbar .fs-switch button.on{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* ---------------- 主头部 ---------------- */
.header{ background:var(--card); box-shadow:0 1px 0 var(--line); position:relative; z-index:20; }
.header .wrap{ display:flex; align-items:center; gap:24px; padding-top:16px; padding-bottom:16px; }
.logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.logo .mark{
  width:46px;height:46px;border-radius:13px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px;
  box-shadow:0 6px 16px rgba(232,84,47,.32);
}
.logo .txt b{ display:block; font-size:1.18em; line-height:1.2; letter-spacing:.5px; }
.logo .txt span{ display:block; font-size:.72em; color:var(--muted); }

.search{ flex:1; min-width:0; }
.search form{ display:flex; align-items:center; gap:0; background:#f2f4f8; border:2px solid transparent; border-radius:999px; padding:4px 4px 4px 18px; transition:.18s; }
.search form:focus-within{ border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(232,84,47,.10); }
.search input{ flex:1; border:0; background:transparent; outline:none; height:44px; font-size:1em; }
.search button{
  border:0; height:44px; padding:0 26px; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; font-weight:700; font-size:1em;
}
/* margin-left:auto：后台关掉搜索框后，右侧按钮仍然贴右边，不会跟着 Logo 挤在左边 */
.header .act{ display:flex; gap:10px; flex:0 0 auto; margin-left:auto; }

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px; border-radius:12px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-weight:600; cursor:pointer;
  transition:.16s; white-space:nowrap; font-size:1em;
}
.btn:hover{ border-color:#cfd6e2; box-shadow:var(--shadow); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); border-color:transparent; color:#fff; box-shadow:0 6px 18px rgba(232,84,47,.28); }
.btn-primary:hover{ box-shadow:0 10px 24px rgba(232,84,47,.36); }
.btn-ghost{ background:var(--primary-soft); color:var(--primary); border-color:transparent; }
.btn-ok{ background:var(--ok); border-color:transparent; color:#fff; }
.btn-warn{ background:var(--warn); border-color:transparent; color:#fff; }
.btn-bad{ background:var(--bad); border-color:transparent; color:#fff; }
.btn-blue{ background:var(--blue); border-color:transparent; color:#fff; }
.btn-lg{ height:56px; padding:0 34px; font-size:1.08em; border-radius:14px; }
.btn-block{ display:flex; width:100%; }
.btn-sm{ height:36px; padding:0 14px; font-size:.86em; border-radius:9px; }
.btn[disabled],.btn.disabled{ opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ---------------- 分类切换条（列表页顶部） ----------------
   以前是横向滑动（overflow-x:auto + 隐藏滚动条），手机上 9 个分类只能看到 3 个，
   不知道能滑的人就以为只有这几个。改成自动折行，全部分类一眼看全、直接点。 */
.cat-bar{ display:flex; flex-wrap:wrap; gap:8px; padding:14px 0 }
.cat-bar a{ height:42px; padding:0 18px }
@media (max-width:700px){
  .cat-bar{ gap:7px; padding:12px 0 10px }
  .cat-bar a{ height:36px; padding:0 12px; font-size:.84em; border-radius:9px }
  /* 折行后按钮变多，轻微收一下阴影，免得一片浮起来太花 */
  .cat-bar a.btn-primary{ box-shadow:0 4px 12px rgba(232,84,47,.26) }
}

/* ---------------- 导航 ---------------- */
.navbar{ background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:19; }
.navbar .wrap{ display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; }
.navbar .wrap::-webkit-scrollbar{ display:none; }
.navbar a{
  padding:14px 16px; font-weight:600; color:var(--ink-2); white-space:nowrap; position:relative; font-size:.98em;
}
.navbar a:hover{ color:var(--primary); }
.navbar a.on{ color:var(--primary); }
.navbar a.on::after{ content:""; position:absolute; left:16px; right:16px; bottom:0; height:3px; border-radius:3px; background:var(--primary); }

/* ---------------- 卡片 / 面板 ---------------- */
.card{ background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.panel{ background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:24px; }
.panel-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.panel-hd h2{ font-size:1.2em; font-weight:800; letter-spacing:.3px; position:relative; padding-left:14px; }
.panel-hd h2::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:20px; border-radius:3px; background:linear-gradient(180deg,var(--primary),var(--primary-2)); }
.panel-hd .more{ color:var(--muted); font-size:.86em; }
.panel-hd .more:hover{ color:var(--primary); }

/* ---------------- 首页 Hero ---------------- */
.hero{
  background:linear-gradient(135deg,#2b3040 0%,#3a4155 45%,#4a3b3a 100%);
  color:#fff; padding:34px 0 28px; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,84,47,.45),transparent 65%);
}
.hero::after{
  content:""; position:absolute; left:-80px; bottom:-160px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,69,.25),transparent 65%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero h1{ font-size:1.85em; font-weight:800; letter-spacing:.5px; }
.hero p{ color:#c9d0de; margin-top:6px; font-size:.95em; }
.hero .big-search{ margin-top:20px; display:flex; background:#fff; border-radius:16px; padding:6px; box-shadow:var(--shadow-lg); max-width:760px; }
.hero .big-search select{ border:0; outline:none; background:#f2f4f8; border-radius:11px; padding:0 14px; height:54px; font-weight:600; color:var(--ink-2); }
.hero .big-search input{ flex:1; border:0; outline:none; padding:0 18px; height:54px; font-size:1.05em; min-width:0; }
.hero .big-search button{
  border:0; height:54px; padding:0 40px; border-radius:12px; cursor:pointer; color:#fff; font-weight:800; font-size:1.05em;
  background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 8px 20px rgba(232,84,47,.35);
}
.hero .quick{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; font-size:.85em; }
.hero .quick a{ padding:4px 14px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); color:#e3e8f2; }
.hero .quick a:hover{ background:rgba(232,84,47,.9); border-color:transparent; }

/* ---------------- 分类宫格 ---------------- */
.cat-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
.cat-grid a{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 6px;
  border-radius:16px; transition:.18s; background:var(--card); box-shadow:var(--shadow);
}
.cat-grid a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.cat-grid .ic{
  width:54px; height:54px; border-radius:17px; display:flex; align-items:center; justify-content:center;
  background:var(--primary-soft); color:var(--primary);
}
.cat-grid .ic svg{ width:28px; height:28px; }
.cat-grid span{ font-size:.92em; font-weight:700; color:var(--ink-2); }
.cat-grid small{ font-size:.72em; color:var(--muted); }

/* ---------------- 信息卡片 ---------------- */
.feed{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.item{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; gap:14px; padding:14px; transition:.18s; position:relative; overflow:hidden;
}
.item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.item .thumb{
  width:132px; height:104px; flex:0 0 auto; border-radius:11px; overflow:hidden; background:#eef1f6; position:relative;
}
.item .thumb img{ width:100%; height:100%; object-fit:cover; }
.item .thumb .noimg{ width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#c3cad6;font-size:12px; }
.item .info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.item .info h3{ font-size:1.02em; font-weight:700; line-height:1.5; margin-bottom:6px; }
.item .info h3 a:hover{ color:var(--primary); }
.item .desc{ font-size:.85em; color:var(--muted); line-height:1.6; margin-bottom:auto; }
/* 元信息行：分类 / 地区 / 价格 / 时间
   手机上卡片内容区只有 218px 宽，四块碎片横着放不下。
   以前是 space-between + 两个包裹 span，窄屏时 span 被压到内容宽度以下，
   于是「鄂前旗」被劈成「鄂前」+「旗」、「5小时前」被劈成「5小时」+「前」，
   看起来就是一行字乱七八糟地折成两行。
   现在：每个碎片都是直接的 flex 子项，允许换行但每项 nowrap，
   折行只发生在碎片之间；价格+时间合成一个整体靠右，
   放不下就整体挪到第二行右端，绝不会把一个词劈开。 */
.item .meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  margin-top:8px; font-size:.78em; color:var(--muted); min-width:0;
}
.item .meta > *{ min-width:0; }
.item .meta .tag{
  background:#f2f4f8; color:var(--muted); padding:2px 8px; border-radius:6px;
  display:inline-block; max-width:100%; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; vertical-align:middle; flex:0 0 auto;
}
.item .meta .badge,.item .meta .st{ flex:0 0 auto; }
.item .meta .meta-end{
  flex:0 0 auto; margin-left:auto; display:flex; align-items:center;
  gap:8px; white-space:nowrap;
}
.item .meta .meta-time{ white-space:nowrap; }
.item .meta .meta-left{ color:var(--primary); font-weight:700; white-space:nowrap; flex:0 0 auto; }
/* 独占一行（会员中心「我的信息」里那串时间 / 浏览 / 看电话） */
.item .meta .meta-sub{ flex:1 1 100%; white-space:normal; overflow-wrap:anywhere; }
/* 行内每一段（时间 / 浏览 / 看电话）单独不可拆，换行只发生在段与段之间 */
.item .meta .meta-sub .ms{ white-space:nowrap; }
.item .price-tag{ color:var(--primary); font-weight:800; font-size:1.02em; white-space:nowrap; flex:0 0 auto; }
.badge{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:6px; font-size:.72em; font-weight:700; }
.badge-top{ background:linear-gradient(135deg,#ff5a3c,#ff8a3d); color:#fff; }
.badge-rec{ background:#eaf1ff; color:var(--blue); }
.badge-new{ background:#e9f9ef; color:var(--ok); }
.badge-vip{ background:linear-gradient(135deg,#3d2b2b,#7a3a20); color:#ffd9a8; letter-spacing:.5px; }

/* 列表行（手机端更像列表） */
.feed.list{ grid-template-columns:1fr; gap:10px; }
.feed.list .item{ padding:12px; }
.feed.list .thumb{ width:112px; height:88px; }

/* ---------------- 侧栏 ---------------- */
.layout{ display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
/* 后台关掉「最新发布」后只剩侧栏：单列并靠右，不留一大片空白 */
.layout-nofeed{ grid-template-columns:minmax(0,360px); justify-content:end; }
.side-card{ background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px; margin-bottom:16px; }
.side-card h3{ font-size:1em; font-weight:800; margin-bottom:14px; padding-left:12px; position:relative; }
.side-card h3::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:3px; background:var(--primary); }
.rank li{ display:flex; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:.9em; }
.rank li:last-child{ border-bottom:0; }
.rank .n{ width:22px;height:22px;flex:0 0 auto;border-radius:7px;background:#f2f4f8;color:var(--muted);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center; }
.rank li:nth-child(1) .n{ background:linear-gradient(135deg,#ff5a3c,#ff8a3d); color:#fff; }
.rank li:nth-child(2) .n{ background:#ffb020; color:#fff; }
.rank li:nth-child(3) .n{ background:#f59e0b; color:#fff; }
.rank a{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------------- 广告 ---------------- */
.ad-box{ position:relative; margin:16px 0; }
.ad-box .ad-tag{
  position:absolute; right:8px; top:8px; z-index:3; font-size:10px; line-height:16px;
  padding:0 5px; border-radius:4px; background:rgba(0,0,0,.32); color:#fff; letter-spacing:1px;
}
.ad-box a{ display:block; }
.ad-box img{ width:100%; border-radius:var(--radius); }
.ad-slider{ position:relative; overflow:hidden; border-radius:var(--radius); }
.ad-slider .ad-slide{ display:none; }
.ad-slider .ad-slide.active{ display:block; animation:fadeIn .4s; }
.ad-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:6px; }
.ad-dots i{ width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55); display:block; cursor:pointer; }
.ad-dots i.on{ background:#fff; width:16px; border-radius:4px; }
.ad-text{ display:block; padding:10px 14px; background:var(--primary-soft); color:var(--primary); border-radius:10px; font-size:.9em; font-weight:600; }
.ad-html{ border-radius:var(--radius); overflow:hidden; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* 漂浮广告 */
.ad-float{ position:fixed; z-index:80; }
.ad-float.ad-float_left{ left:12px; bottom:120px; width:120px; }
.ad-float.ad-float_right{ right:12px; bottom:120px; width:120px; }
.ad-float .ad-close{
  position:absolute; right:-8px; top:-8px; width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:0; cursor:pointer; font-size:12px; line-height:22px; text-align:center; z-index:5;
}
.ad-float .ad-box{ margin:0; }
.ad-float img{ border-radius:10px; box-shadow:var(--shadow-md); }

/* 弹窗广告 */
.ad-popup-mask{ position:fixed; inset:0; background:rgba(20,24,32,.55); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.ad-popup{ position:relative; max-width:400px; width:100%; background:#fff; border-radius:18px; padding:10px; box-shadow:var(--shadow-lg); }
.ad-popup img{ border-radius:12px; }
.ad-popup .ad-close{ position:absolute; right:-10px; top:-10px; width:34px;height:34px;border-radius:50%;background:#fff;color:#555;border:0;cursor:pointer;font-size:18px;box-shadow:var(--shadow); }

/* ---------------- 表单 ---------------- */
.form-row{ margin-bottom:18px; }
.form-row > label{ display:block; font-weight:700; margin-bottom:8px; font-size:.95em; }
.form-row .tip{ font-size:.82em; color:var(--muted); margin-top:6px; }
.req::after{ content:"*"; color:var(--bad); margin-left:3px; }
.input,.select,.textarea{
  width:100%; height:50px; padding:0 16px; border:1.5px solid var(--line); border-radius:12px;
  background:#fff; outline:none; transition:.16s;
}
.textarea{ height:auto; min-height:130px; padding:14px 16px; line-height:1.7; resize:vertical; }
.input:focus,.select:focus,.textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(232,84,47,.10); }
.input::placeholder,.textarea::placeholder{ color:#aab1bf; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f7789' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.input-group{ display:flex; gap:10px; }
.input-group .btn{ flex:0 0 auto; height:50px; }
.check{ display:flex; align-items:flex-start; gap:10px; font-size:.9em; color:var(--ink-2); cursor:pointer; }
.check input{ width:22px;height:22px;margin:2px 0 0; accent-color:var(--primary); flex:0 0 auto; }

/* 上传 */
.uploader{ display:flex; flex-wrap:wrap; gap:10px; }
.uploader .up-item{ width:96px;height:96px;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line); }
.uploader .up-item img{ width:100%;height:100%;object-fit:cover; }
.uploader .up-item .del{ position:absolute; right:0; top:0; width:22px;height:22px;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:0 0 0 8px;cursor:pointer; }
.uploader .up-item .crop{
  position:absolute; left:0; bottom:0; width:24px;height:24px;
  background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:0 9px 0 12px;
  cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;
}
.uploader .up-item .crop:hover{ background:rgba(232,84,47,.92); }
.uploader .up-item .crop:disabled{ opacity:.5; cursor:default; }
.uploader .up-btn{
  width:96px;height:96px;border-radius:12px;border:2px dashed #cfd6e2;background:#fafbfd;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);cursor:pointer;font-size:.78em;
}
.uploader .up-btn:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }

/* ---------------- 详情页 ---------------- */
.detail{ display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
.detail-main{ background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:26px; }
.detail-title{ font-size:1.5em; font-weight:800; line-height:1.45; }
.detail-meta{ display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:.86em; margin-top:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.detail-price{ font-size:1.6em; color:var(--primary); font-weight:800; margin:16px 0; }
.detail-content{ font-size:1.02em; line-height:1.95; color:var(--ink-2); white-space:pre-wrap; word-break:break-word; }
.detail-imgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }
.detail-imgs img{ border-radius:12px; width:100%; height:150px; object-fit:cover; cursor:zoom-in; }

/* 电话卡片 */
.phone-card{
  background:linear-gradient(135deg,#fff6f2,#fff); border:1.5px dashed #ffc9b6;
  border-radius:16px; padding:20px; margin:20px 0; text-align:center;
}
.phone-card .ph-mask{ font-size:1.6em; font-weight:800; letter-spacing:2px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.phone-card .ph-real{ font-size:1.75em; font-weight:800; letter-spacing:1px; color:var(--primary); }
.phone-card .ph-tip{ font-size:.84em; color:var(--muted); margin-top:8px; }
.phone-card .ph-act{ margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.phone-card .price-line{ color:var(--primary); font-weight:700; }

/* ---------------- 二维码支付 ---------------- */
.qr-pay{
  margin-top:18px; padding:22px 18px 18px; background:#fff;
  border:1.5px solid #ffd9c9; border-radius:16px; text-align:center;
  box-shadow:0 10px 30px rgba(232,84,47,.09);
  animation:qrIn .28s ease-out;
}
@keyframes qrIn{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

.qr-pay-hd{ font-size:1.12em; font-weight:800; color:var(--ink); }
.qr-pay-hd .qr-price{ color:var(--primary); font-size:1.18em; }
.qr-pay-sub{ font-size:.86em; color:var(--muted); margin-top:6px; line-height:1.6; }

.qr-tabs{ display:flex; gap:10px; justify-content:center; margin:16px 0 14px; flex-wrap:wrap; }
.qr-tabs button{
  height:48px; padding:0 24px; border-radius:12px; border:2px solid transparent;
  background:#f4f6fa; color:var(--ink-2); font-weight:700; font-size:.95em;
  cursor:pointer; transition:.16s; font-family:inherit;
}
.qr-tabs button:hover{ background:#eef1f7; }
.qr-tabs button.on{
  background:#fff; border-color:var(--primary); color:var(--primary);
  box-shadow:0 6px 16px rgba(232,84,47,.16);
}
.qr-tabs-single .qr-tag{
  display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:10px;
  background:#fff4ef; color:var(--primary); font-weight:700; font-size:.92em;
}

.qr-img{
  width:240px; height:240px; margin:0 auto; border-radius:14px; overflow:hidden;
  background:#f7f9fc; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.qr-img img{ width:100%; height:100%; object-fit:contain; display:block; }

.qr-amount{
  font-size:2.05em; font-weight:800; color:var(--primary);
  margin:14px 0 4px; font-variant-numeric:tabular-nums; letter-spacing:-.5px;
}

.qr-steps{
  list-style:none; counter-reset:qs; margin:14px auto 0; max-width:360px;
  text-align:left; padding:0;
}
.qr-steps li{
  position:relative; padding-left:34px; margin:10px 0;
  font-size:.9em; color:var(--ink-2); line-height:1.55; counter-increment:qs;
}
.qr-steps li::before{
  content:counter(qs); position:absolute; left:0; top:1px;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff;
  font-size:.72em; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.qr-steps li b{ color:var(--primary); }

.qr-notify{
  margin:14px auto 0; max-width:380px; padding:10px 14px;
  background:#fff8e6; color:#9a6b00; border-radius:10px;
  font-size:.84em; line-height:1.6; text-align:left;
}

.qr-paid-btn{ margin-top:16px; }

.qr-ordno{
  margin-top:12px; font-size:.78em; color:var(--muted);
  font-variant-numeric:tabular-nums; word-break:break-all;
}

/* 等待确认 */
.qr-spin{
  width:38px; height:38px; margin:6px auto 14px;
  border:3.5px solid #ffe2d6; border-top-color:var(--primary);
  border-radius:50%; animation:qrSpin .8s linear infinite;
}
@keyframes qrSpin{ to{ transform:rotate(360deg); } }
.qr-pay-pending{ padding:28px 18px 22px; }
.qr-pending-t{ font-size:1.05em; font-weight:800; color:var(--ink); }
.qr-pending-s{ font-size:.86em; color:var(--muted); margin-top:8px; line-height:1.65; }
.qr-pending-timer{
  display:inline-flex; align-items:center; height:32px; padding:0 14px; margin-top:14px;
  background:#f4f6fa; border-radius:9px; font-size:.85em; font-weight:700;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.qr-pending-help{
  margin-top:16px; font-size:.8em; color:var(--muted);
  padding-top:14px; border-top:1px dashed var(--line); line-height:1.6;
}

/* 成功 */
.qr-pay-done{ padding:28px 18px; }
.qr-done-ic{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff;
  font-size:30px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(22,163,74,.28);
}

.qr-pay-loading{ padding:34px 18px; }

/* ---------------- 微信官方支付 ---------------- */
.qr-pay-wx .qr-tag-wx{ background:#e8f8ee; color:#07803c; border-color:#bfe8d0; }
.qr-pay-wx .qr-tag-wx::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#07c160; margin-right:7px; vertical-align:middle;
}
.qr-img-wx{ width:236px; height:236px; background:#fff; padding:10px; }
.qr-img-wx img{ width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.qr-img-fail{ display:flex; align-items:center; justify-content:center; color:var(--bad); font-size:.9em; }
.qr-wx-wait{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:16px; padding:11px 20px; border-radius:999px;
  background:#f2f7ff; color:#2563eb; font-weight:700; font-size:.92em;
}
.qr-wx-wait [data-timer]{ font-variant-numeric:tabular-nums; color:#6b7a90; font-weight:600; }
.qr-wx-wait a{ color:#2563eb; text-decoration:underline; margin-left:4px; }
.qr-dot{
  width:9px; height:9px; border-radius:50%; background:#2563eb;
  animation:qrdot 1.1s ease-in-out infinite;
}
@keyframes qrdot{ 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }
.qr-wx-foot{ margin-top:14px; font-size:.86em; }
.qr-wx-foot a{ color:var(--muted); }
.qr-wx-foot a:hover{ color:var(--bad); }

/* ---------------- 提示 / 空态 ---------------- */
/* flash 提示统一收进 .wrap 里，不再裸贴在页面左上角 */
.flash-wrap{ padding-top:14px; }
.alert{
  padding:14px 18px; border-radius:12px; margin-bottom:16px;
  font-size:.94em; font-weight:600; line-height:1.6;
  border:1px solid transparent;
}
.alert-success{ background:#e9f9ef; color:#0f7a35; border-color:#c9ecd7; }
.alert-warning{ background:#fff8e6; color:#9a6b00; border-color:#f6e3b0; }
.alert-error,.alert-danger{ background:#fdecec; color:#b91c1c; border-color:#f7cfcf; }
.alert-info{ background:#eaf1ff; color:#1d4ed8; border-color:#cfe0ff; }
.empty{ text-align:center; padding:60px 20px; color:var(--muted); }
.empty .ic{ font-size:52px; opacity:.5; }
.empty p{ margin-top:12px; }

/* ---------------- 到账回执（充值成功后显示在内容区顶部） ---------------- */
.rcpt{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; margin-bottom:16px;
  background:linear-gradient(135deg,#effbf3,#ffffff 70%);
  border:1.5px solid #b7e7c9; border-radius:var(--radius-lg);
  box-shadow:0 6px 22px rgba(22,163,74,.10);
  animation:rcptIn .35s ease-out both;
}
@keyframes rcptIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.rcpt-ic{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  background:var(--ok); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(22,163,74,.32);
}
.rcpt-bd{ flex:1 1 auto; min-width:0; }
.rcpt-t{ font-size:1.05em; font-weight:800; color:#0f7a35; line-height:1.4; }
.rcpt-t b{ font-size:1.35em; letter-spacing:.5px; }
.rcpt-s{ margin-top:3px; font-size:.85em; color:var(--muted); }
.rcpt-a{
  flex:0 0 auto; height:38px; padding:0 16px; border-radius:10px;
  display:inline-flex; align-items:center; font-size:.86em; font-weight:700;
  color:#0f7a35; background:#fff; border:1px solid #b7e7c9; white-space:nowrap;
}
.rcpt-a:hover{ background:#effbf3; }

/* ---------------- 系统消息列表 ---------------- */
.msg-list{ display:flex; flex-direction:column; gap:10px; }
.msg-item{
  display:flex; gap:13px; padding:15px 16px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
}
.msg-item.unread{ background:#fffdfb; border-color:#ffdccd; }
.msg-ic{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  background:#f4f6f9; display:flex; align-items:center; justify-content:center;
}
.msg-item.unread .msg-ic{ background:var(--primary-soft); }
.msg-main{ flex:1 1 auto; min-width:0; }
.msg-t{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.msg-t b{ font-size:.98em; font-weight:800; color:var(--ink); }
.msg-amt{ font-weight:800; color:var(--ok); font-size:.95em; }
.msg-dot{ width:8px; height:8px; border-radius:50%; background:var(--primary); flex:0 0 auto; }
.msg-d{ margin-top:5px; font-size:.88em; color:var(--ink-2); line-height:1.6; }
.msg-f{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:9px; font-size:.8em; color:var(--muted); }
.msg-tag{ font-weight:700; }
.msg-ops{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.msg-op{
  padding:0; border:0; background:none; cursor:pointer;
  font-size:.95em; font-weight:700; color:var(--primary); font-family:inherit;
}
.msg-op:hover{ text-decoration:underline; }

/* ---------------- 消息铃铛 / 未读角标 ---------------- */
.msg-bell{
  position:relative; flex:0 0 auto;
  width:40px; height:40px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f4f6f9; color:var(--ink-2);
}
.msg-bell:hover{ background:var(--primary-soft); color:var(--primary); }
.msg-bell-dot{
  position:absolute; top:-4px; right:-5px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--bad); color:#fff;
  font-size:11px; font-weight:800; font-style:normal; line-height:18px; text-align:center;
  box-shadow:0 0 0 2px #fff;
}
.member-nav a .nav-dot{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px;
  border-radius:10px; background:var(--bad); color:#fff;
  font-size:11px; font-weight:800; font-style:normal; line-height:20px; text-align:center;
}

@media (max-width:768px){
  /* 手机上：回执按钮换行占满，铃铛缩小一点免得挤掉「免费发布」 */
  .rcpt{ flex-wrap:wrap; gap:11px; padding:15px 16px; }
  .rcpt-bd{ flex:1 1 calc(100% - 60px); }
  .rcpt-t{ font-size:1em; }
  .rcpt-t b{ font-size:1.25em; }
  .rcpt-a{ flex:0 0 auto; align-self:flex-start; height:40px; }
  .msg-bell{ width:38px; height:38px; border-radius:11px; }
  .msg-item{ padding:13px 13px; gap:10px; }
  .msg-ic{ width:34px; height:34px; border-radius:10px; }
  .msg-f{ gap:9px; }
  .msg-ops{ margin-left:0; flex-basis:100%; gap:16px; padding-top:2px; }
  .member-nav a .nav-dot{ margin-left:auto; }
  /* 标题 + 两个操作按钮在手机上换行排，别挤成一团 */
  .msg-hd{ flex-wrap:wrap; gap:10px; }
  .msg-hd .flex{ width:100%; }
  .msg-hd .flex .btn{ flex:1 1 0; }
}


/* ---------------- 分页 ---------------- */
.pager{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:26px 0; }
.pager a,.pager span.cur,.pager .dots{
  min-width:44px;height:44px;padding:0 14px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:var(--shadow);font-weight:600;font-size:.94em;
}
.pager a:hover{ color:var(--primary); }
.pager span.cur{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; }
.pager .pager-info{ background:transparent; box-shadow:none; color:var(--muted); font-weight:400; font-size:.85em; }

/* ---------------- 表格（会员/后台通用） ---------------- */
.table{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.table th,.table td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:.92em; }
.table th{ background:#fafbfd; font-weight:700; color:var(--ink-2); font-size:.86em; }
.table tr:last-child td{ border-bottom:0; }
.table-hover tr:hover td{ background:#fbfcfe; }

/* 状态徽标 */
.st{ display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;font-size:.76em;font-weight:700;white-space:nowrap;flex:0 0 auto; }
.st-ok{ background:#e9f9ef;color:#0f7a35; }
.st-warn{ background:#fff8e6;color:#9a6b00; }
.st-bad{ background:#fdecec;color:#b91c1c; }
.st-gray{ background:#f2f4f8;color:#6f7789; }

/* 下架倒计时徽标：正常灰 / 快到期橙 / 已过期红 */
.ex-badge{
  display:inline-flex; align-items:center; gap:4px;
  height:24px; padding:0 9px; border-radius:7px;
  font-size:.76em; font-weight:700; white-space:nowrap; flex:0 0 auto;
  background:#f2f4f8; color:#6f7789;
}
.ex-badge svg{ width:13px; height:13px; flex:0 0 auto; }
.ex-badge.ex-soon{ background:#fff4e0; color:#a85c00; }
.ex-badge.ex-expired{ background:#fdecec; color:#b91c1c; }
.detail-meta .ex-badge{ vertical-align:middle; }

/* 表格容器：宽表在小屏内部滚动，绝不把整页撑宽 */
.table-wrap{ width:100%; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------------- 会员中心 ---------------- */
.member-layout{ display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:start; }
.member-nav{ background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:12px; position:sticky; top:76px; }
.member-nav a{ display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:11px; font-weight:600; color:var(--ink-2); font-size:.95em; }
.member-nav a:hover{ background:#f6f8fb; }
.member-nav a.on{ background:var(--primary-soft); color:var(--primary); }
.wallet{
  background:linear-gradient(135deg,#2b3040,#3d4459); color:#fff; border-radius:var(--radius-lg); padding:26px;
  position:relative; overflow:hidden;
}
.wallet::after{ content:""; position:absolute; right:-40px; top:-40px; width:180px;height:180px;border-radius:50%;background:rgba(232,84,47,.35); }
.wallet .lb{ font-size:.86em; color:#b9c1d2; }
.wallet .num{ font-size:2.2em; font-weight:800; margin-top:4px; letter-spacing:1px; }
.wallet .num small{ font-size:.45em; font-weight:600; margin-right:4px; }

/* 待激活的充值卡（激活后生效模式） */
.card-activate{
  border:2px solid var(--p); border-radius:var(--radius-lg); padding:22px;
  background:linear-gradient(180deg,#fff7f4,#fff); text-align:center;
}
.card-activate .ca-t{ font-size:.9em; color:var(--p); font-weight:700; }
.card-activate .ca-amt{ font-size:2.1em; font-weight:800; color:var(--ink); margin:6px 0 2px; letter-spacing:.5px; }
.card-activate .ca-sub{ font-size:.82em; color:var(--muted); line-height:1.7; margin-bottom:14px; }
.card-activate form{ margin:0; }

/* 充值面额 / 置顶套餐卡片
   注意：label 默认是行内元素，里面的 <b> 是块级元素，
   行内盒子包不住块级子元素，会出现「边框画了个空框、文字跑到框外」的错位。
   必须显式 display:block，边框和内边距才会正确包住内容。 */
.amount-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.amount-grid > div{ min-width:0; }
.amount-grid label{
  display:block; position:relative;
  border:2px solid var(--line); border-radius:14px; padding:18px 10px; text-align:center; cursor:pointer; transition:.16s; background:#fff;
  line-height:1.4;
}
.amount-grid label b{ display:block; font-size:1.3em; color:var(--ink); }
.amount-grid label small{ display:block; color:var(--muted); font-size:.76em; margin-top:2px; }
.amount-grid input{ display:none; }
.amount-grid input:checked + label{ border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 4px rgba(232,84,47,.08); }
.amount-grid input:checked + label b{ color:var(--primary); }

/* ---------------- 底部 ---------------- */
.footer{ background:#22262f; color:#98a1b3; margin-top:40px; padding:36px 0 26px; font-size:.88em; }
.footer a{ color:#98a1b3; }
.footer a:hover{ color:#fff; }
.footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px; }
.footer h4{ color:#fff; font-size:1em; margin-bottom:12px; font-weight:700; }
.footer li{ line-height:2; }
.footer .copy{ margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); text-align:center; color:#6f7789; font-size:.86em; }

/* 手机端精简页脚：桌面隐藏 */
.footer-m{ display:none; background:#22262f; color:#98a1b3; margin-top:24px; padding:22px 0 96px; text-align:center; }
.footer-m a{ color:#98a1b3; }
.footer-m .fm-name{ color:#fff; font-size:1.02em; font-weight:800; letter-spacing:.3px; }
.footer-m .fm-slogan{ font-size:.82em; margin-top:4px; color:#7f8899; }
.footer-m .fm-tel{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:48px; padding:0 22px; margin-top:14px; border-radius:12px;
  background:rgba(255,255,255,.09); color:#fff !important; font-weight:700; font-size:.94em;
}
.footer-m .fm-tel svg{ width:18px; height:18px; }
.footer-m .fm-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 4px;
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07);
  font-size:.86em;
}
.footer-m .fm-links a{ padding:5px 10px; }
.footer-m .fm-copy{ margin-top:12px; color:#6f7789; font-size:.78em; line-height:1.8; }

/* 手机页脚里的客服信息块（微信 / QQ / 地址 / 二维码） */
.footer-m .fm-kf{
  margin:16px 12px 0; padding:14px 14px 16px; text-align:left;
  background:rgba(255,255,255,.06); border-radius:14px;
}
.footer-m .fm-kf-t{
  color:#fff; font-weight:700; font-size:.9em; margin-bottom:10px;
  display:flex; align-items:center; gap:7px;
}
.footer-m .fm-kf-t::before{
  content:""; width:3px; height:14px; border-radius:2px;
  background:var(--primary-2); display:inline-block;
}
.footer-m .fm-row{
  display:flex; align-items:center; gap:10px; padding:8px 0;
  border-top:1px solid rgba(255,255,255,.06); font-size:.88em;
}
.footer-m .fm-row:first-of-type{ border-top:0; }
.footer-m .fm-row .k{ color:#8b94a6; flex:0 0 auto; min-width:66px; }
.footer-m .fm-row .v{ color:#fff; font-weight:700; flex:1; min-width:0; word-break:break-all; }
.footer-m .fm-row .cp{
  flex:0 0 auto; height:32px; padding:0 14px; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; border:0; font-size:.84em; font-weight:700;
}
.footer-m .fm-row .cp:active{ background:rgba(255,255,255,.24); }
.footer-m .fm-qr{ margin-top:12px; text-align:center; }
.footer-m .fm-qr img{
  width:180px; max-width:62vw; height:auto; border-radius:12px;
  background:#fff; padding:6px; display:block; margin:0 auto;
}
.footer-m .fm-qr span{ display:block; margin-top:8px; color:#8b94a6; font-size:.8em; }

/* ---------------- 全站悬浮客服 ---------------- */
.kf-fab-wrap{ position:fixed; right:20px; bottom:28px; z-index:95; }
.kf-fab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  width:60px; height:60px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff; box-shadow:0 10px 26px rgba(232,84,47,.42);
  transition:transform .18s, box-shadow .18s;
}
.kf-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(232,84,47,.5); }
.kf-fab:active{ transform:scale(.95); }
.kf-fab span{ font-size:10px; font-weight:700; letter-spacing:.5px; line-height:1; }
.kf-fab svg{ width:23px; height:23px; }

.kf-mask{
  position:fixed; inset:0; z-index:96; background:rgba(20,24,32,.42);
  backdrop-filter:blur(2px); animation:kfFade .16s ease;
}
.kf-mask[hidden]{ display:none; }

.kf-panel{
  position:fixed; right:20px; bottom:100px; z-index:97; width:320px; max-width:calc(100vw - 32px);
  background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  overflow:hidden; animation:kfUp .2s ease;
}
.kf-panel[hidden]{ display:none; }
@keyframes kfFade{ from{opacity:0} to{opacity:1} }
@keyframes kfUp{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

.kf-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff;
}
.kf-hd b{ font-size:1em; font-weight:800; letter-spacing:.5px; }
.kf-x{
  width:30px; height:30px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.kf-x:hover{ background:rgba(255,255,255,.3); }

.kf-bd{ padding:8px 12px 12px; max-height:min(60vh,440px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.kf-line{
  display:flex; align-items:center; gap:11px; padding:11px 4px;
  border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
}
.kf-line:last-child{ border-bottom:0; }
.kf-line .ic{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-soft); color:var(--primary);
}
.kf-line .ic svg{ width:18px; height:18px; }
.kf-line .tx{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.kf-line .tx small{ color:var(--muted); font-size:.74em; }
.kf-line .tx b{ font-size:.98em; font-weight:800; color:var(--ink); word-break:break-all; }
.kf-line .go{
  flex:0 0 auto; height:34px; padding:0 15px; border-radius:9px; cursor:pointer;
  border:1px solid var(--primary); background:var(--primary-soft); color:var(--primary);
  font-size:.84em; font-weight:800; display:inline-flex; align-items:center;
}
.kf-line .go:active{ background:var(--primary); color:#fff; }
.kf-line.plain{ border-bottom:0; }

.kf-qr{ text-align:center; padding:14px 0 6px; border-bottom:1px solid var(--line); }
.kf-qr img{
  width:190px; max-width:100%; height:auto; border-radius:12px;
  background:#fff; padding:6px; border:1px solid var(--line); display:block; margin:0 auto;
}
.kf-qr p{ margin:8px 0 0; font-size:.78em; color:var(--muted); }

.kf-ft{
  padding:11px 16px; background:var(--bg); color:var(--muted);
  font-size:.78em; text-align:center; line-height:1.5;
}

/* 详情页：发布者自己可见的置顶引导条 */
.owner-top-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:18px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(135deg,#fff7f3,#fff1ec); border:1px solid #ffd9cc;
}
.owner-top-bar b{ display:block; font-size:.96em; color:#a33a1c; font-weight:800; }
.owner-top-bar span{ display:block; margin-top:3px; font-size:.82em; color:#b56a52; }
.owner-top-bar .btn{ flex:0 0 auto; }

/* 移动底部导航 */
.tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:6px 0 calc(6px + env(safe-area-inset-bottom));
}
/* 四项完全统一：图标 + 文字，同一条基线。「发帖」用主色区分，不加圆圈 */
.tabbar .inner{ display:grid; grid-template-columns:repeat(4,1fr); align-items:end; }
/* 商城开着时多一个入口，5 列（发帖正好在中间） */
.tabbar .inner.cols5{ grid-template-columns:repeat(5,1fr); }
.tabbar .inner.cols5 a{ font-size:10.5px; }
.tabbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:3px; padding:6px 0 4px; color:var(--muted); font-size:11px; font-weight:600;
  line-height:1.25; min-height:52px;
}
.tabbar a.on{ color:var(--primary); }
.tabbar svg{ width:23px; height:23px; flex:0 0 auto; }
.tabbar .pub{ position:static; color:var(--primary); }
.tabbar .pub svg{ width:23px; height:23px; }

/* Toast */
.toast{
  position:fixed; left:50%; top:24px; transform:translate(-50%,-20px); z-index:999;
  background:rgba(31,36,48,.94); color:#fff; padding:13px 24px; border-radius:12px;
  font-size:.94em; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.22s;
  max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast.ok{ background:rgba(22,163,74,.96); }
.toast.err{ background:rgba(220,38,38,.96); }

/* 面包屑 */
.crumb{ font-size:.85em; color:var(--muted); padding:16px 0 0; }
.crumb a:hover{ color:var(--primary); }
.crumb span{ margin:0 6px; opacity:.5; }

/* 登录注册 */
.auth-wrap{ min-height:calc(100vh - 300px); display:flex; align-items:center; justify-content:center; padding:40px 16px; }
.auth-card{ width:100%; max-width:440px; background:#fff; border-radius:22px; box-shadow:var(--shadow-lg); padding:36px; }
.auth-card h1{ font-size:1.5em; font-weight:800; text-align:center; }
.auth-card .sub{ text-align:center; color:var(--muted); font-size:.9em; margin-top:6px; margin-bottom:26px; }
.auth-card .switch{ text-align:center; margin-top:18px; font-size:.9em; color:var(--muted); }
.auth-card .switch a{ color:var(--primary); font-weight:700; }
.agree{ font-size:.82em; color:var(--muted); }

/* 响应式 */
@media (max-width:1080px){
  /* minmax(0,1fr)：允许网格列收缩到 0，避免长内容（电话/长标题）把整页顶宽 */
  .layout,.detail{ grid-template-columns:minmax(0,1fr); }
  .layout > *,.detail > *,.detail-main,.panel{ min-width:0; }
  .sidebar{ display:none; }
  .cat-grid{ grid-template-columns:repeat(4,1fr); }
  .footer .cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  :root{ --fs:16px; }
  html[data-fs="2"]{ --fs:17px; }
  html[data-fs="3"]{ --fs:19px; }
  .wrap{ padding:0 12px; }
  .topbar{ display:none; }
  .header .wrap{ gap:12px; padding:12px; flex-wrap:wrap; }
  .logo .mark{ width:40px;height:40px;border-radius:11px;font-size:19px; }
  .logo .txt b{ font-size:1.05em; }
  .logo .txt span{ display:none; }
  .header .act .btn:not(.btn-primary){ display:none; }
  .header .act .btn{ height:42px; padding:0 16px; font-size:.9em; }
  .search{ order:3; flex-basis:100%; }
  .search input{ height:42px; }
  .search button{ height:42px; padding:0 18px; }
  .hero{ padding:24px 0 20px; }
  .hero h1{ font-size:1.35em; }
  .hero p{ font-size:.85em; }
  .hero .big-search{ padding:5px; }
  .hero .big-search select{ display:none; }
  .hero .big-search input{ height:48px; padding:0 14px; }
  .hero .big-search button{ height:48px; padding:0 22px; }
  .hero .quick{ display:none; }
  .navbar{ position:static; background:transparent; border-bottom:0; }
  /* 手机端导航改成 3 列宫格：所有分类一屏看全，不再横向滚动藏一半 */
  .navbar .wrap{
    display:flex; flex-wrap:wrap; gap:6px;
    padding:8px 10px; background:var(--card);
    border-bottom:1px solid var(--line);
    overflow:visible;
  }
  .navbar a{
    flex:0 0 calc(33.333% - 4px);
    display:flex; align-items:center; justify-content:center;
    min-height:42px; padding:0 5px; font-size:.9em; font-weight:700;
    background:#f4f6f9; border-radius:10px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
  }
  .navbar a.on{ background:var(--primary-soft); color:var(--primary); }
  .navbar a.on::after{ display:none; }
  .cat-grid{ grid-template-columns:repeat(4,1fr); gap:8px; }
  .cat-grid a{ padding:12px 4px; border-radius:13px; }
  .cat-grid .ic{ width:46px;height:46px;border-radius:14px; }
  .cat-grid .ic svg{ width:24px;height:24px; }
  .cat-grid span{ font-size:.8em; }
  .cat-grid small{ display:none; }
  .feed{ grid-template-columns:1fr; gap:10px; }
  .item{ padding:12px; gap:12px; }
  .item .thumb{ width:106px; height:86px; }
  .item .info h3{ font-size:.96em; }
  .item .desc{ display:none; }
  /* 手机上内容区只有 218px：元信息碎片收紧一点，能挤一行就挤一行 */
  .item .meta{ gap:5px 6px; font-size:.76em; }
  .item .meta .tag{ padding:2px 6px; }
  .item .meta .meta-end{ gap:6px; }
  /* 带价格的卡片：分类/地区 + 价格 + 时间一共 4 块，218px 一行放不下。
     让「价格 + 时间」整块独占第二行并左对齐，
     别用 margin-left:auto 把它顶到最右——那里正好是右下角悬浮客服按钮，
     会把时间挡住。 */
  .item .meta.meta-paid{ row-gap:4px; }
  .item .meta.meta-paid .meta-end{ flex:1 1 100%; margin-left:0; }
  .panel{ padding:16px; border-radius:16px; }
  .detail-main{ padding:18px; border-radius:16px; }
  .detail-title{ font-size:1.2em; }
  .detail-imgs{ grid-template-columns:repeat(2,1fr); }
  .detail-imgs img{ height:120px; }
  /* 单列时用 minmax(0,1fr)：默认的 1fr 有 min-width:auto，
     里面 member-nav 的 flex 项又是 nowrap，会把整列撑到 456px 冲出屏幕 */
  .member-layout{ grid-template-columns:minmax(0,1fr); }
  /* 会员导航 8 项，手机上横向滚动会藏掉一半（老年人找不到）。
     改成 2 列宫格，一屏看全，不用左右滑。 */
  .member-nav{
    position:static; display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px; padding:8px; min-width:0; overflow:visible;
  }
  .member-nav a{
    padding:11px 10px; font-size:.9em; font-weight:700;
    background:#f4f6f9; border-radius:10px;
    justify-content:flex-start; white-space:normal; min-width:0;
  }
  .member-nav a svg{ flex:0 0 auto; }
  .member-nav a span{ overflow:hidden; text-overflow:ellipsis; }
  .member-nav a.on{ background:var(--primary-soft); color:var(--primary); }
  .footer{ padding:26px 0 90px; }
  .footer .cols{ grid-template-columns:1fr; gap:18px; }
  /* 手机端：隐藏桌面 4 栏页脚，改用精简版 */
  .footer .cols,.footer .copy{ display:none; }
  .footer{ padding:0; margin-top:0; background:transparent; }
  .footer-m{ display:block; }
  /* 底部统一避让固定 tabbar，任何页面内容都不会被挡掉一截 */
  body{ overflow-x:hidden; }
  /* 输入框字号不低于 16px：iOS Safari 聚焦时不会放大页面（"界面溢出去一截"的根因） */
  .input,.select,.textarea{ font-size:max(16px,1em); }
  .input-group{ flex-wrap:nowrap; }
  .input-group .btn{ padding:0 14px; font-size:.92em; white-space:nowrap; }
  .table-wrap,.member-nav,.detail-imgs,.uploader{ max-width:100%; min-width:0; }
  /* 网格子项一律允许收缩，防止内部 nowrap 内容把布局撑出屏幕 */
  .member-layout > *,.layout > *,.detail > *{ min-width:0; }
  /* 超长文字（长标题/长号码/长网址）一律允许折行，杜绝横向溢出 */
  .detail-title,.detail-content,.phone-card .ph-real,.phone-card .ph-mask,
  .item .info h3,.member-layout,.table td{ overflow-wrap:anywhere; }
  .tabbar{ display:block; }
  /* 后台关掉底部导航时，页脚不用再留 90px 避让，否则底部一片空白 */
  .no-tabbar .footer{ padding-bottom:26px; }
  .ad-float{ display:none; }
  .amount-grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .amount-grid label{ padding:14px 6px; }
  .amount-grid label b{ font-size:1.1em; }
  .form-grid{ grid-template-columns:1fr; }
  .table th,.table td{ padding:11px 9px; }
  /* 订单号这类长串在小屏允许折行，宽表就不会把整页撑出去 */
  .ordno{ white-space:normal !important; word-break:break-all; font-size:.76em; }
  .pager a,.pager span.cur{ min-width:40px;height:40px;padding:0 11px; }
  .auth-card{ padding:26px 20px; border-radius:18px; }
  .phone-card .ph-mask,.phone-card .ph-real{ font-size:1.35em; }
  .qr-pay{ padding:18px 14px 16px; }
  .qr-img{ width:212px; height:212px; }
  .qr-img-wx{ width:218px; height:218px; padding:8px; }
  .qr-amount{ font-size:1.82em; }
  .qr-tabs button{ height:46px; padding:0 18px; font-size:.92em; }
  .qr-steps li{ font-size:.88em; }

  /* 悬浮客服：手机上挪到 tabbar 上方，避免被底部导航挡住 */
  .kf-fab-wrap{ right:14px; bottom:80px; }
  .kf-fab{ width:54px; height:54px; }
  .kf-fab svg{ width:21px; height:21px; }
  .kf-fab span{ font-size:9px; }
  /* 面板变成底部浮层，撑满可用宽度，二维码看得清 */
  .kf-panel{
    left:12px; right:12px; bottom:144px; width:auto; max-width:none;
    border-radius:18px;
  }
  .kf-bd{ max-height:min(52vh,420px); }
  .kf-line{ padding:12px 4px; }
  .kf-line .tx b{ font-size:1em; }
  .kf-qr img{ width:200px; }
}
@media (max-width:380px){
  .cat-grid{ grid-template-columns:repeat(4,1fr); }
  .item .thumb{ width:92px;height:76px; }
  .qr-img{ width:190px; height:190px; }
  .qr-img-wx{ width:196px; height:196px; padding:7px; }
  .qr-pay-hd{ font-size:1.02em; }
}