/* ============================================================
   表单「晴空收集」· 样式表（forms.css）
   只服务 forms_index / forms_detail / admin_forms /
   admin_forms_form / admin_forms_submissions；不动 style.css 与 admin.css。
   全站无阴影：层次一律 1px 细边线 + 半透明底，一处 box-shadow 都不用。
   类名统一 forms- 前缀，且一律挂在 .thm-forms 之下，避免污染其它模块。
   ============================================================ */

.thm-forms {
  --f-open: #16a34a;
  --f-open-soft: rgba(22, 163, 74, .1);
  --f-closed: #b45309;
  --f-closed-soft: rgba(180, 83, 9, .1);
  --f-err: #dc2626;
  --f-err-soft: rgba(220, 38, 38, .1);
}

/* ============================================================
   一、状态徽标（前台卡片 / 详情页共用）
   ============================================================ */
.thm-forms .forms-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .7);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
  white-space: nowrap;
}
.thm-forms .forms-badge-open { color: var(--f-open); border-color: rgba(22, 163, 74, .3); background: var(--f-open-soft); }
.thm-forms .forms-badge-closed { color: var(--f-closed); border-color: rgba(180, 83, 9, .3); background: var(--f-closed-soft); }

/* ============================================================
   二、表头 hero：一张从活页夹里抽出来的收件纸——左侧一整列装订孔，
      角上压着一枚「收集」印章，底衬铺开「待填的表 + 勾选 + 飞出的纸飞机」
   ============================================================ */
.thm-forms .forms-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  min-height: 200px;
  box-sizing: border-box;
  padding: 22px 134px 20px 64px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(940px 400px at 92% -14%, rgba(47, 111, 237, .16), transparent 58%),
    radial-gradient(820px 380px at 4% 122%, rgba(22, 163, 74, .12), transparent 56%),
    linear-gradient(158deg, #f5f9ff 0%, #eef4ff 54%, #f2fbf5 100%);
}

/* 左侧装订边：一条竖向虚线，界定出「纸」的左缘 */
.thm-forms .forms-hero::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--brand-line) 0 5px, transparent 5px 11px);
  opacity: .75;
}
/* 装订孔：沿着虚线排下的一列圆孔，纸被打孔机穿过的样子 */
.thm-forms .forms-hero::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 40px;
  bottom: 40px;
  width: 17px;
  background: radial-gradient(circle at 50% 50%, #fff 3px, var(--brand-line) 3px 4.2px, transparent 4.2px);
  background-size: 17px 42px;
  background-repeat: repeat-y;
  opacity: .8;
}

/* 底衬场景：一条地平线之上，右侧立着几张待填的表（墨色纸叠）与一枚青勾，
   再往右是两架飞出的纸飞机（蓝，代表已提交的回答）；左侧留白给文案，避免压叠 */
