/* 滑块验证码样式，家长端和后台共用。
   结构：上面一张带缺口的背景图，图里叠一块拼图，下面一条滑轨 + 一个可拖的方块。
   之前只有叠在图上的拼图块、没有滑轨，没人知道从哪拖，所以补了滑轨这一层。 */
.scap { width: 320px; max-width: 100%; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.scap-img { position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: #dfe4ec; line-height: 0; }
.scap-img > .bg { display: block; width: 100%; height: auto; }
.scap-img > .pc {
    position: absolute; left: 0; width: 48px; height: 48px; display: block;
    border-radius: 3px; box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    background: rgba(255, 255, 255, .06);
}
.scap-loading, .scap-off {
    height: 96px; display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--muted, #7a8494); line-height: 1.5; text-align: center; padding: 0 10px;
}

.scap-bar {
    position: relative; height: 42px; margin-top: 10px; border-radius: 8px;
    background: #eef1f6; border: 1px solid #e0e5ee; overflow: hidden;
}
.scap-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: linear-gradient(90deg, rgba(47, 123, 255, .18), rgba(47, 123, 255, .32));
}
.scap-tip {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #97a1b0; pointer-events: none;
}
.scap-knob {
    position: absolute; left: 0; top: -1px; width: 48px; height: 42px; border-radius: 7px;
    background: #fff; border: 1px solid #d4dbe6; box-shadow: 0 1px 4px rgba(20, 30, 50, .18);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700; color: #2f7bff; cursor: grab;
    touch-action: none;
}
.scap-knob:active { cursor: grabbing; }

.scap.ok .scap-bar { border-color: #22a05a; background: rgba(34, 160, 90, .1); }
.scap.ok .scap-fill { background: rgba(34, 160, 90, .28); }
.scap.ok .scap-knob { color: #fff; background: #22a05a; border-color: #22a05a; }
.scap.ok .scap-tip { color: #22a05a; }

.scap.bad .scap-bar { border-color: #e8503a; background: rgba(232, 80, 58, .08); }
.scap.bad .scap-knob { color: #fff; background: #e8503a; border-color: #e8503a; }
.scap.bad .scap-tip { color: #e8503a; }
.scap.bad .scap-knob { animation: scap-shake .32s; }
@keyframes scap-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}