/**
 * ================================================
 * 法律提示：本程序/代码仅限合法用途使用，您可以修改自用，请保留版权
 * ================================================
 * 使用限制：禁止用于非法用途，作者不承担任何使用责任
 * ================================================
 * Copy right 2026 网博士网络工作室， 保留所有权利。
 * ================================================
 * 官方网址: www.网博士.com   联系：QQ: 570830288
 * ================================================
 */
/**
 * 滑动验证弹窗
 *
 * 从 /assets/css/verify.css 里拆出来的弹窗部分，去掉了它那套 html/body 全局样式
 * （verify.css 会把 body 变成 flex 居中，直接引进登录页会把整页布局顶歪）。
 * 只给需要弹窗的页面单独引入这个文件。
 */

/* ---------- 触发按钮（仿极验那条长条） ---------- */
.u-slide-btn{
  position:relative;
  width:100%;
  height:44px;
  padding:0 44px 0 16px;
  display:flex; align-items:center;
  font-family:inherit;   /* 后台和前台的按钮默认字体不一样，跟着所在页面走 */
  border:1px solid #DFE5EA;
  border-radius:4px;
  background:#F5F7FA;
  color:#8A97A3;
  font-size:13.5px;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s, color .18s, background .18s, box-shadow .18s;
}
/* 文字占满中间，图标钉在最右边 */
.u-slide-btn .u-slide-tx{ flex:1; min-width:0; }
.u-slide-btn .u-slide-ic{
  position:absolute; right:14px; top:50%;
  width:18px; height:18px; margin-top:-9px;
  display:flex; align-items:center; justify-content:center;
  color:#A8B5BF;
  transition:color .18s;
}
/* 常态：一个一直转的圈，暗示"点这里去验证" */
.u-slide-btn .u-ic-spin{
  animation:u-slide-rotate 1.3s linear infinite;
  /* SVG 的旋转中心默认是画布左上角，这里按自身中心转，不然会绕圈飞 */
  transform-box:fill-box; transform-origin:50% 50%;
}
@keyframes u-slide-rotate{ to { transform:rotate(360deg); } }
.u-slide-btn .u-ic-ok,
.u-slide-btn .u-ic-err{ display:none; }
/* 扫光：常态就来回扫一遍，暗示这是个可点的验证条 */
.u-slide-btn::after{
  content:'';
  position:absolute; top:0; left:-60%;
  width:45%; height:100%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation:u-slide-shine 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes u-slide-shine{
  0%   { left:-60%; }
  55%  { left:120%; }
  100% { left:120%; }
}
.u-slide-btn:not(:disabled):hover{
  border-color:var(--u-accent, #2b6cff);
  color:var(--u-accent, #2b6cff);
  background:#fff;
  box-shadow:0 2px 8px rgba(43,108,255,.10);
}
.u-slide-btn:not(:disabled):hover .u-slide-ic{ color:var(--u-accent, #2b6cff); }
.u-slide-btn:not(:disabled):active{ transform:translateY(1px); }
/* 通过之后锁住：不再有手型和按压反馈，颜色保持自己的绿 */
.u-slide-btn:disabled{ cursor:default; }

/* 验证通过：停止扫光，整条变绿 */
.u-slide-btn.ok{
  background:#EDF8F1;
  border-color:#8ED3A9;
  color:#2E8B57;
}
.u-slide-btn.ok::after{ display:none; }
/* 通过：转圈换成对勾 */
.u-slide-btn.ok .u-slide-ic{ color:#3a9d5d; }
.u-slide-btn.ok .u-ic-spin{ display:none; }
.u-slide-btn.ok .u-ic-ok{ display:block; }
/* 失败提示（比如后端没记住通行状态） */
.u-slide-btn.err{
  border-color:#E0A39B; background:#FDF2F0; color:#B33A2B;
  animation:u-slide-shake .3s;
}
.u-slide-btn.err .u-slide-ic{ color:#B33A2B; }
.u-slide-btn.err .u-ic-spin{ display:none; }
.u-slide-btn.err .u-ic-err{ display:block; }
@keyframes u-slide-shake{
  0%,100% { transform:translateX(0); }
  25%     { transform:translateX(-4px); }
  75%     { transform:translateX(4px); }
}

/* ---------- 弹窗 ---------- */
.modal-mask{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  display:none; justify-content:center; align-items:center;
  z-index:2000;
  padding:16px;
}
.modal-mask.show{ display:flex; }

.modal-card{
  background:#fff;
  border-radius:6px;
  padding:20px;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  position:relative;
  width:100%;
  max-width:368px;
}

.modal-title{
  font-size:15px; font-weight:600; color:#333;
  margin:0 0 14px;
}

.close-btn{
  position:absolute; top:8px; right:8px;
  width:36px; height:36px;
  border:none; border-radius:3px;
  background:transparent; color:#999; cursor:pointer;
  font-size:28px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.close-btn:hover{ background:#f0f2f5; color:#333; }

/* ---------- 图片区 ---------- */
.img-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:4px; overflow:hidden;
  user-select:none;
  margin:0 auto 10px;
  background:#eee;
  border:1px solid #e0e0e0;
  touch-action:none;
}
.img-wrap canvas{ display:block; width:100%; height:100%; }
#pieceCanvas{
  position:absolute; top:0; left:0;
  width:auto; height:auto;
  cursor:grab; z-index:10;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.25));
  touch-action:none;
}
#pieceCanvas:active{ cursor:grabbing; }
#pieceCanvas.locked{ cursor:default; }

/* ---------- 滑块 ---------- */
.slider-track{
  height:44px;
  background:#f0f2f5;
  border-radius:4px;
  position:relative;
  overflow:hidden;
  border:1px solid #e0e0e0;
  touch-action:none;
}
.slider-btn{
  width:44px; height:44px;
  border-radius:4px;
  background:#215dff;
  position:absolute; left:0; top:-1px;
  cursor:grab;
  display:flex; align-items:center; justify-content:center;
  color:#fff; user-select:none;
  transition:background .2s;
  z-index:2;
}
.slider-btn:active{ cursor:grabbing; }
.slider-btn::after{
  content:'';
  width:8px; height:8px;
  border-right:2px solid #fff;
  border-top:2px solid #fff;
  transform:rotate(45deg);
  margin-left:-3px;
}
.slider-btn.ok{ background:#3a9d5d; }
.slider-btn.ok::after{
  content:'\2713';
  border:none; width:auto; height:auto;
  transform:none; font-size:20px; font-weight:bold; margin:0;
}
.slider-btn.err{ background:#c0392b; }
.slider-btn.err::after{
  content:'\2715';
  border:none; width:auto; height:auto;
  transform:none; font-size:18px; font-weight:bold; margin:0;
}
.slider-text{
  position:absolute; width:100%; text-align:center;
  line-height:44px; color:#999; font-size:13px;
  pointer-events:none; z-index:1;
  transition:opacity .2s;
}

/* ---------- 状态 / 换一张 ---------- */
.status{
  margin:4px 0 0;
  min-height:0;
  font-size:12px; line-height:1.4;
  text-align:center; color:#666;
}
.ok-text{ color:#3a9d5d; }
.err-text{ color:#c0392b; }

.refresh-btn{
  margin-top:4px;
  width:100%; padding:8px;
  border:1px solid #d0d5dd; background:#fff; color:#555;
  border-radius:4px; cursor:pointer; font-size:13px;
  transition:border-color .15s, color .15s;
}
.refresh-btn:hover{ border-color:#215dff; color:#215dff; }