.thm-forms .forms-hero-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  pointer-events: none;
}
.thm-forms .forms-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.thm-forms .forms-scene-rail { fill: none; stroke: rgba(47, 111, 237, .22); stroke-width: 1.5; }
.thm-forms .forms-scene-doc path { fill: rgba(28, 37, 54, .1); }
.thm-forms .forms-scene-lines path {
  fill: none;
  stroke: rgba(47, 111, 237, .34);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.thm-forms .forms-scene-check path {
  fill: none;
  stroke: rgba(22, 163, 74, .34);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: formsCheck 3.6s ease-in-out infinite;
}
.thm-forms .forms-scene-plane { animation: formsFloat 4.2s ease-in-out infinite; }
.thm-forms .forms-scene-plane.p2 { animation-delay: .9s; }
.thm-forms .forms-scene-plane path { fill: rgba(47, 111, 237, .2); }
.thm-forms .forms-scene-plane path:nth-child(even) { fill: rgba(47, 111, 237, .34); }

@keyframes formsCheck {
  0%, 100% { opacity: .4; }
  50% { opacity: .82; }
}
@keyframes formsFloat {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .thm-forms .forms-scene-check path,
  .thm-forms .forms-scene-plane { animation: none; }
  .thm-forms .forms-scene-check path { opacity: .6; }
}

/* 角上的一枚印章：品牌色圆圈 + 竖排「收集」二字，像随手盖上去的一方印 */
.thm-forms .forms-seal {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border: 2px solid rgba(47, 111, 237, .42);
  border-radius: 50%;
  color: rgba(47, 111, 237, .72);
  font-family: var(--font-serif);
  font-size: 17px;
  letter-spacing: 4px;
  line-height: 1.05;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: rotate(-12deg);
  opacity: .9;
}

/* 编号徽标：像表头右上角那行「表单编号」，等宽字 + 品牌色小方块 + 一道渐隐细线 */
.thm-forms .forms-hero-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--muted);
}
.thm-forms .forms-hero-label span {
  padding: 2px 9px;
  border-radius: 4px;
  background: var(--brand-strong);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
}
.thm-forms .forms-hero-label::after {
  content: "";
  flex: 0 0 72px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-line), transparent);
}
.thm-forms .forms-hero-title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: .5px;
  color: var(--ink);
}
/* 字段清单：把「一张表长什么样」直接摊在标题下——编号 + 字段名 + 引导点线 + 类型 + 必填标记 */
.thm-forms .forms-hero-fields {
  max-width: 520px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(47, 111, 237, .2);
}
.thm-forms .forms-hero-fields li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 2px;
  border-bottom: 1px dashed rgba(47, 111, 237, .22);
  font-size: 13px;
}
.thm-forms .ff-no { font-family: var(--mono); font-size: 11px; color: rgba(47, 111, 237, .55); }
.thm-forms .ff-name { font-weight: 600; color: var(--ink); }
.thm-forms .ff-lead { flex: 1 1 auto; align-self: center; height: 0; border-bottom: 1px dotted rgba(47, 111, 237, .32); }
.thm-forms .ff-type { font-family: var(--mono); font-size: 11.5px; letter-spacing: .5px; color: var(--muted); }
.thm-forms .ff-req { font-size: 11px; color: var(--f-open); }
.thm-forms .ff-req.ff-opt { color: var(--muted); }
/* 页脚注：一行小字，用竖细线分隔，不再是圆胶囊 */
.thm-forms .forms-hero-feet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.thm-forms .forms-hero-feet span { display: inline-flex; align-items: center; gap: 6px; }
.thm-forms .forms-hero-feet span + span { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(47, 111, 237, .2); }
/* hero 文案一律浮在底衬场景之上 */
.thm-forms .forms-hero-label,
.thm-forms .forms-hero-title,
.thm-forms .forms-hero-fields,
.thm-forms .forms-hero-feet { position: relative; z-index: 1; }

/* ============================================================
   三、收集箱：一条目 = 一页纸，竖着摞起来，左侧一道品牌色书脊
   ============================================================ */
.thm-forms .forms-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
}
.thm-forms .forms-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px 16px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .62);
  transition: border-color .18s, background .18s, transform .18s;
}
.thm-forms .forms-row:hover {
  border-color: var(--brand-line);
  border-left-color: var(--brand);
  background: rgba(255, 255, 255, .82);
  transform: translateX(2px);
}
.thm-forms .forms-row.is-closed { border-left-color: var(--line); background: rgba(248, 250, 252, .7); }

.thm-forms .forms-row-mark { flex: none; }
.thm-forms .forms-row-body { flex: 1 1 auto; min-width: 0; }
.thm-forms .forms-row-act { flex: none; }

.thm-forms .forms-title {
  margin: 0 0 5px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}
.thm-forms .forms-title a { color: inherit; }
.thm-forms .forms-title a:hover { color: var(--brand-strong); }
.thm-forms .forms-desc {
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.thm-forms .forms-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--muted);
}
.thm-forms .forms-row-meta span { display: inline-flex; align-items: center; gap: 5px; }
.thm-forms .forms-subs { color: var(--brand-strong); }

/* 去填写：一枚贴着纸边的行动胶囊 */
.thm-forms .forms-more {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-pill);
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
.thm-forms .forms-more:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.thm-forms .forms-more.is-off {
  border-color: var(--line);
  color: var(--muted);
  font-weight: 400;
}

