/* ==========================================================================
   NZEP 资料库 · assets/verifier.css —— 账户验证器页面（手机竖屏优先）
   --------------------------------------------------------------------------
   只给 verifier.html 用。设计语言跟资料库一致：直角小圆角、细边框、
   衬线标题、克制的配色；这里额外做的是"手机上单手能操作"：
     · 关键按钮够大（≥44px 高）、批准/拒绝并排且拒绝靠左（不误触批准）
     · 请求详情用大字显示 IP 与设备，方便一眼判断"是不是我自己的设备"
     · 列表行在窄屏下单列堆叠，不横向滚动
   ========================================================================== */

.vf-wrap { max-width: 34rem; }

/* 顶部"我是谁"摘要条 */
.vf-who { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.vf-who img { width: 42px; height: 42px; border-radius: 2px; border: 1px solid var(--border); object-fit: cover; }
.vf-who .who-main { flex: 1 1 10rem; min-width: 0; }
.vf-who .who-name { font-weight: 700; font-size: .95rem; }
.vf-who .who-mail { font-size: .74rem; color: var(--text-3); word-break: break-all; }
.vf-badges { display: flex; gap: .35rem; flex-wrap: wrap; }
.vf-badge {
  font-size: .68rem; padding: .12rem .4rem; border-radius: 2px;
  border: 1px solid var(--border); background: #f8f8f6; color: var(--text-2);
}
.vf-badge.on { border-color: #0a7d33; color: #0a7d33; background: #f1f9f2; }
.vf-badge.off { border-color: #a2a9b1; color: #6b6b6b; }

/* 通用小节 */
.vf-sec { margin-top: 1rem; }
.vf-sec .head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.vf-note { font-size: .74rem; color: var(--text-3); line-height: 1.7; margin: .2rem 0 .5rem; }

/* 扫码区 */
.vf-scan { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; }
.vf-video {
  width: 100%; max-width: 300px; aspect-ratio: 1 / 1; background: #111;
  border: 1px solid var(--border); border-radius: 2px; object-fit: cover;
}
.vf-scan-note { font-size: .74rem; color: var(--text-3); margin-top: .35rem; line-height: 1.7; }
.vf-scan-note.bad { color: var(--bad); }

/* 手动输入验证码 */
.vf-code { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; flex-wrap: wrap; }
.vf-code .w-input {
  flex: 1 1 12rem; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase;
}

/* 请求详情卡：用户就是靠这块判断"该不该批准" */
.vf-req {
  margin-top: .7rem; border: 1px solid var(--border); border-left: 3px solid #3366cc;
  border-radius: 2px; padding: .7rem .8rem; background: #fbfbfd;
}
.vf-req.warn { border-left-color: var(--bad); background: #fdf7f7; }
.vf-req .r-title { font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.vf-req .r-ip { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; word-break: break-all; }
.vf-req .r-line { font-size: .78rem; color: var(--text-2); line-height: 1.75; word-break: break-all; }
.vf-req .r-ua { font-size: .72rem; color: var(--text-3); word-break: break-all; }
.vf-acts { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.vf-acts .w-btn { flex: 1 1 8rem; min-height: 44px; font-size: .9rem; }
.vf-btn-deny { border-color: var(--bad) !important; color: var(--bad) !important; }
.vf-btn-ok { background: #0a7d33 !important; border-color: #0a7d33 !important; color: #fff !important; }

/* 设备列表 */
.vf-list { margin-top: .4rem; }
.vf-dev {
  border: 1px solid var(--border-faint); border-radius: 2px;
  padding: .6rem .7rem; margin-bottom: .5rem; background: #fff;
}
.vf-dev.self { border-color: #3366cc; background: #fbfbfd; }
.vf-dev.dead { opacity: .62; }
.vf-dev .d-top { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.vf-dev .d-name { font-weight: 700; font-size: .88rem; }
.vf-dev .d-line { font-size: .74rem; color: var(--text-2); line-height: 1.8; word-break: break-all; }
.vf-dev .d-line .k { color: var(--text-3); }
.vf-dev .d-acts { display: flex; gap: .4rem; margin-top: .45rem; flex-wrap: wrap; }
.vf-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #b9b9b2; display: inline-block; }
.vf-dot.on { background: #0a7d33; }

/* 延时检测 */
.vf-ping { margin-top: .6rem; }
.vf-ping .p-big { font-size: 1.5rem; font-weight: 700; font-family: var(--mono); }
.vf-ping .p-line { font-size: .78rem; color: var(--text-2); line-height: 1.85; }
.vf-ping .p-verdict { font-weight: 700; }
.vf-ping .p-verdict.good { color: #0a7d33; }
.vf-ping .p-verdict.mid { color: #8a6d00; }
.vf-ping .p-verdict.bad { color: var(--bad); }

/* 恢复码 */
.vf-codes {
  font-family: var(--mono); font-size: .84rem; letter-spacing: .04em;
  background: var(--bg-subtle); border: 1px dashed var(--border);
  border-radius: 2px; padding: .6rem .7rem; margin-top: .5rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .8rem;
}
.vf-codes span { white-space: nowrap; }
.vf-warnbox {
  border: 1px solid #e0b34a; background: #fffbf0; color: #6b5200;
  border-radius: 2px; padding: .5rem .65rem; font-size: .76rem; line-height: 1.7; margin-top: .5rem;
}

/* 登录卡 */
.vf-login .w-field { margin-bottom: .6rem; }
.vf-err { color: var(--bad); font-size: .78rem; min-height: 1.1rem; margin: .35rem 0; line-height: 1.7; }
.vf-err.ok { color: #0a7d33; }

@media (max-width: 420px) {
  .vf-codes { grid-template-columns: minmax(0, 1fr); }
  .vf-acts .w-btn { flex: 1 1 100%; }
  .vf-acts { flex-direction: column-reverse; }   /* 手机上"批准"在上、"拒绝"在下，拇指不容易误触 */
}

/* ================= 独立形态（2026-10-11 用户要求「删掉那些导航栏啥的」） =================
   验证器不再跟资料库共用外壳：顶栏 / 侧栏 / 页脚由 shell.js + wiki.js 渲染，
   这里统一收掉（元素仍在 DOM 里，脚本不会因为找不到容器报错），
   版心从"侧栏 + 正文"两列改成整宽单列，正文不再被挤在右边。 */
.vf-standalone #wTopbar,
.vf-standalone #wSide,
.vf-standalone .w-footer,
.vf-standalone #siteFooter { display: none !important; }
.vf-standalone .w-layout { display: block; }
.vf-standalone .w-main { padding: 0; }
.vf-standalone .vf-wrap { max-width: 44rem; margin: 0 auto; padding: .9rem .9rem 2.4rem; }
/* 验证器自己的窄页头 */
.vf-head {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem;
  margin: -.9rem -.9rem .9rem; padding: calc(.55rem + env(safe-area-inset-top, 0px)) .9rem .55rem;
  background: #191919; color: #eee; font-size: .86rem;
}
.vf-head-t { font-weight: 700; letter-spacing: .02em; }
.vf-head-who { color: #9aa0a6; margin-left: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-head-a { margin-left: auto; color: #8ab4ff; text-decoration: none; }
/* 改密码那一排：手机上竖排、按钮整宽 */
.vf-pw { display: grid; gap: .5rem; }
@media (min-width: 640px) { .vf-pw { grid-template-columns: 1fr 1fr 1fr auto; align-items: center; } }
@media (max-width: 639.98px) { .vf-pw .w-btn { width: 100%; } }