/* ==========================================================================
   用户反馈 · 前台样式（独立反馈页 + 页面右下角浮窗组件）
   与宜兴旅游站同色系：墨绿主色 + 暖陶点缀
   ========================================================================== */
:root{
  --fb-ink:#22352d;
  --fb-ink-2:#2f5241;
  --fb-accent:#c07b46;
  --fb-accent-2:#e2a468;
  --fb-line:#e5e7e1;
  --fb-txt:#242a26;
  --fb-txt-2:#6b746e;
  --fb-bg:#f4f5f2;
  --fb-font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------------- 独立反馈页 ---------------- */
body.fb-page{
  margin:0;font-family:var(--fb-font);color:var(--fb-txt);background:var(--fb-bg);
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
.fb-hero{
  background:linear-gradient(135deg,#22352d,#2f5241 70%,#3c6b52);color:#fff;
  padding:52px 24px 96px;text-align:center;position:relative;overflow:hidden;
}
.fb-hero::after{
  content:"";position:absolute;inset:auto -10% -60% -10%;height:180px;
  background:var(--fb-bg);border-radius:50% 50% 0 0
}
.fb-hero .eyebrow{letter-spacing:.42em;font-size:12px;color:#cddbd2;margin-bottom:10px}
.fb-hero h1{margin:0;font-size:26px;letter-spacing:.02em}
.fb-hero p{margin:12px auto 0;max-width:560px;color:#c9d8cf;font-size:13.5px}
.fb-wrap{width:min(720px,92vw);margin:-64px auto 60px;position:relative;z-index:2}
.fb-card{
  background:#fff;border:1px solid var(--fb-line);border-radius:18px;padding:28px;
  box-shadow:0 20px 50px -26px rgba(24,38,30,.3)
}
.fb-card h2{margin:0 0 6px;font-size:17px}
.fb-card .tip{margin:0 0 20px;color:var(--fb-txt-2);font-size:12.5px}

.fb-field{margin-bottom:16px}
.fb-field > label{display:block;font-size:13px;color:var(--fb-txt-2);margin-bottom:7px}
.fb-field .req{color:#c0473c}
.fb-field input[type=text],.fb-field input[type=email],.fb-field textarea{
  width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--fb-line);border-radius:10px;
  font-family:var(--fb-font);font-size:14px;color:var(--fb-txt);background:#fff;transition:.18s
}
.fb-field input:focus,.fb-field textarea:focus{outline:none;border-color:#9dbfa9;box-shadow:0 0 0 3px rgba(79,138,106,.12)}
.fb-field textarea{min-height:120px;resize:vertical;line-height:1.7}
.fb-chips{display:flex;flex-wrap:wrap;gap:8px}
.fb-chips label{
  border:1px solid var(--fb-line);border-radius:20px;padding:6px 14px;font-size:13px;cursor:pointer;
  color:var(--fb-txt-2);transition:.18s;background:#fbfcfa
}
.fb-chips label:hover{border-color:#9dbfa9;color:var(--fb-ink-2)}
.fb-chips input{position:absolute;opacity:0;pointer-events:none}
.fb-chips input:checked + span{color:#fff}
.fb-chips label:has(input:checked){background:var(--fb-ink-2);border-color:var(--fb-ink-2);color:#fff}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.fb-submit{
  width:100%;padding:12px;border:0;border-radius:11px;background:var(--fb-ink-2);color:#fff;
  font-family:var(--fb-font);font-size:15px;cursor:pointer;transition:.2s;margin-top:6px
}
.fb-submit:hover{background:var(--fb-ink)}
.fb-submit:disabled{opacity:.6;cursor:not-allowed}
.fb-note{margin:14px 0 0;color:#9aa29b;font-size:12px;text-align:center}
.fb-flash{padding:12px 15px;border-radius:11px;font-size:13.5px;margin-bottom:18px}
.fb-flash.ok{background:#eaf6ef;color:#1f6b45;border:1px solid #cbe6d6}
.fb-flash.err{background:#fdf1ef;color:#a5382d;border:1px solid #f0d5d0}
.fb-code{font-family:ui-monospace,Consolas,monospace;color:var(--fb-ink);font-weight:700}
.fb-foot{text-align:center;color:#9aa29b;font-size:12px;padding:0 20px 40px}
.fb-foot a{color:var(--fb-ink-2)}

/* ---------------- 验证码行 ---------------- */
.fb-cap{display:flex;align-items:center;gap:10px}
.fb-field .fb-cap input[type=text]{width:auto;flex:1;min-width:0;text-transform:uppercase}
.fb-cap-img{width:132px;height:44px;flex:none;display:block;border:1px solid var(--fb-line);
  border-radius:8px;background:#f6f4ef;cursor:pointer}
.fb-cap-img:hover{border-color:#9dbfa9}

/* ---------------- 右下角浮窗组件 ----------------
   站点已带 brand:fab 浮标时，反馈按钮直接复用浮标样式（位于"微信咨询"上方），
   这里的 .fb-fab 只在宿主没有浮标时兜底，视觉与 .fab-btn 保持一致 */
/* 宿主站点未必有全局 border-box；浮窗作用域内统一盒模型，防止加内边距后超宽 */
.fb-fab,.fb-mask,.fb-mask *,.fb-modal,.fb-modal *{box-sizing:border-box}
.fb-fab{
  position:fixed;right:clamp(14px,2vw,30px);bottom:clamp(18px,3vh,34px);z-index:120;
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(47,74,62,.18);
  background:#fff;color:#2f4a3e;box-shadow:0 10px 26px -10px rgba(43,43,40,.42);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  cursor:pointer;padding:0;font-family:var(--fb-font);
  transition:background .3s,color .3s,transform .3s
}
.fb-fab:hover{background:#2f4a3e;color:#fff;transform:translateY(-3px)}
.fb-fab svg{width:21px;height:21px;display:block}
.fb-fab small{font-size:10px;letter-spacing:.06em;white-space:nowrap}
.fb-mask{
  position:fixed;inset:0;background:rgba(20,30,25,.45);backdrop-filter:blur(2px);
  z-index:9999;display:none;align-items:center;justify-content:center;padding:18px
}
.fb-mask.on{display:flex}
.fb-modal{
  width:min(560px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:18px;
  padding:26px;position:relative;box-shadow:0 30px 70px -30px rgba(0,0,0,.5)
}
.fb-close{
  position:absolute;right:14px;top:12px;border:0;background:none;font-size:22px;line-height:1;
  color:#9aa29b;cursor:pointer
}
.fb-close:hover{color:var(--fb-txt)}
.fb-modal h3{margin:0 0 4px;font-size:17px;font-family:var(--fb-font);letter-spacing:normal}
.fb-modal .tip{margin:0 0 18px;color:var(--fb-txt-2);font-size:12.5px}

/* ---------------- 防宿主页面同名类污染 ----------------
   嵌入静态站后，宿主的通用类（如站点自身的 .tip 旅行贴士卡片：
   白底 + 边框 + 大内边距 + 金色角标）会漏进浮窗。
   在浮窗/独立页上下文内显式重置这些可被继承的外观属性。 */
.fb-modal .tip,.fb-page .tip,.fb-modal .req{
  background:transparent;border:0;padding:0;position:static;float:none;
  box-shadow:none;letter-spacing:normal;text-align:left;
}
.fb-modal .tip::before,.fb-modal .tip::after,
.fb-page .tip::before,.fb-page .tip::after{content:none}
.fb-modal h3::before,.fb-modal h3::after{content:none}

@media(max-width:768px){
  .fb-fab{width:46px;height:46px}
  .fb-fab svg{width:18px;height:18px}
}
@media(max-width:560px){
  .fb-row{grid-template-columns:1fr}
  .fb-card{padding:20px}
  .fb-cap-img{width:112px;height:40px}
}

/* ==========================================================================
   受理单查询页（track.php）
   ========================================================================== */
.fb-card.mt18{margin-top:18px}
.fb-page .fb-track-form,.fb-page .fb-track-state,.fb-page .fb-dl,
.fb-page .fb-track-quote,.fb-page .fb-thumbs,.fb-page .fb-track-reply,
.fb-page .fb-track-wait,.fb-page .fb-mine{box-sizing:border-box}

.fb-track-form{margin-bottom:4px}
.fb-track-form .fb-submit{margin-top:6px}

/* 状态条 */
.fb-track-state{
  position:relative;border-radius:12px;padding:16px 18px 15px;margin-bottom:18px;
  background:#f4f5f2;border:1px solid var(--fb-line);border-left:4px solid #b9beb9;
}
.fb-track-state b{display:block;font-size:14.5px;color:var(--fb-txt);margin:8px 0 0;font-weight:600}
.fb-badge{
  display:inline-block;padding:3px 11px;border-radius:20px;font-size:12.5px;font-weight:600;
  background:#eceee9;color:#5b615c;
}
.fb-track-no{display:block;margin-top:9px;font-size:12.5px;color:var(--fb-txt-2)}
.fb-track-state.st-pending{border-left-color:#d9a24a;background:#fdf9f1}
.fb-track-state.st-pending .fb-badge{background:#f7e6c6;color:#8a6320}
.fb-track-state.st-doing{border-left-color:#5b8bb0;background:#f4f8fb}
.fb-track-state.st-doing .fb-badge{background:#dbe9f4;color:#2c5a7a}
.fb-track-state.st-replied{border-left-color:#3f9a6a;background:#eff8f3}
.fb-track-state.st-replied .fb-badge{background:#d5efe1;color:#1f6b45}
.fb-track-state.st-closed{border-left-color:#a8ada8;background:#f4f5f2}
.fb-track-state.st-closed .fb-badge{background:#e4e6e2;color:#5b615c}

/* 信息表 */
.fb-dl{display:grid;grid-template-columns:88px 1fr;gap:8px 14px;margin:0 0 20px;font-size:13.5px}
.fb-dl dt{color:var(--fb-txt-2)}
.fb-dl dd{margin:0;color:var(--fb-txt);word-break:break-all}
.fb-tag{display:inline-block;padding:2px 9px;border-radius:5px;background:#eef1ec;color:#42544a;font-size:12.5px}

/* 内容引用 */
.fb-track-h{
  margin:0 0 10px;font-size:14px;color:var(--fb-ink-2);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.fb-track-time{font-size:12px;color:var(--fb-txt-2);font-weight:400}
.fb-track-quote{
  background:#f7f8f6;border:1px solid var(--fb-line);border-radius:10px;
  padding:14px 16px;font-size:14px;line-height:1.85;color:var(--fb-txt);
  white-space:normal;word-break:break-word;margin-bottom:18px;
}
.fb-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin:-8px 0 18px}
.fb-thumbs img{
  width:88px;height:88px;object-fit:cover;border-radius:9px;
  border:1px solid var(--fb-line);display:block;background:#f0f1ee;
}

/* 回复 / 待回复 */
.fb-track-reply{
  position:relative;background:#f0f8f3;border:1px solid #cfe6d9;border-radius:12px;
  padding:16px 18px;font-size:14px;line-height:1.9;color:#22463a;
  white-space:normal;word-break:break-word;margin-bottom:18px;
}
.fb-track-reply::before{
  content:"官方回复";position:absolute;top:-10px;left:14px;padding:1px 8px;
  background:#2f5241;color:#fff;font-size:11px;border-radius:10px;letter-spacing:.06em;
}
.fb-track-wait{
  background:#fbfaf7;border:1px dashed #ddd9cf;border-radius:12px;
  padding:15px 17px;font-size:13.5px;line-height:1.85;color:#7d7568;margin-bottom:18px;
}
.fb-track-foot{margin:0;font-size:13px;color:var(--fb-txt-2)}
.fb-track-foot a{color:var(--fb-ink-2)}

/* 本机提交记录 */
.fb-mine{list-style:none;margin:0;padding:0}
.fb-mine li{border-top:1px solid var(--fb-line);padding:11px 0}
.fb-mine li:first-child{border-top:0;padding-top:0}
.fb-mine a{display:inline-block;font-size:13.5px;color:var(--fb-ink-2);font-weight:600}
.fb-mine span{display:block;font-size:12.5px;color:var(--fb-txt-2);margin-top:3px}

/* 提交成功后的受理编号 / 查询码 / 查询入口 */
.fb-flash-tip{color:inherit;opacity:.86}
.fb-flash a,.fb-flash .fb-track-link{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.fb-flash .fb-code{background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.08)}
.fb-flash.err .fb-code{background:rgba(255,255,255,.6)}
.fb-track-entry{
  margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--fb-line);
  font-size:12.5px;color:var(--fb-txt-2)
}
.fb-track-entry a{color:var(--fb-ink-2);font-weight:600}