/* ============================================================================
   反馈页专属样式（V4.6）。`home.css` 先加载，这里只补表单那一块 —— 导航 / 页脚 / 品牌字标
   / CTA 按钮全部复用官网既有 class，不重写第二份。
   🔴 不要在这里改写 home.css 的既有选择器，否则「官网改一处、反馈页跟随」的复用前提失效。
   ============================================================================ */

/* 官网导航是 fixed 且首屏靠深色 hero 顶上去；反馈页第一屏就是浅底内容 ⇒ 自己让出 64px，
   并且导航一进来就必须是 `scrolled` 那一套白底深字（页面里已写死这个 class）。 */
.fb-page {
  padding-top: 64px;
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.fb-main {
  flex: 1;
}

.fb-hero {
  padding: 56px 0 0; /* 2026-08-23 用户走查两轮：标题上方间距 84→72→56。移动档 56 是导航高补位，不动 */
  text-align: center;
}
.fb-h1 {
  margin: 0;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.fb-sub {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: #54677c;
}

.fb-form {
  max-width: 680px;
  margin: 48px auto 0;
  text-align: left;
}
.fb-field + .fb-field {
  margin-top: 26px;
}
.fb-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 10px;
}
.fb-label .fb-opt {
  margin-left: 8px;
  font-weight: 400;
  font-size: 13px;
  color: #9aa0a9;
}
.fb-input,
.fb-textarea {
  width: 100%;
  border: 1px solid #dfe2e6;
  border-radius: 2px; /* 与订阅站那组方角控件同一档 */
  background: #fff;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: #16181c;
  transition: border-color 0.2s;
}
/* placeholder 比正文浅两档（2026-08-16 用户令再浅一些）：它是提示不是内容，
   与正文太接近会让人以为框里已经填了东西。 */
.fb-input::placeholder,
.fb-textarea::placeholder {
  color: #b9bfc7;
}
.fb-input:focus,
.fb-textarea:focus {
  outline: none;
  border-color: var(--blue);
}
.fb-textarea {
  min-height: 180px;
  resize: vertical;
}
/* 输入框下方一行：**左**是校验提示、**右**是字数。两者同排，报错时表单不会跳高。 */
.fb-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  min-height: 20px;
}
.fb-count {
  flex: none;
  font-size: 12.5px;
  color: #9aa0a9;
}
.fb-count.over {
  color: #b4453c;
}

.fb-actions {
  margin-top: 22px; /* 2026-08-23 用户走查：按钮上下间距缩小（30→22） */
  display: flex;
  align-items: center;
  gap: 18px;
}
.fb-submit {
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.fb-submit:disabled {
  opacity: 0.55;
  cursor: default;
}
/* 校验/提交结果：在输入框正下方、**居左**（2026-08-16 用户令，原先在提交按钮右侧）。 */
.fb-msg {
  min-width: 0;
  font-size: 13px;
  line-height: 1.6;
}
.fb-msg.ok {
  color: #1a8f74;
}
.fb-msg.err {
  color: #b4453c;
}

/* 提交成功后整块换成一句话 + 返回入口（表单收起）—— 免得用户对着还留着原文的表单
   分不清「到底提交出去没有」。 */
.fb-done {
  max-width: 680px;
  /* 底部 110 是接住 `.fb-tail` 收起后空出来的那段（它原本负责页面底部留白）。 */
  margin: 48px auto 110px;
  padding: 40px 32px;
  border: 1px solid #e6e9ed;
  border-radius: 2px;
  text-align: center;
}
.fb-done-h {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.fb-done-p {
  margin: 12px 0 26px;
  font-size: 15px;
  line-height: 1.9;
  color: #54677c;
}

/* 邮箱退路：与表单同宽同左缘（⇒ 与「提交反馈」按钮左对齐），且离按钮拉开一段。 */
.fb-tail {
  max-width: 680px;
  margin: 40px auto 0; /* 同轮：按钮到邮箱行 56→40 */
  padding-bottom: 110px;
  text-align: left;
  font-size: 14px;
  line-height: 1.9;
  color: #8a8e96;
}
.fb-tail a {
  color: var(--blue);
}

/* ── 移动版（≤899，断点与 home.css 同值；导航的移动规则在 home.css）── */
@media (max-width: 899px) {
  .fb-page {
    padding-top: 56px; /* 移动版导航高 56（home.css .hero-bar） */
  }
  .fb-hero {
    padding-top: 56px;
  }
  .fb-h1 {
    font-size: 28px;
  }
  .fb-sub {
    font-size: 14.5px;
    margin-top: 12px;
    padding: 0 6px;
  }
  .fb-form {
    margin-top: 36px;
  }
  .fb-tail {
    margin-top: 44px;
    padding-bottom: 84px;
  }
  .fb-done {
    margin-bottom: 84px;
    padding: 32px 20px;
  }
}

/* ── V4.9-3 反馈配图（选填）：添加入口 + 缩略图行 ─────────────────────────────── */
.fb-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2px;
}
.fb-addimg {
  width: 84px;
  height: 84px;
  border: 1px dashed #dfe2e6;
  border-radius: 2px; /* 与输入框同一档方角 */
  background: #fff;
  color: #9aa0a9;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition:
    border-color 0.2s,
    color 0.2s;
}
.fb-addimg:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.fb-addimg-plus {
  font-size: 22px;
  line-height: 1;
}
.fb-addimg-txt {
  font-size: 12px;
}
.fb-thumb {
  position: relative;
  width: 84px;
  height: 84px;
}
.fb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid #dfe2e6;
  display: block;
}
/* 移除钮压角：黑底白 ×，与整站的克制配色一致（不引入新的强调色）。 */
.fb-thumb-x {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #16181c;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  padding: 0;
  cursor: pointer;
}