/* ============================================================
   leapdeck — auth pages (login / register)  · 沉浸式玻璃卡片
   builds on leapdeck.css tokens + buttons
============================================================ */

body{min-height:100vh;background:var(--bg)}

/* ---------- 沉浸式动态背景 ---------- */
.auth-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.auth-bg .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.7;animation:a-float 17s var(--ease) infinite}
.auth-bg .b1{width:560px;height:560px;background:radial-gradient(circle,#8EC9F2,transparent 70%);top:-160px;left:-120px}
.auth-bg .b2{width:520px;height:520px;background:radial-gradient(circle,#F8B6D5,transparent 70%);top:-120px;right:-140px;animation-delay:-4s}
.auth-bg .b3{width:480px;height:480px;background:radial-gradient(circle,#CABFF2,transparent 70%);bottom:-180px;left:12%;animation-delay:-8s;opacity:.6}
.auth-bg .b4{width:420px;height:420px;background:radial-gradient(circle,#BFE2F8,transparent 70%);bottom:-140px;right:8%;animation-delay:-12s;opacity:.55}
@keyframes a-float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-30px) scale(1.08)}}

/* 漂浮的 PPT 版式卡片 + 鼠标视差 */
.parallax{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gframe{position:absolute;border:1px solid rgba(79,157,232,.22);border-radius:15px;overflow:hidden;
  background:linear-gradient(140deg,rgba(255,255,255,.5),rgba(232,240,251,.24));
  box-shadow:0 16px 36px -22px rgba(56,120,200,.22);
  backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);will-change:translate;animation:a-bfloat 9s ease-in-out infinite}
.gframe svg{width:100%;height:100%;display:block}
.adot{position:absolute;border-radius:50%;will-change:translate;animation:a-bfloat 7s ease-in-out infinite}
@keyframes a-bfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:820px){.parallax{display:none}}

/* ---------- 居中玻璃卡片 ---------- */
.auth{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:40px 18px}
.auth-card{position:relative;width:100%;max-width:432px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(26px) saturate(165%);-webkit-backdrop-filter:blur(26px) saturate(165%);
  border:1px solid rgba(255,255,255,.8);border-radius:28px;
  box-shadow:0 34px 90px -22px rgba(56,120,200,.42),0 8px 26px rgba(21,40,70,.08);
  padding:38px 38px 32px}
@media(max-width:480px){.auth-card{padding:30px 24px 26px;border-radius:24px}}

.auth-card .logo{display:block;width:max-content;margin:0 auto 20px}
.auth-card .logo img{height:38px}
.auth-card h1{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.7rem;letter-spacing:-.02em;text-align:center;margin-bottom:6px}
.auth-card .sub{color:var(--ink-soft);font-size:.96rem;text-align:center;margin-bottom:24px}

/* 登录方式切换 */
.tabs{display:flex;gap:4px;background:var(--bg-2);border-radius:12px;padding:4px;margin-bottom:22px}
.tabs button{flex:1;height:38px;border:none;background:none;border-radius:9px;font-family:inherit;font-size:.94rem;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:all .25s var(--ease)}
.tabs button.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}

/* 表单字段 */
.field{margin-bottom:14px}
.field>label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:7px}
.ctrl{position:relative;display:flex;gap:8px}
.ctrl input{flex:1;width:100%;height:50px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;
  font-family:inherit;font-size:1rem;color:var(--ink);background:rgba(255,255,255,.85);transition:border-color .25s,box-shadow .25s}
.ctrl input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(79,157,232,.16);background:#fff}
.ctrl input::placeholder{color:var(--ink-faint)}
.ctrl:has(.pw-toggle) input{padding-right:46px}

/* 区号 */
.cc{flex:none;display:flex;align-items:center;gap:6px;height:50px;padding:0 12px;border:1px solid var(--line-2);border-radius:12px;
  background:rgba(255,255,255,.85);font-weight:600;color:var(--ink);font-size:.98rem;white-space:nowrap}
.cc svg{width:14px;height:14px;stroke:var(--ink-faint);stroke-width:2.4;fill:none}

/* 获取验证码 */
.get-code{flex:none;height:50px;padding:0 16px;border:1px solid var(--blue);border-radius:12px;
  background:rgba(79,157,232,.08);color:var(--blue-deep);font-family:inherit;font-size:.92rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:all .25s var(--ease)}
.get-code:hover:not(:disabled){background:rgba(79,157,232,.16)}
.get-code:disabled{cursor:default;border-color:var(--line-2);color:var(--ink-faint);background:var(--bg-2)}

/* 密码显隐 */
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:none;background:none;cursor:pointer;
  display:grid;place-items:center;border-radius:8px;color:var(--ink-faint)}
.pw-toggle:hover{color:var(--ink-soft);background:var(--bg-2)}
.pw-toggle svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hint{font-size:.8rem;color:var(--ink-faint);margin-top:6px}
.row-end{display:flex;justify-content:flex-end;margin:-4px 0 16px}
.link{color:var(--blue-deep);font-weight:600;font-size:.88rem}
.link:hover{text-decoration:underline;text-underline-offset:2px}

/* 同意条款 */
.agree{display:flex;gap:9px;align-items:flex-start;margin:2px 0 18px;font-size:.85rem;color:var(--ink-soft);line-height:1.5}
.agree input{width:16px;height:16px;margin-top:2px;accent-color:var(--blue);flex:none;cursor:pointer}
.agree a{color:var(--blue-deep);font-weight:600}
.agree a:hover{text-decoration:underline;text-underline-offset:2px}
.shake{animation:a-shake .45s}
@keyframes a-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* 提交 */
.btn-submit{width:100%;justify-content:center;height:50px;font-size:1.02rem;margin-top:2px}

/* 分隔线 */
.divider{display:flex;align-items:center;gap:14px;color:var(--ink-faint);font-size:.82rem;margin:22px 0 18px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* 第三方圆形按钮 */
.socials{display:flex;justify-content:center;gap:20px}
.soc{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);
  background:rgba(255,255,255,.9);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.soc:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(79,157,232,.4)}
.soc svg{width:26px;height:26px}
.soc .cap{position:absolute}

/* 切换登录/注册 */
.switch-line{text-align:center;margin-top:24px;color:var(--ink-soft);font-size:.94rem}
.switch-line a{color:var(--blue-deep);font-weight:700}
.switch-line a:hover{text-decoration:underline;text-underline-offset:2px}

[hidden]{display:none!important}


/* ---------- 扫码登录 ---------- */
.qr-card{text-align:center}
.qr-wrap{position:relative;width:216px;height:216px;margin:6px auto 4px;padding:14px;border:1px solid var(--line-2);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}
.qr-wrap>svg{width:100%;height:100%;display:block}
.qr-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:11px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 5px #fff}
.qr-logo svg{width:32px;height:32px}
.qr-tip{color:var(--ink-soft);font-size:.9rem;line-height:1.6;margin-top:14px}
.qr-tip b{color:var(--ink);font-weight:700}

/* ---- 忘记密码：错误提示 + 成功态 ---- */
.err{color:#D64545;font-size:.82rem;margin-top:7px;line-height:1.4}
.reset-done{text-align:center;padding:8px 0 4px}
.reset-done .done-ico{width:64px;height:64px;margin:6px auto 18px;border-radius:50%;
  background:var(--grad-soft);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.reset-done .done-ico svg{width:30px;height:30px;stroke:var(--blue-deep);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.reset-done h2{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.35rem;margin-bottom:8px}
.reset-done p{color:var(--ink-soft);font-size:.95rem;line-height:1.6;margin-bottom:22px}
.reset-done .btn-submit{text-decoration:none}
