/* 滑块验证码样式（登录/注册共用） */
.sc-box{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:100%;box-sizing:border-box;}
.sc-stage{position:relative;width:100%;box-sizing:border-box;min-height:155px;border-radius:10px;overflow:hidden;background:#eef2f7;user-select:none;-webkit-user-select:none;}
.sc-bg{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none;}
/* 换图/重置瞬间 src 为空，浏览器会渲染出**破图图标 + alt 文字**（很难看）→ 无 src 时先隐藏 */
.sc-bg:not([src]),.sc-bg[src=""]{visibility:hidden;}
.sc-piece{position:absolute;left:0;top:0;pointer-events:none;}
.sc-refresh{position:absolute;right:6px;top:6px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.45);color:#fff;font-size:14px;line-height:26px;text-align:center;cursor:pointer;transition:background .2s;}
.sc-refresh:hover{background:rgba(15,23,42,.7);}
.sc-track{position:relative;width:100%;box-sizing:border-box;height:42px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;overflow:hidden;transition:opacity .25s ease,height .3s ease,max-height .3s ease,border-width .3s ease;}
.sc-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(37,99,235,.12);}
.sc-handle{position:absolute;left:0;top:0;width:42px;height:42px;border-radius:9px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:0 6px 14px -6px rgba(37,99,235,.7);touch-action:none;}
.sc-handle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sc-tip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#94a3b8;pointer-events:none;}
.sc-tip.sc-ok{color:#16a34a;font-weight:600;}
.sc-tip.sc-err{color:#ef4444;}
.sc-box.sc-pass .sc-handle{background:#16a34a;box-shadow:none;cursor:default;}
.sc-box.sc-fail .sc-handle{background:#ef4444;}
/* 失败次数过多 → 锁定态
   ⚠️ 不要用「给整个滑条降 opacity」来表示禁用：浅色 track（#f8fafc）再乘 .55
      在白卡片上几乎不可见，用户看起来就是「滑块消失了」。改用明确的禁用配色。
   ⚠️ 图区也不要清成空白块：保留最后一张图 + 灰色遮罩 + 锁定文案，视觉才是「被锁住」而非「加载失败」。 */
.sc-box.sc-locked .sc-handle{background:#94a3b8;cursor:not-allowed;box-shadow:none;}
.sc-box.sc-locked .sc-track{background:#eef2f7;border-color:#e2e8f0;}
.sc-box.sc-locked .sc-fill{display:none;}
.sc-box.sc-locked .sc-refresh{display:none;}
.sc-box.sc-locked .sc-bg{filter:grayscale(.6);}
/* 锁定遮罩：由 JS 动态插入（避免三个模板各写一份），图区与滑条**两处**都能看到倒计时 —— 
   只放在滑条上的话，用户截图/视野里常常只有图区，等于看不到还要等多久 */
.sc-lockmask{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(248,250,252,.8);}
.sc-box.sc-locked .sc-lockmask{display:flex;}
.sc-lockmask span{font-size:13px;color:#94a3b8;}
.sc-lockmask em{font-style:normal;font-size:14px;font-weight:600;color:#ef4444;}
/* 验证通过后收起滑块条与刷新按钮：只留拼图已归位的图片 */
.sc-box.sc-done{gap:0;}
.sc-box.sc-done .sc-track{opacity:0;height:0;max-height:0;border-width:0;pointer-events:none;}
.sc-box.sc-done .sc-refresh{opacity:0;visibility:hidden;pointer-events:none;}