/* 意见反馈（2026-11-09）—— 全站右上角常驻入口 + 毛玻璃弹窗
 * 🔴 一律用主题变量，禁止写死 #2e7d32 之类的绿色；黑白主视觉，唯一暖色 var(--accent)。
 * 🔴 遮罩复用 .overlay（wb.css 已带 backdrop-filter + 自动收起 AI 导师）。
 */
:root{
  --fb-panel: var(--panel, #ffffff);
  --fb-panel2: var(--panel-2, #f4f4f1);
  --fb-text: var(--text, #141410);
  --fb-muted: var(--muted, #6f7069);
  --fb-border: var(--border, #e2e2dc);
  /* 11-06 崔崔拍板「黑白主视觉」：浮层强调色固定为唯一暖色 #B4491B。
     不能用 var(--accent)——light 下它是墨黑、老 green/cream 主题下它是绿色，
     会让反馈按钮跟着变成绿色；背景/文字仍走主题变量，夜间主题照样可读。 */
  --fb-accent: #b4491b;
  --fb-radius: 14px;
}

/* 右上角入口：故意不带 .btn（沉浸式首页会隐藏 .right-h > .btn） */
.fb-fab{
  display:inline-flex; align-items:center; gap:.38em; flex:0 0 auto;
  padding:.42em .72em; border:1px solid var(--fb-border); border-radius:.6em;
  background:var(--fb-panel2); color:var(--fb-text); font-size:13px; line-height:1.1;
  cursor:pointer; white-space:nowrap; position:relative; z-index:2;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.fb-fab:hover{ border-color:var(--fb-accent); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.fb-fab:focus-visible{ outline:2px solid var(--fb-accent); outline-offset:2px; }
.fb-fab .fb-ico{ font-size:1em; line-height:1; }
.fb-fab .fb-badge{
  position:absolute; top:-.42em; right:-.42em; min-width:1.15em; height:1.15em;
  padding:0 .22em; border-radius:999px; background:var(--fb-accent); color:#fff;
  font-size:.66em; font-weight:700; line-height:1.15em; text-align:center;
  border:2px solid var(--fb-panel); box-sizing:content-box;
}
.fb-fab .fb-badge[hidden]{ display:none; }
/* 没有 #hdr 的页面：固定到右上角，不依赖任何页面结构 */
.fb-fab--fixed{ position:fixed; top:.7em; right:.9em; z-index:1200; }

/* 弹窗 */
.fb-modal{
  width:min(880px, 100%); max-height:calc(100vh - 3em); overflow:auto;
  background:var(--fb-panel); color:var(--fb-text);
  border:1px solid var(--fb-border); border-radius:var(--fb-radius);
  box-shadow:0 24px 64px rgba(0,0,0,.22);
  font-size:16px;                 /* 浮层独立基准，不跟随全站字体缩放 */
  animation:fbIn .18s ease-out;
}
@keyframes fbIn{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .fb-modal{ animation:none; } }

.fb-head{
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding:.7em 1.2em .5em; border-bottom:1px solid var(--fb-border);
  position:sticky; top:0; background:var(--fb-panel); z-index:3;
}
.fb-head h3{ margin:0; font-size:1.05em; font-weight:700; letter-spacing:.01em; }
.fb-head .fb-sub{ margin:.2em 0 0; font-size:.82em; color:var(--fb-muted); }
.fb-x{
  border:0; background:transparent; color:var(--fb-muted); font-size:1.5em;
  line-height:1; cursor:pointer; padding:.15em .35em; border-radius:.4em;
}
.fb-x:hover{ background:var(--fb-panel2); color:var(--fb-text); }

.fb-tabs{ display:flex; gap:.35em; padding:.4em 1.2em 0; }
.fb-tab{
  border:1px solid transparent; background:transparent; color:var(--fb-muted);
  padding:.42em .8em; border-radius:.55em; font-size:.9em; cursor:pointer;
}
.fb-tab.on{ background:var(--fb-panel2); color:var(--fb-text); border-color:var(--fb-border); font-weight:600; }
.fb-body{ padding:.6em 1.2em .7em; }

/* 桌面两栏：720px 宽的弹窗不用单栏铺到屏外；手机自动回落单栏 */
.fb-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:1.1em; align-items:start; }
.fb-col{ min-width:0; }

.fb-label{ display:block; font-size:.86em; color:var(--fb-muted); margin:.42em 0 .26em; }
.fb-label:first-child{ margin-top:0; }
.fb-chips{ display:flex; flex-wrap:wrap; gap:.4em; }
.fb-chip{
  border:1px solid var(--fb-border); background:var(--fb-panel2); color:var(--fb-text);
  padding:.32em .7em; border-radius:999px; font-size:.86em; cursor:pointer;
}
.fb-chip.on{ border-color:var(--fb-accent); color:var(--fb-accent); background:var(--fb-panel); font-weight:600; }
.fb-hint{ font-size:.74em; color:var(--fb-muted); line-height:1.5; margin:.3em 0 0; }

.fb-input, .fb-textarea, .fb-select{
  width:100%; box-sizing:border-box; border:1px solid var(--fb-border);
  border-radius:.6em; background:var(--fb-panel2); color:var(--fb-text);
  padding:.6em .7em; font-size:.88em; font-family:inherit;
}
.fb-textarea{ min-height:78px; resize:vertical; line-height:1.5; }
.fb-input:focus, .fb-textarea:focus, .fb-select:focus{
  outline:none; border-color:var(--fb-accent); box-shadow:0 0 0 3px rgba(180,73,27,.10);
}
.fb-row{ display:flex; gap:.6em; align-items:center; flex-wrap:wrap; }
.fb-row > *{ flex:1 1 160px; }

.fb-drop{
  border:1.5px dashed var(--fb-border); border-radius:.7em; padding:.45em;
  display:flex; flex-wrap:wrap; gap:.55em; align-items:center; justify-content:center;
  background:var(--fb-panel2); transition:border-color .15s ease;
}
.fb-drop.on{ border-color:var(--fb-accent); }
.fb-pick{ white-space:nowrap;
  border:1px solid var(--fb-border); background:var(--fb-panel); color:var(--fb-text);
  padding:.45em .8em; border-radius:.55em; font-size:.82em; cursor:pointer;
}
.fb-pick:hover{ border-color:var(--fb-accent); }
.fb-thumbs{ display:flex; flex-wrap:wrap; gap:.55em; margin-top:.55em; }
.fb-thumb{
  position:relative; width:82px; height:82px; border-radius:.55em; overflow:hidden;
  border:1px solid var(--fb-border); background:var(--fb-panel2);
  display:flex; align-items:center; justify-content:center; font-size:1.6em;
}
.fb-thumb img{ width:100%; height:100%; object-fit:cover; }
.fb-thumb .fb-rm{
  position:absolute; top:2px; right:2px; width:20px; height:20px; line-height:18px;
  border:0; border-radius:50%; background:rgba(20,20,16,.72); color:#fff;
  font-size:.78em; cursor:pointer; text-align:center;
}
.fb-thumb .fb-cap{
  position:absolute; bottom:0; left:0; right:0; padding:2px 4px;
  background:rgba(20,20,16,.62); color:#fff; font-size:.6em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fb-prog{ height:4px; border-radius:999px; background:var(--fb-border); overflow:hidden; margin-top:.5em; }
.fb-prog > i{ display:block; height:100%; width:0; background:var(--fb-accent); transition:width .18s linear; }

/* 吸底：弹窗内容再长，提交按钮也始终看得见、点得到（桌面首屏尤其重要） */
.fb-actions{
  display:flex; align-items:center; gap:.7em; margin-top:.6em; flex-wrap:wrap;
  position:sticky; bottom:0; z-index:2;
  background:var(--fb-panel); padding:.45em 0 .5em;
  border-top:1px solid var(--fb-border);
}
.fb-submit{
  border:0; background:var(--fb-accent); color:#fff; padding:.6em 1.3em;
  border-radius:.6em; font-size:.9em; font-weight:600; cursor:pointer;
}
.fb-submit:hover{ filter:brightness(1.08); }
.fb-submit:disabled{ opacity:.55; cursor:not-allowed; }
.fb-msg{ font-size:.8em; color:var(--fb-muted); }
.fb-msg.err{ color:var(--fb-accent); }
.fb-msg.ok{ color:var(--fb-accent); font-weight:600; }

/* 反馈列表 */
.fb-list{ display:flex; flex-direction:column; gap:.7em; }
.fb-card{
  border:1px solid var(--fb-border); border-radius:.7em; padding:.8em .9em;
  background:var(--fb-panel2);
}
.fb-card .fb-meta{ display:flex; flex-wrap:wrap; gap:.4em .7em; font-size:.74em; color:var(--fb-muted); }
.fb-card .fb-meta b{ color:var(--fb-text); font-weight:600; }
.fb-card .fb-text{ margin:.55em 0 0; font-size:.88em; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.fb-card .fb-files{ display:flex; flex-wrap:wrap; gap:.45em; margin-top:.6em; }
.fb-card .fb-files img, .fb-card .fb-files video{
  width:96px; height:96px; object-fit:cover; border-radius:.5em;
  border:1px solid var(--fb-border); cursor:pointer; background:#000;
}
.fb-card .fb-foot{ display:flex; gap:.45em; align-items:center; margin-top:.65em; flex-wrap:wrap; }
.fb-state{
  border:1px solid var(--fb-border); background:var(--fb-panel); color:var(--fb-text);
  padding:.3em .6em; border-radius:.5em; font-size:.76em; cursor:pointer;
}
.fb-state.done{ color:var(--fb-accent); border-color:var(--fb-accent); }
.fb-state.doing{ color:var(--fb-accent); }
.fb-note{ font-size:.76em; color:var(--fb-muted); margin-top:.45em; }
.fb-empty{ padding:2em 0; text-align:center; color:var(--fb-muted); font-size:.86em; }
.fb-del{ border:0; background:transparent; color:var(--fb-muted); font-size:.76em; cursor:pointer; }
.fb-del:hover{ color:var(--fb-accent); }

/* 图片/视频放大 */
.fb-lightbox{
  position:fixed; inset:0; z-index:10001; background:rgba(8,10,14,.86);
  display:flex; align-items:center; justify-content:center; padding:3vh 3vw;
  backdrop-filter:blur(10px);
}
.fb-lightbox img, .fb-lightbox video{ max-width:100%; max-height:94vh; border-radius:.5em; }
.fb-lightbox .fb-x{ position:absolute; top:1em; right:1.4em; color:#fff; font-size:2em; }

@media (max-width:820px){
  .fb-grid{ grid-template-columns:1fr; gap:0; }
  .fb-fab{ padding:.4em .55em; font-size:13px; }
  .fb-fab .fb-lab{ display:none; }           /* 手机只留信封，避免把顶栏挤换行 */
  .fb-modal{ max-height:calc(100vh - 1.2em); border-radius:12px; }
  .fb-head{ padding:.65em .9em .5em; }
  .fb-tabs{ padding:.45em .9em 0; }
  .fb-body{ padding:.6em .9em .8em; }
  .fb-textarea{ min-height:84px; font-size:.9em; }
  .fb-row > *{ flex:1 1 100%; }
}
@media (max-width:380px){
  .fb-chip{ padding:.32em .55em; font-size:.75em; }
}