:root{color-scheme:light}*{box-sizing:border-box}body{min-height:100vh;margin:0;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 20% 10%,#e6f4ff 0,transparent 31%),linear-gradient(135deg,#f5f8fc,#eaf0f9);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;color:#263349}.card{width:min(430px,100%);padding:36px 34px 30px;border:1px solid rgba(255,255,255,.9);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 18px 55px rgba(35,62,110,.15);text-align:center}.shield{width:48px;height:48px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;background:#1769e8;color:#fff;font-size:25px;font-weight:800;box-shadow:0 8px 18px #c5dbff}h1{font-size:21px;margin:0 0 8px}p{margin:0;color:#69758a}.slider-wrap{position:relative;height:52px;margin:30px 0 14px;user-select:none;touch-action:none}.track{height:52px;border:1px solid #dce3ed;border-radius:10px;background:#f2f5f9;overflow:hidden;position:relative}.trail{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#d9f5e6,#b8e9cd);transition:width .08s}.target{position:absolute;top:11px;width:30px;height:30px;border-radius:8px;background:#21a866;box-shadow:inset 0 0 0 3px #e3f9eb;z-index:2}.handle{position:absolute;left:0;top:2px;width:48px;height:48px;border:0;border-radius:9px;background:#fff;color:#1769e8;font-size:34px;line-height:1;box-shadow:0 3px 10px rgba(36,51,76,.22);cursor:grab;z-index:3;transition:background .15s}.handle:active{cursor:grabbing}.tip{font-size:13px}.retry{margin-top:18px;padding:8px 15px;border:1px solid #1769e8;border-radius:7px;background:#fff;color:#1769e8;cursor:pointer}.success .track{border-color:#2fb270}.success .handle{background:#21a866;color:#fff}.error .track{border-color:#dd5965}.error .trail{background:#ffe0e2}@media(max-width:420px){.card{padding:30px 20px}.slider-wrap{margin-top:25px}}