@charset "utf-8";
/**
 * 滑块拼图验证码控件样式（配套 slider-captcha.js）
 *
 * 特性：无第三方依赖，可直接复制到其他系统使用。
 *
 * 组件 DOM 结构（使用 autoBuild:true 时由 JS 自动生成；也可在页面上手写）：
 * <pre>
 *   &lt;div class="puzzle-panel"&gt;
 *     &lt;img class="puzzle-bg"/&gt;
 *     &lt;img class="puzzle-piece"/&gt;
 *   &lt;/div&gt;
 *   &lt;div class="slider-track"&gt;
 *     &lt;span class="slider-text"&gt;向右滑动滑块填充拼图&lt;/span&gt;
 *     &lt;div class="slider-handle"&gt;&amp;raquo;&lt;/div&gt;
 *   &lt;/div&gt;
 * </pre>
 *
 * 三点使用说明：
 *   1. 外层容器需为 position:relative（面板以绝对定位浮在轨道上方），
 *      .puzzle-panel 的 bottom 值需与业务方容器高度匹配（默认按 50px 轨道预留 60px）；
 *   2. .puzzle-piece 的宽高为缺省值，JS 会用服务端下发的 pieceSize 覆盖为行内样式；
 *   3. .slider-back 由 JS 在拖动结束/重置时临时加到外层容器上以触发回弹过渡，无需手工添加。
 */

/* ===== 组件核心样式（业务方必须保留） ===== */

.slider-track{
    position:relative;
    width:360px;
    height:50px;
    line-height:50px;
    text-align:center;
    background:#eef3f7;
    border:1px solid #E1E1E1;
    border-radius:4px;
    color:#999;
    user-select:none;
    -webkit-user-select:none;
}
.slider-text{
    font-size:14px;
    pointer-events:none;
}
.slider-handle{
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    background:#fff;
    border:1px solid #E1E1E1;
    border-radius:4px;
    text-align:center;
    line-height:50px;
    font-size:24px;
    color:#1c92fc;
    cursor:pointer;
    box-shadow:0 0 4px #ccc;
}
/* 滑块回弹：只在 .slider-back 期间生效，避免拖动跟手延迟。改 .20s 调速度 */
.slider-back .slider-handle, .slider-back .puzzle-piece {
    transition: left .20s cubic-bezier(0,0,.58,1);
}
.puzzle-panel{
    position:absolute;
    bottom:60px;
    left:0;
    width:310px;
    height:155px;
    display:none;
    border:1px solid #E1E1E1;
    box-shadow:0 2px 8px #aaa;
    background:#fff;
    overflow:hidden;
    z-index:10;
}
.puzzle-bg{
    width:310px;
    height:155px;
    display:block;
}
.puzzle-piece{
    position:absolute;
    top:0;
    left:0;
    width:53px;
    height:53px;
}

/* ===== 外层容器（业务方按自身布局覆盖，本工程登录框样式） ===== */

.slider-wrap{
    position:relative;
    margin-left:42px;
    width:360px;
    height:50px;
}