/* ==========================================================================
 * captcha.css — 人机验证组件（CAPTCHA_V1 · UI）
 * --------------------------------------------------------------------------
 * 设计语言对齐主题既有表单规范（user-center.css / style.css）：
 *   主色 #1496ff、聚焦光晕 rgba(20,150,255,.12)、圆角 8px、输入框高 42px、
 *   错误色 #ed5444（与 .auth-msg.err 同色系）、缓动 cubic-bezier(.22,1,.36,1)。
 *
 * 为什么独立成文件（而不是写进模板片段）：
 *   TP5 模板引擎以花括号为标签定界符，片段内的 style 标签会干扰模板解析
 *   （实测：曾导致页面直接卡死到 nginx upstream 超时）。故样式一律外置。
 *
 * ⚠️ 选择器统一写成 `.cap-field .cap-field__xxx`（两个类）：
 *   站内页面级规则形如 `.gbook-form input`（(0,1,1)）会盖过单类选择器（(0,1,0)）——
 *   实测踩过：留言板页 `.gbook-form input{padding:10px 12px}` 把组件的左内边距
 *   （给盾牌图标留的 36px）压回 12px，导致图标与占位文字重叠。两个类可稳压之。
 *
 * 结构见 template/toopic/html/public/captcha.html。
 * 状态类：.is-error / .is-shake / .is-loading；变体：.cap-field--dark。
 * 深色页面（detail/map/gbook 会加载 toopic-dark.css）的配色覆盖在 toopic-dark.css 内。
 * ========================================================================== */

.cap-field { margin: 0 0 16px; }
.cap-field:last-child { margin-bottom: 0; }

.cap-field .cap-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #5a6270;
  line-height: 1.4;
}

.cap-field .cap-field__body {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

/* ---- 输入区 ---- */
.cap-field .cap-field__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.cap-field .cap-field__ico {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: #98a0ad;
  pointer-events: none;
}

.cap-field .cap-field__input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 14px 0 36px;          /* 左侧给盾牌图标留位（勿被页面规则压小） */
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #fafafa;
  font-size: 14px;
  color: #1a1d23;
  outline: none;
  transition: border-color .25s cubic-bezier(.22, 1, .36, 1),
              box-shadow .25s cubic-bezier(.22, 1, .36, 1),
              background .25s;
}
.cap-field .cap-field__input::placeholder { color: #b3b8c2; }
.cap-field .cap-field__input:focus {
  border-color: #1496ff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(20, 150, 255, .12);
}

/* ---- 图片按钮（点击换一张）---- */
.cap-field .cap-field__img-btn {
  position: relative;
  flex: 0 0 auto;
  height: 42px;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #f6f8fb;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.cap-field .cap-field__img { display: block; height: 40px; width: auto; }
.cap-field .cap-field__mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 19, 27, .62);
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transition: opacity .2s;
}
.cap-field .cap-field__img-btn:hover,
.cap-field .cap-field__img-btn:focus {
  border-color: #1496ff;
  box-shadow: 0 0 0 3px rgba(20, 150, 255, .12);
}
.cap-field .cap-field__img-btn:hover .cap-field__mask,
.cap-field .cap-field__img-btn:focus .cap-field__mask { opacity: 1; }

.cap-field .cap-field__tip { margin: 6px 0 0; font-size: 12px; color: #98a0ad; line-height: 1.5; }

/* ---- 状态：错误 / 抖动 / 刷新中 ---- */
.cap-field.is-error .cap-field__input {
  border-color: #ed5444;
  background: #fff7f7;
  box-shadow: 0 0 0 3px rgba(237, 84, 68, .12);
}
.cap-field.is-error .cap-field__tip { color: #ed5444; }
.cap-field.is-error .cap-field__ico { color: #ed5444; }

@keyframes capShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
.cap-field.is-shake { animation: capShake .3s ease; }

.cap-field.is-loading .cap-field__img { opacity: .4; }

/* ---- 显式深色变体（模板可选：给片段容器手动加 cap-field--dark）---- */
.cap-field--dark .cap-field__label { color: rgba(255, 255, 255, .6); }
.cap-field--dark .cap-field__tip { color: rgba(255, 255, 255, .45); }
.cap-field--dark .cap-field__ico { color: rgba(255, 255, 255, .42); }
.cap-field--dark .cap-field__input {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .16);
  color: #fff;
}
.cap-field--dark .cap-field__input::placeholder { color: rgba(255, 255, 255, .38); }
.cap-field--dark .cap-field__input:focus {
  border-color: #f0a500;
  background: rgba(0, 0, 0, .24);
  box-shadow: 0 0 0 3px rgba(240, 165, 0, .15);
}
.cap-field--dark .cap-field__img-btn { border-color: rgba(255, 255, 255, .12); background: #fff; }
.cap-field--dark.is-error .cap-field__input { border-color: #ed5444; background: rgba(237, 84, 68, .1); }
.cap-field--dark.is-error .cap-field__tip,
.cap-field--dark.is-error .cap-field__ico { color: #ff8a80; }

/* ---- 窄屏：图片换行到输入框下方并横向铺满 ---- */
@media (max-width: 420px) {
  .cap-field .cap-field__body { flex-wrap: wrap; }
  .cap-field .cap-field__input-wrap { flex: 1 1 100%; }
  .cap-field .cap-field__img-btn { flex: 1 1 100%; height: auto; min-height: 42px; }
  .cap-field .cap-field__img { width: 100%; height: 42px; object-fit: contain; }
}

/* ==========================================================================
 * 分类页深翻页「人机验证」页（CATEGORY_VERIFY_V1）
 * 结构见 template/toopic/html/verify/index.html ·
 * 触发/回收逻辑见 application/index/controller/Verify.php 与 Category.php
 * ========================================================================== */
.verify-wrap { padding: 48px 16px 72px; display: flex; justify-content: center; }
.verify-card {
  width: 100%; max-width: 460px; box-sizing: border-box;
  background: #fff; border: 1px solid #f0f0f0; border-radius: 14px;
  padding: 30px 28px 24px; box-shadow: 0 8px 30px rgba(16, 18, 24, .06);
}
.verify-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #1a1d23; }
.verify-desc { margin: 0 0 20px; font-size: 13px; line-height: 1.7; color: #5a6270; }
.verify-form { border-top: 1px solid #f5f6f8; padding-top: 18px; }
.verify-btn {
  display: block; width: 100%; height: 44px; margin-top: 6px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: linear-gradient(90deg, #1496ff, #0a78e0); color: #fff;
  font-size: 15px; font-weight: 600; font-family: inherit;
  transition: opacity .2s, transform .2s;
}
.verify-btn:hover { opacity: .92; }
.verify-btn:disabled { opacity: .6; cursor: not-allowed; }
.verify-note { margin: 14px 0 0; font-size: 12px; color: #98a0ad; text-align: center; }