/* 登录注册页与滑块人机验证。 */
/* ---------- 登录/注册 ---------- */
#auth{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--auth-bg);background-image:radial-gradient(900px 500px at 15% -10%,var(--auth-g1),transparent),radial-gradient(700px 500px at 110% 110%,var(--auth-g2),transparent)}
.auth-card{position:relative;width:min(340px,92vw);max-height:min(640px,94vh);max-height:min(640px,94dvh);overflow-y:auto;background:var(--card);color:var(--txt);border-radius:22px;padding:32px 26px 26px;box-shadow:var(--sh-lg);animation:cardin .4s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
@keyframes cardin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.auth-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:24px}
.auth-mark{width:56px;height:56px;border-radius:18px;background:linear-gradient(150deg,var(--primary),var(--primary-d));display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px var(--primary-glow);margin-bottom:12px}
.auth-mark svg{width:30px;height:30px;color:#fff}
.auth-brand h1{font-size:23px;letter-spacing:5px;text-indent:5px}
.auth-brand p{font-size:12.5px;color:var(--sub);margin-top:5px;letter-spacing:.5px}
.seg{position:relative;display:flex;background:var(--fill);border-radius:12px;padding:4px;margin-bottom:20px}
.seg button{flex:1;padding:9px 0;border:none;background:transparent;border-radius:9px;font-size:14.5px;color:var(--sub);transition:color .18s,background .18s,box-shadow .18s}
.seg button.on{background:var(--raise);color:var(--txt);font-weight:600;box-shadow:var(--sh-sm)}
.seg button:disabled{opacity:.4;cursor:default}
.field input{width:100%;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:13px;outline:none;background:var(--field);transition:border-color .15s,box-shadow .15s,background .15s}
.field input:focus{border-color:var(--primary);box-shadow:0 0 0 3.5px var(--primary-l);background:var(--panel)}
.btn-primary{width:100%;padding:13px 0;font-size:16px;font-weight:600;color:#fff;background:var(--grad-cta);border:none;border-radius:12px;box-shadow:0 6px 16px var(--primary-glow);transition:transform .07s,box-shadow .15s,opacity .15s}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.55;box-shadow:none}
.auth-msg{min-height:18px;font-size:13px;color:var(--danger);text-align:center;margin-top:10px}
/* 登录页也能换主题，登录前所见即登录后所得 */
#auth-theme{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:11px;border:none;background:transparent;color:var(--txt-2);display:flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .15s,background .15s}
#auth-theme:hover{opacity:1;background:var(--fill)}
#auth-theme svg{width:18px;height:18px}
/* 当前是浅色就露月亮（点了变深），反之露太阳 */
html[data-resolved=light] #auth-theme .ic-sun{display:none}
html[data-resolved=dark] #auth-theme .ic-moon{display:none}

/* ---------- 滑块人机验证 ---------- */
.cap{margin:0}
.cap-modal-card{width:min(340px,100%)}
.cap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex:none}
.cap-head h3{margin:0;font-size:16.5px;font-weight:650}
#cap-close{border:none;background:transparent;font-size:20px;line-height:1;color:var(--sub);padding:2px 9px;border-radius:8px;cursor:pointer}
#cap-close:hover{background:var(--fill);color:var(--txt)}
.cap-stage{position:relative;border-radius:12px;overflow:hidden;background:var(--fill-2);touch-action:none;user-select:none;-webkit-user-select:none}
.cap-stage img{display:block;width:100%;-webkit-user-drag:none;user-select:none}
.cap-piece{position:absolute;left:0;width:44px;height:44px;border-radius:5px;border:2px solid rgba(255,255,255,.92);background:rgba(255,255,255,.22);box-shadow:0 2px 10px rgba(0,0,0,.32);cursor:grab}
.cap-piece:active,.cap-piece.drag{cursor:grabbing;background:rgba(255,255,255,.36)}
.cap-piece.ok{border-color:var(--primary);background:rgba(var(--p-rgb),.3);cursor:default}
.cap-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:12.5px;color:var(--sub)}
#cap-tip.ok{color:var(--primary-d)}
#cap-tip.bad{color:var(--danger)}
.cap-bar button{flex:none;border:none;background:transparent;font-size:15px;line-height:1;color:var(--sub);padding:3px 8px;border-radius:7px}
.cap-bar button:hover{background:var(--fill);color:var(--txt)}
@keyframes cap-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.cap.shake{animation:cap-shake .32s}