/* =========================================================
   v1.6.6 留言板 · 收言板
   ---------------------------------------------------------
   与全站风格一致：复用 --card / --line / --tx / --brand 变量，
   圆角 18px，iOS 风。两个子页：
     · 留言板（每位用户）：选分类 → 写留言 → 我的留言
     · 收言板（仅官方）：全部留言看板，筛选 / 搜索 / 打勾
   与 social.css 的 .soc-page 同构（复用其容器与顶栏样式），
   此处只补留言板专属的卡片、分类胶囊、状态徽标、打勾动画。
   ========================================================= */

/* ---------- 剩余次数条 ---------- */
.fb-quota{
  margin:10px 14px 4px;padding:12px 15px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;gap:10px;font-family:var(--sans)
}
.fb-quota .fq-ic{font-size:19px;line-height:1;flex:0 0 auto}
.fb-quota .fq-tx{flex:1;min-width:0;font-size:12.5px;color:var(--tx2);line-height:1.6}
.fb-quota .fq-tx b{color:var(--tx);font-weight:800}
.fb-quota .fq-num{
  flex:0 0 auto;font-size:20px;font-weight:900;color:var(--brand);
  font-variant-numeric:tabular-nums;line-height:1
}
.fb-quota .fq-num small{font-size:11px;font-weight:700;color:var(--ink-3);margin-left:2px}

