/* ============================================================
   贷航 DAOHANG · 橙白配色（仿站版式）· 全自适应
   ============================================================ */
:root {
  --main: #FF6D1F;
  --main-dark: #E85A00;
  --main-soft: #FFF1E8;
  --main-line: #FFD9C2;
  --bg: #F6F6F4;
  --card: #FFFFFF;
  --line: #ECE9E4;
  --text: #1C1E22;
  --sub: #787E88;
  --weak: #A8AEB8;
  --radius: 14px;
  --sans: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Consolas, monospace;
  --shadow: 0 1px 2px rgba(60,40,20,.05), 0 1px 3px rgba(60,40,20,.04);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button, input, select, textarea { font-family: var(--sans); }
.page { max-width: 1240px; margin: 0 auto; padding: 14px 16px 0; }

/* ---------- 顶栏（全宽单行，吸顶） ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--line);
  transition: box-shadow .18s;
}
.topbar.scrolled { box-shadow: 0 3px 14px rgba(40,30,20,.07); }
.tb-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 16px;
  height: 58px; display: flex; align-items: center; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--main); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800;
  overflow: hidden; flex-shrink: 0;
}
.brand-mark.has-img { background: #fff; border: 1px solid var(--line); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-txt b { display: block; font-size: 15px; letter-spacing: 1px; line-height: 1.2; }
.brand-txt span { display: block; font-size: 9.5px; color: var(--weak); letter-spacing: .8px; margin-top: 1px; }
/* 顶部导航：文字页签，当前页压一条橙线；高度撑满顶栏才有「贴在栏上」的实感 */
.tb-nav { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.tb-nav a {
  position: relative; height: 58px; display: inline-flex; align-items: center; padding: 0 16px;
  font-size: 19px; font-weight: 800; color: #2B3038; letter-spacing: .3px;
  -webkit-text-stroke: .35px currentColor;   /* 微软雅黑只有 Regular/Bold 两档，700 以上都渲染成同一个 Bold，靠描边补厚度 */
  transition: color .15s;
}
.tb-nav a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--main);
  transform: scaleX(0); transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.tb-nav a:hover { color: var(--main); }
.tb-nav a.on { color: #14161A; }
.tb-nav a.on::after { transform: scaleX(1); }
.tb-nav a:focus-visible { outline: 2px solid var(--main); outline-offset: -4px; border-radius: 6px; }
.tb-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.tb-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
  border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line); background: #fff;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.tb-btn:hover { border-color: var(--main); color: var(--main); }
.tb-btn.solid { background: var(--main); border-color: var(--main); color: #fff; font-weight: 500; }
.tb-btn.solid:hover { background: var(--main-dark); border-color: var(--main-dark); }
.qr-pop-wrap { position: relative; }
.qr-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 180px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(40,30,20,.14); padding: 14px; text-align: center; display: none;
}
.qr-pop-wrap:hover .qr-pop { display: block; }
.qr-pop img { width: 150px; height: 150px; margin: 0 auto; border-radius: 8px; }
.qr-pop p { font-size: 12px; color: var(--sub); margin-top: 8px; }
.qr-pop p b { color: var(--text); }

/* ---------- 首页横幅 ---------- */
.hero {
  margin-top: 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 58px 60px 36px; display: flex; align-items: center; gap: 60px;
  flex-wrap: wrap;
}
.hero-main { flex: 1; min-width: 0; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--main); background: var(--main-soft); border: 1px solid var(--main-line);
  border-radius: 999px; padding: 5px 15px; letter-spacing: .5px;
}
.hero-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--main); }
.hero h1 { font-size: clamp(27px, 3.2vw, 42px); font-weight: 800; letter-spacing: 1.4px; margin-top: 18px; }
.hero h1 em { font-style: normal; color: var(--main); }
.hero p.desc { margin-top: 15px; font-size: 15px; color: var(--sub); line-height: 1.9; max-width: 720px; }
.hero-contact { margin-top: 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-contact .hc {
  display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: #44403A;
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 10px 17px;
}
.hero-contact .hc b { font-family: var(--mono); font-size: 13.5px; color: var(--text); }
.hero-contact .hc i { font-style: normal; font-size: 12.5px; color: var(--weak); }
.hero-qrs { display: flex; gap: 16px; flex-shrink: 0; }
.hero-qr { width: 188px; text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 14px; background: #FDFCFA; }
.hero-qr img { width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 9px; object-fit: cover; }
.hero-qr figcaption { margin-top: 11px; font-size: 13px; color: var(--sub); }
.hero-qr figcaption b { color: var(--text); }
/* 横幅底部说明条：后台「系统设置 → 首页横幅 → 底部说明文字」可改，留空即隐藏 */
.hero-note {
  flex: 0 0 auto; width: 100%; margin-top: 22px; padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--sub); line-height: 1.8;
}
.hero-note .hn-i {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: var(--main-soft); color: var(--main);
  font-size: 11px; font-weight: 700; font-style: normal; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-note p { margin: 0; }

/* ---------- 标签云（合集：标题 + 说明 + 标签 + 搜索） ---------- */
.tagsec {
  margin-top: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px 20px;
}
.tagsec-hd { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tagsec-hl { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tagsec-title { font-size: 19px; font-weight: 800; letter-spacing: .6px; white-space: nowrap; }
.tagsec-title::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  background: var(--main); margin-right: 9px; vertical-align: 2px;
}
.tagsec-cnt { font-size: 12.5px; color: var(--weak); white-space: nowrap; }
.tagsec-cnt b { font-family: var(--mono); color: var(--main); font-weight: 700; }
.tagsec-note { margin-top: 11px; font-size: 12.5px; line-height: 1.85; color: var(--weak); }
.search {
  display: flex; align-items: center; gap: 8px; width: 340px; flex: 0 0 auto; margin-left: auto;
  height: 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  padding: 0 6px 0 16px; transition: all .15s;
}
.search:focus-within { border-color: var(--main); background: #fff; }
.search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13.5px; }
.search button { height: 30px; padding: 0 16px; border-radius: 999px; border: none; background: var(--main); color: #fff; font-size: 12.5px; cursor: pointer; flex-shrink: 0; }
.search button:hover { background: var(--main-dark); }
/* 标签云：统一字号的小方框，宽度跟着字数长短走，密排成一片云（字号不做大小变化） */
.tagcloud { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.tg {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 11px; border-radius: 7px;
  border: 1px solid #EFE6DA; background: #FFFDF9; color: #8A8072;
  font: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: .2px;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.tg:hover { color: var(--main); border-color: rgba(255,109,31,.45); background: #FFF7F1; }
.tg.on { color: var(--main); border-color: rgba(255,109,31,.55); background: #FFF3EA; font-weight: 600; }
.tg:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }

/* ---------- 分类区块 + 卡片 ---------- */
/* ---------- 卡片网格 ---------- */
.grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.site {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px;
  transition: all .15s; min-width: 0;
}
.site:hover { transform: translateY(-2px); border-color: var(--main); box-shadow: 0 6px 18px rgba(255,109,31,.14); }
.s-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.s-top > div { min-width: 0; flex: 1 1 auto; }
.fav {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--main-soft); color: var(--main);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; overflow: hidden;
}
.fav img { width: 26px; height: 26px; object-fit: contain; }
.s-name { font-size: 14px; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; overflow-wrap: anywhere; }
.s-domain { font-family: var(--mono); font-size: 10.5px; color: var(--weak); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-desc { font-size: 12px; color: var(--sub); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 37px; min-width: 0; overflow-wrap: anywhere; }
.s-foot { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: nowrap; }
/* 分类徽章 + 属性标记容易把宽度撑满，这里不换行、超出裁掉，保证「GO ›」始终在右下角对齐 */
.s-tags {
  display: flex; gap: 5px; flex-wrap: nowrap; min-width: 0; overflow: hidden;
  /* 标签挤满时右侧淡出而不是硬切半个字，看得出「还有但放不下」 */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent);
}
.s-tag { flex-shrink: 0; font-size: 10px; padding: 2px 7px; border-radius: 5px; color: var(--main); background: var(--main-soft); border: 1px solid var(--main-line); }
.s-tag.hot { color: #C2410C; background: #FFF7ED; border-color: #FED7AA; }
.s-tag.gray { color: #555B66; background: #F3F2EF; border-color: var(--line); }
/* 所属标签：中性灰，和 hot/gray 这类属性标记区分开 */
.s-tag.cat { color: #4B5158; background: #F4F3F0; border-color: #E7E4DE; font-weight: 500; }
.s-go { margin-left: auto; flex-shrink: 0; font-size: 11px; color: var(--weak); font-family: var(--mono); }
.site:hover .s-go { color: var(--main); }
.empty { text-align: center; padding: 60px 0; color: var(--weak); font-size: 13px; }

/* ---------- 页脚 ---------- */
.footer { margin-top: 30px; border-top: 1px solid var(--line); background: #fff; }
.footer-in { max-width: 1240px; margin: 0 auto; padding: 22px 16px; display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.footer-brand .brand-mark { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
.footer-brand b { font-size: 15px; letter-spacing: 1px; }
.footer-brand span { display: block; font-size: 11px; color: var(--weak); margin-top: 1px; }
.footer-note { flex: 1; font-size: 12px; color: var(--weak); line-height: 1.8; max-width: 640px; min-width: 260px; }
.footer-note b { color: var(--sub); }
.copyright { text-align: center; font-size: 11.5px; color: #B8B4AC; padding: 0 0 18px; background: #fff; }

/* ---------- 页脚始终贴底：内容不足一屏时也压在最下方 ---------- */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.topbar { flex: 0 0 auto; }
/* 只让页面里“最后一个内容块”吃掉剩余高度，中间不留空白（auto margin 会取消 stretch，故显式给 width） */
.page, .sup-page, .pub-list { width: 100%; flex: 1 0 auto; }
.pub-wrap { width: 100%; flex: 0 0 auto; }
.footer { flex: 0 0 auto; }

/* ---------- 发布页 ---------- */
.pub-wrap { max-width: 1240px; margin: 0 auto; padding: 20px 16px 40px; display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.pub-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pf-head { padding: 20px 26px 0; }
.pf-head h1 { font-size: 20px; font-weight: 800; letter-spacing: .5px; }
.pf-head p { font-size: 12.5px; color: var(--sub); margin-top: 6px; }
.pf-head .step { display: flex; gap: 18px; margin-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.step b { font-size: 12px; color: var(--weak); display: flex; align-items: center; gap: 6px; }
.step b i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); color: var(--sub); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.step b.on { color: var(--main); font-weight: 600; }
.step b.on i { background: var(--main); color: #fff; }
.pub-body { padding: 20px 26px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-item { display: flex; flex-direction: column; gap: 6px; }
.form-item.full { grid-column: 1 / -1; }
.form-item label { font-size: 13px; color: #44403A; font-weight: 600; }
.form-item label i { font-style: normal; color: #D92D20; }
.form-item input, .form-item select, .form-item textarea {
  height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px;
  font-size: 13.5px; outline: none; background: #fff; color: var(--text); transition: all .15s; width: 100%;
}
.form-item textarea { height: auto; min-height: 84px; padding: 12px 14px; resize: vertical; }
.form-item input:focus, .form-item select:focus, .form-item textarea:focus { border-color: var(--main); box-shadow: 0 0 0 3px rgba(255,109,31,.10); }
.form-item .hint { font-size: 11.5px; color: var(--weak); }
.form-item label small { font-weight: 400; color: var(--weak); font-size: 11.5px; margin-left: 6px; }
/* 发布页业务标签：和首页标签云同款小方框，多选 */
.tagpick { display: flex; flex-wrap: wrap; gap: 8px; }
.tpk { position: relative; cursor: pointer; }
.tpk input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.tpk span {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 7px;
  border: 1px solid #EFE6DA; background: #FFFDF9; color: #8A8072;
  font-size: 12.5px; font-weight: 500; letter-spacing: .2px; transition: all .15s;
}
.tpk:hover span { color: var(--main); border-color: rgba(255,109,31,.45); background: #FFF7F1; }
.tpk input:checked + span { color: var(--main); border-color: rgba(255,109,31,.55); background: #FFF3EA; font-weight: 600; }
.tpk input:focus-visible + span { outline: 2px solid var(--main); outline-offset: 2px; }
/* 原生文件选择控件：统一成虚线框，与表单输入框观感一致 */
.form-item input[type=file] {
  height: auto; padding: 7px 8px; border: 1px dashed #DED8CE; border-radius: 10px;
  background: #FAF9F7; font-size: 12.5px; color: var(--weak); cursor: pointer;
  line-height: 1.4;
}
.form-item input[type=file]:hover { border-color: var(--main); background: #FFF9F5; }
.form-item input[type=file]::file-selector-button {
  height: 28px; margin: 0 10px 0 0; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
  color: #555B66; font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .15s;
}
.form-item input[type=file]::file-selector-button:hover { border-color: var(--main); color: var(--main); }
/* ---------- 所在地区 · 自定义下拉（面板固定高度、内部滚动，不溢出发布卡片） ---------- */
.rg-dd { position: relative; }
.rg-trigger {
  width: 100%; height: 42px; display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; background: #fff;
  font-size: 13.5px; color: var(--text); font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.rg-trigger:hover { border-color: #E7D3BE; }
.rg-dd.open .rg-trigger, .rg-trigger:focus-visible {
  border-color: var(--main); box-shadow: 0 0 0 3px rgba(255,109,31,.10); outline: none;
}
.rg-caret {
  flex: 0 0 auto; width: 8px; height: 8px; margin-left: 10px;
  border-right: 1.6px solid #8A8578; border-bottom: 1.6px solid #8A8578;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.rg-dd.open .rg-caret { transform: translateY(-2px) rotate(-135deg); }
.rg-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  max-height: 240px; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(60,40,20,.14); padding: 4px 0;
}
.rg-panel.up { top: auto; bottom: calc(100% + 6px); }
.rg-group {
  padding: 8px 14px 4px;
  background: #FBF7F2; font-size: 11px; font-weight: 600; color: var(--weak);
  letter-spacing: .6px; line-height: 1.4;
}
.rg-opt { padding: 7px 14px; font-size: 13px; color: var(--sub); cursor: pointer; line-height: 1.35; }
.rg-opt:hover { background: #FFF4EC; color: var(--main); }
.rg-opt.on { background: #FFF8F3; color: var(--main); font-weight: 600; }
.rg-opt.on::after { content: "✓"; float: right; font-size: 12px; }
.upload-box {
  grid-column: 1 / -1; border: 1.5px dashed #D5D1C9; border-radius: 12px;
  padding: 26px; text-align: center; color: var(--sub); font-size: 13px;
  background: #FAF9F7; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: 18px; justify-content: center;
}
.upload-box:hover { border-color: var(--main); background: var(--main-soft); }
.upload-box .up-empty, .upload-box .up-prev { display: flex; align-items: center; gap: 18px; justify-content: center; }
.upload-box .up-empty[hidden], .upload-box .up-prev[hidden] { display: none; }
.upload-box .up-prev { gap: 14px; }
.upload-box .up-prev img { width: 84px; height: 84px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px; flex-shrink: 0; }
.upload-box .up-del { color: var(--main); text-decoration: underline; font-style: normal; cursor: pointer; }
.upload-box .up-del:hover { color: var(--main-dark); }
.upload-box.has-file { border-style: solid; border-color: var(--main); background: #fff; }
.upload-box .up-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--main-soft); color: var(--main); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.upload-box .up-txt b { display: block; color: var(--text); font-size: 13.5px; }
.upload-box .up-txt span { font-size: 11.5px; color: var(--weak); display: block; margin-top: 3px; }
.upload-box input[type=file] { display: none; }
.pub-foot { border-top: 1px solid var(--line); padding: 16px 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pub-foot .agree { font-size: 12.5px; color: var(--sub); display: flex; align-items: center; gap: 8px; }
.pub-foot .agree input { width: 15px; height: 15px; accent-color: var(--main); }
.pub-foot .btns { margin-left: auto; display: flex; gap: 10px; }
.btn-lg {
  height: 42px; padding: 0 26px; border-radius: 10px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: #555B66; cursor: pointer; transition: all .15s;
}
.btn-lg:hover { border-color: var(--main); color: var(--main); }
.btn-lg.primary { background: var(--main); border-color: var(--main); color: #fff; }
.btn-lg.primary:hover { background: var(--main-dark); border-color: var(--main-dark); }
.pub-msg { margin: 0 26px 16px; padding: 12px 16px; border-radius: 10px; font-size: 13px; }
.pub-msg.ok { background: #ECFDF3; color: #067647; border: 1px solid #ABEFC6; }
.pub-msg.err { background: #FEF3F2; color: #B42318; border: 1px solid #FECDCA; }
.pub-side { display: flex; flex-direction: column; gap: 14px; }
.pub-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.pub-card h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.pub-card h3::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--main); }
.rule-list { display: flex; flex-direction: column; gap: 9px; }
.rule-list li { list-style: none; font-size: 12.5px; color: var(--sub); line-height: 1.7; position: relative; padding-left: 13px; }
.rule-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--main); }
.rule-list li b { color: var(--text); font-weight: 600; }
.pub-qr { display: flex; align-items: center; gap: 14px; }
.pub-qr img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; }
.pub-qr p { font-size: 12.5px; color: var(--sub); line-height: 1.7; }
.pub-qr p b { color: var(--text); font-family: var(--mono); }

/* ---------- 已发布信息（发布页下方列表） ---------- */
.pub-list { max-width: 1240px; margin: 0 auto; padding: 4px 16px 36px; }
.pl-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pl-head h2 { font-size: 17px; font-weight: 800; letter-spacing: .3px; display: flex; align-items: center; gap: 8px; }
.pl-head h2::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--main); }
.pl-head span { font-size: 12px; color: var(--weak); }
.pl-head span b { color: var(--main); }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.pl-card {
  min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 13px 15px;
  display: flex; align-items: center; gap: 14px;
  transition: box-shadow .16s, border-color .16s;
}
.pl-card:hover { border-color: #E7D3BE; box-shadow: 0 6px 18px rgba(60,40,20,.09); }
/* 左侧：二维码，卡片视觉主体 */
.pl-qrbox {
  position: relative; flex-shrink: 0; width: 98px; height: 110px; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--line); background: #fff;
}
/* 二维码绝对定位，底部留出 21px 给「扫码联系」条，绝不遮挡码面 */
.pl-qrbox img {
  position: absolute; left: 5px; right: 5px; top: 5px;
  width: calc(100% - 10px); height: calc(100% - 31px);
  object-fit: contain; display: block;
}
.pl-qrbox .pl-qr-tag {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 21px;
  background: var(--main); color: #fff; font-size: 10px; letter-spacing: .4px;
  display: flex; align-items: center; justify-content: center;
}
.pl-qrbox.none { border-style: dashed; background: var(--bg); }
.pl-qrbox.none span { font-size: 10.5px; color: var(--weak); text-align: center; line-height: 1.5; }
/* 右侧：名称 + 分类地区 + 简介 + 联系人，四行紧凑排布 */
.pl-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pl-top { display: flex; align-items: baseline; gap: 8px; }
.pl-name {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: .2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-top time { flex-shrink: 0; font-size: 10.5px; color: var(--weak); font-family: var(--mono); }
.pl-sub { font-size: 11.5px; color: var(--weak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 板块标签徽章（发布页列表 / 后台审核卡片） */
.pl-tag, .rc-tag {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 5px;
  font-style: normal; font-size: 10.5px; font-weight: 600; line-height: 1.7;
  color: var(--main); background: var(--main-soft); border: 1px solid var(--main-line);
  vertical-align: 1px;
}
/* 业务标签徽章：投稿卡片上的浅灰小标 */
.pl-btag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px;
  font-style: normal; font-size: 10.5px; line-height: 1.7; vertical-align: 1px;
  color: #8A8072; background: #FFFDF9; border: 1px solid #EFE6DA;
}
.pl-intro {
  font-size: 12px; color: var(--sub); line-height: 1.6; margin: 0;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pl-meta {
  display: flex; align-items: center; gap: 4px 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--sub); margin-top: 1px; max-width: 100%;
}
.pl-meta > span { min-width: 0; }
.pl-meta b { color: var(--text); }
.pl-way {
  font-family: var(--mono); color: var(--main);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto;
}
.pl-site { margin-left: auto; color: var(--main); white-space: nowrap; flex-shrink: 0; }
.pl-empty { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 42px; text-align: center; color: var(--weak); font-size: 13px; }

/* ---------- 供需情况（用户发布信息展示页，只读） ---------- */
.sup-page { max-width: 1240px; margin: 0 auto; padding: 22px 16px 40px; }
.sup-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sup-hero h1 { font-size: 23px; font-weight: 800; letter-spacing: .5px; display: flex; align-items: center; gap: 10px; }
.sup-hero h1::before { content: ""; width: 5px; height: 21px; border-radius: 3px; background: var(--main); }
.sup-note { margin-top: 9px; font-size: 12.5px; color: var(--sub); line-height: 1.8; max-width: 760px; }
.sup-cnt { font-size: 12px; color: var(--weak); }
.sup-cnt b { color: var(--main); font-family: var(--mono); font-size: 15px; margin: 0 2px; }
/* 发布成功提示条：4.5s 自动淡出，也可手动关 */
.sup-ok {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 11px 13px;
  border-radius: 11px; background: #ECFDF3; border: 1px solid #ABEFC6; color: #067647;
  font-size: 12.8px; transition: opacity .24s ease, transform .24s ease;
}
.sup-ok.out { opacity: 0; transform: translateY(-4px); }
.sup-ok p { flex: 1; min-width: 0; line-height: 1.6; }
.sup-ok-ic {
  width: 20px; height: 20px; border-radius: 50%; background: #067647; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sup-ok-x {
  width: 22px; height: 22px; flex-shrink: 0; border: 0; border-radius: 6px;
  background: transparent; color: #4E9E76; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sup-ok-x:hover { background: rgba(6,118,71,.09); color: #067647; }
.sup-tags { margin-bottom: 14px; }

/* ---------- 后台 ---------- */
.adm { display: flex; min-height: 100vh; }
.adm-side { width: 220px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.adm-logo { height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.adm-logo .brand-mark { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
.adm-logo b { color: var(--text); font-size: 15px; letter-spacing: 1px; }
.adm-logo span { color: var(--weak); font-size: 9.5px; letter-spacing: 2px; display: block; margin-top: 1px; font-family: var(--mono); }
.adm-menu { padding: 14px 12px; flex: 1; overflow-y: auto; }
.adm-menu .grp { font-size: 10px; color: var(--weak); letter-spacing: 2px; padding: 14px 12px 6px; font-family: var(--mono); }
.adm-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: #4A5058; font-size: 13.5px; margin-bottom: 2px; transition: all .12s; }
.adm-menu a:hover { color: var(--main); background: var(--main-soft); }
.adm-menu a.on { color: #fff; background: var(--main); font-weight: 600; }
.adm-menu a .ico { width: 20px; text-align: center; font-size: 14px; }
.adm-menu a .badge { margin-left: auto; background: var(--main); color: #fff; font-size: 10px; padding: 1px 7px; border-radius: 9px; font-family: var(--mono); }
.adm-menu a.on .badge { background: #fff; color: var(--main); }
.adm-user { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.adm-user .ava { width: 32px; height: 32px; border-radius: 50%; background: var(--main); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.adm-user .nm { color: var(--text); font-size: 13px; font-weight: 600; }
.adm-user .rl { color: var(--weak); font-size: 11px; }
.adm-user .out { margin-left: auto; color: var(--weak); font-size: 12px; }
.adm-user .out:hover { color: var(--main); }
.adm-main { flex: 1; min-width: 0; background: var(--bg); display: flex; flex-direction: column; }
.adm-top { height: 58px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 26px; gap: 14px; position: sticky; top: 0; z-index: 30; }
.adm-top .ct { font-size: 13.5px; font-weight: 700; }
.adm-top .cs { font-size: 12px; color: var(--weak); margin-left: 8px; }
.adm-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pill-btn { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; color: #555B66; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pill-btn:hover { border-color: var(--main); color: var(--main); }
.adm-body { padding: 22px 26px 40px; }
.adm-sec { display: none; }
.adm-sec.on { display: block; }
.adm-hd { display: flex; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.adm-hd h1 { font-size: 19px; font-weight: 800; letter-spacing: .3px; }
.adm-hd p { font-size: 12.5px; color: var(--sub); margin-top: 4px; }
.adm-hd .acts { margin-left: auto; display: flex; gap: 10px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
.kpi .k-lbl { font-size: 12px; color: var(--sub); }
.kpi .k-val { font-family: var(--mono); font-size: 27px; font-weight: 800; margin-top: 8px; letter-spacing: -.5px; color: var(--main-dark); }
.kpi .k-val small { font-size: 12px; color: var(--weak); font-weight: 400; margin-left: 3px; }
.kpi .k-trend { margin-top: 6px; font-size: 11.5px; font-family: var(--mono); color: var(--sub); }
.adm-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.adm-grid.c2 { grid-template-columns: 1.6fr 1fr; }
.adm-grid.c2r { grid-template-columns: 1fr 1fr; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.panel-hd { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-hd h3 { font-size: 14px; font-weight: 700; }
.panel-hd .sub { font-size: 11.5px; color: var(--weak); }
.panel-hd .lnk { margin-left: auto; font-size: 12px; color: var(--main); cursor: pointer; }
/* 访问趋势：内联 SVG 折线图 */
.trend { padding: 6px 12px 0; }
.trend-svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend-svg text { font-family: var(--mono); }
.trend-svg .tick-y { font-size: 10px; fill: var(--weak); text-anchor: end; }
.trend-svg .tick-x { font-size: 10.5px; fill: var(--weak); text-anchor: middle; }
.trend-svg .tick-x.on { fill: var(--main); font-weight: 600; }
.trend-svg .tick-v { font-size: 10.5px; fill: var(--sub); text-anchor: middle; }
.trend-svg .tick-v.on { fill: var(--main); font-weight: 700; font-size: 11.5px; }
.trend-svg .tick-empty { font-size: 12px; fill: var(--weak); text-anchor: middle; }
.chart-legend { display: flex; gap: 18px; padding: 4px 20px 14px; font-size: 11.5px; color: var(--sub); }
.chart-legend i.ln { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: 3px; }
.chart-legend i.ln.pv { background: var(--main); }
.chart-legend i.ln.uv { background: #BDB6AC; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl-wrap { overflow-x: auto; }
.tbl th { text-align: left; padding: 10px 14px; font-size: 11.5px; font-weight: 500; color: var(--sub); background: #FAF9F7; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: #FAF9F7; }
.t-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--main-soft); color: var(--main); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; overflow: hidden; flex-shrink: 0; }
.t-logo img { width: 22px; height: 22px; object-fit: contain; }
.t-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.t-name b { font-weight: 600; display: block; font-size: 13px; }
.t-name span { font-size: 11px; color: var(--weak); display: block; margin-top: 1px; font-family: var(--mono); }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.ok { color: #067647; background: #ECFDF3; }
.pill.pending { color: #B54708; background: #FFFAEB; }
.pill.off { color: #5B616B; background: #F2F1EE; }
.pill.rej { color: #B42318; background: #FEF3F2; }
.rate-cell { font-family: var(--mono); font-size: 12.5px; color: var(--main-dark); font-weight: 700; white-space: nowrap; }
.mono-cell { font-family: var(--mono); font-size: 12px; color: var(--sub); white-space: nowrap; }
.row-acts { display: flex; gap: 6px; }
.row-acts a { font-size: 12px; color: #555B66; padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; transition: all .12s; white-space: nowrap; }
.row-acts a:hover { color: var(--main); border-color: var(--main); }
.row-acts a.danger:hover { color: #D92D20; border-color: #D92D20; }
.dist { padding: 16px 18px; }
.dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dist-row:last-child { margin-bottom: 0; }
.dist-row .dl { width: 122px; font-size: 12px; color: #44403A; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist-row .bar { flex: 1; height: 8px; background: #F2F1EE; border-radius: 4px; overflow: hidden; }
.dist-row .bar i { display: block; height: 100%; background: var(--main); border-radius: 4px; }
.dist-row .dn { width: 44px; text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--sub); }
.dist-env {
  margin: 0 18px; padding: 11px 0 16px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px; line-height: 1.9; color: #7A7268;
}
.dist-env b { color: #44403A; font-weight: 600; }
.env-tag {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 1px 8px;
  border-radius: 20px; background: #fff; border: 1px solid var(--line); color: #555B66; font-size: 11.5px;
}
.env-tag i { font-style: normal; font-family: var(--mono); color: var(--main); font-size: 11px; }
.adm-toolbar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; box-shadow: var(--shadow); flex-wrap: wrap; }
.adm-toolbar input[type=text], .adm-toolbar input[type=search] { height: 36px; width: 240px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; font-size: 13px; outline: none; }
.adm-toolbar input:focus { border-color: var(--main); }
.adm-toolbar select { height: 36px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; font-size: 13px; color: #555B66; outline: none; background: #fff; }
.adm-toolbar .sp { margin-left: auto; display: flex; gap: 10px; }
.btn-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 36px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: #555B66; cursor: pointer;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  font-family: inherit; line-height: 1; transition: all .15s;
}
.btn-sm:hover { border-color: #D6D1C8; color: #3D4351; }
.btn-sm.primary { background: var(--main); border-color: var(--main); color: #fff; }
.btn-sm.primary:hover { background: var(--main-dark); border-color: var(--main-dark); color: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; padding: 18px 20px; }
.form-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 14px 20px; flex-wrap: wrap; }
.form-foot .tip { font-size: 12px; color: var(--weak); margin-left: auto; }
.review-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.review-card:last-child { border-bottom: none; }
.review-card .rc-main { flex: 1; min-width: 240px; }
.review-card .rc-t { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-card .rc-t .dm { font-family: var(--mono); font-size: 11px; color: var(--weak); font-weight: 400; }
.review-card .rc-d { font-size: 12px; color: var(--sub); margin-top: 3px; }
.review-card .rc-d b { color: #B54708; font-weight: 500; }
.review-card .rc-qr { width: 62px; height: 62px; border-radius: 10px; border: 1px solid var(--line); padding: 3px; background: #fff; object-fit: cover; flex-shrink: 0; }
.review-card .rc-acts { display: flex; gap: 8px; flex-shrink: 0; }
.set-row { display: flex; align-items: center; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.set-row:last-child { border-bottom: none; }
.set-row .s-main { flex: 1; min-width: 220px; }
.set-row .s-t { font-size: 13.5px; font-weight: 600; }
.set-row .s-d { font-size: 12px; color: var(--weak); margin-top: 2px; }
.switch { width: 38px; height: 21px; border-radius: 11px; background: var(--main); position: relative; flex-shrink: 0; cursor: pointer; }
.switch::after { content: ""; position: absolute; right: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; }
.switch.off { background: #D5D1C9; }
.switch.off::after { right: auto; left: 2px; }
.adm-pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 14px 18px; flex-wrap: wrap; }
.adm-pager .info { font-size: 12px; color: var(--weak); margin-right: auto; }
.adm-pager a { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; color: #555B66; font-family: var(--mono); padding: 0 8px; }
.adm-pager a.on { background: var(--main); border-color: var(--main); color: #fff; }
.adm-menu-btn { display: none; }

/* 登录页 */
.login-wrap { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 16px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand .brand-mark { width: 42px; height: 42px; font-size: 20px; border-radius: 13px; }
.login-brand b { font-size: 22px; letter-spacing: 2px; }
.login-box { width: 380px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 30px 30px 26px; }
.login-box h2 { font-size: 17px; font-weight: 800; }
.login-box .sub { font-size: 12.5px; color: var(--sub); margin: 4px 0 22px; }
.login-box .form-item { margin-bottom: 14px; }
.login-box .btn-lg.primary { width: 100%; margin-top: 6px; }
.login-foot { font-size: 12px; color: var(--weak); }
.login-err { background: #FEF3F2; color: #B42318; border: 1px solid #FECDCA; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 14px; }
.login-ok { background: #ECFDF3; color: #067647; border: 1px solid #ABEFC6; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 14px; }
/* 验证码输入：大号等宽 + 字距，方便一眼核对 */
.code-in { font-family: var(--mono); font-size: 24px; letter-spacing: 10px; text-align: center; padding: 10px 12px; height: 52px; }
.login-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 12.5px; flex-wrap: wrap; }
.login-alt a { color: var(--sub); }
.login-alt a:hover { color: var(--main); }
.inline-form { display: inline; margin: 0; }
.btn-link { background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--main); cursor: pointer; font-family: var(--sans); }
.btn-link:disabled { color: var(--weak); cursor: not-allowed; }
/* 后台顶部：两步验证未启用时的提示条 */
.adm-sec-warn {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 12.5px; line-height: 1.7;
}
.adm-sec-warn a { color: #92400E; text-decoration: underline; }
.adm-sec-warn .x { margin-left: auto; color: #B45309; }

/* 系统设置 · 站点 Logo 上传 */
.logo-set { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-box {
  width: 64px; height: 64px; border-radius: 14px; background: var(--main); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800;
  flex-shrink: 0; overflow: hidden;
}
.logo-box.has-img { background: #fff; border: 1px solid var(--line); }
.logo-box img { width: 100%; height: 100%; object-fit: contain; }
.logo-ops { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.logo-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-item label.logo-pick {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; height: 32px;
  padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 12.5px; font-weight: 500; color: #555B66; cursor: pointer; transition: all .15s;
}
.form-item label.logo-pick:hover { border-color: var(--main); color: var(--main); }
.logo-pick input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.logo-fname { font-size: 12px; color: var(--weak); }

/* ---------- 站内公告弹窗 ---------- */
body.nt-lock, html.nt-lock { overflow: hidden; }
.nt {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.nt[hidden] { display: none; }
.nt-card:focus { outline: none; }
.nt-veil {
  position: absolute; inset: 0; background: rgba(22,16,10,.50);
  /* 背景虚化而非压黑：遮罩比纯色版本更浅，靠 blur 拉开层次；
     -webkit- 前缀给 iOS Safari，安卓 Chrome/微信内置浏览器支持标准写法 */
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s ease;
}
.nt-card {
  position: relative; width: 760px; max-width: 100%;
  background: #fff; border-radius: 26px; overflow: hidden;
  padding: 62px 66px 50px;
  box-shadow: 0 34px 80px -24px rgba(40,28,14,.46), 0 3px 10px rgba(40,28,14,.06);
  transform: translateY(22px) scale(.96); opacity: 0;
  transition: transform .52s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
/* 顶部 3px 渐变条：卡片质感的点睛，不要整块彩色头图 */
.nt-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--main), #FF9A5C 55%, #FFD8C0); }
.nt-x {
  position: absolute; top: 22px; right: 22px; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: transparent; color: #A79E92;
  cursor: pointer; transition: background .18s, color .18s;
}
.nt-x:hover { background: #F4F1EC; color: #5B5348; }
.nt-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; letter-spacing: 1.1px; color: var(--main);
  background: var(--main-soft); border: 1px solid var(--main-line);
  border-radius: 999px; padding: 5px 14px;
}
.nt-kicker::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--main); }
.nt-title { margin-top: 24px; font-size: 32px; font-weight: 800; letter-spacing: .8px; line-height: 1.3; }
.nt-body {
  margin-top: 22px; font-size: 17px; line-height: 2.05; color: var(--sub);
  max-height: 54vh; overflow: auto; overflow-wrap: anywhere;
}
.nt-foot { margin-top: 40px; display: flex; }
.nt-ok {
  height: 54px; padding: 0 42px; border: 0; border-radius: 14px;
  background: var(--main); color: #fff; font-size: 16px; font-weight: 600;
  cursor: pointer; box-shadow: 0 8px 18px -8px rgba(255,109,31,.75);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.nt-ok:hover { background: var(--main-dark); transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(255,109,31,.8); }
.nt-ok:active { transform: translateY(0) scale(.985); box-shadow: 0 4px 10px -6px rgba(255,109,31,.7); }
.nt-x:focus-visible, .nt-ok:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }

/* 内容依次升起：依次 70/110/150/200ms，比整体一起淡入更有层次，也不拖沓 */
.nt-kicker, .nt-title, .nt-body, .nt-foot {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.nt-kicker { transition-delay: .07s; }
.nt-title { transition-delay: .11s; }
.nt-body { transition-delay: .15s; }
.nt-foot { transition-delay: .2s; }
.nt.show .nt-veil { opacity: 1; }
.nt.show .nt-card { opacity: 1; transform: none; }
.nt.show .nt-kicker, .nt.show .nt-title, .nt.show .nt-body, .nt.show .nt-foot { opacity: 1; transform: none; }
/* 关闭：抑制逐项延迟、缩回得更快，像卡片被轻推回原位 */
.nt.closing .nt-veil { opacity: 0; transition-duration: .22s; }
.nt.closing .nt-card {
  opacity: 0; transform: translateY(10px) scale(.975);
  transition-duration: .22s, .18s;
}
.nt.closing .nt-kicker, .nt.closing .nt-title, .nt.closing .nt-body, .nt.closing .nt-foot {
  opacity: 0; transition-duration: .14s; transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .nt-veil, .nt-card, .nt-kicker, .nt-title, .nt-body, .nt-foot { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- 首页发布弹框 ---------- */
body.pf-lock { overflow: hidden; }
.pf {
  position: fixed; inset: 0; z-index: 320;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pf[hidden] { display: none; }
.pf-veil {
  position: absolute; inset: 0; background: rgba(22,16,10,.50);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .28s ease;
}
.pf-card {
  position: relative; width: 760px; max-width: 100%; max-height: 90vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 70px -22px rgba(40,28,14,.42), 0 3px 10px rgba(40,28,14,.06);
  transform: translateY(20px) scale(.97); opacity: 0;
  transition: transform .46s cubic-bezier(.16,1,.3,1), opacity .28s ease;
}
.pf-card:focus { outline: none; }
.pf.show .pf-veil { opacity: 1; }
.pf.show .pf-card { opacity: 1; transform: none; }
.pf.closing .pf-veil { opacity: 0; transition-duration: .2s; }
.pf.closing .pf-card { opacity: 0; transform: translateY(10px) scale(.98); transition-duration: .2s; }
.pf-hd {
  display: flex; align-items: flex-start; gap: 14px; flex-shrink: 0;
  padding: 22px 26px 15px; border-bottom: 1px solid var(--line);
}
.pf-hd-txt { min-width: 0; }
.pf-hd h3 { font-size: 18px; font-weight: 800; letter-spacing: .4px; }
.pf-hd p { margin-top: 5px; font-size: 12px; color: var(--weak); line-height: 1.7; }
.pf-x {
  margin-left: auto; width: 34px; height: 34px; flex-shrink: 0;
  border: 0; border-radius: 9px; background: transparent; color: #A79E92; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .16s, color .16s;
}
.pf-x:hover { background: #F4F1EC; color: #5B5348; }
.pf-x:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
.pf-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* 表单本体自己滚，头尾固定：长表单在手机上也不会把「提交」顶出屏幕 */
.pf-body {
  padding: 18px 26px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
  overflow-y: auto; min-height: 0;
}
.pf-body .upload-box { padding: 18px; }
.pf-foot {
  border-top: 1px solid var(--line); padding: 13px 26px; flex-shrink: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pf-foot .agree { font-size: 12px; color: var(--sub); line-height: 1.5; display: flex; align-items: center; gap: 8px; max-width: 60%; }
.pf-foot .agree input { width: 15px; height: 15px; accent-color: var(--main); flex-shrink: 0; }
.pf-btns { margin-left: auto; display: flex; gap: 10px; }
.pf-msg { margin: 0 26px 14px; padding: 10px 14px; border-radius: 9px; font-size: 12.5px; }
.pf-msg.err { background: #FEF3F2; color: #B42318; border: 1px solid #FECDCA; }
.pf-msg.ok { background: #ECFDF3; color: #067647; border: 1px solid #ABEFC6; }
@media (prefers-reduced-motion: reduce) {
  .pf-veil, .pf-card { transition-duration: .01ms !important; }
}

/* ---------- 自适应 ---------- */
@media (max-width: 1024px) {
  .hero { flex-direction: column; align-items: flex-start; gap: 20px; padding: 34px 36px 26px; min-height: 0; }
  .hero-qrs { align-self: stretch; justify-content: center; }
  .hero-note { margin-top: 20px; padding-top: 18px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .adm-grid.c2, .adm-grid.c2r { grid-template-columns: 1fr; }
  .pub-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .tb-inner { padding: 0 12px; height: 52px; gap: 10px; }
  .tb-acts { margin-left: auto; }
  .tb-btn { padding: 0 10px; font-size: 12px; }
  .brand-txt span { display: none; }
  /* 顶栏放不下五个元素：客服（悬浮码在触屏本就不灵）与后台入口在窄屏收起，
     客服联系方式仍在首屏横幅里，后台用电脑访问 */
  .qr-pop-wrap, .tb-btn.tb-adm { display: none; }
  .tb-nav { margin-left: 0; gap: 0; }
  .tb-nav a { height: 52px; padding: 0 10px; font-size: 17px; letter-spacing: .1px; -webkit-text-stroke: .25px currentColor; }
  .tb-nav a::after { left: 10px; right: 10px; height: 2px; }
  /* 供需页与发布弹框：窄屏单列、按钮拉满更好点 */
  .sup-page { padding: 16px 12px 32px; }
  .sup-hero h1 { font-size: 19px; }
  .sup-note { font-size: 12px; }
  .pl-grid.sup-grid { grid-template-columns: minmax(0, 1fr); }
  .pf { padding: 12px; }
  .pf-card { max-height: 92vh; border-radius: 18px; }
  .pf-hd { padding: 18px 18px 13px; }
  .pf-hd h3 { font-size: 16.5px; }
  .pf-hd p { font-size: 11.5px; }
  .pf-body { grid-template-columns: 1fr; padding: 14px 18px 6px; gap: 12px; }
  .pf-foot { padding: 12px 18px; }
  .pf-foot .agree { max-width: 100%; font-size: 11.5px; }
  .pf-btns { width: 100%; }
  .pf-btns .btn-lg { flex: 1; }
  .pf-msg { margin: 0 18px 12px; }
  .hero { padding: 20px 18px 16px; }
  .hero h1 { font-size: 21px; margin-top: 13px; }
  .hero-note { margin-top: 16px; padding-top: 14px; font-size: 12.5px; line-height: 1.75; gap: 8px; }
  .hero-note .hn-i { width: 16px; height: 16px; font-size: 10px; margin-top: 2px; }
  /* 公告弹窗：窄屏贴合屏幕、按钮拉满更好点 */
  .nt { padding: 14px; }
  .nt-card { padding: 34px 26px 26px; border-radius: 20px; }
  .nt-x { top: 14px; right: 14px; width: 32px; height: 32px; }
  .nt-kicker { font-size: 12px; padding: 4px 12px; }
  .nt-title { font-size: 24px; margin-top: 16px; }
  .nt-body { margin-top: 16px; font-size: 15.5px; line-height: 1.95; max-height: 52vh; }
  .nt-foot { margin-top: 26px; }
  .nt-ok { width: 100%; height: 50px; font-size: 15.5px; }
  .hero-qrs { width: 100%; }
  .hero-qr { flex: 1; max-width: 150px; }
  /* 标签云：窄屏标题与搜索各占一行，标签缩小一档但保持 32px 可点高度 */
  .tagsec { padding: 14px 14px 16px; }
  .tagsec-title { font-size: 17px; }
  .tagsec-hd { gap: 10px; }
  .search { width: 100%; margin-left: 0; }
  .tagcloud { margin-top: 12px; gap: 6px; }
  .tg { height: 27px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .pub-body { grid-template-columns: 1fr; }
  /* 发布信息卡：窄屏单列，二维码略缩，简介多给一行 */
  .pl-grid { grid-template-columns: 1fr; gap: 10px; }
  .pl-card { padding: 12px; gap: 12px; }
  .pl-qrbox { width: 88px; height: 94px; }
  .pl-name { font-size: 14.5px; }
  .pl-intro { -webkit-line-clamp: 3; }
  .pub-foot .btns { margin-left: 0; width: 100%; justify-content: stretch; }
  .pub-foot .btns .btn-lg { flex: 1; }
  /* 后台：侧栏抽屉化 */
  .adm-side { position: fixed; left: 0; top: 0; z-index: 90; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 30px rgba(30,20,10,.12); }
  .adm-side.open { transform: translateX(0); }
  .adm-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px;
    background: #fff; cursor: pointer; font-size: 16px;
  }
  .adm-top { padding: 0 14px; }
  .adm-top .cs { display: none; }
  .adm-body { padding: 16px 14px 30px; }
  /* 后台表单：窄屏改单列，双列在手机上输入框会被挤到不可用 */
  .form-grid { grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; }
  .form-foot { padding: 12px 16px; }
  .panel-hd { padding: 12px 16px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpis .kpi .k-val { font-size: 22px; }
  .adm-hd .acts { margin-left: 0; width: 100%; }
  .trend { padding: 4px 6px 0; }
  .trend-svg .tick-x, .trend-svg .tick-v { font-size: 9.5px; }
  .row-acts a { padding: 4px 6px; }
  .review-card .rc-qr { width: 52px; height: 52px; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 窄屏两列：压缩卡片内边距与 logo，站名允许折两行，避免长名称全被省略号吃掉 */
  .site { padding: 12px 12px 10px; gap: 8px; }
  .s-top { gap: 8px; }
  /* 卡面标记精简成「分类 + 热门」后，两列卡片也放得下，窄屏继续显示分类徽章 */
  .fav { width: 34px; height: 34px; border-radius: 9px; }
  .fav img { width: 23px; height: 23px; }
  .s-name { font-size: 13px; }
  .s-domain { font-size: 10px; }
  .kpis { grid-template-columns: 1fr; }
  .hero-qrs { flex-direction: row; }
  .pl-qrbox { width: 80px; height: 86px; }
  .pl-qrbox .pl-qr-tag { height: 17px; font-size: 9.5px; }
  .pl-meta { font-size: 11px; gap: 6px; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D5D1C9; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }