:root{--bg:#04111e;--panel:#0a2033;--line:rgba(91,197,229,.3);--cyan:#63ddf6;--green:#6ae3b0;--text:#edfaff;--muted:#83abc0;--danger:#ff8a9d}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{overflow:hidden;background:radial-gradient(circle at 50% 30%,#103b55 0,transparent 36%),linear-gradient(145deg,#020b14,#071c2e 56%,#04101c);color:var(--text);font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif}
button,input{font:inherit}
.login-page{position:relative;min-height:100vh;display:grid;place-items:center;padding:32px;isolation:isolate}
.tech-grid{position:absolute;inset:0;z-index:-3;opacity:.28;background-image:linear-gradient(rgba(89,196,226,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(89,196,226,.13) 1px,transparent 1px);background-size:58px 58px;mask-image:radial-gradient(circle at center,#000 15%,transparent 78%)}
.ambient{position:absolute;z-index:-2;width:42vw;height:42vw;max-width:620px;max-height:620px;border-radius:50%;filter:blur(80px);opacity:.16;animation:float 9s ease-in-out infinite}
.ambient-one{top:-22%;left:-12%;background:#26bcde}
.ambient-two{right:-18%;bottom:-25%;background:#4ce0a4;animation-delay:-4s}
@keyframes float{50%{transform:translate3d(3vw,2vh,0) scale(1.08)}}
.login-panel{position:relative;width:min(460px,100%);padding:34px 36px 28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(150deg,rgba(13,43,66,.96),rgba(5,23,38,.94));box-shadow:0 28px 90px rgba(0,0,0,.48),inset 0 1px rgba(195,244,255,.06);backdrop-filter:blur(18px);overflow:hidden}
.login-panel::before,.login-panel::after{content:"";position:absolute;width:56px;height:56px;border-color:#5cd6ef;opacity:.7;pointer-events:none}
.login-panel::before{top:12px;left:12px;border-top:2px solid;border-left:2px solid;border-radius:8px 0 0}
.login-panel::after{right:12px;bottom:12px;border-right:2px solid;border-bottom:2px solid;border-radius:0 0 8px}
.panel-glow{position:absolute;inset:-1px;z-index:-1;background:radial-gradient(circle at 16% 0,rgba(85,216,245,.17),transparent 38%),radial-gradient(circle at 100% 100%,rgba(94,226,175,.12),transparent 34%)}
.login-brand{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.login-logo{display:grid;place-items:center;flex:0 0 68px;width:68px;height:68px;padding:4px;border:1px solid rgba(112,235,222,.56);border-radius:19px;background:#fff;overflow:hidden;box-shadow:0 0 30px rgba(84,214,236,.25)}
.login-logo img{width:100%;height:100%;display:block;object-fit:contain}
.login-brand p{margin:0 0 4px;color:var(--cyan);font-size:9px;font-weight:700;letter-spacing:.2em}
.login-brand h1{margin:0;font-size:22px;letter-spacing:.02em}
.login-brand>div>span{display:block;margin-top:4px;color:var(--muted);font-size:12px;letter-spacing:.08em}
.security-line{display:flex;align-items:center;gap:8px;margin:0 0 23px;padding:9px 11px;border:1px solid rgba(106,227,176,.2);border-radius:9px;background:rgba(39,157,126,.08);color:#9bc7bb;font-size:10px;letter-spacing:.08em}
.security-line i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 11px var(--green)}
.security-line b{margin-left:auto;color:#6fbda8;font-size:9px;letter-spacing:.16em}
form label{display:block;margin:0 0 7px;color:#a8c7d8;font-size:11px;font-weight:700;letter-spacing:.08em}
.field{height:52px;display:flex;align-items:center;margin-bottom:18px;border:1px solid rgba(115,184,216,.28);border-radius:11px;background:rgba(2,16,29,.6);transition:.18s ease}
.field:focus-within{border-color:#55cde8;box-shadow:0 0 0 3px rgba(67,194,226,.1),0 0 22px rgba(63,194,225,.09)}
.field>span{width:56px;color:#65cce5;font-size:9px;font-weight:800;letter-spacing:.12em;text-align:center;border-right:1px solid rgba(105,179,210,.18)}
.field input{min-width:0;flex:1;height:100%;padding:0 14px;border:0;outline:0;background:transparent;color:#f0fbff;font-size:14px;letter-spacing:.04em}
.field input::placeholder{color:#537a91}
.password-toggle{align-self:stretch;padding:0 14px;border:0;background:transparent;color:#70aec8;font-size:11px;cursor:pointer}
.password-toggle:hover{color:#c9f4ff}
.login-message{min-height:21px;margin-top:-5px;color:var(--danger);font-size:11px}
.login-message.success{color:var(--green)}
.login-submit{width:100%;height:52px;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px;border:1px solid #49bcd9;border-radius:11px;background:linear-gradient(100deg,#197ec0,#22a8c3 55%,#49bc9c);color:#fff;font-weight:800;letter-spacing:.1em;cursor:pointer;box-shadow:0 12px 30px rgba(20,137,184,.22);transition:.18s ease}
.login-submit:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 15px 34px rgba(20,137,184,.32)}
.login-submit:disabled{cursor:wait;opacity:.72;transform:none}
.login-submit i{font-style:normal;font-size:18px}
.login-spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.88);border-right-color:transparent;border-radius:50%;animation:login-spinner-rotate .8s linear infinite}
@keyframes login-spinner-rotate{to{transform:rotate(360deg)}}
footer{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:25px;padding-top:19px;border-top:1px solid rgba(118,181,209,.13);color:#648ba0;font-size:9px}
footer span{display:flex;align-items:center;gap:5px}
footer i{width:4px;height:4px;border-radius:50%;background:#57cde4}
.login-copyright{position:absolute;bottom:20px;margin:0;color:#40667c;font-size:9px;letter-spacing:.18em}
@media(max-width:560px){.login-page{padding:18px}.login-panel{padding:28px 22px 24px;border-radius:18px}.login-logo{width:58px;height:58px;flex-basis:58px}.login-brand{gap:12px}.login-brand h1{font-size:18px}.login-brand p{letter-spacing:.12em}.login-copyright{bottom:10px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.ambient{animation:none}.login-submit{transition:none}}

/* 登录页背景：灵动的低亮度科技感，不干扰登录面板。 */
.login-page{overflow:hidden;background:radial-gradient(ellipse at 50% 42%,rgba(39,92,131,.2),transparent 34%),linear-gradient(145deg,#03111d 0%,#061827 52%,#04121e 100%)}
.login-page::before{content:"";position:absolute;inset:-18%;z-index:-2;pointer-events:none;opacity:.32;background:repeating-radial-gradient(ellipse at 50% 48%,transparent 0 118px,rgba(98,207,232,.055) 119px 120px,transparent 121px 174px);animation:login-radar-drift 22s linear infinite}
.login-page::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;background:linear-gradient(90deg,transparent 0%,rgba(99,221,246,.08) 49%,transparent 50%,rgba(106,227,176,.06) 78%,transparent 100%),linear-gradient(180deg,transparent 0%,rgba(86,210,237,.06) 50%,transparent 100%);background-size:100% 100%,100% 9px;mix-blend-mode:screen;animation:login-scan 16s ease-in-out infinite alternate}
.tech-grid{opacity:.2;background-image:linear-gradient(rgba(89,196,226,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(89,196,226,.15) 1px,transparent 1px),linear-gradient(135deg,transparent 49.8%,rgba(106,227,176,.07) 50%,transparent 50.2%);background-size:62px 62px,62px 62px,248px 248px;background-position:center center,center center,18px 24px;mask-image:radial-gradient(ellipse at center,#000 8%,rgba(0,0,0,.82) 47%,transparent 89%);animation:login-grid-drift 28s ease-in-out infinite alternate}
.ambient{filter:blur(105px);opacity:.105;transform:translateZ(0)}
.ambient-one{top:-16%;left:-8%;background:#228eae}.ambient-two{right:-12%;bottom:-17%;background:#249d83}
@keyframes login-radar-drift{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(3deg) scale(1.035)}100%{transform:rotate(0deg) scale(1)}}
@keyframes login-scan{0%{transform:translateX(-2%);opacity:.1}100%{transform:translateX(2%);opacity:.2}}
@keyframes login-grid-drift{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.035) translate3d(1.2%,.8%,0)}}
@media(prefers-reduced-motion:reduce){.login-page::before,.login-page::after,.tech-grid{animation:none}.ambient{animation:none}}

/* 三套登录背景：每次成功登录后按 circuit → wave → city 循环，动效保持低亮度。 */
.login-page[data-theme]{
  background-color:#03111d;
  background-repeat:no-repeat;
  background-size:cover,cover;
  background-position:center,50% 50%;
  transition:background-position .8s ease;
}
.login-page[data-theme] .tech-grid{opacity:.06;mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.8) 45%,transparent 100%)}
.login-page[data-theme]::before{opacity:.24;mix-blend-mode:screen}
.login-page[data-theme]::after{opacity:.11}

.login-page[data-theme="circuit"]{
  background-image:linear-gradient(180deg,rgba(1,10,20,.18),rgba(1,12,23,.2)),url("../assets/login-bg-circuit.png");
  animation:login-circuit-pan 24s ease-in-out infinite alternate;
}
.login-page[data-theme="circuit"]::before{
  background:radial-gradient(ellipse at 50% 55%,rgba(47,164,214,.14),transparent 42%),linear-gradient(120deg,transparent 20%,rgba(92,218,239,.05) 50%,transparent 80%);
  animation:login-circuit-glow 10s ease-in-out infinite alternate;
}
.login-page[data-theme="circuit"]::after{animation:login-circuit-scan 13s ease-in-out infinite alternate}

.login-page[data-theme="wave"]{
  background-image:linear-gradient(180deg,rgba(1,12,27,.12),rgba(1,10,22,.2)),url("../assets/login-bg-wave.png");
  animation:login-wave-pan 30s ease-in-out infinite alternate;
}
.login-page[data-theme="wave"]::before{
  background:linear-gradient(112deg,transparent 20%,rgba(100,222,246,.08) 48%,transparent 72%);
  animation:login-wave-sheen 14s ease-in-out infinite alternate;
}
.login-page[data-theme="wave"]::after{animation:login-wave-scan 10s ease-in-out infinite alternate}

.login-page[data-theme="city"]{
  background-image:linear-gradient(180deg,rgba(1,12,25,.12),rgba(1,8,18,.18)),url("../assets/login-bg-city.png");
  animation:login-city-pan 36s ease-in-out infinite alternate;
}
.login-page[data-theme="city"]::before{
  background:linear-gradient(90deg,transparent 15%,rgba(75,192,234,.07) 48%,transparent 82%),radial-gradient(ellipse at 50% 62%,rgba(63,150,194,.11),transparent 46%);
  animation:login-city-breathe 12s ease-in-out infinite alternate;
}
.login-page[data-theme="city"]::after{animation:login-city-scan 16s ease-in-out infinite alternate}

/* 明显但克制的动态层：动效跟随每套背景的内容运动。 */
.motion-fx{position:absolute;inset:-28%;z-index:-1;pointer-events:none;will-change:transform,opacity,background-position;opacity:0}
.motion-fx-one{filter:blur(2px);mix-blend-mode:screen}
.motion-fx-two{filter:blur(24px);mix-blend-mode:screen}
.login-page[data-theme="circuit"] .motion-fx-one{
  opacity:.76;
  filter:blur(.5px);
  background-repeat:no-repeat;
  background-image:radial-gradient(circle at 14% 24%,rgba(91,222,245,.92) 0 2px,transparent 3px),radial-gradient(circle at 72% 18%,rgba(91,222,245,.7) 0 2px,transparent 3px),radial-gradient(circle at 83% 66%,rgba(106,227,176,.75) 0 2px,transparent 3px),radial-gradient(circle at 23% 78%,rgba(91,222,245,.64) 0 2px,transparent 3px);
  background-size:520px 360px,460px 320px,560px 420px,500px 380px;
  animation:circuit-nodes 8s ease-in-out infinite;
}
.login-page[data-theme="circuit"] .motion-fx-two{
  opacity:.42;
  filter:blur(1px);
  background-repeat:no-repeat;
  background-image:linear-gradient(90deg,transparent 0 42%,rgba(91,222,245,.7) 48%,transparent 54%),linear-gradient(28deg,transparent 0 42%,rgba(106,227,176,.52) 48%,transparent 54%);
  background-size:42% 3px,34% 3px;
  background-position:8% 28%,68% 70%;
  animation:circuit-traces 5.5s linear infinite;
}
.login-page[data-theme="wave"] .motion-fx-one{
  opacity:.72;
  filter:blur(1px);
  background:repeating-linear-gradient(105deg,transparent 0 18px,rgba(80,221,244,.12) 19px 21px,transparent 22px 44px);
  animation:wave-flow 5s linear infinite;
}
.login-page[data-theme="wave"] .motion-fx-two{
  opacity:.48;
  background:radial-gradient(ellipse at 12% 62%,rgba(71,212,230,.32),transparent 20%),radial-gradient(ellipse at 88% 60%,rgba(91,225,184,.26),transparent 20%);
  animation:wave-orb 7s ease-in-out infinite alternate;
}
.login-page[data-theme="city"] .motion-fx-one{
  opacity:.7;
  filter:blur(1px);
  background:linear-gradient(90deg,transparent 15%,rgba(73,210,242,.48) 16%,transparent 17%),linear-gradient(90deg,transparent 73%,rgba(73,210,242,.32) 74%,transparent 75%),linear-gradient(90deg,transparent 84%,rgba(106,227,176,.42) 85%,transparent 86%);
  animation:city-columns 7s ease-in-out infinite alternate;
}
.login-page[data-theme="city"] .motion-fx-two{
  opacity:.44;
  background:radial-gradient(ellipse at 50% 76%,rgba(76,190,229,.35),transparent 28%);
  animation:city-bloom 5s ease-in-out infinite alternate;
}

@keyframes login-circuit-pan{0%{background-position:center,48% 50%}100%{background-position:center,52% 50%}}
@keyframes login-circuit-glow{0%{opacity:.14;transform:scale(1)}100%{opacity:.3;transform:scale(1.04)}}
@keyframes login-circuit-scan{0%{transform:translateX(-1.5%)}100%{transform:translateX(1.5%)}}
@keyframes login-wave-pan{0%{background-position:center,46% 52%}100%{background-position:center,54% 48%}}
@keyframes login-wave-sheen{0%{opacity:.08;transform:translateX(-7%)}100%{opacity:.2;transform:translateX(7%)}}
@keyframes login-wave-scan{0%{transform:translateX(-2%);opacity:.08}100%{transform:translateX(2%);opacity:.18}}
@keyframes login-city-pan{0%{background-position:center,50% 52%}100%{background-position:center,50% 48%}}
@keyframes login-city-breathe{0%{opacity:.14;transform:scale(1)}100%{opacity:.26;transform:scale(1.035)}}
@keyframes login-city-scan{0%{transform:translateX(-1%);opacity:.08}100%{transform:translateX(1%);opacity:.16}}
@keyframes circuit-nodes{0%{transform:translate3d(-2%,-1%,0);opacity:.3}24%{opacity:.9}52%{transform:translate3d(2%,1%,0);opacity:.76}78%{opacity:.95}100%{transform:translate3d(-2%,-1%,0);opacity:.3}}
@keyframes circuit-traces{0%{transform:translate3d(-10%,-3%,0);opacity:.1}35%{opacity:.72}70%{opacity:.52}100%{transform:translate3d(12%,4%,0);opacity:.08}}
@keyframes wave-flow{0%{transform:translateX(-18%) translateY(4%) rotate(-3deg);background-position:0 0}100%{transform:translateX(18%) translateY(-4%) rotate(-3deg);background-position:260px 0}}
@keyframes wave-orb{0%{transform:translate3d(-8%,2%,0) scale(.88)}100%{transform:translate3d(8%,-2%,0) scale(1.12)}}
@keyframes city-columns{0%{transform:translate3d(-3%,2%,0);opacity:.26;background-position:0 0,0 0,0 0}50%{opacity:.8}100%{transform:translate3d(3%,-2%,0);opacity:.42;background-position:18px 0,-14px 0,10px 0}}
@keyframes city-bloom{0%{transform:scale(.86);opacity:.14}100%{transform:scale(1.14);opacity:.44}}

@media(prefers-reduced-motion:reduce){
  .login-page[data-theme],.login-page[data-theme]::before,.login-page[data-theme]::after,.motion-fx{animation:none}
}

/* 背景由 Canvas 重绘动态线条、节点、波纹和光柱；不再依赖通用遮罩叠加。 */
.login-page[data-theme]{background-image:none!important;background-color:#03111d}
.login-page[data-theme]::before,.login-page[data-theme]::after,.login-page[data-theme] .tech-grid,.login-page[data-theme] .ambient,.login-page[data-theme] .motion-fx{display:none!important}
.login-bg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;pointer-events:none}
.login-panel,.login-copyright{z-index:2}