/* 空态占满整列 */
.thm-forms .forms-stack > .mod-empty { max-width: 100%; }

/* ============================================================
   四、详情页：一张从收集箱里抽出来的空白表格——左侧一整列装订孔，
      页眉盖着一枚状态印章，正文逐项编号、行间一道虚线，像表单的横格
   ============================================================ */
.thm-forms .forms-paper {
  position: relative;
  overflow: hidden;
  padding: 22px 26px 26px 60px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(255, 255, 255, .84), rgba(236, 244, 255, .42));
}

/* 左侧装订边：一条竖向虚线，界定出「纸」的左缘 */
.thm-forms .forms-paper::before {
  content: "";
  position: absolute;
  left: 38px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--brand-line) 0 5px, transparent 5px 11px);
  opacity: .6;
}
/* 装订孔：沿着虚线排下的一列圆孔，纸被打孔机穿过的样子 */
.thm-forms .forms-paper::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 32px;
  bottom: 32px;
  width: 17px;
  background: radial-gradient(circle at 50% 50%, #fff 3px, var(--brand-line) 3px 4.2px, transparent 4.2px);
  background-size: 17px 42px;
  background-repeat: repeat-y;
  opacity: .7;
}

/* 页眉：左边表单编号，右边一枚状态印章 */
.thm-forms .forms-paper-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--hairline);
}
.thm-forms .forms-file-no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--muted);
}

/* 状态印章：品牌色空心圆 + 竖排二字，像随手盖上去的一方印 */
.thm-forms .forms-stamp {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border: 2px solid rgba(47, 111, 237, .4);
  border-radius: 50%;
  color: rgba(47, 111, 237, .74);
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 3px;
  line-height: 1.05;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: rotate(-10deg);
  opacity: .92;
}
.thm-forms .forms-stamp.is-closed {
  border-color: rgba(180, 83, 9, .42);
  color: rgba(180, 83, 9, .8);
}

.thm-forms .forms-paper-title {
  margin: 16px 0 14px;
  font-family: var(--font-serif);
  font-size: 29px;
  line-height: 1.4;
  letter-spacing: .5px;
  color: var(--ink);
}

/* 表头信息：几格固定栏，像表格上印好的「发起 / 上架 / 回答 / 字段」 */
.thm-forms .forms-paper-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.thm-forms .forms-paper-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .66);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.thm-forms .forms-paper-meta em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
}

.thm-forms .forms-paper-desc {
  margin: 15px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--brand-line);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* 成功 / 出错提示条 */
.thm-forms .forms-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13.5px;
}
.thm-forms .forms-tip-ok { color: var(--f-open); border-color: rgba(22, 163, 74, .3); background: var(--f-open-soft); }
.thm-forms .forms-tip-err { color: var(--f-err); border-color: rgba(220, 38, 38, .3); background: var(--f-err-soft); }

/* 填写区：像表单的作答页——页眉一道小标题，正文逐项编号、行间一道横向虚线 */
.thm-forms .forms-fill { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.thm-forms .forms-fill-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  margin-bottom: 4px;
}
.thm-forms .forms-fill-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: .5px;
  color: var(--ink);
}
.thm-forms .forms-fill-count { font-size: 12.5px; color: var(--muted); }

/* 逐项编号：整块用 CSS 计数器排号，字段前留出一栏两位题号 */
.thm-forms .forms-fill-fields { counter-reset: forms-q; }
.thm-forms .forms-field {
  position: relative;
  padding: 16px 0 16px 44px;
  border-bottom: 1px dashed var(--hairline);
}
.thm-forms .forms-fill-fields > :last-child { border-bottom: none; padding-bottom: 4px; }
.thm-forms .forms-field::before {
  counter-increment: forms-q;
  content: counter(forms-q, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--brand-line);
}
.thm-forms .forms-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.thm-forms .forms-req {
  padding: 1px 7px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-pill);
  background: rgba(47, 111, 237, .08);
  color: var(--brand-strong);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}
/* 字段下方的填写说明 */
.thm-forms .forms-field-help { margin: 7px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--muted); }

