/* ============================================================
   登录页:模糊动态背景 + 毛玻璃卡片
   ============================================================ */
body.login{
  height:100vh;height:100dvh;overflow:hidden;
  background:#0d1417;color:#fff;
}

/* ---------- 背景:渐变底 + 大模糊光斑漂浮 ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(160deg,#0c1512 0%,#0f1f18 45%,#0a2c1e 100%);
}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.b1{width:560px;height:560px;left:-160px;top:-160px;background:#07c160;animation:drift1 16s ease-in-out infinite alternate}
.b2{width:480px;height:480px;right:-120px;top:20%;background:#10aeff;opacity:.38;animation:drift2 20s ease-in-out infinite alternate}
.b3{width:520px;height:520px;left:18%;bottom:-220px;background:#ffc300;opacity:.22;animation:drift3 24s ease-in-out infinite alternate}
.b4{width:300px;height:300px;right:24%;bottom:-80px;background:#39d98a;opacity:.35;animation:drift1 19s ease-in-out infinite alternate-reverse}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,50px) scale(1.12)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-80px,70px) scale(.92)}}
@keyframes drift3{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,-70px) scale(1.08)}}

/* 细网格增加质感 */
.grid-overlay{
  position:absolute;inset:0;opacity:.05;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent);
}

/* ---------- 毛玻璃登录卡 ---------- */
.stage{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;padding:22px}
.card-login{
  width:400px;max-width:100%;
  background:rgba(255,255,255,.10);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.18);border-radius:22px;
  padding:36px 34px 28px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.15);
  animation:cardIn .7s cubic-bezier(.3,1.1,.5,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}
.card-login.shake{animation:shake .45s}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}
}

.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.brand .mark{
  width:46px;height:46px;border-radius:14px;flex:none;
  background:linear-gradient(135deg,#07c160,#39d98a);color:#fff;font-weight:800;font-size:21px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -4px rgba(7,193,96,.55);
  animation:markPop .8s .25s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes markPop{from{transform:scale(.4) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}
.brand h1{font-size:20px;letter-spacing:1px}
.brand small{display:block;font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.55);font-weight:500}
.tagline{font-size:12.5px;color:rgba(255,255,255,.62);margin:2px 0 26px}

/* 输入框 */
.lf{margin-bottom:16px}
.lf label{display:block;font-size:12px;color:rgba(255,255,255,.6);margin-bottom:7px;letter-spacing:.5px}
.lf .box{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:0 14px;transition:.2s;
}
.lf .box:focus-within{
  border-color:rgba(7,193,96,.85);background:rgba(255,255,255,.13);
  box-shadow:0 0 0 4px rgba(7,193,96,.16);
}
.lf .box .ico{color:rgba(255,255,255,.5);font-size:15px;flex:none;transition:.2s}
.lf .box:focus-within .ico{color:var(--green-l,#7ee2ae)}
.lf input{
  flex:1;background:transparent;border:none;outline:none;color:#fff;
  font-size:14.5px;padding:12px 0;height:46px;
}
.lf input::placeholder{color:rgba(255,255,255,.32)}

/* 登录按钮 */
#btnLogin{
  width:100%;height:46px;border:none;border-radius:12px;margin-top:8px;
  background:linear-gradient(135deg,#07c160,#2ecf7a);color:#fff;font-size:15.5px;font-weight:700;letter-spacing:6px;
  box-shadow:0 10px 24px -6px rgba(7,193,96,.55);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s,box-shadow .2s,filter .2s;
}
#btnLogin:hover{transform:translateY(-2px);box-shadow:0 14px 30px -6px rgba(7,193,96,.65);filter:brightness(1.05)}
#btnLogin:active{transform:scale(.98)}
#btnLogin:disabled{filter:grayscale(.4) brightness(.8);cursor:wait;transform:none}

/* 分隔与提示 */
.hr{display:flex;align-items:center;gap:12px;margin:24px 0 16px;color:rgba(255,255,255,.35);font-size:11px;letter-spacing:1px}
.hr::before,.hr::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}
.notice{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(255,195,0,.08);border:1px solid rgba(255,195,0,.22);
  border-radius:12px;padding:11px 13px;font-size:12px;line-height:1.7;color:#ffd76e;
}
.notice b{color:#ffe193}
.foot-note{margin-top:22px;text-align:center;font-size:11px;color:rgba(255,255,255,.35);letter-spacing:1px}

/* 错误提示条 */
.err-bar{
  display:none;align-items:center;gap:8px;margin-bottom:14px;
  background:rgba(250,81,81,.14);border:1px solid rgba(250,81,81,.35);
  color:#ff9d9d;font-size:12.5px;border-radius:10px;padding:9px 13px;
  animation:fadeUp .3s both;
}
.err-bar.show{display:flex}

@media (max-width:480px){
  .card-login{padding:30px 24px 22px}
  .brand h1{font-size:18px}
}