/* 登录/注册页（左边场景循环，右边表单，滑块验证）。只作用在 #login 里。 */
#login{position:fixed;inset:0;z-index:50;overflow:auto;background:#fff;color:#0E1726;font:16px/1.7 var(--sans)}
#login *{box-sizing:border-box}
#login button,#login input{font:inherit;color:inherit}
#login a{color:#2B59FF}
#login :focus-visible{outline:2px solid #2B59FF;outline-offset:2px}
#login{--desk:#F3F5F8;--ink:#0E1726;--pencil:#7B8798;--rule:#E6EAF0;--blue:#2B59FF;--blue-soft:#EAEFFF;--done:#12A37F;--warn:#D4421B;--ease:cubic-bezier(.22,.8,.24,1);--serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif}
#login.login{display:block;place-items:stretch;align-items:stretch;justify-items:stretch}
#login[hidden]{display:none}
#login .lg-page{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;width:100%}
#login /* left: what you get */
.lg-side{background:var(--ink);color:#fff;padding:44px 56px;display:flex;flex-direction:column;position:relative;overflow:hidden}
#login .lg-logo{font-family:var(--serif);font-weight:700;font-size:20px;text-decoration:none;color:#fff}
#login .lg-logo i{font-style:normal;color:#7C98FF}
#login .lg-side h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,3vw,38px);line-height:1.4;margin-top:auto;max-width:11em}
#login .lg-side p.lg-s{margin-top:14px;color:#AEB8C8;max-width:24em}
#login .lg-mock{margin:40px 0 0;background:#fff;color:var(--ink);border-radius:16px;padding:16px 18px 14px;max-width:440px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);font-size:14px;display:flex;flex-direction:column}
#login .lg-mock .lg-mh{display:flex;align-items:center;gap:10px}
#login .lg-mock .lg-who{font-size:12px;color:#fff;background:var(--ink);border-radius:999px;padding:1px 10px;white-space:nowrap}
#login .lg-mock .lg-w{color:var(--pencil);font-size:12.5px}
#login .lg-scene{position:relative;height:196px;margin-top:10px;overflow:hidden}
#login .lg-sc{position:absolute;inset:0;opacity:0;transition:opacity .35s}
#login .lg-sc.on{opacity:1}
#login .lg-mock .lg-dots{display:flex;gap:6px;padding-top:8px}
#login .lg-mock .lg-dots i{width:6px;height:6px;border-radius:50%;background:var(--rule);transition:background .3s,width .3s}
#login .lg-mock .lg-dots i.on{background:var(--blue);width:18px;border-radius:3px}
#login .lg-sc .lg-a{opacity:0}
#login .lg-sc.on .lg-a{animation:lg_rise .5s var(--ease) var(--d,0s) both}
#login .lg-sc.on .lg-a.lg-pop{animation-name:lg_pop}
#login .lg-sc.on .lg-a.lg-gx{animation-name:lg_gx}
#login .lg-sc.on .lg-a.lg-gy{animation-name:lg_gy}
#login .lg-a{transform-box:fill-box}
#login .lg-a.lg-pop{transform-origin:center}
#login .lg-a.lg-gx{transform-origin:left center}
#login .lg-a.lg-gy{transform-origin:center bottom}
#login .lg-dr{stroke-dasharray:var(--l,100);stroke-dashoffset:var(--l,100)}
#login .lg-sc.on .lg-dr{animation:lg_dr .7s ease var(--d,0s) forwards}
@keyframes lg_rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lg_pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes lg_gx{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:none}}
@keyframes lg_gy{from{opacity:1;transform:scaleY(0)}to{opacity:1;transform:none}}
@keyframes lg_dr{to{stroke-dashoffset:0}}
@keyframes lg_over{0%{opacity:0;transform:translateY(46px)}25%{opacity:1;transform:translateY(46px)}100%{opacity:1;transform:none}}
@keyframes lg_ringdraw{from{opacity:1;stroke-dashoffset:276}to{opacity:1;stroke-dashoffset:236}}
@keyframes lg_out{from{opacity:1}to{opacity:0}}
@keyframes lg_dots{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
#login .lg-sc.on .lg-a.lg-k-over{animation:lg_over 1.2s var(--ease) var(--d,0s) both}
#login .lg-sc.on .lg-a.lg-k-ring{animation:lg_ringdraw 1s ease var(--d,0s) both}
#login .lg-sc.on .lg-a.lg-k-out{animation:lg_out .4s ease var(--d,0s) both}
#login .lg-sc.on .lg-a.lg-k-dots{animation:lg_dots 1s ease var(--d,0s) both}
#login .lg-chip{display:inline-block;font-size:12px;line-height:1.7;padding:0 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue);margin-right:4px;white-space:nowrap}
#login .lg-chip.lg-g{background:#E4F6F0;color:var(--done)}
#login .lg-chip.lg-o{background:#FFF1EB;color:#B2431B}
#login .lg-t1{font-size:15px;line-height:1.9;padding-top:6px}
#login .lg-t1 .cur{display:inline-block;width:2px;height:1.1em;background:var(--blue);vertical-align:-3px;margin-left:1px;animation:lg_bl 1s steps(1) infinite}
@keyframes lg_bl{50%{opacity:0}}
#login .lg-card1{margin-top:12px;border-radius:10px;background:var(--blue-soft);padding:10px 12px;color:#1B3BB3}
#login .lg-card1 small{display:block;color:#5A6B8C;font-size:12px}
#login .lg-ppl{display:flex;gap:6px;margin-top:10px}
#login .lg-pr{display:flex;align-items:center;gap:20px;padding-top:14px}
#login .lg-ring{flex:none;position:relative;width:96px;height:96px}
#login .lg-ring svg{width:96px;height:96px;transform:rotate(-90deg)}
#login .lg-ring b{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--serif);font-size:24px;line-height:1.05}
#login .lg-ring b small{display:block;font:12px/1.2 var(--sans);color:var(--pencil)}
#login .lg-pr .lg-nm{font-size:14px;line-height:1.7}
#login .lg-pr .lg-nm small{color:var(--pencil)}
#login .lg-flip{position:relative;height:1.3em;width:3em;font-family:var(--serif);font-size:30px;line-height:1.3;font-weight:700}
#login .lg-flip span{position:absolute;left:0;top:0}
#login .lg-cal{position:relative;height:150px;margin-top:6px}
#login .lg-cal .lg-hr{position:absolute;left:0;right:0;border-top:1px solid var(--rule);font-size:11px;color:var(--pencil);padding-top:1px}
#login .lg-cal .lg-b{position:absolute;top:40px;height:44px;border-radius:8px;padding:5px 10px;font-size:13px;line-height:1.5}
#login .lg-cal .lg-b1{left:3.2em;right:50%;background:var(--blue-soft);color:#1B3BB3}
#login .lg-cal .lg-b2{left:50%;right:0;background:#FFF1EB;color:#B2431B;outline:1.5px solid #F2B8A2}
#login .lg-flag{position:absolute;left:0;right:0;bottom:0;padding:7px 10px;border-radius:8px;background:#FFF1EB;color:#B2431B;font-size:12.5px;display:flex;justify-content:space-between;gap:8px;align-items:center}
#login .lg-flag span{background:#fff;border-radius:999px;padding:0 10px;color:var(--ink)}
#login .lg-bub{max-width:86%;padding:7px 12px;border-radius:12px;font-size:13px;line-height:1.55;margin-top:8px}
#login .lg-bub.lg-me{margin-left:auto;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
#login .lg-bub.lg-ai{background:var(--desk);border-bottom-left-radius:4px}
#login .lg-bub.lg-dt{width:56px;background:var(--desk);border-bottom-left-radius:4px;position:absolute;left:0;top:44px}
#login .lg-bub.lg-dt i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pencil);margin-right:4px}
#login .lg-wv{display:flex;align-items:center;gap:14px;padding-top:12px}
#login .lg-bars{flex:none;display:flex;align-items:center;gap:3px;height:56px}
#login .lg-bars i{display:block;width:3px;border-radius:2px;background:var(--blue)}
#login .lg-tx2{flex:1;min-width:0;font-size:13px;line-height:1.6}
#login .lg-tx2 div{padding:5px 0;border-bottom:1px solid var(--rule)}
#login .lg-tx2 div:last-child{border:0}
#login .lg-fl{display:grid;grid-template-columns:auto 44px auto;justify-content:space-between;align-items:center;padding-top:6px}
#login .lg-col{display:flex;flex-direction:column;gap:8px}
#login .lg-f{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:9px;background:var(--desk);font-size:12.5px;white-space:nowrap}
#login .lg-f u{display:block;width:13px;height:17px;border-radius:3px}
#login .lg-f.lg-o{background:var(--blue-soft);color:#1B3BB3}
#login .lg-f.lg-o b{font-weight:500;color:var(--pencil);font-size:11.5px;margin-right:2px}
#login .lg-idle{display:grid;gap:12px;font-size:13px;padding-top:12px}
#login .lg-idle div{display:grid;grid-template-columns:2.6em 1fr 3.4em;gap:10px;align-items:center}
#login .lg-idle i{display:block;height:9px;border-radius:5px;background:#CBD3E1}
#login .lg-idle .lg-hot i{background:var(--warn)}
#login .lg-idle .lg-hot span:last-child{color:#B2431B;font-weight:500}
#login .lg-idle span:last-child{text-align:right;color:var(--pencil);font-size:12px}
#login .lg-remind{margin-top:12px;font-size:12.5px;background:#FFF1EB;color:#B2431B;border-radius:8px;padding:7px 10px}
#login .lg-side .lg-foot{margin-top:40px;font-size:13px;color:#7F8CA3}
#login /* right: form */
.lg-main{display:flex;align-items:center;justify-content:center;padding:48px 28px;background:#fff}
#login .lg-box{width:100%;max-width:380px}
#login .lg-box h1{font-family:var(--serif);font-size:28px;line-height:1.4}
#login .lg-box .lg-lead{margin-top:6px;color:var(--pencil);font-size:15px}
#login .lg-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--desk);border-radius:12px;padding:4px;margin:28px 0 24px}
#login .lg-tabs button{border:0;background:none;border-radius:9px;padding:9px 0;cursor:pointer;color:var(--pencil);font-size:15px;transition:background .2s,color .2s}
#login .lg-tabs button[aria-selected=true]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(14,23,38,.1)}
#login .lg-fld{margin-bottom:16px}
#login .lg-fld label{display:block;font-size:13.5px;margin-bottom:6px;color:#3A4558}
#login .lg-in{position:relative;display:flex;align-items:center}
#login .lg-in input{width:100%;height:48px;border:1.5px solid var(--rule);border-radius:12px;padding:0 14px;font-size:16px;background:#fff;transition:border-color .15s,box-shadow .15s}
#login .lg-in input::placeholder{color:#A8B2C2}
#login .lg-in input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(43,89,255,.12)}
#login .lg-fld.bad input{border-color:var(--warn);box-shadow:0 0 0 4px rgba(212,66,27,.1)}
#login .lg-in .add{position:absolute;right:6px;height:36px;border:0;border-radius:9px;padding:0 12px;background:var(--blue-soft);color:var(--blue);cursor:pointer;font-size:14px;white-space:nowrap}
#login .lg-in .add:hover:not(:disabled){background:#DCE5FF}
#login .lg-in .add:disabled{background:var(--desk);color:var(--pencil);cursor:default}
#login .lg-in input.lg-pad{padding-right:116px}
#login .lg-eye{position:absolute;right:8px;width:34px;height:34px;border:0;background:none;cursor:pointer;color:var(--pencil);border-radius:8px;display:grid;place-items:center}
#login .lg-eye:hover{color:var(--ink)}
#login .lg-eye svg{width:20px;height:20px}
#login .lg-msg{font-size:13px;margin-top:6px;min-height:0;color:var(--warn)}
#login .lg-msg.ok{color:var(--done)}
#login .hint{font-size:13px;color:var(--pencil);margin-top:6px}
#login .row{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:-4px 0 20px}
#login .row button{border:0;background:none;color:var(--blue);cursor:pointer;padding:0}
#login .lg-chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#3A4558;margin:4px 0 20px;line-height:1.6}
#login .lg-chk input{margin-top:4px;width:16px;height:16px;accent-color:var(--blue);flex:none}
#login .lg-go{width:100%;height:50px;border:0;border-radius:12px;background:var(--ink);color:#fff;font-size:16px;cursor:pointer;transition:background .15s,transform .1s}
#login .lg-go:hover{background:var(--blue)}
#login .lg-go:active{transform:scale(.99)}
#login .lg-go[disabled]{background:#AEB8C8;cursor:default}
#login .lg-err{margin-top:12px;padding:10px 12px;border-radius:10px;background:#FFF1EB;color:#B2431B;font-size:14px}
#login .lg-sw{margin-top:22px;text-align:center;font-size:14px;color:var(--pencil)}
#login .lg-sw button{border:0;background:none;color:var(--blue);cursor:pointer;padding:0}
#login .lg-done{text-align:center;padding:30px 0}
#login .lg-done svg{width:56px;height:56px}
#login .lg-done h1{margin-top:14px}
#login .demo{margin-top:22px;font-size:12.5px;color:var(--pencil);background:var(--desk);border-radius:10px;padding:8px 12px}
#login .lg-cap-bg{position:fixed;inset:0;background:rgba(14,23,38,.5);display:grid;place-items:center;z-index:20;padding:20px;animation:lg_fade .2s}
#login .lg-cap{background:#fff;border-radius:18px;width:100%;max-width:372px;padding:20px 20px 22px;box-shadow:0 30px 80px -20px rgba(14,23,38,.5);animation:lg_capin .3s var(--ease)}
#login .lg-cap h3{font-family:var(--serif);font-size:18px;display:flex;justify-content:space-between;align-items:center}
#login .lg-cap h3 button{border:0;background:none;width:32px;height:32px;border-radius:8px;cursor:pointer;color:var(--pencil);font-size:20px;line-height:1}
#login .lg-cap h3 button:hover{background:var(--desk)}
#login .lg-cap p.lg-t{font-size:13.5px;color:var(--pencil);margin:2px 0 12px}
#login .lg-stage{position:relative;width:320px;max-width:100%;height:160px;border-radius:12px;overflow:hidden;background:var(--desk);margin:0 auto}
#login .lg-stage canvas{display:block}
#login .lg-stage .lg-pc{position:absolute;top:0;left:0;touch-action:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
#login .lg-stage .lg-tip{position:absolute;left:0;right:0;bottom:0;padding:6px 0;text-align:center;font-size:13px;color:#fff;transform:translateY(100%);transition:transform .25s var(--ease)}
#login .lg-stage .lg-tip.ok{background:rgba(18,163,127,.92);transform:none}
#login .lg-stage .lg-tip.no{background:rgba(212,66,27,.92);transform:none}
#login .lg-rail{position:relative;width:320px;max-width:100%;height:44px;border-radius:22px;background:var(--desk);margin:14px auto 0;user-select:none;touch-action:none}
#login .lg-rail .lg-fill{position:absolute;left:0;top:0;bottom:0;width:44px;border-radius:22px;background:var(--blue-soft)}
#login .lg-rail .lg-hint2{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--pencil);pointer-events:none;padding-left:30px}
#login .lg-rail .lg-knob{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(14,23,38,.25);display:grid;place-items:center;cursor:grab;color:var(--blue);border:0;touch-action:none}
#login .lg-rail .lg-knob:active{cursor:grabbing}
#login .lg-rail.ok .lg-knob{color:var(--done)}
#login .lg-rail.ok .lg-fill{background:#D7F1E8}
#login .lg-rail.no{animation:lg_shake .35s}
#login .lg-rail .lg-knob svg{width:20px;height:20px}
#login .lg-cap .lg-re{display:block;margin:12px auto 0;border:0;background:none;color:var(--blue);cursor:pointer;font-size:13.5px}
@keyframes lg_fade{from{opacity:0}}
@keyframes lg_capin{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes lg_shake{20%{transform:translateX(-6px)}50%{transform:translateX(6px)}80%{transform:translateX(-3px)}}
@media (prefers-reduced-motion:reduce){#login .lg-cap,#login .lg-cap-bg,#login .lg-rail.no{animation:none}
#login .lg-stage .lg-tip{transition:none}
}
#login [hidden]{display:none!important}
@media (max-width:860px){
  /* 手机：整页白底，顶部是文字标志，表单第一屏就能用，场景卡片放在表单下面 */
  #login .lg-page{display:flex;flex-direction:column;grid-template-columns:none;width:100%;min-height:100%;min-height:100dvh;align-items:stretch}
  #login .lg-side{display:contents}
  #login .lg-side .lg-logo{order:0;align-self:flex-start;display:block;color:var(--ink);padding:max(20px,env(safe-area-inset-top)) 24px 0;font-size:22px;line-height:1.3}
  #login .lg-side .lg-logo i{color:var(--blue)}
  #login .lg-side h2,#login .lg-side p.lg-s,#login .lg-side .lg-foot{display:none}
  #login .lg-main{order:1;display:block;padding:28px 24px 8px;background:#fff}
  #login .lg-box{max-width:none}
  #login .lg-box h1{font-size:28px;line-height:1.35}
  #login .lg-box .lg-lead{font-size:15px}
  #login .lg-tabs{margin:22px 0 20px}
  #login .lg-tabs button{padding:11px 0;font-size:16px}
  #login .lg-in input{height:52px;font-size:16px;border-radius:14px}
  #login .lg-go{height:54px;font-size:17px;border-radius:14px}
  #login .lg-fld{margin-bottom:14px}
  #login .lg-sw{margin-top:18px;font-size:15px}
  #login .lg-mock{order:2;display:flex;flex:none;position:relative;z-index:0;margin:32px 24px max(32px,env(safe-area-inset-bottom));max-width:none;box-shadow:none;background:var(--desk);border-radius:18px;padding:14px 16px 12px}
  #login .lg-scene{height:196px;flex:none;position:relative;overflow:hidden}
  #login .lg-mock .lg-dots i.on{background:var(--blue)}
  /* 验证弹窗：从底部升起，滑块够宽，好拖 */
  #login .lg-cap-bg{align-items:end;padding:0;z-index:60;position:fixed;inset:0}
  #login .lg-cap{max-width:none;width:100%;border-radius:22px 22px 0 0;padding:20px 20px max(24px,env(safe-area-inset-bottom));animation:lg_sheet .3s var(--ease)}
  #login .lg-stage,#login .lg-rail{width:min(320px,100%)}
  #login .lg-rail{height:48px}
  #login .lg-rail .lg-knob{width:48px;height:48px}
  #login .lg-rail .lg-fill{width:48px}
}
@keyframes lg_sheet{from{transform:translateY(40px);opacity:0}}

}
@media (prefers-reduced-motion:reduce){#login .lg-sc .lg-a,#login .lg-sc.on .lg-a{animation:none!important;opacity:1}
#login .lg-sc .lg-dr{stroke-dashoffset:0;animation:none!important}
#login .lg-sc .lg-k-out,#login .lg-sc .lg-k-dots{display:none}
}


#login .lg-stage img{display:block;user-select:none;-webkit-user-drag:none}
#login .lg-stage .lg-pc{position:absolute;top:0;left:0;touch-action:none;width:54px;height:160px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
#login .lg-stage.load{background:var(--desk)}

/* 登录页显示时，应用的底部输入栏、助理按钮一律不出现 */
body:has(#login:not([hidden])) .m-dock, body:has(#login:not([hidden])) .assist-show, body:has(#login:not([hidden])) .m-fab, body:has(#login:not([hidden])) .m-tabs { display: none !important; }