/* 说明文字（section）：占满整行的分组提示，前头缀一枚小方点 */
.thm-forms .forms-section {
  padding: 16px 0 10px;
  border-bottom: 1px dashed var(--hairline);
}
.thm-forms .forms-section-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
}
.thm-forms .forms-section-title::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.6px solid var(--brand-line);
  border-radius: 2px;
  transform: rotate(45deg);
}
.thm-forms .forms-section-desc { margin: 6px 0 0; font-size: 13px; line-height: 1.85; color: var(--muted); }


/* 各类控件统一体态 */
.thm-forms .forms-field input[type="text"],
.thm-forms .forms-field input[type="number"],
.thm-forms .forms-field input[type="email"],
.thm-forms .forms-field input[type="tel"],
.thm-forms .forms-field input[type="url"],
.thm-forms .forms-field input[type="date"],
.thm-forms .forms-field input[type="time"],
.thm-forms .forms-field textarea,
.thm-forms .forms-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .86);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
}
.thm-forms .forms-field textarea { min-height: 96px; resize: vertical; }
.thm-forms .forms-field input:focus,
.thm-forms .forms-field textarea:focus,
.thm-forms .forms-field select:focus {
  outline: none;
  border-color: var(--brand-line);
  background: rgba(255, 255, 255, .96);
}

/* 单选 / 多选：一排胶囊，选中即品牌色描边 */
.thm-forms .forms-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.thm-forms .forms-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .72);
  color: var(--ink-soft);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.thm-forms .forms-opt input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
.thm-forms .forms-opt:hover { border-color: var(--brand-line); }
.thm-forms .forms-opt:has(input:checked) {
  border-color: var(--brand);
  background: rgba(47, 111, 237, .1);
  color: var(--brand-strong);
}
.thm-forms .forms-opt input:checked + .forms-opt-text { color: var(--brand-strong); font-weight: 600; }

/* 评分：一排数字，点哪个算几分 */
.thm-forms .forms-rating { display: flex; flex-wrap: wrap; gap: 8px; }
.thm-forms .forms-rate {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .72);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.thm-forms .forms-rate input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.thm-forms .forms-rate-num { font-family: var(--mono); font-size: 15px; line-height: 1; }
.thm-forms .forms-rate:hover { border-color: var(--brand-line); color: var(--brand-strong); }
.thm-forms .forms-rate:has(input:checked) {
  border-color: var(--brand);
  background: rgba(47, 111, 237, .1);
  color: var(--brand-strong);
}
.thm-forms .forms-rate:has(input:checked) .forms-rate-num { font-weight: 600; }

/* 底栏：左提示、右提交 */
.thm-forms .forms-fill-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.thm-forms .forms-fill-hint { font-size: 12.5px; color: var(--muted); }
.thm-forms .forms-fill-foot .btn { white-space: nowrap; }

/* 已关闭：虚线一围，像门上贴的告示 */
.thm-forms .forms-closed {
  margin-top: 20px;
  padding: 30px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .5);
  text-align: center;
}
.thm-forms .forms-closed-ico { font-size: 34px; line-height: 1; color: var(--brand-line); }
.thm-forms .forms-closed h3 { margin: 12px 0 6px; font-size: 17px; color: var(--ink); }
.thm-forms .forms-closed p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.8; color: var(--muted); }

/* ============================================================
   五、页尾 Pro 入口（前台两个页面共用）
   ============================================================ */
.thm-forms .forms-pro { margin-top: 26px; text-align: center; }
.thm-forms .forms-pro a {
  display: inline-block;
  padding: 9px 22px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .62);
  color: var(--brand-strong);
  font-size: 13.5px;
  transition: background .18s, border-color .18s, color .18s;
}
.thm-forms .forms-pro a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ============================================================
   六、后台：动态字段编辑器（字段可增删、拖动排序、逐项设属性）
   ============================================================ */
.thm-forms .forms-edit { display: flex; flex-direction: column; gap: 10px; }

