/* 登录页 — 移动端优先 */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.login-body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  color:#0f172a;
  background:#0f172a;
  overflow-x:hidden;
}

.login-body{
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(59,130,246,.35), transparent 55%),
    linear-gradient(165deg, #0f172a 0%, #1e3a5f 48%, #0f172a 100%);
}

.login-shell{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.login-card{
  width:100%;
  max-width:400px;
  background:#fff;
  border-radius:20px;
  padding:28px 22px 24px;
  box-shadow:0 24px 48px rgba(15,23,42,.35), 0 2px 8px rgba(15,23,42,.08);
}

.login-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.login-brand-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#06b6d4;
  box-shadow:0 0 10px rgba(6,182,212,.65);
  flex-shrink:0;
}

.login-brand-text{
  font-size:15px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#1e293b;
}

.login-title{
  margin:0 0 6px;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.2;
  color:#0f172a;
}

.login-sub{
  margin:0 0 22px;
  font-size:14px;
  line-height:1.5;
  color:#64748b;
}

.login-form{display:block}

.login-field{
  display:block;
  margin-bottom:16px;
}

.login-label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#475569;
  margin-bottom:8px;
}

.login-input{
  display:block;
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  font-size:16px;
  line-height:1.25;
  color:#0f172a;
  background:#f8fafc;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}

.login-input:focus{
  outline:none;
  border-color:#3b82f6;
  background:#fff;
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}

.login-pwd-wrap{
  position:relative;
  display:flex;
  align-items:center;
}

.login-field-pwd .login-input{
  padding-right:48px;
}

.login-pwd-toggle{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:none;
  background:transparent;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  border-radius:10px;
  opacity:.55;
  -webkit-tap-highlight-color:transparent;
}

.login-pwd-toggle:active{
  opacity:1;
  background:rgba(148,163,184,.15);
}

.login-error{
  margin:0 0 14px;
  padding:10px 12px;
  font-size:14px;
  line-height:1.45;
  color:#b91c1c;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:10px;
}

.login-submit{
  display:block;
  width:100%;
  min-height:48px;
  padding:12px 16px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  color:#fff;
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:opacity .15s, transform .1s;
}

.login-submit:active:not(:disabled){
  transform:scale(.98);
}

.login-submit:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.login-footer{
  margin:20px 0 0;
  font-size:12px;
  color:rgba(226,232,240,.55);
  text-align:center;
}

@media (min-width:480px){
  .login-card{
    padding:32px 28px 28px;
  }
  .login-title{
    font-size:26px;
  }
}

@media (prefers-reduced-motion:reduce){
  .login-submit{transition:none}
  .login-submit:active:not(:disabled){transform:none}
}