/* ---------- 分类胶囊 ---------- */
.fb-cats{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 4px}
.fb-cat{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--tx2);font-size:12.5px;font-weight:700;
  cursor:pointer;font-family:var(--sans);transition:transform .12s var(--ios-ease),background .15s,color .15s;
  display:flex;align-items:center;gap:5px
}
.fb-cat:active{transform:scale(.94)}
.fb-cat.on{
  background:linear-gradient(135deg,#667eea,#4a5fc1);color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(102,126,234,.32)
}
.fb-cat .fc-d{font-size:11px;font-weight:500;opacity:.72}

/* ---------- 写留言 ---------- */
.fb-write{padding:6px 14px 14px}
.fb-wbox{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:13px 14px 10px
}
.fb-wbox textarea{
  width:100%;box-sizing:border-box;border:none;background:none;outline:none;resize:none;
  font-size:14.5px;line-height:1.6;color:var(--tx);font-family:var(--sans);min-height:86px;max-height:220px
}
.fb-wbox textarea::placeholder{color:var(--ink-3)}
.fb-wfoot{display:flex;align-items:center;gap:10px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.fb-wcnt{flex:1;font-size:11.5px;color:var(--ink-3);font-family:var(--sans);font-variant-numeric:tabular-nums}
.fb-wcnt.warn{color:#f59e0b}
.fb-wcnt.over{color:#ef4444;font-weight:700}
.fb-wsend{
  flex:0 0 auto;padding:9px 20px;border-radius:999px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#667eea,#4a5fc1);color:#fff;font-size:13.5px;font-weight:800;
  font-family:var(--sans);transition:transform .12s var(--ios-ease)
}
.fb-wsend:active{transform:scale(.94)}
.fb-wsend:disabled{background:var(--line);color:var(--ink-3);cursor:not-allowed}

/* ---------- 分段标题 ---------- */
.fb-sec{padding:16px 16px 6px;font-size:12.5px;font-weight:800;color:var(--ink-3);
  font-family:var(--sans);letter-spacing:.4px;display:flex;align-items:center;gap:6px}
.fb-sec .fs-n{color:var(--brand)}

/* ---------- 留言卡 ---------- */
.fb-card{
  margin:0 14px 10px;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:13px 15px;font-family:var(--sans);position:relative;transition:transform .12s var(--ios-ease)
}
.fb-card:active{transform:scale(.99)}
.fb-card.done{opacity:.72}
.fb-card.done .fb-body{color:var(--tx2)}
.fb-chead{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.fb-tag{
  flex:0 0 auto;font-size:11px;font-weight:800;padding:3px 9px;border-radius:8px;
  background:var(--brand-soft);color:var(--brand)
}
.fb-tag.t-bug{background:rgba(239,68,68,.13);color:#ef4444}
.fb-tag.t-fit{background:rgba(245,158,11,.15);color:#d97706}
.fb-tag.t-suggest{background:rgba(102,126,234,.13);color:#5b6fd8}
.fb-tag.t-account{background:rgba(16,185,129,.14);color:#059669}
.fb-tag.t-content{background:rgba(139,92,246,.14);color:#7c3aed}
.fb-tag.t-other{background:var(--line);color:var(--tx2)}
.fb-name{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--tx2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-time{flex:0 0 auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fb-body{font-size:14px;line-height:1.65;color:var(--tx);word-break:break-word;white-space:pre-wrap}
.fb-reply{
  margin-top:9px;padding:9px 12px;border-radius:12px;background:var(--brand-soft);
  font-size:12.5px;line-height:1.6;color:var(--brand);word-break:break-word
}
.fb-reply b{font-weight:800}
.fb-reply .fr-ar{opacity:.7;margin-right:4px}

/* 状态徽标 */
.fb-state{
  flex:0 0 auto;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;
  display:flex;align-items:center;gap:3px
}
.fb-state.s0{background:rgba(245,158,11,.15);color:#d97706}
.fb-state.s1{background:rgba(16,185,129,.15);color:#059669}

/* ---------- 打勾（仅收言板） ---------- */
.fb-check{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);
  background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:transparent;transition:transform .12s var(--ios-ease),background .2s,border-color .2s;
  padding:0
}
.fb-check:active{transform:scale(.86)}
.fb-check svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fb-check.on{background:#10b981;border-color:#10b981;color:#fff;animation:fbPop .32s var(--ios-ease)}
.fb-check.busy{opacity:.5;pointer-events:none}
@keyframes fbPop{0%{transform:scale(.8)}55%{transform:scale(1.16)}100%{transform:scale(1)}}

/* ---------- 收言板筛选条 ---------- */
.fb-filter{display:flex;gap:8px;overflow-x:auto;padding:10px 14px 4px;-webkit-overflow-scrolling:touch}
.fb-filter::-webkit-scrollbar{display:none}
.fb-fchip{
  flex:0 0 auto;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--tx2);font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--sans);
  white-space:nowrap;display:flex;align-items:center;gap:5px
}
.fb-fchip.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.fb-fchip .fn{font-size:11px;opacity:.72;font-variant-numeric:tabular-nums}

/* 收言板统计 */
.fb-stat{display:flex;gap:10px;padding:12px 14px 4px}
.fb-sbox{
  flex:1;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:12px 8px;text-align:center;font-family:var(--sans)
}
.fb-sbox .sb-n{font-size:21px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.fb-sbox .sb-t{font-size:11px;color:var(--ink-3);margin-top:3px}
.fb-sbox.hot .sb-n{color:#d97706}
.fb-sbox.ok .sb-n{color:#059669}

/* ---------- 空状态 / 骨架 ---------- */
.fb-empty{padding:60px 30px;text-align:center;color:var(--ink-3);font-size:13.5px;
  font-family:var(--sans);line-height:2}
.fb-empty .fe-ic{font-size:44px;display:block;margin-bottom:12px;opacity:.85}
.fb-skel{pointer-events:none}
.fb-skel .sk{background:linear-gradient(90deg,var(--line) 25%,var(--bg-soft) 37%,var(--line) 63%);
  background-size:400% 100%;animation:fbShimmer 1.3s ease infinite;border-radius:8px}
.fb-skel .sk-t{height:13px;width:32%;margin:0 0 10px}
.fb-skel .sk-b{height:12px;width:82%;margin-bottom:7px}
.fb-skel .sk-b2{height:12px;width:56%}
@keyframes fbShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 收言板搜索框 */
.fb-sbox2{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:10px 14px;margin:12px 14px 2px}
.fb-sbox2 svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round}
.fb-sbox2 input{flex:1;border:none;background:none;outline:none;font-size:14.5px;color:var(--tx);
  font-family:var(--sans);min-width:0;padding:0}

/* 侧滑返回：页面跟手位移时禁用内部滚动干扰（与 soc-page 一致） */
.fb-page{will-change:transform;touch-action:pan-y;overscroll-behavior-x:contain}