/* 顶栏：一句提示 + 「添加字段」 */
.thm-forms .forms-edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 0 2px;
}
.thm-forms .forms-edit-bar-title { font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* 单个字段：一张小卡片 */
.thm-forms .forms-edit-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .55);
  transition: border-color .18s, background .18s;
}
.thm-forms .forms-edit-item:hover { border-color: var(--brand-line); background: rgba(255, 255, 255, .72); }
/* 拖起来的那张：抬起描边，拖动中不选中文字 */
.thm-forms .forms-edit-item.is-dragging {
  border-color: var(--brand);
  background: rgba(47, 111, 237, .07);
}
.thm-forms .forms-edit-item.is-dragging,
.thm-forms .forms-edit-item.is-dragging * {
  -webkit-user-select: none;
  user-select: none;
}

/* 第一行：手柄 + 序号 + 字段名 + 类型 + 必填 + 操作 */
.thm-forms .forms-edit-top { display: flex; align-items: center; gap: 8px; }
/* 拖拽手柄：六点竖排，触屏按住即可拖，不触发页面滚动 */
.thm-forms .forms-edit-grip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .8);
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color .18s, color .18s, background .18s;
}
.thm-forms .forms-edit-grip svg { width: 14px; height: 14px; }
.thm-forms .forms-edit-grip:hover,
.thm-forms .forms-edit-grip:focus-visible {
  border-color: var(--brand-line);
  color: var(--brand-strong);
  background: rgba(47, 111, 237, .06);
  outline: none;
}
.thm-forms .forms-edit-grip:active,
.thm-forms .forms-edit-item.is-dragging .forms-edit-grip { cursor: grabbing; }
.thm-forms .forms-edit-no {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .8);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.thm-forms .forms-edit-name { flex: 1 1 auto; min-width: 0; }
.thm-forms .forms-edit-type { flex: none; width: 132px; }

/* 编辑器里的输入体态，比前台填写区更紧凑 */
.thm-forms .forms-edit input[type="text"],
.thm-forms .forms-edit select {
  padding: 8px 10px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
}
.thm-forms .forms-edit input[type="text"]:focus,
.thm-forms .forms-edit select:focus {
  outline: none;
  border-color: var(--brand-line);
  background: rgba(255, 255, 255, .98);
}

.thm-forms .forms-edit-req {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
}
.thm-forms .forms-edit-req input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }

/* 操作按钮：上移 / 下移 / 删除 */
.thm-forms .forms-edit-tools { flex: none; display: inline-flex; gap: 4px; margin-left: auto; }
.thm-forms .forms-edit-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .8);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.thm-forms .forms-edit-ico svg { width: 14px; height: 14px; }
.thm-forms .forms-edit-ico:hover { border-color: var(--brand-line); color: var(--brand-strong); background: rgba(47, 111, 237, .06); }
.thm-forms .forms-edit-del:hover { border-color: rgba(220, 38, 38, .4); color: var(--f-err); background: var(--f-err-soft); }

/* 第二行：占位提示 / 填写说明 / 默认值 / 评分档数 */
.thm-forms .forms-edit-attrs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: center;
}
.thm-forms .forms-edit-attrs > input { width: 100%; min-width: 0; }
.thm-forms .forms-edit-scale {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

/* 第三行：选项区（单选 / 多选 / 下拉） */
.thm-forms .forms-edit-opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline);
}
.thm-forms .forms-edit-opts-title { font-size: 12.5px; color: var(--muted); }
.thm-forms .forms-edit-opt { display: inline-flex; align-items: center; gap: 4px; }
.thm-forms .forms-edit-opt input[type="text"] { width: 150px; }
.thm-forms .forms-edit-opt-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .8);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.thm-forms .forms-edit-opt-del svg { width: 12px; height: 12px; }
.thm-forms .forms-edit-opt-del:hover { border-color: rgba(220, 38, 38, .4); color: var(--f-err); background: var(--f-err-soft); }

.thm-forms .forms-edit-hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--muted); }

/* 按类型显隐：正文与克隆出来的新行共用同一套开关 */
.thm-forms .is-hidden { display: none !important; }

/* ============================================================
   七、后台：回答明细 + 选项统计条
   ============================================================ */
