/* 投稿页（终端风）。基础布局、页头、按钮、页脚沿用 styles.4.css，这里只补表单。 */

.form-wrap{padding:44px 0 64px;max-width:780px}

.form-head h1{font-size:clamp(22px,3.2vw,28px);font-weight:700;margin:0;letter-spacing:-.01em}
.form-head h1::before{content:"# ";color:var(--acc)}
.form-head .lead{margin-top:14px}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0 0;padding:0;list-style:none}
.steps li{padding:13px 15px;background:var(--panel);border:1px solid var(--line);font-size:12px;line-height:1.8;color:var(--fg-dim)}
.steps b{display:block;margin-bottom:6px;font-weight:600;font-size:10.5px;letter-spacing:.12em;color:var(--acc)}

.panel{margin-top:28px;padding:24px 22px;background:var(--panel);border:1px solid var(--line)}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}

.field{display:block;margin-bottom:18px}
.field > span{display:block;margin-bottom:7px;font-size:12.5px;color:var(--fg-dim)}
.field > span em{font-style:normal;margin-left:7px;font-size:11px;color:var(--fg-faint)}

.field input,.field textarea{
  width:100%;padding:11px 13px;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--line);
  font:inherit;font-size:13px;
  transition:border-color .15s,background .15s;
}
.field textarea{min-height:108px;resize:vertical;line-height:1.8}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-faint)}
.field input:hover,.field textarea:hover{border-color:var(--line2)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--acc-dim);background:#0c110e}

/* 蜜罐字段：真人看不见，脚本会把每个 input 都填一遍 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.verify{display:flex;align-items:center;gap:9px;margin:4px 0 0;font-size:12px;color:var(--fg-faint)}
.verify-dot{flex:none;width:8px;height:8px;background:var(--warn);animation:pulse 1.1s ease-in-out infinite}
.verify.is-ok{color:var(--acc)}
.verify.is-ok .verify-dot{background:var(--acc);animation:none}
.verify.is-error{color:var(--red)}
.verify.is-error .verify-dot{background:var(--red);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.form-actions .btn{min-width:140px}
.form-actions .btn[disabled]{opacity:.55;cursor:not-allowed}

.msg{font-size:12.5px;min-height:20px}
.msg.is-error{color:var(--red)}
.msg.is-ok{color:var(--acc)}

.after-note{margin:15px 0 0;font-size:12px;line-height:1.9;color:var(--fg-faint)}
.after-note + .after-note{margin-top:6px}
.after-note code{color:var(--fg-dim);background:var(--panel);padding:1px 5px}
.after-note strong{color:var(--warn);font-weight:600}

.result{margin-top:28px;padding:32px 24px;text-align:center;background:var(--panel);border:1px solid var(--acc-dim)}
.result h2{font-size:16px;color:var(--acc);margin:0}
.result h2::before{content:"> ";color:var(--acc)}
.result p{margin:13px auto 0;max-width:520px;font-size:12.5px;line-height:1.95;color:var(--fg-dim)}
.result .btn{margin-top:22px}

@media (max-width:720px){
  .form-wrap{padding-top:32px;padding-bottom:48px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .panel{padding:20px 16px}
  .form-actions .btn{flex:1 1 auto}
}

/* 附件上传：进度条 + 状态行 */
.upload-progress{margin-top:10px}
.upload-progress[hidden]{display:none}
.upload-bar{height:6px;background:rgba(198,211,202,.08);overflow:hidden}
.upload-bar span{display:block;height:100%;width:0;background:var(--acc);transition:width .2s linear}
.upload-text{margin:7px 0 0;font-size:11.5px;color:var(--fg-dim)}
.upload-text.is-error{color:var(--red)}

/* 字段说明：附件那一行 */
.field-hint{margin:8px 0 0;font-size:11.5px;line-height:1.7;color:var(--fg-faint)}

/* 好友码实时校验：绿=格式对，黄=要留意，红=格式错 */
.field-hint.is-ok{color:var(--acc)}
.field-hint.is-warn{color:var(--warn)}
.field-hint.is-error{color:var(--red)}
.field input.is-bad{border-color:var(--red)}

/* 查询码：投稿成功后唯一要人抄下来的东西，所以给足视觉重量 */
.ticket-box{margin:22px auto 0;max-width:420px;padding:18px 16px;background:var(--bg);border:1px dashed var(--line2)}
.ticket-box[hidden]{display:none}
.ticket-label{margin:0;font-size:11px;letter-spacing:.12em;color:var(--fg-faint)}
.ticket-code{
  margin:8px 0 0;font-size:24px;font-weight:700;letter-spacing:.16em;
  color:var(--acc);user-select:all;-webkit-user-select:all;
}
.ticket-hint{margin:10px 0 0;font-size:11.5px;line-height:1.8;color:var(--fg-dim)}
.ticket-box .btn{margin-top:14px}

.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.result-actions .btn{margin-top:0}

@media (max-width:720px){
  .ticket-code{font-size:20px;letter-spacing:.1em}
  .result-actions .btn{flex:1 1 auto}
}

/* ---------- 验证码遮罩 ----------
   国际版组件是「画进你给的那个元素里」，不像国内版自己弹窗。给个居中台子，
   不然它会挂在页面最底下，用户点了提交根本看不见。 */
.cap-overlay{
  position:fixed;inset:0;z-index:90;
  display:none;align-items:center;justify-content:center;
  background:rgba(4,10,7,.74);
}
.cap-overlay.is-open{display:flex}
.cap-overlay-box{
  min-width:340px;max-width:min(92vw,420px);
  padding:22px 24px;
  background:var(--panel);border:1px solid var(--line2);
  text-align:center;
}
.cap-overlay-box #capHost{display:flex;align-items:center;justify-content:center;min-height:60px}
.cap-overlay-tip{margin:14px 0 0;font-size:11.5px;color:var(--fg-faint)}