:root{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:#17243d;background:#f4f8ff;letter-spacing:0}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:#f4f8ff}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
button{font:inherit}
.gate-shell{display:grid;place-items:center;flex:1;padding:32px 20px}
.gate-panel{width:100%;max-width:440px;padding:42px 26px 36px;border:1px solid #dbe8fb;border-radius:8px;background:#fff;text-align:center;box-shadow:0 16px 42px rgba(35,91,165,.09)}
.shield{width:68px;height:68px;margin:0 auto 22px;display:grid;place-items:center;border-radius:50%;background:#e9f3ff}
.shield span{position:relative;width:28px;height:34px;border:3px solid #1677e8;border-radius:14px 14px 18px 18px;clip-path:polygon(50% 0,100% 18%,90% 76%,50% 100%,10% 76%,0 18%)}
.shield span::after{content:"";position:absolute;left:7px;top:8px;width:9px;height:5px;border-left:3px solid #1677e8;border-bottom:3px solid #1677e8;transform:rotate(-45deg)}
h1{font-size:25px;line-height:1.4;font-weight:700}
.gate-description{margin-top:8px;color:#72819a;font-size:15px;line-height:1.6}
.slider{position:relative;height:58px;margin-top:30px;overflow:hidden;border:1px solid #cddcf0;border-radius:7px;background:#f8fbff;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.slider-progress{position:absolute;inset:0 auto 0 0;width:0;background:#dcecff}
.slider-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:58px;color:#66758d;font-size:14px;pointer-events:none}
.slider-thumb{position:absolute;left:3px;top:3px;z-index:1;width:50px;height:50px;border:0;border-radius:5px;background:#1677e8;color:#fff;font-size:24px;font-weight:700;line-height:1;cursor:grab;touch-action:none;will-change:transform}
.slider-thumb:active{cursor:grabbing}
.slider-thumb:focus-visible,.gate-refresh:focus-visible{outline:3px solid #87bdf8;outline-offset:2px}
.slider[data-state="busy"] .slider-thumb{animation:gate-pulse .8s ease-in-out infinite alternate}
.slider[data-state="success"] .slider-thumb{background:#16a06d}
.slider[data-state="failed"] .slider-thumb{background:#8c98aa;cursor:default}
.gate-status{min-height:48px;padding-top:14px;color:#d34040;font-size:14px;line-height:1.7}
.gate-refresh{min-height:42px;padding:0 18px;border:0;background:transparent;color:#1677e8;cursor:pointer}
.gate-refresh[hidden]{display:none}
.gate-footer{padding:16px 20px max(22px,env(safe-area-inset-bottom));text-align:center;color:#8b98aa;font-size:12px}
@keyframes gate-pulse{to{opacity:.65}}
@media(max-width:360px){.gate-shell{padding:20px 14px}.gate-panel{padding:34px 18px 28px}.slider-label{font-size:13px}}
@media(prefers-reduced-motion:reduce){.slider[data-state="busy"] .slider-thumb{animation:none}}