.thm-forms .forms-stats { margin-bottom: 16px; }
.thm-forms .forms-stats-title { margin: 0 0 14px; font-size: 15.5px; color: var(--ink); }
.thm-forms .forms-stat { margin-bottom: 16px; }
.thm-forms .forms-stat:last-child { margin-bottom: 0; }
.thm-forms .forms-stat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.thm-forms .forms-stat-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.thm-forms .forms-stat-type {
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .7);
  font-size: 11px;
  color: var(--muted);
}
.thm-forms .forms-stat-opts { display: flex; flex-direction: column; gap: 7px; }
.thm-forms .forms-stat-opt { display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(0, 3fr) auto; gap: 10px; align-items: center; }
.thm-forms .forms-stat-name { font-size: 13px; color: var(--ink-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.thm-forms .forms-bar {
  position: relative;
  display: block;
  height: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .7);
  overflow: hidden;
}
.thm-forms .forms-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--brand-line));
  min-width: 2px;
}
.thm-forms .forms-stat-count { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ============================================================
   八、窄屏：平板收边、手机收成一列、折叠屏窄口再收，都不横向溢出
   ============================================================ */
@media (max-width: 900px) {
  /* 平板：纸张左缘的装订孔收窄，标题降一号，信息栏更紧凑 */
  .thm-forms .forms-paper { padding: 20px 22px 22px 52px; }
  .thm-forms .forms-paper::before { left: 30px; }
  .thm-forms .forms-paper::after { left: 13px; }
  .thm-forms .forms-paper-title { font-size: 26px; }
  .thm-forms .forms-paper-meta span { padding: 4px 10px; font-size: 12px; }
  .thm-forms .forms-field { padding-left: 38px; }
}

@media (max-width: 760px) {
  .thm-forms .forms-hero { min-height: 0; padding: 20px 18px 20px; }
  .thm-forms .forms-hero-bg { height: 116px; }
  .thm-forms .forms-hero-title { font-size: 25px; }
  /* 手机：装订边太挤，撤掉打孔与虚线，纸张回到常规内边距 */
  .thm-forms .forms-paper { padding: 20px 16px; }
  .thm-forms .forms-paper::before,
  .thm-forms .forms-paper::after { display: none; }
  .thm-forms .forms-paper-title { font-size: 23px; }
  .thm-forms .forms-field { padding: 14px 0 14px 34px; }
  .thm-forms .forms-fill-foot { flex-direction: column; align-items: stretch; }
  .thm-forms .forms-fill-foot .btn { width: 100%; }

  /* 字段编辑器在窄屏改为逐行铺满：序号 + 字段名 + 操作一行，类型与必填换到下一行 */
  .thm-forms .forms-edit-top { flex-wrap: wrap; row-gap: 8px; }
  .thm-forms .forms-edit-name { order: 2; flex: 1 1 140px; }
  .thm-forms .forms-edit-tools { order: 3; }
  .thm-forms .forms-edit-type { order: 4; flex: 1 1 110px; width: auto; }
  .thm-forms .forms-edit-req { order: 5; margin-left: auto; }
  .thm-forms .forms-edit-attrs { grid-template-columns: 1fr; }
  .thm-forms .forms-edit-scale { justify-self: start; }
  .thm-forms .forms-edit-opt { flex: 1 1 100%; }
  .thm-forms .forms-edit-opt input[type="text"] { flex: 1 1 auto; width: auto; }

  /* 统计条：名称与数字各占一行，条形铺满 */
  .thm-forms .forms-stat-opt { grid-template-columns: 1fr auto; }
  .thm-forms .forms-stat-opt .forms-bar { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  /* 折叠屏窄口 / 小屏：信息栏与填写区页眉逐行铺满，选项整行可点 */
  .thm-forms .forms-paper-meta span { flex: 1 1 100%; }
  .thm-forms .forms-fill-head { flex-direction: column; align-items: flex-start; }
  .thm-forms .forms-stamp { width: 54px; height: 54px; font-size: 13px; }
  .thm-forms .forms-opts { gap: 6px; }
  .thm-forms .forms-opt { flex: 1 1 100%; }
}